/* ==========================================================================
   UP! Ultimate Adventure Park — Design System
   Bold, playful, climbing-wall themed. Ashburn, VA.
   ========================================================================== */

:root {
  /* ===== UP! brand palette (Brand Style Guidelines) ===== */
  /* Primary */
  --pink:   #e01d8c;
  --orange: #ee9500;
  --yellow: #fff000;
  --blue:   #4babe4;
  --green:  #80be42;
  --black:  #2b2829;
  /* Secondary */
  --purple:      #aa00be;
  --gold:        #eab325;
  --blue-deep:   #3779bf;
  --green-light: #b4d373;

  /* Neutrals derived from brand black (tints/shades of #2b2829) */
  --black-900: #1f1d1e;
  --black-800: #2b2829;
  --black-700: #383536;
  --ink: #2b2829;
  --white: #ffffff;
  --paper: #f7f6f2;
  --muted: #c7c4c2;
  --muted-dark: #6e6a68;

  /* Legacy aliases (map old names onto brand colors) */
  --navy-900: var(--black-900);
  --navy-800: var(--black-800);
  --navy-700: var(--black-700);
  --navy-600: var(--black-700);
  --purple-light: var(--purple);
  --magenta: var(--pink);
  --cyan: var(--blue);
  --lime: var(--green);
  --coral: var(--orange);
  --coral-soft: var(--gold);
  --brand-pink: var(--pink);

  /* Brand gradients */
  --grad-hero: linear-gradient(135deg, var(--purple) 0%, var(--pink) 45%, var(--orange) 100%);
  --grad-cta: linear-gradient(120deg, var(--pink) 0%, var(--orange) 100%);
  --grad-cool: linear-gradient(120deg, var(--blue-deep) 0%, var(--green) 100%);

  --shadow-sm: 0 4px 14px rgba(24, 22, 23, 0.12);
  --shadow-md: 0 14px 40px rgba(24, 22, 23, 0.18);
  --shadow-glow: 0 10px 40px rgba(224, 29, 140, 0.4);

  --radius: 18px;
  --radius-lg: 28px;
  --maxw: 1180px;

  --font-display: 'Bebas Neue', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, Segoe UI, sans-serif;

  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

/* ----------------------------- Reset ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--navy-900);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* Bebas Neue ships in a single (bold display) weight; all headlines are set in caps per brand */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: .98; letter-spacing: .022em; font-weight: 400; text-transform: uppercase; }

/* ------------------------ Background (calm, premium dark) ------------------------ */
.wall-bg {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(224,29,140,.13), transparent 62%),
    radial-gradient(820px 520px at 4% 112%, rgba(238,149,0,.09), transparent 60%),
    linear-gradient(180deg, #1f1d1e 0%, #262425 52%, #1f1d1e 100%);
}
.wall-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .7;
}
.wall-holds { display: none; }

/* ------------------------------ Layout ------------------------------ */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
/* Consistent vertical rhythm across every page */
.section { position: relative; padding: clamp(84px, 9.5vw, 136px) 0; }
.section--tight { padding: clamp(56px, 6.5vw, 88px) 0; }
.panel {
  background: var(--paper);
  position: relative; z-index: 1;
}
/* Kicker label — deliberately NOT button-like */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: .84rem; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--pink); padding: 0; border: none; background: none; border-radius: 0;
}
.eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--grad-cta); flex: none; }
.eyebrow svg { width: 13px; height: 13px; flex: none; }
.eyebrow--light { color: #fff; background: none; border: none; }
/* Solid pill variant reserved for the hero status (needs a readable box over photos) */
.eyebrow--solid {
  padding: 13px 22px; border-radius: 999px; font-size: .95rem; gap: 10px;
  background: rgba(25,23,24,.85); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px);
  margin-bottom: 26px;
}
.eyebrow--solid::before { display: none; }
.eyebrow--solid svg { width: 15px; height: 15px; }
.section-title { font-size: clamp(2rem, 4.5vw, 3.3rem); margin: 18px 0 14px; }
.section-lead { font-size: 1.12rem; color: var(--muted-dark); max-width: 620px; }
.center { text-align: center; }
.center .section-lead { margin-left: auto; margin-right: auto; }
.text-grad {
  background: var(--grad-hero); background-size: 220% 220%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: gradShift 7s ease-in-out infinite;
}
@keyframes gradShift { 0%,100% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } }

/* ------------------------------ Buttons ------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 400; font-size: 1.08rem; letter-spacing: .06em;
  padding: 15px 28px; border-radius: 14px 26px 14px 26px;
  transition: transform .25s var(--ease-bounce), box-shadow .25s ease, filter .25s ease;
  white-space: nowrap;
}
.btn-sm { border-radius: 10px 18px 10px 18px; }
.btn-lg { border-radius: 16px 30px 16px 30px; }
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--grad-cta); color: #fff; box-shadow: var(--shadow-glow); }
.btn-primary:hover { transform: translateY(-3px) scale(1.03); filter: brightness(1.05); }
.btn-cool { background: var(--grad-cool); color: #fff; box-shadow: 0 10px 30px rgba(75,171,228,.35); }
.btn-cool:hover { transform: translateY(-3px) scale(1.03); }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 2px solid rgba(255,255,255,.5); }
.btn-ghost:hover { background: #fff; color: var(--pink); transform: translateY(-3px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-sm { padding: 11px 20px; font-size: .9rem; }
.btn-lg { padding: 18px 36px; font-size: 1.1rem; }

/* --------------------------- Intro loader --------------------------- */
/* Animated UP! logo shown once per visit while the homepage loads */
#up-loader {
  position: fixed; inset: 0; z-index: 999;
  background: var(--ink, #1f1d1e);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease;
}
#up-loader.done { opacity: 0; pointer-events: none; }
.intro-lock { overflow: hidden; }
.ld-inner { display: flex; flex-direction: column; align-items: center; gap: 30px; }
#up-loader img {
  width: min(240px, 52vw); height: auto;
  animation: ldPop .85s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes ldPop {
  from { transform: scale(.5) translateY(24px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.ld-dots { display: flex; gap: 11px; animation: ldFade .5s .35s both; }
@keyframes ldFade { from { opacity: 0; } to { opacity: 1; } }
.ld-dots span { width: 13px; height: 13px; border-radius: 50%; animation: ldBounce 1s infinite ease-in-out; }
.ld-dots span:nth-child(1) { background: var(--pink, #e01d8c);   animation-delay: 0s; }
.ld-dots span:nth-child(2) { background: var(--orange, #ee9500); animation-delay: .12s; }
.ld-dots span:nth-child(3) { background: var(--yellow, #fff000); animation-delay: .24s; }
.ld-dots span:nth-child(4) { background: var(--blue, #4babe4);   animation-delay: .36s; }
.ld-dots span:nth-child(5) { background: var(--green, #80be42);  animation-delay: .48s; }
@keyframes ldBounce {
  0%, 100% { transform: translateY(0); opacity: .55; }
  40%      { transform: translateY(-12px); opacity: 1; }
}

/* ------------------------------ Header ------------------------------ */
/* Header: transparent over the hero (with a soft dark scrim so the logo always
   reads on a dark background), then solid brand black once you scroll */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease, backdrop-filter .35s ease;
  padding: 14px 0;
  background: linear-gradient(180deg, rgba(25,23,24,.72) 0%, rgba(25,23,24,.32) 62%, transparent 100%);
}
.site-header.scrolled {
  background: rgba(31,29,30,.97);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 8px 0;
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand-mark { height: 54px; width: auto; display: block; }
.brand-name {
  font-family: var(--font-display); font-weight: 400; font-size: .92rem;
  letter-spacing: .18em; line-height: 1.1; color: #fff; text-transform: uppercase;
}
.site-header.scrolled .brand-mark { height: 46px; }

/* Stacked logo repeated over the hero */
.hero-logo { height: clamp(96px, 11vw, 140px); width: auto; margin-bottom: 26px; filter: drop-shadow(0 8px 26px rgba(0,0,0,.55)); }

/* Solid pill so hours/status stay readable over photos */
.eyebrow--solid { background: rgba(25,23,24,.82); border-color: rgba(255,255,255,.22); backdrop-filter: blur(6px); }

/* Brighter blue→green gradient for the hero headline */
.text-grad--cool { background: linear-gradient(115deg, #4babe4 0%, #80be42 60%, #b4d373 100%); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Header — one symmetrical row */
.site-header .container { max-width: 1340px; }
.nav { gap: 14px; }
.nav-links { gap: 1px; }
.nav-links > li > a, .nav-links > li > .nav-trigger { padding: 9px 11px; font-size: .9rem; white-space: nowrap; }
.nav-cta { gap: 8px; flex: none; }
.nav-cta .btn-sm { padding: 10px 15px; font-size: .85rem; }

/* Social icons (brand SVGs) */
.social-row svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* Drifting reviews marquee */
.rank-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: .9rem;
  color: #fff; background: var(--grad-cta); padding: 10px 20px; border-radius: 999px;
  box-shadow: var(--shadow-glow); margin-bottom: 16px; letter-spacing: .01em;
}
.rating-line { margin-top: 12px; color: var(--muted-dark); font-weight: 600; }
.rating-line .rstars { color: var(--gold); letter-spacing: 2px; margin-right: 6px; }
.reviews-section { overflow: hidden; }
.review-marquee { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.review-track { display: flex; gap: 22px; width: max-content; animation: drift 48s linear infinite; }
/* Pause only while pointing at (or touch-holding) an individual review card */
.review-track:has(.review-card:hover) { animation-play-state: paused; }
.review-track.touch-paused { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(-50%); } }
.review-card {
  flex: 0 0 360px; width: 360px; background: #fff; border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm); border: 1px solid rgba(43,40,41,.06);
  display: flex; flex-direction: column;
}
.review-card .stars { color: var(--gold); font-size: 1rem; letter-spacing: 2px; margin-bottom: 10px; }
.review-card blockquote { color: var(--ink); font-size: .98rem; line-height: 1.6; margin-bottom: 16px; flex: 1; }
.review-card figcaption { display: flex; flex-direction: column; }
.review-card .who { font-family: var(--font-display); font-weight: 800; color: var(--ink); }
.review-card .src { font-size: .8rem; color: var(--muted-dark); }
@media (prefers-reduced-motion: reduce) { .review-track { animation: none; flex-wrap: wrap; } }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > li > a, .nav-links > li > .nav-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  color: #f2f1ee; font-weight: 700; font-size: .92rem;
  padding: 10px 14px; border-radius: 999px; transition: color .2s, background .2s;
}
.nav-links > li > a:hover, .nav-links > li > .nav-trigger:hover { color: #fff; background: rgba(255,255,255,.1); }
.nav-links a.active { color: var(--yellow); }
.has-drop { position: relative; }
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  background: rgba(43,40,41,.97); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  padding: 8px; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.has-drop:hover .dropdown, .has-drop:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(6px); }
.dropdown a { display: block; color: #e8e6e2; padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: .9rem; }
.dropdown a:hover { background: var(--pink); color: #fff; }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.12); }
.nav-toggle span { display: block; width: 22px; height: 2.5px; background: #fff; margin: 4px auto; border-radius: 2px; transition: .3s; }

/* ------------------------------ Hero ------------------------------ */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  padding: 130px 0 80px; overflow: hidden;
}
.hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); color: #fff; }
.hero h1 .pop { display: inline-block; }
.hero-sub { color: var(--muted); font-size: 1.22rem; margin: 22px 0 30px; max-width: 540px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 30px; margin-top: 40px; flex-wrap: wrap; }
.hero-stat .num { font-family: var(--font-display); font-size: 2.4rem; color: #fff; line-height: 1; }
.hero-stat .lbl { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-top: 6px; }

/* Hero climbing-wall panel */
.climb-panel {
  position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(224,29,140,.25), transparent 60%),
    linear-gradient(180deg, #383536, #242122);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.climb-panel .panel-label {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; background: rgba(0,0,0,.3);
  padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
}
.route-hold {
  position: absolute; width: 40px; height: 40px; border-radius: 46% 54% 60% 40% / 55% 45% 55% 45%;
  box-shadow: inset -5px -7px 12px rgba(0,0,0,.4), inset 3px 4px 8px rgba(255,255,255,.4);
}
.climber {
  position: absolute; left: 50%; bottom: 8%; width: 52px; height: 52px;
  transform: translateX(-50%); z-index: 2;
  font-size: 2.7rem; line-height: 1; filter: drop-shadow(0 8px 10px rgba(0,0,0,.4));
  animation: climb 6s var(--ease-bounce) infinite;
}
@keyframes climb {
  0% { bottom: 8%; transform: translateX(-50%) rotate(-3deg); }
  25% { bottom: 34%; transform: translateX(-66%) rotate(4deg); }
  50% { bottom: 58%; transform: translateX(-40%) rotate(-4deg); }
  75% { bottom: 80%; transform: translateX(-60%) rotate(3deg); }
  100% { bottom: 8%; transform: translateX(-50%) rotate(-3deg); }
}

/* ------------------------- Photo hero (homepage) ------------------------- */
.hero-photo { position: relative; min-height: 100vh; display: flex; align-items: flex-end; padding: 120px 0 9vh; overflow: hidden; }
.hero-photo .bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transform: scale(1.06); animation: heroZoom 20s ease-in-out infinite alternate;
}
@keyframes heroZoom { to { transform: scale(1.15); } }
.hero-photo .overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(25,23,24,.78) 0%, rgba(25,23,24,.35) 52%, transparent 78%),
    linear-gradient(180deg, rgba(25,23,24,.45) 0%, rgba(25,23,24,.05) 26%, rgba(25,23,24,.72) 74%, rgba(25,23,24,.97) 100%);
}
.hero-photo .container { position: relative; z-index: 2; width: 100%; }
.hero-photo-inner { max-width: 740px; }
.hero-photo h1 { font-size: clamp(2.8rem, 6.6vw, 5.4rem); color: #fff; text-shadow: 0 6px 40px rgba(0,0,0,.45); }
.hero-photo .hero-sub { color: #efeeeb; max-width: 560px; }
.hero-photo .hero-stat .num { text-shadow: 0 4px 24px rgba(0,0,0,.4); }
.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 1.5rem; border: 1.5px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.06); backdrop-filter: blur(4px);
  animation: bob 1.9s ease-in-out infinite;
}
.scroll-cue svg { width: 20px; height: 20px; display: block; }
.scroll-cue:hover { background: rgba(255,255,255,.16); }
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,9px); } }

/* Carousel hero */
.hero-carousel .slides { position: absolute; inset: 0; }
.hero-carousel .slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.3s ease; will-change: opacity;
}
.hero-carousel .slide.is-active { opacity: 1; animation: heroZoom 8s ease-out forwards; }
.carousel-dots { position: absolute; right: 30px; bottom: 26px; z-index: 4; display: flex; gap: 9px; }
.carousel-dots button {
  width: 11px; height: 11px; border-radius: 999px; background: rgba(255,255,255,.45);
  transition: width .3s, background .3s; cursor: pointer;
}
.carousel-dots button.active { background: #fff; width: 30px; }
@media (max-width: 760px) { .carousel-dots { right: 50%; transform: translateX(50%); bottom: 84px; } }

/* ------------------------------ Marquee ------------------------------ */
/* One seamless dark band: just the drifting ticker, centered, no divider lines */
.marquee { background: transparent; border: none; padding: 34px 0 30px; overflow: hidden; white-space: nowrap; display: flex; align-items: center; }
.marquee-track { display: inline-flex; gap: 38px; animation: marquee 26s linear infinite; }
.marquee span { font-family: var(--font-display); color: var(--muted); font-size: 1.02rem; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 38px; }
.marquee span::after { content: "●"; color: var(--coral); font-size: .42em; vertical-align: middle; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------ Cards / grids ------------------------------ */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.feature-card {
  background: #fff; border-radius: var(--radius); padding: 30px;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  border: 1px solid rgba(43,40,41,.06);
  transition: transform .3s var(--ease-bounce), box-shadow .3s;
}
.feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.feature-card .ic {
  width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;
  font-size: 1.7rem; margin-bottom: 18px; color: #fff;
  transition: transform .35s var(--ease-bounce);
}
.feature-card:hover .ic { transform: rotate(-7deg) scale(1.12); }
.feature-card h3 { font-size: 1.4rem; margin-bottom: 10px; color: var(--ink); }
.feature-card p { color: var(--muted-dark); font-size: .98rem; }
.feature-card .tag { position: absolute; top: 18px; right: 18px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 5px 11px; border-radius: 999px; }
.feature-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: 100%;
  background: var(--accent, var(--purple)); transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.feature-card:hover::after { transform: scaleX(1); }

/* Big attraction split rows */
.attraction {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 64px); align-items: center;
  padding: clamp(36px, 4.5vw, 56px) 0;
}
.attraction:nth-child(even) .attraction-media { order: 2; }
.attraction-media {
  border-radius: var(--radius-lg); min-height: 340px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-md); display: grid; place-items: center;
  transition: transform .45s var(--ease-bounce), box-shadow .45s ease;
}
.attraction-media:hover { transform: scale(1.02) rotate(-.35deg); box-shadow: 0 24px 60px rgba(24,22,23,.28); }
.attraction-media .emoji { font-size: 6rem; filter: drop-shadow(0 12px 18px rgba(0,0,0,.3)); }
.attraction h3 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--ink); margin-bottom: 14px; }
.attraction p { color: var(--muted-dark); font-size: 1.05rem; margin-bottom: 18px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.chip-row--nowrap { flex-wrap: nowrap; }
.chip-row--nowrap .chip { white-space: nowrap; }
@media (max-width: 600px) { .chip-row--nowrap { flex-wrap: wrap; } }
/* Feature ticks — plain text so they don't read as buttons */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .84rem; font-weight: 600; padding: 0; border-radius: 0;
  background: none; color: var(--muted-dark);
}
.chip::before { content: "✓"; color: var(--green); font-weight: 900; font-size: .95em; }

/* FAQ deep-link under attractions */
.faq-link {
  display: inline-flex; align-items: center; margin-top: 18px;
  font-family: var(--font-display); font-size: .95rem; letter-spacing: .06em;
  color: var(--blue-deep); border-bottom: 2px solid rgba(55,121,191,.3);
  transition: border-color .2s, color .2s;
}
.faq-link:hover { color: var(--pink); border-color: var(--pink); }
.faq-link::before { content: "Q · "; font-weight: 400; margin-right: 5px; color: var(--muted-dark); }

/* Live hours on Google */
.gmb-link { display: inline-block; margin-top: 12px; font-size: .84rem; font-weight: 600; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.panel .gmb-link, .side-card .gmb-link, .info-card .gmb-link { color: var(--blue-deep); }

/* EatUP! Café logo overlapping the banner */
.eatup-logo {
  width: clamp(120px, 14vw, 176px); height: auto; display: block;
  margin: 0 auto -64px; position: relative; z-index: 5;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.35));
}

/* Stat band */
.stat-band { background: var(--ink); color: #fff; }
.stat-band .grid-4 { gap: 18px; }
.stat-box { text-align: center; padding: 22px; }
.stat-box .num { font-family: var(--font-display); font-size: clamp(2.2rem,5vw,3.4rem); }
.stat-box .lbl { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; margin-top: 6px; }

/* CTA band */
.cta-band { text-align: center; background: var(--grad-hero); color: #fff; border-radius: 0; }
.cta-band h2 { font-size: clamp(2rem,4.5vw,3.2rem); margin-bottom: 14px; }
.cta-band p { color: rgba(255,255,255,.9); font-size: 1.15rem; max-width: 560px; margin: 0 auto 26px; }
.cta-band .btn-ghost { border-color: #fff; }

/* Pricing / party cards */
.price-card { background: #fff; border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-sm); border: 2px solid transparent; transition: transform .3s var(--ease-bounce), border-color .3s; position: relative; display: flex; flex-direction: column; }
.price-card .btn { margin-top: auto; }
.price-tag { font-family: var(--font-display); font-weight: 700; color: var(--coral); font-size: 1.1rem; margin: 6px 0 10px; }
.price-desc { color: var(--muted-dark); font-size: .96rem; margin-bottom: 4px; }
.price-card:hover { transform: translateY(-8px); }
.price-card.featured { border-color: var(--magenta); box-shadow: var(--shadow-md); }
.price-card .ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--grad-cta); color: #fff; font-family: var(--font-display); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; padding: 6px 18px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.price-card h3 { font-size: 1.5rem; color: var(--ink); }
.price-card .price { font-family: var(--font-display); font-size: 2.6rem; color: var(--purple); margin: 8px 0; }
.price-card .price small { font-size: .9rem; color: var(--muted-dark); font-family: var(--font-body); font-weight: 600; }
.price-card ul { margin: 18px 0 24px; display: grid; gap: 11px; }
.price-card li { display: flex; gap: 10px; color: var(--muted-dark); font-size: .96rem; }
.price-card li::before { content: "✓"; color: var(--lime); font-weight: 900; }

/* FAQ accordion */
.faq-item { background: #fff; border-radius: 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 22px 26px; font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.faq-q .plus { font-size: 1.5rem; color: var(--pink); transition: transform .3s; flex: none; }
.faq-item.open .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a-inner { padding: 0 26px 22px; color: var(--muted-dark); }

/* Reveal animations (directional + zoom variants) */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s var(--ease-bounce); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.rv-l { opacity: 0; transform: translateX(-52px); transition: opacity .8s ease, transform .8s var(--ease-bounce); }
.rv-r { opacity: 0; transform: translateX(52px);  transition: opacity .8s ease, transform .8s var(--ease-bounce); }
.reveal-zoom { opacity: 0; transform: scale(.92); transition: opacity .8s ease, transform .8s var(--ease-bounce); }
.rv-l.in, .rv-r.in, .reveal-zoom.in { opacity: 1; transform: none; }

/* ------------------------------ Footer ------------------------------ */
.site-footer { background: var(--navy-900); color: var(--muted); padding: 70px 0 30px; position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
.site-footer h4 { color: #fff; font-size: 1.05rem; margin-bottom: 16px; }
.site-footer a { color: var(--muted); font-size: .94rem; line-height: 2.1; transition: color .2s; }
.site-footer a:hover { color: var(--yellow); }
.footer-brand p { margin-top: 14px; font-size: .94rem; }
.social-row { display: flex; gap: 10px; margin-top: 18px; }
.social-row a { width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.08); display: grid; place-items: center; color: #fff; font-size: 1rem; transition: background .25s, transform .25s; }
.social-row a:hover { background: var(--grad-cta); transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 44px; padding-top: 22px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .85rem; }

/* Hours table */
.hours-list { display: grid; gap: 8px; }
.hours-list li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed rgba(255,255,255,.12); }
.hours-list li.today { color: var(--yellow); font-weight: 800; }

/* Page hero (interior) */
.page-hero { padding: 150px 0 0; text-align: center; position: relative; }
.page-hero h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); color: #fff; }
.page-hero p { color: var(--muted); font-size: 1.15rem; max-width: 640px; margin: 18px auto 0; }
.breadcrumb { display: inline-flex; gap: 8px; color: var(--muted); font-size: .85rem; margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--yellow); }

/* Local / city page bits */
.local-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 18px; }
.local-card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: var(--shadow-sm); border-left: 5px solid var(--accent, var(--purple)); transition: transform .3s var(--ease-bounce); }
.local-card:hover { transform: translateY(-6px); }
.local-card h3 { font-size: 1.15rem; color: var(--ink); margin-bottom: 8px; }
.local-card p { color: var(--muted-dark); font-size: .92rem; }
.city-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 12px; }
.city-pill { background: #fff; border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: space-between; gap: 10px; transition: transform .25s var(--ease-bounce), box-shadow .25s; }
.city-pill:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.city-pill .nm { font-family: var(--font-display); color: var(--ink); font-size: 1.02rem; }
.city-pill .mi { font-size: .78rem; color: var(--muted-dark); }
.city-pill .arrow { color: var(--pink); font-weight: 900; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: 7px; color: var(--ink); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 13px 16px; border-radius: 12px; border: 1.5px solid #e8e6e2;
  font-family: inherit; font-size: 1rem; background: #fff; transition: border-color .2s, box-shadow .2s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--blue-deep); box-shadow: 0 0 0 4px rgba(55,121,191,.14); }
.info-card { background: #fff; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.info-card .ic { font-size: 1.5rem; margin-bottom: 8px; }
.info-card h4 { color: var(--ink); margin-bottom: 6px; }
.info-card p, .info-card a { color: var(--muted-dark); }

/* Contact — refreshed layout */
.muted-sub { color: var(--muted-dark); font-size: .95rem; margin-bottom: 16px; }
.contact-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 40px; }
.contact-tile {
  background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(43,40,41,.06); display: flex; flex-direction: column;
  transition: transform .3s var(--ease-bounce), box-shadow .3s;
}
.contact-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.contact-tile .ct-ic { font-size: 1.7rem; margin-bottom: 12px; }
.contact-tile h4 { color: var(--ink); font-size: 1.1rem; margin-bottom: 6px; }
.contact-tile p { color: var(--muted-dark); font-size: .88rem; flex: 1; word-break: break-word; }
.contact-tile .ct-link { margin-top: 12px; font-family: var(--font-display); font-weight: 700; color: var(--coral); font-size: .85rem; }

.contact-main { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; align-items: stretch; }
/* Let the message field grow so the form card bottom lines up with the side cards */
.contact-form-card { display: flex; flex-direction: column; }
.contact-form-card form { display: flex; flex-direction: column; flex: 1; }
.contact-form-card .form-field:nth-last-child(2) { flex: 1; display: flex; flex-direction: column; }
.contact-form-card .form-field:nth-last-child(2) textarea { flex: 1; min-height: 120px; resize: vertical; }
.contact-side .side-card:first-child { flex: 1; }
.contact-side { display: flex; flex-direction: column; gap: 18px; }
.contact-form-card { background: #fff; border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-md); border: 1px solid rgba(43,40,41,.06); }
.contact-form-card h3 { font-size: 1.5rem; color: var(--ink); margin-bottom: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-side { display: grid; gap: 18px; }
.side-card { background: #fff; border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); border: 1px solid rgba(43,40,41,.06); }
.side-card h4 { color: var(--ink); font-size: 1.15rem; margin-bottom: 14px; font-family: var(--font-display); }
.side-card .hours-list li { border-bottom-color: #ecebe7; color: var(--muted-dark); }
.side-card .social-row a { background: var(--ink); }

.contact-map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); height: 440px; border: 1px solid rgba(43,40,41,.08); }
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(1.05); }
@media (max-width: 980px) {
  .contact-tiles { grid-template-columns: 1fr 1fr; }
  .contact-main { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .contact-tiles { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } }

/* Menu (cafe) */
.menu-card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid rgba(43,40,41,.06); border-top: 4px solid var(--coral); transition: transform .3s var(--ease-bounce), box-shadow .3s; }
.menu-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.menu-card .menu-ic { font-size: 1.9rem; margin-bottom: 8px; }
.menu-card h4 { color: var(--purple); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.menu-grid { columns: 2; column-gap: 22px; }
.menu-grid .menu-card { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 22px; }
.mc-sub { color: var(--muted-dark); font-size: .82rem; margin: -8px 0 14px; }
.menu-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px dashed #ecebe7; }
.menu-item:last-child { border-bottom: none; }
.menu-item .mi-ic { font-size: 1.35rem; line-height: 1.25; flex: none; }
.menu-item .mi-main { display: flex; flex-direction: column; flex: 1; }
.menu-item .nm { font-weight: 700; color: var(--ink); }
.menu-item .md { color: var(--muted-dark); font-size: .84rem; margin-top: 2px; }
.menu-item .pr { color: var(--magenta); font-weight: 800; font-family: var(--font-display); flex: none; white-space: nowrap; }
@media (max-width: 760px) { .menu-grid { columns: 1; } }

/* Video (YouTube) embeds */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.video-card { display: flex; flex-direction: column; }
.video-embed { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card h3 { color: #fff; font-size: 1.15rem; margin: 16px 0 6px; }
.video-card p { color: var(--muted); font-size: .92rem; }

/* Instagram reels — branded gradient frames showing ONLY the account header + video.
   Fixed 296px columns keep the crop geometry exact; heights measured per reel on the
   live embeds (update if IG_REELS codes change). */
.ig-grid { display: grid; grid-template-columns: repeat(3, 296px); gap: 26px; justify-content: center; }
.ig-frame {
  padding: 4px; border-radius: 24px; background: var(--grad-hero); align-self: start;
  box-shadow: var(--shadow-md); transition: transform .35s var(--ease-bounce), box-shadow .35s;
}
.ig-frame:hover { transform: translateY(-6px); box-shadow: 0 22px 54px rgba(24,22,23,.26); }
.ig-embed { border-radius: 20px; overflow: hidden; background: #fff; height: 414px; position: relative; }
.ig-embed iframe { width: 296px; height: 1000px; border: 0; display: block; }
@media (max-width: 990px) {
  .video-grid { grid-template-columns: 1fr; }
  .ig-grid { grid-template-columns: 296px; }
}

/* Party gallery */
.party-gallery .framed-photo img { height: 300px; width: 100%; object-fit: cover; }
@media (max-width: 760px) { .party-gallery .framed-photo img { height: 220px; } }

/* Two-up gallery — equal crop, no white space */
.gallery-2 .framed-photo img { height: 360px; width: 100%; object-fit: cover; }
@media (max-width: 760px) { .gallery-2 .framed-photo img { height: 240px; } }

/* (reviews now rendered as a drifting marquee — see above) */

/* Utility */
.mt-0 { margin-top: 0; }
.text-light, .text-light p { color: var(--muted); }
.text-light h2, .text-light h3 { color: #fff; }
.divider-top { border-top: 1px solid rgba(255,255,255,.08); }
.badge-live { display: inline-flex; align-items: center; gap: 7px; color: var(--lime); font-weight: 800; font-size: .85rem; }
.badge-live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(128,190,66,.7); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(128,190,66,.6);} 70% { box-shadow: 0 0 0 10px rgba(128,190,66,0);} 100% { box-shadow: 0 0 0 0 rgba(128,190,66,0);} }

/* ------------------------------ Blog ------------------------------ */
.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.filter-chip {
  font-family: var(--font-display); font-weight: 700; font-size: .88rem;
  padding: 9px 18px; border-radius: 999px; background: #fff; color: var(--muted-dark);
  border: 1.5px solid #e8e6e2; transition: all .2s;
}
.filter-chip:hover { border-color: var(--pink); color: var(--pink); }
.filter-chip.active { background: var(--grad-cta); color: #fff; border-color: transparent; box-shadow: var(--shadow-sm); }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-card {
  display: flex; flex-direction: column; background: #fff; border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm); border: 1px solid rgba(43,40,41,.06);
  transition: transform .3s var(--ease-bounce), box-shadow .3s;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.blog-cat {
  font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--purple); background: rgba(170,0,190,.08);
  padding: 5px 11px; border-radius: 999px; align-self: flex-start; margin-bottom: 14px;
}
.blog-card h3 { font-size: 1.2rem; color: var(--ink); margin-bottom: 10px; line-height: 1.25; }
.blog-card p { color: var(--muted-dark); font-size: .94rem; flex: 1; }
.blog-readmore { margin-top: 16px; font-family: var(--font-display); font-weight: 700; color: var(--coral); font-size: .9rem; }

.blog-article .blog-cat { font-size: .78rem; }
.blog-body { font-size: 1.06rem; color: #3a3737; }
.blog-body .blog-lead { font-size: 1.2rem; color: var(--ink); font-weight: 500; margin-bottom: 24px; line-height: 1.6; }
.blog-body h2 { font-size: 1.5rem; color: var(--ink); margin: 30px 0 12px; }
.blog-body p { margin-bottom: 16px; line-height: 1.75; }
.blog-body a { color: var(--blue-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.inline-cta {
  background: var(--paper); border-left: 4px solid var(--coral); border-radius: 12px;
  padding: 16px 20px; margin: 24px 0; font-size: 1rem; color: var(--ink);
}
.inline-cta a { color: var(--blue-deep); font-weight: 700; }
@media (max-width: 1040px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .blog-grid { grid-template-columns: 1fr; } }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .climb-panel { max-width: 420px; margin: 0 auto; order: -1; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .attraction { grid-template-columns: 1fr; gap: 22px; }
  .attraction:nth-child(even) .attraction-media { order: -1; }
}
@media (max-width: 1040px) {
  .nav-links, .nav-cta .btn:not(.nav-toggle) { display: none; }
  .nav-toggle { display: block; }
  html.nav-locked, html.nav-locked body { overflow: hidden; }
  .nav.mobile-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 70px; left: 12px; right: 12px;
    background: rgba(43,40,41,.98); backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 14px;
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav.mobile-open .nav-links > li > a, .nav.mobile-open .nav-links > li > .nav-trigger { padding: 14px; font-size: 1.05rem; }
  .nav.mobile-open .dropdown { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; border: none; box-shadow: none; padding: 0 0 0 14px; }
  .section { padding: 64px 0; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 22px; }
}

/* ------------------------ EatUP! Café banner ------------------------ */
.cafe-banner { background: #1f1d1e; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid rgba(255,255,255,.06); aspect-ratio: 2 / 1; max-height: 420px; margin: 0 auto; }
.cafe-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }

/* Generic photo fill for media frames (faces kept in frame) */
.cover-fill { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }

/* City pages photo banner */
.city-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 21 / 8; }
.city-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Generic framed photo used to sprinkle imagery on content pages */
.framed-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.framed-photo img { width: 100%; display: block; transition: transform .8s ease; }
.framed-photo:hover img { transform: scale(1.04); }
.city-photo img { transition: transform .8s ease; }
.city-photo:hover img { transform: scale(1.04); }

/* ============================ Brand personality ============================ */
/* Buttons: branded, with a chalk-line shine sweep and brand-colored glow */
.btn { position: relative; overflow: hidden; letter-spacing: .01em; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg); transition: left .6s ease; pointer-events: none;
}
.btn:hover::after { left: 135%; }
.btn-primary:hover { box-shadow: 0 16px 42px rgba(238,149,0,.5); }
.btn-dark:hover { box-shadow: 0 14px 34px rgba(224,29,140,.42); }
.btn-cool:hover { box-shadow: 0 14px 34px rgba(75,171,228,.45); }
.btn-ghost:hover { box-shadow: 0 12px 30px rgba(255,255,255,.18); }

/* Chips + kickers → branded organic tags matching the button shape */
.chip { letter-spacing: .01em; }
.filter-chip { border-radius: 8px 16px 8px 16px; }
.rank-badge { border-radius: 12px 22px 12px 22px; }

/* Tags get a subtle hand-placed corner for personality */
.feature-card .tag, .price-card .ribbon { border-radius: 7px 12px 7px 12px; }

/* ---------------- Mobile density (mobile only — desktop untouched) ---------------- */
@media (max-width: 760px) {
  .section { padding: 48px 0; }
  .section--tight { padding: 34px 0; }
  .page-hero { padding: 104px 0 0; }
  .page-hero p { font-size: 1.02rem; margin-top: 14px; }
  .hero-photo, .hero-carousel { min-height: 86vh; padding: 96px 0 132px; }
  .scroll-cue { bottom: 18px; width: 42px; height: 42px; }
  .hero-sub { font-size: 1.04rem; margin: 16px 0 22px; }
  .hero-stats { gap: 20px; margin-top: 26px; }
  .hero-stat .num { font-size: 1.9rem; }
  .section-title { font-size: clamp(1.6rem, 7vw, 2.1rem); margin: 12px 0 10px; }
  .section-lead { font-size: 1rem; }
  .attraction { gap: 16px; padding: 22px 0; }
  .attraction h3 { font-size: 1.55rem; }
  .attraction p { font-size: .97rem; margin-bottom: 14px; }
  .attraction-media { min-height: 210px; }
  .feature-card, .price-card, .blog-card, .review-card, .info-card,
  .contact-tile, .side-card, .menu-card, .contact-form-card { padding: 20px; }
  .feature-card h3 { font-size: 1.25rem; }
  .feature-card .ic { width: 50px; height: 50px; font-size: 1.4rem; margin-bottom: 12px; }
  .ig-embed iframe { height: 460px; }
  .footer-grid { gap: 26px; }
  .footer-brand p { font-size: .9rem; }
  .btn-lg { padding: 14px 24px; font-size: 1rem; }
  .cafe-banner { aspect-ratio: 3 / 2; }
}
@media (max-width: 600px) {
  .section { padding: 40px 0; }
  .hero-photo h1, .hero h1, .page-hero h1 { font-size: clamp(2.1rem, 9vw, 3rem); }
  .marquee span { font-size: .9rem; gap: 26px; }
  .review-card { flex: 0 0 282px; width: 282px; padding: 22px; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .btn::after { display: none; }
}

/* ---------------- Brand wave divider (from the letterhead) ---------------- */
.wave-divider { line-height: 0; position: relative; z-index: 2; margin-bottom: -1px; overflow: hidden; }
.wave-divider svg { width: 100%; height: clamp(42px, 6vw, 84px); display: block; }
.page-hero .wave-divider { margin-top: clamp(36px, 5vw, 64px); }
/* Waves drift left-to-right together (paths tile every 1440 units).
   The gradient paints the bottom color behind the svg's lower half so no
   hairline seam can show between the divider and the next section. */
.wave-divider { background: linear-gradient(180deg, transparent 0 75%, var(--wave-bottom, #fff) 75%); }
.wave-divider path { animation: wave-drift 22s linear infinite; will-change: transform; }
@keyframes wave-drift {
  from { transform: translateX(-1440px); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wave-divider path { animation: none; }
}

/* ---------------- FAQ chatbot ---------------- */
#up-chat { position: fixed; right: 30px; bottom: 54px; z-index: 900; font-family: var(--font-body); }
.chat-launch {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 400; font-size: 1.02rem; letter-spacing: .06em;
  padding: 13px 22px; border-radius: 14px 26px 14px 26px;
  background: var(--grad-cta); color: #fff; border: none; cursor: pointer;
  box-shadow: 0 10px 26px rgba(224, 29, 140, .35);
  transition: transform .25s var(--ease-bounce), box-shadow .25s ease;
}
.chat-launch:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(224, 29, 140, .45); }
.chat-launch svg { width: 21px; height: 21px; flex: none; }
.chat-panel[hidden] { display: none !important; }
.chat-panel {
  position: absolute; right: 0; bottom: 62px;
  width: min(350px, calc(100vw - 44px));
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .32);
  display: flex; flex-direction: column;
  animation: chatIn .3s cubic-bezier(.34, 1.4, .64, 1) both;
}
@keyframes chatIn { from { transform: translateY(16px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.chat-head {
  background: var(--ink); color: #fff;
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
}
.chat-avatar { width: 40px; height: auto; flex: none; }
.chat-head-txt { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.chat-head-txt strong { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .05em; font-weight: 400; }
.chat-head-txt span { font-size: .78rem; color: var(--muted, #c7c4c2); }
.chat-close {
  background: rgba(255, 255, 255, .1); border: none; color: #fff;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.chat-close:hover { background: rgba(255, 255, 255, .22); }
.chat-msgs { padding: 18px 16px 10px; overflow-y: auto; max-height: 300px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.chat-msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: .92rem; line-height: 1.55; }
.chat-msg.bot { background: var(--paper); color: var(--ink); border-bottom-left-radius: 5px; align-self: flex-start; }
.chat-msg.user { background: var(--grad-cta); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
.chat-msg.typing span { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--muted-dark, #6e6a68); animation: chatDot 1s infinite ease-in-out; }
.chat-msg.typing span:nth-child(2) { animation-delay: .15s; }
.chat-msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.chat-links { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.chat-links a { color: var(--blue-deep); font-weight: 600; font-size: .88rem; text-decoration: none; }
.chat-links a:hover { text-decoration: underline; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 16px 14px; background: #fff; }
.chat-chips button {
  border: 1px solid rgba(0, 0, 0, .12); background: #fff; color: var(--muted-dark, #6e6a68);
  font-size: .8rem; padding: 7px 13px; border-radius: 999px; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.chat-chips button:hover { border-color: var(--pink); color: var(--pink); background: rgba(224, 29, 140, .05); }
.chat-form { display: flex; align-items: center; border-top: 1px solid rgba(0, 0, 0, .07); background: var(--paper); }
.chat-form input { flex: 1; border: none; background: none; padding: 15px 16px; font-size: .95rem; font-family: inherit; outline: none; color: var(--ink); }
.chat-form button {
  border: none; background: none; color: var(--pink); cursor: pointer;
  padding: 0 16px; display: flex; align-items: center;
  transition: transform .2s;
}
.chat-form button:hover { transform: translateX(2px); }
.chat-form button svg { width: 21px; height: 21px; }
@media (max-width: 600px) {
  #up-chat { right: 14px; bottom: 16px; }
  .chat-panel { bottom: 60px; }
  .chat-msgs { max-height: 44vh; }
}

/* ---------------- Fox 5 hero video ---------------- */
.fox5-section { background: var(--black-800); overflow: hidden; }
.fox5-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 480px at 12% 0%, rgba(224,29,140,.14), transparent 60%),
    radial-gradient(760px 420px at 92% 100%, rgba(75,171,228,.12), transparent 60%);
}
.fox-video {
  position: relative; max-width: 980px; margin: 0 auto;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.09);
}
.fox-video video { display: block; width: 100%; height: auto; }
.fox-badge {
  position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: rgba(25,23,24,.72); backdrop-filter: blur(8px);
  padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
}
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 0 rgba(255,59,48,.7); animation: pulse 1.6s infinite; }
.fox-sound {
  position: absolute; right: 18px; bottom: 18px; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; cursor: pointer;
  background: rgba(25,23,24,.72); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.22);
  transition: transform .25s var(--ease-bounce), background .25s;
}
.fox-sound:hover { transform: scale(1.1); background: var(--pink); }
.fox-sound svg { width: 24px; height: 24px; }
.fox-sound .ic-on { display: none; }
.fox-video.sound-on .fox-sound .ic-on { display: block; }
.fox-video.sound-on .fox-sound .ic-off { display: none; }

/* ---------------- Café menu with food photos ---------------- */
.menu-card { padding-top: 0; overflow: hidden; }
.menu-photo { margin: 0 -24px 0; height: 170px; overflow: hidden; }
.menu-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.menu-card:hover .menu-photo img { transform: scale(1.06); }
.menu-card .menu-ic {
  margin-top: -23px; position: relative; z-index: 2;
  border: 3px solid #fff; box-shadow: var(--shadow-sm);
}

/* ---------------- Flat brand icons (replace emoji) ---------------- */
.flat-ic { display: inline-flex; align-items: center; justify-content: center; }
.flat-ic svg { width: 1em; height: 1em; display: block; }
.feature-card .ic svg { width: 30px; height: 30px; color: #fff; }
.ct-ic { display: inline-flex; width: 52px; height: 52px; border-radius: 14px; align-items: center; justify-content: center; margin-bottom: 12px; color: #fff; }
.ct-ic svg { width: 26px; height: 26px; }
.menu-ic { display: inline-flex; width: 46px; height: 46px; border-radius: 12px; align-items: center; justify-content: center; margin-bottom: 8px; color: #fff; }
.menu-ic svg { width: 24px; height: 24px; }
.attraction-media .media-ic svg { width: 110px; height: 110px; color: rgba(255,255,255,.92); }
.rank-badge svg { width: 17px; height: 17px; flex: none; }
.info-card .ic svg { width: 26px; height: 26px; }
/* Bebas Neue is condensed — give small display text a touch more air */
.eyebrow, .chip, .filter-chip, .rank-badge, .blog-cat { letter-spacing: .14em; }