/* ============================================================
   SELution / site
   Bright and play-forward, but built for a ministry to read
   closely. Fraunces (soft serif, optical sizing, SOFT + WONK
   axes) against Lexend (a body face designed around reading
   proficiency). One signature: a four-strand ribbon at three
   scales, a single squared corner on every container, and the
   word "play" allowed to be quirky exactly once.
   Light only, on purpose: this is the warm, playful sibling to
   the dark institutional regional brief.
   ============================================================ */

:root{
  color-scheme: light;

  /* brand primitives: flags, identity, fills only */
  --green:#12924c; --gold:#d99b06; --red:#e0473a; --blue:#2b8fc4;
  /* text-safe inks, all >= 5.5:1 on --paper */
  --green-ink:#0b6b38; --gold-ink:#8a5a00; --red-ink:#a52b21; --blue-ink:#1a5f85;

  --action:#0b6b38; --action-hover:#085229; --action-active:#06421f;
  --wa:#1fb457; --wa-ink:#083d1e;

  --paper:#fbf8f1; --surface:#fffdf8; --surface-sunken:#f4efe4;
  --hairline:#e8e1d3; --hairline-strong:#d8cfbc;

  --ink:#1c1a17; --ink-2:#5c554a; --ink-on-fill:#fbf8f1;
  --focus:#1a5f85;

  --tint-green:#e6f1ea; --tint-green:color-mix(in oklab,var(--green) 11%,var(--paper));
  --tint-gold:#f8eed6;  --tint-gold: color-mix(in oklab,var(--gold)  13%,var(--paper));
  --tint-red:#fae7e3;   --tint-red:  color-mix(in oklab,var(--red)   11%,var(--paper));
  --tint-blue:#e4eff7;  --tint-blue: color-mix(in oklab,var(--blue)  11%,var(--paper));

  --shadow-1:0 1px 2px -1px rgb(60 44 20 / .10), 0 2px 6px -2px rgb(60 44 20 / .08);
  --shadow-2:0 2px 4px -2px rgb(60 44 20 / .12), 0 12px 24px -8px rgb(60 44 20 / .14);
  --shadow-3:0 4px 8px -4px rgb(60 44 20 / .14), 0 24px 48px -12px rgb(60 44 20 / .18);

  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;

  --step-h1:    clamp(2.5rem,   1.5rem    + 4.444vw, 5.5rem);
  --step-h2:    clamp(1.875rem, 1.4167rem + 2.037vw, 3.25rem);
  --step-h3:    clamp(1.375rem, 1.2083rem + 0.741vw, 1.875rem);
  --step-h4:    clamp(1.125rem, 1.0625rem + 0.278vw, 1.3125rem);
  --step-lead:  clamp(1.1875rem,1.0833rem + 0.463vw, 1.5rem);
  --step-body:  clamp(1.0625rem,1.0208rem + 0.185vw, 1.1875rem);
  --step-small: clamp(0.875rem, 0.8542rem + 0.093vw, 0.9375rem);
  --step-eyebrow:clamp(0.75rem, 0.7292rem + 0.093vw, 0.8125rem);
  --step-stat:  clamp(2.5rem,   1.75rem   + 3.33vw,  4.5rem);

  --measure:62ch; --measure-lead:46ch; --measure-h1:16ch; --measure-h2:20ch;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --gutter:clamp(1.25rem, 0.75rem + 2.2vw, 2.5rem);
  --section-y:clamp(4rem, 2.2rem + 8vw, 8rem);
  --container:1180px; --container-narrow:760px;

  --r-sm:6px; --r-md:10px; --r-lg:20px; --r-xl:28px; --r-cut:3px;
  --dur-1:120ms; --dur-2:180ms; --dur-3:240ms;
  --ease-out:cubic-bezier(.2,.8,.28,1);

  --ribbon:linear-gradient(90deg,
    var(--green) 0 25%, var(--gold) 25% 50%, var(--red) 50% 75%, var(--blue) 75% 100%);
}


*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
:target, [id]{ scroll-margin-block-start:84px; }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:var(--step-body); line-height:1.65;
  font-optical-sizing:auto; text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }

/* the page ribbon */
body::before{
  content:""; position:fixed; inset-block-start:0; inset-inline:0;
  block-size:5px; background-image:var(--ribbon); z-index:200;
}

h1,h2,h3,.display{ font-family:var(--font-display); text-wrap:balance; margin:0; }
h1{ font-size:var(--step-h1); line-height:1.03; letter-spacing:-.021em;
  font-variation-settings:"wght" 600,"SOFT" 34,"WONK" 0; max-inline-size:var(--measure-h1); }
h2{ font-size:var(--step-h2); line-height:1.1; letter-spacing:-.015em;
  font-variation-settings:"wght" 600,"SOFT" 26,"WONK" 0; max-inline-size:var(--measure-h2); }
h3{ font-size:var(--step-h3); line-height:1.2; letter-spacing:-.008em;
  font-variation-settings:"wght" 520,"SOFT" 20,"WONK" 0; }
h4{ font-family:var(--font-body); font-size:var(--step-h4); line-height:1.32;
  letter-spacing:-.004em; font-weight:600; margin:0; text-wrap:balance; }
p{ max-inline-size:var(--measure); text-wrap:pretty; margin:0 0 1em; }
a{ color:var(--blue-ink); text-underline-offset:.18em; }
strong,b{ font-weight:600; color:var(--ink); }

.lead{ font-size:var(--step-lead); line-height:1.5; letter-spacing:-.011em;
  font-weight:350; max-inline-size:52ch; color:var(--ink-2); }
.small{ font-size:var(--step-small); line-height:1.5; }

.eyebrow{ font-family:var(--font-display); font-size:var(--step-eyebrow);
  font-variation-settings:"opsz" 12,"wght" 650,"SOFT" 0,"WONK" 0; font-optical-sizing:none;
  text-transform:uppercase; letter-spacing:.16em; line-height:1; color:var(--ink-2);
  display:block; margin:0 -.16em .9rem 0; }

.wonk{ font-style:italic; font-variation-settings:"wght" 600,"SOFT" 90,"WONK" 1;
  color:inherit; text-decoration:underline; text-decoration-color:var(--gold);
  text-decoration-thickness:.075em; text-underline-offset:.14em; }

.stat{ font-family:var(--font-display); font-size:var(--step-stat); line-height:.95;
  letter-spacing:-.03em; font-variation-settings:"wght" 600,"SOFT" 30,"WONK" 0;
  font-variant-numeric:lining-nums tabular-nums; }

.rule{ block-size:4px; inline-size:88px; background-image:var(--ribbon);
  border-radius:2px; margin:var(--s-4) 0 var(--s-6); }
.sec h2::after{ content:""; display:block; block-size:4px; inline-size:84px; background-image:var(--ribbon); border-radius:2px; margin-block-start:var(--s-4); }
.end h2::after{ margin-inline:auto; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus); outline-offset:3px; border-radius:var(--r-sm); }

.wrap{ inline-size:min(100% - (var(--gutter) * 2), var(--container)); margin-inline:auto; }
.wrap.narrow{ max-inline-size:var(--container-narrow); }
.sr-only,.vh{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
a.skip:focus{ position:fixed; z-index:210; left:16px; top:16px; width:auto; height:auto; clip-path:none; margin:0;
  padding:12px 18px; background:var(--surface); border:2px solid var(--action); border-radius:var(--r-md); color:var(--ink); text-decoration:none; font-weight:600; }

/* ---------- the cut-corner grammar ---------- */
.cut{
  border-start-start-radius:var(--r-lg); border-start-end-radius:var(--r-lg);
  border-end-end-radius:var(--r-lg);     border-end-start-radius:var(--r-cut);
}
.cut-sm{
  border-start-start-radius:12px; border-start-end-radius:12px;
  border-end-end-radius:12px;     border-end-start-radius:var(--r-cut);
}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--action); --fg:var(--ink-on-fill); --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-block-size:48px; padding-inline:var(--s-5); text-decoration:none;
  font-family:var(--font-body); font-size:1rem; font-weight:600; letter-spacing:.004em; line-height:1;
  color:var(--fg); background:var(--bg); border:1.5px solid var(--bd);
  border-start-start-radius:var(--r-md); border-start-end-radius:var(--r-md);
  border-end-end-radius:var(--r-md);     border-end-start-radius:var(--r-cut);
  box-shadow:var(--shadow-1);
  transition:background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
}
.btn:hover{ --bg:var(--action-hover); box-shadow:var(--shadow-2); translate:0 -1px; }
.btn:active{ --bg:var(--action-active); box-shadow:var(--shadow-1); translate:0; }
.btn.ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--hairline-strong); box-shadow:none; }
.btn.ghost:hover{ --bg:var(--surface-sunken); --bd:var(--ink); box-shadow:none; }
.btn.wa{ --bg:var(--wa); --fg:var(--wa-ink); }
.btn.wa:hover{ --bg:color-mix(in oklab, var(--wa) 88%, #000); }
.btn.wa svg{ width:20px; height:20px; flex:none; }
.btn.lg{ min-block-size:54px; font-size:1.06rem; padding-inline:var(--s-6); }
.btn.sm{ min-block-size:40px; font-size:.92rem; padding-inline:var(--s-4); }
.btn.text{ min-block-size:auto; padding:0; background:none; border:0; box-shadow:none; color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:.11em; text-underline-offset:.22em; }
.btn.text:hover{ translate:0; text-decoration-color:var(--green-ink); }

/* ---------- header ---------- */
.top{ position:sticky; inset-block-start:0; z-index:150; background:color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter:blur(12px); border-block-end:1px solid var(--hairline); }
.top .wrap{ display:flex; align-items:center; gap:var(--s-5); min-block-size:66px; }
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:none;
  font-family:var(--font-display); font-size:1.32rem; font-variation-settings:"wght" 600,"SOFT" 40,"WONK" 0; letter-spacing:-.02em; }
.logo .dots{ display:flex; gap:3px; }
.logo .dots i{ width:9px; height:9px; border-radius:50% 50% 50% 2px; }
.logo .dots i:nth-child(1){ background:var(--green); }
.logo .dots i:nth-child(2){ background:var(--gold); }
.logo .dots i:nth-child(3){ background:var(--red); }
.logo .dots i:nth-child(4){ background:var(--blue); }
.topnav{ display:flex; gap:2px; }
.topnav a{ text-decoration:none; color:var(--ink-2); font-weight:500; font-size:.95rem; padding:8px 12px; border-radius:var(--r-sm); }
.topnav a:hover{ color:var(--ink); background:var(--surface-sunken); }
.top .sp{ flex:1; }
.iconbtn{ font:inherit; font-family:var(--font-body); font-weight:500; font-size:.9rem; cursor:pointer;
  background:transparent; border:1.5px solid var(--hairline-strong); color:var(--ink-2);
  min-block-size:40px; padding-inline:14px;
  border-start-start-radius:var(--r-sm); border-start-end-radius:var(--r-sm); border-end-end-radius:var(--r-sm); border-end-start-radius:var(--r-cut); }
.iconbtn:hover{ border-color:var(--ink); color:var(--ink); }
@media (max-width:920px){ .topnav{ display:none; } }

/* ---------- hero ---------- */
.hero{ padding-block:var(--s-9) var(--s-7); position:relative; isolation:isolate;
  background:url("classroom-play.jpg") center 38% / cover no-repeat; }
.hero .herobg{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover;
  object-position:center 42%; z-index:-2; }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, var(--paper) 0 6%, rgb(251 248 241 / .80) 30%, rgb(251 248 241 / .82) 64%, var(--paper) 100%); }
@media (max-width:700px){ .hero .herobg{ display:none; } }
@media (prefers-reduced-motion:reduce){ .hero .herobg{ display:none; } }
.hero h1,.hero .lead{ text-shadow:0 1px 0 var(--paper), 0 0 18px var(--paper); }
.hero .lead{ color:var(--ink); }
.hero .wrap{ display:grid; grid-template-columns:1.12fr .88fr; gap:var(--s-8); align-items:center; }
@media (max-width:940px){ .hero .wrap{ grid-template-columns:1fr; gap:var(--s-6); } }
.hero .tagpill{ display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:500; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--hairline); padding:6px 14px;
  border-start-start-radius:var(--r-md); border-start-end-radius:var(--r-md); border-end-end-radius:var(--r-md); border-end-start-radius:var(--r-cut);
  margin-block-end:var(--s-5); }
.hero .tagpill::before{ content:""; width:8px; height:8px; border-radius:50% 50% 50% 2px; background:var(--gold); }
.hero h1{ margin-block-end:var(--s-3); }
.hero .say{ margin-block:var(--s-4) var(--s-6); }
.hero .cta{ display:flex; gap:var(--s-3); flex-wrap:wrap; }
.hero .badges{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-block-start:var(--s-6); }
.hero .badges a{ font-size:.9rem; font-weight:600; color:var(--ink-2); background:var(--surface); text-decoration:none;
  border:1px solid var(--hairline); padding:7px 14px; border-radius:var(--r-md) var(--r-md) var(--r-md) var(--r-cut);
  transition:color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out); }
.hero .badges a:hover{ color:var(--ink); border-color:var(--ink); translate:0 -2px; }
.heromark{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; margin-inline:auto;
  max-inline-size:400px; padding:clamp(30px,4vw,52px) clamp(24px,4vw,44px);
  background:var(--surface); border:1px solid var(--hairline); box-shadow:var(--shadow-2);
  border-start-start-radius:var(--r-xl); border-start-end-radius:var(--r-xl); border-end-end-radius:var(--r-xl); border-end-start-radius:var(--r-cut); }
.heromark .dots{ display:flex; gap:11px; }
.heromark .dots i{ inline-size:22px; block-size:22px; border-radius:50% 50% 50% 5px; }
.heromark .dots i:nth-child(1){ background:var(--green); } .heromark .dots i:nth-child(2){ background:var(--gold); }
.heromark .dots i:nth-child(3){ background:var(--red); } .heromark .dots i:nth-child(4){ background:var(--blue); }
.heromark .wm{ font-family:var(--font-display); font-variation-settings:"wght" 600,"SOFT" 50,"WONK" 0;
  font-size:clamp(2.3rem,1.5rem + 2.8vw,3.4rem); letter-spacing:-.022em; line-height:1; color:var(--ink); }
.heromark .rib{ inline-size:132px; block-size:5px; border-radius:3px; background-image:var(--ribbon); }
.heromark .strandline{ font-size:.86rem; font-weight:600; letter-spacing:.02em; color:var(--ink-2); }
@media (max-width:940px){ .heromark{ max-inline-size:360px; } }

/* ---------- section frame ---------- */
.sec{ padding-block:var(--section-y); }
.sec.grid-bg{ background-color:var(--surface-sunken);
  background-image:radial-gradient(circle at 1px 1px, color-mix(in oklab,var(--ink) 20%,transparent) 1px, transparent 0);
  background-size:26px 26px; background-position:-1px -1px; }
.sec.tint{ background:var(--surface-sunken); }
.sec h2 + .rule{ margin-block:var(--s-3) var(--s-5); }
.sec .lead{ margin-block-end:var(--s-8); }

/* ---------- opening trio ---------- */
.trio{ display:grid; gap:var(--s-4); grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .trio{ grid-template-columns:1fr; } }
.mini{ background:var(--surface); border:1px solid var(--hairline); box-shadow:var(--shadow-1);
  padding:var(--s-6) var(--s-5) var(--s-5); position:relative; overflow:clip;
  border-start-start-radius:var(--r-lg); border-start-end-radius:var(--r-lg); border-end-end-radius:var(--r-lg); border-end-start-radius:var(--r-cut); }
.mini::before{ content:""; position:absolute; inset-block-start:0; inset-inline-start:0; block-size:4px; inline-size:34%; background:var(--c,var(--green)); }
.mini .n{ font-family:var(--font-display); font-variation-settings:"wght" 600,"SOFT" 40; font-size:1.5rem; color:var(--ci,var(--green-ink)); }
.mini h3{ margin:var(--s-1) 0 var(--s-2); }
.mini p{ margin:0; color:var(--ink-2); font-size:1rem; }

/* ---------- strands ---------- */
.strands{ display:grid; gap:var(--s-5); grid-template-columns:1fr 1fr; }
@media (max-width:820px){ .strands{ grid-template-columns:1fr; } }
.card{ position:relative; overflow:clip; background:var(--surface); border:1px solid var(--hairline);
  padding:var(--s-6) var(--s-5) var(--s-5); box-shadow:var(--shadow-1);
  border-start-start-radius:var(--r-lg); border-start-end-radius:var(--r-lg); border-end-end-radius:var(--r-lg); border-end-start-radius:var(--r-cut);
  transition:box-shadow var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out); }
.card:hover,.card:focus-within{ translate:0 -3px; box-shadow:var(--shadow-2); border-color:var(--hairline-strong); }
.card::before{ content:""; position:absolute; inset-block-start:0; inset-inline-start:0; block-size:4px; inline-size:34%;
  background:var(--strand,transparent); transition:inline-size var(--dur-3) var(--ease-out); }
.card:hover::before,.card:focus-within::before{ inline-size:100%; }
.strand--sel{ --strand:var(--green); --strand-ink:var(--green-ink); --strand-tint:var(--tint-green); }
.strand--fln{ --strand:var(--gold); --strand-ink:var(--gold-ink); --strand-tint:var(--tint-gold); }
.strand--coding{ --strand:var(--red); --strand-ink:var(--red-ink); --strand-tint:var(--tint-red); }
.strand--robotics{ --strand:var(--blue); --strand-ink:var(--blue-ink); --strand-tint:var(--tint-blue); }
.card .num{ font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--strand-ink); }
.card .plate{ inline-size:52px; block-size:52px; display:grid; place-items:center; margin:var(--s-2) 0 var(--s-3);
  background:var(--strand-tint); color:var(--strand-ink);
  border-start-start-radius:15px; border-start-end-radius:15px; border-end-end-radius:15px; border-end-start-radius:var(--r-cut); }
.card .plate svg{ width:30px; height:30px; }
.card h3{ margin:0 0 var(--s-2); transition:color var(--dur-2) var(--ease-out); }
.card:hover h3{ color:var(--strand-ink); }
.card > p{ margin:0 0 var(--s-4); color:var(--ink-2); font-size:1rem; }
.card .look{ background:var(--surface-sunken); padding:var(--s-3) var(--s-4); font-size:.94rem; color:var(--ink-2);
  border-radius:var(--r-md) var(--r-md) var(--r-md) var(--r-cut); }
.card .look b{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); opacity:.8; margin-block-end:4px; }
.strandnote{ margin:var(--s-6) 0 0; color:var(--ink-2); font-size:1rem; }

/* ---------- play cycle ---------- */
.cycle{ display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:var(--s-2); }
.cycle .step{ display:flex; align-items:center; gap:var(--s-2); }
.cycle .pill{ background:var(--surface); border:2px solid var(--c,var(--green)); color:var(--ink);
  padding:12px 20px; font-weight:600; font-size:1rem; box-shadow:var(--shadow-1);
  border-start-start-radius:var(--r-md); border-start-end-radius:var(--r-md); border-end-end-radius:var(--r-md); border-end-start-radius:var(--r-cut); }
.cycle .pill small{ display:block; font-weight:400; font-size:.75rem; color:var(--ink-2); }
.cycle .arw{ color:var(--ink-2); opacity:.55; flex:none; }
.cycle .arw svg{ width:22px; height:22px; }
.cyclecap{ margin:var(--s-6) 0 0; color:var(--ink-2); font-size:1rem; max-inline-size:64ch; }

/* ---------- methods we build on ---------- */
.methods{ display:grid; gap:var(--s-4); grid-template-columns:repeat(4,1fr); margin-block-start:var(--s-7); }
@media (max-width:860px){ .methods{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .methods{ grid-template-columns:1fr; } }
.method{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--hairline); box-shadow:var(--shadow-1); padding:var(--s-5) var(--s-4);
  border-start-start-radius:var(--r-lg); border-start-end-radius:var(--r-lg); border-end-end-radius:var(--r-lg); border-end-start-radius:var(--r-cut); }
.method .mi{ block-size:44px; margin-block-end:var(--s-3); display:flex; align-items:flex-end; }
.method .mi svg{ height:44px; width:auto; }
.method h4{ margin:0 0 4px; }
.method p{ margin:0; font-size:.92rem; color:var(--ink-2); }
.method .tag{ display:inline-block; margin-block-start:auto; padding-block-start:var(--s-3); font-size:.7rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-2); opacity:.8; }

/* ---------- alignment table ---------- */
.aligntbl{ inline-size:100%; border-collapse:separate; border-spacing:0 8px; }
.aligntbl th{ text-align:left; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); opacity:.85; padding:0 var(--s-4) 4px; }
.aligntbl td{ background:var(--surface); border-block:1px solid var(--hairline); padding:var(--s-4); vertical-align:top; font-size:.98rem; color:var(--ink-2); }
.aligntbl td:first-child{ border-inline-start:1px solid var(--hairline); border-start-start-radius:var(--r-md); border-end-start-radius:var(--r-cut); font-weight:600; color:var(--ink); white-space:nowrap; }
.aligntbl td:last-child{ border-inline-end:1px solid var(--hairline); border-start-end-radius:var(--r-md); border-end-end-radius:var(--r-md); }
.aligntbl td:first-child::before{ content:""; display:inline-block; width:9px; height:9px; border-radius:50% 50% 50% 2px; background:var(--rc,var(--green)); margin-inline-end:9px; vertical-align:middle; }
@media (max-width:720px){
  .aligntbl, .aligntbl tbody, .aligntbl tr, .aligntbl td{ display:block; inline-size:100%; }
  .aligntbl thead{ display:none; }
  .aligntbl tr{ margin-block-end:var(--s-3); }
  .aligntbl td{ border:1px solid var(--hairline); border-radius:0; }
  .aligntbl td:first-child{ border-radius:var(--r-md) var(--r-md) 0 0; }
  .aligntbl td:last-child{ border-radius:0 0 var(--r-md) var(--r-md); border-block-start:0; }
}

/* ---------- pilot path: landscape, six steps left to right ---------- */
.path{ display:grid; gap:var(--s-3); grid-template-columns:repeat(6,1fr); align-items:stretch; text-align:start; }
@media (max-width:1180px){ .path{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){ .path{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:440px){ .path{ grid-template-columns:1fr; } }
.path .node{ position:relative; overflow:clip; background:var(--surface); border:1px solid var(--hairline);
  box-shadow:var(--shadow-1); padding:var(--s-5) var(--s-4) var(--s-4);
  border-start-start-radius:var(--r-lg); border-start-end-radius:var(--r-lg); border-end-end-radius:var(--r-lg); border-end-start-radius:var(--r-cut); }
.path .node::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:4px; background:var(--c,var(--green)); }
.path .node .n{ inline-size:40px; block-size:40px; display:grid; place-items:center; margin-block-end:var(--s-3);
  background:var(--c,var(--green)); color:var(--ink-on-fill);
  font-family:var(--font-display); font-variation-settings:"wght" 600,"SOFT" 30; font-size:1.1rem;
  border-start-start-radius:13px; border-start-end-radius:13px; border-end-end-radius:13px; border-end-start-radius:var(--r-cut); }
.path .node h4{ margin:0 0 5px; font-size:1rem; line-height:1.25; }
.path .node p{ margin:0; color:var(--ink-2); font-size:.9rem; line-height:1.5; }

/* ---------- traction ---------- */
.tract{ display:grid; gap:var(--s-4); grid-template-columns:repeat(4,1fr); }
@media (max-width:820px){ .tract{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .tract{ grid-template-columns:1fr; } }
.tract .t{ background:var(--surface); border:1px solid var(--hairline); box-shadow:var(--shadow-1); padding:var(--s-5);
  border-start-start-radius:var(--r-lg); border-start-end-radius:var(--r-lg); border-end-end-radius:var(--r-lg); border-end-start-radius:var(--r-cut); }
.tract .t .k{ font-size:.7rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); opacity:.85; }
.tract .t .v{ font-family:var(--font-display); font-variation-settings:"wght" 600,"SOFT" 26; font-size:1.35rem; letter-spacing:-.02em; margin:6px 0 4px; }
.tract .t .v a{ color:inherit; text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-color:var(--red); }
.tract .t .v a:hover{ color:var(--red-ink); }
.tract .t p{ margin:0; color:var(--ink-2); font-size:.92rem; }

/* ---------- asks tabs ---------- */
.tabbar{ display:flex; gap:var(--s-2); flex-wrap:wrap; justify-content:center; margin-block-end:var(--s-5); }
.tabbar button{ font:inherit; font-family:var(--font-body); font-weight:600; font-size:.95rem; cursor:pointer;
  background:var(--surface); border:1.5px solid var(--hairline-strong); color:var(--ink-2); min-block-size:44px; padding-inline:18px;
  border-start-start-radius:var(--r-md); border-start-end-radius:var(--r-md); border-end-end-radius:var(--r-md); border-end-start-radius:var(--r-cut); }
.tabbar button[aria-selected="true"]{ background:var(--ink); color:var(--ink-on-fill); border-color:var(--ink); }
.askpanel{ display:grid; gap:var(--s-5); grid-template-columns:1fr 1fr; }
@media (max-width:720px){ .askpanel{ grid-template-columns:1fr; } }
.askpanel .col h4{ font-size:.72rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); opacity:.85; margin:0 0 var(--s-3); }
.askpanel ul{ margin:0; padding-inline-start:20px; color:var(--ink-2); font-size:1rem; line-height:1.75; }
.askpanel ul li{ margin-block-end:6px; }

/* ---------- contact ---------- */
.people{ display:grid; gap:var(--s-5); grid-template-columns:1fr 1fr; }
@media (max-width:720px){ .people{ grid-template-columns:1fr; } }
.person{ background:var(--surface); border:1px solid var(--hairline); box-shadow:var(--shadow-3); padding:var(--s-6);
  border-start-start-radius:var(--r-xl); border-start-end-radius:var(--r-xl); border-end-end-radius:var(--r-xl); border-end-start-radius:var(--r-cut); }
.person .av{ inline-size:104px; block-size:104px; display:block; object-fit:cover; margin-block-end:var(--s-4);
  border:3px solid var(--c,var(--green)); background:var(--surface-sunken);
  border-radius:50% 50% 50% 14px; }
.person h3{ margin:0 0 2px; }
.person .role{ font-size:.9rem; color:var(--ink-2); margin:0 0 var(--s-4); }
.person .tel{ font-size:1rem; color:var(--ink-2); margin:0 0 var(--s-4); }
.person .tel a{ color:var(--ink-2); text-decoration:none; }
.person .tel a:hover{ color:var(--ink); }
.contact-alt{ margin:var(--s-6) 0 0; color:var(--ink-2); font-size:1rem; }

/* ---------- end + footer ---------- */
.end{ padding-block:var(--s-10); text-align:center; }
.end .eyebrow{ margin-inline:auto; }
.end h2{ margin:0 auto var(--s-3); max-inline-size:18ch; }
.end p{ font-size:var(--step-lead); color:var(--ink-2); max-inline-size:46ch; margin:0 auto var(--s-6); }
.end .cta{ display:flex; gap:var(--s-3); justify-content:center; flex-wrap:wrap; }
footer.foot{ background:var(--surface-sunken); border-block-start:1px solid var(--hairline); padding-block:var(--s-7); }
footer.foot p{ font-size:.9rem; color:var(--ink-2); opacity:.9; margin:0 0 var(--s-2); max-inline-size:82ch; }
footer.foot a{ color:var(--ink-2); }
footer.foot .links a{ color:var(--ink); font-weight:500; text-decoration:none; }
footer.foot .links a:hover{ text-decoration:underline; text-decoration-color:var(--gold); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .card::before,.mini::before{ inline-size:100%; }
  .btn:hover,.card:hover{ translate:0; }
}


/* ==========================================================
   CHALLENGE SECTION (EAC gap map). Tokens scoped to .challenge
   ========================================================== */
/* ============ TOKENS ============ */
.challenge{
  --bg:#fbfaf6; --panel:#ffffff; --panel-2:#f3f2ec;
  --ink:#14180f; --ink-2:#4b5245; --ink-3:#5f6759;
  --line:#dcdbd0; --line-2:#8f9083;
  --gold:#8a6800;  --gold-vivid:#8a6800;
  --red:#b8342a;   --blue:#1668a8;
  --focus:#1668a8;
  --map-bg:#e2e7df; --map-stroke:#6f7d6c; --lead:#6f7d6c;
  /* sequential ramp, even ~13 L* steps: closest to the page = emptiest = biggest gap */
  --b0:#f6f7f4; --b1:#bcd9c4; --b2:#84bd9a; --b3:#489a6e; --b4:#2a774c; --b5:#14532e;
  --b0-ink:#14180f; --b1-ink:#14180f; --b2-ink:#14180f;
  --b3-ink:#ffffff; --b4-ink:#ffffff; --b5-ink:#ffffff;
  --shadow:0 1px 2px rgba(20,24,15,.06),0 8px 24px rgba(20,24,15,.06);
}

.challenge .country:focus-visible{outline:3px solid var(--focus);outline-offset:0;border-radius:4px}

/* ============ SHELL ============ */
.challenge{max-width:1180px;margin:0 auto;padding:clamp(40px,7vw,88px) clamp(16px,4vw,40px)}
.ch-eyebrow{margin:0 0 10px;font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.ch-title{margin:0 0 14px;font-size:clamp(1.7rem,1.1rem + 2.6vw,3rem);line-height:1.08;
  letter-spacing:-.02em;font-weight:700;max-width:20ch}
.ch-standfirst{margin:0;max-width:68ch;font-size:clamp(1rem,.95rem + .3vw,1.14rem);
  line-height:1.62;color:var(--ink-2)}
.ch-standfirst strong{color:var(--ink);font-weight:600}

/* ============ REGIONAL KPI STRIP ============ */
.kpis{display:grid;gap:12px;margin:clamp(28px,4vw,44px) 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px 16px 14px;box-shadow:var(--shadow)}
.kpi-n{display:block;font-family:var(--font-display);font-size:clamp(2rem,1.4rem + 2vw,2.9rem);line-height:1;
  font-weight:600;font-variation-settings:"wght" 600,"SOFT" 24;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi-n i{font-style:normal;font-size:.44em;font-weight:600;margin-left:2px;color:var(--ink-2)}
.kpi-l{display:block;margin-top:9px;font-size:.85rem;line-height:1.35;color:var(--ink-2)}
.kpi-t{display:block;margin-top:8px;font-size:.72rem;letter-spacing:.04em;color:var(--ink-3)}
.kpi-t b{color:var(--gold);font-weight:600}

/* ============ LAYOUT: map + readout ============ */
.ch-grid{display:grid;gap:clamp(16px,2.4vw,26px);margin-top:clamp(24px,3.4vw,38px);
  grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);align-items:start}
@media (max-width:900px){.ch-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- strand switcher ---- */
.strandbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:5px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px}
.strandbar button{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;
  justify-content:center;padding:9px 12px;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--ink-2);font:inherit;font-size:.86rem;font-weight:600;
  transition:background .16s,color .16s}
.strandbar button .dot{width:9px;height:9px;border-radius:50%;background:currentColor;
  opacity:.4;flex:none}
.strandbar button:hover{background:var(--panel);color:var(--ink)}
.strandbar button[aria-selected="true"]{background:var(--panel);color:var(--ink);
  box-shadow:var(--shadow)}
.strandbar button[aria-selected="true"] .dot{background:var(--gold-vivid);opacity:1}

/* ---- map ---- */
.mapfig{margin:0;background:var(--map-bg);border:1px solid var(--line);
  border-radius:16px;padding:clamp(8px,1.4vw,16px);overflow:hidden}
.eacmap{display:block;width:100%;height:auto;max-width:100%}
/* boundary = a sea-coloured casing (here) plus a dark centre line (.edge, layer 2).
   Casing-to-line contrast is 4:1, so a border stays perceivable over every bin. */
.challenge .country{fill:var(--b0);stroke:var(--map-bg);stroke-width:3.2;cursor:pointer;
  transition:fill .22s ease,opacity .18s ease}
.challenge .country[data-bin="0"]{fill:var(--b0)} .country[data-bin="1"]{fill:var(--b1)}
.challenge .country[data-bin="2"]{fill:var(--b2)} .country[data-bin="3"]{fill:var(--b3)}
.challenge .country[data-bin="4"]{fill:var(--b4)} .country[data-bin="5"]{fill:var(--b5)}
.challenge .edge{fill:none;stroke:var(--map-stroke);stroke-width:1.3;
  transition:stroke .18s ease,stroke-width .18s ease,opacity .18s ease}
.challenge .eacmap.is-dim .cc:not(.is-on) .country,
.challenge .eacmap.is-dim .edge:not(.is-on),
.challenge .eacmap.is-dim .anno:not(.is-on){opacity:.4}
.challenge .edge.is-on{stroke:var(--gold-vivid);stroke-width:3.4}
.challenge .clabel{fill:var(--ink);opacity:.8;font-weight:700;letter-spacing:.07em;
  text-anchor:middle;pointer-events:none;
  paint-order:stroke;stroke:var(--map-bg);stroke-width:3.5px;stroke-linejoin:round}
.challenge .lead{fill:none;stroke:var(--lead);stroke-width:2;stroke-dasharray:5 5;pointer-events:none}
.challenge .pin{fill:var(--gold-vivid);stroke:var(--map-bg);stroke-width:2;pointer-events:none}
.challenge .chip{pointer-events:none}
.challenge .chip .chip-bg{fill:var(--panel);stroke:var(--line-2);stroke-width:1.4}
.challenge .chip .chip-t{fill:var(--ink);font-weight:700;font-size:21px;text-anchor:middle;
  dominant-baseline:central;font-variant-numeric:tabular-nums}
.challenge .chip .chip-n{fill:var(--ink-3);font-weight:600;font-size:15px;text-anchor:middle;
  dominant-baseline:central;letter-spacing:.05em}
.challenge .chip--out{pointer-events:auto;cursor:pointer}
.challenge .anno.is-on .chip-bg{stroke:var(--gold-vivid);stroke-width:2.6}
.challenge .anno.is-on .clabel{opacity:1}
@media (max-width:720px){ .chip{display:none} .lead,.pin{display:none}
  .clabel{font-size:150%!important} }
.mapfig figcaption{margin:10px 2px 0;font-size:.74rem;line-height:1.45;color:var(--ink-3)}

/* ---- legend ---- */
.legend{margin:14px 0 0;padding:12px 14px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px}
.legend-h{font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 9px}
.challenge .ramp{position:relative;display:grid;grid-template-columns:5fr 10fr 15fr 20fr 25fr 25fr;
  height:16px;border-radius:5px;overflow:hidden;border:1px solid var(--line-2)}
.challenge .ramp i{display:block;border-right:1px solid var(--line-2)}
.challenge .ramp i:last-child{border-right:0}
.challenge .ramp i:nth-child(1){background:var(--b0)} .ramp i:nth-child(2){background:var(--b1)}
.challenge .ramp i:nth-child(3){background:var(--b2)} .ramp i:nth-child(4){background:var(--b3)}
.challenge .ramp i:nth-child(5){background:var(--b4)} .ramp i:nth-child(6){background:var(--b5)}
.challenge .ramp-wrap{position:relative;padding-top:16px}
.challenge .tick{position:absolute;top:0;left:0;transform:translateX(-50%);transition:left .28s ease;
  font-size:.66rem;font-weight:700;color:var(--gold);white-space:nowrap}
.challenge .tick::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:34px;
  background:var(--gold-vivid);transform:translateX(-50%)}
.challenge .ramp-scale{display:flex;justify-content:space-between;margin-top:6px;
  font-size:.66rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.legend p{margin:10px 0 0;font-size:.72rem;line-height:1.5;color:var(--ink-3)}

/* ---- readout ---- */
.readout{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:clamp(16px,2vw,22px);box-shadow:var(--shadow);position:sticky;top:16px}
@media (max-width:900px){.readout{position:static}}
.readout-k{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 4px}
.readout-h{margin:0;font-family:var(--font-display);font-size:1.32rem;font-weight:600;font-variation-settings:"wght" 600,"SOFT" 20;letter-spacing:-.01em}
.readout-sub{margin:5px 0 0;font-size:.78rem;color:var(--ink-3)}
.challenge .metrics{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:15px}
.challenge .metric{display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:baseline}
.challenge .metric-l{font-size:.82rem;color:var(--ink-2);line-height:1.3}
.challenge .metric-v{font-size:1.32rem;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;justify-self:end}
.challenge .metric-v i{font-style:normal;font-size:.6em;color:var(--ink-2);margin-left:1px}
.challenge .track{grid-column:1/-1;position:relative;height:9px;border-radius:5px;
  background:var(--panel-2);border:1px solid var(--line);overflow:visible}
.challenge .track .fill{position:absolute;inset:0 auto 0 0;border-radius:4px;background:var(--b4);
  width:max(4px,calc(var(--v) * 1%));transition:width .3s ease}
.challenge .track .goal{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--gold-vivid);
  left:calc(var(--t) * 1%)}
.challenge .metric-f{grid-column:1/-1;font-size:.7rem;color:var(--ink-3);margin-top:1px}
.readout-btn{margin-top:18px;width:100%;padding:10px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink-2);
  font:inherit;font-size:.8rem;font-weight:600}
.readout-btn:hover{color:var(--ink);border-color:var(--ink-3)}
.readout-btn[hidden]{display:none}

/* ============ MATRIX (the text equivalent, always visible) ============ */
.matrix-wrap{margin-top:clamp(24px,3.4vw,38px);background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:clamp(12px,2vw,22px);
  box-shadow:var(--shadow);max-width:100%}
table.matrix{width:100%;border-collapse:collapse;table-layout:fixed;
  font-variant-numeric:tabular-nums}
table.matrix caption{caption-side:top;text-align:left;font-size:.78rem;line-height:1.5;
  color:var(--ink-3);margin:0 0 14px;max-width:78ch}
table.matrix caption b{color:var(--ink-2)}
.matrix th,.matrix td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:right;
  vertical-align:middle}
.matrix thead th{font-size:.72rem;font-weight:700;color:var(--ink-2);line-height:1.25;
  border-bottom:2px solid var(--line-2);vertical-align:bottom}
.matrix thead th span{display:block;font-weight:500;color:var(--ink-3);font-size:.92em}
.matrix th[scope="row"]{text-align:left;padding-left:0;width:31%}
.matrix thead th:first-child{text-align:left;padding-left:0}
.challenge .rowbtn{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:2px 6px;
  border:0;background:transparent;color:var(--ink);font:inherit;font-size:.9rem;
  font-weight:600;cursor:pointer;border-radius:8px;text-align:left}
.challenge .rowbtn:hover{background:var(--panel-2)}
.challenge .rowbtn .swatch{width:13px;height:13px;border-radius:3px;flex:none;
  border:1px solid var(--line-2);background:var(--b0);transition:background .22s ease}
.challenge .swatch[data-bin="0"]{background:var(--b0)} .swatch[data-bin="1"]{background:var(--b1)}
.challenge .swatch[data-bin="2"]{background:var(--b2)} .swatch[data-bin="3"]{background:var(--b3)}
.challenge .swatch[data-bin="4"]{background:var(--b4)} .swatch[data-bin="5"]{background:var(--b5)}
.challenge .rowbtn .c-abbr{display:none;color:var(--ink-3);font-weight:700}
.matrix tbody tr.is-on{background:var(--panel-2)}
.matrix tbody tr.is-on th[scope="row"]{box-shadow:inset 3px 0 0 var(--gold-vivid)}
.matrix td .v{display:block;font-size:1rem;font-weight:600;line-height:1.1}
.matrix td .v small{font-size:.68em;font-weight:500;color:var(--ink-3)}
.matrix td .bar{display:block;position:relative;height:5px;margin-top:6px;border-radius:3px;
  background:var(--panel-2);border:1px solid var(--line)}
.matrix td .bar::before{content:"";position:absolute;inset:0 auto 0 0;border-radius:3px;
  background:var(--b3);width:max(3px,calc(var(--v) * 1%))}
.matrix td .bar::after{content:"";position:absolute;top:-2px;bottom:-2px;width:2px;
  background:var(--gold-vivid);left:calc(var(--t) * 1%)}
.matrix .is-active{background:var(--panel-2)}
.matrix thead th.is-active{box-shadow:inset 0 -3px 0 var(--gold-vivid)}
.matrix tfoot th,.matrix tfoot td{border-bottom:0;border-top:2px solid var(--line-2);
  padding-top:13px;font-weight:700}
.matrix tfoot th[scope="row"]{font-size:.9rem;padding-left:6px}
.matrix tfoot td .v{font-size:1.06rem;font-weight:700}
.ch-note{margin:14px 2px 0;font-size:.72rem;line-height:1.6;color:var(--ink-3);max-width:88ch}
.ch-note b{color:var(--ink-2);font-weight:600}

@media (max-width:600px){
  .matrix th[scope="row"]{width:52px}
  .matrix th,.matrix td{padding:8px 3px;font-size:.9em}
  .rowbtn{font-size:.82rem;gap:6px;padding:2px}
  .rowbtn .c-abbr{display:inline}
  .rowbtn .c-full{position:absolute!important;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .matrix thead th{font-size:.63rem}
  .matrix td .v{font-size:.86rem}
  .matrix td .bar{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}


/* ==========================================================
   CENTRED LANDING  (index.html)  -- headings, hero and intros
   ========================================================== */
.hero .wrap{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:var(--s-5); }
.hero .wrap > div:first-child{ display:flex; flex-direction:column; align-items:center; }
.hero .tagpill,
.hero h1,
.hero .lead{ margin-inline:auto; }
.hero .lead{ max-inline-size:36ch; }
.hero .cta,
.hero .badges{ justify-content:center; }
.hero .playart{ max-inline-size:min(420px, 80vw); margin:var(--s-3) auto 0; }

.sec > .wrap > .eyebrow,
.sec > .wrap > h2,
.sec > .wrap > .lead,
.sec > .wrap > .cyclecap,
.sec > .wrap > .strandnote{ text-align:center; margin-inline:auto; }
.sec > .wrap > .eyebrow{ text-indent:.16em; }
.sec > .wrap > h2::after{ margin-inline:auto; }
.sec > .wrap > .lead{ max-inline-size:58ch; }

.challenge > .ch-eyebrow,
.challenge > .ch-title,
.challenge > .ch-standfirst{ text-align:center; margin-inline:auto; }
.challenge > .ch-standfirst{ max-inline-size:66ch; }

/* keep card / table / list bodies left-aligned for reading */
.trio, .strands, .methods, .aligntbl, .path, .tract, .tabbar,
.askpanel, .people, .cycle, .ch-grid, .matrix-wrap, .kpis{ text-align:start; }

/* ---------- in-the-room gallery ---------- */
.gallery{ display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); text-align:start; }
.shot{ margin:0; background:var(--surface); border:1px solid var(--hairline); box-shadow:var(--shadow-1); overflow:clip;
  border-start-start-radius:var(--r-lg); border-start-end-radius:var(--r-lg); border-end-end-radius:var(--r-lg); border-end-start-radius:var(--r-cut); }
.shot img{ display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; background:var(--surface-sunken); }
.shot figcaption{ padding:var(--s-4) var(--s-4) var(--s-5); font-family:var(--font-display);
  font-variation-settings:"wght" 520,"SOFT" 24; font-size:1.05rem; line-height:1.32; color:var(--ink); text-wrap:balance; }

/* ---------- in-the-room: video clips ---------- */
.room-sub{ margin:var(--s-8) 0 var(--s-3); text-align:center; font-size:1.15rem;
  font-variation-settings:"wght" 520,"SOFT" 20; }
.clips{ display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); text-align:start; }
.clip{ margin:0; background:var(--surface); border:1px solid var(--hairline); box-shadow:var(--shadow-1); overflow:clip;
  border-start-start-radius:var(--r-lg); border-start-end-radius:var(--r-lg); border-end-end-radius:var(--r-lg); border-end-start-radius:var(--r-cut); }
.clip video{ display:block; width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; background:#000; }
.clip figcaption{ padding:var(--s-4) var(--s-4) var(--s-5); font-family:var(--font-display);
  font-variation-settings:"wght" 520,"SOFT" 24; font-size:1.05rem; line-height:1.32; color:var(--ink); text-wrap:balance; }
.room-note{ margin:var(--s-4) 0 0; text-align:center; font-size:.88rem; color:var(--ink-2); }

/* ---------- contact: linkedin link ---------- */
.person .li{ display:inline-flex; align-items:center; gap:8px; margin-block-start:var(--s-3);
  font-size:.92rem; font-weight:600; color:var(--ink-2); text-decoration:none; }
.person .li:hover{ color:var(--blue-ink); }
.person .li svg{ width:18px; height:18px; flex:none; }


/* ---------- hook band ---------- */
.hook{ background:var(--ink); color:var(--ink-on-fill); text-align:center; padding:clamp(52px,9vw,96px) var(--gutter); }
.hook p{ margin:0 auto; max-inline-size:22ch; text-wrap:balance;
  font-family:var(--font-display); font-variation-settings:"wght" 560,"SOFT" 50,"WONK" 0;
  font-size:clamp(1.7rem,1.1rem + 3vw,3rem); line-height:1.15; letter-spacing:-.02em; color:var(--ink-on-fill); }