/* ==========================================================================
   Isabella's 2 Go — stylesheet
   Design language adapted from screen.jpg reference
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --red:      #C8102E;
  --red-dark: #A00C24;
  --red-tint: #FDF0F2;
  --ink:         #1B1B29;
  --ink-soft:    #3A3A4D;
  --body:        #6E6E85;
  --bg:          #FFFFFF;
  --bg-alt:      #F7F8FC;
  --bg-blue:     #EAF2F8;
  --line:        #E8E9F1;
  --card:        #FFFFFF;

  --radius:      16px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  --shadow:      0 10px 40px rgba(27, 27, 41, .08);
  --shadow-lg:   0 20px 60px rgba(27, 27, 41, .13);

  --wrap:        1180px;
  --gutter:      20px;

  --font-head:   'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Dancing Script', 'Segoe Script', cursive;

  --header-h:    76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.18;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.02em;
}

p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }

a { color: var(--red); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--red-dark); }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: 72px 0; }
.section--alt  { background: var(--bg-alt); }
.section--blue { background: var(--bg-blue); }

.section-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.section-head--left { margin-inline: 0; text-align: left; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}

.section-title { font-size: clamp(1.85rem, 4.2vw, 2.75rem); }
.section-lead  { font-size: 1.05rem; margin: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--red);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 30px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 22px rgba(200, 16, 46, .32);
}
.btn--primary:hover { background: var(--red-dark); color: #fff; box-shadow: 0 12px 28px rgba(200, 16, 46, .4); }

.btn--outline {
  background: transparent;
  color: var(--red);
  border-color: var(--red);
}
.btn--outline:hover { background: var(--red); color: #fff; }

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

.btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}
.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--header-h);
}

/* The logo loads oversized and shrinks to normal on first scroll.
   Scaling (rather than resizing) keeps it out of layout flow, so it can
   spill past the header edge without changing the header height.
   transform-origin is `left top` so it only ever grows downward — growing
   from the centre would clip the top against the viewport edge. */
.brand { display: flex; align-items: center; flex-shrink: 0; position: relative; z-index: 2; }
.brand img {
  /* Logo is near-square (593x449), so the width is set from the height the
     header can take: 96px wide lands at ~73px tall, matching the old mark. */
  width: 96px;
  height: auto;
  transform-origin: left top;
  transition: transform .32s ease;
  pointer-events: none; /* the 132px anchor box stays clickable; the overhang must not swallow nav clicks */
}
body:not(.is-scrolled) .brand img { transform: scale(1.34); }
/* An open mobile nav panel sits under the overhang, so drop back to normal */
body.nav-open .brand img { transform: none; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 12px var(--gutter) 24px;
}
.nav.is-open { display: block; }

.nav-list { list-style: none; }
.nav-list a {
  display: block;
  padding: 13px 4px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--red); }
.nav .btn { width: 100%; margin-top: 18px; }

.header-cta { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FDF4F5 0%, var(--bg-alt) 100%);
  padding: 56px 0 64px;
}

.hero-inner { display: grid; gap: 40px; align-items: center; }

.hero h1 {
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  margin-bottom: .35em;
}

/* Hero headings set in script — the home brand name and each interior page
   title. Sized up and given back their natural tracking: Dancing Script has a
   small x-height and the global h1 -.02em letter-spacing pinches the joins
   between letters. Interior pages sit a step smaller than the home hero so the
   brand name stays the loudest thing on the site. */
.hero h1.hero-title {
  font-family: var(--font-script);
  font-size: clamp(3rem, 9.5vw, 4.8rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
  margin-bottom: .25em;
}
.hero .hero-lead {
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 34em;
  margin-bottom: 1.4em;
}

.hero-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 26px 0 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .98rem;
}
.hero-contact a { color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.hero-contact a:hover { color: var(--red); }
.hero-contact svg { width: 17px; height: 17px; fill: var(--red); flex-shrink: 0; }

.hero-note {
  font-size: .9rem;
  color: var(--body);
  background: var(--red-tint);
  border-left: 3px solid var(--red);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  margin: 4px 0 0;
  max-width: 34em;
}

/* Hero photo panel — one large image cycling through the catering shots.
   Replaced a circular "orbit" composition: a circle crops a plated dish from
   every side at once, and these photos need to read as food, not as a motif. */
.hero-shots {
  position: relative;
  width: min(100%, 560px);
  margin-inline: auto;
}

/* The panel stays 4:3 so the hero row keeps its shape. Every catering shot is
   portrait, so each slide centre-crops to a band — that lands on the food and
   trims the ceiling and floor, which is the part worth losing. */
.hero-shots-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--bg-alt);
}

/* Slides stack and cross-fade rather than translate, so the frame and its
   shadow never move. Without JS the first photo simply stays visible, so the
   hero is never blank; main.js adds .is-live to hand over to .is-active. */
.hero-shots-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-shots-frame img:first-child { opacity: 1; }
.hero-shots-frame.is-live img:first-child { opacity: 0; }
.hero-shots-frame.is-live img.is-active { opacity: 1; }

/* Kept from the old composition — it breaks the rectangle's edge and carries
   the event types. .hero has overflow:hidden, so the overhang can't scroll. */
.hero-chip {
  position: absolute;
  left: -10px;
  bottom: 26px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 10px 16px;
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.hero-chip span { display: block; font-family: var(--font-body); font-weight: 400; font-size: .72rem; color: var(--body); }

/* Interior page hero */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 340px;
  padding: 72px 0;
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 27, 41, .68) 0%, rgba(27, 27, 41, .78) 100%);
}
.page-hero .wrap { position: relative; }
.page-hero h1 {
  color: #fff;
  font-family: var(--font-script);
  font-size: clamp(2.6rem, 8vw, 4.2rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
}
.page-hero p {
  color: rgba(255, 255, 255, .92);
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  max-width: 46em;
  margin-inline: auto;
}
.page-hero .btn-row { justify-content: center; margin-top: 26px; }

/* ---------- Stats ---------- */
.stats {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  text-align: center;
}
.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 20px;
  box-shadow: var(--shadow);
}
.stat-num {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  font-weight: 700;
  color: var(--red);
  line-height: 1.1;
}
.stat-label { font-size: .95rem; margin: 6px 0 0; }

/* ---------- Cards grid ---------- */
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.card h3 { font-size: 1.22rem; }
.card p:last-child { margin-bottom: 0; }

.card-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: var(--red-tint);
  margin-bottom: 20px;
}
.card-icon img { width: 34px; height: 34px; object-fit: contain; }

/* Menu preview cards */
.menu-card { display: flex; flex-direction: column; }
.menu-card ul { list-style: none; margin: 0 0 22px; flex: 1; }
.menu-card li {
  padding: 9px 0 9px 24px;
  position: relative;
  border-bottom: 1px dashed var(--line);
  font-size: .96rem;
  color: var(--ink-soft);
}
.menu-card li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}
.menu-card li:last-child { border-bottom: 0; }
.menu-card .btn { align-self: flex-start; }

/* ---------- Gallery ---------- */
.gallery { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.gallery-item {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  /* Square, not 4:3. The client's photos are all shot portrait (3:4); a
     landscape tile cropped away nearly half of each one. Square keeps the grid
     tidy and takes only the top and bottom off. Full frame opens in lightbox. */
  aspect-ratio: 1 / 1;
  box-shadow: var(--shadow);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(27, 27, 41, .35) 100%);
  opacity: 0;
  transition: opacity .3s ease;
}
.gallery-item:hover::after { opacity: 1; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 15, 24, .92);
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lightbox-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 640px);
  text-align: center;
  color: rgba(255, 255, 255, .88);
  font-size: .9rem;
}
.lightbox-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.lightbox-btn:hover { background: var(--red); }
.lightbox-close { top: 18px; right: 18px; }
.lightbox-prev  { left: 14px;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 14px; top: 50%; transform: translateY(-50%); }

/* ---------- Testimonials ---------- */
.quote {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow);
  position: relative;
}
.quote-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 4rem;
  line-height: .8;
  color: var(--red);
  opacity: .28;
  display: block;
  margin-bottom: 6px;
}
.quote blockquote { margin: 0; font-size: .98rem; color: var(--ink-soft); }
.quote blockquote p:last-child { margin-bottom: 0; }
.quote-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-top: 20px;
  opacity: .75;
}

/* ---------- Story (about) ---------- */
.story { display: grid; gap: 36px; align-items: center; }
.story-media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.story-badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .85rem;
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 76px 0;
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 27, 41, .86) 0%, rgba(27, 27, 41, .92) 100%);
}
.cta-band .wrap { position: relative; }
.cta-band h2 { color: #fff; font-size: clamp(1.8rem, 4.2vw, 2.6rem); }
.cta-band > .wrap > p { color: rgba(255, 255, 255, .82); max-width: 46em; margin-inline: auto; }

.contact-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  margin: 44px 0 36px;
  text-align: left;
}
.contact-card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.contact-card h3 {
  color: #fff;
  font-size: .8rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.contact-card p, .contact-card a { color: rgba(255, 255, 255, .9); margin: 0; font-size: 1.02rem; }
.contact-card a:hover { color: var(--red); }
.contact-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--red);
  margin-bottom: 16px;
}
.contact-icon svg { width: 21px; height: 21px; fill: #fff; }

/* ---------- FAQ / notes accordion ---------- */
.faq { max-width: 780px; margin-inline: auto; }
.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  box-shadow: 0 4px 18px rgba(27, 27, 41, .05);
  overflow: hidden;
}
.faq details[open] { background: var(--bg-alt); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  min-height: 56px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--red);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  transition: transform .22s ease;
}
.faq details[open] summary::after { content: "\2212"; transform: rotate(180deg); }
.faq .faq-body { padding: 0 22px 20px; }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* Light contact cards (contact page) */
.info-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform .22s ease, box-shadow .22s ease;
}
.info-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.info-card .contact-icon { margin-inline: auto; }
.info-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.info-card p, .info-card a { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.info-card a:hover { color: var(--red); }

/* ---------- Contact form ---------- */
.form-panel {
  max-width: 760px;
  margin-inline: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow);
}
.form { display: grid; gap: 18px; }
.field label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  margin-bottom: 7px;
}
.req { color: var(--red); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  background: #fff;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, .14);
}
.field input::placeholder, .field textarea::placeholder { color: #9A9AAE; }
.field textarea { min-height: 150px; resize: vertical; }
.field--half { display: grid; gap: 18px; }
@media (min-width: 620px) { .field--half { grid-template-columns: 1fr 1fr; } }

.form button[type="submit"] { justify-self: start; }
.form__note { font-size: .9rem; color: var(--body); margin: 0; }

/* Status banners. Hidden until the submit handler reveals one. */
.form__msg {
  display: none;
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 22px;
  font-weight: 500;
}
.form__msg.is-shown { display: block; }
.form__msg--ok { background: #E7F4EC; color: #2E7D57; border: 1px solid #A9DCC0; }
.form__msg--err { background: var(--red-tint); color: var(--red-dark); border: 1px solid #F3C2CB; }
.form__msg--err a { color: inherit; text-decoration: underline; }

/* Honeypot: off-canvas rather than display:none, since some bots skip
   hidden fields but happily fill this one. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Map ---------- */
.map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--bg-alt);
}
.map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- Menu page ---------- */
.menu-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.menu-nav ul {
  display: flex;
  gap: 6px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 12px 0;
}
.menu-nav ul::-webkit-scrollbar { display: none; }
.menu-nav a {
  display: block;
  white-space: nowrap;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--bg-alt);
}
.menu-nav a:hover { background: var(--red-tint); color: var(--red); }
.menu-nav a.is-active { background: var(--red); color: #fff; }

/* Clear the sticky menu nav as well as the header when jumping to an anchor */
html:has(.menu-nav) { scroll-padding-top: calc(var(--header-h) + 79px); }

.menu-section { padding: 64px 0; border-top: 1px solid var(--line); }
.menu-section:first-of-type { border-top: 0; }
.menu-nav + .menu-section { border-top: 0; }

.menu-items { display: grid; gap: 16px; grid-template-columns: 1fr; }

.item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: 0 4px 18px rgba(27, 27, 41, .05);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.item:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(200, 16, 46, .35); }
.item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
  margin-bottom: 8px;
}
/* Beverages carry a price but no description — don't leave the gap hanging */
.item-head:last-child { margin-bottom: 0; }
.item-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--ink);
  margin: 0;
  flex: 1 1 auto;
}
.item-price {
  flex-shrink: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  color: var(--red);
  background: var(--red-tint);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
/* The unit ("/ person", "/ piece") rides inside the price pill, dialled back so
   the number still reads first. */
.item-price em { font-style: normal; font-weight: 500; opacity: .72; }

/* Items with no set price ("Call for pricing") drop the red so they don't
   compete with real numbers down the column. */
.item-price--quote { background: var(--bg-alt); color: var(--ink-soft); }

.item-tag {
  flex-shrink: 0;
  align-self: center;
  font-family: var(--font-head);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #2E7D57;
  background: #E7F4EC;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.item-desc { margin: 0; font-size: .95rem; }
.item-desc + .item-desc { margin-top: 4px; }
.item-desc--fine { font-size: .88rem; color: var(--body); }

.menu-note {
  background: var(--red-tint);
  border-left: 3px solid var(--red);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 20px 0 0;
  font-size: .93rem;
  color: var(--ink-soft);
}
.menu-subhead {
  font-size: 1.2rem;
  margin: 34px 0 14px;
  padding-top: 6px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding: 56px 0 0;
}
.footer-grid { display: grid; gap: 34px; grid-template-columns: 1fr; }
.footer-brand img { width: 124px; margin-bottom: 16px; }
.footer-brand p { font-size: .95rem; max-width: 30em; }

.site-footer h3 {
  font-size: .82rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 16px;
}
.footer-list { list-style: none; }
.footer-list li { margin-bottom: 10px; }
.footer-list a { color: var(--body); font-size: .96rem; }
.footer-list a:hover { color: var(--red); }

.social { display: flex; gap: 10px; margin-top: 18px; }
.social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  transition: background .2s ease, border-color .2s ease;
}
.social a:hover { background: var(--red); border-color: var(--red); }
.social svg { width: 17px; height: 17px; fill: var(--ink); transition: fill .2s ease; }
.social a:hover svg { fill: #fff; }

.footer-bottom {
  margin-top: 44px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: .9rem;
}
.footer-bottom p { margin: 0; }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
body.nav-open { overflow: hidden; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width: 600px) {
  .section { padding: 88px 0; }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .menu-items { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .map { aspect-ratio: 16 / 9; }
}

@media (min-width: 900px) {
  :root { --gutter: 28px; }

  .nav-toggle { display: none; }

  .nav {
    display: block;
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .nav-list { display: flex; gap: 6px; }
  .nav-list a {
    border-bottom: 0;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    font-size: .97rem;
  }
  .nav-list a:hover { background: var(--red-tint); }
  .nav-list a[aria-current="page"] { background: var(--red-tint); color: var(--red); }
  .nav .btn { display: none; }
  .header-cta { display: inline-flex; }

  /* More room to spill on desktop */
  body:not(.is-scrolled) .brand img { transform: scale(1.55); }

  .hero { padding: 76px 0 92px; }
  .hero-inner { grid-template-columns: 1.05fr .95fr; gap: 56px; }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }

  .story { grid-template-columns: 1fr 1fr; gap: 56px; }
  .story--reverse .story-media { order: 2; }

  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 44px; }

  .section-head { margin-bottom: 54px; }
}

@media (min-width: 1200px) {
  .hero-shots { width: 100%; }
}

/* ---------- Motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .card:hover, .item:hover, .info-card:hover { transform: none; }
  .gallery-item:hover img { transform: none; }
}

@media print {
  .site-header, .menu-nav, .cta-band, .site-footer, .lightbox, .btn { display: none !important; }
  body { color: #000; }
  .item, .card { break-inside: avoid; box-shadow: none; }
}