/* ============================================================
   WORLDS OF WONDER — Master Stylesheet  v7.0
   Clean · White · Premium · Blue & Gold Theme
   NO RED — Professional Theme Park Design
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── WoW Brand Palette — Blue & Gold ── */
  --primary:    #0055B3;   /* Rich Royal Blue */
  --primary-dk: #003D82;
  --primary-lt: #EBF3FF;
  --accent:     #F5A800;   /* WOW Gold */
  --accent-dk:  #D48F00;
  --accent-lt:  #FFF8E6;
  --teal:       #007BB5;
  --teal-lt:    #E0F4FF;
  --cyan:       #00AADD;
  --sky:        #E8F4FF;
  --green:      #0A9B5F;
  --green-lt:   #E6F7F1;
  --purple:     #5E35B1;
  --purple-lt:  #EDE7F6;
  --orange:     #E8670A;
  --orange-lt:  #FFF3E8;

  /* ── Neutrals ── */
  --ink:        #080E1E;
  --ink2:       #0D1730;
  --ink3:       #1A2545;
  --text:       #1A2235;
  --text2:      #4A5568;
  --text3:      #94A3B8;
  --bg:         #F7F9FC;
  --bg2:        #EEF2F8;
  --white:      #FFFFFF;
  --border:     #DDE3EE;
  --border2:    #C8D3E5;

  /* ── Radius ── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 32px;

  /* ── Shadows ── */
  --s1: 0 1px 4px rgba(0,30,80,.06);
  --s2: 0 4px 24px rgba(0,30,80,.10);
  --s3: 0 12px 48px rgba(0,30,80,.14);
  --s4: 0 24px 72px rgba(0,30,80,.20);
  --s-blue:   0 8px 32px rgba(0,85,179,.28);
  --s-gold:   0 8px 32px rgba(245,168,0,.32);
  --s-teal:   0 8px 32px rgba(0,123,181,.28);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  background: var(--white);
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--primary), var(--cyan)); border-radius: 3px; }

/* ── Utilities ── */
.hidden { display: none !important; }
.bg-light { background: var(--bg); }
.bg-dark  { background: var(--ink2); }
.text-center { text-align: center; }

/* ============================================================
   TOPBAR — Deep Navy
   ============================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1010;
  background: var(--ink2);
  height: 38px;
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.topbar--hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.topbar-inner {
  max-width: 1380px; margin: 0 auto; padding: 0 24px;
  height: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
}
.topbar-left {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; color: rgba(255,255,255,.5);
}
.topbar-right {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: rgba(255,255,255,.45);
}
.topbar-sep { color: rgba(255,255,255,.15); }
.topbar-left a, .topbar-right a { color: rgba(255,255,255,.65); transition: color .2s; }
.topbar-left a:hover, .topbar-right a:hover { color: white; }

/* Weather chip */
.weather-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px; padding: 2px 10px 2px 7px;
  font-size: 12px; color: rgba(255,255,255,.8);
  font-weight: 500; cursor: default; white-space: nowrap;
}
.weather-icon { font-size: 13px; line-height: 1; }
.weather-temp { font-weight: 700; color: var(--accent); }
.weather-label { font-size: 10.5px; color: rgba(255,255,255,.38); }

/* Online badge */
.topbar-badge {
  background: rgba(10,155,95,.2);
  color: #2ddc88; border: 1px solid rgba(10,155,95,.3);
  border-radius: 20px; padding: 2px 10px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}

/* ============================================================
   COMMS TICKER — Blue
   ============================================================ */
.comms-ticker {
  position: fixed; top: 38px; left: 0; right: 0;
  z-index: 1008;
  background: linear-gradient(90deg, var(--primary) 0%, var(--teal) 100%);
  height: 30px; overflow: hidden; display: flex;
  align-items: center;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 2px 12px rgba(0,85,179,.3);
}
.comms-ticker--hidden { transform: translateY(-68px); }
.comms-track {
  display: flex; align-items: center;
  white-space: nowrap;
  animation: tickerScroll 34s linear infinite;
  will-change: transform;
}
.comms-track:hover { animation-play-state: paused; }
.comms-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 32px; font-size: 12px; font-weight: 600;
  color: white; letter-spacing: .01em;
}
.comms-item::after {
  content: '✦'; font-size: 8px;
  color: rgba(255,255,255,.4); margin-left: 32px;
}
.comms-item:last-child::after { display: none; }
.comms-item a { color: var(--accent); font-weight: 700; }
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   NAVIGATION — White Clean Glass
   ============================================================ */
.site-header {
  position: fixed;
  top: 68px; /* topbar 38 + ticker 30 */
  left: 0; right: 0; z-index: 1000;
  transition: background .35s, box-shadow .35s, top .35s, backdrop-filter .35s;
}
.site-header.scrolled {
  top: 0;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 2px 24px rgba(0,30,80,.12);
  border-bottom: 1px solid rgba(0,30,80,.08);
}
.site-header.transparent {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}

.nav-inner {
  max-width: 1380px; margin: 0 auto;
  padding: 0 28px; height: 80px;
  display: flex; align-items: center; gap: 0;
}

/* LEFT: nav links — dark on scroll (white bg), white when transparent */
.nav-links {
  display: flex; align-items: center; gap: 2px;
  order: 1; flex: 1;
}
.nav-links a {
  color: rgba(255,255,255,.88);
  font-size: 13.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 8px;
  white-space: nowrap;
  transition: color .15s, background .15s;
  letter-spacing: .01em;
}
.nav-links a:hover  { color: white; background: rgba(255,255,255,.15); }
.nav-links a.active { color: var(--accent); }

/* When scrolled (white nav), switch to dark text */
.site-header.scrolled .nav-links a {
  color: var(--text2);
}
.site-header.scrolled .nav-links a:hover {
  color: var(--primary); background: var(--primary-lt);
}
.site-header.scrolled .nav-links a.active {
  color: var(--primary); background: var(--primary-lt);
}

/* CENTER: Book CTA */
.nav-cta-wrap { order: 2; flex-shrink: 0; margin: 0 16px; display: flex; align-items: center; gap: 8px; }
.btn-nav-book {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dk) 100%);
  color: var(--ink); border: none;
  border-radius: 9px; padding: 9px 20px;
  font-size: 13px; font-weight: 800; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: all .2s; font-family: inherit;
  box-shadow: var(--s-gold);
  letter-spacing: .01em;
}
.btn-nav-book:hover {
  background: linear-gradient(135deg, #ffc01a, var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(245,168,0,.5);
  color: var(--ink);
}

/* Sign In button — subtle, ghost style */
.btn-nav-signin {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.1);
  color: white; border: 1px solid rgba(255,255,255,.25);
  border-radius: 9px; padding: 8px 16px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: all .2s; font-family: inherit;
  backdrop-filter: blur(4px);
}
.btn-nav-signin:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.45);
  color: white;
  transform: translateY(-1px);
}
.site-header.scrolled .btn-nav-signin {
  background: rgba(0,110,230,.08);
  color: var(--primary);
  border-color: rgba(0,110,230,.25);
}
.site-header.scrolled .btn-nav-signin:hover {
  background: var(--primary-lt);
  border-color: rgba(0,110,230,.4);
}

/* ── Dropdown Mega-Nav ─────────────────────────────────────── */
.nav-dropdown { position: relative; }
.nav-dropdown-btn {
  display: inline-flex; align-items: center; gap: 5px;
  color: rgba(255,255,255,.88); background: none; border: none; cursor: pointer;
  font-size: 13.5px; font-weight: 600; padding: 7px 12px; border-radius: 8px;
  font-family: inherit; white-space: nowrap;
  transition: color .15s, background .15s; letter-spacing: .01em;
}
.nav-dropdown-btn:hover { color: white; background: rgba(255,255,255,.15); }
.nav-dropdown.active .nav-dropdown-btn { color: var(--accent); }
.site-header.scrolled .nav-dropdown-btn { color: var(--text2); }
.site-header.scrolled .nav-dropdown-btn:hover { color: var(--primary); background: var(--primary-lt); }
.site-header.scrolled .nav-dropdown.active .nav-dropdown-btn { color: var(--primary); }
.dropdown-chevron { transition: transform .2s; }
.nav-dropdown.open .dropdown-chevron { transform: rotate(180deg); }

.nav-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); min-width: 240px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12); padding: 8px; z-index: 200;
  animation: dropIn .15s ease;
}
@keyframes dropIn { from { opacity:0; transform:translateX(-50%) translateY(-6px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-item {
  display: block; padding: 10px 14px; border-radius: 10px; text-decoration: none;
  transition: background .12s;
}
.nav-dropdown-item:hover { background: var(--primary-lt); }
.nav-dropdown-item--active { background: var(--primary-lt); }
.nav-dropdown-item-label { font-size: 13.5px; font-weight: 700; color: var(--text); }
.nav-dropdown-item--active .nav-dropdown-item-label { color: var(--primary); }
.nav-dropdown-item:hover .nav-dropdown-item-label { color: var(--primary); }
.nav-dropdown-item-desc { font-size: 11.5px; color: var(--text3); margin-top: 2px; }

/* RIGHT: WOW Logo — TOP RIGHT, EXACT logo.png, HARD ADOPTED */
.nav-logo {
  order: 3;
  margin-left: 16px;
  display: flex !important;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Nav logo — HARD ADOPTED real logo.png — NO colour filter, NO brightness/invert, NO alterations */
.nav-logo-img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 56px !important;
  width: auto !important;
  max-width: 200px;
  object-fit: contain;
  transition: transform .25s;
  filter: none !important;
  /* screen blend: hides white bg when nav is transparent over dark hero */
  mix-blend-mode: screen;
}
/* When scrolled (white nav bg) — switch to multiply so white bg is invisible on white */
.site-header.scrolled .nav-logo-img {
  mix-blend-mode: multiply;
}
.nav-logo:hover .nav-logo-img { transform: scale(1.04); }

.nav-logo-fallback {
  font-family: 'Nunito', sans-serif;
  font-weight: 900; font-size: 18px;
  color: white; white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
  letter-spacing: -.5px;
  background: linear-gradient(135deg, var(--primary), var(--teal));
  border-radius: 10px; padding: 8px 16px;
  border: 1.5px solid rgba(255,255,255,.25);
}
.site-header.scrolled .nav-logo-fallback {
  color: var(--primary);
  background: var(--primary-lt);
  border-color: rgba(0,85,179,.2);
}

/* Hamburger */
.hamburger {
  display: none; background: none; border: none;
  cursor: pointer; color: white; padding: 7px;
  border-radius: 8px; order: 0;
  transition: background .2s;
}
.hamburger:hover { background: rgba(255,255,255,.15); }
.site-header.scrolled .hamburger { color: var(--ink); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 28px; border-radius: 10px;
  font-weight: 700; font-size: 15px; cursor: pointer;
  transition: all .22s cubic-bezier(.4,0,.2,1);
  border: 2px solid transparent;
  font-family: 'Poppins', sans-serif;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%);
  color: white; box-shadow: var(--s-blue);
}
.btn-primary:hover { box-shadow: 0 14px 40px rgba(0,85,179,.45); }

.btn-gold {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dk) 100%);
  color: var(--ink); box-shadow: var(--s-gold);
}
.btn-gold:hover { box-shadow: 0 14px 40px rgba(245,168,0,.5); }

.btn-teal {
  background: linear-gradient(135deg, var(--teal) 0%, var(--cyan) 100%);
  color: white; box-shadow: var(--s-teal);
}

.btn-outline-white {
  background: rgba(255,255,255,.12);
  color: white; border-color: rgba(255,255,255,.5);
  backdrop-filter: blur(8px);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.22);
  border-color: white;
}

.btn-outline-blue {
  background: transparent; color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-blue:hover { background: var(--primary-lt); }

.btn-white {
  background: white; color: var(--primary);
  box-shadow: var(--s2);
}
.btn-white:hover { background: var(--primary-lt); }

.btn-sm  { padding: 9px 18px; font-size: 13px; border-radius: 8px; }
.btn-lg  { padding: 14px 32px; font-size: 16px; }
.btn-xl  { padding: 16px 36px; font-size: 16.5px; border-radius: 12px; }
/* Alias */
.btn-blue { background: linear-gradient(135deg, var(--primary), var(--primary-dk)); color: white; box-shadow: var(--s-blue); }
.btn-blue:hover { box-shadow: 0 14px 40px rgba(0,85,179,.45); }

/* ============================================================
   CONTAINERS
   ============================================================ */
.container    { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 960px;  margin: 0 auto; padding: 0 24px; }
.container-lg { max-width: 1440px; margin: 0 auto; padding: 0 24px; }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section    { padding: 88px 0; }
.section-sm { padding: 56px 0; }
.section-lg { padding: 110px 0; }

.section-header { text-align: center; margin-bottom: 56px; }

.section-tag {
  display: inline-flex; align-items: center;
  background: var(--primary-lt); color: var(--primary);
  border: 1px solid rgba(0,85,179,.18);
  border-radius: 20px; padding: 5px 16px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 14px;
}
.section-tag.gold   { background: var(--accent-lt);  color: var(--accent-dk); border-color: rgba(245,168,0,.3); }
.section-tag.green  { background: var(--green-lt);   color: var(--green);     border-color: rgba(10,155,95,.2); }
.section-tag.teal   { background: var(--teal-lt);    color: var(--teal);      border-color: rgba(0,123,181,.2); }
.section-tag.purple { background: var(--purple-lt);  color: var(--purple);    border-color: rgba(94,53,177,.2); }
.section-tag.orange { background: var(--orange-lt);  color: var(--orange);    border-color: rgba(232,103,10,.2); }

.section-title {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 900; color: var(--ink);
  line-height: 1.15; letter-spacing: -.02em;
  margin-bottom: 16px;
}
.section-sub {
  font-size: 17px; color: var(--text2);
  max-width: 660px; margin: 0 auto; line-height: 1.7;
}

/* ============================================================
   HERO — Cinematic Video Carousel
   ============================================================ */
.hero-carousel-section {
  position: relative;
  height: 100vh; min-height: 620px;
  overflow: hidden; background: var(--ink2);
  display: flex; flex-direction: column;
  justify-content: flex-end;
}

/* Track holds all slides absolutely */
.hc-track {
  position: absolute; inset: 0;
}

/* Each slide — isolation:isolate creates a NEW stacking context
   so .logo-blend-wrap's mix-blend-mode:screen blends against
   the slide's own dark overlay (not the white page bg behind) */
.hc-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  isolation: isolate;
}
.hc-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* Media layer (video or photo) */
.hc-media {
  position: absolute; inset: 0; overflow: hidden;
}
.hc-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  /* Hidden by default; shown by JS when canplay fires */
}
.hc-video-poster {
  /* Poster photo layer — shows before video loads */
  z-index: 1;
}
.hc-photo, .hc-photo-fallback {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  animation: hcKenBurns 10s ease-in-out infinite alternate;
}
.hc-slide.active .hc-photo { animation-play-state: running; }
.hc-slide:not(.active) .hc-photo { animation-play-state: paused; }
@keyframes hcKenBurns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.07); }
}

/* Overlay — gradient for legibility */
.hc-overlay {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(
    170deg,
    rgba(0,5,20,.80) 0%,
    rgba(0,10,35,.55) 55%,
    rgba(0,5,15,.45) 100%
  );
}
.hc-overlay--blue   { background: linear-gradient(170deg, rgba(0,20,70,.82) 0%, rgba(0,40,120,.52) 60%, rgba(0,15,50,.35) 100%); }
.hc-overlay--purple { background: linear-gradient(170deg, rgba(10,0,50,.84) 0%, rgba(50,0,120,.55) 60%, rgba(20,0,60,.35) 100%); }
.hc-overlay--teal   { background: linear-gradient(170deg, rgba(0,30,60,.82) 0%, rgba(0,70,120,.52) 60%, rgba(0,30,60,.35) 100%); }

/* Content block — centred */
.hc-content {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 120px 32px 160px;
  /* Allow children to blend through to the slide background */
  isolation: auto;
}
.hc-badge {
  display: inline-block;
  background: rgba(245,168,0,.2); color: var(--accent);
  border: 1px solid rgba(245,168,0,.4);
  border-radius: 30px; padding: 7px 22px;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 22px;
  backdrop-filter: blur(6px);
}
.hc-title {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(42px, 7vw, 90px);
  font-weight: 900; color: white;
  line-height: 1.06; letter-spacing: -.03em;
  margin-bottom: 18px;
  text-shadow: 0 4px 32px rgba(0,0,0,.55);
}
.hc-accent { color: var(--accent); }
.hc-sub {
  font-size: clamp(14px, 2vw, 18px);
  color: rgba(255,255,255,.82);
  line-height: 1.7; margin-bottom: 36px;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
  max-width: 700px;
}
.hc-cta {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 14px;
}

/* Stats bar — docked at bottom above dots */
.hc-stats {
  position: relative; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap;
  background: rgba(0,0,0,.5); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 16px 24px 52px; /* extra bottom padding for dots */
}
.hcs-item { display: flex; flex-direction: column; align-items: center; padding: 0 20px; }
.hcs-num  { font-family:'Nunito',sans-serif; font-size:26px; font-weight:900; color:var(--accent); line-height:1; }
.hcs-label{ font-size:10px; color:rgba(255,255,255,.55); font-weight:700; margin-top:3px; text-transform:uppercase; letter-spacing:.07em; }
.hcs-sep  { font-size:18px; color:rgba(255,255,255,.2); }

/* Arrow controls */
.hc-arrow {
  position: absolute; top: 50%; z-index: 7;
  transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.18); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.3);
  color: white; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
}
.hc-arrow:hover { background: rgba(255,255,255,.32); transform: translateY(-50%) scale(1.08); }
.hc-arrow--prev { left: 24px; }
.hc-arrow--next { right: 24px; }

/* Dot navigation */
.hc-dots {
  position: absolute; bottom: 24px; left: 50%; z-index: 7;
  transform: translateX(-50%);
  display: flex; gap: 8px; align-items: center;
}
.hc-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.4); border: none; cursor: pointer;
  transition: all .25s; padding: 0;
}
.hc-dot.active {
  background: var(--accent); width: 28px; border-radius: 6px;
}

/* ============================================================
   WOW LOGO ON DARK BACKGROUNDS
   The logo PNG has a solid white background — no transparency.
   We use mix-blend-mode: multiply on the wrapper.
   multiply: white(255) × dark_bg = dark_bg (white vanishes)
             red(shield) × dark_bg = visible coloured result
   This is the CORRECT blend mode for white-bg logos on dark.
   screen was wrong — screen makes dark colours invisible.
   ============================================================ */

/* ── Logo blend wrapper ──────────────────────────────────────
   screen blend: white(255,255,255) + any_color = white (invisible on dark bg)
                 red(220,38,38)     + dark      = visible warm red
                 black(0,0,0)       + any_color = 0 (invisible — subtext hides, that's ok)
   The wrapper must be a direct child of the dark section root,
   NOT inside any element with z-index, transform, opacity, or will-change.
   We force this by using mix-blend-mode on the img directly AND
   removing filter:none override so browser can apply blend.
   ──────────────────────────────────────────────────────────── */
.logo-blend-wrap {
  display: inline-block;
  line-height: 0;
  /* No isolation, no z-index, no transform — keeps blend context open */
}
.logo-blend-wrap img {
  mix-blend-mode: screen !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Hero carousel slides — dark overlay background */
.hero-wow-logo {
  display: block;
  height: 72px;
  width: auto;
  margin: 0 auto 22px;
  object-fit: contain;
  opacity: 1;
}

.hc-content .hero-wow-logo {
  display: block;
}

/* YouTube BG container + injected iframe — covers full slide */
#yt-bg-container,
#yt-bg-container iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Scale up so 16:9 video always covers any viewport */
  width:  177.78vh;   /* 16/9 × 100vh */
  height: 100vh;
  min-width:  100%;
  min-height: 56.25vw; /* 9/16 × 100vw */
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  border: none;
}

/* ============================================================
   VIDEO BANNER SECTION — YouTube feature embed
   ============================================================ */
.video-banner-section {
  position: relative;
  background: linear-gradient(135deg, #05091d 0%, #0a1540 45%, #0d2260 100%);
  overflow: hidden;
  padding: 80px 0;
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 100%;
}
.vb-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at 30% 50%, rgba(0,85,179,.18), transparent),
              radial-gradient(ellipse 50% 60% at 75% 30%, rgba(245,168,0,.08), transparent);
}
.vb-content {
  position: relative; z-index: 2;
  flex: 0 0 420px; max-width: 420px;
  padding: 0 0 0 clamp(24px, 5vw, 80px);
  display: flex; flex-direction: column; align-items: flex-start;
}
.vb-logo {
  height: 64px; width: auto; margin-bottom: 24px;
  filter: none !important; opacity: 1 !important; display: block;
  mix-blend-mode: screen; /* hides white bg on dark section */
  /* Hard adopted — no changes ever */
}
.vb-title {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 900; color: white; line-height: 1.1;
  letter-spacing: -.025em; margin-bottom: 16px;
}
.vb-sub {
  font-size: 15px; color: rgba(255,255,255,.62);
  line-height: 1.7; margin-bottom: 28px; max-width: 360px;
}
.vb-frame-wrap {
  position: relative; z-index: 2;
  flex: 1; padding: 0 clamp(24px, 5vw, 80px) 0 0;
}
.vb-frame-inner {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 72px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
}
.vb-frame-inner iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
}

/* ============================================================
   YOUTUBE FACADE — thumbnail + play button, iframe on click
   ============================================================ */
.yt-facade {
  position: absolute;
  inset: 0;
  cursor: pointer;
  border-radius: 20px;
  overflow: hidden;
  background: #0a0f28;
  /* Ensure it's visible even if thumbnail is slow */
  display: flex;
  align-items: center;
  justify-content: center;
}
.yt-facade-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .4s ease, opacity .3s;
  background: #0a1540; /* shows while image loads */
}
.yt-facade:hover .yt-facade-thumb {
  transform: scale(1.03);
  opacity: .85;
}
.yt-facade-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
  transition: background .3s;
}
.yt-facade:hover .yt-facade-overlay {
  background: rgba(0,0,0,.1);
}
.yt-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: none; border: none; padding: 0;
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  transition: transform .25s;
  z-index: 2;
}
.yt-facade:hover .yt-play-btn {
  transform: translate(-50%, -50%) scale(1.12);
}
.yt-play-btn svg {
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.6));
  width: 72px; height: 52px;
}
.yt-play-label {
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 700;
  color: white;
  letter-spacing: .05em;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
  text-transform: uppercase;
}

/* Passport logo — dark background, screen blend hides white */
.passport-logo {
  position: absolute; top: 28px; right: 28px;
  z-index: 2;
}
.passport-logo img {
  mix-blend-mode: screen; /* hides white bg on dark banner */
}

/* CTA section logo wrapper */
.cta-inner .logo-blend-wrap {
  margin-bottom: 28px;
}

/* Universal dark-section logo — blend handled by .logo-blend-wrap wrapper */
.dark-section-logo {
  display: block;
  opacity: 1;
}

/* Responsive video banner */
@media (max-width: 900px) {
  .video-banner-section {
    flex-direction: column;
    padding: 56px 0;
    gap: 36px;
  }
  .vb-content {
    flex: none; max-width: 100%;
    padding: 0 24px;
    align-items: center; text-align: center;
  }
  .vb-sub { margin-left: auto; margin-right: auto; }
  .vb-frame-wrap {
    width: 100%;
    padding: 0 24px;
  }
  .passport-logo { top: 16px; right: 16px; }
  .passport-logo img { height: 44px !important; }
}
@media (max-width: 480px) {
  .hero-wow-logo { height: 48px; margin-bottom: 16px; }
  .vb-logo { height: 44px; }
}

/* ============================================================
   QUICK BOOK BAR — Standalone below hero
   ============================================================ */
.quick-book-bar {
  background: white;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0,30,80,.10);
  position: relative; z-index: 10;
}
.qbb-inner {
  max-width: 1380px; margin: 0 auto;
  padding: 20px 28px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.qbb-label {
  font-weight: 800; font-size: 14px; color: var(--primary);
  white-space: nowrap; letter-spacing: .01em;
  font-family: 'Nunito', sans-serif;
}
.qbb-tabs {
  display: flex; gap: 8px; flex-wrap: wrap; flex: 1;
}
.qbb-tab {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary-lt); color: var(--primary);
  border: 1.5px solid var(--border2); border-radius: 8px;
  padding: 9px 16px; font-size: 13.5px; font-weight: 700;
  cursor: pointer; transition: all .18s; font-family: inherit;
  white-space: nowrap;
}
.qbb-tab strong { color: var(--primary-dk); }
.qbb-tab:hover { background: var(--primary); color: white; border-color: var(--primary); }
.qbb-tab:hover strong { color: var(--accent); }
.qbb-tab.active { background: var(--primary); color: white; border-color: var(--primary); }
.qbb-tab.active strong { color: var(--accent); }
.qbb-fields {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.qbb-field { display: flex; flex-direction: column; gap: 3px; }
.qbb-field label { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; }
.qbb-input {
  border: 1.5px solid var(--border2); border-radius: 7px;
  padding: 7px 12px; font-size: 13.5px; font-family: inherit;
  color: var(--text); background: white; outline: none;
  width: 130px; transition: border-color .15s;
}
.qbb-input[type="number"] { width: 72px; }
.qbb-input:focus { border-color: var(--primary); }
.qbb-book-btn {
  padding: 11px 24px !important; font-size: 14px !important;
  white-space: nowrap; flex-shrink: 0;
}
.qbb-savings {
  background: var(--accent-lt); color: var(--accent-dk);
  border-top: 1px solid rgba(245,168,0,.2);
  padding: 8px 28px; font-size: 13px; font-weight: 700;
  text-align: center;
}

h1 .accent      { color: var(--cyan); }
h1 .accent-gold { color: var(--accent); }
h1 .accent-blue { color: var(--cyan); }

.hero-scroll-cue {
  position: absolute; bottom: 30px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,255,255,.4); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; z-index: 5;
  animation: scrollCue 2s ease-in-out infinite;
}
@keyframes scrollCue {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ============================================================
   QUICK BOOK WIDGET
   ============================================================ */
.hero-widget {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-xl); padding: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.hero-widget-title {
  font-family: 'Nunito', sans-serif;
  font-size: 15px; font-weight: 900; color: white;
  margin-bottom: 16px; text-align: center; letter-spacing: .02em;
}
.park-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin-bottom: 16px;
}
.park-tab {
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: 10px; padding: 10px 4px;
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.7); cursor: pointer;
  transition: all .2s; text-align: center;
  font-family: 'Poppins', sans-serif; line-height: 1.4;
}
.park-tab:hover  { background: rgba(255,255,255,.15); color: white; }
.park-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  border-color: var(--accent); color: var(--ink);
  box-shadow: var(--s-gold);
}
.park-tab small { display: block; font-size: 10px; opacity: .85; font-weight: 600; }

.price-display {
  text-align: center; padding: 16px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 16px;
}
.price-from { font-size: 11.5px; color: rgba(255,255,255,.5); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.price-amount { font-family: 'Nunito', sans-serif; font-size: 44px; font-weight: 900; color: white; line-height: 1.1; }
.price-amount span:first-child { font-size: 26px; vertical-align: top; margin-top: 8px; display: inline-block; }
.price-sub { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 2px; }

.widget-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.widget-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.widget-label { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; }
.widget-input {
  width: 100%; background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.2); border-radius: 8px;
  padding: 9px 13px; color: white; font-family: inherit; font-size: 14px;
  transition: border-color .2s, background .2s;
}
.widget-input:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.15); }
.widget-input::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.5); cursor: pointer; }

.savings-badge {
  background: linear-gradient(135deg, var(--green), #078a52);
  color: white; border-radius: 8px; padding: 8px 14px;
  font-size: 13px; font-weight: 700; text-align: center; margin-top: 6px;
}

/* ============================================================
   OFFER STRIP — Gold
   ============================================================ */
.offer-strip {
  background: linear-gradient(90deg, var(--accent-dk) 0%, var(--accent) 50%, var(--accent-dk) 100%);
  overflow: hidden; height: 42px; display: flex; align-items: center;
  box-shadow: 0 4px 20px rgba(245,168,0,.3);
}
.offer-strip-inner {
  display: flex; align-items: center; white-space: nowrap;
  animation: offerScroll 30s linear infinite;
}
.offer-strip-inner:hover { animation-play-state: paused; }
.offer-strip-item {
  display: inline-block; padding: 0 28px;
  font-size: 13px; font-weight: 700; color: var(--ink);
  letter-spacing: .01em;
}
.offer-dot { color: var(--ink); font-size: 10px; flex-shrink: 0; opacity: .4; }
@keyframes offerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   EXPLORE PARK CARDS
   ============================================================ */
.exp-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.exp-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  height: 520px; display: flex; flex-direction: column;
  cursor: pointer; text-decoration: none;
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s;
  box-shadow: var(--s3);
}
.exp-card:hover { transform: translateY(-10px) scale(1.01); box-shadow: var(--s4); }

.exp-card-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.exp-card:hover .exp-card-img { transform: scale(1.08); }

.water-bg    { background-image: url('../images/card-water-park.jpg'),  linear-gradient(135deg, #003d75, #0077c2); }
.amusement-bg{ background-image: url('../images/card-amusement-park.jpg'), linear-gradient(135deg, #1a003c, #6b21a8); }
.combo-bg    { background-image: url('../images/hero-water.jpg'), linear-gradient(135deg, #003d75, #007BB5); }

.park-visual {
  position: absolute; top: 20px; left: 20px; z-index: 3;
  font-size: 40px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
.exp-card-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg,
    rgba(0,0,0,.06) 0%, rgba(0,0,0,.2) 40%, rgba(0,0,0,.88) 100%);
}
.exp-card-content {
  position: relative; z-index: 4; margin-top: auto; padding: 24px;
}
.exp-card-tag {
  display: inline-block; border-radius: 20px;
  background: rgba(255,255,255,.18);
  color: white; font-size: 11.5px; font-weight: 700;
  padding: 4px 12px; margin-bottom: 10px;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px);
}
.exp-card h3 {
  font-family: 'Nunito', sans-serif;
  font-size: 24px; font-weight: 900; color: white;
  line-height: 1.2; margin-bottom: 8px; letter-spacing: -.01em;
}
.exp-desc { font-size: 13.5px; color: rgba(255,255,255,.75); line-height: 1.55; margin-bottom: 12px; }
.exp-features { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.exp-features li {
  background: rgba(255,255,255,.13); color: white;
  font-size: 11.5px; font-weight: 600; border-radius: 20px;
  padding: 4px 10px; border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(4px);
}
.exp-card-price {
  display: flex; align-items: baseline; gap: 5px; margin-bottom: 14px;
}
.exp-card-price .from { font-size: 12px; color: rgba(255,255,255,.6); }
.exp-card-price .amount { font-family: 'Nunito', sans-serif; font-size: 28px; font-weight: 900; color: white; }
.exp-card-price .per { font-size: 13px; color: rgba(255,255,255,.6); }

.book-btn {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(245,168,0,.2); color: white;
  border: 1.5px solid rgba(245,168,0,.5);
  border-radius: 10px; padding: 10px 16px;
  font-size: 14px; font-weight: 700;
  backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s;
}
.exp-card:hover .book-btn { background: rgba(245,168,0,.35); border-color: var(--accent); }
.book-btn span { font-size: 18px; transition: transform .2s; }
.exp-card:hover .book-btn span { transform: translateX(4px); }

/* ============================================================
   FEATURE STRIP — Dark
   ============================================================ */
.feature-strip-wrap {
  background: var(--ink2); padding: 56px 0; position: relative; overflow: hidden;
}
.feature-strip-wrap::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 100% at 50% 50%, rgba(0,85,179,.1), transparent);
  pointer-events: none;
}
.feature-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; position: relative; z-index: 1;
}
.feature-item {
  text-align: center; padding: 32px 28px;
  border-right: 1px solid rgba(255,255,255,.07);
  transition: background .2s;
}
.feature-item:last-child { border-right: none; }
.feature-item:hover { background: rgba(255,255,255,.04); }
.feature-icon { font-size: 36px; margin-bottom: 14px; line-height: 1; display: block; }
.feature-title {
  font-family: 'Nunito', sans-serif;
  font-size: 16.5px; font-weight: 900; color: white; margin-bottom: 8px;
}
.feature-text { font-size: 13.5px; color: rgba(255,255,255,.55); line-height: 1.6; }

/* ============================================================
   ATTRACTION SCROLL
   ============================================================ */
.attraction-scroll {
  display: flex; overflow-x: auto; gap: 20px;
  padding: 20px 40px 28px;
  scrollbar-width: thin; scrollbar-color: var(--primary) var(--bg2);
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.attraction-scroll::-webkit-scrollbar { height: 6px; }
.attraction-scroll::-webkit-scrollbar-track { background: var(--bg2); border-radius: 3px; }
.attraction-scroll::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

.attraction-card {
  flex: 0 0 270px; background: white;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,30,80,.10);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
  border: 1px solid var(--border);
  scroll-snap-align: start;
}
.attraction-card:hover { transform: translateY(-8px); box-shadow: 0 16px 48px rgba(0,30,80,.18); }

/* Card image area */
.attraction-card-img {
  height: 175px; overflow: hidden;
  position: relative; background: var(--bg2);
}
.attraction-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  display: block;
}
.attraction-card:hover .attraction-card-img img { transform: scale(1.1); }

/* Floating tag on image */
.att-img-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  border-radius: 20px; padding: 4px 12px;
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.3);
}
.water-tag    { background: rgba(0,85,179,.82); color: white; }
.amusement-tag{ background: rgba(94,53,177,.82); color: white; }
.thrill-tag   { background: rgba(30,0,80,.82); color: white; }
.family-tag   { background: rgba(10,120,80,.82); color: white; }
.kids-tag     { background: rgba(0,130,80,.82); color: white; }
.show-tag     { background: rgba(180,83,9,.82); color: white; }

/* Card body */
.attraction-card-body { padding: 18px 18px 20px; }
.att-name {
  font-family: 'Nunito', sans-serif;
  font-size: 17px; font-weight: 900; color: var(--ink);
  margin-bottom: 6px; line-height: 1.25;
}
.att-desc {
  font-size: 13px; color: var(--text2); line-height: 1.6;
}

/* ============================================================
   RIDES GRID — with images
   ============================================================ */
.rides-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.ride-card {
  background: white; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--s2); border: 1px solid var(--border);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
}
.ride-card:hover { transform: translateY(-8px); box-shadow: var(--s3); }

.ride-card-top {
  height: 200px; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center; font-size: 64px;
}
.ride-card-top img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s;
}
.ride-card:hover .ride-card-top img { transform: scale(1.07); }
.ride-card-top .ride-emoji-overlay {
  position: relative; z-index: 2;
  background: rgba(0,0,0,.18); border-radius: 50%;
  width: 70px; height: 70px;
  display: flex; align-items: center; justify-content: center; font-size: 36px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

.ride-card-body { padding: 20px; }
.ride-name {
  font-family: 'Nunito', sans-serif;
  font-size: 18px; font-weight: 900; color: var(--ink);
  margin-bottom: 8px; line-height: 1.2;
}
.ride-desc { font-size: 13.5px; color: var(--text2); line-height: 1.6; margin-bottom: 14px; }
.ride-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ride-tag {
  display: inline-block; border-radius: 20px;
  padding: 4px 11px; font-size: 11.5px; font-weight: 700;
}
.ride-tag.thrill  { background: #e3eeff; color: #1252E8; }
.ride-tag.family  { background: #e6f7f1; color: #0A9B5F; }
.ride-tag.relax   { background: #e0f4ff; color: #007BB5; }
.ride-tag.kids    { background: #fff8e6; color: #D48F00; }
.ride-tag.height  { background: #f0f4ff; color: #0055B3; }

/* Featured ride card */
.ride-card--featured { border: 2px solid var(--accent); }
.ride-featured-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: var(--accent); color: var(--ink);
  border-radius: 20px; padding: 4px 12px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
}

/* ============================================================
   PRICING CARDS
   ============================================================ */
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 28px;
}
.pricing-card {
  background: white; border-radius: var(--r-lg);
  border: 2px solid var(--border); padding: 32px 28px; text-align: center;
  position: relative;
  transition: transform .3s, box-shadow .3s, border-color .3s;
  box-shadow: var(--s2);
}
.pricing-card:hover { transform: translateY(-8px); box-shadow: var(--s3); }
.pricing-card--water:hover    { border-color: var(--teal); }
.pricing-card--amusement:hover{ border-color: var(--purple); }
.pricing-card--combo:hover    { border-color: var(--accent); }
.pricing-card--combo {
  background: linear-gradient(160deg, var(--accent-lt), var(--white));
  border-color: rgba(245,168,0,.3);
}

.pc-badge {
  position: absolute; top: -1px; right: 24px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  color: var(--ink); font-size: 12px; font-weight: 800;
  padding: 5px 14px; border-radius: 0 0 10px 10px;
  letter-spacing: .03em; box-shadow: var(--s-gold);
}
.pc-icon { font-size: 42px; margin-bottom: 12px; display: block; }
.pc-name {
  font-family: 'Nunito', sans-serif;
  font-size: 20px; font-weight: 900; color: var(--ink); margin-bottom: 8px;
}
.pc-price {
  font-family: 'Nunito', sans-serif;
  font-size: 38px; font-weight: 900; color: var(--primary);
  margin-bottom: 20px; line-height: 1;
}
.pc-price small { font-size: 16px; color: var(--text2); font-weight: 500; }
.pc-list {
  text-align: left; margin-bottom: 24px;
  display: flex; flex-direction: column; gap: 9px;
}
.pc-list li { font-size: 14px; color: var(--text2); }

.pricing-note {
  background: var(--primary-lt); border: 1px solid rgba(0,85,179,.18);
  border-radius: var(--r); padding: 14px 20px;
  font-size: 13.5px; color: var(--text2); line-height: 1.7;
}
.pricing-note span { font-weight: 700; color: var(--ink); }

/* ============================================================
   PARK HERO (individual park pages)
   ============================================================ */
.park-hero {
  position: relative; min-height: 62vh;
  display: flex; align-items: flex-end; overflow: hidden;
  background: var(--ink2);
}
/* Slideshow background in park hero */
.park-hero-video-wrap {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.park-hero-video-wrap .hero-bg-slider {
  position: absolute; inset: 0;
}
.park-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 8s ease-in-out;
}
.park-hero:hover .park-hero-bg { transform: scale(1.03); }
.park-hero-bg.water    { background-image: url('../images/hero-water.jpg'), linear-gradient(160deg, #001d4a, #0077b6); }
.park-hero-bg.amusement{ background-image: url('../images/hero-amusement.jpg'), linear-gradient(160deg, #0d1a40, #1a4a9b); }

.park-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(0,0,0,.15) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.82) 100%);
}
.park-hero-visual {
  position: absolute; top: 30%; right: 8%; z-index: 2;
  font-size: 120px;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,.4));
  animation: float 4s ease-in-out infinite; opacity: .85;
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-18px); }
}
.park-hero-content { position: relative; z-index: 3; padding-top: 160px; padding-bottom: 60px; }
.park-hero-tag {
  display: inline-flex; align-items: center;
  background: rgba(245,168,0,.2); color: var(--accent);
  border: 1px solid rgba(245,168,0,.35);
  border-radius: 20px; padding: 6px 16px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 18px; backdrop-filter: blur(6px);
}
.park-hero h1 {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(36px, 5.5vw, 68px);
  font-weight: 900; color: white;
  line-height: 1.06; letter-spacing: -.03em; margin-bottom: 18px;
}
.park-hero-sub { font-size: 17px; color: rgba(255,255,255,.78); line-height: 1.7; max-width: 600px; margin-bottom: 28px; }
.park-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.park-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.meta-chip {
  background: rgba(255,255,255,.13); color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.22); border-radius: 20px;
  padding: 6px 14px; font-size: 13px; font-weight: 600; backdrop-filter: blur(6px);
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  position: relative; overflow: hidden; padding: 88px 0;
  background: linear-gradient(135deg, #060e24 0%, #0a1a55 50%, #0d2260 100%);
  isolation: isolate; /* allows screen blend on logo-blend-wrap children */
}
.cta-section-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(0,85,179,.2), transparent),
              radial-gradient(ellipse 40% 60% at 80% 30%, rgba(0,170,221,.15), transparent);
  pointer-events: none;
}
.cta-inner { text-align: center; max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ============================================================
   PASSPORT BANNER
   ============================================================ */
.passport-banner {
  background: linear-gradient(135deg, #0a0f28 0%, #0d1a4a 40%, #0d2260 100%);
  border-radius: var(--r-xl); padding: 56px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; position: relative; overflow: hidden; box-shadow: var(--s4);
  isolation: isolate; /* allows screen blend on logo-blend-wrap children */
}
.passport-banner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 80% at 75% 50%, rgba(245,168,0,.15), transparent),
              radial-gradient(ellipse 40% 60% at 20% 70%, rgba(0,85,179,.18), transparent);
  pointer-events: none;
}
.passport-bg-emoji {
  position: absolute; right: 240px; top: 50%;
  transform: translateY(-50%); font-size: 140px;
  opacity: .06; z-index: 0; user-select: none; pointer-events: none;
}
.passport-content { position: relative; z-index: 1; }
.passport-tag {
  display: inline-flex; align-items: center;
  background: rgba(245,168,0,.15); color: var(--accent);
  border: 1px solid rgba(245,168,0,.3);
  border-radius: 20px; padding: 5px 14px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px;
}
.passport-title {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(22px, 3vw, 34px); font-weight: 900; color: white;
  margin-bottom: 12px; letter-spacing: -.02em;
}
.passport-desc { font-size: 15px; color: rgba(255,255,255,.62); line-height: 1.7; max-width: 500px; margin-bottom: 24px; }
.passport-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.ps-stat { text-align: center; }
.ps-num {
  font-family: 'Nunito', sans-serif;
  font-size: 28px; font-weight: 900; color: var(--accent); line-height: 1;
}
.ps-label { font-size: 11.5px; color: rgba(255,255,255,.45); font-weight: 500; margin-top: 3px; }
.passport-cta { position: relative; z-index: 1; flex-shrink: 0; }

/* ============================================================
   INFO GRID
   ============================================================ */
.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.info-card {
  background: white; border-radius: var(--r-lg);
  border: 1.5px solid var(--border); padding: 28px 24px;
  box-shadow: var(--s1);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .3s;
  display: flex; flex-direction: column; text-decoration: none;
}
.info-card:hover { transform: translateY(-7px); box-shadow: var(--s3); border-color: var(--primary); }
.info-icon { font-size: 36px; margin-bottom: 14px; display: block; }
.info-card h3 {
  font-family: 'Nunito', sans-serif;
  font-size: 18px; font-weight: 900; color: var(--ink);
  margin-bottom: 8px; line-height: 1.2;
}
.info-card p { font-size: 13.5px; color: var(--text2); line-height: 1.65; flex: 1; }
.info-cta {
  display: inline-flex; align-items: center;
  color: var(--primary); font-size: 13.5px; font-weight: 700;
  margin-top: 16px; gap: 4px; transition: gap .2s;
}
.info-card:hover .info-cta { gap: 8px; }
.info-note {
  font-size: 12px; color: var(--text3); margin-top: 10px;
  padding: 8px 12px; background: var(--bg);
  border-radius: 6px; border-left: 3px solid var(--accent);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: white; border-radius: var(--r);
  border: 1.5px solid var(--border); box-shadow: var(--s1); overflow: hidden;
}
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; cursor: pointer;
  font-size: 15.5px; font-weight: 600; color: var(--ink);
  transition: background .18s; gap: 12px;
}
.faq-q:hover { background: var(--bg); }
.faq-q::after { content: '+'; font-size: 22px; color: var(--text3); flex-shrink: 0; transition: transform .25s; }
.faq-item.open .faq-q::after { transform: rotate(45deg); color: var(--primary); }
.faq-a { display: none; padding: 0 22px 18px; font-size: 14.5px; color: var(--text2); line-height: 1.7; }
.faq-item.open .faq-a { display: block; }

/* ============================================================
   HERO SLIDER (banner-engine v3)
   ============================================================ */
.hero-slider { position: absolute; inset: 0; z-index: 2; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s cubic-bezier(.4,0,.2,1); }
.hero-slide.active { opacity: 1; }

/* Banner-engine v3 classes */
.hero-slide-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.hero-slide-bg video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero-slide-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg, rgba(0,8,30,.65) 0%, rgba(0,20,60,.4) 60%, transparent 100%);
}
.hero-slide-content {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center;
  padding: 180px 80px 100px;
  max-width: 1380px; width: 100%; margin: 0 auto; left: 0; right: 0;
}
.hero-slide-content--center {
  justify-content: center; text-align: center; padding: 180px 40px 100px;
}
.hero-slide-content--left { justify-content: flex-start; }
.hero-slide-title {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(32px, 5vw, 68px); font-weight: 900; color: white;
  line-height: 1.08; letter-spacing: -.03em; margin-bottom: 18px;
  text-shadow: 0 4px 32px rgba(0,0,0,.4);
}
.hero-slide-sub {
  font-size: 18px; color: rgba(255,255,255,.8);
  line-height: 1.65; max-width: 580px; margin-bottom: 32px;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.hero-slide-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(245,168,0,.18); color: var(--accent);
  border: 1px solid rgba(245,168,0,.35);
  border-radius: 20px; padding: 6px 16px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 20px;
}
/* Arrow controls */
.hero-controls {
  position: absolute; bottom: 40px; left: 0; right: 0;
  z-index: 10; display: flex; align-items: center; justify-content: center; gap: 16px;
}
.hero-arrow {
  background: rgba(255,255,255,.15); color: white;
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 50%; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(8px); transition: all .2s;
  font-size: 22px; line-height: 1;
}
.hero-arrow:hover { background: rgba(255,255,255,.3); }
.hero-dots { display: flex; gap: 8px; align-items: center; }
.hero-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.4); border: none; cursor: pointer; transition: all .3s; padding: 0;
}
.hero-dot.active { width: 26px; border-radius: 4px; background: white; }

/* YouTube iframe — kept for future use when deployed on real domain */
.yt-bg-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.yt-bg-iframe {
  position: absolute; top: 50%; left: 50%;
  width: 177.78vh; height: 56.25vw;
  min-width: 100%; min-height: 100%;
  transform: translate(-50%, -50%);
  border: none; pointer-events: none;
}
.slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.slide-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.6) 100%);
}
.slider-arrow {
  position: absolute; top: 50%; z-index: 8; transform: translateY(-50%);
  background: rgba(255,255,255,.15); color: white;
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 50%; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(8px); transition: all .2s; font-size: 20px;
}
.slider-arrow:hover { background: rgba(255,255,255,.3); }
.slider-arrow.prev { left: 24px; }
.slider-arrow.next { right: 24px; }
.slider-dots {
  position: absolute; bottom: 32px; left: 50%;
  transform: translateX(-50%); z-index: 8;
  display: flex; gap: 8px; align-items: center;
}
.slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; transition: all .3s; }
.slider-dot.active { width: 24px; border-radius: 4px; background: white; }

.slide-title {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(30px, 4.5vw, 62px); font-weight: 900; color: white;
  line-height: 1.1; letter-spacing: -.025em; margin-bottom: 14px;
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.slide-sub { font-size: 17px; color: rgba(255,255,255,.8); margin-bottom: 28px; max-width: 600px; }
.slide-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.slide-eyebrow {
  display: inline-flex; background: rgba(245,168,0,.18); color: var(--accent);
  border: 1px solid rgba(245,168,0,.32); border-radius: 20px;
  padding: 6px 16px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 18px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ink); color: rgba(255,255,255,.6); padding-top: 20px; }
.footer-logo-strip { border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: 36px; }

/* Footer logo — HARD ADOPTED real logo.png — NO filter, NO colour alteration, NO brightness/invert. Ever. */
.footer-logo-link {
  display: inline-block;
  transition: transform .25s;
}
.footer-logo-link:hover {
  transform: scale(1.04);
}
.footer-logo-img {
  display: block !important;
  height: 100px !important;
  width: auto !important;
  max-width: 280px;
  object-fit: contain;
  filter: none !important;
  mix-blend-mode: screen; /* hides white bg on dark footer */
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
  padding: 52px 0 40px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.footer-desc { font-size: 14px; line-height: 1.75; margin-bottom: 22px; color: rgba(255,255,255,.5); }
.footer-col h4 {
  font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 900;
  color: rgba(255,255,255,.9); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 18px;
}
.footer-col a { display: block; font-size: 14px; color: rgba(255,255,255,.5); margin-bottom: 10px; transition: color .2s; }
.footer-col a:hover { color: white; }
.footer-social { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.social-btn {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.65); transition: all .2s; cursor: pointer;
}
.social-btn:hover { background: var(--primary); border-color: var(--primary); color: white; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(255,255,255,.3);
}
.footer-bottom a { color: rgba(255,255,255,.45); transition: color .2s; }
.footer-bottom a:hover { color: white; }

/* ============================================================
   ALERT
   ============================================================ */
.alert { border-radius: var(--r); padding: 14px 20px; font-size: 14px; margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; }
.alert-info    { background: var(--primary-lt); color: #1a3d8f; border-left: 4px solid var(--primary); }
.alert-success { background: var(--green-lt);   color: #0a5c38; border-left: 4px solid var(--green); }
.alert-warning { background: var(--accent-lt);  color: #8a5e00; border-left: 4px solid var(--accent); }

/* ============================================================
   GROUP SAVING
   ============================================================ */
.group-saving {
  background: var(--green-lt); border: 1.5px solid rgba(10,155,95,.2);
  border-radius: var(--r); padding: 14px 20px;
  display: flex; gap: 12px; align-items: center;
  font-size: 14px; color: #0a5c38; font-weight: 600;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .exp-cards { grid-template-columns: 1fr 1fr; }
  .exp-cards .exp-card:last-child { grid-column: span 2; max-height: 320px; }
  .hero-inner { grid-template-columns: 1fr 380px; gap: 40px; }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-widget { display: none; }
  .hero-text-col h1 { font-size: clamp(36px, 8vw, 58px); }
  .feature-strip { grid-template-columns: repeat(2, 1fr); }
  .rides-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .passport-banner { flex-direction: column; padding: 36px; }
  .cta-btns { flex-direction: column; align-items: center; }
}

@media (max-width: 768px) {
  /* Hide most topbar items on mobile */
  .topbar-left > span:nth-child(n+3) { display: none; }

  /* Mobile nav overlay */
  .nav-links {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(8,14,30,.98); backdrop-filter: blur(20px);
    flex-direction: column; align-items: flex-start;
    padding: 90px 28px 40px; gap: 4px;
    z-index: 999; display: none; overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 18px; padding: 13px 16px; width: 100%; border-radius: 10px; color: rgba(255,255,255,.85) !important; }
  .nav-links a:hover { background: rgba(255,255,255,.08) !important; color: white !important; }
  .nav-links a.active { color: var(--accent) !important; background: rgba(245,168,0,.1) !important; }

  .hamburger { display: flex; }
  .nav-cta-wrap { display: none; }
  .nav-logo-img { height: 54px !important; }

  /* Hero carousel mobile */
  .hc-title { font-size: clamp(30px, 8vw, 52px); }
  .hc-sub { font-size: 14px; }
  .hc-cta { flex-direction: column; align-items: center; gap: 10px; }
  .hc-cta .btn { width: 100%; justify-content: center; }
  .hc-content { padding: 100px 20px 140px; }
  .hc-arrow { width: 38px; height: 38px; }
  .hc-arrow--prev { left: 10px; }
  .hc-arrow--next { right: 10px; }
  .hcs-item { padding: 0 10px; }
  .hcs-num { font-size: 20px; }
  .hcs-label { font-size: 9px; }

  .comms-ticker { display: none; }
  .site-header { top: 38px; }
  .site-header.scrolled { top: 0; }
  .topbar { height: 36px; }

  .section    { padding: 60px 0; }
  .section-sm { padding: 40px 0; }
  .section-header { margin-bottom: 36px; }

  .exp-cards { grid-template-columns: 1fr; }
  .exp-cards .exp-card:last-child { grid-column: span 1; max-height: none; }
  .rides-grid { grid-template-columns: 1fr; }
  .feature-strip { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:not(:first-child) { display: none; }
  .park-hero-visual { font-size: 70px; right: 4%; top: 20%; opacity: .4; }
  .park-hero { min-height: 55vh; }
  .park-hero-content { padding-top: 110px; }
  .hero-cta { flex-direction: column; align-items: flex-start; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero-text-col h1 { font-size: clamp(30px, 9vw, 44px); }
  .hero-stats { gap: 20px; }
  .stat-num { font-size: 26px; }
  .section-title { font-size: clamp(24px, 6vw, 36px); }
  .park-hero h1 { font-size: clamp(28px, 8vw, 44px); }
  .btn-xl { padding: 14px 24px; font-size: 15px; }
  .exp-card { height: 420px; }
  .passport-banner { padding: 28px 22px; }
  .passport-banner .passport-title { font-size: 24px; }
  .feature-strip { grid-template-columns: 1fr; }
  .feature-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
}

/* ============================================================
   MOBILE ENHANCEMENTS — Extended (≤640px)
   ============================================================ */
@media (max-width: 640px) {
  /* Quick Book Bar — stack vertically on mobile */
  .qbb-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 12px;
  }
  .qbb-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex: none;
  }
  .qbb-tabs .qbb-tab:last-child {
    grid-column: span 2;
  }
  .qbb-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
  .qbb-input { width: 100% !important; }
  .qbb-book-btn { width: 100% !important; text-align: center; }

  /* Hero carousel on small phones */
  .hero-wow-logo { height: 48px !important; margin-bottom: 14px; }
  .hc-stats { padding: 12px 10px; gap: 0; }
  .hcs-sep { display: none; }
  .hcs-item { flex: 1; text-align: center; border-right: 1px solid rgba(255,255,255,.1); padding: 0 6px; }
  .hcs-item:last-child { border-right: none; }

  /* CTA section mobile */
  .cta-btns { gap: 10px; }
  .cta-btns .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* Passport banner mobile */
  .passport-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .passport-logo { position: static; margin: 0 auto 20px; display: block; text-align: center; }
  .passport-content { text-align: center; }

  /* Pricing cards — single column with max width */
  .pricing-grid { grid-template-columns: 1fr !important; max-width: 380px !important; }

  /* Rides grid — 1 column on small */
  .rides-grid { grid-template-columns: 1fr !important; }

  /* Park hero — more padding top for nav */
  .park-hero { min-height: 100svh; }
  .park-hero-content { padding-top: 120px; padding-bottom: 60px; }
  .park-hero-meta { gap: 8px; }
  .meta-chip { font-size: 12px; padding: 5px 12px; }

  /* Section headers */
  .section-tag { font-size: 11px; }
  .section-title { font-size: clamp(22px, 6vw, 34px) !important; }
  .section-sub { font-size: 14px; }

  /* Video banner — stacked */
  .video-banner-section {
    flex-direction: column;
    padding: 48px 0;
    gap: 28px;
    text-align: center;
  }
  .vb-content { padding: 0 20px; align-items: center; }
  .vb-frame-wrap { padding: 0 20px; width: 100%; }
  .vb-title { font-size: clamp(24px, 6vw, 36px); }

  /* Explore cards */
  .exp-cards { grid-template-columns: 1fr !important; }
  .exp-cards .exp-card:last-child { grid-column: span 1 !important; max-height: none !important; }

  /* Info grid */
  .info-grid { grid-template-columns: 1fr !important; }
  .info-card { padding: 24px 20px; }

  /* Footer mobile improvements */
  .footer-logo-strip { text-align: center; }
  .footer-social { justify-content: center; }

  /* Attraction cards horizontal scroll on small */
  .attraction-scroll { padding: 0 16px 20px; }

  /* Offer strip */
  .offer-strip { font-size: 13px; }

  /* Dark section logos on mobile */
  .dark-section-logo { height: 48px !important; }
}

/* ── Tablet improvements (641–900px) ── */
@media (min-width: 641px) and (max-width: 900px) {
  .qbb-inner { gap: 10px; }
  .qbb-fields { flex-wrap: nowrap; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .rides-grid { grid-template-columns: repeat(2, 1fr); }
  .deals-grid { grid-template-columns: repeat(2, 1fr); }
}