/* ======================================================================
   Hibachi v1 — Modular Stylesheet
   Battle-tested patterns from A1 + Kobe + design upgrades for ezhibachi+.
   All theming via CSS custom properties — swap brand color = full re-brand.
   ====================================================================== */

/* ----- Section 0 — Design tokens (theme via :root) ----- */
:root {
  /* Brand palette (override per merchant in TEMPLATE_VARIABLES) */
  --brand-primary: #E94816;
  --brand-primary-dark: #B3350E;
  --brand-accent: #EDB960;
  --brand-black: #111111;

  /* Neutral palette */
  --text: #181818;
  --text-muted: #666666;
  --text-soft: #999999;
  --bg-page: #ffffff;
  --bg-soft: #f8f8f8;
  --bg-elev: #ffffff;
  --border: #e5e5e5;

  /* Typography */
  --font-headline: "Poppins", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Spacing scale (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows (subtle, modern) */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 20%, transparent);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-blur: blur(20px) saturate(180%);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 250ms var(--ease-out);
  --transition-slow: 450ms var(--ease-out);

  /* Layout */
  --max-content: 1200px;
  --max-prose: 720px;
  --header-height: 64px;
  --bottom-cta-height: 72px;
}

/* ----- Dark mode (system pref + manual override via data-theme) ----- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text: #f0f0f0;
    --text-muted: #b0b0b0;
    --text-soft: #888888;
    --bg-page: #0a0a0a;
    --bg-soft: #161616;
    --bg-elev: #1c1c1c;
    --border: #2a2a2a;
    --glass-bg: rgba(20, 20, 20, 0.72);
    --glass-border: rgba(255, 255, 255, 0.1);
  }
}
:root[data-theme="dark"] {
  --text: #f0f0f0;
  --text-muted: #b0b0b0;
  --text-soft: #888888;
  --bg-page: #0a0a0a;
  --bg-soft: #161616;
  --bg-elev: #1c1c1c;
  --border: #2a2a2a;
  --glass-bg: rgba(20, 20, 20, 0.72);
  --glass-border: rgba(255, 255, 255, 0.1);
}

/* ----- Section 1 — Reset + base ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--brand-primary-dark); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
h1, h2, h3, h4 { font-family: var(--font-headline); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--space-4); }
h1 { font-size: clamp(2rem, 5vw + 1rem, 3.75rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem); font-weight: 600; }
h3 { font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem); font-weight: 600; }
p { margin: 0 0 var(--space-4); }
ul, ol { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }

/* ----- Section 2 — Layout utilities ----- */
.container { width: min(100% - var(--space-5) * 2, var(--max-content)); margin-inline: auto; }
.prose    { width: min(100% - var(--space-5) * 2, var(--max-prose));   margin-inline: auto; }
.section  { padding: var(--space-9) 0; }
.section-soft { background: var(--bg-soft); }
.grid-2 { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; gap: var(--space-6); grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; gap: var(--space-5); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding: var(--space-7) 0; }
}

/* ----- Section 3 — Header (sticky, glass) ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  transition: background var(--transition-base);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.site-logo { display: flex; align-items: center; gap: var(--space-3); font-weight: 700; font-size: 1.125rem; color: var(--text); }
.site-logo img { height: 32px; width: auto; }
.site-nav { display: flex; gap: var(--space-5); align-items: center; }
.site-nav a { color: var(--text); font-weight: 500; font-size: 0.95rem; }
.site-nav a:hover { color: var(--brand-primary); }
.site-header-cta {
  background: var(--brand-primary);
  color: white !important;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.site-header-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  color: white !important;
}
@media (max-width: 768px) {
  .site-nav { display: none; }
  .site-header-cta { padding: 8px 16px; font-size: 0.875rem; }
}

/* ----- Section 4 — Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 1rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand-primary);
  color: white;
}
.btn-primary:hover {
  background: var(--brand-primary-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.btn-secondary {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
}
.btn-large { padding: 18px 36px; font-size: 1.125rem; }

/* ----- Section 5 — Hero (video background) ----- */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero__video,
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.8) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.4) 0%, transparent 60%);
  z-index: -1;
}
.hero__content {
  color: white;
  padding-block: var(--space-9);
}
.hero__eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  backdrop-filter: blur(8px);
}
.hero__headline { color: white; font-size: clamp(2.25rem, 5vw + 1rem, 4.25rem); margin-bottom: var(--space-4); }
.hero__subhead { font-size: clamp(1.0625rem, 1.5vw + 0.5rem, 1.375rem); color: rgba(255,255,255,0.9); max-width: 640px; margin-bottom: var(--space-6); }
.hero__cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; font-size: 0.95rem; color: rgba(255,255,255,0.85); }
.hero__trust-item { display: flex; align-items: center; gap: var(--space-2); }
.hero__trust-stars { color: var(--brand-accent); }

/* ----- Section 6 — Quick lead form (hero-overlay or inline) ----- */
.quick-lead-form {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-3);
  max-width: 440px;
  width: 100%;
}
.quick-lead-form__title { font-family: var(--font-headline); font-size: 1.5rem; font-weight: 600; margin-bottom: var(--space-2); }
.quick-lead-form__sub { color: var(--text-muted); margin-bottom: var(--space-5); font-size: 0.95rem; }
.quick-lead-form__field { margin-bottom: var(--space-4); }
.quick-lead-form__label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.quick-lead-form__input {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  color: var(--text);
  font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.quick-lead-form__input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-glow);
}
.quick-lead-form__submit {
  width: 100%;
  padding: 16px;
  background: var(--brand-primary);
  color: white;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1.0625rem;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.quick-lead-form__submit:hover { background: var(--brand-primary-dark); transform: translateY(-1px); }
.quick-lead-form__submit:disabled { opacity: 0.6; cursor: wait; transform: none; }
.quick-lead-form__footer { font-size: 0.8125rem; color: var(--text-muted); text-align: center; margin-top: var(--space-3); }
.quick-lead-form__message { font-size: 0.95rem; padding: var(--space-3); border-radius: var(--radius-md); margin-top: var(--space-3); }
.quick-lead-form__message.ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.quick-lead-form__message.err { background: #FAF6EE; color: #8C3410; border: 1px solid #EBD6BE; }

/* ----- Section 7 — Service tiles (3-col card grid with glass cards) ----- */
.service-tile {
  padding: var(--space-6);
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.service-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--brand-primary);
}
.service-tile__icon { font-size: 2.5rem; margin-bottom: var(--space-4); }
.service-tile__title { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--space-2); }
.service-tile__text { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 0; }

/* ----- Section 8 — Pricing tiers ----- */
.pricing-tier {
  padding: var(--space-7) var(--space-5);
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
  text-align: center;
  position: relative;
  transition: transform var(--transition-base), border-color var(--transition-base);
}
.pricing-tier:hover { transform: translateY(-4px); border-color: var(--brand-primary); }
.pricing-tier--featured {
  border-color: var(--brand-primary);
  background: linear-gradient(180deg, var(--bg-elev) 0%, color-mix(in srgb, var(--brand-primary) 5%, var(--bg-elev)) 100%);
}
.pricing-tier__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: var(--brand-primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pricing-tier__name { font-family: var(--font-headline); font-size: 1.5rem; margin-bottom: var(--space-2); }
.pricing-tier__price { font-size: 3rem; font-weight: 700; color: var(--brand-primary); line-height: 1; margin-bottom: var(--space-1); }
.pricing-tier__price-unit { font-size: 0.95rem; color: var(--text-muted); margin-bottom: var(--space-5); }
.pricing-tier__list { list-style: none; padding: 0; margin: 0 0 var(--space-5); text-align: left; }
.pricing-tier__list li { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.pricing-tier__list li:last-child { border-bottom: 0; }

/* ----- Section 9 — Gallery (masonry grid) ----- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}
.gallery__item {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  transition: transform var(--transition-base);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.gallery__item:hover { transform: scale(1.02); }
.gallery__item:hover img { transform: scale(1.05); }

/* ----- Section 10 — FAQ accordion ----- */
.faq { max-width: var(--max-prose); margin-inline: auto; }
.faq__item {
  border-bottom: 1px solid var(--border);
  padding: var(--space-4) 0;
}
.faq__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  padding: 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text);
  background: transparent;
}
.faq__question::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform var(--transition-base);
}
.faq__item[open] .faq__question::after { transform: rotate(45deg); }
.faq__answer {
  padding-top: var(--space-3);
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ----- Section 11 — Trust / Reviews band ----- */
.trust-band { background: var(--brand-black); color: white; padding: var(--space-7) 0; }
.trust-band__stats { display: flex; flex-wrap: wrap; gap: var(--space-7); justify-content: center; text-align: center; }
.trust-band__stat-number { font-size: 2.5rem; font-weight: 700; font-family: var(--font-headline); color: var(--brand-accent); line-height: 1; }
.trust-band__stat-label { font-size: 0.95rem; opacity: 0.85; margin-top: var(--space-1); }

/* ----- Section 12 — Sticky bottom mobile CTA ----- */
.bottom-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: none;
  padding: var(--space-3);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
}
.bottom-cta__inner { display: flex; gap: var(--space-2); align-items: center; }
.bottom-cta__btn {
  flex: 1;
  padding: 14px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  white-space: nowrap;
}
.bottom-cta__btn--primary { background: var(--brand-primary); color: white; }
.bottom-cta__btn--phone { background: var(--bg-elev); color: var(--brand-primary); border: 1px solid var(--brand-primary); }
@media (max-width: 768px) {
  .bottom-cta { display: block; }
  body { padding-bottom: var(--bottom-cta-height); }
}

/* ----- Section 13 — Footer ----- */
.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  padding: var(--space-7) 0 var(--space-5);
  font-size: 0.9375rem;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
@media (max-width: 768px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__title { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); margin-bottom: var(--space-3); }
.site-footer__list { list-style: none; padding: 0; margin: 0; }
.site-footer__list li { margin-bottom: var(--space-2); }
.site-footer__list a { color: var(--text-muted); }
.site-footer__bottom { border-top: 1px solid var(--border); padding-top: var(--space-4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-size: 0.8125rem; color: var(--text-soft); }

/* ----- Section 14 — Scroll-triggered fade-in (use with .reveal class + JS) ----- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ----- Section 15 — Theme toggle button ----- */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--bg-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  font-size: 1.125rem;
}
.theme-toggle:hover { background: var(--border); }

/* ----- Section 16 — Modal (booking iframe holder, image lightbox) ----- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.modal.is-open { display: flex; }
.modal__content {
  background: var(--bg-page);
  border-radius: var(--radius-xl);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--bg-soft);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--text);
}

/* ----- Section 17 — Accessibility helpers ----- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 4px; }

/* ----- Section 18 — Utilities ----- */
.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); }
.hidden { display: none; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); } .gap-4 { gap: var(--space-4); }

/* ====== END Hibachi v1 stylesheet ====== */


/* ----- Section 3b — Occasions nav: desktop dropdown + mobile accordion -----
   Added by scripts/ilove-occasions-nav.py. Pure CSS — no JS, no layout shift.
   Desktop opens on :hover AND :focus-within (keyboard + screen reader safe);
   the top-level label is a real link to /occasions.html so a tap on a
   touch-screen tablet navigates instead of dead-ending on a hover menu. */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop__link { display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-weight: 500; font-size: 0.95rem; white-space: nowrap; }
.nav-drop__link:hover,
.nav-drop:hover .nav-drop__link,
.nav-drop:focus-within .nav-drop__link { color: var(--brand-primary); }
.nav-drop__caret { font-size: 0.7em; line-height: 1; transition: transform var(--transition-fast); }
.nav-drop:hover .nav-drop__caret,
.nav-drop:focus-within .nav-drop__caret { transform: rotate(180deg); }
.nav-drop__menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 280px; padding: var(--space-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 200;
}
/* invisible bridge so the pointer can cross the gap without closing the menu */
.nav-drop__menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.nav-drop:hover .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-drop__menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 0.9375rem; font-weight: 500; color: var(--text); white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-drop__menu a:hover { background: var(--bg-soft); color: var(--brand-primary); }
.nav-drop__ico { font-size: 1rem; width: 1.25em; text-align: center; }
.nav-drop__all { margin-top: 4px; padding-top: 12px !important; border-top: 1px solid var(--border); color: var(--brand-primary) !important; font-weight: 600 !important; }

/* A 7th top-level item is tight between 769px and ~1080px — tighten, do not clip. */
@media (min-width: 769px) and (max-width: 1080px) {
  .site-nav { gap: var(--space-4); }
  .site-nav a, .nav-drop__link { font-size: 0.875rem; }
}
@media (min-width: 769px) and (max-width: 920px) {
  .site-nav { gap: var(--space-3); }
  .site-logo span { display: none; }
}
@media (min-width: 769px) { .mnav-group { display: none !important; } }

/* ----- Mobile drawer: occasions accordion + full-height scroll ----- */
@media (max-width: 768px) {
  .site-mobile-nav:not([hidden]) {
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(var(--space-5) + var(--bottom-cta-height)) !important;
  }
  .site-mobile-nav > a { min-height: 44px; display: flex; align-items: center; }
  .mnav-group { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .mnav-group__summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 44px; padding: 10px 0;
    font-weight: 600; font-size: 1rem; color: var(--text);
    cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
  }
  .mnav-group__summary::-webkit-details-marker { display: none; }
  .mnav-group__summary::marker { content: ""; }
  .mnav-group__caret { font-size: 0.8em; color: var(--brand-primary); transition: transform var(--transition-fast); }
  .mnav-group[open] .mnav-group__summary { color: var(--brand-primary); }
  .mnav-group[open] .mnav-group__caret { transform: rotate(180deg); }
  .mnav-group__items {
    display: flex; flex-direction: column;
    margin: 0 0 var(--space-3) 2px; padding-left: var(--space-4);
    border-left: 2px solid var(--brand-primary);
  }
  .mnav-group__items a {
    display: flex !important; align-items: center; gap: 10px;
    min-height: 44px; padding: 10px 0 !important; font-size: 0.9375rem !important;
  }
  .mnav-group__ico { width: 1.35em; text-align: center; }
  .mnav-group__all { color: var(--brand-primary) !important; font-weight: 600 !important; }
}

/* ── AI Concierge bubble vs. the mobile bottom CTA bar ─────────────────────
   The floating bubble is fixed at bottom:24px, which puts it UNDER the
   72px .bottom-cta bar that only exists below 768px. Lift it clear.
   Scoped with :not(.mode-inline) on purpose: the in-hero inline panel is
   position:relative, so an unscoped `bottom:` would shove the whole chat
   panel 88px up out of its hero container.
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  #shuilink-concierge-root:not(.mode-inline) {
    bottom: calc(var(--bottom-cta-height, 72px) + 16px) !important;
  }
}


/* ── Amy quote CTA card (2026-07-30) ───────────────────────────────────────
   Amy used to be embedded INLINE in the "Get a quote for your <city> event"
   section via #hero-chat-container. The owner moved her back to a floating
   bottom-right bubble on EVERY page ("每个页面都应该有Amy默认跳出来,然后不要换
   在hero里面"), which left the right-hand column of that grid-2 empty. This
   card fills the column: it explains what Amy does, opens her on click, and
   gives the two non-chat paths (instant-price booking flow, phone) for the
   visitors who will not chat with an AI. Shared by all 1334 pages that had
   the inline container, so it lives here rather than in per-page <style>.
   All colours come from the theme tokens so dark mode works unchanged. */
.amy-cta {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-3);
  max-width: 560px;
  margin-inline: auto;
  text-align: left;
}
.amy-cta__badge {
  display: inline-block;
  background: var(--brand-primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: var(--radius-full);
}
.amy-cta__title {
  font-size: clamp(1.15rem, 1.1vw + 0.8rem, 1.5rem);
  line-height: 1.25;
  margin: var(--space-4) 0 var(--space-3);
}
.amy-cta__text {
  color: var(--text-muted);
  margin: 0 0 var(--space-5);
  font-size: 0.97rem;
  line-height: 1.6;
}
.amy-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* .btn is sized for hero use; trim it so two buttons fit one row in a
   half-width grid column, and give the <button> the same affordances the
   <a class="btn"> siblings get for free. font-family / line-height are
   restated because a bare <button> does NOT inherit them — without this the
   chat button rendered 44px tall next to a 53px link and the row looked
   broken. The transparent border keeps both boxes the same height. */
.amy-cta__actions .btn {
  padding: 13px 18px;
  font-size: 0.97rem;
  font-family: var(--font-body);
  line-height: 1.6;
  cursor: pointer;
  border: 1px solid transparent;
}
.amy-cta__actions .btn-ghost { border-color: var(--border); }
.amy-cta__list { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-2); }
.amy-cta__list li { position: relative; padding-left: 24px; font-size: 0.92rem; color: var(--text); }
.amy-cta__list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--brand-primary); font-weight: 800; }
.amy-cta__phone { margin: var(--space-4) 0 0; font-size: 0.92rem; color: var(--text-muted); }
.amy-cta__phone a { color: var(--brand-primary); font-weight: 700; }
@media (max-width: 640px) {
  .amy-cta { padding: var(--space-5); }
  .amy-cta__actions .btn { width: 100%; }
}


/* ----- Section 16 - Mobile header fit -------------------------------------
   2026-07-30. At <=768px .site-nav is hidden, but the brand wordmark kept its
   1.125rem size, so on a 390px phone the header row (logo + wordmark + theme
   toggle + "Book Your Party" + hamburger) overflowed: the wordmark wrapped to
   three lines and was clipped by the 64px header, and the CTA label wrapped
   too. Owner's standing rule: "注意手机显示的完整度和适配性也要跟上".
   Fix is pure CSS - keep the row on one line, and below 480px show the logo
   mark only (the logo image itself carries the wordmark).
   ------------------------------------------------------------------------ */
@media (max-width: 560px) {
  .site-header__inner { gap: var(--space-2); }
  .site-logo { flex: 0 0 auto; min-width: 0; }
  .site-logo span { font-size: 0.9375rem; white-space: nowrap; }
  .site-header-cta { white-space: nowrap; padding: 8px 12px; font-size: 0.8125rem; }
  .theme-toggle { flex: 0 0 auto; }
  .site-mobile-toggle { flex: 0 0 auto; }
}
@media (max-width: 480px) {
  .site-logo span { display: none; }
}

/* ===== HT BRAND SKIN =============================================
   焦黑 · 火焰橙 · 赤金 —— 配色取自 Hibachi Tonight logo
   （焦黑底 #080404 / 火弧 #E94816 / 赤金字 #EDB960）。
   只覆盖 token + header/footer/hero 的表面，不动布局。
   改配色只改这一块。
   ================================================================ */
:root {
  --ht-ink:         #0B0605;   /* 焦黑 —— 页眉页脚主色 */
  --ht-ink-2:       #16100D;   /* 焦黑浅一档 */
  --ht-char:        #080404;   /* logo 底色 */
  --ht-flame:       #E94816;   /* 火弧 —— 唯一 CTA 色 */
  --ht-flame-dark:  #B3350E;
  --ht-ember:       #B3420F;   /* 深炭火 —— 链接色 */
  --ht-ember-deep:  #8C3410;
  --ht-gold:        #EDB960;   /* 赤金字 */
  --ht-gold-bright: #F6E184;
  --ht-gold-deep:   #CD9A4E;
  --ht-cream:       #FAF6EE;

  --brand-primary:      var(--ht-flame);
  --brand-primary-dark: var(--ht-flame-dark);
  --brand-accent:       var(--ht-gold);
  --brand-black:        var(--ht-ink);
  --bg-soft:            var(--ht-cream);
}

/* ---- 页眉：焦黑实底 + 金线 ---- */
.site-header {
  background: linear-gradient(180deg, var(--ht-char) 0%, var(--ht-ink-2) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(237,185,96,0.30);
  height: 72px;
}
/* ☠️ "Hibachi Tonight" 是两个词，默认会在 1280-1500px 折成两行，
   把右边的 Contact 顶到主题切换按钮底下。锁死不折行。 */
.site-header .site-logo { color: var(--ht-gold); letter-spacing: 0.04em; white-space: nowrap; }
.site-header .site-logo img { height: 44px; width: auto; }
/* 横版锁定比原来的方形小标宽一倍，手机上会把右边的 CTA + 汉堡顶出屏幕 15px。
   小屏收一档。（改宽高之前先量：document.scrollWidth - clientWidth 必须是 0） */
@media (max-width: 600px) {
  .site-header .site-logo img { height: 32px; }
  /* 页眉右边那颗 "Book Your Party" 是固定内边距的 btn-large，
     配上更宽的横版标就会整体溢出屏幕（360px 下溢出 21px）。小屏收紧。 */
  .site-header .btn.btn-large,
  .site-header .site-header-cta {
    padding-inline: 0.85rem; font-size: 0.82rem; white-space: nowrap;
  }
  .site-header > .container, .site-header .container { gap: 0.4rem; }
}
@media (max-width: 380px) {
  .site-header .site-logo img { height: 28px; }
  .site-header .btn.btn-large, .site-header .site-header-cta { padding-inline: 0.65rem; font-size: 0.78rem; }
}
/* 页眉已经用横版锁定（图里带字），旁边的文字 <span> 只留给读屏和 SEO：
   留着可见的话，1280-1500px 下会把右边的 Contact 挤到主题切换按钮底下。 */
.site-header .site-logo span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 首屏用横版锁定，方形标在 ~120px 宽的时候字已经糊了 */
/* 模板自带 max-width:190px，横版锁定在那个宽度里字是糊的 —— 必须一起放开 */
.hero__logo { width: min(520px, 78vw); max-width: min(520px, 78vw); height: auto; margin-inline: auto; display: block; }
@media (max-width: 640px) { .hero__logo { width: min(400px, 86vw); max-width: min(400px, 86vw); } }
.site-header .site-nav a { color: #EFE6D8; }
.site-header .site-nav a:hover { color: var(--ht-gold); }
.site-header .nav-drop__menu {
  background: var(--ht-ink-2);
  border: 1px solid rgba(237,185,96,0.22);
}
.site-header .nav-drop__menu a { color: #EFE6D8; }
.site-header .nav-drop__menu a:hover { background: rgba(237,185,96,0.12); color: var(--ht-gold); }
:root { --header-height: 72px; }

/* ---- 英雄区：焦黑压片 + 底部一抹火光，贴 logo 的火弧 ---- */
.hero__overlay {
  background:
    radial-gradient(120% 80% at 50% 108%, rgba(233,72,22,0.34) 0%, rgba(233,72,22,0) 62%),
    linear-gradient(180deg, rgba(8,4,4,0.66) 0%, rgba(11,6,5,0.48) 46%, rgba(8,4,4,0.92) 100%);
}
.hero__eyebrow { color: var(--ht-gold); letter-spacing: 0.14em; }
.hero__trust-stars { color: var(--ht-gold); }

/* ---- 页脚：焦黑 + 金标题 ---- */
.site-footer {
  background: var(--ht-ink);
  border-top: 3px solid var(--ht-gold-deep);
  color: #DAD2C4;
}
.site-footer a,
.site-footer .site-footer__list a { color: #DAD2C4; }
.site-footer a:hover { color: var(--ht-gold); }
.site-footer .site-footer__title { color: var(--ht-gold); }
.site-footer .site-logo,
.site-footer strong { color: var(--ht-gold); }
.site-footer .text-muted { color: #A79E90 !important; }
.site-footer__bottom { border-top-color: rgba(237,185,96,0.2); color: #8D8476; }

/* ---- 按钮：火焰橙实心，带一点炭火辉光 ---- */
.btn-primary, .site-header-cta {
  box-shadow: 0 2px 0 rgba(0,0,0,0.28), 0 0 18px rgba(233,72,22,0.22);
}
.btn-secondary:hover { border-color: var(--ht-gold-deep); color: var(--ht-ember-deep); }

/* ---- 小屏：btn-large 的 36px 内边距在 360-400px 下会把按钮顶出屏幕 ----
   （这是从 ilove 模板一路带下来的老问题，"Learn More →" 那颗最典型：
     208px 宽 + 左右各 36px 内边距，360px 屏幕横向溢出 21px。）
   量法：document.documentElement.scrollWidth - clientWidth 必须是 0。      */
@media (max-width: 460px) {
  .btn.btn-large { padding-inline: 1.1rem; font-size: 1rem; max-width: 100%; }
  .hero__cta-row { flex-wrap: wrap; }
  .hero__cta-row .btn { max-width: 100%; }
}

/* ---- 强调件 ---- */
a { color: var(--ht-ember); }
a:hover { color: var(--ht-flame); }
.badge, .pill, .tag { border-color: var(--ht-gold-deep); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: #0B0605;
    --bg-soft: #16100D;
    --bg-elev: #1F1714;
    --border:  #3A2A20;
  }
}

/* ---- 标题字：Cinzel，呼应 logo 的罗马式衬线大写字 ---- */
:root { --font-headline: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif; }
h1, h2, h3, .hero__headline, .site-footer__title, .cities-group__title {
  font-family: var(--font-headline);
  letter-spacing: 0.005em;
}
.hero__eyebrow, .site-header-cta, .btn { font-family: var(--font-body); }