/* =========================================================
   Chef Gabe Catering — Brand tokens
   ========================================================= */
:root {
  --color-espresso: #0A0A08;
  --color-rust: #94411B;
  --color-rust-dark: #7A3515;
  --color-olive: #313220;
  --color-olive-dark: #262715;
  --color-cream: #EBE2D4;
  --color-tan: #DED1BE;
  --color-offwhite: #F4F4EF;
  --color-ink: #1A1806;

  --font-script: 'Pinyon Script', cursive;
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Jost', sans-serif;

  --container-width: 1180px;
  --radius: 2px;
  --transition: 0.25s ease;

  /* Uppercase tracking — the mockup uses wide, deliberate letter-spacing
     on every all-caps run. One token per role keeps it consistent. */
  --track-eyebrow: 0.18em;   /* eyebrows / small rust labels */
  --track-nav: 0.12em;       /* nav links, buttons, footer headings */
  --track-label: 0.08em;     /* small caps h3 labels inside cards */
  --track-display: 0.02em;   /* large display headings */

  /* Vertical rhythm */
  --section-pad: 104px;      /* major sections */
  --band-pad: 60px;          /* slim accent bands */

  /* Photo hover */
  --zoom-transition: 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-cream);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, .placeholder-img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: var(--track-display);
}

/* Placeholder image blocks — swap with real <img> tags later */
.placeholder-img {
  position: relative;
  background: repeating-linear-gradient(135deg, #cfc4ac, #cfc4ac 10px, #c3b8a0 10px, #c3b8a0 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b5f47;
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-align: center;
  padding: 8px;
  overflow: hidden;
}
.placeholder-img::before {
  content: attr(data-label);
  background: rgba(255,255,255,0.85);
  padding: 4px 10px;
  border-radius: 3px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-rust);
  color: var(--color-offwhite);
  border-color: var(--color-rust);
}
.btn-primary:hover { background: var(--color-rust-dark); border-color: var(--color-rust-dark); }

.btn-outline-light {
  background: transparent;
  color: var(--color-offwhite);
  border-color: var(--color-offwhite);
}
.btn-outline-light:hover { background: var(--color-offwhite); color: var(--color-ink); }

.btn-outline {
  background: transparent;
  color: var(--color-rust);
  border-color: var(--color-rust);
}
.btn-outline:hover { background: var(--color-rust); color: var(--color-offwhite); }

/* Eyebrow + dividers */
.eyebrow {
  color: var(--color-rust);
  font-size: 0.8rem;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  margin: 0 0 12px;
}
.eyebrow.center { text-align: center; }
.divider-flourish {
  color: var(--color-rust);
  font-size: 1rem;
  margin: 14px 0;
}
.divider-flourish.light { color: var(--color-cream); }

/* =========================================================
   Utility bar
   ========================================================= */
.utility-bar {
  background: var(--color-espresso);
  color: var(--color-offwhite);
  font-size: 0.85rem;
  padding: 10px 0;
}
.utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.phone-link { display: inline-flex; align-items: center; gap: 8px; }
.icon-sm { width: 16px; height: 16px; }
.social-links { display: flex; gap: 14px; }
.social-links a { display: inline-flex; }

/* =========================================================
   Header / Hero
   ========================================================= */
.hero { position: relative; color: var(--color-offwhite); }

.navbar {
  position: relative;
  z-index: 20;
  padding: 18px 0;
}
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo { display: flex; align-items: center; }
/* Round badge logo: taller than the old wordmark so the small
   "Catering With Soul" line inside it stays legible. */
.logo-img { height: 80px; width: auto; }
.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
}
.nav-links a { padding-bottom: 4px; border-bottom: 2px solid transparent; transition: border-color var(--transition), color var(--transition); }
.nav-links a:hover,
.nav-links a.active { border-color: var(--color-rust); color: var(--color-rust); }

.nav-cta { flex-shrink: 0; }
.nav-toggle { display: none; }

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-media .placeholder-img { width: 100%; height: 100%; position: absolute; inset: 0; }
/* Two stacked gradients, matching the mockup's hero treatment:
   – vertical: dark at top (nav legibility) and bottom (trust strip),
     lightest through the middle so the photo still reads;
   – horizontal: heavier on the left, where the headline sits, fading
     out to the right so the food stays visible.
   A flat single-opacity tint either washes out the photo or loses the
   text; layering keeps both. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10,10,8,0.82) 0%,
      rgba(10,10,8,0.42) 26%,
      rgba(10,10,8,0.38) 55%,
      rgba(10,10,8,0.70) 82%,
      rgba(10,10,8,0.92) 100%),
    linear-gradient(90deg,
      rgba(10,10,8,0.80) 0%,
      rgba(10,10,8,0.55) 32%,
      rgba(10,10,8,0.12) 68%,
      rgba(10,10,8,0) 100%);
}

/* Keep the full container width so the headline starts at the container's
   left edge, as the mockup does, and constrain the children instead for
   line length. (Capping .hero-content itself at 640px let .container's
   margin:auto centre the whole block, which fought the left-weighted
   overlay gradient.) */
.hero-content {
  padding: 70px 24px 120px;
  max-width: var(--container-width);
}
.hero-content > * { max-width: 620px; }
.hero-content h1 {
  font-size: 3.6rem;
  text-transform: uppercase;
  line-height: 1.05;
}
.hero-copy { font-size: 1.05rem; max-width: 480px; margin: 16px 0 28px; color: var(--color-offwhite); }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* Sits on the hero photo itself, as in the mockup. An opaque cream panel
   here only spans the container, so the hero photo showed through as
   black gutters to its left and right. Transparent + light text removes
   the seam; the overlay's dark bottom stop carries the contrast. */
.trust-strip {
  position: relative;
  background: transparent;
  color: var(--color-offwhite);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 8px 24px 56px;
}
.trust-item { display: flex; align-items: flex-start; gap: 14px; }
.icon { width: 30px; height: 30px; flex-shrink: 0; color: var(--color-rust); }
.trust-strip .icon { color: var(--color-cream); }
.trust-item h3 { font-family: var(--font-body); font-size: 0.9rem; text-transform: uppercase; letter-spacing: var(--track-label); margin-bottom: 4px; }
.trust-item p { margin: 0; font-size: 0.85rem; color: #cfcabb; }

/* =========================================================
   Sections generic
   ========================================================= */
.section { padding: var(--section-pad) 0; }

/* Our Food */
.food-section { background: var(--color-cream); }
.food-grid {
  display: grid;
  grid-template-columns: 0.85fr 2fr;
  gap: 48px;
  align-items: start;
}
.food-intro h2 { font-size: 2.3rem; text-transform: uppercase; line-height: 1.15; }
.food-intro p { margin: 16px 0 24px; color: #4a4632; max-width: 340px; }

.dish-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.dish-card { background: var(--color-offwhite); border: 1px solid #d9cdb6; }
.dish-img { aspect-ratio: 4 / 5; }
.dish-caption { padding: 16px; text-align: center; }
.dish-caption h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: var(--track-label); }
.dish-caption p { margin: 6px 0 0; font-size: 0.85rem; color: #6a6248; }

/* Feature band */
.feature-band { background: var(--color-olive); color: var(--color-offwhite); padding: var(--band-pad) 0; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.feature-item { display: flex; align-items: flex-start; gap: 16px; }
.feature-item .icon { color: var(--color-offwhite); }
.feature-item h3 { font-family: var(--font-body); font-size: 0.9rem; text-transform: uppercase; letter-spacing: var(--track-label); margin-bottom: 6px; }
.feature-item p { margin: 0; font-size: 0.85rem; color: #cfd0bf; }

/* Events */
.events-section h2 { text-align: center; }
.events-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 32px;
}
.event-card { position: relative; overflow: hidden; }
.event-img { aspect-ratio: 3 / 4; }
.event-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 14px;
  color: var(--color-offwhite);
  background: linear-gradient(0deg, rgba(0,0,0,0.75), rgba(0,0,0,0));
}
.event-caption h3 { font-size: 1.2rem; text-transform: uppercase; }
.event-caption p { margin: 2px 0 0; font-size: 0.8rem; letter-spacing: var(--track-label); }
.center-btn { display: flex; justify-content: center; margin-top: 36px; }

/* Experience You Can Trust */
.trust-section { background: var(--color-olive); color: var(--color-offwhite); }
.trust-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.5fr;
  gap: 40px;
  align-items: center;
}
.trust-copy h2 { text-transform: uppercase; font-size: 2.3rem; line-height: 1.15; }
.trust-copy p { color: #cfd0bf; margin: 16px 0 28px; }
.trust-media { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.trust-img-main { aspect-ratio: 4 / 3; }
.trust-media-side { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.trust-img-team, .trust-img-food { aspect-ratio: 4 / 3; }

/* Footer */
.site-footer { background: var(--color-tan); color: var(--color-ink); padding: 56px 0 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid #c8b99e;
}
.footer-logo-img { height: 96px; width: auto; margin-bottom: 16px; }
.footer-quote { font-style: italic; font-size: 0.9rem; max-width: 260px; color: #4a4632; }
.footer-col h4 { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: var(--track-nav); text-transform: uppercase; margin-bottom: 12px; }
.footer-col p { margin: 0 0 8px; font-size: 0.9rem; color: #4a4632; }
.footer-col a:hover { color: var(--color-rust); }
.footer-col .social-links a { color: var(--color-ink); }
.footer-bottom { padding: 20px 0; text-align: center; font-size: 0.8rem; color: #6a6248; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
  .food-grid, .trust-grid { grid-template-columns: 1fr; }
  .dish-cards { grid-template-columns: repeat(2, 1fr); }
  .events-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-media { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
  }
  .nav-toggle span { width: 24px; height: 2px; background: var(--color-offwhite); display: block; }

  .navbar.menu-open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--color-espresso);
    padding: 20px 24px;
    gap: 16px;
    z-index: 30;
  }
  .navbar.menu-open .nav-cta {
    display: inline-flex;
    position: absolute;
    top: calc(100% + 200px);
    left: 24px;
  }

  .hero-content h1 { font-size: 2.2rem; }
  .trust-strip { grid-template-columns: 1fr; }
  .dish-cards { grid-template-columns: 1fr 1fr; }
  .events-grid { grid-template-columns: 1fr 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-rust);
  outline-offset: 2px;
}

/* =========================================================
   Interior page hero (menus, our-food, events, …)
   Olive rather than cream: .navbar inherits offwhite text from
   .hero and the mark is logo-badge-light.png, so a cream band would
   need the whole nav restyled. Olive reuses it as-is.
   ========================================================= */
.page-hero { background: var(--color-olive); }
.page-hero-content { padding: 56px 24px 72px; max-width: 660px; }
.page-hero-content h1 { font-size: 2.8rem; text-transform: uppercase; line-height: 1.08; }
.page-hero-sub {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-tan);
  margin: 6px 0 0;
}
.page-hero-copy { font-size: 1.02rem; color: #cfd0bf; margin: 16px 0 0; max-width: 520px; }

/* Shared section heading helpers */
.section-title { text-align: center; font-size: 2.3rem; text-transform: uppercase; line-height: 1.15; }
.section-lead { text-align: center; max-width: 580px; margin: 16px auto 0; color: #4a4632; }

/* =========================================================
   Menu packages
   ========================================================= */
.packages-section { background: var(--color-cream); }
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
  align-items: stretch;
}
.package-card {
  background: var(--color-offwhite);
  border: 1px solid #d9cdb6;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
.package-head { text-align: center; }
.package-head h3 { font-size: 1.5rem; text-transform: uppercase; letter-spacing: var(--track-label); }
.package-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-rust);
  margin: 6px 0 0;
}
.package-desc { font-size: 0.92rem; color: #4a4632; margin: 18px 0 0; text-align: center; }
.package-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid #ded1be;
  font-size: 0.9rem;
  color: #4a4632;
  flex-grow: 1;
}
.package-list li { position: relative; padding-left: 20px; margin-bottom: 10px; }
.package-list li::before {
  content: "\25C8";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-rust);
  font-size: 0.7rem;
  line-height: 1.75;
}
.package-list strong { font-weight: 500; color: var(--color-ink); }
.package-price {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  text-align: center;
  margin: 24px 0 20px;
  padding-top: 20px;
  border-top: 1px solid #ded1be;
}
.package-card .btn { align-self: center; }

/* Placeholder-price marker — asterisk + muted italic footnote.
   Remove both once real pricing lands. */
.price-star { color: var(--color-rust); font-weight: 500; }
.price-note {
  margin: 30px 0 0;
  text-align: center;
  font-style: italic;
  font-size: 0.82rem;
  color: #8a8168;
}

/* =========================================================
   A la carte / add-ons
   ========================================================= */
.addons-section { background: var(--color-offwhite); }
.addon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 44px; }
.addon-group h3 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  color: var(--color-rust);
  padding-bottom: 10px;
  border-bottom: 1px solid #ded1be;
  margin-bottom: 14px;
}
.addon-list { list-style: none; margin: 0; padding: 0; }
.addon-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.9rem;
  color: #4a4632;
  padding: 8px 0;
}
.addon-name { flex-shrink: 0; }
.addon-dots { flex-grow: 1; border-bottom: 1px dotted #c8b99e; }
.addon-price { flex-shrink: 0; white-space: nowrap; color: var(--color-ink); }

/* =========================================================
   Closing CTA band
   ========================================================= */
.cta-band { background: var(--color-rust); color: var(--color-offwhite); padding: 88px 0; text-align: center; }
.cta-band h2 { font-size: 2.3rem; text-transform: uppercase; line-height: 1.15; }
.cta-band .divider-flourish { color: var(--color-cream); }
.cta-band p { margin: 16px auto 28px; max-width: 540px; color: #f6e5db; }

/* Menus-page responsive */
@media (max-width: 960px) {
  .package-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .addon-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .page-hero-content h1 { font-size: 2rem; }
  .page-hero-sub { font-size: 1.3rem; }
  .addon-grid { grid-template-columns: 1fr; }
  .section-title, .cta-band h2 { font-size: 1.8rem; }
}

/* Centered variant of the existing .divider-flourish */
.divider-flourish.center-flourish { text-align: center; }

/* =========================================================
   Language toggle (utility bar)
   ========================================================= */
.utility-left { display: flex; align-items: center; gap: 20px; }
.lang-toggle { display: inline-flex; align-items: center; gap: 6px; }
.lang-btn {
  background: none;
  border: none;
  padding: 2px 2px 3px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: var(--track-nav);
  color: #9a9789;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.lang-btn:hover { color: var(--color-offwhite); }
.lang-btn.is-active {
  color: var(--color-offwhite);
  border-bottom-color: var(--color-rust);
}
.lang-sep { color: #5c5a50; font-size: 0.78rem; }

/* =========================================================
   Real photos in slots that previously held .placeholder-img
   Same aspect ratios as the placeholders, cropped to fill so a
   portrait source never letterboxes or stretches.
   ========================================================= */
.hero-media .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

img.dish-img,
img.event-img,
img.food-img,
img.acc-photo,
img.moment-img,
img.made-photo,
img.memory-img,
img.timeline-img,
img.polaroid-img {
  width: 100%;
  object-fit: cover;
}

/* Full-bleed CTA / panel media: the photo fills the slot the placeholder
   block used to hold, cropped rather than letterboxed. */
.food-cta-media img,
.custom-media img,
.reviews-cta-media img,
.event-cta-media img,
.years-media img,
.closing-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Trust media: the side column's two 4:3 photos set the row height,
   and the main photo stretches to match so both columns align flush
   at top and bottom instead of ending at different heights. */
.trust-media-side img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
img.trust-img-main {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

/* The chef sits high in this frame and the slot only shows a ~55% tall
   window, so anchor to the top instead of cropping through his head. */
img.trust-img-team { object-position: center top; }

@media (max-width: 960px) {
  /* .trust-media collapses to one column here, so the main photo has no
     sibling column to take its height from — restore its own ratio. */
  img.trust-img-main { height: auto; aspect-ratio: 4 / 3; }
}

@media (max-width: 480px) {
  /* Keep phone + language toggle + socials on one line on small phones. */
  .utility-bar { font-size: 0.78rem; }
  .utility-inner { gap: 10px; }
  .utility-left { gap: 12px; }
}

/* =========================================================
   Polish pass — matching the mockup's finish
   ========================================================= */

/* --- Flourishes (item 8) -------------------------------------------
   The mockup's divider is not a bare glyph: it's a small ornament with
   a short hairline rule either side. Built with pseudo-elements so the
   existing "◈" markup stays untouched. */
.divider-flourish {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-rust);
  font-size: 0.8rem;
  line-height: 1;
  margin: 18px 0;
}
.divider-flourish::before,
.divider-flourish::after {
  content: "";
  height: 1px;
  width: 48px;
  background: currentColor;
  opacity: 0.5;
}
.divider-flourish.center-flourish { justify-content: center; }

/* Eyebrows get the same treatment: a hairline leading out from the
   ornament on each side, so eyebrow and divider read as one family. */
.eyebrow { display: flex; align-items: center; gap: 9px; }
.eyebrow.center { justify-content: center; }
.eyebrow span[aria-hidden="true"] {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.72rem;
}
.eyebrow span[aria-hidden="true"]:first-child::before,
.eyebrow span[aria-hidden="true"]:last-child::after {
  content: "";
  height: 1px;
  width: 26px;
  background: currentColor;
  opacity: 0.55;
}

/* Ornate section heading — large serif with flanking ornaments, as the
   mockup shows over the events grid. */
.section-heading-ornate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 2.3rem;
  text-transform: uppercase;
  line-height: 1.15;
  text-align: center;
}
.section-heading-ornate span[aria-hidden="true"] {
  color: var(--color-rust);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section-heading-ornate span[aria-hidden="true"]:first-child::before,
.section-heading-ornate span[aria-hidden="true"]:last-child::after {
  content: "";
  height: 1px;
  width: 34px;
  background: currentColor;
  opacity: 0.55;
}

/* --- Card depth + photo hover (items 2 & 3) ------------------------ */
.dish-card {
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(26, 24, 6, 0.05), 0 14px 30px -20px rgba(26, 24, 6, 0.38);
  transition: box-shadow var(--transition), transform var(--transition);
}
.dish-card:hover {
  box-shadow: 0 4px 16px rgba(26, 24, 6, 0.09), 0 22px 44px -22px rgba(26, 24, 6, 0.48);
  transform: translateY(-3px);
}
.dish-caption { padding: 20px 18px 22px; }

/* Zoom the photo inside its clipped frame, not the card itself. */
.dish-card .dish-img,
.event-card .event-img {
  transition: transform var(--zoom-transition);
}
.dish-card:hover .dish-img,
.event-card:hover .event-img {
  transform: scale(1.05);
}
.event-card { transition: box-shadow var(--transition); }
.event-card:hover { box-shadow: 0 18px 38px -20px rgba(26, 24, 6, 0.55); }

/* --- Button arrows (item 7) ---------------------------------------
   .btn's flex gap is the single source of text-to-arrow spacing, so
   every arrow CTA matches. The nudge on hover echoes the fill swap. */
.btn span[aria-hidden="true"] {
  display: inline-block;
  transition: transform var(--transition);
}
.btn:hover span[aria-hidden="true"] { transform: translateX(4px); }

/* --- Footer agave (item 6) ----------------------------------------
   Echoes the agave mark at the top of the logo. Sits bottom-right and
   bleeds off the edge, very low contrast so it never competes. */
.site-footer { position: relative; overflow: hidden; }
.site-footer > .container { position: relative; z-index: 1; }
.footer-agave {
  position: absolute;
  right: -22px;
  bottom: -14px;
  width: 200px;
  height: auto;
  color: var(--color-ink);
  opacity: 0.11;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 720px) {
  .footer-agave { width: 140px; opacity: 0.08; }
  .section-heading-ornate { font-size: 1.7rem; gap: 10px; }
  .section-heading-ornate span[aria-hidden="true"]:first-child::before,
  .section-heading-ornate span[aria-hidden="true"]:last-child::after { width: 18px; }
}

/* Motion-sensitive visitors get the depth cues but none of the movement.
   The global rule kills transitions; these kill the transforms too. */
@media (prefers-reduced-motion: reduce) {
  .dish-card:hover { transform: none; }
  .dish-card:hover .dish-img,
  .event-card:hover .event-img { transform: none; }
  .btn:hover span[aria-hidden="true"] { transform: none; }
}

/* =========================================================
   Render-pass corrections
   ========================================================= */

/* restaurant-table-spread is a near-square source in a wide slot, so the
   crop only keeps a horizontal band. Anchor slightly above centre to hold
   the plated food and drinks rather than the empty table edge. */
.hero-media .hero-img { object-position: center 44%; }

/* Spanish event labels ("Eventos Corporativos") run far longer than the
   English ones and were wrapping into the sub-label. Smaller caption type
   plus a taller scrim keeps two-line names readable over the photo. */
.event-caption {
  padding: 20px 13px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.62) 45%, rgba(0,0,0,0) 100%);
}
.event-caption h3 { font-size: 1rem; line-height: 1.18; }
.event-caption p { margin: 3px 0 0; font-size: 0.72rem; opacity: 0.88; }

/* =========================================================
   Menus page — category quick-nav, accordion, add-ons, closing
   Reuses the existing palette, fonts and button classes; only the
   patterns the site did not already have are defined here.
   ========================================================= */

/* --- Category quick-nav strip (mockup: icon row with prices) ------- */
.cat-nav {
  background: var(--color-offwhite);
  border-bottom: 1px solid #ded1be;
}
.cat-nav-inner {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding-top: 26px;
  padding-bottom: 26px;
}
.cat-nav-btn {
  background: none;
  border: none;
  border-right: 1px solid #e2d7c4;
  padding: 6px 10px 4px;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--color-ink);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  transition: color var(--transition);
}
.cat-nav-btn:last-child { border-right: none; }
.cat-nav-btn:hover { color: var(--color-rust); }
.cat-nav-btn .icon { width: 26px; height: 26px; color: var(--color-rust); }
.cat-nav-name {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  line-height: 1.25;
}
.cat-nav-price { font-size: 0.7rem; color: #6a6248; }
.cat-nav-hint {
  text-align: center;
  font-size: 0.8rem;
  font-style: italic;
  color: #8a8168;
  margin: 0 0 6px;
}

/* --- Accordion ----------------------------------------------------- */
.menu-accordion { border-top: 1px solid #ddd0b9; }
.acc-item { border-bottom: 1px solid #ddd0b9; }
.acc-header { margin: 0; }
.acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  color: var(--color-olive);
  transition: color var(--transition);
}
.acc-trigger:hover { color: var(--color-rust); }
.acc-title {
  font-size: 1.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: 1.15;
}
.acc-sep { color: var(--color-rust); opacity: 0.7; }
.acc-price {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-rust);
  white-space: nowrap;
}
.acc-chevron {
  margin-left: auto;
  width: 13px;
  height: 13px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--transition);
  flex-shrink: 0;
}
.acc-trigger[aria-expanded="true"] .acc-chevron {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.acc-panel { padding: 0 4px 34px; }
.acc-panel[hidden] { display: none; }
.acc-panel-inner {
  display: grid;
  grid-template-columns: 0.85fr 2fr;
  gap: 32px;
  align-items: start;
  animation: acc-fade 0.3s ease both;
}
@keyframes acc-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.acc-photo { aspect-ratio: 4 / 3; }
.acc-includes {
  font-size: 0.88rem;
  color: #4a4632;
  margin: 0 0 22px;
  max-width: 780px;
}

/* Dish list — rust bullet, bold name, description under it */
.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 36px;
}
.menu-list.single-col { columns: 1; }
.menu-list li {
  break-inside: avoid;
  position: relative;
  padding-left: 16px;
  margin-bottom: 15px;
}
.menu-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-rust);
}
.menu-item-name {
  display: block;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--color-ink);
}
.menu-item-desc {
  display: block;
  font-size: 0.85rem;
  color: #5c563f;
  line-height: 1.45;
}

/* Two named sub-groups inside one panel (burrito bowl / pasta) */
.menu-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.menu-subhead {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--color-olive);
  margin: 0 0 12px;
}
.menu-note { font-size: 0.88rem; color: #4a4632; margin: 0 0 10px; }
.menu-note strong { font-weight: 500; color: var(--color-ink); }

/* --- Add-ons ------------------------------------------------------- */
.sides-section { background: var(--color-offwhite); }
.sides-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 36px;
}
.side-card {
  background: var(--color-cream);
  border: 1px solid #ded1be;
  padding: 26px 28px;
}
.side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}
.side-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--color-olive);
}
.side-price {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-rust);
  white-space: nowrap;
}
.side-copy { font-size: 0.88rem; color: #4a4632; margin: 0; }

/* --- Closing block -------------------------------------------------- */
.booking-section { background: var(--color-olive); color: var(--color-offwhite); }
.booking-inner { text-align: center; }
.booking-inner h2 { font-size: 2.3rem; text-transform: uppercase; line-height: 1.15; }
.booking-types {
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--color-tan);
  margin: 14px 0 10px;
}
.booking-copy { color: #cfd0bf; margin: 0 auto; max-width: 520px; }

.delivery-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 720px;
  margin: 40px auto 0;
  padding: 22px 26px;
  background: rgba(148, 65, 27, 0.16);
  border-left: 3px solid var(--color-rust);
  text-align: left;
}
.delivery-note .icon { color: var(--color-rust); width: 26px; height: 26px; }
.delivery-note h3 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  color: var(--color-rust);
  margin-bottom: 6px;
}
.delivery-note p { margin: 0; font-size: 0.88rem; color: #dcdccb; }

.build-block {
  max-width: 720px;
  margin: 44px auto 0;
  padding-top: 36px;
  border-top: 1px solid rgba(235, 226, 212, 0.22);
}
.build-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 2rem;
  color: var(--color-tan);
  letter-spacing: 0.01em;
}
.build-copy { color: #cfd0bf; margin: 16px auto 30px; font-size: 0.95rem; }

/* --- Responsive ----------------------------------------------------- */
@media (max-width: 960px) {
  .cat-nav-inner { grid-template-columns: repeat(4, 1fr); row-gap: 22px; }
  .cat-nav-btn:nth-child(4n) { border-right: none; }
  .acc-panel-inner { grid-template-columns: 1fr; }
  .acc-photo { aspect-ratio: 16 / 9; }
  .sides-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cat-nav-inner { grid-template-columns: repeat(2, 1fr); }
  .cat-nav-btn:nth-child(4n) { border-right: 1px solid #e2d7c4; }
  .cat-nav-btn:nth-child(2n) { border-right: none; }
  .menu-list, .menu-subgrid { columns: 1; grid-template-columns: 1fr; }
  .acc-trigger { flex-wrap: wrap; gap: 8px 12px; padding: 22px 4px; }
  .acc-title { font-size: 1.2rem; }
  .acc-price { font-size: 1.05rem; }
  .acc-chevron { margin-left: auto; }
  .booking-inner h2 { font-size: 1.7rem; }
  .build-title { font-size: 1.5rem; }
  .delivery-note { flex-direction: column; gap: 10px; }
}

/* --- Menus page render-pass corrections --------------------------- */

/* Same trap as .hero-content on the homepage: capping the element that
   carries .container let margin:auto centre it. Keep container width,
   constrain the children. */
.page-hero-content { max-width: var(--container-width); }
.page-hero-content > * { max-width: 620px; }

/* Category names wrap to one, two or three lines, which pushed each
   price to a different baseline. A min-height on the name lines them up. */
.cat-nav-name { min-height: 2.6em; display: flex; align-items: center; justify-content: center; }

/* The strip already reads as a section break, so the accordion below it
   does not need a full --section-pad above it. */
.menus-section { padding-top: 56px; }
.menus-section .cat-nav-hint { margin-bottom: 18px; }

/* =========================================================
   Contact / quote page — calculator, form, direct contact
   ========================================================= */

.calc-section { background: var(--color-cream); }
.calc { margin-top: 40px; }
.calc-noscript {
  max-width: 640px;
  margin: 24px auto 0;
  padding: 16px 20px;
  border-left: 3px solid var(--color-rust);
  background: rgba(148, 65, 27, 0.07);
  font-size: 0.9rem;
  color: #4a4632;
}

.calc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.calc-card {
  background: var(--color-offwhite);
  border: 1px solid #d9cdb6;
  padding: 18px 20px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.calc-card.is-selected {
  border-color: var(--color-rust);
  box-shadow: 0 2px 12px rgba(148, 65, 27, 0.12);
}

/* Checkbox rows. The native input is kept (not display:none) so it stays
   focusable and screen-reader visible; .calc-box is the drawn square. */
.calc-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.calc-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}
.calc-box {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border: 1.5px solid #b4a68c;
  border-radius: 2px;
  background: #fff;
  position: relative;
  transition: background var(--transition), border-color var(--transition);
}
.calc-toggle input:checked + .calc-box {
  background: var(--color-rust);
  border-color: var(--color-rust);
}
.calc-toggle input:checked + .calc-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.calc-toggle input:focus-visible + .calc-box {
  outline: 2px solid var(--color-rust);
  outline-offset: 2px;
}

.calc-text { display: flex; flex-direction: column; gap: 2px; }
.calc-name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-ink);
  line-height: 1.3;
}
.calc-price { font-size: 0.85rem; color: var(--color-rust); }

/* Guest count, revealed when its own category is checked */
.calc-guests {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid #e4d9c5;
}
.calc-guests[hidden] { display: none; }
.calc-guests label,
.calc-qty label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: #6a6248;
}
.calc-guest-input,
.calc-qty-input {
  width: 92px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid #cfc2a9;
  border-radius: var(--radius);
}
.calc-guest-input:focus,
.calc-qty-input:focus {
  outline: 2px solid var(--color-rust);
  outline-offset: 1px;
  border-color: var(--color-rust);
}

.calc-subhead {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--color-olive);
  margin: 34px 0 14px;
}

.calc-addons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.calc-card-addon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.calc-qty { display: flex; align-items: center; gap: 10px; }
.calc-card-service .calc-price { color: var(--color-rust); font-weight: 500; }

/* Running total */
.calc-summary {
  margin-top: 34px;
  background: var(--color-olive);
  color: var(--color-offwhite);
  padding: 30px 32px;
}
.calc-summary-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--color-tan);
  margin: 0 0 18px;
}
.calc-summary-list { min-height: 28px; }
.calc-empty { margin: 0; font-size: 0.9rem; color: #b9bba6; font-style: italic; }
.calc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(235, 226, 212, 0.16);
}
.calc-row-label { display: flex; flex-direction: column; gap: 1px; }
.calc-row-name { font-size: 0.95rem; }
.calc-row-detail { font-size: 0.8rem; color: #b9bba6; }
.calc-row-amount {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  white-space: nowrap;
}
.calc-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px solid var(--color-rust);
}
.calc-total-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--color-tan);
}
.calc-total-value {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
}
.calc-note {
  margin: 16px 0 0;
  font-size: 0.8rem;
  font-style: italic;
  color: #b9bba6;
}

/* =========================================================
   Quote form
   ========================================================= */
.form-section { background: var(--color-offwhite); }
.form-container { max-width: 820px; }
.quote-form { margin-top: 36px; }

/* Honeypot: must exist in the DOM for Netlify, must never be seen. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.field label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: #5c563f;
  font-weight: 500;
}
.req { color: var(--color-rust); }
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid #d5c8af;
  border-radius: var(--radius);
  padding: 11px 13px;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--color-rust);
  outline-offset: 1px;
  border-color: var(--color-rust);
}
.field input::placeholder,
.field textarea::placeholder { color: #a89a80; }

.form-submit { width: 100%; justify-content: center; margin-top: 26px; }
.form-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 0.82rem;
  color: #6a6248;
}
.form-privacy .icon-sm { color: #8a8168; }
.form-estimate-note {
  text-align: center;
  margin: 6px 0 0;
  font-size: 0.8rem;
  font-style: italic;
  color: #8a8168;
}

/* =========================================================
   Prefer to talk
   ========================================================= */
.talk-section { background: var(--color-cream); }
.talk-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
.talk-copy h2 { font-size: 2.1rem; text-transform: uppercase; line-height: 1.15; }
.talk-lead { color: #4a4632; margin: 0 0 24px; }

.talk-list { list-style: none; margin: 0; padding: 0; }
.talk-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #ded1be;
  font-size: 0.95rem;
  color: #4a4632;
}
.talk-list li:last-child { border-bottom: none; }
.talk-list .icon { width: 22px; height: 22px; color: var(--color-rust); flex-shrink: 0; margin-top: 2px; }
.talk-list a:hover { color: var(--color-rust); }

.talk-hours {
  background: var(--color-offwhite);
  border: 1px solid #ded1be;
  padding: 28px 30px;
}
.talk-hours h3 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  color: var(--color-rust);
  margin: 0 0 16px;
}
.hours-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  margin: 0;
  font-size: 0.9rem;
}
.hours-list dt { color: #5c563f; }
.hours-list dd { margin: 0; text-align: right; color: var(--color-ink); }
.talk-signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--color-rust);
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid #ded1be;
  text-align: center;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 860px) {
  .calc-grid, .calc-addons { grid-template-columns: 1fr; }
  .talk-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 620px) {
  .form-grid { grid-template-columns: 1fr; }
  .calc-summary { padding: 24px 20px; }
  .calc-total-value { font-size: 1.8rem; }
  .calc-card-addon { align-items: flex-start; flex-direction: column; }
  .talk-copy h2 { font-size: 1.7rem; }
}

/* Service fee is mandatory, so it reads as a stated line, not a control. */
.calc-card-service {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-color: var(--color-rust);
  background: rgba(148, 65, 27, 0.05);
}
.calc-included { font-size: 0.82rem; font-style: italic; color: #6a6248; }
.calc-price-fixed {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-rust);
}

/* =========================================================
   Events page
   ========================================================= */

/* The hero eyebrow sits on the dark photo here, so it needs the light
   treatment rather than the rust used on cream sections. */
.eyebrow-light { color: var(--color-tan); }

/* --- Event types ---------------------------------------------------
   Six items, so never one row: 6 -> 3 -> 2 as the viewport narrows. */
.event-types-section { background: var(--color-cream); }
.event-type-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 40px;
}
.event-type {
  text-align: center;
  padding: 6px 18px;
  border-right: 1px solid #ded1be;
}
.event-type:last-child { border-right: none; }
.event-type .icon {
  width: 34px;
  height: 34px;
  color: var(--color-rust);
  margin: 0 auto 14px;
}
.event-type h3 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--color-ink);
  margin-bottom: 8px;
  line-height: 1.3;
}
.event-type p { margin: 0; font-size: 0.85rem; color: #5c563f; line-height: 1.5; }

/* --- Made for your event ------------------------------------------- */
.made-section { background: var(--color-offwhite); }
.made-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}
.made-photo { aspect-ratio: 4 / 3; border-radius: 3px; }
.made-copy h2 { font-size: 2.3rem; text-transform: uppercase; line-height: 1.15; }

/* Rust script accent used under a heading — the "Hecho a tu medida."
   treatment from the mockup. Pinyon Script is loaded for exactly this. */
.script-accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--color-rust);
  margin: 6px 0 0;
  line-height: 1.2;
}
.made-lead { color: #4a4632; margin: 18px 0 24px; max-width: 460px; }

.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.92rem;
  color: #4a4632;
}
.check-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-olive);
}

/* Decorative sprig filling the gap beside the checklist. Hidden on
   narrow screens where there is no empty space to fill. */
.made-leaf {
  position: absolute;
  right: -18px;
  bottom: -10px;
  width: 150px;
  height: auto;
  color: var(--color-ink);
  opacity: 0.12;
  pointer-events: none;
}

/* --- Real events, real memories ------------------------------------ */
.memories-section { background: var(--color-cream); }
.memories-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 40px;
}
.memory-img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  transition: transform var(--zoom-transition);
}
.memories-strip > * { overflow: hidden; }
.memories-strip a:hover .memory-img { transform: scale(1.05); }
.memories-section .center-btn { margin-top: 36px; }

/* --- Closing CTA ---------------------------------------------------
   Photo on the left, copy panel on the right, full-bleed. */
.event-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-tan);
}
.event-cta-media { position: relative; min-height: 380px; }
.event-cta-media .placeholder-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.event-cta-panel {
  position: relative;
  display: flex;
  align-items: center;
  padding: 70px 56px;
  overflow: hidden;
}
.event-cta-inner { position: relative; z-index: 1; max-width: 460px; }
.event-cta-inner h2 { font-size: 2.2rem; text-transform: uppercase; line-height: 1.15; }
.event-cta-copy { color: #4a4632; margin: 18px 0 28px; }
.event-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.event-cta-actions .btn-outline { gap: 10px; }
.cta-leaf {
  position: absolute;
  right: -14px;
  bottom: -20px;
  width: 160px;
  height: auto;
  color: var(--color-ink);
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

/* --- Responsive ----------------------------------------------------- */
@media (max-width: 1080px) {
  .event-type-grid { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .event-type:nth-child(3n) { border-right: none; }
  .memories-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .made-grid { grid-template-columns: 1fr; gap: 32px; }
  .made-leaf { display: none; }
  .event-cta { grid-template-columns: 1fr; }
  .event-cta-media { min-height: 260px; }
  .event-cta-panel { padding: 48px 24px; }
}
@media (max-width: 620px) {
  .event-type-grid { grid-template-columns: repeat(2, 1fr); }
  .event-type { border-right: 1px solid #ded1be; }
  .event-type:nth-child(2n) { border-right: none; }
  .memories-strip { grid-template-columns: repeat(2, 1fr); }
  .made-copy h2, .event-cta-inner h2 { font-size: 1.7rem; }
  .script-accent { font-size: 1.25rem; }
}

/* A hero with no trust strip under it does not need the homepage's deep
   bottom padding, which is sized to sit behind that strip. */
.hero .hero-content:last-child { padding-bottom: 84px; }

/* =========================================================
   Reviews page
   ========================================================= */

/* This hero uses a softer mixed-case headline rather than the uppercase
   display treatment, matching the mockup. */
.h1-soft { text-transform: none !important; letter-spacing: 0.01em; }
.script-light { color: var(--color-cream); }
.hero-content .script-accent { margin: 10px 0 0; }

/* --- Stats bar ------------------------------------------------------ */
.stats-bar { background: var(--color-tan); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 30px;
  padding-bottom: 30px;
}
.stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 22px;
  border-right: 1px solid #c8b99e;
}
.stat:last-child { border-right: none; }
.stat .icon { width: 32px; height: 32px; color: var(--color-rust); flex-shrink: 0; }
.stat-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0;
  line-height: 1.1;
}
.stat-label {
  margin: 3px 0 0;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: #5c563f;
  line-height: 1.35;
}

/* --- Review cards --------------------------------------------------- */
.reviews-section { background: var(--color-offwhite); }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.review-card {
  background: var(--color-cream);
  border: 1px solid #ded1be;
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}
.review-card:hover {
  box-shadow: 0 4px 16px rgba(26, 24, 6, 0.08), 0 20px 40px -24px rgba(26, 24, 6, 0.4);
  transform: translateY(-2px);
}
.review-stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 16px;
}
.review-stars svg {
  width: 17px;
  height: 17px;
  fill: #C8862F;
}
.review-text {
  margin: 0 0 18px;
  font-size: 0.93rem;
  line-height: 1.6;
  color: #4a4632;
  text-align: center;
  flex-grow: 1;
}
.review-foot {
  text-align: center;
  padding-top: 14px;
  border-top: 1px solid #ded1be;
}
.review-name {
  margin: 0;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-ink);
}
.review-type {
  margin: 3px 0 0;
  font-size: 0.8rem;
  color: var(--color-rust);
}
.reviews-section .center-btn { margin-top: 36px; }
/* The button removes itself once everything is shown — with six reviews
   and a batch of six it never appears at all. */
#reviews-more[hidden] { display: none; }

/* --- Moments strip -------------------------------------------------- */
.moments-section { background: var(--color-cream); }
.moments-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 40px;
}
.moment-img { aspect-ratio: 4 / 3; }

/* --- Closing CTA ---------------------------------------------------- */
.reviews-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-olive);
  color: var(--color-offwhite);
}
.reviews-cta-panel { display: flex; align-items: center; padding: 66px 56px; }
.reviews-cta-inner { max-width: 460px; }
.reviews-cta-inner .script-accent { font-size: 1.9rem; margin: 0 0 14px; }
.reviews-cta-copy { color: #cfd0bf; margin: 0 0 26px; }
.reviews-cta-media { position: relative; min-height: 340px; }
.reviews-cta-media .placeholder-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cta-features {
  list-style: none;
  margin: 34px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(235, 226, 212, 0.2);
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.cta-features li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--color-tan);
}
.cta-features .icon-sm { width: 19px; height: 19px; color: var(--color-cream); flex-shrink: 0; }

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 1080px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .stat:nth-child(2n) { border-right: none; }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .moments-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .reviews-cta { grid-template-columns: 1fr; }
  .reviews-cta-panel { padding: 48px 24px; order: 2; }
  .reviews-cta-media { min-height: 240px; order: 1; }
}
@media (max-width: 620px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat { border-right: none; }
  .reviews-grid { grid-template-columns: 1fr; }
  .cta-features { flex-direction: column; gap: 14px; }
  .reviews-cta-inner .script-accent { font-size: 1.5rem; }
}

/* A .center-btn whose only child is hidden must not keep its margin. */
.center-btn[hidden] { display: none; }
/* Three feature labels fit one row in the CTA panel at this size. */
.cta-features { gap: 20px; }
.cta-features li { font-size: 0.74rem; }

/* =========================================================
   About page
   ========================================================= */

/* Two-tone headline: second line in rust italic, per the comp. */
.about-title .title-accent {
  display: inline-block;
  color: var(--color-rust);
  font-style: italic;
  font-weight: 600;
}
.hero-content .divider-flourish { margin-top: 22px; }

/* Rust pull-lines used throughout Gabe's story. */
.highlight {
  color: var(--color-rust);
  font-weight: 500;
}

/* --- From Michoacán to California ----------------------------------- */
.origin-section { background: var(--color-cream); }
.origin-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr 0.8fr;
  gap: 44px;
  align-items: start;
}
.origin-copy h2 { font-size: 2.1rem; line-height: 1.2; }
.origin-copy p,
.origin-aside p { color: #4a4632; margin: 0 0 14px; font-size: 0.95rem; line-height: 1.65; }
.origin-copy .script-accent { margin-top: 20px; font-size: 1.45rem; line-height: 1.35; }
.origin-aside { padding-top: 42px; }

/* Polaroid: slight tilt, thick white mat, tape tab at the top. */
.polaroid {
  position: relative;
  margin: 0;
  background: #fffdf8;
  padding: 14px 14px 46px;
  border: 1px solid #e6dbc6;
  box-shadow: 0 14px 34px -16px rgba(26, 24, 6, 0.45);
  transform: rotate(-1.6deg);
}
.polaroid-img { aspect-ratio: 4 / 3.4; }
/* A single-person portrait: the landscape frame above would crop off
   either the hair or the chin, so this photo gets a portrait polaroid. */
.polaroid-img--portrait { aspect-ratio: 4 / 5; }
.polaroid-tape {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 96px;
  height: 26px;
  transform: translateX(-50%) rotate(-1.2deg);
  background: rgba(222, 209, 190, 0.75);
  border-left: 1px solid rgba(200, 185, 158, 0.6);
  border-right: 1px solid rgba(200, 185, 158, 0.6);
}

.origin-leaf {
  position: absolute;
  right: -26px;
  bottom: -18px;
  width: 150px;
  height: auto;
  color: var(--color-ink);
  opacity: 0.12;
  pointer-events: none;
}

/* --- 14+ years ------------------------------------------------------ */
.years-section {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  background: var(--color-offwhite);
}
.years-media { position: relative; min-height: 420px; }
.years-media .placeholder-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.years-panel { display: flex; align-items: center; padding: 76px 56px; }
.years-inner { max-width: 560px; }
.years-inner h2 { font-size: 2.1rem; line-height: 1.2; }
.years-inner p { color: #4a4632; margin: 0 0 13px; font-size: 0.95rem; line-height: 1.65; }

/* --- Timeline ------------------------------------------------------- */
.timeline-section { background: var(--color-cream); }
/* Horizontal scroll rather than stacking: it reads left to right. */
.timeline-scroll {
  overflow-x: auto;
  padding: 40px 24px 8px;
  -webkit-overflow-scrolling: touch;
}
.timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 1fr);
  gap: 26px;
  max-width: var(--container-width);
  min-width: min-content;
}
.timeline-item { position: relative; text-align: center; }
/* Dotted connector between consecutive entries. */
.timeline-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 76px;
  right: -20px;
  width: 14px;
  border-top: 2px dotted var(--color-rust);
  opacity: 0.6;
}
.timeline-img { aspect-ratio: 4 / 3; margin-bottom: 14px; }
.timeline-year {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: var(--track-label);
  color: var(--color-ink);
  margin: 0 0 5px;
}
.timeline-copy { margin: 0; font-size: 0.85rem; color: #5c563f; line-height: 1.5; }

/* --- From my family to yours ---------------------------------------- */
.closing-section {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  background: var(--color-offwhite);
}
.closing-media { position: relative; min-height: 420px; }
.closing-media .placeholder-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.closing-panel {
  position: relative;
  display: flex;
  align-items: center;
  padding: 76px 56px;
  overflow: hidden;
}
.closing-inner { position: relative; z-index: 1; max-width: 560px; }
.closing-inner h2 { font-size: 2.1rem; line-height: 1.2; }
.closing-inner p { color: #4a4632; margin: 0 0 13px; font-size: 0.95rem; line-height: 1.65; }
.closing-signoff {
  margin-top: 26px;
  font-size: 1.5rem;
  line-height: 1.35;
}
.closing-sign {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.9rem;
  color: #5c563f;
  margin-top: 8px;
}
.closing-leaf {
  position: absolute;
  right: -24px;
  top: 10%;
  width: 150px;
  height: auto;
  color: var(--color-ink);
  opacity: 0.11;
  pointer-events: none;
  z-index: 0;
}

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 1080px) {
  .origin-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .origin-aside { grid-column: 1 / -1; padding-top: 0; max-width: 620px; }
  .origin-leaf { display: none; }
}
@media (max-width: 860px) {
  .origin-grid { grid-template-columns: 1fr; }
  .polaroid { max-width: 420px; }
  .years-section, .closing-section { grid-template-columns: 1fr; }
  .years-media, .closing-media { min-height: 260px; }
  .years-panel, .closing-panel { padding: 48px 24px; }
  .closing-leaf { display: none; }
}
@media (max-width: 620px) {
  .origin-copy h2, .years-inner h2, .closing-inner h2 { font-size: 1.65rem; }
  .origin-copy .script-accent, .closing-signoff { font-size: 1.25rem; }
  .timeline-scroll { padding-left: 16px; padding-right: 16px; }
  .timeline { grid-auto-columns: minmax(168px, 1fr); }
}

/* Section rules like `.origin-copy p` are more specific than a bare
   `.highlight` / `.script-accent` class, so those pull-quotes lost their
   rust colour. Matching specificity and coming later fixes it without
   resorting to !important. */
p.highlight { color: var(--color-rust); font-weight: 500; }
p.script-accent { color: var(--color-rust); }
p.script-accent.script-light { color: var(--color-cream); }

/* =========================================================
   Our Food page
   ========================================================= */

/* --- Category index -------------------------------------------------
   Seven labels, so it wraps rather than squeezing into one row. */
.food-explore-section { background: var(--color-offwhite); }
.food-cats {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.food-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  padding: 4px 12px;
  border-right: 1px solid #ded1be;
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: #5c563f;
  line-height: 1.3;
}
.food-cat:last-child { border-right: none; }
.food-cat .icon { width: 28px; height: 28px; color: var(--color-rust); }
/* The category with dishes on this page reads as current. */
.food-cat.is-current { color: var(--color-ink); }
.food-cat.is-current span { border-bottom: 2px solid var(--color-rust); padding-bottom: 4px; }

/* --- Dish grid ------------------------------------------------------ */
.dishes-section { background: var(--color-cream); }
.dishes-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.dishes-title {
  font-size: 1.9rem;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: 1.15;
}
.dishes-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--color-rust);
  transition: gap var(--transition);
}
.dishes-link:hover { gap: 13px; }

.food-grid-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.food-card {
  background: var(--color-offwhite);
  border: 1px solid #d9cdb6;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(26, 24, 6, 0.05), 0 14px 30px -22px rgba(26, 24, 6, 0.35);
  transition: box-shadow var(--transition), transform var(--transition);
}
.food-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(26, 24, 6, 0.09), 0 22px 44px -24px rgba(26, 24, 6, 0.45);
}
.food-img { aspect-ratio: 4 / 3; transition: transform var(--zoom-transition); }
.food-card:hover .food-img { transform: scale(1.05); }
.food-caption { padding: 16px 18px 20px; }
.food-caption h3 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.3;
  margin-bottom: 7px;
}
.food-caption p { margin: 0; font-size: 0.83rem; color: #5c563f; line-height: 1.55; }
.dishes-section .center-btn { margin-top: 36px; }

/* --- Custom menus --------------------------------------------------- */
.custom-section {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  background: var(--color-tan);
}
.custom-media { position: relative; min-height: 340px; }
.custom-media .placeholder-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.custom-panel {
  position: relative;
  display: flex;
  align-items: center;
  padding: 62px 56px;
  overflow: hidden;
}
.custom-inner { position: relative; z-index: 1; max-width: 560px; }
.custom-inner h2 { font-size: 2rem; line-height: 1.2; }
.custom-inner .script-accent { font-size: 1.35rem; margin: 8px 0 0; }
.custom-copy { color: #4a4632; margin: 16px 0 0; font-size: 0.95rem; line-height: 1.65; }
.custom-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #c8b99e;
}
.custom-note .icon { width: 30px; height: 30px; color: var(--color-rust); flex-shrink: 0; }
.custom-note-title { margin: 0 0 4px; font-weight: 500; color: var(--color-rust); font-size: 0.92rem; }
.custom-note-list { margin: 0; font-size: 0.86rem; color: #4a4632; }
.custom-leaf {
  position: absolute;
  right: -20px;
  top: 12%;
  width: 145px;
  height: auto;
  color: var(--color-ink);
  opacity: 0.11;
  pointer-events: none;
  z-index: 0;
}

/* --- Testimonial carousel ------------------------------------------- */
.food-reviews-section { background: var(--color-offwhite); }
.carousel {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin-top: 40px;
}
.carousel-track {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.carousel-arrow {
  flex-shrink: 0;
  align-self: center;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid #ded1be;
  border-radius: 50%;
  color: var(--color-rust);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.carousel-arrow svg { width: 18px; height: 18px; }
.carousel-arrow:hover { background: var(--color-rust); border-color: var(--color-rust); color: var(--color-offwhite); }
.carousel-arrow[hidden] { display: none; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 28px;
}
.carousel-dots[hidden] { display: none; }
.carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #d3c6ae;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.carousel-dot:hover { background: #bda98a; }
.carousel-dot.is-active { background: var(--color-rust); transform: scale(1.15); }

/* --- Closing CTA ---------------------------------------------------- */
.food-cta { position: relative; color: var(--color-offwhite); overflow: hidden; }
.food-cta-media { position: absolute; inset: 0; z-index: 0; }
.food-cta-media .placeholder-img { width: 100%; height: 100%; }
.food-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(10,10,8,0.92) 0%, rgba(10,10,8,0.86) 55%, rgba(10,10,8,0.7) 100%);
}
.food-cta-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 44px;
  padding-bottom: 44px;
}
.food-cta-copy h2 { font-size: 1.8rem; line-height: 1.2; }
.food-cta-copy p { margin: 8px 0 0; color: #d8d3c4; font-size: 0.95rem; }
.food-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.food-cta-actions .btn-outline-light { gap: 10px; }

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 1080px) {
  .food-cats { grid-template-columns: repeat(4, 1fr); row-gap: 26px; }
  .food-cat:nth-child(4n) { border-right: none; }
  .food-grid-cards { grid-template-columns: repeat(2, 1fr); }
  .carousel-track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .custom-section { grid-template-columns: 1fr; }
  .custom-media { min-height: 240px; }
  .custom-panel { padding: 44px 24px; }
  .custom-leaf { display: none; }
  .carousel-track { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .food-cats { grid-template-columns: repeat(2, 1fr); }
  .food-cat { border-right: 1px solid #ded1be; }
  .food-cat:nth-child(2n) { border-right: none; }
  .food-grid-cards { grid-template-columns: 1fr; }
  .dishes-title { font-size: 1.5rem; }
  .custom-inner h2, .food-cta-copy h2 { font-size: 1.5rem; }
  .food-cta-inner { flex-direction: column; align-items: flex-start; }
}