/* ==========================================================================
   JHS PAGE SYSTEM — Jain Heritage School, Electronic City
   --------------------------------------------------------------------------
   The design system already live on Preschool.html and middle_school.html,
   lifted out verbatim so the dedicated pages (About, Why JHS, Philosophy,
   Campus, Admissions, Gallery, Contact) share one set of tokens, components
   and section rhythm rather than each inventing their own.

   Preschool.html and middle_school.html keep their own inline <style> blocks
   untouched — this file is additive, never a replacement for them.

   Stage accent: the default here is Signature Green. A page may re-theme by
   setting --stage / --stage-soft / --stage-ink on <html> or <body>.
   ========================================================================== */

:root{
  /* Primary */
  --green-signature:#00b140;
  --red-signal:#e63329;
  --orange-signal:#f5a400;

  /* Overlay / panel */
  --navy-deep:#1b2a4a;
  --indigo:#302b6e;
  --blue-steel:#1f4e86;
  --blue-bright:#0c9ad7;
  --green-leaf:#6abf4b;

  /* Accent grounds */
  --yellow-signal:#f5d021;
  --yellow-highlight:#ffd400;
  --sand:#efe0a9;
  --lime-soft:#c3d96b;
  --sky:#92c0db;
  --amber-deep:#5e3800;
  --amber:#e08700;

  /* This page's stage accent */
  --stage:var(--green-signature);
  --stage-soft:#e8f7ee;
  --stage-ink:#04552a;

  /* Neutrals */
  --white:#fff;
  --ink:#16181d;
  --ink-soft:#4a4f5a;
  --hair:rgba(22,24,29,.12);
  --brand-blue:#001C54; /* the blue in the JHS logo mark - shared heading colour site-wide */

  /* TWO faces site-wide. Headings -> Plus Jakarta Sans, unchanged. Body and all
     sub-content -> DM Sans: Google Sans itself is proprietary and never resolves
     in a browser, so the stack led with a name nobody's machine actually has.
     DM Sans is the real, licensed, always-loading match \u2014 declaring it first
     means what's coded is what actually renders, not a fallback that always wins. */
  --font-sans:"DM Sans","Google Sans","Google Sans Text","Product Sans",Arial,sans-serif;
  --font-display:"Plus Jakarta Sans","Google Sans","DM Sans",Arial,sans-serif;
  --font-hero:"Plus Jakarta Sans","Google Sans","DM Sans",Arial,sans-serif;
  --lh-display:1.08;
  --lh-body:1.45;

  /* ONE gutter for the whole page. The nav and .shell both derive from it, which
     is what keeps the logo flush with the first word of content and the last nav
     link flush with the right edge. Change it here or nowhere. */
  --gutter:clamp(1rem,4vw,2.5rem);
  --shell:1440px;
  --pad:clamp(3.5rem,8vw,7rem);
  --r:18px;

  --sp-2xs:.4rem;
  --sp-xs:.7rem;
  --sp-s:1.05rem;
  --sp-m:1.55rem;
  --sp-l:clamp(2rem,4vw,2.9rem);
  --sp-xl:clamp(2.75rem,6vw,4.25rem);
  --measure:60ch;
}

/* — optional page themes, so a page can take the warm accent without a new file — */
.t-orange{--stage:var(--orange-signal);--stage-soft:#fff4dd;--stage-ink:#7a4a00}
.t-blue{--stage:var(--blue-steel);--stage-soft:#e8f0fa;--stage-ink:#123258}
.t-indigo{--stage:var(--indigo);--stage-soft:#ecebf7;--stage-ink:#221f52}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--white);
  line-height:var(--lh-body);font-size:clamp(1rem,.96rem + .2vw,1.09rem);
  /* clip, not hidden: overflow-x:hidden forces overflow-y:auto, which makes body a
     scroll container and silently kills every position:sticky on the page */
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--lh-display);margin:0 0 .5em;font-weight:800;letter-spacing:-.02em;color:var(--brand-blue);text-wrap:balance}
p,li,figcaption,blockquote{text-wrap:pretty}
h1{letter-spacing:-.032em;line-height:1.02}
h2{letter-spacing:-.026em;line-height:1.08}
h3{letter-spacing:-.015em;line-height:1.22}
h4{letter-spacing:-.008em;line-height:1.34}
.stat__num,.lstat__num,.jn__n{font-variant-numeric:tabular-nums}
.hero,.hero h1{font-family:var(--font-hero)}
.hero .efc{font-family:var(--font-sans)}
.hero .efc :is(h1,h2,h3,h4){font-family:var(--font-display)}
/* the second colour in a heading - the site-wide dual-colour device */
.grad-text{color:#e29400}
:is(.comp,.play,.food,.legacy,.cta,.statement,.hero,.dark){--grad-on-dark:1}
:is(.comp,.play,.food,.legacy,.cta,.statement,.hero,.dark) .grad-text{color:#ffd400}
/* headings on a dark/coloured ground keep white, not the brand blue.
   The white panels that sit inside those sections — the enquiry card, the
   carousel cards, the nav dropdown — are excluded, or their headings vanish. */
:is(.hero,.comp,.play,.food,.legacy,.cta,.dark) :is(h1,h2,h3,h4):not(.efc *):not(.pcard *):not(.ccard *):not(.jhs-drop__menu *){color:#fff}
.efc :is(h1,h2,h3,h4),.pcard :is(h3,h4),.ccard :is(h3,h4){color:var(--brand-blue)}
h1{font-size:clamp(2.35rem,1.4rem + 4.4vw,4.5rem)}
h2{font-size:clamp(1.85rem,1.2rem + 2.6vw,3.15rem)}
h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem)}
p{margin:0 0 1em}
.shell{width:min(100% - (var(--gutter) * 2),var(--shell));margin-inline:auto}
.pad{padding-block:var(--pad)}
.pad-sm{padding-block:clamp(2.5rem,5vw,4rem)}
.lede{font-size:clamp(1.08rem,1rem + .5vw,1.32rem);color:var(--ink-soft);max-width:var(--measure);line-height:1.7}
.dark .lede,.legacy .lede,.cta .lede,.comp .lede,.play .lede{color:rgba(255,255,255,.82)}
.eyebrow{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--sp-s);color:var(--stage)}
.eyebrow--ink{color:var(--stage-ink)}
.eyebrow--yellow{color:var(--yellow-highlight)}
.eyebrow--white{color:rgba(255,255,255,.8)}
.tint{background:#f7f8fa}
.tint-stage{background:var(--stage-soft)}

/* ========================= SPACING SYSTEM ========================= */
.sec-head{max-width:var(--measure);margin-block-end:var(--sp-xl)}
.sec-head.center{margin-inline:auto}
.sec-head.wide{max-width:76ch}
.sec-head .eyebrow{margin-bottom:var(--sp-s)}
.sec-head h2{margin-bottom:0}
.sec-head > * + p{margin-top:var(--sp-s)}
.sec-head h2 + *{margin-top:var(--sp-m)}
.sec-head > :last-child{margin-bottom:0}
.sec-head + :is(.proof__grid,.play__grid,.pillars__grid,.comp__grid,.styles__grid,.shift__table,.day__list,.rows,.seq,.cont,.jn,.gal,.stage-pair,.elig,.info-cards){margin-top:0}
:is(h1,h2,h3,h4) + p{margin-top:var(--sp-xs)}
.shell > :last-child{margin-bottom:0}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* — the signature emphasis device: a filled box behind the words — */
.hl{background:var(--green-signature);color:var(--white);padding:.02em .2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hl--orange{background:var(--orange-signal);color:#231400}
.hl--yellow{background:var(--yellow-highlight);color:var(--brand-blue)}
.hl--red{background:var(--red-signal);color:#fff}
.hl--navy{background:var(--navy-deep);color:#fff}

/* ========================= FLAG MOTIF =========================
   A descriptive origin-of-method motif — never an endorsement badge. */
.flags{display:inline-flex;align-items:center;gap:.55rem;vertical-align:middle}
.flag{width:34px;height:23px;border-radius:3px;position:relative;overflow:hidden;flex:none;box-shadow:0 1px 4px rgba(0,0,0,.22);background:center/cover no-repeat #fff}
.flag--fi{background-image:url("../img/flag-finland.svg")}
.flag--in{background-image:url("../img/flag-india.svg")}
.flags .arrow{font-weight:900;opacity:.5;font-size:.9rem}
.flagbar{
  display:inline-flex;align-items:center;gap:.7rem;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  padding:.5rem .95rem;border-radius:999px;font-size:.8rem;font-weight:700;
  letter-spacing:.02em;backdrop-filter:blur(6px);
}
.flagbar--ink{background:rgba(22,24,29,.05);border-color:var(--hair);color:var(--ink)}

/* ========================= FINNISH WORD MORPH ========================= */
.morph{position:relative;display:inline-grid;vertical-align:baseline;text-align:center}
.morph > .sizer{visibility:hidden;pointer-events:none;grid-area:1/1;white-space:nowrap}
.morph > span{grid-area:1/1;white-space:nowrap;color:var(--yellow-highlight);animation:morphCycle 7s cubic-bezier(.6,0,.25,1) infinite}
.morph > .fi{color:var(--yellow-highlight)}
.morph > .en{animation-delay:-3.5s}
@keyframes morphCycle{
  0%,4%    {opacity:0;filter:blur(7px);transform:translateY(.32em) scale(.96)}
  10%,44%  {opacity:1;filter:blur(0);transform:none}
  50%,100% {opacity:0;filter:blur(7px);transform:translateY(-.32em) scale(.96)}
}
@media (prefers-reduced-motion:reduce){
  .morph > span{animation:none}
  .morph > .fi{display:none}
  .morph > .en{opacity:1;filter:none;transform:none}
}
.fiword{color:var(--stage);font-weight:800;border-bottom:2px dotted currentColor;cursor:help;text-underline-offset:3px}

/* ========================= NAV ========================= */
.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:80;
  display:flex;align-items:center;gap:1rem;
  padding-block:.85rem;
  /* the bar stays full-bleed, but its contents start exactly where .shell does:
     the gutter while the shell is fluid, the centring offset once it has capped */
  padding-inline:max(var(--gutter),calc((100% - var(--shell)) / 2));
  transition:background .3s,box-shadow .3s,padding .3s;
}
.nav::before{
  content:"";position:absolute;inset:0 0 -70%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,10,16,.55),rgba(8,10,16,0));transition:opacity .3s;
}
.nav.solid::before,.nav.open::before{opacity:0}
.nav.solid{background:rgba(255,255,255,.96);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hair),0 10px 30px -18px rgba(15,23,42,.2);padding-block:.55rem}
.nav__brand{display:grid;flex:none;width:clamp(230px,32vw,320px);aspect-ratio:9908/1219;transition:width .3s}
.nav__brand > img{grid-area:1/1;width:100%;height:100%;object-fit:contain;object-position:left center;transition:opacity .3s ease}
.nav__logo--light{filter:drop-shadow(0 3px 12px rgba(0,0,0,.45))}
.nav__logo--ink{opacity:0}
.nav.solid .nav__brand{width:clamp(190px,26vw,265px)}
.nav.solid .nav__logo--light,.nav.open .nav__logo--light{opacity:0}
.nav.solid .nav__logo--ink,.nav.open .nav__logo--ink{opacity:1}
.nav__spacer{flex:1}
.nav__links{display:flex;align-items:center;gap:1.15rem;font-size:.86rem;font-weight:600}
.nav__links > a{
  text-decoration:none;opacity:.85;color:#fff;
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
}
.nav.solid .nav__links > a{color:var(--ink)}
.nav__links > a:hover{opacity:1;color:var(--stage)}
.nav__links > a[aria-current="page"]{opacity:1;color:var(--yellow-highlight)}
.nav.solid .nav__links > a[aria-current="page"]{color:var(--stage)}

/* — the inner pages have no hero to sit over, so their bar is solid from the
     top and scrolls with the document rather than floating above it — */
.nav[data-solid="always"]{
  position:sticky;inset-block-start:0;padding-block:.55rem;
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--hair),0 10px 30px -18px rgba(15,23,42,.2);
}
.nav[data-solid="always"]::before{opacity:0}
.nav[data-solid="always"] .nav__brand{width:clamp(190px,26vw,265px)}
.nav[data-solid="always"] .nav__logo--light{opacity:0}
.nav[data-solid="always"] .nav__logo--ink{opacity:1}
.nav[data-solid="always"] .nav__links > a{color:var(--ink)}
.nav[data-solid="always"] .nav__links > a[aria-current="page"]{color:var(--stage)}
.nav[data-solid="always"] .nav__toggle{background:rgba(22,24,29,.07)}
.nav[data-solid="always"] .nav__toggle .bar,
.nav[data-solid="always"] .nav__toggle .bar::before,
.nav[data-solid="always"] .nav__toggle .bar::after{background:var(--ink)}

.nav__toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;flex:none;padding:0;border:0;border-radius:12px;background:rgba(255,255,255,.18);cursor:pointer}
.nav.solid .nav__toggle{background:rgba(22,24,29,.07)}
.nav__toggle .bar,.nav__toggle .bar::before,.nav__toggle .bar::after{display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:background .2s,transform .25s}
.nav__toggle .bar{position:relative}
.nav__toggle .bar::before,.nav__toggle .bar::after{content:"";position:absolute;left:0}
.nav__toggle .bar::before{top:-6px}
.nav__toggle .bar::after{top:6px}
.nav.solid .nav__toggle .bar,.nav.solid .nav__toggle .bar::before,.nav.solid .nav__toggle .bar::after{background:var(--ink)}

@media (max-width:1080px){
  .nav{flex-wrap:wrap}
  .nav__toggle{display:inline-flex}
  .nav__links{
    order:9;flex-basis:100%;display:grid;gap:0;align-items:stretch;
    max-height:0;overflow:hidden;visibility:hidden;transition:max-height .3s ease,visibility .3s;
  }
  .nav__links > a{color:var(--ink);opacity:1;padding:.9rem .2rem;border-bottom:1px solid var(--hair);font-size:.98rem;width:100%;justify-content:space-between}
  .nav.open{background:rgba(255,255,255,.97);backdrop-filter:blur(14px);box-shadow:0 10px 28px rgba(0,0,0,.14)}
  .nav.open .nav__logo--light{filter:none}
  .nav.open .nav__links{max-height:min(74svh,600px);overflow-y:auto;visibility:visible}
  .nav.open .nav__toggle .bar{background:transparent}
  .nav.open .nav__toggle .bar::before{background:var(--ink);transform:translateY(6px) rotate(45deg)}
  .nav.open .nav__toggle .bar::after{background:var(--ink);transform:translateY(-6px) rotate(-45deg)}
}
@media (max-width:560px){
  .nav{gap:.6rem}
  .nav__brand,.nav[data-solid="always"] .nav__brand,.nav.solid .nav__brand{width:clamp(180px,52vw,240px)}
  .nav__toggle{width:38px;height:38px}
}

/* ========================= BUTTONS ========================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.5rem;border-radius:999px;border:0;cursor:pointer;
  font:inherit;font-weight:800;font-size:.92rem;text-decoration:none;
  transition:transform .18s,box-shadow .18s,background .18s;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-stage{background:var(--stage);color:#fff;box-shadow:0 6px 20px rgba(0,177,64,.36)}
.btn-stage:hover{box-shadow:0 10px 28px rgba(0,177,64,.46)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn-white{background:#fff;color:var(--ink)}
.btn-lg{padding:1.05rem 2rem;font-size:1rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

/* a quiet text link that sends the reader on to the dedicated page */
.golink{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;font-size:.9rem;letter-spacing:.02em;color:var(--stage);text-decoration:none}
.golink i{transition:transform .3s}
.golink:hover i{transform:translateX(4px)}
.dark .golink,.legacy .golink,.cta .golink{color:var(--yellow-highlight)}

/* ========================= HERO ========================= */
/* The photograph is set per page, on .hero itself. It deliberately does NOT
   travel in a custom property: a relative url() inside one is resolved against
   the base URL of the stylesheet that substitutes it, not the document, so
   `--hero-img:url("assets/img/…")` written in a page resolves to
   assets/css/assets/img/… — and browsers disagree about it besides. */
.hero{
  position:relative;min-height:min(92svh,820px);display:grid;align-items:center;
  padding-block:clamp(7rem,14vw,9rem) clamp(3rem,7vw,5rem);
  background:var(--navy-deep) center/cover no-repeat;
  color:#fff;overflow:hidden;
}
.hero::before{ /* the wash that keeps white type legible over any photograph */
  content:"";position:absolute;inset:0;
  background:linear-gradient(102deg,rgba(27,42,74,.95) 0%,rgba(31,78,134,.88) 48%,rgba(0,177,64,.45) 100%);
}
.hero::after{
  content:"";position:absolute;inset-block-start:-22%;inset-inline-end:-16%;
  width:min(60vw,760px);aspect-ratio:1;border-radius:52% 48% 56% 44%/46% 56% 44% 54%;
  background:radial-gradient(circle at 36% 36%,rgba(0,177,64,.34),transparent 68%);pointer-events:none;
}
.hero__in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero--solo .hero__in{grid-template-columns:1fr;max-width:74ch}
@media (max-width:980px){.hero__in{grid-template-columns:1fr}}
.hero h1{margin-block:.3em .35em}
.hero__sub{font-size:clamp(1.05rem,1rem + .45vw,1.3rem);max-width:47ch;opacity:.95}
.hero__proof{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.chip{background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.24);padding:.42rem .85rem;border-radius:999px;font-size:.78rem;font-weight:700}
/* the 3-stat pill row */
.hero__stats{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.hstat{
  display:grid;gap:.1rem;padding:.7rem 1.15rem;border-radius:16px;
  background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);
}
.hstat b{font-size:1.35rem;font-weight:900;line-height:1;color:var(--yellow-highlight)}
.hstat span{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.82}

/* ========================= ENQUIRY FORM ========================= */
.efc{position:relative;background:#fff;color:var(--ink);border-radius:22px;padding:clamp(1.1rem,2.2vw,1.5rem);box-shadow:0 26px 70px rgba(0,0,0,.3)}
.efc h3{margin-bottom:.2rem;font-size:1.22rem;color:var(--brand-blue)}
.efc__note{font-size:.82rem;color:var(--ink-soft);margin-bottom:.85rem}
/* Nordi renders the fields in a closed shadow root, so the host box is the only
   place the height can be capped. */
/* The ERP enquiry form is an iframe that reports its own height over postMessage,
   so it must not be height-capped or given an inner scrollbar. */
.efc .erp-enquiry{ display:block; width:100%; border:0; }
.efc__fine{font-size:.74rem;color:var(--ink-soft);margin:.75rem 0 0;line-height:1.45}

/* Native form controls. The Nordi enquiry widget renders its own fields inside a
   shadow root and never needs these, but any form we build ourselves does. */
.field{margin-bottom:.8rem}
.field label{display:block;font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.32rem;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  width:100%;padding:.82rem .95rem;border:1.5px solid var(--hair);border-radius:12px;
  font:inherit;font-size:.98rem;background:#fbfbfc;color:var(--ink);
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--stage);box-shadow:0 0 0 4px color-mix(in srgb,var(--stage) 18%,transparent);background:#fff;
}
.field textarea{min-height:78px;resize:vertical}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:480px){.field--row{grid-template-columns:1fr}}
/* honeypot */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.efc::after{content:"";position:absolute;inset:-5px;border-radius:27px;border:2.5px solid var(--stage);opacity:0;pointer-events:none}
.efc--pop{animation:efcPop 1.1s cubic-bezier(.22,1,.36,1)}
.efc--pop::after{animation:efcRing 1.1s cubic-bezier(.22,1,.36,1)}
@keyframes efcPop{0%,100%{transform:none}18%{transform:translateY(-10px) scale(1.018)}44%{transform:translateY(0) scale(1)}64%{transform:translateY(-4px) scale(1.006)}}
@keyframes efcRing{0%{opacity:.95;transform:scale(.99)}70%{opacity:0;transform:scale(1.05)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.efc--pop,.efc--pop::after{animation:none}}

/* ========================= NUMBERED PILLAR CARDS ========================= */
.pillars{background:var(--stage-soft)}
.pillars__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:clamp(1rem,2.4vw,1.6rem);margin-top:clamp(2.5rem,5vw,3.5rem);align-items:stretch}
.pillar{
  --acc:var(--stage);
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid rgba(12,19,48,.08);border-radius:20px;
  padding:clamp(1.5rem,3vw,2rem);
  box-shadow:0 1px 2px rgba(12,19,48,.04),0 20px 42px -32px rgba(12,19,48,.55);
  transition:transform .3s cubic-bezier(.2,.8,.25,1),box-shadow .3s,border-color .3s;
  scroll-margin-top:clamp(5rem,9vw,7rem);
}
.pillar:nth-child(2){--acc:var(--blue-bright)}
.pillar:nth-child(3){--acc:var(--orange-signal)}
.pillar:nth-child(4){--acc:var(--green-leaf)}
.pillar:nth-child(5){--acc:var(--blue-steel)}
.pillar:nth-child(6){--acc:var(--indigo)}
.pillar::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:5px;background:var(--acc)}
/* a breath of the accent bleeding out of the corner, so a white card is never just a white card */
.pillar::after{
  content:"";position:absolute;inset-block-start:-38%;inset-inline-end:-22%;
  width:62%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--acc),transparent 70%);opacity:.09;
}
.pillar:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--acc) 42%,transparent);
  box-shadow:0 1px 2px rgba(12,19,48,.04),0 30px 56px -30px rgba(12,19,48,.55);
}

.pillar__top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.pillar__ic{
  width:46px;height:46px;flex:none;border-radius:15px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--acc) 13%,#fff);color:var(--acc);font-size:1.12rem;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 26%,transparent);
}
.pillar__n{
  font-family:var(--font-display);font-size:clamp(2.3rem,4.6vw,3rem);font-weight:800;line-height:1;
  color:var(--acc);opacity:.2;letter-spacing:-.045em;font-variant-numeric:tabular-nums;
}
.pillar h3{margin-bottom:.55rem;font-size:clamp(1.16rem,1.04rem + .5vw,1.4rem)}
.pillar > p{font-size:.96rem;color:var(--ink-soft);margin-bottom:1.35rem}

/* Pinned to the foot of the card. Three cards with different copy lengths used to
   leave their evidence blocks at three different heights, which read as ragged. */
.pillar__how{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--hair);font-size:.88rem;color:var(--ink)}
.pillar__how b{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.65rem}
.pillar__how ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.pillar__how li{position:relative;padding-left:1.15rem;line-height:1.5;color:var(--ink-soft)}
.pillar__how li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.5em;
  width:6px;height:6px;border-radius:2px;background:var(--acc);transform:rotate(45deg);
}
@media (prefers-reduced-motion:reduce){.pillar:hover{transform:none}}

/* ========================= COMPARISON TABLE (elsewhere → here) ========================= */
/* cool ground, not mint: this band sits directly under .pillars on two pages and
   a second green tint there makes the pair read as one endless section */
.shift{background:linear-gradient(170deg,#f5f8fc 0%,#ebf0f8 55%,#e3eaf4 100%);color:var(--ink)}
.shift__table{margin-top:clamp(2.5rem,5vw,3.5rem);border-radius:var(--r);overflow:hidden;border:1px solid rgba(0,28,84,.12);background:#fff;box-shadow:0 22px 50px -34px rgba(12,19,48,.5)}
.shift__head,.shift__row{display:grid;grid-template-columns:1fr 44px 1fr}
.shift__head{background:var(--stage-soft);color:var(--stage-ink);font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.shift__head > div,.shift__row > div{padding:1rem 1.2rem}
.shift__row{border-top:1px solid rgba(0,28,84,.09);font-size:.97rem;align-items:center}
.shift__row .from{color:var(--ink-soft);opacity:.75;text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:rgba(230,51,41,.75)}
.shift__row .to{font-weight:700;color:var(--brand-blue)}
.shift__row .ar{text-align:center;color:var(--stage);font-weight:900;padding-inline:0}
@media (max-width:700px){
  .shift__head{display:none}
  .shift__row{grid-template-columns:1fr;gap:0}
  .shift__row > div{padding:.7rem 1.1rem}
  .shift__row .from{padding-bottom:.15rem}
  .shift__row .ar{text-align:left;padding:0 1.1rem}
  .shift__row .to{padding-top:.15rem;padding-bottom:1.1rem}
}

/* ========================= PULL-QUOTE / STATEMENT BANDS ========================= */
.statement{position:relative;overflow:hidden;background:var(--green-signature);color:#fff;text-align:left}
.statement--navy{background:var(--navy-deep)}
.statement--yellow{background:var(--yellow-highlight);color:var(--brand-blue)}
.statement--sand{background:#eef3fb;color:var(--brand-blue)}
.statement::before{
  content:"\201C";position:absolute;inset-block-start:-.2em;inset-inline-start:-.04em;pointer-events:none;
  font-family:var(--font-display);font-size:clamp(9rem,22vw,16rem);line-height:1;color:currentColor;opacity:.08;
}
.statement::after{
  content:"";position:absolute;inset-block-start:-45%;inset-inline-start:-12%;
  width:62%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.17),transparent 68%);
  animation:stDrift 19s ease-in-out infinite alternate;
}
.statement--yellow::after,.statement--sand::after{background:radial-gradient(circle,rgba(0,28,84,.09),transparent 68%)}
@keyframes stDrift{to{transform:translate3d(75%,30%,0) scale(1.3)}}
.statement .shell{position:relative;z-index:1}
.statement p{font-size:clamp(1.25rem,.9rem + 1.7vw,2.15rem);font-weight:900;line-height:1.22;margin:0;max-width:46ch;letter-spacing:-.02em}
.statement em{font-style:italic}
.statement cite{display:block;font-size:.85rem;font-weight:600;font-style:normal;opacity:.72;margin-top:1.4rem;letter-spacing:.04em}
.statement cite::before{
  content:"";display:block;width:46px;height:2px;margin:0 0 1rem;border-radius:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .85s cubic-bezier(.2,.8,.25,1) .5s;
}
.statement .reveal.in cite::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .statement::after{animation:none}
  .statement cite::before{transform:none;transition:none}
}

/* ========================= FEATURE ROWS ========================= */
.rows{display:grid;gap:clamp(2.6rem,6vw,5rem);counter-reset:row}
.row{
  --acc:var(--stage);
  counter-increment:row;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center;
  scroll-margin-top:clamp(5rem,9vw,7rem);
}
.row:nth-child(6n+2){--acc:var(--blue-bright)}
.row:nth-child(6n+3){--acc:var(--orange-signal)}
.row:nth-child(6n+4){--acc:var(--green-leaf)}
.row:nth-child(6n+5){--acc:var(--blue-steel)}
.row:nth-child(6n){--acc:var(--indigo)}
/* The photograph leads on odd rows and follows on even ones. It is FIRST in the
   DOM, so it is the even rows that have to move — order:-1 here was a no-op and
   left every single image stranded on the left. */
.row:nth-child(even) .row__media{order:2}
@media (max-width:860px){
  .row{grid-template-columns:1fr}
  .row:nth-child(even) .row__media{order:0}
}

.row__media{
  position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;background:var(--sky);
  box-shadow:0 28px 56px -34px rgba(12,19,48,.62);
}
.row__media img{width:100%;height:100%;object-fit:cover}
/* a wash of the row's accent along the foot, so the photograph sits in the
   palette and the index tab has something to stand on */
.row__media::before{
  content:"";position:absolute;inset:auto 0 0 0;height:34%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--acc));opacity:.34;
}
/* opt-in: only sections that actually present a counted sequence get numbers */
.rows--numbered .row__media::after{
  content:counter(row,decimal-leading-zero);
  position:absolute;inset-block-end:0;inset-inline-start:0;z-index:2;
  min-width:66px;padding:.72rem 1.1rem;text-align:center;
  background:var(--acc);color:#fff;border-start-end-radius:16px;
  font-family:var(--font-display);font-weight:800;font-size:1.08rem;line-height:1;letter-spacing:-.02em;
}

.row__k{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc);margin-bottom:.75rem;
}
.row__k::before{content:"";width:26px;height:2px;border-radius:2px;background:currentColor;flex:none}
.row h3{margin-bottom:.55rem}
.row p{color:var(--ink-soft)}
.row .golink{color:var(--acc)}
.row__quote{border-left:4px solid var(--acc);padding-left:1.1rem;font-style:italic;color:var(--brand-blue)}
.row__quote span{font-style:normal;font-size:.85rem;color:var(--ink-soft)}
/* Sign-off under a first-person message, so it reads as a signature rather than a caption. */
.chair-sign{margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--hair)}
.chair-sign b{display:block;font-family:var(--font-display);font-size:1.05rem;color:var(--brand-blue);letter-spacing:-.01em}
.chair-sign span{display:block;margin-top:.15rem;font-size:.86rem;color:var(--ink-soft)}

/* ========================= STAT CIRCLES ========================= */
.proof{background:var(--sand);color:var(--ink)}
.proof__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1.2rem,3vw,2.2rem)}
.stat{text-align:center}
.stat__circle{
  aspect-ratio:1;width:clamp(9.5rem,19vw,12.5rem);margin:0 auto 1rem;
  border-radius:58% 42% 47% 53% / 46% 52% 48% 54%;
  display:grid;place-content:center;text-align:center;padding:1.5rem;
  color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.14);
  animation:statBlob 16s ease-in-out infinite;
}
.stat:nth-child(2) .stat__circle{animation-duration:12.5s;animation-delay:-4s}
.stat:nth-child(3) .stat__circle{animation-duration:19s;animation-delay:-8s}
@keyframes statBlob{
  0%,100%{border-radius:58% 42% 47% 53% / 46% 52% 48% 54%}
  25%{border-radius:44% 56% 62% 38% / 56% 44% 56% 44%}
  50%{border-radius:62% 38% 38% 62% / 40% 62% 38% 60%}
  75%{border-radius:38% 62% 54% 46% / 60% 38% 62% 40%}
}
@media (prefers-reduced-motion:reduce){.stat__circle{animation:none}}
.stat:nth-child(1) .stat__circle{background:var(--green-signature)}
.stat:nth-child(2) .stat__circle{background:var(--blue-bright)}
.stat:nth-child(3) .stat__circle{background:var(--orange-signal);color:#231400}
.stat__num{font-size:clamp(2.1rem,5.5vw,3.1rem);font-weight:900;line-height:1}
.stat__kick{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.9;margin-bottom:.3rem}
.stat__desc{font-size:.95rem;color:var(--ink-soft);max-width:26ch;margin-inline:auto}

/* ========================= NUMBERED CONTINUUM / JOURNEY ========================= */
.cont{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1rem,2.5vw,1.6rem);margin-top:clamp(2.5rem,5vw,3.5rem);counter-reset:cont}
.cont__item{
  position:relative;background:#fff;border:1.5px solid var(--hair);border-radius:var(--r);
  padding:clamp(1.4rem,2.8vw,1.9rem);overflow:hidden;scroll-margin-top:clamp(5rem,9vw,7rem);
}
.cont__item::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:5px;background:var(--acc,var(--stage))}
.cont__item:nth-child(1){--acc:var(--blue-bright)}
.cont__item:nth-child(2){--acc:var(--green-signature)}
.cont__item:nth-child(3){--acc:var(--orange-signal)}
.cont__item:nth-child(4){--acc:var(--indigo)}
.cont__n{font-family:var(--font-display);font-size:2.4rem;font-weight:900;line-height:1;color:var(--acc,var(--stage));opacity:.28;margin-bottom:.5rem}
.cont__item h3{font-size:1.22rem;margin-bottom:.35rem}
.cont__age{display:inline-block;font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.7rem}
.cont__item p{font-size:.95rem;color:var(--ink-soft);margin:0}
.cont__item .golink{margin-top:1rem}

/* ========================= JOURNEY STEPS (admissions) ========================= */
.jn{display:grid;gap:1px;background:var(--hair);border-radius:var(--r);overflow:hidden;margin-top:clamp(2.5rem,5vw,3.5rem)}
.jn__step{background:#fff;padding:1.4rem 1.6rem;display:grid;grid-template-columns:64px 1fr;gap:1.4rem;align-items:start}
@media (max-width:600px){.jn__step{grid-template-columns:1fr;gap:.4rem}}
.jn__n{font-family:var(--font-display);font-weight:900;font-size:1.6rem;line-height:1;color:var(--stage)}
.jn__step h4{margin-bottom:.25rem;font-size:1.1rem}
.jn__step p{margin:0;font-size:.95rem;color:var(--ink-soft)}

/* ========================= DAY / TIME STRIP ========================= */
.day__list{display:grid;gap:1px;background:var(--hair);border-radius:var(--r);overflow:hidden;margin-top:2.5rem}
.day__item{background:#fff;padding:1.3rem 1.5rem;display:grid;grid-template-columns:120px 1fr;gap:1.5rem;align-items:baseline}
@media (max-width:600px){.day__item{grid-template-columns:1fr;gap:.25rem}}
.day__t{font-weight:900;color:var(--stage);font-size:.95rem;letter-spacing:.02em}
.day__d h4{margin-bottom:.2rem;font-size:1.05rem}
.day__d p{margin:0;font-size:.93rem;color:var(--ink-soft)}

/* ========================= ELIGIBILITY TABLE ========================= */
.elig{margin-top:clamp(2.5rem,5vw,3.5rem);border-radius:var(--r);overflow:hidden;border:1px solid var(--hair);background:#fff;box-shadow:0 22px 50px -34px rgba(12,19,48,.4)}
.elig__head,.elig__row{display:grid;grid-template-columns:1.1fr .8fr 1.4fr}
.elig__head{background:var(--stage-soft);color:var(--stage-ink);font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.elig__head > div,.elig__row > div{padding:1rem 1.2rem}
.elig__row{border-top:1px solid var(--hair);font-size:.97rem;align-items:center}
.elig__row b{color:var(--brand-blue)}
.elig__row .muted{color:var(--ink-soft);font-size:.93rem}
@media (max-width:700px){
  .elig__head{display:none}
  .elig__row{grid-template-columns:1fr;gap:0;padding-block:.5rem}
  .elig__row > div{padding:.35rem 1.1rem}
}

/* ========================= LEARNING-STYLE / FEATURE CARDS ========================= */
.styles__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(1rem,2.5vw,1.6rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
.style{border:1.5px solid var(--hair);border-radius:var(--r);padding:1.6rem;position:relative;overflow:hidden;background:#fff;scroll-margin-top:clamp(5rem,9vw,7rem)}
.style::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:5px;background:var(--blue-bright)}
.style:nth-child(2)::before{background:var(--orange-signal)}
.style:nth-child(3)::before{background:var(--green-leaf)}
.style:nth-child(4)::before{background:var(--indigo)}
.style:nth-child(5)::before{background:var(--blue-steel)}
.style:nth-child(6)::before{background:var(--green-signature)}
.style h4{font-size:1.15rem;margin-bottom:.4rem}
.style p{font-size:.94rem;color:var(--ink-soft);margin-bottom:.9rem}
.style ul{margin:0;padding-left:1.1rem;font-size:.9rem;display:grid;gap:.3rem;color:var(--ink-soft)}
.style > :last-child{margin-bottom:0}

/* ========================= STICKY ASSURANCE STACK ========================= */
.cbse__in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.cbse__copy{position:sticky;top:clamp(6.5rem,14vh,9rem)}
.cbse__stack{display:grid;gap:clamp(.9rem,2vw,1.25rem);padding-bottom:clamp(2rem,12vh,7rem)}
.scard{
  position:sticky;top:calc(clamp(6.5rem,14vh,9rem) + var(--i) * .9rem);
  display:grid;grid-template-columns:auto 1fr;align-content:center;gap:.3rem 1.05rem;
  min-height:clamp(150px,19vh,188px);overflow:hidden;
  background:#fff;border:1px solid rgba(12,19,48,.09);border-radius:20px;
  padding:clamp(1.3rem,2.5vw,1.8rem);
  box-shadow:0 1px 2px rgba(12,19,48,.05),0 20px 42px -26px rgba(12,19,48,.45);
  transition:border-color .35s ease,box-shadow .35s ease;
}
.scard:hover{border-color:var(--acc,var(--stage));box-shadow:0 1px 2px rgba(12,19,48,.05),0 26px 52px -26px rgba(12,19,48,.55)}
.scard::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:6px;background:var(--acc,var(--stage))}
.scard::after{
  content:"";position:absolute;inset-block-start:-42%;inset-inline-end:-18%;width:58%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,var(--acc,var(--stage)),transparent 70%);opacity:.1;pointer-events:none;
}
.scard__tick{
  grid-column:1;grid-row:1/span 2;align-self:start;
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:var(--acc,var(--stage));color:#fff;font-size:1rem;font-weight:900;line-height:1;
  box-shadow:0 12px 22px -12px var(--acc,var(--stage));
}
.scard h4{grid-column:2;margin:0 0 .4rem;font-size:1.12rem;letter-spacing:-.015em}
.scard p{grid-column:2;margin:0;font-size:.95rem;color:var(--ink-soft);line-height:1.6}
.scard:nth-child(1){--acc:var(--stage)}
.scard:nth-child(2){--acc:var(--orange-signal)}
.scard:nth-child(3){--acc:var(--blue-bright)}
.scard:nth-child(4){--acc:var(--green-leaf)}
.scard:nth-child(5){--acc:var(--blue-steel)}
.scard:nth-child(6){--acc:var(--indigo)}
@media (max-width:980px){.cbse__in{grid-template-columns:1fr;gap:clamp(1.8rem,5vw,2.6rem)}.cbse__copy{position:static}}
@media (max-width:560px){.scard{position:static;min-height:0}.cbse__stack{padding-bottom:0}}

/* ========================= COVERFLOW CAROUSEL ========================= */
.comp{background:var(--indigo);color:#fff}
.comp__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.comp__copy{max-width:58ch}
.pcov{position:relative;perspective:1500px;perspective-origin:50% 48%;outline:none}
.pcov:focus-visible{outline:2px solid var(--yellow-highlight);outline-offset:14px;border-radius:26px}
.pcov__stage{position:relative;height:clamp(300px,27vw,345px);transform-style:preserve-3d}
.pcov__stage > *{
  position:absolute;inset:0;margin:auto;width:min(290px,76%);height:100%;
  display:flex;flex-direction:column;cursor:pointer;border-radius:22px;
  padding:1.5rem 1.35rem;backface-visibility:hidden;
  transition:transform .42s cubic-bezier(.25,.9,.3,1),opacity .32s ease,filter .32s ease,box-shadow .32s ease,background .3s ease;
  will-change:transform,opacity;
}
.pcov__stage > [data-o="0"]{transform:none;opacity:1;z-index:5;cursor:default;box-shadow:0 40px 80px -34px rgba(0,0,0,.8)}
.pcov__stage > [data-o="1"]{transform:translateX(48%) scale(.86) rotateY(-20deg);z-index:4;filter:blur(.8px)}
.pcov__stage > [data-o="-1"]{transform:translateX(-48%) scale(.86) rotateY(20deg);z-index:4;filter:blur(.8px)}
.pcov__stage > [data-o="2"]{transform:translateX(82%) scale(.72) rotateY(-27deg);z-index:3;filter:blur(2px)}
.pcov__stage > [data-o="-2"]{transform:translateX(-82%) scale(.72) rotateY(27deg);z-index:3;filter:blur(2px)}
.pcov__stage > [data-o="3"]{transform:translateX(104%) scale(.62) rotateY(-30deg);opacity:0;z-index:2;pointer-events:none}
.pcov__stage > [data-o="-3"]{transform:translateX(-104%) scale(.62) rotateY(30deg);opacity:0;z-index:2;pointer-events:none}
.ccard{background:#fff;border:1px solid rgba(12,19,48,.1);text-align:left;align-items:stretch;justify-content:flex-start;overflow:hidden}
.ccard[data-o="0"]{background:#fff;border-color:rgba(12,19,48,.16)}
.ccard[data-o="1"],.ccard[data-o="-1"]{background:#e9ecf7}
.ccard[data-o="2"],.ccard[data-o="-2"]{background:#d6dcee}
.ccard:not([data-o="0"]):hover{background:#fff;filter:none}
.ccard__n{
  position:absolute;inset-block-end:.25rem;inset-inline-end:1.1rem;margin:0;
  font-family:var(--font-display);font-size:clamp(7rem,12vw,9.5rem);font-weight:900;line-height:1;
  color:var(--stage);opacity:.14;pointer-events:none;user-select:none;
}
.ccard h4{margin:0;font-size:1.06rem;line-height:1.3;color:var(--brand-blue)}
.ccard h4::after{content:"";display:block;width:30px;height:2px;border-radius:2px;background:var(--stage);margin:.7rem 0 .8rem}
.ccard p{margin:0;font-size:.93rem;line-height:1.65;color:var(--ink-soft)}
.ccard p.ccard__more{margin-top:.6rem;font-size:.86rem;color:#6c7487}
.pcov__nav{display:flex;align-items:center;gap:.7rem;margin-top:clamp(1.7rem,3vw,2.3rem)}
.pcov__btn{
  width:46px;height:46px;flex:none;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;
  font-family:inherit;font-size:.9rem;
  transition:background .3s,border-color .3s,color .3s,transform .3s,opacity .3s;
}
.pcov__btn:hover{background:var(--yellow-highlight);border-color:transparent;color:#231400;transform:translateY(-2px)}
.pcov__dots{display:flex;align-items:center;gap:.4rem;margin-left:.6rem}
.pcov__dot{width:8px;height:8px;padding:0;border:0;border-radius:99px;cursor:pointer;font-family:inherit;background:rgba(255,255,255,.3);transition:width .45s cubic-bezier(.22,.85,.28,1),background .3s}
.pcov__dot[aria-selected="true"]{width:26px;background:var(--yellow-highlight)}
@media (max-width:980px){.comp__in{grid-template-columns:1fr;gap:clamp(1.8rem,5vw,2.6rem)}.comp__copy{max-width:none}}
@media (max-width:560px){
  .pcov__stage > *{width:min(260px,84%)}
  .pcov__stage > [data-o="1"]{transform:translateX(40%) scale(.84) rotateY(-15deg)}
  .pcov__stage > [data-o="-1"]{transform:translateX(-40%) scale(.84) rotateY(15deg)}
  .pcov__stage > [data-o="2"]{transform:translateX(68%) scale(.7) rotateY(-20deg)}
  .pcov__stage > [data-o="-2"]{transform:translateX(-68%) scale(.7) rotateY(20deg)}
  .pcov__stage > [data-o="3"],.pcov__stage > [data-o="-3"]{transform:translateX(0) scale(.6)}
}
@media (prefers-reduced-motion:reduce){
  .pcov__stage > *{transition:opacity .2s ease}
  .pcov__stage > [data-o="1"],.pcov__stage > [data-o="-1"],
  .pcov__stage > [data-o="2"],.pcov__stage > [data-o="-2"]{filter:none}
}

/* ========================= FOOD ========================= */
.food{background:var(--blue-steel);color:#fff}
.food__in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (max-width:860px){.food__in{grid-template-columns:1fr}}
.food__logo{background:#fff;border-radius:14px;padding:.9rem 1.2rem;display:inline-flex;align-items:center;margin-bottom:1.4rem;color:var(--brand-blue);font-weight:900;letter-spacing:.02em;font-size:1.25rem}
.food__pts{display:grid;gap:.7rem;margin-top:1.4rem;padding:0;list-style:none}
.food__pts li{display:flex;gap:.7rem;align-items:flex-start;font-size:.98rem}
.food__pts .b{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-content:center;font-size:.72rem;font-weight:900;margin-top:.15rem}

/* ========================= INSTITUTION LEGACY BLOCK ========================= */
.legacy{position:relative;overflow:hidden;color:#fff;background:radial-gradient(120% 90% at 85% -10%,#22315a 0%,#0c1330 55%,#070c1d 100%)}
.legacy::before{content:"";position:absolute;right:-6%;bottom:-3%;width:88%;aspect-ratio:9908/1219;background:url("../logos/Jain%20Heritage%20School%20white%20logo.svg") no-repeat right bottom/contain;opacity:.05;pointer-events:none}
.legacy .shell{position:relative}
.legacy__head{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;position:relative;padding-bottom:1.4rem;margin-bottom:clamp(2rem,5vw,3rem)}
.legacy__head::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--stage) 0 130px,rgba(255,255,255,.15) 300px);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .25s}
.legacy__head.in::after{transform:scaleX(1)}
.legacy__logo{display:block;width:min(430px,72vw);height:auto;clip-path:inset(-10% 100% -10% 0);transition:clip-path 1.2s cubic-bezier(.2,.7,.2,1) .1s}
.legacy__head.in .legacy__logo{clip-path:inset(-10% 0 -10% 0)}
.legacy__since{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.28);padding:.55rem 1.05rem;border-radius:999px}
.legacy__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:880px){.legacy__grid{grid-template-columns:1fr}}
.legacy__panel{position:relative;border-radius:20px;padding:.5rem clamp(1.3rem,2.6vw,2rem);background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px)}
.legacy__panel::before{content:"";position:absolute;left:-1px;top:24px;bottom:24px;width:3px;border-radius:3px;background:var(--stage);transform:scaleY(0);transform-origin:50% 0;transition:transform .9s cubic-bezier(.2,.7,.2,1) .4s}
.legacy__panel.in::before{transform:scaleY(1)}
.lstat{display:flex;gap:1.2rem;align-items:baseline;padding:1.15rem .1rem}
.lstat + .lstat{border-top:1px solid rgba(255,255,255,.12)}
.lstat__num{flex:none;min-width:4.6ch;font-size:clamp(2rem,4.2vw,2.8rem);font-weight:900;line-height:1;color:var(--stage);letter-spacing:-.02em}
.lstat__kick{font-size:.66rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;opacity:.65;margin-bottom:.25rem}
.lstat__desc{margin:0;font-size:.93rem;color:rgba(255,255,255,.78)}
.ladder{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(2.2rem,5vw,3.2rem);align-items:center}
.ladder span{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);padding:.55rem 1rem;border-radius:999px;font-size:.85rem;font-weight:700}
.ladder span.now{position:relative;background:var(--stage);color:#fff;border-color:transparent}
.ladder span.now::after{content:"";position:absolute;inset:-1px;border-radius:999px;box-shadow:0 0 0 0 var(--stage);animation:lpulse 2.8s cubic-bezier(.2,.6,.35,1) infinite}
@keyframes lpulse{75%{box-shadow:0 0 0 13px transparent}to{box-shadow:0 0 0 0 transparent}}
.ladder i{opacity:.4;font-style:normal}

/* ========================= GALLERY ========================= */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(.8rem,1.8vw,1.15rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
.gal__item{position:relative;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--sand);border:0;padding:0;cursor:zoom-in}
.gal__item.tall{aspect-ratio:3/4}
.gal__item.wide{grid-column:span 2;aspect-ratio:16/9}
@media (max-width:640px){.gal__item.wide{grid-column:span 1;aspect-ratio:4/3}}
.gal__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.gal__item:hover img{transform:scale(1.05)}
.gal__item figcaption{
  position:absolute;inset-inline:0;inset-block-end:0;padding:1.6rem 1.1rem .9rem;
  background:linear-gradient(180deg,transparent,rgba(6,12,30,.78));
  color:#fff;font-size:.86rem;font-weight:700;text-align:left;
}
/* lightbox */
.lbx{position:fixed;inset:0;z-index:130;display:none;place-content:center;padding:1.5rem;background:rgba(6,9,20,.9);backdrop-filter:blur(6px)}
.lbx.open{display:grid}
.lbx img{max-width:min(1100px,92vw);max-height:86svh;width:auto;border-radius:14px;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.lbx__x{position:absolute;inset-block-start:1rem;inset-inline-end:1.2rem;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:1.4rem;cursor:pointer}
.lbx__nav{position:absolute;inset-block-start:50%;translate:0 -50%;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:1rem;cursor:pointer}
.lbx__nav--prev{inset-inline-start:1rem}
.lbx__nav--next{inset-inline-end:1rem}

/* ========================= CAMPUS STAGE ========================= */
.cstage{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:16/7;background:var(--navy-deep);margin-top:clamp(2rem,4vw,3rem)}
@media (max-width:760px){.cstage{aspect-ratio:4/3}}
.cstage img{width:100%;height:100%;object-fit:cover}
.cstage__tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,30,.15) 30%,rgba(6,12,30,.82) 100%)}
.cstage__cap{position:absolute;inset-inline:0;inset-block-end:0;padding:clamp(1.2rem,3vw,2.2rem)}
.cstage__cap h3{color:#fff;margin:0;font-size:clamp(1.25rem,2.6vw,2rem)}
.cstage__badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;padding:.45rem .9rem;border-radius:999px;font-size:.76rem;font-weight:800;letter-spacing:.05em;margin-bottom:.8rem;backdrop-filter:blur(6px)}

/* ========================= STAGE PAIR (link-out cards) ========================= */
.stage-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,1.6rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (max-width:760px){.stage-pair{grid-template-columns:1fr}}
.spcard{position:relative;display:block;border-radius:22px;overflow:hidden;min-height:320px;text-decoration:none;background:var(--navy-deep)}
.spcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.spcard:hover img{transform:scale(1.06)}
.spcard__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,30,.15) 25%,rgba(6,12,30,.88) 100%)}
.spcard__in{position:relative;padding:clamp(1.3rem,3vw,2rem);display:flex;flex-direction:column;justify-content:flex-end;min-height:320px;color:#fff}
.spcard__tag{font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow-highlight);margin-bottom:.6rem}
.spcard h3{color:#fff;margin-bottom:.4rem}
.spcard p{font-size:.95rem;color:rgba(255,255,255,.82);margin-bottom:1rem}
.spcard__go{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:.88rem;color:var(--yellow-highlight)}

/* ========================= INFO CARDS (contact) ========================= */
.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(1rem,2.5vw,1.5rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
.icard{background:#fff;border:1.5px solid var(--hair);border-radius:var(--r);padding:1.5rem;display:grid;gap:.4rem;align-content:start}
.icard__ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--stage-soft);color:var(--stage-ink);font-size:1.05rem;margin-bottom:.5rem}
.icard h4{margin:0;font-size:1.02rem}
.icard p,.icard a{margin:0;font-size:.95rem;color:var(--ink-soft);text-decoration:none;line-height:1.6}
.icard a:hover{color:var(--stage)}
.map-frame{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--hair);box-shadow:0 22px 50px -34px rgba(12,19,48,.5);margin-top:clamp(2rem,4vw,3rem);background:#eef1f6}
.map-frame iframe{display:block;width:100%;border:0}

/* ========================= FAQ ========================= */
.faq__in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.faq__copy{position:sticky;top:clamp(6.5rem,14vh,9rem);margin-block-end:0}
.faq__list{display:grid;gap:.75rem}
.faq details{background:#fff;border:1px solid var(--hair);border-radius:16px;overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease}
.faq details:hover{border-color:color-mix(in srgb,var(--stage) 45%,transparent)}
.faq details[open]{border-color:var(--stage);box-shadow:0 18px 40px -28px rgba(12,19,48,.45)}
.faq summary{
  cursor:pointer;font-weight:800;font-size:1.02rem;line-height:1.4;list-style:none;
  display:flex;justify-content:space-between;gap:1.25rem;align-items:center;
  padding:1.05rem 1.25rem;color:var(--brand-blue);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--stage);outline-offset:-3px}
.faq summary::after{
  content:"+";flex:none;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-size:1.15rem;font-weight:700;line-height:1;
  background:var(--stage-soft);color:var(--stage-ink);
  transition:transform .3s cubic-bezier(.2,.8,.25,1),background .3s ease,color .3s ease;
}
.faq details[open] summary::after{transform:rotate(135deg);background:var(--stage);color:#fff}
.faq details p{margin:0;padding:0 1.25rem 1.2rem;color:var(--ink-soft);line-height:1.7;font-size:.96rem}
.faq details p + p{padding-top:0}
.faq details[open] p{animation:faqIn .38s cubic-bezier(.2,.8,.25,1) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-7px)}}
@media (max-width:980px){.faq__in{grid-template-columns:1fr;gap:clamp(1.8rem,5vw,2.6rem)}.faq__copy{position:static}}
@media (prefers-reduced-motion:reduce){.faq details[open] p{animation:none}}

/* ========================= ASK NORDI ========================= */
.nordi{
  border:2px dashed var(--stage);border-radius:var(--r);
  padding:clamp(1.5rem,4vw,2.4rem);display:grid;grid-template-columns:1fr auto;
  gap:1.5rem;align-items:center;background:var(--stage-soft);
}
@media (max-width:700px){.nordi{grid-template-columns:1fr}}
.nordi h3{margin-bottom:.3rem}
.nordi p{margin:0;color:var(--ink-soft);font-size:.96rem;max-width:56ch}

/* ========================= FINAL CTA ========================= */
.cta{background:var(--navy-deep);color:#fff;position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;inset-block-end:-30%;inset-inline-start:-12%;
  width:min(52vw,620px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(0,177,64,.24),transparent 68%);
}
.cta__in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.cta--solo .cta__in{grid-template-columns:1fr;text-align:center;justify-items:center}
@media (max-width:860px){.cta__in{grid-template-columns:1fr}}

/* ========================= MODAL ========================= */
.modal{position:fixed;inset:0;z-index:120;display:none;place-content:center;padding:1.25rem;background:rgba(12,14,20,.62);backdrop-filter:blur(4px)}
.modal.open{display:grid}
.modal__box{background:#fff;border-radius:22px;max-width:440px;width:100%;padding:clamp(1.5rem,4vw,2.2rem);position:relative;max-height:92svh;overflow-y:auto;animation:pop .3s cubic-bezier(.2,1.2,.4,1)}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal__box{animation:none}}
.modal__x{position:absolute;inset-block-start:.7rem;inset-inline-end:.9rem;background:0;border:0;font-size:1.7rem;line-height:1;cursor:pointer;color:var(--ink-soft)}

/* ========================= FOOTER (unified site-wide component) ========================= */
.site-foot{ position:relative; background-color:#061735; color:rgba(255,255,255,.78); font-size:1rem;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px); background-size:22px 22px; }
.site-foot::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(55% 70% at 88% 6%, rgba(247,181,0,.08), transparent 60%),
    radial-gradient(50% 62% at 6% 98%, rgba(21,101,216,.12), transparent 62%),
    radial-gradient(125% 95% at 50% 0%, transparent 52%, rgba(2,9,26,.78) 100%); }
.foot-cta{ position:relative; z-index:2; overflow:hidden; margin-bottom:clamp(2.2rem,5vw,3.5rem); padding:clamp(1.6rem,3.4vw,2.9rem); border-radius:26px;
  background:linear-gradient(120deg,#0c1330,#001c54); box-shadow:0 24px 48px -32px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:space-between; gap:1.6rem; flex-wrap:wrap; }
.foot-cta h3{ color:#fff; font-size:clamp(1.35rem,3vw,2rem); margin:0; line-height:1.15; }
.foot-cta p{ color:rgba(255,255,255,.85); margin:.5rem 0 0; font-weight:600; font-size:1.03rem; }
.foot-cta .btn-w{ position:relative; overflow:hidden; z-index:1; display:inline-flex; align-items:center; gap:.65rem; background:#ffb539; color:#0d1430; font-weight:800; padding:.95rem 1.9rem; border:0; border-radius:100vw; font-size:1.02rem; cursor:pointer; transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), color .3s ease; text-decoration:none; }
.foot-cta .btn-w:hover{ transform:translateY(-3px); color:#fff; box-shadow:0 16px 38px rgba(255,181,57,.4); }
.foot-main{ position:relative; z-index:2; display:grid; grid-template-columns:1.8fr 1fr 1fr 1.1fr; gap:2.4rem; padding-bottom:2.6rem; }
.foot-brand .logo-img{ width:180px; height:auto; }
.foot-brand p{ color:rgba(255,255,255,.72); font-size:.97rem; margin:1.1rem 0 0; max-width:32em; line-height:1.75; }
.foot-flags{ display:inline-flex; align-items:center; gap:.5rem; margin:1rem 0 .4rem; }
.foot-flags .flag{ width:30px;height:20px;border-radius:4px;position:relative;overflow:hidden;flex:none;box-shadow:0 1px 4px rgba(0,0,0,.35); background:center/cover no-repeat #fff; }
.foot-flags .flag--fi{ background-image:url("../img/flag-finland.svg"); }
.foot-flags .flag--in{ background-image:url("../img/flag-india.svg"); }
.foot-flags .arrow{ color:rgba(255,255,255,.45); font-weight:900; font-size:.85rem; }
.foot-flags-cap{ display:block; margin:.4rem 0 1.1rem; font-size:.88rem; font-weight:700; color:rgba(255,255,255,.68); }
.foot-social{ display:flex; gap:.7rem; }
.foot-social a{ width:2.6rem;height:2.6rem; border-radius:12px; display:grid;place-items:center; color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); transition:transform .25s, background .25s, color .25s; }
.foot-social a:hover{ background:#f7b500; color:#0c1330; transform:translateY(-3px); }
.site-foot h4{ position:relative; font-weight:800; font-size:.9rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin:0 0 1.2rem; padding-bottom:.7rem; }
.site-foot h4::after{ content:""; position:absolute; left:0; bottom:0; width:26px; height:2px; border-radius:2px; background:#f7b500; }
.foot-links{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.foot-links a{ color:rgba(255,255,255,.75); font-size:.97rem; text-decoration:none; transition:color .2s, padding-left .2s; }
.foot-links a:hover{ color:#f7b500; padding-left:5px; }
.foot-contact{ list-style:none; padding:0; margin:0; display:grid; gap:1rem; }
.foot-contact li{ display:flex; gap:.75rem; color:rgba(255,255,255,.78); font-size:.97rem; line-height:1.6; }
.foot-contact i{ color:#f7b500; margin-top:.2rem; }
.foot-contact a{ color:inherit; text-decoration:none; }
.foot-bot{ position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.1); padding:1.4rem 0 2.1rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; font-size:.88rem; color:rgba(255,255,255,.62); }
.foot-bot a{ color:rgba(255,255,255,.72); text-decoration:none; } .foot-bot a:hover{ color:#f7b500; }
@media(max-width:860px){ .foot-main{ grid-template-columns:1fr 1fr; gap:1.9rem; } .foot-cta{ padding:1.9rem; } }
@media(max-width:520px){ .foot-main{ grid-template-columns:1fr; } }

/* ========================= REVEAL ========================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ========================= SCROLL CHOREOGRAPHY =========================
   Additive to the .reveal system above. Nothing here is load-bearing:
   delete the block and the page still lays out and reads identically.
   ====================================================================== */

/* — a link that jumps to a section must clear the fixed nav — */
:where(section,header,footer,div)[id]{scroll-margin-top:clamp(4.5rem,8vw,6rem)}

.reveal{transition-delay:var(--rd,0s)}
:is(.proof__grid,.pillars__grid,.comp__grid,.styles__grid,.cont,.info-cards,.seq) > *:nth-child(2){--rd:.07s}
:is(.proof__grid,.pillars__grid,.comp__grid,.styles__grid,.cont,.info-cards,.seq) > *:nth-child(3){--rd:.14s}
:is(.proof__grid,.pillars__grid,.comp__grid,.styles__grid,.cont,.info-cards,.seq) > *:nth-child(4){--rd:.21s}
:is(.proof__grid,.pillars__grid,.comp__grid,.styles__grid,.cont,.info-cards,.seq) > *:nth-child(5){--rd:.28s}
:is(.proof__grid,.pillars__grid,.comp__grid,.styles__grid,.cont,.info-cards,.seq) > *:nth-child(6){--rd:.35s}
:is(.proof__grid,.pillars__grid,.comp__grid,.styles__grid,.cont,.info-cards,.seq) > *:nth-child(n+7){--rd:.42s}

.seq{opacity:1;transform:none}
.seq > *{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1);transition-delay:var(--rd,0s)}
.seq.in > *{opacity:1;transform:none}

.row__media img{transform:scale(1.055);transition:transform 1.15s cubic-bezier(.2,.7,.3,1)}
.reveal.in .row__media img,.row__media.reveal.in img{transform:none}

.tsplit__w{
  display:inline-block;opacity:0;
  transform:perspective(620px) translate3d(0,.42em,0) rotateX(-74deg);transform-origin:50% 0;
  transition:opacity .5s ease var(--wd,0s),transform .8s cubic-bezier(.16,.84,.26,1) var(--wd,0s);
}
.reveal.in .tsplit__w{opacity:1;transform:none}

.reveal .eyebrow{opacity:0;transform:translateY(-9px);letter-spacing:.42em;transition:opacity .5s ease,transform .55s cubic-bezier(.2,.8,.25,1),letter-spacing .95s cubic-bezier(.16,.84,.26,1)}
.reveal.in .eyebrow{opacity:1;transform:none;letter-spacing:.16em}

.reveal .lede{opacity:0;transform:translateY(15px);transition:opacity .7s ease .28s,transform .8s cubic-bezier(.2,.75,.25,1) .28s}
.reveal.in .lede{opacity:1;transform:none}

:is(.proof__grid,.pillars__grid,.comp__grid,.styles__grid,.cont,.info-cards) > .reveal{
  transform:perspective(1100px) translate3d(-70px,18px,-70px) rotateY(17deg) scale(.95);
  transform-origin:100% 50%;
  transition:opacity .75s ease var(--rd,0s),transform .95s cubic-bezier(.2,.72,.24,1) var(--rd,0s);
}
:is(.proof__grid,.pillars__grid,.comp__grid,.styles__grid,.cont,.info-cards) > .reveal:nth-child(even){
  transform:perspective(1100px) translate3d(70px,18px,-70px) rotateY(-17deg) scale(.95);transform-origin:0 50%;
}
:is(.proof__grid,.pillars__grid,.comp__grid,.styles__grid,.cont,.info-cards) > .reveal.in,
:is(.proof__grid,.pillars__grid,.comp__grid,.styles__grid,.cont,.info-cards) > .reveal.in:nth-child(even){transform:none}

.reveal :is(.stat__circle,.ccard__n,.icard__ic){
  opacity:0;transform:perspective(700px) rotateY(-105deg);
  transition:transform .8s cubic-bezier(.2,.8,.25,1) calc(var(--rd,0s) + .16s),opacity .45s ease calc(var(--rd,0s) + .16s);
}
.reveal.in :is(.stat__circle,.ccard__n,.icard__ic){opacity:1;transform:none}

.rows > .row.reveal{opacity:1;transform:none}
.rows > .row.reveal > *{opacity:0;transition:opacity .8s ease,transform .95s cubic-bezier(.2,.72,.24,1)}
.rows > .row.reveal > .row__media{transform:perspective(1200px) translate3d(-70px,0,-80px) rotateY(12deg);transform-origin:100% 50%}
.rows > .row.reveal > *:not(.row__media){transform:perspective(1200px) translate3d(70px,0,-80px) rotateY(-12deg);transform-origin:0 50%;transition-delay:.14s}
/* on a mirrored row each half still enters from the edge it actually sits on */
.rows > .row.reveal:nth-child(even) > .row__media{transform:perspective(1200px) translate3d(70px,0,-80px) rotateY(-12deg);transform-origin:0 50%}
.rows > .row.reveal:nth-child(even) > *:not(.row__media){transform:perspective(1200px) translate3d(-70px,0,-80px) rotateY(12deg);transform-origin:100% 50%}
/* The reset has to match the even-row selector's weight, or a mirrored row keeps
   its entry transform forever and the photograph is left hanging off the edge. */
.rows > .row.reveal.in > *,
.rows > .row.reveal.in:nth-child(even) > *{opacity:1;transform:none}

@media (hover:hover){
  :is(.ccard,.style,.stat,.cont__item,.icard):hover{
    transform:perspective(900px) translateY(-7px) rotateX(3.5deg) rotateY(-3.5deg) scale(1.018);
  }
}
@media (max-width:640px){
  :is(.proof__grid,.pillars__grid,.comp__grid,.styles__grid,.cont,.info-cards) > .reveal{
    transform:perspective(900px) translate3d(-34px,16px,-40px) rotateY(12deg) scale(.96);
  }
  :is(.proof__grid,.pillars__grid,.comp__grid,.styles__grid,.cont,.info-cards) > .reveal:nth-child(even){
    transform:perspective(900px) translate3d(34px,16px,-40px) rotateY(-12deg) scale(.96);
  }
  .rows > .row.reveal > .row__media,
  .rows > .row.reveal:nth-child(even) > .row__media{transform:perspective(900px) translate3d(-34px,0,-40px) rotateY(9deg)}
  .rows > .row.reveal > *:not(.row__media),
  .rows > .row.reveal:nth-child(even) > *:not(.row__media){transform:perspective(900px) translate3d(34px,0,-40px) rotateY(-9deg)}
  /* restated inside the query: the rules above sit later in the file than the
     base reset, so without this the transform never lands back on zero */
  .rows > .row.reveal.in > *,
  .rows > .row.reveal.in:nth-child(even) > *{transform:none}
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* The hero photograph drifts slower than the page riding over it. Driven
       from the root scroller, not view(): .hero sets overflow:hidden, which
       makes it its own scroll container, and a view() timeline would resolve
       against a scrollport that never scrolls and freeze at a fixed progress. */
    .hero{animation:heroDrift linear both;animation-timeline:scroll(root);animation-range:0 100svh}
    @keyframes heroDrift{from{background-position:center 42%}to{background-position:center 58%}}

    .statement p{animation:bandLift linear both;animation-timeline:view();animation-range:cover 0% cover 40%}
    @keyframes bandLift{from{opacity:.25;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}

    body::after{
      content:"";position:fixed;inset-block-start:0;inset-inline:0;height:3px;
      z-index:95;pointer-events:none;background:var(--stage);
      transform-origin:0 50%;transform:scaleX(0);
      animation:scrollProgress linear both;animation-timeline:scroll(root);
    }
    @keyframes scrollProgress{to{transform:scaleX(1)}}
  }
}

@media (prefers-reduced-motion:reduce){
  .reveal{transition-delay:0s}
  .seq > *{opacity:1;transform:none;transition:none}
  .row__media img{transform:none;transition:none}
  .tsplit__w,
  .reveal .lede,
  :is(.proof__grid,.pillars__grid,.comp__grid,.styles__grid,.cont,.info-cards) > .reveal,
  .reveal :is(.stat__circle,.ccard__n,.icard__ic),
  .rows > .row.reveal,.rows > .row.reveal > *,
  :is(.ccard,.style,.stat,.cont__item,.icard):hover{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  .reveal .eyebrow{opacity:1!important;transform:none!important;transition:none!important;letter-spacing:.16em!important}
  .legacy__logo{clip-path:none!important;transition:none!important}
  .legacy__head::after,.legacy__panel::before{transform:none!important;transition:none!important}
  .ladder span.now::after{animation:none!important}
  .gal__item:hover img,.spcard:hover img{transform:none}
}
