/* =============================================================
   Gen-Alpha Govt School — styles
   Mobile-first. Design tokens per build plan §7.
   ============================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --ink:#0E1B2C;
  --brand:#1E5EFF;
  --brand-deep:#0B3AA8;
  --amber:#FFB020;
  --green:#12B981;
  --coral:#FF6B6B;
  --sky:#7FD1FF;
  --paper:#FBF8F2;
  --card:#FFFFFF;
  --muted:#5B6B7F;
  --line:#E7E1D6;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.6s;
  --r-lg:24px;
  --r-md:18px;
  --r-sm:12px;
  --wrap:720px;
  --pad:20px;

  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --shadow-sm:0 2px 10px rgba(14,27,44,.06);
  --shadow-md:0 10px 30px rgba(14,27,44,.10);
  --shadow-lg:0 24px 60px rgba(14,27,44,.18);
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
button{font:inherit;color:inherit}
a{color:var(--brand);text-underline-offset:3px}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}

.skip-link{
  position:absolute;left:-9999px;top:8px;z-index:200;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;text-decoration:none;
}
.skip-link:focus{left:8px}

/* ---------- 3. TYPE + SHARED UTILITIES ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.section{padding:clamp(56px,11vw,110px) 0;position:relative;scroll-margin-top:64px}

.eyebrow{
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#9A6A05;margin-bottom:12px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--amber);flex:none}
.eyebrow--light{color:#FFCF6B}
.eyebrow--light::before{background:var(--amber)}

h2,.h2{
  font-family:var(--font-display);
  font-size:clamp(27px,7vw,40px);
  line-height:1.12;
  letter-spacing:-.02em;
  font-weight:700;
  text-wrap:balance;
}
h3{font-family:var(--font-display);font-size:19px;line-height:1.25;letter-spacing:-.01em;font-weight:700}
.lede{color:var(--muted);font-size:16.5px;margin-top:14px;max-width:62ch}
.helper{font-size:14.5px;color:var(--muted);margin-top:12px}

.kicker{
  display:inline-block;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;
  padding:8px 14px;border-radius:999px;
  background:rgba(255,176,32,.96);color:#3A2600;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 26px;border:0;border-radius:999px;
  font-weight:700;font-size:16.5px;cursor:pointer;text-decoration:none;
  background:var(--brand);color:#fff;
  box-shadow:0 10px 26px rgba(30,94,255,.34);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(30,94,255,.42)}
.btn:active{transform:translateY(0)}
.btn--amber{background:var(--amber);color:#3A2600;box-shadow:0 10px 26px rgba(255,176,32,.38)}
/* WhatsApp green — the loudest share option, since WhatsApp is how this
   actually forwards in India. Dark-green text keeps AA contrast on the
   recognizable brand green; the glyph inherits currentColor. */
.btn--wa{background:#25D366;color:#06351B;box-shadow:0 10px 26px rgba(37,211,102,.40)}
.btn--wa:hover{box-shadow:0 16px 34px rgba(37,211,102,.48)}
.btn--ghost{background:rgba(255,255,255,.10);color:#fff;border:1.5px solid rgba(255,255,255,.42);box-shadow:none}
/* the platform glyphs tucked in after a button's label — a hint, so they sit
   a shade back from the text they follow */
.btn__hint{display:inline-flex;align-items:center;gap:7px;opacity:.7}
.btn__hint svg{flex:none}
.btn--ghost:hover{background:rgba(255,255,255,.18);box-shadow:none}
.btn--mini{min-height:44px;padding:10px 18px;font-size:14.5px;box-shadow:none}

/* Shared bullet list. Used wherever a paragraph was doing a list's job: on a
   phone the reader should be able to take a card in at a glance instead of
   reading a block of prose. The wording is unchanged — only the shape is. */
.blist{display:grid;gap:8px;margin-top:10px}
.blist li{
  position:relative;padding-left:20px;
  font-size:15px;line-height:1.5;color:var(--muted);
}
.blist li::before{
  content:"";position:absolute;left:3px;top:.6em;
  width:6px;height:6px;border-radius:50%;background:var(--amber);
}
.blist li b{color:var(--ink);font-weight:700}
.blist--num{counter-reset:blist}
.blist--num li{padding-left:26px;counter-increment:blist}
.blist--num li::before{
  content:counter(blist);
  top:.1em;left:0;width:18px;height:18px;border-radius:50%;
  background:rgba(255,176,32,.24);color:#8A5200;
  font-size:10.5px;font-weight:800;line-height:18px;text-align:center;
}

/* Every citation of the report links to the official PDF on the Telangana
   Education Commission site. It inherits its surroundings' colour, so one rule
   covers the dark hero, the dark footer and the light foot-notes alike. */
.srclink{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);
  transition:text-decoration-color .2s var(--ease);
}
.srclink:hover,.srclink:focus-visible{text-decoration-color:currentColor}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);
  font-size:13.5px;font-weight:600;color:var(--ink);
  box-shadow:var(--shadow-sm);
}

/* reveal-on-scroll */
[data-reveal]{
  opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].in-view{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}

/* ---------- 4. STICKY HEADER ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(251,248,242,.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(231,225,214,.9);
  transform:translateY(-104%);
  transition:transform .4s var(--ease);
  padding-top:env(safe-area-inset-top);
}
.site-header.is-visible{transform:none}
.site-header__in{
  max-width:var(--wrap);margin-inline:auto;padding:7px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.site-header__brand{display:flex;align-items:center;gap:9px;min-height:44px;text-decoration:none;color:var(--ink);min-width:0}
.site-header__mark{display:flex;flex:none}
.site-header__name{font-family:var(--font-display);font-weight:700;font-size:15.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-header__progress{height:3px;background:transparent}
.site-header__progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--brand));transition:width .1s linear}

/* =============================================================
   SECTION A — HERO
   ============================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#0B2A60 0%,#1E56A0 9%,#3C7CC2 16%,#79B0DC 22%,#B9D6E9 27%,#FFDCAE 33%,#FFC189 38%,#FFA871 46%,#FF9560 100%);
}
.hero__sun{
  position:absolute;top:-9%;left:34%;width:74vw;height:74vw;max-width:560px;max-height:560px;
  background:
    radial-gradient(circle,rgba(255,250,228,1) 0 6%,rgba(255,221,138,.80) 12%,rgba(255,183,60,.34) 27%,rgba(255,150,60,0) 62%);
  transform:translateZ(0) scale(var(--sun-s,1));
  opacity:0;
  animation:sunUp 1.6s var(--ease) .15s forwards;
  pointer-events:none;
}
@keyframes sunUp{from{opacity:0;transform:translateY(26px) scale(.9)}to{opacity:1;transform:none}}

.hero__clouds{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cloud{position:absolute;opacity:0;animation:cloudIn 1.4s var(--ease) forwards, drift linear infinite}
.cloud--1{top:9%;left:-14%;animation-delay:.3s,0s;animation-duration:1.4s,86s}
.cloud--2{top:20%;left:-44%;animation-delay:.5s,0s;animation-duration:1.4s,116s}
.cloud--3{top:3%;left:-72%;animation-delay:.7s,0s;animation-duration:1.4s,146s}
@keyframes cloudIn{from{opacity:0}to{opacity:1}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(190vw)}}
.birds{position:absolute;top:27%;left:7%;width:88px;opacity:0;animation:cloudIn 1.6s var(--ease) 1s forwards, birdFloat 16s ease-in-out 1s infinite}
@keyframes birdFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-14px)}}

.hero__scene{
  position:absolute;left:0;right:0;bottom:0;
  height:81%;
  z-index:1;
  transform:translateY(var(--parallax-scene,0px));
  will-change:transform;
}
.hero__scene .scene{width:100%;height:100%}

/* Photoreal hero layer — covers the SVG scene inside the same parallax box.
   object-position favours the main block so the tall phone crop keeps the
   building rather than the empty foreground. */
.hero__photo{position:absolute;inset:0;z-index:2}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:46% 54%;display:block}

/* hero scene load-in choreography */
.lyr,.bus,.bloom{opacity:0}
.lyr--far{animation:rise 1s var(--ease) .15s forwards}
.lyr--trees{animation:rise 1s var(--ease) .28s forwards}
.lyr--ground{animation:rise 1s var(--ease) .34s forwards}
.lyr--campus{animation:rise 1.05s var(--ease) .46s forwards}
.bloom{animation:bloomIn 1.6s var(--ease) 1.15s forwards}
.lyr--yard{animation:rise .9s var(--ease) .60s forwards}
.lyr--play{animation:rise .9s var(--ease) .72s forwards}
.lyr--court{animation:rise .9s var(--ease) .78s forwards}
.lyr--fg{animation:rise .9s var(--ease) .66s forwards}
.lyr--foreground{animation:rise .9s var(--ease) .54s forwards}
.lyr--kids{animation:rise .9s var(--ease) 1.25s forwards}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes bloomIn{from{opacity:0}to{opacity:.9}}

.bus{animation:busIn 1.7s var(--ease) .85s forwards}
@keyframes busIn{
  from{opacity:0;transform:translate(-330px,545px)}
  22%{opacity:1}
  to{opacity:1;transform:translate(380px,545px)}
}
/* windows light up */
.win rect{opacity:.55}
.blk--main .win rect{animation:litUp .5s var(--ease) forwards}
.blk--left .win rect,.blk--right .win rect{animation:litUp .5s var(--ease) forwards}
.win rect:nth-child(1){animation-delay:1.30s}
.win rect:nth-child(2){animation-delay:1.38s}
.win rect:nth-child(3){animation-delay:1.46s}
.win rect:nth-child(4){animation-delay:1.54s}
.win rect:nth-child(5){animation-delay:1.62s}
.win rect:nth-child(6){animation-delay:1.70s}
.win rect:nth-child(7){animation-delay:1.78s}
.win rect:nth-child(8){animation-delay:1.86s}
.win rect:nth-child(9){animation-delay:1.94s}
.win rect:nth-child(10){animation-delay:2.02s}
@keyframes litUp{to{opacity:1;fill:#FFE29A}}

.hero__scrim{
  position:absolute;left:0;right:0;bottom:0;height:64%;z-index:2;
  background:linear-gradient(180deg,rgba(8,18,38,0) 0%,rgba(8,18,38,.34) 40%,rgba(8,18,38,.72) 72%,rgba(8,18,38,.88) 100%);
}
.hero__content{
  position:relative;z-index:3;width:100%;color:#fff;
  padding-top:24px;
  background:linear-gradient(180deg,rgba(8,18,38,0) 0%,rgba(8,18,38,.58) 26%,rgba(8,18,38,.90) 62%,rgba(8,18,38,.96) 100%);
}
.hero__content-in{
  max-width:var(--wrap);margin-inline:auto;
  padding:0 var(--pad) calc(20px + env(safe-area-inset-bottom));
}
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(36px,9.8vw,80px);
  line-height:1;letter-spacing:-.035em;font-weight:700;
  margin:10px 0 8px;
  text-shadow:0 4px 30px rgba(0,0,0,.4);
}
.hero__tagline{
  font-size:12.5px;font-weight:600;line-height:1.38;
  color:#FFD98A;max-width:38ch;
}
.hero__descriptor{
  font-size:11px;line-height:1.4;color:rgba(255,255,255,.68);margin-top:4px;max-width:46ch;
}
.hero__punch{
  margin-top:12px;font-size:15px;line-height:1.48;font-weight:500;
  color:rgba(255,255,255,.96);max-width:34ch;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.hero__cue{
  display:inline-flex;align-items:center;gap:8px;margin-top:15px;
  color:#fff;text-decoration:none;font-weight:700;font-size:14.5px;letter-spacing:.03em;
  padding:10px 18px 10px 20px;border-radius:999px;min-height:46px;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.34);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.hero__cue svg{animation:bounceY 1.9s var(--ease) infinite}
@keyframes bounceY{0%,100%{transform:translateY(0)}45%{transform:translateY(5px)}}

/* hero text load-in */
[data-hero]{opacity:0;transform:translateY(18px);animation:heroUp .8s var(--ease) forwards}
[data-hero="1"]{animation-delay:1.55s}
[data-hero="2"]{animation-delay:1.05s}
[data-hero="3"]{animation-delay:1.22s}
[data-hero="4"]{animation-delay:1.30s}
[data-hero="5"]{animation-delay:1.40s}
[data-hero="6"]{animation-delay:1.66s}
@keyframes heroUp{to{opacity:1;transform:none}}
.no-js [data-hero]{opacity:1;transform:none;animation:none}

@media (min-width:760px){
  .hero__scene{height:88%}
  .hero__content{padding-top:80px}
  .hero__content-in{padding-bottom:56px}
  .hero__title{margin:16px 0 14px}
  .hero__tagline{font-size:16px;max-width:48ch}
  .hero__descriptor{font-size:13px}
  .hero__punch{font-size:19px;max-width:46ch;margin-top:18px}
}

/* The 81%/88% scene box was sized for the SVG, whose sky is transparent and so
   melts into the hero gradient behind it. A photograph's sky is opaque, so that
   box would leave a hard horizontal seam partway up. Below the desktop
   breakpoint the scene now spans the full hero, matching what >=900px already
   does. The SVG fallback still fills correctly either way — it slices. */
@media (max-width:899px){
  .hero__scene{top:0;height:100%}
}

/* Phones: stack the hero into three bands so the campus photo is never
   buried under the copy. Title sits up top, the school breathes in a clear
   middle window, and the rest of the copy sits along the bottom. Desktop and
   tablet (>=760px) are untouched — they keep the single bottom-overlay hero. */
@media (max-width:759px){
  .hero__content{
    position:absolute;inset:0;z-index:3;
    display:flex;padding:0;background:none;
  }
  .hero__content-in{
    flex:1;display:flex;flex-direction:column;justify-content:space-between;
    padding:0;max-width:none;
  }
  .hero__head{
    padding:calc(env(safe-area-inset-top) + 30px) var(--pad) 46px;
    background:linear-gradient(180deg,rgba(8,18,38,.86) 0%,rgba(8,18,38,.64) 44%,rgba(8,18,38,.28) 76%,rgba(8,18,38,0) 100%);
  }
  .hero__body{
    padding:58px var(--pad) calc(22px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(8,18,38,0) 0%,rgba(8,18,38,.50) 28%,rgba(8,18,38,.86) 58%,rgba(8,18,38,.95) 100%);
  }
  /* the body gradient already darkens the bottom — pull the old scrim back so
     it doesn't dim the clear middle window */
  .hero__scrim{height:30%}
  /* frame the building inside that middle window */
  .hero__photo img{object-position:50% 60%}
}

/* Desktop hero: text column on the left, campus breathing on the right. */
@media (min-width:900px){
  .hero{justify-content:center}
  .hero__scene{top:0;height:100%}
  .hero__sun{top:-4%;left:52%;width:46vw;height:46vw}
  .hero__scrim{
    top:0;height:100%;
    background:
      linear-gradient(96deg,rgba(7,16,34,.94) 0%,rgba(7,16,34,.86) 26%,rgba(7,16,34,.52) 46%,rgba(7,16,34,.06) 66%,rgba(7,16,34,0) 80%),
      linear-gradient(180deg,rgba(7,16,34,.34) 0%,rgba(7,16,34,0) 38%,rgba(7,16,34,0) 70%,rgba(7,16,34,.45) 100%);
  }
  .hero__content{background:none;padding-top:0}
  .hero__content-in{max-width:1180px;padding:0 40px}
  .hero__content-in > *{max-width:min(560px,50vw)}
  .hero__title{font-size:clamp(52px,5.6vw,76px);margin:18px 0 16px}
  .hero__punch{font-size:20px;max-width:min(470px,42vw)}
  .hero__cue{margin-top:26px}
}

/* =============================================================
   SECTION B — THE FLIP (today vs tomorrow)
   ============================================================= */
.flip{background:var(--paper);padding-bottom:clamp(28px,5vw,44px)}

.compare{
  position:relative;--pos:88%;
  aspect-ratio:4/3;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  background:#CFC9BC;
  touch-action:pan-y;
  isolation:isolate;
}
.compare__pane{position:absolute;inset:0}
.compare__pane svg{width:100%;height:100%}
.compare__pane--after{clip-path:inset(0 0 0 var(--pos))}

.compare__tag{
  position:absolute;top:12px;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
}
.compare__tag--before{left:12px;background:rgba(70,64,52,.86);color:#F0EBE0}
.compare__tag--after{right:12px;background:rgba(18,185,129,.95);color:#05261B}

.compare__seam{
  position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;
  background:#fff;box-shadow:0 0 12px rgba(0,0,0,.28);pointer-events:none;z-index:3;
}
.compare__grip{
  position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;background:#fff;
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(14,27,44,.34);
  pointer-events:none;z-index:4;
}
/* Most visitors do not know the seam is draggable. The hint rides just under
   the grip so it reads as a label on the thing you grab, and the slider drifts
   on its own until they take over — both stop for good on the first touch
   (.is-touched, set in script.js). --hintpos is --pos held back from the edges
   by half a pill width, measured in script.js, so it never runs off the frame. */
.compare__hint{
  position:absolute;left:var(--hintpos,50%);top:50%;transform:translate(-50%,38px);
  z-index:4;pointer-events:none;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;
  background:rgba(14,27,44,.74);color:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.03em;white-space:nowrap;
  box-shadow:0 4px 14px rgba(14,27,44,.28);
  transition:opacity .45s ease,transform .45s ease;
}
.compare__hint svg{animation:nudge 1.9s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(-2px)}50%{transform:translateX(2px)}}
.compare.is-touched .compare__hint{opacity:0;transform:translate(-50%,48px)}
@media (prefers-reduced-motion:reduce){
  .compare__hint svg{animation:none}
  .compare__hint{transition:none}
}

.compare__range{
  position:absolute;inset:0;z-index:5;
  width:100%;height:100%;margin:0;padding:0;
  -webkit-appearance:none;appearance:none;background:transparent;
  cursor:ew-resize;opacity:0;
}
.compare__range::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:100%}
.compare__range::-moz-range-thumb{width:56px;height:100%;border:0;background:transparent}
.compare:has(.compare__range:focus-visible) .compare__grip{box-shadow:0 0 0 4px var(--brand),0 6px 18px rgba(14,27,44,.34)}
.compare__range:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:var(--r-lg)}

/* The line that closes §B. It is a statement panel, not a section heading —
   deliberately unlike the plain left-aligned display headings that open every
   other section, so a reader never mistakes the two for the same thing. It
   also fills what was a long dead gap between the slider and §C. */
.flip__bridge{
  margin-top:clamp(26px,6vw,42px);
  padding:clamp(26px,6.5vw,44px) clamp(20px,5vw,40px);
  border-radius:var(--r-lg);
  background:linear-gradient(158deg,#12233A 0%,#0B3AA8 135%);
  color:#fff;text-align:center;
  font-size:clamp(21px,5vw,30px);line-height:1.3;
  box-shadow:var(--shadow-md);
}
.flip__bridge span{display:block;margin-top:13px;color:var(--amber)}
.flip__bridge span::after{
  content:"";display:block;width:12px;height:12px;margin:15px auto 0;
  border-right:2.6px solid var(--amber);border-bottom:2.6px solid var(--amber);
  transform:rotate(45deg);opacity:.72;
}

@media (min-width:700px){
  .compare{aspect-ratio:16/9}
}

/* =============================================================
   SECTION C — THE BIG IDEA (cluster map)
   ============================================================= */
.idea{
  background:linear-gradient(180deg,var(--paper) 0%,#F3F7F0 40%,#F3F7F0 100%);
  padding-top:clamp(38px,7vw,66px);
}

.cluster{margin:clamp(24px,6vw,40px) 0 0}
.cluster > svg{width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.cluster__chips{margin-top:clamp(16px,4vw,22px);justify-content:center}
.cluster__cap{margin-top:14px;font-size:14px;line-height:1.55;color:var(--muted)}
.cluster__cap b{color:var(--ink)}

/* roads draw themselves in */
.cluster__roads path{stroke-dasharray:1;stroke-dashoffset:1}
.in-view .cluster__roads path{animation:drawRoad 1.1s var(--ease) forwards}
.in-view .cluster__roads path:nth-child(2){animation-delay:.08s}
.in-view .cluster__roads path:nth-child(3){animation-delay:.16s}
.in-view .cluster__roads path:nth-child(4){animation-delay:.24s}
.in-view .cluster__roads path:nth-child(5){animation-delay:.32s}
.in-view .cluster__roads path:nth-child(6){animation-delay:.40s}
@keyframes drawRoad{to{stroke-dashoffset:0}}

.vlg{opacity:0;transform:scale(.7);transform-origin:center;transform-box:fill-box}
.in-view .vlg{animation:popIn .6s var(--ease) forwards;animation-delay:calc(var(--i) * 90ms)}

/* names on the map, so six markers read as six places and the middle reads as a school */
.cluster__labels{opacity:0;transition:opacity .5s var(--ease) .55s}
.in-view .cluster__labels{opacity:1}
.vlbl,.hublbl{
  font-family:var(--font-display);font-weight:700;
  paint-order:stroke;stroke-linejoin:round;
}
.vlbl{font-size:21px;fill:#6C7A61;letter-spacing:.005em;stroke:#EDF4E6;stroke-width:6px}
.hublbl{font-size:22px;fill:#0B3AA8;letter-spacing:.07em;stroke:#F1F6EC;stroke-width:7px}
@keyframes popIn{to{opacity:1;transform:none}}

.cbus{
  offset-path:var(--path);offset-rotate:0deg;offset-distance:0%;
  opacity:0;
}
.in-view .cbus{animation:travel 7s linear var(--dl) infinite}
@keyframes travel{
  0%{offset-distance:0%;opacity:0}
  8%{opacity:1}
  86%{opacity:1}
  96%{offset-distance:100%;opacity:0}
  100%{offset-distance:100%;opacity:0}
}
@supports not (offset-path: path("M0 0L1 1")){
  .cbus{opacity:1;transform:translate(var(--fx),var(--fy))}
  .in-view .cbus{animation:none}
}

.cluster__hub{opacity:0;transform-origin:300px 300px}
.in-view .cluster__hub{animation:hubOn .9s var(--ease) .75s forwards}
@keyframes hubOn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
.in-view .hub__ring{animation:ringPulse 3.4s var(--ease) 1.6s infinite}
@keyframes ringPulse{0%{r:74;opacity:.55}70%{r:112;opacity:0}100%{r:112;opacity:0}}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip__dot{width:9px;height:9px;border-radius:50%;flex:none}

@media (min-width:700px){
  .cluster > svg{max-width:600px;margin-inline:auto}
  .cluster__cap{max-width:600px;margin-inline:auto;text-align:center}
}

/* =============================================================
   SECTION D — EXPLORE THE CAMPUS
   ============================================================= */
.campus{background:#F3F7F0}

.campus__map{
  position:relative;margin-top:clamp(22px,6vw,36px);
  aspect-ratio:900/640;
  border-radius:var(--r-lg);
  background:#E8F4E2;
  box-shadow:var(--shadow-md);
}
.campus__svg{position:absolute;inset:0;width:100%;height:100%;border-radius:var(--r-lg)}
.zshape{transition:opacity .3s var(--ease)}
.campus__map.has-active .zshape{opacity:.34}
.campus__map.has-active .zshape.is-active{opacity:1}

.pin{
  position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);
  width:46px;height:46px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;z-index:2;
  -webkit-tap-highlight-color:transparent;
}
.pin__n{
  display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--zc);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1;
  box-shadow:0 3px 10px rgba(14,27,44,.34),0 0 0 3px rgba(255,255,255,.92);
  transition:transform .22s var(--ease);
}
.pin::after{
  content:"";position:absolute;width:32px;height:32px;border-radius:50%;
  border:2px solid var(--zc);opacity:0;
}
.in-view .pin::after{animation:pinPulse 2.8s var(--ease) infinite;animation-delay:calc(var(--x) / 100 * .4s)}
@keyframes pinPulse{0%{transform:scale(1);opacity:.65}70%{transform:scale(2.05);opacity:0}100%{transform:scale(2.05);opacity:0}}
.pin:hover .pin__n,.pin:focus-visible .pin__n{transform:scale(1.16)}
.pin.is-active .pin__n{transform:scale(1.24)}

/* ---- the ledger: one row per zone, one dot per standard ---- */
.counter{margin:clamp(20px,5vw,28px) 0 0}
.counter__pill{
  display:flex;align-items:center;gap:9px;width:fit-content;
  padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.counter__num{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--green);min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}
.counter__of{font-size:13.5px;font-weight:700;color:var(--muted)}
.counter__bar{display:block;width:82px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.counter__bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--green),#0EA371);transition:width .45s var(--ease)}

.ledger{display:grid;gap:8px;margin-top:12px}
.zrow{
  width:100%;min-height:44px;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:3px 10px;
  padding:11px 13px;border-radius:16px;
  background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.zrow:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--zc)}
.zrow.is-active{border-color:var(--zc);box-shadow:0 0 0 2px var(--zc) inset,var(--shadow-sm)}
.zrow__ico{font-size:19px;line-height:1}
.zrow__name{font-size:14px;font-weight:600;line-height:1.24}
.zrow__n{
  min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:var(--zc);color:#fff;font-size:11.5px;font-weight:700;
  display:grid;place-items:center;font-variant-numeric:tabular-nums;
}
.zrow__dots{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.zrow__dots i{
  width:13px;height:13px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--zc) 30%,#fff);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
  transition-delay:calc(var(--i) * 55ms);
}
.zrow.is-checked .zrow__dots i{background:var(--zc);border-color:var(--zc);transform:scale(1.14)}

/* ---- bottom sheet / dialog ---- */
.sheet{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet__backdrop{position:absolute;inset:0;background:rgba(9,20,40,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .3s var(--ease)}
.sheet.is-open .sheet__backdrop{opacity:1}
.sheet__panel{
  position:relative;width:100%;max-width:620px;
  max-height:86svh;display:flex;flex-direction:column;
  background:var(--card);
  border-radius:26px 26px 0 0;
  box-shadow:var(--shadow-lg);
  transform:translateY(101%);
  transition:transform .42s var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
.sheet.is-open .sheet__panel{transform:none}
.sheet__grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:10px auto 0;flex:none}
.sheet__close{
  position:absolute;top:12px;right:12px;z-index:2;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:var(--paper);color:var(--ink);display:grid;place-items:center;
}
.sheet__close:hover{background:var(--line)}
.sheet__body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 20px 4px;flex:1}
.sheet__nav{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px 16px;border-top:1px solid var(--line);background:var(--card);
}
.btn--nav{min-height:46px;padding:10px 18px;font-size:15px}
.btn--ghost.btn--nav{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn--ghost.btn--nav:hover{background:var(--line)}
.sheet__count{font-size:13.5px;font-weight:700;color:var(--muted);letter-spacing:.04em}

.zone{padding:14px 0 22px}
.zone[hidden]{display:none}
.zone:focus{outline:none}
.zone__eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--zc)}
.zone__title{display:flex;align-items:center;gap:10px;font-size:clamp(21px,5.6vw,27px);margin-top:8px;letter-spacing:-.02em}
.zone__emoji{font-size:26px;line-height:1}
.zone__promise{margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--muted)}
.zone__list{margin-top:16px;display:grid;gap:11px}
.zone__list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.45}
.zone__tick{flex:none;margin-top:2px;color:var(--zc)}
.zone__no{
  display:inline-block;min-width:1.6em;margin-right:7px;
  font-size:12px;font-weight:800;color:var(--zc);
  font-variant-numeric:tabular-nums;
}
.zone__stamp{
  margin-top:18px;padding:12px 14px;border-radius:14px;
  background:color-mix(in srgb,var(--zc) 10%,#fff);
  color:var(--ink);font-size:13.5px;font-weight:600;line-height:1.45;
  border:1px solid color-mix(in srgb,var(--zc) 26%,#fff);
}
.zone__stamp span{color:var(--zc);font-weight:800;margin-right:4px}

.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 (min-width:700px){
  .ledger{grid-template-columns:1fr 1fr;gap:10px}
  .sheet{align-items:center;padding:24px}
  .sheet__panel{border-radius:24px;max-height:82vh;transform:translateY(24px) scale(.97);opacity:0;transition:transform .34s var(--ease),opacity .34s var(--ease)}
  .sheet.is-open .sheet__panel{transform:none;opacity:1}
  .sheet__grab{display:none}
  .sheet__body{padding:18px 28px 6px}
}

/* no-JS: every zone is simply listed on the page */
.no-js .sheet[hidden]{display:block}
.no-js .sheet{position:static;padding:0;margin-top:22px}
.no-js .sheet__backdrop,.no-js .sheet__close,.no-js .sheet__nav,.no-js .sheet__grab{display:none}
.no-js .sheet__panel{max-width:var(--wrap);margin-inline:auto;transform:none;opacity:1;max-height:none;box-shadow:none;background:none;border-radius:0}
.no-js .sheet__body{padding:0 var(--pad);overflow:visible}
.no-js .zone{background:var(--card);border-radius:var(--r-md);padding:18px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.no-js .zone[hidden]{display:block}
.no-js .pin{display:none}
/* no-JS: nothing can tick, so show the ledger already complete */
.no-js .zrow__dots i{background:var(--zc);border-color:var(--zc)}

/* IMAGE-BRIEF.md §4 puts IMG1 behind this panel. The brand gradient stays in
   front at high alpha so the white 45/45 keeps its contrast — the campus is
   meant to be felt behind the number, not read. First declaration is the
   plain-JPEG fallback; the second wins wherever image-set() is understood. */
.finale{
  margin-top:clamp(26px,7vw,36px);padding:clamp(24px,7vw,40px) 22px;text-align:center;
  border-radius:var(--r-lg);
  background-color:#1E5EFF;
  background-image:
    linear-gradient(155deg,rgba(11,58,168,.90),rgba(30,94,255,.84) 58%,rgba(46,134,230,.78)),
    url("assets/img/r/IMG1-hero-wide-800.jpg");
  background-image:
    linear-gradient(155deg,rgba(11,58,168,.90),rgba(30,94,255,.84) 58%,rgba(46,134,230,.78)),
    image-set(url("assets/img/r/IMG1-hero-wide-800.avif") type("image/avif"),
              url("assets/img/r/IMG1-hero-wide-800.webp") type("image/webp"),
              url("assets/img/r/IMG1-hero-wide-800.jpg") type("image/jpeg"));
  background-size:cover;
  background-position:center 58%;
  background-repeat:no-repeat;
  color:#fff;box-shadow:var(--shadow-md);
}
.finale__num{font-family:var(--font-display);font-weight:700;font-size:clamp(52px,15vw,84px);line-height:1;letter-spacing:-.04em}
.finale__num .finale__of{font-size:.42em;color:rgba(255,255,255,.72);letter-spacing:0}
.finale.is-on .finale__num{animation:pop .7s var(--ease)}
@keyframes pop{0%{transform:scale(.86)}55%{transform:scale(1.06)}100%{transform:scale(1)}}
.finale__line{margin-top:12px;font-size:16.5px;line-height:1.5;font-weight:500;color:rgba(255,255,255,.94);max-width:34ch;margin-inline:auto}

/* =============================================================
   SECTION D2 — A DAY HERE
   ============================================================= */
.day{background:linear-gradient(180deg,#F3F7F0 0%,var(--paper) 100%)}

/* Single rail with an emoji medallion per beat. The rail and the medallions are
   both positioned from the same edge so they cannot drift apart at any width. */
.timeline{margin-top:clamp(24px,6vw,36px);position:relative;padding-left:48px}
.timeline::before{
  content:"";position:absolute;left:16px;top:16px;bottom:30px;width:2px;
  background:linear-gradient(180deg,var(--line),var(--amber) 18%,var(--amber) 82%,var(--line));
}
.tl{position:relative;padding-bottom:22px}
.tl__ico{
  position:absolute;left:-48px;top:-3px;
  width:34px;height:34px;border-radius:50%;
  background:var(--card);border:2px solid var(--amber);
  display:grid;place-items:center;font-size:16px;line-height:1;
}
.tl__time{
  display:inline-block;
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#9A6A05;
}
.tl__h{margin-top:3px;font-size:17px;line-height:1.26;letter-spacing:-.015em}
.tl__body p{margin-top:5px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.tl--hot .tl__h{color:#0B7B57}
.tl--hot .tl__time{color:#0B7B57}
.tl--hot .tl__ico{border-color:var(--green);background:#E9FBF3}

@media (min-width:620px){
  .timeline{padding-left:0}
  .timeline::before{left:97px}
  .tl{display:grid;grid-template-columns:78px 1fr;gap:42px;padding-bottom:26px}
  .tl__ico{left:81px;top:-4px}
  .tl__time{text-align:right;font-size:13px;padding-top:5px}
  .tl__h{margin-top:0}
}

/* three facts about the food, before the table proves them */
.mpills{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 16px}
.mpills li{
  display:flex;align-items:baseline;gap:5px;
  padding:6px 12px;border-radius:999px;
  background:#FFF4E0;color:#8A5A08;
  font-size:12.5px;font-weight:600;line-height:1.2;
}
.mpills b{font-family:var(--font-display);font-size:15px;color:#B5710A}

.menu{margin-top:clamp(26px,7vw,40px);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.menu__cap{display:block;padding:18px 18px 12px}
.menu__eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9A6A05}
.menu__title{display:block;margin-top:4px;font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:-.02em}
.menu__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.menu__table{width:100%;border-collapse:collapse;font-size:13.5px}
.menu__table th,.menu__table td{text-align:left;padding:11px 14px;vertical-align:top;border-top:1px solid var(--line)}
.menu__table thead th{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  background:var(--paper);border-top:0;white-space:nowrap;
}
.menu__table tbody th{font-weight:700;white-space:nowrap;color:var(--ink);background:#FDFBF7}
.menu__table td{color:var(--muted);line-height:1.4}
.menu__table td b{color:#0B7B57;font-weight:700}

/* On a phone a six-column menu is unreadable, so each day becomes its own card. */
@media (max-width:679px){
  .menu__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .menu__table,.menu__table tbody,.menu__table tr,.menu__table th,.menu__table td{display:block}
  .menu__table tr{border-top:1px solid var(--line);padding:4px 0 12px}
  .menu__table tbody th{
    background:none;border:0;padding:12px 18px 2px;
    font-family:var(--font-display);font-size:15px;letter-spacing:-.01em;
  }
  .menu__table td{border:0;padding:5px 18px;display:flex;gap:10px}
  .menu__table td::before{
    content:attr(data-label);flex:none;width:74px;
    font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:#B0A794;padding-top:3px;
  }
}
@media (min-width:680px){
  .menu__table{min-width:620px}
}
.menu__note{padding:14px 18px 18px;font-size:13px;line-height:1.55;color:var(--muted);border-top:1px solid var(--line)}

/* =============================================================
   SECTION D3 — HOW THEY'LL TEACH
   ============================================================= */
.teach{background:var(--paper)}

.promise{
  margin-top:clamp(24px,6vw,34px);padding:22px 20px;border-radius:var(--r-md);
  background:linear-gradient(140deg,#0B7B57,#12B981);color:#fff;box-shadow:var(--shadow-md);
}
.promise__q{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(18px,4.8vw,23px);line-height:1.34;letter-spacing:-.015em;
}
.promise__q em{font-style:italic;color:#D9FBEC}
.promise__src{margin-top:12px;font-size:12.5px;color:rgba(255,255,255,.82)}

.teachs{margin-top:16px;display:grid;gap:12px}
.tcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px 18px;box-shadow:var(--shadow-sm);
  border-top:4px solid var(--green);
}
.tcard__big{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,8vw,38px);line-height:1;letter-spacing:-.035em;
  color:#0B7B57;
}
.tcard__h{margin-top:8px;font-size:16.5px;line-height:1.26;letter-spacing:-.015em}
.tcard__t{margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--muted)}

@media (min-width:560px){
  .teachs{grid-template-columns:1fr 1fr}
}
@media (min-width:960px){
  .teachs{grid-template-columns:repeat(3,1fr)}
}

/* =============================================================
   SECTION E2 — NOBODY CAN FAKE THE RESULTS
   ============================================================= */
.results{
  background:linear-gradient(165deg,#0E1B2C 0%,#16304F 60%,#0E2A5E 100%);
  color:#fff;
}
.results .lede--light{color:rgba(255,255,255,.78)}
.results h2{text-wrap:balance}

.proofs{margin-top:clamp(26px,7vw,40px);display:grid;gap:14px}
.proof{
  position:relative;overflow:hidden;
  padding:18px 74px 18px 20px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}
.proof__n{
  position:absolute;top:6px;right:12px;
  font-family:var(--font-display);font-size:46px;font-weight:700;
  line-height:1;letter-spacing:-.04em;color:var(--amber);opacity:.26;
}
.proof__h{font-size:17.5px;line-height:1.26;letter-spacing:-.015em}
.proof p{margin-top:7px;font-size:14.5px;line-height:1.52;color:rgba(255,255,255,.78)}
.proof p b{color:#FFD98A;font-weight:600}

.results__kicker{
  margin-top:clamp(24px,6vw,34px);
  font-family:var(--font-display);font-size:clamp(19px,5vw,26px);line-height:1.32;
  letter-spacing:-.015em;color:#fff;
}

@media (min-width:760px){
  .proofs{grid-template-columns:1fr 1fr}
}

/* =============================================================
   SECTION E3 — FOR ONCE, THE SCHOOL GETS A REPORT CARD
   ============================================================= */
.marked{background:linear-gradient(180deg,#F4F1FB 0%,var(--paper) 100%)}
.marked .eyebrow{color:#5B34B8}
.marked .eyebrow::before{background:#7A4DE0}
.marked h2{text-wrap:balance}

/* the form itself, blank — this is what the school is graded on, not a result */
.rcard{
  margin-top:clamp(24px,6vw,34px);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);overflow:hidden;
}
.rcard__head{display:block;padding:17px 18px;background:linear-gradient(120deg,#5B34B8,#7A4DE0);color:#fff}
.rcard__t{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(17px,4.6vw,21px);letter-spacing:-.015em}
.rcard__s{display:block;margin-top:5px;font-size:12.5px;color:rgba(255,255,255,.86)}
.rcard__row{
  display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
  padding:13px 18px;border-top:1px solid var(--line);
}
.rcard__row--hot{background:#FBF7FF}
.rcard__k{font-size:14.5px;line-height:1.3;font-weight:600;color:var(--ink)}
.rcard__k small{display:block;margin-top:3px;font-size:12.5px;font-weight:400;line-height:1.4;color:var(--muted)}
.rcard__row--hot .rcard__k{color:#4A2E96}
.rcard__g{display:flex;gap:5px;flex:none}
.rcard__g i{width:15px;height:19px;border-radius:4px;border:2px dashed #CBC2E4}
.rcard__g--plus i{
  width:auto;min-width:24px;height:19px;border-style:solid;border-color:#7A4DE0;color:#7A4DE0;
  display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13px;
}
.rcard__foot{padding:14px 18px;background:#F7F4FE;border-top:1px solid var(--line);font-size:13.5px;line-height:1.55;color:#4A3A73}
.rcard__foot b{color:#33245C}

.watch{margin-top:14px;display:grid;gap:12px}
.wcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px;box-shadow:var(--shadow-sm);border-top:4px solid #7A4DE0;
}
.wcard__ico{font-size:22px;line-height:1}
.wcard__h{margin-top:8px;font-size:16.5px;line-height:1.26;letter-spacing:-.015em}
.wcard p{margin-top:7px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.wcard em{font-style:italic;color:var(--ink)}

.marked__kicker{
  margin-top:clamp(24px,6vw,34px);
  font-family:var(--font-display);font-size:clamp(19px,5vw,26px);line-height:1.32;
  letter-spacing:-.015em;color:var(--ink);
}

@media (min-width:760px){
  .watch{grid-template-columns:repeat(3,1fr)}
}

/* =============================================================
   SECTION E — THE PEOPLE (29 categories of staff)
   ============================================================= */
.people{background:linear-gradient(180deg,var(--paper) 0%,#F4F1FB 100%)}
.people__n{color:#7A4DE0;font-variant-numeric:tabular-nums}

/* A wall of head counts. Read as a crowd first, as a list second. */
.staff{
  margin-top:clamp(22px,6vw,32px);
  display:grid;grid-template-columns:1fr 1fr;gap:9px;
}
.sf{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:12px 13px;box-shadow:var(--shadow-sm);
  border-left:4px solid var(--zc);
}
.sf--wide{grid-column:1 / -1;background:linear-gradient(100deg,#fff,color-mix(in srgb,var(--zc) 9%,#fff))}
.sf__n{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(21px,5.6vw,25px);line-height:1;letter-spacing:-.03em;
  color:var(--zc);font-variant-numeric:tabular-nums;
}
.sf__r{display:block;margin-top:6px;font-size:13.5px;line-height:1.3;font-weight:600;color:var(--ink)}
.sf__r small{display:block;margin-top:3px;font-size:12px;font-weight:400;line-height:1.36;color:var(--muted)}

.ratio{
  margin-top:clamp(24px,6vw,36px);
  padding:20px 22px;border-radius:var(--r-md);
  background:linear-gradient(135deg,#0B3AA8,#1E5EFF);
  color:#fff;box-shadow:var(--shadow-md);
}
.ratio__big{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(22px,6.2vw,30px);line-height:1.15;letter-spacing:-.02em;
}
.ratio__big span{color:#FFD98A;white-space:nowrap}
.ratio__sub{margin-top:8px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.84)}
.ratio--alt{background:linear-gradient(135deg,#5B34B8,#7A4DE0)}
.ratio--alt .ratio__big span{color:#FFE9A8}

@media (min-width:620px){
  .staff{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:960px){
  .staff{grid-template-columns:repeat(4,1fr)}
}

/* =============================================================
   SECTION G2 — PARENTS RUN IT
   ============================================================= */
.parents{background:linear-gradient(180deg,#FFF0DF 0%,var(--paper) 100%)}
.parents .eyebrow{color:#A8551A}

.pcards{margin-top:clamp(24px,6vw,36px);display:grid;gap:14px}
.pcard{
  background:var(--card);border-radius:var(--r-md);
  padding:20px 18px;box-shadow:var(--shadow-sm);border:1px solid rgba(255,255,255,.9);
}
.pcard__h{display:flex;align-items:flex-start;gap:11px;font-size:17px;line-height:1.28;letter-spacing:-.01em}
.pcard__ico{font-size:22px;line-height:1.1;flex:none}
.pcard__t{margin-top:10px;font-size:15px;line-height:1.55;color:var(--muted)}
.pcard__t b{color:var(--ink);font-weight:700}
/* A small label above a list, for the cards that describe two separate phases. */
.pcard__lbl{
  margin-top:14px;font-size:11px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#A8551A;
}
.pcard__lbl:first-of-type{margin-top:12px}
/* The line the card is actually making — kept out of the bullets so it lands. */
.pcard__punch{
  margin-top:13px;padding-top:12px;border-top:1px solid var(--line);
  font-size:15px;line-height:1.5;font-weight:600;color:var(--ink);
}

.split{margin-top:16px;padding:14px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.split__cap{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.split__bar{display:flex;margin-top:10px;height:38px;border-radius:10px;overflow:hidden;background:var(--line)}
.split__seg{
  width:var(--w);display:grid;place-items:center;
  font-size:13px;font-weight:800;color:#fff;
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease);
}
.in-view .split__seg{transform:none}
.in-view .split__seg--b{transition-delay:.14s}
.in-view .split__seg--c{transition-delay:.28s}
.split__seg--a{background:#1E5EFF}
.split__seg--b{background:#12B981}
.split__seg--c{background:#FFB020;color:#3A2600;font-size:11.5px}
.split__key{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:11px}
.split__key li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.split__dot{width:10px;height:10px;border-radius:3px;flex:none}
.split__dot--a{background:#1E5EFF}
.split__dot--b{background:#12B981}
.split__dot--c{background:#FFB020}

@media (min-width:820px){
  .pcards{grid-template-columns:1fr 1fr}
  .pcard:nth-child(2){grid-row:span 2}
}

/* =============================================================
   SECTION F — BY THE NUMBERS
   ============================================================= */
.numbers{background:linear-gradient(180deg,var(--paper) 0%,#F1F4F8 100%)}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:clamp(24px,6vw,36px)}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:18px 16px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;justify-content:flex-start;gap:6px;
}
.stat__n{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,8vw,38px);line-height:1;letter-spacing:-.03em;
  color:var(--brand-deep);font-variant-numeric:tabular-nums;
}
.stat__l{font-size:13.5px;line-height:1.38;color:var(--muted)}
.stat__note{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}

.stat--hero{grid-column:span 2;background:linear-gradient(140deg,#0B3AA8,#1E5EFF);border-color:transparent;color:#fff;box-shadow:var(--shadow-md)}
.stat--hero .stat__n{color:#fff;font-size:clamp(38px,11vw,54px)}
.stat--hero .stat__l{color:rgba(255,255,255,.86);font-size:14.5px}
.stat--hero .stat__note{color:rgba(255,255,255,.66)}
.stat--free{background:linear-gradient(140deg,#0B7B57,#12B981)}

/* a long figure in a half-width tile needs to come down a size to stay on one line */
.stat--tight .stat__n{font-size:clamp(24px,6.6vw,32px)}

.foot-note{margin-top:20px;font-size:13px;line-height:1.55;color:var(--muted)}

/* =============================================================
   SECTION F2 — BUT HOW CAN THEY AFFORD IT
   ============================================================= */
.afford{background:linear-gradient(180deg,#F1F4F8 0%,#E7EEF7 100%)}
.afford h2{text-wrap:balance}

/* the reframe, given room of its own instead of jammed into the headline */
.answer{
  margin-top:clamp(20px,5vw,28px);
  padding:20px 20px 22px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line);border-left:5px solid var(--green);
  box-shadow:var(--shadow-sm);
}
.answer__k{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#0B7B57}
.answer__h{
  margin-top:8px;font-family:var(--font-display);font-weight:700;
  font-size:clamp(21px,5.7vw,31px);line-height:1.15;letter-spacing:-.025em;text-wrap:balance;
}
.answer__t{margin-top:11px;font-size:15px;line-height:1.55;color:var(--muted)}

.afford__lead{
  margin-top:clamp(26px,6.5vw,36px);
  font-size:16.5px;line-height:1.45;font-weight:600;color:var(--ink);letter-spacing:-.01em;
}

.afs{margin-top:14px;display:grid;gap:11px}
.af{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px 18px 18px;box-shadow:var(--shadow-sm);
  border-top:4px solid var(--zc);
}
.af__n{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,7.6vw,34px);line-height:1;letter-spacing:-.035em;
  color:var(--zc);font-variant-numeric:tabular-nums;
}
.af__r{display:block;margin-top:9px;font-size:15.5px;line-height:1.25;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.af__r small{display:block;margin-top:6px;font-size:13.5px;font-weight:400;line-height:1.5;color:var(--muted)}

/* -----------------------------------------------------------------
   The two bills, told apart. This is the whole point of the section:
   ₹55,412 cr reads as one terrifying annual-looking number until the
   one-time build and the recurring cost are separated. Table 4.1's
   own columns, regrouped — nothing here is a new figure.
   ----------------------------------------------------------------- */
/* These two figures ARE the answer to "how can they afford it", so they carry
   the section rather than trailing a bigger total. */
.bills{margin-top:clamp(22px,5.5vw,30px);display:grid;gap:12px}
@media (min-width:720px){.bills{grid-template-columns:1fr 1fr;gap:14px}}
.bill{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(18px,4.4vw,24px) clamp(18px,4.4vw,22px);box-shadow:var(--shadow-sm);
  border-top:5px solid var(--bc);
}
.bill__k{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--bc)}
.bill__n{
  display:block;margin-top:9px;font-family:var(--font-display);font-weight:700;
  font-size:clamp(36px,10vw,50px);line-height:1;letter-spacing:-.04em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.bill__t{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.bill__t b{color:var(--ink);font-weight:700}
.bills__facts{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;
}
.bills__facts li{
  padding:7px 14px;border-radius:999px;font-size:13px;
  background:var(--card);border:1px solid var(--line);color:var(--muted);
}
.bills__facts b{color:var(--ink);font-weight:700}
.bills__note{margin-top:12px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.bills__note b{color:var(--ink);font-weight:700}
.bills__src{display:block;margin-top:6px;font-size:12px;opacity:.8}

/* -----------------------------------------------------------------
   Year-by-year budget ask. The build segment tapers to nothing while
   the running segment fills in behind it; the dashed last row is the
   only figure that never goes away. Widths are % of the peak year
   (₹9,609 cr, 2031-32) so the rows are directly comparable.
   ----------------------------------------------------------------- */
.years{
  margin-top:clamp(24px,6vw,32px);
  padding:16px 15px 15px;border-radius:var(--r-md);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.years__cap{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.years__list{margin-top:13px;display:grid;gap:7px}
.years__row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.years__yr{
  font-size:12px;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.years__bar{display:flex;height:20px;border-radius:6px;overflow:hidden;background:#EDF1F6;min-width:0}
.years__seg{display:block;height:100%;width:var(--w)}
.years__seg--build{background:#1E5EFF}
.years__seg--run{background:#12B981}
.years__val{
  font-size:12.5px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;
}
.years__row--peak .years__val{color:#0B3AA8}
.years__row--forever{margin-top:6px;padding-top:11px;border-top:1px dashed var(--line)}
.years__row--forever .years__yr{color:var(--ink)}
.years__row--forever .years__yr small{
  display:block;font-weight:400;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
}
.years__row--forever .years__val{color:#0B7B57}
.years__key{display:flex;flex-wrap:wrap;gap:9px 16px;margin-top:13px}
.years__key li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.years__dot{width:10px;height:10px;border-radius:3px;flex:none}
.years__dot--build{background:#1E5EFF}
.years__dot--run{background:#12B981}
.years__note{margin-top:12px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.years__note b{color:var(--ink);font-weight:700}

/* the bars grow out of the left edge as the figure scrolls in.
   scoped to .in-view so that with JS off (no .in-view ever added) the
   bars simply render at full width instead of collapsing to nothing. */
.years__seg{transform-origin:left center}
html:not(.no-js) .years[data-reveal] .years__seg{transform:scaleX(0)}
.years[data-reveal].in-view .years__seg{
  transform:scaleX(1);
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.years[data-reveal].in-view .years__row:nth-child(2) .years__seg{transition-delay:.06s}
.years[data-reveal].in-view .years__row:nth-child(3) .years__seg{transition-delay:.12s}
.years[data-reveal].in-view .years__row:nth-child(4) .years__seg{transition-delay:.18s}
.years[data-reveal].in-view .years__row:nth-child(5) .years__seg{transition-delay:.24s}
.years[data-reveal].in-view .years__row:nth-child(6) .years__seg{transition-delay:.30s}
.years[data-reveal].in-view .years__row:nth-child(7) .years__seg{transition-delay:.36s}
.years[data-reveal].in-view .years__row:nth-child(8) .years__seg{transition-delay:.44s}

.ratio--afford{background:linear-gradient(135deg,#0B3AA8,#2E6BE6)}
.ratio__sub b{color:#FFE9A8;font-weight:700}

@media (min-width:620px){
  .afs{grid-template-columns:1fr 1fr}
  .bills{grid-template-columns:1fr 1fr}
  .years__yr{font-size:13px}
  .years__val{font-size:13.5px}
  .years__bar{height:24px}
}
@media (min-width:960px){
  .afs{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:640px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .stat--hero{grid-column:span 3}
  .stat__l{font-size:14.5px}
}
@media (min-width:900px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .stat--hero{grid-column:span 2}
}

/* =============================================================
   SECTION G — EVERY CHILD BELONGS
   ============================================================= */
.belong{background:linear-gradient(180deg,#FFF6EA 0%,#FFF0DF 100%)}
.belong .eyebrow{color:#A8551A}

/* Each promise carries its own photograph. They used to sit in one strip of
   five below the cards, which reads fine on a wide screen and falls apart on a
   phone — by the time you reach the pictures you have lost which line each one
   belongs to. Pairing them fixes the phone and costs the desktop nothing. */
.belongs{display:grid;gap:14px;margin-top:clamp(24px,6vw,36px)}
.belong-card{
  display:flex;flex-direction:column;
  background:var(--card);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);border:1px solid rgba(255,255,255,.9);
  overflow:hidden;
}
.belong-card__pic{display:block}
.belong-card__pic img{
  width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;background:#E4EAF1;
}
.belong-card__body{display:flex;gap:13px;align-items:flex-start;padding:16px}
.belong-card__art{flex:none;width:46px;height:46px}
.belong-card__art svg{width:100%;height:100%}
.belong-card__copy{min-width:0}
.belong-card__t{font-size:15.5px;line-height:1.45;font-weight:600;color:var(--ink)}
.belong-card__s{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.belong-card__s + .blist{margin-top:8px}

@media (min-width:700px){
  .belongs{grid-template-columns:1fr 1fr}
  /* The one promise with no photograph of its own — full width, so it reads as
     deliberate rather than as a gap where a picture failed to load. */
  .belong-card--text,
  .belong-card--wide{grid-column:1/-1}
  .belong-card--wide .belong-card__pic img{aspect-ratio:16/7}
}

.preamble{
  margin:12px 0 0;padding:14px 16px;border-radius:14px;
  background:#F2FAF6;border:1px dashed #9BD9C1;
}
.preamble__lead{font-size:13.5px;line-height:1.55;color:#0B6B4C;font-style:italic}
.preamble__pillars{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.preamble__pillars span{
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;background:#12B981;color:#fff;
}
.belong__note{
  margin-top:18px;padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.6);border:1px dashed #E3C9A6;
  font-size:14px;line-height:1.55;color:#7A5B36;
}
.belong__note b{color:#5A3E1B}
.belong__close{
  margin-top:clamp(20px,5vw,30px);
  font-family:var(--font-display);font-size:clamp(19px,5vw,26px);line-height:1.35;
  letter-spacing:-.015em;
}
.belong__close b{color:#C2410C}

@media (min-width:760px){
  .belongs{grid-template-columns:1fr 1fr}
  .belong-card--wide{grid-column:span 2}
}

/* =============================================================
   SECTION H — THE PERSON
   ============================================================= */
.person{background:var(--paper)}
.person__head{display:flex;gap:16px;align-items:center;margin-top:10px}
.person__photo{flex:none;width:96px;height:96px;border-radius:50%;overflow:hidden;display:block;box-shadow:var(--shadow-sm);background:#E7EEF8}
.person__photo img{width:100%;height:100%;object-fit:cover;display:block}
.person__x{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-size:13px;font-weight:700;color:var(--muted);text-decoration:none;
}
.person__x:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.person__name{font-size:clamp(21px,5.6vw,28px);line-height:1.15;letter-spacing:-.02em}
.person__role{font-size:14px;color:var(--muted);margin-top:5px}
.person__line{
  margin-top:20px;max-width:56ch;
  font-size:clamp(16px,4.2vw,18.5px);line-height:1.5;color:var(--ink);font-weight:600;
}

/* His record, as four things you can check — scannable instead of a paragraph
   nobody finishes. The figure leads; the sentence is there only if you want it. */
.record{display:grid;gap:12px;margin-top:22px}
@media (min-width:680px){.record{grid-template-columns:1fr 1fr;gap:14px}}
.record__i{
  padding:18px 18px 20px;border-radius:var(--r-md);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  border-top:4px solid var(--brand);
}
.record__i--now{border-top-color:var(--green)}
.record__n{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,7.6vw,38px);line-height:1;letter-spacing:-.035em;
  color:var(--brand);font-variant-numeric:tabular-nums;
}
.record__i--now .record__n{color:#0B7B57}
.record__k{
  margin-top:7px;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.record__t{margin-top:10px;font-size:14px;line-height:1.55;color:var(--muted)}
.record__t b{color:var(--ink);font-weight:700}
.record__t i{font-style:italic}
.person__src{margin-top:16px;font-size:12px;line-height:1.6;color:var(--muted);opacity:.85}

@media (min-width:700px){
  .person__photo{width:132px;height:132px}
}

/* =============================================================
   SECTION I — MAKE IT REAL (CTA + footer)
   ============================================================= */
.cta{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(170deg,#07173A 0%,#0E2A5E 44%,#123675 100%);
  color:#fff;padding-top:clamp(60px,13vw,120px);padding-bottom:0;
}
.cta__scene{position:absolute;left:0;right:0;bottom:0;height:44%;z-index:-1}
.cta__scene svg{width:100%;height:100%}
/* The band between the buttons and the footer (reserved by .cta__in's
   padding-bottom) is the only part of the scene that is not behind the footer.
   The old first stop was a fully opaque #07173A, which blacked out precisely
   that band — tuned for the bright SVG scene, it hides a photograph entirely.
   Held dark enough to keep the panel sombre, light enough to read the image. */
.cta__scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,23,58,.58) 0%,rgba(7,23,58,.34) 34%,rgba(7,23,58,.44) 64%,rgba(4,12,30,.62) 100%)}
.cta__in{position:relative;z-index:1;padding-bottom:clamp(120px,32vw,200px)}
.cta__h{font-size:clamp(28px,8vw,46px);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.cta__sub{margin-top:14px;font-size:17px;line-height:1.55;color:rgba(255,255,255,.82);max-width:40ch}
.cta__actions{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.btn--big{width:100%;min-height:58px;font-size:17px}

/* ASK — the two people who could start this. Same translucent panel language
   as .drawer, but always open rather than toggled. */
.ask{
  margin-top:clamp(26px,6vw,36px);padding:clamp(18px,4.6vw,26px);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
}
.ask__kicker{
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#FFCF6B;
}
.ask__lede{margin-top:9px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.82);max-width:58ch}
.ask__lede b{color:#fff;font-weight:700}

.ask__row{display:grid;gap:12px;margin-top:18px}
@media (min-width:760px){.ask__row{grid-template-columns:1fr 1fr}}
.ask__card{
  display:flex;flex-direction:column;
  padding:16px;border-radius:var(--r-md);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
}
.ask__name{font-size:18.5px;font-weight:800;letter-spacing:-.015em;line-height:1.25;text-wrap:balance}
.ask__why{margin-top:7px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.78)}

/* Buttons sit at the card foot so both cards line them up, whatever the copy. */
.ask__do{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:14px}
.ask__btn{
  flex:1 1 auto;min-height:44px;padding:10px 14px;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  box-shadow:none;white-space:nowrap;
}
.ask__btn:hover{box-shadow:none}
.ask__btn--x{background:#fff;color:#0E1B2C}
.ask__btn--x:hover{background:#EDF1F6}
.ask__btn--ig{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.ask__btn--ig:hover{background:rgba(255,255,255,.22)}
.ask__ico{flex:none}
.ask__who{margin-top:10px;font-size:12px;line-height:1.7;color:rgba(255,255,255,.6)}
.ask__who a{color:rgba(255,255,255,.82);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.ask__who a:hover{color:#fff}

.drawer{
  margin-top:16px;padding:16px;border-radius:var(--r-md);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  animation:drawerIn .35s var(--ease);
}
.drawer[hidden]{display:none}
@keyframes drawerIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.drawer__t{font-size:13.5px;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:.01em}
.drawer__msg{
  margin-top:10px;padding:12px 14px;border-radius:12px;
  background:rgba(0,0,0,.24);font-size:14px;line-height:1.55;color:rgba(255,255,255,.92);
}
.drawer__row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btn--mini2{
  min-height:42px;padding:9px 16px;font-size:14px;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28);
  box-shadow:none;text-decoration:none;
}
.btn--mini2:hover{background:rgba(255,255,255,.24);box-shadow:none}
.drawer__fine{margin-top:10px;font-size:11.5px;color:rgba(255,255,255,.74)}

.site-footer{
  position:relative;z-index:1;
  border-top:1px solid rgba(255,255,255,.14);
  padding:26px 0 calc(30px + env(safe-area-inset-bottom));
  background:rgba(4,12,30,.90);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
/* the campaign's own handles — pills, so they read as somewhere to go
   rather than as more fine print */
.site-footer__follow{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin-bottom:20px;padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.site-footer__label{
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-right:2px;
}
.site-footer__follow .btn--mini2{font-size:13.5px;gap:8px}
.site-footer__follow .btn--mini2 svg{flex:none}
.site-footer__main{font-size:13px;line-height:1.6;color:rgba(255,255,255,.72)}
.site-footer__main i{font-style:italic;color:rgba(255,255,255,.86)}
.site-footer__flag{
  margin-top:10px;display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;background:rgba(255,176,32,.18);color:#FFD98A;border:1px solid rgba(255,176,32,.35);
}
.site-footer__fine{margin-top:12px;font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.62)}
.site-footer__contact{margin-top:12px;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.72)}
.site-footer__contact a{color:#FFD98A;text-decoration:underline;text-underline-offset:3px}
.site-footer__contact a:hover{color:#fff}

.toast{
  position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translate(-50%,20px);z-index:120;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;
  font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);
  max-width:calc(100vw - 40px);text-align:center;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

@media (min-width:640px){
  .cta__actions{flex-direction:row;flex-wrap:wrap}
  .btn--big{width:auto;min-width:240px}
}

/* =============================================================
   WIDE SCREENS — let the key visuals breathe past the text column
   ============================================================= */
@media (min-width:1060px){
  .campus__map,.compare{width:calc(100% + 220px);max-width:none;margin-inline:-110px}
  .stats{width:calc(100% + 160px);margin-inline:-80px}
  .belongs{width:calc(100% + 160px);margin-inline:-80px}
}

/* ===== SECTION-END-MARKER ===== */

/* =============================================================
   PLACED PHOTOGRAPHY
   Images that have landed from IMAGE-BRIEF.md. Deliberately NOT inside
   `.imgphs`: that scaffolding is switched off wholesale by dropping
   `show-imgph` from <body>, which would take the photographs with it.
   Grid metrics deliberately match the placeholders these replace, so
   swapping one for the other does not move the page around.
   ============================================================= */
.shots{
  display:grid;gap:10px;
  margin-top:clamp(18px,4.5vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.shot{position:relative}

/* Name-plate on the photograph, so a scroller knows what they are looking at
   without reading the surrounding copy. Live HTML text, not burnt into the
   image — edit the label in index.html, or delete the <span> to remove it.
   Sits inside the image's 14px radius, over a scrim that keeps it legible on
   both bright and dark photographs. */
.shot__tag{
  position:absolute;left:9px;bottom:9px;z-index:2;
  max-width:calc(100% - 18px);
  padding:5px 10px;border-radius:9px;
  font-size:11px;font-weight:700;line-height:1.25;
  letter-spacing:.055em;text-transform:uppercase;
  color:#fff;background:rgba(9,20,38,.66);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(7px) saturate(150%);
  -webkit-backdrop-filter:blur(7px) saturate(150%);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  pointer-events:none;
}
@media (min-width:620px){
  .shot__tag{font-size:11.5px;padding:6px 11px}
}

.shot img{
  display:block;width:100%;
  /* height:auto is load-bearing — without it the width/height HTML attributes
     (kept for CLS) win as presentation hints and aspect-ratio never computes,
     which stretches every image to its full natural height. */
  height:auto;
  aspect-ratio:var(--ar,4/3);
  object-fit:cover;
  border-radius:14px;
  background:#E4EAF1;
}
/* the zone sheet is narrow, so one image per row reads better there */
.zone .shots{grid-template-columns:1fr}

/* Honesty label. currentColor so it stays legible on the dark panels too. */
.shots__note{
  margin-top:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;
  color:currentColor;opacity:.55;
}

/* §B the flip, and §I the closing panel: photographs layered over the SVG
   scenes exactly as the hero does, so the wipe and the scrim keep working. */
.compare__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* =============================================================
   IMAGE PLACEHOLDERS — scaffolding, not design
   Every slot waiting on a photoreal image from IMAGE-BRIEF.md is marked
   here so the brief and the page can be matched up. Delete the
   `show-imgph` class on <body> and all of it disappears at once.
   ============================================================= */
body:not(.show-imgph) .imgphs,
body:not(.show-imgph) .imgtag{display:none}

.imgphs{
  display:grid;gap:10px;
  margin-top:clamp(18px,4.5vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.imgph{
  aspect-ratio:var(--ar,4/3);
  display:grid;place-content:center;justify-items:center;gap:6px;
  padding:12px;text-align:center;
  border:2px dashed #B3BFD0;border-radius:14px;
  background:
    repeating-linear-gradient(135deg,rgba(30,94,255,.05) 0 9px,transparent 9px 18px),
    rgba(255,255,255,.6);
}
.imgph__n{
  font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.02em;
  color:#fff;background:#4B5B72;border-radius:999px;padding:3px 11px;
}
.imgph__name{font-size:12.5px;font-weight:600;line-height:1.25;color:#42506A;overflow-wrap:anywhere}
.imgph__ar{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8592A6}

/* the zone sheet is narrow, so one image per row reads better there */
.zone .imgphs{grid-template-columns:1fr}

.imgtag{
  position:absolute;left:12px;top:12px;z-index:6;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;
  color:#fff;background:rgba(16,28,46,.8);border-radius:999px;padding:5px 11px;
  pointer-events:none;
}
.imgtag--hero{top:calc(74px + env(safe-area-inset-top))}
.imgtag--cmp{top:46px}
.imgtag--cmp2{left:auto;right:12px}
.imgtag--cta{top:auto;bottom:12px}

/* =============================================================
   REDUCED MOTION — show every end state, kill movement
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal],[data-hero]{opacity:1 !important;transform:none !important}
  .lyr,.bus,.bloom{opacity:1 !important;transform:none !important}
  .bus{transform:translate(380px,545px) !important}
  .win rect{opacity:1 !important;fill:#FFE29A !important}
  .hero__sun,.cloud,.birds{opacity:1 !important;animation:none !important}
  .hero__scene{transform:none !important}

  /* §G2: the funding bar is already drawn */
  .split__seg{transform:none !important}

  /* §F2: the year-by-year budget bars are already drawn */
  .years__seg{transform:none !important}

  /* §D: no pulsing pins, no sliding sheet */
  .pin::after{animation:none !important;opacity:0 !important}
  .sheet__panel{transform:none !important;opacity:1 !important}

  /* §D: the ledger is already ticked, counter already at 45 */
  .zrow__dots i{background:var(--zc) !important;border-color:var(--zc) !important;transform:none !important}

  /* §C: static final map, buses parked mid-route */
  .cluster__roads path{stroke-dashoffset:0 !important;animation:none !important}
  .vlg,.cluster__hub{opacity:1 !important;transform:none !important;animation:none !important}
  .cbus{opacity:1 !important;offset-distance:52% !important;animation:none !important}
  .hub__ring{animation:none !important}

  /* §B: show today and tomorrow side by side instead of wiping */
  .compare{aspect-ratio:auto;display:grid;grid-template-columns:1fr;gap:2px;background:var(--line)}
  .compare__pane{position:relative;inset:auto;aspect-ratio:4/3}
  .compare__pane--after{clip-path:none !important}
  .compare__seam,.compare__grip,.compare__range,.compare__hint{display:none}
  /* re-centre each scene on its own subject now that neither is cropped */
  .compare__pane--before svg{transform:scale(1.22) !important;transform-origin:24% 62%}
  .compare__pane--after svg{transform:scale(1.18) !important;transform-origin:70% 62%}
}