/* =========================================================
   The Mount Kennedy Inn — cosy pub website
   Mobile-first. min-width media queries only.
   Palette: deep bottle green + cream + warm amber
   ========================================================= */

:root {
  --green-900: #14261d;
  --green-800: #1c3a2b;
  --green-700: #25503b;
  --green-600: #2f6a4d;
  --green-50:  #e7efea;

  --cream:     #f5ebd6;
  --cream-soft:#f9f2e2;
  --cream-warm:#efe3c6;
  --paper:     #fbf7ec;

  --amber:     #b87a2a;
  --amber-600: #a46a20;
  --amber-400: #d49648;

  --ink:       #15120d;
  --ink-soft:  #3b352b;
  --muted:     #766c5d;
  --line:      rgba(20, 18, 13, 0.1);
  --line-soft: rgba(20, 18, 13, 0.06);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(20, 18, 13, 0.06);
  --shadow:    0 8px 24px rgba(20, 18, 13, 0.08);
  --shadow-lg: 0 24px 60px rgba(20, 18, 13, 0.18);

  --serif: 'Fraunces', 'Georgia', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --container: 1240px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream-soft);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 76px; /* clearance for the full-width sticky CTA on regular phones/tablets */
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
}
p { margin: 0; }

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

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-600);
  margin-bottom: 14px;
}
.eyebrow--light { color: var(--amber-400); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  min-height: 48px;
}
.btn--large { padding: 16px 28px; font-size: 16px; min-height: 54px; }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--amber);
  color: var(--paper);
  border-color: var(--amber);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 6px 16px rgba(184, 122, 42, 0.28);
}
.btn--primary:hover {
  background: var(--amber-600);
  border-color: var(--amber-600);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 12px 24px rgba(184, 122, 42, 0.36);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--paper);
  transform: translateY(-2px);
}

.btn--ghost-light {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.35);
  backdrop-filter: blur(4px);
}
.btn--ghost-light:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-2px);
}

/* ---------- Top Bar ---------- */
/* Hidden on mobile entirely — reclaimed screen real estate. The phone number
   is still one tap away via the floating Call chip and the hamburger drawer.
   Restored on desktop where there's plenty of room (rule lives in the 1024px+ block). */
.top-bar {
  display: none;
  background: var(--green-900);
  color: var(--cream);
  font-size: 13px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.top-bar__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.top-bar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cream);
  opacity: 0.9;
}
.top-bar__item a:hover { color: var(--amber-400); opacity: 1; }
.top-bar__item svg { color: var(--amber-400); flex-shrink: 0; }
.top-bar__item--hide-mobile { display: none; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 247, 236, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow 0.3s ease;
}
.nav.is-scrolled { box-shadow: var(--shadow-sm); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  gap: 16px;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav__logo-img {
  display: block;
  height: 68px;
  width: auto;
  object-fit: contain;
  margin: -8px 0;
}

.nav__links { display: none; }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__phone { display: none; }
.nav__cta { display: none; }

.mobile-menu-btn {
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: var(--radius-sm);
}
.mobile-menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.mobile-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile Drawer ---------- */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(320px, 86vw);
  background: var(--paper);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-lg);
  padding-top: 80px;
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer__inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px;
}
.mobile-drawer__inner a {
  padding: 14px 0;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.mobile-drawer__inner a:last-child, .mobile-drawer__inner .btn {
  border-bottom: 0;
  margin-top: 14px;
}
.mobile-drawer__overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 13, 0.5);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.mobile-drawer__overlay.is-open { opacity: 1; pointer-events: auto; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
  padding: 120px 0 56px;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  filter: saturate(1.05);
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 100%, rgba(20, 38, 29, 0.3) 0%, transparent 60%),
    linear-gradient(180deg, rgba(20, 18, 13, 0.4) 0%, rgba(20, 18, 13, 0.55) 55%, rgba(20, 18, 13, 0.85) 100%);
}

.hero__content { position: relative; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 24px;
  text-shadow: 0 0 18px rgba(212, 150, 72, 0.45), 0 1px 4px rgba(0, 0, 0, 0.5);
}
.hero__eyebrow::before,
.hero__eyebrow::after {
  content: '';
  flex-shrink: 0;
  width: 28px;
  height: 1px;
  background: var(--amber-400);
}

.hero__title {
  font-family: var(--serif);
  font-size: clamp(40px, 10vw, 84px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--cream);
  margin-bottom: 22px;
  max-width: 820px;
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--amber-400);
}

.hero__sub {
  font-size: 17px;
  line-height: 1.55;
  max-width: 560px;
  color: rgba(255,255,255,0.9);
  margin-bottom: 32px;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}
.hero__actions .btn { width: 100%; }

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 22px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.hero__proof-item {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.hero__proof-item strong {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--cream);
  letter-spacing: -0.005em;
}
.hero__proof-item span {
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
}
.hero__divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.2);
  display: none;
}

/* ---------- Trust Strip ---------- */
.trust-strip {
  background: var(--green-900);
  color: var(--cream);
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.trust-strip__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.trust-strip__item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.trust-strip__item svg { color: var(--amber-400); flex-shrink: 0; }
.trust-strip__item strong {
  display: block;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.trust-strip__item span {
  display: block;
  font-size: 13px;
  color: rgba(245, 235, 214, 0.65);
  margin-top: 2px;
}

/* ---------- Story ---------- */
.story { padding: 72px 0; background: var(--cream-soft); }
.story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
.story__media { position: relative; }
.story__media img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.story__badge {
  position: absolute;
  bottom: -20px;
  left: 20px;
  background: var(--amber);
  color: var(--paper);
  padding: 16px 22px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 260px;
}
.story__badge strong {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  color: var(--paper);
}
.story__badge span { font-size: 12px; letter-spacing: 0.04em; }

.story__text h2 {
  font-size: clamp(30px, 5.5vw, 46px);
  font-weight: 500;
  line-height: 1.08;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}
.story__text .lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.story__text p {
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.story__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 28px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}
.story__stats strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 600;
  color: var(--green-800);
  line-height: 1;
  margin-bottom: 6px;
}
.story__stats span {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.3;
}

/* ---------- Section heads ---------- */
.section-head {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}
.section-head h2 {
  font-size: clamp(30px, 5.5vw, 48px);
  font-weight: 500;
  line-height: 1.08;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.section-head p {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.section-head--light h2 { color: var(--cream); }
.section-head--light p { color: rgba(245, 235, 214, 0.75); }

/* ---------- Food ---------- */
.food {
  padding: 80px 0;
  background: var(--paper);
  position: relative;
}
.food__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.food-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line-soft);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
.food-card__body { flex: 1; }
.food-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.food-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.food-card:hover img { transform: scale(1.04); }
.food-card__body {
  padding: 22px 22px 24px;
  background: var(--paper);
}
.food-card__body h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 6px;
}
.food-card__body p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
}
.food-card__tag {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  background: var(--green-800);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
}

.food__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 44px;
}
.food__cta .btn { width: 100%; max-width: 320px; }

/* ---------- What's On ---------- */
.whats-on {
  padding: 80px 0;
  background: var(--green-900);
  color: var(--cream);
  background-image:
    radial-gradient(ellipse 60% 35% at 25% 20%, rgba(184, 122, 42, 0.08) 0%, transparent 70%);
}
.whats-on__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.event-card {
  background: rgba(245, 235, 214, 0.04);
  border: 1px solid rgba(245, 235, 214, 0.14);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.event-card:hover {
  background: rgba(245, 235, 214, 0.07);
  border-color: rgba(212, 150, 72, 0.4);
  transform: translateY(-3px);
}
.event-card__tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(212, 150, 72, 0.18);
  color: var(--amber-400);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 4px;
  margin-bottom: 16px;
}
.event-card h3 {
  font-size: 26px;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 12px;
}
.event-card p {
  color: rgba(245, 235, 214, 0.72);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 18px;
}
.event-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(245, 235, 214, 0.12);
  font-size: 13px;
  color: rgba(245, 235, 214, 0.6);
  flex-wrap: wrap;
  gap: 10px;
}
.event-card__link {
  color: var(--amber-400);
  font-weight: 600;
}
.event-card__link:hover { color: var(--amber); }

.event-card--feature {
  background: linear-gradient(145deg, rgba(184, 122, 42, 0.15), rgba(184, 122, 42, 0.04));
  border-color: rgba(212, 150, 72, 0.35);
}
.event-card--feature h3 { font-size: 30px; }

/* ---------- Instagram Section ---------- */
.whats-on { padding-bottom: 0; }
.instagram-section {
  padding: 24px 0 80px;
  background: var(--green-900);
  color: var(--cream);
}
.instagram-section__head { margin-bottom: 40px; }

.instagram-feed {
  text-align: center;
}
.instagram-feed__grid {
  margin-bottom: 36px;
}
.instagram-feed__placeholder {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.instagram-feed__placeholder-card {
  aspect-ratio: 16 / 9;
  background: rgba(245, 235, 214, 0.04);
  border: 1px dashed rgba(245, 235, 214, 0.14);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.instagram-feed__placeholder-card:hover {
  background: rgba(245, 235, 214, 0.07);
  border-color: rgba(212, 150, 72, 0.3);
}
.instagram-feed__placeholder-icon {
  color: var(--amber-400);
  opacity: 0.5;
}
.instagram-feed__placeholder-icon svg {
  width: 28px;
  height: 28px;
}
.instagram-feed__placeholder-card p {
  color: rgba(245, 235, 214, 0.4);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
}
.instagram-feed__follow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  color: var(--amber-400);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 10px 24px;
  border: 1px solid rgba(212, 150, 72, 0.35);
  border-radius: 100px;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.instagram-feed__follow:hover {
  background: rgba(212, 150, 72, 0.12);
  border-color: rgba(212, 150, 72, 0.6);
  transform: translateY(-2px);
}

/* ---------- Custom Instagram feed (Behold JSON API) ---------- */
.ig-carousel {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Mobile default: horizontal one-at-a-time scroll-snap carousel */
.ig-feed {
  display: flex;
  gap: 14px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 6px;
}
.ig-feed::-webkit-scrollbar { display: none; }
.ig-feed > .ig-tile {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  min-width: 0;
}
.ig-feed__skeleton {
  display: flex;
  gap: 14px;
  width: 100%;
}
.ig-feed__skeleton > div { flex: 0 0 100%; }

/* Carousel chrome (mobile only) */
.ig-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 18, 13, 0.65);
  color: var(--cream);
  border: 1px solid rgba(212, 150, 72, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  z-index: 2;
  transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}
.ig-carousel__nav:hover { background: rgba(20, 18, 13, 0.85); border-color: rgba(212, 150, 72, 0.8); }
.ig-carousel__nav:active { transform: translateY(-50%) scale(0.94); }
.ig-carousel__nav:disabled { opacity: 0.35; cursor: default; }
.ig-carousel__nav--prev { left: -6px; }
.ig-carousel__nav--next { right: -6px; }

.ig-carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.ig-carousel__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(245, 235, 214, 0.25);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}
.ig-carousel__dot.is-active {
  background: var(--amber-400);
  width: 22px;
  border-radius: 4px;
}
.ig-feed__skeleton > div {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background: linear-gradient(110deg,
    rgba(245, 235, 214, 0.05) 30%,
    rgba(245, 235, 214, 0.10) 50%,
    rgba(245, 235, 214, 0.05) 70%);
  background-size: 200% 100%;
  animation: ig-shimmer 1.6s ease-in-out infinite;
  border: 1px solid rgba(245, 235, 214, 0.08);
}
@keyframes ig-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ig-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(245, 235, 214, 0.04);
  border: 1px solid rgba(245, 235, 214, 0.10);
  isolation: isolate;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.ig-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease, filter 0.35s ease;
}
.ig-tile__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg,
    rgba(20, 38, 29, 0) 40%,
    rgba(20, 38, 29, 0.55) 100%);
  color: var(--cream);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.ig-tile__video {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 18, 13, 0.55);
  color: var(--cream);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding-left: 2px;
}
.ig-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 150, 72, 0.45);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.ig-tile:hover img { transform: scale(1.05); filter: saturate(1.05); }
.ig-tile:hover .ig-tile__overlay { opacity: 1; }
.ig-tile:focus-visible {
  outline: 2px solid var(--amber-400);
  outline-offset: 3px;
}

.ig-feed--error::after,
.ig-feed--empty::after {
  content: "Couldn't load Instagram right now — tap below to follow us.";
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(245, 235, 214, 0.55);
  font-size: 14px;
  padding: 24px 0;
}
.ig-feed--empty::after { content: "Fresh posts coming soon — follow along below."; }

/* ---------- Team ---------- */
.team { padding: 80px 0; background: var(--cream-soft); }
.team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}
.team-card {
  text-align: center;
  padding: 28px 24px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  transition: transform 0.3s ease;
}
.team-card:hover { transform: translateY(-3px); }
.team-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 18px;
  border: 3px solid var(--cream-warm);
}
.team-card__monogram {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  background: var(--cream-warm);
  border: 3px solid var(--cream);
  color: var(--amber-600);
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
}
.team-card h3 { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.team-card > span {
  display: block;
  color: var(--amber-600);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
}
.team-card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* ---------- Reserve ---------- */
.reserve {
  padding: 80px 0;
  background: var(--paper);
  background-image:
    radial-gradient(circle at 80% 20%, rgba(184, 122, 42, 0.06) 0%, transparent 45%);
}
.reserve__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
.reserve__text h2 {
  font-size: clamp(30px, 5.5vw, 46px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.reserve__text p {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 22px;
}
.reserve__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reserve__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--ink-soft);
}
.reserve__list svg {
  color: var(--green-700);
  flex-shrink: 0;
  background: var(--green-50);
  border-radius: 50%;
  padding: 3px;
  width: 22px;
  height: 22px;
}

.reserve__card {
  background: var(--green-900);
  color: var(--cream);
  padding: 32px 28px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid rgba(245, 235, 214, 0.08);
  position: relative;
  overflow: hidden;
}
.reserve__card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(184, 122, 42, 0.22), transparent 70%);
  pointer-events: none;
}
.reserve__card h3 {
  font-size: 26px;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 4px;
  position: relative;
}
.reserve__card-sub {
  color: rgba(245, 235, 214, 0.7);
  font-size: 14px;
  margin-bottom: 24px;
  position: relative;
}
.reserve__card .btn { position: relative; }

/* ---------- Booking form (inside .reserve__card) ---------- */
.booking-form__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  position: relative;
}
.booking-form__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(212, 150, 72, 0.16);
  color: var(--amber-400);
  flex: none;
}
.booking-form__head h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--cream);
  margin: 0;
}

.booking-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.booking-form__honey {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.booking-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Date / Time pickers — horizontal scrollable pill rows */
.date-picker,
.time-picker {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 150, 72, 0.4) transparent;
  padding: 4px 2px 8px;
  margin: 0 -2px;
  /* Soft fade at right edge to hint at more content */
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.date-picker::-webkit-scrollbar,
.time-picker::-webkit-scrollbar { height: 4px; }
.date-picker::-webkit-scrollbar-thumb,
.time-picker::-webkit-scrollbar-thumb {
  background: rgba(212, 150, 72, 0.35);
  border-radius: 4px;
}

.date-pill,
.time-pill {
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: rgba(245, 235, 214, 0.05);
  border: 1px solid rgba(245, 235, 214, 0.16);
  color: var(--cream);
  font-family: var(--sans);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  padding: 0;
}
.date-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 10px 14px;
  border-radius: 12px;
  gap: 2px;
  line-height: 1.1;
}
.date-pill__day {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 235, 214, 0.65);
  transition: color 0.2s ease;
}
.date-pill__date {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.time-pill {
  min-width: 62px;
  padding: 9px 14px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-feature-settings: "tnum";
}

.date-pill:hover,
.time-pill:hover {
  background: rgba(245, 235, 214, 0.10);
  border-color: rgba(212, 150, 72, 0.45);
}
.date-pill:focus-visible,
.time-pill:focus-visible {
  outline: 2px solid var(--amber-400);
  outline-offset: 2px;
}
.date-pill.is-closed {
  opacity: 0.55;
  position: relative;
}
.date-pill.is-closed .date-pill__day,
.date-pill.is-closed .date-pill__date {
  color: rgba(245, 235, 214, 0.55);
}
.date-pill__tag {
  display: block;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(212, 150, 72, 0.85);
  margin-top: 4px;
  line-height: 1;
}
.date-pill.is-closed.is-active {
  background: rgba(184, 122, 42, 0.25);
  border-color: rgba(212, 150, 72, 0.5);
  color: var(--cream);
  box-shadow: none;
  opacity: 1;
}
.date-pill.is-closed.is-active .date-pill__day,
.date-pill.is-closed.is-active .date-pill__date { color: var(--cream); }

.time-picker__note {
  margin: 8px 2px 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(212, 150, 72, 0.10);
  border: 1px solid rgba(212, 150, 72, 0.28);
  color: rgba(245, 235, 214, 0.78);
  font-size: 13.5px;
  line-height: 1.5;
}

.date-pill.is-active,
.time-pill.is-active {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--cream);
  box-shadow: 0 4px 14px rgba(184, 122, 42, 0.35);
}
.date-pill.is-active .date-pill__day {
  color: rgba(245, 235, 214, 0.85);
}
.date-pill.is-active:hover,
.time-pill.is-active:hover {
  background: var(--amber-600);
  border-color: var(--amber-600);
}
.booking-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.booking-form__field label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 235, 214, 0.7);
}
.booking-form__req {
  color: var(--amber-400);
  margin-left: 2px;
}

.booking-form input[type="text"],
.booking-form input[type="tel"],
.booking-form input[type="email"],
.booking-form input[type="date"],
.booking-form input[type="time"],
.booking-form select,
.booking-form textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--cream);
  background: rgba(245, 235, 214, 0.06);
  border: 1px solid rgba(245, 235, 214, 0.16);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
}
.booking-form textarea {
  resize: vertical;
  min-height: 88px;
  font-family: var(--sans);
  line-height: 1.5;
}
.booking-form ::placeholder { color: rgba(245, 235, 214, 0.36); }
.booking-form input:hover,
.booking-form select:hover,
.booking-form textarea:hover {
  border-color: rgba(245, 235, 214, 0.28);
  background: rgba(245, 235, 214, 0.08);
}
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
  outline: none;
  border-color: var(--amber-400);
  background: rgba(245, 235, 214, 0.10);
  box-shadow: 0 0 0 3px rgba(212, 150, 72, 0.18);
}
.booking-form input:invalid:not(:placeholder-shown):not(:focus),
.booking-form select:invalid:not(:focus) {
  border-color: rgba(212, 80, 60, 0.55);
}

/* Native picker icons — make them legible on the dark surface */
.booking-form input[type="date"]::-webkit-calendar-picker-indicator,
.booking-form input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85) sepia(0.5) saturate(2) hue-rotate(-15deg);
  cursor: pointer;
  opacity: 0.85;
}

/* Select arrow */
.booking-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d49648' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 38px;
}
.booking-form select option {
  background: var(--green-900);
  color: var(--cream);
}

.booking-form__submit {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.booking-form__submit[disabled] {
  opacity: 0.7;
  cursor: progress;
}
.booking-form__error {
  color: #f3b8a6;
  background: rgba(212, 80, 60, 0.12);
  border: 1px solid rgba(212, 80, 60, 0.35);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  margin: 0;
}
.booking-form__note {
  color: rgba(245, 235, 214, 0.55);
  font-size: 12.5px;
  text-align: center;
  margin-top: 4px;
  line-height: 1.5;
}

.booking-form__success {
  text-align: center;
  padding: 28px 8px 12px;
  color: var(--cream);
  position: relative;
}
.booking-form__success svg {
  color: var(--amber-400);
  margin-bottom: 10px;
}
.booking-form__success h4 {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--cream);
  margin: 0 0 6px;
}
.booking-form__success p {
  color: rgba(245, 235, 214, 0.7);
  font-size: 14.5px;
}
.reserve__card.is-success .booking-form { display: none; }
.reserve__card.is-success .booking-form__success { display: block !important; }

/* ---------- Visit ---------- */
.visit { padding: 80px 0; background: var(--cream-soft); }
.visit__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.visit__info h2 {
  font-size: clamp(30px, 5.5vw, 46px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.visit__address {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 28px;
}
.visit__detail {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.visit__detail h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-600);
  margin-bottom: 14px;
}
.visit__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  margin-right: 18px;
  font-weight: 500;
  color: var(--ink);
  font-size: 16px;
}
.visit__link svg { color: var(--amber); }
.visit__link:hover { color: var(--green-800); }

.hours {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.hours th {
  text-align: left;
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  width: 120px;
}
.hours td {
  text-align: right;
  color: var(--ink-soft);
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }

.visit__map {
  height: 360px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.visit__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- FAQ ---------- */
.faq { padding: 80px 0; background: var(--paper); }
.faq__list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq__item {
  background: var(--cream-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq__item[open] {
  border-color: var(--amber);
  box-shadow: var(--shadow-sm);
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 22px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  background: var(--amber);
  border-radius: 2px;
}
.faq__icon::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
}
.faq__icon::after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  transition: transform 0.25s ease;
}
.faq__item[open] .faq__icon::after { transform: translateX(-50%) scaleY(0); }
.faq__body { padding: 0 22px 22px; }
.faq__body p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.65;
}

/* ---------- Final CTA ---------- */
.final-cta {
  padding: 72px 0;
  background: var(--green-800);
  color: var(--cream);
  text-align: center;
  background-image:
    radial-gradient(ellipse at 50% 100%, rgba(184, 122, 42, 0.2) 0%, transparent 60%);
}
.final-cta h2 {
  font-size: clamp(34px, 7vw, 58px);
  font-weight: 500;
  color: var(--cream);
  font-style: italic;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.final-cta p {
  font-size: 17px;
  color: rgba(245, 235, 214, 0.8);
  max-width: 520px;
  margin: 0 auto 32px;
  line-height: 1.6;
}
.final-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 340px;
  margin: 0 auto;
}
.final-cta__actions .btn { width: 100%; }

/* ---------- Footer ---------- */
.footer {
  background: var(--green-900);
  color: rgba(245, 235, 214, 0.75);
  padding: 60px 0 28px;
  font-size: 14px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.footer__brand p {
  margin-top: 18px;
  color: rgba(245, 235, 214, 0.6);
  line-height: 1.6;
  max-width: 360px;
}
.footer__logo {
  display: inline-flex;
  align-items: center;
}
.footer__logo-img {
  display: block;
  height: 74px;
  width: auto;
  object-fit: contain;
  filter: invert(1) brightness(1.05) sepia(0.3) saturate(3) hue-rotate(-10deg);
}

.footer__col h4 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-400);
  margin-bottom: 14px;
}
.footer__col p, .footer__col ul { line-height: 1.8; }
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col a:hover { color: var(--amber-400); }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 24px;
  margin-top: 32px;
  border-top: 1px solid rgba(245, 235, 214, 0.08);
  font-size: 12.5px;
  color: rgba(245, 235, 214, 0.5);
}

/* ---------- Mobile Sticky CTA ----------
   Default (regular phones + tablets): full-width bottom bar with both buttons.
   Hidden by default — JS reveals .is-revealed once the in-hero CTAs scroll
   off, so we never show two "Reserve a Table" buttons at the same time.
   Small phones (≤380px) override this further down to a compact floating
   cluster — see the small-phone media block. */
.mobile-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(20, 18, 13, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.mobile-sticky-cta.is-revealed {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mobile-sticky-cta .btn { min-height: 48px; font-size: 14px; padding: 10px 14px; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   ALL PHONES — hide eyebrow lines and tighten spacing so the
   full place name fits on one line across all phone sizes.
   ========================================================= */
@media (max-width: 639px) {
  .hero__eyebrow {
    letter-spacing: 0.1em;
    gap: 10px;
  }
  .hero__eyebrow::before,
  .hero__eyebrow::after {
    display: none;
  }
}

/* =========================================================
   VERY SMALL PHONES — iPhone SE / mini / older Androids (≤380px)
   Targeted breathing-room fixes only. Bigger phones unaffected.
   ========================================================= */
@media (max-width: 380px) {
  .container { padding: 0 16px; }

  /* Hero — biggest culprit on tiny phones. Tighten everything. */
  .hero {
    min-height: auto;
    padding: 88px 0 40px;
  }
  .hero__eyebrow {
    font-size: 10px;
    margin-bottom: 16px;
  }
  .hero__title {
    font-size: 36px;
    line-height: 1.0;
    margin-bottom: 16px;
  }
  .hero__sub {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 22px;
  }
  .hero__actions { gap: 8px; margin-bottom: 26px; }
  .hero__actions .btn { font-size: 14px; padding: 12px 18px; }
  .hero__proof {
    gap: 12px 18px;
    padding-top: 18px;
  }
  .hero__proof-item strong { font-size: 14px; }
  .hero__proof-item span { font-size: 11.5px; }

  /* Section padding everywhere: a touch less so the page doesn't feel exhausting. */
  .trust-strip { padding: 22px 0; }
  .trust-strip__inner { gap: 14px; }
  .story { padding: 56px 0; }
  .visit { padding: 56px 0; }
  .reserve { padding: 56px 0; }

  /* Default eyebrow margin */
  .eyebrow { margin-bottom: 10px; letter-spacing: 0.16em; }

  /* ----- Floating CTA cluster (small-phone-only design) -----
     Replaces the full-width bottom bar with a compact bottom-right pair:
     a circular Call chip + an amber Reserve pill. Same visual family —
     matched 52px height, layered shadow, full-radius. */
  body { padding-bottom: 24px; }

  .mobile-sticky-cta {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    right: 14px;
    left: auto;
    padding: 0;
    gap: 10px;
    background: transparent;
    border: 0;
    box-shadow: none;
    align-items: center;
  }
  .mobile-sticky-cta .btn {
    min-height: 0;
    height: 52px;
    padding: 0;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }
  /* Call: deep-green circle, paper icon — confident and on-brand */
  .mobile-sticky-cta .btn--ghost {
    width: 52px;
    height: 52px;
    aspect-ratio: 1;             /* lock to a perfect square → perfect circle */
    flex: 0 0 52px;              /* never shrink, never grow */
    padding: 0;
    gap: 0;                      /* kills the inherited .btn gap that pushed the icon off-centre */
    border-radius: 50%;
    border: 0;
    background: var(--green-800);
    color: var(--paper);
    font-size: 0;                /* hide the "Call" text node — icon-only */
    line-height: 1;
    box-shadow: 0 8px 22px rgba(20, 38, 29, 0.32), 0 2px 4px rgba(20, 18, 13, 0.12);
  }
  .mobile-sticky-cta .btn--ghost svg {
    width: 22px;
    height: 22px;
    color: var(--paper);
    stroke-width: 2.25;
    flex: 0 0 22px;              /* keep the SVG its natural size in the flex layout */
  }
  .mobile-sticky-cta .btn--ghost:hover,
  .mobile-sticky-cta .btn--ghost:focus-visible {
    transform: translateY(-1px);
    background: var(--green-900);
    box-shadow: 0 10px 26px rgba(20, 38, 29, 0.4);
  }
  /* Reserve: amber pill, matched height + matched layered shadow */
  .mobile-sticky-cta .btn--primary {
    padding: 0 22px;
    background: var(--amber);
    color: var(--paper);
    border: 0;
    box-shadow: 0 8px 22px rgba(184, 122, 42, 0.42), 0 2px 4px rgba(184, 122, 42, 0.12);
  }
  .mobile-sticky-cta .btn--primary:hover,
  .mobile-sticky-cta .btn--primary:focus-visible {
    transform: translateY(-1px);
    background: var(--amber-600);
    box-shadow: 0 10px 26px rgba(184, 122, 42, 0.5);
  }
}

/* Tiny phones (≤340px, e.g. iPhone SE 1st gen) — pull in a touch tighter. */
@media (max-width: 340px) {
  .mobile-sticky-cta { right: 10px; gap: 8px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .mobile-sticky-cta .btn { height: 48px; }
  /* Re-state font-size: 0 — sizing the primary pill below would otherwise revive "Call" text. */
  .mobile-sticky-cta .btn--ghost { width: 48px; height: 48px; flex-basis: 48px; font-size: 0; }
  .mobile-sticky-cta .btn--primary { padding: 0 18px; font-size: 13.5px; }
}

/* =========================================================
   TABLET — 640px+
   ========================================================= */
@media (min-width: 640px) {
  .container { padding: 0 28px; }

  .top-bar__item--hide-mobile { display: flex; }

  .hero { padding: 140px 0 72px; min-height: 680px; }
  .hero__actions { flex-direction: row; }
  .hero__actions .btn { width: auto; }
  .hero__divider { display: block; }

  .trust-strip__inner { grid-template-columns: repeat(2, 1fr); gap: 22px 40px; }

  .story__grid { grid-template-columns: 1fr; gap: 48px; }

  .food__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .food__cta { flex-direction: row; }
  .food__cta .btn { width: auto; }

  .whats-on__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .instagram-feed__placeholder { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .instagram-feed__placeholder-card { aspect-ratio: 1; }
  /* Tablet+: drop the carousel, restore the 3-column grid */
  .ig-feed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
  }
  .ig-feed > .ig-tile { flex: initial; }
  .ig-feed__skeleton {
    display: contents;
  }
  .ig-carousel__nav,
  .ig-carousel__dots { display: none !important; }

  .team__grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }

  .reserve__grid { grid-template-columns: 1fr; gap: 40px; }
  .booking-form__row { gap: 18px; }

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

  .final-cta__actions { flex-direction: row; max-width: none; justify-content: center; }
  .final-cta__actions .btn { width: auto; }

  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* =========================================================
   DESKTOP — 1024px+
   ========================================================= */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }

  .top-bar { display: block; }

  .nav__inner { padding: 18px 28px; }

  .nav__logo-img { height: 84px; margin: -14px 0; }

  .nav__links {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .nav__links a {
    padding: 10px 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink-soft);
    border-radius: 6px;
    transition: color 0.2s ease, background 0.2s ease;
  }
  .nav__links a:hover {
    color: var(--ink);
    background: var(--cream-warm);
  }
  .nav__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    border-right: 1px solid var(--line);
    min-height: 24px;
  }
  .nav__phone:hover { color: var(--amber-600); }
  .nav__phone svg { color: var(--amber); }
  .nav__cta { display: inline-flex; }
  .mobile-menu-btn { display: none; }

  .mobile-sticky-cta { display: none; }

  .hero {
    min-height: 720px;
    padding: 180px 0 100px;
  }

  .trust-strip { padding: 34px 0; }
  .trust-strip__inner { grid-template-columns: repeat(4, 1fr); gap: 40px; }

  .story { padding: 112px 0; }
  .story__grid { grid-template-columns: 1.05fr 1fr; gap: 72px; }
  .story__media img { height: 560px; }
  .story__badge { bottom: 24px; left: 24px; padding: 20px 26px; }

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

  .food { padding: 120px 0; }
  .food__grid {
    grid-template-columns: 1.15fr 1fr 1fr 1.15fr;
    grid-auto-rows: 1fr;
    gap: 22px;
  }
  .food-card--tall { grid-row: span 2; }
  /* Bookend layout: the second tall card is forced into the right column to fill the 4×2 grid cleanly. */
  .food__grid > .food-card--tall:last-child {
    grid-column: 4;
    grid-row: 1 / span 2;
  }
  .food-card img { height: 240px; }
  .food-card--tall img { height: 100%; min-height: 380px; }
  .food-card--tall { display: flex; flex-direction: column; }
  .food-card--tall .food-card__body { flex: 1; }

  .whats-on { padding: 120px 0 0; }
  .whats-on__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 22px;
  }
  /* All cards equal — feature card keeps its accent styling but no row span */
  .event-card { display: flex; flex-direction: column; }
  .event-card .event-card__meta { margin-top: auto; }
  .instagram-section { padding: 40px 0 120px; }
  .instagram-section__head { margin-bottom: 56px; }
  .instagram-feed__follow { margin-top: 56px; }
  .instagram-feed__placeholder { gap: 24px; }
  .ig-feed { gap: 24px; max-width: 1180px; }

  .team { padding: 120px 0; }
  .team-card { padding: 36px 28px; }
  .team-card img { width: 140px; height: 140px; }
  .team-card__monogram { width: 140px; height: 140px; font-size: 48px; }

  .reserve { padding: 120px 0; }
  .reserve__grid { grid-template-columns: 1.15fr 1fr; gap: 80px; }
  .reserve__card { padding: 42px 36px; }

  .visit { padding: 120px 0; }
  .visit__grid { grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start; }
  .visit__map { height: 520px; }

  .faq { padding: 120px 0; }

  .final-cta { padding: 112px 0; }

  .footer { padding: 80px 0 32px; }
}

/* =========================================================
   Large desktop — 1280px+
   ========================================================= */
@media (min-width: 1280px) {
  .hero__title { font-size: 92px; }
  .hero__sub { font-size: 19px; }
}

/* =========================================================
   MENU PAGE
   ========================================================= */

.menu-hero {
  background: var(--cream-soft);
  padding: 56px 0 48px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
}
.menu-hero::before,
.menu-hero::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 122, 42, 0.12), transparent 70%);
  pointer-events: none;
  transform: translateY(-50%);
}
.menu-hero::before { left: -60px; }
.menu-hero::after { right: -60px; }

.menu-hero__inner { position: relative; max-width: 720px; margin: 0 auto; }
.menu-hero h1 {
  font-family: var(--serif);
  font-size: clamp(44px, 9vw, 84px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-style: italic;
  color: var(--ink);
  margin: 10px 0 18px;
}
.menu-hero p {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 28px;
}
.menu-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  max-width: 320px;
  margin: 0 auto;
}
.menu-hero__actions .btn { width: 100%; }

/* Menu index sticky tabs — single-row scrollable pill bar */
.menu-index {
  position: sticky;
  /* The nav has a different height on mobile vs desktop and can vary by a px or two
     due to borders/sub-pixel rendering. JS measures it live and writes --nav-h, so
     this submenu always sits flush against the bottom of the nav with no gap. */
  top: var(--nav-h, 80px);
  z-index: 20;
  background: rgba(251, 247, 236, 0.96);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
  padding: 0;
}
.menu-index__inner {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 10px 16px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  scroll-snap-type: x proximity;
}
.menu-index__inner::-webkit-scrollbar { display: none; }
.menu-index a {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink-soft);
  background: rgba(20, 18, 13, 0.04);
  border: 1px solid transparent;
  white-space: nowrap;
  scroll-snap-align: center;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.menu-index a:hover,
.menu-index a:focus-visible {
  color: var(--amber-600);
  background: rgba(184, 122, 42, 0.1);
  border-color: rgba(184, 122, 42, 0.25);
  outline: none;
}
/* The "·" separators belong to the old wrap-line layout — hidden in the pill design. */
.menu-index span { display: none; }

/* Keep section headings clear of the sticky nav + submenu when jumped to via anchor.
   52px = approximate menu-index height + a small breathing buffer. */
.menu-section { scroll-margin-top: calc(var(--nav-h, 80px) + 52px); }

/* Sections */
.menu-section {
  padding: 64px 0;
  background: var(--paper);
}
.menu-section--alt {
  background: var(--cream-soft);
}

.menu-section__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 44px;
  position: relative;
}
.menu-section__num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--amber-600);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.menu-section__head h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 7vw, 60px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.menu-section__rule {
  width: 64px;
  height: 2px;
  background: var(--amber);
  margin: 0 auto 18px;
  position: relative;
}
.menu-section__rule::before,
.menu-section__rule::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--amber);
  border-radius: 50%;
  transform: translateY(-50%);
}
.menu-section__rule::before { left: -14px; }
.menu-section__rule::after { right: -14px; }
.menu-section__head p {
  font-size: 16px;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.55;
  max-width: 520px;
  margin: 0 auto;
}

/* Layout: list + figure */
.menu-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
}

/* Menu list */
.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.menu-item {
  padding-bottom: 22px;
  border-bottom: 1px dashed var(--line);
}
.menu-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.menu-item__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  row-gap: 4px;
}
.menu-item__head h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.menu-item__dots {
  display: none;
  flex: 1 1 40px;
  height: 1px;
  margin: 0 2px 4px;
  background-image: radial-gradient(circle, var(--muted) 1px, transparent 1px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
  background-position: center;
  opacity: 0.5;
  min-width: 20px;
}
.menu-item__price {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--amber-600);
  letter-spacing: -0.005em;
  white-space: nowrap;
  flex-shrink: 0;
}
.menu-item__desc {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: 6px;
  font-style: italic;
}
.menu-item__desc em {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}

/* Menu tags */
.menu-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 4px;
  background: var(--cream-warm);
  color: var(--ink-soft);
}
.menu-tag--v {
  background: rgba(37, 80, 59, 0.1);
  color: var(--green-700);
}
.menu-tag--hot {
  background: var(--amber);
  color: var(--paper);
}

/* Figure */
.menu-figure {
  margin: 0;
  position: relative;
}
.menu-figure img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.menu-figure figcaption {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

.menu-photo-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 56px;
}
.menu-figure--wide img {
  height: 280px;
}
.menu-figure--wide figcaption { display: none; }

/* Notes */
.menu-notes {
  padding: 72px 0;
  background: var(--green-900);
  color: var(--cream);
}
.menu-notes__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 1020px;
  margin: 0 auto;
}
.menu-notes__block {
  padding: 24px;
  background: rgba(245, 235, 214, 0.04);
  border: 1px solid rgba(245, 235, 214, 0.12);
  border-radius: var(--radius);
}
.menu-notes__block h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-400);
  margin-bottom: 10px;
}
.menu-notes__block p {
  color: rgba(245, 235, 214, 0.75);
  font-size: 14.5px;
  line-height: 1.6;
}
.menu-notes__block .menu-tag { margin-top: 4px; }

/* Grid + split layouts (Sandwiches, Sides, Kids) */
.menu-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px 48px;
}
.menu-grid--compact { gap: 16px; }
.menu-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

/* Sub-group headings (Sides, Specials, Takeaway) */
.menu-split__title,
.menu-subhead {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  color: var(--amber-600);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.menu-subnote {
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  margin: -10px 0 18px;
}

/* Narrow single-column body (Pizza, Specials, Takeaway) */
.menu-narrow { max-width: 780px; margin: 0 auto; }
.menu-subgroup + .menu-subgroup { margin-top: 48px; }

/* Tablet */
@media (min-width: 640px) {
  .menu-hero { padding: 72px 0 64px; }
  .menu-hero__actions { flex-direction: row; max-width: none; justify-content: center; }
  .menu-hero__actions .btn { width: auto; }

  .menu-index__inner {
    gap: 8px;
    padding: 12px 24px;
    justify-content: center;
    overflow-x: visible;
    font-size: 13px;
    letter-spacing: 0.14em;
  }
  .menu-section { padding: 80px 0; }

  .menu-item__head { flex-wrap: nowrap; }
  .menu-item__dots { display: block; }

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

  .menu-photo-row { grid-template-columns: 1fr 1fr; gap: 24px; }

  .menu-notes__inner { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* Desktop */
@media (min-width: 1024px) {
  .menu-hero { padding: 96px 0 72px; }

  .menu-section { padding: 110px 0; }
  .menu-section__head { margin-bottom: 64px; }

  .menu-layout {
    grid-template-columns: 1.3fr 1fr;
    gap: 72px;
  }
  .menu-layout--reverse {
    grid-template-columns: 1fr 1.3fr;
  }
  .menu-layout--reverse .menu-figure { order: -1; }
  .menu-layout--reverse .menu-list { order: 0; }

  .menu-figure {
    position: sticky;
    top: 180px;
  }
  .menu-figure img { height: 560px; }

  .menu-photo-row { margin-top: 80px; }
  .menu-figure--wide img { height: 380px; }

  .menu-notes { padding: 100px 0; }
}

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

/* =========================================================
   Legal pages (Privacy / Cookies / Terms)
   ========================================================= */
.legal {
  background: var(--paper);
  padding: 56px 0 80px;
}
.legal__container {
  max-width: 780px;
}
.legal__head {
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.legal__head h1 {
  font-size: clamp(34px, 5vw, 48px);
  margin-top: 10px;
}
.legal__meta {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
}
.legal__section {
  margin-top: 32px;
}
.legal__section h2 {
  font-size: 22px;
  margin-bottom: 12px;
}
.legal__section h3 {
  font-size: 17px;
  font-family: var(--sans);
  font-weight: 700;
  margin: 18px 0 8px;
  color: var(--ink-soft);
}
.legal__section p,
.legal__section li {
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}
.legal__section p + p { margin-top: 12px; }
.legal__section ul {
  margin: 10px 0 0;
  padding-left: 22px;
}
.legal__section li { margin-bottom: 6px; }
.legal__section a {
  color: var(--amber-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal__section a:hover { color: var(--green-700); }
.legal__section code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  background: var(--cream-warm);
  padding: 1px 6px;
  border-radius: 4px;
}
.legal__cta { margin-top: 16px; }
.legal__inline-btn {
  background: var(--cream-warm);
  border: 1px solid var(--line);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-800);
}
.legal__inline-btn:hover { background: var(--cream); }
.legal__table {
  margin-top: 12px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  /* Subtle hint that this is scrollable on narrow viewports. */
  -webkit-overflow-scrolling: touch;
}
.legal__table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}
.legal__table th,
.legal__table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.legal__table th {
  background: var(--cream-soft);
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.legal__table tr:last-child td { border-bottom: 0; }
@media (min-width: 640px) {
  .legal__table table { min-width: 0; }
}
.legal__back {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.legal__back a {
  font-weight: 600;
  color: var(--green-700);
}

/* Footer button that mimics a footer link */
.footer__link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.footer__link-btn:hover { color: var(--amber-400); }

/* =========================================================
   Map consent placeholder
   ========================================================= */
.map-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 340px;
  background:
    linear-gradient(135deg, rgba(20,38,29,0.92), rgba(28,58,43,0.88)),
    url("images/lounge.jpg") center/cover no-repeat;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 28px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.map-placeholder__inner {
  max-width: 380px;
  text-align: center;
}
.map-placeholder__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  color: var(--amber-400);
}
.map-placeholder h3 {
  color: var(--cream);
  font-size: 22px;
  margin-bottom: 10px;
}
.map-placeholder p {
  font-size: 14.5px;
  color: rgba(245, 235, 214, 0.85);
  line-height: 1.6;
  margin-bottom: 18px;
}
.map-placeholder__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.map-placeholder__actions .btn { width: 100%; }
.map-placeholder__fineprint {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(245, 235, 214, 0.7);
}
.map-placeholder__fineprint a {
  color: var(--amber-400);
  text-decoration: underline;
}

/* =========================================================
   Cookie banner (first-party, no service)
   ========================================================= */
.cookie-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9000;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  max-width: 720px;
  margin: 0 auto;
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  /* Keep banner above the mobile sticky CTA on small screens (CTA is ~76px tall). */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.cookie-banner.is-open {
  transform: translateY(0);
  opacity: 1;
}
.cookie-banner__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 6px;
  color: var(--ink);
  line-height: 1.25;
}
.cookie-banner__body {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 14px;
}
.cookie-banner__body a {
  color: var(--amber-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
/* Accept + Reject are GDPR-required equal-prominence: always share one row, equal width. */
.cookie-banner__actions .btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 11px 10px;
  font-size: 14px;
  white-space: nowrap;
}
.cookie-banner__btn--secondary {
  background: var(--cream-warm);
  color: var(--green-800);
  border: 1px solid var(--line);
}
.cookie-banner__btn--secondary:hover { background: var(--cream); }
/* "Customize" is secondary — it lives on its own row centred below the two equal CTAs. */
.cookie-banner__btn--text {
  background: none;
  border: 1px solid transparent;
  color: var(--green-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  flex: 1 0 100%;
  padding: 6px 10px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}
.cookie-banner__btn--text:hover { color: var(--green-800); }

/* Cookie modal (granular toggles) */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cookie-modal.is-open { display: flex; }
.cookie-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 13, 0.55);
  backdrop-filter: blur(2px);
}
.cookie-modal__dialog {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px 18px;
}
@media (min-width: 480px) {
  .cookie-modal__dialog { padding: 28px 26px; }
}
.cookie-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.cookie-modal__close:hover {
  background: var(--cream-warm);
  color: var(--ink);
}
.cookie-modal h2 {
  font-size: 24px;
  margin-bottom: 6px;
}
.cookie-modal__intro {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.cookie-modal__category {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
  /* Narrow widths: title full-width, description full-width, control on its own row
     pinned to the right. Wider screens (>= 480px) flip to the side-by-side grid. */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cookie-modal__cat-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  order: 1;
}
.cookie-modal__cat-desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
  order: 2;
}
.cookie-modal__cat-locked {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green-700);
  background: var(--green-50);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  align-self: flex-end;
  order: 3;
}
/* Toggle switch */
.cookie-toggle {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  align-self: flex-end;
  order: 3;
}
.cookie-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.cookie-toggle__slider {
  position: absolute;
  inset: 0;
  background: #cfc8b8;
  border-radius: 999px;
  transition: background 0.2s ease;
}
.cookie-toggle__slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.cookie-toggle input:checked + .cookie-toggle__slider {
  background: var(--green-700);
}
.cookie-toggle input:checked + .cookie-toggle__slider::before {
  transform: translateX(20px);
}
.cookie-toggle input:focus-visible + .cookie-toggle__slider {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.cookie-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.cookie-modal__actions .btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 11px 10px;
  font-size: 14px;
  white-space: nowrap;
}

/* Booking-form consent note */
.booking-form__consent {
  margin: 14px 0 4px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.booking-form__consent a {
  color: var(--amber-600);
  text-decoration: underline;
}

@media (min-width: 480px) {
  /* On phones bigger than the SE and up, give the category cards the side-by-side
     layout: title + control on row 1, description spanning row 2. */
  .cookie-modal__category {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 14px;
    row-gap: 6px;
    align-items: center;
  }
  .cookie-modal__cat-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 15px;
  }
  .cookie-modal__cat-desc {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 13.5px;
  }
  .cookie-modal__cat-locked {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }
  .cookie-toggle {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }
  .cookie-banner__title { font-size: 20px; }
  .cookie-banner__body { font-size: 14.5px; }
  .cookie-banner__actions .btn { padding: 12px 18px; }
}
@media (min-width: 640px) {
  .cookie-banner {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: 460px;
    max-width: calc(100vw - 48px);
    padding: 26px;
  }
  .map-placeholder { min-height: 420px; }
  .map-placeholder__actions { flex-direction: row; justify-content: center; }
  .map-placeholder__actions .btn { width: auto; }
}