/* Website styles shared by every page. Colours, fonts and the form live in shared.css. */
/* ---------- Shared pieces ---------- */
.wrap{max-width:1360px;margin-inline:auto}
.h2{font:400 clamp(2.9rem,1.6rem + 6vw,6.6rem)/1 var(--display);letter-spacing:-.005em}
.lede{max-width:34em;font-size:clamp(1.08rem,1rem + .45vw,1.35rem);line-height:1.45;margin-top:.9em}

/* Sections are the thick pages of a board book, each one lying on top of the last */
.page{position:relative;padding:var(--section-y) var(--gut) calc(var(--section-y) + var(--page-r));margin-top:calc(var(--page-r) * -1);border-radius:var(--page-r) var(--page-r) 0 0}


/* ---------- Nav ---------- */
.nav{position:absolute;inset:0 0 auto;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(12px,1.6vw,22px) var(--gut)}
.logo{display:block;flex:none;width:clamp(124px,12vw,176px)}
.logo img{width:100%;height:auto}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);font-weight:600}
.nav-links a:not(.btn){text-decoration:none;background:linear-gradient(var(--chilli),var(--chilli)) 0 100%/0 3px no-repeat;transition:background-size .2s;padding-block:2px}
.nav-links a:not(.btn):hover{background-size:100% 3px}
.nav .btn{font-size:.98rem}
@media (max-width:860px){.nav-links a:not(.btn){display:none}.nav .btn{padding:.55em .95em .5em;font-size:.92rem;box-shadow:0 3px 0 var(--ink)}}

/* ---------- Hero: the alphabet comes down ---------- */
.hero{position:relative;min-height:max(100vh,58vw);min-height:max(100svh,58vw);background:var(--sun);overflow:hidden;padding:clamp(96px,12.5vh,128px) var(--gut) 0;isolation:isolate}
.hero h1{position:relative;z-index:4;font:400 min(11.6vw,24vh)/.94 var(--display);letter-spacing:-.008em;max-width:6.5em;color:var(--ink)}
.hero h1 .w{display:inline-block}
.hero h1 .w-hot{color:var(--chilli)}
.hero-sub{position:relative;z-index:4;width:fit-content;max-width:min(100%,780px);margin-top:clamp(12px,2vh,24px)}
.hero-sub p{max-width:29em;font-size:clamp(1.08rem,.95rem + .62vw,1.42rem);line-height:1.32;font-weight:600}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:clamp(14px,2vh,22px)}
.hero-note{display:flex;align-items:center;gap:6px;font-size:1.22rem;color:var(--chilli);rotate:-3deg;transition:opacity .4s}
.hero-note svg{width:44px;height:30px;flex:none}
.hero-note.gone{opacity:0}

.sun{position:absolute;z-index:2;right:calc(var(--gut) + 2vw);top:min(21vh,17vw);width:min(23vw,42vh);aspect-ratio:1;padding:0;border:0;background:none;border-radius:50%;cursor:pointer}
.sun-rays{position:absolute;inset:-17%;border-radius:50%;background:repeating-conic-gradient(var(--tang) 0 9deg,transparent 0 22.5deg);-webkit-mask:radial-gradient(closest-side,#000 97%,transparent);mask:radial-gradient(closest-side,#000 97%,transparent);animation:spin 46s linear infinite}
.sun-photo{position:absolute;inset:0;border-radius:50%;border:clamp(5px,.6vw,9px) solid var(--milk);background:url(assets/reels/poCefDJslYs.webp) 100% 37%/150% auto no-repeat var(--leaf);box-shadow:0 clamp(5px,.7vw,10px) 0 rgba(25,28,110,.22);transition:scale .25s cubic-bezier(.3,1.7,.5,1)}
.sun:hover .sun-photo{scale:1.04}
.sun-label{position:absolute;left:50%;bottom:-3%;translate:-50% 0;display:inline-flex;align-items:center;gap:.4em;padding:.34em .85em .28em;border-radius:999px;background:var(--ink);color:var(--milk);font:700 clamp(.72rem,.5rem + .55vw,1rem)/1.1 var(--body);white-space:nowrap}
.sun-label svg{width:.85em;height:.85em}
.sticker{position:absolute;z-index:5;right:calc(var(--gut) + min(23vw,41vh));top:min(50vh,39vw);display:grid;place-items:center;width:min(12.6vw,22vh);aspect-ratio:1;background:var(--chilli);color:var(--milk);text-align:center;text-decoration:none;font:400 min(1.38vw,2.4vh)/1.04 var(--display);rotate:-11deg;
  clip-path:polygon(50% 0,59% 11%,71% 4%,75% 17%,89% 15%,87% 29%,100% 33%,93% 45%,100% 57%,89% 63%,91% 77%,78% 79%,74% 92%,62% 87%,50% 100%,40% 88%,27% 94%,24% 80%,10% 80%,12% 65%,0 58%,8% 46%,0 33%,13% 29%,11% 15%,26% 17%,30% 4%,41% 11%);transition:rotate .3s cubic-bezier(.3,1.7,.5,1)}
.sticker:hover{rotate:6deg}
.sticker span{display:block;max-width:70%}
.sticker small{display:block;margin-top:.3em;font:700 .68em/1.05 var(--body)}
@keyframes spin{to{rotate:360deg}}
.sun{animation:rise 1.25s cubic-bezier(.2,1.25,.4,1) both}
.sticker{animation:slap .55s cubic-bezier(.3,1.5,.5,1) 1.5s both}
@keyframes rise{from{translate:0 55vh;scale:.72}}
@keyframes slap{0%{opacity:0;scale:2.4}70%{opacity:1;scale:.92}100%{opacity:1;scale:1}}

/* Balls: glossy plastic, one fixed light source */
.pit{position:absolute;inset:0;z-index:3;pointer-events:none}
.ball{position:absolute;left:0;top:0;display:grid;place-items:center;padding:0;border:0;border-radius:50%;pointer-events:auto;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-y;will-change:transform;visibility:hidden;color:var(--t,#fff);font-family:var(--display);line-height:1;-webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(circle at 33% 25%,rgba(255,255,255,.9) 0,rgba(255,255,255,.4) 8%,transparent 22%),
    radial-gradient(circle at 68% 82%,rgba(255,255,255,.26),transparent 34%),
    radial-gradient(circle at 50% 46%,transparent 56%,rgba(10,10,60,.26) 100%),
    var(--c)}
.ball .g{display:block;transform-origin:50% 50%;pointer-events:none}
.settled .ball .g{transition:transform .7s cubic-bezier(.3,1.9,.5,1)}
.ball.photo{background:var(--bg) var(--pos,50% 30%)/var(--zoom,190%) auto no-repeat var(--c);border:clamp(3px,.4vw,6px) solid var(--milk)}
.ball.photo::after{content:"";position:absolute;right:4%;bottom:4%;width:27%;aspect-ratio:1;border-radius:50%;background:var(--chilli) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center/62% no-repeat;border:2px solid var(--milk)}
.say{position:absolute;z-index:5;left:0;top:0;padding:.3em .8em .22em;border-radius:18px;background:var(--milk);color:var(--ink);font:700 clamp(1.1rem,.95rem + .7vw,1.6rem)/1.15 var(--hand);white-space:nowrap;box-shadow:0 4px 0 var(--ink);pointer-events:none;animation:say 1.9s cubic-bezier(.2,1.3,.4,1) forwards}
.say::after{content:"";position:absolute;left:50%;bottom:-9px;width:18px;height:18px;margin-left:-9px;background:var(--milk);rotate:45deg;border-radius:0 0 4px 0}
@keyframes say{0%{opacity:0;scale:.5}12%{opacity:1;scale:1}80%{opacity:1;translate:-50% calc(-100% - 22px)}100%{opacity:0;translate:-50% calc(-100% - 40px)}}

@media (max-aspect-ratio:1/1),(max-width:760px){
  .hero{--hf:min(18.6vw,12vh);padding-top:84px;min-height:max(100vh,760px);min-height:max(100svh,760px)}
  .hero h1{font-size:var(--hf);max-width:4.95em}
  .hero-sub{margin-top:24px}
  .sun{top:calc(84px + var(--hf)*1.82);right:var(--gut);width:min(23vw,15vh)}
  .sun-rays{inset:-14%}
  .sun-label{display:none}
  .sticker{display:none}
  .hero-note{font-size:1.14rem}
  .hero-note svg{display:none}
}
@media (max-width:520px){
  .cta-row .btn-second{display:none}
  .cta-row .btn-ink{width:100%}
}

/* ---------- Reels ---------- */
.reels{background:var(--ink);color:var(--milk);padding-inline:0}
.reels-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px;padding-inline:var(--gut)}
.reels .h2{color:var(--sun);max-width:9.5em}
.strip{display:flex;gap:clamp(14px,1.8vw,26px);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:clamp(34px,4vw,56px) var(--gut) 30px;cursor:grab}
.strip::-webkit-scrollbar{display:none}
.strip.dragging{cursor:grabbing;scroll-snap-type:none}
.strip.dragging .reel{pointer-events:none}
.reel{position:relative;flex:none;width:clamp(208px,20vw,290px);aspect-ratio:9/16;overflow:hidden;border-radius:26px;background:#0d0f44;scroll-snap-align:center;rotate:var(--tilt,0deg);box-shadow:0 0 0 5px var(--milk);text-decoration:none;color:var(--milk);transition:rotate .3s cubic-bezier(.3,1.7,.5,1),scale .3s cubic-bezier(.3,1.7,.5,1)}
.reel:hover,.reel:focus-visible{rotate:0deg;scale:1.03}
.reel img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.reel::after{content:"";position:absolute;inset:48% 0 0;background:linear-gradient(transparent,rgba(13,15,68,.92))}
.reel-t{position:absolute;z-index:1;left:16px;right:16px;bottom:15px;font:700 1.34rem/1.14 var(--hand)}
.reel-p{position:absolute;z-index:1;top:14px;right:14px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--chilli);transition:scale .25s cubic-bezier(.3,1.7,.5,1)}
.reel:hover .reel-p{scale:1.18}
.reel-p svg{width:22px;height:22px;fill:#fff}
.reels-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding-inline:var(--gut);margin-top:6px}
.strip-arrows{display:flex;gap:10px}
.round{display:grid;place-items:center;width:54px;height:54px;padding:0;border:0;border-radius:50%;background:var(--sun);color:var(--ink);cursor:pointer;transition:scale .2s cubic-bezier(.3,1.7,.5,1)}
.round:hover{scale:1.12}
.round svg{width:24px;height:24px}
.socials{display:flex;flex-wrap:wrap;gap:10px 22px;font-weight:600}
.socials a{display:inline-flex;align-items:center;gap:.5em;text-decoration:none}
.socials a:hover span{text-decoration:underline;text-underline-offset:3px}
.socials svg{width:1.45em;height:1.45em;flex:none}
.socials small{font-weight:500;font-size:.86em;opacity:.8}
@media (max-width:760px){.strip-arrows{display:none}}

/* ---------- Classes: a staircase, because that is what these four years are ---------- */
.classes{background:var(--milk)}
.classes .h2{color:var(--chilli);max-width:7.4em}
.classes-head{max-width:min(50%,640px);margin-bottom:-36px}
.classes-head .lede{max-width:23em}
.stairs{display:grid;grid-template-columns:repeat(4,1fr);align-items:end;gap:0}
.step{position:relative;background:var(--c);padding:clamp(18px,1.9vw,28px);min-height:var(--h);display:flex;flex-direction:column;justify-content:flex-end}
.step:first-child{border-top-left-radius:26px}
.step:not(:first-child){border-top-left-radius:26px}
.step:last-child{border-top-right-radius:26px}
.step:not(:last-child)::after{content:"";position:absolute;right:0;top:0;width:26px;height:26px;background:var(--c)}
.step:nth-child(1){--c:var(--leaf);--h:400px;--d:clamp(92px,9vw,128px)}
.step:nth-child(2){--c:var(--sun);--h:458px;--d:clamp(104px,10vw,146px)}
.step:nth-child(3){--c:var(--bubble);--h:516px;--d:clamp(116px,11vw,164px)}
.step:nth-child(4){--c:var(--splash);--h:574px;--d:clamp(128px,12vw,184px)}
.step-ball{position:absolute;z-index:2;right:clamp(14px,1.6vw,26px);bottom:calc(100% - 6px);width:var(--d);height:var(--d);padding:0;border:clamp(3px,.4vw,6px) solid var(--milk);border-radius:50%;background:var(--bg) var(--pos,50% 30%)/var(--zoom,190%) auto no-repeat var(--c);box-shadow:inset 0 0 0 1px rgba(25,28,110,.08),0 0 0 3px var(--ink);cursor:pointer;transition:scale .25s cubic-bezier(.3,1.7,.5,1)}
.step-ball:hover{scale:1.07}
.step-ball::after{content:"";position:absolute;right:2%;bottom:2%;width:28%;aspect-ratio:1;border-radius:50%;background:var(--chilli) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center/62% no-repeat;border:2px solid var(--milk)}
.stairs.drop .step-ball{animation:hop .95s cubic-bezier(.3,0,.6,1) both;animation-delay:calc(var(--i) * .13s)}
@keyframes hop{0%{translate:0 -70vh;opacity:0}8%{opacity:1}55%{translate:0 0;scale:1.14 .84}70%{translate:0 -44px;scale:.97 1.04}85%{translate:0 0;scale:1.05 .95}100%{translate:0 0;scale:1 1}}
.step-age{font:400 clamp(2.9rem,1.6rem + 3.2vw,5.1rem)/.95 var(--display)}
.step-age small{font:700 .24em/1 var(--body);margin-left:.25em;letter-spacing:.01em}
.step h3{font:700 clamp(1.25rem,1.1rem + .5vw,1.6rem)/1.1 var(--body);margin-top:.35em}
.step-when{font-size:.92em;font-weight:600;opacity:.82}
.step ul{margin-top:.75em;display:grid;gap:.38em}
.step li{position:relative;padding-left:1.1em;font-size:.97em;line-height:1.28}
.step li::before{content:"";position:absolute;left:0;top:.42em;width:.55em;height:.55em;border-radius:50%;background:var(--ink)}
.step-ask{display:inline-block;margin-top:1em;font-weight:700;text-underline-offset:3px;text-decoration-thickness:2px}
.step-ask:hover{text-decoration-thickness:4px}

.step{scroll-margin-top:clamp(150px,20vh,230px)}
.step-mine{outline:4px solid var(--ink);outline-offset:-4px;z-index:1}
.step-tag{align-self:flex-start;margin-bottom:.6em;padding:.2em .75em .12em;border-radius:999px;background:var(--ink);color:var(--milk);font-weight:700;font-size:.86em;line-height:1.3}
.books{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(20px,3vw,48px);align-items:center;background:var(--ink);color:var(--milk);padding:clamp(24px,3vw,44px);border-radius:0 0 26px 26px}
.books h3{font:400 clamp(1.8rem,1.3rem + 1.6vw,2.9rem)/1.05 var(--display);color:var(--sun)}
.books p{margin-top:.5em;max-width:33em}
.books-n{font:400 clamp(2.8rem,1.8rem + 2.6vw,4.6rem)/1 var(--display);color:var(--sun);display:block}
.books-l{font-weight:600;line-height:1.25;display:block;margin-top:.25em}

@media (max-width:980px){
  .classes-head{max-width:none;margin-bottom:116px}
  .classes-head .lede{max-width:none}
  .stairs{grid-template-columns:1fr;gap:clamp(84px,17vw,110px);margin-inline:calc(var(--gut) * -1)}
  .step,.step:nth-child(n){min-height:0;border-radius:0 26px 26px 0;padding:22px 24px 22px var(--gut)}
  .step::after{display:none}
  .step:nth-child(1){margin-right:18%}
  .step:nth-child(2){margin-right:12%}
  .step:nth-child(3){margin-right:6%}
  .step:nth-child(4){margin-right:0}
  .step:nth-child(1){--d:92px}.step:nth-child(2){--d:102px}.step:nth-child(3){--d:112px}.step:nth-child(4){--d:122px}
  .step-ball{right:18px}
  .books{grid-template-columns:1fr 1fr;border-radius:26px;margin-top:28px}
  .books>div:first-child{grid-column:1/-1}
}

/* ---------- Rooms ---------- */
.rooms{background:var(--grape);color:var(--milk)}
.rooms .h2{color:var(--sun);max-width:9.6em}
.pics{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,28px);margin-top:clamp(36px,5vw,64px)}
.pic{background:var(--milk);padding:clamp(8px,.9vw,14px) clamp(8px,.9vw,14px) 0;border-radius:18px;rotate:var(--rot,0deg);color:var(--ink);transition:rotate .35s cubic-bezier(.3,1.7,.5,1),scale .35s cubic-bezier(.3,1.7,.5,1);position:relative}
.pic:hover{rotate:0deg;scale:1.015;z-index:2}
.pic img{width:100%;aspect-ratio:var(--ar,3/2);object-fit:cover;border-radius:10px;background:var(--splash)}
.pic figcaption{font:700 clamp(1.05rem,.95rem + .45vw,1.42rem)/1.15 var(--hand);padding:.6em .25em .62em}
.pic-a{grid-column:1/8;--rot:-1.2deg;--ar:16/10}
.pic-b{grid-column:8/13;--rot:1.6deg;--ar:4/3;align-self:end}
.pic-c{grid-column:1/5;--rot:1.4deg;--ar:4/3}
.pic-d{grid-column:5/9;--rot:-1.6deg;--ar:4/3;margin-top:clamp(0px,2vw,30px)}
.pic-e{grid-column:9/13;--rot:1deg;--ar:4/3}
@media (max-width:760px){
  .pics{grid-template-columns:repeat(2,1fr)}
  .pic-a,.pic-b{grid-column:1/-1}
  .pic-c,.pic-d{grid-column:span 1;margin-top:0}
  .pic-e{grid-column:1/-1}
  .pic figcaption{font-size:1.08rem}
}

/* ---------- Peace of mind ---------- */
.peace{background:var(--bubble)}
.peace-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(36px,6vw,96px);align-items:center}
.peace .h2{max-width:7.6em}
.checks{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.5em}
.checks li{padding:.42em 1em .34em;border-radius:999px;background:var(--milk);font-weight:600;font-size:.98em;line-height:1.2}
.phone{position:relative;width:min(100%,320px);margin-inline:auto;aspect-ratio:9/18.4;padding:12px;background:var(--ink);border-radius:44px;rotate:4deg;box-shadow:14px 16px 0 rgba(25,28,110,.25)}
.phone-screen{height:100%;overflow:hidden;border-radius:33px;background:var(--milk);display:flex;flex-direction:column}
.cam{position:relative;flex:none;height:41%;background:url(assets/rooms/classroom.webp) center/cover}
.cam-tag{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:.4em;padding:.22em .7em .14em;border-radius:999px;background:var(--chilli);color:#fff;font:700 .78rem/1.2 var(--body)}
.cam-tag i{width:.55em;height:.55em;border-radius:50%;background:#fff;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.notes{flex:1;display:grid;align-content:space-evenly;gap:8px;padding:10px 12px 16px}
.note{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:9px 10px;border-radius:15px;background:#fff;box-shadow:0 2px 0 rgba(25,28,110,.16);font-size:.84rem;line-height:1.18;opacity:0;translate:0 14px;transition:opacity .4s,translate .5s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--i) * .16s)}
.phone.in .note{opacity:1;translate:0 0}
.note b{display:block;font-size:.93rem;font-weight:700}
.note i{display:block;width:34px;height:34px;border-radius:50%;background:var(--c)}
.illus{margin-top:22px;text-align:center;font-size:1.02rem}
@media (max-width:860px){.peace-grid{grid-template-columns:1fr}.phone{width:min(82%,300px)}}

/* ---------- Daycare ---------- */
.care{background:var(--leaf)}
.care-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,4vw,64px);align-items:center}
.care .h2 span{display:block}
.care-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:1.5em}
.care-list li{padding:.8em 1em .72em;background:var(--milk);border-radius:18px;font-weight:600;line-height:1.2}
.care-ask{margin-top:1.3em}
.toybox-t{font-size:clamp(1.3rem,1.1rem + .7vw,1.8rem);margin-bottom:.45em}
.toybox{position:relative;height:clamp(350px,31vw,470px);border:5px solid var(--ink);border-top:0;border-radius:0 0 34px 34px;background:rgba(255,255,255,.28);overflow:hidden;display:flex;flex-wrap:wrap;align-content:flex-end;gap:8px;padding:12px}
.toybox .ball{position:relative;visibility:visible;width:112px;height:112px;font:700 .95rem/1.05 var(--body);text-align:center}
.toybox.live{display:block;padding:0}
.toybox.live .ball{position:absolute;visibility:hidden}
.toybox .ball a,.toybox .ball span{color:inherit;text-decoration:none;padding:0 6px}
@media (max-width:860px){.care-grid{grid-template-columns:1fr}.toybox{height:360px}}

/* ---------- Story ---------- */
.story{background:var(--milk)}
.story-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:center}
.story .h2{color:var(--chilli);max-width:6.4em}
.award{background:#fff;padding:12px 12px 0;border-radius:18px;rotate:-2.5deg;box-shadow:0 0 0 4px var(--ink),12px 14px 0 var(--sun);max-width:400px;margin-inline:auto}
.award img{width:100%;border-radius:10px;aspect-ratio:369/460;object-fit:cover;object-position:50% 20%;background:var(--sun)}
.award figcaption{font-size:1.14rem;padding:.65em .2em .7em}
.quote{margin-top:1.2em;font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);color:var(--grape)}
.quote cite{display:block;margin-top:.3em;font:600 .92rem/1.3 var(--body);color:var(--ink)}
.years{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px);margin-top:clamp(40px,5vw,72px);position:relative}
.years::before{content:"";position:absolute;left:0;right:0;top:clamp(2.1rem,3vw,2.8rem);border-top:5px dotted var(--ink);opacity:.25;z-index:0}
.years li{position:relative;z-index:1}
.years b{display:inline-block;font:400 clamp(2.2rem,1.7rem + 1.8vw,3.6rem)/1 var(--display);color:var(--chilli);background:var(--milk);padding-right:.3em}
.years span{display:block;margin-top:.3em;font-size:.98em;line-height:1.28}
@media (max-width:860px){.story-grid{grid-template-columns:1fr}.award{order:2}.years{grid-template-columns:1fr 1fr;gap:26px 18px}.years::before{display:none}}

/* ---------- Parents ---------- */
.parents{background:var(--splash)}
.parents-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px 40px}
.parents .h2{max-width:7em}
.rated{max-width:17em;font-weight:600;line-height:1.3}
.rated b{display:block;font:400 clamp(2.4rem,2rem + 1.6vw,3.6rem)/1 var(--display);color:var(--chilli)}
.says{display:grid;align-items:start;grid-template-columns:repeat(12,1fr);gap:clamp(30px,3vw,44px) clamp(14px,2vw,28px);margin-top:clamp(36px,5vw,64px)}
.saying{position:relative;display:flex;flex-direction:column;background:var(--milk);border-radius:30px;padding:clamp(20px,2.4vw,34px);rotate:var(--rot,0deg);box-shadow:0 7px 0 var(--ink)}
.saying blockquote{font:700 clamp(1.4rem,1.15rem + 1vw,2.1rem)/1.16 var(--hand)}
.saying footer{display:flex;align-items:center;gap:12px;margin-top:1em;line-height:1.2}
.saying img{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--ink);background:var(--sun)}
.saying b{display:block}
.saying small{font-size:.86em}
.s1{grid-column:1/7;--rot:-1deg}.s2{grid-column:7/13;--rot:1.1deg;margin-top:26px}
.s3{grid-column:2/8;--rot:.8deg}.s4{grid-column:8/13;--rot:-1.2deg;margin-top:-10px}
@media (max-width:760px){.s1,.s2,.s3,.s4{grid-column:1/-1;margin-top:0}}

/* ---------- Visit ---------- */
.visit{background:var(--chilli);color:var(--milk);padding-bottom:calc(var(--section-y) + var(--page-r))}
.visit .h2{color:var(--sun);max-width:7em}
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.visit-card{margin-top:1.3em;padding:clamp(18px,2vw,28px);background:var(--milk);color:var(--ink);border-radius:26px;box-shadow:0 7px 0 var(--ink)}
.visit-card :focus-visible{outline-color:var(--chilli)}
.visit .lede{color:var(--milk)}
.map{width:100%;height:clamp(240px,23vw,320px);border:0;border-radius:26px;background:var(--milk);box-shadow:0 7px 0 var(--ink);display:block}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;margin-top:26px;line-height:1.35}
.contact b{display:block;color:var(--sun);font:700 .92rem/1.3 var(--body);margin-bottom:.2em}
.contact a{text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:860px){.visit-grid{grid-template-columns:1fr}.contact{grid-template-columns:1fr}}
/* ---------- Footer ---------- */
.foot{position:relative;margin-top:calc(var(--page-r) * -1);border-radius:var(--page-r) var(--page-r) 0 0;background:var(--ink);color:var(--milk);padding:clamp(44px,6vw,76px) var(--gut) clamp(92px,8vw,60px)}
.motto{font:400 min(9.4vw,8.6rem)/1 var(--display);color:var(--sun);display:flex;flex-wrap:wrap;gap:0 .34em}
.motto span:nth-child(2){color:var(--bubble)}.motto span:nth-child(3){color:var(--leaf)}.motto span:nth-child(4){color:var(--splash)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:clamp(22px,3vw,36px);font-size:.96em}

/* ---------- Sticky actions ---------- */
.dock{position:fixed;z-index:20;right:18px;bottom:18px;display:flex;gap:10px;translate:0 140%;transition:translate .4s cubic-bezier(.3,1.5,.5,1)}
.show-dock .dock{translate:0 0}
.dock .btn{box-shadow:0 5px 0 var(--ink)}
.dock .dock-call{display:none}
@media (max-width:760px){
  .dock{left:0;right:0;bottom:0;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--milk);border-top:3px solid var(--ink)}
  .dock .btn{flex:1 1 auto;box-shadow:none;padding-inline:.8em;font-size:.98rem}
  .dock .dock-call{display:inline-flex;flex:0 0 auto}
}

/* ---------- Reel player ---------- */
.player{width:min(94vw,calc((100dvh - 150px) * .5625 + 24px));max-width:none;padding:12px;border:0;border-radius:30px;background:var(--milk);color:var(--ink);overflow:visible}
.player::backdrop{background:rgba(25,28,110,.88)}
.player-frame{aspect-ratio:9/16;width:100%;border-radius:20px;overflow:hidden;background:#0d0f44}
.player-frame iframe{width:100%;height:100%;border:0;display:block}
.player-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 4px 2px}
.player-t{font:700 1.14rem/1.14 var(--hand);min-width:0}
.player-t a{display:block;margin-top:.2em;font:600 .82rem/1.2 var(--body)}
.player-nav{display:flex;gap:6px;flex:none}
.player-nav .round{width:44px;height:44px}
.player-x{position:absolute;right:-8px;top:-14px;z-index:2;width:48px;height:48px;background:var(--chilli);color:#fff}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .note{opacity:1;translate:0 0}
}

/* ================= The website: pieces every page shares ================= */
.skip{position:absolute;left:12px;top:-80px;z-index:60;padding:.5em 1em;border-radius:999px;background:var(--ink);color:var(--milk);font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.btn-line{background:transparent;color:inherit;border-color:currentColor;box-shadow:0 5px 0 currentColor}
.btn-line:hover{box-shadow:0 7px 0 currentColor}
.more{display:inline-flex;align-items:center;gap:.45em;margin-top:1.3em;font-weight:700;text-decoration-thickness:2px;text-underline-offset:4px}
.more::after{content:"\2192";transition:translate .2s}
.more:hover::after{translate:4px 0}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px 48px}
.sec-head .lede{margin-top:0}

/* Nav */
.nav-links a[aria-current="page"]{background-size:100% 3px}
.nav-end{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;align-items:center;gap:.55em;padding:.55em .95em .5em;border:3px solid var(--ink);border-radius:999px;background:var(--milk);color:var(--ink);font:700 .95rem/1.15 var(--body);cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.menu-btn i{display:grid;grid-template-columns:repeat(2,7px);gap:3px}
.menu-btn i b{width:7px;height:7px;border-radius:50%;background:var(--chilli)}
.menu-btn i b:nth-child(2){background:var(--grape)}.menu-btn i b:nth-child(3){background:var(--leaf)}.menu-btn i b:nth-child(4){background:var(--tang)}
@media (max-width:1100px){.nav-links{display:none}.menu-btn:not([hidden]){display:inline-flex}.nav .btn{padding:.55em .95em .5em;font-size:.92rem;box-shadow:0 3px 0 var(--ink)}}
@media (max-width:430px){.nav-book{display:none}}

.menu{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:14px var(--gut) calc(22px + env(safe-area-inset-bottom));border:0;background:var(--sun);color:var(--ink);overflow-y:auto}
.menu[open]{display:flex;flex-direction:column;animation:menu-in .35s cubic-bezier(.2,1.2,.4,1)}
.menu::backdrop{background:var(--sun)}
@keyframes menu-in{from{opacity:0;translate:0 -20px}}
.menu-top{display:flex;align-items:center;justify-content:space-between}
.menu-top img{width:124px;height:auto}
.menu-x{background:var(--ink);color:var(--sun)}
.menu-list{display:grid;gap:clamp(0px,.6vh,8px);margin:clamp(16px,4vh,44px) 0 auto}
.menu-list a{display:flex;align-items:center;gap:.38em;font:400 clamp(2rem,9.6vw,3.3rem)/1.14 var(--display);text-decoration:none}
.menu-list i{flex:none;width:.6em;height:.6em;border-radius:50%;background:radial-gradient(circle at 33% 25%,rgba(255,255,255,.9) 0,rgba(255,255,255,.4) 8%,transparent 22%),var(--c)}
.menu-list a[aria-current="page"]{color:var(--chilli)}
.menu-acts{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:24px}
.menu-acts .btn{white-space:normal}

/* Inner page covers: a coloured page with the title, and a few balls rolling in at the bottom */
.cover{position:relative;overflow:hidden;background:var(--c,var(--sun));color:var(--ink);padding:clamp(118px,15vh,156px) var(--gut) calc(clamp(130px,14vw,200px) + var(--page-r));isolation:isolate}
.cover-in{position:relative;z-index:2;max-width:1360px;margin-inline:auto}
.kicker{font:700 clamp(1.2rem,1rem + .6vw,1.6rem)/1.2 var(--hand);color:var(--k,var(--chilli))}
.cover h1{max-width:10.5em;margin-top:.12em;font:400 clamp(3rem,1.3rem + 7vw,7.4rem)/.96 var(--display);letter-spacing:-.008em}
.cover h1 em{font-style:normal;color:var(--chilli)}
.cover .lede{max-width:31em}
.cover.on-dark{color:var(--milk)}
.cover.on-dark .kicker{--k:var(--sun)}
.cover.on-dark h1{color:var(--sun)}
.cover.on-dark h1 em{color:var(--milk)}
.cover-pile{position:absolute;z-index:1;right:0;bottom:var(--page-r);width:min(100%,660px);height:clamp(96px,12vw,170px);pointer-events:none;--u:clamp(52px,6.6vw,100px)}
.b{position:absolute;left:var(--x);bottom:var(--y);display:grid;place-items:center;width:calc(var(--u) * var(--s,1));aspect-ratio:1;border-radius:50%;color:var(--t,#fff);font:400 calc(var(--u) * var(--s,1) * .58)/1 var(--display);font-style:normal;
  background:
    radial-gradient(circle at 33% 25%,rgba(255,255,255,.9) 0,rgba(255,255,255,.4) 8%,transparent 22%),
    radial-gradient(circle at 50% 46%,transparent 56%,rgba(10,10,60,.26) 100%),
    var(--bc);
  animation:drop 1s cubic-bezier(.45,0,.75,1) var(--d,0s) both}
.b.ph{background:var(--img) center/cover var(--bc);border:3px solid var(--milk)}
@keyframes drop{0%{transform:translateY(-125vh)}60%{transform:translateY(0) scale(1.12,.88)}74%{transform:translateY(-16%)}88%{transform:translateY(0) scale(1.05,.95)}100%{transform:none}}

/* The last page before the footer: an invitation */
.band{background:var(--chilli);color:var(--milk)}
.band-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:end}
.band .h2{color:var(--sun);max-width:7.5em}
.band .lede{margin-top:0}
.band .cta-row{margin-top:1.4em}
@media (max-width:860px){.band-grid{grid-template-columns:1fr}}

/* Footer */
.foot-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:28px clamp(20px,3vw,48px);margin-top:clamp(30px,4vw,52px);line-height:1.45}
.foot-grid b{display:block;margin-bottom:.45em;color:var(--sun);font-size:.92rem}
.foot-grid ul{display:grid;gap:.3em}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{text-decoration:underline;text-underline-offset:3px}
.foot .socials{flex-direction:column;gap:.4em}
.foot-row{padding-top:18px;border-top:2px solid rgba(255,253,244,.16);opacity:.85}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* ================= Classes page ================= */
.compare-wrap{overflow-x:auto;margin-top:clamp(28px,4vw,48px);border-radius:22px;background:#fff;box-shadow:0 6px 0 var(--ink)}
.compare{width:100%;min-width:560px;border-collapse:collapse;font-size:1.02em}
.compare th,.compare td{padding:.9em 1.1em;text-align:left;border-bottom:2px solid rgba(25,28,110,.1)}
.compare tr:last-child > *{border-bottom:0}
.compare thead th{font-size:.88em;font-weight:700;opacity:.7}
.compare tbody th a{display:inline-flex;align-items:center;gap:.55em;font-weight:700;text-decoration:none}
.compare tbody th a:hover{text-decoration:underline;text-underline-offset:3px}
.compare tbody th i{width:.95em;height:.95em;border-radius:50%;background:var(--c)}
.prog{background:var(--c)}
.prog.on-dark{color:var(--milk)}
.prog-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,6vw,96px);align-items:center}
.prog-age{font:400 clamp(4rem,2rem + 7vw,9rem)/.9 var(--display)}
.prog-age small{font:700 .2em/1 var(--body);margin-left:.3em}
.prog h2{font:400 clamp(2.4rem,1.5rem + 3.6vw,4.6rem)/1 var(--display);margin-top:.12em}
.prog-when{margin-top:.55em;font-weight:700}
.prog .lede{margin-top:.6em}
.ticks{display:grid;gap:.6em;margin-top:1.2em;max-width:34em}
.ticks li{position:relative;padding-left:1.55em;line-height:1.32}
.ticks li::before{content:"";position:absolute;left:0;top:.26em;width:.9em;height:.9em;border-radius:50%;background:var(--dot,var(--ink));box-shadow:inset -2px -2px 0 rgba(0,0,0,.2)}
.prog .btn{margin-top:1.7em}
.prog .reel{width:min(100%,300px);justify-self:center}
.prog.step-mine{outline:0}
.prog .step-tag{margin-bottom:1em}
@media (max-width:860px){.prog-grid{grid-template-columns:1fr}.prog .reel{width:min(72%,260px)}}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(32px,4vw,56px)}
.pillar{padding:clamp(20px,2.2vw,30px);border-radius:26px;background:var(--milk);color:var(--ink);box-shadow:0 7px 0 var(--c,var(--sun))}
.pillar i{display:block;width:52px;height:52px;margin-bottom:.9em;border-radius:50%;background:radial-gradient(circle at 33% 25%,rgba(255,255,255,.9) 0,rgba(255,255,255,.4) 8%,transparent 22%),var(--c)}
.pillar h3{font:700 1.28rem/1.15 var(--body)}
.pillar p{margin-top:.45em;line-height:1.4}
@media (max-width:980px){.pillars{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pillars{grid-template-columns:1fr}}

/* ================= Daycare page ================= */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(32px,4vw,56px)}
.fact{padding:clamp(20px,2.2vw,30px);border-radius:26px;background:var(--c);color:var(--ink)}
.fact span{display:block;font-weight:700;font-size:.94rem}
.fact b{display:block;margin-top:.15em;font:400 clamp(1.9rem,1.3rem + 1.8vw,3rem)/1.02 var(--display)}
.fact p{margin-top:.45em;line-height:1.36}
@media (max-width:860px){.facts{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.facts{grid-template-columns:1fr}}

/* ================= Gallery ================= */
.gal{columns:3 280px;column-gap:clamp(14px,2vw,26px);margin-top:clamp(32px,4vw,56px)}
.gal .pic{display:block;break-inside:avoid;margin:0 0 clamp(18px,2.4vw,30px);cursor:zoom-in}
.gal .pic img{aspect-ratio:var(--ar)}
.reel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:clamp(18px,2.4vw,30px);margin-top:clamp(32px,4vw,56px);padding:5px}
.reel-grid .reel{width:100%}
.zoom{width:auto;max-width:min(94vw,1100px);padding:10px;border:0;border-radius:24px;background:var(--milk);color:var(--ink);overflow:visible}
.zoom::backdrop{background:rgba(25,28,110,.9)}
.zoom img{width:auto;max-width:100%;max-height:78vh;margin-inline:auto;border-radius:16px}
.zoom p{padding:.55em .3em .15em;font:700 1.2rem/1.2 var(--hand)}
.zoom p:empty{display:none}

/* ================= Admissions ================= */
.join{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(32px,4vw,56px);list-style:none;padding:0;counter-reset:j}
.join li{position:relative;padding:clamp(70px,6vw,90px) clamp(20px,2.2vw,30px) clamp(20px,2.2vw,30px);border-radius:26px;background:var(--c)}
.join li::before{counter-increment:j;content:counter(j);position:absolute;left:clamp(20px,2.2vw,30px);top:14px;font:400 clamp(2.8rem,2rem + 2vw,4rem)/1 var(--display)}
.join h3{font:700 1.25rem/1.15 var(--body)}
.join p{margin-top:.4em;line-height:1.38}
@media (max-width:980px){.join{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.join{grid-template-columns:1fr}}
.enquire-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:start}
.enquire-grid .visit-card{margin-top:0}
.talk{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.5em}
@media (max-width:860px){.enquire-grid{grid-template-columns:1fr}}
.faq{display:grid;gap:14px;max-width:920px;margin-top:clamp(28px,4vw,48px)}
.faq details{border-radius:22px;background:var(--milk);box-shadow:0 5px 0 var(--ink)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:1em 1.2em;font-weight:700;font-size:1.08em;line-height:1.25;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--sun);font:400 1.6rem/1 var(--display);transition:rotate .25s}
.faq details[open] summary::after{rotate:45deg}
.faq details p{max-width:46em;padding:0 1.2em 1.15em;line-height:1.45}

/* ================= Contact ================= */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:start}
.contact-grid .map{height:clamp(320px,36vw,520px)}
.info{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.info > div{padding:clamp(18px,2vw,26px);border-radius:22px;background:#fff;box-shadow:0 5px 0 var(--ink);line-height:1.42}
.info .wide{grid-column:1/-1}
.info b{display:block;margin-bottom:.3em;color:var(--chilli);font-size:.92rem}
.info a{text-decoration-thickness:2px;text-underline-offset:3px}
.info .socials{margin-top:.2em}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:480px){.info{grid-template-columns:1fr}}

/* Plain text pages: privacy, not found */
.doc{max-width:44em;line-height:1.5}
.doc h2{margin-top:1.5em;font-weight:700;font-size:1.22rem;line-height:1.25}
.doc h2:first-child{margin-top:0}
.doc p,.doc ul{margin-top:.45em}
.doc ul{padding-left:1.2em;list-style:disc}
.doc li{margin-top:.25em}
.updated{margin-top:2em;font-size:.92rem}

/* ================= School photos ================= */
/* width/height on the <img> reserve space while loading; the layout decides the real height */
.pic img{height:auto}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,3vw,40px)}
.chip{padding:.5em 1.05em .42em;border:3px solid var(--ink);border-radius:999px;background:var(--milk);color:var(--ink);font:700 .98rem/1.15 var(--body);cursor:pointer;transition:background .15s,color .15s}
.chip:hover{background:#fff}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--sun)}
.gal .pic[hidden]{display:none}
#moments .gal{margin-top:clamp(22px,3vw,36px)}
.fest{background:var(--sun)}
.fest .h2{max-width:8em}
.fest-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,28px);margin-top:clamp(32px,4vw,56px)}
.fest-grid .pic{cursor:zoom-in}
.fest-grid .pic img{aspect-ratio:3/2}
.fest-grid .pic:nth-child(1){grid-column:1/8;grid-row:span 2}
/* The big photo fills whatever height the two photos beside it make, instead of setting it */
.fest-grid .pic:nth-child(1){display:flex;flex-direction:column}
.fest-grid .pic:nth-child(1) img{flex:1 1 0;min-height:0;height:auto;aspect-ratio:auto}
.fest-grid .pic:nth-child(2){grid-column:8/13}
.fest-grid .pic:nth-child(3){grid-column:8/13}
.fest-grid .pic:nth-child(4){grid-column:1/7}
.fest-grid .pic:nth-child(5){grid-column:7/13}
@media (max-width:760px){
  .fest-grid{grid-template-columns:1fr 1fr}
  .fest-grid .pic:nth-child(n){grid-column:span 1;grid-row:auto}
  .fest-grid .pic:nth-child(1){grid-column:1/-1}
  .fest-grid .pic:nth-child(1) img{flex:none;aspect-ratio:3/2;height:auto}
  .fest-grid .pic:nth-child(5){grid-column:1/-1}
}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);margin-top:clamp(28px,4vw,48px)}
.trio .pic{cursor:zoom-in}
.trio .pic img{aspect-ratio:3/2}
.trio-h{margin-top:clamp(40px,5vw,64px);font-size:clamp(1.3rem,1.1rem + .7vw,1.8rem);color:var(--sun)}
.trio-h + .trio{margin-top:16px}
@media (max-width:760px){.trio{grid-template-columns:1fr}}
.enquire-pic{max-width:420px;margin-top:clamp(28px,4vw,44px);cursor:zoom-in}
.enquire-pic img{aspect-ratio:3/2}