/* ============================================================
   Clearmatter — Subpage template (Coaching / Consulting)
   Reuses home tokens + components from styles.css.
   No new colors, no new fonts, no new motif styles.
   ============================================================ */

/* ---------------------------------------------------------
   Section 1 — Opening (subhero)
   Mirrors the home hero: left-aligned title + body, ripple
   motif drifting in from the right.
   --------------------------------------------------------- */
.subhero{
  background:var(--linen);
  padding-block:calc(clamp(140px,15vw,208px) + 14px) clamp(60px,9vw,104px);
  overflow:hidden;
}
.subhero .wrap{position:relative;z-index:1;}
.subhero__inner{max-width:760px;position:relative;z-index:1;}
.subhero__eye{display:block;margin-bottom:clamp(16px,2vw,22px);}
.subhero__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,9vw,92px);line-height:.94;letter-spacing:-.02em;
  color:var(--midnight);margin:0;
}
.subhero__body{
  display:flex;flex-direction:column;gap:1.02em;
  margin-top:clamp(26px,3.4vw,42px);max-width:58ch;
}
/* one lede treatment for every hero paragraph — matched to Home's .hero__sub
   and About's lede */
.subhero__body p{
  margin:0;text-wrap:pretty;
  font-family:var(--sans);font-weight:400;
  font-size:clamp(18px,2.1vw,22px);line-height:1.55;
  letter-spacing:0;color:var(--iron);
}
/* ripple motif, right edge — identical treatment to the home hero rings */
.subhero__motif{
  inset:0 -3% 0 auto;width:46%;max-width:660px;opacity:.72;z-index:0;
  -webkit-mask-image:linear-gradient(to right, transparent, transparent 8%, #000 42%);
          mask-image:linear-gradient(to right, transparent, transparent 8%, #000 42%);
}
.subhero__motif svg{width:100%;height:100%;}
/* Currents (Field Notes) is a horizontal-line band — align it to the hero text
   block instead of the whole section, so it sits with the H1 + standfirst rather
   than riding up behind the header. Insets mirror the .subhero padding-block. */
.subhero__motif--currents{top:calc(clamp(140px,15vw,208px) + 34px);bottom:clamp(60px,9vw,104px);}

/* Hero -> content seam (Tweak "Hero seam"): a divider under the subhero,
   content-width, sitting on the linen ground. Only the rule style varies. */
.hero-seam{margin-top:clamp(44px,6vw,76px);}
.hero-seam__rule{display:block;border-radius:2px;}
.hero-seam--line .hero-seam__rule{height:10px;background:var(--forest);}
.hero-seam--hairline .hero-seam__rule{height:1px;border-radius:0;background:var(--greige);}
.hero-seam--accent .hero-seam__rule{height:10px;width:72px;background:var(--forest);}
.hero-seam--fade .hero-seam__rule{height:3px;border-radius:0;background:linear-gradient(90deg,var(--forest),rgba(45,106,79,0));}

/* Hero dash per subpage (page-differentiation): Coaching grove, Consulting forest.
   Scoped with two classes so it outranks the variant color; the hairline variant stays
   neutral greige (it is not the colored "dash"). */
.hero-seam--dash-grove.hero-seam--line .hero-seam__rule,
.hero-seam--dash-grove.hero-seam--accent .hero-seam__rule{background:var(--dash-coaching);}
.hero-seam--dash-grove.hero-seam--fade .hero-seam__rule{background:linear-gradient(90deg,var(--dash-coaching),rgba(26,61,46,0));}
.hero-seam--dash-forest.hero-seam--line .hero-seam__rule,
.hero-seam--dash-forest.hero-seam--accent .hero-seam__rule{background:var(--dash-consulting);}
.hero-seam--dash-forest.hero-seam--fade .hero-seam__rule{background:linear-gradient(90deg,var(--dash-consulting),rgba(45,106,79,0));}

/* ---------------------------------------------------------
   Section 2 — Where the work tends to focus (three blocks)
   --------------------------------------------------------- */
.focus{background:var(--white);padding-block:clamp(72px,11vw,128px);}
.focus__eye{display:block;text-align:center;margin-bottom:clamp(30px,4.4vw,48px);}
/* Coaching focus header: left-aligned eyebrow + white serif headline + fern serif
   subhead, sharing one content-column left margin above the three columns.
   White-head + green-standfirst rhythm from the opening, adapted to dark ground. */
.focus__eye--left{text-align:left;margin-bottom:0;}
.focus__head{margin-bottom:clamp(38px,5vw,60px);}
/* Match the Home approach band (.through__quote / .through__quote-2): light-weight
   linen serif headline + smaller italic fern standfirst. */
.focus__head-h{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(34px,5.6vw,58px);line-height:1.12;letter-spacing:-.01em;
  color:var(--linen);margin:18px 0 0;max-width:100%;
  text-shadow:0 1px 14px rgba(8,12,9,.5);
}
.focus__head-h .nowrap{white-space:nowrap;}
.focus__head-sub{
  margin:.5em 0 0;max-width:40ch;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(21px,3.5vw,36px);line-height:1.24;
  color:var(--fern);text-wrap:pretty;
  text-shadow:0 1px 12px rgba(8,12,9,.45);
}
/* Coaching focus standfirst: tightened container so it sets in four lines with
   "Most people…" starting the second line on desktop/tablet. 33ch lands that
   break robustly across the clamp font sizes; below 900px it reverts to the
   full-width flow (rule further down) so it scales on tablet/mobile. */
@media (min-width:901px){.focus--coaching .focus__head-sub{max-width:33ch;}.focus--consulting .focus__head-sub{max-width:54ch;}}
/* Consulting standfirst: author-set line breaks on desktop/tablet; below 900px
   the forced breaks are dropped so the text flows to full width and re-wraps. */
@media (max-width:900px){.focus--consulting .focus__head-sub .sub-br{display:none;}}
.focus__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(30px,4vw,60px);align-items:start;
}
.focus__block{display:flex;flex-direction:column;gap:15px;}
.focus__icon{color:var(--forest);font-size:34px;line-height:1;height:34px;}
.focus__icon i{display:block;}
.focus__h{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(27px,2.9vw,36px);line-height:1.02;
  color:var(--midnight);margin:0;letter-spacing:-.01em;
}
.focus__b{
  margin:0;color:var(--slate);
  font-size:clamp(16px,1.4vw,17.5px);line-height:1.62;
  text-wrap:pretty;
}
.focus__close{
  margin-top:clamp(46px,6vw,72px);padding-top:clamp(36px,4.6vw,54px);
  border-top:1px solid rgba(188,186,180,.7);
}
.focus__close p{
  margin:0;max-width:66ch;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(23px,2.8vw,33px);line-height:1.26;
  color:var(--slate);letter-spacing:-.006em;text-wrap:pretty;
}
/* Consulting closer — same divider + big-Cormorant treatment as the Coaching
   closer above (matched pair), but forest for AA contrast on the light ground
   (fern would fail). Two paragraphs: the short-sentence cascade runs at the
   base weight; the landing line carries a touch more so the section ends on the
   authority statement, not the observation. */
.focus__close--consulting p{color:var(--forest);}
.focus__close--consulting .focus__close-run{margin:0;}
.focus__close--consulting .focus__close-land{
  margin:.62em 0 0;font-weight:500;letter-spacing:-.012em;
}

/* Focus section over a full-bleed photo (Coaching / Consulting only).
   The whole section — eyebrow, three columns, divider, closing statement — sits
   on the photo with an even scrim, mirroring the Home approach band. Opt-in via
   focus.photo, so Connect / Field Notes (no photo) keep the white ground above. */
.focus--photo{
  position:relative;isolation:isolate;overflow:hidden;
  background:#0b0e0a;color:var(--linen);
}
.focus--photo .focus-band__img{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  object-fit:cover;object-position:center 50%;
  filter:sepia(.12) saturate(1.05) brightness(.85) contrast(1.02);
}
.focus--photo .focus-band__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Graduated contrast floor (WCAG 2.1 AA at the lightest pixel behind every text
     run): heavy at the top for the small fern eyebrow, easing through the columns,
     lighter over the closing. Verified against both focus photos (brightness .85). */
  background:linear-gradient(180deg,
    rgba(9,13,9,.92) 0%,rgba(9,13,9,.86) 16%,rgba(9,13,9,.72) 27%,
    rgba(9,13,9,.60) 58%,rgba(9,13,9,.56) 88%,
    rgba(9,13,9,.51) 94%,rgba(9,13,9,.51) 100%);
}
.focus__inner{position:relative;z-index:2;width:100%;}
/* Recolor the columns + closing for the dark ground. */
.focus--photo .focus__eye,
.focus--photo .focus__icon{color:var(--fern);}
.focus--photo .focus__h{color:var(--linen);}
.focus--photo .focus__b{color:var(--linen);text-shadow:0 1px 10px rgba(8,12,9,.5);}
.focus--photo .focus__close{border-top-color:rgba(242,242,240,.26);}
.focus--photo .focus__close p,
.focus--photo .focus__close--consulting p{
  color:var(--linen);text-shadow:0 1px 14px rgba(8,12,9,.5);
}

/* ---------------------------------------------------------
   Framed focus card — Coaching + Consulting only.
   Gated by .sub--framed on <main> (added when the page has a focus
   photo). The hero fills a fixed container so the card peeks at the
   fold; the photo band becomes an inset rounded card floating on the
   linen ground, with room before the accordion below. Subpages without
   a focus photo (About, Field Notes, Connect) are untouched.
   --------------------------------------------------------- */
main.sub--framed{background:var(--linen);}
.sub--framed .subhero{min-height:720px;}
.sub--framed .focus--photo{
  margin:clamp(20px,3.4vw,44px) clamp(16px,4vw,56px) clamp(28px,4.5vw,56px);
  border-radius:18px;
}
@media (max-width:640px){
  .sub--framed .subhero{min-height:0;}
  .sub--framed .focus--photo{margin:clamp(14px,4vw,20px);}
}

/* ---------------------------------------------------------
   Section 3 — Challenges accordion (grove, dark)
   Reuses .svc.svc--coaching for the grove surface + accordion
   recolor, and .svc__drift for the ParallelDrift motif.
   --------------------------------------------------------- */
.chalsec__head{text-align:center;margin-bottom:clamp(32px,4.4vw,50px);}
.chalsec .chal{max-width:960px;margin-inline:auto;}
/* room for the longest coaching answer at narrow widths */
.chalsec .chal__item.open .chal__panel{max-height:600px;}
.chal__panel p{text-wrap:pretty;}
.chalsec__cta{
  margin:clamp(42px,6vw,66px) auto 0;max-width:56ch;
  display:flex;flex-direction:column;align-items:center;gap:clamp(22px,3vw,30px);
  text-align:center;
}
.chalsec__cta p{
  margin:0;color:var(--linen);
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,2.2vw,27px);line-height:1.32;letter-spacing:-.004em;
  text-wrap:pretty;
}

/* Light-on-dark primary button for grove surfaces (home never needed one).
   Pairs with .btn.btn--lg for sizing. */
.btn--light{background:var(--linen);color:var(--grove);border-radius:2px;}
.btn--light:hover{background:var(--fern);color:var(--grove);}

/* ---------------------------------------------------------
   Section 4 — The process (numbered steps, linen)
   --------------------------------------------------------- */
.process{background:var(--linen);padding-block:clamp(72px,11vw,128px);}
.process__head{max-width:760px;margin-bottom:clamp(38px,5.4vw,60px);}
.process__h{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(36px,5vw,60px);line-height:1.0;
  color:var(--midnight);margin:0 0 clamp(16px,2vw,22px);letter-spacing:-.014em;
}
.process__intro{
  margin:0;max-width:52ch;
  font-size:clamp(18px,1.9vw,21px);line-height:1.5;color:var(--iron);
}
.process__list{max-width:840px;}
.process__step{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,3.4vw,46px);
  align-items:start;padding:clamp(26px,3.4vw,40px) 0;
  border-top:1px solid rgba(188,186,180,.7);
}
.process__step:last-child{border-bottom:1px solid rgba(188,186,180,.7);}
.process__no{
  font-family:var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size:13px;letter-spacing:.16em;color:var(--forest);
  padding-top:.5em;white-space:nowrap;
}
.process__st{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(24px,2.7vw,32px);line-height:1.06;
  color:var(--midnight);margin:0 0 11px;letter-spacing:-.008em;
}
.process__sb{
  margin:0;max-width:62ch;color:var(--slate);
  font-size:clamp(16px,1.4vw,17.5px);line-height:1.62;
  text-wrap:pretty;
}

/* ---------------------------------------------------------
   Section 5 — Approach (six principle blocks, white)
   --------------------------------------------------------- */
.approach{background:var(--white);padding-block:clamp(72px,11vw,128px);}
.approach__head{max-width:760px;margin-bottom:clamp(40px,5.6vw,64px);}
.approach__h{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(36px,5vw,60px);line-height:1.0;
  color:var(--midnight);margin:14px 0 0;letter-spacing:-.014em;
}
.approach__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(34px,4.4vw,58px) clamp(40px,5vw,76px);
}
.approach__block{padding-top:clamp(22px,2.6vw,28px);border-top:1px solid rgba(188,186,180,.7);}
.approach__bt{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(23px,2.5vw,29px);line-height:1.1;
  color:var(--midnight);margin:0 0 13px;letter-spacing:-.008em;text-wrap:balance;
}
.approach__bb{
  margin:0;color:var(--slate);
  font-size:clamp(15.5px,1.4vw,17px);line-height:1.62;
  text-wrap:pretty;
}

/* ---------------------------------------------------------
   Section 6 — Closing CTA (grove, dark)
   --------------------------------------------------------- */
.close-cta{
  background:var(--grove);color:var(--linen);
  padding-block:clamp(92px,14vw,168px);overflow:hidden;text-align:center;
}
.close-cta.midnight{background:var(--midnight);}
.close-cta .wrap{position:relative;z-index:1;}
.close-cta__motif{inset:auto -5% -14% -5%;height:52%;opacity:.16;z-index:0;}
.close-cta__inner{position:relative;z-index:1;max-width:820px;margin-inline:auto;}
.close-cta__mark{height:clamp(46px,6vw,64px);width:auto;margin:0 auto clamp(20px,2.6vw,30px);}
.close-cta__h{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,6.4vw,82px);line-height:1.0;
  letter-spacing:-.018em;color:var(--linen);margin:0;text-wrap:balance;
}
.close-cta__b{
  margin:clamp(20px,2.6vw,30px) auto 0;max-width:46ch;
  color:var(--greige);font-size:clamp(18px,1.9vw,21px);line-height:1.55;
  text-wrap:pretty;
}
.close-cta__btn{margin-top:clamp(30px,4vw,46px);}

/* Closing CTA on a full photo background (Coaching / Consulting only).
   Mirrors the Home CTA: cover image + left/floor scrim, copy re-anchored left,
   linen text, fern wave displaced on this band. Opt-in via closing.photo, so
   Field Notes (which reuses SubClose with no photo) is untouched. */
.close-cta--photo{
  position:relative;isolation:isolate;text-align:left;
  min-height:clamp(560px,80vh,820px);
  padding-block:clamp(84px,13vw,160px);display:flex;align-items:center;
}
.close-cta__bg{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  object-fit:cover;object-position:center 46%;
  filter:sepia(.18) saturate(1.14) brightness(1.02) contrast(1.02);
}
.close-cta__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,12,9,.95) 0%,rgba(8,12,9,.86) 42%,rgba(8,12,9,.5) 64%,rgba(8,12,9,.14) 100%),
    linear-gradient(0deg,rgba(8,12,9,.62) 0%,rgba(8,12,9,.16) 36%,transparent 56%);
}
/* Bright source (Coaching, photo 54) — heavier scrim so linen + greige clear AA. */
.close-cta--bright .close-cta__scrim{
  background:
    linear-gradient(90deg,rgba(8,12,9,.97) 0%,rgba(8,12,9,.92) 40%,rgba(8,12,9,.66) 63%,rgba(8,12,9,.32) 88%,rgba(8,12,9,.18) 100%),
    linear-gradient(0deg,rgba(8,12,9,.75) 0%,rgba(8,12,9,.3) 34%,rgba(8,12,9,.05) 62%);
}
.close-cta--photo .wrap{position:relative;z-index:2;width:100%;}
.close-cta--photo .close-cta__inner{
  margin:0;max-width:600px;text-align:left;text-shadow:0 1px 10px rgba(8,12,9,.42);
}
.close-cta--photo .close-cta__mark{margin:0 0 clamp(20px,2.6vw,30px);}
.close-cta--photo .close-cta__b{margin-inline:0;}
/* Field Notes closing band: force the sentence-boundary break on desktop/tablet;
   let it flow naturally on phones so the short line doesn't strand a word. */
.close-cta__br{display:inline;}
@media (max-width:520px){.close-cta__br{display:none;}}

/* ---------------------------------------------------------
   Field Notes — held space (v0)
   A quiet placeholder until a Substack RSS feed drops into
   .fieldnotes__feed. Muted text, generous whitespace, aligned
   to the hero's text column. Not a feature — a held space.
   --------------------------------------------------------- */
.fieldnotes{background:var(--white);padding-block:clamp(56px,9vw,104px) clamp(96px,15vw,184px);}
.fieldnotes__feed{max-width:760px;}
.fieldnotes__soon{
  margin:0;color:var(--iron);
  font-size:clamp(17px,1.7vw,19px);line-height:1.6;letter-spacing:.002em;
}
/* Inline prose link — forest action color, quiet underline, matches the site. */
.fieldnotes__soon a{color:var(--forest);border-bottom:1px solid rgba(45,106,79,.34);transition:border-color .3s var(--ease);}
.fieldnotes__soon a:hover{border-color:var(--forest);}
/* Live Substack feed — rendered into .fieldnotes__feed when items load (falls
   back to .fieldnotes__soon otherwise). Reuses the "What I write about" card
   treatment (.wa__grid / .wa__card / .wa__h) on the light ground, plus a mono
   date kicker, one-line teaser, and a forest "Read on Substack" affordance. */
.fn-feed__card .wa__h{margin-bottom:0;}
.fn-feed__link{color:inherit;text-decoration:none;border:0;transition:color .3s var(--ease);}
.fn-feed__link:hover{color:var(--forest);}
.fn-feed__date{margin-top:12px;font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--iron);}
.fn-feed__ex{margin:12px 0 0;color:var(--slate);font-size:clamp(15px,1.1vw,16.5px);line-height:1.55;text-wrap:pretty;}
.fn-feed__more{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--forest);text-decoration:none;border:0;transition:gap .3s var(--ease);}
.fn-feed__more i{transition:transform .3s var(--ease);}
.fn-feed__more:hover i{transform:translateX(3px);}

/* ---------------------------------------------------------
   "What I write about" — reusable topic / feature grid (Field Notes).
   Native block type (serif card title + slate list) on a light ground,
   hairline-topped columns. 4-up desktop, 2x2 tablet, stacked mobile.
   Later the same .wa grid holds a featured-essay grid; swap card content.
   --------------------------------------------------------- */
.wa{background:var(--white);padding-block:clamp(64px,10vw,120px);}
.wa .wrap{position:relative;z-index:1;}
.wa__eye{display:block;margin-bottom:clamp(32px,4.4vw,52px);}
.wa__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3vw,44px);align-items:start;}
.wa__card{border-top:1px solid rgba(188,186,180,.7);padding-top:clamp(20px,1.6vw,26px);}
.wa__h{font-family:var(--serif);font-weight:500;font-size:clamp(21px,1.9vw,26px);line-height:1.14;letter-spacing:-.008em;color:var(--midnight);margin:0 0 clamp(15px,1.4vw,20px);text-wrap:balance;}
.wa__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.58em;}
.wa__list li{position:relative;padding-left:18px;color:var(--slate);font-size:clamp(15px,1.1vw,16.5px);line-height:1.5;text-wrap:pretty;}
.wa__list li::before{content:"";position:absolute;left:0;top:.56em;width:5px;height:5px;border-radius:50%;background:var(--forest);}
@media (max-width:900px){.wa__grid{grid-template-columns:repeat(2,1fr);gap:clamp(30px,5vw,44px);}}
@media (max-width:560px){.wa__grid{grid-template-columns:1fr;}}
/* Photo-backed variant: dark plant photo + even scrim, light text (mirrors the
   subpage focus--photo band). Strong veil so the 4-across list text clears AA. */
.wa--photo{position:relative;isolation:isolate;overflow:hidden;background:#0b0f0b;color:var(--linen);}
.wa--photo .wrap{position:relative;z-index:2;}
.wa__bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;object-fit:cover;object-position:center 52%;filter:sepia(.1) saturate(1.06) brightness(.92) contrast(1.02);}
.wa__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(8,13,9,.8) 0%,rgba(8,13,9,.72) 42%,rgba(8,13,9,.83) 100%);}
.wa--photo .wa__eye{color:var(--fern);}
.wa--photo .wa__card{border-top-color:rgba(242,242,240,.28);}
.wa--photo .wa__h{color:var(--linen);text-shadow:0 1px 12px rgba(8,12,9,.5);}
.wa--photo .wa__list li{color:var(--linen);text-shadow:0 1px 10px rgba(8,12,9,.5);}
.wa--photo .wa__list li::before{background:var(--fern);}

/* ---------------------------------------------------------
   Subhero entrance — light, matching the home hero restraint.
   Gated on .js so no-JS / print show the end state.
   --------------------------------------------------------- */
.js .subhero__eye{opacity:0;transform:translateY(18px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);}
.subhero.in .subhero__eye{opacity:1;transform:none;}
.js .subhero__title{opacity:0;transform:translateY(24px);
  transition:opacity 1s var(--ease) .08s, transform 1.05s var(--ease) .08s;}
.subhero.in .subhero__title{opacity:1;transform:none;}
.js .subhero__body{opacity:0;transform:translateY(18px);
  transition:opacity 1s var(--ease) .12s, transform 1s var(--ease) .12s;}
.subhero.in .subhero__body{opacity:1;transform:none;}
/* Hero actions (subpages: the primary "Schedule a call" ghost button + a
   "Learn more" jump to #focus). Laid out as a flex row to mirror Home. */
.subhero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(28px,3.6vw,40px);}
.js .subhero__cta{opacity:0;transform:translateY(14px);
  transition:opacity 1s var(--ease) .2s, transform 1s var(--ease) .2s;}
.subhero.in .subhero__cta{opacity:1;transform:none;}

/* ---------------------------------------------------------
   Responsive — follows the home mobile patterns
   --------------------------------------------------------- */
@media (max-width:900px){
  .focus__grid{grid-template-columns:1fr;gap:clamp(38px,7vw,50px);}
  .focus__head-sub{max-width:100%;}
  .approach__grid{grid-template-columns:1fr;gap:clamp(32px,6vw,42px);}
  .subhero__motif{width:62%;opacity:.44;}
  /* Copy scrim: once the layout narrows, the right-anchored motif rides under the
     copy. A linen wash behind the text (above the motif, below the text) keeps the
     copy on a clean ground; it fades out to the right so the motif still shows past
     the text. Linen-on-linen means the top/bottom/left edges are seamless. */
  .subhero__inner::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    inset:-16% -4% -18% -42%;
    background:linear-gradient(90deg, var(--linen) 0%, var(--linen) 58%, rgba(242,242,240,.85) 74%, rgba(242,242,240,0) 100%);
  }
}
@media (max-width:640px){
  .process__step{grid-template-columns:1fr;gap:6px;}
  .process__no{padding-top:0;}
  /* Tune the opening hierarchy for small screens: the one-word headline tracks
     the viewport instead of sitting at a large fixed floor, and the body stays
     comfortably readable so the title/lede/body relationship holds. */
  .subhero{padding-block:calc(clamp(94px,26vw,130px)) clamp(44px,9vw,60px);}
  .subhero__title{font-size:clamp(38px,11vw,56px);line-height:.97;}
  .subhero__body{margin-top:clamp(20px,5vw,28px);gap:.9em;}
  .subhero__body p{font-size:18px;line-height:1.55;}
  .subhero__motif{width:76%;opacity:.34;}
  /* Wider motif on phones — hold the wash solid a little further before it fades. */
  .subhero__inner::before{background:linear-gradient(90deg, var(--linen) 0%, var(--linen) 64%, rgba(242,242,240,.85) 80%, rgba(242,242,240,0) 100%);}
  .subhero__motif--currents{top:clamp(94px,26vw,130px);bottom:clamp(44px,9vw,60px);}
  .focus--photo{padding-block:clamp(56px,12vw,88px);}
  .close-cta--photo{min-height:clamp(460px,74vh,620px);}
  .close-cta--photo .close-cta__inner{max-width:100%;}
}

@media (prefers-reduced-motion: reduce){
  .subhero__title,.subhero__body,.subhero__cta,.subhero__eye{opacity:1 !important;transform:none !important;transition:none !important;}
}