/* ======================================================================
   Wilson's Childcare, "Playroom, loud" (art-direction pass 2, 2026-09-19).
   A kindergarten look: pastel section tones, saturated toy colors on
   icons and buttons, wave edges between sections, and a small library of
   doodles (sun, cloud, star, heart, squiggle, plane) drawn from the sprite
   at the top of index.html. Tokens first, then components, then
   breakpoints, then the reduced-motion block. Everything visual reads
   from the tokens in :root. See DESIGN-PRINCIPLES.md and README.md.
   ====================================================================== */

/* ---------- fonts (relative URLs so styleguide/ can load this file too) ---------- */
@font-face{font-family:Inter;src:url('assets/fonts/inter-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url('assets/fonts/fraunces-latin.woff2') format('woff2');font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:Outfit;src:url('assets/fonts/outfit-latin.woff2') format('woff2');font-weight:500 800;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  /* Palette: "Playroom, loud". Text always sits on ink, white, or a pastel tone; the saturated colors carry icons,
     buttons, and borders. Checked with palettes/contrast.mjs (2026-09-19): white on pink 4.82, on purple 8.02, on
     green-deep 5.33, on accent 5.69; ink on yellow 8.82, on orange 5.34, on sky 5.24; muted on every pastel tone >= 5.9. */
  --ink:#1B2E4B;
  --muted:#4B5A70;
  --white:#FFFFFF;
  --surface:#FFFFFF;
  --pink:#D42A6E;
  --pink-deep:#B8205C;
  --purple:#5E35B1;
  --purple-deep:#4B2A94;
  --accent:#2A62C9;
  --accent-deep:#1F4FA6;
  --sky:#3FA7F5;
  --green:#2FA36B;
  --green-deep:#1F7A4A;
  --yellow:#FFC83D;
  --orange:#F5842A;
  --red:#E5484D;
  --tone-butter:#FFF4CC;
  --tone-sky:#E3F1FF;
  --tone-mint:#E2F6E8;
  --tone-lilac:#EEE8FF;
  --tone-pink:#FFE6EE;
  --tone-peach:#FFEEDD;
  --tone-blue:#C6E4FF;   /* the blue card on the sky section; ink on it 9.4, muted 5.1 */
  --line:#E7E2F0;
  --danger:#B91C1C;
  --success:#166534;
  /* Skeleton aliases (404, styleguide, palettes/ drop-ins still read these). */
  --highlight:var(--yellow);
  --on-highlight:var(--ink);
  --on-accent:#FFFFFF;
  --surface-alt:var(--tone-butter);
  --deep:var(--green-deep);
  --ink-soft:#D9CFF5;
  --line-dark:#7A57D1;
  --fun-red:var(--red);
  --fun-yellow:var(--yellow);
  --fun-green:var(--green);
  --fun-sky:var(--sky);
  --fun-purple:var(--purple);

  /* Type. Inter body; Outfit display at 800 (round, friendly, a little chunky). */
  --display:Outfit,Inter,system-ui,sans-serif;
  --sans:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display-weight:800;
  --display-tracking:-.02em;
  --display-leading:1.04;

  /* Shape: "soft" scale, one notch rounder than the skeleton default. */
  --radius-xs:10px;
  --radius-sm:16px;
  --radius-md:24px;
  --radius-lg:32px;
  --radius-pill:999px;

  /* Motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  /* Layout */
  --header-h:80px;
  --shell:1280px;
  --shell-wide:1600px;
  --edge-h:clamp(36px,5.5vw,80px);

  color-scheme:light;font-family:var(--sans);color:var(--ink);background:var(--surface);
  font-synthesis:none;font-size:100%;
}

:root[data-display="fraunces"]{--display:Fraunces,Georgia,'Times New Roman',serif;--display-weight:600;--display-tracking:-.02em;--display-leading:1.02}
:root[data-display="outfit"]{--display:Outfit,Inter,system-ui,sans-serif;--display-weight:800;--display-tracking:-.02em;--display-leading:1.04}
:root[data-shape="round"]{--radius-xs:4px;--radius-sm:10px;--radius-md:16px;--radius-lg:22px;--radius-pill:999px}
:root[data-shape="soft"]{--radius-xs:10px;--radius-sm:16px;--radius-md:24px;--radius-lg:32px;--radius-pill:999px}
:root[data-shape="sharp"]{--radius-xs:0;--radius-sm:2px;--radius-md:4px;--radius-lg:6px;--radius-pill:6px}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;line-height:1.6;overflow-x:clip}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;text-align:inherit}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure,ul,ol{margin:0}
ul{padding:0;list-style:none}
strong{font-weight:650}
[hidden]{display:none!important}
::selection{background:var(--yellow);color:var(--ink)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Focus: dark ring on light surfaces, yellow ring on purple / green ones. Tones set the color. */
:focus-visible{outline:3px solid var(--focus,var(--accent));outline-offset:4px}
[data-tone="light"],[data-tone="butter"],[data-tone="sky"],[data-tone="mint"]{--focus:var(--accent)}
[data-tone="lilac"]{--focus:var(--purple)}
[data-tone="purple"],[data-tone="dark"],body.menu-open .site-header{--focus:var(--yellow)}
[data-tone="accent"]{--focus:var(--on-accent)}

.container{width:min(var(--shell),calc(100% - 96px));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:20px;top:12px;padding:12px 20px;background:var(--ink);color:var(--white);z-index:100;transform:translateY(-160%);border-radius:var(--radius-sm);font-weight:600;text-decoration:none}
.skip-link:focus{transform:translateY(0)}

/* Section tones: white → butter → white → sky → purple band → lilac → green footer. */
.section{position:relative;padding-block:clamp(72px,9vw,120px);scroll-margin-top:var(--header-h);overflow:clip}
.section-tight{padding-block:clamp(56px,7vw,88px)}
.has-edge{padding-bottom:calc(clamp(72px,9vw,120px) + var(--edge-h))}
.has-edge-tall{padding-bottom:calc(clamp(72px,9vw,120px) + var(--edge-h) + 16px)}
[data-tone="light"]{background:var(--surface);color:var(--ink)}
[data-tone="butter"],[data-tone="warm"]{background:var(--tone-butter);color:var(--ink)}
[data-tone="sky"]{background:var(--tone-sky);color:var(--ink)}
[data-tone="mint"]{background:var(--tone-mint);color:var(--ink)}
[data-tone="lilac"]{background:var(--tone-lilac);color:var(--ink)}
[data-tone="purple"]{background:var(--purple);color:var(--white)}
[data-tone="dark"]{background:var(--ink);color:var(--white)}
[data-tone="accent"]{background:var(--accent);color:var(--on-accent)}
[data-tone="dark"] .section-lede,[data-tone="purple"] .section-lede{color:var(--ink-soft)}

/* Wave edges: an SVG pinned to the bottom of a section, filled with the NEXT section's color. */
.edge{display:block;width:100%;height:var(--edge-h)}
.edge-bottom{position:absolute;left:0;right:0;bottom:-1px;z-index:2}
.edge-hills{height:calc(var(--edge-h) + 16px)}

/* Doodles: decorative drawings from the sprite; every offset is positive so the boxes stay inside the viewport.
   Each doodle floats on its own duration/delay (--float-dur / --float-delay) so the set bobs out of step, like mobiles. */
.doodles{position:absolute;inset:0;pointer-events:none;overflow:clip;z-index:0}
.doodle{position:absolute;pointer-events:none;overflow:visible;animation:float var(--float-dur,7s) ease-in-out var(--float-delay,0s) infinite}
.doodle:nth-child(2n){--float-delay:-2.5s}
.doodle:nth-child(3n){--float-dur:9s}
.section>.container,.hero-grid{position:relative;z-index:1}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 16px 0 12px;border-radius:var(--radius-pill);background:var(--white);color:var(--pink);border:1.5px solid var(--tone-pink);box-shadow:0 3px 0 var(--tone-pink);font-size:12.5px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.eyebrow-icon{width:16px;height:16px;color:var(--yellow);flex-shrink:0}
.eyebrow-dot{width:11px;height:11px;background:var(--shape,var(--yellow));border-radius:50%;flex-shrink:0}
.section-title{font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);line-height:var(--display-leading);font-size:clamp(2.1rem,1.2rem + 2.9vw,3.6rem);margin-top:18px;text-wrap:balance}
.is-pink{color:var(--pink)}
.is-purple{color:var(--purple)}
.is-green{color:var(--green-deep)}
.section-lede{font-size:17.5px;line-height:1.65;color:var(--muted);max-width:600px;margin-top:20px;text-wrap:pretty}
.section-head{max-width:820px;margin-bottom:52px}
.section-head.is-centered{margin-inline:auto;text-align:center}
.section-head.is-centered .section-lede{margin-inline:auto}
.title-sm{font-family:var(--display);font-weight:var(--display-weight);letter-spacing:calc(var(--display-tracking) * .7);line-height:1.05}

/* ---------- buttons ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 24px;min-height:52px;background:var(--purple);color:var(--white);border:2px solid var(--purple);border-radius:var(--radius-pill);font-size:15px;font-weight:650;line-height:1.2;text-decoration:none;white-space:nowrap;box-shadow:0 6px 0 color-mix(in srgb,var(--purple) 70%,var(--ink));transition:background .2s var(--ease-soft),border-color .2s var(--ease-soft),transform .25s var(--ease-out),box-shadow .25s var(--ease-out),color .2s}
.button:hover{background:var(--purple-deep);border-color:var(--purple-deep);transform:translateY(-2px);box-shadow:0 8px 0 color-mix(in srgb,var(--purple) 70%,var(--ink))}
.button:active{transform:translateY(2px);box-shadow:0 2px 0 color-mix(in srgb,var(--purple) 70%,var(--ink))}
.button:disabled{opacity:.55;cursor:not-allowed;transform:none}
.button-large{min-height:60px;padding:0 30px;font-size:16px}
.button-small{min-height:46px;padding:0 20px;font-size:14px;box-shadow:0 4px 0 color-mix(in srgb,var(--pink) 70%,var(--ink))}
.button-arrow{font-size:20px;line-height:1;transition:transform .25s var(--ease-out)}
.button:hover .button-arrow{transform:translateX(4px)}
.button-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.button-pink{background:var(--pink);border-color:var(--pink);box-shadow:0 6px 0 var(--pink-deep)}
.button-pink:hover{background:var(--pink-deep);border-color:var(--pink-deep);box-shadow:0 8px 0 var(--pink-deep)}
.button-pink:active{box-shadow:0 2px 0 var(--pink-deep)}
.button-yellow{background:var(--yellow);border-color:var(--yellow);color:var(--ink);box-shadow:0 6px 0 color-mix(in srgb,var(--yellow) 70%,var(--ink))}
.button-yellow:hover{background:color-mix(in srgb,var(--yellow) 88%,var(--ink));border-color:color-mix(in srgb,var(--yellow) 88%,var(--ink));color:var(--ink);box-shadow:0 8px 0 color-mix(in srgb,var(--yellow) 70%,var(--ink))}
.button-ghost{background:transparent;border-color:rgba(255,255,255,.4);color:var(--white);box-shadow:none}
.button-ghost:hover{background:rgba(255,255,255,.1);border-color:var(--white);box-shadow:none}
.button-ghost-dark{background:var(--white);border-color:var(--ink);color:var(--ink);box-shadow:0 6px 0 var(--ink)}
.button-ghost-dark:hover{background:var(--ink);border-color:var(--ink);color:var(--white);box-shadow:0 8px 0 var(--ink)}
.button-ghost-dark:active{box-shadow:0 2px 0 var(--ink)}
.button-light{background:var(--white);border-color:var(--white);color:var(--ink);box-shadow:0 6px 0 rgba(0,0,0,.25)}
.button-light:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.text-link{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:650;min-height:44px;text-decoration:none;color:var(--purple);border-bottom:2px solid transparent;transition:border-color .2s}
.text-link:hover{border-bottom-color:var(--purple)}
.text-link>span[aria-hidden]{transition:transform .25s var(--ease-out)}
.text-link:hover>span[aria-hidden]{transform:translateX(4px)}
[data-tone="dark"] .text-link,[data-tone="purple"] .text-link{color:var(--yellow)}

/* ---------- segmented control + chips (skeleton components, kept for the styleguide) ---------- */
.seg-group{display:inline-flex;gap:4px;padding:4px;background:rgba(15,23,42,.08);border-radius:var(--radius-pill)}
.seg{min-height:40px;padding:0 18px;border-radius:var(--radius-pill);font-size:14px;font-weight:600;color:var(--ink);transition:background .25s,color .25s}
.seg:hover{background:rgba(255,255,255,.7)}
.seg[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 12px;border-radius:var(--radius-pill);font-size:14px;font-weight:600;background:var(--white);border:2px solid transparent;color:var(--ink);transition:background .25s,border-color .25s,color .25s}
.chip::before{content:"+";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--white);font-size:13px;font-weight:700;line-height:1;transition:transform .3s var(--ease-out),background .25s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.chip[aria-pressed="true"]::before{background:var(--yellow);color:var(--ink);transform:rotate(45deg)}

/* ---------- top bar ---------- */
.topbar{background:var(--purple);color:var(--white);font-size:13.5px;font-weight:550;--focus:var(--yellow)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;min-height:42px;padding-block:6px}
.topbar-facts{display:flex;flex-wrap:wrap;gap:6px 24px}
.topbar-facts li{display:inline-flex;align-items:center;gap:7px}
.topbar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;color:var(--yellow)}
.topbar-phone{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-weight:650;white-space:nowrap;padding:4px 0}
.topbar-phone:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid transparent;transition:box-shadow .3s,border-color .3s}
.site-header.is-scrolled{border-bottom-color:var(--line);box-shadow:0 8px 30px rgba(27,46,75,.08)}
.header-inner{min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px;transition:min-height .35s var(--ease-out)}
.site-header.is-compact .header-inner{min-height:64px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;position:relative;z-index:60}
.brand-mark{width:44px;height:44px;color:var(--accent);flex-shrink:0;transition:transform .35s var(--ease-out)}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}
.wordmark{font-family:var(--display);font-size:24px;letter-spacing:-.01em;font-weight:var(--display-weight);line-height:1;color:var(--ink)}
.wordmark em{font-style:normal;color:var(--pink)}
.wordmark-tag{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.01em;line-height:1.2;font-weight:600;margin-top:4px;color:var(--muted)}
.nav-list{display:flex;align-items:center;gap:4px}
.nav-list a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--radius-pill);font-size:15px;font-weight:600;text-decoration:none;transition:background .2s,color .2s}
.nav-list a:hover{background:var(--tone-lilac);color:var(--purple)}
.nav-footer{display:none}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;position:relative;z-index:60}
.menu-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 14px;border-radius:var(--radius-pill);font-size:14px;font-weight:600}
.menu-icon{display:grid;gap:5px;width:42px;height:42px;place-content:center;border-radius:50%;background:var(--purple);transition:background .2s}
.menu-icon i{display:block;background:var(--white);width:18px;height:2.5px;border-radius:2px;transition:transform .3s var(--ease-out),opacity .2s}
.menu-toggle[aria-expanded="true"] .menu-icon i:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-icon i:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ---------- hero: a cut-out child sitting in front of a purple hill ----------
   The child is a background-removed photo that ends partway down her legs. The cut-out is placed with her head at the
   top of the visual and sized so that its lowest fifth (where the photo's edge cuts the legs) falls below the section's
   bottom edge, which the wave and the next section cover: her legs run behind the white and no cut ever shows. The
   blob is a low dome behind her body that starts just under the chin. .hero-stage is a box the blob's width, clipped
   to the blob's footprint (vertical sides, the same rounded bottom corners, open at the top), so nothing pokes outside
   the purple. The image is sized by height and centred, so any cut-out drops in; keep its lowest visible point under
   the wave. */
.hero{position:relative;background:var(--tone-butter);overflow:clip;padding-top:clamp(24px,3.5vw,48px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px 48px;align-items:end}
.hero-copy{padding-bottom:calc(clamp(40px,4vw,56px) + var(--edge-h));align-self:center;animation:fade-up .8s .1s var(--ease-out) both}
.hero-title{font-family:var(--display);font-weight:var(--display-weight);font-size:clamp(2.8rem,1.3rem + 4.8vw,5.2rem);line-height:1;letter-spacing:-.03em;margin-top:22px;text-wrap:balance}
.hero-title .line{display:block}
.hero-title .is-pink{position:relative;display:inline-block;padding-bottom:.12em}
.title-underline{position:absolute;left:0;bottom:-.02em;width:100%;height:.2em;color:var(--yellow)}
.hero-description{font-size:clamp(16.5px,1.15vw,18.5px);line-height:1.65;color:var(--muted);max-width:540px;margin-top:22px;text-wrap:pretty}
.hero-description strong{color:var(--ink);font-weight:700}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;margin-top:30px}
.hero-perks{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:36px}
.hero-perks li{display:flex;align-items:center;gap:12px}
.perk-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--c,var(--purple));color:var(--white);flex-shrink:0;box-shadow:0 0 0 4px var(--white)}
.perk-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.perk-text{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.perk-text strong{font-size:14.5px;font-weight:700;color:var(--ink)}
.perk-text small{font-size:13px;color:var(--muted)}
.hero-visual{position:relative;width:min(100%,640px);aspect-ratio:1;margin-left:auto;align-self:end;z-index:1}
.hero-blob{position:absolute;inset:51% 2% 0 2%;background:linear-gradient(160deg,var(--purple) 0%,#7A52DF 55%,var(--sky) 140%);border-radius:50% 50% 24% 24%/64% 64% 22% 22%;animation:blob-in .9s var(--ease-out) both}
.hero-ring{position:absolute;right:-6%;top:-2%;width:19%;aspect-ratio:1;border:clamp(8px,1vw,12px) solid var(--yellow);border-radius:50%;animation:pop .6s .5s var(--ease-out) both;z-index:1}
/* Clip radii = the blob's bottom radii in this box: 24% of the same width; 22% of the blob's 49% height = 10.8% of the visual. */
.hero-stage{position:absolute;left:2%;right:2%;top:0;bottom:0;clip-path:inset(0 round 0 0 24% 24%/0 0 10.8% 10.8%)}
/* 128% tall: the photo's leg cut sits at 80% of its height, which puts it 2.4% of the visual below the bottom edge. */
.hero-kid{position:absolute;left:50%;top:0;height:128%;width:auto;max-width:none;translate:-50% 0;animation:rise-in 1s .25s var(--ease-out) both}
.hero-sticker{position:absolute;left:0;top:8%;display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(112px,11vw,140px);aspect-ratio:1;border-radius:50%;background:var(--yellow);color:var(--ink);text-align:center;transform:rotate(-10deg);box-shadow:0 12px 24px rgba(27,46,75,.16);border:4px solid var(--white);padding:10px;animation:pop .6s .8s var(--ease-out) both;z-index:2}
.hero-sticker strong{font-family:var(--display);font-weight:var(--display-weight);font-size:clamp(17px,1.4vw,21px);line-height:1;letter-spacing:-.01em}
.hero-sticker span{font-size:11.5px;font-weight:650;margin-top:5px;line-height:1.2}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes rise-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes blob-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes pop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
/* Hero doodles. The layer is the content shell plus a small bleed (not the viewport), so the drawings keep their
   place beside the copy and the photo at 1024 and at 2560 alike. Composition: a "sky" row along the top (sun, white
   cloud, rainbow, blue cloud, pink star, then the yellow ring) and a loose column in the gutter between the copy and
   the photo (orange star, heart, yellow sparkle, purple sparkle). Nothing sits in the side margins, where the blob
   would hide it, and nothing overlaps the photo, the sticker, or the copy. */
.hero .doodles{left:50%;right:auto;width:min(100%,calc(var(--shell) + 120px));translate:-50% 0}
.hero .doodle-sun{left:0;top:3%;width:clamp(40px,4.4vw,64px);height:clamp(40px,4.4vw,64px);color:var(--yellow);--float-dur:8s;--float-delay:-1s}
.hero .doodle-cloud-2{left:54%;top:4%;width:clamp(48px,5vw,72px);height:clamp(28px,2.9vw,42px);color:var(--white);--float-dur:10s;--float-delay:-4s}
.hero .doodle-rainbow{left:63%;top:2%;width:clamp(70px,8vw,116px);height:clamp(38px,4.3vw,63px);--float-dur:9s;--float-delay:-2s}
.hero .doodle-cloud-1{left:75%;top:3%;width:clamp(64px,7vw,100px);height:clamp(37px,4.1vw,59px);color:var(--sky);--float-dur:7.5s;--float-delay:-5.5s}
.hero .doodle-star-2{left:85.5%;top:5%;width:clamp(26px,2.8vw,38px);height:clamp(26px,2.8vw,38px);color:var(--pink);--float-dur:6.5s;--float-delay:-3s}
.hero .doodle-star-1{left:45.5%;top:12%;width:clamp(22px,2.4vw,32px);height:clamp(22px,2.4vw,32px);color:var(--orange);--float-dur:7s;--float-delay:-.5s}
.hero .doodle-heart{left:47.5%;top:32%;width:clamp(24px,2.6vw,36px);height:clamp(24px,2.6vw,36px);color:var(--pink);--float-dur:8.5s;--float-delay:-6s}
.hero .doodle-sparkle-2{left:49%;top:52%;width:clamp(20px,2.2vw,30px);height:clamp(20px,2.2vw,30px);color:var(--yellow);--float-dur:6s;--float-delay:-2.5s}
.hero .doodle-sparkle-1{left:46%;top:72%;width:clamp(18px,2vw,26px);height:clamp(18px,2vw,26px);color:var(--purple);--float-dur:9.5s;--float-delay:-7s}

/* ---------- why: five toy-block tiles ("what sets us apart") ----------
   --tile-ink switches the glyph to navy where white would fail 3:1 (yellow 1.55, sky 2.61; navy 8.82 / 5.24). */
.why-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:34px 26px;max-width:1120px;margin-inline:auto}
.why{flex:0 1 196px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0}
.why-tile{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:var(--radius-md);background:var(--shape,var(--accent));color:var(--tile-ink,var(--white));margin-bottom:14px;box-shadow:0 8px 0 color-mix(in srgb,var(--shape,var(--accent)) 55%,var(--white)),0 18px 36px color-mix(in srgb,var(--shape,var(--accent)) 22%,transparent);transition:transform .35s var(--ease-out)}
.why:hover .why-tile{transform:translateY(-5px) rotate(-3deg)}
.why-tile svg{width:52%;height:52%}
.why-title{font-family:var(--display);font-weight:var(--display-weight);font-size:clamp(1.15rem,1rem + .5vw,1.35rem);letter-spacing:calc(var(--display-tracking) * .7);line-height:1.15;text-wrap:balance}
.why p{font-size:14.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}
#why .doodle-squiggle-l{left:2%;top:18%;width:clamp(60px,7vw,110px);height:clamp(20px,2.33vw,37px);color:var(--green)}
#why .doodle-star-r{right:3%;top:14%;width:clamp(26px,3vw,44px);height:clamp(26px,3vw,44px);color:var(--yellow)}

/* ---------- about: a photo collage with a cloud sticker, three numbered cards ----------
   Collage: two tall tiles (a, c) and two stacked pairs of 4:3 tiles (b over e, d over f) on a 12-column grid. */
.collage{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;margin-top:8px;padding-inline:4px}
.collage-item{position:relative;margin:0;border-radius:var(--radius-lg);background:var(--white);padding:8px;box-shadow:0 16px 36px rgba(27,46,75,.12);transform:rotate(var(--tilt,0deg))}
.collage-item img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--radius-lg) - 8px)}
.collage-a{grid-column:1/4;grid-row:1/3;--tilt:-2deg}
.collage-b{grid-column:4/7;grid-row:1/2;aspect-ratio:4/3;--tilt:2deg}
.collage-e{grid-column:4/7;grid-row:2/3;aspect-ratio:4/3;--tilt:-1.5deg}
.collage-c{grid-column:7/10;grid-row:1/3;--tilt:1.5deg}
.collage-c img{object-position:50% 30%}
.collage-d{grid-column:10/13;grid-row:1/2;aspect-ratio:4/3;--tilt:-1.5deg}
.collage-f{grid-column:10/13;grid-row:2/3;aspect-ratio:4/3;--tilt:2deg}
.collage .doodle-collage-star{left:31%;top:-4%;width:clamp(26px,3vw,44px);height:clamp(26px,3vw,44px);color:var(--yellow);z-index:2}
.collage .doodle-collage-heart{right:23%;bottom:2%;width:clamp(26px,3vw,42px);height:clamp(26px,3vw,42px);color:var(--pink);z-index:2}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:52px}
.pillar{position:relative;background:var(--tint,var(--white));border-radius:var(--radius-lg);padding:30px 28px 28px;display:flex;flex-direction:column;gap:10px;border:2.5px solid color-mix(in srgb,var(--c,var(--purple)) 22%,var(--white));transition:transform .35s var(--ease-out),box-shadow .35s}
.pillar:hover{transform:translateY(-4px);box-shadow:0 22px 44px color-mix(in srgb,var(--c,var(--purple)) 18%,transparent)}
.pillar-num{position:absolute;top:22px;right:24px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--c,var(--purple));color:var(--tile-ink,var(--white));font-family:var(--display);font-weight:var(--display-weight);font-size:15px}
.pillar-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--white);color:var(--c,var(--purple));margin-bottom:8px;transform:rotate(-6deg);border:2.5px solid color-mix(in srgb,var(--c,var(--purple)) 30%,var(--white))}
.pillar-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pillar-title{font-family:var(--display);font-weight:var(--display-weight);font-size:clamp(1.3rem,1rem + 1vw,1.6rem);letter-spacing:calc(var(--display-tracking) * .7);line-height:1.1;padding-right:56px}
.pillar p{font-size:15.5px;line-height:1.55;color:var(--muted)}
.pillar strong{color:var(--ink);font-weight:700}
/* Meet Colia: a white card with a tilted portrait (or, until her photo arrives, a monogram tile) beside her biography. */
.bio{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px 56px;align-items:center;margin:8px 0 56px;padding:36px 44px 36px 36px;background:var(--white);border-radius:var(--radius-lg);border:2.5px solid color-mix(in srgb,var(--purple) 22%,var(--white));box-shadow:0 20px 50px rgba(27,46,75,.08)}
.bio-portrait{position:relative;margin:0;padding:18px 26px 8px 8px;width:min(100%,360px);justify-self:center}
.bio-portrait::before{content:"";position:absolute;inset:0 0 34px 18px;background:var(--tone-lilac);border-radius:var(--radius-lg);transform:rotate(4deg)}
.bio-frame{position:relative;display:block;aspect-ratio:4/5;background:var(--white);padding:10px;border-radius:var(--radius-lg);box-shadow:0 16px 36px rgba(27,46,75,.14);transform:rotate(-3deg)}
.bio-frame>*{width:100%;height:100%;border-radius:calc(var(--radius-lg) - 10px);object-fit:cover}
.bio-photo{display:block;object-position:50% 45%}
.bio-caption{position:relative;margin-top:16px;text-align:center;font-size:13.5px;font-weight:650;color:var(--muted)}
.bio-portrait .doodle-bio-sun{right:-4px;top:-10px;width:clamp(36px,3.6vw,50px);height:clamp(36px,3.6vw,50px);color:var(--yellow);--float-dur:8s;--float-delay:-3s}
.bio-portrait .doodle-bio-heart{left:-6px;bottom:38px;width:clamp(24px,2.6vw,34px);height:clamp(24px,2.6vw,34px);color:var(--pink);--float-dur:7s;--float-delay:-1s}
.bio-text{display:flex;flex-direction:column;gap:14px;min-width:0}
.bio-kicker{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--purple)}
.bio-title{font-family:var(--display);font-weight:var(--display-weight);font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);letter-spacing:calc(var(--display-tracking) * .7);line-height:1.08;text-wrap:balance;margin-bottom:4px}
.bio-text p:not(.bio-kicker){font-size:16px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.bio-text .text-link{align-self:flex-start;margin-top:2px}
#about .doodle-cloud-l{left:2%;top:10%;width:clamp(56px,6vw,90px);height:clamp(33px,3.5vw,53px);color:var(--sky)}
#about .doodle-heart-r{right:3%;top:8%;width:clamp(26px,3vw,44px);height:clamp(26px,3vw,44px);color:var(--pink)}
#about .doodle-star-bl{left:4%;bottom:12%;width:clamp(24px,2.6vw,38px);height:clamp(24px,2.6vw,38px);color:var(--orange)}

/* ---------- ages: four pastel program cards are the tabs; the photo panel below shows the selected age ----------
   Each card is the whole <button role="tab">; .age-card-cta is a styled span. --c is the age's color, --tint its pastel. */
.ages-layout{display:flex;flex-direction:column;gap:28px}
.age-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}
.age-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:30px 22px 26px;border-radius:var(--radius-lg);background:var(--tint,var(--white));border:2.5px solid color-mix(in srgb,var(--c,var(--purple)) 22%,var(--white));transition:border-color .25s,transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.age-card:hover{transform:translateY(-4px);border-color:var(--c,var(--purple))}
.age-card[aria-selected="true"]{border-color:var(--c,var(--purple));box-shadow:0 8px 0 color-mix(in srgb,var(--c,var(--purple)) 45%,var(--white)),0 22px 44px color-mix(in srgb,var(--c,var(--purple)) 18%,transparent)}
.age-icon{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:var(--c,var(--purple));color:var(--tile-ink,var(--white));margin-bottom:12px;box-shadow:0 0 0 6px var(--white);transition:transform .35s var(--ease-out)}
.age-card:hover .age-icon,.age-card[aria-selected="true"] .age-icon{transform:rotate(-8deg) scale(1.05)}
.age-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.age-card-name{font-family:var(--display);font-weight:var(--display-weight);font-size:clamp(1.35rem,1rem + 1vw,1.65rem);letter-spacing:calc(var(--display-tracking) * .7);line-height:1.1;color:var(--ink)}
.age-card-range{font-size:14px;font-weight:650;color:var(--muted)}
.age-card-blurb{font-size:14.5px;line-height:1.5;color:var(--muted);margin:6px 0 18px;text-wrap:pretty}
.age-card-cta{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px;margin-top:auto;border-radius:var(--radius-pill);border:2px solid var(--ink);background:var(--white);font-size:14px;font-weight:650;color:var(--ink);transition:background .25s,color .25s}
.age-card-cta>span{transition:transform .25s var(--ease-out)}
.age-card:hover .age-card-cta>span{transform:translateX(4px)}
.age-card[aria-selected="true"] .age-card-cta{background:var(--ink);color:var(--white)}
.age-panels{position:relative}
/* A panel that starts with .age-photo gets the photo + text layout on desktop; without one (or on smaller screens) it
   stacks. The :has() rules live in a min-width query because their specificity would otherwise beat the phone overrides. */
.age-panel{display:grid;grid-template-columns:1fr;gap:28px 48px;align-items:center;background:var(--white);border:2.5px solid color-mix(in srgb,var(--c,var(--purple)) 30%,var(--white));border-radius:var(--radius-lg);padding:36px 40px;box-shadow:0 20px 50px rgba(27,46,75,.08)}
@media(min-width:1024px){
  .age-panel:has(.age-photo){grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);padding:28px 32px 28px 28px}
  .age-panel:has(.age-photo) .capability-list{grid-template-columns:1fr;gap:8px}
}
.age-panel[hidden]{display:none}
.age-photo{aspect-ratio:4/3;border-radius:var(--radius-md);overflow:hidden;background:var(--tint,var(--white));box-shadow:0 0 0 8px var(--tint,var(--white));margin:8px;animation:panel-in .45s var(--ease-out) both}
.age-photo img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-md)}
.age-panel-text{display:flex;flex-direction:column;gap:14px;min-width:0}
.age-panel-title{font-family:var(--display);font-weight:var(--display-weight);font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);letter-spacing:calc(var(--display-tracking) * .7);line-height:1.05}
.age-panel p{font-size:16px;line-height:1.6;color:var(--muted);max-width:64ch}
.age-panel .capability-list{grid-template-columns:repeat(2,minmax(0,1fr));margin:2px 0 0;padding:0;gap:8px 32px}
.age-panel .capability-list li::before{background:var(--c,var(--yellow))}
.age-panel .text-link{margin-top:2px;align-self:flex-start}
@keyframes panel-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#ages .doodle-plane-r{right:3%;top:9%;width:clamp(44px,5vw,72px);height:clamp(44px,5vw,72px);color:var(--sky)}
#ages .doodle-squiggle-r{right:6%;bottom:16%;width:clamp(60px,7vw,110px);height:clamp(20px,2.33vw,37px);color:var(--pink)}
#ages .doodle-sparkle-l{left:3%;top:20%;width:clamp(24px,2.8vw,40px);height:clamp(24px,2.8vw,40px);color:var(--yellow)}

/* ---------- value cards ("every day here") ---------- */
.value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.value{background:var(--tint,var(--white));border-radius:var(--radius-lg);padding:28px 26px 26px;display:flex;flex-direction:column;gap:10px;border:2.5px solid color-mix(in srgb,var(--c,var(--purple)) 22%,var(--white));transition:transform .35s var(--ease-out),box-shadow .35s}
.value:hover{transform:translateY(-4px);box-shadow:0 22px 44px color-mix(in srgb,var(--c,var(--purple)) 18%,transparent)}
.value-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:var(--c,var(--purple));color:var(--tile-ink,var(--white));margin-bottom:6px;transform:rotate(-6deg);box-shadow:0 0 0 4px var(--white)}
.value-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.value-title{font-family:var(--display);font-weight:var(--display-weight);font-size:clamp(1.3rem,1rem + 1vw,1.6rem);letter-spacing:calc(var(--display-tracking) * .7);line-height:1.1}
.value p{font-size:15.5px;line-height:1.55;color:var(--muted)}
#every-day .doodle-sun-r{right:3%;top:8%;width:clamp(48px,5.5vw,84px);height:clamp(48px,5.5vw,84px);color:var(--yellow)}
#every-day .doodle-cloud-bl{left:2%;bottom:8%;width:clamp(56px,6vw,90px);height:clamp(33px,3.5vw,53px);color:var(--white)}
#every-day .doodle-dots-l{left:3%;top:14%;width:clamp(40px,4.5vw,64px);height:clamp(15px,1.7vw,24px);color:var(--pink)}

/* ---------- choice pills (real radios; the label is the visible control) ---------- */
fieldset.choice-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0;min-width:0}
.choice-group legend{padding:0;margin-bottom:8px}
.choice{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--radius-pill);border:2px solid var(--line);font-size:14.5px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.choice:hover{border-color:var(--purple)}
.choice:has(input:checked){background:var(--purple);border-color:var(--purple);color:var(--white)}
.choice:has(input:focus-visible){outline:3px solid var(--focus,var(--accent));outline-offset:3px}
.choice-group .field-error{flex-basis:100%}

/* ---------- accordion rows + capability list (skeleton components; the list is used by the age panels) ---------- */
.service-list{border-top:2px solid var(--ink)}
.service{border-bottom:1px solid var(--line);transition:background .3s}
.service.is-open{background:var(--white)}
.service-summary{display:grid;grid-template-columns:1fr 56px;align-items:center;gap:32px;width:100%;padding:28px 0;position:relative}
.service-text{display:flex;flex-direction:column;gap:10px;min-width:0}
.service-kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:650;color:var(--accent);margin-bottom:2px}
.service-title{font-family:var(--display);font-weight:var(--display-weight);letter-spacing:calc(var(--display-tracking) * .7);font-size:clamp(1.6rem,1rem + 1.9vw,2.6rem);line-height:1.05}
.service-blurb{font-size:17px;line-height:1.55;color:var(--muted);max-width:640px}
.service-toggle{position:relative;width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);justify-self:end}
.service-toggle i{position:absolute;left:50%;top:50%;width:16px;height:2px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .35s var(--ease-out)}
.service-toggle i:last-child{transform:translate(-50%,-50%) rotate(90deg)}
.service.is-open .service-toggle{background:var(--accent);border-color:var(--accent);transform:rotate(45deg)}
.service.is-open .service-toggle i{background:var(--on-accent)}
.service-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out)}
.service-detail.is-visible{grid-template-rows:1fr}
.service-detail-inner{overflow:hidden;min-height:0}
.service-detail .capability-list,.service-detail .service-cta{opacity:0;transform:translateY(8px);transition:opacity .4s .1s,transform .45s .1s var(--ease-out)}
.service-detail.is-visible .capability-list,.service-detail.is-visible .service-cta{opacity:1;transform:none}
html:not(.js) .service-detail{display:block!important;grid-template-rows:1fr}
.capability-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px;margin:0 0 0 20px;padding-right:80px}
.capability-list li{position:relative;padding-left:26px;font-size:16px;line-height:1.5}
.capability-list li::before{content:"";position:absolute;left:0;top:8px;width:13px;height:13px;background:var(--yellow);border-radius:50%}
.service-cta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 32px;margin:26px 80px 34px 20px;padding-top:22px;border-top:1px solid var(--line)}
.service-cta p{font-size:15px;color:var(--muted)}

/* ---------- card grid (packages) + comparison table (skeleton components, kept for the styleguide) ---------- */
.packages-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:48px}
.packages-head .section-head{margin-bottom:0}
.package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.package{display:flex;flex-direction:column;background:var(--white);color:var(--ink);border-radius:var(--radius-lg);padding:34px 30px 30px;position:relative;overflow:hidden;transition:transform .35s var(--ease-out),box-shadow .35s}
.package::before{content:"";position:absolute;left:0;top:0;width:100%;height:6px;background:var(--accent)}
.package:nth-child(2)::before{background:var(--yellow)}
.package:nth-child(3)::before{background:linear-gradient(90deg,var(--accent),var(--yellow))}
.package:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(15,23,42,.14)}
.package-audience{font-size:13.5px;color:var(--muted);line-height:1.45;min-height:40px}
.package-name{font-family:var(--display);font-weight:var(--display-weight);letter-spacing:calc(var(--display-tracking) * .7);font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem);line-height:1.05;margin-top:12px}
.package-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin-top:18px;font-family:var(--display);font-weight:var(--display-weight);font-size:clamp(2.2rem,1.8rem + 1.6vw,3.2rem);letter-spacing:-.04em;line-height:1}
.package-price-note{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;color:var(--muted)}
.package-list{margin:22px 0 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.package-list li{position:relative;padding-left:24px;font-size:15px;line-height:1.5}
.package-list li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:11px;background:var(--yellow);border-radius:50%}
.package-cta{width:100%}
.view-panel{animation:view-in .4s var(--ease-out)}
@keyframes view-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-md);background:var(--white);color:var(--ink);border:1px solid var(--line);box-shadow:0 20px 50px rgba(15,23,42,.08)}
.compare{width:100%;border-collapse:separate;border-spacing:0;min-width:720px;font-size:15px}
.compare th,.compare td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.45}
.compare thead th{font-family:var(--display);font-weight:var(--display-weight);font-size:18px;letter-spacing:-.02em;padding-top:22px;padding-bottom:16px;background:var(--surface);position:sticky;top:0}
.compare thead th:first-child{font-family:var(--sans);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:650;color:var(--muted);vertical-align:bottom;position:sticky;left:0;z-index:2}
.compare-price{display:block;font-size:14px;font-weight:600;letter-spacing:0;color:var(--accent);font-family:var(--sans);margin-top:4px}
.compare tbody th{font-weight:650;color:var(--ink);width:30%;background:var(--white);position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--line)}
.compare tbody td{color:var(--muted)}
.compare tbody tr:hover td{background:var(--surface)}
.compare tfoot td{border-bottom:0;padding:18px;background:var(--surface)}

/* ---------- purple band ---------- */
.band{position:relative;overflow:clip}
.band-inner{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;padding-block:44px;position:relative;z-index:1}
.band-title{font-family:var(--display);font-weight:var(--display-weight);letter-spacing:calc(var(--display-tracking) * .7);font-size:clamp(1.6rem,1.1rem + 1.8vw,2.4rem);line-height:1.05}
.band-text{font-size:15.5px;line-height:1.6;margin-top:8px;max-width:560px;opacity:.92}
.band .doodle-band-plane{right:24%;top:14%;width:clamp(40px,4.5vw,66px);height:clamp(40px,4.5vw,66px);color:var(--yellow);opacity:.9}
.band .doodle-band-star{left:2%;bottom:14%;width:clamp(22px,2.6vw,38px);height:clamp(22px,2.6vw,38px);color:var(--yellow);opacity:.9}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field-label{font-size:14px;font-weight:650;line-height:1.4;display:block}
.field-label small{font-weight:500;color:var(--muted);margin-left:6px}
.field-label b{color:var(--pink);font-weight:700}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:2px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;min-height:48px;width:100%;transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:96px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px color-mix(in srgb,var(--purple) 25%,transparent)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--danger)}
.field-error{font-size:13px;color:var(--danger);font-weight:500}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.turnstile-slot:empty{display:none}
.form-note{font-size:13.5px;color:var(--muted);line-height:1.55}
.form-note a{color:var(--purple)}
.form-submit{display:flex;flex-direction:column;gap:12px}
.form-status{font-size:15px;line-height:1.55;font-weight:500}
.form-status.is-error{color:var(--danger)}
.form-status.is-success{color:var(--success)}
.form-status a{color:var(--purple)}
.contact-form.is-sent .form-submit .button{display:none}

/* ---------- tour / contact ---------- */
.contact-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.contact-methods{margin-top:32px;display:flex;flex-direction:column;gap:14px}
.contact-methods li{display:flex;flex-direction:column;gap:2px;font-size:15.5px;line-height:1.5}
.contact-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--purple)}
.contact-methods a{text-decoration:none;font-family:var(--display);font-weight:var(--display-weight);font-size:22px;letter-spacing:-.01em;color:var(--ink);width:fit-content}
.contact-methods a:hover{color:var(--pink)}
.next-steps{margin:32px 0 0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:15px}
.next-steps li::marker{color:var(--pink);font-weight:700}
.contact-form{background:var(--white);color:var(--ink);border-radius:var(--radius-lg);padding:34px 36px;display:flex;flex-direction:column;gap:18px;--focus:var(--purple);border:2.5px solid color-mix(in srgb,var(--purple) 22%,var(--white));box-shadow:0 24px 56px rgba(94,53,177,.12)}
#tour .doodle-tour-star{left:3%;bottom:22%;width:clamp(26px,3vw,44px);height:clamp(26px,3vw,44px);color:var(--pink)}
#tour .doodle-tour-squiggle{right:3%;top:8%;width:clamp(60px,7vw,110px);height:clamp(20px,2.33vw,37px);color:var(--yellow)}

/* ---------- footer (green; the hills are the last child of the tour section) ---------- */
.site-footer{position:relative;background:var(--green-deep);color:#F1FAF4;font-size:14.5px;--focus:var(--yellow);overflow:clip}
.site-footer>.container{position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding:48px 0 40px}
.footer-brand .brand{color:var(--white)}
.footer-brand .brand-mark{color:var(--yellow)}
.footer-brand .wordmark{color:var(--white)}
.footer-brand .wordmark em{color:var(--yellow)}
.footer-brand .wordmark-tag{color:#F1FAF4}
.footer-brand p{margin-top:18px;max-width:340px;line-height:1.6}
.footer-heading{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--yellow);margin-bottom:12px}
.footer-col{display:flex;flex-direction:column;gap:6px;line-height:1.6}
.footer-col a{text-decoration:none;color:var(--white);padding:2px 0;width:fit-content}
.footer-col a:hover{color:var(--yellow)}
.footer-legal{display:flex;justify-content:space-between;gap:16px;padding:20px 0 28px;border-top:1px solid rgba(255,255,255,.25);font-size:13px}
.site-footer .doodle-footer-sun{right:4%;top:14%;width:clamp(44px,5vw,72px);height:clamp(44px,5vw,72px);color:var(--yellow);opacity:.9}
.site-footer .doodle-footer-cloud{left:56%;top:8%;width:clamp(56px,6vw,90px);height:clamp(33px,3.5vw,53px);color:rgba(255,255,255,.55)}

/* ---------- secondary pages ---------- */
.notfound{max-width:760px;padding-block:clamp(72px,10vw,140px)}
.notfound-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.notfound-help{margin-top:28px;font-size:15px;color:var(--muted)}
.notfound-help a{color:var(--purple)}

/* ---------- reveals (JS adds .in-view when scrolled into view) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .8s var(--ease-out)}
.js [data-reveal].in-view{opacity:1;transform:none}
.js .value[data-reveal]:nth-child(3n+2),.js .pillar[data-reveal]:nth-child(2){transition-delay:.08s}
.js .value[data-reveal]:nth-child(3n),.js .pillar[data-reveal]:nth-child(3){transition-delay:.16s}

/* ---------- responsive ---------- */
@media(max-width:1279px){
  .container{width:calc(100% - 64px)}
  .capability-list{padding-right:32px}
  .service-cta{margin-right:32px}
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr}
  .hero-grid{gap:24px 32px}
  /* Narrow desktop: the copy fills its column, so the sun moves right of the eyebrow pill and the heart and purple
     sparkle move into the open band above the blob instead of the gutter. */
  .hero .doodle-sun{left:40%}
  .hero .doodle-heart{left:60%;top:22%}
  .hero .doodle-sparkle-1{left:70%;top:26%}
}
@media(max-width:1023px){
  .topbar-facts li:not(:first-child){display:none}
  .hero{padding-top:32px}
  .hero-grid{grid-template-columns:1fr;gap:8px}
  .hero-copy{padding-bottom:12px;animation:none;opacity:1;transform:none}
  .hero-title{font-size:clamp(2.6rem,1.4rem + 5.6vw,4.2rem)}
  .hero-description{max-width:600px}
  .hero-visual{width:min(100%,520px);margin-inline:auto;margin-top:16px}
  .hero .doodles{left:0;right:0;width:auto;translate:none}
  .hero .doodle-star-1,.hero .doodle-heart,.hero .doodle-sparkle-1,.hero .doodle-rainbow{display:none}
  .hero .doodle-sun{left:auto;right:3%;top:1.5%;width:42px;height:42px}
  .hero .doodle-cloud-1{left:auto;right:12%;top:3%}
  .hero .doodle-cloud-2{left:auto;right:22%;top:2.5%}
  .hero .doodle-star-2{left:auto;right:5%;top:58%}
  .hero .doodle-sparkle-2{left:6%;top:56%}
  .section-head{margin-bottom:40px}
  .collage{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .collage-a,.collage-b,.collage-c,.collage-d,.collage-e,.collage-f{grid-column:auto;grid-row:auto;aspect-ratio:1}
  .collage .doodle-collage-star{left:46%;top:44%}
  .collage .doodle-collage-heart{right:4%;top:46%;bottom:auto}
  .bio{grid-template-columns:1fr;gap:28px;padding:28px 24px;margin-bottom:44px}
  .bio-portrait{width:min(100%,300px)}
  .pillars{grid-template-columns:1fr;gap:14px;margin-top:40px;max-width:560px;margin-inline:auto}
  .age-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .age-card{padding:24px 18px 22px}
  .age-card:hover{transform:none}
  .age-panel{grid-template-columns:1fr;gap:22px;padding:20px}
  .value-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .nav-list{display:none}
  .menu-toggle:not([hidden]){display:inline-flex}
  .header-cta{display:none}
  .js .primary-navigation{position:fixed;inset:0;background:var(--purple);color:var(--white);z-index:50;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--header-h) + 24px) 32px 40px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .35s var(--ease-soft),transform .4s var(--ease-out),visibility 0s .4s;--focus:var(--yellow)}
  .js .primary-navigation.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease-soft),transform .4s var(--ease-out),visibility 0s}
  .js .primary-navigation .nav-list{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  .js .primary-navigation .nav-list a{font-family:var(--display);font-weight:var(--display-weight);font-size:clamp(2.4rem,9vw,3.6rem);letter-spacing:-.03em;line-height:1;min-height:0;padding:10px 0;border-radius:0;color:var(--white);transform:translateY(12px);opacity:0;transition:transform .5s var(--ease-out),opacity .4s,color .2s}
  .js .primary-navigation.is-open .nav-list a{transform:none;opacity:1}
  .js .primary-navigation.is-open .nav-list li:nth-child(2) a{transition-delay:.05s}
  .js .primary-navigation.is-open .nav-list li:nth-child(3) a{transition-delay:.1s}
  .js .primary-navigation.is-open .nav-list li:nth-child(4) a{transition-delay:.15s}
  .js .primary-navigation.is-open .nav-list li:nth-child(5) a{transition-delay:.2s}
  .js .primary-navigation .nav-list a:hover{background:none;color:var(--yellow)}
  .js .primary-navigation .nav-footer{display:flex;flex-direction:column;gap:6px;margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.3);font-size:16px}
  .js .primary-navigation .nav-footer a{text-decoration:none;padding-block:6px;color:var(--ink-soft)}
  .js .primary-navigation .nav-footer a:hover{color:var(--yellow)}
  body.menu-open .site-header{background:var(--purple);color:var(--white);border-bottom-color:transparent;box-shadow:none}
  body.menu-open .wordmark,body.menu-open .wordmark em{color:var(--white)}
  body.menu-open .wordmark-tag{color:var(--ink-soft)}
  body.menu-open .brand-mark{color:var(--yellow)}
  body.menu-open .menu-icon{background:var(--white)}
  body.menu-open .menu-icon i{background:var(--purple)}
  body.menu-open{overflow:hidden}
  .service-summary{grid-template-columns:1fr 44px;gap:16px;padding:24px 0}
  .capability-list{grid-template-columns:1fr;padding-right:0;gap:10px}
  .service-cta{margin-right:0}
  .packages-head{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:32px}
  .package-grid{grid-template-columns:1fr;gap:16px;max-width:560px}
  .contact-layout{grid-template-columns:1fr;gap:36px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;padding:40px 0 32px}
  .site-footer .doodle-footer-cloud{display:none}
}
@media(max-width:599px){
  :root{--header-h:68px;--edge-h:36px}
  .container{width:calc(100% - 40px)}
  .topbar{font-size:13px}
  .topbar-inner{justify-content:center;flex-wrap:wrap;gap:4px 16px}
  .brand-mark{width:38px;height:38px}
  .wordmark{font-size:20px}
  .wordmark-tag{font-size:10.5px}
  /* Keep the label for assistive tech (the icon is aria-hidden); only hide it visually. */
  .menu-toggle .menu-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .menu-toggle{padding:0}
  .hero{padding-top:46px}
  .hero .doodle-sun{right:5%;top:4px;width:34px;height:34px}
  .hero-title{font-size:clamp(2.3rem,1rem + 8.5vw,3.2rem);margin-top:18px}
  .hero-description{font-size:16px;margin-top:16px}
  .hero-actions{margin-top:22px;gap:10px}
  .hero-actions .button{width:100%;min-height:56px}
  .hero-perks{gap:12px;margin-top:26px;flex-direction:column}
  .hero-visual{margin-top:12px}
  .hero-sticker{width:92px;left:-6px;top:6%}
  .hero-sticker strong{font-size:16px}
  .hero-sticker span{font-size:10.5px}
  .hero .doodle-cloud-1,.hero .doodle-cloud-2,.hero .doodle-sparkle-2,.hero .doodle-star-2{display:none}
  .hero .eyebrow{min-height:0;padding-block:7px;line-height:1.35;text-align:left;font-size:11px;letter-spacing:.08em}
  .section{padding-block:56px}
  .section-tight{padding-block:48px}
  .has-edge{padding-bottom:calc(56px + var(--edge-h))}
  .has-edge-tall{padding-bottom:calc(56px + var(--edge-h) + 12px)}
  .section-title{margin-top:14px}
  .section-lede{font-size:16px;margin-top:16px}
  .eyebrow{font-size:11.5px;min-height:32px}
  /* Phones: each why tile becomes a row (tile left, statement right); age cards drop their blurb and pill so all four sit right above the panel. */
  .why-grid{gap:12px}
  .why{flex:1 1 100%;display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:16px;row-gap:3px;align-items:center;text-align:left}
  .why-tile{grid-row:1/3;width:72px;margin:0;border-radius:var(--radius-sm);box-shadow:0 5px 0 color-mix(in srgb,var(--shape,var(--accent)) 55%,var(--white))}
  .why-tile svg{width:48%;height:48%}
  .why-title{font-size:1.1rem;align-self:end}
  .why p{font-size:14px;align-self:start}
  #why .doodle-squiggle-l,#why .doodle-star-r{display:none}
  .bio{padding:22px 16px 24px;border-radius:var(--radius-md);margin-bottom:36px}
  .bio-portrait{width:min(100%,240px);padding:14px 20px 6px 6px}
  .bio-frame{padding:8px}
  .bio-portrait .doodle-bio-sun,.bio-portrait .doodle-bio-heart{display:none}
  .collage{gap:10px;padding-inline:0}
  .collage-item{padding:6px;border-radius:var(--radius-md)}
  .collage-item img{border-radius:calc(var(--radius-md) - 6px)}
  .collage .doodle-collage-star,.collage .doodle-collage-heart{display:none}
  #about .doodles,#ages .doodles,#every-day .doodles,#tour .doodles{display:none}
  .pillar{padding:24px 22px 22px}
  .pillar-num{top:18px;right:18px;width:38px;height:38px;font-size:13px}
  .age-cards{gap:10px}
  .age-card{padding:18px 10px 16px;gap:3px;border-radius:var(--radius-md)}
  .age-icon{width:52px;height:52px;margin-bottom:6px;box-shadow:0 0 0 4px var(--white)}
  .age-icon svg{width:26px;height:26px}
  .age-card-name{font-size:1.2rem}
  .age-card-range{font-size:13px}
  .age-card-blurb,.age-card-cta{display:none}
  .age-card[aria-selected="true"]{box-shadow:0 5px 0 color-mix(in srgb,var(--c,var(--purple)) 45%,var(--white))}
  .age-panel{padding:20px 18px 22px;gap:18px;border-radius:var(--radius-md)}
  .age-panel .capability-list{grid-template-columns:1fr}
  .age-photo{margin:4px;box-shadow:0 0 0 4px var(--tint,var(--white));border-radius:var(--radius-sm)}
  .age-photo img{border-radius:var(--radius-sm)}
  .value-grid{grid-template-columns:1fr;gap:12px}
  .value{padding:22px 20px 20px}
  .band-inner{padding-block:36px}
  .band-inner .button{width:100%}
  .band .doodle-band-plane{right:6%;top:8%}
  .field-grid{grid-template-columns:1fr}
  .contact-form{padding:24px 18px;border-radius:var(--radius-md)}
  .contact-methods a{font-size:19px}
  .form-submit .button{width:100%}
  .footer-grid{grid-template-columns:1fr;gap:24px;padding:36px 0 28px}
  .footer-legal{flex-direction:column;gap:4px}
  .site-footer .doodle-footer-sun{right:5%;top:5%;width:40px;height:40px}
  .seg{padding:0 14px;font-size:13px}
  .compare{min-width:600px;font-size:14px}
  .compare th,.compare td{padding:12px 12px}
  .service-summary{grid-template-columns:1fr 40px;gap:12px 14px;padding:20px 0}
  .capability-list{margin-left:14px}
  .capability-list li{font-size:15px}
}
@media(max-width:379px){
  .hero-title{font-size:2.2rem}
  .age-card-name{font-size:1.1rem}
}

/* ---------- reduced motion ----------
   Do NOT shorten animations to ~0ms: a near-zero keyframe never reaches its end
   state and a hero animated from opacity:0 renders blank. Remove the animation
   and pin every animated element to its final values instead. Verify with
   Chrome's --force-prefers-reduced-motion (see LAUNCH-CHECKLIST.md). */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-copy,.hero-kid,.hero-blob,.age-photo,.view-panel{opacity:1;transform:none}
  .hero-ring,.hero-sticker{opacity:1;scale:1}
  .hero-sticker{transform:rotate(-10deg)}
  .doodle{transform:none}
  .js [data-reveal]{opacity:1;transform:none}
  .service-detail .capability-list,.service-detail .service-cta{opacity:1;transform:none}
  .js .primary-navigation .nav-list a{transform:none;opacity:1}
}