/* =============================================
   ZAYTONA GRILL — style.css  v2
   Typeface: Cormorant Garamond + Inter
   Palette: near-black · sand · warm white · gold
   ============================================= */

:root {
  --ink:        #111210;
  --ink-soft:   #2c2e28;
  --ink-mid:    #4a4d42;
  --ink-muted:  #7a7d70;
  --sand:       #e8e0d0;
  --sand-light: #f3efe6;
  --white:      #fefdfb;
  --off-white:  #f7f4ef;
  --gold:       #b8912e;
  --gold-light: #d4aa4a;
  --olive:      #3a4820;
  --olive-dark: #232c13;
  --success:    #2d6a4f;
  --error:      #9b2335;

  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body:    'Inter', system-ui, -apple-system, sans-serif;

  --text-xs:   0.6875rem;
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-md:   1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.75rem;
  --text-4xl:  3.5rem;
  --text-5xl:  4.75rem;

  --max-w: 1160px;
  --gutter: 1.5rem;
  /* Height of the fixed .site-header. Anything that sticks or anchors below it
     must read this token, or it lands underneath an opaque bar. */
  --header-h: 72px;
  --r-sm:  4px;
  --r:     8px;
  --r-lg:  14px;
  --r-xl:  20px;
  --ease:  cubic-bezier(0.4,0,0.2,1);
  --dur:   200ms;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Stop in-page anchors from parking their target under the fixed header. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
  font-family: var(--ff-body);
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }
address { font-style: normal; }
table { border-collapse: collapse; }

/* SKIP LINK */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--r);
  z-index: 999;
  transition: top var(--dur);
}
.skip-link:focus { top: 1rem; }

/* SR-ONLY */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* FOCUS */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* CONTAINER */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* TYPE */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
h1  { font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl)); }
h2  { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); }
h3  { font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl)); }
h4  { font-size: var(--text-lg); }
em  { font-style: italic; color: var(--gold); }
p   { line-height: 1.7; }

.label {
  display: block;
  font-family: var(--ff-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
}
.label-light { color: rgba(255,255,255,0.55); }

.body-lg {
  font-size: var(--text-md);
  color: var(--ink-mid);
  line-height: 1.8;
}

/* SECTION */
.section { padding: 5rem 0; }
.section-light  { background: var(--off-white); }
.section-white  { background: var(--white); }
.section-dark   { background: var(--ink); }

.section-header {
  text-align: center;
  max-width: 580px;
  margin: 0 auto 3.5rem;
}
.section-header h2 { margin-bottom: 1rem; }

/* ============================
   BUTTONS
   ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-family: var(--ff-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1.5px solid transparent;
  border-radius: var(--r);
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary {
  background: var(--olive);
  color: #fff;
  border-color: var(--olive);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--olive-dark);
  border-color: var(--olive-dark);
}
.btn-outline {
  background: transparent;
  color: var(--olive);
  border-color: var(--olive);
}
.btn-outline:hover, .btn-outline:focus-visible {
  background: var(--olive);
  color: #fff;
}
.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
.btn-outline-light:hover, .btn-outline-light:focus-visible {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.9);
}
.btn-outline-dark {
  background: transparent;
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.35);
}
.btn-outline-dark:hover, .btn-outline-dark:focus-visible {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.7);
}
.btn-gold {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  font-weight: 700;
}
.btn-gold:hover, .btn-gold:focus-visible {
  background: var(--gold-light);
  border-color: var(--gold-light);
}
.btn-full { width: 100%; }

/* NAV CTA */
.btn-nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  background: var(--olive);
  color: #fff;
  border-radius: var(--r);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background var(--dur) var(--ease);
  border: 1.5px solid var(--olive);
}
.btn-nav-cta:hover { background: var(--olive-dark); border-color: var(--olive-dark); }

/* ============================
   HEADER / NAV
   ============================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: transparent;
  transition: background var(--dur) var(--ease), backdrop-filter var(--dur);
}
.site-header.scrolled {
  background: rgba(17,18,16,0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.5rem;
  max-width: var(--max-w);
  margin: 0 auto;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-display);
  font-size: 1.5125rem; /* 1.375rem + 10% */
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.logo-leaf { font-size: 1.1em; line-height: 1; }
/* Same size, weight and slant for both words so the wordmark reads as one line */
.logo .logo-text { line-height: 1; white-space: nowrap; }
.logo .logo-text em { color: var(--gold-light); font-style: normal; font-weight: inherit; font-size: inherit; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}
.nav-links a {
  color: rgba(255,255,255,0.8);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color var(--dur);
}
.nav-links a:hover { color: #fff; }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  /* 44px hit target. The bars stay 24px wide via .nav-toggle span. */
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  padding: 0.375rem;
}
.nav-toggle span { max-width: 24px; }
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all var(--dur) var(--ease);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================
   HERO
   ============================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
/* The still is the real hero and carries LCP. The video layers over it and
   fades in only once it is actually playing, so a blocked autoplay, a slow
   connection, Save-Data or reduced motion all leave a finished hero rather
   than a black rectangle. */
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  opacity: 0;
  transition: opacity 900ms var(--ease);
  pointer-events: none;
}
.hero-bg-video.is-playing { opacity: 1; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(12,14,10,0.55) 0%,
    rgba(12,14,10,0.65) 55%,
    rgba(12,14,10,0.75) 100%
  );
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 6rem var(--gutter) 4rem;
  max-width: 820px;
  min-width: 0;
}
.hero-services span { margin: 0 0.4rem; }
.hero-location {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.25rem;
}
.hero-content h1 {
  color: #fff;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 30px rgba(0,0,0,0.3);
}
.hero-content .hero-title {
  font-size: clamp(3rem, 11vw, 6.5rem);
  line-height: 1;
  margin-bottom: 1rem;
}
.hero-content .hero-location { margin-bottom: 1.5rem; }
.hero-tagline {
  font-family: var(--ff-display);
  font-size: clamp(1.25rem, 4.2vw, 2.25rem);
  line-height: 1.2;
  color: #fff;
  margin-bottom: 1rem;
  text-shadow: 0 2px 30px rgba(0,0,0,0.3);
}
.menu-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.hero-services {
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================
   TRUST BAR
   ============================ */
.trust-bar {
  background: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 0.875rem 1.5rem;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.72);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.375rem 1.5rem;
}
.trust-item svg { color: var(--gold-light); flex-shrink: 0; }
.trust-divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* ============================
   SECTION SPLIT
   ============================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.split-reverse { direction: rtl; }
.split-reverse > * { direction: ltr; }
.split-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.split-text h2 { margin-bottom: 0; }
.split-image img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--r-xl);
}

/* TAG LIST */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}
.tag-list li {
  padding: 0.3rem 0.875rem;
  background: var(--sand-light);
  border: 1px solid var(--sand);
  border-radius: 100px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-mid);
  letter-spacing: 0.02em;
}

/* FEATURE LIST */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  list-style: none;
}
.feature-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.feature-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--r);
  background: var(--off-white);
  border: 1px solid var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  color: var(--olive);
}
.feature-list strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.feature-list p {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0;
}

/* ============================
   ORDER BAND
   ============================ */
.order-band {
  background: var(--olive);
  padding: 3rem 0;
}
.order-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.order-band-text h2 {
  color: #fff;
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl));
  margin-bottom: 0.25rem;
}
.order-band-text p {
  color: rgba(255,255,255,0.65);
  font-size: var(--text-md);
}
.order-band-actions {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
}

/* ============================
   STORY BAND
   ============================ */
.story-band {
  position: relative;
  padding: 6rem 0;
  overflow: hidden;
}
.story-band-bg {
  position: absolute;
  inset: 0;
}
.story-band-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.story-band-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(10,14,5,0.90) 0%,
    rgba(10,14,5,0.78) 55%,
    rgba(10,14,5,0.65) 100%
  );
}
.story-band-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.story-band-content h2 { color: #fff; }
.story-band-content p {
  color: rgba(255,255,255,0.75);
  font-size: var(--text-md);
  line-height: 1.8;
}
.story-band-content blockquote {
  border-left: 3px solid var(--gold);
  padding-left: 1.25rem;
  margin: 0.5rem 0;
}
.story-band-content blockquote p {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--gold-light);
  line-height: 1.5;
}

/* ============================
   REVIEWS
   ============================ */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.review-card {
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: var(--r-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.review-stars {
  display: flex;
  gap: 3px;
}
.review-stars svg { color: var(--gold); }
.review-card blockquote p {
  font-size: var(--text-sm);
  color: var(--ink-mid);
  line-height: 1.75;
  font-style: italic;
}
.review-card cite {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-style: normal;
}
.reviews-cta { text-align: center; }

/* ============================
   VIP SECTION
   ============================ */
.vip-section { background: var(--ink-soft); padding: 2.5rem 0; }
.vip-inner {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}
.vip-text h2 { color: #fff; margin-bottom: 0.25rem; font-size: clamp(var(--text-xl), 3vw, var(--text-2xl)); }
.vip-text p { color: rgba(255,255,255,0.85); font-size: 1.0625rem; line-height: 1.5; margin: 0; }

/* VIP FORM */
.vip-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.vip-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
}
.vip-submit { min-height: 48px; white-space: nowrap; font-size: 1rem; }
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.form-group label {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.optional { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.9em; }
.field-hint { font-size: var(--text-xs); color: rgba(255,255,255,0.35); line-height: 1.4; }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"] {
  padding: 0.75rem 1rem;
  min-height: 48px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r);
  color: #fff;
  font-size: var(--text-base);
  transition: border-color var(--dur);
  outline: none;
}
.form-group input::placeholder { color: rgba(255,255,255,0.3); }
.form-group input:focus { border-color: var(--gold); background: rgba(255,255,255,0.09); }
.form-group input[aria-invalid="true"] { border-color: #e07070; }
.form-check {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
}
.form-check input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 0;
  accent-color: var(--gold);
  cursor: pointer;
}
.form-check label {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  line-height: 1.5;
}
.form-check label a { color: var(--gold-light); text-decoration: underline; }
.form-msg {
  display: none;
  padding: 0.75rem 1rem;
  border-radius: var(--r);
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
}
.form-msg.success { display: block; background: rgba(45,106,79,0.25); color: #7ed9a8; border: 1px solid rgba(45,106,79,0.4); }
.form-msg.error   { display: block; background: rgba(155,35,53,0.2); color: #f5a0a8; border: 1px solid rgba(155,35,53,0.35); }

/* ============================
   HOURS / INFO
   ============================ */
.info-strip { padding: 2.25rem 0; }
.info-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.7fr 1.2fr;
  gap: 2rem;
  align-items: start;
}
.info-block h3 {
  font-family: var(--ff-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 0.5rem;
}
.hours-table { width: 100%; }
.hours-table th, .hours-table td {
  padding: 0.25rem 0;
  font-size: 1.0625rem;
  color: var(--ink-mid);
  text-align: left;
}
.hours-table th { font-weight: 600; color: var(--ink); }
.hours-table td { text-align: right; }
.hours-table tr.closed th,
.hours-table tr.closed td { color: var(--ink-mid); }
.info-block .order-links .btn { font-size: 1rem; min-height: 48px; padding: 0.6rem 1.25rem; }
.info-block address p {
  font-size: 1.0625rem;
  color: var(--ink-mid);
  line-height: 1.5;
  margin-bottom: 0.25rem;
}
.info-block address a { color: var(--olive); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.info-block address a:hover { text-decoration-thickness: 2px; }

/* ============================
   LOCATION / MAP
   ============================ */
.map-wrap {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(0,0,0,0.1);
  margin-bottom: 1.5rem;
}
.find-us { padding: 3rem 0; }
.find-us .section-header { max-width: 60rem; margin-bottom: 1.25rem; }
.find-us .section-header h2 {
  font-size: clamp(var(--text-xl), 3.2vw, var(--text-2xl));
  margin-bottom: 0;
  text-wrap: balance;
}
.map-btns {
  display: flex;
  gap: 0.875rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.map-btns .btn { font-size: 1rem; min-height: 48px; padding: 0.6rem 1.75rem; }

/* ============================
   INSTAGRAM
   ============================ */
.instagram-section { padding: 2.5rem 0; }
.instagram-head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto 1.5rem;
}
.instagram-head h2 { color: #fff; margin-bottom: 0.5rem; }
.instagram-head p { color: rgba(255,255,255,0.85); font-size: 1.0625rem; margin: 0; }
.instagram-handle {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--gold-light);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.instagram-handle:hover { text-decoration: underline; }

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.instagram-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.04);
}
.instagram-tile img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
.instagram-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12,14,10,0.45);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.instagram-tile:hover img,
.instagram-tile:focus-visible img { transform: scale(1.06); }
.instagram-tile:hover::after { opacity: 1; }
.instagram-tile:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.instagram-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1rem;
  justify-content: center;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.6);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.social-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.social-btn:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }

@media (max-width: 900px) {
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .instagram-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
}

/* ============================
   FOOTER
   ============================ */
.site-footer {
  background: var(--ink);
  padding: 1.5rem 0 1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: #d6d3c8;
}
.site-footer a, .site-footer address, .site-footer p { color: #d6d3c8; font-size: 1rem; line-height: 1.5; }
.site-footer a:hover, .site-footer .cookie-reopen:hover { color: #fff; }
.site-footer a:focus-visible, .site-footer .cookie-reopen:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.footer-links a, .footer-legal a, .cookie-reopen { display: inline-flex; align-items: center; min-height: 44px; }
.footer-socials { display: flex; gap: 0.5rem; }
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #d6d3c8;
}
.footer-info {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  font-style: normal;
  margin-top: 0.25rem;
}
.footer-info a { display: inline-flex; align-items: center; min-height: 36px; }
.footer-hours-line { margin: 0; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; align-items: center; gap: 0 1.5rem; flex-wrap: wrap; }
.cookie-reopen {
  font-family: inherit;
  font-size: 1rem;
  color: #d6d3c8;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================
   RESPONSIVE — TABLET (≤900px)
   ============================ */
@media (max-width: 900px) {
  /* Nav */
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    inset: 0;
    background: rgba(12,14,10,0.98);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    z-index: 150;
    display: none;
  }
  .nav-links.open { display: flex; }

  /* .nav-links is a POSITIONED child of .site-header, and the header is its own
     stacking context, so the overlay's z-index 150 paints over the static .logo
     and .nav-toggle regardless of the header's own z-index. Measured: with the
     menu open, elementsFromPoint at the toggle's centre returned the overlay,
     not the button, so the close affordance was invisible and untappable.
     Lift both above the overlay. */
  .logo, .nav-toggle { position: relative; z-index: 160; }

  /* The open overlay is `position: fixed; inset: 0`, but `backdrop-filter` on
     .site-header.scrolled makes the header a CONTAINING BLOCK for fixed-position
     descendants. That collapses the overlay from the viewport to the 80px header
     box and throws Menu, Catering and Our Story off-screen above it. Measured:
     overlay height 80px with the filter, 812px without it, same page load.
     Drop the filter while the nav is open, and drop its transition too, or the
     collapse simply persists for the 200ms the blur takes to animate out.
     The overlay is opaque, so there is no blur to see behind it anyway. */
  body.nav-open .site-header {
    transition: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-links a { font-size: 1.5rem; }
  .btn-nav-cta { font-size: 1.25rem; padding: 0.75rem 2rem; }

  /* Splits */
  .split, .split-reverse { grid-template-columns: 1fr; direction: ltr; gap: 2.5rem; }
  .split-reverse .split-image { order: -1; }
  .split-image img { aspect-ratio: 16/9; }

  /* Reviews */
  .reviews-grid { grid-template-columns: 1fr; }

  /* VIP */
  .vip-inner { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .vip-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vip-field-email { grid-column: 1 / -1; }
  .vip-submit { grid-column: 1 / -1; }

  /* Info */
  .info-grid { grid-template-columns: 1fr; gap: 1.25rem; }

  /* Instagram */
  .instagram-head { margin-bottom: 1.25rem; }
}

/* ============================
   RESPONSIVE — MOBILE (≤600px)
   ============================ */
@media (max-width: 600px) {
  .container { padding: 0 var(--gutter); }
  .section { padding: 3.5rem 0; }
  .story-band { padding: 4rem 0; }

  .hero-content { padding: 5rem var(--gutter) 3rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { justify-content: center; }

  .trust-bar { gap: 0.25rem 0; }
  .trust-item { padding: 0.375rem 0.875rem; font-size: 0.65rem; }
  .trust-divider { display: none; }

  .order-band-inner { flex-direction: column; text-align: center; }
  .order-band-actions { flex-direction: column; width: 100%; }
  .order-band-actions .btn { justify-content: center; }

  .map-btns { flex-direction: column; }
  .map-btns .btn { justify-content: center; }
  .find-us, .info-strip { padding: 2.25rem 0; }
  .vip-section { padding: 2rem 0; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .map-btns { margin-bottom: 1rem; }



  .reviews-grid { gap: 1rem; }
}

/* ============================
   REDUCED MOTION (system pref)
   ============================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* House gutter token: 1.25rem under 560px so text never touches the edge */
@media (max-width: 560px) {
  :root { --gutter: 1.25rem; }
}

/* Multi destination order + social button rows */
.order-links,
.social-links,
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.menu-ctas .btn { flex: 1 1 auto; justify-content: center; }
.vip-form input, .vip-form .form-group { min-width: 0; max-width: 100%; }

/* Hero text sized for older readers */
.hero-content .hero-location { font-size: 1.125rem; letter-spacing: 0.16em; }
.hero-content .hero-tagline { font-size: clamp(1.5rem, 5vw, 2.75rem); }
.hero-content .hero-services { font-size: 1.25rem; color: rgba(255,255,255,0.9); letter-spacing: 0.1em; }
.hero-content .hero-actions .btn { font-size: 1.125rem; padding: 1rem 2.25rem; min-height: 56px; }
@media (max-width: 480px) {
  .hero-content .hero-location { font-size: 1rem; letter-spacing: 0.1em; }
  .hero-content .hero-services { font-size: 1.0625rem; letter-spacing: 0.06em; }
}