/* Tokens: from DESIGN_PREFERENCES.md, plus the CTA text colour given in the brief. */
:root {
  --primary: #DD6B3F;        /* primary colour */
  --primary-deep: #9A2D11;   /* "Book Now" text on the white nav button */
  --bg: #FBF4EF;             /* page background (full page) */
  --white: #fff;
  --ink: #3A2418;            /* Dark text color (design preferences) */
  --ink-light: #706057;      /* Light text color (design preferences) */
  --muted: #DFD5CE;          /* very light tint of the dark text colour, for text not yet revealed */
  --icon: #9A2D11;           /* line-art icon colour (unchanged brown) */
  --rule: rgba(58, 36, 24, .16);   /* divider lines on the light background */

  --font: "Parkinsans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gutter: clamp(20px, 4vw, 56px);
  --bar-h: 44px;             /* promo bar height, set by JS to the real value */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }          /* background applied to the full page */
body { font-family: var(--font); font-weight: 400; line-height: 1.5; color: var(--white); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

/* ---------- Promo bar ---------- */
.promo { background: var(--primary); color: var(--white); text-align: center; padding: 11px var(--gutter); }
.promo p { margin: 0; font-size: .875rem; font-weight: 600; line-height: 1.35; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100vh - var(--bar-h)); min-height: calc(100svh - var(--bar-h));
  display: flex; flex-direction: column;
  background: #4a2a1c;
}
.hero__video, .hero__tone, .hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero__video { object-fit: cover; object-position: 50% 40%; filter: saturate(1.08) sepia(.14) brightness(.96); }
/* Warm tone to match the design reference: orange cast, then a shade for legibility */
.hero__tone { background: linear-gradient(180deg, rgba(221, 107, 63, .22), rgba(154, 45, 17, .26)); mix-blend-mode: multiply; }
.hero__shade {
  background:
    linear-gradient(180deg, rgba(40, 18, 8, .5) 0%, rgba(40, 18, 8, 0) 26%),
    linear-gradient(0deg, rgba(40, 18, 8, .72) 0%, rgba(40, 18, 8, .35) 42%, rgba(40, 18, 8, 0) 72%),
    linear-gradient(90deg, rgba(40, 18, 8, .38) 0%, rgba(40, 18, 8, 0) 62%);
}

/* ---------- Navigation ---------- */
.nav {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter);
}
.nav__left { display: flex; align-items: center; gap: clamp(24px, 3.4vw, 52px); }
.nav__right { display: flex; align-items: center; gap: 10px; }

.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--white); text-decoration: none; }
.logo--img img { display: block; width: clamp(200px, 17vw, 250px); height: auto; margin: -16px 0 -16px -8px; }
.bookbar .logo--img img { width: clamp(170px, 16vw, 220px); margin: -14px 0 -14px -6px; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name { font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; }
.logo__sub { margin-top: 3px; font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; opacity: .95; }

.nav__menu ul { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px); margin: 0; padding: 0; list-style: none; }
.nav__menu a { font-size: .875rem; font-weight: 500; text-decoration: none; padding: 6px 0; opacity: .95; white-space: nowrap; display: inline-flex; align-items: center; line-height: 1.2; }
.nav__menu a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }

/* Submenu under "Our stations": opens on hover or keyboard focus */
.nav__menu .has-sub { position: relative; }
.nav__menu .has-sub > a { display: inline-flex; align-items: center; gap: 7px; }
.nav__chev { transition: transform .2s ease; }
.nav__menu .has-sub:hover .nav__chev, .nav__menu .has-sub:focus-within .nav__chev { transform: rotate(180deg); }
.nav__menu .sub {
  position: absolute; left: -14px; top: 100%; z-index: 10; display: block; width: max-content; min-width: 13.5rem; margin-top: 12px; padding: 8px;
  border-radius: 16px; background: var(--white); color: var(--ink); box-shadow: 0 18px 44px rgba(40, 18, 8, .28);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav__menu .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* keeps the hover alive across the gap */
.nav__menu .has-sub:hover .sub, .nav__menu .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.nav__menu .sub a { display: block; padding: 10px 14px; border-radius: 10px; font-size: .9rem; font-weight: 500; opacity: 1; color: var(--ink); }
.nav__menu .sub a:hover, .nav__menu .sub a:focus-visible { background: var(--bg); text-decoration: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  min-height: 48px; padding: 0 28px; border-radius: 999px;            /* capsule: every CTA on the page shares this shape, size and type */
  font: 600 1rem/1 var(--font); text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--white { background: var(--white); color: var(--primary-deep); }
.btn--white:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .22); }
.btn--primary { background: var(--primary); color: var(--white); }       /* colour variants only: white on dark/photo, primary on light */
.btn--primary:hover { box-shadow: 0 8px 20px rgba(221, 107, 63, .4); }

/* ---------- Hero content ---------- */
.hero__content {
  position: relative; z-index: 2;
  flex: 1; display: flex; align-items: flex-end; align-content: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 28px 40px;
  padding: clamp(40px, 8vh, 96px) var(--gutter) max(var(--gutter), clamp(40px, 8vh, 80px));   /* bottom gap at least matches the side gap */
}
.hero__text { max-width: 46rem; }
.eyebrow {
  display: inline-block; margin: 0 0 clamp(14px, 2vh, 22px);
  padding: 9px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: .9rem; font-weight: 500; line-height: 1.2;
}
.hero h1 {
  margin: 0; font-weight: 700; letter-spacing: -0.02em;              /* Parkinsans Bold, -2% */
  font-size: clamp(2.7rem, 7.4vw, 6.4rem); line-height: .98;
  text-wrap: balance; text-shadow: 0 2px 28px rgba(40, 18, 8, .3);
}

.hero__sub {
  margin: clamp(14px, 2.2vh, 22px) 0 0; max-width: 34rem;
  font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 500; line-height: 1.45;
  text-shadow: 0 1px 18px rgba(40, 18, 8, .35);
}

/* ---------- Session box ---------- */
.session {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  width: min(34rem, 100%); padding: 22px 24px; border-radius: 22px;
  background: rgba(255, 255, 255, .92); color: #3a2418;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(40, 18, 8, .3);
}
.session__label { margin: 0 0 4px; font-size: .9rem; font-weight: 500; opacity: .7; }
.session__time { margin: 0 0 6px; font-size: clamp(1.45rem, 2.4vw, 1.85rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.session__price { margin: 0; font-size: .95rem; opacity: .8; }
.session__action { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* "LIVE"-style pulsing urgency dot */
.live { display: flex; align-items: center; gap: 9px; margin: 0; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.live__dot { position: relative; width: 11px; height: 11px; flex: none; border-radius: 50%; background: var(--primary); }
.live__dot::before, .live__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--primary); opacity: .55; animation: live-pulse 1.8s ease-out infinite;
}
.live__dot::after { animation-delay: .9s; }
@keyframes live-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.2); opacity: 0; } }

/* ---------- Philosophy section ---------- */
/* The section is one screen plus extra scroll length (--philo-extra, set in hero.js). The stage stays pinned
   while that extra length scrolls past, and the text reveal follows it. More length = slower reveal. */
.philo { position: relative; background: var(--bg); color: var(--ink); min-height: calc(100vh + var(--philo-extra, 0px)); min-height: calc(100svh + var(--philo-extra, 0px)); }
.philo__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; padding: 0 var(--gutter); }
.philo__inner { max-width: 74rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(28px, 4vw, 44px); }

/* Sized to the viewport so the paragraph sets in about 4 to 5 lines on tablet, laptop and desktop screens. */
.philo__text {
  margin: 0; font-size: clamp(1.25rem, 3.2vw, 3rem); font-weight: 700; line-height: 1.4; letter-spacing: -0.03em;
  text-wrap: balance;
}
/* Scroll-linked reveal: each word carries its own progress (--p, 0-100), set from scroll in hero.js.
   Dark brown fills each word left to right; unrevealed text is a very light muted tone. */
.philo__text .w {
  --p: 100;
  background-image: linear-gradient(90deg, var(--ink) calc(var(--p) * 1.2% - 20%), var(--muted) calc(var(--p) * 1.2%));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Icon: hand-drawn style line art, with a subtle hover */
.philo__icon { color: var(--icon); line-height: 0; cursor: default; }
.philo__icon svg { display: block; overflow: visible; transition: transform .55s cubic-bezier(.3, 1.4, .5, 1); }
.philo__icon:hover svg { transform: translateY(-5px) rotate(-2.5deg); }
.ic-heart, .ic-leaf { transform-box: fill-box; transform-origin: center; transition: transform .5s ease; }
.philo__icon:hover .ic-heart { animation: ic-beat 1.1s ease-in-out infinite; }
.philo__icon:hover .ic-leaf--l { transform: rotate(-14deg) translateY(-1px); }
.philo__icon:hover .ic-leaf--r { transform: rotate(14deg) translateY(-1px); }
.ic-people { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .5s ease; }
.philo__icon:hover .ic-people { transform: scale(1.04); }
@keyframes ic-beat { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.22); } 60% { transform: scale(1.05); } }

/* ---------- Bento grid ---------- */
.bento { background: var(--bg); padding: 0 var(--gutter) clamp(72px, 10vw, 140px); }
.bento__grid {
  max-width: 76rem; margin: 0 auto;
  display: grid; gap: 20px;
  grid-template-columns: 1fr 1.08fr 1fr;
  grid-template-areas: "stations photo team" "twenty photo teach";
}
.card--stations { grid-area: stations; } .card--20 { grid-area: twenty; }
.card--team { grid-area: team; } .card--teach { grid-area: teach; }
.bento__photo { grid-area: photo; }

.card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  padding: 34px 28px; border-radius: 22px; background: var(--white); color: var(--ink);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(58, 36, 24, .08); }
.card__icon { width: 52px; height: 52px; flex: none; color: var(--icon); margin-bottom: 4px; }
.card h3 { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.card p { margin: 0; max-width: 22rem; font-size: .95rem; line-height: 1.6; color: var(--ink-light); }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.chips li { padding: 7px 14px; border-radius: 999px; background: var(--bg); color: var(--ink); font-size: .875rem; font-weight: 500; line-height: 1.2; }

.bento__photo { position: relative; margin: 0; border-radius: 22px; overflow: hidden; min-height: 440px; background: #d9c9bd; }
.bento__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; transition: transform .8s ease; }
.bento__photo:hover img { transform: scale(1.04); }
.bento__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(58, 36, 24, .55), rgba(58, 36, 24, 0) 45%); pointer-events: none; }
.bento__photo figcaption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 22px; }

/* Card icon animations: each icon plays once when the card is hovered. */
.card__icon { transition: transform .4s ease; }
.card:hover .card__icon { transform: translateY(-3px); }
.card__icon [class^="i-"] { transform-box: fill-box; transform-origin: center; }

/* Stations: awning flaps, door swings open */
.i-awning { transform-origin: 50% 0 !important; }
.card:hover .i-awning { animation: ic-awning .8s ease both; }
.i-door { transform-origin: 0 50% !important; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.card:hover .i-door { transform: scaleX(.28); }
@keyframes ic-awning { 0%, 100% { transform: scaleY(1); } 30% { transform: scaleY(.8); } 60% { transform: scaleY(1.1); } }

/* 20 kids: the three heads hop one after another */
.card:hover .i-p { animation: ic-hop .6s ease both; }
.card:hover .i-p--l { animation-delay: .1s; } .card:hover .i-p--r { animation-delay: .2s; }
@keyframes ic-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }

/* Team: star spins and pops, person tips a nod */
.i-person { transition: transform .4s ease; transform-origin: 50% 100% !important; }
.card:hover .i-person { transform: rotate(-4deg); }
.card:hover .i-star { animation: ic-star .9s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes ic-star { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(144deg) scale(1.3); } 100% { transform: rotate(288deg) scale(1); } }

/* Teach: bulb lights up with rays */
.i-rays { opacity: 0; transform: scale(.7); transform-origin: 50% 100% !important; transition: opacity .3s ease, transform .4s ease; }
.card:hover .i-rays { opacity: 1; transform: scale(1); }
.card:hover .i-bulb { animation: ic-bulb .8s ease both; }
@keyframes ic-bulb { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.08); } }

/* Scroll reveal, once: JS adds .js to the page and .is-in when the grid first scrolls into view.
   Backwards fill, so hover transforms still work after the animation ends. */
.js .bento:not(.is-in) .bento__grid > * { opacity: 0; }
.js .bento.is-in .bento__grid > * { animation: bento-in .85s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 110ms); }
.js .bento.is-in .bento__photo { animation-name: bento-photo; animation-duration: 1.1s; }
@keyframes bento-in { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes bento-photo { from { opacity: 0; transform: translateY(34px) scale(.96); } to { opacity: 1; transform: none; } }

@media (max-width: 999px) {
  .bento__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "photo photo" "stations twenty" "team teach"; }
  .bento__photo { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 639px) {
  .bento__grid { grid-template-columns: 1fr; grid-template-areas: "photo" "stations" "twenty" "team" "teach"; gap: 14px; }
  .bento__photo { aspect-ratio: 4 / 3; }
  .card { padding: 28px 22px; }
}

/* ---------- Play stations: full-width expanding cards ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stations { position: relative; background: var(--bg); }
.pstrip { display: flex; gap: 4px; height: clamp(480px, 82vh, 760px); height: clamp(480px, 82svh, 760px); }
.pcard {
  position: relative; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; border: 0; overflow: hidden;
  background: #3a2418; color: var(--white); font: inherit; text-align: left; cursor: pointer;
  transition: flex-grow .75s cubic-bezier(.3, .7, .2, 1);
}
.pcard.is-active { flex-grow: 4.4; }
a.pcard { display: block; text-decoration: none; }
/* "Explore station" pill, shown on the open card. It is a label: the whole card is the link. */
.pcard__cta { position: absolute; z-index: 2; left: clamp(20px, 2.6vw, 40px); bottom: clamp(20px, 2.6vw, 36px); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .4s ease, transform .4s ease; }
.pcard.is-active .pcard__cta { opacity: 1; transform: none; transition-delay: .3s; }
.pcard.is-active:hover .pcard__cta { box-shadow: 0 6px 18px rgba(0, 0, 0, .22); }
.pcard__thumb, .pcard__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard__thumb { filter: brightness(.88); transition: filter .4s ease, transform 1s ease; }
.pcard:not(.is-active):hover .pcard__thumb { filter: brightness(1); transform: scale(1.04); }
.pcard.is-active .pcard__thumb { filter: none; }
.pcard__video { opacity: 0; transition: opacity .5s ease; }
.pcard.is-playing .pcard__video { opacity: 1; }
.pcard__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(40, 18, 8, .55) 0%, rgba(40, 18, 8, 0) 34%); }

/* Vibrant primary-colour wash on inactive cards, close to the solid shade of the "Book Now" CTA.
   It clears when a card becomes active and eases back on hover so the photo shows through. */
.pcard::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--primary); opacity: .82; pointer-events: none; transition: opacity .5s ease; }
.pcard.is-active::before { opacity: 0; }
.pcard:not(.is-active):hover::before { opacity: .6; }

.pcard__title, .pcard__vtitle { z-index: 2; position: absolute; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; text-shadow: 0 1px 16px rgba(40, 18, 8, .35); transition: opacity .4s ease; }
.pcard__title { left: clamp(20px, 2.6vw, 40px); top: clamp(20px, 2.6vw, 36px); font-size: clamp(1.7rem, 3.2vw, 2.9rem); opacity: 0; pointer-events: none; }
.pcard.is-active .pcard__title { opacity: 1; transition-delay: .25s; }
.pcard__vtitle { left: 50%; top: 22px; font-size: 1.05rem; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); white-space: nowrap; }
.pcard.is-active .pcard__vtitle { opacity: 0; }
.pcard:focus-visible { outline-offset: -5px; }

/* Scroll reveal, once: the cards rise in one after another the first time the section scrolls into view.
   Backwards fill, so nothing is left overridden after the animation ends. */
.js .stations:not(.is-in) .pcard { opacity: 0; }
.js .stations.is-in .pcard { animation: pcard-in .9s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 120ms); }
@keyframes pcard-in { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }

@media (max-width: 699px) {
  .pstrip { flex-direction: column; height: 640px; }
  .pcard.is-active { flex-grow: 5; }
  .pcard__title { font-size: 1.6rem; }
  .pcard__vtitle { writing-mode: horizontal-tb; transform: none; left: 20px; top: 50%; translate: 0 -50%; font-size: 1.1rem; }
}

/* ---------- Parents section: left-aligned list + image that follows hover ---------- */
.parents { background: var(--bg); color: var(--ink); padding: clamp(72px, 10vw, 150px) var(--gutter); }
.parents__inner { max-width: 76rem; margin: 0 auto; }
.parents__head h2 { margin: 0 0 clamp(14px, 1.6vw, 20px); max-width: 18em; font-size: clamp(2rem, 4.6vw, 3.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; text-wrap: balance; }
.parents__head p { margin: 0; max-width: 34rem; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--ink-light); }

.parents__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); margin-top: clamp(40px, 6vw, 76px); align-items: stretch; }

.plist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-bottom: 1px solid var(--rule); }
.pitem { position: relative; padding: clamp(24px, 2.6vw, 34px) 0; border-top: 1px solid var(--rule); cursor: pointer; outline: none; }
.pitem::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--primary); transition: width .6s cubic-bezier(.3, .7, .2, 1); }
.pitem.is-active::before { width: 100%; }
.pitem h3 { margin: 0 0 10px; font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink-light); transition: color .4s ease; }
.pitem.is-active h3 { color: var(--ink); }
.pitem p { margin: 0; max-width: 31rem; font-size: 1rem; line-height: 1.65; color: var(--ink-light); }
.pitem:focus-visible { box-shadow: none; }
.pitem:focus-visible h3 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--primary); }

.pimages { position: relative; margin: 0; min-height: 420px; border-radius: 22px; overflow: hidden; background: #e8dacd; }
.pimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .7s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1);
  filter: saturate(.92) sepia(.1) contrast(1.02); }   /* keeps mixed stock photos in the page's warm tone */
.pimg.is-active { opacity: 1; transform: none; }
.pimages::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(221, 107, 63, .1); mix-blend-mode: multiply; }

/* Inline photo inside each item: used on tablet and phone only (desktop uses the swapping image on the right) */
.pitem__media { display: none; }

@media (max-width: 859px) {
  .parents__split { grid-template-columns: 1fr; gap: 0; }
  .pimages { display: none; }                      /* no sticky or separate image panel; each item carries its own photo */
  .pitem { cursor: default; }
  .pitem::before { display: none; }
  .pitem h3 { color: var(--ink); }
  .pitem__media { display: block; position: relative; margin-bottom: 20px; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 11; background: #e8dacd; }
  .pitem__media img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) sepia(.1) contrast(1.02); }
  .pitem__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(221, 107, 63, .1); mix-blend-mode: multiply; }
}

/* ---------- Celebrations: full-width image section ---------- */
.celebrate { position: relative; isolation: isolate; overflow: hidden; display: flex; min-height: clamp(520px, 80vh, 780px); min-height: clamp(520px, 80svh, 780px); background: #8a4a32; color: var(--white); }
.celebrate__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
  filter: saturate(.74) sepia(.18) contrast(1.02); }          /* pulls the busy party colours into the page's warm tone */
/* Deep-brown shade so white text stays legible over the photo */
.celebrate__shade { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(58, 36, 24, .8) 0%, rgba(58, 36, 24, .52) 48%, rgba(58, 36, 24, .14) 100%), linear-gradient(0deg, rgba(58, 36, 24, .4), rgba(58, 36, 24, 0) 45%); }
.celebrate__content { flex: 1; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 36px 48px; padding: clamp(56px, 9vw, 120px) var(--gutter); }
.celebrate__text { max-width: 38rem; }
.celebrate h2 { margin: 0 0 clamp(14px, 1.6vw, 22px); font-size: clamp(2rem, 4.6vw, 3.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; text-wrap: balance; text-shadow: 0 2px 24px rgba(40, 18, 8, .25); }
.celebrate p { margin: 0 0 clamp(22px, 2.4vw, 32px); font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 500; line-height: 1.55; text-shadow: 0 1px 16px rgba(40, 18, 8, .3); }
.celebrate__price { display: flex; flex-direction: column; gap: 2px; margin: 0; padding-left: clamp(20px, 2.4vw, 32px); border-left: 2px solid rgba(255, 255, 255, .55); text-shadow: none; }
.celebrate__from { font-size: 1rem; font-weight: 500; opacity: .92; }
.celebrate__amount { font-size: clamp(3.2rem, 7vw, 5.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.celebrate__note { margin-top: 6px; font-size: .95rem; font-weight: 500; opacity: .9; }
@media (max-width: 699px) {
  .celebrate__content { flex-direction: column; align-items: flex-start; }
  .celebrate__shade { background: linear-gradient(0deg, rgba(58, 36, 24, .86) 0%, rgba(58, 36, 24, .6) 55%, rgba(58, 36, 24, .3) 100%); }
}
/* ---------- How a visit works: contained panel with four connected steps ---------- */
.visit { background: var(--bg); color: var(--ink); padding: clamp(64px, 8vw, 120px) var(--gutter) clamp(72px, 9vw, 136px); }
.visit__panel { max-width: 76rem; margin: 0 auto; padding: clamp(28px, 5vw, 68px); border-radius: 28px; background: var(--white); }
.visit__head h2 { margin: 0 0 12px; font-size: clamp(1.9rem, 3.8vw, 3.1rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; text-wrap: balance; }
.visit__head p { margin: 0; max-width: 32rem; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.55; color: var(--ink-light); }

.steps { --gap: clamp(24px, 3vw, 44px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.step { position: relative; }
.step__num { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 50%; background: var(--primary); color: var(--white); font-size: 1.1rem; font-weight: 700; line-height: 1; }
.step h3 { margin: 0 0 10px; font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.step p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-light); }
/* Line linking each step to the next */
.step:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 58px; right: calc(var(--gap) * -1 + 14px); height: 2px; border-radius: 2px; background: var(--primary); opacity: .35; transform-origin: left center; }

/* Scroll reveal, once: steps rise in and the connecting lines draw across. */
.js .visit:not(.is-in) .step { opacity: 0; }
.js .visit.is-in .step { animation: step-in .8s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 160ms); }
.js .visit.is-in .step:not(:last-child)::after { animation: step-line .8s ease-out backwards; animation-delay: calc(var(--i, 0) * 160ms + 350ms); }
@keyframes step-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes step-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 999px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(32px, 5vw, 48px); }
  .step:not(:last-child)::after { display: none; }       /* the line only makes sense on one row */
}
@media (max-width: 559px) {
  .steps { grid-template-columns: 1fr; row-gap: 0; }
  .step { padding: 0 0 32px 64px; }
  .step:last-child { padding-bottom: 0; }
  .step__num { position: absolute; left: 0; top: 0; margin: 0; }
  /* vertical line down the numbers */
  .step:not(:last-child)::after { display: block; top: 50px; bottom: 6px; left: 21px; right: auto; width: 2px; height: auto; transform-origin: top center; }
  .js .visit.is-in .step:not(:last-child)::after { animation-name: step-line-y; }
}
@keyframes step-line-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- One-on-one support: contained photo panel, short headline, three cards ---------- */
.support { background: var(--bg); color: var(--white); padding: 0 0 clamp(72px, 9vw, 136px); }
.support__panel { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(36px, 5vw, 64px); min-height: clamp(520px, 68svh, 680px); padding: clamp(44px, 6vw, 80px) max(var(--gutter), calc((100% - 76rem) / 2)); background: #8a4a32; }
.support__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; filter: saturate(.8) sepia(.2) contrast(1.02); }
.support__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(58, 36, 24, .72) 0%, rgba(58, 36, 24, .3) 50%, rgba(58, 36, 24, 0) 100%), linear-gradient(0deg, rgba(58, 36, 24, .6), rgba(58, 36, 24, 0) 65%); }
.support__content { max-width: 34rem; }
.support__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.support__link { color: var(--white); font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 6px; text-decoration-thickness: 1.5px; transition: text-decoration-color .2s ease; }
.support__link:hover, .support__link:focus-visible { text-decoration-color: var(--white); }
.support h2 { margin: 0 0 clamp(20px, 2.4vw, 32px); font-size: clamp(1.9rem, 3.8vw, 3.1rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; text-wrap: balance; color: var(--white); }
.support p { margin: 0 0 clamp(28px, 3vw, 40px); max-width: 30rem; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.6; color: rgba(255, 255, 255, .9); }
.support__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4.5vw, 72px); margin: 0; padding: clamp(28px, 3vw, 40px) 0 0; border-top: 1px solid rgba(255, 255, 255, .28); list-style: none; }
.scard { color: var(--white); }
.scard__icon { display: block; width: 48px; height: 48px; margin-bottom: 20px; color: var(--white); transition: transform .4s ease; }
.scard:hover .scard__icon { transform: translateY(-3px); }
.scard__icon [class^="i-"] { transform-box: fill-box; transform-origin: center; }
.scard h3 { margin: 0 0 6px; font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.scard p { margin: 0; max-width: 18rem; font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .86); }

/* Support icons: heart beats, focus brackets tighten, rings slide together. */
.i-sheart { transform-box: fill-box; transform-origin: center; }
.scard:hover .i-sheart { animation: ic-beat 1.1s ease-in-out infinite; }
.scard:hover .i-child { animation: ic-hop .6s ease both; }
.i-duo { transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.scard:hover .i-duo--l { transform: translateX(3px) rotate(4deg); }
.scard:hover .i-duo--r { transform: translateX(-3px) rotate(-4deg); }
.i-ring { transform-box: fill-box; transition: transform .5s cubic-bezier(.3, 1.3, .5, 1); }
.scard:hover .i-ring--l { transform: translateX(3.500px); }
.scard:hover .i-ring--r { transform: translateX(-3.500px); }
@media (prefers-reduced-motion: reduce) { .scard:hover .scard__icon, .scard:hover [class^="i-"] { animation: none !important; transform: none !important; } }
@media (max-width: 859px) {
  .support__cards { grid-template-columns: 1fr; gap: 28px; }
  .support__panel { min-height: 0; }
  .support__shade { background: linear-gradient(180deg, rgba(58, 36, 24, .72) 0%, rgba(58, 36, 24, .45) 45%, rgba(58, 36, 24, .3) 100%); }
}
/* ---------- FAQ: intro on the left, accordion with dividers on the right ---------- */
.faq { background: var(--bg); color: var(--ink); padding: 0 var(--gutter) clamp(72px, 9vw, 136px); }
.faq__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); max-width: 76rem; margin: 0 auto; }
.faq__intro { align-self: start; position: sticky; top: calc(var(--bar-h, 0px) + 96px); }
.faq h2 { margin: 0 0 14px; font-size: clamp(1.9rem, 3.8vw, 3.1rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; text-wrap: balance; }
.faq__intro p { margin: 0 0 22px; max-width: 24rem; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.55; color: var(--ink-light); }
.faq__link { color: var(--primary-deep); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(154, 45, 17, .35); text-underline-offset: 6px; text-decoration-thickness: 1.5px; transition: text-decoration-color .2s ease; }
.faq__link:hover, .faq__link:focus-visible { text-decoration-color: var(--primary-deep); }
.qa { border-top: 1px solid var(--rule); }
.qa:last-child { border-bottom: 1px solid var(--rule); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(20px, 2.4vw, 28px) 0; cursor: pointer; list-style: none; font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline: 2px solid var(--primary-deep); outline-offset: 4px; border-radius: 6px; }
.qa__icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); transition: transform .35s cubic-bezier(.3, 1.3, .5, 1); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--white); transition: transform .3s ease; }
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon::after { transform: rotate(0); }
.qa summary:hover .qa__icon { transform: scale(1.08); }
.qa__body { padding: 0 56px clamp(22px, 2.6vw, 30px) 0; }
.qa[open] .qa__body { animation: qa-in .4s ease backwards; }
.qa__body p { margin: 0; max-width: 40rem; font-size: 1rem; line-height: 1.65; color: var(--ink-light); }
@keyframes qa-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 859px) {
  .faq__inner { grid-template-columns: 1fr; }
  .faq__intro { position: static; }
  .qa__body { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .qa[open] .qa__body { animation: none; } .qa__icon, .qa__icon::before, .qa__icon::after { transition: none; } }

/* ---------- Final CTA: full-width photo, with the footer card overlapping its bottom edge ---------- */
.finale { --lap: clamp(96px, 11vw, 160px); position: relative; isolation: isolate; overflow: hidden; background: #8a4a32; }   /* the photo fills the whole block, so it stays visible around and below the footer card */
.finale__hero { position: relative; display: flex; align-items: flex-start; justify-content: center; min-height: clamp(600px, 88svh, 820px); padding: clamp(72px, 9vw, 120px) var(--gutter) calc(var(--lap) + clamp(40px, 6vw, 80px)); text-align: center; color: var(--white); }
.finale__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 31%; filter: saturate(.8) sepia(.22) contrast(1.02); }
.finale__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(58, 36, 24, .78) 0%, rgba(58, 36, 24, .55) 22%, rgba(58, 36, 24, .14) 42%, rgba(58, 36, 24, .08) 100%); }
.finale__content { max-width: 40rem; }
.finale h2 { margin: 0 0 clamp(14px, 1.6vw, 20px); font-size: clamp(2.1rem, 5vw, 4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; text-wrap: balance; }
.finale__content p { margin: 0 auto clamp(26px, 3vw, 36px); max-width: 30rem; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.55; color: rgba(255, 255, 255, .92); }

.foot { position: relative; z-index: 1; margin: calc(var(--lap) * -1) clamp(12px, 2.6vw, 36px) clamp(12px, 2.6vw, 36px); padding: clamp(36px, 5vw, 64px) clamp(24px, 4.5vw, 64px) 28px; border-radius: 28px; background: var(--bg); color: var(--ink); }
.foot .logo { color: var(--primary-deep); }
.foot__logo { display: inline-block; }
.foot__logo img { display: block; width: clamp(250px, 24vw, 320px); height: auto; margin: -12px 0 0 -8px; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.9fr) repeat(4, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); max-width: 76rem; margin: 0 auto; }
.foot__brand p { margin: 16px 0 0; max-width: 18rem; font-size: .95rem; line-height: 1.55; color: var(--ink-light); }
.foot__col h3 { margin: 0 0 14px; font-size: .95rem; font-weight: 700; letter-spacing: -0.01em; }
.foot__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.foot__col li, .foot__col a { font-size: .95rem; line-height: 1.4; color: var(--ink-light); text-decoration: none; }
.foot__col a:hover, .foot__col a:focus-visible { color: var(--primary-deep); text-decoration: underline; text-underline-offset: 4px; }
.foot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; max-width: 76rem; margin: clamp(36px, 5vw, 64px) auto 0; padding-top: 22px; border-top: 1px solid var(--rule); font-size: .875rem; color: var(--ink-light); }
@media (max-width: 859px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 479px) { .foot__grid { grid-template-columns: 1fr; } }

/* ---------- Station inner pages: photo hero, "what kids learn" cards, photo collage ---------- */
.hero__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: saturate(1.05) sepia(.14) brightness(.96); }

.learn { background: var(--bg); color: var(--ink); padding: clamp(72px, 10vw, 150px) var(--gutter) clamp(56px, 7vw, 104px); }
.learn__inner { max-width: 76rem; margin: 0 auto; }
.learn__head { max-width: 40rem; margin-bottom: clamp(32px, 4vw, 56px); }
.learn h2, .gallery h2 { margin: 0 0 14px; font-size: clamp(1.9rem, 3.8vw, 3.1rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; text-wrap: balance; }
.learn__head p, .gallery__head p { margin: 0; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.55; color: var(--ink-light); }
.learn__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin: 0; padding: 0; list-style: none; }
.lcard { padding: clamp(24px, 2.6vw, 36px); border-radius: 22px; background: var(--white); color: var(--ink); transition: transform .25s ease, box-shadow .25s ease; }
.lcard:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(58, 36, 24, .08); }
.lcard__icon { display: block; width: 52px; height: 52px; margin-bottom: 20px; color: var(--icon); transition: transform .4s ease; }
.lcard:hover .lcard__icon { transform: translateY(-3px); }
.lcard__icon [class^="i-"] { transform-box: fill-box; transform-origin: center; }
.lcard h3 { margin: 0 0 8px; font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.lcard p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-light); }
.learn__tip { max-width: 40rem; margin: clamp(28px, 3.4vw, 44px) 0 0; padding-left: 18px; border-left: 3px solid var(--primary); font-size: 1.02rem; line-height: 1.6; color: var(--ink-light); }
.learn__tip strong { color: var(--ink); }
/* icon motion: dots hop in the speech bubble, basket lifts, box drops onto the shelf */
.lcard:hover .i-dot { animation: ic-hop .6s ease both; }
.lcard:hover .i-dot:nth-of-type(2) { animation-delay: .1s; } .lcard:hover .i-dot:nth-of-type(3) { animation-delay: .2s; }
.i-handle { transition: transform .4s cubic-bezier(.3, 1.3, .5, 1); }
.lcard:hover .i-handle { transform: translateY(-5px); }
.i-drop { transition: transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.lcard:hover .i-drop { transform: translateY(7px); }

.gallery { background: var(--bg); color: var(--ink); padding: 0 var(--gutter) clamp(72px, 9vw, 136px); }
.gallery__inner { max-width: 76rem; margin: 0 auto; }
.gallery__head { max-width: 40rem; margin-bottom: clamp(28px, 3.6vw, 48px); }
.gallery__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 25vw, 320px); gap: clamp(10px, 1.4vw, 18px); }
.gcell { position: relative; margin: 0; overflow: hidden; border-radius: 22px; background: #d9c9bd; }
.gcell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: var(--z, 1); transform-origin: var(--o, 50% 50%); filter: saturate(.92) sepia(.1); transition: transform .8s ease; }   /* --z / --o crop the one photo differently per tile */
.gcell:hover img { transform: scale(1.05); }
.gcell--a { grid-column: span 7; } .gcell--b { grid-column: span 5; } .gcell--c, .gcell--d, .gcell--e { grid-column: span 4; }
.gallery__grid--4 .gcell--a, .gallery__grid--4 .gcell--d { grid-column: span 7; } .gallery__grid--4 .gcell--b, .gallery__grid--4 .gcell--c { grid-column: span 5; }
.gallery__grid--4 .gcell img { filter: none; }

.js .reveal:not(.is-in) :is(.learn__head, .gallery__head, .lcard, .gcell, .learn__tip) { opacity: 0; }
.js .reveal.is-in :is(.learn__head, .gallery__head, .lcard, .gcell, .learn__tip) { animation: step-in .85s cubic-bezier(.2, .7, .2, 1) backwards; }
.js .reveal.is-in :is(.lcard, .gcell) { animation-delay: calc(var(--i, 0) * 150ms + 220ms); }
.js .reveal.is-in .learn__tip { animation-delay: 750ms; }

@media (max-width: 899px) { .learn__cards { grid-template-columns: 1fr; } }
@media (max-width: 699px) {
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
  .gcell--a, .gcell--e { grid-column: span 2; } .gcell--b, .gcell--c, .gcell--d { grid-column: span 1; }
  .gallery__grid--4 .gcell--a, .gallery__grid--4 .gcell--d { grid-column: span 2; } .gallery__grid--4 .gcell--b, .gallery__grid--4 .gcell--c { grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.is-in) :is(.learn__head, .gallery__head, .lcard, .gcell, .learn__tip) { opacity: 1; }
  .js .reveal.is-in :is(.learn__head, .gallery__head, .lcard, .gcell, .learn__tip) { animation: none; }
  .lcard:hover .lcard__icon, .lcard:hover [class^="i-"] { animation: none !important; transform: none !important; }
  .gcell:hover img { transform: none; }
}

/* ---------- Booking page: one narrow, calm card ---------- */
.booking { color: var(--ink); }
.bookbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; padding: 0 var(--gutter); }
.bookbar .logo { color: var(--primary-deep); }
.bookbar__back { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-light); font-size: .9rem; font-weight: 600; text-decoration: none; padding: 8px 4px; }
.bookbar__back:hover, .bookbar__back:focus-visible { color: var(--primary-deep); text-decoration: underline; text-underline-offset: 5px; }
.booking :focus-visible { outline-color: var(--primary-deep); }

.book { display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); padding: 8px var(--gutter) clamp(32px, 6vh, 64px); }
.bk-card { width: min(36rem, 100%); padding: clamp(28px, 4vh, 40px) clamp(24px, 3.8vw, 44px) clamp(28px, 4vh, 40px); border-radius: 28px; background: var(--white); }
.bk-form { display: block; }

/* progress */
.bk-steps { display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(20px, 3vh, 28px); padding: 0; list-style: none; }
.bk-steps[hidden] { display: none; }
.bk-steps__item { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; color: var(--ink-light); }
.bk-steps__item + .bk-steps__item::before { content: ""; width: clamp(18px, 4vw, 40px); height: 2px; border-radius: 2px; background: var(--rule); }
.bk-steps__dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); color: var(--ink-light); font-size: .82rem; font-weight: 700; transition: background-color .25s ease, color .25s ease; }
.bk-steps__item.is-active { color: var(--ink); }
.bk-steps__item.is-active .bk-steps__dot { background: var(--primary); color: var(--white); }
.bk-steps__item.is-done .bk-steps__dot { background: var(--primary-deep); color: var(--white); font-size: 0; }
.bk-steps__item.is-done .bk-steps__dot { position: relative; }
.bk-steps__item.is-done .bk-steps__dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translate(-50%, -62%) rotate(45deg); }

.bk-title { margin: 0 0 clamp(20px, 3vh, 28px); font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; outline: none; }
.bk-sub { margin: 0 0 16px; font-size: 1rem; line-height: 1.5; color: var(--ink-light); }
.bk-step[hidden] { display: none; }

/* fields */
.bk-field { margin: 0 0 clamp(16px, 2.4vh, 22px); padding: 0; border: 0; min-width: 0; }
.bk-label { display: block; margin: 0 0 6px; padding: 0; font-size: .9rem; font-weight: 600; color: var(--ink); }
.bk-hint { margin: 5px 0 0; font-size: .82rem; color: var(--ink-light); }
.bk-hint--limit { margin: -6px 0 10px; }
.bk-input { width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid var(--rule); border-radius: 14px; background: var(--white); color: var(--ink); font: 500 1rem/1 var(--font); transition: border-color .15s ease, box-shadow .15s ease; }
.bk-select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.500 6 8.500 10 4.500' fill='none' stroke='%23706057' stroke-width='1.800' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 14px center; }
.bk-input:hover { border-color: rgba(58, 36, 24, .35); }
.bk-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(221, 107, 63, .2); }
.bk-input[aria-invalid="true"] { border-color: #B42318; box-shadow: 0 0 0 4px rgba(180, 35, 24, .12); }
.bk-err { margin: 6px 0 0; font-size: .85rem; font-weight: 600; line-height: 1.35; color: #B42318; }
.bk-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.bk-link { padding: 0; border: 0; background: none; color: var(--primary-deep); font: 600 inherit/1.3 var(--font); text-decoration: underline; text-decoration-color: rgba(154, 45, 17, .35); text-underline-offset: 4px; cursor: pointer; }
.bk-link:hover { text-decoration-color: var(--primary-deep); }
a.bk-link { display: inline-flex; align-items: center; font-size: .95rem; }

/* day chips + session cards (radio inputs, visually hidden) */
.bk-day input, .bk-ses input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bk-days { scrollbar-width: none; display: grid; grid-template-columns: repeat(7, minmax(58px, 1fr)); gap: 8px; overflow-x: auto; padding: 3px; margin: -3px; scroll-snap-type: x proximity; }
.bk-days::-webkit-scrollbar { display: none; }
.bk-day { position: relative; scroll-snap-align: start; }
.bk-day label { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 4px; border: 1.5px solid var(--rule); border-radius: 14px; cursor: pointer; line-height: 1.15; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.bk-day__w { font-size: .75rem; font-weight: 600; color: var(--ink-light); }
.bk-day__n { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.bk-day__m { font-size: .72rem; color: var(--ink-light); }
.bk-day label:hover { border-color: var(--primary); }
.bk-day input:checked + label { background: var(--primary); border-color: var(--primary); color: var(--white); }
.bk-day input:checked + label span { color: var(--white); }
.bk-day input:focus-visible + label, .bk-ses input:focus-visible + label { outline: 3px solid var(--primary-deep); outline-offset: 2px; }

.bk-sessions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bk-ses { position: relative; }
.bk-ses label { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border: 1.5px solid var(--rule); border-radius: 16px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.bk-ses__t { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.bk-ses__s { font-size: .85rem; color: var(--ink-light); }
.bk-ses.is-low .bk-ses__s { color: var(--primary-deep); font-weight: 600; }
.bk-ses label:hover { border-color: var(--primary); }
.bk-ses input:checked + label { border-color: var(--primary); background: rgba(221, 107, 63, .08); box-shadow: inset 0 0 0 1px var(--primary); }
.bk-ses.is-off label { opacity: .55; cursor: not-allowed; background: var(--bg); }
.bk-ses.is-off label:hover { border-color: var(--rule); }
.bk-price { margin: 4px 0 0; font-size: .9rem; color: var(--ink-light); }
.bk-included { margin: 2px 0 0; font-size: .9rem; color: var(--ink-light); }

/* step 2 */
.bk-chosen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 0 0 clamp(20px, 3vh, 26px); padding: 12px 16px; border-radius: 14px; background: var(--bg); font-size: .95rem; font-weight: 600; }
.bk-chosen .bk-link { font-size: .9rem; }
.bk-kidsrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 0 18px; }
.bk-kidsrow .bk-label { margin: 0; font-size: 1rem; }
.bk-count { display: inline-flex; align-items: center; gap: 6px; }
.bk-count__btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1.5px solid var(--rule); border-radius: 50%; background: var(--white); color: var(--ink); font: 600 1.3rem/1 var(--font); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.bk-count__btn:hover:not(:disabled) { border-color: var(--primary); background: rgba(221, 107, 63, .08); }
.bk-count__btn:disabled { opacity: .4; cursor: not-allowed; }
.bk-count__n { min-width: 2.2rem; text-align: center; font-size: 1.35rem; font-weight: 700; }
.bk-ages { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0 14px; }
.bk-ages .bk-label { font-weight: 500; font-size: .85rem; color: var(--ink-light); margin-bottom: 5px; }

.bk-check { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: .95rem; line-height: 1.4; }
.bk-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bk-check__box { flex: none; position: relative; width: 24px; height: 24px; border: 1.5px solid rgba(58, 36, 24, .4); border-radius: 7px; background: var(--white); transition: background-color .15s ease, border-color .15s ease; }
.bk-check input:checked + .bk-check__box { background: var(--primary); border-color: var(--primary); }
.bk-check input:checked + .bk-check__box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.bk-check input:focus-visible + .bk-check__box { outline: 3px solid var(--primary-deep); outline-offset: 2px; }
.bk-agree .bk-err { margin-left: 36px; }

.bk-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); }
.bk-total div { display: flex; flex-direction: column; }
.bk-total strong { font-size: 1.05rem; }
.bk-total span { font-size: .85rem; color: var(--ink-light); }
.bk-total .bk-total__amt { font-size: 1.8rem; letter-spacing: -0.02em; line-height: 1; }
.bk-assure { margin: 12px 0 0; font-size: .82rem; color: var(--ink-light); }

/* actions: Continue on step 1, payment on step 2 */
.bk-actions { margin-top: clamp(20px, 3vh, 28px); }
.bk-actions[hidden], .bk-act[hidden] { display: none; }
#act-1 { display: flex; justify-content: flex-end; }
#act-1[hidden] { display: none; }
.bk-next { min-width: 9rem; }
.bk-wallets { display: grid; grid-template-columns: 1fr; gap: 12px; }
.bk-paybtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: 14px; font: 600 1rem/1 var(--font); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.bk-paybtn[hidden] { display: none; }
.bk-paybtn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(58, 36, 24, .18); }
.bk-paybtn--apple { background: var(--ink); color: var(--white); }
.bk-paybtn--google, .bk-paybtn--card { background: var(--white); color: var(--ink); }

/* confirmation */
.bk-done { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 0; }
.bk-done[hidden] { display: none; }
.bk-done__tick { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 50%; background: var(--primary); color: var(--white); }
.bk-done .bk-title { margin-bottom: 8px; }
.bk-done__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; }

/* success */
.bk-done { align-items: center; text-align: center; padding: 12px 0 4px; }
.bk-done__tick { animation: bk-pop .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.bk-done__when { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.bk-done__paid { margin: 4px 0 0; font-size: 1rem; color: var(--ink-light); }
.bk-done__msg { max-width: 24rem; margin: 22px 0 0; font-size: 1.02rem; line-height: 1.5; }
.bk-done__tips { display: grid; gap: 12px; width: 100%; max-width: 26rem; margin: 22px 0 0; padding: 16px 18px; list-style: none; border-radius: 16px; background: #F3F0EE; text-align: left; }
.bk-done__tips li { display: flex; align-items: center; gap: 12px; font-size: .92rem; line-height: 1.4; color: var(--ink); }
.bk-done__ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--white); color: var(--icon); }
.bk-done__actions { flex-direction: column; gap: 14px; margin-top: 28px; }
.bk-done__actions .btn { min-width: 12rem; }
@keyframes bk-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bk-confetti { position: fixed; inset: 0; z-index: 50; overflow: hidden; pointer-events: none; }
.bk-confetti i { position: absolute; display: block; will-change: transform, opacity; }

/* card details expanding under "Pay with card" */
.bk-paybtn--card[aria-expanded="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.bk-cardwrap { margin: 0 -4px; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s ease, opacity .25s ease; }
.bk-cardwrap.is-open { grid-template-rows: 1fr; opacity: 1; }
.bk-cardwrap__inner { overflow: hidden; min-height: 0; }
.bk-cardwrap.is-open .bk-cardwrap__inner { padding: 22px 4px 4px; }
.bk-cardwrap .bk-field { margin-bottom: 16px; }
.bk-payfull { width: 100%; min-height: 52px; margin-top: 4px; }
.bk-cardnote { margin: 12px 0 0; font-size: .8rem; text-align: center; color: var(--ink-light); }

/* waiver and supervision rules */
.bk-dialog { width: min(32rem, calc(100% - 32px)); padding: 28px; border: 0; border-radius: 24px; background: var(--white); color: var(--ink); box-shadow: 0 24px 70px rgba(40, 18, 8, .35); }
.bk-dialog::backdrop { background: rgba(40, 18, 8, .5); }
.bk-dialog h2 { margin: 0 0 12px; font-size: 1.4rem; letter-spacing: -0.02em; }
.bk-dialog p { margin: 0 0 14px; line-height: 1.55; color: var(--ink-light); }
.bk-dialog strong { color: var(--ink); }
.bk-dialog__tbd { padding: 12px 14px; border: 1.5px dashed var(--rule); border-radius: 12px; font-size: .9rem; }

@media (max-width: 559px) {
  .bookbar { height: 64px; }
  .bk-card { padding-bottom: 20px; }
  .bk-steps__item:not(.is-active) .bk-steps__label { display: none; }
  .bk-grid2, .bk-sessions { grid-template-columns: 1fr; }
  .bk-ages { grid-template-columns: 1fr; }
  .bk-actions:not(.is-pay) { position: sticky; bottom: 0; margin: 14px -22px -20px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); background: var(--white); border-radius: 0 0 28px 28px; }
}
@media (prefers-reduced-motion: reduce) { .bk-steps__dot, .bk-input, .bk-day label, .bk-ses label, .bk-paybtn { transition: none; } }
/* Hero entrance, on page load (home and station pages): the photo or video settles in, then the nav, tag, headline, line and session card rise in one by one. */
@keyframes hero-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-settle { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
.hero__video, .hero__img { animation: hero-settle 1.6s cubic-bezier(.2, .7, .2, 1) backwards; }
.hero .nav { animation: hero-fade .9s ease .1s backwards; }
.hero__text .eyebrow { animation: hero-rise .9s cubic-bezier(.2, .7, .2, 1) .25s backwards; }
.hero__text h1 { animation: hero-rise .9s cubic-bezier(.2, .7, .2, 1) .4s backwards; }
.hero__text .hero__sub { animation: hero-rise .9s cubic-bezier(.2, .7, .2, 1) .55s backwards; }
.hero .session { animation: hero-rise .9s cubic-bezier(.2, .7, .2, 1) .75s backwards; }
@media (prefers-reduced-motion: reduce) { .hero__video, .hero__img, .hero .nav, .hero__text .eyebrow, .hero__text h1, .hero__text .hero__sub, .hero .session { animation: none; } }

/* ---------- Our story page ---------- */
.story-hero .hero__text { max-width: 66rem; }
.story-hero h1 { font-size: clamp(2.2rem, 5.4vw, 4.9rem); line-height: 1.02; }
.story-hero h1 span { display: block; }

.story { background: var(--bg); color: var(--ink); }
.story-sec { padding: clamp(64px, 9vw, 128px) var(--gutter); }
.story-inner { max-width: 76rem; margin: 0 auto; }
.story h2 { margin: 0 0 20px; font-size: clamp(1.9rem, 3.8vw, 3.1rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; text-wrap: balance; }
.story p { margin: 0 0 18px; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.7; color: var(--ink-light); }
.story .story-lead { font-size: clamp(1.12rem, 1.6vw, 1.38rem); line-height: 1.55; color: var(--ink); font-weight: 500; }
.story-sign { margin-top: 26px !important; padding-top: 16px; border-top: 1px solid var(--rule); font-size: .95rem !important; font-weight: 600; color: var(--ink) !important; }

.story-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.story-split--photo-left { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.story-split--text-left { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.story-photo { position: relative; isolation: isolate; margin: 0; border-radius: 28px; }
.story-photo { overflow: hidden; }
.story-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 28px; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.story-photo:hover img { transform: scale(1.05); }
.story-note .story-photo { aspect-ratio: 4 / 5; max-width: 30rem; }
.story-why .story-photo { aspect-ratio: 4 / 5; }
.story-why .story-photo img { border-radius: 28px; }
.story-why { padding-top: 0; }

.story-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.story-chips li { padding: 9px 16px; border-radius: 999px; background: var(--white); color: var(--ink); font-size: .9rem; font-weight: 600; }

/* little town: photo with a cue card pinned to it */
.story-collage { position: relative; padding-bottom: 34px; }
.story-photo--wide { aspect-ratio: 4 / 3; }
.cuecard { position: absolute; right: -14px; bottom: 0; width: min(17rem, 78%); padding: 18px 20px 16px; border: 2px dashed var(--primary); border-radius: 18px; background: var(--white); box-shadow: 0 18px 40px rgba(58, 36, 24, .16); transform: rotate(-3deg); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.cuecard:hover { transform: rotate(0deg) translateY(-4px); }
.cuecard__tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--primary); color: var(--white); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cuecard h3 { margin: 10px 0 8px; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.story .cuecard p { margin: 0 0 8px; font-size: .88rem; line-height: 1.5; color: var(--ink-light); }
.story .cuecard strong { color: var(--ink); }
.story .cuecard__try { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--rule); }

/* orange band */
.story-band-wrap { padding-top: 0; padding-bottom: 0; }
.story-band { max-width: 76rem; margin: 0 auto; padding: clamp(36px, 6vw, 80px); border-radius: 28px; color: var(--white);
  background: radial-gradient(circle at 92% 12%, rgba(255, 255, 255, .16) 0 150px, transparent 151px), radial-gradient(circle at 78% 112%, rgba(255, 255, 255, .12) 0 130px, transparent 131px), var(--primary); }
.story-band__text { max-width: 42rem; }
.story-band h2 { color: var(--white); }
.story .story-band p { color: rgba(255, 255, 255, .94); }

/* photo cards */
.story-feel { padding-top: clamp(64px, 9vw, 128px); }
.story-head { max-width: 38rem; margin: 0 0 clamp(28px, 4vw, 48px); }
.story-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.story-card { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 24px; background: #d9c9bd; color: var(--white); }
.story-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) sepia(.1); transition: transform .8s ease; }
.story-card:hover img { transform: scale(1.05); }
.story-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(40, 18, 8, .75), rgba(40, 18, 8, 0) 58%); pointer-events: none; }
.story-card figcaption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: clamp(18px, 2vw, 26px); }
.story-card strong { font-size: clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing: -0.02em; }
.story-card span { font-size: .95rem; line-height: 1.45; opacity: .95; }

/* hello */
.story-hello { padding-top: 0; }
.story-hello__inner { max-width: 44rem; text-align: center; }

@media (prefers-reduced-motion: reduce) { .story-photo img, .story-card img { transition: none; } .story-photo:hover img, .story-card:hover img { transform: none; } }
@media (max-width: 899px) {
  .story-split, .story-split--photo-left, .story-split--text-left { grid-template-columns: minmax(0, 1fr); }
  .story-note .story-photo { max-width: 22rem; }
  .story-why .story-photo { order: 2; aspect-ratio: 4 / 3; }
  .story-cards { grid-template-columns: minmax(0, 1fr); }
  .story-card { aspect-ratio: 4 / 3; }
  .story-collage { padding-bottom: 0; }
  .cuecard { position: relative; right: auto; bottom: auto; width: 88%; margin: -44px 0 0 auto; }
}

/* ---------- 1:1 sessions page ---------- */
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(20px, 3vh, 30px); }
.hero__link { color: var(--white); font-size: 1rem; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: 6px; text-decoration-thickness: 1.5px; text-shadow: 0 1px 14px rgba(40, 18, 8, .35); transition: text-decoration-color .2s ease; }
.hero__link:hover, .hero__link:focus-visible { text-decoration-color: var(--white); }
.onone-hero .hero__text { max-width: 66rem; }
.onone-hero h1 { font-size: clamp(2.2rem, 5.4vw, 4.9rem); line-height: 1.02; }
.onone-learn { padding-top: 0; }
.learn__cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* three key points: icon + text in a row, no base */
.points-sec { padding-top: clamp(24px, 4vw, 56px); padding-bottom: clamp(40px, 6vw, 80px); }
.points { max-width: 76rem; margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); }
.point { text-align: center; }
.point__icon { display: block; width: 52px; height: 52px; margin: 0 auto 18px; color: var(--icon); transition: transform .4s ease; }
.point:hover .point__icon { transform: translateY(-3px); }
.story .point h3 { margin: 0 0 8px; font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.story .point p { margin: 0 auto; max-width: 22rem; font-size: 1rem; line-height: 1.6; }
@media (max-width: 799px) { .points { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.lcard:hover .i-heart2 { animation: ic-beat 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.i-open { transform-origin: 0 50%; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.lcard:hover .i-open { transform: scaleX(.3); }
.i-bulb2 { transition: transform .4s ease; transform-box: fill-box; transform-origin: 50% 100%; }
.lcard:hover .i-bulb2 { transform: scale(1.08) rotate(-4deg); }

/* how it works: three numbered steps in a white panel */
.hiw { max-width: 76rem; margin: 0 auto; padding: clamp(28px, 5vw, 68px); border-radius: 28px; background: var(--white); }
.hiw__head h2 { margin: 0 0 12px; }
.hiw__head p { margin: 0; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.55; color: var(--ink-light); }
.hiw__steps { --gap: clamp(24px, 3vw, 44px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: clamp(32px, 4.4vw, 56px) 0 0; padding: 0; list-style: none; }
.hiw__step { position: relative; }
.hiw__num { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 50%; background: var(--primary); color: var(--white); font-size: 1.1rem; font-weight: 700; line-height: 1; }
.hiw__step:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 58px; right: calc(var(--gap) * -1 + 14px); height: 2px; border-radius: 2px; background: var(--primary); opacity: .35; }
.hiw__step h3 { margin: 0 0 10px; font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.story .hiw__step p { margin: 0; font-size: 1rem; line-height: 1.6; }
.story-sec#how { padding-top: 0; }

.onone-faq .faq__inner { padding: 0; }
.onone-faq { padding-top: clamp(56px, 7vw, 96px); }

/* intake form */
.onone-assure { font-size: .9rem !important; margin-top: 4px !important; }
.intake { padding: clamp(24px, 3.4vw, 40px); border-radius: 28px; background: var(--white); }
.intake__note { height: auto; min-height: 6rem; padding: 12px 14px; line-height: 1.45; resize: vertical; font-weight: 400; }
.intake__send { width: 100%; min-height: 52px; margin-top: 6px; }
.story .intake__fine { margin: 12px 0 0; font-size: .85rem; text-align: center; color: var(--ink-light); }
.intake__thanks { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 0; outline: none; }
.intake__thanks[hidden] { display: none; }
.intake__thanks h3 { margin: 0 0 8px; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.story .intake__thanks p { max-width: 22rem; margin: 0 0 18px; }
.intake .bk-field label.bk-label { display: block; }

@media (max-width: 1099px) { .learn__cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .hiw__steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hiw__step { padding: 0 0 28px 64px; }
  .hiw__step:last-child { padding-bottom: 0; }
  .hiw__num { position: absolute; left: 0; top: 0; margin: 0; }
  .hiw__step:not(:last-child)::after { top: 50px; bottom: 6px; left: 21px; right: auto; width: 2px; height: auto; }
}
@media (max-width: 599px) { .learn__cards--4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Seasonal Shop page: stacking season cards + page heading for the bento ---------- */
.seasons {
  --gap: clamp(180px, 44svh, 400px); --hold: clamp(80px, 18svh, 200px);
  background: var(--bg); padding: clamp(40px, 6vw, 96px) var(--gutter) clamp(40px, 5vw, 72px);
  /* The stack keeps blank runway below the last card so it can release cleanly. Pull the next section up over that blank space, so there is no big gap, without touching the pinning. */
  margin-bottom: calc(-1 * var(--gap));
}
.seasons__stack { max-width: 76rem; margin: 0 auto; }
.seasons__stack::after { content: ""; display: block; height: var(--hold); }   /* a short hold: all four stay pinned together before the stack scrolls away */
.season {
  position: sticky; top: calc(var(--bar-h, 0px) + 20px + var(--i, 0) * var(--step, 72px));
  display: flex; flex-direction: column; justify-content: space-between; height: clamp(400px, 64svh, 540px);
  /* Each card's bottom margin (the runway before the next one arrives) shrinks by one step per card, so every card reaches its release point together and the whole stack leaves as one. */
  margin: 0 0 calc(var(--gap, 338px) + (3 - var(--i, 0)) * var(--step, 72px));
  overflow: hidden; isolation: isolate; border-radius: 28px; background: #8a4a32; color: var(--white);
  box-shadow: 0 -14px 40px rgba(40, 18, 8, .22);
}
.season__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: brightness(.82); transition: transform 1.2s ease; }
.season:hover .season__bg { transform: scale(1.04); }
.season__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(40, 18, 8, .8) 0%, rgba(40, 18, 8, .45) 22%, rgba(40, 18, 8, 0) 42%), linear-gradient(0deg, rgba(40, 18, 8, .88) 0%, rgba(40, 18, 8, .6) 30%, rgba(40, 18, 8, 0) 62%); }
/* The name and season sit in a band at the top, so each card stays readable as the next one slides over it. */
.season__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--step, 72px); padding: 0 clamp(20px, 3vw, 40px); }
.season h3 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; text-shadow: 0 2px 24px rgba(40, 18, 8, .35); }
.season__tag { flex: none; padding: 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .85rem; font-weight: 600; line-height: 1.2; }
.season__p { max-width: 38rem; margin: 0; padding: 0 clamp(24px, 4vw, 56px) clamp(24px, 4vw, 48px); font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.5; text-shadow: 0 1px 16px rgba(40, 18, 8, .4); }
.bento--page { position: relative; padding-top: clamp(8px, 2vw, 24px); }
.bento--page .bento__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: none; }
.bento--page .card { grid-area: auto; }
@media (max-width: 1099px) { .bento--page .bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: none; } }
@media (max-width: 599px) { .bento--page .bento__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 14px; } }
.bento__head { max-width: 76rem; margin: 0 auto clamp(28px, 4vw, 48px); }
.bento__head h2 { margin: 0 0 14px; font-size: clamp(1.9rem, 3.8vw, 3.1rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; text-wrap: balance; color: var(--ink); }
.bento__head p { margin: 0; max-width: 40rem; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.55; color: var(--ink-light); }
.bento--page .card h3 { font-size: 1.2rem; }
/* icon motion for the Seasonal Shop cards */
.card:hover .i-dot { animation: ic-hop .6s ease both; }
.card:hover .i-dot:nth-of-type(2) { animation-delay: .1s; } .card:hover .i-dot:nth-of-type(3) { animation-delay: .2s; }
.i-coin { transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.card:hover .i-coin--a { transform: translate(-3px, 3px); } .card:hover .i-coin--b { transform: translate(3px, -3px); }
.card:hover .i-heart3 { animation: ic-beat 1.1s ease-in-out infinite; }
.i-flower { transition: transform .8s cubic-bezier(.3, 1.2, .5, 1); }
.card:hover .i-flower { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .season__bg { transition: none; } .season:hover .season__bg { transform: none; } .card:hover .i-flower, .card:hover .i-coin { transform: none; } }
@media (max-width: 699px) { .season { --step: 60px; height: clamp(360px, 62svh, 460px); top: calc(var(--bar-h, 0px) + 12px + var(--i, 0) * var(--step)); } .seasons { --gap: clamp(120px, 34svh, 300px); --hold: clamp(60px, 14svh, 140px); } }

/* Generic scroll reveal (site.js adds .rv to the pieces of each section, .rv-in the first time they scroll into view) */
.js .rv:not(.rv-in) { opacity: 0; }
.js .rv.rv-in { animation: step-in .85s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: var(--rv-d, 0ms); }
@media (prefers-reduced-motion: reduce) { .js .rv:not(.rv-in) { opacity: 1; } .js .rv.rv-in { animation: none; } }

/* ---------- Responsive ---------- */
.burger { display: none; width: 46px; height: 46px; padding: 0; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 50%; background: rgba(255, 255, 255, .12); cursor: pointer; place-items: center; align-content: center; gap: 4px; }
.burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--white); transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1099px) {
  .burger { display: grid; }
  .nav__menu {
    position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% - 4px);
    padding: 8px; border-radius: 18px; background: rgba(255, 255, 255, .96); color: #3a2418;
    box-shadow: 0 18px 50px rgba(40, 18, 8, .35);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav__menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__menu ul { flex-direction: column; gap: 0; }
  .nav__menu a { display: block; padding: 14px 16px; font-size: 1rem; border-radius: 12px; opacity: 1; }
  .nav__menu a:hover { background: var(--bg); text-decoration: none; }
  .nav__left { gap: 0; }
  /* Submenu is always open inside the mobile panel, indented under "Our stations" */
  .nav__chev { display: none; }
  .nav__menu .sub { position: static; width: auto; min-width: 0; margin: 0 0 6px 14px; padding: 0 0 0 10px; border-radius: 0; border-left: 2px solid var(--rule); background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .nav__menu .sub::before { display: none; }
  .nav__menu .sub a { padding: 10px 14px; font-size: .95rem; }
}

@media (max-width: 1099px) {
  .hero__video { object-position: 30% 35%; }       /* keep the kids' faces in frame on tall screens */
  .hero__text { max-width: none; width: 100%; }
  .session { width: 100%; }
}

@media (max-width: 559px) {
  .promo p { font-size: .8rem; }
  .logo--img img { width: 170px; margin: -12px 0 -12px -6px; }
  .bookbar .logo--img img { width: 150px; margin: -10px 0 -10px -5px; }
  .logo__name { font-size: 1.1rem; }
  .logo__sub { font-size: .92rem; }
  .logo__icon { width: 26px; height: 26px; }
  .btn { min-height: 44px; padding: 0 22px; font-size: .95rem; }
  .burger { width: 42px; height: 42px; }
  .eyebrow { font-size: .8rem; padding: 8px 14px; }
  .session { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px; border-radius: 18px; }
  .session__action { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; }
  .live { font-size: .78rem; white-space: normal; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  .live__dot::before, .live__dot::after { animation: none; opacity: 0; }
  .philo__icon:hover .ic-heart { animation: none; }
  .philo__icon svg, .ic-heart, .ic-leaf, .ic-people { transition: none; }
  .pcard, .pcard::before, .pcard__thumb, .pcard__video, .pcard__title, .pcard__vtitle { transition: none; }
  .pcard:not(.is-active):hover .pcard__thumb { transform: none; }
  .js .visit:not(.is-in) .step { opacity: 1; }
  .js .visit.is-in .step, .js .visit.is-in .step:not(:last-child)::after { animation: none; }
  .pimg, .pitem::before, .pitem h3 { transition: none; }
  .pimg { transform: none; }
  .js .stations:not(.is-in) .pcard { opacity: 1; }
  .js .stations.is-in .pcard { animation: none; }
  .card, .bento__photo img { transition: none; }
  .card:hover, .bento__photo:hover img { transform: none; }
  .card:hover .card__icon, .card:hover [class^="i-"] { animation: none !important; transform: none !important; }
  .js .bento:not(.is-in) .bento__grid > * { opacity: 1; }
  .js .bento.is-in .bento__grid > * { animation: none; }
  .philo__icon:hover svg, .philo__icon:hover .ic-people, .philo__icon:hover .ic-leaf { transform: none; }
  .btn, .nav__menu, .burger span { transition: none; }
}

/* ---------- General contact popup (opened from any [data-contact] link) ---------- */
.cdlg { width: min(30rem, calc(100vw - 32px)); max-height: calc(100svh - 32px); margin: auto; padding: clamp(24px, 4vw, 36px); border: 0; border-radius: 28px; background: var(--white); color: var(--ink); box-shadow: 0 30px 80px rgba(40, 18, 8, .35); overflow: auto; }
.cdlg::backdrop { background: rgba(40, 18, 8, .55); }
.cdlg[open] { animation: cdlg-in .3s cubic-bezier(.2, .7, .2, 1); }
.cdlg-open { overflow: hidden; }
.cdlg__x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background .15s ease; }
.cdlg__x:hover { background: rgba(58, 36, 24, .08); }
.cdlg__x:focus-visible { outline: 3px solid rgba(221, 107, 63, .5); outline-offset: 2px; }
.cdlg h2 { margin: 0 0 8px; padding-right: 36px; font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.cdlg__lead { margin: 0 0 20px; font-size: 1rem; line-height: 1.55; color: var(--ink-light); }
.cdlg__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cdlg__fail { margin: 0 0 12px; }
.cdlg .intake__note { min-height: 6rem; }
@keyframes cdlg-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 559px) {
  .cdlg { width: 100vw; max-width: none; margin: auto 0 0; border-radius: 28px 28px 0 0; max-height: 92svh; }
  @keyframes cdlg-in { from { transform: translateY(40px); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .cdlg[open] { animation: none; } }

/* Next open session card: placeholder bar for the spots line until the real count loads (see site.js) */
.skel { display: inline-block; width: 6.6em; height: .9em; border-radius: 999px; background: rgba(58, 36, 24, .14); vertical-align: middle; animation: skel-pulse 1.1s ease-in-out infinite; }
@keyframes skel-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Image cards tilt towards the pointer (class added and handled in site.js; mouse only, never with reduced motion) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tilt-card { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease; will-change: transform; }
  .tilt-card.is-tilting { transition: transform .12s ease-out, box-shadow .3s ease; box-shadow: 0 22px 44px rgba(58, 36, 24, .22); }
}