/* ==========================================================================
   Joyous Learning Academy — design system
   EVERY colour below is sampled from the Joyous Learning logo, so the site and
   the wordmark agree: red #074151, amber #B3251F, mustard #EFEAD6, green
   #527043, tan #9C5062, purple #4A54C4, orange #E21C21, near-black #111111.
   Type: Caveat (headings) · Inter (body and UI labels)
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --ink:#111111;      /* the tree trunk and the child */
  --ink-2:#3A3A3A;
  --ink-3:#5A5A5A;
  --line:#E8E8E6;
  --line-2:#D6D6D2;

  --brand:#074151;    /* the big red circle */
  --brand-dark:#042F3A;
  --brand-tint:#DAF1EB;
  --amber:#B3251F;    /* the two amber circles */
  --amber-tint:#FEEAEA;
  --olive:#527043;    /* the green circles */
  --olive-tint:#E3E9DD;   /* reference sage */
  /* the mustard circles (#EFEAD6) appear as the pale wash --band-2 below */
  --plum:#4A54C4;     /* the purple end of the wordmark */
  --plum-tint:#D7F0F6;    /* reference pale blue (no periwinkle on the reference) */
  --clay:#9C5062;     /* the brown circle */
  --clay-tint:#EDF6E4;    /* reference pale green (no rose on the reference) */
  --orange:#E21C21;   /* the orange start of the wordmark */
  --topbar:#C81A1F;   /* the announcement strip: the logo's red circle, NOT the
                         near-black used by the stat band and the footer. White
                         text on it reads at 7.6:1. The logo's green (#527043,
                         3.1:1) and orange (#E21C21, 3.9:1) are too light to
                         carry this strip's small white text. */
  /* darkened variants of the same hues, for small text (>=4.5:1 on the tints) */
  --olive-ink:#4A6B3C;
  --amber-ink:#96201B;

  /* two pale washes taken from the same circles, used to band the sections */
  --band:#FEEAEA;
  --band-2:#F3F1E1;

  --radius-s:10px;
  --radius:16px;
  --radius-l:26px;
  --radius-pill:999px;

  --shadow-s:0 1px 2px rgba(28,25,23,.06), 0 2px 8px rgba(28,25,23,.05);
  --shadow-m:0 2px 6px rgba(28,25,23,.06), 0 14px 34px rgba(28,25,23,.09);
  --shadow-l:0 4px 10px rgba(28,25,23,.07), 0 26px 60px rgba(28,25,23,.13);

  --wrap:1180px;
  --gap:clamp(20px,4vw,40px);
  --sect:clamp(34px,4.2vw,58px);
  /* one body size for every paragraph on the site */
  --fs-body:1.03rem;

  --font-display:"Caveat","Segoe Script","Bradley Hand",cursive;
  --font-text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-hand:"Caveat","Segoe Script",cursive;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:106.25%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-text);font-size:var(--fs-body);
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--brand-dark)}
button{font:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}

/* Caveat draws noticeably smaller and sits lower on the baseline than a text
   face, so headings carry a larger size and a touch more leading to keep the
   same presence — and no negative tracking, which crowds handwriting. */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.14;
  letter-spacing:0;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(2.5rem,5.6vw,4.1rem)}
h2{font-size:clamp(2rem,4vw,3.05rem)}
h3{font-size:clamp(1.5rem,2.4vw,1.9rem)}
h4{font-size:1.06rem;font-family:var(--font-text);font-weight:700;letter-spacing:0}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
/* every block of body copy sits on the same size */
.card p,.pcard p,.why-item p,.acc-body p,.split>div>p,.info-list span,.info-list a,
.cta-list li,.checks li,.hours dd,.hours dt{font-size:var(--fs-body)}
strong{font-weight:650}
.lede{font-size:1.09rem;color:var(--ink-2)}
.hand{font-family:var(--font-hand);font-size:clamp(1.75rem,3vw,2.4rem);
  font-weight:600;color:var(--brand);line-height:1.25;margin:0 0 .35em;
  transform:rotate(-1.4deg);display:inline-block}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(18px,4vw,32px)}
section{padding-block:var(--sect)}
.section--tight{padding-block:clamp(26px,3.2vw,40px)}
.center{text-align:center}
.measure{max-width:62ch}
.measure-wide{max-width:76ch}
.mx-auto{margin-inline:auto}
.stack>*+*{margin-top:1rem}

/* ---------- eyebrow / section head ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.9rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand);margin:0 0 .7rem
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px}
.eyebrow--light{color:#BEE0DB}
.section-head{max-width:70ch;margin-bottom:clamp(18px,2.6vw,30px)}
/* A section head whose block is as wide as the content beside/below it (the contact
   page's Find us block sits above a full-width map): the 70ch cap made the long
   heading drop "Central" onto its own line and cut the paragraphs short of the map. */
.section-head--wide{max-width:none}
.section-head.center{margin-inline:auto}
.section-head h2+p{margin-top:.6rem}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--brand);--btn-fg:#fff;--btn-bd:var(--brand);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.86em 1.5em;border:1.5px solid var(--btn-bd);background:var(--btn-bg);color:var(--btn-fg);
  font-weight:650;font-size:.97rem;border-radius:var(--radius-pill);text-decoration:none;
  cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
  box-shadow:var(--shadow-s);white-space:nowrap;line-height:1.2
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-m);color:var(--btn-fg)}
.btn:active{transform:translateY(0)}
.btn--lg{font-size:1.04rem;padding:1em 1.8em}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line-2);box-shadow:none}
.btn--ghost:hover{--btn-bd:var(--ink);box-shadow:var(--shadow-s)}
.btn--light{--btn-bg:#fff;--btn-fg:var(--brand-dark);--btn-bd:#fff}
.btn--outline-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.55);box-shadow:none}
.btn--outline-light:hover{--btn-bd:#fff}
.btn--wa{--btn-bg:#1F7A4D;--btn-bd:#1F7A4D}
.btn--red{--btn-bg:#C4161B;--btn-bd:#C4161B}
.btn--green{--btn-bg:#527043;--btn-bd:#527043}     /* the logo's green circle */
.btn--green:hover{--btn-bg:#5A7A4B;--btn-bd:#5A7A4B}
.btn svg{width:1.15em;height:1.15em;flex:0 0 auto}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.textlink{font-weight:650;display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  border-bottom:2px solid currentColor;padding-bottom:1px}
.textlink:hover{gap:.7rem;transition:gap .18s ease}

/* ---------- header ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.7em 1.1em;z-index:200}
.skip:focus{left:12px;top:12px}
.topbar{background:var(--topbar);color:#FFFFFF;font-size:.85rem}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:space-between;
  align-items:center;padding-block:.5rem}
.topbar a{color:#FFFFFF;font-weight:600;text-decoration:none;white-space:nowrap}
.topbar a:hover{text-decoration:underline}
.topbar .tb-items{display:flex;flex-wrap:wrap;gap:.35rem 1.3rem;align-items:center}
.topbar .dot{opacity:.55}
@media(max-width:640px){.topbar .tb-hide{display:none}}

.site-header{position:sticky;top:0;z-index:90;background:var(--paper);border-bottom:1px solid var(--line)}
/* the drawer sits inside this sticky header, so the header's stacking order caps it:
   at 60 the floating WhatsApp button (80) painted over an open menu. */
/* NOTE: no backdrop-filter/transform here — either one makes the header a
   containing block for fixed-position descendants, which breaks the mobile
   nav drawer (it sizes to the header instead of the viewport). */
.site-header .wrap{display:flex;align-items:center;gap:1.2rem;min-height:80px;padding-block:1rem .75rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand img{width:192px;height:auto;display:block}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:var(--font-display);font-weight:600;font-size:1.55rem;line-height:1}
.brand-sub{font-size:.9rem;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3)}
.nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.nav a,.nav .navtoggle{
  font-size:.92rem;font-weight:550;color:var(--ink-2);text-decoration:none;
  padding:.5em .6em;border-radius:var(--radius-s);background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:.35rem;line-height:1.2
}
.nav a:hover,.nav .navtoggle:hover{color:var(--ink);background:#F3F1E1}
.nav a[aria-current="page"]{color:var(--brand);background:var(--brand-tint);font-weight:650}
.header-cta{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;flex:0 0 auto}
.btn--sm{font-size:.85rem;padding:.52em 1.05em}
.btn--sm svg{width:1em;height:1em}
@media(max-width:1180px){.header-cta .btn--wa{display:none}}

/* dropdown */
.has-menu{position:relative;display:inline-flex;align-items:center;gap:.05rem}
.has-menu>.navlink{padding-right:.4em}
.has-menu .navtoggle{padding-left:.4em}
.menu-all{font-weight:700;color:var(--brand)!important;border-bottom:1px solid var(--line);
  border-radius:10px 10px 0 0;margin-bottom:.35rem}
.menu-all b{color:var(--brand)}
.menu{position:absolute;top:calc(100% + 8px);left:0;min-width:290px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-m);
  padding:.5rem;display:none;z-index:70}
.menu.open{display:block}
.menu a{display:block;padding:.6em .75em;border-radius:10px;font-size:.93rem}
.menu .menu-h{font-size:.9rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  padding:.6em .75em .3em;font-weight:700}
.menu a small{display:block;color:var(--ink-3);font-size:.9rem;font-weight:400}
/* The panel drops 8px below its trigger, and that strip was a DEAD BAND. The menu opens
   on hover of the wrapper, so moving the cursor straight down from "About" to "FAQs" left
   the wrapper for those 8 pixels, `mouseleave` fired, the panel closed, and whatever was
   then under the pointer got the click — "Faq got problem to click on in the laptop
   website" (10 Oct 2026). This invisible strip is part of the PANEL's own box, so the
   pointer never leaves the hover area on the way down.
   Desktop only: inside the drawer the panel is in normal flow and a strip there would sit
   over the row above it. */
@media (min-width:1001px){
  .menu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:10px}
}

/* burger + mobile nav */
.burger{display:none;margin-left:auto;background:none;border:1.5px solid var(--line-2);
  border-radius:10px;padding:.5rem .6rem;cursor:pointer;color:var(--ink);position:relative;z-index:90}
.burger span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .2s ease,opacity .15s ease}
.burger span+span{margin-top:4px}
@media(max-width:1120px){
  .burger{display:block}
  /* keep the toggle above the drawer and turn it into a close affordance */
  .burger[aria-expanded="true"]{position:fixed;top:.85rem;left:1rem;background:#fff;
    box-shadow:var(--shadow-s)}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .nav{position:fixed;inset:0 auto 0 0;width:min(88vw,380px);background:#fff;padding:5rem 1.2rem 2rem;
    flex-direction:column;align-items:stretch;gap:.1rem;transform:translateX(-102%);
    transition:transform .28s ease;box-shadow:var(--shadow-l);overflow:auto;z-index:80;margin:0}
  .nav.open{transform:none}
  .nav a,.nav .navtoggle{font-size:.92rem;padding:.75em .6em;justify-content:space-between}
  /* the open submenu is a flex child of the row: without wrapping it was squeezed
     into a ~144px sliver beside the label and every item wrapped to three lines.
     Wrap the row so the panel drops below at full width. */
  .has-menu{display:flex;flex-wrap:wrap;width:100%;align-items:center}
  .has-menu>.navlink{flex:1}
  .has-menu .navtoggle{margin:0;color:var(--ink-2);font-size:1.02rem;letter-spacing:0;text-transform:none}
  .menu{position:static;display:none;flex-basis:100%;width:100%;box-shadow:none;border:0;
    padding:.1rem 0 .6rem .5rem;min-width:0}
  .menu.open{display:block}
  .menu a{padding:.6em .55em;font-size:.93rem}
  .menu a small{font-size:.9rem}
  .menu-all{margin-bottom:.1rem}
  /* the drawer must sit above the WhatsApp button, and the close button above the drawer */
  .nav{z-index:96}
  .burger[aria-expanded="true"]{z-index:97}
  .header-cta{display:none}
  /* the drawer's own Book-a-Trial link: .nav a outranks .btn, so without this it
     rendered as a plain transparent row with dark text instead of a button. */
  .nav .nav-cta{display:flex;margin-top:1rem;justify-content:center;align-items:center;
    background:var(--brand);color:#fff;border:0;border-radius:999px;padding:.9em 1.2em;
    font-weight:650;font-size:.95rem;text-align:center;box-shadow:var(--shadow-s)}
  .nav .nav-cta:hover,.nav .nav-cta:focus-visible{background:var(--brand-dark);color:#fff}
}
@media(min-width:1001px){.nav .nav-cta{display:none}}
.nav-scrim{position:fixed;inset:0;background:rgba(28,25,23,.42);opacity:0;pointer-events:none;
  transition:opacity .25s ease;z-index:55}
.nav-scrim.on{opacity:1;pointer-events:auto}

/* ---------- hero ---------- */
.hero{padding-block:clamp(34px,5vw,66px) clamp(40px,6vw,80px);position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--brand-tint) 0%,#F2FAF8 100%)}
.hero::before{content:"";position:absolute;inset:auto -10% 55% 55%;height:520px;
  background:radial-gradient(closest-side,var(--amber-tint),transparent);z-index:-1}
/* one column: title, subtitle, the two buttons, then the image */
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.6vw,30px);justify-items:start}
.hero-grid > *{max-width:100%}
.hero .hero-media{width:100%;margin-block:clamp(6px,1.4vw,14px)}
.hero .hero-media>img{aspect-ratio:16/9;object-position:50% 42%}
.hero .hand{margin-top:clamp(4px,1vw,10px)}
.hero-body{color:var(--ink);max-width:60ch;margin:0;font-size:1.09rem;font-weight:400}
.hero-btns{margin-top:.5rem}
/* decorative blob: sits in the empty space on the right of the hero, breathes there for good */
.hero .hero-blob{position:absolute;right:-6%;top:20%;translate:0 -50%;
  width:clamp(625px,90vw,1400px);z-index:0;pointer-events:none;
  animation:blobIn .75s cubic-bezier(.2,.75,.25,1) both}
.hero .hero-blob img{width:100%;height:auto;opacity:.35;transform-origin:74% 50%;
  animation:blobLiquid 4.5s ease-in-out .75s infinite}
.hero>.wrap{position:relative;z-index:1}
/* keeps the wording on clean cream: the blob fades out under the text, stays strong on the right */
.hero .hero-wash{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(251,245,238,.97) 0%,rgba(251,245,238,.94) 38%,
    rgba(251,245,238,.6) 56%,rgba(251,245,238,0) 78%)}
@keyframes blobIn{
  from{transform:translate(95%,0) rotate(-6deg) scale(.85);opacity:0}
  to{transform:translate(0,0) rotate(0) scale(1);opacity:1}}
/* liquid: swells and shrinks in place on the right, never settles.
   Timings after the owner asked for it to breathe faster: 4.5s a cycle for
   everyone, 18s for visitors who have animations switched off. */
@keyframes blobLiquid{
  0%{transform:scale(1) rotate(0deg) translate(0,0) skew(0deg,0deg)}
  18%{transform:scale(1.12) rotate(3.5deg) translate(.8%,-2%) skew(1deg,-.6deg)}
  38%{transform:scale(.92) rotate(-3deg) translate(-.8%,2%) skew(-1deg,.6deg)}
  58%{transform:scale(1.08) rotate(2.5deg) translate(.6%,1.4%) skew(.8deg,.4deg)}
  78%{transform:scale(.95) rotate(-1.8deg) translate(-.6%,-1.2%) skew(-.8deg,-.4deg)}
  100%{transform:scale(1) rotate(0deg) translate(0,0) skew(0deg,0deg)}}
@keyframes blobLiquidGentle{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.06) rotate(1.5deg)}}
/* long button labels wrap instead of pushing the page sideways */
@media(max-width:560px){.btn{white-space:normal;text-align:center;max-width:100%}}
/* the two hero buttons were oversized on a phone: smaller text and tighter padding,
   still a comfortable 42px tap target */
@media(max-width:640px){
  .hero-btns{gap:.55rem}
  .hero-btns .btn--lg{font-size:1rem;padding:.62em 1.2em}
}
/* phones: the blob sat at 42% of a very tall hero, so it landed below the title and
   behind the body copy where its motion was easy to miss. Bring it up to sit with
   the heading, and a touch stronger so the movement actually reads. */
@media(max-width:880px){.hero .hero-blob{width:150vw;right:-45%;top:11%}
  .hero .hero-blob img{opacity:.45}}

.hero h1{margin-bottom:.45em;max-width:20ch}
.hero .eyebrow{display:flex}
.hero .hand{display:block;margin:.55rem 0 .5rem}
.hero .lede{max-width:56ch}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 .2rem;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:.42em .95em;font-size:var(--fs-body);font-weight:600;color:var(--ink-2);
  box-shadow:var(--shadow-s)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--amber);display:block}
.chip:nth-child(2) i{background:var(--olive)}
.chip:nth-child(3) i{background:var(--plum)}
.chip:nth-child(4) i{background:var(--clay)}
a.chip{text-decoration:none;transition:box-shadow .18s ease,transform .18s ease}
a.chip:hover{box-shadow:var(--shadow-m)}
.chip--wa{background:#1F7A4D;border-color:#1F7A4D;color:#fff;--amber:#fff}
.chip--wa i{background:#fff}
/* the global a:hover colour (dark teal) is meant for plain text links. It outranks
   these components' own colour and would paint dark teal on a dark green button —
   the "dark text on a dark button" the owner reported on 10 Oct 2026. Each one that
   is light-on-dark therefore states its own hover colour. */
.chip--wa:hover,.wa-float:hover,.rev-more:hover,.skip:hover{color:#fff}
/* the four hero points, highlighted */
.hero .chip{background:var(--amber-tint);border-color:transparent;color:var(--amber-ink);font-weight:650;font-size:var(--fs-body)}
.hero .chip i{background:currentColor;opacity:.55}
.hero .chip:nth-child(2){background:var(--olive-tint);color:var(--olive-ink)}
.hero .chip:nth-child(3){background:var(--plum-tint);color:var(--plum)}
.hero .chip:nth-child(4){background:var(--clay-tint);color:var(--clay)}
.chip--wa svg{flex:0 0 auto}
.map-embed{position:relative;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-m);background:#fff}
.map-embed iframe{display:block;width:100%;height:clamp(300px,44vw,440px);border:0}
/* floating WhatsApp widget */
.wa-float{position:fixed;right:1.1rem;bottom:1.1rem;z-index:80;display:inline-flex;align-items:center;gap:.55rem;
  background:#1F7A4D;color:#fff;text-decoration:none;font-weight:650;font-size:.95rem;
  padding:.7rem 1.05rem;border-radius:999px;box-shadow:0 8px 22px rgba(0,0,0,.22);
  transition:transform .16s ease,box-shadow .16s ease}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.28)}
.wa-float svg{width:22px;height:22px;flex:0 0 auto}
/* Back to top: sits directly above the WhatsApp bubble so the two never overlap.
   The offsets are the bubble's own bottom + its height + a gap. */
.totop{position:fixed;right:1.1rem;bottom:4.55rem;z-index:80;width:2.75rem;height:2.75rem;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:50%;
  box-shadow:0 8px 22px rgba(0,0,0,.18);cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.totop svg{width:20px;height:20px}
.totop:hover{background:var(--ink);color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.24)}
.totop[hidden]{display:none}
@media(max-width:640px){
  .wa-float{right:.7rem;bottom:.7rem;padding:.75rem;border-radius:50%;gap:0}
  .wa-float-txt{display:none}
  .wa-float svg{width:26px;height:26px}
  .totop{right:.7rem;bottom:4.35rem;width:3.1rem;height:3.1rem}
}
.hero-media{position:relative}
.hero-media>img{border-radius:var(--radius-l);box-shadow:var(--shadow-l);aspect-ratio:4/4.4;object-fit:cover}
/* The card used to sit over the photo. Once its text grew to read as a heading it covered
   a child's face, so it now sits below the image at every width, figure beside its text. */
.hero-card{position:static;background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow-m);padding:.9rem 1.15rem;border:1px solid var(--line);
  display:inline-flex;align-items:center;gap:1rem;margin:14px 0 0;max-width:none}
.hero-card b{font-family:var(--font-display);font-size:2.6rem;line-height:1;flex:0 0 auto;color:var(--brand-dark)}
.hero-card span{font-size:1.25rem;line-height:1.3;color:var(--ink-2)}
.hero-note{margin-top:1.3rem;font-size:var(--fs-body);color:var(--ink-3)}
@media(max-width:900px){.hero-card{width:100%}}

/* ---------- trust strip ---------- */
.strip{background:#074151;color:#DAF1EB}
.strip .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,34px)}
@media(max-width:800px){.strip .grid{grid-template-columns:1fr 1fr;gap:14px 18px}}
/* the four figures stay in two columns even on the narrowest phones — a single
   column made this dark band four screens tall */
@media(max-width:440px){
  .strip .grid{grid-template-columns:1fr 1fr;gap:10px 14px}
  .strip b{font-size:1.9rem}
  .strip span{font-size:var(--fs-body)}
  .strip small{font-size:.9rem}
}
.strip .item{padding-block:clamp(18px,2.4vw,26px)}
.strip b{font-family:var(--font-display);font-size:clamp(1.85rem,3.1vw,2.5rem);display:block;line-height:1;color:#fff}
.strip span{font-size:var(--fs-body);color:#AFC9C5}
.strip small{display:block;margin-top:.35rem;font-size:.9rem;color:#A6C0BC}

/* ---------- cards ---------- */
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,2.4vw,28px);box-shadow:var(--shadow-s);display:flex;flex-direction:column;gap:.6rem}
.card h3{margin-bottom:.15em}
.card p{color:var(--ink-2);font-size:var(--fs-body)}
.card--tint{background:#fff;border-color:var(--line)}
.ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--brand-tint);
  color:var(--brand);font-size:1.25rem;flex:0 0 auto}
.ico--amber{background:var(--amber-tint);color:var(--amber-ink)}
.ico--olive{background:var(--olive-tint);color:var(--olive-ink)}
.ico--plum{background:var(--plum-tint);color:var(--plum)}
.ico--clay{background:var(--clay-tint);color:var(--clay)}

/* programme cards */
.pcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-s);display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.pcard img{aspect-ratio:4/3;object-fit:cover;width:100%}
.pcard-body{padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;gap:.45rem;flex:1}
.pcard .tag{align-self:flex-start;font-size:.9rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-tint);border-radius:var(--radius-pill);padding:.3em .8em}
.pcard .tag--pri{color:var(--olive-ink);background:var(--olive-tint)}
.pcard .tag--sec{color:var(--plum);background:var(--plum-tint)}
.pcard .tag--sp{color:var(--clay);background:var(--clay-tint)}
.pcard h3{font-size:1.5rem;margin:0;line-height:1.2}
.pcard p{font-size:var(--fs-body);color:var(--ink-2);flex:1}
.pcard .go{font-weight:650;font-size:.9rem;text-decoration:none;display:inline-flex;gap:.4rem;align-items:center}
.pcard:hover .go{gap:.7rem;transition:gap .18s ease}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,64px);align-items:center}
.split--rev .split-media{order:2}
@media(max-width:900px){.split{grid-template-columns:1fr}.split--rev .split-media{order:0}}
.split-media img{border-radius:var(--radius-l);box-shadow:var(--shadow-m);width:100%;object-fit:cover}
.split-media--tall img{aspect-ratio:4/4.2}
.split-media--wide img{aspect-ratio:4/3}
.badge-float{position:absolute;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:.7rem .95rem;box-shadow:var(--shadow-m);font-size:.9rem;font-weight:600}
.split-media{position:relative}
/* home feature: the photo runs right up to the left edge of the page */
@media(min-width:901px){
  .split--bleed{--bleed-out:calc((100vw - min(100vw,1180px)) / 2 + clamp(18px,4vw,32px))}
  .split--bleed>.split-media{margin-left:calc(-1 * var(--bleed-out))}
  .split--bleed>.split-media img{width:calc(100% + var(--bleed-out));
    border-radius:0 var(--radius-l) var(--radius-l) 0}
}

/* checklist */
.checks{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.65rem}
.checks li{position:relative;padding-left:2rem;color:var(--ink-2)}
.checks li::before{content:"";position:absolute;left:0;top:.42em;width:1.2rem;height:1.2rem;
  border-radius:50%;background:var(--olive-tint) no-repeat center/0.7rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23859E04' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.checks--brand li::before{background-color:var(--brand-tint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AD0002' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* levels */
.level{position:relative;border-radius:var(--radius-l);overflow:hidden;min-height:340px;
  display:flex;align-items:flex-end;box-shadow:var(--shadow-m);isolation:isolate}
.level img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.level::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(18,15,13,.94) 6%,rgba(18,15,13,.78) 42%,rgba(18,15,13,.45) 70%,rgba(18,15,13,.22))}
.level-body{padding:clamp(20px,2.6vw,32px);color:#fff}
.level-body h3{color:#fff;font-size:1.8rem;margin-bottom:.3rem}
.level-body p{color:#E9F1EE;font-size:var(--fs-body);margin-bottom:.9rem}
.level-links{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0;list-style:none}
.level-links a{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  color:#fff;text-decoration:none;font-size:.9rem;font-weight:600;padding:.4em .85em;border-radius:var(--radius-pill)}
.level-links a:hover{background:#fff;color:var(--ink)}

/* ---------- fees ---------- */
.fee-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-s)}
/* Visually hidden but still announced: used where a table caption repeats a chip or
   heading that is already on screen, so the table keeps its accessible name. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.fee-table caption.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.fee-table caption{text-align:left;padding:1rem 1.2rem .2rem;font-weight:700;color:var(--ink-2);font-size:.9rem}
.fee-table th,.fee-table td{padding:.85em 1.1em;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.fee-table thead th{background:var(--band-2);font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.fee-table tbody th{font-weight:600;color:var(--ink)}
.fee-table td b{font-family:var(--font-text);font-weight:700;font-size:1.02rem}
.fee-table tr:last-child th,.fee-table tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto;border-radius:var(--radius)}
/* at 320-380px the price column was clipped by ~30px: trim the cells so the
   whole table fits without sideways scrolling (the scroll stays as a fallback) */
@media(max-width:380px){
  .fee-table th,.fee-table td{padding:.72em .6em;font-size:var(--fs-body)}
  .fee-table caption{padding:.85rem .7rem .15rem;font-size:.9rem}
  .fee-table td b{font-size:.95rem}
  .fee-table thead th{font-size:.9rem;letter-spacing:.06em}
}
.price{display:flex;align-items:baseline;gap:.4rem}
.price b{font-family:var(--font-text);font-weight:700;font-size:1.55rem;line-height:1}

/* ---------- accordion ---------- */
.acc{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;
  box-shadow:var(--shadow-s);margin-bottom:.7rem}
.acc summary{cursor:pointer;padding:1.05em 3.2em 1.05em 1.15em;font-weight:600;position:relative;
  list-style:none;font-size:var(--fs-body)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:1.15em;top:50%;width:1.15rem;height:1.15rem;
  transform:translateY(-50%);background:no-repeat center/contain
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AD0002' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition:transform .22s ease}
.acc[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.acc summary:hover{background:#F2FAF8}
.acc .acc-body{padding:0 1.15em 1.2em;color:var(--ink-2);font-size:var(--fs-body);border-top:1px solid var(--line);
  margin-top:0;padding-top:1em}
.acc-body p{margin-bottom:.8em}
.tabs{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.6rem}
.tab{background:#fff;border:1.5px solid var(--line-2);border-radius:var(--radius-pill);
  padding:.5em 1.1em;font-size:.9rem;font-weight:600;color:var(--ink-2);cursor:pointer}
.tab[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.tab:hover:not([aria-selected="true"]){border-color:var(--ink-3);color:var(--ink)}
.faq-panel[hidden]{display:none}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,#03262F 0%,#074151 46%,#0A5A63 100%);color:#fff;
  border-radius:0;padding-block:clamp(34px,5.2vw,70px);position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;inset:-40% -10% auto auto;width:520px;height:520px;
  background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent);pointer-events:none}
.cta-band h2,.cta-band h3{color:#fff}
.cta-band p{color:#CDE7E3}
.cta-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(24px,4vw,54px);align-items:start;
  position:relative;z-index:1}
@media(max-width:880px){.cta-grid{grid-template-columns:1fr}}
.cta-list{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.5rem}
.cta-list li{padding-left:1.7rem;position:relative;color:#CDE7E3;font-size:var(--fs-body)}
.cta-list li::before{content:"✓";position:absolute;left:0;color:#BEE0DB;font-weight:700}

/* ---------- form ---------- */
.form{background:#fff;border-radius:var(--radius);padding:clamp(20px,2.6vw,30px);box-shadow:var(--shadow-m);
  border:1px solid var(--line);color:var(--ink)}
.form h3{margin-bottom:.2rem}
.form .hint{font-size:var(--fs-body);color:var(--ink-3);margin-bottom:1.1rem}
.field{margin-bottom:.9rem}
.field label{display:block;font-size:.9rem;font-weight:650;margin-bottom:.35rem}
.field input,.field select,.field textarea{
  width:100%;padding:.78em .9em;border:1.5px solid var(--line-2);border-radius:10px;
  font:inherit;font-size:var(--fs-body);background:#FFFFFF;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(173,0,2,.15)}
.field .err{display:none;color:var(--brand);font-size:.9rem;margin-top:.3rem}
.field.invalid input,.field.invalid select{border-color:var(--brand)}
.field.invalid .err{display:block}
.form-note{font-size:var(--fs-body);color:var(--ink-3);margin-top:.85rem}
/* contact rows: the value text and the links beside it must match exactly — labels such
   as "(mobile · WhatsApp)" were rendering half a pixel larger than the phone numbers. */
.info-list li>span:last-child{font-size:17px}
/* The call-to-action band sets its own pale copy (#CDE7E3) for the dark red behind it,
   and .cta-band p (0,1,1) outranks .form-note (0,1,0). But these paragraphs sit inside
   the WHITE form card, where that colour measures 1.22:1 — invisible. Scoped so the
   band's own copy on the red is untouched. */
.cta-band .form p{color:var(--ink-2);font-size:var(--fs-body)}
.cta-band .form p.form-ok{color:var(--ink-2)}
.form-ok{display:none;background:var(--olive-tint);border:1px solid #D3DDC9;border-radius:10px;
  padding:.9rem 1rem;color:#4A6B3C;font-size:var(--fs-body);font-weight:600}
.form-ok.on{display:block}

/* ---------- contact ---------- */
.info-list{list-style:none;padding:0;margin:0;display:grid;gap:1.15rem}
.info-list li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.info-list .ico{width:40px;height:40px;font-size:1.1rem}
.info-list b{display:block;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.info-list span,.info-list a{font-size:1rem;color:var(--ink);text-decoration:none}
.info-list a:hover{color:var(--brand)}
.hours{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,2.4vw,28px);
  box-shadow:var(--shadow-s)}
.hours dl{display:grid;grid-template-columns:1fr auto;gap:.4rem 1rem;margin:0;font-size:.95rem}
.hours dt{color:var(--ink-2)}
.hours dd{margin:0;font-weight:600;text-align:right}

/* ---------- footer ---------- */
.footer{background:#074151;color:#AFC9C5;padding-block:clamp(40px,5vw,64px) 0;
  margin-top:0;font-size:var(--fs-body)}
.footer .footer-h{color:#fff;font-size:1.1rem;letter-spacing:.09em;text-transform:uppercase;
  margin:0 0 1rem;font-family:var(--font-text);font-weight:700}
.footer a{color:#AFC9C5;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(22px,3.4vw,46px)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.footer .fbrand{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.footer .fbrand img{width:150px;background:#fff;border-radius:8px;padding:6px}
.footer .fbrand b{font-family:var(--font-display);color:#fff;font-size:1.5rem;font-weight:600}
.footer-bottom{margin-top:clamp(28px,4vw,46px);border-top:1px solid rgba(255,255,255,.14);
  padding-block:1.2rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;
  font-size:.9rem;color:#A6C0BC}
.footer-bottom a{color:#A6C0BC}
.footer p{line-height:1.5}

/* ---------- page header (inner pages) ---------- */
.page-head{background:var(--band-2);border-bottom:1px solid var(--line);
  padding-block:clamp(30px,4.5vw,58px) clamp(26px,4vw,46px)}
.crumbs{font-size:.9rem;color:var(--ink-3);margin-bottom:.9rem}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--brand);text-decoration:underline}
.crumbs span{margin-inline:.4rem;opacity:.6}
.page-head h1{font-size:clamp(2.3rem,5vw,3.7rem);margin-bottom:.3em;max-width:22ch}
.page-head .lede{max-width:66ch}
.banner{border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-m);margin-top:clamp(22px,3vw,36px)}
.banner img{width:100%;aspect-ratio:16/6;object-fit:cover}

/* level blocks (P4/P5/P6) */
.steps{display:grid;gap:clamp(16px,2.2vw,24px)}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(18px,2.2vw,26px);box-shadow:var(--shadow-s)}
.step .n{width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;display:grid;
  place-items:center;font-weight:700;font-family:var(--font-text);font-size:1.02rem}
.step h3{margin-bottom:.25em;font-size:1.4rem}
.step p{color:var(--ink-2);font-size:var(--fs-body);margin:0}

/* why-list */
.why{display:grid;gap:1.05rem}
.why-item{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
/* the four "what parents value" boxes: each one washed in a light version of a logo colour */
.card--why{padding:clamp(20px,2.5vw,28px);border-radius:var(--radius);
  box-shadow:0 2px 6px rgba(28,25,23,.07), 0 12px 28px rgba(28,25,23,.09)}
.card--why .ico{background:#fff}
/* four DIFFERENT pale versions of four logo colours — red, green, purple, mustard.
   amber and clay used to share #DCEFD2, so two of the four boxes were identical
   and the row read as three colours, not four. */
.why--amber{background:#FCE6E3;border-color:#F4C6BF}
.why--olive{background:#E9F1DB;border-color:#D1E2BB}
.why--plum{background:#E7E9FB;border-color:#CBD1F4}
.why--clay{background:#FAF0D8;border-color:#EEDDB4}
/* the clay card is the mustard one, so its star glyph is a warm brown to match
   (the base --clay rose belongs to a rose wash, which this card no longer is) */
.card--why .ico--clay{color:#8A5A1E}
.why--brand{background:var(--brand-tint);border-color:#CDE7E3}
.why-item h3{font-size:1.32rem;margin-bottom:.2em}
.why-item p{color:var(--ink-2);font-size:var(--fs-body);margin:0}

/* ---------- motion & print ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
/* exception: the hero blob keeps moving for these visitors too, just far more gently */
@media(prefers-reduced-motion:reduce){
  .hero .hero-blob{animation-name:blobIn !important;animation-duration:.45s !important}
  .hero .hero-blob img{animation-name:blobLiquidGentle !important;animation-duration:18s !important;
    animation-timing-function:ease-in-out !important;animation-iteration-count:infinite !important;
    animation-delay:.45s !important}
}
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.js [data-reveal].in{opacity:1;transform:none}
/* ==========================================================================
   Our Teachers + Testimonials  (added for the two pages the Wix menu hid)
   ========================================================================== */
.band{background:var(--paper);border-block:1px solid var(--line)}

.tgrid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}
.tcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.tcard img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 28%;display:block}
.tcard-body{padding:.95rem 1.05rem 1.15rem}
.tcard h3{font-size:1.45rem;margin:0 0 .1rem}
.tcard p{margin:0;font-size:var(--fs-body);color:var(--ink-2)}
.tcard .more{display:inline-block;margin-top:.55rem;font-size:.9rem;font-weight:700}

.profiles{display:grid;gap:0}
.profile{display:grid;grid-template-columns:250px 1fr;gap:clamp(1.4rem,3.5vw,2.6rem);
  padding-block:clamp(1.8rem,4vw,2.8rem);border-top:1px solid var(--line-2);
  scroll-margin-top:110px}   /* so #anchors clear the sticky header */
.profile:first-child{border-top:0;padding-top:.4rem}
.profile img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 28%;
  border-radius:var(--radius);border:1px solid var(--line);display:block;
  align-self:start;position:sticky;top:104px}
.profile h3{font-size:2rem;margin:.1rem 0 .15rem}
.profile-subj{font-size:var(--fs-body);font-weight:600;color:var(--ink-2);margin:0}
.profile p{max-width:66ch;margin:.85rem 0 0}
.profile .eyebrow{margin-bottom:.15rem}
.powers{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:.6rem 0 0}
.powers li{background:var(--brand-tint);border:1px solid var(--line);color:var(--brand-dark);
  border-radius:var(--radius-pill);padding:.28rem .78rem;font-size:var(--fs-body);font-weight:600}
@media(max-width:720px){
  .profile{grid-template-columns:1fr}
  .profile img{max-width:260px;position:static}
}

.quotes{display:grid;gap:1.4rem;grid-template-columns:1fr 1fr}
@media(max-width:760px){.quotes{grid-template-columns:1fr}}
.quote{margin:0;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:var(--radius);padding:1.5rem 1.45rem}
.quote blockquote{margin:0;font-size:1.12rem;line-height:1.62}
.quote blockquote::before{content:"\201C";display:block;font-family:var(--font-display);
  font-size:2.9rem;line-height:.7;color:var(--brand);opacity:.42;margin-bottom:.35rem}
.quote .who{margin-top:.95rem;font-size:.9rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
.quote .who::before{content:"\2014\00a0"}
.pull, .split .pull{margin:1.4rem 0 0;font-family:var(--font-display);font-size:clamp(1.75rem,3.2vw,2.4rem);
  line-height:1.25;color:var(--brand);max-width:30ch}
.note-row{margin-top:1.9rem;font-size:var(--fs-body);color:var(--ink-2)}
.note-row a{font-weight:700}

/* ==========================================================================
   Phones: touch targets and form-field zoom
   - iOS Safari zooms the whole page when a focused field is under 16px, so
     fields go to 16px on small screens and never below.
   - Standalone actions (buttons, "see the programme" links, list links, the
     card titles, footer list links) get a comfortable 44px tap height; inline
     links inside a sentence keep the text flow and are left alone.
   ========================================================================== */
.burger{min-width:44px;min-height:44px}
@media(max-width:1120px){
  .nav a,.nav .navtoggle{min-height:44px}
}
@media(max-width:900px){
  .field input,.field select,.field textarea{font-size:var(--fs-body)}
  .btn,.textlink,.go,.more,.note-row a,.level-links a,.pcard h3 a,.footer ul a{
    display:inline-flex;align-items:center;min-height:44px}
  .topbar a{padding-block:.62rem}   /* 38px -> 44px touch height */
  .brand-sub{font-size:.9rem;letter-spacing:.16em}
  .tag,.pcard .tag{font-size:.9rem}
}

@media print{.site-header,.topbar,.nav-scrim,.cta-band{display:none}}
/* ==========================================================================
   2027 timetable (timetable.html, and the week table on the home page)
   ========================================================================== */
.tt-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem 2.6rem}
/* a grid item will not shrink below its content's minimum unless told to, so a
   wide table inside one pushes the whole page sideways instead of scrolling in
   its own box */
.tt-grid > *{min-width:0}
.tt-block h3{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--font-text);font-size:1.22rem;font-weight:700;line-height:1.25;margin:0 0 .7rem}
/* Each level gets its own pastel, so the blocks are told apart at a glance.
   --lvl is the fill (the bar and its table's header row), --lvl-ink the dark
   text on it, --lvl-edge the border that makes the bar read as a button.
   Checked: text on fill 5.7-9.4:1, and every edge 3.3:1 or better against
   white so the button's outline is actually visible. A colour repeats only
   after the sixth level. */
.tt-lvl-1{--lvl:#DAF1EB;--lvl-ink:#074151;--lvl-edge:#3F8C7E}   /* Primary 4  mint  */
.tt-lvl-2{--lvl:#E3E9DD;--lvl-ink:#406134;--lvl-edge:#6F8F5D}   /* Primary 5  sage  */
.tt-lvl-3{--lvl:#FEEAEA;--lvl-ink:#96201B;--lvl-edge:#C07A7A}   /* Primary 6  pink  */
.tt-lvl-4{--lvl:#D7F0F6;--lvl-ink:#2F3A8C;--lvl-edge:#5E93A6}   /* Secondary  blue  */
.tt-lvl-5{--lvl:#EDF6E4;--lvl-ink:#7A3B4B;--lvl-edge:#97707C}
.tt-lvl-6{--lvl:#E9EDFB;--lvl-ink:#25406B;--lvl-edge:#7484B8}
.tt-block.tt-lvl h3{background:var(--lvl);color:var(--lvl-ink);
  border:1.5px solid var(--lvl-edge);border-radius:var(--radius-pill);
  padding:.6rem 1.25rem;align-items:center;box-shadow:var(--shadow-s)}
.tt-block.tt-lvl .fee-table{border-top:3px solid var(--lvl-edge)}
.tt-block.tt-lvl .fee-table thead th{background:var(--lvl)}
.tt-block .fee-table caption{display:none}      /* the heading above already names the level */
.tt-block .fee-table{border-top:3px solid var(--brand)}

.week-table tbody th{width:6rem;white-space:nowrap;vertical-align:top}
.week-table tbody th small{
  display:block;font-size:.9rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin-top:.15rem}
.wk{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.wk li{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;line-height:1.35}
.wk-lvl{
  display:inline-block;min-width:2.5rem;font-size:.9rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brand)}
.wk b{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}

.pdf-card{
  display:flex;flex-wrap:wrap;gap:1.6rem 2rem;align-items:center;justify-content:space-between;
  background:var(--surface);border:1px solid var(--line);border-left:7px solid var(--brand);
  border-radius:var(--radius);box-shadow:var(--shadow-s);padding:1.6rem 1.9rem}
.pdf-card h2{margin:.25rem 0 .5rem}
.pdf-card p{margin:0;max-width:58ch;color:var(--ink-2)}
.pdf-actions{display:flex;gap:.7rem;flex-wrap:wrap}
.pdf-actions .btn{white-space:nowrap}

@media(max-width:900px){
  .tt-grid{grid-template-columns:1fr;gap:2rem}
  .pdf-card{padding:1.3rem 1.3rem}
  .pdf-actions{width:100%}
  .pdf-actions .btn{flex:1 1 auto;justify-content:center}
}

.tt-hours{
  margin-top:1.7rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-s);padding:1.1rem 1.3rem 1.2rem}
.tt-hours > b{display:block;font-size:.9rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.55rem}
.tt-hours ul{list-style:none;margin:0;padding:0}
.tt-hours li{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;
  padding:.34rem 0;border-bottom:1px dashed var(--line-2);font-size:var(--fs-body)}
.tt-hours li:last-child{border-bottom:0}
.tt-hours li span{color:var(--ink-2)}
.tt-hours li b{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.tt-hours p{margin:.8rem 0 0;font-size:var(--fs-body);color:var(--ink-2)}

/* the full-width week table lays its entries out in columns */
.week-table .wk{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:.5rem 2.4rem}
.week-table .wk li{flex-wrap:nowrap}
.week-table td{padding-block:.7em}

.tt-foot{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:start;margin-top:1.9rem}
.tt-foot .tt-hours{margin-top:0}
.tt-offer{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-s);padding:1.1rem 1.3rem 1.2rem}
.tt-offer > b{display:block;font-size:.9rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.55rem}
.tt-offer ul{list-style:none;margin:0;padding:0}
.tt-offer li{position:relative;padding-left:1.6rem;margin:.45rem 0;font-size:var(--fs-body);color:var(--ink-2)}
.tt-offer li::before{content:"✓";position:absolute;left:0;top:0;color:var(--brand);font-weight:700}

@media(max-width:900px){
  .tt-foot{grid-template-columns:1fr;gap:1.2rem}
  .week-table .wk{grid-template-columns:1fr}
}

/* A phone can hold the week table without sideways scrolling once the entries
   are allowed to break onto a second line inside their own cell. */
@media(max-width:640px){
  .week-table tbody th small{font-size:.9rem;letter-spacing:.05em}
  .week-table .wk{grid-template-columns:1fr}
  .week-table .wk li{flex-wrap:nowrap;gap:.3rem .5rem}
  .week-table .wk b{margin-left:auto;flex:0 0 auto;white-space:nowrap}
  /* A phone gets the day as a heading with its classes under it, rather than a
     two-column table. Every class then sits on one line with its time hard
     right, so the times line up in a column and nothing has to be swiped
     sideways — the table used to be 62px wider than the phone. */
  .week-table{display:block;border:0;background:none}
  .week-table caption{padding:0 0 .55rem}
  .week-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .week-table,.week-table tbody,.week-table tr,.week-table tbody th,.week-table tbody td{display:block;width:auto}
  .week-table tr{border-bottom:1px solid var(--line);padding:.75rem 0 .6rem}
  .week-table tr:last-child{border-bottom:0}
  .week-table tbody th{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;
    padding:0 0 .4rem;white-space:normal}
  .week-table tbody th small{display:inline;margin-top:0;font-size:.85rem}
  .week-table tbody td{padding:0;border-bottom:0}
  /* The level tables get the same treatment: the subject on the left, then the
     day and the time hard right, so "4 – 6 pm" is never split down the middle
     and nothing needs swiping. The subject is a row header, the day and time
     are the two cells, so nth-of-type counts only the cells. */
  .tt-block .fee-table{display:block;border:0;background:none}
  .tt-block .fee-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .tt-block .fee-table tbody{display:block}
  .tt-block .fee-table tr{display:flex;align-items:baseline;gap:.5rem;padding:.5rem 0;
    border-bottom:1px solid var(--line)}
  .tt-block .fee-table tr:last-child{border-bottom:0}
  .tt-block .fee-table th,.tt-block .fee-table td{display:block;width:auto;padding:0;border-bottom:0}
  .tt-block .fee-table tbody th{flex:1 1 auto;min-width:0}
  .tt-block .fee-table td:nth-of-type(1){flex:0 0 auto}
  .tt-block .fee-table td:nth-of-type(2){flex:0 0 auto;margin-left:auto;white-space:nowrap}
  .week-table caption{padding:.85rem .6rem .15rem}
}

@media(max-width:640px){
  .week-table .wk li{gap:.25rem .4rem}
  .week-table .wk-lvl{min-width:auto;font-size:.9rem}
  .week-table .wk b{font-size:.95rem}
  .week-table th,.week-table td{padding:.55em .45em}
}

/* ---------- reviews: styled after the centre's live Trustindex widget ---------- */
.reviews{padding-block:clamp(30px,4.6vw,60px)}
.reviews-h{text-align:center;font-size:clamp(1.45rem,2.9vw,2.1rem);margin:0 auto 1.5rem;max-width:30ch}
.rev-bar{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;background:#111;color:#fff;
  border-radius:12px;padding:.85rem 1.1rem}
.rev-badge{font-weight:700;font-size:1.02rem}
.rev-stars{color:#F5B301;letter-spacing:.06em;font-size:1.05rem}
.rev-score{font-weight:700;font-size:1.06rem}
.rev-verified{color:#9BAFAC;font-size:.95rem}
.rev-write{margin-left:auto;border:1.5px solid #5A5A5A;border-radius:8px;padding:.45rem .9rem;
  color:#fff;font-size:.95rem;text-decoration:none;white-space:nowrap}
.rev-write:hover{background:#fff;color:#111}
.rev-rail{position:relative;margin-top:1.1rem;padding:0 30px}  /* room for the arrows, so they sit in the gutter instead of over a card */
.rev-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3.3rem)/4);gap:1.1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:.2rem 0 .6rem;
  scrollbar-width:none}
.rev-track::-webkit-scrollbar{display:none}
.rev-card{scroll-snap-align:start;background:#1B1B1B;color:#fff;border-radius:14px;padding:1.1rem;
  display:flex;flex-direction:column;gap:.7rem}
.rev-top{display:flex;align-items:center;gap:.7rem}
.rev-av{width:44px;height:44px;flex:0 0 auto;border-radius:50%;background:var(--av);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:1.2rem}
.rev-who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.rev-who b{font-size:var(--fs-body);font-weight:700}
.rev-who time{color:#9BAFAC;font-size:.95rem}
.rev-top .rev-g-ico{margin-left:auto;flex:0 0 auto}
.rev-rate{display:flex;align-items:center;gap:.4rem}
.rev-text{color:#E7E5E4;font-size:var(--fs-body);line-height:1.55;margin:0;display:-webkit-box;
  -webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rev-card.open .rev-text{-webkit-line-clamp:unset;display:block}
.rev-read{align-self:flex-start;background:none;border:0;padding:0;color:#9BAFAC;font-size:.97rem;
  cursor:pointer;text-decoration:underline}
.rev-read[hidden]{display:none}
.rev-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border-radius:50%;border:0;background:rgba(17,17,17,.6);color:#fff;font-size:1.6rem;line-height:1;
  cursor:pointer;z-index:2}
.rev-prev{left:-14px}
.rev-next{right:-14px}
.rev-more-row{text-align:center;margin:1.5rem 0 0}
.rev-more{display:inline-block;background:#111;color:#fff;text-decoration:none;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;font-size:.92rem;padding:.95rem 1.6rem;border-radius:8px}
.rev-more:hover{background:#333}
@media(max-width:1120px){.rev-track{grid-auto-columns:calc((100% - 1.1rem)/2)}}
@media(max-width:700px){
  .rev-rail{padding:0}
  .rev-track{grid-auto-columns:88%}
  /* on a phone the cards are swiped (one peeks in from the right), so the arrows would
     only sit on top of the text — drop them here and keep the swipe affordance. */
  .rev-arrow{display:none}
  .rev-write{margin-left:0}
}

/* ---------- footer spacing on small screens ----------
   The tap-target rule further up gives every footer list link a 44px height. Down a
   stacked mobile footer that left ~18px of dead space under each line, so the rows read
   as huge gaps. This sits last on purpose: it must come after that rule to win. */
@media(max-width:900px){
  .footer ul{gap:.3rem}
  .footer ul a{min-height:34px}
  .footer li{line-height:1.45}
}

/* ---------- paragraph alignment ----------
   Body copy reads left-aligned even inside centred section blocks: centred paragraphs
   leave ragged edges on a phone. Headings, eyebrows and buttons stay centred. */
.section-head p,.section-head li,.section-head dd,
.center p,.center li,.center dd,.page-head .lede{text-align:left}


/* ------------------------------------------------------------------ social */
.footer .social{display:flex;gap:.55rem;margin-top:1.15rem}
.footer .social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;background:#DAF1EB;color:#074151;
  transition:background .18s ease,color .18s ease,transform .18s ease}
.footer .social a:hover,.footer .social a:focus-visible{background:#fff;color:#074151;transform:translateY(-2px)}
.footer .social svg{width:20px;height:20px;display:block}
/* the same row, inside the mobile menu */
.nav-social{display:none}
@media(max-width:1080px){
  .nav .nav-social{display:flex;margin:1.1rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line)}
  .nav .nav-social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
    border-radius:50%;background:var(--brand-tint);color:var(--brand);
    transition:background .18s ease,color .18s ease}
  .nav .nav-social a:hover,.nav .nav-social a:focus-visible{background:var(--brand);color:#fff}
  .nav .nav-social svg{width:20px;height:20px;display:block}
}

/* ------------------------------------------------- conditions of enrolment */
.policy{max-width:78ch}
.policy-sec{padding-block:0;margin-bottom:clamp(13px,1.5vw,18px)}
.policy-sec h2{display:flex;align-items:baseline;gap:.7rem;font-size:1.65rem;margin-bottom:.4rem}
.policy-num{font-family:var(--font-body);font-size:1.25rem;font-weight:700;color:var(--brand);letter-spacing:.06em;flex:0 0 auto}
.policy-list{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.policy-list li{position:relative;padding-left:1.5rem;color:var(--ink-2);font-size:var(--fs-body);line-height:1.62}
.policy-list li::before{content:"";position:absolute;left:.3rem;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--brand)}
.policy-list a{color:var(--brand);text-decoration:underline}
.policy-note{margin-top:clamp(26px,3.4vw,40px);padding:clamp(18px,2.4vw,26px);border-radius:16px;
  background:var(--brand-tint);border:1px solid var(--line)}
.policy-note p{margin:0 0 .7rem}
.policy-note p:last-child{margin-bottom:0}
.policy-date{font-size:.9rem;color:var(--ink-3)}

/* footer legal line + the Terms link: quiet, but clearly readable */
.footer-bottom{color:#C9DCD9}
.footer-bottom a{color:#EAF4F2;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.footer-bottom a:hover,.footer-bottom a:focus-visible{color:#ffffff}
/* Terms link inside the mobile menu */
.nav-legal{display:none}
@media(max-width:1080px){
  .nav .nav-legal{display:block;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line);text-align:center}
  .nav .nav-legal a{color:var(--brand);font-size:var(--fs-body);text-decoration:underline;text-underline-offset:3px}
}

/* policy pages: paragraphs + the numbered purpose list */
.policy-p{margin:0 0 .7rem;font-size:var(--fs-body);line-height:1.62;color:var(--ink-2)}
.policy-p:last-child{margin-bottom:0}
.policy-list--num{counter-reset:pn}
.policy-list--num li{padding-left:2.3rem}
.policy-list--num li::before{counter-increment:pn;content:counter(pn) ".";left:0;top:0;width:1.6rem;
  height:auto;border-radius:0;background:none;text-align:right;font-weight:700;font-size:.95em;color:var(--brand)}

/* header: the logo sits left, then the menu, then the contact actions on the right.
   Laptop widths only. The owner asked on 10 Oct 2026: "for logo, move to the left side
   before Home" — it used to be centred between the nav (left) and the actions (right).
   Phones and tablets keep that old arrangement: they are below the 1120px point where the
   nav turns into a drawer, and the burger takes the first cell there. */
.site-header .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.2rem;
  min-height:80px;padding-block:.7rem .6rem}
.brand{grid-column:2;grid-row:1;justify-self:center;margin:0}
.nav{grid-column:1;grid-row:1;justify-self:start;margin-left:0}
.header-cta{grid-column:3;grid-row:1;justify-self:end}
.burger{grid-column:1;grid-row:1;justify-self:start;margin-left:0}
@media(min-width:1121px){
  .site-header .wrap{grid-template-columns:auto auto 1fr}
  .brand{grid-column:1;justify-self:start}
  .nav{grid-column:2}
}

/* ---------------------------------------------------------------
   Pastel section washes. The page used to alternate plain white
   with two very pale bands (#FEEAEA / #F3F1E1) and read dull, so
   every content section now carries one of six soft washes in
   rotation. Text colours are unchanged: --ink-2 on the deepest of
   these (#FBE3E3) is 10.4:1 and --ink-3 is 6.3:1.
   --------------------------------------------------------------- */
/* values read off the reference site itself, so the two match exactly */
.wash--aqua{background:#CFE5E5}   /* the reference's biggest pastel, 8.5% */
.wash--mint{background:#DAF1EB}   /* 7.2% */
.wash--cream{background:#F3F1E1}  /* 5.9% */
.wash--pink{background:#FEEAEA}   /* 3.6% */
.wash--sage{background:#E3E9DD}   /* 2.6% */
.wash--sky{background:#D7F0F6}    /* 1.0% */
.wash[style*="border"]{border-color:var(--line)}

/* ---- articles the centre writes themselves ---------------------------------
   Same type tiers as the rest of the site: body copy 17.5px, small print
   15.3px, sub-headings comfortably larger than the body. */
.article{padding-block:clamp(20px,3vw,34px)}
.article-wrap{max-width:72ch}
.article h2{font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.22;margin:1.9rem 0 .5rem}
.article h2:first-child{margin-top:0}
.article p{margin:0 0 1rem;font-size:var(--fs-body);line-height:1.68;color:var(--ink-2)}
.article p:last-child{margin-bottom:0}
.article ul{margin:0 0 1.15rem;padding-left:1.25rem;display:grid;gap:.4rem}
.article ul li{font-size:var(--fs-body);line-height:1.6;color:var(--ink-2)}
.article strong{color:var(--ink);font-weight:700}
.art-list{list-style:none;padding:0;margin:0;display:grid;gap:clamp(14px,2vw,22px)}
.art-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(16px,2vw,24px);box-shadow:var(--shadow-s)}
.art-item a{font-family:var(--font-display);font-weight:600;font-size:1.4rem;line-height:1.25;
  color:var(--brand);text-decoration:none}
.art-item a:hover,.art-item a:focus-visible{text-decoration:underline}
.art-item p{margin:.45rem 0 .65rem;font-size:var(--fs-body);line-height:1.6;color:var(--ink-2)}
.art-when{font-size:.9rem;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase}