/* ===== colors_and_type.css ===== */
/* =========================================================================
   Famous Drive — Design Tokens
   Editorial luxury · obsidian + champagne · Bodoni Moda + Jost
   ========================================================================= */

/* Guard: decorative hero glows must never cause horizontal scroll on any device.
   `clip` (not `hidden`) avoids creating a scroll container, so the sticky nav still works. */
html, body { overflow-x: clip; }

/* Perf: kill the will-change "layer explosion" (was ~146 promoted GPU layers on
   the homepage → constant recompositing = the scroll lag + flicker). will-change
   is only a compositor HINT, so removing it is visually identical; animations
   still run (the browser promotes actively-animating elements on its own). */
*, *::before, *::after { will-change: auto !important; }

/* A11y: ≥44px tap targets on phones/tablets for the primary CONTROLS — hamburger,
   buttons, language switcher, and form fields. Intentionally NOT applied to text/
   footer links (forcing those to 44px would bloat the layout) or the booking bar. */
@media (max-width: 900px) {
  .nav-burger { min-width: 44px; min-height: 44px; }
  .fd-lang__btn { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .btn, a.btn, button.btn, .lux-btn, .ac-btn { min-height: 44px; }
  .formcard input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
  .formcard select, .formcard textarea,
  .field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea { min-height: 44px; }
}

/* Self-hosted brand fonts (was a Google Fonts @import — that's render-blocking,
   network-dependent, and showed a fallback flash on slow/first loads, making the
   site look different across machines). These load instantly from our own server. */
@font-face{font-family:'Cormorant';font-style:italic;font-weight:300;font-display:swap;src:url('assets/fonts/cormorant-300-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/cormorant-400-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/cormorant-300.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/cormorant-400.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/cormorant-500.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/cormorant-600.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:200;font-display:swap;src:url('assets/fonts/outfit-200.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/outfit-300.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/outfit-400.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/outfit-500.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/outfit-600.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/outfit-700.woff2') format('woff2')}

:root {
  /* ---------- Palette (raw) ---------- */
  --obsidian:        #0A0908;   /* primary bg, warm-shifted black */
  --charcoal:        #14110F;   /* elevated surface */
  --smoke:           #1F1B17;   /* 2nd elevation */
  --ash:             #2A2520;   /* hovers on dark surfaces */
  --bone:            #FFFFFF;   /* primary fg on dark, "white" */
  --ivory:           #F4EFE6;   /* light surface */
  --parchment:       #DCD3BE;   /* muted fg on dark */
  --champagne:       #C8A86B;   /* singular accent */
  --champagne-soft:  #B79363;   /* hovers, secondary */
  --antique-brass:   #8C6E3D;   /* deep tone, fg on bone */
  --lead:            #5C5650;   /* disabled */
  --verdigris:       #5C7A6E;   /* success */
  --ember:           #B0593B;   /* alert */

  /* ---------- Alphas of bone (workhorse on dark) ---------- */
  --bone-04:  rgba(234, 227, 210, 0.04);
  --bone-08:  rgba(234, 227, 210, 0.08);
  --bone-10:  rgba(234, 227, 210, 0.10);
  --bone-16:  rgba(234, 227, 210, 0.16);
  --bone-24:  rgba(234, 227, 210, 0.24);
  --bone-40:  rgba(234, 227, 210, 0.78);
  --bone-60:  rgba(234, 227, 210, 0.60);
  --bone-72:  rgba(234, 227, 210, 0.72);

  --champagne-16: rgba(200, 168, 107, 0.16);
  --champagne-40: rgba(200, 168, 107, 0.40);

  /* ---------- Semantic colors ---------- */
  --bg:              var(--obsidian);
  --bg-elevated:     var(--charcoal);
  --bg-overlay:      rgba(10, 9, 8, 0.72);

  --surface-glass:   rgba(20, 17, 15, 0.60);
  --surface-light:   var(--ivory);

  --fg:              var(--bone);
  --fg-muted:        var(--bone-60);
  --fg-subtle:       var(--bone-40);
  --fg-on-light:     var(--obsidian);
  --fg-on-light-muted: var(--antique-brass);

  --accent:          var(--champagne);
  --accent-press:    var(--champagne-soft);

  --hairline:        var(--bone-10);
  --hairline-strong: var(--bone-24);
  --hairline-light:  rgba(140, 110, 61, 0.18);

  --success:         var(--verdigris);
  --alert:           var(--ember);
  --disabled:        var(--lead);

  /* ---------- Type families ---------- */
  /* Light serif headings (Cormorant) + light sans body (Outfit). */
  --font-display: 'Cormorant', Georgia, serif;
  --font-serif:   'Cormorant', Georgia, serif;
  --font-sans:    'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'Outfit', ui-monospace, SFMono-Regular, monospace;
  /* aliases for the typography spec */
  --serif: var(--font-serif);
  --sans:  var(--font-sans);

  /* ---------- Type scale ---------- */
  --fs-hero:    144px;
  --fs-h1:      96px;
  --fs-h2:      56px;
  --fs-h3:      32px;
  --fs-h4:      24px;
  --fs-body-l:  20px;
  --fs-body:    16px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;
  --fs-micro:   10px;

  --lh-display: 0.96;  /* @kind font */
  --lh-tight:   1.08;  /* @kind font */
  --lh-snug:    1.25;  /* @kind font */
  --lh-body:    1.55;  /* @kind font */
  --lh-loose:   1.7;   /* @kind font */

  --tracking-eyebrow:   0.18em;    /* @kind font */
  --tracking-nav:       0.14em;    /* @kind font */
  --tracking-tight:     -0.02em;   /* @kind font */
  --tracking-display:   -0.025em;  /* @kind font */

  /* ---------- Spacing (8px base) ---------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;
  --s-11:  192px;
  --s-12:  256px;

  /* ---------- Radii ---------- */
  --r-sharp:  0px;
  --r-soft:   2px;
  --r-pill:   999px;

  /* ---------- Shadows (light surfaces only) ---------- */
  --shadow-light-1: 0 1px 2px rgba(20,17,15,0.04), 0 12px 32px rgba(20,17,15,0.06);
  --shadow-light-2: 0 1px 2px rgba(20,17,15,0.06), 0 24px 64px rgba(20,17,15,0.10);

  /* On dark, depth = hairlines, not shadow */

  /* ---------- Motion ---------- */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --ease-out:       cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-inout:     cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */

  --d-fast:    150ms;   /* @kind other */
  --d-base:    300ms;   /* @kind other */
  --d-slow:    700ms;   /* @kind other */
  --d-reveal:  1200ms;  /* @kind other */

  /* ---------- Grid ---------- */
  --gutter-desktop: 96px;  /* @kind spacing */
  --gutter-tablet:  48px;  /* @kind spacing */
  --gutter-mobile:  24px;  /* @kind spacing */
  --edge-desktop:   64px;  /* @kind spacing */
  --edge-mobile:    24px;  /* @kind spacing */

  /* ---------- Glass ---------- */
  --glass-blur:     blur(8px) saturate(140%);          /* @kind other */
  --glass-bg:       rgba(20, 17, 15, 0.60);             /* @kind color */
  --glass-border:   1px solid rgba(234, 227, 210, 0.08); /* @kind other */
}

/* =========================================================================
   Base
   ========================================================================= */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11', 'kern';
}

::selection { background: var(--champagne); color: var(--obsidian); }

/* A11y (WCAG 1.4.1 / link-in-text-block): inline prose links must be distinguishable
   by more than colour — underline gold links that sit inside body text. */
p a[style*="gold"], li a[style*="gold"], .doc a[style*="gold"], .lede a[style*="gold"] {
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(217, 174, 116, 0.55);
}

/* =========================================================================
   Semantic typography classes
   ========================================================================= */

.t-hero {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.t-h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-eyebrow--accent { color: var(--accent); }

.t-body-l {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body-l);
  line-height: 1.5;
  color: var(--fg-muted);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg-muted);
}

.t-nav {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--fg);
}

.t-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-feature-settings: 'smcp';
}

.t-italic {
  font-style: italic;
  font-family: var(--font-display);
}

/* Tabular numerals (timetables, fares, plates) */
.t-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* =========================================================================
   Element defaults — opt-in via .prose
   ========================================================================= */
.prose h1 { @extend .t-h1; }
.prose h2 { @extend .t-h2; }
.prose h3 { @extend .t-h3; }
.prose p  { @extend .t-body; max-width: 64ch; }

/* =========================================================================
   Utility primitives
   ========================================================================= */
.hairline      { border-bottom: 1px solid var(--hairline); }
.hairline-top  { border-top:    1px solid var(--hairline); }
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
}

/* Brand wordmark rendered as an IMAGE in the nav — pixel-identical across OS. Universal (homepage React nav doesn't load page-unify.css). */
.nav-mark__wm { height: 13px; width: auto; display: inline-block; vertical-align: middle; margin-left: 0.55em; }
.nav .mark::after, .nav-mark::after { content: none !important; }

/* ── Editorial interlude — full-bleed photographic pause (Jul 2026) ───────── */
.fd-interlude{position:relative;min-height:54vh;background-size:cover;background-position:center;background-attachment:fixed;display:flex;align-items:center;justify-content:center;border-top:1px solid rgba(250,241,221,.13);padding:0;overflow:hidden;}
.fd-interlude::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,30,18,.44),rgba(42,30,18,.18) 50%,rgba(42,30,18,.5));z-index:1;}
.fd-interlude__inner{position:relative;text-align:center;padding:72px 28px;z-index:2;}
.fd-interlude__inner .eyebrow{margin-bottom:14px;}
.fd-interlude__inner h2{font-family:'Cormorant',Georgia,serif;font-style:italic;font-weight:400;color:#FAF1DD;font-size:clamp(1.7rem,3.4vw,2.6rem);margin:0;}
@media(max-width:900px){.fd-interlude{background-attachment:scroll;min-height:40vh;}}
/* interlude v2 — JS-driven parallax drift + caption reveal (fd-interlude.js).
   The script moves the image onto a .fd-interlude__bg layer so it can be
   transformed; without JS the rules above stand as the full fallback. */
.fd-interlude.fdi-js{background-image:none !important;background-attachment:scroll;}
.fd-interlude__bg{position:absolute;left:0;right:0;top:-10%;bottom:-10%;background-size:cover;background-position:center;will-change:transform;z-index:0;}
.fd-interlude.fdi-js .fd-interlude__inner .eyebrow,
.fd-interlude.fdi-js .fd-interlude__inner h2{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1);}
.fd-interlude.fdi-js .fd-interlude__inner h2{transition-delay:.18s;}
.fd-interlude.fdi-in .fd-interlude__inner .eyebrow,
.fd-interlude.fdi-in .fd-interlude__inner h2{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .fd-interlude.fdi-js .fd-interlude__inner .eyebrow,.fd-interlude.fdi-js .fd-interlude__inner h2{opacity:1;transform:none;transition:none;}
  .fd-interlude__bg{transform:none !important;}
}

/* ── Image-led editorial duet (Jul 2026) — the Aman/Rolls pattern: the photo
   is the sentence, the text is the footnote. Large sharp image + short copy. ── */
.fd-duet{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;margin-top:2.2rem;}
.fd-duet__fig{position:relative;margin:0;}
.fd-duet__fig img{width:100%;display:block;border-radius:4px;border:1px solid rgba(217,174,116,.28);box-shadow:0 24px 60px -28px rgba(0,0,0,.7);aspect-ratio:4/3;object-fit:cover;}
.fd-duet__fig figcaption{margin-top:10px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#D9AE74;opacity:.85;}
.fd-duet__copy p{max-width:34rem;}
.fd-duet__copy p+p{margin-top:.9em;}
@media(max-width:860px){.fd-duet{grid-template-columns:1fr;gap:20px;}.fd-duet__fig{order:-1;}}

/* ── Photo-backed section (Jul 2026) — the image IS the section background,
   content floats on top. Owner: framed images read too small. ── */
.fd-photoback{position:relative;overflow:hidden;background-size:cover;background-position:center;padding:110px 0;}
.fd-photoback::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,21,13,.84),rgba(30,21,13,.58) 55%,rgba(30,21,13,.86));}
.fd-photoback>.wrap{position:relative;z-index:2;}
/* Airy statement lines — fewer, longer, never a text wall */
.fd-line{max-width:58rem;font-size:1.12rem;line-height:1.9;}
.fd-line+.fd-line{margin-top:1.1em;}

/* A11y: booking widget + language switcher tap targets (audit Jul 3) */
@media (max-width: 900px) {
  .fdb-date-btn, .hbq-sel__btn, .hbq__bar-input, .fdb-input { min-height: 44px; }
  .fd-lang__btn { min-width: 44px; min-height: 44px; }
}

/* ── Mobile image swap (AUTO-GENERATED — regenerate when adding band/hero images):
   phones get the 760px -sm variant of every band/photoback/hero background.
   !important beats the inline style; fd-interlude.js reads COMPUTED style so
   its parallax layer inherits the swap. ── */
@media (max-width: 700px){
.fd-interlude[style*="/cabin-cashmere.webp"],
.fd-photoback[style*="/cabin-cashmere.webp"],
.hero-ph[style*="/cabin-cashmere.webp"],
.sp-hero__bg[style*="/cabin-cashmere.webp"],
.lux-hero__bg[style*="/cabin-cashmere.webp"]{background-image:url('assets/editorial/cabin-cashmere-sm.webp') !important;}
.fd-interlude[style*="/euro-boulevard.webp"],
.fd-photoback[style*="/euro-boulevard.webp"],
.hero-ph[style*="/euro-boulevard.webp"],
.sp-hero__bg[style*="/euro-boulevard.webp"],
.lux-hero__bg[style*="/euro-boulevard.webp"]{background-image:url('assets/editorial/euro-boulevard-sm.webp') !important;}
.fd-interlude[style*="/facade-dawn.webp"],
.fd-photoback[style*="/facade-dawn.webp"],
.hero-ph[style*="/facade-dawn.webp"],
.sp-hero__bg[style*="/facade-dawn.webp"],
.lux-hero__bg[style*="/facade-dawn.webp"]{background-image:url('assets/editorial/facade-dawn-sm.webp') !important;}
.fd-interlude[style*="/fifth-flatiron.webp"],
.fd-photoback[style*="/fifth-flatiron.webp"],
.hero-ph[style*="/fifth-flatiron.webp"],
.sp-hero__bg[style*="/fifth-flatiron.webp"],
.lux-hero__bg[style*="/fifth-flatiron.webp"]{background-image:url('assets/editorial/fifth-flatiron-sm.webp') !important;}
.fd-interlude[style*="/gloved-hands.webp"],
.fd-photoback[style*="/gloved-hands.webp"],
.hero-ph[style*="/gloved-hands.webp"],
.sp-hero__bg[style*="/gloved-hands.webp"],
.lux-hero__bg[style*="/gloved-hands.webp"]{background-image:url('assets/editorial/gloved-hands-sm.webp') !important;}
.fd-interlude[style*="/hamptons-dune.webp"],
.fd-photoback[style*="/hamptons-dune.webp"],
.hero-ph[style*="/hamptons-dune.webp"],
.sp-hero__bg[style*="/hamptons-dune.webp"],
.lux-hero__bg[style*="/hamptons-dune.webp"]{background-image:url('assets/editorial/hamptons-dune-sm.webp') !important;}
.fd-interlude[style*="/hotel-brass.webp"],
.fd-photoback[style*="/hotel-brass.webp"],
.hero-ph[style*="/hotel-brass.webp"],
.sp-hero__bg[style*="/hotel-brass.webp"],
.lux-hero__bg[style*="/hotel-brass.webp"]{background-image:url('assets/editorial/hotel-brass-sm.webp') !important;}
.fd-interlude[style*="/jet-dawn.webp"],
.fd-photoback[style*="/jet-dawn.webp"],
.hero-ph[style*="/jet-dawn.webp"],
.sp-hero__bg[style*="/jet-dawn.webp"],
.lux-hero__bg[style*="/jet-dawn.webp"]{background-image:url('assets/editorial/jet-dawn-sm.webp') !important;}
.fd-interlude[style*="/key-leather.webp"],
.fd-photoback[style*="/key-leather.webp"],
.hero-ph[style*="/key-leather.webp"],
.sp-hero__bg[style*="/key-leather.webp"],
.lux-hero__bg[style*="/key-leather.webp"]{background-image:url('assets/editorial/key-leather-sm.webp') !important;}
.fd-interlude[style*="/leather-sharp.webp"],
.fd-photoback[style*="/leather-sharp.webp"],
.hero-ph[style*="/leather-sharp.webp"],
.sp-hero__bg[style*="/leather-sharp.webp"],
.lux-hero__bg[style*="/leather-sharp.webp"]{background-image:url('assets/editorial/leather-sharp-sm.webp') !important;}
.fd-interlude[style*="/maybach-void.webp"],
.fd-photoback[style*="/maybach-void.webp"],
.hero-ph[style*="/maybach-void.webp"],
.sp-hero__bg[style*="/maybach-void.webp"],
.lux-hero__bg[style*="/maybach-void.webp"]{background-image:url('assets/editorial/maybach-void-sm.webp') !important;}
.fd-interlude[style*="/midtown-dusk.webp"],
.fd-photoback[style*="/midtown-dusk.webp"],
.hero-ph[style*="/midtown-dusk.webp"],
.sp-hero__bg[style*="/midtown-dusk.webp"],
.lux-hero__bg[style*="/midtown-dusk.webp"]{background-image:url('assets/editorial/midtown-dusk-sm.webp') !important;}
.fd-interlude[style*="/nyc-dusk.webp"],
.fd-photoback[style*="/nyc-dusk.webp"],
.hero-ph[style*="/nyc-dusk.webp"],
.sp-hero__bg[style*="/nyc-dusk.webp"],
.lux-hero__bg[style*="/nyc-dusk.webp"]{background-image:url('assets/editorial/nyc-dusk-sm.webp') !important;}
.fd-interlude[style*="/park-canyon.webp"],
.fd-photoback[style*="/park-canyon.webp"],
.hero-ph[style*="/park-canyon.webp"],
.sp-hero__bg[style*="/park-canyon.webp"],
.lux-hero__bg[style*="/park-canyon.webp"]{background-image:url('assets/editorial/park-canyon-sm.webp') !important;}
.fd-interlude[style*="/portico-dusk.webp"],
.fd-photoback[style*="/portico-dusk.webp"],
.hero-ph[style*="/portico-dusk.webp"],
.sp-hero__bg[style*="/portico-dusk.webp"],
.lux-hero__bg[style*="/portico-dusk.webp"]{background-image:url('assets/editorial/portico-dusk-sm.webp') !important;}
.fd-interlude[style*="/quilted-leather.webp"],
.fd-photoback[style*="/quilted-leather.webp"],
.hero-ph[style*="/quilted-leather.webp"],
.sp-hero__bg[style*="/quilted-leather.webp"],
.lux-hero__bg[style*="/quilted-leather.webp"]{background-image:url('assets/editorial/quilted-leather-sm.webp') !important;}
.fd-interlude[style*="/silhouette.webp"],
.fd-photoback[style*="/silhouette.webp"],
.hero-ph[style*="/silhouette.webp"],
.sp-hero__bg[style*="/silhouette.webp"],
.lux-hero__bg[style*="/silhouette.webp"]{background-image:url('assets/editorial/silhouette-sm.webp') !important;}
.fd-interlude[style*="/terminal-arrival.webp"],
.fd-photoback[style*="/terminal-arrival.webp"],
.hero-ph[style*="/terminal-arrival.webp"],
.sp-hero__bg[style*="/terminal-arrival.webp"],
.lux-hero__bg[style*="/terminal-arrival.webp"]{background-image:url('assets/editorial/terminal-arrival-sm.webp') !important;}
.fd-interlude[style*="/velvet-rope.webp"],
.fd-photoback[style*="/velvet-rope.webp"],
.hero-ph[style*="/velvet-rope.webp"],
.sp-hero__bg[style*="/velvet-rope.webp"],
.lux-hero__bg[style*="/velvet-rope.webp"]{background-image:url('assets/editorial/velvet-rope-sm.webp') !important;}
.fd-interlude[style*="/watch-wheel.webp"],
.fd-photoback[style*="/watch-wheel.webp"],
.hero-ph[style*="/watch-wheel.webp"],
.sp-hero__bg[style*="/watch-wheel.webp"],
.lux-hero__bg[style*="/watch-wheel.webp"]{background-image:url('assets/editorial/watch-wheel-sm.webp') !important;}
.fd-interlude[style*="/about-brownstone.webp"],
.fd-photoback[style*="/about-brownstone.webp"],
.hero-ph[style*="/about-brownstone.webp"],
.sp-hero__bg[style*="/about-brownstone.webp"],
.lux-hero__bg[style*="/about-brownstone.webp"]{background-image:url('assets/img/about-brownstone-sm.webp') !important;}
.fd-interlude[style*="/about-heritage.webp"],
.fd-photoback[style*="/about-heritage.webp"],
.hero-ph[style*="/about-heritage.webp"],
.sp-hero__bg[style*="/about-heritage.webp"],
.lux-hero__bg[style*="/about-heritage.webp"]{background-image:url('assets/img/about-heritage-sm.webp') !important;}
.fd-interlude[style*="/air-globe.webp"],
.fd-photoback[style*="/air-globe.webp"],
.hero-ph[style*="/air-globe.webp"],
.sp-hero__bg[style*="/air-globe.webp"],
.lux-hero__bg[style*="/air-globe.webp"]{background-image:url('assets/img/air-globe-sm.webp') !important;}
.fd-interlude[style*="/chauffeur-arrival.webp"],
.fd-photoback[style*="/chauffeur-arrival.webp"],
.hero-ph[style*="/chauffeur-arrival.webp"],
.sp-hero__bg[style*="/chauffeur-arrival.webp"],
.lux-hero__bg[style*="/chauffeur-arrival.webp"]{background-image:url('assets/img/chauffeur-arrival-sm.webp') !important;}
.fd-interlude[style*="/contact-desk.webp"],
.fd-photoback[style*="/contact-desk.webp"],
.hero-ph[style*="/contact-desk.webp"],
.sp-hero__bg[style*="/contact-desk.webp"],
.lux-hero__bg[style*="/contact-desk.webp"]{background-image:url('assets/img/contact-desk-sm.webp') !important;}
.fd-interlude[style*="/events-redcarpet.webp"],
.fd-photoback[style*="/events-redcarpet.webp"],
.hero-ph[style*="/events-redcarpet.webp"],
.sp-hero__bg[style*="/events-redcarpet.webp"],
.lux-hero__bg[style*="/events-redcarpet.webp"]{background-image:url('assets/img/events-redcarpet-sm.webp') !important;}
.fd-interlude[style*="/executive-aviation.webp"],
.fd-photoback[style*="/executive-aviation.webp"],
.hero-ph[style*="/executive-aviation.webp"],
.sp-hero__bg[style*="/executive-aviation.webp"],
.lux-hero__bg[style*="/executive-aviation.webp"]{background-image:url('assets/img/executive-aviation-sm.webp') !important;}
.fd-interlude[style*="/fleet-jet-sprinter.webp"],
.fd-photoback[style*="/fleet-jet-sprinter.webp"],
.hero-ph[style*="/fleet-jet-sprinter.webp"],
.sp-hero__bg[style*="/fleet-jet-sprinter.webp"],
.lux-hero__bg[style*="/fleet-jet-sprinter.webp"]{background-image:url('assets/img/fleet-jet-sprinter-sm.webp') !important;}
.fd-interlude[style*="/fleet-limo-sprinter.webp"],
.fd-photoback[style*="/fleet-limo-sprinter.webp"],
.hero-ph[style*="/fleet-limo-sprinter.webp"],
.sp-hero__bg[style*="/fleet-limo-sprinter.webp"],
.lux-hero__bg[style*="/fleet-limo-sprinter.webp"]{background-image:url('assets/img/fleet-limo-sprinter-sm.webp') !important;}
.fd-interlude[style*="/fleet-mini-coach.webp"],
.fd-photoback[style*="/fleet-mini-coach.webp"],
.hero-ph[style*="/fleet-mini-coach.webp"],
.sp-hero__bg[style*="/fleet-mini-coach.webp"],
.lux-hero__bg[style*="/fleet-mini-coach.webp"]{background-image:url('assets/img/fleet-mini-coach-sm.webp') !important;}
.fd-interlude[style*="/hero-airport-curb.webp"],
.fd-photoback[style*="/hero-airport-curb.webp"],
.hero-ph[style*="/hero-airport-curb.webp"],
.sp-hero__bg[style*="/hero-airport-curb.webp"],
.lux-hero__bg[style*="/hero-airport-curb.webp"]{background-image:url('assets/img/hero-airport-curb-sm.webp') !important;}
.fd-interlude[style*="/hero-cruise-pier.webp"],
.fd-photoback[style*="/hero-cruise-pier.webp"],
.hero-ph[style*="/hero-cruise-pier.webp"],
.sp-hero__bg[style*="/hero-cruise-pier.webp"],
.lux-hero__bg[style*="/hero-cruise-pier.webp"]{background-image:url('assets/img/hero-cruise-pier-sm.webp') !important;}
.fd-interlude[style*="/hero-desk-w223.webp"],
.fd-photoback[style*="/hero-desk-w223.webp"],
.hero-ph[style*="/hero-desk-w223.webp"],
.sp-hero__bg[style*="/hero-desk-w223.webp"],
.lux-hero__bg[style*="/hero-desk-w223.webp"]{background-image:url('assets/img/hero-desk-w223-sm.webp') !important;}
.fd-interlude[style*="/hero-exec-w223.webp"],
.fd-photoback[style*="/hero-exec-w223.webp"],
.hero-ph[style*="/hero-exec-w223.webp"],
.sp-hero__bg[style*="/hero-exec-w223.webp"],
.lux-hero__bg[style*="/hero-exec-w223.webp"]{background-image:url('assets/img/hero-exec-w223-sm.webp') !important;}
.fd-interlude[style*="/hero-fleet.webp"],
.fd-photoback[style*="/hero-fleet.webp"],
.hero-ph[style*="/hero-fleet.webp"],
.sp-hero__bg[style*="/hero-fleet.webp"],
.lux-hero__bg[style*="/hero-fleet.webp"]{background-image:url('assets/img/hero-fleet-sm.webp') !important;}
.fd-interlude[style*="/hero-hotel-w223.webp"],
.fd-photoback[style*="/hero-hotel-w223.webp"],
.hero-ph[style*="/hero-hotel-w223.webp"],
.sp-hero__bg[style*="/hero-hotel-w223.webp"],
.lux-hero__bg[style*="/hero-hotel-w223.webp"]{background-image:url('assets/img/hero-hotel-w223-sm.webp') !important;}
.fd-interlude[style*="/hero-lux-cullinan.webp"],
.fd-photoback[style*="/hero-lux-cullinan.webp"],
.hero-ph[style*="/hero-lux-cullinan.webp"],
.sp-hero__bg[style*="/hero-lux-cullinan.webp"],
.lux-hero__bg[style*="/hero-lux-cullinan.webp"]{background-image:url('assets/img/hero-lux-cullinan-sm.webp') !important;}
.fd-interlude[style*="/hero-nyc.webp"],
.fd-photoback[style*="/hero-nyc.webp"],
.hero-ph[style*="/hero-nyc.webp"],
.sp-hero__bg[style*="/hero-nyc.webp"],
.lux-hero__bg[style*="/hero-nyc.webp"]{background-image:url('assets/img/hero-nyc-sm.webp') !important;}
.fd-interlude[style*="/interior-exec.webp"],
.fd-photoback[style*="/interior-exec.webp"],
.hero-ph[style*="/interior-exec.webp"],
.sp-hero__bg[style*="/interior-exec.webp"],
.lux-hero__bg[style*="/interior-exec.webp"]{background-image:url('assets/img/interior-exec-sm.webp') !important;}
.fd-interlude[style*="/interior-limo.webp"],
.fd-photoback[style*="/interior-limo.webp"],
.hero-ph[style*="/interior-limo.webp"],
.sp-hero__bg[style*="/interior-limo.webp"],
.lux-hero__bg[style*="/interior-limo.webp"]{background-image:url('assets/img/interior-limo-sm.webp') !important;}
.fd-interlude[style*="/lux-cullinan-void.webp"],
.fd-photoback[style*="/lux-cullinan-void.webp"],
.hero-ph[style*="/lux-cullinan-void.webp"],
.sp-hero__bg[style*="/lux-cullinan-void.webp"],
.lux-hero__bg[style*="/lux-cullinan-void.webp"]{background-image:url('assets/img/lux-cullinan-void-sm.webp') !important;}
.fd-interlude[style*="/lux-exotic.webp"],
.fd-photoback[style*="/lux-exotic.webp"],
.hero-ph[style*="/lux-exotic.webp"],
.sp-hero__bg[style*="/lux-exotic.webp"],
.lux-hero__bg[style*="/lux-exotic.webp"]{background-image:url('assets/img/lux-exotic-sm.webp') !important;}
.fd-interlude[style*="/moment-airport.webp"],
.fd-photoback[style*="/moment-airport.webp"],
.hero-ph[style*="/moment-airport.webp"],
.sp-hero__bg[style*="/moment-airport.webp"],
.lux-hero__bg[style*="/moment-airport.webp"]{background-image:url('assets/img/moment-airport-sm.webp') !important;}
.fd-interlude[style*="/moment-charters.webp"],
.fd-photoback[style*="/moment-charters.webp"],
.hero-ph[style*="/moment-charters.webp"],
.sp-hero__bg[style*="/moment-charters.webp"],
.lux-hero__bg[style*="/moment-charters.webp"]{background-image:url('assets/img/moment-charters-sm.webp') !important;}
.fd-interlude[style*="/moment-events.webp"],
.fd-photoback[style*="/moment-events.webp"],
.hero-ph[style*="/moment-events.webp"],
.sp-hero__bg[style*="/moment-events.webp"],
.lux-hero__bg[style*="/moment-events.webp"]{background-image:url('assets/img/moment-events-sm.webp') !important;}
.fd-interlude[style*="/real-bmw-7.webp"],
.fd-photoback[style*="/real-bmw-7.webp"],
.hero-ph[style*="/real-bmw-7.webp"],
.sp-hero__bg[style*="/real-bmw-7.webp"],
.lux-hero__bg[style*="/real-bmw-7.webp"]{background-image:url('assets/img/real-bmw-7-sm.webp') !important;}
.fd-interlude[style*="/real-coach.webp"],
.fd-photoback[style*="/real-coach.webp"],
.hero-ph[style*="/real-coach.webp"],
.sp-hero__bg[style*="/real-coach.webp"],
.lux-hero__bg[style*="/real-coach.webp"]{background-image:url('assets/img/real-coach-sm.webp') !important;}
.fd-interlude[style*="/real-escalade.webp"],
.fd-photoback[style*="/real-escalade.webp"],
.hero-ph[style*="/real-escalade.webp"],
.sp-hero__bg[style*="/real-escalade.webp"],
.lux-hero__bg[style*="/real-escalade.webp"]{background-image:url('assets/img/real-escalade-sm.webp') !important;}
.fd-interlude[style*="/real-rolls.webp"],
.fd-photoback[style*="/real-rolls.webp"],
.hero-ph[style*="/real-rolls.webp"],
.sp-hero__bg[style*="/real-rolls.webp"],
.lux-hero__bg[style*="/real-rolls.webp"]{background-image:url('assets/img/real-rolls-sm.webp') !important;}
.fd-interlude[style*="/real-s-class.webp"],
.fd-photoback[style*="/real-s-class.webp"],
.hero-ph[style*="/real-s-class.webp"],
.sp-hero__bg[style*="/real-s-class.webp"],
.lux-hero__bg[style*="/real-s-class.webp"]{background-image:url('assets/img/real-s-class-sm.webp') !important;}
.fd-interlude[style*="/real-sprinter.webp"],
.fd-photoback[style*="/real-sprinter.webp"],
.hero-ph[style*="/real-sprinter.webp"],
.sp-hero__bg[style*="/real-sprinter.webp"],
.lux-hero__bg[style*="/real-sprinter.webp"]{background-image:url('assets/img/real-sprinter-sm.webp') !important;}
.fd-interlude[style*="/real-suburban.webp"],
.fd-photoback[style*="/real-suburban.webp"],
.hero-ph[style*="/real-suburban.webp"],
.sp-hero__bg[style*="/real-suburban.webp"],
.lux-hero__bg[style*="/real-suburban.webp"]{background-image:url('assets/img/real-suburban-sm.webp') !important;}
.fd-interlude[style*="/real-tesla.webp"],
.fd-photoback[style*="/real-tesla.webp"],
.hero-ph[style*="/real-tesla.webp"],
.sp-hero__bg[style*="/real-tesla.webp"],
.lux-hero__bg[style*="/real-tesla.webp"]{background-image:url('assets/img/real-tesla-sm.webp') !important;}
.fd-interlude[style*="/real-yukon.webp"],
.fd-photoback[style*="/real-yukon.webp"],
.hero-ph[style*="/real-yukon.webp"],
.sp-hero__bg[style*="/real-yukon.webp"],
.lux-hero__bg[style*="/real-yukon.webp"]{background-image:url('assets/img/real-yukon-sm.webp') !important;}
.fd-interlude[style*="/work-in-transit.webp"],
.fd-photoback[style*="/work-in-transit.webp"],
.hero-ph[style*="/work-in-transit.webp"],
.sp-hero__bg[style*="/work-in-transit.webp"],
.lux-hero__bg[style*="/work-in-transit.webp"]{background-image:url('assets/img/work-in-transit-sm.webp') !important;}
}

/* ===== depth5d.css ===== */
/* ============================================================
   depth5d.css — Famous Drive "5D" depth layer.
   Adds dimension to the EXISTING design (no redesign):
   atmosphere fog + gold dust in depth bands, cinematic vignette,
   depth-of-field scroll reveals, and live 3D card tilt.
   Loaded after polish.css / animations.css. Purely additive.
   ============================================================ */

/* ---------- 1. Atmosphere — fixed scene layers ----------
   Painted above section backgrounds (low alpha, blend) but below
   the booking scrim (z-index 5) and pointer-events: none. */
.d5-atmo {
  position: fixed; inset: -12vh -12vw;
  pointer-events: none; z-index: 2;
  will-change: transform;
}
.d5-atmo--far {
  background:
    radial-gradient(900px 600px at 18% 22%, rgba(213, 164, 114, 0.055), transparent 65%),
    radial-gradient(1100px 700px at 84% 78%, rgba(120, 96, 70, 0.05), transparent 65%);
  mix-blend-mode: screen;
}
.d5-atmo--near {
  background:
    radial-gradient(700px 460px at 70% 18%, rgba(236, 197, 143, 0.045), transparent 60%),
    radial-gradient(820px 540px at 24% 86%, rgba(213, 164, 114, 0.04), transparent 62%);
  mix-blend-mode: screen;
}
.d5-vignette {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 2;
  background: radial-gradient(120% 90% at 50% 42%, transparent 58%, rgba(0, 0, 0, 0.30) 100%);
}

/* ---------- 2. Gold dust — three depth bands ----------
   Far band: small, dim, slow. Near band: larger, brighter, faster.
   Bands are mouse-parallaxed at different rates by depth5d.js. */
.d5-dust {
  position: fixed; inset: -6vh 0;
  pointer-events: none; z-index: 2;
  will-change: transform;
}
.d5-mote {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 197, 143, 0.85), rgba(213, 164, 114, 0) 70%);
  animation: d5-drift var(--d5-dur, 26s) linear infinite;
  animation-delay: var(--d5-delay, 0s);
  opacity: 0;
}
@keyframes d5-drift {
  0%   { transform: translate3d(0, 0, 0);            opacity: 0; }
  8%   { opacity: var(--d5-op, 0.3); }
  86%  { opacity: var(--d5-op, 0.3); }
  100% { transform: translate3d(var(--d5-sway, 18px), -106vh, 0); opacity: 0; }
}

/* ---------- 3. Depth-of-field reveal ----------
   Deepens the existing [data-reveal] system: elements now arrive
   from a far focal plane (translateZ + blur) and settle crisp.
   Same selectors, same .is-revealed trigger — only more depth. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    transform: perspective(900px) translateY(20px) translateZ(-48px);
    filter: blur(7px);
    transition:
      opacity 950ms var(--ease-standard),
      transform 950ms var(--ease-standard),
      filter 950ms var(--ease-standard);
    transition-delay: var(--reveal-delay, 0ms);
  }
  [data-reveal="headline"] { transform: perspective(900px) translateY(30px) translateZ(-70px); }
  [data-reveal="card"]     { transform: perspective(900px) translateY(26px) translateZ(-60px) scale(0.982); }
  [data-reveal].is-revealed {
    transform: perspective(900px) translateY(0) translateZ(0) scale(1);
    filter: blur(0);
  }
}

/* ---------- 4. Live 3D tilt for extra card-likes ----------
   .tilt-card already has the full treatment in site.css; depth5d.js
   finally drives its --rx/--ry. .d5-tilt extends the same physics to
   stats, list items and panels that aren't .tilt-card. */
.d5-tilt {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 420ms var(--ease-standard), box-shadow 420ms var(--ease-standard);
}
.d5-tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle 200px at var(--mx) var(--my),
              rgba(213, 164, 114, 0.13), transparent 62%);
  opacity: 0; transition: opacity 300ms; pointer-events: none;
}
.d5-tilt:hover::after { opacity: 1; }
.d5-tilt:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px -18px rgba(0, 0, 0, 0.5); }

/* While a card is actively tilting, snap to the pointer (no easing lag) */
.tilt-card.d5-live, .d5-tilt.d5-live { transition-property: box-shadow, border-color; }

/* ---------- 5. Hero depth planes ----------
   depth5d.js drives --d5x/--d5y per plane at different rates.
   Composed via CSS vars so the existing entrance animations finish
   untouched (parallax starts after the entrance settles). */
.d5-plane { transform: translate3d(var(--d5x, 0px), var(--d5y, 0px), 0); will-change: transform; }

/* ---------- 6. Reduced motion / touch ---------- */
@media (prefers-reduced-motion: reduce) {
  .d5-atmo, .d5-dust, .d5-vignette { display: none !important; }
  .d5-tilt { transform: none !important; }
  .d5-plane { transform: none !important; }
  [data-reveal] { filter: none !important; }
}

/* ===== depth5d-pro.css ===== */
/* ============================================================
   depth5d-pro.css — Famous Drive "5D, next level".
   Layers ON TOP of depth5d.css. Everything here is additive,
   pointer-events:none for ambience, brand palette only.
   Driven by depth5d-pro.js (one shared rAF loop).
   ============================================================ */

/* ---------- 1. Aurora mesh — living light behind the scene ----------
   Three huge, heavily-blurred bronze blobs that breathe and drift.
   Soft-light blend so they grade the espresso background without
   washing it out. Mouse/gyro parallax applied via --aur-x/--aur-y. */
.d5-aurora {
  position: fixed; inset: -25vh -25vw;
  pointer-events: none; z-index: 1;
  filter: blur(8px) saturate(1.1);
  mix-blend-mode: soft-light;
  opacity: 0.9;
  transform: translate3d(var(--aur-x, 0px), var(--aur-y, 0px), 0);
  will-change: transform;
}
.d5-aurora__blob { position: absolute; border-radius: 50%; }
.d5-aurora__blob--1 {
  width: 46vw; height: 46vw; left: 8%; top: 6%;
  background: radial-gradient(circle, rgba(236,197,143,0.50), rgba(217,174,116,0) 70%);
  animation: d5-aur1 28s ease-in-out infinite;
}
.d5-aurora__blob--2 {
  width: 52vw; height: 52vw; right: 4%; top: 34%;
  background: radial-gradient(circle, rgba(176,128,84,0.42), rgba(120,96,70,0) 70%);
  animation: d5-aur2 36s ease-in-out infinite;
}
.d5-aurora__blob--3 {
  width: 40vw; height: 40vw; left: 30%; bottom: -6%;
  background: radial-gradient(circle, rgba(217,174,116,0.38), rgba(217,174,116,0) 70%);
  animation: d5-aur3 32s ease-in-out infinite;
}
@keyframes d5-aur1 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(6vw,4vh,0) scale(1.16)} }
@keyframes d5-aur2 { 0%,100%{transform:translate3d(0,0,0) scale(1.05)} 50%{transform:translate3d(-7vw,-3vh,0) scale(0.9)} }
@keyframes d5-aur3 { 0%,100%{transform:translate3d(0,0,0) scale(0.95)} 50%{transform:translate3d(4vw,-5vh,0) scale(1.2)} }

/* ---------- 2. Cursor key-light — the scene lit by a moving lamp ----------
   A soft radial highlight that trails the cursor across the whole page. */
.d5-keylight {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 2;
  mix-blend-mode: soft-light;
  background: radial-gradient(620px circle at var(--kx, 50%) var(--ky, 35%),
              rgba(236,197,143,0.20), transparent 60%);
  opacity: 0; transition: opacity 1.2s ease;
}
.d5-keylight.is-live { opacity: 1; }

/* ---------- 3. Film grain — cinematic texture over everything ---------- */
.d5-grain {
  position: fixed; inset: -120%;
  pointer-events: none; z-index: 3;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: d5-grain 0.9s steps(4) infinite;
  will-change: transform;
}
@keyframes d5-grain {
  0%{transform:translate3d(0,0,0)} 25%{transform:translate3d(-3%,2%,0)}
  50%{transform:translate3d(2%,-3%,0)} 75%{transform:translate3d(-2%,-2%,0)} 100%{transform:translate3d(3%,2%,0)}
}

/* ---------- 4. Magnetic CTAs with depth ----------
   depth5d-pro.js sets --mgx/--mgy (pull) on hover-near.
   The label gets a small counter-translate on Z for parallax. */
.btn, .nav-login, .lux-btn {
  transform: translate3d(var(--mgx, 0px), var(--mgy, 0px), 0);
  transition: transform 260ms cubic-bezier(.22,.61,.36,1), filter .25s, box-shadow .35s;
  transform-style: preserve-3d;
}
.btn.d5-mag, .nav-login.d5-mag, .lux-btn.d5-mag { transition: transform 80ms linear, box-shadow .35s; }
.btn--gold.d5-mag, .lux-btn--gold.d5-mag {
  box-shadow: 0 6px 22px -6px rgba(217,174,116,0.55), 0 0 0 1px rgba(236,197,143,0.25) inset;
}

/* ---------- 5. Heading shimmer sweep — one gilt pass on reveal ----------
   A narrow diagonal highlight wipes across the heading box once.
   .d5-sweep is toggled by JS (on reveal, and on hover for h2). */
.d5-shimmer { position: relative; }
.d5-shimmer::after {
  content: ""; position: absolute; inset: -2px -6px;
  pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%,
              rgba(236,197,143,0.55) 48%, rgba(255,244,224,0.85) 50%,
              rgba(236,197,143,0.55) 52%, transparent 62%);
  background-size: 280% 100%; background-position: 120% 0;
  mix-blend-mode: screen;
  -webkit-mask: linear-gradient(#000,#000);
}
.d5-shimmer.d5-sweep::after { animation: d5-sweep 1100ms cubic-bezier(.4,0,.2,1) forwards; }
@keyframes d5-sweep {
  0%{opacity:0; background-position:120% 0}
  12%{opacity:1}
  100%{opacity:0; background-position:-40% 0}
}

/* ---------- 6. Dynamic tilt shadow — cards lift off the page ----------
   Uses --rx/--ry that depth5d.js already sets on hovered cards.
   Shadow falls opposite the tilt for a real "floating" read. */
.tilt-card.d5-live, .d5-tilt.d5-live {
  box-shadow:
    calc(var(--ry, 0deg) / 1deg * -1.6px) calc(var(--rx, 0deg) / 1deg * 1.6px) 40px -12px rgba(0,0,0,0.6),
    0 2px 4px rgba(0,0,0,0.35);
}

/* ---------- 7. Scroll-velocity motion ----------
   depth5d-pro.js writes --d5vel (0..1) and a sign to <body>.
   Fast scroll → dust streaks vertically + the aurora smears slightly. */
body.d5-fast .d5-mote { transform: scaleY(calc(1 + var(--d5vel, 0) * 7)); transform-origin: center; }
body.d5-fast .d5-aurora { filter: blur(8px) saturate(1.1) blur(calc(var(--d5vel,0) * 6px)); }

/* ---------- 8. Scroll progress rail — thin gilt line of the journey ---------- */
.d5-rail {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 60;
  width: 100%; transform: scaleX(var(--d5prog, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(217,174,116,0.0), #D9AE74 35%, #ECC58F 70%, #FAF1DD);
  box-shadow: 0 0 12px rgba(236,197,143,0.6);
  pointer-events: none;
}

/* ---------- 9. Reduced motion / coarse pointer guards ---------- */
@media (prefers-reduced-motion: reduce) {
  .d5-aurora, .d5-keylight, .d5-grain, .d5-rail { display: none !important; }
  .d5-shimmer::after { display: none !important; }
  .btn, .nav-login, .lux-btn { transform: none !important; }
}

/* ===== depth5d-intensity.css ===== */
/* ============================================================
   depth5d-intensity.css — tiers the 5D effects by page + user choice.
   <html> gets one of: d5i-full | d5i-med | d5i-calm (set by JS).
   Restraint pass: transactional pages stay quiet; hero pages get drama.
   The visitor can override via the motion toggle (persisted).
   ============================================================ */

/* ---------- MED: dial the spectacle back a notch ---------- */
html.d5i-med .d5-grain { opacity: 0.03; }
html.d5i-med .d5-aurora { opacity: 0.6; }
html.d5i-med .d5-keylight { background: radial-gradient(560px circle at var(--kx,50%) var(--ky,35%), rgba(236,197,143,0.13), transparent 60%); }

/* ---------- CALM: quiet, transactional, "quiet wealth" ---------- */
html.d5i-calm .d5-grain,
html.d5i-calm .d5-keylight { display: none !important; }
html.d5i-calm .d5-aurora { opacity: 0.4; filter: blur(8px) saturate(1.05); }
html.d5i-calm .d5-aurora__blob { animation-duration: 60s; }        /* slower, calmer drift */
html.d5i-calm .d5-mote { opacity: 0 !important; }                  /* no gold dust */
html.d5i-calm body.d5-fast .d5-mote { transform: none !important; }/* no scroll streaks */
html.d5i-calm body.d5-fast .d5-aurora { filter: blur(8px) saturate(1.05) !important; }
html.d5i-calm .btn,
html.d5i-calm .nav-login,
html.d5i-calm .lux-btn { transform: none !important; }             /* drop magnetic pull */
html.d5i-calm .d5-shimmer::after { display: none !important; }     /* no heading sweeps */
/* tilt stays, but gentler */
html.d5i-calm .tilt-card, html.d5i-calm .d5-tilt { transition-duration: 480ms; }

/* ---------- The motion toggle ---------- */
.d5-motion {
  position: fixed; left: 18px; bottom: 74px; z-index: 58;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: 100px;
  font-family: var(--font-sans, 'Outfit', sans-serif);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400;
  color: var(--bone-60, #ECD5AD);
  background: rgba(20, 15, 10, 0.6); backdrop-filter: blur(10px);
  border: 1px solid rgba(236,213,173,0.16);
  cursor: pointer; opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease, color .25s, border-color .25s;
  -webkit-tap-highlight-color: transparent;
}
.d5-motion.is-in { opacity: 0.65; transform: translateY(0); }
.d5-motion:hover { opacity: 1; color: var(--bone, #FAF1DD); border-color: rgba(217,174,116,0.5); }
.d5-motion__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold, #D9AE74); box-shadow: 0 0 8px rgba(217,174,116,0.8);
  transition: background .25s, box-shadow .25s;
}
.d5-motion[data-mode="subtle"] .d5-motion__dot { background: var(--bone-40, rgba(236,213,173,0.4)); box-shadow: none; }
@media (max-width: 760px) { .d5-motion { display: none; } } /* mobile already calmed */
@media (prefers-reduced-motion: reduce) { .d5-motion { display: none; } }

/* ===== cinematic-fx.css ===== */
/* ============================================================
   CINEMATIC-FX — premium "multi-million-dollar" interaction layer.
   Loaded last. Pure enhancement: cursor-reactive lighting, card
   depth, glass sheen, ambient glow, refined reveals. Designed to
   sit ON TOP of the existing depth5d tilt/aurora system without
   touching transforms (so the 3D tilt keeps working).
   All motion is gated on (prefers-reduced-motion: no-preference).
   ============================================================ */

/* ---------- 1. Ambient cursor light — a faint warm bloom that
   follows the pointer across the dark page. The single most
   "expensive"-feeling touch. ---------- */
.fx-ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--fx-gx, 50%) var(--fx-gy, -10%),
              rgba(236, 197, 143, 0.10), transparent 60%);
  opacity: 0; transition: opacity 1.2s ease;
  mix-blend-mode: screen;
}
.fx-ambient.is-live { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fx-ambient { display: none; } }

/* ---------- 2. Cursor-reactive cards — "5D boxes" ----------
   A light that tracks the cursor across the card surface + a
   glowing edge that follows it. Layered over the existing tilt. */
.fx-card { position: relative; isolation: isolate; }

/* inner light pool */
.fx-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  z-index: 4; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, -20%),
              rgba(236, 197, 143, 0.18), transparent 58%);
  opacity: 0; transition: opacity .45s ease;
}
.fx-card:hover::after { opacity: 1; }

/* glowing edge that follows the cursor (border-only via mask) */
.fx-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  z-index: 5; pointer-events: none; padding: 1.25px;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(217, 174, 116, 0.75), rgba(217,174,116,0.0) 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s ease;
}
.fx-card:hover::before { opacity: 1; }

/* depth on hover — shadow only (no transform, so it never fights the tilt) */
.fx-card {
  transition: box-shadow .5s var(--ease-standard, cubic-bezier(.2,.8,.2,1)),
              border-color .4s ease;
}
.fx-card:hover {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.18),
    0 28px 60px -28px rgba(0,0,0,0.62),
    0 0 0 1px rgba(217,174,116,0.16);
}

@media (prefers-reduced-motion: reduce) {
  .fx-card::after, .fx-card::before { display: none; }
}

/* ---------- 3. Glass sheen — a slow diagonal specular sweep that
   crosses cards on hover (very subtle, premium). ---------- */
.fx-card .fx-sheen {
  position: absolute; inset: 0; border-radius: inherit; z-index: 3;
  pointer-events: none; overflow: hidden;
}
.fx-card .fx-sheen::before {
  content: ""; position: absolute; top: -60%; left: -30%;
  width: 50%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255,248,232,0.10), transparent);
  transform: translateX(-60%) rotate(8deg); opacity: 0;
}
.fx-card:hover .fx-sheen::before {
  animation: fx-sheen-sweep 1.1s var(--ease-standard, cubic-bezier(.2,.8,.2,1)) 1;
}
@keyframes fx-sheen-sweep {
  0% { transform: translateX(-60%) rotate(8deg); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateX(320%) rotate(8deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .fx-card .fx-sheen { display: none; } }

/* ---------- 4. Refined scroll reveals — blur + rise + clip with
   expensive easing. Applied by JS as elements enter the viewport. */
.fx-reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  filter: blur(8px);
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform 1.05s cubic-bezier(.16,1,.3,1),
    filter .9s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform, filter;
}
.fx-reveal.is-in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .fx-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ---------- 5. Animated light-bloom backgrounds on dark sections.
   Two slow, counter-drifting warm radial blooms — adds depth and
   life to the espresso ground without reading as "busy". ---------- */
/* z-index:0 makes the section its own stacking context so the bloom layer
   (z-index:-1) stays bounded to the section AND below all content — it can
   never cover text, no matter how the section's children are stacked. */
.fx-bloom { position: relative; z-index: 0; }
.fx-bloom > .fx-bloom-layer {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.fx-bloom > .fx-bloom-layer::before,
.fx-bloom > .fx-bloom-layer::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(8px); opacity: 0.5;
}
.fx-bloom > .fx-bloom-layer::before {
  width: 46vw; height: 46vw; top: -12%; right: -8%;
  background: radial-gradient(circle, rgba(217,174,116,0.16), transparent 70%);
  animation: fx-bloom-a 26s ease-in-out infinite;
}
.fx-bloom > .fx-bloom-layer::after {
  width: 40vw; height: 40vw; bottom: -16%; left: -10%;
  background: radial-gradient(circle, rgba(124,98,73,0.20), transparent 70%);
  animation: fx-bloom-b 32s ease-in-out infinite;
}
@keyframes fx-bloom-a {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-4vw, 5vh) scale(1.12); }
}
@keyframes fx-bloom-b {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(5vw, -4vh) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-bloom > .fx-bloom-layer::before,
  .fx-bloom > .fx-bloom-layer::after { animation: none; }
}

/* ---------- 6. Magnetic CTA glow — warm halo that breathes on the
   primary buttons. ---------- */
.btn--gold { position: relative; }
.btn--gold::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  z-index: -1; pointer-events: none;
  background: radial-gradient(60% 120% at 50% 50%, rgba(236,197,143,0.55), transparent 70%);
  opacity: 0; filter: blur(10px); transition: opacity .45s ease;
}
.btn--gold:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .btn--gold::after { display: none; } }

/* ===== premium-boxes.css ===== */
/* ============================================================
   PREMIUM BOXES — "Signature" · Option D (gold edge), BACKGROUND-PRESERVING.
   The gold gradient EDGE defines the box; each card KEEPS ITS NATIVE FILL,
   so text contrast can never break (dark cards stay dark, light cards stay
   light — across homepage AND subpages, no per-class theming needed).
   The edge is an injected .pb-edge ring (independent of cinematic-fx's
   ::before/::after cursor layers). Additive: only under  body.fx-premium .
   ============================================================ */

:root { --pb-radius: 14px; }

/* ---- the cards this variant touches ---- */
body.fx-premium .service-card,
body.fx-premium .event-card,
body.fx-premium .sp-card,
body.fx-premium .sp-included-item,
body.fx-premium .testi-card,
body.fx-premium .advisors-members,
body.fx-premium .fleet-tab--card,
body.fx-premium .ac-tier,
body.fx-premium .lux-card,
body.fx-premium .lux-vcard,
body.fx-premium .lux-occasion,
body.fx-premium .why-item,
body.fx-premium .hb-vehicle,
body.fx-premium .card,
body.fx-premium .tier,
body.fx-premium .contact-form-card,
body.fx-premium .cities-ledger,
body.fx-premium .cities-map {
  position: relative;
  border-color: rgba(217, 174, 116, 0.34) !important;  /* static gold border on every premium box (hover gold-ring layers on top) */
  border-radius: var(--pb-radius) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
          backdrop-filter: blur(8px) saturate(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 232, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.26),
    0 26px 56px -28px rgba(0, 0, 0, 0.60) !important;
  transition: box-shadow .55s cubic-bezier(.16,1,.3,1) !important;
}

/* ---- the gold gradient EDGE (injected child; follows border-radius) ---- */
.pb-edge { display: none; }   /* zero layout impact in Classic mode */
.fx-premium .pb-edge {
  display: block;
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6;
  padding: 1.5px;
  background: linear-gradient(135deg,
              rgba(236,197,143,0.92) 0%, rgba(217,174,116,0.20) 48%, rgba(236,197,143,0.84) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: background .4s ease;
}

/* ---- hover — edge brightens + a soft gold halo blooms (no transform: keeps tilt) ---- */
body.fx-premium .service-card:hover,
body.fx-premium .event-card:hover,
body.fx-premium .sp-card:hover,
body.fx-premium .sp-included-item:hover,
body.fx-premium .testi-card:hover,
body.fx-premium .advisors-members:hover,
body.fx-premium .fleet-tab--card:hover,
body.fx-premium .ac-tier:hover,
body.fx-premium .lux-card:hover,
body.fx-premium .lux-occasion:hover,
body.fx-premium .why-item:hover,
body.fx-premium .hb-vehicle:hover,
body.fx-premium .card:hover,
body.fx-premium .tier:hover,
body.fx-premium .contact-form-card:hover,
body.fx-premium .cities-ledger:hover,
body.fx-premium .cities-map:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 232, 0.10),
    0 3px 8px rgba(0, 0, 0, 0.30),
    0 34px 66px -30px rgba(0, 0, 0, 0.70),
    0 0 26px -8px rgba(217, 174, 116, 0.40) !important;
}
body.fx-premium .service-card:hover .pb-edge,
body.fx-premium .event-card:hover .pb-edge,
body.fx-premium .sp-card:hover .pb-edge,
body.fx-premium .sp-included-item:hover .pb-edge,
body.fx-premium .testi-card:hover .pb-edge,
body.fx-premium .advisors-members:hover .pb-edge,
body.fx-premium .fleet-tab--card:hover .pb-edge,
body.fx-premium .ac-tier:hover .pb-edge,
body.fx-premium .lux-card:hover .pb-edge,
body.fx-premium .lux-occasion:hover .pb-edge,
body.fx-premium .why-item:hover .pb-edge,
body.fx-premium .hb-vehicle:hover .pb-edge,
body.fx-premium .card:hover .pb-edge,
body.fx-premium .tier:hover .pb-edge,
body.fx-premium .contact-form-card:hover .pb-edge,
body.fx-premium .cities-ledger:hover .pb-edge,
body.fx-premium .cities-map:hover .pb-edge {
  background: linear-gradient(135deg,
              rgba(245,221,182,1) 0%, rgba(217,174,116,0.4) 48%, rgba(245,221,182,0.95) 100%);
}

/* ---- numbers / stats — gold gradient text for the "expensive" data look ---- */
body.fx-premium .tier-price,
body.fx-premium .sp-stat .v,
body.fx-premium .why-item .num,
body.fx-premium .lux-hero__stat .v,
body.fx-premium .event-day {
  background: linear-gradient(180deg, #FCEAC6 0%, #D9AE74 55%, #B8894E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- photo-led cards — gold edge only (image stays fully opaque) ---- */
body.fx-premium .fd-gallery__item,
body.fx-premium .moment-frame,
body.fx-premium .fleet-stage {
  position: relative; border-color: transparent !important;
  border-radius: var(--pb-radius) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.28), 0 26px 56px -28px rgba(0,0,0,0.66) !important;
}

/* ---- guards ---- */
@media (prefers-reduced-motion: reduce) {
  body.fx-premium .service-card, body.fx-premium .event-card, body.fx-premium .card,
  body.fx-premium .sp-card, body.fx-premium .tier { transition: none !important; }
}
@media (max-width: 768px) {  /* drop heavy blur on phones (perf) */
  body.fx-premium .service-card, body.fx-premium .event-card, body.fx-premium .sp-card,
  body.fx-premium .sp-included-item, body.fx-premium .testi-card, body.fx-premium .advisors-members,
  body.fx-premium .fleet-tab--card, body.fx-premium .ac-tier, body.fx-premium .lux-card,
  body.fx-premium .lux-occasion, body.fx-premium .why-item, body.fx-premium .hb-vehicle,
  body.fx-premium .card, body.fx-premium .tier, body.fx-premium .contact-form-card,
  body.fx-premium .cities-ledger, body.fx-premium .cities-map {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ---- compare toggle (discreet pill, bottom-left) ---- */
.pb-toggle {
  position: fixed; left: 18px; bottom: 18px; z-index: 70;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 100px; cursor: pointer;
  font-family: 'Outfit', system-ui, sans-serif; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: #FFFFFF;
  background: rgba(42, 30, 18, 0.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(217, 174, 116, 0.32);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6);
  transition: border-color .3s ease;
}
.pb-toggle:hover { border-color: rgba(236,197,143,0.6); }
.pb-toggle__dot { width: 7px; height: 7px; border-radius: 50%; background: #D9AE74; box-shadow: 0 0 8px #D9AE74; }
body:not(.fx-premium) .pb-toggle__dot { background: #6b5640; box-shadow: none; }
.pb-toggle__label::before { content: 'Signature'; }
body:not(.fx-premium) .pb-toggle__label::before { content: 'Classic'; }
@media (max-width: 768px) { .pb-toggle { left: 12px; bottom: 84px; padding: 8px 12px; } }

/* ============================================================
   CITIES — espresso/gold conversion (was a flat white "intermission"
   block that clashed with the unified homepage). Loads after
   dark-overrides.css so these re-assert the dark treatment, plus a few
   premium touches: warm-depth surfaces, glowing champagne map, gold pins.
   ============================================================ */

/* --- LEDGER surface: Espresso Atlas (Option A) --- */
body.fx-premium .cities-ledger {
  background:
    radial-gradient(120% 140% at 50% -10%, #56402C 0%, rgba(86,64,44,0) 60%),
    linear-gradient(180deg, #4D3826 0%, #432F1F 100%) !important;
  color: #FFFFFF !important;
}

/* ============================================================
   MAP — Ivory Atlas (Option B): warm parchment surface, sepia map,
   burnt-gold accents. Pairs the chosen light map with the dark ledger.
   ============================================================ */
body.fx-premium .cities-map {
  background: linear-gradient(180deg, #FBF4E6 0%, #F1E4C9 100%) !important;
  color: #3A2A18 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    0 2px 6px rgba(80,50,20,0.14),
    0 30px 60px -30px rgba(80,50,20,0.34) !important;
}

/* dotted world map: sepia landmass + faint ink grid */
body.fx-premium .cities-map .land { fill: #B98A4E !important; opacity: 0.50 !important; }
body.fx-premium .cities-map .graticule line { stroke: #3A2A18 !important; opacity: 0.07 !important; }

/* routes + pins in burnt gold on the paper surface */
body.fx-premium .cities-map .route { stroke: #9A5A1E !important; opacity: 0.40 !important; }
body.fx-premium .cities-map .pin      { fill: #9A5A1E !important; }
body.fx-premium .cities-map .pin-ring { stroke: #9A5A1E !important; }
body.fx-premium .cities-map .pin-group.is-hq .pin { fill: #7A4416 !important; filter: none; }
body.fx-premium .cities-map .label    { fill: #6E5132 !important; }
body.fx-premium .cities-map .label.hq { fill: #8A5A1E !important; }

/* --- live world-clock ribbon (on ivory) --- */
body.fx-premium .cities-map .world-clock {
  background: linear-gradient(180deg, rgba(120,80,30,0.06), transparent) !important;
  border-bottom-color: rgba(120,80,30,0.18) !important;
}
body.fx-premium .cities-map .world-clock-label { color: #8A5A1E !important; border-right-color: rgba(120,80,30,0.14) !important; }
body.fx-premium .cities-map .wc-cell { border-right-color: rgba(120,80,30,0.12) !important; }
body.fx-premium .cities-map .wc-cell:hover { background: rgba(138,90,30,0.06) !important; }
body.fx-premium .cities-map .wc-time { color: #2B1C0E !important; }
body.fx-premium .cities-map .wc-cell.is-hq .wc-time { color: #8A5A1E !important; }
body.fx-premium .cities-map .wc-cell.is-night .wc-time { color: #6E5132 !important; }
body.fx-premium .cities-map .wc-city  { color: #6E5132 !important; }
body.fx-premium .cities-map .wc-code  { color: #8A6B45 !important; }
body.fx-premium .cities-map .wc-cell.is-hq .wc-code { color: #8A5A1E !important; }
body.fx-premium .cities-map .wc-offset { color: #9A7B52 !important; }

/* --- legend: ivory pill --- */
body.fx-premium .cities-map-legend {
  color: #6E5132 !important;
  background: rgba(255,252,244,0.86) !important;
  border-color: rgba(120,80,30,0.16) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body.fx-premium .cities-map-legend .dot { background: #9A5A1E !important; }
body.fx-premium .cities-map-legend .dot--out { background: #B89B6A !important; }
body.fx-premium .cities-map-legend .dot--out.is-night { background: transparent !important; border-color: #8A6B45 !important; }

/* --- the 3-column network ledger --- */
body.fx-premium .cities-ledger { border-top-color: rgba(250,241,221,0.12) !important; }
body.fx-premium .cities-col { border-right-color: rgba(250,241,221,0.10) !important; }
body.fx-premium .cities-col h4 { color: #ECC58F !important; }
body.fx-premium .cities-col li {
  color: #FFFFFF !important;
  padding: 4px 6px; margin: -4px -6px; border-radius: 7px;
  transition: background .3s ease;
}
body.fx-premium .cities-col li:hover { background: rgba(236,197,143,0.06) !important; }
body.fx-premium .cities-col li .code { color: #E6DCCB !important; }
body.fx-premium .cities-col li.is-hq { color: #ECC58F !important; }

/* ===== page-unify.css ===== */
/* ============================================================
   page-unify.css — enforce the HOMEPAGE espresso/gold look on EVERY page.
   Must be loaded LAST (after premium-boxes.css) so it wins over page-local
   palettes such as colors_and_type.css (which sets --bg to near-black obsidian).
   Mirrors polish.css's "all-dark unified" base so subpages match index.html.
   ============================================================ */

/* 0) Static-page nav (.nav .links) now carries the full canonical 9 tabs.
      It was built for 5, so tighten spacing at laptop widths to clear the CTA,
      and gold-accent the World Cup tab to match the React nav. React pages use
      different nav markup (.nav-link), so these .nav .links rules never hit them. */
.nav .links a.nav-wc { color: #D9AE74; }

/* Wordmark: match the React mark exactly — uppercase "FAMOUS DRIVE" with DRIVE
   gold and a small gold "NY" superscript (static .mark is title-case by default). */
.nav .mark { text-transform: uppercase; letter-spacing: 0.30em; font-weight: 400; }
.nav .mark b { color: #D9AE74; font-weight: 400; }
.nav .mark::after {
  content: "NY"; font-size: 0.5em; letter-spacing: 0.16em;
  color: #D9AE74; margin-left: 0.45em;
  align-self: flex-start; margin-top: 0.15em;
}
/* FD monogram bug in the static nav lockup (inline so the NY superscript survives) */
.nav .mark { display: inline-flex; align-items: center; }
.nav .mark .nav-mark__bug {
  height: 40px; width: auto; margin-right: 14px; flex: 0 0 auto; vertical-align: middle;
  will-change: filter;
  animation: fd-bug-glow 3s ease-in-out infinite;   /* gold glow pulsing inside-out (matches React nav) */
}
.nav .mark:hover .nav-mark__bug { animation-duration: 1.6s; }
@keyframes fd-bug-glow {
  0%, 100% { filter: drop-shadow(0 0 0.5px rgba(236,197,143,0.25)) brightness(1); }
  50%      { filter: drop-shadow(0 0 9px rgba(236,197,143,0.92)) brightness(1.14); }
}
@media (prefers-reduced-motion: reduce) { .nav .mark .nav-mark__bug { animation: none; } }

/* Same gold glow on the Famous Drive wordmark text (synced 3s) */
.nav .mark { animation: fd-word-glow 3s ease-in-out infinite; }
.nav .mark:hover { animation-duration: 1.6s; }
@keyframes fd-word-glow {
  0%, 100% { text-shadow: 0 0 2px rgba(236,197,143,0.30); }
  50%      { text-shadow: 0 0 7px rgba(236,197,143,0.95), 0 0 16px rgba(236,197,143,0.60); }
}
@media (prefers-reduced-motion: reduce) { .nav .mark { animation: none; } }
.nav .mark b { margin-left: 0.3em; }   /* flex collapses the FAMOUS·DRIVE space — restore it */

@media (max-width: 1200px) { .nav .links { gap: 14px; font-size: 10px; letter-spacing: 0.10em; } }
@media (max-width: 1040px) { .nav .links { gap: 9px; } }

/* Full logo that nav-mobile.js injects at the top of the OPEN mobile menu.
   Must be hidden on desktop — pages that don't load sections3.css (e.g. the
   static contact page) otherwise render this 365px logo inside the nav row,
   where it overflows and bleeds the FD wordmark across the hero. Mirror the
   sections3.css rule here so every page-unify page hides it correctly. */
.nav-menu-logo, .links__logo { display: none; }
.nav-links.is-open .nav-menu-logo,
.nav.nav-open .links .links__logo {
  display: block; width: 150px; height: auto; margin: 4px auto 20px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.4));
}

/* Hamburger + slide-down tab menu for the static pages (injected by nav-mobile.js).
   Desktop: burger hidden, links inline. Mobile (<=760px): burger shows, links
   become a full-width espresso dropdown when .nav has .nav-open. */
.nav-burger { display: none; }
@media (max-width: 760px) {
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 10px; margin-left: 8px;
    background: transparent; border: 1px solid var(--hairline, rgba(250,241,221,0.14));
    border-radius: 6px; cursor: pointer;
  }
  .nav-burger span { display: block; height: 1.5px; width: 100%; background: #FAF1DD; transition: transform .3s ease, opacity .2s ease; }
  .nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .nav.nav-open .links {
    display: flex !important; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(31, 24, 18, 0.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(250,241,221,0.14);
    box-shadow: 0 24px 48px -18px rgba(0,0,0,0.7);
    padding: 6px 24px 18px; font-size: 13px; letter-spacing: 0.14em;
  }
  .nav.nav-open .links a {
    padding: 15px 2px; border-bottom: 1px solid rgba(250,241,221,0.08); color: #FFFFFF;
  }
  .nav.nav-open .links a:last-child { border-bottom: 0; }
  .nav.nav-open .links a.nav-wc { color: #D9AE74; }
}

/* 1) Re-assert the espresso palette globally (neutralises obsidian/off-hue vars) */
:root, body, .app, .subpage {
  --bg: #6F5640; --bg-card: #4D3826; --bg-elev: #4D3826; --bg-alt: #4D3826; --bg-deep: #2A1E12;
  --fg: #FFFFFF; --fg-ink: #FFFFFF;
  --fg-muted: #F4EFE6; --fg-subtle: #E6DCCB; --fg-faint: #DCD2C0;
  --fg-ink-muted: #F4EFE6; --fg-ink-subtle: #E6DCCB;
  --gold: #D9AE74; --gold-bright: #ECC58F; --gold-deep: #D9AE74;
  --terra: #D9AE74; --terra-bright: #ECC58F; --terra-deep: #D9AE74; --brass: #D9AE74;
  --hairline: rgba(250,241,221,0.14); --hairline-strong: rgba(250,241,221,0.26);
  --hairline-ink: rgba(250,241,221,0.14); --hairline-ink-strong: rgba(250,241,221,0.26);
  --ink-cream: #FFFFFF; --ink-cream-muted: #F4EFE6; --ink-cream-subtle: #E6DCCB;
}

/* 2) The warm tonal descent — on the React root AND on body (covers static pages too) */
#root {
  background: linear-gradient(to bottom,
    #6F5640 0%, #62492F 35%, #4D3826 65%, #34251A 88%, #2A1E12 100%) !important;
}
body {
  background-color: #4D3826;
}

/* 3) Kill stray light "intermission" fills so sections ride the gradient.
      Page-specific section selectors are handled in each page's own CSS. */
.subpage, .app { background: transparent; }

/* 4) Events list cards — dark-overrides.css gives these a WHITE fill with dark
      text on the events subpage (the homepage flips them to espresso via polish).
      Force the espresso/cream treatment everywhere so it matches the homepage. */
.event-card { background: var(--bg-card) !important; border-color: rgba(250,241,221,0.12) !important; }
.event-card:hover { background: #56402C !important; }
.event-card .event-name, .event-card .event-day { color: #FFFFFF !important; }
.event-card .event-mon, .event-card .event-tag, .event-card .event-arrow,
.event-card:hover .event-num, .event-card:hover .event-arrow { color: #D9AE74 !important; }
.event-card:hover .event-name, .event-card:hover .event-day { color: #FFFFFF !important; }

/* 5) Unify gold CTA buttons to the HOMEPAGE treatment everywhere.
      React subpages already use .btn--gold (cinematic-fx gives them the warm
      halo glow on hover). This brings the two systems that lack it into line:
      Luxotica's .lux-btn--gold and the static pages' plain gold .btn.
      .btn:not([class*="--"]) hits ONLY static gold buttons — React always
      pairs .btn with a modifier (--gold/--ghost/…), so it never matches there. */
.lux-btn--gold {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #2A1E12 !important;
  isolation: auto !important;
  overflow: visible !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.22), 0 12px 28px -8px rgba(160,106,56,0.50) !important;
}
.lux-btn--gold::after { display: none !important; }   /* drop the shimmer sweep */

.lux-btn--gold, .btn:not([class*="--"]) { position: relative; }
.lux-btn--gold::before,
.btn:not([class*="--"])::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  z-index: -1; pointer-events: none;
  background: radial-gradient(60% 120% at 50% 50%, rgba(236,197,143,0.55), transparent 70%);
  opacity: 0; filter: blur(10px); transition: opacity .45s ease;
}
.lux-btn--gold:hover::before,
.btn:not([class*="--"]):hover::before { opacity: 1; }
.lux-btn--gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.22), 0 16px 34px -10px rgba(160,106,56,0.60) !important;
}
.lux-btn--gold:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .lux-btn--gold::before, .btn:not([class*="--"])::before { display: none; }
}

/* Brand wordmark as an IMAGE in the nav (pixel-identical across OS; the bug + footer logo were already images). */
.nav-mark__wm { height: 13px; width: auto; display: inline-block; vertical-align: middle; margin-left: 0.55em; }
.nav .mark::after, .nav-mark::after { content: none !important; }   /* NY is baked into the image now */

/* ===== splash.css ===== */
/* Loading splash — full FD logo on espresso, shown once per session. */
.fd-splash {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background: radial-gradient(ellipse at center, #3a2a1b 0%, #1a120b 80%);
  transition: opacity .6s ease, visibility .6s ease;
}
.fd-splash.is-out { opacity: 0; visibility: hidden; }
.fd-splash__logo {
  width: clamp(150px, 22vw, 200px); height: auto;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,0.5));
  animation: fdSplashIn 1s cubic-bezier(.2,.7,.2,1) both;
}
.fd-splash__bar {
  width: 220px; height: 2px; border-radius: 2px; overflow: hidden; position: relative;
  background: rgba(217,174,116,0.16);
}
.fd-splash__bar::after {
  content: ""; position: absolute; top: 0; height: 100%; width: 40%; left: -40%;
  background: linear-gradient(90deg, transparent, #ECC58F, transparent);
  animation: fdSplashBar 1.1s ease-in-out infinite;
}
@keyframes fdSplashIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fdSplashBar { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .fd-splash__logo, .fd-splash__bar::after { animation: none; } }

/* ============================================================
   Site-wide brand-logo glow — the same pulsing gold glow as the nav lockup,
   applied to every FD logo instance (footer, splash, homepage divider, mobile
   menu). splash.css loads on all pages, so this covers the whole site.
   (Inline body-text mentions of "Famous Drive" are intentionally NOT glowed —
   there are 300+ and glowing paragraph copy reads as gaudy / hurts legibility.)
   ============================================================ */
@keyframes fd-logo-glow {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(236,197,143,0.25)) brightness(1); }
  50%      { filter: drop-shadow(0 0 11px rgba(236,197,143,0.88)) brightness(1.10); }
}
.footer-blogo,
.fd-splash__logo,
.fd-divider__logo,
.nav-menu-logo,
.links__logo {
  will-change: filter;
  animation: fd-logo-glow 3s ease-in-out infinite;
}
.footer-blogo:hover { animation-duration: 1.6s; }
@media (prefers-reduced-motion: reduce) {
  .footer-blogo, .fd-splash__logo, .fd-divider__logo, .nav-menu-logo, .links__logo { animation: none; }
}

/* ============================================================
   Pulsing gold glow on the primary "Reserve" / gold CTA buttons —
   same champagne glow as the logo lockup. Idle pulse + quicker on hover.
   Scoped to gold buttons only (ghost/outline buttons via --modifier excluded).
   ============================================================ */
@keyframes fd-btn-glow {
  0%, 100% { filter: drop-shadow(0 0 0.5px rgba(236,197,143,0.18)); }
  50%      { filter: drop-shadow(0 0 12px rgba(236,197,143,0.72)); }
}
.btn--gold,
a.btn:not([class*="--"]),
button.btn:not([class*="--"]) {
  animation: fd-btn-glow 3s ease-in-out infinite;
  will-change: filter;
}
.btn--gold:hover,
a.btn:not([class*="--"]):hover,
button.btn:not([class*="--"]):hover { animation-duration: 1.5s; }
@media (prefers-reduced-motion: reduce) {
  .btn--gold, a.btn:not([class*="--"]), button.btn:not([class*="--"]) { animation: none; }
}

/* Reserve / gold CTA buttons → Bright champagne #ECC58F (user pick 2026-06-18) */
.btn--gold,
a.btn:not([class*="--"]),
button.btn:not([class*="--"]) {
  background: #ECC58F !important;
  border-color: #ECC58F !important;
  color: #2A1E12 !important;
}
.btn--gold:hover,
a.btn:not([class*="--"]):hover,
button.btn:not([class*="--"]):hover {
  background: #F2D6A2 !important;
  border-color: #F2D6A2 !important;
  color: #2A1E12 !important;
}