/* ============================================================
   Little Town Playhouse — design system
   Plain CSS, mobile-first. Throwaway client-demo prototype.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette */
  --base:        #F7F3EC; /* warm white / beige */
  --base-deep:   #EFE7D8; /* slightly deeper beige for bands */
  --ink:         #333333; /* charcoal text */
  --ink-soft:    #5b5750; /* muted body text */
  --wood:        #E8C99B; /* pastel butterscotch */
  --sage:        #BFD6A8; /* pastel sage */
  --teal:        #A7D2C9; /* pastel teal */
  --terracotta:  #E0A184; /* pastel clay (used for fills) */
  --red:         #EC9A90; /* pastel rose */
  --white:       #ffffff;

  /* Deep accent tones — for text/icons that need contrast on a light bg.
     The pastel fills above are too light to read as text, so anything that
     was a saturated accent colour on text now points here instead. */
  --accent:       #B35A37; /* deep clay (terracotta-family text) */
  --accent-sun:   #B9800F; /* deep gold  */
  --accent-sky:   #2F8AA6; /* deep sky   */
  --accent-sage:  #6F8A4D; /* deep sage  */
  --accent-coral: #D9663D; /* deep coral */
  --accent-teal:  #3F7268; /* deep teal  */

  /* Tints (derived, for soft fills) */
  --wood-tint:   #f5e8d0;
  --sage-tint:   #e9efe0;
  --teal-tint:   #e1ede9;
  --terra-tint:  #f6e7dd;

  /* Typography */
  --font-head: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Fraunces", Georgia, "Times New Roman", serif;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3.25rem;
  --space-7: 4.5rem;

  /* Radii */
  --r-sm: 0.6rem;
  /* Button corner — a touch softer than --r-sm so the bold neobrutalist edge
     reads as "warm neobrutalist" rather than fighting the rounded pastel UI
     around it. Keeps the 4px hard shadow; only the corner relaxes. */
  --r-btn: 0.9rem;
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;
  --r-pill: 999px;

  /* Shadows (soft, warm) */
  --shadow-sm: 0 2px 8px rgba(80, 60, 30, 0.06);
  --shadow-md: 0 10px 24px rgba(80, 60, 30, 0.10);
  --shadow-lg: 0 22px 48px rgba(80, 60, 30, 0.14);

  /* Neobrutalist button edge — a crisp, solid offset shadow in warm dark wood
     (deliberately NOT pure black, to stay inside the warm palette). The button
     slides down-right onto this shadow on hover/press. */
  --btn-edge: #4a3a28;
  --btn-hard:      4px 4px 0 0 var(--btn-edge);
  --btn-hard-hover: 2px 2px 0 0 var(--btn-edge);

  --maxw: 1180px;
  --header-h: 76px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--base);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

/* Visible keyboard focus (mouse/touch users are unaffected via :focus-visible) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
/* On the dark footer, switch to a light outline so it stays visible */
.site-footer :where(a, button):focus-visible { outline-color: var(--wood); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 1rem; color: var(--ink-soft); }

.script {
  font-family: var(--font-script);
  font-style: italic; /* Fraunces is roman by default; the logo "Playhouse" is italic */
  font-weight: 500;
  letter-spacing: 0;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

/* Inline icon images — every sticker / chip / bubble / pill container is a
   flex or grid box, so an <img> child just needs `display:block` to drop
   inline-baseline spacing and centre cleanly. Sized via the <img>'s own
   width/height attributes so each spot can pick its scale. */
.sticker img, .partner-tag img, .stat-pill img, .pop-bubble img,
.storefront-sticker img, .gallery-sticker img, .pp-sticker img,
.member-flag img, .policy-icon img, .eyebrow--icon img,
.fusion-stat-pill .pill-icon img { display: block; }
/* Eyebrow with an inline icon — opt-in modifier turns the small caps label
   into a flex row so the icon and text sit on the same baseline. */
.eyebrow--icon { display: inline-flex; align-items: center; gap: 0.45rem; }
.section { padding-block: clamp(2.25rem, 5vw, var(--space-7)); }
.section--tight { padding-block: clamp(1.6rem, 3.5vw, var(--space-6)); }
/* Wave clearance — any section directly followed by a flow-top wave, or that
   sits last in <main> (i.e. just before the wave-edged footer), needs extra
   bottom space so the next divider's wave band (up to flow-h + 18 ≈ 90px
   desktop / 52px mobile) rises into empty space rather than over cards,
   pills, buttons or text. Uses :has() + :last-child so this is automatic
   for every page without per-section tuning. */
.section:has(+ section.flow-top),
.section--tight:has(+ section.flow-top),
.page-hero:has(+ section.flow-top),
main > .section:last-child,
main > .section--tight:last-child {
  padding-bottom: clamp(4.25rem, 6vw + 1.4rem, 6.75rem);
}
.band { background: var(--base-deep); }
.band-white { background: var(--white); }

.center { text-align: center; }
.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--accent);
  margin-bottom: 0.6rem;
  display: inline-block;
}
.section-lead {
  max-width: 60ch;
  margin-inline: auto;
  font-size: 1.06rem;
}

.grid { display: grid; gap: clamp(1.1rem, 2.5vw, 2rem); }
.grid-3 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Buttons (all visual-only / non-functional) ---------- */
.btn {
  --btn-bg: var(--terracotta);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border-radius: var(--r-btn); /* softened rounded-rect — warm neobrutalist, not a pill */
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-edge);
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.16s ease;
  box-shadow: var(--btn-hard);
  user-select: none;
  white-space: nowrap;
}
/* Neobrutalist press — slide down-right onto the shadow as it shrinks away */
.btn:hover  { transform: translate(2px, 2px); box-shadow: var(--btn-hard-hover); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--btn-edge); }
/* On phones, full-width / stacked CTAs can hold long labels (prices, "Buy
   Household Family Pass") — let them wrap instead of overflowing the pill. */
@media (max-width: 559px) {
  .flex-cta .btn, .btn--block, .cp-cta, .bk-pkg-btn { white-space: normal; line-height: 1.25; }
}

.btn--red { --btn-bg: var(--red); }
.btn--terracotta { --btn-bg: var(--terracotta); }
.btn--wood { --btn-bg: var(--wood); --btn-fg: #3a2a13; }
.btn--teal { --btn-bg: var(--teal); }

.btn--ghost {
  background: var(--white);
  color: var(--ink);
  border-color: var(--btn-edge);
  box-shadow: var(--btn-hard);
}
.btn--ghost:hover { color: var(--accent); }

.btn--lg { padding: 1.1rem 2rem; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; justify-content: center; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 243, 236, 0.82);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(51,51,51,0.06);
  transition: box-shadow 0.25s ease, background 0.25s ease;
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); background: rgba(247,243,236,0.95); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

/* Logo */
.brand { display: flex; align-items: center; gap: 0.65rem; }
.brand svg, .brand img { height: 40px; width: auto; flex: none; }
.brand-name, .nav a { white-space: nowrap; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 0.92rem;
  color: var(--ink);
}
.brand-sub {
  font-family: var(--font-script);
  color: var(--accent-teal);
  font-size: 1.05rem;
  margin-top: 0.05rem;
}

/* Desktop nav */
.nav { display: none; align-items: center; gap: 0.3rem; }
.nav a {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.93rem;
  color: var(--ink);
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-pill);
  position: relative;
  transition: color 0.18s ease, background 0.18s ease;
}
.nav a:hover { color: var(--accent); }
.nav a.active { color: var(--accent); }
.nav a.active::after {
  content: "";
  position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 0.28rem;
  height: 2px; border-radius: 2px;
  background: var(--accent);
}

.header-cta { display: flex; align-items: center; gap: 0.6rem; }

/* Header phone — visible on desktop / wide tablets, hidden below 980px so the nav stays uncluttered */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.header-phone svg { width: 14px; height: 14px; flex: 0 0 auto; }
.header-phone:hover { background: var(--sky-tint, #e8f4f9); color: var(--accent-teal, #3F7268); }
@media (max-width: 980px) { .header-phone { display: none; } }

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--r-sm);
}
.nav-toggle span {
  display: block; height: 2.5px; width: 24px; margin-inline: auto;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  background: var(--base);
  border-bottom: 1px solid rgba(51,51,51,0.06);
}
.nav-open .mobile-menu { grid-template-rows: 1fr; }
.mobile-menu > div { overflow: hidden; }
.mobile-menu nav { display: flex; flex-direction: column; padding: 0.4rem 0 1rem; }
.mobile-menu a {
  font-family: var(--font-head);
  font-weight: 500;
  padding: 0.85rem clamp(1.1rem, 4vw, 2.5rem);
  border-radius: var(--r-sm);
}
.mobile-menu a.active { color: var(--accent); }
.mobile-menu .btn { margin: 0.7rem clamp(1.1rem, 4vw, 2.5rem) 0; }

@media (min-width: 960px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none; }
}
/* Responsive header CTA: full label on desktop, compact "Join" on small screens */
.cta-short { display: none; }
@media (max-width: 600px) {
  .header-cta .btn--cta { padding: 0.5rem 0.95rem; font-size: 0.88rem; }
  .header-cta .btn--cta .cta-full { display: none; }
  .header-cta .btn--cta .cta-short { display: inline; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 420px at 70% -10%, var(--teal-tint), transparent 60%),
    linear-gradient(180deg, #fbf8f2 0%, var(--base) 100%);
  overflow: hidden;
}
.hero-inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(2.4rem, 6vw, 4.5rem);
}
.hero-copy { max-width: 36rem; }
.hero h1 { margin-bottom: 0.6rem; }
.hero .lead { font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: 34ch; }
.hero-art { position: relative; }
.hero-art svg, .hero-art img { width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(80,60,30,0.10)); }

@media (min-width: 880px) {
  .hero-inner { grid-template-columns: 1fr 1.15fr; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.3rem, 2.5vw, 1.9rem);
  border: 1px solid rgba(80,60,30,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: 0.35rem; }
.card p:last-child { margin-bottom: 0; }

.card-art {
  border-radius: var(--r-md);
  background: var(--base);
  padding: 1rem;
  margin-bottom: 1.1rem;
  display: grid;
  place-items: center;
}
.card-art svg, .card-art img { width: auto; height: auto; max-height: 170px; max-width: 100%; }

/* Feature card icon chip */
.chip {
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  margin-bottom: 1rem;
  background: var(--teal-tint);
}
.chip svg, .chip img { width: 38px; height: 38px; }

/* ---------- Pricing ---------- */
.price-card { position: relative; display: flex; flex-direction: column; text-align: center; }
.price-card .card-art { background: var(--base); }
.price-tag {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--ink);
  margin: 0.2rem 0 0.1rem;
}
.price-tag small { font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); }
.price-list { list-style: none; margin: 1rem 0 1.5rem; padding: 0; text-align: left; }
.price-list li {
  display: flex; gap: 0.55rem; align-items: flex-start;
  padding: 0.4rem 0; color: var(--ink-soft); font-size: 0.96rem;
}
.price-list li::before {
  content: "";
  flex: none; margin-top: 0.35rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--sage-tint);
  box-shadow: inset 0 0 0 3px var(--sage);
}
.price-card .btn { margin-top: auto; }
.price-card.featured {
  border: 2px solid var(--wood);
  box-shadow: var(--shadow-md);
}
.badge {
  position: absolute;
  top: -0.85rem; left: 50%; transform: translateX(-50%);
  background: var(--wood); color: #3a2a13;
  font-family: var(--font-head); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.35rem 0.85rem; border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}

/* ---------- Reassurance / icon columns ---------- */
.reassure { text-align: center; }
.reassure .chip { margin-inline: auto; width: 72px; height: 72px; }
.reassure h3 { margin-bottom: 0.25rem; }

/* ---------- Split sections (story teaser etc.) ---------- */
.split {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
@media (min-width: 820px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split-art { order: -1; }
}
.split-art svg, .split-art img { width: 100%; height: auto; }

/* ---------- Newsletter ---------- */
.newsletter {
  background: linear-gradient(135deg, var(--wood) 0%, var(--terracotta) 100%);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, 3.5rem);
  color: var(--ink);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.newsletter h2, .newsletter p { color: var(--ink); }
.newsletter-form {
  display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center;
  max-width: 30rem; margin: 1.4rem auto 0;
}
.newsletter-form input {
  flex: 1 1 14rem;
  border: none; border-radius: var(--r-pill);
  padding: 0.95rem 1.3rem; font-size: 1rem; font-family: var(--font-body);
  background: rgba(255,255,255,0.96); color: var(--ink);
}
.newsletter-form input::placeholder { color: #8a857c; }

/* ---------- Forms (visual only) ---------- */
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form-grid .col-2 { grid-template-columns: 1fr 1fr; display: grid; gap: 1rem; } }
.field label {
  display: block; font-family: var(--font-head); font-weight: 500;
  font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--ink);
}
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  padding: 0.85rem 1rem; border-radius: var(--r-md);
  border: 1.5px solid rgba(51,51,51,0.14); background: var(--white); color: var(--ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-tint);
}
.field textarea { min-height: 130px; resize: vertical; }

/* ---------- Accordion (FAQ) ---------- */
.accordion { max-width: 760px; margin-inline: auto; }
.acc-item {
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: 0.8rem;
  overflow: hidden;
  border: 1px solid rgba(80,60,30,0.05);
}
.acc-trigger {
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: none;
  font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; color: var(--ink);
  padding: 1.1rem 1.3rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.acc-trigger .acc-icon {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--terra-tint); color: var(--accent);
  display: grid; place-items: center; font-size: 1.2rem; line-height: 1;
  transition: transform 0.25s ease, background 0.25s ease;
}
.acc-item[aria-expanded="true"] .acc-icon { transform: rotate(45deg); background: var(--accent); color: #fff; }
.acc-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.acc-item[aria-expanded="true"] .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { padding: 0 1.3rem 1.2rem; margin: 0; }

/* ---------- Café menu ---------- */
.menu-group { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.menu-group h3 {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 1.5rem; margin-bottom: 1.1rem;
}
.menu-group h3 > svg, .menu-group h3 > img { width: 38px; height: 38px; flex: none; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-row {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 0.9rem; align-items: center;
  padding: 0.85rem 0; border-bottom: 1px dashed rgba(80,60,30,0.16);
}
.menu-row:last-child { border-bottom: none; }
.menu-row .m-icon { width: 44px; height: 44px; transition: transform 0.2s ease; }
.menu-row .m-name { font-family: var(--font-head); font-weight: 600; color: var(--ink); transition: color 0.2s ease; }
.menu-row .m-desc { font-size: 0.9rem; color: var(--ink-soft); }
/* Prices read as little tags, and pop on row hover */
.menu-row .m-price {
  font-family: var(--font-head); font-weight: 700; color: var(--accent); white-space: nowrap;
  background: var(--terra-tint); padding: 0.22rem 0.65rem; border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.menu-row:hover .m-name { color: var(--accent); }
.menu-row:hover .m-icon { animation: wiggle 0.5s ease; }
.menu-row:hover .m-price { background: var(--accent); color: #fff; }

/* ---------- Booking widget mockup (Parties) ---------- */
.booking {
  background: var(--white); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); padding: clamp(1.3rem, 3vw, 2rem);
  border: 1px solid rgba(80,60,30,0.06);
}
.booking-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.booking-head .month { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; }
.booking-nav { display: flex; gap: 0.4rem; }
.booking-nav button {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(51,51,51,0.12);
  background: var(--white); cursor: pointer; color: var(--ink); font-size: 1rem;
}
.cal {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; text-align: center;
}
.cal .dow { font-family: var(--font-head); font-weight: 600; font-size: 0.72rem; color: var(--ink-soft); padding-bottom: 0.3rem; }
.cal .day {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r-sm);
  font-size: 0.9rem; color: var(--ink); background: var(--base);
}
.cal .day.muted { color: #c3bcae; background: transparent; }
.cal .day.avail { background: var(--sage-tint); color: var(--ink); font-weight: 600; }
.cal .day.selected { background: var(--accent); color: #fff; font-weight: 700; box-shadow: var(--shadow-sm); }
.slots { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.2rem; }
.slot {
  border: 1.5px solid rgba(51,51,51,0.14); border-radius: var(--r-pill);
  padding: 0.55rem 1rem; font-family: var(--font-head); font-weight: 500; font-size: 0.9rem;
  background: var(--white); cursor: pointer; color: var(--ink);
}
.slot.active { background: var(--accent-teal); color: #fff; border-color: var(--accent-teal); }
.mock-note {
  font-size: 0.8rem; color: var(--ink-soft); text-align: center; margin-top: 1rem; font-style: italic;
}

/* ---------- Gallery ---------- */
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery figure {
  margin: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--white); box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gallery figure:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gallery svg, .gallery img { width: 100%; height: auto; display: block; }

/* ---------- Policy / rules strips ---------- */
.policy {
  background: var(--wood-tint);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px dashed rgba(140,100,40,0.35);
}
.policy h3 { color: var(--accent); }
.policy ul { margin: 0; padding-left: 1.2rem; }
.policy li { margin-bottom: 0.5rem; color: var(--ink-soft); }

/* ---------- Comparison (Memberships) ---------- */
.compare { display: grid; gap: clamp(1.1rem, 2.5vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .compare { grid-template-columns: 1fr 1fr; } }

/* ---------- Stat / values row ---------- */
.values { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .values { grid-template-columns: repeat(3,1fr); } }
.value-card { background: var(--white); border-radius: var(--r-lg); padding: 1.6rem; box-shadow: var(--shadow-sm); }
.value-card .chip { background: var(--terra-tint); }

/* ---------- Street divider motif ---------- */
.street-divider { line-height: 0; overflow: hidden; }
.street-divider svg, .street-divider img {
  width: 100%; height: auto;
  transform-origin: bottom center;
  /* gentle breathing so the little skyline feels alive, never shrinking below
     its real height (so no gap opens above it) */
  animation: skylineBreath 9s ease-in-out infinite;
}
@keyframes skylineBreath {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .street-divider svg, .street-divider img { animation: none !important; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: #2f2a24;
  color: #d9d3c8;
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
}
.site-footer a { color: #d9d3c8; transition: color 0.18s ease; }
.site-footer a:hover { color: var(--wood); }
.footer-grid {
  display: grid; gap: 2rem; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-sub { color: var(--teal); }
.footer-col h3 {
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: #fff; margin-bottom: 0.9rem;
}
.footer-col p, .footer-col a { font-size: 0.94rem; color: #c4bdb1; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.5rem; }
.map-placeholder {
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(255,255,255,0.08);
}
.map-placeholder svg, .map-placeholder img { width: 100%; height: auto; display: block; }
.socials { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.08); display: grid; place-items: center;
}
.socials a:hover { background: var(--wood); }
.socials svg { width: 18px; height: 18px; }
.footer-bottom {
  margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between;
  font-size: 0.84rem; color: #9b948a;
}

/* Site-wide "watch your own child" reminder — sits atop every footer */
.footer-notice {
  display: flex; align-items: center; gap: 0.95rem;
  margin-bottom: 2.4rem; padding: 1rem 1.25rem;
  background: rgba(232,201,155,0.10);
  border: 1px solid rgba(232,201,155,0.24);
  border-radius: var(--r-md);
  color: #ece6da;
}
.footer-notice__icon { flex: none; display: flex; color: var(--wood); }
.footer-notice__icon svg { width: 28px; height: 28px; }
.footer-notice p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: #ece6da; }
.footer-notice strong { color: #fff; font-weight: 700; }
@media (max-width: 520px) {
  .footer-notice { align-items: flex-start; gap: 0.75rem; padding: 0.9rem 1rem; }
  .footer-notice p { font-size: 0.9rem; }
}

/* ---------- Map placeholder (light, on Visit page) ---------- */
.map-light { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.map-light svg, .map-light img { width: 100%; height: auto; display: block; }

/* ---------- Page hero (interior pages) — echoes the home sky + clouds ---------- */
.page-hero {
  background: linear-gradient(180deg, #aedaea 0%, #cce5ec 30%, var(--base) 100%);
  /* Shared interior-hero footprint: every interior page's hero takes the same
     slice of the screen and vertically centres its content, so the whole site
     reads as one consistent design even though each hero is its own world.
     (Home keeps its taller bespoke .hero-v2 anchor.) min-height is a floor —
     content-rich heroes can grow past it and stay centred.
     svh (with a static px fallback) keeps the height fixed as the mobile URL
     bar collapses, so interior heroes don't stretch on scroll either. */
  min-height: 600px;
  min-height: clamp(540px, 70svh, 680px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2.4rem, 5vw, 3.6rem);
  text-align: center;
}
.page-hero p { max-width: 56ch; margin-inline: auto; }
.page-hero .hero-art { max-width: 640px; margin: 1.6rem auto 0; }
/* Soft white halo keeps the copy crisp over the sky + drifting clouds (matches home) */
.page-hero .eyebrow,
.page-hero h1,
.page-hero > .container p { text-shadow: 0 1px 1px rgba(255,255,255,0.55), 0 2px 14px rgba(255,255,255,0.65); }
.page-hero .flex-cta { justify-content: center; }
/* Keep the secondary CTA legible over the busy sky */
.page-hero .btn--ghost { background: var(--white); border-color: var(--btn-edge); }
.page-hero .btn--ghost:hover { color: var(--accent); }
/* Clouds drift a touch smaller and softer here than on the tall home hero */
.page-hero .hero-cloud.c1 { width: 120px; opacity: 0.90; }
.page-hero .hero-cloud.c2 { width: 90px;  opacity: 0.82; }
.page-hero .hero-cloud.c3 { width: 72px;  opacity: 0.80; }
.page-hero .hero-cloud.c4 { width: 150px; opacity: 0.85; }
.page-hero .hero-cloud.c5 { width: 60px;  opacity: 0.75; }
@media (max-width: 700px) {
  .page-hero .hero-cloud.c1 { width: 92px; }
  .page-hero .hero-cloud.c4 { width: 110px; }
}

/* Kiddy bunting banner across the top of an interior hero — a seamless,
   horizontally-tiling pastel pennant string. Shows on every screen size
   (it sits at the very top edge, so it never crowds the centred copy). */
.hero-bunting {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 34px;
  z-index: 1;
  pointer-events: none;
  background: url("../img/bunting.svg") repeat-x top center;
  background-size: auto 34px;
  opacity: 0.95;
}
/* Gentle sway so the whole string feels alive */
@media (prefers-reduced-motion: no-preference) {
  .hero-bunting { animation: buntingSway 7s ease-in-out infinite; transform-origin: top center; }
}
@keyframes buntingSway {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2px); }
}
/* Nudge centred hero copy down a touch so it clears the bunting */
.page-hero.has-bunting > .container { padding-top: 0.8rem; }

/* ---------- Per-page hero personalities ----------
   Each interior hero shares the page-hero skeleton (centred copy, halo, CTAs)
   but gets a background, motif and accent matched to that page's purpose. */

/* Play & Pricing keeps the open-town sky + drifting clouds (the base look). */

/* Parties — a festive blush with confetti & balloons */
.page-hero.ph--party { background: linear-gradient(180deg, #f6cdd2 0%, #fadfca 44%, var(--base) 100%); }
.ph--party .confetti i:nth-child(1) { background: var(--terracotta); transform: rotate(-16deg); }
.ph--party .confetti i:nth-child(2) { background: var(--wood);       transform: rotate(10deg); }
.ph--party .confetti i:nth-child(3) { background: var(--teal);       transform: rotate(-8deg); }
.ph--party .confetti i:nth-child(4) { background: var(--red);        transform: rotate(22deg); }
.ph--party .confetti i:nth-child(5) { background: var(--sage);       transform: rotate(-12deg); }

/* Memberships — calm, natural sage echoing the home membership band */
.page-hero.ph--member { background: linear-gradient(180deg, #d6e2c4 0%, #dde7d0 46%, var(--base) 100%); }

/* Fusion — warm coffee cream with floating café treats */
.page-hero.ph--cafe { background: linear-gradient(180deg, #efd8b6 0%, #f4e6cd 44%, var(--base) 100%); }

/* Photo Gallery — quiet, warm paper; restrained and a touch more editorial.
   (Background is themed further in photo-gallery.css; padding/height come from
   the shared .page-hero model so it matches the other interior heroes.) */
.page-hero.ph--gallery {
  background: linear-gradient(180deg, #e6dac3 0%, #f0e8d8 50%, var(--base) 100%);
}

/* Visit Us — cooler daylight teal, a wayfinding mood */
.page-hero.ph--visit { background: linear-gradient(180deg, #c2dede 0%, #dbeaeb 44%, var(--base) 100%); }

/* ---------- Pills / tags ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
.pill {
  background: linear-gradient(180deg, #ffffff 0%, #fbf6ec 100%);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-pill); padding: 0.48rem 1.05rem;
  font-family: var(--font-head); font-weight: 500; font-size: 0.85rem; color: var(--ink);
  box-shadow: var(--gloss-top), var(--shadow-soft);
}

/* ---------- Scroll reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
/* Release the compositor hint once the intro has played. Left on, `will-change`
   keeps every revealed element (incl. the hero copy) on its own GPU layer
   forever, which makes it trail the page during a touch-scroll. */
.reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

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

/* Gentle float for hero accents */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.float { animation: floaty 6s ease-in-out infinite; }
.float--slow { animation-duration: 9s; }

/* ============================================================
   Playful motion & decorations (v2)
   ============================================================ */
.hero, .page-hero, .newsletter, .has-deco { position: relative; overflow: hidden; }
.hero-inner, .page-hero > .container, .newsletter > * { position: relative; z-index: 2; }

.deco { position: absolute; pointer-events: none; z-index: 1; }
.deco img, .deco svg { width: 100%; height: auto; display: block; }
/* Floaters are a subtle desktop-only flourish; hidden on small screens where
   they'd crowd the centered hero headings. (The drifting clouds stay on every
   hero, mobile included — they're the shared motion across the site.) */
@media (max-width: 880px) {
  .deco { display: none; }
}

@keyframes bob   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes sway  { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes drift { 0% { transform: translateX(0); } 50% { transform: translateX(26px); } 100% { transform: translateX(0); } }
@keyframes twinkle { 0%,100% { transform: scale(0.85); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }

.anim-bob     { animation: bob 6s ease-in-out infinite; }
.anim-bob.slow{ animation-duration: 9s; }
.anim-sway    { animation: sway 7s ease-in-out infinite; transform-origin: top center; }
.anim-drift   { animation: drift 16s ease-in-out infinite; }
.anim-twinkle { animation: twinkle 4.5s ease-in-out infinite; }

/* Buttons use the neobrutalist slide-into-shadow press (defined on base .btn) */
.btn { transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.16s ease; }
.btn:hover  { transform: translate(2px, 2px); box-shadow: var(--btn-hard-hover); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--btn-edge); }
.card { transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease; }
.card:hover { transform: translateY(-7px) scale(1.015); }
.card:hover .card-art img { animation: wiggle 0.55s ease; }
.chip { transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.reassure:hover .chip, .value-card:hover .chip { transform: rotate(-6deg) scale(1.08); }
.gallery figure:hover { transform: translateY(-6px) rotate(-1.2deg); }

/* Soft decorative blobs behind bands */
.newsletter::before { content: ""; position: absolute; width: 240px; height: 240px; right: -70px; top: -90px;
  background: rgba(255,255,255,0.16); border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; }
.newsletter::after { content: ""; position: absolute; width: 180px; height: 180px; left: -60px; bottom: -80px;
  background: rgba(255,255,255,0.12); border-radius: 54% 46% 40% 60% / 46% 56% 44% 54%; }

/* Confetti dots accent */
.confetti { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 0.6rem; }
.confetti i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; transform: rotate(12deg); }

/* Pill / badge for "next door" partner */
.partner-tag { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--terra-tint);
  color: var(--accent); font-family: var(--font-head); font-weight: 600; font-size: 0.82rem;
  padding: 0.4rem 0.9rem; border-radius: var(--r-pill); }

/* Membership spotlight card on home */
.spotlight { display: grid; gap: clamp(1.4rem,4vw,3rem); align-items: center;
  background: linear-gradient(135deg, var(--wood-tint) 0%, #fbf3e6 100%);
  border-radius: var(--r-xl); padding: clamp(1.6rem,4vw,3rem); border: 1px solid rgba(140,100,40,0.14); }
@media (min-width: 860px) { .spotlight { grid-template-columns: 1.1fr 0.9fr; } }
.spotlight .spotlight-art img { width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .card:hover .card-art img { animation: none; }
}

/* Utility */
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--ink-soft); }
.flex-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.4rem; }
.flex-cta.center { justify-content: center; }

/* ============================================================
   Home v3 — fresh homepage layout
   ============================================================ */
.hero-v2 {
  position: relative; overflow: hidden; text-align: center;
  display: flex; justify-content: center; align-items: flex-start;
  /* Static px fallback first, then svh. svh = the SMALL viewport (URL bar
     visible), which is constant as the mobile address bar collapses — so the
     hero never resizes ("extends") mid-scroll. The px line is the fallback for
     browsers without svh; it's static too, so even there the bar toggle can't
     stretch the hero. (vh is deliberately avoided — it IS the large viewport
     and grows as the bar hides, which is exactly the drag we're killing.) */
  min-height: 720px;
  min-height: clamp(600px, 86svh, 800px);
  background: #c5e2ec;
}
/* The town backdrop is the brand logo mark (transparent buildings only, no
   sky of its own), so it sits over the .hero-v2 sky wash — a small town mark
   resting at the bottom-centre with the sky and clouds filling the space above. */
.hero-bg { position: absolute; inset: 0; z-index: 0; display: flex; align-items: flex-end; justify-content: center; }
.hero-bg img { width: clamp(320px, 55vw, 800px); height: auto; display: block; }
/* Push the home hero's adjacent wave divider down a little so it tucks under
   the (now larger) town mark instead of rising up over its base. Scoped to the
   hero's next sibling so every other .flow-top transition is unaffected. */
.hero-v2 + .flow-top::before { top: calc(-1 * var(--flow-h) - 18px + 48px); }
.hero-v2 + .flow-top::after  { top: calc(-1 * var(--flow-h) + 48px); }
/* That 48px pull sinks the wave ~48px INTO this first section. Its front layer
   (::after) is the section's own colour and paints OVER the relatively-positioned
   "Welcome to Main Street" eyebrow, clipping the tops of its letters on phones
   (where the default 2.25rem top padding leaves the eyebrow at ~+43px, inside
   the wave's reach to +48px). Raise the top-padding FLOOR to 3.75rem so the
   heading always sits clear below the wave; desktop already had ≥4.5rem. */
.hero-v2 + .flow-top { padding-top: clamp(3.75rem, 5vw, var(--space-7)); }
/* gentle bright-sky wash at the very top — keeps the blue sky visible */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.30) 30%, rgba(255,255,255,0.08) 52%, rgba(255,255,255,0) 72%);
}
.hero-v2 .hero-content { position: relative; z-index: 2; padding-top: clamp(1.8rem, 5vw, 3rem); padding-bottom: 2rem; }
/* Soft white halo keeps the dark copy crisp over the busy town + drifting clouds */
.hero-v2 .eyebrow,
.hero-v2 h1,
.hero-v2 .lead { text-shadow: 0 1px 1px rgba(255,255,255,0.6), 0 2px 16px rgba(255,255,255,0.7); }
.hero-v2 .lead { margin-inline: auto; max-width: 44ch; font-size: clamp(1.05rem, 2vw, 1.28rem); }
.hero-v2 .flex-cta { justify-content: center; }
/* keep the secondary CTA legible over the busy town background */
.hero-v2 .btn--ghost { background: var(--white); border-color: var(--btn-edge); }
.hero-v2 .btn--ghost:hover { color: var(--accent); }

/* Rolling clouds — an endless left-to-right conveyor. The track is two hero
   widths wide and holds two identical cloud sets; it slides right by exactly
   one set width and loops. Because the copy lands precisely where the original
   was, there is no seam — clouds keep streaming in from the left forever.
   The layer sits above the scrim but below the headline (z-index 2). */
.hero-clouds { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.cloud-track {
  position: absolute; inset: 0; width: 200%; display: flex;
  will-change: transform;
  animation: cloudRoll 60s linear infinite;
}
.cloud-set { position: relative; flex: 0 0 50%; width: 50%; height: 100%; }
.hero-cloud { position: absolute; height: auto; }
/* Spread across the sky at varied heights, sizes and opacities so the steady
   stream still reads as natural rather than a repeating strip. */
.hero-cloud.c1 { left:  4%; top: 13%; width: 170px; opacity: 0.97; }
.hero-cloud.c2 { left: 23%; top: 24%; width: 120px; opacity: 0.90; }
.hero-cloud.c3 { left: 41%; top:  8%; width:  96px; opacity: 0.85; }
.hero-cloud.c4 { left: 60%; top: 31%; width: 210px; opacity: 0.93; }
.hero-cloud.c5 { left: 82%; top: 18%; width:  76px; opacity: 0.80; }
@keyframes cloudRoll {
  from { transform: translateX(-50%); }  /* showing the second (duplicate) set */
  to   { transform: translateX(0); }     /* slid right by one set — seamless wrap */
}
@media (max-width: 700px) {
  .hero-cloud.c1 { width: 120px; }
  .hero-cloud.c2 { width: 90px; }
  .hero-cloud.c3 { width: 74px; }
  .hero-cloud.c4 { width: 140px; }
  .hero-cloud.c5 { width: 60px; }
}
/* Touch devices keep the drifting clouds too — they're the signature shared
   motion the owner wants on phones, not just desktop. (The "hero drags on
   scroll" symptom was never the clouds: it was the hero resizing as the mobile
   address bar collapsed, since its min-height used vh. That's fixed by sizing
   the mobile hero with svh in the v13 block below, so the clouds can stay
   animated here.) We do drop the permanent `will-change` promotion on touch —
   the running animation composites the layer on its own, so there's no need to
   pin it to a dedicated layer while idle, which is what made it trail before. */
@media (hover: none) {
  .hero-clouds .cloud-track { will-change: auto; }
}

/* Trust bar — a contained "proof" strip with dividers between claims */
.trust-bar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem 1.8rem;
  padding: 1rem clamp(1.1rem, 4vw, 2rem);
  background: var(--base);
  border: 1px solid rgba(80,60,30,0.07);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.trust { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-head); font-weight: 500; font-size: 0.94rem; color: var(--ink); }
.trust svg { width: 22px; height: 22px; flex: none; }
@media (min-width: 760px) {
  .trust + .trust { border-left: 1px solid rgba(80,60,30,0.14); padding-left: 1.8rem; }
}

/* Membership band (main offer) */
.member-band {
  display: grid; gap: clamp(1.4rem, 4vw, 2.8rem); align-items: center;
  background: linear-gradient(135deg, var(--sage) 0%, var(--teal) 100%);
  color: var(--ink); border-radius: var(--r-xl); padding: clamp(1.6rem, 4vw, 3rem); overflow: hidden;
}
.member-band h2, .member-band p { color: var(--ink); }
.member-band .eyebrow { color: var(--accent); }
.member-band .price-list li { color: var(--ink); }
.member-band .price-list li::before { background: rgba(58,49,40,0.10); box-shadow: inset 0 0 0 3px var(--accent-teal); }
.member-art img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-md); display: block; }
/* Responsive <picture> wrappers around cropped/object-fit photos must stay
   transparent to layout, so the inner <img> still sizes to the tile exactly as
   it did before the AVIF/WebP sources were added. */
.member-photo picture,
.home-glimpse-tile picture,
.pp-glimpse-tile picture,
.gallery-figure picture { display: contents; }
@media (min-width: 860px) { .member-band { grid-template-columns: 1.05fr 0.95fr; } }
.btn--onfill { background: #fff; color: var(--accent-teal); }
.btn--onfill:hover { background: #fff; }

/* ============================================================
   Playful motion v3 — refined liveliness across all pages
   ============================================================ */

/* Springier scroll reveal + directional variants */
.reveal { transform: translateY(30px) scale(0.985);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.34, 1.4, 0.5, 1); }
.reveal.is-visible { transform: none; }
.reveal.from-left  { transform: translateX(-44px); }
.reveal.from-right { transform: translateX(44px); }
.reveal.pop        { transform: scale(0.9); }
.reveal.from-left.is-visible, .reveal.from-right.is-visible, .reveal.pop.is-visible { transform: none; }

/* Staggered mobile dropdown items */
.mobile-menu nav > a {
  opacity: 0; transform: translateX(-16px);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-open .mobile-menu nav > a { opacity: 1; transform: none; }
.nav-open .mobile-menu nav > a:nth-child(1) { transition-delay: 0.06s; }
.nav-open .mobile-menu nav > a:nth-child(2) { transition-delay: 0.11s; }
.nav-open .mobile-menu nav > a:nth-child(3) { transition-delay: 0.16s; }
.nav-open .mobile-menu nav > a:nth-child(4) { transition-delay: 0.21s; }
.nav-open .mobile-menu nav > a:nth-child(5) { transition-delay: 0.26s; }
.nav-open .mobile-menu nav > a:nth-child(6) { transition-delay: 0.31s; }
.nav-open .mobile-menu nav > a:nth-child(7) { transition-delay: 0.36s; }

/* Animated nav underline (desktop) */
.nav a::after {
  content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.28rem;
  height: 2px; border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center; transition: transform 0.26s ease;
}
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }

/* Subtle attention ring on the membership CTAs (transform-free, keeps hover lift) */
a.btn--red[href="memberships.html"], a.btn--terracotta[href="memberships.html"] { position: relative; }
a.btn--red[href="memberships.html"]::after,
a.btn--terracotta[href="memberships.html"]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: ctaRing 2.8s ease-out infinite;
}
@keyframes ctaRing {
  0%   { box-shadow: 0 0 0 0 rgba(236, 154, 144, 0.6); }
  70%, 100% { box-shadow: 0 0 0 13px rgba(236, 154, 144, 0); }
}

/* Accordion answer fades/slides in */
.acc-panel p { opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease 0.04s, transform 0.3s ease 0.04s; }
.acc-item[aria-expanded="true"] .acc-panel p { opacity: 1; transform: none; }

/* Gallery tiles pop on reveal a touch more */
.gallery figure { transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease; }

/* Reduced-motion: keep everything visible and still */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.from-left, .reveal.from-right, .reveal.pop,
  .mobile-menu nav > a, .acc-panel p { opacity: 1 !important; transform: none !important; transition: none !important; }
  .nav a::after { transition: none !important; }
  a.btn--red[href="memberships.html"]::after, a.btn--terracotta[href="memberships.html"]::after { animation: none !important; }
}

/* Touch devices have no hover — give springy feedback on tap so it still feels alive */
@media (hover: none) {
  .card { transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease; }
  .card:active { transform: translateY(-4px) scale(1.012); box-shadow: var(--shadow-md); }
  .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--btn-edge); }
  .gallery figure:active { transform: translateY(-4px) rotate(-1.2deg); }
  .reassure:active .chip, .value-card:active .chip { transform: rotate(-6deg) scale(1.08); }
  .price-card:active { transform: translateY(-4px) scale(1.012); }
}

/* ============================================================
   v4 — Brighter, bolder, livelier shared kit
   Additive layer the page revamps draw from. Builds on the tokens
   and components above; nothing here overrides core behaviour, so
   existing markup keeps working unchanged.
   ============================================================ */
:root {
  /* Brighter accents that still harmonise with the warm earthy base */
  --sun:        #F8D98F;  /* pastel sun   */
  --sky:        #AEDCEA;  /* pastel sky   */
  --coral:      #F4AE92;  /* pastel coral */
  --sun-tint:   #fdf1d0;
  --sky-tint:   #e1f2f8;
  --coral-tint: #fce6db;

  /* Section-rhythm washes — the two soft colour beats in the repeating
     section cycle. Each page overrides these to its own hue (see page CSS)
     so the rhythm is identical site-wide while the colour stays on-brand. */
  --wash-1: var(--sky-tint);
  --wash-2: var(--sun-tint);

  /* Ready-made playful gradients */
  --grad-sunrise: linear-gradient(135deg, var(--sun) 0%, var(--coral) 100%);
  --grad-meadow:  linear-gradient(135deg, var(--sage) 0%, var(--teal) 100%);
  --grad-candy:   linear-gradient(135deg, var(--wood) 0%, var(--terracotta) 100%);
  --grad-sky:     linear-gradient(180deg, var(--sky-tint) 0%, var(--base) 100%);
}

/* ---- Gradient / tint background helpers ---- */
.bg-sunrise, .bg-meadow, .bg-candy { color: var(--ink); }
.bg-sunrise { background: var(--grad-sunrise); }
.bg-meadow  { background: var(--grad-meadow); }
.bg-candy   { background: var(--grad-candy); }
.bg-sky     { background: var(--grad-sky); }
.bg-sun-tint   { background: var(--sun-tint); }
.bg-sky-tint   { background: var(--sky-tint); }
.bg-coral-tint { background: var(--coral-tint); }
/* On a coloured/gradient band, force white headings + copy */
/* Pastel bands are light, so text on them is dark ink, not white. */
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark p { color: var(--ink); }
.on-dark .eyebrow { color: var(--accent); }
.on-dark .section-lead { color: var(--ink-soft); }
/* Secondary (ghost) buttons sitting on a pastel band: solid white neutral. */
.on-dark .btn--ghost {
  background: var(--white);
  border-color: var(--btn-edge);
  color: var(--ink);
}
.on-dark .btn--ghost:hover { color: var(--accent); }

/* ---- Marker highlight behind inline text (hand-drawn feel) ---- */
.hl {
  background-image: linear-gradient(120deg, var(--sun-tint), var(--sun-tint));
  background-repeat: no-repeat; background-size: 100% 38%; background-position: 0 86%;
  padding: 0 0.08em; border-radius: 2px;
}
.hl--sky   { background-image: linear-gradient(120deg, var(--sky-tint), var(--sky-tint)); }
.hl--coral { background-image: linear-gradient(120deg, var(--coral-tint), var(--coral-tint)); }
.hl--sage  { background-image: linear-gradient(120deg, var(--sage-tint), var(--sage-tint)); }

/* ---- Sticker: a rotated, shadowed label that feels stuck on ---- */
.sticker {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-head); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em;
  padding: 0.45rem 0.9rem; border-radius: var(--r-pill);
  background: var(--sun); color: #5a3d12; box-shadow: var(--shadow-sm);
  transform: rotate(-3deg);
}
.sticker--coral { background: var(--coral); color: #6a2f15; }
.sticker--sky   { background: var(--sky);   color: #08323d; }
.sticker--sage  { background: var(--sage);  color: #243016; }

/* ---- "pop" is now just an alias for the standard button (existing markup) ---- */
.btn--pop { box-shadow: var(--btn-hard); }
.btn--pop:hover  { transform: translate(2px, 2px); box-shadow: var(--btn-hard-hover); }
.btn--pop:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--btn-edge); }
.btn--sun   { --btn-bg: var(--sun);   --btn-fg: #5a3d12; }
.btn--coral { --btn-bg: var(--coral); }

/* ---- Panel: content floating on a soft white card for depth ---- */
.panel {
  background: var(--white); border-radius: var(--r-xl);
  box-shadow: var(--shadow-md); padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(80,60,30,0.06);
}

/* ---- Wonky cards: a gentle alternating tilt that straightens on hover ---- */
.tilt { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease; }
.tilt:nth-child(odd)  { transform: rotate(-1.2deg); }
.tilt:nth-child(even) { transform: rotate(1.2deg); }
.tilt:hover { transform: rotate(0deg) translateY(-6px) scale(1.02); }

/* ---- Big stat ---- */
.stat { text-align: center; }
.stat .num {
  font-family: var(--font-head); font-weight: 800; line-height: 1;
  font-size: clamp(2.4rem, 6vw, 3.6rem); color: var(--accent);
}
.stat .num .unit { font-size: 0.5em; }
.stat .label { font-family: var(--font-head); font-weight: 600; color: var(--ink-soft); font-size: 0.95rem; }

/* ---- Numbered steps with auto-counting badges ---- */
.steps { display: grid; gap: clamp(1.1rem, 2.5vw, 2rem); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { text-align: center; }
.step .step-no {
  counter-increment: step; width: 60px; height: 60px; margin: 0 auto 0.8rem;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-sunrise); color: var(--ink);
  font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; box-shadow: var(--shadow-sm);
}
.step .step-no::before { content: counter(step); }

/* ---- Decorative soft blob behind a section ---- */
.has-blob { position: relative; }
.has-blob > * { position: relative; z-index: 1; }
.blob {
  position: absolute; z-index: 0; pointer-events: none; filter: blur(2px); opacity: 0.5;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
}

/* ---- Quote / testimonial card ---- */
.quote {
  background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid rgba(80,60,30,0.05); position: relative;
}
.quote p { font-size: 1.05rem; color: var(--ink); }
.quote .who { font-family: var(--font-head); font-weight: 600; color: var(--ink-soft); font-size: 0.92rem; margin: 0; }
.quote::before {
  content: "\201C"; position: absolute; top: -0.2rem; left: 1rem;
  font-family: var(--font-script); color: var(--accent-coral); font-size: 3.4rem; line-height: 1; opacity: 0.5;
}

/* ---- New motion primitives ---- */
@keyframes popIn { 0% { opacity: 0; transform: scale(0.6) translateY(10px); } 60% { transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes jelly { 0%,100% { transform: scale(1,1); } 30% { transform: scale(1.08,0.92); } 50% { transform: scale(0.94,1.06); } 70% { transform: scale(1.03,0.97); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes pulseSoft { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.anim-pop        { animation: popIn 0.6s cubic-bezier(0.34,1.56,0.64,1) both; }
.anim-spin-slow  { animation: spinSlow 22s linear infinite; }
.anim-pulse      { animation: pulseSoft 3.5s ease-in-out infinite; }
.hover-jelly:hover { animation: jelly 0.6s ease; }

@media (prefers-reduced-motion: reduce) {
  .anim-pop, .anim-spin-slow, .anim-pulse, .hover-jelly:hover { animation: none !important; }
  .tilt, .tilt:nth-child(odd), .tilt:nth-child(even) { transform: none !important; }
}

/* ---- No-JS fallback: scroll reveal relies on IntersectionObserver, so when
   scripting is unavailable, show all reveal content instead of leaving it
   stuck at opacity:0. (Browsers without `scripting` support run the JS path.) ---- */
@media (scripting: none) {
  .reveal, .reveal.from-left, .reveal.from-right, .reveal.pop {
    opacity: 1 !important; transform: none !important;
  }
}

/* ============================================================
   v5 — Flowing section transitions
   Turns the flat colour line between two sections into an organic,
   animated wave: a section's own colour rises up into the section above
   it with a soft scalloped crest, and a second, slower layer drifts the
   other way as a faint shadow rim for depth. The whole effect is one
   reusable hook — add `flow-top` to a section and its surface colour is
   read from the section's existing background class. Custom-coloured
   bands set their own `--surface` (see the page stylesheets).

   How the blend stays seamless: the wave layers are pseudo-elements that
   sit *above* the section's top edge (negative `top`), painting over the
   bottom padding of the previous section. Their solid lower half is the
   exact `--surface` colour, so it meets the section's real background with
   no seam; their transparent upper half lets the previous section show
   through the wave troughs.
   ============================================================ */
:root {
  --flow-h: clamp(34px, 5.5vw, 72px);
  /* One full, seam-matching sine period; solid below, wave band up top.
     Opaque fill = the mask's visible (alpha) region. */
  --flow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 120' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C36.7 14 73.3 14 110 40 C146.7 66 183.3 66 220 40 L220 120 L0 120 Z' fill='%23000'/%3E%3C/svg%3E");
  /* Puffy cloud-scallop variant — rounded bumps with little valleys between,
     for a more playful edge (used on the footer). Seam-matching at the valleys. */
  --flow-mask-scallop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120' preserveAspectRatio='none'%3E%3Cpath d='M0 50 C13 12 67 12 80 50 C93 12 147 12 160 50 C173 12 227 12 240 50 L240 120 L0 120 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Surface colour, derived from the section's existing background class */
.flow-top              { --surface: var(--base); position: relative; }
/* The wave is drawn just ABOVE the section, so a flow-top section must not clip
   its top edge. `section.flow-top` (element+class) outranks a single-class page
   override like `.home-steps{overflow:hidden}` without needing !important.
   Decorative layers inside these sections (e.g. `.bubbles`) self-clip, so
   nothing leaks. */
section.flow-top { overflow: visible; }
.flow-top.band         { --surface: var(--base-deep); }
.flow-top.band-white   { --surface: var(--white); }
.flow-top.bg-sky-tint  { --surface: var(--sky-tint); }
.flow-top.bg-sun-tint  { --surface: var(--sun-tint); }
.flow-top.bg-coral-tint{ --surface: var(--coral-tint); }
.flow-top.bg-meadow    { --surface: var(--grad-meadow); }
.flow-top.bg-sunrise   { --surface: var(--grad-sunrise); }
.flow-top.bg-candy     { --surface: var(--grad-candy); }
.flow-top.bg-sky       { --surface: var(--grad-sky); }

/* ============================================================
   Section rhythm — one shared vertical flow for every page
   The body of each page is skinned in a fixed 4-beat cycle, applied by
   POSITION (not by what the section contains), so flipping between pages
   reads as one consistent site:
     beat 1  .sec-color → soft colour wash (the page's own hue, --wash-1)
     beat 2  .sec-dots  → clean white + the playful pastel dot field
     beat 3  .sec-calm  → warm neutral cream (a quiet breather, different
                          from the colour beats)
     beat 4  .sec-play  → second colour wash (--wash-2) + dots = the lively
                          peak, then the cycle repeats (5=color, 6=dots …).
   Every beat carries `flow-top` so the wave divider rides every transition.
   The dotted beats (.sec-dots / .sec-play) also take `has-bubbles` + a
   `<span class="bubbles">` child. Each page sets --wash-1/--wash-2 to its
   own colour, so the rhythm is identical and the palette stays on-brand. */
.sec-color { background: var(--wash-1); }
.sec-dots  { background: var(--white); }
.sec-calm  { background: var(--base-deep); }
.sec-play  { background: var(--wash-2); }
.flow-top.sec-color { --surface: var(--wash-1); }
.flow-top.sec-dots  { --surface: var(--white); }
.flow-top.sec-calm  { --surface: var(--base-deep); }
.flow-top.sec-play  { --surface: var(--wash-2); }

/* The dark footer pours in with the same wave, so the page is bookended by
   flowing edges. Its surface is the footer's own dark tone; the pastel rim
   pops beautifully above it. (No markup needed — applied straight to the
   shared footer.) */
.site-footer { position: relative; --surface: #2f2a24; }

.flow-top::before,
.flow-top::after,
.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  left: 0; right: 0;                     /* full width; the mask repeats to both edges */
  pointer-events: none;
  -webkit-mask-image: var(--flow-mask);          mask-image: var(--flow-mask);
  -webkit-mask-repeat: repeat-x;                 mask-repeat: repeat-x;
  -webkit-mask-position: 0 bottom;               mask-position: 0 bottom;
}
/* Back layer: a TALLER, drifting pastel ribbon. Because it rises higher than
   the front wave, its crest peeks out as a flowing band of colour above the
   section. A multi-stop pastel gradient (themed per page via --flow-accent)
   makes the colour shift across the width as it drifts. */
.flow-top::before,
.site-footer::before {
  top: calc(-1 * var(--flow-h) - 18px + 1px);
  height: calc(var(--flow-h) + 18px);
  background: var(--flow-accent, linear-gradient(90deg, var(--sun) 0%, var(--coral) 36%, var(--sky) 68%, var(--sage) 100%));
  opacity: 0.92;
  -webkit-mask-size: 300px 100%;                 mask-size: 300px 100%;
  /* drift sideways + a gentle vertical wobble so the ribbon undulates */
  animation: flowDriftB 17s linear infinite, rimWobble 6.5s ease-in-out infinite;
}
/* Front layer: the section's own colour rising up, shorter wavelength, drifts
   right. A faint upward shadow lifts it off the pastel ribbon for depth. */
.flow-top::after,
.site-footer::after {
  top: calc(-1 * var(--flow-h) + 1px);
  height: var(--flow-h);
  background: var(--surface);
  filter: drop-shadow(0 -2px 2px rgba(74,54,28,0.10));
  -webkit-mask-size: 230px 100%;                 mask-size: 230px 100%;
  animation: flowDriftA 14s linear infinite;
}
/* The footer wears the puffy cloud-scallop edge for a distinct, playful
   "ground" that's a little different from the smooth section waves. */
.site-footer::before,
.site-footer::after {
  -webkit-mask-image: var(--flow-mask-scallop);  mask-image: var(--flow-mask-scallop);
}
/* Gentle vertical undulation for the colour ribbon */
@keyframes rimWobble {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
/* Shift by exactly one tile width => seamless loop */
@keyframes flowDriftA {
  from { -webkit-mask-position: 0 bottom;     mask-position: 0 bottom; }
  to   { -webkit-mask-position: 230px bottom; mask-position: 230px bottom; }
}
@keyframes flowDriftB {
  from { -webkit-mask-position: 0 bottom;      mask-position: 0 bottom; }
  to   { -webkit-mask-position: -300px bottom; mask-position: -300px bottom; }
}

/* Reduced motion: keep the wave shape, drop the drift */
@media (prefers-reduced-motion: reduce) {
  .flow-top::before, .flow-top::after,
  .site-footer::before, .site-footer::after { animation: none !important; }
}

/* ============================================================
   v6 — Floating pastel bubbles
   A soft field of drifting pastel circles that rises slowly behind a
   section's content for a playful, flowy feel. Usage:
     <section class="… has-bubbles">
       <span class="bubbles" aria-hidden="true"></span>
       … content …
   A real child element (not a pseudo) is used so this composes with
   `flow-top`, which already owns ::before and ::after. The bubble layer is
   absolutely positioned inside the section, so it sits behind the content
   and never reaches the wave divider above. Pure CSS: four repeating
   radial-gradient layers, each a different size/colour/speed, animated via
   background-position for a gentle parallax. Tune colours with --bub-1..4.
   ============================================================ */
.has-bubbles { position: relative; }
.has-bubbles > *:not(.bubbles) { position: relative; z-index: 1; }
.bubbles {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background-image:
    radial-gradient(circle at 30% 35%, var(--bub-1, var(--sky))   0 9px,  transparent 10px),
    radial-gradient(circle at 70% 60%, var(--bub-2, var(--coral)) 0 6px,  transparent 7px),
    radial-gradient(circle at 45% 80%, var(--bub-3, var(--sage))  0 13px, transparent 14px),
    radial-gradient(circle at 85% 20%, var(--bub-4, var(--sun))   0 7px,  transparent 8px);
  background-size: 190px 190px, 130px 130px, 280px 280px, 160px 160px;
  background-position: 0 0, 40px 0, 0 0, 25px 0;
  opacity: var(--bub-opacity, 0.30);
  animation: bubblesRise 34s linear infinite;
}
/* Each layer shifts up by exactly one of its tile heights => seamless loop */
@keyframes bubblesRise {
  to { background-position: 0 -190px, 40px -130px, 0 -280px, 25px -160px; }
}
@media (prefers-reduced-motion: reduce) {
  .bubbles { animation: none !important; }
}

/* ============================================================
   v7 — Breathing gradient
   Slowly pans a card/band's gradient back and forth so its colour gently
   flows. Opt-in: add `anim-gradient` to any element with a gradient
   background. (Enlarges background-size so there is room to pan.)
   ============================================================ */
.anim-gradient {
  background-size: 220% 220% !important;
  background-position: 50% 50%;  /* sensible centred frame when motion is reduced */
  animation: gradPan 16s ease-in-out infinite;
}
@keyframes gradPan {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .anim-gradient { animation: none !important; }
}

/* ============================================================
   v8 — Confetti rain
   A festive decorative layer of little pastel pieces that tumble down on
   a loop. Drop a `<div class="confetti-rain" aria-hidden="true">` with a
   handful of `<i>` pieces inside a positioned, overflow-hidden container
   (e.g. a CTA band), and lift the real content above it with z-index.
   ============================================================ */
.confetti-rain { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.confetti-rain i {
  position: absolute; top: -12%;
  width: 10px; height: 13px; border-radius: 2px;
  opacity: 0.92;
  animation: confettiFall 7s linear infinite;
}
@keyframes confettiFall {
  0%   { top: -12%; transform: rotate(0deg)   translateX(0);    opacity: 0; }
  8%   { opacity: 0.92; }
  100% { top: 112%; transform: rotate(540deg) translateX(18px); opacity: 0.92; }
}
/* spread across the width with varied colour, shape, speed and phase */
.confetti-rain i:nth-child(1)  { left: 6%;  background: var(--sun);   animation-duration: 7.5s; animation-delay: -0.2s; }
.confetti-rain i:nth-child(2)  { left: 14%; background: var(--coral); animation-duration: 6.2s; animation-delay: -1.4s; border-radius: 50%; }
.confetti-rain i:nth-child(3)  { left: 22%; background: var(--sky);   animation-duration: 8.1s; animation-delay: -2.6s; }
.confetti-rain i:nth-child(4)  { left: 30%; background: var(--sage);  animation-duration: 6.8s; animation-delay: -0.9s; }
.confetti-rain i:nth-child(5)  { left: 38%; background: var(--red);   animation-duration: 7.9s; animation-delay: -3.3s; border-radius: 50%; }
.confetti-rain i:nth-child(6)  { left: 46%; background: var(--teal);  animation-duration: 6.5s; animation-delay: -1.9s; }
.confetti-rain i:nth-child(7)  { left: 54%; background: var(--sun);   animation-duration: 8.4s; animation-delay: -4.1s; }
.confetti-rain i:nth-child(8)  { left: 62%; background: var(--coral); animation-duration: 6.0s; animation-delay: -0.5s; border-radius: 50%; }
.confetti-rain i:nth-child(9)  { left: 70%; background: var(--sky);   animation-duration: 7.7s; animation-delay: -2.2s; }
.confetti-rain i:nth-child(10) { left: 78%; background: var(--sage);  animation-duration: 6.9s; animation-delay: -3.7s; }
.confetti-rain i:nth-child(11) { left: 86%; background: var(--red);   animation-duration: 8.2s; animation-delay: -1.1s; border-radius: 50%; }
.confetti-rain i:nth-child(12) { left: 92%; background: var(--wood);  animation-duration: 7.1s; animation-delay: -4.8s; }
.confetti-rain i:nth-child(13) { left: 18%; background: var(--teal);  animation-duration: 7.3s; animation-delay: -5.5s; }
.confetti-rain i:nth-child(14) { left: 66%; background: var(--sun);   animation-duration: 6.6s; animation-delay: -6.0s; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  .confetti-rain { display: none; }
}

/* ============================================================
   v9 — Hover pop-up stickers
   A little emoji badge that springs into view when you hover a card or
   image. Usage:
     <article class="card pop-host"> … <span class="pop-bubble" aria-hidden="true">🛝</span> </article>
   Positioned inside a corner so it works whether the host clips overflow
   or not. Position variants: --tl/--bl/--br. Colour variants: --sky/--coral/--sage.
   ============================================================ */
.pop-host { position: relative; }
.pop-bubble {
  position: absolute; z-index: 6;
  top: 0.7rem; right: 0.7rem;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sun); color: #5a3d12;
  font-size: 1.2rem; line-height: 1;
  box-shadow: var(--shadow-md);
  transform: scale(0) rotate(-22deg);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.34, 1.85, 0.5, 1), opacity 0.2s ease;
  pointer-events: none;
}
.pop-host:hover .pop-bubble,
.pop-host:focus-within .pop-bubble {
  transform: scale(1) rotate(-8deg);
  opacity: 1;
}
/* Corner variants */
.pop-bubble--tl { top: 0.7rem; left: 0.7rem; right: auto; }
.pop-bubble--bl { bottom: 0.7rem; left: 0.7rem; top: auto; right: auto; }
.pop-bubble--br { bottom: 0.7rem; right: 0.7rem; top: auto; }
/* Colour variants */
.pop-bubble--sky   { background: var(--sky);   color: #08323d; }
.pop-bubble--coral { background: var(--coral); color: #6a2f15; }
.pop-bubble--sage  { background: var(--sage);  color: #243016; }
.pop-bubble--red   { background: var(--red);   color: #5a1f1a; }
/* Touch devices have no hover — keep them out of the way rather than stuck on */
@media (hover: none) { .pop-bubble { display: none; } }
/* Reduced motion: fade in without the springy scale */
@media (prefers-reduced-motion: reduce) {
  .pop-bubble { transition: opacity 0.2s ease; transform: scale(1) rotate(-8deg); }
}

/* ============================================================
   v10 — Shared closing CTA band
   The consistent page ender used across the site so every page lands on
   the same shape of call to action. Pair `.cta-band` with a background
   helper (e.g. .bg-meadow) + `.anim-gradient`, and optionally drop a
   `.confetti-rain` inside — content is lifted above it via z-index.
   Each page picks its own gradient so the structure is shared but the
   colour stays true to that page's world.
   ============================================================ */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  box-shadow: var(--shadow-md);
}
/* Lift the real content above any decorative .confetti-rain (z-index 0) */
.cta-band .eyebrow,
.cta-band .sticker,
.cta-band h2,
.cta-band p,
.cta-band .flex-cta { position: relative; z-index: 1; }
.cta-band h2 { margin: 0.3rem 0 0.5rem; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.cta-band p { max-width: 46ch; margin-inline: auto; }
.cta-band .flex-cta { margin-top: 1.6rem; }

/* ---------- Inside-the-town photo glimpse (shared: home + play-pricing) ---------- */
.pp-glimpse-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
@media (max-width: 980px) { .pp-glimpse-grid { grid-template-columns: repeat(2, 1fr); } }
/* Stay 2-up on phones (with a tighter gap) — a single column stacks four tall
   4:5 tiles into ~1800px of scroll, which reads as a gallery rather than a glimpse. */
@media (max-width: 480px) { .pp-glimpse-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; } }
.pp-glimpse-tile {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg, 22px);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pp-glimpse-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.pp-glimpse-tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem 0.9rem 0.85rem;
  background: linear-gradient(0deg, rgba(58,49,40,0.75) 0%, rgba(58,49,40,0) 100%);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
}
.pp-glimpse-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(58,49,40,0.22); }
@media (prefers-reduced-motion: reduce) {
  .pp-glimpse-tile { transition: none; }
  .pp-glimpse-tile:hover { transform: none; }
}

/* ============================================================
   v11 — Boutique polish
   A refinement pass that elevates everything one notch without
   changing the palette or page structure. Crafted multi-layer
   shadows, paper-finish gloss on cards & buttons, refined typography
   ornaments, glassier nav, premium gallery treatment, plus new
   motion primitives (3D mouse tilt, magnetic CTAs, sparkle fields,
   number count-up). Builds ON TOP of v1–v10 — no existing markup or
   class is broken.
   ============================================================ */

:root {
  /* -------- Refined multi-layer shadow scale --------
     The single biggest "$10k website" tell: shadows that read as a
     real light source. Each combines an ambient soft halo + a sharper
     key contact + (where appropriate) a pastel coloured rim.
     The old --shadow-sm/md/lg are preserved above for backward compat. */
  --shadow-xs: 0 1px 1px rgba(80,60,30,0.04), 0 1px 3px rgba(80,60,30,0.05);
  --shadow-soft: 0 1px 2px rgba(80,60,30,0.06), 0 4px 12px rgba(80,60,30,0.07);
  --shadow-card: 0 1px 2px rgba(80,60,30,0.05),
                 0 8px 18px -6px rgba(80,60,30,0.12),
                 0 14px 36px -10px rgba(80,60,30,0.10);
  --shadow-float: 0 1px 2px rgba(80,60,30,0.06),
                  0 14px 28px -10px rgba(80,60,30,0.16),
                  0 28px 60px -16px rgba(80,60,30,0.14);
  --shadow-hero: 0 2px 4px rgba(80,60,30,0.06),
                 0 24px 50px -16px rgba(80,60,30,0.18),
                 0 48px 96px -28px rgba(80,60,30,0.16);
  /* Brand-tinted glows for accents on coloured surfaces */
  --glow-sun:   0 12px 32px -8px rgba(248,217,143,0.55);
  --glow-coral: 0 12px 32px -8px rgba(244,174,146,0.55);
  --glow-sage:  0 12px 32px -8px rgba(191,214,168,0.55);
  --glow-teal:  0 12px 32px -8px rgba(167,210,201,0.55);
  --glow-sky:   0 12px 32px -8px rgba(174,220,234,0.55);

  /* Crisp hairline + subtle inset highlight */
  --hairline:    rgba(58,49,40,0.10);
  --hairline-soft: rgba(58,49,40,0.06);
  --gloss-top:   inset 0 1px 0 rgba(255,255,255,0.85);
  --gloss-edge:  inset 0 0 0 1px rgba(255,255,255,0.55);

  /* Display gradient text — boutique flourish for marquee headings */
  --grad-warm-text: linear-gradient(135deg, var(--accent) 0%, var(--accent-coral) 60%, var(--accent-sun) 100%);
}

/* -------- Selection + scrollbar polish -------- */
::selection { background: var(--sun); color: #5a3d12; }
::-moz-selection { background: var(--sun); color: #5a3d12; }
@supports (scrollbar-width: thin) {
  html { scrollbar-width: thin; scrollbar-color: var(--wood) transparent; }
}
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--wood), var(--terracotta));
    border-radius: 999px;
    border: 3px solid var(--base);
  }
  ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--terracotta), var(--accent-coral)); }
}

/* -------- First-paint page reveal --------
   Opacity-only on purpose. Animating `transform` on <body> leaves it with a
   resolved (even identity) matrix under `fill: both`, which makes <body> the
   containing block for every position:fixed child — that un-pins the mobile
   Action Bar + menu drawer, dropping them to the bottom of the document where
   they overlap the footer. Fading opacity alone keeps the reveal without
   establishing a containing block. */
@media (prefers-reduced-motion: no-preference) {
  body { animation: pageFade 0.6s ease-out both; }
  @keyframes pageFade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* -------- Refined nav glass + hover rhythm -------- */
.site-header {
  background: rgba(247, 243, 236, 0.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(58,49,40,0.05);
  transition: box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.site-header.is-stuck {
  background: rgba(247,243,236,0.92);
  border-bottom-color: rgba(58,49,40,0.10);
  box-shadow: 0 1px 0 rgba(58,49,40,0.04), 0 12px 30px -18px rgba(58,49,40,0.20);
}
.nav a {
  transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}
.nav a:hover { background: rgba(255,255,255,0.6); }
/* Header CTA shares the same crisp edge + hard shadow */
.header-cta .btn--cta {
  box-shadow: var(--btn-hard);
}
.header-cta .btn--cta:hover { box-shadow: var(--btn-hard-hover); }

/* -------- Buttons: neobrutalist — bold edge + crisp hard offset shadow -------- */
/* Every colour shares one warm dark edge + the same solid 4px shadow. The
   slide-into-shadow press lives on the base .btn rules near the top. */
.btn { letter-spacing: 0.005em; }
.btn--terracotta,
.btn--red,
.btn--wood,
.btn--teal,
.btn--sun,
.btn--coral { box-shadow: var(--btn-hard); }
.btn--terracotta:hover,
.btn--red:hover,
.btn--wood:hover,
.btn--teal:hover,
.btn--sun:hover,
.btn--coral:hover { box-shadow: var(--btn-hard-hover); }

/* -------- Refined cards: paper finish + crafted shadow -------- */
.card {
  border: 1px solid var(--hairline-soft);
  box-shadow: var(--shadow-card);
  /* subtle paper warmth — a faint warm-cream backing layer */
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,248,240,1) 100%);
  position: relative;
}
/* Top inner gloss line — the "paper edge catches light" cue */
.card::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 50%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  pointer-events: none;
  z-index: 0;
}
.card > * { position: relative; z-index: 1; }
/* The pop-bubble must sit ABOVE the card art it springs from, pinned to the
   corner. The blanket `.card > *` rule above overrides BOTH its `position:absolute`
   (forcing it into normal flow, top-left, before the art) and its `z-index`
   (letting the art paint over it) — restore both with a more specific rule. */
.card > .pop-bubble { position: absolute; z-index: 6; }
.card:hover { box-shadow: var(--shadow-float); }

/* -------- Refined section eyebrow w/ optional ornamental rule -------- */
.eyebrow {
  position: relative;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
}
/* Ornamental eyebrow — small line + dot decoration */
.eyebrow--rule {
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.eyebrow--rule::before, .eyebrow--rule::after {
  content: "";
  width: 22px; height: 1.5px; border-radius: 2px;
  background: currentColor; opacity: 0.45;
}
/* Ornament dot above an H2 — used as a class on the heading */
.h-ornament {
  position: relative;
  padding-top: 1.2rem;
}
.h-ornament::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-coral);
  transform: translateX(-50%);
  box-shadow:
    -14px 0 0 var(--accent-sage),
    14px 0 0 var(--accent-sun);
}
/* Left-aligned ornament variant */
.h-ornament.h-ornament--left::before { left: 0; transform: none; }

/* Optional display headline w/ subtle gradient ink */
.h-display {
  background: var(--grad-warm-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* -------- Refined trust bar -------- */
.trust-bar {
  box-shadow:
    var(--gloss-top),
    var(--shadow-card);
  border-color: var(--hairline-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,248,240,1) 100%);
  padding: 1.1rem clamp(1.2rem, 4vw, 2.2rem);
}
.trust { font-weight: 600; gap: 0.6rem; }
.trust svg { width: 24px; height: 24px; color: var(--accent-teal); }
.trust:nth-child(2) svg { color: var(--accent-coral); }
.trust:nth-child(3) svg { color: var(--accent-sage); }
.trust:nth-child(4) svg { color: var(--accent-sun); }

/* ---- Trust strip as a finished badge card (home hero) ----
   The base .trust-bar is a flex strip with vertical dividers — fine for 3 even
   items, but 4 orphan-wraps (a lone item + a stray divider) on desktop and
   ragged-left-stacks on phones. This modifier lays the claims out in an even
   grid (2x2 on phones, 4-up from 720px), aligns each as a centered badge with a
   soft tinted icon chip, and drops the dividers so nothing can orphan. */
.trust-bar--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem 0.2rem;
  padding: 1rem 0.8rem;
}
@media (min-width: 720px) {
  .trust-bar--grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    padding: 1.15rem 0.9rem;
  }
}
.trust-bar--grid .trust {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 0.7rem 0.5rem;
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--ink);
  border: 0;            /* cancel the base/v11 vertical dividers */
  padding-left: 0.5rem; /* and the divider's left padding */
}
/* Each icon becomes a soft, tinted round chip — a real trust badge. */
.trust-bar--grid .trust svg {
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 50%;
  background: var(--teal-tint);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: var(--gloss-top), 0 5px 13px -6px rgba(80,60,30,0.28);
}
.trust-bar--grid .trust:nth-child(1) svg { background: var(--teal-tint);  color: var(--accent-teal); }
.trust-bar--grid .trust:nth-child(2) svg { background: var(--coral-tint); color: var(--accent-coral); }
.trust-bar--grid .trust:nth-child(3) svg { background: var(--sage-tint);  color: var(--accent-sage); }
.trust-bar--grid .trust:nth-child(4) svg { background: var(--sun-tint);   color: var(--accent-sun); }
/* On phones, hairlines between the 2x2 cells give the card quiet structure. */
@media (max-width: 719px) {
  .trust-bar--grid .trust:nth-child(odd) { border-right: 1px solid var(--hairline-soft); }
  .trust-bar--grid .trust:nth-child(1),
  .trust-bar--grid .trust:nth-child(2) { border-bottom: 1px solid var(--hairline-soft); }
}
@media (min-width: 760px) {
  .trust + .trust { border-left-color: var(--hairline-soft); }
}

/* -------- Refined chip on feature cards -------- */
.chip {
  box-shadow:
    var(--gloss-top),
    0 6px 14px -6px rgba(80,60,30,0.18);
  border: 1px solid rgba(255,255,255,0.6);
}

/* -------- Refined gallery — polaroid-style frame option -------- */
.gallery figure {
  border: 1px solid var(--hairline-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,248,240,1) 100%);
  box-shadow: var(--shadow-card);
}
.gallery figure:hover { box-shadow: var(--shadow-float); }
/* Polaroid variant — usable on home-glimpse tiles + gallery tiles */
.frame--polaroid {
  background: #fff;
  padding: 0.6rem 0.6rem 1.4rem;
  border-radius: calc(var(--r-md) + 4px);
  box-shadow: var(--shadow-card);
  transform: rotate(-1deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.frame--polaroid:hover { transform: rotate(0deg) translateY(-4px); box-shadow: var(--shadow-float); }
.frame--polaroid img { border-radius: calc(var(--r-md) - 2px); }

/* -------- Refined accordion -------- */
.acc-item {
  border-color: var(--hairline-soft);
  box-shadow: var(--shadow-card);
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,248,240,1) 100%);
}
.acc-trigger:hover { background: rgba(255,255,255,0.5); }

/* -------- Refined form fields -------- */
.field input, .field textarea, .field select {
  background:
    linear-gradient(180deg, rgba(252,248,240,0.6) 0%, rgba(255,255,255,1) 100%);
  box-shadow: inset 0 1px 2px rgba(58,49,40,0.05);
  border-color: var(--hairline);
}
.field input:focus, .field textarea:focus, .field select:focus {
  box-shadow:
    inset 0 1px 2px rgba(58,49,40,0.04),
    0 0 0 4px var(--teal-tint),
    0 8px 20px -10px rgba(63,114,104,0.30);
}

/* -------- Refined newsletter — layered glow + edge halo -------- */
.newsletter {
  background:
    radial-gradient(140% 100% at 100% 0%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 50%),
    radial-gradient(120% 100% at 0% 100%, rgba(217,102,61,0.18) 0%, rgba(217,102,61,0) 55%),
    linear-gradient(135deg, var(--wood) 0%, var(--terracotta) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    var(--shadow-float);
  border: 1px solid rgba(255,255,255,0.35);
}
.newsletter-form input {
  box-shadow:
    inset 0 1px 2px rgba(58,49,40,0.06),
    var(--gloss-top);
}

/* -------- Refined footer: subtle paper grain + ornamental column heads -------- */
.site-footer {
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(232,201,155,0.10) 0%, rgba(232,201,155,0) 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(63,114,104,0.10) 0%, rgba(63,114,104,0) 60%),
    #2a2620;
}
.footer-col h3 {
  position: relative;
  padding-bottom: 0.6rem;
}
.footer-col h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 28px; height: 2px; border-radius: 2px;
  background: var(--wood);
}
.footer-col a { transition: color 0.22s ease, opacity 0.22s ease; }
.footer-col a:hover { color: var(--wood); }
.socials a {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.socials a:hover {
  background: var(--wood);
  border-color: var(--wood);
  transform: translateY(-3px) scale(1.04);
}
.map-placeholder {
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 18px 40px -16px rgba(0,0,0,0.5);
}

/* -------- Refined sticky member CTA ring (existing animation, more subtle) */
@keyframes ctaRing {
  0%   { box-shadow: 0 0 0 0 rgba(236, 154, 144, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(236, 154, 144, 0); }
  100% { box-shadow: 0 0 0 0 rgba(236, 154, 144, 0); }
}

/* -------- Refined pricing card check-mark glyphs (custom SVG) -------- */
.price-list li::before {
  width: 18px; height: 18px;
  background:
    var(--sage-tint)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F8A4D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-11'/%3E%3C/svg%3E")
    center / 12px no-repeat;
  box-shadow:
    inset 0 0 0 1.5px rgba(111,138,77,0.45),
    0 2px 4px rgba(111,138,77,0.15);
}
.price-card.featured .price-list li::before {
  background:
    var(--terra-tint)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B35A37' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-11'/%3E%3C/svg%3E")
    center / 12px no-repeat;
  box-shadow:
    inset 0 0 0 1.5px rgba(179,90,55,0.45),
    0 2px 4px rgba(179,90,55,0.15);
}

/* -------- Big stat number — refined display -------- */
.stat .num { letter-spacing: -0.02em; }
.stat .num.is-counting { transform: translateY(2px); transition: transform 0.4s ease; }
.stat .num.is-counted  { transform: none; }

/* -------- Section heading rhythm helper -------- */
.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head .section-lead { margin-top: 0.6rem; }

/* -------- v11 — 3D mouse tilt (JS-powered) --------
   JS owns the per-frame transform (mouse-follow rotateX/Y + subtle scale).
   No CSS transition here — it would smear the rAF lerp. */
.tilt-3d {
  transform-style: preserve-3d;
  will-change: transform;
}
/* Reveal + tilt-3d clash: .reveal declares `transition: transform 0.7s`,
   which keeps re-firing every time main.js writes a new inline transform —
   making cards after the first appear frozen. Drop the reveal slide-in on
   tilt-3d cards; only the opacity fade still applies. */
.reveal.tilt-3d {
  transform: none;
}
.reveal.tilt-3d.is-visible {
  transition: opacity 0.6s ease;
}
/* Global `.card` declares `transition: transform 0.28s, box-shadow 0.25s`;
   strip transform here so it doesn't fight the JS rAF on home + menu cards. */
.card.tilt-3d {
  transition: box-shadow 0.25s ease;
}
.tilt-3d > .tilt-3d-inner {
  transform-style: preserve-3d;
  transform: translateZ(0);
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .tilt-3d { transform: none !important; }
}

/* -------- v11 — Magnetic CTA pull (JS-powered) -------- */
.magnetic {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .magnetic { transform: none !important; }
}

/* -------- v11 — Sparkle field (CSS-only twinkling dust) -------- */
.has-sparkles { position: relative; }
.sparkle-field {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.sparkle-field i {
  position: absolute;
  width: 8px; height: 8px;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 35%, rgba(255,255,255,0) 70%),
    radial-gradient(circle at 50% 50%, var(--sun) 0 60%, rgba(248,217,143,0) 90%);
  border-radius: 50%;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.6));
  animation: sparkleTwinkle 4.5s ease-in-out infinite;
}
.sparkle-field i:nth-child(1)  { top: 12%; left: 8%;  animation-delay: 0.0s; }
.sparkle-field i:nth-child(2)  { top: 24%; left: 18%; animation-delay: 0.7s; width: 6px; height: 6px; }
.sparkle-field i:nth-child(3)  { top: 8%;  left: 38%; animation-delay: 1.5s; }
.sparkle-field i:nth-child(4)  { top: 28%; left: 54%; animation-delay: 2.3s; width: 5px; height: 5px; }
.sparkle-field i:nth-child(5)  { top: 14%; left: 72%; animation-delay: 0.4s; }
.sparkle-field i:nth-child(6)  { top: 32%; left: 86%; animation-delay: 3.0s; width: 7px; height: 7px; }
.sparkle-field i:nth-child(7)  { top: 60%; left: 12%; animation-delay: 2.0s; width: 6px; height: 6px; }
.sparkle-field i:nth-child(8)  { top: 70%; left: 32%; animation-delay: 1.0s; }
.sparkle-field i:nth-child(9)  { top: 56%; left: 64%; animation-delay: 3.5s; width: 5px; height: 5px; }
.sparkle-field i:nth-child(10) { top: 78%; left: 84%; animation-delay: 0.8s; }
.sparkle-field i:nth-child(11) { top: 44%; left: 28%; animation-delay: 2.6s; width: 4px; height: 4px; }
.sparkle-field i:nth-child(12) { top: 48%; left: 78%; animation-delay: 1.8s; width: 4px; height: 4px; }
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50%      { opacity: 0.95; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .sparkle-field { display: none; }
}

/* -------- v11 — Marquee strip (used on subtle social-proof bars) -------- */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; gap: 3rem;
  width: max-content;
  animation: marqueeRoll 40s linear infinite;
}
@keyframes marqueeRoll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* -------- v11 — Refined hero scrim for richer sky depth -------- */
.hero-v2 .hero-scrim,
.page-hero .hero-scrim {
  background:
    radial-gradient(60% 40% at 50% 12%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.24) 24%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0) 72%);
}

/* -------- v11 — Refined photo glimpse tiles (home + play-pricing) -------- */
.home-glimpse-tile,
.pp-glimpse-tile {
  box-shadow: var(--shadow-card);
  border: 1px solid var(--hairline-soft);
}
.home-glimpse-tile:hover,
.pp-glimpse-tile:hover { box-shadow: var(--shadow-float); }

/* -------- v11 — Pop-bubble refined glow -------- */
.pop-bubble {
  box-shadow:
    var(--gloss-top),
    var(--shadow-float),
    var(--glow-sun);
  border: 1.5px solid rgba(255,255,255,0.7);
}
.pop-bubble--sky   { box-shadow: var(--gloss-top), var(--shadow-float), var(--glow-sky); }
.pop-bubble--coral { box-shadow: var(--gloss-top), var(--shadow-float), var(--glow-coral); }
.pop-bubble--sage  { box-shadow: var(--gloss-top), var(--shadow-float), var(--glow-sage); }

/* -------- v11 — Polished policy strip -------- */
.policy {
  box-shadow:
    var(--gloss-top),
    0 1px 2px rgba(80,60,30,0.06),
    0 12px 28px -14px rgba(80,60,30,0.16);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 50%),
    var(--wood-tint);
}

/* -------- v11 — Polished badge / sticker -------- */
.badge, .sticker, .savings-sticker, .most-popular-sticker, .pp-sticker, .storefront-sticker,
.member-flag, .home-card-sticker {
  box-shadow:
    var(--gloss-top),
    0 1px 2px rgba(80,60,30,0.10),
    0 8px 18px -8px rgba(80,60,30,0.22);
}

/* -------- v11 — Marker highlight refined (slightly richer band) -------- */
.hl {
  background-size: 100% 42%;
  background-position: 0 82%;
  padding: 0 0.12em;
}

/* -------- v11 — Refined storefront cards (play-pricing) -------- */
.storefront-card {
  border-color: var(--hairline-soft);
  box-shadow: var(--shadow-card);
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,248,240,1) 100%);
}
.storefront-card:hover { box-shadow: var(--shadow-float) !important; }

/* -------- v11 — Refined pricing cards -------- */
.price-card, .pp-price-card {
  box-shadow: var(--shadow-card);
  border-color: var(--hairline-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,248,240,1) 100%);
}
.price-card:hover, .pp-price-card:hover { box-shadow: var(--shadow-float); }
.price-card.featured, .pp-price-card.featured {
  box-shadow:
    var(--gloss-top),
    var(--shadow-float),
    0 0 0 2px var(--wood);
}

/* -------- v11 — Booking widget polish (parties) -------- */
.booking {
  border-color: var(--hairline-soft);
  box-shadow: var(--shadow-card);
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,248,240,1) 100%);
}
.cal .day { transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; }
.cal .day.avail:hover { transform: translateY(-2px); background: var(--sage); color: #fff; }
.cal .day.selected {
  box-shadow:
    var(--gloss-top),
    0 6px 14px -4px rgba(179,90,55,0.45);
}
.slot { transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; }
.slot:hover { transform: translateY(-2px); border-color: var(--accent-teal); }

/* -------- v11 — Quote card polish -------- */
.quote {
  border-color: var(--hairline-soft);
  box-shadow: var(--shadow-card);
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,248,240,1) 100%);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }

/* -------- v11 — Value-card polish -------- */
.value-card {
  border: 1px solid var(--hairline-soft);
  box-shadow: var(--shadow-card);
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,248,240,1) 100%);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.28s ease;
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); }

/* -------- v11 — Mobile nav refined glass panel -------- */
.mobile-menu {
  background: rgba(247, 243, 236, 0.97);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
}
.mobile-menu a {
  border-radius: var(--r-md);
  margin-inline: clamp(0.6rem, 3vw, 1.5rem);
  transition: background 0.2s ease, color 0.2s ease, padding 0.2s ease;
}
.mobile-menu a:hover { background: rgba(255,255,255,0.7); }

/* -------- v11 — Refined hero title -------- */
.home-hero-title,
.page-hero h1 { letter-spacing: -0.025em; }

/* -------- v11 — Section break ornament (small dot trio between bands) -------- */
.section-ornament {
  display: flex; justify-content: center; gap: 0.5rem;
  padding-block: clamp(1.2rem, 3vw, 2rem);
}
.section-ornament i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-coral); opacity: 0.7;
}
.section-ornament i:nth-child(1) { background: var(--accent-sage); }
.section-ornament i:nth-child(3) { background: var(--accent-sun); }

/* -------- "pop" buttons: alias of the standard neobrutalist button -------- */
.btn--pop        { box-shadow: var(--btn-hard); }
.btn--pop:hover  { transform: translate(2px, 2px); box-shadow: var(--btn-hard-hover); }
.btn--pop:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--btn-edge); }

/* -------- v11 — Reduced motion guards for everything new -------- */
@media (prefers-reduced-motion: reduce) {
  body { animation: none !important; }
  .sparkle-field i { animation: none !important; opacity: 0; }
  .marquee-track { animation: none !important; }
}

/* ============================================================
   v12 — Creative pricing cards
   Bold sticker-style cards with a chunky offset shadow, slight
   rotation and a hand-drawn feel. Shared by play-pricing,
   memberships and parties. 2 or 3 cards per row; featured tier
   wears a rotated "Most popular!" badge.
   ============================================================ */
.cp-grid {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  grid-template-columns: 1fr;
  max-width: 1080px;
  margin: 2.6rem auto 0;
  /* Leave breathing room so the rotated outer cards don't clip
     against the section edge on small viewports. */
  padding: 1rem 0.5rem 1.6rem;
}
/* Single-card layout (the lone Day Pass card) — stays centered and card-width
   instead of stretching the full grid. */
.cp-grid--1 { max-width: 440px; }
@media (min-width: 720px) {
  .cp-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
  .cp-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* The card itself — the rotation lives here so the shadow rotates
   with it; the offset shadow is built with two solid box-shadows
   (one for the ink border, one for the lift) for that sticker feel. */
.cp-card {
  position: relative;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.8vw, 1.9rem);
  display: flex;
  flex-direction: column;
  box-shadow: 5px 5px 0 0 var(--ink);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease;
  will-change: transform;
}
/* Per-card playful rotation. 2-card grids alternate; 3-card adds a
   third angle. Pure visual — no layout shift. */
.cp-grid--2 .cp-card:nth-child(1) { transform: rotate(-1deg); }
.cp-grid--2 .cp-card:nth-child(2) { transform: rotate(1deg); }
.cp-grid--3 .cp-card:nth-child(1) { transform: rotate(-1deg); }
.cp-grid--3 .cp-card:nth-child(2) { transform: rotate(1deg); }
.cp-grid--3 .cp-card:nth-child(3) { transform: rotate(-2deg); }

.cp-card:hover {
  box-shadow: 10px 10px 0 0 var(--ink);
}
.cp-grid--2 .cp-card:nth-child(1):hover,
.cp-grid--3 .cp-card:nth-child(1):hover { transform: rotate(-1deg) translate(-4px, -4px); }
.cp-grid--2 .cp-card:nth-child(2):hover,
.cp-grid--3 .cp-card:nth-child(2):hover { transform: rotate(1deg) translate(-4px, -4px); }
.cp-grid--3 .cp-card:nth-child(3):hover { transform: rotate(-2deg) translate(-4px, -4px); }

/* Featured card — sun-tinted background, slightly heavier baseline shadow */
.cp-card--featured {
  background: var(--sun-tint);
  box-shadow: 7px 7px 0 0 var(--ink);
}
.cp-card--featured:hover { box-shadow: 12px 12px 0 0 var(--ink); }

/* Rotated "Most popular!" sticker pinned to the top-right corner */
.cp-popular {
  position: absolute;
  top: -0.9rem;
  right: -0.7rem;
  background: var(--sun);
  color: #5a3d12;
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  transform: rotate(8deg);
  box-shadow: 2px 2px 0 0 var(--ink);
  white-space: nowrap;
  z-index: 2;
}

/* Round, ink-bordered icon container at the top of each card */
.cp-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--white);
  display: grid;
  place-items: center;
  margin-bottom: 0.9rem;
}
.cp-icon img { width: 26px; height: 26px; }
.cp-icon--sun   { background: var(--sun-tint); }
.cp-icon--sky   { background: var(--sky-tint); }
.cp-icon--coral { background: var(--coral-tint); }
.cp-icon--sage  { background: var(--sage-tint); }
.cp-icon--teal  { background: var(--teal-tint); }
.cp-icon--wood  { background: var(--wood-tint); }
/* Inside featured card, give the icon a punchier fill so it stands
   against the sun-tinted card background. */
.cp-card--featured .cp-icon { background: var(--sun); }

/* Tier name — uses the script face for the handwritten feel */
.cp-name {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 1.8rem);
  color: var(--ink);
  margin: 0 0 0.15rem;
  line-height: 1.15;
}
.cp-blurb {
  font-family: var(--font-body);
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0 0 1.1rem;
}

/* Big chunky price */
.cp-price {
  margin: 0.2rem 0 1.1rem;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.cp-price-amount {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3rem);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.cp-price-unit {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* Feature list with circular checkmark bullets */
.cp-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.cp-list li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.4;
}
.cp-check {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--white);
  display: grid;
  place-items: center;
  margin-top: 0.1rem;
}
.cp-check svg { width: 11px; height: 11px; stroke: var(--ink); }
.cp-card--featured .cp-check { background: var(--sun); }

/* Full-width CTA with its own little offset shadow */
.cp-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  line-height: 1.2;
  padding: 0 1rem;
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  background: var(--base);
  border: 2px solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: 4px 4px 0 0 var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.cp-cta:hover { background: var(--white); box-shadow: 6px 6px 0 0 var(--ink); transform: translate(-2px, -2px); }
.cp-cta:active { box-shadow: 2px 2px 0 0 var(--ink); transform: translate(2px, 2px); }
.cp-card--featured .cp-cta {
  background: var(--sun);
  color: #4a3208;
}
.cp-card--featured .cp-cta:hover { background: #f9e1a7; }

/* Day Pass child-count picker — sits between the price and the feature list.
   Styled to match the sticker-card language (ink border + offset shadow). */
.cp-tier {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 1.2rem;
}
.cp-tier-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.cp-tier-select {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 2.5rem 0.7rem 0.9rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233a3128' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 16px;
  border: 2px solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: 3px 3px 0 0 var(--ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.cp-tier-select:hover { box-shadow: 4px 4px 0 0 var(--ink); transform: translate(-1px, -1px); }
.cp-tier-select:focus-visible { outline: 3px solid var(--accent-sky); outline-offset: 2px; }

/* Eyebrow tag above the section title — small, rotated, script */
.cp-eyebrow {
  display: inline-block;
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--accent-sky);
  transform: rotate(-1.5deg);
  margin-bottom: 0.5rem;
}

/* Reduced motion: kill all the rotation/lift play */
@media (prefers-reduced-motion: reduce) {
  .cp-card,
  .cp-grid--2 .cp-card:nth-child(1),
  .cp-grid--2 .cp-card:nth-child(2),
  .cp-grid--3 .cp-card:nth-child(1),
  .cp-grid--3 .cp-card:nth-child(2),
  .cp-grid--3 .cp-card:nth-child(3) {
    transform: none !important;
  }
  .cp-card:hover,
  .cp-grid--2 .cp-card:nth-child(1):hover,
  .cp-grid--2 .cp-card:nth-child(2):hover,
  .cp-grid--3 .cp-card:nth-child(1):hover,
  .cp-grid--3 .cp-card:nth-child(2):hover,
  .cp-grid--3 .cp-card:nth-child(3):hover {
    transform: none !important;
  }
  .cp-popular { transform: none !important; }
  .cp-cta:hover, .cp-cta:active { transform: none !important; }
}

/* Touch devices: tap = the hover treatment */
@media (hover: none) {
  .cp-grid--2 .cp-card:nth-child(1):active { transform: rotate(-1deg) translate(-3px, -3px); box-shadow: 8px 8px 0 0 var(--ink); }
  .cp-grid--2 .cp-card:nth-child(2):active { transform: rotate(1deg) translate(-3px, -3px); box-shadow: 8px 8px 0 0 var(--ink); }
  .cp-grid--3 .cp-card:nth-child(1):active { transform: rotate(-1deg) translate(-3px, -3px); box-shadow: 8px 8px 0 0 var(--ink); }
  .cp-grid--3 .cp-card:nth-child(2):active { transform: rotate(1deg) translate(-3px, -3px); box-shadow: 8px 8px 0 0 var(--ink); }
  .cp-grid--3 .cp-card:nth-child(3):active { transform: rotate(-2deg) translate(-3px, -3px); box-shadow: 8px 8px 0 0 var(--ink); }
}

/* ============================================================
   v13 — Mobile experience layer
   A phone-first refinement pass that makes the small-screen view
   the strongest version of the site: tighten the hero crop,
   enlarge every touch target to a comfortable minimum, stack CTAs
   for the thumb, harden the menu, balance headline wrap and trim
   the motion/battery budget. Desktop is untouched — everything is
   gated behind a max-width query.
   ============================================================ */

/* iOS text-inflation guard + nicer wrapping everywhere (progressive) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
h1, h2, h3, .cp-name { text-wrap: balance; }
p, .lead, .section-lead, .cp-blurb, li { text-wrap: pretty; }

/* ---------- Buttery scroll on phones: drop the live backdrop blur ----------
   This is the real "the hero isn't smooth when I scroll" fix. The sticky
   header used `backdrop-filter: blur()`. On a phone, that forces the browser
   to RE-BLUR the busy, animated hero (drifting clouds + town) behind it on
   every single scroll frame — a live blur per frame over moving content.
   That's what tanks the frame rate and makes the hero look like it smears /
   "drags" as it passes under the header. Desktop keeps the glass (cheap
   there, no per-frame scrolling blur cost on a pointer device); on touch we
   swap the live blur for a frosted *solid* fill that reads almost identically
   but costs the GPU nothing while scrolling. Scoped to the touch-nav range so
   it also covers tablets. */
@media (max-width: 959px) {
  .site-header,
  .site-header.is-stuck {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* Bump opacity so the nav stays crisp over the hero now that there's no blur
     to soften what's behind it. At the very top (over sky only) a hint of
     translucency still feels airy; once stuck over real content we go nearly
     solid so no sharp text ghosts through where the blur used to frost it. */
  .site-header        { background: rgba(247, 243, 236, 0.92); }
  .site-header.is-stuck { background: rgba(247, 243, 236, 0.985); }
}
/* ---------- Scroll-lock behind the open menu (no layout shift) ---------- */
@media (max-width: 959px) {
  html.nav-open, html.nav-open body { overflow: hidden; }
}

/* ---------- Header: tighter + smarter on small screens ---------- */
@media (max-width: 759px) {
  :root { --header-h: 64px; }
}
@media (max-width: 420px) {
  .brand svg, .brand img { height: 34px; }
  .brand-name { font-size: 0.82rem; letter-spacing: 0.08em; }
  .brand-sub { font-size: 0.95rem; }
  .header-inner { gap: 0.5rem; }
}
@media (max-width: 360px) {
  /* The town mark alone carries the brand at the very smallest widths. */
  .brand-text { display: none; }
}

/* ---------- Mobile menu: a polished right-side slide-in drawer ----------
   Redo of the old inline push-down panel. The hamburger now opens a proper
   off-canvas drawer from the right, over a dimmed scrim. main.js relocates
   .mobile-menu to <body> (so position:fixed is viewport-relative, not trapped
   by the header's backdrop-filter) and injects the .m-drawer-top close bar +
   .m-drawer-foot CTA. */
@media (max-width: 959px) {
  /* Scrim: full-viewport dimmer, click-to-close. */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: block;                 /* cancel the old grid-collapse mechanism */
    background: rgba(40, 33, 26, 0);
    border-bottom: 0;
    pointer-events: none;
    visibility: hidden;
    transition: background 0.34s ease, visibility 0s linear 0.34s;
  }
  html.nav-open .mobile-menu {
    background: rgba(40, 33, 26, 0.48);
    pointer-events: auto;
    visibility: visible;
    transition: background 0.34s ease, visibility 0s;
  }

  /* The sliding panel. */
  .mobile-menu > div {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(87vw, 360px);
    height: 100%;
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    padding: 0 0 calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background:
      radial-gradient(130% 55% at 100% 0%, rgba(232,201,155,0.32) 0%, rgba(232,201,155,0) 56%),
      linear-gradient(180deg, #fbf7ef 0%, var(--base) 100%);
    box-shadow: -24px 0 64px -26px rgba(40,33,26,0.55);
    border-left: 1px solid rgba(255,255,255,0.65);
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  html.nav-open .mobile-menu > div { transform: none; }

  /* Sticky top bar inside the drawer (injected by JS): label + close button. */
  .m-drawer-top {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0.9rem 0.85rem 1.4rem;
    border-bottom: 1px solid var(--hairline-soft);
    background: linear-gradient(180deg, #fdfaf4 0%, rgba(253,250,244,0.9) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .m-drawer-title {
    font-family: var(--font-head); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.18em;
    font-size: 0.72rem; color: var(--accent);
  }
  .m-drawer-close {
    width: 44px; height: 44px; flex: none;
    display: grid; place-items: center;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
  }
  .m-drawer-close svg { width: 18px; height: 18px; }
  .m-drawer-close:active { transform: scale(0.9); background: var(--terra-tint); color: var(--accent); }

  /* The panel takes programmatic focus on open (so keyboard users land inside
     the dialog); it must never render its own focus ring — the links within it
     still get one when tabbed to. */
  .mobile-menu > div:focus,
  .mobile-menu > div:focus-visible { outline: none; }

  /* Link list. */
  .mobile-menu nav {
    flex: 1;
    padding: 0.7rem 0.8rem;
    gap: 0.12rem;
  }
  .mobile-menu a {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 54px;
    margin: 0;
    padding: 0.9rem 1rem;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-family: var(--font-head); font-weight: 600; font-size: 1.1rem;
    color: var(--ink);
  }
  /* Chevron affordance on each link. */
  .mobile-menu nav a::after {
    content: "";
    width: 9px; height: 9px; flex: none;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.3;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }
  .mobile-menu a.active {
    background: var(--terra-tint);
    color: var(--accent);
    border-color: rgba(179,90,55,0.18);
    font-weight: 700;
  }
  .mobile-menu a.active::after { opacity: 0.65; }
  .mobile-menu a:active { background: rgba(255,255,255,0.7); }
  .mobile-menu a:active::after { transform: translateX(2px) rotate(45deg); opacity: 0.6; }

  /* Footer CTA block (injected by JS): membership button + tap-to-call. */
  .m-drawer-foot {
    margin-top: auto;
    display: grid;
    gap: 0.55rem;
    padding: 0.95rem 1.1rem 0.3rem;
    border-top: 1px solid var(--hairline-soft);
  }
  .m-drawer-foot .btn { width: 100%; justify-content: center; }
  .m-drawer-call {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    min-height: 46px;
    text-decoration: none;
    font-family: var(--font-head); font-weight: 600; font-size: 0.98rem;
    color: var(--accent-teal);
  }
  .m-drawer-call svg { width: 17px; height: 17px; flex: none; }
}

/* Reduced motion: no slide, just appear. */
@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  .mobile-menu > div { transition: none; }
  .mobile-menu { transition: background 0.01s; }
}

/* ---------- Touch targets: 44px+ minimum for tappable chrome ---------- */
@media (max-width: 759px) {
  .footer-col li { margin-bottom: 0.15rem; }
  .footer-col li a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .socials a { width: 46px; height: 46px; }
  .socials { gap: 0.7rem; margin-top: 1rem; }
  .acc-trigger { padding-block: 1.15rem; }
  .slot { min-height: 44px; padding: 0.6rem 1.05rem; }
  .booking-nav button { width: 40px; height: 40px; }
}

/* ---------- CTAs: stack full-width for the thumb on true phones ---------- */
@media (max-width: 559px) {
  .flex-cta { flex-direction: column; align-items: stretch; }
  .flex-cta .btn { width: 100%; justify-content: center; }
  .flex-cta.center { align-items: stretch; }
  .newsletter-form { flex-direction: column; }
  /* The base rule sets `flex: 1 1 14rem`; in a column that 14rem basis becomes
     the input's HEIGHT (a 224px-tall bubble). Reset it so the field sizes to
     its natural height and just spans the full width. */
  .newsletter-form input,
  .newsletter-form .btn,
  .newsletter-form button { flex: 0 0 auto; width: 100%; }
  /* Header keeps its inline Join + hamburger — only in-content CTAs stack. */
  .header-cta { flex-direction: row; align-items: center; }
}

/* ---------- Hero crop: trim tall-phone emptiness, keep it immersive ---------- */
@media (max-width: 759px) {
  /* Fixed px height on phones — NO viewport units at all, so the "hero extends
     on scroll" behaviour is gone entirely. svh was already stable across the
     address-bar toggle, but tying the hero to the viewport in ANY way still
     coupled it to those state changes; a plain px height fully decouples it.
     It stays min-height, so taller content (a tiny phone that wraps more) grows
     the hero instead of clipping — it just never reacts to the URL bar. The
     ~600 / 460 values match what a typical phone showed before, so the look is
     unchanged; only the wobble is removed. */
  .hero-v2  { min-height: 600px; }
  .page-hero {
    min-height: 460px;
    padding-block: clamp(2rem, 7vw, 3rem);
  }
  .page-hero .hero-art { margin-top: 1.1rem; }
}

/* ---------- Tap feedback colour ---------- */
@media (max-width: 959px) {
  a, button, .btn, summary, .acc-trigger, .slot, [role="button"] {
    -webkit-tap-highlight-color: rgba(179, 90, 55, 0.12);
  }
}

/* ---------- Motion / battery budget on phones ----------
   The drifting clouds stay (the signature shared motion across the
   site), but the subtler desktop flourishes that are barely visible
   on a small screen are switched off to save battery and avoid jank. */
@media (max-width: 759px) {
  .sparkle-field { display: none; }
  .bubbles { opacity: calc(var(--bub-opacity, 0.30) * 0.7); }
}

/* ---------- Horizontal-overflow guards ---------- */
@media (max-width: 480px) {
  .cp-popular { right: -0.15rem; top: -0.8rem; font-size: 0.85rem; padding: 0.45rem 0.8rem; }
  .cp-grid { padding-inline: 0.25rem; }
}