/* Bistro Franc — blossom cream editorial */

:root {
  --bg: #f9ece3;
  --bg-elevated: #fbf3ec;
  --bg-warm: #f6e6db;
  --green: #034937;
  --green-deep: #023529;
  --ink: #08160f;
  --text: #034937;
  --text-body: rgba(3, 73, 55, 0.88);
  --text-muted: rgba(3, 73, 55, 0.82);
  --gold: #b18c50;
  /* Deep bronze — used whenever gold appears as TEXT or a functional
     indicator on cream. Plain --gold is ~2.7:1 on cream (fails WCAG AA);
     this hits ~4.9:1 while still reading as brand gold. */
  --gold-text: #7f6234;
  --gold-dim: #7f6234;
  /* Light gold reads as the accent on deep green, where --gold-text would not. */
  --gold-light: #d9b87c;
  --cream-soft: rgba(249, 236, 227, 0.84);
  --blush-soft: #fdd5d1;
  --line: rgba(177, 140, 80, 0.28);
  --line-strong: rgba(3, 73, 55, 0.32);
  --line-on-green: rgba(249, 236, 227, 0.2);
  --shadow-soft: 0 30px 60px -32px rgba(3, 73, 55, 0.28);
  --shadow-card: 0 24px 48px -28px rgba(3, 73, 55, 0.18);
  --title-font: "Cormorant Garamond", Georgia, serif;
  --body-font: "Outfit", system-ui, sans-serif;
  /* Readable type scale for an older dining audience — subtle lifts only */
  --fs-body: clamp(1.0625rem, 1.01rem + 0.22vw, 1.15rem);
  --lh-body: 1.75;
  --fs-meta: 0.9375rem; /* 15px floor for labels / meta */
  --fs-nav: 0.875rem;
  --fs-btn: 0.9rem;
  --header-h: 4.75rem;
  --header-h-sm: 3.85rem;
  --section-y: clamp(3.75rem, 7vw, 6.5rem);
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --max: 72rem;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-sm) + 1.25rem);
}

/* Anchored targets clear the fixed header instead of hiding beneath it */
[id] {
  scroll-margin-top: calc(var(--header-h-sm) + 1.5rem);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--body-font);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background:
    radial-gradient(ellipse 85% 55% at 0% 0%, rgba(253, 213, 209, 0.45), transparent 52%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(177, 140, 80, 0.08), transparent 48%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}

html.nav-open,
html.nav-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* ---------------------------------------------------------------------------
   Intro loader — full logo with animated blossom art. The FRANC wordmark is
   visible immediately; the branch then fades in left to right and the flowers
   open in sequence along it. The sequence lives inside images/logo-intro.svg
   (generated from assets/images/logo.svg by site/tools/build-blossom-intro.js).

   Shown once per browser session, armed by the inline script in header.php.
   Dismissal is a pure CSS animation, so the overlay clears on schedule even if
   the JS bundle never runs.

   The SVG sequence finishes at 1080ms — keep --pl-hold above that, and mirror
   any change in the two timeouts in assets/js/main.js.
   --------------------------------------------------------------------------- */

.preloader {
  --pl-hold: 1.15s;
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  place-items: center;
  padding: var(--gutter);
  background:
    radial-gradient(ellipse 85% 55% at 0% 0%, rgba(253, 213, 209, 0.45), transparent 52%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(177, 140, 80, 0.08), transparent 48%),
    var(--bg);
}

html.is-loading .preloader {
  display: grid;
  animation: pl-out 0.45s ease var(--pl-hold) forwards;
}

.preloader__inner {
  display: grid;
  justify-items: center;
}

.pl-art {
  width: clamp(9rem, 30vw, 15rem);
  height: auto;
}

@keyframes pl-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Full-screen menu shell — avoids fixed-nav trapping after scroll.
   Must also beat .site-header.is-scrolled, which sets a compact height. */
html.nav-open .site-header,
html.nav-open .site-header.is-scrolled {
  height: 100%;
  height: 100dvh;
  background: rgba(249, 236, 227, 0.99);
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.nav-open .site-header__inner {
  align-items: flex-start;
  padding-top: 0.85rem;
}

html.nav-open main,
html.nav-open .site-footer {
  visibility: hidden;
  pointer-events: none;
}

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

a {
  color: var(--gold-text);
  text-decoration: none;
  transition: color 0.25s ease;
}

a:hover,
a:focus-visible {
  color: var(--green);
}

:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
}

.btn:focus-visible,
.social-link:focus-visible,
.visit-link:focus-visible,
.menu-row:focus-visible,
.offer-row__link:focus-visible,
.link-arrow:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
}

.section--green :focus-visible,
.cta-band :focus-visible,
.hero :focus-visible {
  outline-color: var(--gold-light);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 1000;
  padding: 0.65rem 1rem;
  background: var(--gold);
  color: var(--ink);
  font-weight: 500;
}

.skip-link:focus {
  top: 1rem;
  color: var(--ink);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.85rem;
  padding: 0.95rem 1.7rem;
  font-family: var(--body-font);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease);
}

.btn--gold {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

.btn--gold:hover,
.btn--gold:focus-visible {
  background: transparent;
  color: var(--gold-text);
  border-color: var(--gold-text);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--green);
  border-color: var(--line-strong);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--gold-text);
  color: var(--gold-text);
  transform: translateY(-1px);
}

.btn--sm {
  padding: 0.75rem 1.25rem;
  font-size: 0.8rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(3, 73, 55, 0.1);
  box-shadow: none;
  transition: height 0.4s var(--ease), background 0.35s ease, border-color 0.35s ease,
    color 0.35s ease;
}

.site-header.is-scrolled {
  height: var(--header-h-sm);
  background: var(--bg);
  border-bottom-color: rgba(3, 73, 55, 0.14);
}

/* Homepage: header sits on the hero video until the page is scrolled. */
body.overlay-header .site-header:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

body.overlay-header .site-header:not(.is-scrolled) .site-nav__list a {
  color: rgba(249, 236, 227, 0.9);
}

body.overlay-header .site-header:not(.is-scrolled) .site-nav__list a:hover,
body.overlay-header .site-header:not(.is-scrolled) .site-nav__list a[aria-current="page"] {
  color: #f9ece3;
}

body.overlay-header .site-header:not(.is-scrolled) .site-nav__list a[aria-current="page"]::after {
  background: var(--gold-light);
}

body.overlay-header .site-header:not(.is-scrolled) .site-logo:not(.is-bloom):not(.is-mark-hidden) .site-logo__mark--ink {
  opacity: 0;
}

body.overlay-header .site-header:not(.is-scrolled) .site-logo:not(.is-bloom):not(.is-mark-hidden) .site-logo__mark--cream {
  opacity: 1;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}

body.overlay-header .site-header:not(.is-scrolled) .site-logo__bloom {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}

body.overlay-header .site-header:not(.is-scrolled) .nav-toggle__bar {
  background: #f9ece3;
}

/* Mobile drawer is cream — restore dark nav colours while it is open. */
html.nav-open body.overlay-header .site-header:not(.is-scrolled) .site-nav__list a {
  color: var(--text-muted);
}

html.nav-open body.overlay-header .site-header:not(.is-scrolled) .site-nav__list a:hover,
html.nav-open body.overlay-header .site-header:not(.is-scrolled) .site-nav__list a[aria-current="page"] {
  color: var(--green);
}

html.nav-open body.overlay-header .site-header:not(.is-scrolled) .site-nav__list a[aria-current="page"]::after {
  background: var(--gold-text);
}

html.nav-open body.overlay-header .site-header:not(.is-scrolled) .site-logo:not(.is-bloom):not(.is-mark-hidden) .site-logo__mark--ink {
  opacity: 1;
}

html.nav-open body.overlay-header .site-header:not(.is-scrolled) .site-logo:not(.is-bloom):not(.is-mark-hidden) .site-logo__mark--cream {
  opacity: 0;
  filter: none;
}

html.nav-open body.overlay-header .site-header:not(.is-scrolled) .site-logo__bloom,
html.nav-open body.overlay-header .site-header:not(.is-scrolled) .site-logo__full {
  filter: none;
}

html.nav-open body.overlay-header .site-header:not(.is-scrolled) .nav-toggle__bar {
  background: var(--green);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: calc(var(--max) + 2 * var(--gutter));
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site-logo {
  position: relative;
  display: block;
  flex-shrink: 0;
  line-height: 0;
  z-index: 130;
}

/* Wordmark ↔ blossom loop. The wordmark stays in flow to set the stage width;
   the blossom is layered over it so the header does not jump on crossfade. */
.site-logo__stage {
  position: relative;
  display: block;
  height: 2.6rem;
  overflow: visible;
  transition: height 0.4s var(--ease);
}

.site-header.is-scrolled .site-logo__stage {
  height: 2.05rem;
}

/* Swap is sequential, not a crossfade — otherwise the flower draws on top of
   the wordmark while Franc is still fading out. */
.site-logo__mark {
  position: relative;
  display: block;
  width: auto;
  height: 100%;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Cream FRANC for dark hero overlay — stacked over the green mark */
.site-logo__mark--cream {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
}

.site-logo__bloom {
  position: absolute;
  left: 0;
  top: 50%;
  width: auto;
  height: 3.6rem;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  /* No fade-in — fading would flash a finished SVG frame. Fade out only. */
  transition: height 0.4s var(--ease);
}

.site-header.is-scrolled .site-logo__bloom {
  height: 2.85rem;
}

.site-logo.is-mark-hidden .site-logo__mark,
.site-logo.is-bloom .site-logo__mark {
  opacity: 0;
  transition-duration: 0.12s;
}

.site-logo.is-bloom .site-logo__bloom {
  opacity: 1;
}

.site-logo:not(.is-bloom) .site-logo__bloom {
  transition: opacity 0.22s ease, height 0.4s var(--ease);
}

.site-logo__full {
  display: none;
  width: auto;
  height: 5.5rem;
}

html.nav-open .site-logo__stage {
  display: none;
}

html.nav-open .site-logo__full {
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__list a {
  position: relative;
  color: var(--text-muted);
  font-size: var(--fs-nav);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
  color: var(--green);
}

.site-nav__list a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35rem;
  height: 1px;
  background: var(--gold-text);
}

.site-nav__book {
  padding: 0.55rem 0.95rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  transition: padding 0.4s var(--ease), font-size 0.4s var(--ease), background 0.25s ease,
    color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.site-nav__book:hover,
.site-nav__book:focus-visible {
  transform: none;
}

/* Compact on scroll: tighter nav gaps */
.site-header.is-scrolled .site-nav {
  gap: 1.5rem;
}

.site-header.is-scrolled .site-nav__list {
  gap: 1.15rem;
}

.site-header.is-scrolled .site-nav__book {
  padding: 0.48rem 0.85rem;
  font-size: 0.7rem;
}

.header-actions {
  display: none;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  z-index: 130;
}

.header-book {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.58rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  border: 1px solid var(--gold);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.header-book:hover,
.header-book:focus-visible {
  background: transparent;
  color: var(--gold-text);
  border-color: var(--gold-text);
}

.header-book__icon {
  display: block;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle__box {
  position: relative;
  display: block;
  width: 1.4rem;
  height: 0.95rem;
  margin: 0 auto;
}

.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--green);
  border-radius: 1px;
  transition: transform 0.3s var(--ease), top 0.3s var(--ease), opacity 0.25s ease;
}

.nav-toggle__bar:nth-child(1) {
  top: 0;
}

.nav-toggle__bar:nth-child(2) {
  top: calc(50% - 0.75px);
}

.nav-toggle__bar:nth-child(3) {
  top: calc(100% - 1.5px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  top: calc(50% - 0.75px);
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  top: calc(50% - 0.75px);
  transform: rotate(-45deg);
}

/* Hero */

.hero {
  position: relative;
  min-height: 72vh;
  min-height: 72svh;
  display: grid;
  align-items: end;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 4.5rem;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.hero__media img,
.hero__media video,
.hero__media canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media img {
  transform: scale(1.04);
  transition: transform 8s var(--ease);
}

.hero.is-ready .hero__media img {
  transform: scale(1);
}

/* Poster sits under the canvas; always painted so reduced-motion / failed video
   still have a stable frame with no layout shift. */
.hero__poster {
  z-index: 0;
  background: #1a1510;
}

.hero--cinematic .hero__poster {
  transform: none;
}

/* Hidden source — kept playing (not display:none) so frames can be sampled.
   Canvas is what visitors actually see / can right-click. */
.hero__media video.hero__video {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -9999;
  width: 16px;
  height: 9px;
  opacity: 0;
  pointer-events: none;
}

.hero__media canvas.hero__canvas {
  z-index: 1;
  display: block;
  pointer-events: none;
  background: #1a1510;
}

/* Inner-page heroes: light veil so photography stays visible.
   Homepage (.hero--cinematic) keeps the stronger vignette below. */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 80% 75% at 50% 42%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.08) 55%,
      rgba(0, 0, 0, 0.28) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.22) 0%,
      rgba(0, 0, 0, 0.08) 42%,
      rgba(0, 0, 0, 0.28) 100%
    ),
    rgba(8, 22, 18, 0.1);
}

/* Soft left band for title contrast — kept lighter than home. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    97deg,
    rgba(8, 22, 18, 0.52) 0%,
    rgba(8, 22, 18, 0.28) 30%,
    rgba(8, 22, 18, 0.1) 50%,
    rgba(8, 22, 18, 0) 68%
  );
}

@media (max-width: 1200px) {
  .hero__media::after {
    background: linear-gradient(
      97deg,
      rgba(8, 22, 18, 0.55) 0%,
      rgba(8, 22, 18, 0.3) 38%,
      rgba(8, 22, 18, 0.1) 58%,
      rgba(8, 22, 18, 0) 78%
    );
  }
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
}

/* The FRANC signage sits low-centre in the frame (~70% down), so on wider
   screens the full hero seats its copy in the upper band and leaves the
   shopfront reading as photography below it, instead of both competing for the
   same space. Below 960px the crop and the cream gradient both flip to
   bottom-weighted, so the copy stays where the cream is. */
@media (min-width: 961px) {
  .hero:not(.hero--compact):not(.hero--cinematic) {
    align-items: start;
    padding-top: calc(var(--header-h) + clamp(2.5rem, 7vh, 5rem));
    padding-bottom: clamp(3rem, 8vh, 6rem);
  }

  .hero:not(.hero--compact):not(.hero--cinematic) .hero__content {
    max-width: min(var(--max), 58rem);
  }
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.1rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.hero__eyebrow::after {
  content: "";
  width: clamp(2rem, 5vw, 3.5rem);
  height: 1px;
  background: var(--gold);
}

.hero__brand,
.hero__headline,
.hero__support {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.hero__brand {
  margin: 0 0 0.75rem;
  font-family: var(--title-font);
  font-size: clamp(3.1rem, 7.4vw, 5.9rem);
  font-weight: 600;
  line-height: 0.93;
  letter-spacing: -0.005em;
  color: #f9ece3;
}

.hero__headline {
  margin: 0 0 1rem;
  /* Wide enough for "French-Mediterranean cooking" to hold its own line, narrow
     enough that the phrase never runs on as one long measure. */
  max-width: 30ch;
  text-wrap: balance;
  font-family: var(--title-font);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.15;
  color: var(--gold-light);
}

.hero__support {
  margin: 0 0 1.9rem;
  max-width: 38ch;
  text-wrap: pretty;
  font-size: clamp(1.05rem, 1.15vw + 0.7rem, 1.2rem);
  line-height: 1.65;
  color: rgba(249, 236, 227, 0.9);
}

.hero--cinematic .hero__brand,
.hero--cinematic .hero__headline,
.hero--cinematic .hero__eyebrow {
  text-shadow:
    0 2px 28px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.45);
}

.hero .btn--ghost {
  color: #f9ece3;
  border-color: rgba(249, 236, 227, 0.45);
}

.hero .btn--ghost:hover,
.hero .btn--ghost:focus-visible {
  color: var(--gold-light);
  border-color: var(--gold-light);
}

/* Manual break in the headline on wide screens only */
.hero__break {
  display: none;
}

@media (min-width: 641px) {
  .hero__break {
    display: inline;
  }
}

/* Compact facts strip: open-hours, address, phone */
.hero__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
  margin-top: 2.25rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(249, 236, 227, 0.28);
  max-width: 46rem;
}

.hero__fact {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hero__fact-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.hero__fact-value {
  font-size: 1rem;
  color: #f9ece3;
}

a.hero__fact-value:hover,
a.hero__fact-value:focus-visible {
  color: var(--gold-light);
}

.hero__fact-sep {
  flex: 0 0 1px;
  height: 1.9rem;
  background: rgba(249, 236, 227, 0.28);
}

.hero--compact {
  min-height: 66vh;
  min-height: 66svh;
  align-items: end;
}

/* Keep faces / tables in frame on portrait crops */
.hero--compact .hero__media img {
  object-position: center 40%;
}

.hero--about .hero__media img {
  object-position: center 42%;
}

/* Soft local veil behind compact hero copy — do not flatten the whole photo */
.hero--about .hero__media::after {
  background: linear-gradient(
    97deg,
    rgba(8, 22, 18, 0.48) 0%,
    rgba(8, 22, 18, 0.22) 32%,
    rgba(8, 22, 18, 0.06) 52%,
    rgba(8, 22, 18, 0) 70%
  );
}

.hero--compact .hero__brand {
  font-size: clamp(2.5rem, 5.6vw, 4.2rem);
}

.hero--compact .hero__headline {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-style: normal;
  font-family: var(--body-font);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

/* Cinematic homepage hero — centered copy over vignetted video */
.hero--cinematic {
  height: 960px;
  min-height: 960px;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: stretch;
  justify-items: stretch;
  padding: calc(var(--header-h) + 1.25rem) var(--gutter) 1.75rem;
}

/* Lighter combined veil — food stays rich; soft centre shield keeps type readable. */
.hero--cinematic .hero__media::before {
  background:
    radial-gradient(
      ellipse 72% 68% at 50% 40%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.1) 52%,
      rgba(0, 0, 0, 0.42) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.32) 0%,
      rgba(0, 0, 0, 0.08) 34%,
      rgba(0, 0, 0, 0.12) 58%,
      rgba(0, 0, 0, 0.48) 100%
    ),
    rgba(8, 22, 18, 0.1);
}

.hero--cinematic .hero__media::after {
  display: block;
  background: radial-gradient(
    ellipse 58% 48% at 50% 44%,
    rgba(8, 22, 18, 0.38) 0%,
    rgba(8, 22, 18, 0.14) 42%,
    transparent 72%
  );
}

.hero--cinematic .hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding: 2rem 0 3.5rem;
  text-align: center;
}

.hero--cinematic .hero__eyebrow {
  justify-content: center;
  margin-bottom: 1.35rem;
  color: var(--gold-light);
  letter-spacing: 0.28em;
}

.hero--cinematic .hero__eyebrow::before,
.hero--cinematic .hero__eyebrow::after {
  content: "";
  width: clamp(1.5rem, 4vw, 2.75rem);
  height: 1px;
  background: rgba(177, 140, 80, 0.85);
}

.hero--cinematic .hero__brand,
.hero--cinematic .hero__headline {
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
}

.hero--cinematic .hero__brand {
  margin: 0 0 0.85rem;
  color: #f9ece3;
  font-size: clamp(3.4rem, 8vw, 6.4rem);
}

.hero--cinematic .hero__headline {
  margin: 0;
  max-width: 22ch;
  color: rgba(249, 236, 227, 0.92);
  font-size: clamp(1.55rem, 3.2vw, 2.45rem);
}

.hero--cinematic .hero__rail {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1rem 1.5rem;
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0.25rem 0 0.5rem;
  color: rgba(249, 236, 227, 0.92);
}

.hero__phone {
  justify-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: inherit;
  text-align: left;
}

.hero__phone-label,
.hero__rail-label,
.hero__scroll {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero__phone-label,
.hero__rail-label {
  color: var(--gold-light);
}

.hero__phone-num,
.hero__rail-value {
  font-family: var(--title-font);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 500;
  line-height: 1.2;
  color: #f9ece3;
}

.hero__phone:hover .hero__phone-num,
.hero__phone:focus-visible .hero__phone-num {
  color: var(--gold-light);
}

.hero__scroll {
  justify-self: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  color: rgba(249, 236, 227, 0.88);
  transition: color 0.25s ease;
}

.hero__scroll:hover,
.hero__scroll:focus-visible {
  color: var(--gold-light);
}

.hero__scroll-icon {
  display: block;
  animation: hero-scroll-bounce 1.8s ease-in-out infinite;
}

.hero__rail-end {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  text-align: right;
}

@keyframes hero-scroll-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.35rem);
  }
}

/* Sections */

.section {
  padding: var(--section-y) var(--gutter);
}

.section--elevated {
  background: var(--bg-elevated);
}

.section--warm {
  background: var(--bg-warm);
}

.section--tight {
  padding-block: calc(var(--section-y) * 0.62);
}

.section--snug {
  padding-block: calc(var(--section-y) * 0.83);
}

.section--flush {
  padding-inline: 0;
}

/* Lets full-bleed photography run straight into the next band */
.section--flush-bottom {
  padding-bottom: 0;
}

.section--flush .section__inner {
  padding-inline: var(--gutter);
}

/* Deep green: used sparingly to break the cream rhythm */
.section--green {
  background: var(--green-deep);
}

.section--green .section__title,
.section--green .section__inner > h2 {
  color: #f9ece3;
}

.section--green .section__label {
  color: var(--gold-light);
}

.section--green .section__lead,
.section--green .section__text {
  color: var(--cream-soft);
}

.section--green .btn--ghost {
  color: #f9ece3;
  border-color: var(--line-on-green);
}

.section--green .btn--ghost:hover,
.section--green .btn--ghost:focus-visible {
  color: var(--gold-light);
  border-color: var(--gold-light);
}

.section--green .link-arrow {
  color: var(--gold-light);
}

.section__inner {
  max-width: var(--max);
  margin: 0 auto;
}

/* Title left, secondary action right — avoids stranded buttons below content */
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section__head-text {
  max-width: 44rem;
}

.section__head .section__label,
.section__head .section__title,
.section__head .section__lead {
  margin-bottom: 0;
}

.section__head .section__label {
  margin-bottom: 0.7rem;
}

.section__head .section__title + .section__lead {
  margin-top: 0.9rem;
}

/* Inline links in body copy need to be identifiable without colour alone */
.section__text a:not(.btn),
.section__lead a:not(.btn),
.book-fallback a,
.offer-detail a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--line);
}

.section__text a:not(.btn):hover,
.section__lead a:not(.btn):hover,
.book-fallback a:hover,
.offer-detail a:not(.btn):hover {
  text-decoration-color: currentColor;
}

.section__aside {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding-left: 1.1rem;
  border-left: 1px solid var(--line);
}

.section__aside-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.section__aside-value {
  font-family: var(--title-font);
  font-size: 1.3rem;
  color: var(--green);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.3rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.link-arrow svg {
  transition: transform 0.3s var(--ease);
}

.link-arrow:hover,
.link-arrow:focus-visible {
  color: var(--green);
  border-bottom-color: var(--gold);
}

.link-arrow:hover svg,
.link-arrow:focus-visible svg {
  transform: translateX(4px);
}

.section--green .link-arrow {
  border-bottom-color: var(--line-on-green);
}

.section--green .link-arrow:hover,
.section--green .link-arrow:focus-visible {
  color: #f9ece3;
  border-bottom-color: var(--gold-light);
}

.section__label {
  margin: 0 0 0.75rem;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.section__title {
  margin: 0 0 1.25rem;
  font-family: var(--title-font);
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.005em;
  max-width: 30ch;
  color: var(--text);
}

.section__lead {
  margin: 0 0 2rem;
  max-width: 44ch;
  color: var(--text-body);
  font-size: clamp(1.075rem, 1vw + 0.75rem, 1.175rem);
  line-height: 1.7;
}

.section__text {
  margin: 0 0 1.15rem;
  max-width: 62ch;
  color: var(--text-body);
  line-height: var(--lh-body);
}

.section__text:last-child {
  margin-bottom: 0;
}

/* Editorial split */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split--reverse {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.split--reverse .split__media {
  order: 2;
}

.split__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 30rem;
  box-shadow: var(--shadow-soft);
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.split__media:hover img {
  transform: scale(1.03);
}

.split__body {
  padding-block: 0.5rem;
}

/* Menus */

.menu-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.menu-rows li {
  border-bottom: 1px solid var(--line);
}

.menu-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 2rem;
  align-items: center;
  padding: clamp(1.35rem, 2.6vw, 1.9rem) 0;
  color: inherit;
  transition: background 0.25s ease;
}

.menu-row__body {
  display: block;
  min-width: 0;
}

.menu-row__title {
  display: block;
  margin: 0 0 0.4rem;
  font-family: var(--title-font);
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--text);
  transition: color 0.25s ease;
}

.menu-row:hover .menu-row__title,
.menu-row:focus-visible .menu-row__title {
  color: var(--gold-text);
}

.menu-row__desc {
  display: block;
  margin: 0 0 0.55rem;
  max-width: 46ch;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.menu-row__time {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.menu-row__time svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.menu-row__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.85rem;
  padding: 0.7rem 1.15rem;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  line-height: 1.2;
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.menu-row__action-icon {
  flex-shrink: 0;
}

.menu-row__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--gold-text);
  border: 1px solid rgba(177, 140, 80, 0.45);
}

.menu-row:hover .menu-row__action,
.menu-row:focus-visible .menu-row__action {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
}

.menu-row:hover .menu-row__badge,
.menu-row:focus-visible .menu-row__badge {
  color: var(--ink);
  border-color: rgba(8, 22, 18, 0.28);
}

/* What's On rows */

.offer-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}

.offer-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
  padding: clamp(1.4rem, 2.8vw, 1.9rem) 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
}

.offer-row__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-card);
}

.offer-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.offer-row:hover .offer-row__media img {
  transform: scale(1.05);
}

.offer-row__day {
  margin: 0 0 0.45rem;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.offer-row__title {
  margin: 0 0 0.5rem;
  font-family: var(--title-font);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--text);
}

.offer-row__link {
  color: inherit;
  transition: color 0.25s ease;
}

/* Stretched link: the whole row is clickable, the Book button stays on top */
.offer-row__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.offer-row:hover .offer-row__link {
  color: var(--gold-text);
}

.offer-row__teaser {
  margin: 0;
  max-width: 46ch;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.offer-row__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.9rem;
  text-align: right;
}

.offer-row__price {
  display: block;
  font-family: var(--title-font);
  font-size: clamp(1.55rem, 2.2vw, 1.9rem);
  line-height: 1.1;
  color: var(--gold-text);
  white-space: nowrap;
}

.offer-row__unit {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.offer-row__book {
  position: relative;
  z-index: 1;
}

.offer-detail {
  max-width: 40rem;
}

.offer-detail__price {
  margin: 0 0 1.5rem;
  font-family: var(--title-font);
  font-size: 2.4rem;
  color: var(--gold-text);
}

.offer-detail__note {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--body-font);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

/* Signature dishes */

.dish-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
}

.dish__media {
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.dish__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}

.dish:hover .dish__media img {
  transform: scale(1.05);
}

.dish__title {
  margin: 1.15rem 0 0.35rem;
  font-family: var(--title-font);
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
}

.dish__desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* Numbered values (About) */

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.value {
  padding-top: 1.35rem;
  border-top: 1px solid var(--line-on-green);
}

.value__num {
  margin: 0 0 0.9rem;
  font-family: var(--title-font);
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  color: var(--gold-light);
}

.value__title {
  margin: 0 0 0.6rem;
  font-family: var(--title-font);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 500;
  color: #f9ece3;
}

.value__text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--cream-soft);
}

/* Guest reviews — horizontal slider */

.quote-slider {
  --quote-gap: clamp(1.5rem, 3.5vw, 2.75rem);
  --quote-per-view: 3;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0.75rem 0.85rem;
}

.quote-slider__viewport {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  outline: none;
}

.quote-slider__viewport::-webkit-scrollbar {
  display: none;
}

.quote-slider__viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--gold-light);
}

.quote-slider__track {
  display: flex;
  align-items: stretch;
  gap: var(--quote-gap);
}

.quote-slider__btn {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  color: var(--gold-light);
  background: transparent;
  border: 1px solid rgba(217, 184, 124, 0.45);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}

.quote-slider__btn:hover,
.quote-slider__btn:focus-visible {
  color: #f9ece3;
  border-color: var(--gold-light);
  background: rgba(249, 236, 227, 0.06);
}

.quote-slider__btn:disabled {
  opacity: 0.28;
  cursor: default;
  pointer-events: none;
}

.quote-slider__btn .bf-icon {
  display: block;
}

.quote {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - (var(--quote-per-view) - 1) * var(--quote-gap)) / var(--quote-per-view));
  min-width: calc((100% - (var(--quote-per-view) - 1) * var(--quote-gap)) / var(--quote-per-view));
  max-width: calc((100% - (var(--quote-per-view) - 1) * var(--quote-gap)) / var(--quote-per-view));
  height: auto;
  min-height: 100%;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-on-green);
  scroll-snap-align: start;
}

.quote__text {
  margin: 0;
  font-family: var(--title-font);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-style: italic;
  line-height: 1.45;
  color: #f9ece3;
}

.quote__more {
  align-self: flex-start;
  margin: 0.85rem 0 0;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  border-bottom: 1px solid rgba(217, 184, 124, 0.45);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.quote__more:hover,
.quote__more:focus-visible {
  color: #f9ece3;
  border-bottom-color: #f9ece3;
}

.quote__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  margin-top: auto;
  padding-top: 1.4rem;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.quote__name {
  color: var(--gold-light);
}

.quote__source,
.quote__date {
  color: var(--cream-soft);
}

.quote__source a {
  color: var(--cream-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--line-on-green);
}

.quote__source a:hover,
.quote__source a:focus-visible {
  color: #f9ece3;
  text-decoration-color: currentColor;
}

/* Unmissable while review copy is not yet real */
.quote__flag,
.dev-note {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  border: 1px dashed rgba(217, 184, 124, 0.6);
}

.quote__flag {
  padding: 0.15rem 0.45rem;
}

.dev-note {
  display: inline-block;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding: 0.5rem 0.8rem;
}

.quote__stars {
  display: flex;
  gap: 0.15rem;
  margin-bottom: 1rem;
  color: var(--gold-light);
}

/* Atmosphere strip — full-bleed photography */

.atmos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

.atmos__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

/* Light shared grade so the trio reads as one set */
.atmos__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: saturate(0.96) contrast(1.02);
  transition: transform 1.2s var(--ease);
}

.atmos__item:nth-child(1) img {
  object-position: center 38%;
}

.atmos__item:nth-child(2) img {
  object-position: center 45%;
}

.atmos__item:nth-child(3) img {
  object-position: center 28%;
}

.atmos__item:hover img {
  transform: scale(1.05);
}

/* Gallery */

.gallery-grid {
  columns: 3 16rem;
  column-gap: 0.85rem;
}

.gallery-grid figure {
  break-inside: avoid;
  margin: 0 0 0.85rem;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 16px 32px -20px rgba(3, 73, 55, 0);
  transition: box-shadow 0.4s ease;
}

.gallery-grid figure:hover {
  box-shadow: 0 20px 36px -18px rgba(3, 73, 55, 0.3);
}

.gallery-grid img {
  width: 100%;
  transition: transform 0.7s var(--ease), opacity 0.3s ease;
}

.gallery-grid figure:hover img {
  transform: scale(1.03);
}

/* Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(3, 73, 55, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  max-width: min(96vw, 56rem);
  max-height: 88vh;
  object-fit: contain;
}

.lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  border: 0;
  background: transparent;
  color: var(--bg);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

/* CTA band */

.cta-band {
  position: relative;
  padding: clamp(4rem, 8vw, 6.5rem) var(--gutter);
  text-align: center;
  background: center / cover no-repeat url("../images/lifestyle-wine-service.webp");
  isolation: isolate;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Light enough to keep the room readable, dark enough for cream text (~6.5:1) */
  background: linear-gradient(180deg, rgba(2, 53, 41, 0.72) 0%, rgba(2, 53, 41, 0.84) 100%);
}

.cta-band .section__label {
  color: var(--gold-light);
}

.cta-band .section__title {
  margin-inline: auto;
  color: #f9ece3;
}

.cta-band .section__lead {
  margin-inline: auto;
  color: var(--cream-soft);
}

.cta-band .btn-row {
  justify-content: center;
}

.cta-band .btn--ghost {
  color: #f9ece3;
  border-color: rgba(249, 236, 227, 0.38);
}

.cta-band .btn--ghost:hover,
.cta-band .btn--ghost:focus-visible {
  color: var(--gold-light);
  border-color: var(--gold-light);
}

.cta-band__note {
  margin: 1.75rem 0 0;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-soft);
}

.cta-band__note a {
  color: var(--gold-light);
}

.cta-band__note a:hover,
.cta-band__note a:focus-visible {
  color: #f9ece3;
}

/* Book */

.book-shell {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

.book-shell iframe {
  width: 100%;
  min-height: 460px;
  border: 0;
  background: transparent;
}

.book-fallback {
  margin-top: 1.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* Contact */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3.5rem;
  align-items: start;
}

.contact-details p {
  margin: 0 0 0.85rem;
}

.contact-details a {
  color: var(--text);
}

.contact-details a:hover {
  color: var(--gold-text);
}

.hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
  color: var(--text-muted);
}

.hours-list li span:last-child {
  flex-shrink: 0;
  white-space: nowrap;
}

.map-frame {
  margin-top: 2rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.35) contrast(1.05);
}

.contact-actions {
  margin-top: 1.75rem;
}

.contact-form {
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.contact-form label {
  display: grid;
  gap: 0.45rem;
}

.contact-form__label {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

.contact-form__req {
  color: var(--gold-text);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  min-height: 3.15rem;
  padding: 0.95rem 1rem;
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--green);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-form input:hover,
.contact-form textarea:hover {
  border-color: rgba(3, 73, 55, 0.45);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(177, 140, 80, 0.22);
}

.contact-form input:invalid:not(:placeholder-shown):not(:focus),
.contact-form textarea:invalid:not(:placeholder-shown):not(:focus) {
  border-color: #8a3a2a;
}

.contact-form textarea {
  min-height: 11rem;
  resize: vertical;
}

.contact-form__hint {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}

.contact-form__submit {
  justify-self: start;
  min-width: 12rem;
  margin-top: 0.25rem;
}

.hp-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form-alert {
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  font-size: 0.95rem;
}

.form-alert--ok {
  border-color: var(--gold-text);
  color: var(--gold-text);
}

.form-alert--err {
  border-color: #b45a5a;
  color: #8b3a3a;
}

/* Footer */

.site-footer {
  padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 2rem;
  background: var(--bg-warm);
  border-top: 1px solid var(--line);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.1fr 1fr;
  gap: 2.5rem;
  max-width: var(--max);
  margin: 0 auto 3rem;
}

.site-footer__logo {
  display: inline-block;
  margin: 0 0 0.85rem;
  line-height: 0;
}

.site-footer__logo img {
  width: auto;
  height: 8rem;
}

.site-footer__tagline,
.site-footer__est {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.site-footer__est {
  margin-top: 0.5rem;
  color: var(--gold-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--fs-meta);
}

.site-footer__explore {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin-top: 1.25rem;
  font-size: 0.95rem;
}

.site-footer__explore a {
  color: var(--text-muted);
}

.site-footer__explore a:hover,
.site-footer__explore a:focus-visible {
  color: var(--gold-text);
}

.site-footer__heading {
  margin: 0 0 1rem;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.site-footer a {
  color: var(--text-muted);
}

.site-footer a:hover {
  color: var(--gold-text);
}

/* Match header Book button: ink on gold (footer `a` rules would otherwise win) */
.site-footer .btn--gold,
.site-nav .btn--gold {
  color: var(--ink);
}

.site-footer .btn--gold:hover,
.site-footer .btn--gold:focus-visible,
.site-nav .btn--gold:hover,
.site-nav .btn--gold:focus-visible {
  color: var(--gold-text);
}

.visit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.visit-list li + li {
  margin-top: 0.7rem;
}

.bf-icon {
  display: block;
  flex-shrink: 0;
  vertical-align: middle;
}

.visit-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem;
  padding: 0.2rem 0;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.55;
}

.visit-link:hover,
.visit-link:focus-visible {
  color: var(--gold-text);
}

.visit-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--gold-text);
  transition: color 0.25s ease;
}

.visit-link__icon .bf-icon {
  width: 100%;
  height: 100%;
}

.visit-link:hover .visit-link__icon,
.visit-link:focus-visible .visit-link__icon {
  color: var(--gold-text);
}

.site-footer .visit-link {
  color: var(--text-muted);
}

.site-footer .visit-link:hover,
.site-footer .visit-link:focus-visible {
  color: var(--gold-text);
}

.social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
}

.social-list li {
  margin: 0;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--green);
  transition: color 0.25s ease, transform 0.3s var(--ease);
}

.social-link:hover,
.social-link:focus-visible {
  color: var(--gold-text);
  transform: translateY(-2px);
}

.social-link__icon {
  display: block;
}

.site-footer__base {
  display: flex;
  justify-content: center;
  max-width: var(--max);
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 0.95rem;
  text-align: center;
}

.site-footer__credits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem 0.75rem;
  margin: 0;
}

.site-footer__copy strong {
  font-weight: 500;
  color: var(--green);
}

.site-footer__sep {
  color: rgba(3, 73, 55, 0.22);
}

.site-footer__crafted a {
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.site-footer__crafted a:hover,
.site-footer__crafted a:focus-visible {
  color: var(--gold-text);
}

.heart-pulse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.15rem;
  color: #e25555;
  vertical-align: -0.12em;
}

.heart-pulse svg {
  display: block;
  transform-origin: center;
  animation: heart-pulse 1.2s ease-in-out infinite;
  will-change: transform;
}

@keyframes heart-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.35);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.28);
  }
  70% {
    transform: scale(1);
  }
}

/* Reveal motion */

.reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0ms);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

.hero .reveal {
  opacity: 0;
  transform: translateY(1.5rem);
}

.hero.is-ready .reveal {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}

/* Responsive */

/* Tablet */
@media (max-width: 1024px) {
  .dish-grid,
  .value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .value-grid .value:last-child {
    grid-column: 1 / -1;
  }

  .quote-slider {
    --quote-per-view: 2;
  }

  .atmos__item {
    aspect-ratio: 3 / 4;
  }
}

@media (max-width: 960px) {
  /* On narrow screens the title sits lower — a mild bottom deepen only. */
  .hero:not(.hero--cinematic) .hero__media::after {
    background:
      linear-gradient(
        180deg,
        rgba(8, 22, 18, 0.18) 0%,
        rgba(8, 22, 18, 0.06) 30%,
        rgba(8, 22, 18, 0.32) 68%,
        rgba(8, 22, 18, 0.48) 100%
      ),
      linear-gradient(
        97deg,
        rgba(8, 22, 18, 0.42) 0%,
        rgba(8, 22, 18, 0.18) 48%,
        rgba(8, 22, 18, 0) 78%
      );
  }

  .hero__strip {
    max-width: none;
  }

  .hero--cinematic {
    height: 780px;
    min-height: 780px;
    padding-bottom: 1.35rem;
  }

  .hero--cinematic .hero__rail {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1rem;
  }

  .hero--cinematic .hero__scroll {
    grid-column: 1 / -1;
    grid-row: 1;
    order: -1;
    justify-self: center;
  }

  .hero--cinematic .hero__phone {
    grid-column: 1;
  }

  .hero--cinematic .hero__rail-end {
    grid-column: 2;
  }

  .split,
  .split--reverse,
  .contact-grid,
  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .split--reverse .split__media {
    order: 0;
  }

  .split__media {
    aspect-ratio: 16 / 11;
    max-height: 24rem;
  }

  .offer-row {
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
    gap: 1.1rem 1.35rem;
  }

  .offer-row__aside {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
  }

  .offer-row__unit {
    display: inline;
    margin-left: 0.5rem;
  }

  .header-actions {
    display: flex;
  }

  .nav-toggle {
    display: block;
    position: relative;
    z-index: 130;
  }

  html.nav-open .header-book {
    opacity: 0;
    pointer-events: none;
  }

  .site-nav {
    position: absolute;
    inset: 0;
    z-index: 110;
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
    padding: 5rem 2rem 2rem;
    background: rgba(249, 236, 227, 0.99);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .site-nav__list {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  .site-nav__list a {
    font-size: 1.15rem;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 1.0625rem; /* 17px — comfortable mobile reading */
  }

  .section__text,
  .section__lead,
  .menu-row__desc,
  .offer-row__teaser,
  .value__text,
  .quote__text {
    font-size: 1.0625rem;
    line-height: 1.7;
  }

  .hero:not(.hero--cinematic) {
    padding-bottom: 2.75rem;
  }

  .hero--cinematic {
    height: 640px;
    min-height: 640px;
  }

  .hero--cinematic .hero__content {
    padding: 1.25rem 0 2.25rem;
  }

  .hero--cinematic .hero__rail {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .hero--cinematic .hero__phone,
  .hero--cinematic .hero__rail-end,
  .hero--cinematic .hero__scroll {
    grid-column: 1;
    justify-self: center;
    align-items: center;
    text-align: center;
  }

  .hero__strip {
    gap: 0.9rem 1.25rem;
    margin-top: 1.75rem;
    padding-top: 1.1rem;
  }

  .hero__fact-sep {
    display: none;
  }

  /* Label and value share a line so three facts stay ~4rem tall */
  .hero__fact {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: baseline;
    gap: 0.65rem;
  }

  .hero__fact-label {
    flex: 0 0 5.5rem;
  }

  .section__aside {
    padding: 1rem 0 0;
    border-left: none;
    border-top: 1px solid var(--line);
    width: 100%;
  }

  .split__media {
    aspect-ratio: 4 / 3;
    max-height: 18rem;
  }

  .offer-row {
    grid-template-columns: 1fr;
  }

  .offer-row__media {
    max-width: 100%;
    aspect-ratio: 16 / 10;
  }

  .menu-row {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    align-items: start;
    padding: 1.5rem 0;
  }

  .menu-row__action {
    width: 100%;
    justify-content: center;
    min-height: 3rem;
  }

  .dish__title {
    margin-top: 0.9rem;
  }

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

  .value-grid .value:last-child {
    grid-column: auto;
  }

  .quote-slider {
    --quote-per-view: 1;
    gap: 0.65rem;
  }

  .quote-slider__btn {
    width: 2.5rem;
    height: 2.5rem;
  }

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

  .atmos__item:last-child {
    display: none;
  }

  .gallery-grid {
    columns: 2 8rem;
  }

  .site-footer__sep {
    display: none;
  }

  .site-footer__credits {
    flex-direction: column;
    gap: 0.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .quote-slider__viewport {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .hero .reveal {
    opacity: 1;
    transform: none;
  }

  .hero__media img {
    transform: none;
  }

  .hero__media video,
  .hero__media canvas {
    display: none !important;
  }

  /* Intro loader: clear immediately (the SVG has its own reduced-motion rule) */
  .preloader {
    --pl-hold: 0s;
  }

  .site-logo.is-bloom .site-logo__mark {
    opacity: 1;
  }

  .site-logo.is-bloom .site-logo__bloom {
    opacity: 0;
  }

  /* Credit heart: keep pulsing (overrides reduce-motion kill-switch) */
  .heart-pulse svg {
    animation-name: heart-pulse !important;
    animation-duration: 1.2s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
  }
}