/* ===== 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: hidden; 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;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,.48),rgba(42,30,18,.34) 50%,rgba(42,30,18,.54));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:1024px){.fd-interlude{background-attachment:scroll;}}
@media(max-width:900px){.fd-interlude{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:#ECC58F;}
.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;}
}
/* ---- Band image right-sizing: full originals are 1600-2000px wide but the
bands render ~1200-1500px (interlude/photoback) or ~700px (duet figs).
≤640 already maps to -sm; ≥641 maps bands to -md and duet figs to -sm. ---- */
@media (min-width: 641px) {
.fd-interlude[style*="/euro-boulevard.webp"],
.fd-photoback[style*="/euro-boulevard.webp"]{background-image:url('assets/editorial/euro-boulevard-md.webp') !important;}
.fd-interlude[style*="/facade-dawn.webp"],
.fd-photoback[style*="/facade-dawn.webp"]{background-image:url('assets/editorial/facade-dawn-md.webp') !important;}
.fd-interlude[style*="/fifth-flatiron.webp"],
.fd-photoback[style*="/fifth-flatiron.webp"]{background-image:url('assets/editorial/fifth-flatiron-md.webp') !important;}
.fd-interlude[style*="/hamptons-dune.webp"],
.fd-photoback[style*="/hamptons-dune.webp"]{background-image:url('assets/editorial/hamptons-dune-md.webp') !important;}
.fd-interlude[style*="/hotel-brass.webp"],
.fd-photoback[style*="/hotel-brass.webp"]{background-image:url('assets/editorial/hotel-brass-md.webp') !important;}
.fd-interlude[style*="/leather-sharp.webp"],
.fd-photoback[style*="/leather-sharp.webp"]{background-image:url('assets/editorial/leather-sharp-md.webp') !important;}
.fd-interlude[style*="/midtown-dusk.webp"],
.fd-photoback[style*="/midtown-dusk.webp"]{background-image:url('assets/editorial/midtown-dusk-md.webp') !important;}
.fd-interlude[style*="/park-canyon.webp"],
.fd-photoback[style*="/park-canyon.webp"]{background-image:url('assets/editorial/park-canyon-md.webp') !important;}
.fd-interlude[style*="/portico-dusk.webp"],
.fd-photoback[style*="/portico-dusk.webp"]{background-image:url('assets/editorial/portico-dusk-md.webp') !important;}
.fd-interlude[style*="/quilted-leather.webp"],
.fd-photoback[style*="/quilted-leather.webp"]{background-image:url('assets/editorial/quilted-leather-md.webp') !important;}
.fd-interlude[style*="/velvet-rope.webp"],
.fd-photoback[style*="/velvet-rope.webp"]{background-image:url('assets/editorial/velvet-rope-md.webp') !important;}
.fd-duet__fig[style*="/cabin-cashmere.webp"]{background-image:url('assets/editorial/cabin-cashmere-sm.webp') !important;}
.fd-duet__fig[style*="/euro-boulevard.webp"]{background-image:url('assets/editorial/euro-boulevard-sm.webp') !important;}
.fd-duet__fig[style*="/facade-dawn.webp"]{background-image:url('assets/editorial/facade-dawn-sm.webp') !important;}
.fd-duet__fig[style*="/fifth-flatiron.webp"]{background-image:url('assets/editorial/fifth-flatiron-sm.webp') !important;}
.fd-duet__fig[style*="/gloved-hands.webp"]{background-image:url('assets/editorial/gloved-hands-sm.webp') !important;}
.fd-duet__fig[style*="/hamptons-dune.webp"]{background-image:url('assets/editorial/hamptons-dune-sm.webp') !important;}
.fd-duet__fig[style*="/hotel-brass.webp"]{background-image:url('assets/editorial/hotel-brass-sm.webp') !important;}
.fd-duet__fig[style*="/jet-dawn.webp"]{background-image:url('assets/editorial/jet-dawn-sm.webp') !important;}
.fd-duet__fig[style*="/key-leather.webp"]{background-image:url('assets/editorial/key-leather-sm.webp') !important;}
.fd-duet__fig[style*="/leather-sharp.webp"]{background-image:url('assets/editorial/leather-sharp-sm.webp') !important;}
.fd-duet__fig[style*="/maybach-void.webp"]{background-image:url('assets/editorial/maybach-void-sm.webp') !important;}
.fd-duet__fig[style*="/midtown-dusk.webp"]{background-image:url('assets/editorial/midtown-dusk-sm.webp') !important;}
.fd-duet__fig[style*="/nyc-dusk.webp"]{background-image:url('assets/editorial/nyc-dusk-sm.webp') !important;}
.fd-duet__fig[style*="/park-canyon.webp"]{background-image:url('assets/editorial/park-canyon-sm.webp') !important;}
.fd-duet__fig[style*="/portico-dusk.webp"]{background-image:url('assets/editorial/portico-dusk-sm.webp') !important;}
.fd-duet__fig[style*="/quilted-leather.webp"]{background-image:url('assets/editorial/quilted-leather-sm.webp') !important;}
.fd-duet__fig[style*="/silhouette.webp"]{background-image:url('assets/editorial/silhouette-sm.webp') !important;}
.fd-duet__fig[style*="/terminal-arrival.webp"]{background-image:url('assets/editorial/terminal-arrival-sm.webp') !important;}
.fd-duet__fig[style*="/usopen-ball-seat.webp"]{background-image:url('assets/editorial/usopen-ball-seat-sm.webp') !important;}
.fd-duet__fig[style*="/velvet-rope.webp"]{background-image:url('assets/editorial/velvet-rope-sm.webp') !important;}
.fd-duet__fig[style*="/watch-wheel.webp"]{background-image:url('assets/editorial/watch-wheel-sm.webp') !important;}
}
/* Below-fold bands render lazily — offscreen sections neither paint nor fetch
their backgrounds until scrolled near, so the hero owns the bandwidth. */
.fd-interlude,.fd-photoback{content-visibility:auto;contain-intrinsic-size:auto 480px;}
/* ---------- Large-display scaling — the site grows with the screen ----------
Content is designed at a 1440px grid with px type; on big monitors that reads
small. CSS zoom scales layout+type+imagery proportionally (media queries
evaluate on the UNZOOMED viewport, so no feedback loop). Tiers, not linear,
so common laptop widths (<=1599) stay exactly as designed. */
@media (min-width: 1600px) and (max-width: 2119px) { html { zoom: 1.2; } }
@media (min-width: 2120px) and (max-width: 3199px) { html { zoom: 1.35; } }
@media (min-width: 3200px) { html { zoom: 1.6; } }
/* High-density phones. The 760px -sm files are chosen by WIDTH, but these bands paint
with background-size:cover into a near-square box, so it is the HEIGHT that binds:
760x423 scaled into a 1170x1212 device box is a 2.87x upscale, visibly mushy on a
DPR3 phone. The 1280px tier brings that to 1.70x, and comparing rendered crops the
-sm -> -md step is by far the bigger visual gain (the full 1920px file reaches 1.13x
but costs another ~174KB per band). DPR1 phones keep -sm, where it is already sharp,
and .hero-ph is deliberately excluded — it is a ~0.34-opacity backdrop wash that is
meant to read as out-of-focus texture, so extra pixels there buy nothing.
Ordered LAST so it wins over both the -sm block and the >=641px -md block. The
-webkit- branch covers iOS <=15, which predates min-resolution; anything matching
neither simply keeps -sm, i.e. today's behaviour, so the failure direction is safe.
Mirrors the -sm block above; 53 rules stepped up, 2 lacked an -md sibling. */
@media (max-width: 700px) and (min-resolution: 1.5dppx),
(max-width: 700px) and (-webkit-min-device-pixel-ratio: 1.5){
.fd-interlude[style*="/cabin-cashmere.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/euro-boulevard.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/facade-dawn.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/fifth-flatiron.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/gloved-hands.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/hamptons-dune.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/hotel-brass.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/jet-dawn.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/key-leather.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/leather-sharp.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/maybach-void.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/midtown-dusk.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/nyc-dusk.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/park-canyon.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/portico-dusk.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/quilted-leather.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/silhouette.webp"],.fd-photoback[style*="/silhouette.webp"],.sp-hero__bg[style*="/silhouette.webp"],.lux-hero__bg[style*="/silhouette.webp"]{background-image:url('assets/editorial/silhouette-md.webp') !important;}
.fd-interlude[style*="/terminal-arrival.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/velvet-rope.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/watch-wheel.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/about-brownstone.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/about-heritage.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/contact-desk.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/events-redcarpet.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/executive-aviation.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/fleet-jet-sprinter.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/fleet-limo-sprinter.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/fleet-mini-coach.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/hero-airport-curb.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/hero-cruise-pier.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/hero-desk-w223.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/hero-exec-w223.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/hero-fleet.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/hero-hotel-w223.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/hero-lux-cullinan.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/hero-nyc.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/interior-exec.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/interior-limo.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/lux-cullinan-void.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/lux-exotic.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/moment-airport.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/moment-charters.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/moment-events.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/real-bmw-7.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/real-coach.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/real-escalade.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/real-rolls.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/real-s-class.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/real-sprinter.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/real-suburban.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/real-tesla.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/real-yukon.webp"],.fd-photoback[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-md.webp') !important;}
.fd-interlude[style*="/work-in-transit.webp"],.fd-photoback[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-md.webp') !important;}
}
/* ===== booking.css ===== */
/* === Compact Booking Bar ===
Single horizontal row: From · → · To · Date · Time · Reserve.
Replaces the prior multi-step inline booking. */
.hero-booking {
position: relative;
z-index: 5;
max-width: 1440px; /* match .container so section edges line up with the rest of the page */
margin: 40px auto 0;
padding: 0 56px;
}
@media (max-width: 720px) {
.hero-booking { padding: 0 24px; }
}
.hb-bar {
display: grid;
grid-template-columns: 1.25fr 14px 1.25fr 0.65fr 0.65fr 1fr auto;
align-items: stretch;
gap: 0;
background: var(--bg-elev);
border: 1px solid var(--hairline-ink);
box-shadow: var(--shadow-3);
position: relative;
}
.hb-bar--hourly {
/* No arrow cell in hourly mode — duration replaces the destination column */
grid-template-columns: 1.25fr 0.85fr 0.65fr 0.65fr 1fr auto;
}
/* === Trip-type tabs (mini, sit above the bar) === */
.hb-tabs-mini {
display: inline-flex; align-items: stretch; gap: 0;
margin: 0 0 -1px 0;
padding: 0;
position: relative;
z-index: 2;
}
.hb-tab-mini {
background: rgba(20,14,9,0.55);
border: 1px solid var(--hairline-ink);
border-bottom: 0;
cursor: pointer;
padding: 11px 22px 12px;
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase;
color: rgba(255,255,255,0.55);
position: relative;
transition: color 200ms, background 200ms;
margin-right: -1px; /* collapse adjacent borders */
}
.hb-tab-mini:hover { color: #FFFFFF; background: rgba(31,24,18,0.7); }
.hb-tab-mini.is-active {
color: #FFFFFF;
background: var(--bg-elev);
border-color: var(--hairline-ink);
z-index: 3;
}
.hb-tab-mini.is-active::before {
/* bronze top edge mirroring the bar's accent line */
content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px;
background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-deep));
}
.hb-tab-mini.is-active::after {
/* paint over the bar's top hairline so the tab merges into the card */
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
background: var(--bg-elev);
}
/* When tabs are active the bar's own ::before accent line should retreat so the
active tab's bronze top edge is the only one visible at its position. The bar
keeps its accent across the rest of the top. */
.hb-bar { margin-top: 0; }
/* Inline select inside a bar cell — styled like the inputs, padded for the chevron */
.hb-select-inline {
background: transparent; border: 0; outline: none;
font-family: var(--font-display); font-weight: 400; font-size: 16px;
letter-spacing: -0.005em; color: #FFFFFF;
width: 100%; padding: 0 16px 0 0; cursor: pointer;
-webkit-appearance:none;appearance:none; -webkit-appearance: none;
text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
background-image:
linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.65) 50%),
linear-gradient(135deg, rgba(255,255,255,0.65) 50%, transparent 50%);
background-position: right 5px center, right 1px center;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.hb-select-inline option {
background: #2A1B0E; color: #F0E4CC;
}
.hb-cell--vehicle { padding-right: 16px; min-width: 160px; }
.hb-bar::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-deep));
}
.hb-cell {
display: flex; flex-direction: column; gap: 6px;
padding: 18px 22px;
border-right: 1px solid var(--hairline-ink);
background: transparent;
transition: background 200ms;
min-width: 0;
}
.hb-cell:hover,
.hb-cell:focus-within { background: rgba(200,162,105,0.04); }
.hb-cell--narrow { padding-left: 18px; padding-right: 18px; }
.hb-cell-label {
font-family: var(--font-sans); font-size: 9px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase;
color: #FFFFFF; opacity: 0.85;
}
.hb-cell input {
background: transparent; border: 0; outline: none;
font-family: var(--font-display); font-weight: 400; font-size: 17px;
letter-spacing: -0.005em; color: #FFFFFF;
width: 100%; padding: 0;
}
.hb-cell input::placeholder { color: rgba(255,255,255,0.55); }
.hb-arrow {
display: flex; align-items: center; justify-content: center;
color: var(--gold-deep);
font-family: var(--font-display); font-size: 18px;
border-right: 1px solid var(--hairline-ink);
-webkit-user-select:none;user-select:none;
}
.hb-cta-bar {
border: 0; cursor: pointer; padding: 0 32px;
background: var(--gold); color: var(--bg-deep);
font-family: var(--font-sans); font-size: 12px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
display: inline-flex; align-items: center; gap: 12px;
transition: all 250ms;
box-shadow: inset 0 0 0 1px var(--gold);
}
.hb-cta-bar:hover { background: var(--gold-bright); }
.hb-bar-note {
margin-top: 14px;
font-family: var(--font-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--fg-ink-subtle);
text-align: center;
}
.hero-trustline { margin-top: 32px; }
/* Stats relocated under the booking bar — refined four-column ledger */
/* === HERO STATS — single-line value + caption with gilded sheen ===
Each stat is two rows: tracked label · single inline-baseline row of
value + italic caption (separated by a small bronze pip). A gilded sheen
sweeps across each cell in cascade once the row enters viewport, paired
with a brief gold glow on the figure. The column dividers do all the
visual separation work — no decorative underlines. */
.hero-stats--below {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0; padding: 0;
margin: 32px 0 0;
border-top: 1px solid var(--hairline-ink);
border-bottom: 1px solid var(--hairline-ink);
}
.hero-stats--below .hero-stat {
display: grid;
grid-template-rows: auto auto;
row-gap: 14px;
padding: 26px 32px;
border-right: 1px solid var(--hairline-ink);
align-items: start;
position: relative;
overflow: hidden;
}
.hero-stats--below .hero-stat:last-child { border-right: 0; }
/* Row 1 — tracked label, gold */
.hero-stats--below .hero-stat .k {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--gold);
opacity: 0.85;
line-height: 1;
margin: 0;
}
/* Row 2 — value + caption on a SINGLE baseline */
.hero-stats--below .hero-stat .v {
display: inline-flex;
align-items: baseline;
gap: 12px;
margin: 0; padding: 0;
background: none; position: static;
font-family: var(--font-display);
font-weight: 400;
font-size: 36px;
letter-spacing: -0.024em;
color: var(--fg);
line-height: 1;
font-variant-numeric: tabular-nums oldstyle-nums;
}
.hero-stats--below .hero-stat .v > span:first-child,
.hero-stats--below .hero-stat .v > :not(small):first-child {
display: inline-block;
padding: 0;
position: static;
}
.hero-stats--below .hero-stat .v > span:first-child::after { content: none; }
/* Inline italic caption sharing the value's baseline.
A small bronze pip separates them like a colophon dot. */
.hero-stats--below .hero-stat .v small {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 14px;
letter-spacing: -0.003em;
line-height: 1;
color: var(--fg-muted);
text-transform: none;
margin: 0;
white-space: nowrap;
position: relative;
}
.hero-stats--below .hero-stat .v small::before {
content: none;
}
/* === Gilded sheen — cream + bronze diagonal sweeps across each cell on reveal === */
.hero-stats--below .hero-stat::before {
content: "";
position: absolute;
top: 0; bottom: 0;
left: -45%;
width: 45%;
background: linear-gradient(105deg,
transparent 0%,
rgba(217, 174, 116, 0.00) 30%,
rgba(236, 197, 143, 0.16) 50%,
rgba(217, 174, 116, 0.00) 70%,
transparent 100%);
transform: skewX(-18deg);
opacity: 0;
pointer-events: none;
z-index: 1;
}
.hero-stats--below.is-revealed .hero-stat::before,
.is-revealed.hero-stats--below .hero-stat::before {
animation: hero-stat-sheen 1400ms cubic-bezier(.4, 0, .2, 1) forwards;
}
.hero-stats--below.is-revealed .hero-stat:nth-child(1)::before,
.is-revealed.hero-stats--below .hero-stat:nth-child(1)::before { animation-delay: 600ms; }
.hero-stats--below.is-revealed .hero-stat:nth-child(2)::before,
.is-revealed.hero-stats--below .hero-stat:nth-child(2)::before { animation-delay: 780ms; }
.hero-stats--below.is-revealed .hero-stat:nth-child(3)::before,
.is-revealed.hero-stats--below .hero-stat:nth-child(3)::before { animation-delay: 960ms; }
.hero-stats--below.is-revealed .hero-stat:nth-child(4)::before,
.is-revealed.hero-stats--below .hero-stat:nth-child(4)::before { animation-delay: 1140ms; }
@keyframes hero-stat-sheen {
0% { left: -45%; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { left: 145%; opacity: 0; }
}
/* The figure glows briefly gold during the sweep, then settles back */
.hero-stats--below.is-revealed .hero-stat:nth-child(1) .v > span:first-child {
animation: hero-stat-glow 1600ms cubic-bezier(.4, 0, .2, 1) 700ms;
}
.hero-stats--below.is-revealed .hero-stat:nth-child(2) .v > span:first-child {
animation: hero-stat-glow 1600ms cubic-bezier(.4, 0, .2, 1) 880ms;
}
.hero-stats--below.is-revealed .hero-stat:nth-child(3) .v > span:first-child {
animation: hero-stat-glow 1600ms cubic-bezier(.4, 0, .2, 1) 1060ms;
}
.hero-stats--below.is-revealed .hero-stat:nth-child(4) .v > span:first-child {
animation: hero-stat-glow 1600ms cubic-bezier(.4, 0, .2, 1) 1240ms;
}
@keyframes hero-stat-glow {
0% { color: var(--fg); text-shadow: 0 0 0 rgba(236, 197, 143, 0); }
35% { color: var(--gold-bright); text-shadow: 0 0 18px rgba(236, 197, 143, 0.35); }
100% { color: var(--fg); text-shadow: 0 0 0 rgba(236, 197, 143, 0); }
}
@media (prefers-reduced-motion: reduce) {
.hero-stats--below .hero-stat::before { animation: none !important; opacity: 0 !important; }
.hero-stats--below .hero-stat .v > span:first-child { animation: none !important; }
}
@media (max-width: 720px) {
.hero-stats--below { grid-template-columns: 1fr 1fr; }
.hero-stats--below .hero-stat:nth-child(2n) { border-right: 0; }
.hero-stats--below .hero-stat:nth-child(-n+2) { border-bottom: 1px solid var(--hairline-ink); }
.hero-stats--below .hero-stat { padding: 22px 22px; }
.hero-stats--below .hero-stat .v { font-size: 28px; }
.hero-stats--below .hero-stat .v small { font-size: 12px; }
}
@media (max-width: 980px) {
.hb-bar, .hb-bar--hourly { grid-template-columns: 1fr 1fr; }
.hb-arrow { display: none; }
.hb-cell { border-right: 0; border-bottom: 1px solid var(--hairline-ink); }
.hb-cell:nth-child(odd) { border-right: 1px solid var(--hairline-ink); }
.hb-cta-bar { grid-column: 1 / -1; padding: 18px; justify-content: center; }
.hb-tabs-mini { flex-wrap: wrap; }
}
@media (max-width: 600px) {
.hero-booking { padding: 0 24px; }
.hb-bar, .hb-bar--hourly { grid-template-columns: 1fr; }
.hb-cell, .hb-cell:nth-child(odd) { border-right: 0; }
}
/* ===== Legacy multi-step booking styles (kept for any other consumers) ===== */
/* --- Trip type tabs --- */
.hb-tabs {
display: flex; align-items: stretch;
background: var(--bg-elev);
border: 1px solid var(--hairline-ink);
border-bottom: 0;
padding: 0 24px;
position: relative;
}
.hb-tabs::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-deep));
}
.hb-tab {
padding: 18px 24px;
background: transparent; border: 0;
font-family: var(--font-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--fg-ink-subtle);
cursor: pointer;
position: relative;
transition: color 200ms;
}
.hb-tab:hover { color: var(--gold-deep); }
.hb-tab.is-active { color: var(--fg-ink); }
.hb-tab.is-active::after {
content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px;
background: var(--gold-deep);
}
.hb-tab-spacer { flex: 1; }
.hb-tab-meta {
align-self: center;
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase;
color: var(--gold-deep);
}
/* --- Main form card (replaces previous grid form) --- */
.hero-booking-card {
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-elev);
border: 1px solid var(--hairline-ink);
border-top: 0;
padding: 28px 32px;
position: relative;
box-shadow: var(--shadow-3);
overflow: visible;
}
.hero-booking-card::before { display: none; }
.hb-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding: 12px 0;
border-bottom: 1px solid var(--hairline-ink);
}
.hb-row:last-child { border-bottom: 0; }
.hb-row--time { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
/* --- Fields (vertical label + control) --- */
.hb-field {
display: flex; flex-direction: column; gap: 8px;
border: 0; border-right: 0; padding: 6px 0;
background: transparent;
transition: background 200ms;
}
.hb-field:focus-within { background: transparent; }
.hb-field:hover { background: transparent; }
.hb-field > span {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-ink-subtle);
}
.hb-field input,
.hb-field select {
background: transparent;
border: 0;
border-bottom: 1px solid var(--hairline-ink-strong);
padding: 6px 0;
outline: none;
font-family: var(--font-display); font-weight: 400; font-size: 18px;
letter-spacing: -0.01em; color: var(--fg-ink);
-webkit-appearance:none;appearance:none; -webkit-appearance: none; width: 100%;
transition: border-color 200ms;
}
.hb-field input:focus,
.hb-field select:focus { border-bottom-color: var(--gold-deep); }
.hb-field input::placeholder { color: var(--fg-ink-subtle); }
/* --- Route block: dot rail + stacked address fields --- */
.hb-route {
display: grid;
grid-template-columns: 28px 1fr;
gap: 12px;
padding: 16px 0;
border-bottom: 1px solid var(--hairline-ink);
}
.hb-route-rail {
display: flex; flex-direction: column; align-items: center;
padding-top: 26px; gap: 0;
position: relative;
}
.hb-route-rail::before {
content: ""; position: absolute; top: 32px; bottom: 24px; left: 50%;
width: 1px; background: var(--hairline-ink-strong);
transform: translateX(-50%);
}
.hb-route-rail .dot {
width: 10px; height: 10px; border-radius: 50%;
background: transparent;
border: 1px solid var(--gold-deep);
margin: 0; position: relative; z-index: 2;
display: block;
}
.hb-route-rail .dot--from { background: var(--gold-deep); }
.hb-route-rail .dot--to { background: var(--gold-deep);
width: 8px; height: 8px; border-radius: 0; transform: rotate(45deg); }
.hb-route-rail .dot--mid { width: 6px; height: 6px; }
.hb-route-rail .dot { margin-bottom: 56px; }
.hb-route-rail .dot:last-child { margin-bottom: 0; }
.hb-route-fields {
display: flex; flex-direction: column; gap: 8px;
}
.hb-field--addr { padding: 4px 0 8px; }
.hb-stop-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.hb-stop-row input { flex: 1; }
.hb-stop-remove {
flex: 0 0 auto;
width: 28px; height: 28px;
background: transparent; border: 1px solid var(--hairline-ink-strong);
color: var(--fg-ink-subtle);
font-size: 12px; cursor: pointer; padding: 0;
transition: all 200ms;
}
.hb-stop-remove:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.hb-add-stop {
align-self: flex-start; margin-top: 6px;
background: transparent; border: 1px dashed var(--hairline-ink-strong);
color: var(--gold-deep);
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
padding: 8px 14px; cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
transition: all 200ms;
}
.hb-add-stop:hover { border-color: var(--gold-deep); border-style: solid; background: rgba(200,162,105,0.08); }
.hb-add-stop span { font-size: 14px; }
/* --- Vehicle class cards --- */
.hb-vehicles {
background: var(--bg-elev);
border: 1px solid var(--hairline-ink);
border-top: 0;
padding: 28px 32px 32px;
}
.hb-section-head {
display: flex; align-items: baseline; gap: 12px;
margin-bottom: 18px;
}
.hb-section-head .step {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep);
}
.hb-section-head h3 {
font-family: var(--font-display); font-weight: 400; font-size: 22px;
letter-spacing: -0.01em; color: var(--fg-ink); margin: 0;
}
.hb-vehicle-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.hb-vehicle {
background: transparent;
border: 1px solid var(--hairline-ink);
padding: 18px 16px 16px;
display: flex; flex-direction: column; gap: 8px;
text-align: left; cursor: pointer; position: relative;
transition: all 250ms var(--ease-cinematic);
}
.hb-vehicle:hover { border-color: var(--gold-deep); background: rgba(200,162,105,0.04); transform: translateY(-2px); }
.hb-vehicle.is-selected {
border-color: var(--gold-deep);
background: rgba(200,162,105,0.08);
box-shadow: inset 0 0 0 1px var(--gold-deep), var(--shadow-1);
}
.hb-vehicle.is-selected::before {
content: "✓"; position: absolute; top: 8px; right: 10px;
font-family: var(--font-sans); font-size: 11px; font-weight: 600;
color: var(--gold-deep);
}
.hb-vehicle-tag {
position: absolute; top: -1px; left: -1px;
background: var(--gold-deep); color: #fff;
font-family: var(--font-sans); font-size: 8px; font-weight: 500;
letter-spacing: 0.20em; text-transform: uppercase;
padding: 4px 8px;
}
.hb-vehicle-silhouette {
height: 32px; display: flex; align-items: center; color: var(--fg-ink-muted);
margin-bottom: 4px; margin-top: 8px;
}
.hb-vehicle-silhouette img { height: 100%; display: block; }
.hb-vehicle.is-selected .hb-vehicle-silhouette { color: var(--gold-deep); }
.hb-vehicle-name {
font-family: var(--font-display); font-weight: 400; font-size: 16px;
letter-spacing: -0.005em; color: var(--fg-ink);
line-height: 1.15;
}
.hb-vehicle-models {
font-family: var(--font-sans); font-size: 11px;
color: var(--fg-ink-muted); line-height: 1.4;
}
.hb-vehicle-meta {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--fg-ink-subtle);
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid var(--hairline-ink);
}
/* --- Notes (collapsible) --- */
.hb-notes {
background: var(--bg-elev);
border: 1px solid var(--hairline-ink);
border-top: 0;
padding: 16px 32px;
}
.hb-notes-toggle {
background: transparent; border: 0; cursor: pointer;
font-family: var(--font-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.20em; text-transform: uppercase; color: var(--fg-ink-muted);
display: inline-flex; align-items: center; gap: 10px;
transition: color 200ms;
}
.hb-notes-toggle:hover { color: var(--gold-deep); }
.hb-notes-toggle span {
font-family: var(--font-display); font-size: 18px;
color: var(--gold-deep); line-height: 1;
}
.hb-notes-input {
display: block; width: 100%;
margin-top: 14px;
background: transparent;
border: 1px solid var(--hairline-ink-strong);
padding: 14px 16px;
font-family: var(--font-sans); font-size: 14px; color: var(--fg-ink);
resize: vertical; outline: none;
transition: border-color 200ms;
}
.hb-notes-input:focus { border-color: var(--gold-deep); }
.hb-notes-input::placeholder { color: var(--fg-ink-subtle); }
/* --- Confirm CTA strip --- */
.hb-confirm {
display: flex; justify-content: space-between; align-items: center; gap: 24px;
background: var(--bg-deep);
color: var(--fg-on-dark);
padding: 28px 32px;
border: 1px solid var(--bg-deep);
border-top: 0;
position: relative;
}
.hb-confirm-summary { display: flex; flex-direction: column; gap: 4px; }
.hb-confirm-step {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-bright);
}
.hb-confirm-line {
font-family: var(--font-display); font-style: italic; font-size: 16px;
color: rgba(244,239,230,0.85);
}
.hb-cta--lg {
height: 56px; padding: 0 32px;
background: var(--gold); color: var(--bg-deep);
border: 0; cursor: pointer;
font-family: var(--font-sans); font-size: 12px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
display: inline-flex; align-items: center; gap: 12px;
transition: all 250ms;
box-shadow: 0 12px 30px -8px rgba(200,162,105,0.45);
}
.hb-cta--lg:hover { background: var(--gold-bright); transform: translateY(-1px); }
.hero-trustline { margin-top: 32px; }
/* --- Responsive --- */
@media (max-width: 980px) {
.hb-vehicle-grid { grid-template-columns: repeat(3, 1fr); }
.hb-tabs { flex-wrap: wrap; padding: 0 16px; }
.hb-tab { padding: 14px 16px; }
}
@media (max-width: 720px) {
.hero-booking { padding: 0 24px; }
.hero-booking-card, .hb-vehicles, .hb-notes, .hb-confirm { padding-left: 20px; padding-right: 20px; }
.hb-row { grid-template-columns: 1fr; gap: 12px; }
.hb-vehicle-grid { grid-template-columns: 1fr 1fr; }
.hb-confirm { flex-direction: column; align-items: stretch; }
.hb-cta--lg { width: 100%; justify-content: center; }
.hb-tab-meta { display: none; }
}
/* ID-level override — guarantees #reserve sits 80px below the hero copy,
matching the hero's own bottom padding rhythm (120/80) so the booking
bar feels anchored to the hero rather than floating between sections.
z-index 10 keeps it above any transformed hero-stage chips that might
extend downward from the perspective stage. */
#reserve { margin-top: 80px; position: relative; z-index: 10; }
/* ============================================================
QUOTE CONVERSATION — stepped, one question at a time.
The form is a conversation, not a wall of fields. Five steps,
each shown as a single large question with one or two underlined
inputs beneath. No card around the whole thing — sits openly on
the saddle ground of the hero. Tab toggle and Roman progress
indicator at top; back/continue pager at the bottom.
============================================================ */
.hbq {
max-width: 920px;
margin: 0 auto 50px;
position: relative;
z-index: 10;
padding: 36px 44px 32px;
/* Cream parchment ground — theme's "white" inversion */
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(247, 246, 243, 0.98) 100%);
border: 1px solid rgba(121, 75, 30, 0.20);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.60),
inset 0 -1px 0 rgba(121, 75, 30, 0.08),
0 1px 2px rgba(0, 0, 0, 0.18),
0 28px 56px -20px rgba(0, 0, 0, 0.40),
0 8px 20px -8px rgba(0, 0, 0, 0.30);
overflow: hidden;
}
.hbq::before {
content: ""; position: absolute; top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--gold-deep) 20%,
var(--gold) 50%,
var(--gold-deep) 80%,
transparent 100%);
pointer-events: none;
opacity: 0.9;
}
/* Cream-ground overrides — flip text colors so type reads on parchment */
.hbq .hbq__label {
color: #3A1F08; /* deep saddle ink — fully legible on cream */
opacity: 1;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.20em;
}
.hbq .hbq__tab { color: rgba(121, 75, 30, 0.80); font-weight: 600; }
.hbq .hbq__tab:hover { color: var(--gold-deep); }
.hbq .hbq__tab.is-active { color: #3A1F08; font-weight: 700; }
.hbq .hbq__tab.is-active::after { background: var(--gold-deep); height: 2px; }
.hbq .hbq__tab::after { background: var(--gold-deep); }
.hbq .hbq__top { border-bottom-color: rgba(121, 75, 30, 0.18); }
.hbq .hbq__progress { color: var(--gold-deep); opacity: 1; }
.hbq .hbq__progress-now { color: var(--gold-deep); }
.hbq .hbq__progress-sep { color: rgba(121, 75, 30, 0.45); }
.hbq .hbq__progress-tot { color: rgba(121, 75, 30, 0.55); }
.hbq .hbq__q { color: #2A1B0E; }
.hbq .hbq__q em { color: var(--gold-deep); }
.hbq .hbq__label { color: var(--gold-deep); opacity: 1; }
.hbq .hbq__optional { color: rgba(121, 75, 30, 0.55); }
.hbq .hbq__input {
font-size: 22px;
padding: 6px 0 10px;
}
.hbq .hbq__input::placeholder {
color: rgba(121, 75, 30, 0.50);
font-family: var(--font-sans);
font-style: normal;
font-weight: 400;
font-size: 15px;
letter-spacing: 0;
}
.hbq .hbq__input:hover { border-bottom-color: rgba(121, 75, 30, 0.50); }
.hbq .hbq__input:focus {
border-bottom-color: var(--gold-deep);
box-shadow: 0 1px 0 0 var(--gold-deep);
}
/* Date/time native picker icons — re-tint for cream ground */
.hbq .hbq__input--date::-webkit-calendar-picker-indicator,
.hbq .hbq__input--time::-webkit-calendar-picker-indicator {
filter:
invert(28%) sepia(45%) saturate(680%) hue-rotate(2deg) brightness(82%) contrast(96%);
opacity: 0.7;
}
.hbq .hbq__input--date,
.hbq .hbq__input--time { color-scheme: light; }
.hbq .hbq__input--date::-webkit-datetime-edit-text,
.hbq .hbq__input--time::-webkit-datetime-edit-text {
color: var(--gold-deep);
}
.hbq .hbq__input--date::-webkit-datetime-edit-fields-wrapper,
.hbq .hbq__input--time::-webkit-datetime-edit-fields-wrapper {
color: #2A1B0E;
}
/* HbqSelect — cream variant */
.hbq .hbq-sel__btn {
color: #2A1B0E;
border-bottom-color: rgba(121, 75, 30, 0.28);
}
.hbq .hbq-sel__btn:hover { border-bottom-color: rgba(121, 75, 30, 0.50); }
.hbq .hbq-sel.is-open .hbq-sel__btn,
.hbq .hbq-sel__btn:focus {
border-bottom-color: var(--gold-deep);
box-shadow: 0 1px 0 0 var(--gold-deep);
}
.hbq .hbq-sel__caret { color: var(--gold-deep); }
.hbq .hbq-sel.is-open .hbq-sel__caret { color: var(--gold-deep); }
.hbq .hbq-sel__value.is-placeholder { color: rgba(121, 75, 30, 0.40); }
/* The dropdown menu itself stays on dark saddle for legibility against the
cream ground — that contrast is what makes it feel like a separate object. */
/* Time picker AM/PM segmented — cream variant */
.hbq .hbq-time__sep { color: var(--gold-deep); }
.hbq .hbq-time__period { border-color: rgba(121, 75, 30, 0.32); }
.hbq .hbq-time__pbtn {
color: rgba(121, 75, 30, 0.65);
}
.hbq .hbq-time__pbtn:hover { color: var(--gold-deep); }
.hbq .hbq-time__pbtn.is-active {
background: var(--gold-deep);
color: var(--fg);
}
.hbq .hbq-time__pbtn + .hbq-time__pbtn { border-left-color: rgba(121, 75, 30, 0.32); }
/* Pager — cream variant */
.hbq .hbq__nav {
border-top-color: rgba(121, 75, 30, 0.18);
}
.hbq .hbq__back {
color: rgba(121, 75, 30, 0.65);
}
.hbq .hbq__back:hover { color: var(--gold-deep); }
.hbq .hbq__pip { background: rgba(121, 75, 30, 0.20); }
.hbq .hbq__pip.is-done { background: rgba(121, 75, 30, 0.55); }
.hbq .hbq__pip.is-now { background: var(--gold-deep); }
.hbq .hbq__next {
border-color: var(--gold-deep);
color: var(--gold-deep);
}
.hbq .hbq__next:hover {
background: var(--gold-deep);
color: var(--fg);
border-color: var(--gold-deep);
}
/* ---- Top bar ---- */
.hbq__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(217, 174, 116, 0.18);
margin-bottom: 56px;
}
.hbq__tabs {
display: inline-flex;
gap: 0;
}
.hbq__tab {
-webkit-appearance:none;appearance:none;
background: transparent;
border: 0;
cursor: pointer;
padding: 8px 0;
margin-right: 32px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-muted);
position: relative;
transition: color 280ms ease;
}
.hbq__tab:last-child { margin-right: 0; }
.hbq__tab:hover { color: var(--fg); }
.hbq__tab::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 1px; background: var(--gold);
transform: scaleX(0); transform-origin: left center;
transition: transform 360ms cubic-bezier(.55, 0, .15, 1);
}
.hbq__tab.is-active {
color: var(--gold);
}
.hbq__tab.is-active::after { transform: scaleX(1); }
/* Roman progress — small, italic, top-right */
.hbq__progress {
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
letter-spacing: 0.06em;
color: var(--gold);
display: inline-flex;
align-items: baseline;
gap: 6px;
opacity: 0.85;
}
.hbq__progress-now { font-size: 18px; color: var(--gold-bright); }
.hbq__progress-sep { opacity: 0.5; font-size: 11px; }
.hbq__progress-tot { opacity: 0.55; }
/* ---- Stage — only the active step is rendered; no stacking weirdness ---- */
.hbq__stage {
position: relative;
min-height: 220px;
display: flex;
flex-direction: column;
}
.hbq__step {
display: flex;
flex-direction: column;
flex: 1;
animation: hbq-step-in 520ms cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes hbq-step-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
/* ---- The question — large editorial serif ---- */
.hbq__q {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(24px, 2.6vw, 30px);
line-height: 1.15;
letter-spacing: -0.018em;
color: var(--fg);
margin: 0 0 36px;
text-wrap: balance;
max-width: 30ch;
}
.hbq__q em {
font-style: italic;
color: var(--gold);
font-weight: 400;
position: relative;
}
/* ---- Field rows ---- */
.hbq__fields {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
}
.hbq__fields--pair {
grid-template-columns: 1fr 1fr;
gap: 22px 48px;
}
.hbq__fields--stack {
grid-template-columns: 1fr;
gap: 26px;
}
.hbq__fields--stack .hbq__fields--pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px 48px;
}
.hbq__field {
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
}
.hbq__label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--gold);
opacity: 1;
}
.hbq__optional {
text-transform: none;
letter-spacing: 0;
font-family: var(--font-display);
font-style: italic;
font-size: 11px;
color: var(--fg-subtle);
margin-left: 6px;
opacity: 0.7;
}
/* ---- Inputs — no box. Bronze underline below; focus thickens it. ---- */
.hbq__input {
-webkit-appearance:none;appearance:none;
-webkit-appearance: none;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(217, 174, 116, 0.32);
border-radius: 0;
color: var(--fg);
font-family: var(--font-display);
font-weight: 400;
font-size: 22px;
line-height: 1.3;
letter-spacing: -0.010em;
padding: 6px 0 10px;
width: 100%;
transition: border-color 280ms ease, box-shadow 280ms ease;
}
.hbq__input::placeholder {
font-style: italic;
color: rgba(236, 213, 173, 0.32);
letter-spacing: -0.005em;
}
.hbq__input:hover { border-bottom-color: rgba(217, 174, 116, 0.55); }
.hbq__input:focus {
outline: none;
border-bottom-color: var(--gold-bright);
box-shadow: 0 1px 0 0 var(--gold-bright);
}
/* Select variant — custom bronze chevron on the right */
.hbq__input--select {
background-image:
url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 4px center;
background-size: 14px 9px;
padding-right: 28px;
cursor: pointer;
}
.hbq__input--select option {
background: #1F1812;
color: var(--fg);
font-family: var(--font-sans);
font-size: 14px;
}
/* Date / Time native inputs — theme-match the picker glyph + display.
We can't fully style the OS picker overlay, but we can recolour the
calendar/clock icon to bronze, hide the spinner, and keep the display
type identical to the rest of the conversation. */
.hbq__input--date,
.hbq__input--time {
cursor: pointer;
padding-right: 36px;
font-feature-settings: "tnum";
color-scheme: dark; /* tells the OS picker to use a dark theme */
}
/* Bronze the calendar / clock icon glyph in Chromium-based browsers */
.hbq__input--date::-webkit-calendar-picker-indicator,
.hbq__input--time::-webkit-calendar-picker-indicator {
cursor: pointer;
/* Tint the default icon to bronze (#D9AE74) — filter recipe maps black → bronze */
filter:
invert(75%) sepia(43%) saturate(495%) hue-rotate(351deg) brightness(94%) contrast(89%);
opacity: 0.85;
margin-left: 12px;
transition: opacity 240ms ease;
}
.hbq__input--date:hover::-webkit-calendar-picker-indicator,
.hbq__input--time:hover::-webkit-calendar-picker-indicator {
opacity: 1;
}
/* Empty-state placeholder color for date/time when value is empty */
.hbq__input--date:not(:focus):invalid,
.hbq__input--time:not(:focus):invalid {
color: rgba(236, 213, 173, 0.42);
}
.hbq__input--date::-webkit-datetime-edit-text,
.hbq__input--time::-webkit-datetime-edit-text {
color: var(--gold);
padding: 0 4px;
}
.hbq__input--date::-webkit-datetime-edit-fields-wrapper,
.hbq__input--time::-webkit-datetime-edit-fields-wrapper {
color: var(--fg);
}
.hbq__input--date::-webkit-datetime-edit-month-field:focus,
.hbq__input--date::-webkit-datetime-edit-day-field:focus,
.hbq__input--date::-webkit-datetime-edit-year-field:focus,
.hbq__input--time::-webkit-datetime-edit-hour-field:focus,
.hbq__input--time::-webkit-datetime-edit-minute-field:focus,
.hbq__input--time::-webkit-datetime-edit-ampm-field:focus {
background: rgba(217, 174, 116, 0.16);
color: var(--gold-bright);
outline: none;
}
/* ============================================================
HbqTimePicker — Hour · Minute · AM/PM
============================================================ */
.hbq-time {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 4px 0 8px;
}
.hbq-time__sep {
font-family: var(--font-display);
font-size: 26px;
color: var(--gold);
font-weight: 400;
line-height: 1;
padding: 0 2px;
-webkit-user-select:none;user-select:none;
}
.hbq-time__period {
display: inline-flex;
align-items: center;
margin-left: 8px;
border: 1px solid rgba(217, 174, 116, 0.32);
border-radius: var(--radius);
overflow: hidden;
height: 38px;
}
.hbq-time__pbtn {
-webkit-appearance:none;appearance:none;
background: transparent;
border: 0;
padding: 0 14px;
cursor: pointer;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-muted);
height: 100%;
transition: color 240ms ease, background 240ms ease;
}
.hbq-time__pbtn + .hbq-time__pbtn {
border-left: 1px solid rgba(217, 174, 116, 0.32);
}
.hbq-time__pbtn:hover { color: var(--gold-bright); }
.hbq-time__pbtn.is-active {
background: var(--gold);
color: #2A1B0E;
}
/* ============================================================
HbqSelect — custom themed dropdown (replaces native