/* =========================================================
   Little Steps components. World: The Picture Schedule.
   1 base  2 shell  3 buttons  4 type  5 schedule strip  6 photo frame
   7 dividers  8 facts, people, faq, quote  9 form  10 footer  11 motion
   12 desktop
   ========================================================= */

/* 1. BASE ------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:clip;caret-color:var(--navy)}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
address{font-style:normal}
::selection{background:var(--lime-soft);color:var(--navy)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.site-header :focus-visible,.site-footer :focus-visible,.sticky-bar :focus-visible,.on-navy :focus-visible{outline-color:var(--lime-soft)}
html{scrollbar-color:var(--edge-navy) var(--cream)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--cream)}
::-webkit-scrollbar-thumb{background:var(--edge-navy);border-radius:var(--r-pill);border:3px solid var(--cream)}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:var(--s3);top:-4rem;z-index:100;background:var(--cream);color:var(--navy);padding:var(--s3) var(--s4);border-radius:0 0 var(--r-sm) var(--r-sm);font-weight:600}
.skip-link:focus{top:0}
.icon{width:1.125rem;height:1.125rem;flex:none}
[id]{scroll-margin-top:5rem}

/* 2. SHELL ----------------------------------------------- */
.site-header{position:sticky;top:0;z-index:30;background:var(--navy);color:var(--cream)}
.site-header__inner{position:relative;display:flex;align-items:center;justify-content:space-between;max-width:var(--max);margin-inline:auto;padding:.5rem var(--gutter)}
.brand{color:inherit;display:flex;align-items:center;gap:.625rem;text-decoration:none;min-height:2.75rem}
.brand__mark{width:34px;height:34px;border-radius:50%}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;line-height:1}

.nav-toggle{display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-right:-.625rem;background:none;border:0;color:var(--cream);cursor:pointer}
.nav-toggle .icon{width:1.5rem;height:1.5rem}
.nav-toggle__close{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__open{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__close{display:grid}

.site-nav{padding:var(--s2) var(--gutter) var(--s5)}
.js .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--navy);border-top:1px solid rgb(255 251 242 / .16);box-shadow:0 18px 28px -16px rgb(15 30 60 / .5)}
.js .site-nav.is-open{display:block}
.nav-list{list-style:none;margin:0;padding:0}
.nav-list a{display:block;padding:.875rem 0;color:var(--cream);text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:1.25rem;border-bottom:1px solid rgb(255 251 242 / .14)}
.nav-list a[aria-current="page"],.nav-list .current-menu-item>a{color:var(--lime-soft)}
.nav-call{margin-top:var(--s4);width:100%}

/* 3. BUTTONS --------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;padding:0 1.5rem;border:1.5px solid transparent;border-radius:var(--r-pill);background:none;font:600 1rem/1 var(--font-body);text-decoration:none;text-align:center;cursor:pointer;transition:transform var(--dur-press) var(--ease-out),box-shadow var(--dur-ui) var(--ease-out),background-color var(--dur-ui) var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn--call{--mx:0px;--my:0px;transform:translate(var(--mx),var(--my));transition:transform 260ms var(--ease-out),box-shadow var(--dur-ui) var(--ease-out),background-color var(--dur-ui) var(--ease-out)}
.btn--call:active{transform:translate(var(--mx),var(--my)) scale(.97)}
.btn--call{background:var(--lime);color:var(--on-lime)}
.btn--wa{color:var(--navy);border-color:var(--navy)}
.btn--on-navy{color:var(--cream);border-color:rgb(255 251 242 / .5)}
.btn--sm{min-height:2.75rem;padding:0 1.125rem;font-size:.9375rem}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.btn.is-loading{position:relative;color:transparent;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:1.125rem;height:1.125rem;border-radius:50%;border:2px solid currentColor;border-color:var(--on-lime) transparent var(--on-lime) transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (hover:hover) and (pointer:fine){
  .btn--call:hover{box-shadow:var(--shadow-lift)}
  .btn--wa:hover{background:var(--tint-navy)}
  .btn--on-navy:hover{background:rgb(255 251 242 / .1)}
  .nav-list a:hover{color:var(--lime-soft)}
}

.cta-row{display:flex;flex-wrap:wrap;gap:var(--s3)}
.cta-row .btn--call{flex:1.45 1 11rem}
.cta-row .btn--wa{flex:1 1 8rem}

.chips{display:flex;flex-wrap:wrap;gap:var(--s2);padding:0;list-style:none}
.chip{display:inline-block;padding:.375rem .875rem;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;line-height:1.4}
.chip--sand{background:var(--tint-sand);color:var(--sand-ink)}
.chip--mint{background:var(--tint-mint);color:var(--mint-ink)}
.chip--navy{background:var(--tint-navy);color:var(--navy)}

/* 4. TYPE ------------------------------------------------ */
.display,h1,h2,h3{font-family:var(--font-display);color:var(--heading);text-wrap:balance;font-optical-sizing:auto}
h1{font-size:var(--fs-3xl);font-weight:700;line-height:var(--lh-tight);letter-spacing:-.03em}
h2,.h2{font-size:var(--fs-2xl);font-weight:700;line-height:var(--lh-head);letter-spacing:-.025em}
h3,.h3{font-size:var(--fs-lg);font-weight:600;line-height:1.2;letter-spacing:-.015em}
.section{padding-block:var(--section-y)}
.section>.wrap>h2{margin-bottom:var(--s3)}
h2+.lede,h2+p{margin-top:var(--s3)}
.lede+p{margin-top:var(--s4)}
.lede{font-size:var(--fs-md);line-height:1.55;max-width:var(--measure);color:var(--ink)}
.prose{max-width:var(--measure)}
.prose>*+*{margin-top:var(--s4)}
.quiet{color:var(--text-quiet);font-size:var(--fs-sm)}
.on-navy{background:var(--navy);color:var(--cream)}
.on-navy h2,.on-navy h3{color:var(--lime-soft)}

.ls-todo{display:inline-block;font:600 .6875rem/1.3 var(--font-body);color:var(--ph-ink);background:rgb(255 255 255 / .8);border:1.5px dashed var(--muted);border-radius:var(--r-sm);padding:.25rem .5rem;text-align:center}

/* 5. SCHEDULE STRIP: the signature ------------------------ */
.strip{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:var(--s3)}
.strip::before{content:"";position:absolute;top:1.5rem;bottom:1.5rem;left:calc(3.75rem + var(--s5) / 2 - 12px);width:24px;background:var(--foot-v) repeat-y center top;pointer-events:none}
.pcard{position:relative;display:grid;grid-template-columns:3.75rem minmax(0,1fr);column-gap:var(--s5);align-items:start}
.pcard__tab{justify-self:end;display:inline-grid;place-items:center;height:2rem;min-width:3.25rem;padding:0 .625rem;margin-top:.875rem;border-radius:var(--r-sm);background:var(--tint-navy);color:var(--navy);font:600 var(--fs-sm)/1 var(--font-body);font-variant-numeric:tabular-nums;position:relative;z-index:1}
.pcard__card{position:relative;display:flex;gap:var(--s3);align-items:center;padding:var(--s3);background:var(--card);border:1px solid var(--edge-navy);border-radius:var(--r-md);box-shadow:var(--shadow-card)}
.pcard__card::before{content:"";position:absolute;top:-1px;left:50%;width:1.5rem;height:4px;margin-left:-.75rem;border-radius:0 0 4px 4px;background:var(--edge-navy)}
.pcard__thumb{flex:none;width:4rem;height:4rem;border-radius:var(--r-sm);overflow:hidden;background:var(--ph);display:grid;place-items:center}
.pcard__thumb img{width:100%;height:100%;object-fit:cover}
.pcard__thumb--icon{background:var(--tint-navy);color:var(--navy)}
.pcard__icon{width:1.75rem;height:1.75rem}
.pcard__title{font-family:var(--font-display);font-weight:600;font-size:1.0625rem;line-height:1.2;color:var(--navy);letter-spacing:-.01em}
.pcard__sub{font-size:var(--fs-sm);line-height:1.4;color:var(--text-quiet);margin-top:.125rem}
.pcard--call .pcard__card{flex-direction:column;align-items:stretch;background:var(--tint-lime)}
.pcard--call .pcard__card::before{background:var(--lime-soft)}
.pcard--call .pcard__tab{background:var(--tint-lime);color:var(--lime-ink)}
.pcard--call p{font-size:var(--fs-sm);color:var(--lime-ink)}

/* 5b. HOME: hero, facts, philosophy, routine ---------------- */
.hero__navy{position:relative;isolation:isolate;overflow:hidden;padding:var(--s6) 0 calc(var(--s7) + 1.5rem);min-height:26rem;display:flex;align-items:flex-end}
.hero__copy{position:relative;z-index:2;width:100%}
.hero h1{color:var(--cream);max-width:11ch;margin-bottom:var(--s3)}
.hero h1 em{font-style:normal;color:var(--lime-soft)}
.hero .line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hero__sub{font-size:var(--fs-md);line-height:1.5;color:rgb(255 251 242 / .92);max-width:30ch;margin-bottom:var(--s5)}
.hero .cta-row{max-width:32rem}
.hero .cta-row .btn--wa{flex-basis:7rem}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media video,.hero__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__shade{position:absolute;inset:0;background:rgb(20 40 80 / .58)}
.hero__scene{position:absolute;right:0;bottom:0;height:100%;width:auto;aspect-ratio:8/5;max-width:none}
.hero__navy--scene{flex-direction:column;align-items:stretch;justify-content:flex-start;padding-top:0}
.hero__navy--scene .hero__media{position:relative;inset:auto;height:8.75rem;margin-bottom:var(--s4)}
.hero__scene--m{inset:0;right:auto;width:100%;height:100%;aspect-ratio:auto}
.hero__scene--d{display:none}
.hero__todo{position:absolute;right:var(--gutter);top:var(--s3);z-index:3;max-width:12rem}
.scene-cloud{fill:var(--cream);opacity:.13;animation:drift 28s ease-in-out infinite alternate}
.scene-cloud--b{opacity:.09;animation-duration:36s;animation-delay:-9s}
.scene-cloud--c{opacity:.11;animation-duration:32s;animation-delay:-16s}
.scene-sun{fill:var(--lime-soft);transform-box:fill-box;transform-origin:center;animation:sunpulse 7s ease-in-out infinite}
.scene-sun--halo{opacity:.16;animation-delay:-2s}
.scene-foot{opacity:0;transform-box:fill-box;transform-origin:center;animation:walk 10s var(--ease-out) infinite;animation-delay:calc(var(--i) * .75s)}
.hero.is-resting .scene-cloud,.hero.is-resting .scene-sun,.hero.is-resting .scene-foot{animation-play-state:paused}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(70px)}}
@keyframes sunpulse{0%,100%{transform:scale(.96)}50%{transform:scale(1.06)}}
.hero--photos .hero__navy--scene .hero__media{height:11.75rem}
.hero__photos{position:absolute;inset:0;z-index:1}
.hero__photos .hero-frame{position:absolute;margin:0;transform:rotate(var(--tilt,0deg))}
.hero-frame .frame__paper{padding:4px 4px 12px}
.hero-frame .frame__paper img{aspect-ratio:4/5}
.hero-frame::before{width:2.25rem;height:.75rem;top:-.35rem;left:.75rem}
.hero-frame--1{width:6.75rem;left:var(--gutter);top:1rem;--tilt:-4deg}
.hero-frame--2{width:6rem;left:36%;top:1.75rem;--tilt:3deg;--tape:var(--tint-mint)}
.hero-frame--3{width:5.5rem;left:67%;top:.75rem;--tilt:-2deg;--tape:var(--tint-sand)}
.js .hero-frame{opacity:0;animation:frameIn 900ms var(--ease-out) forwards,floaty 7s ease-in-out 1.4s infinite alternate;animation-delay:calc(var(--n) * 140ms + 200ms),calc(var(--n) * -1.6s)}
.hero.is-resting .hero-frame{animation-play-state:paused}
@keyframes frameIn{from{opacity:0;transform:translateY(28px) rotate(0deg) scale(.94)}to{opacity:1;transform:translateY(0) rotate(var(--tilt,0deg)) scale(1)}}
@keyframes floaty{from{transform:translateY(0) rotate(var(--tilt,0deg))}to{transform:translateY(-7px) rotate(calc(var(--tilt,0deg) + 1deg))}}
@keyframes walk{0%{opacity:0;transform:scale(.6)}8%{opacity:1;transform:scale(1)}72%{opacity:1;transform:scale(1)}86%,100%{opacity:0;transform:scale(1)}}
.cloud--sand{color:var(--tint-sand)}

.home-facts{padding-block:var(--s2) var(--s6)}
.home-facts .chips{margin-bottom:var(--s5)}

.philosophy{padding-block:var(--s6) var(--section-y)}
.philosophy__grid{display:grid;gap:var(--s4)}
.philosophy h2{max-width:14ch}

.routine{background:var(--tint-sand);padding-block:var(--s6) var(--s8)}
.routine h2{color:var(--navy)}
.routine .lede{margin-bottom:var(--s6)}
.routine .pcard__tab{background:var(--card)}
.routine .strip::before{opacity:.95}

/* hero headline rises line by line, once, on load */
.js .hero .line>span{display:block;transform:translateY(108%);animation:rise 800ms var(--ease-out) forwards}
.js .hero .line:nth-child(1)>span{animation-delay:60ms}
.js .hero .line:nth-child(2)>span{animation-delay:150ms}
.js .hero__sub,.js .hero .cta-row{opacity:0;animation:fadeup 700ms var(--ease-out) forwards}
.js .hero__sub{animation-delay:320ms}
.js .hero .cta-row{animation-delay:420ms}
@keyframes rise{to{transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:0;transform:translateY(24px) rotate(0deg) scale(.96)}to{opacity:1}}

/* the footprint rail walks in when the strip is reached */
.js .strip::before{clip-path:inset(0 0 100% 0);transition:clip-path 1400ms var(--ease-out) 200ms}
.js .strip.in::before{clip-path:inset(0)}

/* 5c. HOME sections: gallery, leaders, stairs, teachers, learn, steps, campus, safety, faq, where, closing */
.gpeek{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s4);margin-top:var(--s6);padding-top:var(--s3)}
.gpeek__item:nth-child(even){margin-top:var(--s6)}
.gpeek__more{margin-top:var(--s6)}

.leaders{display:grid;gap:var(--s7);margin-top:var(--s6)}
.leader{display:grid;gap:var(--s5);align-items:start}
.leader__photo{width:min(72%,16rem)}
.leader__role{color:var(--text-quiet);font-weight:600;margin-top:.125rem}
.leader__msg{margin-top:var(--s4);max-width:var(--measure)}
.leader__msg p+p{margin-top:var(--s3)}
.leaders--one .leader__text h3{font-size:var(--fs-xl)}
.leader--solo{justify-items:center}
.leader--solo .leader__text{display:none}

.stairs{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s3)}
.stair{width:calc(58% + var(--step) * 14%)}
.stair a{display:grid;gap:.125rem;align-content:center;min-height:5.5rem;padding:var(--s4) var(--s5);border-radius:var(--r-md);text-decoration:none;transition:transform var(--dur-press) var(--ease-out)}
.stair a:active{transform:scale(.98)}
.stair--lime a{background:var(--tint-lime);color:var(--lime-ink)}
.stair--navy a{background:var(--tint-navy);color:var(--navy)}
.stair--sand a{background:var(--tint-sand);color:var(--sand-ink)}
.stair--mint a{background:var(--tint-mint);color:var(--mint-ink)}
.stair__name{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);letter-spacing:-.015em;line-height:1.1}
.stair__age{font-size:var(--fs-md);font-weight:600;font-variant-numeric:tabular-nums}
.stair__end{font-size:var(--fs-sm)}

.teachers__list{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s4)}
.teacher:nth-child(even){margin-top:var(--s6)}
.teacher__name{margin-top:var(--s4);font-size:var(--fs-md)}
.teacher__line{font-size:var(--fs-sm);color:var(--text-quiet)}

.cloud--mint{color:var(--tint-mint)}
.learn{background:var(--tint-mint);padding-block:var(--s7)}
.learn h2{color:var(--mint-ink)}
.learn .lede{color:var(--mint-ink-2)}
.learn__grid{display:grid;gap:var(--s5)}
.learn__list{list-style:none;margin:0;padding:0}
.learn__list li{position:relative;padding:var(--s3) 0 var(--s3) 1.75rem;border-bottom:1px solid var(--mint-edge);color:var(--mint-ink)}
.learn__list li:last-child{border-bottom:0}
.learn__list li::before{content:"";position:absolute;left:.25rem;top:1.3rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--mint-ink-2)}

.steps__list{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s5)}
.step{display:grid;gap:var(--s2);align-content:start;padding-top:var(--s4);border-top:1px solid var(--line)}
.step__num{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--navy);color:var(--cream);font-family:var(--font-display);font-weight:700;font-size:1.125rem}
.step h3{margin-top:var(--s2)}
.step p{max-width:34ch}
.steps__go{margin-top:var(--s6)}

.campus__grid{display:grid;gap:var(--s5)}
.campus__list{list-style:none;margin:0;padding:0;display:grid}
.campus__list li{position:relative;padding:var(--s3) 0 var(--s3) 1.75rem;border-bottom:1px solid var(--line)}
.campus__list li::before{content:"";position:absolute;left:.25rem;top:1.3rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--navy)}

.safe{padding-block:var(--s6) var(--s7);margin:-1px 0}
.safe__grid{display:grid;gap:var(--s4)}
.safe__list{list-style:none;margin:0;padding:0}
.safe__list li{padding:var(--s3) 0;border-bottom:1px solid rgb(255 251 242 / .16);color:var(--cream)}
.safe__list li:last-child{border-bottom:0}

.faq-sec__grid{display:grid;gap:var(--s5)}

.where-sec__grid{display:grid;gap:var(--s6)}
.where-sec__info h2{margin-bottom:var(--s5)}
.where-sec__info .where{grid-template-columns:1fr;margin-bottom:var(--s5)}
.mapwrap{position:relative;overflow:hidden;min-height:18rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--tint-navy)}
.mapwrap iframe{display:block;width:100%;height:100%;min-height:18rem;border:0}
.mapfallback{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;background:var(--tint-navy);color:var(--navy);text-decoration:none;text-align:center;padding:var(--s4)}
.mapfallback span{font-family:var(--font-display);font-weight:600;font-size:var(--fs-md)}
.mapfallback small{color:var(--navy-2)}
.mapwrap.failed iframe{display:none}
.mapwrap.failed .mapfallback{display:flex}

.closing{background:var(--tint-lime);padding-block:var(--section-y)}
.closing__inner{display:grid;gap:var(--s4);max-width:46rem;margin-inline:auto;text-align:center}
.closing h2{color:var(--navy)}
.closing .lede{color:var(--lime-ink);margin-inline:auto}
.closing .cta-row{justify-content:center;margin-top:var(--s3);max-width:32rem;margin-inline:auto;width:100%}

/* 5d. INNER PAGES: page hero, programs, admissions, guide */
.page-hero{padding:var(--s7) 0 calc(var(--s6) + 1.5rem)}
.page-hero h1{color:var(--cream);font-size:var(--fs-2xl);max-width:16ch}
.page-hero .lede{margin-top:var(--s3);color:rgb(255 251 242 / .92);max-width:40ch}

.prog-intro{padding-block:var(--s6) var(--s7)}

.adm-form__grid{display:grid;gap:var(--s6)}
.adm-form__text>*+*{margin-top:var(--s4)}
.form-status{margin-top:var(--s3);color:var(--error);font-weight:600;font-size:var(--fs-sm)}
.enquiry .field__help+.btn{margin-top:var(--s2)}

.ask{padding-block:var(--s7)}
.ask__more{margin-top:var(--s6)}

.guide-intro{padding-block:var(--s6) var(--s2)}
.guide-block{padding-block:var(--s7)}
.guide-block--tint{background:var(--tint-sand)}
.guide-block__grid{display:grid;gap:var(--s5)}
.guide-block__head h2{max-width:16ch}
.guide-kicker{margin:0 0 var(--s2);font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-quiet)}
.guide-block .prose h3{font-size:var(--fs-md);margin-top:var(--s5);margin-bottom:var(--s2)}
.guide-block__prose{margin-top:var(--s6)}
.guide-list{list-style:none;margin:var(--s3) 0 0;padding:0}
.guide-list li{position:relative;padding:.5rem 0 .5rem 1.5rem}
.guide-list li::before{content:"";position:absolute;left:.15rem;top:1.05rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--navy)}
.guide-list--check li{padding-block:.4375rem}
.guide-pack{display:grid;gap:var(--s4)}
.guide-pack__card{padding:var(--s5);background:var(--card);border:1px solid var(--line);border-radius:var(--r-md)}
.guide-pack__card h3{display:flex;align-items:center;gap:.5rem;margin:0;font-size:var(--fs-md)}
.guide-pack__card h3 .icon{flex:none;width:1.375rem;height:1.375rem;padding:.25rem;border-radius:50%;background:var(--tint-lime);color:var(--lime-ink)}
.guide-steps{margin:0;padding:0;list-style:none;counter-reset:g;display:grid;gap:var(--s4)}
.guide-steps li{counter-increment:g;position:relative;padding-left:3rem;max-width:var(--measure)}
.guide-steps li::before{content:counter(g);position:absolute;left:0;top:.1rem;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--navy);color:var(--cream);font-family:var(--font-display);font-weight:700;font-size:1rem}
.guide-steps strong{color:var(--navy)}
.guide-note{margin-top:var(--s6);padding:var(--s4) var(--s5);background:var(--tint-lime);color:var(--lime-ink);border-radius:var(--r-md);max-width:44rem;line-height:1.55}
.guide-note__tag{display:inline-block;margin:0 .5rem .25rem 0;padding:.25rem .625rem;border-radius:var(--r-pill);background:var(--lime-ink);color:var(--tint-lime);font-weight:700;font-size:var(--fs-xs);vertical-align:.05em}

.guide-toc{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.guide-toc__tile{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);border-radius:var(--r-md);text-decoration:none;transition:transform var(--dur-press) var(--ease-out),box-shadow var(--dur-ui) var(--ease-out)}
.guide-toc__num{flex:none;font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);opacity:.8}
.guide-toc__body{display:grid;gap:.125rem}
.guide-toc__body strong{font-family:var(--font-display);font-weight:600;font-size:var(--fs-base);color:inherit}
.guide-toc__body span{font-size:var(--fs-sm);opacity:.85}
.guide-toc__tile--lime{background:var(--tint-lime);color:var(--lime-ink)}
.guide-toc__tile--navy{background:var(--tint-navy);color:var(--navy)}
.guide-toc__tile--sand{background:var(--tint-sand);color:var(--sand-ink)}
.guide-toc__tile--mint{background:var(--tint-mint);color:var(--mint-ink)}
.guide-toc__tile.is-current{box-shadow:0 0 0 2px currentColor inset}
@media (hover:hover) and (pointer:fine){
  .guide-toc__tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
}
@media (min-width:700px){.guide-toc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.guide-toc{grid-template-columns:repeat(4,minmax(0,1fr))}.guide-toc__tile{flex-direction:column;align-items:flex-start;gap:var(--s2)}}
@media (prefers-reduced-motion:reduce){.guide-toc__tile{transition:none}}

@media (min-width:900px){
  .page-hero{padding:var(--s8) 0 calc(var(--s7) + 1.5rem)}
  .prog-intro__grid{grid-template-columns:1.4fr 1fr;align-items:end;gap:var(--s7);max-width:none}
  .adm-form__grid{grid-template-columns:1fr 26rem;gap:var(--s8);align-items:start}
  .guide-block__grid{grid-template-columns:.8fr 1.2fr;gap:var(--s8);align-items:start}
  .guide-block__head{position:sticky;top:6rem}
  .guide-pack{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 6. PHOTO FRAME ----------------------------------------- */
.frame{position:relative;margin:0;transform:rotate(var(--tilt,0deg));transform-origin:50% 60%}
.frame__paper{position:relative;padding:6px 6px 22px;background:var(--card);border-radius:var(--r-photo);box-shadow:var(--shadow-card)}
.frame__paper img,.frame__ph{display:block;width:100%;height:auto;aspect-ratio:var(--ratio,4/3);object-fit:cover;background:var(--ph);border-radius:2px}
.frame__ph{display:grid;place-items:center;padding:var(--s3)}
.frame::before{content:"";position:absolute;z-index:1;top:-.5rem;left:1.25rem;width:3.5rem;height:1.125rem;background:var(--tape,var(--lime-soft));opacity:.82;transform:rotate(-6deg)}
.frame--tape-mint{--tape:var(--tint-mint)}
.frame--tape-sand{--tape:var(--tint-sand)}
.frame--tape-navy{--tape:var(--edge-navy)}
.frame figcaption{margin-top:var(--s3);font-size:var(--fs-sm);font-style:italic;line-height:1.5;color:var(--ink);max-width:36ch}
.frame figcaption time{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;color:var(--navy)}

/* 7. DIVIDERS -------------------------------------------- */
.cloud{display:block;width:100%;height:26px;margin-top:-1px}
.cloud--cream{color:var(--cream)}
.cloud--navy{color:var(--navy)}
.cloud--flip{transform:scaleY(-1);margin-top:0;margin-bottom:-1px}
.cloud--over{position:relative;z-index:1;margin-top:-25px}
.feet{padding:var(--s6) var(--gutter) var(--s3)}
.feet svg{width:100%;max-width:26rem;height:1.875rem;margin-inline:auto}

/* 8. FACTS, PEOPLE, FAQ, QUOTE, ADDRESS ------------------ */
.facts{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);border-block:1px solid var(--line);padding-block:var(--s4)}
.facts li{display:flex;align-items:baseline;gap:.625rem;font-size:var(--fs-base);color:var(--ink)}
.facts strong{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);line-height:1;color:var(--navy);min-width:1.25ch}

.people{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5)}
.person{display:flex;align-items:center;gap:var(--s4)}
.person__face{flex:none;width:4.5rem;height:4.5rem;border-radius:50%;overflow:hidden;background:var(--tint-navy);display:grid;place-items:center}
.person__face img{width:100%;height:100%;object-fit:cover}
.person__initial{font-family:var(--font-display);font-weight:700;font-size:1.75rem;color:var(--navy)}
.person__name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);color:var(--navy);line-height:1.2}
.person__line{font-size:var(--fs-sm);color:var(--text-quiet);line-height:1.45;margin-top:.125rem}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);padding:var(--s4) 0;font-weight:600;font-size:var(--fs-base);color:var(--ink);cursor:pointer;list-style:none;min-height:3.25rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{margin-top:.25rem;color:var(--navy)}
.faq summary .icon--minus{display:none}
.faq details[open] summary .icon--plus{display:none}
.faq details[open] summary .icon--minus{display:block}
.faq details>p{padding:0 0 var(--s4);color:var(--ink);max-width:var(--measure)}

.quote{margin:0;max-width:var(--max-text)}
.quote blockquote{font-family:var(--font-display);font-weight:500;font-size:var(--fs-xl);line-height:1.2;letter-spacing:-.02em;color:var(--navy);text-wrap:balance}
.quote figcaption{margin-top:var(--s4);font-size:var(--fs-sm);color:var(--text-quiet)}

.where{display:grid;gap:var(--s4)}
.where dt{font-size:var(--fs-xs);font-weight:600;color:var(--text-quiet)}
.where dd{font-size:var(--fs-base);color:var(--ink)}
.where .addr-line{display:block}

/* 9. FORM ------------------------------------------------ */
.field{display:grid;gap:.375rem;margin-bottom:var(--s4)}
.field label{font-weight:600;font-size:var(--fs-sm);color:var(--ink)}
.field__help{font-size:var(--fs-xs);color:var(--text-quiet)}
.field input,.field select{width:100%;min-height:3.25rem;padding:0 var(--s4);border:1.5px solid var(--field-edge);border-radius:var(--r-sm);background:var(--card);font:400 var(--fs-base)/1.2 var(--font-body);color:var(--ink);transition:border-color var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) var(--ease-out)}
.field input::placeholder{color:var(--muted);opacity:1}
.field input:focus,.field select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--tint-navy),0 0 0 4.5px var(--navy)}
.field input[disabled]{background:var(--tint-sand);color:var(--muted);cursor:not-allowed}
.field.has-error input,.field.has-error select{border-color:var(--error);border-width:2px}
.field__error{display:flex;gap:.375rem;align-items:flex-start;font-size:var(--fs-sm);font-weight:600;color:var(--error)}
.field__error .icon{margin-top:.125rem}
.form-done{padding:var(--s5);background:var(--tint-mint);color:var(--mint-ink);border-radius:var(--r-md);font-weight:600}

/* 10. FOOTER + STICKY BAR -------------------------------- */
.site-footer{background:var(--navy);color:var(--cream);padding:var(--s6) var(--gutter) calc(var(--s7) + 3.5rem)}
.site-footer__inner{display:grid;gap:var(--s5);max-width:var(--max);margin-inline:auto}
.site-footer__logo{width:80px;height:80px;border-radius:50%}
.site-footer__name{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);color:var(--lime-soft);margin-bottom:var(--s2)}
.site-footer__body p,.site-footer__addr{font-size:var(--fs-sm);color:rgb(255 251 242 / .86);margin-top:.25rem}
.site-footer__addr{display:block}
.site-footer__addr .addr-line{display:block}
.site-footer a{color:var(--cream);display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;min-width:2.75rem}
.site-footer__body p a{display:inline-flex;min-height:2.75rem}
.site-footer__legal{display:flex;gap:var(--s5);font-size:var(--fs-sm)}
.site-footer__credit{max-width:var(--max);margin:var(--s5) auto 0;padding:var(--s4) 0 calc(4.5rem + env(safe-area-inset-bottom));border-top:1px solid rgb(255 251 242 / .15);text-align:center;font-size:var(--fs-xs);color:rgb(255 251 242 / .86)}
.site-footer__credit a{display:inline;min-height:0;min-width:0;color:inherit;text-decoration:underline;text-underline-offset:2px}
.page-body{padding-block:var(--s7)}

.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;padding-bottom:env(safe-area-inset-bottom);background:var(--navy)}
.js .sticky-bar{transform:translateY(100%);transition:transform 200ms var(--ease-out)}
.js .sticky-bar.is-shown{transform:none;transition-duration:350ms}
.sticky-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.5rem;font-weight:600;font-size:1rem;text-decoration:none;transition:transform var(--dur-press) var(--ease-out)}
.sticky-bar a:active{transform:scale(.97)}
.sticky-bar__call{background:var(--navy);color:var(--cream)}
.sticky-bar__wa{background:var(--lime);color:var(--on-lime)}

/* 11. MOTION: one authored moment, the strip; the rest is quiet */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}
.js .strip .pcard{opacity:0;transform:translateY(16px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.js .strip.in .pcard{opacity:1;transform:none}
.js .strip.in .pcard:nth-child(1){transition-delay:60ms}
.js .strip.in .pcard:nth-child(2){transition-delay:140ms}
.js .strip.in .pcard:nth-child(3){transition-delay:220ms}
.js .strip.in .pcard:nth-child(4){transition-delay:300ms}
.js .strip.in .pcard:nth-child(5){transition-delay:380ms}
.js .strip.in .pcard:nth-child(6){transition-delay:460ms}
.js .frame.reveal{transform:rotate(0) translateY(16px) scale(.98)}
.js .frame.reveal.in{transform:rotate(var(--tilt,0deg))}
.js .feet .foot{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6)}
.js .feet.in .foot{animation:step .4s var(--ease-out) forwards;animation-delay:calc(var(--i) * 90ms)}
@keyframes step{to{opacity:1;transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mapwrap::before{animation:none!important}
  .btn--call{transform:none!important}
  .js .hero .line>span,.js .hero__sub,.js .hero .cta-row{animation:none!important;opacity:1!important;transform:none!important}
  .scene-cloud,.scene-sun{animation:none!important}
  .scene-foot{animation:none!important;opacity:1!important}
  .js .hero-frame{animation:none!important;opacity:1!important;transform:rotate(var(--tilt,0deg))!important}
  .js .strip::before{clip-path:none!important;transition:none!important}
  .js .reveal,.js .strip .pcard{transform:none!important;transition:opacity 250ms ease-out!important}
  .js .frame.reveal{transform:rotate(var(--tilt,0deg))!important}
  .js .feet .foot{opacity:1!important;transform:none!important;animation:none!important}
  .js .sticky-bar,.btn,.sticky-bar a{transition:none!important}
  .btn.is-loading::after{animation-duration:2s}
}

/* 12. DESKTOP -------------------------------------------- */
@media (min-width:768px){
  .brand__mark{width:38px;height:38px}
  .cta-row .btn{min-height:3.5rem;font-size:1.0625rem}
  .facts{grid-template-columns:repeat(3,auto);justify-content:space-between;gap:var(--s6)}
  .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
  .person__face{width:5.5rem;height:5.5rem}
  .where{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer{padding-bottom:var(--s7)}
  .site-footer__inner{grid-template-columns:auto 1fr auto;align-items:start;gap:var(--s7)}
  .site-footer__legal{flex-direction:column;gap:var(--s2)}
  .sticky-bar{left:50%;right:auto;width:min(100%,28rem);border-radius:var(--r-md) var(--r-md) 0 0;overflow:hidden;transform:translateX(-50%)}
  .js .sticky-bar{transform:translate(-50%,100%)}
  .js .sticky-bar.is-shown{transform:translate(-50%,0)}
}

@media (min-width:900px){
  .hero__navy{padding:var(--s8) 0 calc(var(--s8) + 1.5rem);min-height:min(34rem,72vh)}
  .hero h1{max-width:9ch;margin-bottom:var(--s4)}
  .hero__sub{font-size:var(--fs-lg);max-width:26ch;margin-bottom:var(--s6)}
  .hero__navy--scene{flex-direction:row;align-items:flex-end;padding-top:var(--s8)}
  .hero__navy--scene .hero__media{position:absolute;inset:0;height:auto;margin:0}
  .hero__scene--m{display:none}
  .hero__scene--d{display:block}
  .hero--photos .hero__navy--scene .hero__media{height:auto}
  .hero__photos{left:auto;right:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)));width:min(46%,34rem)}
  .hero-frame .frame__paper{padding:6px 6px 18px}
  .hero-frame::before{width:3.25rem;height:1rem;top:-.5rem;left:1.25rem}
  .hero-frame--1{width:15rem;left:auto;right:13rem;top:2.5rem}
  .hero-frame--2{width:12rem;left:auto;right:0;top:9.5rem}
  .hero-frame--3{width:10rem;left:0;top:auto;bottom:4.25rem}
  .cloud--over{margin-top:-25px}
  .home-facts{padding-bottom:var(--s7)}
  .philosophy__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:var(--s7)}
  .philosophy h2{max-width:12ch}
  .routine .lede{margin-bottom:var(--s7)}
}

/* the strip runs across the page as a rail of cards */
@media (min-width:900px){
  .strip{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s4);padding-top:3rem}
  .strip::before{top:calc(1rem - 12px);bottom:auto;left:0;right:0;width:auto;height:24px;background:var(--foot-h) repeat-x left center}
  .js .strip::before{clip-path:inset(0 100% 0 0)}
  .js .strip.in::before{clip-path:inset(0)}
  .pcard{display:block}
  .pcard__tab{position:absolute;top:-3rem;left:0;margin:0}
  .pcard__card{flex-direction:column;align-items:stretch;height:100%;padding:var(--s3)}
  .pcard__thumb{width:100%;height:auto;aspect-ratio:4/3}
  .pcard__icon{width:2.5rem;height:2.5rem}
  .pcard--call .pcard__card{justify-content:space-between}
}

@media (min-width:1100px){
  .nav-toggle{display:none}
  .site-nav,.js .site-nav{display:flex;align-items:center;gap:var(--s6);position:static;background:none;border:0;box-shadow:none;padding:0}
  .nav-list{display:flex;gap:var(--s5)}
  .nav-list a{padding:.75rem 0;font-size:1rem;font-weight:600;border:0}
  .nav-call{margin:0;width:auto}
}

@media (min-width:900px){
  .gpeek{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
  .gpeek__item:nth-child(even){margin-top:0}
  .gpeek__item--2{margin-top:3.5rem!important}
  .gpeek__item--3{margin-top:1rem}
  .gpeek__item--4{margin-top:4.5rem!important}
  .leaders{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8)}
  .leader{grid-template-columns:14rem minmax(0,1fr);gap:var(--s6)}
  .leader__photo{width:100%}
  .leaders--one{grid-template-columns:1fr;max-width:52rem}
  .leaders--one .leader{grid-template-columns:18rem minmax(0,1fr);gap:var(--s7);align-items:center}
  .leader--solo{grid-template-columns:1fr}
  .leader--solo .leader__photo{width:min(100%,19rem)}
  .stairs{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:var(--s3)}
  .stair{width:auto}
  .stair a{align-content:end;min-height:calc(9rem + var(--step) * 3.5rem);padding:var(--s5)}
  .teachers__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
  .teacher:nth-child(even){margin-top:3rem}
  .learn{padding-block:var(--s8)}
  .learn__grid{grid-template-columns:.9fr 1.1fr;gap:var(--s8);align-items:start}
  .learn__list li{padding-block:var(--s4);font-size:var(--fs-md)}
  .learn__list li::before{top:1.6rem}
  .steps__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7)}
  .campus__grid{grid-template-columns:.8fr 1.2fr;gap:var(--s8);align-items:start}
  .campus__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s6)}
  .safe{padding-block:var(--s7) var(--s8)}
  .safe__grid{grid-template-columns:.9fr 1.1fr;gap:var(--s8);align-items:center}
  .safe__list li{font-size:var(--fs-md)}
  .faq-sec__grid{grid-template-columns:.8fr 1.2fr;gap:var(--s8);align-items:start}
  .where-sec__grid{grid-template-columns:.9fr 1.1fr;gap:var(--s7);align-items:stretch}
}

/* campus: pills instead of another headline-and-list block */
.campus__list{display:flex!important;flex-wrap:wrap;gap:var(--s2)!important}
.campus__list li{padding:.625rem 1.125rem;border:0;border-radius:var(--r-pill);font-weight:600;line-height:1.3}
.campus__list li::before{display:none}
.campus__list li:nth-child(4n+1){background:var(--tint-navy);color:var(--navy)}
.campus__list li:nth-child(4n+2){background:var(--tint-lime);color:var(--lime-ink)}
.campus__list li:nth-child(4n+3){background:var(--tint-sand);color:var(--sand-ink)}
.campus__list li:nth-child(4n+4){background:var(--tint-mint);color:var(--mint-ink)}
@media (min-width:900px){.campus__list{grid-template-columns:none}.campus__list li{font-size:var(--fs-md);padding:.75rem 1.375rem}}

/* map skeleton until the frame loads */
.mapwrap::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgb(255 255 255 / .55) 50%,transparent 70%) var(--tint-navy);background-size:220% 100%;animation:shimmer 1.6s linear infinite;transition:opacity .4s var(--ease-out)}
.mapwrap.loaded::before,.mapwrap.failed::before{opacity:0;animation:none}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}

/* the footprint rail draws as you scroll, where the browser supports it */
@supports (animation-timeline: view()){
  .js .strip::before{clip-path:inset(0 0 100% 0);transition:none;animation:railwalk linear both;animation-timeline:view();animation-range:entry 5% cover 45%}
  @keyframes railwalk{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
  @media (min-width:900px){
    .js .strip::before{clip-path:inset(0 100% 0 0);animation-name:railwalkx}
    @keyframes railwalkx{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
  }
}

/* Emil pass: press feedback, menu entry, FAQ open and close, heading to intro stagger */
.faq summary,.nav-toggle{transition:transform var(--dur-press) var(--ease-out)}
.faq summary:active{transform:scale(.99)}
.nav-toggle:active{transform:scale(.92)}
.js .site-nav.is-open{animation:navIn 200ms var(--ease-out)}
@keyframes navIn{from{opacity:0;transform:translateY(-8px)}}
@media (min-width:1100px){.js .site-nav.is-open{animation:none}}
.js h2.reveal+.lede.reveal,.js h2.reveal+p.reveal{transition-delay:90ms}
.js .cta-row.reveal{transition-delay:120ms}
@supports (interpolate-size: allow-keywords) and selector(::details-content){
  .faq details{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size 240ms var(--ease-out),opacity 200ms var(--ease-out),content-visibility 240ms allow-discrete}
  .faq details[open]::details-content{block-size:auto;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .js .site-nav.is-open{animation:none}
  .faq details::details-content{transition:none}
  .faq summary:active,.nav-toggle:active{transform:none}
}

/* tap targets: 44px minimum */
.guide-toc .chip{display:inline-flex;align-items:center;min-height:2.75rem;padding-inline:1rem}

/* 5e. HOME REWORK: hero contact line, Call card face, merged safety band, learn chips */
.hero__contact{margin-top:var(--s4);font-size:var(--fs-sm);color:rgb(255 251 242 / .88);font-variant-numeric:tabular-nums}
.hero__contact{display:flex;flex-direction:column;gap:.125rem}
.hero__contact>span[aria-hidden]{display:none}
.classes .learns li{font-size:var(--fs-sm);padding:.4rem .875rem}
.js .hero__contact{opacity:0;animation:fadeup 700ms var(--ease-out) 520ms forwards}
.pcard__face{display:block;width:3rem;height:3rem;border-radius:50%;overflow:hidden;border:2px solid var(--cream);box-shadow:var(--shadow-card)}
.pcard__face img{width:100%;height:100%;object-fit:cover}
.safe--wide .lede{color:rgb(255 251 242 / .88);margin-top:var(--s3)}
.safe__chips{list-style:none;margin:var(--s5) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.safe__chips li{padding:.5rem 1rem;border-radius:var(--r-pill);background:rgb(255 251 242 / .1);border:1px solid rgb(255 251 242 / .22);color:var(--cream);font-weight:600;font-size:var(--fs-sm);line-height:1.3}
.classes .learns{margin:var(--s4) 0 var(--s5)}
@media (min-width:600px){.hero__contact{flex-direction:row;gap:0}.hero__contact>span[aria-hidden]{display:inline;margin:0 .5rem}}
@media (min-width:900px){
  .classes .learns{max-width:52rem}
  .classes .learns li{font-size:var(--fs-base);padding:.5rem 1.125rem}
}
@media (prefers-reduced-motion:reduce){.js .hero__contact{animation:none!important;opacity:1!important}}
@media (min-width:900px){.hero__contact{margin-bottom:var(--s6)}}

/* 5f. Safety band as a full-width row, two-column FAQ */
.safe__head{max-width:40rem}
.safe--wide .safe__list{margin-top:var(--s5)}
@media (min-width:900px){
  .safe--wide .safe__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s5);margin-top:var(--s6)}
  .safe--wide .safe__list li{border:0;border-top:2px solid var(--lime-soft);padding:var(--s3) 0 0;font-size:var(--fs-base);line-height:1.4}
  .safe--wide .safe__chips{margin-top:var(--s6)}
  .faq-sec__grid{grid-template-columns:1fr;gap:var(--s6)}
  .faq-sec__head{max-width:40rem}
  .faq{border-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s7);align-items:start}
  .faq details{border-top:1px solid var(--line);border-bottom:0}
  .faq details:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
}

/* 6. GALLERY: filters, frames, viewer, videos */
.gal__filters{margin:var(--s5) 0 var(--s6)}
.gal__filters .chip{border:0;cursor:pointer;font-family:inherit;min-height:2.75rem;padding-inline:1.125rem;transition:transform var(--dur-press) var(--ease-out)}
.gal__filters .chip[aria-pressed="true"]{background:var(--navy);color:var(--cream)}
.gal__filters .chip:active{transform:scale(.97)}
.gal__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s4);padding-top:var(--s3)}
.gal__item:nth-child(4n+1){--tilt:-1.5deg}
.gal__item:nth-child(4n+2){--tilt:1.25deg}
.gal__item:nth-child(4n+3){--tilt:-1deg}
.gal__item:nth-child(4n+4){--tilt:2deg}
.gal__item[hidden]{display:none}
.gal__btn{display:block;text-decoration:none;color:inherit;border-radius:var(--r-photo);cursor:zoom-in}
.gal__btn .frame__paper{display:block}
.gal__btn img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:2px;display:block}
.gal__btn:focus-visible{outline-offset:6px}
.gal__more{margin-top:var(--s6);text-align:center}
.gal__more[hidden],.gal__more button[hidden]{display:none}
.gal-vid{background:var(--tint-sand);padding-block:var(--s7)}
.vids{display:grid;gap:var(--s5);margin-top:var(--s5)}
.vid__btn{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:var(--navy);box-shadow:var(--shadow-card)}
.vid__btn img,.vid iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.vid iframe{aspect-ratio:16/9;border-radius:var(--r-md)}
.vid__play{position:absolute;inset:0;display:grid;place-items:center;color:var(--cream)}
.vid__play::before{content:"";position:absolute;width:4.25rem;height:4.25rem;border-radius:50%;background:var(--navy);opacity:.88;transition:transform var(--dur-press) var(--ease-out)}
.vid__play .icon{position:relative;width:1.75rem;height:1.75rem;margin-left:.15rem}
.vid__btn:hover .vid__play::before{transform:scale(1.06)}
.vid__btn:active .vid__play::before{transform:scale(.96)}
.vid__title{margin-top:var(--s3);font-weight:600;color:var(--navy)}
.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;color:var(--cream)}
.lightbox::backdrop{background:rgb(15 30 60 / .92)}
.lightbox[open]{display:grid;place-items:center}
.lightbox__fig{margin:0;max-width:min(92vw,52rem);display:grid;gap:var(--s3);justify-items:center}
.lightbox__fig img{max-width:100%;max-height:78dvh;width:auto;height:auto;border-radius:var(--r-photo);background:var(--card);padding:6px}
.lightbox__fig figcaption{text-align:center;font-size:var(--fs-sm);max-width:44ch;min-height:1.5em}
.lightbox__btn{position:absolute;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;border:1px solid rgb(255 251 242 / .4);background:rgb(31 58 104 / .9);color:var(--cream);font-size:1.75rem;line-height:1;cursor:pointer;transition:transform var(--dur-press) var(--ease-out)}
.lightbox__btn:active{transform:scale(.94)}
.lightbox__close{top:var(--s3);right:var(--s3)}
.lightbox__prev,.lightbox__next{top:50%;margin-top:-1.5rem}
.lightbox__prev{left:var(--s3)}
.lightbox__next{right:var(--s3)}
.lightbox__btn:focus-visible{outline-color:var(--lime-soft)}

/* 7. DIARY, LEGAL, 404 */
.diary{padding-block:var(--s6) var(--s7)}
.diary__topics{margin:0 0 var(--s6)}
.diary__topics .chip{display:inline-flex;align-items:center;min-height:2.75rem;padding-inline:1.125rem;text-decoration:none}
.diary__topics .chip.is-current{background:var(--navy);color:var(--cream)}
.diary__list{display:grid;gap:var(--s6)}
.navigation.pagination{margin-top:var(--s6)}
.navigation.pagination .nav-links{display:flex;gap:var(--s2);flex-wrap:wrap}
.navigation.pagination a,.navigation.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;padding-inline:1rem;border-radius:var(--r-pill);background:var(--tint-navy);color:var(--navy);text-decoration:none;font-weight:600}
.navigation.pagination .current{background:var(--navy);color:var(--cream)}
.diary-post{padding-block:var(--s6) var(--s7)}
.diary-post__grid{display:grid;gap:var(--s5)}
.diary-post__photo{max-width:20rem}
.diary-post__nav{margin-top:var(--s6)}
.legal{padding-block:var(--s6) var(--s7)}
.legal .prose h2{font-size:var(--fs-lg);margin-top:var(--s6);margin-bottom:var(--s2)}
.notfound{padding-block:var(--s6) var(--s7)}
@media (min-width:600px){
  .gal__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6) var(--s5)}
  .vids{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vids--one{grid-template-columns:minmax(0,44rem)}
}
@media (min-width:900px){
  .gal__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gal__item:nth-child(4n+2){margin-top:2.5rem}
  .gal__item:nth-child(4n+4){margin-top:1.5rem}
  .diary-post__grid{grid-template-columns:20rem minmax(0,1fr);gap:var(--s7);align-items:start}
  .diary-post__grid--full{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.gal__filters .chip,.lightbox__btn,.vid__play::before{transition:none}}

/* 8. DIARY: cards with a tinted placeholder for text-only weeks, lead post, read more, post nav */
.dpost{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-card);transition:transform 320ms var(--ease-out),box-shadow 320ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .dpost:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
}
.dpost__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden}
.dpost__media img{width:100%;height:100%;display:block;object-fit:cover}
.dpost__ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.dpost__ph svg{width:2.75rem;height:2.75rem;stroke-width:1.3}
.dpost--lime .dpost__media{background:var(--tint-lime)}
.dpost--lime .dpost__ph{color:var(--lime-ink)}
.dpost--navy .dpost__media{background:var(--tint-navy)}
.dpost--navy .dpost__ph{color:var(--navy)}
.dpost--sand .dpost__media{background:var(--tint-sand)}
.dpost--sand .dpost__ph{color:var(--sand-ink)}
.dpost--mint .dpost__media{background:var(--tint-mint)}
.dpost--mint .dpost__ph{color:var(--mint-ink)}
.dpost__body{display:flex;flex-direction:column;flex:1;gap:var(--s2);padding:var(--s4) var(--s4) var(--s5)}
.dpost__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);font-size:var(--fs-sm);color:var(--text-quiet);font-variant-numeric:tabular-nums}
.dpost__topic{padding:.125rem .625rem;border-radius:var(--r-pill);background:var(--tint-sand);color:var(--sand-ink);font-weight:600;font-size:var(--fs-xs)}
.dpost h3{margin:0;font-size:var(--fs-md);line-height:1.25}
.dpost h3 a{text-decoration:none;color:var(--navy)}
.dpost h3 a:hover{text-decoration:underline}
.dpost__sum{margin:0;color:var(--text-quiet);max-width:var(--measure);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.dpost__read{margin-top:auto;padding-top:var(--s2)}
.dpost__read a{font-weight:600;color:var(--navy);display:inline-flex;align-items:center;gap:.3rem;min-height:2.75rem}
.dpost__read a .icon{width:1rem;height:1rem;transition:transform var(--dur-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .dpost__read a:hover .icon{transform:translateX(3px)}
}
.dpost--lead{grid-column:1/-1}
.dpost--lead .dpost__media{aspect-ratio:16/9}
.dpost--lead h3{font-size:var(--fs-xl);line-height:1.15}
.dpost--lead .dpost__sum{font-size:var(--fs-md);-webkit-line-clamp:2}
.diary-post__nav{display:flex;flex-wrap:wrap;gap:var(--s3)}
.diary-post .prose ul,.diary-post .prose ol{padding-left:1.25rem}
.diary-post .prose li+li{margin-top:var(--s2)}
@media (min-width:700px){
  .diary__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s7)}
  .dpost--lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dpost--lead .dpost__media{aspect-ratio:auto;height:100%}
  .dpost--lead .dpost__body{justify-content:center}
}
@media (min-width:1000px){
  .diary__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* 8b. Diary cards stagger in, one after another, as the grid comes into view */
.js .dpost{opacity:0;transform:translateY(16px);transition:opacity 480ms var(--ease-out),transform 480ms var(--ease-out);transition-delay:calc(var(--n,0) * 90ms)}
.js .diary__list.in .dpost{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){
  .js .diary__list.in .dpost:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);transition-delay:0ms}
}
@media (prefers-reduced-motion:reduce){.js .dpost{opacity:1;transform:none;transition:box-shadow 320ms var(--ease-out)}}

/* 9. MOTION. Thesis: the school's picture schedule. Things are hung, placed and stepped, never slid around.
   Only transform, opacity, stroke-dashoffset and clip-path move. Reduced motion keeps opacity and drops movement. */

/* 9a. Page to page: the header and Call bar stay put, the rest cross-fades (browsers that support it) */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
.sticky-bar{view-transition-name:sticky-bar}
::view-transition-old(root),::view-transition-new(root){animation-duration:180ms;animation-timing-function:var(--ease-out)}

/* 9b. Hero: a marker scribble is drawn under "steps", and the photos lean a little toward the pointer */
.hero h1 em{position:relative;display:inline-block}
.hero .line:nth-child(2){padding-bottom:.34em;margin-bottom:-.34em}
.scribble{position:absolute;left:-2%;bottom:-.2em;width:104%;height:.32em;overflow:visible;pointer-events:none}
.scribble path{fill:none;stroke:var(--lime-soft);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.js .scribble path{stroke-dashoffset:1;animation:draw 700ms var(--ease-out) 950ms forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (hover:hover) and (pointer:fine){
  .hero-frame{translate:calc(var(--px,0) * var(--d,10) * 1px) calc(var(--py,0) * var(--d,10) * 1px);transition:translate 400ms var(--ease-out)}
  .hero-frame--1{--d:-10}
  .hero-frame--2{--d:14}
  .hero-frame--3{--d:-16}
}

/* 9c. The picture strip: each card is hung on the felt, swings once and settles */
.js .strip .pcard{opacity:0;transform-origin:50% 0;transition:none}
.js .strip.in .pcard{animation:hang 720ms var(--ease-out) both;animation-delay:calc(80ms + var(--n,0) * 95ms)}
.js .strip .pcard:nth-child(1){--n:0;--sw:-3deg}
.js .strip .pcard:nth-child(2){--n:1;--sw:2.5deg}
.js .strip .pcard:nth-child(3){--n:2;--sw:-2.5deg}
.js .strip .pcard:nth-child(4){--n:3;--sw:3deg}
.js .strip .pcard:nth-child(5){--n:4;--sw:-2.5deg}
.js .strip .pcard:nth-child(6){--n:5;--sw:2deg}
@keyframes hang{
  0%{opacity:0;transform:translateY(-18px) rotate(var(--sw,-3deg))}
  40%{opacity:1;transform:translateY(0) rotate(calc(var(--sw,-3deg) * -.5))}
  70%{transform:rotate(calc(var(--sw,-3deg) * .18))}
  100%{opacity:1;transform:none}
}

/* 9d. The classes climb like stairs, left to right */
.js .stairs .stair{opacity:0;transform:translateY(24px) scaleY(.88);transform-origin:50% 100%;transition:opacity 520ms var(--ease-out),transform 620ms var(--ease-out)}
.js .stairs.in .stair{opacity:1;transform:none;transition-delay:calc(140ms + var(--step) * 120ms)}

/* 9e. Admission steps: the numbers are pressed on one after another */
.js .step__num{opacity:0;transform:scale(.6)}
.js .steps__list.in .step__num{animation:pop 520ms var(--ease-out) both;animation-delay:calc(120ms + var(--k,0) * 170ms)}
.step:nth-child(1){--k:0}
.step:nth-child(2){--k:1}
.step:nth-child(3){--k:2}
@keyframes pop{0%{opacity:0;transform:scale(.6)}65%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}

/* 9f. Photos are picked up: on a mouse, a frame straightens and lifts a little */
@media (hover:hover) and (pointer:fine){
  .js .frame.reveal.in:hover{transform:translateY(-6px) rotate(calc(var(--tilt,0deg) * .25));transition-duration:var(--dur-reveal),240ms}
  .js .frame.reveal.in{transition-duration:var(--dur-reveal),380ms}
}

/* 9g. The photo viewer opens from the centre; its backdrop fades */
.lightbox[open] .lightbox__fig{animation:lbin 220ms var(--ease-out)}
.lightbox[open]::backdrop{animation:lbfade 200ms ease-out}
@keyframes lbin{from{opacity:0;transform:scale(.96)}}
@keyframes lbfade{from{opacity:0}}

/* 9h. The Call bar rings once the first time it appears, then never again */
.sticky-bar__call{position:relative;overflow:hidden}
.sticky-bar.ring .sticky-bar__call::after{content:"";position:absolute;inset:0;background:rgb(255 251 242 / .16);border-radius:inherit;transform:scale(.4);opacity:0;animation:ring 1100ms var(--ease-out) 500ms 2 both}
@keyframes ring{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}

/* 9i. Enquiry sent: a tick is drawn */
.form-done{display:flex;align-items:center;gap:var(--s3);animation:fadeup 420ms var(--ease-out)}
.form-done__tick{flex:none;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--mint-ink);color:var(--tint-mint);display:grid;place-items:center;animation:pop 520ms var(--ease-out) both}
.form-done__tick svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.form-done__tick path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 380ms var(--ease-out) 260ms forwards}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .js .scribble path{animation:none;stroke-dashoffset:0}
  .hero-frame{translate:none!important;transition:none}
  .js .strip.in .pcard{animation:fadein 250ms ease-out both;animation-delay:0ms}
  .js .stairs .stair{transform:none;transition:opacity 250ms ease-out}
  .js .stairs.in .stair{transition-delay:0ms}
  .js .step__num{opacity:1;transform:none}
  .js .steps__list.in .step__num{animation:none}
  .js .frame.reveal.in:hover{transform:rotate(var(--tilt,0deg))}
  .lightbox[open] .lightbox__fig,.lightbox[open]::backdrop{animation:fadein 150ms ease-out}
  .sticky-bar.ring .sticky-bar__call::after{animation:none}
  .form-done,.form-done__tick{animation:fadein 250ms ease-out both}
  .form-done__tick path{animation:none;stroke-dashoffset:0}
}
@keyframes fadein{from{opacity:0}}

/* Tablet and small laptop: keep the photos clear of the Call and WhatsApp buttons */
@media (min-width:900px) and (max-width:1239px){
  .hero__photos{width:min(42%,34rem)}
  .hero-frame--1{width:11.5rem;right:7.5rem;top:2rem}
  .hero-frame--2{width:9.5rem;top:8rem}
  .hero-frame--3{width:8rem;left:1.25rem;bottom:3.5rem}
}
@media (min-width:900px) and (max-width:1099px){
  .hero-frame--3{left:auto;right:10.5rem;bottom:3rem}
}

/* 10. PARENT QUOTES: index cards pinned to the felt, like the photos */
.notes-sec{padding-block:var(--s7)}
.notes{display:grid;gap:var(--s6);margin-top:var(--s6);padding-top:var(--s3)}
.note{position:relative;margin:0;padding:var(--s5) var(--s5) var(--s4);background:var(--card);border-radius:var(--r-photo);box-shadow:var(--shadow-card);transform:rotate(var(--tilt,0deg))}
.note::before{content:"";position:absolute;z-index:1;top:-.5rem;left:1.5rem;width:3.5rem;height:1.125rem;background:var(--tape,var(--lime-soft));opacity:.82;transform:rotate(-5deg)}
.note--mint{--tape:var(--tint-mint)}
.note--sand{--tape:var(--tint-sand)}
.note--navy{--tape:var(--edge-navy)}
.note blockquote{margin:0}
.note blockquote p{font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);line-height:1.35;color:var(--navy);max-width:34ch}
.note figcaption{margin-top:var(--s4);font-size:var(--fs-sm);color:var(--text-quiet)}
.js .note.reveal{transform:rotate(0) translateY(16px) scale(.98)}
.js .note.reveal.in{transform:rotate(var(--tilt,0deg))}
.notes--one{max-width:34rem}
@media (min-width:700px){
  .notes{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s6)}
  .notes--one{grid-template-columns:minmax(0,1fr)}
  .note:nth-child(even){margin-top:var(--s5)}
}
@media (min-width:1000px){
  .notes:not(.notes--one){grid-template-columns:repeat(3,minmax(0,1fr))}
  .note:nth-child(even){margin-top:var(--s6)}
}
@media (prefers-reduced-motion:reduce){.js .note.reveal,.js .note.reveal.in{transform:rotate(var(--tilt,0deg))!important}}
@media (min-width:1000px){
  .notes.notes--even{grid-template-columns:repeat(2,minmax(0,1fr));max-width:60rem}
}

/* 11. MOTION, second pass. Same rule: the picture-board world, and only cheap properties. */

/* 11a. A trail of footprints walks down the left edge as you read (wide screens, browsers with scroll timelines) */
.trail{display:none}
@media (min-width:1320px){
  @supports (animation-timeline: scroll()){
    body{position:relative}
    .trail{display:block;position:absolute;z-index:5;top:0;bottom:0;left:1rem;width:2.75rem;pointer-events:none;opacity:.7;
      background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='150' viewBox='0 0 44 150'%3E%3Cg transform='translate(13 40) rotate(-10) scale(1.3)' fill='%23EA86B6'%3E%3Cpath d='M-5.6 0C-5.6 -4 -3 -6.5 0 -6.5S5.6 -4 5.6 0C5.6 4.5 3.6 10 0 10S-5.6 4.5 -5.6 0Z'/%3E%3Ccircle cx='-4' cy='-9.4' r='1.8'/%3E%3Ccircle cx='-1.3' cy='-10.8' r='1.9'/%3E%3Ccircle cx='1.6' cy='-10.6' r='1.8'/%3E%3Ccircle cx='4.2' cy='-9' r='1.6'/%3E%3C/g%3E%3Cg transform='translate(31 115) rotate(10) scale(1.3)' fill='%2338ABDD'%3E%3Cpath d='M-5.6 0C-5.6 -4 -3 -6.5 0 -6.5S5.6 -4 5.6 0C5.6 4.5 3.6 10 0 10S-5.6 4.5 -5.6 0Z'/%3E%3Ccircle cx='-4' cy='-9.4' r='1.8'/%3E%3Ccircle cx='-1.3' cy='-10.8' r='1.9'/%3E%3Ccircle cx='1.6' cy='-10.6' r='1.8'/%3E%3Ccircle cx='4.2' cy='-9' r='1.6'/%3E%3C/g%3E%3C/svg%3E") repeat-y left top;
      clip-path:inset(0 0 100% 0);animation:trailwalk linear both;animation-timeline:scroll(root)}
  }
}
@keyframes trailwalk{to{clip-path:inset(0)}}

/* 11b. Header: a hairline and soft shadow appear once the page has moved */
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-shadow:0 10px 24px -14px rgb(15 30 60 / .65);opacity:0;transition:opacity var(--dur-ui) var(--ease-out)}
.site-header.is-scrolled::before{opacity:1}

/* 11c. Photos develop: grey and soft first, then full colour as the frame settles */
.js .frame.reveal img{filter:grayscale(.9) blur(2.5px);transition:filter 1000ms var(--ease-out) 150ms}
.js .frame.reveal.in img{filter:none}

/* 11d. Call button: a light sweep on hover, once at load in the hero and once when the closing block arrives */
.btn--call{position:relative;overflow:hidden;isolation:isolate}
.btn--call::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgb(255 255 255 / .42),transparent);transform:translateX(-140%) skewX(-18deg);pointer-events:none}
.btn--call.sheen::after{animation:sheen 900ms var(--ease-out) 1}
.btn--call .icon{transform-origin:50% 60%}
@keyframes sheen{to{transform:translateX(340%) skewX(-18deg)}}
@keyframes phonering{0%,100%{rotate:0deg}18%{rotate:-16deg}36%{rotate:14deg}54%{rotate:-9deg}72%{rotate:6deg}}
@media (hover:hover) and (pointer:fine){
  .btn--call:hover::after{animation:sheen 700ms var(--ease-out) 1}
  .btn--call:hover .icon{animation:phonering 520ms ease-out 1}
}

/* 11e. Parent notes are pinned on, one after another */
.js .note.reveal{opacity:0;transition:none}
.js .note.reveal.in{animation:pin 640ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 110ms)}
.note:nth-child(1){--i:0}
.note:nth-child(2){--i:1}
.note:nth-child(3){--i:2}
.note:nth-child(4){--i:3}
.note:nth-child(5){--i:4}
@keyframes pin{
  0%{opacity:0;transform:translateY(-16px) rotate(calc(var(--tilt,0deg) * -2.5)) scale(1.03)}
  60%{opacity:1;transform:translateY(2px) rotate(calc(var(--tilt,0deg) * 1.15)) scale(1)}
  100%{opacity:1;transform:rotate(var(--tilt,0deg))}
}

/* 11f. Photos in a row arrive left to right */
.js .gpeek__item--2{transition-delay:90ms}
.js .gpeek__item--3{transition-delay:180ms}
.js .gpeek__item--4{transition-delay:270ms}
.js .teachers__list .teacher:nth-child(2){transition-delay:100ms}
.js .teachers__list .teacher:nth-child(3){transition-delay:200ms}

@media (prefers-reduced-motion:reduce){
  .trail{display:none!important}
  .site-header::before{transition:none}
  .js .frame.reveal img{filter:none;transition:none}
  .btn--call::after,.btn--call .icon{animation:none!important}
  .js .note.reveal,.js .note.reveal.in{animation:none!important;opacity:1!important}
  .js .gpeek__item,.js .teacher{transition-delay:0ms!important}
}

/* 12. MOTION, louder. Bigger and more visible, still transform and opacity only, still off with reduced motion. */

/* 12a. Bunting hangs over the closing block and sways while it is on screen */
.closing{position:relative;padding-top:calc(var(--section-y) + 2.5rem)}
.bunting{position:absolute;top:0;left:0;right:0;height:4.5rem;overflow:hidden;pointer-events:none}
.bunting svg{display:block;width:100%;height:100%}
.flag__p{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);opacity:0}
.bunting.in .flag__p{animation:flagdrop 560ms var(--ease-out) both;animation-delay:calc(100ms + var(--k, 0) * 40ms)}
.flag{transform-box:view-box}
.bunting.is-live .flag__p{animation:flagdrop 560ms var(--ease-out) both,sway 3.4s ease-in-out infinite alternate;animation-delay:100ms,var(--d)}
@keyframes flagdrop{0%{transform:scaleY(0);opacity:0}70%{transform:scaleY(1.12);opacity:1}100%{transform:scaleY(1);opacity:1}}
@keyframes sway{from{rotate:-7deg}to{rotate:7deg}}

/* 12b. Section headings: words rise into place (added by main.js, only where motion is welcome) */
.js h2.rise .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.js h2.rise .w>span{display:inline-block;transform:translateY(112%);transition:transform 720ms var(--ease-out);transition-delay:calc(var(--wi, 0) * 70ms)}
.js h2.rise.in .w>span{transform:none}

/* 12c. Hero footprints stamped under the pointer */
.stamps{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}
.stamp{position:absolute;left:0;top:0;width:21px;height:27px;opacity:0;will-change:transform,opacity}

/* 12d. Scroll-linked depth where the browser supports it */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .frame.reveal{animation:frameland linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
    @keyframes frameland{from{rotate:5deg;translate:0 54px;scale:.92}to{rotate:0deg;translate:0 0;scale:1}}
    .hero__photos{animation:photosout linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes photosout{to{transform:translateY(-80px) rotate(2.5deg)}}
    .hero__copy{animation:copyout linear both;animation-timeline:view();animation-range:exit 0% exit 75%}
    @keyframes copyout{to{opacity:.1;transform:translateY(-34px)}}
    .classes .stairs{animation:stairtilt linear both;animation-timeline:view();animation-range:entry 10% cover 50%}
    @keyframes stairtilt{from{translate:-26px 0}to{translate:0 0}}
  }
}

/* 12e. Confetti when a callback request is sent */
.confetti{position:fixed;left:0;top:0;z-index:60;pointer-events:none;will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){
  .flag__p{transform:none;opacity:1;animation:none!important}
  .bunting.is-live .flag__p{animation:none!important}
  .js h2.rise .w>span{transform:none;transition:none}
  .stamps,.confetti{display:none}
}

/* 13. HOME PHOTO CAROUSEL and VIDEO LAYOUT */
.gallery-peek{overflow:hidden}
.gcar{margin-top:var(--s5)}
.gcar__track{--edge:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));display:flex;gap:var(--s5);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--edge);padding:var(--s5) var(--edge) var(--s5);scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.gcar__track::-webkit-scrollbar{display:none}
.gcar__track:focus-visible{outline-offset:-4px}
.gcar__track.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
.gcar__item{flex:0 0 min(62vw,17.5rem);scroll-snap-align:start;margin-top:0}
.gcar__item:nth-child(4n+1){--tilt:-2deg}
.gcar__item:nth-child(4n+2){--tilt:1.5deg;margin-top:1.5rem}
.gcar__item:nth-child(4n+3){--tilt:-1deg}
.gcar__item:nth-child(4n+4){--tilt:2.25deg;margin-top:2.25rem}
.gcar__item img{pointer-events:none;-webkit-user-drag:none}
.gcar__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-top:var(--s2)}
.gcar__ctl{display:flex;gap:var(--s2)}
.gcar__btn{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;border:1.5px solid var(--navy);background:transparent;color:var(--navy);cursor:pointer;transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out)}
.gcar__btn .icon{width:1.375rem;height:1.375rem}
.gcar__btn:hover:not(:disabled){background:var(--navy);color:var(--cream)}
.gcar__btn:active:not(:disabled){transform:scale(.94)}
.gcar__btn:disabled{opacity:.3;cursor:default}
.gcar.is-static .gcar__ctl{display:none}
.gcar__more{margin:0}
@media (min-width:900px){.gcar__item{flex-basis:17.5rem}.gcar__track{cursor:grab}}

/* videos: one big featured video, the rest beside and below it */
.vids{display:grid;gap:var(--s5);margin-top:var(--s5)}
.vids .vid{min-width:0}
@media (min-width:600px){
  .vids{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vids--n1{grid-template-columns:minmax(0,44rem)}
  .vids--n3 .vid:first-child{grid-column:1/-1}
}
@media (min-width:900px){
  .vids--n2,.vids--n3,.vids--n4{grid-template-columns:repeat(6,minmax(0,1fr))}
  .vids--n2 .vid:first-child{grid-column:span 4}
  .vids--n2 .vid:nth-child(2){grid-column:span 2;align-self:start}
  .vids--n3 .vid:first-child,.vids--n4 .vid:first-child{grid-column:span 4;grid-row:span 2}
  .vids--n3 .vid:not(:first-child),.vids--n4 .vid:not(:first-child){grid-column:span 2}
  .vids--n4 .vid:nth-child(n+4){grid-column:span 2}
  .vids--n4{grid-auto-flow:row dense}
}
.vids--n4 .vid:first-child .vid__title{font-size:var(--fs-md)}
@media (prefers-reduced-motion:reduce){.gcar__btn{transition:none}}

/* 13b. Video carousel: 16:9 cards in a swipeable row */
.gcar--vids .gcar__track{padding-top:var(--s4);padding-bottom:var(--s4)}
.gcar--vids .gcar__item,.gcar--vids .gcar__item:nth-child(n){flex:0 0 min(84vw,25rem);margin-top:0;scroll-snap-align:start}
.gcar--solo .gcar__item{flex-basis:min(100%,44rem)}
.gcar--vids .gcar__btn{border-color:var(--navy)}
@media (min-width:900px){.gcar--vids .gcar__item,.gcar--vids .gcar__item:nth-child(n){flex-basis:26rem}.gcar--solo .gcar__item{flex-basis:44rem}}

/* 14. FAQ answers come from the editor, so they can hold paragraphs and lists */
.faq details>.faq__a{padding:0 0 var(--s4);color:var(--ink);max-width:var(--measure)}
.faq__a>*+*{margin-top:var(--s3)}
.faq__a ul,.faq__a ol{padding-left:1.25rem}

/* 15. Footer: follow line and social pills */
.site-footer__social{margin:0;display:grid;gap:var(--s3)}
.site-footer__follow{margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);line-height:1.2;color:var(--cream)}
.site-footer__links{margin:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.site-footer__links a{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.5rem 1.125rem;border:1.5px solid rgb(255 251 242 / .55);border-radius:var(--r-pill);color:var(--cream);font-weight:600;font-size:var(--fs-sm);text-decoration:none;transition:background-color var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.site-footer__links a:hover{background:var(--cream);color:var(--navy)}
.site-footer__links a:active{transform:scale(.97)}
.site-footer__links .icon{width:1.25rem;height:1.25rem}
@media (prefers-reduced-motion:reduce){.site-footer__links a{transition:none}}
.gcar--vids .gcar__bar .gcar__more{order:2;margin-left:auto}
.site-footer__side{display:grid;gap:var(--s3);justify-items:start}
@media (min-width:900px){.site-footer__side{justify-items:end}.site-footer__side .site-footer__legal{justify-content:flex-end}}
@media (min-width:900px){.site-footer__side .site-footer__legal{flex-direction:row;gap:var(--s5);margin:0}}
.site-footer__legal a{display:inline-flex;align-items:center;min-height:2.75rem}
/* 16. Jingle: the top strip is the same navy as the header and the hero, so the three read as one. */
.jingle{background:var(--navy);color:var(--cream)}
.jingle[hidden]{display:none}
.jingle__row{max-width:var(--max);margin-inline:auto;padding:0 var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 var(--s5)}
.jingle__btn{display:inline-flex;align-items:center;gap:.625rem;min-height:2.75rem;padding:.25rem .875rem;border:0;border-radius:var(--r-pill);background:transparent;color:rgb(255 251 242 / .92);font:inherit;font-weight:600;font-size:var(--fs-sm);cursor:pointer;transition:background-color var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.jingle__btn:hover{background:rgb(255 251 242 / .12);color:var(--cream)}
.jingle__btn:active{transform:scale(.97)}
.jingle__bars{display:inline-flex;align-items:flex-end;gap:3px;height:1.125rem;color:var(--lime-soft)}
.jingle__bars i{display:block;width:3px;height:100%;border-radius:2px;background:currentColor;transform-origin:50% 100%}
.jingle__bars i:nth-child(1){transform:scaleY(.5)}
.jingle__bars i:nth-child(2){transform:scaleY(1)}
.jingle__bars i:nth-child(3){transform:scaleY(.65)}
.jingle__bars i:nth-child(4){transform:scaleY(.85)}
.jingle.is-playing .jingle__bars i{animation:bars 900ms ease-in-out infinite alternate}
.jingle.is-playing .jingle__bars i:nth-child(2){animation-duration:700ms;animation-delay:-200ms}
.jingle.is-playing .jingle__bars i:nth-child(3){animation-duration:1100ms;animation-delay:-450ms}
.jingle.is-playing .jingle__bars i:nth-child(4){animation-duration:800ms;animation-delay:-100ms}
@keyframes bars{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.jingle__words{font-size:var(--fs-sm);color:rgb(255 251 242 / .92)}
.jingle__words summary{cursor:pointer;display:inline-flex;align-items:center;min-height:2.75rem;font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.jingle__words p{margin:0;padding:var(--s2) 0 var(--s3);line-height:1.6;max-width:36ch}
.jingle__words[open]{flex-basis:100%;text-align:center}
.jingle__words[open] p{margin-inline:auto}
@media (prefers-reduced-motion:reduce){.jingle__btn{transition:none}.jingle.is-playing .jingle__bars i{animation:none}}

/* 17. SAFETY: a board of taped paper cards on the navy, each with a picture that draws itself */
.safe--wide .safe__cards{list-style:none;margin:var(--s6) 0 0;padding:var(--s3) 0 0;display:grid;gap:var(--s5)}
.safe--wide .safe__cards .safe__card{position:relative;display:flex;align-items:center;gap:var(--s4);padding:var(--s4);border:0;border-radius:var(--r-md);background:var(--card);color:var(--ink);box-shadow:0 14px 28px -14px rgb(8 18 40 / .7);transform:rotate(var(--tilt,0deg));font-size:var(--fs-base);line-height:1.35}
.safe--wide .safe__cards .safe__card::before{content:"";position:absolute;z-index:1;top:-.5rem;left:1.25rem;width:3.25rem;height:1.0625rem;background:var(--tape,var(--lime-soft));opacity:.85;transform:rotate(-5deg)}
.safe__ico{flex:none;display:grid;place-items:center;width:3.75rem;height:3.75rem;border-radius:50%;background:var(--bg);color:var(--fg)}
.safe__ico svg{width:2rem;height:2rem}
.safe__txt{font-family:var(--font-display);font-weight:600;color:var(--navy);letter-spacing:-.005em}
.safe__sub{margin:var(--s7) 0 var(--s3);font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);color:var(--lime-soft)}
.safe--wide .safe__chips{margin-top:0}
.js .safe__ico path,.js .safe__ico circle,.js .safe__ico rect{stroke-dasharray:1;stroke-dashoffset:1}
.js .safe__ico circle,.js .safe__ico rect{stroke-dasharray:none;stroke-dashoffset:0}
.js .safe__cards .safe__card{opacity:0}
.js .safe__cards.in .safe__card{animation:pin 640ms var(--ease-out) both;animation-delay:calc(var(--i) * 110ms)}
.js .safe__cards.in .safe__ico path{animation:draw 700ms var(--ease-out) forwards;animation-delay:calc(var(--i) * 110ms + 350ms)}
@media (min-width:600px){
  .safe--wide .safe__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .safe--wide .safe__cards .safe__card:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - var(--s5) / 2)}
}
@media (min-width:1000px){
  .safe--wide .safe__cards{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4);align-items:start}
  .safe--wide .safe__cards .safe__card{flex-direction:column;align-items:flex-start;gap:var(--s3);padding:var(--s5) var(--s4) var(--s4);min-height:11.5rem}
  .safe--wide .safe__cards .safe__card:last-child:nth-child(odd){grid-column:auto;max-width:none}
  .safe--wide .safe__cards .safe__card:nth-child(even){margin-top:1.5rem}
  .safe__txt{font-size:var(--fs-base)}
}
@media (prefers-reduced-motion:reduce){
  .js .safe__cards .safe__card{opacity:1;animation:none!important}
  .js .safe__ico path{stroke-dashoffset:0;animation:none!important}
}
.safe--wide .safe__head{position:relative}
@media (min-width:900px){
  .safe--wide .safe__head::after{content:"";position:absolute;right:0;top:-1.5rem;width:15rem;height:17rem;pointer-events:none;opacity:.09;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFBF2' stroke-width='.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.5-3.2 8-7.5 9.5-4.3-1.5-7.5-5-7.5-9.5V6z'/%3E%3Cpath d='M8.5 12l2.6 2.6L16 9.6'/%3E%3C/svg%3E") center/contain no-repeat}
}
@media (hover:hover) and (pointer:fine){
  .safe--wide .safe__cards .safe__card{transition:transform 320ms var(--ease-out),box-shadow 320ms var(--ease-out)}
  .safe--wide .safe__cards .safe__card:hover{transform:translateY(-6px) rotate(calc(var(--tilt,0deg) * .25));box-shadow:0 20px 32px -14px rgb(8 18 40 / .75)}
}
.safe--wide>.wrap{position:relative}
.safe--wide .safe__head{position:static}

/* 18. HOW ADMISSION WORKS: stepping stones on a footprint path */
.steps .steps__list{list-style:none;margin:var(--s6) 0 0;padding:0 0 0 4.25rem;display:grid;gap:var(--s5);position:relative;--gap:var(--s5)}
.steps .steps__list::before{content:"";position:absolute;left:1.5rem;top:2rem;bottom:2rem;border-left:2px dashed var(--edge-navy)}
.steps .step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);padding:var(--s5) var(--s5) var(--s4);background:var(--card);border:1px solid var(--edge-navy);border-top:1px solid var(--edge-navy);border-radius:var(--r-md);box-shadow:var(--shadow-card);transition:transform 320ms var(--ease-out),box-shadow 320ms var(--ease-out)}
.steps .step__num{position:absolute;left:-4.25rem;top:1.125rem;z-index:2;width:3rem;height:3rem;font-size:1.25rem;box-shadow:0 0 0 4px var(--cream),0 0 0 6px var(--lime-soft)}
.steps .step h3{margin:0;font-size:var(--fs-lg);line-height:1.15}
.steps .step p{max-width:none}
.steps .step__go{margin-top:auto;padding-top:var(--s3)}
.steps .step__go .btn{white-space:nowrap}
@media (min-width:900px){
  .steps .steps__list{--gap:var(--s6);padding:1.75rem 0 0;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--gap)}
  .steps .steps__list--three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps .steps__list::before{display:none}
  .steps .steps__list--three::before{display:block;left:calc((100% - 2 * var(--gap)) / 6);right:calc((100% - 2 * var(--gap)) / 6);top:calc(1.75rem - 16px);bottom:auto;height:32px;border:0;z-index:1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2280%22%20height%3D%2232%22%20viewBox%3D%220%200%2080%2032%22%3E%3Cg%20transform%3D%22translate(18%2013)%20rotate(-14)%20scale(1.05)%22%20fill%3D%22%23EA86B6%22%3E%3Cpath%20d%3D%22M-5.6%200C-5.6%20-4%20-3%20-6.5%200%20-6.5S5.6%20-4%205.6%200C5.6%204.5%203.6%2010%200%2010S-5.6%204.5%20-5.6%200Z%22%2F%3E%3Ccircle%20cx%3D%22-4%22%20cy%3D%22-9.4%22%20r%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%22-1.3%22%20cy%3D%22-10.8%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%221.6%22%20cy%3D%22-10.6%22%20r%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%224.2%22%20cy%3D%22-9%22%20r%3D%221.6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(58%2019)%20rotate(14)%20scale(1.05)%22%20fill%3D%22%2338ABDD%22%3E%3Cpath%20d%3D%22M-5.6%200C-5.6%20-4%20-3%20-6.5%200%20-6.5S5.6%20-4%205.6%200C5.6%204.5%203.6%2010%200%2010S-5.6%204.5%20-5.6%200Z%22%2F%3E%3Ccircle%20cx%3D%22-4%22%20cy%3D%22-9.4%22%20r%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%22-1.3%22%20cy%3D%22-10.8%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%221.6%22%20cy%3D%22-10.6%22%20r%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%224.2%22%20cy%3D%22-9%22%20r%3D%221.6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x left center}
  .steps .step{padding:calc(1.75rem + var(--s3)) var(--s5) var(--s5)}
  .steps .step__num{left:calc(50% - 1.75rem);top:-1.75rem;width:3.5rem;height:3.5rem;font-size:1.375rem}
  .steps .step h3{margin-top:var(--s2)}
}
@media (hover:hover) and (pointer:fine){
  .steps .step:hover{transform:translateY(-5px);box-shadow:0 18px 30px -16px rgb(31 58 104 / .35)}
}
.js .steps .steps__list--three::before{clip-path:inset(0 100% 0 0);transition:clip-path 1500ms var(--ease-out) 300ms}
.js .steps .steps__list--three.in::before{clip-path:inset(0)}
.js .steps .step{opacity:0;transform:translateY(20px);transition:opacity 560ms var(--ease-out),transform 620ms var(--ease-out);transition-delay:calc(var(--k, 0) * 130ms)}
.js .steps .steps__list.in .step{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .steps .steps__list--three::before{clip-path:none;transition:none}
  .js .steps .step{opacity:1;transform:none;transition:none}
}
@media (hover:hover) and (pointer:fine){
  .js .steps .steps__list.in .step:hover{transform:translateY(-5px);box-shadow:0 18px 30px -16px rgb(31 58 104 / .35);transition-delay:0ms}
}

/* 19. FAQ: friendly question cards. Two independent columns, so opening one never leaves a gap in the other. */
.faq-sec .faq{border-top:0;display:grid;gap:var(--s3);grid-template-columns:minmax(0,1fr);align-items:start}
.faq-sec .faq__col{display:grid;gap:var(--s3);align-content:start}
.faq-sec .faq details{background:var(--card);border:1px solid var(--edge-navy);border-radius:var(--r-md);transition:background-color var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) var(--ease-out)}
.faq-sec .faq details:nth-last-child(-n+2){border-bottom:1px solid var(--edge-navy)}
.faq-sec .faq details:hover{border-color:var(--navy)}
.faq-sec .faq details[open]{background:var(--tint-lime);border-color:var(--lime-soft);box-shadow:0 12px 24px -16px rgb(64 100 20 / .4)}
.faq-sec .faq summary{padding:var(--s4);align-items:center;gap:var(--s3)}
.faq-sec .faq__q{font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);line-height:1.25;color:var(--navy)}
.faq-sec .faq summary .icon{flex:none;width:2rem;height:2rem;margin:0;padding:.45rem;border-radius:50%;background:var(--tint-navy);color:var(--navy);transition:background-color var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out)}
.faq-sec .faq details[open] summary .icon{background:var(--navy);color:var(--cream)}
.faq-sec .faq details>.faq__a{padding:0 var(--s4) var(--s4)}
.faq-sec__ask{margin-top:var(--s3);font-family:var(--font-display);font-weight:600;color:var(--navy)}
.faq-sec__head .cta-row{margin-top:var(--s3)}
@media (min-width:900px){
  .faq-sec .faq{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);column-gap:var(--s4)}
  .faq-sec .faq details{border-top:1px solid var(--edge-navy)}
}
@media (prefers-reduced-motion:reduce){.faq-sec .faq details,.faq-sec .faq summary .icon{transition:none}}

/* Admission steps: the link to the full page sits on the heading row, not alone under the cards */
.steps__head{display:grid;gap:var(--s4)}
.steps__head .steps__go{margin:0}
@media (min-width:900px){
  .steps__head{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s6)}
}

/* 20. Videos section header and count */
.gal-vid__head{display:grid;gap:var(--s4)}
.gal-vid__yt{margin:0}
.gal-vid__yt .icon{width:1.25rem;height:1.25rem}
.gal-vid__count{margin:0;font-size:var(--fs-sm);color:var(--text-quiet);font-variant-numeric:tabular-nums}
.gcar--vids .gcar__bar{justify-content:flex-start;gap:var(--s4)}
@media (min-width:900px){.gal-vid__head{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s6)}}

/* 21. YouTube Shorts are upright: 9:16 cards, the picture cropped to the video itself */
.gcar--vids .gcar__track{align-items:flex-start}
.gcar--vids .vid--short,.gcar--vids .vid--short:nth-child(n){flex:0 0 min(62vw,15rem)}
.vid--short .vid__btn{aspect-ratio:9/16}
.vid--short .vid__btn img{object-fit:cover;object-position:50% 50%}
.vid--short iframe{aspect-ratio:9/16}
.gcar--solo .vid--short{flex-basis:min(70vw,18rem)!important}
@media (min-width:900px){.gcar--vids .vid--short,.gcar--vids .vid--short:nth-child(n){flex-basis:15rem}}

/* 22. PROGRAMS PAGE: quick-jump pills, intro card, zig-zag class panels */
.cloud--lime{color:var(--tint-lime)}
.prog-jump{background:var(--cream);border-bottom:1px solid var(--line)}
.prog-jump__list{list-style:none;margin:0;padding:var(--s3) var(--gutter);max-width:var(--max);margin-inline:auto;display:flex;gap:var(--s2);overflow-x:auto;-webkit-overflow-scrolling:touch}
.prog-jump__pill{flex:none;display:inline-flex;align-items:baseline;gap:.4rem;min-height:2.75rem;padding:.5rem 1.125rem;border-radius:var(--r-pill);font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);text-decoration:none;color:var(--ink);scroll-snap-align:start;transition:transform var(--dur-press) var(--ease-out)}
.prog-jump__pill:active{transform:scale(.96)}
.prog-jump__age{font-size:var(--fs-xs);font-weight:600;font-variant-numeric:tabular-nums}
.prog-jump__pill--lime{background:var(--tint-lime);color:var(--lime-ink)}
.prog-jump__pill--navy{background:var(--tint-navy);color:var(--navy)}
.prog-jump__pill--sand{background:var(--tint-sand);color:var(--sand-ink)}
.prog-jump__pill--mint{background:var(--tint-mint);color:var(--mint-ink)}

.prog-intro__grid{display:grid;gap:var(--s5);max-width:none}
.prog-intro__card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5);box-shadow:var(--shadow-card);display:grid;gap:var(--s3);align-content:start;max-width:34rem}
.prog-intro__card p{max-width:36ch}
.prog-intro__card .btn{margin-top:var(--s2);justify-self:start}
.prog-intro__note{align-self:center;max-width:28rem}

.klass{padding-block:var(--s7)}
.klass--lime{background:var(--tint-lime);color:var(--lime-ink)}
.klass--navy{background:var(--tint-navy);color:var(--navy)}
.klass--sand{background:var(--tint-sand);color:var(--sand-ink)}
.klass--mint{background:var(--tint-mint);color:var(--mint-ink)}
.klass h2,.klass h3{color:inherit}
.klass__grid{display:grid;gap:var(--s6)}
.klass__panel{position:relative;padding-top:var(--s3)}
.klass__step{display:block;font-family:var(--font-display);font-weight:700;font-size:2.75rem;line-height:1;opacity:.65;letter-spacing:-.02em}
.klass__age{font-family:var(--font-display);font-weight:600;font-size:var(--fs-lg);margin-top:var(--s2);font-variant-numeric:tabular-nums}
.klass__end{font-size:var(--fs-sm);margin-top:.25rem}
.klass__body h3{font-size:var(--fs-md);margin-bottom:var(--s4)}
.klass__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.klass__list li{display:flex;align-items:flex-start;gap:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid rgb(31 58 104 / .14)}
.klass__list li:last-child{border-bottom:0;padding-bottom:0}
.klass__ico{flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:rgb(255 255 255 / .55);color:inherit}
.klass--navy .klass__ico{background:rgb(255 255 255 / .16)}
.klass__ico svg{width:1.25rem;height:1.25rem}
.klass__list li>span:last-child{padding-top:.3rem;line-height:1.45}
.klass__cta{margin-top:var(--s6)}
.klass .btn--wa{border-color:currentColor;color:inherit}
@media (hover:hover) and (pointer:fine){
  .klass__list li{transition:transform 200ms var(--ease-out)}
  .klass__list li:hover{transform:translateX(4px)}
  .klass__list li:hover .klass__ico{background:rgb(255 255 255 / .85)}
  .klass--navy .klass__list li:hover .klass__ico{background:rgb(255 255 255 / .3)}
}
@media (min-width:900px){
  .klass{padding-block:var(--s8)}
  .klass__grid{grid-template-columns:.75fr 1.25fr;gap:var(--s8);align-items:start}
  .klass__panel{position:sticky;top:6rem;padding-top:0}
  .klass__step{font-size:3.5rem}
  .klass__list li{font-size:var(--fs-md)}
  .klass--rev .klass__grid{direction:rtl}
  .klass--rev .klass__panel,.klass--rev .klass__body{direction:ltr}
}
@media (prefers-reduced-motion:reduce){
  .klass__list li,.prog-jump__pill{transition:none}
}

/* 23. ADMISSIONS: reassurance chip, why-list, checklist, taped Q&A cards */
.enquiry-box{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5);box-shadow:var(--shadow-card)}
.enquiry-box::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--lime),var(--navy))}
.enquiry-box__chip{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 var(--s4);padding:.4rem .875rem;border-radius:var(--r-pill);background:var(--tint-mint);color:var(--mint-ink);font-weight:600;font-size:var(--fs-xs)}
.enquiry-box__chip .icon{width:1rem;height:1rem}
@media (min-width:900px){.enquiry-box{padding:var(--s6)}}

.adm-why{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s4)}
.adm-why li{display:flex;align-items:flex-start;gap:var(--s3)}
.adm-why__ico{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--tint-navy);color:var(--navy)}
.adm-why__ico .icon{width:1.375rem;height:1.375rem}
.adm-why li span:last-child{padding-top:.2rem;line-height:1.4;color:var(--muted)}
.adm-why strong{color:var(--ink);font-weight:600}
.adm-fee{margin-top:var(--s5);font-size:var(--fs-sm);color:var(--muted)}
.adm-fee a{display:inline-flex;align-items:center;min-height:2.75rem;gap:.25rem;font-weight:600;color:var(--navy)}
.adm-fee .icon{width:1rem;height:1rem;transition:transform var(--dur-ui) var(--ease-out)}
.adm-fee a:hover .icon{transform:translateX(3px)}

.docs{background:var(--tint-mint);color:var(--mint-ink)}
.docs__head{max-width:38rem}
.docs__head h2,.docs__head .lede{color:inherit}
.docs__list{list-style:none;margin:var(--s6) 0 0;padding:0;max-width:38rem;display:grid;gap:var(--s3)}
.docs__list li{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid rgb(15 60 45 / .14);font-family:var(--font-display);font-weight:600;font-size:var(--fs-md)}
.docs__list li:last-child{border-bottom:0}
.docs__num{flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--mint-ink);color:var(--tint-mint);font-size:1rem;font-weight:700}

.ask__notes{margin-top:var(--s6)}
.ask__q{margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);line-height:1.3;color:var(--navy)}
.ask__a{margin-top:var(--s3);font-size:var(--fs-sm);color:var(--ink);line-height:1.55}

@media (min-width:900px){
  .docs__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s6);max-width:none}
}
.js .docs__list.reveal{opacity:1;transform:none;transition:none}
.js .docs__list li{opacity:0;transform:translateY(14px);transition:opacity 480ms var(--ease-out),transform 480ms var(--ease-out);transition-delay:calc(var(--n,0) * 100ms)}
.js .docs__list.in li{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .docs__list li{opacity:1;transform:none;transition:none}.adm-fee a:hover .icon{transform:none}}