/* =========================================================================
   PROJECT YAADHUM - field research, Cuddalore
   White + warm paper ground · deep navy · sparing marigold.
   Editorial serif (display) / clean sans (body) / mono (labels & data).
   Tuned for a calm reading zoom - nothing oversized.
   ========================================================================= */

:root{
  /* grounds */
  --white:#ffffff;
  --paper:#faf7f0;
  --paper-2:#f3eede;
  --marigold-wash:#fcefda;

  /* ink */
  --navy:#16224a;
  --ink:#16224a;
  --ink-2:#47517a;
  --ink-3:#5f6788;      /* passes 4.5:1 on both white and paper */

  /* accent */
  --marigold:#f3901e;
  --marigold-deep:#cc6f08;      /* accents, large display text */
  --marigold-text:#b55200;      /* small text: passes 4.5:1 on white and paper */

  /* lines */
  --hair:rgba(22,34,74,.15);
  --hair-soft:rgba(22,34,74,.08);

  /* footer */
  --footer-bg:#111a38;
  --footer-ink:#ece6d6;
  --footer-ink-2:#a9b1cc;

  /* type */
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;
  --tamil:"Noto Serif Tamil","Latha",serif;

  /* rhythm - trimmed so the page reads like a publication, not a poster */
  --edge:clamp(20px,5vw,100px);
  --hero-logo-h:clamp(132px,24vh,236px);
  --nav-h:clamp(56px,7vh,68px);
  --shadow:0 18px 44px -26px rgba(22,34,74,.30);
  --shadow-soft:0 10px 30px -20px rgba(22,34,74,.22);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--navy);
  font-family:var(--sans);
  font-size:clamp(15px,.92vw,16.5px);
  line-height:1.68;
  font-weight:400;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--marigold);color:#fff}

/* ---------- type primitives ---------- */
.mono{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;
}
h1,h2,h3{
  font-family:var(--serif);font-weight:400;color:var(--navy);
  line-height:1.08;letter-spacing:-.012em;margin:0;font-optical-sizing:auto;
}

.section{padding:clamp(58px,8.5vh,112px) var(--edge)}
.section--paper{background:var(--paper)}
.section--tint{background:var(--paper-2)}
/* a hairline seam so touching grounds still read as separate sections */
.section--tint + .section,.section + .section--tint,
.section--paper + .section,.section + .section--paper{border-top:1px solid transparent}
.section--tight{padding-top:clamp(34px,5vh,64px)}
.wrap{max-width:1120px;margin:0 auto}
.kicker{margin-bottom:1.15em}
/* the few labels that remain are quiet; the headings do the announcing */
.mono.kicker{font-size:.78rem;letter-spacing:.14em;color:var(--marigold-text);font-weight:500}

/* a promoted label: it was the only title its block had, so it is a heading now */
.block-title{font-family:var(--serif);font-weight:400;color:var(--navy);
  font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.14;letter-spacing:-.018em;
  margin:0 0 clamp(20px,3vh,34px)}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--edge);
}
/* the bar surface fades in on its own so the partner marks can stay visible */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--hair-soft);opacity:1;
}
.nav__brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.nav__logo{height:clamp(26px,3.8vh,34px);width:auto}
.nav__wordmark{
  font-family:var(--serif);font-size:clamp(.98rem,1.4vw,1.12rem);color:var(--navy);
  letter-spacing:-.01em;font-weight:500;white-space:nowrap;
}
.nav__right{display:flex;align-items:center;gap:clamp(1.1rem,2.6vw,2.6rem)}
.nav__links{display:flex;gap:clamp(1rem,2.2vw,2.1rem);align-items:baseline}
.nav__links a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-2);position:relative;padding:.4em 0;transition:color .25s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:.05em;height:1px;
  background:var(--marigold);transition:right .28s var(--ease);
}
.nav__links a:hover{color:var(--navy)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{right:0}
.nav__links a[aria-current="page"]{color:var(--navy)}

/* home hero: partner marks stay put; the bar surface, wordmark & links fade in */
body.js-motion.home .nav::before{opacity:var(--nav-op,0)}
body.js-motion.home .nav__wordmark{opacity:var(--nav-op,0);transition:opacity .3s linear}
body.js-motion.home .nav__links{opacity:var(--nav-op,0);transition:opacity .3s linear}
body.js-motion.home .nav__logo{visibility:hidden}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:var(--nav-h) var(--edge) clamp(36px,7vh,80px);text-align:center;position:relative;
  background:radial-gradient(120% 80% at 50% -10%,var(--paper) 0%,transparent 60%);
}
.hero__stage{display:flex;flex-direction:column;align-items:center;width:100%}
.hero__holder{display:none;height:var(--hero-logo-h);width:1px}
.hero__logo--flow{height:var(--hero-logo-h);width:auto;margin-bottom:clamp(30px,6vh,66px)}
.hero__logo--fixed{display:none}
.hero__tagline{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.68rem,3.95vw,3.05rem);
  line-height:1.14;letter-spacing:-.018em;color:var(--navy);max-width:14ch;margin:0;
  opacity:0;transform:translateY(10px);animation:heroFade 1.1s var(--ease) .5s forwards;
}
.hero__tagline em{font-style:italic;color:var(--marigold-deep)}
@keyframes heroFade{to{opacity:1;transform:none}}

/* motion mode: fixed, scroll-driven logo; tagline stays in normal flow */
body.js-motion .hero__logo--flow{display:none}
body.js-motion .hero__holder{display:block}
body.js-motion .hero__tagline{margin-top:clamp(34px,7vh,78px)}
body.js-motion .hero__logo--fixed{
  display:block;position:fixed;top:0;left:0;z-index:70;height:var(--hero-logo-h);width:auto;
  will-change:transform;pointer-events:none;
}

/* =========================================================================
   REVEALS
   ========================================================================= */
.reveal{opacity:1}
body.js-motion .reveal{opacity:0;transform:translateY(20px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
body.js-motion .reveal.in{opacity:1;transform:none}
body.js-motion .reveal[data-delay="1"]{transition-delay:.08s}
body.js-motion .reveal[data-delay="2"]{transition-delay:.16s}
body.js-motion .reveal[data-delay="3"]{transition-delay:.24s}

/* =========================================================================
   THE PROBLEM
   ========================================================================= */
.question-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,5vw,72px);align-items:end}
.question{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.5vw,2.05rem);
  line-height:1.14;letter-spacing:-.016em;max-width:18ch;color:var(--navy);
}
.question__sub{color:var(--ink-2);font-size:.98rem;line-height:1.7;margin:0;max-width:44ch}
.question .lead{
  display:block;font-family:var(--mono);font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--marigold-text);margin-bottom:clamp(14px,2vh,22px);font-weight:500;
}

.ledger{margin-top:clamp(38px,6vh,72px);border-top:1px solid var(--hair)}
.ledger__row{
  display:grid;grid-template-columns:minmax(96px,.8fr) minmax(0,3.4fr);
  gap:clamp(14px,3vw,52px);align-items:baseline;
  padding:clamp(18px,2.8vh,30px) 0;border-bottom:1px solid var(--hair);position:relative;
}
.ledger__row::before{
  content:attr(data-n);position:absolute;top:clamp(18px,2.8vh,30px);left:-2rem;
  font-family:var(--mono);font-size:.62rem;color:var(--ink-3);letter-spacing:.1em;opacity:.55;display:none;
}
.ledger__key{
  font-family:var(--mono);font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--marigold-text);padding-top:.25em;font-weight:500;
}
.ledger__stmt{
  font-family:var(--serif);font-size:clamp(1.05rem,1.9vw,1.45rem);line-height:1.32;
  letter-spacing:-.008em;color:var(--navy);font-weight:400;
}
.ledger__stmt b{color:var(--navy);font-weight:600;
  background:linear-gradient(transparent 62%,var(--marigold-wash) 62%);padding:0 .05em}
@media(min-width:1160px){.ledger__row::before{display:block}}

/* the gap - set apart */
.gap{background:var(--navy);color:#fff}
.gap__pre{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3.5vw,52px);
  margin-bottom:clamp(34px,5.5vh,64px)}
.gap__pre p{margin:0;color:#c7cee4;font-size:.96rem;line-height:1.55}
.gap__pre b{color:#fff;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;display:block;margin-bottom:.6em}
.gap__punch{font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,2.9vw,2.35rem);
  line-height:1.24;letter-spacing:-.014em;max-width:26ch;color:#fff}
.gap__punch b{color:var(--marigold);font-weight:400;font-style:italic;font-family:var(--serif);
  font-size:inherit;letter-spacing:inherit;text-transform:none;display:inline;margin:0}
.gap__sig{margin-top:clamp(22px,3.4vh,34px);color:var(--marigold);font-family:var(--mono);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}

/* =========================================================================
   ASYMMETRIC TWO-COLUMN BODY
   ========================================================================= */
.duo{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,6vw,96px);align-items:start}
.duo__statement{font-family:var(--serif);font-weight:400;font-size:clamp(1.85rem,3.6vw,3.05rem);
  line-height:1.1;letter-spacing:-.02em;color:var(--navy);text-wrap:balance}
.duo__statement .accent{color:var(--marigold-deep);font-style:italic}
.duo__body{color:var(--ink-2);font-size:.98rem;line-height:1.72}
.duo__body p{margin:0 0 1em}
.duo__body p:last-child{margin-bottom:0}

/* =========================================================================
   COUPLET - the still point
   ========================================================================= */
.still{background:radial-gradient(120% 90% at 12% 0%,var(--marigold-wash) 0%,transparent 52%),var(--paper)}
.still__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);align-items:center}
.couplet{margin:0}
.couplet__ta{font-family:var(--tamil);font-weight:500;color:var(--navy);
  font-size:clamp(1.75rem,4vw,3.1rem);line-height:1.34;margin:0 0 .5em}
.couplet__en{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.15rem,2.1vw,1.7rem);line-height:1.3;color:var(--navy);margin:0 0 1em;max-width:20ch}
.couplet__rom{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  color:var(--ink-3);margin:0 0 1.2em;font-style:normal}
.people-intro__note{margin-top:1.6em;padding-top:1.2em;border-top:1px solid var(--hair);
  color:var(--ink-3);font-size:.9rem;line-height:1.6}
.hero-sub{color:var(--ink-2);font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.6;
  margin:.9em 0 0;max-width:52ch}
.couplet__attr{font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.still__passage{color:var(--ink-2);font-size:1rem;line-height:1.78;
  border-left:2px solid var(--marigold);padding-left:clamp(18px,2.6vw,34px);max-width:34ch}

.descent{margin-top:clamp(46px,7vh,88px);text-align:center;display:flex;flex-direction:column;align-items:center}
.descent__line::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--marigold)}
.descent__line{width:1px;background:var(--hair);margin:clamp(16px,2.6vh,30px) 0;height:0;
  transition:height 1.1s var(--ease);position:relative}
.descent.in .descent__line{height:clamp(46px,8vh,84px)}
.descent__ours{font-family:var(--serif);font-weight:400;color:var(--navy);
  font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.14;letter-spacing:-.018em;max-width:16ch;
  opacity:0;transform:translateY(12px);transition:opacity 1s var(--ease) .5s,transform 1s var(--ease) .5s}
.descent.in .descent__ours{opacity:1;transform:none}
.descent__note{margin-top:clamp(18px,3vh,32px);max-width:44ch;color:var(--ink-3);font-size:.88rem;line-height:1.6}
body:not(.js-motion) .descent__line{height:clamp(46px,8vh,84px)}
body:not(.js-motion) .descent__ours{opacity:1;transform:none}

/* =========================================================================
   THE NUMBERS
   ========================================================================= */
.story__lead{font-family:var(--serif);font-weight:400;font-size:clamp(1.85rem,3.4vw,2.9rem);
  line-height:1.1;letter-spacing:-.02em;max-width:22ch;color:var(--navy);text-wrap:balance}
.numbers__head{margin-bottom:clamp(34px,5vh,60px)}
.numbers__head .story__lead{max-width:16ch}
.picture{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(26px,5vw,76px);align-items:center}
.roll{display:grid;grid-template-columns:repeat(20,1fr);gap:clamp(5px,.8vw,10px);max-width:600px}
.roll__seat{width:100%;aspect-ratio:1/1.35;color:#c7ccdb}
.roll__seat svg{width:100%;height:100%;display:block}
.roll__seat path{fill:currentColor}
/* category colours - always applied, so the split is visible */
.roll__seat.is-sci{color:var(--navy)}
.roll__seat.is-art{color:var(--marigold)}
.roll__seat.is-else{color:#c3c7d6}
/* motion: fade + rise into place, keeping their colours (no colour override) */
body.js-motion .roll__seat{opacity:0;transform:translateY(7px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
body.js-motion .roll.in .roll__seat{opacity:1;transform:none}
/* the two arts figures earn a soft halo so the eye lands on them */
.roll__seat.is-art{filter:drop-shadow(0 1px 5px rgba(243,144,30,.55))}

.picture__legend{display:flex;flex-direction:column;gap:clamp(14px,2vh,22px)}
.leg{display:flex;gap:.75rem;align-items:baseline}
.leg__n{font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1;color:var(--navy);min-width:2.4ch}
.leg__n--art{color:#d77402}
.leg__n--else{color:#868ca2}
.leg__t{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);line-height:1.55}
.leg__t small{display:block;letter-spacing:.04em;text-transform:none;color:var(--ink-3);font-size:.92em;margin-top:.2em}
.picture__foot{margin-top:clamp(28px,4vh,52px);max-width:52ch;font-family:var(--serif);font-style:italic;
  font-size:clamp(1rem,1.6vw,1.25rem);line-height:1.5;color:var(--ink-2)}

.field{margin-top:clamp(56px,9vh,120px);border-top:1px solid var(--hair);padding-top:clamp(28px,4vh,48px)}
.field__label{display:flex;align-items:center;gap:.7rem;margin-bottom:clamp(26px,3.6vh,42px)}
.field__label .mono{color:var(--ink-2)}
.field__dot{width:7px;height:7px;border-radius:50%;background:var(--marigold);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(243,144,30,.45)}70%{box-shadow:0 0 0 9px rgba(243,144,30,0)}100%{box-shadow:0 0 0 0 rgba(243,144,30,0)}}
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,36px)}
.counter__n{font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,5vw,4.2rem);line-height:1;color:var(--navy);letter-spacing:-.02em}
.counter__t{font-family:var(--mono);font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);margin-top:.6em;line-height:1.5}
.counter__t::before{content:"";display:block;width:24px;height:1px;background:var(--marigold);margin-bottom:.8em}

/* =========================================================================
   STORY - image spread
   ========================================================================= */
.story__text .duo__statement{margin-bottom:.9em}
.story__text p{color:var(--ink-2);font-size:.98rem;line-height:1.72;margin:0 0 1em}
.story__text p:last-child{margin:0}

/* DRIVES - three convictions, editorial, no boxes */
.drives__head{max-width:none;margin-bottom:clamp(34px,5vh,60px)}
.drives__head .duo__statement{max-width:26ch}
.drives__head .accent{color:var(--marigold-deep);font-style:italic}
.drives__list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,56px)}
.drive{padding-top:clamp(16px,2.4vh,24px);border-top:2px solid var(--navy);
  display:flex;flex-direction:column;gap:.2em}
.drive__t{margin:0}
.drive__k{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--marigold-text);margin-bottom:.9em;font-weight:500}
.drive__t{font-family:var(--serif);font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.3;color:var(--navy)}
.drive__t b{color:var(--marigold-text);font-weight:600}

/* =========================================================================
   FOUNDER - one screen, faint logo fully in view
   ========================================================================= */

/* =========================================================================
   VOLUNTEER / COHORT
   ========================================================================= */
.cohort{background:var(--navy);color:#fff}
.cohort .duo__statement,.cohort h2{color:#fff}
.cohort__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,92px);align-items:start}
.cohort .mono{color:var(--marigold)}
.work{list-style:none;margin:clamp(22px,3.4vh,34px) 0 0;padding:0}
.work li{position:relative;padding:.85em 0 .85em 2rem;border-top:1px solid rgba(255,255,255,.14);color:#d7dcec;font-size:.98rem;line-height:1.5}
.work li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.work li::before{content:"";position:absolute;left:0;top:1.35em;width:12px;height:1px;background:var(--marigold)}
.work__note{margin-top:1.2em;color:#a9b1cc;font-size:.9rem}

/* forms */
.form{margin:0}
.field-row{margin-bottom:clamp(18px,2.6vh,28px)}
.field-row label{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.6em}
.cohort .field-row label{color:#9fb0d8}
.field-row input,.field-row textarea,.field-row select{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--hair);color:var(--navy);
  font-family:var(--sans);font-size:1rem;padding:.35em 0;transition:border-color .3s}
.cohort .field-row input,.cohort .field-row textarea,.cohort .field-row select{color:#fff;border-bottom-color:rgba(255,255,255,.24)}
.field-row textarea{resize:vertical;min-height:2.2em;line-height:1.6}
.field-row input:focus,.field-row textarea:focus,.field-row select:focus{outline:none;border-bottom-color:var(--marigold)}
.field-row select{appearance:none;-webkit-appearance:none;cursor:pointer}
.cohort .field-row select option{color:#16224a}
.btn{display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;background:var(--marigold);color:#16224a;border:none;
  padding:1em 2.1em;margin-top:clamp(12px,1.8vh,20px);transition:background .3s,transform .2s;font-weight:500;border-radius:2px}
.btn:hover{background:#fff;transform:translateY(-1px)}
.form__done{font-family:var(--serif);font-size:1.1rem;line-height:1.5;color:var(--marigold);margin-top:1.3em;display:none}
.form.is-done .form__done{display:block}
.form.is-done .field-row,.form.is-done .btn{display:none}

/* the honeypot: off-screen for people, irresistible to bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* while the message is on its way */
.form.is-sending .btn{opacity:.6;cursor:progress}
.form.is-sending .btn::after{content:"";width:12px;height:12px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.form.is-sending .btn::after{animation:none}}

/* if it did not get through, say so and give a way round it */
.form__fail{display:none;margin-top:1.2em;padding-top:1em;border-top:1px solid var(--hair);
  color:var(--ink-2);font-size:.95rem;line-height:1.6}
.form.is-failed .form__fail{display:block}
.form__fail a{color:var(--marigold-text)}
.cohort .form__fail{border-top-color:rgba(255,255,255,.2);color:#d7dcec}
.cohort .form__fail a{color:var(--marigold)}

/* =========================================================================
   FAQ - premium card
   ========================================================================= */
.faq-band{background:radial-gradient(120% 80% at 50% 0%,var(--paper) 0%,#fff 60%)}
.faq{max-width:860px;margin:0 auto;background:#fff;border:1px solid var(--hair-soft);
  border-radius:18px;box-shadow:0 30px 70px -44px rgba(22,34,74,.4);padding:0 clamp(20px,3vw,40px)}
.faq__item{border-bottom:1px solid var(--hair-soft)}
.faq__item:last-child{border-bottom:none}
.faq__q{width:100%;background:none;border:none;cursor:pointer;text-align:left;
  display:flex;justify-content:space-between;gap:1.4rem;align-items:center;
  padding:clamp(18px,2.8vh,26px) 0;font-family:var(--sans);font-weight:600;
  font-size:clamp(1rem,1.5vw,1.18rem);color:var(--navy);letter-spacing:-.005em;transition:color .2s}
.faq__q:hover{color:var(--marigold-text)}
.faq__mark{flex:none;width:16px;height:16px;position:relative;margin-top:.1em}
.faq__mark::before,.faq__mark::after{content:"";position:absolute;background:var(--marigold);left:50%;top:50%;transition:transform .3s var(--ease)}
.faq__mark::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.faq__mark::after{width:2px;height:14px;transform:translate(-50%,-50%)}
.faq__item[open] .faq__mark::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__a{overflow:hidden;max-height:0;transition:max-height .4s var(--ease)}
.faq__a-inner{padding:0 0 clamp(20px,3vh,30px);color:var(--ink-2);max-width:64ch;line-height:1.72;font-size:.98rem}
.faq__a-inner .fill{color:var(--marigold-text);font-family:var(--mono);font-size:.86em;letter-spacing:.02em}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{background:var(--footer-bg);color:var(--footer-ink);padding:clamp(52px,8vh,96px) var(--edge) clamp(30px,4.5vh,48px)}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
.footer__brand{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem}
.footer__logo-tile{width:52px;height:52px;border-radius:12px;background:#fff;display:grid;place-items:center;padding:6px;flex:none}
.footer__logo-tile img{width:100%;height:100%;object-fit:contain;display:block}
.footer__brand span{font-family:var(--serif);font-size:1.25rem;color:#fff}
.footer__tag{color:var(--footer-ink-2);max-width:32ch;font-size:.95rem;line-height:1.6}
.footer h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--marigold);font-weight:500;margin:0 0 1.2em}
.footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.8em}
.footer__links a{color:var(--footer-ink);text-decoration:none;font-size:.95rem;transition:color .25s;width:fit-content;border-bottom:1px solid transparent}
.footer__links a:hover{color:#fff;border-bottom-color:var(--marigold)}
.socials{display:flex;gap:.9rem;margin-top:1.3em}
.socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:grid;place-items:center;color:var(--footer-ink);transition:all .25s}
.socials a:hover{background:var(--marigold);border-color:var(--marigold);color:#16224a;transform:translateY(-2px)}
.socials svg{width:16px;height:16px;fill:currentColor}
.footer__bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;
  margin-top:clamp(40px,6vh,72px);padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12)}
.footer__meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--footer-ink-2)}
.footer__bottom a{color:var(--footer-ink-2);text-decoration:none;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.footer__bottom a:hover{color:#fff}

/* =========================================================================
   CONTACT PAGE
   ========================================================================= */
.subpage{padding-top:var(--nav-h)}
.contact-hero{padding:clamp(70px,11vh,150px) var(--edge) clamp(40px,6vh,76px);
  /* warmth behind the mark on the left, the existing paper wash on the right */
  background:radial-gradient(78% 62% at 10% 4%,var(--marigold-wash) 0%,transparent 60%),
             radial-gradient(110% 80% at 100% 0%,var(--paper) 0%,transparent 55%),
             var(--white)}
.contact-hero h1{font-size:clamp(2.35rem,5.6vw,4.5rem);max-width:19ch;line-height:1.03;letter-spacing:-.024em;text-wrap:balance}
.contact-hero h1 em{font-style:italic;color:var(--marigold-deep)}

/* ---- the contact opening: mark, then the name carried on a marigold sweep --- */
.chero{position:relative}
.chero__mark{height:clamp(76px,11vh,120px);width:auto;margin:0 0 clamp(20px,3vh,34px)}
body.js-motion .chero__mark{opacity:0;transform:translateY(10px) scale(.94);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
body.js-motion .chero__mark.in{opacity:1;transform:none}

/* the brand name sits on a marigold highlight that draws itself in */
.brandmark{
  white-space:nowrap;
  background-image:linear-gradient(rgba(243,144,30,.32),rgba(243,144,30,.32));
  background-repeat:no-repeat;
  background-position:0 86%;
  background-size:0% .30em;
  transition:background-size 1s var(--ease) .35s;
  padding:0 .04em;
}
.reveal.in .brandmark{background-size:100% .30em}
body:not(.js-motion) .brandmark{background-size:100% .30em}

.chero__where{margin:clamp(20px,2.8vh,30px) 0 0;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);line-height:1.7;max-width:44ch}
.chero__where::before{content:"";display:block;width:40px;height:2px;background:var(--marigold);
  margin-bottom:1.1em}
.hero-sub{font-family:var(--serif);font-size:clamp(1.1rem,1.9vw,1.5rem);line-height:1.35;
  color:var(--ink-2);margin:clamp(16px,2.4vh,24px) 0 0;max-width:30ch}
.audiences{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.aud{padding:clamp(26px,3.6vh,42px) clamp(22px,2.6vw,38px);border-left:1px solid var(--hair)}
.aud:first-child{border-left:none;padding-left:0}
.aud h3{font-family:var(--mono);font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;color:var(--marigold-text);margin-bottom:1.1em;font-weight:500}
.aud p{color:var(--ink-2);font-size:.96rem;line-height:1.68;margin:0}
.contact-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(34px,6vw,92px);align-items:start;margin-top:clamp(44px,7vh,84px)}
.contact-detail{display:flex;flex-direction:column;gap:clamp(22px,3.4vh,34px)}
.contact-detail .d h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .5em;font-weight:500}
.contact-detail .d a,.contact-detail .d p{color:var(--navy);text-decoration:none;font-size:1rem;margin:0;line-height:1.5}
.contact-detail .d a:hover{color:var(--marigold-text)}

/* =========================================================================
   PRIVACY
   ========================================================================= */
.doc{max-width:700px;margin:0 auto;padding:clamp(70px,11vh,150px) var(--edge) clamp(60px,9vh,110px)}
.doc h1{font-size:clamp(1.7rem,4vw,2.9rem);margin-bottom:.5em}
.doc__meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:clamp(34px,5vh,60px)}
.doc h2{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.6rem);margin:clamp(32px,4.5vh,52px) 0 .5em;color:var(--navy)}
.doc h2 .mono{display:block;color:var(--marigold-text);margin-bottom:.4em;font-size:.72rem}
.doc__lede{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.7vw,1.3rem);
  line-height:1.5;color:var(--ink-2);margin:0 0 clamp(28px,4vh,44px)}
.doc__summary{background:var(--paper);border-radius:16px;padding:clamp(22px,3vw,34px);
  margin:0 0 clamp(34px,5vh,56px)}
.doc__summary h2{margin-top:0}
.doc__summary ul{padding-left:0;list-style:none;margin:0}
.doc__summary li{position:relative;padding:.5em 0 .5em 1.6rem;border-top:1px solid var(--hair-soft)}
.doc__summary li:first-child{border-top:none}
.doc__summary li::before{content:"";position:absolute;left:0;top:1.15em;width:10px;height:1px;background:var(--marigold)}
.doc h3{font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--navy);
  margin:clamp(22px,3vh,32px) 0 .4em}
.doc__pull{font-family:var(--serif);font-size:clamp(1.1rem,1.9vw,1.4rem);line-height:1.45;
  color:var(--navy);border-left:2px solid var(--marigold);padding-left:clamp(16px,2vw,26px);
  margin:clamp(24px,3.4vh,36px) 0}
.whosees{display:grid;gap:clamp(14px,2vh,20px);margin:clamp(20px,3vh,30px) 0}
.whosees__row{border-top:2px solid var(--navy);padding-top:clamp(12px,1.8vh,18px)}
.whosees__row h3{margin:0 0 .35em;font-family:var(--mono);font-size:.76rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--marigold-text);font-weight:500}
.whosees__row p{margin:0}
.doc__back{margin-top:clamp(40px,6vh,70px)}
.doc p,.doc li{color:var(--ink-2);line-height:1.72;font-size:.98rem}
.doc ul{padding-left:1.2em}
.doc li{margin-bottom:.5em}
.doc a{color:var(--marigold-text)}

/* =========================================================================
   OUR STORY - no photo; drawn marks in the margin
   ========================================================================= */
.story__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}
.story__text p{color:var(--ink-2);font-size:1rem;line-height:1.75;margin:0 0 1.05em}
.story__text p:last-child{margin:0}
.story__text .duo__statement{margin-bottom:.8em}

/* =========================================================================
   NOTES - founder & founding member: portrait left, letter right
   ========================================================================= */
.note{position:relative;overflow:hidden}
.note--paper{background:var(--paper)}
.note__mark{position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  height:min(78%,540px);width:auto;opacity:.05;pointer-events:none}
.note__grid{position:relative;display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:start}
.portrait{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;
  background:linear-gradient(135deg,var(--paper-2),var(--paper));
  border:1px solid var(--hair-soft);box-shadow:var(--shadow)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.portrait__ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding:1rem;line-height:1.7}
.portrait__cap{margin-top:.9rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.6}
.portrait__cap b{display:block;font-family:var(--serif);font-size:1.15rem;letter-spacing:-.01em;
  text-transform:none;color:var(--navy);font-weight:500;margin-bottom:.25em}
.note__body p{font-size:1rem;line-height:1.72;color:var(--navy);margin:0 0 1em}
.note__body p:last-of-type{margin-bottom:0}
.note__body .lede{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.38;
  letter-spacing:-.01em;margin-bottom:1em}
.note__body .ask{font-family:var(--serif);font-style:italic;color:var(--navy);
  font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.45;
  border-left:2px solid var(--marigold);padding-left:clamp(16px,2vw,24px);margin:1.4em 0}
.note__body .placeholder{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--marigold-text);border:1px dashed var(--hair);
  padding:.5em .85em;display:inline-block}
.note__sign{margin-top:clamp(20px,3vh,32px);padding-top:1.1rem;border-top:1px solid var(--hair);
  font-family:var(--serif);font-size:1.2rem;color:var(--navy)}
.note__sign small{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:none;color:var(--ink-3);margin-top:.5em;line-height:1.65;letter-spacing:.04em}

/* =========================================================================
   CREDIBILITY - who trains the cohort
   ========================================================================= */
.creds{background:var(--paper)}
.creds__head{max-width:none;margin-bottom:clamp(30px,4.4vh,52px)}
/* constrain the display line in ITS OWN font, so it breaks over two
   generous lines instead of a narrow four-line column */
.creds__head .duo__statement{max-width:32ch}
.creds__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,34px)}
.cred{background:#fff;border:1px solid var(--hair-soft);border-radius:14px;
  padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:1rem;
  box-shadow:var(--shadow-soft)}
.cred__logo{height:58px;display:flex;align-items:center}
.cred__logo img{height:58px;width:58px;object-fit:contain;object-position:left center}
.cred__logo .ph{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--ink-3);
  border:1px dashed var(--hair);padding:.5em .7em;border-radius:6px}
.cred__t{font-family:var(--serif);font-size:1.08rem;line-height:1.35;color:var(--navy)}
.cred__s{color:var(--ink-2);font-size:.93rem;line-height:1.62;margin:0}
.creds__foot{margin-top:clamp(26px,3.6vh,44px);color:var(--ink-3);font-size:.9rem;
  line-height:1.65;max-width:76ch}

/* =========================================================================
   HERO PARTNER STRIP - sits centred under the tagline with captions, then
   climbs on scroll and locks into the nav bar (captions fade on the way).
   ========================================================================= */
/* the slot reserves the space, so nothing shifts when the marks go fixed */
.hero__partners-slot{
  margin-top:clamp(34px,6vh,64px);min-height:clamp(34px,4.8vh,46px);
  display:flex;justify-content:center;align-items:flex-start;
}
.hero__partners{
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(.5rem,1.6vw,1.2rem);margin:0;transform-origin:50% 50%;
  opacity:0;animation:fadeInOnly 1.1s var(--ease) .95s forwards;
}
/* opacity only: animating transform here would override the scroll transform */
@keyframes fadeInOnly{to{opacity:1}}
/* each mark gets its own column, wide enough that the captions below can
   never collide with their neighbours */
.hpartner{
  margin:0;position:relative;display:flex;align-items:center;justify-content:center;
  width:clamp(88px,12vw,136px);
}
.hpartner img{
  height:clamp(34px,4.8vh,46px);width:clamp(34px,4.8vh,46px);
  object-fit:contain;object-position:center;display:block;
}
.hpartner figcaption{
  position:absolute;top:calc(100% + .7rem);left:50%;transform:translateX(-50%);
  width:100%;text-align:center;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;line-height:1.4;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;
}
.hero__partners-note{
  margin:clamp(62px,9vh,92px) 0 0;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);opacity:.8;
}

/* =========================================================================
   FOUNDATION STATUS + SCHOOLS
   ========================================================================= */
.status{
  display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--hair);
  border-radius:100px;padding:.55em 1.1em;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);background:#fff;
}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--marigold);flex:none}

.schools__head{max-width:46ch;margin-bottom:0}
.schools__head .duo__statement{max-width:20ch}
.schools__lede{color:var(--ink-2);max-width:58ch;font-size:1rem;line-height:1.72;
  margin:clamp(16px,2.4vh,26px) 0 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);
  margin-top:clamp(30px,4.5vh,54px)}
.step{padding-top:clamp(14px,2vh,20px);border-top:1px solid var(--hair)}
.step:first-child{border-top-color:var(--marigold)}
.step__n{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--marigold-text);margin-bottom:.8em;font-weight:500}
.step__t{font-family:var(--serif);font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.28;
  color:var(--navy);margin:0 0 .5em}
.step__s{color:var(--ink-2);font-size:.94rem;line-height:1.65;margin:0}
.bounds{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px);
  margin-top:clamp(38px,5.5vh,68px);padding-top:clamp(24px,3.6vh,40px);
  border-top:1px solid var(--hair)}
.bounds ul{list-style:none;margin:.9em 0 0;padding:0}
.bounds li{position:relative;padding:.5em 0 .5em 1.5rem;color:var(--ink-2);font-size:.95rem;line-height:1.6}
.bounds li::before{content:"";position:absolute;left:0;top:1.2em;width:9px;height:1px;background:var(--marigold)}
.bounds h3{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--marigold-text);font-weight:500}
.bounds .no li::before{background:#a8afc4}

/* classes grid (four transitions) */

/* portraits run in full colour */
.portrait img{filter:none}

/* =========================================================================
   FILLED MARGINS - small, meaning-carrying devices for the wide right-hand
   columns. Each one states something the section is already claiming.
   ========================================================================= */

/* two-column heads (statement left, device/standfirst right) */
.head-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,5vw,72px);align-items:end}
.head-split--top{align-items:start}
.standfirst{color:var(--ink-2);font-size:.98rem;line-height:1.7;margin:0;max-width:42ch}
.standfirst b{color:var(--navy);font-weight:600}

/* =========================================================================
   THE TIMING PICTURE - the argument of this page, drawn once.
   The school's knowledge accumulates along the top. A marigold band marks
   the weeks in which the choice is actually made. Everything that would
   have helped the family lands to the RIGHT of that band, after the fact.
   Every element sits on its own row, so nothing can collide.
   ========================================================================= */
.tline{position:relative;margin:clamp(40px,6vh,72px) 0 0;width:100%;padding-top:34px}

/* the label for the decisive weeks, clear above the whole plot */
.tline__momentlab{
  position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;margin:0;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--marigold-text);font-weight:500;opacity:0;transition:opacity .6s var(--ease) .55s;
}
.tline__momentlab::after{content:"";position:absolute;left:50%;top:calc(100% + 4px);
  width:1px;height:12px;background:var(--marigold)}
.tline.in .tline__momentlab{opacity:1}

.tline__lanelab{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 .8em;font-weight:500}
.tline__lanelab--know{color:var(--navy)}
.tline__lanelab--late{margin:.9em 0 0}

/* the plot: knowledge lane, axis, arrival lane - and the band cutting them */
.tline__body{position:relative}
.tline__moment{
  position:absolute;top:-6px;bottom:-6px;border-radius:4px;
  background:rgba(243,144,30,.16);border-left:2px solid var(--marigold);border-right:2px solid var(--marigold);
  transform:scaleY(0);transform-origin:top;transition:transform .75s var(--ease) .3s;
}
.tline.in .tline__moment{transform:scaleY(1)}

.tline__lane{position:relative;height:16px}
.tline__bar{
  position:absolute;inset:1px 0;border-radius:2px;
  background:linear-gradient(90deg,rgba(22,34,74,.18) 0%,rgba(22,34,74,.55) 45%,var(--navy) 100%);
  transform:scaleX(0);transform-origin:left center;transition:transform 1s var(--ease);
}
.tline.in .tline__bar{transform:scaleX(1)}

.tline__axis{position:relative;height:46px;margin:10px 0 6px}
.tline__axis::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair)}
.tline__tick{position:absolute;top:0;transform:translateX(-50%);text-align:center}
.tline__tick::before{content:"";display:block;width:1px;height:7px;background:var(--hair);margin:0 auto 8px}
.tline__tick span{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.tline__tick--first{transform:none;text-align:left}
.tline__tick--first::before{margin-left:0}
.tline__tick--last{transform:translateX(-100%);text-align:right}
.tline__tick--last::before{margin-right:0;margin-left:auto}

.tline__lane--late{height:18px}
.tline__delay{position:absolute;top:8px;height:2px;width:0;
  background:repeating-linear-gradient(90deg,var(--hair) 0 5px,transparent 5px 10px);
  transition:width .8s var(--ease) .8s}
.tline.in .tline__delay{width:var(--delay-w,16%)}
.tline__dot{position:absolute;top:3px;width:12px;height:12px;border-radius:50%;
  background:#aeb4c8;transform:translateX(-50%) scale(0);transition:transform .45s var(--ease)}
.tline.in .tline__dot{transform:translateX(-50%) scale(1)}
.tline.in .tline__dot:nth-of-type(2){transition-delay:1.1s}
.tline.in .tline__dot:nth-of-type(3){transition-delay:1.25s}
.tline.in .tline__dot:nth-of-type(4){transition-delay:1.4s}

.tline__cap{margin:clamp(22px,3.2vh,32px) 0 0;padding-top:1em;border-top:1px solid var(--hair);
  color:var(--ink-2);font-size:.98rem;line-height:1.65;max-width:70ch}
.tline__cap b{color:var(--navy);font-weight:600}

body:not(.js-motion) .tline__bar{transform:scaleX(1)}
body:not(.js-motion) .tline__moment{transform:scaleY(1)}
body:not(.js-motion) .tline__momentlab{opacity:1}
body:not(.js-motion) .tline__dot{transform:translateX(-50%) scale(1)}
body:not(.js-motion) .tline__delay{width:16%}

/* --- the three observations: one shared label, no repetition ----------- */
.obs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,4vw,56px);
  margin-top:clamp(34px,5vh,58px)}
.obs__item{border-top:1px solid var(--hair);padding-top:clamp(14px,2vh,20px)}
.obs__t{font-family:var(--serif);font-size:clamp(1.08rem,1.75vw,1.35rem);line-height:1.28;
  color:var(--navy);margin:0 0 .5em}
.obs__s{color:var(--ink-2);font-size:.95rem;line-height:1.65;margin:0}

/* --- the ask and the boundaries, deliberately unequal in weight -------- */
.pair{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,5vw,74px);
  margin-top:clamp(44px,6.5vh,80px);padding-top:clamp(26px,4vh,44px);border-top:1px solid var(--hair)}
.ask h3,.notlist h3{font-family:var(--mono);font-size:.78rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:500;margin:0 0 1.2em}
.ask h3{color:var(--marigold-text)}
.notlist h3{color:var(--ink-3)}
.ask ul,.notlist ul{list-style:none;margin:0;padding:0}
.ask li{position:relative;padding:.55em 0 .55em 1.7rem;color:var(--navy);
  font-size:1.02rem;line-height:1.55;border-top:1px solid var(--hair-soft)}
.ask li:first-child{border-top:none}
.ask li::before{content:"?";position:absolute;left:0;top:.55em;color:var(--marigold);
  font-family:var(--serif);font-size:1.05em;line-height:1.55}
.notlist{border-left:1px solid var(--hair);padding-left:clamp(20px,3vw,38px)}
.notlist li{position:relative;padding:.4em 0 .4em 1.4rem;color:var(--ink-3);
  font-size:.92rem;line-height:1.55}
.notlist li::before{content:"";position:absolute;left:0;top:1.05em;width:10px;height:1px;background:#b8bdcd}

/* --- recorded vs missing (the gap band, on navy) ---------------------- */
.record{margin:0;padding:0;list-style:none;max-width:300px}
.record li{display:flex;align-items:center;gap:.8rem;padding:.66em 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:#c2cbe4}
.record li:last-child{border-bottom:none}
.record .pip{width:9px;height:9px;border-radius:50%;flex:none;
  border:1px solid var(--marigold);background:transparent}
.record li.kept{color:#fff}
.record li.kept .pip{background:var(--marigold)}
.record__key{margin:1.1em 0 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:#98a3c4}

/* --- small aside card (volunteer / contact heroes) -------------------- */
.aside-card{border:1px solid var(--hair);border-radius:16px;padding:clamp(20px,2.6vw,28px);
  background:#fff;box-shadow:var(--shadow-soft);max-width:360px}
.aside-card h3{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--marigold-text);font-weight:500;margin:0 0 1.1em}
.aside-card ul{list-style:none;margin:0;padding:0}
.aside-card li{position:relative;padding:.55em 0 .55em 1.5rem;color:var(--ink-2);
  font-size:.94rem;line-height:1.55;border-top:1px solid var(--hair-soft)}
.aside-card li:first-child{border-top:none}
.aside-card li::before{content:"";position:absolute;left:0;top:1.15em;width:9px;height:1px;background:var(--marigold)}
/* the same card, sitting on the navy ground */
.aside-card--dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);box-shadow:none;max-width:none}
.aside-card--dark li{color:#d7dcec;border-top-color:rgba(255,255,255,.12)}


/* =========================================================================
   WHAT WE BELIEVE - the couplet, the reasoning and our line, side by side
   so the descent from a 2000-year-old claim to ours reads in one screen.
   ========================================================================= */
.believe{display:grid;grid-template-columns:1.05fr .95fr .8fr;gap:clamp(26px,4.5vw,64px);align-items:center}
.believe .couplet__ta{font-size:clamp(1.6rem,3.4vw,2.6rem)}
.believe .couplet__en{font-size:clamp(1.05rem,1.9vw,1.4rem);max-width:18ch}
.believe .still__passage{border-left:1px solid var(--hair);font-size:.98rem}
.believe__ours{position:relative;padding-left:clamp(18px,2.4vw,32px);border-left:2px solid var(--marigold)}
.believe__rule{position:absolute;left:-2px;top:0;width:2px;height:0;background:var(--marigold-text);
  transition:height 1s var(--ease) .3s}
.believe__ours.in .believe__rule{height:100%}
.believe__line{font-family:var(--serif);font-weight:400;color:var(--navy);
  font-size:clamp(1.3rem,2.5vw,1.95rem);line-height:1.16;letter-spacing:-.016em;margin:0 0 .8em}
.believe__note{color:var(--ink-2);font-size:.92rem;line-height:1.6;margin:0}
body:not(.js-motion) .believe__rule{height:100%}

/* =========================================================================
   ROUTE CARDS - the two programmes the research feeds
   ========================================================================= */
.routes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px);margin-top:clamp(34px,5vh,58px)}
.route{display:flex;flex-direction:column;gap:.55em;text-decoration:none;
  background:#fff;border:1px solid var(--hair-soft);border-radius:16px;
  padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-soft);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.route:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--hair)}
.route__k{font-family:var(--mono);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--marigold-text);font-weight:500}
.route__t{font-family:var(--serif);font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.24;color:var(--navy)}
.route__s{color:var(--ink-2);font-size:.96rem;line-height:1.65}
.route__go{margin-top:.6em;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy);position:relative;width:fit-content;padding-bottom:.35em}
.route__go::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--marigold);
  transform:scaleX(.3);transform-origin:left;transition:transform .3s var(--ease)}
.route:hover .route__go::after{transform:scaleX(1)}


/* =========================================================================
   YAADHUM SCHOOLS - class cards, the six-step flow, the promises
   ========================================================================= */
.classes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,26px);
  margin-top:clamp(34px,5vh,58px)}
.klass{background:#fff;border:1px solid var(--hair-soft);border-radius:16px;
  padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow-soft);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.klass:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.klass__ico{margin-bottom:clamp(14px,2vh,20px)}
.klass__ico svg{width:40px;height:40px;display:block;
  stroke:var(--navy);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.klass__ico svg .hi{stroke:var(--marigold)}
.klass__ico svg .fill{fill:var(--marigold);stroke:none}
/* the marks draw themselves as each card arrives */
body.js-motion .klass__ico svg path,body.js-motion .klass__ico svg circle{
  stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .9s var(--ease) .15s}
body.js-motion .klass__ico svg .fill{opacity:0;transition:opacity .4s var(--ease) .8s}
body.js-motion .klass.in .klass__ico svg path,body.js-motion .klass.in .klass__ico svg circle{stroke-dashoffset:0}
body.js-motion .klass.in .klass__ico svg .fill{opacity:1}
.klass__n{font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--marigold-text);margin-bottom:.7em;font-weight:500}
.klass__t{font-family:var(--serif);font-size:clamp(1.02rem,1.55vw,1.22rem);line-height:1.26;
  color:var(--navy);margin:0 0 .5em}
.klass__s{color:var(--ink-2);font-size:.92rem;line-height:1.62;margin:0}

/* the six steps, on one spine */
.flow{list-style:none;margin:clamp(34px,5vh,58px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3.4vw,44px)}
.flow__step{position:relative;padding-top:clamp(18px,2.4vh,26px);border-top:1px solid var(--hair)}
.flow__step::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:var(--marigold);transition:width .7s var(--ease)}
.flow__step.in::before{width:100%}
.flow__n{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;color:var(--marigold-text);
  font-weight:500;display:block;margin-bottom:.8em}
.flow__t{font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.26rem);line-height:1.26;
  color:var(--navy);margin:0 0 .45em}
.flow__s{color:var(--ink-2);font-size:.94rem;line-height:1.62;margin:0}
body:not(.js-motion) .flow__step::before{width:100%}

/* the four promises about student information */
.promises{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,38px);
  margin-top:clamp(34px,5vh,56px)}
.promise{border-top:2px solid var(--navy);padding-top:clamp(14px,2vh,20px)}
.promise h3{font-family:var(--serif);font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.26;
  color:var(--navy);margin:0 0 .5em}
.promise p{color:var(--ink-2);font-size:.92rem;line-height:1.62;margin:0}

.quietlink{font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy);text-decoration:none;position:relative;padding-bottom:.35em}
.quietlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--marigold);
  transform:scaleX(.35);transform-origin:left;transition:transform .3s var(--ease)}
.quietlink:hover::after{transform:scaleX(1)}


/* =========================================================================
   YAADHUM FOUNDATION - the unequal-information bars, the age ladder
   ========================================================================= */
.split-bar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);
  margin-top:clamp(34px,5vh,56px)}
.sbar__lab{font-family:var(--mono);font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 .9em;font-weight:500}
.sbar__track{position:relative;height:12px;background:rgba(22,34,74,.07);border-radius:2px;overflow:hidden}
.sbar__fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.sbar__fill--full{width:100%;background:linear-gradient(90deg,rgba(22,34,74,.35),var(--navy))}
.sbar__fill--thin{width:22%;background:var(--marigold)}
.split-bar.in .sbar__fill{transform:scaleX(1)}
.split-bar.in .sbar__fill--thin{transition-delay:.35s}
.sbar__note{color:var(--ink-2);font-size:.94rem;line-height:1.6;margin:1em 0 0}
body:not(.js-motion) .sbar__fill{transform:scaleX(1)}

.ages{margin-top:clamp(44px,6.5vh,76px);padding-top:clamp(26px,4vh,42px);border-top:1px solid var(--hair)}
.ages__list{list-style:none;margin:0;padding:0}
.ages__list li{display:grid;grid-template-columns:minmax(88px,.5fr) 1fr;gap:clamp(14px,3vw,44px);
  align-items:baseline;padding:clamp(12px,1.8vh,18px) 0;border-bottom:1px solid var(--hair-soft);
  font-family:var(--serif);font-size:clamp(1.02rem,1.6vw,1.28rem);line-height:1.35;color:var(--navy)}
.ages__list li:last-child{border-bottom:none}
.ages__list li span{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--marigold-text);font-weight:500}


/* =========================================================================
   THE QUESTION - the thesis of the whole site, so it gets its own ground,
   its own scale, and a mark nothing else on the site uses.
   ========================================================================= */
.qband{position:relative;overflow:hidden;
  background:radial-gradient(90% 120% at 88% 10%,var(--marigold-wash) 0%,transparent 58%),var(--paper)}
.qband::before{                       /* an outsized question mark in the margin */
  content:"?";position:absolute;right:clamp(-14px,1vw,26px);top:clamp(-40px,-4vh,-10px);
  font-family:var(--serif);font-size:clamp(20rem,42vw,34rem);line-height:.8;
  color:var(--marigold);opacity:.07;pointer-events:none;
}
.qband .wrap{position:relative}
.qband__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,5vw,80px);align-items:end}
.qmark{font-family:var(--mono);font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--marigold-text);font-weight:500;display:flex;align-items:center;gap:.7rem;margin:0 0 1.4em}
.qmark::before{content:"";width:26px;height:2px;background:var(--marigold)}
.qband__q{font-family:var(--serif);font-weight:400;color:var(--navy);
  font-size:clamp(2.1rem,5.4vw,4.3rem);line-height:1.02;letter-spacing:-.025em;
  max-width:15ch;margin:0;text-wrap:balance}
.qband__q em{font-style:italic;color:var(--marigold-deep)}
.qband__sub{color:var(--ink-2);font-size:1.04rem;line-height:1.72;margin:0;max-width:40ch;
  padding-left:clamp(16px,2vw,26px);border-left:2px solid var(--marigold)}


/* =========================================================================
   MISSION & VISION - the two statements the Our Story page opens on
   ========================================================================= */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.4vw,44px)}
.mv__card{background:#fff;border:1px solid var(--hair-soft);border-radius:18px;
  padding:clamp(26px,3.4vw,44px);box-shadow:var(--shadow-soft);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.mv__card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.mv__ico{margin-bottom:clamp(18px,2.6vh,26px)}
.mv__ico svg{width:54px;height:54px;display:block;stroke:var(--navy);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mv__ico svg .hi{stroke:var(--marigold)}
.mv__ico svg .fill{fill:var(--marigold);stroke:none}
body.js-motion .mv__ico svg path,body.js-motion .mv__ico svg circle{
  stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1.1s var(--ease) .2s}
body.js-motion .mv__ico svg .fill{opacity:0;transition:opacity .5s var(--ease) 1s}
body.js-motion .mv__card.in .mv__ico svg path,body.js-motion .mv__card.in .mv__ico svg circle{stroke-dashoffset:0}
body.js-motion .mv__card.in .mv__ico svg .fill{opacity:1}
.mv__k{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--marigold-text);font-weight:500;margin:0 0 1em}
.mv__t{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.5vw,2.05rem);
  line-height:1.16;letter-spacing:-.018em;color:var(--navy);margin:0 0 .7em;text-wrap:balance}
.mv__s{color:var(--ink-2);font-size:1rem;line-height:1.72;margin:0}


/* =========================================================================
   MENTOR ROLES - the three volunteer programmes, at the close of the home page
   ========================================================================= */
.mentors{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px);
  margin-top:clamp(34px,5vh,58px)}
.mentor{background:#fff;border:1px solid var(--hair-soft);border-radius:16px;
  padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-soft);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.mentor:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.mentor__logo{width:64px;height:64px;display:grid;place-items:center;margin-bottom:clamp(16px,2.2vh,22px)}
.mentor__logo img{width:100%;height:100%;object-fit:contain;object-position:center}
.mentor__t{font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.2;
  color:var(--navy);margin:0 0 .3em}
.mentor__r{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--marigold-text);font-weight:500;margin:0 0 1em}
.mentor__s{color:var(--ink-2);font-size:.95rem;line-height:1.65;margin:0}
.mentors__foot{margin:clamp(28px,4vh,44px) 0 0;padding-top:1.2em;border-top:1px solid var(--hair);
  color:var(--ink-3);font-size:.92rem;line-height:1.65;max-width:78ch}


/* =========================================================================
   THE CALENDAR - Our Story hero. A term of ordinary days, one of which was
   a deadline. Cool grey for the days that passed unremarkably; a single warm
   date, circled late and by hand. The warm/cool split is the whole point:
   the date was not a different colour to anyone who could see it.
   ========================================================================= */
.calviz{margin:0;width:100%;max-width:430px}
.calviz svg{width:100%;height:auto;display:block;overflow:visible}
.cal-rule{stroke:var(--hair);stroke-width:1;fill:none}
.cal-tick{stroke:#aeb6cb;stroke-width:2;stroke-linecap:round;fill:none}

/* the ordinary days */
.cal-day{fill:#e8ebf2;stroke:none;opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),fill .5s var(--ease)}
.calviz.in .cal-day{opacity:1;transform:none}

/* the one that mattered */
.cal-day--the{fill:var(--marigold-wash)}
.calviz.in .cal-day--the{fill:#ffdca6}

/* circled by hand, and far too late */
.cal-ring{fill:none;stroke:var(--marigold);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:172;stroke-dashoffset:172}
.calviz.in .cal-ring{transition:stroke-dashoffset 1.1s var(--ease) 1.05s;stroke-dashoffset:0}
body:not(.js-motion) .cal-day{opacity:1;transform:none}
body:not(.js-motion) .cal-ring{stroke-dashoffset:0}
.calviz figcaption{margin-top:clamp(16px,2.2vh,22px);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);line-height:1.65}
.calviz figcaption b{color:var(--marigold-text);font-weight:500}

/* =========================================================================
   HERO VISUALS - one drawn idea at the top of each page, in the same
   line-drawn language as the rest of the site.
   ========================================================================= */
.heroviz{margin:0;width:100%;max-width:400px}
.heroviz svg{width:100%;height:auto;display:block;overflow:visible;
  fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.heroviz figcaption{margin-top:clamp(14px,2vh,20px);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);line-height:1.6}
.heroviz figcaption b{color:var(--marigold-text);font-weight:500}
.hv-accent{stroke:var(--marigold)}
.hv-soft{stroke:#c3c7d6}
.hv-fill{fill:var(--navy);stroke:none}
.hv-fill-accent{fill:var(--marigold);stroke:none}
.hv-wash{fill:var(--marigold);stroke:none;opacity:.13}
.hv-num{fill:var(--navy);stroke:none;font-family:var(--serif);font-size:30px;letter-spacing:-.02em}
.hv-unit{fill:var(--ink-3);stroke:none;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em}

/* the period ring: 45 minutes out of one school day */
.hv-ring{stroke:var(--hair);stroke-width:9}
.hv-arc{stroke:var(--marigold);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:339;stroke-dashoffset:339;transform:rotate(-90deg);transform-origin:60px 60px}
.heroviz.in .hv-arc{transition:stroke-dashoffset 1.3s var(--ease) .25s;stroke-dashoffset:254}
body:not(.js-motion) .hv-arc{stroke-dashoffset:254}
.hv-seat{fill:var(--navy);stroke:none;opacity:0}
.heroviz.in .hv-seat{opacity:1;transition:opacity .4s var(--ease)}
.hv-seat--on{fill:var(--marigold)}

/* ripples reaching past the school */
.hv-ripple{stroke:var(--marigold);fill:none;opacity:0;transform-origin:center}
.heroviz.in .hv-ripple{animation:hvRipple 3.4s var(--ease) infinite}
.heroviz.in .hv-ripple:nth-of-type(2){animation-delay:1.1s}
.heroviz.in .hv-ripple:nth-of-type(3){animation-delay:2.2s}
@keyframes hvRipple{
  0%{opacity:.55;transform:scale(.35)}
  70%{opacity:.12}
  100%{opacity:0;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){.heroviz.in .hv-ripple{animation:none;opacity:.3}}

/* lines being written down */
.hv-line{stroke:var(--navy);stroke-dasharray:120;stroke-dashoffset:120}
.heroviz.in .hv-line{transition:stroke-dashoffset .8s var(--ease);stroke-dashoffset:0}
.heroviz.in .hv-line:nth-of-type(2){transition-delay:.25s}
.heroviz.in .hv-line:nth-of-type(3){transition-delay:.5s}
.heroviz.in .hv-line:nth-of-type(4){transition-delay:.75s}
body:not(.js-motion) .hv-line{stroke-dashoffset:0}
body:not(.js-motion) .hv-seat{opacity:1}

/* the drawn outlines settle in once, everywhere */
body.js-motion .heroviz .hv-draw{stroke-dasharray:400;stroke-dashoffset:400;
  transition:stroke-dashoffset 1.4s var(--ease) .1s}
body.js-motion .heroviz.in .hv-draw{stroke-dashoffset:0}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:900px){
  .question-head,.head-split,.qband__grid{grid-template-columns:1fr;gap:1.4rem;align-items:start}
  .timeline,.aside-card,.record{max-width:none}
  .duo,.still__grid,.picture,.cohort__grid,.gap__pre,.drives__list,.contact-grid,
  .story__cols,.note__grid,.creds__grid{grid-template-columns:1fr}
  .note__grid{gap:clamp(22px,4vh,32px)}
  .portrait{max-width:300px;aspect-ratio:1/1}
  .note__mark{opacity:.04;right:-30%}
  .gap__pre{gap:clamp(18px,4vh,26px)}
  .drives__list{gap:clamp(22px,4vw,32px)}
  .counters{grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,36px)}
  .audiences{grid-template-columns:1fr}
  .aud{border-left:none;border-top:1px solid var(--hair);padding-left:0;padding-right:0}
  .aud:first-child{border-top:none}
  .footer__top{grid-template-columns:1fr;gap:clamp(30px,6vh,44px)}
  .ledger__row::before{display:none}
  .steps{grid-template-columns:1fr 1fr}
  .heroviz{max-width:320px}
  .calviz{max-width:340px}
  .mentors{grid-template-columns:1fr}
  .mv{grid-template-columns:1fr}
  .split-bar{grid-template-columns:1fr}
  .ages__list li{grid-template-columns:1fr;gap:.3rem}
  .classes{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr 1fr}
  .promises{grid-template-columns:1fr 1fr}
  .believe{grid-template-columns:1fr;gap:clamp(24px,4vh,34px)}
  .believe .still__passage{border-left:none;padding-left:0}
  .routes{grid-template-columns:1fr}
  .obs{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr}
  .notlist{border-left:none;padding-left:0;border-top:1px solid var(--hair);padding-top:1.4rem}
  .tline__tick span{font-size:.62rem;letter-spacing:.04em}
  .tline__windowlab{font-size:.62rem;letter-spacing:.04em}
  .bounds{grid-template-columns:1fr}
  .hero__partners{gap:clamp(.4rem,1.5vw,1rem)}
  .hpartner{width:clamp(80px,22vw,120px)}
  .hpartner figcaption{font-size:.55rem;letter-spacing:.06em}
}
@media(max-width:640px){
  .chero__mark{height:62px}
  .classes,.flow,.promises{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .hpartner img{height:30px;width:30px}
  .hpartner figcaption{font-size:.5rem;letter-spacing:.04em}
  .nav__wordmark{font-size:.94rem}
  .nav__links{gap:.9rem}
  .nav__links a{font-size:.6rem;letter-spacing:.1em}
  .ledger__row{grid-template-columns:1fr;gap:.4rem}
  .ledger__key{padding-top:0}
  .roll{grid-template-columns:repeat(10,1fr)}
  .hero__partners{gap:1rem}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:1rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero__tagline{opacity:1;transform:none}
}