/* ==========================================================================
   Foggy Mountain — Design System
   Colours, type and graphics derived from Brand Guidelines V1.0 (Jan 2024)
   ========================================================================== */

/* ---------- 0. Brand typeface ---------------------------------------------
   Restored official Panton Family (the typeface on Brand Guidelines V1.0)
   for display and body text across all components. Self-hosted OTF files
   in assets/fonts/ declared in fonts.css with webfont fallbacks.
   ---------------------------------------------------------------------- */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Brand palette — exact values from the guidelines, page "Color Palette" */
  --brand-indigo: #2e3192;
  --brand-amber: #f9a600;
  --brand-crimson: #e93647;
  --brand-green: #89c540;
  --brand-orange: #f05f28;
  --brand-sky: #5ac7ef;

  /* Sky ramp (derived from --brand-sky: #5ac7ef for highland water/sky surfaces) */
  --sky-900: #0a3d54;
  --sky-800: #0e5b7c;
  --sky-700: #0b6e92; /* accessible text ink */
  --sky-600: #1ba0cf;
  --sky-500: #3db8e7;
  --sky-400: #5ac7ef; /* brand sky */
  --sky-300: #88daf5;
  --sky-200: #bce9f9;
  --sky-100: #daf2fc;
  --sky-50: #eef8fd;
  --sky-mist: #f4fafe;

  /* Indigo ramp (single hue, tonal — keeps the brand blue dominant) */
  --indigo-900: #14163f;
  --indigo-800: #1d2060;
  --indigo-700: #24277a;
  --indigo-600: #2e3192; /* brand */
  --indigo-500: #4649ad;
  --indigo-300: #9a9dd4;
  --indigo-200: #c9cbe9;
  --indigo-100: #e6e7f6;
  --indigo-50: #f3f4fb;

  /* Text — all pairs below verified ≥ 4.5:1 on their stated background */
  --ink: #14163f; /* on white 15.6:1 */
  --ink-2: #4a4e7a; /* on white 7.4:1  */
  --ink-3: #6d719b; /* on white 4.6:1  */
  --on-dark: #ffffff; /* on indigo-600 9.8:1 */
  --on-dark-2: #c9cbe9; /* on indigo-600 5.6:1 */

  /* Accessible text-safe variants of the bright brand colours */
  --amber-ink: #8a5a00; /* on white 5.6:1 */
  --green-ink: #4a6d1c; /* on white 5.1:1 */
  --sky-ink: #0b6e92; /* on white 5.2:1 */
  --crimson-ink: #c81e2e; /* on white 5.0:1 */

  /* Surfaces */
  --surface: #ffffff;
  --surface-sunk: #f6f7fc;
  --surface-mist: #eef0f9; /* the "fog" tint */
  --border: #dfe1f0;
  --border-strong: #c2c5e0;

  /* Type — Panton Family for display/headline & body, per Brand Guidelines V1.0 */
  --font-display: "Panton", "Panton Family", "Outfit", "Avenir Next", system-ui, sans-serif;
  --font-body: "Panton", "Panton Family", "Open Sans", system-ui, -apple-system, sans-serif;
  --font-ml: "Anek Malayalam", var(--font-body);
  /* Identifiers (booking refs, codes) — system mono, no extra webfont fetch. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — 1.25 ratio, fluid between 375px and 1280px */
  --t-display: clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);
  --t-h1: clamp(2rem, 1.35rem + 2.7vw, 3rem);
  --t-h2: clamp(1.625rem, 1.3rem + 1.35vw, 2.25rem);
  --t-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-h4: 1.125rem;
  --t-body: 1rem;
  --t-sm: 0.875rem;
  --t-xs: 0.75rem;

  /* 4pt spacing rhythm */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Radii — soft, matching the rounded geometry of the logo */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Elevation — one consistent indigo-tinted scale */
  --e-1: 0 1px 2px rgba(20, 22, 63, 0.06), 0 2px 8px rgba(20, 22, 63, 0.04);
  --e-2: 0 2px 4px rgba(20, 22, 63, 0.06), 0 8px 24px rgba(20, 22, 63, 0.08);
  --e-3: 0 8px 16px rgba(20, 22, 63, 0.08), 0 24px 48px rgba(20, 22, 63, 0.14);

  --shell: 1180px;
  --header-h: 84px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 140ms;
  --base: 220ms;
}

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

img,
svg {
  max-width: 100%;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Numerals line up in every price, count and timer */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

:focus-visible {
  outline: 3px solid var(--brand-amber);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 100;
  background: var(--surface);
  color: var(--indigo-600);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  font-weight: 800;
  box-shadow: var(--e-3);
  transition: top var(--base) var(--ease);
}
.skip:focus {
  top: var(--s-4);
}

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
@media (min-width: 768px) {
  .shell {
    padding-inline: var(--s-6);
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indigo-600);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-amber);
}
.eyebrow.on-dark {
  color: var(--on-dark-2);
}

.lede {
  color: var(--ink-2);
  font-size: 1.0625rem;
  max-width: 58ch;
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm {
  width: 16px;
  height: 16px;
}
.icon-lg {
  width: 26px;
  height: 26px;
}

/* ---------- 3. Buttons --------------------------------------------------- */
.btn {
  --btn-bg: var(--indigo-600);
  --btn-fg: #fff;
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-5);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}

.btn-cta {
  --btn-bg: var(--brand-amber);
  --btn-fg: #3a2600;
  box-shadow: var(--e-1);
}
.btn-cta:hover {
  --btn-bg: #ffb724;
}

.btn-primary:hover {
  --btn-bg: var(--indigo-700);
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--indigo-600);
  border: 1.5px solid var(--border-strong);
}
.btn-ghost:hover {
  --btn-bg: var(--indigo-50);
  border-color: var(--indigo-300);
}

.btn-quiet {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.42);
}
.btn-quiet:hover {
  --btn-bg: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.btn-lg {
  min-height: 56px;
  padding: 0 var(--s-6);
  font-size: 1.0625rem;
}
.btn-block {
  width: 100%;
}
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ---------- 4. Header ---------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.header-row {
  height: var(--header-h);
  display: flex;
  align-items: center;
  /* 16px, not 24px. The row is capped by .shell (1180px), not by the viewport,
     so a wide screen does not help: signed in, brand + nav + 3 controls need
     1112px of content and four 24px gaps took the total to 1208px. The row
     then squeezed .brand, whose text overflowed its box and sat underneath
     the first nav pill. Four 16px gaps bring it to 1176px. */
  gap: var(--s-4);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  margin-right: auto;
  padding: var(--s-1);
  border-radius: var(--r-sm);
  flex: none; /* never the element that absorbs the shortfall */
}
.brand img {
  height: 58px;
  width: auto;
  display: block;
}
.brand-sub {
  display: none;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-left: 1px solid var(--border);
  padding-left: var(--s-3);
  line-height: 1.35;
  /* Must not shrink. Signed in, the header gains "My dashboard" and a
     "Sign out (NAME)" button; the flex row then squeezed this block until
     "Kakkadampoyil / Kozhikode, Kerala" wrapped to three lines and collided
     with the primary nav. It is a fixed two-line label — it never wraps. */
  flex: none;
  white-space: nowrap;
}
/* Raised from 1260px: at that width the signed-in header no longer had the
   room, and this is the least load-bearing element in the row. */
@media (min-width: 1400px) {
  .brand-sub {
    display: block;
  }
}

.main-nav {
  display: none;
  gap: 2px;
  flex-wrap: nowrap;
}
@media (min-width: 1020px) {
  .main-nav {
    display: flex;
  }
}
.main-nav a {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink-2);
  text-decoration: none;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.main-nav a:hover {
  background: var(--indigo-50);
  color: var(--indigo-600);
}
.main-nav a[aria-current="page"] {
  color: var(--indigo-600);
  background: var(--indigo-100);
}

.header-phone {
  display: none;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  white-space: nowrap;
  font-weight: 800;
  color: var(--indigo-600);
  text-decoration: none;
  font-size: var(--t-sm);
  padding: var(--s-2);
  border-radius: var(--r-sm);
}
@media (min-width: 720px) {
  .header-phone {
    display: inline-flex;
  }
}
@media (max-width: 480px) {
  /* Signed-in header row (logo + My dashboard + Sign out + Book tickets)
     doesn't fit 4 items at this width. "My dashboard" is redundant here —
     the floating role-dock's mobile sheet (role-dock.js) reaches the same
     screen, and "Book tickets" itself now routes signed-in guests to the
     dashboard too (see app.js). Drop the header duplicate instead of
     shrinking everything to illegible sizes. */
  #account-link {
    display: none !important;
  }
}

/* ---------- 5. Hero ------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--indigo-600);
  color: #fff;
  padding-block: var(--s-8) var(--s-9);
}
/* Brand-native backdrop: the guidelines' own scene graphic, tinted back */
.hero-art {
  position: absolute;
  right: -8%;
  bottom: -6%;
  width: min(760px, 78%);
  opacity: 0.14;
  filter: grayscale(1) brightness(3);
  pointer-events: none;
  z-index: -1;
}
.hero-glow {
  position: absolute;
  inset: -30% -10% auto -20%;
  height: 70%;
  background: radial-gradient(60% 60% at 30% 40%, rgba(90, 199, 239, 0.35), transparent 70%),
    radial-gradient(50% 50% at 78% 20%, rgba(249, 166, 0, 0.22), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.hero-grid {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 980px) {
  .hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--s-8);
  }
}
.hero h1 {
  font-size: var(--t-display);
  margin-block: var(--s-4) var(--s-4);
}
.hero h1 .accent {
  color: var(--brand-amber);
}
.hero-lede {
  color: var(--on-dark-2);
  font-size: 1.125rem;
  max-width: 46ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.fact {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--on-dark-2);
  font-size: var(--t-sm);
  font-weight: 600;
}
.fact .icon {
  color: var(--brand-sky);
}

.price-flag {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-sm);
  color: var(--on-dark-2);
}
.price-flag strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #fff;
}

/* Booking card in the hero — the single most important object on the page */
.book-card {
  background: #fff;
  color: var(--ink);
  border-radius: var(--r-xl);
  box-shadow: var(--e-3);
  padding: var(--s-5);
}
@media (min-width: 480px) {
  .book-card {
    padding: var(--s-6);
  }
}
.book-card h2 {
  font-size: var(--t-h3);
}
.book-card .book-note {
  color: var(--ink-3);
  font-size: var(--t-sm);
  margin-top: var(--s-1);
}
.field {
  display: block;
  margin-top: var(--s-4);
}
.field > .label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--s-2);
}
.control {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--s-4);
  background: var(--surface-sunk);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-weight: 600;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
  cursor: pointer;
}
.control:hover {
  border-color: var(--border-strong);
}
.control:focus {
  background: #fff;
  border-color: var(--indigo-600);
}
select.control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4e7a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
  padding-right: 44px;
}
.help {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--border);
  color: var(--ink-2);
  font-size: var(--t-sm);
}
.help .icon {
  color: var(--green-ink);
}

/* ---------- 6. Sections -------------------------------------------------- */
.section {
  padding-block: var(--s-9);
}
.section-sunk {
  background: var(--surface-sunk);
}
.section-head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}
@media (min-width: 860px) {
  .section-head {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}
.section-head h2 {
  font-size: var(--t-h2);
  margin-top: var(--s-3);
}

/* Zones — one card per world, colour-coded exactly as the brand concept page */
.zones {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.zone {
  --zone: var(--indigo-600);
  --zone-ink: var(--indigo-600);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease),
    border-color var(--base) var(--ease);
}
.zone::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--zone);
}
.zone:hover {
  transform: translateY(-4px);
  box-shadow: var(--e-2);
  border-color: var(--zone);
}
.zone-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--zone) 14%, #fff);
  color: var(--zone-ink);
  margin-top: var(--s-2);
}
.zone h3 {
  font-size: var(--t-h4);
}
.zone p {
  color: var(--ink-2);
  font-size: var(--t-sm);
}
.zone-meta {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.zone-meta .go {
  color: var(--zone-ink);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.zone:hover .go .icon {
  transform: translateX(3px);
}
.go .icon {
  transition: transform var(--fast) var(--ease);
}

.z-kids {
  --zone: var(--brand-amber);
  --zone-ink: var(--amber-ink);
}
.z-adventure {
  --zone: var(--brand-green);
  --zone-ink: var(--green-ink);
}
.z-resort {
  --zone: var(--brand-crimson);
  --zone-ink: var(--crimson-ink);
}
.z-zip {
  --zone: var(--brand-orange);
  --zone-ink: #b73c12;
}
.z-water {
  --zone: var(--brand-sky);
  --zone-ink: var(--sky-ink);
}

/* Pricing */
.tiers {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.tier {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  position: relative;
}
.tier.is-featured {
  border-color: var(--indigo-600);
  box-shadow: var(--e-2);
  position: relative;
}
.tier-flag {
  position: absolute;
  top: -13px;
  left: var(--s-5);
  background: var(--indigo-600);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
}
.tier h3 {
  font-size: var(--t-h4);
}
.tier .amount {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--indigo-600);
}
.tier .amount.is-text {
  font-size: 1.75rem;
}
.tier .per {
  font-size: var(--t-sm);
  color: var(--ink-3);
  font-weight: 600;
}
.tier ul {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.tier li {
  display: flex;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.tier li .icon {
  color: var(--green-ink);
  margin-top: 2px;
}

/* Info strip */
.info-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.info {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  background: #fff;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--border);
}
.info .icon-lg {
  color: var(--indigo-600);
}
.info h3 {
  font-size: 1rem;
  margin-bottom: 2px;
}
.info p {
  font-size: var(--t-sm);
  color: var(--ink-2);
}

/* Wave divider using the brand's own wave motif */
.wave-rule {
  height: 56px;
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  opacity: 0.32;
}

/* ---------- 7. Booking flow --------------------------------------------- */
.flow-header {
  background: var(--indigo-600);
  color: #fff;
  padding-block: var(--s-5);
}
.flow-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.flow-title h1 {
  font-size: var(--t-h2);
}

.steps {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-5);
  counter-reset: step;
}
.step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 4px solid rgba(255, 255, 255, 0.22);
  color: var(--on-dark-2);
  font-size: var(--t-sm);
  font-weight: 700;
}
.step .step-n {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}
.step .step-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.step[data-state="done"] {
  border-top-color: var(--brand-green);
  color: #fff;
}
.step[data-state="current"] {
  border-top-color: var(--brand-amber);
  color: #fff;
}

.flow-body {
  padding-block: var(--s-7) var(--s-9);
  background: var(--surface-sunk);
  min-height: 60vh;
}
.flow-grid {
  display: grid;
  gap: var(--s-5);
  align-items: start;
}
@media (min-width: 980px) {
  .flow-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
}

.panel {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--e-1);
}
@media (min-width: 600px) {
  .panel {
    padding: var(--s-6);
  }
}
.panel + .panel {
  margin-top: var(--s-5);
}
.panel h2 {
  font-size: var(--t-h3);
}
.panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-5);
}

/* Calendar */
.cal-nav {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.icon-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--indigo-600);
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.icon-btn:hover:not([disabled]) {
  background: var(--indigo-50);
  border-color: var(--indigo-300);
}
.icon-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.cal-month {
  font-family: var(--font-display);
  font-weight: 700;
  min-width: 10ch;
  text-align: center;
}

.cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
@media (min-width: 520px) {
  .cal {
    gap: 8px;
  }
}
.cal-dow {
  text-align: center;
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: var(--s-2);
}
.day {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
    color var(--fast) var(--ease);
}
.day .d-num {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
}
.day .d-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.day:hover:not([disabled]) {
  border-color: var(--indigo-600);
  background: var(--indigo-50);
}
.day[data-avail="limited"] {
  border-color: #f0c46a;
  background: #fff8e8;
  color: var(--amber-ink);
}
.day[data-avail="past"] {
  background: transparent;
  border-color: transparent;
  color: var(--border-strong);
  cursor: default;
}
.day[data-avail="soldout"],
.day[data-avail="closed"] {
  background: var(--surface-mist);
  color: var(--ink-3);
  cursor: not-allowed;
  border-style: dashed;
}
.day[data-avail="soldout"] .d-num {
  text-decoration: line-through;
}
.day[aria-pressed="true"] {
  background: var(--indigo-600);
  border-color: var(--indigo-600);
  color: #fff;
  box-shadow: var(--e-1);
}
.day.is-empty {
  border: 0;
  background: none;
  cursor: default;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.swatch {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  background: #fff;
}
.swatch.limited {
  background: #fff8e8;
  border-color: #f0c46a;
}
.swatch.soldout {
  background: var(--surface-mist);
  border-style: dashed;
}

/* Slots */
.slots {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.slot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.slot:hover:not([disabled]) {
  border-color: var(--indigo-600);
}
.slot[aria-pressed="true"] {
  border-color: var(--indigo-600);
  background: var(--indigo-50);
  box-shadow: inset 0 0 0 1px var(--indigo-600);
}
.slot[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.slot-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: grid;
  place-items: center;
  flex: none;
}
.slot[aria-pressed="true"] .slot-dot {
  border-color: var(--indigo-600);
  background: var(--indigo-600);
  color: #fff;
}
.slot-dot .icon {
  width: 12px;
  height: 12px;
  opacity: 0;
}
.slot[aria-pressed="true"] .slot-dot .icon {
  opacity: 1;
}
.slot-name {
  font-family: var(--font-display);
  font-weight: 700;
}
.slot-meta {
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pill-ok {
  background: #eef7e2;
  color: var(--green-ink);
}
.pill-warn {
  background: #fff3d6;
  color: var(--amber-ink);
}
.pill-off {
  background: var(--surface-mist);
  color: var(--ink-3);
}
.pill-info {
  background: var(--indigo-100);
  color: var(--indigo-600);
}

/* Ticket rows */
.ticket-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--border);
}
.ticket-row:last-of-type {
  border-bottom: 0;
}
.ticket-info {
  flex: 1 1 200px;
  min-width: 0;
}
.ticket-info h3 {
  font-size: 1.0625rem;
}
.ticket-info p {
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.ticket-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--indigo-600);
  min-width: 5ch;
  text-align: right;
}
.stepper {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
}
.stepper button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--indigo-600);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--e-1);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.stepper button:hover:not([disabled]) {
  background: var(--indigo-600);
  color: #fff;
}
.stepper button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.stepper output {
  min-width: 2.5ch;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
}

/* Summary rail */
.rail {
  position: sticky;
  top: calc(var(--header-h) + var(--s-4));
}
.summary {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.summary-head {
  background: var(--indigo-600);
  color: #fff;
  padding: var(--s-4) var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.summary-head h2 {
  font-size: 1.0625rem;
  color: #fff;
}
.summary-body {
  padding: var(--s-5);
}
.sum-line {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.sum-line dt {
  min-width: 0;
  flex-shrink: 0;
}
.sum-line dd {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}
.sum-line.is-discount dd {
  color: var(--green-ink);
}
.sum-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 2px solid var(--border);
}
.sum-total .label {
  font-family: var(--font-display);
  font-weight: 700;
}
.sum-total .value {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--indigo-600);
}
.summary-foot {
  padding: 0 var(--s-5) var(--s-5);
  display: grid;
  gap: var(--s-3);
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-weight: 600;
}
.trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Hold timer */
.hold {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: #fff3d6;
  border: 1.5px solid #f0c46a;
  color: var(--amber-ink);
  font-size: var(--t-sm);
  font-weight: 700;
}
.hold[data-urgent="true"] {
  background: #fdeaec;
  border-color: #f2a8b0;
  color: var(--crimson-ink);
}
.hold .time {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
}

/* Forms */
.form-grid {
  display: grid;
  gap: var(--s-4);
}
@media (min-width: 620px) {
  .form-grid.two {
    grid-template-columns: 1fr 1fr;
  }
}
.field input.control,
.field select.control {
  cursor: text;
}
.field select.control {
  cursor: pointer;
}
.field .hint {
  margin-top: 6px;
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.req {
  color: var(--crimson-ink);
}
.field .err {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--crimson-ink);
}
.field.is-invalid .err {
  display: flex;
}
.field.is-invalid .control {
  border-color: var(--crimson-ink);
  background: #fff;
}

.coupon {
  display: flex;
  gap: var(--s-2);
}
.coupon .control {
  cursor: text;
  text-transform: uppercase;
}

.callout {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--indigo-50);
  border: 1px solid var(--indigo-200);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.callout .icon {
  color: var(--indigo-600);
  margin-top: 2px;
}

/* Sign-in — split layout: a brand/trust panel next to the actual form.
   The brand panel is desktop-only (display:none below 900px) — on a phone
   the form alone, front and centre, is the right call; the marketing half
   would just push it below the fold. */
.auth-split {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding-block: var(--s-7);
}
.auth-split__grid {
  display: grid;
  gap: var(--s-6);
  max-width: 1000px;
}
.auth-form-wrap {
  max-width: 440px;
  width: 100%;
  margin-inline: auto;
}
.auth-brand {
  display: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex-direction: column;
  gap: var(--s-5);
  background: var(--indigo-700);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s-7);
}
.auth-brand::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -20%;
  height: 80%;
  z-index: -1;
  background: radial-gradient(60% 60% at 30% 30%, rgba(90, 199, 239, 0.3), transparent 70%),
    radial-gradient(50% 50% at 85% 15%, rgba(249, 166, 0, 0.25), transparent 70%);
}
.auth-brand__logo {
  height: 32px;
  width: auto;
}
.auth-brand h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: 1.15;
  margin: 0;
}
.auth-brand > p {
  color: var(--on-dark-2);
  margin: 0;
  max-width: 34ch;
}
.auth-brand__facts {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.auth-brand__facts li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 700;
  font-size: var(--t-sm);
}
.auth-brand__facts .icon {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
@media (min-width: 900px) {
  .auth-brand {
    display: flex;
  }
  .auth-split__grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .auth-form-wrap {
    margin-inline: 0;
  }
}

/* E-ticket */
.eticket {
  max-width: 560px;
  margin-inline: auto;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--e-3);
  overflow: hidden;
}
.eticket-top {
  background: var(--indigo-600);
  color: #fff;
  padding: var(--s-6) var(--s-5);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.eticket-top img.logo {
  height: 76px;
  margin-inline: auto;
  display: block;
}
.eticket-top h1 {
  font-size: var(--t-h3);
  margin-top: var(--s-4);
}
.eticket-top p {
  color: var(--on-dark-2);
  font-size: var(--t-sm);
  margin-top: var(--s-2);
}
.eticket-perf {
  position: relative;
  height: 24px;
  background: var(--indigo-600);
}
.eticket-perf::before,
.eticket-perf::after {
  content: "";
  position: absolute;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-sunk);
}
.eticket-perf::before {
  left: -12px;
}
.eticket-perf::after {
  right: -12px;
}
.eticket-body {
  padding: var(--s-6) var(--s-5);
  display: grid;
  gap: var(--s-5);
}
.qr-wrap {
  display: grid;
  place-items: center;
  gap: var(--s-3);
}
.qr {
  padding: var(--s-3);
  border: 2px solid var(--indigo-600);
  border-radius: var(--r-md);
}
.ref {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px dashed var(--border-strong);
}
.detail dt {
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.detail dd {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
}

/* ---------- 8. Footer ---------------------------------------------------- */
.site-footer {
  background: var(--indigo-900);
  color: #fff;
  padding-block: var(--s-8) var(--s-6);
  position: relative;
  overflow: hidden;
}
.footer-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.site-footer img.logo {
  height: 84px;
}
.site-footer p,
.site-footer li,
.site-footer a {
  color: #b9bce0;
  font-size: var(--t-sm);
}
.site-footer a {
  text-decoration: none;
}
.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}
.site-footer h3 {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--s-4);
}
.site-footer ul {
  display: grid;
  gap: var(--s-2);
}
.footer-bar {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  font-size: var(--t-xs);
  color: #9295c4;
}

/* ---------- 9. Utilities & motion --------------------------------------- */
.stack-2 > * + * {
  margin-top: var(--s-2);
}
.stack-3 > * + * {
  margin-top: var(--s-3);
}
.stack-4 > * + * {
  margin-top: var(--s-4);
}
.stack-5 > * + * {
  margin-top: var(--s-5);
}
.row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.right {
  margin-left: auto;
}
.muted {
  color: var(--ink-2);
}
.small {
  font-size: var(--t-sm);
}
.center {
  text-align: center;
}

.view {
  display: none;
}
.view.is-active {
  display: block;
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
}
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-5);
  translate: -50% 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--indigo-900);
  color: #fff;
  font-weight: 700;
  font-size: var(--t-sm);
  box-shadow: var(--e-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--base) var(--ease), translate var(--base) var(--ease);
}
.toast.show {
  opacity: 1;
  translate: -50% -6px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .site-header,
  .site-footer,
  .no-print {
    display: none !important;
  }
  .eticket {
    box-shadow: none;
    border: 1px solid #000;
  }
  .flow-body {
    background: #fff;
  }
}

/* ==========================================================================
   10. Park-marketing layer — patterns borrowed from the way Indian park
   sites (Wonderla et al.) are structured, rebuilt in Foggy Mountain's palette
   ========================================================================== */

/* Announcement strip */
.announce {
  background: var(--indigo-900);
  color: #fff;
  font-size: var(--t-sm);
}
.announce .shell {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-block: 6px;
  text-align: center;
}
.announce b {
  color: var(--brand-amber);
}
.announce .code {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  background: rgba(249, 166, 0, 0.16);
  border: 1px dashed rgba(249, 166, 0, 0.55);
  color: #ffd479;
  padding: 2px 10px;
  border-radius: var(--r-pill);
}
.announce a {
  color: #fff;
  font-weight: 700;
}

/* Photographic hero */
.hero-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: var(--indigo-800);
  padding-block: var(--s-9) var(--s-8);
  min-height: 560px;
  display: flex;
  align-items: center;
}
.hero-photo > img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      100deg,
      rgba(20, 22, 63, 0.94) 0%,
      rgba(30, 33, 100, 0.82) 42%,
      rgba(46, 49, 146, 0.32) 78%,
      rgba(46, 49, 146, 0.12) 100%
    );
}
@media (max-width: 900px) {
  .hero-photo::after {
    background: linear-gradient(180deg, rgba(20, 22, 63, 0.9), rgba(30, 33, 100, 0.86));
  }
}
.hero-photo h1 {
  font-size: var(--t-display);
  margin-block: var(--s-4) var(--s-4);
  max-width: 15ch;
}
.offer-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--brand-amber);
  color: #3a2600;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-sm);
  padding: 8px var(--s-4);
  border-radius: var(--r-pill);
  box-shadow: var(--e-2);
}

/* Wide booking bar under the hero */
.book-bar {
  position: relative;
  z-index: 5;
  margin-top: calc(var(--s-7) * -1);
}
.book-bar-inner {
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--e-3);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-4);
}
@media (min-width: 900px) {
  .book-bar-inner {
    grid-template-columns: 1.1fr 1.4fr 1fr auto;
    align-items: end;
    padding: var(--s-5) var(--s-6);
  }
}
.book-bar .field {
  margin: 0;
}
.book-bar .btn {
  min-height: 52px;
}

/* USP strip */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-4);
  padding-block: var(--s-7);
}
.stat {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.stat .icon-lg {
  color: var(--indigo-600);
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.1;
}
.stat span {
  font-size: var(--t-sm);
  color: var(--ink-2);
}

/* Filter chips */
.chips {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.chip {
  min-height: 44px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
    border-color var(--fast) var(--ease);
}
.chip:hover {
  border-color: var(--indigo-300);
  color: var(--indigo-600);
}
.chip[aria-pressed="true"] {
  background: var(--indigo-600);
  border-color: var(--indigo-600);
  color: #fff;
}

/* Ride cards */
.ride-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.ride {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.ride:hover {
  transform: translateY(-4px);
  box-shadow: var(--e-2);
}
.ride-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-mist);
  overflow: hidden;
}
.ride-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease);
}
.ride:hover .ride-media img {
  transform: scale(1.05);
}
.ride-badges {
  position: absolute;
  left: var(--s-3);
  top: var(--s-3);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--e-1);
}
.badge-thrill {
  background: var(--brand-crimson);
  color: #fff;
}
.badge-family {
  background: var(--brand-green);
  color: #1f3606;
}
.badge-chill {
  background: var(--brand-sky);
  color: #06364a;
}
.ride-body {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.ride-body h3 {
  font-size: 1.0625rem;
  color: var(--ink); /* cards sit inside a white-on-indigo band */
}
.ride-body p {
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.ride-foot {
  margin-top: auto;
  padding-top: var(--s-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Rate-plan picker — room booking, step 1 */
.plan-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: var(--s-3) 0 var(--s-5);
}
.plan-card {
  text-align: left;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  background: #fff;
  padding: var(--s-4);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: inherit;
  color: inherit;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.plan-card:hover {
  border-color: var(--indigo-300);
}
.plan-card[aria-pressed="true"] {
  border-color: var(--indigo-600);
  box-shadow: 0 0 0 1.5px var(--indigo-600) inset;
}
.plan-card h4 {
  margin: 0;
  font-size: 0.98rem;
  font-family: var(--font-display);
  color: var(--ink);
}
.plan-card .plan-price {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--indigo-600);
}
.plan-card .plan-price .per {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink-2);
  font-size: var(--t-xs);
}
.plan-card .plan-tag {
  font-size: var(--t-xs);
  color: var(--ink-2);
}

/* Booking-reference block — stay confirmation, in place of a QR */
.ref-block {
  padding: var(--s-5);
  border: 2px solid var(--indigo-600);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
}

/* Checkbox pills — corporate enquiry "what do you need" */
.tag-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.tag-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  font-size: var(--t-sm);
  color: var(--ink-2);
  cursor: pointer;
}
.tag-check:has(input:checked) {
  border-color: var(--indigo-600);
  color: var(--indigo-600);
  background: var(--indigo-50);
}
.tag-check input {
  accent-color: var(--indigo-600);
}

/* Offers */
.offers {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.offer {
  position: relative;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: #fff;
  border: 1.5px dashed var(--border-strong);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.offer .pct {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--indigo-600);
}
.offer .code-tag {
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.1em;
  font-size: var(--t-sm);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--indigo-50);
  color: var(--indigo-600);
  border: 1px dashed var(--indigo-300);
}

/* Weekday / weekend toggle */
.seg {
  display: inline-flex;
  padding: 4px;
  background: var(--surface-mist);
  border-radius: var(--r-pill);
  gap: 4px;
}
.seg button {
  min-height: 40px;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--ink-2);
  cursor: pointer;
}
.seg button[aria-pressed="true"] {
  background: #fff;
  color: var(--indigo-600);
  box-shadow: var(--e-1);
}

/* Promo band */
.promo {
  display: grid;
  gap: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--indigo-600);
  color: #fff;
}
@media (min-width: 860px) {
  .promo {
    grid-template-columns: 1fr 1fr;
  }
}
.promo img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
}
.promo-copy {
  padding: var(--s-7) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
  justify-content: center;
}
.promo-copy h2 {
  font-size: var(--t-h2);
}
.promo-copy p {
  color: var(--on-dark-2);
}

/* Reviews */
.quotes {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.quote {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.stars {
  display: flex;
  gap: 2px;
  color: var(--brand-amber);
}
.stars svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}
.quote blockquote {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
}
.quote cite {
  font-style: normal;
  font-size: var(--t-sm);
  color: var(--ink-3);
  font-weight: 700;
}

/* FAQ */
.faq {
  display: grid;
  gap: var(--s-2);
  max-width: 820px;
}
.faq details {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  min-height: 56px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  border-right: 2.5px solid var(--indigo-600);
  border-bottom: 2.5px solid var(--indigo-600);
  transform: rotate(45deg);
  transition: transform var(--base) var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
}
.faq p {
  padding: 0 var(--s-5) var(--s-5);
  color: var(--ink-2);
  font-size: var(--t-sm);
}

/* Sticky mobile booking bar */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(20, 22, 63, 0.1);
}
.mobile-cta .from {
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mobile-cta strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
}
.mobile-cta .btn {
  margin-left: auto;
}
@media (max-width: 720px) {
  body.show-mobile-cta .mobile-cta {
    display: flex;
  }
  body.show-mobile-cta {
    padding-bottom: 84px;
  }
}

/* ==========================================================================
   11. Promotional imagery — showcase rows, brand band, gallery, social strip
   ========================================================================== */

/* Alternating image / copy showcase rows */
.showcase {
  display: grid;
  gap: var(--s-5);
}
.show-row {
  display: grid;
  gap: var(--s-5);
  align-items: center;
}
@media (min-width: 900px) {
  .show-row {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--s-7);
  }
  .show-row.is-flipped .show-media {
    order: 2;
  }
}
.show-media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--e-2);
  aspect-ratio: 16 / 10;
  background: var(--surface-mist);
}
.show-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.show-media .stamp {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-4);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.35) 40%, rgba(240, 248, 255, 0.15) 70%, rgba(255, 255, 255, 0.5) 100%);
  backdrop-filter: blur(8px) saturate(180%) contrast(108%);
  -webkit-backdrop-filter: blur(8px) saturate(180%) contrast(108%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-top: 1.5px solid #ffffff;
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  box-shadow: 0 10px 24px -4px rgba(11, 80, 120, 0.15), inset 0 1.5px 1px #ffffff, inset 0 -1px 1.5px rgba(90, 199, 239, 0.2);
  display: grid;
  gap: 2px;
}
.show-media .stamp b {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--indigo-600);
}
.show-media .stamp span {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.show-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
}
.show-copy h3 {
  font-size: var(--t-h2);
}
.show-copy ul {
  display: grid;
  gap: var(--s-2);
}
.show-copy li {
  display: flex;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.show-copy li .icon {
  color: var(--green-ink);
  margin-top: 2px;
}

/* Full-bleed brand band, using the guidelines' own line */
.brand-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--indigo-600);
  color: #fff;
  padding-block: var(--s-8);
}
.brand-band > img,
.brand-band > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.brand-band > .shell {
  position: relative;
  z-index: 2;
}
.brand-band::after {
  z-index: -1;
}
.brand-band img.art {
  position: absolute;
  right: -4%;
  bottom: -14%;
  width: min(620px, 62%);
  opacity: 0.9;
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 860px) {
  .brand-band > img,
.brand-band > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.brand-band > .shell {
  position: relative;
  z-index: 2;
}
.brand-band::after {
  z-index: -1;
}
.brand-band img.art {
    right: -18%;
    bottom: -10%;
    width: 90%;
    opacity: 0.28;
  }
}
.brand-band h2 {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
  max-width: 12ch;
}
.brand-band p {
  color: var(--on-dark-2);
  max-width: 44ch;
  margin-top: var(--s-4);
}
.brand-band .btn {
  margin-top: var(--s-5);
}

/* Bento gallery */
.bento {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) {
  .bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 196px;
    grid-auto-flow: dense;
  }
  .bento .tile-lg {
    grid-column: span 2;
    grid-row: span 2;
  }
  .bento .tile-wide {
    grid-column: span 2;
  }
}
.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-mist);
  aspect-ratio: 16 / 10;
  display: block;
}
@media (min-width: 760px) {
  .tile {
    aspect-ratio: auto;
  }
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease);
}
.tile:hover img {
  transform: scale(1.06);
}
.tile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--s-5) var(--s-4) var(--s-3);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-sm);
  background: linear-gradient(to top, rgba(20, 22, 63, 0.82), rgba(20, 22, 63, 0));
}

/* Social strip */
.social {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 760px) {
  .social {
    grid-template-columns: repeat(6, 1fr);
  }
}
.social a {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-mist);
}
.social img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease), filter var(--fast) var(--ease);
}
.social a:hover img {
  transform: scale(1.07);
}
.social a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--indigo-900);
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}
.social a:hover::after {
  opacity: 0.18;
}
.social-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.social-head .handle {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--indigo-600);
}

/* ==========================================================================
   12. Photography treatment — keeps the brand, not the photo, in charge
   ========================================================================== */

/* Every photo sits on indigo, so any gap or slow load still reads as brand. */
.ph {
  position: relative;
  background: var(--indigo-600);
  overflow: hidden;
}
.ph > img,
.ph > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Indigo scrim: readable text over any photograph, brand-tinted throughout. */
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 22, 63, 0.86) 0%,
    rgba(30, 33, 100, 0.42) 42%,
    rgba(46, 49, 146, 0.14) 100%
  );
  pointer-events: none;
}
.ph.is-plain::after {
  background: linear-gradient(to top, rgba(20, 22, 63, 0.55), rgba(46, 49, 146, 0.05) 60%);
}

/* Full indigo duotone — used where the brand must dominate outright. */
.duotone > img,
.duotone > video {
  mix-blend-mode: luminosity;
  opacity: 0.55;
  filter: contrast(1.08);
}
.duotone::after {
  background: linear-gradient(
    115deg,
    rgba(20, 22, 63, 0.92) 0%,
    rgba(46, 49, 146, 0.72) 45%,
    rgba(46, 49, 146, 0.42) 100%
  );
}

/* Amber corner rule — the accent that stops the indigo going flat. */
.ph.has-rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 74px;
  height: 5px;
  background: var(--brand-amber);
  z-index: 2;
}

/* Video hero */
.hero-photo > video.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero-photo::after {
  background: linear-gradient(
      104deg,
      rgba(20, 22, 63, 0.95) 0%,
      rgba(29, 32, 96, 0.88) 38%,
      rgba(46, 49, 146, 0.55) 72%,
      rgba(46, 49, 146, 0.3) 100%
    ),
    linear-gradient(to top, rgba(20, 22, 63, 0.7), transparent 45%);
}

/* Full-bleed video band */
.video-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: var(--indigo-800);
  min-height: 420px;
  display: flex;
  align-items: center;
  padding-block: var(--s-8);
}
.video-band > video,
.video-band > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.video-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Balanced so the video reads as clearly as the indigo — darkest over the
     copy column (left), lighter toward the right where it's just video. */
  background: linear-gradient(
    100deg,
    rgba(20, 22, 63, 0.62) 0%,
    rgba(46, 49, 146, 0.4) 50%,
    rgba(46, 49, 146, 0.22) 100%
  );
}
.video-band h2 {
  font-size: var(--t-h2);
  max-width: 16ch;
}
.video-band p {
  color: var(--on-dark-2);
  max-width: 46ch;
  margin-top: var(--s-3);
}
.video-band .row {
  margin-top: var(--s-5);
}

/* Ride cards now hold photographs */
.ride-media {
  background: var(--indigo-600);
}
.ride-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 22, 63, 0.5), rgba(20, 22, 63, 0) 55%);
  pointer-events: none;
}

/* Indigo section variant — used to keep brand colour dominant down the page */
.section-brand {
  background: var(--indigo-600);
  color: #fff;
}
.section-brand h2,
.section-brand h3 {
  color: #fff;
}
.section-brand .lede,
.section-brand p {
  color: var(--on-dark-2);
}
.section-brand .eyebrow {
  color: var(--on-dark-2);
}
.section-brand .tile figcaption {
  background: linear-gradient(to top, rgba(20, 22, 63, 0.9), rgba(20, 22, 63, 0));
}

@media (prefers-reduced-motion: reduce) {
  .hero-center video,
  .video-band video {
    display: none;
  }
}

/* ==========================================================================
   13. Park-site layout pass — structure modelled on how Indian park sites
   (Wonderla) sequence a homepage, rebuilt in Foggy Mountain's indigo/amber
   ========================================================================== */

/* Dark header — brand colour holds the top of the page */
.site-header.is-dark {
  background: rgba(20, 22, 63, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.site-header.is-dark .main-nav a {
  color: #ced0ea;
}
.site-header.is-dark .main-nav a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.site-header.is-dark .main-nav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.site-header.is-dark .header-phone {
  color: #fff;
}
.site-header.is-dark .brand-sub {
  color: #a6a9d0;
  border-left-color: rgba(255, 255, 255, 0.18);
}
/* .btn-ghost is indigo-on-white by definition; on the dark header that put
   indigo text on an indigo bar and "Sign in" / "Sign out" all but vanished.
   On a dark header a ghost button is the .btn-quiet treatment. */
.site-header.is-dark .btn-ghost {
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}
.site-header.is-dark .btn-ghost:hover {
  --btn-bg: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* Centred display hero */
.hero-center {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(78vh, 660px);
  display: flex;
  align-items: center;
  text-align: center;
  color: #fff;
  background: var(--indigo-800);
  padding-block: var(--s-9) var(--s-8);
}
.hero-center > img,
.hero-center > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero-center::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Balanced so the video reads as clearly as the indigo — darker only at the
     very top/bottom edges (header contrast, fact-strip contrast), lightest
     behind the headline where the video should show through. */
  background: linear-gradient(
    to bottom,
    rgba(20, 22, 63, 0.55) 0%,
    rgba(46, 49, 146, 0.32) 30%,
    rgba(46, 49, 146, 0.4) 65%,
    rgba(20, 22, 63, 0.6) 100%
  );
}
.hero-center .kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-sky);
}
.display-shout {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.94;
  font-size: clamp(2.4rem, 1rem + 6.2vw, 5.5rem);
  color: var(--brand-amber);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  margin-block: var(--s-4) var(--s-4);
}
.display-shout .line-2 {
  display: block;
  color: #fff;
}
.hero-center p.sub {
  color: #d7d9f0;
  font-size: 1.0625rem;
  max-width: 56ch;
  margin-inline: auto;
}
.hero-center .hero-actions {
  justify-content: center;
}
.hero-center .hero-facts {
  justify-content: center;
  border-top: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.hero-facts .fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.10) 100%);
  backdrop-filter: blur(10px) saturate(180%) contrast(106%);
  -webkit-backdrop-filter: blur(10px) saturate(180%) contrast(106%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-top: 1.5px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35),
              inset 0 1.5px 1px rgba(255, 255, 255, 0.45),
              inset 0 -1px 1.5px rgba(90, 199, 239, 0.25);
  font-size: 0.88rem;
  color: #ffffff;
}

/* Zone picker — the "choose your park" row, as zones */
.zone-picker {
  background: var(--indigo-900);
  color: #fff;
  padding-block: var(--s-6) var(--s-7);
}
.zone-picker .picker-label {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-amber);
  margin-bottom: var(--s-5);
}
.zone-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-3);
}
@media (max-width: 700px) {
  .zone-row {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-2);
  }
}
.zone-pick {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  text-decoration: none;
  color: #fff;
  padding: var(--s-2) 0;
  border-radius: var(--r-md);
}
.zone-pick .frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--indigo-600);
  border: 2px solid transparent;
  transition: border-color var(--fast) var(--ease), transform var(--base) var(--ease);
}
.zone-pick img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease);
}
.zone-pick:hover .frame {
  border-color: var(--brand-amber);
  transform: translateY(-3px);
}
.zone-pick:hover img {
  transform: scale(1.07);
}
.zone-pick b {
  font-family: var(--font-display);
  font-size: 0.9375rem;
}
.zone-pick span {
  font-size: var(--t-xs);
  color: #a6a9d0;
}

/* Two promo cards under the picker */
.promo-duo {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
@media (min-width: 860px) {
  .promo-duo {
    grid-template-columns: 1fr 1fr;
  }
}
.promo-card {
  display: grid;
  grid-template-columns: 1fr 132px;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
}
.promo-card h3 {
  font-size: 1.25rem;
}
.promo-card p {
  color: #b9bce0;
  font-size: var(--t-sm);
  margin-top: 4px;
}
.promo-card .btn {
  margin-top: var(--s-3);
  min-height: 42px;
}
.promo-card img {
  width: 132px;
  height: 108px;
  object-fit: cover;
  border-radius: var(--r-md);
}
@media (max-width: 560px) {
  .promo-card {
    grid-template-columns: 1fr;
  }
  .promo-card img {
    width: 100%;
    height: 120px;
  }
}

/* ==========================================================================
   Thrill Awaits / Our Rides Interactive Showcase
   Derived from Foggy Mountain Brand Indigo & Solar Amber Palette (Brand Guidelines V1.0)
   ========================================================================== */
.thrill-rides-band {
  background-color: #0e102f;
  background-image: 
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(46, 49, 146, 0.38) 0%, transparent 70%),
    radial-gradient(circle at 90% 80%, rgba(29, 32, 96, 0.35) 0%, transparent 60%);
  color: #ffffff;
  padding-block: clamp(64px, 6vw, 96px);
  position: relative;
  overflow: hidden;
}

.thrill-rides-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 166, 0, 0.45), rgba(201, 203, 233, 0.2), transparent);
}

.thrill-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}
@media (min-width: 768px) {
  .thrill-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.thrill-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--brand-amber);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.thrill-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #ffffff;
  margin: 0;
}

.thrill-sub {
  color: var(--on-dark-2);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  line-height: 1.55;
  margin: 10px 0 0;
  max-width: 580px;
}

.thrill-all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-amber);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 0;
  transition: transform 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.thrill-all-link:hover {
  color: #ffb82e;
  transform: translateX(4px);
}
.thrill-all-link .thrill-arrow {
  transition: transform 0.25s ease;
}
.thrill-all-link:hover .thrill-arrow {
  transform: translateX(3px);
}

/* Category Filter Pills */
.thrill-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.thrill-pill {
  appearance: none;
  border: 1px solid rgba(201, 203, 233, 0.18);
  background: rgba(29, 32, 96, 0.45);
  color: #c9cbe9;
  padding: 8px 22px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}
.thrill-pill:hover {
  background: rgba(46, 49, 146, 0.6);
  border-color: rgba(249, 166, 0, 0.4);
  color: #ffffff;
}
.thrill-pill.is-active,
.thrill-pill[aria-selected="true"] {
  background: var(--brand-amber);
  color: #14163f;
  border-color: var(--brand-amber);
  font-weight: 800;
  box-shadow: 0 4px 18px rgba(249, 166, 0, 0.35);
}

/* Main Two-Column Stage */
.thrill-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (min-width: 960px) {
  .thrill-stage {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
    gap: 28px;
  }
}

/* Featured Hero Card (Left) - Crystal Clear Dark Glass */
.thrill-hero-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top: 1.5px solid rgba(255, 255, 255, 0.65);
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 36%, rgba(14, 16, 47, 0.28) 70%, rgba(255, 255, 255, 0.08) 100%);
  backdrop-filter: blur(10px) saturate(180%) contrast(108%);
  -webkit-backdrop-filter: blur(10px) saturate(180%) contrast(108%);
  box-shadow: 0 24px 56px -12px rgba(4, 6, 20, 0.75),
              inset 0 1.5px 1px rgba(255, 255, 255, 0.6),
              inset 1px 0 1px rgba(255, 255, 255, 0.3),
              inset 0 -1.5px 2px rgba(90, 199, 239, 0.3);
}

.thrill-hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.thrill-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.thrill-hero-card:hover .thrill-hero-media img {
  transform: scale(1.03);
}

.thrill-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(14, 16, 47, 0.65) 0%,
    rgba(14, 16, 47, 0.1) 30%,
    rgba(14, 16, 47, 0.7) 65%,
    rgba(14, 16, 47, 0.97) 95%
  );
  pointer-events: none;
}

.thrill-hero-top {
  position: relative;
  z-index: 3;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.thrill-cat-tag {
  background: rgba(20, 22, 63, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(249, 166, 0, 0.35);
  color: var(--brand-amber);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.thrill-rating-tag {
  background: rgba(20, 22, 63, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(201, 203, 233, 0.2);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.thrill-rating-tag .star-icon {
  color: var(--brand-amber);
}

.thrill-hero-content {
  position: relative;
  z-index: 3;
  padding: 28px 28px 24px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.thrill-location-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-amber);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.thrill-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.45rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 10px;
}

.thrill-hero-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #d8daf5;
  margin: 0 0 24px;
  max-width: 540px;
}

.thrill-hero-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(201, 203, 233, 0.15);
}

.thrill-specs {
  display: flex;
  align-items: center;
  gap: 18px;
}

.thrill-spec-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #c9cbe9;
}
.thrill-spec-item svg {
  color: var(--brand-amber);
}

.thrill-cta-box {
  display: flex;
  align-items: center;
  gap: 16px;
}

.thrill-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.thrill-price .label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a1a5d6;
}
.thrill-price .amount {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

.thrill-book-btn {
  background: var(--brand-amber);
  color: #14163f;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  padding: 11px 24px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(249, 166, 0, 0.35);
  transition: all 0.22s ease;
}
.thrill-book-btn:hover {
  background: #ffb82e;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(249, 166, 0, 0.5);
  color: #101236;
}

/* Right Rail Column */
.thrill-rail-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.thrill-rail-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 540px;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 203, 233, 0.35) rgba(20, 22, 63, 0.4);
}

.thrill-rail-list::-webkit-scrollbar {
  width: 6px;
}
.thrill-rail-list::-webkit-scrollbar-track {
  background: rgba(20, 22, 63, 0.4);
  border-radius: 999px;
}
.thrill-rail-list::-webkit-scrollbar-thumb {
  background: rgba(201, 203, 233, 0.35);
  border-radius: 999px;
}
.thrill-rail-list::-webkit-scrollbar-thumb:hover {
  background: var(--brand-amber);
}

/* Individual Rail Cards - Crystal Clear Glass Tiles */
.thrill-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0.01) 70%, rgba(255, 255, 255, 0.10) 100%);
  backdrop-filter: blur(8px) saturate(180%) contrast(106%);
  -webkit-backdrop-filter: blur(8px) saturate(180%) contrast(106%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 1.5px solid rgba(255, 255, 255, 0.52);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.35),
              inset 0 1.5px 1px rgba(255, 255, 255, 0.5),
              inset 1px 0 1px rgba(255, 255, 255, 0.25),
              inset 0 -1px 1.5px rgba(90, 199, 239, 0.22);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  user-select: none;
}
.thrill-item:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0%, rgba(90, 199, 239, 0.10) 50%, rgba(255, 255, 255, 0.12) 100%);
  border-color: rgba(90, 199, 239, 0.8);
  border-top-color: #ffffff;
  box-shadow: 0 14px 34px -4px rgba(90, 199, 239, 0.32),
              inset 0 1.5px 1.5px rgba(255, 255, 255, 0.75),
              inset 0 -1.5px 2px rgba(90, 199, 239, 0.35);
  transform: translateX(4px);
}
.thrill-item:focus-visible {
  border-color: var(--brand-amber);
  box-shadow: 0 0 0 3px rgba(249, 166, 0, 0.35);
}

.thrill-item.is-active,
.thrill-item[aria-selected="true"] {
  border-color: var(--brand-amber);
  border-top-color: #ffffff;
  background: linear-gradient(135deg, rgba(249, 166, 0, 0.26) 0%, rgba(249, 166, 0, 0.08) 45%, rgba(255, 255, 255, 0.12) 100%);
  box-shadow: 0 12px 32px -4px rgba(249, 166, 0, 0.4),
              inset 0 1.5px 1.5px rgba(255, 255, 255, 0.8),
              inset 0 -1.5px 2px rgba(249, 166, 0, 0.35);
}

.thrill-thumb {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(201, 203, 233, 0.15);
  display: block;
}

.thrill-info {
  flex: 1;
  min-width: 0;
}

.thrill-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-amber);
  margin-bottom: 4px;
}
.thrill-badge-row .star {
  color: var(--brand-amber);
}

.thrill-info .name {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.thrill-info .loc {
  display: block;
  font-size: 12px;
  color: #a1a5d6;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thrill-nav-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(201, 203, 233, 0.08);
  border: 1px solid rgba(201, 203, 233, 0.14);
  color: #c9cbe9;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.22s ease;
}
.thrill-item:hover .thrill-nav-icon {
  border-color: rgba(249, 166, 0, 0.45);
  color: var(--brand-amber);
}
.thrill-item.is-active .thrill-nav-icon {
  background: var(--brand-amber);
  border-color: var(--brand-amber);
  color: #14163f;
  box-shadow: 0 2px 10px rgba(249, 166, 0, 0.4);
}

/* Hidden filtered items */
.thrill-item.is-hidden {
  display: none !important;
}

/* Transitions when hero updates */
.thrill-hero-media.is-updating img {
  opacity: 0.3;
}
.thrill-hero-content.is-updating {
  opacity: 0.4;
  transform: translateY(4px);
}

/* Marquee stat ticker */
.ticker {
  background: var(--brand-amber);
  color: #3a2600;
  overflow: hidden;
  padding-block: var(--s-3);
}
.ticker-track {
  display: flex;
  gap: var(--s-7);
  width: max-content;
  animation: ticker 34s linear infinite;
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  white-space: nowrap;
}
.ticker-item .icon {
  color: #3a2600;
}
.ticker-item em {
  font-style: normal;
  font-weight: 600;
  font-size: var(--t-sm);
  opacity: 0.78;
}
@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    gap: var(--s-5);
  }
}

/* Amber offers band */
.offers-band {
  background: var(--brand-amber);
  color: #3a2600;
  padding-block: var(--s-8);
}
.offers-band h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 1.2rem + 2.8vw, 3.3rem);
  color: #2b1c00;
}
.offers-band .lede {
  color: #5a3d00;
}
.offer-tile {
  background: #fff;
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  box-shadow: var(--e-1);
}
.offer-tile .pct {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--indigo-600);
}
.offer-tile h3 {
  font-size: 1.0625rem;
}
.offer-tile p {
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.offer-tile .code-tag {
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.1em;
  font-size: var(--t-sm);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--indigo-50);
  color: var(--indigo-600);
  border: 1px dashed var(--indigo-300);
}

/* Dining rail */
.dish-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 150px;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--s-6);
}
.dish-rail::-webkit-scrollbar {
  display: none;
}
.dish {
  scroll-snap-align: start;
}
.dish img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--r-md);
  display: block;
  border: 3px solid #fff;
  box-shadow: var(--e-1);
}
.dish figcaption {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 700;
  text-align: center;
}
.dish-rail.offset .dish:nth-child(even) {
  transform: translateY(18px);
}

/* Park comforts */
.comforts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: var(--s-4);
  text-align: center;
}
.comfort {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
}
.comfort .bubble {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--indigo-600);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12);
}
.comfort span {
  font-size: var(--t-sm);
  font-weight: 700;
  color: #fff;
}

/* ==========================================================================
   15. My bookings (guest account) — G10/G11
   ========================================================================== */
.booking-card {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-bottom: var(--s-3);
}
.booking-card__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
}
.booking-card__ref {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}
.booking-card__meta {
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.booking-card__side {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-left: auto;
}
.booking-card__price {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
}
.pill-bad {
  background: #fbe2e4;
  color: var(--crimson-ink);
}
@media (max-width: 560px) {
  .booking-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .booking-card__side {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================================================
   14. Real client media — the park's own video, self-hosted (see
   assets/video/CREDITS.md). Sizing/scrim handled by .hero-center and
   .video-band rules above — plain <video class="bg">-style elements, no
   iframe wrapper needed now that it's not a YouTube embed.
   ========================================================================== */

/* ---------- Header account chip ------------------------------------------
   Signed-in identity as an avatar + first name rather than a long text
   button. See paintAuth() in app.js: the name used to be baked into the
   "Sign out" label, which made that button the widest thing in the header
   and pushed the brand block into the nav. */
.account-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-3) 0 var(--s-1);
  min-height: 44px;
  border-radius: var(--r-pill);
  flex: none;
}
.account-chip__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-amber);
  color: var(--indigo-900);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-sm);
  flex: none;
}
.account-chip__name {
  font-weight: 700;
  font-size: var(--t-sm);
  white-space: nowrap;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-header.is-dark .account-chip {
  color: #fff;
}
@media (max-width: 1120px) {
  .account-chip__name {
    display: none; /* avatar alone once the row gets tight */
  }
  .account-chip {
    padding: 0 var(--s-1);
  }
}


/* ==========================================================================
   design-v2 prototype scaffolding, appended to the copied v1 stylesheet.
   The sample-data banner and role dock are review tools, not product.
   ========================================================================== */

/* ---------- 23. Prototype scaffolding (NOT product) ---------------------- */
/* The dock, the sample-data banner and the screen index exist to review this
   prototype. None of it is specified by the PRD; strip before any real build. */
.proto-banner {
  display: none !important;
  background: var(--indigo-900); color: var(--on-dark-2);
  font-size: var(--t-xs); text-align: center; padding: var(--s-2) var(--s-4);
}
.proto-banner strong { color: var(--brand-amber); }

.role-dock {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--s-4);
  z-index: 80; display: flex; gap: 2px; padding: var(--s-1);
  background: var(--indigo-900); border-radius: var(--r-pill);
  box-shadow: var(--shadow-3); max-width: calc(100vw - 32px); overflow-x: auto;
}
.role-dock a {
  display: flex; flex-direction: column; gap: 0; text-decoration: none;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-pill);
  color: var(--on-dark-2); font-size: var(--t-xs); font-weight: 700; white-space: nowrap;
  min-height: 44px; justify-content: center; text-align: center;
}
.role-dock a:hover { background: var(--indigo-700); color: var(--on-dark); }
.role-dock a[aria-current='true'] { background: var(--brand-amber); color: var(--indigo-900); }
.role-dock .sub { font-weight: 500; font-size: 10px; opacity: 0.85; }


/* ==========================================================================
   design-v2 overrides to the copied v1 stylesheet.

   Two structural consequences of the PRD strip:
   1. The zone filter dial is gone, so the rides band is no longer a two-column
      grid — without this the card rail inherits the 232px dial column.
   2. Scroll-reveal is disabled. In v1 content starts at opacity 0 and is
      revealed by an IntersectionObserver in app.js. A prototype gets printed,
      screenshotted and reviewed offline, so content must never depend on
      scrolling to become visible.
   ========================================================================== */

.rides-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* ---------- 23. Scroll progress track & fluid scroll reveal animations ---------- */
.scroll-progress-track {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.5px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 1000;
  pointer-events: none;
}
.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #F9A600 0%, #5AC7EF 55%, #2E3192 100%);
  box-shadow: 0 0 12px rgba(90, 199, 239, 0.7), 0 0 4px rgba(249, 166, 0, 0.8);
  transition: width 0.04s ease-out;
  will-change: width;
}

.reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.985);
  filter: blur(6px);
  transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--stagger-delay, 0ms);
  will-change: opacity, transform, filter;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Stagger fallback cascades across sections */
.tiers .tier:nth-child(1), .tier-grid .reveal:nth-child(1) { --stagger-delay: 0ms; }
.tiers .tier:nth-child(2), .tier-grid .reveal:nth-child(2) { --stagger-delay: 80ms; }
.tiers .tier:nth-child(3), .tier-grid .reveal:nth-child(3) { --stagger-delay: 160ms; }
.tiers .tier:nth-child(4), .tier-grid .reveal:nth-child(4) { --stagger-delay: 240ms; }

.info-strip .info:nth-child(1), .info-grid .reveal:nth-child(1) { --stagger-delay: 0ms; }
.info-strip .info:nth-child(2), .info-grid .reveal:nth-child(2) { --stagger-delay: 75ms; }
.info-strip .info:nth-child(3), .info-grid .reveal:nth-child(3) { --stagger-delay: 150ms; }
.info-strip .info:nth-child(4), .info-grid .reveal:nth-child(4) { --stagger-delay: 225ms; }

.faq-list .faq-item:nth-child(1), .faq-grid .reveal:nth-child(1) { --stagger-delay: 0ms; }
.faq-list .faq-item:nth-child(2), .faq-grid .reveal:nth-child(2) { --stagger-delay: 60ms; }
.faq-list .faq-item:nth-child(3), .faq-grid .reveal:nth-child(3) { --stagger-delay: 120ms; }
.faq-list .faq-item:nth-child(4), .faq-grid .reveal:nth-child(4) { --stagger-delay: 180ms; }
.faq-list .faq-item:nth-child(5), .faq-grid .reveal:nth-child(5) { --stagger-delay: 240ms; }
.faq-list .faq-item:nth-child(6), .faq-grid .reveal:nth-child(6) { --stagger-delay: 300ms; }

.gallery-grid .g-card:nth-child(1) { --stagger-delay: 0ms; }
.gallery-grid .g-card:nth-child(2) { --stagger-delay: 60ms; }
.gallery-grid .g-card:nth-child(3) { --stagger-delay: 120ms; }
.gallery-grid .g-card:nth-child(4) { --stagger-delay: 180ms; }
.gallery-grid .g-card:nth-child(5) { --stagger-delay: 240ms; }
.gallery-grid .g-card:nth-child(6) { --stagger-delay: 300ms; }
.gallery-grid .g-card:nth-child(7) { --stagger-delay: 360ms; }
.gallery-grid .g-card:nth-child(8) { --stagger-delay: 420ms; }
.gallery-grid .g-card:nth-child(9) { --stagger-delay: 480ms; }
.gallery-grid .g-card:nth-child(10) { --stagger-delay: 540ms; }

.bento .reveal:nth-child(1) { --stagger-delay: 0ms; }
.bento .reveal:nth-child(2) { --stagger-delay: 70ms; }
.bento .reveal:nth-child(3) { --stagger-delay: 140ms; }
.bento .reveal:nth-child(4) { --stagger-delay: 210ms; }
.bento .reveal:nth-child(5) { --stagger-delay: 280ms; }
.bento .reveal:nth-child(6) { --stagger-delay: 350ms; }
.bento .reveal:nth-child(7) { --stagger-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   WONDERLA THEME PARK DESIGN LANGUAGE OVERLAYS
   High-energy typography, rounded amusement-park cards, floating pill badges,
   cinematic hero, and polished micro-interactions while strictly preserving
   the original brand palette (Indigo, Amber, Crimson, Green, Sky) and DOM structure.
   ========================================================================== */

/* ---------- 1. Announcement Strip ---------- */
.announce {
  background: #090c28;
  color: #ffffff;
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: 0.01em;
  position: relative;
  z-index: 51;
}
.announce-shell {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-block: 6px;
}
.announce-left,
.announce-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.announce-badge {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(249, 166, 0, 0.2);
  color: var(--brand-amber);
  border: 1px solid rgba(249, 166, 0, 0.4);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  line-height: 1.4;
}
.announce-msg b {
  color: #ffca58;
  font-weight: 800;
}
.announce-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  background: rgba(249, 166, 0, 0.15);
  border: 1px dashed rgba(249, 166, 0, 0.6);
  color: #ffd479;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 0.76rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.announce-code:hover {
  background: rgba(249, 166, 0, 0.3);
  border-color: #ffd479;
  transform: translateY(-1px);
}
.announce-code .copy-icon {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.announce-code.is-copied {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #6ee7b7;
}
.announce-code.is-copied .copy-icon {
  opacity: 1;
}
.announce-hours {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #a6a9d0;
  font-size: 0.8rem;
}
.announce-sep {
  color: rgba(255, 255, 255, 0.3);
}
.announce-phone {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.82rem;
  transition: color 0.2s ease;
}
.announce-phone:hover {
  color: var(--brand-amber);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .announce-shell {
    justify-content: center;
    text-align: center;
  }
  .announce-right {
    display: none;
  }
}

/* ---------- 2. Header & Navigation (Glassmorphic Wonderla Theme) ---------- */
.site-header,
.site-header.is-dark {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(10, 14, 45, 0.62) 0%, rgba(10, 14, 45, 0.2) 70%, transparent 100%) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  transition: background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header.is-scrolled,
.site-header.is-dark.is-scrolled {
  background: #2E3192 !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px -8px rgba(15, 17, 56, 0.55), 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}
.header-row {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header.is-scrolled .header-row {
  height: 66px;
}

/* Brand Area */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: none;
}
.brand img {
  height: 52px;
  width: auto;
  display: block;
  transition: transform 0.25s ease;
}
.site-header.is-scrolled .brand img {
  height: 44px;
}
.brand:hover img {
  transform: scale(1.02);
}
.brand-sub {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: 12px;
  line-height: 1.25;
}
.brand-loc {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e2e4ff !important;
  white-space: nowrap;
}
.brand-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #48e59b;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
  animation: pulse-dot 2.2s infinite ease-in-out;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}
@media (max-width: 680px) {
  .brand-sub { display: none !important; }
  .brand img { height: 42px; }
}

/* Desktop Main Nav */
.main-nav {
  display: none;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}
@media (min-width: 1040px) {
  .main-nav {
    display: flex;
  }
}
.main-nav .nav-link,
.site-header.is-dark .main-nav a {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff !important;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  border: 1.5px solid transparent;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.main-nav .nav-link:hover,
.site-header.is-dark .main-nav a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
.main-nav .nav-link.is-active,
.main-nav .nav-link[aria-current="location"],
.main-nav .nav-link[aria-current="page"],
.site-header.is-dark .main-nav a[aria-current="page"] {
  color: #ffffff !important;
  background: rgba(249, 166, 0, 0.22) !important;
  border-color: #f9a600 !important;
  box-shadow: 0 0 14px rgba(249, 166, 0, 0.35), inset 0 0 6px rgba(249, 166, 0, 0.2) !important;
  font-weight: 800 !important;
}
.nav-badge {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #f9a600 0%, #ea8500 100%);
  color: #211300;
  padding: 2px 6px;
  border-radius: 999px;
  line-height: 1.2;
}

/* Header Action Buttons */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.btn-book-nav {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #f9a600 0%, #ea8500 100%);
  color: #211300 !important;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 0 18px;
  height: 42px;
  border-radius: var(--r-pill);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(249, 166, 0, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.btn-book-nav:hover {
  background: linear-gradient(135deg, #ffb826 0%, #f99c00 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(249, 166, 0, 0.5);
  color: #140b00 !important;
}
.btn-book-nav .icon {
  width: 16px;
  height: 16px;
}
.btn-nav-auth {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 0 16px;
  height: 42px;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-nav-auth:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}
@media (max-width: 460px) {
  .btn-nav-auth { display: none; }
}

/* Mobile Hamburger Toggle */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}
@media (min-width: 1040px) {
  .nav-toggle { display: none; }
}
.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}
.nav-toggle .toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Navigation Drawer */
.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(10, 13, 40, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(249, 166, 0, 0.3);
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.75);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  z-index: 48;
  animation: mobileNavIn 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mobileNavIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.mobile-nav[hidden] {
  display: none !important;
}
.mobile-nav-inner {
  padding: var(--s-4) var(--s-3) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.mobile-nav-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--r-md);
  font-size: 0.82rem;
  font-weight: 600;
  color: #6ee7b7;
}
.mobile-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mobile-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.2s ease;
}
.mobile-link:hover, .mobile-link:active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(4px);
}
.mobile-link-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(249, 166, 0, 0.14);
  color: var(--brand-amber);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.mobile-link-icon .icon {
  width: 18px;
  height: 18px;
}
.mobile-link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.mobile-link-text .title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
}
.mobile-link-text .sub {
  font-size: 0.78rem;
  color: #a6a9d0;
}
.mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-btn-book {
  width: 100%;
  justify-content: center;
  height: 48px;
  font-size: 0.95rem;
}
.mobile-phone-btn,
.mobile-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #d0d3f2;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}
.mobile-phone-btn:hover,
.mobile-signin-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.nav-backdrop {
  position: fixed;
  inset: 0;
  top: 120px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 46;
}
.nav-backdrop[hidden] {
  display: none !important;
}

/* Section scroll-margin to prevent sticky navbar from hiding content */
section[id],
div[id].view {
  scroll-margin-top: 86px;
}

/* User Profile Menu */
.user-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.user-avatar-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.user-avatar-btn:hover {
  transform: scale(1.08);
}
.user-avatar-btn:focus-visible {
  outline: 2px solid var(--brand-amber);
  outline-offset: 2px;
}
.user-avatar-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f9a600 0%, #ea580c 100%);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(249, 166, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.user-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 240px;
  background: #ffffff;
  color: #0f172a;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 10px;
  z-index: 100;
  animation: dropdown-pop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dropdown-pop {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.user-dropdown-header {
  padding: 10px 14px 8px;
}
.user-dropdown-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.3;
}
.user-dropdown-sub {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}
.user-dropdown-divider {
  height: 1px;
  background: #edf0f8;
  margin: 6px 0;
}
.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.user-dropdown-item:hover {
  background: #f3f4fb;
  color: var(--indigo-600);
}
.user-dropdown-item.is-danger {
  color: #e11d48;
}
.user-dropdown-item.is-danger:hover {
  background: #fff1f2;
  color: #be123c;
}
.user-dropdown-item .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  color: #64748b;
}
.user-dropdown-item:hover .icon {
  color: currentColor;
}

/* ---------- 3. Cinematic Hero (Wonderla High-Thrill Format) ---------- */
.hero-center {
  position: relative;
  overflow: hidden;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: center;
  text-align: center;
  color: #ffffff;
  background: var(--indigo-900);
  margin-top: -80px;
  padding-top: 140px;
  padding-bottom: 72px;
}
.hero-center::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(11, 14, 45, 0.45) 0%,
    rgba(20, 22, 63, 0.28) 32%,
    rgba(20, 22, 63, 0.42) 68%,
    rgba(11, 14, 45, 0.88) 100%
  );
}
.hero-center .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-pill);
  padding: 7px 22px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  margin-bottom: 22px;
}
.hero-center .kicker .icon {
  color: var(--brand-sky);
}
.display-shout {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.98;
  font-size: clamp(2.4rem, 1.2rem + 6.2vw, 5.2rem);
  color: var(--brand-amber);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
  margin: 0 0 20px 0;
}
.display-shout .line-2 {
  display: block;
  color: #ffffff;
  margin-top: 6px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
}
.hero-center p.sub {
  color: #e2e5f8;
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem);
  font-weight: 400;
  line-height: 1.62;
  max-width: 58ch;
  margin-inline: auto;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.hero-center .hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
}
.hero-center .hero-actions .btn-cta {
  min-height: 56px;
  padding: 0 34px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  background: var(--brand-amber);
  color: #2e1c00;
  box-shadow: 0 8px 26px rgba(249, 166, 0, 0.42);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-center .hero-actions .btn-cta:hover {
  background: #ffb826;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(249, 166, 0, 0.55);
}
.hero-center .hero-actions .btn-cta:hover .icon {
  transform: translateX(4px);
}
.hero-center .hero-actions .btn-cta .icon {
  transition: transform 0.2s ease;
}
.hero-center .hero-actions .btn-quiet {
  min-height: 56px;
  padding: 0 32px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: #ffffff;
  transition: all 0.25s ease;
}
.hero-center .hero-actions .btn-quiet:hover {
  background: #ffffff;
  color: var(--indigo-900);
  border-color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

/* Hero Floating Glass Facts Bar */
.hero-center .hero-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
  padding-top: 0;
  border-top: none;
}
.hero-center .fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(11, 14, 45, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  padding: 9px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #e2e5f8;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.hero-center .fact strong {
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 800;
}
.hero-center .fact .icon {
  color: var(--brand-sky);
}

/* ---------- 4. Marquee Ticker Strip ---------- */
.marquee-strip {
  background: #090c24;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  padding: 16px 0;
  color: #edf0fc;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
}
.marquee-track:hover {
  animation-play-state: paused;
}
.marquee-track .dot {
  color: var(--brand-amber);
  font-size: 1.3em;
  text-shadow: 0 0 8px rgba(249, 166, 0, 0.6);
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- 5. Rides & Stays Carousel (Wonderla Attraction Cards) ---------- */
.rides-band {
  background: linear-gradient(180deg, #1d2060 0%, #2e3192 100%) !important;
  color: #ffffff;
  padding-block: 88px;
  position: relative;
  overflow: hidden;
}
.rides-head {
  text-align: center;
  margin-bottom: 44px;
}
.rides-head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem);
  color: #ffffff;
}
.rides-head p {
  color: #d7d9f5;
  font-size: 1.0625rem;
  font-weight: 500;
  margin-top: 8px;
}
.rides-band .ride-rail {
  padding-block: 8px 16px;
}
.ride {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 34px -8px rgba(0, 0, 0, 0.3);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}
.ride:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 54px -10px rgba(0, 0, 0, 0.42);
  border-color: rgba(255, 255, 255, 0.4);
}
.ride-media {
  position: relative;
  aspect-ratio: 16 / 10.5;
  background: #14163f;
  overflow: hidden;
}
.ride-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ride:hover .ride-media img {
  transform: scale(1.08);
}
.ride-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 17, 51, 0.65) 0%, transparent 60%);
  pointer-events: none;
}
/* Floating Wonderla Badges */
.ride-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
}
.badge {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
}
.badge-family {
  background: var(--brand-green);
  color: #143004;
}
.badge-thrill {
  background: var(--brand-crimson);
  color: #ffffff;
}
.badge-chill {
  background: var(--brand-sky);
  color: #07384c;
}
.badge {
  background: var(--brand-amber);
  color: #2e1c00;
}
.ride-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #ffffff;
  flex: 1;
}
.ride-body h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.ride-body p {
  font-size: 0.9375rem;
  color: #4a4e7a;
  line-height: 1.55;
  margin: 0;
}
.ride-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #edf0f8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ride-foot span:first-child {
  color: var(--indigo-600);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ride-foot span:first-child::after {
  content: "→";
  font-size: 1.15em;
  transition: transform 0.2s ease;
}
.ride:hover .ride-foot span:first-child::after {
  transform: translateX(4px);
}
.ride-foot span:last-child {
  background: var(--indigo-50);
  color: var(--indigo-600);
  border: 1px solid var(--indigo-100);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Carousel Control Arrows */
.ride-rail-nav {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}
.ride-rail-nav .icon-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.25s ease;
}
.ride-rail-nav .icon-btn:hover:not([disabled]) {
  background: #ffffff;
  color: var(--indigo-800);
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: #ffffff;
}

/* ---------- 6. Showcase Rows ("How Booking Works") ---------- */
.section {
  padding-block: 88px;
}
.section-sunk {
  background: #f7f8fd;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.3rem + 2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 10px;
}
/* Wonderla Pill Eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  border-radius: var(--r-pill);
  background: #e0f3fb;
  color: #0b6e92;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid #b8e6f7;
  margin-bottom: 8px;
}
.eyebrow::before {
  display: none !important;
}
#worlds {
  background: linear-gradient(180deg, #ffffff 0%, #f3fafe 45%, #e8f6fd 100%);
  border-bottom: 1px solid #d2edf8;
}
/* ==========================================================================
   How Booking Works — Expanding-Shrinking Looping Carousel
   ========================================================================== */
.booking-section {
  overflow: hidden;
  padding-block: 88px 104px;
  position: relative;
  background: linear-gradient(180deg, #eaf6fd 0%, #def1fa 40%, #e8f5fd 100%);
}

/* Ambient Light Glow 1: Highland Sky Aura (Top-Left) */
.booking-section::before {
  content: '';
  position: absolute;
  top: 10%;
  left: -6%;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 199, 239, 0.42) 0%, rgba(90, 199, 239, 0.12) 50%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Ambient Light Glow 2: Golden Hour Solar Amber (Top-Right) */
.booking-section::after {
  content: '';
  position: absolute;
  top: 20%;
  right: -4%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 166, 0, 0.24) 0%, rgba(255, 184, 28, 0.08) 50%, transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.booking-section > .shell {
  position: relative;
  z-index: 1;
}

.booking-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 44px;
}
.booking-head .eyebrow {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: var(--brand-indigo);
  box-shadow: 0 4px 12px rgba(11, 80, 120, 0.05);
}
.booking-head-text h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.3rem + 2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #14163f;
  margin-top: 10px;
}
.booking-head-text .lede {
  font-size: 1.0625rem;
  color: #334155;
  margin-top: 8px;
  max-width: 58ch;
}
.booking-head-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.booking-arrow-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: var(--indigo-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 18px rgba(11, 80, 120, 0.08), inset 0 1px 1.5px rgba(255, 255, 255, 0.95);
}
.booking-arrow-btn:hover {
  background: var(--brand-indigo);
  border-color: var(--brand-indigo);
  color: #ffffff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 24px rgba(46, 49, 146, 0.28);
}
.booking-arrow-btn:active {
  transform: translateY(0) scale(0.98);
}

/* Stage & Track */
.booking-stage {
  position: relative;
  width: 100%;
}
.booking-stage::before {
  content: '';
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 960px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 32% 42%, rgba(90, 199, 239, 0.28) 0%, rgba(46, 49, 146, 0.14) 45%, rgba(249, 166, 0, 0.12) 72%, transparent 85%);
  filter: blur(65px);
  pointer-events: none;
  z-index: 0;
}
.booking-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 740px;
  position: relative;
  z-index: 1;
}
.booking-track .booking-card {
  margin: 0;
}

/* Base Card Styling with Clear Glass & Butter-Smooth Motion */
.booking-card {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
  transition: flex-basis 0.6s cubic-bezier(0.25, 1, 0.5, 1),
              width 0.6s cubic-bezier(0.25, 1, 0.5, 1),
              height 0.6s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.45s ease,
              border-color 0.45s ease,
              background 0.45s ease;
  outline: none;
  will-change: transform, width, height, opacity;
  contain: paint;
}
.booking-card:focus-visible {
  border-color: var(--brand-indigo);
  box-shadow: 0 0 0 3px rgba(46, 49, 146, 0.35);
}

/* ================== SHRUNK / SIDE CARDS (Strict Equal Dimensions & Clear Glass) ================== */
.booking-card:not(.is-active) {
  flex: 0 0 250px;
  width: 250px;
  height: 480px;
  min-height: 480px;
  max-height: 480px;
  align-self: center;
  opacity: 0.92;
  transform: scale(0.93);
  cursor: pointer;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 32%, rgba(240, 248, 255, 0.03) 62%, rgba(255, 255, 255, 0.22) 100%);
  backdrop-filter: blur(8px) saturate(180%) contrast(108%);
  -webkit-backdrop-filter: blur(8px) saturate(180%) contrast(108%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-top: 1.5px solid rgba(255, 255, 255, 0.95);
  border-left: 1.2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 14px 36px -6px rgba(11, 80, 120, 0.12),
              0 4px 12px -2px rgba(46, 49, 146, 0.06),
              inset 0 1.5px 1px 0 rgba(255, 255, 255, 1),
              inset 1px 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1.5px 2px 0 rgba(90, 199, 239, 0.25);
}
.booking-card:not(.is-active):hover {
  opacity: 1;
  transform: scale(0.96) translateY(-4px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.22) 30%, rgba(240, 250, 255, 0.06) 65%, rgba(255, 255, 255, 0.32) 100%);
  border-color: rgba(90, 199, 239, 0.9);
  border-top-color: #ffffff;
  box-shadow: 0 22px 48px -6px rgba(90, 199, 239, 0.28),
              0 6px 16px -2px rgba(46, 49, 146, 0.10),
              inset 0 1.5px 1.5px 0 #ffffff,
              inset 1px 0 1px 0 rgba(255, 255, 255, 0.7),
              inset 0 -2px 3px 0 rgba(90, 199, 239, 0.35);
}

/* Smooth Crossfade Views (Zero layout snapping or crushed content) */
.card-shrunk-view {
  position: absolute;
  inset: 0;
  width: 250px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
  transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}
.booking-card:not(.is-active) .card-shrunk-view {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  transition-delay: 0.08s;
}
.booking-card.is-active .card-shrunk-view {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  transition-delay: 0s;
}

.card-expanded-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1.18fr;
  gap: 28px;
  align-items: center;
  padding: 28px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97);
  transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}
.booking-card:not(.is-active) .card-expanded-view {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
  transition-delay: 0s;
}
.booking-card.is-active .card-expanded-view {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  transition-delay: 0.12s;
}

.shrunk-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex: none;
}
.shrunk-num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #0284c7 0%, var(--brand-indigo) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.shrunk-tag {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-indigo);
  background: rgba(90, 199, 239, 0.16);
  border: 1px solid rgba(90, 199, 239, 0.35);
  padding: 3px 9px;
  border-radius: var(--r-pill);
}
.shrunk-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: #14163f;
  line-height: 1.25;
  min-height: 2.85rem;
  margin-bottom: 4px;
  flex: none;
}
.shrunk-sub {
  font-size: 0.8125rem;
  color: #334155;
  line-height: 1.35;
  min-height: 2.3rem;
  margin-bottom: 12px;
  font-weight: 500;
  flex: none;
}
.shrunk-media {
  width: 100%;
  height: 140px;
  border-radius: 18px;
  overflow: hidden;
  margin-top: auto;
  position: relative;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 14px rgba(11, 80, 120, 0.08);
  flex: none;
}
.shrunk-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.booking-card:not(.is-active):hover .shrunk-media img {
  transform: scale(1.06);
}
.shrunk-hint-pill {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-indigo);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(11, 80, 120, 0.04);
  transition: all 0.25s ease;
  flex: none;
  align-self: flex-start;
}
.booking-card:not(.is-active):hover .shrunk-hint-pill {
  background: var(--brand-indigo);
  color: #ffffff;
  border-color: var(--brand-indigo);
}
.booking-card:not(.is-active):hover .shrunk-hint-pill svg {
  transform: translateX(3px);
}
.shrunk-hint-pill svg {
  transition: transform 0.25s ease;
}

/* ================== EXPANDED / CENTER ACTIVE CARD (Optical Clear Glass) ================== */
.booking-card.is-active {
  flex: 0 0 clamp(360px, 58vw, 780px);
  width: clamp(360px, 58vw, 780px);
  height: 720px;
  min-height: 720px;
  max-height: 720px;
  align-self: center;
  opacity: 1;
  transform: scale(1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.18) 30%, rgba(240, 248, 255, 0.04) 62%, rgba(255, 255, 255, 0.28) 100%);
  backdrop-filter: blur(9px) saturate(180%) contrast(108%);
  -webkit-backdrop-filter: blur(9px) saturate(180%) contrast(108%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-top: 1.5px solid #ffffff;
  border-left: 1.2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 24px 56px -10px rgba(11, 80, 120, 0.15),
              0 8px 24px -2px rgba(46, 49, 146, 0.08),
              inset 0 1.5px 1.5px 0 #ffffff,
              inset 1.5px 0 1.5px 0 rgba(255, 255, 255, 0.6),
              inset 0 -1.5px 2.5px 0 rgba(90, 199, 239, 0.28);
  z-index: 2;
  cursor: default;
}

.card-exp-media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(20, 22, 63, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
}
.card-exp-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.booking-card.is-active:hover .card-exp-media img {
  transform: scale(1.05);
}
.card-exp-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(20, 22, 63, 0.76);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.card-exp-badge .badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-amber);
  box-shadow: 0 0 10px var(--brand-amber);
}
.card-exp-trust-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--brand-indigo);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 16px rgba(11, 80, 120, 0.12);
}
.card-exp-trust-badge .trust-icon {
  color: #0284c7;
}

.card-exp-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.exp-step-pill {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-indigo);
  background: rgba(90, 199, 239, 0.16);
  border: 1px solid rgba(90, 199, 239, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px 13px;
  border-radius: var(--r-pill);
  width: fit-content;
  margin-bottom: 12px;
}
.exp-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #14163f;
  line-height: 1.22;
  margin-bottom: 12px;
}
.exp-lede {
  font-size: 0.9375rem;
  line-height: 1.62;
  color: #334155;
  margin-bottom: 20px;
  font-weight: 450;
}
.exp-lede em {
  font-style: normal;
  font-weight: 800;
  color: var(--brand-indigo);
}
.exp-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.exp-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.45;
}
.exp-list .list-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #059669;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 1px;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.1);
}
.exp-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px;
  margin-top: 4px;
}
.exp-actions .btn-cta {
  min-height: 50px;
  padding: 0 26px;
  font-size: 0.9375rem;
  font-weight: 800;
  background: linear-gradient(135deg, #F9A600 0%, #FFB81C 100%);
  box-shadow: 0 8px 24px -4px rgba(249, 166, 0, 0.42), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.exp-actions .btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -4px rgba(249, 166, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
.exp-price-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(11, 80, 120, 0.05);
}
.exp-price-badge .price-lbl {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.exp-price-badge .price-val {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--brand-indigo);
}

/* ================== HOW BOOKING WORKS MICRO-WIDGETS & BADGES ================== */
.shrunk-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
  width: fit-content;
  box-shadow: 0 2px 6px rgba(11, 80, 120, 0.05);
}
.shrunk-status-pill .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-dot 2s infinite ease-in-out;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

.card-exp-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}
.exp-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #059669;
}
.pulse-ring {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-dot 2s infinite ease-in-out;
}

.card-exp-rating-chip {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(20, 22, 63, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.card-exp-rating-chip .star-icon {
  color: var(--brand-amber);
}

/* Micro-Widget Box Container - Clear Glass Lens */
.booking-widget-box {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.22) 32%, rgba(240, 248, 255, 0.06) 62%, rgba(255, 255, 255, 0.32) 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-top: 1.5px solid #ffffff;
  border-left: 1.2px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px) saturate(180%) contrast(108%);
  -webkit-backdrop-filter: blur(8px) saturate(180%) contrast(108%);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 10px 28px -6px rgba(11, 80, 120, 0.08),
              inset 0 1.5px 1px #ffffff,
              inset 0 -1px 1.5px rgba(90, 199, 239, 0.2);
}

/* Widget Date Row & Pills */
.widget-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.widget-row-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
.widget-date-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.widget-date-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 5px 11px;
  border-radius: 10px;
  border: 1px solid rgba(203, 213, 225, 0.85);
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}
.widget-date-pill:hover {
  border-color: var(--brand-indigo);
  background: #ffffff;
}
.widget-date-pill.is-active {
  background: rgba(46, 49, 146, 0.08);
  border-color: var(--brand-indigo);
  box-shadow: 0 2px 8px rgba(46, 49, 146, 0.12);
}
.widget-date-pill .d-day {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--brand-indigo);
  line-height: 1.2;
}
.widget-date-pill .d-status {
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.2;
}
.widget-date-pill .d-status.open {
  color: #059669;
}
.widget-date-pill .d-status.fast {
  color: #d97706;
}

/* Widget Tiers Row */
.widget-tiers-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.widget-tier-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(11, 80, 120, 0.04);
}
.tier-card-left {
  display: flex;
  flex-direction: column;
}
.tier-name {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  color: #14163f;
}
.tier-desc {
  font-size: 0.65rem;
  color: #64748b;
  line-height: 1.2;
}
.tier-price {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--brand-indigo);
}

/* Widget Perks Row */
.widget-perks-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.perk-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #334155;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 4px 9px;
  border-radius: var(--r-pill);
}
.perk-chip svg {
  color: #059669;
}
.perk-chip.is-highlight {
  background: rgba(249, 166, 0, 0.12);
  border-color: rgba(249, 166, 0, 0.35);
  color: #92400e;
}
.perk-chip.is-highlight svg {
  color: #d97706;
}

/* Card 0 (Passes) Widget Fine-Tuning */
#bcard-0 .booking-widget-box {
  padding: 13px 14px;
  gap: 10px;
  margin-bottom: 16px;
}
#bcard-0 .widget-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#bcard-0 .widget-date-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  flex: 1;
}
#bcard-0 .widget-date-pill {
  padding: 4px 8px;
}
#bcard-0 .widget-tier-card {
  padding: 7px 10px;
}

/* Widget Amenities Grid (Card 2) */
.widget-amenities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.amenity-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 6px 10px;
  box-shadow: 0 2px 6px rgba(11, 80, 120, 0.04);
}
.amenity-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.amenity-text {
  display: flex;
  flex-direction: column;
}
.amenity-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  color: #14163f;
  line-height: 1.2;
}
.amenity-sub {
  font-size: 0.65rem;
  color: #64748b;
  line-height: 1.2;
}

/* Widget Quote Box (Card 2) */
.widget-quote-box {
  background: linear-gradient(135deg, rgba(235, 247, 254, 0.75) 0%, rgba(255, 255, 255, 0.85) 100%);
  border: 1px solid rgba(90, 199, 239, 0.3);
  border-radius: 12px;
  padding: 8px 12px;
  position: relative;
}
.quote-icon {
  color: var(--brand-sky);
  opacity: 0.6;
  margin-bottom: 2px;
}
.quote-text {
  font-size: 0.76rem;
  font-style: italic;
  color: #1e293b;
  line-height: 1.38;
  margin: 0 0 2px 0;
}
.quote-author {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--brand-indigo);
}

/* Digital Pass Widget (Card 3) - Dark Smoked Glass */
.digital-pass-card {
  background: linear-gradient(135deg, rgba(20, 24, 68, 0.75) 0%, rgba(14, 16, 47, 0.88) 100%);
  border: 1px solid rgba(90, 199, 239, 0.4);
  border-top: 1.5px solid rgba(255, 255, 255, 0.65);
  border-left: 1.2px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border-radius: 14px;
  padding: 14px;
  color: #ffffff;
  box-shadow: 0 12px 28px -4px rgba(11, 14, 45, 0.4),
              inset 0 1.5px 1px rgba(255, 255, 255, 0.5),
              inset 0 -1px 1.5px rgba(90, 199, 239, 0.25);
  position: relative;
  overflow: hidden;
}
.digital-pass-card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(90, 199, 239, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.pass-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
  margin-bottom: 12px;
}
.pass-brand {
  display: flex;
  align-items: center;
  gap: 7px;
}
.pass-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-amber);
  box-shadow: 0 0 8px var(--brand-amber);
}
.pass-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
}
.pass-gate-tag {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: rgba(90, 199, 239, 0.2);
  color: var(--brand-sky);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(90, 199, 239, 0.4);
}
.pass-card-body {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pass-qr-box {
  background: #ffffff;
  padding: 8px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  flex: none;
}
.pass-qr-matrix {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scan-laser {
  position: absolute;
  left: -20%;
  right: -20%;
  height: 2px;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444, 0 0 14px #ef4444;
  animation: laser-scan 2.2s infinite ease-in-out;
}
@keyframes laser-scan {
  0%, 100% { top: 0%; opacity: 0.8; }
  50% { top: 95%; opacity: 1; }
}
.pass-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pass-id {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand-amber);
  letter-spacing: 0.04em;
}
.pass-access {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff;
}
.pass-status {
  font-size: 0.65rem;
  color: #94a3b8;
}

/* 3-Step Journey Timeline */
.pass-journey-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 4px;
}
.journey-step {
  display: flex;
  align-items: center;
  gap: 6px;
}
.j-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-indigo);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.j-text {
  font-size: 0.72rem;
  font-weight: 700;
  color: #1e293b;
}
.j-arrow {
  color: #94a3b8;
  font-size: 0.8rem;
}

/* ================== 3-SECOND TIMER PILLS DOCK ================== */
.booking-pills-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  padding: 7px;
  border-radius: var(--r-pill);
  width: fit-content;
  margin-inline: auto;
  box-shadow: 0 12px 36px -8px rgba(11, 80, 120, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.95);
  position: relative;
  z-index: 2;
}
.booking-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.booking-pill-btn:hover {
  background: rgba(255, 255, 255, 0.8);
  color: var(--brand-indigo);
}
.booking-pill-btn.is-active {
  background: var(--brand-indigo);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(46, 49, 146, 0.25);
}
.booking-pill-btn .pill-num {
  font-weight: 900;
  font-size: 0.8125rem;
  opacity: 0.7;
}
.booking-pill-btn.is-active .pill-num {
  color: var(--brand-amber);
  opacity: 1;
}
.booking-pill-btn .pill-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
  display: none;
}
.booking-pill-btn.is-active .pill-progress {
  display: block;
}
.booking-pill-btn.is-active .pill-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--brand-amber);
  box-shadow: 0 0 6px var(--brand-amber);
}

/* Responsive adjustments */
@media (max-width: 1080px) {
  .booking-card:not(.is-active) {
    flex: 0 0 210px;
  }
}
@media (max-width: 860px) {
  .booking-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .booking-track {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-height: 968px;
  }
  .booking-card:not(.is-active) {
    display: none;
  }
  .booking-card.is-active {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: auto;
    max-height: none;
    margin: 0;
  }
  .booking-card.is-active .card-expanded-view {
    position: relative;
    inset: auto;
    min-width: 0;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
    height: auto;
  }
  .card-exp-media {
    min-height: 220px;
    height: 220px;
  }
  .booking-pills-bar {
    flex-wrap: wrap;
    border-radius: 20px;
    padding: 8px;
  }
  .exp-actions {
    flex-wrap: wrap;
  }
  .exp-actions .btn-cta {
    width: 100%;
    justify-content: center;
  }
  .exp-price-badge {
    width: 100%;
    text-align: center;
    align-items: center;
  }
}

@media (max-width: 440px) {
  .booking-track {
    min-height: 1152px;
  }
}

/* ---------- 7. Scenic Brand Band ---------- */
.brand-band {
  padding-block: 96px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, rgba(20, 22, 63, 0.92) 0%, rgba(46, 49, 146, 0.78) 50%, rgba(20, 22, 63, 0.9) 100%);
}
.brand-band .eyebrow.on-dark {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  margin-inline: auto;
}
.brand-band h2 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.2rem + 3.8vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-top: 16px;
  max-width: 16ch;
  margin-inline: auto;
}
.brand-band p {
  color: #e2e5f8;
  font-size: 1.125rem;
  font-weight: 400;
  max-width: 52ch;
  margin-inline: auto;
  margin-top: 14px;
}
.brand-band .btn-cta {
  margin-inline: auto;
  margin-top: 32px;
  min-height: 54px;
  padding: 0 32px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 800;
  background: var(--brand-amber);
  color: #2e1c00;
  box-shadow: 0 8px 28px rgba(249, 166, 0, 0.42);
  transition: all 0.25s ease;
}
.brand-band .btn-cta:hover {
  background: #ffb826;
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(249, 166, 0, 0.55);
}
.brand-band .btn-cta:hover .icon {
  transform: translateX(4px);
}
.brand-band .btn-cta .icon {
  transition: transform 0.2s ease;
}

/* ---------- 8. Ticket & Stay Pricing Tiers ---------- */
#tickets {
  background: linear-gradient(180deg, #edf8fd 0%, #daf0fa 50%, #cdebf8 100%);
  position: relative;
  border-top: 1px solid #c2e5f5;
  border-bottom: 1px solid #b8e0f2;
  overflow: hidden;
}
#tickets::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 960px;
  height: 420px;
  background: radial-gradient(ellipse at center, rgba(90, 199, 239, 0.45) 0%, rgba(90, 199, 239, 0) 70%);
  pointer-events: none;
}
#tickets::after {
  content: '';
  position: absolute;
  bottom: -40px;
  right: 15%;
  width: 550px;
  height: 320px;
  background: radial-gradient(ellipse, rgba(249, 166, 0, 0.16) 0%, rgba(46, 49, 146, 0.10) 50%, transparent 75%);
  filter: blur(55px);
  pointer-events: none;
}
.tiers {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
  margin-top: 36px;
  position: relative;
  z-index: 1;
}
.tier {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.16) 32%, rgba(240, 248, 255, 0.04) 62%, rgba(255, 255, 255, 0.25) 100%);
  backdrop-filter: blur(8px) saturate(180%) contrast(108%);
  -webkit-backdrop-filter: blur(8px) saturate(180%) contrast(108%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-top: 1.5px solid rgba(255, 255, 255, 0.98);
  border-left: 1.2px solid rgba(255, 255, 255, 0.82);
  border-radius: 28px;
  padding: 36px 28px 30px;
  box-shadow: 0 16px 36px -6px rgba(11, 110, 146, 0.12),
              0 4px 14px -2px rgba(46, 49, 146, 0.06),
              inset 0 1.5px 1px 0 rgba(255, 255, 255, 1),
              inset 1px 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1.5px 2px 0 rgba(90, 199, 239, 0.22);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease,
              border-color 0.3s ease,
              background 0.3s ease;
}
.tier:hover {
  transform: translateY(-6px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.25) 30%, rgba(245, 251, 255, 0.08) 65%, rgba(255, 255, 255, 0.36) 100%);
  box-shadow: 0 24px 50px -8px rgba(90, 199, 239, 0.32),
              0 6px 18px -2px rgba(46, 49, 146, 0.1),
              inset 0 1.5px 1.5px 0 #ffffff,
              inset 1px 0 1px 0 rgba(255, 255, 255, 0.7),
              inset 0 -2px 3px 0 rgba(90, 199, 239, 0.35);
  border-color: rgba(90, 199, 239, 0.9);
  border-top-color: #ffffff;
}
.tier.is-featured {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 249, 235, 0.24) 30%, rgba(255, 255, 255, 0.06) 62%, rgba(255, 249, 235, 0.32) 100%);
  backdrop-filter: blur(9px) saturate(180%) contrast(108%);
  -webkit-backdrop-filter: blur(9px) saturate(180%) contrast(108%);
  border: 1px solid rgba(249, 166, 0, 0.7);
  border-top: 1.5px solid rgba(255, 255, 255, 1);
  border-left: 1.2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 20px 48px -6px rgba(249, 166, 0, 0.3),
              0 8px 24px rgba(11, 110, 146, 0.08),
              inset 0 1.5px 1.5px 0 #ffffff,
              inset 1px 0 1px 0 rgba(255, 255, 255, 0.6),
              inset 0 -1.5px 2px 0 rgba(249, 166, 0, 0.28);
  transform: scale(1.02);
  position: relative;
}
.tier.is-featured:hover {
  transform: scale(1.02) translateY(-6px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 249, 235, 0.35) 30%, rgba(255, 255, 255, 0.12) 65%, rgba(255, 249, 235, 0.45) 100%);
  box-shadow: 0 28px 60px -6px rgba(249, 166, 0, 0.4),
              0 8px 24px -2px rgba(46, 49, 146, 0.12),
              inset 0 1.5px 2px 0 #ffffff,
              inset 0 -2px 3px 0 rgba(249, 166, 0, 0.4);
}
.tier-flag {
  position: absolute;
  top: -14px;
  left: 24px;
  background: linear-gradient(135deg, #f9a600 0%, #ea8500 100%);
  color: #2e1c00;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: var(--r-pill);
  box-shadow: 0 4px 14px rgba(249, 166, 0, 0.4);
}
.tier h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 2px;
}
.tier .small.muted {
  font-size: 0.85rem;
  color: #6d719b;
  font-weight: 500;
  margin-bottom: 16px;
}
.tier p:nth-of-type(2) {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--border);
}
.tier .amount {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--indigo-600);
  line-height: 1;
}
.tier .amount.is-text {
  font-size: 1.85rem;
}
.tier .per {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #6d719b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 6px;
}
.tier ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.tier li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.45;
}
.tier li .icon {
  color: var(--green-ink);
  background: #eef7e2;
  border-radius: 50%;
  padding: 3px;
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
}

/* ---------- 9. Bento Grid Gallery ---------- */
#gallery {
  background: linear-gradient(180deg, #dcf1fa 0%, #e9f5fc 60%, #f4fafe 100%);
  border-bottom: 1px solid #cfeaf7;
}
.bento {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  margin-top: 36px;
}
@media (min-width: 640px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 240px;
    gap: 22px;
  }
  .bento .tile-lg {
    grid-column: span 2;
    grid-row: span 2;
  }
  .bento .tile-wide {
    grid-column: span 2;
    grid-row: span 1;
  }
}
.bento .tile {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(11, 110, 146, 0.12);
  border: 1.5px solid #cae7f6;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  margin: 0;
  background: #111;
  min-height: 220px;
}
.bento .tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(11, 110, 146, 0.22);
  border-color: #5ac7ef;
}
.bento .tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento .tile:hover img {
  transform: scale(1.07);
}
.bento .tile figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 20px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  background: linear-gradient(to top, rgba(11, 14, 45, 0.92) 0%, rgba(11, 14, 45, 0.45) 60%, transparent 100%);
  color: #ffffff;
}

/* ---------- 10. Plan Your Visit (Wonderla Convenience Grid) ---------- */
#plan {
  background: linear-gradient(180deg, #edf8fd 0%, #def2fa 100%);
  border-bottom: 1px solid #c8e8f6;
  position: relative;
  overflow: hidden;
}
#plan::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 10%;
  width: 650px;
  height: 420px;
  background: radial-gradient(ellipse, rgba(90, 199, 239, 0.25) 0%, rgba(46, 49, 146, 0.08) 50%, transparent 75%);
  filter: blur(65px);
  pointer-events: none;
}
.info-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 36px;
  position: relative;
  z-index: 1;
}
.info {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.15) 32%, rgba(240, 248, 255, 0.03) 62%, rgba(255, 255, 255, 0.24) 100%);
  backdrop-filter: blur(8px) saturate(180%) contrast(108%);
  -webkit-backdrop-filter: blur(8px) saturate(180%) contrast(108%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-top: 1.5px solid rgba(255, 255, 255, 0.95);
  border-left: 1.2px solid rgba(255, 255, 255, 0.8);
  border-radius: 22px;
  padding: 28px 24px;
  box-shadow: 0 14px 34px -6px rgba(11, 80, 120, 0.10),
              0 3px 10px -2px rgba(46, 49, 146, 0.05),
              inset 0 1.5px 1px 0 rgba(255, 255, 255, 1),
              inset 1px 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1.5px 2px 0 rgba(90, 199, 239, 0.2);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.info:hover {
  transform: translateY(-4px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.24) 30%, rgba(242, 251, 255, 0.06) 65%, rgba(255, 255, 255, 0.34) 100%);
  border-color: rgba(90, 199, 239, 0.85);
  border-top-color: #ffffff;
  box-shadow: 0 20px 44px -6px rgba(11, 80, 120, 0.18),
              0 6px 16px -2px rgba(46, 49, 146, 0.08),
              inset 0 1.5px 1.5px 0 #ffffff,
              inset 1px 0 1px 0 rgba(255, 255, 255, 0.7),
              inset 0 -2px 3px 0 rgba(90, 199, 239, 0.3);
}
.info > .icon-lg {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(225, 244, 252, 0.3) 100%);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  color: #0b6e92;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-top: 1.5px solid #ffffff;
  padding: 12px;
  box-shadow: 0 6px 16px rgba(11, 80, 120, 0.08),
              inset 0 1.5px 1px #ffffff,
              inset 0 -1px 1.5px rgba(90, 199, 239, 0.25);
}
.info h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
}
.info p {
  font-size: 0.9rem;
  color: #4a4e7a;
  line-height: 1.55;
  margin: 0;
}

/* ---------- 11. Visitor FAQs Accordion ---------- */
#faq {
  background: linear-gradient(180deg, #e2f4fb 0%, #edf8fd 50%, #f7fcfe 100%);
  position: relative;
  overflow: hidden;
}
#faq::before {
  content: '';
  position: absolute;
  top: 15%;
  right: 10%;
  width: 700px;
  height: 480px;
  background: radial-gradient(ellipse, rgba(90, 199, 239, 0.22) 0%, rgba(46, 49, 146, 0.07) 50%, transparent 75%);
  filter: blur(65px);
  pointer-events: none;
}
.faq-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 880px;
  margin: 36px auto 0;
  position: relative;
  z-index: 1;
}
.faq-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.16) 32%, rgba(240, 248, 255, 0.03) 62%, rgba(255, 255, 255, 0.22) 100%);
  backdrop-filter: blur(8px) saturate(180%) contrast(108%);
  -webkit-backdrop-filter: blur(8px) saturate(180%) contrast(108%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-top: 1.5px solid rgba(255, 255, 255, 0.95);
  border-left: 1.2px solid rgba(255, 255, 255, 0.8);
  border-radius: 18px;
  box-shadow: 0 8px 24px -4px rgba(11, 80, 120, 0.08),
              0 2px 8px -2px rgba(46, 49, 146, 0.04),
              inset 0 1.5px 1px 0 rgba(255, 255, 255, 1),
              inset 1px 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1.5px 2px 0 rgba(90, 199, 239, 0.2);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.25) 30%, rgba(244, 251, 255, 0.06) 65%, rgba(255, 255, 255, 0.34) 100%);
  border-color: rgba(90, 199, 239, 0.85);
  border-top-color: #ffffff;
  box-shadow: 0 14px 32px -4px rgba(11, 80, 120, 0.15),
              0 4px 12px -2px rgba(46, 49, 146, 0.08),
              inset 0 1.5px 1.5px 0 #ffffff,
              inset 1px 0 1px 0 rgba(255, 255, 255, 0.7),
              inset 0 -2px 3px 0 rgba(90, 199, 239, 0.3);
}
.faq-item[open] {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.28) 30%, rgba(240, 249, 255, 0.08) 65%, rgba(255, 255, 255, 0.38) 100%);
  border-color: rgba(46, 49, 146, 0.55);
  border-top-color: #ffffff;
  box-shadow: 0 16px 38px -4px rgba(46, 49, 146, 0.16),
              0 6px 16px -2px rgba(11, 80, 120, 0.08),
              inset 0 1.5px 1.5px 0 #ffffff,
              inset 1px 0 1px 0 rgba(255, 255, 255, 0.7),
              inset 0 -1.5px 2.5px 0 rgba(90, 199, 239, 0.3);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  color: var(--indigo-600);
}
.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  color: #475569;
  border-radius: 50%;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item[open] summary::after {
  content: '−';
  color: var(--indigo-600);
  background: var(--indigo-50);
  border-color: var(--indigo-200);
  font-weight: 700;
}
.faq-content {
  padding: 0 26px 24px 26px;
}
.faq-content p {
  margin: 0;
  color: #4a4e7a;
  font-size: 0.95rem;
  line-height: 1.7;
}
.faq-content strong {
  color: var(--ink);
}

/* ---------- 12. Footer (Wonderla Midnight Navy Theme) ---------- */
.site-footer {
  background: #0b0e2d;
  color: #ffffff;
  padding-block: 76px 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer h3 {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-amber);
  margin-bottom: 20px;
}
.site-footer ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer a {
  color: #b9bce0;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.site-footer p {
  color: #a6a9d0;
  font-size: 0.9rem;
  line-height: 1.6;
}
.site-footer .footer-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  margin-top: 48px;
  color: #7f83b2;
  font-size: 0.8125rem;
}

/* ---------- 13. Mobile Sticky CTA ---------- */
.mobile-cta {
  background: rgba(11, 14, 45, 0.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 14px 20px;
}
.mobile-cta .from {
  color: #a6a9d0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mobile-cta strong.num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--brand-amber);
}
.mobile-cta .btn-cta {
  background: var(--brand-amber);
  color: #2e1c00;
  font-family: var(--font-display);
  font-weight: 800;
  border-radius: var(--r-pill);
  padding: 0 24px;
  min-height: 44px;
  box-shadow: 0 4px 16px rgba(249, 166, 0, 0.35);
}

/* ==========================================================================
   OPTION 1: INTERACTIVE FILTERED MASONRY GALLERY & GLASS LIGHTBOX
   Specular glass cards, category filter pills, metadata chips, and dark
   luminous fullscreen lightbox with keyboard & arrow navigation.
   ========================================================================== */

#gallery {
  position: relative;
  overflow: hidden;
}
#gallery::before {
  content: '';
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 980px;
  height: 520px;
  background: radial-gradient(ellipse at center, rgba(90, 199, 239, 0.24) 0%, rgba(46, 49, 146, 0.09) 45%, rgba(249, 166, 0, 0.08) 70%, transparent 85%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

/* ---------- 1. Gallery Filters Navigation ---------- */
.gallery-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}
.g-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  color: #1e293b;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(11, 80, 120, 0.05), inset 0 1px 1px #ffffff;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}
.g-filter-btn:hover {
  background: #ffffff;
  color: var(--brand-indigo);
  border-color: rgba(90, 199, 239, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(46, 49, 146, 0.14);
}
.g-filter-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--brand-amber), 0 8px 20px rgba(46, 49, 146, 0.15);
}
.g-filter-btn.is-active {
  background: var(--brand-indigo);
  color: #ffffff;
  border-color: var(--brand-indigo);
  box-shadow: 0 8px 28px rgba(46, 49, 146, 0.32);
}
.g-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.07);
  color: inherit;
  transition: all 0.25s ease;
}
.g-filter-btn.is-active .g-filter-count {
  background: var(--brand-amber);
  color: #14163f;
}

/* ---------- 2. Gallery Bento Grid ---------- */
.gallery-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  grid-auto-rows: 270px;
  position: relative;
  z-index: 1;
}

@media (max-width: 1120px) {
  .gallery-bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 260px;
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .gallery-bento-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 16px;
  }
}

/* Base Bento Card - Optical Clear Glass */
.bento-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 32%, rgba(240, 248, 255, 0.03) 62%, rgba(255, 255, 255, 0.22) 100%);
  backdrop-filter: blur(8px) saturate(180%) contrast(108%);
  -webkit-backdrop-filter: blur(8px) saturate(180%) contrast(108%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-top: 1.5px solid rgba(255, 255, 255, 0.95);
  border-left: 1.2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 14px 34px -6px rgba(11, 80, 120, 0.10),
              0 3px 10px -2px rgba(46, 49, 146, 0.05),
              inset 0 1.5px 1px 0 rgba(255, 255, 255, 1),
              inset 1px 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1.5px 2px 0 rgba(90, 199, 239, 0.2);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease,
              background 0.4s ease;
  margin: 0;
  outline: none;
  display: flex;
  flex-direction: column;
}

.bento-card.g-card {
  cursor: pointer;
}

.bento-card:hover {
  transform: translateY(-5px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.24) 30%, rgba(240, 250, 255, 0.06) 65%, rgba(255, 255, 255, 0.32) 100%);
  box-shadow: 0 22px 48px -6px rgba(11, 80, 120, 0.18),
              0 6px 18px rgba(46, 49, 146, 0.10),
              inset 0 1.5px 1.5px 0 #ffffff,
              inset 1px 0 1px 0 rgba(255, 255, 255, 0.7),
              inset 0 -2px 3px 0 rgba(90, 199, 239, 0.32);
  border-color: rgba(90, 199, 239, 0.85);
  border-top-color: #ffffff;
}

.bento-card:focus-visible {
  box-shadow: 0 0 0 3px var(--brand-amber), 0 16px 36px rgba(11, 80, 120, 0.16);
}

.bento-card.is-filtered-out {
  display: none !important;
}

/* Bento Grid Spans */
.bento-span-2 {
  grid-column: span 2;
}

.bento-video-card {
  grid-column: span 2;
  grid-row: span 2;
  background: #0b0e2d;
}

@media (max-width: 640px) {
  .bento-span-2,
  .bento-video-card {
    grid-column: span 1;
    grid-row: auto;
    min-height: 280px;
  }
  .bento-video-card {
    min-height: 380px;
  }
}

/* Media Wrappers */
.bento-video-wrap,
.bento-img-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #090c28;
}

.bento-video-elem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bento-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card:hover .bento-img-wrap img {
  transform: scale(1.06);
}

/* Gradients for text contrast */
.bento-video-gradient,
.bento-img-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 14, 45, 0.28) 0%, rgba(11, 14, 45, 0.05) 30%, rgba(11, 14, 45, 0.75) 70%, rgba(11, 14, 45, 0.95) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Topbar for badges and controls */
.bento-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  pointer-events: none;
}

.bento-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(18, 20, 56, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.bento-badge-live {
  background: rgba(46, 49, 146, 0.85);
  border-color: rgba(90, 199, 239, 0.4);
}

.live-indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: pulseGreen 1.8s infinite;
}

@keyframes pulseGreen {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

.bento-metric-chip {
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--brand-indigo);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 14px rgba(11, 80, 120, 0.12);
}

/* Video Controls */
.bento-video-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.bento-ctrl-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(20, 22, 63, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bento-ctrl-btn:hover {
  background: var(--brand-amber);
  color: #14163f;
  border-color: var(--brand-amber);
  transform: scale(1.08);
}

/* Center play pulse (visual hint on video card) */
.bento-center-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.play-pulse-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(46, 49, 146, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 255, 255, 0.8);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  padding-left: 3px;
}

.bento-video-card:hover .bento-center-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}

/* Bottom Content for Media Cards */
.bento-bottom-content {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bento-cat-tag {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-amber);
}

.bento-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

.bento-video-card .bento-title {
  font-size: 1.35rem;
}

.bento-desc {
  font-size: 0.8rem;
  color: #cbd5e1;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bento-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.bento-link {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-sky);
  transition: transform 0.2s ease, color 0.2s ease;
}

.bento-card:hover .bento-link {
  color: var(--brand-amber);
  transform: translateX(3px);
}

.bento-chip {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--r-pill);
  padding: 3px 8px;
}

/* ---------- 3. Interactive Bento Micro-Widgets - Optical Clear Glass ---------- */
.bento-widget-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.18) 32%, rgba(240, 248, 255, 0.04) 62%, rgba(255, 255, 255, 0.26) 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-top: 1.5px solid rgba(255, 255, 255, 0.98);
  border-left: 1.2px solid rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px) saturate(180%) contrast(108%);
  -webkit-backdrop-filter: blur(8px) saturate(180%) contrast(108%);
  box-shadow: 0 14px 34px -6px rgba(11, 80, 120, 0.10),
              0 3px 10px -2px rgba(46, 49, 146, 0.05),
              inset 0 1.5px 1px 0 rgba(255, 255, 255, 1),
              inset 1px 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1.5px 2px 0 rgba(90, 199, 239, 0.22);
  padding: 22px;
  display: flex;
  flex-direction: column;
}

/* Atmosphere & Sensor Widget */
.bento-sensor-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.60) 0%, rgba(224, 242, 254, 0.22) 32%, rgba(240, 249, 255, 0.04) 62%, rgba(255, 255, 255, 0.32) 100%);
  border-color: rgba(90, 199, 239, 0.65);
  border-top: 1.5px solid #ffffff;
  border-left: 1.2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 14px 34px -6px rgba(2, 132, 199, 0.14),
              0 3px 10px -2px rgba(46, 49, 146, 0.05),
              inset 0 1.5px 1px 0 #ffffff,
              inset 1px 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1.5px 2px 0 rgba(90, 199, 239, 0.3);
}
.bento-sensor-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}
.sensor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sensor-pulse-group {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
}
.sensor-radar-ring {
  position: absolute;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--brand-sky);
  animation: radarPing 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.sensor-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0284c7;
  position: relative;
  z-index: 1;
}
@keyframes radarPing {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}
.sensor-badge-lbl {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0369a1;
  text-transform: uppercase;
}
.sensor-alt-pill {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--brand-indigo);
  background: rgba(46, 49, 146, 0.08);
  border: 1px solid rgba(46, 49, 146, 0.2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.sensor-main-temp {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-block: 8px;
}
.temp-val {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  color: #0c4a6e;
  line-height: 1;
  letter-spacing: -0.04em;
}
.temp-sub {
  display: flex;
  flex-direction: column;
}
.temp-cond {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: #0369a1;
}
.temp-hint {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 500;
}
.sensor-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 14px;
}
.sensor-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.m-lbl {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
}
.m-val {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  color: #1e293b;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.m-val.aqi-good {
  color: #059669;
}
.sensor-footer-note {
  font-size: 0.65rem;
  color: #94a3b8;
  font-weight: 600;
  text-align: right;
  margin-top: 4px;
}

/* Reviews & Rating Widget - Clear Glass */
.bento-review-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62) 0%, rgba(254, 243, 199, 0.24) 32%, rgba(255, 251, 235, 0.05) 62%, rgba(255, 255, 255, 0.35) 100%);
  border-color: rgba(249, 166, 0, 0.6);
  border-top: 1.5px solid #ffffff;
  border-left: 1.2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 14px 34px -6px rgba(249, 166, 0, 0.18),
              0 3px 10px -2px rgba(46, 49, 146, 0.05),
              inset 0 1.5px 1px 0 #ffffff,
              inset 1px 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1.5px 2px 0 rgba(249, 166, 0, 0.25);
}
.bento-review-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}
.review-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.review-stars-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.review-stars {
  color: #d97706;
  font-size: 0.88rem;
  letter-spacing: 1px;
}
.review-rating-num {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 900;
  color: #92400e;
}
.review-count-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #78350f;
  background: rgba(217, 119, 6, 0.12);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.review-quote-text {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #451a03;
  margin: 8px 0;
  font-style: italic;
  font-weight: 500;
}
.review-author-row {
  margin-top: auto;
}
.author-avatar-chip {
  display: flex;
  align-items: center;
  gap: 8px;
}
.avatar-initials {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-indigo);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
}
.author-info {
  display: flex;
  flex-direction: column;
}
.author-name {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  color: #14163f;
}
.author-tag {
  font-size: 0.65rem;
  font-weight: 700;
  color: #059669;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Soundscape Widget - Clear Glass */
.bento-audio-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.60) 0%, rgba(237, 233, 254, 0.22) 32%, rgba(245, 243, 255, 0.04) 62%, rgba(255, 255, 255, 0.32) 100%);
  border-color: rgba(147, 51, 234, 0.55);
  border-top: 1.5px solid #ffffff;
  border-left: 1.2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 14px 34px -6px rgba(147, 51, 234, 0.15),
              0 3px 10px -2px rgba(46, 49, 146, 0.05),
              inset 0 1.5px 1px 0 #ffffff,
              inset 1px 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1.5px 2px 0 rgba(147, 51, 234, 0.25);
}
.bento-audio-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}
.audio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.audio-badge-lbl {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #6b21a8;
  text-transform: uppercase;
}
.audio-status-pill {
  font-size: 0.68rem;
  font-weight: 700;
  color: #6b21a8;
  background: rgba(147, 51, 234, 0.1);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.audio-main {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: 6px;
}
.audio-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(147, 51, 234, 0.12);
  color: #6b21a8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.audio-info {
  display: flex;
  flex-direction: column;
}
.audio-title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: #3b0764;
}
.audio-sub {
  font-size: 0.7rem;
  color: #7e22ce;
  font-weight: 500;
}
/* Audio Visualizer Bars */
.audio-wave-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 26px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 8px;
  margin-bottom: 8px;
}
.sound-bar {
  width: 4px;
  height: var(--bar-h);
  background: #7e22ce;
  border-radius: 2px;
  transition: height 0.2s ease;
}
.audio-wave-bars.is-playing .sound-bar {
  animation: barBounce 0.9s ease-in-out infinite alternate;
}
.audio-wave-bars.is-playing .sound-bar:nth-child(2) { animation-delay: 0.15s; }
.audio-wave-bars.is-playing .sound-bar:nth-child(3) { animation-delay: 0.3s; }
.audio-wave-bars.is-playing .sound-bar:nth-child(4) { animation-delay: 0.45s; }
.audio-wave-bars.is-playing .sound-bar:nth-child(5) { animation-delay: 0.2s; }
.audio-wave-bars.is-playing .sound-bar:nth-child(6) { animation-delay: 0.35s; }
.audio-wave-bars.is-playing .sound-bar:nth-child(7) { animation-delay: 0.5s; }
@keyframes barBounce {
  0% { height: 20%; }
  100% { height: 95%; }
}
.bento-audio-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--brand-indigo);
  color: #ffffff;
  border: none;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}
.bento-audio-toggle-btn:hover {
  background: #1e2270;
  box-shadow: 0 4px 14px rgba(46, 49, 146, 0.3);
  transform: translateY(-1px);
}

/* Park Scale Metrics Widget - Clear Glass */
.bento-stats-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62) 0%, rgba(220, 252, 231, 0.22) 32%, rgba(240, 253, 244, 0.04) 62%, rgba(255, 255, 255, 0.32) 100%);
  border-color: rgba(34, 197, 94, 0.5);
  border-top: 1.5px solid #ffffff;
  border-left: 1.2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 14px 34px -6px rgba(34, 197, 94, 0.14),
              0 3px 10px -2px rgba(46, 49, 146, 0.05),
              inset 0 1.5px 1px 0 #ffffff,
              inset 1px 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1.5px 2px 0 rgba(34, 197, 94, 0.25);
}
.bento-stats-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}
.stats-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.stats-badge-lbl {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #15803d;
  text-transform: uppercase;
}
.stats-tag-pill {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 800;
  color: #15803d;
  background: rgba(34, 197, 94, 0.15);
  padding: 2px 7px;
  border-radius: var(--r-pill);
}
.stats-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.stats-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 12px;
}
.stats-num {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 900;
  color: var(--brand-indigo);
  min-width: 40px;
}
.stats-detail {
  display: flex;
  flex-direction: column;
}
.stats-detail strong {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  color: #14163f;
  line-height: 1.2;
}
.stats-detail span {
  font-size: 0.68rem;
  color: #64748b;
  font-weight: 500;
}

/* ---------- 4. Sleek Minimal Full-Screen Media Overlay ---------- */
.gallery-overlay,
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s ease;
  user-select: none;
}

.gallery-overlay:not([hidden]),
.gallery-lightbox:not([hidden]) {
  opacity: 1;
  visibility: visible;
}

/* Full-Screen Deep Frosted Backdrop */
.overlay-backdrop,
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 18, 0.88);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  cursor: pointer;
  z-index: 1;
}

/* Floating Top HUD */
.overlay-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
  pointer-events: none;
}

.overlay-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.overlay-badge {
  font-family: var(--font-display, inherit);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-sky, #5AC7EF);
}

.overlay-meta-sep {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.75rem;
}

.overlay-counter {
  font-family: var(--font-display, inherit);
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums;
}

/* Minimal Close Button */
.overlay-close-btn,
.lightbox-close-btn {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.overlay-close-btn:hover,
.lightbox-close-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
  transform: scale(1.08);
}

.overlay-close-btn:focus-visible,
.lightbox-close-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--brand-sky, #5AC7EF);
}

/* Floating Navigation Chevrons */
.overlay-nav-btn,
.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.overlay-nav-btn.prev,
.lightbox-nav-btn.prev {
  left: 28px;
}

.overlay-nav-btn.next,
.lightbox-nav-btn.next {
  right: 28px;
}

.overlay-nav-btn:hover,
.lightbox-nav-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.36);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.overlay-nav-btn:active,
.lightbox-nav-btn:active {
  transform: translateY(-50%) scale(0.96);
}

.overlay-nav-btn:focus-visible,
.lightbox-nav-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--brand-sky, #5AC7EF);
}

/* Center Stage (Pure, Frameless Media Canvas) */
.overlay-stage,
.lightbox-main {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 100px 92px;
  min-height: 0;
  pointer-events: none;
}

.overlay-media-wrap,
.lightbox-img-wrap {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: transparent;
  border: none;
  box-shadow: none;
}

.overlay-img,
.lightbox-img-wrap img {
  max-width: min(88vw, 1260px);
  max-height: calc(100vh - 184px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.12);
  display: block;
  transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.overlay-video {
  max-width: min(88vw, 1260px);
  max-height: calc(100vh - 184px);
  width: auto;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.12);
  outline: none;
  background: #000;
  display: block;
}

/* Floating Bottom Caption HUD */
.overlay-bottom-hud {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: auto;
  max-width: min(92vw, 840px);
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  background: rgba(14, 18, 38, 0.78);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  padding: 10px 18px 10px 24px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.3s ease;
}

.overlay-caption-block {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.overlay-title,
.lightbox-caption h3 {
  font-family: var(--font-display, inherit);
  font-size: 0.9375rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
}

.overlay-caption-sep {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.75rem;
  flex: none;
}

.overlay-desc,
.lightbox-caption p {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}

.overlay-cta-block {
  flex: none;
  display: flex;
  align-items: center;
}

.overlay-book-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #5AC7EF 0%, #2E3192 100%);
  color: #ffffff;
  font-family: var(--font-display, inherit);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 14px rgba(46, 49, 146, 0.35);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.overlay-book-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(90, 199, 239, 0.45);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Responsive Adaptations for Mobile & Tablet */
@media (max-width: 820px) {
  .overlay-topbar {
    height: 60px;
    padding: 0 16px;
  }
  .overlay-close-btn,
  .lightbox-close-btn {
    width: 38px;
    height: 38px;
  }
  .overlay-stage,
  .lightbox-main {
    padding: 62px 14px 120px;
  }
  .overlay-nav-btn,
  .lightbox-nav-btn {
    width: 42px;
    height: 42px;
  }
  .overlay-nav-btn.prev,
  .lightbox-nav-btn.prev {
    left: 10px;
  }
  .overlay-nav-btn.next,
  .lightbox-nav-btn.next {
    right: 10px;
  }
  .overlay-bottom-hud {
    width: calc(100vw - 28px);
    max-width: none;
    border-radius: 18px;
    padding: 12px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    bottom: 14px;
  }
  .overlay-caption-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .overlay-caption-sep {
    display: none;
  }
  .overlay-desc,
  .lightbox-caption p {
    white-space: normal;
    max-width: 100%;
  }
  .overlay-book-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Parkside Comforts — Amenities Conveyor & Showcase
   ========================================================================== */
.comforts-section {
  position: relative;
  background: linear-gradient(180deg, #273bbd 0%, #1f2ca5 52%, #192488 100%);
  color: #ffffff;
  padding: clamp(64px, 8vw, 108px) 0 clamp(68px, 8.5vw, 112px);
  overflow: hidden;
  contain: paint;
}

.comforts-section::before {
  content: '';
  position: absolute;
  top: -15%;
  left: 8%;
  width: 580px;
  height: 580px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 199, 239, 0.22) 0%, transparent 68%);
  pointer-events: none;
  filter: blur(45px);
}

.comforts-section::after {
  content: '';
  position: absolute;
  bottom: -20%;
  right: 10%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 204, 0, 0.16) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(50px);
}

.comforts-head {
  text-align: center;
  max-width: 840px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.comforts-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 1.6rem + 2.8vw, 3.8rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 14px;
  line-height: 1.1;
  text-shadow: 0 2px 14px rgba(10, 15, 60, 0.35);
}

.comforts-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 58ch;
  letter-spacing: 0.01em;
}

/* Conveyor Stage & Track */
.comforts-conveyor-wrap {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
  overflow: hidden;
  padding: 16px 0 24px;
  user-select: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  z-index: 2;
}

.comforts-conveyor-wrap:active {
  cursor: grabbing;
}

.comforts-track {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  padding: 10px 32px;
  box-sizing: border-box;
}

/* Individual Comfort Badges */
.comfort-item {
  flex: 0 0 154px;
  width: 154px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.comfort-item:hover {
  transform: translateY(-8px);
}

.comfort-bubble {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(10, 16, 68, 0.28),
              0 2px 6px rgba(10, 16, 68, 0.12),
              inset 0 1.5px 1px #ffffff;
  position: relative;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.comfort-item:hover .comfort-bubble {
  box-shadow: 0 18px 40px rgba(10, 16, 68, 0.38),
              0 0 0 4px rgba(255, 255, 255, 0.35),
              inset 0 1.5px 1px #ffffff;
  transform: scale(1.05);
}

.comfort-icon {
  width: 80px;
  height: 80px;
  display: block;
  pointer-events: none;
}

.comfort-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  white-space: normal;
  max-width: 140px;
  text-shadow: 0 1px 3px rgba(10, 15, 60, 0.45);
  display: block;
  letter-spacing: 0.01em;
}

/* Yellow Pill CTA */
.comforts-cta-wrap {
  text-align: center;
  margin-top: clamp(34px, 4.5vw, 52px);
  position: relative;
  z-index: 2;
}

.comforts-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 44px;
  border-radius: 9999px;
  background: #ffd000;
  background: linear-gradient(135deg, #ffd400 0%, #ffbe00 100%);
  color: #1a2266;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(255, 190, 0, 0.45),
              0 2px 6px rgba(15, 22, 75, 0.18);
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.25s ease,
              filter 0.2s ease;
  cursor: pointer;
  border: none;
  outline: none;
}

.comforts-cta-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 38px rgba(255, 190, 0, 0.58),
              0 4px 10px rgba(15, 22, 75, 0.25);
  filter: brightness(1.03);
  color: #12184d;
}

.comforts-cta-btn:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 6px 18px rgba(255, 190, 0, 0.35);
}

.comforts-cta-btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* Mobile & Tablet Optimizations */
@media (max-width: 860px) {
  .comforts-section {
    padding: 56px 0 60px;
  }
  .comfort-item {
    flex: 0 0 128px;
    width: 128px;
    gap: 12px;
  }
  .comfort-bubble {
    width: 106px;
    height: 106px;
  }
  .comfort-icon {
    width: 62px;
    height: 62px;
  }
  .comfort-label {
    font-size: 0.95rem;
    max-width: 128px;
  }
  .comforts-track {
    gap: 22px;
    padding: 6px 20px;
  }
  .comforts-cta-btn {
    padding: 14px 34px;
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .comforts-track {
    transition: none !important;
  }
}

/* ================= DESI DELIGHTS ================= */
.desi-delights-section {
  overflow: hidden;
  padding: 80px 0;
  background-color: var(--surface);
}

.desi-delights-shell {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding-left: max(24px, calc((100% - 1200px) / 2));
  position: relative;
}

/* Optional yellow squiggly curve in background */
.desi-delights-shell::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 1px solid var(--brand-amber);
  transform: translate(-30%, -50%);
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}

.desi-delights-left {
  flex: 0 0 320px;
  position: relative;
  z-index: 2;
}

.desi-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.5rem + 2.5vw, 4.5rem);
  font-weight: 900;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--text-base);
  margin-bottom: 32px;
  letter-spacing: -0.02em;
}

.btn-desi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-amber);
  color: var(--text-base);
  font-family: var(--font-ui);
  font-weight: 700;
  padding: 16px 40px;
  border-radius: 9999px;
  text-decoration: none;
  font-size: 1rem;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease;
  border: none;
  white-space: nowrap;
}

.btn-desi:hover {
  transform: translateY(-2px);
  background-color: #f5c324;
}

.desi-delights-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 2;
}

.desi-track-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
  mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
}

.desi-track {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
}

.desi-card {
  width: 150px;
  height: 150px;
  border-radius: 16px;
  background: #ffffff;
  padding: 8px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.desi-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.4s ease;
}

.desi-card:hover img {
  transform: scale(1.05);
}

/* 
 * Smooth marquee animation using negative translation 
 * 10px is half of the 20px gap between cards
 */
@keyframes desi-marquee-rtl {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(calc(-50% - 10px), 0, 0); }
}

@keyframes desi-marquee-ltr {
  0% { transform: translate3d(calc(-50% - 10px), 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.desi-rtl {
  animation: desi-marquee-rtl 20s linear infinite;
}

.desi-ltr {
  animation: desi-marquee-ltr 20s linear infinite;
}

@media (max-width: 900px) {
  .desi-delights-section {
    padding: 60px 0;
  }
  .desi-delights-shell {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding: 0 24px;
  }
  .desi-delights-left {
    flex: none;
    text-align: center;
  }
  .desi-eyebrow {
    font-size: 3rem;
    margin-bottom: 24px;
  }
  .desi-card {
    width: 130px;
    height: 130px;
    padding: 6px;
  }
}

/* ================= PLAN YOUR VISIT (GLASS) ================= */
#plan {
  position: relative;
  overflow: hidden;
  background: var(--indigo-900) !important;
  color: #fff;
  padding: 100px 0;
}

#plan::before,
#plan::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
  pointer-events: none;
}

#plan::before {
  width: 700px;
  height: 700px;
  background: rgba(249, 166, 0, 0.15);
  top: -150px;
  left: -200px;
}

#plan::after {
  width: 600px;
  height: 600px;
  background: rgba(90, 199, 239, 0.15);
  bottom: -150px;
  right: -100px;
}

#plan .shell {
  position: relative;
  z-index: 2;
  max-width: 1400px !important;
}

#plan .section-head {
  text-align: center;
  margin-bottom: 60px;
}

#plan .section-head .eyebrow {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--brand-amber) !important;
  padding: 8px 20px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

#plan .section-head h2 {
  color: #fff !important;
  font-size: 3rem;
}

#plan .info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 32px;
}

#plan .info {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.02), 0 8px 32px rgba(0, 0, 0, 0.2);
  color: #fff;
  transition: transform 0.3s ease, background 0.3s ease;
  padding: 40px !important;
  border-radius: 24px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

#plan .info:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  transform: translateY(-8px);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#plan .info h3 {
  color: #fff !important;
  font-size: 1.25rem;
  margin-bottom: 12px;
}

#plan .info p {
  color: rgba(255, 255, 255, 0.7) !important;
  line-height: 1.6;
  font-size: 1.05rem;
}

#plan .info .icon-lg {
  color: var(--brand-amber) !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  background: rgba(249, 166, 0, 0.1) !important;
  border-radius: 50% !important;
  padding: 12px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border: 1px solid rgba(249, 166, 0, 0.2) !important;
}

@media (max-width: 1100px) {
  #plan .info-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 650px) {
  #plan .info-grid { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   12. Demo polish — desktop fit, motion and accessibility (Sep 2026)
   Everything below only adjusts spacing, motion and behaviour; colours,
   fonts, radii and the glass look are unchanged.
   ========================================================================== */

/* ---------- Header fit on laptops ----------
   Brand + 8 nav links + Book tickets + Sign in need about 1330px, wider than
   the 1180px page shell, so at 1280–1366px "Sign in" was pushed off screen
   and the page scrolled sideways. The header gets its own wider cap, laptop
   widths get tighter link spacing, and below 1200px the links move into the
   drawer (which already lists every one of them). */
.site-header .header-row {
  max-width: 1440px;
}
@media (min-width: 1040px) and (max-width: 1439px) {
  .site-header .header-row {
    padding-inline: 24px;
    gap: 12px;
  }
  .main-nav {
    gap: 2px;
  }
  .site-header .main-nav a.nav-link {
    padding: 8px 10px;
    font-size: 0.86rem;
  }
  .header-actions {
    gap: 8px;
  }
  .btn-book-nav,
  .btn-nav-auth {
    padding: 0 14px;
  }
}
@media (min-width: 1040px) and (max-width: 1199px) {
  .main-nav {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
}

/* ---------- How booking works: laptop fit ----------
   The expanded card was a fixed 720px tall, taller than a 1366x768 or
   1536x864 laptop viewport once the sticky header is counted. It now follows
   the viewport height (560-720px) and tightens inner spacing on short
   screens. All content stays; mobile (up to 860px) rules are untouched. */
@media (min-width: 861px) {
  .booking-track {
    min-height: calc(clamp(560px, calc(100vh - 90px), 720px) + 20px);
  }
  .booking-card.is-active {
    height: clamp(560px, calc(100vh - 90px), 720px);
    min-height: clamp(560px, calc(100vh - 90px), 720px);
    max-height: clamp(560px, calc(100vh - 90px), 720px);
  }
  .booking-card:not(.is-active) {
    height: clamp(420px, calc((100vh - 90px) * 0.667), 480px);
    min-height: clamp(420px, calc((100vh - 90px) * 0.667), 480px);
    max-height: clamp(420px, calc((100vh - 90px) * 0.667), 480px);
  }
}
@media (min-width: 861px) and (max-height: 720px) {
  .booking-card.is-active .card-expanded-view {
    padding: 20px;
    gap: 22px;
  }
  .booking-card .exp-step-pill {
    margin-bottom: 8px;
  }
  .booking-card .exp-title {
    font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.7rem);
    margin-bottom: 8px;
  }
  .booking-card .exp-lede {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 14px;
  }
  .booking-card .booking-widget-box {
    padding: 12px;
    gap: 9px;
    margin-bottom: 14px;
  }
  .booking-card .exp-actions .btn-cta {
    min-height: 44px;
  }
}

/* The trust badge (bottom-left) and rating chip (bottom-right) overlapped on
   the ~300px-wide photo ("Valley View Gua..."). Stack them instead. */
.card-exp-rating-chip {
  right: auto;
  left: 16px;
  bottom: 56px;
}

/* ---------- How booking works: magic morph ----------
   Cards used to animate width/height/flex-basis in CSS while JS ran a FLIP
   translate. The two fought, the growing card was an empty box mid-way and
   the shrinking card showed old and new text on top of each other. Now the
   DOM switches instantly and the View Transitions API morphs GPU snapshots:
   glass panels resize in one motion, the photo flies between thumbnail and
   hero slot, old text fades out and new text rises in line by line, and the
   pill capsule slides. Names exist only while html.bk-vt is set, and only on
   visible elements, so every name is unique. */
:root {
  --bk-morph: 720ms;
  --bk-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.booking-card {
  transition: transform 0.35s var(--bk-ease),
              opacity 0.35s ease,
              box-shadow 0.45s ease,
              border-color 0.45s ease,
              background 0.45s ease;
  will-change: auto;
}
/* The switch itself is instant so the new state is captured in final form. */
.booking-stage.is-switching *,
.booking-stage.is-switching *::before,
.booking-stage.is-switching *::after {
  transition: none !important;
}

html.bk-vt #bcard-0 { view-transition-name: bk-card-0; }
html.bk-vt #bcard-1 { view-transition-name: bk-card-1; }
html.bk-vt #bcard-2 { view-transition-name: bk-card-2; }
html.bk-vt #bcard-0.is-active .card-exp-media,
html.bk-vt #bcard-0:not(.is-active) .shrunk-media { view-transition-name: bk-media-0; }
html.bk-vt #bcard-1.is-active .card-exp-media,
html.bk-vt #bcard-1:not(.is-active) .shrunk-media { view-transition-name: bk-media-1; }
html.bk-vt #bcard-2.is-active .card-exp-media,
html.bk-vt #bcard-2:not(.is-active) .shrunk-media { view-transition-name: bk-media-2; }
html.bk-vt #bcard-0:not(.is-active) .card-shrunk-view { view-transition-name: bk-side-0; }
html.bk-vt #bcard-1:not(.is-active) .card-shrunk-view { view-transition-name: bk-side-1; }
html.bk-vt #bcard-2:not(.is-active) .card-shrunk-view { view-transition-name: bk-side-2; }
html.bk-vt .booking-card.is-active .card-exp-header-row { view-transition-name: bk-c1; }
html.bk-vt .booking-card.is-active .exp-title { view-transition-name: bk-c2; }
html.bk-vt .booking-card.is-active .exp-lede { view-transition-name: bk-c3; }
html.bk-vt .booking-card.is-active .booking-widget-box { view-transition-name: bk-c4; }
html.bk-vt .booking-card.is-active .exp-actions { view-transition-name: bk-c5; }
html.bk-vt .booking-pill-btn.is-active { view-transition-name: bk-pill; }
/* Fixed chrome is captured too, so the morphing cards never paint over it. */
html.bk-vt .site-header { view-transition-name: bk-header; }
html.bk-vt .scroll-progress-track { view-transition-name: bk-progress; }
html.bk-vt .role-dock { view-transition-name: bk-dock; }
/* The card wrapping round to the far side travels as a single snapshot. */
html.bk-vt .booking-card.is-wrapping * { view-transition-name: none !important; }
/* Chrome draws a live snapshot's backdrop-filter even while the snapshot is
   faded out, as a hard-edged frosted rectangle. The panel's frost is drawn by
   its group box below, so inner backdrop filters are off during a morph. */
html.bk-vt .booking-card,
html.bk-vt .booking-card * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Keep the page clickable while a morph runs. */
::view-transition {
  pointer-events: none;
}

::view-transition-group(bk-header),
::view-transition-group(bk-progress),
::view-transition-group(bk-dock) {
  z-index: 10;
  animation: none;
}
::view-transition-old(bk-header),
::view-transition-old(bk-progress),
::view-transition-old(bk-dock) {
  display: none;
}
::view-transition-new(bk-header),
::view-transition-new(bk-progress),
::view-transition-new(bk-dock) {
  animation: none;
}

/* Glass panels: the group box itself is drawn as the glass card while its
   width, height and position morph, so the radius never distorts and the
   frosted backdrop stays live. The snapshots are hidden. */
::view-transition-group(bk-card-0),
::view-transition-group(bk-card-1),
::view-transition-group(bk-card-2) {
  animation-duration: var(--bk-morph);
  animation-timing-function: var(--bk-ease);
  box-sizing: border-box;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.18) 30%, rgba(240, 248, 255, 0.04) 62%, rgba(255, 255, 255, 0.28) 100%);
  -webkit-backdrop-filter: blur(9px) saturate(180%) contrast(108%);
  backdrop-filter: blur(9px) saturate(180%) contrast(108%);
  box-shadow: 0 24px 56px -10px rgba(11, 80, 120, 0.15),
              0 8px 24px -2px rgba(46, 49, 146, 0.08),
              inset 0 1.5px 1.5px 0 #ffffff;
}
::view-transition-old(bk-card-0),
::view-transition-new(bk-card-0),
::view-transition-old(bk-card-1),
::view-transition-new(bk-card-1),
::view-transition-old(bk-card-2),
::view-transition-new(bk-card-2) {
  animation: none;
  opacity: 0;
}

/* Photos: one shared element flies between side thumbnail and hero slot. */
::view-transition-group(bk-media-0),
::view-transition-group(bk-media-1),
::view-transition-group(bk-media-2) {
  animation-duration: var(--bk-morph);
  animation-timing-function: var(--bk-ease);
  border-radius: 20px;
  overflow: hidden;
}
::view-transition-old(bk-media-0),
::view-transition-new(bk-media-0),
::view-transition-old(bk-media-1),
::view-transition-new(bk-media-1),
::view-transition-old(bk-media-2),
::view-transition-new(bk-media-2) {
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
}
::view-transition-old(bk-media-0),
::view-transition-old(bk-media-1),
::view-transition-old(bk-media-2) {
  animation: none;
}
/* Growing photo: the crisp large snapshot takes over almost at once.
   Shrinking photo: the large one stays until the frame is thumbnail-sized. */
html[data-bk-in="0"]::view-transition-new(bk-media-0),
html[data-bk-in="1"]::view-transition-new(bk-media-1),
html[data-bk-in="2"]::view-transition-new(bk-media-2) {
  animation: bk-fade-in calc(var(--bk-morph) * 0.3) ease-out both;
}
html[data-bk-out="0"]::view-transition-new(bk-media-0),
html[data-bk-out="1"]::view-transition-new(bk-media-1),
html[data-bk-out="2"]::view-transition-new(bk-media-2) {
  animation: bk-fade-in calc(var(--bk-morph) * 0.35) ease-out calc(var(--bk-morph) * 0.5) both;
}

/* Copy lines: old ones lift away fast, new ones rise in one after another. */
::view-transition-group(bk-c1),
::view-transition-group(bk-c2),
::view-transition-group(bk-c3),
::view-transition-group(bk-c4),
::view-transition-group(bk-c5) {
  animation-duration: 360ms;
  animation-timing-function: var(--bk-ease);
}
::view-transition-old(bk-c1),
::view-transition-old(bk-c2),
::view-transition-old(bk-c3),
::view-transition-old(bk-c4),
::view-transition-old(bk-c5) {
  animation: bk-line-out 120ms ease-out both;
}
::view-transition-new(bk-c1),
::view-transition-new(bk-c2),
::view-transition-new(bk-c3),
::view-transition-new(bk-c4),
::view-transition-new(bk-c5) {
  animation: bk-line-in 480ms var(--bk-ease) both;
}
::view-transition-new(bk-c1) { animation-delay: 230ms; }
::view-transition-new(bk-c2) { animation-delay: 280ms; }
::view-transition-new(bk-c3) { animation-delay: 330ms; }
::view-transition-new(bk-c4) { animation-delay: 380ms; }
::view-transition-new(bk-c5) { animation-delay: 430ms; }

/* Side-card text: the leaving one fades at once, the arriving one fades in
   once its panel has nearly landed. */
::view-transition-group(bk-side-0),
::view-transition-group(bk-side-1),
::view-transition-group(bk-side-2) {
  animation-duration: var(--bk-morph);
  animation-timing-function: var(--bk-ease);
}
::view-transition-old(bk-side-0),
::view-transition-old(bk-side-1),
::view-transition-old(bk-side-2) {
  animation: bk-fade-out 150ms ease-out both;
}
::view-transition-new(bk-side-0),
::view-transition-new(bk-side-1),
::view-transition-new(bk-side-2) {
  animation: bk-fade-in 320ms ease-out calc(var(--bk-morph) * 0.5) both;
}

/* Wrapping card: slides out at one edge, back in at the other. */
::view-transition-image-pair(bk-wrap-out),
::view-transition-image-pair(bk-wrap-in) {
  border-radius: 32px;
  -webkit-backdrop-filter: blur(8px) saturate(180%) contrast(108%);
  backdrop-filter: blur(8px) saturate(180%) contrast(108%);
}
::view-transition-old(bk-wrap-out),
::view-transition-new(bk-wrap-in) {
  animation: none;
}
html[data-bk-dir="next"]::view-transition-group(bk-wrap-out) { animation: bk-slide-out-left 380ms var(--bk-ease) both; }
html[data-bk-dir="prev"]::view-transition-group(bk-wrap-out) { animation: bk-slide-out-right 380ms var(--bk-ease) both; }
html[data-bk-dir="next"]::view-transition-group(bk-wrap-in) { animation: bk-slide-in-right 560ms var(--bk-ease) 200ms both; }
html[data-bk-dir="prev"]::view-transition-group(bk-wrap-in) { animation: bk-slide-in-left 560ms var(--bk-ease) 200ms both; }

/* Pill capsule slides from the old step to the new one. */
::view-transition-group(bk-pill) {
  animation-duration: 520ms;
  animation-timing-function: var(--bk-ease);
}

@keyframes bk-fade-in { from { opacity: 0; } }
@keyframes bk-fade-out { to { opacity: 0; } }
@keyframes bk-line-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes bk-line-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes bk-slide-out-left { to { opacity: 0; translate: -56px 0; } }
@keyframes bk-slide-out-right { to { opacity: 0; translate: 56px 0; } }
@keyframes bk-slide-in-right { from { opacity: 0; translate: 56px 0; } }
@keyframes bk-slide-in-left { from { opacity: 0; translate: -56px 0; } }
@keyframes bk-media-settle { from { opacity: 0; transform: scale(1.04); } }

/* Browsers without View Transitions: instant switch, then the same entrance. */
.booking-card.is-active.is-entering .card-exp-media {
  animation: bk-media-settle var(--bk-morph) var(--bk-ease) both;
}
.booking-card.is-active.is-entering .card-exp-copy > * {
  animation: bk-line-in 480ms var(--bk-ease) both;
}
.booking-card.is-active.is-entering .card-exp-copy > :nth-child(2) { animation-delay: 50ms; }
.booking-card.is-active.is-entering .card-exp-copy > :nth-child(3) { animation-delay: 100ms; }
.booking-card.is-active.is-entering .card-exp-copy > :nth-child(4) { animation-delay: 150ms; }
.booking-card.is-active.is-entering .card-exp-copy > :nth-child(5) { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  .booking-card.is-entering * {
    animation: none !important;
  }
}

/* Autoplay pause/play (WCAG 2.2.2), at the end of the step pills. */
.booking-autoplay-btn {
  flex: none;
  width: 38px;
  height: 38px;
  margin-left: 4px;
  border-radius: 50%;
  border: 1px solid rgba(46, 49, 146, 0.14);
  background: rgba(255, 255, 255, 0.85);
  color: var(--brand-indigo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--bk-ease);
}
.booking-autoplay-btn:hover {
  background: var(--brand-indigo);
  border-color: var(--brand-indigo);
  color: #ffffff;
  transform: scale(1.05);
}
.booking-autoplay-btn .icon {
  width: 15px;
  height: 15px;
}
.booking-autoplay-btn .when-paused,
.booking-autoplay-btn[aria-pressed="true"] .when-playing {
  display: none;
}
.booking-autoplay-btn[aria-pressed="true"] .when-paused {
  display: block;
}
.booking-pill-btn:focus-visible,
.booking-arrow-btn:focus-visible,
.booking-autoplay-btn:focus-visible {
  outline: 3px solid rgba(46, 49, 146, 0.45);
  outline-offset: 2px;
}

/* ---------- Hero video pause/play (WCAG 2.2.2) ---------- */
.hero-video-toggle {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(20, 22, 63, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.hero-video-toggle:hover {
  background: var(--brand-amber);
  border-color: var(--brand-amber);
  color: #14163f;
  transform: scale(1.06);
}
.hero-video-toggle .icon {
  width: 16px;
  height: 16px;
}
.hero-video-toggle .when-paused,
.hero-video-toggle[aria-pressed="true"] .when-playing {
  display: none;
}
.hero-video-toggle[aria-pressed="true"] .when-paused {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  /* The hero video itself is hidden under reduced motion. */
  .hero-video-toggle {
    display: none;
  }
}

/* "Expand in Lightbox" on the video card is a real button now (it used to be
   a span inside a role=button card that also held the mute/play buttons). */
button.bento-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

/* ---------- Scroll reveal ----------
   Sections stay visible when scripts are off; the class is set in <head>.
   will-change is dropped once an element has revealed, instead of keeping
   ~40 permanent compositor layers alive. */
html:not(.js) .reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
.reveal.in {
  will-change: auto;
}

/* ---------- Gallery: "Getting here" map card ----------
   Replaces the soundscape player. An illustrated piece of the map (inline
   SVG, works offline) with a fold crease, a pulsing park pin and the hill
   road's hairpins. The whole card links to Google Maps directions; hover or
   keyboard focus zooms toward the pin, runs the route and reveals Navigate. */
.bento-map-card {
  color: inherit;
  text-decoration: none;
  background: #eef2ea;
  cursor: pointer;
}
.bento-map-card .map-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 67% 41%;
  transition: transform 0.9s var(--bk-ease);
}
.bento-map-card:hover .map-art,
.bento-map-card:focus-visible .map-art {
  transform: scale(1.07);
}

.map-green { fill: #d2e8ca; }
.map-contours path {
  fill: none;
  stroke: #c9dac3;
  stroke-width: 1.4;
}
.map-river {
  fill: none;
  stroke: #a9d4f3;
  stroke-width: 12;
  stroke-linecap: round;
}
.map-river-core {
  fill: none;
  stroke: #c4e3f9;
  stroke-width: 4;
  stroke-linecap: round;
}
.map-road-casing path {
  fill: none;
  stroke: #d9dfe7;
  stroke-width: 9;
  stroke-linecap: round;
}
.map-road path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 6;
  stroke-linecap: round;
}
.map-hill-road-casing {
  fill: none;
  stroke: #eab64a;
  stroke-width: 13;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map-hill-road {
  fill: none;
  stroke: #fcd463;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Route to the park: indigo dots that start flowing on hover. */
.map-route {
  fill: none;
  stroke: var(--brand-indigo);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 0.1 11;
  animation: map-route-flow 1.1s linear infinite;
  animation-play-state: paused;
}
.bento-map-card:hover .map-route,
.bento-map-card:focus-visible .map-route {
  animation-play-state: running;
}
@keyframes map-route-flow {
  to { stroke-dashoffset: -22.2; }
}

.map-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  fill: #5b6475;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 4px;
  stroke-linejoin: round;
}
.map-label-sm {
  font-size: 14px;
  letter-spacing: 0.02em;
  fill: #6b7486;
}

/* Park pin */
.map-pin-shadow { fill: rgba(20, 22, 63, 0.25); }
.map-pin path {
  fill: var(--brand-indigo);
  stroke: #ffffff;
  stroke-width: 3;
}
.map-pin circle { fill: var(--brand-amber); }
.map-pin {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bento-map-card:hover .map-pin,
.bento-map-card:focus-visible .map-pin {
  transform: translateY(-6px) scale(1.08);
}
.map-pin-pulse {
  fill: rgba(46, 49, 146, 0.18);
  stroke: var(--brand-indigo);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: map-pin-pulse 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
@keyframes map-pin-pulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}
.map-chip rect {
  fill: #ffffff;
  stroke: rgba(46, 49, 146, 0.16);
  stroke-width: 1;
}
.map-chip {
  filter: drop-shadow(0 3px 6px rgba(20, 22, 63, 0.18));
}
.map-chip text {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  fill: var(--brand-indigo);
}

/* Paper fold creases and a soft vignette: "a piece of the map". */
.map-fold {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 49.3%, rgba(255, 255, 255, 0.5) 49.7%, rgba(20, 22, 63, 0.07) 50.3%, transparent 50.9% 100%),
    linear-gradient(180deg, transparent 0 49.3%, rgba(255, 255, 255, 0.4) 49.7%, rgba(20, 22, 63, 0.05) 50.3%, transparent 50.9% 100%),
    radial-gradient(130% 130% at 50% 45%, transparent 55%, rgba(20, 22, 63, 0.12) 100%);
}

.map-compass {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(46, 49, 146, 0.12);
  box-shadow: 0 4px 12px rgba(11, 80, 120, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.map-compass svg {
  width: 16px;
  height: 16px;
}

/* Address panel; the Navigate button slides out of it on hover/focus. */
.map-panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 26px -8px rgba(20, 22, 63, 0.3);
}
.map-panel-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.map-panel-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 49, 146, 0.1);
  color: var(--brand-indigo);
}
.map-panel-text {
  min-width: 0;
}
.map-panel-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.25;
  color: #14163f;
}
.map-panel-text span {
  display: block;
  font-size: 0.72rem;
  line-height: 1.3;
  color: #475569;
}
.map-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #f9a600 0%, #ffb81c 100%);
  color: #1a2266;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 800;
  box-shadow: 0 8px 20px -6px rgba(249, 166, 0, 0.55);
  transition: max-height 0.4s var(--bk-ease), margin-top 0.4s var(--bk-ease), opacity 0.25s ease;
}
.bento-map-card:hover .map-nav,
.bento-map-card:focus-visible .map-nav {
  max-height: 38px;
  margin-top: 10px;
  opacity: 1;
}
/* Touch screens have no hover: show Navigate all the time. */
@media (hover: none) {
  .map-nav {
    max-height: 38px;
    margin-top: 10px;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .map-route,
  .map-pin-pulse {
    animation: none;
  }
  .bento-map-card .map-art,
  .map-pin {
    transition: none;
  }
}

/* Typical-weather card: a static weather glyph replaces the live radar pulse. */
.sensor-typical-icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: #0284c7;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* "TYPICAL WEATHER" is longer than the old label; let the altitude pill wrap
   under it instead of colliding with it. */
.bento-sensor-card .sensor-head {
  flex-wrap: wrap;
  gap: 6px 8px;
}

/* ---------- Price cards as admission tickets ----------
   Same content, new design. Each card is a park ticket: a colour band per
   ticket type (brand sky / amber / green / indigo), the price on a faint
   "security print", a perforated tear line with real cut-out notches (masks,
   so the drop shadow follows the ticket's outline) and a barcode strip. The
   most popular ticket sits slightly tilted with a sticker and straightens on
   hover; every ticket lifts and catches a shine. */
#tickets .tiers {
  /* 24px keeps four 260px tickets on one row inside the 1180px shell. */
  gap: 24px;
  padding-top: 10px;
}
#tickets .tier {
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  filter: drop-shadow(0 16px 22px rgba(20, 22, 63, 0.12)) drop-shadow(0 2px 4px rgba(20, 22, 63, 0.08));
  transition-property: opacity, transform, translate, rotate, scale, filter;
  transition-duration: 0.72s, 0.72s, 0.45s, 0.45s, 0.45s, 0.45s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--stagger-delay, 0ms), var(--stagger-delay, 0ms), 0ms, 0ms, 0ms, 0ms;
}
#tickets .tier:hover {
  transform: none;
  translate: 0 -8px;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 26px 30px rgba(20, 22, 63, 0.18)) drop-shadow(0 4px 8px rgba(20, 22, 63, 0.1));
}
#tickets .tier.is-featured {
  transform: none;
  rotate: -1.5deg;
  scale: 1.03;
  z-index: 1;
  background: none;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 20px 28px rgba(249, 166, 0, 0.3)) drop-shadow(0 4px 8px rgba(20, 22, 63, 0.1));
}
#tickets .tier.is-featured:hover {
  transform: none;
  rotate: 0deg;
  translate: 0 -8px;
  filter: drop-shadow(0 30px 36px rgba(249, 166, 0, 0.36)) drop-shadow(0 6px 12px rgba(20, 22, 63, 0.12));
}

/* Stub (band + price) and body (list), joined by the tear line. */
#tickets .ticket-stub,
#tickets .ticket-body {
  position: relative;
  background: #ffffff;
}
#tickets .ticket-stub {
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  -webkit-mask:
    radial-gradient(circle 12px at 0 100%, #0000 98%, #000) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle 12px at 100% 100%, #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 12px at 0 100%, #0000 98%, #000) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle 12px at 100% 100%, #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
}
#tickets .ticket-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 20px;
  border-radius: 0 0 22px 22px;
  -webkit-mask:
    radial-gradient(circle 12px at 0 0, #0000 98%, #000) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle 12px at 100% 0, #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 12px at 0 0, #0000 98%, #000) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle 12px at 100% 0, #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
}
#tickets .ticket-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  border-top: 2px dashed rgba(46, 49, 146, 0.2);
}

/* Colour band: ticket name and who it is for. */
#tickets .ticket-band {
  padding: 22px 24px 16px;
  color: #14163f;
  background-color: var(--ticket-tone);
  background-image:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.14) 0 6px, transparent 6px 14px),
    linear-gradient(135deg, var(--ticket-tone-light) 0%, var(--ticket-tone) 55%, var(--ticket-tone-deep) 100%);
}
#tickets .ticket-band h3 {
  margin: 0 0 4px;
  color: inherit;
  font-size: 1.3rem;
}
#tickets .ticket-band .small.muted {
  margin: 0;
  color: inherit;
  opacity: 0.8;
  font-size: 0.82rem;
  font-weight: 600;
}
#tickets .ticket--child { --ticket-tone: #5ac7ef; --ticket-tone-light: #8ddcf7; --ticket-tone-deep: #3cb3e4; }
#tickets .ticket--adult { --ticket-tone: #f9a600; --ticket-tone-light: #ffcb45; --ticket-tone-deep: #f09400; }
#tickets .ticket--senior { --ticket-tone: #89c540; --ticket-tone-light: #b0dd74; --ticket-tone-deep: #74b32f; }
#tickets .ticket--group { --ticket-tone: #2e3192; --ticket-tone-light: #3d41aa; --ticket-tone-deep: #24277a; }
#tickets .ticket--group .ticket-band {
  color: #ffffff;
}

/* Price on a faint guilloche "security print"; the per-label sits under the
   amount so "Proposal / upon enquiry" no longer wraps mid-phrase. */
#tickets .ticket-price {
  margin: 0;
  padding: 18px 24px 20px;
  font-size: 1rem;
  text-align: right; /* price sits on the stub's right, like a printed ticket */
  background:
    repeating-radial-gradient(circle at 112% -30%, transparent 0 9px, rgba(46, 49, 146, 0.05) 9px 10px),
    #ffffff;
}
#tickets .tier .amount {
  font-size: 2.6rem;
}
#tickets .tier .amount.is-text {
  font-size: 1.85rem;
}
#tickets .tier .per {
  display: block;
  margin: 6px 0 0;
}

#tickets .ticket-body ul {
  margin: 0 0 18px;
}

/* Barcode + QR strip, pinned to the bottom of every ticket. */
#tickets .ticket-body::after {
  content: "";
  display: block;
  margin-top: auto;
  height: 28px;
  opacity: 0.5;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314163f' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M14 14h3v3h-3zM20 14v3M17 21h4v-4'/%3E%3C/svg%3E") right center / 28px 28px no-repeat,
    repeating-linear-gradient(90deg, #14163f 0 2px, transparent 2px 4px, #14163f 4px 5px, transparent 5px 8px, #14163f 8px 11px, transparent 11px 13px, #14163f 13px 14px, transparent 14px 17px) left center / calc(100% - 44px) 100% no-repeat;
}

/* Group ticket: "Coming soon" reads like a stamped slot on the ticket. */
#tickets .ticket-body > .btn {
  margin-bottom: 16px;
  border: 1.5px dashed rgba(46, 49, 146, 0.4);
  background: rgba(46, 49, 146, 0.05);
  color: var(--brand-indigo);
}
#tickets .ticket-body > .btn:hover {
  border-color: rgba(46, 49, 146, 0.65);
  background: rgba(46, 49, 146, 0.1);
}

/* Shine that sweeps across the stub on hover. */
#tickets .ticket-stub::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
  translate: -120% 0;
  transition: translate 0s;
}
#tickets .tier:hover .ticket-stub::after {
  translate: 120% 0;
  transition: translate 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* "Most popular" becomes a sticker on the tilted ticket. */
#tickets .tier-flag {
  top: -14px;
  left: auto;
  right: 18px;
  z-index: 2;
  rotate: 5deg;
  padding: 7px 14px;
  border-radius: 10px;
  background: var(--brand-indigo);
  color: #ffffff;
  box-shadow: 0 8px 18px -4px rgba(20, 22, 63, 0.45);
  outline: 1.5px dashed rgba(255, 255, 255, 0.55);
  outline-offset: -5px;
}

@media (prefers-reduced-motion: reduce) {
  #tickets .ticket-stub::after {
    display: none;
  }
  #tickets .tier.is-featured {
    rotate: 0deg;
  }
}

/* ---------- Plan your visit: background ----------
   A little darker than the navbar's indigo (#2E3192) — the --indigo-700
   token — without the amber glow that tinted it brown. */
#plan {
  background: var(--indigo-700) !important;
}
#plan::before {
  background: rgba(255, 255, 255, 0.06);
}
#plan::after {
  background: rgba(90, 199, 239, 0.12);
}

/* Line the tickets up: band, price and body share row heights across a row
   of tickets (the Group band wraps to two lines), so every tear line and
   barcode sits at the same height. Subgrid is in Chrome/Edge 117+, Safari 16+
   and Firefox 71+; elsewhere each ticket keeps its own heights. */
@supports (grid-template-rows: subgrid) {
  #tickets .tiers {
    row-gap: 0;
  }
  #tickets .tier {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    margin-bottom: 24px;
  }
  #tickets .ticket-stub {
    grid-row: 1 / span 2;
    display: grid;
    grid-template-rows: subgrid;
  }
  #tickets .ticket-body {
    grid-row: 3;
  }
}

/* ---------- Gallery: balanced grid ----------
   12 cards filled 18 cells (4.5 rows), so the last row stopped halfway. The
   swing photo is now tall (1x2) and the cabins wide (2x1): 20 cells, five full
   rows. Dense packing also closes gaps when a filter hides cards. */
#gallery .gallery-bento-grid {
  grid-auto-flow: row dense;
}
@media (min-width: 641px) {
  #gallery .bento-tall {
    grid-row: span 2;
  }
}

/* ---------- Gallery: let the photos breathe ----------
   At rest a photo card shows just its tag and title over a light gradient on
   the bottom third. Hover or keyboard focus brings back everything else: the
   top chips, the description, "View in Lightbox" and a deeper gradient.
   Touch screens (no hover) keep the full card as before. */
@media (hover: hover) {
  #gallery .g-card:not(.bento-video-card) .bento-img-gradient {
    background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(11, 14, 45, 0.5) 76%, rgba(11, 14, 45, 0.86) 100%);
  }
  #gallery .g-card:not(.bento-video-card) .bento-img-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 14, 45, 0.28) 0%, rgba(11, 14, 45, 0.05) 30%, rgba(11, 14, 45, 0.75) 68%, rgba(11, 14, 45, 0.95) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  #gallery .g-card:not(.bento-video-card) .bento-topbar {
    opacity: 0;
    translate: 0 -6px;
    transition: opacity 0.3s ease, translate 0.4s var(--bk-ease);
  }
  #gallery .g-card:not(.bento-video-card) .bento-desc,
  #gallery .g-card:not(.bento-video-card) .bento-link {
    max-height: 0;
    margin-top: -6px; /* cancels the column gap while hidden */
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--bk-ease), margin-top 0.4s var(--bk-ease), opacity 0.3s ease;
  }
  #gallery .g-card:not(.bento-video-card) .bento-cat-tag,
  #gallery .g-card:not(.bento-video-card) .bento-title {
    text-shadow: 0 2px 12px rgba(11, 14, 45, 0.55);
  }

  #gallery .g-card:not(.bento-video-card):is(:hover, :focus-visible) .bento-img-wrap::after {
    opacity: 1;
  }
  #gallery .g-card:not(.bento-video-card):is(:hover, :focus-visible) .bento-topbar {
    opacity: 1;
    translate: 0 0;
  }
  #gallery .g-card:not(.bento-video-card):is(:hover, :focus-visible) .bento-desc {
    max-height: 3em;
    margin-top: 0;
    opacity: 1;
  }
  #gallery .g-card:not(.bento-video-card):is(:hover, :focus-visible) .bento-link {
    max-height: 1.6em;
    margin-top: 0;
    opacity: 1;
  }
}

/* ---------- Gallery: photo grows into the viewer ----------
   A shared-element View Transition: the clicked photo morphs from its tile to
   the viewer (and back on close) while the viewer fades in around it. */
::view-transition-group(gallery-photo) {
  animation-duration: 460ms;
  animation-timing-function: var(--bk-ease);
  border-radius: 16px;
  overflow: hidden;
}
::view-transition-old(gallery-photo),
::view-transition-new(gallery-photo) {
  height: 100%;
  object-fit: cover;
}
/* The page keeps its scrollbar gutter while the viewer locks scrolling, so
   nothing shifts sideways under the morph. */
html {
  scrollbar-gutter: stable;
}

/* ---------- Viewer: thumbnail strip ---------- */
.overlay-thumbs {
  position: absolute;
  left: 50%;
  bottom: 88px;
  translate: -50% 0;
  z-index: 20;
  display: flex;
  gap: 8px;
  max-width: min(92vw, 760px);
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 16px;
  background: rgba(14, 18, 38, 0.6);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.overlay-thumbs::-webkit-scrollbar {
  display: none;
}
.overlay-thumb {
  position: relative;
  flex: none;
  width: 64px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #0b0e2d;
  cursor: pointer;
  opacity: 0.55;
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: opacity 0.2s ease, outline-color 0.2s ease, translate 0.2s ease;
}
.overlay-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.overlay-thumb:hover {
  opacity: 0.9;
  translate: 0 -2px;
}
.overlay-thumb.is-active {
  opacity: 1;
  outline-color: var(--brand-amber);
}
.overlay-thumb:focus-visible {
  opacity: 1;
  outline-color: var(--brand-sky);
}
.overlay-thumb.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 10px solid #ffffff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
/* Room for the strip above the caption bar (desktop; mobile comes later). */
@media (min-width: 821px) {
  .overlay-stage {
    padding-bottom: 160px;
  }
  .overlay-img,
  .overlay-video {
    max-height: calc(100vh - 252px);
  }
}
@media (max-width: 820px) {
  .overlay-thumbs {
    display: none;
  }
}