/* ============================================================
   Cancer Research Society
   Design system: warm editorial paper-and-ink. A green "spine"
   accent that every page re-tints (body.theme-*), soft + consistent
   corners, and full-bleed bands that bleed off the sides.
   Source of truth for the look. Swap photos in assets/img/.
   ============================================================ */

/* ---------- 1. Tokens ----------
   AACR-modeled rebuild: the doc's values mapped onto the existing variable
   names so every component inherits the new look. Chrome is anchored to one
   sitewide brand (pine green = --brand/--cta); per-page --seal tints in-body
   accents only. */
:root{
  /* Surfaces (doc: --paper / --paper-2 / --surface) */
  --cream:#FBFAF6;       /* legacy alias of canvas */
  --canvas:#FBFAF6;      /* page background — soft warm white */
  --canvas-2:#F3EFE6;    /* alternating tint / subtle bands */
  --paper:#FFFFFF;       /* cards, panels, mega-menu */

  /* Ink (doc: --ink / --ink-2 / --ink-3) */
  --ink:#14171D;         /* headlines, primary text */
  --ink-soft:#434A55;    /* body, secondary text */
  --muted:#6B7280;       /* captions, meta */
  --line:#E4DFD3;                  /* warm hairline */
  --line-ink:rgba(20,23,29,.14);  /* faint ink hairline */
  --navy-deep:#171B22;   /* one dark section per page */

  /* Brand — CRS pine green, the single sitewide accent (AACR's "red") */
  --brand:#1C5A40; --brand-700:#154430; --brand-300:#6FA98C;
  --brand-tint:#E8F0EB; --on-brand:#FBFAF6;
  --cta:#1C5A40;         /* legacy name = brand: primary CTA fill, chrome */
  --cta-700:#154430;
  --seal-red:#8A2D3B;    /* rare deep red, action moments only */
  --warn:#8A5A14; --warn-light:#F1E7CE;

  /* Support tones (card top-rules / steps / stats rotation) */
  --clay:#9C5B3B; --clay-ink:#7A3F22;
  --blue-grey:#1F5673; --blue-ink:#163E54;
  --plum:#6E4A6B; --plum-ink:#4E3350;
  --teal:#1F6E66; --teal-ink:#154E48;
  --gold:#9A7B2E; --gold-ink:#6E5820;

  /* THE in-body page accent. Each page re-tints these four via body.theme-*.
     Chrome ignores --seal and stays --brand green for AACR-like consistency. */
  --seal:#1C5A40; --seal-deep:#154430;
  --seal-tint:#E8F0EB;
  --seal-rgb:28,90,64;

  /* Type — EB Garamond display + Merriweather body + Archivo chrome/labels/data */
  --serif:"Merriweather", Georgia, "Times New Roman", serif;
  --display:"EB Garamond", "Merriweather", Georgia, serif;
  --sans:"Archivo", "Merriweather Sans", system-ui, -apple-system, sans-serif;

  /* Layout */
  --maxw:1280px;            /* main container */
  --maxw-narrow:820px;      /* reading width */
  --gut:clamp(20px, 4vw, 48px);
  --wall:clamp(24px, 5vw, 64px);
  --sect:clamp(56px, 7vw, 104px);
  --sect-tight:clamp(24px, 3vw, 36px);
  --tentpole:clamp(64px, 8vw, 120px);
  --gap:24px;

  /* 4px spacing scale */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px;
  --s-8:32px; --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px;

  /* Corners — fully round pills, soft cards (consistent, never mixed) */
  --r-sm:6px;
  --r:10px;
  --r-lg:16px;
  --pill:999px;

  /* Motion */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --ease-emph:cubic-bezier(.2,.8,.2,1);
  --t-fast:140ms; --t:220ms; --t-slow:360ms; --t-hero:700ms;

  /* Shadows (restrained, professional) */
  --sh-1:0 1px 2px rgba(20,23,29,.06);
  --sh-2:0 10px 30px rgba(20,23,29,.10);
  --sh-3:0 18px 44px rgba(20,23,29,.14);

  /* chrome heights */
  --util-h:38px;
}

/* ---- Per-page accent themes (in-body only; chrome stays brand green) ---- */
body.theme-green { --seal:#1C5A40; --seal-deep:#154430; --seal-tint:#E8F0EB; --seal-rgb:28,90,64 }
body.theme-ocean { --seal:#1F5673; --seal-deep:#163E54; --seal-tint:#E5EDF2; --seal-rgb:31,86,115 }
body.theme-clay  { --seal:#9C5B3B; --seal-deep:#6E3D26; --seal-tint:#F3E9E2; --seal-rgb:156,91,59 }
body.theme-plum  { --seal:#6E4A6B; --seal-deep:#4E3350; --seal-tint:#EFE9EF; --seal-rgb:110,74,107 }
body.theme-teal  { --seal:#1F6E66; --seal-deep:#154E48; --seal-tint:#E2EFED; --seal-rgb:31,110,102 }
body.theme-gold  { --seal:#9A7B2E; --seal-deep:#6E5820; --seal-tint:#F4EDDB; --seal-rgb:154,123,46 }
body.theme-garnet{ --seal:#8A2D3B; --seal-deep:#631F2A; --seal-tint:#F2E2E4; --seal-rgb:138,45,59 }

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--seal-deep)}
:focus-visible{outline:2px solid var(--seal);outline-offset:3px;border-radius:0}
button{font-family:inherit}
::selection{background:rgba(var(--seal-rgb),.18)}

.skip-link{
  position:absolute;left:14px;top:-48px;z-index:200;
  background:var(--ink);color:var(--canvas);padding:10px 16px;border-radius:var(--pill);
  text-decoration:none;transition:top .2s;
}
.skip-link:focus{top:14px;color:var(--canvas)}

/* ---------- 3. Typography ---------- */
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.15;font-weight:700}
h1{font-family:var(--display);font-weight:600;letter-spacing:-.015em;font-size:clamp(2.3rem,5vw,3.6rem)}
h2{font-family:var(--serif);font-size:clamp(1.55rem,3vw,2.15rem);letter-spacing:-.01em}
h3{font-family:var(--serif);font-size:1.22rem;letter-spacing:-.005em}
h4{font-family:var(--serif);font-size:1.02rem}
p{margin:0 0 1.05em}
strong{font-weight:700}
.display{font-family:var(--display);font-weight:600;letter-spacing:-.015em}
.italic{font-style:italic}

.eyebrow{
  display:inline-block;font-family:var(--serif);font-weight:700;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .9rem;
}
.lead{font-size:1.2rem;line-height:1.6;color:var(--ink-soft)}
.measure{max-width:60ch}
.measure-tight{max-width:54ch}
.muted{color:var(--muted)}
.center{text-align:center}

/* accent word in display headlines */
.accent{font-family:var(--display);font-style:italic;font-weight:600}
.accent--seal{color:var(--seal-deep)}
.accent--clay{color:var(--clay-ink)}
.accent--blue{color:var(--blue-ink)}
/* faded highlighter behind a key phrase */
.hl{box-shadow:inset 0 -.42em 0 rgba(var(--seal-rgb),.22)}

/* heading mark removed per request */
.h-mark::before{display:none}

/* plain divider (squiggle removed) */
.rule{height:0;border:0;border-top:1px solid var(--line);margin:var(--sect-tight) 0;background:none}

/* ---------- 4. Layout ---------- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.bleed{padding-inline:var(--wall)}
.section{padding-block:var(--sect)}
.section--tight{padding-block:var(--sect-tight)}
.section--tentpole{padding-block:var(--tentpole)}
.stack>*+*{margin-top:1.05em}
.intro{max-width:62ch}
.intro .lead{margin-bottom:0}

/* alternating asymmetric bands: text + visual */
.band{
  display:grid;gap:clamp(28px,5vw,64px);align-items:center;
  grid-template-columns:1.05fr .95fr;
}
.band__media{min-width:0}
.band__text{min-width:0;max-width:54ch}
.band--flip .band__media{order:-1}
@media (max-width:860px){
  .band{grid-template-columns:1fr}
  .band--flip .band__media{order:0}
  .band__media{order:2}
}

.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---------- 5. Scroll-progress bar ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:120;background:transparent;pointer-events:none}
.progress__fill{height:100%;width:0;background:var(--cta);transition:width .08s linear}

/* ---------- 6. Chrome: utility strip + header ---------- */
.util{background:var(--navy-deep);color:var(--canvas);font-size:.8rem}
.util__row{display:flex;gap:18px;align-items:center;justify-content:space-between;min-height:34px;padding-block:5px;flex-wrap:wrap}
.util a{color:var(--canvas);text-decoration:none;opacity:.92}
.util a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.util__tag{letter-spacing:.04em}
.util__links{display:flex;gap:18px;align-items:center;flex-wrap:wrap}

.site-header{position:sticky;top:0;z-index:110;background:var(--canvas);border-bottom:1px solid var(--ink);transition:padding .2s ease, box-shadow .2s ease}
.site-header.scrolled{box-shadow:var(--sh-1)}
.header__row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:18px;transition:padding .2s ease}
.scrolled .header__row{padding-block:11px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand__mark{width:36px;height:36px;flex:none;border-radius:50%;object-fit:cover}
.brand__name{font-family:var(--display);font-weight:600;font-size:1.22rem;line-height:1.05;letter-spacing:-.01em}
.brand__name small{display:block;font-family:var(--serif);font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.nav{display:flex;align-items:center;gap:6px}
.nav a{
  text-decoration:none;color:var(--ink);font-weight:700;font-size:.95rem;
  padding:9px 14px;border-radius:var(--pill);line-height:1;white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.nav a:hover{background:var(--canvas-2);color:var(--ink)}
.nav a[aria-current="page"]{background:rgba(var(--seal-rgb),.12);color:var(--seal-deep)}
.nav .btn{margin-left:6px}

.nav-toggle{display:none;border:1.5px solid var(--ink);background:var(--paper);border-radius:var(--pill);padding:9px 14px;font-weight:700;cursor:pointer;align-items:center;gap:9px}
.nav-toggle__bars{width:18px;height:12px;position:relative;display:inline-block}
.nav-toggle__bars::before,.nav-toggle__bars::after,.nav-toggle__bars span{content:"";position:absolute;left:0;right:0;height:2px;background:var(--ink);border-radius:2px}
.nav-toggle__bars::before{top:0}.nav-toggle__bars span{top:5px}.nav-toggle__bars::after{bottom:0}

@media (max-width:880px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;left:var(--gut);right:var(--gut);top:calc(100% + 10px);
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--paper);border:1px solid var(--ink);border-radius:var(--r);
    padding:12px;box-shadow:var(--sh-2);
    display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:12px 14px}
  .nav .btn{margin-left:0;justify-content:center}
}

/* ---------- 7. Buttons (pill, flat) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  font-family:var(--serif);font-weight:700;font-size:.97rem;line-height:1;
  padding:13px 24px;border-radius:var(--pill);border:1.5px solid var(--ink);
  background:var(--ink);color:var(--canvas);text-decoration:none;cursor:pointer;
  transition:transform .14s var(--ease-out), background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{color:var(--canvas);background:#1f1b18}
.btn:active{transform:scale(.97)}
.btn--cta{background:var(--cta);border-color:var(--cta);color:#fff}
.btn--cta:hover{background:var(--cta);border-color:var(--cta);color:#fff;filter:brightness(1.12)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--canvas)}
.btn--sm{padding:9px 16px;font-size:.88rem}
.btn--lg{padding:16px 30px;font-size:1.03rem}
.btn--block{display:flex;width:100%}
.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn__arrow{font-size:1.05em;line-height:0}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* chips / tags */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;
  padding:7px 14px;border-radius:var(--pill);background:var(--paper);
  border:1px solid var(--line-ink);color:var(--ink-soft);
}
.chip--seal{background:var(--seal-tint);border-color:rgba(var(--seal-rgb),.34);color:var(--seal-deep)}

/* ---------- 8. Cards ---------- */
.card{
  background:var(--paper);border:1px solid var(--line-ink);border-radius:var(--r);
  padding:clamp(22px,3vw,30px);position:relative;overflow:hidden;
  box-shadow:var(--sh-1);
}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ink)}
.card--clay::before{background:var(--clay)}
.card--blue::before{background:var(--blue-grey)}
.card--ink::before{background:var(--ink)}
.card h3{margin-top:.2rem}
.card p:last-child{margin-bottom:0}
a.card{display:block;text-decoration:none;color:inherit;transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  a.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);color:inherit}
}
a.card:active{transform:translateY(-1px)}
a.card:hover::before{background:var(--seal)}
.card__icon{width:40px;height:40px;margin-bottom:14px;color:var(--clay-ink)}
.card--blue .card__icon{color:var(--blue-ink)}
.card--ink .card__icon{color:var(--ink)}
.card__kicker{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}

/* ---------- 9. Callouts ---------- */
.callout{
  background:var(--canvas-2);border-radius:var(--r);
  padding:18px 22px 18px 24px;border-left:4px solid var(--blue-grey);
}
.callout--do{border-left-color:var(--clay)}
.callout--dont{border-left-color:var(--ink)}
.callout--seal{border-left-color:var(--seal);background:var(--seal-tint)}
.callout--warn{border-left-color:var(--warn);background:var(--warn-light)}
.callout p:last-child{margin-bottom:0}
.callout__label{display:block;font-weight:700;margin-bottom:.25rem}

/* ---------- 10. Steps ---------- */
.steps{counter-reset:step;display:grid;gap:18px}
.step{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.step__n{
  font-family:var(--display);font-weight:600;font-size:2.15rem;line-height:1;
  width:70px;height:70px;flex:none;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--line-ink);border-radius:var(--pill);color:var(--ink);
}
.step:nth-child(3n+1) .step__n{color:var(--clay-ink)}
.step:nth-child(3n+2) .step__n{color:var(--blue-ink)}
.step:nth-child(3n+3) .step__n{color:var(--ink)}
.step h3{margin-bottom:.3rem}
.step p:last-child{margin-bottom:0}

/* ---------- 11. Statistics ---------- */
.stats{display:grid;gap:clamp(20px,4vw,40px);grid-template-columns:repeat(3,1fr)}
@media (max-width:700px){.stats{grid-template-columns:1fr 1fr}}
.stat__n{font-family:var(--display);font-weight:600;font-size:clamp(2.4rem,6vw,3.6rem);line-height:1;letter-spacing:-.02em}
.stat:nth-child(3n+1) .stat__n{color:var(--clay-ink)}
.stat:nth-child(3n+2) .stat__n{color:var(--blue-ink)}
.stat:nth-child(3n+3) .stat__n{color:var(--ink)}
.stat__label{display:block;margin-top:.4rem;color:var(--muted);font-size:.92rem}

/* reply-rate bars */
.bars{display:grid;gap:22px}
.bar__top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.bar__pct{font-family:var(--display);font-weight:600;font-size:1.6rem;line-height:1}
.bar__track{height:12px;background:var(--canvas-2);border-radius:var(--pill);overflow:hidden;margin:.45rem 0 .35rem;border:1px solid var(--line-ink)}
.bar__val{height:100%;border-radius:var(--pill);background:var(--blue-grey);transition:width 1.1s cubic-bezier(.3,.85,.3,1)}
@media (prefers-reduced-motion:reduce){.bar__val{transition:none}}
.bar:nth-child(1) .bar__val{background:var(--clay)}
.bar:nth-child(2) .bar__val{background:var(--blue-grey)}
.bar:nth-child(3) .bar__val{background:var(--seal)}
.bar h3{margin:0 0 .15rem;font-size:1.05rem}
.bar p{margin:0;color:var(--ink-soft);font-size:.95rem}

/* ---------- 12. Media / photo plates ---------- */
.figure{margin:0}
.figure img,.figure .ph{
  width:100%;border:1px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);aspect-ratio:4/3;object-fit:cover;background:var(--canvas-2);
}
.figure figcaption{margin-top:.7rem;color:var(--muted);font-size:.86rem}
.tilt-a{transform:rotate(-.8deg)}
.tilt-b{transform:rotate(.7deg)}
@media (prefers-reduced-motion:reduce){.tilt-a,.tilt-b{transform:none}}

/* big wall-touching plate */
.plate{
  background:var(--blue-grey);color:#fff;border-radius:var(--r-lg);
  padding:clamp(28px,4vw,46px);
}
.plate--ink{background:var(--ink)}
.plate--clay{background:var(--clay)}
.plate--canvas2{background:var(--canvas-2);color:var(--ink)}
.plate .eyebrow{color:#fff;opacity:.85}
.plate--canvas2 .eyebrow{color:var(--seal-deep);opacity:1}

/* dark section (the one ink moment) — with an accent shape bleeding off the left edge */
.on-ink{background:var(--navy-deep);color:var(--canvas);position:relative;overflow:hidden}
.on-ink>.container{position:relative;z-index:1}
.on-ink h1,.on-ink h2,.on-ink h3{color:var(--canvas)}
.on-ink .lead{color:#E7DECF}
.on-ink .muted{color:#C9BEAC}
.on-ink a{color:#E7DECF}
.on-ink a:hover{color:#fff}
.on-ink .stat__n{color:#F1E7D6}
.on-ink .stat:nth-child(3n+2) .stat__n{color:#E7DECF}
/* cards on the dark plate: translucent with light, high-contrast text */
.on-ink .card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.18);color:#ECE7DC}
.on-ink .card h3{color:#fff}
.on-ink .card p{color:#E2DBCD}
.on-ink .card .card__kicker{color:#BFD3B6}
.on-ink .card::before{background:var(--seal)}
.on-ink .card:hover{transform:none}

/* ---------- 13. FAQ ---------- */
.faq{display:grid;gap:12px}
.faq details{background:var(--paper);border:1px solid var(--line-ink);border-radius:var(--r);overflow:hidden}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 22px;font-weight:700;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--seal-deep);font-size:1.5rem;line-height:1;font-family:var(--display)}
.faq details[open] summary::after{content:"\2013"}
.faq .faq__body{padding:0 22px 20px}
.faq .faq__body>*:last-child{margin-bottom:0}

/* ---------- 14. Forms ---------- */
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{font-weight:700;font-size:.95rem}
.field .note{color:var(--muted);font-size:.84rem}
.input,select,textarea{
  font-family:var(--serif);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--ink);border-radius:var(--r-sm);
  padding:12px 14px;width:100%;
}
textarea{min-height:120px;resize:vertical}
.input:focus,select:focus,textarea:focus{outline:2px solid var(--seal);outline-offset:2px}

/* newsletter / research-digest signup */
.signup{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,60px);align-items:center}
.signup__text .ck{margin-top:1.1rem}
.signup__form,.signup__done{background:var(--paper);border:1px solid var(--ink);padding:clamp(22px,3vw,30px);box-shadow:var(--sh-1)}
.signup__form{display:grid;gap:12px}
.signup__label{font-weight:700;font-size:.95rem}
.signup__form .btn{justify-content:center}
.signup__form .note{margin:2px 0 0}
.signup__done{display:grid;gap:8px}
.signup__done h3{margin:0}
@media (max-width:760px){.signup{grid-template-columns:1fr}}

/* digest archive */
.digests-list{display:grid;gap:3.2rem}
.digest{background:var(--paper);border:1px solid var(--ink);padding:clamp(24px,4vw,40px)}
.digest__header{margin-bottom:1.6rem;padding-bottom:1.2rem;border-bottom:1px solid var(--ink)}
.digest__date{font-size:1.35rem;margin:0;line-height:1.2}
.digest__source{color:var(--muted);font-size:.95rem;margin:6px 0 0}
.digest__content{display:grid;gap:2.2rem}
.digest__item{display:grid;gap:1rem}
.digest__item h3{margin:0;font-size:1.1rem;color:var(--seal)}
.digest__label{font-weight:700;color:var(--seal-deep);font-size:.9rem;text-transform:uppercase;letter-spacing:.5px;margin:0.6rem 0 0}
.digest__item p{margin:0.35rem 0}
.digest__item p:first-of-type{margin-top:0}
.digest__item + .digest__item{padding-top:2.2rem;border-top:1px solid var(--line)}
@media (max-width:700px){.digest{padding:clamp(16px,3vw,24px)}}

/* segmented radio control (answer sheet) */
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label{
  border:1.5px solid var(--ink);background:var(--paper);border-radius:var(--pill);
  padding:9px 16px;font-weight:700;font-size:.9rem;cursor:pointer;transition:background .12s,color .12s;
}
.seg input:checked+label{background:var(--ink);color:var(--canvas)}
.seg input:focus-visible+label{outline:2px solid var(--seal);outline-offset:2px}
.ask-grid{display:grid;gap:20px}
.ask-row{display:grid;gap:9px}
.ask-row>span{font-weight:700}

/* QR */
.qr{display:grid;place-items:center;gap:14px;background:var(--paper);border:1px solid var(--ink);border-radius:var(--r);padding:24px}
.qr img,.qr canvas{border-radius:var(--r-sm)}
.qr-placeholder{max-width:200px;text-align:center;color:var(--muted);font-size:.9rem;padding:30px 10px}
#membership-qr{min-height:190px;display:grid;place-items:center}

/* ---------- 15. Accordion (cold email masterclass) — vertical, click to expand ---------- */
.acc-hint{font-size:.9rem;margin:0 0 1.1rem}
.acc-list{border-top:1px solid var(--ink)}
.acc{border-bottom:1px solid var(--line-ink);scroll-margin-top:calc(var(--header-h,64px) + 14px)}
.acc__head{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:20px 4px;font-family:var(--serif);font-weight:700;
  font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--ink);
  transition:color .15s ease;
}
.acc__head::-webkit-details-marker{display:none}
.acc__head::marker{content:""}
@media (hover:hover) and (pointer:fine){.acc__head:hover{color:var(--seal-deep)}}
.acc__n{font-family:var(--display);font-weight:600;font-size:1rem;color:var(--muted);min-width:2.2ch;font-variant-numeric:tabular-nums}
.acc__title{flex:1;min-width:0}
.acc__chev{width:22px;height:22px;flex:none;color:var(--muted);transition:transform .25s var(--ease-out),color .15s ease}
.acc[open] .acc__head,.acc[open] .acc__n{color:var(--seal-deep)}
.acc[open] .acc__chev{transform:rotate(180deg);color:var(--seal-deep)}
.acc__body{padding:2px 4px 32px}
.acc__body>*:first-child{margin-top:0}
.acc__body .eyebrow{display:none}
.acc[open] .acc__body{animation:accIn .28s var(--ease-out)}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.acc[open] .acc__body{animation:none}.acc__chev{transition:color .15s ease}}

/* ---------- 16. Email sample block ---------- */
.email{
  background:var(--paper);border:1px solid var(--line-ink);border-radius:var(--r);
  padding:clamp(20px,3vw,30px);position:relative;
}
.email pre{
  font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  font-size:.92rem;line-height:1.7;white-space:pre-wrap;margin:0;color:var(--ink);
}
.email .ph-token{color:var(--seal-deep);font-style:italic}
.email__copy{position:absolute;top:16px;right:16px}

/* ---------- 17. Lists, misc ---------- */
.ck{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.ck li{position:relative;padding-left:34px}
.ck li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;
  background-color:var(--seal-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M6 11.5l3.2 3.2L16 7.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M6 11.5l3.2 3.2L16 7.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.ck--skip li::before{background-color:#7A6E60;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M7 7l8 8M15 7l-8 8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M7 7l8 8M15 7l-8 8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.arrow-list{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.arrow-list li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.arrow-list li::before{content:"\2192";color:var(--seal-deep);font-size:1.3rem;line-height:1.4;font-weight:700}

.two-col{columns:2;column-gap:40px}
@media (max-width:700px){.two-col{columns:1}}

.divider-space{height:clamp(20px,4vw,40px)}
.lift{margin-top:clamp(-72px,-5vw,-40px)}

/* answer-sheet result */
.result{display:none;border:1px solid var(--ink);border-radius:var(--r);background:var(--paper);padding:clamp(22px,3vw,32px);box-shadow:var(--sh-1)}
.result.show{display:block}
.result__verdict{display:inline-flex;align-items:center;gap:9px;font-weight:700;padding:8px 16px;border-radius:var(--pill);font-size:.9rem;margin-bottom:1rem}
.result__verdict.optimal{background:rgba(var(--seal-rgb),.14);color:var(--seal-deep)}
.result__verdict.adjust{background:var(--warn-light);color:var(--warn)}

/* ---------- 18. Footer ---------- */
.site-footer{background:var(--navy-deep);color:var(--canvas);border-top:3px solid var(--cta);margin-top:var(--sect)}
.site-footer a{color:#E7DECF;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer__grid{display:grid;gap:clamp(28px,5vw,52px);grid-template-columns:1.4fr 1fr 1fr 1fr;padding-block:clamp(40px,6vw,64px)}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}
.footer__brand .brand__name{color:var(--canvas)}
.footer__brand .brand__name small{color:#C9BEAC}
.footer h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#C9BEAC;margin-bottom:1rem}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.footer__bottom{border-top:1px solid rgba(247,237,224,.16);padding-block:20px;display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;color:#C9BEAC;font-size:.85rem}
.footer__bottom p{margin:0}

/* ---------- 19. Hero ---------- */
/* full-screen home hero: photo fills the viewport, black tint, white text on top */
.hero-cover{position:relative;isolation:isolate;margin-inline:calc(50% - 50vw);width:100vw;
  min-height:clamp(560px,90vh,880px);display:flex;align-items:flex-end;
  overflow:hidden;border-bottom:1px solid var(--ink)}
.hero-cover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-cover__scrim{position:absolute;inset:0;z-index:-1;background:rgba(13,15,10,.5)}
.hero-cover__inner{width:100%;padding-block:clamp(40px,8vh,104px)}
.hero-cover .eyebrow{color:#EAF3E6;opacity:.95}
.hero-cover h1{color:#fff;font-family:var(--display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(2.5rem,4.6vw,4.3rem);line-height:1.06;max-width:18ch}
.hero-cover .accent--seal{color:#CDE7C0}
.hero-cover .lead{color:#F3F1EA;max-width:52ch}
.hero-cover .chip{background:rgba(255,255,255,.93);border-color:transparent;color:var(--ink)}
.hero-cover .btn--ghost{color:#fff;border-color:rgba(255,255,255,.75);background:transparent}
.hero-cover .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.hero-cover__cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  width:26px;height:42px;border:2px solid rgba(255,255,255,.7);border-radius:var(--pill);
  display:grid;justify-items:center;align-content:start;padding-top:7px;z-index:1}
.hero-cover__cue span{width:4px;height:8px;border-radius:var(--pill);background:#fff;animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(7px);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-cover__cue span{animation:none}}

.page-hero{padding-block:clamp(40px,5vw,68px) var(--sect-tight)}
.page-hero h1{max-width:18ch}
/* interior page hero as a full-bleed tinted band with an accent shape bleeding off the right */
.page-hero.band-hero{position:relative;isolation:isolate;padding-block:clamp(46px,6vw,80px) clamp(32px,4vw,52px)}
.page-hero.band-hero>*{position:relative;z-index:1}
.page-hero.band-hero::before{content:"";position:absolute;z-index:0;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;background:var(--seal-tint)}

/* full-bleed tinted band behind any centered .container section ("bleed into the sides") */
.band-tint{position:relative;isolation:isolate}
.band-tint>*{position:relative;z-index:1}
.band-tint::before{content:"";position:absolute;z-index:0;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;background:var(--seal-tint)}

/* ---------- 22. Bento grid · oversized metrics · cinematic image band ---------- */
/* pristine bento: image-led grid with tight, even gutters */
.bento{display:grid;gap:10px;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px}
.bento__cell{position:relative;overflow:hidden;border-radius:var(--r);display:flex;min-height:0;border:1px solid var(--ink)}
.bento__cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bento__cell--wide{grid-column:span 2}
.bento__cell--tall{grid-row:span 2}
.bento__cap{position:relative;z-index:2;margin-top:auto;padding:11px 15px;font-weight:700;font-size:.9rem;color:#fff;line-height:1.25;background:rgba(16,16,11,.74)}
.bento__cell--text{background:var(--seal-tint);color:var(--ink);padding:clamp(18px,2.4vw,26px);flex-direction:column;justify-content:flex-end}
.bento__cell--text .eyebrow{margin-bottom:.45rem}
.bento__cell--text h3{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.95rem);font-weight:600;margin:0;letter-spacing:-.01em}
.bento__cell--ink{background:var(--ink);color:var(--canvas);padding:clamp(16px,2vw,22px);flex-direction:column;justify-content:flex-end}
.bento__big{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.05;color:#fff}
.bento__cell--ink p{margin:.3rem 0 0;color:#E2DBCD;font-size:.86rem}
@media (max-width:860px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:152px}
  .bento__cell--tall{grid-row:span 1}
  .bento__cell--ink{grid-column:span 2}
}
@media (max-width:520px){.bento{grid-auto-rows:130px}}

/* oversized metrics strip (giant numerals, hairline dividers) */
.stats--xl{gap:0;grid-template-columns:repeat(3,1fr)}
.stats--xl .stat{padding-left:clamp(18px,2.4vw,32px);border-left:1px solid rgba(255,255,255,.16)}
.stats--xl .stat:first-child{border-left:0;padding-left:0}
.stats--xl .stat__n{font-size:clamp(3.2rem,8vw,5.6rem);letter-spacing:-.03em}
@media (max-width:700px){
  .stats--xl{grid-template-columns:1fr;gap:16px}
  .stats--xl .stat{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.16);padding-top:14px}
  .stats--xl .stat:first-child{border-top:0;padding-top:0}
}

/* cinematic full-bleed image statement (image-as-canvas, text over a side scrim) */
.feature-cover{position:relative;isolation:isolate;margin-inline:calc(50% - 50vw);width:100vw;
  min-height:clamp(360px,50vh,540px);display:flex;align-items:center;overflow:hidden;border-block:1px solid var(--ink)}
.feature-cover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.feature-cover__scrim{position:absolute;inset:0;z-index:-1;background:rgba(14,16,10,.52)}
.feature-cover__inner{padding-block:clamp(36px,6vw,68px);width:100%}
.feature-cover .eyebrow{color:#EAF3E6;opacity:.95}
.feature-cover h2{color:#fff;font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.8vw,3.1rem);line-height:1.08;max-width:20ch}
.feature-cover .lead{color:#F1EFE8;max-width:48ch}
.feature-cover .btn--ghost{color:#fff;border-color:rgba(255,255,255,.72);background:transparent}
.feature-cover .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- 20. Reveal motion ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .4s var(--ease-out), transform .4s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}
.js .word{opacity:0;display:inline-block;transform:translateY(.5em)}
.js .word.in{opacity:1;transform:none;transition:opacity .37s var(--ease-out), transform .37s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .reveal,.js .reveal,.js .reveal:has(.figure),.js .word{opacity:1;transform:none;transition:none}
  .progress__fill{transition:none}
  .btn:active,a.card:active{transform:none}
}

/* utilities */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.text-clay{color:var(--clay-ink)}.text-blue{color:var(--blue-ink)}.text-seal{color:var(--seal-deep)}
.nowrap{white-space:nowrap}
.hide{display:none}

/* ---------- language selector + Google Translate cleanup ---------- */
.lang-select{font-family:var(--serif);font-size:.76rem;color:var(--canvas);background:transparent;border:1px solid rgba(255,255,255,.4);border-radius:0;padding:3px 7px;cursor:pointer;line-height:1.2}
.lang-select:focus-visible{outline:2px solid var(--seal);outline-offset:2px}
.lang-select option{color:#1a1a1a;background:#fff}
.goog-te-banner-frame,.goog-te-banner-frame.skiptranslate,#goog-gt-tt,.goog-te-balloon-frame{display:none !important}
body{top:0 !important}
.goog-text-highlight{background:none !important;box-shadow:none !important}
#google_translate_element{position:absolute !important;left:-9999px !important;height:1px;overflow:hidden}

/* ============================================================
   23. Mega-menu navigation (click-to-open, full-width panels)
   ============================================================ */
.site-header{overflow:visible}
.meganav{display:flex;align-items:center;gap:2px}
.meganav__bar{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.meganav__item{position:static}
.meganav__tab{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--serif);font-weight:700;font-size:.97rem;color:var(--ink);
  background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  padding:10px 16px;line-height:1;letter-spacing:.005em;
  transition:color .15s ease,border-color .2s ease;
}
.meganav__tab:hover{color:var(--seal-deep)}
.meganav__tab[aria-expanded="true"]{color:var(--seal-deep);border-bottom-color:var(--seal-deep)}
.meganav__chev{width:14px;height:14px;flex:none;transition:transform .26s var(--ease-out)}
.meganav__tab[aria-expanded="true"] .meganav__chev{transform:rotate(180deg)}

/* full-width dropdown panel, drops below the header */
.megapanel{
  position:absolute;left:0;right:0;top:100%;z-index:117;
  background:var(--canvas);border-top:1px solid var(--line);
  border-bottom:1px solid var(--ink);box-shadow:var(--sh-2);
}
.megapanel[hidden]{display:none}
.megapanel__inner{
  display:grid;grid-template-columns:.82fr 2fr;gap:clamp(28px,5vw,68px);
  padding-block:clamp(28px,4vw,46px);
}
.megapanel__lead h2{font-family:var(--display);font-weight:600;font-size:1.75rem;margin-bottom:.5rem;letter-spacing:-.01em}
.megapanel__lead p{color:var(--ink-soft);font-size:.97rem;max-width:32ch;margin-bottom:1rem}
.megapanel__more{font-weight:700;color:var(--seal-deep);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.megapanel__more:hover{color:var(--seal-deep);filter:brightness(.85)}
.megapanel__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.megapanel__col h3{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.95rem;font-weight:700}
.megapanel__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.72rem}
.megapanel__col a{
  position:relative;color:var(--ink);text-decoration:none;font-weight:600;font-size:1.04rem;line-height:1.25;
  display:inline-block;transition:color .12s ease;
}
.megapanel__col a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--seal-deep);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease-out)}
.megapanel__col a:hover{color:var(--seal-deep)}
.megapanel__col a:hover::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.megapanel__col a::after{transition:none}}
.js .megapanel{animation:panelDrop .26s var(--ease-out)}
@keyframes panelDrop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

/* dim backdrop behind an open panel */
.nav-backdrop{
  position:fixed;left:0;right:0;bottom:0;top:var(--header-h,64px);z-index:106;
  background:rgba(22,19,14,.34);opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.nav-backdrop.show{opacity:1;pointer-events:auto}

/* search trigger + panel */
.header__actions{display:flex;align-items:center;gap:6px}
.search-toggle{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--serif);font-weight:700;font-size:.95rem;color:var(--ink);
  background:none;border:0;cursor:pointer;padding:10px 12px;line-height:1;
  transition:color .15s ease;
}
.search-toggle:hover{color:var(--seal-deep)}
.search-toggle svg{width:18px;height:18px;flex:none}
.search-panel{
  position:absolute;left:0;right:0;top:100%;z-index:118;
  background:var(--canvas);border-top:1px solid var(--line);
  border-bottom:1px solid var(--ink);box-shadow:var(--sh-2);
}
.search-panel[hidden]{display:none}
.js .search-panel{animation:panelDrop .24s var(--ease-out)}
.search-panel__inner{padding-block:clamp(26px,4vw,42px)}
.search-box{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--ink);padding-bottom:12px}
.search-box svg{width:26px;height:26px;flex:none;color:var(--seal-deep)}
.search-box input{
  border:0;background:none;width:100%;padding:4px 0;color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,3vw,2.3rem);letter-spacing:-.01em;
}
.search-box input::placeholder{color:var(--muted);opacity:.7}
.search-box input:focus{outline:none}
.search-meta{color:var(--muted);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin:1.3rem 0 .5rem}
.search-results{display:grid;gap:2px;max-height:50vh;overflow:auto}
.search-results a{
  display:grid;gap:2px;text-decoration:none;color:var(--ink);
  padding:13px 16px;border-left:3px solid transparent;transition:background .12s ease,border-color .12s ease;
}
.search-results a:hover,.search-results a.is-active{background:var(--canvas-2);border-left-color:var(--seal)}
.search-results .sr__t{font-weight:700;font-size:1.05rem}
.search-results .sr__d{color:var(--muted);font-size:.9rem}
.search-empty{color:var(--ink-soft);padding:18px 4px}

@media (max-width:880px){
  .meganav{
    position:absolute;left:var(--gut);right:var(--gut);top:calc(100% + 10px);
    background:var(--paper);border:1px solid var(--ink);box-shadow:var(--sh-2);
    display:none;max-height:78vh;overflow:auto;padding:6px;z-index:117;
  }
  .meganav.open{display:block}
  .meganav__bar{flex-direction:column;align-items:stretch;gap:0}
  .meganav__item+.meganav__item{border-top:1px solid var(--line)}
  .meganav__tab{width:100%;justify-content:space-between;padding:15px 14px;border-bottom:0;font-size:1.05rem}
  .megapanel{position:static;box-shadow:none;border:0;background:var(--canvas-2)}
  .megapanel__inner{grid-template-columns:1fr;gap:16px;padding:14px}
  .megapanel__lead h2{font-size:1.3rem}
  .megapanel__cols{grid-template-columns:1fr;gap:14px}
  .nav-backdrop{display:none}
  .search-panel__inner{padding-block:22px}
}


/* ============================================================
   25. Directional reveals — slide from side / open from center
   ============================================================ */
/* side content slides in from its own edge; full-width content uses the base rise + fade */
.js .reveal.reveal--left{transform:translateX(-44px)}
.js .reveal.reveal--right{transform:translateX(44px)}
.js .reveal.reveal--left.in,.js .reveal.reveal--right.in{transform:none}
.js .reveal--lag.in{transition-delay:.12s}
@media (prefers-reduced-motion:reduce){
  .js .reveal.reveal--left,.js .reveal.reveal--right{transform:none;opacity:1}
}

/* ============================================================
   26. Asymmetric / edge-pushed content + spread typography
   ============================================================ */
/* a section whose content hugs one side of the page, leaving open space */
.lean{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
.lean--left{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
.lean--right{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
.lean--right .lean__body{order:2}
.lean__body{max-width:54ch}
.lean__aside{min-width:0}
@media (max-width:860px){
  .lean--left,.lean--right{grid-template-columns:1fr}
  .lean--right .lean__body{order:0}
}
/* push a plain text block hard to one edge of the reading column */
.hug-left{margin-right:auto;margin-left:0;max-width:60ch}
.hug-right{margin-left:auto;margin-right:0;max-width:60ch;text-align:left}
/* looser, more editorial spacing for select passages */
.spread{letter-spacing:.012em;word-spacing:.06em;line-height:1.92}
.spread-wide{max-width:none}

/* ============================================================
   27. Track-record numbers plate (flat, sits in a two-column band)
   ============================================================ */
.numplate{
  background:var(--blue-grey);color:#fff;
  border:1px solid var(--ink);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,40px);
}
.numplate__fig{display:flex;gap:16px;align-items:baseline;margin:0 0 1.1rem}
.numplate__n{font-family:var(--display);font-weight:600;font-size:clamp(2.6rem,5vw,3.7rem);line-height:.9;letter-spacing:-.02em;flex:none}
.numplate__t{color:#EAF1F4;font-size:.98rem;line-height:1.4}
.numplate__rule{border:0;border-top:1px solid rgba(255,255,255,.28);margin:1.2rem 0}
.numplate__list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.numplate__list li{color:#E7EEF1;font-size:.92rem;line-height:1.45;overflow-wrap:break-word}
.numplate__list b{color:#fff;font-family:var(--display);font-weight:600;font-size:1.2rem;margin-right:.5rem}
.numplate__foot{color:var(--muted);font-size:.86rem;margin-top:1.2rem}

/* ============================================================
   28. Homepage rebuild (Gates-structure, recolored as CRS)
   ============================================================ */

/* --- sage page frame (homepage only) --- */
body.home{padding:14px}
@media (min-width:1024px){body.home{padding:16px}}
.page-frame{position:fixed;inset:0;border:14px solid var(--frame);pointer-events:none;z-index:60}
@media (min-width:1024px){.page-frame{border-width:16px}}
body.home .site-header{top:14px}
@media (min-width:1024px){body.home .site-header{top:16px}}

/* uppercase bold sans display titles */
.caps{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.98;color:var(--ink)}
.on-ink .caps{color:var(--canvas)}

/* --- nav: sliding 2px underline + cta accent --- */
.meganav__tab{position:relative;border-bottom:0}
.meganav__tab::after{content:"";position:absolute;left:16px;right:16px;bottom:6px;height:2px;
  background:var(--cta);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out)}
.meganav__tab:hover::after,.meganav__tab[aria-expanded="true"]::after{transform:scaleX(1)}
.meganav__tab:hover,.meganav__tab[aria-expanded="true"]{color:var(--cta)}
.megapanel__col a::after{background:var(--cta)}
.megapanel__col a:hover{color:var(--cta)}
.megapanel__more{color:var(--cta)}
.megapanel__more:hover{color:var(--cta);filter:brightness(1.1)}
.search-toggle:hover{color:var(--cta)}
@media (prefers-reduced-motion:reduce){.meganav__tab::after{transition:none}}

/* --- featured card inside a mega panel (Ideas) --- */
.megacard{display:block;text-decoration:none;color:inherit;border:1px solid var(--line-ink);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.megacard img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line-ink)}
.megacard__body{padding:14px 16px}
.megacard h4{font-family:var(--serif);font-weight:700;font-size:1.02rem;margin:0 0 .25rem}
.megacard p{margin:0;color:var(--ink-soft);font-size:.9rem}

/* --- centered search overlay on the sage frame --- */
.search-overlay{position:fixed;inset:0;z-index:130;background:var(--frame);
  display:none;align-items:flex-start;justify-content:center;padding:clamp(80px,16vh,180px) 24px}
.search-overlay.open{display:flex}
.search-overlay__box{width:min(720px,94vw)}
.search-overlay__label{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--ink);opacity:.7;margin:0 0 14px}
.search-overlay__form{display:flex;gap:14px;align-items:center;border-bottom:2px solid var(--ink)}
.search-overlay__form input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,4.4vw,2.7rem);padding:8px 2px}
.search-overlay__form input:focus{outline:none}
.search-overlay__form input::placeholder{color:var(--ink);opacity:.45}
.search-overlay__hint{margin-top:16px;color:var(--ink);opacity:.72;font-size:.96rem}
.search-toggle__x{display:none}
.search-toggle[aria-expanded="true"] .search-toggle__label,
.search-toggle[aria-expanded="true"] svg{display:none}
.search-toggle[aria-expanded="true"] .search-toggle__x{display:inline}
@media (prefers-reduced-motion:reduce){.search-overlay{}}

/* --- curtain: two cta panels part to reveal the hero (first load only) --- */
.curtain{position:fixed;inset:0;z-index:140;display:none;pointer-events:none}
.curtain.run{display:block}
.curtain__panel{position:absolute;top:0;bottom:0;width:51%;background:var(--cta)}
.curtain__panel--l{left:0}
.curtain__panel--r{right:0}
.curtain.run .curtain__panel--l{animation:curtainL .8s var(--ease-out) .12s forwards}
.curtain.run .curtain__panel--r{animation:curtainR .8s var(--ease-out) .12s forwards}
@keyframes curtainL{from{transform:translateX(0)}to{transform:translateX(-101%)}}
@keyframes curtainR{from{transform:translateX(0)}to{transform:translateX(101%)}}
@media (prefers-reduced-motion:reduce){.curtain{display:none !important}}

/* hero content rise on first load (paired with the curtain); plays once, only when JS adds .go.
   Default (return visitor, reduced motion, JS off) = simply visible, no hidden state. */
.home-hero.go .hero2__text>*,.home-hero.go .hero2__media{animation:heroRise .4s var(--ease-out) both}
@keyframes heroRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.home-hero.go .hero2__text>*,.home-hero.go .hero2__media{animation:none}}

/* --- hero (text left, big rounded image plate right) --- */
.home-hero{padding-block:clamp(26px,4vw,54px) clamp(40px,6vw,80px)}
.hero2{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(26px,4vw,60px);align-items:center}
.hero2__text{max-width:48ch}
.hero2__text h1{font-family:var(--display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(2.5rem,4.6vw,4.3rem);line-height:1.06;color:var(--ink);margin:0 0 .5em}
.hero2__text h1 .accent--seal{color:var(--cta);font-style:italic}
.hero2__lead{font-size:1.18rem;line-height:1.55;color:var(--ink-soft);max-width:46ch;margin:0 0 1.5rem}
.hero2__media{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--ink);
  aspect-ratio:5/4;background:var(--canvas-2)}
.hero2__media img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:860px){
  .hero2{grid-template-columns:1fr;gap:24px}
  .hero2__media{order:-1;aspect-ratio:16/10}
}

/* --- our work / our story teasers --- */
.teasers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,48px)}
.teaser{display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:start;text-decoration:none;color:inherit}
.teaser__img{width:104px;height:104px;border-radius:var(--r);object-fit:cover;border:1px solid var(--ink)}
.teaser h3{font-family:var(--serif);font-weight:700;font-size:1.4rem;margin:.1rem 0 .4rem;color:var(--ink)}
.teaser h3 em{font-family:var(--display);font-style:italic;font-weight:600}
.teaser p{margin:0 0 .55rem;color:var(--ink-soft);font-size:.98rem}
.link-more{position:relative;display:inline-block;color:var(--cta);font-weight:700;font-size:.95rem;text-decoration:none}
.link-more::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--cta);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out)}
.teaser:hover .link-more::after,.link-more:hover::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.link-more::after{transition:none}}
@media (max-width:760px){.teasers{grid-template-columns:1fr;gap:26px}}

/* --- large feature plate (photo left, text right) --- */
.feature-row{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(26px,4vw,60px);align-items:center;margin-top:clamp(34px,5vw,68px)}
.feature-row__media{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--ink);aspect-ratio:4/3;background:var(--canvas-2)}
.feature-row__media img{width:100%;height:100%;object-fit:cover;display:block}
.feature-row__text h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,3vw,2.3rem);color:var(--ink);margin:0 0 .5rem}
.feature-row__text h2 em{font-family:var(--display);font-style:italic;font-weight:600}
.feature-row__text p{color:var(--ink-soft)}
@media (max-width:860px){.feature-row{grid-template-columns:1fr}.feature-row__media{order:-1}}

/* --- ideas section --- */
.ideas__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:1.6rem;flex-wrap:wrap}
.ideas__head .caps{font-size:clamp(1.9rem,3.8vw,3rem)}
.ideas__grid{display:grid;grid-template-columns:.62fr 2fr;gap:clamp(26px,4vw,52px)}
.ideas__rail{list-style:none;margin:0;padding:0;display:grid;gap:0;border-left:2px solid var(--line)}
.ideas__rail a{display:block;padding:.5rem 0 .5rem 18px;margin-left:-2px;border-left:2px solid transparent;
  color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:1.02rem}
.ideas__rail a.is-active,.ideas__rail a:hover{border-left-color:var(--cta);color:var(--ink)}
.ideas__rail a.is-active{font-weight:700}
.ideas__cards{display:flex;gap:clamp(18px,2.5vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.ideas__cards::-webkit-scrollbar{display:none}
.idea-card{flex:0 0 clamp(260px,46%,360px);scroll-snap-align:start;display:block;text-decoration:none;color:inherit}
@media (prefers-reduced-motion:reduce){.ideas__cards{scroll-behavior:auto}}
.idea-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--ink);border-radius:var(--r);margin-bottom:14px}
.idea-card__label{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:var(--ink-soft)}
.idea-card h3{font-family:var(--serif);font-weight:700;font-size:clamp(1.25rem,1.6vw,1.6rem);line-height:1.25;margin:.4rem 0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.idea-card:hover h3{color:var(--cta)}
.idea-card p{margin:0;color:var(--ink-soft);font-size:.96rem}
.ideas__nav{display:flex;gap:10px;margin-top:1.4rem;justify-content:flex-end}
.ideas__arrow{width:44px;height:44px;border:1px solid var(--ink);border-radius:var(--r);background:var(--paper);
  color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .15s ease,color .15s ease}
.ideas__arrow:hover{background:var(--ink);color:var(--canvas)}
@media (max-width:860px){.ideas__grid{grid-template-columns:1fr}.idea-card{flex-basis:84%}}

/* --- newsletter plate (cta fill) --- */
.newsletter{background:var(--cta);color:#fff;border-radius:var(--r-lg);padding:clamp(28px,4vw,56px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,52px);align-items:center}
.newsletter .caps{color:#fff;font-size:clamp(1.7rem,3.4vw,2.6rem);margin:0 0 .6rem}
.newsletter p{color:#E7F0EC;margin:0;max-width:42ch}
.newsletter__form{display:flex;flex-wrap:wrap;gap:12px}
.newsletter__form input{flex:1;min-width:210px;border:1px solid #fff;border-radius:var(--r);padding:14px 16px;
  font-family:var(--serif);font-size:1rem;color:var(--ink);background:#fff}
.newsletter__form .btn{background:#fff;color:var(--cta);border-color:#fff}
.newsletter__form .btn:hover{background:#fff;color:var(--cta);filter:brightness(.94)}
.newsletter__small{color:#CFE0DB;font-size:.8rem;margin:10px 0 0}
@media (max-width:760px){.newsletter{grid-template-columns:1fr}}

/* --- by the numbers (stat plate) --- */
.bynumbers{background:var(--canvas-2);border:1px solid var(--line-ink);border-radius:var(--r-lg);padding:clamp(28px,4vw,52px)}
.bynumbers__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:.3rem}
.bynumbers__head .caps{font-size:clamp(1.5rem,3vw,2.2rem)}
.bynumbers__cap{color:var(--muted);margin:0 0 1.7rem}
.bynumbers__row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px)}
.bynum__n{font-family:var(--display);font-weight:600;font-size:clamp(3.25rem,7vw,5.5rem);line-height:1;color:var(--ink)}
.bynum__l{color:var(--ink-soft);font-size:.92rem;margin-top:.35rem;line-height:1.35}
@media (max-width:760px){.bynumbers__row{grid-template-columns:1fr 1fr;gap:24px}}

/* --- more about (image cards) --- */
.aboutcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,32px)}
.aboutcard{display:block;text-decoration:none;color:inherit;border:1px solid var(--line-ink);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);transition:transform .18s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.aboutcard:hover{transform:translateY(-3px)}}
.aboutcard img{width:100%;aspect-ratio:3/2;object-fit:cover;border-bottom:1px solid var(--line-ink);display:block}
.aboutcard__body{padding:18px 20px}
.aboutcard h3{font-family:var(--serif);font-weight:700;font-size:1.18rem;margin:0 0 .3rem;color:var(--ink)}
.aboutcard p{margin:0;color:var(--ink-soft);font-size:.95rem}
@media (max-width:760px){.aboutcards{grid-template-columns:1fr}}

/* ============================================================
   29. AACR-MODELED REBUILD LAYER
   Overrides + new chrome. Source-order wins; the component CSS
   above is untouched and simply inherits the new tokens.
   ============================================================ */

/* ---- 29.0 Archivo on chrome / labels / data ---- */
.eyebrow{font-family:var(--sans);font-weight:700;letter-spacing:.14em;color:var(--seal-deep)}
.on-ink .eyebrow,.hero-cover .eyebrow,.feature-cover .eyebrow{color:#CFE3D6}
.btn{font-family:var(--sans);font-weight:600;letter-spacing:.01em;border-radius:var(--pill)}
.nav a,.meganav__tab,.search-toggle,.lang-select{font-family:var(--sans)}
.stat__n,.bynum__n,.numplate__n,.bar__pct,.stat__label,.card__kicker,.idea-card__label{font-family:var(--sans)}
.stat__n,.bynum__n,.numplate__n,.bar__pct{font-weight:700;letter-spacing:-.01em}
.chip{font-family:var(--sans)}

/* primary CTA = the single loudest chrome element */
.btn--cta{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn--cta:hover{background:var(--brand-700);border-color:var(--brand-700);color:var(--on-brand);filter:none}

/* ---- 29.1 Layering ---- */
.progress{z-index:1400}
.site-header{z-index:1000;border-bottom:1px solid var(--line);overflow:visible}
.megapanel{z-index:1100}

/* ---- 29.2 Sticky compressing header (utility now lives inside header) ---- */
.site-header{position:sticky;top:0;background:var(--canvas);transition:box-shadow .22s var(--ease-out)}
body.is-scrolled .site-header{box-shadow:var(--sh-2)}

.util{background:var(--ink);color:var(--canvas);font-size:.78rem;border:0;
  overflow:hidden;max-height:48px;transition:max-height .22s var(--ease-out),opacity .2s var(--ease-out)}
body.is-scrolled .util{max-height:0;opacity:0}
.util__row{min-height:var(--util-h);justify-content:space-between;gap:16px;flex-wrap:nowrap}
.util__tag{font-family:var(--sans);font-weight:600;letter-spacing:.01em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.util__actions{display:flex;align-items:center;gap:18px;flex:none}
.util__link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  color:var(--canvas);font-family:var(--sans);font-weight:600;font-size:.78rem;text-decoration:none;padding:2px}
.util__link svg{width:14px;height:14px}
.util__link:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:767px){.util{display:none}}

.header-main{background:var(--canvas)}
.header__row{padding-block:20px;transition:padding .22s var(--ease-out)}
body.is-scrolled .header__row{padding-block:11px}
.brand__mark{width:48px;height:48px;transition:width .22s var(--ease-out),height .22s var(--ease-out)}
body.is-scrolled .brand__mark{width:40px;height:40px}
.brand__name{font-family:var(--display);font-weight:600;font-size:1.28rem}
.brand__name small{font-family:var(--sans);color:var(--muted)}

/* ---- 29.3 Header actions: search icon · Join CRS pill · hamburger ---- */
.header__actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:44px;height:44px;display:inline-grid;place-items:center;border:0;background:none;
  color:var(--ink);cursor:pointer;border-radius:var(--pill);transition:background .15s ease,color .15s ease}
.icon-btn:hover{background:var(--canvas-2);color:var(--brand)}
.icon-btn svg{width:20px;height:20px}
.join-cta{padding:12px 22px;white-space:nowrap}
.nav-toggle{display:none;border:0;background:none;color:var(--ink);width:44px;height:44px;padding:0;
  border-radius:var(--pill);cursor:pointer;align-items:center;justify-content:center}
.nav-toggle:hover{background:var(--canvas-2)}
.nav-toggle__bars{width:20px;height:14px}
.nav-toggle__bars::before,.nav-toggle__bars::after,.nav-toggle__bars span{background:var(--ink);height:2px}
.nav-toggle__bars span{top:6px}

/* ---- 29.4 Mega-menu (5 groups, full-width panels) ---- */
.meganav__bar{gap:0}
.meganav__tab{font-weight:600;font-size:.97rem;padding:12px 16px;gap:7px}
.meganav__tab::after{background:var(--brand)}
.meganav__tab:hover,.meganav__tab[aria-expanded="true"]{color:var(--brand)}
.megapanel{background:var(--paper);border-top:2px solid var(--brand);border-bottom:0;box-shadow:var(--sh-3)}
.megapanel__inner{grid-template-columns:.8fr 2.2fr;padding-block:clamp(28px,3.4vw,40px)}
.megapanel__lead h2{font-family:var(--display)}
.megapanel__col h3{font-family:var(--sans);color:var(--muted)}
.megapanel__col a{font-family:var(--serif)}
.megapanel__col a::after,.megapanel__more,.megapanel__col a:hover,.megacard:hover h4{color:var(--brand)}
.megapanel__col a::after{background:var(--brand)}
.megapanel__sub{list-style:none;margin:.4rem 0 0;padding:0 0 0 14px;display:grid;gap:.5rem;border-left:1px solid var(--line)}
.megapanel__sub a{font-size:.95rem;font-weight:600;color:var(--ink-soft)}
.megacard{border-radius:var(--r);box-shadow:var(--sh-1)}
.megacard:hover{box-shadow:var(--sh-2)}
.megacard__body .eyebrow{margin-bottom:.3rem}

/* ---- 29.5 Search overlay (one working top-sheet, sitewide) ---- */
.search2{position:fixed;inset:0;z-index:1200}
.search2[hidden]{display:none}
.search2__backdrop{position:absolute;inset:0;background:rgba(20,23,29,.42);opacity:0;transition:opacity .22s var(--ease-out)}
.search2.open .search2__backdrop{opacity:1}
.search2__sheet{position:relative;background:var(--paper);border-bottom:2px solid var(--brand);box-shadow:var(--sh-3);
  padding-block:clamp(22px,4vw,40px);opacity:0;transform:translateY(-12px);transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)}
.search2.open .search2__sheet{opacity:1;transform:none}
.search2__box{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--ink);padding-bottom:12px}
.search2__box>svg{width:26px;height:26px;flex:none;color:var(--brand)}
.search2__box input{flex:1;min-width:0;border:0;background:none;padding:4px 0;color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:-.01em}
.search2__box input:focus{outline:none}
.search2__box input::placeholder{color:var(--muted);opacity:.7}
.search2__close{flex:none;border:0;background:none;color:var(--muted);font-size:1.8rem;line-height:1;cursor:pointer;padding:0 4px}
.search2__close:hover{color:var(--ink)}
.search2__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.schip{font-family:var(--sans);font-weight:600;font-size:.82rem;padding:7px 14px;border-radius:var(--pill);
  background:var(--canvas-2);border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.schip:hover{border-color:var(--brand-300)}
.schip[aria-pressed="true"]{background:var(--brand-tint);border-color:var(--brand-300);color:var(--brand-700)}
.schip--clear{background:none;border-color:transparent;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.schip--clear:hover{color:var(--ink)}
.search-meta{font-family:var(--sans)}
.search-results .sr__t{font-family:var(--serif)}
.search-results .sr__label{font-family:var(--sans);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-700);margin-top:3px}
.search-results a:hover,.search-results a.is-active{background:var(--brand-tint);border-left-color:var(--brand)}
@media (prefers-reduced-motion:reduce){.search2__sheet,.search2__backdrop{transition:none;transform:none}}

/* ---- 29.6 Mobile drawer ---- */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(86vw,380px);z-index:1300;background:var(--paper);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s var(--ease-emph);overflow:auto}
.drawer.open{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.drawer__title{font-family:var(--sans);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.74rem;color:var(--muted)}
.drawer__close{border:0;background:none;color:var(--ink);font-size:1.8rem;line-height:1;cursor:pointer;width:40px;height:40px;border-radius:var(--pill)}
.drawer__close:hover{background:var(--canvas-2)}
.drawer__nav{padding:6px 12px}
.dacc{border-bottom:1px solid var(--line)}
.dacc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 8px;font-family:var(--sans);font-weight:600;font-size:1.02rem;color:var(--ink)}
.dacc>summary::-webkit-details-marker{display:none}
.dacc>summary svg{width:16px;height:16px;color:var(--muted);transition:transform .25s var(--ease-out)}
.dacc[open]>summary{color:var(--brand)}
.dacc[open]>summary svg{transform:rotate(180deg);color:var(--brand)}
.dacc ul{list-style:none;margin:0;padding:0 8px 12px;display:grid;gap:2px}
.dacc ul a{display:block;padding:9px 10px;border-radius:var(--r-sm);color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:.96rem}
.dacc ul a:hover{background:var(--canvas-2);color:var(--brand)}
.drawer__foot{margin-top:auto;padding:18px 20px;border-top:1px solid var(--line);display:grid;gap:10px;background:var(--canvas)}
.drawer__tag{margin:0;font-size:.82rem;color:var(--muted)}
.drawer__ig{font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--brand-700);text-decoration:none}
.drawer-backdrop{position:fixed;inset:0;z-index:1290;background:rgba(20,23,29,.45);opacity:0;pointer-events:none;transition:opacity .25s var(--ease-out)}
.drawer-backdrop.open{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}.drawer-backdrop{transition:none}}

/* responsive: drawer < 1024, full meganav >= 1024 */
@media (max-width:1023px){
  .meganav{display:none}
  .nav-toggle{display:inline-flex}
}
@media (min-width:1024px){
  .drawer,.drawer-backdrop{display:none}
}
@media (max-width:560px){.join-cta{display:none}}

/* ---- 29.7 Dark mega-footer ---- */
.site-footer{background:var(--ink);border-top:4px solid var(--brand)}
.site-footer a:hover{color:var(--brand-300)}
.footer__grid{grid-template-columns:1.6fr repeat(4,1fr)}
.footer h4{font-family:var(--sans)}
.footer__news{display:grid;gap:8px;margin-top:14px}
.footer__news label{font-family:var(--sans);font-weight:600;font-size:.8rem;color:#C9C3B6}
.footer__news form{display:flex;gap:8px}
.footer__news input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);
  color:#fff;border-radius:var(--r-sm);padding:10px 12px;font-family:var(--serif);font-size:.92rem}
.footer__news input::placeholder{color:#9AA0A8}
.footer__news .btn{padding:10px 16px;font-size:.85rem}
.footer__bottom{align-items:center}
.backtop{font-family:var(--sans);font-weight:600;font-size:.82rem;color:#C9C3B6;background:none;border:1px solid rgba(255,255,255,.2);
  border-radius:var(--pill);padding:7px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.backtop:hover{color:#fff;border-color:rgba(255,255,255,.45)}
@media (max-width:1024px){.footer__grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:620px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.footer__grid{grid-template-columns:1fr}}

/* ---- 29.8 Home hero: full-bleed cinematic hands photo ---- */
.hero-cover{min-height:min(86vh,760px);border-bottom:0}
@media (max-width:768px){.hero-cover{min-height:clamp(70vh,80vh,640px)}}
.hero-cover__img{animation:kenburns 12s var(--ease-in-out) alternate infinite;transform-origin:60% 55%}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.hero-cover__img{animation:none}}
.hero-cover__scrim{background:linear-gradient(105deg,rgba(20,23,29,.66) 0%,rgba(20,23,29,.30) 42%,rgba(20,23,29,0) 72%)}
.hero-cover__tint{position:absolute;inset:0;z-index:-1;background:var(--brand);opacity:.12;mix-blend-mode:multiply}
.hero-cover h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.05;letter-spacing:-.01em;max-width:16ch}
.hero-cover .lead{font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:54ch}
.hero-cover__inner .btn-row{margin-top:1.6rem}

/* ---- 29.9 Section header helper + home blocks ---- */
.shead{max-width:60ch;margin-bottom:clamp(28px,4vw,44px)}
.shead h2{font-family:var(--display);font-weight:600}
.shead--center{margin-inline:auto;text-align:center}

/* featured collaboration band (full-bleed paper-2) */
.feature-band{position:relative;isolation:isolate;padding-block:var(--sect)}
.feature-band::before{content:"";position:absolute;z-index:-1;inset:0 50% 0 50%;width:100vw;margin-left:-50vw;background:var(--canvas-2)}
.feature-band__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.feature-band__media{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;box-shadow:var(--sh-1)}
.feature-band__media img{width:100%;height:100%;object-fit:cover}
.feature-band__text h2{font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,3vw,2.4rem);margin:.2rem 0 .6rem}
.feature-band__text h2 em{font-style:italic}
@media (max-width:860px){.feature-band__grid{grid-template-columns:1fr}.feature-band__media{order:-1}}

/* mission + by the numbers (5 stats, count-up) */
.numbers{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,3vw,36px)}
.numbers .num__n{font-family:var(--sans);font-weight:700;font-size:clamp(2.6rem,5vw,4rem);line-height:1;color:var(--seal-deep);letter-spacing:-.02em}
.numbers .num__l{color:var(--muted);font-size:.9rem;margin-top:.5rem;line-height:1.35}
@media (max-width:880px){.numbers{grid-template-columns:repeat(3,1fr);row-gap:32px}}
@media (max-width:520px){.numbers{grid-template-columns:1fr 1fr}}

/* programs grid (5 pillars) */
.prog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap)}
.prog-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);text-decoration:none;color:inherit;transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out)}
@media (hover:hover){.prog-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}}
.prog-card__media{aspect-ratio:16/10;overflow:hidden}
.prog-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease-out)}
@media (hover:hover){.prog-card:hover .prog-card__media img{transform:scale(1.05)}}
.prog-card__body{padding:20px 22px;display:flex;flex-direction:column;gap:.4rem}
.prog-card__body h3{font-family:var(--display);font-weight:600;font-size:1.28rem;margin:0}
.prog-card__body p{margin:0;color:var(--ink-soft);font-size:.96rem}
.prog-card__more{margin-top:auto;font-family:var(--sans);font-weight:700;font-size:.85rem;color:var(--brand-700);padding-top:.4rem}

/* get-started CTA band (brand fill, full-bleed) */
.cta-band{position:relative;isolation:isolate;color:var(--on-brand);padding-block:var(--sect);text-align:center}
.cta-band::before{content:"";position:absolute;z-index:-1;inset:0 50% 0 50%;width:100vw;margin-left:-50vw;background:var(--brand)}
.cta-band h2{font-family:var(--display);font-weight:600;color:#fff;font-size:clamp(1.9rem,3.6vw,2.9rem);margin:0 0 .5rem}
.cta-band p{color:#DDEAE2;max-width:52ch;margin:0 auto 1.6rem}
.cta-band .btn--cta{background:#fff;color:var(--brand-700);border-color:#fff}
.cta-band .btn--cta:hover{background:#fff;color:var(--brand-700);filter:brightness(.94)}
.cta-band .btn--ghost{color:#fff;border-color:rgba(255,255,255,.7);background:transparent}
.cta-band .btn--ghost:hover{background:#fff;color:var(--brand-700);border-color:#fff}

/* ---- 29.10 Interior: sticky in-page sub-nav ---- */
.subnav{position:sticky;top:var(--header-h,72px);z-index:60;background:var(--canvas);border-bottom:1px solid var(--line)}
.subnav__row{display:flex;gap:8px;overflow-x:auto;padding:12px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.subnav__row::-webkit-scrollbar{display:none}
.subnav a{flex:none;font-family:var(--sans);font-weight:600;font-size:.85rem;padding:8px 15px;border-radius:var(--pill);
  background:var(--canvas-2);color:var(--ink-soft);text-decoration:none;white-space:nowrap;transition:background .12s,color .12s}
.subnav a:hover,.subnav a.is-active{background:var(--seal-tint);color:var(--seal-deep)}

/* ---- 29.11 Page masthead (interior) ---- */
.masthead{padding-block:clamp(40px,5vw,72px) clamp(24px,3vw,40px)}
.masthead .eyebrow{color:var(--seal-deep)}
.masthead h1{font-family:var(--display);font-weight:600;max-width:18ch}
.masthead::after{content:"";display:block;width:64px;height:3px;background:var(--seal);border-radius:var(--pill);margin-top:1.1rem}
.crumb{font-family:var(--sans);font-size:.8rem;color:var(--muted);margin-bottom:.9rem}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--brand)}

/* ---- 29.12 Digest archive polish ---- */
.digest{border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.digest__item h3{color:var(--seal-deep)}
.digest__label{color:var(--seal-deep)}

/* ---- 29.13 anchor offsets under the sticky header (+ sub-nav) ---- */
main [id]{scroll-margin-top:calc(var(--header-h,72px) + 20px)}
main .anchor-sec{scroll-margin-top:calc(var(--header-h,72px) + 64px)}

/* ---- 29.14 misc polish ---- */
.cta-band .eyebrow{color:#CFE3D6}
.curtain__panel{background:var(--canvas)}     /* paper panels part to reveal the hero */
.ideas__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:1.6rem;flex-wrap:wrap}
.ideas__head h2{font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,3vw,2.4rem)}
.ideas__cards{display:flex;gap:clamp(18px,2.5vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.ideas__arrow:disabled{opacity:.35;cursor:default}
.masthead .accent--seal{color:var(--seal-deep)}

/* ---- 29.15 reduced-motion: kill transforms/zoom/curtain, keep opacity ---- */
@media (prefers-reduced-motion:reduce){
  .hero-cover__img,.prog-card__media img{animation:none !important;transform:none !important}
  .util,.header__row,.brand__mark{transition:none}
  .curtain{display:none !important}
}

/* ============================================================
   30. Scroll pop-in reveal (extends the .reveal system)
   Hidden state is gated under html.js. Letters/words split into
   units (.ru); the unit only exists after JS runs, so with JS
   off/broken the real text stays visible. Compositor-only props.
   ============================================================ */
.js .reveal[data-reveal] .rw{display:inline-block}            /* word wrapper: no mid-word breaks */
.js .reveal[data-reveal] .ru{display:inline-block;opacity:0;
  transform:translateY(.4em) scale(.94);filter:blur(4px);
  transform-origin:50% 100%;backface-visibility:hidden}
.js .reveal[data-reveal="letters"],
.js .reveal[data-reveal="words"]{opacity:1;transform:none;filter:none}
.js .reveal[data-reveal].is-revealing .ru{opacity:1;transform:none;filter:none;
  transition:opacity var(--t) var(--ease-out),
             transform var(--ru-dur,520ms) var(--ease-out),
             filter var(--ru-dur,520ms) var(--ease-out);
  transition-delay:var(--ru-delay,0ms)}
/* block: the whole element pops as one unit */
.js .reveal[data-reveal="block"]{opacity:0;transform:translateY(.4em) scale(.94);
  filter:blur(4px);transform-origin:50% 100%;backface-visibility:hidden}
.js .reveal[data-reveal="block"].is-revealing{opacity:1;transform:none;filter:none;
  transition:opacity var(--t) var(--ease-out),
             transform 420ms var(--ease-out),
             filter 420ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .js .reveal[data-reveal] .ru,
  .js .reveal[data-reveal="letters"],
  .js .reveal[data-reveal="words"],
  .js .reveal[data-reveal="block"]{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
}