/* Brain Wave — built to the Red Scarf visual kit
   Backgrounds white / very light blue. Pink or orange for emphasis.
   Wave lines from the logo. Lots of breathing space. Thin-stroke icons only. */

@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --ink:#1D1D1D;
  --ink-70:#55585A;
  --ink-45:#6A6E71;   /* AA on paper, wash and wash-2 (was #83898C, 3.2–3.6:1) */
  --teal:#0E829D;      /* the kit's teal: fills, marks, rules */
  --teal-ink:#0D7892;  /* teal as text on light: AA everywhere */
  --teal-deep:#0D809B; /* teal behind white text: AA on the button */
  --pink:#F0637D;
  --pink-lt:#F388A2;
  --orange:#F16537;
  --blue-lt:#A0D4E5;
  --paper:#FFFFFF;
  --wash:#F4FAFC;
  --wash-2:#EAF4F8;
  --line:#E3EDF2;

  --w:1200px;
  --gut:clamp(20px,5vw,48px);
  --r:18px;

  --step--1:clamp(.82rem,.79rem + .14vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.09rem);
  --step-1:clamp(1.2rem,1.1rem + .45vw,1.45rem);
  --step-2:clamp(1.5rem,1.3rem + .9vw,2.05rem);
  --step-3:clamp(1.95rem,1.6rem + 1.6vw,3rem);
  --step-4:clamp(2.4rem,1.8rem + 2.9vw,4.4rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--step-0);
  font-weight:400;
  line-height:1.62;
  color:var(--ink-70);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{color:var(--ink);line-height:1.1;letter-spacing:-.02em;margin:0 0 .5em;font-weight:700}
h1{font-size:var(--step-4);letter-spacing:-.035em}
h2{font-size:var(--step-3);letter-spacing:-.03em}
h3{font-size:var(--step-1)}
p{margin:0 0 1.1em}
a{color:var(--teal-ink);text-decoration-thickness:1px;text-underline-offset:3px}
img,svg,canvas{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}

.wrap{width:min(100% - var(--gut)*2,var(--w));margin-inline:auto}
.section{padding-block:clamp(64px,9vw,132px)}
.center{text-align:center}
.lede{font-size:var(--step-1);color:var(--ink-70);max-width:62ch}
.center .lede{margin-inline:auto}

.eyebrow{
  font-size:var(--step--1);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-ink);margin:0 0 1em;
}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}

:where(a,button,summary,input,select,textarea):focus-visible{
  outline:2.5px solid var(--teal);outline-offset:3px;border-radius:6px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.92em 1.7em;border-radius:100px;
  font-weight:600;font-size:var(--step-0);
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,background-color .25s,color .25s;
}
.btn svg{width:1em;height:1em;flex:none}
.btn-primary{background:var(--teal-deep);color:#fff;box-shadow:0 8px 22px -10px rgba(14,130,157,.75)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(14,130,157,.85)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-ink);transform:translateY(-2px)}
.btn-group{display:flex;flex-wrap:wrap;gap:14px}
.center .btn-group{justify-content:center}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;
}
.site-head.is-stuck{border-color:var(--line);box-shadow:0 6px 24px -18px rgba(29,29,29,.5)}
.head-in{display:flex;align-items:center;gap:24px;padding-block:14px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:42px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav a:not(.btn){color:var(--ink);text-decoration:none;font-weight:500;font-size:var(--step--1);letter-spacing:.02em}
.nav a:not(.btn):hover{color:var(--teal-ink)}
.nav a.btn{text-decoration:none}
.nav .btn{padding:.62em 1.25em}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--ink)}

@media (max-width:940px){
  .nav-toggle{display:block;margin-left:auto}
  .nav{
    position:fixed;inset:64px 0 auto;flex-direction:column;align-items:stretch;
    gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px var(--gut) 24px;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:.25s;
  }
  .nav[data-open="true"]{transform:none;opacity:1;pointer-events:auto}
  .nav a:not(.btn){padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--step-0)}
  .nav .btn{margin-top:16px;justify-content:center;border-bottom:0}
}

/* ---------- hero ----------
   One WebGL mesh carries the whole opening: a flat sheet filling the viewport,
   crumpling, then relaxing into the brain, which then holds and turns slightly
   under the pointer. See assets/js/brain3d.js. */
.hero{
  position:relative;overflow:clip;background:var(--paper);
  min-height:100svh;display:grid;align-items:center;
}
.hero-in{position:relative;z-index:2;padding-block:clamp(80px,11vh,124px) clamp(72px,11vh,140px)}
.hero-copy{max-width:min(100%,540px)}
.hero h1{margin-bottom:.34em}
.hero .lede{margin-bottom:1.8em}
.hero-note{display:flex;align-items:center;gap:10px;margin-top:24px;font-size:var(--step--1);color:var(--ink-45)}
.hero-note svg{width:17px;height:17px;color:var(--teal);flex:none}

.waves{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.waves-hero{
  z-index:0;opacity:0;transition:opacity 1.4s ease;
  -webkit-mask-image:linear-gradient(95deg,transparent 2%,rgba(0,0,0,.10) 18%,rgba(0,0,0,.55) 36%,#000 54%,#000 76%,transparent 98%),
                     linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(95deg,transparent 2%,rgba(0,0,0,.10) 18%,rgba(0,0,0,.55) 36%,#000 54%,#000 76%,transparent 98%),
             linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.is-revealed .waves-hero{opacity:1}

.brain-stage{position:absolute;inset:0;z-index:1;pointer-events:none}
.brain-stage canvas{width:100%;height:100%;display:block}

/* ---- department highlighting ----
   The mesh cannot be masked from CSS, so the highlight is an overlay pinned to
   the brain's resting box and masked to its silhouette. */
.lobes{
  position:absolute;top:48%;left:72%;width:min(33vw,430px);aspect-ratio:726/675;
  transform:translate(-50%,-50%);mix-blend-mode:multiply;pointer-events:none;
  opacity:0;transition:opacity .4s ease;
}
.is-settled .lobes{opacity:1}
.lobe{
  position:absolute;inset:0;opacity:0;transition:opacity .5s ease;
  -webkit-mask-image:url('../paper/brain.png');mask-image:url('../paper/brain.png');
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.lobe[data-region="0"]{background:radial-gradient(48% 51% at 18% 45%,#0E829D 0%,rgba(14,130,157,.62) 38%,rgba(14,130,157,.18) 66%,transparent 84%)}
.lobe[data-region="1"]{background:radial-gradient(45% 44% at 52% 16%,#F16537 0%,rgba(241,101,55,.62) 38%,rgba(241,101,55,.18) 66%,transparent 84%)}
.lobe[data-region="2"]{background:radial-gradient(41% 50% at 86% 44%,#A0D4E5 0%,rgba(160,212,229,.62) 38%,rgba(160,212,229,.18) 66%,transparent 84%)}
.lobe[data-region="3"]{background:radial-gradient(48% 39% at 55% 81%,#F0637D 0%,rgba(240,99,125,.62) 38%,rgba(240,99,125,.18) 66%,transparent 84%)}
.lobe.on{opacity:.92}


/* ---- headline reveals a word at a time ---- */
.split .w{display:inline-block;overflow:hidden;vertical-align:top}
.split .w > span{display:inline-block;transform:translateY(105%);transition:transform .95s cubic-bezier(.2,.9,.25,1)}
.is-revealed .split .w > span{transform:none}
.hero-copy > :not(h1){opacity:0;transform:translateY(18px)}
.is-revealed .hero-copy > :not(h1){
  opacity:1;transform:none;
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.3,1);
}
.is-revealed .hero-copy > :nth-child(1){transition-delay:.08s}
.is-revealed .hero-copy > :nth-child(3){transition-delay:.30s}
.is-revealed .hero-copy > :nth-child(4){transition-delay:.40s}
.is-revealed .hero-copy > :nth-child(5){transition-delay:.50s}

.site-head{opacity:0;transition:opacity .8s ease}
.is-revealed .site-head,.no-js .site-head{opacity:1}

.scroll-cue{
  position:absolute;left:50%;bottom:24px;z-index:3;
  width:26px;height:44px;transform:translateX(-50%);
  border:1.5px solid var(--line);border-radius:100px;
  display:grid;place-items:start center;padding-top:7px;
  opacity:0;transition:opacity .8s ease 1s,border-color .3s;
}
.is-revealed .scroll-cue{opacity:1}
.scroll-cue:hover{border-color:var(--teal)}
.scroll-cue-line{display:block;width:2px;height:8px;border-radius:2px;background:var(--teal);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(13px);opacity:.2}}
@media (max-width:900px){.scroll-cue{display:none}}

@media (prefers-reduced-motion:reduce){
  .hero-copy > *{opacity:1!important;transform:none!important}
  .split .w > span{transform:none!important}
  .scroll-cue-line{animation:none}
}

@media (max-width:900px){
  .hero-in{text-align:center;padding-block:clamp(250px,46vh,380px) clamp(56px,9vh,96px)}
  .hero-copy{margin-inline:auto}
  .hero .lede{margin-inline:auto}
  .hero .btn-group,.hero-note{justify-content:center}
  .lobes{top:23%;left:50%;width:min(66vw,330px)}
}

.breaker{position:relative;height:clamp(110px,15vw,190px);overflow:hidden;background:var(--paper)}
/* between two tinted sections the white band reads as a box cut into them */
.breaker--wash{background:var(--wash)}
.breaker .waves{
  opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
}

/* the wave from the logo, used as a section rule */
.wave-rule{display:block;width:100%;height:auto;color:var(--blue-lt)}

/* ---------- department cards ---------- */
.depts{background:var(--wash)}
.dept-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:clamp(32px,4vw,54px)}
.dept{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:30px 26px 26px;text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s;
}
.dept::after{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
.dept:hover,.dept:focus-visible{transform:translateY(-5px);box-shadow:0 22px 48px -30px rgba(29,29,29,.45);border-color:transparent}
.dept:hover::after,.dept:focus-visible::after{transform:scaleX(1)}
.dept-ico{width:34px;height:34px;color:var(--accent);margin-bottom:20px}
.dept h2,.dept h3{font-size:var(--step-1);margin-bottom:.35em}
.dept p{font-size:var(--step--1);margin-bottom:1.2em}
.dept ul{margin-top:auto;display:flex;flex-wrap:wrap;gap:7px}
.dept li{
  font-size:.78rem;font-weight:500;color:var(--ink-70);
  border:1px solid var(--line);border-radius:100px;padding:.32em .82em;
}

/* ---------- generic feature grid ---------- */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(22px,3vw,40px);margin-top:clamp(32px,4vw,56px)}
.feat h3{display:flex;align-items:center;gap:11px;font-size:var(--step-0);margin-bottom:.5em}
.feat svg{width:22px;height:22px;color:var(--teal);flex:none}
.feat p{font-size:var(--step--1);margin:0}

/* ---------- audience ---------- */
.aud-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:clamp(32px,4vw,54px)}
.aud{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 20px;
  transition:border-color .3s,transform .3s;
}
.aud:hover{border-color:var(--blue-lt);transform:translateY(-3px)}
.aud h2,.aud h3{font-size:var(--step-0);margin-bottom:.35em}
.aud p{font-size:var(--step--1);margin:0;color:var(--ink-45)}

/* ---------- founder ---------- */
.founder{background:var(--wash)}
.founder-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:center}
.founder-portrait{
  position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:5/4;
  background:linear-gradient(150deg,var(--blue-lt),var(--pink-lt) 55%,var(--orange));
}
.founder-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.cred{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cred li{
  font-size:var(--step--1);font-weight:500;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:100px;padding:.42em 1em;
}
@media (max-width:820px){.founder-in{grid-template-columns:1fr}.founder-portrait{max-width:460px}}

/* ---------- initiative band ---------- */
.band{
  border-radius:calc(var(--r) + 6px);padding:clamp(34px,5vw,68px);
  background:linear-gradient(125deg,var(--teal),#1FA0BC 42%,var(--pink) 100%);
  color:#fff;position:relative;overflow:hidden;
}
.band h2,.band h3{color:#fff}
.band p{color:rgba(255,255,255,.9)}
.band .btn-ghost{background:#fff;border-color:#fff;color:var(--teal-ink)}
.band .btn-ghost:hover{background:rgba(255,255,255,.9);color:var(--teal-ink)}
.band-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-top:36px}
.band-grid h3{font-size:var(--step-0);margin-bottom:.4em}
.band-grid p{font-size:var(--step--1);margin:0}

/* ---------- final cta ---------- */
.cta{background:var(--wash-2)}
.cta-in{text-align:center;max-width:70ch;margin-inline:auto}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:rgba(255,255,255,.66);padding-block:clamp(48px,6vw,80px) 30px}
.site-foot .foot-h{color:#fff;font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.1em}
.site-foot a{color:rgba(255,255,255,.66);text-decoration:none}
.site-foot a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:clamp(28px,4vw,52px)}
.foot-grid img{height:44px;width:auto;margin-bottom:20px}
.foot-grid li{margin-bottom:.6em;font-size:var(--step--1)}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  margin-top:clamp(34px,4vw,56px);padding-top:26px;
  border-top:1px solid rgba(255,255,255,.14);font-size:.82rem;
}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ================= interior pages ================= */
.wrap.narrow{width:min(100% - var(--gut)*2,760px)}
.center-flex{justify-content:center}

.crumbs{border-bottom:1px solid var(--line);background:var(--paper)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0;margin:0;font-size:var(--step--1);color:var(--ink-45)}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";color:var(--line)}
.crumbs a{color:var(--ink-45);text-decoration:none}
.crumbs a:hover{color:var(--teal-ink)}

.page-hero{padding-block:clamp(46px,7vw,90px) clamp(28px,4vw,52px);background:var(--paper);position:relative;overflow:clip}
.page-hero::before{
  content:"";position:absolute;top:-30%;right:-8%;width:52%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(160,212,229,.42),transparent 72%),
             radial-gradient(closest-side,rgba(240,99,125,.20),transparent 72%);
  filter:blur(46px);pointer-events:none;
}
.page-hero .wrap{position:relative}
.page-hero h1{max-width:20ch}
.page-hero .lede{max-width:62ch}

.pull-sec{padding-block:clamp(28px,4vw,52px)}
.pull{
  font-size:var(--step-2);line-height:1.28;font-weight:600;color:var(--ink);
  letter-spacing:-.02em;border-left:3px solid var(--pink);padding-left:clamp(18px,3vw,32px);margin:0;
}

/* ---- recognition ---- */
.recog{background:var(--wash)}
.recog.tight{padding-block:clamp(44px,6vw,80px)}
.recog-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px;margin-top:clamp(30px,4vw,50px);
}
.recog-grid.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.recog-grid li{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:24px 22px;font-size:var(--step-1);line-height:1.4;color:var(--ink);
  font-weight:500;letter-spacing:-.015em;position:relative;
}
.recog-grid li::after{
  content:"";position:absolute;left:22px;bottom:14px;width:26px;height:2px;background:var(--pink);opacity:.55;
}
.recog-foot{
  max-width:60ch;margin:clamp(28px,4vw,44px) auto 26px;text-align:center;
  font-size:var(--step-1);color:var(--ink);
}

/* ---- steps ---- */
.steps-sec{background:var(--paper)}
.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(20px,3vw,36px);margin:clamp(32px,4vw,56px) 0 0;padding:0;counter-reset:s;
}
.step{position:relative;padding-top:22px;border-top:2px solid var(--line)}
.step-n{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--teal);color:#fff;font-weight:700;font-size:1.22rem;margin-bottom:16px;
}
.step h3{font-size:var(--step-1);margin-bottom:.4em}
.step p{font-size:var(--step--1);margin:0}

/* ---- department cards ---- */
.dept-tag{
  font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-45);margin:0 0 .5em;
}
.dept-short{font-size:var(--step--1);margin-bottom:1.2em}
.dept-more{
  display:inline-flex;align-items:center;gap:.5em;margin-top:16px;
  font-size:var(--step--1);font-weight:600;color:var(--accent);
}
.dept-more svg{width:1em;height:1em;transition:transform .3s}
.dept:hover .dept-more svg{transform:translateX(4px)}
.dept ul{margin-top:auto}
.dept-hint{
  text-align:center;margin-top:26px;font-size:var(--step--1);color:var(--ink-45);
}
@media (max-width:900px){.dept-hint{display:none}}

/* ---- areas ---- */
.area-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(20px,3vw,34px);margin-top:clamp(32px,4vw,54px);
}
.area{border-top:2px solid var(--line);padding-top:20px}
.area h3{font-size:var(--step-0);margin-bottom:.4em}
.area p{font-size:var(--step--1);margin:0}

/* ---- related departments ---- */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:clamp(30px,4vw,50px)}
.rel-card{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;text-decoration:none;color:inherit;position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s;
}
.rel-card::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.rel-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px -30px rgba(29,29,29,.45)}
.rel-card:hover::after{transform:scaleX(1)}
.rel-card h2,.rel-card h3{font-size:var(--step-1);margin-bottom:.2em}
.rel-card p{font-size:var(--step--1);color:var(--ink-45);margin-bottom:0}

/* ---- tag cloud ---- */
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:clamp(30px,4vw,48px)}
.tag-cloud li{
  background:#fff;border:1px solid var(--line);border-radius:100px;
  padding:.5em 1.15em;font-size:var(--step--1);font-weight:500;color:var(--ink);
}

/* ---- people ---- */
.people{display:grid;gap:clamp(22px,3vw,38px);margin-top:clamp(32px,4vw,56px)}
.person{
  display:grid;grid-template-columns:280px 1fr;gap:clamp(22px,4vw,44px);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,34px);
}
.person:has(.person-body:only-child){grid-template-columns:1fr}
.person-photo{border-radius:14px;overflow:hidden;aspect-ratio:5/4;background:var(--wash-2)}
.person-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.person h3{font-size:var(--step-2);margin-bottom:.4em}
.known-as{font-weight:400;color:var(--ink-45);font-size:.62em;letter-spacing:0}
.person p{font-size:var(--step--1)}
.person-quote{
  margin:1.2em 0 0;padding-left:18px;border-left:3px solid var(--blue-lt);
  font-size:var(--step-0);color:var(--ink);font-style:normal;
}
.person-quote p{font-size:inherit;margin:0}
@media (max-width:760px){.person{grid-template-columns:1fr}.person-photo{max-width:320px}}

/* ---- press ---- */
.press{background:var(--paper)}
.press-card{
  max-width:820px;margin-inline:auto;text-align:center;
  border-top:2px solid var(--line);border-bottom:2px solid var(--line);padding:clamp(30px,4vw,52px) 0;
}
.press-card blockquote{margin:0}
.press-card blockquote p{
  font-size:var(--step-2);line-height:1.32;font-weight:600;color:var(--ink);letter-spacing:-.02em;
}
.press-card footer{font-size:var(--step--1);color:var(--ink-45)}
.press-card cite{font-style:normal;font-weight:600}
.press-list{display:grid;gap:10px;margin-top:clamp(28px,4vw,44px)}
.press-list a{
  display:grid;gap:4px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;text-decoration:none;color:inherit;transition:border-color .3s,transform .3s;
}
.press-list a:hover{border-color:var(--teal);transform:translateY(-2px)}
.press-outlet{font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-ink)}
.press-title{font-weight:600;color:var(--ink);font-size:var(--step-0)}
.press-list time{font-size:var(--step--1);color:var(--ink-45)}

/* ---- faq ---- */
.faq-sec{background:var(--wash)}
.faq{margin-top:clamp(28px,4vw,46px);border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 4px;cursor:pointer;list-style:none;
  font-size:var(--step-1);font-weight:600;color:var(--ink);letter-spacing:-.015em;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{width:20px;height:20px;flex:none;color:var(--teal);transition:transform .3s}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-a{padding:0 4px 24px}
.faq-a p{margin:0;max-width:64ch}

/* ---- journal ---- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px;margin-top:clamp(30px,4vw,50px)}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s}
.post-card a{display:block;padding:28px 26px;text-decoration:none;color:inherit;height:100%}
.post-card:hover{transform:translateY(-5px);box-shadow:0 22px 48px -30px rgba(29,29,29,.45)}
.post-cat{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 58%,#000);margin:0 0 .8em}
.post-card h2,.post-card h3{font-size:var(--step-1);line-height:1.18;letter-spacing:-.02em;margin-bottom:.45em}
.post-dek{font-size:var(--step--1);margin-bottom:1.4em}
.post-meta{font-size:.82rem;color:var(--ink-45);margin:0}

.post-head{padding-block:clamp(40px,6vw,76px) clamp(18px,2vw,28px)}
.post-head h1{max-width:22ch}
.post-body{padding-bottom:clamp(20px,3vw,40px)}
.post-body h2{font-size:var(--step-2);margin-top:1.7em}
.post-body p{max-width:68ch}
.post-body strong{color:var(--ink)}
.rich-list{margin:0 0 1.2em;padding:0;display:grid;gap:.6em}
.rich-list li{position:relative;padding-left:1.5em;font-size:var(--step-0);max-width:66ch}
.rich-list li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--pink);
}
.post-cta{
  background:var(--wash);border-radius:var(--r);padding:clamp(26px,4vw,40px);
  border-left:3px solid var(--accent);
}
.post-cta h2{font-size:var(--step-2);margin-bottom:.3em}
.post-cta p{font-size:var(--step--1)}

/* ---- two column cards ---- */
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.big-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(28px,4vw,44px);border-top:3px solid var(--accent);
}
.big-card h2{font-size:var(--step-2)}
.big-card p{font-size:var(--step--1)}

/* ---- contact ---- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,70px);align-items:start}
.contact-list{display:grid;gap:22px;margin-top:24px}
.contact-list li{display:grid;gap:3px}
.c-label{font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-ink)}
.contact-list a{color:var(--ink);text-decoration:none;font-size:var(--step-1);font-weight:600;letter-spacing:-.015em}
.contact-list a:hover{color:var(--teal-ink)}
.contact-list address{font-style:normal;font-size:var(--step-0);color:var(--ink-70);line-height:1.55}
.c-note{margin-top:28px;font-size:var(--step--1);color:var(--ink-45);max-width:38ch}

.contact-form-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,38px)}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin:0 0 16px;display:grid;gap:6px}
.field label{font-size:var(--step--1);font-weight:600;color:var(--ink)}
.field input,.field select,.field textarea{
  font:inherit;font-size:var(--step-0);color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line);border-radius:10px;padding:.72em .9em;width:100%;
  transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,130,157,.14);
}
.field textarea{resize:vertical;min-height:120px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:var(--step--1);color:var(--ink-45);margin:14px 0 0}
@media (max-width:860px){
  .contact-grid{grid-template-columns:1fr}
  .contact-form .row{grid-template-columns:1fr}
}

/* ---- founder teaser ---- */
.founder-teaser{background:var(--wash)}
.founder-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:center}
.founder-portrait{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:5/4;background:var(--wash-2)}
.founder-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.cred{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cred li{
  font-size:var(--step--1);font-weight:500;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:.42em 1em;
}
@media (max-width:820px){.founder-in{grid-template-columns:1fr}.founder-portrait{max-width:460px}}

/* ---- footer extras ---- */
.foot-blurb{font-size:var(--step--1)}
.foot-addr{font-style:normal;font-size:var(--step--1);line-height:1.6;margin-top:1.2em}

.form-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.form-actions .btn svg{width:1.05em;height:1.05em}
.form-err{
  background:#FDEEF1;border:1px solid var(--pink-lt);color:#8E2038;
  border-radius:10px;padding:.7em 1em;font-size:var(--step--1);margin:0 0 14px;
}

.foot-social{display:flex;gap:10px;margin-top:1.4em}
.foot-social a{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.7);
  transition:border-color .25s,color .25s,transform .25s;
}
.foot-social a:hover{border-color:#fff;color:#fff;transform:translateY(-2px)}
.foot-social svg{width:18px;height:18px}

/* ---- press ---- */
.press-logos{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(20px,4vw,54px);margin:clamp(22px,3vw,34px) 0 0;
}
.press-logos a{
  font-size:var(--step-0);font-weight:600;letter-spacing:-.01em;color:var(--ink);
  text-decoration:none;opacity:.62;transition:opacity .25s,color .25s;
}
.press-logos a:hover{opacity:1;color:var(--teal-ink)}
.press-quote{
  max-width:760px;margin:clamp(30px,4vw,50px) auto 0;text-align:center;
  border-top:2px solid var(--line);padding-top:clamp(26px,4vw,42px);
}
.press-quote p{font-size:var(--step-2);line-height:1.32;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.press-quote footer{font-size:var(--step--1);color:var(--ink-45)}
.press-quote cite{font-style:normal;font-weight:600}
.press-open{
  text-align:center;margin:clamp(24px,3vw,36px) auto 0;max-width:52ch;
  font-size:var(--step--1);color:var(--ink-45);
}
.press-note{display:block;font-size:var(--step--1);color:var(--ink-70);margin-top:.4em;max-width:62ch}
.press-note em{font-style:normal;color:var(--ink-45)}

/* ---- paper objects from the element kit ---- */
.paper-el img{display:block;width:100%;height:auto}

.page-hero-in{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,56px);align-items:center}
.page-hero.has-el .page-hero-in{grid-template-columns:1.25fr .75fr}
.page-hero-copy{min-width:0}
.page-hero-el{display:grid;place-items:center}
.page-hero-el .paper-el{max-width:min(100%,330px);display:block}
@media (prefers-reduced-motion:no-preference){
  .page-hero-el .paper-el{animation:hover-drift 13s ease-in-out infinite}
}
@keyframes hover-drift{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%    {transform:translateY(-12px) rotate(-1.2deg)}
}
@media (max-width:820px){
  .page-hero.has-el .page-hero-in{grid-template-columns:1fr}
  .page-hero-el{order:-1}
  .page-hero-el .paper-el{max-width:min(58%,220px)}
}

.c-directions{
  display:inline-flex;align-items:center;gap:.5em;margin-top:.6em;
  font-size:var(--step--1)!important;font-weight:600!important;color:var(--teal-ink)!important;
  text-decoration:none;
}
.c-directions svg{width:1em;height:1em;transition:transform .3s}
.c-directions:hover svg{transform:translateX(3px)}

/* ================= design layer ================= */

/* ---- department cards carry their paper object ---- */
.dept{position:relative;isolation:isolate}
.dept-mark{
  position:absolute;right:-14%;bottom:-12%;width:62%;z-index:-1;
  opacity:.10;filter:grayscale(1);
  transform:rotate(-9deg) scale(.92);
  transition:transform .7s cubic-bezier(.2,.8,.3,1),opacity .5s ease;
  pointer-events:none;
}
.dept-mark img{width:100%;height:auto;display:block}
.dept:hover .dept-mark,.dept:focus-visible .dept-mark{
  opacity:.20;transform:rotate(2deg) scale(1.08) translate(-6%,-6%);
}
.dept::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(120% 90% at 80% 100%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%);
  opacity:0;transition:opacity .5s ease;
}
.dept:hover::before,.dept:focus-visible::before{opacity:1}

/* ---- the plane travels the flight path through the steps ---- */
.steps-sec{position:relative}
/* ---- closing band ---- */
.cta{position:relative;overflow:hidden;background:var(--wash-2)}
.cta-waves{z-index:0;opacity:.75}
.cta-in{position:relative;z-index:1}

/* ---- the band gradient, from the kit's gradient plates ---- */
.band{
  background:
    radial-gradient(70% 120% at 8% 12%, #16A0BE 0%, transparent 60%),
    radial-gradient(70% 110% at 92% 20%, #F0637D 0%, transparent 62%),
    radial-gradient(80% 120% at 60% 108%, #F16537 0%, transparent 60%),
    linear-gradient(120deg, var(--teal), #1795B2 45%, var(--pink));
}
.band-waves{position:absolute;inset:0;z-index:0;opacity:.5;mix-blend-mode:screen}
.band > :not(canvas){position:relative;z-index:1}

/* ---- richer reveals ---- */
.rv{opacity:0;transform:translateY(26px) scale(.985);filter:blur(4px)}
.rv.in{
  opacity:1;transform:none;filter:none;
  transition:opacity .85s ease,transform .95s cubic-bezier(.2,.85,.3,1),filter .8s ease;
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;filter:none;transition:none}
  .fp-plane,.fp-line{animation:none}
}

/* ---- section headings pick up the logo waveform ---- */
.eyebrow{position:relative;display:inline-flex;align-items:center;gap:.7em;color:var(--teal-ink)}
.eyebrow::before{
  content:"";width:30px;height:10px;flex:none;
  background:currentColor;opacity:.85;
  /* the waveform traced from the logo artwork itself, so the mark beside
     every eyebrow is the same line that sits inside the wordmark */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'%3E%3Cpath d='M0.00 5.36 Q0.64 4.33 0.96 3.96 Q1.28 3.58 1.68 3.44 Q2.07 3.31 2.39 3.38 Q2.71 3.44 3.03 3.60 Q3.35 3.76 3.67 4.00 Q3.99 4.24 4.31 4.53 Q4.63 4.82 4.95 5.09 Q5.27 5.36 5.66 5.73 Q6.06 6.11 6.38 6.33 Q6.70 6.56 7.02 6.71 Q7.34 6.87 7.66 6.93 Q7.98 7.00 8.30 6.84 Q8.62 6.69 8.94 6.33 Q9.26 5.98 9.65 5.29 Q10.05 4.60 10.37 3.96 Q10.69 3.31 11.01 2.69 Q11.33 2.07 11.65 1.69 Q11.97 1.31 12.29 1.16 Q12.61 1.00 13.01 1.11 Q13.40 1.22 13.72 1.49 Q14.04 1.76 14.36 2.18 Q14.68 2.60 15.00 3.16 Q15.32 3.71 15.64 4.31 Q15.96 4.91 16.28 5.51 Q16.60 6.11 16.99 6.82 Q17.39 7.53 17.71 7.93 Q18.03 8.33 18.35 8.56 Q18.67 8.78 18.99 8.89 Q19.31 9.00 19.63 8.98 Q19.95 8.96 20.35 8.64 Q20.74 8.33 21.06 7.89 Q21.38 7.44 21.70 6.96 Q22.02 6.47 22.34 5.96 Q22.66 5.44 22.98 5.00 Q23.30 4.56 23.62 4.11 Q23.94 3.67 24.34 3.29 Q24.73 2.91 25.05 2.80 Q25.37 2.69 25.69 2.84 Q26.01 3.00 26.33 3.29 Q26.65 3.58 26.97 4.02 Q27.29 4.47 27.61 4.87 Q27.93 5.27 28.32 5.80 Q28.72 6.33 29.04 6.64 Q29.36 6.96 29.68 6.87 L30.00 6.78' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'%3E%3Cpath d='M0.00 5.36 Q0.64 4.33 0.96 3.96 Q1.28 3.58 1.68 3.44 Q2.07 3.31 2.39 3.38 Q2.71 3.44 3.03 3.60 Q3.35 3.76 3.67 4.00 Q3.99 4.24 4.31 4.53 Q4.63 4.82 4.95 5.09 Q5.27 5.36 5.66 5.73 Q6.06 6.11 6.38 6.33 Q6.70 6.56 7.02 6.71 Q7.34 6.87 7.66 6.93 Q7.98 7.00 8.30 6.84 Q8.62 6.69 8.94 6.33 Q9.26 5.98 9.65 5.29 Q10.05 4.60 10.37 3.96 Q10.69 3.31 11.01 2.69 Q11.33 2.07 11.65 1.69 Q11.97 1.31 12.29 1.16 Q12.61 1.00 13.01 1.11 Q13.40 1.22 13.72 1.49 Q14.04 1.76 14.36 2.18 Q14.68 2.60 15.00 3.16 Q15.32 3.71 15.64 4.31 Q15.96 4.91 16.28 5.51 Q16.60 6.11 16.99 6.82 Q17.39 7.53 17.71 7.93 Q18.03 8.33 18.35 8.56 Q18.67 8.78 18.99 8.89 Q19.31 9.00 19.63 8.98 Q19.95 8.96 20.35 8.64 Q20.74 8.33 21.06 7.89 Q21.38 7.44 21.70 6.96 Q22.02 6.47 22.34 5.96 Q22.66 5.44 22.98 5.00 Q23.30 4.56 23.62 4.11 Q23.94 3.67 24.34 3.29 Q24.73 2.91 25.05 2.80 Q25.37 2.69 25.69 2.84 Q26.01 3.00 26.33 3.29 Q26.65 3.58 26.97 4.02 Q27.29 4.47 27.61 4.87 Q27.93 5.27 28.32 5.80 Q28.72 6.33 29.04 6.64 Q29.36 6.96 29.68 6.87 L30.00 6.78' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.center .eyebrow{justify-content:center}

/* ---- interior paper objects, lifted off the page ----
   The object's own shadow, which is what makes it read as sitting above the
   page rather than printed on it. It goes on the image while the drift below
   moves the parent: a moving layer carrying a filter is re-rasterised every
   frame, but a filtered child inside a moving parent is rasterised once and
   then simply composited. */
.page-hero-el .paper-el{will-change:transform}
.page-hero-el .paper-el img{display:block;filter:drop-shadow(0 18px 24px rgba(29,29,29,.15))}
.dept-mark img{filter:drop-shadow(0 13px 18px rgba(29,29,29,.13))}
@media (prefers-reduced-motion:no-preference){
  .dept-mark{animation:drift-b 17s ease-in-out infinite}
}

.band{position:relative;overflow:hidden;isolation:isolate}
.band-eyebrow{color:rgba(255,255,255,.9)!important}
.band-eyebrow::before{background:rgba(255,255,255,.9)}
.band-lede{color:rgba(255,255,255,.92)!important;max-width:60ch}

/* ---- micro-interactions ---- */
.nav a:not(.btn){position:relative;padding-block:4px}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--teal);transform:scaleX(0);transform-origin:right;
  transition:transform .42s cubic-bezier(.2,.8,.3,1);
}
.nav a:not(.btn):hover::after,
.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]{color:var(--teal-ink)}

/* a light sweeps across the primary button */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.30) 48%,transparent 66%);
  transform:translateX(-120%);
}
.btn-primary:hover::after{transform:translateX(120%);transition:transform .85s cubic-bezier(.4,0,.2,1)}

.btn svg{transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.btn:hover svg{transform:translateX(4px)}

/* the founder portrait sits on one of the kit's gradient plates */
.founder-portrait{position:relative;isolation:isolate}
.founder-portrait::before{
  content:"";position:absolute;inset:-8% -6% -6% -8%;z-index:-1;border-radius:calc(var(--r) + 10px);
  background:
    radial-gradient(60% 70% at 20% 20%, rgba(160,212,229,.85), transparent 65%),
    radial-gradient(60% 70% at 85% 35%, rgba(240,99,125,.55), transparent 65%),
    radial-gradient(70% 70% at 55% 100%, rgba(241,101,55,.45), transparent 65%);
  filter:blur(16px);
}

/* cards lift with a touch more depth */
.aud,.post-card,.rel-card,.dept{transition:transform .45s cubic-bezier(.2,.8,.3,1),box-shadow .45s,border-color .35s}
.aud:hover{transform:translateY(-4px)}

/* section headings breathe more, per the kit's spacing note */
.section .center{margin-inline:auto;max-width:62ch}
.section .center h2{margin-bottom:.5em}

/* ================= fixes from the design audit ================= */

/* the steps are an <ol>: its own markers were doubling the numbered circles */
.steps{list-style:none;padding:0;margin-left:0}
.steps li::marker{content:none}

/* Wave Community's light blue failed contrast as a link colour */
.dept[style*="A0D4E5"] .dept-more{color:var(--teal-ink)}
.dept-more{color:color-mix(in srgb,var(--accent) 82%,var(--ink))}

/* the band was bottom-aligned inside a stretched grid cell */
.band{display:flex;flex-direction:column;justify-content:center}
.band-grid{margin-top:32px}

/* department cards: equal rhythm regardless of how the tag wraps */
.dept-tag{min-height:2.6em;display:flex;align-items:flex-start}
.dept ul{margin-top:20px}
.dept-short{min-height:5.2em}

/* the watermarks read as smudges rather than design */
.dept-mark{display:none}

/* sections were running to very tall dead space */
.steps-sec .steps{margin-bottom:0}
.section + .section{padding-top:clamp(56px,7vw,104px)}

/* the waveform mark on eyebrows was reading as a stray dash next to short labels */
/* 3:1, matching the traced waveform, so both peaks stay legible */
.eyebrow::before{width:26px;height:8.7px;opacity:.8}

/* ================= colour ==================
   The kit's palette is teal, pink, orange and light blue over white. Until now
   the site leaned almost entirely on teal. These rotate the accents through the
   repeating components so colour carries down the page. */

/* --- steps progress through the palette --- */
.steps li:nth-child(1){--c:var(--teal)}
.steps li:nth-child(2){--c:var(--pink)}
.steps li:nth-child(3){--c:var(--orange)}
.step{border-top:none;position:relative;padding-top:26px}
.step::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 18%,transparent));
}
.step-n{
  background:color-mix(in srgb,var(--c) 90%,#000);
  box-shadow:0 8px 18px -8px color-mix(in srgb,var(--c) 75%,transparent);
}

/* --- recognition cards cycle the accents --- */
.recog-grid li:nth-child(3n+1)::after{background:var(--teal)}
.recog-grid li:nth-child(3n+2)::after{background:var(--pink)}
.recog-grid li:nth-child(3n+3)::after{background:var(--orange)}
.recog-grid li::after{width:30px;height:2.5px;border-radius:2px;opacity:.9}
.recog-grid li{
  background:#fff;transition:transform .4s cubic-bezier(.2,.8,.3,1),box-shadow .4s;
}
.recog-grid li:hover{transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(29,29,29,.4)}

/* --- audience cards get coloured tops --- */
.aud{position:relative;overflow:hidden}
.aud::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--c,var(--teal));
  transform:scaleX(.25);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.aud:hover::before{transform:scaleX(1)}
.aud-grid > :nth-child(6n+1){--c:var(--teal)}
.aud-grid > :nth-child(6n+2){--c:var(--pink)}
.aud-grid > :nth-child(6n+3){--c:var(--orange)}
.aud-grid > :nth-child(6n+4){--c:#4FA8C4}
.aud-grid > :nth-child(6n+5){--c:var(--pink-lt)}
.aud-grid > :nth-child(6n+6){--c:var(--teal)}

/* --- why-we-work icons cycle too --- */
.grid-3 > :nth-child(6n+1) svg{color:var(--teal)}
.grid-3 > :nth-child(6n+2) svg{color:var(--pink)}
.grid-3 > :nth-child(6n+3) svg{color:var(--orange)}
.grid-3 > :nth-child(6n+4) svg{color:#4FA8C4}
.grid-3 > :nth-child(6n+5) svg{color:var(--pink-lt)}
.grid-3 > :nth-child(6n+6) svg{color:var(--teal)}

/* --- department cards carry a wash of their own colour --- */
.dept{
  background:linear-gradient(168deg,
    color-mix(in srgb,var(--accent) 5%,#fff) 0%,
    #fff 46%);
}
.dept:hover{border-color:color-mix(in srgb,var(--accent) 32%,var(--line))}

/* --- journal cards pick up their department's colour --- */
.post-card{border-top:3px solid color-mix(in srgb,var(--accent) 55%,transparent)}

/* --- section washes, from the kit's gradient plates --- */
.recog{
  background:
    radial-gradient(60% 55% at 12% 0%,rgba(160,212,229,.34),transparent 62%),
    radial-gradient(50% 50% at 92% 8%,rgba(240,99,125,.16),transparent 62%),
    var(--wash);
}
.depts{
  background:
    radial-gradient(55% 50% at 88% 2%,rgba(241,101,55,.13),transparent 62%),
    radial-gradient(50% 45% at 6% 96%,rgba(160,212,229,.30),transparent 62%),
    var(--wash);
}
.cta{
  background:
    radial-gradient(60% 60% at 20% 0%,rgba(160,212,229,.42),transparent 64%),
    radial-gradient(55% 55% at 84% 100%,rgba(241,101,55,.20),transparent 64%),
    var(--wash-2);
}
.faq-sec{
  background:
    radial-gradient(55% 55% at 92% 4%,rgba(240,99,125,.14),transparent 62%),
    var(--wash);
}

/* six cards read better as two rows of three than four and two */
@media (min-width:1000px){
  .recog-grid{grid-template-columns:repeat(3,1fr)}
  .aud-grid{grid-template-columns:repeat(3,1fr)}
}

/* card internals line up across the row regardless of how the text wraps */
.dept-tag{min-height:3.1em}
.dept ul{margin-top:18px}
.dept-more{margin-top:auto;padding-top:20px}

/* interior heroes carry the same wave language as the homepage */
.page-hero{position:relative;overflow:hidden}
.page-hero-waves{
  position:absolute;inset:0;z-index:0;opacity:.85;
  /* fade at BOTH ends: fading only the left meant the wave was chopped off
     square against the right edge of the screen */
  -webkit-mask-image:linear-gradient(100deg,transparent 2%,rgba(0,0,0,.35) 22%,#000 48%,#000 72%,transparent 97%),
                     linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
  mask-image:linear-gradient(100deg,transparent 2%,rgba(0,0,0,.35) 22%,#000 48%,#000 72%,transparent 97%),
             linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.page-hero .wrap{position:relative;z-index:1}
.page-hero > :not(canvas){position:relative;z-index:1}

/* ---- the paper plane travels the flight path ----
   The plane lives inside the same SVG as the dotted line and is carried by
   animateMotion along that very path, so it cannot drift off the dots the way a
   CSS offset-path measured in pixels did against a stretched SVG.

   The SVG scales uniformly, which keeps the plane from being smeared wide on a
   narrow screen, and the container takes the viewBox's own ratio so nothing is
   letterboxed. It is no longer hidden on phones. */
.flightpath{
  position:relative;width:100%;aspect-ratio:1200/96;
  margin:clamp(26px,4vw,46px) 0 -6px;color:var(--blue-lt);
}
.flightpath svg{width:100%;height:100%;display:block;overflow:visible}
.fp-line{animation:dash-drift 30s linear infinite}
@keyframes dash-drift{to{stroke-dashoffset:-280}}
.fp-plane image{filter:drop-shadow(0 3px 4px rgba(29,29,29,.20))}

@media (prefers-reduced-motion:reduce){
  .fp-line{animation:none}
  .fp-plane{display:none}
}

/* the steps were running into a long empty gap before the next section */
.steps-sec{padding-bottom:clamp(48px,6vw,88px)}
.steps{margin-top:clamp(24px,3vw,38px)}

/* ---- the wave lines gather into the brain ----
   The opening is the logo's own waveform building the brain: the lines flow in
   across the hero, draw together into the brain's silhouette, and the paper
   brain materialises inside them. They keep running through it afterwards. */
.brain-waves{
  position:absolute;top:48%;left:72%;width:min(33vw,430px);aspect-ratio:726/675;
  transform:translate(-50%,-50%) scale(2.05);
  opacity:0;z-index:0;pointer-events:none;
  -webkit-mask-image:url('../paper/brain.png');mask-image:url('../paper/brain.png');
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:transform 1.9s cubic-bezier(.22,.8,.24,1),opacity 1.1s ease;
}
.is-gathering .brain-waves{transform:translate(-50%,-50%) scale(1);opacity:1}
/* the brain ends clean: the lines hand over to it and leave */
.is-settled .brain-waves{opacity:0;transition:opacity 1.6s ease}
.brain-waves canvas{width:100%;height:100%;display:block}

@media (max-width:900px){
  .brain-waves{top:23%;left:50%;width:min(66vw,330px)}
}
@media (prefers-reduced-motion:reduce){
  .brain-waves{transition:none;transform:translate(-50%,-50%) scale(1);opacity:0}
}

/* ---- every paper object drifts ----
   Real paper never sits perfectly still. Each object gets its own period and
   phase so they never beat in sync, which is what would make it read as a
   looping animation rather than as objects hanging in air. */
@media (prefers-reduced-motion:no-preference){
  .page-hero-el .paper-el{animation:drift-a 15s ease-in-out infinite}
  .page-hero.has-el:nth-of-type(even) .paper-el{animation-name:drift-b}
}
@keyframes drift-a{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  33%    {transform:translate3d(7px,-22px,0) rotate(-2.6deg)}
  66%    {transform:translate3d(-9px,-11px,0) rotate(1.9deg)}
}
@keyframes drift-b{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  40%    {transform:translate3d(-10px,-19px,0) rotate(2.8deg)}
  70%    {transform:translate3d(5px,-7px,0) rotate(-2deg)}
}

/* the objects sit on a soft ground shadow that breathes with them */
.page-hero-el{position:relative}
.page-hero-el::after{
  content:"";position:absolute;left:50%;bottom:2%;width:46%;height:5%;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(29,29,29,.07),transparent 74%);
  filter:blur(10px);
}
@media (prefers-reduced-motion:no-preference){
  .page-hero-el::after{animation:shade 15s ease-in-out infinite}
}
@keyframes shade{
  0%,100%{transform:translateX(-50%) scale(1);opacity:.9}
  33%    {transform:translateX(-50%) scale(.86);opacity:.6}
  66%    {transform:translateX(-50%) scale(.95);opacity:.78}
}

/* ---- section gradients drift too ---- */
@media (prefers-reduced-motion:no-preference){
  .recog,.depts,.cta,.faq-sec{background-size:180% 180%,180% 180%,100% 100%;animation:wash 28s ease-in-out infinite alternate}
  .faq-sec{background-size:180% 180%,100% 100%}
}
@keyframes wash{
  0%  {background-position:0% 0%,100% 0%,0 0}
  100%{background-position:22% 14%,74% 12%,0 0}
}

/* the header mark waits until the opening sequence has cleared */
.site-head .brand{opacity:0;transition:opacity .5s ease}
.intro-done .site-head .brand,.no-js .site-head .brand{opacity:1}


/* ================= the opening reel =================
   The paper objects rush the camera in quick succession, the last of them
   curve in and collapse into the brain, and a beam of the brand gradient
   crosses it. Everything runs on transform and opacity only, on its own
   compositor layer, so it holds 60fps and never reflows the page. */
.reel{
  position:fixed;inset:0;z-index:70;pointer-events:none;
  perspective:1100px;perspective-origin:70% 46%;
  background:var(--paper);
  opacity:1;transition:opacity .5s ease;
}
.intro-done .reel{opacity:0}
.reel.gone{display:none}

.reel-inner{position:absolute;inset:0;transform-style:preserve-3d}

.reel-item{
  position:absolute;top:50%;left:50%;
  contain:layout paint;
  width:clamp(152px,16.5vw,268px);
  margin:0;opacity:0;
  transform:translate(-50%,-50%) translateZ(-2600px);
  will-change:transform,opacity,filter;
}
.reel-item picture{display:block}
.reel-item img{width:100%;height:auto;display:block}

/* the beam that crosses the brain as it lands */
.reel-beam{
  position:absolute;top:50%;left:70%;
  width:min(56vw,720px);height:min(56vw,720px);
  transform:translate(-50%,-50%) scale(.2);
  opacity:0;border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(255,255,255,.92) 0%,
    rgba(196,228,240,.72) 22%,
    rgba(14,130,157,.42)  40%,
    rgba(240,99,125,.34)  58%,
    rgba(241,101,55,.18)  74%,
    rgba(241,101,55,.05)  86%,
    transparent           100%);
  mix-blend-mode:screen;
  will-change:transform,opacity;
}

@media (max-width:900px){
  .reel{perspective-origin:50% 30%}
  .reel-beam{left:50%;top:26%}
  .reel-item{width:clamp(120px,34vw,220px)}
}

@media (prefers-reduced-motion:reduce){
  .reel{display:none}
}

/* ================= page-to-page light =================
   Moving between pages sends a band of the brand gradient across the screen.
   Chrome swaps the documents behind it with a view transition, so the beam
   covers the swap rather than the swap interrupting the beam. */
/* ---- moving between pages ----

   The beam does not slide over a page that has already arrived — that was the
   mistake in the first three attempts, and it always read as an effect laid on
   top rather than as a transition. It carries the change instead:

     leaving   the beam sweeps in from the left and accelerates until its dense
               middle covers the whole viewport
     the swap  happens underneath it, unseen
     arriving  the new document starts with the beam still covering, and it
               decelerates away to the right, uncovering the new page

   One movement, spread across two documents, so the beam is what takes you
   there. The panel is 300% of the viewport wide, so translating it by a third
   of itself moves it exactly one screen.

   Transform and opacity only, no filters: this is one composited layer and it
   holds frame rate on a dual-core machine. */
.pagebeam{
  position:fixed;inset:0;z-index:300;pointer-events:none;overflow:hidden;
}
.pagebeam span{
  /* 150% of the viewport, not 300%: the panel only has to cover the screen with
     a little margin for the tilt. The first version was nine megapixels of
     composited layer, which is a lot to ask of a phone for no benefit. */
  position:absolute;top:-16%;left:0;height:132%;width:150%;
  transform:translateX(-16.667%) rotate(6deg);
  transform-origin:50% 50%;backface-visibility:hidden;
  /* At full cover the viewport sees the middle two thirds of this gradient, so
     the brand runs teal, blue, light, pink, orange across the screen. The core
     is near-white: a sheet of light passing, rather than a flood of colour. */
  background:linear-gradient(93deg,
    rgba(160,212,229,0)     0%,
    rgba(160,212,229,.24)   8%,
    rgba(14,130,157,.90)   20%,
    rgba(160,212,229,.98)  32%,
    rgba(243,251,253,1)    44%,
    rgba(243,251,253,1)    51%,
    rgba(240,99,125,.98)   59%,
    rgba(241,101,55,.90)   70%,
    rgba(241,101,55,.30)   82%,
    rgba(241,101,55,0)    100%);
}

/* The beam does not clear on a timer. It holds the screen until the page
   behind it has actually finished arriving — stylesheet applied, fonts
   resolved, hero art decoded, reveal pass run — and only then moves off. That
   is the whole point: when the light passes, the page is already there, fully
   formed, rather than assembling itself in front of the visitor.

   It also means the document swap, which takes 200ms or so and during which
   nothing can move, happens while the beam is deliberately at rest. Movement,
   stillness, movement. Nothing can look stalled, however slow the page. */
.pagebeam span{
  transform:translateX(-16.667%) rotate(6deg);
  opacity:1;
}

/* leaving the old page: in from off the left, settling to a stop as it covers */
.pagebeam.leaving span{animation:beam-in .62s cubic-bezier(.34,0,.18,1) both}
@keyframes beam-in{
  0%  {transform:translateX(-100%) rotate(6deg); opacity:0; visibility:visible}
  18% {opacity:1}
  86% {transform:translateX(-16.667%) rotate(6deg); opacity:1}
  100%{transform:translateX(-16.667%) rotate(6deg); opacity:1; visibility:visible}
}

/* arriving: released by the script once the new page is ready. It leaves the
   way it came — easing away from rest and dissolving as it goes, rather than
   sliding off at full speed. */
.pagebeam.go span{animation:beam-out .78s cubic-bezier(.38,0,.42,1) both}
@keyframes beam-out{
  0%  {transform:translateX(-16.667%) rotate(6deg); opacity:1; visibility:visible}
  62% {opacity:1}
  100%{transform:translateX(66.667%) rotate(6deg); opacity:0; visibility:hidden}
}

/* if the script never runs at all, the page must not stay covered */
.pagebeam{animation:beam-failsafe .5s linear 2.4s both}
@keyframes beam-failsafe{to{opacity:0;visibility:hidden}}

/* the logo's colours sign the new page once the beam has cleared it */
.site-head::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  pointer-events:none;transform:scaleX(0);transform-origin:50% 50%;
  background:linear-gradient(90deg,transparent 0%,var(--teal) 18%,
    var(--blue-lt) 38%,var(--pink) 60%,var(--orange) 80%,transparent 100%);
  animation:page-seam 1.1s cubic-bezier(.22,.72,.24,1) .52s both;
}
@keyframes page-seam{
  0%  {transform:scaleX(0);opacity:0}
  18% {opacity:1}
  66% {transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .pagebeam{display:none}
  .site-head::after{animation:none;opacity:0}
}

}


}

/* ---- work with us ---- */
.roles{
  list-style:none;margin:clamp(22px,3vw,34px) 0 0;padding:0;
  display:grid;gap:clamp(14px,2vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
}
.role{
  padding:clamp(18px,2vw,24px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.role:hover{border-color:var(--blue-lt);box-shadow:0 12px 30px -18px rgba(20,40,60,.5);transform:translateY(-2px)}
.role h3{font-size:var(--step-0);margin:0 0 .4em}
.role p{margin:0;color:var(--ink-45);font-size:var(--step--1)}

.apply-sec{background:var(--wash)}
.apply-grid{display:grid;gap:clamp(28px,4vw,60px);grid-template-columns:1fr}
@media (min-width:900px){.apply-grid{grid-template-columns:0.85fr 1fr;align-items:start}}
.apply-copy h2{margin-top:.2em}
.apply-points{margin:18px 0 0;padding-left:1.1em;color:var(--ink-45);font-size:var(--step--1)}
.apply-points li{margin-bottom:.5em}
.apply-form{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,3vw,32px);
}
.field-hint{font-size:var(--step--2);color:var(--ink-45)}
.field input[type=file]{
  padding:10px;background:var(--wash);border:1px dashed var(--line);
  border-radius:10px;font-size:var(--step--1);cursor:pointer;width:100%;
}
.field input[type=file]::file-selector-button{
  margin-right:12px;padding:.5em 1.1em;border:0;border-radius:100px;cursor:pointer;
  background:var(--teal);color:#fff;font:inherit;font-size:var(--step--2);font-weight:600;
}
.form-ok{
  margin:16px 0 0;padding:14px 16px;border-radius:12px;
  background:color-mix(in srgb,var(--teal) 10%,#fff);
  border:1px solid color-mix(in srgb,var(--teal) 34%,transparent);
  color:var(--ink);font-size:var(--step--1);
}

/* ---- affiliations: the programme Wave Rx is licensed from, and the research
   body behind it. Both are on the client's live site and were missing here. */
.foot-affil{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;
  padding:26px 0 4px;border-top:1px solid rgba(255,255,255,.14);
  margin-top:clamp(26px,4vw,44px);
}
.affil-label{
  margin:0;font-size:.74rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
}
.affil-logos{display:flex;flex-wrap:wrap;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.affil-logos img{
  /* Both marks are now pre-rendered white at their source resolution rather
     than being small dark files inverted at runtime, so they stay sharp and
     the Gibson wordmark is actually readable. */
  height:58px;width:auto;display:block;
  opacity:.88;transition:opacity .3s ease;
}
.affil-logos a{display:block;line-height:0}
.affil-logos a:hover img,.affil-logos a:focus-visible img{opacity:1}
@media (max-width:560px){.affil-logos img{height:46px}}

/* agency credit: a plain, visible line. Brand name as the anchor rather than
   keywords — a normal editorial credit, not a link scheme. */
.foot-credit a{
  color:rgba(255,255,255,.72);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.24);
  transition:color .3s ease,border-color .3s ease;
}
.foot-credit a:hover,.foot-credit a:focus-visible{color:#fff;border-color:rgba(255,255,255,.7)}

/* opening hours, laid out so the closed days are obvious at a glance */
.hours{border-collapse:collapse;margin-top:2px;font-size:var(--step--1);width:100%;max-width:260px}
.hours th{text-align:left;font-weight:500;color:var(--ink);padding:3px 14px 3px 0;white-space:nowrap}
.hours td{text-align:right;color:var(--ink-45);padding:3px 0;font-variant-numeric:tabular-nums}
.hours tr.shut th,.hours tr.shut td{color:var(--ink-45);opacity:.72}

/* ---- the evidence page ----
   The findings are BrainRx's; the drawing is ours. Charts are built from the
   brand palette and the kit's type rather than lifted as pictures. */
.credit-note{
  border-left:3px solid var(--teal);
  padding:clamp(18px,2.6vw,26px) 0 clamp(18px,2.6vw,26px) clamp(18px,3vw,30px);
  display:flex;flex-direction:column;gap:14px;background:var(--wash);
  padding-right:clamp(18px,3vw,30px);border-radius:0 var(--r) var(--r) 0;
}
.credit-note p{margin:0;color:var(--ink-45);font-size:var(--step--1)}
.credit-note strong{color:var(--ink)}

.stat-row{
  list-style:none;margin:clamp(20px,3vw,30px) 0 0;padding:0;
  display:grid;gap:clamp(14px,2vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
}
.stat-row li{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;gap:6px;
}
.stat-n{font-size:var(--step-2);font-weight:700;letter-spacing:-.02em;color:var(--teal-ink);line-height:1.05}
.stat-l{font-size:var(--step--2);color:var(--ink-45);line-height:1.4}

.chart-key{display:flex;flex-wrap:wrap;gap:10px 26px;margin:20px 0 14px;font-size:var(--step--2);color:var(--ink-45)}
.chart-key span{display:inline-flex;align-items:center;gap:8px}
.chart-key i{width:14px;height:14px;border-radius:4px;flex:none}
.chart-key .k-a{background:var(--teal)}
.chart-key .k-b{background:#C5522D}

table.chart{width:100%;border-collapse:collapse;font-size:var(--step--1)}
table.chart thead th{
  text-align:left;padding:0 0 10px;font-size:var(--step--2);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);
  border-bottom:1px solid var(--line);
}
table.chart thead th:not(:first-child){width:34%}
table.chart tbody th{
  text-align:left;font-weight:500;color:var(--ink);padding:11px 16px 11px 0;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
table.chart tbody td{padding:11px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.bar{
  display:flex;align-items:center;height:26px;border-radius:5px;
  width:var(--v);min-width:44px;padding-right:9px;justify-content:flex-end;
  color:#fff;font-size:var(--step--2);font-weight:700;
  font-variant-numeric:tabular-nums;
}
/* deepened so the white figure on the bar clears AA: the kit's teal is
   4.47:1 and its orange only 3.15:1 against white */
.bar-a{background:var(--teal-deep)}
.bar-b{background:#C5522D}

table.heat{width:100%;border-collapse:collapse;font-size:var(--step--2);min-width:640px}
table.heat th{font-weight:700;padding:9px 8px;text-align:center}
table.heat thead th{
  font-size:calc(var(--step--2) * .92);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-45);border-bottom:1px solid var(--line);vertical-align:bottom;
}
table.heat tbody th{
  text-align:left;font-weight:500;color:var(--ink);white-space:nowrap;padding-right:14px;
}
table.heat td{padding:4px;text-align:center}
.cell{
  display:grid;place-items:center;height:36px;border-radius:6px;
  font-weight:700;font-variant-numeric:tabular-nums;
  /* one hue, stepped by value, so the eye reads magnitude without a legend */
  background:color-mix(in srgb,var(--teal) calc(var(--v) * 82%),#fff);
  color:var(--ink);
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
@media (max-width:560px){
  table.chart tbody th{white-space:normal}
  .bar{height:24px}
}

/* ---- the segmented before/after charts ----
   Two bars per skill on a shared 0-100 percentile scale: where the group began
   and where it finished. Same scale for every group so they can be compared. */
.seg-picker{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:clamp(20px,3vw,28px) 0 clamp(18px,2.5vw,24px);
}
.seg-picker button{
  display:flex;flex-direction:column;gap:1px;align-items:flex-start;
  padding:9px 14px;border-radius:100px;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);
  font:inherit;font-size:var(--step--1);font-weight:600;color:var(--ink);
  transition:border-color .25s ease,background .25s ease,color .25s ease;
}
.seg-picker button span{font-weight:400;font-size:var(--step--2);color:var(--ink-45)}
.seg-picker button:hover{border-color:var(--blue-lt)}
.seg-picker button[aria-selected="true"]{
  background:var(--teal-deep);border-color:var(--teal-deep);color:#fff;
}
.seg-picker button[aria-selected="true"] span{color:rgba(255,255,255,.82)}

.seg-meta{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;
  margin:0 0 18px;padding:0;font-size:var(--step--1);color:var(--ink-45);
}
.seg-meta b{color:var(--ink);font-weight:700}
.seg-meta i{font-style:normal;color:var(--teal-ink);font-weight:700}

table.seg-chart{width:100%;border-collapse:collapse;font-size:var(--step--1)}
table.seg-chart th{
  text-align:left;font-weight:500;color:var(--ink);
  padding:9px 18px 9px 0;white-space:nowrap;width:1%;
}
table.seg-chart td{padding:9px 0;position:relative}
table.seg-chart tr + tr th,table.seg-chart tr + tr td{border-top:1px solid var(--line)}

/* the two bars share one track, so length is directly comparable */
.pre,.post{
  display:flex;align-items:center;justify-content:flex-end;
  height:19px;border-radius:4px;width:var(--v);min-width:30px;
  padding-right:7px;font-size:var(--step--2);font-weight:700;
  font-variant-numeric:tabular-nums;
}
.pre{background:var(--wash-2);color:var(--ink-45);margin-bottom:3px}
.post{background:var(--teal-deep);color:#fff}
.delta{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-size:var(--step--2);font-weight:700;color:var(--teal-ink);
  font-variant-numeric:tabular-nums;padding-left:10px;background:var(--paper);
}
@media (max-width:640px){
  table.seg-chart th{white-space:normal;padding-right:12px}
  .delta{display:none}
}

/* ---- long-form department content ---- */
.deep{display:flex;flex-direction:column;gap:clamp(30px,4vw,44px)}
.deep-block{display:flex;flex-direction:column;gap:14px}
.deep-block h2{margin:0}
.deep-block p{margin:0;color:var(--ink-45)}
.deep-block p:first-of-type{color:var(--ink)}

/* Wide tables scroll inside their own box rather than pushing the page
   sideways. min-width:0 is the part that actually lets the box shrink. */
.scroller{
  overflow-x:auto;
  max-width:100%;
  min-width:0;
  -webkit-overflow-scrolling:touch;
}
.scroller table{margin:0}