/* ==========================================================================
   SplashBerry Kids Water Park — Concept 01 "Sticker Splash"
   A kid's sticker book that exploded over a pool deck.
   Flat colour, 3px ink outlines, hard offset shadows only (never blur).
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* colour roles */
  --chlorine: #E6F7F5;          /* canvas: pale pool-water tint */
  --chlorine-2: #D3EEEA;        /* pool-tile grout on the canvas */
  --paper: #FFFFFF;             /* card + sticker backing */
  --ink: #121016;               /* text, outlines, the only shadow colour */
  --ink-2: #3A3642;             /* secondary text on light fills only */
  --berry: #FF3D7F;             /* brand + primary CTA (ink text) */
  --lemon: #FFE14D;
  --pool: #2FA8FF;
  --lime: #7BE36B;
  --grape: #8E63FF;
  --tangerine: #FF8A3D;
  --blush: #FF9EC1;             /* cheeks only */
  --rule: #BFE3FF;              /* notebook ruling */

  /* type */
  --font-display: "Bagel Fat One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --font-ui: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-hero: clamp(3.2rem, min(7.6vw, 13svh), 8.5rem);
  --fs-display: clamp(3.2rem, 9vw, 8.5rem);
  --fs-h2: clamp(2.4rem, 5.5vw, 4.8rem);
  --fs-h3: clamp(1.6rem, 2.3vw, 2.15rem);
  --fs-h4: 1.25rem;
  --fs-lead: clamp(1.125rem, 1.3vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-label: .8125rem;
  --fs-micro: .75rem;
  --lh-body: 1.55;

  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1280px;
  --sec-pad: clamp(80px, 9vw, 136px);
  --header-h: 84px;

  /* shape */
  --line: 3px;
  --r-card: 28px;
  --r-btn: 14px;
  --r-pill: 999px;
  --pop: 6px 6px 0 var(--ink);
  --pop-sm: 4px 4px 0 var(--ink);
  --pop-lg: 9px 9px 0 var(--ink);
  --pressed: 2px 2px 0 var(--ink);

  /* motion */
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 340ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-io: cubic-bezier(.45, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

@media (max-width: 767px) {
  :root {
    --line: 2.5px;
    --pop: 5px 5px 0 var(--ink);
    --pop-lg: 7px 7px 0 var(--ink);
    --r-card: 24px;
    --header-h: 68px;
  }
}

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  background: var(--chlorine);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
a, button, label, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

:focus-visible {
  outline: 3px dashed var(--ink);
  outline-offset: 4px;
  border-radius: 6px;
}
::selection { background: var(--lemon); color: var(--ink); }

[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }

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

.skip {
  position: fixed;
  z-index: 200;
  left: 16px; top: 16px;
  translate: 0 -200%;
  padding: 12px 18px;
  background: var(--lemon);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-btn);
  box-shadow: var(--pop-sm);
  font-weight: 800;
  text-decoration: none;
}
.skip:focus { translate: 0 0; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}

/* ---------- 3. SVG art system (used by every sticker & illustration) ----- */
.fk { fill: var(--ink); }
.fw { fill: #fff; }
.fb { fill: var(--berry); }
.fl { fill: var(--lemon); }
.fp { fill: var(--pool); }
.fg { fill: var(--lime); }
.fv { fill: var(--grape); }
.ft { fill: var(--tangerine); }
.fc { fill: var(--chlorine); }
.fh { fill: var(--blush); }
.fn { fill: none; }
.ol {
  stroke: var(--ink);
  stroke-width: var(--line);
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.ol.ol2 { stroke-width: calc(var(--line) * 2); }
.ol.olt { stroke-width: calc(var(--line) * .7); }
.olw {
  fill: none;
  stroke: #fff;
  stroke-width: var(--line);
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* die-cut border: ink pass then white pass of the same silhouette */
.cutk { --cs: 19px; fill: var(--ink); stroke: var(--ink); stroke-width: 19px; stroke-linejoin: round; stroke-linecap: round; }
.cutw { --cs: 14px; fill: #fff; stroke: #fff; stroke-width: 14px; stroke-linejoin: round; stroke-linecap: round; }
.sil { opacity: .16; }
.svg-display { font-family: var(--font-display); }
.svg-mono { font-family: var(--font-mono); font-weight: 700; letter-spacing: .06em; }

.sticker-svg { overflow: visible; filter: drop-shadow(5px 5px 0 var(--ink)); }

/* ---------- 4. Shared components ----------------------------------------- */

/* sticker lettering: white fill, fat ink outline, hard offset */
.stk {
  color: #fff;
  -webkit-text-stroke: .1em var(--ink);
  paint-order: stroke fill;
  text-shadow: .05em .055em 0 var(--ink);
}

/* buttons: the Gumroad press */
.btn {
  --btn-bg: var(--paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 52px;
  padding: .85em 1.45em;
  border: var(--line) solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.05;
  letter-spacing: .01em;
  text-decoration: none;
  text-align: center;
  box-shadow: var(--pop);
  transition: translate var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.btn svg { width: 1.3em; height: 1.3em; flex: none; }
@media (hover: hover) {
  .btn:hover { translate: -2px -2px; box-shadow: 8px 8px 0 var(--ink); }
}
.btn:active { translate: 4px 4px; box-shadow: var(--pressed); transition-duration: 60ms; }
.btn--berry { --btn-bg: var(--berry); }
.btn--lemon { --btn-bg: var(--lemon); }
.btn--pool { --btn-bg: var(--pool); }
.btn--lime { --btn-bg: var(--lime); }
.btn--ink { --btn-bg: var(--ink); color: #fff; }
.btn--lg { min-height: 60px; font-size: 1.125rem; padding: 1em 1.6em; }
.btn--xl { min-height: 68px; font-size: 1.25rem; padding: 1em 1.8em; width: 100%; }
.btn--sm { min-height: 44px; padding: .65em 1.1em; font-size: .9375rem; box-shadow: var(--pop-sm); }
@media (hover: hover) { .btn--sm:hover { box-shadow: 6px 6px 0 var(--ink); } }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn--berry:focus-visible, .btn:focus-visible { outline-offset: 6px; }

/* eyebrow: a little label-maker tag */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-bottom: var(--s5);
  padding: .5em .85em .45em;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-label);
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  rotate: -2deg;
}
.eyebrow svg { width: 14px; height: 14px; }

.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: .92;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.lead {
  max-width: 44ch;
  margin-top: var(--s5);
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-wrap: pretty;
}
.mono { font-family: var(--font-mono); }

/* sections */
.sec { position: relative; padding-block: var(--sec-pad); overflow-x: clip; }
.tape-band { position: relative; z-index: 3; overflow-x: clip; padding-block: 18px; margin-block: -50px; }
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s5) var(--s6);
  margin-bottom: clamp(44px, 5vw, 72px);
}
.sec-head > div { min-width: 0; }

/* colour bands with a wavy, outlined pool edge */
.band { position: relative; }
.band::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -21px;
  height: 24px;
  background-repeat: repeat-x;
  background-size: 80px 24px;
  pointer-events: none;
}
.band--pool { background: var(--pool); }
.band--pool::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 24'%3E%3Cpath d='M0 12C6.7 6.7 13.3 4 20 4S33.3 6.7 40 12S53.3 20 60 20S73.3 17.3 80 12V24H0Z' fill='%232FA8FF'/%3E%3Cpath d='M0 12C6.7 6.7 13.3 4 20 4S33.3 6.7 40 12S53.3 20 60 20S73.3 17.3 80 12' fill='none' stroke='%23121016' stroke-width='3'/%3E%3C/svg%3E"); }
.band--berry { background: var(--berry); }
.band--berry::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 24'%3E%3Cpath d='M0 12C6.7 6.7 13.3 4 20 4S33.3 6.7 40 12S53.3 20 60 20S73.3 17.3 80 12V24H0Z' fill='%23FF3D7F'/%3E%3Cpath d='M0 12C6.7 6.7 13.3 4 20 4S33.3 6.7 40 12S53.3 20 60 20S73.3 17.3 80 12' fill='none' stroke='%23121016' stroke-width='3'/%3E%3C/svg%3E"); }
.band--lemon { background: var(--lemon); }
.band--lemon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 24'%3E%3Cpath d='M0 12C6.7 6.7 13.3 4 20 4S33.3 6.7 40 12S53.3 20 60 20S73.3 17.3 80 12V24H0Z' fill='%23FFE14D'/%3E%3Cpath d='M0 12C6.7 6.7 13.3 4 20 4S33.3 6.7 40 12S53.3 20 60 20S73.3 17.3 80 12' fill='none' stroke='%23121016' stroke-width='3'/%3E%3C/svg%3E"); }
.band--lime { background: var(--lime); }
.band--lime::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 24'%3E%3Cpath d='M0 12C6.7 6.7 13.3 4 20 4S33.3 6.7 40 12S53.3 20 60 20S73.3 17.3 80 12V24H0Z' fill='%237BE36B'/%3E%3Cpath d='M0 12C6.7 6.7 13.3 4 20 4S33.3 6.7 40 12S53.3 20 60 20S73.3 17.3 80 12' fill='none' stroke='%23121016' stroke-width='3'/%3E%3C/svg%3E"); }

/* status sticker (open / closed, Asia/Dubai) */
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 6px 10px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-micro);
  line-height: 1.1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  rotate: 3deg;
}
.status-dot {
  width: 12px; height: 12px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--tangerine);
}
.status.is-open { background: var(--lime); }
.status.is-open .status-dot { background: #fff; animation: blink 1.6s steps(2, jump-none) infinite; }
.status.is-closed { background: var(--paper); }
@keyframes blink { 50% { background: var(--ink); } }

/* collectible stickers — the album game */
.collectible {
  --size: clamp(92px, 9vw, 124px);
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: max-content;
  padding: 0;
  border: 0;
  background: none;
  visibility: hidden;
  cursor: pointer;
  rotate: 7deg;
  -webkit-user-select: none;
  user-select: none;
}
.collectible.is-peeled { visibility: visible; }
.pk {
  position: relative;
  width: var(--size);
  aspect-ratio: 1;
}
.pk-art {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 0 0, 0 0);
}
.collectible.is-peeled .pk-art { clip-path: none; }
.collectible.is-peeling .pk-art { clip-path: var(--clip); }
.pk-art svg { width: 100%; height: 100%; }
.pk-flap-p { fill: #fff; stroke: var(--ink); stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pk-flap-s { fill: var(--ink); translate: 3px 3px; }
.pk-flap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.pk-tag {
  padding: 5px 9px 4px;
  background: var(--ink);
  color: #fff;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .6875rem;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  rotate: -7deg;
}
.collectible.is-peeled:not(.is-collected) .pk { animation: wiggle 4.2s var(--ease-io) 1.2s infinite; }
@keyframes wiggle {
  0%, 82%, 100% { rotate: 0deg; }
  86% { rotate: -7deg; }
  90% { rotate: 6deg; }
  94% { rotate: -3deg; }
}
@media (hover: hover) {
  .collectible.is-peeled:not(.is-collected):hover .pk { animation: none; scale: 1.07; rotate: -4deg; transition: scale var(--t-fast) var(--ease-spring), rotate var(--t-fast) var(--ease-spring); }
}
.collectible.is-collected { cursor: default; }
.collectible.is-collected .pk-art { visibility: hidden; }
.collectible .pk-ghost { display: none; }
.collectible.is-collected .pk-ghost {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 8%;
  border: 3px dashed var(--ink);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  opacity: .55;
  rotate: -10deg;
}

/* ---------- 5. Header & navigation -------------------------------------- */
.site-header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto 0;
  height: var(--header-h);
  transition: background-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.site-header.is-scrolled {
  background: var(--chlorine);
  box-shadow: 0 var(--line) 0 var(--ink);
}
.site-header.menu-open { background: var(--lemon); box-shadow: none; }
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
}
.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px 16px 5px 6px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--pop-sm);
  text-decoration: none;
  rotate: -3deg;
  flex: none;
  transition: rotate var(--t-med) var(--ease-spring);
}
@media (hover: hover) { .logo:hover { rotate: 2deg; } }
.logo-mark { width: 46px; height: 46px; margin: -8px 0 -8px -2px; }
.logo-word {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--berry);
  -webkit-text-stroke: .1em var(--ink);
  paint-order: stroke fill;
  padding-top: 2px;
}
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 4px; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2.5px solid transparent;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
@media (hover: hover) { .nav a:hover { background: var(--paper); border-color: var(--ink); } }
.nav a[aria-current="true"] { background: var(--lemon); border-color: var(--ink); }
.header-status { flex: none; }
.header-cta { flex: none; }
.menu-btn {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px 0 12px;
  margin-left: auto;
  background: var(--lemon);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: var(--pop-sm);
  font-weight: 800;
  font-size: 1rem;
  transition: translate var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.menu-btn:active { translate: 3px 3px; box-shadow: var(--pressed); }
.menu-icon { width: 22px; height: 22px; }
.menu-icon path { transition: d var(--t-med) var(--ease-out), opacity var(--t-fast); }
.menu-btn[aria-expanded="true"] { background: var(--paper); }
.menu-icon .mi-x { display: none; }
.menu-btn[aria-expanded="true"] .mi-lines { display: none; }
.menu-btn[aria-expanded="true"] .mi-x { display: inline; }
.menu-stickers { display: flex; justify-content: flex-end; align-items: flex-end; gap: 4px; margin-top: 34px; }
.menu-stickers svg { width: 96px; height: 96px; overflow: visible; filter: drop-shadow(4px 4px 0 var(--ink)); }
.menu-stickers svg:nth-child(1) { rotate: -12deg; }
.menu-stickers svg:nth-child(2) { width: 112px; height: 112px; rotate: 8deg; margin-bottom: 22px; }
.menu-stickers svg:nth-child(3) { width: 84px; height: 84px; rotate: -6deg; }

.menu {
  position: fixed;
  z-index: 45;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--lemon);
  padding: calc(var(--header-h) + 20px) 0 40px;
  clip-path: circle(0% at calc(100% - 60px) 34px);
  transition: clip-path var(--t-slow) var(--ease-io);
}
.menu.is-open { clip-path: circle(150% at calc(100% - 60px) 34px); }
.menu[hidden] { display: none; }
.menu-links { display: grid; gap: 6px; counter-reset: m; }
.menu-links a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 15vw, 5.5rem);
  line-height: 1;
  text-decoration: none;
  letter-spacing: -.01em;
}
.menu-links li:nth-child(odd) a { rotate: -2deg; }
.menu-links li:nth-child(even) a { rotate: 1.5deg; padding-left: 8vw; }
.menu-links .dot {
  flex: none;
  width: .42em; height: .42em;
  border-radius: 50%;
  border: var(--line) solid var(--ink);
  background: var(--c);
  box-shadow: var(--pop-sm);
}
.menu-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: var(--line) dashed var(--ink);
}

/* ---------- 6. Hero ------------------------------------------------------ */
.hero {
  --tw: clamp(300px, 25vw, 340px);
  --edge: max(var(--gutter), (100% - var(--maxw)) / 2);
  position: relative;
  min-height: clamp(700px, 100svh, 960px);
  padding-top: calc(var(--header-h) + clamp(16px, 2vw, 28px));
  padding-bottom: 150px;
  overflow: clip;
  background-color: var(--chlorine);
  background-image:
    linear-gradient(var(--chlorine-2) 2px, transparent 2px),
    linear-gradient(90deg, var(--chlorine-2) 2px, transparent 2px);
  background-size: 56px 56px;
  background-position: -2px -2px;
}
.hero-inner { position: relative; }
.hero-kicker, .hero-title { position: relative; z-index: 2; }
.hero-kicker { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(16px, 1.8vw, 24px); }
.hero-kicker .eyebrow { margin: 0; }
.hero-kicker .eyebrow:nth-child(2) { rotate: 2deg; background: var(--lemon); }

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .07em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.tape-lbl, .hero-title .line {
  display: inline-block;
  padding: .13em .2em .02em;
  background: var(--c);
  border: var(--line) solid var(--ink);
  border-radius: .12em;
  box-shadow: var(--pop);
}
.line-1 { --c: var(--berry); rotate: -2deg; }
.line-2 { --c: var(--lemon); rotate: 1.6deg; margin-left: .85em; color: var(--ink); }
.line-3 { --c: var(--pool); rotate: -1.2deg; margin-left: .3em; }
.hero-title .w { display: inline; }

.hero-copy { position: relative; z-index: 10; max-width: 640px; margin-top: clamp(22px, 2.4vw, 30px); }
.hero-sub {
  max-width: 34ch;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}
.hero-ctas {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 18px;
  margin-top: 22px;
}
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 20px;
  font-weight: 700;
  font-size: var(--fs-small);
}
.hero-proof .stars { display: inline-flex; gap: 2px; }
.hero-proof .stars svg { width: 20px; height: 20px; }
.hero-proof .proof-rating { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof .proof-award {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hero-proof .proof-award svg { width: 22px; height: 22px; }

/* today ticket */
.hero-ticket {
  position: absolute;
  z-index: 3;
  right: 0;
  top: calc(var(--fs-hero) * 1.55);
  width: var(--tw);
  rotate: 3.5deg;
}
.ticket {
  --notch-bg: var(--chlorine);
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 22px;
  box-shadow: var(--pop-lg);
}
.ticket-main { padding: 22px 24px 20px; }
.ticket-eyebrow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ticket-day {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.1vw, 1.9rem);
  line-height: 1;
}
.ticket-hours {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.ticket-main .status { margin-top: 14px; rotate: -2deg; }
.ticket-stub {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px 18px;
  background: var(--lemon);
  border-top: var(--line) dashed var(--ink);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.2;
}
.ticket-stub svg { width: 44px; height: 44px; flex: none; margin: -6px 0; }
.ticket-stub::before, .ticket-stub::after {
  content: "";
  position: absolute;
  top: -17px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--notch-bg);
  border: var(--line) solid var(--ink);
}
.ticket-stub::before { left: -18px; }
.ticket-stub::after { right: -18px; }

/* draggable stickers */
.hero-stage {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}
.hs {
  --x: 50%; --y: 50%; --s: 120px; --r: 0deg;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  rotate: var(--r);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: scale var(--t-med) var(--ease-spring);
}
.hs svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(5px 5px 0 var(--ink));
  transition: filter var(--t-fast) var(--ease-out);
  pointer-events: none;
}
.hs.is-held { cursor: grabbing; scale: 1.1; }
.hs.is-held svg { filter: drop-shadow(13px 15px 0 var(--ink)); }
.hs:focus-visible { outline-offset: 2px; border-radius: 50%; }

.hs--berry  { --x: 69%;  --y: 9%;   --s: clamp(120px, 11.5vw, 168px); --r: 9deg; }
.hs--sun    { --x: 87%;  --y: 12%;  --s: clamp(96px, 8.6vw, 124px);  --r: -8deg; }
.hs--star   { --x: 91%;  --y: 58%;  --s: clamp(64px, 5.4vw, 80px);   --r: 14deg; }
.hs--ring   { --x: calc(100% - var(--edge) - var(--tw) - 230px); --y: 50%;  --s: clamp(96px, 8.4vw, 122px);  --r: -12deg; }
.hs--duck   { --x: calc(var(--edge) + 568px); --y: 67%;  --s: clamp(96px, 8.6vw, 124px);  --r: 6deg; }
.hs--60     { --x: calc(100% - var(--edge) - var(--tw) - 88px); --y: calc(var(--header-h) + var(--fs-hero) * 1.5); --s: clamp(96px, 8vw, 116px); --r: -10deg; }
.hs--bucket { --x: 87%;  --y: 72%;  --s: clamp(104px, 9vw, 130px);  --r: 8deg; }
.hs--slide  { --x: calc(100% - var(--edge) - var(--tw) + 10px); --y: 72%;  --s: clamp(96px, 8.4vw, 122px);  --r: -6deg; }
.hs--splash { --x: calc(var(--edge) + var(--fs-hero) * 5.55); --y: calc(var(--header-h) + 6px); --s: clamp(76px, 6.2vw, 92px); --r: -10deg; }

.drag-hint {
  position: absolute;
  z-index: 6;
  left: calc(69% - 150px);
  top: calc(9% + 26px);
  display: flex;
  align-items: flex-start;
  gap: 2px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
  rotate: -7deg;
  pointer-events: none;
  transition: opacity var(--t-slow) var(--ease-out), translate var(--t-slow) var(--ease-out);
}
.drag-hint svg { width: 58px; height: 44px; margin-top: -26px; }
.drag-hint.is-gone { opacity: 0; translate: 0 10px; }

/* hazard tape marquee */
.tape {
  --tape-rot: -3deg;
  position: relative;
  z-index: 7;
  width: 112%;
  margin-left: -6%;
  rotate: var(--tape-rot);
  background: var(--lemon);
  border-block: var(--line) solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
}
.tape::before, .tape::after {
  content: "";
  display: block;
  height: 12px;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 10px, var(--lemon) 10px 20px);
}
.tape::before { border-bottom: var(--line) solid var(--ink); }
.tape::after { border-top: var(--line) solid var(--ink); }
.hero .tape { position: absolute; left: 0; bottom: 42px; }
.tape-viewport { overflow: hidden; }
.tape-track {
  display: flex;
  width: max-content;
  animation: tape 46s linear infinite;
}
.tape-group { display: flex; align-items: center; flex: none; }
.tape-item {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 12px 11px 9px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.8rem);
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.tape-item svg { width: .9em; height: .9em; flex: none; }
@keyframes tape { to { translate: -50% 0; } }
.tape:hover .tape-track, .tape.is-paused .tape-track, .tape.is-offscreen .tape-track { animation-play-state: paused; }
.tape-toggle {
  position: absolute;
  z-index: 2;
  right: calc(6% / 1.12 + var(--gutter));
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--pop-sm);
}
.tape-toggle svg { width: 18px; height: 18px; }
.tape-toggle .i-play { display: none; }
.tape.is-paused .tape-toggle .i-play { display: block; }
.tape.is-paused .tape-toggle .i-pause { display: none; }
.tape--mid { --tape-rot: 2deg; }

/* ---------- 7. Rides ----------------------------------------------------- */
.sec--rides { padding-top: clamp(64px, 7vw, 104px); }
.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(40px, 4.6vw, 60px);
}
.filter-label {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  margin-right: 6px;
}
.chip {
  min-height: 48px;
  min-width: 64px;
  padding: 0 20px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: var(--pop-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .04em;
  transition: translate var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast);
}
@media (hover: hover) { .chip:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ink); } }
.chip:active { translate: 3px 3px; box-shadow: var(--pressed); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; translate: 2px 2px; box-shadow: var(--pressed); }
.filter-count {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .04em;
  min-height: 1.4em;
}

.rides-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 2.6vw, 36px);
}
.ride { position: relative; min-width: 0; }
.ride-card {
  --peel: 0px;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(22px, 2.2vw, 30px);
  padding-top: 64px;
  background: var(--ride);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--pop);
  transition: translate var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), filter var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out);
}
/* peel corner: removed triangle + curled flap */
.ride-card::before, .ride-card::after {
  content: "";
  position: absolute;
  top: calc(var(--line) * -1);
  right: calc(var(--line) * -1);
  width: var(--peel);
  height: var(--peel);
  pointer-events: none;
  z-index: 4;
  transition: width var(--t-med) var(--ease-spring), height var(--t-med) var(--ease-spring);
}
.ride-card::before {
  right: calc(var(--line) * -1 - 7px);
  width: calc(var(--peel) + 7px);
  height: calc(var(--peel) + 7px);
  background: var(--peel-bg, var(--chlorine));
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.ride-card::after {
  background: linear-gradient(to top right, #fff calc(50% - 2px), var(--ink) calc(50% - 2px), var(--ink) calc(50% + 1px), transparent calc(50% + 1px));
  border-left: var(--line) solid var(--ink);
  border-bottom: var(--line) solid var(--ink);
  border-bottom-left-radius: 16px;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  box-sizing: border-box;
}
.ride-card::after { border-width: 0; }
@media (hover: hover) {
  .ride:hover .ride-card { --peel: 58px; translate: -3px -3px; box-shadow: 9px 9px 0 var(--ink); }
  .ride:hover .ride-card::after { border-left-width: var(--line); border-bottom-width: var(--line); }
}

.ride-art { flex: 1 1 auto; display: grid; place-items: center; min-height: 0; }
.ride-art svg { width: 100%; height: auto; max-height: 100%; overflow: visible; }
.ride-art svg.clip { overflow: hidden; }
.ride-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.2vw, 2.05rem);
  line-height: 1;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.ride-desc { margin-top: 10px; max-width: 46ch; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.ride-tags {
  position: absolute;
  z-index: 3;
  top: -20px;
  left: -14px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.tag-age {
  display: grid;
  place-content: center;
  width: 78px; height: 78px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--pop-sm);
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: .95;
  rotate: -9deg;
}
.tag-age small, .tag-depth small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.tag-depth {
  margin-top: 16px;
  padding: 8px 12px 6px;
  background: var(--ink);
  color: #fff;
  border: var(--line) solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--pop-sm);
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1;
  rotate: 6deg;
  white-space: nowrap;
}
.tag-depth small { color: var(--lemon); }
.ride-note {
  display: none;
  align-self: flex-start;
  padding: 6px 10px 5px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  rotate: -2deg;
}
.ride.has-note .ride-note { display: inline-block; }

/* rubber stamp for ages that don't fit */
.stamp {
  position: absolute;
  z-index: 5;
  left: 50%; top: 42%;
  translate: -50% -50%;
  padding: .12em .42em .04em;
  border: 6px double var(--ink);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, .0);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.6vw, 3.3rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  rotate: -14deg;
  scale: 1.35;
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 20% 30%, transparent 0 1px, #000 1.6px), radial-gradient(circle at 70% 60%, transparent 0 .8px, #000 1.3px);
  -webkit-mask-size: 23px 17px, 13px 29px;
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle at 20% 30%, transparent 0 1px, #000 1.6px), radial-gradient(circle at 70% 60%, transparent 0 .8px, #000 1.3px);
  mask-size: 23px 17px, 13px 29px;
  mask-composite: intersect;
  transition: scale var(--t-slow) var(--ease-spring), opacity var(--t-fast) var(--ease-out);
}
.ride.is-out .stamp { opacity: 1; scale: 1; }
.ride.is-out .ride-card, .ride.is-out .ride-tags { filter: grayscale(1); opacity: .42; }
.ride.is-out:hover .ride-card { --peel: 0px; translate: none; box-shadow: var(--pop); }
.ride.is-out .ride-card::after, .ride.is-out:hover .ride-card::after { border-width: 0; }

/* grid placement */
.ride--tower   { --ride: var(--berry); }
.ride--lagoon  { --ride: var(--tangerine); }
.ride--slides  { --ride: var(--grape); }
.ride--river   { --ride: var(--lemon); }
.ride--spray   { --ride: var(--paper); }
.ride--bay     { --ride: var(--pool); }
.ride--drizzle { --ride: var(--lime); }
.ride--spray .ride-card {
  background:
    linear-gradient(var(--berry) 0 12px, var(--tangerine) 12px 24px, var(--lemon) 24px 36px, var(--lime) 36px 48px, var(--pool) 48px 60px, var(--grape) 60px 72px, var(--ink) 72px 75px, #fff 75px) border-box;
  background-clip: padding-box;
  padding-top: 100px;
}

@media (min-width: 1024px) {
  .rides-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(310px, auto); }
  .ride--tower   { grid-column: 1 / span 6; grid-row: span 2; }
  .ride--lagoon  { grid-column: 7 / span 3; }
  .ride--slides  { grid-column: 10 / span 3; }
  .ride--river   { grid-column: 7 / span 6; }
  .ride--spray   { grid-column: 1 / span 5; }
  .ride--bay     { grid-column: 6 / span 4; }
  .ride--drizzle { grid-column: 10 / span 3; }
  .ride--river .ride-card { flex-direction: row; align-items: flex-end; }
  .ride--river .ride-art { flex: 1 1 58%; align-self: stretch; }
  .ride--river .ride-body { flex: 1 1 42%; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .rides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ride--tower, .ride--river, .ride--drizzle { grid-column: 1 / -1; }
}

.ride--tower .ride-card { padding-top: 40px; }
.ride--tower .ride-art { max-width: 520px; margin-inline: auto; width: 100%; }
.tower-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 16px;
}
.tower-count {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 7px;
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.tower-count b { color: var(--lemon); font-size: 1.05rem; }
.tower-count svg { width: 20px; height: 20px; transform-origin: 50% 10%; }
.ride--tower.is-ringing .tower-count svg { animation: ring .5s var(--ease-io) infinite; }
.ride--tower.is-ringing .tower-count { background: var(--lemon); color: var(--ink); }
.ride--tower.is-ringing .tower-count b { color: var(--ink); }
@keyframes ring { 0%, 100% { rotate: 0deg; } 25% { rotate: 16deg; } 75% { rotate: -16deg; } }
.tower-micro { font-weight: 700; font-size: .9375rem; }

/* tower animation parts */
.tw-bucket { transform-box: view-box; transform-origin: 130px 48px; transition: rotate .9s var(--ease-spring); }
.tw-pour { transform-box: view-box; transform-origin: 70px 40px; scale: 1 0; opacity: 0; }
.tw-sploosh { transform-box: fill-box; transform-origin: center; scale: 0; }
.ride--tower.is-tipping .tw-bucket { rotate: -118deg; transition: rotate .7s cubic-bezier(.5, 0, .3, 1.3); }
.ride--tower.is-tipping .tw-pour { animation: pour 2s var(--ease-out) .35s both; }
.ride--tower.is-tipping .tw-sploosh { animation: sploosh 1.6s var(--ease-spring) .6s both; }
@keyframes pour { 0% { scale: 1 0; opacity: 1; } 25% { scale: 1 1; opacity: 1; } 80% { scale: 1 1; opacity: 1; } 100% { scale: 1 1; opacity: 0; } }
@keyframes sploosh { 0% { scale: 0; } 30% { scale: 1.1; } 45%, 85% { scale: 1; } 100% { scale: 0; } }

/* ---------- 8. Safety ----------------------------------------------------- */
.sec--safety { padding-top: calc(var(--sec-pad) + 10px); }
.sec--safety .eyebrow { background: var(--lemon); }
.safety-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 3.4vw, 48px);
  align-items: start;
}
.notebook {
  --lh: 2rem;
  --pad-top: 44px;
  position: relative;
  padding: var(--pad-top) clamp(20px, 3vw, 40px) 40px clamp(78px, 8vw, 104px);
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, transparent calc(clamp(78px, 8vw, 104px) - 22px), var(--berry) calc(clamp(78px, 8vw, 104px) - 22px), var(--berry) calc(clamp(78px, 8vw, 104px) - 19px), transparent calc(clamp(78px, 8vw, 104px) - 19px), transparent calc(clamp(78px, 8vw, 104px) - 15px), var(--berry) calc(clamp(78px, 8vw, 104px) - 15px), var(--berry) calc(clamp(78px, 8vw, 104px) - 13px), transparent calc(clamp(78px, 8vw, 104px) - 13px)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 2px), var(--rule) calc(var(--lh) - 2px) var(--lh));
  background-position: 0 0, 0 calc(var(--pad-top) + 1px);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--pop-lg);
  line-height: var(--lh);
}
.nb-holes {
  position: absolute;
  left: clamp(18px, 2vw, 28px);
  top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-block: 48px;
}
.nb-holes span {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--pool);
  border: var(--line) solid var(--ink);
  box-shadow: inset 3px 3px 0 rgba(18, 16, 22, .25);
}
.nb-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: var(--lh);
  margin-bottom: var(--lh);
}
.checklist { display: grid; gap: 0; }
.checklist li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  padding-bottom: calc(var(--lh) / 2);
}
.checklist li:not(:last-child) { margin-bottom: calc(var(--lh) / 2); }
.check { width: 40px; height: 40px; margin-top: -4px; overflow: visible; }
.check .box { fill: none; stroke: var(--ink); stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; }
.check .tick { fill: none; stroke: var(--berry); stroke-width: 5px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .checklist li:not(.is-in) .tick { stroke-dashoffset: 1; }
.checklist li.is-in .tick { transition: stroke-dashoffset .55s var(--ease-out) .15s; }
.checklist strong { display: block; font-weight: 800; font-size: 1.125rem; line-height: var(--lh); }
.checklist span { display: block; color: var(--ink-2); font-size: 1rem; line-height: var(--lh); }
.nb-sign {
  margin-top: var(--lh);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: var(--lh);
  rotate: -2deg;
  transform-origin: left center;
}

.ruler-card {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  padding: clamp(22px, 2.6vw, 32px);
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--pop-lg);
}
.ruler-card .h3 { font-size: clamp(1.6rem, 2.3vw, 2.1rem); }
.ruler-card > p { margin-top: 10px; font-size: 1rem; color: var(--ink-2); }
.depth-toggle { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.depth-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: 3px 3px 0 var(--ink);
  font-weight: 700;
  font-size: .875rem;
  transition: translate var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.depth-btn i {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--c);
}
.depth-btn b { font-family: var(--font-mono); font-weight: 700; }
.depth-btn[aria-pressed="true"] { background: var(--c); translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.ruler-svg { width: 100%; height: auto; margin-top: 18px; overflow: hidden; border-radius: 16px; }
.ruler-svg .water { transition: translate .7s var(--ease-spring); }
.ruler-svg .tick-lbl { font-family: var(--font-mono); font-weight: 700; font-size: 11px; }
.ruler-svg .kid-lbl { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .04em; }
.ruler-svg .lvl-lbl { font-family: var(--font-display); font-size: 17px; }
.ruler-caption { margin-top: 14px; font-weight: 700; font-size: 1rem; line-height: 1.45; min-height: 2.9em; }

/* ---------- 9. Tickets ---------------------------------------------------- */
.sec--tickets { padding-top: calc(var(--sec-pad) + 40px); }
.awning {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 74px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 64'%3E%3Cpath d='M0 0H36V44A18 18 0 0 1 0 44Z' fill='%23FF3D7F' stroke='%23121016' stroke-width='3'/%3E%3Cpath d='M36 0H72V44A18 18 0 0 1 36 44Z' fill='%23FFFFFF' stroke='%23121016' stroke-width='3'/%3E%3C/svg%3E") repeat-x 0 -1px / 72px 64px;
  border-top: 10px solid var(--ink);
  pointer-events: none;
}
.stubs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.stub-card {
  --notch-bg: var(--chlorine);
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  background: var(--c);
  border: var(--line) solid var(--ink);
  border-radius: 22px;
  box-shadow: var(--pop);
  rotate: var(--rot, 0deg);
}
.stub-card:nth-child(1) { --c: var(--lime); --rot: -1.5deg; }
.stub-card:nth-child(2) { --c: var(--pool); --rot: 1deg; }
.stub-card:nth-child(3) { --c: var(--tangerine); --rot: -1deg; }
.stub-card:nth-child(4) { --c: var(--lemon); --rot: 1.8deg; overflow: visible; }
.stub-main { padding: 22px 22px 18px; }
.stub-who {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.stub-name { margin-top: 8px; font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1; }
.stub-note { margin-top: 10px; font-size: .9375rem; line-height: 1.4; }
.stub-price {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 22px 16px;
  background: var(--paper);
  border-top: var(--line) dashed var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
}
.stub-price b { font-size: 1.9rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stub-price small { font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; }
.stub-price::before, .stub-price::after {
  content: "";
  position: absolute;
  top: -17px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--notch-bg);
  border: var(--line) solid var(--ink);
}
.stub-price::before { left: -18px; }
.stub-price::after { right: -18px; }
.stub-card:nth-child(4) .stub-price { border-radius: 0 0 19px 19px; overflow: hidden; }
.stub-card:nth-child(4) { overflow: visible; }
.stub-card:nth-child(4) .stub-main { border-radius: 19px 19px 0 0; }
.best-burst {
  position: absolute;
  z-index: 3;
  top: -34px;
  right: -22px;
  width: 104px; height: 104px;
  rotate: 12deg;
}
.best-burst svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(4px 4px 0 var(--ink)); }
.stubs-note { margin-top: 26px; font-weight: 700; font-size: 1rem; }
.stubs-note svg { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; }

/* booth: builder + receipt */
.booth {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 52px);
  margin-top: clamp(48px, 5vw, 72px);
  padding: clamp(22px, 3vw, 44px);
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--pop-lg);
}
.booth-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.booth-head p { font-size: 1rem; color: var(--ink-2); max-width: 52ch; }
.step + .step { margin-top: 30px; }
.step-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1;
}
.step-no {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  background: var(--lemon);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
}
.dates {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.date-chip { position: relative; display: block; cursor: pointer; }
.date-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.date-face {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 10px 4px 9px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--ink);
  text-align: center;
  transition: translate var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast);
}
.date-chip.is-weekend .date-face { background: #FFF6C2; }
.date-face .d-wd { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; }
.date-face .d-num { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; }
.date-face .d-hrs { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .02em; white-space: nowrap; }
.date-face .d-tag {
  position: absolute;
  top: -10px; right: -6px;
  padding: 2px 6px 1px;
  background: var(--ink);
  color: #fff;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  rotate: 8deg;
}
@media (hover: hover) { .date-chip:hover .date-face { translate: -2px -2px; box-shadow: 5px 5px 0 var(--ink); } }
.date-chip input:checked + .date-face { background: var(--berry); translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.date-chip input:focus-visible + .date-face { outline: 3px dashed var(--ink); outline-offset: 4px; }
.dates-legend { margin-top: 12px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .04em; }
.dates-legend i { display: inline-block; width: 12px; height: 12px; margin: 0 6px -1px 0; border: 2px solid var(--ink); border-radius: 3px; background: #FFF6C2; }

.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 2.5px dashed rgba(18, 16, 22, .25);
}
.stepper:last-of-type { border-bottom: 0; }
.stepper-name { display: block; font-weight: 800; font-size: 1.125rem; line-height: 1.2; }
.stepper-meta { display: block; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--ink-2); letter-spacing: .02em; }
.stepper-ctrl { display: flex; align-items: center; gap: 8px; flex: none; }
.step-btn {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  padding: 0;
  background: var(--lemon);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: translate var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.step-btn svg { width: 18px; height: 18px; }
.step-btn:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.step-btn.is-off { background: #F1EFF3; opacity: .5; cursor: not-allowed; box-shadow: 1px 1px 0 var(--ink); translate: 2px 2px; }
.step-val {
  width: 56px;
  height: 46px;
  padding: 0;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.25rem;
  -moz-appearance: textfield;
  appearance: textfield;
}
.step-val::-webkit-outer-spin-button, .step-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-val:focus-visible { background: var(--lemon); outline-offset: 2px; }
.booth-warn {
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  background: #FFE3EC;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.4;
}
.booth-warn.is-on { display: flex; }
.booth-warn svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }

.promo-row { display: flex; gap: 10px; }
.field-input, .promo-input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-btn);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 1rem;
  transition: background-color var(--t-fast) var(--ease-out);
}
.promo-input { font-family: var(--font-mono); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.promo-input::placeholder { text-transform: none; letter-spacing: .02em; font-weight: 400; }
.field-input:focus, .promo-input:focus { background: var(--lemon); outline: none; }
.field-input:focus-visible, .promo-input:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }
.promo-row .btn { flex: none; min-height: 52px; border-radius: var(--r-btn); box-shadow: 3px 3px 0 var(--ink); }
.promo-msg { margin-top: 10px; min-height: 1.5em; font-weight: 700; font-size: .9375rem; }
.promo-msg.is-good { color: var(--ink); }
.promo-msg.is-good::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid var(--ink); border-radius: 50%; background: var(--lime); vertical-align: -1px; }
.promo-msg.is-bad::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid var(--ink); border-radius: 50%; background: var(--tangerine); vertical-align: -1px; }

.receipt-col { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.slot {
  position: relative;
  z-index: 2;
  height: 22px;
  margin-inline: -10px;
  background: var(--ink);
  border-radius: 12px;
}
.slot::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; top: 8px;
  height: 6px;
  border-radius: 6px;
  background: #3b3743;
}
.receipt-wrap { position: relative; margin-top: -14px; overflow: hidden; padding: 0 12px 14px 4px; }
.receipt {
  position: relative;
  padding: 28px 22px 22px;
  background: #fff;
  border: var(--line) solid var(--ink);
  border-top: 0;
  border-bottom: 0;
  box-shadow: 7px 0 0 var(--ink);
  font-family: var(--font-mono);
  font-size: .875rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.receipt::after {
  content: "";
  position: absolute;
  left: calc(var(--line) * -1);
  right: calc(var(--line) * -1);
  bottom: -12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 0L8 9L16 0Z' fill='%23fff'/%3E%3Cpath d='M0 0L8 9L16 0' fill='none' stroke='%23121016' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 0 / 16px 12px;
}
.rc-head { text-align: center; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rc-head b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: 0; text-transform: none; line-height: 1.1; }
.rc-rule { margin: 12px 0; border: 0; border-top: 2px dashed var(--ink); }
.rc-row { display: flex; justify-content: space-between; gap: 12px; }
.rc-row span:first-child { min-width: 0; }
.rc-row span:last-child { flex: none; font-weight: 700; }
.rc-row.is-save { color: var(--ink); }
.rc-row.is-save span:first-child::before { content: "★ "; }
.rc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 4px; }
.rc-total span { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rc-total b { font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; line-height: 1; letter-spacing: -.01em; }
.rc-empty { text-align: center; padding: 8px 0; }
.rc-foot { margin-top: 12px; font-size: .75rem; text-align: center; letter-spacing: .04em; }

/* printed ticket (booking success) */
.printed {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 18px;
  padding: 24px 22px 22px;
  background: var(--lemon);
  border: var(--line) solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--pop);
  animation: print 1.1s cubic-bezier(.3, .7, .2, 1) both;
}
.printed:focus { outline: none; }
.printed:focus-visible { outline: 3px dashed var(--ink); outline-offset: 5px; }
@keyframes print { from { translate: 0 -70%; clip-path: inset(70% 0 0 0); } to { translate: 0 0; clip-path: inset(-20px -20px -20px -20px); } }
.pt-title { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; }
.pt-big { font-family: var(--font-display); font-size: 2rem; line-height: 1; }
.pt-lines { font-family: var(--font-mono); font-size: .875rem; line-height: 1.55; }
.pt-lines b { font-weight: 700; }
.pt-qr { width: 118px; height: 118px; padding: 6px; background: #fff; border: 2.5px solid var(--ink); border-radius: 10px; }
.pt-qr svg { width: 100%; height: 100%; shape-rendering: crispEdges; }
.pt-foot { grid-column: 1 / -1; padding-top: 14px; border-top: 2.5px dashed var(--ink); font-size: .9375rem; font-weight: 700; line-height: 1.4; }
.pt-again { margin-top: 12px; }

/* Berry Club */
.club {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
  margin-top: clamp(80px, 9vw, 128px);
}
.club-visual { position: relative; padding: 28px 22px 34px; }
.club-card {
  position: relative;
  aspect-ratio: 1.586;
  padding: 10px;
  background: #fff;
  border: var(--line) solid var(--ink);
  border-radius: 34px;
  box-shadow: var(--pop-lg);
  rotate: -4deg;
}
.club-card-inner {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(16px, 2.2vw, 26px);
  overflow: hidden;
  background: var(--berry);
  border: var(--line) solid var(--ink);
  border-radius: 24px;
}
.cc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cc-brand { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: .9; }
.cc-year { padding: 5px 8px 4px; background: var(--ink); color: #fff; border-radius: 6px; font-family: var(--font-mono); font-weight: 700; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.cc-name { align-self: end; font-family: var(--font-mono); font-weight: 700; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.cc-name b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.45rem); letter-spacing: 0; text-transform: none; }
.cc-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 10px; }
.cc-barcode { width: 44%; height: 34px; padding: 4px 6px; background: #fff; border: 2.5px solid var(--ink); border-radius: 6px; }
.cc-chip { width: 46px; height: 34px; background: var(--lemon); border: 2.5px solid var(--ink); border-radius: 8px; }
.cc-stk { position: absolute; z-index: 2; overflow: visible; filter: drop-shadow(4px 4px 0 var(--ink)); }
.cc-stk--berry { width: 25%; top: 28%; right: 22%; rotate: 14deg; }
.cc-stk--star { width: 15%; bottom: 0%; left: -3%; rotate: -16deg; }
.cc-stk--early { width: 30%; right: -2%; bottom: -4%; rotate: -10deg; }
.cc-stk--off { width: 24%; left: 30%; top: -9%; rotate: -8deg; }
.cc-stk text { font-family: var(--font-display); }

.club-copy .h3 { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: .95; }
.club-copy > p:not(.eyebrow) { margin-top: 14px; max-width: 46ch; font-size: var(--fs-lead); line-height: 1.5; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.plan {
  position: relative;
  padding: 18px 18px 16px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--pop-sm);
}
.plan--family { background: var(--lemon); }
.plan-name { font-weight: 800; font-size: 1.0625rem; }
.plan-price { margin-top: 6px; font-family: var(--font-mono); font-weight: 700; font-size: 1.55rem; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-price small { font-size: .8125rem; letter-spacing: 0; }
.plan-alt { margin-top: 4px; font-family: var(--font-mono); font-size: .8125rem; font-weight: 700; }
.plan-who { margin-top: 8px; font-size: .9375rem; line-height: 1.4; }
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-top: 24px; }
.perks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.perks svg { width: 22px; height: 22px; flex: none; margin-top: 0; }
.club-copy .btn { margin-top: 28px; }

/* ---------- 10. Parties --------------------------------------------------- */
.sec--parties { padding-bottom: calc(var(--sec-pad) + 30px); }
.sec--parties .eyebrow { background: var(--lemon); }
.bubbles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(56px, 5vw, 72px) clamp(28px, 3vw, 44px);
}
.bubble {
  position: relative;
  padding: clamp(24px, 3vw, 40px);
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 40px;
  box-shadow: var(--pop-lg);
}
.bubble { rotate: var(--rot, 0deg); }
.bubble--bday { grid-column: 1 / -1; --rot: -.6deg; }
.bubble--school { --rot: 1deg; }
.bubble--events { --rot: -1deg; background: var(--lemon); }
.bubble-tail { position: absolute; width: 64px; height: 50px; overflow: visible; pointer-events: none; }
.bubble--bday .bubble-tail { left: 18%; bottom: -44px; }
.bubble--school .bubble-tail { right: 22%; bottom: -44px; scale: -1 1; }
.bubble--events .bubble-tail { left: 24%; bottom: -44px; }
.bubble-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bubble .h3 { font-size: clamp(1.9rem, 3vw, 2.7rem); }
.bubble-kicker { margin-top: 12px; max-width: 60ch; font-size: 1.0625rem; line-height: 1.5; }
.bubble-char { width: clamp(84px, 9vw, 120px); flex: none; margin: -54px -12px 0 0; rotate: 8deg; }
.bubble-char svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(4px 4px 0 var(--ink)); }
.pkgs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}
.pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 18px;
  background: var(--c);
  border: var(--line) solid var(--ink);
  border-radius: 22px;
  box-shadow: var(--pop-sm);
}
.pkg:nth-child(1) { --c: var(--chlorine); }
.pkg:nth-child(2) { --c: var(--lemon); }
.pkg:nth-child(3) { --c: var(--berry); }
.pkg-name { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; line-height: 1; }
.pkg-price { margin-top: 8px; font-family: var(--font-mono); font-weight: 700; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.pkg-kids { display: inline-block; margin-top: 8px; padding: 4px 9px 3px; background: var(--ink); color: #fff; border-radius: 7px; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; align-self: flex-start; }
.pkg ul { display: grid; gap: 6px; margin-top: 14px; }
.pkg li { display: flex; gap: 8px; font-size: .9375rem; line-height: 1.35; font-weight: 500; }
.pkg li svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.pkg-flag {
  position: absolute;
  top: -14px; right: 14px;
  padding: 4px 9px 3px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  rotate: 6deg;
}
.bday-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.bday-foot p { font-weight: 700; font-size: 1rem; max-width: 60ch; }
.facts { display: grid; gap: 12px; margin-top: 20px; }
.facts li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; font-size: 1rem; line-height: 1.45; }
.facts b { display: inline-block; min-width: 92px; padding: 4px 9px 3px; background: var(--ink); color: #fff; border-radius: 8px; font-family: var(--font-mono); font-weight: 700; font-size: .8125rem; letter-spacing: .04em; text-align: center; white-space: nowrap; }
.bubble .btn { margin-top: 24px; }

/* enquiry form */
.enquire {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(80px, 8vw, 112px);
  padding: clamp(24px, 3.4vw, 48px);
  background: var(--chlorine);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--pop-lg);
}
.enquire-intro .h3 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: .95; }
.enquire-intro p { margin-top: 14px; font-size: 1.0625rem; line-height: 1.5; }
.enquire-alt { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 18px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label, .field .label { font-weight: 800; font-size: .9375rem; }
.field label small { font-weight: 500; color: var(--ink-2); }
select.field-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23121016' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
}
textarea.field-input { min-height: 112px; resize: vertical; line-height: 1.5; }
.field-input[aria-invalid="true"] { background-color: #FFE3EC; }
.field-input[aria-invalid="true"]:focus { background-color: var(--lemon); }
.field-err { display: none; font-weight: 700; font-size: .875rem; line-height: 1.35; }
.field-err.is-on { display: flex; gap: 6px; align-items: flex-start; }
.field-err.is-on::before { content: "!"; display: grid; place-items: center; width: 18px; height: 18px; flex: none; margin-top: 1px; background: var(--berry); border: 2px solid var(--ink); border-radius: 50%; font-size: .7rem; font-weight: 800; line-height: 1; }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 6px; }
.form-actions p { font-size: .875rem; color: var(--ink-2); max-width: 36ch; }
.enquire-done {
  position: relative;
  padding: 32px 28px 28px;
  background: #fff;
  border: var(--line) solid var(--ink);
  border-radius: 32px;
  box-shadow: var(--pop);
  animation: slap .5s var(--ease-spring) both;
}
.enquire-done .h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.enquire-done p { margin-top: 12px; font-size: 1.0625rem; line-height: 1.5; max-width: 50ch; }
.done-stamp {
  position: absolute;
  top: -22px; right: 18px;
  padding: 4px 12px 0;
  border: 5px double var(--ink);
  border-radius: 10px;
  background: var(--lime);
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  rotate: 9deg;
}
@keyframes slap { from { scale: 1.25; rotate: -4deg; opacity: 0; } to { scale: 1; rotate: 0deg; opacity: 1; } }

/* ---------- 11. Comforts sticker sheet ------------------------------------ */
.sheet {
  position: relative;
  padding: clamp(18px, 2.6vw, 36px);
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(18, 16, 22, .06) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(18, 16, 22, .06) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  border: var(--line) solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--pop-lg);
}
.sheet-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 18px;
  margin: calc(clamp(18px, 2.6vw, 36px) * -1) calc(clamp(18px, 2.6vw, 36px) * -1) clamp(20px, 2.6vw, 34px);
  padding: 12px clamp(18px, 2.6vw, 36px) 11px;
  background: var(--ink);
  color: #fff;
  border-radius: calc(var(--r-card) - 4px) calc(var(--r-card) - 4px) 0 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sheet-head span:nth-child(2) { color: var(--lemon); }
.sheet-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px) clamp(12px, 1.6vw, 22px);
}
.cf { position: relative; min-width: 0; }
.cf-btn {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 4px 6px;
  background: none;
  border: 0;
  border-radius: 20px;
  text-align: center;
}
.cf-card {
  position: relative;
  display: block;
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transition: rotate .55s var(--ease-spring);
  rotate: y 0deg;
}
.cf-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cf-front { rotate: var(--r, 0deg); }
.cf-front svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(4px 4px 0 var(--ink)); transition: scale var(--t-fast) var(--ease-spring); }
.cf-back {
  rotate: y 180deg;
  background: #fff;
  border: var(--line) solid var(--ink);
  border-radius: 22px;
  box-shadow: 4px 4px 0 var(--ink);
  background-image: repeating-linear-gradient(-45deg, transparent 0 9px, rgba(18, 16, 22, .05) 9px 10px);
}
.cf.is-open .cf-card { rotate: y 180deg; }
@media (hover: hover) { .cf-btn:hover .cf-front svg { scale: 1.06; } }
.cf-name {
  display: block;
  font-weight: 800;
  font-size: .9375rem;
  line-height: 1.25;
  text-wrap: balance;
}
.cf-hint { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cf-info {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 50%;
  translate: -50% 0;
  width: min(100% - 8px, 150px);
  aspect-ratio: 1;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 12px;
  text-align: center;
  font-size: .8125rem;
  line-height: 1.32;
  font-weight: 600;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out), visibility 0s linear var(--t-fast);
}
.cf-info b { font-family: var(--font-mono); font-weight: 700; font-size: .75rem; letter-spacing: .02em; }
.cf-info b.blk { display: block; margin-top: 4px; font-size: .8125rem; }
.cf.is-open .cf-info { visibility: visible; opacity: 1; transition: opacity var(--t-med) var(--ease-out) .22s, visibility 0s linear 0s; }
.cf--wide .cf-card, .cf--wide .cf-info { max-width: 150px; }

.sheet-foot { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: clamp(24px, 3vw, 36px); padding-top: 20px; border-top: 2.5px dashed rgba(18, 16, 22, .3); font-size: .9375rem; font-weight: 600; }
.sheet-foot b { font-family: var(--font-mono); font-weight: 700; }

/* ---------- 12. Fan mail --------------------------------------------------- */
.sec--reviews { padding-top: calc(var(--sec-pad) + 20px); }
.mail-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.burst-wrap { position: sticky; top: calc(var(--header-h) + 30px); display: grid; justify-items: center; }
.burst {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  rotate: -8deg;
}
.burst > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(8px 8px 0 var(--ink)); }
.burst-text { position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 0 16%; }
.burst-num { font-family: var(--font-display); font-size: clamp(5rem, 9vw, 8rem); line-height: .8; letter-spacing: -.03em; }
.burst-stars { display: flex; gap: 4px; }
.burst-stars svg { width: clamp(22px, 2.4vw, 30px); height: auto; }
.burst-sub { font-weight: 800; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.2; }
.burst-src { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; }
.award {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding: 12px 18px 12px 12px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: var(--pop-sm);
  rotate: 2deg;
}
.award svg { width: 54px; height: 54px; flex: none; }
.award p { font-weight: 800; font-size: 1rem; line-height: 1.2; }
.award small { display: block; font-family: var(--font-mono); font-weight: 700; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }

.letters { display: grid; grid-template-columns: 1fr 1fr; gap: 54px 28px; padding-top: 10px; }
.letter {
  position: relative;
  padding: 26px 24px 22px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 30px;
  box-shadow: var(--pop);
  rotate: var(--rot, 0deg);
}
.letter:nth-child(1) { --rot: -2deg; }
.letter:nth-child(2) { --rot: 1.6deg; translate: 0 34px; }
.letter:nth-child(3) { --rot: 1.2deg; }
.letter:nth-child(4) { --rot: -1.8deg; translate: 0 34px; }
.letter-stars { display: flex; gap: 3px; margin-bottom: 12px; }
.letter-stars svg { width: 20px; height: 20px; }
.letter blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.5; font-weight: 500; }
.letter figcaption { margin-top: 16px; font-weight: 800; font-size: .9375rem; line-height: 1.3; }
.letter figcaption span { display: block; font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-micro); letter-spacing: .04em; }
.letter .bubble-tail { width: 48px; height: 38px; bottom: -34px; left: 26px; }
.letter:nth-child(even) .bubble-tail { left: auto; right: 30px; scale: -1 1; }
.kid-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 78px; }
.kid-note {
  position: relative;
  padding: 22px 22px 18px;
  background-color: #fff;
  background-image: repeating-linear-gradient(to bottom, transparent 0 30px, var(--rule) 30px 32px);
  background-position: 0 16px;
  border: var(--line) solid var(--ink);
  border-radius: 8px;
  box-shadow: var(--pop-sm);
  rotate: var(--rot, 0deg);
}
.kid-note:nth-child(1) { --rot: 2.5deg; }
.kid-note:nth-child(2) { --rot: -2deg; }
.kid-note::before {
  content: "";
  position: absolute;
  top: -14px; left: 50%;
  width: 92px; height: 26px;
  translate: -50% 0;
  rotate: -4deg;
  background: repeating-linear-gradient(90deg, rgba(47, 168, 255, .75) 0 8px, rgba(47, 168, 255, .55) 8px 16px);
  border: 2px solid var(--ink);
}
.kid-note p { font-family: var(--font-display); font-size: 1.35rem; line-height: 32px; }
.kid-note span { display: block; margin-top: 6px; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; }

/* ---------- 13. FAQ -------------------------------------------------------- */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4.6vw, 72px);
  align-items: start;
}
.faq-side { position: sticky; top: calc(var(--header-h) + 30px); }
.faq-side .lead { max-width: 30ch; }
.faq-help {
  margin-top: 30px;
  padding: 22px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 24px;
  box-shadow: var(--pop);
  rotate: -1.5deg;
}
.faq-help p { font-weight: 700; line-height: 1.4; }
.faq-help .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.faq-list { display: grid; gap: 16px; }
.faq-item {
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 22px;
  box-shadow: var(--pop-sm);
  transition: box-shadow var(--t-fast) var(--ease-out), translate var(--t-fast) var(--ease-out), background-color var(--t-med);
}
.faq-item.is-open { background: #FFFBE3; box-shadow: var(--pop); translate: -2px -2px; }
.faq-item h3 { margin: 0; }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 68px;
  padding: 16px 16px 16px 24px;
  background: none;
  border: 0;
  border-radius: 20px;
  text-align: left;
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.3;
}
.faq-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  background: var(--lemon);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  transition: rotate var(--t-med) var(--ease-spring), background-color var(--t-fast);
}
.faq-icon svg { width: 18px; height: 18px; }
.faq-item.is-open .faq-icon { rotate: 135deg; background: var(--berry); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--t-med) var(--ease-io), visibility 0s linear var(--t-med);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--t-med) var(--ease-io), visibility 0s linear 0s; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 24px 22px; max-width: 62ch; font-size: 1.0625rem; line-height: 1.55; }

/* ---------- 14. Visit ------------------------------------------------------ */
.sec--visit { padding-top: calc(var(--sec-pad) + 10px); }
.sec--visit .eyebrow { background: var(--lemon); }
.visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 3.4vw, 48px);
  align-items: start;
}
.hours-board {
  padding: clamp(22px, 2.6vw, 32px);
  background-color: var(--ink);
  background-image: repeating-linear-gradient(to bottom, transparent 0 44px, #221f28 44px 46px);
  color: #fff;
  border: var(--line) solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: 9px 9px 0 rgba(18, 16, 22, .9);
  rotate: -1deg;
}
.hb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hb-title { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--lemon); }
.hours-board .status { rotate: 2deg; color: var(--ink); }
.hours-table { width: 100%; margin-top: 20px; border-collapse: collapse; font-family: var(--font-mono); font-size: 1rem; font-variant-numeric: tabular-nums; }
.hours-table caption { text-align: left; }
.hours-table th, .hours-table td { padding: 10px 10px; text-align: left; font-weight: 700; letter-spacing: .04em; }
.hours-table td { text-align: right; white-space: nowrap; }
.hours-table tr { border-bottom: 2px dashed #3a3642; }
.hours-table tr:last-child { border-bottom: 0; }
.hours-table tr.is-today { background: var(--lemon); color: var(--ink); }
.hours-table tr.is-today th { position: relative; }
.hours-table tr.is-today th::after {
  content: "Today";
  margin-left: 10px;
  padding: 2px 7px 1px;
  background: var(--berry);
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.hours-table tr.is-today th, .hours-table tr.is-today td { border-block: 0; }
.hours-table tr.is-today th { border-radius: 10px 0 0 10px; }
.hours-table tr.is-today td { border-radius: 0 10px 10px 0; }
.hb-notes { display: grid; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 2px dashed #3a3642; }
.hb-notes li { display: flex; gap: 12px; font-size: .9375rem; line-height: 1.45; }
.hb-notes b { color: var(--lemon); }
.hb-notes svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }

.map-card {
  overflow: hidden;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--pop-lg);
}
.map-card svg.map { width: 100%; height: auto; border-bottom: var(--line) solid var(--ink); }
.map .map-lbl { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .06em; }
.map .map-big { font-family: var(--font-display); font-size: 20px; }
.map-body { padding: clamp(20px, 2.6vw, 30px); }
.map-body address { font-style: normal; font-weight: 800; font-size: 1.25rem; line-height: 1.35; }
.map-body p { margin-top: 8px; font-size: 1rem; line-height: 1.5; }
.contact-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.contact-row .btn { padding-inline: 10px; min-width: 0; }
.contact-row .btn--berry { grid-column: 1 / -1; }
.contact-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 20px; font-family: var(--font-mono); font-size: .875rem; }
.contact-list a { text-decoration: none; font-weight: 700; }
.contact-list a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.contact-list dt { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.contact-list dd { overflow-wrap: anywhere; }

/* ---------- 15. Footer ----------------------------------------------------- */
.site-footer {
  position: relative;
  padding: 56px 0 100px;
  background: var(--pool);
  border-top: var(--line) solid var(--ink);
}
.footer-word { width: 100%; height: auto; overflow: visible; }
.footer-word text {
  font-family: var(--font-display);
  fill: var(--lemon);
  stroke: var(--ink);
  stroke-width: 10px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.footer-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: start;
  gap: 28px 40px;
  margin-top: 30px;
}
.footer-tag { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; rotate: -2deg; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-links a { font-weight: 800; text-decoration: none; padding: 8px 0; display: inline-block; }
.footer-links a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.footer-contact { display: grid; gap: 2px; font-family: var(--font-mono); font-weight: 700; font-size: .875rem; }
.footer-contact a { text-decoration: none; padding: 4px 0; }
.footer-contact a:hover { text-decoration: underline; }
.fineprint { margin-top: 34px; padding-top: 18px; border-top: 2.5px solid var(--ink); font-size: .875rem; line-height: 1.5; }

/* ---------- 16. Fixed UI: album tray, mobile CTA, dialog, toast ----------- */
.tray {
  position: fixed;
  z-index: 40;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 16px 0 8px;
  background: var(--lemon);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: var(--pop-sm);
  font-weight: 800;
  transition: translate var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
@media (hover: hover) { .tray:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ink); } }
.tray:active { translate: 3px 3px; box-shadow: var(--pressed); }
.tray-icon { width: 42px; height: 42px; flex: none; }
.tray-text { display: grid; line-height: 1.05; text-align: left; }
.tray-text small { font-family: var(--font-mono); font-weight: 700; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.tray-count { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.tray.is-complete { background: var(--lime); }

.mobile-cta {
  position: fixed;
  z-index: 40;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  min-height: 58px;
  padding-inline: 22px;
  font-size: 1.0625rem;
  box-shadow: var(--pop-sm);
  transition: translate var(--t-slow) var(--ease-out), opacity var(--t-med) var(--ease-out), box-shadow var(--t-fast);
}
.mobile-cta.is-hidden { translate: 0 150%; opacity: 0; pointer-events: none; }
@media (min-width: 900px) { .mobile-cta { display: none; } }

.album {
  width: min(100% - 24px, 760px);
  max-height: min(92svh, 860px);
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--pop-lg);
}
.album::backdrop { background: rgba(18, 16, 22, .6); }
.album[open] { animation: sheet-in var(--t-slow) var(--ease-out) both; }
@keyframes sheet-in { from { translate: 0 40px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.album-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 18px 26px;
  background: var(--lemon);
  border-bottom: var(--line) solid var(--ink);
}
.album-head .h3 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.album-close {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex: none;
  padding: 0;
  background: #fff;
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--ink);
}
.album-close svg { width: 20px; height: 20px; }
.album-body { padding: 22px 26px 28px; }
.album-body > p { font-size: 1rem; line-height: 1.5; max-width: 56ch; }
.album-progress { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 16px; }
.album-progress i { height: 14px; border: 2.5px solid var(--ink); border-radius: 6px; background: #fff; }
.album-progress i.is-got { background: var(--berry); }
.album-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.slot-card {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  padding: 14px 8px 12px;
  background-color: var(--chlorine);
  background-image: radial-gradient(rgba(18, 16, 22, .12) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  border: 2.5px dashed var(--ink);
  border-radius: 20px;
  text-align: center;
}
.slot-card.is-got { background: #fff; border-style: solid; box-shadow: 3px 3px 0 var(--ink); }
.slot-card svg { width: min(100%, 96px); aspect-ratio: 1; height: auto; overflow: visible; }
.slot-card.is-got svg { filter: drop-shadow(3px 3px 0 var(--ink)); }
.slot-no { font-family: var(--font-mono); font-weight: 700; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.slot-name { font-weight: 800; font-size: .9375rem; line-height: 1.2; }
.slot-card a { font-size: .8125rem; font-weight: 700; line-height: 1.3; padding: 4px 2px; }
.slot-card--bonus { background: #FFF6C2; }
.slot-card--bonus.is-got { background: var(--lemon); }
.slot-card--bonus svg text { font-family: var(--font-display); }
.album-done {
  margin-top: 22px;
  padding: 20px 22px;
  background: var(--lime);
  border: var(--line) solid var(--ink);
  border-radius: 22px;
  box-shadow: var(--pop-sm);
}
.album-done .code {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px 6px;
  background: #fff;
  border: 2.5px dashed var(--ink);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .08em;
}
.album-done p { font-weight: 700; line-height: 1.45; }
.album-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; align-items: center; }
.link-btn { min-height: 44px; padding: 10px 4px; background: none; border: 0; font-weight: 700; font-size: .9375rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  width: min(100% - 32px, 520px);
  translate: -50% 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px 14px 18px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 22px;
  box-shadow: var(--pop);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out), translate var(--t-med) var(--ease-out);
}
.toast.is-in { opacity: 1; translate: -50% 0; }
.toast svg.toast-art { width: 58px; height: 58px; flex: none; overflow: visible; filter: drop-shadow(3px 3px 0 var(--ink)); }
.toast p { flex: 1; font-weight: 700; font-size: .9375rem; line-height: 1.4; }
.toast p b { font-family: var(--font-mono); letter-spacing: .04em; }
.toast .album-close { width: 44px; height: 44px; }
.toast[hidden] { display: none; }

.confetti { position: fixed; inset: 0; z-index: 70; pointer-events: none; width: 100%; height: 100%; }
.flyer { position: fixed; z-index: 80; pointer-events: none; margin: 0; overflow: visible; filter: drop-shadow(5px 5px 0 var(--ink)); }
.plus-one {
  position: fixed;
  z-index: 81;
  pointer-events: none;
  padding: 3px 8px 1px;
  background: var(--berry);
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

/* reveal: stickers get slapped onto the page */
.js .slap { opacity: 0; scale: 1.08; rotate: calc(var(--rot, 0deg) - 3deg); }
.js .slap.is-in { opacity: 1; scale: 1; rotate: var(--rot, 0deg); transition: opacity .35s var(--ease-out), scale .5s var(--ease-spring), rotate .5s var(--ease-spring); }

/* ---------- 17. Responsive ------------------------------------------------- */
@media (max-width: 1180px) {
  .ticket-eyebrow span:last-child { display: none; }
  .nav a { padding: 0 10px; }
  .header-status { display: none; }
}

@media (max-width: 1023px) {
  .ruler-card, .receipt-col { position: relative; top: auto; }
  .footer-row { grid-template-columns: minmax(0, 1fr) auto; }
  .footer-row nav { grid-column: 1 / -1; grid-row: 2; }
  .nav, .header-cta { display: none; }
  .menu-btn { display: inline-flex; }
  .header-status { display: inline-flex; margin-left: auto; }
  .menu-btn { margin-left: 0; }

  .hero { min-height: 0; padding-bottom: 170px; }
  .hero-ticket { position: relative; top: auto; right: auto; width: min(100%, 360px); margin-top: 40px; margin-left: auto; margin-right: 4%; }
  .hero-copy { max-width: 560px; }

  .safety-grid, .visit-grid, .faq-grid, .mail-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-side, .burst-wrap { position: static; }
  .burst { width: min(80%, 380px); }
  .stubs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .booth { grid-template-columns: minmax(0, 1fr); }
  .club { grid-template-columns: minmax(0, 1fr); }
  .club-visual { max-width: 560px; }
  .enquire { grid-template-columns: minmax(0, 1fr); }
  .sheet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .hero { --F: clamp(3.4rem, 11vw, 6.6rem); --P: calc(var(--F) * 1.14 + 6px); --T: calc(var(--header-h) + 76px); }
  .hero-title { font-size: var(--F); }
  .hs--berry  { --x: calc(100% - var(--gutter) - 150px); --y: calc(var(--T) + var(--P) - 14px); --s: 136px; }
  .hs--sun    { --x: calc(100% - var(--gutter) - 104px); --y: calc(var(--header-h) + 6px); --s: 100px; }
  .hs--60     { --x: calc(100% - var(--gutter) - 262px); --y: calc(var(--T) + 2 * var(--P) + 18px); --s: 104px; }
  .hs--star   { --x: calc(100% - var(--gutter) - 80px);  --y: calc(var(--T) + 2 * var(--P) + 64px); --s: 72px; }
  .hs--ring   { --x: calc(var(--gutter) + 10px);  --y: calc(100% - 360px); --s: 104px; }
  .hs--duck   { --x: calc(var(--gutter) + 150px); --y: calc(100% - 300px); --s: 104px; }
  .hs--bucket { --x: calc(100% - var(--gutter) - 96px); --y: calc(100% - 270px); --s: 104px; }
  .hs--slide, .hs--splash { display: none; }
  .drag-hint { left: calc(100% - var(--gutter) - 250px); top: calc(var(--T) + 3 * var(--P) + 22px); }
}

@media (max-width: 767px) {
  .header-status { display: none; }
  .footer-row { grid-template-columns: minmax(0, 1fr); }
  .footer-row nav { grid-row: auto; }
  .sec-head { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .collectible { --size: 80px; justify-self: end; grid-auto-flow: column; align-items: center; gap: 10px; margin-top: -4px; }
  .collectible .pk-tag { order: -1; }
  .lead { margin-top: 18px; }

  .logo-word { font-size: 1.35rem; }
  .logo-mark { width: 40px; height: 40px; }
  .logo { padding: 4px 12px 4px 4px; border-radius: 16px; }

  .hero { --F: clamp(3.5rem, 17.4vw, 5.2rem); --P: calc(var(--F) * 1.14 + 5px); --T: calc(var(--header-h) + 70px); padding-top: calc(var(--header-h) + 22px); padding-bottom: 150px; }
  .hero-kicker .eyebrow:first-child { display: none; }
  .hero-kicker .eyebrow { font-size: .6875rem; }
  .hero-title { font-size: var(--F); gap: .09em; }
  .hero-title .line-1 { display: flex; flex-direction: column; align-items: flex-start; gap: .09em; padding: 0; background: none; border: 0; box-shadow: none; rotate: 0deg; }
  .hero-title .line-1 .w { display: inline-block; padding: .13em .2em .02em; background: var(--c); border: var(--line) solid var(--ink); border-radius: .12em; box-shadow: var(--pop); }
  .hero-title .line-1 .w:first-child { --c: var(--berry); rotate: -3deg; }
  .hero-title .line-1 .w:last-child { --c: var(--tangerine); rotate: 1.5deg; margin-left: .2em; }
  .line-2 { margin-left: .5em; rotate: -1.5deg; }
  .line-3 { margin-left: .1em; rotate: 1.2deg; }
  .hero-sub { font-size: 1.125rem; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-ctas .btn { width: 100%; }
  .hero-ticket { width: calc(100% - 20px); margin: 34px 0 0 6px; rotate: 2deg; }

  .hs--berry  { --x: calc(100% - 124px); --y: calc(var(--T) - 6px); --s: 106px; }
  .hs--star   { --x: calc(100% - 66px);  --y: calc(var(--T) + var(--P) - 4px); --s: 56px; }
  .hs--sun    { --x: calc(100% - 90px);  --y: calc(var(--T) + 2 * var(--P) - 6px); --s: 80px; }
  .hs--60     { --x: calc(100% - 96px);  --y: calc(var(--T) + 3 * var(--P) - 10px); --s: 78px; }
  .hs--duck   { --x: calc(100% - 118px); --y: auto; --s: 96px; }
  .hs--ring, .hs--slide, .hs--bucket, .hs--splash { display: none; }
  .hs--duck { top: auto; bottom: 150px; }
  .drag-hint { left: auto; right: 18px; top: calc(var(--header-h) + 18px); font-size: .95rem; text-align: right; rotate: -4deg; }
  .drag-hint svg { width: 40px; height: 34px; margin: 8px 0 0 2px; scale: -1 -1; }
  .hero .tape { bottom: 48px; }
  .tape-toggle { width: 44px; height: 44px; right: calc(6% / 1.12 + 10px); }

  .filter { gap: 10px; }
  .filter-label { flex-basis: 100%; }
  .chip { padding: 0 16px; min-width: 0; flex: 1 1 auto; }
  .rides-grid { gap: 40px; }
  .ride-card { padding-top: 54px; gap: 14px; }
  .ride:not(.ride--tower) .ride-art svg { max-height: 176px; }
  .tag-age { width: 70px; height: 70px; font-size: 1.25rem; }

  .notebook { --lh: 1.75rem; --pad-top: 36px; padding-right: 18px; padding-left: 64px; background-image:
    linear-gradient(90deg, transparent 50px, var(--berry) 50px 53px, transparent 53px 57px, var(--berry) 57px 59px, transparent 59px),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 2px), var(--rule) calc(var(--lh) - 2px) var(--lh)); }
  .nb-holes { left: 12px; }
  .nb-holes span { width: 22px; height: 22px; }
  .checklist li { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; }
  .check { width: 32px; height: 32px; margin-top: 0; }
  .checklist strong { font-size: 1.0625rem; }
  .checklist span { font-size: .9375rem; }

  .stubs { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .stub-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; }
  .stub-main { padding: 18px 18px 16px; }
  .stub-name { font-size: 1.5rem; }
  .stub-note { font-size: .875rem; }
  .stub-price { flex-direction: column; justify-content: center; align-items: center; padding: 12px 16px; border-top: 0; border-left: var(--line) dashed var(--ink); text-align: center; min-width: 104px; }
  .stub-price b { font-size: 1.5rem; }
  .stub-price::before, .stub-price::after { left: -17px; }
  .stub-price::before { top: -17px; }
  .stub-price::after { top: auto; bottom: -17px; right: auto; }
  .stub-card:nth-child(4) .stub-price { border-radius: 0 19px 19px 0; }
  .stub-card:nth-child(4) .stub-main { border-radius: 19px 0 0 19px; }
  .best-burst { width: 74px; height: 74px; top: -36px; right: 104px; }

  .booth { padding: 20px 16px 24px; }
  .dates { display: flex; overflow-x: auto; gap: 10px; padding: 12px 4px 10px; margin: -12px -4px 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .dates::-webkit-scrollbar { display: none; }
  .date-chip { flex: 0 0 76px; scroll-snap-align: start; }
  .stepper-name { font-size: 1rem; }
  .step-btn { width: 44px; height: 44px; }
  .step-val { width: 48px; height: 44px; }
  .promo-row { flex-direction: row; }
  .receipt { padding: 24px 16px 20px; font-size: .8125rem; }
  .rc-total b { font-size: 2rem; }
  .printed { grid-template-columns: minmax(0, 1fr); }
  .pt-qr { justify-self: start; }

  .club-visual { padding: 20px 10px 30px; }
  .plans, .perks { grid-template-columns: minmax(0, 1fr); }

  .bubbles { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .pkgs { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bubble { border-radius: 30px; }
  .bubble-top { display: block; }
  .bubble-char { position: absolute; top: -40px; right: 12px; width: 72px; margin: 0; }
  .bubble .h3 { padding-right: 64px; }
  .facts li { gap: 10px; }
  .facts b { min-width: 78px; padding-inline: 6px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }

  .sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-info { font-size: .8125rem; }

  .letters { grid-template-columns: minmax(0, 1fr); gap: 50px; }
  .letter:nth-child(n) { translate: none; }
  .kid-notes { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .award { rotate: 0deg; }

  .hours-table { font-size: .875rem; }
  .hours-table th, .hours-table td { padding: 9px 8px; }
  .contact-list { grid-template-columns: minmax(0, 1fr); }
  .contact-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .tray { height: 54px; padding: 0 12px 0 6px; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .tray-icon { width: 38px; height: 38px; }
  .tray-text small { display: none; }
  .mobile-cta { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); min-height: 54px; padding-inline: 18px; font-size: 1rem; }
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toast { gap: 10px; padding: 12px 10px 12px 12px; }
  .toast svg.toast-art { width: 40px; height: 40px; }
  .toast p { font-size: .875rem; }
  .toast .btn { padding-inline: 12px; }
  .album-body { padding: 18px 16px 22px; }
  .album-head { padding: 14px 14px 14px 18px; }
  .site-footer { padding-bottom: 110px; }
}

@media (max-width: 380px) {
  .header-status { display: none; }
  .hero { --F: 3.4rem; }
  .chip { padding: 0 12px; font-size: .875rem; }
  .hs--berry { --s: 96px; --x: calc(100% - 110px); }
  .hs--sun { --s: 64px; --x: calc(100% - 74px); }
  .hs--60 { --s: 66px; --x: calc(100% - 78px); --y: calc(var(--T) + 3 * var(--P) - 2px); }
  .ticket-eyebrow span:last-child { display: none; }
}

/* ---------- 18. Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .tape-track { animation: none !important; }
  .status.is-open .status-dot { animation: none; }
  .js .slap { opacity: 1; scale: 1; rotate: 0deg; }
  .menu { clip-path: none; }
}