/* =========================================================
   Playway Pre School — one stylesheet, no framework.
   Palette from the school signboard: royal blue badge with
   sunny yellow, red, green and orange letters.
   ========================================================= */
:root {
    --navy: #1B2A5E;
    --muted: #4F5B82;
    --blue: #2353C9;
    --cyan: #2F7BEA;
    --sun: #FFC531;
    --sun-d: #E0A100;
    --red: #EF3B4F;
    --green: #34B26A;
    --orange: #FF8A24;
    --pink: #FF6FA8;
    --purple: #8B5CF6;
    --bg: #F4FAFF;
    --paper: #FFFDF8;
    --line: #CBD6F2;
    --font-h: "Fredoka", "Nunito", system-ui, sans-serif;
    --font-b: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-hand: "Gochi Hand", "Comic Sans MS", cursive;
    --bounce: cubic-bezier(.34, 1.56, .64, 1);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 10px); overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-b); font-size: 1.05rem; line-height: 1.65; color: var(--navy); background: var(--bg); overflow-x: clip; -webkit-font-smoothing: antialiased; }
body.loading { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); }
h1, h2, h3 { font-family: var(--font-h); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
.wrap { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 24px; }
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em; }
.muted { color: var(--muted); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 12px; font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }

/* ---------- Buttons: chunky candy buttons that press down ---------- */
.btn { --bc: var(--navy); --bs: #0d1638; --bt: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .85em 1.5em; border: 0; border-radius: 999px; background: var(--bc); color: var(--bt); font-family: var(--font-h); font-weight: 600; font-size: 1.05rem; text-decoration: none; cursor: pointer; box-shadow: 0 5px 0 var(--bs); transition: transform .15s, box-shadow .15s, background .2s, translate .25s var(--bounce); white-space: nowrap; position: relative; }
.btn:hover { translate: 0 -2px; box-shadow: 0 7px 0 var(--bs); }
.btn:active { translate: 0 4px; box-shadow: 0 1px 0 var(--bs); }
.btn-sun { --bc: var(--sun); --bs: var(--sun-d); --bt: var(--navy); }
.btn-wa { --bc: #22C35E; --bs: #158A40; }
.btn-dark { --bc: var(--navy); --bs: #0d1638; }
.btn-ghost { --bc: #fff; --bs: var(--line); --bt: var(--navy); outline: 2.5px solid var(--navy); outline-offset: -2.5px; }
.btn-insta { --bs: #9c2a6c; background: linear-gradient(45deg, #F9A23A, #E1306C 45%, #833AB4); }
.btn-sm { font-size: .95rem; padding: .6em 1.15em; }
.btn-block { width: 100%; }
.btn .ico { width: 1.2em; height: 1.2em; }

/* ---------- Scroll progress: a rainbow crayon line ---------- */
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 5px; z-index: 600; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--red), var(--orange), var(--sun), var(--green), var(--cyan), var(--purple)); border-radius: 0 4px 4px 0; }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 500; height: var(--header-h); transition: background .3s, box-shadow .3s, transform .35s var(--ease); }
.site-header.scrolled { background: rgba(255, 255, 255, .88); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 6px 24px rgba(27, 42, 94, .1); }
.site-header.hide { transform: translateY(-100%); }
.header-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { text-decoration: none; flex: none; }
.nav { display: flex; align-items: center; gap: 22px; }
.nav-links { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.nav-links a { display: block; padding: 8px 12px; border-radius: 999px; font-family: var(--font-h); font-weight: 600; color: var(--navy); text-decoration: none; transition: background .2s, color .2s; position: relative; }
.nav-links a:hover { background: rgba(35, 83, 201, .08); }
.nav-links a.active { background: var(--navy); color: #fff; }
.nav-phone { font-family: var(--font-h); font-weight: 600; color: var(--navy); text-decoration: none; white-space: nowrap; }
.nav-cta .dot-live { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(239, 59, 79, .6); animation: live 1.8s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 9px rgba(239, 59, 79, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 59, 79, 0); } }
.burger { display: none; width: 48px; height: 48px; border: 0; border-radius: 14px; background: var(--navy); cursor: pointer; padding: 0 12px; flex-direction: column; justify-content: center; gap: 5px; }
.burger span { display: block; height: 3px; border-radius: 3px; background: #fff; transition: transform .3s, opacity .3s; }
body.menu-open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Logo ---------- */
.logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.logo-word { display: inline-flex; background: var(--blue); padding: 5px 13px 7px; border-radius: 14px; box-shadow: 0 4px 0 #15378f; font-family: var(--font-h); font-weight: 700; font-size: 1.75rem; letter-spacing: .01em; }
.logo-word span { color: var(--c); text-shadow: 0 2px 0 rgba(0, 0, 0, .28); display: inline-block; }
.brand:hover .logo-word span { animation: hop .5s var(--bounce) calc(var(--n, 0) * 50ms); }
.logo-word span:nth-child(1) { --n: 0; } .logo-word span:nth-child(2) { --n: 1; } .logo-word span:nth-child(3) { --n: 2; } .logo-word span:nth-child(4) { --n: 3; } .logo-word span:nth-child(5) { --n: 4; } .logo-word span:nth-child(6) { --n: 5; } .logo-word span:nth-child(7) { --n: 6; }
@keyframes hop { 40% { transform: translateY(-7px) rotate(-6deg); } }
.logo-sub { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.logo-lg .logo-word { font-size: 2.4rem; }

/* ---------- Preloader ---------- */
.loader { position: fixed; inset: 0; z-index: 1000; background: var(--blue); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 24px; transition: transform .9s cubic-bezier(.7, 0, .2, 1); }
html.js .loader { display: flex; }
.loader.loaded { transform: translateY(-115%); }
.loader.gone { display: none !important; }
.loader-blocks { display: flex; gap: 10px; }
.loader-blocks span { width: 70px; height: 70px; display: grid; place-items: center; background: var(--c); color: #fff; font-family: var(--font-h); font-weight: 700; font-size: 2.4rem; border-radius: 14px; border: 4px solid var(--navy); box-shadow: 0 6px 0 var(--navy); text-shadow: 0 3px 0 rgba(0, 0, 0, .25); animation: blockDrop .8s var(--bounce) both, blockBob 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * .12s), calc(.9s + var(--i) * .15s); }
@keyframes blockDrop { from { transform: translateY(-60vh) rotate(-30deg); opacity: 0; } }
@keyframes blockBob { 50% { transform: translateY(-12px) rotate(4deg); } }
.loader-text { font-family: var(--font-hand); font-size: 1.5rem; color: #fff; margin: 0; opacity: .9; }
.loader-wave { position: absolute; left: 0; top: 100%; width: 100%; height: 80px; fill: var(--blue); margin-top: -1px; }

/* ---------- Section heads ---------- */
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.sec-head h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 700; }
.sec-head > p:last-child { color: var(--muted); font-size: 1.12rem; }
.kicker { font-family: var(--font-hand); font-size: 1.6rem; color: var(--red); margin: 0 0 .2em; display: inline-flex; align-items: center; gap: 10px; }
.kicker::before, .kicker::after { content: ""; width: 26px; height: 10px; background: radial-gradient(circle at 5px 5px, currentColor 3.5px, transparent 4px) 0 0 / 10px 10px repeat-x; opacity: .55; }
.kicker.light { color: var(--sun); }
.hl { background: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%) no-repeat 0 0 / 0% 100%; transition: background-size 1s var(--ease) .25s; padding: 0 .08em; border-radius: 4px; }
.in .hl, .hl.in, html:not(.js) .hl { background-size: 100% 100%; }

/* ---------- Reveal ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(34px) rotate(-1deg); transition: opacity .8s var(--ease), transform .8s var(--bounce); }
html.js [data-reveal].in { opacity: 1; transform: none; }
html.js [data-stagger] > * { opacity: 0; transform: translateY(30px) scale(.94); transition: opacity .6s var(--ease), transform .7s var(--bounce); }
html.js [data-stagger].in > * { opacity: 1; transform: none; }
[data-stagger].in > *:nth-child(2) { transition-delay: .08s; } [data-stagger].in > *:nth-child(3) { transition-delay: .16s; } [data-stagger].in > *:nth-child(4) { transition-delay: .24s; } [data-stagger].in > *:nth-child(5) { transition-delay: .32s; } [data-stagger].in > *:nth-child(6) { transition-delay: .4s; }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; min-height: 100svh; padding: calc(var(--header-h) + 76px) 0 230px; background: linear-gradient(180deg, #7FCBFF 0%, #B9E5FF 45%, #E6F6FF 100%); overflow: hidden; isolation: isolate; }
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sun { position: absolute; top: calc(var(--header-h) + 6px); right: 5%; width: clamp(110px, 12vw, 170px); }
.sun-rays { transform-origin: 100px 100px; animation: spin 40s linear infinite; fill: #FFD84D; }
.sun-core { fill: var(--sun); stroke: #F2A900; stroke-width: 4; }
.sun-eye { fill: var(--navy); animation: blink 5s infinite; transform-box: fill-box; transform-origin: center; }
.sun-smile { fill: none; stroke: var(--navy); stroke-width: 5; stroke-linecap: round; }
.sun-cheek { fill: #FF8FA3; opacity: .7; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
.cloud { position: absolute; left: 0; width: 160px; height: 52px; background: #fff; border-radius: 60px; opacity: .95; animation: drift linear infinite; filter: drop-shadow(0 6px 0 rgba(140, 190, 230, .35)); }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 70px; height: 70px; left: 24px; top: -34px; }
.cloud::after { width: 54px; height: 54px; left: 78px; top: -24px; }
.c1 { top: 16%; animation-duration: 70s; animation-delay: -10s; }
.c2 { top: 34%; scale: .7; animation-duration: 95s; animation-delay: -60s; opacity: .8; }
.c3 { top: 9%; scale: 1.2; animation-duration: 110s; animation-delay: -35s; }
.c4 { top: 52%; scale: .55; animation-duration: 80s; animation-delay: -5s; opacity: .7; }
@keyframes drift { from { transform: translateX(-260px); } to { transform: translateX(calc(100vw + 260px)); } }
.plane { position: absolute; top: calc(var(--header-h) + 6px); left: 0; display: flex; align-items: center; flex-direction: row-reverse; animation: fly 26s linear infinite; animation-delay: 3s; }
.plane svg { width: 92px; animation: planeBob 1.6s ease-in-out infinite; }
.plane-rope { width: 40px; height: 2px; background: var(--navy); }
.plane-banner { font-family: var(--font-h); font-weight: 700; font-size: 1rem; color: var(--navy); background: #fff; border: 3px solid var(--navy); padding: 4px 16px 4px 12px; border-radius: 6px 0 0 6px; clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%); animation: flutter .5s ease-in-out infinite alternate; transform-origin: right center; white-space: nowrap; }
@keyframes fly { from { transform: translateX(-420px); } to { transform: translateX(calc(100vw + 120px)); } }
@keyframes planeBob { 50% { transform: translateY(-8px) rotate(-3deg); } }
@keyframes flutter { to { transform: skewY(-3deg) scaleY(.94); } }
.balloon.b1 { position: absolute; right: 1%; left: auto; top: 50%; width: 70px; animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(14px, -26px) rotate(5deg); } }
.kite { position: absolute; left: 44%; top: calc(var(--header-h) + 10px); width: 64px; transform-origin: 50% 100%; animation: kite 5s ease-in-out infinite; }
.kite-tail { animation: tail 1.2s ease-in-out infinite alternate; transform-origin: 50px 110px; }
@keyframes kite { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(10deg) translateY(-14px); } }
@keyframes tail { to { transform: skewX(12deg); } }

/* poppable bubbles */
.bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.bubble { position: absolute; bottom: -80px; width: var(--s); height: var(--s); border-radius: 50%; pointer-events: auto; cursor: pointer; background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .95) 0 10%, rgba(255, 255, 255, .25) 22%, rgba(180, 225, 255, .18) 55%, rgba(255, 140, 220, .35) 80%, rgba(255, 255, 255, .7) 100%); box-shadow: inset 0 0 12px rgba(255, 255, 255, .7); animation: rise var(--dur) linear forwards; }
.bubble.popped { animation: pop .25s ease-out forwards; }
@keyframes rise { 0% { transform: translate(0, 0); } 25% { transform: translate(var(--sx), -30vh); } 50% { transform: translate(0, -60vh); } 75% { transform: translate(var(--sx), -90vh); } 100% { transform: translate(0, -125vh); } }
@keyframes pop { to { transform: var(--t, none) scale(1.8); opacity: 0; } }

.hero-in { position: relative; z-index: 2; display: grid; grid-template-columns: 1.12fr 1fr; gap: 48px; align-items: center; }
.hero-kicker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--font-h); font-weight: 600; color: var(--muted); margin-bottom: 18px; }
.since-badge { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--navy); padding: 6px 14px; border-radius: 999px; box-shadow: 0 4px 0 rgba(27, 42, 94, .12); }
.since-badge .ico { color: var(--sun); }
.hero-title { font-size: clamp(2.4rem, 4.5vw, 4.4rem); font-weight: 700; line-height: 1.02; margin-bottom: 22px; }
.ht-line { display: block; }
.ht-brand { font-size: 1.18em; margin-top: .06em; }
.word { display: inline-block; white-space: nowrap; }
.char { display: inline-block; }
html.js .char { opacity: 0; transform: translateY(.8em) rotate(12deg) scale(.6); }
html.ready .char { opacity: 1; transform: none; transition: opacity .5s ease, transform .75s var(--bounce); transition-delay: calc(var(--i) * 32ms); }
.char:hover { animation: jelly .6s; }
@keyframes jelly { 30% { transform: scale(1.25, .75); } 45% { transform: scale(.8, 1.2); } 60% { transform: scale(1.1, .9) translateY(-6px); } 80% { transform: scale(.97, 1.03); } }
.ht-brand .char { color: var(--c, var(--blue)); -webkit-text-stroke: 7px var(--navy); paint-order: stroke fill; text-shadow: 0 7px 0 var(--navy); }
.hero-sub { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--muted); max-width: 33rem; font-weight: 600; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 22px; }
.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .7); font-weight: 700; font-size: .95rem; }
.hero-facts .ico { color: var(--red); }
html.js .hero-copy > :not(h1) { opacity: 0; transform: translateY(20px); }
html.ready .hero-copy > :not(h1) { opacity: 1; transform: none; transition: opacity .7s ease, transform .8s var(--bounce); }
html.ready .hero-copy > .hero-sub { transition-delay: .7s; } html.ready .hero-copy > .hero-ctas { transition-delay: .85s; } html.ready .hero-copy > .hero-facts { transition-delay: 1s; }

.hero-art { position: relative; height: clamp(420px, 44vw, 560px); }
.polaroid { margin: 0; background: var(--paper); padding: 12px 12px 46px; border-radius: 6px; box-shadow: 0 2px 0 rgba(27, 42, 94, .06), 0 22px 44px rgba(27, 42, 94, .22); rotate: var(--r, 0deg); position: relative; transition: rotate .5s var(--bounce), scale .5s var(--bounce), box-shadow .3s; }
.polaroid::before { content: ""; position: absolute; top: -14px; left: 50%; width: 92px; height: 28px; margin-left: -46px; background: rgba(255, 213, 79, .78); rotate: -4deg; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); z-index: 1; }
.polaroid img, .shot-btn img, .spot-photo img, .seeds-photo img { background: linear-gradient(135deg, #DCEBFF, #FCE4F1); }
.polaroid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: var(--font-hand); font-size: 1.35rem; color: var(--navy); }
.polaroid:hover { rotate: 0deg; scale: 1.05; z-index: 5; box-shadow: 0 30px 60px rgba(27, 42, 94, .3); }
.hero-art .polaroid { position: absolute; }
.p1 { top: 0; left: 0; width: 60%; z-index: 2; }
.p2 { top: 20%; right: 0; width: 56%; z-index: 3; }
.p3 { bottom: 0; left: 12%; width: 50%; z-index: 4; }
html.js .hero-art .polaroid { opacity: 0; transform: translateY(-90px) rotate(18deg) scale(.8); }
html.ready .hero-art .polaroid { opacity: 1; transform: none; transition: opacity .6s ease, transform 1s var(--bounce); }
html.ready .p1 { transition-delay: .35s; } html.ready .p2 { transition-delay: .55s; } html.ready .p3 { transition-delay: .75s; }
.parallax-layer { transition: translate .25s linear; }
.doodle { position: absolute; z-index: 6; pointer-events: none; }
.d-star { top: -6%; left: 40%; width: 58px; fill: var(--sun); stroke: var(--navy); stroke-width: 3.5; stroke-linejoin: round; animation: spin 12s linear infinite; }
.d-swirl { bottom: 36%; right: -5%; width: 120px; fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; }
html.ready .d-swirl { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s ease 1.3s; }
html:not(.js) .d-swirl { stroke-dashoffset: 0; }
.d-heart { top: 44%; left: 52%; width: 40px; fill: var(--pink); stroke: var(--navy); stroke-width: 3; animation: beat 1.3s ease-in-out infinite; }
@keyframes beat { 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }
.sticker { position: absolute; right: -2%; bottom: 6%; z-index: 7; width: 118px; height: 118px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-content: center; text-align: center; border: 4px solid #fff; box-shadow: 0 0 0 4px var(--red), 0 14px 28px rgba(239, 59, 79, .4); rotate: -12deg; animation: wobble 3s ease-in-out infinite; line-height: 1.05; }
.sticker b { font-family: var(--font-h); font-size: 2.3rem; }
.sticker span { font-family: var(--font-hand); font-size: 1.1rem; }
@keyframes wobble { 50% { rotate: 8deg; scale: 1.06; } }

.hills { position: absolute; left: 0; right: 0; bottom: 0; height: 210px; z-index: 1; pointer-events: none; }
.hills svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hill-back { fill: #8EDCA8; }
.hill-front { fill: #4FBF7A; }
.grass { position: absolute; inset: 0; }
.flower { position: absolute; bottom: 14px; left: var(--x); width: 4px; height: var(--h); background: #2E8B57; border-radius: 4px; transform-origin: 50% 100%; animation: sway 3.2s ease-in-out infinite; animation-delay: var(--d); }
.flower::before { content: ""; position: absolute; left: 50%; top: -9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--sun); box-shadow: 0 -9px 0 -1px var(--c), 0 9px 0 -1px var(--c), -9px 0 0 -1px var(--c), 9px 0 0 -1px var(--c); }
.flower::after { content: ""; position: absolute; left: 3px; top: 40%; width: 14px; height: 7px; background: #2E8B57; border-radius: 0 10px 0 10px; }
@keyframes sway { 50% { transform: rotate(8deg); } }

/* ---------- Our Playway kid (background-removed cut-outs) ---------- */
.kid { position: absolute; pointer-events: none; }
.kid img { width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgba(27, 42, 94, .28)); transform-origin: 50% 100%; }
.kid-tiger { left: -13%; bottom: -7%; width: 29%; z-index: 6; }
.kid-tiger img { animation: kidBob 3.6s ease-in-out infinite; }
html.js .kid-tiger { opacity: 0; transform: translateY(70px) scale(.6) rotate(-8deg); }
html.ready .kid-tiger { opacity: 1; transform: none; transition: opacity .5s ease 1.05s, transform 1s var(--bounce) 1.05s; }
@keyframes kidBob { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg) translateY(-6px); } }
.say { position: absolute; z-index: 2; background: #fff; color: var(--navy); border: 3px solid var(--navy); border-radius: 18px; padding: 6px 14px; font-family: var(--font-hand); font-size: 1.25rem; line-height: 1.15; white-space: nowrap; box-shadow: 0 6px 0 rgba(27, 42, 94, .15); animation: sayWiggle 2.8s ease-in-out infinite; }
.say b { color: var(--red); font-weight: 400; }
.say::after { content: ""; position: absolute; bottom: -12px; width: 18px; height: 18px; background: #fff; border-right: 3px solid var(--navy); border-bottom: 3px solid var(--navy); }
.say-left { top: 2%; left: 72%; transform-origin: 0 100%; }
.say-left::after { left: 14px; transform: rotate(45deg) skew(10deg, 10deg); }
.say-right { top: 10%; left: 92%; transform-origin: 0 100%; }
.say-right::after { left: 14px; transform: rotate(45deg) skew(10deg, 10deg); }
html.js .kid-tiger .say { opacity: 0; scale: .3; }
html.ready .kid-tiger .say { opacity: 1; scale: 1; transition: opacity .3s ease 2s, scale .6s var(--bounce) 2s; }
@keyframes sayWiggle { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
.enquiry-wrap { position: relative; }
.adm-grid { margin-top: 160px; }
.kid-uniform { left: 26px; top: -186px; width: 152px; z-index: 0; }
.kid-uniform img { animation: kidBob 4.2s ease-in-out infinite; filter: drop-shadow(0 10px 12px rgba(27, 42, 94, .2)); }
.enquiry-wrap .enquiry { z-index: 1; }
html.js .enquiry-wrap .kid-uniform { transform: translateY(120px); transition: transform 1s var(--bounce) .35s; }
html.js .enquiry-wrap.in .kid-uniform { transform: none; }

/* ---------- Ribbon marquee ---------- */
.ribbon { position: relative; z-index: 3; margin-top: -36px; background: var(--blue); rotate: -1.6deg; padding: 14px 0; overflow: hidden; box-shadow: 0 8px 0 #15378f; width: 104%; margin-left: -2%; }
.ribbon-track { display: flex; gap: 26px; width: max-content; animation: marquee 32s linear infinite; align-items: center; }
.ribbon span { font-family: var(--font-h); font-weight: 600; font-size: 1.3rem; color: #fff; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.ribbon i { font-style: normal; color: var(--sun); font-size: 1.4rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 80px; margin-bottom: 100px; }
.stat { background: #fff; border: 3px solid var(--navy); border-radius: 26px; padding: 22px 20px; box-shadow: 7px 7px 0 var(--c); text-align: center; }
.stat b { display: block; font-family: var(--font-h); font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1.1; color: var(--navy); }
.stat > span { color: var(--muted); font-weight: 700; font-size: .98rem; }
.stat:hover { animation: jelly .7s; }

/* =========================================================
   PROGRAMMES — the Playway Express
   ========================================================= */
.programmes { padding: 100px 0 110px; background: #ECFAF2 radial-gradient(circle, rgba(52, 178, 106, .14) 2px, transparent 2.5px) 0 0 / 26px 26px; overflow: hidden; }
.rail { overflow-x: auto; overflow-y: hidden; padding: 70px 0 14px; scrollbar-width: none; background: linear-gradient(var(--navy), var(--navy)) 0 calc(100% - 11px) / 100% 5px no-repeat, repeating-linear-gradient(90deg, #A0672D 0 16px, transparent 16px 34px) 0 100% / 100% 11px no-repeat; }
.rail::-webkit-scrollbar { display: none; }
.train { display: flex; align-items: flex-end; width: max-content; margin: 0 auto; padding: 0 32px; }
html.js .train { transform: translateX(110vw); }
html.js .rail.in .train { transform: none; transition: transform 2.8s cubic-bezier(.22, .9, .25, 1); }
.engine { position: relative; width: 220px; height: 150px; flex: none; }
.engine svg { width: 100%; height: 100%; position: relative; z-index: 1; }
.engine .wheel { bottom: -14px; width: 40px; height: 40px; }
.engine .w1 { left: 22px; } .engine .w2 { left: 112px; } .engine .w3 { left: 160px; }
.smoke { position: absolute; left: 38px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid rgba(27, 42, 94, .15); opacity: 0; animation: puff 2.4s ease-out infinite; }
.smoke.s2 { animation-delay: .8s; } .smoke.s3 { animation-delay: 1.6s; }
@keyframes puff { 0% { transform: translate(0, 0) scale(.4); opacity: .95; } 100% { transform: translate(60px, -90px) scale(2.2); opacity: 0; } }
.carriage { position: relative; width: 176px; height: 140px; flex: none; margin-left: 18px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .45s var(--bounce); }
.carriage:hover { transform: translateY(-8px) rotate(-1.5deg); }
.carriage.on { transform: translateY(-16px); }
.car-roof { position: absolute; top: 4px; left: 10px; right: 10px; height: 16px; background: var(--navy); border-radius: 10px 10px 4px 4px; }
.car-body { position: absolute; left: 0; right: 0; top: 16px; bottom: 22px; background: var(--c); border: 4px solid var(--navy); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: box-shadow .3s; }
.carriage.on .car-body { box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--c), 0 18px 30px rgba(27, 42, 94, .25); }
.car-window { width: 52px; height: 44px; border-radius: 10px; background: #fff; border: 3px solid var(--navy); display: grid; place-items: center; }
.car-window .ico { width: 36px; height: 36px; }
.carriage.on .car-window .ico { animation: hop .6s var(--bounce) infinite alternate; }
.car-name { background: #fff; color: var(--navy); border-radius: 999px; padding: 1px 12px; font-family: var(--font-h); font-weight: 700; font-size: 1.02rem; border: 2.5px solid var(--navy); white-space: nowrap; }
.coupler { position: absolute; left: -22px; bottom: 34px; width: 26px; height: 8px; background: var(--navy); border-radius: 4px; }
.carriage .wheel { bottom: 2px; width: 34px; height: 34px; }
.carriage .w1 { left: 18px; } .carriage .w2 { right: 18px; }
.wheel { position: absolute; border-radius: 50%; background: radial-gradient(circle, #FFC531 0 18%, var(--navy) 19% 30%, transparent 31%), repeating-conic-gradient(var(--navy) 0 12deg, #45548a 12deg 45deg); border: 4px solid var(--navy); z-index: 2; }
html.js .rail.moving .wheel { animation: roll .45s linear infinite reverse; }
@keyframes roll { to { transform: rotate(360deg); } }
@keyframes trainLoop { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }
.track { display: none; }
.prog-panels { margin-top: 44px; }
.prog-panel[hidden] { display: none; }
.prog-panel { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; background: #fff; border: 3px solid var(--navy); border-radius: 30px; padding: 30px 34px; box-shadow: 9px 9px 0 var(--c); max-width: 980px; margin: 0 auto; animation: panelIn .55s var(--bounce); }
@keyframes panelIn { from { opacity: 0; transform: translateY(24px) scale(.95) rotate(-1deg); } }
.pp-icon { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 22%, #fff); border: 3px dashed var(--c); }
.pp-icon .ico { width: 66px; height: 66px; animation: wobble 3s ease-in-out infinite; }
.pp-tag { font-family: var(--font-hand); font-size: 1.5rem; color: var(--c); margin: 0; filter: brightness(.85); }
.pp-body h3 { font-size: 2.1rem; margin-bottom: .2em; }
.pp-body p:last-child { margin: 0; color: var(--muted); font-size: 1.1rem; }

/* =========================================================
   CAMPUS — sticky sideways tour
   ========================================================= */
.campus { position: relative; height: calc(var(--n) * 40vh + 100vh); background: #EAF6FF; }
.campus::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(47, 123, 234, .1) 2px, transparent 2.5px) 0 0 / 30px 30px; pointer-events: none; }
.campus-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--header-h) - 10px); }
.campus-head { margin-bottom: 26px; }
.campus-hint { font-family: var(--font-hand); font-size: 1.3rem !important; }
.hint-touch { display: none; }
.hint-feet { display: inline-block; animation: hop 1s ease-in-out infinite; }
.campus-viewport { overflow: visible; }
.campus-track { list-style: none; margin: 0; padding: 18px calc(50vw - 210px); display: flex; gap: 36px; width: max-content; transform: translateX(var(--tx, 0)); will-change: transform; }
.spot { flex: none; width: 420px; background: #fff; border: 3px solid var(--navy); border-radius: 30px; padding: 14px; rotate: var(--r); box-shadow: 9px 9px 0 var(--c); transition: rotate .5s var(--bounce), scale .5s var(--bounce); position: relative; }
.spot.near { rotate: 0deg; scale: 1.05; }
.spot-photo { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; }
.spot-photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.spot.near .spot-photo img { scale: 1.08; }
.spot-text { padding: 16px 8px 6px; position: relative; }
.spot-no { position: absolute; right: 8px; top: 2px; font-family: var(--font-h); font-weight: 700; font-size: 3rem; color: var(--c); opacity: .3; line-height: 1; }
.spot h3 { font-size: 1.55rem; margin-bottom: .25em; padding-right: 60px; }
.spot p { margin: 0; color: var(--muted); }
.campus-progress { margin-top: 30px; }
.footpath { position: relative; height: 10px; border-radius: 10px; background: repeating-linear-gradient(90deg, rgba(27, 42, 94, .18) 0 14px, transparent 14px 24px); max-width: 640px; margin: 0 auto; }
.footpath-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--green), var(--cyan), var(--purple)); border-radius: 10px; }
.walker { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); translate: -50% -62%; font-size: 1.8rem; animation: hop .5s ease-in-out infinite alternate; }

/* =========================================================
   SEEDS — growing sprout
   ========================================================= */
.seeds { padding: 120px 0; background: #fff; }
.seeds-in { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.seeds-photo { margin: 0; background: var(--paper); padding: 14px 14px 18px; border-radius: 8px; box-shadow: 0 26px 50px rgba(27, 42, 94, .2); rotate: -3deg; position: relative; }
.seeds-photo img { border-radius: 4px; width: 100%; }
.tape { position: absolute; top: -16px; left: 18%; width: 110px; height: 32px; background: rgba(124, 224, 163, .8); rotate: -8deg; }
.seeds-copy { position: relative; padding-right: 150px; }
.seeds-quote { font-family: var(--font-hand); font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.05; margin: 0 0 22px; color: var(--navy); }
.seeds-quote span { color: var(--green); display: block; }
.seeds-copy > p:last-of-type { color: var(--muted); font-size: 1.15rem; }
.sprout { position: absolute; right: -10px; bottom: -40px; width: 170px; overflow: visible; --p: 0; }
.pot { fill: var(--red); stroke: var(--navy); stroke-width: 4; stroke-linejoin: round; }
.pot-rim { fill: #FF6B7D; stroke: var(--navy); stroke-width: 4; }
.stem { fill: none; stroke: #2E9E5B; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: calc(220 - 220 * var(--p)); }
.leaf { fill: #4FBF7A; stroke: var(--navy); stroke-width: 3; transform-box: fill-box; }
.l1 { transform-origin: 100% 100%; transform: scale(clamp(0, (var(--p) - .3) * 5, 1)); }
.l2 { transform-origin: 0% 100%; transform: scale(clamp(0, (var(--p) - .5) * 5, 1)); }
.l3 { transform-origin: 100% 100%; transform: scale(clamp(0, (var(--p) - .65) * 5, 1)); }
.bloom { transform-box: fill-box; transform-origin: center; transform: scale(clamp(0, (var(--p) - .82) * 6, 1)) rotate(calc(var(--p) * 180deg)); stroke: var(--navy); stroke-width: 2.5; }

/* =========================================================
   WHY
   ========================================================= */
.why { padding-top: 40px; padding-bottom: 120px; }
.why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why-grid li { background: #fff; border: 3px solid var(--navy); border-radius: 26px; padding: 28px 26px; transition: transform .4s var(--bounce), box-shadow .3s; box-shadow: 0 0 0 var(--c); }
.why-grid li:hover { transform: translate(-4px, -6px) rotate(-1deg) !important; box-shadow: 10px 12px 0 var(--c); }
.why-grid .ico { width: 64px; height: 64px; margin-bottom: 14px; }
.why-grid li:hover .ico { animation: jelly .7s; }
.why-grid h3 { font-size: 1.45rem; margin-bottom: .3em; }
.why-grid p { margin: 0; color: var(--muted); }

/* =========================================================
   MOMENTS — polaroid wall
   ========================================================= */
.moments { padding: 110px 0 120px; background: #FFF0F6 radial-gradient(circle, rgba(255, 111, 168, .16) 2px, transparent 2.5px) 0 0 / 28px 28px; }
.chips { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 46px; max-width: 900px; }
.chip { position: relative; z-index: 1; border: 2.5px solid var(--navy); background: #fff; border-radius: 999px; padding: 8px 18px; font-family: var(--font-h); font-weight: 600; cursor: pointer; transition: color .3s, background .3s, transform .3s var(--bounce); }
.chip:hover { transform: translateY(-3px); }
.chip.on { color: #fff; background: transparent; }
.chip-pill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--navy); transition: transform .5s var(--bounce), width .5s var(--bounce), height .3s; }
.wall { list-style: none; margin: 0; padding: 0; columns: 5 200px; column-gap: 26px; }
.shot { break-inside: avoid; margin: 0 0 26px; display: inline-block; width: 100%; transition: opacity .35s, transform .35s; }
html.js .wall .shot { opacity: 0; transform: translateY(-50px) rotate(16deg); }
html.js .wall.in .shot { opacity: 1; transform: none; transition: opacity .6s ease var(--d), transform .9s var(--bounce) var(--d); }
.shot.fading { opacity: 0 !important; transform: scale(.85) !important; transition-delay: 0s !important; }
.shot.hidden, .wall:not(.all-shown) .shot.extra { display: none; }
.more-wrap { text-align: center; margin: 6px 0 26px; }
.more-wrap[hidden] { display: none; }
.shot-btn { display: block; width: 100%; padding: 10px 10px 40px; border: 0; background: var(--paper); border-radius: 5px; cursor: zoom-in; position: relative; rotate: var(--r); box-shadow: 0 16px 30px rgba(27, 42, 94, .18); transition: rotate .45s var(--bounce), scale .45s var(--bounce), box-shadow .3s; }
.shot-btn:hover, .shot-btn:focus-visible { rotate: 0deg; scale: 1.05; z-index: 2; box-shadow: 0 26px 50px rgba(27, 42, 94, .28); }
.shot-btn img { width: 100%; border-radius: 3px; }
.shot-cap { position: absolute; left: 0; right: 0; bottom: 7px; font-family: var(--font-hand); font-size: 1.15rem; color: var(--navy); }
.insta-cta { text-align: center; margin-top: 20px; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; overflow: hidden; }
.lightbox[open] { display: grid; place-items: center; grid-template-columns: 70px 1fr 70px; }
.lightbox::backdrop { background: rgba(16, 26, 60, .9); backdrop-filter: blur(6px); }
.lightbox figure { margin: 0; text-align: center; animation: panelIn .45s var(--bounce); }
.lightbox img { max-width: min(92vw, 1000px); max-height: 80vh; width: auto; margin: 0 auto; border: 10px solid var(--paper); border-bottom-width: 14px; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lightbox figcaption { color: #fff; font-family: var(--font-hand); font-size: 1.4rem; margin-top: 12px; }
.lb-btn { width: 54px; height: 54px; border-radius: 50%; border: 0; background: #fff; color: var(--navy); display: grid; place-items: center; cursor: pointer; box-shadow: 0 5px 0 rgba(0, 0, 0, .3); z-index: 2; }
.lb-btn .ico { width: 26px; height: 26px; }
.lb-close { position: fixed; top: 18px; right: 18px; }
.lb-next .ico { rotate: 180deg; }

/* =========================================================
   FOUNDER
   ========================================================= */
.founder { padding: 120px 0; background: #F3F0FF; }
.founder-in { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.founder-photos { position: relative; height: 560px; }
.founder-photos .polaroid { position: absolute; }
.fp1 { top: 0; left: 0; width: 50%; z-index: 2; }
.fp1 img { aspect-ratio: 3 / 4; }
.fp2 { top: 12%; right: 0; width: 56%; z-index: 1; }
.fp3 { bottom: 0; left: 18%; width: 60%; z-index: 3; padding-bottom: 12px; }
.fp3 img { aspect-ratio: 16 / 9; }
.founder-copy > p { font-size: 1.12rem; color: var(--muted); }
.founder-copy h2 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); }
.workshop { display: flex; gap: 18px; background: #fff; border: 3px dashed var(--purple); border-radius: 24px; padding: 22px 24px; margin: 26px 0 30px; }
.ws-ico { width: 60px !important; height: 60px !important; }
.workshop h3 { font-size: 1.4rem; margin-bottom: .2em; }
.workshop p { margin: 0 0 .5em; color: var(--muted); }
.ws-quote { font-family: var(--font-hand); font-size: 1.45rem; color: var(--purple) !important; line-height: 1.25; margin: 0 !important; }
.founder-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* =========================================================
   BALLOON SKY
   ========================================================= */
.balloon-sky { position: relative; min-height: 78vh; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg, #2353C9 0%, #3D74E6 55%, #7FB2FF 100%); color: #fff; padding: 110px 0; }
.balloon-field { position: absolute; inset: 0; }
.balloon-pop { position: absolute; bottom: -180px; left: var(--x); width: var(--w); aspect-ratio: 5 / 6; cursor: pointer; animation: balloonRise var(--dur) linear var(--delay) forwards; z-index: 1; }
.balloon-pop i { position: absolute; inset: 0; border-radius: 50% 50% 47% 53% / 58% 58% 42% 42%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .75) 0 9%, transparent 10%), radial-gradient(circle at 50% 60%, var(--c) 0 62%, color-mix(in srgb, var(--c) 70%, #000) 100%); box-shadow: inset -8px -10px 0 rgba(0, 0, 0, .1); animation: balloonSway 3s ease-in-out infinite alternate; }
.balloon-pop i::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -6px; border: 6px solid transparent; border-bottom-color: var(--c); }
.balloon-pop::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 90px; background: rgba(255, 255, 255, .6); margin-top: 6px; }
.balloon-pop.popped { animation: none; }
.balloon-pop.popped i { animation: popBalloon .22s ease-out forwards; }
.balloon-pop.popped::after { opacity: 0; transition: opacity .2s; }
@keyframes balloonRise { to { transform: translateY(var(--rise, -900px)); } }
@keyframes balloonSway { from { transform: rotate(-6deg) translateX(-8px); } to { transform: rotate(6deg) translateX(8px); } }
@keyframes popBalloon { to { transform: scale(1.7); opacity: 0; } }
.balloon-copy { position: relative; z-index: 2; text-align: center; pointer-events: none; }
.smile-quote { font-family: var(--font-h); font-weight: 600; font-size: clamp(1.8rem, 3.7vw, 3.1rem); line-height: 1.22; max-width: 1120px; margin: 0 auto 18px; text-shadow: 0 4px 0 rgba(13, 22, 56, .35); }
.smile-quote em { font-style: normal; font-family: var(--font-hand); color: var(--sun); font-size: 1.15em; }
.pop-hint { font-family: var(--font-hand); font-size: 1.4rem; opacity: .9; margin: 0; }
.pop-hint span { color: var(--sun); }

/* =========================================================
   ADMISSIONS + VISIT
   ========================================================= */
.admissions { position: relative; padding: 110px 0 0; background: #FFFBEB radial-gradient(circle, rgba(255, 197, 49, .25) 2px, transparent 2.5px) 0 0 / 28px 28px; }
.adm-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.enquiry { position: relative; background: #fff; border: 3px solid var(--navy); border-radius: 30px; padding: 32px; box-shadow: 10px 10px 0 var(--sun); }
.enquiry h3 { font-size: 1.8rem; }
.field { position: relative; margin-bottom: 14px; }
.field input, .field select, .field textarea { width: 100%; border: 2.5px solid var(--line); border-radius: 16px; padding: 24px 16px 8px; font: inherit; font-weight: 600; color: var(--navy); background: #FAFCFF; transition: border-color .2s, box-shadow .2s, background .2s; resize: vertical; }
.field select { appearance: none; background: #FAFCFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231B2A5E' stroke-width='2.6' stroke-linecap='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px; cursor: pointer; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--cyan); background: #fff; box-shadow: 0 0 0 5px rgba(47, 123, 234, .15); }
.field label { position: absolute; left: 18px; top: 16px; color: var(--muted); font-weight: 600; pointer-events: none; transition: top .2s, font-size .2s, color .2s; }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label, .field label.fixed { top: 6px; font-size: .76rem; color: var(--cyan); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.field.bad input { border-color: var(--red); background: #FFF5F6; animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.spinner { display: none; width: 18px; height: 18px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.busy .spinner { display: inline-block; }
.btn.busy { pointer-events: none; opacity: .85; }
.form-note { margin: 14px 0 0; font-size: .95rem; color: var(--muted); font-weight: 600; }
.form-note.bad { color: var(--red); }
.form-done { position: absolute; inset: 0; background: #fff; border-radius: 27px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; animation: panelIn .5s var(--bounce); }
.form-done[hidden] { display: none; }
.form-done svg { width: 90px; height: 90px; fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.form-done circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw .7s ease forwards; }
.form-done path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .4s ease .6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.visit-card { background: var(--navy); color: #fff; border-radius: 30px; padding: 32px; box-shadow: 10px 10px 0 var(--cyan); }
.visit-card h3 { font-size: 1.8rem; color: #fff; }
.visit-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 18px; }
.visit-list li { display: flex; gap: 14px; align-items: flex-start; }
.visit-list b { display: block; font-family: var(--font-h); font-weight: 600; color: var(--sun); }
.visit-list a, .visit-list address, .visit-list span { color: #E6ECFF; text-decoration: none; display: block; }
.visit-list a:hover { color: #fff; text-decoration: underline; }
.vi { flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--c); display: grid !important; place-items: center; color: #fff !important; }
.vi .ico { width: 22px; height: 22px; }
.open-now { display: inline-flex !important; align-items: center; gap: 6px; margin-top: 6px; width: fit-content; max-width: 100%; padding: 2px 12px; border-radius: 999px; font-size: .85rem; font-weight: 800; background: rgba(255, 255, 255, .12); }
.open-now::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.open-now.is-open { color: #7CF0A8 !important; }
.open-now.is-closed { color: #FFB4BD !important; }
.map { height: 230px; border-radius: 20px; overflow: hidden; margin-bottom: 18px; background: #DDEBFF; background-image: linear-gradient(rgba(255, 255, 255, .7) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, .7) 2px, transparent 2px); background-size: 34px 34px; position: relative; }
.map iframe { width: 100%; height: 100%; border: 0; }
.map-load { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 0; background: transparent; cursor: pointer; font-family: var(--font-h); font-weight: 600; color: var(--navy); font-size: 1.1rem; }
.map-load .ico { width: 48px; height: 48px; color: var(--red); animation: pinBounce 1.2s ease-in-out infinite; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .2)); }
@keyframes pinBounce { 50% { transform: translateY(-10px); } }
.map-load span { background: #fff; padding: 4px 16px; border-radius: 999px; box-shadow: 0 4px 0 rgba(27, 42, 94, .15); }
.road { position: relative; height: 150px; margin-top: 110px; background: linear-gradient(#4FBF7A 0 14px, #3B4766 14px); overflow-x: clip; overflow-y: visible; }
.road::after { content: ""; position: absolute; left: 0; right: 0; top: 100px; height: 6px; background: repeating-linear-gradient(90deg, #FFE27A 0 40px, transparent 40px 80px); }
.bus { position: absolute; left: 0; bottom: 70px; width: 190px; z-index: 1; animation: drive 15s linear infinite; }
.bus svg { width: 100%; animation: busBump .35s ease-in-out infinite alternate; }
.bus .wheel { bottom: -8px; width: 36px; height: 36px; animation: roll .5s linear infinite; }
.bus .bw1 { left: 28px; } .bus .bw2 { left: 128px; }
@keyframes drive { from { transform: translateX(-220px); } to { transform: translateX(calc(100vw + 40px)); } }
@keyframes busBump { to { transform: translateY(-3px); } }

/* =========================================================
   FAQ
   ========================================================= */
.faq { padding-top: 110px; padding-bottom: 130px; }
.faq-list { max-width: 880px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item { background: #fff; border: 3px solid var(--navy); border-radius: 22px; transition: box-shadow .3s; }
.faq-item[open] { box-shadow: 7px 7px 0 var(--green); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item h3 { font-size: 1.22rem; margin: 0; }
.faq-plus { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--sun); display: grid; place-items: center; transition: rotate .4s var(--bounce), background .3s; }
.faq-item[open] .faq-plus { rotate: 135deg; background: var(--green); color: #fff; }
.faq-a { padding: 0 22px 18px; color: var(--muted); font-size: 1.08rem; }
.faq-a p { margin: 0; }
.faq-item[open] .faq-a { animation: panelIn .4s var(--bounce); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { position: relative; color: #E8FFF0; margin-top: 20px; }
.footer-meadow { position: relative; height: 120px; margin-bottom: -2px; }
.meadow { position: absolute; inset: 0; width: 100%; height: 100%; }
.f-flower { position: absolute; bottom: 40px; left: var(--x); width: 4px; height: 34px; background: #1E6E40; transform-origin: 50% 100%; animation: sway 3s ease-in-out infinite var(--d); }
.f-flower::before { content: ""; position: absolute; left: 50%; top: -10px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: #FFE27A; box-shadow: 0 -10px 0 -1px var(--c), 0 10px 0 -1px var(--c), -10px 0 0 -1px var(--c), 10px 0 0 -1px var(--c); }
.caterpillar { position: absolute; bottom: 30px; left: 0; display: flex; align-items: flex-end; animation: crawl 40s linear infinite; }
.caterpillar i, .caterpillar b { display: block; width: 22px; height: 22px; border-radius: 50%; background: #A3E635; border: 3px solid #1E6E40; margin-left: -6px; animation: inch .6s ease-in-out infinite alternate; }
.caterpillar i:nth-child(2) { animation-delay: .1s; } .caterpillar i:nth-child(3) { animation-delay: .2s; } .caterpillar i:nth-child(4) { animation-delay: .3s; } .caterpillar i:nth-child(5) { animation-delay: .4s; }
.caterpillar b { width: 28px; height: 28px; background: #84CC16; position: relative; animation-delay: .5s; }
.caterpillar b::before { content: ""; position: absolute; right: 4px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--navy); }
@keyframes crawl { from { transform: translateX(-160px); } to { transform: translateX(calc(100vw + 20px)); } }
@keyframes inch { to { transform: translateY(-6px); } }
.footer-body { background: #23824B; padding: 30px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 36px; padding-bottom: 40px; }
.f-brand .logo { align-items: flex-start; }
.f-brand .logo-sub { color: #C8F5D8; }
.f-brand p { margin-top: 16px; color: #D2F7E0; }
.f-social { display: flex; gap: 10px; }
.f-social a { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; transition: background .2s, transform .3s var(--bounce); }
.f-social a:hover { background: var(--sun); color: var(--navy); transform: translateY(-4px) rotate(-6deg); }
.f-social .ico { width: 22px; height: 22px; }
.f-h { font-size: 1.25rem; color: var(--sun); margin-bottom: .8em; }
.f-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.f-links a, .f-line a { color: #E8FFF0; text-decoration: none; }
.f-links a:hover, .f-line a:hover { color: var(--sun); text-decoration: underline; }
.f-addr { margin-bottom: 12px; color: #D2F7E0; }
.f-line { display: flex; gap: 10px; align-items: flex-start; color: #D2F7E0; margin-bottom: 10px; }
.f-line .ico { margin-top: 4px; color: var(--sun); }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 18px; padding-bottom: 26px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: .92rem; color: #C8F5D8; }
.f-made .ico { color: var(--pink); }

/* to-top balloon */
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 400; width: 54px; height: 72px; border: 0; background: none; padding: 0; cursor: pointer; opacity: 0; transform: translateY(40px); transition: opacity .3s, transform .4s var(--bounce); pointer-events: none; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; animation: floaty 4s ease-in-out infinite; }
.to-top svg { width: 100%; height: 100%; overflow: visible; }
.to-top ellipse { fill: var(--red); stroke: var(--navy); stroke-width: 3; }
.tt-knot { fill: var(--red); stroke: var(--navy); stroke-width: 2; }
.tt-string { fill: none; stroke: var(--navy); stroke-width: 2; }
.tt-shine { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: .8; }
.to-top.launch { animation: launch .8s ease-in forwards; }
@keyframes launch { to { transform: translateY(-110vh) rotate(-10deg); } }

/* confetti pieces (spawned by JS) */
.confetto { position: fixed; z-index: 900; pointer-events: none; width: 10px; height: 14px; border-radius: 3px; }

/* not found */
.notfound { min-height: 80vh; display: grid; place-items: center; text-align: center; padding: 140px 0 60px; background: linear-gradient(180deg, #B9E5FF, var(--bg)); }
.notfound h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.nf-balloon { width: 110px; height: 132px; margin: 0 auto 26px; border-radius: 50% 50% 47% 53% / 58% 58% 42% 42%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7) 0 10%, transparent 11%), var(--red); color: #fff; font-family: var(--font-h); font-weight: 700; font-size: 3.6rem; display: grid; place-items: center; animation: floaty 5s ease-in-out infinite; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
    .nav-phone { display: none; }
    .nav-links a { padding: 8px 9px; }
}
@media (max-width: 960px) {
    :root { --header-h: 68px; }
    .burger { display: flex; }
    .nav { position: fixed; top: var(--header-h); left: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 10px; background: #fff; border: 3px solid var(--navy); border-radius: 24px; padding: 18px; box-shadow: 8px 8px 0 var(--sun); transform: translateY(-20px) scale(.96); opacity: 0; pointer-events: none; transition: transform .35s var(--bounce), opacity .25s; }
    .nav.open { transform: none; opacity: 1; pointer-events: auto; }
    .nav-links { flex-direction: column; }
    .nav-links a { padding: 12px 16px; font-size: 1.15rem; }
    .nav-phone { display: block; text-align: center; padding: 8px; }
    .nav-cta { width: 100%; }
    .site-header:not(.scrolled) { background: rgba(255, 255, 255, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .hero-in { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .hero-art { height: clamp(340px, 80vw, 480px); max-width: 560px; width: 100%; margin: 0 auto; }
    .kite { left: auto; right: 34%; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    /* The train is wider than the screen here, so it keeps driving through in a loop.
       Tapping a carriage focuses it, which stops the train at that "station". */
    .rail { overflow: hidden; }
    html.js .rail.in .train { transform: none; transition: none; animation: trainLoop 20s linear infinite; }
    html.js .rail.in .wheel { animation: roll .45s linear infinite reverse; }
    .rail:focus-within .train, .rail:focus-within .wheel { animation-play-state: paused !important; }
    .prog-panel { grid-template-columns: auto 1fr; }
    .pp-ask { grid-column: 1 / -1; justify-self: start; }
    .campus { height: auto; }
    .campus-sticky { position: static; height: auto; padding: 90px 0 70px; }
    .campus-track { width: auto; transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 24px 26px; scrollbar-width: none; }
    .campus-track::-webkit-scrollbar { display: none; }
    .spot { width: min(360px, 82vw); scroll-snap-align: center; rotate: 0deg; }
    .campus-progress { display: none; }
    .hint-desk { display: none; }
    .hint-touch { display: inline; }
    .seeds-in, .founder-in, .adm-grid { grid-template-columns: minmax(0, 1fr); }
    .seeds-copy { padding-right: 0; padding-bottom: 150px; }
    .sprout { right: 50%; margin-right: -75px; width: 150px; bottom: -20px; }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .founder-photos { height: clamp(380px, 90vw, 520px); max-width: 560px; width: 100%; margin: 0 auto; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    body { font-size: 1rem; }
    .wrap { padding: 0 16px; }
    .logo-word { font-size: 1.45rem; padding: 4px 10px 6px; }
    .logo-sub { font-size: .56rem; margin-top: 9px; letter-spacing: .12em; }
    .hero { padding-bottom: 190px; }
    .hero-ctas .btn { flex: 1 1 100%; }
    .sun { width: 96px; right: 2%; }
    .kite { display: none; }
    .stats { gap: 14px; margin-top: 60px; margin-bottom: 70px; }
    .stat { padding: 16px 12px; border-radius: 20px; box-shadow: 5px 5px 0 var(--c); }
    .programmes, .moments, .founder, .seeds { padding: 80px 0; }
    .prog-panel { grid-template-columns: 1fr; text-align: center; padding: 26px 22px; justify-items: center; }
    .pp-ask { justify-self: center; }
    .why-grid { grid-template-columns: 1fr; gap: 14px; }
    .why-grid li { display: grid; grid-template-columns: 50px 1fr; column-gap: 16px; align-items: start; padding: 18px; border-radius: 20px; }
    .why-grid .ico { width: 50px; height: 50px; margin: 0; grid-row: span 2; }
    .why-grid h3 { font-size: 1.2rem; margin-bottom: .15em; }
    .why-grid p { font-size: .95rem; }
    .insta-cta .btn { white-space: normal; text-align: center; line-height: 1.3; }
    .balloon-sky { min-height: 0; padding: 90px 0 150px; }
    .to-top { width: 40px; height: 54px; right: 10px; bottom: 12px; }
    .rail { padding-top: 46px; }
    .wall { columns: 2 140px; column-gap: 14px; }
    .shot { margin-bottom: 14px; }
    .shot-btn { padding: 6px 6px 30px; }
    .shot-cap { font-size: .95rem; }
    .chips { gap: 8px; }
    .chip { padding: 6px 14px; font-size: .92rem; }
    .enquiry, .visit-card { padding: 24px 20px; border-radius: 24px; }
    .form-actions .btn { flex: 1 1 100%; }
    .lightbox[open] { grid-template-columns: 1fr; }
    .lb-prev, .lb-next { position: fixed; bottom: 20px; }
    .lb-prev { left: 20px; } .lb-next { right: 20px; }
    .lightbox img { max-height: 64vh; }
    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    /* Phone collage: two polaroids with whole captions, tiger and sticker in the free corners */
    .hero-art { height: 132vw; max-height: 560px; }
    .hero-art .p1 { top: 2%; right: 0; left: auto; width: 64%; }
    .hero-art .p2, .d-heart, .d-swirl { display: none; }
    .hero-art .p3 { top: auto; bottom: 0; right: 6%; left: auto; width: 60%; }
    .hero-art .polaroid { padding: 9px 9px 38px; }
    .hero-art .polaroid figcaption { font-size: 1.15rem; bottom: 6px; }
    .hero-art .polaroid::before { width: 70px; height: 22px; margin-left: -35px; top: -11px; }
    .d-star { top: -3%; left: 30%; width: 44px; }
    .sticker { top: 0; left: 0; right: auto; bottom: auto; width: 88px; height: 88px; }
    .sticker b { font-size: 1.6rem; }
    .sticker span { font-size: .95rem; }
    .kid-tiger { left: -3%; bottom: -3%; width: 33%; }
    .say { font-size: 1rem; padding: 4px 10px; }
    .say-left { left: 0; top: -21%; white-space: normal; width: 104px; text-align: center; }
    .adm-grid { margin-top: 140px; }
    .kid-uniform { width: 124px; top: -152px; left: 14px; }
    .say-right { left: 96%; top: 6%; }
    .ribbon span { font-size: 1.05rem; }
}

/* Respect reduced motion: everything shows, nothing loops */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .cloud, .plane, .bus, .caterpillar, .bubble, .balloon-pop { display: none; }
}