/* =====================================================================
   Home page — page-specific refinements (loaded after main.css)
   Scoped to home-only hooks: .home-sh (shareholders band), .film-band.
   The mission band (.mission-band) is off limits here.
   ===================================================================== */

/* ---------- shareholders band: the printed page behind "We are 200+ families" ----------
   Set larger and lighter, like a letterpress proof sheet rather than fine print, so it
   reads as deliberate typography and never competes with the 14–16px card captions.
   Strongest only in the band's top padding: by the headline's cap height it has dropped to 40%,
   so "We are 200+ families…" sits on clean paper, and it stays at 40% to the foot. */
.home-sh .pagetext{
  --pt-a:56px;--pt-b:120px;
  font-size:clamp(1.35rem,1.75vw,1.9rem);
  line-height:1.58;
  letter-spacing:-.004em;word-spacing:.04em;
  font-weight:360;
  opacity:.075;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 var(--pt-a),rgba(0,0,0,.4) var(--pt-b),rgba(0,0,0,.4) 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 var(--pt-a),rgba(0,0,0,.4) var(--pt-b),rgba(0,0,0,.4) 100%);
}
@media (max-width:860px){
  .home-sh .pagetext{font-size:1.12rem;line-height:1.56;opacity:.07;--pt-a:36px;--pt-b:84px}
}

/* a card may carry the Shareholders page's photo zoom (style="--z:…;--zo:…"), so a face sits the same in both grids */
.home-inv .inv-card .ph img{scale:var(--z,1);transform-origin:var(--zo,50% 50%)}

/* headline: keep the two-line break even at narrow widths */
.home-sh .section-head .d2{text-wrap:balance}

/* ---------- founder film band ---------- */
.film-band .film-side .d2{text-wrap:balance}

/* the ghost CTA reads as a solid object over the wallpaper. Resting state only: at this specificity
   it would otherwise beat .btn--ghost:hover and leave paper-white text on paper on hover. */
.home-sh .home-inv__cta .btn--ghost:not(:hover){--bg:var(--paper-2)}

/* ---------- hero: keep the paper-white slogan legible on bright reel frames ----------
   The poster is dimmed (.6 over pine-deep); the live reel now matches, and the scrim adds
   a soft pool of shade behind the headline zone. Home only; other heroes keep their own ::after. */
/* The reel plays fully opaque, like normal. (A see-through reel let the still poster show through
   underneath — a frozen double exposure the client rejected.) Once the reel is live the poster is
   removed, and only a light pool of shade sits behind the slogan for legibility. */
.hero--video .hero-bg.is-live img{opacity:0;transition:opacity .4s 1.2s}
.hero--video .hero-bg::after{
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%,rgba(13,47,45,.22),transparent 72%),
    linear-gradient(180deg,rgba(13,47,45,.42) 0%,rgba(13,47,45,.16) 48%,rgba(13,47,45,.55) 100%);
}
/* The slogan sits in the middle of the screen (client request 2026-09-23). The scroll hint's
   margin-top:auto used to take all the free space and push the slogan up to ~29% of the viewport;
   now the free space splits evenly above and below the slogan, and the top padding is just the
   header so the slogan's centre lands on the viewport's centre. */
.hero--video{padding-top:var(--hdr)}
.hero--video>.container--wide{margin-block:auto}
.hero--video .hero-foot{margin-top:0}

/* ---------- closing band: CTA left, The Service Report right ---------- */
/* on the page grid: same left edge as the shareholder grid, film band and footer */
.cta-band--split .inner{align-items:start;max-width:var(--wide)}
/* the firm's positioning line as the closing headline: one sentence in three clauses, a clause to a line
   (client: "2 or 3 lines max"). Sized off the column so the longest clause fits; on a phone the clauses
   run together and the sentence balances over three lines instead. */
.cta-band--split .d2.cta-line{font-size:clamp(1rem,4.6vw,1.2rem);line-height:1.26;text-wrap:balance}
.cta-line .cta-br{display:none}
@media (min-width:600px){
  .cta-band--split .d2.cta-line{font-size:clamp(1.3rem,3.4vw,1.75rem);text-wrap:balance}
  .cta-line .cta-br{display:inline}
}
@media (min-width:1101px){
  .cta-band--split .d2.cta-line{font-size:clamp(1.3rem,2vw,2rem)}
}
/* the two columns stack a little earlier here than on other pages (880px), so the longest clause never has to wrap */
@media (max-width:1100px){
  .cta-band--split .inner{grid-template-columns:1fr;gap:clamp(2rem,6vw,3rem)}
  .cta-band--split .cta-split__copy{padding-right:0}
  .cta-band--split .cta-split__nl{padding:clamp(2rem,6vw,3rem) 0 0;border-left:0;border-top:1px solid var(--line-dark)}
}
@media (max-width:560px){
  .cta-band--split .nl-form .btn{flex:1 1 100%;justify-content:center}
}