/* ============================================================
   Clearmatter — Home (canonical, Home-only styles)
   Photo treatments layered on styles.css: the through-line photo band,
   the photo-backed CTA, and the Welcome wave accent. Scoped to Home
   classes only; other pages don't load this file.
   ============================================================ */
main{background:var(--linen);}

/* ---- Change 1 · wide cinematic strip (photo 9), hero → Welcome ---- */
/* Full-bleed, condensed height — a short cinematic strip, no text. */
.photostrip{width:100%;overflow:hidden;line-height:0;background:var(--linen);}
.photostrip img{
  width:100%;height:clamp(190px,30vh,340px);
  object-fit:cover;object-position:center 46%;
  filter:sepia(.18) saturate(1.14) brightness(1.06) contrast(1.02);
}

/* ---- Testing · fern wave accent at the bottom of Welcome ---- */
/* The through-line's old fern WaveMotif, brought down low into the Welcome
   section as a quiet accent, in shades of fern. Revert: remove this block +
   the .welcome__waves node, swap WelcomeLined→Welcome. */
.welcome--lined{overflow:hidden;}
.welcome--lined .wrap{position:relative;z-index:1;}
.welcome__waves{top:auto;left:-4%;right:-4%;bottom:0;height:clamp(110px,13vw,172px);z-index:0;opacity:.5;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 68%,transparent 100%);
          mask-image:linear-gradient(to top,#000 0%,#000 68%,transparent 100%);}
.welcome__waves svg{width:100%;height:100%;display:block;}
.welcome__waves svg path{stroke-width:1.3;}
.welcome__waves svg path:nth-child(5n+1){stroke:#3E7D62;}
.welcome__waves svg path:nth-child(5n+2){stroke:#5AA07E;}
.welcome__waves svg path:nth-child(5n+3){stroke:#7DB99A;}
.welcome__waves svg path:nth-child(5n+4){stroke:#98C8AE;}
.welcome__waves svg path:nth-child(5n){stroke:#6BAE8C;}

/* ---- Change 2 · through-line beacon (photo 42 behind H2 + sub-line) ---- */
/* The photo band displaces the wave on its band only; the slate
   commitments band below keeps the built dark treatment. */
.beacon{padding-block:0;overflow:hidden;}
.beacon__band{
  position:relative;isolation:isolate;overflow:hidden;background:#0c0e0a;
  min-height:clamp(430px,60vh,620px);
  display:flex;align-items:center;
  padding-block:clamp(72px,12vw,140px);
}
.beacon__img{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  object-fit:cover;object-position:center 44%;
  filter:sepia(.16) saturate(1.12) brightness(1.02) contrast(1.02);
}
/* left scrim — copy column stays legible over the dark tree mass */
.beacon__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(12,20,15,.95) 0%,
    rgba(12,20,15,.80) 30%,
    rgba(12,20,15,.34) 60%,
    rgba(12,20,15,.06) 86%,
    transparent 100%);
}
.beacon__inner{position:relative;z-index:2;width:100%;}
.beacon__inner .through__eye{display:block;}
.beacon__inner .through__quote{margin-top:18px;max-width:min(540px,88%);}
/* slate commitments band — built dark treatment, foot + commitments */
.beacon__slate{background:var(--midnight);color:var(--linen);padding-block:clamp(64px,10vw,120px);}
.beacon.grove .beacon__slate{background:var(--grove);}
.beacon__slate .through__foot{margin-top:0;}
.beacon__slate .commit{margin-top:clamp(40px,6vw,72px);}

/* Change 2 · VARIANT (testing) — photo 42 as the entire section background,
   no solid slate band. Single scrim darkens the whole field, heavier at the
   bottom so the full-width commitments stay legible over the rays. Revert:
   drop `beacon--full` in app-phototest.jsx (back to band + slate) and remove
   this block. */
.beacon--full{position:relative;isolation:isolate;overflow:hidden;background:#0c0e0a;
  margin:clamp(20px,3.4vw,44px) clamp(16px,4vw,56px);border-radius:18px;}
.beacon--full .beacon__img{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  object-fit:cover;object-position:center 42%;
  filter:sepia(.16) saturate(1.08) brightness(.72) contrast(1.03);
}
.beacon--full .beacon__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Contrast floor (AA at the brightest pixel behind each text run): heavy left
     for the quote/foot column, heavy bottom for the full-width commitments. */
  background:
    linear-gradient(90deg,rgba(12,20,15,.88) 0%,rgba(12,20,15,.66) 50%,rgba(12,20,15,.44) 80%,rgba(12,20,15,.32) 100%),
    linear-gradient(180deg,rgba(12,20,15,.04) 0%,rgba(12,20,15,.16) 45%,rgba(12,20,15,.52) 78%,rgba(12,20,15,.84) 100%);
}
.beacon--full .beacon__inner{
  position:relative;z-index:2;width:100%;
  padding-block:clamp(88px,14vw,172px);
}
.beacon--full .through__quote{margin-top:18px;max-width:min(560px,90%);}
/* keep "path forward." together — kills the widow, still breaks cleanly
   (before "path") down to mobile */
.beacon--full .through__quote .nowrap{white-space:nowrap;}
.beacon--full .through__foot{margin-top:clamp(40px,6vw,72px);}
.beacon--full .commit{margin-top:clamp(44px,6vw,76px);}
/* body copy over the photo reads linen (matches the Coaching/Consulting focus bands) */
.beacon--full .through__foot,.beacon--full .commit__b{color:var(--linen);}

/* ---- Change 3 · close CTA on a full photo background (photo 28) ---- */
.cta--photo{
  position:relative;isolation:isolate;overflow:hidden;background:#0c0e0a;
  min-height:clamp(600px,84vh,860px);
  padding-block:clamp(96px,15vw,180px);
  display:flex;align-items:center;
}
.cta__bg{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  object-fit:cover;object-position:center 50%;
  filter:sepia(.18) saturate(1.1) brightness(.72) contrast(1.03);
}
/* left column scrim + a soft floor darken under the button row */
.cta__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Contrast floor (AA at the brightest pixel behind the left text column). */
  background:
    linear-gradient(90deg,rgba(8,12,9,.80) 0%,rgba(8,12,9,.68) 44%,rgba(8,12,9,.40) 64%,rgba(8,12,9,.10) 100%),
    linear-gradient(180deg,rgba(8,12,9,.03) 0%,rgba(8,12,9,.12) 50%,rgba(8,12,9,.46) 100%);
}
.cta--photo .wrap{position:relative;z-index:2;width:100%;}
.cta--photo .cta__block{max-width:600px;text-shadow:0 1px 10px rgba(8,12,9,.4);}
.cta--photo .cta__mark{filter:brightness(0) invert(1);opacity:.92;}
.cta--photo .cta__title{color:var(--linen);}
.cta--photo .cta__lede{color:var(--linen);}
.cta--photo .cta__write{color:var(--greige);border-bottom-color:rgba(242,242,240,.4);}
.cta--photo .cta__write:hover{color:var(--fern);border-color:var(--fern);}
.cta--photo :focus-visible{outline-color:var(--linen);}

/* ---- A11y (July 18 punch list) ---- */
/* 2 · "Explore consulting" dipped to ~3.6:1 where the align motif crossed the
   green link text on linen. Grove deepens it to ~10:1 and holds it above the
   motif, so the crossing lines no longer erode the ratio. */
.svc--consulting .svc__explore{position:relative;z-index:1;}
.svc--consulting .svc__explore .link{color:var(--grove);}
.svc--consulting .svc__explore .link:hover{border-color:var(--grove);}