/* ==========================================================================
   SPEAK — LIFE ADDS UP. — join-speak.com design system
   Master brand: SPEAK   ·   Campaign: LIFE ADDS UP.
   ========================================================================== */

/* ---- Brand fonts ----------------------------------------------------------
   Druk Wide (headlines) is a licensed font. Drop the web files into
   /assets/fonts/ with these names and they are picked up automatically:
     DrukWide-Heavy-Web.woff2   (weight 800)
     DrukWide-Super-Web.woff2   (weight 900)
   Until then headlines fall back to Archivo Expanded Black (Google Fonts),
   the closest freely-available wide/heavy grotesque.
   Body: Geist (Google Fonts, free).                                         */
/* TO ACTIVATE DRUK WIDE: add the licensed web fonts to /assets/fonts/ and
   remove the comment markers around the two rules below.
@font-face{
  font-family:"Druk Wide";
  src:url("/assets/fonts/DrukWide-Heavy-Web.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Druk Wide";
  src:url("/assets/fonts/DrukWide-Super-Web.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
}
*/

/* Self-hosted fallback + body fonts (SIL OFL — see /assets/fonts/LICENSE-*) */
@font-face{
  font-family:"Archivo";
  src:url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Geist";
  src:url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2-variations"),url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---- Tokens -------------------------------------------------------------- */
:root{
  /* Brand colours (SPEAK guidelines) */
  --green:#CCFF00;       /* SPEAK Green — primary accent */
  --off:#FCFCF9;         /* Off-White */
  --blue:#0065FF;        /* CTA Blue */
  --cream:#E1D4C4;       /* Cream */
  --ink:#0A1821;         /* Ink black (from official logo files) */
  --ink-2:#132530;       /* raised ink surface */
  --ink-line:#25363F;
  --muted-on-ink:#A7B0B6;  /* 8.2:1 on ink */
  --muted:#4A555C;         /* 7.4:1 on off-white */
  --line:#D9D5CC;

  /* Type */
  --f-display:"Druk Wide","Archivo",system-ui,sans-serif;
  --f-body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;

  --fs-hero:clamp(4.25rem, 15vw, 12.5rem);
  --fs-h1:clamp(2.6rem, 7vw, 6rem);
  --fs-h2:clamp(2rem, 5.2vw, 4rem);
  --fs-h3:clamp(1.15rem, 1.8vw, 1.45rem);
  --fs-lead:clamp(1.15rem, 1.6vw, 1.375rem);
  --fs-body:clamp(1.0625rem, 1.1vw, 1.125rem);
  --fs-small:0.9375rem;
  --fs-label:0.8125rem;

  /* Space */
  --gutter:clamp(16px, 4vw, 40px);
  --max:1240px;
  --section:clamp(72px, 10vw, 136px);
  --radius:2px;

  --focus:var(--blue);
}

/* ---- Base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%; scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{
  background:var(--off); color:var(--ink);
  font-family:var(--f-body); font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,video,svg{display:block; max-width:100%; height:auto}
a{color:inherit}
ul,ol{list-style:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
.on-ink{--focus:var(--green)}
.skip{position:absolute; left:12px; top:-60px; z-index:2000; background:var(--green); color:var(--ink); padding:12px 18px; font-weight:700; text-decoration:none}
.skip:focus{top:12px}
.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---- Type ---------------------------------------------------------------- */
.display, h1, h2, .h2, h3, .h3{
  font-family:var(--f-display); font-stretch:125%; font-weight:900;
  text-transform:uppercase; letter-spacing:-0.005em; line-height:0.92;
}
h1, .h1{font-size:var(--fs-h1)}
h2, .h2{font-size:var(--fs-h2); line-height:0.95}
h3, .h3{font-size:var(--fs-h3); line-height:1.1; font-weight:800; letter-spacing:0}
.lead{font-size:var(--fs-lead); line-height:1.5; max-width:38ch}
p{max-width:64ch}
p + p{margin-top:1em}
.label{
  font-family:var(--f-body); font-size:var(--fs-label); font-weight:600;
  text-transform:uppercase; letter-spacing:0.14em;
  display:inline-flex; align-items:center; gap:10px;
}
.label::before{content:""; width:20px; height:2px; background:currentColor}
.label--green{color:var(--green)}
.muted{color:var(--muted)}
.on-ink .muted{color:var(--muted-on-ink)}
.hl{color:var(--green)}
.hl-ink{background:var(--green); color:var(--ink); padding:0 .12em; box-decoration-break:clone; -webkit-box-decoration-break:clone}

/* ---- Layout -------------------------------------------------------------- */
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(56px,7vw,96px)}
.bg-ink{background:var(--ink); color:var(--off)}
.bg-off{background:var(--off)}
.bg-cream{background:var(--cream)}
.bg-green{background:var(--green); color:var(--ink)}
.stack > * + *{margin-top:var(--s, 1.25rem)}
.section-head{max-width:820px; margin-bottom:clamp(36px,5vw,64px)}
.section-head .label{margin-bottom:22px}
.section-head p{margin-top:22px}

/* ---- Buttons ------------------------------------------------------------- */
.btn{
  --bg:var(--blue); --fg:#fff; --bd:var(--blue);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:52px; padding:14px 26px;
  background:var(--bg); color:var(--fg); border:2px solid var(--bd); border-radius:var(--radius);
  font-family:var(--f-body); font-weight:700; font-size:0.9375rem; letter-spacing:0.06em; text-transform:uppercase;
  text-decoration:none; line-height:1.1; text-align:center;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn .arr{transition:transform .18s ease}
.btn:hover .arr{transform:translateX(4px)}
.btn--blue:hover{--bg:#0055D6; --bd:#0055D6}
.btn--green{--bg:var(--green); --fg:var(--ink); --bd:var(--green)}
.btn--green:hover{--bg:#B8E600; --bd:#B8E600}
.btn--ink{--bg:var(--ink); --fg:var(--off); --bd:var(--ink)}
.btn--ink:hover{--bg:var(--ink-2); --bd:var(--ink-2)}
.btn--ghost-light{--bg:transparent; --fg:var(--off); --bd:rgba(252,252,249,.7)}
.btn--ghost-light:hover{--bg:var(--off); --fg:var(--ink); --bd:var(--off)}
.btn--ghost-ink{--bg:transparent; --fg:var(--ink); --bd:var(--ink)}
.btn--ghost-ink:hover{--bg:var(--ink); --fg:var(--off)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px}
.textlink{
  font-weight:700; text-transform:uppercase; letter-spacing:0.06em; font-size:0.875rem;
  text-decoration:none; border-bottom:2px solid currentColor; padding-bottom:2px;
  display:inline-flex; gap:.5em; align-items:center;
}
.textlink:hover{color:var(--blue)}
.on-ink .textlink:hover{color:var(--green)}
.fine{font-size:var(--fs-small); color:var(--muted)}
.on-ink .fine{color:var(--muted-on-ink)}

/* ---- Urgent strip -------------------------------------------------------- */
.urgent-strip{
  background:#050D12; color:var(--off); font-size:0.8125rem; line-height:1.4;
  padding:8px var(--gutter); text-align:center;
}
.urgent-strip a{color:var(--off); font-weight:700; text-underline-offset:3px}
.urgent-strip a:hover{color:var(--green)}
.urgent-strip .short{display:none}
@media (max-width:760px){ .urgent-strip .long{display:none} .urgent-strip .short{display:inline} }

/* ---- Header -------------------------------------------------------------- */
.site-header{position:sticky; top:0; z-index:1000; background:var(--ink); color:var(--off); --focus:var(--green)}
.site-header .bar{
  max-width:var(--max); margin-inline:auto; padding:14px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:center; text-decoration:none; flex-shrink:0}
.brand img{height:30px; width:auto}
@media (min-width:1024px){ .brand img{height:34px} }
.nav{display:flex; align-items:center; gap:4px}
.nav a{
  color:var(--off); text-decoration:none; font-weight:600; font-size:0.875rem;
  letter-spacing:0.08em; text-transform:uppercase; padding:12px 14px; border-radius:var(--radius);
}
.nav a:hover{color:var(--green)}
.nav a[aria-current="page"]{color:var(--green); box-shadow:inset 0 -2px 0 var(--green)}
.nav a.btn{color:var(--fg); box-shadow:none}
.nav a.btn:hover{color:var(--fg)}
.header-cta{margin-left:12px; min-height:46px; padding:12px 20px; font-size:0.8125rem}
.menu-btn{display:none; align-items:center; gap:10px; padding:10px 4px 10px 12px; color:var(--off); font-weight:700; font-size:0.8125rem; letter-spacing:.12em; text-transform:uppercase; min-height:44px}
.menu-btn .bars{width:24px; height:14px; position:relative}
.menu-btn .bars::before,.menu-btn .bars::after{content:""; position:absolute; left:0; right:0; height:2px; background:currentColor; transition:transform .2s ease, top .2s ease}
.menu-btn .bars::before{top:2px}
.menu-btn .bars::after{top:10px}
.menu-btn[aria-expanded="true"] .bars::before{top:6px; transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars::after{top:6px; transform:rotate(-45deg)}
@media (max-width:1023px){
  .nav, .site-header .header-cta{display:none}
  .menu-btn{display:inline-flex}
}
.mobile-nav{
  display:none; background:var(--ink); border-top:1px solid var(--ink-line);
  padding:8px var(--gutter) 28px; max-height:calc(100vh - 100px); overflow-y:auto;
}
.mobile-nav.open{display:block; min-height:calc(100dvh - 100px)}
html.menu-open{overflow:hidden}
.mobile-nav a.m-link{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-display); font-stretch:125%; font-weight:900; text-transform:uppercase;
  font-size:1.5rem; line-height:1; color:var(--off); text-decoration:none;
  padding:18px 0; border-bottom:1px solid var(--ink-line);
}
.mobile-nav a.m-link[aria-current="page"]{color:var(--green)}
.mobile-nav .btn{width:100%; margin-top:22px}
.mobile-nav .m-urgent{margin-top:22px; font-size:var(--fs-small); color:var(--muted-on-ink)}
.mobile-nav .m-urgent a{color:var(--off); font-weight:700}
@media (min-width:1024px){ .mobile-nav{display:none!important} }

/* ---- HERO (home) --------------------------------------------------------- */
.hero{position:relative; background:var(--ink); color:var(--off); overflow:hidden}
.hero .wrap{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,4vw,64px);
  align-items:end; padding-block:clamp(40px,6vw,88px) clamp(48px,6vw,96px);
}
.pile{font-family:var(--f-display); font-stretch:125%; font-weight:800; text-transform:uppercase;
  font-size:clamp(0.62rem, 1.55vw, 1.05rem); line-height:1.32; letter-spacing:0.02em; color:var(--muted-on-ink);
  margin-bottom:clamp(18px,2.5vw,30px); white-space:nowrap}
.pile span{display:block}
.pile span:nth-child(n+5){color:#C9D0D4}
.hero-text{container-type:inline-size; min-width:0}
.hero-title{font-size:var(--fs-hero); line-height:0.84; letter-spacing:-0.01em}
@supports (font-size:1cqi){ .hero-title{font-size:min(23.5cqi, 12.5rem)} .pile{font-size:min(3.05cqi, 1.05rem)} }
.hero-title span{display:block}
.hero-title .last{color:var(--green)}
.by-speak{display:flex; align-items:center; gap:12px; margin-top:clamp(18px,2.4vw,28px);
  font-size:var(--fs-label); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-on-ink)}
.by-speak img{height:22px; width:auto}
.by-speak::before{content:""; width:28px; height:2px; background:var(--green)}
.hero-copy{margin-top:clamp(22px,3vw,36px)}
.hero-copy .lead{color:#E6EAEC}
.hero-copy .lead strong{color:var(--off)}
.hero-copy .btn-row{margin-top:28px}
.hero-media{position:relative; align-self:stretch; min-height:420px}
.hero-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%}
.hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,24,33,0) 55%, rgba(10,24,33,.55) 100%)}
.hero-media .tag{position:absolute; left:16px; bottom:16px; z-index:1; background:var(--green); color:var(--ink);
  font-weight:700; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; padding:8px 12px}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; padding-top:32px}
  .hero-media{min-height:0; aspect-ratio:4/3; order:2}
  .hero-media img{object-position:50% 62%}
}
@media (prefers-reduced-motion:no-preference){
  .js .pile span{opacity:0; transform:translateY(6px); animation:pileIn .5s cubic-bezier(.2,.7,.2,1) forwards}
  .js .pile span:nth-child(1){animation-delay:.10s}
  .js .pile span:nth-child(2){animation-delay:.28s}
  .js .pile span:nth-child(3){animation-delay:.46s}
  .js .pile span:nth-child(4){animation-delay:.64s}
  .js .pile span:nth-child(5){animation-delay:.82s}
  .js .pile span:nth-child(6){animation-delay:1.0s}
  .js .hero-title span{opacity:0; transform:translateY(14px); animation:pileIn .6s cubic-bezier(.2,.7,.2,1) forwards}
  .js .hero-title span:nth-child(1){animation-delay:1.2s}
  .js .hero-title span:nth-child(2){animation-delay:1.32s}
  .js .hero-title span:nth-child(3){animation-delay:1.44s}
}
@keyframes pileIn{to{opacity:1; transform:none}}

/* ---- Page hero (inner pages) -------------------------------------------- */
.page-hero{background:var(--ink); color:var(--off); --focus:var(--green)}
.page-hero .wrap{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,4vw,64px); align-items:end;
  padding-block:clamp(48px,7vw,104px)}
.page-hero h1{font-size:clamp(2.5rem, 6.4vw, 5.6rem)}
.page-hero .label{margin-bottom:22px}
.page-hero .lead{margin-top:24px; color:#E6EAEC}
.page-hero .btn-row{margin-top:30px}
.page-hero .ph-media{aspect-ratio:4/3; overflow:hidden}
.page-hero .ph-media img{width:100%; height:100%; object-fit:cover}
.page-hero--plain .wrap{grid-template-columns:1fr}
@media (max-width:900px){ .page-hero .wrap{grid-template-columns:1fr} }

/* ---- 2. THE IDEA (pressure) --------------------------------------------- */
.idea-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:center}
@media (max-width:900px){ .idea-grid{grid-template-columns:1fr} }
.lines{font-family:var(--f-display); font-stretch:125%; font-weight:800; text-transform:uppercase; line-height:1.05;
  font-size:clamp(1.35rem, 2.6vw, 2.1rem)}
.lines li + li{margin-top:.28em}
.lines .quiet{color:#646E73}
.lines .turn{margin-top:1em; font-size:1.15em}
.lines .turn em{font-style:normal; background:var(--green); padding:0 .14em}
.idea-copy{margin-top:28px}

.receipt{
  background:#fff; color:var(--ink); max-width:440px; margin-inline:auto; width:100%;
  padding:30px 28px 26px; box-shadow:0 1px 0 var(--line), 0 24px 48px -24px rgba(10,24,33,.35);
  transform:rotate(1.2deg); font-variant-numeric:tabular-nums; position:relative;
}
.receipt::after{content:""; position:absolute; left:0; right:0; bottom:-10px; height:10px;
  background:linear-gradient(-45deg, transparent 6px, #fff 0) 0 0/12px 10px, linear-gradient(45deg, transparent 6px, #fff 0) 0 0/12px 10px;
  background-repeat:repeat-x}
.receipt-head{display:flex; justify-content:space-between; align-items:baseline; border-bottom:2px dashed var(--ink); padding-bottom:12px; margin-bottom:8px}
.receipt-head b{font-family:var(--f-display); font-stretch:125%; font-weight:900; letter-spacing:.02em; font-size:1rem}
.receipt-head span{font-size:.8125rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em}
.receipt li{display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px dotted #B9B4AA; font-size:.95rem; text-transform:uppercase; letter-spacing:.03em}
.receipt li b{font-weight:700}
.receipt li.zero b{color:#B3261E}
.receipt-total{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-top:16px; padding-top:14px; border-top:2px dashed var(--ink)}
.receipt-total span{font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700}
.receipt-total b{font-family:var(--f-display); font-stretch:125%; font-weight:900; text-transform:uppercase; font-size:clamp(1.5rem,3vw,2rem); line-height:.9; text-align:right}
.receipt-foot{margin-top:18px; font-size:.8125rem; text-align:center; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

/* ---- 3. THE GOOD STUFF --------------------------------------------------- */
.good-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(40px,6vw,96px); align-items:end}
@media (max-width:900px){ .good-grid{grid-template-columns:1fr} }
.good-grid h2 .hl{display:block}
.bricks{display:flex; flex-direction:column-reverse; gap:6px; margin-top:clamp(28px,4vw,48px)}
.brick{
  align-self:flex-start; background:var(--green); color:var(--ink);
  font-family:var(--f-display); font-stretch:125%; font-weight:900; text-transform:uppercase;
  font-size:clamp(1rem, 2.1vw, 1.6rem); line-height:1; padding:.62em .8em; position:relative;
}
.brick::before{content:"+"; margin-right:.5em; opacity:.55}
.brick:nth-child(2){margin-left:6%}
.brick:nth-child(3){margin-left:2%}
.brick:nth-child(4){margin-left:10%}
.brick:nth-child(5){margin-left:4%}
.brick:nth-child(6){margin-left:12%}
@media (prefers-reduced-motion:no-preference){
  .js .brick{opacity:0; transform:translateY(-40px); transition:opacity .45s ease, transform .55s cubic-bezier(.3,1.4,.5,1)}
  .js .bricks.in .brick{opacity:1; transform:none}
  .js .bricks.in .brick:nth-child(1){transition-delay:0s}
  .js .bricks.in .brick:nth-child(2){transition-delay:.15s}
  .js .bricks.in .brick:nth-child(3){transition-delay:.3s}
  .js .bricks.in .brick:nth-child(4){transition-delay:.45s}
  .js .bricks.in .brick:nth-child(5){transition-delay:.6s}
  .js .bricks.in .brick:nth-child(6){transition-delay:.75s}
}
.good-media{position:relative}
.good-media img{width:100%; aspect-ratio:4/5; object-fit:cover}
.good-media figcaption{margin-top:12px; font-size:var(--fs-small); color:var(--muted-on-ink)}
.good-close{margin-top:clamp(48px,6vw,80px); padding-top:clamp(28px,4vw,40px); border-top:1px solid var(--ink-line);
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:32px; align-items:end}
.good-close .big{font-family:var(--f-display); font-stretch:125%; font-weight:900; text-transform:uppercase; font-size:clamp(1.5rem,3.2vw,2.6rem); line-height:1}
@media (max-width:900px){ .good-close{grid-template-columns:1fr} }

/* ---- 4. ONE THING (routes) ---------------------------------------------- */
.routes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:900px){ .routes{grid-template-columns:1fr} .route{min-height:0} .route .num{padding-bottom:20px} }
.route{
  position:relative; background:var(--off); padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; min-height:300px;
  border:2px solid transparent; transition:border-color .18s ease, transform .18s ease;
}
.route:hover{border-color:var(--ink)}
.route:focus-within{border-color:var(--blue)}
.route .num{font-family:var(--f-display); font-stretch:125%; font-weight:900; font-size:.95rem; color:var(--muted); margin-bottom:auto; padding-bottom:40px}
.route h3{font-size:clamp(1.5rem,2.4vw,2rem)}
.route h3 a{text-decoration:none}
.route h3 a::after{content:""; position:absolute; inset:0}
.route p{margin-top:14px; color:var(--muted)}
.route .go{margin-top:24px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.875rem; color:var(--blue)}
.route--feature{background:var(--ink); color:var(--off)}
.route--feature .num{color:var(--green)}
.route--feature p{color:var(--muted-on-ink)}
.route--feature .go{color:var(--green)}
.route--feature:focus-within{border-color:var(--green)}

/* ---- 5. STORIES ---------------------------------------------------------- */
.stories-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr); gap:16px; align-items:stretch}
@media (max-width:1000px){ .stories-grid{grid-template-columns:1fr 1fr} .stories-grid .story-feature{grid-column:1/-1} }
@media (max-width:600px){ .stories-grid{grid-template-columns:1fr} }
.clip{background:var(--ink); color:var(--off); display:flex; flex-direction:column; align-self:start}
.clip video{width:100%; aspect-ratio:9/16; object-fit:cover; background:#000}
.clip .clip-body{padding:20px 20px 24px}
.clip blockquote{font-weight:600; font-size:1.0625rem; line-height:1.4}
.clip cite{display:block; margin-top:12px; font-style:normal; font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-on-ink)}
.story-feature{position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:420px; color:var(--off); overflow:hidden; background:var(--ink)}
.story-feature img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.story-feature::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,24,33,.05) 25%, rgba(10,24,33,.92) 100%)}
.story-feature .sf-body{position:relative; z-index:2; padding:clamp(22px,3vw,34px)}
.story-feature h3{font-size:clamp(1.6rem,3vw,2.4rem)}
.story-feature p{margin-top:12px; color:#E1E6E8}
.story-feature a.cover{text-decoration:none}
.story-feature a.cover::after{content:""; position:absolute; inset:0; z-index:3}
.story-feature:focus-within{outline:3px solid var(--green); outline-offset:3px}
.story-feature .go{display:inline-block; margin-top:16px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.875rem; color:var(--green)}
.story-row{display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; justify-content:space-between; margin-top:28px}
.consent-note{font-size:var(--fs-small); color:var(--muted); max-width:56ch}

/* ---- 6. WHERE SPEAK SHOWS UP -------------------------------------------- */
.places{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media (max-width:1000px){ .places{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .places{grid-template-columns:1fr} }
.place{background:var(--ink-2); display:flex; flex-direction:column}
.place img{width:100%; aspect-ratio:4/3; object-fit:cover}
.place .p-body{padding:20px 20px 24px}
.place h3{font-size:1.2rem}
.place p{margin-top:10px; color:var(--muted-on-ink); font-size:var(--fs-small)}
.place a{margin-top:14px}

/* ---- 7. GET INVOLVED (green band) --------------------------------------- */
.count{text-align:left}
.count h2{font-size:clamp(2.4rem, 7.2vw, 6.4rem); line-height:.88}
.count .btn-row{margin-top:36px}
.count .fine{color:var(--ink); margin-top:16px; opacity:.8}
.count .btn--ghost-ink:hover{--bg:var(--ink); --fg:var(--green)}
.count .btn{--focus:var(--ink)}
.bg-green{--focus:var(--ink)}

/* ---- Generic content blocks --------------------------------------------- */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,6vw,96px); align-items:start}
@media (max-width:900px){ .split{grid-template-columns:1fr} }
.big-quote{font-family:var(--f-display); font-stretch:125%; font-weight:900; text-transform:uppercase; font-size:clamp(1.5rem,3.4vw,2.8rem); line-height:1}
.steps{counter-reset:s; border-top:1px solid var(--line)}
.on-ink .steps{border-color:var(--ink-line)}
.steps li{counter-increment:s; display:grid; grid-template-columns:72px 1fr; gap:16px; padding:26px 0; border-bottom:1px solid var(--line)}
.on-ink .steps li{border-color:var(--ink-line)}
.steps li::before{content:counter(s, decimal-leading-zero); font-family:var(--f-display); font-stretch:125%; font-weight:900; font-size:1.6rem; color:var(--blue); line-height:1}
.on-ink .steps li::before{color:var(--green)}
.steps h3{font-size:1.15rem; margin-bottom:8px}
.steps p{color:var(--muted)}
.on-ink .steps p{color:var(--muted-on-ink)}
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){ .cards, .cards--2{grid-template-columns:1fr} }
.card{background:#fff; padding:clamp(22px,2.6vw,32px); border:1px solid var(--line); position:relative; display:flex; flex-direction:column}
.bg-cream .card{border-color:transparent}
.on-ink .card{background:var(--ink-2); border-color:var(--ink-line)}
.card h3{font-size:1.2rem}
.card p{margin-top:10px; color:var(--muted)}
.on-ink .card p{color:var(--muted-on-ink)}
.card .go{margin-top:auto; padding-top:18px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.8125rem; color:var(--blue)}
.on-ink .card .go{color:var(--green)}
a.card{text-decoration:none; transition:border-color .18s ease}
a.card:hover{border-color:var(--ink)}
.on-ink a.card:hover{border-color:var(--green)}
.topic-list{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line)}
@media (max-width:900px){ .topic-list{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .topic-list{grid-template-columns:1fr} }
.topic-list a{display:flex; flex-direction:column; gap:6px; padding:24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-decoration:none; background:#fff; min-height:132px; transition:background-color .15s ease}
.topic-list a:hover{background:var(--green)}
.topic-list b{font-family:var(--f-display); font-stretch:125%; font-weight:900; text-transform:uppercase; font-size:1.15rem; line-height:1.05}
.topic-list span{color:var(--muted); font-size:var(--fs-small)}
.topic-list a:hover span{color:var(--ink)}
.photo{width:100%; object-fit:cover; aspect-ratio:4/3}
.photo--tall{aspect-ratio:4/5}
.quote-block{border-left:4px solid var(--green); padding-left:22px}
.quote-block blockquote{font-weight:600; font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.4}
.quote-block cite{display:block; margin-top:12px; font-style:normal; font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.on-ink .quote-block cite{color:var(--muted-on-ink)}
.schedule{border-top:1px solid var(--line)}
.schedule li{display:grid; grid-template-columns:64px 1fr; gap:16px; padding:20px 0; border-bottom:1px solid var(--line)}
.schedule .n{font-family:var(--f-display); font-stretch:125%; font-weight:900; font-size:1.3rem; color:var(--blue)}
.schedule h3{font-size:1.05rem}
.schedule p{color:var(--muted); margin-top:6px; font-size:var(--fs-small)}
.stat-callout{display:flex; gap:24px; align-items:flex-end; flex-wrap:wrap; padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:32px 0}
.stat-callout .n{font-family:var(--f-display); font-stretch:125%; font-weight:900; font-size:clamp(4rem,10vw,7.5rem); line-height:.8}
.stat-callout p{max-width:34ch; color:var(--muted); font-size:var(--fs-small)}

/* ---- Urgent support panel ---------------------------------------------- */
.urgent{background:#fff; border:2px solid var(--ink); padding:clamp(24px,3vw,40px)}
.urgent h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.urgent > p{margin-top:14px; color:var(--muted)}
.urgent-nums{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:24px}
@media (max-width:900px){ .urgent-nums{grid-template-columns:1fr 1fr} }
@media (max-width:440px){ .urgent-nums{grid-template-columns:1fr} }
.urgent-nums a{display:flex; flex-direction:column; gap:4px; padding:16px 18px; background:var(--off); border:1px solid var(--line); text-decoration:none; min-height:96px}
.urgent-nums a:hover{border-color:var(--ink)}
.urgent-nums b{font-family:var(--f-display); font-stretch:125%; font-weight:900; font-size:1.5rem; line-height:1}
.urgent-nums span{font-size:var(--fs-small); color:var(--muted)}

/* ---- Forms --------------------------------------------------------------- */
.form-panel{background:var(--ink); color:var(--off); padding:clamp(26px,4vw,56px); --focus:var(--green)}
.form-panel h2{font-size:clamp(1.8rem,4vw,3rem)}
.form-panel > p{margin-top:14px; color:var(--muted-on-ink)}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; margin-top:32px}
@media (max-width:640px){ .fgrid{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:.8125rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#D3D9DC}
.field label .opt{color:var(--muted-on-ink); text-transform:none; letter-spacing:0; font-weight:400}
.field input,.field select,.field textarea{
  font:inherit; font-size:1rem; color:var(--off); background:var(--ink-2);
  border:1px solid #3A4C56; border-radius:var(--radius); padding:14px 14px; min-height:52px; width:100%;
}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--off) 50%),linear-gradient(135deg,var(--off) 50%,transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat; padding-right:40px}
.field textarea{min-height:130px; resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--green); outline:2px solid var(--green); outline-offset:0}
.form-foot{display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; margin-top:28px}
.form-panel .fine{color:var(--muted-on-ink)}
.form-panel .fine a{color:var(--off)}
.form-status{margin-top:18px; font-weight:600; min-height:1.6em}
.form-status.ok{color:var(--green)}
.form-status.err{color:#FFB4A9}
.hp{position:absolute!important; left:-9999px!important}

/* ---- Article (resources) ------------------------------------------------- */
.article{padding-block:clamp(48px,7vw,96px)}
.article .wrap{max-width:820px}
.article .label, .article .eyebrow{color:var(--muted); margin-bottom:20px}
.article .eyebrow{font-size:var(--fs-label); font-weight:600; text-transform:uppercase; letter-spacing:.14em; display:inline-flex; align-items:center; gap:10px}
.article .eyebrow::before{content:""; width:20px; height:2px; background:currentColor}
.article h1{font-size:clamp(2.1rem,5.4vw,3.8rem); line-height:.95; margin-bottom:28px}
.article h2{font-size:clamp(1.25rem,2.4vw,1.6rem); line-height:1.1; margin:44px 0 14px}
.article p{font-size:1.125rem; margin-top:0; margin-bottom:18px}
.article p + p{margin-top:0}
.article .callout{font-family:var(--f-display); font-stretch:125%; font-weight:900; text-transform:uppercase; font-size:clamp(1.15rem,2.2vw,1.55rem); line-height:1.15;
  margin:36px 0; padding:26px 28px; background:var(--ink); color:var(--off); border-left:6px solid var(--green)}
.article .btn{margin:6px 10px 6px 0}
.article .btn:not(.btn-outline){--bg:var(--blue); --fg:#fff; --bd:var(--blue)}
.article .btn.btn-outline{--bg:transparent; --fg:var(--ink); --bd:var(--ink)}
.article .btn.btn-outline:hover{--bg:var(--ink); --fg:var(--off)}
.article .cta-block{margin-top:56px; padding:28px; background:var(--cream)}
.article .cta-block p{font-weight:600}
.article .related-block{margin-top:56px}
.article .hub-grid{display:grid; grid-template-columns:1fr; gap:12px; margin-top:20px}
@media (min-width:720px){ .article .hub-grid{grid-template-columns:1fr 1fr} }
.article .hub-card{display:block; padding:22px; background:#fff; border:1px solid var(--line); text-decoration:none; transition:border-color .15s ease}
.article .hub-card:hover{border-color:var(--ink)}
.article .hub-card h3{font-size:1.05rem}
.article .hub-card p{font-size:var(--fs-small); color:var(--muted); margin:8px 0 0}
.article .video-frame{position:relative; aspect-ratio:16/9; margin:8px 0 28px; background:#000}
.article .video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.article .note{background:#fff; border:1px solid var(--line); padding:20px 22px; margin:28px 0; font-size:var(--fs-small)}
.article .note p{font-size:var(--fs-small); margin:0}

/* ---- Footer -------------------------------------------------------------- */
.site-footer{background:var(--ink); color:var(--off); --focus:var(--green); padding-top:clamp(56px,7vw,96px)}
.foot-urgent{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 40px; align-items:center;
  border:1px solid var(--ink-line); padding:clamp(20px,3vw,32px); margin-bottom:clamp(48px,6vw,72px)}
@media (max-width:900px){ .foot-urgent{grid-template-columns:1fr} }
.foot-urgent h2{font-size:clamp(1.2rem,2.2vw,1.6rem)}
.foot-urgent p{margin-top:8px; color:var(--muted-on-ink); font-size:var(--fs-small)}
.foot-nums{display:flex; flex-wrap:wrap; gap:10px}
@media (max-width:900px){ .foot-nums{display:grid; grid-template-columns:1fr 1fr} .foot-nums a{min-width:0} }
.foot-nums a{display:flex; flex-direction:column; padding:12px 16px; border:1px solid var(--ink-line); text-decoration:none; min-width:132px}
.foot-nums a:hover{border-color:var(--green)}
.foot-nums b{font-family:var(--f-display); font-stretch:125%; font-weight:900; font-size:1.25rem; line-height:1.05}
.foot-nums span{font-size:.75rem; color:var(--muted-on-ink); letter-spacing:.06em; text-transform:uppercase}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:40px}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} }
.foot-brand img{width:170px; height:auto}
.foot-brand p{margin-top:20px; color:var(--muted-on-ink); font-size:var(--fs-small); max-width:34ch}
.foot-brand .camp{margin-top:18px; font-family:var(--f-display); font-stretch:125%; font-weight:900; text-transform:uppercase; color:var(--green); font-size:1.05rem}
.foot-col h3{font-family:var(--f-body); font-stretch:100%; font-size:.75rem; letter-spacing:.16em; font-weight:600; color:var(--muted-on-ink); margin-bottom:14px}
.foot-col a{display:block; padding:6px 0; text-decoration:none; font-size:.975rem}
.foot-col a:hover{color:var(--green)}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; margin-top:56px; padding:24px 0 32px; border-top:1px solid var(--ink-line); font-size:.8125rem; color:var(--muted-on-ink)}
.foot-bottom a{color:var(--off)}
.foot-bottom nav{display:flex; gap:20px; flex-wrap:wrap}

/* ---- Sticky mobile CTA --------------------------------------------------- */
.sticky-cta{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:900; display:none;
  background:var(--green); color:var(--ink); text-decoration:none; text-align:center;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.875rem;
  padding:16px 18px; box-shadow:0 12px 28px -8px rgba(10,24,33,.5);
  transform:translateY(140%); transition:transform .25s ease;
}
.sticky-cta.show{transform:none}
@media (max-width:767px){ .sticky-cta{display:block} body.has-sticky{padding-bottom:0} }

/* ---- Reveal on scroll ---------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
  .js [data-reveal].in{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
}

/* ---- Print --------------------------------------------------------------- */
@media print{ .site-header,.urgent-strip,.sticky-cta,.mobile-nav{display:none!important} body{background:#fff} }

/* ---- Utilities ----------------------------------------------------------- */
.mt-s{margin-top:12px}.mt-m{margin-top:24px}.mt-l{margin-top:clamp(28px,4vw,44px)}
.mb-m{margin-bottom:22px}

/* ---- Partners (Ibiza Revival x SPEAK) ------------------------------------ */
.partner-lockup{display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-bottom:26px}
.partner-lockup img{height:24px; width:auto}
.partner-name{font-family:var(--f-display); font-stretch:125%; font-weight:900; text-transform:uppercase; font-size:1.1rem; letter-spacing:.04em; line-height:1}
.partner-lockup .x{color:var(--green); font-size:1.4rem; line-height:1; font-weight:700}
.vinyl-wrap{display:flex; flex-direction:column; align-items:center; gap:18px; justify-self:center; width:100%; max-width:440px}
.vinyl{width:100%; aspect-ratio:1/1; border-radius:50%; position:relative;
  background:
    conic-gradient(from 20deg, rgba(255,255,255,0) 0 12%, rgba(255,255,255,.10) 16%, rgba(255,255,255,0) 22% 62%, rgba(255,255,255,.08) 66%, rgba(255,255,255,0) 72%),
    repeating-radial-gradient(circle at 50% 50%, #050D12 0 1.5px, #13232C 1.5px 3.5px);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6), inset 0 0 0 6px #050D12}
.vinyl-label{position:absolute; inset:33%; border-radius:50%; background:var(--green); display:grid; place-items:center}
.vinyl-label img{width:52%; height:auto}
.vinyl-label::after{content:""; position:absolute; width:7%; aspect-ratio:1/1; border-radius:50%; background:var(--ink)}
@media (prefers-reduced-motion:no-preference){ .vinyl{animation:spin 9s linear infinite} }
@keyframes spin{to{transform:rotate(360deg)}}
.on-air{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--off)}
.on-air .dot{width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(204,255,0,.18)}
@media (max-width:900px){ .vinyl-wrap{max-width:300px; order:2} }
.routes--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){ .routes--2{grid-template-columns:1fr} }
.route--feature.on-ink, .bg-ink .route--feature{background:var(--ink-2); border-color:var(--ink-line)}
.bg-ink .route--feature:hover{border-color:var(--green)}
.form-panel--raised{background:var(--ink-2); border:1px solid var(--ink-line)}
.form-panel--raised .field input,.form-panel--raised .field select,.form-panel--raised .field textarea{background:var(--ink)}
.form-panel h3.h2{font-size:clamp(1.6rem,3.6vw,2.6rem)}
.field.choice{border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px 14px}
.field.choice legend{font-size:.8125rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#D3D9DC; margin-bottom:10px; width:100%}
.field.choice label{display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:10px 16px; border:1px solid #3A4C56; border-radius:var(--radius); cursor:pointer; text-transform:none; letter-spacing:0; font-size:1rem; font-weight:500; color:var(--off)}
.field.choice label:has(input:checked){border-color:var(--green); background:rgba(204,255,0,.08)}
.field.choice input{accent-color:var(--green); width:18px; height:18px; min-height:0}
.ticket li b{text-align:right}
@media (max-width:1180px) and (min-width:1024px){ .nav a{padding:12px 10px; letter-spacing:.06em} .header-cta{padding:12px 14px} }
.partner-hero .wrap > div:first-child{container-type:inline-size; min-width:0}
@supports (font-size:1cqi){ .partner-hero h1{font-size:min(10.8cqi, 5.6rem)} }
.field.choice{flex-direction:row}
.route--action{border-color:var(--green)!important}
.route--action .btn{align-self:flex-start}
.wa-num{margin-top:14px; font-size:var(--fs-small); color:var(--muted-on-ink)}
.wa-num b{color:var(--off); font-variant-numeric:tabular-nums; user-select:all; letter-spacing:.02em}
.tandem{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,5vw,72px); align-items:start; padding-top:clamp(40px,5vw,64px); border-top:1px solid var(--ink-line)}
@media (max-width:900px){ .tandem{grid-template-columns:1fr} }
.tandem h3.h2{font-size:clamp(1.9rem,4.4vw,3.4rem); line-height:.95}
.fgrid--1{grid-template-columns:1fr}
.seats{max-width:440px}
.seats-head{display:flex; align-items:baseline; gap:12px}
.seats-head b{font-family:var(--f-display); font-stretch:125%; font-weight:900; font-size:clamp(2.6rem,6vw,4rem); line-height:.9; color:var(--green)}
.seats-head span{font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:.8125rem; color:var(--muted-on-ink)}
.seats-bar{margin-top:12px; height:12px; background:var(--ink-2); border:1px solid var(--ink-line)}
.seats-bar span{display:block; height:100%; background:var(--green)}

/* ---- Partners dropdown (header) ----------------------------------------- */
.nav-drop{position:relative}
.nav-drop-btn{display:inline-flex; align-items:center; gap:8px; color:var(--off); font-weight:600; font-size:.875rem; letter-spacing:.08em; text-transform:uppercase; padding:12px 14px; border-radius:var(--radius)}
.nav-drop-btn:hover,.nav-drop-btn[aria-expanded="true"]{color:var(--green)}
.nav-drop-btn.is-current{color:var(--green); box-shadow:inset 0 -2px 0 var(--green)}
.nav-drop-btn .car{width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .15s ease}
.nav-drop-btn[aria-expanded="true"] .car{transform:translateY(2px) rotate(-135deg)}
.nav-drop-menu{position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); width:320px; background:var(--ink-2); border:1px solid var(--ink-line); box-shadow:0 24px 48px -16px rgba(0,0,0,.6); padding:8px; z-index:20}
.nav-drop-menu[hidden]{display:none}
.nav .nav-drop-menu a{display:flex; flex-direction:column; gap:3px; padding:14px 14px; text-transform:none; letter-spacing:0; font-size:.95rem; border-radius:var(--radius)}
.nav .nav-drop-menu a b{font-family:var(--f-display); font-stretch:125%; font-weight:900; text-transform:uppercase; font-size:.95rem; color:var(--off)}
.nav .nav-drop-menu a span{color:var(--muted-on-ink); font-size:.8125rem; font-weight:500}
.nav .nav-drop-menu a:hover,.nav .nav-drop-menu a[aria-current="page"]{background:var(--ink); box-shadow:none}
.nav .nav-drop-menu a:hover b,.nav .nav-drop-menu a[aria-current="page"] b{color:var(--green)}
.nav .nav-drop-menu a.all{flex-direction:row; border-top:1px solid var(--ink-line); margin-top:6px; padding-top:14px; font-weight:700; font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--green)}
.m-subs{display:flex; flex-direction:column; padding:4px 0 10px 18px; border-bottom:1px solid var(--ink-line)}
.mobile-nav a.m-sub{color:var(--muted-on-ink); text-decoration:none; font-weight:600; font-size:1rem; padding:10px 0; letter-spacing:.02em}
.mobile-nav a.m-sub[aria-current="page"],.mobile-nav a.m-sub:hover{color:var(--green)}
.mobile-nav a.m-link + .m-subs{margin-top:-1px}

/* ---- Money Mates --------------------------------------------------------- */
.mm-lockup{display:inline-flex; align-items:center; gap:10px}
.mm-lockup img{height:30px; width:auto}
.ladder-wrap{display:flex; flex-direction:column; align-items:center; gap:18px; width:100%; max-width:480px; justify-self:center}
.ladder{width:100%; height:auto; overflow:visible}
.ladder-steps rect{fill:var(--ink-2); stroke:var(--ink-line); stroke-width:2}
.ladder-steps rect:last-child{fill:var(--green); stroke:var(--green)}
.ladder-nums text{fill:var(--muted-on-ink); font-family:var(--f-display); font-stretch:125%; font-weight:900; font-size:20px; text-anchor:middle}
.ladder-nums text:last-child{fill:var(--ink)}
.ladder-house path{fill:none; stroke:var(--green); stroke-width:6; stroke-linejoin:round}
.ladder-house .door{fill:var(--green)}
@media (prefers-reduced-motion:no-preference){
  .js .ladder-steps rect{transform-box:fill-box; transform-origin:bottom; transform:scaleY(0); animation:grow .6s cubic-bezier(.2,.7,.2,1) forwards}
  .js .ladder-steps rect:nth-child(2){animation-delay:.12s} .js .ladder-steps rect:nth-child(3){animation-delay:.24s}
  .js .ladder-steps rect:nth-child(4){animation-delay:.36s} .js .ladder-steps rect:nth-child(5){animation-delay:.48s}
  .js .ladder-house{opacity:0; animation:pileIn .5s ease .8s forwards}
}
@keyframes grow{to{transform:scaleY(1)}}
@media (max-width:900px){ .ladder-wrap{max-width:340px; order:2} }
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){ .cards--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .cards--4{grid-template-columns:1fr} }
.card a.go,.card .go{text-decoration:none}
.card a.go:hover{text-decoration:underline}
.picker{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:16px; align-items:start}
@media (max-width:900px){ .picker{grid-template-columns:1fr} }
.pick-list{display:flex; flex-direction:column; gap:8px}
.pick{display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; padding:18px 20px; min-height:60px; background:#fff; border:2px solid var(--line); font-family:var(--f-display); font-stretch:125%; font-weight:900; text-transform:uppercase; font-size:1rem; line-height:1.1; color:var(--ink); border-radius:var(--radius)}
.pick::after{content:"→"; font-family:var(--f-body); font-weight:700; transition:transform .15s ease}
.pick:hover{border-color:var(--ink)}
.pick[aria-pressed="true"]{background:var(--ink); color:var(--off); border-color:var(--ink)}
.pick[aria-pressed="true"]::after{color:var(--green); transform:translateX(4px)}
.pick-panels{background:var(--ink); color:var(--off); padding:clamp(24px,3vw,40px); min-height:100%; --focus:var(--green)}
.pick-panel h3{font-size:clamp(1.3rem,2.4vw,1.8rem); color:var(--green)}
.pick-panel p{margin-top:12px; color:#E1E6E8}
.pick-panel .textlink{margin-top:20px}
.pick-panel .textlink:hover{color:var(--green)}
.js .pick-panel{display:none}
.js .pick-panel.on{display:block}
.pick-panel + .pick-panel{margin-top:28px}
.js .pick-panel + .pick-panel{margin-top:0}
.pick-hint{display:none; color:var(--muted-on-ink); font-weight:600}
.js .pick-hint{display:block}
.js .pick-panels.has-pick .pick-hint{display:none}
.note-ink{border-left:4px solid var(--green); background:var(--ink-2); padding:20px 24px; max-width:820px; font-size:var(--fs-small); color:#D3D9DC}
.note-ink p{max-width:none}
.mm-badge{display:inline-flex; align-items:center; gap:16px; background:var(--ink); color:var(--off); padding:18px 24px}
.mm-badge img{height:56px; width:auto}
.mm-badge span{font-family:var(--f-display); font-stretch:125%; font-weight:900; text-transform:uppercase; font-size:1.3rem}

/* ---- Partners hub -------------------------------------------------------- */
.partner-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:860px){ .partner-cards{grid-template-columns:1fr} }
.partner-card{display:flex; flex-direction:column; background:#fff; border:2px solid transparent; text-decoration:none; transition:border-color .18s ease}
.partner-card:hover{border-color:var(--ink)}
.pc-top{display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:44px 28px; background:var(--ink); color:var(--off)}
.pc-top .x{color:var(--green); font-size:1.4rem; font-weight:700}
.pc-top img{height:20px; width:auto}
.pc-top .mm-lockup img{height:32px}
.pc-body{padding:28px; display:flex; flex-direction:column; gap:10px; flex:1}
.pc-body .label{color:var(--muted)}
.pc-body h2{font-size:clamp(1.3rem,2.4vw,1.8rem)}
.pc-body p{color:var(--muted)}
.pc-body .go{margin-top:auto; padding-top:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.8125rem; color:var(--blue)}
.partner-cta{max-width:640px}
.split > *, .idea-grid > *, .good-grid > *{min-width:0}
.btn{max-width:100%}
@media (max-width:420px){ h2, .h2{font-size:1.75rem} .count h2{font-size:2.1rem} }
.fit-wrap{container-type:inline-size}
@supports (font-size:1cqi){ .fit-wrap h2{font-size:min(var(--fs-h2), 7.4cqi)} }
.field.consent label{display:flex; gap:12px; align-items:flex-start; text-transform:none; letter-spacing:0; font-size:1rem; font-weight:500; color:var(--off); cursor:pointer; line-height:1.45}
.field.consent input{width:22px; height:22px; min-height:0; flex-shrink:0; margin-top:1px; accent-color:var(--green)}
.article .mm-refer{display:flex; gap:24px; align-items:flex-start; margin-top:56px; padding:28px; background:var(--ink); color:var(--off); --focus:var(--green)}
.article .mm-refer img{width:56px; height:auto; flex-shrink:0}
.article .mm-refer .label{color:var(--green); margin-bottom:10px}
.article .mm-refer h2{margin:0 0 10px; color:var(--off)}
.article .mm-refer p{color:#D3D9DC}
.article .mm-refer .btn{--bg:var(--green); --fg:var(--ink); --bd:var(--green); margin-top:6px}
@media (max-width:560px){ .article .mm-refer{flex-direction:column} }
.split .fgrid{grid-template-columns:1fr}
.partner-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){ .partner-cards{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .partner-cards{grid-template-columns:1fr} }

/* ---- Meet the Experts ---------------------------------------------------- */
.ex-intro{color:#D3D9DC}
.ex-hero-side{display:flex; flex-direction:column; gap:24px; min-width:0}
.lineup{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; align-items:end}
.lineup .lu{background:var(--ink-2); border:1px solid var(--ink-line); aspect-ratio:3/4; display:flex; align-items:flex-end; overflow:hidden}
.lineup .lu:nth-child(odd){transform:translateY(-14px)}
.sil{width:100%; height:auto; display:block}
.sil circle,.sil path{fill:#22343E}
.sil .redact{fill:var(--green)}
.countdown{border:1px solid var(--ink-line); background:var(--ink-2); padding:22px 24px}
.cd-title{font-family:var(--f-display); font-stretch:125%; font-weight:900; text-transform:uppercase; font-size:clamp(1rem,1.8vw,1.25rem); line-height:1.1; color:var(--green)}
.cd-units{display:flex; gap:12px; margin-top:16px}
.cd-units span{flex:1; display:flex; flex-direction:column; gap:4px; font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-on-ink)}
.cd-units b{font-family:var(--f-display); font-stretch:125%; font-weight:900; font-size:clamp(2rem,4vw,3rem); line-height:.9; color:var(--off); font-variant-numeric:tabular-nums; letter-spacing:0}
.ex-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:1000px){ .ex-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .ex-grid{grid-template-columns:1fr} }
.ex-card{background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; transition:border-color .18s ease, transform .18s ease}
.ex-card:hover{border-color:var(--ink)}
@media (prefers-reduced-motion:no-preference){ .ex-card:hover{transform:translateY(-3px)} }
.ex-media{position:relative; background:var(--cream); aspect-ratio:16/10; display:flex; align-items:flex-end; justify-content:center; overflow:hidden}
.ex-media .sil{width:58%; max-width:220px}
.ex-media .sil circle,.ex-media .sil path{fill:var(--ink)}
.ex-media img{width:100%; height:100%; object-fit:cover}
.ex-num{position:absolute; top:14px; left:16px; font-family:var(--f-display); font-stretch:125%; font-weight:900; font-size:1rem; color:var(--ink)}
.ex-body{padding:24px 24px 28px; display:flex; flex-direction:column; gap:12px; flex:1}
.ex-body .label{color:var(--muted)}
.ex-body h3{font-size:clamp(1.25rem,2vw,1.55rem); line-height:1.02}
.ex-lock{display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--ink); color:var(--green); padding:7px 10px}
.lock{width:10px; height:8px; background:var(--green); position:relative; margin-top:4px}
.lock::before{content:""; position:absolute; left:1px; top:-6px; width:8px; height:7px; border:2px solid var(--green); border-bottom:0; border-radius:5px 5px 0 0; box-sizing:border-box}
.ex-name{font-family:var(--f-display); font-stretch:125%; font-weight:900; text-transform:uppercase; font-size:1.05rem; color:var(--blue)}
.ex-desc{color:var(--muted); font-size:var(--fs-small)}
.ex-learn{margin-top:auto; border-top:1px solid var(--line); padding-top:14px}
.ex-k{font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin-bottom:6px}
.ex-learn p:last-child{font-size:var(--fs-small); font-weight:600}
.ex-safety{font-size:.8125rem; color:var(--muted); background:var(--off); border-left:3px solid var(--blue); padding:10px 12px}
.ex-banner{grid-column:span 2; background:var(--ink); color:var(--off); padding:clamp(28px,4vw,48px); display:flex; flex-direction:column; justify-content:center; gap:14px}
.ex-banner .big{font-family:var(--f-display); font-stretch:125%; font-weight:900; text-transform:uppercase; font-size:clamp(1.8rem,3.6vw,3rem); line-height:.95}
.ex-banner-date{font-family:var(--f-display); font-stretch:125%; font-weight:900; text-transform:uppercase; font-size:clamp(1.1rem,1.8vw,1.4rem)}
@media (max-width:1000px){ .ex-banner{grid-column:span 1} }
@media (max-width:900px){ .ex-hero-side{order:2} }