/* ============================================================
   SIERRA AUTO GROUP — Design System
   ============================================================ */

:root {
  color-scheme: dark;
  --obsidian: #0A0A0C;
  --jet:      #101013;
  --graphite: #15151A;
  --slate2:   #1E1E24;
  --bone:     #F1ECE3;
  --ash:      #8A8479;
  --gold:     #CBB26A;
  --gold-2:   #E0C684;
  --gold-d:   #8E7340;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { -webkit-tap-highlight-color: transparent; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;        /* widest support — Safari < 16, older Android */
  overflow-x: clip;          /* progressive enhancement when available */
}

body {
  background: var(--obsidian);
  color: var(--bone);
  /* Apple-first font stack: missing glyphs fall back to SF Pro on iOS/macOS
     so users never see the blue "missing glyph" indicator */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `optimizeLegibility` was triggering broken OpenType ligatures in Inter on
     iOS Safari (e.g. rendering "ties" in "cities" as a missing-glyph box).
     `auto` plus explicit ligature disabling gives us reliable rendering. */
  text-rendering: auto;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0;
  font-variant-ligatures: none;
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  position: relative;
}

.font-display { font-family: 'Cormorant Garamond', 'New York', 'Times New Roman', Georgia, serif; }
.font-ui      { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; }
.tight        { letter-spacing: -0.03em; }
.tighter      { letter-spacing: -0.04em; }
.nums         { font-variant-numeric: tabular-nums; }

/* ---------- Film grain ----------
   Removed: mix-blend-mode: overlay was forcing a full-screen blend
   composite on every paint frame, which was the single biggest cause
   of scroll jank on mobile. The visual difference is negligible.
*/

/* ---------- Mobile performance lockdown ----------
   On phones and small tablets, disable every animated/expensive effect
   the browser would otherwise have to compute on each frame.
   Result: a fully static experience that scrolls at 60fps even on older devices. */
@media (max-width: 1024px) {
  /* Kill scroll-triggered reveals & staggered animations */
  .reveal, .reveal.in, .stagger, .stagger.in,
  .stagger > *, .stagger.in > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  /* Kill hover-based transforms (irrelevant on touch) */
  .vcard, .vcard:hover,
  .lift, .lift:hover,
  .tier, .tier:hover,
  .pillar, .pillar:hover {
    transform: none !important;
  }
  /* Kill image-scale hover and zoom transitions */
  .img-treat img,
  .img-treat:hover img {
    transition: none !important;
    transform: none !important;
  }
  /* Kill the gold button shine (mix-blend-mode is expensive on mobile) */
  .btn-gold::after { display: none !important; }
  /* Keep the brand marquee animating — it's compositor-only (transform)
     and provides the only motion on mobile, so it doesn't cost us anything */
  /* Simplify the sticky header — no transitions */
  header.sticky {
    transition: none !important;
    background-color: rgba(8, 8, 10, 0.96) !important;
  }
}

/* ============================================================
   PRELOADER — Apple-level GPU-only smoothness
   Every animation here uses ONLY transform and opacity, which are
   compositor-only properties (no layout, no paint per frame).
   Filters are static (paint once, never re-rasterized).
   ============================================================ */

#preloader {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: #0A0A0C;
  /* Fast crisp fade-out, no visibility transition (was redundant) */
  transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Isolate paint/layout from the rest of the document */
  contain: layout style paint;
  will-change: opacity;
}
#preloader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Ambient gold haze (static, fades in once — no per-frame work) */
#preloader::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55rem 40rem at 50% 50%, rgba(203,178,106,0.14), transparent 70%);
  opacity: 0;
  will-change: opacity;
  animation: pl-ambient 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}
@keyframes pl-ambient { to { opacity: 1; } }

/* Stage container — promoted to its own GPU layer */
#preloader .pl-stage {
  display: flex; flex-direction: column; align-items: center;
  position: relative;
  opacity: 0;
  transform: translateZ(0) scale(0.96);
  will-change: transform, opacity;
  animation: pl-stage-in 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
@keyframes pl-stage-in {
  to { opacity: 1; transform: translateZ(0) scale(1); }
}

/* Halo behind the mark — STATIC glow, only fades in (cheap) */
#preloader .pl-stage::before {
  content: ''; position: absolute;
  top: -40px; left: 50%;
  width: 380px; height: 380px;
  transform: translate3d(-50%, 0, 0);
  background: radial-gradient(circle, rgba(203,178,106,0.30) 0%, rgba(203,178,106,0.12) 25%, transparent 60%);
  filter: blur(8px);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  will-change: opacity;
  animation: pl-halo-in 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}
@keyframes pl-halo-in { to { opacity: 1; } }

/* The mountain mark — static layered glow, GPU-promoted */
#preloader .pl-mark {
  width: 200px; height: auto;
  color: var(--gold);
  position: relative;
  z-index: 1;
  /* Static glow: 2 layers, painted once, never re-rasterized */
  filter:
    drop-shadow(0 0 5px rgba(255, 232, 170, 0.55))
    drop-shadow(0 0 24px rgba(203, 178, 106, 0.55));
  transform: translateZ(0);
  will-change: transform;
  /* One gentle breath after the stroke completes (transform only) */
  animation: pl-breathe 3.5s ease-in-out 1.6s 1;
}
@keyframes pl-breathe {
  0%, 100% { transform: translateZ(0) scale(1); }
  50%      { transform: translateZ(0) scale(1.03); }
}

/* Stroke draw — the only paint-bound animation, kept short and snappy */
#preloader .pl-mark path {
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: pl-draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}
@keyframes pl-draw { to { stroke-dashoffset: 0; } }

/* Dot pop — transform + opacity only */
#preloader .pl-mark circle {
  opacity: 0;
  transform: scale(0);
  transform-origin: 28px 6px;
  animation: pl-dot 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards;
}
@keyframes pl-dot {
  to { opacity: 1; transform: scale(1); }
}

/* Wordmark — opacity + translateY only (no letter-spacing animation:
   that's a paint operation that causes glyph reflow on every frame). */
#preloader .pl-wordmark {
  margin-top: 38px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  letter-spacing: 0.34em;
  color: var(--bone);
  font-size: 46px;
  line-height: 1;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  text-shadow:
    0 0 18px rgba(203, 178, 106, 0.30),
    0 0 48px rgba(203, 178, 106, 0.15);
  will-change: transform, opacity;
  animation: pl-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.8s forwards;
}
@keyframes pl-rise {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Subtitle with hairlines flanking it */
#preloader .pl-sub {
  margin-top: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.5em;
  color: var(--bone);
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  will-change: transform, opacity;
  animation: pl-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 2.2s forwards;
}

/* Hairlines: fixed width, animate via transform: scaleX()
   (compositor-only — never triggers layout reflow) */
#preloader .pl-sub::before,
#preloader .pl-sub::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  will-change: transform;
  animation: pl-rule 0.9s cubic-bezier(0.16, 1, 0.3, 1) 2.5s forwards;
}
@keyframes pl-rule {
  to { transform: scaleX(1); }
}

/* ============================================================
   FAST preloader variant — used for internal navigation only.
   Same visual sequence, same branding — drastically compressed
   so internal nav feels nearly instant (~700ms total visible).
   ============================================================ */
#preloader.is-fast {
  /* Snappier fade-out for the page reveal */
  transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
#preloader.is-fast::before {
  animation-duration: 0.3s;
  animation-delay: 0s;
}
#preloader.is-fast .pl-stage {
  animation-duration: 0.25s;
  animation-delay: 0s;
}
#preloader.is-fast .pl-stage::before {
  animation-duration: 0.3s;
  animation-delay: 0.05s;
}
#preloader.is-fast .pl-mark {
  animation: none;
}
#preloader.is-fast .pl-mark path {
  animation-duration: 0.35s;
  animation-delay: 0.05s;
}
#preloader.is-fast .pl-mark circle {
  animation-duration: 0.2s;
  animation-delay: 0.35s;
}
#preloader.is-fast .pl-wordmark {
  animation-duration: 0.25s;
  animation-delay: 0.3s;
}
#preloader.is-fast .pl-sub {
  animation-duration: 0.25s;
  animation-delay: 0.4s;
}
#preloader.is-fast .pl-sub::before,
#preloader.is-fast .pl-sub::after {
  animation-duration: 0.25s;
  animation-delay: 0.5s;
}

@media (max-width: 640px) {
  #preloader .pl-mark { width: 150px; }
  #preloader .pl-wordmark { font-size: 34px; margin-top: 30px; }
  #preloader .pl-stage::before { width: 300px; height: 300px; top: -30px; }
}

@media (prefers-reduced-motion: reduce) {
  #preloader::before,
  #preloader .pl-stage,
  #preloader .pl-stage::before,
  #preloader .pl-mark,
  #preloader .pl-mark path,
  #preloader .pl-mark circle,
  #preloader .pl-wordmark,
  #preloader .pl-sub,
  #preloader .pl-sub::before,
  #preloader .pl-sub::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ---------- Gold ---------- */
.gold-text {
  background: linear-gradient(180deg, #E0C684 0%, #CBB26A 60%, #A78947 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Typography polish ----------
   - text-wrap: balance distributes display headings across lines elegantly
     (no orphan words on the last line). Modern browser feature, no fallback
     needed — older browsers just get the default wrap.
   - tabular-nums + lining figures on all .nums elements so prices, years,
     and stats align cleanly across cards. */
h1, h2, h3, .font-display { text-wrap: balance; }
p { text-wrap: pretty; }
.nums {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
}
/* Subtle optical refinement on display type */
.font-display {
  font-feature-settings: "kern", "liga", "calt";
}

/* ---------- Buttons (Apple-style pill) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.65rem;
  padding: 0.95rem 1.75rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: 999px;
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease),
              color 260ms, background 320ms, border-color 260ms;
  border: 1px solid transparent;
  will-change: transform; cursor: pointer;
  line-height: 1;
}
.btn-gold {
  color: var(--obsidian);
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 4px 18px -6px rgba(203,178,106,0.45);
}
.btn-gold:hover {
  transform: translateY(-1px);
  background: var(--gold-2);
  border-color: var(--gold-2);
  box-shadow: 0 10px 30px -8px rgba(203,178,106,0.65);
}
.btn-gold:active { transform: translateY(0); }

.btn-ghost {
  color: var(--bone);
  border-color: rgba(241,236,227,0.22);
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(203,178,106,0.04);
}


/* ---------- Links ---------- */
.link-gold { position: relative; transition: color 220ms; }
.link-gold::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 420ms var(--ease);
}
.link-gold:hover { color: var(--gold); }
.link-gold:hover::after { transform: scaleX(1); transform-origin: left center; }

/* Active nav state */
.nav-link.is-active { color: var(--gold); }
.nav-link.is-active::after { transform: scaleX(1); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
}

/* Gold hairline rule, injected by animations.js beneath each section-heading
   eyebrow (those followed by a display h2/h3). Drawn from left to right via
   scaleX 0→1 in GSAP. If JS is disabled the rule simply doesn't appear
   (the spacing is reserved by the eyebrow's own margin, no layout shift). */
.hairline-rule {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--gold);
  margin: 0.35rem auto 0.95rem;
  transform-origin: left center;
  pointer-events: none;
}
@media (max-width: 767px) {
  .hairline-rule { width: 42px; margin: 0.3rem auto 0.75rem; }
}

/* ---------- Hairlines ---------- */
.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(241,236,227,0.18) 25%, rgba(241,236,227,0.18) 75%, transparent);
}
.hairline-gold {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(203,178,106,0.6) 25%, rgba(203,178,106,0.6) 75%, transparent);
}

/* ---------- Marquee ---------- */
.marquee { display: flex; width: max-content; animation: scroll 50s linear infinite; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }

/* ---------- Image treatment ----------
   Fallback background so the section looks intentional even if the
   image fails to load (Corvette photo not yet on disk, slow network, etc.) */
.img-treat {
  position: relative; overflow: hidden;
  background:
    radial-gradient(80% 60% at 30% 40%, rgba(203,178,106,0.08) 0%, transparent 55%),
    linear-gradient(135deg, #0A0A0C 0%, #15151A 50%, #1E1E24 100%);
  background-color: var(--obsidian);
}
/* Don't fight Tailwind's `.absolute` class when img-treat is also used as
   an absolutely-positioned hero background (otherwise wrapper height
   collapses to 0 and overflow:hidden clips the video). */
.img-treat.absolute { position: absolute; }
/* Filter-free: filter:saturate/contrast forces a paint every frame and
   was a major desktop-scroll lag cause. Color treatment can be baked
   into the actual photos in post if needed. */
.img-treat > img { transition: transform 520ms var(--ease); }

/* ---------- Hero text readability over video ----------
   Subtle text-shadow so the headline + paragraph stay readable against any
   frame of the cinematic video, including bright reflections. */
.page-hero h1,
section#main h1,
section#main .hero-sub,
section#main .eyebrow,
section#main .trust-row {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(0, 0, 0, 0.35);
}
.hero-sub {
  /* Slightly brighter than the original bone/75 so it pops over video */
  color: rgba(241, 236, 227, 0.95);
}

/* ---------- Hero video (homepage cinematic) ----------
   Plays muted + ping-pongs (forward → reverse → forward) via JS so the camera
   pan loops smoothly with no jarring cut back to the start. Falls back to the
   poster image if autoplay is blocked. Darkening is handled by .img-vignette. */
.hero-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  min-width: 100%; min-height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
  -webkit-appearance: none;
  appearance: none;
}
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-play-button,
.hero-video::-webkit-media-controls-overlay-play-button,
.hero-video::-webkit-media-controls-panel,
.hero-video::-webkit-media-controls-enclosure {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mobile: keep `object-fit: cover` so the video fills the entire hero like it
   does on desktop. The state ribbon + headline + paragraph all overlay on the
   live video. We compensate for the wide video → tall mobile aspect mismatch
   by making the mobile hero shorter (set via min-h reduction in index.html),
   so cover-scaling doesn't have to upscale as aggressively. */
@media (max-width: 767px) {
  .hero-video {
    object-fit: cover;
    object-position: center;
  }
  .hero-secondary-cta { display: none !important; }
}

/* Reduced-motion: pause the video for accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-video { animation-play-state: paused; }
}
.img-vignette::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 100%),
    linear-gradient(180deg, rgba(10,10,12,0.55) 0%, rgba(10,10,12,0) 25%, rgba(10,10,12,0) 70%, rgba(10,10,12,0.85) 100%);
}

/* ---------- Pillar (Why Choose) card ---------- */
.pillar {
  position: relative;
  padding: 2rem 1.5rem;
  background: rgba(10,10,12,0.55);
  border: 1px solid rgba(203,178,106,0.18);
  backdrop-filter: blur(8px);
  transition: transform 480ms var(--ease), border-color 320ms, background 320ms;
}
.pillar:hover {
  transform: translateY(-6px);
  border-color: rgba(203,178,106,0.55);
  background: rgba(15,15,18,0.7);
}
.pillar svg.icn { color: var(--gold); }

/* ---------- Section reveal ----------
   Short and light — was 1100ms which overlapped on fast scrolls.
   500ms feels alive without ever stuttering. */
.reveal { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.reveal.in { opacity: 1; transform: translate3d(0, 0, 0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Stagger children ----------
   Faster duration + tighter delays so the last item lands before
   the next section even starts revealing. */
.stagger > * {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
}
.stagger.in > * { opacity: 1; transform: translate3d(0, 0, 0); }
.stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.stagger.in > *:nth-child(2) { transition-delay: 50ms; }
.stagger.in > *:nth-child(3) { transition-delay: 100ms; }
.stagger.in > *:nth-child(4) { transition-delay: 150ms; }
.stagger.in > *:nth-child(5) { transition-delay: 200ms; }
.stagger.in > *:nth-child(6) { transition-delay: 250ms; }
.stagger.in > *:nth-child(7) { transition-delay: 300ms; }
.stagger.in > *:nth-child(8) { transition-delay: 350ms; }
@media (prefers-reduced-motion: reduce) {
  .stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ---------- Scroll-aware header ----------
   Avoiding backdrop-filter (very expensive paint per frame).
   Using stronger opacity background instead — same look, ~10x cheaper. */
header.sticky {
  transition: background-color 320ms var(--ease), border-color 320ms var(--ease);
}
header.sticky.is-scrolled {
  background-color: rgba(8, 8, 10, 0.98);
  border-bottom-color: rgba(203, 178, 106, 0.14);
}

/* DESKTOP ONLY — kill backdrop-filter on always-visible elements to fix
   per-scroll-frame paint cost. Mobile (where the user already loves the
   experience) keeps the original blur untouched. */
@media (min-width: 1025px) {
  header.sticky {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(10, 10, 12, 0.92);
  }
  /* The 14 fleet-card category badges (Performance / Executive / Grand Touring /
     Convertible / "In Stable") each had their own backdrop-blur, multiplying
     scroll-paint cost. Solid 80% obsidian gives the same look without the cost. */
  .vcard .absolute.top-4.left-4,
  .vcard .absolute.top-4.right-4 {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(10, 10, 12, 0.82);
  }
  /* The 4 "Why Choose Sierra" pillar cards on the homepage had backdrop-blur(8px).
     Pure paint cost on every scroll frame. Solid bg looks the same. */
  .pillar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15, 15, 18, 0.7);
  }
}

/* ---------- Button shine on hover ---------- */
.btn-gold {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 800ms var(--ease);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.btn-gold:hover::after { transform: translateX(120%); }

/* ---------- Focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px; border-radius: 2px;
}

/* ---------- Nav links ---------- */
.nav-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(241,236,227,0.78);
}

/* ---------- Brand strip ---------- */
.brand-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500; font-size: 14px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(241,236,227,0.55);
  transition: color 220ms;
}
.brand-name:hover { color: var(--gold); }

/* Mobile: thinner brand strip to match the rest of the site's mobile scale */
@media (max-width: 767px) {
  .brand-name {
    font-size: 10.5px !important;          /* !important overrides Tailwind's `!text-base` on italic entries */
    letter-spacing: 0.22em !important;
  }
}

/* ---------- Stat number ---------- */
.stat-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300; line-height: 1;
  letter-spacing: -0.03em;
  font-size: clamp(3rem, 6vw, 5rem);
}

/* ---------- Skip-to-content link (accessibility) ----------
   Hidden off-screen until focused. Required for keyboard / screen-reader users
   to skip past the nav and jump straight to the page content. */
.skip-link {
  position: fixed;
  top: -120px; left: 1rem;
  z-index: 200;
  background: var(--gold);
  color: var(--obsidian);
  padding: 0.85rem 1.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 18px -6px rgba(203, 178, 106, 0.45);
  transition: top 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.skip-link:focus, .skip-link:focus-visible {
  top: 1rem;
  outline: 2px solid var(--bone);
  outline-offset: 2px;
}

/* ---------- Visually hidden helper (sr-only) ---------- */
.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;
}

/* ---------- Sticky mobile CTA bar (CONVERSION) ----------
   Always-visible Call + Reserve at the bottom of every page on phones.
   The single biggest conversion win for a luxury rental site —
   the next step is always one tap away, never more than a thumb's reach. */
.mobile-cta-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 55;
  padding: 0.7rem 0.75rem calc(0.7rem + env(safe-area-inset-bottom));
  gap: 0.5rem;
  background: rgba(8, 8, 10, 0.96);
  border-top: 1px solid rgba(203, 178, 106, 0.22);
}
.mobile-cta-bar .btn {
  flex: 1;
  padding: 0.85rem 0.5rem;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  gap: 0.4rem;
}
@media (max-width: 767px) {
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: 72px; }
}

/* ---------- Scroll-hint container for wide tables on mobile ---------- */
.table-scroll {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
}
@media (min-width: 1024px) {
  .table-scroll { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Thank-you page (CONVERSION) ----------
   Cinematic confirmation experience: animated checkmark + steps timeline. */
.ty-checkmark {
  width: 86px; height: 86px;
  color: var(--gold);
}
.ty-checkmark svg { width: 100%; height: 100%; }
.ty-ring {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: tyRingDraw 900ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards;
}
.ty-check {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: tyCheckDraw 520ms cubic-bezier(0.16, 1, 0.3, 1) 900ms forwards;
}
@keyframes tyRingDraw { to { stroke-dashoffset: 0; } }
@keyframes tyCheckDraw { to { stroke-dashoffset: 0; } }

.ty-timeline { list-style: none; padding: 0; margin: 0; counter-reset: ty-step; }
.ty-step {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  align-items: start;
}
.ty-step:first-child { border-top: 0; padding-top: 0; }
.ty-step-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px; font-weight: 300;
  color: var(--gold);
  font-feature-settings: "tnum";
  line-height: 1;
  padding-top: 4px;
}
@media (max-width: 640px) {
  .ty-step { grid-template-columns: 50px 1fr; gap: 1rem; }
  .ty-step-num { font-size: 30px; }
}

/* ---------- Fleet card image gallery trigger ----------
   GPU-only transitions (transform + opacity). No filters, no backdrop-filter
   on hover — those repaint the entire card every frame. */
.vcard-gallery-trigger {
  position: absolute; inset: 0;
  display: block; padding: 0; margin: 0; border: 0;
  background: transparent; cursor: zoom-in;
  overflow: hidden;
  z-index: 1;
}
.vcard-gallery-trigger img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center;
  transform: translateZ(0); /* promote to its own layer */
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (min-width: 1025px) {
  .vcard:hover .vcard-gallery-trigger img,
  .vcard-gallery-trigger:focus-visible img { transform: scale(1.03) translateZ(0); }
}
.vcard-photo-badge {
  position: absolute; bottom: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px;
  background: rgba(8,8,10,0.82);
  border: 1px solid rgba(203,178,106,0.35);
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(241,236,227,0.95);
  z-index: 2;
  pointer-events: none;
}
.vcard-photo-badge::before {
  content: ""; width: 11px; height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CBB26A' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M9 5l1-2h4l1 2'/%3E%3C/svg%3E") no-repeat center / contain;
  flex-shrink: 0;
}

/* ---------- Lightbox gallery (CONVERSION) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  isolation: isolate;
}
.lightbox.is-open { display: flex; animation: lbFade 320ms var(--ease); }
.lightbox-bg {
  position: absolute; inset: 0;
  background: rgba(4,4,6,0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }

.lightbox-header {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 26px 80px 18px;
  text-align: center;
  z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,4,6,0.6) 0%, transparent 100%);
}
.lightbox-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(203,178,106,0.85);
  margin: 0 0 8px;
}
.lightbox-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300; font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.005em;
  color: var(--bone);
  margin: 0;
}
.lightbox-counter {
  margin: 12px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-feature-settings: "tnum";
  color: rgba(241,236,227,0.65);
  font-size: 14px;
  letter-spacing: 0.08em;
}
.lightbox-counter-sep { color: rgba(203,178,106,0.6); margin: 0 6px; }

.lightbox-close {
  position: absolute; top: 22px; right: 22px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20,20,24,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  color: rgba(241,236,227,0.85);
  cursor: pointer;
  z-index: 4;
  transition: background 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease), transform 240ms var(--ease);
}
.lightbox-close:hover {
  background: rgba(203,178,106,0.18);
  border-color: rgba(203,178,106,0.5);
  color: var(--gold);
  transform: rotate(90deg);
}

.lightbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20,20,24,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  color: rgba(241,236,227,0.85);
  cursor: pointer;
  z-index: 3;
  transition: background 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease), transform 280ms var(--ease);
}
.lightbox-arrow:hover {
  background: rgba(203,178,106,0.18);
  border-color: rgba(203,178,106,0.5);
  color: var(--gold);
}
.lightbox-prev { left: 28px; }
.lightbox-next { right: 28px; }
.lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(3px); }
.lightbox-arrow[disabled] { opacity: 0.25; pointer-events: none; }

.lightbox-stage {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-track {
  display: flex;
  width: 100%; height: 100%;
  transition: transform 540ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lightbox.is-open .lightbox-track {
  will-change: transform;
}
.lightbox-track.is-dragging { transition: none; }
.lightbox-slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 110px 90px 110px;
}
.lightbox-slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.8);
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transition: opacity 360ms var(--ease);
}
.lightbox-slide img.is-loaded { opacity: 1; }
.lightbox-slide-loading {
  position: absolute;
  width: 28px; height: 28px;
  border: 2px solid rgba(203,178,106,0.18);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: lbSpin 700ms linear infinite;
}
@keyframes lbSpin { to { transform: rotate(360deg); } }

.lightbox-dots {
  position: absolute; bottom: 50px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 3;
}
.lightbox-dots button {
  width: 8px; height: 8px;
  border: 0; padding: 0;
  border-radius: 50%;
  background: rgba(241,236,227,0.25);
  cursor: pointer;
  transition: background 240ms var(--ease), width 320ms var(--ease);
}
.lightbox-dots button.is-active {
  background: var(--gold);
  width: 22px;
  border-radius: 6px;
}

.lightbox-hint {
  position: absolute; bottom: 14px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(241,236,227,0.35);
  z-index: 3;
  white-space: nowrap;
}
.lightbox-hint kbd {
  display: inline-block;
  padding: 1px 5px; margin: 0 2px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
  font-family: inherit; font-size: 9px;
  color: rgba(241,236,227,0.6);
}
.lightbox-hint-mobile { display: none; }
@media (hover: none) and (pointer: coarse) {
  .lightbox-hint-desktop { display: none; }
  .lightbox-hint-mobile { display: inline; }
}

/* Mobile/tablet adjustments */
@media (max-width: 768px) {
  .lightbox-header { padding: 18px 20px 14px; }
  .lightbox-title { font-size: 20px; }
  .lightbox-counter { margin-top: 8px; font-size: 12px; }
  .lightbox-close { top: 14px; right: 14px; width: 38px; height: 38px; }
  .lightbox-arrow {
    width: 42px; height: 42px;
    background: rgba(20,20,24,0.7);
  }
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
  .lightbox-slide { padding: 100px 16px 96px; }
  .lightbox-dots { bottom: 56px; }
  .lightbox-hint { bottom: 20px; font-size: 9px; letter-spacing: 0.2em; }
}

/* Prevent body scroll when lightbox open */
body.lightbox-open { overflow: hidden; }

/* ---------- Rate transparency button + modal (CONVERSION) ---------- */
.rates-trigger {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0;
  background: transparent; border: 0; cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(241,236,227,0.45);
  transition: color 220ms var(--ease);
}
.rates-trigger:hover, .rates-trigger:focus-visible {
  color: var(--gold); outline: 0;
}

.rates-modal {
  position: fixed; inset: 0; z-index: 80;
  display: none;
  align-items: center; justify-content: center;
  padding: 1.25rem;
}
.rates-modal.is-open { display: flex; }
.rates-modal-bg {
  position: absolute; inset: 0;
  background: rgba(6, 6, 8, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: ratesFade 320ms var(--ease);
}
.rates-modal-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  padding: 2.25rem 1.75rem 1.75rem;
  background: linear-gradient(180deg, #15151B 0%, #101013 100%);
  border: 1px solid rgba(203,178,106,0.22);
  border-radius: 3px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02) inset;
  animation: ratesIn 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ratesFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ratesIn {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.rates-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(241,236,227,0.55);
  border-radius: 2px;
  transition: color 200ms var(--ease), background 200ms var(--ease);
}
.rates-modal-close:hover { color: var(--gold); background: rgba(203,178,106,0.08); }

.rates-grid { display: flex; flex-direction: column; }
.rate-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rate-row:last-child { border-bottom: 0; }
.rate-row .rate-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(241,236,227,0.55);
}
.rate-row .rate-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 400;
  color: var(--bone);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.rate-row .rate-save {
  display: inline-block;
  margin-left: 0.6rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
  vertical-align: middle;
}
.rate-row-featured { background: linear-gradient(90deg, rgba(203,178,106,0.06), transparent); margin: 0 -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; }
.rate-row-featured .rate-label { color: var(--gold); }
.rates-modal-cta { width: 100%; justify-content: center; }

/* ---------- Fleet card status pill system ----------
   Replaces / unifies the "In Stable" badge. Three states:
     .status-stable   → "In Stable"  (gold solid — available now)
     .status-reserved → "Reserved"   (amber outline — booked through a date)
     .status-returning → "Returning [date]" (subtle ash — on its way back)
   Position: top-right of card image (matches the existing "In Stable" slot). */
.status-pill {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 5px 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  border-radius: 2px;
  z-index: 2;
  white-space: nowrap;
}
.status-pill::before {
  content: ''; width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-pill.status-stable {
  background: rgba(203, 178, 106, 0.95);
  color: #0A0A0C;
}
.status-pill.status-stable::before {
  background: #0A0A0C;
}
.status-pill.status-reserved {
  background: rgba(8, 8, 10, 0.85);
  color: #D9B770;
  border: 1px solid rgba(203, 178, 106, 0.45);
}
.status-pill.status-reserved::before {
  background: #D9B770;
}
.status-pill.status-returning {
  background: rgba(8, 8, 10, 0.85);
  color: rgba(241, 236, 227, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.status-pill.status-returning::before {
  background: rgba(241, 236, 227, 0.55);
}
@media (max-width: 639px) {
  .status-pill {
    top: 8px; right: 8px;
    padding: 3px 7px;
    font-size: 8.5px; letter-spacing: 0.22em;
  }
  .status-pill::before { width: 4px; height: 4px; }
}

/* ---------- Announcement bar + live concierge indicator ----------
   Shows real-time status — green pulse when within 9-19 ET, gray when closed.
   Builds trust without being pushy. */
.announcement-bar {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  font-family: 'Montserrat', sans-serif;
  white-space: nowrap;
}
/* Tighten font + letter-spacing on small mobile so the full text fits */
@media (max-width: 639px) {
  .announcement-bar {
    font-size: 9px;
    letter-spacing: 0.24em;
    gap: 0.35rem 0.65rem;
  }
}
@media (max-width: 399px) {
  .announcement-bar {
    font-size: 8px;
    letter-spacing: 0.2em;
  }
}
.announcement-sep {
  display: inline-block; width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(241,236,227,0.25);
}
.concierge-status {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-feature-settings: "tnum";
}
.concierge-dot {
  position: relative;
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(138, 132, 121, 0.6); /* default: closed (ash) */
  transition: background 480ms var(--ease);
}
.concierge-status.is-open .concierge-dot {
  background: #6FCF7C; /* soft green */
}
.concierge-status.is-open .concierge-dot::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid #6FCF7C;
  opacity: 0;
  animation: conciergePulse 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes conciergePulse {
  0%   { transform: scale(0.85); opacity: 0.6; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
.concierge-label {
  font-size: inherit; letter-spacing: inherit;
  color: rgba(241,236,227,0.55);
  transition: color 320ms var(--ease);
}
.concierge-status.is-open .concierge-label {
  color: rgba(241,236,227,0.85);
}

/* ---------- Testimonial quote cards (CONVERSION) ----------
   Editorial pull-quote design. The middle card "featured" with gold accent. */
.quote-card {
  position: relative;
  padding: 2.2rem 2rem 2rem;
  background: linear-gradient(180deg, rgba(21,21,26,0.55) 0%, rgba(16,16,19,0.55) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 2px;
  display: flex; flex-direction: column;
  transition: border-color 400ms var(--ease), transform 400ms var(--ease), background 400ms var(--ease);
}
.quote-card-featured {
  background: linear-gradient(180deg, rgba(26,22,12,0.6) 0%, rgba(16,14,8,0.6) 100%);
  border-color: rgba(203,178,106,0.28);
}
@media (hover: hover) and (min-width: 1025px) {
  .quote-card:hover { border-color: rgba(203,178,106,0.45); transform: translateY(-2px); }
}
.quote-card .quote-mark {
  width: 28px; height: 28px;
  color: rgba(203,178,106,0.35);
  margin-bottom: 1rem;
}
.quote-card .quote-mark-gold { color: rgba(203,178,106,0.7); }
.quote-card blockquote { margin: 0; }
.quote-card figcaption { font-family: 'Cormorant Garamond', serif; }

/* ---------- Trust signals row (CONVERSION) ----------
   Subtle, low-contrast badges that build confidence without shouting. */
.trust-row {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 0.75rem 1.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(241, 236, 227, 0.45);
}
.trust-row > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.trust-row svg { color: var(--gold); height: 11px; width: 11px; flex-shrink: 0; }

/* Mobile: condense the trust row to 2 lines max + slightly more opaque */
@media (max-width: 639px) {
  .trust-row {
    gap: 0.45rem 1rem;
    font-size: 8.5px;
    letter-spacing: 0.22em;
    color: rgba(241, 236, 227, 0.55);
  }
  .trust-row svg { height: 9px; width: 9px; }
}

/* ---------- Mobile menu ---------- */
#mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--obsidian);
  transform: translateX(100%);
  transition: transform 540ms var(--ease);
  display: flex; flex-direction: column;
  visibility: hidden;
}
#mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
}
#mobile-menu .mm-inner {
  padding: 2rem 1.5rem;
  display: flex; flex-direction: column;
  height: 100%; overflow-y: auto;
}
#mobile-menu .mm-link {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem; font-weight: 300;
  color: var(--bone); padding: 0.6rem 0;
  letter-spacing: -0.02em;
  border-bottom: 1px solid rgba(241,236,227,0.06);
  display: flex; justify-content: space-between; align-items: center;
  transition: color 220ms, padding-left 320ms var(--ease);
}
#mobile-menu .mm-link:hover { color: var(--gold); padding-left: 0.5rem; }
#mobile-menu .mm-link .num {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.32em; color: var(--gold);
}

/* ---------- Inputs ---------- */
.lux-input, .lux-textarea, .lux-select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(241,236,227,0.22);
  color: var(--bone);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 0.9rem 0.25rem;
  width: 100%;
  transition: border-color 240ms var(--ease);
  border-radius: 0;
  appearance: none;
}
.lux-input::placeholder, .lux-textarea::placeholder { color: rgba(241,236,227,0.4); }
.lux-input:focus, .lux-textarea:focus, .lux-select:focus {
  outline: none; border-bottom-color: var(--gold);
}
.lux-textarea { resize: vertical; min-height: 120px; }
.lux-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23CBB26A' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.25rem center; }

/* ---------- Accordion (FAQs) ---------- */
.faq-item {
  border-bottom: 1px solid rgba(241,236,227,0.08);
  transition: background 320ms;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.6rem 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--bone);
  transition: color 220ms;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold); }
.faq-item .icn-toggle { transition: transform 360ms var(--ease); color: var(--gold); }
.faq-item[open] .icn-toggle { transform: rotate(45deg); }
.faq-item .answer {
  padding: 0 0 1.8rem 0;
  font-size: 14px; line-height: 1.85;
  color: rgba(241,236,227,0.70);
  max-width: 56rem;
}

/* ---------- Vehicle / fleet card ---------- */
.vcard {
  position: relative;
  background: var(--graphite);
  border: 1px solid rgba(255,255,255,0.04);
  transition: transform 520ms var(--ease), border-color 320ms;
}
.vcard:hover {
  transform: translateY(-6px);
  border-color: rgba(203,178,106,0.35);
}

/* ---------- Compact card content on 2-col mobile ----------
   Reduces title size, padding, and spec gaps so the cards stay polished
   when shown side-by-side on small screens. Reverts at the sm breakpoint. */
@media (max-width: 639px) {
  .vcard .p-5 { padding: 0.85rem 0.9rem 0.9rem; }
  .vcard h3.text-2xl {
    font-size: 17px;
    line-height: 1.12;
    letter-spacing: -0.005em;
  }
  .vcard .text-2xl + span { font-size: 9.5px; letter-spacing: 0.18em; }
  .vcard .mt-3 { margin-top: 0.5rem; }
  .vcard .my-5 { margin-top: 0.85rem; margin-bottom: 0.85rem; }
  .vcard .gap-4 { gap: 0.55rem; }
  .vcard .text-\[11\.5px\] { font-size: 10.5px; }
  /* Title spec row: hide vertical separators on mobile + allow gentle wrap */
  .vcard .mt-3.flex { flex-wrap: wrap; row-gap: 0.3rem; }
  .vcard .mt-3 .h-3.w-px { display: none; }
  .vcard .mt-3 > span:not(.h-3) { font-size: 10px; opacity: 0.75; }
  /* Price block + reserve link layout */
  .vcard .text-xl.nums { font-size: 17px; }
  .vcard .text-\[10\.5px\].tracking-\[0\.28em\].text-bone {
    font-size: 9.5px; letter-spacing: 0.2em;
    white-space: nowrap;
  }
  .vcard .rates-trigger {
    font-size: 8.5px; letter-spacing: 0.18em;
    margin-top: 0.25rem;
    white-space: nowrap;
  }
  /* Stack price column + Reserve link vertically so neither wraps */
  .vcard .flex.items-end.justify-between {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
  }
  .vcard .flex.items-end.justify-between > div:first-child { width: 100%; }
  .vcard .vcard-photo-badge {
    bottom: 8px; right: 8px;
    padding: 4px 7px; font-size: 8.5px; letter-spacing: 0.22em; gap: 5px;
  }
  .vcard .vcard-photo-badge::before { width: 9px; height: 9px; }
  /* Performance / category badges in top-left + In Stable top-right */
  .vcard .top-4.left-4,
  .vcard .top-4.right-4 {
    top: 8px;
    padding: 3px 7px;
    font-size: 8.5px;
    letter-spacing: 0.2em;
  }
  .vcard .top-4.left-4 { left: 8px; }
  .vcard .top-4.right-4 { right: 8px; }
  /* Reduce hover lift on mobile (less needed, conserves perf) */
  .vcard:hover { transform: none; border-color: rgba(255,255,255,0.04); }
}

/* ---------- Scroll-margin for all in-page anchor targets ---------- */
[id]:target,
#contact-form,
#main,
.chip,
.faq-item[id],
.scroll-mt-28 {
  scroll-margin-top: 110px;
}

/* ---------- Filter chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(241,236,227,0.75);
  border: 1px solid rgba(241,236,227,0.18);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: color 220ms, background 220ms, border-color 220ms;
}
.chip:hover { color: var(--gold); border-color: rgba(203,178,106,0.45); }
.chip.is-active {
  color: var(--obsidian);
  background: var(--gold);
  border-color: var(--gold);
}

/* ---------- Membership tier card ---------- */
.tier {
  position: relative;
  padding: 2.5rem 2rem;
  background: rgba(15,15,18,0.6);
  border: 1px solid rgba(241,236,227,0.08);
  transition: transform 480ms var(--ease), border-color 320ms;
}
.tier:hover { transform: translateY(-6px); border-color: rgba(203,178,106,0.45); }
.tier.is-featured {
  border-color: rgba(203,178,106,0.55);
  background: linear-gradient(180deg, rgba(203,178,106,0.06) 0%, rgba(15,15,18,0.6) 100%);
}
.tier .tier-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--obsidian);
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.32em;
  padding: 5px 14px; text-transform: uppercase;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  padding: 7rem 0 5rem;
  text-align: center;
  overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(50rem 30rem at 50% 0%, rgba(203,178,106,0.12), transparent 60%),
    radial-gradient(40rem 30rem at 50% 100%, rgba(203,178,106,0.06), transparent 60%);
}
/* Fleet page only — compact variant so the cards come into view sooner.
   Same proportional reduction across all viewports for visual consistency. */
.page-hero-compact { padding: 3.5rem 0 2rem; }
@media (min-width: 768px) {
  .page-hero-compact { padding: 5rem 0 3rem; }
}

/* ---------- Stay Connected grid tiles ----------
   Homepage Instagram-style grid. Square cells with crisp retina images and a
   subtle desktop hover zoom. Mobile gets the still image (no hover state) so
   nothing janks on touch devices. */
.grid-tile-img {
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  transform: scale(1);
  transition: transform 700ms var(--ease), opacity 320ms var(--ease);
  will-change: transform;
  backface-visibility: hidden;
}
@media (hover: hover) and (min-width: 1025px) {
  .grid-tile:hover .grid-tile-img { transform: scale(1.04); }
}
/* Mobile: source photos are wider than tall (4:3), so cover-cropping the sides
   lops part of the car off. Switch to contain so the full motorcar is visible —
   the slight letterbox blends into the obsidian background. */
@media (max-width: 767px) {
  .grid-tile-img { object-fit: contain; }
}

/* Inner-page heroes on mobile — kill the dead space above and below the title so
   visitors see the actual content (cards, FAQs, form) without having to scroll.
   Desktop padding is preserved at the original 7rem/5rem via .page-hero default.
   Affects: memberships, faqs, contact, thank-you, legal pages (any inner page using .page-hero). */
@media (max-width: 767px) {
  .page-hero { padding: 3.5rem 0 1rem; }
  .page-hero + section > .mx-auto { padding-top: 1.25rem; }
  /* Contact's form section needs to be even tighter — the form fields are the
     primary content and should land essentially at the bottom of the hero. */
  .page-hero.contact-hero { padding: 3.5rem 0 0.5rem; }
  .contact-form-section > div { padding-top: 1.25rem; }
}

/* ---------- Legal pages typography ----------
   Used by privacy.html, terms.html, rental-terms.html, accessibility.html.
   Editorial section headings (Cormorant), readable Inter body, comfortable
   line-height, gold subtle accents on emphasized terms. */
.legal-prose { color: rgba(241, 236, 227, 0.78); }
.legal-prose p {
  font-size: 14.5px;
  line-height: 1.9;
  margin: 0 0 1.15rem 0;
}
.legal-prose h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  line-height: 1.2;
  color: var(--bone);
  margin: 3rem 0 1.1rem 0;
  letter-spacing: -0.005em;
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0 0 1.25rem 0;
}
.legal-prose ul li {
  font-size: 14.5px;
  line-height: 1.85;
  margin: 0 0 0.55rem 0;
  padding-left: 0.25rem;
}
.legal-prose ul li::marker {
  color: rgba(203, 178, 106, 0.55);
}
.legal-prose strong {
  color: var(--bone);
  font-weight: 500;
}
.legal-prose em {
  font-style: italic;
  color: rgba(241, 236, 227, 0.92);
}
.legal-prose a {
  color: var(--bone);
  text-decoration: none;
}
@media (max-width: 639px) {
  .legal-prose p, .legal-prose ul li { font-size: 14px; line-height: 1.85; }
  .legal-prose h2 { margin-top: 2.25rem; }
}

/* ---------- Cinematic gallery carousel ----------
   "The Stable · Showroom" section. Five hero motorcars crossfade every 5.5s
   with a slow Ken-Burns zoom (1.0 → 1.08 over 7s). Subtle dark vignette keeps
   the headline + CTA legible over any image. Pauses on hover, on touch, and
   when offscreen (battery + perf). Honors prefers-reduced-motion. */
.gallery-cinema {
  position: relative;
  width: 100%;
  height: 78vh;
  min-height: 520px;
  max-height: 820px;
  overflow: hidden;
  background: var(--obsidian);
  isolation: isolate;
}
@media (max-width: 1024px) {
  .gallery-cinema { height: 72vh; max-height: 720px; }
}
@media (max-width: 767px) {
  .gallery-cinema { height: 54vh; min-height: 380px; max-height: 500px; }
  /* On mobile portrait, landscape car photos crop too aggressively with cover.
     Switch to contain so the entire car is always visible — letterbox bars
     blend with the dark vignette so the cinematic feel is preserved.
     Reduced Ken-Burns amplitude (1.04 vs 1.08) so the contained image doesn't
     overflow the section bounds and re-introduce visible cropping. */
  .gallery-cinema-slide img { object-fit: contain; }
  .gallery-cinema-slide.is-active img { transform: scale(1.04); }
}

.gallery-cinema-stage { position: absolute; inset: 0; z-index: 1; }

.gallery-cinema-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1300ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
.gallery-cinema-slide.is-active { opacity: 1; }

.gallery-cinema-slide picture { position: absolute; inset: 0; display: block; }

.gallery-cinema-slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1);
  transition: transform 7000ms cubic-bezier(0.45, 0, 0.55, 1);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.gallery-cinema-slide.is-active img { transform: scale(1.08); }

/* Vignette: dual-layer dark overlay that keeps overlay text legible over any
   photo (white McLaren, red Ferrari, dark backgrounds — all work). The dense
   central radial pulls focus to the headline; the outer linear-gradient frames
   the section top/bottom. */
.gallery-cinema-vignette {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(10,10,12,0.62) 0%, rgba(10,10,12,0.38) 70%, rgba(10,10,12,0) 100%),
    radial-gradient(115% 95% at 50% 50%, rgba(10,10,12,0.38) 0%, rgba(10,10,12,0.60) 65%, rgba(10,10,12,0.92) 100%),
    linear-gradient(180deg, rgba(10,10,12,0.55) 0%, rgba(10,10,12,0.35) 25%, rgba(10,10,12,0.35) 75%, rgba(10,10,12,0.75) 100%);
}

/* Text overlay (eyebrow + headline + CTA) */
.gallery-cinema-content {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 2.5rem 1.5rem 4rem;
  pointer-events: none;
}
.gallery-cinema-content > * { pointer-events: auto; }
.gallery-cinema-content h3 {
  text-shadow: 0 2px 32px rgba(0,0,0,0.75), 0 0 2px rgba(0,0,0,0.6);
}
.gallery-cinema-content .eyebrow,
.gallery-cinema-content a {
  text-shadow: 0 1px 18px rgba(0,0,0,0.75);
}

/* Pagination dots — Apple TV+ style thin bars */
.gallery-cinema-dots {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 0.55rem;
  padding: 0.5rem;
}
.gallery-cinema-dot {
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: rgba(241, 236, 227, 0.24);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color 320ms var(--ease), width 360ms var(--ease);
}
.gallery-cinema-dot:hover { background: rgba(241, 236, 227, 0.5); }
.gallery-cinema-dot.is-active {
  background: var(--gold);
  width: 36px;
}
.gallery-cinema-dot:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}
@media (max-width: 767px) {
  .gallery-cinema-dots { bottom: 1.25rem; gap: 0.45rem; }
  .gallery-cinema-dot { width: 22px; height: 2px; }
  .gallery-cinema-dot.is-active { width: 30px; }
}

/* Reduced motion: hold on the first photo, kill all animation */
@media (prefers-reduced-motion: reduce) {
  .gallery-cinema-slide,
  .gallery-cinema-slide img { transition: none !important; }
  .gallery-cinema-slide.is-active img { transform: scale(1); }
}

/* ---------- Back-to-top button ----------
   Apple-style: 44px touch target, obsidian glass, gold accent. Appears after
   600px of scroll, fades in with a subtle lift + scale. Sits in the bottom-right
   on desktop; on mobile it floats just above the sticky CTA bar so they never
   overlap. Hidden by default — JS toggles .is-visible based on scroll position. */
.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 12, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(203, 178, 106, 0.35);
  color: var(--gold);
  cursor: pointer;
  z-index: 60;
  padding: 0;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.92);
  transition: opacity 380ms var(--ease),
              transform 420ms var(--ease),
              background-color 240ms var(--ease),
              border-color 240ms var(--ease),
              color 240ms var(--ease);
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
@media (hover: hover) and (min-width: 1025px) {
  .back-to-top:hover {
    background: rgba(203, 178, 106, 0.96);
    border-color: var(--gold-2);
    color: var(--obsidian);
    transform: translateY(-2px) scale(1.03);
  }
}
.back-to-top:active { transform: translateY(0) scale(0.96); }
.back-to-top:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.back-to-top svg {
  width: 16px;
  height: 16px;
  display: block;
}
/* Mobile: lift above the sticky CTA bar (Call + Reserve) so they don't stack */
@media (max-width: 767px) {
  .back-to-top {
    right: 1rem;
    bottom: 5.25rem;
    width: 42px;
    height: 42px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 200ms linear, visibility 0s; transform: none; }
  .back-to-top.is-visible { transform: none; }
}


/* ============================================================
   Lenis smooth scroll integration  (added v=79)
   ------------------------------------------------------------
   Lenis adds class="lenis lenis-smooth" to <html> at runtime
   and makes the html element the scroll container. Without
   these rules:

   1. Tailwind's `overflow-x: hidden` on body computes to
      `overflow-y: auto` per CSS spec — which turns body into
      its own scroll container and breaks `position: sticky`
      on the header. The `clip` override stops that cascade
      while still preventing horizontal overflow.
   2. Browsers' native `scroll-behavior: smooth` on html fights
      Lenis's own RAF-driven smoothing — must be `auto`.
   3. When Lenis is paused (mobile menu open), the `lenis-stopped`
      class needs to fully lock scrolling.
   4. iframes inside a Lenis-controlled page can swallow wheel
      events; disabling pointer-events makes scroll pass through.

   These rules ONLY activate when Lenis is present — on mobile
   (where we skip Lenis) and on browsers where Lenis fails to
   load, none of these selectors match anything.
   ============================================================ */
body.overflow-x-hidden { overflow-x: clip; }

html.lenis,
html.lenis body { height: auto; }

.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }


/* ---------- Utility ---------- */
.divide-gold > * + * { border-top: 1px solid rgba(203,178,106,0.18); }