/* ===== colors_and_type.css ===== */
/* =========================================================================
Famous Drive — Design Tokens
Editorial luxury · obsidian + champagne · Bodoni Moda + Jost
========================================================================= */
/* Guard: decorative hero glows must never cause horizontal scroll on any device.
`clip` (not `hidden`) avoids creating a scroll container, so the sticky nav still works. */
html, body { overflow-x: clip; }
/* Perf: kill the will-change "layer explosion" (was ~146 promoted GPU layers on
the homepage → constant recompositing = the scroll lag + flicker). will-change
is only a compositor HINT, so removing it is visually identical; animations
still run (the browser promotes actively-animating elements on its own). */
*, *::before, *::after { will-change: auto !important; }
/* A11y: ≥44px tap targets on phones/tablets for the primary CONTROLS — hamburger,
buttons, language switcher, and form fields. Intentionally NOT applied to text/
footer links (forcing those to 44px would bloat the layout) or the booking bar. */
@media (max-width: 900px) {
.nav-burger { min-width: 44px; min-height: 44px; }
.fd-lang__btn { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.btn, a.btn, button.btn, .lux-btn, .ac-btn { min-height: 44px; }
.formcard input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.formcard select, .formcard textarea,
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea { min-height: 44px; }
}
/* Self-hosted brand fonts (was a Google Fonts @import — that's render-blocking,
network-dependent, and showed a fallback flash on slow/first loads, making the
site look different across machines). These load instantly from our own server. */
@font-face{font-family:'Cormorant';font-style:italic;font-weight:300;font-display:swap;src:url('assets/fonts/cormorant-300-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/cormorant-400-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/cormorant-300.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/cormorant-400.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/cormorant-500.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/cormorant-600.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:200;font-display:swap;src:url('assets/fonts/outfit-200.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/outfit-300.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/outfit-400.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/outfit-500.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/outfit-600.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/outfit-700.woff2') format('woff2')}
:root {
/* ---------- Palette (raw) ---------- */
--obsidian: #0A0908; /* primary bg, warm-shifted black */
--charcoal: #14110F; /* elevated surface */
--smoke: #1F1B17; /* 2nd elevation */
--ash: #2A2520; /* hovers on dark surfaces */
--bone: #FFFFFF; /* primary fg on dark, "white" */
--ivory: #F4EFE6; /* light surface */
--parchment: #DCD3BE; /* muted fg on dark */
--champagne: #C8A86B; /* singular accent */
--champagne-soft: #B79363; /* hovers, secondary */
--antique-brass: #8C6E3D; /* deep tone, fg on bone */
--lead: #5C5650; /* disabled */
--verdigris: #5C7A6E; /* success */
--ember: #B0593B; /* alert */
/* ---------- Alphas of bone (workhorse on dark) ---------- */
--bone-04: rgba(234, 227, 210, 0.04);
--bone-08: rgba(234, 227, 210, 0.08);
--bone-10: rgba(234, 227, 210, 0.10);
--bone-16: rgba(234, 227, 210, 0.16);
--bone-24: rgba(234, 227, 210, 0.24);
--bone-40: rgba(234, 227, 210, 0.78);
--bone-60: rgba(234, 227, 210, 0.60);
--bone-72: rgba(234, 227, 210, 0.72);
--champagne-16: rgba(200, 168, 107, 0.16);
--champagne-40: rgba(200, 168, 107, 0.40);
/* ---------- Semantic colors ---------- */
--bg: var(--obsidian);
--bg-elevated: var(--charcoal);
--bg-overlay: rgba(10, 9, 8, 0.72);
--surface-glass: rgba(20, 17, 15, 0.60);
--surface-light: var(--ivory);
--fg: var(--bone);
--fg-muted: var(--bone-60);
--fg-subtle: var(--bone-40);
--fg-on-light: var(--obsidian);
--fg-on-light-muted: var(--antique-brass);
--accent: var(--champagne);
--accent-press: var(--champagne-soft);
--hairline: var(--bone-10);
--hairline-strong: var(--bone-24);
--hairline-light: rgba(140, 110, 61, 0.18);
--success: var(--verdigris);
--alert: var(--ember);
--disabled: var(--lead);
/* ---------- Type families ---------- */
/* Light serif headings (Cormorant) + light sans body (Outfit). */
--font-display: 'Cormorant', Georgia, serif;
--font-serif: 'Cormorant', Georgia, serif;
--font-sans: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-mono: 'Outfit', ui-monospace, SFMono-Regular, monospace;
/* aliases for the typography spec */
--serif: var(--font-serif);
--sans: var(--font-sans);
/* ---------- Type scale ---------- */
--fs-hero: 144px;
--fs-h1: 96px;
--fs-h2: 56px;
--fs-h3: 32px;
--fs-h4: 24px;
--fs-body-l: 20px;
--fs-body: 16px;
--fs-caption: 13px;
--fs-eyebrow: 12px;
--fs-micro: 10px;
--lh-display: 0.96; /* @kind font */
--lh-tight: 1.08; /* @kind font */
--lh-snug: 1.25; /* @kind font */
--lh-body: 1.55; /* @kind font */
--lh-loose: 1.7; /* @kind font */
--tracking-eyebrow: 0.18em; /* @kind font */
--tracking-nav: 0.14em; /* @kind font */
--tracking-tight: -0.02em; /* @kind font */
--tracking-display: -0.025em; /* @kind font */
/* ---------- Spacing (8px base) ---------- */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
--s-10: 128px;
--s-11: 192px;
--s-12: 256px;
/* ---------- Radii ---------- */
--r-sharp: 0px;
--r-soft: 2px;
--r-pill: 999px;
/* ---------- Shadows (light surfaces only) ---------- */
--shadow-light-1: 0 1px 2px rgba(20,17,15,0.04), 0 12px 32px rgba(20,17,15,0.06);
--shadow-light-2: 0 1px 2px rgba(20,17,15,0.06), 0 24px 64px rgba(20,17,15,0.10);
/* On dark, depth = hairlines, not shadow */
/* ---------- Motion ---------- */
--ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
--ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
--d-fast: 150ms; /* @kind other */
--d-base: 300ms; /* @kind other */
--d-slow: 700ms; /* @kind other */
--d-reveal: 1200ms; /* @kind other */
/* ---------- Grid ---------- */
--gutter-desktop: 96px; /* @kind spacing */
--gutter-tablet: 48px; /* @kind spacing */
--gutter-mobile: 24px; /* @kind spacing */
--edge-desktop: 64px; /* @kind spacing */
--edge-mobile: 24px; /* @kind spacing */
/* ---------- Glass ---------- */
--glass-blur: blur(8px) saturate(140%); /* @kind other */
--glass-bg: rgba(20, 17, 15, 0.60); /* @kind color */
--glass-border: 1px solid rgba(234, 227, 210, 0.08); /* @kind other */
}
/* =========================================================================
Base
========================================================================= */
html, body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'ss01', 'cv11', 'kern';
}
::selection { background: var(--champagne); color: var(--obsidian); }
/* A11y (WCAG 1.4.1 / link-in-text-block): inline prose links must be distinguishable
by more than colour — underline gold links that sit inside body text. */
p a[style*="gold"], li a[style*="gold"], .doc a[style*="gold"], .lede a[style*="gold"] {
text-decoration: underline; text-underline-offset: 3px;
text-decoration-thickness: 1px; text-decoration-color: rgba(217, 174, 116, 0.55);
}
/* =========================================================================
Semantic typography classes
========================================================================= */
.t-hero {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--fs-hero);
line-height: var(--lh-display);
letter-spacing: var(--tracking-display);
text-wrap: balance;
}
.t-h1 {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h1);
line-height: var(--lh-display);
letter-spacing: var(--tracking-display);
text-wrap: balance;
}
.t-h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h2);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
.t-h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h3);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-tight);
}
.t-h4 {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h4);
line-height: var(--lh-snug);
letter-spacing: -0.01em;
}
.t-eyebrow {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-eyebrow);
line-height: 1;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--fg-muted);
}
.t-eyebrow--accent { color: var(--accent); }
.t-body-l {
font-family: var(--font-sans);
font-weight: 300;
font-size: var(--fs-body-l);
line-height: 1.5;
color: var(--fg-muted);
}
.t-body {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--fg);
}
.t-caption {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-caption);
line-height: 1.4;
color: var(--fg-muted);
}
.t-nav {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-caption);
letter-spacing: var(--tracking-nav);
text-transform: uppercase;
color: var(--fg);
}
.t-wordmark {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: 0.32em;
text-transform: uppercase;
font-feature-settings: 'smcp';
}
.t-italic {
font-style: italic;
font-family: var(--font-display);
}
/* Tabular numerals (timetables, fares, plates) */
.t-tabular {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
}
/* =========================================================================
Element defaults — opt-in via .prose
========================================================================= */
.prose h1 { @extend .t-h1; }
.prose h2 { @extend .t-h2; }
.prose h3 { @extend .t-h3; }
.prose p { @extend .t-body; max-width: 64ch; }
/* =========================================================================
Utility primitives
========================================================================= */
.hairline { border-bottom: 1px solid var(--hairline); }
.hairline-top { border-top: 1px solid var(--hairline); }
.glass {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
}
/* Brand wordmark rendered as an IMAGE in the nav — pixel-identical across OS. Universal (homepage React nav doesn't load page-unify.css). */
.nav-mark__wm { height: 13px; width: auto; display: inline-block; vertical-align: middle; margin-left: 0.55em; }
.nav .mark::after, .nav-mark::after { content: none !important; }
/* ── Editorial interlude — full-bleed photographic pause (Jul 2026) ───────── */
.fd-interlude{position:relative;min-height:54vh;background-size:cover;background-position:center;background-attachment:fixed;display:flex;align-items:center;justify-content:center;border-top:1px solid rgba(250,241,221,.13);padding:0;overflow:hidden;}
.fd-interlude::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,30,18,.44),rgba(42,30,18,.18) 50%,rgba(42,30,18,.5));z-index:1;}
.fd-interlude__inner{position:relative;text-align:center;padding:72px 28px;z-index:2;}
.fd-interlude__inner .eyebrow{margin-bottom:14px;}
.fd-interlude__inner h2{font-family:'Cormorant',Georgia,serif;font-style:italic;font-weight:400;color:#FAF1DD;font-size:clamp(1.7rem,3.4vw,2.6rem);margin:0;}
@media(max-width:900px){.fd-interlude{background-attachment:scroll;min-height:40vh;}}
/* interlude v2 — JS-driven parallax drift + caption reveal (fd-interlude.js).
The script moves the image onto a .fd-interlude__bg layer so it can be
transformed; without JS the rules above stand as the full fallback. */
.fd-interlude.fdi-js{background-image:none !important;background-attachment:scroll;}
.fd-interlude__bg{position:absolute;left:0;right:0;top:-10%;bottom:-10%;background-size:cover;background-position:center;will-change:transform;z-index:0;}
.fd-interlude.fdi-js .fd-interlude__inner .eyebrow,
.fd-interlude.fdi-js .fd-interlude__inner h2{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1);}
.fd-interlude.fdi-js .fd-interlude__inner h2{transition-delay:.18s;}
.fd-interlude.fdi-in .fd-interlude__inner .eyebrow,
.fd-interlude.fdi-in .fd-interlude__inner h2{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
.fd-interlude.fdi-js .fd-interlude__inner .eyebrow,.fd-interlude.fdi-js .fd-interlude__inner h2{opacity:1;transform:none;transition:none;}
.fd-interlude__bg{transform:none !important;}
}
/* ── Image-led editorial duet (Jul 2026) — the Aman/Rolls pattern: the photo
is the sentence, the text is the footnote. Large sharp image + short copy. ── */
.fd-duet{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;margin-top:2.2rem;}
.fd-duet__fig{position:relative;margin:0;}
.fd-duet__fig img{width:100%;display:block;border-radius:4px;border:1px solid rgba(217,174,116,.28);box-shadow:0 24px 60px -28px rgba(0,0,0,.7);aspect-ratio:4/3;object-fit:cover;}
.fd-duet__fig figcaption{margin-top:10px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#D9AE74;opacity:.85;}
.fd-duet__copy p{max-width:34rem;}
.fd-duet__copy p+p{margin-top:.9em;}
@media(max-width:860px){.fd-duet{grid-template-columns:1fr;gap:20px;}.fd-duet__fig{order:-1;}}
/* ── Photo-backed section (Jul 2026) — the image IS the section background,
content floats on top. Owner: framed images read too small. ── */
.fd-photoback{position:relative;overflow:hidden;background-size:cover;background-position:center;padding:110px 0;}
.fd-photoback::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,21,13,.84),rgba(30,21,13,.58) 55%,rgba(30,21,13,.86));}
.fd-photoback>.wrap{position:relative;z-index:2;}
/* Airy statement lines — fewer, longer, never a text wall */
.fd-line{max-width:58rem;font-size:1.12rem;line-height:1.9;}
.fd-line+.fd-line{margin-top:1.1em;}
/* A11y: booking widget + language switcher tap targets (audit Jul 3) */
@media (max-width: 900px) {
.fdb-date-btn, .hbq-sel__btn, .hbq__bar-input, .fdb-input { min-height: 44px; }
.fd-lang__btn { min-width: 44px; min-height: 44px; }
}
/* ── Mobile image swap (AUTO-GENERATED — regenerate when adding band/hero images):
phones get the 760px -sm variant of every band/photoback/hero background.
!important beats the inline style; fd-interlude.js reads COMPUTED style so
its parallax layer inherits the swap. ── */
@media (max-width: 700px){
.fd-interlude[style*="/cabin-cashmere.webp"],
.fd-photoback[style*="/cabin-cashmere.webp"],
.hero-ph[style*="/cabin-cashmere.webp"],
.sp-hero__bg[style*="/cabin-cashmere.webp"],
.lux-hero__bg[style*="/cabin-cashmere.webp"]{background-image:url('assets/editorial/cabin-cashmere-sm.webp') !important;}
.fd-interlude[style*="/euro-boulevard.webp"],
.fd-photoback[style*="/euro-boulevard.webp"],
.hero-ph[style*="/euro-boulevard.webp"],
.sp-hero__bg[style*="/euro-boulevard.webp"],
.lux-hero__bg[style*="/euro-boulevard.webp"]{background-image:url('assets/editorial/euro-boulevard-sm.webp') !important;}
.fd-interlude[style*="/facade-dawn.webp"],
.fd-photoback[style*="/facade-dawn.webp"],
.hero-ph[style*="/facade-dawn.webp"],
.sp-hero__bg[style*="/facade-dawn.webp"],
.lux-hero__bg[style*="/facade-dawn.webp"]{background-image:url('assets/editorial/facade-dawn-sm.webp') !important;}
.fd-interlude[style*="/fifth-flatiron.webp"],
.fd-photoback[style*="/fifth-flatiron.webp"],
.hero-ph[style*="/fifth-flatiron.webp"],
.sp-hero__bg[style*="/fifth-flatiron.webp"],
.lux-hero__bg[style*="/fifth-flatiron.webp"]{background-image:url('assets/editorial/fifth-flatiron-sm.webp') !important;}
.fd-interlude[style*="/gloved-hands.webp"],
.fd-photoback[style*="/gloved-hands.webp"],
.hero-ph[style*="/gloved-hands.webp"],
.sp-hero__bg[style*="/gloved-hands.webp"],
.lux-hero__bg[style*="/gloved-hands.webp"]{background-image:url('assets/editorial/gloved-hands-sm.webp') !important;}
.fd-interlude[style*="/hamptons-dune.webp"],
.fd-photoback[style*="/hamptons-dune.webp"],
.hero-ph[style*="/hamptons-dune.webp"],
.sp-hero__bg[style*="/hamptons-dune.webp"],
.lux-hero__bg[style*="/hamptons-dune.webp"]{background-image:url('assets/editorial/hamptons-dune-sm.webp') !important;}
.fd-interlude[style*="/hotel-brass.webp"],
.fd-photoback[style*="/hotel-brass.webp"],
.hero-ph[style*="/hotel-brass.webp"],
.sp-hero__bg[style*="/hotel-brass.webp"],
.lux-hero__bg[style*="/hotel-brass.webp"]{background-image:url('assets/editorial/hotel-brass-sm.webp') !important;}
.fd-interlude[style*="/jet-dawn.webp"],
.fd-photoback[style*="/jet-dawn.webp"],
.hero-ph[style*="/jet-dawn.webp"],
.sp-hero__bg[style*="/jet-dawn.webp"],
.lux-hero__bg[style*="/jet-dawn.webp"]{background-image:url('assets/editorial/jet-dawn-sm.webp') !important;}
.fd-interlude[style*="/key-leather.webp"],
.fd-photoback[style*="/key-leather.webp"],
.hero-ph[style*="/key-leather.webp"],
.sp-hero__bg[style*="/key-leather.webp"],
.lux-hero__bg[style*="/key-leather.webp"]{background-image:url('assets/editorial/key-leather-sm.webp') !important;}
.fd-interlude[style*="/leather-sharp.webp"],
.fd-photoback[style*="/leather-sharp.webp"],
.hero-ph[style*="/leather-sharp.webp"],
.sp-hero__bg[style*="/leather-sharp.webp"],
.lux-hero__bg[style*="/leather-sharp.webp"]{background-image:url('assets/editorial/leather-sharp-sm.webp') !important;}
.fd-interlude[style*="/maybach-void.webp"],
.fd-photoback[style*="/maybach-void.webp"],
.hero-ph[style*="/maybach-void.webp"],
.sp-hero__bg[style*="/maybach-void.webp"],
.lux-hero__bg[style*="/maybach-void.webp"]{background-image:url('assets/editorial/maybach-void-sm.webp') !important;}
.fd-interlude[style*="/midtown-dusk.webp"],
.fd-photoback[style*="/midtown-dusk.webp"],
.hero-ph[style*="/midtown-dusk.webp"],
.sp-hero__bg[style*="/midtown-dusk.webp"],
.lux-hero__bg[style*="/midtown-dusk.webp"]{background-image:url('assets/editorial/midtown-dusk-sm.webp') !important;}
.fd-interlude[style*="/nyc-dusk.webp"],
.fd-photoback[style*="/nyc-dusk.webp"],
.hero-ph[style*="/nyc-dusk.webp"],
.sp-hero__bg[style*="/nyc-dusk.webp"],
.lux-hero__bg[style*="/nyc-dusk.webp"]{background-image:url('assets/editorial/nyc-dusk-sm.webp') !important;}
.fd-interlude[style*="/park-canyon.webp"],
.fd-photoback[style*="/park-canyon.webp"],
.hero-ph[style*="/park-canyon.webp"],
.sp-hero__bg[style*="/park-canyon.webp"],
.lux-hero__bg[style*="/park-canyon.webp"]{background-image:url('assets/editorial/park-canyon-sm.webp') !important;}
.fd-interlude[style*="/portico-dusk.webp"],
.fd-photoback[style*="/portico-dusk.webp"],
.hero-ph[style*="/portico-dusk.webp"],
.sp-hero__bg[style*="/portico-dusk.webp"],
.lux-hero__bg[style*="/portico-dusk.webp"]{background-image:url('assets/editorial/portico-dusk-sm.webp') !important;}
.fd-interlude[style*="/quilted-leather.webp"],
.fd-photoback[style*="/quilted-leather.webp"],
.hero-ph[style*="/quilted-leather.webp"],
.sp-hero__bg[style*="/quilted-leather.webp"],
.lux-hero__bg[style*="/quilted-leather.webp"]{background-image:url('assets/editorial/quilted-leather-sm.webp') !important;}
.fd-interlude[style*="/silhouette.webp"],
.fd-photoback[style*="/silhouette.webp"],
.hero-ph[style*="/silhouette.webp"],
.sp-hero__bg[style*="/silhouette.webp"],
.lux-hero__bg[style*="/silhouette.webp"]{background-image:url('assets/editorial/silhouette-sm.webp') !important;}
.fd-interlude[style*="/terminal-arrival.webp"],
.fd-photoback[style*="/terminal-arrival.webp"],
.hero-ph[style*="/terminal-arrival.webp"],
.sp-hero__bg[style*="/terminal-arrival.webp"],
.lux-hero__bg[style*="/terminal-arrival.webp"]{background-image:url('assets/editorial/terminal-arrival-sm.webp') !important;}
.fd-interlude[style*="/velvet-rope.webp"],
.fd-photoback[style*="/velvet-rope.webp"],
.hero-ph[style*="/velvet-rope.webp"],
.sp-hero__bg[style*="/velvet-rope.webp"],
.lux-hero__bg[style*="/velvet-rope.webp"]{background-image:url('assets/editorial/velvet-rope-sm.webp') !important;}
.fd-interlude[style*="/watch-wheel.webp"],
.fd-photoback[style*="/watch-wheel.webp"],
.hero-ph[style*="/watch-wheel.webp"],
.sp-hero__bg[style*="/watch-wheel.webp"],
.lux-hero__bg[style*="/watch-wheel.webp"]{background-image:url('assets/editorial/watch-wheel-sm.webp') !important;}
.fd-interlude[style*="/about-brownstone.webp"],
.fd-photoback[style*="/about-brownstone.webp"],
.hero-ph[style*="/about-brownstone.webp"],
.sp-hero__bg[style*="/about-brownstone.webp"],
.lux-hero__bg[style*="/about-brownstone.webp"]{background-image:url('assets/img/about-brownstone-sm.webp') !important;}
.fd-interlude[style*="/about-heritage.webp"],
.fd-photoback[style*="/about-heritage.webp"],
.hero-ph[style*="/about-heritage.webp"],
.sp-hero__bg[style*="/about-heritage.webp"],
.lux-hero__bg[style*="/about-heritage.webp"]{background-image:url('assets/img/about-heritage-sm.webp') !important;}
.fd-interlude[style*="/air-globe.webp"],
.fd-photoback[style*="/air-globe.webp"],
.hero-ph[style*="/air-globe.webp"],
.sp-hero__bg[style*="/air-globe.webp"],
.lux-hero__bg[style*="/air-globe.webp"]{background-image:url('assets/img/air-globe-sm.webp') !important;}
.fd-interlude[style*="/chauffeur-arrival.webp"],
.fd-photoback[style*="/chauffeur-arrival.webp"],
.hero-ph[style*="/chauffeur-arrival.webp"],
.sp-hero__bg[style*="/chauffeur-arrival.webp"],
.lux-hero__bg[style*="/chauffeur-arrival.webp"]{background-image:url('assets/img/chauffeur-arrival-sm.webp') !important;}
.fd-interlude[style*="/contact-desk.webp"],
.fd-photoback[style*="/contact-desk.webp"],
.hero-ph[style*="/contact-desk.webp"],
.sp-hero__bg[style*="/contact-desk.webp"],
.lux-hero__bg[style*="/contact-desk.webp"]{background-image:url('assets/img/contact-desk-sm.webp') !important;}
.fd-interlude[style*="/events-redcarpet.webp"],
.fd-photoback[style*="/events-redcarpet.webp"],
.hero-ph[style*="/events-redcarpet.webp"],
.sp-hero__bg[style*="/events-redcarpet.webp"],
.lux-hero__bg[style*="/events-redcarpet.webp"]{background-image:url('assets/img/events-redcarpet-sm.webp') !important;}
.fd-interlude[style*="/executive-aviation.webp"],
.fd-photoback[style*="/executive-aviation.webp"],
.hero-ph[style*="/executive-aviation.webp"],
.sp-hero__bg[style*="/executive-aviation.webp"],
.lux-hero__bg[style*="/executive-aviation.webp"]{background-image:url('assets/img/executive-aviation-sm.webp') !important;}
.fd-interlude[style*="/fleet-jet-sprinter.webp"],
.fd-photoback[style*="/fleet-jet-sprinter.webp"],
.hero-ph[style*="/fleet-jet-sprinter.webp"],
.sp-hero__bg[style*="/fleet-jet-sprinter.webp"],
.lux-hero__bg[style*="/fleet-jet-sprinter.webp"]{background-image:url('assets/img/fleet-jet-sprinter-sm.webp') !important;}
.fd-interlude[style*="/fleet-limo-sprinter.webp"],
.fd-photoback[style*="/fleet-limo-sprinter.webp"],
.hero-ph[style*="/fleet-limo-sprinter.webp"],
.sp-hero__bg[style*="/fleet-limo-sprinter.webp"],
.lux-hero__bg[style*="/fleet-limo-sprinter.webp"]{background-image:url('assets/img/fleet-limo-sprinter-sm.webp') !important;}
.fd-interlude[style*="/fleet-mini-coach.webp"],
.fd-photoback[style*="/fleet-mini-coach.webp"],
.hero-ph[style*="/fleet-mini-coach.webp"],
.sp-hero__bg[style*="/fleet-mini-coach.webp"],
.lux-hero__bg[style*="/fleet-mini-coach.webp"]{background-image:url('assets/img/fleet-mini-coach-sm.webp') !important;}
.fd-interlude[style*="/hero-airport-curb.webp"],
.fd-photoback[style*="/hero-airport-curb.webp"],
.hero-ph[style*="/hero-airport-curb.webp"],
.sp-hero__bg[style*="/hero-airport-curb.webp"],
.lux-hero__bg[style*="/hero-airport-curb.webp"]{background-image:url('assets/img/hero-airport-curb-sm.webp') !important;}
.fd-interlude[style*="/hero-cruise-pier.webp"],
.fd-photoback[style*="/hero-cruise-pier.webp"],
.hero-ph[style*="/hero-cruise-pier.webp"],
.sp-hero__bg[style*="/hero-cruise-pier.webp"],
.lux-hero__bg[style*="/hero-cruise-pier.webp"]{background-image:url('assets/img/hero-cruise-pier-sm.webp') !important;}
.fd-interlude[style*="/hero-desk-w223.webp"],
.fd-photoback[style*="/hero-desk-w223.webp"],
.hero-ph[style*="/hero-desk-w223.webp"],
.sp-hero__bg[style*="/hero-desk-w223.webp"],
.lux-hero__bg[style*="/hero-desk-w223.webp"]{background-image:url('assets/img/hero-desk-w223-sm.webp') !important;}
.fd-interlude[style*="/hero-exec-w223.webp"],
.fd-photoback[style*="/hero-exec-w223.webp"],
.hero-ph[style*="/hero-exec-w223.webp"],
.sp-hero__bg[style*="/hero-exec-w223.webp"],
.lux-hero__bg[style*="/hero-exec-w223.webp"]{background-image:url('assets/img/hero-exec-w223-sm.webp') !important;}
.fd-interlude[style*="/hero-fleet.webp"],
.fd-photoback[style*="/hero-fleet.webp"],
.hero-ph[style*="/hero-fleet.webp"],
.sp-hero__bg[style*="/hero-fleet.webp"],
.lux-hero__bg[style*="/hero-fleet.webp"]{background-image:url('assets/img/hero-fleet-sm.webp') !important;}
.fd-interlude[style*="/hero-hotel-w223.webp"],
.fd-photoback[style*="/hero-hotel-w223.webp"],
.hero-ph[style*="/hero-hotel-w223.webp"],
.sp-hero__bg[style*="/hero-hotel-w223.webp"],
.lux-hero__bg[style*="/hero-hotel-w223.webp"]{background-image:url('assets/img/hero-hotel-w223-sm.webp') !important;}
.fd-interlude[style*="/hero-lux-cullinan.webp"],
.fd-photoback[style*="/hero-lux-cullinan.webp"],
.hero-ph[style*="/hero-lux-cullinan.webp"],
.sp-hero__bg[style*="/hero-lux-cullinan.webp"],
.lux-hero__bg[style*="/hero-lux-cullinan.webp"]{background-image:url('assets/img/hero-lux-cullinan-sm.webp') !important;}
.fd-interlude[style*="/hero-nyc.webp"],
.fd-photoback[style*="/hero-nyc.webp"],
.hero-ph[style*="/hero-nyc.webp"],
.sp-hero__bg[style*="/hero-nyc.webp"],
.lux-hero__bg[style*="/hero-nyc.webp"]{background-image:url('assets/img/hero-nyc-sm.webp') !important;}
.fd-interlude[style*="/interior-exec.webp"],
.fd-photoback[style*="/interior-exec.webp"],
.hero-ph[style*="/interior-exec.webp"],
.sp-hero__bg[style*="/interior-exec.webp"],
.lux-hero__bg[style*="/interior-exec.webp"]{background-image:url('assets/img/interior-exec-sm.webp') !important;}
.fd-interlude[style*="/interior-limo.webp"],
.fd-photoback[style*="/interior-limo.webp"],
.hero-ph[style*="/interior-limo.webp"],
.sp-hero__bg[style*="/interior-limo.webp"],
.lux-hero__bg[style*="/interior-limo.webp"]{background-image:url('assets/img/interior-limo-sm.webp') !important;}
.fd-interlude[style*="/lux-cullinan-void.webp"],
.fd-photoback[style*="/lux-cullinan-void.webp"],
.hero-ph[style*="/lux-cullinan-void.webp"],
.sp-hero__bg[style*="/lux-cullinan-void.webp"],
.lux-hero__bg[style*="/lux-cullinan-void.webp"]{background-image:url('assets/img/lux-cullinan-void-sm.webp') !important;}
.fd-interlude[style*="/lux-exotic.webp"],
.fd-photoback[style*="/lux-exotic.webp"],
.hero-ph[style*="/lux-exotic.webp"],
.sp-hero__bg[style*="/lux-exotic.webp"],
.lux-hero__bg[style*="/lux-exotic.webp"]{background-image:url('assets/img/lux-exotic-sm.webp') !important;}
.fd-interlude[style*="/moment-airport.webp"],
.fd-photoback[style*="/moment-airport.webp"],
.hero-ph[style*="/moment-airport.webp"],
.sp-hero__bg[style*="/moment-airport.webp"],
.lux-hero__bg[style*="/moment-airport.webp"]{background-image:url('assets/img/moment-airport-sm.webp') !important;}
.fd-interlude[style*="/moment-charters.webp"],
.fd-photoback[style*="/moment-charters.webp"],
.hero-ph[style*="/moment-charters.webp"],
.sp-hero__bg[style*="/moment-charters.webp"],
.lux-hero__bg[style*="/moment-charters.webp"]{background-image:url('assets/img/moment-charters-sm.webp') !important;}
.fd-interlude[style*="/moment-events.webp"],
.fd-photoback[style*="/moment-events.webp"],
.hero-ph[style*="/moment-events.webp"],
.sp-hero__bg[style*="/moment-events.webp"],
.lux-hero__bg[style*="/moment-events.webp"]{background-image:url('assets/img/moment-events-sm.webp') !important;}
.fd-interlude[style*="/real-bmw-7.webp"],
.fd-photoback[style*="/real-bmw-7.webp"],
.hero-ph[style*="/real-bmw-7.webp"],
.sp-hero__bg[style*="/real-bmw-7.webp"],
.lux-hero__bg[style*="/real-bmw-7.webp"]{background-image:url('assets/img/real-bmw-7-sm.webp') !important;}
.fd-interlude[style*="/real-coach.webp"],
.fd-photoback[style*="/real-coach.webp"],
.hero-ph[style*="/real-coach.webp"],
.sp-hero__bg[style*="/real-coach.webp"],
.lux-hero__bg[style*="/real-coach.webp"]{background-image:url('assets/img/real-coach-sm.webp') !important;}
.fd-interlude[style*="/real-escalade.webp"],
.fd-photoback[style*="/real-escalade.webp"],
.hero-ph[style*="/real-escalade.webp"],
.sp-hero__bg[style*="/real-escalade.webp"],
.lux-hero__bg[style*="/real-escalade.webp"]{background-image:url('assets/img/real-escalade-sm.webp') !important;}
.fd-interlude[style*="/real-rolls.webp"],
.fd-photoback[style*="/real-rolls.webp"],
.hero-ph[style*="/real-rolls.webp"],
.sp-hero__bg[style*="/real-rolls.webp"],
.lux-hero__bg[style*="/real-rolls.webp"]{background-image:url('assets/img/real-rolls-sm.webp') !important;}
.fd-interlude[style*="/real-s-class.webp"],
.fd-photoback[style*="/real-s-class.webp"],
.hero-ph[style*="/real-s-class.webp"],
.sp-hero__bg[style*="/real-s-class.webp"],
.lux-hero__bg[style*="/real-s-class.webp"]{background-image:url('assets/img/real-s-class-sm.webp') !important;}
.fd-interlude[style*="/real-sprinter.webp"],
.fd-photoback[style*="/real-sprinter.webp"],
.hero-ph[style*="/real-sprinter.webp"],
.sp-hero__bg[style*="/real-sprinter.webp"],
.lux-hero__bg[style*="/real-sprinter.webp"]{background-image:url('assets/img/real-sprinter-sm.webp') !important;}
.fd-interlude[style*="/real-suburban.webp"],
.fd-photoback[style*="/real-suburban.webp"],
.hero-ph[style*="/real-suburban.webp"],
.sp-hero__bg[style*="/real-suburban.webp"],
.lux-hero__bg[style*="/real-suburban.webp"]{background-image:url('assets/img/real-suburban-sm.webp') !important;}
.fd-interlude[style*="/real-tesla.webp"],
.fd-photoback[style*="/real-tesla.webp"],
.hero-ph[style*="/real-tesla.webp"],
.sp-hero__bg[style*="/real-tesla.webp"],
.lux-hero__bg[style*="/real-tesla.webp"]{background-image:url('assets/img/real-tesla-sm.webp') !important;}
.fd-interlude[style*="/real-yukon.webp"],
.fd-photoback[style*="/real-yukon.webp"],
.hero-ph[style*="/real-yukon.webp"],
.sp-hero__bg[style*="/real-yukon.webp"],
.lux-hero__bg[style*="/real-yukon.webp"]{background-image:url('assets/img/real-yukon-sm.webp') !important;}
.fd-interlude[style*="/work-in-transit.webp"],
.fd-photoback[style*="/work-in-transit.webp"],
.hero-ph[style*="/work-in-transit.webp"],
.sp-hero__bg[style*="/work-in-transit.webp"],
.lux-hero__bg[style*="/work-in-transit.webp"]{background-image:url('assets/img/work-in-transit-sm.webp') !important;}
}
/* ===== site.css ===== */
/* Famous Drive — Website UI Kit
Conventional structure, Aman-warmth, light cream + white-gold + ink black.
*/
@import url('colors_and_type.css');
:root {
/* ── Spacing scale (4-pt) ── added: replaces arbitrary px going forward */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
--space-9: 96px; --space-10: 120px;
/* ── Radius ── canonical 2px vocabulary (was 8 different radii) */
--radius: 2px;
--radius-sm: 2px;
--radius-pill: 999px;
--radius-round: 50%;
/* ── Motion ── one duration scale + the house easing (was ~11 ad-hoc durations) */
--dur-fast: 200ms;
--dur-base: 300ms;
--dur-slow: 420ms;
--ease-standard: cubic-bezier(.2, .7, .2, 1);
--ease-emphasized: cubic-bezier(.2, .8, .2, 1);
/* "Camel & Bronze" — the lighter cousin of Tobacco & Bronze.
─ Same warm leather family, brighter values throughout.
─ Reference: camel cashmere overcoat in daylight, Brunello Cucinelli
safari jacket, Hermès Etoupe leather. Mid-toned and luminous.
─ One precious metal: deeper bronze (so accents stay visible
against the lighter ground). Pure white still banned. */
/* Surfaces — camel, mid-tone but brighter */
--bg: #6F5640; /* camel — page base (was #3A2C22) */
--bg-alt: #634A36; /* deeper camel — subtle bands */
--bg-elev: #4D3826; /* deep espresso — matches cards (option A) */
--bg-card: #7C6249;
--bg-page-light:#7C6249;
/* Saddle — softer dark for inversion sections (Why Us, Footer) */
--bg-deep: #4D3826; /* saddle */
--bg-deeper: #3B2A1B; /* deeper saddle (Footer) */
--bg-dark: #2A1E12; /* darkest — full-bleed photo frames */
/* Type — warm cream
─ On camel ground the muted/subtle steps tilt slightly toward cream
instead of pure taupe so they retain crispness without going stark. */
--fg: #FFFFFF; /* primary — 9.5:1 on camel */
--fg-ink: #FFFFFF;
--fg-on-dark: #FFFFFF;
--fg-muted: #F4EFE6; /* secondary — lifted from #DAC4A1 */
--fg-subtle: #ECE4D7; /* tertiary — lightened for WCAG AA (4.5:1 on camel; was #E6DCCB 3.48:1) */
--fg-faint: #E3DACB; /* quaternary — disclaimers/footers (AA 4.5:1 on camel; was #A6916A 2.23:1) */
--fg-ink-muted: #F4EFE6;
--fg-ink-subtle:#ECE4D7;
/* Bronze — recalibrated so the accent reads against camel.
Old --terra (#A06A38) lived in the same brown family as the page and
visually disappeared on eyebrows + italic ems. The new --terra is a
polished bright bronze; --terra-deep stays burnt for use on cream
sections where dark-on-light is the goal. */
--terra: #D9AE74; /* polished bronze — used on camel surfaces */
--terra-deep: #794B1E; /* burnt bronze — used on cream surfaces & press states */
--terra-bright: #ECC58F; /* highlight — for hover glow */
--brass: #D9AE74;
--brass-deep: #794B1E;
--brass-bright: #ECC58F;
--gold: var(--terra);
--gold-deep: var(--terra-deep);
--gold-bright: var(--terra-bright);
/* Warm taupe — supporting neutral */
--sage: #DDD1BB; /* lightened for WCAG AA (4.5:1 on camel; was #9D8A6E 2.04:1) */
--sage-deep: #6E5E48;
/* Hairlines — light on warm brown */
--hairline: rgba(250,241,221,0.14);
--hairline-strong: rgba(250,241,221,0.26);
--hairline-ink: rgba(250,241,221,0.14);
--hairline-ink-strong: rgba(250,241,221,0.26);
--hairline-gold: rgba(160,106,56,0.50);
--shadow-1: 0 1px 2px rgba(0,0,0,0.22), 0 8px 24px rgba(0,0,0,0.22);
--shadow-2: 0 1px 2px rgba(0,0,0,0.30), 0 30px 60px -10px rgba(0,0,0,0.35);
--shadow-3: 0 1px 2px rgba(0,0,0,0.34), 0 60px 120px -20px rgba(0,0,0,0.42);
}
* { box-sizing: border-box; }
html, body, #root { margin:0; padding:0; background: var(--bg); color: var(--fg); min-height: 100%; }
body {
font-family: var(--font-sans);
background:
radial-gradient(ellipse 1200px 700px at 85% -5%, rgba(194,141,90,0.14), transparent 65%),
radial-gradient(ellipse 1000px 600px at -10% 75%, rgba(0,0,0,0.14), transparent 70%),
var(--bg);
background-attachment: fixed;
}
.app { min-height: 100vh; position: relative; overflow-x: clip; }
.container { max-width: 1440px; margin: 0 auto; padding: 0 56px; }
@media (max-width: 720px) { .container { padding: 0 24px; } }
/* type helpers */
.eyebrow {
display: inline-flex; align-items: center; gap: 14px;
font-family: var(--font-sans); font-size: 11px; font-weight: 600;
letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-bright);
}
.eyebrow::before {
content: ""; width: 32px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-bright) 30%, var(--gold-bright) 100%);
}
.eyebrow::after {
/* small bronze diamond pip — matches the hero-title__pip vocabulary */
content: "◆"; font-size: 6px; color: var(--gold);
vertical-align: middle; opacity: 0.85;
margin-left: 4px;
}
.h-display {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(38px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -0.012em;
color: var(--fg); margin: 0; text-wrap: balance;
}
.h-display em { font-style: italic; color: var(--gold); }
.h-section {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(26px, 2.7vw, 36px); line-height: 1.08; letter-spacing: -0.014em;
color: var(--fg); margin: 0; text-wrap: balance;
}
.h-section em { font-style: italic; color: var(--gold); }
.lede {
font-family: var(--font-sans); font-weight: 300; font-size: 19px; line-height: 1.6;
color: var(--fg); margin: 0;
}
/* on light cards (inverted) */
.on-light, .on-light .h-section, .on-light .h-display, .on-light .lede { color: var(--fg-ink); }
.on-light .lede { color: var(--fg-ink-muted); }
.on-light .eyebrow { color: var(--gold-deep); }
.on-light .eyebrow::before { background: var(--gold-deep); }
.on-light .h-section em, .on-light .h-display em { color: var(--gold-deep); }
/* buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
height: 52px; padding: 0 28px; border-radius: var(--radius);
font-family: var(--font-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.20em; text-transform: uppercase;
cursor: pointer; user-select: none;
background: transparent; border: 1px solid transparent; color: var(--fg);
transition: all 300ms var(--ease-cinematic);
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--gold); color: #2A1E12; border-color: var(--gold);
box-shadow: 0 1px 2px rgba(0,0,0,0.22), 0 12px 28px -8px rgba(160,106,56,0.50); }
.btn--primary:hover { background: var(--gold); border-color: var(--gold); color: #2A1E12; }
.btn--gold { background: var(--gold); color: #2A1E12; border-color: var(--gold);
box-shadow: 0 1px 2px rgba(0,0,0,0.22), 0 12px 28px -8px rgba(160,106,56,0.50); }
.btn--gold:hover { background: var(--gold); border-color: var(--gold); color: #2A1E12; }
/* Match the static pages' button hover (lift + slight brighten) so gold CTAs feel
identical everywhere. */
.btn--gold:hover, .btn--primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn--ghost { border-color: var(--hairline-strong); color: var(--fg); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn--ghost-dark { border-color: rgba(250,241,221,0.30); color: var(--fg-on-dark); }
.btn--ghost-dark:hover { border-color: var(--fg-on-dark); }
.btn--ink { background: var(--bg-deep); color: var(--fg); border-color: var(--bg-deep); }
.btn--ink:hover { background: var(--bg-deep); border-color: var(--gold); color: var(--fg); }
/* ===== Universal 3D tilt card =====
Apply via the `tilt-card` className. Cursor-tracked rotation + bronze sheen
following the pointer. Inner content layers can opt in with `tilt-up`. */
.tilt-card {
--rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
transform-style: preserve-3d;
transition: transform 360ms var(--ease-standard),
box-shadow 360ms var(--ease-standard),
border-color 240ms;
position: relative;
}
.tilt-card::after {
/* Specular bronze sheen — invisible at rest, follows cursor on hover */
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle 220px at var(--mx) var(--my),
rgba(213,164,114,0.18), transparent 60%);
opacity: 0;
transition: opacity 320ms;
pointer-events: none;
z-index: 1;
border-radius: inherit;
}
.tilt-card:hover { box-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 22px 48px -16px rgba(0,0,0,0.55); }
.tilt-card:hover::after { opacity: 1; }
.tilt-card > * { position: relative; z-index: 2; }
.tilt-card .tilt-up { transform: translateZ(24px); transition: transform 360ms var(--ease-standard); }
.tilt-card:hover .tilt-up { transform: translateZ(38px); }
@media (prefers-reduced-motion: reduce) {
.tilt-card { transform: none !important; transition: box-shadow 200ms, border-color 200ms !important; }
.tilt-card .tilt-up { transform: none !important; }
}
/* ===== hero.css ===== */
/* === NAV === */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 90;
height: 78px;
display: grid; grid-template-columns: auto 1fr auto;
align-items: center; padding: 0 40px; gap: 40px;
background: rgba(31, 27, 23, 0.78);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
border-bottom: 1px solid var(--hairline);
}
.nav-mark { font-family: var(--font-display); font-weight: 400;
font-size: 17px; letter-spacing: 0.34em; color: var(--fg); text-decoration: none; }
.nav-mark sup { font-family: var(--font-sans); font-size: 9px; font-weight: 500;
letter-spacing: 0.20em; color: var(--gold); vertical-align: 7px; margin-left: 8px; }
.nav-links { display: flex; gap: 32px; justify-content: center; align-items: center; }
.nav-link { font-family: var(--font-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg);
cursor: pointer; background: none; border: 0;
padding: 4px 0; margin: 0; position: relative;
display: inline-flex; align-items: center; height: 32px;
line-height: 1; white-space: nowrap; text-decoration: none;
font-family: inherit; /* normalize button vs anchor */
transition: color 200ms; }
.nav-link { font-family: var(--font-sans); }
.nav-link--wc { color: var(--gold); }
.nav-link--wc::before {
content: ""; display: inline-block; width: 5px; height: 5px;
border-radius: 50%; background: var(--gold); margin-right: 7px;
vertical-align: middle;
box-shadow: 0 0 0 0 rgba(217,174,116,0.6);
animation: nav-wc-pulse 2.4s infinite;
}
@keyframes nav-wc-pulse {
0% { box-shadow: 0 0 0 0 rgba(217,174,116,0.55); }
70% { box-shadow: 0 0 0 6px rgba(217,174,116,0); }
100% { box-shadow: 0 0 0 0 rgba(217,174,116,0); }
}
.nav-link::after { content:""; position:absolute; left:0; bottom:-6px; height:1px;
background: var(--gold); width: 0; transition: width 400ms var(--ease-cinematic); }
.nav-link:hover { color: var(--gold); }
.nav-link:hover::after, .nav-link.is-active::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-phone { font-family: var(--font-sans); font-size: 12px; font-weight: 500;
letter-spacing: 0.16em; color: var(--fg-muted); font-variant-numeric: tabular-nums;
white-space: nowrap; }
.nav-phone strong { color: var(--gold); font-weight: 500; margin-right: 4px; }
/* language dropdown */
.nav-lang { position: relative; }
.nav-lang-trigger {
display: inline-flex; align-items: center; gap: 6px;
background: transparent; border: 1px solid var(--hairline-strong);
padding: 8px 12px; border-radius: var(--radius); cursor: pointer;
font-family: var(--font-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.16em; color: var(--fg);
transition: all 200ms;
}
.nav-lang-trigger:hover { border-color: var(--gold); color: var(--gold); }
.nav-lang-trigger .globe { font-size: 13px; color: var(--gold); }
.nav-lang-trigger .chev { font-size: 9px; color: var(--gold); margin-left: 2px; }
.nav-lang-menu {
position: absolute; top: calc(100% + 6px); right: 0;
background: rgba(31,27,23,0.95);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
border: 1px solid var(--hairline-strong);
min-width: 88px;
display: grid; grid-template-columns: 1fr 1fr;
z-index: 100;
box-shadow: var(--shadow-2);
}
.nav-lang-item {
background: transparent; border: 0;
padding: 10px 12px;
font-family: var(--font-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.16em; color: var(--fg);
cursor: pointer; text-align: left;
border-right: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
transition: all 200ms;
}
.nav-lang-item:nth-child(2n) { border-right: 0; }
.nav-lang-item:hover { background: rgba(200,162,105,0.18); color: var(--gold); }
.nav-lang-item.is-active { color: var(--gold); }
/* login button */
.nav-login {
background: transparent; border: 0; padding: 8px 0;
font-family: var(--font-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg);
cursor: pointer;
transition: color 200ms;
}
.nav-login:hover { color: var(--gold); }
@media (max-width: 1280px) { .nav-links { gap: 22px; } }
@media (max-width: 1200px) { .nav-links { gap: 20px; } .nav-login { display: none; } }
@media (max-width: 1080px) { .nav-link { font-size: 10px; letter-spacing: 0.16em; } .nav-links { gap: 16px; } }
@media (max-width: 980px) { .nav-lang { display: none; } }
@media (max-width: 880px) { .nav { grid-template-columns: 1fr auto; padding: 0 20px; }
.nav-links { display: none; } }
/* === HERO === */
.hero { position: relative; padding: 120px 0 80px; overflow: hidden; perspective: 1400px; }
.hero-bg {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
/* Photograph removed — warm camel ground with a soft top-down depth wash. */
background:
radial-gradient(ellipse 1200px 760px at 78% 16%, rgba(124,98,73,0.55), transparent 62%),
linear-gradient(180deg, rgba(43,33,24,0.32) 0%, transparent 42%, rgba(43,33,24,0.34) 100%);
}
.hero-bg::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(ellipse 1100px 700px at 75% 25%, rgba(200,162,105,0.30), transparent 60%),
radial-gradient(ellipse 700px 500px at 15% 80%, rgba(200,162,105,0.18), transparent 60%);
}
.hero-inner { position: relative; z-index: 2;
display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center;
max-width: 1440px; margin: 0 auto; padding: 0 56px;
}
.hero-copy { display: flex; flex-direction: column; gap: 24px; }
.hero-rating {
display: flex; align-items: center; gap: 14px;
font-family: var(--font-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted);
}
.hero-rating .stars { color: var(--gold-deep); letter-spacing: 0.06em; font-size: 13px; }
.hero-title { font-family: var(--font-display); font-weight: 400;
font-size: clamp(30px, 2.6vw, 36px); line-height: 1.06; letter-spacing: -0.012em;
color: var(--fg); margin: 0; text-wrap: balance; max-width: none; }
.hero-title em { font-style: italic; font-weight: 400; color: var(--gold-deep); }
.hero-title__line {
display: block;
white-space: nowrap;
}
/* === Golden badge lede chip ===
A small filled brass badge — bronze gradient ground, deep saddle text,
thin gold border with a brighter top edge for the lit metal feel. Reads
as a stamped seal pinned above the H1, not a hairline label.
On hero reveal, the badge fades up rather than drawing rules. */
.hero-title .hero-title__lede {
display: inline-flex;
align-items: center;
font-family: var(--font-sans); font-weight: 600;
font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase;
color: #2A1B0E;
margin-bottom: 28px;
padding: 10px 24px 9px;
position: relative;
white-space: normal;
/* Brass plate — bronze gradient with a cream highlight at the top edge */
background:
linear-gradient(180deg,
var(--gold-bright) 0%,
var(--gold) 45%,
var(--gold-deep) 100%);
border: 1px solid var(--gold-deep);
border-top-color: rgba(255, 250, 240, 0.55);
border-radius: var(--radius-pill);
box-shadow:
inset 0 1px 0 rgba(255, 250, 240, 0.50),
inset 0 -1px 0 rgba(0, 0, 0, 0.15),
0 1px 2px rgba(0, 0, 0, 0.30),
0 12px 28px -10px rgba(160, 106, 56, 0.55);
text-shadow: 0 1px 0 rgba(255, 250, 240, 0.25);
opacity: 0.98;
overflow: hidden;
isolation: isolate;
}
/* Subtle diagonal sheen always lit across the badge — gives it the brass shine */
.hero-title .hero-title__lede::before,
.hero-title .hero-title__lede::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: none;
width: auto; height: auto;
transform: none;
transition: none;
opacity: 0;
}
.hero-title .hero-title__lede::before {
background: linear-gradient(115deg,
transparent 30%,
rgba(255, 250, 240, 0.28) 50%,
transparent 70%);
opacity: 1;
mix-blend-mode: overlay;
}
.hero.is-loaded .hero-title .hero-title__lede::before,
.hero.is-loaded .hero-title .hero-title__lede::after {
width: auto;
transition-delay: 0ms;
}
/* Diamond pip — now deep saddle to read against the bronze ground */
.hero-title .hero-title__pip {
display: inline-block;
color: rgba(42, 27, 14, 0.55);
font-size: 6px;
line-height: 1;
margin: 0 14px;
vertical-align: middle;
opacity: 1;
transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
.hero-title .hero-title__lede::before,
.hero-title .hero-title__lede::after { opacity: 1; transition: none; }
}
/* Below 640px, let the lines wrap naturally — nowrap would push horizontal scroll */
@media (max-width: 640px) {
.hero-title__line { white-space: normal; }
.hero-title { font-size: clamp(28px, 7.5vw, 42px); }
}
.hero-lede { font-family: var(--font-sans); font-weight: 300; font-size: 19px; line-height: 1.6;
color: var(--fg); max-width: 520px; margin: 0; }
/* === Hero trust pillars — Vertical Ledger ===
No card, no border, no fill. Pure typography over the video. Three columns
separated only by a 1px gold hairline running between them. Icon sits at
the top of each column without a frame; italic statement and tracked label
stack beneath. Reads as a colophon, not a card grid. */
.hero-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
list-style: none;
padding: 0;
margin: 40px 0 0;
max-width: 680px;
background: none;
}
.hero-pillar {
position: relative;
padding: 14px 24px 8px;
background: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
overflow: visible;
/* Centred typographic column */
display: grid;
grid-template-rows: auto auto auto;
row-gap: 14px;
justify-items: center;
align-content: start;
text-align: center;
transition: none;
}
/* Vertical hairline on the left of every pillar except the first.
:not(:first-child) is bulletproof (no adjacent-sibling weirdness) and
guarantees both gaps render identically. */
.hero-pillar:not(:first-child)::before {
content: "";
position: absolute;
left: 0;
top: 18px;
bottom: 14px;
width: 1px;
background: linear-gradient(180deg,
transparent 0%,
rgba(217, 174, 116, 0.40) 25%,
rgba(217, 174, 116, 0.55) 50%,
rgba(217, 174, 116, 0.40) 75%,
transparent 100%);
pointer-events: none;
}
/* No hover shift on the column — typography is the design, not motion */
.hero-pillar:hover .hero-pillar__icon { color: var(--gold-bright); }
/* Icon — no plate, no frame. Just the glyph in bronze with a faint drop. */
.hero-pillar__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: var(--gold);
border: 0;
background: transparent;
flex: 0 0 auto;
transition: color 320ms ease;
}
.hero-pillar__icon svg {
width: 26px;
height: 26px;
display: block;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
/* __k — italic serif statement, centred. Reserved height keeps the three
labels below at a shared baseline regardless of statement length. */
.hero-pillar__k {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 17px;
line-height: 1.25;
letter-spacing: -0.010em;
color: var(--fg);
text-wrap: balance;
margin: 0;
min-height: 3.75em;
display: flex;
align-items: center;
justify-content: center;
max-width: 18ch;
}
/* __v — tracked sans whisper */
.hero-pillar__v {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--fg-muted);
margin: 0;
max-width: 22ch;
}
.hero-pillar__glow { display: none; }
@media (max-width: 720px) {
.hero-pillars {
grid-template-columns: 1fr;
max-width: none;
}
.hero-pillar { padding: 22px 0; }
.hero-pillar:first-child { padding-top: 0; }
.hero-pillar:last-child { padding-bottom: 0; }
.hero-pillar:not(:first-child)::before {
left: 18px; right: 18px; top: 0;
width: auto; height: 1px; bottom: auto;
background: linear-gradient(90deg,
transparent 0%,
rgba(217, 174, 116, 0.40) 25%,
rgba(217, 174, 116, 0.55) 50%,
rgba(217, 174, 116, 0.40) 75%,
transparent 100%);
}
.hero-pillar__k { min-height: 0; }
}
.hero-stats { display: flex; gap: 36px; margin-top: 8px; padding-top: 28px;
border-top: 1px solid var(--hairline); }
.hero-stat .k { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 6px; }
.hero-stat .v { font-family: var(--font-display); font-size: 28px; color: var(--fg);
letter-spacing: -0.01em; }
.hero-stat .v small { font-family: var(--font-sans); font-size: 11px;
letter-spacing: 0.10em; color: var(--fg-subtle); margin-left: 6px; }
/* 3D stage — featured vehicle */
.hero-stage { position: relative; height: 460px; perspective: 1200px; perspective-origin: 50% 40%; }
.hero-stage .platform {
position: absolute; left: 50%; bottom: 30px;
width: 88%; height: 200px;
transform: translateX(-50%) rotateX(76deg);
background:
radial-gradient(ellipse at center, rgba(20,17,15,0.16) 0%, transparent 60%);
filter: blur(10px);
}
.hero-stage .ring {
position: absolute; left: 50%; bottom: 80px;
width: 70%; height: 90px;
transform: translateX(-50%) rotateX(78deg);
border: 1px solid var(--gold);
border-radius: 50%;
opacity: 0.30;
}
.hero-vehicle {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
transform: rotateY(-18deg) rotateX(6deg);
transform-style: preserve-3d;
transition: transform 800ms var(--ease-cinematic);
filter: drop-shadow(0 30px 30px rgba(0,0,0,0.45));
color: var(--fg);
}
.hero-vehicle img { width: 94%; display: block; }
.hero-vehicle .reflection {
position: absolute; left: 0; right: 0; top: 100%;
height: 80%;
transform: scaleY(-1);
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.30), transparent 70%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,0.30), transparent 70%);
opacity: 0.5;
}
.hero-vehicle .reflection img { width: 94%; }
/* === Hero chips — Frosted Cream ===
Translucent cream wash with heavy backdrop-blur. Video softens behind
the chip so it always reads as paper — an editorial caption pinned over
film. Bronze top edge keeps the brand signature; bronze label sits on
the cream ground; deep saddle ink value provides clean contrast. */
.hero-chip {
position: absolute;
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.72) 0%,
rgba(247, 246, 243, 0.68) 100%);
-webkit-backdrop-filter: blur(8px) saturate(160%);
backdrop-filter: blur(8px) saturate(160%);
border: 1px solid rgba(121, 75, 30, 0.22);
padding: 14px 20px 12px;
display: flex; flex-direction: column; gap: 4px;
transform-style: preserve-3d;
border-radius: var(--radius);
overflow: hidden;
box-shadow:
/* Cream highlight along the top inner edge */
inset 0 1px 0 rgba(255, 255, 255, 0.55),
/* Subtle saddle bottom shadow inside */
inset 0 -1px 0 rgba(121, 75, 30, 0.12),
/* Below-chip drop shadow — sits over the video */
0 1px 2px rgba(0, 0, 0, 0.22),
0 22px 44px -16px rgba(0, 0, 0, 0.45),
0 6px 18px -6px rgba(0, 0, 0, 0.30);
transition: border-color 360ms ease, transform 480ms var(--ease-standard);
}
/* Bronze top hairline — the brand signature */
.hero-chip::before {
content: ""; position: absolute; top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--gold-deep) 20%,
var(--gold) 50%,
var(--gold-deep) 80%,
transparent 100%);
opacity: 0.90;
pointer-events: none;
}
.hero-chip .lbl {
font-family: var(--font-sans); font-size: 9px; font-weight: 600;
letter-spacing: 0.28em; text-transform: uppercase;
color: var(--gold-deep);
display: inline-flex; align-items: center; gap: 8px;
position: relative; z-index: 1;
}
/* Bronze "live" pulse dot — deeper bronze for the cream ground */
.hero-chip .lbl::before {
content: ""; width: 5px; height: 5px; border-radius: 50%;
background: var(--gold-deep);
box-shadow: 0 0 0 0 rgba(121, 75, 30, 0.55);
animation: chip-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
flex: 0 0 auto;
}
@keyframes chip-pulse {
0% { box-shadow: 0 0 0 0 rgba(121, 75, 30, 0.55); }
60% { box-shadow: 0 0 0 7px rgba(121, 75, 30, 0); }
100% { box-shadow: 0 0 0 0 rgba(121, 75, 30, 0); }
}
.hero-chip .val {
font-family: var(--font-display); font-size: 17px;
color: #2A1B0E; /* deep saddle ink — dark-on-cream */
letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
line-height: 1.2;
position: relative; z-index: 1;
}
.hero-chip.c1 { top: 8%; right: -4%; transform: translateZ(60px) rotateY(-10deg); }
.hero-chip.c2 { top: 50%; right: -8%; transform: translateZ(80px) rotateY(-14deg) translateY(-50%); }
.hero-chip.c3 { bottom: 8%; left: -4%; transform: translateZ(40px) rotateY(8deg); }
@media (prefers-reduced-motion: reduce) {
.hero-chip .lbl::before { animation: none; }
}
@media (max-width: 1000px) {
.hero-inner { grid-template-columns: 1fr; gap: 48px; }
.hero-stage { height: 360px; }
.hero-chip.c1, .hero-chip.c2, .hero-chip.c3 { display: none; }
}
/* === HERO BOOKING WIDGET (above-fold) === */
.hero-booking {
position: relative; z-index: 4;
max-width: 1080px; margin: 32px auto 0; padding: 0 56px;
}
.hero-booking-card {
background: var(--bg-elev);
border: 1px solid var(--hairline-ink);
box-shadow: var(--shadow-3);
padding: 0;
display: grid;
grid-template-columns: 1.2fr 1.4fr 1.4fr 1fr 0.8fr auto;
align-items: stretch;
position: relative;
overflow: hidden;
}
.hero-booking-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-deep));
}
.hb-field { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px;
border-right: 1px solid var(--hairline-ink); transition: background 300ms; min-width: 0; }
.hb-field:focus-within, .hb-field:hover { background: rgba(200,162,105,0.10); }
.hb-field label { font-family: var(--font-sans); font-size: 9px; font-weight: 500;
letter-spacing: 0.20em; text-transform: uppercase; color: var(--fg-ink-subtle); }
.hb-field input, .hb-field select {
background: transparent; border: 0; padding: 0; outline: none;
font-family: var(--font-display); font-weight: 400; font-size: 14px;
letter-spacing: -0.01em; color: var(--fg-ink);
appearance: none; -webkit-appearance: none; width: 100%; min-width: 0;
text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.hb-cta { font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
background: var(--fg-ink); color: var(--bg-elev); border: 0; padding: 0 28px;
cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
text-align: left; line-height: 1.3; min-width: 140px;
transition: background 300ms; }
.hb-cta:hover { background: var(--gold-deep); }
.hero-trustline { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap;
margin-top: 24px; padding-top: 24px;
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-subtle); }
.hero-trustline span:first-child { color: var(--gold); }
@media (max-width: 1280px) {
.hero-booking-card { grid-template-columns: 1fr 1fr 1fr; }
.hb-field { border-bottom: 1px solid var(--hairline); }
.hb-cta { grid-column: 1 / -1; padding: 24px; }
}
@media (max-width: 720px) {
.hero-booking { padding: 0 24px; }
.hero-booking-card { grid-template-columns: 1fr; }
.hb-field { border-right: 0; }
}
/* real vehicle photo — depth + faint gilt halo to match the dark scene */
.hero-vehicle img { filter: drop-shadow(0 22px 26px rgba(0,0,0,.55)) drop-shadow(0 0 46px rgba(217,174,116,.10)); }
/* ===== sections.css ===== */
/* === SERVICES === */
.services {
padding: 100px 0;
position: relative;
}
.services-header {
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: end;
margin-bottom: 72px;
}
.services-header .lede { max-width: 460px; }
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr; /* equal-height rows so card bottoms align */
gap: 24px;
}
/* === Photographic service cards — editorial composition ===
Top: full-bleed photograph (60% of card height, fixed 280px) with the
tag floating in the bottom-left over a soft dark gradient.
Bottom: title, body, and reserve link on the saddle ground.
On hover: the photograph slowly zooms, a bronze top edge ignites, and
the card lifts. */
.service-card {
background: var(--bg-elev);
color: var(--fg-ink);
border: 1px solid var(--hairline-ink);
display: flex; flex-direction: column;
position: relative;
cursor: pointer;
overflow: hidden;
min-height: 540px;
padding: 0;
transition: all 500ms var(--ease-cinematic);
box-shadow: var(--shadow-1);
}
.service-card::before {
/* gold sweep that travels in on hover */
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
transform: translateX(-100%);
transition: transform 700ms var(--ease-cinematic);
z-index: 3;
}
.service-card:hover {
border-color: var(--gold);
transform: translateY(-6px);
box-shadow: var(--shadow-3);
}
.service-card:hover::before { transform: translateX(0); }
.service-card:hover .service-photo img { transform: scale(1.06); }
.service-card:hover .service-link {
color: var(--gold-deep); gap: 14px;
}
/* --- Photo (single image at top of card) --- */
.service-photo {
position: relative;
width: 100%;
height: 280px;
overflow: hidden;
background: #1F1812;
}
.service-photo img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 1100ms var(--ease-cinematic),
filter 800ms ease;
filter: saturate(0.85) brightness(0.92);
}
.service-card:hover .service-photo img { transform: scale(1.06); }
/* Warm gradient at the bottom of the image — anchors the tag */
.service-photo::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(180deg,
rgba(0, 0, 0, 0.10) 0%,
rgba(0, 0, 0, 0.00) 40%,
rgba(31, 22, 15, 0.55) 100%);
pointer-events: none;
z-index: 1;
}
/* Tag floats over the image */
.service-photo .service-tag {
position: absolute;
left: 20px;
bottom: 18px;
z-index: 2;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--fg);
padding: 8px 14px;
background: rgba(45, 32, 22, 0.78);
-webkit-backdrop-filter: blur(8px) saturate(140%);
backdrop-filter: blur(8px) saturate(140%);
border: 1px solid rgba(217, 174, 116, 0.32);
border-top: 1px solid rgba(236, 197, 143, 0.55);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
/* --- Body region --- */
.service-body-wrap {
display: flex; flex-direction: column; gap: 18px;
padding: 32px 32px 28px;
flex: 1;
}
.service-title {
font-family: var(--font-display); font-weight: 400; font-size: 28px;
line-height: 1.1; letter-spacing: -0.015em; color: var(--fg-ink);
margin: 0;
}
.service-title em { font-style: italic; color: var(--gold-deep); }
.service-body {
font-family: var(--font-sans); font-weight: 300; font-size: 14px; line-height: 1.6;
color: var(--fg-ink-muted); margin: 0; flex: 1;
}
.service-link {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-ink);
margin-top: auto;
transition: all 300ms var(--ease-cinematic);
}
@media (max-width: 1000px) {
.services-grid { grid-template-columns: 1fr 1fr; }
.services-header { grid-template-columns: 1fr; gap: 24px; }
.service-photo { height: 240px; }
}
@media (max-width: 640px) {
.services-grid { grid-template-columns: 1fr; }
.service-card { min-height: 0; }
.service-photo { height: 220px; }
}
/* === FLEET === */
.fleet {
padding: 100px 0;
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 1000px 700px at 20% 20%, rgba(200,162,105,0.10), transparent 60%),
var(--bg);
}
.fleet-header {
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: end;
margin-bottom: 64px;
}
.fleet-tabs {
display: flex; gap: 14px; flex-wrap: wrap;
margin-bottom: 56px;
padding-bottom: 0;
border-bottom: 0;
align-items: stretch;
perspective: 1200px;
}
/* ===== 3D category cards =====
Each tab is a tilting glass slab carrying a vehicle silhouette.
On hover the inner contents lift off the surface; on active it locks
into a slight downward press with a bronze under-glow. */
.fleet-tab--card {
--rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
position: relative;
flex: 1; min-width: 200px; max-width: 280px;
height: 116px; padding: 0;
background: linear-gradient(155deg, rgba(240,228,204,0.06), rgba(240,228,204,0.02));
border: 1px solid var(--hairline-ink-strong);
border-radius: 6px;
cursor: pointer;
transform-style: preserve-3d;
transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
transition: transform 360ms var(--ease-standard),
box-shadow 360ms var(--ease-standard),
border-color 240ms;
box-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 6px 16px rgba(0,0,0,0.20);
overflow: hidden;
text-align: left;
}
.fleet-tab--card:hover {
border-color: var(--gold-deep);
box-shadow:
0 1px 2px rgba(0,0,0,0.35),
0 22px 48px -16px rgba(0,0,0,0.55),
0 0 0 1px rgba(182,129,80,0.20) inset;
}
.fleet-tab--card.is-active {
border-color: var(--gold);
background:
radial-gradient(ellipse 220px 80px at 50% 100%, rgba(213,164,114,0.35), transparent 70%),
linear-gradient(155deg, rgba(240,228,204,0.10), rgba(240,228,204,0.03));
box-shadow:
0 0 0 1px var(--gold) inset,
0 1px 2px rgba(0,0,0,0.35),
0 22px 48px -14px rgba(213,164,114,0.30),
0 32px 60px -16px rgba(0,0,0,0.50);
}
.fleet-tab--card.is-active::after {
/* bronze underline that doubles as projected light on the floor */
content: ""; position: absolute; left: 18px; right: 18px; bottom: 8px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
opacity: 0.7;
}
.fleet-tab__inner {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 14px;
padding: 0 20px;
height: 100%;
transform: translateZ(30px);
transform-style: preserve-3d;
}
.fleet-tab__icon {
position: relative;
width: 64px; height: 38px;
display: flex; align-items: center; justify-content: center;
color: #FFFFFF;
transform: translateZ(28px);
transition: color 280ms, transform 360ms var(--ease-standard);
}
.fleet-tab__icon img {
width: 100%; height: 100%;
object-fit: contain; display: block;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35));
transition: filter 360ms;
}
.fleet-tab__icon::after {
/* contact shadow under each vehicle silhouette — sells the 3D float */
content: ""; position: absolute; bottom: -2px; left: 14%; right: 14%;
height: 5px;
background: radial-gradient(ellipse, rgba(0,0,0,0.55), transparent 70%);
filter: blur(2px);
transform: translateZ(-20px);
opacity: 0.5;
transition: opacity 360ms;
}
.fleet-tab--card:hover .fleet-tab__icon,
.fleet-tab--card.is-active .fleet-tab__icon {
color: var(--gold-bright);
transform: translateZ(42px) translateY(-2px);
}
.fleet-tab--card:hover .fleet-tab__icon img,
.fleet-tab--card.is-active .fleet-tab__icon img {
filter: drop-shadow(0 10px 14px rgba(0,0,0,0.50));
}
.fleet-tab--card:hover .fleet-tab__icon::after,
.fleet-tab--card.is-active .fleet-tab__icon::after {
opacity: 0.8;
}
.fleet-tab__label {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
color: #FFFFFF;
transform: translateZ(20px);
transition: color 240ms;
line-height: 1.3;
}
.fleet-tab--card:hover .fleet-tab__label { color: #FFFFFF; }
.fleet-tab--card.is-active .fleet-tab__label { color: var(--gold-bright); }
.fleet-tab__count {
font-family: var(--font-display); font-style: italic;
font-size: 22px;
color: rgba(255,255,255,0.85);
font-variant-numeric: oldstyle-nums;
transform: translateZ(18px);
transition: color 240ms;
}
.fleet-tab--card:hover .fleet-tab__count { color: var(--gold); }
.fleet-tab--card.is-active .fleet-tab__count { color: var(--gold-bright); }
/* Specular sheen — follows the cursor; gives the card a polished surface */
.fleet-tab__sheen {
position: absolute; inset: 0;
background: radial-gradient(circle 180px at var(--mx) var(--my),
rgba(213,164,114,0.22), transparent 60%);
opacity: 0;
transition: opacity 320ms;
pointer-events: none;
}
.fleet-tab--card:hover .fleet-tab__sheen,
.fleet-tab--card.is-active .fleet-tab__sheen { opacity: 1; }
/* === Fleet pager (Rolls-Royce style) ===
Vehicle index row that lives BELOW the stage rather than above it.
Hairline rail runs the full width; numbered items sit on top with a
bronze underline for the active item. Right-side fraction counter
(01 / 03) reinforces position. */
.fleet-pager {
margin-top: 56px;
position: relative;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 32px;
}
.fleet-pager__rail {
position: absolute;
left: 0; right: 0;
top: 50%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(217, 174, 116, 0.35) 8%,
rgba(217, 174, 116, 0.50) 50%,
rgba(217, 174, 116, 0.35) 92%,
transparent 100%);
pointer-events: none;
z-index: 0;
}
.fleet-pager__items {
display: inline-flex;
align-items: center;
gap: 32px;
position: relative;
z-index: 1;
}
.fleet-pager__item {
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
padding: 14px 0;
display: inline-flex;
align-items: baseline;
gap: 12px;
position: relative;
font-family: var(--font-sans);
color: var(--fg-muted);
transition: color 280ms ease;
}
.fleet-pager__item:hover { color: var(--fg); }
.fleet-pager__item.is-active { color: var(--fg); }
.fleet-pager__item::after {
/* bronze underline for the active item, drawn from centre */
content: "";
position: absolute;
left: 50%;
bottom: 6px;
width: 0;
height: 1px;
background: var(--gold);
transition: width 360ms cubic-bezier(.2, .7, .2, 1),
left 360ms cubic-bezier(.2, .7, .2, 1);
}
.fleet-pager__item.is-active::after {
width: 100%;
left: 0;
}
.fleet-pager__num {
font-family: var(--font-display);
font-style: italic;
font-size: 14px;
letter-spacing: 0.04em;
color: var(--gold);
font-variant-numeric: oldstyle-nums;
opacity: 0.85;
}
.fleet-pager__item.is-active .fleet-pager__num { color: var(--gold-bright); opacity: 1; }
.fleet-pager__divider {
color: rgba(217, 174, 116, 0.45);
font-size: 12px;
line-height: 1;
}
.fleet-pager__name {
font-family: var(--font-display);
font-weight: 400;
font-size: 15px;
letter-spacing: -0.008em;
line-height: 1;
color: inherit;
}
.fleet-pager__name em {
font-style: italic;
color: var(--gold);
margin-left: 6px;
}
.fleet-pager__item.is-active .fleet-pager__name em { color: var(--gold-bright); }
/* Right-side fraction — Roman-style position counter */
.fleet-pager__total {
font-family: var(--font-display);
font-style: italic;
font-size: 14px;
color: var(--gold);
display: inline-flex;
align-items: baseline;
gap: 6px;
font-variant-numeric: oldstyle-nums;
background: var(--bg);
padding-left: 16px;
position: relative;
z-index: 1;
opacity: 0.85;
}
.fleet-pager__total-now { font-size: 18px; color: var(--gold-bright); }
.fleet-pager__total-sep { opacity: 0.55; font-size: 12px; }
.fleet-pager__total-of { opacity: 0.6; }
@media (max-width: 720px) {
.fleet-pager {
grid-template-columns: 1fr;
gap: 16px;
}
.fleet-pager__rail { display: none; }
.fleet-pager__items {
flex-wrap: wrap;
gap: 14px 20px;
}
.fleet-pager__name { font-size: 13px; }
.fleet-pager__total { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
.fleet-tab--card, .fleet-tab__inner, .fleet-tab__icon,
.fleet-tab__label, .fleet-tab__count, .fleet-tab--idx {
transform: none !important;
transition: background 200ms, color 200ms, border-color 200ms !important;
}
}
@media (max-width: 900px) {
.fleet-tab--card { flex: 1 1 calc(50% - 7px); max-width: none; }
}
/* ===== Index pager — refined editorial style =====
Sits below the fleet stage as a quiet numbered row.
No filled buttons, no borders — just italic display numerals with a
gold hairline drawn beneath the active one. Reads as a film-reel
chapter index, not a UI control. */
.fleet-tab-pager {
margin: 40px auto 0;
display: flex;
gap: 36px;
justify-content: center;
align-items: baseline;
}
.fleet-tab--idx {
position: relative;
appearance: none;
background: transparent;
border: 0;
padding: 6px 4px 12px;
cursor: pointer;
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 22px;
letter-spacing: -0.005em;
line-height: 1;
font-variant-numeric: oldstyle-nums tabular-nums;
color: rgba(236, 213, 173, 0.78);
transition: color 320ms var(--ease-standard),
transform 320ms var(--ease-standard);
}
/* Gold hairline beneath each item — invisible at rest, animates to full
width when the item is hovered, full opacity when active */
.fleet-tab--idx::after {
content: "";
position: absolute;
left: 50%; bottom: 0;
height: 1px; width: 0;
background: var(--gold);
opacity: 0;
transform: translateX(-50%);
transition: width 480ms cubic-bezier(.55, 0, .15, 1),
opacity 320ms ease,
background 320ms ease;
}
.fleet-tab--idx:hover {
color: var(--gold-bright);
}
.fleet-tab--idx:hover::after {
width: 100%;
opacity: 0.5;
}
.fleet-tab--idx.is-active {
color: var(--gold-bright);
font-size: 26px;
}
.fleet-tab--idx.is-active::after {
width: 100%;
opacity: 0.85;
background: var(--gold-bright);
}
@media (prefers-reduced-motion: reduce) {
.fleet-tab--idx { transition: none; }
.fleet-tab--idx::after { transition: none; }
}
@media (max-width: 560px) {
.fleet-tab-pager { gap: 24px; }
}
.fleet-stage {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 40px;
align-items: center;
background: var(--bg-elev);
color: var(--fg-ink);
border: 1px solid var(--hairline-ink);
padding: 36px 36px;
box-shadow: var(--shadow-3);
position: relative;
max-width: 1080px;
margin: 0 auto;
overflow: hidden;
}
.fleet-stage::before {
/* gold edge */
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* vertical stack so the thumbnail strip sits under the main photo */
.fleet-vehicle {
position: relative;
display: flex; flex-direction: column; align-items: stretch;
}
.fleet-vehicle .shadow {
display: none;
}
.fleet-vehicle .car {
width: 100%;
height: 360px;
transform: none;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 20px 40px -18px rgba(20,17,15,0.45);
color: var(--fg);
}
.fleet-vehicle .car img { width: 100%; height: 100%; display: block; object-fit: cover; }
.fleet-detail { display: flex; flex-direction: column; gap: 18px; }
.fleet-detail .class-tag {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep);
}
.fleet-detail h3 {
font-family: var(--font-display); font-weight: 400; font-size: 28px;
line-height: 1.1; letter-spacing: -0.02em; color: var(--fg-ink); margin: 0;
}
.fleet-detail h3 em { font-style: italic; color: var(--gold-deep); }
.fleet-detail .desc {
font-family: var(--font-sans); font-weight: 300; font-size: 14px; line-height: 1.6;
color: var(--fg-ink-muted); margin: 0;
}
}
.fleet-specs {
display: grid; grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--hairline-ink);
}
.fleet-spec {
padding: 12px 0;
border-bottom: 1px solid var(--hairline-ink);
display: grid; grid-template-columns: auto 1fr;
align-items: baseline; gap: 10px;
}
.fleet-spec:nth-child(2n+1) { padding-right: 14px; border-right: 1px solid var(--hairline-ink); }
.fleet-spec:nth-child(2n) { padding-left: 14px; }
.fleet-spec .k {
font-family: var(--font-sans); font-size: 9px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-ink-subtle);
min-width: 60px;
}
.fleet-spec .v {
font-family: var(--font-display); font-size: 15px; color: var(--fg-ink);
letter-spacing: -0.005em; font-variant-numeric: tabular-nums;
}
.fleet-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.fleet-actions .btn { width: 100%; height: 48px; }
@media (max-width: 1000px) {
.fleet-stage { grid-template-columns: 1fr; gap: 40px; padding: 40px 24px; }
.fleet-header { grid-template-columns: 1fr; gap: 24px; }
.fleet-vehicle .car { height: 280px; }
}
/* real fleet photos — depth shadow on the slot host (reaches shadow-dom img) */
.fleet-vehicle .car image-slot { filter: drop-shadow(0 18px 24px rgba(0,0,0,.5)); }
/* ===== sections2.css ===== */
/* === CITIES === */
.cities {
padding: 100px 0;
position: relative;
}
.cities-header {
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: end; margin-bottom: 72px;
}
.cities-map {
position: relative;
background: var(--bg-elev);
border: 1px solid var(--hairline);
margin-bottom: 56px;
overflow: hidden;
box-shadow: var(--shadow-1);
}
.cities-map svg { width: 100%; height: 420px; display: block; }
@media (max-width: 1000px) { .cities-map svg { height: 280px; } }
/* === Live World Clock ribbon === */
.world-clock {
display: grid;
grid-template-columns: auto repeat(5, 1fr);
align-items: stretch;
background: linear-gradient(180deg, rgba(0,0,0,0.20), transparent);
border-bottom: 1px solid var(--hairline-ink-strong);
position: relative;
}
.world-clock::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: 0.4;
}
.world-clock-label {
display: flex; align-items: center; gap: 10px;
padding: 0 20px;
font-family: var(--font-sans); font-size: 9px; font-weight: 500;
letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
border-right: 1px solid var(--hairline-ink-strong);
white-space: nowrap;
}
.world-clock-label::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 0 var(--gold);
animation: wc-pulse 2.4s ease-out infinite;
}
@keyframes wc-pulse {
0% { box-shadow: 0 0 0 0 rgba(213,164,114,0.6); }
80% { box-shadow: 0 0 0 10px rgba(213,164,114,0); }
100% { box-shadow: 0 0 0 0 rgba(213,164,114,0); }
}
.wc-cell {
display: flex; flex-direction: column; justify-content: space-between;
padding: 14px 16px 12px;
border-right: 1px solid var(--hairline-ink);
min-width: 0;
transition: background 250ms;
position: relative;
}
.wc-cell:last-child { border-right: 0; }
.wc-cell:hover { background: rgba(213,164,114,0.06); }
.wc-cell-row {
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
}
.wc-code {
font-family: var(--font-sans); font-size: 9px; font-weight: 600;
letter-spacing: 0.22em; color: var(--fg-muted);
}
.wc-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--gold-bright);
box-shadow: 0 0 8px rgba(213,164,114,0.6);
flex: 0 0 auto;
}
.wc-cell.is-night .wc-dot {
background: transparent;
border: 1px solid var(--fg-subtle);
box-shadow: none;
}
.wc-cell.is-night .wc-code { color: var(--fg-subtle); }
.wc-cell.is-night .wc-time { color: var(--fg-muted); }
.wc-time {
font-family: var(--font-display); font-weight: 400;
font-size: 30px; line-height: 1;
letter-spacing: -0.02em; color: var(--fg);
font-variant-numeric: tabular-nums;
margin: 10px 0 6px;
}
.wc-cell.is-hq .wc-time { color: var(--gold-bright); }
.wc-cell.is-hq.is-night .wc-time { color: var(--fg-muted); }
.wc-cell.is-hq .wc-code { color: var(--gold); }
.wc-meta {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.wc-city {
font-family: var(--font-display); font-size: 12px; font-style: italic;
color: var(--fg-muted); letter-spacing: -0.005em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wc-offset {
font-family: var(--font-sans); font-size: 8px; font-weight: 500;
letter-spacing: 0.16em; color: var(--fg-subtle);
white-space: nowrap;
}
@media (max-width: 900px) {
.world-clock { grid-template-columns: auto repeat(4, 1fr); }
.world-clock .wc-cell:nth-child(n+6) { display: none; }
}
@media (max-width: 720px) {
.world-clock { display: none; }
}
.cities-map .pin {
fill: var(--gold-deep);
transform-origin: center;
transform-box: fill-box;
animation: pulse 3s ease-in-out infinite;
}
.cities-map .pin:nth-child(2n) { animation-delay: 1s; }
.cities-map .pin:nth-child(3n) { animation-delay: 2s; }
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.4); opacity: 1; }
}
.cities-map .pin-ring {
fill: none; stroke: var(--gold-deep); stroke-width: 0.5;
opacity: 0; transform-origin: center; transform-box: fill-box;
animation: ring 3s ease-out infinite;
}
.cities-map .pin-ring:nth-child(2n) { animation-delay: 1s; }
.cities-map .pin-ring:nth-child(3n) { animation-delay: 2s; }
@keyframes ring {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(3.5); opacity: 0; }
}
.cities-map .route {
fill: none; stroke: var(--gold-deep); stroke-width: 0.5; stroke-dasharray: 3 2;
opacity: 0.40;
}
.cities-map .land { fill: var(--antique-brass); opacity: 0.55; }
.cities-map .graticule line {
stroke: var(--hairline); stroke-width: 0.5; opacity: 0.6;
}
.cities-map .label {
font-family: var(--font-sans); font-size: 8px; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase; fill: var(--fg-muted);
}
.cities-map .label.hq { fill: var(--gold-deep); font-weight: 600; }
.cities-map-legend {
position: absolute; bottom: 18px; left: 24px;
display: flex; flex-direction: row; flex-wrap: wrap; gap: 18px;
font-family: var(--font-sans); font-size: 9px; font-weight: 500;
letter-spacing: 0.20em; text-transform: uppercase; color: var(--fg-muted);
background: rgba(31,24,18,0.65);
border: 1px solid var(--hairline-ink);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 10px 14px;
border: 1px solid var(--hairline-ink);
}
.cities-map-legend .item { display: flex; align-items: center; gap: 10px; }
.cities-map-legend .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-deep); }
.cities-map-legend .dot--out { background: var(--fg-faint); }
.cities-map-legend .dot--out.is-night { background: transparent; border: 1px solid var(--fg-subtle); }
.cities-ledger {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--hairline);
}
.cities-col { padding: 28px 24px; border-right: 1px solid var(--hairline); }
.cities-col:last-child { border-right: 0; }
.cities-col h4 {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep);
margin: 0 0 18px;
}
.cities-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cities-col li {
display: flex; justify-content: space-between; align-items: baseline;
font-family: var(--font-display); font-size: 18px; color: var(--fg); letter-spacing: -0.005em;
}
.cities-col li .code {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.18em; color: var(--fg-subtle); text-transform: uppercase;
}
.cities-col li.is-hq { color: var(--gold-deep); }
.cities-col li.is-hq::before { content: "★ "; font-size: 12px; }
@media (max-width: 1000px) {
.cities-header { grid-template-columns: 1fr; gap: 24px; }
.cities-ledger { grid-template-columns: 1fr; }
.cities-col { border-right: 0; border-bottom: 1px solid var(--hairline); }
}
/* === Cities — white "light intermission" surface (dark-on-white) === */
.cities-map,
.cities-ledger {
background: #FFFFFF;
border-color: rgba(110,70,28,0.14);
--fg: #2B1C0E;
--fg-muted: #6E5132;
--fg-subtle: #8A6B45;
--fg-faint: #A6916A;
--gold: #8A5A1E;
--gold-deep: #6E4416;
--gold-bright: #A56A22;
--hairline: rgba(110,70,28,0.14);
--hairline-ink: rgba(110,70,28,0.14);
--hairline-ink-strong: rgba(110,70,28,0.22);
}
.cities-ledger { border-top-color: rgba(110,70,28,0.14); }
.cities-col { border-right-color: rgba(110,70,28,0.14); }
.cities-col li.is-hq { color: var(--gold-deep); }
/* world-clock ribbon: warm tint instead of black-on-white */
.cities-map .world-clock {
background: linear-gradient(180deg, rgba(110,70,28,0.05), transparent);
border-bottom-color: rgba(110,70,28,0.16);
}
.cities-map .wc-cell:hover { background: rgba(138,90,30,0.06); }
/* legend: light pill so dark text stays legible */
.cities-map .cities-map-legend {
background: rgba(255,255,255,0.85);
border-color: rgba(110,70,28,0.14);
}
/* === WHY US — light, with HD photo backdrop === */
.why {
position: relative;
padding: 100px 0;
overflow: hidden;
color: var(--fg);
background:
linear-gradient(180deg, rgba(252,250,243,0.97) 0%, rgba(252,250,243,0.92) 60%, rgba(252,250,243,0.97) 100%),
url('assets/photos/1492144534655-ae79c964c9d7.jpg') center/cover no-repeat;
background-attachment: fixed, fixed;
}
.why::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 1200px 700px at 80% 20%, rgba(191,168,117,0.20), transparent 60%);
}
.why > .container { position: relative; }
.why .eyebrow { color: var(--gold-deep); }
.why .eyebrow::before { background: var(--gold-deep); }
.why h2 { color: var(--fg); }
.why h2 em { color: var(--gold-deep); }
.why .lede { color: var(--fg-muted); }
.why-header {
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: end; margin-bottom: 80px;
}
/* Separate, more compact cards with real gaps (was one panel with gap:0 and
divider lines). Each .why-item is now its own glass card; in Signature mode
premium-boxes.css gives it the gold edge. */
.why-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 20px;
background: transparent;
border: 0;
box-shadow: none;
}
.why-item {
padding: 26px 24px 24px;
min-height: 0;
display: flex; flex-direction: column; gap: 12px;
background: rgba(70,54,42,0.55);
border: 1px solid var(--hairline);
border-radius: var(--pb-radius, 14px);
-webkit-backdrop-filter: blur(8px) saturate(140%);
backdrop-filter: blur(8px) saturate(140%);
}
.why-item .num {
font-family: var(--font-display); font-style: italic;
font-size: 50px; color: var(--gold-deep); line-height: 0.9; letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.why-item .num small {
font-family: var(--font-sans); font-size: 13px; font-weight: 500;
letter-spacing: 0.20em; color: var(--gold-deep); margin-left: 8px;
font-style: normal; text-transform: uppercase;
}
.why-item h4 {
font-family: var(--font-display); font-weight: 400; font-size: 20px;
line-height: 1.2; letter-spacing: -0.01em; color: var(--fg); margin: 0;
}
.why-item p {
font-family: var(--font-sans); font-weight: 300; font-size: 14px; line-height: 1.6;
color: var(--fg-muted); margin: 0;
}
@media (max-width: 1000px) { .why-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
.why-header { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 600px) { .why-grid { grid-template-columns: 1fr; gap: 14px; } }
/* === ABOUT US — founder story + milestones (lives inside .why) === */
.about-story {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: 72px;
align-items: start;
margin-bottom: 80px;
}
.about-story__narrative {
display: flex; flex-direction: column; gap: 18px;
font-family: var(--font-sans); font-weight: 300;
font-size: 17px; line-height: 1.65;
color: var(--fg-muted);
max-width: 62ch;
}
.about-story__narrative p { margin: 0; }
.about-story__narrative em {
font-family: var(--font-display); font-style: italic;
color: var(--gold-bright); font-weight: 400;
}
.about-story__aside { display: flex; flex-direction: column; gap: 28px; }
.about-story__aside-card {
position: relative;
padding: 36px 32px 32px;
border: 1px solid var(--hairline);
background: rgba(0, 0, 0, 0.10);
}
.about-story__aside-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.about-story__quote {
font-family: var(--font-display); font-weight: 400; font-style: italic;
font-size: 22px; line-height: 1.35; letter-spacing: -0.012em;
color: var(--fg); text-wrap: pretty;
}
.about-story__quote em {
font-style: italic; color: var(--gold-bright); font-weight: 400;
}
.about-story__attrib {
margin-top: 22px; padding-top: 18px;
border-top: 1px solid var(--hairline);
}
.about-story__attrib-name {
font-family: var(--font-sans); font-size: 11px; font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold-bright);
}
.about-story__attrib-role {
margin-top: 6px;
font-family: var(--font-sans); font-size: 10px;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--fg-subtle);
}
.about-story__sig {
display: flex; align-items: baseline; gap: 10px;
font-family: var(--font-sans); font-size: 10px;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--fg-subtle);
}
.about-story__sig-italic {
font-family: var(--font-display); font-style: italic;
font-size: 16px; letter-spacing: -0.005em; text-transform: none;
color: var(--gold-bright);
}
@media (max-width: 960px) {
.about-story { grid-template-columns: 1fr; gap: 40px; }
}
/* Timeline of milestones */
.about-timeline {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0 44px; /* breathing room between milestones (was edge-to-edge) */
margin-bottom: 80px;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
.about-milestone {
padding: 32px 28px 32px 0;
border-right: 1px solid var(--hairline);
position: relative;
}
.about-milestone:last-child { border-right: 0; padding-right: 0; }
.about-milestone:not(:first-child) { padding-left: 28px; }
.about-milestone__year {
font-family: var(--font-display); font-style: italic;
font-size: 32px; line-height: 1; letter-spacing: -0.02em;
color: var(--gold-bright);
font-variant-numeric: tabular-nums;
}
.about-milestone__h {
margin: 14px 0 10px;
font-family: var(--font-display); font-weight: 400;
font-size: 20px; line-height: 1.2; letter-spacing: -0.012em;
color: var(--fg);
}
.about-milestone__p {
margin: 0;
font-family: var(--font-sans); font-weight: 300;
font-size: 13px; line-height: 1.6;
color: var(--fg-muted);
}
@media (max-width: 960px) {
.about-timeline { grid-template-columns: 1fr 1fr; }
.about-milestone:nth-child(2n) { border-right: 0; }
.about-milestone:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
}
@media (max-width: 560px) {
.about-timeline { grid-template-columns: 1fr; }
.about-milestone { border-right: 0 !important; border-bottom: 1px solid var(--hairline); padding-left: 0 !important; padding-right: 0; }
.about-milestone:last-child { border-bottom: 0; }
}
/* === PRICING / QUOTE === */
.pricing { padding: 100px 0; }
.pricing-header {
display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
align-items: end; margin-bottom: 64px;
}
.pricing-grid {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.tier {
background: var(--bg-dark); border: 1px solid var(--bg-dark);
color: var(--fg-on-dark);
padding: 40px 32px;
display: flex; flex-direction: column; gap: 18px;
position: relative;
transition: all 400ms var(--ease-cinematic);
box-shadow: var(--shadow-3);
}
.tier h3, .tier .rate { color: var(--fg-on-dark); }
.tier p, .tier li { color: rgba(242,237,222,0.75); }
.tier .tier-tag { color: var(--gold); }
.tier ul li::before { color: var(--gold); }
.tier:hover { border-color: var(--gold); box-shadow: var(--shadow-3); transform: translateY(-4px); }
.tier.is-featured { background: var(--bg-elev); border-color: var(--hairline); color: var(--fg); box-shadow: 0 1px 1px rgba(20,17,15,0.02); }
.tier.is-featured h3, .tier.is-featured .rate { color: var(--fg); }
.tier.is-featured p { color: var(--fg-muted); }
.tier.is-featured li { color: var(--fg); }
.tier.is-featured .tier-tag { color: var(--gold-deep); }
.tier.is-featured ul li::before { color: var(--gold-deep); }
.tier.is-featured:hover { border-color: var(--gold); box-shadow: var(--shadow-2); }
.tier-tag {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep);
}
.tier h3 {
font-family: var(--font-display); font-weight: 400; font-size: 28px;
line-height: 1.1; letter-spacing: -0.015em; color: var(--fg); margin: 0;
}
.tier .rate {
font-family: var(--font-display); font-size: 56px; color: var(--fg);
letter-spacing: -0.02em; line-height: 1;
}
.tier .rate small { font-family: var(--font-sans); font-size: 12px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-subtle);
font-variant-numeric: tabular-nums; }
.tier p { font-family: var(--font-sans); font-weight: 300; font-size: 14px;
line-height: 1.6; color: var(--fg-muted); margin: 0; }
.tier ul { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 12px; }
.tier li { padding-left: 22px; position: relative;
font-family: var(--font-sans); font-size: 14px; color: var(--fg); }
.tier li::before { content: "+"; position: absolute; left: 0; top: -1px;
font-family: var(--font-display); font-style: italic; color: var(--gold-deep);
font-size: 18px; line-height: 1; }
.tier .btn { margin-top: auto; align-self: stretch; }
.tier-featured-badge {
position: absolute; top: -1px; left: -1px; right: -1px;
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.30em; text-transform: uppercase;
background: var(--gold-deep); color: #F0E4CC;
padding: 8px 0; text-align: center;
}
.tier.is-featured { padding-top: 56px; }
@media (max-width: 1000px) { .pricing-header { grid-template-columns: 1fr; }
.pricing-grid { grid-template-columns: 1fr; } }
/* === TESTIMONIALS === */
.testi { padding: 100px 0; background: var(--bg-alt); position: relative; }
.testi-header { text-align: center; margin-bottom: 56px; }
/* Google verified reviews badge — replaces the previous eyebrow + h2 */
.testi-google-badge {
display: inline-flex; align-items: center; gap: 18px;
padding: 16px 28px 16px 22px;
background: var(--bg-elev);
border: 1px solid var(--hairline-ink);
border-radius: 4px;
box-shadow: var(--shadow-1);
text-align: left;
}
.testi-google-mark { flex: 0 0 auto; }
.testi-google-text { display: flex; flex-direction: column; gap: 6px; }
.testi-google-name {
font-family: var(--font-display); font-weight: 400; font-size: 22px;
letter-spacing: -0.01em; color: var(--fg);
line-height: 1;
}
.testi-google-rating {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-sans); font-size: 13px; color: var(--fg-muted);
}
.testi-google-rating .t-tabular {
font-family: var(--font-display); font-size: 18px; color: var(--gold);
font-variant-numeric: tabular-nums; line-height: 1;
}
.testi-google-rating .stars {
color: var(--gold); font-size: 13px; letter-spacing: 0.08em;
}
.testi-google-count {
font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--fg-subtle);
}
.testi-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.testi-card {
background: var(--bg-elev); border: 1px solid var(--hairline);
padding: 24px 22px 22px;
display: flex; flex-direction: column; gap: 16px;
position: relative;
box-shadow: var(--shadow-1);
}
.testi-card .stars { color: var(--gold-deep); font-size: 11px; letter-spacing: 0.10em; }
.testi-card .quote {
font-family: var(--font-display); font-weight: 400; font-style: italic;
font-size: 15px; line-height: 1.5; color: var(--fg); margin: 0;
text-wrap: pretty;
}
.testi-card .quote::before { content: "“"; font-size: 38px; line-height: 0;
color: var(--gold-deep); margin-right: 2px; vertical-align: -14px; }
.testi-card .author {
display: flex; align-items: center; gap: 12px;
padding-top: 16px; border-top: 1px solid var(--hairline);
margin-top: auto;
}
.testi-card .avatar {
width: 36px; height: 36px; border-radius: 50%;
background: var(--bg-alt);
border: 1px solid var(--hairline-strong);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-style: italic;
color: var(--gold-deep); font-size: 13px;
flex: 0 0 auto;
}
.testi-card .name {
font-family: var(--font-sans); font-size: 12px; font-weight: 500;
letter-spacing: 0.02em; color: var(--fg);
}
.testi-card .role {
font-family: var(--font-sans); font-size: 9px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--fg-subtle); margin-top: 2px;
}
@media (max-width: 1100px) { .testi-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .testi-grid { grid-template-columns: 1fr; } }
/* === PRESS === */
.press { padding: 80px 0 100px; }
.press-rail {
display: grid; grid-template-columns: auto 1fr;
gap: 64px; align-items: center;
padding-top: 56px; border-top: 1px solid var(--hairline);
}
.press-rail .label {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep);
white-space: nowrap;
}
.press-logos {
display: flex; gap: 48px; flex-wrap: wrap; align-items: center;
}
.press-logo {
font-family: var(--font-display); font-weight: 400; font-size: 22px;
color: var(--fg-muted); letter-spacing: -0.005em;
transition: color 300ms;
white-space: nowrap;
}
.press-logo:hover { color: var(--gold-deep); }
.press-logo--serif-italic { font-style: italic; }
.press-logo--blocky { font-family: var(--font-sans); font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase; font-size: 15px; }
.press-logo--smallcaps { font-family: var(--font-display); letter-spacing: 0.20em;
text-transform: uppercase; font-size: 15px; }
@media (max-width: 800px) {
.press-rail { grid-template-columns: 1fr; gap: 24px; }
.press-logos { gap: 28px; }
}
/* ===== sections3.css ===== */
/* === CONTACT BAND === */
.contact {
padding: 100px 0 100px;
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}
.contact-inner {
background: var(--bg-elev);
border: 1px solid var(--hairline);
padding: 72px 56px;
display: grid; grid-template-columns: 1.4fr 1fr;
gap: 64px; align-items: center;
box-shadow: var(--shadow-2);
position: relative;
overflow: hidden;
}
.contact-inner::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-deep));
}
.contact-inner h3 {
font-family: var(--font-display); font-weight: 400; font-size: 28px;
line-height: 1.1; letter-spacing: -0.015em; color: var(--fg); margin: 0;
}
.contact-inner h3 em { font-style: italic; color: var(--gold-deep); }
.contact-inner .lede { margin-top: 18px; }
.contact-list { display: flex; flex-direction: column; gap: 28px; }
.contact-row { display: flex; flex-direction: column; gap: 4px; padding: 16px 0;
border-bottom: 1px solid var(--hairline); }
.contact-row:last-child { border-bottom: 0; }
.contact-row .k {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-subtle);
}
.contact-row .v {
font-family: var(--font-display); font-size: 22px; color: var(--fg);
letter-spacing: -0.005em; font-variant-numeric: tabular-nums;
}
.contact-row .v a { color: var(--fg); text-decoration: none; transition: color 200ms; }
.contact-row .v a:hover { color: var(--gold-deep); }
@media (max-width: 900px) {
.contact-inner { grid-template-columns: 1fr; gap: 32px; padding: 48px 24px; }
}
/* === Authorization form cards (Account Setup CC + Hotel CC) ===
Espresso panels matching the Why-Us inversion treatment — bronze edge,
bronze radial wash, warm ivory type. Reads as trusted documents. */
.contact-forms {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
margin-top: 56px;
}
.contact-form-card {
position: relative; overflow: hidden;
display: flex; flex-direction: column; gap: 14px;
padding: 36px 32px 30px;
color: var(--fg);
background:
radial-gradient(ellipse 480px 280px at 85% 0%, rgba(213,164,114,0.18), transparent 60%),
linear-gradient(160deg, var(--bg-deep), var(--bg-deeper));
border: 1px solid var(--hairline-ink-strong);
box-shadow: var(--shadow-2);
text-decoration: none;
transition: all 350ms var(--ease-cinematic);
}
.contact-form-card::before {
/* bronze edge that sweeps in on hover */
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-deep));
opacity: 0.5;
transition: opacity 350ms;
}
.contact-form-card:hover {
border-color: var(--gold);
transform: translateY(-4px);
box-shadow: var(--shadow-3),
0 24px 60px -18px rgba(213,164,114,0.30);
}
.contact-form-card:hover::before { opacity: 1; }
.contact-form-eyebrow {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-bright);
display: inline-flex; align-items: center; gap: 10px;
}
.contact-form-eyebrow::before {
content: ""; width: 24px; height: 1px;
background: var(--gold-bright);
}
.contact-form-title {
font-family: var(--font-display); font-weight: 400;
font-size: 26px; line-height: 1.15; letter-spacing: -0.015em;
color: var(--fg); margin: 0;
}
.contact-form-title em { font-style: italic; color: var(--gold-bright); }
.contact-form-body {
font-family: var(--font-sans); font-weight: 300;
font-size: 13px; line-height: 1.6; color: rgba(240,228,204,0.72);
margin: 0; max-width: 46ch;
}
.contact-form-cta {
margin-top: 8px;
padding-top: 18px;
border-top: 1px solid rgba(240,228,204,0.14);
font-family: var(--font-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-bright);
display: inline-flex; align-items: center; gap: 10px;
transition: gap 300ms, color 300ms;
}
.contact-form-card:hover .contact-form-cta { gap: 14px; color: #FFFFFF; }
.contact-form-icon {
position: absolute; top: 28px; right: 28px;
color: var(--gold-bright); opacity: 0.6;
transition: all 300ms;
}
.contact-form-card:hover .contact-form-icon { opacity: 1; transform: translate(2px, -2px); }
.contact-form-card:hover .contact-form-icon { opacity: 1; transform: translate(2px, -2px); }
@media (max-width: 900px) { .contact-forms { grid-template-columns: 1fr; } }
/* === FOOTER sparkles + 3D parallax tile === */
.footer {
background: var(--bg-deeper);
color: var(--fg-on-dark);
padding: 96px 0 32px;
position: relative;
overflow: hidden;
perspective: 1400px;
}
.footer-sparkles {
position: absolute; inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.footer-sparkles .spk {
position: absolute;
width: 2px; height: 2px;
background: var(--gold-bright);
border-radius: 50%;
box-shadow: 0 0 6px rgba(213,164,114,0.55), 0 0 14px rgba(213,164,114,0.30);
opacity: 0;
animation: spk-drift 6s linear infinite;
will-change: transform, opacity;
}
.footer-sparkles .spk--1 { background: #F0E4CC; width: 1.5px; height: 1.5px; }
.footer-sparkles .spk--2 { background: var(--gold); width: 2.5px; height: 2.5px; }
.footer-sparkles .spk--3 { width: 1px; height: 1px; box-shadow: 0 0 4px rgba(213,164,114,0.7); }
.footer-sparkles .spk--4 { background: #FFFFFF; width: 1px; height: 1px; opacity: 0.6;
box-shadow: 0 0 4px rgba(255,255,255,0.7); }
.footer-sparkles .spk--5 { background: var(--gold-deep); width: 2px; height: 2px; }
@keyframes spk-drift {
0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
10% { opacity: 1; }
50% { opacity: 0.85; transform: translate(-20px, -30px) scale(1.1); }
90% { opacity: 0.6; }
100% { opacity: 0; transform: translate(-40px, -60px) scale(0.5); }
}
.footer .container { display: flex; flex-direction: column; gap: 36px; position: relative; z-index: 2; }
.footer-brand {
position: relative;
transform: rotateX(var(--prx, 0deg)) rotateY(var(--pry, 0deg));
transform-style: preserve-3d;
transform-origin: center;
transition: transform 80ms linear;
will-change: transform;
}
.footer-top {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 56px;
padding-bottom: 0;
}
.footer-brand .logo-mark {
font-family: var(--font-display); font-weight: 400; font-size: 24px;
letter-spacing: 0.32em; color: var(--fg-on-dark); margin-bottom: 24px;
}
.footer-brand .strap {
font-family: var(--font-display); font-style: italic; font-size: 19px;
color: var(--gold); line-height: 1.4; max-width: 280px; margin-bottom: 28px;
}
.footer-brand .contact {
display: flex; flex-direction: column; gap: 8px;
background: none; padding: 0;
font-family: var(--font-sans); font-size: 13px; color: rgba(242,237,222,0.7);
}
.footer-brand .contact a { color: rgba(242,237,222,0.7); text-decoration: none; transition: color 200ms; }
.footer-brand .contact a:hover { color: var(--gold); }
.footer h4 {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
margin: 0 0 24px;
}
.footer ul { list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 12px; }
.footer a {
font-family: var(--font-sans); font-size: 13px;
color: rgba(242,237,222,0.7); text-decoration: none;
transition: color 200ms;
}
.footer a:hover { color: var(--gold); }
.footer-bottom {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.24em;
text-transform: uppercase; color: rgba(242,237,222,0.45);
gap: 24px; flex-wrap: wrap;
}
/* === Social channels === */
.footer-social {
display: flex; align-items: center; gap: 10px;
margin-top: 24px;
}
.footer-social a {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(242,237,222,0.18);
color: rgba(242,237,222,0.78);
background: transparent;
transition: all 240ms var(--ease-cinematic);
border-radius: var(--radius);
}
.footer-social a:hover {
color: var(--gold-bright);
border-color: var(--gold);
background: rgba(213,164,114,0.08);
transform: translateY(-2px);
}
.footer-social a svg { display: block; }
/* footer-bottom = the standout brand sign-off (centered, big) */
.footer-bottom {
flex-direction: column; align-items: center; text-align: center; gap: 0;
padding-top: 0;
}
.footer-bottom .footer-rule {
width: min(520px, 78%); height: 1px; margin: 0 auto 34px;
background: linear-gradient(90deg, transparent, rgba(217,174,116,0.55), transparent);
}
.footer-bmark {
font-family: var(--font-serif); font-weight: 400; text-transform: uppercase;
letter-spacing: 0.20em; font-size: clamp(34px, 5.5vw, 58px); line-height: 1.02;
color: var(--fg);
}
.footer-blogo {
display: block; width: clamp(140px, 16vw, 190px); height: auto;
filter: drop-shadow(0 14px 26px rgba(0,0,0,0.45));
}
/* C — section divider: full logo flanked by gold rules */
.fd-divider {
display: flex; align-items: center; justify-content: center; gap: 38px;
max-width: 920px; margin: 0 auto; padding: 30px 40px;
}
.fd-divider__rule { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(217,174,116,0.45), transparent); }
.fd-divider__logo { width: 104px; height: auto; flex: 0 0 auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35)); }
@media (max-width: 600px) { .fd-divider { gap: 18px; padding: 22px 20px; } .fd-divider__logo { width: 80px; } }
/* D — full logo at the top of the mobile menu (hidden on desktop) */
.nav-menu-logo, .links__logo { display: none; }
.nav-links.is-open .nav-menu-logo,
.nav.nav-open .links .links__logo {
display: block; width: 150px; height: auto; margin: 4px auto 20px;
filter: drop-shadow(0 8px 18px rgba(0,0,0,0.4));
}
.footer-bstrap {
font-family: var(--font-serif); font-style: italic; text-transform: none;
letter-spacing: normal; font-size: clamp(15px, 1.6vw, 19px);
color: rgba(236,213,173,0.80); margin-top: 14px;
}
.footer-bottom .footer-phone {
display: inline-block; margin-top: 30px;
font-family: var(--font-serif); font-size: clamp(22px, 2.6vw, 30px);
letter-spacing: 0.04em; color: var(--gold-bright); text-decoration: none;
transition: color .25s;
}
.footer-bottom .footer-phone:hover { color: #F5DDB6; }
.footer-info {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 10px 0; margin-top: 18px;
font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(242,237,222,0.55);
}
.footer-info > * { padding: 0 18px; position: relative; }
.footer-info > *:not(:last-child)::after {
content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
width: 3px; height: 3px; border-radius: 50%; background: rgba(217,174,116,0.55);
}
.footer-info a { color: rgba(242,237,222,0.72); text-decoration: none; transition: color .2s; }
.footer-info a:hover { color: var(--gold); }
.footer-bottom .footer-social { margin-top: 30px; gap: 12px; }
.footer-bottom .footer-social a { width: 40px; height: 40px; }
.footer-legalrow {
display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
width: 100%; margin-top: 38px; padding-top: 24px;
border-top: 1px solid rgba(242,237,222,0.10);
font-size: 10px; letter-spacing: 0.24em;
}
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 600px) { .footer-top { grid-template-columns: 1fr; } }
/* Contact figure — branded “CONTACT US” graphic filling the box as a
full-bleed background on a dark luxe ground. */
/* Contact figure — the “CONTACT US” artwork as a full-bleed background.
The box takes the artwork's own aspect ratio so the image covers it
entirely: no white, no margins, nothing cropped. */
.contact-figure {
width: 100%; aspect-ratio: 1304 / 963; margin-bottom: 32px;
border-radius: 4px; overflow: hidden;
border: 1px solid rgba(217,174,116,0.22);
background: transparent;
box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 18px 44px -26px rgba(0,0,0,0.30);
}
.contact-figure img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: saturate(1.02) contrast(1.02);
}
/* ===== sections4.css ===== */
/* === EVENTS — date-led compact calendar grid === */
.events { padding: 100px 0; position: relative; }
.events-header { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end;
margin-bottom: 56px; }
.events-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
border-top: 1px solid var(--hairline);
}
.event-card {
display: grid; grid-template-columns: 54px 1fr 14px;
gap: 18px; align-items: center;
padding: 20px 22px;
border-bottom: 1px solid var(--hairline);
border-right: 1px solid var(--hairline);
cursor: pointer;
transition: all 350ms var(--ease-cinematic);
}
.event-card:nth-child(3n) { border-right: 0; }
.event-card:hover { background: rgba(200,162,105,0.06); }
.event-card:hover .event-day { color: var(--gold); }
.event-card:hover .event-arrow { color: var(--gold); transform: translateX(4px); }
.event-card:hover .event-name { color: var(--gold); }
.event-date {
display: flex; flex-direction: column; align-items: center;
padding-right: 16px;
border-right: 1px solid var(--hairline);
line-height: 1;
}
.event-day {
font-family: var(--font-display); font-weight: 400;
font-size: 32px; letter-spacing: -0.02em;
color: var(--fg); font-variant-numeric: tabular-nums;
transition: color 300ms;
}
.event-mon {
font-family: var(--font-sans); font-size: 9px; font-weight: 600;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold);
margin-top: 5px;
}
.event-body-col { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.event-tag {
font-family: var(--font-sans); font-size: 9px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-subtle);
}
.event-name {
font-family: var(--font-display); font-weight: 400; font-size: 17px;
line-height: 1.2; letter-spacing: -0.005em; color: var(--fg); margin: 0;
transition: color 250ms;
}
.event-arrow {
font-family: var(--font-display); font-size: 16px; color: var(--fg-subtle);
transition: all 300ms;
}
/* CTA strip below the events grid */
.events-cta {
display: flex; justify-content: space-between; align-items: center; gap: 32px;
padding: 28px 22px;
background: var(--bg-deep);
color: var(--fg-on-dark);
margin-top: -1px;
position: relative;
}
.events-cta::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.events-cta-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.events-cta-step {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-bright);
}
.events-cta-line {
font-family: var(--font-display); font-style: italic; font-size: 16px;
color: var(--fg-on-dark); opacity: 0.85;
}
.events-cta-btn { flex: 0 0 auto; height: 52px; }
@media (max-width: 900px) {
.events-header { grid-template-columns: 1fr; gap: 24px; }
.events-grid { grid-template-columns: 1fr; }
.event-card { border-right: 0; }
.events-cta { flex-direction: column; align-items: stretch; text-align: center; }
.events-cta-btn { width: 100%; }
}
@media (min-width: 901px) and (max-width: 1100px) {
.events-grid { grid-template-columns: 1fr 1fr; }
.event-card:nth-child(3n) { border-right: 1px solid var(--hairline); }
.event-card:nth-child(2n) { border-right: 0; }
}
/* === ADVISORS === */
.advisors {
padding: 100px 0; position: relative;
background:
radial-gradient(ellipse 1100px 700px at 22% 28%, rgba(213,164,114,0.18), transparent 62%),
radial-gradient(ellipse 900px 600px at 80% 78%, rgba(213,164,114,0.12), transparent 60%),
radial-gradient(ellipse 600px 400px at 50% 50%, rgba(0,0,0,0.18), transparent 70%);
}
/* twinkling bronze flecks — same glitter language as the fleet cards */
.advisors::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(circle 1.5px at 12% 18%, rgba(235,189,160,0.55), transparent 70%),
radial-gradient(circle 1px at 28% 62%, rgba(213,164,114,0.45), transparent 70%),
radial-gradient(circle 1.5px at 46% 22%, rgba(235,189,160,0.40), transparent 70%),
radial-gradient(circle 1px at 64% 78%, rgba(213,164,114,0.50), transparent 70%),
radial-gradient(circle 1.5px at 82% 30%, rgba(235,189,160,0.50), transparent 70%),
radial-gradient(circle 1px at 92% 64%, rgba(213,164,114,0.40), transparent 70%),
radial-gradient(circle 1px at 38% 88%, rgba(235,189,160,0.45), transparent 70%),
radial-gradient(circle 1.5px at 72% 12%, rgba(213,164,114,0.45), transparent 70%);
background-size: 100% 100%;
opacity: 0.9;
animation: advisors-glitter 8s ease-in-out infinite;
}
@keyframes advisors-glitter {
0%, 100% { opacity: 0.6; }
50% { opacity: 1.0; }
}
@media (prefers-reduced-motion: reduce) {
.advisors::before { animation: none; opacity: 0.7; }
}
.advisors-inner {
display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
align-items: center;
position: relative; z-index: 2;
}
.advisors-copy .advisors-points {
margin: 32px 0;
display: flex; flex-direction: column; gap: 12px;
font-family: var(--font-sans); font-size: 14px; color: var(--fg);
}
.advisors-points > div { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: baseline; }
.advisors-points span { color: var(--gold); font-family: var(--font-display); font-size: 20px; line-height: 0.8; }
.advisors-actions { display: flex; gap: 14px; }
.advisors-members {
background: var(--bg-elev);
color: var(--fg-ink);
border: 1px solid var(--hairline-ink);
padding: 48px;
box-shadow: var(--shadow-2);
position: relative;
}
.advisors-members::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}
.advisors-members-label {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep);
margin-bottom: 24px;
}
.advisors-members-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px;
}
.advisors-member {
font-family: var(--font-display); font-size: 22px; color: var(--fg-ink);
letter-spacing: -0.01em; padding-bottom: 14px;
border-bottom: 1px solid var(--hairline-ink);
}
.advisors-quote {
margin-top: 32px;
font-family: var(--font-display); font-style: italic; font-size: 17px;
color: var(--gold-deep);
}
@media (max-width: 900px) {
.advisors-inner { grid-template-columns: 1fr; gap: 48px; }
.advisors-members { padding: 32px 24px; }
}
/* ===== moments.css ===== */
/* === MOMENTS — HD photo trio === */
.moments {
padding: 100px 0;
background: var(--bg);
position: relative;
}
.moments-header {
margin-bottom: 56px;
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: end;
}
.moments-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.moment { margin: 0; display: flex; flex-direction: column; gap: 18px;
transition: transform 600ms var(--ease-cinematic); }
.moment:nth-child(2) { transform: translateY(48px); }
.moment:nth-child(2):hover, .moment:hover { transform: translateY(-6px); }
.moment:nth-child(2):hover { transform: translateY(42px); }
.moment-frame {
aspect-ratio: 4 / 5;
overflow: hidden;
position: relative;
background: var(--bg-alt);
box-shadow: var(--shadow-2);
border: 1px solid var(--hairline);
}
.moment-frame img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 1200ms var(--ease-cinematic);
filter: saturate(0.95) contrast(1.02);
}
.moment-frame:hover img { transform: scale(1.04); }
.moment-frame::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, transparent 50%, rgba(20,17,15,0.45));
}
.moment-eyebrow {
position: absolute; top: 20px; left: 20px; z-index: 2;
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-bright);
padding: 6px 12px;
background: rgba(15,14,12,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(214,191,139,0.30);
}
.moment figcaption h3 {
font-family: var(--font-display); font-weight: 400; font-size: 22px;
line-height: 1.2; letter-spacing: -0.01em; color: var(--fg); margin: 0;
}
.moment figcaption h3 em { font-style: italic; color: var(--gold-deep); }
.moment figcaption p {
font-family: var(--font-sans); font-weight: 300; font-size: 14px; line-height: 1.55;
color: var(--fg-muted); margin: 8px 0 0;
}
@media (max-width: 900px) {
.moments-header { grid-template-columns: 1fr; gap: 24px; }
.moments-grid { grid-template-columns: 1fr; }
.moment:nth-child(2) { transform: none; }
.moment:nth-child(2):hover { transform: translateY(-6px); }
}
/* ===== dark-overrides.css ===== */
/* === Tobacco & Bronze overrides ===
Page is mid-toned tobacco leather. Cards elevate (slightly lighter tobacco).
Why Us / Footer go deeper to espresso. One precious metal: bronze.
*/
/* --- NAV — tobacco glass --- */
.nav {
background: rgba(31, 24, 18, 0.78);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
border-bottom: 1px solid var(--hairline-ink);
}
.nav-mark { color: var(--fg-ink); }
.nav-mark sup { color: var(--terra); }
.nav-link { color: var(--fg-ink); font-size: 10px; letter-spacing: 0.18em; }
.nav-link::after { background: var(--terra); }
.nav-link:hover, .nav-link.is-active { color: var(--terra); }
.nav-links { gap: 22px; }
.nav-lang-trigger { color: var(--fg-ink); border-color: var(--hairline-ink-strong); }
.nav-lang-trigger:hover { color: var(--terra); border-color: var(--terra); }
.nav-lang-trigger .globe,
.nav-lang-trigger .chev { color: var(--terra); }
.nav-lang-menu {
background: rgba(31,24,18,0.96);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
border-color: var(--hairline-ink-strong);
}
.nav-lang-item { color: var(--fg-ink); border-right-color: var(--hairline-ink); border-bottom-color: var(--hairline-ink); }
.nav-lang-item:hover { background: rgba(200,162,105,0.10); color: var(--terra); }
.nav-lang-item.is-active { color: var(--terra); }
.nav-login { color: var(--fg-ink); }
.nav-login:hover { color: var(--terra); }
/* Safety net: the booking widget must never carry a parallax transform.
depth5d's d5-plane was detaching the toggle + button from the fields card on
every #book embed page. Neutralize any residual transform (covers cached JS). */
.hbq--bar.d5-plane, .hbq__bar.d5-plane, #book .d5-plane { transform: none !important; }
/* ---- Services dropdown (desktop / React nav) ---- */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd::after { content: ''; position: absolute; top: 100%; left: -8px; right: -8px; height: 16px; } /* hover bridge */
.nav-dd-caret { font-size: 0.7em; margin-left: 5px; opacity: 0.85; transition: transform 0.2s ease; display: inline-block; }
.nav-dd:hover .nav-dd-caret, .nav-dd:focus-within .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-menu {
position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
min-width: 340px; display: flex; flex-direction: column; padding: 8px;
background: rgba(31, 24, 18, 0.97);
-webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
border: 1px solid var(--hairline-ink-strong, rgba(236, 213, 173, 0.22)); border-radius: 12px;
box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease; z-index: 120;
}
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu {
opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dd-item { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 8px; transition: background 0.15s ease; }
.nav-dd-item:hover { background: rgba(200, 162, 105, 0.10); }
.nav-dd-item__label { font-family: var(--font-sans, sans-serif); font-size: 13px; letter-spacing: 0.04em; color: var(--fg-ink, #F3E7D2); text-transform: none; }
.nav-dd-item:hover .nav-dd-item__label { color: var(--terra); }
.nav-dd-item__desc { font-size: 11.5px; color: var(--bone-40, #D8CBB2); letter-spacing: 0; line-height: 1.4; text-transform: none; }
@media (max-width: 1280px) { .nav-links { gap: 18px; } }
@media (max-width: 1200px) { .nav-login { display: none; } .nav-links { gap: 16px; } }
@media (max-width: 1080px) { .nav-link { font-size: 10px; letter-spacing: 0.14em; } .nav-links { gap: 14px; } }
@media (max-width: 940px) { .nav-lang { display: none; } }
/* --- HERO — bronze + espresso wash over tobacco --- */
.hero { color: var(--fg); }
.hero-bg {
/* Photograph removed — warm bronze + espresso wash over the camel ground. */
background:
radial-gradient(ellipse 900px 600px at 78% 28%, rgba(213,164,114,0.18), transparent 60%),
radial-gradient(ellipse 700px 500px at 12% 80%, rgba(0,0,0,0.22), transparent 60%),
linear-gradient(180deg, rgba(58,44,34,0.34) 0%, transparent 45%, rgba(58,44,34,0.30) 100%),
var(--bg);
}
.hero-bg::after { display: none; }
.hero-rating { color: var(--fg-ink-muted); }
.hero-rating .stars { color: var(--terra); }
.hero-title { color: var(--fg-ink); }
.hero-title em { color: var(--terra); font-style: italic; }
.hero-lede { color: var(--fg-ink-muted); }
.hero-stats { border-top-color: var(--hairline-ink); }
.hero-stat .k { color: var(--fg-ink-subtle); }
.hero-stat .v { color: var(--fg-ink); }
.hero-stat .v small { color: var(--fg-ink-subtle); }
.hero-chip {
background: rgba(31,24,18,0.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-color: var(--hairline-ink-strong);
color: var(--fg);
}
.hero-chip .lbl { color: var(--terra); }
.hero-chip .val { color: var(--fg-ink); }
.hero .btn--gold,
.hero .btn--primary {
background: var(--terra); color: #2A1B0E; border-color: var(--terra);
box-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 14px 30px -10px rgba(213,164,114,0.45);
}
.hero .btn--gold:hover,
.hero .btn--primary:hover { background: var(--terra); border-color: var(--terra); }
.hero .btn--ghost { border-color: var(--hairline-ink-strong); color: var(--fg-ink); }
.hero .btn--ghost:hover { border-color: var(--terra); color: var(--terra); }
.hero-booking-card { box-shadow: var(--shadow-3); }
.hero-booking-card::before { background: linear-gradient(90deg, var(--terra), var(--brass-bright), var(--sage)); }
.hb-cta { background: var(--terra); }
.hb-cta:hover { background: var(--terra-deep); }
.hb-field:focus-within, .hb-field:hover { background: rgba(200,162,105,0.06); }
.hero-trustline { color: var(--fg-ink-subtle); }
.hero-trustline span:first-child { color: var(--terra); }
/* --- GENERAL section text on cream --- */
.services-header h2, .fleet-header h2, .moments-header h2,
.cities-header h2, .pricing-header h2, .testi-header h2,
.events-header h2, .faq-header h2, .advisors-copy h2,
.h-section, .h-display { color: var(--fg-ink); }
.services-header h2 em, .fleet-header h2 em, .moments-header h2 em,
.cities-header h2 em, .pricing-header h2 em, .testi-header h2 em,
.events-header h2 em, .faq-header h2 em, .advisors-copy h2 em,
.h-section em, .h-display em { color: var(--terra); font-style: italic; }
.services-header .lede, .fleet-header .lede, .moments-header .lede,
.cities-header .lede, .pricing-header .lede, .testi-header .lede,
.events-header .lede, .faq-header .lede, .advisors-copy .lede,
.lede { color: var(--fg); }
.eyebrow { color: var(--brass); }
.eyebrow::before { background: var(--brass); }
/* --- BUTTONS site-wide reflavor --- */
.btn--primary { background: var(--terra); color: #2A1B0E; border-color: var(--terra); }
.btn--primary:hover { background: var(--terra); border-color: var(--terra); }
.btn--gold { background: var(--terra); color: #2A1B0E; border-color: var(--terra); }
.btn--gold:hover { background: var(--terra); border-color: var(--terra); }
.btn--ghost { border-color: var(--hairline-ink-strong); color: var(--fg); }
.btn--ghost:hover { border-color: var(--terra); color: var(--terra); }
.btn--solid { background: var(--brass); color: #2A1B0E; border-color: var(--brass); }
.btn--solid:hover { background: var(--brass); border-color: var(--brass); }
.btn--ink { background: var(--bg-deep); color: var(--fg); border-color: var(--bg-deep); }
.btn--ink:hover { background: var(--bg-deep); border-color: var(--terra); color: var(--fg); }
/* --- SERVICES — uniform cream cards, single champagne edge on hover.
Restraint over variety. No per-card tinting. --- */
.service-card { border-color: var(--hairline-ink); background: var(--bg-elev); position: relative; }
.service-card::before { background: linear-gradient(90deg, transparent, var(--terra), transparent); }
.service-card:hover { border-color: var(--terra); box-shadow: var(--shadow-3); }
.service-card:hover::before { transform: translateX(0); }
.service-card:hover .service-link { color: var(--terra); }
.service-tag { color: var(--terra); }
.service-title em { color: var(--terra); font-style: italic; }
/* --- FLEET stage --- */
.fleet { background: transparent; }
.fleet-tab--idx.is-active { background: var(--terra); color: #2A1B0E; border-color: var(--terra); border-radius: 6px; padding: 8px 13px 9px; }
.fleet-tab--idx:hover { color: var(--terra); border-color: var(--terra); }
.fleet-tab--card.is-active .fleet-tab__count,
.fleet-tab--card.is-active .fleet-tab__label,
.fleet-tab--card.is-active .fleet-tab__icon { color: var(--terra-bright); }
.fleet-stage { color: var(--fg-ink); }
.fleet-stage::before { background: linear-gradient(90deg, var(--terra), var(--brass-bright), var(--sage)); }
.fleet-detail h3 em, .fleet-detail .class-tag { color: var(--terra); }
/* --- EVENTS — terra gold on cream --- */
.event-tag { color: var(--terra); }
.event-num { color: var(--brass); }
.event-card:hover { background: rgba(200,162,105,0.05); }
.event-card:hover .event-num, .event-card:hover .event-arrow { color: var(--terra); }
.event-card { border-color: var(--hairline-ink); }
/* --- MOMENTS — cream page, photo cards float on top --- */
.moments { background: transparent; }
.moment figcaption h3 { color: var(--fg-ink); }
.moment figcaption h3 em { color: var(--terra); }
.moment figcaption p { color: var(--fg-ink-muted); }
.moment-frame { border-color: var(--hairline-ink); }
.moment-eyebrow { color: var(--brass-bright); background: rgba(15,14,12,0.55); border-color: rgba(200,162,105,0.30); }
/* --- CITIES — white "light intermission" surface (dark-on-white) --- */
.cities-map { background: #FFFFFF; border-color: rgba(110,70,28,0.14); }
.cities-map .land { fill: #8C6E3D; opacity: 0.55; }
.cities-map .graticule line { stroke: #2B1C0E; opacity: 0.05; }
.cities-map .label { fill: #6E5132; }
.cities-map .label.hq { fill: #8A5A1E; }
.cities-map .pin, .cities-map .pin-ring { fill: #8A5A1E; stroke: #8A5A1E; }
.cities-map .route { stroke: #8A5A1E; opacity: 0.35; }
.cities-map .world-clock { background: linear-gradient(180deg, rgba(110,70,28,0.05), transparent); border-bottom-color: rgba(110,70,28,0.16); }
.cities-map .world-clock-label { color: #8A5A1E; border-right-color: rgba(110,70,28,0.12); }
.cities-map .wc-cell { border-right-color: rgba(110,70,28,0.12); }
.cities-map .wc-cell:hover { background: rgba(138,90,30,0.06); }
.cities-map .wc-time { color: #2B1C0E; }
.cities-map .wc-cell.is-hq .wc-time { color: #8A5A1E; }
.cities-map .wc-cell.is-night .wc-time { color: #6E5132; }
.cities-map .wc-city { color: #6E5132; }
.cities-map .wc-code { color: #8A6B45; }
.cities-map .wc-cell.is-hq .wc-code { color: #8A5A1E; }
.cities-map .wc-offset { color: #8A6B45; }
.cities-map-legend { color: #6E5132; background: rgba(255,255,255,0.9); border-color: rgba(110,70,28,0.14); }
.cities-map-legend .dot { background: #8A5A1E; }
.cities-map-legend .dot--out { background: #B89B6A; }
.cities-map-legend .dot--out.is-night { background: transparent; border-color: #8A6B45; }
.cities-ledger { background: #FFFFFF; border-color: rgba(110,70,28,0.14); color: #2B1C0E; }
.cities-col { border-right-color: rgba(110,70,28,0.14); }
.cities-col h4 { color: #8A5A1E; }
.cities-col li { color: #2B1C0E; }
.cities-col li .code { color: #8A6B45; }
.cities-col li.is-hq { color: #8A5A1E; }
.atlas-city:hover, .city:hover { background: rgba(138,90,30,0.05); }
/* --- WHY US — espresso inversion with bronze wash --- */
.why {
background:
radial-gradient(ellipse 1100px 700px at 80% 25%, rgba(213,164,114,0.18), transparent 60%),
radial-gradient(ellipse 800px 500px at 18% 80%, rgba(139,123,98,0.10), transparent 60%),
var(--bg-deep);
color: var(--fg-on-dark);
}
.why::before { display: none; }
.why .eyebrow { color: var(--brass-bright); }
.why .eyebrow::before { background: var(--brass-bright); }
.why h2 { color: var(--fg-on-dark); }
.why h2 em { color: var(--brass-bright); font-style: italic; }
.why .lede, .why-item p { color: rgba(244,239,230,0.65); }
.why-grid {
background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
border: 0;
}
.why-item { border-color: rgba(244,239,230,0.16); }
.why-item h4 { color: var(--fg-on-dark); }
.why-item .num { color: var(--brass-bright); }
.why-item .num small { color: var(--brass-bright); }
/* --- ADVISORS --- */
.advisors-members {
background:
radial-gradient(ellipse 320px 180px at 50% 0%, rgba(213,164,114,0.18), transparent 70%),
linear-gradient(165deg, rgba(240,228,204,0.05), rgba(240,228,204,0.01)),
var(--bg-elev);
color: var(--fg-ink); border-color: var(--hairline-ink);
box-shadow:
var(--shadow-3),
inset 0 1px 0 rgba(213,164,114,0.18),
inset 0 -1px 0 rgba(0,0,0,0.25);
position: relative;
overflow: hidden;
}
/* same specular sheen as the fleet tab cards — follows a fixed offset since this card doesn't tilt */
.advisors-members::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(circle 280px at 70% 25%, rgba(213,164,114,0.18), transparent 60%);
opacity: 0.9;
}
.advisors-members::before {
background: linear-gradient(90deg, transparent, var(--terra), transparent);
z-index: 3;
}
.advisors-members-label,
.advisors-members-grid,
.advisors-quote { position: relative; z-index: 2; }
.advisors-members-label { color: var(--terra); }
.advisors-member { color: var(--fg-ink); border-bottom-color: var(--hairline-ink); }
.advisors-quote { color: var(--terra); }
.advisors-points span { color: var(--terra); }
/* === Light intermission sections =================================
Three sections (Pricing, Testimonials, FAQ) flip to a warm cream
surface so the page reads dark → light → dark → light, like a
bound magazine. Type and accents repaint accordingly.
*/
:root {
--bg-cream: #FFFFFF; /* warm cream — page surface */
--bg-cream-card: #FFFFFF; /* lighter cream — cards */
--bg-cream-alt: #FFFFFF; /* deeper cream — sub-bands */
--ink-cream: #2A1F17; /* dark tobacco type on cream */
--ink-cream-muted:#6B5C45;
--ink-cream-subtle:#9C8B6E;
--hairline-cream: rgba(42,31,23,0.10);
--hairline-cream-strong: rgba(42,31,23,0.20);
}
/* --- PRICING — cream gallery --- */
.pricing {
background:
radial-gradient(ellipse 1100px 600px at 80% 10%, rgba(213,164,114,0.18), transparent 60%),
var(--bg-cream);
color: var(--ink-cream);
}
.pricing .h-section, .pricing .pricing-header h2 { color: var(--ink-cream); }
.pricing .h-section em, .pricing .pricing-header h2 em { color: var(--terra-deep); }
.pricing .lede { color: var(--ink-cream-muted); }
.pricing .eyebrow { color: var(--terra-deep); }
.pricing .eyebrow::before { background: var(--terra-deep); }
.tier { background: var(--bg-cream-card); color: var(--ink-cream); border-color: var(--hairline-cream); }
.tier:hover { border-color: var(--terra); }
.tier h3 { color: var(--ink-cream); }
.tier p { color: var(--ink-cream-muted); }
.tier li { color: var(--ink-cream); }
.tier { background: var(--bg-deep); color: var(--fg-on-dark); border-color: var(--bg-deep); }
.tier h3 { color: var(--fg-on-dark); }
.tier p, .tier li { color: rgba(240,228,204,0.78); }
.tier-tag { color: var(--brass-bright); }
.tier li::before { color: var(--brass-bright); }
.tier.is-featured { background: var(--bg-elev); color: var(--fg-ink); border-color: var(--hairline-ink); }
.tier.is-featured h3 { color: var(--fg-ink); }
.tier.is-featured p, .tier.is-featured li { color: var(--fg-ink-muted); }
.tier.is-featured .tier-tag { color: var(--terra-deep); }
.tier.is-featured li::before { color: var(--terra-deep); }
.tier-featured-badge { background: var(--terra); color: #2A1B0E; }
/* --- TESTIMONIALS — cream press-room --- */
.testi { background: var(--bg-cream-alt); }
.testi-google-badge { background: var(--bg-cream-card); border-color: var(--hairline-cream); }
.testi-google-name { color: var(--ink-cream); }
.testi-google-rating { color: var(--ink-cream-muted); }
.testi-google-rating .stars { color: var(--terra-deep); }
.testi-google-rating .t-tabular { color: var(--terra-deep); }
.testi-google-count { color: var(--ink-cream-subtle); }
.testi-card { background: var(--bg-deep); color: var(--fg-on-dark); border-color: var(--bg-deep); }
.testi-card .quote { color: var(--fg-on-dark); }
.testi-card .quote::before { color: var(--brass-bright); }
.testi-card .stars { color: var(--brass-bright); }
.testi-card .author { border-top-color: rgba(240,228,204,0.15); }
.testi-card .avatar { background: rgba(240,228,204,0.08); border-color: rgba(240,228,204,0.18); color: var(--brass-bright); }
.testi-card .name { color: var(--fg-on-dark); }
.testi-card .role { color: rgba(240,228,204,0.6); }
/* --- FAQ — cream reading room --- */
.faq { background: var(--bg-cream); color: var(--ink-cream); }
.faq .h-section, .faq h2 { color: var(--ink-cream); }
.faq .h-section em, .faq h2 em { color: var(--terra-deep); }
.faq .lede { color: var(--ink-cream-muted); }
.faq .eyebrow { color: var(--terra-deep); }
.faq .eyebrow::before { background: var(--terra-deep); }
.faq-list, .faq-item { border-color: var(--hairline-cream); }
.faq-item:hover { background: rgba(213,164,114,0.08); }
.faq-no { color: var(--terra-deep); }
.faq-q-text { color: var(--ink-cream); }
.faq-toggle { color: var(--terra-deep); }
.faq-a p { color: var(--ink-cream-muted); }
/* --- PRESS — sits between Testimonials and contact; tighten to cream too --- */
.press { background: var(--bg-cream-alt); }
.press-rail { border-top-color: var(--hairline-cream); }
.press-rail .label { color: var(--terra-deep); }
.press-logo { color: var(--ink-cream-muted); }
.press-logo:hover { color: var(--terra-deep); }
/* (light-section overrides above already cover .pricing — old dark rules retired) */
/* (light-section overrides at top of file already cover .testi / .press / .faq) */
/* --- CONTACT --- */
.contact { background: transparent; }
.contact-inner { background: var(--bg-elev); color: var(--fg-ink); border-color: var(--hairline-ink); }
.contact-inner::before { background: linear-gradient(90deg, var(--terra), var(--brass-bright), var(--sage)); }
.contact-inner h3 { color: var(--fg-ink); }
.contact-inner h3 em { color: var(--terra); }
.contact-inner .lede { color: var(--fg-ink-muted); }
.contact-row { border-bottom-color: var(--hairline-ink); }
.contact-row .k { color: var(--fg-ink-subtle); }
.contact-row .v, .contact-row .v a { color: var(--fg-ink); }
.contact-row .v a:hover { color: var(--terra); }
.contact-inner .btn--ghost { border-color: var(--hairline-ink-strong); color: var(--fg-ink); }
.contact-inner .btn--ghost:hover { border-color: var(--terra); color: var(--terra); }
/* --- FOOTER --- deep espresso ground, white type, bronze accents --- */
.footer { background: var(--bg-deeper); position: relative; }
.footer::before {
/* faint bronze hairline at the top edge — stitched seam, not stage drop */
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: 0.4;
z-index: 1;
}
.footer-brand .logo-mark { color: #FFFFFF; }
.footer-brand .strap { color: var(--brass-bright); }
.footer-brand .contact span,
.footer-brand .contact a { color: #FFFFFF; }
.footer-brand .contact .muted {
color: rgba(255,255,255,0.5);
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.footer-brand .contact a:hover { color: var(--brass-bright); }
.footer h4 { color: var(--brass-bright); }
.footer a { color: rgba(255,255,255,0.85); }
.footer a:hover { color: var(--brass-bright); }
.footer-top { border-bottom-color: rgba(255,255,255,0.14); }
.footer-bottom { color: rgba(255,255,255,0.55); }
.footer-social a { border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.85); }
.footer-social a:hover { color: var(--gold-bright); border-color: var(--gold); background: rgba(213,164,114,0.08); }
/* =========================================================================
HOMEPAGE ALTERNATING BROWN / WHITE RHYTHM
White sections re-declare the colour tokens so every descendant that reads
var(--fg)/--gold/--hairline/--bg-* flips to ink-on-white automatically.
Brown sections re-declare the cream tokens back to light-on-brown so the
bespoke "cream intermission" rules render dark/brown instead.
Order after hero: services(W) events(B) moments(W) cities(B) why(W)
advisors(B) pricing(W) testimonials(B) press(W) faq(B) contact(W).
========================================================================= */
.services, .moments, .why, .pricing, .press {
background: #FFFFFF !important;
--bg: #FFFFFF; --bg-card: #FFFFFF; --bg-elev: #F7F4EE; --bg-alt: #F1ECE3;
--fg: #2B1C0E; --fg-ink: #2B1C0E;
--fg-muted: #6E5132; --fg-subtle: #8A6B45; --fg-faint: #9A7C55;
--fg-ink-muted: #6E5132; --fg-ink-subtle: #8A6B45;
--gold: #8A5A1E; --gold-bright: #A56A22; --gold-deep: #6E4416;
--terra: #8A5A1E; --terra-bright: #A56A22; --terra-deep: #6E4416; --brass: #8A5A1E;
--hairline: rgba(110,70,28,0.16); --hairline-strong: rgba(110,70,28,0.30);
--hairline-ink: rgba(110,70,28,0.16); --hairline-ink-strong: rgba(110,70,28,0.30);
--ink-cream: #2B1C0E; --ink-cream-muted: #6E5132; --ink-cream-subtle: #8A6B45;
--bg-cream: #FFFFFF; --bg-cream-card: #FFFFFF; --bg-cream-alt: #FFFFFF;
--hairline-cream: rgba(110,70,28,0.16); --hairline-cream-strong: rgba(110,70,28,0.22);
}
.events, .cities, .advisors, .testi, .faq {
background: transparent !important;
--bg-cream: transparent; --bg-cream-card: rgba(250,241,221,0.04); --bg-cream-alt: transparent;
--ink-cream: #FFFFFF; --ink-cream-muted: #F4EFE6; --ink-cream-subtle: #E6DCCB;
--hairline-cream: rgba(250,241,221,0.14); --hairline-cream-strong: rgba(250,241,221,0.26);
--terra-deep: #D9AE74;
}
/* Keep the testimonials Google badge readable as a faint card on brown */
.testi .testi-google-badge { background: rgba(250,241,221,0.05) !important; border-color: rgba(250,241,221,0.16) !important; }
/* --- White-section text fixes: keep dark inversion cards (tiers, espresso
contact cards) intact, flip hardcoded-cream copy to ink. --- */
.services h2, .moments h2, .why h2, .pricing h2, .press h2, .contact h3,
.services .h-section, .moments .h-section, .why .h-section,
.pricing .h-section, .contact .h-section,
.why-item h4, .moment figcaption h3 { color: #2B1C0E !important; }
.services h2 em, .moments h2 em, .why h2 em, .pricing h2 em, .contact h3 em,
.services .h-section em, .why .h-section em, .pricing .h-section em,
.contact .h-section em { color: #8A5A1E !important; }
.why .lede, .why-item p, .moments .moment figcaption p,
.contact .lede, .services .lede, .pricing .lede, .press .lede { color: #6E5132 !important; }
.why-item .num, .why-item .num small { color: #8A5A1E !important; }
/* =========================================================================
BOX / GROUND CONTRAST
Brown-ground sections get WHITE boxes; white-ground sections get BROWN
boxes. Pricing tiers + Contact cards are already dark-on-white (the
"opposite"); here we flip Events + Testimonials cards to white and the
Services cards to espresso.
========================================================================= */
/* Events (brown ground) -> white cards */
.event-card {
background: #FFFFFF !important;
border-color: rgba(110,70,28,0.16) !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 18px 40px -22px rgba(0,0,0,0.22) !important;
}
.event-card:hover { background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 26px 54px -22px rgba(0,0,0,0.30) !important; }
.event-card .event-name { color: #2B1C0E !important; }
.event-card .event-day { color: #2B1C0E !important; }
.event-card .event-mon, .event-card .event-tag, .event-card .event-arrow { color: #8A5A1E !important; }
.event-card:hover .event-num, .event-card:hover .event-arrow { color: #6E4416 !important; }
/* Testimonials (brown ground) -> white cards */
.testi-card {
background: #FFFFFF !important;
border-color: rgba(110,70,28,0.16) !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 18px 40px -22px rgba(0,0,0,0.22) !important;
}
.testi-card .quote, .testi-card .name { color: #2B1C0E !important; }
.testi-card .quote::before, .testi-card .stars { color: #8A5A1E !important; }
.testi-card .role { color: #8A6B45 !important; }
.testi-card .author { border-top-color: rgba(110,70,28,0.16) !important; }
.testi-card .avatar { background: rgba(110,70,28,0.08) !important; border-color: rgba(110,70,28,0.18) !important; color: #8A5A1E !important; }
/* Services (white ground) -> espresso/brown cards (the opposite) */
.service-card { background: #4D3826 !important; border-color: rgba(250,241,221,0.12) !important; }
.service-card .service-title { color: #FFFFFF !important; }
.service-card .service-title em { color: #D9AE74 !important; }
.service-card .service-body { color: #F4EFE6 !important; }
.service-card .service-tag, .service-card .service-link { color: #D9AE74 !important; }
.service-card:hover { border-color: var(--terra) !important; }
.service-card:hover .service-link { color: #ECC58F !important; }
/* =========================================================================
CONTACT — brown section ground, white content boxes
========================================================================= */
.contact-inner, .contact-form-card {
background: #FFFFFF !important;
border: 1px solid rgba(110,70,28,0.14) !important;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 24px 60px -28px rgba(0,0,0,0.30) !important;
--fg:#2B1C0E; --fg-ink:#2B1C0E; --fg-on-dark:#2B1C0E; --fg-muted:#6E5132; --fg-subtle:#8A6B45;
--gold:#8A5A1E; --gold-deep:#6E4416; --gold-bright:#A56A22; --terra:#8A5A1E; --terra-deep:#6E4416; --brass:#8A5A1E;
--hairline:rgba(110,70,28,0.14); --hairline-strong:rgba(110,70,28,0.24); --hairline-ink:rgba(110,70,28,0.14);
--ink-cream:#2B1C0E; --ink-cream-muted:#6E5132; --ink-cream-subtle:#8A6B45;
}
.contact-inner { padding: 44px 48px !important; }
.contact-form-card .contact-form-eyebrow,
.contact-form-card .contact-form-cta,
.contact-form-card .contact-form-icon { color: #8A5A1E !important; }
.contact-form-card .contact-form-title { color: #2B1C0E !important; }
.contact-form-card .contact-form-title em { color: #8A5A1E !important; }
.contact-form-card .contact-form-body { color: #6E5132 !important; }
.contact-row .k { color: #8A6B45 !important; }
.contact-row .v, .contact-row .v a { color: #2B1C0E !important; }
.contact-row { border-color: rgba(110,70,28,0.14) !important; }
/* === Unified gold borders on content boxes (site-wide) === */
.why-item, .event-card, .faq-item, .testi-card, .service-card, .lux-card,
.sp-card, .sp-included-item, .contact-form-card,
.about-story__aside-card, .fd-gallery__item, .hero-chip, .industry-card,
.corp-card, .pricing-card, .moment {
border: 1px solid rgba(217, 174, 116, 0.34) !important;
}
/* trust-strip stats stay borderless — clean figures with hairline separators only */
.trust-item { border: 0 !important; }
/* === Nav links — bigger, gold-bordered pills, more spacing === */
.nav-link, .nav-dd-trigger {
font-size: 12px !important;
letter-spacing: .1em !important;
padding: 9px 16px !important;
border: 1px solid rgba(217,174,116,.34) !important;
border-radius: 999px !important;
transition: border-color .18s, background .18s, color .18s !important;
}
.nav-link::after { display: none !important; }
.nav-link:hover, .nav-link.is-active, .nav-dd-trigger:hover, .nav-dd:focus-within .nav-dd-trigger {
border-color: var(--gold, #D9AE74) !important;
background: rgba(217,174,116,.12) !important;
color: var(--gold-bright, #E6C99A) !important;
}
.nav-links { gap: 13px !important; }
/* drawer action links stay borderless */
.nav-links-actions .nav-link { border: 0 !important; border-radius: 0 !important; padding: 12px 4px !important; background: none !important; }
/* Static-page nav + Air Concierge/Bespoke nav — match the gold pill style */
.nav .links > a, .ac-nav__links > .ac-nav__link {
font-size: 12px !important; letter-spacing: .1em !important;
padding: 9px 16px !important;
border: 1px solid rgba(217,174,116,.34) !important; border-radius: 999px !important;
transition: border-color .18s, background .18s, color .18s !important;
}
.nav .links > a::after, .ac-nav__link::after { display: none !important; }
.nav .links > a:hover, .nav .links > a.is-active,
.ac-nav__links > .ac-nav__link:hover, .ac-nav__links > .ac-nav__link.is-active {
border-color: var(--gold, #D9AE74) !important; background: rgba(217,174,116,.12) !important; color: var(--gold-bright, #E6C99A) !important;
}
.nav .links, .ac-nav__links { gap: 13px !important; }
/* ===== faq.css ===== */
/* === FAQ — tightened, no jittery hover-shifts ===
Clean compact ledger. Each row uses the same padding open or closed;
no horizontal shifts on hover (those caused content to jump). The
answer paragraph indents once to align with the question text, no
double-indent. */
.faq { padding: 100px 0; position: relative; }
.faq-header {
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: end; margin-bottom: 56px;
}
.faq-list {
display: flex; flex-direction: column;
border-top: 1px solid var(--hairline);
}
.faq-item {
border-bottom: 1px solid var(--hairline);
transition: background 240ms ease;
}
.faq-item:hover { background: rgba(200,162,105,0.04); }
.faq-q {
width: 100%;
background: transparent; border: 0;
display: grid; grid-template-columns: 48px 1fr 24px;
align-items: baseline; gap: 18px;
padding: 22px 0;
cursor: pointer;
text-align: left;
}
.faq-no {
font-family: var(--font-display); font-style: italic; font-size: 18px;
color: var(--terra-deep); font-variant-numeric: oldstyle-nums;
opacity: 0.85;
}
.faq-q-text {
font-family: var(--font-display); font-weight: 400; font-size: 20px;
line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-cream, #2A1F17);
text-wrap: balance;
}
.faq-toggle {
font-family: var(--font-display); font-size: 22px; color: var(--terra-deep);
line-height: 1; text-align: right;
transition: transform 280ms var(--ease-cinematic);
}
.faq-item.is-open .faq-toggle { transform: rotate(180deg); }
.faq-a {
max-height: 0; overflow: hidden;
transition: max-height 420ms var(--ease-cinematic);
}
.faq-item.is-open .faq-a { max-height: 600px; }
.faq-a p {
margin: 0;
padding: 0 0 22px 66px; /* aligns with .faq-q-text — 48px col + 18px gap */
font-family: var(--font-sans); font-weight: 300; font-size: 14px;
line-height: 1.7; color: var(--ink-cream-muted, #6B5C45);
max-width: 72ch;
}
@media (max-width: 900px) {
.faq { padding: 96px 0 80px; }
.faq-header { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
.faq-q { grid-template-columns: 32px 1fr 20px; gap: 12px; padding: 18px 0; }
.faq-q-text { font-size: 16px; }
.faq-no { font-size: 15px; }
.faq-toggle { font-size: 18px; }
.faq-a p { padding: 0 0 18px 44px; font-size: 13px; }
}
/* ===== 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;
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);
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);
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 {
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 {
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;
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 {
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