/* TopTod Preschool — styles */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
/* Layout: full-bleed photo slider hero under a deep indigo wash (from the Bellus home page), then soft pastel sections joined by wave edges,
   round portrait class cards with paint dots, a check-circle "how we grow" spine around a centre photo, accordions and a rounded gallery (CBIS + Bellus inner pages).
   All colour comes from the six TopTod letters; headings in the logo's indigo. */
:root{
  --ink:#211d1e; --indigo:#3e3d93; --indigo-deep:#24234f;
  --green:#8fb52c; --red:#e2363c; --sun:#f9c31f; --blue:#0a8fd1; --orange:#ef8433;
  --paper:#ffffff; --lav:#f5f3fc; --peach:#fff4ea; --mint:#f1f7e8;
  --text:#2d2a35; --muted:#615d6b; --line:#e6e2ef;
  --f-display:"Fredoka","Arial Rounded MT Bold",system-ui,sans-serif;
  --f-body:"Nunito","Segoe UI",system-ui,sans-serif;
  --f-hand:"Kalam","Segoe Print",cursive;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --head-h:76px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 12px);scrollbar-color:var(--indigo) var(--lav)}
body{background:var(--paper);color:var(--text);font-family:var(--f-body);font-size:1.0625rem;line-height:1.65;caret-color:var(--red);accent-color:var(--indigo)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:70;background:var(--ink)}
::selection{background:var(--sun);color:var(--ink)}
a{color:inherit;text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.08;margin:0;text-wrap:balance;color:var(--indigo)}
h2{font-size:clamp(2rem,4.4vw,3rem)}
h3{font-size:1.35rem}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.lede{color:var(--muted);font-size:1.1rem;max-width:58ch}
.kicker{display:block;font-weight:800;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:.7rem}
.center{text-align:center}
.center .lede{margin-inline:auto}
.sec-head{margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.sec-head .lede{margin-top:1rem}
.hand{font-family:var(--f-hand)}
section{padding-block:clamp(4.5rem,9vw,7rem);position:relative}
.lav{background:var(--lav)} .peach{background:var(--peach)} .mint{background:var(--mint)}
/* wave edge at the top of a tinted section */
.wave-top::before{content:"";position:absolute;left:0;right:0;top:-1px;height:clamp(28px,4vw,56px);background:var(--paper);clip-path:ellipse(75% 100% at 50% 0)}
.wave-top.after-lav::before{background:var(--lav)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font:800 .95rem/1 var(--f-body);letter-spacing:.04em;text-transform:uppercase;padding:1.05rem 1.6rem;border-radius:10px;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:transform 160ms var(--ease-out),background-color 180ms ease,color 180ms ease,border-color 180ms ease}
.btn:active{transform:scale(.97)}
.btn svg{width:1.2em;height:1.2em;flex:none}
.btn-red{background:var(--red);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.85);color:#fff}
.btn-indigo{background:var(--indigo);color:#fff}
.btn-outline{border-color:var(--indigo);color:var(--indigo)}
.pill{display:inline-flex;align-items:center;gap:.6rem;border:2px solid var(--red);color:var(--red);border-radius:999px;padding:.55rem .6rem .55rem 1.2rem;font-weight:800;text-decoration:none;font-size:.95rem;transition:background-color 180ms ease,color 180ms ease}
.pill i{width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;transition:transform 200ms var(--ease-out)}
.pill i svg{width:14px;height:14px}
@media (hover:hover) and (pointer:fine){
  .btn-red:hover{background:#c8272d}.btn-indigo:hover{background:var(--indigo-deep)}
  .btn-ghost:hover{background:#fff;color:var(--indigo-deep)}
  .btn-outline:hover{background:var(--indigo);color:#fff}
  .pill:hover{background:var(--red);color:#fff}.pill:hover i{background:#fff;color:var(--red);transform:translateX(3px)}
}

/* top bar + header */
.topbar{background:var(--ink);color:#e9e5f2;font-size:.85rem;font-weight:700}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:.5rem}
.topbar span{display:inline-flex;align-items:center;gap:.4rem}
.topbar svg{width:15px;height:15px;color:var(--sun)}
.topbar .tb-right{display:flex;gap:1.4rem}
.topbar b{color:var(--sun)}
@media (max-width:720px){.topbar .tb-hide{display:none}.topbar .wrap{justify-content:center}}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:#fff;box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--head-h)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand img{width:62px;height:auto}
.brand span{font-family:var(--f-display);font-weight:700;font-size:1.35rem;color:var(--indigo);line-height:1}
.brand small{display:block;font-family:var(--f-body);font-weight:800;font-size:.68rem;letter-spacing:.22em;color:var(--red);margin-top:.2rem}
.links{display:flex;gap:1.7rem;align-items:center;list-style:none;margin:0;padding:0}
.links a:not(.btn){text-decoration:none;font-weight:800;font-size:.95rem;color:var(--text);position:relative;padding-block:.3rem}
.links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 220ms var(--ease-out)}
@media (hover:hover){.links a:not(.btn):hover::after{transform:scaleX(1)}}
.links .btn{padding:.8rem 1.2rem;font-size:.85rem}
.menu-btn{display:none;align-items:center;gap:.4rem;background:none;border:0;color:var(--indigo);font:800 1rem var(--f-body);cursor:pointer;padding:.5rem}
.menu-btn svg{width:24px;height:24px}
@media (max-width:960px){
  .links{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:.3rem max(18px,env(safe-area-inset-right,0px)) 1.2rem max(18px,env(safe-area-inset-left,0px));box-shadow:0 20px 30px -18px rgba(36,35,79,.35)}
  .links.open{display:flex}
  .links a:not(.btn){display:block;padding:.9rem 0;border-bottom:1px solid var(--line)}
  .links a:not(.btn)::after{display:none}
  .links .btn{margin-top:1rem}
  .menu-btn{display:inline-flex}
}

/* HERO slider */
.hero{position:relative;height:clamp(560px,calc(100svh - var(--head-h) - 36px),820px);overflow:hidden;background:var(--indigo-deep);color:#fff}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 900ms ease,visibility 0s 900ms}
.slide.is-active{opacity:1;visibility:visible;transition:opacity 900ms ease,visibility 0s}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,26,66,.92) 0%,rgba(36,35,79,.78) 38%,rgba(62,61,147,.25) 70%,rgba(62,61,147,.05) 100%)}
.slide .content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.3rem;max-width:1200px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));padding-bottom:calc(clamp(2.5rem,5vw,3.5rem) + 4rem)}
.chip{display:inline-block;background:var(--red);color:#fff;font-weight:800;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;padding:.55rem .85rem;border-radius:4px}
.hero .big{font-family:var(--f-display);font-weight:700;font-size:clamp(2.6rem,6.2vw,5.2rem);line-height:1.02;color:#fff;max-width:13ch;text-wrap:balance}
.hero .big em{font-style:normal;color:var(--sun);display:block}
.hero .sub{max-width:44ch;font-size:1.12rem;color:#e6e4f6}
.hero .cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.4rem}
.slide.is-active .content>*{animation:rise 800ms var(--ease-out) both}
.slide.is-active .content>*:nth-child(2){animation-delay:90ms}.slide.is-active .content>*:nth-child(3){animation-delay:180ms}.slide.is-active .content>*:nth-child(4){animation-delay:270ms}
.slide.is-active img{animation:drift 9s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes drift{from{transform:scale(1.08)}}
.hero-ctrl{position:absolute;z-index:5;left:0;right:0;bottom:calc(clamp(2.5rem,5vw,3.5rem) + 1.4rem);pointer-events:none}
.hero-ctrl .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.dots{display:flex;gap:.55rem;pointer-events:auto}
.dots button{width:12px;height:12px;border-radius:999px;border:0;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:width 300ms var(--ease-out),background-color 200ms ease}
.dots button[aria-current="true"]{width:34px;background:var(--sun)}
.arrows{display:flex;align-items:center;gap:.7rem;pointer-events:auto;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.08em}
.arrows button{width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.8);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color 180ms ease,color 180ms ease,transform 160ms var(--ease-out)}
.arrows button:active{transform:scale(.94)}
.arrows svg{width:20px;height:20px}
@media (hover:hover){.arrows button:hover{background:#fff;color:var(--indigo-deep)}}
.count{min-width:4.2em;text-align:center}
@media (max-width:720px){
  .hero{height:auto;min-height:620px}
  .slide::after{background:linear-gradient(180deg,rgba(36,35,79,.15) 0%,rgba(28,26,66,.55) 40%,rgba(28,26,66,.94) 75%)}
  .slide .content{justify-content:flex-end;padding-bottom:8.5rem}
  .slide img{object-position:50% 15%}
}
@media (prefers-reduced-motion:reduce){.slide,.slide.is-active{transition:none}.slide.is-active .content>*,.slide.is-active img{animation:none}}

/* intro strip under hero */
.promise-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:calc(-1 * clamp(2.5rem,5vw,3.5rem));position:relative;z-index:4}
.promise{background:#fff;border-radius:18px;padding:1.5rem 1.4rem;box-shadow:0 18px 40px -24px rgba(36,35,79,.45);display:grid;gap:.6rem;align-content:start}
.promise .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff}
.promise .ic svg{width:26px;height:26px}
.promise b{font-family:var(--f-display);font-weight:600;font-size:1.2rem;color:var(--indigo)}
.promise span{color:var(--muted);font-size:.96rem;line-height:1.55}
@media (max-width:980px){.promise-row{grid-template-columns:1fr 1fr}}

.intro{padding-top:clamp(3rem,6vw,4.5rem)}

/* about split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.split>*{min-width:0}
.blob{position:relative}
.blob img{width:100%;aspect-ratio:5/6;object-fit:cover;border-radius:46% 54% 42% 58% / 48% 42% 58% 52%}
.blob::before{content:"";position:absolute;inset:6% -4% -4% 6%;border-radius:52% 48% 58% 42% / 42% 58% 42% 58%;background:var(--sun);z-index:-1}
.blob .tag{position:absolute;left:-2%;bottom:8%;background:#fff;border-radius:16px;padding:.9rem 1.1rem;box-shadow:0 16px 32px -18px rgba(36,35,79,.5);display:flex;gap:.8rem;align-items:center;max-width:240px}
.blob .tag i{width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;flex:none}
.blob .tag i svg{width:22px;height:22px}
.blob .tag b{display:block;font-family:var(--f-display);color:var(--indigo);font-size:1.05rem;line-height:1.15}
.blob .tag span{font-size:.85rem;color:var(--muted)}
.about-copy .lede+.lede{margin-top:1rem}
.mv{margin-top:1.8rem}
.mv-tabs{display:flex;gap:.6rem;margin-bottom:1rem}
.mv-tabs button{font:800 .9rem var(--f-body);letter-spacing:.04em;padding:.75rem 1.3rem;border-radius:8px;border:0;cursor:pointer;background:#ebe8f5;color:var(--indigo);transition:background-color 180ms ease,color 180ms ease,box-shadow 180ms ease}
.mv-tabs button[aria-selected="true"]{background:var(--red);color:#fff;box-shadow:0 10px 20px -10px rgba(226,54,60,.7)}
.mv-panel{color:var(--muted);max-width:56ch}
.about-copy .pill{margin-top:1.8rem}
@media (max-width:900px){.split{grid-template-columns:1fr}.blob{max-width:480px;margin-inline:auto;width:100%}}

/* classes: round portraits */
.classes{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1rem,2.5vw,2rem)}
.cls{text-align:center;display:grid;justify-items:center;gap:.5rem;align-content:start}
.portrait{position:relative;width:min(100%,190px);aspect-ratio:1;margin-bottom:.8rem}
.portrait img{width:100%;height:100%;object-fit:cover;border-radius:50%;position:relative;z-index:1;border:6px solid #fff;box-shadow:0 14px 30px -18px rgba(36,35,79,.6)}
.portrait::before,.portrait::after{content:"";position:absolute;width:62%;height:62%;background-image:radial-gradient(circle,var(--c) 32%,transparent 36%);background-size:14px 14px;opacity:.9}
.portrait::before{top:-10%;right:-12%}
.portrait::after{bottom:-8%;left:-12%;width:44%;height:44%}
.cls h3{color:var(--c);font-size:1.5rem}
.cls .age{font-weight:800;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.cls p{color:var(--muted);font-size:.95rem;line-height:1.55;max-width:26ch}
.cls:nth-child(1){--c:var(--green)}.cls:nth-child(2){--c:var(--red)}.cls:nth-child(3){--c:#e0a800}.cls:nth-child(4){--c:var(--blue)}.cls:nth-child(5){--c:var(--orange)}
@media (max-width:1040px){.classes{grid-template-columns:repeat(3,1fr);row-gap:3rem}}
@media (max-width:640px){.classes{grid-template-columns:1fr 1fr}.portrait{width:min(100%,150px)}}

/* growth spine (Bellus intelligences) */
.spine{display:grid;grid-template-columns:1fr minmax(260px,380px) 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.spine>*{min-width:0}
.spine ul{list-style:none;margin:0;padding:0;display:grid;gap:2rem;position:relative}
.spine ul::before{content:"";position:absolute;top:24px;bottom:24px;width:3px;background:linear-gradient(var(--line),var(--line)) ;border-radius:2px}
.spine ul.l::before{right:22px}.spine ul.r::before{left:22px}
.spine li{display:grid;align-items:center;gap:1rem;position:relative}
.spine ul.l li{grid-template-columns:1fr 48px;text-align:right}
.spine ul.r li{grid-template-columns:48px 1fr}
.spine .ck{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--c,var(--red));box-shadow:0 0 0 6px #fff}
.lav .spine .ck{box-shadow:0 0 0 6px var(--lav)}
.spine .ck svg{width:20px;height:20px}
.spine ul.l li .ck{order:2}
.spine b{display:block;font-family:var(--f-display);font-weight:600;color:var(--indigo);font-size:1.12rem;line-height:1.2}
.spine span{color:var(--muted);font-size:.93rem;line-height:1.5}
.spine .mid img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:28px;box-shadow:0 24px 50px -28px rgba(36,35,79,.6)}
@media (max-width:960px){
  .spine{grid-template-columns:1fr 1fr}
  .spine .mid{grid-column:1/-1;order:-1;max-width:380px;margin-inline:auto;width:100%}
  .spine ul.l li{grid-template-columns:48px 1fr;text-align:left}
  .spine ul.l li .ck{order:-1}
  .spine ul.l::before{right:auto;left:22px}
}
@media (max-width:600px){.spine{grid-template-columns:1fr}}

/* day timetable */
.day{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.day>*{min-width:0}
.day .ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:24px;margin-top:2rem}
.tt{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.tt li{display:grid;grid-template-columns:104px 1fr;gap:1.2rem;align-items:center;background:#fff;border-radius:16px;padding:1rem 1.2rem;box-shadow:0 1px 0 var(--line)}
.tt time{font-family:var(--f-display);font-weight:600;font-size:1.05rem;font-variant-numeric:tabular-nums;color:#fff;background:var(--c);border-radius:999px;text-align:center;padding:.35rem .5rem;white-space:nowrap}
.tt b{color:var(--indigo);font-size:1.05rem}
.tt span{display:block;color:var(--muted);font-size:.95rem}
.tt li:nth-child(6n+1){--c:var(--green)}.tt li:nth-child(6n+2){--c:var(--red)}.tt li:nth-child(6n+3){--c:#d49c00}.tt li:nth-child(6n+4){--c:var(--blue)}.tt li:nth-child(6n+5){--c:var(--orange)}.tt li:nth-child(6n+6){--c:var(--indigo)}
@media (max-width:900px){.day{grid-template-columns:1fr}}
@media (max-width:440px){.tt li{grid-template-columns:1fr;gap:.5rem}.tt time{justify-self:start;padding-inline:.9rem}}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;grid-auto-flow:dense;gap:1rem}
.gallery button{position:relative;border:0;padding:0;border-radius:20px;overflow:hidden;cursor:zoom-in;background:var(--line)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
.gallery button::after{content:"+";position:absolute;inset:0;display:grid;place-items:center;font:600 2.6rem/1 var(--f-display);color:#fff;background:rgba(36,35,79,.45);opacity:0;transition:opacity 220ms ease}
@media (hover:hover){.gallery button:hover img{transform:scale(1.06)}.gallery button:hover::after{opacity:1}}
.gallery .tall{grid-row:span 2}.gallery .wide{grid-column:span 2}
@media (max-width:860px){.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px;gap:.7rem}}
@media (max-width:640px){.classes .cls:last-child{grid-column:1/-1}}
dialog.lb{border:0;padding:0;background:transparent;max-width:min(92vw,1000px);max-height:90vh;overflow:visible}
dialog.lb::backdrop{background:rgba(20,18,40,.88)}
dialog.lb img{max-width:min(92vw,1000px);max-height:82vh;border-radius:16px;object-fit:contain}
dialog.lb .x,dialog.lb .nv{position:absolute;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:var(--indigo);display:grid;place-items:center;cursor:pointer}
dialog.lb .x{top:-18px;right:-12px}
dialog.lb .nv{top:50%;translate:0 -50%}
dialog.lb .prev{left:-14px}dialog.lb .next{right:-14px}
dialog.lb svg{width:20px;height:20px}
dialog.lb[open]{animation:pop 260ms var(--ease-out)}
@keyframes pop{from{opacity:0;transform:scale(.96)}}

/* parents + FAQ */
.parents-photo img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:28px}
.faq{display:grid;gap:.8rem;margin-top:1.8rem}
.faq details{background:#fff;border-radius:14px;border:1px solid var(--line);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:1.05rem 1.2rem;font-weight:800;color:var(--indigo);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;flex:none;color:var(--red);transition:transform 220ms var(--ease-out)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq .a{padding:0 1.2rem 1.2rem;color:var(--muted);font-size:.98rem}
.faq ul{margin:.5rem 0 0;padding-left:1.1rem;columns:2;column-gap:1.5rem}
@media (max-width:500px){.faq ul{columns:1}}

/* CTA band */
.band{background:var(--red);color:#fff;padding-block:clamp(3rem,6vw,4.5rem);position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.14) 30%,transparent 34%);background-size:22px 22px;mask-image:linear-gradient(90deg,transparent,#000 70%)}
.band .wrap{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.band h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.6rem);max-width:22ch}
.band p{color:#ffe3e2;margin-top:.5rem}
.band .row{display:flex;gap:.8rem;flex-wrap:wrap}
.btn-white{background:#fff;color:var(--red)}
.band .btn-ghost{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
@media (hover:hover){.btn-white:hover{background:var(--indigo-deep);color:#fff}}

/* admissions */
.adm{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.adm>*{min-width:0}
.steps{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.3rem;counter-reset:s}
.steps li{display:grid;grid-template-columns:52px 1fr;gap:1rem;counter-increment:s;align-items:start}
.steps li::before{content:counter(s);width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font:600 1.4rem var(--f-display);color:#fff;background:var(--indigo)}
.steps li:nth-child(2)::before{background:var(--blue)}.steps li:nth-child(3)::before{background:var(--green)}.steps li:nth-child(4)::before{background:var(--orange)}
.steps b{display:block;color:var(--indigo);font-size:1.08rem}
.steps span{color:var(--muted);font-size:.97rem}
form{background:#fff;border-radius:26px;padding:clamp(1.3rem,3.5vw,2.3rem);display:grid;gap:1.05rem;box-shadow:0 30px 60px -36px rgba(36,35,79,.55);border-top:6px solid var(--sun)}
form h3{font-size:1.8rem}
form .sub{color:var(--muted);font-size:.97rem;margin-top:-.4rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
label{display:grid;gap:.35rem;font-weight:800;font-size:.88rem;color:var(--indigo)}
input,select,textarea{font:400 1rem/1.4 var(--f-body);color:var(--text);background:var(--lav);border:2px solid transparent;border-radius:12px;padding:.85rem .95rem;width:100%;transition:border-color 150ms ease,background-color 150ms ease}
input::placeholder,textarea::placeholder{color:#8f8a9c}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--indigo);background:#fff}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--red);background:#fff5f5}
textarea{resize:vertical;min-height:96px}
.err{color:#b8262b;font-weight:700;font-size:.92rem}
.fine{font-size:.86rem;color:var(--muted)}
.done{display:grid;gap:.9rem;justify-items:center;text-align:center;padding:1.2rem 0}
.done .tick{width:66px;height:66px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#fff}
.done .tick svg{width:32px;height:32px}
@media (max-width:900px){.adm{grid-template-columns:1fr}}

/* contact */
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.contact>div{background:#fff;border-radius:20px;padding:1.6rem;display:grid;gap:.4rem;align-content:start;min-width:0}
.contact .ic{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;margin-bottom:.5rem}
.contact .ic svg{width:24px;height:24px}
.contact small{font-weight:800;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.contact p{font-family:var(--f-display);font-weight:600;font-size:1.35rem;color:var(--indigo);line-height:1.2;overflow-wrap:anywhere}
.contact span{color:var(--muted);font-size:.95rem}
.contact a{font-weight:800;color:var(--red)}
@media (max-width:820px){.contact{grid-template-columns:1fr}}

/* footer */
footer{background:var(--indigo-deep);color:#cfcbe6}
.rainbow{display:flex;height:6px}.rainbow i{flex:1}
.rainbow i:nth-child(1){background:var(--green)}.rainbow i:nth-child(2){background:var(--red)}.rainbow i:nth-child(3){background:var(--sun)}.rainbow i:nth-child(4){background:var(--blue)}.rainbow i:nth-child(5){background:var(--orange)}.rainbow i:nth-child(6){background:var(--indigo)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding-block:3.5rem 2.5rem}
.foot>*{min-width:0}
.foot img{width:110px;height:auto;margin-bottom:.8rem}
.foot .hand{font-size:1.4rem;color:var(--sun)}
.foot h4{font-family:var(--f-display);font-weight:600;color:#fff;font-size:1.15rem;margin:0 0 .9rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.95rem}
.foot a{text-decoration:none}
@media (hover:hover){.foot a:hover{color:#fff}}
.legal{border-top:1px solid rgba(255,255,255,.12);padding-block:1.2rem;font-size:.85rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;opacity:.8}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot{grid-template-columns:1fr}}

/* floating WhatsApp + back to top */
.wa{position:fixed;z-index:80;left:calc(18px + env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));display:grid;justify-items:start;gap:.7rem}
.wa-btn{width:58px;height:58px;border-radius:50%;border:0;background:#25d366;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 26px -10px rgba(0,0,0,.45);transition:transform 160ms var(--ease-out)}
.wa-btn:active{transform:scale(.94)}
.wa-btn svg{width:30px;height:30px}
.wa-card{width:min(300px,calc(100vw - 36px));background:#1f2c33;color:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);transform-origin:bottom left}
.wa-card:not([hidden]){animation:pop 240ms var(--ease-out)}
.wa-card header{position:static;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;box-shadow:none;font-weight:800}
.wa-card header button{background:rgba(0,0,0,.18);border:0;color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.wa-card header svg{width:14px;height:14px}
.wa-card .msg{margin:1rem;background:#2a3942;border-radius:4px 14px 14px 14px;padding:.7rem .9rem;font-size:.95rem;display:inline-block}
.wa-card .go{margin:0 1rem 1rem;display:inline-flex;align-items:center;gap:.5rem;background:#25d366;color:#fff;border-radius:999px;padding:.7rem 1.1rem;font-weight:800;text-decoration:none}
.wa-card .go svg{width:18px;height:18px}
.totop{position:fixed;z-index:80;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:46px;height:46px;border-radius:10px;border:0;background:var(--red);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity 220ms ease,transform 220ms var(--ease-out)}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop svg{width:20px;height:20px}

/* ===== motion layer ===== */
section,.band,.hero{overflow-x:clip}
.wrap{position:relative;z-index:1}
.deco{position:absolute;pointer-events:none;z-index:0}
.deco svg{width:100%;height:100%;overflow:visible}
@keyframes spin{to{rotate:360deg}}
@keyframes bob{50%{translate:0 -14px}}
@keyframes sway{50%{rotate:6deg}}
@keyframes drift-x{from{translate:-30vw 0}to{translate:120vw 0}}
@keyframes twinkle{0%,100%{scale:1;opacity:1}50%{scale:.55;opacity:.45}}
@keyframes fly{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes dash{to{stroke-dashoffset:-60}}
@keyframes marquee{to{translate:-50% 0}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%,100%{box-shadow:0 0 0 18px rgba(37,211,102,0)}}
@keyframes shimmer{to{background-position:200% 0}}
@keyframes rise-up{0%{translate:0 0;opacity:0}15%{opacity:1}100%{translate:0 -140px;opacity:0}}
@keyframes wiggle{0%,100%{rotate:0}25%{rotate:-6deg}75%{rotate:6deg}}

.d-sun{width:110px;height:110px}
.d-sun .rays{transform-origin:50% 50%;transform-box:fill-box;animation:spin 24s linear infinite}
.d-star{width:28px;height:28px;animation:twinkle 2.8s ease-in-out infinite}
.d-star.s2{animation-delay:-1.2s;width:20px;height:20px}
.d-star.s3{animation-delay:-2s;width:16px;height:16px}
.d-cloud{width:150px;height:70px;top:9%;left:0;animation:drift-x 55s linear infinite;opacity:.95}
.d-cloud.c2{top:22%;width:100px;height:48px;animation-duration:75s;animation-delay:-30s}
.d-balloons{width:120px;height:210px;animation:bob 5s ease-in-out infinite}
.d-balloons g{transform-origin:50% 100%;transform-box:fill-box;animation:sway 4s ease-in-out infinite}
.d-balloons g+g{animation-delay:-1.5s}
.d-squig path{stroke-dasharray:10 10;animation:dash 2.4s linear infinite}
.plane-track{position:absolute;inset:0;pointer-events:none;z-index:0}
.plane{position:absolute;left:0;top:0;width:44px;height:44px;offset-path:path("M -60 220 C 200 40, 420 320, 700 140 S 1150 60, 1500 200");offset-rotate:auto;animation:fly 14s ease-in-out infinite}
.hearts span{position:absolute;bottom:0;width:22px;height:22px;animation:rise-up 6s ease-out infinite}
.hearts span:nth-child(2){left:30px;animation-delay:-2s;width:16px;height:16px}
.hearts span:nth-child(3){left:60px;animation-delay:-4s}

/* word ribbon */
.ribbon{background:var(--indigo);color:#fff;overflow:hidden;padding-block:1.05rem;transform:rotate(-1.5deg);margin-block:-.6rem;position:relative;z-index:3;box-shadow:0 12px 30px -18px rgba(36,35,79,.8)}
.ribbon .track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.ribbon ul{display:flex;gap:2.2rem;padding-right:2.2rem;margin:0;list-style:none;font-family:var(--f-display);font-weight:600;font-size:clamp(1.3rem,2.6vw,1.9rem);white-space:nowrap}
.ribbon li{display:flex;align-items:center;gap:2.2rem}
.ribbon li::after{content:"";width:14px;height:14px;border-radius:50%;background:var(--c)}
.ribbon li:nth-child(6n+1){--c:var(--green)}.ribbon li:nth-child(6n+2){--c:var(--red)}.ribbon li:nth-child(6n+3){--c:var(--sun)}.ribbon li:nth-child(6n+4){--c:#58b9ec}.ribbon li:nth-child(6n+5){--c:var(--orange)}.ribbon li:nth-child(6n+6){--c:#fff}
@media (hover:hover){.ribbon:hover .track{animation-play-state:paused}}

/* small interactive touches */
.promise{transition:transform 260ms var(--ease-out),box-shadow 260ms ease}
.promise .ic{transition:transform 400ms var(--ease-out)}
.portrait img{transition:transform 400ms var(--ease-out)}
.portrait::before{animation:spin 40s linear infinite}
.portrait::after{animation:spin 32s linear infinite reverse}
.tt time{transition:transform 300ms var(--ease-out)}
.contact .ic{transition:transform 400ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .promise:hover{transform:translateY(-6px);box-shadow:0 26px 46px -24px rgba(36,35,79,.55)}
  .promise:hover .ic{animation:wiggle 500ms var(--ease-out)}
  .cls:hover .portrait img{transform:scale(1.05) rotate(-3deg)}
  .tt li:hover time{transform:scale(1.08)}
  .contact>div:hover .ic{animation:wiggle 500ms var(--ease-out)}
}
.wa-btn{animation:ring 2.6s ease-out infinite}
.rainbow{background:linear-gradient(90deg,var(--green),var(--red),var(--sun),var(--blue),var(--orange),var(--indigo),var(--green));background-size:200% 100%;animation:shimmer 8s linear infinite}
.rainbow i{display:none}
.blob::before{animation:bob 7s ease-in-out infinite}
.blob .tag{animation:bob 5s ease-in-out infinite;animation-delay:-2s}

/* split hero headlines into words, kickers into letters */
(()=>{
  document.querySelectorAll('.hero .big').forEach(h=>{let n=0;
    const wrap=node=>{[...node.childNodes].forEach(c=>{
      if(c.nodeType===3){const frag=document.createDocumentFragment();c.textContent.split(/(\s+)/).forEach(t=>{if(!t)return;if(/^\s+$/.test(t)){frag.append(t);return;}const sp=document.createElement('span');sp.className='w';sp.style.setProperty('--i',n++);sp.textContent=t;frag.append(sp);});c.replaceWith(frag);}
      else if(c.nodeType===1)wrap(c);});};
    h.setAttribute('aria-label',h.textContent.replace(/\s+/g,' ').trim());wrap(h);});
  document.querySelectorAll('.kicker').forEach(k=>{const t=k.textContent;k.setAttribute('aria-label',t);k.textContent='';[...t].forEach((ch,i)=>{const sp=document.createElement('span');sp.className='ch';sp.setAttribute('aria-hidden','true');sp.style.setProperty('--i',i);sp.textContent=ch===' '?'\u00a0':ch;k.append(sp);});});
})();

/* scroll reveal (only when JS + motion are available) */
.anim [data-r]{opacity:0;transform:translateY(26px);transition:opacity 700ms ease,transform 900ms var(--ease-out);transition-delay:var(--d,0ms)}
.anim [data-r="pop"]{transform:scale(.88)}
.anim [data-r="left"]{transform:translateX(-36px)}
.anim [data-r="right"]{transform:translateX(36px)}
.anim [data-r].in{opacity:1;transform:none}
.anim .spine ul::before{transform:scaleY(0);transform-origin:top;transition:transform 1400ms var(--ease-out)}
.anim .spine.in ul::before{transform:scaleY(1)}
.anim .spine .ck{scale:0;transition:scale 500ms cubic-bezier(.34,1.56,.64,1);transition-delay:var(--d,0ms)}
.anim .spine.in .ck{scale:1}

@media (max-width:720px){.d-sun{width:70px;height:70px}.d-balloons{width:80px;height:140px}.plane{display:none}}
@media (prefers-reduced-motion:reduce){
  .deco,.deco *,.plane,.hearts span,.ribbon .track,.portrait::before,.portrait::after,.wa-btn,.rainbow,.blob::before,.blob .tag{animation:none!important}
  .plane,.d-cloud{display:none}
}

/* ===== round 2: section transitions + more motion ===== */
.wave-top::before{display:none}
.wv{position:absolute;left:0;right:0;top:calc(-1 * var(--wh));height:var(--wh);--wh:clamp(40px,6vw,84px);pointer-events:none;overflow:hidden;z-index:2}
.wv svg{position:absolute;left:0;top:0;width:200%;height:100%}
.wv .w1{animation:wave-slide 16s linear infinite;opacity:.45}
.wv .w2{animation:wave-slide 10s linear infinite reverse}
.wv svg{fill:var(--wc)}
@keyframes wave-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
footer{position:relative}

/* scroll progress crayon */
.progress{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:4px;z-index:90;background:linear-gradient(90deg,var(--green),var(--red),var(--sun),var(--blue),var(--orange),var(--indigo));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* page-wipe curtain for menu jumps */
.curtain{position:fixed;inset:0;z-index:200;display:flex;pointer-events:none;visibility:hidden}
.curtain.cover,.curtain.leave{visibility:visible}
.curtain i{flex:1;transform:translateY(101%)}
.curtain i:nth-child(1){background:var(--green)}.curtain i:nth-child(2){background:var(--red)}.curtain i:nth-child(3){background:var(--sun)}.curtain i:nth-child(4){background:var(--blue)}.curtain i:nth-child(5){background:var(--orange)}.curtain i:nth-child(6){background:var(--indigo)}
.curtain.cover i{transform:translateY(0);transition:transform 420ms var(--ease-io);transition-delay:calc(var(--k)*45ms)}
.curtain.leave i{transform:translateY(-101%);transition:transform 520ms var(--ease-io);transition-delay:calc(var(--k)*45ms)}
.curtain img{position:absolute;left:50%;top:50%;width:110px;translate:-50% -50%;opacity:0;transition:opacity 200ms ease}
.curtain.cover img{opacity:1;transition-delay:250ms}

/* hero: circle wipe between slides, word stagger, bubbles, parallax */
.slide.is-active{animation:wipe-in 1100ms var(--ease-io) both;z-index:2}
.slide.was{opacity:1;visibility:visible;z-index:1;transition:none}
@keyframes wipe-in{from{clip-path:circle(0% at 78% 55%)}to{clip-path:circle(150% at 78% 55%)}}
.hero .big .w{display:inline-block;white-space:pre}
.slide.is-active .big .w{animation:word-up 700ms var(--ease-out) both;animation-delay:calc(200ms + var(--i)*70ms)}
.slide.is-active .content>.big{animation:none}
@keyframes word-up{from{opacity:0;transform:translateY(40%) rotate(4deg)}}
.bubbles{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.bubbles i{position:absolute;bottom:-60px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:rgba(255,255,255,.08);animation:bubble linear infinite}
@keyframes bubble{to{transform:translateY(-110vh) translateX(var(--x,20px))}}
.chip{position:relative}
.chip::after{content:"";position:absolute;inset:-4px;border-radius:7px;border:2px solid var(--red);opacity:0;animation:chip-ping 2.4s ease-out infinite}
@keyframes chip-ping{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}

/* heading scribble underline */
.hl{position:relative;display:inline;white-space:nowrap}
.hl svg{position:absolute;left:-4%;bottom:-.22em;width:108%;height:.42em;overflow:visible}
.hl path{fill:none;stroke:var(--sun);stroke-width:6;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:0}
.anim .hl path{stroke-dashoffset:240;transition:stroke-dashoffset 1100ms var(--ease-out) 350ms}
.anim .in .hl path,.anim .hl.in path{stroke-dashoffset:0}
.band .hl path{stroke:#fff}

/* kicker pops letter by letter */
.anim .kicker .ch{display:inline-block;opacity:0;transform:translateY(8px);transition:opacity 300ms ease,transform 400ms var(--ease-out);transition-delay:calc(var(--i)*25ms)}
.anim .in .kicker .ch,.anim .kicker.in .ch{opacity:1;transform:none}

/* portraits bob in a wave */
.portrait{animation:bob 4.5s ease-in-out infinite;animation-delay:calc(var(--n,0)*-0.9s)}

/* timetable progress line */
.tt{position:relative;padding-left:26px}
.tt::before,.tt::after{content:"";position:absolute;left:6px;top:14px;bottom:14px;width:4px;border-radius:2px}
.tt::before{background:rgba(36,35,79,.1)}
.tt::after{background:linear-gradient(var(--green),var(--blue),var(--orange),var(--red));transform-origin:top;transform:scaleY(var(--p,1))}
.anim .tt::after{transform:scaleY(var(--p,0))}
.tt li{position:relative}
.tt li::before{content:"";position:absolute;left:-26px;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--c);translate:0 -50%;transition:background-color 300ms ease,scale 300ms var(--ease-out)}
.tt li.lit::before{background:var(--c);scale:1.15}
@media (max-width:440px){.tt li::before{top:1.4rem}}

/* image parallax + photo curtain reveals */
.par{will-change:transform}
.anim [data-r="wipe"]{opacity:1;transform:none;clip-path:inset(100% 0 0 0 round 24px);transition:clip-path 1100ms var(--ease-io);transition-delay:var(--d,0ms)}
.anim [data-r="wipe"].in{clip-path:inset(0 0 0 0 round 24px)}

/* gallery tilt */
.gallery button{transition:transform 400ms var(--ease-out),box-shadow 400ms ease}
@media (hover:hover) and (pointer:fine){.gallery button:hover{transform:rotate(var(--t,-1.5deg)) scale(1.02);box-shadow:0 22px 40px -24px rgba(36,35,79,.6);z-index:2}}
.gallery button:nth-child(even){--t:1.5deg}

/* buttons shine */
.btn-red,.btn-white{position:relative;overflow:hidden}
.btn-red::after,.btn-white::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite}
.btn-white::after{background:linear-gradient(100deg,transparent,rgba(226,54,60,.15),transparent)}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}

/* footer logo float */
.foot img{animation:bob 4s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .wv .w1,.wv .w2,.bubbles,.chip::after,.portrait,.btn-red::after,.btn-white::after,.foot img{animation:none!important}
  .bubbles{display:none}
  .slide.is-active{animation:none}
  .slide.is-active .big .w{animation:none}
  .progress{display:none}
}

/* whole-section fade in */
.anim .sec-fade{opacity:0;transform:translateY(56px);transition:opacity 1000ms ease,transform 1200ms var(--ease-out)}
.anim .sec-fade.in{opacity:1;transform:none}

/* hero/cards overlap fixes */
.promise-wrap{z-index:6}
@media (max-width:520px){
  .promise-row{grid-template-columns:1fr 1fr;gap:.7rem;margin-top:-2.2rem}
  .promise{padding:1rem .9rem;gap:.45rem;border-radius:16px}
  .promise .ic{width:40px;height:40px;border-radius:12px}
  .promise .ic svg{width:20px;height:20px}
  .promise b{font-size:1.02rem;line-height:1.2}
  .promise span{font-size:.86rem;line-height:1.45}
}

/* cards under the hero arrive only after 20% scroll */
.js-cards .promise{opacity:0;transform:translateY(60px) scale(.94);pointer-events:none;transition:opacity 500ms ease,transform 700ms var(--ease-out);transition-delay:calc(var(--k,0)*90ms)}
.js-cards .promise-wrap.show .promise{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.js-cards .promise{transform:none;transition:opacity 200ms ease}}