/* ============================================
   Darlise Cafe, Dark Retheme
   Deep navy-charcoal + warm cream + one terracotta accent
   (retheme of the Rustico Kitchen dark base, class vocabulary preserved)
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Brand (navy, verbatim) + accent (terracotta, verbatim) */
  --color-brand:        #087808;   /* nav bar, footer, page-hero band, solid brand buttons */
  --color-brand-dark:   #054D05;   /* deeper navy panel (mobile drawer) */
  --color-brand-light:  #6CDA6C;   /* navy family as TEXT/icon color on the dark page (AA-safe) */
  --color-accent:       #D3060B;   /* CTA fills, active tab fill, borders/underlines (decorative) */
  --color-accent-light: #F80A10;   /* accent hover; small accent text directly on the dark page (AA-safe) */
  --color-accent-dim:   #AB0509;
  --color-accent-ink:   #DD4D51;   /* terracotta as small TEXT on the dark page/cards (AA-safe) */
  /* Derived, not hardcoded: some accentInk pins land under 4.5:1 on the darkest
     card surface once re-hued (measured ~3.5:1 on a burgundy palette). Lighten
     toward cream so eyebrow labels/star ratings stay AA on every surface. */
  --color-accent-ink-text: color-mix(in srgb, var(--color-accent-ink) 80%, var(--color-cream) 20%);

  /* Surfaces, dark retheme: rich navy-charcoal, never pure black */
  --color-bg:      #0D280F;  /* page base */
  --color-bg-warm: #143116;  /* alt band, slightly lighter (info bar, reviews, alternating sections) */
  --color-bg-card: #1A401D;  /* elevated surface: cards, menu rows, forms (always lighter than the section behind it) */
  --color-surface: #1A401D;

  /* Text */
  --color-text:      #EDE7D9;  /* warm cream body text/headings on dark (never pure white) */
  --color-text-dim:  rgba(237,231,217,0.7);  /* secondary / captions, >= /65 for AA */
  --color-cream:     #FDFBF7;  /* brightest cream, nav/footer wordmark + hero */
  --color-cream-dim: rgba(253,251,247,0.78); /* secondary on nav/footer/hero, >= /65 for AA */

  --color-overlay: rgba(10, 26, 11, 0.72);   /* deepened navy-charcoal hero overlay for legibility */
  --color-border:       rgba(253,251,247,0.09);
  --color-border-hover: rgba(193,80,46,0.4);

  /* Dark-theme depth: near-black shadows (a warm-charcoal shadow would vanish on a dark page) */
  --color-border-accent: color-mix(in srgb, var(--color-brand) 13%, transparent);
  --color-border-accent-hover: color-mix(in srgb, var(--color-brand) 30%, transparent);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 10px 28px -14px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.65);

  /* Typography (font wave 2026-08-01): two families only, per magnoliabakery's
     editorial-warm character. Plus Jakarta Sans covers every UI/body role
     (nav, buttons, labels, body copy) -- one family, two optical roles, so
     "display" and "body" share a typeface and just differ in weight/size.
     Cormorant Garamond is the one earned serif: h1/h2 headlines (the bakery's
     editorial voice) and, in italic, the handwritten-style accent word/script
     lockup -- replacing the old separate cursive family with an italic cut of
     the same serif, so the accent reads as one refined voice, not two clashing
     ones. No Fraunces. */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 6rem;
  --space-2xl: 8rem;

  /* Layout */
  --max-width: 1200px;
  --radius: 4px;
  --radius-lg: 8px;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-brand-light); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-accent-light); }
button { cursor: pointer; font-family: var(--font-body); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* --- Typography --- */
h1, h2 { font-family: var(--font-accent); font-weight: 600; line-height: 1.08; color: var(--color-text); letter-spacing: -0.01em; }
h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.14; color: var(--color-text); }
/* Hero H1 stays generously large (fluid 2.9rem floor already clears the
   2.5rem minimum, 5rem desktop ceiling); weight 600 matches the one
   Cormorant Garamond cut we load (requesting 800 here would ask the browser
   to fake-bold a serif that was never shipped at that weight). */
/* text-wrap: balance (progressive enhancement, no fallback needed) keeps the
   font-wave's fluid heading scale from orphaning a single short word onto its
   own line at narrow widths - most visible on the hero h1's multi-word,
   mid-sentence accent-word phrasing. */
h1 { font-size: clamp(2.9rem, 6vw, 5rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-size: clamp(2.2rem, 4vw, 3.3rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 600; line-height: 1.2; }

.font-script { font-family: var(--font-script); font-style: italic; font-weight: 600; }

.section-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-ink-text);
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-label::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--color-accent-ink);
}

/* Centered section labels */
.menu-header .section-label,
.testimonials .section-label,
#promotions .section-label,
#contact .section-label,
[style*="text-align:center"] .section-label,
[style*="text-align: center"] .section-label {
  justify-content: center;
}
.menu-header .section-label::before,
.testimonials .section-label::before,
#promotions .section-label::before,
#contact .section-label::before,
[style*="text-align:center"] .section-label::before,
[style*="text-align: center"] .section-label::before {
  display: none;
}

/* Left-aligned labels */
.events-section .section-label,
.about-text .section-label {
  justify-content: flex-start;
}

/* Dark page: section titles are cream-on-dark everywhere (nav/photo bands
   already used cream for this role, so this now matches throughout). */
.section-title {
  color: var(--color-cream);
  margin-bottom: var(--space-md);
}

.section-desc {
  color: var(--color-text-dim);
  font-size: 1.05rem;
  max-width: 600px;
  line-height: 1.7;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2.25rem;
  font-family: var(--font-display);
  /* Operator flag: CTA text was reading too small. */
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: 999px;
  transition: all 0.2s ease;
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-accent-light);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-accent) 28%, transparent);
}
.btn-primary:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.1s;
}

/* Hero primary CTA: a resting shadow (not just on :hover) so the button reads
   as a raised, tappable surface against the photo/gradient behind it, and an
   accent-tinted ring so it stays visually distinct even when the accent color
   sits close in value to the hero backdrop. */
.hero .btn-primary {
  box-shadow:
    0 10px 26px -8px color-mix(in srgb, var(--color-accent) 55%, transparent),
    0 1px 0 0 color-mix(in srgb, var(--color-cream) 18%, transparent) inset;
}
.hero .btn-primary:hover {
  box-shadow:
    0 14px 32px -8px color-mix(in srgb, var(--color-accent) 60%, transparent),
    0 1px 0 0 color-mix(in srgb, var(--color-cream) 18%, transparent) inset;
}
.hero .btn-primary:active {
  box-shadow:
    0 6px 16px -8px color-mix(in srgb, var(--color-accent) 55%, transparent),
    0 1px 0 0 color-mix(in srgb, var(--color-cream) 18%, transparent) inset;
}

/* Dark-theme default: cream border + cream text (used off the hero, over the dark page) */
.btn-outline {
  background: transparent;
  color: var(--color-cream);
  border: 1.5px solid rgba(253, 251, 247, 0.32);
}
.btn-outline:hover {
  border-color: var(--color-cream);
  background: rgba(253, 251, 247, 0.08);
  color: var(--color-cream);
  transform: translateY(-2px);
}
.btn-outline:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.1s;
}

/* Hero-only variant: stays white/cream for legibility over the photo + overlay */
.hero .btn-outline {
  background: rgba(19, 44, 76, 0.35);
  backdrop-filter: blur(4px);
  color: var(--color-cream);
  border: 1.5px solid var(--color-cream-dim);
}
.hero .btn-outline:hover {
  border-color: var(--color-cream);
  background: rgba(19, 44, 76, 0.5);
  color: var(--color-cream);
  transform: translateY(-2px);
}

.btn-dark {
  background: var(--color-brand-dark);
  color: var(--color-cream);
  border: 1px solid var(--color-brand-dark);
}
.btn-dark:hover {
  background: var(--color-brand);
  color: var(--color-cream);
  transform: translateY(-2px);
}
.btn-dark:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.1s;
}

/* --- Skip link (semantic order / a11y, SEO wave): hidden off-screen until it
   receives keyboard focus, then docks above the fixed nav so keyboard/screen-
   reader users can bypass it straight to <main>. --- */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transform: translateY(-120%);
  background: var(--color-brand-dark);
  color: #fff;
  padding: 0.85rem 1.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: transform 0.15s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* --- Navigation --- */
/* Transparent over the hero photo (Dishoom-style: nav floats on the image, no
   pasted-on color bar), solid brand-dark once scrolled past the hero for
   legibility over content. Solid color, not a scrim/blur, so the fixed mobile
   drawer never inherits a containing block from a blurred parent. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Mobile-wave fix: .nav (position+z-index) establishes its own stacking
     context, so the off-canvas .nav-links drawer nested inside it can never
     paint above a same-level sibling elsewhere in the body regardless of its
     own z-index. At the old z-index:100 the open drawer rendered BEHIND the
     .mobile-call-bar (z-index:150, a body-level sibling) - its bottom edge
     was hidden under the sticky call bar. 160 clears the call bar while
     staying below the cart drawer/modal/preview-badge (200/201/250/2000). */
  z-index: 160;
  padding: 1.1rem 0;
  background: transparent;
  transition: padding 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.nav.scrolled {
  padding: 0.65rem 0;
  background: var(--color-brand-dark);
  box-shadow: var(--shadow-md);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Wordmark: name in Jakarta 700 cream + script word in Cormorant Garamond
   italic terracotta (text-only fallback for prospects with no logo asset).
   (Text-lockup brand mark, exempt from body-text contrast per WCAG 1.4.3.) */
/* Real-logo rendering (dual-variant swap; operator quality bar 2026-07-24). */
/* Operator rule: logos stay 40-48px. */
.nav-logo-img { height: 48px; width: auto; display: block; }
.nav.scrolled .nav-logo-img { height: 42px; }
.nav-logo img.nav-logo-dark { display: block; }
.nav-logo img.nav-logo-light { display: none; }
.nav.scrolled .nav-logo img.nav-logo-dark { display: none; }
.nav.scrolled .nav-logo img.nav-logo-light { display: block; }

.nav-logo,
.footer-brand .wordmark {
  display: inline-flex;
}
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: -0.01em;
  color: var(--color-cream);
  line-height: 1;
  transition: font-size 0.25s;
}
.nav.scrolled .wordmark { font-size: 1.35rem; }
.wordmark .wordmark-script {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 600;
  font-size: 1.3em;
  color: var(--color-accent);
  line-height: 1;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.1rem;
  list-style: none;
}

.nav-links a {
  color: var(--color-cream-dim);
  font-family: var(--font-display);
  /* Operator flag: nav text was reading too small. 0.85rem uppercase-tracked
     is visually equivalent to a ~0.95rem sentence-case label. */
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  padding: 0.25rem 0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width 0.3s;
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a:hover,
.nav-links a.active { color: var(--color-cream); }

/* Phone number, desktop-only, visible beside the CTA */
.nav-phone {
  display: none;
  color: var(--color-cream-dim);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}
.nav-phone:hover { color: var(--color-cream); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.4rem !important;
  background: var(--color-accent);
  color: #fff !important;
  border-radius: 999px;
  font-weight: 700;
}
.nav-cta:hover {
  background: var(--color-accent-light);
  color: #fff !important;
  transform: translateY(-1px);
}
.nav-cta:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.1s;
}
.nav-cta::after { display: none !important; }

/* Groups the cart button, Call Us CTA and hamburger toggle so the cart sits
   before Call Us and both stay visible even when the mobile drawer is closed. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Nav cart button + count badge. Mobile-wave: explicit 44x44 hit box (was a
   bare 20px icon + 4px padding = 28x28, under the 44x44 thumb-target floor)
   with the icon still visually 20px, just centered in more tappable room. */
.nav-cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: var(--color-cream);
  padding: 0;
}
.nav-cart svg { width: 20px; height: 20px; }
.nav-cart:hover { color: var(--color-accent-light); }
.nav-cart:active { transform: scale(0.9); transition: transform 0.1s; }

.cart-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-badge:empty { display: none; }

/* Mobile menu toggle. Mobile-wave: 44x44 hit box (was ~30x24, the bars
   themselves stay a visually restrained 22px, centered in the bigger box). */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-cream);
  transition: all 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- Hero (strong-hero engine: fullbleed | split | bandoverlay archetypes) --- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  /* Bold brand-derived gradient: the base layer a staged photo sits on, and the
     deliberate fallback (no empty hero) when no photo is available. */
  background: linear-gradient(135deg, var(--color-brand-dark) 0%, var(--color-bg) 52%, var(--color-brand) 155%);
}

/* Photo layer for fullbleed + bandoverlay. No img → the .hero gradient shows. */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(120deg, var(--color-overlay) 0%, rgba(10,16,26,0.5) 50%, var(--color-overlay) 100%);
}

.hero-inner { position: relative; z-index: 2; width: 100%; }

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 5.5rem 0 3rem;
}

/* Split: content on the dark brand gradient, real photo (or bold gradient panel)
   on the other side. */
.hero-split .hero-inner {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  min-height: 100vh;
  padding: 6.5rem 0 3.5rem;
}
.hero-split .hero-content { padding: 0; max-width: 560px; }
.hero-figure {
  position: relative;
  align-self: stretch;
  min-height: min(62vh, 560px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  /* Bold brand -> accent gradient panel when no photo is staged */
  background: linear-gradient(140deg, var(--color-brand) 0%, var(--color-accent-dim) 55%, var(--color-brand-dark) 100%);
}
.hero-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bandoverlay: full-bleed photo + a solid brand CTA band low on the hero. */
.hero-bandoverlay .hero-inner {
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  padding: 7rem 0 clamp(2rem, 5vw, 3.5rem);
}
.hero-bandoverlay .hero-overlay {
  background: linear-gradient(0deg, rgba(10,16,26,0.6) 0%, rgba(10,16,26,0.14) 46%, transparent 72%);
}
.hero-bandoverlay .hero-content {
  max-width: 860px;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Light on the navy overlay: raw terracotta text here would fail AA (~1.75:1
     against the navy scrim), so the badge text stays cream and terracotta is
     used only for the small decorative bar. */
  color: var(--color-cream);
  margin-bottom: var(--space-md);
}

.hero-badge::before {
  content: '';
  width: 36px;
  height: 2px;
  background: var(--color-accent);
}

.hero h1 {
  color: var(--color-cream);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.02em;
}

.hero h1 em,
.hero h1 .font-script {
  font-style: italic;
  font-family: var(--font-script);
  color: var(--color-accent-light);
  font-weight: 600;
}

.hero-sub {
  font-size: 1.1rem;
  color: var(--color-cream-dim);
  margin-bottom: var(--space-lg);
  max-width: 480px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: nowrap;
}
.hero-actions .btn {
  padding: 0.85rem 1.75rem;
  white-space: nowrap;
}

/* Above-the-fold trust strip: real rating + review count (+ optional "since") */
.hero-trust {
  display: flex;
  align-items: center;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-cream);
  font-size: 0.95rem;
}
.hero-rating strong { font-family: var(--font-display); font-size: 1.15rem; }
.hero-stars { color: #FFC65A; letter-spacing: 0.06em; }
/* Honest star fill: --stars-fill (from hero.starsPercent) clips the gold to the
   real rating (4.6 -> 92%), so no full extra star is claimed. Falls back to 100%. */
.hero-stars[style*="--stars-fill"] {
  background: linear-gradient(90deg, currentColor var(--stars-fill, 100%), rgba(255,255,255,0.30) var(--stars-fill, 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: rgba(253, 251, 247, 0.1);
  border: 1px solid rgba(253, 251, 247, 0.22);
  color: var(--color-cream);
  font-size: 0.82rem;
  font-weight: 600;
}
.hero-chip svg { width: 16px; height: 16px; color: var(--color-accent-light); flex-shrink: 0; }

/* --- Info Bar --- */
.info-bar {
  background: var(--color-bg-warm);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-sm) 0;
}

.info-bar-inner {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text);
  font-size: 0.85rem;
}
.info-item a { color: var(--color-text); }
.info-item a:hover { color: var(--color-accent-ink); }

.info-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent-ink);
  flex-shrink: 0;
}

/* Hours reads as one long sentence with no label/value split in the markup,
   so it visually merged with the address/phone items. Give it its own weight,
   a touch more line-height and a divider so it reads as the standout fact in
   the bar instead of a fourth identical row. */
.info-item[data-el="hours"] {
  font-weight: 600;
  color: var(--color-cream);
  line-height: 1.5;
  max-width: 460px;
  padding-left: var(--space-md);
  border-left: 1px solid var(--color-border);
}
@media (max-width: 640px) {
  .info-item[data-el="hours"] {
    padding-left: 0;
    border-left: none;
    max-width: none;
  }
}

/* --- Sections --- */
/* Generous vertical rhythm (editorial breathing room, not a dense SaaS-page
   stack): scales from the original mobile spacing up to a much roomier band
   on desktop, where the look-match gap against a spacious inspiration site
   was widest. */
section {
  padding: clamp(3.75rem, 8vw, 7rem) 0;
  position: relative;
  scroll-margin-top: 64px; /* fixed nav height: anchor jumps land below the bar */
}

/* Editorial rhythm: an occasional warm-cream band breaks the dark scroll into
   distinct "pages" (magazine pacing), the way a restaurant lookbook alternates
   ink-on-paper spreads with full-bleed photo/dark spreads. Reusable utility;
   round 1 of the food-static look-match pass applies it to About. */
section.section-light {
  background: var(--color-cream);
}
.section-light .section-label,
.section-light .section-label::before { color: var(--color-accent-dim); }
.section-light h2,
.section-light h3,
.section-light .section-title { color: #1C2A38; }
.section-light .about-text p,
.section-light p { color: rgba(28, 42, 56, 0.72); }
.section-light .visit-detail {
  background: rgba(28, 42, 56, 0.05);
  border-left-color: var(--color-accent);
  box-shadow: none;
}
.section-light .visit-detail strong { color: #1C2A38; }
.section-light .visit-detail span,
.section-light .visit-detail p { color: rgba(28, 42, 56, 0.68); }
.section-light .visit-detail svg { color: var(--color-accent-dim); }
.section-light .about-img::after { border-color: rgba(28, 42, 56, 0.12); }
.section-light .section-desc { color: rgba(28, 42, 56, 0.68); }
.section-light .rating-badge {
  background: rgba(28, 42, 56, 0.05);
  border-color: rgba(28, 42, 56, 0.1);
  color: #1C2A38;
}
.section-light .rating-score { color: #1C2A38; }
.section-light .testimonial-card {
  background: #fff;
  border-color: rgba(28, 42, 56, 0.08);
  box-shadow: 0 4px 16px rgba(28, 42, 56, 0.06);
}
.section-light .testimonial-card blockquote,
.section-light .testimonial-author { color: #1C2A38; }
.section-light .testimonial-source { color: rgba(28, 42, 56, 0.55); }
/* accent-ink-text is tuned for dark surfaces; on the light band it still reads
   under 4.5:1, so reuse the same accent-dim already proven AA-safe here. */
.section-light .rating-stars,
.section-light .testimonial-stars { color: var(--color-accent-dim); }

/* --- About --- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: stretch;
  margin-top: var(--space-lg);
}

.about-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-md);
}
.about-img::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  pointer-events: none;
}
.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The About photo is a tall portrait whose lower third is a foreground plant;
   bias the crop upward so the fireplace + dining tables stay in frame. */
#about .about-img img { object-position: center 22%; }

.about-text .section-label {
  justify-content: flex-start;
}

.about-text p {
  color: var(--color-text-dim);
  margin-bottom: var(--space-sm);
  font-size: 1rem;
  line-height: 1.75;
}

/* --- Chef section (reuses the #events DOM slot) --- */
.events-section {
  background: var(--color-bg-warm);
  border-top: 1px solid var(--color-border);
}

.events-grid {
  display: grid;
  /* Bio + facts list + pull-quote generally outweighs a single portrait, so
     give the text column a bit more of the row than a flat 1:1 split. */
  grid-template-columns: 0.88fr 1.12fr;
  gap: var(--space-lg);
  align-items: center;
  margin-top: var(--space-lg);
}

/* Chef portrait: a fixed portrait ratio keeps the photo column's height
   predictable next to the text column instead of following whatever the
   source image's native aspect happens to be. */
.events-grid > .about-img {
  aspect-ratio: 4 / 5;
}
.events-grid > .about-img img {
  height: 100%;
}

.events-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.events-photos img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Single chef portrait framing (the section's primary photo slot) */
.events-info .about-img,
.events-grid > .about-img {
  box-shadow: var(--shadow-md);
}

.events-info h3 {
  color: var(--color-cream);
  margin-bottom: var(--space-sm);
}
.events-info p {
  color: var(--color-text-dim);
  margin-bottom: var(--space-md);
  font-size: 1rem;
  line-height: 1.75;
}

/* Verbatim pull-quote styling, used for the Chef section and anywhere a
   direct quote needs emphasis without inventing a new voice. */
.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600;
  color: var(--color-cream);
  line-height: 1.5;
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-md);
  margin: var(--space-md) 0;
}

.event-types {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.event-type {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 0.85rem var(--space-sm);
  background: var(--color-bg-card);
  border-radius: var(--radius);
  border-left: 2px solid var(--color-accent-ink);
  box-shadow: var(--shadow-sm);
}

.event-type h3 {
  color: var(--color-text);
  font-size: 0.95rem;
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: 0.1rem;
}
.event-type p {
  color: var(--color-text-dim);
  font-size: 0.82rem;
  margin: 0;
}

/* --- Menu Preview --- */
.menu-section {
  background: var(--color-bg-warm);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.menu-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}
.menu-header .section-desc {
  margin: 0 auto;
}

/* Menu highlights: a small photo strip so the densest text band on the page
   (the plain-text menu list below) isn't all-copy. Each card's image is
   independently gated -- a highlight with no image just shows name + price,
   never a broken/empty image. */
.menu-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  max-width: var(--max-width);
  margin: 0 auto var(--space-lg);
}
.menu-highlight-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s, box-shadow 0.25s;
}
.menu-highlight-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.menu-highlight-img { aspect-ratio: 4 / 3; }
.menu-highlight-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-highlight-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem var(--space-sm);
}
.menu-highlight-info h3 {
  color: var(--color-cream);
  font-size: 0.98rem;
  font-weight: 600;
}
.menu-highlight-price {
  color: var(--color-accent-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .menu-highlights { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .menu-highlights { grid-template-columns: 1fr; }
}

.menu-tabs {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.3rem;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.menu-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.4rem;
  background: transparent;
  color: var(--color-text-dim);
  border: none;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.2s;
}
.menu-tab:hover {
  color: var(--color-cream);
}
.menu-tab.active {
  background: var(--color-accent);
  color: #fff;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.menu-category { display: none; }
.menu-category.active { display: grid; }

.menu-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem var(--space-md);
  background: var(--color-bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  border-left: 2px solid transparent;
  transition: all 0.2s;
}
.menu-item:hover {
  border-left-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.menu-item-info { min-width: 0; }

.menu-item-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.2rem;
}

.menu-item-desc {
  font-size: 0.85rem;
  color: var(--color-text-dim);
  line-height: 1.5;
}

.menu-item-tags {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

/* Dietary tags stay navy-toned; terracotta is reserved for CTAs/eyebrows/active
   states only. */
.menu-tag {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  background: rgba(111, 160, 216, 0.14);
  color: var(--color-brand-light);
}

.menu-item-price {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Add to cart button on menu items, an obvious "+ Add" pill */
.menu-item-add {
  height: 34px;
  padding: 0 0.9rem;
  gap: 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  transition: all 0.2s;
}
.menu-item-add::after { content: 'Add'; }
.menu-item-add:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.menu-item-add:active {
  transform: scale(0.93);
  transition-duration: 0.1s;
}

/* Mobile-wave: the menu page is the highest-intent mobile surface (someone
   standing outside deciding), so its "+Add" pill and the item name/desc get
   a deliberate 390px-readability pass - min-width (not a fixed width) so the
   "+Add" label never gets clipped while still clearing the 44px floor. */
@media (max-width: 640px) {
  .menu-item-add { height: 44px; min-width: 44px; }
  .menu-item { padding: 1.05rem var(--space-md); }
  .menu-item-name { font-size: 1.08rem; }
  .menu-item-desc { font-size: 0.88rem; line-height: 1.55; }
}

.menu-cta {
  text-align: center;
  margin-top: var(--space-lg);
}
.menu-note {
  color: var(--color-text-dim);
  font-size: 0.85rem;
  margin-bottom: var(--space-sm);
}

/* --- Full Menu Page --- */
/* Navy page-hero band (menu.html) */
.page-hero {
  padding: calc(3.25rem + var(--space-md)) 0 var(--space-md);
  text-align: center;
  background: var(--color-brand-dark);
  border-bottom: 1px solid var(--color-border);
}
/* Terracotta text is too low-contrast directly on the solid navy band, so the
   label itself stays cream; the decorative rule keeps the terracotta accent. */
.page-hero .section-label { justify-content: center; color: var(--color-cream); }
.page-hero .section-label::before { background: var(--color-accent-light); }
.page-hero .section-title,
.page-hero h1 { color: var(--color-cream); }
.page-hero .section-desc { color: var(--color-cream-dim); }

.full-menu-section {
  padding: var(--space-lg) 0;
}

.full-menu-category {
  margin-bottom: var(--space-xl);
}

.category-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
}

.category-header h2 {
  color: var(--color-cream);
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
}

.category-header .line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* --- Gallery (reuses the #promotions DOM slot) --- */
/* Editorial mosaic, not a uniform contact-sheet grid: the first photo reads as
   a feature tile (2x2), the rest fill in around it. Real photos only, just a
   richer arrangement of the same set. */
.promos-grid,
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(130px, 15vw, 210px);
  grid-auto-flow: dense;
  gap: 1.25rem;
  margin-top: var(--space-lg);
}

.promos-grid .promo-card:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.gallery-item:hover img { transform: scale(1.05); }

/* Retheme of the legacy promo-card, kept in case it is reused as a gallery tile */
.promo-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: all 0.25s;
}
.promo-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.promo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Testimonials / Reviews --- */
.testimonials {
  text-align: center;
  background: var(--color-bg-warm);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.testimonial-grid {
  display: grid;
  /* auto-fit with a capped track (not a hardcoded repeat(3, ...) or an
     unbounded 1fr): a prospect's real fetched-review count varies (one review
     is promoted out into .review-lead above), so at 1-2 cards the row is
     centered at a natural card width instead of stretching cards to fill a
     now-empty column, and at 3+ it still wraps to the same column width as
     before. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.rating-badges {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}
.rating-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--color-text-dim);
}
.rating-score {
  font-weight: 700;
  color: var(--color-text);
  font-size: 1rem;
}
.rating-stars {
  color: var(--color-accent-ink-text);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.testimonial-card {
  padding: var(--space-md);
  padding-top: calc(var(--space-md) + 1.4rem);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  box-shadow: var(--shadow-sm);
  text-align: left;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.testimonial-card::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: 4rem;
  /* Palette-derived, not a fixed terracotta rgb: keeps the watermark quote
     tinted to whatever accent the prospect's palette actually resolves to. */
  color: color-mix(in srgb, var(--color-accent) 16%, transparent);
  position: absolute;
  top: 0.35rem;
  left: 1rem;
  line-height: 1;
}

.testimonial-stars {
  color: var(--color-accent-ink-text);
  font-size: 0.85rem;
  margin-bottom: var(--space-xs);
  letter-spacing: 0.1em;
}

.testimonial-card blockquote {
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.7;
  font-style: normal;
  font-family: var(--font-body);
  margin-bottom: var(--space-sm);
}

.testimonial-author {
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--color-cream);
}

.testimonial-source {
  font-size: 0.75rem;
  color: var(--color-text-dim);
}

/* Honest star fill in the reviews region (badge + lead + grid cards): the same
   --stars-fill clip-gradient technique as .hero-stars (a 4.5 rating clips to
   90%, never claiming a free extra star), driven by the one starsPercent this
   pack computes (hero.starsPercent) since the reviews' rating is the same
   real number as the hero's. Two tint variants: the default (for a dark
   surface) and .section-light's own ink-based "unfilled" tint - the
   reviews section always renders on the cream band in this pack, so the
   .section-light rule is the one actually in effect, kept alongside the
   default for the same reason .section-light already shadows every other
   rating/testimonial rule here (a future mood/variant could put this region
   back on a dark surface). */
.rating-stars[style*="--stars-fill"],
.testimonial-stars[style*="--stars-fill"],
.review-stars[style*="--stars-fill"] {
  background: linear-gradient(90deg, currentColor var(--stars-fill, 100%), rgba(255, 255, 255, 0.3) var(--stars-fill, 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-light .rating-stars[style*="--stars-fill"],
.section-light .testimonial-stars[style*="--stars-fill"],
.section-light .review-stars[style*="--stars-fill"] {
  background: linear-gradient(90deg, currentColor var(--stars-fill, 100%), rgba(28, 42, 56, 0.16) var(--stars-fill, 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Guest-praise pull-quote: this pack's one earned-serif "moment" outside
   headlines (Cormorant Garamond italic, per the font wave) surfaces the
   strongest fetched review ahead of the supporting grid. If a real review
   names a specific dish, this is the typography that lets it shine - a large
   italic serif line reads as an editorial moment, not another list row. */
.review-stars {
  display: flex;
  justify-content: center;
  color: var(--color-accent-ink-text);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
}
.section-light .review-stars { color: var(--color-accent-dim); }
.review-lead {
  position: relative;
  max-width: 720px;
  margin: var(--space-lg) auto 0;
  padding: 2.5rem 2.75rem 2.25rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.section-light .review-lead {
  background: #fff;
  border-color: rgba(28, 42, 56, 0.08);
  box-shadow: 0 4px 16px rgba(28, 42, 56, 0.06);
}
.review-lead-mark {
  position: absolute;
  top: -0.4rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 4.5rem;
  line-height: 1;
  color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  pointer-events: none;
}
.review-lead p {
  position: relative;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.5;
  color: var(--color-cream);
  margin: 0.75rem 0 1.1rem;
  text-wrap: balance;
}
.section-light .review-lead p { color: #1C2A38; }
.review-lead footer {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.85rem;
}

/* --- Visit / Contact + Map --- */
#contact .section-label { justify-content: center; }

/* Combine contact details + map into one cohesive block */
.visit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  /* Stretch, not start: lets the map match the details column's real height
     instead of sitting at a flat 320px next to a taller (or shorter) text
     column, which read as an unbalanced pairing. */
  align-items: stretch;
}

.visit-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.visit-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-bg-card);
  border-radius: var(--radius);
  border-left: 2px solid var(--color-accent-ink);
  box-shadow: var(--shadow-sm);
}
.visit-detail svg {
  width: 22px;
  height: 22px;
  color: var(--color-accent-ink);
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.visit-detail strong {
  display: block;
  color: var(--color-text);
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}
.visit-detail span,
.visit-detail p {
  color: var(--color-text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
}

.map-container {
  width: 100%;
  height: 320px;
  min-height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Lightweight, honest pre-order / message form (no cart, no checkout) */
.lead-form {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 6rem;
}
.lead-form h3 {
  color: var(--color-cream);
  margin-bottom: var(--space-xs);
  font-weight: 700;
}
.lead-form .section-desc {
  margin-bottom: var(--space-md);
}

@media (max-width: 968px) {
  .visit-grid { grid-template-columns: 1fr; }
}

/* --- Forms (shared: lead-form) --- */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.form-group {
  margin-bottom: var(--space-sm);
}

.form-group label {
  display: block;
  font-size: 0.72rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-dim);
  margin-bottom: 0.35rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-accent);
}

.form-group textarea { resize: vertical; min-height: 90px; }
.form-group select { cursor: pointer; }

.form-submit {
  width: 100%;
  margin-top: var(--space-xs);
  justify-content: center;
}

/* --- Footer --- */
.footer {
  background: var(--color-brand-dark);
  padding: calc(var(--space-xl) / 2) 0 var(--space-md);
}

.footer-grid {
  display: grid;
  /* Less extreme ratio than 2fr:1fr:1fr:1.5fr: the brand column's copy is
     capped at 280px, so the old 2fr track left a lot of dead space before
     "Quick Links" started, throwing off the visual rhythm across columns. */
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
  align-items: start;
}

.footer-brand .wordmark { margin-bottom: var(--space-sm); }
.footer-brand p {
  color: var(--color-cream-dim);
  font-size: 0.85rem;
  max-width: 280px;
  line-height: 1.65;
}

.footer-col h3 {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Terracotta text fails AA directly on the solid navy footer; cream carries
     the label, terracotta is kept on the icons below via a lighter tint. */
  color: var(--color-cream);
  margin-bottom: var(--space-sm);
  /* Match the wordmark's line-height so every column head sits on the same
     optical top line instead of the taller wordmark reading mis-aligned. */
  line-height: 1;
}

.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.45rem; font-size: 0.85rem; color: var(--color-cream-dim); }
.footer-col a {
  color: var(--color-cream-dim);
  font-size: 0.85rem;
}
.footer-col a:hover { color: var(--color-cream); }
/* Mobile-wave: grow the tap target on the plain (icon-less) Quick Links rows
   toward the 44px floor without disturbing the visual list rhythm - the
   negative margin cancels the added padding's layout impact, so only the
   clickable box grows, not the spacing between rows. Excluded from
   .footer-contact: those rows are flex (icon + link) and a vertical negative
   margin there would pull the link out of alignment with its icon. */
.footer-col ul:not(.footer-contact) li a {
  display: inline-block;
  padding: 0.4rem 0;
  margin: -0.4rem 0;
}
.footer-contact li { display: flex; align-items: flex-start; gap: 0.5rem; }
.footer-contact li svg { width: 15px; height: 15px; flex: none; margin-top: 0.18rem; color: var(--color-cream); }

.footer-hours {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.footer-hours-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: 0.82rem;
  color: var(--color-cream-dim);
}
.footer-hours-row span:first-child { color: var(--color-cream); font-weight: 600; }
/* Values form one aligned right column ("Closed" lines up with the hours). */
.footer-hours-row span:last-child { text-align: right; white-space: nowrap; }

.footer-bottom {
  padding-top: var(--space-md);
  border-top: 1px solid rgba(253,251,247,0.14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--color-cream-dim);
}

/* --- Cart Drawer --- */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: transparent; /* no page dim, drawer slides in over the page */
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.cart-overlay.open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  background: var(--color-bg-card);
  border-left: 1px solid var(--color-border);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
  box-shadow: var(--shadow-lg);
}
.cart-drawer.open { right: 0; }

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.cart-header h3 {
  color: var(--color-cream);
  font-size: 1.2rem;
  font-weight: 700;
}

.cart-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: var(--color-text-dim);
  font-size: 1.4rem;
  padding: 0;
}
.cart-close:hover { color: var(--color-cream); }

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm) var(--space-md);
}

.cart-empty {
  text-align: center;
  color: var(--color-text-dim);
  padding: var(--space-lg) 0;
  font-size: 0.9rem;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.cart-item-info h4 {
  color: var(--color-cream);
  font-size: 0.9rem;
  font-family: var(--font-body);
  font-weight: 600;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.qty-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-cream);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-btn:hover { border-color: var(--color-accent); color: var(--color-accent-ink); }
.qty-btn:active { transform: scale(0.9); transition: transform 0.1s; }

.cart-item-price {
  color: var(--color-accent-ink);
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.cart-footer {
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}
.cart-total span:first-child {
  color: var(--color-cream);
  font-weight: 600;
  font-size: 0.9rem;
}
.cart-total span:last-child {
  color: var(--color-accent-ink);
  font-family: var(--font-body);          /* sans = decimals like .29 read cleanly */
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Compact checkout fields inside the drawer footer */
.cart-checkout-fields {
  margin-bottom: var(--space-sm);
}
.cart-checkout-fields .form-group { margin-bottom: 0.6rem; }
.cart-checkout-fields label { font-size: 0.68rem; }
.cart-checkout-fields input { padding: 0.6rem 0.75rem; }

.cart-checkout { width: 100%; justify-content: center; }

/* Toast notification */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--color-accent);
  color: #fff;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.85rem;
  z-index: 300;
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* --- Success Modal (may be reused for the pre-order form confirmation) --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,34,56,0.55);
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }

.modal {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  max-width: 420px;
  width: 90%;
  text-align: center;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  transform: scale(0.95);
  transition: transform 0.3s;
}
.modal-overlay.open .modal { transform: scale(1); }

.modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(111, 160, 216, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-sm);
}
.modal-icon svg { width: 28px; height: 28px; color: var(--color-brand-light); }

.modal h3 {
  color: var(--color-cream);
  margin-bottom: var(--space-xs);
  font-weight: 700;
}
.modal p {
  color: var(--color-text-dim);
  margin-bottom: var(--space-md);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* --- Responsive --- */
/* lg breakpoint for the nav: wordmark + phone + CTA are wide, switch to the
   hamburger earlier than the content-stacking breakpoints below. */
@media (max-width: 1024px) {
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: var(--color-brand-dark);
    flex-direction: column;
    align-items: flex-start;
    padding: 5rem var(--space-lg) var(--space-lg);
    gap: 1.5rem;
    transition: right 0.3s ease;
    box-shadow: var(--shadow-lg);
  }
  .nav-links.open { right: 0; }

  .nav-phone { display: none !important; }

  /* The nav phone pill is gone below this breakpoint - the sticky call bar
     replaces it so the phone is never more than a tap away. Everything that
     otherwise anchors to the true viewport bottom gets pushed up clear of it. */
  .mobile-call-bar { display: flex; }
  .back-to-top { bottom: calc(64px + 1rem); }
  .preview-badge { bottom: calc(64px + 12px); }
  .footer { padding-bottom: calc(64px + var(--space-md)); }
}

@media (min-width: 1025px) {
  .nav-phone { display: inline-block; }
  /* Mirrors the max-width:1024px `.mobile-call-bar { display: flex }` override
     above - see the base .mobile-call-bar rule's comment near the bottom of
     this file for why the "hide on desktop" declaration has to live in ITS
     OWN later media query instead of on the base rule. */
  .mobile-call-bar { display: none; }
}

@media (max-width: 968px) {
  .hero-bandoverlay .hero-overlay {
    background: linear-gradient(0deg, rgba(10,16,26,0.66) 0%, rgba(10,16,26,0.2) 44%, transparent 74%);
  }
  /* Split stacks: content, then the photo/gradient panel below it. */
  .hero-split .hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: var(--space-lg);
    padding: 6.5rem 0 3rem;
  }
  .hero-split .hero-content { max-width: 100%; }
  .hero-figure { order: 2; min-height: 42vh; }
  .hero-actions { flex-wrap: wrap; }

  .about-grid,
  .events-grid { grid-template-columns: 1fr; }

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

  .promos-grid,
  .gallery-grid,
  .testimonial-grid { grid-template-columns: 1fr; }

  .review-lead { padding: 2rem 1.5rem 1.75rem; }
  .review-lead-mark { font-size: 3.5rem; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
}

/* Mobile-wave: single-column photo bands (Gallery/promos, mobile-wave item
   4). Without this, only the first tile (already spanning 2 rows via
   :first-child above) stood out - everything after it was a uniform wall of
   identical-height crops. A repeating tall/normal rhythm plus an alternating
   inset breaks the column into a varied, editorial mosaic instead of a flat
   contact sheet. Source order matters here: this block must land AFTER the
   968px block above so its declarations win at <=640px (same specificity). */
@media (max-width: 640px) {
  .promos-grid, .gallery-grid {
    grid-auto-rows: clamp(160px, 46vw, 220px);
  }
  .promos-grid .promo-card:nth-child(3n),
  .gallery-grid .gallery-item:nth-child(3n) {
    grid-row: span 2;
  }
  .promos-grid .promo-card:nth-child(2n),
  .gallery-grid .gallery-item:nth-child(2n) {
    margin-inline: 1rem;
  }
}

/* Menu highlights strip: same "wall of identical crops" risk once it collapses
   to 1 column (<=480px, see .menu-highlights grid-template-columns above) -
   the 2-column state above 480px already varies visually row over row, so
   this inset is scoped to the true single-column case only. */
@media (max-width: 480px) {
  .menu-highlight-card:nth-child(2n) { margin-inline: 0.85rem; }
}

@media (max-width: 640px) {
  /* Keep the H1 + both CTAs comfortably above the fold at 375px wide: svh
     accounts for mobile browser chrome, a tighter content pad reclaims room
     from the (proportionally larger) nav clearance, and the sticky
     mobile-call-bar is the real safety net if content still runs long. */
  .hero { min-height: 100svh; }
  .hero-content { padding-top: 6rem; padding-bottom: 2rem; }
  .hero-badge { margin-bottom: 0.75rem; }
  .hero h1 { font-size: clamp(2.1rem, 9vw, 2.75rem); }
  .hero-sub { margin-bottom: var(--space-md); }
  .hero-trust { margin-top: var(--space-md); gap: 0.5rem 1rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }

  /* Portrait art-direction: a landscape stock photo covering a narrow/tall
     hero mostly crops left-right, but a squarer or portrait-sourced image
     can crop top-down instead. Bias toward the upper-middle third so a
     centered subject/face in typical stock framing survives the crop,
     matching the About image's own tuned object-position above. */
  .hero-media img,
  .hero-figure img { object-position: center 30%; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .info-bar-inner { flex-direction: column; align-items: center; gap: var(--space-xs); }
}

/* --- Back to Top --- */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(193, 80, 46, 0.3);
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--color-accent-light);
  transform: translateY(-2px);
}
.back-to-top:active {
  transform: translateY(0) scale(0.9);
  transition-duration: 0.1s;
}
.back-to-top svg { width: 20px; height: 20px; }

/* --- Animations --- */
/* Progressive enhancement: content is visible by default; the hidden initial
   state only applies once JS tags <html class="js-anim"> (and JS also carries a
   failsafe reveal). Without JS or IntersectionObserver, nothing stays blank. */
html.js-anim .fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
html.js-anim .fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Card-grid stagger (motion wave): the gallery mosaic, menu-highlight strip
   and testimonial grid are still driven by the same IntersectionObserver +
   .fade-up.visible toggle on their container (no JS change needed) - but the
   container itself is left neutral here and the reveal moves onto each card,
   with a slight nth-child delay, so a grid entering view reads as an
   editorial cascade instead of one flat block popping in. Pure CSS; runs (or
   skips, via the reduced-motion block below) with or without JS. */
html.js-anim .promos-grid.fade-up,
html.js-anim .menu-highlights.fade-up,
html.js-anim .testimonial-grid.fade-up {
  opacity: 1;
  transform: none;
  transition: none;
}
html.js-anim .promos-grid.fade-up .promo-card,
html.js-anim .menu-highlights.fade-up .menu-highlight-card,
html.js-anim .testimonial-grid.fade-up .testimonial-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
html.js-anim .promos-grid.fade-up.visible .promo-card,
html.js-anim .menu-highlights.fade-up.visible .menu-highlight-card,
html.js-anim .testimonial-grid.fade-up.visible .testimonial-card {
  opacity: 1;
  transform: translateY(0);
}
/* The reveal's own 0.45s transition (above) has higher specificity than each
   card's base hover transition, which would otherwise make post-reveal hover
   lift feel sluggish (0.45s instead of the tuned 0.25s). Restore each card's
   original hover speed/easing exactly once :hover is active - and the plain
   transition shorthand resets transition-delay to 0s too, so no stagger delay
   leaks into the hover interaction. */
html.js-anim .promos-grid.fade-up .promo-card:hover { transition: all 0.25s; }
html.js-anim .menu-highlights.fade-up .menu-highlight-card:hover { transition: transform 0.25s, box-shadow 0.25s; }
html.js-anim .testimonial-grid.fade-up .testimonial-card:hover { transition: transform 0.25s ease, box-shadow 0.25s ease; }

html.js-anim .promos-grid.fade-up .promo-card:nth-child(2),
html.js-anim .menu-highlights.fade-up .menu-highlight-card:nth-child(2),
html.js-anim .testimonial-grid.fade-up .testimonial-card:nth-child(2) { transition-delay: 60ms; }
html.js-anim .promos-grid.fade-up .promo-card:nth-child(3),
html.js-anim .menu-highlights.fade-up .menu-highlight-card:nth-child(3),
html.js-anim .testimonial-grid.fade-up .testimonial-card:nth-child(3) { transition-delay: 120ms; }
html.js-anim .promos-grid.fade-up .promo-card:nth-child(4),
html.js-anim .testimonial-grid.fade-up .testimonial-card:nth-child(4) { transition-delay: 180ms; }
html.js-anim .promos-grid.fade-up .promo-card:nth-child(5),
html.js-anim .testimonial-grid.fade-up .testimonial-card:nth-child(5) { transition-delay: 240ms; }
html.js-anim .promos-grid.fade-up .promo-card:nth-child(n+6) { transition-delay: 300ms; }

/* Hero entrance (motion wave): a composed load-in for the hero text stack
   only - never the hero photo/overlay (that stays eager + fetchpriority=high
   for LCP, an opacity-animated LCP element would blur the paint timing).
   Pure CSS keyframes so this plays identically with or without JS, and is
   already finished (last piece starts at 280ms, 0.45s duration = 730ms) well
   before any post-load screenshot settle wait. */
@media (prefers-reduced-motion: no-preference) {
  .hero-badge,
  .hero h1,
  .hero-sub,
  .hero-actions,
  .hero-trust {
    animation: hero-in 0.45s ease-out both;
  }
  .hero-badge { animation-delay: 0ms; }
  .hero h1 { animation-delay: 70ms; }
  .hero-sub { animation-delay: 140ms; }
  .hero-actions { animation-delay: 210ms; }
  .hero-trust { animation-delay: 280ms; }
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .promos-grid.fade-up .promo-card,
  .menu-highlights.fade-up .menu-highlight-card,
  .testimonial-grid.fade-up .testimonial-card { opacity: 1; transform: none; transition: none; }
  .hero-badge, .hero h1, .hero-sub, .hero-actions, .hero-trust { animation: none; opacity: 1; transform: none; }
  .btn, .btn-primary:hover, .btn-outline:hover, .back-to-top:hover { transform: none; }
}

/* --- Sub-niche variant structural hooks (fillStatic `variantEmphasis`/
   `variantCompact`, driven by templates/variants/food.json emphasize/
   deemphasize lists). Section-key -> DOM mapping for this pack:
     about   -> #about    (Our Story)
     chef    -> #chef     (Meet the Chef, only when chef content exists)
     gallery -> #gallery  (Gallery)
     menu    -> #menu on index.html, .full-menu-section on menu.html
     reviews -> #reviews  (Testimonials)
     hours / visit -> #visit (Visit / hours / map)
   food.json's catering variant also lists "approach" in emphasize, which has
   no matching section in this pack - fillStatic still emits the flag, it is
   simply never read here (safe no-op).
   Placed AFTER every per-section `background:` shorthand rule above so this
   block's `background-image` layer is never reset by an equal-specificity
   shorthand declared earlier in the cascade.
   [data-emph="1"] = a real featured treatment: promoted heading scale, a
   terracotta accent-tint band, and more vertical rhythm - structurally
   distinct from a plain section, not a recolor, and kept on this pack's dark
   Rustico mood. No new left-border-accent card is introduced here (flagged in
   LESSONS.md as an AI-slop tell) - the emphasis reads through type scale,
   rhythm and a full-width tint band instead. [data-compact="1"] = condensed:
   tighter rhythm, smaller heading, description dropped. Both are additive/
   no-op when a section carries neither attribute. */
[data-emph="1"] {
  padding-block: calc(clamp(3.75rem, 8vw, 7rem) * 1.4);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 9%, transparent) 0%, transparent 58%);
}
[data-emph="1"] .section-title { font-size: clamp(2.6rem, 4.8vw, 4rem); }
[data-emph="1"] .section-label { font-size: 0.8rem; letter-spacing: 0.24em; }
[data-emph="1"] .section-label::before { width: 44px; height: 2px; }

[data-compact="1"] { padding-block: calc(clamp(3.75rem, 8vw, 7rem) * 0.62); }
[data-compact="1"] .section-title { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
[data-compact="1"] .section-desc { display: none; }

@media (max-width: 640px) {
  [data-emph="1"] { padding-block: calc(clamp(3.75rem, 8vw, 7rem) * 1.15); }
}

/* --- Layout-variety wave: structural alternates for About + Menu, keyed off
   `data-mood` (body[data-mood], from variant.mood -- resolveVariant's already-
   computed accentMood, see orchestrator/src/lib/variants.ts). No new content
   field: the mood is the SAME real signal that already nudges the accent
   colour; this just also lets it pick a different skeleton, so two prospects
   in the same niche don't default to an identical layout, and a single
   sub-niche's businesses at least diverge from the other 9 moods. Every rule
   here targets an EXISTING data-el section and stays additive/no-op on the
   default (`warm`, or no mood at all) -- the current tabbed-grid menu and
   side-by-side about-grid ARE that default, unchanged.
   food.json's 12 variants split three ways on accentMood: classic = fine-
   dining/catering (2), bold = bar-pub/fast-casual-takeout/food-truck (3),
   warm = the remaining 7 (cafe/bakery/pizzeria/dessert-icecream/deli-butcher/
   breakfast-brunch/general) -- warm stays the untouched baseline since it is
   both the most common bucket and closest to this pack's current look. Image
   gating, fluid type (clamp/section-title), motion (.fade-up/js-anim), trust
   placement (.sw-trust / hero-trust untouched) and mobile fold (@media
   max-width:968px above, which still wins at that width -- see below) all
   hold in every alternate; only spacing/columns/ornament change. */

/* About band, classic mood (fine-dining, catering): a stacked editorial
   composition -- full-width atmospheric photo above centered prose below --
   instead of the default side-by-side grid, echoing an "evening to
   remember"/event-brief read rather than a business-card layout. Only takes
   effect when #about actually renders .about-grid (about.image is
   content-gated in index.html; with no image the existing centered
   text-only fallback markup is untouched by this selector). */
[data-mood="classic"] #about .about-grid {
  grid-template-columns: 1fr;
  max-width: 820px;
  margin-inline: auto;
}
[data-mood="classic"] #about .about-img {
  aspect-ratio: 16 / 9;
  max-height: 460px;
}
[data-mood="classic"] #about .about-text {
  text-align: center;
}
[data-mood="classic"] #about .about-text .section-label { justify-content: center; }
[data-mood="classic"] #about .about-text p {
  max-width: 640px;
  margin-inline: auto;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.7;
}
[data-mood="classic"] #about .about-text .visit-details {
  justify-content: center;
  max-width: 640px;
  margin-inline: auto;
}

/* Menu/offer band (data-el="services.cards"), classic mood: an editorial
   list -- category links read as understated text tabs (no pill fill), items
   run single-column with a hairline divider instead of a bordered card, and
   the name takes the earned serif for a menu-card, not an app-list, feel.
   The "+Add" pickup-cart action stays fully functional (mobile-call-bar/
   cart-drawer wave); only its skin quiets down to match. */
[data-mood="classic"] .menu-tabs {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: 0 0 0.4rem;
  gap: var(--space-md);
}
[data-mood="classic"] .menu-tab {
  padding: 0.4rem 0.1rem;
  border-radius: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
[data-mood="classic"] .menu-tab.active {
  background: transparent;
  color: var(--color-accent-light);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}
[data-mood="classic"] .menu-grid { grid-template-columns: 1fr; gap: 0; }
[data-mood="classic"] .menu-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: 1.15rem 0.1rem;
}
[data-mood="classic"] .menu-item:hover { border-left-color: transparent; }
[data-mood="classic"] .menu-item-name {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
}
[data-mood="classic"] .menu-item-price { font-family: var(--font-accent); font-size: 1.05rem; }
[data-mood="classic"] .menu-item-add {
  height: 30px;
  padding: 0 0.75rem;
  background: transparent;
  color: var(--color-accent-light);
}

/* Menu/offer band, bold mood (bar-pub, fast-casual-takeout, food-truck):
   photo-led bento. The highlight strip (menuPreview.highlights, already
   optional/gated per-item) promotes its first real photo to a featured tile
   instead of a uniform 3-up row -- desktop only (>=769px, matching the
   existing 3-col highlights breakpoint above) so the tablet/mobile 2-col/
   1-col fold this pack already ships is never fought. Category items get a
   louder, always-on accent edge (vs. the default's hover-only left border)
   to match the livelier tone. */
@media (min-width: 769px) {
  [data-mood="bold"] .menu-highlights { grid-template-columns: repeat(3, 1fr); }
  [data-mood="bold"] .menu-highlights .menu-highlight-card:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
  [data-mood="bold"] .menu-highlights .menu-highlight-card:first-child .menu-highlight-img { aspect-ratio: 4 / 3.4; }
}
[data-mood="bold"] .menu-tabs { border-color: var(--color-accent); }
[data-mood="bold"] .menu-item {
  border-left-width: 3px;
  border-left-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg-card));
}
[data-mood="bold"] .menu-item-add { border-radius: var(--radius); }

@media (max-width: 640px) {
  [data-mood="classic"] .menu-tabs { gap: var(--space-sm); }
  [data-mood="classic"] #about .about-img { max-height: 320px; }
}

/* --- Assembly reconciliation (orchestrator): replaces builder inline styles --- */
.about-text .res-details { margin-top: var(--space-lg); }
.section-head-center { text-align: center; }
.section-head-center .section-label { justify-content: center; }
#visit .section-head-center { margin-bottom: var(--space-lg); }
/* Visit heading craft: a short accent rule under "Visit Us" gives the section
   the same eyebrow-plus-mark weight the hero/menu headers get from their
   badge/tab treatments, instead of a bare centered h2. */
#visit .section-title {
  position: relative;
  padding-bottom: var(--space-sm);
}
#visit .section-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: var(--color-accent);
}
/* Reviews now opts into .section-light (round 7 of the look-match pass): a
   second cream band near the foot of the page bookends the one at About,
   echoing the alternating light/dark rhythm of the inspiration site. */
#visit .hero-actions { margin-top: var(--space-lg); flex-wrap: wrap; }
#visit .map-container { height: 100%; min-height: 320px; }
.visit-note {
  text-align: center;
  color: var(--color-text-dim);
  font-size: 0.9rem;
  max-width: 640px;
  margin: var(--space-xl) auto 0;
}
.page-hero .section-title { font-size: clamp(2rem, 4vw, 3.5rem); }
.page-hero .section-desc { margin: 0 auto; max-width: 560px; }
.menu-cta { padding-bottom: var(--space-lg); }
.menu-cta .section-desc { margin: 0 auto var(--space-sm); text-align: center; }
.menu-cta .section-desc + .section-desc { margin-bottom: var(--space-md); }
.visit-section { background: var(--color-bg); }
.about-text .visit-details { margin-top: var(--space-lg); }

/* Non-impersonation disclosure (required on every preview) + conversion CTA */
.preview-badge {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 2000;
  display: inline-flex;
  align-items: stretch;
  background: rgba(12, 16, 24, 0.85);
  font-size: 0.72rem;
  line-height: 1;
  border-radius: 999px;
  overflow: hidden;
  opacity: 0.92;
}
.preview-badge:hover, .preview-badge:focus-within { opacity: 1; }
.preview-badge a {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  text-decoration: none;
  white-space: nowrap;
}
.preview-badge a:focus-visible {
  outline: 2px solid var(--color-accent-light);
  outline-offset: -2px;
}
.preview-badge-info, .preview-badge-info:hover { color: #fff; }
.preview-badge-cta {
  background: var(--color-accent);
  color: var(--color-cream);
  font-weight: 600;
}
.preview-badge-cta:hover { background: var(--color-accent-light); color: var(--color-cream); }

/* --- Mobile sticky call CTA (conversion kit; mobile only, ported from
   trades-static's mobile-call-bar). z-index sits under the cart drawer/modal
   (200/201, see below) so it never covers the real checkout form when the
   drawer is open.
   Mobile-wave bug fix: the show/hide toggle (display:flex <=1024px, none
   >=1025px) MUST live entirely in the two `@media` blocks above (search this
   file for ".mobile-call-bar" in the Responsive section) - this base rule
   used to also set `display: none` unconditionally, which sits LATER in the
   cascade than those media queries and, at equal specificity, always won
   regardless of viewport. Net effect: the sticky call bar - the thumb-zone
   safety net this whole conversion kit exists for - never rendered at ANY
   width. No display here now; only the two media-query rules control it. */
.mobile-call-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -8px 24px -12px rgba(0,0,0,0.45);
}
.mobile-call-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}
.mobile-call-btn { background: var(--color-accent); color: #fff; }
.mobile-call-btn svg { width: 19px; height: 19px; }
.mobile-order-btn { background: var(--color-brand); color: #fff; }

/* --- Order Ahead section (real channels only: phone + pre-order request) ---
   Optional photo-backed CTA band: order.image sits behind a >=55%-opaque wash
   of the section's own --color-bg-warm (same identity with or without the
   photo, mirrors trades-static's quote-band). No image -> the existing flat
   background, never an empty/broken image. */
.order-section {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-warm);
  text-align: center;
}
.order-media { position: absolute; inset: 0; z-index: 0; }
.order-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.order-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-bg-warm);
  opacity: 0.88;
}
.order-section .container { position: relative; z-index: 2; }
.order-header { margin-bottom: var(--space-lg); }
.order-header .section-label { justify-content: center; }
.order-header .section-label::before { display: none; }
.order-header .section-desc { margin: 0 auto; }
.order-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  max-width: var(--max-width);
  margin: 0 auto;
}
.order-card {
  padding: var(--space-md) var(--space-sm);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
}
.order-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.3);
}
.order-card-icon {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-card-icon .brand-logo { height: 30px; width: auto; max-width: 170px; display: block; }
/* Direct Pickup card leads with its heading (no decorative icon), same as the
   delivery-app cards lead with a real brand logo -- never a bare SVG glyph. */
.order-card-plain { padding-top: calc(var(--space-md) + 38px); }
@media (max-width: 968px) { .order-card-plain { padding-top: var(--space-md); } }
.order-card h3 { color: var(--color-cream); font-size: 1.1rem; font-weight: 600; }
.order-card p { color: var(--color-text-dim); font-size: 0.82rem; line-height: 1.5; }
.order-card .btn { margin-top: auto; }
@media (max-width: 968px) {
  .order-options { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .order-options { grid-template-columns: 1fr; }
}

/* Ordering instruction pill (Rustico pattern, Darlise's real flow) */
.order-hint {
  margin-top: 0.85rem;
  display: inline-block;
  background: rgba(193, 80, 46, 0.14);
  border: 1px solid var(--color-border-hover);
  color: var(--color-cream);
  font-size: 0.92rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
}
.order-hint strong { color: var(--color-accent-light); }
.order-hint a { color: var(--color-cream); text-decoration: underline; text-underline-offset: 3px; }
.order-hint a:hover { color: var(--color-accent-light); }

/* "Order Online" pill next to Call Us (desktop); the mobile drawer already
   carries an Order link, so hide the pill where the bar gets tight. */
.nav-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.4rem;
  border: 1.5px solid var(--color-cream-dim);
  color: var(--color-cream);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s;
}
.nav-order:hover {
  border-color: var(--color-cream);
  background: rgba(253, 251, 247, 0.08);
  color: var(--color-cream);
}
.nav-order:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}
.nav-order .nav-order-short { display: none; }
/* Mobile: keep the Order pill visible (operator), compact both pills so the
   bar fits wordmark + cart + Order + Call + hamburger at 375px. */
@media (max-width: 968px) {
  /* min-height (not just padding) guarantees the 44px thumb-target floor
     regardless of the compact font metrics at this width. */
  .nav-order,
  .nav-cta { padding: 0.45rem 0.85rem !important; font-size: 0.8rem; min-height: 44px; }
  .nav-order .nav-order-full { display: none; }
  .nav-order .nav-order-short { display: inline; }
  .nav-actions { gap: 0.5rem; }
}
/* Smallest screens: the bar can't fit both pills + cart + hamburger. Order wins
   (operator); Call stays one tap away in the hero CTA, info bar and footer. */
@media (max-width: 480px) {
  .nav-cta { display: none !important; }
}


/* sw-trust widget skin (frameworks/_base/widgets/trust-bar.css, pack-tinted).
   Shared STRUCTURE across packs; this pack's palette supplies the look. */
.sw-trust { background: var(--color-brand-strong, var(--color-brand)); border-bottom: 1px solid rgba(255,255,255,0.08); }
.sw-trust-inner { max-width: 1120px; margin: 0 auto; padding: 14px 24px; display: flex; flex-wrap: wrap; gap: 10px 40px; justify-content: center; }
.sw-trust-item { display: flex; align-items: baseline; gap: 8px; }
.sw-trust-value { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #fff; font-variant-numeric: tabular-nums; }
.sw-trust-label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.75); }
@media (max-width: 640px) { .sw-trust-inner { gap: 8px 22px; padding: 12px 16px; } .sw-trust-value { font-size: 1rem; } }

/* --- Mobile fixed-widget clearance (hero-trust clip fix, 2026-08) ----------
   At phone widths the sticky .mobile-call-bar (64px tall) plus the
   .preview-badge pill pinned above it (bottom: 64px + 12px, ~26px tall) own
   the viewport's bottom ~104px. The bandoverlay hero rests bottom-anchored at
   full viewport height, which parked its last trust chip inside that band,
   clipped behind both badges. Extra bottom padding keeps the hero's last row
   above the fixed stack. This pack needs ~2rem more than its siblings: the
   hero section's own block padding hangs the 100vh hero-inner below the fold,
   sinking the trust row ~30px lower than the other packs' bandoverlay.
   Appended last so it wins the cascade over the archetype/variant hero rules
   above. */
@media (max-width: 640px) {
  .hero-bandoverlay .hero-inner { padding-bottom: calc(64px + 12px + 4.5rem); }
}

/* Re-assert the phone-width call-bar lifts: the nav media block's
   `.preview-badge { bottom: calc(64px + 12px) }` and
   `.back-to-top { bottom: calc(64px + 1rem) }` sit BEFORE the base
   .preview-badge / .back-to-top rules in this file, so the base `bottom`
   values were winning the cascade at every width and parking both widgets on
   top of the sticky call bar. This pack is the only one ordered that way
   (the others define the base rules first). Appended last so the lifts
   finally win. */
@media (max-width: 1024px) {
  .preview-badge { bottom: calc(64px + 12px); }
  .back-to-top { bottom: calc(64px + 1rem); }
}