/* ═══════════════════════════════════════════════════════════
   NARINJ — shared stylesheet for all pages
   Sections: tokens → base → navbar → buttons → hero → layout
   → components → page sections → reviews → forms → footer
   → animations → responsive
   ═══════════════════════════════════════════════════════════ */

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

:root {
  --cream:        #FDFBF7;
  --cream-dark:   #F2EDE3;
  --espresso:     #1A1208;
  --brown-medium: #3D2B1A;
  --brown-light:  #6B5C4E;
  --gold:         #C8A96E;
  --gold-muted:   #B8956A;
  --gold-light:   #E8D5A8;
  --sage:         #8A9E8C;
  --sage-light:   #C8D9CA;
  --orange:       #D5843D; /* true logo color — the only fill in logo.svg */

  /* Feature surfaces: the logo orange itself. Text on these is --espresso
     (6.3:1, passes AA) — NOT cream, which would be 2.8:1 and fail.
     Note the whole brown ramp above is already this same hue (23–33°); those
     tokens are darkened, desaturated versions of --orange, not other browns. */
  --surface-brand:   #D5843D;
  --surface-brand-2: #E39D5C; /* gradient partner, lighter */
  --surface-brand-3: #C06E27; /* gradient partner, deeper */
  --surface-brand-hover: #C0702C; /* pressed/hover state for orange buttons */
  --ease: cubic-bezier(0.32,0.72,0,1);
  /* Stronger deceleration than --ease, for anything exiting or settling: the
     built-in `ease-out` is far too weak to read as deliberate at these sizes. */
  --ease-out: cubic-bezier(0.23,1,0.32,1);

  /* Language-switch curtain. --lang-lag is the offset between the two panels;
     js/i18n-core.js reads neither value but hardcodes matching ones — see the
     LANGUAGE SWITCH TRANSITION block below before changing either. */
  --lang-total: 1100ms;
  --lang-total-reduced: 420ms;
  --lang-lag: 70ms;

  /* Latin type pairing. Neither has Arabic glyphs, so [dir="rtl"] below
     swaps both to an Arabic pairing chosen to match the same roles: El
     Messiri echoes Playfair Display's warm editorial-display character for
     headings, Tajawal echoes Plus Jakarta Sans's clean geometric body text.
     Every font-family declaration in this file uses these variables instead
     of the literal names, so the swap is automatic everywhere. */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
}

[dir="rtl"] {
  /* Not var(--font-display) here — a custom property can't reference itself
     to mean "the old value"; that's a genuine cycle per spec and resolves
     the property to invalid (silently falling back to the browser's default
     serif) everywhere it's used, not just here. Spell out the fallback chain
     instead: Arabic font first, the Latin pairing as fallback for any Latin
     characters/numerals mixed into Arabic copy, generic family last. */
  --font-display: 'El Messiri', 'Playfair Display', serif;
  --font-body: 'Tajawal', 'Plus Jakarta Sans', sans-serif;
}

html { scroll-behavior: smooth; }

h1, h2, h3 { text-wrap: balance; }

::selection { background: var(--gold-light); color: var(--espresso); }

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

body {
  background-color: var(--cream);
  color: var(--espresso);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Grain overlay — fixed, pointer-events-none */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 100;
}

/* ── NAVBAR ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 1.25rem 1rem;
  transition: transform 0.4s var(--ease);
}

nav.nav-hidden { transform: translateY(-110%); }

.nav-pill {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: rgba(253, 251, 247, 0.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(200, 169, 110, 0.22);
  border-radius: 9999px;
  padding-block: 0.5rem;
  padding-inline: 1.5rem 0.5rem;
  box-shadow: 0 4px 32px rgba(26,18,8,0.07), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: box-shadow 0.7s var(--ease);
}

/* Toggled by js/main.js on scroll — previously written as an inline style on
   every scroll event. */
.nav-pill.scrolled {
  box-shadow: 0 8px 40px rgba(26,18,8,0.13), inset 0 1px 0 rgba(255,255,255,0.6);
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo img {
  height: 52px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.nav-links a {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--brown-light);
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.4s var(--ease);
  white-space: nowrap;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: -4px;
  width: 100%;
  height: 1.5px;
  background: var(--gold-muted);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

[dir="rtl"] .nav-links a::after { transform-origin: right; }

.nav-links a:hover { color: var(--espresso); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-links a.active {
  color: var(--espresso);
  border-bottom: 2px solid var(--gold-muted);
  padding-bottom: 2px;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-brand);
  color: var(--espresso);
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--surface-brand-hover);
  color: var(--espresso);
}

@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover { transform: scale(1.03); }
}

/* ── LANGUAGE SWITCH TRANSITION ──
   Switching language is the rarest deliberate action on the site — once a
   visit at most — and also the largest: every string, both font families and
   the page's entire reading direction change at once. That earns a real page
   transition instead of the blink-to-transparent crossfade this used to be,
   which mostly read as the page breaking for a quarter of a second.

   A two-layer curtain sweeps the viewport in the reading direction of the
   language you are switching TO — right-to-left for Arabic, left-to-right for
   English — and passes all the way through rather than retreating the way it
   came. The espresso layer leads, the orange layer lands on top of it and
   holds, carrying the wordmark and the name of the incoming language set in
   that language's own display face. js/i18n-core.js runs the swap while the
   page is fully covered, so the reflow and the font change are never seen;
   the direction of the sweep is what tells you which way the page is about
   to read.

   These are CSS @keyframes, not JS-driven motion, on purpose: applyLang()
   rewrites several hundred nodes in the middle of this and blocks the main
   thread while it does. Composited CSS animations keep running through that;
   a requestAnimationFrame loop would visibly stall at exactly the swap.

   Timeline (--lang-total, each layer offset by its --lang-d x --lang-lag):
     0 -> 38%    cover   panel travels in from the outgoing edge
     38 -> 62%   hold    page fully covered — the swap happens inside here
     62 -> 100%  clear   panel keeps going and exits the far edge
   T_SWAP in js/i18n-core.js is pinned to the 38% mark plus one --lang-lag.
   Change one and you must change the other. */

.lang-curtain {
  position: fixed;
  inset: 0;
  z-index: 500; /* above nav (100), mobile menu (50), WhatsApp button (45) */
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  contain: layout paint;
  /* Pinned LTR so the flex column and the leading-edge pseudo-elements don't
     re-lay-out when <html> flips to dir="rtl" halfway through the animation.
     The panels themselves are safe either way — transforms are physical and
     don't flip with direction — but the mark's internals would. */
  direction: ltr;
}

html.i18n-switching .lang-curtain { visibility: visible; }

.lang-curtain-panel {
  position: absolute;
  inset: 0;
  transform: translate3d(-101%, 0, 0);
  backface-visibility: hidden;
}

.lang-curtain-panel--back {
  --lang-d: 0;
  background: linear-gradient(135deg, var(--brown-medium) 0%, var(--espresso) 100%);
}

.lang-curtain-panel--front {
  --lang-d: 1;
  background: radial-gradient(125% 95% at 50% 0%,
              var(--surface-brand-2) 0%, var(--surface-brand) 45%, var(--surface-brand-3) 100%);
}

/* A gold hairline riding the leading edge of each panel — the detail that
   makes the sweep read as a lit edge passing over the page rather than a
   rectangle sliding across it. Which side leads depends on travel direction. */
.lang-curtain-panel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold-light) 45%, var(--gold-light) 55%, transparent);
}

.lang-curtain[data-sweep="right"] .lang-curtain-panel::after { right: -2px; }
.lang-curtain[data-sweep="left"]  .lang-curtain-panel::after { left: -2px; }

.lang-curtain-mark {
  --lang-d: 1; /* rides with the front panel */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 2rem;
  opacity: 0;
}

/* logo.svg is a single orange fill, which would be invisible on the orange
   panel. Knocking it to black puts it at the same espresso-on-orange contrast
   (7.6:1) the rest of the brand surfaces use. */
.lang-curtain-mark img {
  width: min(190px, 42vw);
  height: auto;
  filter: brightness(0);
  opacity: 0.9;
}

.lang-curtain-rule {
  display: block;
  width: min(150px, 32vw);
  height: 1px;
  background: rgba(26,18,8,0.45);
  transform: scaleX(0);
}

.lang-curtain-word {
  /* line-height:1 keeps the word optically tight under the rule, but it also
     makes the box exactly 1em tall while Playfair's ascender + descender span
     ~1.33em — the glyphs overflow it above and below. clip-path measures from
     the border box, so a flat 0 bottom inset sheared the descender off the
     "g" in "English" (~7px at the largest size). --lang-word-bleed pushes the
     clip rectangle past the box vertically so the wipe can only ever cut
     horizontally, which is all it is meant to do. It is a negative inset, and
     it must clear El Messiri's descenders too — they are deeper than
     Playfair's. Purely a clip change: nothing here affects layout. */
  --lang-word-bleed: -0.45em;
  font-size: clamp(2.2rem, 7vw, 4.25rem);
  font-weight: 700;
  line-height: 1;
  color: var(--espresso);
  clip-path: inset(var(--lang-word-bleed) 100% var(--lang-word-bleed) 0);
}

/* Not var(--font-display): <html>'s dir flips at the swap, mid-hold, which
   would change this face while it is on screen. Pin it to the target language
   instead. Note the Arabic word is never split into per-character spans for a
   stagger — that breaks cursive joining and renders isolated letterforms. */
.lang-curtain[data-target="en"] .lang-curtain-word {
  font-family: 'Playfair Display', serif;
  direction: ltr;
}

.lang-curtain[data-target="ar"] .lang-curtain-word {
  font-family: 'El Messiri', 'Playfair Display', serif;
  direction: rtl;
}

html.i18n-switching .lang-curtain-panel,
html.i18n-switching .lang-curtain-mark,
html.i18n-switching .lang-curtain-mark > * {
  animation-duration: var(--lang-total);
  animation-delay: calc(var(--lang-d, 1) * var(--lang-lag));
  animation-fill-mode: both;
  animation-timing-function: linear; /* per-keyframe curves override this */
}

html.i18n-switching .lang-curtain-mark     { animation-name: lang-mark; }
html.i18n-switching .lang-curtain-mark img { animation-name: lang-mark-logo; }
html.i18n-switching .lang-curtain-rule     { animation-name: lang-mark-rule; }

html.i18n-switching .lang-curtain[data-sweep="right"] .lang-curtain-panel { animation-name: lang-sweep-right; }
html.i18n-switching .lang-curtain[data-sweep="left"]  .lang-curtain-panel { animation-name: lang-sweep-left; }
html.i18n-switching .lang-curtain[data-sweep="right"] .lang-curtain-word  { animation-name: lang-word-ltr; }
html.i18n-switching .lang-curtain[data-sweep="left"]  .lang-curtain-word  { animation-name: lang-word-rtl; }

.lang-curtain[data-sweep="right"] .lang-curtain-rule { transform-origin: left center; }
.lang-curtain[data-sweep="left"]  .lang-curtain-rule { transform-origin: right center; }

/* Strong ease-out on the way in (var(--ease) is the house iOS-drawer curve),
   strong ease-out again on the way out — deliberately never ease-in, which
   would hold the cover on screen at exactly the moment the reader is waiting
   to see the page again. */
@keyframes lang-sweep-right {
  0%        { transform: translate3d(-101%, 0, 0); animation-timing-function: var(--ease); }
  38%, 62%  { transform: translate3d(0, 0, 0);     animation-timing-function: var(--ease-out); }
  100%      { transform: translate3d(101%, 0, 0); }
}

@keyframes lang-sweep-left {
  0%        { transform: translate3d(101%, 0, 0);  animation-timing-function: var(--ease); }
  38%, 62%  { transform: translate3d(0, 0, 0);     animation-timing-function: var(--ease-out); }
  100%      { transform: translate3d(-101%, 0, 0); }
}

@keyframes lang-mark {
  0%, 20%   { opacity: 0; }
  36%, 60%  { opacity: 1; }
  76%, 100% { opacity: 0; }
}

@keyframes lang-mark-logo {
  0%, 20%   { transform: translate3d(0, 18px, 0) scale(0.94);  filter: brightness(0) blur(7px); }
  38%, 60%  { transform: none;                                 filter: brightness(0) blur(0); }
  78%, 100% { transform: translate3d(0, -12px, 0) scale(1.03); filter: brightness(0) blur(6px); }
}

@keyframes lang-mark-rule {
  0%, 24%   { transform: scaleX(0); }
  46%, 62%  { transform: scaleX(1); }
  80%, 100% { transform: scaleX(0); }
}

/* One continuous wipe: revealed from the reading origin, then hidden from
   that same side, so the word reads as being written and then carried off in
   the language's own direction. clip-path is used rather than a per-letter
   stagger precisely because it leaves the Arabic glyph run intact. */
@keyframes lang-word-ltr {
  0%, 26%   { clip-path: inset(var(--lang-word-bleed) 100% var(--lang-word-bleed) 0);    transform: translate3d(0, 12px, 0); }
  50%, 62%  { clip-path: inset(var(--lang-word-bleed) 0 var(--lang-word-bleed) 0);       transform: none; }
  82%, 100% { clip-path: inset(var(--lang-word-bleed) 0 var(--lang-word-bleed) 100%);    transform: translate3d(0, -10px, 0); }
}

@keyframes lang-word-rtl {
  0%, 26%   { clip-path: inset(var(--lang-word-bleed) 0 var(--lang-word-bleed) 100%);    transform: translate3d(0, 12px, 0); }
  50%, 62%  { clip-path: inset(var(--lang-word-bleed) 0 var(--lang-word-bleed) 0);       transform: none; }
  82%, 100% { clip-path: inset(var(--lang-word-bleed) 100% var(--lang-word-bleed) 0);    transform: translate3d(0, -10px, 0); }
}

/* ── Content settling in behind the curtain ──
   Applied by js/i18n-core.js at swap time to the top-level blocks that are
   actually on screen (usually two or three) — not to every translated node.
   Each drifts in from the new reading origin, so the page appears to settle
   in the direction it now reads. --lang-dx and --i are set inline per block
   rather than inherited from <html>: a custom property on an ancestor that
   feeds a descendant's transform invalidates style for the whole subtree. */
/* `backwards`, deliberately not `both`: the fill is needed BEFORE the
   animation (so the block stays hidden through its stagger delay instead of
   flashing in and then re-animating), but must not persist after it. With
   `both`, a block whose animation never completes — hidden tab, a cancelled
   animation, a missed animationend — would be left pinned at opacity:0 and
   the section would silently disappear. With `backwards` the element falls
   back to its normal, fully visible style the moment the animation is over
   or gone, so class cleanup in js/i18n-core.js is hygiene, not correctness. */
.lang-in {
  animation: lang-block-in 620ms var(--ease-out) backwards;
  animation-delay: calc(260ms + var(--i, 0) * 70ms);
}

@keyframes lang-block-in {
  from { opacity: 0; transform: translate3d(var(--lang-dx, 0), 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* Reduced motion: gentler, not absent. The curtain still covers the swap —
   without it you get a flash of retranslated text and a direction flip, which
   is the jarring change this whole section exists to prevent — but it fades
   in place instead of travelling, the espresso layer is dropped, and the
   content behind it doesn't drift. js/i18n-core.js shortens its own timers to
   match --lang-total-reduced. */
@media (prefers-reduced-motion: reduce) {
  html.i18n-switching .lang-curtain-panel,
  html.i18n-switching .lang-curtain-mark,
  html.i18n-switching .lang-curtain-mark > * {
    animation-duration: var(--lang-total-reduced);
    animation-delay: 0ms;
  }

  /* The [data-sweep] is load-bearing, not decoration: the rule this has to
     beat is `html.i18n-switching .lang-curtain[data-sweep="left"]
     .lang-curtain-panel`, at (0,4,1). Without the attribute selector here
     this lands at (0,2,1), loses, and the espresso layer keeps sweeping
     across the screen for a reader who asked for no motion. Every override in
     this block is specificity-matched to its counterpart above for the same
     reason — check the count before editing a selector here. */
  html.i18n-switching .lang-curtain[data-sweep] .lang-curtain-panel--back {
    animation-name: none;
    opacity: 0;
  }

  html.i18n-switching .lang-curtain[data-sweep] .lang-curtain-panel--front,
  html.i18n-switching .lang-curtain-mark {
    animation-name: lang-cover-fade;
  }

  html.i18n-switching .lang-curtain-panel { transform: none; }
  html.i18n-switching .lang-curtain-panel::after { display: none; }

  /* These sit at an invisible start state (scaleX(0) / a fully-clipped word)
     when their keyframes are cancelled, so they have to be reset explicitly. */
  html.i18n-switching .lang-curtain-mark img,
  html.i18n-switching .lang-curtain[data-sweep] .lang-curtain-word,
  html.i18n-switching .lang-curtain-rule {
    animation-name: none;
    transform: none;
    filter: brightness(0);
    clip-path: none;
  }

  html.i18n-switching .lang-curtain-rule { transform: scaleX(1); }

  .lang-in { animation: none; }
}

@keyframes lang-cover-fade {
  0%        { opacity: 0; }
  30%, 70%  { opacity: 1; }
  100%      { opacity: 0; }
}

/* ── LANGUAGE TOGGLE ──
   A small branded segmented control rather than a plain text button: a gold
   pill slides behind whichever language is active, labels set in Playfair
   Display like a two-letter monogram. Fixed at direction:ltr on purpose —
   "EN" always sits first, "ع" always second, regardless of the page's own
   dir — a language switcher shouldn't relocate itself when you use it. */
.lang-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: rgba(26,18,8,0.05);
  border: 1px solid rgba(26,18,8,0.14);
  border-radius: 9999px;
  padding: 0.2rem;
  flex-shrink: 0;
  direction: ltr;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}

.lang-toggle:hover {
  border-color: rgba(200,169,110,0.5);
  background: rgba(200,169,110,0.08);
}

.lang-toggle-thumb {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.9rem;
  height: calc(100% - 0.4rem);
  background: var(--gold-muted);
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(200,169,110,0.4);
  /* A back-ease overshoot rather than the house --ease: the slide should
     feel like a little spring landing on the active side, not a flat glide.
     Shortened from 0.55s so it lands before the curtain covers the navbar at
     ~490ms — the press feedback has to finish on screen, not behind the
     sweep. A transition, not keyframes, because this is the one part of the
     switch a user can retrigger fast: transitions retarget from wherever the
     thumb currently is, keyframes would snap it back to the start. */
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s var(--ease);
  z-index: 0;
}

/* Squash-and-stretch along the axis of travel, added by js/i18n-core.js for
   the length of the slide. Uses the independent `scale` property rather than
   transform so it composes with the translateX above instead of fighting it
   (browsers without it simply get the plain slide). */
.lang-toggle.is-moving .lang-toggle-thumb {
  animation: lang-thumb-squash 0.42s var(--ease-out);
}

@keyframes lang-thumb-squash {
  0%   { scale: 1 1; }
  35%  { scale: 1.32 0.82; }
  70%  { scale: 0.94 1.06; }
  100% { scale: 1 1; }
}

.lang-toggle[data-active="ar"] .lang-toggle-thumb {
  transform: translateX(1.9rem);
}

.lang-toggle:active .lang-toggle-thumb {
  box-shadow: 0 1px 4px rgba(200,169,110,0.5);
}

.lang-toggle-opt {
  position: relative;
  z-index: 1;
  width: 1.9rem;
  background: none;
  border: none;
  padding: 0.35rem 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brown-light);
  cursor: pointer;
  transition: color 0.35s var(--ease), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lang-toggle-opt[data-lang="ar"] { font-size: 0.95rem; }

.lang-toggle[data-active="en"] .lang-toggle-opt[data-lang="en"],
.lang-toggle[data-active="ar"] .lang-toggle-opt[data-lang="ar"] {
  color: var(--espresso);
  transform: scale(1.12);
}

.lang-toggle-opt:active { transform: scale(0.85); }

.mobile-menu .lang-toggle {
  padding: 0.3rem;
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
}

.mobile-menu .lang-toggle-thumb {
  top: 0.3rem;
  left: 0.3rem;
  width: 2.75rem;
  height: calc(100% - 0.6rem);
}

.mobile-menu .lang-toggle[data-active="ar"] .lang-toggle-thumb {
  transform: translateX(2.75rem);
}

.mobile-menu .lang-toggle-opt {
  width: 2.75rem;
  font-size: 1.05rem;
  padding: 0.5rem 0;
}

.mobile-menu .lang-toggle-opt[data-lang="ar"] { font-size: 1.3rem; }

.mobile-menu.open .lang-toggle {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--espresso);
  border-radius: 9999px;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
  transform-origin: center;
}

.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile overlay menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(253, 251, 247, 0.96);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}

.mobile-menu.open { opacity: 1; pointer-events: all; }

.mobile-menu a {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--espresso);
  text-decoration: none;
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.mobile-menu.open a:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:0.1s; }
.mobile-menu.open a:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:0.15s; }
.mobile-menu.open a:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:0.2s; }
.mobile-menu.open a:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:0.25s; }
.mobile-menu.open a:nth-child(5) { opacity:1; transform:translateY(0); transition-delay:0.3s; }
.mobile-menu.open a:nth-child(6) { opacity:1; transform:translateY(0); transition-delay:0.35s; }
.mobile-menu.open a:nth-child(7) { opacity:1; transform:translateY(0); transition-delay:0.4s; color: var(--gold-muted); }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface-brand);
  color: var(--espresso);
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.5s var(--ease), background 0.5s var(--ease), color 0.5s var(--ease);
}

.btn-primary .icon-wrap {
  width: 1.75rem;
  height: 1.75rem;
  background: rgba(26,18,8,0.13);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: transform 0.4s var(--ease);
}

.btn-primary:hover { background: var(--surface-brand-hover); color: var(--espresso); }
.btn-primary:active { transform: scale(0.98); }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: scale(1.02); }
  .btn-primary:hover .icon-wrap { transform: translate(2px, -1px) scale(1.1); }
}

.btn-gold { background: var(--gold-muted); color: var(--espresso); }
.btn-gold .icon-wrap { background: rgba(26,18,8,0.1); }
.btn-gold:hover { background: var(--cream); }

/* Buttons sitting ON an orange surface must invert to dark. A gold button on
   --surface-brand measures 1.05:1 and an orange one is invisible outright;
   espresso against the orange is 6.35:1. */
.band .btn-primary,
.band .btn-gold,
.order-section .form-submit,
.feature-card .btn-primary,
.package-card--featured .btn-primary {
  background: var(--espresso);
  color: var(--cream);
}
.band .btn-primary .icon-wrap,
.band .btn-gold .icon-wrap,
.order-section .form-submit .icon-wrap {
  background: rgba(253,251,247,0.14);
}
.band .btn-primary:hover,
.band .btn-gold:hover,
.order-section .form-submit:hover,
.feature-card .btn-primary:hover,
.package-card--featured .btn-primary:hover {
  background: var(--brown-medium);
  color: var(--cream);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: transparent;
  color: var(--espresso);
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid rgba(26,18,8,0.15);
  cursor: pointer;
  transition: border-color 0.5s var(--ease), background 0.5s var(--ease);
}

.btn-secondary:hover { border-color: rgba(26,18,8,0.4); background: rgba(26,18,8,0.04); }

.btn-light {
  color: var(--cream);
  border-color: rgba(253,251,247,0.35);
}
.btn-light:hover { border-color: var(--cream); background: rgba(253,251,247,0.08); }

/* ── HOME HERO (full-bleed image) ── */
.hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 13rem 2rem 6rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.hero--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(26,18,8,0.55) 0%, rgba(26,18,8,0.35) 45%, rgba(26,18,8,0.65) 100%);
  z-index: 1;
}

.hero--image > *:not(.hero-video-bg) { position: relative; z-index: 2; }

.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero.hero--image h1 { color: var(--cream); }
.hero.hero--image h1 em { color: var(--gold-light); }
.hero.hero--image p { color: rgba(253,251,247,0.85); }
.hero.hero--image .scroll-hint { color: rgba(253,251,247,0.8); }

/* Editorial left-aligned hero (home) — breaks the centered-hero-with-two-buttons pattern */
.hero--left {
  align-items: flex-start;
  justify-content: flex-end;
  text-align: start;
  padding: 11rem max(2rem, calc((100% - 1200px) / 2)) 4.5rem;
}

.hero--left .hero-cta-group { justify-content: flex-start; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.25rem;
  margin-top: 4.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(253,251,247,0.75);
}

.hero-meta .sep { color: var(--gold-light); font-size: 0.6rem; }

.hero::after {
  content: '';
  position: absolute;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(200,169,110,0.13) 0%, transparent 70%);
  pointer-events: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(200,169,110,0.12);
  border: 1px solid rgba(200,169,110,0.3);
  color: var(--gold-muted);
  padding: 0.35rem 1rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.hero--image .eyebrow {
  background: rgba(253,251,247,0.1);
  border-color: rgba(232,213,168,0.4);
  color: var(--gold-light);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 5rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--espresso);
  margin-bottom: 2rem;
  max-width: 900px;
}

.hero h1 em { font-style: italic; color: var(--gold-muted); }

.hero p {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--brown-light);
  max-width: 540px;
  line-height: 1.7;
  margin-bottom: 3rem;
  font-weight: 300;
}

.hero-cta-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--brown-light);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.55;
}

.scroll-line {
  width: 1px;
  height: 3rem;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2s var(--ease) infinite;
}

@keyframes scrollPulse {
  0%,100% { opacity: 0.3; transform: scaleY(0.7); }
  50%      { opacity: 1;   transform: scaleY(1); }
}

/* ── SUBPAGE HERO (banner) ── */
.page-hero {
  padding: 11rem 2rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--espresso);
  margin-bottom: 1.25rem;
}

.page-hero h1 em { font-style: italic; color: var(--gold-muted); }

.page-hero p {
  font-size: 1.05rem;
  color: var(--brown-light);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
  font-weight: 300;
}

/* ── SECTIONS ── */
section {
  /* 4rem, not 6rem: two of these stack at every join, so 6rem put 192px of
     nothing between one block of content and the next. */
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.section-full {
  max-width: 100%;
  padding: 4rem 0;
}

/* 2.5rem, not 4rem: this sits between a heading and the content it labels,
   where a 64px hole read as a break rather than a pairing. */
.section-header { margin-bottom: 2.5rem; }
.section-header--center { text-align: center; }
.section-header--center p { margin-left: auto; margin-right: auto; }

.section-header h1,
.section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--espresso);
  margin-top: 1rem;
}

.section-header h1 em,
.section-header h2 em { font-style: italic; color: var(--gold-muted); }

.section-header p {
  font-size: 1rem;
  color: var(--brown-light);
  font-weight: 300;
  max-width: 480px;
  margin-top: 1rem;
  line-height: 1.7;
}

/* ── MARQUEE TICKER ── */
.marquee {
  overflow: hidden;
  border-top: 1px solid rgba(26,18,8,0.1);
  border-bottom: 1px solid rgba(26,18,8,0.1);
  padding: 1.1rem 0;
  background: var(--cream-dark);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  width: max-content;
  white-space: nowrap;
  animation: marqueeScroll 32s linear infinite;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--brown-medium);
}

.marquee-track .dot { color: var(--gold-muted); font-style: normal; font-size: 0.7rem; }

.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes marqueeScroll {
  to { transform: translateX(-50%); }
}

/* ── GHOST LETTERING (faint oversized word behind a section) ── */
.has-ghost { position: relative; overflow: hidden; }
.has-ghost > *:not(.ghost-word) { position: relative; z-index: 1; }

.ghost-word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(9rem, 24vw, 22rem);
  line-height: 1;
  color: rgba(26,18,8,0.035);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ── ARROW TEXT LINK (tertiary action — not another button pair) ── */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--espresso);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-muted);
  padding-bottom: 0.3rem;
  transition: gap 0.3s var(--ease), border-color 0.3s var(--ease);
}

.link-arrow:hover { gap: 1.1rem; border-color: var(--espresso); }

/* ── PILLARS ROW (editorial, numbered) ── */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  padding: 2.5rem 0;
}

.pillar {
  text-align: start;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(26,18,8,0.14);
}

.pillar-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold-muted);
  display: block;
  margin-bottom: 0.9rem;
}

.pillar h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--espresso);
  margin-bottom: 0.5rem;
}

.pillar p {
  font-size: 0.82rem;
  color: var(--brown-light);
  font-weight: 300;
  line-height: 1.6;
  max-width: 24ch;
}

/* ── SPLIT (alternating image/text) ── */
.split {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 4.5rem;
  align-items: center;
}

.split--reverse { grid-template-columns: 0.92fr 1.08fr; }

.split-img {
  /* "leaf corner": one sharp corner is the house radius signature. Logical
     corners so the sharp corner stays bottom-inline-start and mirrors
     correctly under dir="rtl" instead of staying pinned to physical left. */
  border-start-start-radius: 2rem;
  border-start-end-radius: 2rem;
  border-end-end-radius: 2rem;
  border-end-start-radius: 0.35rem;
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  border: 1px solid rgba(26,18,8,0.08);
  box-shadow: 0 24px 64px rgba(26,18,8,0.08);
  position: relative;
  transform: rotate(-1.2deg);
  transition: transform 0.6s var(--ease);
}

.split--reverse .split-img { transform: rotate(1.2deg); }

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

@media (hover: hover) and (pointer: fine) {
  .split-img:hover { transform: rotate(0deg); }
  .split-img:hover img { transform: scale(1.04); }
}

/* Images reveal with a wipe instead of the generic fade-up */
.split-img.reveal {
  opacity: 0;
  transform: rotate(-1.2deg);
  filter: none;
  clip-path: inset(0 96% 0 0);
  transition: opacity 0.9s var(--ease), clip-path 1.1s var(--ease), transform 0.6s var(--ease);
}

.split--reverse .split-img.reveal { transform: rotate(1.2deg); clip-path: inset(0 0 0 96%); }

.split-img.reveal.visible {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

@media (hover: hover) and (pointer: fine) {
  .split-img.reveal.visible:hover { transform: rotate(0deg); }
}

.split-img--tall { aspect-ratio: 4 / 5; }

.split--reverse .split-img { order: 2; }
.split--reverse .split-content { order: 1; }

.split-content .eyebrow { margin-bottom: 1.25rem; }

.split-content h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}

.split-content h2 em { font-style: italic; color: var(--gold-muted); }

.split-content p {
  color: var(--brown-light);
  font-size: 1rem;
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 1rem;
}

.split-content .btn-primary,
.split-content .btn-secondary { margin-top: 1.25rem; }

/* ── STATS (kept from original about) ── */
.about-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(26,18,8,0.08);
  flex-wrap: wrap;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--espresso);
  line-height: 1;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--brown-light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.25rem;
}

/* ── SIGNATURE DISH CARDS ── */
.dish-grid {
  display: grid;
  /* One row, however many cards the section has: auto-flow column keeps every
     card on the same line instead of wrapping after the third. The responsive
     blocks below switch it back to a wrapping row grid on narrow screens.

     minmax(15rem, 1fr) rather than 1fr: with six cards in the 1136px content
     column a plain 1fr gives 160px each, which cannot hold an image, a heading
     and a paragraph. Cards stop shrinking at 15rem and the row scrolls
     instead — still one row, still every card in it. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: 1.5rem;
  overflow-x: auto;
  /* The scroll container clips its own painting, so leave room for the -4px
     hover lift and the shadow under it. */
  padding: 0.5rem 0.25rem 1.5rem;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-muted) rgba(26,18,8,0.06);
}

.dish-grid > * { scroll-snap-align: start; }

/* Scroll containers with no focusable children are only keyboard-reachable in
   newer engines; the explicit tabindex in the markup covers the rest, and this
   makes the focus visible when it lands. */
.dish-grid:focus-visible { outline: 2px solid var(--gold-muted); outline-offset: 4px; }

.dish-grid::-webkit-scrollbar { height: 6px; }
.dish-grid::-webkit-scrollbar-track { background: rgba(26,18,8,0.06); border-radius: 999px; }
.dish-grid::-webkit-scrollbar-thumb { background: var(--gold-muted); border-radius: 999px; }

.dish-card {
  background: rgba(26,18,8,0.04);
  border: 1px solid rgba(26,18,8,0.07);
  border-radius: calc(1.5rem + 0.375rem);
  padding: 0.375rem;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  display: block;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .dish-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px rgba(26,18,8,0.08);
  }
}

.dish-card-inner {
  background: var(--cream);
  border-start-start-radius: 1.5rem;
  border-start-end-radius: 1.5rem;
  border-end-end-radius: 1.5rem;
  border-end-start-radius: 0.3rem;
  overflow: hidden;
  height: 100%;
}

.dish-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .dish-card:hover img { transform: scale(1.05); }
}

.dish-card-body { padding: 1.5rem 1.75rem 1.75rem; }

.dish-card-body h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--espresso);
  margin-bottom: 0.4rem;
}

.dish-card-body p {
  font-size: 0.85rem;
  color: var(--brown-light);
  font-weight: 300;
  line-height: 1.6;
}

.dish-price {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold-muted);
  margin-top: 0.75rem;
  display: block;
}

/* ── MENU INDEX (catering.html #menus) ──
   The six catering menus as a contents page rather than six cards: full-width
   numbered rows on hairlines, the name set large in the display face, and the
   photograph withheld until the pointer is on the row, where it rides along
   as a floating plate.

   Deliberately its own component and not a .dish-card variant. .dish-card is
   also the signature-dish grid on index.html, the chef page and all 25 dish
   cards on packages.html, and .dish-grid was being asked to hold six cards in
   one 1136px row — 240px each, scrolling sideways. Rows get the width the
   names need, and this section stops looking like the page's other grids.

   Colour comes entirely from the existing tokens: --espresso names, gold
   numbers and rules going --orange on hover. Nothing new was added to :root. */
.menu-index {
  border-top: 1px solid rgba(26,18,8,0.14);
}

/* .reveal animates transform AND filter, and .reveal.visible does not end at
   `none` — it ends at translateY(0) / blur(0). Either one makes the element a
   containing block for its position:fixed descendants, which silently turned
   the floating plate below into a row-relative element positioned by viewport
   coordinates: it landed hundreds of pixels from the cursor. The rows fade in
   on opacity alone instead (opacity makes a stacking context, not a containing
   block), which for a list of hairline rows reads better than the slide anyway.
   Scoped and at (0,3,0) so it beats .reveal.visible wherever that sits. */
.menu-index-row.reveal,
.menu-index-row.reveal.visible {
  transform: none;
  filter: none;
}

.menu-index-row {
  position: relative;
  display: grid;
  /* number | name block | description | arrow. The description column is
     capped rather than 1fr so the name keeps the width it deserves. */
  grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 19rem) 2rem;
  align-items: center;
  column-gap: 1.75rem;
  padding: 1.6rem 1.25rem;
  border-bottom: 1px solid rgba(26,18,8,0.14);
  text-decoration: none;
  color: inherit;
  transition: background 0.5s var(--ease);
}

/* The lit leading edge, mirrored automatically by the logical inset. */
.menu-index-row::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--orange);
  transform: scaleY(0);
  transition: transform 0.5s var(--ease);
}

/* Keyboard focus gets the identical treatment, not just an outline — the row
   is a link and the hover state is what tells you which menu you are on. */
.menu-index-row:hover,
.menu-index-row:focus-visible {
  background: rgba(213,132,61,0.055);
  outline: none;
}

.menu-index-row:hover::before,
.menu-index-row:focus-visible::before { transform: scaleY(1); }

.mi-num {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold-muted);
  transition: color 0.4s var(--ease);
}

.menu-index-row:hover .mi-num,
.menu-index-row:focus-visible .mi-num { color: var(--orange); }

.mi-head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-width: 0;
}

.mi-headtext {
  transition: transform 0.5s var(--ease);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 0;
}

/* ── Inverted hierarchy ──
   The category (CLASSIC, ENERGY, …) is the headline in this row and the dish
   name is the line under it, so the tag is set larger than .mi-name below.

   Two things had to move with the size. The colour: --gold-muted on cream is
   2.64:1, which fails AA at any size and was already doing so at the small
   tag size — as the dominant line it takes --espresso, and gold stays on the
   rule and the row numeral where it is decoration, not content. And the
   tracking: 0.2em is a small-caps value that turns into gaps at 30px, so it
   comes down to 0.1em as the size goes up. The bottom margin the base rule
   carries for card layouts is dropped — the flex gap owns spacing here. */
.menu-index-row .menu-category-tag {
  margin-bottom: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--espresso);
}

.menu-index-row .menu-category-tag::before {
  width: 2rem;
  height: 2px;
  background: var(--gold-muted);
}

.mi-name {
  font-family: var(--font-display);
  /* The supporting line now, under the category above it. Well clear of the
     width at which the longest name ("Corporate, Conferences & Training")
     wraps, so all six rows stay one line each. */
  font-size: clamp(0.95rem, 1.35vw, 1.2rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--brown-light);
  transition: transform 0.5s var(--ease);
}

.menu-index-row:hover .mi-headtext,
.menu-index-row:focus-visible .mi-headtext { transform: translateX(10px); }

[dir="rtl"] .menu-index-row:hover .mi-headtext,
[dir="rtl"] .menu-index-row:focus-visible .mi-headtext { transform: translateX(-10px); }

.mi-text {
  font-size: 0.85rem;
  color: var(--brown-light);
  font-weight: 300;
  line-height: 1.65;
}

.mi-go {
  justify-self: end;
  font-size: 1.05rem;
  color: var(--gold-muted);
  transition: transform 0.5s var(--ease), color 0.5s var(--ease);
}

.menu-index-row:hover .mi-go,
.menu-index-row:focus-visible .mi-go { color: var(--orange); transform: translateX(6px); }

[dir="rtl"] .menu-index-row:hover .mi-go,
[dir="rtl"] .menu-index-row:focus-visible .mi-go { transform: translateX(-6px); }

/* ── VIDEO EXPERIENCE ── */
.video-section {
  position: relative;
  height: 72vh;
  min-height: 440px;
  overflow: hidden;
  margin: 0 2rem;
  border-radius: 3rem;
}

.video-section video,
.video-section .video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,18,8,0.75) 0%, rgba(26,18,8,0.15) 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 3.5rem;
}

.video-overlay .eyebrow {
  background: rgba(253,251,247,0.1);
  border-color: rgba(232,213,168,0.4);
  color: var(--gold-light);
  margin-bottom: 1.25rem;
}

.video-overlay h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--cream);
  max-width: 600px;
}

.video-overlay p {
  color: rgba(253,251,247,0.75);
  font-size: 1rem;
  font-weight: 300;
  margin-top: 1rem;
  max-width: 480px;
}

/* ── CONTACT SHEET (catering.html gallery) ──
   The event photographs as a photographer's proof sheet: a tight grid of
   frames on an espresso ground, each captioned in its own margin with a gold
   frame number, and one frame given double width so the second row does not
   repeat the first.

   This is the page's only dark surface, and deliberately so — the section
   above it is the cream .menu-index and the one below is the orange .band,
   and a third cream block between them made the page read as one long field.

   Contrast on --espresso: cream heading 17.5:1, --gold numerals 8.2:1, the
   0.62-alpha caption 7.4:1. The base gold .eyebrow needs no re-theme here
   (--gold-muted on espresso is 6.6:1), unlike on the orange surfaces. */
.contact-sheet {
  background: var(--espresso);
  border-radius: 3rem;
  margin: 0 2rem;
  padding: 4rem 3rem;
}

.sheet-head {
  max-width: 40rem;
  margin-bottom: 3rem;
}

.sheet-head .eyebrow { margin-bottom: 1.25rem; }

.sheet-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.sheet-head h2 em { font-style: italic; color: var(--gold); }

/* Four columns, seven frames, one of them double-width: 4 + (2 + 1 + 1) fills
   both rows exactly. Change the count of either and the second row breaks. */
.sheet-frames {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem 1rem;
}

.sheet-frame { margin: 0; }

.sheet-frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 0.4rem;
  filter: saturate(0.9) contrast(1.02);
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}

.sheet-frame--wide { grid-column: span 2; }
.sheet-frame--wide img { aspect-ratio: 8 / 3; }

.sheet-frame figcaption {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 0.75rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(253,251,247,0.62);
}

.sheet-num {
  flex: none;
  color: var(--gold);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .sheet-frame:hover img { transform: translateY(-5px); filter: none; }
}

/* ── CTA BAND (full-width, on the logo orange) ── */
.band {
  background: linear-gradient(135deg, var(--surface-brand) 0%, var(--surface-brand-2) 50%, var(--surface-brand-3) 100%);
  border-radius: 3rem;
  margin: 0 2rem;
  padding: 5.5rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.band::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(253,251,247,0.14) 0%, transparent 70%);
  pointer-events: none;
}

.band > * { position: relative; }

/* Text on --surface-brand is --espresso, never cream: cream is 2.82:1 here
   and fails AA, espresso is 6.35:1. */
.band .eyebrow {
  background: rgba(26,18,8,0.10);
  border-color: rgba(26,18,8,0.30);
  color: var(--espresso);
}

.band h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--espresso);
  max-width: 760px;
  margin: 0 auto 1.25rem;
}

.band h2 em { font-style: italic; color: #4A2308; }

.band p {
  /* 0.82 not 0.72: at 0.72 this composites to 4.01:1 over the orange, just
     under AA for 16px body text. 0.82 gives 4.83:1. */
  color: rgba(26,18,8,0.82);
  font-size: 1rem;
  font-weight: 300;
  max-width: 540px;
  margin: 0 auto 2.5rem;
  line-height: 1.8;
}

.band .hero-cta-group { justify-content: center; }

/* ── FAQ (open two-column Q&A, no accordion) ── */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.75rem 4.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.faq-item h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--espresso);
  margin-bottom: 0.5rem;
}

.faq-item h3::before {
  content: '✦';
  color: var(--gold-muted);
  font-size: 0.65rem;
  margin-right: 0.6rem;
  vertical-align: middle;
}

.faq-item p {
  font-size: 0.9rem;
  color: var(--brown-light);
  font-weight: 300;
  line-height: 1.75;
}

/* ── MENU PAGE ── */
.menu-cat-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 auto 1rem;
  max-width: 900px;
  padding: 0 2rem;
}

.menu-cat-nav a {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brown-light);
  text-decoration: none;
  border: 1px solid rgba(26,18,8,0.12);
  border-radius: 9999px;
  padding: 0.5rem 1.1rem;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
  background: var(--cream);
}

.menu-cat-nav a:hover {
  border-color: var(--gold-muted);
  color: var(--espresso);
  background: rgba(200,169,110,0.08);
}

/* ── MENU SPREAD (menus.html) ──
   Each catering menu as a printed spread: photographs on one side, the menu
   typeset as a menu on the other, alternating sides down the page.

   What it replaced: six .dish-grid scrollers holding 25 .dish-card tiles. At
   five and six dishes those rows sat on their 240px floor and scrolled
   sideways, every menu looked exactly like the one above it, and the page
   carried 25 photographs — several of them the same file twice. Two plates
   per menu and the dishes as type fixes all three at once.

   The alternation is done with explicit grid-column assignments rather than
   `order`/`row-reverse`, so it mirrors correctly under [dir="rtl"] without a
   second rule: column 1 is the inline start in both directions. */
.menu-spread {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  align-items: center;
  gap: 4.5rem;
}

.menu-spread--reverse .spread-plates { grid-column: 2; grid-row: 1; }
.menu-spread--reverse .spread-body   { grid-column: 1; grid-row: 1; }

/* ── The plates ──
   A portrait photograph with a square one overlapping its lower corner, both
   cropped hard — two pictures laid on a table rather than a tidy pair. The
   padding on the container is what the inset hangs into; without it the
   absolute child would overlap the text column instead. */
.spread-plates {
  position: relative;
  padding-bottom: 4rem;
  padding-inline-end: 2.5rem;
}

.spread-plate {
  display: block;
  width: 100%;
  object-fit: cover;
}

.spread-plate--main {
  aspect-ratio: 4 / 5;
  border-radius: 1.75rem;
}

.spread-plate--inset {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 1.25rem;
  border: 6px solid var(--cream);
  box-shadow: 0 24px 48px rgba(26,18,8,0.18);
  transform: rotate(3deg);
}

[dir="rtl"] .spread-plate--inset { transform: rotate(-3deg); }

/* ── The menu itself ── */
.spread-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* .menu-category-tag ships with 1.25rem of bottom margin for the card layouts
   it was written for; the flex row owns the spacing here. */
.spread-head .menu-category-tag { margin-bottom: 0; }

.spread-num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(200,169,110,0.38);
}

.spread-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.1vw, 2.7rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--espresso);
  margin-bottom: 0.85rem;
}

.spread-title em { font-style: italic; color: var(--gold-muted); }

.spread-desc {
  font-size: 0.95rem;
  color: var(--brown-light);
  font-weight: 300;
  line-height: 1.7;
  max-width: 46ch;
  margin-bottom: 1.9rem;
}

.spread-dishes {
  list-style: none;
  border-top: 1px solid rgba(26,18,8,0.14);
  margin-bottom: 2.1rem;
}

.spread-dish {
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(26,18,8,0.14);
}

.spread-dish h3 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--espresso);
  margin-bottom: 0.25rem;
}

/* The same six-pointed star the eyebrows use, as the menu's bullet. */
.spread-dish h3::before {
  content: '✦';
  flex: none;
  font-size: 0.62em;
  color: var(--gold-muted);
}

.spread-dish p {
  font-size: 0.85rem;
  color: var(--brown-light);
  font-weight: 300;
  line-height: 1.6;
  padding-inline-start: 1.35rem; /* hangs under the name, clear of the star */
}

/* ── VIP: the page's one orange surface ──
   Every colour here follows the rules for --surface-brand: espresso text
   (6.35:1) and never cream (2.82:1), muted text at alpha 0.82 rather than
   0.7, #4A2308 for the italic accent instead of gold, and the button
   inverted to a dark fill. Gold on this orange is 1.05:1 — invisible — so
   the tag, the star and the numeral all move to espresso alphas. */
/* Two stops, not the three .band uses. The band's deepest stop is
   --surface-brand-3 #C06E27, against which the 0.82-alpha muted text this
   file standardises on measures 3.86:1 — under AA. A band carries one short
   paragraph and gets away with it; this panel carries a standfirst and seven
   dish descriptions, and they sit low in it where that stop lives. Ending the
   gradient at --surface-brand instead makes the worst case on the whole
   surface exactly the colour the contrast rules were written against: 6.35:1
   for the espresso text, 4.86:1 for the muted, 4.69:1 for the accent. */
.menu-spread--featured {
  background: radial-gradient(125% 95% at 50% 0%,
              var(--surface-brand-2) 0%, var(--surface-brand) 100%);
  border-radius: 2.5rem;
  padding: 4rem 3.25rem;
  margin: 2rem auto;
}

.menu-spread--featured .spread-title { color: var(--espresso); }
.menu-spread--featured .spread-title em { color: #4A2308; }
.menu-spread--featured .spread-desc { color: rgba(26,18,8,0.82); }
.menu-spread--featured .spread-num { color: rgba(26,18,8,0.28); }
.menu-spread--featured .menu-category-tag { color: #4A2308; }
.menu-spread--featured .menu-category-tag::before { background: #4A2308; }
.menu-spread--featured .spread-dishes { border-top-color: rgba(26,18,8,0.22); }
.menu-spread--featured .spread-dish { border-bottom-color: rgba(26,18,8,0.22); }
.menu-spread--featured .spread-dish h3 { color: var(--espresso); }
.menu-spread--featured .spread-dish h3::before { color: #4A2308; }
.menu-spread--featured .spread-dish p { color: rgba(26,18,8,0.82); }
.menu-spread--featured .spread-plate--inset { border-color: var(--surface-brand-2); }

.menu-spread--featured .btn-secondary {
  background: var(--espresso);
  color: var(--cream);
  border-color: transparent;
}

.menu-spread--featured .btn-secondary:hover {
  background: var(--brown-medium);
  border-color: transparent;
}

.menu-section {
  background: var(--cream-dark);
  border-radius: 3rem;
  padding: 5rem 3rem;
  margin: 0 2rem;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}

.bento-1 { grid-column: span 5; }
.bento-2 { grid-column: span 7; }
.bento-3 { grid-column: span 4; }
.bento-4 { grid-column: span 4; }
.bento-5 { grid-column: span 4; }
.bento-6 { grid-column: span 12; }
.bento-half { grid-column: span 6; }

/* Double-bezel shell */
.card-shell {
  background: rgba(26,18,8,0.04);
  border: 1px solid rgba(26,18,8,0.07);
  border-radius: calc(1.5rem + 0.375rem);
  padding: 0.375rem;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .card-shell:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px rgba(26,18,8,0.08);
  }
}

.card-inner {
  background: var(--cream);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.8);
  height: 100%;
}

.menu-category-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-muted);
  margin-bottom: 1.25rem;
}

.menu-category-tag::before {
  content: '';
  width: 1.25rem;
  height: 1px;
  background: var(--gold-muted);
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--espresso);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.card-desc {
  font-size: 0.85rem;
  color: var(--brown-light);
  line-height: 1.6;
  font-weight: 300;
  margin-bottom: 1.5rem;
}

.menu-items { display: flex; flex-direction: column; gap: 0; }

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(26,18,8,0.06);
  transition: padding-inline-start 0.3s var(--ease);
}

.menu-item:last-child { border-bottom: none; }
.menu-item:hover { padding-inline-start: 0.5rem; }

.item-name { font-size: 0.9rem; font-weight: 500; color: var(--espresso); }
.item-sub  { font-size: 0.75rem; color: var(--brown-light); font-weight: 300; margin-top: 0.15rem; }

.item-price {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-muted);
  white-space: nowrap;
  padding-inline-start: 1rem;
  flex-shrink: 0;
}

/* Feature banner card */
.feature-card {
  background: var(--surface-brand);
  border-radius: 1.5rem;
  padding: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--espresso);
  gap: 2rem;
  flex-wrap: wrap;
}

.feature-card h3 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.15;
}

.feature-card p {
  font-size: 0.9rem;
  color: rgba(26,18,8,0.82);
  font-weight: 300;
  max-width: 400px;
}

/* ── CATERING ── */
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.package-card .card-inner {
  display: flex;
  flex-direction: column;
  padding: 2.25rem;
}

.package-price {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--espresso);
  margin: 0.75rem 0 0.15rem;
  line-height: 1;
}

.package-price span {
  font-size: 0.85rem;
  font-weight: 400;
  font-family: var(--font-body);
  color: var(--brown-light);
}

.package-list {
  list-style: none;
  margin: 1.5rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex-grow: 1;
}

.package-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.87rem;
  color: var(--brown-light);
  font-weight: 300;
  line-height: 1.55;
}

.package-list li::before {
  content: '✦';
  color: var(--gold-muted);
  font-size: 0.7rem;
  margin-top: 0.25rem;
  flex-shrink: 0;
}

/* Plate lines: a dish photo replaces the bullet */
.package-list li.has-photo {
  align-items: center;
  gap: 0.75rem;
}

.package-list li.has-photo::before {
  content: none;
}

.plate-thumb {
  width: 44px;
  height: 44px;
  border-radius: 0.6rem;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(26,18,8,0.08);
}

.package-card--featured .plate-thumb {
  border-color: rgba(26,18,8,0.22);
}

.package-tag {
  display: inline-block;
  color: var(--gold-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold-muted);
  padding-bottom: 0.3rem;
  margin-bottom: 1rem;
  align-self: flex-start;
}

/* Wide package (spans the grid) — used for the build-your-own card */
.package-card--wide { grid-column: 1 / -1; }

.package-card--wide .card-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 2.75rem;
}

.package-card--wide .package-list { margin: 1.25rem 0 0; }
.package-card--wide .btn-primary { align-self: start; }

/* Featured package: emphasis by color, not height */
.package-card--featured .card-inner { background: var(--surface-brand); }
.package-card--featured .card-title,
.package-card--featured .package-price { color: var(--espresso); }
.package-card--featured .package-price span { color: rgba(26,18,8,0.82); }
.package-card--featured .package-list li { color: rgba(26,18,8,0.82); }
.package-card--featured .package-tag { color: var(--espresso); border-color: var(--espresso); }

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  counter-reset: step;
}

.steps--3 { grid-template-columns: repeat(3, 1fr); max-width: 980px; margin: 0 auto; }

.step { position: relative; }

.step-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(200,169,110,0.35);
  line-height: 1;
  display: block;
  margin-bottom: 1rem;
}

.step h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--espresso);
  margin-bottom: 0.5rem;
}

.step p {
  font-size: 0.85rem;
  color: var(--brown-light);
  font-weight: 300;
  line-height: 1.65;
}

/* Gallery strip */
/* ── ARCADE (catering.html gallery) ──
   Four arched frames rising from a single hairline floor, alternating in
   height so the row reads as a colonnade rather than four boxes. The arch is
   the one architectural motif that reads as Levantine without pinning the
   brand to a particular city, which the copy rules elsewhere forbid.

   Replaced .gallery-strip, whose auto-scroll needed every photograph in the
   markup twice and a js/main.js driver to move. Nothing animates here; the
   rhythm is in the shapes. */
.arcade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: end;
  border-bottom: 1px solid rgba(26,18,8,0.16); /* the floor the arches stand on */
  padding-bottom: 1.75rem;
}

.arch {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.arch-frame {
  overflow: hidden;
  /* Round the top corners hard enough that they meet: a true arch, not a
     rounded rectangle. The bottom stays nearly square so it sits on the floor. */
  border-radius: 999px 999px 0.4rem 0.4rem;
  aspect-ratio: 3 / 4.4;
  border: 1px solid rgba(26,18,8,0.10);
  background: rgba(26,18,8,0.05);
}

/* The alternating height — every second arch is shorter, and because the grid
   is aligned to the end they all still meet the floor line. */
.arch:nth-child(even) .arch-frame { aspect-ratio: 3 / 3.6; }

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

@media (hover: hover) and (pointer: fine) {
  .arch:hover img { transform: scale(1.05); }
}

.arch figcaption {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown-light);
}

.gallery-strip {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.9rem 0;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery-strip::-webkit-scrollbar { display: none; }

.gallery-strip.dragging { cursor: grabbing; scroll-snap-type: none; }

.gallery-track {
  display: flex;
  width: max-content;
  gap: 1rem;
}

.gallery-strip img {
  width: 340px;
  height: 240px;
  flex-shrink: 0;
  object-fit: cover;
  border-start-start-radius: 1.25rem;
  border-start-end-radius: 1.25rem;
  border-end-end-radius: 1.25rem;
  border-end-start-radius: 0.3rem;
  display: block;
  border: 1px solid rgba(26,18,8,0.08);
  transition: transform 0.5s var(--ease);
}

/* alternate tilt across the strip */
.gallery-strip img:nth-child(odd) { transform: rotate(-0.8deg); }
.gallery-strip img:nth-child(even) { transform: rotate(0.8deg) translateY(0.75rem); }

@media (hover: hover) and (pointer: fine) {
  .gallery-strip img:hover { transform: scale(1.02); }
  .gallery-strip img:nth-child(odd):hover { transform: rotate(0deg) scale(1.02); }
  .gallery-strip img:nth-child(even):hover { transform: rotate(0deg) translateY(0.75rem) scale(1.02); }
}

/* ── GALLERY MOSAIC (home page) ──
   Full-bleed, zero-gap tiling. The section heading and standfirst are tiles
   inside the grid instead of a header above it, so the 12x6 field has to stay
   exactly covered: every child is placed explicitly by .m1-.m10 below and there
   is no auto-placement to catch a stray tile. Adding or reordering one means
   editing those spans.

   The catering page still uses the older .gallery-strip scroller — that
   component and its js/main.js driver are deliberately left alone. */
.mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(84px, 8.6vw, 132px);
  gap: 0;
}

.mosaic-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--cream-dark);
}

.mosaic-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}

.mosaic-caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  margin: 0;
  padding: 0.8rem 1rem;
  background: rgba(26,18,8,0.88);
  color: var(--cream);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transform: translateY(0);
  transition: transform 0.45s var(--ease);
}

/* Hidden-until-hover is gated on hover capability, not on width: a large
   touchscreen has no way to reveal a caption, so it keeps them open. 101%
   rather than 100% because a fractional row height can otherwise leave a
   hairline of the caption showing. */
@media (hover: hover) and (pointer: fine) {
  .mosaic-caption { transform: translateY(101%); }
  .mosaic-tile:hover img { transform: scale(1.06); }
  .mosaic-tile:hover .mosaic-caption { transform: translateY(0); }
}

/* Orange panels cut into the photo field. Per the surface rules: text is
   --espresso (cream on #D5843D is 2.82:1 and fails AA) and muted copy needs
   alpha >= 0.78. */
.mosaic-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 3rem);
  background: linear-gradient(135deg,
              var(--surface-brand-2) 0%, var(--surface-brand) 45%, var(--surface-brand-3) 100%);
  color: var(--espresso);
}

.mosaic-panel .eyebrow {
  align-self: flex-start;
  margin-bottom: 1rem;
  background: rgba(26,18,8,0.1);
  border-color: rgba(26,18,8,0.28);
  color: var(--espresso);
}

.mosaic-panel h2 {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 0.95;
  color: var(--espresso);
}

/* The accent word is cut out of the orange rather than filled — the one
   deliberate surprise in the layout. Solid #4A2308 (4.69:1 on the orange) is
   the fallback wherever text-stroke is unavailable. */
.mosaic-panel h2 em {
  font-style: italic;
  color: #4A2308;
}

@supports (-webkit-text-stroke: 1px currentColor) {
  .mosaic-panel h2 em {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--espresso);
  }
}

.mosaic-panel--note p {
  margin: 0;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  line-height: 1.55;
  color: rgba(26,18,8,0.82); /* 4.86:1 on the orange; 0.7 would be 3.85:1 */
}

/* 12 columns x 6 rows, fully tiled. */
.mosaic > .m1  { grid-column: 1 / 6;   grid-row: 1 / 3; }
.mosaic > .m2  { grid-column: 6 / 10;  grid-row: 1 / 3; }
.mosaic > .m3  { grid-column: 10 / 13; grid-row: 1 / 3; }
.mosaic > .m4  { grid-column: 1 / 4;   grid-row: 3 / 5; }
.mosaic > .m5  { grid-column: 4 / 7;   grid-row: 3 / 5; }
.mosaic > .m6  { grid-column: 7 / 10;  grid-row: 3 / 5; }
.mosaic > .m7  { grid-column: 10 / 13; grid-row: 3 / 5; }
.mosaic > .m8  { grid-column: 1 / 5;   grid-row: 5 / 7; }
.mosaic > .m9  { grid-column: 5 / 9;   grid-row: 5 / 7; }
.mosaic > .m10 { grid-column: 9 / 13;  grid-row: 5 / 7; }

/* Tablet: 6 columns, panels take a full band of their own. */
@media (max-width: 1024px) {
  .mosaic { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(90px, 13vw, 150px); }
  .mosaic > .m1, .mosaic > .m2, .mosaic > .m3, .mosaic > .m4, .mosaic > .m5,
  .mosaic > .m6, .mosaic > .m7, .mosaic > .m8, .mosaic > .m9, .mosaic > .m10 {
    grid-column: auto / span 3;
    grid-row: auto / span 2;
  }
  /* m4 and m10 are the two tiles a full-width panel would otherwise strand on
     a half-empty row, so they take the whole band instead of leaving a hole. */
  .mosaic > .mosaic-panel, .mosaic > .m4, .mosaic > .m10 { grid-column: 1 / -1; }
}

/* Phone: two up. 768px to match the rest of the stylesheet — a 640 breakpoint
   here would leave a band where the page has collapsed to one column but the
   mosaic is still on the tablet row height. */
@media (max-width: 768px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(96px, 28vw, 150px); }
  .mosaic > .m1, .mosaic > .m2, .mosaic > .m3, .mosaic > .m4, .mosaic > .m5,
  .mosaic > .m6, .mosaic > .m7, .mosaic > .m8, .mosaic > .m9, .mosaic > .m10 {
    grid-column: auto / span 1;
    grid-row: auto / span 2;
  }
  .mosaic > .mosaic-panel, .mosaic > .m4, .mosaic > .m10 { grid-column: 1 / -1; }
  .mosaic-caption { font-size: 0.55rem; padding: 0.55rem 0.7rem; }
}

/* ── CLIENTS / TRUST GRID (dark, sits inside .band) ── */
.client-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.75rem;
  text-align: start;
}

.client-card {
  background: rgba(253,251,247,0.05);
  border: 1px solid rgba(232,213,168,0.18);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
}

.client-card .client-icon {
  font-size: 1.4rem;
  color: var(--gold-light);
  display: block;
  margin-bottom: 0.85rem;
}

.client-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 0.4rem;
}

.client-card p {
  font-size: 0.82rem;
  color: rgba(253,251,247,0.55);
  font-weight: 300;
  line-height: 1.65;
  margin: 0;
}

/* ── Inside the orange band, light-on-dark variants must invert ──
   Scoped to .band on purpose: .btn-light and .client-card are also used on
   .feature-band, which is still a dark photographic surface where the
   original light treatment is correct. */
.band .btn-light {
  color: var(--espresso);
  border-color: rgba(26,18,8,0.4);
}
.band .btn-light:hover {
  border-color: var(--espresso);
  background: rgba(26,18,8,0.07);
}
.band .client-card .client-icon { color: #4A2308; }
.band .client-card h3 { color: var(--espresso); }
.band .client-card p { color: rgba(26,18,8,0.8); }

/* ── Form controls on the orange reservation/catering panel ──
   The base .form-control / .custom-select rules are built for a dark surface
   and still serve the footer newsletter, so they are re-themed here rather
   than changed globally. */
.order-section .form-group label { color: rgba(26,18,8,0.78); }
.order-section .form-control,
.order-section .custom-select-trigger {
  background: rgba(26,18,8,0.07);
  border-color: rgba(26,18,8,0.20);
  color: var(--espresso);
}
.order-section .form-control::placeholder { color: rgba(26,18,8,0.5); }
.order-section .form-control:focus,
.order-section .custom-select-trigger:hover,
.order-section .custom-select.open .custom-select-trigger {
  border-color: rgba(26,18,8,0.5);
  background: rgba(26,18,8,0.11);
  box-shadow: 0 0 0 3px rgba(26,18,8,0.08);
}
.order-section .custom-select-trigger[data-empty="true"] .custom-select-value { color: rgba(26,18,8,0.82); }
.order-section .custom-select-arrow { color: var(--espresso); }
.order-section .perk-dot { background: var(--espresso); }
.order-section h2 em { color: #4A2308; }

/* ── CATERING INQUIRY: MENU / DISH PICKER ──
   Lives inside .order-section, which is the orange brand surface, so every
   colour here is --espresso or an espresso alpha >= 0.78 (cream would be
   2.82:1 and fail AA). js/catering-inquiry.js toggles the [hidden] attribute
   on .dish-scope and .dish-picker; both carry an explicit display:none so a
   later display rule can't out-specify the attribute. */
.dish-scope[hidden],
.dish-picker[hidden] { display: none; }

.check-line {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  /* .form-group label is an uppercase micro-label; these are sentence-case
     option rows and must not inherit that treatment. */
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--espresso);
  margin-bottom: 0;
  padding: 0.3rem 0;
  line-height: 1.4;
}

.check-line input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.12rem 0 0;
  accent-color: var(--espresso);
  cursor: pointer;
}

.check-hint {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(26,18,8,0.82); /* 4.86:1 on the orange */
}

.dish-picker {
  border: 1px solid rgba(26,18,8,0.20);
  border-radius: 0.75rem;
  background: rgba(26,18,8,0.05);
  padding: 1rem 1.1rem 1.1rem;
  margin: 0 0 1.25rem;
  min-inline-size: 0; /* fieldsets refuse to shrink inside grid/flex without this */
}

.dish-picker legend {
  padding: 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(26,18,8,0.78);
}

.dish-group + .dish-group { margin-top: 1rem; }

.dish-group-title {
  margin: 0 0 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(26,18,8,0.82);
  border-bottom: 1px solid rgba(26,18,8,0.14);
  padding-bottom: 0.3rem;
}

.dish-picker-empty { color: rgba(26,18,8,0.82); }

.form-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
  .form-submit:disabled:hover { transform: none; }
}

/* ── CHEF PAGE ── */
.chef-hero {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4.5rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 11rem 2rem 5rem;
}

.chef-portrait {
  border-start-start-radius: 2rem;
  border-start-end-radius: 2rem;
  border-end-end-radius: 2rem;
  border-end-start-radius: 0.35rem;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(26,18,8,0.08);
  box-shadow: 0 24px 64px rgba(26,18,8,0.1);
  transform: rotate(-1.5deg);
}

/* keep the tilt through the reveal animation (generic .reveal would reset it) */
.chef-portrait.reveal { transform: translateY(2.5rem) rotate(-1.5deg); }
.chef-portrait.reveal.visible { transform: translateY(0) rotate(-1.5deg); }

.chef-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* The portrait is 900x1600 and the frame is 4/5, so cover keeps 70% of the
     height and throws away 475px. Centred, that takes 238px off the top and
     clips the top of her head — she stands high in the frame. Biasing to 18%
     leaves ~85px above her hair and takes the rest off the bottom tray, which
     has nothing to lose. Re-check this number if the photograph is replaced:
     it is tuned to this crop, not a general rule. */
  object-position: 50% 18%;
}

.chef-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--espresso);
  margin-bottom: 1.5rem;
}

.chef-hero h1 em { font-style: italic; color: var(--gold-muted); }

.chef-hero > div > p {
  color: var(--brown-light);
  font-size: 1rem;
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 1rem;
}

/* Timeline */
.timeline {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  padding-inline-start: 2.5rem;
}

.timeline::before {
  content: '';
  position: absolute;
  inset-inline-start: 0.4rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(to bottom, var(--gold), rgba(200,169,110,0.15));
}

.tl-item { position: relative; padding-bottom: 3rem; }
.tl-item:last-child { padding-bottom: 0; }

.tl-item::before {
  content: '';
  position: absolute;
  inset-inline-start: -2.5rem;
  top: 0.55rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 9999px;
  background: var(--cream);
  border: 2px solid var(--gold-muted);
}

.tl-year {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--gold-muted);
  line-height: 1;
  display: block;
  margin-bottom: 0.4rem;
}

.tl-item h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--espresso);
  margin-bottom: 0.4rem;
}

.tl-item p {
  font-size: 0.9rem;
  color: var(--brown-light);
  font-weight: 300;
  line-height: 1.75;
  max-width: 560px;
}

/* Pull quote */
.quote-block {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  padding: 2rem 1rem;
}

.quote-block::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: 8rem;
  color: rgba(200,169,110,0.25);
  position: absolute;
  top: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
  pointer-events: none;
}

.quote-block blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  color: var(--espresso);
  letter-spacing: -0.01em;
}

.quote-block cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-muted);
}

/* ── REVIEWS ── */
.stars {
  color: var(--gold-muted);
  letter-spacing: 0.15em;
  font-size: 1rem;
  white-space: nowrap;
}

.stars .off { color: rgba(26,18,8,0.15); }

.rating-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4rem;
  align-items: center;
  background: var(--cream-dark);
  border-radius: 2rem;
  padding: 3rem 3.5rem;
  border: 1px solid rgba(26,18,8,0.06);
}

.rating-big {
  text-align: center;
  min-width: 180px;
}

.rating-big .avg {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 900;
  color: var(--espresso);
  line-height: 1;
  display: block;
}

.rating-big .stars { font-size: 1.2rem; display: block; margin: 0.75rem 0 0.4rem; }

.rating-big .count {
  font-size: 0.85rem;
  color: var(--brown-light);
  font-weight: 300;
}

.rating-bars { display: flex; flex-direction: column; gap: 0.6rem; }

.bar-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr 2.5rem;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--brown-light);
}

.bar-row .bar-label { font-weight: 600; color: var(--espresso); white-space: nowrap; }

.bar-track {
  height: 8px;
  background: rgba(26,18,8,0.08);
  border-radius: 9999px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--gold-muted);
  border-radius: 9999px;
  width: 0;
  transition: width 1s var(--ease);
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Loading + "no reviews yet" state — the grid used to render as blank nothing. */
.reviews-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--brown-light);
  font-size: 0.95rem;
  font-style: italic;
}

/* Only filled in when the headline count covers more reviews than the bars do. */
.bars-note {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--brown-light);
  line-height: 1.4;
}

.review-card .card-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem;
}

.review-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.review-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--espresso);
}

.review-date {
  font-size: 0.72rem;
  color: var(--brown-light);
  font-weight: 300;
  margin-top: 0.15rem;
}

.review-text {
  font-size: 0.88rem;
  color: var(--brown-light);
  font-weight: 300;
  line-height: 1.7;
}

.badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-google { background: rgba(138,158,140,0.18); color: #5C7460; }
.badge-site   { background: rgba(200,169,110,0.18); color: var(--gold-muted); }

/* Star picker (review form) */
.star-picker { display: flex; gap: 0.35rem; }

.star-picker button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.9rem;
  line-height: 1;
  color: rgba(26,18,8,0.15);
  transition: color 0.2s ease, transform 0.2s ease;
  padding: 0;
}

.star-picker button.lit { color: var(--gold-muted); }

@media (hover: hover) and (pointer: fine) {
  .star-picker button:hover { transform: scale(1.15); }
}

/* Shared entrance for every status swap (notices, form errors/fallbacks,
   success messages, newsletter result) — replaces the instant display:none/
   block cut so a booking confirmation reads as a confirmation, not a glitch. */
@keyframes stateIn {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Notice banners */
.notice {
  display: none;
  background: rgba(200,169,110,0.1);
  border: 1px solid rgba(200,169,110,0.35);
  color: var(--brown-medium);
  border-radius: 1rem;
  padding: 1.1rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.notice.show { display: block; animation: stateIn 0.3s var(--ease-out); }

.notice a { color: var(--gold-muted); font-weight: 600; text-decoration: none; }

/* ── FORMS (dark, on espresso panels) ── */
.order-section {
  background: var(--surface-brand);
  border-radius: 3rem;
  padding: 5rem 4rem;
  margin: 0 2rem;
  position: relative;
  overflow: hidden;
}

.order-section::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(200,169,110,0.09) 0%, transparent 70%);
  pointer-events: none;
}

.order-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 5rem;
  align-items: start;
}

.order-info h2 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--espresso);
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.order-info p {
  color: rgba(26,18,8,0.8);
  font-size: 0.95rem;
  line-height: 1.8;
  font-weight: 300;
}

.order-perks {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.perk {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: rgba(26,18,8,0.8);
  font-weight: 300;
}

.perk-dot {
  width: 6px; height: 6px;
  background: var(--gold-muted);
  border-radius: 9999px;
  flex-shrink: 0;
}

/* Double-bezel form wrapper */
.form-wrap {
  background: rgba(253,251,247,0.05);
  border: 1px solid rgba(253,251,247,0.1);
  border-radius: 2rem;
  padding: 0.5rem;
}

.form-inner {
  background: rgba(253,251,247,0.04);
  border-radius: calc(2rem - 0.5rem);
  padding: 2.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group { margin-bottom: 1.25rem; }

.form-group label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(253,251,247,0.45);
  margin-bottom: 0.5rem;
}

.form-control {
  width: 100%;
  background: rgba(253,251,247,0.06);
  border: 1px solid rgba(253,251,247,0.1);
  border-radius: 0.75rem;
  padding: 0.875rem 1.1rem;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  outline: none;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.form-control::placeholder { color: rgba(253,251,247,0.22); }

/* Native <option> popups are OS-rendered on a light background — force readable dark-on-cream text regardless of the select's own (light-on-dark) styling */
.form-control option {
  color: var(--espresso);
  background: var(--cream);
}

.form-control:focus {
  border-color: rgba(200,169,110,0.5);
  background: rgba(253,251,247,0.09);
  box-shadow: 0 0 0 3px rgba(200,169,110,0.1);
}

textarea.form-control { resize: none; }

/* ── CUSTOM SELECT (branded dropdown, replaces the native popup via JS) ── */
.custom-select {
  position: relative;
}

/* Once JS enhances it, the real <select> stays in the DOM (for form
   submission + native validation) but sits invisibly under the trigger */
.custom-select.js-enhanced select.form-control {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.custom-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(253,251,247,0.06);
  border: 1px solid rgba(253,251,247,0.1);
  border-radius: 0.75rem;
  padding: 0.875rem 1.1rem;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.custom-select-trigger[data-empty="true"] .custom-select-value {
  color: rgba(253,251,247,0.35);
}

.custom-select-trigger:hover,
.custom-select.open .custom-select-trigger {
  border-color: rgba(200,169,110,0.5);
  background: rgba(253,251,247,0.09);
}

.custom-select.open .custom-select-trigger {
  box-shadow: 0 0 0 3px rgba(200,169,110,0.1);
}

.custom-select-arrow {
  flex-shrink: 0;
  color: var(--gold-muted);
  font-size: 0.65rem;
  transition: transform 0.35s var(--ease);
}

.custom-select.open .custom-select-arrow { transform: rotate(180deg); }

.custom-select-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--cream);
  border: 1px solid rgba(200,169,110,0.3);
  border-radius: 0.9rem;
  box-shadow: 0 20px 45px rgba(26,18,8,0.35);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.custom-select.open .custom-select-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.custom-select-panel li {
  padding: 0.7rem 0.9rem;
  border-radius: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.87rem;
  font-weight: 400;
  color: var(--espresso);
  cursor: pointer;
  overflow-wrap: break-word;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.custom-select-panel li:hover,
.custom-select-panel li.is-highlighted {
  background: rgba(200,169,110,0.15);
}

.custom-select-panel li[aria-selected="true"] {
  color: var(--gold-muted);
  font-weight: 700;
}

.form-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--gold-muted);
  color: var(--espresso);
  padding: 1rem;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border: none;
  cursor: pointer;
  transition: background 0.5s var(--ease), transform 0.5s var(--ease);
  margin-top: 0.5rem;
}

.form-submit .icon-wrap {
  width: 1.75rem; height: 1.75rem;
  background: rgba(26,18,8,0.12);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--ease);
}

.form-submit:hover { background: var(--cream); }
.form-submit:active { transform: scale(0.98); }

@media (hover: hover) and (pointer: fine) {
  .form-submit:hover { transform: scale(1.01); }
  .form-submit:hover .icon-wrap { transform: translate(2px, -1px) scale(1.1); }
}

.success-msg {
  display: none;
  text-align: center;
  padding: 2rem;
  color: var(--gold-light);
  font-size: 1rem;
  line-height: 1.7;
}

.success-msg.show { display: block; animation: stateIn 0.3s var(--ease-out); }

/* The success panel also renders on the orange order section, where
   --gold-light is 2.02:1. */
.order-section .success-msg { color: var(--espresso); }
.order-section .success-msg span { color: rgba(26,18,8,0.85); }

/* ── LIGHT FORM VARIANT (cream background pages) ── */
.form-light .form-wrap {
  background: rgba(26,18,8,0.04);
  border-color: rgba(26,18,8,0.08);
}

.form-light .form-inner { background: var(--cream); }

.form-light .form-group label { color: var(--brown-light); }

.form-light .form-control {
  background: rgba(26,18,8,0.03);
  border-color: rgba(26,18,8,0.12);
  color: var(--espresso);
}

.form-light .form-control::placeholder { color: rgba(26,18,8,0.3); }

.form-light .form-control:focus {
  border-color: var(--gold-muted);
  background: var(--cream);
}

.form-light .success-msg { color: var(--gold-muted); }

.form-light .custom-select-trigger {
  background: rgba(26,18,8,0.03);
  border-color: rgba(26,18,8,0.12);
  color: var(--espresso);
}

.form-light .custom-select-trigger[data-empty="true"] .custom-select-value {
  color: rgba(26,18,8,0.3);
}

.form-light .custom-select-trigger:hover,
.form-light .custom-select.open .custom-select-trigger {
  border-color: var(--gold-muted);
  background: var(--cream);
}

.form-error {
  display: none;
  color: #A4552F;
  font-size: 0.82rem;
  margin-top: 0.75rem;
  font-weight: 500;
}

.form-error.show { display: block; animation: stateIn 0.3s var(--ease-out); }

/* Shown when an inquiry could not be delivered — carries the mailto: fallback,
   so it must read as actionable rather than as a bare error. */
.form-fallback {
  display: none;
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(164, 85, 47, 0.3);
  border-radius: 10px;
  background: rgba(164, 85, 47, 0.06);
  color: #A4552F;
  font-size: 0.85rem;
  line-height: 1.55;
}
.form-fallback.show { display: block; animation: stateIn 0.3s var(--ease-out); }
.form-fallback a {
  color: #A4552F;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── INFO BLOCKS ── */
.info-simple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(26,18,8,0.1);
  margin-top: 3rem;
}

.info-block {
  padding-block: 2.5rem;
  padding-inline: 0 2.5rem;
  border-inline-end: 1px solid rgba(26,18,8,0.08);
}

.info-block:not(:first-child) { padding-inline-start: 2.5rem; }
.info-block:last-child { border-inline-end: none; padding-inline-end: 0; }

.info-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-muted);
  margin-bottom: 1rem;
}

.info-text {
  font-size: 0.875rem;
  color: var(--brown-light);
  line-height: 1.85;
  font-weight: 300;
}

.info-text a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.info-text a:hover { color: var(--espresso); }

/* Map embed */
.map-frame {
  width: 100%;
  height: 420px;
  border: 1px solid rgba(26,18,8,0.1);
  border-radius: 2rem;
  overflow: hidden;
  filter: sepia(0.25) saturate(0.85);
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── EDITORIAL IMAGE CARDS (kept) ── */
.img-editorial {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.img-tag {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brown-light);
  opacity: 0.6;
  margin-bottom: 0.5rem;
}

.img-caption {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--espresso);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ── WHATSAPP ── */
.whatsapp-btn {
  position: fixed;
  bottom: 2rem; right: 2rem;
  z-index: 45;
  width: 3.5rem; height: 3.5rem;
  background: #25D366;
  color: white;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 32px rgba(37,211,102,0.35), 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.whatsapp-btn:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .whatsapp-btn:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 16px 40px rgba(37,211,102,0.45); }
}

.whatsapp-tooltip {
  position: absolute;
  right: 4.5rem;
  background: var(--surface-brand);
  color: var(--espresso);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp-btn:hover .whatsapp-tooltip { opacity: 1; transform: translateX(0); }
}

/* ── FOOTER ── */
footer {
  background: var(--surface-brand);
  color: var(--espresso);
  padding: 5rem 2rem 3rem;
  margin-top: 5rem;
}

.footer-inner { max-width: 1200px; margin: 0 auto; }

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(253,251,247,0.08);
}

.footer-brand p {
  color: rgba(26,18,8,0.82);
  font-size: 0.875rem;
  line-height: 1.8;
  font-weight: 300;
  max-width: 320px;
}

.footer-col h4 {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #4A2308;
  margin-bottom: 1.5rem;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-col ul li,
.footer-col ul li a {
  font-size: 0.875rem;
  color: rgba(26,18,8,0.82);
  text-decoration: none;
  font-weight: 300;
  transition: color 0.3s ease;
}

.footer-col ul li a:hover { color: var(--espresso); }

/* Newsletter */
.newsletter { margin-top: 1.75rem; }

.newsletter p {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4A2308;
  font-weight: 600;
  margin-bottom: 0.75rem;
  max-width: none;
}

.newsletter-row {
  display: flex;
  gap: 0.5rem;
  max-width: 340px;
}

.newsletter input {
  flex: 1;
  background: rgba(26,18,8,0.07);
  border: 1px solid rgba(26,18,8,0.20);
  border-radius: 9999px;
  padding: 0.7rem 1.1rem;
  color: var(--espresso);
  font-family: var(--font-body);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.3s ease;
}

.newsletter input::placeholder { color: rgba(26,18,8,0.78); }
.newsletter input:focus { border-color: rgba(200,169,110,0.5); }

.newsletter button {
  background: var(--espresso); color: var(--cream);
  border: none;
  border-radius: 9999px;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease;
  white-space: nowrap;
}

.newsletter button:hover { background: var(--brown-medium); }

.newsletter-done {
  display: none;
  font-size: 0.85rem;
  color: var(--espresso);
  font-weight: 300;
}

.newsletter-done.show { display: block; animation: stateIn 0.3s var(--ease-out); }

/* The subscribe POST failed — never claim the address was stored. */
.newsletter-failed {
  display: none;
  font-size: 0.85rem;
  /* dark red-brown: the footer is orange now, a light salmon washed out on it */
  color: #521204;
  font-weight: 300;
}

.newsletter-failed.show { display: block; animation: stateIn 0.3s var(--ease-out); }
.newsletter-failed a { color: #521204; text-decoration: underline; }

/* Socials */
.socials {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.socials a {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 9999px;
  border: 1px solid rgba(26,18,8,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(253,251,247,0.6);
  text-decoration: none;
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.socials a:hover {
  border-color: #4A2308;
  color: var(--espresso);
}

@media (hover: hover) and (pointer: fine) {
  .socials a:hover { transform: translateY(-2px); }
}

.socials svg { width: 1rem; height: 1rem; fill: currentColor; }

.footer-bottom {
  padding-top: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom p { font-size: 0.8rem; color: rgba(26,18,8,0.78); font-weight: 300; }

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(2.5rem);
  filter: blur(4px);
  transition:
    opacity   0.9s var(--ease),
    transform 0.9s var(--ease),
    filter    0.9s var(--ease);
}

.reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .split-img.reveal {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
    transition: none;
  }
  .mosaic-tile img, .mosaic-caption { transition: none; }
  .marquee-track { animation: none; }
  .scroll-line { animation: none; }
  .hero-video-bg { display: none; }

  .notice.show,
  .form-error.show,
  .form-fallback.show,
  .success-msg.show,
  .newsletter-done.show,
  .newsletter-failed.show {
    animation: none;
  }
}

/* ── STAGGERED GRIDS (break the equal-columns rhythm on desktop) ── */
@media (min-width: 1025px) {
  .review-grid { padding-bottom: 2rem; }

  .review-grid > *:nth-child(3n+2) { transform: translateY(1.75rem); }
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .review-grid > *:nth-child(3n+2):hover { transform: translateY(calc(1.75rem - 4px)); }
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .bento-1, .bento-2 { grid-column: span 6; }
  .bento-3, .bento-4, .bento-5 { grid-column: span 6; }
  .bento-6 { grid-column: span 12; }

  .nav-links { gap: 1rem; }
  .nav-links a { font-size: 0.72rem; }

  .pillars { grid-template-columns: repeat(2, 1fr); }
  .dish-grid { grid-auto-flow: row; overflow-x: visible; padding: 0; scroll-snap-type: none; }
  .dish-grid, .package-grid, .review-grid { grid-template-columns: repeat(2, 1fr); }

  .arcade { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

  /* Three-card sections that must not break: 2-up leaves a lone orphan on a
     second row. Keeps the base scroller behaviour instead. */
  /* Two columns: the wide frame spans both and becomes a full-width band,
     which is the only way it stays the odd one out at this size. */
  .contact-sheet { padding: 3rem 1.75rem; border-radius: 2rem; margin: 0 1rem; }
  .sheet-frames { grid-template-columns: repeat(2, 1fr); }
  .sheet-head { margin-bottom: 2.25rem; }

  .dish-grid--one-row {
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    padding: 0.5rem 0.25rem 1.5rem;
  }

  /* Three columns instead of four: the description loses its own column and
     drops onto a second line under the name, which is where it has to go
     before the name starts wrapping mid-phrase. */
  /* One column: plates on top, menu underneath. The explicit grid-column
     assignments that drive the alternation have to be undone too, or the
     reversed spreads stack in the wrong order. */
  .menu-spread { grid-template-columns: 1fr; gap: 2.5rem; }
  .menu-spread--reverse .spread-plates,
  .menu-spread--reverse .spread-body { grid-column: 1; grid-row: auto; }
  .menu-spread--featured { padding: 3rem 2rem; border-radius: 2rem; margin-inline: 1rem; }
  .spread-plates { padding-bottom: 3rem; padding-inline-end: 2rem; max-width: 34rem; }
  .spread-plate--main { aspect-ratio: 3 / 2; }
  .spread-num { font-size: 2.1rem; }

  .menu-index-row {
    grid-template-columns: 2.75rem minmax(0, 1fr) 1.75rem;
    column-gap: 1.25rem;
    row-gap: 0.5rem;
    padding: 1.4rem 0.9rem;
  }
  .mi-num  { grid-column: 1; grid-row: 1; }
  .mi-head { grid-column: 2; grid-row: 1; }
  .mi-text { grid-column: 2; grid-row: 2; }
  .mi-go   { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .steps, .steps--3 { grid-template-columns: repeat(2, 1fr); }
  .client-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  nav { padding: 0.5rem 1rem 0; gap: 0.4rem; }

  .nav-logo img { height: 38px; }

  .nav-pill {
    width: calc(100% - 2rem);
    justify-content: space-between;
    padding: 0.4rem 1rem 0.4rem 0.4rem;
  }

  .nav-links,
  .nav-cta { display: none; }

  .hamburger { display: flex; }

  .hero { padding: 10rem 1.5rem 5rem; }
  .hero--left { padding: 9rem 1.5rem 3.5rem; }
  .hero-meta { margin-top: 3rem; gap: 0.6rem 1rem; font-size: 0.65rem; }
  .page-hero { padding: 8.5rem 1.5rem 3rem; }

  .marquee-track { font-size: 0.95rem; gap: 1.75rem; }

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

  .chef-hero {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 8.5rem 1.5rem 3rem;
  }

  .split,
  .split--reverse { grid-template-columns: 1fr; gap: 2rem; }
  .split--reverse .split-img { order: 1; }
  .split--reverse .split-content { order: 2; }

  .pillars { grid-template-columns: 1fr 1fr; gap: 1.75rem; padding: 1.5rem 0; }

  .faq-grid { grid-template-columns: 1fr; gap: 2rem; }

  .dish-grid { grid-auto-flow: row; overflow-x: visible; padding: 0; scroll-snap-type: none; }
  .dish-grid, .package-grid, .review-grid { grid-template-columns: 1fr; }

  /* Same three-column shape as 1024, just tighter — the row stays a row down
     to the smallest width, since a number, a name and an arrow still fit. */
  .menu-spread { gap: 2rem; }
  .menu-spread--featured { padding: 2.5rem 1.5rem; }
  .spread-plates { padding-bottom: 2.5rem; padding-inline-end: 1.5rem; }
  .spread-plate--inset { width: 42%; border-width: 4px; }
  .spread-num { font-size: 1.8rem; }
  .spread-desc { font-size: 0.9rem; }
  .spread-cta { width: 100%; justify-content: center; }

  .arcade { gap: 0.9rem; padding-bottom: 1.25rem; }
  .arch figcaption { font-size: 0.62rem; letter-spacing: 0.14em; }

  /* One column, and the wide frame gives up its panorama crop — at this width
     an 8:3 strip is barely 100px tall. */
  .sheet-frames { grid-template-columns: 1fr; gap: 1.5rem; }
  .sheet-frame--wide { grid-column: span 1; }
  .sheet-frame--wide img { aspect-ratio: 4 / 3; }
  .contact-sheet { padding: 2.5rem 1.25rem; }

  .menu-index-row {
    grid-template-columns: 2.1rem minmax(0, 1fr) 1.4rem;
    column-gap: 0.9rem;
    padding: 1.15rem 0.25rem;
  }
  .mi-name { font-size: 0.95rem; }
  .menu-index-row .menu-category-tag { font-size: 1.15rem; letter-spacing: 0.08em; }
  .mi-text { font-size: 0.8rem; }

  .package-card--wide .card-inner { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem; }
  .steps, .steps--3 { grid-template-columns: 1fr; gap: 2rem; }
  .gallery-strip img { width: 220px; height: 150px; }
  .client-grid { grid-template-columns: 1fr; }
  .feature-band { margin: 0 1rem; padding: 3.5rem 1.5rem; border-radius: 2rem; min-height: auto; }

  .video-section {
    margin: 0 1rem;
    height: 60vh;
    min-height: 340px;
    border-radius: 2rem;
  }

  .video-overlay { padding: 1.75rem; }

  .band { margin: 0 1rem; padding: 3.5rem 1.5rem; border-radius: 2rem; }

  .rating-summary {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 1.5rem;
    text-align: center;
  }

  .bento-grid { grid-template-columns: 1fr; }
  .bento-1, .bento-2, .bento-3, .bento-4, .bento-5, .bento-6, .bento-half { grid-column: span 1; }

  .menu-section { padding: 3rem 1.5rem; margin: 0 1rem; border-radius: 2rem; }

  .info-simple { grid-template-columns: 1fr; border-top: none; }
  .info-block { padding-block: 1.5rem; padding-inline: 0; border-inline-end: none; border-top: 1px solid rgba(26,18,8,0.08); }
  .info-block:not(:first-child) { padding-inline-start: 0; }

  .order-grid { grid-template-columns: 1fr; gap: 3rem; }
  .order-section { padding: 3rem 1.5rem; margin: 0 1rem; border-radius: 2rem; }

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

  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }

  .feature-card { flex-direction: column; }

  .sweets-cols { grid-template-columns: 1fr !important; }

  section { padding: 3rem 1.5rem; }
}


/* ── RTL (Arabic) ──
   Most direction-sensitive rules above already use logical properties
   (text-align:start, padding/border/border-radius -inline-*, inset-inline-*)
   so they flip automatically with [dir="rtl"] on <html>. What's left here is
   the handful of things logical properties don't cover: physical transforms,
   decorative animation direction, and a couple of deliberate exceptions. */

/* Hover micro-motion on button arrows: nudges toward reading-end, which is
   left in RTL rather than right. */
@media (hover: hover) and (pointer: fine) {
  [dir="rtl"] .btn-primary:hover .icon-wrap,
  [dir="rtl"] .form-submit:hover .icon-wrap {
    transform: translate(-2px, -1px) scale(1.1);
  }
}

/* Back links point against the reading direction, so their arrow is the one
   glyph the [data-i18n-arrow] helper cannot serve — it only ever writes a
   forward arrow. Mirror it instead. */
[dir="rtl"] .link-arrow--back .icon-wrap { transform: scaleX(-1); }

/* The ticker reads more naturally scrolling toward the Arabic reading
   direction (right-to-left content flow) rather than continuing to crawl
   physically leftward. */
[dir="rtl"] .marquee-track { animation-direction: reverse; }

/* Star rows (rating display + the review-form star picker) stay ascending
   left-to-right by convention even in RTL layouts — ratings are read as a
   count, not as text, so keep their internal flex order fixed. */
[dir="rtl"] .stars,
[dir="rtl"] .star-picker { direction: ltr; }

/* WhatsApp floating button intentionally stays anchored to the same physical
   corner (bottom-right) in both languages — a fixed, universally-recognised
   spot rather than something that should mirror with text direction. */