/* Delizioso Mediterranean Food — design system
   Brand palette: orange #EA6235, black #11100C, white, grey #ACB1B6, gold #FCCF1C.
   Variable names kept for low-churn migration; semantics updated. */
:root {
  --terracotta: #EA6235;        /* primary orange */
  --terracotta-dark: #C84F26;   /* darker orange for hover */
  --cream: #FFFCFA;             /* subtle warm near-white */
  --cream-soft: #FFF8F3;        /* slightly tinted near-white */
  --olive: #FCCF1C;             /* gold (was olive accent) */
  --olive-dark: #D4AE12;        /* darker gold for hover/text */
  --gold: #FCCF1C;              /* secondary gold */
  --ink: #11100C;               /* primary black */
  --ink-soft: #3F3D38;          /* softer near-black for body text */
  --muted: #ACB1B6;             /* secondary grey */
  --line: #E0E2E5;              /* light grey divider */
  --white: #FFFFFF;
  --orange-wash: #FFE7D5;       /* ~15% orange tint for soft fills */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 1px 3px rgba(17,16,12,0.06), 0 8px 24px rgba(17,16,12,0.06);
  --shadow-lift: 0 8px 30px rgba(234,98,53,0.18);
}

* { box-sizing: border-box; }
/* Force the [hidden] attribute to win against any author rule that sets
   display (e.g. .btn-pill { display: inline-block }). Without this,
   programmatic show/hide via the hidden attribute silently fails on
   anything styled with a display value. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Site-wide warm cream — was var(--cream) (#FFFCFA) which read as
     pure white against the brand colors. Sections without their own
     background inherit this; hero gradient is tuned to blend into it. */
  background: #FFEEDD;
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--terracotta); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* -------- header -------- */
.site-header {
  /* Match the body cream so the header reads as part of the page,
     not a separate white bar. --cream (#FFFCFA) was near-white.
     backdrop-filter intentionally NOT set — with an opaque bg it
     adds no visible effect, but some browsers still subtly sample
     content behind (the looping hero video on desktop), which made
     the desktop header appear tinted/darker than mobile. */
  background: #FFEEDD;
  border-bottom: 1px solid rgba(234,98,53,0.10);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; gap: 32px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
}
.brand-mark {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--terracotta); color: var(--white);
  display: grid; place-items: center;
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700;
  box-shadow: var(--shadow-lift);
}
.brand-mark-img {
  width: 48px; height: 48px;
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
  box-shadow: var(--shadow-lift);
  display: block;
}
.brand-words { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: 'Oleo Script', cursive;
  font-size: 26px; font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.brand-tag {
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.site-nav { display: flex; gap: 8px; }
.nav-link {
  padding: 8px 14px; border-radius: 6px;
  color: var(--ink-soft);
  font-weight: 500; font-size: 15px;
  text-decoration: none;
}
.nav-link:hover { background: var(--cream-soft); color: var(--ink); text-decoration: none; }
.nav-link.active { color: var(--terracotta); }

/* Hamburger button — hidden on desktop, shown at the mobile
   breakpoint. Three bars that morph into an X when .is-open. */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: none; border: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
}
.nav-toggle-bar {
  width: 24px; height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.15s ease;
  transform-origin: center;
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.cart-button {
  position: relative;
  background: var(--ink); color: var(--white);
  padding: 10px 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px;
  text-decoration: none;
}
.cart-button:hover { background: var(--terracotta); text-decoration: none; }
.cart-icon { font-size: 18px; }
.cart-count {
  background: var(--terracotta); color: var(--white);
  min-width: 22px; height: 22px; border-radius: 11px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  padding: 0 6px;
}

/* -------- hero -------- */
.hero {
  position: relative;
  /* Bottom padding moderated so the gap above "What people say" in
     the reviews section roughly matches the gap below the header
     (section-title margin-bottom). Still leaves the Book Catering
     CTA some breathing room from the edge, just not the airy 64px. */
  padding: 80px 0 28px;
  /* Tuned to start at the body cream (#FFEEDD) and end slightly warmer,
     so the hero blends into the cream page without a visible step at
     its bottom edge where body bg shows through to following sections. */
  background: linear-gradient(135deg, #FFEEDD 0%, #FFE3C5 100%);
  overflow: hidden;
  /* Fill the viewport so the next section ("What people say") is
     below the fold on initial load. dvh accounts for mobile browser
     UI (iOS Safari address bar) which makes plain vh overflow. */
  min-height: 100vh;
  min-height: 100dvh;
  /* Center hero content vertically — without this, the headline sits
     at the top and the bottom of the now-tall section is empty.
     Absolute children (video, overlay, bg) are excluded from flex
     layout, so this only centers .hero-inner. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(234,98,53,0.10) 0%, transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(252,207,28,0.12) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Background video — autoplay loops behind the hero content. Uses
   object-fit: cover so it fills the section at any aspect ratio
   without distortion, then a cream overlay tints it to the brand
   palette and ensures the headline + rotating word + sub stay
   readable on top. The hero's underlying gradient remains as a
   fallback if the video fails to load (mobile data saver, blocked
   autoplay, etc.). */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  /* Subtle dark gradient — replaces the previous cream wash now that
     the hero text is white. The video shows through at ~70% visibility
     so the cinematic mood is preserved, and the dark layer gives the
     white headline + description enough contrast to read on any frame. */
  background:
    linear-gradient(180deg, rgba(17,16,12,0.25) 0%, rgba(17,16,12,0.45) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-with-video .hero-inner { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  /* Static hero gradient for users who opt out of motion. */
  .hero-video { display: none; }
  .hero-overlay { display: none; }
}
.hero-with-photo::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;
  background-image: url('/static/images/logo.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 25%, black 60%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 25%, black 60%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 60px; align-items: center;
}
/* When the hero has no right-side card, collapse to a single column
   so the text sits naturally on the left and the faded logo on the
   right stays as ambient branding. */
.hero-solo .hero-inner {
  grid-template-columns: 1fr;
}
.hero-solo .hero-text {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.hero-solo .hero-sub {
  margin-left: auto; margin-right: auto;
  max-width: 680px;
}
.hero-solo .hero-ctas {
  justify-content: center;
}

/* Headline line breaks:
   - Desktop:  "Our Mediterranean Family Recipes,"  / "tailored to your"
   - Mobile:   "Our Mediterranean" / "Family Recipes," / "tailored to your"
   The two ".title-frag" spans are inline on desktop (single space between
   joins them) and become blocks on mobile. ".title-tail" is always on
   its own line via display: block. */
.hero-title .title-frag { display: inline; }
.hero-title .title-tail { display: block; }

/* ── Featured rotating callout ──────────────────────────
   The rotating word lives on its OWN line below the headline as the
   completion of "Our Mediterranean Family Recipes, tailored to your
   _____". Same font + size as the headline (orange instead of black)
   so the rotating line reads as a continuation of the sentence rather
   than a separate callout. 6 items × 2.5s = 15s loop, slide-up + fade. */
.hero-feature {
  text-align: center;
  margin: 14px auto 36px;
}
.hero-feature-word {
  /* Oleo Script (same font as the "Delizioso" wordmark) at jumbo size
     ties the rotating word back to the brand mark while contrasting
     sharply with Playfair Display in the headline. Use 700 weight —
     script flourishes need weight to read at large sizes; the 400
     looks spindly at 100px+. Extra line-height + height give the
     ascender/descender flourishes room without clipping. */
  position: relative;
  display: block;
  height: 1.3em;
  font-family: 'Oleo Script', cursive;
  font-size: clamp(48px, 9vw, 112px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--terracotta);
}
.feature-word-item {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.4em);
  animation: feature-word 15s infinite cubic-bezier(0.5, 0, 0.2, 1);
  pointer-events: none;
}
.feature-word-item:nth-child(1) { animation-delay: 0s; }
.feature-word-item:nth-child(2) { animation-delay: 2.5s; }
.feature-word-item:nth-child(3) { animation-delay: 5s; }
.feature-word-item:nth-child(4) { animation-delay: 7.5s; }
.feature-word-item:nth-child(5) { animation-delay: 10s; }
.feature-word-item:nth-child(6) { animation-delay: 12.5s; }

@keyframes feature-word {
  /* 6 × 2.5s = 15s loop. Visible 2s of every 2.5s slot.
     0.5s in (3.3%), 1.5s hold (3.3-13.3%), 0.5s out (13.3-16.7%),
     then offscreen below until the next cycle. */
  0%    { opacity: 0; transform: translateY(0.4em); }
  3.3%  { opacity: 1; transform: translateY(0); }
  13.3% { opacity: 1; transform: translateY(0); }
  16.7% { opacity: 0; transform: translateY(-0.4em); }
  100%  { opacity: 0; transform: translateY(0.4em); }
}

@media (prefers-reduced-motion: reduce) {
  .feature-word-item { animation: none; opacity: 0; transform: none; }
  .feature-word-item:first-child { opacity: 1; }
}
.eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 16px;
}
.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: 64px;
  /* Just slightly looser than the original 1.05 — visible breathing
     room between "Our Mediterranean Family Recipes," and "tailored to
     your" without the dramatic gap that 2.0 created. */
  line-height: 1.25;
  font-weight: 700;
  /* White headline reads against the video underlay. Subtle drop shadow
     keeps it legible on bright video frames where the cream overlay
     alone wouldn't provide enough contrast. */
  color: var(--white);
  text-shadow: 0 2px 14px rgba(17,16,12,0.35);
  margin: 0 0 20px;
}
.hero-sub {
  font-size: 18px; line-height: 1.6;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(17,16,12,0.30);
  margin: 0 0 32px;
  max-width: 540px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-card {
  position: relative;
  background: var(--white);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
  z-index: 2;
}
.hero-card-tag {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 10px;
}
.hero-card-loc {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.3;
}
.hero-card-hours {
  font-size: 15px; color: var(--ink-soft);
  margin-bottom: 16px;
}
.hero-card-link {
  font-weight: 600;
  color: var(--terracotta);
}

/* -------- buttons -------- */
.btn {
  display: inline-block;
  padding: 14px 24px; border-radius: 8px;
  font-weight: 600; font-size: 15px;
  text-decoration: none; text-align: center;
  border: none; cursor: pointer;
  transition: transform 0.05s, background 0.15s;
  font-family: inherit;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--terracotta); color: var(--white); }
.btn-primary:hover { background: var(--terracotta-dark); }
.btn-primary:disabled { background: var(--muted); cursor: not-allowed; opacity: 0.6; }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--white); }
.btn-small { padding: 8px 14px; font-size: 13px; }
.btn-large { padding: 16px 24px; font-size: 16px; }
.btn-block { display: block; width: 100%; }

/* -------- generic sections -------- */
.main-content { padding: 60px 24px; }
.section { margin-bottom: 80px; }
.section.centered { text-align: center; }
.section.centered .btn { margin: 0 6px; }
.section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 28px; flex-wrap: wrap; gap: 12px;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.section-title.centered { text-align: center; }
.section-link { font-weight: 600; }

.page-header { text-align: center; margin: 20px 0 56px; }
.page-title {
  font-family: 'Playfair Display', serif;
  font-size: 48px; font-weight: 700;
  color: var(--ink); margin: 8px 0 12px;
}
.page-sub { font-size: 18px; color: var(--ink-soft); margin: 0; }

.block-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 600;
  color: var(--ink); margin: 0 0 16px;
}

/* -------- featured grid (home) -------- */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.featured-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.featured-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.featured-emoji {
  font-size: 64px;
  background: linear-gradient(135deg, var(--cream-soft) 0%, var(--orange-wash) 100%);
  padding: 40px; text-align: center;
}
.featured-image {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}
.featured-body { padding: 20px; }
.featured-name {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 600;
  margin-bottom: 6px;
}
.featured-desc {
  font-size: 14px; color: var(--ink-soft);
  margin-bottom: 16px; line-height: 1.5;
  min-height: 42px;
}
.featured-foot {
  display: flex; justify-content: space-between; align-items: center;
}
.featured-price {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700; color: var(--terracotta);
}

/* -------- split section (home/catering teaser) -------- */
.section.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: center;
}
.split-text p { color: var(--ink-soft); font-size: 16px; }
.split-list { padding: 0; margin: 24px 0; list-style: none; font-size: 16px; }
.split-list li { padding: 6px 0; color: var(--ink); }
.split-visual {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.visual-tile {
  aspect-ratio: 1; border-radius: var(--radius);
  display: grid; place-items: center;
  font-size: 80px;
}
/* Decorative tiles — palette-friendly orange/gold/grey washes */
.tile-a { background: linear-gradient(135deg, #FFE0CC 0%, #FFC9A8 100%); } /* orange wash */
.tile-b { background: linear-gradient(135deg, #FFF1B8 0%, #FCE587 100%); } /* gold wash */
.tile-c { background: linear-gradient(135deg, #FCD4C2 0%, #F9B49B 100%); } /* deeper orange wash */
.tile-d { background: linear-gradient(135deg, #FFEABA 0%, #FCD680 100%); } /* deeper gold wash */
.visual-photo {
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-card);
}

/* -------- onsite section (home, replaces former truck-banner) --------
   Two-column ~80vh section pitching the food-truck-onsite service.
   Left:  yellow headline + description paragraph + (mobile-only CTA).
   Right: owner-in-truck photo + (desktop-only CTA below it).
   Mobile collapses to one column with the photo as the section
   background and a dark overlay so the white text on top stays
   readable. */
.onsite-section {
  /* Break out of .main-content's 1160px container the same way the old
     truck-banner did — section spans full viewport width so the photo
     column can run edge-to-edge. */
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-bottom: 80px;
  min-height: 80vh;
  /* Inherit body warm-cream (#FFEEDD) instead of a paler panel —
     var(--cream-soft) was reading as a white slab against the page. */
  background: transparent;
  overflow: hidden;
}
.onsite-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  /* Top-align: heading's top edge sits flush with the photo's top edge. */
  align-items: start;
  min-height: inherit;
}
.onsite-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.onsite-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 6.4vw, 72px);
  line-height: 1.15;
  font-weight: 700;
  /* Brand orange (#EA6235). Reads cleanly on both the cream desktop
     background and the dark mobile photo overlay. */
  color: var(--terracotta);
  margin: 0;
}
.onsite-sub {
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
  max-width: 540px;
}
.onsite-right {
  display: flex;
  flex-direction: column;
}
.onsite-photo {
  width: 100%;
  /* Tall, content-led aspect ratio so the owner-in-truck shot reads
     as a hero photo rather than a thumbnail; capped so the section
     doesn't run past 80vh on tall monitors. */
  aspect-ratio: 4 / 5;
  max-height: 60vh;
  background-image: url('/static/images/owner-in-truck-deliz.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(17,16,12,0.18);
}
.onsite-cta {
  /* Wider + meatier than the standard btn so it carries the section. */
  align-self: flex-start;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 28px;
  letter-spacing: 0.02em;
}

/* -------- reviews -------- */
/* Testimonials sit directly under the hero, condensed vertically so the
   "Catering across LA…" section signals just below the fold. Tight
   padding, smaller cards, light-orange card backgrounds to make the
   section stand out without dominating. */
.reviews {
  /* Top padding 0 — the head space above the title is contributed by
     the hero's bottom padding (28px); doubling up here would unbalance
     the title against the gap below it (section-title margin-bottom). */
  padding: 0 0 28px;
}
.reviews .section-title.centered {
  /* margin-top mirrors the gap above (hero padding-bottom).
     margin-bottom matches so the title sits centered between the gap
     above and the testimonial cards below. */
  margin: 28px 0 28px;
  /* Section heading — bigger than the original 24px label so it reads
     as a real heading, but noticeably smaller than the 64px main hero
     headline so the hierarchy stays intact. */
  font-size: 36px;
}
.review-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.review-card {
  background: var(--orange-wash);
  border: 1px solid rgba(234,98,53,0.18);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(17,16,12,0.04);
}
.review-stars { color: var(--gold); font-size: 16px; margin-bottom: 8px; }
.review-text {
  font-size: 14.5px; line-height: 1.5;
  color: var(--ink); margin: 0 0 10px;
  font-style: italic;
}
.review-author { font-weight: 600; color: var(--ink-soft); font-size: 13px; }

/* Carousel dot indicators — hidden on desktop where the grid shows all
   three cards at once. Mobile only: visible reinforcement of "there are
   more cards, swipe to see them". The active dot is updated by a small
   IntersectionObserver in home.html. */
.review-dots { display: none; }

/* -------- menu page -------- */
.menu-tabs {
  display: flex; gap: 8px; overflow-x: auto;
  margin-bottom: 40px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 73px; z-index: 10;
  background: var(--cream);
}
.menu-tab {
  padding: 10px 18px; border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 14px; font-weight: 600;
  color: var(--ink-soft); white-space: nowrap;
  text-decoration: none;
}
.menu-tab:hover { background: var(--cream-soft); color: var(--ink); text-decoration: none; }

.menu-section { scroll-margin-top: 140px; }
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.menu-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.menu-emoji {
  font-size: 56px;
  background: linear-gradient(135deg, var(--cream-soft) 0%, var(--orange-wash) 100%);
  padding: 32px; text-align: center;
}
.menu-image {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}
.menu-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.menu-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 6px;
}
.menu-name {
  font-family: 'Playfair Display', serif;
  font-size: 19px; font-weight: 600;
}
.menu-price {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700; color: var(--terracotta);
  white-space: nowrap;
}
.menu-desc {
  font-size: 14px; color: var(--ink-soft);
  margin-bottom: 12px; line-height: 1.5;
  flex: 1;
}
.menu-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tag {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 4px;
  background: var(--cream-soft); color: var(--ink-soft);
}
.tag-popular { background: var(--gold); color: var(--ink); }
/* Dietary tags — gold for vegan/vegetarian, orange wash for gluten-free */
.tag-vegan { background: #FFF1B8; color: var(--olive-dark); }
.tag-vegetarian { background: #FFF6D0; color: var(--olive-dark); }
.tag-gluten-free { background: var(--orange-wash); color: var(--ink-soft); }

/* -------- cart drawer -------- */
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 92vw;
  background: var(--white);
  border-left: 1px solid var(--line);
  box-shadow: -10px 0 30px rgba(42,31,24,0.12);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.25s;
  display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(42,31,24,0.4);
  z-index: 99;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer-head {
  padding: 20px 24px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.cart-drawer-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px; margin: 0;
}
.icon-button {
  background: none; border: none; font-size: 20px;
  cursor: pointer; color: var(--ink-soft);
  width: 32px; height: 32px; border-radius: 6px;
}
.icon-button:hover { background: var(--cream); color: var(--ink); }
.cart-drawer-body { flex: 1; overflow-y: auto; padding: 16px 24px; }
.empty-state { text-align: center; padding: 40px 0; }
.cart-drawer-foot {
  padding: 20px 24px; border-top: 1px solid var(--line);
  background: var(--cream);
}
.cart-total-row {
  display: flex; justify-content: space-between;
  font-size: 16px; font-weight: 600;
  margin-bottom: 16px;
}
.cart-line {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.cart-line:last-child { border-bottom: none; }
.cart-line-emoji { font-size: 28px; }
.cart-line-name { font-weight: 600; font-size: 14px; }
.cart-line-price { font-size: 13px; color: var(--ink-soft); }
.cart-line-controls { display: flex; align-items: center; gap: 6px; }
.qty-btn {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--cream); border: 1px solid var(--line);
  cursor: pointer; font-weight: 700; color: var(--ink);
}
.qty-btn:hover { background: var(--terracotta); color: var(--white); border-color: var(--terracotta); }
.qty-val { min-width: 20px; text-align: center; font-weight: 600; }

/* -------- about page -------- */
.about-split {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
}
.lede { font-size: 20px; line-height: 1.6; color: var(--ink); font-weight: 500; }
.about-text p { font-size: 16px; color: var(--ink-soft); margin: 0 0 16px; }
.about-card {
  background: linear-gradient(135deg, var(--cream-soft) 0%, var(--orange-wash) 100%);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
  border: 1px solid var(--line);
}
.about-card-emoji { font-size: 72px; margin-bottom: 16px; }
.about-card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}
.about-card-name {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 600;
  color: var(--terracotta);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 12px;
}
.about-card-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-size: 18px;
  line-height: 1.5; color: var(--ink);
}

.values-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.value-card {
  background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 28px; text-align: center;
}
.value-icon { font-size: 40px; margin-bottom: 12px; }
.value-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px; margin: 0 0 8px;
}
.value-card p { font-size: 14px; color: var(--ink-soft); margin: 0; }

.cta-band {
  background: var(--terracotta);
  color: var(--white);
  padding: 60px 24px;
  border-radius: 16px;
  text-align: center;
}
.cta-band h2 {
  font-family: 'Playfair Display', serif;
  font-size: 36px; margin: 0 0 24px;
}
.cta-band .btn-primary { background: var(--white); color: var(--terracotta); }
.cta-band .btn-primary:hover { background: var(--cream); }
.cta-band .btn-ghost { color: var(--white); border-color: var(--white); }
.cta-band .btn-ghost:hover { background: var(--white); color: var(--terracotta); }

/* Single large centered button used on the About page CTA band. */
.cta-band-button {
  display: inline-block;
  margin-top: 24px;
  padding: 20px 56px;
  background: var(--white);
  color: var(--terracotta);
  font-family: inherit;
  font-weight: 700; font-size: 17px;
  letter-spacing: 0.02em;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
}
.cta-band-button:hover {
  background: var(--cream);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.cta-band-button:active { transform: translateY(0); }

/* -------- checkout -------- */
.checkout-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
.checkout-main { display: flex; flex-direction: column; gap: 24px; }
.checkout-block {
  background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--line); padding: 28px;
}
.checkout-table { width: 100%; border-collapse: collapse; }
.checkout-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.checkout-table tr:last-child td { border-bottom: none; }
.ct-qty { width: 110px; }
.ct-qty .qty-btn { margin: 0 2px; }
.ct-name { font-weight: 500; }
.ct-price { text-align: right; font-weight: 600; white-space: nowrap; }
.ct-remove { text-align: right; }
.link-muted {
  background: none; border: none;
  color: var(--muted); font-size: 13px;
  cursor: pointer; font-family: inherit;
  text-decoration: underline;
}
.link-muted:hover { color: var(--terracotta); }

.field-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field-row .flex-2 { grid-column: span 2; }
.field { display: flex; flex-direction: column; margin-bottom: 16px; }
.field label {
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 15px;
  padding: 11px 14px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--white);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(200,85,61,0.12);
}
.field input:disabled, .field select:disabled {
  background: var(--cream-soft); color: var(--muted);
}
.field textarea { resize: vertical; min-height: 60px; }

.demo-banner {
  background: var(--cream-soft); color: var(--ink-soft);
  border-left: 3px solid var(--gold);
  padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 14px; margin-bottom: 16px;
}
.demo-banner strong { color: var(--ink); }

.checkout-side { position: sticky; top: 95px; }
.summary-card {
  background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--line); padding: 28px;
}
.summary-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px; margin: 0 0 16px;
}
.summary-rows { margin-bottom: 24px; }
.summary-row {
  display: flex; justify-content: space-between;
  padding: 8px 0; color: var(--ink-soft); font-size: 15px;
}
.summary-total {
  font-weight: 700; color: var(--ink); font-size: 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px; margin-top: 6px;
}
.summary-card .link-muted {
  display: block; text-align: center; margin-top: 12px;
}

/* -------- catering page -------- */
.catering-grid {
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  align-items: start;
}
.catering-info {
  background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--line); padding: 32px;
}
.info-list { padding-left: 22px; margin: 0 0 24px; }
.info-list li { padding: 4px 0; color: var(--ink-soft); }
.info-list.ordered { padding-left: 20px; }
.info-callout {
  background: var(--cream-soft);
  border-left: 3px solid var(--terracotta);
  padding: 14px 18px; border-radius: var(--radius-sm);
  font-size: 14px;
}
.catering-form {
  background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--line); padding: 32px;
}
.small { font-size: 12px; margin-top: 10px; text-align: center; }

/* -------- confirmation pages -------- */
.confirm-hero { text-align: center; padding: 60px 0 30px; }
.confirm-check {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--olive); color: var(--white);
  display: grid; place-items: center;
  font-size: 40px; font-weight: 700;
  margin: 0 auto 24px;
  box-shadow: 0 8px 24px rgba(107,142,78,0.3);
}
.confirm-id {
  display: inline-block; margin-top: 12px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--cream-soft);
  font-size: 14px; color: var(--ink-soft);
}
.confirm-id strong { color: var(--terracotta); font-family: 'Playfair Display', serif; }
.confirm-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.confirm-card {
  background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--line); padding: 28px;
}
.confirm-card.single { grid-column: span 2; max-width: 720px; margin: 0 auto; width: 100%; }
.confirm-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.confirm-row:last-child { border-bottom: none; }
.confirm-row .muted { color: var(--muted); font-size: 14px; }
.confirm-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.confirm-table td { padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.confirm-table tr:last-child td { border-bottom: none; }
.confirm-totals { border-top: 1px solid var(--line); padding-top: 12px; }
.confirm-note {
  background: var(--cream-soft); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-top: 16px;
  font-size: 14px; color: var(--ink-soft);
}

.muted { color: var(--muted); }

/* -------- footer -------- */
.site-footer {
  background: var(--ink); color: var(--cream-soft);
  padding: 60px 0 24px;
  margin-top: 80px;
}
.footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px;
  padding: 0 24px;
}
.footer-brand {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  color: var(--white); margin-bottom: 8px;
}
.footer-tag { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }
.footer-heading {
  font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700;
  color: var(--gold); margin-bottom: 12px;
}
.footer-col p { margin: 4px 0; font-size: 14px; color: var(--cream-soft); }
.footer-col a { color: var(--cream-soft); }
.footer-col a:hover { color: var(--white); }
.social-link {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.social-link:hover { text-decoration: none; }
.social-icon { flex-shrink: 0; }
.footer-bottom {
  margin-top: 40px; padding: 20px 24px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center; font-size: 13px;
}

/* -------- pill button (rounded CTA) -------- */
.btn-pill {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 600; font-size: 15px;
  text-decoration: none; text-align: center;
  border: none; cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.02em;
  transition: transform 0.06s, background 0.15s, box-shadow 0.15s;
}
.btn-pill:hover { text-decoration: none; }
.btn-pill:active { transform: translateY(1px); }
.btn-pill-primary {
  background: var(--terracotta); color: var(--white);
  box-shadow: 0 2px 6px rgba(200,85,61,0.15);
}
.btn-pill-primary:hover {
  background: var(--terracotta-dark);
  box-shadow: 0 4px 14px rgba(200,85,61,0.28);
}
.btn-pill-primary:disabled {
  background: var(--muted); color: var(--white);
  cursor: not-allowed; opacity: 0.6;
  box-shadow: none;
}

/* -------- catering landing (Mini Kabob-style centered) -------- */
.catering-intro {
  text-align: center;
  padding: 70px 24px 30px;
  max-width: 760px;
  margin: 0 auto;
}
.catering-intro-title {
  font-family: 'Playfair Display', serif;
  font-size: 88px; font-weight: 700; line-height: 1;
  color: var(--ink);
  margin: 0 0 24px;
  letter-spacing: -0.02em;
}
.catering-intro-sub {
  font-size: 19px; line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

.catering-paths-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 1080px;
  margin: 60px auto 80px;
  padding: 0 24px;
}
/* Single-card centered layout (current "Plan with us"-only state). */
.catering-paths-single {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin-top: 40px;
}
/* The hero-platter image is 16:9. Use the natural ratio so the whole
   photo is visible (no center-crop from the square layout). */
.catering-paths-single .catering-path-photo {
  aspect-ratio: 16 / 9;
}
.catering-path-v2 {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}
.catering-path-photo-link {
  display: block; width: 100%;
  margin-bottom: 28px;
  text-decoration: none;
  transition: transform 0.18s;
}
.catering-path-photo-link:hover { transform: translateY(-4px); }
.catering-path-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-lift);
  transition: box-shadow 0.18s;
}
.catering-path-photo-link:hover .catering-path-photo {
  box-shadow: 0 20px 50px rgba(42,31,24,0.20);
}
.catering-path-title {
  font-family: 'Playfair Display', serif;
  font-size: 34px; font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
}
.catering-path-desc {
  font-size: 16px; line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 20px;
  max-width: 440px;
}
.catering-path-bullets {
  list-style: none; padding: 0; margin: 0 0 32px;
  font-size: 15px;
}
.catering-path-bullets li {
  padding: 6px 0;
  color: var(--ink-soft);
}

/* -------- old catering landing (kept for any unupdated link) -------- */
.back-link {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 14px; font-weight: 500;
  color: var(--ink-soft);
}
.back-link:hover { color: var(--terracotta); text-decoration: none; }

.catering-hero {
  position: relative;
  min-height: 460px;
  background-image: url('/static/images/hero-platter.jpg');
  background-size: cover;
  background-position: center;
}
.catering-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(42,31,24,0.78) 0%, rgba(42,31,24,0.45) 70%, rgba(42,31,24,0.30) 100%);
  display: flex; align-items: center;
}
.catering-hero-inner {
  width: 100%; padding: 70px 24px;
  color: var(--white);
}
.catering-hero-eyebrow { color: var(--gold); }
.catering-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: 56px; line-height: 1.05; font-weight: 700;
  color: var(--white);
  margin: 0 0 18px;
  max-width: 760px;
}
.catering-hero-sub {
  font-size: 18px; line-height: 1.55;
  color: var(--cream-soft);
  margin: 0; max-width: 600px;
}

.path-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.path-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  position: relative;
  overflow: hidden;
}
.path-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--terracotta);
}
.path-card-order { background: linear-gradient(135deg, var(--white) 0%, var(--cream) 100%); }
.path-card-quiz  { background: linear-gradient(135deg, var(--white) 0%, var(--orange-wash) 100%); }
.path-card-eyebrow {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 8px;
}
.path-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 30px; font-weight: 700;
  margin: 0 0 14px;
  color: var(--ink);
}
.path-card-desc {
  font-size: 16px; color: var(--ink-soft);
  margin: 0 0 18px;
  line-height: 1.55;
}
.path-card-list {
  list-style: none; padding: 0; margin: 0 0 24px;
  font-size: 14px;
}
.path-card-list li {
  padding: 5px 0 5px 22px;
  color: var(--ink-soft);
  position: relative;
}
.path-card-list li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--olive);
  font-weight: 700;
}
.path-card-cta {
  font-weight: 600; font-size: 15px;
  color: var(--terracotta);
  display: inline-block;
}

/* -------- services-offered (catering landing) -------- */
.service-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; margin-top: 12px;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}
.service-icon { font-size: 48px; margin-bottom: 12px; }
.service-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 600;
  margin: 0 0 12px;
}
.service-card p {
  font-size: 15px; color: var(--ink-soft);
  margin: 0 0 18px; line-height: 1.55;
}
.service-bullets {
  list-style: none; padding: 0; margin: 0 0 18px;
  font-size: 14px;
}
.service-bullets li {
  padding: 4px 0 4px 22px;
  color: var(--ink); position: relative;
}
.service-bullets li::before {
  content: '•';
  position: absolute; left: 6px;
  color: var(--terracotta); font-weight: 700;
}
.link-arrow {
  font-weight: 600; color: var(--terracotta);
  display: inline-block;
}

.cta-band-sub {
  color: var(--cream-soft);
  font-size: 17px; margin: -12px 0 24px;
}

/* -------- catering quiz form -------- */
.inquiry-form {
  display: flex; flex-direction: column;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
}
.quiz-block {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  margin: 0;
}
.quiz-block-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 600;
  color: var(--ink);
  margin: 0 0 18px;
  padding: 0;
}
.field-help {
  font-size: 13px; color: var(--ink-soft);
  margin: 12px 0 0;
}
.field-help strong { color: var(--ink); }
.radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.radio-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: 18px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--cream);
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
  text-align: center;
}
.radio-card:hover { border-color: var(--terracotta); }
.radio-card input { display: none; }
.radio-card:has(input:checked) {
  border-color: var(--terracotta);
  background: var(--orange-wash);
  box-shadow: 0 0 0 2px rgba(200,85,61,0.15);
}
.radio-emoji { font-size: 28px; }
.radio-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.radio-list { display: flex; flex-direction: column; gap: 10px; }
.radio-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--cream);
  transition: border-color 0.15s, background 0.15s;
}
.radio-row:hover { border-color: var(--terracotta); }
.radio-row input[type="radio"] { margin-top: 3px; accent-color: var(--terracotta); }
.radio-row:has(input:checked) {
  border-color: var(--terracotta);
  background: var(--orange-wash);
}
.radio-row-title { font-weight: 600; color: var(--ink); font-size: 15px; }
.radio-row-desc { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.form-submit {
  text-align: center;
  padding: 16px;
}
.form-submit .btn { min-width: 240px; }

/* -------- quiz wizard (catering inquiry) -------- */
.back-link-top {
  display: inline-block;
  margin: 16px 0 0 24px;
}

.quiz-wizard {
  max-width: 760px;
  margin: 40px auto 100px;
  padding: 0 24px;
}
.quiz-progress {
  width: 100%; height: 6px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--terracotta) 0%, var(--gold) 100%);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.quiz-progress-meta {
  margin-top: 10px; text-align: right;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted);
}
.quiz-step-counter strong { color: var(--terracotta); }

.quiz-form {
  margin-top: 28px;
  display: flex; flex-direction: column;
  gap: 0;
}
.quiz-step {
  display: none;
  animation: quiz-fade-in 0.25s ease;
}
.quiz-step.is-active {
  display: block;
}
@keyframes quiz-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.quiz-step-title {
  font-family: 'Playfair Display', serif;
  font-size: 38px; line-height: 1.15; font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.quiz-step-sub {
  font-size: 16px; line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 32px;
}
.quiz-subsection {
  margin-bottom: 28px;
}
.quiz-subsection:last-child { margin-bottom: 0; }
.quiz-subsection-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.budget-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
.budget-pill {
  cursor: pointer;
  position: relative;
}
.budget-pill input {
  position: absolute; opacity: 0; pointer-events: none;
}
.budget-pill span {
  display: block;
  padding: 14px 20px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  text-align: center;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.budget-pill:hover span { border-color: var(--terracotta); }
.budget-pill input:checked + span {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--white);
}

.quiz-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.quiz-back {
  background: none; border: none;
  font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.quiz-back:hover {
  color: var(--ink);
  background: var(--cream-soft);
}
.quiz-next, .quiz-submit {
  margin-left: auto;
  min-width: 200px;
}

/* -------- public menu page (catering items, no prices) -------- */
.menu-display-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.menu-display-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}
.menu-display-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.menu-display-image {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}
.menu-display-emoji {
  font-size: 64px;
  background: linear-gradient(135deg, var(--cream-soft) 0%, var(--orange-wash) 100%);
  padding: 40px; text-align: center;
}
.menu-display-body {
  padding: 22px;
  display: flex; flex-direction: column;
  flex: 1;
  gap: 12px;
}
.menu-display-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
}
.menu-display-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 600;
}
.menu-display-desc {
  font-size: 14px; color: var(--ink-soft);
  margin: 0; line-height: 1.55;
}
.menu-display-ingredients {
  font-size: 13px; color: var(--ink-soft);
  line-height: 1.5;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.custom-cta {
  text-align: center;
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-soft) 100%);
  border-radius: var(--radius);
  padding: 64px 40px;
  margin: 60px 0;
  border: 1px solid var(--line);
}
.custom-cta-title {
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 700;
  color: var(--ink);
  margin: 0 0 14px;
}
.custom-cta-desc {
  font-size: 17px; line-height: 1.6;
  color: var(--ink-soft);
  max-width: 580px;
  margin: 0 auto 28px;
}

/* -------- catering menu (order page) -------- */
.catering-section { scroll-margin-top: 120px; }
.catering-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.catering-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.catering-image {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}
.catering-emoji {
  font-size: 64px;
  background: linear-gradient(135deg, var(--cream-soft) 0%, var(--orange-wash) 100%);
  padding: 40px; text-align: center;
}
.catering-body {
  padding: 20px;
  display: flex; flex-direction: column; flex: 1;
  gap: 12px;
}
.catering-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
}
.catering-name {
  font-family: 'Playfair Display', serif;
  font-size: 19px; font-weight: 600;
}
.catering-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.catering-desc {
  font-size: 14px; color: var(--ink-soft);
  margin: 0; line-height: 1.5;
}
.catering-ingredients {
  font-size: 13px; color: var(--ink-soft);
  line-height: 1.5;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.ingredients-label {
  display: block;
  font-weight: 600; color: var(--ink);
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.catering-controls {
  display: grid; grid-template-columns: 1fr auto;
  gap: 8px; align-items: end;
  margin-top: auto;
  padding-top: 4px;
}
.field-mini { display: flex; flex-direction: column; gap: 4px; }
.field-mini-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.field-mini select {
  font-family: inherit; font-size: 14px;
  padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
}
.field-mini select:focus {
  outline: none; border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(200,85,61,0.12);
}
.catering-add-btn {
  align-self: stretch;
  white-space: nowrap;
}
/* Re-arrange when bread select is present (3 columns) */
.catering-card:has(.catering-bread-select) .catering-controls {
  grid-template-columns: 1fr 1fr auto;
}

/* -------- modernized pill-based picker (size + bread on order page) -------- */
.catering-controls-v2 {
  display: flex; flex-direction: column;
  gap: 16px;
  margin-top: auto;
  padding-top: 8px;
}
.picker-group { display: flex; flex-direction: column; gap: 8px; }
.picker-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-soft);
}
.size-pills {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.size-pill {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  padding: 10px 6px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.05s;
  min-height: 70px;
}
.size-pill:hover { border-color: var(--terracotta); }
.size-pill:active { transform: scale(0.98); }
.size-pill.is-active {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(200,85,61,0.25);
}
.size-pill-label {
  font-size: 13px; font-weight: 700;
  color: inherit;
}
.size-pill-feeds {
  font-size: 10px;
  color: var(--ink-soft);
}
.size-pill.is-active .size-pill-feeds {
  color: rgba(255,255,255,0.85);
}
.size-pill-price {
  font-size: 13px; font-weight: 700;
  color: var(--terracotta);
}
.size-pill.is-active .size-pill-price {
  color: var(--white);
}

.bread-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.bread-pill {
  padding: 12px 16px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.05s;
}
.bread-pill:hover { border-color: var(--terracotta); }
.bread-pill:active { transform: scale(0.98); }
.bread-pill.is-active {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--white);
}

.catering-controls-v2 .catering-add-btn {
  margin-top: 4px;
}

/* -------- catering cart drawer (reuses cart-drawer styles for layout) -------- */
.catering-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 92vw;
  background: var(--white);
  border-left: 1px solid var(--line);
  box-shadow: -10px 0 30px rgba(42,31,24,0.12);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.25s;
  display: flex; flex-direction: column;
}
.catering-cart-drawer.open { transform: translateX(0); }
.catering-line {
  display: grid; grid-template-columns: 1fr auto;
  gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.cart-minimum {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

/* Floating cart pill */
.floating-cart {
  position: fixed;
  bottom: 28px; right: 28px;
  display: none; align-items: center; gap: 12px;
  background: var(--ink); color: var(--white);
  padding: 14px 22px;
  border-radius: 999px;
  cursor: pointer; user-select: none;
  font-weight: 600;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(42,31,24,0.25);
  transition: background 0.15s, transform 0.05s;
}
.floating-cart:hover { background: var(--terracotta); }
.floating-cart:active { transform: translateY(1px); }
.floating-cart-icon { font-size: 22px; }
.floating-cart-text { display: flex; flex-direction: column; line-height: 1.2; }
.floating-cart-count { font-size: 14px; }
.floating-cart-subtotal { font-size: 12px; opacity: 0.85; }
.floating-cart-arrow { font-size: 18px; }

.ct-sub {
  font-size: 12px; color: var(--ink-soft);
  margin-top: 2px;
}

/* -------- responsive -------- */
@media (max-width: 860px) {
  .hero { padding: 56px 0 18px; }
  /* Mobile: tighter symmetric gap around "What people say". 18px above
     (hero pad-bottom) ≈ 18px below (section-title margin-bottom).
     Font dialed down from the desktop 48px so the heading still feels
     like a main heading on mobile without dominating the screen. */
  .reviews .section-title.centered {
    margin: 18px 0 18px;
    font-size: 28px;
  }
  /* Mobile reviews: horizontal scroll-snap carousel. The first card is
     CENTERED on initial load via symmetric padding-side (12vw each
     side of a 76vw card = card.center coincides with viewport.center).
     scroll-snap-align: center keeps each card centered when snapped.
     ~30px of the next card peeks at the right edge as a visual
     "more →" affordance, reinforced by the dot indicators below. */
  .review-grid {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 4px 12vw 4px;
    margin: 0 -24px;
    scrollbar-width: none;
  }
  .review-grid::-webkit-scrollbar { display: none; }
  .review-card {
    flex: 0 0 76vw;
    max-width: none;
    scroll-snap-align: center;
  }
  .review-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
  }
  .review-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted);
    opacity: 0.35;
    transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  }
  .review-dot.is-active {
    background: var(--terracotta);
    opacity: 1;
    transform: scale(1.15);
  }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  /* Mobile: shrink headline enough that "Our Mediterranean Family
     Recipes," (32 chars in Playfair Display bold ~0.6× char width)
     fits on ONE line on common phone widths.
     At ~17–20px in a typical 327–366px content area (375–414px viewport
     minus container's 24px padding), the first half stays on one line
     and the whole sentence reads as the intended two. Rotating word's
     clamp() font-size is left alone per "do not change the variable text". */
  .hero-title {
    /* Mobile lines are short ("Our Mediterranean", "Family Recipes,",
       "tailored to your" — 15–17 chars each). With Playfair Display
       bold (~0.55 char-width), the longest line at ~34px is ~300px
       wide, filling most of the 327px content area on a 375px phone.
       clamp() scales gracefully on tiny vs. mid-size screens. */
    font-size: clamp(28px, 9vw, 46px);
    line-height: 1.25;
  }
  /* Mobile: split "Our Mediterranean Family Recipes," into two visual
     lines so the headline reads as 3 lines total (Mediterranean / Family
     Recipes / tailored to your). On desktop these were inline. */
  .hero-title .title-frag { display: block; }
  /* Hero is shorter on mobile so the bottom-pinned bullets don't push
     the page into an excessive scroll. */
  .hero-solo .hero-inner { min-height: 50vh; }
  .hero-solo .hero-sub { font-size: 16px; }
  .section.split { grid-template-columns: 1fr; gap: 40px; }
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-side { position: static; }
  .catering-grid { grid-template-columns: 1fr; gap: 24px; }
  .about-split { grid-template-columns: 1fr; gap: 32px; }
  .confirm-grid { grid-template-columns: 1fr; }
  .confirm-card.single { grid-column: auto; }
  /* Mobile nav: hamburger replaces the inline links, and the nav
     becomes a dropdown panel below the header that toggles open. */
  .nav-toggle { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 4px;
    background: #FFEEDD;
    border-bottom: 1px solid rgba(234,98,53,0.10);
    padding: 12px 24px 20px;
    box-shadow: 0 8px 24px rgba(42,31,24,0.08);
  }
  .site-nav.is-open { display: flex; }
  .site-nav .nav-link {
    padding: 14px 12px;
    font-size: 16px;
    border-radius: 8px;
  }
  .field-row { grid-template-columns: 1fr; }
  .field-row .flex-2 { grid-column: auto; }
  /* Onsite section on mobile: collapse the two columns to one, hide
     the desktop right column entirely, and put the owner-in-truck
     photo as the section's background with a dark overlay so the
     white text on top stays readable. The mobile-only CTA in the
     left column becomes the sole visible CTA. */
  .onsite-section {
    margin-bottom: 60px;
    min-height: auto;
    background-image: url('/static/images/owner-in-truck-deliz.jpg');
    background-size: cover;
    background-position: center;
  }
  .onsite-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17,16,12,0.55) 0%, rgba(17,16,12,0.78) 100%);
    z-index: 0;
  }
  .onsite-inner {
    position: relative;
    z-index: 1;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 72px 24px;
    min-height: 70vh;
  }
  .onsite-left { color: var(--white); }
  .onsite-sub { color: rgba(255,255,255,0.9); max-width: none; font-size: 17px; }
  /* Yellow title contrasts cleanly against the dark overlay; no
     change needed there. */
  .onsite-right { display: none; }
  .onsite-cta { align-self: flex-start; }
  .catering-hero { min-height: 360px; }
  .catering-hero-title { font-size: 36px; }
  .catering-intro { padding: 40px 20px 20px; }
  .catering-intro-title { font-size: 56px; }
  .catering-intro-sub { font-size: 17px; }
  .catering-paths-v2 { grid-template-columns: 1fr; gap: 56px; margin: 40px auto 60px; }
  .custom-cta { padding: 40px 24px; margin: 40px 0; }
  .custom-cta-title { font-size: 26px; }
  .custom-cta-desc { font-size: 16px; }
  .quiz-step-title { font-size: 28px; }
  .quiz-wizard { margin: 24px auto 80px; }
  .quiz-nav { flex-direction: column-reverse; gap: 8px; align-items: stretch; }
  .quiz-next, .quiz-submit { width: 100%; }
  .size-pills { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .path-cards { grid-template-columns: 1fr; }
  .service-cards { grid-template-columns: 1fr; }
  .radio-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .catering-card:has(.catering-bread-select) .catering-controls {
    grid-template-columns: 1fr 1fr;
  }
  .catering-card:has(.catering-bread-select) .catering-add-btn {
    grid-column: span 2;
  }
  .floating-cart { bottom: 16px; right: 16px; padding: 12px 18px; }
}