:root {
  --navy-950: #060e18;
  --navy-900: #0c1a2b;
  --navy-800: #16314d;
  --cream: #F5E6C8;       /* Pantone 7506U */
  --cream-dim: #D8C9A0;
  --gold: #D4920A;        /* Pantone 130U */
  --gold-soft: #E8B84C;   /* Pantone 130U lighter */
  --teal: #00B5D1;        /* Pantone 306U */
  --tile-blue: #3f7e9e;
  --terracotta: #b5663f;
  --ink: #11161c;

  --font-display: 'Frank Ruhl Libre', 'Times New Roman', serif;
  --font-body: 'Assistant', 'Segoe UI', system-ui, sans-serif;

  --content-max: min(1320px, 100%);
  --pad-x: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; }

/* Fallback only — for when Lenis fails to load. While Lenis runs it assigns
   scrollTop every frame, and per CSSOM that assignment obeys scroll-behavior:
   smooth, so each frame would start a *new* native smooth animation that the
   next frame interrupts. The .lenis-smooth rule below forces it back to auto. */
html { scroll-behavior: smooth; }

/* ...but never on a touchscreen.
   This rule was only ever safe because Lenis cancelled it (html.lenis below).
   Once Lenis stopped running on coarse pointers, it came back to life — and on
   iOS it is actively harmful. Scrolling up there re-expands the address bar,
   the viewport grows, and Safari nudges the scroll position to compensate.
   With smooth behaviour on, that small correction is animated, and an animated
   correction on top of finger momentum lands somewhere else entirely. Android
   resizes its toolbar differently, which is why the same page was steady on a
   Galaxy and jumping on an iPhone. */
@media (pointer: coarse) { html { scroll-behavior: auto; } }

/* Official Lenis stylesheet — required whenever lenis.min.js is loaded.
   The .lenis rule (not just .lenis-smooth) is deliberate: Lenis adds .lenis on
   init but .lenis-smooth only while momentum is running, and scroll-behavior
   must already be auto by the time the first scrollTop assignment lands. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

html { overflow-x: clip; }

/* Scroll anchoring off, because Lenis owns the scroll position.
   The browser's own anchoring watches for content above the viewport changing
   size — a lazy image arriving, a video poster resolving — and silently shifts
   scrollTop to keep what you are looking at in place. That is the right
   behaviour for an ordinary page and the wrong behaviour here: Lenis is
   simultaneously writing scrollTop from its own animation state, so the two
   correct each other in opposite directions and the page lands somewhere else
   entirely. It shows up as a jump from one section to another, and it gets
   worse the slower images arrive, which is why it appears on a shared host and
   not on a CDN. Lenis keeps the view stable on its own. */
html, body { overflow-anchor: none; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--navy-950);
  color: var(--cream);
  font-family: var(--font-body);
  line-height: 1.7;
  position: relative;
  /* clip ולא hidden! כש-html קיבל overflow-x, ה-hidden של body הפסיק "לעלות" לחלון,
     body הפך לקונטיינר גלילה — וזה הרג את כל ה-position:sticky (הקנבסים של הגלילה).
     clip חוסם גלישה אופקית בלי ליצור קונטיינר גלילה, כך שה-sticky שורד. */
  overflow-x: clip;
}

/* Screen-reader-only: stays in the accessibility tree and in the page flow,
   unlike display:none or visibility:hidden. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; right: 1rem; z-index: 999;
  background: var(--gold); color: var(--navy-950);
  padding: 0.85rem 1.5rem; border-radius: 0 0 8px 8px;
  font-weight: 700; font-size: 0.9rem;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

/* The browser default ring is a square outline sitting on gold pill buttons over
   a constantly-changing canvas — often invisible. Gold-on-navy measures 10.5:1,
   navy-on-gold 6.9:1, so each side of the palette gets the ring that shows. */
:focus-visible {
  outline: 3px solid var(--gold-soft);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn-primary:focus-visible,
.btn-pill:focus-visible,
.floating-reserve:focus-visible,
.menu-filter.is-active:focus-visible {
  outline-color: var(--navy-950);
  box-shadow: 0 0 0 6px var(--gold-soft);
}

/* Keyboard focus must not land under the fixed header or the floating CTA. */
a, button, [tabindex] { scroll-margin-top: 96px; scroll-margin-bottom: 88px; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
section[id] { scroll-margin-top: 88px; }

/* ---------- INTRO LOADER ---------- */
.intro-loader {
  position: fixed; inset: 0; z-index: 300;
  background: var(--navy-950);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.7, 0, 0.84, 0);
}
.intro-loader-mark { width: 44px; height: 44px; opacity: 0.9; filter: brightness(0) invert(1); animation: intro-pulse 1.6s ease-in-out infinite; }
.intro-loader-bar { width: 200px; height: 1px; background: rgba(244,238,222,0.15); overflow: hidden; }
/* transform, not width: the first sequence can fire this up to 24 times in a
   burst as frames stream in — this keeps that burst off layout. */
.intro-loader-bar span {
  display: block; width: 100%; height: 100%; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.2s ease-out;
}
.intro-loader-pct { font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(244,238,222,0.62); }
@keyframes intro-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.intro-loader.is-done { opacity: 0; transform: scale(1.02); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .intro-loader-mark { animation: none; }
}

/* ---------- SCROLL PROGRESS BAR ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(212,146,10,0.12);
  z-index: 500;
  pointer-events: none;
}
.scroll-progress-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft), var(--teal));
  /* transform instead of width: this updates on every 'scroll' event, and Lenis
     dispatches one on every animation frame while the page is moving — so this
     was a layout-triggering write on literally every scroll frame, site-wide.
     scaleX is compositor-only and costs nothing at that frequency. Anchored to
     the left edge (not a logical/RTL edge) because the bar reads as absolute
     scroll position, the same convention a loading bar uses regardless of the
     page's own text direction. */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.08s linear;
}

/* ---------- CINEMATIC FILM GRAIN ---------- */
.grain-overlay {
  position: fixed; inset: -10%;
  width: 120%; height: 120%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  animation: grain-shift 1.4s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -1%); }
  75% { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .grain-overlay { animation: none; } }

/* ---------- BACKGROUND LOGO WATERMARK LAYER ---------- */
/* Fixed behind everything: faint, oversized brand mark that drifts
   slowly as the page scrolls, so the brand is felt everywhere, not
   just in the header/footer. */
.brand-veil {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.brand-veil img {
  position: absolute;
  width: 70vw;
  max-width: 900px;
  min-width: 480px;
  opacity: 0.05;
  filter: brightness(0) invert(1);
  will-change: transform;
}
.brand-veil .mark-a { top: -8%; left: -12%; transform: rotate(-8deg); }
.brand-veil .mark-b { bottom: -10%; right: -14%; transform: rotate(10deg); }

main, footer.site-footer { position: relative; z-index: 1; }

.section-label {
  font-weight: 500;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  color: var(--gold);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.section-label::before { content: ""; display: inline-block; width: 42px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
html[dir="ltr"] .section-label::before { order: -1; }

.accent { font-style: italic; color: var(--gold-soft); font-weight: 400; }

.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* Section-level headers/panels: no transition here on purpose — the JS
   motion loop sets opacity/transform/filter every frame as the user
   scrolls, so the motion itself IS the continuous scroll position, not a
   CSS-eased snap to a target. */
.continuous-reveal { opacity: 0; }

/* Cards in a grid cascade in one after another instead of popping together
   (capped-stagger delay applied inline by JS) — ties the whole grid into a
   single connected motion regardless of how many cards it holds. */

/* ---------- HEADER ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--pad-x);
  background: linear-gradient(to bottom, rgba(6,14,24,0.75), transparent);
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.site-header.is-scrolled {
  /* Deliberately no backdrop-filter. The header is fixed and this class is on
     from 80px of scroll onwards, so a blur here forces the compositor to
     re-sample and re-blur the strip behind it on every scroll frame, for the
     whole page. At 94% opacity there was next to nothing showing through it
     anyway. */
  background: rgba(6,14,24,0.94);
  border-bottom-color: rgba(212,146,10,0.18);
  box-shadow: 0 1px 30px rgba(0,0,0,0.4);
}
.logo { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-display); font-weight: 700; font-size: 1.85rem; color: var(--cream); min-height: 44px; }
.logo-mark { width: 56px; height: 56px; }
.main-nav { display: none; gap: 2.25rem; font-size: 0.95rem; }
@media (min-width: 860px) { .main-nav { display: flex; } }
.main-nav a { position: relative; padding-bottom: 4px; transition: color 0.2s; }
.main-nav a::after { content: ""; position: absolute; right: 0; left: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform 0.25s ease; }
.main-nav a:hover { color: var(--gold-soft); }
.main-nav a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.lang-toggle {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.5rem 0.75rem; border-radius: 6px;
  border: 1px solid rgba(244,238,222,0.45); background: transparent; color: var(--cream);
  cursor: pointer; transition: border-color 0.2s, color 0.2s;
  /* 44px minimum touch target without changing how the control looks. */
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.lang-toggle:hover { border-color: var(--gold); color: var(--gold-soft); }
.lang-toggle[aria-expanded="true"] { border-color: var(--gold); color: var(--gold-soft); }

/* Language menu. Anchored to the button and pinned to the viewport edge it sits
   nearest, so it never opens off-screen in either writing direction. */
.lang-picker { position: relative; }
.lang-menu {
  position: absolute; top: calc(100% + 0.5rem); inset-inline-end: 0;
  z-index: 60; margin: 0; padding: 0.35rem; list-style: none;
  min-width: 10rem;
  background: rgba(6,14,24,0.97);
  border: 1px solid rgba(201,164,100,0.35);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
}
.lang-menu[hidden] { display: none; }
.lang-menu button {
  display: block; width: 100%;
  padding: 0.6rem 0.8rem;
  font-family: inherit; font-size: 0.88rem; font-weight: 500;
  text-align: start; white-space: nowrap;
  background: none; border: none; border-radius: 6px;
  color: var(--cream-dim); cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.lang-menu button:hover { background: rgba(201,164,100,0.14); color: var(--cream); }
.lang-menu button[aria-current="true"] { color: var(--gold-soft); background: rgba(201,164,100,0.1); }
/* Each entry is written in its own language, so it must render in its own
   direction regardless of the page's current one. */
.lang-menu button[lang="he"], .lang-menu button[lang="ar"] { direction: rtl; }
.lang-menu button[lang="en"], .lang-menu button[lang="ru"],
.lang-menu button[lang="es"] { direction: ltr; }
.btn-pill { font-size: 0.9rem; font-weight: 600; padding: 0.6rem 1.4rem; border-radius: 50px; background: var(--gold); color: var(--ink); letter-spacing: 0.02em; transition: background 0.2s, box-shadow 0.2s; }
.btn-pill:hover { background: var(--gold-soft); box-shadow: 0 0 18px rgba(212,146,10,0.35); }

/* Mobile hamburger + slide-down nav (the only nav access below 860px) */
.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  /* 44px hit area; the bars stay 32px wide via .nav-toggle span below. */
  width: 44px; height: 44px; padding: 0 6px; border: none; background: none; cursor: pointer;
}
@media (min-width: 860px) { .nav-toggle { display: none; } }
.nav-toggle span { display: block; width: 100%; height: 2px; background: var(--cream); transition: transform 0.3s ease, opacity 0.3s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed; top: 0; right: 0; left: 0; z-index: 49;
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: 6.5rem var(--pad-x) 2.5rem;
  background: rgba(6,14,24,0.98);
  backdrop-filter: blur(10px);
  font-size: 1.1rem; font-weight: 600;
  transform: translateY(-100%);
  opacity: 0;
  /* visibility (not just opacity) — otherwise the six links stay in the tab
     order while the panel is closed and keyboard focus disappears off-screen.
     The 0.4s delay lets the slide-up finish before it leaves the tree. */
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0s 0.4s;
}
.mobile-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-nav a { padding: 0.4rem 0; min-height: 44px; display: flex; align-items: center; }
.mobile-nav .btn-primary { margin-top: 0.5rem; text-align: center; }
@media (min-width: 860px) { .mobile-nav { display: none; } }

.btn-primary, .btn-secondary { font-size: 0.95rem; font-weight: 600; padding: 0.85rem 2.1rem; border-radius: 50px; letter-spacing: 0.03em; display: inline-block; transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; }
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary:hover { background: var(--gold-soft); box-shadow: 0 0 24px rgba(212,146,10,0.4); }
.btn-secondary { background: transparent; color: var(--cream); border: 1px solid rgba(244,238,222,0.35); }
.btn-secondary:hover { border-color: var(--gold); color: var(--gold-soft); box-shadow: 0 0 18px rgba(212,146,10,0.15); }

/* ---------- 3D TILT + CUSTOM CURSOR ---------- */
.tilt { transition: transform 0.15s ease-out; transform-style: preserve-3d; }

/* The box stays 28px and never resizes; the ring inside it scales.
   Growing the element's own width and height on hover made the browser lay the
   element out and repaint it for every step of the transition, and this one
   carries mix-blend-mode: difference, so each repaint also re-blends against
   whatever is underneath — which during the walk-in is a canvas painting frames.
   A transform is handled by the compositor and touches neither.
   The 28px box is also what the JS transform centres against: it applies
   translate(-50%,-50%), a percentage of the element's own size, so the box has
   to keep a constant size for the cursor to stay under the pointer. */
.custom-cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  width: 28px; height: 28px;
  pointer-events: none;
  mix-blend-mode: difference;
}
.custom-cursor::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0.7;
  transition: transform 0.25s ease, opacity 0.25s ease,
              border-color 0.25s ease, background-color 0.25s ease;
}
/* 52/28 — the same size it grew to before. */
.custom-cursor.is-active::before {
  transform: scale(1.857);
  opacity: 1;
  background: rgba(201,164,100,0.15);
}

/* ---------- HEADLINE WORD REVEAL ---------- */
.word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.word-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- HERO FRAME-SEQUENCE SCROLL SCRUBBER ---------- */
/* Tall track purely for scroll distance; the canvas + overlays live in the
   sticky stage. Frame index is computed from getBoundingClientRect, never
   raw scrollY — see hero-scrub in main.js. */

/* Scroll-track heights are repeated in svh, and that repetition is the fix for
   the worst bug on this page.
   A phone browser hides its toolbar as you scroll down and shows it again as
   you scroll up, which changes the viewport height by around 60px. vh follows
   that change, and this track is 1160 of them — so the document grew and shrank
   by a measured 707px every time the toolbar moved, and the reader was thrown
   several sections away. It only showed on Chrome for iOS because Safari and
   Android time their toolbars differently.
   svh is defined against the SMALL viewport — toolbar showing — so it never
   moves. The vh line stays first as a fallback for browsers without svh. */
.hero-scroll-track { position: relative; height: 800vh; height: 800svh; background: var(--navy-950); }
@media (max-width: 760px) { .hero-scroll-track { height: 560vh; height: 560svh; } }
.hero-scroll-track-sm { height: 350vh; height: 350svh; }
@media (max-width: 760px) { .hero-scroll-track-sm { height: 240vh; height: 240svh; } }

.scrub-loading {
  position: absolute; z-index: 3; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-dim);
  opacity: 0.7; transition: opacity 0.5s ease;
}
.scrub-loading.is-done { opacity: 0; }
.hero-scroll-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 22vw rgba(0,0,0,0.85);
  opacity: 0.35;
}

.hero-overlay {
  position: absolute; z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  /* שכבה לא-גלויה יוצאת מהרינדור לגמרי — בלי זה ה-backdrop-filter של הכרטיסים
     ממשיך לחשב טשטוש מעל הקנבס המונפש בכל פריים גם כשהם שקופים (איטיות אמיתית ב-Windows) */
  visibility: hidden;
}
.hero-overlay.is-visible { visibility: visible; }
.hero-overlay-title {
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center;
  max-width: var(--content-max); width: 100%; margin: 0 auto; padding: 0 var(--pad-x);
  text-align: center;
}
/* A compact panel tinted with the page's own navy, kept translucent so the
   footage still reads through it. Replaces the old full-width radial halo,
   which dimmed most of the frame to light one line of text. */
/* The panel lives on a wrapper, not on the title itself: the headline uses
   background-clip:text for its gold gradient, which would clip a panel colour
   to the glyphs instead of painting a box. */
.hero-title-panel {
  /* An explicit width — in a column flex container a shrink-to-fit box collapses
     to min-content and breaks the headline one word per line. */
  width: min(100%, 34rem);
  margin-inline: auto;
  padding: clamp(1.1rem, 3vw, 1.9rem) clamp(1.4rem, 4vw, 2.6rem);
  /* 0.38 let the gold headline disappear against bright frames like the
     sunlit podium; 0.55 still clearly shows the footage through it. */
  background: rgba(6,14,24,0.55);
  border: 1px solid rgba(245,230,200,0.16);
  border-radius: 16px;
}
/* Painted with a real colour rather than a gradient clipped to the glyphs: the
   JS splits this headline into per-word inline-block spans for its reveal, and
   background-clip:text stops painting once the text sits in those children —
   which left the headline invisible. */
.hero-gold-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3.6rem); line-height: 1.16; letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.6);
}
/* The eyebrow had no rules of its own, so it rendered as plain 16px body copy
   directly under a 96px gold headline and read as an orphaned line. It is now a
   framed badge, lifted clear of the headline so it registers on its own without
   competing with it. */
.hero-overlay-title .eyebrow {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: clamp(0.62rem, 1.5vw, 0.74rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  line-height: 1;
  color: var(--gold-soft);
  padding: 0.7em 1.5em;
  border: 1px solid rgba(232,184,76,0.45);
  border-radius: 999px;
  background: rgba(6,14,24,0.45);
  text-align: center;
}
@media (max-width: 760px) {
  .hero-overlay-title .eyebrow { top: 16%; letter-spacing: 0.2em; padding: 0.65em 1.1em; }
}

.hero-overlay-card {
  top: 50%; right: 8vw; max-width: 320px;
  transform: translateY(-50%) translateX(20px);
}
.hero-overlay-card-2 { right: auto; left: 8vw; transform: translateY(-50%) translateX(-20px); }
.hero-overlay-card-3 { top: 30%; right: 8vw; transform: translateY(-50%) translateX(20px); }
.hero-overlay-card.is-visible { transform: translateY(-50%) translateX(0); }
@media (max-width: 760px) {
  .hero-overlay-card, .hero-overlay-card-2, .hero-overlay-card-3 {
    left: 50%; right: auto; top: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: min(280px, 80vw);
  }
  .hero-overlay-card.is-visible { transform: translate(-50%, -50%) scale(1); }
}
.glass-card p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--cream); }

.hero-overlay-cta {
  bottom: 8vh; left: 0; right: 0;
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}
.hero-overlay-cta.is-visible { pointer-events: auto; }
.hero-overlay-cta.is-visible a { pointer-events: auto; cursor: pointer; }

.scroll-cue { position: absolute; bottom: 2.5rem; right: var(--pad-x); z-index: 2; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-dim); opacity: 0.6; display: flex; align-items: center; gap: 0.6rem; }
.scroll-cue span { width: 1px; height: 30px; background: linear-gradient(to bottom, var(--gold), transparent); }

/* ---------- WALK-IN SEQUENCE ---------- */
/* Each "step" is a tall scroll-pinned stage: a real interior photo/video
   that scales up (push-in) as the section is in view, simulating moving
   deeper into the venue. Text rides on top, fading in. */
/* ── ONE CONTINUOUS GROUND ─────────────────────────────────────────────────
   Every section used to sit on the same flat navy, which is what made the page
   read as a stack of separate boxes. This is a single gradient the height of the
   whole document, so the ground shifts slowly as the visitor descends: darkest
   at the threshold, lifting and warming through the room and the menu where the
   lamps are, settling back down to the deepest navy at the foot.

   It is one paint, not an effect: no JavaScript, nothing recalculated on scroll,
   nothing for the compositor to redo. The whole range spans about eight points
   of lightness — meant to be felt rather than noticed, and dark enough
   throughout that cream text keeps well over 4.5:1 anywhere on it.

   Set on the body itself rather than a pseudo-element: the body carries a solid
   background of its own, and a ::before at z-index -1 paints behind that, so the
   first attempt was there and completely covered. */
body {
  background: linear-gradient(to bottom,
    #050c15 0%,
    #060e18 22%,
    #0a1523 42%,
    #0e1c2b 56%,
    #0c1927 70%,
    #081320 86%,
    #04090f 100%) no-repeat;
  background-attachment: scroll;
}

/* Transparent so the ground above shows through — on a phone the canvas is a
   band with the page colour above and below it, and a solid fill here would cut
   the gradient in half at exactly the most visible point. */
.walkin { position: relative; background: transparent; }

/* Single continuous walk-in track: one sticky canvas, one scroll
   distance, frame folders switch back-to-back with no section
   swap. Shorter than the old per-step total (was ~3000vh combined)
   so scrolling reads as responsive rather than stuck. */
.hero-scroll-track-walkin { height: 1700vh; height: 1700svh; }
@media (max-width: 760px) { .hero-scroll-track-walkin { height: 1160vh; height: 1160svh; } }
/* No CSS filter here on purpose. contrast(1.15) saturate(1.1) used to sit on this
   canvas, and a filter over an element whose pixels change every frame cannot be
   cached — the compositor re-ran it across the full viewport on every repaint for
   the whole length of the walk-in. The identical grade is baked into the frames
   instead, so it now costs nothing at runtime. */
#walkin-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  /* The opening frame as a plain background image.
     A canvas is transparent until something is drawn into it, and the first draw
     cannot happen until JavaScript has run and the first frame has arrived over
     the network — which left the top of the site as an empty navy rectangle for
     anyone whose connection was not instant. The browser paints this with the
     rest of the page, so there is a picture there from the first frame the
     visitor ever sees, and the canvas covers it the moment it has something
     better. Phones get the phone-sized copy of the same shot. */
  background-image: url('../entrance_sign/frame_0001.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Dropped as soon as the engine has painted a real frame — see the note in
   main.js. Keeping it would let the opening shot show through at any moment the
   drawing does not fully cover the canvas. */
#walkin-canvas.is-live {
  background-image: none;
  /* The filter was implicitly giving this element its own compositor layer.
     Ask for one explicitly now that the filter is gone. */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* On a portrait phone the canvas becomes a band rather than the whole screen.
   The footage is 16:9 and a phone is roughly 9:19.5, so filling the screen means
   cover throws away three quarters of every shot — the painted dome, the bar and
   the seating all sit outside the visible slice. At 70% height the window widens
   to 0.66 and about 37% of the frame survives. The stage stays a full 100vh so
   the captions keep their positions, and the deep navy above and below the band
   is the page's own ground colour, which reads as a deliberate letterbox rather
   than a gap. Must come after the base rule above, which also sets inset. */
@media (max-width: 760px) and (orientation: portrait) {
  #walkin-canvas,
  .hero-vignette { top: 15%; bottom: auto; height: 70%; }
  /* The phone copy of the opening frame, so the placeholder is not a 1920px file
     fetched onto a device that will never draw it. */
  #walkin-canvas { background-image: url('../entrance_sign_m/frame_0001.webp'); }
}

/* A permanent scrim along the bottom of the stage. It replaces the per-caption
   card: the type can now sit directly on the footage — the way film titles do —
   and still clear 4.5:1 over the brightest frame. No backdrop-filter, so there
   is no per-frame re-blur cost over the animating canvas. */
.hero-scroll-stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(4,10,18,0.88) 0%,
    rgba(4,10,18,0.62) 32%,
    rgba(4,10,18,0.22) 66%,
    transparent 100%);
}

/* Anchored to the same 1320px content column the rest of the page uses, so the
   captions line up with the sections above and below instead of hugging the
   viewport edge. */
.walkin-label {
  position: absolute;
  bottom: 13%;
  /* Span the same content column as the rest of the page; the block children
     then start at the column's inline edge, which is the right edge in RTL. */
  inset-inline: max(var(--pad-x), calc((100% - var(--content-max)) / 2));
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
  visibility: hidden;
}
.walkin-label > * { max-width: 46ch; }
.walkin-label.is-visible { opacity: 1; transform: translateY(0); visibility: visible; }

/* The scene name and its rule: the rule draws out from the text as the caption
   arrives, which is the one piece of motion tying the four scenes together. */
.step-scene {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  color: var(--gold-soft);
  margin: 0 0 1rem;
}
/* The rule draws out with scaleX, not by animating width. It is a flex item, so
   growing its width re-laid-out the whole caption on every frame of a 0.9s
   animation — and that animation fires exactly when a walk-in caption arrives,
   which is exactly when the canvas is busy drawing frames. Holding the final
   width and scaling from 0 keeps the same motion on the compositor, costing no
   layout at all. It also stops the caption box itself from growing as the rule
   extends. */
.step-scene::after {
  content: "";
  display: block;
  height: 1px;
  width: clamp(48px, 12vw, 130px);
  background: linear-gradient(to left, transparent, var(--gold));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.12s;
}
.walkin-label.is-visible .step-scene::after { transform: scaleX(1); }
html[dir="ltr"] .step-scene::after { background: linear-gradient(to right, transparent, var(--gold)); transform-origin: left; }

.step-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.85rem;
  color: var(--cream);
  text-shadow: 0 2px 24px rgba(0,0,0,0.75), 0 1px 4px rgba(0,0,0,0.5);
  text-wrap: balance;
}
.step-desc {
  color: var(--cream);
  opacity: 0.82;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.75;
  margin: 0;
  max-width: 34ch;
  text-shadow: 0 1px 12px rgba(0,0,0,0.7);
}
@media (max-width: 760px) {
  .walkin-label { padding: 1.3rem 1.4rem 1.25rem; bottom: 9%; border-radius: 14px; }
  .step-desc { font-size: 0.98rem; }
}

/* ---------- ABOUT ---------- */
.about { max-width: var(--content-max); margin: 0 auto; padding: 9rem var(--pad-x); }
.about-grid { display: grid; gap: 4rem; align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1.2fr 0.8fr; } }
.about-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 4.5vw, 3.25rem); line-height: 1.2; margin: 0 0 1.75rem; text-shadow: 0 4px 40px rgba(0,0,0,0.5); }
.about-text { max-width: 62ch; color: var(--cream-dim); font-size: 1rem; font-weight: 300; line-height: 1.95; margin: 0 0 2rem; }
.about-quote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.25rem; color: var(--gold-soft); border-right: 2px solid var(--gold); padding-right: 1.5rem; margin: 0; line-height: 1.7; text-shadow: 0 1px 12px rgba(212,146,10,0.2); }
.about-image { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(212,146,10,0.18), 0 24px 60px rgba(0,0,0,0.5); }
.about-image img { width: 100%; height: 116%; object-fit: cover; aspect-ratio: 4/5; will-change: transform; }

/* ---------- MENU ---------- */
.menu { max-width: var(--content-max); margin: 0 auto; padding: 9rem var(--pad-x); }
.menu-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.15; margin: 0 0 3.5rem; max-width: 28ch; text-shadow: 0 4px 40px rgba(0,0,0,0.5); }
.menu-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 2.5rem; }
.menu-filter {
  font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 600;
  padding: 0.5rem 1.1rem; border-radius: 999px;
  border: 1px solid rgba(244,238,222,0.45); background: transparent; color: var(--cream-dim);
  cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s;
  min-height: 44px; display: inline-flex; align-items: center;
}
.menu-filter:hover { border-color: var(--gold); color: var(--gold-soft); }
.menu-filter.is-active { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.menu-card.is-hidden { display: none; }
/* Single column below 460px: at 320px a two-column grid leaves 77px of content
   width per card, which clips the dish name and price against overflow:hidden. */
/* minmax(0, 1fr) rather than a bare 1fr, here and in every photo grid below.
   A bare 1fr is minmax(auto, 1fr), and that auto floor is the item's min-content
   width — which for a card holding an image is the image's own intrinsic width.
   So the columns stayed one size while the photos were still loading and
   resized the moment they arrived: measured here as cards jumping 375px to
   387px, all 61 of them reflowing at once, and the page growing 489px under the
   reader mid-scroll. A zero floor makes the columns strictly equal and
   independent of what is inside them, so the layout is final before any photo
   lands. */
.menu-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 460px) { .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; } }
@media (min-width: 760px) { .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.menu-card { border: 1px solid rgba(244,238,222,0.10); border-radius: 12px; overflow: hidden; background: var(--navy-900); transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; position: relative; }
/* Deliberately NOT using content-visibility: auto on these cards. It does cut
   style and layout work for the fifty-odd cards off screen, but the cards are
   not a uniform height (396-456px here) so the skipped ones are laid out at an
   estimate. Measured: the document height drifted 635px during a single pass
   through the menu and settled at a different value going up than coming down.
   A page that grows under the reader's finger is the jump we are trying to
   remove, and the blocking-time gain was inside measurement noise. Not worth
   it. The real win here was right-sizing the images. */
.menu-card:hover { border-color: rgba(212,146,10,0.45); box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(212,146,10,0.15); transform: translateY(-2px); }
.menu-card img, .menu-card video { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.5s ease; }
.menu-card:hover img, .menu-card:hover video { transform: scale(1.04); }
.menu-card-placeholder {
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, rgba(244,238,222,0.04) 0 2px, transparent 2px 14px);
  border-bottom: 1px solid rgba(244,238,222,0.08);
}
.menu-card-placeholder span { font-family: var(--font-display); font-style: italic; font-size: 0.85rem; color: rgba(244,238,222,0.62); letter-spacing: 0.02em; }
.menu-card-body { padding: 1.25rem 1.4rem 1.5rem; }
.menu-card-body h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; margin: 0 0 0.5rem; display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.menu-price { font-size: 0.8rem; font-weight: 400; font-style: italic; color: var(--gold-soft); white-space: nowrap; }
.menu-card-body p { margin: 0; font-size: 0.88rem; font-weight: 400; color: var(--cream-dim); line-height: 1.6; }
.menu-period { margin: 0 0 5rem; }
.menu-period:last-child { margin-bottom: 0; }
.menu-period-title {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0 0 1.25rem; padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(212,146,10,0.2);
  /* Solid, like the other two headings that carried a clipped gradient. */
  color: var(--gold-soft);
}
.menu-period-note { font-size: 0.85rem; font-style: italic; color: var(--cream-dim); opacity: 0.75; margin: -0.5rem 0 1.5rem; }

.menu-pricelist-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 760px) { .menu-pricelist-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .menu-pricelist-grid { grid-template-columns: repeat(3, 1fr); } }
.menu-pricelist-group {
  background: var(--navy-900);
  border: 1px solid rgba(244,238,222,0.12);
  border-radius: 10px;
  padding: 1.6rem 1.5rem;
}
.menu-pricelist-group h4 {
  font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; color: var(--gold-soft);
  letter-spacing: 0.03em; margin: 0 0 1.1rem; padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(201,164,100,0.3);
  display: flex; align-items: center; gap: 0.6rem;
}
.menu-pricelist-group h4::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.menu-pricelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.menu-pricelist li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: 0.95rem; font-weight: 300; color: var(--cream-dim); line-height: 1.5;
  padding: 0.6rem 0.1rem;
  border-bottom: 1px solid rgba(244,238,222,0.07);
}
.menu-pricelist li:last-child { border-bottom: none; }
.menu-pricelist li:hover { color: var(--cream); }
.pl-price { flex-shrink: 0; color: var(--gold-soft); font-weight: 600; white-space: nowrap; font-size: var(--pl-fig); }

/* Spirit type beside the bottle name. The printed menu gives every spirit its
   own headed category; these cards merge several categories to keep the grid
   readable, so the type has to travel with the bottle instead of the header. */
.pl-item {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0.45rem;
  min-width: 0; overflow-wrap: anywhere;
}
.pl-type {
  flex-shrink: 0;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--gold-soft); opacity: 0.8;
  border: 1px solid rgba(201,164,100,0.32);
  border-radius: 3px; padding: 0.1rem 0.4rem;
  white-space: nowrap; transform: translateY(-0.05em);
}
.menu-pricelist li:hover .pl-type { opacity: 1; border-color: rgba(201,164,100,0.55); }

/* Multi-price rows.
   A bare "22/40/350" is one LTR bidi run, so 22 paints on the left — under
   בקבוק rather than צ׳ייסר, mirroring every row against its own heading. Each
   value therefore gets its own cell and inherits the page's RTL direction, so
   cell N always reads as the Nth label. */
.pl-price { display: inline-flex; align-items: baseline; gap: 0.34rem; }
.pl-price b { font-weight: 600; }
/* Direct child only, so the slash appears between loose values but never inside
   a .pl-cells grid, where the column heading already separates them. */
.pl-price > b + b::before {
  content: "/"; opacity: 0.4; font-weight: 400; margin-inline-end: 0.34rem;
}
.pl-price em { font-style: normal; opacity: 0.7; }

/* Groups with a column heading. The heading and the price row are separate
   elements, so each holds its own .pl-cells grid with identical fixed tracks
   plus a ₪ of matching width — the heading's copy is hidden. That keeps the two
   grids starting at the same x without hard-coding an offset. */
.pl-columns[data-cols] {
  display: flex; justify-content: flex-end; align-items: baseline;
  gap: 0.34rem; padding-inline: 0.1rem; text-align: center;
}
.pl-columns[data-cols] em {
  font-style: normal; visibility: hidden;
  /* Must match the real ₪ in .pl-price exactly: it is the spacer that
     keeps the heading grid and the price grid starting at the same x.
     Inheriting the smaller heading size drifted every column by 3px. */
  font-size: var(--pl-fig);
}
.pl-columns[data-cols] b { font-weight: 600; }
/* flex-shrink:0 is load-bearing. As a flex child this grid would otherwise
   compress below its own track widths when the row runs short of space, while
   the heading's copy — a block-level <p> with the whole card to itself — keeps
   its full width. The two would then disagree and every value would sit off its
   label. The name shrinks instead. */
.pl-cells { display: grid; text-align: center; gap: 0.34rem; flex-shrink: 0; }
.menu-pricelist li > :first-child { min-width: 0; overflow-wrap: anywhere; }

/* Track widths live in variables because the heading words differ in length by
   language — "Бутылка" and "Chupito" need more room than "Bottle" — and the
   heading grid and every price grid must always resolve to the same value. */
:root { --pl-t2: 3.7rem; --pl-t3: 3.35rem; --pl-t4: 3.05rem; --pl-fig: 1.02rem; }
:root[lang="ru"] { --pl-t2: 4.6rem; --pl-t3: 4.5rem; --pl-t4: 3.4rem; }
:root[lang="es"] { --pl-t2: 4.4rem; --pl-t3: 4.3rem; --pl-t4: 3.3rem; }

.pl-columns[data-cols="2"] .pl-cells,
.menu-pricelist[data-cols="2"] .pl-cells { grid-template-columns: repeat(2, var(--pl-t2)); }
.pl-columns[data-cols="3"] .pl-cells,
.menu-pricelist[data-cols="3"] .pl-cells { grid-template-columns: repeat(3, var(--pl-t3)); }
.pl-columns[data-cols="4"] .pl-cells,
.menu-pricelist[data-cols="4"] .pl-cells { grid-template-columns: repeat(4, var(--pl-t4)); }

/* The wide tracking that suits a lone heading line costs real width inside a
   narrow cell, so the cells opt out of it. */
.pl-columns[data-cols] .pl-cells { letter-spacing: 0.01em; }

/* Narrow phones: claw back room for the bottle name. */
@media (max-width: 480px) {
  :root { --pl-t2: 3.4rem; --pl-t3: 3.1rem; --pl-t4: 2.8rem; }
  :root[lang="ru"] { --pl-t2: 4.1rem; --pl-t3: 3.8rem; --pl-t4: 3rem; }
  :root[lang="es"] { --pl-t2: 3.9rem; --pl-t3: 3.6rem; --pl-t4: 2.9rem; }
  .pl-cells { gap: 0.24rem; }
  /* At this width the heading words are the binding constraint, not the prices. */
  .pl-columns[data-cols] { font-size: 0.7rem; }
}

/* ---------- GALLERY ---------- */
.gallery { position: relative; max-width: var(--content-max); margin: 0 auto; padding: 9rem var(--pad-x); overflow: hidden; perspective: 1400px; }
.gallery-title { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.15; margin: 0 0 3.5rem; max-width: 32ch; text-shadow: 0 4px 40px rgba(0,0,0,0.6); }
.gallery > .section-label { position: relative; z-index: 1; }

/* Drifting glow-dust, in the spirit of the particle fields on agency sites
   like Active Theory — cheap canvas sprites, not a 3D engine. */
.particle-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.gallery-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  transform-style: preserve-3d;
  transition: transform 0.3s ease-out;
}
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery-item {
  margin: 0; border-radius: 12px; overflow: hidden;
  aspect-ratio: 1/1;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
.gallery-item-tall { grid-row: span 2; aspect-ratio: 1/2.05; }
/* Video tile. The clip is 9:16 and the slot is 1:2.05, so cover crops a sliver
   top and bottom rather than distorting. No saturate() filter and no hover scale
   here — the photos can take a treatment, moving footage just looks processed. */
.gallery-item-video video {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.gallery-item-video:hover { transform: none; }
.gallery-item-video::after { content: none; }
.gallery-item-video { position: relative; }

/* The events clip needs the same anchor for its sound button. */
.events-video { position: relative; }

/* Sound toggle. Top corner, clear of the browser's own control bar along the
   bottom, and big enough to hit on a phone. */
.video-sound {
  position: absolute;
  top: 0.7rem; inset-inline-start: 0.7rem;
  z-index: 4;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; line-height: 1;
  background: rgba(6,14,24,0.86);
  border: 1px solid rgba(245,230,200,0.32);
  border-radius: 50%;
  color: var(--cream);
  cursor: pointer;
  /* No backdrop-filter: this button sits on top of a playing video, so a blur
     here would be recomputed on every video frame. The background below is
     opaque enough to carry the contrast on its own. */
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.video-sound:hover { border-color: var(--gold); background: rgba(6,14,24,0.9); transform: scale(1.06); }
.video-sound:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
  filter: saturate(0.92);
}
.gallery-item:hover img { transform: scale(1.07); filter: saturate(1.05); }

/* ---------- CONTACT ---------- */
.contact { max-width: var(--content-max); margin: 0 auto; padding: 5rem var(--pad-x) 0; }
.contact-heading { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3.5vw, 2.5rem); margin: 0 0 2rem; }
/* A destination plate: the address set on the photograph of the sign you look
   for when you arrive, with the navigation links beneath it. The previous
   version put the same facts in outlined pills beside a picture, which is the
   shape every template uses and reads as filler. */
.contact-plate {
  position: relative; overflow: hidden;
  border-radius: 16px;
  min-height: clamp(20rem, 52vw, 28rem);
  display: flex; align-items: flex-end;
  box-shadow: 0 0 0 1px rgba(212,146,10,0.16), 0 28px 70px rgba(0,0,0,0.5);
}
.contact-plate-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
  /* Only lightly dimmed: the sign is the whole point of this photograph and it
     has to stay legible. The scrim below does the contrast work for the type. */
  filter: brightness(0.86) saturate(1);
  transition: transform 1.2s cubic-bezier(0.16,1,0.3,1), filter 1.2s ease;
}
.contact-plate:hover .contact-plate-photo { transform: scale(1.03); filter: brightness(0.92) saturate(1.05); }
/* A scrim, not a flat overlay: the type needs 4.5:1 at the bottom while the sign
   itself stays readable further up. */
.contact-plate::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(6,14,24,0.94) 0%, rgba(6,14,24,0.72) 32%, rgba(6,14,24,0.12) 68%, transparent 100%);
}
.contact-plate-body {
  position: relative; z-index: 1;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  display: flex; flex-direction: column; gap: 0.9rem;
  width: 100%;
}
.contact-address {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.35rem, 4.2vw, 2.15rem);
  line-height: 1.3; margin: 0; color: var(--cream);
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.contact-nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; }

/* ── The rising-tide action ────────────────────────────────────────────────
   Gold fills the shape from the bottom, the way water comes up a hull, and the
   label turns to navy as it passes. One idea, used for every action in this
   section so they read as a family.

   Built for a thumb first. There is no hover on a phone, so :active carries the
   same fill and fires the moment a finger lands; the resting state has to look
   finished on its own, which is why it keeps a gold hairline and an arrow rather
   than relying on the effect to give it presence.

   The fill is a pseudo-element behind the text — no extra markup, because
   switching language rewrites the innerHTML of these links and would throw any
   wrapper span away. */
.contact-go {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 46px; padding: 0 0.95rem;
  font-size: clamp(0.9rem, 2.4vw, 1rem); font-weight: 500;
  color: var(--gold-soft);
  border: 1px solid rgba(212,146,10,0.38);
  border-radius: 3px;
  transition: color 0.35s ease, border-color 0.35s ease, gap 0.35s ease;
}
.contact-go::before { content: '←'; font-size: 1.05em; line-height: 1; }
html[dir="ltr"] .contact-go::before { content: '→'; }
.contact-go::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--gold);
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.contact-go:hover, .contact-go:focus-visible, .contact-go:active {
  color: var(--navy-950); border-color: var(--gold); gap: 0.75rem;
}
.contact-go:hover::after,
.contact-go:focus-visible::after,
.contact-go:active::after { transform: translateY(0); }
.contact-go:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Phone, email and social: an icon, the label, and a gold rule that grows under
   both when touched.

   Deliberately not the full flood used on the two navigation buttons above.
   Three of these sit in a row, and filling each one turned the row into a band
   of gold blocks. A rule carries the same gesture at a third of the volume.

   The icon is a flex child with a gap, not an absolutely positioned layer, so it
   cannot land on the text however the label wraps or whatever language it is in. */
.ch {
  display: inline-flex; align-items: center; gap: 0.55rem;
  position: relative;
  padding-inline: 0.15rem; padding-block: 0.15rem;
  transition: color 0.3s ease;
}
.ch::before {
  content: ''; flex: none;
  width: 1.05em; height: 1.05em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* The rule. Clipped to the link, grows from the leading edge, sits under both
   the icon and the label. */
.ch::after {
  content: ''; position: absolute; inset-inline: 0; bottom: -2px; height: 2px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
html[dir="ltr"] .ch::after { transform-origin: left; }
.ch:hover, .ch:active, .ch:focus-visible { color: var(--gold-soft); }
.ch:hover::after, .ch:active::after, .ch:focus-visible::after { transform: scaleX(1); }
.ch:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }

/* One mark per channel, each with a movement that belongs to it. Masks rather
   than inline SVG because switching language rewrites the innerHTML of these
   links and would delete any markup placed inside them. */
.ch-phone::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}
.ch-phone:hover::before, .ch-phone:active::before, .ch-phone:focus-visible::before { animation: ch-ring 0.6s ease; }
@keyframes ch-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(11deg); }
  60% { transform: rotate(-7deg); }
  80% { transform: rotate(4deg); }
}

.ch-mail::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18c.6 0 1 .4 1 1v12c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1V6c0-.6.4-1 1-1zm9 8L4.3 7H19.7L12 13z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18c.6 0 1 .4 1 1v12c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1V6c0-.6.4-1 1-1zm9 8L4.3 7H19.7L12 13z'/%3E%3C/svg%3E");
}
.ch-mail:hover::before, .ch-mail:active::before, .ch-mail:focus-visible::before { transform: translateY(-3px); }

.ch-ig::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.1 3.3.1 4.8 1.7 4.9 4.9.1 1.3.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 3.2-1.7 4.8-4.9 4.9-1.3.1-1.6.1-4.9.1s-3.6 0-4.8-.1c-3.3-.1-4.8-1.7-4.9-4.9C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.8C2.4 4 4 2.4 7.2 2.3 8.4 2.2 8.8 2.2 12 2.2zm0 3.2A6.6 6.6 0 1 0 12 18.6 6.6 6.6 0 0 0 12 5.4zm0 10.9a4.3 4.3 0 1 1 0-8.6 4.3 4.3 0 0 1 0 8.6zm6.9-11.1a1.55 1.55 0 1 1-3.1 0 1.55 1.55 0 0 1 3.1 0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.1 3.3.1 4.8 1.7 4.9 4.9.1 1.3.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 3.2-1.7 4.8-4.9 4.9-1.3.1-1.6.1-4.9.1s-3.6 0-4.8-.1c-3.3-.1-4.8-1.7-4.9-4.9C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.8C2.4 4 4 2.4 7.2 2.3 8.4 2.2 8.8 2.2 12 2.2zm0 3.2A6.6 6.6 0 1 0 12 18.6 6.6 6.6 0 0 0 12 5.4zm0 10.9a4.3 4.3 0 1 1 0-8.6 4.3 4.3 0 0 1 0 8.6zm6.9-11.1a1.55 1.55 0 1 1-3.1 0 1.55 1.55 0 0 1 3.1 0z'/%3E%3C/svg%3E");
}
.ch-ig:hover::before, .ch-ig:active::before, .ch-ig:focus-visible::before { animation: ch-focus 0.55s ease; }
@keyframes ch-focus {
  0%, 100% { transform: scale(1) rotate(0); }
  45% { transform: scale(0.82) rotate(-8deg); }
}

.ch-fb::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8.5V6.8c0-.8.2-1.3 1.4-1.3H17V2.6c-.3 0-1.3-.1-2.4-.1-2.4 0-4.1 1.5-4.1 4.2v1.8H8v3h2.5V21H14v-9.5h2.6l.4-3H14z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8.5V6.8c0-.8.2-1.3 1.4-1.3H17V2.6c-.3 0-1.3-.1-2.4-.1-2.4 0-4.1 1.5-4.1 4.2v1.8H8v3h2.5V21H14v-9.5h2.6l.4-3H14z'/%3E%3C/svg%3E");
}
.ch-fb:hover::before, .ch-fb:active::before, .ch-fb:focus-visible::before { transform: translateY(-3px) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .ch::before, .ch::after { transition: none; animation: none !important; }
}

/* And a gold rule that draws itself under each line as the section arrives — one
   after another, in reading order. This is the half a phone visitor actually
   sees, because scrolling to a section costs nothing and hovering is impossible. */
.contact-line { position: relative; }
.contact-line::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: linear-gradient(to left, var(--gold), rgba(212,146,10,0));
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
html[dir="ltr"] .contact-line::after {
  background: linear-gradient(to right, var(--gold), rgba(212,146,10,0));
  transform-origin: left;
}
.contact-line.is-visible::after { transform: scaleX(1); }
.contact-line:nth-child(2).is-visible::after { transition-delay: 0.12s; }
.contact-line:nth-child(3).is-visible::after { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .contact-go::after, .contact-big::after, .contact-social a::after { transition: none; }
  .contact-go { transition: none; }
}

/* Phone, email and social as three quiet lines under the plate. */
.contact-lines {
  display: grid; gap: 0; margin-top: 2.25rem;
  border-top: 1px solid rgba(244,238,222,0.1);
}
@media (min-width: 760px) {
  .contact-lines { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; }
  .contact-line + .contact-line { border-top: none; border-inline-start: 1px solid rgba(244,238,222,0.1); padding-inline-start: 2.5rem; }
}
.contact-line { display: flex; flex-direction: column; gap: 0.4rem; padding-block: 1.6rem; }
.contact-line + .contact-line { border-top: 1px solid rgba(244,238,222,0.1); }
.contact-big {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 3.4vw, 1.6rem);
  color: var(--cream); letter-spacing: 0.02em;
  display: inline-flex; align-items: center; min-height: 44px; width: fit-content;
  transition: color 0.25s ease;
}
.contact-big-sm { font-size: clamp(0.95rem, 2.6vw, 1.1rem); }
.contact-big:hover { color: var(--gold-soft); }
.contact-big:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
.contact-social { display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; margin: 0; }
.contact-social a {
  font-size: 1rem; color: var(--cream-dim);
  /* min-height alone left these at 43px once the flex line-box rounded down;
     min-width matters too, since a two-word link can be narrower than a thumb. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; min-width: 46px;
  transition: color 0.25s ease;
}
.contact-social a:hover, .contact-social a:active { color: var(--gold-soft); }
.contact-social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.contact-item {
  display: flex; flex-direction: column; gap: 0.6rem;
  background: rgba(12,26,43,0.45);
  /* See the note on .testimonial-card — same reasoning. */
  border: 1px solid rgba(212,146,10,0.14);
  border-radius: 14px;
  padding: 1.6rem 1.75rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.contact-item:hover { border-color: rgba(212,146,10,0.35); box-shadow: 0 12px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.07); transform: translateY(-2px); }
.contact-icon { font-size: 1.1rem; color: var(--gold); margin-bottom: 0.4rem; }
.contact-text { color: var(--cream-dim); font-size: 0.82rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.35rem; }
.contact-link { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--cream); transition: color 0.2s; min-height: 44px; display: inline-flex; align-items: center; }
.contact-link:hover { color: var(--gold-soft); }

/* ---------- EVENTS ---------- */
/* 9rem top and bottom stacked with the next section's own 5rem, leaving 224px of
   empty navy between the events copy and the Find-us heading — a hole rather
   than a breath. The bottom is trimmed so the two sections read as consecutive. */
.events { position: relative; max-width: var(--content-max); margin: 0 auto; padding: 9rem var(--pad-x) 5rem; overflow: hidden; display: grid; gap: 4rem; align-items: center; }
@media (min-width: 860px) { .events { grid-template-columns: 1fr 1fr; } }
.events-image { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(212,146,10,0.15), 0 24px 60px rgba(0,0,0,0.5); }
.events-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; filter: brightness(0.88) saturate(0.9); transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.events-image:hover img { filter: brightness(0.95) saturate(1.05); transform: scale(1.03); }
.events-panel { position: relative; max-width: 60ch; }
.events-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.15; margin: 0 0 1.75rem; text-shadow: 0 4px 40px rgba(0,0,0,0.5); }
.events-text { color: var(--cream-dim); font-size: 1rem; font-weight: 300; line-height: 1.95; margin: 0 0 2.25rem; }
.events-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- CTA ---------- */
.cta {
  padding: 10rem var(--pad-x);
  background: var(--navy-900);
  display: flex; justify-content: center; text-align: center;
  border-top: 1px solid rgba(212,146,10,0.15);
  position: relative; overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(212,146,10,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.cta-panel { max-width: 640px; position: relative; z-index: 1; }
.cta-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 5vw, 3.25rem); line-height: 1.15; margin: 0 0 1.25rem; text-shadow: 0 2px 30px rgba(0,0,0,0.5); }
.cta-sub { color: var(--cream-dim); font-weight: 400; margin: 0 0 2.5rem; font-size: 1.05rem; line-height: 1.8; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- FOOTER ---------- */
.site-footer { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; padding: 3rem var(--pad-x); border-top: 1px solid transparent; background: linear-gradient(to bottom, var(--navy-900), var(--navy-950)); font-size: 0.85rem; color: var(--cream-dim); position: relative; }
.site-footer::before { content: ''; position: absolute; top: 0; left: var(--pad-x); right: var(--pad-x); height: 1px; background: linear-gradient(90deg, transparent, rgba(212,146,10,0.35), transparent); }
.footer-brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; color: var(--cream); transition: color 0.2s; }
.footer-brand:hover { color: var(--gold-soft); }
.footer-logo { width: 22px; height: 22px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; font-weight: 500; }
.footer-links a { position: relative; transition: color 0.2s; min-height: 44px; display: inline-flex; align-items: center; }
.footer-links a::after { content: ''; position: absolute; right: 0; left: 0; bottom: -2px; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform 0.25s ease; }
.footer-links a:hover { color: var(--gold-soft); }
.footer-links a:hover::after { transform: scaleX(1); }
.footer-meta { opacity: 0.6; font-size: 0.78rem; letter-spacing: 0.03em; }

/* ---------- FLOATING RESERVE CTA (mobile-first, always reachable) ---------- */
.floating-reserve {
  position: fixed;
  z-index: 60;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(212,146,10,0.35), 0 2px 8px rgba(0,0,0,0.4);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.floating-reserve:hover { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); transform: translateX(-50%) translateY(-2px); box-shadow: 0 14px 40px rgba(212,146,10,0.45), 0 2px 8px rgba(0,0,0,0.4); }
@media (min-width: 860px) { .floating-reserve { display: none; } }

/* ---------- LTR (English) adjustments ---------- */
html[dir="ltr"] .about-quote { border-right: none; border-left: 2px solid var(--gold); padding-right: 0; padding-left: 1rem; }
html[dir="ltr"] .scroll-cue { right: auto; left: var(--pad-x); }
html[dir="ltr"] .step-copy { right: auto; left: var(--pad-x); text-align: left; }

/* ---------- PHOTO MARQUEE STRIP ---------- */
.photo-marquee {
  overflow: hidden;
  /* LTR on the container, not just the track: under the page's RTL the
     max-content track was right-aligned and overflowed leftwards, so the
     leftward scroll transform pushed it straight out of view and the band
     emptied. The strip is aria-hidden, so reading direction does not matter. */
  direction: ltr;
  padding: 3rem 0;
  background: var(--navy-900);
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid rgba(212,146,10,0.12);
  border-bottom: 1px solid rgba(212,146,10,0.12);
}
.photo-marquee-track {
  display: flex;
  gap: 0.9rem;
  width: max-content;
  will-change: transform;
  /* Forced LTR: the strip is decorative (aria-hidden), and under the page's RTL
     the flex row ran right-to-left, which inverted offsetLeft and made the loop
     period wrong — the strip drifted off into empty space instead of wrapping. */
  direction: ltr;
  /* התנועה מונעת ב-JS (rAF) — ראה marqueeDrive ב-main.js. אנימציית CSS
     התבררה כלא-אמינה במכונות מסוימות (הגדרות מערכת/דפדפן משביתות אותה). */
}
.photo-marquee-track img {
  width: 260px;
  height: 390px;
  object-fit: cover;
  object-position: center top;
  border-radius: 10px;
  flex-shrink: 0;
  opacity: 0.82;
  transition: opacity 0.4s, transform 0.55s cubic-bezier(0.25,0,0,1);
  cursor: pointer;
}
.photo-marquee-track img:hover { opacity: 1; transform: scale(1.05) translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,146,10,0.2); }
/* The strip is animated by the compositor, not by script. It used to have its
   transform assigned from JavaScript on every animation frame — main-thread work
   on a 9,000px-wide element for the whole second half of the page.

   The distance is a custom property rather than -50% on purpose: half the track
   width falls half a gap short of the true loop point, and that error accumulates
   into a visible blank. JS measures the exact offset once and sets it here. */
@keyframes marquee-rtl {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--marquee-shift, 50%)), 0, 0); }
}
.photo-marquee-track.is-running {
  animation: marquee-rtl var(--marquee-duration, 180s) linear infinite;
}
/* Runs continuously at one speed — the owner asked for no pause on hover, and a
   slowed-down version under reduced-motion read as broken. The pause button is
   the accessible control instead. */

/* ---------- MOOD PANEL (split photo + quote) ---------- */
.mood-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 580px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.mood-panel-image {
  position: relative;
  overflow: hidden;
}
/* Absolute, not just height:100%. The panel is sized by min-height and this
   cell has no explicit height of its own, so a percentage height on the image
   had nothing to resolve against and was ignored — the photo fell back to its
   own intrinsic height and stretched the row from 580px to 1069px the instant
   it finished loading, shoving all 489px of that into the middle of the page
   while the visitor was scrolling through it. Taking the image out of flow
   fixes the panel height before the file arrives. The mobile layout never
   showed this because it sets an explicit height: 320px below. */
.mood-panel-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 8s cubic-bezier(0.25, 0, 0, 1);
  filter: brightness(0.88) saturate(1.05);
}
.mood-panel:hover .mood-panel-image img { transform: scale(1.06); filter: brightness(0.92) saturate(1.1); }
.mood-panel-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(12,26,43,0.35) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}
html[dir="ltr"] .mood-panel-image::after { background: linear-gradient(to right, rgba(12,26,43,0.35) 0%, transparent 60%); }
.mood-panel-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 8vw, 7rem) clamp(2rem, 5vw, 5rem);
  background: linear-gradient(135deg, var(--navy-900) 0%, rgba(12,26,43,0.95) 100%);
  position: relative;
  border-right: 1px solid rgba(212,146,10,0.1);
}
html[dir="ltr"] .mood-panel-content { border-right: none; border-left: 1px solid rgba(212,146,10,0.1); }
/* The giant opening-quote glyph that used to sit here is gone. The line beside
   it was rewritten from an invented testimonial into a plain statement about the
   room, so a quotation mark over it now claims someone said words that nobody
   said — the same problem as the fabricated quote itself, just drawn instead of
   typed. The panel carries its weight on the photograph and the type. */
.mood-quote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  line-height: 1.65;
  color: var(--cream);
  margin: 0 0 2rem;
  font-style: italic;
  font-weight: 400;
  border: none;
  padding: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.mood-label {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.mood-label::before { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--gold); }
@media (max-width: 760px) {
  .mood-panel { grid-template-columns: 1fr; }
  .mood-panel-image { height: 320px; }
  .mood-panel-content { padding: 3rem var(--pad-x); }
}
html[dir="ltr"] .mood-panel { direction: ltr; }

/* ---------- GALLERY PREMIUM HOVER ---------- */
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212,146,10,0.18) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.gallery-item { position: relative; }
.gallery-item:hover::after { opacity: 1; }
.gallery-item:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,146,10,0.2); }

/* ---------- MARQUEE EDGE FADES ---------- */
.photo-marquee::before,
.photo-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.photo-marquee::before { right: 0; background: linear-gradient(to left, var(--navy-900), transparent); }
.photo-marquee::after  { left: 0;  background: linear-gradient(to right, var(--navy-900), transparent); }

/* ---------- SECTION GOLD DIVIDER ---------- */
.section-divider {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  opacity: 0.55;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.section-divider-icon {
  width: 18px; height: 18px;
  fill: var(--gold);
  flex-shrink: 0;
}

/* ---------- MENU CARD PREMIUM BADGE ---------- */
.menu-card[data-featured]::before {
  content: attr(data-featured);
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  color: var(--ink);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 50px;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(212,146,10,0.4);
}

/* ---------- HERO NUMBER STATS ROW ---------- */
.stats-row {
  display: flex;
  gap: clamp(2rem, 6vw, 5rem);
  padding: 4rem var(--pad-x);
  max-width: var(--content-max);
  margin: 0 auto;
  border-top: 1px solid rgba(212,146,10,0.15);
  border-bottom: 1px solid rgba(212,146,10,0.15);
  position: relative;
}
.stats-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(212,146,10,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
}
/* Solid gold, not a gradient clipped to the glyphs. Same reasoning as the hero
   headline above: gradient-filled type is decoration that carries no meaning,
   and it is one of the surest visual tells of a generated design. */
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 400;
  color: var(--gold-soft);
  line-height: 1;
}
.stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: rgba(245,230,200,0.5);
  text-transform: uppercase;
}
@media (max-width: 600px) { .stats-row { flex-wrap: wrap; gap: 1.5rem 3rem; } }

/* ---------- ATMOSPHERE TRIO (above stats) ---------- */
.atm-trio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 10px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2.5rem var(--pad-x) 0;
  height: 380px;
}
.atm-trio-item {
  overflow: hidden;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(212,146,10,0.08);
}
.atm-trio-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.7s ease;
  filter: brightness(0.9) saturate(0.95);
}
.atm-trio-item:hover img { transform: scale(1.04); filter: brightness(0.95) saturate(1.05); }
.atm-trio-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6,14,24,0.4) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 768px) {
  .atm-trio { grid-template-columns: 1fr 1fr; height: auto; padding-top: 1.5rem; }
  .atm-trio-item { height: 200px; }
  .atm-trio-item:last-child { grid-column: span 2; }
}
@media (max-width: 480px) {
  .atm-trio { grid-template-columns: 1fr; height: auto; }
  .atm-trio-item { height: 220px; }
  .atm-trio-item:last-child { grid-column: auto; }
}

/* ---------- TESTIMONIALS ---------- */
.testimonials {
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x);
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: center;
}
.testimonials-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 500;
  color: var(--cream);
  margin: 0.4rem 0 2.5rem;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  text-align: right;
}
.testimonial-card {
  background: rgba(22,49,77,0.4);
  /* No backdrop-filter: these cards scroll, and blurring what is behind them
     costs a re-blur per frame for an effect invisible against the dark page. */
  border: 1px solid rgba(212,146,10,0.12);
  border-radius: 16px;
  padding: 2rem 1.8rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.testimonial-card:hover { border-color: rgba(212,146,10,0.4); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(212,146,10,0.18), inset 0 1px 0 rgba(255,255,255,0.07); }
.testimonial-stars {
  color: var(--gold-soft);
  font-size: 1rem;
  letter-spacing: 0.1em;
}
.testimonial-text {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(245,230,200,0.82);
  margin: 0;
  quotes: none;
}
.testimonial-author {
  font-size: 0.78rem;
  color: var(--gold-soft);
  letter-spacing: 0.08em;
  font-style: normal;
  opacity: 0.75;
}

/* ---------- INSTAGRAM GRID ---------- */
.insta-section {
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x);
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: center;
}
.insta-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 400;
  color: var(--gold-soft);
  margin: 0.4rem 0 2rem;
  font-style: italic;
  letter-spacing: 0.02em;
}
.insta-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.insta-item {
  aspect-ratio: 1;
  overflow: hidden;
  display: block;
  position: relative;
  border-radius: 8px;
}
.insta-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.insta-item:hover img { transform: scale(1.06); }
.insta-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,14,24,0.75) 0%, rgba(6,14,24,0.2) 60%, transparent 100%);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 0.75rem;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.insta-item:hover .insta-overlay { opacity: 1; }
.insta-item:hover img { transform: scale(1.08); }
@media (max-width: 768px) {
  .insta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .insta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- HOURS + COUNTDOWN + MAP ---------- */
.hours-section {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3rem;
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x);
  max-width: var(--content-max);
  margin: 0 auto;
  align-items: center;
  border-top: 1px solid rgba(212,146,10,0.1);
}
.hours-panel {
  /* Opacity raised in place of a backdrop-filter: the panel scrolls, and blurring
     what is behind it costs a re-blur on every frame it is on screen. */
  background: rgba(12,26,43,0.88);
  border: 1px solid rgba(212,146,10,0.14);
  border-radius: 16px;
  padding: 2rem 2.25rem;
  box-shadow: 0 4px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
}
.hours-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 500;
  color: var(--cream);
  margin: 0.4rem 0 0.8rem;
}
.hours-schedule {
  font-size: 1rem;
  color: rgba(245,230,200,0.7);
  margin: 0 0 2rem;
  line-height: 1.6;
}
.hours-countdown { margin-top: 1rem; }
.countdown-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,230,200,0.62);
  margin: 0 0 0.8rem;
}
.countdown-timer {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  direction: ltr;
}
.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.countdown-unit span {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 500;
  color: var(--gold-soft);
  line-height: 1;
  min-width: 2ch;
  text-align: center;
}
.countdown-unit label {
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245,230,200,0.62);
}
.countdown-sep {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: rgba(212,146,10,0.4);
  margin-top: 0.1em;
  align-self: flex-start;
}
.countdown-open-msg {
  font-size: 0.85rem;
  color: var(--gold-soft);
  letter-spacing: 0.12em;
  margin: 1rem 0 0;
  display: none;
  animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; text-shadow: 0 0 12px rgba(212,146,10,0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .countdown-open-msg { animation: none; opacity: 1; }
  html { scroll-behavior: auto; }
  .reveal, .continuous-reveal, .word-reveal {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}
/* The iframe paints its own white page before Google's map draws into it, and
   on a dark site that is a full-width white rectangle appearing mid-scroll —
   it reads as the page breaking rather than as a map loading. The height is
   already reserved, so nothing moves; only the colour was wrong. */
.hours-map iframe { display: block; background: #0b1724; }
@media (max-width: 900px) {
  .hours-section { grid-template-columns: 1fr; }
  .hours-map { order: -1; }
}

/* ---------- ALLERGEN BADGES ---------- */
.menu-card[data-allergens] .menu-card-body {
  position: relative;
}
.menu-card[data-allergens]::after {
  content: '';
  display: none;
}
.menu-card[data-allergens="v"] .menu-card-body::after,
.menu-card[data-allergens="ve gf"] .menu-card-body::after {
  content: attr(data-allergen-label);
}
.allergen-row {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.allergen-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.18rem 0.45rem;
  border-radius: 3px;
  text-transform: uppercase;
}
.allergen-badge.v {
  background: rgba(72,160,80,0.18);
  border: 1px solid rgba(72,160,80,0.4);
  color: #7dd87f;
}
.allergen-badge.ve {
  background: rgba(34,139,34,0.18);
  border: 1px solid rgba(34,139,34,0.45);
  color: #5bcc5b;
}
.allergen-badge.gf {
  background: rgba(212,146,10,0.12);
  border: 1px solid rgba(212,146,10,0.35);
  color: var(--gold-soft);
}
/* ---------- STAT COUNTER ANIMATION ---------- */
@keyframes count-up { from { opacity: 0.4; } to { opacity: 1; } }
.stat-number.counting { animation: count-up 0.8s ease-out forwards; }

/* ---------- LANDSCAPE PHONES ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .walkin-label {
    bottom: auto; top: 50%; transform: translateY(-50%);
    max-width: 34ch; padding: 1rem 1.2rem;
  }
  .walkin-label.is-visible { transform: translateY(-50%); }
  .step-title { font-size: 1.35rem; }
  .step-desc { font-size: 0.85rem; line-height: 1.5; }
  .site-header { padding: 0.5rem var(--pad-x); }
  .logo-mark { width: 34px; height: 34px; }
  .mobile-nav { padding-top: 4.5rem; gap: 0.6rem; }
}

/* The panel is position:fixed, so content past the viewport is unreachable
   without its own scroll container. */
.mobile-nav { max-height: 100svh; overflow-y: auto; }

/* ---------- NARROW PHONES ---------- */
@media (max-width: 400px) {
  .logo-mark { width: 40px; height: 40px; }
  /* .floating-reserve already carries this CTA below 860px; keeping both wrapped
     the pill onto two lines and pushed the header to 104px. */
  .site-header .btn-pill { display: none; }
  .nav-toggle { flex-shrink: 0; }
  .brand-veil img { min-width: 240px; }
}

/* Below 860px the floating reserve button sits at the bottom of the viewport,
   where the walk-in caption and its CTA also live. */
@media (max-width: 859px) {
  .walkin-label { bottom: calc(9% + 60px); }
  .hero-overlay-cta { bottom: calc(8vh + 60px); }
}

@media (max-width: 760px) {
  .photo-marquee-track img { width: 150px; height: 210px; }
  .photo-marquee::before, .photo-marquee::after { width: 48px; }
}

/* ---------- MENU CARD AS LINK (bar → cocktails) ---------- */
.menu-card-link .menu-card-jump { display: block; color: inherit; height: 100%; }
.menu-card-cta {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold-soft);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.menu-card-link:hover .menu-card-cta { transform: translateX(6px); }
html[dir="ltr"] .menu-card-link:hover .menu-card-cta { transform: translateX(-6px); }

/* Landing target for the in-page jump from the bar card. */
#cocktails { scroll-margin-top: 110px; }
@keyframes cocktail-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,146,10,0); }
  35%      { box-shadow: 0 0 0 3px rgba(232,184,76,0.55); }
}
#cocktails:target { animation: cocktail-flash 1.6s ease-out; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { #cocktails:target { animation: none; } }

/* Column key for price lists that carry two or three figures per row. */
.pl-columns {
  margin: -0.35rem 0 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold-soft);
  opacity: 0.85;
  text-align: end;
}


/* Pause control for the photo strip (WCAG 2.2.2). Deliberately quiet — it sits
   in the corner of the strip and only gains presence on hover or focus. */
.marquee-pause {
  position: absolute;
  bottom: 0.9rem; left: 0.9rem;
  z-index: 3;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; line-height: 1;
  color: var(--cream);
  background: rgba(6,14,24,0.6);
  border: 1px solid rgba(245,230,200,0.25);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}
.photo-marquee:hover .marquee-pause,
.marquee-pause:focus-visible { opacity: 1; border-color: var(--gold); }

/* ---------- EVENTS LIVE VIDEO ---------- */
/* Two portrait 9:16 clips side by side, in the slot that used to hold one 4:3
   photo. Row on anything wide enough for two ~13rem tiles plus a gap; column
   below that, so neither clip gets too narrow to read on a phone. */
.events-media {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
  margin-inline: auto;
  max-width: 100%;
}
@media (max-width: 420px) {
  .events-media { flex-direction: column; align-items: center; }
}
.events-video {
  margin: 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(212,146,10,0.15), 0 24px 60px rgba(0,0,0,0.5);
  width: min(100%, 13rem);
  background: var(--navy-900);
  flex-shrink: 0;
}
@media (max-width: 420px) {
  .events-video { width: min(100%, 18rem); }
}
.events-video video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  max-height: 60vh;
}
/* Reduced motion: hold on the poster instead of playing. */
@media (prefers-reduced-motion: reduce) {
  .events-video video { content-visibility: auto; }
}

/* ---------- REAL GOOGLE REVIEWS ---------- */
.testimonials-grid { align-items: start; }
.testimonial-card { display: flex; flex-direction: column; }
.testimonial-text { flex: 1; }
.testimonial-meta {
  display: flex; flex-direction: column; gap: 0.2rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(245,230,200,0.12);
}
.testimonial-author {
  font-style: normal;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cream);
}
.testimonial-source {
  font-size: 0.76rem;
  color: rgba(245,230,200,0.62);
  letter-spacing: 0.02em;
}
.testimonials-link {
  display: inline-flex; align-items: center;
  min-height: 44px;
  margin-top: 2.25rem;
  font-size: 0.9rem; font-weight: 600;
  color: var(--gold-soft);
  border-bottom: 1px solid rgba(232,184,76,0.4);
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.testimonials-link:hover { color: var(--cream); border-color: var(--cream); }