/* Little Treasures — design D ("best of both"), one stylesheet for every page.
   Source of the look: mockup/refresh/d.html. Fonts self-hosted (SIL OFL 1.1), latin subsets only.
   AX-1: every small-text/background pair is >= 4.5:1 (age colours use their -dk shade for text);
   gradient headings are large text, each stop >= 3:1 on its background. */
@font-face{font-family:'Nunito';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/nunito-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/poppins-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/caveat-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#14213D; --soft:#566079; --muted:#566079; --line:#E7EAF0; --wash:#F6F8FB;
  --red:#D7191F; --red-dk:#A3141A; --red-tx:#C2141A; --red-lt:#FFF3F3;
  --teal:#0E9AA7; --teal-dk:#0B7480; --teal-lt:#EAF8F9; --lime:#7DBE2E; --lime-dk:#4E8A12;
  /* one colour per age group, used everywhere that age appears; -dk = text shade */
  --pg:#8B6FD6; --pg-dk:#6A4CC4; --pg-lt:#F1ECFD;
  --pn:#2E8FCB; --pn-dk:#1F6FA3; --pn-lt:#E5F3FC;
  --nu:#1E9157; --nu-dk:#17784A; --nu-lt:#E4F5EA;
  --kg:#E2861B; --kg-dk:#A65A06; --kg-lt:#FDF0DF;
  --c:var(--teal); --c-dk:var(--teal-dk); --c-lt:var(--teal-lt);
  --r:22px;
  --font:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Poppins","Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font:400 17px/1.65 var(--font);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--pn);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:24px}
.narrow{max-width:780px}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:0;color:var(--ink)}
h1{font-size:clamp(2.3rem,4.8vw,3.9rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
h3{font-size:1.18rem;letter-spacing:-.01em;line-height:1.25}
.grad{background:linear-gradient(90deg,var(--teal),var(--lime-dk));-webkit-background-clip:text;background-clip:text;color:transparent}
.hand{font-family:Caveat,cursive;font-weight:700}
/* .kicker = the D "pill" label above a heading */
.kicker,.pill{display:inline-flex;align-items:center;gap:8px;font:700 .8rem/1.3 var(--display);letter-spacing:.02em;padding:6px 14px;border-radius:999px;background:var(--wash);color:var(--teal-dk);margin-bottom:14px}
.kicker::before,.pill i{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);flex:none}
.tint .kicker{background:#fff}
.sub{color:var(--soft);margin:14px 0 0;max-width:62ch;font-size:1.06rem}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:10px 14px;z-index:99;font-weight:800}
.skip:focus{left:10px;top:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 1rem/1.2 var(--display);text-decoration:none;border-radius:999px;padding:13px 24px;min-height:46px;white-space:nowrap;transition:transform .15s,background .15s,border-color .15s;border:2px solid transparent;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 22px -12px rgba(215,25,31,.75)}
.btn-red:hover{background:var(--red-dk)}
.btn-line{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--wash)}
.btn-sun{background:var(--red);color:#fff}
.btn-sun:hover{background:var(--red-dk)}
.btn-wa{background:#fff;color:var(--ink);border-color:var(--line)}
.btn svg{width:20px;height:20px;flex:none}
.btn-wa svg{color:#1FA855}
.link{font-weight:800;color:var(--teal-dk)}

/* header */
.strip{background:var(--ink);color:#fff;font-size:.84rem;text-align:center;padding:7px 12px}
.strip a{color:#fff;font-weight:800}
header.site{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:18px;min-height:74px;padding-block:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand img{width:46px;height:46px}
.brand b{display:block;font:800 1.12rem/1.1 var(--display);letter-spacing:-.02em}
.brand small{display:block;font-size:.75rem;color:var(--soft);font-weight:700}
nav.main{margin-left:auto;display:flex;gap:22px;font:600 .92rem var(--display)}
nav.main a{text-decoration:none;color:var(--soft);padding-block:6px}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--ink)}
nav.main a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--lime)}
.menu-btn{display:none;background:none;border:2px solid var(--line);border-radius:12px;width:44px;height:44px;place-items:center;cursor:pointer;color:var(--ink)}
.menu-btn svg{width:22px;height:22px}
@media (max-width:1100px){
  .menu-btn{display:grid}
  header.site .wrap{flex-wrap:nowrap;position:relative}
  .brand{flex:0 1 auto;min-width:0}
  .brand b{white-space:nowrap}
  header .btn-red{margin-left:auto;order:2}
  .menu-btn{order:3}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(20,33,61,.08);flex-direction:column;gap:0;margin:0;padding:0 20px 8px}
  nav.main.open{display:flex}
  nav.main a{padding:12px 4px;border-top:1px solid var(--line)}
}

/* shared soft backdrop for heroes */
.hero,.page-hero{position:relative;background:
  radial-gradient(600px 400px at 85% 10%,rgba(125,190,46,.16),transparent 70%),
  radial-gradient(700px 500px at 5% 90%,rgba(14,154,167,.13),transparent 70%)}

/* home hero */
.hero{padding:60px 0 96px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.5rem);margin:4px 0 22px}
.lead{font-size:1.15rem;color:var(--soft);max-width:44ch;margin:0 0 28px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.ticks{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;font-weight:700;font-size:.92rem;color:var(--soft)}
.ticks li{display:flex;align-items:center;gap:8px}
.ticks svg{width:20px;height:20px;color:var(--nu)}
.blob{position:relative;aspect-ratio:1/1.02;isolation:isolate}
.blob .ph{position:absolute;inset:0;border-radius:42% 58% 52% 48% / 46% 44% 56% 54%;overflow:hidden;box-shadow:0 40px 60px -35px rgba(20,33,61,.55)}
.blob .ph img{width:100%;height:100%;object-fit:cover}
.blob::before{content:"";position:absolute;inset:-18px -14px 10px 20px;border-radius:58% 42% 46% 54% / 54% 50% 50% 46%;background:linear-gradient(135deg,var(--pn-lt),var(--nu-lt));z-index:-1}
.sticker{position:absolute;background:#fff;border-radius:20px;padding:12px 16px;box-shadow:0 16px 30px -16px rgba(20,33,61,.45);font-weight:700;line-height:1.2;display:flex;gap:10px;align-items:center}
.sticker .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.sticker .ic svg{width:22px;height:22px}
.sticker b{display:block;font:800 1.2rem var(--display)}
.sticker small{font-size:.78rem;color:var(--soft)}
.s1{left:-34px;top:12%;transform:rotate(-4deg)}.s1 .ic{background:#FDE7E7;color:var(--red-tx)}
.s2{right:-20px;top:46%;transform:rotate(3deg)}.s2 .ic{background:var(--pn-lt);color:var(--pn-dk)}
.s3{left:6%;bottom:-10px;transform:rotate(-2deg)}.s3 .ic{background:var(--nu-lt);color:var(--nu-dk)}

/* inner page hero */
.page-hero{padding:40px 0 56px;border-bottom:1px solid var(--line)}
.page-hero .wrap.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.page-hero h1{margin:2px 0 4px}
.page-hero .lead{margin:16px 0 0}
.page-hero .cta-row{margin-top:22px}
.page-hero .blob{max-width:440px;width:100%;justify-self:center}
.crumbs{font-size:.85rem;color:var(--soft);margin-bottom:16px}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"›";margin-right:6px}
.crumbs a{text-decoration:none;font-weight:700}
.crumbs a:hover{color:var(--teal-dk)}
.badge{display:inline-block;font:700 .75rem var(--display);text-transform:uppercase;letter-spacing:.06em;padding:5px 12px;border-radius:999px;background:var(--c-lt);color:var(--c-dk);margin:0 8px 12px 0}

/* facts: floating card under the home hero */
.facts{display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border:1px solid var(--line);border-radius:28px;margin-top:-50px;position:relative;z-index:2;box-shadow:0 24px 40px -30px rgba(20,33,61,.35)}
.facts.even{grid-template-columns:repeat(4,1fr)}
.fact{padding:24px 18px;text-align:center;border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
.fact.stars b,.fact.stars:nth-child(n) b{color:#e0a100;font-size:clamp(1.3rem,2.4vw,2rem);letter-spacing:.02em;line-height:1.35}
.fact b{display:block;font:800 clamp(1.9rem,3.2vw,2.7rem)/1 var(--display);letter-spacing:-.04em}
.fact span{display:block;margin-top:8px;color:var(--soft);font-weight:700;font-size:.88rem;line-height:1.35}
.fact:nth-child(1) b{color:var(--red-tx)}.fact:nth-child(2) b{color:var(--pg-dk)}.fact:nth-child(3) b{color:var(--pn-dk)}.fact:nth-child(4) b{color:var(--nu-dk)}.fact:nth-child(5) b{color:var(--kg-dk)}

/* sections */
.sec{padding-block:64px}
/* Two sections with the same background back to back: no double gap (user 11-08: too much empty space). */
.sec:not(.tint):not(.sky)+.sec:not(.tint):not(.sky),.sec.tint+.sec.tint{padding-top:0}
.sec.tint{background:var(--wash)}
.sec.sky{background:var(--pn-lt)}
.sec-head{max-width:740px;margin-bottom:32px}
.sec-head.c{text-align:center;margin-inline:auto}
.sec-head.c .sub{margin-inline:auto}
.sec-head.row{max-width:none;display:flex;justify-content:space-between;align-items:end;gap:16px 28px;flex-wrap:wrap}
.sec-head.row>div{max-width:740px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.split .photo{border-radius:32px;overflow:hidden;aspect-ratio:4/3}
.split .photo img{width:100%;height:100%;object-fit:cover}
.split h2{margin-bottom:4px}
.photo-note{position:relative}
.photo-note .hand{position:absolute;left:-4px;bottom:-36px;font-size:1.45rem;color:var(--teal-dk);transform:rotate(-3deg)}
.wave{display:block;width:100%;height:50px}

/* age colours: put .pg/.pn/.nu/.kg on anything that belongs to one age group */
.pg{--c:var(--pg);--c-dk:var(--pg-dk);--c-lt:var(--pg-lt)}
.pn{--c:var(--pn);--c-dk:var(--pn-dk);--c-lt:var(--pn-lt)}
.nu{--c:var(--nu);--c-dk:var(--nu-dk);--c-lt:var(--nu-lt)}
.kg{--c:var(--kg);--c-dk:var(--kg-dk);--c-lt:var(--kg-lt)}
/* centre colours: Woodlands Circle red, Woodlands St 82 teal, Hougang lavender */
.c-circle{--c:var(--red);--c-dk:var(--red-tx);--c-lt:var(--red-lt)}
.c-st82{--c:var(--teal);--c-dk:var(--teal-dk);--c-lt:var(--teal-lt)}
.c-hougang{--c:var(--pg);--c-dk:var(--pg-dk);--c-lt:var(--pg-lt)}

/* photo cards */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card-photo{margin:0;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 14px 28px -20px rgba(20,33,61,.45)}
.card-photo .frame{aspect-ratio:4/3;overflow:hidden;background:var(--wash)}
.card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card-photo:hover img{transform:scale(1.04)}
.card-photo figcaption{padding:10px 14px;font-weight:700;font-size:.92rem}

/* polaroid wall */
.wall{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;align-items:start}
.pol{margin:0;background:#fff;padding:10px 10px 0;border-radius:6px;box-shadow:0 14px 28px -16px rgba(20,33,61,.45);transition:transform .2s}
.pol:hover{transform:rotate(0) scale(1.03)!important}
.pol img{aspect-ratio:1;object-fit:cover;width:100%;border-radius:3px}
.pol figcaption{font-family:Caveat,cursive;font-weight:700;font-size:1.3rem;text-align:center;padding:6px 4px 10px;line-height:1.1}
.wall .pol:nth-child(6n+1){transform:rotate(-3deg)}.wall .pol:nth-child(6n+2){transform:rotate(2deg);margin-top:28px}.wall .pol:nth-child(6n+3){transform:rotate(-1.5deg)}
.wall .pol:nth-child(6n+4){transform:rotate(3deg);margin-top:20px}.wall .pol:nth-child(6n+5){transform:rotate(-2deg)}.wall .pol:nth-child(6n){transform:rotate(2.5deg);margin-top:32px}
.wall-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:50px}
.wall-foot p{margin:0;color:var(--soft);font-weight:700}

/* generic cards; .accent cards cycle the four age colours */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.tint .card,.sky .card{border-color:transparent;box-shadow:0 14px 30px -26px rgba(20,33,61,.5)}
.card h3{margin-bottom:8px}
.card p{margin:0;color:var(--soft);font-size:.97rem}
.card p+p{margin-top:10px}
.card ul{margin:8px 0 0;padding-left:20px;color:var(--soft);font-size:.96rem}
.card li{margin-bottom:3px}
.card li::marker{color:var(--c)}
.card .icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:14px;background:var(--c-lt);color:var(--c-dk)}
.card .icon svg{width:24px;height:24px}
.cards>.card:nth-child(4n+1){--c:var(--pg);--c-dk:var(--pg-dk);--c-lt:var(--pg-lt)}
.cards>.card:nth-child(4n+2){--c:var(--pn);--c-dk:var(--pn-dk);--c-lt:var(--pn-lt)}
.cards>.card:nth-child(4n+3){--c:var(--nu);--c-dk:var(--nu-dk);--c-lt:var(--nu-lt)}
.cards>.card:nth-child(4n+4){--c:var(--kg);--c-dk:var(--kg-dk);--c-lt:var(--kg-lt)}
.cards>.card.pg{--c:var(--pg);--c-dk:var(--pg-dk);--c-lt:var(--pg-lt)}
.cards>.card.pn{--c:var(--pn);--c-dk:var(--pn-dk);--c-lt:var(--pn-lt)}
.cards>.card.nu{--c:var(--nu);--c-dk:var(--nu-dk);--c-lt:var(--nu-lt)}
.cards>.card.kg{--c:var(--kg);--c-dk:var(--kg-dk);--c-lt:var(--kg-lt)}
.card.accent{border-top:5px solid var(--c)}
.card.age{background:var(--c-lt);border:2px solid transparent;position:relative}
.card.age .age-tag{display:inline-block;font:700 .8rem var(--display);color:#fff;background:var(--c-dk);padding:4px 12px;border-radius:999px;margin-bottom:10px}
.card.age h3{font-size:1.45rem}
.card.age p b{color:var(--c-dk)}

/* programmes: colour-coded path */
.path{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding-top:30px}
.path svg.road{position:absolute;left:0;right:0;top:76px;width:100%;height:60px;z-index:0}
.stop{position:relative;z-index:1;background:var(--c-lt);border-radius:28px;padding:0 22px 26px;border:2px solid transparent;transition:border-color .2s,transform .2s}
.stop:hover{border-color:var(--c);transform:translateY(-4px)}
.stop .pic{width:112px;height:112px;margin:0 auto -6px;border-radius:50%;overflow:hidden;border:6px solid #fff;box-shadow:0 0 0 3px var(--c);transform:translateY(-20px)}
.stop .pic img{width:100%;height:100%;object-fit:cover}
span.age{display:inline-block;font:700 .8rem var(--display);color:#fff;background:var(--c-dk);padding:4px 12px;border-radius:999px}
.stop h3{font-size:1.4rem;margin:10px 0 8px}
.stop p{margin:0;color:var(--soft);font-size:.96rem}
.stop .step{position:absolute;right:18px;top:16px;font:800 2.6rem/1 var(--display);color:var(--c);opacity:.25}
.grad-note{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 14px;margin-top:34px;font-weight:700;color:var(--soft);text-align:center}
.grad-note .hand{font-size:1.6rem;color:var(--kg-dk)}
/* the plainer programme grid (no photos) uses the same colours */
.prog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.prog{background:var(--c-lt);border-radius:24px;padding:24px;border:2px solid transparent}
.prog h3{font-size:1.3rem}
.prog p{margin:8px 0 0;font-size:.95rem;color:var(--soft)}
.prog .age{margin-top:14px}

/* steps (day timeline / growth) */
.steps{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.steps span{background:#fff;border:2px solid var(--line);border-radius:999px;padding:6px 14px;font:600 .86rem var(--display)}
.steps span.pg,.steps span.pn,.steps span.nu,.steps span.kg{background:var(--c-lt);border-color:transparent;color:var(--c-dk)}
.steps span:last-child{background:var(--ink);border-color:var(--ink);color:#fff}

/* languages: speech bubbles */
.langs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.lang{background:#fff;border:2px solid var(--line);border-radius:26px;padding:24px 14px 20px;text-align:center;position:relative}
.lang::after{content:"";position:absolute;bottom:-12px;left:36px;width:22px;height:22px;background:#fff;border-right:2px solid var(--line);border-bottom:2px solid var(--line);transform:rotate(45deg)}
.lang b{display:block;font:700 1.9rem/1.25 var(--display);margin-bottom:4px}
.lang span{display:block;font-weight:800}
.lang small{display:inline-block;margin-top:8px;font-weight:800;font-size:.75rem;padding:3px 10px;border-radius:999px;background:var(--wash);color:var(--soft)}
.lang small.daily{background:#FDE7E7;color:var(--red-dk)}
.lang:nth-child(1) b{color:var(--red-tx)}.lang:nth-child(2) b{color:var(--pn-dk)}.lang:nth-child(3) b{color:var(--nu-dk)}.lang:nth-child(4) b{color:var(--kg-dk)}

/* why: reason cards with coloured icon chips */
.why-list{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.why-item{border:1px solid var(--line);border-radius:22px;padding:22px;background:#fff}
.why-item .dot{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:14px;background:var(--c-lt);color:var(--c-dk)}
.why-item .dot svg{width:24px;height:24px}
.why-item h3{font-size:1.1rem;margin-bottom:6px}
.why-item p{margin:0;font-size:.95rem;color:var(--soft)}
.why-list>.why-item:nth-child(4n+1){--c:var(--pg);--c-dk:var(--pg-dk);--c-lt:var(--pg-lt)}
.why-list>.why-item:nth-child(4n+2){--c:var(--pn);--c-dk:var(--pn-dk);--c-lt:var(--pn-lt)}
.why-list>.why-item:nth-child(4n+3){--c:var(--nu);--c-dk:var(--nu-dk);--c-lt:var(--nu-lt)}
.why-list>.why-item:nth-child(4n+4){--c:var(--kg);--c-dk:var(--kg-dk);--c-lt:var(--kg-lt)}

/* quotes */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.quote{margin:0;background:#fff;border:1px solid var(--line);border-radius:28px;padding:30px;position:relative;overflow:hidden}
.quote::before{content:"\201C";position:absolute;right:24px;top:-6px;font:800 6rem/1 var(--display);color:var(--wash);pointer-events:none}
.quote blockquote{margin:0;font-size:1.12rem;position:relative}
.quote cite{display:flex;align-items:center;gap:12px;margin-top:20px;font-style:normal;font-weight:800;font-size:.98rem}
.quote cite small{display:block;font-weight:700;color:var(--soft)}
.av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;font:700 1.1rem var(--display);background:var(--c-dk)}
.quotes>.quote:nth-child(4n+1){--c-dk:var(--pg-dk)}.quotes>.quote:nth-child(4n+2){--c-dk:var(--teal-dk)}
.quotes>.quote:nth-child(4n+3){--c-dk:var(--kg-dk)}.quotes>.quote:nth-child(4n+4){--c-dk:var(--pn-dk)}

/* centres */
.centres{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.centres.c2{grid-template-columns:repeat(2,1fr)}
.centre{border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.centre .top{height:104px;position:relative;flex:none;background-color:var(--c-lt);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:22px 22px}
.centre .top::after{content:"";position:absolute;left:50%;top:20px;width:44px;height:44px;margin-left:-22px;background:var(--c);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 8px 14px -6px rgba(0,0,0,.35)}
.centre .top::before{content:"";position:absolute;left:50%;top:35px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;z-index:1}
.centre .body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.centre .pin{font:700 .76rem var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--c-dk)}
.centre h3{font-size:1.4rem;margin:4px 0 12px}
.centre p{margin:0 0 6px;color:var(--soft);font-size:.95rem;display:flex;gap:8px}
.centre p svg{width:18px;height:18px;flex:none;margin-top:4px;color:var(--c-dk)}
.centre .tel a{font:700 1.02rem var(--display);color:var(--ink);text-decoration:none;border-bottom:2px solid var(--c)}
.centre .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:16px}
.centre .acts .btn{flex:1;padding:10px 14px;font-size:.9rem;min-height:44px}
dl.facts-list{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:12px 0 0;font-size:.95rem}
dl.facts-list dt{font-weight:800}
dl.facts-list dd{margin:0;color:var(--soft)}

/* fee */
.fee{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center;border-radius:32px;padding:42px 48px;background:linear-gradient(120deg,#E8F8F2,#F2FADF)}
.fee .big{font:800 clamp(3.4rem,7vw,5.2rem)/.9 var(--display);letter-spacing:-.05em;color:var(--teal-dk)}
.fee .big small{display:block;font:700 .9rem/1.35 var(--font);letter-spacing:0;color:var(--soft);margin-top:12px;max-width:24ch}
.fee h2{font-size:1.6rem;margin-bottom:8px}
.fee p{margin:0;color:var(--soft)}

/* tables */
.table-wrap{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:16px}
table{border-collapse:collapse;width:100%;font-size:.94rem;background:#fff}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--wash);font:700 .9rem var(--display)}

/* FAQ */
.faq{display:grid;gap:12px}
.faq details{border:1px solid var(--line);border-radius:18px;background:#fff}
.faq summary{cursor:pointer;padding:16px 20px;font:600 1rem/1.4 var(--display);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--teal-dk)}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 20px 18px;color:var(--soft)}
.faq details>div p{margin:0 0 8px}

/* prose (blog posts, terms) */
.prose{font-size:1.06rem}
.prose h2{margin:40px 0 12px;font-size:clamp(1.5rem,2.6vw,2rem)}
.prose h3{margin:26px 0 8px}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose li{margin-bottom:6px}
.prose a{color:var(--teal-dk);font-weight:700}
.prose blockquote{margin:20px 0;padding:16px 20px;background:var(--wash);border-left:5px solid var(--lime);border-radius:12px;font-weight:600}
.prose img{border-radius:18px;margin:20px 0}
.byline{color:var(--soft);font-weight:700;font-size:.9rem;margin-top:12px}

/* blog cards / social posts */
.post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;text-decoration:none;transition:transform .2s}
.post-card:hover{transform:translateY(-3px)}
.post-card .frame{aspect-ratio:16/10;background:var(--wash);overflow:hidden}
.post-card .frame img{width:100%;height:100%;object-fit:cover}
.post-card .body{padding:18px 20px 22px}
.post-card h3{margin:6px 0 8px}
.post-card p{margin:0;color:var(--soft);font-size:.95rem}
.post-card .meta{font:700 .76rem var(--display);color:var(--teal-dk);text-transform:uppercase;letter-spacing:.06em}
.post-card:hover h3{text-decoration:underline}

/* albums: covers are polaroids */
.album{margin-bottom:40px}
.album h2{font-size:1.5rem}
.album .gallery{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.album .card-photo{border-radius:14px}
.album .more-row{margin-top:14px}
.albums{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 22px;margin-bottom:36px}
.album-card{margin:0}
.album-card button.cover{all:unset;cursor:pointer;display:block;width:100%;box-sizing:border-box;background:#fff;padding:10px 10px 0;border-radius:6px;box-shadow:0 14px 28px -16px rgba(20,33,61,.45);transition:transform .2s}
.albums .album-card:nth-child(4n+1) .cover{transform:rotate(-2.5deg)}.albums .album-card:nth-child(4n+2) .cover{transform:rotate(1.8deg)}
.albums .album-card:nth-child(4n+3) .cover{transform:rotate(-1.2deg)}.albums .album-card:nth-child(4n+4) .cover{transform:rotate(2.4deg)}
.album-card button.cover:hover{transform:rotate(0) scale(1.03)}
.album-card button.cover:focus-visible{outline:3px solid var(--pn);outline-offset:4px}
.album-card .frame{border-radius:3px;overflow:hidden;aspect-ratio:1}
.album-card .frame img{width:100%;height:100%;object-fit:cover;display:block}
.album-card figcaption{font-family:Caveat,cursive;font-size:1.3rem;text-align:center;padding:6px 4px 10px;line-height:1.1}
.album-card figcaption strong{font-weight:700}
.album h2:focus{outline:none}
.album button.ph{all:unset;cursor:zoom-in;display:block}
.album button.ph:focus-visible{outline:3px solid var(--pn)}
.gallery button.ph{all:unset;cursor:zoom-in;display:block;width:100%}
dialog.lightbox{border:0;padding:0;background:transparent;max-width:min(96vw,1200px)}
dialog.lightbox::backdrop{background:rgba(13,23,44,.9)}
dialog.lightbox img{max-height:86vh;width:auto;margin:auto;border-radius:12px}
dialog.lightbox p{color:#fff;text-align:center;margin:8px 0 0}
dialog.lightbox .close{position:fixed;top:14px;right:14px}

/* forms */
.form-card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:24px;box-shadow:0 24px 40px -30px rgba(20,33,61,.35)}
.notice{border-radius:16px;padding:14px 18px;font-weight:700;margin-bottom:16px}
.notice.dev{background:#FFF0C2;border:2px dashed #9A6B00;color:#4A3300}
.notice.info{background:var(--pn-lt);color:#164F73}

/* owner placeholder slot (dev only; prod build drops these blocks) */
.slot{border:2px dashed #B08A00;background:#FFFBEA;color:#5A4500;border-radius:12px;padding:12px 16px;font-size:.88rem;font-weight:700}

/* final CTA */
.final{background:var(--ink);color:#fff;padding:72px 0;position:relative;overflow:hidden;text-align:center}
.final .dots i{position:absolute;border-radius:50%}
.final h2{color:#fff;font-size:clamp(2.1rem,5vw,4rem);max-width:20ch;margin:0 auto}
.final .grad{background-image:linear-gradient(90deg,#3CC3CF,#9BD24F)}
.final p{color:#C2C9D9;max-width:56ch;margin:18px auto 32px;font-size:1.08rem}
.final .cta-row{justify-content:center}
.final .btn-line{background:transparent;border-color:#fff;color:#fff}
.final .btn-line:hover{background:rgba(255,255,255,.08)}

footer{background:#0D172C;color:#9AA3B8;padding:56px 0 28px;font-size:.92rem}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
footer h2{font:700 .98rem var(--display);color:#fff;margin:0 0 12px;letter-spacing:0}
footer p{margin:0}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
footer a{text-decoration:none}footer a:hover{color:#fff;text-decoration:underline}
footer .brand-f{display:flex;align-items:center;gap:10px;margin-bottom:12px}
footer .brand-f img{width:40px;height:40px}
footer .legal{border-top:1px solid #1F2A44;margin-top:34px;padding-top:20px;font-size:.82rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

.wa-float{position:fixed;right:16px;bottom:16px;z-index:30;width:56px;height:56px;border-radius:50%;background:#1FAF55;display:grid;place-items:center;box-shadow:0 8px 20px -6px rgba(0,0,0,.45)}
.wa-float svg{width:28px;height:28px;color:#fff}

@media (max-width:900px){
  .hero{padding:32px 0 76px}
  .hero .wrap,.split,.page-hero .wrap.split{grid-template-columns:1fr;gap:40px}
  .blob{max-width:440px;margin:0 auto;width:92%}
  .page-hero .blob{max-width:360px;width:86%}
  .facts,.facts.even{grid-template-columns:1fr 1fr}
  .fact{border-bottom:1px solid var(--line)}
  .fact:nth-child(2n){border-right:0}
  .fact:last-child{grid-column:span 2;border-bottom:0}
  .facts.even .fact:nth-last-child(2){border-bottom:0}
  .facts.even .fact:last-child{grid-column:auto}
  .path,.prog-grid,.langs,.cards.c4{grid-template-columns:1fr 1fr}
  .path{row-gap:44px}
  .path svg.road{display:none}
  .wall{grid-template-columns:repeat(3,1fr)}
  .gallery,.cards,.album .gallery,.albums{grid-template-columns:1fr 1fr}
  .centres,.centres.c2{grid-template-columns:1fr}
  .fee{grid-template-columns:1fr;padding:32px 26px;gap:20px}
  .why-list{grid-template-columns:1fr 1fr}
  footer .cols{grid-template-columns:1fr 1fr}
  .sec{padding-block:52px}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{padding-inline:18px}
  .sec{padding-block:44px}
  .sec-head{margin-bottom:24px}
  .page-hero{padding:28px 0 44px}
  .langs{row-gap:30px}
  .lang b{font-size:1.5rem}
  .wall{grid-template-columns:1fr 1fr;gap:16px}
  .wall .pol{margin-top:0!important}
  .gallery{gap:12px}
  .card-photo figcaption{font-size:.84rem;padding:8px 10px}
  .path,.prog-grid,.quotes,.why-list,.cards,.cards.c2,.cards.c4{grid-template-columns:1fr}
  .albums{gap:22px 16px}
  .cta-row .btn{flex:1 1 auto}
  .final{padding:56px 0}
  footer .cols{grid-template-columns:1fr}
  .brand small{display:none}
  .brand b{font-size:1rem}
  header .btn-red{padding:10px 14px;font-size:.88rem;min-height:44px}
  header.site .wrap{gap:10px}
  /* phones: the price sticker leaves the photo and sits under it (user 11-09: only the price sticker is kept, others covered the photo) */
  .hero .blob{aspect-ratio:auto;display:grid;grid-template-columns:1fr;gap:8px;justify-items:center}
  .hero .blob .ph{position:relative;inset:auto;grid-column:1/-1;aspect-ratio:1/1.02}
  .hero .blob::before{bottom:auto;aspect-ratio:1/1.02}
  .hero .sticker{position:relative;inset:auto;margin-top:-34px;gap:10px;padding:10px 16px;border-radius:16px}
  .hero .s1{transform:rotate(-2deg)}.hero .s2{transform:rotate(1.5deg)}.hero .s3{transform:rotate(-1.5deg)}
  .hero .sticker b{font-size:clamp(.78rem,3.6vw,.9rem)}
  .hero .s1 b{white-space:nowrap}
  .hero .sticker small{font-size:.7rem;display:block;margin-top:2px;line-height:1.25}
  .hero .sticker>span:last-child{min-width:0}
  .hero .sticker .ic{width:30px;height:30px;border-radius:10px}
  .hero .sticker .ic svg{width:18px;height:18px}
  .hide-sm{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* per-centre detail sections take the centre colour */
.centre-detail .kicker{background:var(--c-lt);color:var(--c-dk)}
.centre-detail .kicker::before{background:var(--c)}
.centre-detail h3{color:var(--c-dk);margin:26px 0 8px}
.centre-detail .split>div>h3:first-child{margin-top:0}
.centre-detail .split{align-items:start}
.centre-detail .quotes{grid-template-columns:1fr}
.centre-detail .gallery{gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))!important}
.centre-detail .gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px}
.video{aspect-ratio:16/9;border-radius:18px;overflow:hidden}
.video iframe{width:100%;height:100%;border:0}
/* a quote inside a card (testimonials) already has its photo header: drop the frame and the letter avatar */
.card .quote{border:0;padding:0;background:none;border-radius:0}
.card .quote::before{display:none}
.card .quote .av{display:none}

/* ---- Playful effects: switched per effect in site.json "fun" (body.fun-*), driven by js/fx.js ---- */
/* 1 footprints: room under the programme cards is reserved server-side, so the trail causes no shift */
@media (min-width:901px){.fun-footprints .path{padding-bottom:64px}}
.fx-trail{position:absolute;left:0;right:0;bottom:4px;height:52px;pointer-events:none}
.fx-trail i{position:absolute;width:var(--sz);height:calc(var(--sz)*1.6);transform:translate(-50%,-50%) rotate(var(--rot));opacity:0}
.fx-trail svg{display:block;width:100%;height:100%;fill:currentColor}
.fx-trail.fx-in i{animation:fx-step .45s ease-out var(--d) forwards}
@keyframes fx-step{from{opacity:0;transform:translate(-50%,-50%) rotate(var(--rot)) scale(.4)}to{opacity:.55;transform:translate(-50%,-50%) rotate(var(--rot)) scale(1)}}
/* 2 scribble */
.fx-scrib{position:relative;white-space:nowrap;display:inline-block}
.fx-scrib svg{position:absolute;left:-3%;bottom:-.16em;width:106%;height:.32em;overflow:visible;pointer-events:none}
.fx-scrib path{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;opacity:.8}
.fx-scrib.fx-in path{transition:stroke-dashoffset .8s cubic-bezier(.6,0,.3,1) .15s;stroke-dashoffset:0}
/* 3 plane + confetti */
.fx-plane{position:fixed;z-index:60;width:64px;pointer-events:none;filter:drop-shadow(0 8px 10px rgba(20,33,61,.25))}
.fx-plane svg{display:block;width:100%}
.fx-confetti{position:fixed;inset:0;width:100vw;height:100vh;z-index:60;pointer-events:none}
/* 5 polaroids: individual translate/rotate compose with each photo's own tilt (transform) */
.wall.fx-arm .pol{opacity:0}
.wall.fx-arm.fx-in .pol{animation:fx-drop .7s cubic-bezier(.3,1.4,.5,1) forwards}
.wall.fx-in .pol:nth-child(2){animation-delay:.09s}.wall.fx-in .pol:nth-child(3){animation-delay:.18s}.wall.fx-in .pol:nth-child(4){animation-delay:.27s}.wall.fx-in .pol:nth-child(5){animation-delay:.36s}.wall.fx-in .pol:nth-child(6){animation-delay:.45s}
@keyframes fx-drop{0%{opacity:0;translate:0 -46px;rotate:7deg}55%{opacity:1;translate:0 6px;rotate:-3deg}78%{translate:0 -2px;rotate:1.5deg}100%{opacity:1;translate:0 0;rotate:0deg}}
@media (prefers-reduced-motion:reduce){.wall.fx-arm .pol,.fx-trail i{opacity:1!important}.fx-scrib path{stroke-dashoffset:0}}
.map{border-radius:18px;overflow:hidden;min-height:300px;background:var(--line)}
.map iframe{display:block;width:100%;height:100%;min-height:300px;border:0}

/* landing heroes (centre pages, 11-09): fee cap + MRT + Call/WhatsApp/Book above the fold */
.page-hero.land .lead{margin-top:10px;font-size:1.05rem}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.acc-badge{display:block;height:64px;width:auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px 8px}
.ticks .badges{margin-top:0}
footer .badges{margin-top:16px;gap:8px}footer .acc-badge{height:44px;border:0;border-radius:8px;padding:3px 6px}
.land-facts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.land-facts li{display:flex;gap:10px;align-items:flex-start;font-size:1rem;line-height:1.4}
.land-facts svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--teal-dk)}
.land-facts b{color:var(--ink)}
.page-hero.land .cta-row{margin-top:18px;gap:10px}
.land-ctas .btn-line{order:3}
/* age groups: jump links on curriculum, linked cards elsewhere */
.age-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.age-jump a{font:700 .9rem var(--display);text-decoration:none;color:var(--c-dk);background:var(--c-lt);padding:8px 14px;border-radius:999px}
.age-jump a small{font-weight:600;opacity:.8}
.card.age[id]{scroll-margin-top:96px}
a.card-link{display:block;text-decoration:none;color:inherit}
a.card-link:hover{border-color:var(--c-dk)}
a.card-link p{margin:6px 0 10px}
@media (max-width:600px){
  .page-hero.land{padding:20px 0 32px}
  .page-hero.land h1{font-size:2rem}
  .page-hero.land .lead{font-size:1rem}
  .land-ctas .btn{flex:1 1 40%;padding:12px 14px}
  .land-ctas .btn-line{flex-basis:100%}
}
a.card-link h3 .age-tag{display:table;margin:8px 0 0;font-size:.8rem}
.age-cta{margin-top:auto;padding-top:14px;border-top:1px dashed rgba(0,0,0,.15)}
.age-cta p{margin:0 0 10px}
.age-cta .cta-row{gap:8px}