@font-face{ font-family:'Poppins'; font-weight:400; font-style:normal; font-display:swap; src:url('../assets/fonts/poppins-400.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-weight:600; font-style:normal; font-display:swap; src:url('../assets/fonts/poppins-600.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-weight:700; font-style:normal; font-display:swap; src:url('../assets/fonts/poppins-700.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-weight:800; font-style:normal; font-display:swap; src:url('../assets/fonts/poppins-800.woff2') format('woff2'); }

/* ==========================================================================
   AMPLIFY IMPACT — SIGNAL
   The theory of change mapped onto luminance. Pages open in the near-black of
   the problem and physically brighten until the reader is standing in full
   daylight at the long-term gain. Every band declares its own luminance, so
   the nav can invert itself against whatever it happens to be sitting over.

   One visual world by design — the site deliberately does NOT follow the OS
   colour scheme, because the dark-to-light arc IS the argument.
   ========================================================================== */
:root{ color-scheme:only light; }

:root{
  /* palette — unchanged from the brand style guide */
  --navy:#0A2D46; --navy-deep:#071c2c; --navy-mid:#123653; --navy-black:#041420;
  --purple:#822887; --coral:#DC5A46; --amber:#FF8C00; --lime:#E6E664; --tealgreen:#289187; --teal:#23C3D2;
  --tealgreen-900:#124958; --purple-900:#2C2C58; --teal-900:#11576D; --coral-900:#632820; --amber-900:#733F00;
  --purple-tint:#E6D4E7; --purple-chip:#C79EC9; --coral-tint:#F8DEDA; --coral-chip:#EFB5AC;
  --amber-tint:#FFE8CC; --amber-chip:#FFCB8C; --lime-tint:#FAFAE0; --lime-chip:#F4F4B9;
  --tealgreen-tint:#D4E9E7; --tealgreen-chip:#9ECEC9; --teal-tint:#D3F3F6; --teal-chip:#9CE4EB;
  --white:#ffffff; --paper:#FAFBFC; --paper-2:#F1F4F6;
  --ink:#0F2030; --ink-2:#48596A;
  /* --slate carries secondary copy (stat captions, form notes), so it has to
     clear AA on paper: the old #77899A was 3.6:1 */
  --slate:#5C6F82;
  --line:rgba(10,45,70,0.10);
  /* --tealgreen is 3.7:1 on paper — fine for headings, short of AA for the
     11-13px labels and metadata that use it, so small text gets a darker ink */
  --tealgreen-ink:#1c6a61;
  /* likewise, --lime drops under AA once the bands turn teal */
  --lime-ink:#F4F4B0;
  /* and --coral (3.6:1 on paper) gets an ink twin for small text */
  --coral-ink:#BC432C;
  --font:'Poppins',-apple-system,'Segoe UI',system-ui,sans-serif;
  --font-serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{ margin:0; padding:0; background:var(--ramp-0); color:#fff; font-family:var(--font); line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:clip; }
h1,h2,h3,h4{ margin:0; font-family:var(--font); font-weight:800; letter-spacing:-0.042em; line-height:1.02; text-wrap:balance; }
p{ margin:0; }
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:1240px; margin:0 auto; padding:0 44px; position:relative; z-index:2; }
@media (max-width:760px){ .wrap{ padding:0 22px; } }

/* ===== ATMOSPHERE ===== */
.grain{ position:fixed; inset:0; z-index:400; pointer-events:none; opacity:0.22; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px; }
.blob,.bloom{ position:absolute; border-radius:50%; filter:blur(100px); z-index:0; pointer-events:none; opacity:var(--o,1); }
/* THE LIVING BLOOMS.
   Two animations per bloom on deliberately different durations — position on
   one clock, size+glow on another — so the combination drifts in and out of
   phase and never visibly repeats. `translate`/`scale` are the individual
   transform properties, which COMPOSE with the `transform` some blooms already
   carry for centering (the closer's translateX(-50%)) instead of overwriting
   it. Engines without individual-property support simply skip the movement and
   keep the opacity breathing. Only transform/opacity animate: the expensive
   100px blur is rendered once and never again. */
@media (prefers-reduced-motion: no-preference){
  .bloom,.blob{
    animation: bloom-move 33s ease-in-out infinite,
               bloom-breathe 26s ease-in-out infinite;
  }
  .bloom:nth-of-type(2),.blob:nth-of-type(2){
    animation: bloom-move 44s ease-in-out infinite reverse,
               bloom-breathe 34s ease-in-out infinite;
    animation-delay: -19s, -14s;
  }
  @keyframes bloom-move{
    0%,100%{ translate:0 0; }
    33%{ translate:5% -6%; }
    66%{ translate:-3.5% 3%; }
  }
  /* breathe dips below rest size as well as above it; the glow follows.
     The +15% opacity ceiling is a contrast guard — text sits on these. */
  @keyframes bloom-breathe{
    0%,100%{ scale:0.94; opacity:calc(var(--o,1) * 0.8); }
    50%{ scale:1.15; opacity:calc(var(--o,1) * 1.15); }
  }
}

/* ===== LUMINANCE BANDS =====
   b-black → b-navy → b-mid → b-turn → b-light → b-paper.
   The order is the argument: problem in the dark, gain in daylight. */
/* THE HUE RAMP.
   Each band starts on exactly the colour the band above it ended on, so the
   whole dark run is one continuous journey and no seam can appear. The stops
   are named rather than inlined because every one of them is shared by two
   bands — changing a colour in one place without the other cuts a line across
   the page.

   The blue stretch used to run all the way to the scan, which meant teal did
   not arrive until past the halfway point of the scroll. The ramp now reaches
   cyan by the end of "who we are" and true teal by the scan. */
:root{
  /* Stops are solved so CIE L* (perceptual lightness) climbs at a near-constant
     ~1 point per percent of scroll across the whole dark run. The previous set
     plateaued — the model, statement and scan bands together held L* 34→43 over
     a quarter of the page, so the middle read as one flat teal — and then did
     the entire brightening in the last 8%, which landed as a lurch.
     Hue walks 210° → 172° alongside the climb, so the colour keeps moving even
     where the lightness step is small. */
  --ramp-0:#061423;  /*  L*  6 · hero — near black              */
  --ramp-1:#102E47;  /*  L* 18 · end of the problem             */
  --ramp-2:#0E4058;  /*  L* 25 · end of who we are              */
  --ramp-3:#125468;  /*  L* 33 · end of the model               */
  --ramp-4:#16606B;  /*  L* 37 · end of any scale, one standard */
  --ramp-5:#1C7677;  /*  L* 45 · end of the scan — white copy still 5.4:1 */
  --ramp-6:#2A9B90;  /*  L* 58 · tealgreen — the turn           */
  --ramp-7:#85BBB3;  /*  L* 72 · end of the turn → daylight     */
}
/* clip, NOT hidden. overflow:hidden establishes a scroll container, which
   silently disables position:sticky for every descendant — it was stopping
   the stage rail from pinning at all. overflow:clip crops the blooms the
   same way without creating that container. The hidden declaration stays
   first as a fallback for engines without clip support. */
.band{ position:relative; overflow:hidden; overflow:clip; isolation:isolate; }
.b-black{ background:var(--ramp-0); color:#fff; }
.b-navy{ background:linear-gradient(180deg,var(--ramp-0),#091D2F 34%,#0B253C 68%,var(--ramp-1)); color:#fff; }
.b-navy-flat{ background:linear-gradient(180deg,var(--ramp-1),var(--ramp-2)); color:#fff; }
.b-mid{ background:linear-gradient(180deg,var(--ramp-2),var(--ramp-3)); color:#fff; }
.b-mid-flat{ background:linear-gradient(180deg,var(--ramp-3),var(--ramp-4)); color:#fff; }
.b-mid-2{ background:linear-gradient(180deg,var(--ramp-4),var(--ramp-5)); color:#fff; }
/* the hold to 52% keeps the two lead paragraphs on a ground white text can
   survive; the claim below them is ink, so the tail is free to brighten */
.b-turn{ background:linear-gradient(180deg,var(--ramp-5) 0%,var(--ramp-5) 52%,var(--ramp-6) 80%,var(--ramp-7) 100%); color:#fff; }
/* px stops, not percentages: the dawn has to finish in a fixed distance so the
   stage rail and its label always land on paper rather than on mid-teal, no
   matter how tall this band's content makes it */
.b-light{ background:linear-gradient(180deg,var(--ramp-7) 0px,#cfe4e0 130px,var(--paper) 470px); color:var(--ink); }
.b-paper{ background:var(--paper); color:var(--ink); }
.b-paper-2{ background:var(--paper-2); color:var(--ink); }
.b-light h1,.b-light h2,.b-light h3,.b-light h4,
.b-paper h1,.b-paper h2,.b-paper h3,.b-paper h4,
.b-paper-2 h1,.b-paper-2 h2,.b-paper-2 h3,.b-paper-2 h4{ color:var(--ink); }

/* ===== SCROLL PROGRESS ===== */
.prog,.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:100%; z-index:350; pointer-events:none; }
.prog i,.scroll-progress-bar{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--lime),var(--teal),var(--tealgreen),var(--purple),var(--coral),var(--amber)); }

/* ===== NAV ===== */
.nav{ position:fixed; top:0; left:0; right:0; z-index:300; display:flex; align-items:center; gap:28px; padding:20px 44px; color:#fff;
  transition:background .5s var(--ease), color .5s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease); }
.nav.solid{ background:rgba(4,20,32,0.74); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding:12px 44px; box-shadow:0 1px 0 rgba(255,255,255,0.08); }
.nav.inv{ color:var(--ink); }
.nav.solid.inv{ background:rgba(250,251,252,0.86); box-shadow:0 1px 0 var(--line); }
/* One rule does the whole layout: the logo takes the free space, so the links,
   the CTA and the hamburger stay grouped on the right at every width — and the
   CTA always sits immediately left of the hamburger. Previously three separate
   margin-left:auto rules fought each other and the CTA ended up marooned next
   to the logo. */
.nav-logo{ display:flex; align-items:center; text-decoration:none; flex-shrink:0; margin-right:auto; }
.nav-brand-svg{ height:24px; width:auto; color:currentColor; flex-shrink:0; }
.nav .links{ display:flex; align-items:center; gap:24px; font-size:13px; font-weight:600; opacity:0.72; }
.nav .links a{ text-decoration:none; padding:10px 0; transition:color .25s var(--ease), opacity .25s var(--ease); }
.nav .links a:hover{ opacity:1; color:var(--teal); }
.nav.inv .links a:hover{ color:var(--tealgreen); }
.ncta{ display:inline-flex; align-items:center; gap:9px; background:var(--lime); color:var(--navy-black); text-decoration:none; padding:10px 20px; border-radius:6px; font-size:13px; font-weight:700; white-space:nowrap; flex-shrink:0; transition:background .3s var(--ease), transform .3s var(--ease); }
.ncta:hover{ background:var(--teal); transform:translateY(-1px); }
@media (max-width:1100px){ .nav .links{ display:none; } }
/* the CTA is never dropped, only tightened, so it can always ride next to the
   hamburger — the logo gives up height first because it has the most to spare */
@media (max-width:880px){
  .nav{ padding:16px 22px; gap:14px; } .nav.solid{ padding:12px 22px; }
  .ncta{ padding:9px 15px; font-size:12px; gap:7px; }
}
@media (max-width:600px){
  .nav{ padding:14px 16px; gap:10px; } .nav.solid{ padding:10px 16px; }
  .nav-brand-svg{ height:19px; }
  .ncta{ padding:8px 12px; font-size:11.5px; gap:5px; }
  /* .nav-scoped so it beats the base .hamburger rule, which is declared later
     in the file for grouping reasons and would otherwise win on source order */
  .nav .hamburger{ width:34px; height:34px; }
}
@media (max-width:400px){
  .nav-brand-svg{ height:17px; }
  .ncta{ padding:7px 10px; font-size:11px; }
}
/* 320px: logo + CTA + hamburger only fit if all three give a little, and the
   hamburger must never be the one that gets clipped off the right edge */
@media (max-width:360px){
  .nav{ padding:12px 12px; gap:8px; } .nav.solid{ padding:9px 12px; }
  .nav-brand-svg{ height:15px; }
  .ncta{ padding:7px 9px; font-size:10.5px; gap:4px; }
  .nav .hamburger{ width:32px; height:32px; }
}

/* hamburger + drawer */
.hamburger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; border-radius:8px; border:1.5px solid currentColor; background:transparent; color:inherit; cursor:pointer; padding:0; flex-shrink:0; opacity:0.7; transition:opacity .25s var(--ease); }
.hamburger:hover{ opacity:1; }
.hamburger span{ display:block; width:15px; height:1.5px; background:currentColor; margin:0 auto; border-radius:2px; }
.menu-overlay{ position:fixed; inset:0; background:rgba(4,20,32,0.62); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:320; }
.menu-overlay.open{ opacity:1; pointer-events:auto; }
.menu-drawer{ position:fixed; top:0; right:0; height:100%; width:min(340px,86vw); background:var(--navy-black); color:#fff; z-index:330; padding:30px 28px; display:flex; flex-direction:column; gap:2px; transform:translateX(100%); transition:transform .32s var(--ease); box-shadow:-14px 0 50px rgba(0,0,0,0.45); overflow-y:auto; }
.menu-drawer.open{ transform:translateX(0); }
.menu-drawer a{ color:#fff; text-decoration:none; font-weight:700; font-size:16px; letter-spacing:-0.02em; padding:14px 4px; border-bottom:1px solid rgba(255,255,255,0.12); }
.menu-drawer a:hover{ color:var(--lime); }
.menu-close{ align-self:flex-end; width:34px; height:34px; border-radius:8px; border:1.5px solid rgba(255,255,255,0.25); background:transparent; color:#fff; font-size:15px; cursor:pointer; margin-bottom:16px; }
body.menu-locked{ overflow:hidden; }

/* ===== BUTTONS ===== */
.btn{ font-family:var(--font); font-weight:700; font-size:14.5px; padding:15px 26px; border-radius:7px; text-decoration:none; display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer; white-space:nowrap;
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn-lime,.btn-primary{ background:var(--lime); color:var(--navy-black); }
.btn-lime:hover,.btn-primary:hover{ background:var(--teal); }
.btn-out,.btn-ghost{ border:1.5px solid rgba(255,255,255,0.30); color:#fff; }
.btn-out:hover,.btn-ghost:hover{ border-color:var(--lime); color:var(--lime); }
.btn-dark{ background:var(--navy); color:#fff; }
.btn-dark:hover{ background:var(--purple); }
.btn-outd{ border:1.5px solid var(--line); color:var(--ink); }
.btn-outd:hover{ border-color:var(--tealgreen); color:var(--tealgreen); }
.btn-amber{ background:var(--amber); color:var(--navy-black); }
.btn-amber:hover{ background:var(--lime); }
.btn-coral{ background:var(--coral); color:#fff; }
.btn-coral:hover{ background:var(--purple); }
.ctas,.hero-ctas{ display:flex; gap:13px; flex-wrap:wrap; }

/* ===== HERO ===== */
.hero{ min-height:100svh; display:flex; align-items:center; padding:130px 0 90px; }
.hero .bloom.h1b{ width:900px; height:900px; top:-320px; right:-260px; background:radial-gradient(circle at 45% 55%,var(--purple),var(--tealgreen) 52%,rgba(6,20,35,0) 74%); --o:0.55; }
.hero .bloom.h2b{ width:700px; height:700px; bottom:-320px; left:-200px; background:radial-gradient(circle at 50% 50%,var(--teal),var(--navy) 60%,rgba(6,20,35,0) 78%); --o:0.5; }
.kick,.eyebrow{ display:inline-flex; align-items:center; gap:12px; font-size:11px; letter-spacing:0.19em; text-transform:uppercase; font-weight:700; opacity:0.62; }
.kick::before,.eyebrow::before{ content:'/'; color:var(--lime); opacity:1; font-weight:700; }
.hero h1{ font-size:clamp(42px,8.4vw,124px); margin:0; max-width:17ch; letter-spacing:-0.05em; line-height:0.9; color:#fff; }
.hero h1 em,.hero h1 .g{ font-style:normal; background:linear-gradient(96deg,var(--teal),var(--lime)); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* minmax, not 1fr: the CTA column is `auto` and its buttons don't wrap, so a
   plain 1fr would let the paragraph collapse to one word per line before the
   stack breakpoint ever fired */
.hero-foot{ margin-top:60px; display:grid; grid-template-columns:minmax(340px,1fr) auto; gap:50px; align-items:end; border-top:1px solid rgba(255,255,255,0.14); padding-top:32px; }
.hero-sub{ font-size:16.5px; line-height:1.75; opacity:0.68; max-width:56ch; }
@media (max-width:1120px){ .hero-foot{ grid-template-columns:1fr; gap:26px; } }

/* ===== STAGE + STICKY RAIL =====
   The stage label and its counter pin to the left while the argument scrolls past. */
.stage{ position:relative; padding:120px 0; }
.srail{ display:grid; grid-template-columns:260px 1fr; gap:64px; align-items:start; }
.spin{ position:sticky; top:110px; }
.scount{ font-family:var(--font-serif); font-size:13px; letter-spacing:0.14em; opacity:0.75; margin-bottom:18px; }
.slabel,.eyebrow-lt{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; font-weight:700; color:var(--lime-ink); margin-bottom:20px; }
.b-light .slabel,.b-paper .slabel,.b-paper-2 .slabel,.b-light .eyebrow-lt,.b-paper .eyebrow-lt,.b-paper-2 .eyebrow-lt{ color:var(--tealgreen-ink); }
.sbar{ height:2px; background:currentColor; opacity:0.16; position:relative; margin-bottom:22px; }
/* The bar fills in proportion to how far you have scrolled THROUGH this stage,
   so the rail reads as a live position in the theory of change rather than a
   decoration that snaps to a fixed width on reveal. JS writes --fill; --w is
   kept as the no-JS fallback. */
.sbar i{ position:absolute; left:0; top:0; height:100%; width:var(--w,20%);
  background:linear-gradient(90deg,var(--lime),var(--teal)); }
.sbar i.live{ width:var(--fill,0%); transition:width .18s linear; }
.b-light .sbar i,.b-paper .sbar i{ background:linear-gradient(90deg,var(--tealgreen),var(--purple)); }
.snote{ font-size:13px; line-height:1.65; opacity:0.82; max-width:26ch; }
@media (max-width:980px){ .srail{ grid-template-columns:1fr; gap:28px; } .spin{ position:static; } .snote{ max-width:none; } }
@media (max-width:760px){ .stage{ padding:82px 0; } }

/* The line breaks in these headings are authored, so max-width only needs to be
   wide enough that an authored line never breaks a second time — the longest is
   "A route from evidence to durable" at 32 characters. 16ch was cutting phrases
   mid-thought. The real width bound is the container, not this. */
/* h1 is included so a page whose big heading is genuinely the page title —
   404.html — can be semantically correct without losing the display size. */
h1.big,h2.big{ font-size:clamp(30px,5.2vw,66px); max-width:28ch; }
.stage.plain h1.big,.stage.plain h2.big{ max-width:36ch; }
.statement h2.big{ max-width:26ch; }  /* centred, no authored breaks — needs a measure */
.lead,.section-lead{ font-size:16.5px; line-height:1.75; opacity:0.86; max-width:62ch; margin-top:24px; }
.b-light .lead,.b-paper .lead,.b-paper-2 .lead,.b-light .section-lead,.b-paper .section-lead,.b-paper-2 .section-lead{ opacity:1; color:var(--ink-2); }
.b-light a,.b-paper a,.b-paper-2 a{ color:var(--tealgreen-ink); font-weight:600; }
.b-light .btn,.b-paper .btn,.b-paper-2 .btn{ font-weight:700; }
.b-light .btn-dark,.b-paper .btn-dark,.b-paper-2 .btn-dark{ color:#fff; }

/* ===== REVEALS ===== */
/* the clipping box has to sit below the baseline or tight line-heights shear the
   descenders off "measuring" and "operating"; the negative margin takes the
   extra space back out of the flow */
.rl{ display:block; overflow:hidden; padding-bottom:0.16em; margin-bottom:-0.16em; }
.rl>span{ display:block; transform:translateY(125%); transition:transform .95s var(--ease); }
.lit .rl>span{ transform:none; }
.rl:nth-child(2)>span{ transition-delay:.08s; }
.rl:nth-child(3)>span{ transition-delay:.16s; }
.fade,.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.lit .fade,.reveal.is-visible,.lit.reveal{ opacity:1; transform:none; }
.lit .fade:nth-child(2){ transition-delay:.07s; }
.lit .fade:nth-child(3){ transition-delay:.14s; }
.lit .fade:nth-child(4){ transition-delay:.21s; }
.lit .fade:nth-child(5){ transition-delay:.28s; }
.lit .fade:nth-child(6){ transition-delay:.35s; }
.lit .fade:nth-child(7){ transition-delay:.42s; }
.lit .fade:nth-child(8){ transition-delay:.49s; }
.lit .fade:nth-child(9){ transition-delay:.56s; }
@media (prefers-reduced-motion: reduce){ .rl>span{ transform:none; } .fade,.reveal{ opacity:1; transform:none; } }

/* ===== PRESSURE LANES =====
   The problem, said five ways, sliding past on alternating axes — with the
   anchor statement holding perfectly still in the middle of it. */
.lanes-frame{ position:relative; margin:0 -44px; padding:78px 0; }
.lanes{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.lane{ display:flex; white-space:nowrap; width:max-content; padding:9px 0; }
.lane span{ font-weight:700; font-size:clamp(24px,3.6vw,50px); letter-spacing:-0.045em; opacity:0.13; padding-right:22px; }
.lane span::after{ content:'·'; margin-left:22px; color:var(--coral); opacity:0.7; }
@media (prefers-reduced-motion: no-preference){
  .lane{ animation:sl 44s linear infinite; }
  .lane.rev{ animation:sr 52s linear infinite; }
  .lane.slow{ animation-duration:60s; }
  @keyframes sl{ to{ transform:translateX(-50%); } }
  @keyframes sr{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
}
.anchor{ position:absolute; inset:0; display:grid; place-items:center; z-index:4; padding:0 22px; }
/* The lanes are meant to read as texture, but they still collide with the
   statement holding still on top of them. The scrim is the band's own navy at
   full opacity in the core, so it clears the middle without reading as a blob
   the way a darker colour would. */
.anchor::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 64% 54% at 50% 50%,#102E47 0%,rgba(16,46,71,0.88) 42%,rgba(16,46,71,0) 76%); }
.anchor div{ max-width:860px; text-align:center; position:relative; }
.anchor p{ font-size:clamp(21px,3.1vw,38px); font-weight:800; letter-spacing:-0.04em; line-height:1.2; }
.anchor .sig{ margin-top:18px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; opacity:0.5; font-weight:700; }
@media (max-width:760px){ .lanes-frame{ margin:0 -22px; } }

/* ===== UNNUMBERED SECTIONS =====
   Only the stages of the theory of change carry a number and the sticky rail.
   Everything else runs full-width with its classification as a subtitle above
   the heading — same label styling, no counter, no progress bar. */
.stage.plain{ padding:110px 0; }
.stage.plain .lead{ max-width:68ch; }
.stage.plain > .wrap > .slabel{ margin-bottom:18px; }
@media (max-width:760px){ .stage.plain{ padding:76px 0; } }

/* ===== STATEMENT (full-width centred assertion) ===== */
.statement{ text-align:center; padding:100px 0; }
.statement h2{ max-width:22ch; margin:18px auto 0; }
.statement .slabel{ margin-bottom:0; }
.statement .lead{ margin:28px auto 0; text-align:left; max-width:76ch; }
@media (max-width:760px){ .statement{ padding:70px 0; } }

/* ===== THE DECLARATION =====
   Deliberately not a .claim: no quotation mark, no left rule, centred and
   framed by two hairlines. It is a positioning statement, not a quote, and it
   sits directly under the model so it has something to point at. */
/* A symmetric swell into purple: distinct from the tealgreen-900 bands either
   side of it, but it starts and ends on exactly their colour, so the moment
   reads as its own without cutting a seam into the luminance arc. */

/* ===== NUMBERED ACCORDION ROWS ===== */
.acts{ margin-top:34px; border-top:1px solid rgba(255,255,255,0.14); }
.b-light .acts,.b-paper .acts,.b-paper-2 .acts{ border-top-color:var(--line); }
/* the last column is wider than the +/× itself: when it rotates to a cross its
   bounding box grows ~40%, and a snug column would let it poke past the row */
.act{ border-bottom:1px solid rgba(255,255,255,0.14); display:grid; grid-template-columns:64px 1fr 190px 46px; gap:24px; align-items:start; padding:28px 0; cursor:pointer; transition:padding .4s var(--ease); }
.b-light .act,.b-paper .act,.b-paper-2 .act{ border-bottom-color:var(--line); }
.act:hover{ padding-left:14px; }
.act:focus-visible{ outline:2px solid var(--lime); outline-offset:4px; }
.act .n{ font-family:var(--font-serif); font-size:13px; opacity:0.85; padding-top:9px; transition:color .3s var(--ease); }
.act h3{ font-size:clamp(19px,2.6vw,30px); letter-spacing:-0.04em; }
.act .det{ max-height:0; overflow:hidden; opacity:0; transition:max-height .6s var(--ease), opacity .5s var(--ease), margin .6s var(--ease); }
.act.open .det{ max-height:280px; opacity:1; margin-top:14px; }
.act .det p{ font-size:14.5px; line-height:1.7; opacity:0.88; max-width:60ch; }
.act .tag{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; opacity:0.72; padding-top:13px; text-align:right; }
.act .pl{ width:32px; height:32px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.26); display:grid; place-items:center; font-size:15px; margin-top:4px; justify-self:center;
  transition:transform .45s var(--ease), background .3s, color .3s, border-color .3s; }
.b-light .act .pl,.b-paper .act .pl,.b-paper-2 .act .pl{ border-color:var(--line); }
.act.open .pl{ transform:rotate(135deg); background:var(--layer,var(--lime)); border-color:var(--layer,var(--lime)); color:var(--navy-black); }
/* each layer carries its own brand colour — the same five that colour-coded the
   layers on the original site — surfacing on hover and when the row is open */
.act[data-layer="gov"]{ --layer:#7fd6cc; } .act[data-layer="role"]{ --layer:#8ee6ef; }
.act[data-layer="rhy"]{ --layer:#ffc074; } .act[data-layer="dec"]{ --layer:#dd9fe0; }
.act[data-layer="inf"]{ --layer:#f0a698; }
.act::after{ content:''; position:absolute; left:0; top:0; bottom:-1px; width:2px; background:var(--layer); transform:scaleY(0); transform-origin:50% 0; transition:transform .45s var(--ease); }
.act{ position:relative; }
.act:hover::after,.act.open::after{ transform:scaleY(1); }
.act:hover .n,.act.open .n{ color:var(--layer); opacity:1; }
@media (max-width:880px){ .act{ grid-template-columns:38px 1fr 46px; gap:16px; } .act .tag{ display:none; } }

/* ===== GLASS CARDS (problem cards, archetypes) ===== */
.arts{ margin-top:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
/* the glass sits on a dark underlay, not just a white lift — otherwise the
   cards lose contrast as the bands brighten toward teal further down */
.art,.problem-card,.arche{ background:linear-gradient(rgba(4,20,32,0.26),rgba(4,20,32,0.26)),rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16); border-radius:14px; padding:26px 24px; backdrop-filter:blur(8px);
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease); }
.art:hover,.problem-card:hover,.arche:hover{ transform:translateY(-5px); background:linear-gradient(rgba(4,20,32,0.18),rgba(4,20,32,0.18)),rgba(255,255,255,0.13); border-color:rgba(255,255,255,0.28); }
.art .lay,.arche .flag{ font-size:10px; letter-spacing:0.13em; text-transform:uppercase; font-weight:700; padding:4px 9px; border-radius:4px; display:inline-block; margin-bottom:16px; }
.art b,.problem-card strong,.arche h4{ display:block; font-size:15.5px; letter-spacing:-0.025em; margin-bottom:8px; font-weight:800; color:#fff; }
.art p,.problem-card p,.arche p{ font-size:13px; line-height:1.65; opacity:0.9; }
.l-gov{ background:rgba(4,20,32,0.34); color:#a5e8de; }
.l-role{ background:rgba(4,20,32,0.34); color:#a8edf5; }
.l-rhy{ background:rgba(4,20,32,0.34); color:#ffd29a; }
.l-dec{ background:rgba(4,20,32,0.34); color:#eab6ec; }
.l-inf{ background:rgba(4,20,32,0.34); color:#f7c2b8; }
@media (max-width:960px){ .arts{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .arts{ grid-template-columns:1fr; } }

.problem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:38px; }
@media (max-width:860px){ .problem-grid{ grid-template-columns:1fr; } }
.badge{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-bottom:18px; }
.badge svg{ width:22px; height:22px; }

/* ===== COUNT-UP FIGURES =====
   .case-stats runs as a single column because it lives in the narrow sidebar
   beside the case narrative — two columns there would break the big numerals
   across lines. It only widens to two once the case grid has already stacked. */
.outs,.case-stats{ margin-top:16px; display:grid; gap:1px; background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.18); border-radius:18px; overflow:hidden; }
.outs{ grid-template-columns:repeat(2,1fr); }
.case-stats{ grid-template-columns:1fr; }
@media (max-width:900px){ .case-stats{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .case-stats{ grid-template-columns:1fr; } }
@media (max-width:760px){ .outs{ grid-template-columns:1fr; } }
.out,.case-stat{ background:rgba(255,255,255,0.05); padding:30px 26px; backdrop-filter:blur(6px); }
.out .val,.case-stat b{ font-weight:800; letter-spacing:-0.06em; line-height:0.9; display:flex; align-items:baseline; gap:2px;
  background:linear-gradient(96deg,var(--lime),var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.out .val{ font-size:clamp(34px,4.6vw,56px); }
.case-stat b{ font-size:clamp(30px,3.2vw,42px); }
.out .val .suf{ font-size:0.42em; letter-spacing:-0.02em; }
.out .lbl{ font-size:11.5px; letter-spacing:0.13em; text-transform:uppercase; font-weight:700; opacity:0.75; margin-bottom:22px; line-height:1.5; }
.out .note,.case-stat span{ display:block; margin-top:12px; font-size:12.5px; line-height:1.6; opacity:0.86; }
/* light-band variant */
.b-light .outs,.b-paper .outs,.b-light .case-stats,.b-paper .case-stats,.b-paper-2 .case-stats{ background:var(--line); border-color:var(--line); }
.b-light .out,.b-paper .out,.b-light .case-stat,.b-paper .case-stat,.b-paper-2 .case-stat{ background:var(--white); }
.b-light .out .val,.b-paper .out .val,.b-light .case-stat b,.b-paper .case-stat b,.b-paper-2 .case-stat b{ background:linear-gradient(96deg,var(--tealgreen),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.b-light .out .lbl,.b-paper .out .lbl{ color:var(--ink-2); opacity:1; }
.b-light .out .note,.b-paper .out .note,.b-light .case-stat span,.b-paper .case-stat span,.b-paper-2 .case-stat span{ color:var(--slate); opacity:1; }
.smart{ margin-top:30px; font-size:12.5px; line-height:1.75; opacity:0.72; max-width:78ch; }

/* ===== LIGHT-BAND CARDS ===== */
.gains{ margin-top:16px; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.gain{ background:var(--white); border:1px solid var(--line); border-radius:20px; padding:32px 30px; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.gain:hover{ transform:translateY(-5px); box-shadow:0 22px 50px rgba(10,45,70,0.09); }
.gain .hz{ font-family:var(--font-serif); font-size:12.5px; color:var(--tealgreen); letter-spacing:0.06em; display:block; margin-bottom:14px; }
.gain b{ display:block; font-size:18px; letter-spacing:-0.03em; margin-bottom:10px; color:var(--ink); font-weight:800; }
.gain p{ font-size:14px; line-height:1.7; color:var(--ink-2); }
@media (max-width:760px){ .gains{ grid-template-columns:1fr; } }

/* ===== HONEST-LABELLING BADGES ===== */
.st{ font-size:10.5px; letter-spacing:0.11em; text-transform:uppercase; font-weight:700; padding:5px 12px; border-radius:999px; display:inline-block; margin-bottom:20px; }
.st-real{ background:var(--tealgreen-tint); color:var(--tealgreen-ink); }
.st-model{ background:var(--amber-tint); color:#8F4E00; }
.honest{ margin-top:36px; font-size:13px; color:var(--ink-2); line-height:1.75; max-width:80ch; border-left:2px solid var(--tealgreen); padding-left:18px; }

/* ===== SCAN MODULE ===== */
.scan-shell{ background:linear-gradient(rgba(4,20,32,0.30),rgba(4,20,32,0.30)),rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.18); border-radius:24px; padding:6px; position:relative; overflow:hidden; margin-top:38px; }
.scan-inner{ position:relative; z-index:1; padding:44px; }
.scan-top{ display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; align-items:flex-start; }
.scan-top h3{ color:#fff; font-size:clamp(20px,2.6vw,28px); max-width:26ch; }
.scan-meta{ display:flex; gap:24px; font-size:12.5px; color:rgba(255,255,255,0.88); }
.scan-meta b{ color:var(--lime-ink); display:block; font-size:16.5px; letter-spacing:-0.02em; }
/* the scan runs full-width now that it has no stage rail, so all four
   archetypes get a real column again */
.archetypes{ margin-top:34px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.arche h4{ font-size:15.5px; margin-bottom:7px; }
.arche p{ font-size:12.5px; line-height:1.55; }
@media (max-width:1080px){ .archetypes{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .archetypes{ grid-template-columns:1fr; } .scan-inner{ padding:28px; } }
.scan-cta{ margin-top:32px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.scan-cta .fine{ font-size:12.5px; color:rgba(255,255,255,0.88); }

/* ===== SCAN — LIVE QUIZ ENGINE (js/scan.js renders these inside .scan-inner) =====
   This is the one component every respondent actually touches, so it earns
   the same glass/gradient/Poppins language as the rest of the site rather
   than sitting on it unstyled. */
.qz-progress{ display:flex; align-items:center; gap:14px; margin-bottom:30px; }
.qz-bar{ flex:1; height:5px; border-radius:99px; background:rgba(255,255,255,0.14); overflow:hidden; }
.qz-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--teal),var(--lime)); transition:width .45s var(--ease); }
.qz-count{ font-size:11.5px; letter-spacing:0.08em; color:rgba(255,255,255,0.68); white-space:nowrap; font-weight:700; }

.qz-step{ max-width:62ch; }
.qz-kick{ display:inline-flex; align-items:center; gap:10px; font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; color:var(--lime-ink); opacity:0.9; margin-bottom:16px; }
.qz-kick::before{ content:'/'; opacity:0.8; }
.qz-q{ color:#fff; font-size:clamp(19px,2.5vw,25px); letter-spacing:-0.02em; line-height:1.32; margin-bottom:10px; font-weight:700; }
.qz-sub{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,0.68); margin-bottom:26px; }

.qz-options{ display:flex; flex-direction:column; gap:10px; }
.qz-opt{ font-family:var(--font); text-align:left; display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  background:rgba(255,255,255,0.05); border:1.5px solid rgba(255,255,255,0.16); border-radius:11px; padding:16px 18px; color:#fff; font-size:14px; font-weight:600; cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.qz-opt:hover{ background:rgba(255,255,255,0.10); border-color:var(--teal); transform:translateX(3px); }
.qz-opt-sub{ display:block; margin-top:4px; font-size:12px; font-weight:400; color:rgba(255,255,255,0.62); }
.qz-opt-arrow{ flex-shrink:0; opacity:0.5; transition:opacity .25s var(--ease), transform .25s var(--ease); }
.qz-opt:hover .qz-opt-arrow{ opacity:1; transform:translateX(2px); color:var(--lime); }

.qz-nav{ margin-top:22px; }
.qz-back{ font-family:var(--font); background:none; border:none; color:rgba(255,255,255,0.55); font-size:13px; font-weight:600; cursor:pointer; padding:8px 0; transition:color .25s var(--ease); }
.qz-back:hover{ color:var(--lime); }
.qz-back:disabled{ opacity:0.35; cursor:default; }
.qz-back:disabled:hover{ color:rgba(255,255,255,0.55); }

/* ---- results ---- */
.qz-results{ max-width:66ch; }
.qz-tabs{ display:flex; gap:6px; margin-bottom:26px; flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,0.14); padding-bottom:0; }
.qz-tab{ font-family:var(--font); background:none; border:none; border-bottom:2.5px solid transparent; color:rgba(255,255,255,0.55); font-size:13px; font-weight:700; padding:10px 4px 14px; cursor:pointer; transition:color .25s var(--ease), border-color .25s var(--ease); margin-right:20px; }
.qz-tab:hover{ color:rgba(255,255,255,0.85); }
.qz-tab-active{ color:#fff; border-color:var(--lime); }
.qz-panel{ display:none; }
.qz-panel-active{ display:block; animation:qzFadeIn .35s var(--ease); }
@keyframes qzFadeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

.qz-tips{ margin:0 0 18px; padding:0; list-style:none; }
.qz-tips li{ position:relative; padding-left:26px; font-size:15px; line-height:1.75; color:rgba(255,255,255,0.92); }
.qz-tips li::before{ content:'→'; position:absolute; left:0; top:0; color:var(--lime); font-weight:700; }
.qz-share-note{ font-size:12px; color:rgba(255,255,255,0.5); font-style:italic; margin-top:18px; }

/* the archetype name is the emotional peak of the whole experience — it gets
   the same hero gradient-clip treatment as the homepage's headline figures
   (.out .val), not the default paragraph weight it had with no rule at all */
.qz-arche-name{ font-family:var(--font); font-weight:800; font-size:clamp(26px,4vw,38px); letter-spacing:-0.03em; line-height:1.05; margin-bottom:14px;
  background:linear-gradient(96deg,var(--lime),var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.qz-doc-head{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid rgba(255,255,255,0.16); }
.qz-doc-brand{ color:#fff; display:flex; align-items:center; }
.qz-doc-logo{ height:20px; width:auto; display:block; }
.qz-doc-meta{ font-size:11.5px; letter-spacing:0.05em; color:rgba(255,255,255,0.55); text-align:right; }
.qz-doc-for{ font-size:15px; font-weight:700; color:#fff; margin-bottom:16px; }
.qz-model-note{ font-size:12px; line-height:1.65; color:rgba(255,255,255,0.68); background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:14px 16px; margin-bottom:22px; }
.qz-model-note b{ color:rgba(255,255,255,0.92); font-weight:700; }

.qz-radar{ display:flex; flex-direction:column; gap:13px; margin:22px 0 6px; }
.qz-radar-row{ display:grid; grid-template-columns:118px 1fr 76px; align-items:center; gap:14px; }
.qz-radar-label{ font-size:12px; font-weight:700; color:rgba(255,255,255,0.75); }
.qz-radar-track{ height:9px; border-radius:99px; background:rgba(255,255,255,0.12); overflow:hidden; display:block; }
.qz-radar-fill{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--teal),var(--lime)); transition:width .6s var(--ease); }
.qz-radar-val{ font-size:11.5px; color:rgba(255,255,255,0.6); text-align:right; }
.qz-radar-band{ font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:rgba(255,255,255,0.45); text-align:right; display:block; margin-top:1px; }
@media (max-width:560px){ .qz-radar-row{ grid-template-columns:96px 1fr 60px; gap:9px; } }

.qz-body{ color:rgba(255,255,255,0.9); font-size:14.5px; line-height:1.7; margin-bottom:6px; }

.qz-caveat{ margin-top:14px; padding:14px 16px; background:rgba(255,140,0,0.09); border-left:2.5px solid var(--amber); border-radius:0 8px 8px 0; font-size:13px; line-height:1.65; color:rgba(255,255,255,0.88); }

.qz-recommend{ margin-top:26px; padding:22px 24px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.16); border-radius:14px; }
.qz-recommend-kick{ font-size:10.5px; letter-spacing:0.13em; text-transform:uppercase; font-weight:700; color:var(--lime-ink); margin-bottom:12px; }
.qz-recommend-then{ margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.12); font-size:12.5px; line-height:1.65; color:rgba(255,255,255,0.65); }

.qz-tab-cta{ margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.12); font-size:13px; color:rgba(255,255,255,0.72); }
.qz-tab-cta a{ color:var(--lime); font-weight:700; text-decoration:none; }
.qz-tab-cta a:hover{ color:var(--teal); }

.qz-email{ display:flex; gap:10px; flex-wrap:wrap; margin-top:36px; padding-top:26px; border-top:1px solid rgba(255,255,255,0.14); }
.qz-email input{ font-family:var(--font); flex:1; min-width:150px; background:rgba(255,255,255,0.07); border:1.5px solid rgba(255,255,255,0.20); border-radius:8px; padding:13px 15px; color:#fff; font-size:13.5px; }
.qz-email input::placeholder{ color:rgba(255,255,255,0.45); }
.qz-email input:focus{ outline:none; border-color:var(--teal); background:rgba(255,255,255,0.10); }
.qz-email-note{ font-size:11.5px; color:rgba(255,255,255,0.5); margin-top:10px; }
@media (max-width:640px){ .qz-email{ flex-direction:column; } .qz-email input{ width:100%; } }

.qz-restart{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.10); }
.qz-feedback{ font-size:12px; color:rgba(255,255,255,0.5); }
.qz-feedback a{ color:rgba(255,255,255,0.75); text-decoration:underline; }
.qz-feedback a:hover{ color:var(--lime); }

/* ---- print: the copy tells respondents to print/save the board-ready tab
   to share with their board — until this rule existed that produced a
   near-black page with invisible bars and white-on-white form chrome. This
   switches the whole document to the site's own light-band register (the
   register .b-light/.b-paper already use) for anything sent to paper, and
   drops everything that isn't part of the document (nav, blooms, tabs bar,
   email capture, restart/feedback footer). Whichever tab is on screen when
   the visitor prints is the one that prints — .qz-panel-active is the only
   panel already set to display:block, so no extra JS is needed here. */
@media print{
  .nav,.menu-drawer,.menu-overlay,.grain,.blob,.bloom,.prog,.scroll-progress,
  .qz-tabs,.qz-tab-cta,.qz-email,.qz-email-note,.qz-restart{ display:none !important; }
  body,.band{ background:#fff !important; color:var(--ink) !important; }
  .scan-shell{ background:none !important; border:none !important; padding:0 !important; margin-top:0 !important; }
  .scan-inner{ padding:0 !important; }
  .scan-top,.scan-meta{ display:none !important; }
  .qz-body,.qz-share-note,.qz-radar-label,.qz-radar-val,.qz-radar-band{ color:var(--ink) !important; }
  .qz-share-note{ color:var(--slate) !important; }
  .qz-doc-head{ border-bottom-color:var(--line) !important; }
  .qz-doc-brand{ color:var(--navy) !important; }
  .qz-doc-for{ color:var(--ink) !important; }
  .qz-doc-meta{ color:var(--slate) !important; }
  .qz-model-note{ color:var(--ink-2) !important; background:var(--paper-2) !important; border-color:var(--line) !important; }
  .qz-model-note b{ color:var(--ink) !important; }
  .qz-recommend-then{ color:var(--ink-2) !important; border-top-color:var(--line) !important; }
  .qz-radar-track{ background:var(--line) !important; }
  .qz-radar-fill{ background:var(--tealgreen) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .qz-arche-name{ -webkit-print-color-adjust:exact; print-color-adjust:exact; background:none !important; color:var(--navy) !important; }
  .qz-caveat{ background:#FFF4E5 !important; color:var(--ink) !important; border-left-color:var(--amber) !important; }
  .qz-recommend{ background:#F1F4F6 !important; border-color:var(--line) !important; }
  .scan-cta .fine{ color:var(--slate) !important; }
  .btn-lime{ background:var(--lime) !important; color:var(--navy-black) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ===== CASE STUDIES ===== */
.case-tabs{ display:flex; gap:10px; margin-top:36px; flex-wrap:wrap; }
.case-tab{ font-family:var(--font); font-weight:700; font-size:13.5px; padding:11px 20px; border-radius:8px; border:1.5px solid var(--line); background:var(--white); color:var(--ink-2); cursor:pointer; transition:all .25s var(--ease); }
.case-tab:hover{ border-color:var(--tealgreen); color:var(--tealgreen); }
.case-tab.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.case-panels{ position:relative; }
.case-panel{ display:none; }
.case-panel.active{ display:block; }
.case{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:start; margin-top:34px; }
@media (max-width:900px){ .case{ grid-template-columns:1fr; gap:32px; } }
.case-quote{ margin-top:24px; font-size:17px; font-weight:700; letter-spacing:-0.025em; color:var(--ink); line-height:1.5; border-left:3px solid var(--teal); padding-left:20px; }
.case-footnote{ margin-top:24px; font-size:13px; color:var(--ink-2); line-height:1.6; border-left:3px solid var(--slate); padding-left:20px; }
.case-nav{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:36px; }
.case-nav button{ width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line); background:var(--white); color:var(--ink); font-size:16px; cursor:pointer; transition:all .25s var(--ease); }
.case-nav button:hover{ border-color:var(--tealgreen); color:var(--tealgreen); }
.case-nav .dots{ display:flex; gap:8px; }
.case-nav .dot{ width:8px; height:8px; border-radius:50%; background:var(--line); cursor:pointer; transition:background .25s var(--ease); }
.case-nav .dot.active{ background:var(--navy); }

.embed-window{ margin-top:26px; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--white); box-shadow:0 12px 32px rgba(10,45,70,0.08); display:block; text-decoration:none; color:inherit; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.embed-window:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(10,45,70,0.14); }
.embed-chrome{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--paper-2); border-bottom:1px solid var(--line); }
.embed-chrome .dot-b{ width:9px; height:9px; border-radius:50%; }
.embed-chrome .bar{ flex:1; margin-left:8px; background:var(--white); border:1px solid var(--line); border-radius:6px; padding:5px 10px; font-size:11.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Each frame's aspect-ratio matches its source file exactly, so the browser
   chrome fits the artwork instead of cropping it:
   cfye-impact-infographic.png 1268x1043 · index-2.jpg 636x900 · index-3.jpg 881x871 */
.preview-visual{ position:relative; height:220px; overflow:hidden; display:flex; align-items:flex-end; background-size:cover; background-repeat:no-repeat; background-position:center; }
.preview-visual.cfye{ background-position:top center; height:auto; aspect-ratio:1268/1043; max-height:420px; }
.preview-visual.busy{ background-position:top center; height:auto; aspect-ratio:636/900; max-height:520px; }
.preview-visual.kifiya{ background-position:center; height:auto; aspect-ratio:881/871; max-height:460px; }
.preview-visual .pv-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,20,32,0) 30%,rgba(4,20,32,0.85) 100%); }
.preview-visual .pv-caption{ position:relative; z-index:1; padding:22px 26px; color:#fff; }
.preview-visual .pv-eyebrow{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; opacity:0.75; margin-bottom:6px; }
.preview-visual .pv-title{ font-size:19px; font-weight:800; line-height:1.25; max-width:420px; letter-spacing:-0.03em; color:#fff; }
.embed-fallback{ padding:12px 16px; font-size:12.5px; color:var(--slate); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.embed-fallback .open-hint{ font-weight:700; color:var(--tealgreen-ink); }

/* ===== PAPER GATE ===== */
.paper-shell{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:0; margin-top:40px; background:var(--white); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
@media (max-width:860px){ .paper-shell{ grid-template-columns:1fr; } }
.paper-info{ padding:42px; }
.paper-info h3{ font-size:21px; margin-bottom:14px; color:var(--ink); line-height:1.25; }
.paper-info p{ font-size:14.5px; color:var(--ink-2); line-height:1.7; }
.paper-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.paper-meta span{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; background:var(--teal-tint); color:var(--tealgreen-ink); padding:5px 11px; border-radius:6px; }
.paper-gate{ background:var(--paper-2); padding:42px; display:flex; flex-direction:column; justify-content:center; }
.paper-gate label{ display:block; font-size:12px; font-weight:700; color:var(--ink-2); margin-bottom:6px; margin-top:14px; }
.paper-gate form > label:first-child{ margin-top:0; }
.paper-gate input,.paper-gate select{ width:100%; padding:12px 14px; border-radius:9px; border:1.5px solid var(--line); font-family:var(--font); font-size:14px; background:var(--white); color:var(--ink); }
.paper-gate input:focus,.paper-gate select:focus{ outline:2px solid var(--tealgreen); outline-offset:1px; }
.paper-gate .btn{ width:100%; justify-content:center; margin-top:20px; }
.paper-success{ display:none; text-align:center; }
.paper-success.show{ display:block; }
.paper-gate.hide{ display:none; }
.paper-success .btn{ width:100%; justify-content:center; }
.paper-success h3{ color:var(--ink); }

/* ===== FUNNEL ===== */
.funnel{ margin-top:44px; display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.funnel-step{ text-align:center; padding:0 8px; }
.f-num{ font-family:var(--font-serif); font-weight:700; font-size:clamp(56px,7vw,96px); line-height:0.82; margin:0 0 14px; letter-spacing:-0.03em; display:inline-block;
  background:linear-gradient(90deg,var(--lime),var(--teal),var(--purple),var(--coral),var(--amber)); background-size:500% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.funnel-step:nth-child(1) .f-num{ background-position:0% 0; }
.funnel-step:nth-child(2) .f-num{ background-position:25% 0; }
.funnel-step:nth-child(3) .f-num{ background-position:50% 0; }
.funnel-step:nth-child(4) .f-num{ background-position:75% 0; }
.funnel-step:nth-child(5) .f-num{ background-position:100% 0; }
.funnel-step h3{ font-size:17px; font-weight:800; margin-bottom:10px; letter-spacing:-0.025em; }
.funnel-step span{ font-size:14.5px; color:var(--ink-2); line-height:1.6; display:block; }
@media (max-width:820px){ .funnel{ grid-template-columns:1fr 1fr; gap:36px 20px; } }
@media (max-width:520px){ .funnel{ grid-template-columns:1fr; } }

/* ===== CLAIM ===== */
.claim{ position:relative; padding:10px 0 10px 62px; max-width:74ch; }
.claim::before{ content:'\201C'; position:absolute; left:0; top:-16px; font-family:var(--font-serif); font-size:78px; color:var(--teal); line-height:1; opacity:0.6; }
.b-light .claim::before,.b-paper .claim::before,.b-paper-2 .claim::before{ color:var(--tealgreen); }
.claim p{ font-size:clamp(18px,2.4vw,27px); font-weight:700; letter-spacing:-0.03em; line-height:1.42; margin:0; }
.claim .src{ margin-top:16px; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; opacity:0.72; }
/* the standalone variant: a pull quote that carries a whole band by itself
   rather than sitting under body copy, so it gets more scale and more air */
.claim-lg{ max-width:1040px; margin:0 auto; padding:14px 0 14px 82px; }
.claim-lg::before{ font-size:108px; top:-28px; }
.claim-lg p{ font-size:clamp(21px,3.2vw,38px); line-height:1.28; }
.claim-lg .src{ margin-top:24px; }
@media (max-width:700px){
  .claim{ padding-left:38px; } .claim::before{ font-size:56px; top:-10px; }
  .claim-lg{ padding-left:44px; } .claim-lg::before{ font-size:66px; top:-14px; }
}
/* the turn band ends in daylight, so its pull quote and rail switch to ink
   rather than sitting as white-on-pale-teal */
.b-turn .lead{ opacity:1; }
.b-turn .slabel{ color:#fff; }
.b-turn .sbar i{ background:#fff; }
.b-turn .claim{ color:var(--navy-deep); }
.b-turn .claim::before{ color:#fff; opacity:0.55; }
.b-turn .claim .src{ opacity:1; }

/* ===== INFINITY DIAGRAM ===== */
.infinity-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center; margin-top:8px; }
.infinity-diagram img{ width:100%; max-width:400px; height:auto; margin:0 auto; }
@media (max-width:900px){ .infinity-grid{ grid-template-columns:1fr; } .infinity-diagram{ margin-top:28px; } }

/* ===== CTA CLOSER + FOOTER =====
   The page has arrived in daylight; the closer walks it back into the dark it
   opened in, so the arc reads as a loop rather than a ramp. */
/* The handoff from paper into the dark closer runs over 520px with hand-eased
   intermediate stops. A two-stop ramp between values this far apart banded
   badly and read as a hard edge; the extra stops follow an ease-out curve so
   the transition is long and gradual instead. Stops are in px, not %, so the
   fade is identical on every page regardless of how tall its closer is. */
/* --closer-from MUST equal the background of whatever band sits directly above
   the closer, or the first stop reads as a hard line across the page. Every
   page currently ends on .b-paper; if a page ever ends on .b-paper-2, override
   --closer-from on that page's .cta rather than leaving it to drift. */
.cta{ --closer-from:var(--paper);
  padding:450px 0 52px; text-align:center; position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg,
    var(--closer-from) 0px,
    #f4f6f8 40px,
    #eaeef2 90px,
    #dae1e7 150px,
    #c2ced8 210px,
    #a5b5c2 270px,
    #8299ab 325px,
    #5d7690 375px,
    #3b5474 420px,
    #1d3350 470px,
    var(--navy-deep) 520px,
    var(--ramp-0) 660px); }
/* the bloom lives inside the fade so the transition carries some colour rather
   than reading as a long grey wash */
/* NOTE: this one keeps `transparent` on purpose. It sits inside .cta's long
   paper→ramp-0 fade, so the correct outer colour changes with its position;
   a single fixed stop would be wrong somewhere along it. The model page
   depends on its current appearance. The inverted footer overrides it. */
.cta .bloom.x1{ width:960px; height:820px; top:120px; left:50%; transform:translateX(-50%); background:radial-gradient(circle at 50% 50%,var(--purple),var(--coral) 52%,transparent 74%); --o:0.34; }
.cta h2{ font-size:clamp(28px,5.2vw,66px); max-width:16ch; margin:0 auto; color:#fff; }
.cta h2 em{ font-style:normal; background:linear-gradient(96deg,var(--lime),var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cta .ctas{ justify-content:center; margin-top:40px; }
.brand-logo-full{ height:78px; width:auto; color:#fff; opacity:0.92; margin:0 auto 36px; position:relative; z-index:2; }
.foot-bottom{ margin:76px auto 0; border-top:1px solid rgba(255,255,255,0.12); padding:26px 0 0; display:flex; justify-content:space-between; font-size:12.5px; color:rgba(255,255,255,0.66); flex-wrap:wrap; gap:12px; position:relative; z-index:2; max-width:1240px; }
.foot-bottom a{ color:inherit; text-decoration:underline; font-weight:400; }

/* ==========================================================================
   INTERIOR PAGES
   ========================================================================== */
.page-head{ padding:150px 0 80px; }
.page-head h1{ font-size:clamp(32px,5.4vw,68px); margin-top:28px; max-width:17ch; letter-spacing:-0.05em; line-height:0.94; color:#fff; }
.page-head h1 em{ font-style:normal; background:linear-gradient(96deg,var(--teal),var(--lime)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-head .hero-sub{ margin-top:30px; }
.page-head .bloom.h1b{ width:820px; height:820px; top:-380px; right:-240px; background:radial-gradient(circle at 45% 55%,var(--purple),var(--tealgreen) 52%,rgba(6,20,35,0) 74%); --o:0.5; }
.page-head .bloom.h2b{ width:620px; height:620px; bottom:-400px; left:-200px; background:radial-gradient(circle at 50% 50%,var(--teal),var(--navy) 60%,rgba(6,20,35,0) 78%); --o:0.45; }

.prose-stack{ display:grid; gap:60px; }
.prose-block h2{ font-size:clamp(26px,4vw,46px); max-width:18ch; }

/* founder */
.founder-feature{ display:grid; grid-template-columns:0.72fr 1.28fr; gap:48px; align-items:start; margin-top:40px; }
.founder-feature img{ width:100%; max-width:340px; height:auto; border-radius:20px; box-shadow:0 24px 60px rgba(10,45,70,0.16); position:sticky; top:120px; }
.founder-feature h3{ font-size:clamp(22px,3vw,34px); margin-bottom:18px; color:var(--ink); }
.founder-feature p{ font-size:15.5px; color:var(--ink-2); line-height:1.8; margin-bottom:14px; }
@media (max-width:900px){ .founder-feature{ grid-template-columns:1fr; } .founder-feature img{ position:static; max-width:260px; } }
.founder-signature{ font-weight:700; color:var(--ink) !important; padding-top:18px; margin-top:18px; border-top:1px solid var(--line); }
.founder-bio-card{ margin-top:28px; padding:24px 28px; background:var(--white); border:1px solid var(--line); border-radius:16px; }
.founder-bio-label{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; color:var(--tealgreen-ink); margin-bottom:10px; }
.founder-bio-card p{ font-size:13.5px; line-height:1.7; color:var(--ink-2); margin:0; }
.founder-cta{ margin-top:22px; display:inline-flex; }

/* team + partners */
.team-placeholder{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; max-width:640px; }
.team-slot{ border:1.5px dashed var(--line); border-radius:16px; padding:28px 16px; text-align:center; background:var(--paper-2); }
.team-slot .avatar{ width:58px; height:58px; border-radius:50%; background:var(--white); border:1.5px dashed var(--line); margin:0 auto 14px; display:flex; align-items:center; justify-content:center; color:var(--slate); font-size:20px; font-weight:700; }
.soon-tag{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:0.10em; text-transform:uppercase; color:#8F4E00; background:var(--amber-tint); border-radius:20px; padding:4px 11px; }
@media (max-width:600px){ .team-placeholder{ grid-template-columns:1fr 1fr; max-width:400px; } }

/* Team — portraits and names only.
   Deliberately inert: no link, no hover, no transition. Roles are coming but
   are not settled, and a card that already behaves like a button invites copy
   to be invented to justify the affordance. Adding a role later is then one
   line of markup rather than an unpick.
   The frame is fixed at 4:5 and the file is pre-cropped to match, so `cover`
   never has to crop again and the three sit on an exact shared baseline. */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:34px; max-width:840px; }
.team-member{ margin:0; }
/* height:auto is load-bearing. The width/height attributes on the <img> are
   presentational hints, so height="900" lands as a real 900px height unless CSS
   overrides it — and with both axes definite, aspect-ratio is ignored entirely
   and the card renders as a 211x900 column. */
.team-member img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
                  object-position:50% 20%; border-radius:18px; display:block;
                  background:var(--paper-2); box-shadow:0 18px 44px rgba(10,45,70,0.14); }
.team-member figcaption{ margin-top:14px; font-size:16px; font-weight:600; color:var(--ink); }
@media (max-width:700px){ .team-grid{ grid-template-columns:1fr 1fr; max-width:470px; } }
@media (max-width:430px){ .team-grid{ grid-template-columns:1fr; max-width:270px; } }
.partner-strip{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.partner-pill{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:14px 20px; font-size:13.5px; font-weight:700; color:var(--ink); }
.partner-pill a{ color:inherit !important; text-decoration:none; }
.partner-pill span{ display:block; font-size:11.5px; font-weight:500; color:var(--slate); margin-top:2px; }

/* insights grid */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.post-card{ background:var(--white); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit !important; font-weight:400 !important; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.post-card:hover{ transform:translateY(-5px); box-shadow:0 22px 50px rgba(10,45,70,0.12); }
.post-thumb{ width:100%; aspect-ratio:16/9; background-size:cover; background-position:center; background-repeat:no-repeat; }
.post-body{ padding:24px 26px 28px; display:flex; flex-direction:column; flex:1; }
.post-card .post-date{ font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--tealgreen-ink); margin-bottom:12px; }
.post-card h3{ font-size:18px; margin-bottom:10px; line-height:1.25; color:var(--ink); }
.post-card p{ font-size:13.5px; color:var(--ink-2); line-height:1.65; flex:1; margin-bottom:16px; }
.post-readmore{ font-size:13px; font-weight:700; color:var(--coral-ink); }
@media (max-width:960px){ .post-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .post-grid{ grid-template-columns:1fr; } }

/* articles */
.article-hero-wrap{ max-width:820px; margin:0 auto; padding:0 24px 40px; }
.article-hero-img{ width:100%; height:auto; border-radius:18px; margin:0 0 32px; display:block; box-shadow:0 24px 60px rgba(10,45,70,0.14); }
.article-meta{ font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; color:var(--tealgreen-ink); margin-bottom:14px; }
.article-meta a{ color:inherit; }
.article-title{ font-size:clamp(30px,5vw,56px); font-weight:800; line-height:0.98; letter-spacing:-0.045em; margin:0 0 16px; color:var(--ink); text-wrap:balance; }
.article-subtitle{ font-size:19px; font-weight:500; color:var(--ink-2); margin:0 0 20px; }
.article-linkedin-note{ font-size:12.5px; color:var(--slate); margin-bottom:36px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.article-body{ font-size:17px; line-height:1.8; color:var(--ink); }
.article-body p.lede{ font-size:20px; font-weight:600; color:var(--ink); letter-spacing:-0.02em; line-height:1.5; }
.article-body h2{ font-size:clamp(22px,3vw,30px); font-weight:800; letter-spacing:-0.035em; margin:48px 0 16px; color:var(--ink); }
.article-body h3{ font-size:19px; margin:32px 0 12px; color:var(--ink); }
.article-body p{ margin:0 0 20px; }
.article-body ul,.article-body ol{ margin:0 0 20px; padding-left:24px; }
.article-body li{ margin-bottom:8px; }
.article-body blockquote{ margin:36px 0; padding:4px 0 4px 28px; border-left:3px solid var(--coral); font-size:21px; font-weight:700; letter-spacing:-0.025em; line-height:1.45; font-style:normal; color:var(--ink); }
.article-body em{ font-style:italic; }
.article-refs{ margin-top:56px; padding-top:28px; border-top:1px solid var(--line); }
.article-refs h2{ font-size:11px; text-transform:uppercase; letter-spacing:0.18em; color:var(--tealgreen-ink); margin-bottom:18px; }
.article-refs ul{ padding-left:20px; margin:0; }
.article-refs li{ font-size:13.5px; line-height:1.7; color:var(--slate); margin-bottom:8px; }
.article-back{ display:inline-block; margin:44px 0 0; font-size:14px; font-weight:700; color:var(--tealgreen-ink); text-decoration:none; }
.article-back:hover{ color:var(--coral-ink); }

/* privacy / legal prose */
.privacy-policy h1{ font-size:clamp(30px,4.6vw,52px); margin-bottom:24px; color:var(--ink); }
.privacy-policy h2{ font-size:clamp(20px,2.6vw,26px); margin:44px 0 14px; color:var(--ink); }
.privacy-policy h3{ font-size:16px; margin:28px 0 10px; color:var(--ink); }
.privacy-policy p,.privacy-policy li{ font-size:15px; line-height:1.8; color:var(--ink-2); margin:0 0 16px; }
.privacy-policy ul{ padding-left:22px; }

/* gradient text helpers, carried over from the original stylesheet */
.grad-text{ font-style:normal; }
.grad-teal-lime{ font-style:normal; background:linear-gradient(90deg,var(--teal),var(--lime)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-teal-purple{ font-style:normal; background:linear-gradient(90deg,var(--teal),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-teal-coral{ font-style:normal; background:linear-gradient(90deg,var(--teal),var(--coral)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.b-light .grad-teal-lime,.b-paper .grad-teal-lime,.b-paper-2 .grad-teal-lime,
.b-light .grad-teal-purple,.b-paper .grad-teal-purple,.b-paper-2 .grad-teal-purple{ background:linear-gradient(90deg,var(--tealgreen),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.confetti-bit{ position:fixed; pointer-events:none; z-index:999; border-radius:2px; }

/* ==========================================================================
   NARROW SCREENS
   Grid children default to min-width:auto, so a single nowrap button was able
   to push .wrap wider than the viewport — body's overflow-x:clip then hid the
   overflow instead of reporting it, which is why it only showed up visually.
   ========================================================================== */
.srail > *,.hero-foot > *,.infinity-grid > *,.case > *,.paper-shell > *{ min-width:0; }
@media (max-width:560px){
  /* max-width, not flex-wrap: wrapping would drop the "/" onto its own line */
  .kick,.eyebrow{ max-width:100%; align-items:flex-start; gap:9px; }
  .btn{ white-space:normal; text-align:center; }
  .ctas .btn,.hero-ctas .btn,.scan-cta .btn{ width:100%; justify-content:center; }
  .hero h1{ font-size:clamp(38px,11vw,56px); }
  /* a shorter ramp on narrow screens, or the fade would eat most of a phone screen */
  .cta{ padding-top:300px; background:linear-gradient(180deg,
    var(--closer-from) 0px,#f3f5f8 30px,#e6ebef 65px,#d0dae1 110px,#b0bfcb 155px,#8b9fb1 200px,
    #647c94 240px,#3f5876 275px,#22385a 305px,var(--navy-deep) 335px,var(--navy-black) 440px); }
  .cta .bloom.x1{ top:70px; }
  .foot-bottom{ justify-content:flex-start; gap:8px; flex-direction:column; align-items:flex-start; }
  .scan-top{ gap:18px; }
  .scan-meta{ gap:18px; }
}


/* ==========================================================================
   FINISH
   ========================================================================== */

/* keyboard users get the same clarity as pointer users */
:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; border-radius:3px; }
.b-light :focus-visible,.b-paper :focus-visible,.b-paper-2 :focus-visible{ outline-color:var(--tealgreen); }
.skip-link{ position:fixed; top:8px; left:8px; z-index:500; transform:translateY(-160%);
  background:var(--lime); color:var(--navy-black); font-weight:700; font-size:13px;
  padding:11px 18px; border-radius:7px; text-decoration:none; transition:transform .25s var(--ease); }
.skip-link:focus{ transform:none; }

::selection{ background:var(--lime); color:var(--navy-black); }
.b-light ::selection,.b-paper ::selection,.b-paper-2 ::selection{ background:var(--tealgreen); color:#fff; }

/* the carousel dots were 8px hit areas — the dot stays 8px, the target is 44px */
.case-nav .dot{ position:relative; }
.case-nav .dot::after{ content:''; position:absolute; inset:-18px; border-radius:50%; }
.case-nav .dots{ gap:14px; }
.hamburger,.menu-close{ position:relative; }
.hamburger::after,.menu-close::after{ content:''; position:absolute; inset:-4px; }

/* the arrow leans into the direction it points, on the way in and on the way out */
.btn,.ncta,.post-readmore,.article-back{ --nudge:0px; }
.btn::after,.ncta::after{ content:none; }
.btn,.ncta{ position:relative; }
@media (prefers-reduced-motion: no-preference){
  .arrow{ display:inline-block; transition:transform .35s var(--ease); }
  .btn:hover .arrow,.ncta:hover .arrow,.post-card:hover .arrow{ transform:translateX(4px); }
  /* inline links in prose draw their underline on rather than just changing colour */
  .b-light .lead a,.b-paper .lead a,.b-light .section-lead a,.b-paper .section-lead a,
  .article-body a{ text-decoration:none; background-image:linear-gradient(currentColor,currentColor);
    background-size:0% 1px; background-position:0 95%; background-repeat:no-repeat;
    transition:background-size .35s var(--ease); }
  .b-light .lead a:hover,.b-paper .lead a:hover,.b-light .section-lead a:hover,
  .b-paper .section-lead a:hover,.article-body a:hover{ background-size:100% 1px; }
}

/* the nav marks where you are as you travel the page */
.nav .links a{ position:relative; }
.nav .links a::after{ content:''; position:absolute; left:0; right:0; bottom:4px; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:0 50%; transition:transform .35s var(--ease); }
.nav .links a.here{ opacity:1; }
.nav .links a.here::after{ transform:scaleX(1); }

/* The stage rail is sticky, so on the two bands that brighten inside their own
   height it travels from dark teal into daylight. One ink colour cannot serve
   both ends, so it flips — the same idea as the nav inverting over light bands. */
.spin{ transition:color .45s var(--ease); }
.spin.on-light .slabel{ color:var(--tealgreen-ink); }
.spin.on-light .scount{ color:var(--ink); opacity:0.7; }
.spin.on-light .snote{ color:var(--ink-2); opacity:1; }
.spin.on-light .sbar{ background:var(--ink); opacity:0.18; }
.spin.on-light .sbar i{ background:linear-gradient(90deg,var(--tealgreen),var(--purple)); }


/* ==========================================================================
   AGENCY HOME + SHARED COMPONENTS
   New components layered on top of the live style.css. Nothing here touches
   the shipped package; if this direction is approved these rules fold into
   style.css proper.
   ========================================================================== */

/* ---- capability grid -----------------------------------------------------
   The tender-legible block. A ToR evaluator scans for their own words, so each
   card leads with the service name in their language, not ours, and carries a
   single line of what it actually means. Six is deliberate: enough to read as
   an agency, few enough that none of it looks like filler. */
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }
.cap{ background:var(--white); border:1px solid var(--line); border-radius:16px;
      padding:26px 24px 24px; }
.cap .n{ font-size:11px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
         color:var(--tealgreen-ink); display:block; margin-bottom:12px; }
.cap h3{ font-size:19px; line-height:1.25; color:var(--ink); margin:0 0 10px; }
.cap p{ font-size:14px; line-height:1.65; color:var(--ink-2); margin:0; }
@media (max-width:900px){ .cap-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .cap-grid{ grid-template-columns:1fr; } }

/* ---- two doors -----------------------------------------------------------
   The routing device. Two buyers arrive with different jobs — one is
   commissioning a programme, one is rebuilding an impact function — and the
   old homepage only ever spoke to the second. Naming both, in their own words,
   is what stops the first from bouncing. */
.doors{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:38px; }
.door{ border:1px solid rgba(255,255,255,0.16); border-radius:18px; padding:32px 30px;
       background:rgba(255,255,255,0.04); }
.door .who{ font-size:11px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
            color:var(--lime); display:block; margin-bottom:14px; }
.door h3{ font-size:23px; line-height:1.25; color:#fff; margin:0 0 12px; }
.door p{ font-size:14.5px; line-height:1.7; color:#B9CBD6; margin:0 0 20px; }
@media (max-width:760px){ .doors{ grid-template-columns:1fr; } }

/* ---- the model, stated once on the homepage ------------------------------ */
.model-claim{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:54px; align-items:center;
              margin-top:36px; }
.layer-list{ list-style:none; margin:0; padding:0; }
/* this list sits on the dark navy band, so it takes light type and a light
   hairline — var(--ink) and var(--line) are both tuned for paper and vanish */
.layer-list li{ display:flex; gap:16px; align-items:baseline; padding:13px 0;
                border-bottom:1px solid rgba(255,255,255,0.14);
                font-size:16px; color:#E6EEF3; }
.layer-list li:last-child{ border-bottom:0; }
.layer-list b{ font-size:12px; font-weight:800; color:var(--lime); letter-spacing:0.08em;
               min-width:26px; }
@media (max-width:900px){ .model-claim{ grid-template-columns:1fr; gap:30px; } }

/* ---- the owned asset -----------------------------------------------------
   The model has to look like property, not like a paragraph. A bordered plate
   with the mark set as a title, its provenance stated as fact, and the layers
   enumerated inside the same frame — so the eye reads it as one object with a
   name, the way a product gets read. */
.ip-plate{ border:1px solid rgba(255,255,255,0.20); border-radius:20px; padding:38px 38px 34px;
           background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); }
.ip-plate .mark{ font-size:clamp(22px,2.6vw,31px); font-weight:800; letter-spacing:-0.02em;
                 color:#fff; line-height:1.2; margin:0 0 8px; }
.ip-plate .mark sup{ font-size:0.42em; font-weight:700; top:-0.8em; position:relative;
                     letter-spacing:0.04em; color:var(--lime); }
.ip-plate .prov{ font-size:12px; font-weight:700; letter-spacing:0.10em; text-transform:uppercase;
                 color:var(--lime); margin:0 0 24px; }
.ip-plate .layer-list{ margin-top:4px; }

/* ---- surface switch ------------------------------------------------------
   The interconnect for the two-front-door system. It has to do two jobs at
   once: tell you which surface you are standing on, and make the other one one
   click away. Persistent rather than buried, because the single failure mode of
   a two-homepage architecture is a visitor landing on the wrong door and
   deciding the firm does not do the thing they came for. */
.switch-bar{ border-top:1px solid rgba(255,255,255,0.12); border-bottom:1px solid rgba(255,255,255,0.12);
             background:rgba(255,255,255,0.03); }
.switch-bar.on-light{ border-color:var(--line); background:var(--paper-2); }
.switch-in{ max-width:1180px; margin:0 auto; padding:16px 40px; display:flex; align-items:center;
            gap:20px; flex-wrap:wrap; justify-content:space-between; }
/* the nav is fixed at 65px and z-300, so a bar sitting at the very top of the
   document renders underneath it. The top instance carries its own clearance. */
.switch-bar.top .switch-in{ padding-top:81px; }
.switch-here{ font-size:12.5px; font-weight:700; letter-spacing:0.10em; text-transform:uppercase;
              color:var(--lime); display:flex; align-items:center; gap:10px; }
.switch-bar.on-light .switch-here{ color:var(--tealgreen-ink); }
.switch-here::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.switch-go{ font-size:14px; color:rgba(255,255,255,0.74); }
.switch-bar.on-light .switch-go{ color:var(--ink-2); }
.switch-go a{ color:#fff; font-weight:700; text-decoration:none; border-bottom:1.5px solid var(--lime);
              padding-bottom:1px; }
.switch-bar.on-light .switch-go a{ color:var(--ink); }
@media (max-width:700px){ .switch-in{ padding:14px 22px; gap:10px; } .switch-go{ font-size:13px; } }

/* ---- inverted arc: the agency door opens in daylight, then descends -------
   The live site runs dark→light (night to dawn). The agency surface runs the
   other way: it opens open and accessible where a commissioner lands, and
   deepens toward the commitment at the bottom. Same palette, opposite
   direction, so you always know which of the two front doors you came in.

   .hero hardcodes white type and a white hairline, so a light hero needs
   explicit overrides — a band-class swap alone leaves an invisible headline. */
.hero.on-paper h1{ color:var(--ink); }
.hero.on-paper h1 em{ background:linear-gradient(96deg,var(--tealgreen),var(--purple));
                      -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero.on-paper .hero-foot{ border-top-color:var(--line); }
.hero.on-paper .hero-sub{ color:var(--ink-2); opacity:1; }
.hero.on-paper .kick{ color:var(--tealgreen-ink); }
/* the blooms are tuned for a dark ground; on paper they need pulling right back
   or they read as a stain rather than light */
.hero.on-paper .bloom{ --o:0.16; }

/* THE DESCENT — one continuous fall from paper to ink across the whole page.
   The site's own bands all run dark→light because the live arc ascends. Reused
   in a descending page each one brightens internally and the next drops, which
   is the stepping the eye reads as a break. So the descent gets its own chain,
   where every band's bottom stop is exactly the next band's top stop:

     paper → paper-2 → ramp-7 → [cross] → ramp-4 → 3 → 2 → 1 → 0

   The crossing is the hard part. Between ramp-7 and ramp-4 the ground passes
   through the mid-tone dead zone where neither white nor ink clears 4.5:1 —
   ramp-6 is 3.6:1 against white and ramp-5 is 3.7:1 against ink. Rather than
   compromise a text band, .b-cross traverses it as an empty 190px strip, so
   the gradient stays unbroken and no copy is ever set on an unreadable ground. */
.b-light-1{ background:linear-gradient(180deg,var(--paper),var(--paper-2)); color:var(--ink); }
.b-light-1 h1,.b-light-1 h2,.b-light-1 h3,.b-light-1 h4{ color:var(--ink); }
.b-light-1 .eyebrow-lt{ color:var(--tealgreen-ink); }
.b-light-1 .section-lead{ color:var(--ink-2); opacity:1; }

.b-dusk{ /* Anchored to the BOTTOM in pixels — percentage stops move with band
           height, so content drifts into the darkening whenever the layout
           reflows. Measured: the embed spans 1317→1790 in a 2424px band, so the
           fall begins ~1080px off the bottom, a little under the image's top
           edge, and the image itself sits on the transition.

           The curve is eased, not linear. A straight ramp announces itself at
           the moment it starts; these stops hold within a couple of levels of
           the section colour for the first ~250px and only then accelerate, so
           the turn arrives without an edge to notice. */
         background:linear-gradient(to top,
           var(--ramp-4)  0px,
           var(--ramp-5)  140px,
           var(--ramp-6)  300px,
           var(--ramp-7)  470px,
           #C3DBD6        640px,
           #D9E9E5        790px,
           #E6F1EE        920px,
           #EDF4F2        1010px,
           #F0F3F5        1060px,
           var(--paper-2) 1085px,
           var(--paper-2) 100%);
         color:var(--ink); padding-bottom:190px; }

/* The rail is sticky inside its grid cell, and that cell runs the full height
   of .srail — 74px past the bottom of the image, so it keeps travelling after
   the picture has ended. Capping the cell to the panel's height stops it level
   with the image. CSS cannot express "match my sibling's height", so the mockup
   measures it once on load; in production this wants a wrapper element. */
.b-dusk .srail > *:first-child{ height:var(--rail-stop, auto); }

/* the honest-labelling note ran to ~100ch — past comfortable measure */
.b-dusk .honest{ max-width:72ch; }

/* my own micro-labels sit at the top of the site's existing 10.5–11.5px band
   rather than below it */
.cap .n, .door .who{ font-size:11.5px; }
.post-card .date{ font-size:11px; }

/* ==========================================================================
   RESTORED BLOCK
   A concurrent write truncated this file and took these rules with it. The
   symptom was silent: the team band lost its gradient and its captions fell
   back to ink on a dark ground (1.27:1) with no error anywhere — which is
   precisely why the audit measures rendered pixels rather than trusting the
   source.
   ========================================================================== */

/* ---- the descending chain ------------------------------------------------
   Every band's bottom stop is the next band's top stop, so the fall from paper
   to ink is unbroken across the whole page. */
.b-fall-a{ background:linear-gradient(180deg,var(--ramp-4),var(--ramp-3)); color:#fff; }
.b-fall-b{ background:linear-gradient(180deg,var(--ramp-3),var(--ramp-2)); color:#fff; }
.b-fall-c{ background:linear-gradient(180deg,var(--ramp-2),var(--ramp-1)); color:#fff; }
.b-fall-d{ background:linear-gradient(180deg,var(--ramp-1),var(--ramp-0)); color:#fff; }
.b-fall-e{ background:var(--ramp-0); color:#fff; }

/* the footer fades --closer-from → ramp-0 for the live site's light ending;
   this page already arrives dark, so the variable is repointed and the long
   run-up padding comes off */
.cta.r-foot{ --closer-from:var(--ramp-0); background:var(--ramp-0); padding-top:160px; }

/* ---- team ---------------------------------------------------------------- */
.team-grid.on-dark figcaption{ color:#fff; }
.team-grid.four{ grid-template-columns:repeat(4,1fr); max-width:1120px; }
@media (max-width:1000px){ .team-grid.four{ grid-template-columns:1fr 1fr; max-width:560px; } }
@media (max-width:520px){ .team-grid.four{ grid-template-columns:1fr; max-width:280px; } }

/* ---- insights ------------------------------------------------------------ */
.post-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:38px; }
@media (max-width:900px){ .post-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .post-row{ grid-template-columns:1fr; } }

/* ---- the ROI claim -------------------------------------------------------
   Its own plate, because "we can put a number on the impact function itself"
   is the one line here a competitor cannot answer. */
/* The violet/teal wash read as a purple box dropped onto a teal band — a
   different material rather than the same one raised. It now uses the white-
   alpha plate language already established by .door and .ip-plate, so it sits
   in the band instead of on it. The lime figure carries the accent. */
.roi-strip{ border:1px solid rgba(255,255,255,0.18); border-radius:20px; padding:36px 40px;
            background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
            display:grid; grid-template-columns:1.25fr 0.75fr; gap:40px; align-items:center;
            margin-top:44px; }
.roi-strip h3{ font-size:clamp(21px,2.4vw,28px); line-height:1.25; color:#fff; margin:0 0 12px; }
.roi-strip p{ font-size:14.5px; line-height:1.7; color:rgba(255,255,255,0.78); margin:0; }
.roi-figure{ text-align:right; }
.roi-figure b{ display:block; font-size:clamp(34px,4.6vw,54px); font-weight:800;
               letter-spacing:-0.03em; color:var(--lime); line-height:1; }
.roi-figure span{ display:block; margin-top:10px; font-size:12.5px; line-height:1.5;
                  color:rgba(255,255,255,0.72); }
@media (max-width:820px){ .roi-strip{ grid-template-columns:1fr; gap:24px; } .roi-figure{ text-align:left; } }

/* ---- capability cards, in the brand palette ------------------------------
   The bright brand colours are chroma, not contrast — teal is 2.2:1 and amber
   2.0:1 on white — so the accent does the decorative work as a rule and a wash,
   while the index takes an ink-safe darkened version of the same hue. */
.cap{ position:relative; overflow:hidden; padding-top:30px;
      background:linear-gradient(180deg, var(--wash, transparent), transparent 120px), var(--white); }
.cap::before{ content:''; position:absolute; inset:0 0 auto 0; height:4px;
              background:var(--accent, var(--teal)); }
.cap .n{ color:var(--accent-ink, var(--tealgreen-ink)); font-size:11.5px; }
.cap:nth-child(1){ --accent:var(--teal);      --accent-ink:#0E6F7A; --wash:rgba(35,195,210,0.10); }
.cap:nth-child(2){ --accent:var(--tealgreen); --accent-ink:#1C6A61; --wash:rgba(40,145,135,0.10); }
.cap:nth-child(3){ --accent:var(--amber);     --accent-ink:#8F4E00; --wash:rgba(255,140,0,0.10); }
.cap:nth-child(4){ --accent:var(--purple);    --accent-ink:#6B1F70; --wash:rgba(130,40,135,0.10); }
.door .who{ font-size:11.5px; }
.post-card .date{ font-size:11px; }

/* ---- the pull quote, in the site's own .claim treatment ------------------- */
.quote-claim{ position:relative; padding:10px 0 10px 62px; }
.quote-claim::before{ content:'\201C'; position:absolute; left:0; top:-16px;
  font-family:var(--font-serif); font-size:78px; line-height:1; color:var(--tealgreen); opacity:0.55; }
.quote-claim p{ font-size:clamp(19px,2.2vw,23px); line-height:1.5; font-weight:600;
                color:var(--ink); margin:0; letter-spacing:-0.015em; }
.quote-claim cite{ display:block; margin-top:16px; font-style:normal; font-size:12.5px;
                   font-weight:700; letter-spacing:0.10em; text-transform:uppercase;
                   color:var(--tealgreen-ink); }


/* ---- insights: flat and editorial ---------------------------------------
   .post-card already exists in style.css as a WHITE card with a light border,
   built for the light insights page. On a dark band that card is the source of
   the white outlines — so it is neutralised here rather than re-skinned. No
   panel, no rounded corners: a hairline, a flush image, and type on the band. */
.post-row .post-card{ background:none; border:0; border-radius:0; box-shadow:none;
                      overflow:visible; border-top:1px solid rgba(255,255,255,0.20);
                      padding-top:20px; transition:none; }
.post-row .post-card:hover{ transform:none; box-shadow:none; }
.post-row .post-card img{ border-radius:0; aspect-ratio:16/10; transition:opacity .3s var(--ease); }
.post-row .post-card:hover img{ opacity:0.86; }
.post-row .post-card .body{ padding:18px 0 0; }

/* style.css colours .post-card for the light insights page — ink title, ink-2
   body, tealgreen-ink date. On this dark band all three vanish. */
.post-row .post-card .date{ color:var(--lime); letter-spacing:0.12em; font-weight:800;
                            text-transform:uppercase; }
.post-row .post-card h3{ color:#fff; font-size:17.5px; line-height:1.3; margin:9px 0 8px; }
.post-row .post-card p{ color:rgba(255,255,255,0.72); font-size:13.5px; line-height:1.6; margin:0; }

/* ---- the grey smudge in the hero's top-right -----------------------------
   Not invented — it is the site's own hero bloom. But the site's blooms fade to
   `transparent`, and CSS resolves that as transparent BLACK: the gradient
   interpolates toward rgba(0,0,0,0), so every midpoint carries some black. On
   the original near-black hero that is invisible. On paper it renders as a grey
   cloud rather than coloured light.

   Fading to transparent PAPER instead keeps the hue all the way out. Same bug
   as the sprite bleed in the wallpapers: assets tuned for a dark ground read as
   dirt on white. */
.hero.on-paper .bloom{ --o:1; }
.hero.on-paper .bloom.h1b{
  background:radial-gradient(circle at 45% 55%,
    rgba(130,40,135,0.15), rgba(40,145,135,0.10) 50%, rgba(250,251,252,0) 74%); }
.hero.on-paper .bloom.h2b{
  background:radial-gradient(circle at 50% 50%,
    rgba(35,195,210,0.12), rgba(40,145,135,0.07) 55%, rgba(250,251,252,0) 78%); }

/* ---- the blotch, brought in from the Canva work --------------------------
   The ROI plate was reading flat because it was a rectangle of slightly
   lighter nothing. This gives it the same violet bloom that carries the social
   templates and the wallpapers, clipped inside the plate so it reads as depth
   rather than decoration.

   Note the final stop: rgba of the BAND colour at zero alpha, not `transparent`.
   The keyword resolves to transparent BLACK and drags grey through every
   midpoint — the exact bug that made the hero bloom look like a smudge. */
.roi-strip{ position:relative; overflow:hidden; isolation:isolate; }
.roi-strip::after{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  width:620px; height:620px; right:-160px; top:-240px;
  background:radial-gradient(circle at 50% 50%,
    rgba(130,40,135,0.55), rgba(40,145,135,0.26) 50%, rgba(18,84,104,0) 74%); }
.roi-strip::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  width:460px; height:460px; left:-180px; bottom:-260px;
  background:radial-gradient(circle at 50% 50%,
    rgba(35,195,210,0.30), rgba(18,84,104,0) 70%); }
.roi-strip > *{ position:relative; z-index:1; }

/* ==========================================================================
   THE ROI CLAIM — its own band, and the one that stops falling
   Everything on this page descends. Holding this section at a flat ramp-3
   interrupts that, which is what makes it register: in a system built on a
   continuous gradient, the absence of gradient is the loudest available move.
   It also costs nothing in continuity — b-fall-a ends at ramp-3 and b-fall-b
   begins there, so a flat ramp-3 band drops in between without a seam.
   ========================================================================== */
.b-hold{ background:var(--ramp-3); color:#fff; }

.roi-wrap{ max-width:960px; margin:0 auto; text-align:center; }
.roi-wrap .kick{ justify-content:center; }
.roi-wrap h2{ margin:0 auto 10px; max-width:20ch; }
.roi-lede{ font-size:16px; line-height:1.7; color:rgba(255,255,255,0.72); max-width:62ch;
           margin:0 auto 52px; }

/* the figure, at display scale */
.roi-big{ font-size:clamp(52px,9vw,116px); font-weight:800; letter-spacing:-0.045em; line-height:1;
          color:var(--lime); display:block; }
.roi-big i{ font-style:normal; opacity:0.42; margin:0 0.06em; }

/* the range, drawn. 8:1 is the floor and the most persuasive number here, so
   the scale shows the whole span rather than the ceiling alone — the reader
   sees where it starts, not just how high it goes. Track runs 0–30. */
.roi-scale{ margin:44px auto 0; max-width:660px; }
.roi-track{ position:relative; height:8px; border-radius:99px; background:rgba(255,255,255,0.14); }
.roi-span{ position:absolute; top:0; bottom:0; left:26.7%; right:16.7%; border-radius:99px;
           background:linear-gradient(90deg,var(--teal),var(--lime)); }
.roi-pin{ position:absolute; top:-7px; width:2px; height:22px; background:#fff; opacity:0.9; }
.roi-pin.lo{ left:26.7%; } .roi-pin.hi{ left:83.3%; }
.roi-marks{ position:relative; height:34px; margin-top:14px; font-size:12.5px; font-weight:700;
            letter-spacing:0.04em; color:rgba(255,255,255,0.86); }
.roi-marks span{ position:absolute; transform:translateX(-50%); white-space:nowrap; }
.roi-marks .m0{ left:0; transform:none; color:rgba(255,255,255,0.45); font-weight:500; }
.roi-marks .m30{ right:0; left:auto; transform:none; color:rgba(255,255,255,0.45); font-weight:500; }
.roi-marks .lo{ left:26.7%; } .roi-marks .hi{ left:83.3%; }
.roi-note{ margin:34px auto 0; max-width:70ch; font-size:13px; line-height:1.65;
           color:rgba(255,255,255,0.58); }
@media (max-width:620px){ .roi-scale{ max-width:100%; } .roi-marks{ font-size:11.5px; } }

/* ---- the hairlines between sections --------------------------------------
   The bands butt exactly — measured gap 0.000px — but their edges land on
   fractional pixels (…518.14, …611.66), so the browser rounds each band's paint
   independently and leaves a 1px seam between them. Colour matching cannot fix
   it; the geometry has to overlap. One pixel of overlap per band is invisible
   in layout and removes the line entirely. */
.band + .band{ margin-top:-1px; }
main > section:first-child{ margin-top:0; }

/* ---- keyboard focus ------------------------------------------------------
   43 interactive elements had no visible focus state — the page was navigable
   by keyboard but not *followable*. :focus-visible only paints for keyboard
   users, so pointer users never see a ring.
   The colour has to flip with the ground: lime carries on the dark half and
   disappears on paper, so the light bands take the ink-safe tealgreen. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
  border-radius:5px;
}
.b-paper :focus-visible,
.b-light-1 :focus-visible,
.b-dusk :focus-visible,
.switch-bar.on-light :focus-visible{
  outline-color:var(--tealgreen-ink);
}
/* the nav sits over both halves, so it gets the ring that works on either */
.nav :focus-visible{ outline-color:var(--tealgreen); }

/* the figure has to say what it IS before it says how big it is — a bare ratio
   makes the reader do the work, and a reader doing work is a reader leaving */
.roi-label{ font-size:13px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
            color:rgba(255,255,255,0.62); margin:0 0 14px; }

/* ---- the glow behind the ROI ---------------------------------------------
   The sun/moon device from the Canva backgrounds: a lime core through a
   tealgreen halo, cresting from below so the figure reads as lit from behind
   rather than sitting on a flat panel.

   It fades to TRANSPARENT RAMP-3, not to `transparent`. CSS resolves the
   keyword as transparent black, so a glow fading to it carries black through
   every midpoint and dirties the ground — the same bug that turned the hero
   bloom into a grey smudge on paper. Fading to the band's own colour keeps the
   hue clean all the way out.

   Kept deliberately low: the band holds white type at 8.9:1, and a brighter
   core would start eating that margin. */
.roi-glow{ position:absolute; left:50%; bottom:-34%; transform:translateX(-50%);
  width:min(1180px, 128%); aspect-ratio:1; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 50% 50%,
    rgba(230,230,100,0.13) 0%,
    rgba(120,190,150,0.11) 26%,
    rgba(40,145,135,0.10) 46%,
    rgba(18,84,104,0) 68%); }
.b-hold .wrap{ position:relative; z-index:1; }

/* ---- the warm gradient, brought back for the ROI -------------------------
   The page had drifted to one accent — teal→lime on the headlines, the rail,
   the range bar, the footer. A single repeated gradient stops reading as a
   brand cue and starts reading as a default. The ROI is the one section that
   should not look like the others, so it takes the warm half of the palette.

   Coral is the "red" end, but coral on ramp-3 is 2.3:1 — under the 3:1 floor
   even for display type. So the FIGURE runs amber→lime (3.7:1 at its darkest
   point, passing for large text) and the BAR carries the full coral→amber→lime,
   because a decorative bar has no contrast obligation. */
.roi-big{ background:linear-gradient(96deg, var(--amber) 0%, #F0B93C 38%, var(--lime) 78%);
          -webkit-background-clip:text; background-clip:text; color:transparent; }
.roi-big i{ color:rgba(255,255,255,0.30); -webkit-text-fill-color:rgba(255,255,255,0.30); }
.roi-span{ background:linear-gradient(90deg, var(--coral) 0%, var(--amber) 46%, var(--lime) 100%); }
.roi-pin{ background:#fff; }

/* the glow turns warm with it — an amber core through coral, still fading to
   transparent ramp-3 so nothing greys out */
.roi-glow{ background:radial-gradient(circle at 50% 50%,
    rgba(255,140,0,0.13) 0%,
    rgba(220,90,70,0.10) 30%,
    rgba(130,40,135,0.07) 52%,
    rgba(18,84,104,0) 70%); }

/* ---- glow: contained, and warm the other way round -----------------------
   Measured: the band is 887px tall and the glow was 1180px anchored to the
   bottom, so 302px of it fell outside and `overflow:clip` sheared it into a
   hard horizontal line. Centring it and pulling the transparent stop in to 64%
   puts the entire visible falloff inside the band — the clipped remainder is
   already fully transparent, so there is nothing left to cut.

   Direction reversed to yellow→red. Note the figure stops at amber: true coral
   is 2.3:1 on ramp-3, under the 3:1 floor even for display type. The bar runs
   the full way to coral because a decorative rule owes nothing to contrast. */
.roi-glow{ top:50%; bottom:auto; left:50%; transform:translate(-50%,-50%);
  width:min(1100px, 120%);
  background:radial-gradient(circle at 50% 50%,
    rgba(230,230,100,0.13) 0%,
    rgba(255,140,0,0.11) 28%,
    rgba(220,90,70,0.08) 48%,
    rgba(18,84,104,0) 64%); }

.roi-big{ background:linear-gradient(96deg, var(--lime) 0%, #F2C63F 46%, var(--amber) 100%);
          -webkit-background-clip:text; background-clip:text; color:transparent; }
.roi-span{ background:linear-gradient(90deg, var(--lime) 0%, var(--amber) 52%, var(--coral) 100%); }


/* ---- four cards, not three -----------------------------------------------
   The grid was built for three and there are now four, so the fourth dropped
   to a second row on its own — an orphan reads as an afterthought, which is
   the opposite of what a capability list should say. Two-by-two balances the
   block and leaves each description room to breathe; four-across at this width
   would squeeze them to ~260px. */
.cap-grid{ grid-template-columns:repeat(2,1fr); max-width:940px; }
@media (max-width:640px){ .cap-grid{ grid-template-columns:1fr; max-width:460px; } }

/* ---- the footer bloom, re-tinted ----------------------------------------
   Its stylesheet comment explains its job: "the bloom lives inside the fade so
   the transition carries some colour rather than reading as a long grey wash."
   That fade ran paper → ramp-0 over 660px. Inverting the page removed it — this
   footer already arrives dark — so the bloom lost what it was tinting and reads
   as a coral blob on flat black instead of warmth inside a transition.

   Three corrections: coral out (it is now the ROI's colour and shouldn't be
   competing from the footer), opacity down since there is no fade left to lift,
   and the outer stop fades to ramp-0 rather than `transparent` — which CSS
   resolves as transparent black and which was dragging grey through the
   midpoints, the same fault as the hero bloom. */
.cta.r-foot .bloom.x1{
  --o:0.30;
  background:radial-gradient(circle at 50% 50%,
    var(--purple) 0%, var(--tealgreen) 54%, rgba(6,20,35,0) 76%); }


/* ==========================================================================
   REVIEW ROUND — agency homepage + model problem cards
   ========================================================================== */

/* ---- carousel dots ------------------------------------------------------
   The case carousel sits on the teal/dusk bands on both pages, and the dots
   inherited a light-band palette: --line on tealgreen is barely visible and
   the active dot was --navy, i.e. dark ink on a mid-dark ground (~1.6:1).
   On a dark band the whole control has to be white. */
.case-nav .dot{ background:rgba(255,255,255,0.34); }
.case-nav .dot:hover{ background:rgba(255,255,255,0.62); }
.case-nav .dot.active{ background:#fff; }

/* ---- the "THE AGENCY" bar -----------------------------------------------
   It read as a full-bleed grey slab welded under the nav — a beam across the
   page rather than a quiet signpost. Drop the slab: no fill, one hairline
   underneath, and let the paper carry it. */
.switch-bar.on-light{ background:transparent; border-top:0;
                      border-bottom:1px solid var(--line); }
.switch-bar.on-light .switch-in{ padding-top:78px; padding-bottom:13px; }
.switch-bar.on-light .switch-here{ color:var(--tealgreen-ink); opacity:0.9; }
.switch-bar.on-light .switch-here::before{ width:6px; height:6px; }
.switch-bar.on-light .switch-go a{ border-bottom-color:var(--tealgreen);
                                   transition:border-color .25s var(--ease), color .25s var(--ease); }
.switch-bar.on-light .switch-go a:hover{ color:var(--tealgreen-ink); border-bottom-color:var(--tealgreen-ink); }

/* ---- hover parity -------------------------------------------------------
   The model page answers the cursor everywhere (.art/.problem-card/.gain/
   .post-card all lift 5px). The agency page's new components were inert, so
   the two halves of the site felt like different products. Same vocabulary,
   same easing — lift, then a shadow or border that suits the ground. */
.cap, .door, .post-row, .ip-plate{
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             border-color .3s var(--ease), background-color .3s var(--ease); }
.cap:hover{ transform:translateY(-5px); box-shadow:0 22px 50px rgba(10,45,70,0.11); }
.door:hover{ transform:translateY(-5px); background:rgba(255,255,255,0.08);
             border-color:rgba(255,255,255,0.30); }
.post-row:hover{ transform:translateY(-3px); }
.ip-plate:hover{ transform:translateY(-4px); box-shadow:0 22px 50px rgba(10,45,70,0.10); }
.post-row:hover .arrow, .door:hover .arrow{ transform:translateX(4px); }

/* ---- model page: the three problem cards --------------------------------
   Restyled to the agency card system — a coloured rule on top and that hue
   washing downward — but kept in the dark treatment the band needs. The icon
   tiles are gone: three different symbols implied three different kinds of
   thing, when these are three symptoms of one failure. */
.problem-card{ position:relative; overflow:hidden; padding-top:30px;
  background:linear-gradient(180deg, var(--wash, transparent), transparent 130px),
             rgba(255,255,255,0.05); }
.problem-card::before{ content:''; position:absolute; inset:0 0 auto 0; height:4px;
                       background:var(--accent, var(--teal)); }
.problem-card:nth-child(1){ --accent:var(--teal);      --wash:rgba(35,195,210,0.16); }
.problem-card:nth-child(2){ --accent:var(--purple);    --wash:rgba(130,40,135,0.20); }
.problem-card:nth-child(3){ --accent:var(--amber);     --wash:rgba(255,140,0,0.15); }
.problem-card strong{ display:block; margin-bottom:10px; }

/* ---- team → about -------------------------------------------------------- */
.team-more{ margin-top:34px; }


/* ==========================================================================
   REVIEW ROUND 2
   ========================================================================== */

/* ---- the grey fade down the right of every page -------------------------
   The drawer is parked off-screen with transform:translateX(100%), but a
   transform moves the element, not the shadow it casts. Its -14px 0 50px
   shadow points LEFT, so it painted back over the live page as a soft grey
   column against the right edge — on every page, all the time. It only has a
   job once the drawer is actually open. */
.menu-drawer{ box-shadow:none; }
.menu-drawer.open{ box-shadow:-14px 0 50px rgba(0,0,0,0.45); }

/* ---- accordion numbers --------------------------------------------------
   .act .n used padding-top:9px to sit level with the heading, but the heading
   is clamp(19px,2.6vw,30px) — so the guess was only right at one viewport and
   drifted everywhere else. Give the number a line box the same height as the
   heading's first line and it centres against it at every size. The row also
   gains standing left padding so the colour rule never touches the digits. */
.act{ padding-left:16px; }
.act:hover{ padding-left:26px; }
.act .n{ padding-top:0; line-height:calc(clamp(19px,2.6vw,30px) * 1.15); }

/* ---- the closing fade ---------------------------------------------------
   The old ramp ran paper → a set of neutral blue-greys (#dae1e7, #c2ced8,
   #8299ab …) → navy. Those greys are not in the palette, so the join with a
   --paper band above read as a visible line and the whole tail looked like a
   different site. Rebuilt on the same colours the agency homepage descends
   through, in the same eased shape: hold at the band colour for the first
   40px so there is no edge at the seam, then accelerate. Arrival at ramp-0 is
   kept at 660px because .cta's content starts at 450px — any slower and the
   headline lands in the mid-tones where neither white nor ink clears AA. */
.cta{ background:linear-gradient(180deg,
    var(--closer-from) 0px,
    var(--closer-from) 40px,
    #EDF4F2       110px,
    #DDEAE6       170px,
    #C3DBD6       230px,
    var(--ramp-7) 285px,
    var(--ramp-6) 335px,
    var(--ramp-5) 385px,
    var(--ramp-4) 430px,
    var(--ramp-3) 480px,
    var(--ramp-2) 530px,
    var(--ramp-1) 580px,
    var(--ramp-0) 660px); }

/* The Scan closes under b-navy-flat, so fading up to paper put a light slab
   between two dark sections. Stay dark and just deepen. */
.cta.on-dark-foot{ --closer-from:var(--ramp-2);
  background:linear-gradient(180deg,
    var(--ramp-2) 0px, var(--ramp-2) 60px,
    var(--ramp-1) 240px, var(--ramp-0) 430px); }
.cta.on-dark-foot .bloom.x1{ --o:0.26;
  background:radial-gradient(circle at 50% 50%,
    var(--purple) 0%, var(--tealgreen) 54%, rgba(6,20,35,0) 76%); }

@media (max-width:560px){
  .cta{ background:linear-gradient(180deg,
      var(--closer-from) 0px, var(--closer-from) 30px,
      #EDF4F2 80px, #DDEAE6 125px, #C3DBD6 170px,
      var(--ramp-7) 205px, var(--ramp-6) 240px, var(--ramp-5) 275px,
      var(--ramp-4) 305px, var(--ramp-3) 335px, var(--ramp-2) 370px,
      var(--ramp-1) 400px, var(--ramp-0) 450px); }
  .cta.on-dark-foot{ background:linear-gradient(180deg,
      var(--ramp-2) 0px, var(--ramp-2) 40px, var(--ramp-1) 170px, var(--ramp-0) 300px); }
}

/* ---- 404 ----------------------------------------------------------------- */
.dead-scan{ max-width:520px; margin:52px auto 0; padding:24px 26px; text-align:left;
  border:1px solid rgba(255,255,255,0.16); border-radius:16px;
  background:rgba(255,255,255,0.045); }
.dead-scan .ds-h{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  font-weight:700; color:var(--lime); margin-bottom:14px; }
.dead-scan .ds-row{ display:flex; align-items:center; gap:14px; margin-bottom:9px;
  font-size:13.5px; color:rgba(255,255,255,0.80); }
.dead-scan .ds-row span:first-child{ flex:1 1 auto; }
.dead-scan .ds-track{ width:96px; height:5px; border-radius:99px;
  background:rgba(255,255,255,0.14); overflow:hidden; flex:0 0 auto; }
.dead-scan .ds-track i{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--coral),var(--amber)); }
.dead-scan .ds-foot{ margin-top:16px; padding-top:14px; font-size:13px; line-height:1.6;
  color:rgba(255,255,255,0.66); border-top:1px solid rgba(255,255,255,0.14); }

/* The About grid holds three (Whitney is the founder and is not listed under
   team here), so the base repeat(3,1fr) is correct — the four-column override
   added during review has been removed. .team-grid.four still drives the
   homepage's four-up grid. */


/* ==========================================================================
   REVIEW ROUND 3
   ========================================================================== */

/* ---- the dark header on the agency page ---------------------------------
   Round 2 made .switch-bar.on-light transparent to kill the grey slab. But the
   bar sits ABOVE the hero in the DOM, so its parent is <body> — and body's
   background is --ramp-0. Transparent meant "show near-black", and the nav
   probe found no light band under itself, so the whole header went dark.

   The subtler answer is not a bar at all: paint it the hero's own paper so
   there is no visible band, drop every border, shrink the type and push it to
   one quiet right-aligned line. It reads as a footnote on the hero rather than
   a beam across the page — and the nav correctly sees light. */
.switch-bar.on-light{ background:var(--paper); border:0; }
.switch-bar.on-light .switch-in{ padding-top:96px; padding-bottom:0;
  justify-content:flex-end; gap:12px; }
.switch-bar.on-light .switch-here{ font-size:10.5px; letter-spacing:0.14em;
  opacity:0.5; margin-right:auto; }
.switch-bar.on-light .switch-here::before{ width:5px; height:5px; }
.switch-bar.on-light .switch-go{ font-size:12.5px; color:var(--slate); }
.switch-bar.on-light .switch-go a{ color:var(--tealgreen-ink); border-bottom-width:1px;
  border-bottom-color:rgba(28,106,97,0.35); }
.switch-bar.on-light .switch-go a:hover{ border-bottom-color:var(--tealgreen-ink); }

/* the model page's bar gets the same quiet treatment on its own ground */
.switch-bar.top:not(.on-light){ background:var(--ramp-0); border:0; }
.switch-bar.top:not(.on-light) .switch-in{ padding-top:96px; padding-bottom:0;
  justify-content:flex-end; gap:12px; }
.switch-bar.top:not(.on-light) .switch-here{ font-size:10.5px; letter-spacing:0.14em;
  opacity:0.62; margin-right:auto; }
.switch-bar.top:not(.on-light) .switch-go{ font-size:12.5px; color:rgba(255,255,255,0.62); }
.switch-bar.top:not(.on-light) .switch-go a{ border-bottom-width:1px;
  border-bottom-color:rgba(230,230,100,0.45); }
.switch-bar.top:not(.on-light) .switch-go a:hover{ border-bottom-color:var(--lime); }
@media (max-width:700px){
  .switch-bar .switch-in{ justify-content:flex-start; }
  .switch-bar .switch-here{ margin-right:0; }
}

/* ---- the hero blotches --------------------------------------------------
   The drift animation was never removed — it applies to .bloom globally. On
   the agency hero it simply could not be seen: the on-paper override drops the
   centre stop to rgba(...,0.15), which is faint enough that 5% of movement is
   invisible. Roughly doubled, still well under the level where the headline's
   contrast is affected (the type sits left, the blooms bleed off the corners). */
.hero.on-paper .bloom.h1b{
  background:radial-gradient(circle at 45% 55%,
    rgba(130,40,135,0.30), rgba(40,145,135,0.19) 50%, rgba(250,251,252,0) 74%); }
.hero.on-paper .bloom.h2b{
  background:radial-gradient(circle at 50% 50%,
    rgba(35,195,210,0.26), rgba(40,145,135,0.14) 55%, rgba(250,251,252,0) 78%); }

/* ---- Readiness Scan: unreadable controls --------------------------------
   Measured against the quiz's own ground (ramp-1 → ramp-2). .btn-outd is the
   light-band outline button — var(--ink) on near-black is 1.18:1, effectively
   invisible. The rest are muted greys written for paper. */
.b-navy-flat .btn-outd, .b-black .btn-outd, .cta .btn-outd,
.b-navy .btn-outd, .qz-panel .btn-outd{
  border-color:rgba(255,255,255,0.34); color:#fff; }
.b-navy-flat .btn-outd:hover, .b-black .btn-outd:hover, .cta .btn-outd:hover,
.b-navy .btn-outd:hover, .qz-panel .btn-outd:hover{
  border-color:var(--lime); color:var(--lime); }
.qz-share-note, .qz-email-note, .qz-feedback{ color:rgba(255,255,255,0.72); }
.qz-radar-band{ color:rgba(255,255,255,0.70); }
.qz-email input::placeholder{ color:rgba(255,255,255,0.68); }

/* ---- animation consistency ----------------------------------------------
   Everything clickable now answers the cursor with the same easing. These were
   the remaining inert elements: the team cards, the article cards on the
   insights grid, the case tabs, the two closing buttons and the footer links. */
.team-member img{ transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.team-member:hover img{ transform:translateY(-4px) scale(1.012);
  box-shadow:0 24px 54px rgba(10,45,70,0.20); }
.case-tab, .case-nav button, .qz-tab{ transition:color .25s var(--ease),
  border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); }
.case-nav button:hover{ transform:translateY(-1px); }
.foot-bottom a{ transition:color .25s var(--ease); }
.foot-bottom a:hover{ color:var(--lime); }
.nav .links a{ transition:color .25s var(--ease); }
.dead-scan{ transition:transform .3s var(--ease), border-color .3s var(--ease); }
.dead-scan:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,0.28); }
.team-more .btn{ transition:transform .3s var(--ease), border-color .3s var(--ease),
  color .3s var(--ease); }
@media (prefers-reduced-motion:reduce){
  .team-member:hover img, .case-nav button:hover, .dead-scan:hover{ transform:none; }
}


/* ==========================================================================
   THE DOOR SWITCH
   The brand mark is a capsule beside a circle, and the capsule is exactly two
   circle-widths across — so the logo is already an iOS switch that has never
   been asked to switch. This is that control: the capsule becomes the track,
   the circle the knob, and the side it rests on says which of the two front
   doors you are standing in.

   It lives INSIDE the hero, on the same left margin as the eyebrow and the
   headline, so it reads as the first line of the page rather than a third bar
   stacked under the nav. No ground of its own, no rules, no full-bleed strip.
   ========================================================================== */
.ds-in{ margin:0 0 22px; }
.dsw{ display:inline-flex; align-items:center; gap:11px; text-decoration:none;
      transition:opacity .28s var(--ease); }
.dsw:focus-visible{ outline:2px solid var(--lime); outline-offset:5px; border-radius:999px; }
.b-paper .dsw:focus-visible, .on-paper .dsw:focus-visible{ outline-color:var(--tealgreen-ink); }

.dsw-l{ font-size:10.5px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase;
        color:rgba(255,255,255,0.72); transition:color .28s var(--ease); white-space:nowrap; }
.on-paper .dsw-l{ color:var(--slate); }
.dsw-l.is-here{ color:var(--lime); }
.on-paper .dsw-l.is-here{ color:var(--tealgreen-ink); }
.dsw:hover .dsw-l:not(.is-here){ color:#fff; }
.on-paper .dsw:hover .dsw-l:not(.is-here){ color:var(--ink); }

/* track + knob in the mark's own proportions: 2:1, knob exactly half */
.dsw-track{ position:relative; width:40px; height:20px; border-radius:10px; flex:0 0 auto;
            border:1.5px solid rgba(255,255,255,0.30);
            transition:border-color .28s var(--ease); }
.on-paper .dsw-track{ border-color:rgba(10,45,70,0.22); }
.dsw-track i{ position:absolute; top:50%; left:2.5px; width:13px; height:13px;
              margin-top:-6.5px; border-radius:50%; background:var(--lime);
              transition:transform .42s var(--ease); }
.on-paper .dsw-track i{ background:var(--tealgreen); }
.dsw.is-right .dsw-track i{ transform:translateX(19px); }

/* hover slides the knob toward the door you are about to open, so the control
   previews its own result before you commit to the click */
.dsw:hover .dsw-track{ border-color:rgba(255,255,255,0.52); }
.on-paper .dsw:hover .dsw-track{ border-color:var(--tealgreen); }
.dsw:hover .dsw-track i{ transform:translateX(9px); }
.dsw.is-right:hover .dsw-track i{ transform:translateX(10px); }

@media (prefers-reduced-motion:reduce){
  .dsw-track i{ transition:none; }
  .dsw:hover .dsw-track i{ transform:none; }
  .dsw.is-right .dsw-track i, .dsw.is-right:hover .dsw-track i{ transform:translateX(19px); }
}

/* the old bar is gone from both homepages; the in-page instance keeps its rules */
.switch-bar.top{ display:none; }

/* The agency hero stacked toggle → eyebrow → headline, which is two small
   uppercase lines before you reach the point. Moving the eyebrow under the
   headline leaves the toggle as the only thing above it, and turns the line
   into a caption on the claim rather than a second label competing with it. */
.kick.kick-under{ margin:20px 0 0; }
@media (max-width:760px){ .kick.kick-under{ margin-top:16px; } }

/* ---- in-article conversion block ----------------------------------------
   One per article, placed before the closing section so it lands mid-argument
   rather than after the ending, where nobody is still reading. Which CTA it
   carries depends on the piece: theory routes to the paper, diagnostics to the
   Scan, the commissioning piece to a conversation. */
.article-cta{ margin:40px 0; padding:30px 32px; border-radius:18px;
  background:linear-gradient(180deg, rgba(40,145,135,0.09), rgba(40,145,135,0.03));
  border:1px solid var(--line); border-left:4px solid var(--tealgreen); }
.article-cta .ac-kick{ font-size:10.5px; font-weight:800; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--tealgreen-ink); margin-bottom:10px; }
.article-cta h3{ font-size:21px; line-height:1.25; color:var(--ink); margin:0 0 10px; }
.article-cta p{ font-size:15px; line-height:1.7; color:var(--ink-2); margin:0 0 20px; max-width:58ch; }
.article-cta .btn-lime{ color:var(--navy-black); }
@media (max-width:600px){ .article-cta{ padding:24px 22px; margin:32px 0; } }

/* ---- carousel dots, per ground -------------------------------------------
   Earlier these were made white globally, from a screenshot of the agency
   page — whose case band is .b-dusk and has already fallen to a dark teal by
   the time the carousel appears. The model page's case band is plain .b-light,
   which has resolved to paper by 470px, so white dots were invisible there.
   Scoped by ground instead of applied everywhere.

   Both variants are set for the 3:1 that WCAG asks of non-text UI, which the
   original --line inactive dot (1.1:1 on paper) never met either. */
.case-nav .dot{ background:rgba(10,45,70,0.55); }          /* 3.46:1 on paper */
.case-nav .dot:hover{ background:rgba(10,45,70,0.78); }
.case-nav .dot.active{ background:var(--navy); }

.b-dusk .case-nav .dot{ background:rgba(255,255,255,0.50); } /* 3.06:1 on ramp-4 */
.b-dusk .case-nav .dot:hover{ background:rgba(255,255,255,0.76); }
.b-dusk .case-nav .dot.active{ background:#fff; }

/* ---- service pages -------------------------------------------------------
   The capability cards are links now, so they need the affordance: an arrow
   that only appears on the card you are pointing at. */
.cap-more{ display:block; margin-top:16px; font-size:13px; font-weight:700;
  color:var(--accent-ink, var(--tealgreen-ink)); opacity:0; transform:translateY(4px);
  transition:opacity .28s var(--ease), transform .28s var(--ease); }
.cap:hover .cap-more, .cap:focus-visible .cap-more{ opacity:1; transform:none; }
.cap{ text-decoration:none; display:block; }
.cap:focus-visible{ outline:2px solid var(--tealgreen-ink); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .cap-more{ transition:none; } }

.svc-head .kick{ color:var(--lime); }
.svc-copy{ max-width:74ch; }
.svc-copy h2{ font-size:clamp(21px,2.4vw,27px); letter-spacing:-0.02em; color:var(--ink);
  margin:44px 0 14px; }
.svc-copy h2:first-child{ margin-top:0; }
.svc-copy p{ font-size:16px; line-height:1.75; color:var(--ink-2); margin:0 0 16px; }
.svc-copy ul{ margin:0 0 22px; padding-left:0; list-style:none; }
.svc-copy ul li{ position:relative; padding-left:26px; font-size:15.5px; line-height:1.7;
  color:var(--ink-2); margin-bottom:11px; }
.svc-copy ul li::before{ content:''; position:absolute; left:2px; top:11px; width:9px; height:2px;
  background:var(--svc-accent, var(--tealgreen)); }
.svc-copy strong{ color:var(--ink); font-weight:700; }
.svc-copy a{ color:var(--tealgreen-ink); }
.svc-teal{ --svc-accent:var(--teal); }
.svc-tealgreen{ --svc-accent:var(--tealgreen); }
.svc-amber{ --svc-accent:var(--amber); }
.svc-purple{ --svc-accent:var(--purple); }

.svc-faq{ border-top:1px solid var(--line); padding:20px 0 4px; }
.svc-faq h3{ font-size:17px; line-height:1.35; color:var(--ink); margin:0 0 8px; }
.svc-faq p{ font-size:15px; margin:0; }

.svc-others{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; }
.svc-others li{ padding:0; margin:0; }
.svc-others li::before{ display:none; }
.svc-others a{ display:flex; align-items:baseline; gap:12px; padding:15px 18px;
  border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink);
  font-weight:600; font-size:15px; background:var(--white);
  transition:transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease); }
.svc-others a:hover{ transform:translateY(-3px); border-color:var(--tealgreen);
  box-shadow:0 16px 36px rgba(10,45,70,0.10); }
.svc-others a span{ font-family:var(--font-serif); font-size:12.5px; color:var(--tealgreen-ink); }
@media (prefers-reduced-motion:reduce){ .svc-others a:hover{ transform:none; } }

/* ---- Readiness Scan: the tip refill --------------------------------------
   The pool holds twenty per archetype and five show at a time, so the control
   has to look like it will give you more rather than submit something. */
.qz-more-tips{ appearance:none; font-family:var(--font); font-weight:700; font-size:13px;
  background:none; border:1.5px solid rgba(255,255,255,0.26); color:#fff;
  padding:10px 18px; border-radius:999px; cursor:pointer; margin:6px 0 4px;
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.qz-more-tips:hover{ border-color:var(--lime); color:var(--lime); transform:translateY(-1px); }
.qz-more-tips:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; }
.qz-more-tips .arrow{ transition:transform .25s var(--ease); }
.qz-more-tips:hover .arrow{ transform:translateX(3px); }
.qz-tips li{ margin-bottom:12px; }
@media (prefers-reduced-motion:reduce){
  .qz-more-tips:hover{ transform:none; }
  .qz-more-tips:hover .arrow{ transform:none; }
}

/* ---- language switcher ---------------------------------------------------
   Two letters beside the CTA. A flag would be wrong — Dutch is not only the
   Netherlands and English is not only the UK — so the label is the language. */
.lang-switch{ font-size:12px; font-weight:800; letter-spacing:0.08em; text-decoration:none;
  color:inherit; opacity:0.62; padding:7px 10px; border:1.5px solid currentColor;
  border-radius:999px; line-height:1; flex:0 0 auto;
  transition:opacity .25s var(--ease), color .25s var(--ease); }
.lang-switch:hover{ opacity:1; color:var(--lime); }
.nav.inv .lang-switch:hover{ color:var(--tealgreen-ink); }
.lang-switch:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; opacity:1; }
@media (max-width:600px){ .lang-switch{ padding:6px 8px; font-size:11px; } }

/* ==========================================================================
   REVIEW ROUND 4
   ========================================================================== */

/* ---- language switch, matched to the nav it sits in ----------------------
   It was a pill with its own border while everything beside it is either a
   solid CTA or a plain link — so it read as a third kind of thing. Now it is
   the quiet sibling of .ncta: same height, same radius, same type, just
   outlined instead of filled. */
.lang-switch{ display:inline-flex; align-items:center; justify-content:center;
  padding:10px 13px; border-radius:6px; border:1.5px solid currentColor;
  font-size:13px; font-weight:700; letter-spacing:0.04em; line-height:1;
  text-decoration:none; color:inherit; opacity:0.55; flex-shrink:0;
  transition:opacity .3s var(--ease), background .3s var(--ease),
             color .3s var(--ease), transform .3s var(--ease); }
.lang-switch:hover{ opacity:1; transform:translateY(-1px);
  background:currentColor; }
.lang-switch:hover{ color:var(--lime); }
.lang-switch:hover span{ color:var(--navy-black); }
.nav.inv .lang-switch:hover{ color:var(--tealgreen); }
.nav.inv .lang-switch:hover span{ color:#fff; }
.lang-switch:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; opacity:1; }
@media (max-width:600px){ .lang-switch{ padding:9px 10px; font-size:12px; } }

/* ---- the corner artefact on stat grids -----------------------------------
   .case-stats draws its gridlines with a 1px gap that reveals the container
   background. Combined with border-radius + overflow:hidden, the child's
   square corner gets clipped and the gridline colour fills the arc instead —
   a visible dark crescent at each corner. Rounding the corner children so they
   reach into the radius removes it. */
.outs > *:first-child, .case-stats > *:first-child{
  border-top-left-radius:17px; border-top-right-radius:17px; }
.outs > *:last-child, .case-stats > *:last-child{
  border-bottom-left-radius:17px; border-bottom-right-radius:17px; }
@media (min-width:761px){
  .outs > *:first-child{ border-top-right-radius:0; }
  .outs > *:nth-child(2){ border-top-right-radius:17px; }
  .outs > *:last-child{ border-bottom-left-radius:0; }
  .outs > *:nth-last-child(2){ border-bottom-left-radius:17px; }
}
@media (min-width:601px) and (max-width:900px){
  .case-stats > *:first-child{ border-top-right-radius:0; }
  .case-stats > *:nth-child(2){ border-top-right-radius:17px; }
  .case-stats > *:last-child{ border-bottom-left-radius:0; }
  .case-stats > *:nth-last-child(2){ border-bottom-left-radius:17px; }
}

/* ---- the route funnel had no hover at all --------------------------------
   Five numbered steps that look like a sequence you can inspect, and did
   nothing when you tried. Same vocabulary as the rest of the site. */
.funnel-step{ transition:transform .3s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), box-shadow .3s var(--ease); }
.funnel-step:hover{ transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(10,45,70,0.10); }
.funnel-step .f-num{ transition:color .3s var(--ease), transform .3s var(--ease); }
.funnel-step:hover .f-num{ color:var(--tealgreen); transform:scale(1.06); }
.paper-shell{ transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.paper-shell:hover{ transform:translateY(-3px); box-shadow:0 22px 50px rgba(10,45,70,0.12); }

/* ---- hero: the two pages must settle at the same height ------------------
   .hero centres its content in 100svh, so one extra line on one page shifts
   the whole block and the headline appears to jump when you switch doors.
   The model hero now carries the same eyebrow the agency hero does; this
   floor keeps them aligned even where the headline wraps differently. */
.hero .wrap{ min-height:clamp(300px, 46vh, 460px); display:flex;
             flex-direction:column; justify-content:center; }

/* ---- drawer, grouped ------------------------------------------------------ */
.menu-doors{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.menu-doors a{ text-align:center; border:1.5px solid rgba(255,255,255,0.22);
  border-radius:9px; padding:13px 10px; font-weight:700; font-size:14px; }
.menu-doors a:hover{ border-color:var(--lime); color:var(--lime); }
.menu-group{ border-top:1px solid rgba(255,255,255,0.12); padding:4px 0; }
.menu-group summary{ cursor:pointer; list-style:none; padding:11px 0;
  font-size:11px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(255,255,255,0.5); display:flex; align-items:center; justify-content:space-between; }
.menu-group summary::-webkit-details-marker{ display:none; }
.menu-group summary::after{ content:'+'; font-size:15px; font-weight:400;
  transition:transform .3s var(--ease); }
.menu-group[open] summary::after{ transform:rotate(45deg); }
.menu-group summary:hover{ color:var(--lime); }
.menu-group a{ padding-left:2px; font-size:14px; }
.menu-tail{ border-top:1px solid rgba(255,255,255,0.12); margin-top:6px; padding-top:6px; }
.menu-tail a{ font-size:13.5px; opacity:0.82; }
@media (prefers-reduced-motion:reduce){
  .funnel-step:hover, .paper-shell:hover, .lang-switch:hover{ transform:none; }
  .funnel-step:hover .f-num{ transform:none; }
}

/* ---- service pages: the commercial furniture -----------------------------
   A spec strip you can read in five seconds, an artefact list, and numbered
   first steps. Everything a commissioner needs to lift into a ToR without
   emailing to ask. */
.svc-spec{ display:grid; gap:0; margin:26px 0 34px; border:1px solid var(--line);
  border-radius:14px; overflow:hidden; background:var(--line); }
.svc-spec > div{ background:var(--white); padding:16px 20px; display:grid;
  grid-template-columns:150px 1fr; gap:18px; align-items:baseline; }
.svc-spec > div + div{ margin-top:1px; }
.svc-spec dt{ font-size:10.5px; font-weight:800; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--tealgreen-ink); margin:0; }
.svc-spec dd{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink); }
@media (max-width:620px){ .svc-spec > div{ grid-template-columns:1fr; gap:5px; } }

.svc-deliv{ counter-reset:d; list-style:none; padding:0; margin:0 0 22px; }
.svc-deliv li{ counter-increment:d; position:relative; padding-left:40px;
  margin-bottom:12px; font-size:15.5px; line-height:1.7; color:var(--ink-2); }
.svc-deliv li::before{ content:counter(d,decimal-leading-zero);
  position:absolute; left:0; top:1px; font-family:var(--font-serif); font-size:12.5px;
  color:var(--svc-accent, var(--tealgreen)); font-weight:700; }
.svc-deliv li::after{ display:none; }

.svc-steps{ list-style:none; counter-reset:s; padding:0; margin:20px 0 0;
  display:grid; gap:12px; }
.svc-steps li{ counter-increment:s; display:grid; grid-template-columns:34px 1fr;
  gap:16px; align-items:start; padding:18px 20px; border:1px solid var(--line);
  border-radius:13px; background:var(--white);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.svc-steps li:hover{ transform:translateY(-3px); border-color:var(--svc-accent, var(--tealgreen));
  box-shadow:0 16px 36px rgba(10,45,70,0.09); }
.svc-steps li::before{ content:counter(s); grid-row:1 / span 2;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--svc-accent, var(--tealgreen)); color:#fff;
  font-size:13px; font-weight:800; position:static; }
.svc-steps li strong{ display:block; font-size:16px; color:var(--ink); margin-bottom:4px; }
.svc-steps li span{ font-size:14.5px; line-height:1.65; color:var(--ink-2); }
@media (prefers-reduced-motion:reduce){ .svc-steps li:hover{ transform:none; } }

/* the endnote that closes an article — a standfirst in reverse */
.article-endnote{ margin-top:34px; padding-top:20px; border-top:1px solid var(--line);
  font-size:15px; line-height:1.7; color:var(--ink-2); }
.article-refs a{ font-size:13px; word-break:break-word; }

/* ---- white-paper gate: the success state -------------------------------
   .paper-gate centres its content with flex and paints itself --paper-2.
   .paper-success only ever set display:block, so the moment the gate hid,
   the confirmation lost the vertical centring, the padding and the panel
   colour — it sat top-left on bare white against a full-height sibling.
   It has to inherit the gate's box, not just occupy its grid cell. */
.paper-success{ text-align:center; }
.paper-success.show{ display:flex; flex-direction:column; justify-content:center;
  align-items:center; padding:42px; background:var(--paper-2); }
.paper-success .ps-tick{ width:44px; height:44px; border-radius:50%; display:grid;
  place-items:center; margin:0 0 18px; flex:0 0 auto;
  background:rgba(40,145,135,0.12); color:var(--tealgreen-ink); }
.paper-success .ps-tick svg{ width:22px; height:22px; }
.paper-success h3{ color:var(--ink); font-size:21px; }
.paper-success p{ max-width:34ch; }
.paper-success .btn{ width:100%; justify-content:center; }
@media (max-width:860px){ .paper-success.show{ padding:34px 26px; } }

/* ---- outline buttons on a <button> element -------------------------------
   .btn sets border:none but never sets background, so an <a class="btn btn-out">
   is transparent while a real <button> keeps the UA's default grey fill. The
   Scan's "Email me a copy" is the only <button> using an outline variant, and
   it rendered as a grey slab with white text — indistinguishable from disabled.
   Declaring the background is the fix, and it protects the other two variants
   the moment anyone uses them on a button. */
.btn-out, .btn-ghost, .btn-outd{ background:transparent; }

/* ---- the Scan's email row ------------------------------------------------
   Three inputs plus a button on one flex line at min-width:150px squeezed the
   fields until "Organisation name" and "you@organisation.org" truncated
   mid-word. Auto-fit grid instead: they wrap to a second line rather than
   clipping, and the button spans the full width once they do. */
.qz-email{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px; }
.qz-email input{ min-width:0; width:100%; }
.qz-email button{ grid-column:1 / -1; justify-self:start; }
@media (min-width:900px){
  .qz-email{ grid-template-columns:repeat(3, 1fr) auto; }
  .qz-email button{ grid-column:auto; }
}
@media (max-width:640px){
  .qz-email{ grid-template-columns:1fr; }
  .qz-email button{ width:100%; justify-content:center; }
}

/* Chrome repaints autofilled fields with its own light background, which turns
   these dark translucent inputs white against the navy panel. The inset shadow
   is the only way to override it. */
.qz-email input:-webkit-autofill,
.qz-email input:-webkit-autofill:hover,
.qz-email input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px #123044 inset;
  caret-color:#fff;
  transition:background-color 9999s ease-in-out 0s;
}
/* the outline needs to read as an edge, not a suggestion: .30 measured 2.57:1
   on the Scan's panel, under the 3:1 WCAG asks of a control boundary */
.qz-email .btn-out{ border-color:rgba(255,255,255,0.46); }
.qz-email .btn-out:hover{ border-color:var(--lime); }