/* ===========================================================================
   CONCEPT A — shared structure for all palette variants.

   Structure, typography, spacing, media handling and the registration-bracket
   signature live here ONCE, shared by /a1/, /a2/, /a3/ and /a4/.

   Round 2: A1 is the dark reference. A2, A3 and A4 share one light section
   system and differ ONLY in their hero block. Everything below the hero is
   identical across the three. See "Variant review, round 2" in DESIGN.md.

   How colour works here
   ---------------------
   Brand values are fixed (--paper, --ink, --moss …). Everything a component
   draws with is a *contextual* token (--c-*) whose value depends on the surface
   it sits on. Light values are the default on :root; the dark bundle is applied
   further down to whichever surfaces a given variant marks dark. Components
   therefore never know which variant they are in.

   The sanctioned structural differences are the four hero blocks, each confined
   to its own marked section at the end of this file. Nothing else may branch on
   the variant.
   =========================================================================== */

:root{
  /* ---- brand values: identical in every variant ---- */
  --paper:#F4F3EC;
  --paper-2:#EAEDE3;
  --ink:#13201A;
  --ink-soft:#2A3B33;
  --moss:#2E5C46;
  --moss-deep:#1E4032;
  --sage:#E3E8DC;
  --sage-line:#CBD4C4;
  --mist:#8FA398;
  --leaf:#8FD6A9;

  --radius:24px;
  --maxw:1160px;
  --display:'Space Grotesk',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'IBM Plex Mono',monospace;

  /* ---- contextual tokens: LIGHT surface defaults ---- */
  --c-bg:var(--paper);
  --c-fg:var(--ink);
  --c-fg-soft:var(--ink-soft);
  --c-fg-mute:#5A6D63;   /* AA on paper, paper-2 and the card tint; see DESIGN.md */
  --c-eyebrow:var(--moss);
  --c-accent:var(--moss);
  --c-bracket:var(--moss);
  --c-hairline:var(--sage-line);
  --c-greek:var(--sage);
  --c-card-bg:#fff;
  --c-card-border:var(--sage-line);
  --c-btn-ghost-border:var(--ink);
  --c-btn-ghost-fg:var(--ink);
  --c-dot:var(--moss);

  /* ---- chrome that is not surface-contextual. These carry A1's values as the
     baseline; A2 overrides them for a light page. ---- */
  --nav-bg:rgba(19,32,26,.72);
  --nav-border:rgba(255,255,255,.08);
  --nav-fg:#F0F4EE;
  --nav-link:#C7D2C9;
  --nav-mark:var(--mist);
  --nav-cta-bg:#F0F4EE;
  --nav-cta-fg:var(--ink);

  --badge-bg:var(--sage);
  --badge-fg:var(--moss-deep);
  --c-stmt-old:#7C8377;  /* lightest grey-green clearing 3.5:1 on paper */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--c-bg);color:var(--c-fg);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------------------------------------------------------------------------
   DARK SURFACE BUNDLE
   One declaration, applied to whichever surfaces are dark.

   The closing block is dark in EVERY variant — it is the single dark bookend
   that closes the light variants, and it carries the final CTA and the footer
   as one composition. Breakers keep light type in all variants too, though the
   light variants drop the full scrim for a bottom-edge gradient (see the light
   section system below). A1 additionally keeps its dark hero and dark banded
   sections.
   --------------------------------------------------------------------------- */
.breaker,
.closing,
[data-variant="a1"] .hero,
[data-variant="a1"] section.dark:not(.closing):not(.breaker){
  --c-bg:var(--ink);
  --c-fg:#EDF2EC;
  --c-fg-soft:#B9C6BE;
  --c-fg-mute:#93A79A;
  --c-eyebrow:var(--mist);
  --c-accent:var(--leaf);
  --c-bracket:var(--mist);
  --c-hairline:rgba(255,255,255,.16);
  --c-greek:rgba(255,255,255,.10);
  --c-card-bg:rgba(255,255,255,.05);
  --c-card-border:rgba(255,255,255,.10);
  --c-btn-ghost-border:rgba(255,255,255,.35);
  --c-btn-ghost-fg:#EDF2EC;
  --c-dot:var(--mist);
}

/* ---------- utilities ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-eyebrow);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--c-eyebrow)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.05;letter-spacing:-.02em}
h2{font-size:clamp(32px,4.6vw,54px);max-width:16ch}
.standfirst{font-size:clamp(17px,1.8vw,20px);color:var(--c-fg-soft);max-width:56ch;margin-top:20px}

/* greeked body copy = skeleton bars */
.greek{margin-top:22px;max-width:560px}
.greek span{display:block;height:11px;border-radius:6px;background:var(--c-greek);margin-bottom:10px}

/* signature: registration corner brackets */
.framed{position:relative}
.framed::before,.framed::after,
.framed .bk::before,.framed .bk::after{
  content:"";position:absolute;width:18px;height:18px;border-color:var(--c-bracket);border-style:solid;border-width:0;z-index:3}
.framed::before{top:-9px;left:-9px;border-top-width:2px;border-left-width:2px}
.framed::after{top:-9px;right:-9px;border-top-width:2px;border-right-width:2px}
.framed .bk::before{bottom:-9px;left:-9px;border-bottom-width:2px;border-left-width:2px}
.framed .bk::after{bottom:-9px;right:-9px;border-bottom-width:2px;border-right-width:2px}

/* media */
.media{border-radius:var(--radius);overflow:hidden;background:
  radial-gradient(120% 120% at 20% 10%, #37544600 0%, #21362C 60%),
  linear-gradient(150deg,#3E5C4C 0%, #22392F 55%, #14231C 100%);
  display:flex;align-items:flex-end;min-height:280px;position:relative}
.media img,.m-still,.m-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the still sits under the video so reduced motion can simply hide the video */
.m-still{background-position:center;background-size:cover;background-repeat:no-repeat}
.m-vid{border:0}

/* buttons */
.btn{font-family:var(--display);font-weight:600;font-size:16px;display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;transition:transform .18s ease, background .18s ease}
.btn svg{width:16px;height:16px}
.btn:hover{transform:translateY(-1px)}
.btn-solid{background:var(--moss);color:#F4F6F1}
.btn-solid:hover{background:var(--moss-deep)}
.btn-ghost{border:1.5px solid var(--c-btn-ghost-border);color:var(--c-btn-ghost-fg)}
.btn-ghost:hover{border-color:var(--c-fg)}
.btn-ink{border:1.5px solid var(--c-fg);color:var(--c-fg)}

/* sections */
section{padding:110px 0}
section.dark:not(.closing):not(.breaker){background:var(--c-bg);color:var(--c-fg)}
.closing{background:var(--c-bg);color:var(--c-fg)}

/* ---------- nav ---------- */
/* Scoped to a class, not the bare element: the shared review bar injects its
   own markup into this page and must not inherit the site nav's styling. */
.sitenav{position:fixed;top:var(--topbar-h,34px);left:0;right:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--nav-border)}
.sitenav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-family:var(--display);font-weight:700;font-size:19px;color:var(--nav-fg);letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.logo i{width:12px;height:12px;border:2px solid var(--nav-mark);border-radius:3px;display:inline-block;border-right-color:transparent;border-bottom-color:transparent}
.navlinks{display:flex;gap:30px;font-size:14.5px;color:var(--nav-link)}
.navlinks a:hover{color:var(--nav-fg)}
.nav-cta{font-family:var(--display);font-weight:600;font-size:14.5px;background:var(--nav-cta-bg);color:var(--nav-cta-fg);padding:9px 18px;border-radius:999px}
@media(max-width:820px){.navlinks{display:none}}

/* ---------- hero ---------- */
.hero{background:var(--c-bg);color:var(--c-fg);padding:0;min-height:96vh;display:flex;align-items:stretch;position:relative;overflow:hidden}
.hero-media{position:absolute;inset:0;background:
  radial-gradient(90% 70% at 70% 20%, #2C4A3B 0%, transparent 60%),
  linear-gradient(180deg,#182B22 0%, #101C16 70%, #0C1611 100%)}
/* the original hero gradient re-applied over the footage, so tone and text
   contrast stay as drawn rather than being replaced */
.hero-scrim{position:absolute;inset:0;background:
  radial-gradient(90% 70% at 70% 20%, #2C4A3B 0%, transparent 60%),
  linear-gradient(180deg,#182B22 0%, #101C16 70%, #0C1611 100%);
  opacity:.82}
.hero .wrap{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:96px;padding-top:160px;width:100%}
.hero h1{font-size:clamp(56px,9vw,124px);font-weight:700;letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--c-accent)}
.hero p{margin-top:26px;font-size:clamp(17px,1.9vw,21px);max-width:52ch;color:var(--c-fg-soft)}
.hero-ctas{margin-top:38px;display:flex;gap:16px;flex-wrap:wrap}
.hero-meta{margin-top:64px;display:flex;gap:34px;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px;color:var(--c-fg-mute);letter-spacing:.04em}
.hero-meta b{color:var(--c-fg);font-weight:500}

/* ---------- problem ---------- */
.problem .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.problem-points{display:flex;flex-direction:column;gap:0;margin-top:8px}
.ppoint{padding:26px 0;border-top:1px solid var(--c-hairline)}
.ppoint:last-child{border-bottom:1px solid var(--c-hairline)}
.ppoint h3{font-size:20px;margin-bottom:8px}
.ppoint .greek{margin-top:10px;max-width:100%}
@media(max-width:820px){.problem .grid{grid-template-columns:1fr}}

/* ---------- how it works: staggered sequence ----------
   A vertical walk down a hairline, blocks alternating left and right, no boxes
   — closer to a field procedure than a product grid.

   Two elements per step. `.fstep` is a half-width TRACK: it reaches the centre
   spine, so the dot can sit on the line at the block's own eyebrow height.
   `.fstep-card` is the block, and it hugs its content — capped at a readable
   measure and pushed to its outer edge, which leaves clear air between the card
   and the spine. Letting the card span the whole track is what previously put a
   field of empty background beside every paragraph.

   The text inside is left-aligned on BOTH sides. Mirroring it on the left-hand
   blocks made a ragged left edge in the middle of the page and gave the two
   sides different reading starts; the zigzag is carried by the blocks, which is
   enough. */
/* --fstep-dot-center is where the dot's centre sits inside a card, measured
   from the card's top: the top padding plus half the eyebrow's line box (12px
   mono at 1.6 = 19.2px). The dot and, on mobile, the spine segment are both
   placed from it, so neither can drift from the eyebrow or from each other. */
.flow{position:relative;margin-top:64px;--fstep-measure:450px;--fstep-pad-top:30px;
  --fstep-dot-center:calc(var(--fstep-pad-top) + 9.6px)}
.flow::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:1px;background:var(--c-hairline)}
.fstep{position:relative;width:50%}
.fstep:nth-child(odd){margin-right:auto;padding-right:46px}
.fstep:nth-child(even){margin-left:auto;padding-left:46px}
/* Consecutive blocks ride up into each other by about a third of their height.
   Stacked end to end, the two left-hand blocks sat either side of a tall void,
   because the right-hand block between them held the column open. */
.fstep + .fstep{margin-top:-64px}
.fstep-card{max-width:var(--fstep-measure);padding:var(--fstep-pad-top) 0}
.fstep:nth-child(even) .fstep-card{margin-left:auto}
/* The dot sits on the spine at the eyebrow's mid-line — see --fstep-dot-center
   above, less half the dot to place its box. Driving it off a variable rather
   than a literal is what keeps it from drifting when a context changes the
   card's padding. */
.fstep::after{content:"";position:absolute;top:calc(var(--fstep-dot-center) - 4.5px);
  width:9px;height:9px;border-radius:50%;background:var(--c-dot)}
.fstep:nth-child(odd)::after{right:-4.5px}
.fstep:nth-child(even)::after{left:-4.5px}
.fstep .n{font-family:var(--mono);font-size:12px;color:var(--c-fg-mute);letter-spacing:.12em}
.fstep h3{font-size:26px;margin:12px 0 10px}
.fstep p{font-size:15.5px;color:var(--c-fg-soft)}
@media(max-width:820px){
  /* one column, spine down the left, blocks full width and back in sequence */
  .flow{--fstep-gap:22px}
  .fstep{width:100%;padding-left:32px;padding-right:0;margin:0}
  .fstep:nth-child(odd){padding-right:0;padding-left:32px;margin-right:0}
  .fstep:nth-child(even){padding-left:32px;margin-left:0}
  /* Stacked, the cards need air between them. Resetting the desktop overlap to
     zero and putting nothing in its place left adjacent cards touching, and
     their rounded corners met and pinched into an hourglass at every join. */
  .fstep + .fstep{margin-top:var(--fstep-gap)}
  .fstep-card{max-width:none}
  .fstep:nth-child(even) .fstep-card{margin-left:0}
  .fstep::after{left:0;right:auto}
  .fstep:nth-child(odd)::after{right:auto;left:0}

  /* The spine runs from the first dot to the last, not from the top of the flow
     to its bottom. A single line cannot know where those dots are — the last
     card's height depends on its copy — so each step draws its own segment
     instead, from its own dot down to the next one. The last step draws none,
     and that is what ends the line on the final dot.

     The dot is ::after and the segment ::before, so the dot paints over the top
     of the line it starts from. */
  .flow::before{display:none}
  .fstep:not(:last-child)::before{
    content:"";position:absolute;left:4px;width:1px;
    top:var(--fstep-dot-center);
    height:calc(100% + var(--fstep-gap));
    background:var(--c-hairline);
  }
}

/* ---------- full-bleed video breakers ----------
   Edge to edge, one line of type, no card and no button. Dark in every
   variant — these are the cinematic moments. */
.breaker{position:relative;padding:0;min-height:64vh;display:flex;align-items:center;overflow:hidden;background:var(--c-bg)}
.breaker-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,20,15,.62) 0%,rgba(11,20,15,.78) 100%)}
/* width:100% so the wrap does not shrink-to-fit as a flex item — the line must
   sit on the same left column as every other section */
.breaker .wrap{position:relative;z-index:2;width:100%}
.breaker p{font-family:var(--display);font-weight:600;font-size:clamp(28px,4.4vw,56px);line-height:1.1;letter-spacing:-.025em;color:var(--c-fg);max-width:18ch}

/* ---------- claims: asymmetric row ----------
   Varied media heights plus vertical offsets, so the three do not read as
   identical product cards. */
.claims-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.claim-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px;align-items:start}
.claim{background:var(--c-card-bg);border:1px solid var(--c-card-border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease}
.claim:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(19,32,26,.25)}
.claim .media{border-radius:0;min-height:0}
.claim:nth-child(1){margin-top:0}
.claim:nth-child(1) .media{height:310px}
.claim:nth-child(2){margin-top:64px}
.claim:nth-child(2) .media{height:200px}
.claim:nth-child(3){margin-top:26px}
.claim:nth-child(3) .media{height:258px}
.claim-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.claim-org{font-family:var(--display);font-weight:600;font-size:19px}
.claim-title{font-size:15px;color:var(--c-fg-soft)}
.claim-meta{margin-top:auto;padding-top:16px;border-top:1px dashed var(--c-card-border);font-family:var(--mono);font-size:11.5px;color:var(--c-fg-mute);display:flex;flex-direction:column;gap:5px}
.claim-meta b{color:var(--c-accent);font-weight:500}
.badge{align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.08em;background:var(--badge-bg);color:var(--badge-fg);padding:5px 11px;border-radius:999px}
@media(max-width:920px){
  .claim-cards{grid-template-columns:1fr}
  .claim,.claim:nth-child(2),.claim:nth-child(3){margin-top:0}
  .claim .media,.claim:nth-child(1) .media,.claim:nth-child(2) .media,.claim:nth-child(3) .media{height:240px}
}

/* ---------- stats ---------- */
.stats{border-top:1px solid var(--c-hairline);border-bottom:1px solid var(--c-hairline)}
.stats .row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stat{padding:10px 0}
.stat .num{font-family:var(--display);font-weight:700;font-size:clamp(44px,5.5vw,72px);letter-spacing:-.03em;color:var(--c-fg)}
.stat .num span{color:var(--c-accent)}
.stat .lbl{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-fg-mute);margin-top:6px}
@media(max-width:820px){.stats .row{grid-template-columns:1fr}}

/* ---------- why: editorial statement ----------
   Same words as the old ✓/✗ cards, set as one prose passage in display type:
   the old way muted, ours in ink. No table, no icons, no boxes. */
.stmt{margin-top:66px;display:flex;flex-direction:column;gap:56px}
.stmt-part{max-width:46ch}
.stmt-part b{display:block;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.stmt-part p{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.6vw,33px);line-height:1.26;letter-spacing:-.02em}
/* The passage is display size (large-text threshold); its label is 11.5px mono
   and needs the small-text ratio, so the two cannot share one value. */
.stmt-old{color:var(--c-stmt-old)}
.stmt-old b{color:var(--c-fg-mute)}
.stmt-new{margin-left:auto;text-align:right;color:var(--c-fg)}
.stmt-new b{color:var(--c-accent)}
@media(max-width:820px){
  .stmt-new{margin-left:0;text-align:left}
  .stmt{gap:44px}
}

/* ---------- audiences ---------- */
.aud{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.aud-card{border:1px solid var(--c-card-border);border-radius:var(--radius);padding:30px 28px;background:var(--c-card-bg)}
.aud-card h3{font-size:20px;margin-bottom:10px}
.aud-card .greek{max-width:100%;margin-top:14px}
.aud-card .link{font-family:var(--mono);font-size:12.5px;color:var(--c-accent);margin-top:18px;display:inline-block}
@media(max-width:820px){.aud{grid-template-columns:1fr}}

/* ---------- team ---------- */
/* Capped so the portraits land at ~170px — the size the original six-column
   grid produced. Left-aligned to the wrap edge like every other section. */
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:56px;max-width:740px}
/* the gradient stays as the loading/fallback bed behind the portrait */
.member .ph{aspect-ratio:1/1;border-radius:18px;background:linear-gradient(160deg,#DCE3D6, #C6D2C2);position:relative;overflow:hidden}
.member .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.member p{font-size:13.5px;font-weight:600;margin-top:10px}
.member span{font-size:12px;color:var(--c-fg-mute)}
@media(max-width:820px){.team-grid{max-width:none}}
/* two-up: reserve two name lines here only, where the longer names wrap and
   would otherwise stagger [role]. On wider screens they fit on one line. */
@media(max-width:640px){
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:360px}
  .member p{min-height:3.2em}
}

/* ---------- the closing composition ----------
   The page ends in ONE dark composition: footage, dissolving into ink, then the
   closing challenge, a rule, and the footer columns. Nothing in it carries a
   surface of its own — it all inherits the block's — so there is no seam
   anywhere between the top of the footage and the legal line at the bottom.

   The footage was a separate breaker section immediately above this block,
   which stacked two dark endings back to back. Merged, the ending starts in the
   forest and settles into ink.

   On the light variants this whole thing is the single dark bookend; A1 runs
   its own dark palette straight through it, and the dissolve still reads,
   because it resolves to the same ink the block is already painted in. */
.closing{padding:0 0 56px;text-align:left;position:relative}
.closing-media{position:relative;height:54vh;min-height:320px;overflow:hidden;background:var(--c-bg)}
.closing-media .m-still,
.closing-media .m-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* No hard edge, no radius, no brackets — the same edge philosophy as A2's plate
   fade, resolved into dark instead of paper. The stops are --ink (#13201A) at
   rising alpha; the last one is fully opaque, so the gradient lands exactly on
   the block's own surface and the join is invisible rather than merely close. */
.closing-dissolve{position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(19,32,26,0)    0%,
    rgba(19,32,26,.10) 30%,
    rgba(19,32,26,.42) 58%,
    rgba(19,32,26,.78) 78%,
    rgba(19,32,26,.95) 91%,
    rgba(19,32,26,1)  100%)}
.closing > .wrap{position:relative;z-index:2;padding-top:104px}
@media(max-width:820px){
  .closing-media{height:38vh;min-height:220px}
  .closing > .wrap{padding-top:72px}
}
.closing-cta h2{font-size:clamp(44px,7vw,92px);max-width:none;letter-spacing:-.03em}
.closing-cta h2 em{font-style:normal;color:var(--c-accent)}
.closing-cta .hero-ctas{margin-top:44px}

.closing-foot{margin-top:120px;padding-top:52px;border-top:1px solid var(--c-hairline);font-size:13.5px}
.foot-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.5fr;gap:40px}
.foot-brand .logo{color:var(--c-fg);font-size:17px}
.foot-brand .logo i{border-color:var(--c-eyebrow)}
.foot-tagline{margin-top:14px;max-width:30ch;color:var(--c-fg-soft)}
.foot-legal{margin-top:20px;font-size:12.5px;color:var(--c-fg-mute)}
.foot-mail{margin-top:6px;display:inline-block;font-size:12.5px;color:var(--c-fg-mute);border-bottom:1px solid var(--c-hairline)}
.foot-mail:hover{color:var(--c-fg)}
.closing-foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-eyebrow);margin-bottom:16px}
.closing-foot ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.closing-foot li a{color:var(--c-fg-soft)}
.closing-foot li a:hover{color:var(--c-fg)}

/* newsletter — a placeholder field, wired to nothing */
.news{display:flex;gap:8px;max-width:340px}
.news input{flex:1;min-width:0;font-family:var(--body);font-size:13.5px;color:var(--c-fg);
  background:rgba(255,255,255,.06);border:1px solid var(--c-hairline);border-radius:999px;padding:10px 16px}
.news input::placeholder{color:var(--c-fg-mute)}
.news input:focus{outline:2px solid var(--c-accent);outline-offset:1px}
.news button{font-family:var(--display);font-weight:600;font-size:13.5px;color:#F4F6F1;
  background:var(--moss);border:0;border-radius:999px;padding:10px 20px;cursor:pointer}
.news button:hover{background:var(--moss-deep)}
.news-note{margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--c-fg-mute)}

.foot-fine{margin-top:56px;padding-top:22px;border-top:1px solid var(--c-hairline);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-fg-mute)}
.foot-fine a:hover{color:var(--c-fg)}
.foot-fine i{font-style:normal;padding:0 10px;opacity:.6}
@media(max-width:920px){
  .foot-cols{grid-template-columns:1fr 1fr;gap:44px 32px}
  .foot-brand,.foot-news{grid-column:1/-1}
}
@media(max-width:640px){
  /* No top padding: the composition opens on full-bleed footage, so the block
     starts at the footage's own top edge. Content spacing below it belongs to
     `.closing > .wrap`. */
  .closing-foot{margin-top:84px}
  .foot-cols{grid-template-columns:1fr;gap:36px}
}

/* ---------- masked type: the shared aperture ----------
   Used by the stats numerals and the closing challenge. The script places one
   of these over each line of text: a plate in the surface colour with the
   glyphs punched out of it, and footage on a canvas behind. The type it stands
   in for keeps its place in the DOM, so selection and screen readers are
   unaffected; only its ink goes transparent. */
/* user-select:none because the glyphs a mask punches out are real text in the
   DOM. They are inside <defs> so they never paint, and aria-hidden keeps them
   out of the accessibility tree, but a selection still walks them — copying a
   masked headline otherwise yields it twice. */
.knock{position:absolute;display:block;pointer-events:none;-webkit-user-select:none;user-select:none}
.knock svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* The canvas is inset inside the plate that covers it — see KNOCK_INSET in
   concept-a.js. Its box is sized inline, because `width:auto` on a replaced
   element resolves to the intrinsic size and would ignore the insets. */
.knock canvas{position:absolute;display:block}
.knock-plate{fill:var(--c-bg)}
/* !important on purpose: this has to beat component rules that colour a child
   of the masked text, such as the accent <em> in the closing headline and the
   suffix <span> on a stat — both of which are more specific than any sane
   selector this utility could use. */
.knock-live,.knock-live *{color:transparent !important}

/* reveal animation */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .btn:hover,.claim:hover{transform:none}
  html{scroll-behavior:auto}
  /* every video falls back to its poster still */
  .m-vid{display:none}
}

/* ===========================================================================
   SHARED LIGHT SECTION SYSTEM — A2 Overlap, A3 Mist, A4 Transparent

   Everything below the hero is identical across the three light variants. They
   differ only in their hero block, which follows further down. This supersedes
   the earlier per-variant Daylight/Overcast definitions.
   =========================================================================== */
:is([data-variant="a2"],[data-variant="a3"],[data-variant="a4"]){
  /* nav sits over a light hero in all three */
  --nav-bg:rgba(244,243,236,.82);
  --nav-border:var(--sage-line);
  --nav-fg:var(--ink);
  --nav-link:var(--ink-soft);
  --nav-mark:var(--moss);
  --nav-cta-bg:var(--moss);
  --nav-cta-fg:#F4F6F1;
}

/* Banded sections (how it works, stats, team) sit on paper rather than ink.
   Problem, claims and audiences already default to paper. */
:is([data-variant="a2"],[data-variant="a3"],[data-variant="a4"]) section.dark:not(.closing):not(.breaker){
  --c-bg:var(--paper);
}

/* --- how it works: paper section, step blocks on a sage tint, moss numbers ---
   The tint goes on the CARD, not on the track. On the track it painted the full
   half-width, so the block ran right up to the spine and carried a field of
   empty sage beside its own text.

   Padding is even on all four sides, and the card's max-width is the shared
   measure plus that padding, so the text column inside is the same width here as
   it is on A1's untinted blocks. */
:is([data-variant="a2"],[data-variant="a3"],[data-variant="a4"]) .flow{--fstep-pad-top:28px}
:is([data-variant="a2"],[data-variant="a3"],[data-variant="a4"]) .fstep-card{
  background:var(--sage);
  border-radius:var(--radius);
  padding:var(--fstep-pad-top) 30px;
  max-width:calc(var(--fstep-measure) + 60px);
}
:is([data-variant="a2"],[data-variant="a3"],[data-variant="a4"]) .fstep .n{color:var(--moss)}
@media(max-width:820px){
  :is([data-variant="a2"],[data-variant="a3"],[data-variant="a4"]) .flow{--fstep-pad-top:26px}
  :is([data-variant="a2"],[data-variant="a3"],[data-variant="a4"]) .fstep-card{
    padding:var(--fstep-pad-top) 24px;
    max-width:none;
  }
}

/* --- stats: solid moss band, the page's chromatic anchor ---
   Paper numerals 6.90:1 and sage-line mono labels 5.03:1 on --moss.
   The selector is deliberately as specific as the banded-sections rule above,
   which would otherwise win and paint this section paper. */
:is([data-variant="a2"],[data-variant="a3"],[data-variant="a4"]) section.stats.dark:not(.closing):not(.breaker){
  --c-bg:var(--moss);
  --c-fg:var(--paper);
  --c-fg-mute:var(--sage-line);
  --c-accent:var(--leaf);
  --c-hairline:rgba(255,255,255,.20);
}

/* --- breakers: footage unwashed, type on a localized bottom-edge gradient ---
   The full dark scrim is gone. The line moves to the bottom of the frame and
   sits on an ink-toned gradient that is transparent by 40% height. */
:is([data-variant="a2"],[data-variant="a3"],[data-variant="a4"]) .breaker{align-items:flex-end}
:is([data-variant="a2"],[data-variant="a3"],[data-variant="a4"]) .breaker .wrap{padding-bottom:60px}
:is([data-variant="a2"],[data-variant="a3"],[data-variant="a4"]) .breaker-scrim{
  background:linear-gradient(180deg,
    rgba(11,20,15,0) 60%,
    rgba(11,20,15,.42) 78%,
    rgba(11,20,15,.70) 100%);
}

/* cards pick up a faint warm cast so they separate from the paper behind them */
:is([data-variant="a2"],[data-variant="a3"],[data-variant="a4"]) .claim,
:is([data-variant="a2"],[data-variant="a3"],[data-variant="a4"]) .aud-card{--c-card-bg:#FBFBF6}


/* ===========================================================================
   HERO BLOCKS — one per variant, each confined to its own marked block.
   These are the sanctioned per-variant structural differences. Everything
   outside them is shared.
   =========================================================================== */

/* --------------------------------------------------------------------------
   A3 "Mist" — A1's hero exactly, with the scrim inverted to paper.
   Same min-height, same wrap padding, same type positions. Only the wash and
   the text colours change, and those come from the light context.
   -------------------------------------------------------------------------- */
[data-variant="a3"] .hero-scrim{
  opacity:1;
  background:linear-gradient(180deg,
    rgba(244,243,236,.74) 0%,
    rgba(244,243,236,.82) 55%,
    rgba(244,243,236,.90) 100%);
}

/* --------------------------------------------------------------------------
   A2 "Overlap" — headline breaks into an oversized plate.
   -------------------------------------------------------------------------- */
[data-variant="a2"] .hero{
  display:block;min-height:0;overflow:visible;
  padding:calc(var(--topbar-h,34px) + 68px + 64px) 0 84px;
}
[data-variant="a2"] .hero .wrap{
  position:static;display:block;padding-top:0;padding-bottom:0;
}
/* the headline drops into the plate by roughly its own lower third */
[data-variant="a2"] .hero h1{
  position:relative;z-index:3;margin-bottom:-.62em;padding:0 4px;
}
[data-variant="a2"] .hero-media{
  position:relative;inset:auto;z-index:1;
  height:76vh;min-height:420px;
  overflow:visible;                    /* brackets sit outside the plate */
}
/* The top edge is deliberately soft: the fade dissolves it into paper, so any
   curvature or bracket up there would frame an edge that is not visible and
   read as a broken corner. Square top, rounded base. */
[data-variant="a2"] .hero-media .m-still,
[data-variant="a2"] .hero-media .m-vid{
  border-radius:0 0 var(--radius) var(--radius);
  clip-path:inset(0 round 0 0 var(--radius) var(--radius));
}
/* bottom brackets only — .framed's ::before/::after are the top pair */
[data-variant="a2"] .hero-media::before,
[data-variant="a2"] .hero-media::after{content:none}
/* paper fade over the plate's top third, so the overlapping glyphs stay legible
   without washing the whole frame */
[data-variant="a2"] .hero-fade{
  position:absolute;left:0;right:0;top:0;height:34%;z-index:2;
  background:linear-gradient(180deg,
    rgba(244,243,236,.94) 0%,
    rgba(244,243,236,.48) 55%,
    rgba(244,243,236,0) 100%);
}
[data-variant="a2"] .hero-sub{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:36px;flex-wrap:wrap;margin-top:34px;
}
[data-variant="a2"] .hero-sub p{margin-top:0;flex:1;min-width:300px}
[data-variant="a2"] .hero-sub .hero-ctas{margin-top:0;flex-shrink:0}
[data-variant="a2"] .hero-meta{margin-top:40px}
@media(max-width:820px){
  [data-variant="a2"] .hero{padding-top:calc(var(--topbar-h,34px) + 68px + 40px)}
  [data-variant="a2"] .hero-media{height:52vh;min-height:300px}
  [data-variant="a2"] .hero h1{margin-bottom:-.42em}
}
/* The standfirst's 300px floor and the unshrinkable CTA row are what put the
   two side by side on a wide screen. Below the point where they still fit,
   both have to give, or the row stays 484px wide and scrolls the page
   sideways on a phone. */
@media(max-width:640px){
  [data-variant="a2"] .hero-sub p{min-width:0}
  [data-variant="a2"] .hero-sub .hero-ctas{flex-shrink:1}
}

/* --------------------------------------------------------------------------
   A4 "Transparent" — footage inside the glyphs.

   Implemented as a real SVG mask: a paper-filled rect with the headline punched
   out of it, laid over the video. Crisp glyph edges at any size, and the text
   picks up the page webfont because the SVG is inline in the document.

   This is the hero, the first of the page's three masked moments. The other two
   — the stats numerals and the closing challenge — are built by the script over
   the shared section markup, so they cost this file only the two floor values
   below. See "The transparency signature" in DESIGN.md.

   Fallbacks are solid type. The <h1> is always in the DOM and visible by
   default; the script adds .sig-on only when masking should run, which means no
   JS, no SVG, reduced motion or a viewport under 640px all land on plain ink.
   -------------------------------------------------------------------------- */
[data-variant="a4"] .hero{
  display:block;min-height:0;overflow:visible;
  padding:calc(var(--topbar-h,34px) + 68px + 56px) 0 84px;
}
[data-variant="a4"] .hero .wrap{
  position:static;display:block;padding-top:0;padding-bottom:0;
}
[data-variant="a4"] .sig-stage{
  position:relative;height:56vh;min-height:320px;
  max-width:calc(var(--maxw) - 48px);width:calc(100% - 48px);margin:0 auto;
  display:none;                        /* off until the script enables it */
}
[data-variant="a4"].sig-on .sig-stage{display:block}
[data-variant="a4"] .sig-stage .m-still,
[data-variant="a4"] .sig-stage .m-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* user-select:none for the same reason as .knock — see that rule above. */
[data-variant="a4"] .sig-knock{position:absolute;inset:0;width:100%;height:100%;z-index:2;
  -webkit-user-select:none;user-select:none}
[data-variant="a4"] .sig-paper{fill:var(--paper)}
/* size comes from the <g> the renderer emits, since it depends on line count */
[data-variant="a4"] .sig-glyph{
  font-family:var(--display);font-weight:700;
  letter-spacing:-.035em;fill:#000;
}
/* the accessible / fallback headline */
[data-variant="a4"] .sig-type{
  font-size:clamp(64px,12.5vw,190px);font-weight:700;letter-spacing:-.035em;line-height:.96;
  color:var(--c-fg);
}
[data-variant="a4"].sig-on .sig-type{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
[data-variant="a4"] .hero-sub{margin-top:38px}
[data-variant="a4"] .hero-sub p{margin-top:0}
[data-variant="a4"] .hero-ctas{margin-top:26px}
[data-variant="a4"] .hero-meta{margin-top:44px}
@media(max-width:820px){
  [data-variant="a4"] .hero{padding-top:calc(var(--topbar-h,34px) + 68px + 36px)}
  [data-variant="a4"] .sig-stage{height:38vh;min-height:220px}
}

/* The other two masked moments cost this file almost nothing: the plate takes
   the surface colour straight from --c-bg, so it can never drift from the band
   it is punched out of, and the footage is raw.

   These two values are NOT a treatment. They are what an aperture holds before
   its first frame decodes, or if the clip never loads — the footage is drawn
   over them opaque. A per-surface floor screened under the footage used to live
   here; it forced AA contrast and made the letters read as mist. It is gone,
   and what replaced it is choosing where each mask samples. See "The
   transparency signature" in DESIGN.md. */
[data-variant="a4"] .stats{--knock-base:#2B3F31}    /* pre-decode, on --moss */
[data-variant="a4"] .closing{--knock-base:#22301F}  /* pre-decode, on --ink  */

/* The stats numerals and the closing challenge still fall back to solid type
   below 640px — their type is too small down there for footage to read through
   it, and the script tears those masks down at that width.

   The HERO does not fall back any more. It switches to a narrow treatment
   instead: the same three lines, sized to fill the narrow column at ~78px
   rather than the ~61px the wide viewBox produces down there, with the mask
   glyphs stroked so each aperture is wide enough for foliage to read. Decided
   on-device — see "Mobile hero mask" in DESIGN.md.

   Only the full headline has a narrow treatment, so /a4/short/ still falls back
   below 640px. The script governs that by withholding .sig-on, which leaves the
   stage on its base display:none and the solid <h1> visible. */
@media(prefers-reduced-motion:reduce){
  [data-variant="a4"].sig-on .sig-stage{display:none}
  [data-variant="a4"].sig-on .sig-type{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
}

/* --- the narrow hero mask, below 640px --- */
.sig-knock-narrow{display:none}
@media(max-width:639.98px){
  [data-variant="a4"] .sig-knock-wide{display:none}
  [data-variant="a4"] .sig-knock-narrow{display:block}

  /* The glyphs are black on the mask's white field, so a black stroke grows the
     punched-out area by half its width on every edge — the apertures widen
     without the face getting heavier. non-scaling-stroke makes that width mean
     rendered px rather than viewBox units, which are scaled by ~0.34 down here.
     Round joins because the miters on "C" and "b" spike badly at this weight.
     2px: 3px was measured too, and it closes the counters in a/o/p/b. */
  [data-variant="a4"] .sig-knock-narrow .sig-glyph{
    stroke:#000;stroke-width:2px;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  }

  /* The stage takes the narrow viewBox's own aspect, so the type fills it
     instead of being letterboxed inside a vh-sized box, and the fit stays
     width-bound, which is what holds the face at its measured size. */
  [data-variant="a4"] .sig-stage{
    height:auto;min-height:0;aspect-ratio:1000/683;
  }
}