/* ======================================================================
   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: #E23A2E;
  --brand-primary-dark: #B71C1C;
  --brand-accent: #FFC107;
  --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: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ----- 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; }
}