/* ==========================================================================
   XIN YAN KOREAN LIVE SHOW BBQ — styles.css
   Single, layered stylesheet (no build step). Sections:
     1. Fonts
     2. Tokens (:root)
     3. Reset & base
     4. Typography helpers
     5. Buttons
     6. Layout (section / container / reveal)
     7. Navigation
     8. Hero
     9. Page flow (scrolls over hero)
    10. Promotion
    11. Story & value props
    12. Performers (cinematic)
    13. Ambience
    14. Menu carousel
    15. Instagram
    16. Reserve band
    17. Footer
    18. Responsive
    19. Reduced motion / a11y
   ========================================================================== */

/* 1. FONTS ================================================================= */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}
/* Metric-matched fallback (Arial) to minimise layout shift if Manrope swaps in. */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial");
  ascent-override: 99%;
  descent-override: 28%;
  line-gap-override: 0%;
  size-adjust: 104%;
}
/* Display face for large headings — an elegant system serif stack (zero extra
   network weight, instant render). To go fully bespoke later, self-host a woff2
   (e.g. Fraunces / Cormorant) as @font-face and prepend it to --font-display. */

/* 2. TOKENS ================================================================ */
:root {
  /* Colour */
  --bg: #F7F3ED;
  --bg-beige: #ECE3D6;
  --ink: #16130F;
  --ink-soft: #5A544B;
  --charcoal: #1C2933;
  --noir: #121110;
  --gold: #B28E5D;          /* fills, borders, large display */
  --gold-deep: #7A5C30;     /* small gold text on light (AA) */
  --gold-light: #D6B27C;    /* gold text on dark */
  --line: rgba(22, 19, 15, 0.10);
  --line-light: rgba(255, 255, 255, 0.16);

  /* Spacing (8px base) */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4rem;   --s-7: 6rem;    --s-8: 8rem;

  /* Fluid type scale */
  --fs-display: clamp(2.6rem, 1.4rem + 5.4vw, 5.5rem);
  --fs-h1: clamp(2.2rem, 1.3rem + 4vw, 4.2rem);
  --fs-h2: clamp(1.8rem, 1.2rem + 2.6vw, 3rem);
  --fs-h3: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-small: 0.8125rem;

  --container: 1200px;
  --radius: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Elegant serif for display headings; Manrope handles body + UI. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  /* Reusable elevation (cards: reviews, faq, signature dishes, booking modal). */
  --shadow-card: 0 22px 50px -34px rgba(22, 19, 15, 0.45);
  --shadow-pop: 0 18px 50px -18px rgba(22, 19, 15, 0.30);
}

/* 3. RESET & BASE ========================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul { list-style: none; }
h1, h2, h3 { line-height: 1.1; font-weight: 600; letter-spacing: -0.015em; }
/* Large display headings use the serif; weight + tracking tuned for serif shapes. */
.promo__title, .story__title, .performers__title,
.ambience__head h2, .petfriendly__text h2, .menu__head h2,
.ig__inner h2, .reserve h2, .reviews__head h2, .faq__head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.08;
}

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius);
  z-index: 2000;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* 4. TYPOGRAPHY HELPERS ==================================================== */
.eyebrow {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--s-2);
}
.eyebrow--light { color: var(--gold-light); }

/* 5. BUTTONS =============================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn--gold {
  background: var(--gold);
  color: var(--ink);               /* dark text on gold = AA */
  box-shadow: 0 6px 22px -10px rgba(178, 142, 93, 0.8);
}
.btn--gold:hover { background: #c29b67; transform: translateY(-2px); }
.btn--ghost {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}
.btn--ghost:hover { background: currentColor; }
.btn--ghost:hover { color: var(--ink); }

/* 6. LAYOUT =============================================================== */
.section {
  padding: clamp(3.5rem, 8vw, 7.5rem) clamp(1.25rem, 5vw, 4rem);
}
.section > * { max-width: var(--container); margin-inline: auto; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* 7. NAVIGATION =========================================================== */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.site-nav__inner {
  max-width: 1320px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.9rem clamp(1.25rem, 4vw, 2.5rem);
}
.site-nav__logo { flex: 0 0 auto; }
.site-nav__logo img {
  width: 58px; height: auto;
  transition: width 0.35s var(--ease), filter 0.35s var(--ease);
}
.site-nav__menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.2rem);
}
.site-nav__menu > a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  color: #fff;
  letter-spacing: 0.02em;
  transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.site-nav__menu > a:hover { opacity: 0.7; }
/* Social icons: inline SVG tinted with currentColor — always visible, exact tint.
   Soft champagne on dark backgrounds; a deeper bronze on the light scrolled nav. */
.site-nav__social { display: inline-flex; gap: 0.4rem; align-items: center; color: #E6D2A8; }
.site-nav__social a, .footer__social a {
  display: inline-flex; padding: 4px; border-radius: 6px;
  color: inherit; opacity: 0.95; transition: opacity 0.25s var(--ease);
}
.site-nav__social a:hover, .footer__social a:hover { opacity: 1; }
.social-ico { width: 20px; height: 20px; display: block; fill: currentColor; }
.footer__social .social-ico { width: 24px; height: 24px; }
.site-nav.scrolled .site-nav__social { color: #7A5C30; }
.site-nav__cta { padding: 0.6rem 1.4rem; min-height: 42px; }

/* Solid state after scrolling past hero (no divider/shadow, seamless into content) */
.site-nav.scrolled {
  background: rgba(247, 243, 237, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
}
.site-nav.scrolled .site-nav__menu > a { color: var(--ink); }
.site-nav.scrolled .site-nav__logo img { width: 48px; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  margin-left: auto;
}
.nav-toggle span {
  display: block; height: 2px; width: 24px;
  background: #fff; border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), background 0.3s var(--ease);
}
.site-nav.scrolled .nav-toggle span { background: var(--ink); }

/* 8. HERO ================================================================= */
.hero {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 clamp(1.5rem, 6vw, 6rem);
  overflow: hidden;
  z-index: 0;
}
.hero__bg, .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__bg img { object-fit: cover; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,17,16,0.55) 0%, rgba(18,17,16,0.30) 35%, rgba(18,17,16,0.65) 100%);
}
.hero__content { position: relative; z-index: 1; max-width: 760px; color: #fff; }
.hero__title {
  font-size: var(--fs-display);
  font-weight: 600;
  margin-bottom: var(--s-3);
  text-wrap: balance;
}
.hero__sub {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  max-width: 40ch;
  color: rgba(255,255,255,0.92);
  margin-bottom: var(--s-4);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hero__cta .btn--ghost { color: #fff; }
.hero__cta .btn--ghost:hover { color: var(--ink); background: #fff; border-color: #fff; }

.hero__scroll {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 26px; height: 44px;
}
.hero__scroll-line {
  display: block; margin: 0 auto;
  width: 1px; height: 44px;
  background: rgba(255,255,255,0.6);
  transform-origin: top;
  animation: scrollcue 2s var(--ease) infinite;
}
@keyframes scrollcue {
  0% { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(8px); opacity: 0; }
}

/* 9. PAGE FLOW (scrolls over the sticky hero) ============================= */
.page-flow {
  position: relative;
  z-index: 1;
  background: var(--bg);
  box-shadow: 0 -30px 60px -30px rgba(0,0,0,0.4);
}

/* 10. PROMOTION (split: image left, content right) ======================== */
.promo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(560px, 78vh, 760px);
  background: var(--noir);
}
/* Left: composed promo image (stadium + trophy + beer towers) */
.promo__media { position: relative; overflow: hidden; }
.promo__media picture { position: absolute; inset: 0; display: block; }
.promo__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }

/* Right: content panel */
.promo__content {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: clamp(2.5rem, 5vw, 5rem);
  color: #fff;
}
.promo__badge {
  font-size: clamp(0.95rem, 0.8rem + 0.4vw, 1.15rem);
  font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase;
  color: #2a2012;
  background: linear-gradient(135deg, #e6d2a8, #c79f63);
  padding: 0.55rem 1.5rem; border-radius: 999px;
  box-shadow: 0 10px 30px -12px rgba(199,159,99,0.7);
  margin-bottom: var(--s-4);
}
.promo__title { font-size: var(--fs-h1); margin-bottom: var(--s-4); text-wrap: balance; }
.promo__offer {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.3rem, 2.4vw, 2rem);
  border: 1px solid rgba(214,178,124,0.45);
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 50px -12px rgba(178,142,93,0.45);
  margin-bottom: var(--s-4);
}
.promo__offer-lead { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.88); }
.promo__offer-main { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 3.6rem); font-weight: 700; line-height: 1.02; color: var(--gold-light); }
.promo__offer-sub { font-size: 0.92rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.82); margin-top: 0.55rem; }
.promo__body { color: rgba(255,255,255,0.82); max-width: 42ch; margin-bottom: var(--s-4); }

/* 11. STORY & VALUE PROPS ================================================= */
.story { text-align: center; }
.story__intro { max-width: 720px; }
.story__title { font-size: var(--fs-h2); margin-bottom: var(--s-3); text-wrap: balance; }
.story__lede { color: var(--ink-soft); margin-bottom: var(--s-3); }
.value-props {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 3rem);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.value-props li {
  display: flex; align-items: center; gap: 0.6rem;
  font-weight: 500; font-size: 0.98rem;
}
.value-props__icon { color: var(--gold); font-size: 1.2rem; line-height: 1; display: inline-flex; }
.value-props__icon svg { width: 22px; height: 22px; fill: var(--gold); display: block; }

/* 12. PERFORMERS ========================================================== */
.performers { background: var(--noir); color: #fff; }
.performers__intro { text-align: center; }
.performers__title { font-size: var(--fs-h2); margin-bottom: var(--s-2); }
.performers__lede { color: rgba(255,255,255,0.7); max-width: 48ch; margin-inline: auto; }

.performer {
  display: grid;
  grid-template-columns: 1fr 1fr;     /* equal columns → every performer card is identical */
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 6rem) clamp(1.25rem, 5vw, 4rem);
}
.performer:nth-child(even) > .performer__media { order: 2; }  /* alternate sides */
.performer__media {
  position: relative;
  width: 100%;                   /* fill the column (fixes mobile shrink-to-content) */
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;            /* consistent portrait card for every performer */
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8);
}
.performer__media picture { display: block; width: 100%; height: 100%; }
.performer__media img,
.performer__media video { width: 100%; height: 100%; object-fit: cover; }
/* Per-performer framing is baked into the images (tools/crop-performers.mjs) so the
   pixels come straight from the source — no CSS upscaling, much sharper. */
/* DJ video uses the exact same 3/4 card as every other performer (equal sizing).
   The 3:4 DJ framing is now baked into the 720x960 encode (tools/optimize-video.mjs),
   so the video fills the card 1:1 — object-position is centre (a no-op, kept for clarity). */
.performer__media--video video { object-position: center; }

.performers__note {
  margin-top: var(--s-3);
  color: var(--gold-light);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.performer__text h3 { font-size: var(--fs-h3); margin-bottom: var(--s-2); }
.performer__zh { color: var(--gold-light); font-weight: 400; }
.performer__text p { color: rgba(255,255,255,0.74); max-width: 42ch; }

/* 13. EXPERIENCE GALLERY ================================================== */
.ambience { background: var(--bg); }
.ambience__head { text-align: center; margin-bottom: var(--s-5); }
.ambience__head h2 { font-size: var(--fs-h2); }
.ambience__lede { color: var(--ink-soft); margin-top: var(--s-2); max-width: 54ch; margin-inline: auto; }
/* Option 3 — uniform tile grid. Desktop: 4 across (8 photos = clean 4×2). */
.ambience__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.25rem) clamp(0.85rem, 1.6vw, 1.5rem);
}
.ambience__item { display: flex; flex-direction: column; }
.ambience__item picture {
  display: block;
  aspect-ratio: 4 / 5;            /* fixed frame → no layout shift, every tile identical */
  border-radius: var(--radius);
  overflow: hidden;
}
.ambience__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.ambience__item:hover img { transform: scale(1.04); }
/* Single-line italic photo description beneath each tile. */
.ambience__caption {
  margin-top: var(--s-2);
  font-style: italic;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}
.ambience__swipe { display: none; }   /* mobile-only swipe hint (see media query) */
@keyframes swipehint { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* 13b. PET FRIENDLY ======================================================= */
.petfriendly { background: var(--bg-beige); }
.petfriendly__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
}
.petfriendly__media { position: relative; padding-bottom: clamp(1rem, 4vw, 2.5rem); }
.petfriendly__img { display: block; border-radius: var(--radius); overflow: hidden; }
.petfriendly__img img { width: 100%; height: 100%; object-fit: cover; }
.petfriendly__img--main { aspect-ratio: 4 / 5; box-shadow: 0 40px 80px -45px rgba(0,0,0,0.45); }
.petfriendly__img--accent {
  position: absolute; right: -4%; bottom: 0;
  width: 44%; aspect-ratio: 3 / 4;
  border: 6px solid var(--bg-beige);
  box-shadow: 0 30px 55px -30px rgba(0,0,0,0.5);
}
.petfriendly__text h2 { font-size: var(--fs-h2); margin-bottom: var(--s-2); }
.petfriendly__text p { color: var(--ink-soft); max-width: 44ch; }

/* 14. MENU CAROUSEL ======================================================= */
.menu { background: var(--bg-beige); }
.menu__head { text-align: center; margin-bottom: var(--s-5); }
.menu__head h2 { font-size: var(--fs-h2); }
.menu__lede { color: var(--ink-soft); margin-top: var(--s-1); }
.menu__noscript { text-align: center; color: var(--ink-soft); }

.menu-carousel { position: relative; max-width: 1280px; }
.menu-track {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 1rem;
  padding: 0.5rem 0.25rem 1.5rem;
  scrollbar-width: none;
}
.menu-track::-webkit-scrollbar { display: none; }
.menu-slide {
  flex: 0 0 auto;
  width: min(78vw, 340px);
  scroll-snap-align: center;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 20px 45px -30px rgba(0,0,0,0.45);
}
.menu-slide img { width: 100%; height: auto; aspect-ratio: 1000 / 1465; object-fit: cover; }

.menu-arrow {
  position: absolute;
  top: calc(50% - 12px);
  transform: translateY(-50%);
  z-index: 2;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(8px) saturate(140%);
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.menu-arrow:hover { background: rgba(255,255,255,0.75); transform: translateY(-50%) scale(1.06); }
.menu-arrow.prev { left: clamp(0.25rem, 1vw, 0.75rem); }
.menu-arrow.next { right: clamp(0.25rem, 1vw, 0.75rem); }

.menu-dots { display: flex; justify-content: center; gap: 2px; margin-top: var(--s-1); flex-wrap: wrap; }
/* 24x24 touch target (WCAG) with a small visible dot drawn via ::before */
.menu-dot {
  width: 24px; height: 24px; padding: 0;
  border: none; background: transparent; cursor: pointer;
  position: relative;
}
.menu-dot::before {
  content: ""; position: absolute; inset: 8px;
  border-radius: 999px; background: rgba(22,19,15,0.22);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.menu-dot[aria-selected="true"]::before { background: var(--gold); transform: scale(1.35); }

/* 15. INSTAGRAM (branding + CTA) ========================================== */
.ig { background: var(--bg); text-align: center; }
.ig__inner { max-width: 560px; }
.ig__inner h2 { font-size: var(--fs-h2); margin-bottom: var(--s-2); }
.ig__sub { color: var(--ink-soft); margin: 0 auto var(--s-4); max-width: 44ch; }
/* Welcome intro clip — centred below the button, sized to complement (not dominate).
   aspect-ratio reserves the box so the poster/video never shifts layout on load. */
.ig__video {
  margin: clamp(1.25rem, 3.5vw, 2rem) auto 0;
  width: min(300px, 74vw);
  aspect-ratio: 9 / 16;
  border-radius: calc(var(--radius) * 3);
  overflow: hidden;
  background: var(--noir);
  box-shadow: 0 36px 70px -34px rgba(0, 0, 0, 0.5);
}
.ig__video video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 16. RESERVE BAND ======================================================== */
.reserve { background: var(--charcoal); color: #fff; text-align: center; }
.reserve__inner { max-width: 720px; }
.reserve h2 { font-size: var(--fs-h1); margin-bottom: var(--s-2); }
.reserve__line { color: rgba(255,255,255,0.72); margin-bottom: var(--s-4); }
.reserve__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.reserve__cta .btn--ghost { color: #fff; }
.reserve__cta .btn--ghost:hover { color: var(--charcoal); background: #fff; border-color: #fff; }

/* 17. FOOTER ============================================================== */
.footer { background: var(--noir); color: rgba(255,255,255,0.82); padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem) 2rem; }
.footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.footer__brand img { width: 84px; height: auto; }
.footer__zh { margin-top: var(--s-2); color: var(--gold-light); letter-spacing: 0.1em; }
.footer h3 { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: var(--s-2); font-weight: 600; }
.footer__h3-gap { margin-top: var(--s-3); }
.footer p { font-size: 0.95rem; margin-bottom: 0.4rem; }
.footer__link { color: rgba(255,255,255,0.82); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.25); transition: color 0.25s var(--ease); }
.footer__link:hover { color: #fff; }
.footer__social { display: flex; gap: 0.9rem; margin-bottom: var(--s-3); color: #E6D2A8; }
.footer__cta { padding: 0.6rem 1.4rem; min-height: 42px; }
.footer__copy { text-align: center; margin-top: clamp(2rem, 5vw, 3.5rem); padding-top: var(--s-3); border-top: 1px solid var(--line-light); font-size: var(--fs-small); color: rgba(255,255,255,0.72); }

/* ==========================================================================
   20. CONVERSION COMPONENTS  (added in the CRO sharpening pass)
       Trust · urgency · showtime · signatures · reviews · FAQ ·
       reassurance · booking modal · mobile booking dock
   ========================================================================== */

/* --- Shared bits --------------------------------------------------------- */
/* Small reassurance line under primary CTAs ("Free · instant confirmation"). */
.cta-note {
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin-top: var(--s-2);
}
.cta-note--light { color: rgba(255,255,255,0.72); }

/* Gold star rating (decorative; the accessible label lives in aria-label). */
.stars { display: inline-flex; gap: 1px; color: var(--gold); font-size: 0.95em; letter-spacing: 0.05em; line-height: 1; }
.stars--light { color: var(--gold-light); }

/* "Open now" live pip + label, derived in JS from opening hours. */
.open-now { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; }
.open-now__dot { width: 9px; height: 9px; border-radius: 50%; background: #3Fae6f; box-shadow: 0 0 0 0 rgba(63,174,111,0.55); animation: pulseDot 2.4s var(--ease) infinite; }
.open-now[data-open="false"] .open-now__dot { background: #c2603f; animation: none; }
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(63,174,111,0.5);} 70% { box-shadow: 0 0 0 7px rgba(63,174,111,0);} 100% { box-shadow: 0 0 0 0 rgba(63,174,111,0);} }

/* --- Hero info-scent + trust micro-strip --------------------------------- */
.hero__meta {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255,255,255,0.92); margin-bottom: var(--s-3);
}
.hero__meta span { position: relative; padding-left: 0.85rem; }
.hero__meta span:first-child { padding-left: 0; }
.hero__meta span:not(:first-child)::before { content: "·"; position: absolute; left: 0; color: var(--gold-light); }
.hero__menu-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: #fff; text-decoration: none; font-weight: 500; font-size: 0.98rem;
  border-bottom: 1px solid rgba(255,255,255,0.45); padding-bottom: 2px;
  min-height: 44px;
  transition: border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.hero__menu-link:hover { opacity: 0.85; border-color: #fff; }
.hero__cta { align-items: center; }
.hero__trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  margin-top: var(--s-4); color: rgba(255,255,255,0.9); font-size: 0.9rem;
}
.hero__trust b { color: #fff; font-weight: 600; }

/* --- Trust bar (thin band right after the hero) -------------------------- */
.trustbar { background: var(--bg-beige); border-bottom: 1px solid var(--line); }
.trustbar__inner {
  max-width: var(--container); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.75rem clamp(1.25rem, 3.5vw, 2.75rem);
  padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.25rem, 5vw, 4rem);
}
.trustbar__item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; font-weight: 500; color: var(--ink); }
.trustbar__item b { font-weight: 700; }
.trustbar__item svg { width: 18px; height: 18px; fill: var(--gold-deep); flex: 0 0 auto; }
.trustbar__sep { width: 1px; height: 22px; background: var(--line); }

/* --- Urgency pill (promo) ------------------------------------------------ */
.urgency {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--gold-light); margin-bottom: var(--s-3);
}
.urgency::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-light); }
.promo__content .cta-note { color: rgba(255,255,255,0.72); }

/* --- Tonight's showtime chip (performers intro) -------------------------- */
.showtime {
  display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: center;
  margin-top: var(--s-3);
  padding: 0.6rem 1.1rem; border: 1px solid rgba(214,178,124,0.4); border-radius: 999px;
  background: rgba(255,255,255,0.04); color: #fff; font-size: 0.92rem;
}
.showtime b { color: var(--gold-light); font-weight: 600; }

/* --- Signature dishes (above the menu carousel) -------------------------- */
.signatures { margin-bottom: var(--s-6); }
.signatures__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
/* Text-forward "menu excerpt" cards — skimmable price, no stock imagery.
   Full visual menu lives in the carousel below. */
.signature-card {
  position: relative;
  background: var(--bg); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  display: flex; flex-direction: column; gap: 0.5rem;
  border-top: 3px solid var(--gold);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.signature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.signature-card__tag {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep);
}
.signature-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.signature-card__name { font-weight: 600; font-size: 1.15rem; }
.signature-card__price { font-weight: 700; font-size: 1.05rem; color: var(--gold-deep); white-space: nowrap; }
.signature-card__desc { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; }
.menu__full { text-align: center; margin-top: var(--s-4); }

/* --- Gallery feature badge (celebrity tile) ------------------------------ */
.ambience__item { position: relative; }
.ambience__badge {
  position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.7rem; border-radius: 999px;
  background: linear-gradient(135deg, #e6d2a8, #c79f63); color: #2a2012;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,0.5);
}
.ambience__badge svg { width: 13px; height: 13px; fill: currentColor; }

/* --- Reviews / press ----------------------------------------------------- */
.reviews { background: var(--bg-beige); }
.reviews__head { text-align: center; margin-bottom: var(--s-5); }
.reviews__head h2 { font-size: var(--fs-h2); }
.reviews__rating { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: var(--s-2); font-weight: 500; color: var(--ink-soft); }
.reviews__rating b { color: var(--ink); font-weight: 700; }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); }
.review-card {
  background: var(--bg); border-radius: var(--radius); padding: clamp(1.4rem, 2.5vw, 1.9rem);
  box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: var(--s-2);
}
.review-card__stars { color: var(--gold); font-size: 1rem; letter-spacing: 0.08em; }
.review-card__text { color: var(--ink); line-height: 1.6; }
.review-card__author { display: flex; align-items: center; gap: 0.65rem; margin-top: auto; }
.review-card__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 700; color: #fff;
  background: var(--gold); font-size: 0.95rem;
}
.review-card__meta { font-size: 0.88rem; line-height: 1.3; }
.review-card__name { font-weight: 600; }
.review-card__src { color: var(--ink-soft); }

/* --- FAQ accordion ------------------------------------------------------- */
.faq__head { text-align: center; margin-bottom: var(--s-5); }
.faq__head h2 { font-size: var(--fs-h2); }
.faq__list { max-width: 760px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1rem, 2.2vw, 1.4rem) 0.25rem; min-height: 56px;
  font-family: inherit; font-size: clamp(1rem, 0.97rem + 0.3vw, 1.15rem); font-weight: 600; color: var(--ink);
}
.faq__icon { flex: 0 0 auto; width: 22px; height: 22px; position: relative; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--gold-deep); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.faq__icon::before { width: 14px; height: 2px; }
.faq__icon::after { width: 2px; height: 14px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq__a { overflow: hidden; height: 0; transition: height 0.3s var(--ease); }
.faq__a-inner { padding: 0 0.25rem clamp(1rem, 2.2vw, 1.4rem); color: var(--ink-soft); line-height: 1.6; max-width: 64ch; }
/* Inline call-to-action links inside FAQ answers — bold, high-visibility pills
   (the old footer-link style rendered near-invisible on the light FAQ background). */
.faq-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.7rem; border-radius: 999px;
  font-weight: 700; text-decoration: none; white-space: nowrap;
  line-height: 1.5; vertical-align: baseline;
  box-shadow: 0 6px 16px -10px rgba(22,19,15,0.5);
  transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.faq-link:hover { transform: translateY(-1px); filter: brightness(1.05); }
.faq-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.faq-link--wa { background: #25D366; color: #fff; }
.faq-link--maps { background: var(--gold); color: var(--ink); }

/* --- Reserve band reassurance + secondary detail ------------------------- */
.reserve__reassure { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; margin-top: var(--s-3); color: rgba(255,255,255,0.72); font-size: 0.9rem; }
.reserve__reassure span { display: inline-flex; align-items: center; gap: 0.4rem; }
.reserve__reassure svg { width: 16px; height: 16px; fill: var(--gold-light); }

/* --- Mobile booking dock (thumb-zone, appears after hero) ----------------- */
.booking-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: none;                 /* shown on mobile via media query + .is-active */
  gap: 0.6rem;
  padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(247, 243, 237, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform 0.35s var(--ease);
}
.booking-dock.is-active { transform: translateY(0); }
.booking-dock .btn { flex: 1; min-height: 50px; }
.booking-dock__wa {
  flex: 0 0 auto; width: 52px; min-height: 50px;
  display: grid; place-items: center; border-radius: 999px;
  background: #25D366; color: #fff; text-decoration: none;
}
.booking-dock__wa svg { width: 26px; height: 26px; fill: currentColor; }

/* --- Booking modal (native <dialog>) ------------------------------------- */
.booking {
  width: min(480px, 92vw); border: none; border-radius: 14px; padding: 0;
  margin: auto;   /* restore native modal centering (global *{margin:0} reset removes it) */
  background: var(--bg); color: var(--ink); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.55);
}
.booking::backdrop { background: rgba(18,17,16,0.55); backdrop-filter: blur(3px); }
.booking[open] { animation: bookingIn 0.3s var(--ease); }
@keyframes bookingIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.booking__inner { padding: clamp(1.5rem, 4vw, 2.25rem); }
.booking__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: var(--s-3); }
.booking__title { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; }
.booking__sub { color: var(--ink-soft); font-size: 0.92rem; margin-top: 0.25rem; }
.booking__close { width: 40px; height: 40px; flex: 0 0 auto; border: none; background: none; cursor: pointer; border-radius: 50%; font-size: 1.5rem; line-height: 1; color: var(--ink-soft); display: grid; place-items: center; }
.booking__close:hover { background: var(--bg-beige); }
.booking__field { margin-bottom: var(--s-3); }
.booking__label { display: block; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.5rem; }
.booking__input {
  width: 100%; min-height: 48px; padding: 0.6rem 0.9rem;
  font: inherit; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
}
.booking__input:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 1px; border-color: var(--gold); }
.booking__pax { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.booking__pax button {
  flex: 1 1 auto; min-width: 44px; min-height: 48px; padding: 0 0.5rem;
  font: inherit; font-weight: 600; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); color: var(--ink);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.booking__pax button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.booking__submit { width: 100%; margin-top: var(--s-2); }
.booking__alt { text-align: center; margin-top: var(--s-3); font-size: 0.9rem; color: var(--ink-soft); }
.booking__alt a { color: var(--gold-deep); font-weight: 600; }

/* WhatsApp-tinted ghost helper used in a couple of spots */
.btn--wa { background: #25D366; color: #fff; border-color: #25D366; }
.btn--wa:hover { background: #1eb858; }
.btn--wa svg { width: 20px; height: 20px; fill: currentColor; margin-right: 0.5rem; }

/* 18. RESPONSIVE ========================================================== */
@media (max-width: 880px) {
  .site-nav__menu {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    background: var(--charcoal);
    transform: translateY(-100%);
    transition: transform 0.4s var(--ease);
    margin: 0;
  }
  .site-nav.open .site-nav__menu { transform: translateY(0); }
  .site-nav__menu > a { color: #fff; font-size: 1.3rem; }
  .site-nav.scrolled .site-nav__menu > a { color: #fff; }
  .site-nav__social, .site-nav.scrolled .site-nav__social { color: #E6D2A8; }
  /* "Visit" removed from the mobile menu (minimal). */
  .site-nav__menu > a[href="#visit"] { display: none; }
  /* No backdrop-filter on mobile: it would turn the nav into the containing block
     for the fixed overlay menu, breaking the hamburger after the nav goes solid. */
  .site-nav.scrolled { backdrop-filter: none; background: var(--bg); }
  .site-nav__menu { z-index: 1; }
  .nav-toggle { display: flex; margin-left: 0.4rem; position: relative; z-index: 2; }
  /* Keep Reserve persistently visible on mobile (compact), grouped with the toggle.
     min-height 44px meets WCAG 2.5.5 target size. */
  .site-nav__cta { margin-left: auto; padding: 0.6rem 1.15rem; min-height: 44px; font-size: 0.88rem; }
  .site-nav.open .site-nav__cta { display: none; }   /* hide behind the open overlay */
  .site-nav.open .nav-toggle { margin-left: auto; }  /* keep the X at the right edge */
  .site-nav.open .nav-toggle span { background: #fff; }  /* white X on the dark overlay */
  .site-nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .performer { grid-template-columns: 1fr; gap: var(--s-3); padding: clamp(2rem, 7vw, 3rem) 14px; }
  .performer:nth-child(even) > .performer__media { order: 0; }
  /* Big, equal cards on mobile: fill the column (capped), same size for all four */
  .performer__media { aspect-ratio: 3 / 4; max-width: 520px; margin-inline: auto; }

  /* Promo stacks on mobile: image (full trophy + towers) on top, content below */
  .promo { grid-template-columns: 1fr; min-height: 0; }
  .promo__media { aspect-ratio: 5 / 6; }              /* portrait → whole towers + trophy show */
  .promo__media img { object-position: center bottom; }
  .promo__content { padding: clamp(2rem, 8vw, 3rem) clamp(1.25rem, 6vw, 2rem); }
  .promo__offer { align-self: stretch; }
  .performer__text { text-align: center; }
  .performer__text p { margin-inline: auto; }

  /* Experience gallery responsive tiers (tablet 2-col / mobile carousel) are defined
     in their own breakpoints below so they don't ride on the 880px nav breakpoint. */

  .petfriendly__inner { grid-template-columns: 1fr; gap: var(--s-4); }
  .petfriendly__text { text-align: center; }
  .petfriendly__text p { margin-inline: auto; }
  .petfriendly__img--accent { width: 38%; right: 2%; }

  .footer__inner { grid-template-columns: 1fr 1fr; }
}

/* GALLERY — tablet: two clean columns (up to 1024px). */
@media (max-width: 1024px) {
  .ambience__grid { grid-template-columns: repeat(2, 1fr); }
}

/* GALLERY — mobile: the swipeable carousel (unchanged), captions kept beneath each card. */
@media (max-width: 600px) {
  .ambience__grid {
    display: flex; grid-template-columns: none;
    gap: 0.9rem; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-bottom: 0.5rem;
    align-items: flex-start;   /* iOS Safari: stop stretching cards so the caption isn't
                                  clipped by the overflow-y:auto forced by overflow-x:auto */
  }
  .ambience__grid::-webkit-scrollbar { display: none; }
  .ambience__item { flex: 0 0 78%; scroll-snap-align: center; }
  .ambience__item picture { flex-shrink: 0; }   /* keep the 4:5 image box; never squeeze the caption out */
  .ambience__swipe {
    display: block; text-align: center; margin-top: var(--s-3);
    font-size: var(--fs-small); letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold-deep); font-weight: 600;
    animation: swipehint 1.8s ease-in-out infinite;
  }

  /* Intro video: snug under the button, no oversized gap above or below on mobile. */
  .ig__video { margin-top: 0.75rem; }
  .ig { padding-bottom: clamp(2rem, 7vw, 3rem); }
}

@media (max-width: 480px) {
  .footer__inner { grid-template-columns: 1fr; text-align: left; }
  .hero { align-items: center; text-align: center; }
  .hero__content { text-align: center; }
  .hero__sub { margin-inline: auto; }
  .hero__meta, .hero__trust { justify-content: center; }
  .hero__cta { justify-content: center; }
}

/* New conversion components — responsive ================================== */
@media (max-width: 880px) {
  /* Stack signature + review cards */
  .signatures__grid, .reviews__grid { grid-template-columns: 1fr; }

  /* The mobile booking dock: revealed by JS after the hero scrolls away. */
  .booking-dock { display: flex; }
  /* Leave room so the dock never hides the footer's last line. */
  .footer { padding-bottom: calc(2rem + 74px + env(safe-area-inset-bottom)); }

  .trustbar__sep { display: none; }
  .hero__trust { font-size: 0.85rem; }
}

/* Two-up cards on small tablets keeps them from looking lonely */
@media (min-width: 600px) and (max-width: 880px) {
  .signatures__grid, .reviews__grid { grid-template-columns: 1fr 1fr; }
}

/* 19. REDUCED MOTION ====================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__scroll-line { animation: none; }
}