/* tokens.css */
/* Bufi Preschool — design tokens. Source of truth: docs/brand.md */
:root {
  /* brand core (from logo/mascot) */
  --bufi-blue: #004878;
  --bufi-blue-deep: #003048;
  --bufi-teal: #006090;
  --bufi-red: #c01818;
  --bufi-yellow: #f0c000;
  --bufi-royal: #183881;   /* nav / subhead blue from the current site */
  --bufi-pink: #d89ab8;    /* current display accent — large sizes / fills only */

  /* pastel tiles */
  --tile-yellow: #fbe9a6;
  --tile-periwinkle: #b0c9fe;
  --tile-sky: #c0e3f7;
  --tile-pink: #f2a5ca;
  --tile-salmon: #f4c5c0;
  --tile-lavender: #dfd2fd;
  --tile-peach: #fdeee0;

  /* surfaces + text */
  --bg: #ffffff;
  --bg-ice: #eef4fc;
  --bg-cream: #fff9f5;
  --fg: #102e52;
  --fg-muted: #4a5a73;
  --frame: var(--bufi-blue-deep);

  /* type */
  --font-display: "Burbank Big Condensed", "Lilita One", system-ui, sans-serif;
  --font-display-wide: "Burbank Big", "Lilita One", system-ui, sans-serif;
  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--1: clamp(0.83rem, 0.8rem + 0.2vw, 0.9rem);
  --step-0: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --step-3: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --step-4: clamp(3.25rem, 2rem + 6vw, 7rem);

  /* space + shape */
  --gutter: 1rem;
  --space-s: 0.75rem; --space-m: 1.5rem; --space-l: 3rem; --space-xl: 6rem;
  --radius-s: 0.75rem; --radius-m: 1.25rem; --radius-l: 2rem; --radius-pill: 999px;
  --frame-inset: 0.75rem;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms; --dur-base: 400ms; --dur-slow: 900ms;
}
@media (min-width: 768px) { :root { --gutter: 2rem; --frame-inset: 1.25rem; } }
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}

/* fonts.css */
/* Self-hosted brand fonts — Latin subsets (*-latin.woff2, built with pyftsubset; covers EN + ES).
   Full fonts stay in /assets/brand/fonts as .ttf/.woff2 for reference. See docs/brand.md. */
@font-face { font-family: "Burbank Big Condensed"; font-weight: 900; font-display: swap;
  src: url("/assets/brand/fonts/20e381_8652d6125a614e7d99fb584493fb1dcb-latin.woff2") format("woff2"); }
@font-face { font-family: "Burbank Big"; font-weight: 700; font-display: swap;
  src: url("/assets/brand/fonts/83c2d6_d0cc74ba889b415cb4e77a57067c66a7-latin.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-display: swap;
  src: url("/assets/brand/fonts/79ea19_1ec267f5aeda4136b9357c6a396ac7b2-latin.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-display: swap;
  src: url("/assets/brand/fonts/79ea19_8576587d4a5a4b99915dfd3919d8c335-latin.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 900; font-display: swap;
  src: url("/assets/brand/fonts/79ea19_951283dac3964b8497e3613db2c5b2ba-latin.woff2") format("woff2"); }

/* base.css */
/* Bufi Preschool — base: reset, typography, buttons, utilities */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg-ice);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
:where(ul[class], ol[class], nav ul) { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.15em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--bufi-yellow); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

/* display type */
.display { font-family: var(--font-display); font-weight: 900; line-height: 0.92; letter-spacing: 0.005em; text-wrap: balance; }

/* buttons: one primary (yellow), one quiet (outline) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 44px; padding: 0.7em 1.4em;
  border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 700; font-size: var(--step-0); line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--bufi-yellow); color: var(--bufi-blue-deep); }
.btn--primary:hover { background: #f7cc1a; }
.btn--primary:active { transform: scale(0.97); }
.btn--large { font-size: var(--step-1); padding: 0.8em 1.6em; }
.btn--small { min-height: 44px; padding: 0.5em 1.1em; font-size: var(--step--1); }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  padding: 0.6em 1em; border-radius: var(--radius-s);
  background: var(--bufi-blue-deep); color: #fff; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--gutter); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* site.css */
/* Bufi Preschool — sections. Order: header → hero → (more to come) */

/* ---------- header: sits in the ice margin above the framed hero ---------- */
:root { --header-h: 64px; }
@media (min-width: 768px) { :root { --header-h: 80px; } }

.site-header {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-m);
  height: var(--header-h); padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--bg-ice) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { height: 36px; width: auto; }
@media (min-width: 480px) { .brand img { height: 40px; } }
@media (min-width: 768px) { .brand img { height: 48px; } }

.site-nav { display: none; }
.site-nav ul { display: flex; gap: clamp(1rem, 2.5vw, 2.25rem); justify-content: center; }
.site-nav a {
  display: inline-block; padding: 0.5em 0.1em; min-height: 44px; line-height: 1.6;
  font-weight: 700; color: var(--bufi-royal); text-decoration: none;
  background: linear-gradient(var(--bufi-yellow), var(--bufi-yellow)) no-repeat 0 100% / 0 3px;
  transition: background-size var(--dur-base) var(--ease-out);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { background-size: 100% 3px; }

.site-header__actions { display: flex; align-items: center; gap: 0.5rem; justify-self: end; }
.lang-switch {
  display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  font-weight: 900; font-size: var(--step--1); letter-spacing: 0.04em; color: var(--bufi-royal); text-decoration: none;
  border: 2px solid color-mix(in srgb, var(--bufi-royal) 25%, transparent); border-radius: var(--radius-pill);
}
.lang-switch:hover { border-color: var(--bufi-royal); }
.site-header__actions .btn { display: inline-flex; }

.menu-toggle { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 44px; min-height: 44px; padding: 0 0.25rem; font-weight: 700; color: var(--bufi-royal); }
@media (max-width: 479px) { .menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.menu-toggle__bars { position: relative; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: background var(--dur-fast); }
.menu-toggle__bars::before, .menu-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out);
}
.menu-toggle__bars::before { transform: translateY(-7px); }
.menu-toggle__bars::after { transform: translateY(7px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: rotate(-45deg); }

@media (min-width: 900px) {
  .site-nav { display: block; }
  .lang-switch { display: inline-flex; }
  .site-header__actions .btn { display: inline-flex; }
  .menu-toggle { display: none; }
}

/* ---------- mobile drawer: navy panel with big links (Garoa menu-overlay pattern) ---------- */
.drawer {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 40;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--space-l) var(--gutter) var(--space-l);
  background: var(--bufi-blue-deep); color: #fff;
  transform: translateY(-4%); opacity: 0;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.drawer.is-open { transform: none; opacity: 1; }
.drawer nav { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.drawer__links a {
  display: block; padding: 0.35em 0;
  font-family: var(--font-display); font-weight: 900; font-size: clamp(2.75rem, 11vw, 4.5rem); line-height: 1; color: #fff; text-decoration: none;
}
.drawer__links a:hover { color: var(--bufi-yellow); }
.drawer__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); }
.drawer__lang { font-weight: 700; color: #fff; text-decoration-color: var(--bufi-yellow); text-decoration-thickness: 2px; }
body.drawer-open { overflow: hidden; }

/* ---------- hero: full-bleed photo in a rounded inset frame, owl breaking the corner ---------- */
.hero {
  position: relative; overflow-x: clip; /* the owl may poke out of the frame but never past the viewport */
  padding: 0 var(--frame-inset) var(--frame-inset);
  /* the frame fills the first viewport minus the header band */
  --hero-h: calc(100svh - var(--header-h) - var(--frame-inset));
}
.hero__frame {
  position: relative; overflow: hidden; isolation: isolate;
  height: var(--hero-h); min-height: 520px; max-height: 1000px;
  border-radius: var(--radius-l);
  background: var(--bufi-blue-deep);
}
.hero__photo, .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__photo img { object-fit: cover; object-position: 60% 40%; }
/* display:none until main.js reveals it (on first interaction, or its fallback timeout) — kept fully out of the
   render tree so it never occludes the still underneath and is never itself an LCP candidate. Its poster is
   frame 0 of this same clip, pixel-identical to the still, so once shown there's no crossfade needed: playback
   just continues from the exact frame the still left off on. The still is the permanent fallback (reduced
   motion, Save-Data, autoplay blocked, video fails). */
.hero__video { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero__video.is-visible { display: block; }
/* mobile only: the source is a 16:9 landscape clip, and `cover` filling the whole (much taller) phone frame
   crops off most of it. Instead of centering it letterboxed (empty bars top and bottom), size the media to its
   own native aspect ratio at full width and pin it to the top of the frame — zero cropping AND zero wasted
   space, since the box now matches the content exactly. The frame's own navy fills the rest below it, which is
   already what the text sits on via the scrim, so it reads as one deliberate layout, not a shrunken video in a
   box. Desktop (768px+) keeps the original full-bleed cover crop, untouched. */
@media (max-width: 767px) {
  .hero__photo, .hero__video { inset: auto; top: 0; left: 0; right: 0; bottom: auto; height: auto; aspect-ratio: 16 / 9; }
  .hero__photo img, .hero__video { object-fit: cover; object-position: center; }
}
/* scrim: only where the text sits, so the photo stays bright elsewhere */
.hero__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0, 32, 56, 0.88) 0%, rgba(0, 32, 56, 0.55) 38%, rgba(0, 32, 56, 0) 68%),
    linear-gradient(to right, rgba(0, 32, 56, 0.35), rgba(0, 32, 56, 0) 60%);
}
.hero__copy {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: var(--space-l) clamp(1rem, 4vw, 3.5rem) clamp(1.5rem, 5vw, 3.5rem);
  /* keep clear of the owl on the right */
  padding-right: clamp(6.5rem, 26vw, 20rem);
  color: #fff;
  max-width: 62rem;
}
.hero__eyebrow { margin-bottom: 0.75rem; font-weight: 700; font-size: var(--step--1); color: var(--bufi-yellow); letter-spacing: 0.01em; }
.hero__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3.6rem, 4vw + 2.4rem, 8.5rem); line-height: 0.88; letter-spacing: 0.005em;
  text-shadow: 0 2px 24px rgba(0, 32, 56, 0.35);
}
/* clip box padded out (and pulled back with negative margins) so tall glyphs (W, B, ¡, !) never get cut
   by the line-rise animation while the leading stays tight */
.hero__line { display: block; overflow: hidden; padding: 0.18em 0.08em 0.1em; margin: -0.18em -0.08em -0.1em; }
.hero__line > span { display: block; }
.hero__tagline { margin: clamp(0.75rem, 2vw, 1.25rem) 0 0; font-family: var(--font-body); font-weight: 700; font-size: var(--step-1); line-height: 1.3; max-width: 30ch; color: #fff; text-wrap: balance; text-shadow: 0 1px 12px rgba(0, 32, 56, 0.5); }
.hero__copy .btn { margin-top: clamp(1.25rem, 3vw, 2rem); }

.hero__owl {
  position: absolute; z-index: 3; right: 0; bottom: 0;
  width: clamp(120px, 22vw, 300px);
  /* peeks out past the rounded corner of the frame */
  transform: translate(0, 10%);
  filter: drop-shadow(0 12px 24px rgba(0, 32, 56, 0.35));
  pointer-events: none;
}
@media (min-width: 768px) {
  .hero__owl { right: var(--frame-inset); transform: translate(8%, 12%); }
}

/* hero reveal — the one orchestrated moment on the page. Runs once on load; off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero__frame { animation: hero-frame var(--dur-slow) var(--ease-out) both; }
  .hero__photo img { animation: hero-photo 1.6s var(--ease-out) both; }
  .hero__line > span { animation: hero-line 0.9s var(--ease-out) both; animation-delay: 0.35s; }
  .hero__line:nth-child(2) > span { animation-delay: 0.45s; }
  .hero__eyebrow, .hero__tagline, .hero__copy .btn { animation: hero-fade 0.8s var(--ease-out) both; animation-delay: 0.75s; }
  .hero__eyebrow { animation-delay: 0.3s; }
  .hero__copy .btn { animation-delay: 0.85s; }
  .hero__owl { animation: hero-owl 1s var(--ease-out) both; animation-delay: 0.9s; }
}
@keyframes hero-frame { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes hero-photo { from { transform: scale(1.08); } to { transform: none; } }
@keyframes hero-line { from { transform: translateY(105%); } to { transform: none; } }
@keyframes hero-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hero-owl { from { opacity: 0; transform: translate(0, 10%) translateY(30%) rotate(6deg); } to { opacity: 1; transform: translate(0, 10%); } }
@media (min-width: 768px) {
  @keyframes hero-owl { from { opacity: 0; transform: translate(8%, 12%) translateY(30%) rotate(6deg); } to { opacity: 1; transform: translate(8%, 12%); } }
}

/* ======================================================================
   shared section pieces
   ====================================================================== */
:root { --section-pad: clamp(3.5rem, 8vw, 7rem); --wrap: 72rem; }
/* every photo box: the <picture> fills its container so object-fit on the img works */
[class*="__photo"] picture, .projects__item picture { height: 100%; }
.section-title {
  font-family: var(--font-display); font-weight: 900; font-size: var(--step-3); line-height: 0.95;
  color: var(--bufi-blue-deep); text-wrap: balance;
}
.section-title--light { color: #fff; }
.text-link {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--bufi-royal); text-decoration: underline;
  text-decoration-color: var(--bufi-yellow); text-decoration-thickness: 3px; text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-fast);
}
.text-link:hover { text-decoration-color: var(--bufi-royal); }
.chip {
  display: inline-flex; align-items: baseline; gap: 0.4em; min-height: 44px; padding: 0.55em 1.1em;
  border-radius: var(--radius-pill); background: #fff; color: var(--bufi-blue-deep); font-weight: 700; text-decoration: none;
  box-shadow: inset 0 0 0 2px rgba(0, 48, 72, 0.12);
}
.chip small { font-weight: 400; color: var(--fg-muted); font-size: var(--step--1); }
.chip:hover { box-shadow: inset 0 0 0 2px var(--bufi-blue-deep); }

/* ======================================================================
   philosophy — the "season collage": statement in the middle, photos at the corners
   ====================================================================== */
.philosophy { padding: var(--section-pad) var(--gutter); background: var(--bg-ice); }
.philosophy__collage {
  position: relative; max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s);
}
.philosophy__photo {
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-m); background: var(--tile-periwinkle);
  rotate: var(--tilt, 0deg);
  box-shadow: 0 18px 40px -20px rgba(0, 48, 72, 0.45);
}
.philosophy__photo:nth-child(1) { --tilt: -3deg; }
.philosophy__photo:nth-child(2) { --tilt: 2.5deg; }
.philosophy__photo:nth-child(3) { --tilt: 2deg; }
.philosophy__photo:nth-child(4) { --tilt: -2.5deg; }
.philosophy__photo img { width: 100%; height: 100%; object-fit: cover; }
.philosophy__text { grid-column: 1 / -1; text-align: center; max-width: 40rem; margin: var(--space-m) auto 0; }
.philosophy__lead { font-weight: 700; color: var(--bufi-royal); margin-bottom: 0.75rem; }
.philosophy__body { margin: var(--space-m) auto; font-size: var(--step-1); line-height: 1.45; text-wrap: pretty; }

@media (min-width: 900px) {
  .philosophy__collage { display: block; min-height: 52rem; padding: 2rem 0; }
  .philosophy__text { position: relative; z-index: 1; margin: 9rem auto 0; padding: 0 1rem; }
  .philosophy__photo { position: absolute; width: clamp(11rem, 18vw, 15rem); }
  .philosophy__photo:nth-child(1) { left: 3%; top: 3%; }
  .philosophy__photo:nth-child(2) { right: 4%; top: 0; }
  .philosophy__photo:nth-child(3) { left: 8%; bottom: 0; }
  .philosophy__photo:nth-child(4) { right: 2%; bottom: 4%; }
  /* scroll-driven drift at four different speeds; transform-only, off under reduced motion */
  @media (prefers-reduced-motion: no-preference) {
    .philosophy__photo { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .philosophy__photo:nth-child(1) { --from: 3rem;  --to: -2rem; }
    .philosophy__photo:nth-child(2) { --from: 2rem;  --to: -3.5rem; }
    .philosophy__photo:nth-child(3) { --from: 4rem;  --to: -1.5rem; }
    .philosophy__photo:nth-child(4) { --from: 2.5rem; --to: -4rem; }
  }
}
@keyframes drift { from { translate: 0 var(--from); } to { translate: 0 var(--to); } }

.values {
  max-width: var(--wrap); margin: var(--space-xl) auto 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s);
}
@media (min-width: 900px) { .values { grid-template-columns: repeat(4, 1fr); gap: var(--space-m); } }
.value {
  padding: 1.25rem; border-radius: var(--radius-m); background: #fff;
  display: grid; gap: 0.5rem; align-content: start;
}
.value img { width: 64px; height: 64px; border-radius: 14px; }
.value h3 { font-family: var(--font-display-wide); font-weight: 700; font-size: var(--step-1); color: var(--bufi-blue-deep); margin-top: 0.25rem; }
.value p { font-size: var(--step--1); color: var(--fg-muted); line-height: 1.45; }

/* ======================================================================
   programs — navy band; the strip is pinned + scrubbed on desktop (GSAP), a snap row on mobile
   ====================================================================== */
.programs { background: var(--bufi-blue-deep); color: #fff; overflow: hidden; }
.programs__pin { padding: var(--section-pad) 0 calc(var(--section-pad) * 0.75); }
.programs__head { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.programs__intro { max-width: 60ch; margin-top: var(--space-m); font-size: var(--step-0); color: rgba(255, 255, 255, 0.85); text-wrap: pretty; }
.programs__hint { display: none; }
.programs__strip {
  display: flex; gap: var(--space-m);
  /* first card lines up with the heading's left edge; strip runs off the right */
  --strip-edge: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  padding: var(--space-l) var(--strip-edge) var(--space-s);
  scroll-padding-inline: var(--strip-edge); /* so snap points respect the padded edge */
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.programs__strip::-webkit-scrollbar { display: none; }
.program-card { flex: 0 0 min(82vw, 30rem); scroll-snap-align: start; }
.program-card__link {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; color: var(--fg); border-radius: var(--radius-l); overflow: hidden; text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.program-card__link:hover { transform: translateY(-4px); }
.program-card__photo { position: relative; aspect-ratio: 16 / 10; background: var(--tile-sky); }
.program-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.program-card__ages {
  position: absolute; left: 1rem; top: 1rem; padding: 0.4em 0.9em; border-radius: var(--radius-pill);
  background: var(--bufi-yellow); color: var(--bufi-blue-deep); font-weight: 900; font-size: var(--step--1);
}
.program-card__body { padding: 1.25rem 1.5rem 1.5rem; display: grid; gap: 0.5rem; }
.program-card__body h3 { font-family: var(--font-display); font-weight: 900; font-size: var(--step-2); line-height: 1; color: var(--bufi-blue-deep); }
.program-card__body p { color: var(--fg-muted); text-wrap: pretty; }
.program-card__more { font-weight: 700; color: var(--bufi-royal); text-decoration: underline; text-decoration-color: var(--bufi-yellow); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }

@media (min-width: 900px) {
  .programs__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l); align-items: end; }
  .programs__intro { margin-top: 0; }
  .programs__hint { display: block; grid-column: 1 / -1; margin-top: 0.5rem; font-size: var(--step--1); color: rgba(255, 255, 255, 0.75); }
  .programs__hint::after { content: " \2192"; }
  .program-card { flex: 0 0 clamp(22rem, 30vw, 28rem); }
  /* when JS pins the section the strip stops being a scroller and is translated instead */
  .programs.is-pinned .programs__strip { overflow: hidden; scroll-snap-type: none; will-change: transform; }
  .programs.is-pinned .programs__pin { padding-block: 3rem 2.5rem; }
  /* not pinned (short viewport / reduced motion): arrows for mouse users */
  .programs__nav { grid-column: 1 / -1; display: flex; gap: 0.5rem; margin-top: 0.75rem; }
  .programs__nav button {
    width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); color: #fff; font-size: 1.25rem;
    transition: border-color var(--dur-fast), background-color var(--dur-fast);
  }
  .programs__nav button:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
  .programs__nav button:disabled { opacity: 0.35; cursor: default; }
}

.pillars { padding: var(--section-pad) var(--gutter); background: #fff; }
.pillars .section-title { max-width: var(--wrap); margin: 0 auto var(--space-l); }
.pillars__grid { max-width: var(--wrap); margin: 0 auto; display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pillars__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pillars__grid { grid-template-columns: repeat(4, 1fr); } }
.pillar { padding: 1.75rem; border-radius: var(--radius-l); display: grid; gap: 0.6rem; align-content: start; }
.pillar h3 { font-family: var(--font-display-wide); font-weight: 700; font-size: var(--step-1); line-height: 1.1; color: var(--bufi-blue-deep); text-wrap: balance; }
.pillar p { color: var(--fg); text-wrap: pretty; }
.pillar--yellow { background: var(--tile-yellow); }
.pillar--periwinkle { background: var(--tile-periwinkle); }
.pillar--sky { background: var(--tile-sky); }
.pillar--salmon { background: var(--tile-salmon); }

/* ======================================================================
   learning in action — 2 + 3 grid with one staggered scroll reveal
   ====================================================================== */
.projects { padding: var(--section-pad) var(--gutter); background: var(--bg-ice); }
.projects__text { max-width: var(--wrap); margin: 0 auto var(--space-l); display: grid; gap: var(--space-m); }
.projects__text p { max-width: 60ch; text-wrap: pretty; }
@media (min-width: 900px) { .projects__text { grid-template-columns: 1fr 1fr; align-items: end; } }
.projects__grid { max-width: var(--wrap); margin: 0 auto; display: grid; gap: var(--space-s); grid-template-columns: repeat(6, 1fr); }
.projects__item { grid-column: span 3; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-m); background: var(--tile-periwinkle); }
.projects__item:nth-child(n + 3) { grid-column: span 2; aspect-ratio: 3 / 4; }
@media (max-width: 639px) {
  .projects__item, .projects__item:nth-child(n + 3) { grid-column: span 3; aspect-ratio: 1; }
  .projects__item:first-child { grid-column: span 6; aspect-ratio: 4 / 3; }
}
.projects__item img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .projects__item { animation: reveal-item linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 6%) entry calc(55% + var(--i) * 6%); }
  .projects__item img { animation: reveal-img linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 6%) entry calc(70% + var(--i) * 6%); }
}
@keyframes reveal-item { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } }
@keyframes reveal-img { from { transform: scale(1.15); } to { transform: none; } }

/* ======================================================================
   instagram — real photos styled as posts (square crop, hover overlay), an
   auto-scrolling seamless loop (transform-only; the track is doubled and
   translates exactly -50%, so the wrap is invisible). Pauses on hover/focus
   so tiles stay clickable. Under reduced motion it's a plain manual
   scroll-snap strip instead (duplicate copy hidden). No third-party
   script, API or token — every tile and the handle link straight out to
   the real profile: the "live feed" look without the live-feed upkeep.
   ====================================================================== */
.instagram { padding: var(--section-pad) 0; background: #fff; overflow: clip; }
.instagram__head {
  max-width: var(--wrap); margin: 0 auto var(--space-m); padding: 0 var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m);
}
.instagram__handle { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; font-weight: 700; color: var(--bufi-royal); text-decoration: none; }
.instagram__handle:hover { text-decoration: underline; text-decoration-color: var(--bufi-yellow); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
/* The strip is a clipped (not scrollable) window; JS slides the track with translate3d (see main.js "marquee").
   overflow: clip — unlike hidden — can't be scrolled by the browser when a tile gets focus, which is what
   pushed the track off-screen on iOS. */
.instagram__strip { padding: 0 0 var(--space-m) var(--gutter); overflow: clip; }
.instagram__track { display: flex; gap: 0.4rem; list-style: none; margin: 0; padding: 0; width: max-content; will-change: transform; }
.instagram__item { flex: 0 0 var(--ig-tile, min(40vw, 10rem)); width: var(--ig-tile, min(40vw, 10rem)); }
.instagram__item a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-s); background: var(--tile-periwinkle); }
.instagram__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
.instagram__overlay {
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
  background: rgba(0, 32, 56, 0); opacity: 0;
  transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .instagram__item a:hover img { transform: scale(1.06); }
  .instagram__item a:hover .instagram__overlay { background: rgba(0, 32, 56, 0.45); opacity: 1; }
}
@media (min-width: 700px) { .instagram__item { --ig-tile: clamp(8.5rem, 13vw, 11.5rem); } }
/* Reduced motion (or no JS): a plain swipeable row, duplicates hidden */
@media (prefers-reduced-motion: reduce) {
  .instagram__strip { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding-inline: var(--gutter); }
  .instagram__strip::-webkit-scrollbar { display: none; }
  .instagram__item { scroll-snap-align: start; }
  .instagram__item[aria-hidden="true"] { display: none; }
}
.instagram__cta { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); text-align: center; }

/* ======================================================================
   parents teaser
   ====================================================================== */
.parents { padding: var(--section-pad) var(--gutter); background: #fff; }
.parents__head { max-width: var(--wrap); margin: 0 auto var(--space-l); display: grid; gap: var(--space-m); }
.parents__head p { max-width: 55ch; text-wrap: pretty; }
@media (min-width: 900px) { .parents__head { grid-template-columns: 1fr 1fr; align-items: end; } }
.articles { max-width: var(--wrap); margin: 0 auto; display: grid; gap: var(--space-m); }
@media (min-width: 768px) { .articles { grid-template-columns: 1fr 1fr; } .articles:has(> :only-child) { grid-template-columns: minmax(0, 46rem); } }
.article-card a {
  display: grid; grid-template-columns: 38% 1fr; height: 100%;
  background: var(--bg-ice); border-radius: var(--radius-l); overflow: hidden; text-decoration: none; color: var(--fg);
}
.article-card__photo { background: var(--tile-sky); min-height: 100%; }
.article-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.article-card__body { padding: 1.5rem; display: grid; gap: 0.6rem; align-content: start; }
.article-card__body h3 { font-family: var(--font-display-wide); font-weight: 700; font-size: var(--step-1); line-height: 1.15; color: var(--bufi-blue-deep); text-wrap: balance; }
.article-card__body p { font-size: var(--step--1); color: var(--fg-muted); text-wrap: pretty; }
.article-card a:hover .text-link { text-decoration-color: var(--bufi-royal); }

/* ======================================================================
   FAQ — native details/summary
   ====================================================================== */
.faq { padding: var(--section-pad) var(--gutter); background: var(--bg-ice); }
.faq .section-title { max-width: 48rem; margin: 0 auto var(--space-l); }
.faq__list { max-width: 48rem; margin: 0 auto; display: grid; gap: 0.75rem; }
.faq__item { background: #fff; border-radius: var(--radius-m); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 1.25rem; font-weight: 700; font-size: var(--step-0); color: var(--bufi-blue-deep); border-radius: var(--radius-m);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: 0 0 auto; width: 12px; height: 12px; margin-right: 4px;
  border-right: 3px solid var(--bufi-royal); border-bottom: 3px solid var(--bufi-royal);
  transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__answer { padding: 0 1.25rem 1.25rem; color: var(--fg); max-width: 65ch; }
.faq__answer p + p { margin-top: 0.6rem; }

/* ======================================================================
   testimonials — Google reviews, quiet peach band
   ====================================================================== */
.testimonials { padding: var(--section-pad) var(--gutter); background: var(--tile-peach); }
.testimonials__head { max-width: var(--wrap); margin: 0 auto var(--space-l); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-m); }
.rating { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; text-decoration: none; color: var(--bufi-blue-deep); }
.rating__score { font-family: var(--font-display); font-weight: 900; font-size: var(--step-2); line-height: 1; }
.rating__stars { color: var(--bufi-yellow); font-size: var(--step-1); letter-spacing: 0.05em; }
.rating__count { font-weight: 700; text-decoration: underline; text-decoration-color: var(--bufi-yellow); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
.quotes { max-width: var(--wrap); margin: 0 auto; display: grid; gap: var(--space-m); }
@media (min-width: 700px) { .quotes { grid-template-columns: 1fr 1fr; } }
.quote { background: #fff; border-radius: var(--radius-l); padding: 1.75rem; display: grid; gap: 1rem; align-content: space-between; }
.quote blockquote { margin: 0; font-size: var(--step-1); line-height: 1.4; color: var(--fg); text-wrap: pretty; }
.quote blockquote p::before { content: "\201C"; font-family: var(--font-display); color: var(--bufi-yellow); font-size: 1.6em; line-height: 0; vertical-align: -0.35em; margin-right: 0.1em; }
.quote__by { font-weight: 700; color: var(--bufi-blue-deep); }
.quote__by span { font-weight: 400; color: var(--fg-muted); }
.testimonials__all { max-width: var(--wrap); margin: var(--space-m) auto 0; }

/* ======================================================================
   contact — every page ends here
   ====================================================================== */
.contact { padding: var(--section-pad) var(--gutter); background: #fff; }
.contact__inner { max-width: var(--wrap); margin: 0 auto; display: grid; gap: var(--space-l); }
@media (min-width: 900px) { .contact__inner { grid-template-columns: 1fr 1.1fr; gap: var(--space-xl); align-items: start; } }
.contact__lead { margin-top: var(--space-m); font-size: var(--step-1); line-height: 1.4; max-width: 40ch; text-wrap: pretty; }
.contact__tour { margin-top: 0.5rem; font-weight: 700; color: var(--bufi-blue-deep); }
.contact__details { margin-top: var(--space-l); display: grid; gap: var(--space-m); }
@media (min-width: 600px) { .contact__details { grid-template-columns: 1fr 1fr; } }
.contact__details dt { font-family: var(--font-display-wide); font-weight: 700; font-size: var(--step-1); color: var(--bufi-blue-deep); margin-bottom: 0.4rem; }
.contact__details dd { margin: 0; }
.contact__details address { font-style: normal; margin-bottom: 0.5rem; }
.contact__serving { font-size: var(--step--1); color: var(--fg-muted); margin-bottom: 0.5rem; max-width: 30ch; }
.contact__map { max-width: var(--wrap); margin: var(--space-l) auto 0; border-radius: var(--radius-l); overflow: hidden; background: var(--bg-ice); }
.contact__map iframe { display: block; width: 100%; height: clamp(260px, 40vw, 420px); border: 0; }
.contact__list { display: grid; }
.contact__list li { display: flex; align-items: center; min-height: 44px; }
.contact__list a { color: var(--bufi-royal); font-weight: 700; text-decoration-color: var(--bufi-yellow); text-decoration-thickness: 2px; }
.contact__form { background: var(--bg-ice); border-radius: var(--radius-l); padding: clamp(1.25rem, 3vw, 2.5rem); display: grid; gap: 1rem; }
.field-row { display: grid; gap: 1rem; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.35rem; }
.field span { font-weight: 700; font-size: var(--step--1); color: var(--bufi-blue-deep); }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 0.7em 0.9em; font: inherit; color: var(--fg);
  background: #fff; border: 2px solid rgba(0, 48, 72, 0.18); border-radius: var(--radius-s);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--bufi-yellow); outline-offset: 0; border-color: var(--bufi-royal); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--bufi-red); }
.contact__form .btn { justify-self: start; }
.form-status { min-height: 1.5em; font-weight: 700; color: var(--bufi-blue-deep); }
.form-status.is-error { color: var(--bufi-red); }

/* ======================================================================
   footer
   ====================================================================== */
.site-footer { background: var(--bufi-blue-deep); color: rgba(255, 255, 255, 0.85); padding: var(--section-pad) var(--gutter) var(--space-m); }
.site-footer__inner { max-width: var(--wrap); margin: 0 auto; display: grid; gap: var(--space-l); }
@media (min-width: 768px) { .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer__brand { display: grid; gap: 0.5rem; max-width: 30ch; }
.site-footer__brand img { width: 64px; height: auto; }
.site-footer__name { font-family: var(--font-display); font-weight: 900; font-size: var(--step-2); color: #fff; line-height: 1; }
.site-footer__links ul { display: grid; }
.site-footer__links li, .site-footer__contact a { display: flex; align-items: center; min-height: 44px; }
.site-footer__contact p { display: grid; }
.site-footer a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 0.2em; }
.site-footer a:hover { text-decoration-color: var(--bufi-yellow); }
.site-footer address { font-style: normal; }
.site-footer__hours { margin: 0.25rem 0 0.75rem; }
.site-footer__legal { max-width: var(--wrap); margin: var(--space-l) auto 0; padding-top: var(--space-m); border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: var(--step--1); }

/* ======================================================================
   sub-pages: page hero band + programs / about / parents
   ====================================================================== */
.page-hero { padding: var(--space-xl) var(--gutter); }
.page-hero--periwinkle { background: var(--tile-periwinkle); }
.page-hero--peach { background: var(--tile-peach); }
.page-hero--navy { background: var(--bufi-blue-deep); color: #fff; }
.page-hero__inner { max-width: var(--wrap); margin: 0 auto; display: grid; gap: var(--space-m); }
.page-title { font-family: var(--font-display); font-weight: 900; font-size: var(--step-4); line-height: 0.9; color: var(--bufi-blue-deep); }
.page-hero--navy .page-title { color: #fff; }
.page-lead { max-width: 60ch; font-size: var(--step-1); line-height: 1.45; text-wrap: pretty; }
.jump { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-s); }

.program { padding: var(--section-pad) var(--gutter); scroll-margin-top: var(--header-h); }
.program:nth-of-type(even) { background: var(--bg-ice); }
.program__intro { max-width: var(--wrap); margin: 0 auto; display: grid; gap: var(--space-m); align-items: center; }
@media (min-width: 900px) { .program__intro { grid-template-columns: 2fr 3fr; gap: var(--space-xl); } .program:nth-of-type(even) .program__photo { order: 2; } }
.program__photo { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-l); background: var(--tile-sky); max-width: 28rem; }
@media (min-width: 900px) { .program__photo { aspect-ratio: 4 / 5; } }
.program__photo img { width: 100%; height: 100%; object-fit: cover; }
.program__ages { display: inline-block; padding: 0.4em 0.9em; border-radius: var(--radius-pill); background: var(--bufi-yellow); color: var(--bufi-blue-deep); font-weight: 900; font-size: var(--step--1); margin-bottom: 1rem; }
.program__lead { margin-top: var(--space-m); font-size: var(--step-1); line-height: 1.45; max-width: 55ch; text-wrap: pretty; }
.program__pillars { max-width: var(--wrap); margin: var(--space-l) auto 0; display: grid; gap: var(--space-m); }
@media (min-width: 700px) { .program__pillars { grid-template-columns: 1fr 1fr; } }
.program__pillars li { padding: 1.5rem; border-radius: var(--radius-m); display: grid; gap: 0.5rem; align-content: start; }
.program__pillars h3 { font-family: var(--font-display-wide); font-weight: 700; font-size: var(--step-1); line-height: 1.1; color: var(--bufi-blue-deep); }
.program__pillars p { text-wrap: pretty; }
[data-program="infants"] .program__pillars li { background: var(--tile-yellow); }
[data-program="toddlers"] .program__pillars li { background: var(--tile-sky); }
[data-program="pre-k"] .program__pillars li { background: var(--tile-periwinkle); }
.program__closing { max-width: var(--wrap); margin: var(--space-l) auto 0; font-size: var(--step-1); line-height: 1.45; max-width: 65ch; text-wrap: pretty; }

.about-hero__inner { align-items: center; }
@media (min-width: 900px) { .about-hero__inner { grid-template-columns: 1.1fr 1fr; gap: var(--space-xl); } }
.about-hero__text { display: grid; gap: var(--space-m); }
.about-hero .page-lead { color: rgba(255, 255, 255, 0.88); }
.about-hero__photo { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-l); background: var(--bufi-blue); }
.about-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-sections { padding: var(--space-l) var(--gutter); display: grid; gap: var(--space-xl); }
.about-section { max-width: var(--wrap); margin: 0 auto; width: 100%; display: grid; gap: var(--space-m); align-items: center; }
@media (min-width: 800px) {
  .about-section { grid-template-columns: 1fr 1.4fr; gap: var(--space-xl); }
  .about-section:nth-child(even) .about-section__photo { order: 2; }
}
.about-section__photo { aspect-ratio: 4 / 5; max-width: 22rem; overflow: hidden; border-radius: var(--radius-l); background: var(--tile-sky); rotate: -2deg; }
.about-section:nth-child(even) .about-section__photo { rotate: 2deg; }
.about-section__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-section__text { display: grid; gap: var(--space-s); max-width: 60ch; }
.about-section__text p { text-wrap: pretty; }
.about-closing { padding: var(--section-pad) var(--gutter); background: var(--tile-yellow); text-align: center; display: grid; gap: var(--space-m); justify-items: center; }
.about-closing__title { font-family: var(--font-display); font-weight: 900; font-size: var(--step-3); line-height: 0.95; color: var(--bufi-blue-deep); max-width: 20ch; text-wrap: balance; }
.about-closing p { max-width: 55ch; font-size: var(--step-1); line-height: 1.45; text-wrap: pretty; }

.post { max-width: 46rem; margin: 0 auto; padding: var(--section-pad) var(--gutter); scroll-margin-top: var(--header-h); }
.post + .post { border-top: 2px solid var(--bg-ice); }
.post__photo { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-l); background: var(--tile-sky); margin-bottom: var(--space-l); }
.post__photo img { width: 100%; height: 100%; object-fit: cover; }
.post__subtitle { margin-top: 0.75rem; font-size: var(--step-1); color: var(--fg-muted); }
.post__byline { margin-top: 0.75rem; font-size: var(--step--1); color: var(--fg-muted); }
.post__body { margin-top: var(--space-l); display: grid; gap: 1rem; font-size: var(--step-0); line-height: 1.65; }
.post__body h3 { font-family: var(--font-display-wide); font-weight: 700; font-size: var(--step-2); line-height: 1.05; color: var(--bufi-blue-deep); margin-top: var(--space-m); }
.post__body ul { padding-left: 1.25rem; display: grid; gap: 0.5rem; list-style: disc; }
.post__body ul::marker, .post__body li::marker { color: var(--bufi-yellow); }

/* ======================================================================
   upcoming events (parents page) — synced from the school's calendar (see /api/events)
   ====================================================================== */
.events { padding: var(--section-pad) var(--gutter); background: #fff; }
.events__head { max-width: 48rem; margin: 0 auto var(--space-l); display: grid; gap: var(--space-m); text-align: center; justify-items: center; }
.events__list { max-width: 48rem; margin: 0 auto; display: grid; gap: 0.6rem; list-style: none; }
.events__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; padding: 1rem 1.25rem; background: var(--bg-ice); border-radius: var(--radius-m); }
.events__date { flex: 0 0 auto; font-weight: 900; color: var(--bufi-royal); white-space: nowrap; }
.events__summary { color: var(--fg); }
.events__status { padding: 1rem 1.25rem; color: var(--fg-muted); text-align: center; }

/* ======================================================================
   book a tour — Google appointment schedule first, details after
   ====================================================================== */
.page-title--compact { font-size: var(--step-3); }
.booking { padding: var(--space-l) var(--gutter) var(--space-m); background: var(--tile-sky); scroll-margin-top: var(--header-h); }
.booking__head { max-width: var(--wrap); margin: 0 auto var(--space-m); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; }
.booking__hint { font-weight: 700; color: var(--bufi-blue-deep); }
.booking__frame {
  max-width: var(--wrap); margin: 0 auto; background: #fff; border-radius: var(--radius-l); overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(0, 48, 72, 0.35);
}
.booking__frame iframe { display: block; width: 100%; height: clamp(640px, 88vh, 1100px); border: 0; }
.booking__open { max-width: var(--wrap); margin: 0.75rem auto 0; font-size: var(--step--1); }
.booking__mobile { max-width: var(--wrap); margin: 0 auto; display: grid; gap: 0.75rem; justify-items: start; }
.booking__mobile .btn { width: 100%; justify-content: center; }
.booking__mobile p { font-size: var(--step--1); color: var(--fg-muted); }
@media (max-width: 767px) { .booking__frame, .booking__open { display: none; } }
@media (min-width: 768px) { .booking__mobile { display: none; } }
.booking__details { padding: var(--section-pad) var(--gutter); background: var(--bg-ice); }
.booking__aside { max-width: var(--wrap); margin: 0 auto; display: grid; gap: var(--space-l); }
@media (min-width: 768px) { .booking__aside { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } }
.booking__aside h2 { font-family: var(--font-display-wide); font-weight: 700; font-size: var(--step-1); color: var(--bufi-blue-deep); margin-bottom: 0.5rem; }
.booking__aside-gap { margin-top: var(--space-m); }
.booking__aside p { max-width: 45ch; text-wrap: pretty; }
.booking__aside .contact__list { margin-top: 0.5rem; }
.points { display: grid; gap: 0.5rem; margin-top: var(--space-s); }
.points li { position: relative; padding-left: 1.6rem; font-weight: 700; color: var(--bufi-blue-deep); }
.points li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 0.8em; height: 0.8em; border-radius: 50%;
  background: var(--bufi-yellow); box-shadow: inset 0 0 0 2px var(--bufi-blue-deep);
}

/* ======================================================================
   Bufi, alive — two 3x3 sprite sheets (head directions / expressions), swapped by background-position.
   Discrete frame changes only; the squash on tap is transform-only and skipped under reduced motion.
   ====================================================================== */
.mascot {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0;
  background: transparent; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.mascot__squash { position: relative; display: block; width: 100%; height: 100%; transform-origin: 50% 78%; }
.mascot__layer {
  position: absolute; inset: 0; background-repeat: no-repeat; background-size: 300% 300%;
  background-position: calc(var(--cx, 1) * 50%) calc(var(--cy, 1) * 50%);
}
.mascot__layer--dir { background-image: var(--mascot-dir); }
/* Until JS decides the pointer can be tracked, Bufi is a single 20 KB idle frame (the atlas's centre cell), not the
   180 KB 3×3 atlas. Touch devices never load the atlas at all; fine-pointer devices swap it in after load. */
.mascot.is-static .mascot__layer--dir { background-image: var(--mascot-idle); background-size: 100% 100%; background-position: 0 0; }
.mascot__layer--rx { background-image: var(--mascot-rx); opacity: 0; }
.mascot.is-reacting .mascot__layer--dir { opacity: 0; }
.mascot.is-reacting .mascot__layer--rx { opacity: 1; }
.mascot:focus-visible { outline: 3px solid var(--bufi-yellow); outline-offset: 6px; border-radius: 50%; }

/* hero: Bufi peeks up from the bottom-right corner of the photo frame */
.hero__mascot {
  position: absolute; z-index: 3; right: clamp(0.25rem, 2vw, 2rem); bottom: -4%;
  width: clamp(150px, 28vw, 323px); /* desktop cap: 380 × 0.85 */
  filter: drop-shadow(0 10px 22px rgba(0, 32, 56, 0.35));
}
@media (prefers-reduced-motion: no-preference) {
  .hero__mascot { animation: hero-mascot 1s var(--ease-out) both; animation-delay: 0.9s; }
}
@keyframes hero-mascot { from { opacity: 0; transform: translateY(35%) rotate(4deg); } to { opacity: 1; transform: none; } }

/* mobile drawer: Bufi peeks in above the foot */
.drawer__mascot { position: absolute; right: 0.5rem; bottom: 6.5rem; width: 150px; pointer-events: none; }
.drawer__mascot .mascot { pointer-events: auto; }
@media (max-height: 640px) { .drawer__mascot { display: none; } }

/* 404 */
.lost { max-width: var(--wrap); margin: 0 auto; padding: var(--section-pad) var(--gutter); display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 768px) { .lost { grid-template-columns: 1fr 2fr; gap: var(--space-xl); } }
.lost__mascot { width: min(60vw, 320px); margin: 0 auto; }
.lost__text { display: grid; gap: var(--space-m); justify-items: start; }
.lost__text p { max-width: 45ch; font-size: var(--step-1); }
.lost__es { margin-top: var(--space-l); padding-top: var(--space-l); border-top: 2px solid var(--bg-ice); display: grid; gap: var(--space-m); justify-items: start; }
/* pages that show a reaction frame statically (404, thanks) load the reactions atlas eagerly via data-mascot-rx */
.mascot--surprised .mascot, .mascot--happy .mascot { --mascot-rx: var(--mascot-rx-eager); }
.mascot--surprised .mascot__layer--dir { opacity: 0; }
.mascot--surprised .mascot__layer--rx { opacity: 1; --cx: 0; --cy: 1; }

/* ======================================================================
   flight — a paper airplane glides across the Philosophy section as it scrolls, top-left → bottom-right,
   leaving a fading dashed trail with loops. Bound to the section's view timeline (no JS per frame);
   only transform/opacity animate.
   ====================================================================== */
.philosophy { position: relative; view-timeline-name: --philosophy; }
.flight { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
.flight__trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flight__path { fill: none; stroke: none; }
.flight__dash { fill: none; stroke: var(--bufi-yellow); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.flight__plane {
  position: absolute; left: 0; top: 0; width: 42px; aspect-ratio: 100 / 60; opacity: 0;
  offset-rotate: auto; /* noses through the route and banks with the loops, like real paper */
  filter: drop-shadow(0 6px 10px rgba(0, 32, 56, 0.3));
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .flight__plane { animation: flight-plane linear both; animation-timeline: --philosophy; animation-range: var(--flight-range, cover 30% cover 70%); }
    .flight__dash { animation: flight-dash linear both; animation-timeline: --philosophy; }
  }
}
@keyframes flight-plane {
  0% { offset-distance: 0%; opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
/* each dash pops in as the plane passes, then fades over the tail length (set in JS) */
@keyframes flight-dash { 0% { opacity: 0; transform: scale(0.4); } 5% { opacity: 0.85; transform: none; } 100% { opacity: 0; transform: none; } }

/* ======================================================================
   sticky mobile CTA, thank-you page, legal page
   ====================================================================== */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg-ice) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 -8px 24px -16px rgba(0, 48, 72, 0.35);
}
.sticky-cta .btn { width: 100%; justify-content: center; }
@media (min-width: 900px) { .sticky-cta { display: none; } }
body[data-page="book"] .sticky-cta, body[data-page="thanks"] .sticky-cta { display: none; }
@media (max-width: 899px) { body:not([data-page="book"]):not([data-page="thanks"]) .site-footer { padding-bottom: calc(var(--space-m) + 5rem); } }
/* hide the sticky bar while the hero's own CTA is on screen (toggled in JS) */
.sticky-cta.is-hidden { transform: translateY(110%); }
.sticky-cta { transition: transform var(--dur-base) var(--ease-out); }

.lost__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); }
.mascot--happy .mascot__layer--dir { opacity: 0; }
.mascot--happy .mascot__layer--rx { opacity: 1; --cx: 2; --cy: 2; }
.legal .post__body h2 { font-family: var(--font-display-wide); font-weight: 700; font-size: var(--step-1); line-height: 1.1; color: var(--bufi-blue-deep); margin-top: var(--space-m); }

/* ======================================================================
   quick facts band + VPK page
   ====================================================================== */
.facts { padding: var(--space-m) var(--gutter) 0; background: var(--bg-ice); }
.facts__list { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (min-width: 700px) { .facts__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .facts__list { grid-template-columns: repeat(6, 1fr); } }
.facts__item { background: #fff; border-radius: var(--radius-m); padding: 0.85rem 1rem; display: grid; gap: 0.15rem; }
.facts__item dt { font-size: var(--step--1); color: var(--fg-muted); font-weight: 700; }
.facts__item dd { margin: 0; font-weight: 700; color: var(--bufi-blue-deep); }
.facts__item dd a { color: var(--bufi-royal); text-decoration-color: var(--bufi-yellow); text-decoration-thickness: 2px; }

.vpk .post__body p { text-wrap: pretty; }
.vpk__contact { margin-top: var(--space-m); font-weight: 700; color: var(--bufi-blue-deep); }

/* ======================================================================
   program detail pages (/programs/infants/ etc.) — hub sections reused, plus facts, FAQ and sibling links
   ====================================================================== */
.page-crumbs { font-size: var(--step--1); color: var(--bufi-blue-deep); margin-bottom: 0.75rem; }
.page-crumbs a { color: inherit; text-decoration: underline; text-decoration-color: rgba(16, 46, 82, 0.3); text-underline-offset: 0.2em; }
.page-hero__cta { margin-top: var(--space-m); }
.program--single { padding-bottom: var(--space-l); }
.program__facts, .program__faq, .program__siblings { padding: var(--space-l) var(--gutter); }
.program__facts { background: var(--bg-ice); }
.program__facts-inner { max-width: var(--wrap); margin: 0 auto; display: grid; gap: var(--space-m); }
.facts-list { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.facts-list div { background: #fff; border-radius: var(--radius-m); padding: 1rem 1.25rem; }
.facts-list dt { font-family: var(--font-display-wide); font-weight: 700; color: var(--bufi-blue-deep); font-size: var(--step-0); }
.facts-list dd { margin: 0.25rem 0 0; color: var(--fg-muted); }
.program__facts-note { font-size: var(--step--1); color: var(--fg-muted); max-width: 60ch; }
.program__faq .faq__item { border: 2px solid var(--bg-ice); }
.program__faq .faq__item + .faq__item { margin-top: var(--space-s); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.program__more { max-width: 65ch; margin: var(--space-m) auto 0; }
.post--page .post__head { margin-bottom: var(--space-l); }
.post__body h2 { font-family: var(--font-display-wide); font-weight: 700; font-size: var(--step-2); line-height: 1.05; color: var(--bufi-blue-deep); margin-top: var(--space-l); }
.post__related { margin-top: var(--space-xl); padding-top: var(--space-l); border-top: 2px solid var(--bg-ice); display: grid; gap: var(--space-m); }
.post__related h2 { font-family: var(--font-display-wide); font-weight: 700; font-size: var(--step-1); color: var(--bufi-blue-deep); }
.parents__more { max-width: 46rem; margin: 0 auto; padding: 0 var(--gutter) var(--section-pad); display: grid; gap: var(--space-m); }
.parents__more h2 { font-family: var(--font-display-wide); font-weight: 700; font-size: var(--step-1); color: var(--bufi-blue-deep); }