/* ============================================================
   AKASIA TUTORING — design system
   Palette sampled from the logo artwork: navy #0E244A, gold #CB9417.

   Layout principle: no two consecutive sections share a rhythm.
   Editorial rows, a connected ladder, an asymmetric mosaic and a
   split FAQ each carry their own structure, so the page reads as
   designed rather than as a stack of identical card grids.
   ============================================================ */
:root{
  --navy:#0E244A;
  --navy-deep:#081A36;
  --navy-mid:#1C3D70;
  --gold:#CB9417;
  --gold-deep:#A8770D;
  --gold-soft:#E2B44E;

  --white:#FFFFFF;
  --surface:#F4F6FA;
  --surface-2:#E9EEF6;
  --line:#E1E7F0;
  --line-dark:rgba(255,255,255,.15);

  --body:#4F5972;
  --body-light:#BFC9DE;
  --muted:#8A94AD;

  --display:'Montserrat',system-ui,sans-serif;
  --text:'Plus Jakarta Sans',system-ui,sans-serif;

  --r:12px;
  --r-lg:18px;
  --pill:999px;
  --gut:clamp(20px,5vw,44px);
  --max:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --navh:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--body);
  font-family:var(--text);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);color:var(--navy);margin:0;line-height:1.1;letter-spacing:-.025em;font-weight:800}
p{margin:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 10px 0}
.skip:focus{left:0}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* ---- type ---------------------------------------------------------- */
.h2{font-size:clamp(29px,4.3vw,46px);font-weight:800;letter-spacing:-.03em}
.h3{font-size:clamp(19px,2.4vw,23px);font-weight:700}
.lede{font-size:clamp(16.5px,1.9vw,19px);max-width:56ch;color:var(--body)}
.on-dark,.on-dark h1,.on-dark h2,.on-dark h3{color:#fff}
.on-dark .lede,.on-dark .label{color:var(--body-light)}

/* the one emphasis device: the gold sweep from the logo */
.u-gold{position:relative;white-space:nowrap}
.u-gold::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:.09em;background:var(--gold);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .25s}
.is-in .u-gold::after,.hero .u-gold::after{transform:scaleX(1)}

.label{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.on-dark .label,.sec--navy .label{color:var(--gold-soft)}

/* ---- buttons -------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border-radius:var(--pill);font-family:var(--display);
  font-weight:700;font-size:15.5px;text-decoration:none;
  transition:transform .18s var(--ease),background .2s,color .2s,border-color .2s;
  min-height:52px;border:2px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:var(--gold);color:var(--navy)}
.btn--gold:hover{background:var(--gold-soft)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-mid)}
.btn--wa{background:#25D366;color:#06331C}
.btn--wa:hover{background:#2ee273}
.btn--ghost{border-color:var(--navy);color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:#fff}
.on-dark .btn--ghost,.hero .btn--ghost{border-color:rgba(255,255,255,.5);color:#fff}
.on-dark .btn--ghost:hover,.hero .btn--ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn svg{flex:none}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---- nav ------------------------------------------------------------
   One row. A three-track grid keeps the logo mathematically centred
   regardless of how much sits in the flanking link groups, since both
   outer tracks are equal fractions of the leftover space. ------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease),border-color .35s,box-shadow .35s;
}
.nav.stuck{background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-color:var(--line);box-shadow:0 4px 20px -14px rgba(14,36,74,.55)}
/* the nav carries more items than the rest of the page (8 links
   plus the logo and CTA), so it gets a little more breathing room
   than --max without widening the page's actual content columns */
.nav .wrap{max-width:1320px}
/* Five tracks: [hidden mirror of the CTA] [left links] [logo] [right
   links] [CTA]. The CTA gets its own column so it stops competing with
   the right-hand links for space, but a lone extra column on one side
   would drag the centre column off true centre by about half the CTA's
   width — so its mirror on the left (same content, invisible) restores
   the symmetry a plain 1fr/auto/1fr split relies on. */
.nav__in{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(8px,1.4vw,18px);height:var(--navh);
}
.nav__cta{display:flex;align-items:center;gap:10px}
.nav__spacer{visibility:hidden}

.brand{display:block;line-height:0;position:relative;justify-self:center}
.brand img{height:38px;width:auto;transition:opacity .35s var(--ease)}
@media(min-width:600px){.brand img{height:44px}}
.brand .logo-dark{position:absolute;inset:0;opacity:0}
.nav.stuck .logo-light{opacity:0}
.nav.stuck .logo-dark{opacity:1}

.nav__side{display:flex;align-items:center;gap:clamp(12px,2vw,22px);min-width:0}
/* stretch to fill the whole track (not justify-self:end/start, which
   would size the box to its content and let it overflow past the
   track edge); align the actual content inside with flexbox instead,
   so oversized content scrolls within its own track instead of
   spilling into the logo's space. */
.nav__left{justify-content:flex-start}
.nav__right{justify-content:flex-end}

.nav__links{display:flex;gap:clamp(10px,1.5vw,17px);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;min-width:0}
.nav__links::-webkit-scrollbar{display:none}
/* fades the edges when there's more to scroll to, since the
   scrollbar itself is hidden */
.nav__links{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent);mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent)}
.nav__links a{text-decoration:none;font-family:var(--display);font-weight:600;font-size:13.5px;color:rgba(255,255,255,.9);position:relative;transition:color .35s;white-space:nowrap;padding:4px 1px}
.nav.stuck .nav__links a{color:var(--navy)}
.nav__links a::after{content:"";position:absolute;left:1px;right:1px;bottom:-3px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1)}

.nav .btn{padding:11px 19px;min-height:42px;font-size:13.5px}
@media(max-width:520px){.nav .btn{padding:11px 14px}.nav .btn span{display:none}}

.cart-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;transition:background-color .25s,color .35s;flex:none}
.nav.stuck .cart-btn{background:var(--surface-2);color:var(--navy)}
.cart-btn:hover{background:rgba(255,255,255,.3)}
.nav.stuck .cart-btn:hover{background:var(--line)}
.cart-badge{position:absolute;top:-2px;right:-2px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--gold);color:var(--navy);font-family:var(--display);font-size:11px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px var(--navy)}
.nav.stuck .cart-badge{box-shadow:0 0 0 2px #fff}

/* below this the flanking link groups would collide with the logo, so
   they drop out in favour of a hamburger button that opens the same
   links in a slide-in panel — dropping them with no replacement was
   the bug: there was no way back to them on a phone. */
@media(max-width:640px){
  .nav__links{display:none}
}

/* ---- mobile menu trigger -----------------------------------------------
   The responsive display:inline-flex override must come after this base
   rule in the stylesheet — equal-specificity selectors resolve by source
   order, so a media query written earlier than the rule it's meant to
   override loses to it regardless of which viewport matches. ---------- */
.mmenu-btn{
  display:none;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;background:rgba(255,255,255,.16);color:#fff;flex:none;
  transition:background-color .25s,color .35s;
}
.nav.stuck .mmenu-btn{background:var(--surface-2);color:var(--navy)}
.mmenu-btn:hover{background:rgba(255,255,255,.3)}
.nav.stuck .mmenu-btn:hover{background:var(--line)}
@media(max-width:640px){.mmenu-btn{display:inline-flex}}

/* ---- mobile menu panel -------------------------------------------------
   Deliberately mirrors .cart-drawer's proven slide-in pattern instead of
   inventing a new one. ---------------------------------------------- */
.mmenu{position:fixed;inset:0;z-index:130;visibility:hidden}
.mmenu.is-open{visibility:visible}
.mmenu__backdrop{position:absolute;inset:0;background:rgba(8,26,54,.6);opacity:0;transition:opacity .35s var(--ease)}
.mmenu.is-open .mmenu__backdrop{opacity:1}
.mmenu__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(340px,84vw);background:#fff;
  box-shadow:-24px 0 60px -30px rgba(8,26,54,.6);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .4s var(--ease);overflow-y:auto;
}
.mmenu.is-open .mmenu__panel{transform:none}
.mmenu__head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.mmenu__head img{height:34px;width:auto}
.mmenu__close{width:36px;height:36px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-size:19px;color:var(--navy);flex:none}
.mmenu__close:hover{background:var(--line)}
.mmenu__links{display:flex;flex-direction:column;padding:10px 8px}
.mmenu__links a{
  padding:15px 12px;border-radius:10px;text-decoration:none;font-family:var(--display);
  font-weight:700;font-size:16px;color:var(--navy);transition:background-color .2s;
}
.mmenu__links a:hover{background:var(--surface)}
.mmenu__links a[aria-current]{color:var(--gold-deep)}
.mmenu__foot{padding:16px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.mmenu__foot .btn{width:100%}
@media(min-width:641px){.mmenu{display:none}}

/* static pages with no video hero (About, Gallery, Vacancies, the student
   portal) run the nav permanently solid and reserve its height up front,
   instead of floating transparently over footage that isn't there. */
.nav--solid{background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-color:var(--line);box-shadow:0 4px 20px -14px rgba(14,36,74,.55)}
.nav--solid .logo-light{opacity:0}
.nav--solid .logo-dark{opacity:1}
.nav--solid .nav__links a{color:var(--navy)}
body.subpage{padding-top:var(--navh)}

/* ---- hero -----------------------------------------------------------
   Exactly one viewport tall, content optically centred, with a rail
   pinned to the bottom edge so the height is used on purpose. -------- */
.hero{
  position:relative;overflow:hidden;color:#fff;background:var(--navy);
  min-height:100svh;display:flex;flex-direction:column;
  padding-top:var(--navh);
}
@supports not (min-height:100svh){.hero{min-height:100vh}}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Weighted to the left so the headline stays legible while the footage
   still reads on the right. Two stacked gradients, not one flat wash. */
.hero__scrim{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,26,54,.30) 0%,rgba(8,26,54,.34) 55%,rgba(8,26,54,.78) 100%),
    linear-gradient(105deg,rgba(8,26,54,.90) 0%,rgba(8,26,54,.62) 38%,rgba(8,26,54,.12) 78%);
}
.hero__scrim--light{
  background:
    linear-gradient(180deg,rgba(8,26,54,.20) 0%,rgba(8,26,54,.26) 55%,rgba(8,26,54,.70) 100%),
    linear-gradient(105deg,rgba(8,26,54,.84) 0%,rgba(8,26,54,.50) 40%,rgba(8,26,54,.06) 80%);
}
/* .wrap carries margin-inline:auto; as a flex child that would shrink-to-fit
   and centre, so both rails need an explicit full width. */
.hero__body,.hero__rail{width:100%}
.hero__body{position:relative;z-index:1;flex:1;display:flex;align-items:center;padding-block:clamp(28px,5vh,64px)}
.hero__content{max-width:660px}
.hero .label{display:block;margin-bottom:clamp(14px,2.2vh,20px)}
.hero h1{
  font-size:clamp(34px,6.1vw,64px);font-weight:800;letter-spacing:-.035em;
  line-height:1.03;color:#fff;
}
.hero__sub{font-size:clamp(16.5px,1.9vw,20px);margin-top:clamp(14px,2.4vh,22px);max-width:46ch;color:#CBD5E8}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3.4vh,34px)}

/* ---- Google rating badge ------------------------------------------------
   Links to the real reviews widget further down the page rather than
   asserting a review count nobody supplied — the stars/score are the
   only claim made here, and they should be updated if the actual
   Google rating changes. -------------------------------------------- */
.rating-badge{
  display:inline-flex;align-items:center;gap:10px;margin-top:clamp(16px,2.6vh,24px);
  padding:9px 16px 9px 12px;border-radius:var(--pill);text-decoration:none;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  transition:background-color .2s,border-color .2s,transform .2s var(--ease);
}
.rating-badge:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.36);transform:translateY(-1px)}
.rating-badge__stars{display:inline-flex;gap:1px;color:var(--gold);flex:none}
.rating-badge__text{font-family:var(--display);font-weight:600;font-size:13.5px;color:#fff;white-space:nowrap}
.rating-badge__text strong{font-weight:800}
.rating-badge__pin{color:#A9B7D4;flex:none}

/* bottom rail: turns leftover height into a deliberate anchor */
.hero__rail{
  position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.16);
  padding-block:clamp(13px,2vh,20px);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.hero__stats{display:flex;flex-wrap:wrap;gap:14px 26px}
.hero__stat{font-size:13px;color:#A9B7D4;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.hero__stat strong{font-family:var(--display);font-weight:800;color:#fff;font-size:14.5px}
.hero__scroll{display:none;align-items:center;gap:10px;font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8E9EC0;text-decoration:none;flex:none}
@media(min-width:700px){.hero__scroll{display:inline-flex}}
.hero__scroll span{width:30px;height:1px;background:var(--gold);position:relative;overflow:hidden}
.hero__scroll span::after{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-100%);animation:sweep 2.4s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

.hero__content>*{animation:up .75s var(--ease) both}
.hero__content>*:nth-child(1){animation-delay:.06s}
.hero__content>*:nth-child(2){animation-delay:.14s}
.hero__content>*:nth-child(3){animation-delay:.22s}
.hero__content>*:nth-child(4){animation-delay:.3s}
.hero__content>*:nth-child(5){animation-delay:.38s}
.hero__rail{animation:up .8s .4s var(--ease) both}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---- sections -------------------------------------------------------- */
.sec{padding:clamp(66px,8vw,112px) 0}
.sec--tight{padding:clamp(48px,5.5vw,76px) 0}
.sec--surface{background:var(--surface)}
.sec--navy{background:var(--navy);color:#fff}

/* A. stacked opener (used sparingly) */
.open{max-width:56ch;margin-bottom:clamp(34px,4.4vw,54px)}
.open .label{display:block;margin-bottom:14px}
.open .lede{margin-top:15px}

/* B. split opener — heading left, supporting copy right. Breaks the
      one-column rhythm without inventing a new component. */
.open--split{display:grid;gap:18px;max-width:none;align-items:end}
@media(min-width:900px){.open--split{grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px)}}
.open--split .lede{margin-top:0}

/* ---- A. editorial rows (classes) --------------------------------------
   Replaces a three-card grid: numbered rows, rules, no boxes. --------- */
.rows{border-top:1px solid var(--line)}
.on-dark .rows{border-top-color:var(--line-dark)}
.row{
  display:grid;grid-template-columns:auto 1fr;gap:6px 20px;
  padding:clamp(24px,3.2vw,34px) 0;border-bottom:1px solid var(--line);
  align-items:baseline;transition:background-color .25s var(--ease);
}
.on-dark .row{border-bottom-color:var(--line-dark)}
@media(min-width:900px){
  /* fixed tracks (not content-sized) so every row's columns line up */
  .row{grid-template-columns:52px minmax(0,.95fr) minmax(0,1.6fr) 172px;gap:0 clamp(22px,3vw,44px);align-items:start}
}
.row:hover{background:rgba(203,148,23,.05)}
.on-dark .row:hover{background:rgba(255,255,255,.045)}
.row__n{font-family:var(--display);font-size:13px;font-weight:800;color:var(--gold);letter-spacing:.06em;padding-top:.45em}
.row__t{font-family:var(--display);font-size:clamp(21px,2.7vw,28px);font-weight:800;color:var(--navy);letter-spacing:-.025em;grid-column:2/-1}
@media(min-width:900px){.row__t{grid-column:auto}}
.on-dark .row__t{color:#fff}
.row__d{font-size:16px;line-height:1.6;grid-column:2/-1;max-width:52ch}
@media(min-width:900px){.row__d{grid-column:auto;padding-top:.28em}}
.on-dark .row__d{color:var(--body-light)}
.row__m{
  grid-column:2/-1;font-family:var(--display);font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
@media(min-width:900px){.row__m{grid-column:auto;text-align:right;padding-top:.5em}}
.on-dark .row__m{color:#8E9EC0}

/* ---- B. phase ladder ---------------------------------------------------
   Replaces a four-card grid: one connected run from Grade R to matric. */
.ladder{position:relative;display:grid;gap:0}
@media(min-width:920px){.ladder{grid-template-columns:repeat(4,1fr)}}
.rung{position:relative;padding:0 0 30px 30px}
@media(min-width:920px){.rung{padding:44px clamp(14px,1.8vw,26px) 0 0}}
/* the connector: vertical on mobile, horizontal on desktop */
.rung::before{
  content:"";position:absolute;left:5px;top:10px;bottom:-4px;width:2px;background:var(--line);
}
.rung:last-child::before{bottom:auto;height:14px}
@media(min-width:920px){
  .rung::before{left:0;right:0;top:5px;bottom:auto;width:auto;height:2px}
  /* the run ends at matric — no trailing stub past the last dot */
  .rung:last-child::before{display:none}
}
.rung::after{
  content:"";position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px var(--surface);
}
@media(min-width:920px){.rung::after{top:0}}
.rung__ph{display:block;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.rung h3{font-size:clamp(21px,2.5vw,26px);font-weight:800;letter-spacing:-.025em}
.rung__gr{font-family:var(--display);font-size:14px;font-weight:700;color:var(--gold-deep);margin-top:3px}
.rung__subs{margin:14px 0 0;padding:0;list-style:none;font-size:15px;line-height:1.75;color:var(--body)}
.rung__subs li{position:relative;padding-left:15px}
.rung__subs li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--line)}

/* ---- C. asymmetric photo mosaic ---------------------------------------
   Replaces a strip of four identical squares. -------------------------- */
.mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:900px){.mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,17vw,210px)}}
.mosaic figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);background:var(--surface-2);aspect-ratio:1}
@media(min-width:900px){.mosaic figure{aspect-ratio:auto}}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.mosaic figure:hover img{transform:scale(1.05)}
.mosaic figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;font-size:12.5px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(8,26,54,.88))}
@media(min-width:900px){
  .mosaic--4 figure:nth-child(1){grid-column:span 2;grid-row:span 2}
  .mosaic--4 figure:nth-child(4){grid-column:span 2}
  .mosaic--5 figure:nth-child(1){grid-column:span 2;grid-row:span 2}
}

/* ---- D. inline trust points (no boxes) ---------------------------------- */
.points{display:grid;gap:clamp(24px,3vw,38px)}
@media(min-width:820px){.points{grid-template-columns:repeat(3,1fr)}}
.point{border-top:2px solid var(--gold);padding-top:18px}
.point h3{font-size:18px;font-weight:800;margin-bottom:8px}
.point p{font-size:15.5px;line-height:1.6}
.on-dark .point p{color:var(--body-light)}

/* ---- D2. icon-led points (longer benefit lists) -------------------------- */
.points--icon{display:grid;gap:26px 32px}
@media(min-width:720px){.points--icon{grid-template-columns:repeat(2,1fr)}}
.point--icon{display:flex;gap:16px;align-items:flex-start}
.point--icon__ic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--surface-2);color:var(--navy);display:flex;align-items:center;justify-content:center}
.point--icon__ic svg{width:22px;height:22px}
.point--icon h3{font-size:16.5px;font-weight:800;margin-bottom:6px}
.point--icon p{font-size:15px;line-height:1.6}
.on-dark .point--icon__ic{background:rgba(255,255,255,.12);color:var(--gold)}
.on-dark .point--icon p{color:var(--body-light)}

/* ---- E. plain tag list (e.g. schools served) ------------------------------ */
.tags{display:flex;flex-wrap:wrap;gap:10px 12px;list-style:none;margin:22px 0 0;padding:0}
.tags li{border:1px solid var(--line);border-radius:var(--pill);padding:9px 16px;font-size:14.5px;font-weight:600;color:var(--navy);background:#fff}
.on-dark .tags li{border-color:var(--line-dark);color:#fff;background:rgba(255,255,255,.06)}

/* ---- fee tool ------------------------------------------------------------ */
.panel{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 40px 80px -50px rgba(0,0,0,.6)}
.panel__grid{display:grid}
@media(min-width:900px){.panel__grid{grid-template-columns:1.12fr .88fr}}
.panel__l{padding:clamp(26px,3.4vw,42px)}
.panel__r{background:var(--navy-deep);color:#fff;padding:clamp(26px,3.4vw,42px);display:flex;flex-direction:column}
.field{margin-bottom:26px}
.field:last-child{margin-bottom:0}
.field__lab{display:block;font-family:var(--display);font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:12px}
.field__lab i{font-style:normal;color:var(--gold-deep);margin-right:7px}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{border:1px solid var(--line);background:#fff;border-radius:var(--pill);padding:11px 18px;font-weight:600;font-size:14.5px;color:var(--navy);transition:.18s;min-height:46px;display:inline-flex;align-items:center;gap:8px}
.opt:hover{border-color:var(--gold);background:#FFFCF4}
.opt[aria-pressed="true"],.opt.sel{background:var(--navy);border-color:var(--navy);color:#fff}
.opt[aria-pressed="true"]:hover,.opt.sel:hover{background:var(--navy-mid);border-color:var(--navy-mid)}
.opt .tick{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);flex:none;display:grid;place-items:center;transition:.18s}
.opt[aria-pressed="true"] .tick{background:var(--gold);border-color:var(--gold)}
.opt .tick svg{opacity:0;transition:.18s}
.opt[aria-pressed="true"] .tick svg{opacity:1}
.hint{font-size:14.5px;color:var(--muted);margin:0}
.binput{width:100%;border:1px solid var(--line);border-radius:10px;padding:13px 16px;font:inherit;font-size:15.5px;color:var(--navy);background:#fff;min-height:50px}
.binput::placeholder{color:#9BA5BC}
.binput:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(203,148,23,.16)}
.quote__lab{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);display:block;margin-bottom:12px}
.quote__fig{display:flex;align-items:baseline;gap:9px;padding-bottom:20px;border-bottom:1px solid var(--line-dark);margin-bottom:22px}
.quote__cur{font-family:var(--display);font-size:21px;font-weight:700;color:#93A4C4}
.quote__num{font-family:var(--display);font-size:clamp(42px,6.6vw,58px);font-weight:800;color:var(--gold-soft);line-height:1;letter-spacing:-.035em}
.quote__per{font-size:14px;color:#93A4C4;font-weight:600}
.bubble{background:#E7F7D6;color:#0B2B14;border-radius:12px 12px 12px 4px;padding:15px 17px;font-size:14.5px;line-height:1.55;white-space:pre-line;position:relative;margin-bottom:20px;min-height:118px}
.bubble::after{content:"";position:absolute;left:0;bottom:-1px;width:12px;height:12px;background:#E7F7D6;clip-path:polygon(0 0,100% 100%,100% 0)}
.bubble .t{display:block;text-align:right;font-size:11px;color:#5A7A5F;margin-top:8px}
.panel__r .btn{width:100%}
.fineprint{font-size:13.5px;color:#93A4C4;margin-top:16px;line-height:1.55}

/* ---- packs --------------------------------------------------------------- */
.packs{display:grid;gap:16px}
@media(min-width:780px){.packs{grid-template-columns:repeat(3,1fr)}}
.pack{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;position:relative}
.pack::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--gold);border-radius:var(--r) var(--r) 0 0;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.pack:hover{transform:translateY(-4px);box-shadow:0 24px 46px -30px rgba(14,36,74,.45);border-color:#D2DBE9}
.pack:hover::before{transform:scaleX(1)}
.pack__g{font-family:var(--display);font-weight:800;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-deep)}
.pack__p{font-family:var(--display);font-weight:800;font-size:clamp(34px,4vw,42px);color:var(--navy);margin:12px 0 8px;letter-spacing:-.035em;line-height:1}
.pack__n{font-size:15px;color:var(--body);flex:1;margin-bottom:24px}
.pack .btn{width:100%}
.pack .btn.is-added{background:var(--gold);color:var(--navy)}

/* ---- disclosure ----------------------------------------------------------- */
.reveal{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:16px}
.reveal__t{width:100%;display:flex;align-items:center;gap:14px;padding:22px 24px;text-align:left;font-family:var(--display);font-weight:700;color:var(--navy);font-size:16.5px;cursor:pointer;list-style:none}
.reveal__t::-webkit-details-marker{display:none}
.reveal__t .cx{width:30px;height:30px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;flex:none;transition:transform .3s var(--ease),background .2s;color:var(--navy)}
.reveal[open] .reveal__t .cx{transform:rotate(45deg);background:var(--gold)}
.reveal__b{padding:0 24px 26px}
.items{display:grid;grid-template-columns:1fr;gap:2px 26px;margin:0;padding:18px 0 0;list-style:none;border-top:1px solid var(--line)}
@media(min-width:620px){.items{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.items{grid-template-columns:repeat(3,1fr)}}
.items li{font-size:15px;padding:7px 0 7px 22px;position:relative;color:var(--body)}
.items li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:2px;background:var(--gold);border-radius:2px}

/* ---- steps ---------------------------------------------------------------- */
.steps{display:grid;gap:clamp(20px,2.6vw,30px);counter-reset:s}
@media(min-width:680px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{counter-increment:s;padding-top:20px;border-top:2px solid var(--line)}
.on-dark .step{border-top-color:var(--line-dark)}
.step::before{content:"0" counter(s);display:block;font-family:var(--display);font-size:12.5px;font-weight:800;color:var(--gold);letter-spacing:.08em;margin-bottom:11px}
.step h3{font-size:17.5px;font-weight:800;margin-bottom:8px}
.step p{font-size:15px;line-height:1.58}

/* ---- proof band ------------------------------------------------------------ */
.proof{position:relative;border-radius:var(--r-lg);overflow:hidden}
.proof img{width:100%;height:clamp(260px,40vw,430px);object-fit:cover}
.proof__cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(26px,4vw,44px);background:linear-gradient(transparent,rgba(8,26,54,.95) 62%);color:#fff}
.proof__cap h3{color:#fff;font-size:clamp(21px,3.2vw,30px);font-weight:800;max-width:20ch}
.proof__cap p{color:#CBD5E8;font-size:15.5px;margin-top:11px;max-width:52ch}

.evid{display:grid;gap:16px}
@media(min-width:720px){.evid{grid-template-columns:1fr 1fr}}
.evid img{width:100%;height:clamp(220px,30vw,320px);object-fit:cover;border-radius:var(--r)}

/* ---- season band ------------------------------------------------------------ */
.season{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:clamp(30px,4.4vw,50px);display:grid;gap:26px;align-items:center;position:relative;overflow:hidden}
@media(min-width:880px){.season{grid-template-columns:1.4fr auto}}
.season h3{font-size:clamp(22px,3.3vw,33px);font-weight:800;color:#fff;max-width:22ch}
.season p{font-size:15.5px;color:var(--body-light);margin-top:12px;max-width:54ch}
.season__st{display:inline-block;font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;background:var(--gold);color:var(--navy);border-radius:var(--pill);padding:6px 14px;margin-bottom:16px}

/* ---- FAQ: split layout, sticky heading -------------------------------------- */
.faqwrap{display:grid;gap:clamp(24px,4vw,60px)}
@media(min-width:900px){.faqwrap{grid-template-columns:.7fr 1.3fr}}
.faqwrap__head .label{display:block;margin-bottom:14px}
@media(min-width:900px){.faqwrap__head{position:sticky;top:calc(var(--navh) + 26px);align-self:start}}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:22px 46px 22px 0;font-family:var(--display);font-weight:700;font-size:16.5px;color:var(--navy);cursor:pointer;list-style:none;position:relative;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:28px;width:10px;height:10px;border-right:2.4px solid var(--gold);border-bottom:2.4px solid var(--gold);transform:rotate(45deg);transition:transform .28s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{padding:0 8px 24px 0;font-size:16px;max-width:70ch}

/* ---- closing contact band ----------------------------------------------------- */
.close{display:grid;gap:clamp(30px,5vw,64px)}
@media(min-width:940px){.close{grid-template-columns:.95fr 1.05fr;align-items:start}}
.close h2{font-size:clamp(30px,4.6vw,50px)}
.close__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.details{display:grid;gap:0}
@media(min-width:560px){.details{grid-template-columns:1fr 1fr}}
.detail{padding:20px 0;border-top:1px solid var(--line-dark);text-decoration:none;display:block;transition:border-color .25s}
a.detail:hover{border-top-color:var(--gold)}
.detail .k{display:block;font-family:var(--display);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#8E9EC0;font-weight:700;margin-bottom:6px}
.detail .v{color:#fff;font-family:var(--display);font-weight:700;font-size:17px;text-decoration:none;display:block;transition:color .25s}
a.detail:hover .v{color:var(--gold-soft)}
.detail small{color:#8E9EC0;font-size:13px;display:block;margin-top:4px}

/* ---- footer -------------------------------------------------------------------- */
.foot{background:var(--navy-deep);color:#8695B5;padding:46px 0 128px;font-size:14px}
@media(min-width:760px){.foot{padding-bottom:46px}}
.foot__in{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center;justify-content:space-between}
.foot img{height:38px;width:auto;margin-bottom:10px}
.foot a{color:#BCC7DE}
.foot__links{display:flex;flex-wrap:wrap;gap:10px 22px}
.foot__links a{text-decoration:none;font-size:13.5px;font-weight:600;transition:color .2s}
.foot__links a:hover{color:#fff}
.foot__cred{font-size:13px;color:#5F6C8C}

/* ---- mobile dock ---------------------------------------------------------------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:95;display:grid;grid-template-columns:1.6fr 1fr;gap:10px;padding:11px 13px calc(11px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.dock .btn{width:100%;padding:13px;font-size:15px;min-height:48px}
@media(min-width:760px){.dock{display:none}}

/* ---- reveal on scroll ------------------------------------------------------------ */
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .u-gold::after{transform:scaleX(1)}
}

/* ---- cart drawer ------------------------------------------------------------------ */
.cart-drawer{position:fixed;inset:0;z-index:120;visibility:hidden}
.cart-drawer.is-open{visibility:visible}
.cart-drawer__backdrop{position:absolute;inset:0;background:rgba(8,26,54,.6);opacity:0;transition:opacity .35s var(--ease)}
.cart-drawer.is-open .cart-drawer__backdrop{opacity:1}
.cart-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(430px,92vw);background:#fff;box-shadow:-24px 0 60px -30px rgba(8,26,54,.6);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .4s var(--ease)}
.cart-drawer.is-open .cart-drawer__panel{transform:none}
@media(max-width:700px){
  .cart-drawer__panel{top:auto;width:100%;max-height:88vh;border-radius:20px 20px 0 0;transform:translateY(100%)}
  .cart-drawer.is-open .cart-drawer__panel{transform:none}
}
.cart-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}
.cart-drawer__head h3{font-size:20px;font-weight:800}
.cart-drawer__close{width:36px;height:36px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-size:19px;color:var(--navy)}
.cart-drawer__close:hover{background:var(--line)}
.cart-drawer__items{flex:1;overflow-y:auto;padding:8px 24px}
.cart-empty{font-size:15px;color:var(--muted);padding:28px 0}
.cart-item{display:flex;align-items:center;gap:13px;padding:16px 0;border-bottom:1px solid var(--line)}
.cart-item:last-child{border-bottom:0}
.cart-item__info{flex:1;display:flex;flex-direction:column;gap:3px}
.cart-item__g{font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--navy)}
.cart-item__p{font-size:13.5px;color:var(--muted)}
.cart-item__qty{display:flex;align-items:center;gap:11px;background:var(--surface);border-radius:var(--pill);padding:6px 11px;font-family:var(--display);font-weight:700;color:var(--navy)}
.qty-btn{width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:15px;line-height:1;color:var(--navy)}
.qty-btn:hover{border-color:var(--gold);color:var(--gold-deep)}
.cart-item__rm{width:30px;height:30px;border-radius:50%;color:#B03A3A;font-size:17px;display:grid;place-items:center}
.cart-item__rm:hover{background:#FBEBEB}
.cart-drawer__foot{padding:20px 24px calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface)}
.cart-drawer__total{display:flex;align-items:baseline;justify-content:space-between;font-family:var(--display);font-weight:700;font-size:16px;color:var(--navy);margin-bottom:16px}
.cart-drawer__total span:last-child{font-size:26px;font-weight:800}
.cart-drawer__foot .binput+.binput{margin-top:10px}

/* ---- short viewports: keep the whole hero on one screen -------------------------- */
@media(max-height:720px) and (min-width:700px){
  .hero h1{font-size:clamp(30px,4.4vw,44px)}
  .hero__sub{font-size:17px}
}
@media(max-width:600px){
  :root{--navh:64px}
  .hero h1{font-size:clamp(29px,8vw,40px)}
  .hero__cta .btn{flex:0 1 auto}
}
/* Below 760px the sticky dock owns the bottom edge, so the hero rail would
   sit behind it. Drop it and let the hero content take the full height. */
@media(max-width:760px){
  .hero__rail{display:none}
  .hero__body{padding-block:clamp(20px,4vh,44px)}
}
@media(max-width:600px) and (max-height:700px){
  .hero__sub{display:none}
}

/* ============================================================
   List uploader (stationery) — lets a parent stage a photo of
   the school's list before checkout. There's no backend, so
   files never leave the browser; the honest framing is "get it
   ready to attach", not "send it to us automatically". --------
   ============================================================ */
.uploader__zone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:2px dashed var(--line);border-radius:var(--r-lg);padding:clamp(28px,5vw,44px) 20px;
  text-align:center;cursor:pointer;background:#fff;transition:border-color .2s,background .2s;
}
.uploader__zone:hover,.uploader__zone.is-dragover{border-color:var(--gold);background:#FFFCF4}
.uploader__zone svg{color:var(--navy);flex:none}
.uploader__cta{font-family:var(--display);font-weight:700;font-size:16px;color:var(--navy)}
.uploader__hint{font-size:13.5px;color:var(--muted);max-width:36ch}

.uploader__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px;margin-top:16px}
.uploader__item{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--surface-2);aspect-ratio:3/4;border:1px solid var(--line)}
.uploader__item img{width:100%;height:100%;object-fit:cover}
.uploader__item--doc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--navy)}
.uploader__item--doc span{font-size:11px;font-weight:700;padding:0 6px;text-align:center;word-break:break-word}
.uploader__item figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 5px;font-size:10.5px;color:#fff;background:linear-gradient(transparent,rgba(8,26,54,.85));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uploader__rm{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;background:rgba(8,26,54,.75);color:#fff;font-size:15px;line-height:1;display:grid;place-items:center}
.uploader__rm:hover{background:var(--navy)}

.uploader__note{display:flex;align-items:flex-start;gap:9px;margin-top:18px;font-size:13.5px;color:var(--muted);max-width:60ch}
.uploader__note svg{flex:none;margin-top:2px;color:var(--gold-deep)}

/* small summary line reused in the cart drawer, so checkout reflects
   whatever was staged in the uploader without duplicating the widget */
.uploader__summary{
  display:flex;align-items:center;gap:10px;padding:12px 14px;margin-top:14px;
  background:var(--surface);border-radius:10px;font-size:13.5px;color:var(--navy);font-weight:600;
}
.uploader__summary svg{flex:none;color:var(--gold-deep)}
.uploader__summary a{color:var(--navy);text-decoration:underline;font-weight:700}