/* V10 geometry repairs. Existing copy, fonts, routes and raster bytes retained.
 * Personally inspected reference:
 * home-reno-remediation-v10-20261012/public/assets/selected-card-image.webp
 * Source-bound historical captures under:
 * native-claude-reviews/emondagegatineau.ca-V9/direct-five-reviews-20261011/ottawahomereno.ca-V7/output/scratch/
 * captures/H_home_1001x900_top.png
 * captures/B_home_1024x768_default__tile00_y0.png
 * captures/B_home_1440x900_default__tile00_y0.png
 * captures/A_home_1672x941_run1_scroll54_aligned.png
 * compare/VIEW_B1920_top_2-3scale.png
 * compare/VIEW_B2560_top_half-scale.png
 * captures/B_home_1440x900_spacing__tile00_y0.png
 * compare/VIEW_H_quote1001_header.png
 * captures/B_home_390x844_default__tile00_y0.png
 * refcrops/REF-x540-620_y140-240_x6.png
 */

.redesign-home .reno-projects a,
.redesign-home .reno-primary,
.redesign-inner .reno-nav-cta {
  min-width: 0;
  max-width: 100%;
}
.redesign-home .reno-projects a > span:nth-child(2),
.redesign-home .reno-primary > span:not(:last-child) {
  min-width: 0;
  overflow-wrap: anywhere;
}
.redesign-home .reno-arrow,
.redesign-home .reno-primary > span:last-child,
.redesign-inner .reno-nav-cta > span {
  flex: none;
}
.redesign-inner .reno-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
}
.redesign-home .reno-brand,
.redesign-inner .reno-brand {
  min-width: 0;
  max-width: 100%;
}
.redesign-home .reno-brand > span,
.redesign-inner .reno-brand > span {
  min-width: 0;
  white-space: normal;
}
.redesign-home .reno-proof > div,
.redesign-home .reno-proof p {
  min-width: 0;
}

/* Replace only the baked headline tail, source x574–579 / y165–220.
 * The adjacent source x580–585 strip is paper throughout this window
 * (0 dark pixels versus 16 in the masked window). Query units follow the
 * illustration crop, so the mask remains registered at every crop scale.
 */
.redesign-home .card-crop.reno-illustration::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: 0;
  top: calc(97 / 1098 * 100cqw);
  width: calc(6 / 1098 * 100cqw);
  height: calc(55 / 1098 * 100cqw);
  background-image: url('/assets/selected-card-image.webp');
  background-repeat: no-repeat;
  background-size: calc(1672 / 1098 * 100cqw) auto;
  background-position: calc(-580 / 1098 * 100cqw) calc(-165 / 1098 * 100cqw);
}

/* Source row818 begins the reference proof-band seam. Clip that seam from
 * the raster while retaining the crop's 751px aspect/layout contribution
 * and every source pixel above818, including the organic soil fade.
 * Confirmation also preserves the unmasked live heading above this image.
 */
.redesign-home .card-crop.reno-illustration > img {
  clip-path: inset(0 0 calc(123 / 941 * 100%) 0);
}

@container (min-width: 1001px) {
  /* Keep the native 574px copy track; reserve sufficient actual paper/ink
   * clearance at intermediate widths instead of shrinking the native type.
   */
  .redesign-home .reno-hero {
    grid-template-columns: minmax(574px, 34.33%) minmax(0, 1fr);
    height: auto;
    min-height: 709px;
    align-items: start;
    max-width: none;
  }
  .redesign-home .reno-copy {
    z-index: 2;
    width: auto;
    min-width: 0;
    padding-bottom: 23px;
  }
  .redesign-home .reno-copy h1 {
    width: 560px;
    max-width: none;
    white-space: normal;
  }
  .redesign-home .reno-lede,
  .redesign-home .reno-projects,
  .redesign-home .reno-primary,
  .redesign-home .reno-small {
    width: 100%;
    max-width: 485px;
  }
  .redesign-home .reno-projects a {
    height: auto;
    min-height: 72px;
  }
  .redesign-home .reno-primary {
    height: auto;
    min-height: 58px;
  }
  .redesign-home .card-crop.reno-illustration {
    top: auto;
    margin-top: -42px;
    margin-bottom: 0;
    align-self: start;
  }

  /* The original native art is 751px high and begins 42px above its row.
   * Negative margin gives it a 709px row contribution; wider art or longer
   * copy increases the row naturally before the proof band begins.
   */
  .redesign-home .reno-proof {
    height: auto;
    min-height: 122px;
    max-width: none;
    padding-bottom: 10px;
    grid-template-columns: minmax(0, 386fr) minmax(0, 396fr) minmax(0, 488fr) minmax(0, 243fr);
    gap: clamp(14px, 1.675cqw, 28px);
  }
  .redesign-home .reno-proof > div {
    gap: clamp(14px, 1.675cqw, 28px);
  }
  .redesign-home .reno-proof > div:nth-child(2) {
    gap: clamp(14px, 1.615cqw, 27px);
  }
  .redesign-home .reno-proof > div:nth-child(3) {
    gap: clamp(14px, 1.914cqw, 32px);
  }

  /* Intrinsic controls can wrap as complete items. At native 1672px the
   * reservations retain brand/nav/search/CTA/slogan starts near 75/447/
   * 1094/1140/1386px. Full-width parent geometry avoids the 1680px cap
   * interacting with body-relative absolute positions on wider screens.
   */
  .redesign-home .reno-top-inner,
  .redesign-inner .reno-top-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    height: auto;
    min-height: 110px;
    max-width: none;
    padding: 18px 3.25cqw 18px 4.485cqw;
    column-gap: 0;
    row-gap: 16px;
  }
  .redesign-home .reno-brand,
  .redesign-inner .reno-brand {
    position: static;
    inset: auto;
    flex: 0 1 clamp(280px, 22.249cqw, 372px);
  }
  .redesign-home .reno-top nav[aria-label="Main navigation"],
  .redesign-inner .reno-top nav[aria-label="Main navigation"] {
    position: static;
    inset: auto;
    flex: 0 1 auto;
    width: max-content;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0;
    margin: 5px 20px 0 0;
    overflow: visible;
  }
  .redesign-home .reno-top nav[aria-label="Main navigation"] > a,
  .redesign-inner .reno-top nav[aria-label="Main navigation"] > a {
    white-space: normal;
    min-width: 0;
  }
  .redesign-home .reno-search {
    position: relative;
    inset: auto;
    flex: 0 0 30px;
    margin: 4px 16px 0 0;
  }
  .redesign-home .reno-nav-cta,
  .redesign-inner .reno-nav-cta {
    position: static;
    inset: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    width: auto;
    min-width: 166px;
    max-width: 100%;
    white-space: normal;
    margin: 0;
  }
  .redesign-home .reno-nav-cta {
    margin-right: 80px;
  }
  .redesign-home .reno-header-slogan {
    position: static;
    inset: auto;
    flex: 0 1 230px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin: -1px 0 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .redesign-inner .reno-top nav[aria-label="Main navigation"] {
    flex: 1 1 400px;
  }
}