/* Unmatchable Kids school website.
   Colours come from the official logo (navy "UNMATCHABLE", a "KIDS" in orange,
   amber, green and blue, a purple star, a red heart, an orange chick). The app's
   shared tokens (unmatchable-kids repo, shared/src/constants/colours.ts) use the
   same values; change both together. Light only, on purpose. */

:root {
  /* The logo's colours, full strength: small accents (squiggles, numbers, drawings) */
  --logo-navy: #2F5078;
  --logo-orange: #E54D28;
  --logo-amber: #E58900;
  --logo-green: #67B547;
  --logo-blue: #3D7CC2;
  --logo-purple: #CB6BE6;
  --logo-red: #F22855;
  --logo-peach: #F4A445;
  --link: #2C66A8;       /* text links: the logo blue, deepened to pass 4.5:1 on paper */

  /* The logo's colours lightened, so navy text reads on them: tiles, hero, icons.
     (Names are the roles they had before the logo arrived: sky = blue, sun = amber,
     coral = orange, grass = green, berry = purple, bubblegum = pink.) */
  --sky: #A9CBEF;
  --sun: #F7C266;
  --coral: #F6A08A;
  --grass: #A5D88F;
  --berry: #E2ADF2;
  --bubblegum: #F79BB0;

  /* Pale tints: section backgrounds */
  --band-sky: #EAF2FB;
  --band-sun: #FFF2DC;
  --band-mint: #ECF7E6;
  --band-pink: #FCEBF0;

  --ink: #22395A;        /* text: deep navy */
  --ink-soft: #566C8A;
  --paper: #FFFDF8;      /* light surfaces on bands (cards, numbers) */
  --line: rgba(34, 57, 90, 0.14);
  --wa: #127A41;         /* WhatsApp green, deepened so white text passes 4.5:1 */
  --focus: #9B4DB8;

  --font-display: 'Baloo 2', ui-rounded, system-ui, sans-serif;
  --font-body: 'Hind', system-ui, sans-serif;

  /* Type scale (perfect fourth, 1.333) */
  --t-small: 0.875rem;
  --t-body: 1.0625rem;
  --t-lead: 1.25rem;
  --t-h3: 1.375rem;
  --t-h2: clamp(1.875rem, 1.4rem + 1.8vw, 2.625rem);
  --t-h1: clamp(2.5rem, 1.6rem + 3.8vw, 4rem);

  --wrap: 72rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --radius-tile: 28px;
  --radius-btn: 999px;
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--band-sky);
  color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--font-body);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
main { overflow-x: clip; }  /* the tilted ribbon and drifting drawings never cause sideways scroll */
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
h1, h2 { color: var(--logo-navy); }
h1 { font-size: var(--t-h1); font-weight: 800; max-width: 13ch; }
h2 { font-size: var(--t-h2); font-weight: 800; }
h3 { font-size: var(--t-h3); font-weight: 700; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; position: relative; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 0.5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.6rem 1.4rem;
  border-radius: var(--radius-btn); border: 2px solid transparent;
  font: 700 1.0625rem/1 var(--font-display); text-decoration: none; cursor: pointer;
  transition: transform 200ms var(--bounce), background-color 120ms ease, box-shadow 200ms ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.96); }
.btn svg { width: 1.25em; height: 1.25em; }
.btn-small { min-height: 44px; padding: 0.45rem 1rem; font-size: 1rem; }
.btn-wa { background: var(--wa); color: #FFFDF6; box-shadow: 0 4px 0 #0A5A2F; }
.btn-wa:hover { box-shadow: 0 6px 0 #0A5A2F; }
.btn-wa:active { box-shadow: 0 2px 0 #0A5A2F; }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.btn-ghost:hover { background: var(--sun); }
.btn-ink { background: var(--logo-navy); color: var(--paper); box-shadow: 0 4px 0 #1B3150; }
.btn-ink:hover { box-shadow: 0 6px 0 #1B3150; }
.input { min-height: 48px; padding: 0.55rem 1rem; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); color: var(--ink); font: 500 1.05rem/1.2 var(--font-body); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--sky) 94%, transparent); backdrop-filter: blur(8px); }
.header-row { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.brand { display: inline-flex; flex-shrink: 0; align-items: center; gap: 0.6rem; text-decoration: none; font: 800 1.25rem/1 var(--font-display); }
/* The logo's wordmark (assets/brand/logo-wordmark.webp, cut from logo.webp); the full logo is in the footer. */
.brand-logo { height: 52px; width: auto; }
@media (max-width: 520px) { .brand-logo { height: 44px; } }
.nav { display: none; gap: 0.15rem; margin-left: auto; }
.nav a { text-decoration: none; font-weight: 600; padding: 0.4rem 0.75rem; border-radius: var(--radius-btn); transition: background-color 150ms ease; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--paper); }
.header-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.header-row .btn { white-space: nowrap; }
.langs { display: none; margin: 0; gap: 0.1rem; }
.langs a, .menu-langs a, .footer-langs a { text-decoration: none; font-weight: 600; padding: 0.3rem 0.55rem; border-radius: var(--radius-btn); font-size: 0.95rem; }
.langs a[aria-current], .menu-langs a[aria-current] { background: var(--paper); }

/* Phone/tablet menu (no JS needed: <details>) */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.9rem; border-radius: var(--radius-btn); background: var(--paper); font: 700 1rem/1 var(--font-display); }
.menu summary::-webkit-details-marker { display: none; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 18px; height: 2.5px; border-radius: 2px; background: var(--ink); position: relative; }
.menu-icon::before, .menu-icon::after { content: ''; position: absolute; left: 0; }
.menu-icon::before { top: -6px; } .menu-icon::after { top: 6px; }
.menu-panel { position: fixed; right: 1rem; top: 76px; width: min(calc(100vw - 2rem), 20rem); background: var(--paper); border-radius: 20px; padding: 0.75rem; box-shadow: 0 10px 30px rgba(36, 48, 94, 0.18); display: grid; gap: 0.5rem; }
.menu-panel nav { display: grid; }
.menu-panel nav a { text-decoration: none; font: 700 1.15rem/1 var(--font-display); padding: 0.85rem 0.75rem; border-radius: 12px; }
.menu-panel nav a[aria-current="page"], .menu-panel nav a:hover { background: var(--band-sky); }
.menu-langs { display: flex; gap: 0.25rem; margin: 0; padding-top: 0.5rem; border-top: 2px solid var(--line); }
.menu-langs a[aria-current] { background: var(--band-sky); }
@media (max-width: 520px) {
  .menu-text { display: none; }
  .header-wa { display: none; }  /* the floating WhatsApp button covers phones */
}
@media (min-width: 1100px) {
  .nav, .langs { display: flex; }
  .menu { display: none; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: var(--sky); padding: clamp(2rem, 1rem + 4vw, 4.5rem) 0 6.5rem; }
.hero-grid { display: grid; gap: 2rem; align-items: center; position: relative; z-index: 1; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1fr 1.05fr; gap: 3rem; } }
.hero h1 { text-shadow: 3px 3px 0 var(--paper); }
.lead { font-size: var(--t-lead); margin-top: 1.25rem; max-width: 32em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero-note {
  display: inline-block; margin-top: 1.5rem; padding: 0.35rem 1rem;
  background: var(--sun); border-radius: var(--radius-btn); font-weight: 600;
  transform: rotate(-1.5deg);
}
.hills { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 90px; fill: var(--band-sky); z-index: 1; }

/* Floating doodles behind the hero copy */
.doodles .d { position: absolute; left: var(--x); top: var(--y); width: 22px; height: 22px; background: var(--c); animation: float 7s ease-in-out infinite; }
.doodles .d:nth-child(2) { animation-delay: -2s; width: 14px; height: 14px; }
.doodles .d:nth-child(3) { animation-delay: -4s; }
.doodles .d:nth-child(4) { animation-delay: -1s; width: 16px; height: 16px; }
.doodles .d:nth-child(5) { animation-delay: -5s; width: 26px; height: 26px; }
.d-dot { border-radius: 50%; }
.d-star { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
@keyframes float { 50% { transform: translateY(-14px) rotate(20deg); } }

/* The scene: the school on a sunny day */
.scene { width: 100%; max-width: 32rem; margin-inline: auto; overflow: visible;
  -webkit-mask-image: linear-gradient(#000 82%, transparent);
  mask-image: linear-gradient(#000 82%, transparent); }
.scene * { transform-box: view-box; }
.rainbow path { stroke-dasharray: 640; animation: draw 1.6s ease-out both; }
.rainbow .r1 { stroke: var(--logo-orange); }
.rainbow .r2 { stroke: var(--logo-amber); animation-delay: 0.1s; }
.rainbow .r3 { stroke: #F5C84A; animation-delay: 0.2s; }
.rainbow .r4 { stroke: var(--logo-green); animation-delay: 0.3s; }
.rainbow .r5 { stroke: var(--logo-blue); animation-delay: 0.4s; }
@keyframes draw { from { stroke-dashoffset: 640; } to { stroke-dashoffset: 0; } }

.sun circle:first-of-type, .sun > circle { fill: #F5C84A; }
.sun .sun-eye { fill: var(--ink); }
.sun .sun-smile { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.rays path { stroke: #F5C84A; stroke-width: 6; stroke-linecap: round; }
.rays { transform-origin: 440px 80px; animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.cloud { fill: #FFFDF6; animation: drift 9s ease-in-out infinite alternate; }
.cloud-2 { animation-duration: 12s; animation-direction: alternate-reverse; }
@keyframes drift { to { transform: translateX(28px); } }

.hill { fill: var(--grass); }
.trunk { fill: #A0674B; }
.leaves { fill: var(--logo-green); }
.apple { fill: var(--coral); }
.wall { fill: #FFFDF6; }
.roof { fill: var(--logo-orange); stroke: var(--logo-orange); stroke-width: 8; }
.clock { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.clock-hands { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.door { fill: var(--logo-purple); }
.window { fill: var(--sky); stroke: var(--logo-amber); stroke-width: 5; }
.pole { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.flag { fill: var(--logo-red); transform-origin: 260px 136px; animation: wave 1.2s ease-in-out infinite alternate; }
@keyframes wave { to { transform: scaleX(0.75) skewY(4deg); } }
.path { fill: #FFE7A3; }

.balloons .string { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: 0.6; }
.balloons { animation: bob 3.2s ease-in-out infinite alternate; transform-origin: 112px 330px; }
.b1 { fill: var(--logo-orange); }
.b2 { fill: #F5C84A; }
.b3 { fill: var(--logo-purple); }
@keyframes bob { from { transform: rotate(-3deg); } to { transform: rotate(3deg) translateY(-6px); } }

.skin { fill: #C68B5E; }
.shirt-a { fill: var(--logo-amber); }
.shirt-b { fill: var(--logo-blue); }
.kid { animation: hop 1.6s var(--bounce) infinite; }
.k2 { animation-delay: 0.8s; }
@keyframes hop { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-10px); } }

/* ── Sections: pastel bands with scalloped tops ──────────────────────────── */
.section { position: relative; padding: clamp(3.5rem, 2rem + 5vw, 6rem) 0; }
.band { background: var(--band); }
.band-sky { --band: var(--band-sky); }
.band-sun { --band: var(--band-sun); }
.band-mint { --band: var(--band-mint); }
.band-pink { --band: var(--band-pink); }
.band::before {
  content: ''; position: absolute; left: 0; right: 0; top: -23px; height: 24px;
  background: var(--band);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='24'%3E%3Cpath d='M0 24V14Q20 0 40 14T80 14V24Z'/%3E%3C/svg%3E") repeat-x 0 0 / 80px 24px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='24'%3E%3Cpath d='M0 24V14Q20 0 40 14T80 14V24Z'/%3E%3C/svg%3E") repeat-x 0 0 / 80px 24px;
}
.hero + .band::before { display: none; }  /* the hero has its own hills */
.section-intro { color: var(--ink-soft); font-size: var(--t-lead); margin-top: 0.75rem; max-width: 36em; }

/* How we teach: coloured icon blobs, text stays quiet */
.approach { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 2rem 3rem; }
@media (min-width: 720px) { .approach { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .approach { grid-template-columns: repeat(3, 1fr); } }
.approach .icon {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: 0.9rem;
  background: var(--c); border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; font-size: 1.7rem;
}
.approach h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.approach p { color: var(--ink-soft); }

/* Classes: one crayon colour each */
.programmes { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1rem; }
@media (min-width: 640px) { .programmes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .programmes { grid-template-columns: repeat(4, 1fr); } }
.programme { border-radius: var(--radius-tile); padding: 1.5rem; display: grid; gap: 0.4rem; align-content: start; box-shadow: 0 6px 0 rgba(36, 48, 94, 0.12); }
.programme-emoji { font-size: 2.75rem; line-height: 1; margin-bottom: 0.5rem; display: inline-block; justify-self: start; }
.programme:hover .programme-emoji { animation: wiggle 0.6s ease-in-out; }
@keyframes wiggle { 25% { transform: rotate(-12deg) scale(1.1); } 75% { transform: rotate(12deg) scale(1.1); } }
.programme .age { font-weight: 600; }
.p-grass { background: var(--grass); }
.p-sun { background: var(--sun); }
.p-sky { background: var(--sky); }
.p-coral { background: var(--coral); }
.p-berry { background: var(--berry); }
.p-bubblegum { background: var(--bubblegum); }

/* Inside the school: photo slots (placeholders until real photos arrive) */
.gallery { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.photo { border-radius: var(--radius-tile); aspect-ratio: 4 / 3; display: grid; place-items: center; align-content: center; gap: 0.25rem; overflow: hidden; }
.photo span { font-size: 3rem; }
.photo p { font: 700 1.05rem/1 var(--font-display); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-wide { grid-column: span 2; aspect-ratio: auto; min-height: 10rem; }

/* A school day / admissions: real sequences, so they're numbered */
.day-grid { display: grid; gap: 2rem; align-items: start; }
.day-grid .btn { margin-top: 1.5rem; }
@media (min-width: 900px) { .day-grid { grid-template-columns: 1fr 1.4fr; gap: 4rem; } }
.day { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.day li { counter-increment: step; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; }
.day li::before {
  content: counter(step); grid-row: span 2;
  width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--step, var(--sun)); font: 800 1.3rem/1 var(--font-display);
}
.day li:nth-child(6n+2) { --step: var(--sky); }
.day li:nth-child(6n+3) { --step: var(--grass); }
.day li:nth-child(6n+4) { --step: var(--coral); }
.day li:nth-child(6n+5) { --step: var(--berry); }
.day li:nth-child(6n+6) { --step: var(--bubblegum); }
.day h3 { font-size: 1.25rem; align-self: center; }
.day p { color: var(--ink-soft); }
.fine { margin-top: 1rem; font-weight: 600; }

/* Centres */
.centres { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .centres { grid-template-columns: repeat(2, 1fr); } }
.centre { background: var(--paper); border: 3px solid var(--sky); border-radius: 24px; padding: 1.5rem; display: grid; gap: 0.6rem; }
.centre:nth-child(2) { border-color: var(--bubblegum); }
.centre address { font-style: normal; }
.hours { color: var(--ink-soft); }
.centre-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

/* FAQ */
.faq-wrap > * { max-width: 46rem; }
.faq-wrap h2 { margin-bottom: 1.5rem; }
.faq-wrap details { background: var(--paper); border-radius: 20px; margin-bottom: 0.75rem; padding: 0 1.25rem; }
.faq-wrap summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font: 700 1.2rem/1.3 var(--font-display);
}
.faq-wrap summary::-webkit-details-marker { display: none; }
.faq-wrap summary::after {
  content: '+'; position: absolute; right: 0; top: 50%; translate: 0 -50%;
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--sun); font-size: 1.4rem; transition: rotate 250ms var(--bounce);
}
.faq-wrap details[open] summary::after { rotate: 45deg; background: var(--coral); }
.faq-wrap details p { padding: 0 0 1.25rem; color: var(--ink-soft); max-width: 40em; }

/* Footer */
.site-footer { position: relative; background: var(--ink); color: var(--paper); padding: 3rem 0 1.5rem; }
.site-footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: -23px; height: 24px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='24'%3E%3Cpath d='M0 24V14Q20 0 40 14T80 14V24Z'/%3E%3C/svg%3E") repeat-x 0 0 / 80px 24px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='24'%3E%3Cpath d='M0 24V14Q20 0 40 14T80 14V24Z'/%3E%3C/svg%3E") repeat-x 0 0 / 80px 24px;
}
.site-footer a { color: var(--paper); }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-langs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 1rem; }
.footer-langs a { background: rgba(255, 253, 246, 0.12); }
.footer-logo { display: inline-block; margin-bottom: 1rem; }
.footer-logo img { width: 240px; height: auto; border-radius: 18px; background: #FFFFFF; padding: 6px; }
.footer-title { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--sun); }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
/* Footer lists are obviously links: no underline until hover / keyboard focus. */
.footer-links a, .footer-logo { text-decoration: none; }
.footer-links a { display: inline-block; padding: 0.15rem 0; }
.footer-links a:hover, .footer-links a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.copyright { margin-top: 2.5rem; font-size: var(--t-small); opacity: 0.75; }

/* ── Drawings ────────────────────────────────────────────────────────────── */
.art { display: block; overflow: visible; }
.art * { transform-box: view-box; }
.art text { font: 800 48px var(--font-display); fill: var(--ink); }

/* Hero extras: paper plane (SMIL, started from JS) and birds */
.plane-trail { fill: none; stroke: var(--paper); stroke-width: 2.5; stroke-dasharray: 3 9; stroke-linecap: round; opacity: 0.8; }
.plane { visibility: hidden; fill: var(--logo-green); }  /* the logo's green plane */
.scene.flying .plane { visibility: visible; }
.plane-fold { stroke: #3E7A2A; stroke-width: 1.5; }
.birds { animation: drift 10s ease-in-out infinite alternate; }
.bird { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: flap 0.6s ease-in-out infinite alternate; }
.bird-2 { animation-delay: -0.3s; }
@keyframes flap { to { transform: scaleY(0.4); } }

/* Activity ribbon */
.ribbon { width: 110%; margin: -2.5rem 0 3.5rem -5%; background: var(--sun); transform: rotate(-1.5deg); overflow: hidden; box-shadow: 0 4px 0 rgba(36, 48, 94, 0.12); }
.ribbon-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.ribbon ul { display: flex; gap: 2.5rem; list-style: none; margin: 0; padding: 0.8rem 1.25rem; }
.ribbon li { white-space: nowrap; font: 700 1.2rem/1 var(--font-display); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Hand-drawn squiggle under section headings; draws in when it scrolls into view */
.section h2:not(.finder-title)::after {
  content: ''; display: block; width: 6.5rem; height: 14px; margin-top: 0.4rem;
  background: var(--squiggle, var(--coral));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 14'%3E%3Cpath d='M3 9 C 12 1, 20 1, 28 8 S 44 15, 52 8 S 68 1, 76 8 S 92 15, 101 6' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 14'%3E%3Cpath d='M3 9 C 12 1, 20 1, 28 8 S 44 15, 52 8 S 68 1, 76 8 S 92 15, 101 6' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  transition: clip-path 900ms ease-out 200ms;
}
.js .section h2:not(.is-in):not(.finder-title)::after { clip-path: inset(0 100% 0 0); }
.band-sun { --squiggle: var(--logo-orange); }
.band-sky { --squiggle: var(--logo-blue); }
.band-mint { --squiggle: var(--logo-green); }
.band-pink { --squiggle: var(--logo-purple); }

/* ABC blocks and crayons sit beside their headings on wider screens */
.art-blocks, .art-crayons { display: none; position: absolute; right: 0; top: -1rem; width: 9.5rem; }
@media (min-width: 960px) { .art-blocks, .art-crayons { display: block; } }
.js .art-blocks.is-in .blk { animation: drop 0.8s var(--bounce) both; }
.blk-2 { animation-delay: 0.15s !important; }
.blk-3 { animation-delay: 0.35s !important; }
@keyframes drop { from { transform: translateY(-90px); opacity: 0; } to { transform: none; opacity: 1; } }
.crayon { transform-box: fill-box; transform-origin: 50% 100%; animation: tilt 2.4s ease-in-out infinite alternate; }
.c2 { animation-delay: -0.6s; } .c3 { animation-delay: -1.2s; } .c4 { animation-delay: -1.8s; }
@keyframes tilt { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

/* Kite */
.art-kite { width: 6.5rem; margin-top: 1.5rem; }
@media (min-width: 900px) { .art-kite { width: 9.5rem; margin-top: 2rem; } }
.kite { transform-origin: 100px 128px; animation: sway 3s ease-in-out infinite alternate; }
.kite-string { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: 0.5; }
@keyframes sway { from { transform: rotate(-7deg) translateY(4px); } to { transform: rotate(6deg) translateY(-6px); } }

/* Chiku the chick (parts.mjs chick()): breathes, blinks, waves now and then */
.art-chick { width: 15rem; margin-top: 1.75rem; }
.art-chick .bubble text { font: 800 7.5px/1 var(--font-display); fill: var(--ink); }
.chick-wing { transform: rotate(var(--a)); }
.chick-body { transform-box: view-box; transform-origin: 32px 57px; animation: chickBreathe 3s ease-in-out infinite; }
.chick-eyes { transform-box: fill-box; transform-origin: center; animation: chickBlink 4.5s infinite; }
.chick-wave { animation: chickWave 4.5s ease-in-out infinite; }
.giggling .chick-body { animation: chickGiggle 600ms var(--bounce); }
@keyframes chickBreathe { 50% { transform: translateY(-0.8px) scale(1.01); } }
@keyframes chickBlink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes chickWave {
  0%, 50%, 100% { transform: rotate(var(--a)); }
  58%, 72%, 86% { transform: rotate(calc(var(--a) - 120deg)); }
  65%, 79% { transform: rotate(calc(var(--a) - 95deg)); }
}
@keyframes chickGiggle { 30% { transform: scale(1.12, 0.88); } 60% { transform: translateY(-5px); } }
.bubble { animation: bob 2.4s ease-in-out infinite alternate; transform-origin: 80px 20px; }

/* School bus */
.road { position: relative; height: 84px; margin-top: 2.5rem; overflow: hidden; }
.road::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; border-bottom: 4px dashed rgba(36, 48, 94, 0.2); }
.bus-move { width: 100%; animation: driveAcross 18s linear infinite; }
.bus { width: 140px; animation: rumble 0.5s ease-in-out infinite alternate; }
.wheel { transform-box: fill-box; transform-origin: center; animation: spin 0.9s linear infinite; }
/* With JS the bus is driven by scrolling instead (js/main.js sets --x and --spin). */
.road.scroll-drive .bus-move { animation: none; transform: translateX(var(--x, -150px)); }
.road.scroll-drive .wheel { animation: none; transform: rotate(var(--spin, 0deg)); }
@keyframes driveAcross { from { transform: translateX(-150px); } to { transform: translateX(100%); } }
@keyframes rumble { to { transform: translateY(-2px); } }

/* Butterflies in the empty space beside the FAQ */
.butterflies { display: none; }
@media (min-width: 1000px) {
  .butterflies { display: block; position: absolute; right: 4%; top: 2rem; width: 16rem; height: 18rem; max-width: none; }
}
.butterfly { position: absolute; width: 44px; animation: flutter 9s ease-in-out infinite; }
.bf-1 { left: 10%; top: 20%; }
.bf-2 { left: 60%; top: 55%; width: 36px; animation-duration: 11s; animation-delay: -4s; }
.butterfly .wings { transform-box: fill-box; transform-origin: center; animation: flapWings 0.35s ease-in-out infinite alternate; }
@keyframes flapWings { to { transform: scaleX(0.35); } }
@keyframes flutter { 25% { transform: translate(40px, -30px) rotate(10deg); } 50% { transform: translate(80px, 10px) rotate(-6deg); } 75% { transform: translate(30px, 40px) rotate(8deg); } }

/* ── Inner pages ─────────────────────────────────────────────────────────── */
.page-hero { padding-bottom: 6rem; }
.page-hero-grid { min-height: 14rem; }
.hero-sun { background: var(--sun); }
.hero-coral { background: var(--coral); }
.hero-grass { background: var(--grass); }
.hero-bubblegum { background: var(--bubblegum); }
.hero-berry { background: var(--berry); }
/* Inner-page headers use pale tints so Chiku, the kite and the class badges
   (full logo colours) stand out against them. */
.page-hero.hero-sky { background: #D3E5F7; }
.page-hero.hero-sun { background: #FFEBB8; }
.page-hero.hero-coral { background: #FDDCCF; }
.page-hero.hero-grass { background: #D9F0CC; }
.page-hero.hero-bubblegum { background: #FADDE6; }
.page-hero.hero-berry { background: #EEDDF8; }
.page-hero h1 { max-width: 16ch; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; padding: 0; font-weight: 600; }
.crumbs li + li::before { content: '›'; margin-right: 0.35rem; opacity: 0.6; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.art.art-hero { display: block; position: static; width: min(15rem, 60%); justify-self: center; }
.art-hero.art-kite { width: min(11rem, 45%); margin: 0; }
.class-badge { justify-self: center; width: 11rem; height: 11rem; border-radius: 50%; background: var(--paper); display: grid; place-items: center; box-shadow: 0 8px 0 rgba(36, 48, 94, 0.12); animation: float 6s ease-in-out infinite; }
.class-badge span { font-size: 5.5rem; line-height: 1; }
.more-link { margin-top: 2rem; font-weight: 600; }
.more-link a { text-decoration-thickness: 2px; }

/* Whole class tile is clickable */
.programme { position: relative; }
.tile-link { text-decoration: none; }
.tile-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.tile-link:focus-visible { outline: none; }
.tile-link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 3px; }
.programme .more { margin-top: 0.5rem; font: 700 1rem/1 var(--font-display); text-decoration: underline; text-underline-offset: 4px; }
.programme { transition: transform 200ms var(--bounce); }
.programme:hover { transform: translateY(-4px) rotate(-0.5deg); }

/* Checklist ("by the end of the year", documents) */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.checklist li { position: relative; padding: 0.8rem 1rem 0.8rem 3.2rem; background: var(--paper); border-radius: 16px; font-weight: 500; }
.checklist li::before { content: '✓'; position: absolute; left: 0.9rem; top: 50%; translate: 0 -50%; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--grass); font-weight: 800; }

/* Class finder */
.finder { background: var(--paper); border-radius: 32px; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: 0 8px 0 rgba(36, 48, 94, 0.08); max-width: 48rem; margin-inline: auto; }
.finder-head { display: flex; gap: 1rem; align-items: flex-start; }
.finder-emoji { font-size: 3rem; line-height: 1; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; flex-shrink: 0; }
.finder-emoji > * { grid-area: 1 / 1; }
/* The cake becomes Chiku cheering when a result appears. */
.finder-chick { width: 4.5rem; opacity: 0; transform: scale(0.4); }
.finder.celebrating .finder-cake { opacity: 0; transform: scale(0.4); transition: opacity 200ms, transform 200ms; }
.finder.celebrating .finder-chick { opacity: 1; transform: none; transition: opacity 250ms, transform 500ms var(--bounce); }
.finder.celebrating .finder-chick .chick-body { animation: cheerHop 0.5s ease-in-out 3; }
.chick-sparkles path { fill: var(--logo-amber); }
.finder.celebrating .chick-sparkles { animation: twinkle 0.9s ease-in-out infinite alternate; }
@keyframes cheerHop { 50% { transform: translateY(-5px); } }
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 1; } }
.finder-title { font-size: var(--t-h2); margin-bottom: 0.4rem; }
.finder-head p { color: var(--ink-soft); }
.finder-form { margin-top: 1.5rem; }
.finder-form label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.finder-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.finder-row .input { flex: 1 1 12rem; }
.finder-result:not(:empty) { margin-top: 1.5rem; display: grid; gap: 1rem; justify-items: start; }
.finder-years { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; width: 100%; }
@media (min-width: 560px) { .finder-years { grid-template-columns: 1fr 1fr; } }
.fy { border-radius: 18px; padding: 1rem 1.25rem; background: var(--band-sun); display: grid; gap: 0.2rem; animation: popIn 500ms var(--bounce) both; }
.fy + .fy { animation-delay: 120ms; background: var(--band-sky); }
.fy span { color: var(--ink-soft); font-weight: 600; }
.fy strong { font: 800 1.6rem/1.1 var(--font-display); }
@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: none; opacity: 1; } }
.fine-print { margin-top: 1.25rem; font-size: var(--t-small); color: var(--ink-soft); }

/* In numbers */
.numbers { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .numbers { grid-template-columns: repeat(4, 1fr); } }
.numbers li { background: var(--paper); border-radius: 24px; padding: 1.5rem; display: grid; gap: 0.25rem; }
.numbers strong { font: 800 clamp(2.25rem, 1.6rem + 2vw, 3.25rem)/1 var(--font-display); }
.numbers li:nth-child(1) strong { color: var(--logo-orange); }
.numbers li:nth-child(2) strong { color: var(--logo-blue); }
.numbers li:nth-child(3) strong { color: #3E8A2C; }
.numbers li:nth-child(4) strong { color: #9B4DB8; }
.numbers span { color: var(--ink-soft); font-weight: 500; }

/* Parent quotes */
.quotes { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { position: relative; background: var(--paper); border-radius: 28px; padding: 2.25rem 1.5rem 1.5rem; border-top: 8px solid var(--c); }
.quote::before { content: '“'; position: absolute; top: -0.4rem; left: 1.25rem; font: 800 4.5rem/1 var(--font-display); color: var(--c); }
.quote blockquote { margin: 0; font-size: 1.125rem; }
.quote .who { margin-top: 1rem; font-weight: 600; color: var(--ink-soft); }
.reviews-link { margin-top: 2rem; }

/* Celebrations through the year */
.celebrations { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.celebration { background: var(--paper); border-radius: 24px; padding: 1.25rem; display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; border-left: 8px solid var(--cc); }
.celebration .month { grid-column: 1 / -1; font: 700 0.95rem/1 var(--font-display); color: var(--ink-soft); margin-bottom: 0.5rem; }
.cel-emoji { grid-row: span 2; font-size: 2.4rem; line-height: 1; display: inline-block; transition: transform 300ms var(--bounce); }
.celebration:hover .cel-emoji { transform: scale(1.25) rotate(-10deg); }
.celebration h3 { font-size: 1.15rem; }
.celebration p { color: var(--ink-soft); font-size: 0.97rem; }
.c-sun { --cc: var(--sun); } .c-sky { --cc: var(--sky); } .c-grass { --cc: var(--grass); }
.c-coral { --cc: var(--coral); } .c-berry { --cc: var(--berry); } .c-bubblegum { --cc: var(--bubblegum); }

/* Artwork pinboard */
.artwork { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.75rem 1.25rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .artwork { grid-template-columns: repeat(3, 1fr); } }
.art-card { position: relative; background: #FFFFFB; padding: 0.9rem 0.9rem 0.75rem; box-shadow: 0 6px 14px rgba(36, 48, 94, 0.14); transform: rotate(var(--tilt)); transition: transform 300ms var(--bounce); }
.js .art-card.reveal.is-in { transform: rotate(var(--tilt)); }
.art-card:hover { transform: rotate(0deg) scale(1.04); z-index: 1; }
.art-card::before { content: ''; position: absolute; top: -10px; left: 50%; width: 70px; height: 22px; translate: -50% 0; rotate: -4deg; background: var(--tape); opacity: 0.8; }
.art-card svg { width: 100%; aspect-ratio: 150 / 130; background: repeating-linear-gradient(#FFFFFB 0 22px, #EAF1FB 22px 23px); }
.art-card p { margin-top: 0.5rem; font: 700 1.05rem/1.2 var(--font-display); display: grid; }
.art-card p span { font: 500 0.9rem/1.3 var(--font-body); color: var(--ink-soft); }

/* Video tour */
.video { position: relative; margin-top: 2rem; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: var(--ink); max-width: 56rem; }
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video-play { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; align-content: center; gap: 0.75rem; border: 0; background: rgba(36, 48, 94, 0.35); color: var(--paper); font: 700 1.2rem/1 var(--font-display); cursor: pointer; }
.play-icon { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--coral); display: grid; place-items: center; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15); }
.play-icon::after { content: ''; margin-left: 6px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--paper); }
.video-soon { display: grid; place-items: center; align-content: center; gap: 1rem; text-align: center; padding: 2rem; background: var(--berry); color: var(--ink); }
.video-soon p { max-width: 28rem; }

/* Teachers and founder */
.teachers { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.teacher { background: var(--paper); border-radius: 28px; padding: 1.5rem; text-align: center; display: grid; justify-items: center; gap: 0.25rem; }
.avatar { width: 6rem; height: 6rem; border-radius: 50%; background: var(--c); display: grid; place-items: center; font-size: 3rem; margin-bottom: 0.5rem; border: 5px solid var(--paper); box-shadow: 0 0 0 4px var(--c); }
.teacher .role { font-weight: 600; }
.teacher p:last-child { color: var(--ink-soft); }
.founder { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 800px) { .founder { grid-template-columns: 16rem 1fr; gap: 3rem; } }
.founder-photo { aspect-ratio: 1; max-width: 16rem; border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; background: var(--sun); display: grid; place-items: center; font-size: 6rem; }
.founder-note { margin-top: 1rem; display: grid; gap: 1rem; font-size: 1.15rem; max-width: 38em; }
.signature { margin-top: 1rem; font: 700 1.3rem/1 var(--font-display); color: var(--logo-orange); }

/* Centre pages */
.centre-detail { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .centre-detail { grid-template-columns: 1fr 1.1fr; gap: 3rem; } }
.facts { margin: 1.5rem 0; display: grid; gap: 0.9rem; }
.facts div { display: grid; gap: 0.1rem; }
.facts dt { font-weight: 600; color: var(--ink-soft); font-size: 0.95rem; }
.facts dd { margin: 0; font-size: 1.1rem; }
.facts address { font-style: normal; }
.map { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 24px; background: var(--band-mint); }
.centre .map { aspect-ratio: 16 / 10; border-radius: 16px; margin-top: 0.5rem; }
.centre h3 a { text-decoration: none; }
.centre h3 a:hover { text-decoration: underline; }
.centre-bubblegum { border-color: var(--bubblegum); }
.centre-one { display: grid; gap: 1.25rem; align-items: stretch; margin-top: 2.5rem; }
.centre-one .centres { margin: 0; grid-template-columns: 1fr; }
.centre-one .map { height: 100%; min-height: 16rem; aspect-ratio: auto; }
@media (min-width: 900px) { .centre-one { grid-template-columns: 1fr 1.2fr; } }

/* Closing CTA band with Chiku */
.cta-inner { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 800px) { .cta-inner { grid-template-columns: 1fr auto; } }
.cta-band .art-chick { margin: 0; justify-self: center; }

/* Floating WhatsApp button */
.wa-float {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 6; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; background: var(--wa); color: #FFFDF6; box-shadow: 0 6px 16px rgba(14, 101, 53, 0.4);
  transition: transform 200ms var(--bounce);
}
.wa-float svg { width: 32px; height: 32px; }
.wa-float:hover { transform: scale(1.08); }
.wa-float::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--wa); animation: ring 3s ease-out infinite; }
@keyframes ring { 0% { transform: scale(1); opacity: 0.8; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.site-footer { padding-bottom: 5rem; }

/* Tap-to-play */
.js .toy { cursor: pointer; }
.sun .wink { display: none; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.sun.winking .wink { display: inline; }
.sun.winking circle.sun-eye:not(.right) { display: none; }
.sun.winking > circle:not(.sun-eye) { animation: wink 900ms var(--bounce); transform-box: fill-box; transform-origin: center; }
@keyframes wink { 30% { transform: scale(1.15); } }
.balloon { transform-box: fill-box; transform-origin: center; transition: transform 250ms var(--bounce), opacity 200ms ease; }
.balloon.popped { transform: scale(0); opacity: 0; }
.bus.honking { animation: honk 500ms var(--bounce); }
@keyframes honk { 30% { transform: translateY(-8px) rotate(-3deg); } }
.confetti { position: fixed; z-index: 20; width: 9px; height: 12px; border-radius: 2px; pointer-events: none; animation: confetti 900ms ease-out forwards; }
@keyframes confetti { to { transform: translate(var(--dx), calc(var(--dy) + 40px)) rotate(var(--r)); opacity: 0; } }

/* Seasonal decorations */
.diyas { position: absolute; left: 0; right: 0; bottom: 70px; z-index: 2; display: flex; justify-content: space-around; pointer-events: none; }
.diya { position: relative; width: 34px; height: 16px; background: var(--logo-orange); border-radius: 0 0 20px 20px; }
.diya i { position: absolute; left: 50%; bottom: 12px; width: 10px; height: 18px; translate: -50% 0; background: radial-gradient(circle at 50% 70%, #FFF3B0, #FFB020 60%, transparent 70%); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; animation: flicker 1.8s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes flicker { to { transform: scale(0.85, 1.1) rotate(3deg); } }
.snow { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.snow i { position: absolute; top: -10px; width: 8px; height: 8px; border-radius: 50%; background: #FFFDF6; opacity: 0.85; animation: snow linear infinite; }
@keyframes snow { to { transform: translate(20px, 640px); } }

/* Holi: slow colour splashes */
.holi { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.holi i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, var(--c) 0 45%, transparent 70%); opacity: 0; animation: splash 7s ease-out infinite; }
@keyframes splash { 0% { transform: scale(0.2); opacity: 0; } 20% { opacity: 0.45; } 70% { transform: scale(1); opacity: 0.3; } 100% { transform: scale(1.1); opacity: 0; } }

/* Ganeshotsav: a marigold toran along the top of the hero */
.toran { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; justify-content: space-between; padding: 0 0.5rem; pointer-events: none; }
.toran span { position: relative; width: 22px; height: calc(var(--h) * 1px); transform-origin: 50% 0; animation: toranSway 3s ease-in-out infinite alternate; animation-delay: var(--d); }
.toran span::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 18px; width: 2px; background: #3E8A2C; }
.toran span::after { content: ''; position: absolute; left: 0; bottom: 0; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #FFB300 0 30%, #F57C00 31% 100%); box-shadow: 0 -12px 0 -4px #FFC83D; }
@keyframes toranSway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

/* Makar Sankranti: kites floating across the sky */
.sky-kites { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sky-kites svg { position: absolute; width: 44px; animation: kiteFloat 9s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes kiteFloat { from { transform: translate(0, 0) rotate(-8deg); } to { transform: translate(60px, -40px) rotate(10deg); } }

/* ── Night hero (after 7 pm until 6 am; js/main.js adds .night) ───────────── */
.night-only { display: none; }
.hero.night { background: linear-gradient(180deg, #1B2A4E 0%, #33497F 100%); }
.hero.night .night-only { display: inline; }
.hero.night .sun, .hero.night .rainbow { display: none; }
.hero.night .moon { fill: #FFF2C2; filter: drop-shadow(0 0 10px rgba(255, 242, 194, 0.6)); }
.hero.night .night-stars path { fill: #FFE9A8; animation: starTwinkle 2.8s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes starTwinkle { from { opacity: 0.35; } to { opacity: 1; } }
.hero.night .cloud { fill: #8C9CC4; opacity: 0.45; }
.hero.night .window { fill: #FFD86B; filter: drop-shadow(0 0 6px rgba(255, 216, 107, 0.8)); }
.hero.night .hill { fill: #4C8A3E; }
.hero.night .leaves { fill: #3E7A33; }
.hero.night .plane-trail { stroke: #AFC2EE; }
.hero.night .bird { stroke: #C9D5F2; }
.hero.night h1 { color: #FFFDF8; text-shadow: 3px 3px 0 #22395A; }
.hero.night .lead { color: #E6ECF8; }
.hero.night .doodles .d { opacity: 0.6; }

/* ── Pop-in as content scrolls into view (only when JS runs) ─────────────── */
.js .reveal { opacity: 0; transform: translateY(24px) scale(0.94); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 400ms ease, transform 600ms var(--bounce);
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* ── Reduced motion: everything holds still ──────────────────────────────── */
/* ── Parent tips and articles ───────────────────────────────────────────── */
.tips { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .tips { grid-template-columns: repeat(3, 1fr); } }
.tip { position: relative; background: var(--paper); border-radius: 28px; padding: 1.5rem; border-top: 8px solid var(--cc); display: grid; gap: 0.5rem; align-content: start; transition: transform 200ms var(--bounce); }
.tip:hover { transform: translateY(-4px); }
.tip-emoji { font-size: 2.6rem; line-height: 1; }
.tip-title { font-size: 1.3rem; line-height: 1.25; color: var(--ink); }
.tip p { color: var(--ink-soft); }
.tip .more { font: 700 1rem/1 var(--font-display); text-decoration: underline; text-underline-offset: 4px; margin-top: 0.25rem; }
/* No section squiggle under card titles and article sub-headings (the squiggle rule is more specific). */
.section .tip-title::after, .section .more-tips-title::after, .section .article h2::after { display: none !important; }
.article { max-width: 42rem; background: var(--paper); border-radius: 28px; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); font-size: 1.1rem; line-height: 1.75; }
.article > * + * { margin-top: 1rem; }
.article h2 { font-size: 1.6rem; margin-top: 2.25rem; color: var(--logo-navy); }
.article ul, .article ol { padding-left: 1.25rem; display: grid; gap: 0.6rem; }
.article li::marker { color: var(--logo-orange); font-weight: 700; }
.article a { color: var(--link); font-weight: 600; }
.article-lead { font-size: 1.25rem; color: var(--ink); font-weight: 500; }
.more-tips { max-width: 42rem; margin-top: 2rem; }
.more-tips-title { font-size: 1.3rem; margin-bottom: 0.75rem; }
.more-tips ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.more-tips a { display: block; background: var(--paper); border-radius: 16px; padding: 0.9rem 1.1rem; font-weight: 600; text-decoration: none; }
.more-tips a:hover { background: var(--band-sun); }
.roles { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) !important; }
@media (min-width: 1040px) { .approach.four { grid-template-columns: repeat(4, 1fr); } }

/* ── Chiku the guide (bottom-left; the WhatsApp button is bottom-right) ──── */
.guide { display: none; }
.js .guide { display: block; position: fixed; left: 0.75rem; bottom: 0; z-index: 6; pointer-events: none; }
.guide-chick {
  pointer-events: auto; display: block; width: 78px; height: 78px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateY(62%); transition: transform 600ms var(--bounce);
}
.guide.is-up .guide-chick { transform: translateY(6%); }
.guide.hop .guide-chick .chick-body { animation: cheerHop 0.45s ease-in-out 2; }
.guide-chick .chick-figure { width: 100%; height: 100%; }
.guide-chick:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 50%; }
.guide-bubble {
  pointer-events: auto; position: absolute; left: 0.25rem; bottom: 84px; width: min(18rem, calc(100vw - 6.5rem));
  background: var(--paper); border-radius: 18px; padding: 0.85rem 2.4rem 0.85rem 1rem; box-shadow: 0 10px 28px rgba(34, 57, 90, 0.2);
  opacity: 0; transform: translateY(10px) scale(0.95); transform-origin: 20% 100%; visibility: hidden;
  transition: opacity 200ms ease, transform 300ms var(--bounce), visibility 0s 300ms;
}
.guide-bubble::after { content: ''; position: absolute; left: 1.6rem; bottom: -8px; width: 16px; height: 16px; background: var(--paper); transform: rotate(45deg); }
.guide.has-bubble .guide-bubble { opacity: 1; transform: none; visibility: visible; transition: opacity 200ms ease, transform 300ms var(--bounce); }
.guide-text { font-weight: 600; }
.guide-link { display: inline-block; margin-top: 0.35rem; font: 700 1rem/1.3 var(--font-display); color: var(--link); }
.guide-link:empty { display: none; }
.guide-close { position: absolute; top: 0.3rem; right: 0.3rem; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.guide-close:hover { background: var(--band-sky); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}