/* On Point Preschool: Soft Clay. Everything is pressed out of modelling clay.
   Mobile first, min-width queries only. Shadows are static; only transform and opacity animate. */
:root {
  --cream: #FFF7EC;
  --dough: #FFEBD6;
  --plum: #3A2A4D;
  --plum-soft: #6A5A7E;
  --coral: #FF8A73;
  --coral-deep: #C7432B;
  --mint: #8ED8B8;
  --sky: #8CC7FF;
  --sun: #FFD166;
  --lilac: #C9B6FF;
  --peach: #FFD2B8;
  --dusk: #E7DBFF;

  --display: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;

  --hl: inset 6px 6px 12px rgba(255, 255, 255, .55);
  --shade: inset -8px -8px 14px rgba(58, 42, 77, .12);
  --drop: 0 14px 24px -10px rgba(58, 42, 77, .25);
  --clay: var(--hl), var(--shade), var(--drop);
  --clay-pressed: inset 5px 5px 10px rgba(58, 42, 77, .16), inset -5px -5px 10px rgba(255, 255, 255, .5);
  --spring-fallback: cubic-bezier(.34, 1.56, .64, 1);
  --spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);
  --r-lg: 40px;
  --r-md: 32px;
  --r-sm: 24px;
  --gutter: 1rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--cream); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--plum);
  font: 400 1.1rem/1.65 var(--body);
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a { color: var(--coral-deep); text-decoration-thickness: 3px; text-underline-offset: 4px; text-decoration-color: currentColor; }
a:hover { color: var(--plum); }
p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.25rem; }
strong { font-weight: 800; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.05; letter-spacing: -.01em; margin: 0 0 .6em; color: var(--plum); text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 9vw, 6rem); font-weight: 700; letter-spacing: -.02em; line-height: .98; }
h2 { font-size: clamp(2rem, 6.5vw, 3.6rem); }
h3 { font-size: clamp(1.35rem, 4.4vw, 1.75rem); line-height: 1.15; }
h4 { font-size: 1.2rem; }

.container { width: min(100% - 2 * var(--gutter), 76rem); margin-inline: auto; }
.narrow { width: min(100% - 2 * var(--gutter), 46rem); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 1000; padding: .8rem 1.2rem; background: var(--plum); color: var(--cream); border-radius: 999px; font-weight: 800; text-decoration: none; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--coral-deep); outline-offset: 2px; border-radius: 12px; }
.site-footer :focus-visible { outline-color: var(--sun); }

.eyebrow, .label { font: 800 .85rem/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--plum-soft); margin: 0 0 .9rem; }
.lede { font-size: 1.2rem; line-height: 1.6; max-width: 34em; }
.muted { color: var(--plum-soft); }
.small { font-size: .95rem; }
.num { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- the clay surface (one mixin, many fills) ---------- */
.clay {
  background: var(--c, var(--dough));
  border-radius: var(--r-md);
  box-shadow: var(--clay);
}
.c-cream { --c: var(--cream); }
.c-dough { --c: var(--dough); }
.c-coral { --c: var(--coral); }
.c-mint { --c: var(--mint); }
.c-sky { --c: var(--sky); }
.c-sun { --c: var(--sun); }
.c-lilac { --c: var(--lilac); }
.c-peach { --c: var(--peach); }

/* squish: compresses on press, springs back on release (JS adds .is-pressed for keys too) */
.squish { transition: transform .55s var(--spring-fallback); }
@supports (transition-timing-function: linear(0, 1)) {
  .squish { transition-timing-function: var(--spring); }
}
.squish:active, .squish.is-pressed { transform: scale(.97); box-shadow: var(--clay-pressed); transition-duration: .12s; transition-timing-function: ease-out; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .8rem 1.5rem;
  border: 0; border-radius: 999px;
  font: 700 1.08rem/1.1 var(--display); letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  background: var(--dough); color: var(--plum);
  box-shadow: var(--clay);
  transition: transform .55s var(--spring-fallback);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@supports (transition-timing-function: linear(0, 1)) { .btn { transition-timing-function: var(--spring); } }
.btn:hover { transform: translateY(-2px) scale(1.02); color: var(--plum); }
.btn:active, .btn.is-pressed { transform: scale(.97); box-shadow: var(--clay-pressed); transition-duration: .12s; transition-timing-function: ease-out; }
.btn-primary { background: var(--coral-deep); color: var(--cream); box-shadow: inset 6px 6px 12px rgba(255, 255, 255, .28), inset -8px -8px 14px rgba(58, 42, 77, .22), var(--drop); }
.btn-primary:hover { color: var(--cream); }
.btn-primary:active, .btn-primary.is-pressed { box-shadow: inset 5px 5px 10px rgba(58, 42, 77, .3), inset -4px -4px 8px rgba(255, 255, 255, .2); }
.btn-ghost, .btn-secondary { background: var(--cream); color: var(--plum); }
.btn-sun { background: var(--sun); color: var(--plum); }
.btn-mint { background: var(--mint); color: var(--plum); }
.btn-sm { min-height: 44px; padding: .6rem 1.1rem; font-size: 1rem; }
.btn svg { width: 1.1em; height: 1.1em; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; padding: .55rem var(--gutter) 0; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 64px; padding: .45rem .5rem .45rem 1rem;
  background: var(--cream); border-radius: 999px; box-shadow: var(--clay);
  max-width: 80rem; margin-inline: auto;
}
.brand { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.brand svg { width: 118px; height: auto; }
.site-nav { display: none; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.header-actions { display: flex; align-items: center; gap: .5rem; }
.header-tel { display: none; font-weight: 800; color: var(--plum); text-decoration: none; padding: .5rem .25rem; min-height: 44px; align-items: center; }
.header-actions .btn-primary { display: none; }
.menu-toggle {
  display: inline-flex; align-items: center; gap: .55rem;
  min-width: 44px; min-height: 48px; padding: .5rem 1rem .5rem .8rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--sun); color: var(--plum); box-shadow: var(--clay);
  font: 700 1rem/1 var(--display);
  transition: transform .55s var(--spring-fallback);
}
.menu-toggle:active, .menu-toggle.is-pressed { transform: scale(.95); box-shadow: var(--clay-pressed); }
.menu-toggle-bars { display: grid; gap: 5px; width: 20px; }
.menu-toggle-bars span { display: block; height: 4px; border-radius: 4px; background: var(--plum); transition: transform .3s var(--spring-fallback); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.site-menu {
  margin: .6rem auto 0; max-width: 80rem;
  padding: 1rem; border-radius: var(--r-lg);
  background: var(--dough); box-shadow: var(--clay);
  max-height: calc(100svh - 6rem); overflow-y: auto;
}
.site-menu[hidden] { display: none; }
.menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.menu-list a {
  display: flex; align-items: center; gap: .8rem;
  min-height: 52px; padding: .6rem 1rem; border-radius: 999px;
  background: var(--cream); color: var(--plum); text-decoration: none;
  font: 600 1.25rem/1.1 var(--display); box-shadow: var(--hl), var(--shade);
}
.menu-list a::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--dot, var(--coral)); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(58, 42, 77, .2); flex: none; }
.menu-list li:nth-child(6n + 2) a { --dot: var(--mint); }
.menu-list li:nth-child(6n + 3) a { --dot: var(--sky); }
.menu-list li:nth-child(6n + 4) a { --dot: var(--sun); }
.menu-list li:nth-child(6n + 5) a { --dot: var(--lilac); }
.menu-list a[aria-current="page"] { background: var(--sun); }
.menu-foot { display: grid; gap: .6rem; margin-top: 1rem; }
.menu-foot .btn { width: 100%; }

/* ---------- sections and waves ---------- */
.section { position: relative; padding: 4rem 0; }
.section-tight { padding: 2.5rem 0; }
.bg-cream { background: var(--cream); }
.bg-dough { background: var(--dough); }
.bg-mint { background: var(--mint); }
.bg-sky { background: var(--sky); }
.bg-sun { background: var(--sun); }
.bg-lilac { background: var(--lilac); }
.bg-peach { background: var(--peach); }
.bg-plum { background: var(--plum); color: var(--cream); }
.bg-plum h2, .bg-plum h3 { color: var(--cream); }
.bg-dough a:not(.btn), .bg-mint a:not(.btn), .bg-sky a:not(.btn), .bg-sun a:not(.btn), .bg-lilac a:not(.btn), .bg-peach a:not(.btn), .clay a:not(.btn) { color: var(--plum); }
.section-head { max-width: 40rem; margin-bottom: 2.2rem; }
.section-head p { font-size: 1.15rem; }

.wave { display: block; height: 44px; margin: -1px 0; position: relative; z-index: 1; pointer-events: none; }
.wave svg { width: 100%; height: 100%; }
.wave path { fill: var(--wave, var(--dough)); }
.wave.flip svg { transform: scaleX(-1); }
.wave.down svg { transform: scaleY(-1); }
.wave.down.flip svg { transform: scale(-1, -1); }
.w-cream { --wave: var(--cream); }
.w-dough { --wave: var(--dough); }
.w-mint { --wave: var(--mint); }
.w-sky { --wave: var(--sky); }
.w-sun { --wave: var(--sun); }
.w-lilac { --wave: var(--lilac); }
.w-peach { --wave: var(--peach); }
.w-plum { --wave: var(--plum); }
.wave-bg-cream { background: var(--cream); }
.wave-bg-dough { background: var(--dough); }
.wave-bg-mint { background: var(--mint); }
.wave-bg-sky { background: var(--sky); }
.wave-bg-sun { background: var(--sun); }
.wave-bg-lilac { background: var(--lilac); }
.wave-bg-peach { background: var(--peach); }
@media (prefers-reduced-motion: no-preference) {
  .wave path { animation: breathe 8s ease-in-out infinite; }
}
@keyframes breathe {
  0%, 100% { d: path("M0 44 V22 C120 6 240 6 360 20 C480 34 600 38 720 24 C840 10 960 4 1080 18 C1200 32 1320 36 1440 22 V44 Z"); }
  50% { d: path("M0 44 V18 C120 32 240 36 360 24 C480 10 600 6 720 20 C840 34 960 38 1080 24 C1200 10 1320 8 1440 20 V44 Z"); }
}
.is-offscreen, .is-offscreen *, .is-offscreen path { animation-play-state: paused !important; }
.anim-paused *, .anim-paused *::before, .anim-paused *::after { animation-play-state: paused !important; }

/* ---------- clay shapes (svg symbols from src/partials/clay.html) ---------- */
.clay-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.c-coral-text { color: var(--coral) !important; }
.c-mint-text { color: var(--mint) !important; }
.c-sky-text { color: var(--sky) !important; }
.c-sun-text { color: var(--sun) !important; }
.c-lilac-text { color: var(--lilac) !important; }
.c-peach-text { color: var(--peach) !important; }
.c-cream-text { color: var(--cream) !important; }
.shape { width: 72px; height: 72px; }

/* clay frame: photos sit in soft cream clay with a shape peeking over a corner */
.clay-frame {
  position: relative; margin: 0;
  padding: 14px; border-radius: 36px;
  background: var(--cream); box-shadow: var(--clay);
}
.clay-frame img { width: 100%; border-radius: 24px; aspect-ratio: var(--ar, 4 / 3); object-fit: cover; }
.clay-frame figcaption { padding: .8rem .4rem .1rem; font-size: .95rem; color: var(--plum-soft); }
.peek::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  width: 64px; height: 64px; top: -22px; right: 18px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 46%), var(--pk, var(--coral));
  box-shadow: inset -6px -8px 12px rgba(58, 42, 77, .18), 0 10px 16px -8px rgba(58, 42, 77, .35);
}
.peek-left::after { right: auto; left: 18px; }
.peek-bottom::after { top: auto; bottom: -20px; }
.peek-pill::after { width: 92px; height: 40px; border-radius: 999px; transform: rotate(-14deg); }
.peek-sun { --pk: var(--sun); }
.peek-mint { --pk: var(--mint); }
.peek-sky { --pk: var(--sky); }
.peek-lilac { --pk: var(--lilac); }
.peek-coral { --pk: var(--coral); }

/* ---------- home hero ---------- */
.home-hero { position: relative; padding: 2.2rem 0 3.5rem; overflow: hidden; }
.hero-stage { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hs { position: absolute; display: block; width: var(--s, 64px); height: var(--s, 64px); pointer-events: auto; touch-action: none; cursor: grab; }
.hs-par, .hs-bob { display: block; width: 100%; height: 100%; }
.hs-svg { width: 100%; height: 100%; overflow: visible; }
.hs-1 { --s: 58px; top: 1%; right: 6%; }
.hs-2 { --s: 64px; top: 30%; right: -2%; }
.hs-3 { --s: 54px; top: 2%; left: 56%; }
.hs-4 { --s: 70px; top: 47%; right: 4%; }
.hs-5 { --s: 50px; top: 50%; left: 2%; }
.hs-6 { --s: 60px; bottom: 3%; left: 8%; }
@media (prefers-reduced-motion: no-preference) {
  .hs-bob { animation: bob 5.5s ease-in-out infinite; }
  .hs-2 .hs-bob { animation-delay: -1.2s; animation-duration: 6.2s; }
  .hs-3 .hs-bob { animation-delay: -2.6s; }
  .hs-4 .hs-bob { animation-delay: -.8s; animation-duration: 7s; }
  .hs-5 .hs-bob { animation-delay: -3.4s; }
  .hs-6 .hs-bob { animation-delay: -1.9s; animation-duration: 6.6s; }
}
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(3deg); } }
.home-hero-grid { position: relative; z-index: 2; display: grid; gap: 2.2rem; pointer-events: none; }
.home-hero-grid > * { pointer-events: auto; }
.home-hero-copy { padding-top: 3.2rem; }
.home-hero h1 { max-width: 11ch; font-size: clamp(2.7rem, 12.5vw, 6.4rem); }
.home-hero h1 .word { display: inline-block; }
.hero-note { display: inline-flex; align-items: center; gap: .6rem; margin: 1.3rem 0 0; font-weight: 700; font-size: 1rem; }
.dot-live { width: 14px; height: 14px; border-radius: 50%; background: var(--mint); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .7), inset -2px -2px 3px rgba(58, 42, 77, .25); flex: none; }
.hero-frame { --ar: 4 / 3; transform: rotate(1.5deg); }
.hero-frame img { object-position: 30% 60%; }

/* ---------- inner page hero (partial) ---------- */
.page-hero { position: relative; padding: 2.2rem 0 3rem; overflow: hidden; background: var(--hero-bg, var(--cream)); }
.hero-deco { position: absolute; inset: 0; pointer-events: none; }
.hd { position: absolute; display: block; }
.hd svg { width: 100%; height: 100%; overflow: visible; }
.hd-1 { width: 54px; height: 54px; top: 12px; right: 9%; color: var(--hd1, var(--coral)); }
.hd-2 { width: 46px; height: 46px; top: 38%; right: -10px; color: var(--hd2, var(--mint)); }
.hd-3 { width: 40px; height: 40px; bottom: 16px; left: 46%; color: var(--hd3, var(--sun)); }
.page-hero-grid { position: relative; display: grid; gap: 2rem; }
.page-hero-copy { padding-top: 1.6rem; }
.page-hero h1 { max-width: 14ch; }
.page-hero-media { margin: 0; position: relative; padding: 14px; border-radius: 36px; background: var(--cream); box-shadow: var(--clay); transform: rotate(-1.2deg); }
.page-hero-media img { width: 100%; border-radius: 24px; aspect-ratio: 4 / 3; object-fit: cover; }
.page-hero-media::after {
  content: ""; position: absolute; width: 60px; height: 60px; top: -20px; left: 22px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 46%), var(--hd1, var(--coral));
  box-shadow: inset -6px -8px 12px rgba(58, 42, 77, .18), 0 10px 16px -8px rgba(58, 42, 77, .35);
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.2rem; padding: 0; font-weight: 700; font-size: .95rem; }
.crumbs li { display: inline-flex; align-items: center; gap: .35rem; }
.crumbs li + li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--plum-soft); opacity: .6; }
.crumbs a { color: var(--plum); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 .65rem; border-radius: 999px; background: var(--dough); box-shadow: var(--hl), var(--shade); }
.crumbs [aria-current] { color: var(--plum-soft); }
.page-toddlers { --hd1: var(--coral); --hd2: var(--sun); --hd3: var(--lilac); }
.page-twos-threes { --hd1: var(--mint); --hd2: var(--sky); --hd3: var(--coral); }
.page-pre-k { --hd1: var(--sky); --hd2: var(--sun); --hd3: var(--mint); }
.page-summer { --hd1: var(--sun); --hd2: var(--coral); --hd3: var(--sky); }
.page-enrichment { --hd1: var(--lilac); --hd2: var(--mint); --hd3: var(--sun); }
.page-day { --hd1: var(--sun); --hd2: var(--peach); --hd3: var(--sky); }
.page-teachers { --hd1: var(--lilac); --hd2: var(--coral); --hd3: var(--mint); }
.page-tuition { --hd1: var(--sun); --hd2: var(--mint); --hd3: var(--coral); }
.page-admissions { --hd1: var(--mint); --hd2: var(--lilac); --hd3: var(--sun); }
.page-journal { --hd1: var(--peach); --hd2: var(--sky); --hd3: var(--lilac); }
.page-reviews { --hd1: var(--coral); --hd2: var(--lilac); --hd3: var(--sun); }
.page-contact { --hd1: var(--sky); --hd2: var(--sun); --hd3: var(--coral); }
.page-about { --hd1: var(--coral); --hd2: var(--mint); --hd3: var(--sky); }
.page-programs { --hd1: var(--mint); --hd2: var(--coral); --hd3: var(--sky); }

/* ---------- program picker cards (tilt toward pointer, pop when chosen) ---------- */
.picker { display: grid; gap: 1.6rem; perspective: 800px; padding-top: .6rem; }
.prog-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; padding: 0; background: none; color: var(--plum); font: inherit;
  border-radius: var(--r-lg); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.prog-card:hover { color: var(--plum); }
.prog-card-body {
  position: relative; display: grid; gap: .35rem; align-content: start;
  padding: 1.5rem 1.4rem 1.4rem; height: 100%;
  border-radius: var(--r-lg); background: var(--c); box-shadow: var(--clay);
}
.prog-card.is-pressed .prog-card-body, .prog-card:active .prog-card-body { box-shadow: var(--clay-pressed); }
.prog-art { width: 84px; height: 84px; position: absolute; top: -22px; right: 14px; color: var(--cream); overflow: visible; }
.prog-age { font-weight: 800; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; }
.prog-name { font: 700 clamp(1.8rem, 7vw, 2.4rem)/1 var(--display); margin: .1rem 0 .3rem; max-width: 9ch; }
.prog-line { font-size: 1.05rem; line-height: 1.5; }
.prog-ratio { margin-top: .4rem; font-size: 1rem; }
.prog-ratio strong { font: 700 1.6rem/1 var(--display); margin-right: .2rem; }
.prog-cta { justify-self: start; margin-top: .8rem; display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .55rem 1.1rem; border-radius: 999px; background: var(--cream); font: 700 1rem/1 var(--display); box-shadow: var(--hl), var(--shade); }
.prog-cta::after { content: ""; width: 9px; height: 9px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); border-radius: 2px; }
a.prog-card .prog-cta::after { transform: rotate(-45deg); }
.prog-card[aria-pressed="true"] .prog-cta { background: var(--plum); color: var(--cream); }
.prog-card[aria-pressed="true"] .prog-cta::after { border: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--sun); transform: none; }
.picker-foot { margin-top: 1.8rem; }

/* ---------- a day at school, as a clay sun ---------- */
.sunday { position: relative; padding: 3.5rem 0 4rem; background: linear-gradient(180deg, var(--peach) 0%, var(--sky) 52%, var(--lilac) 100%); }
.sky { display: none; }
.sunday-inner { position: relative; z-index: 2; }
.sunday-head { max-width: 36rem; margin-bottom: 2rem; }
.day-stops { list-style: none; margin: 0; padding: 0 0 0 0; display: grid; gap: 1.1rem; position: relative; }
.day-stops::before { content: ""; position: absolute; left: 27px; top: 20px; bottom: 20px; width: 6px; border-radius: 6px; background: var(--cream); opacity: .7; }
.stop { position: relative; padding: 1.1rem 1.2rem 1.1rem 4.6rem; border-radius: var(--r-md); background: var(--cream); box-shadow: var(--clay); transition: transform .5s var(--spring-fallback); }
.stop h3 { margin: .15rem 0 .3rem; font-size: 1.45rem; }
.stop p { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.stop-time { display: inline-block; font: 800 .95rem/1 var(--body); letter-spacing: .03em; padding: .35rem .7rem; border-radius: 999px; background: var(--sun); box-shadow: var(--hl), var(--shade); }
.stop-sun { position: absolute; left: .55rem; top: 1rem; width: 50px; height: 50px; color: var(--sun); }
.stop-sun svg { width: 100%; height: 100%; overflow: visible; }
.stop:nth-child(5) .stop-sun { color: var(--lilac); }
.sunday-foot { margin: 2rem 0 0; }
@media (min-width: 1000px) {
  .sunday { min-height: 100vh; padding: 0; background: var(--peach); overflow: hidden; display: flex; flex-direction: column; }
  .sky { display: block; position: absolute; inset: 0; z-index: 0; }
  .sky-layer { position: absolute; inset: 0; }
  .sky-dawn { background: linear-gradient(180deg, var(--peach), var(--dough)); }
  .sky-noon { background: linear-gradient(180deg, var(--sky), #CFE7FF); opacity: 0; }
  .sky-dusk { background: linear-gradient(180deg, var(--lilac), var(--dusk)); opacity: 0; }
  .no-js .sky-noon, .reduce .sky-noon { opacity: 1; }
  .sky-cloud { position: absolute; color: var(--cream); width: 150px; height: 150px; }
  .sky-cloud svg { width: 100%; height: 100%; }
  .sc-1 { top: 50%; left: 44%; width: 120px; height: 120px; }
  .sc-2 { top: 9%; right: 12%; width: 110px; height: 110px; }
  .arc-box { position: absolute; left: 6%; right: 6%; top: 22%; height: 40%; }
  .sky-arc { width: 100%; height: 100%; overflow: visible; }
  .sky-sun { position: absolute; left: 50%; top: 32.5%; width: 140px; height: 140px; margin: -70px 0 0 -70px; color: var(--sun); }
  .sky-sun svg { width: 100%; height: 100%; overflow: visible; }
  .sunday-inner { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 6.5rem 0 2.5rem; }
  .sunday-head { max-width: 30rem; }
  .day-stops { grid-template-columns: repeat(6, 1fr); gap: .9rem; }
  .day-stops::before { display: none; }
  .stop { padding: 1rem 1rem 1.1rem; }
  .stop-sun { display: none; }
  .stop h3 { font-size: 1.3rem; }
  .stop p { font-size: .96rem; }
  .stop.is-now { transform: translateY(-14px) scale(1.04); background: var(--sun); }
  .stop.is-now .stop-time { background: var(--cream); }
  .sunday-foot { position: absolute; top: 6.5rem; right: 0; margin: 0; }
}

/* ---------- counting row ---------- */
.count-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; perspective: 700px; }
.count-tile { display: grid; align-content: start; gap: .4rem; padding: 1.3rem 1.1rem 1.2rem; min-height: 170px; border-radius: var(--r-md); background: var(--c); box-shadow: var(--clay); transform-origin: 50% 100%; }
.count-num { font: 700 clamp(3rem, 15vw, 5.2rem)/.9 var(--display); letter-spacing: -.02em; }
.count-label { font-weight: 700; font-size: 1rem; line-height: 1.35; }

/* ---------- tuition tool ---------- */
.tool { display: grid; gap: 1.4rem; padding: 1.2rem; border-radius: var(--r-lg); }
.tool-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.tool-set legend { font: 600 1.3rem/1.2 var(--display); margin-bottom: .7rem; padding: 0; }
.rc-grid { display: grid; gap: .7rem; }
.rc-days { grid-template-columns: repeat(3, 1fr); }
.radio-card, .radio-pill, .check-card { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.radio-card input, .radio-pill input, .check-card input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.rc-body { display: grid; gap: .15rem; padding: .9rem 1.1rem; border-radius: var(--r-sm); background: var(--cream); box-shadow: var(--clay); transition: transform .5s var(--spring-fallback); }
.rc-title { font: 700 1.25rem/1.1 var(--display); }
.rc-sub { font-weight: 700; font-size: .95rem; color: var(--plum-soft); }
.radio-card input:checked + .rc-body { background: var(--c); box-shadow: var(--clay-pressed); }
.radio-card input:checked + .rc-body .rc-sub { color: var(--plum); }
.radio-card input:checked + .rc-body::after, .radio-pill input:checked + span::after { content: ""; position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; border-radius: 50%; background: var(--plum); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .35); }
.radio-pill span { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 54px; padding: .55rem 1rem; border-radius: 999px; background: var(--cream); box-shadow: var(--clay); font: 700 1.1rem/1.15 var(--display); text-align: center; transition: transform .5s var(--spring-fallback); }
.radio-pill-wide span { text-align: left; padding-right: 2.6rem; border-radius: var(--r-sm); }
.radio-pill-wide input:checked + span::after { top: 50%; margin-top: -8px; right: 16px; }
.radio-pill span small { font: 700 .9rem/1.3 var(--body); color: var(--plum-soft); }
.radio-pill input:checked + span { background: var(--sun); box-shadow: var(--clay-pressed); }
.radio-pill:not(.radio-pill-wide) input:checked + span::after { display: none; }
.radio-pill input:checked + span small { color: var(--plum); }
.radio-pill input:disabled + span { background: var(--dough); color: var(--plum-soft); box-shadow: none; text-decoration: line-through; text-decoration-thickness: 3px; cursor: not-allowed; }
.radio-card input:focus-visible + .rc-body, .radio-pill input:focus-visible + span, .check-card input:focus-visible ~ .check-box { outline: 3px solid var(--coral-deep); outline-offset: 3px; }
.radio-card:active .rc-body, .radio-pill:active span { transform: scale(.97); }
.tool-note { margin: .8rem 0 0; padding: .7rem 1rem; border-radius: var(--r-sm); background: var(--cream); font-weight: 700; font-size: .98rem; box-shadow: var(--hl), var(--shade); }
.check-card { display: flex; align-items: center; gap: .9rem; min-height: 56px; padding: .7rem 1rem; border-radius: var(--r-sm); background: var(--cream); box-shadow: var(--clay); font-weight: 700; }
.check-card small { display: block; font-weight: 600; color: var(--plum-soft); }
.check-box { flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--dough); box-shadow: var(--clay-pressed); position: relative; }
.check-card input:checked ~ .check-box { background: var(--mint); }
.check-card input:checked ~ .check-box::after { content: ""; position: absolute; left: 10px; top: 5px; width: 8px; height: 14px; border-right: 4px solid var(--plum); border-bottom: 4px solid var(--plum); border-radius: 2px; transform: rotate(45deg); }
.tool-result { display: grid; gap: 1rem; align-content: start; }
.price-tile { display: grid; gap: .25rem; padding: 1.4rem 1.3rem; border-radius: var(--r-lg); }
.price-room { font-weight: 800; font-size: .98rem; }
.price-num { font: 700 clamp(3.2rem, 15vw, 5rem)/.95 var(--display); letter-spacing: -.02em; display: inline-block; }
.price-per { font-weight: 800; }
.price-ratio { margin-top: .5rem; justify-self: start; padding: .35rem .8rem; border-radius: 999px; background: var(--cream); font-weight: 800; font-size: .95rem; box-shadow: var(--hl), var(--shade); }
.day-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.ds-item { display: grid; gap: .1rem; padding: .75rem .9rem; border-radius: var(--r-sm); background: var(--c); box-shadow: var(--clay); }
.ds-k { font-weight: 800; font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; }
.ds-v { font: 700 1.2rem/1.15 var(--display); }
.tool-disclaimer { margin: 0; font-size: .95rem; color: var(--plum-soft); }
.after-tool { margin: 1.6rem 0 0; }

/* ---------- tour strip ---------- */
.tour-strip { padding: 0 0 4rem; background: var(--dough); }
.tour-inner { display: grid; gap: 1rem; padding: 1.6rem 1.4rem; border-radius: var(--r-lg); position: relative; }
.tour-inner h2 { font-size: clamp(1.7rem, 6vw, 2.6rem); margin-bottom: .4rem; }
.tour-inner p { margin: 0; }
.tour-art { width: 92px; height: 92px; color: var(--coral); margin-top: -3.2rem; overflow: visible; }

/* ---------- reviews ---------- */
.review-row { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.review-card { position: relative; padding: 2.2rem 1.4rem 1.4rem; border-radius: var(--r-lg); }
.review-card blockquote { margin: 0; }
.review-card blockquote p { font: 500 1.25rem/1.4 var(--display); }
.review-by { margin: 0; font-weight: 800; font-size: .98rem; }
.review-mark { position: absolute; top: -26px; right: 18px; width: 58px; height: 58px; color: var(--cream); overflow: visible; }
.review-foot { margin-top: 1.6rem; }
.stars { display: inline-flex; gap: 3px; margin-bottom: .6rem; }
.stars svg { width: 24px; height: 24px; color: var(--sun); overflow: visible; }

/* ---------- forms ---------- */
.form-grid { display: grid; gap: 2rem; }
.form-facts { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .7rem; }
.form-facts li { display: flex; align-items: center; gap: .8rem; font-weight: 700; }
.form-facts svg { width: 40px; height: 40px; flex: none; color: var(--sun); overflow: visible; }
.form-facts li:nth-child(2) svg { color: var(--coral); }
.form-facts li:nth-child(3) svg { color: var(--sky); }
.lead-form { padding: 1.4rem 1.2rem; border-radius: var(--r-lg); }
.field { display: grid; gap: .35rem; margin-bottom: 1rem; }
.field label, .field-label { font-weight: 800; font-size: 1rem; }
.optional { font-weight: 600; color: var(--plum-soft); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1.05rem; color: var(--plum);
  min-height: 52px; padding: .8rem 1rem; width: 100%;
  border: 3px solid transparent; border-radius: 20px;
  background: var(--dough); box-shadow: var(--clay-pressed);
  -webkit-appearance: none; appearance: none;
}
.field select { background-image: radial-gradient(circle at 50% 50%, var(--plum) 0 4px, transparent 5px); background-repeat: no-repeat; background-position: right 1rem center; background-size: 14px 14px; padding-right: 2.6rem; }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--coral-deep); outline-offset: 2px; }
.field-row { display: grid; gap: 0 1rem; }
.field-hint { margin: -.4rem 0 1rem; font-size: .95rem; color: var(--plum-soft); }
.field-error { margin: .2rem 0 0; color: var(--coral-deep); font-weight: 800; font-size: .95rem; display: flex; gap: .4rem; align-items: center; }
.field-error::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--coral-deep); flex: none; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--coral-deep); }
.honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn-block { width: 100%; }
.lead-success { position: relative; padding: 1.6rem 1.4rem 1.4rem 5.6rem; border-radius: var(--r-lg); background: var(--mint); box-shadow: var(--clay); min-height: 120px; }
.lead-success:focus { outline: 3px solid var(--plum); outline-offset: 3px; }
.lead-success-h { font-size: 1.6rem; margin-bottom: .5rem; }
.lead-success p { margin: 0; }
.sticker { position: absolute; left: 1rem; top: 1.2rem; width: 66px; height: 66px; color: var(--sun); pointer-events: none; }
.sticker svg { width: 100%; height: 100%; overflow: visible; }

/* ---------- footer ---------- */
.foot-wave { margin-top: 0; }
.site-footer { background: var(--plum); color: var(--cream); padding: 2.6rem 0 2rem; }
.site-footer a { color: var(--sun); }
.site-footer a:hover { color: var(--cream); }
.footer-grid { display: grid; gap: 2rem; }
.footer-h { font: 600 1.4rem/1.1 var(--display); color: var(--cream); margin: 0 0 .8rem; }
.footer-brand address { font-style: normal; margin-bottom: 1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.footer-col a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; font-weight: 700; }
.footer-col a:hover { text-decoration: underline; }
.footer-base { display: grid; gap: 1rem; margin-top: 2.2rem; padding-top: 1.4rem; font-size: .95rem; }
.footer-base p { margin: 0; }
.footer-base-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.pause-anim { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .5rem 1rem; border: 0; border-radius: 999px; cursor: pointer; background: var(--cream); color: var(--plum); font: 700 1rem/1 var(--display); box-shadow: var(--hl), var(--shade); }
.pause-dot { width: 14px; height: 14px; border-radius: 4px; background: var(--plum); box-shadow: inset 4px 0 0 var(--cream), inset -4px 0 0 var(--plum); }
.pause-anim[aria-pressed="true"] { background: var(--sun); }
.pause-anim[aria-pressed="true"] .pause-dot { border-radius: 50%; background: var(--coral-deep); box-shadow: none; }
.footer-top { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

.prog-card { transition: transform .55s var(--spring-fallback); }
@supports (transition-timing-function: linear(0, 1)) { .prog-card, .rc-body, .radio-pill span, .stop { transition-timing-function: var(--spring); } }
.prog-card:active, .prog-card.is-pressed { transform: scale(.97); transition-duration: .12s; transition-timing-function: ease-out; }
.picker-status { margin: 1.4rem 0 0; display: inline-block; padding: .6rem 1.1rem; border-radius: 999px; background: var(--cream); font-weight: 800; box-shadow: var(--hl), var(--shade); }
.picker-status[hidden] { display: none; }
.hero-note { align-items: flex-start; }
.hero-note .dot-live { margin-top: .35rem; }

/* ---------- inner page compositions ---------- */
.split { display: grid; gap: 2rem; align-items: center; }
.prose h2 { margin-top: 0; }
.prose p, .prose li { max-width: 38em; }
.prose ul li, .prose ol li { margin-bottom: .45rem; }
.card-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.info-card { position: relative; padding: 1.5rem 1.3rem 1.3rem; border-radius: var(--r-lg); background: var(--c, var(--cream)); box-shadow: var(--clay); }
.info-card h3 { margin-bottom: .4rem; }
.info-card p:last-child { margin-bottom: 0; }
.info-card .ic-art { width: 64px; height: 64px; margin: -.2rem 0 .6rem -.2rem; overflow: visible; color: var(--icc, var(--coral)); }
.info-card.c-coral .ic-art, .info-card.c-mint .ic-art, .info-card.c-sky .ic-art, .info-card.c-sun .ic-art, .info-card.c-lilac .ic-art { color: var(--cream); }

/* about: the values tower, stacked clay blocks */
.tower { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; max-width: 34rem; }
.tower li { position: relative; padding: 1rem 1.2rem; border-radius: 22px; background: var(--c); box-shadow: var(--clay); font-weight: 700; }
.tower li strong { display: block; font: 700 1.35rem/1.15 var(--display); }
.tower li:nth-child(1) { margin-right: 18%; }
.tower li:nth-child(2) { margin-left: 8%; margin-right: 6%; }
.tower li:nth-child(3) { margin-left: 2%; margin-right: 14%; }
.tower li:nth-child(4) { margin-left: 12%; }
.tower li:nth-child(5) { margin-right: 8%; margin-left: 4%; }
.tower-base { height: 22px; margin-top: .4rem; border-radius: 999px; background: var(--plum); opacity: .12; width: 90%; }
.licence { display: flex; gap: 1rem; align-items: center; padding: 1.2rem 1.3rem; border-radius: var(--r-md); }
.licence svg { width: 56px; height: 56px; flex: none; color: var(--sun); overflow: visible; }
.licence p { margin: 0; }
.credits { padding: 1.1rem 1.3rem; border-radius: var(--r-md); }
.credits summary { cursor: pointer; font: 600 1.25rem/1.2 var(--display); min-height: 44px; display: flex; align-items: center; }
.credits ul { margin: .6rem 0 0; }

/* ratio dots: one big clay ball for the grown up, small ones for the kids */
.ratio-viz { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; padding: 1.4rem; border-radius: var(--r-lg); }
.ratio-viz .rv-big { width: 96px; height: 96px; color: var(--coral); overflow: visible; }
.ratio-viz .rv-kids { display: flex; flex-wrap: wrap; gap: .3rem; max-width: 220px; }
.ratio-viz .rv-kids svg { width: 46px; height: 46px; overflow: visible; }
.ratio-viz .rv-kids svg:nth-child(4n + 1) { color: var(--sun); }
.ratio-viz .rv-kids svg:nth-child(4n + 2) { color: var(--mint); }
.ratio-viz .rv-kids svg:nth-child(4n + 3) { color: var(--sky); }
.ratio-viz .rv-kids svg:nth-child(4n + 4) { color: var(--lilac); }
.ratio-viz p { flex: 1 1 12rem; margin: 0; font-weight: 700; }
.ratio-viz .rv-num { display: block; font: 700 2.6rem/1 var(--display); }

/* numbered clay pills */
.pill-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; counter-reset: st; }
.pill-steps li { counter-increment: st; position: relative; padding: 1rem 1.2rem 1rem 4.4rem; border-radius: 28px; background: var(--c, var(--cream)); box-shadow: var(--clay); }
.pill-steps li::before { content: counter(st); position: absolute; left: .8rem; top: .85rem; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--sun); font: 700 1.3rem/1 var(--display); box-shadow: var(--hl), var(--shade); }
.pill-steps li strong { display: block; font: 700 1.2rem/1.2 var(--display); margin-bottom: .15rem; }

/* speech bubbles: the why room */
.bubbles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .9rem; }
.bubbles li { position: relative; padding: .9rem 1.2rem; border-radius: 26px 26px 26px 8px; background: var(--c); box-shadow: var(--clay); font: 600 1.15rem/1.3 var(--display); max-width: 19rem; }
.bubbles li:nth-child(even) { border-radius: 26px 26px 8px 26px; margin-left: auto; }

/* sticker chart: readiness list */
.sticker-chart { list-style: none; margin: 0; padding: 1.2rem; display: grid; gap: .6rem; border-radius: var(--r-lg); }
.sticker-chart li { display: flex; gap: .9rem; align-items: flex-start; padding: .8rem 1rem; border-radius: 22px; background: var(--cream); box-shadow: var(--hl), var(--shade); }
.sticker-chart svg { width: 40px; height: 40px; flex: none; overflow: visible; color: var(--sun); }
.sticker-chart li:nth-child(3n + 2) svg { color: var(--coral); }
.sticker-chart li:nth-child(3n + 3) svg { color: var(--mint); }
.sticker-chart strong { display: block; }

/* summer weeks: popsicle tiles */
.weeks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1rem; }
.week { position: relative; padding: 1.1rem 1rem 2.4rem; border-radius: 34px 34px 26px 26px; background: var(--c); box-shadow: var(--clay); text-align: center; }
.week::after { content: ""; position: absolute; left: 50%; bottom: -18px; width: 18px; height: 34px; margin-left: -9px; border-radius: 0 0 10px 10px; background: #E8C9A0; box-shadow: var(--hl), var(--shade); z-index: -1; }
.week .wk-n { display: block; font-weight: 800; font-size: .85rem; letter-spacing: .07em; text-transform: uppercase; }
.week .wk-t { display: block; font: 700 1.25rem/1.15 var(--display); margin: .25rem 0; }
.week .wk-d { display: block; font-size: .95rem; line-height: 1.4; }
.weeks-wrap { padding-bottom: 1.4rem; }

/* enrichment: clay calendar */
.cal { list-style: none; margin: 0; padding: 1rem; display: grid; gap: .6rem; border-radius: var(--r-lg); }
.cal li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .8rem; align-items: center; padding: .7rem .9rem; border-radius: 22px; background: var(--cream); box-shadow: var(--hl), var(--shade); }
.cal .cal-day { display: grid; place-items: center; min-height: 3.2rem; border-radius: 18px; background: var(--c); font: 700 1.15rem/1 var(--display); box-shadow: var(--hl), var(--shade); }

/* day page: lunchbox and moon */
.lunchbox { list-style: none; margin: 0; padding: 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; border-radius: var(--r-lg); }
.lunchbox li { padding: .9rem 1rem; border-radius: 22px; background: var(--c); box-shadow: var(--clay); }
.lunchbox .lb-day { display: block; font-weight: 800; font-size: .85rem; letter-spacing: .07em; text-transform: uppercase; }
.lunchbox .lb-food { display: block; font: 600 1.1rem/1.3 var(--display); }
.moon-panel { position: relative; padding: 2rem 1.4rem 1.6rem; border-radius: var(--r-lg); background: var(--plum); color: var(--cream); box-shadow: var(--clay); }
.moon-panel h2, .moon-panel h3 { color: var(--cream); }
.moon-panel .moon { width: 90px; height: 90px; color: var(--sun); position: absolute; right: 1rem; top: -36px; overflow: visible; }
.moon-panel a { color: var(--sun); }
.hours-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.hours-list li { display: grid; gap: .3rem; padding: 1.1rem 1.2rem; border-radius: var(--r-md); background: var(--c, var(--cream)); box-shadow: var(--clay); }
.hours-list .hl-time { justify-self: start; font-weight: 800; padding: .3rem .75rem; border-radius: 999px; background: var(--cream); box-shadow: var(--hl), var(--shade); }
.hours-list h3 { margin: .2rem 0 0; }
.hours-list p { margin: 0; }

/* teachers: clay avatars, no faces */
.teacher-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.teacher { position: relative; padding: 1.4rem 1.3rem 1.3rem; border-radius: var(--r-lg); background: var(--cream); box-shadow: var(--clay); }
.avatar { position: relative; width: 104px; height: 104px; margin: -2.6rem 0 .6rem; }
.avatar svg { width: 100%; height: 100%; overflow: visible; }
.avatar span { position: absolute; inset: 0 0 8px; display: grid; place-items: center; font: 700 2.1rem/1 var(--display); color: var(--plum); }
.teacher h3 { margin: 0 0 .1rem; }
.teacher .role { font-weight: 800; color: var(--plum-soft); margin: 0 0 .6rem; font-size: .98rem; }
.teacher .years { display: inline-block; margin-bottom: .7rem; padding: .3rem .75rem; border-radius: 999px; background: var(--c); font-weight: 800; font-size: .92rem; box-shadow: var(--hl), var(--shade); }
.teacher p:last-child { margin: 0; }

/* tuition table */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); background: var(--cream); box-shadow: var(--clay); padding: .6rem; }
.price-table { width: 100%; border-collapse: separate; border-spacing: 0 .4rem; font-size: 1rem; min-width: 30rem; }
.price-table caption { text-align: left; font: 600 1.25rem/1.2 var(--display); padding: .6rem .6rem .2rem; }
.price-table th, .price-table td { padding: .7rem .7rem; text-align: left; }
.price-table thead th { font-weight: 800; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.price-table tbody th { font-weight: 800; }
.price-table tbody tr { background: var(--dough); }
.price-table tbody tr td:last-child, .price-table tbody tr th:last-child { border-radius: 0 18px 18px 0; }
.price-table tbody tr > :first-child { border-radius: 18px 0 0 18px; }
.price-table td { font-weight: 800; font-variant-numeric: tabular-nums; }
.price-table .grp th { background: var(--c); }
.table-note { margin: 1rem 0 0; font-size: .95rem; color: var(--plum-soft); }
.closures { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.closures li { padding: .8rem .9rem; border-radius: 22px; background: var(--c, var(--cream)); box-shadow: var(--clay); }
.closures .cl-m { display: block; font-weight: 800; font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; }
.closures .cl-t { display: block; font: 600 1.1rem/1.25 var(--display); }

/* admissions: stepping stones */
.stones { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; counter-reset: stone; }
.stone { counter-increment: stone; position: relative; padding: 1.4rem 1.3rem 1.3rem 5.4rem; border-radius: 50px 34px 44px 30px; background: var(--c); box-shadow: var(--clay); }
.stone:nth-child(even) { margin-left: 1.2rem; border-radius: 34px 50px 30px 44px; }
.stone::before { content: counter(stone); position: absolute; left: 1rem; top: 1.2rem; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--cream); font: 700 1.6rem/1 var(--display); box-shadow: var(--clay); }
.stone h3 { margin-bottom: .3rem; }
.stone p { margin: 0; }
.faq-list { display: grid; gap: .8rem; }
.faq-item { border-radius: var(--r-md); background: var(--cream); box-shadow: var(--clay); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 56px; padding: 1rem 1.2rem; font: 600 1.2rem/1.25 var(--display); border-radius: var(--r-md); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--sun) radial-gradient(circle, var(--plum) 0 3px, transparent 4px); box-shadow: var(--hl), var(--shade); transition: transform .4s var(--spring-fallback); }
.faq-item[open] summary::after { transform: rotate(180deg) scale(1.1); background-color: var(--mint); }
.faq-answer { padding: 0 1.2rem 1.2rem; }
.faq-answer p:last-child { margin: 0; }

/* journal */
.article { padding: 1.6rem 1.3rem; border-radius: var(--r-lg); background: var(--cream); box-shadow: var(--clay); }
.article h2 { font-size: clamp(1.9rem, 6vw, 3rem); }
.article h3 { margin-top: 1.6rem; }
.article .byline { font-weight: 800; color: var(--plum-soft); font-size: .95rem; }
.article blockquote { margin: 1.4rem 0; padding: 1.1rem 1.3rem; border-radius: 28px; background: var(--lilac); font: 500 1.25rem/1.4 var(--display); box-shadow: var(--clay); }
.article blockquote p { margin: 0; }
.teasers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.teaser { padding: 1.3rem; border-radius: var(--r-lg); background: var(--c); box-shadow: var(--clay); }
.teaser .t-tag { font-weight: 800; font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; }
.teaser h3 { margin: .4rem 0; }
.teaser p { margin: 0; }

/* reviews wall */
.rating-badge { display: inline-flex; align-items: center; gap: 1rem; padding: 1rem 1.4rem; border-radius: 999px; }
.rating-badge svg { width: 54px; height: 54px; color: var(--sun); overflow: visible; }
.rating-badge .rb-num { font: 700 2.4rem/1 var(--display); }
.review-wall { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.review-wall .review-card:nth-child(odd) { transform: rotate(-1deg); }
.review-wall .review-card:nth-child(even) { transform: rotate(1.2deg); }

/* contact */
.tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.ticket { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 26px; background: var(--c); box-shadow: var(--clay); }
.ticket .tk-day { font: 700 1.5rem/1 var(--display); min-width: 5.5rem; }
.ticket p { margin: 0; font-weight: 700; }
.loop-map { width: 100%; height: auto; border-radius: var(--r-lg); background: var(--mint); box-shadow: var(--clay); }
.step-progress { height: 22px; border-radius: 999px; background: var(--dough); box-shadow: var(--clay-pressed); margin-bottom: .6rem; overflow: hidden; }
.step-progress span { display: block; height: 100%; width: 33%; border-radius: 999px; background: var(--coral); box-shadow: var(--hl), var(--shade); }
.step-label { font-weight: 800; margin: 0 0 1rem; }
.step-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.step-set legend { font: 600 1.5rem/1.2 var(--display); margin-bottom: 1rem; padding: 0; }
.step-nav { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: space-between; margin-top: .6rem; }

/* sibling links and closing band */
.sibs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.sib { display: flex; align-items: center; gap: 1rem; min-height: 84px; padding: 1rem 1.2rem; border-radius: var(--r-md); background: var(--c); box-shadow: var(--clay); color: var(--plum); text-decoration: none; transition: transform .5s var(--spring-fallback); }
.sib:hover { transform: translateY(-3px) rotate(-.6deg); color: var(--plum); }
.sib:active { transform: scale(.97); box-shadow: var(--clay-pressed); }
.sib svg { width: 56px; height: 56px; flex: none; color: var(--cream); overflow: visible; }
.sib strong { display: block; font: 700 1.3rem/1.1 var(--display); }
.sib span { font-size: .98rem; }
.cta-band { display: grid; gap: 1rem; padding: 1.8rem 1.4rem; border-radius: var(--r-lg); text-align: left; position: relative; }
.cta-band h2 { margin: 0; font-size: clamp(1.8rem, 6vw, 2.8rem); }
.cta-band p { margin: 0; }
.cta-band .cta-row { margin-top: .4rem; }
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 3rem 0; }
.notfound .nf-art { width: 140px; height: 140px; margin: 0 auto 1rem; color: var(--coral); overflow: visible; }
.notfound h1 { margin-inline: auto; }

@media (min-width: 600px) {
  .card-grid.cols-2, .teasers { grid-template-columns: repeat(2, 1fr); }
  .card-grid.cols-3, .teacher-grid, .review-wall { grid-template-columns: repeat(2, 1fr); }
  .weeks { grid-template-columns: repeat(4, 1fr); }
  .lunchbox { grid-template-columns: repeat(5, 1fr); }
  .closures { grid-template-columns: repeat(3, 1fr); }
  .sibs { grid-template-columns: repeat(2, 1fr); }
  .cta-band { grid-template-columns: 1fr auto; align-items: center; padding: 2.2rem 2.4rem; }
  .hours-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .split { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .split.wide-left { grid-template-columns: 1.2fr 1fr; }
  .card-grid.cols-3, .teacher-grid, .review-wall, .teasers { grid-template-columns: repeat(3, 1fr); }
  .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .sibs { grid-template-columns: repeat(4, 1fr); }
  .stones { grid-template-columns: repeat(2, 1fr); }
  .stone:nth-child(even) { margin-left: 0; margin-top: 2.4rem; }
  .article { padding: 3rem 3.4rem; }
  .hours-list { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- wider screens ---------- */
@media (min-width: 600px) {
  :root { --gutter: 1.5rem; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .count-row { grid-template-columns: repeat(4, 1fr); }
  .rc-programs { grid-template-columns: repeat(3, 1fr); }
  .day-strip { grid-template-columns: repeat(4, 1fr); }
  .review-row { grid-template-columns: repeat(3, 1fr); }
  .tour-inner { grid-template-columns: auto 1fr auto; align-items: center; gap: 1.6rem; padding: 1.8rem 2rem; }
  .tour-art { margin-top: 0; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .footer-base { grid-template-columns: 1fr auto; align-items: center; }
}
@media (min-width: 800px) {
  .picker { grid-template-columns: repeat(3, 1fr); }
  .tool { grid-template-columns: 1.25fr 1fr; padding: 1.8rem; gap: 2rem; }
  .tool-result { position: sticky; top: 6.5rem; }
  .form-grid { grid-template-columns: 1fr 1.1fr; align-items: start; gap: 3rem; }
}
@media (min-width: 1000px) {
  .site-header { padding-top: .8rem; }
  .header-inner { padding-left: 1.4rem; }
  .brand svg { width: 136px; }
  .site-nav { display: block; }
  .nav-list { display: flex; gap: .2rem; }
  .nav-list a { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .85rem; border-radius: 999px; color: var(--plum); text-decoration: none; font: 600 1.05rem/1 var(--display); transition: transform .45s var(--spring-fallback); }
  .nav-list a:hover { background: var(--dough); transform: translateY(-2px); }
  .nav-list a[aria-current="page"] { background: var(--sun); box-shadow: var(--hl), var(--shade); }
  .header-tel { display: inline-flex; }
  .header-actions .btn-primary { display: inline-flex; }
  .menu-toggle { display: none; }
  .section { padding: 6rem 0; }
  .home-hero { padding: 3rem 0 5rem; }
  .home-hero-grid { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 3rem; min-height: 620px; }
  .home-hero-copy { padding-top: 0; }
  .hs-1 { --s: 96px; bottom: 3%; top: auto; left: 31%; right: auto; }
  .hs-2 { --s: 110px; top: 2%; right: 4%; }
  .hs-3 { --s: 88px; bottom: 8%; left: 46%; top: auto; }
  .hs-4 { --s: 120px; bottom: 2%; right: 3%; top: auto; }
  .hs-5 { --s: 78px; top: 4%; left: 2%; }
  .hs-6 { --s: 92px; bottom: 0; left: 3%; }
  .page-hero { padding: 3rem 0 4.5rem; }
  .page-hero.has-media .page-hero-grid { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 3.5rem; }
  .hd-1 { width: 80px; height: 80px; top: 30px; right: 46%; }
  .hd-2 { width: 70px; height: 70px; right: 2%; top: 14%; }
  .hd-3 { width: 56px; height: 56px; left: 3%; bottom: 10%; }
  .lead-form { padding: 2rem; }
}
@media (min-width: 1200px) {
  .home-hero h1 { font-size: clamp(4rem, 6.6vw, 6.4rem); }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

.credits { margin-top: 1.6rem; }
.licence { margin-bottom: 0; }
.table-photo { margin-top: 2rem; max-width: 34rem; --ar: 16 / 9; }
.split .prose .clay-frame { margin-top: 1.6rem; --ar: 16 / 10; }
.tool-controls { display: grid; gap: 1.6rem; align-content: start; }
.rc-body { padding-right: 2.4rem; }