/* ==================================================================
   Jinu Harikesh Pavithran - portfolio v2
   Light, professional palette: paper white and warm stone, academic
   navy for text and actions, honours gold used sparingly, and blush
   and sky tints taken from her portrait.
   Type: Instrument Serif for headlines, Manrope for everything else.
   The site is deliberately light in every viewer theme.
================================================================== */
:root{
  --white:#FFFFFF;
  --paper:#FCFBF9;
  --stone:#F6F4F0;
  --stone-2:#EEEAE3;
  --ink:#111B2E;
  --ink-2:#4A5466;
  --ink-3:#6E7687;
  --line:#E7E3DC;
  --line-2:#D9D4CB;
  --navy:#14284B;
  --navy-2:#223E6E;
  --gold:#B5873A;
  --gold-2:#8A6428;
  --gold-soft:#F5EBD6;
  --blush:#F6DFD6;
  --sky:#DDE8F6;
  --lilac:#E8E4F5;
  --sage:#E3ECE2;
  --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Manrope","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --radius-lg:28px;
  --radius-md:18px;
  --shadow-1:0 1px 2px rgba(17,27,46,.04),0 10px 28px rgba(17,27,46,.06);
  --shadow-2:0 2px 6px rgba(17,27,46,.05),0 28px 64px rgba(17,27,46,.10);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --head-h:72px;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{ box-sizing:inherit; }
html{
  background:var(--white);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px);
}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; }
p{ margin:0; text-wrap:pretty; }
h1,h2,h3,h4{ margin:0; font-weight:inherit; text-wrap:balance; }
button{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; }
:focus-visible{ outline:2px solid var(--navy-2); outline-offset:3px; border-radius:8px; }
.vh{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:14px; top:-80px; z-index:200; background:var(--navy); color:#fff; padding:10px 16px; border-radius:999px; font-weight:700; text-decoration:none; }
.skip:focus{ top:calc(env(safe-area-inset-top,0px) + 12px); }
.wrap{ max-width:1240px; margin-inline:auto; padding-inline:clamp(20px,5vw,56px); }

/* Lenis smooth scroll */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto!important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ------------------------------------------------------------------
   Buttons
------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 26px; border-radius:999px; border:1px solid transparent;
  font-family:var(--sans); font-weight:700; font-size:15.5px; letter-spacing:-.005em; line-height:1;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .25s var(--ease-out),color .25s var(--ease-out),border-color .25s var(--ease-out),box-shadow .25s var(--ease-out);
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn-navy{ background:var(--navy); color:#fff; box-shadow:0 12px 28px -8px rgba(20,40,75,.45); }
.btn-navy:hover{ background:var(--navy-2); }
.btn-line{ background:rgba(255,255,255,.66); color:var(--ink); border-color:rgba(17,27,46,.14); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.btn-line:hover{ background:#fff; border-color:rgba(17,27,46,.36); }
.btn-gold{ background:#EACB8E; color:var(--navy); }
.btn-gold:hover{ background:#F1D7A4; }
.btn-sm{ min-height:40px; padding:0 18px; font-size:14px; }
.cv-download{ display:none!important; }
.can-download .cv-download{ display:inline-flex!important; }
.can-download .cv-fallback{ display:none!important; }

/* ------------------------------------------------------------------
   Header
------------------------------------------------------------------- */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:60; padding-top:env(safe-area-inset-top,0px);
  transition:transform .6s var(--ease-out);
}
.site-head::before{
  content:""; position:absolute; inset:0;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(17,27,46,.07);
  opacity:0; transition:opacity .4s var(--ease-out);
}
.site-head.is-scrolled::before{ opacity:1; }
.site-head.is-hidden{ transform:translateY(-115%); }
.head-in{ position:relative; display:flex; align-items:center; gap:24px; height:var(--head-h); }
.brand{ font-family:var(--serif); font-size:25px; line-height:1; letter-spacing:-.01em; text-decoration:none; white-space:nowrap; }
.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav a{
  position:relative; font-size:14.5px; font-weight:600; color:var(--ink-2); text-decoration:none;
  padding:10px 12px; border-radius:999px; transition:color .2s,background-color .2s;
}
.nav a:hover{ color:var(--ink); background:rgba(17,27,46,.045); }
.nav a[aria-current="true"]{ color:var(--ink); }
.nav a[aria-current="true"]::after{ content:""; position:absolute; left:50%; bottom:3px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--gold); }
.nav .nav-ach{ margin-left:8px; display:inline-flex; align-items:center; gap:8px; background:var(--gold-soft); color:var(--ink); padding:8px 8px 8px 14px; }
.nav .nav-ach:hover{ background:#EFDDB9; }
.count{ display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 7px; border-radius:999px; background:var(--navy); color:#fff; font-size:12px; font-weight:800; line-height:1; }
.head-cta{ display:flex; align-items:center; gap:10px; }
.menu-btn{
  display:none; align-items:center; gap:8px; height:42px; padding:0 16px; border-radius:999px;
  border:1px solid rgba(17,27,46,.14); background:rgba(255,255,255,.7); font-weight:700; font-size:14px; cursor:pointer;
}
.menu-btn i{ position:relative; width:16px; height:10px; }
.menu-btn i::before,.menu-btn i::after{ content:""; position:absolute; left:0; right:0; height:1.8px; background:currentColor; border-radius:2px; transition:transform .35s var(--ease-out),top .35s var(--ease-out); }
.menu-btn i::before{ top:1px; } .menu-btn i::after{ top:7px; }
.menu-open .menu-btn i::before{ top:4px; transform:rotate(45deg); }
.menu-open .menu-btn i::after{ top:4px; transform:rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:58; background:var(--paper);
  padding:calc(env(safe-area-inset-top,0px) + 100px) clamp(20px,5vw,56px) calc(env(safe-area-inset-bottom,0px) + 32px);
  display:none; flex-direction:column; gap:4px;
}
.menu-open .menu{ display:flex; }
.menu a{ font-family:var(--serif); font-size:clamp(40px,11vw,60px); line-height:1.12; letter-spacing:-.02em; text-decoration:none; color:var(--ink); }
.menu a .count{ vertical-align:middle; margin-left:10px; }
.menu-meta{ margin-top:auto; font-size:15px; color:var(--ink-2); }

.progress{ position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; height:2px; z-index:70; pointer-events:none; }
.progress span{ display:block; height:100%; background:linear-gradient(90deg,var(--navy),var(--gold)); transform-origin:0 50%; transform:scaleX(0); }

/* ------------------------------------------------------------------
   Hero
------------------------------------------------------------------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh; display:flex; align-items:center;
  padding:calc(var(--head-h) + 40px) 0 88px;
}
.hero-bg{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(55% 60% at 80% 48%, #F7E1D8 0%, rgba(247,225,216,0) 70%),
    radial-gradient(40% 45% at 98% 10%, #DCE8F7 0%, rgba(220,232,247,0) 70%),
    radial-gradient(45% 50% at 12% 95%, #FBEDD4 0%, rgba(251,237,212,0) 70%),
    #FDFBF8;
}
.hero-gl{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; opacity:0; transition:opacity 1.4s var(--ease-out); }
.hero-gl.is-on{ opacity:1; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); align-items:center; gap:clamp(28px,4vw,72px); width:100%; }
.hero-name{ font-family:var(--serif); font-weight:400; font-size:clamp(60px,8.6vw,136px); line-height:.9; letter-spacing:-.028em; color:var(--ink); }
.hero-name .line{ display:block; overflow:hidden; padding-bottom:.07em; margin-bottom:-.07em; }
.hero-name .line-inner{ display:block; }
.hero-tag{ margin-top:30px; font-size:clamp(19px,1.6vw,23px); font-weight:700; letter-spacing:-.015em; line-height:1.35; color:var(--ink); max-width:30ch; }
.hero-lede{ margin-top:14px; font-size:clamp(16.5px,1.25vw,18.5px); line-height:1.72; color:var(--ink-2); max-width:50ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero-open{ display:flex; align-items:center; gap:12px; margin-top:28px; font-size:14.5px; font-weight:600; color:var(--ink-2); }
.pulse{ position:relative; width:9px; height:9px; border-radius:50%; background:#2E9E6B; flex:none; }
.pulse::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(46,158,107,.35); animation:pulse 2.6s var(--ease-out) infinite; }
@keyframes pulse{ 0%{ transform:scale(.5); opacity:1; } 100%{ transform:scale(1.7); opacity:0; } }

.hero-visual{ position:relative; justify-self:center; width:min(100%,500px); aspect-ratio:500/610; }
.arch{
  position:absolute; left:6%; right:6%; top:36%; bottom:0;
  border-radius:999px 999px 34px 34px;
  background:linear-gradient(172deg,#F4D7CC 0%,#EBDDF0 48%,#D3E2F4 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 50px 90px -40px rgba(20,40,75,.45);
}
.arch::before{
  content:""; position:absolute; inset:-16px -16px 0 -16px;
  border-radius:999px 999px 40px 40px; border:1px solid rgba(181,135,58,.5); border-bottom:0;
}
.arch::after{
  content:""; position:absolute; left:18%; right:18%; top:6%; height:38%;
  border-radius:50%; background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0));
}
.portrait{ position:absolute; left:6%; bottom:0; width:88%; height:auto; z-index:2; border-radius:0 0 34px 34px; filter:drop-shadow(0 20px 28px rgba(17,27,46,.16)); }
.chip{ position:absolute; z-index:3; }
.chip-in{
  display:flex; align-items:center; gap:12px; padding:10px 16px 10px 10px; border-radius:18px;
  background:rgba(255,255,255,.74); -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%);
  border:1px solid rgba(255,255,255,.95); box-shadow:0 16px 36px -10px rgba(17,27,46,.22);
  font-size:13.5px; font-weight:800; line-height:1.25; white-space:nowrap; letter-spacing:-.005em; word-spacing:.08em;
}
.chip-in small{ display:block; font-size:12px; font-weight:600; color:var(--ink-3); }
.chip-ico{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--gold-soft); color:var(--gold-2); flex:none; }
.chip-ico svg{ width:20px; height:20px; }
.chip-ico.navy{ background:var(--sky); color:var(--navy); }
.chip-a{ left:-9%; top:64%; }
.chip-b{ right:-10%; top:27%; }
.chip-c{ right:-3%; bottom:9%; }
.scroll-cue{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--ink-3); }
.scroll-cue i{ width:1px; height:42px; background:linear-gradient(var(--ink-3),rgba(110,118,135,0)); transform-origin:top; animation:cue 2.2s var(--ease-out) infinite; }
@keyframes cue{ 0%{ transform:scaleY(0); opacity:1; } 60%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); opacity:0; } }

/* Before the intro runs, hide what it animates (a timeout in the head removes this if scripts fail) */
.rl-mask{ padding-bottom:.14em; margin-bottom:-.14em; }
.js-intro .hero-name .line-inner,
.js-intro .hero-tag,.js-intro .hero-lede,.js-intro .hero-actions,.js-intro .hero-open,
.js-intro .arch,.js-intro .portrait,.js-intro .chip{ visibility:hidden; }

/* ------------------------------------------------------------------
   Statement and at-a-glance counters
------------------------------------------------------------------- */
.statement{ padding:clamp(100px,14vw,200px) 0 clamp(72px,9vw,128px); }
.statement-text{ font-family:var(--serif); font-size:clamp(34px,4.7vw,72px); line-height:1.1; letter-spacing:-.02em; max-width:1040px; color:var(--ink); }
.glance{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin-top:clamp(64px,8vw,112px); border-top:1px solid var(--line); }
.glance > div{ padding:28px 20px 4px 0; }
.glance > div + div{ padding-left:20px; border-left:1px solid var(--line); }
.g-num{ font-family:var(--serif); font-size:clamp(48px,4.6vw,74px); line-height:1; letter-spacing:-.025em; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.g-num small{ font-size:.5em; margin-left:2px; color:var(--gold-2); }
.g-label{ margin-top:12px; font-size:14px; line-height:1.5; color:var(--ink-2); max-width:18ch; }

/* ------------------------------------------------------------------
   Sections
------------------------------------------------------------------- */
.sec{ position:relative; padding-block:clamp(96px,11vw,168px); }
.sec-stone{ background:var(--stone); }
.sec-head{ max-width:900px; }
.h2{ font-family:var(--serif); font-weight:400; font-size:clamp(44px,5.6vw,88px); line-height:1; letter-spacing:-.024em; color:var(--ink); }
.meta{ margin-top:18px; font-size:14.5px; font-weight:800; color:var(--gold-2); letter-spacing:.005em; }
.lede{ margin-top:22px; font-size:clamp(17.5px,1.4vw,20px); line-height:1.72; color:var(--ink-2); max-width:62ch; }
.link-ext{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:14.5px; color:var(--navy-2); text-decoration:none; border-bottom:1.5px solid rgba(34,62,110,.28); padding-bottom:2px; transition:border-color .25s; }
.link-ext:hover{ border-color:var(--navy-2); }
.link-ext svg{ width:15px; height:15px; }

/* ------------------------------------------------------------------
   Headship: sticky chart beside the steps
------------------------------------------------------------------- */
.hs-story{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(32px,5vw,88px); margin-top:clamp(52px,6vw,88px); align-items:start; }
.hs-sticky{ position:sticky; top:calc(var(--head-h) + 36px); }
.hs-panel{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-2); padding:clamp(20px,2.8vw,34px); }
.hs-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.metric{ padding:16px 18px 18px; border-radius:18px; background:var(--stone); }
.m-label{ display:block; font-size:13.5px; font-weight:800; color:var(--ink-2); }
.m-num{ display:block; margin-top:8px; font-family:var(--serif); font-size:clamp(54px,5.2vw,82px); line-height:.95; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.metric-a .m-num{ color:var(--navy); }
.metric-b .m-num{ color:var(--gold-2); }
.m-sub{ display:block; margin-top:6px; font-size:13px; font-weight:600; color:var(--ink-3); }
.hs-chart{ width:100%; height:auto; margin-top:16px; overflow:visible; }
.c-grid{ stroke:var(--line); stroke-width:1; }
.c-line{ fill:none; stroke-width:3.5; stroke-linecap:round; }
.c-a{ stroke:var(--navy); } .c-b{ stroke:var(--gold); }
.c-dot-a{ fill:var(--navy); } .c-dot-b{ fill:var(--gold); }
.c-lbl{ font-family:var(--sans); font-size:13px; font-weight:700; fill:var(--ink-3); }
.c-val{ font-family:var(--serif); font-size:26px; letter-spacing:-.02em; }
.c-val-a{ fill:var(--navy); } .c-val-b{ fill:var(--gold-2); }
.hs-staff{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:center; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.units{ width:188px; }
.units rect{ transform-box:fill-box; transform-origin:center; }
.u-teach{ fill:var(--navy); } .u-admin{ fill:var(--gold); } .u-support{ fill:#CBD1DA; }
.staff-copy b{ display:block; font-size:15px; font-weight:800; }
.staff-legend{ list-style:none; margin-top:8px; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13px; font-weight:600; color:var(--ink-2); }
.staff-legend li{ display:flex; align-items:center; gap:6px; }
.sw{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.sw-t{ background:var(--navy); } .sw-a{ background:var(--gold); } .sw-s{ background:#CBD1DA; }
.hs-steps{ list-style:none; }
.step{ min-height:44vh; display:flex; flex-direction:column; justify-content:center; padding:28px 0; border-top:1px solid var(--line); transition:opacity .6s var(--ease-out); }
.step:first-child{ border-top:0; padding-top:0; min-height:36vh; justify-content:flex-start; }
.anim .step{ opacity:.28; }
.anim .step.is-on{ opacity:1; }
.step-ico{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--sky); color:var(--navy); margin-bottom:18px; }
.step-ico svg{ width:22px; height:22px; }
.step h3{ font-size:clamp(22px,2vw,28px); font-weight:800; letter-spacing:-.022em; line-height:1.2; }
.step p{ margin-top:10px; font-size:17px; line-height:1.72; color:var(--ink-2); max-width:44ch; }

/* ------------------------------------------------------------------
   Every room: isometric school
------------------------------------------------------------------- */
.ws-grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr); gap:clamp(24px,3.6vw,56px); margin-top:clamp(40px,5vw,72px); align-items:start; }
.iso-wrap{ margin:0; align-self:center; }
.iso-stage{ position:relative; }
.iso{ width:100%; height:auto; overflow:visible; }
.iso polygon{ stroke-linejoin:round; }
.slab .top{ fill:#F3EFE8; } .slab .east{ fill:#E7E1D7; } .slab .south{ fill:#DDD6CA; }
.slab polygon{ stroke:#DDD5C8; stroke-width:1; }
.court{ fill:#E4EEE1; stroke:#CFDFCA; stroke-width:1; }
.walk{ fill:#EFE9DE; stroke:#E2D9CA; stroke-width:1; }
.person{ fill:#A3B8A6; }
.stage polygon{ fill:#FFFFFF; stroke:#D8DEE6; stroke-width:1; }
.trunk{ stroke:#A99B82; stroke-width:3; stroke-linecap:round; }
.canopy{ fill:#D3E3CE; stroke:#BCD1B6; stroke-width:1; }
.canopy-hi{ fill:#E2EDDE; }
.pole{ stroke:#9AA3B2; stroke-width:2; }
.flag{ fill:var(--gold); }
.shadow{ fill:rgba(17,27,46,.2); opacity:0; transition:opacity .45s var(--ease-out); }
.shadow.is-on{ opacity:1; }
.blk{ cursor:pointer; transition:transform .6s var(--ease-spring); }
.blk polygon{ stroke:#CCD4E0; stroke-width:1; transition:fill .4s var(--ease-out),stroke .4s var(--ease-out); }
.blk .top{ fill:#FFFFFF; } .blk .east{ fill:#EDF1F6; } .blk .south{ fill:#E0E6EF; }
.blk .band{ fill:rgba(20,40,75,.09); stroke:none; }
.blk .part{ stroke:#D5DCE6; stroke-width:1.2; }
.blk.is-hover{ transform:translateY(-5px); }
.blk.is-hover .top{ fill:#F7F9FC; }
.blk.is-active{ transform:translateY(-15px); }
.blk.is-active .top{ fill:#27477C; } .blk.is-active .east{ fill:#1B355F; } .blk.is-active .south{ fill:#14294B; }
.blk.is-active polygon{ stroke:#10213F; }
.blk.is-active .band{ fill:rgba(255,255,255,.16); }
.blk.is-active .part{ stroke:rgba(255,255,255,.3); }
.zone{ cursor:pointer; }
.zone .court{ transition:fill .4s var(--ease-out),stroke .4s var(--ease-out); }
.zone.is-hover .court{ fill:#DCE9D8; }
.zone.is-active .court{ fill:var(--gold-soft); stroke:var(--gold); stroke-width:2; }
.iso-labels{ position:absolute; inset:0; pointer-events:none; }
.anim .iso-labels{ opacity:var(--lab,1); }
.iso-label{
  position:absolute; transform:translate(-50%,-100%); pointer-events:auto; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px;
  background:rgba(255,255,255,.92); border:1px solid var(--line); box-shadow:0 8px 18px -6px rgba(17,27,46,.18);
  font-size:12.5px; font-weight:800; line-height:1.1; white-space:nowrap; color:var(--ink);
  transition:transform .6s var(--ease-spring),background-color .3s,color .3s,border-color .3s;
}
.iso-label .n{ display:none; }
.iso-label:hover{ border-color:var(--line-2); }
.iso-label.is-active{ background:var(--navy); border-color:var(--navy); color:#fff; transform:translate(-50%,-100%) translateY(-14px); }
.iso-note{ margin-top:18px; font-size:14.5px; line-height:1.6; color:var(--ink-3); max-width:60ch; }
.room-panel{
  position:sticky; top:calc(var(--head-h) + 28px);
  display:flex; flex-direction:column; min-height:560px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-1);
  padding:clamp(22px,2.6vw,34px);
}
.rp-count{ font-size:13.5px; font-weight:800; color:var(--ink-3); }
.rp-title{ margin-top:8px; font-family:var(--serif); font-size:clamp(32px,3vw,46px); line-height:1.02; letter-spacing:-.022em; }
.rp-fig{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; margin-top:18px; padding:14px 16px; border-radius:16px; background:var(--gold-soft); }
.rp-fig .n{ font-family:var(--serif); font-size:clamp(40px,3.4vw,54px); line-height:1; letter-spacing:-.02em; white-space:nowrap; }
.rp-fig .n .to{ font-family:var(--sans); font-size:14px; font-weight:800; color:var(--ink-2); margin:0 8px; vertical-align:middle; }
.rp-fig .l{ font-size:14px; line-height:1.45; font-weight:700; color:var(--ink-2); max-width:28ch; }
.rp-block h4{ margin:20px 0 4px; font-size:13.5px; font-weight:800; color:var(--navy-2); }
.rp-block p{ font-size:15.5px; line-height:1.66; color:var(--ink-2); }
.rp-nav{ display:flex; gap:10px; margin-top:auto; padding-top:24px; }
.rp-nav .btn{ flex:1; }
.rp-content.swap{ animation:panelIn .55s var(--ease-out); }
@keyframes panelIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.room-chips{ display:none; }
.rchip{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px; border:1px solid var(--line-2); background:#fff; font-size:14px; font-weight:700; cursor:pointer; }
.rchip b{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--stone-2); font-size:12px; }
.rchip[aria-pressed="true"]{ border-color:var(--navy); }
.rchip[aria-pressed="true"] b{ background:var(--navy); color:#fff; }

/* ------------------------------------------------------------------
   Journey: horizontal timeline
------------------------------------------------------------------- */
.journey{ position:relative; overflow:hidden; background:linear-gradient(180deg,var(--white),var(--paper)); }
.journey-inner{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:calc(var(--head-h) + 28px) 0 48px; }
.journey-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.journey-head .h2{ max-width:11.5em; }
.journey-head p{ max-width:38ch; font-size:16px; color:var(--ink-2); }
.jprogress{ height:3px; margin-top:32px; border-radius:3px; background:var(--line); overflow:hidden; }
.jprogress span{ display:block; height:100%; background:linear-gradient(90deg,var(--navy),var(--gold)); transform-origin:0 50%; transform:scaleX(1); }
.anim .jprogress span{ transform:scaleX(0); }
.journey-track{ display:flex; gap:20px; width:max-content; padding:36px clamp(20px,5vw,56px) 8px; }
.jcard{
  position:relative; flex:none; width:clamp(290px,27vw,380px); min-height:340px;
  display:flex; flex-direction:column; padding:28px; border-radius:26px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-1);
}
.jcard .yr{ font-family:var(--serif); font-size:clamp(60px,5.4vw,86px); line-height:.9; letter-spacing:-.035em; color:var(--gold); }
.jcard h3{ margin-top:18px; font-size:19px; font-weight:800; letter-spacing:-.015em; line-height:1.3; }
.jcard p{ margin-top:10px; font-size:15.5px; line-height:1.62; color:var(--ink-2); }
.jcard .jtag{ margin-top:auto; padding-top:18px; font-size:12.5px; font-weight:800; color:var(--ink-3); }
.jcard.is-key{ background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 30px 60px -24px rgba(20,40,75,.55); }
.jcard.is-key .yr{ color:#EACB8E; }
.jcard.is-key p,.jcard.is-key .jtag{ color:rgba(255,255,255,.78); }

/* ------------------------------------------------------------------
   Kendriya Vidyalaya: stacked portfolio cards
------------------------------------------------------------------- */
.stack{ display:grid; gap:28px; margin-top:clamp(48px,6vw,88px); }
.scard{
  position:sticky; top:calc(var(--head-h) + 26px + var(--i) * 14px);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(24px,4vw,64px);
  min-height:clamp(340px,50vh,440px); padding:clamp(26px,3.4vw,48px);
  border-radius:32px; border:1px solid var(--line); background:var(--bgc,#fff);
  box-shadow:var(--shadow-2); transform-origin:50% 0;
}
.scard-left{ display:flex; flex-direction:column; }
.tag{ align-self:flex-start; padding:7px 13px; border-radius:999px; background:rgba(17,27,46,.055); font-size:13px; font-weight:800; color:var(--ink-2); }
.scard h3{ margin-top:18px; font-family:var(--serif); font-size:clamp(36px,3.8vw,58px); line-height:1; letter-spacing:-.024em; }
.sfig{ margin-top:auto; padding-top:24px; }
.sfig .n{ display:block; font-family:var(--serif); font-size:clamp(46px,4.6vw,72px); line-height:1; letter-spacing:-.03em; color:var(--navy); }
.sfig .l{ display:block; margin-top:6px; font-size:14px; font-weight:700; color:var(--ink-2); max-width:30ch; }
.scard .stext{ align-self:center; font-size:17px; line-height:1.74; color:var(--ink-2); }
.committees{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(24px,4vw,56px); margin-top:clamp(64px,8vw,112px); padding:clamp(26px,3.4vw,48px); border-radius:32px; background:var(--stone); }
.committees h3{ font-family:var(--serif); font-size:clamp(30px,2.8vw,42px); line-height:1.04; letter-spacing:-.02em; }
.committees p{ margin-top:14px; font-size:15.5px; line-height:1.65; color:var(--ink-2); }
.committees .link-ext{ margin-top:20px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start; }
.schip{ display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:14px; font-weight:700; line-height:1.3; }
.schip::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none; }

/* ------------------------------------------------------------------
   Teaching and the national award
------------------------------------------------------------------- */
.t-grid{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(32px,5vw,88px); margin-top:clamp(48px,6vw,88px); align-items:start; }
.t-text h3{ font-size:clamp(22px,2vw,27px); font-weight:800; letter-spacing:-.02em; line-height:1.25; }
.t-text p{ margin-top:14px; font-size:17px; line-height:1.74; color:var(--ink-2); }
.pull{ position:relative; margin:34px 0 0; padding:28px 28px 24px; border-radius:24px; background:#fff; border:1px solid var(--line); }
.pull svg{ width:34px; height:34px; color:var(--gold); }
.pull p{ margin-top:10px; font-family:var(--serif); font-size:clamp(23px,2vw,29px); line-height:1.28; letter-spacing:-.01em; color:var(--ink); }
.pull footer{ margin-top:14px; font-size:14px; font-weight:700; color:var(--ink-3); }
.chart-card{ margin:0; padding:clamp(20px,2.6vw,32px); border-radius:var(--radius-lg); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-1); }
.chart-title{ font-size:clamp(19px,1.6vw,22px); font-weight:800; letter-spacing:-.015em; line-height:1.3; }
.chart-sub{ margin-top:6px; font-size:14.5px; color:var(--ink-3); }
.mix{ width:100%; height:auto; margin-top:18px; overflow:visible; }
.c-row{ font-family:var(--sans); font-size:14px; font-weight:700; fill:var(--ink); }
.c-tick{ font-family:var(--sans); font-size:12px; font-weight:600; fill:var(--ink-3); }
.c-before{ fill:#fff; stroke:#9AA3B2; stroke-width:2; }
.c-after{ fill:var(--navy); }
.c-conn{ stroke-width:3; stroke-linecap:round; }
.c-conn.up{ stroke:rgba(20,40,75,.32); } .c-conn.down{ stroke:#CFD5DD; }
.c-num{ font-family:var(--sans); font-size:13px; font-weight:800; }
.c-num-before{ fill:var(--ink-3); } .c-num-after{ fill:var(--navy); }
.mix-legend{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:14px; font-size:13.5px; font-weight:700; color:var(--ink-2); }
.mix-legend li{ display:flex; align-items:center; gap:8px; }
.dot{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.dot-before{ border:2px solid #9AA3B2; } .dot-after{ background:var(--navy); }
.projects{ margin-top:clamp(72px,9vw,128px); overflow-x:clip; }
.projects-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.projects-head h3{ font-family:var(--serif); font-size:clamp(32px,3.2vw,48px); line-height:1.02; letter-spacing:-.02em; max-width:18ch; }
.projects-head p{ max-width:40ch; font-size:15.5px; color:var(--ink-2); }
.projects-side{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.projects.is-paused .marquee-track{ animation-play-state:paused; }
.reduced .mq-toggle{ display:none; }
.marquee{ position:relative; overflow:hidden; margin-top:20px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.projects-head + .marquee{ margin-top:36px; }
.marquee-track{ display:flex; gap:14px; width:max-content; animation:marquee 70s linear infinite; }
.marquee.rev .marquee-track{ animation-direction:reverse; animation-duration:80s; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.pcard{ flex:none; width:300px; padding:18px 20px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.pcard b{ display:block; font-size:15px; font-weight:800; letter-spacing:-.01em; }
.pcard span{ display:block; margin-top:5px; font-size:14.5px; line-height:1.5; color:var(--ink-2); }
.pcard i{ display:inline-block; margin-top:12px; padding:4px 10px; border-radius:999px; background:var(--sky); font-style:normal; font-size:12px; font-weight:800; color:var(--navy-2); }
.outcomes{ list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:clamp(56px,7vw,100px); }
.outcome{ padding:26px 24px; border-radius:24px; background:#fff; border:1px solid var(--line); }
.outcome b{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(42px,3.8vw,60px); line-height:1; letter-spacing:-.025em; color:var(--navy); }
.outcome span{ display:block; margin-top:14px; font-size:15px; line-height:1.62; color:var(--ink-2); }

/* ------------------------------------------------------------------
   Community
------------------------------------------------------------------- */
.comm-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:clamp(44px,5vw,72px); }
.comm{ position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:330px; padding:28px 26px; border-radius:28px; background:var(--c,var(--stone)); }
.comm .big{ font-family:var(--serif); font-size:clamp(44px,4vw,64px); line-height:.95; letter-spacing:-.03em; color:var(--ink); }
.comm .big small{ display:block; font-family:var(--sans); font-size:14px; font-weight:800; letter-spacing:0; margin-top:8px; color:var(--ink-2); }
.comm h3{ margin-top:auto; padding-top:24px; font-size:17px; font-weight:800; letter-spacing:-.01em; }
.comm p{ margin-top:8px; font-size:15px; line-height:1.62; color:var(--ink-2); }

/* ------------------------------------------------------------------
   Developing teachers timeline
------------------------------------------------------------------- */
.dev{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,5vw,96px); }
.dev-intro{ position:sticky; top:calc(var(--head-h) + 36px); align-self:start; }
.tl{ position:relative; list-style:none; padding-left:40px; }
.tl::before{ content:""; position:absolute; left:9px; top:10px; bottom:10px; width:2px; background:var(--line); }
.tl-fill{ position:absolute; left:9px; top:10px; bottom:10px; width:2px; background:linear-gradient(var(--navy),var(--gold)); transform-origin:top; }
.anim .tl-fill{ transform:scaleY(0); }
.tl li{ position:relative; padding-bottom:34px; }
.tl li:last-child{ padding-bottom:0; }
.tl li::before{ content:""; position:absolute; left:-37px; top:9px; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--navy); }
.tl .yr{ font-family:var(--serif); font-size:32px; line-height:1; letter-spacing:-.02em; color:var(--navy); }
.tl p{ margin-top:8px; font-size:16.5px; line-height:1.66; color:var(--ink-2); max-width:58ch; }

/* ------------------------------------------------------------------
   Philosophy, voices, achievements teaser, contact
------------------------------------------------------------------- */
.quote-sec{ padding-block:clamp(120px,15vw,220px); text-align:center; background:radial-gradient(55% 65% at 50% 45%,#F8E6DE 0%,rgba(248,230,222,0) 72%),var(--white); }
.quote-mark{ width:56px; height:56px; margin:0 auto 28px; color:var(--gold); }
.big-quote{ max-width:1000px; margin-inline:auto; font-family:var(--serif); font-size:clamp(34px,4.5vw,68px); line-height:1.1; letter-spacing:-.02em; color:var(--ink); }
.big-quote-by{ margin-top:32px; font-size:15px; font-weight:800; color:var(--ink-2); }
.voices-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:20px; margin-top:clamp(44px,5vw,72px); align-items:stretch; }
.vcard{ margin:0; display:flex; flex-direction:column; padding:clamp(28px,3.4vw,48px); border-radius:32px; background:var(--stone); }
.vcard blockquote{ margin:0; }
.vcard blockquote p{ font-family:var(--serif); font-size:clamp(25px,2.4vw,36px); line-height:1.26; letter-spacing:-.012em; }
.vcard.sm{ background:var(--sky); }
.vcard.sm blockquote p{ font-size:clamp(21px,1.8vw,26px); }
.vcard figcaption{ margin-top:auto; padding-top:26px; font-size:15px; font-weight:800; color:var(--ink); }
.vcard figcaption span{ display:block; font-weight:600; font-size:14px; color:var(--ink-3); }
.vcard .link-ext{ margin-top:16px; align-self:flex-start; }
.teaser{ padding-block:clamp(40px,6vw,96px) clamp(96px,11vw,168px); }
.teaser-card{
  position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,4vw,64px); align-items:center;
  padding:clamp(32px,5vw,76px); border-radius:40px; color:#fff;
  background:radial-gradient(90% 120% at 100% 0%,#2E5189 0%,var(--navy) 52%,#0E1D38 100%);
  box-shadow:0 60px 120px -50px rgba(20,40,75,.6);
}
.teaser-card::after{ content:""; position:absolute; right:-120px; bottom:-160px; width:420px; height:420px; border-radius:50%; border:1px solid rgba(234,203,142,.25); }
.teaser-card .h2{ color:#fff; }
.teaser-card p{ margin-top:18px; max-width:46ch; font-size:17.5px; line-height:1.7; color:rgba(255,255,255,.78); }
.teaser-card .btn{ margin-top:30px; }
.medals{ position:relative; z-index:1; display:grid; gap:12px; }
.medal{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:20px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); }
.medal svg{ width:46px; height:46px; flex:none; }
.medal b{ display:block; font-size:15px; font-weight:800; line-height:1.3; }
.medal span{ display:block; font-size:13.5px; color:rgba(255,255,255,.68); }
.contact{ background:var(--stone); padding:clamp(100px,12vw,176px) 0 40px; }
.contact-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(36px,5vw,96px); align-items:start; }
.contact .h2{ font-size:clamp(56px,7.4vw,118px); line-height:.94; }
.contact .lede{ max-width:44ch; }
.contact .hero-actions{ margin-top:30px; }
.clist{ margin:0; }
.clist > div{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:14px; align-items:baseline; padding:18px 0; border-top:1px solid var(--line-2); }
.clist dt{ font-size:14px; font-weight:700; color:var(--ink-3); }
.clist dd{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; font-size:clamp(18px,1.6vw,22px); font-weight:800; letter-spacing:-.015em; overflow-wrap:anywhere; }
.clist a{ text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat; transition:background-size .45s var(--ease-out); }
.clist a:hover{ background-size:100% 1.5px; }
.copy-btn{ padding:7px 14px; border-radius:999px; border:1px solid var(--line-2); background:#fff; font-size:13px; font-weight:800; letter-spacing:0; cursor:pointer; }
.copy-btn:hover{ border-color:var(--ink-3); }
.foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:clamp(72px,9vw,120px); padding-top:24px; border-top:1px solid var(--line-2); font-size:13.5px; color:var(--ink-3); }
.foot a{ text-decoration:none; font-weight:700; }

/* ------------------------------------------------------------------
   Achievements view
------------------------------------------------------------------- */
.ach{ position:fixed; inset:0; z-index:80; background:var(--paper); }
.ach[hidden]{ display:none; }
.ach-scroll{ position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:env(safe-area-inset-bottom,0px); }
.ach-bar{ position:sticky; top:0; z-index:3; padding-top:env(safe-area-inset-top,0px); background:rgba(252,251,249,.84); -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%); border-bottom:1px solid var(--line); }
.ach-bar-in{ display:flex; align-items:center; gap:14px; height:68px; }
.back-btn{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px 0 12px; border-radius:999px; border:1px solid var(--line-2); background:#fff; font-size:14px; font-weight:800; cursor:pointer; }
.back-btn svg{ width:18px; height:18px; }
.ach-who{ display:flex; align-items:center; gap:10px; margin-left:auto; font-family:var(--serif); font-size:20px; }
.ach-avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; object-position:50% 18%; background:linear-gradient(170deg,#F8E2D9,#DDE8F6); }
.ach-hero{ padding:clamp(52px,7vw,104px) 0 0; }
.ach-hero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(52px,7vw,112px); line-height:.94; letter-spacing:-.028em; }
.ach-hero .lede{ margin-top:22px; }
.ach-stats{ display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,56px); margin-top:36px; padding-top:28px; border-top:1px solid var(--line); }
.ach-stats div{ font-size:14px; font-weight:700; color:var(--ink-2); }
.ach-stats b{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(40px,3.6vw,56px); line-height:1; letter-spacing:-.02em; color:var(--ink); }
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:40px; }
.filter{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; border:1px solid var(--line-2); background:#fff; font-size:14px; font-weight:800; cursor:pointer; transition:background-color .25s,color .25s,border-color .25s; }
.filter span{ font-size:12px; opacity:.6; }
.filter:hover{ border-color:var(--ink-3); }
.filter[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:#fff; }
.cert-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; margin-top:28px; padding-bottom:40px; }
.cert{ position:relative; display:flex; flex-direction:column; border-radius:26px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-1); transform-style:preserve-3d; }
.cert-art{ position:relative; overflow:hidden; height:168px; margin:10px 10px 0; border-radius:18px; background:#FFFDF7; border:1px solid #EFE4CD; }
.cert-art::before{ content:""; position:absolute; inset:9px; border-radius:11px; border:1px solid rgba(181,135,58,.38); box-shadow:inset 0 0 0 3px #FFFDF7,inset 0 0 0 4px rgba(181,135,58,.22); }
.cert-art::after{ content:""; position:absolute; inset:0; background:radial-gradient(260px circle at var(--mx,50%) var(--my,-20%),rgba(255,255,255,.85),rgba(255,255,255,0) 45%); opacity:0; transition:opacity .35s; mix-blend-mode:soft-light; }
.cert:hover .cert-art::after{ opacity:1; }
.ca-kind{ position:absolute; left:24px; top:20px; font-family:var(--serif); font-style:italic; font-size:16px; color:var(--gold-2); }
.ca-title{ position:absolute; left:24px; right:96px; top:44px; font-family:var(--serif); font-size:22px; line-height:1.04; letter-spacing:-.01em; color:var(--ink); }
.ca-name{ position:absolute; left:24px; right:96px; bottom:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; font-weight:800; color:var(--ink-3); letter-spacing:.01em; }
.seal{ position:absolute; right:18px; bottom:16px; width:68px; height:68px; }
.cert-body{ display:flex; flex-direction:column; flex:1; padding:18px 22px 22px; }
.cert-cat{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; color:var(--gold-2); }
.cert-status{ padding:2px 9px; border-radius:999px; background:var(--sky); color:var(--navy-2); font-size:11.5px; }
.cert h3{ margin-top:6px; font-size:17.5px; font-weight:800; line-height:1.3; letter-spacing:-.012em; }
.cert-issuer{ margin-top:5px; font-size:14px; font-weight:600; color:var(--ink-3); }
.cert-desc{ margin-top:10px; font-size:14.5px; line-height:1.6; color:var(--ink-2); }
.cert-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:18px; }
.cert-link{ display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:999px; background:var(--stone); font-size:13px; font-weight:800; color:var(--navy-2); text-decoration:none; transition:background-color .2s; }
.cert-link:hover{ background:var(--gold-soft); }
.cert-link svg{ width:14px; height:14px; }
.cert-na{ font-size:13px; font-weight:700; color:var(--ink-3); }
.ach-foot{ padding:36px 0 72px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; font-size:14.5px; color:var(--ink-2); }

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

/* ------------------------------------------------------------------
   Responsive
------------------------------------------------------------------- */
@media (max-width:1180px){
  .nav a{ padding:10px 9px; font-size:14px; }
  .glance{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .glance > div:nth-child(4){ border-left:0; padding-left:0; }
  .glance > div:nth-child(n+4){ border-top:1px solid var(--line); margin-top:8px; }
  .outcomes,.comm-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .chip-a{ left:-4%; } .chip-b{ right:-4%; }
}
@media (max-width:980px){
  .nav{ display:none; }
  .menu-btn{ display:inline-flex; }
  .hero{ padding-top:calc(var(--head-h) + 24px); }
  .hero-grid{ grid-template-columns:minmax(0,1fr); }
  .hero-visual{ order:-1; width:min(84vw,400px); margin:-28px auto 0; }
  .hs-story,.ws-grid,.t-grid,.dev,.voices-grid,.contact-grid,.teaser-card,.committees,.scard{ grid-template-columns:minmax(0,1fr); }
  .hs-sticky,.room-panel,.dev-intro{ position:relative; top:auto; }
  .anim .step,.step{ opacity:1; min-height:0; padding:26px 0; }
  .step:first-child{ min-height:0; }
  .room-panel{ min-height:0; }
  .journey-head{ flex-direction:column; align-items:flex-start; }
  .scard{ position:relative; top:auto; min-height:0; }
  .projects-head{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:900px){
  .journey-inner{ min-height:0; padding:clamp(96px,11vw,140px) 0 72px; }
  .journey-track{ flex-direction:column; width:auto; padding:32px clamp(20px,5vw,56px) 0; }
  .jcard{ width:auto; min-height:0; }
  .jprogress{ display:none; }
}
@media (max-width:680px){
  body{ font-size:16px; }
  .head-cta .btn{ display:none!important; }
  .glance{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .glance > div:nth-child(n){ border-left:0; padding-left:0; border-top:1px solid var(--line); margin-top:0; }
  .glance > div:nth-child(even){ padding-left:18px; border-left:1px solid var(--line); }
  .outcomes,.comm-grid{ grid-template-columns:minmax(0,1fr); }
  .comm{ min-height:0; }
  .chip-in{ font-size:11.5px; padding:7px 11px 7px 7px; gap:8px; border-radius:14px; }
  .chip-in small{ font-size:10.5px; }
  .chip-ico{ width:28px; height:28px; border-radius:9px; }
  .chip-ico svg{ width:16px; height:16px; }
  .chip-a{ left:-5%; top:74%; } .chip-b{ right:-6%; top:31%; } .chip-c{ display:none; }
  .hero{ padding-top:calc(var(--head-h) - 4px); }
  .ach-stats{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px 18px; }
  .iso-label .t{ display:none; }
  .iso-label .n{ display:inline; }
  .iso-label{ padding:0; width:26px; height:26px; justify-content:center; font-size:12px; }
  .room-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
  .hs-metrics{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .hs-staff{ grid-template-columns:minmax(0,1fr); }
  .clist > div{ grid-template-columns:minmax(0,1fr); gap:4px; }
  .hero-actions .btn{ flex:1 1 auto; }
  .cert-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .marquee-track{ animation:none!important; flex-wrap:wrap; width:auto; }
  .marquee{ -webkit-mask-image:none; mask-image:none; }
}