/* ================================================================
   ZYNNCO — CINEMATIC EDITION (PREMIUM DARK)
   Theme: deep warm near-black + forest green + warm gold accent
   Editorial dark mode — re-skinned from the cream original.
   ================================================================ */

:root {
  /* Dark-theme surfaces (new) */
  --bg:           #0E100E;   /* page — deep warm near-black */
  --bg-alt:       #161814;   /* alternating sections */
  --surface:      #1C1F1C;   /* cards / panels */
  --footer-bg:    #050605;   /* pure-black footer */

  /* Legacy variable names remapped for the dark skin.
     --cream / --ink stay LIGHT (used as text on dark sections);
     --paper / --cream-2 become dark surfaces (used as backgrounds). */
  --cream:        #EDEAE3;   /* warm off-white text (never pure white) */
  --cream-2:      #161814;   /* dark alt surface */
  --paper:        #1C1F1C;   /* card surface */
  --ink:          #F4F1EA;   /* brightest heading text (warm, not pure white) */
  --ink-soft:     #C9C5BD;
  --text:         #EDEAE3;   /* body text */
  --text-soft:    #B6B2AA;
  --text-mute:    #9A9690;   /* muted */
  --rule:         #2A2D29;   /* hairlines */
  --rule-soft:    #23261F;
  --forest:       #3D6447;   /* brightened for dark-bg legibility */
  --forest-dark:  #1F3424;
  --gold:         #D4A85C;   /* brightened for dark-bg legibility */
  --gold-soft:    #E0BC78;
  --success:      #5C8A4A;

  --serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow:    0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 40px 90px rgba(0, 0, 0, 0.65);

  --pad-x: clamp(18px, 4vw, 56px);
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Reusable warm depth gradients (forest 4% + gold 3%) */
  --depth-grad:
    radial-gradient(circle at 18% 12%, rgba(61, 100, 71, 0.10) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(212, 168, 92, 0.07) 0%, transparent 50%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Lenis sets this; guarded so native smooth-scroll still works without it */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
/* Subtle definition for photographic content on the dark canvas */
.split-media img,
.blog-thumb img,
.fleet-visual,
.fc-media,
.article-hero-img,
.hero-media { border: 1px solid var(--rule); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }

/* ================================================================ TYPOGRAPHY */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(40px, 5.5vw, 84px); line-height: 1.02; letter-spacing: -0.02em; font-weight: 500; }
h2 { font-size: clamp(32px, 4vw, 54px); line-height: 1.1; font-weight: 500; }
h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; font-weight: 500; }
h4 { font-size: 18px; font-weight: 600; font-family: var(--sans); letter-spacing: 0; }
p { color: var(--text); }

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gold);
}
.lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: var(--text-soft); }

/* ================================================================ LAYOUT */
.wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
section { position: relative; }

/* ================================================================ ANNOUNCEMENT BAR */
.announce-bar {
  background: var(--forest);
  color: var(--cream);
  padding: 10px var(--pad-x);
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.02em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.announce-bar span { display: inline-flex; align-items: center; gap: 8px; }
.announce-bar strong { font-weight: 600; color: var(--gold-soft); }
.announce-bar a {
  color: var(--cream);
  border-bottom: 1px solid rgba(250, 247, 241, 0.4);
  padding-bottom: 1px;
  transition: border-color 0.3s;
}
.announce-bar a:hover { border-bottom-color: var(--gold-soft); }
.announce-icon { width: 14px; height: 14px; color: var(--gold-soft); flex-shrink: 0; }

/* ================================================================ HEADER */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(14, 16, 14, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
header.scrolled { box-shadow: var(--shadow-sm); border-bottom-color: var(--rule); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--pad-x);
  max-width: 1440px;
  margin: 0 auto;
}
.logo { display: flex; flex-direction: row; align-items: center; gap: 11px; line-height: 1; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-monogram {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 500; font-size: 20px;
  color: var(--gold-soft);
  transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.logo:hover .logo-monogram { background: var(--gold); color: var(--forest-dark); }
.logo-mark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 26px;
  color: var(--forest);
  letter-spacing: -0.005em;
}
.logo-sub {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 4px;
}
nav { display: flex; gap: 36px; align-items: center; }
nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  padding: 8px 0;
  position: relative;
  transition: color 0.3s;
}
nav a::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
nav a:hover { color: var(--forest); }
nav a:hover::after { transform: scaleX(1); }

/* Services dropdown */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-top { display: inline-flex; align-items: center; gap: 6px; }
.nav-caret { width: 9px; height: 6px; flex-shrink: 0; transition: transform 0.3s; }
.nav-caret path { stroke: currentColor; }
.nav-has-dropdown:hover .nav-caret,
.nav-has-dropdown:focus-within .nav-caret { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 232px;
  background: rgba(16, 18, 15, 0.97);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
          backdrop-filter: saturate(140%) blur(12px);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  z-index: 120;
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-soft);
  border-radius: 3px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover { background: var(--forest); color: var(--cream); }

.header-right { display: flex; align-items: center; gap: 20px; }
.header-phone { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; }
.header-phone-label {
  color: var(--text-mute);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
.header-phone-number {
  font-weight: 600;
  color: var(--forest);
  font-size: 16px;
  margin-top: 2px;
  letter-spacing: 0.005em;
}
.btn-cta {
  background: var(--forest);
  color: var(--cream);
  padding: 13px 26px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 2px;
  transition: background 0.3s, transform 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-cta:hover { background: var(--forest-dark); transform: translateY(-1px); }
.btn-cta svg { width: 14px; height: 10px; }

.menu-toggle { display: none; flex-direction: column; gap: 5px; width: 28px; padding: 6px 0; }
.menu-toggle span { width: 100%; height: 1.5px; background: var(--ink); transition: transform 0.3s, opacity 0.3s; }
.menu-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ================================================================ HERO (CINEMATIC) */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--forest-dark);
  padding: clamp(72px, 12vh, 132px) 0 clamp(72px, 12vh, 120px);
  isolation: isolate;
}

/* Media layer (video or Ken Burns still) */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-media video,
.hero-kenburns {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
}
.hero-kenburns {
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  will-change: transform;
}
/* Ken Burns drift only when motion is allowed and JS hasn't taken over */
@media (prefers-reduced-motion: no-preference) {
  .hero-kenburns { animation: kenburns 26s ease-in-out infinite alternate; }
}
@keyframes kenburns {
  0%   { transform: scale(1.06) translate(0, 0); }
  100% { transform: scale(1.16) translate(-2%, -2%); }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(5, 6, 5, 0.6) 0%, transparent 38%),
    linear-gradient(105deg, rgba(31, 52, 36, 0.95) 0%, rgba(31, 52, 36, 0.76) 42%, rgba(20, 32, 22, 0.48) 100%),
    radial-gradient(circle at 78% 24%, rgba(212, 168, 92, 0.16) 0%, transparent 52%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.hero-content { max-width: 600px; }
.hero-eyebrow { margin-bottom: 24px; color: var(--gold-soft); }
.hero-eyebrow::before { background: var(--gold-soft); }

.hero h1 { margin-bottom: 16px; color: var(--cream); }
.hero h1 .accent { font-style: italic; color: var(--gold-soft); font-weight: 500; }

/* Animated gold underline drawn under the H1 */
.hero-underline { display: block; width: clamp(180px, 26vw, 300px); height: 14px; margin: 0 0 24px; overflow: visible; }
.hero-underline path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }

.hero-lead {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.65;
  color: rgba(250, 247, 241, 0.82);
  margin-bottom: 36px;
  max-width: 500px;
}

.trust-row {
  display: flex;
  gap: 28px 32px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid rgba(250, 247, 241, 0.18);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cream);
}
.trust-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold-soft); }

/* ================================================================ HERO BOOKING CARD */
.booking-card {
  background: var(--paper);
  padding: 32px;
  border-radius: 6px;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--rule-soft);
  position: relative;
}
.booking-tabs { display: flex; gap: 0; margin: -32px -32px 28px; border-bottom: 1px solid var(--rule); }
.booking-tab {
  flex: 1;
  padding: 20px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  background: var(--cream-2);
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
  border-right: 1px solid var(--rule);
}
.booking-tab:last-child { border-right: none; }
.booking-tab.active { background: var(--paper); color: var(--forest); border-bottom-color: var(--gold); }
.booking-tab:hover:not(.active) { color: var(--ink); }
.booking-title { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.booking-subtitle { font-size: 13px; color: var(--text-mute); margin-bottom: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-field { position: relative; }
.form-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 6px;
}
.form-field input,
.form-field select {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  padding: 12px 14px 12px 40px;
  font-size: 16px;
  color: var(--ink);
  border-radius: 2px;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  font-weight: 400;
}
.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(212, 168, 92, 0.15);
}
.form-field input::placeholder { color: var(--text-mute); }
.form-field .icon {
  position: absolute;
  left: 12px;
  bottom: 13px;
  width: 18px;
  height: 18px;
  color: var(--forest);
  pointer-events: none;
}
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23D4A85C' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.form-field.invalid input,
.form-field.invalid select { border-color: #c2554a; }

/* Inline validation message */
.field-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #e79a8e;
}
.field-error:empty { display: none; }

.booking-actions { display: flex; gap: 12px; margin-top: 24px; }
.btn-primary {
  flex: 1;
  background: var(--forest);
  color: var(--cream);
  padding: 15px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 2px;
  transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-primary:hover { background: var(--forest-dark); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.7; cursor: progress; transform: none; }
.btn-primary svg { width: 14px; height: 12px; }
.btn-call {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid var(--forest);
  padding: 15px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 2px;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-call:hover { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.btn-call svg { width: 14px; height: 14px; }
.booking-footnote { margin-top: 18px; font-size: 12px; color: var(--text-mute); text-align: center; line-height: 1.5; }
.booking-footnote strong { color: var(--forest); font-weight: 600; }

/* Glass effect: the card floats over the hero (solid fallback above) */
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .booking-card {
    background: rgba(18, 20, 17, 0.55);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
            backdrop-filter: blur(22px) saturate(135%);
    border-color: rgba(212, 168, 92, 0.18);
  }
  .booking-tab { background: rgba(10, 12, 9, 0.42); }
  .booking-tab.active { background: rgba(28, 31, 28, 0.55); }
  .form-field input,
  .form-field select { background: rgba(12, 14, 11, 0.55); }
  .form-field input:focus,
  .form-field select:focus { background: rgba(28, 31, 28, 0.7); }
}

/* ================================================================ FEATURE STRIP */
.features-strip { background: var(--forest); color: var(--cream); padding: 28px var(--pad-x); }
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1280px; margin: 0 auto; }
.feature { display: flex; align-items: center; gap: 14px; }
.feature-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--gold-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-soft);
  flex-shrink: 0;
  transition: background 0.3s, color 0.3s;
}
.feature:hover .feature-icon { background: var(--gold-soft); color: var(--forest-dark); }
.feature-icon svg { width: 16px; height: 16px; }
.feature-text { font-size: 13px; line-height: 1.4; }
.feature-text strong { display: block; font-weight: 600; font-size: 14px; }
.feature-text span { color: rgba(250, 247, 241, 0.7); font-size: 12.5px; }

/* ================================================================ SECTIONS BASE */
section.content { padding: clamp(64px, 9vh, 96px) 0; }
section.content.alt { background: var(--cream-2); }
.section-header { text-align: center; max-width: 720px; margin: 0 auto clamp(36px, 6vh, 56px); }
.section-header .eyebrow { justify-content: center; margin-bottom: 18px; }
.section-header p { margin-top: 18px; }

/* ================================================================ SERVICES */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  padding: 32px 28px;
  border-radius: 4px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, border-color 0.4s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--rule); }
.service-card:hover::before { transform: scaleX(1); }
.service-icon {
  width: 52px;
  height: 52px;
  background: var(--cream-2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--forest);
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.service-card:hover .service-icon { background: var(--forest); color: var(--gold-soft); transform: scale(1.05); }
.service-icon svg { width: 22px; height: 22px; }
.service-card h3 { font-size: 22px; margin-bottom: 10px; color: var(--ink); }
.service-card p { font-size: 14.5px; line-height: 1.6; color: var(--text-soft); margin-bottom: 18px; }
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--forest);
  letter-spacing: 0.04em;
  transition: gap 0.3s;
}
.service-card:hover .service-link { gap: 12px; }
.service-link svg { width: 14px; height: 10px; }

/* ================================================================ FLEET SLIDER */
.fleet-slider { position: relative; }
.fleet-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 4px 10px;
  margin: -4px -4px 0;
}
.fleet-track::-webkit-scrollbar { display: none; }
.vcard {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 48px) / 3);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, border-color 0.4s;
}
.vcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(212, 168, 92, 0.28); }
.vcard-media {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(ellipse at center 60%, rgba(61, 100, 71, 0.18) 0%, transparent 70%),
    linear-gradient(135deg, var(--bg-alt) 0%, var(--surface) 100%);
}
.vcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.vcard:hover .vcard-media img { transform: scale(1.05); }
.vcard-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px); color: var(--ink-soft);
  text-align: center; padding: 16px;
}
.vcard-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.vcard-feat { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.vcard-body h3 { font-size: 24px; margin-bottom: 10px; color: var(--ink); }
.vcard-body p { font-size: 14px; line-height: 1.6; color: var(--text-soft); margin-bottom: 18px; }
.vcard-specs {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  padding: 16px 0;
  margin: 0 0 18px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.vcard-specs li { display: flex; flex-direction: column; gap: 3px; }
.vcard-specs span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.vcard-specs strong { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.vcard-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--forest); transition: gap 0.3s, color 0.3s; }
.vcard-link svg { width: 14px; height: 10px; transition: transform 0.3s var(--ease-out); }
.vcard:hover .vcard-link { color: var(--gold-soft); }
.vcard:hover .vcard-link svg { transform: translateX(4px); }

.fleet-nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 28px; }
.fleet-arrow {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s;
}
.fleet-arrow svg { width: 16px; height: 13px; }
.fleet-arrow:hover:not(:disabled) { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.fleet-arrow:disabled { opacity: 0.3; cursor: default; }

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .vcard {
    background-color: rgba(28, 31, 28, 0.45);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
            backdrop-filter: blur(18px) saturate(130%);
    border-color: rgba(237, 234, 227, 0.09);
  }
}
.fleet-display {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  padding: clamp(28px, 4vw, 48px);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
}
.fleet-visual {
  aspect-ratio: 16/10;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  background:
    radial-gradient(ellipse at center 60%, rgba(61, 100, 71, 0.18) 0%, transparent 70%),
    linear-gradient(135deg, var(--bg-alt) 0%, var(--surface) 100%);
}
.fleet-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.fleet-display:hover .fleet-visual img { transform: scale(1.04); }
.fleet-visual-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, 46px);
  color: var(--ink-soft);
  letter-spacing: -0.01em;
  text-align: center;
  padding: 16px;
}
.fleet-info h3 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 12px; }
.fleet-info > p { color: var(--text-soft); margin-bottom: 28px; font-size: 15.5px; line-height: 1.65; }
.fleet-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.spec { display: flex; flex-direction: column; gap: 4px; }
.spec-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }
.spec-value { font-weight: 500; color: var(--ink); font-size: 14.5px; }
.fleet-models { font-size: 13.5px; color: var(--text-soft); margin-bottom: 24px; line-height: 1.7; }
.fleet-models strong { color: var(--ink); font-weight: 600; }
.btn-inline { display: inline-flex; width: auto; flex: none; }

/* ================================================================ STATS BAND */
.stats-band { background: var(--bg); padding: clamp(44px, 6vh, 72px) 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; }
.stat { position: relative; }
.stat-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 60px);
  color: var(--forest);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.stat-suffix { color: var(--gold); font-size: 0.6em; margin-left: 2px; }
.stat-label {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* ================================================================ PROCESS */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; }
.process-step { text-align: center; position: relative; }
.process-num { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 56px; color: var(--gold); margin-bottom: 8px; line-height: 1; }
.process-step h4 { font-family: var(--serif); font-weight: 500; font-size: 21px; color: var(--ink); margin-bottom: 12px; letter-spacing: -0.005em; }
.process-step p { font-size: 14.5px; color: var(--text-soft); line-height: 1.6; }

/* ================================================================ TESTIMONIAL */
.testimonial-section { background: var(--forest); color: var(--cream); padding: clamp(72px, 11vh, 110px) 0; position: relative; overflow: hidden; }
.testimonial-section::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(184, 137, 60, 0.1) 0%, transparent 70%);
  pointer-events: none;
}
.testimonial { max-width: 880px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.testimonial-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--cream);
  margin-bottom: 32px;
}
.testimonial-attr {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.testimonial-attr::before, .testimonial-attr::after { content: ""; width: 32px; height: 1px; background: var(--gold-soft); }
.testimonial-stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 28px; color: var(--gold-soft); }
.testimonial-stars svg { width: 18px; height: 18px; }

/* Reviews 3-up grid (below the featured testimonial) */
.reviews-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 56px auto 0;
}
.review-card {
  background: rgba(250, 247, 241, 0.04);
  border: 1px solid rgba(212, 168, 92, 0.20);
  border-radius: 6px;
  padding: 26px 24px;
  text-align: left;
  transition: transform 0.4s var(--ease-out), border-color 0.3s, background 0.3s;
}
.review-card:hover { transform: translateY(-3px); border-color: rgba(212, 168, 92, 0.40); background: rgba(250, 247, 241, 0.06); }
.review-stars { display: flex; gap: 3px; color: var(--gold-soft); margin-bottom: 14px; }
.review-stars svg { width: 16px; height: 16px; }
.review-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--cream);
  margin: 0 0 18px;
}
.review-attr {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

/* ================================================================ CTA BAND */
.cta-band { background: var(--depth-grad), var(--bg); padding: clamp(64px, 9vh, 96px) 0; text-align: center; }
.cta-band h2 { margin-bottom: 18px; }
.cta-band p { margin-bottom: 36px; max-width: 600px; margin-left: auto; margin-right: auto; }
.cta-buttons { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.cta-buttons .btn-primary, .cta-buttons .btn-call { padding: 16px 32px; font-size: 14px; flex: none; }

/* ================================================================ FAQ */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-question {
  width: 100%;
  text-align: left;
  padding: 24px 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  transition: color 0.3s;
}
.faq-question:hover { color: var(--forest); }
.faq-toggle { width: 28px; height: 28px; flex-shrink: 0; position: relative; border: 1px solid var(--rule); border-radius: 50%; transition: border-color 0.3s, background 0.3s; }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; background: var(--ink); transition: transform 0.3s, background 0.3s; }
.faq-toggle::before { top: 50%; left: 7px; right: 7px; height: 1.5px; transform: translateY(-50%); }
.faq-toggle::after { left: 50%; top: 7px; bottom: 7px; width: 1.5px; transform: translateX(-50%); }
.faq-item.open .faq-toggle { border-color: var(--forest); background: var(--forest); }
.faq-item.open .faq-toggle::before, .faq-item.open .faq-toggle::after { background: var(--cream); }
.faq-item.open .faq-toggle::after { transform: translateX(-50%) rotate(90deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer-inner { padding: 0 0 24px; font-size: 15.5px; line-height: 1.7; color: var(--text-soft); max-width: 90%; }

/* ================================================================ FOOTER */
footer { background: var(--footer-bg); color: var(--cream); padding: clamp(64px, 10vh, 96px) 0 0; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(250, 247, 241, 0.1); }
.footer-brand .logo-mark { color: var(--cream); }
.footer-brand .logo-sub { color: rgba(250, 247, 241, 0.5); }
.footer-brand p { margin-top: 18px; color: rgba(250, 247, 241, 0.65); font-size: 14px; line-height: 1.65; max-width: 320px; }
.footer-social { display: flex; gap: 10px; margin-top: 24px; }
.footer-social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(250, 247, 241, 0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(250, 247, 241, 0.7);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.footer-social a:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.footer-social svg { width: 15px; height: 15px; }
.footer-col h4 {
  color: var(--cream);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer-col a, .footer-col p { display: block; font-size: 14px; color: rgba(250, 247, 241, 0.65); line-height: 1.9; transition: color 0.3s; }
.footer-col a:hover { color: var(--gold-soft); }
.footer-bottom { padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 13px; color: rgba(250, 247, 241, 0.5); }

/* ================================================================ MOBILE STICKY CTA */
.mobile-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 12px var(--pad-x);
  gap: 10px;
  box-shadow: 0 -8px 24px rgba(26, 31, 26, 0.08);
}
.mobile-cta a {
  flex: 1;
  padding: 13px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mobile-cta .m-quote { background: var(--forest); color: var(--cream); }
.mobile-cta .m-call { background: var(--paper); color: var(--forest); border: 1.5px solid var(--forest); }
.mobile-cta svg { width: 14px; height: 14px; }

/* ================================================================ MOBILE NAV */
.mobile-nav {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 360px;
  background: var(--bg-alt);
  border-left: 1px solid var(--rule);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 80px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-lg);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a { font-size: 22px; font-weight: 500; color: var(--ink); padding: 14px 0; border-bottom: 1px solid var(--rule); font-family: var(--serif); }
.mobile-nav a:hover { color: var(--forest); }
.mobile-nav-cta { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.mobile-nav-cta a { border-bottom: none; padding: 14px 20px; font-family: var(--sans); font-size: 14px; font-weight: 600; text-align: center; border-radius: 2px; }
.mobile-nav-cta a:first-child { background: var(--forest); color: var(--cream); }
.mobile-nav-cta a:last-child { background: transparent; color: var(--forest); border: 1.5px solid var(--forest); }
.mobile-nav-overlay { position: fixed; inset: 0; background: rgba(26, 31, 26, 0.4); z-index: 150; opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }

/* Mobile nav: collapsible Services group */
.mobile-nav .mnav-group { border-bottom: 1px solid var(--rule); }
.mobile-nav .mnav-group > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-nav .mnav-group > summary::-webkit-details-marker { display: none; }
.mobile-nav .mnav-group > summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--text-mute);
  border-bottom: 1.5px solid var(--text-mute);
  transform: rotate(45deg);
  transition: transform 0.3s;
  margin-right: 4px;
}
.mobile-nav .mnav-group[open] > summary::after { transform: rotate(-135deg); }
.mobile-nav .mnav-sub { display: flex; flex-direction: column; padding: 2px 0 12px 14px; }
.mobile-nav .mnav-sub a {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-soft);
  padding: 9px 0;
  border-bottom: none;
}
.mobile-nav .mnav-sub a:hover { color: var(--forest); }

/* ================================================================ SUCCESS TOAST */
.success-toast {
  position: fixed;
  top: 24px; left: 50%;
  transform: translateX(-50%) translateY(-150%);
  background: var(--forest);
  color: var(--cream);
  padding: 18px 28px;
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14.5px;
  font-weight: 500;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
  max-width: 460px;
  width: calc(100% - 40px);
}
.success-toast.show { transform: translateX(-50%) translateY(0); }
.success-toast svg { width: 20px; height: 20px; color: var(--gold-soft); flex-shrink: 0; }
.success-toast strong { display: block; font-weight: 600; }
.success-toast span { font-size: 13px; opacity: 0.85; }
.success-toast.error { background: #6f2a23; }
.success-toast.error svg { color: #f0b8ae; }

/* ================================================================ PAGE HERO (inner pages) */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--forest-dark);
  padding: clamp(64px, 11vh, 120px) 0 clamp(56px, 9vh, 96px);
  isolation: isolate;
}
.page-hero .hero-media,
.page-hero .hero-overlay { position: absolute; inset: 0; }
.page-hero .hero-media { z-index: 0; overflow: hidden; }
.page-hero .hero-kenburns {
  position: absolute; inset: -4%; width: 108%; height: 108%;
  background-size: cover; background-position: center;
  transform: scale(1.06);
}
@media (prefers-reduced-motion: no-preference) {
  .page-hero .hero-kenburns { animation: kenburns 30s ease-in-out infinite alternate; }
}
.page-hero .hero-overlay {
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(31,52,36,0.95) 0%, rgba(31,52,36,0.82) 45%, rgba(31,52,36,0.62) 100%),
    radial-gradient(circle at 82% 28%, rgba(184,137,60,0.16) 0%, transparent 55%);
  pointer-events: none;
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero-inner { max-width: 760px; }
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12.5px; letter-spacing: 0.04em; color: rgba(250,247,241,0.6);
  margin-bottom: 22px;
}
.breadcrumb a { color: rgba(250,247,241,0.8); transition: color 0.3s; }
.breadcrumb a:hover { color: var(--gold-soft); }
.breadcrumb span.sep { color: rgba(250,247,241,0.35); }
.page-hero .eyebrow { color: var(--gold-soft); margin-bottom: 18px; }
.page-hero .eyebrow::before { background: var(--gold-soft); }
.page-hero h1 { color: var(--cream); margin-bottom: 18px; }
.page-hero p.lead { color: rgba(250,247,241,0.82); max-width: 620px; }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.page-hero-actions .btn-primary { background: var(--gold); color: var(--forest-dark); flex: none; padding: 15px 28px; }
.page-hero-actions .btn-primary:hover { background: var(--gold-soft); }
.page-hero-actions .btn-call { background: transparent; color: var(--cream); border-color: rgba(250,247,241,0.5); flex: none; padding: 15px 28px; }
.page-hero-actions .btn-call:hover { background: var(--cream); color: var(--forest-dark); border-color: var(--cream); }

/* ================================================================ CONTENT SPLIT (text + image) */
.content-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.content-split.reverse .split-media { order: -1; }
.split-text .eyebrow { margin-bottom: 18px; }
.split-text h2 { margin-bottom: 20px; }
.split-text p { color: var(--text-soft); margin-bottom: 16px; font-size: 15.5px; line-height: 1.7; }
.split-text p:last-child { margin-bottom: 0; }
.split-media {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3;
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }

/* ================================================================ CHECK LIST */
.check-list { list-style: none; display: grid; gap: 14px; margin-top: 8px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--text); line-height: 1.55; }
.check-list svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--forest); margin-top: 1px; }
.check-list strong { color: var(--ink); font-weight: 600; }

/* ================================================================ FEATURE CARDS (reusable 3-up) */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.info-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  padding: 30px 26px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, border-color 0.4s;
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--rule); }
.info-card .info-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--cream-2); color: var(--forest);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.info-card .info-icon svg { width: 22px; height: 22px; }
.info-card h3 { font-size: 20px; margin-bottom: 10px; }
.info-card p { font-size: 14.5px; color: var(--text-soft); line-height: 1.6; }

/* ================================================================ BLOG */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.blog-card .blog-thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--cream-2); }
.blog-card .blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.blog-card:hover .blog-thumb img { transform: scale(1.05); }
.blog-card .blog-body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.blog-date { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.blog-card h3 { font-size: 21px; margin-bottom: 10px; line-height: 1.25; }
.blog-card p { font-size: 14.5px; color: var(--text-soft); line-height: 1.6; margin-bottom: 18px; flex: 1; }
.blog-card .service-link { margin-top: auto; }

/* Blog post article */
.article { max-width: 760px; margin: 0 auto; }
.article-meta { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.article-hero-img { width: 100%; border-radius: 6px; overflow: hidden; margin: 0 auto clamp(32px,5vh,48px); box-shadow: var(--shadow); }
.article-hero-img img { width: 100%; display: block; }
.prose p { color: var(--text); font-size: 16.5px; line-height: 1.75; margin-bottom: 22px; }
.prose h2 { font-size: clamp(26px, 3vw, 34px); margin: 40px 0 16px; }
.prose h3 { font-size: 22px; margin: 32px 0 12px; }
.prose ul { margin: 0 0 22px 22px; }
.prose li { margin-bottom: 10px; line-height: 1.7; }
.prose a { color: var(--forest); border-bottom: 1px solid var(--rule); }
.prose a:hover { border-bottom-color: var(--forest); }

/* ================================================================ CONTACT */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 72px); align-items: start; }
.contact-info h2 { margin-bottom: 18px; }
.contact-info > p { color: var(--text-soft); margin-bottom: 32px; max-width: 420px; }
.contact-detail { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--rule); }
.contact-detail:last-of-type { border-bottom: 1px solid var(--rule); }
.contact-detail .cd-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--cream-2); color: var(--forest); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-detail .cd-icon svg { width: 20px; height: 20px; }
.contact-detail .cd-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 4px; }
.contact-detail .cd-value { font-size: 15.5px; color: var(--ink); font-weight: 500; }
.contact-detail a.cd-value:hover { color: var(--forest); }
.contact-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  padding: clamp(28px, 4vw, 40px);
  box-shadow: var(--shadow);
}
.contact-card h3 { font-size: 24px; margin-bottom: 6px; }
.contact-card > p { font-size: 13.5px; color: var(--text-mute); margin-bottom: 26px; }
.contact-card .form-field textarea {
  width: 100%; background: var(--bg-alt); border: 1px solid var(--rule);
  padding: 12px 14px; font-size: 16px; color: var(--ink); border-radius: 2px;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s; resize: vertical; min-height: 120px;
}
.contact-card .form-field textarea:focus { outline: none; border-color: var(--gold); background: var(--surface); box-shadow: 0 0 0 3px rgba(212,168,92,0.15); }
.contact-card .form-field input { padding-left: 14px; }
.contact-card .form-field.invalid input,
.contact-card .form-field.invalid textarea { border-color: #b04a3c; }
.contact-card .btn-primary { width: 100%; margin-top: 8px; }

/* ================================================================ FLEET CATEGORY GRID */
.fleet-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.fleet-cat-card {
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.fleet-cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.fleet-cat-card .fc-media { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--bg-alt), var(--surface)); overflow: hidden; position: relative; }
.fleet-cat-card .fc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.fleet-cat-card:hover .fc-media img { transform: scale(1.05); }
.fleet-cat-card .fc-media .fc-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--ink-soft); }
.fleet-cat-card .fc-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.fleet-cat-card h3 { font-size: 22px; margin-bottom: 8px; }
.fleet-cat-card p { font-size: 14px; color: var(--text-soft); line-height: 1.6; margin-bottom: 16px; flex: 1; }

/* ================================================================ 404 */
.notfound { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px var(--pad-x); }
.notfound h1 { font-size: clamp(72px, 14vw, 140px); color: var(--forest); line-height: 1; margin-bottom: 12px; }
.notfound h2 { margin-bottom: 16px; }
.notfound p { color: var(--text-soft); margin-bottom: 32px; max-width: 440px; margin-left: auto; margin-right: auto; }

/* ================================================================ HOVER POLISH
   Unified premium hover: 4px lift + gold top-border draw-in on every card. */
.info-card, .blog-card, .fleet-cat-card { position: relative; }
.info-card { overflow: hidden; }
.info-card::before, .blog-card::before, .fleet-cat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}
.info-card:hover::before,
.blog-card:hover::before,
.fleet-cat-card:hover::before { transform: scaleX(1); }

/* Card surfaces read with a hair more elevation against the dark canvas */
.service-card, .info-card, .blog-card, .fleet-cat-card, .fleet-display, .booking-card, .contact-card {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
}

/* ================================================================ ELEVATION PASS
   Editorial refinements: numbered eyebrows whose gold rule draws in on
   reveal, hairline-led bands, indexed service cards, a process rail,
   asymmetric CTA band, ghost wordmark, quiet micro-interactions.
   Reveal hooks are JS-additive (.rev-init/.in-view) so the no-JS and
   reduced-motion baseline stays fully visible. */

h1, h2, h3 { text-wrap: balance; }
::selection { background: var(--gold); color: #14160F; }
html { scrollbar-width: thin; scrollbar-color: #2A2D29 var(--bg); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2A2D29; border-radius: 6px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--forest); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Numbered editorial eyebrows; the rule draws in as the section reveals */
.eyebrow .idx { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 14px; letter-spacing: 0; color: var(--gold-soft); }
.rev-init .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out) 0.3s; }
.rev-init.in-view .eyebrow::before { transform: scaleX(1); }

/* CTAs: uppercase, letterspaced, arrows that nudge */
.btn-primary, .btn-call, .btn-cta, .mobile-cta a { text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.12em; }
.btn-primary svg, .btn-cta svg, .service-link svg { transition: transform 0.3s var(--ease-out); }
.btn-primary:hover svg, .btn-cta:hover svg, .service-card:hover .service-link svg { transform: translateX(4px); }

/* Feature band: hairlines instead of icon bubbles */
.features-strip { padding: 34px var(--pad-x); }
.feature-icon { width: auto; height: auto; border: none; border-radius: 0; }
.feature:hover .feature-icon { background: transparent; color: var(--gold-soft); }
.feature-icon svg { width: 20px; height: 20px; transition: transform 0.3s var(--ease-out); }
.feature:hover .feature-icon svg { transform: translateY(-2px); }
@media (min-width: 1025px) {
  .feature { padding-left: 28px; border-left: 1px solid rgba(250, 247, 241, 0.16); }
  .feature:first-child { padding-left: 0; border-left: none; }
}

/* Service cards: editorial, indexed, no icon bubble */
.service-card { padding: 36px 30px 32px; }
.service-icon { width: auto; height: auto; background: transparent; border-radius: 0; color: var(--gold); margin-bottom: 22px; }
.service-card:hover .service-icon { background: transparent; color: var(--gold-soft); transform: none; }
.service-icon svg { width: 26px; height: 26px; }
.card-idx { position: absolute; top: 26px; right: 28px; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--text-mute); transition: color 0.3s; }
.service-card:hover .card-idx { color: var(--gold); }

/* Process: left-aligned steps on a hairline rail */
.process-step { text-align: left; }
.process-step::before { content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); margin-bottom: 24px; }
.process-num { font-size: 42px; margin-bottom: 12px; }
@media (min-width: 769px) {
  .process-grid::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 1px; background: var(--rule); }
}

/* Testimonial: oversized ghost quote mark */
.testimonial::before { content: "\201C"; position: absolute; top: -78px; left: 50%; transform: translateX(-50%); font-family: var(--serif); font-size: 240px; line-height: 1; color: rgba(212, 168, 92, 0.10); pointer-events: none; }

/* CTA band: asymmetric editorial split */
.cta-band { text-align: left; }
.cta-band [data-animate] { display: grid; grid-template-columns: minmax(0, 1.5fr) auto; align-items: end; column-gap: 56px; }
.cta-band h2 { margin-bottom: 14px; }
.cta-band p.lead { margin: 0; max-width: 560px; }
.cta-buttons { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
@media (max-width: 900px) {
  .cta-band [data-animate] { grid-template-columns: 1fr; }
  .cta-buttons { grid-column: 1; grid-row: auto; margin-top: 32px; }
}

/* Booking card: hairline top light for glass depth */
.booking-card { box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255, 255, 255, 0.06); }

/* ================================================================ RESPONSIVE
   Breakpoints: 1440 · 1280 · 1024 · 768 · 480 · 375
   Goal: zero horizontal scroll at every width; grids 4→2→1; hero form
   stacks below the copy on tablet; tap targets >=48px on mobile.
   ================================================================ */

/* Long strings (emails/URLs) wrap at sensible opportunities, not mid-word */
.footer-col a, .breadcrumb a, .contact-detail .cd-value { overflow-wrap: break-word; }

/* ---- 1440: gentle tightening on large laptops ---- */
@media (max-width: 1440px) {
  .services-grid, .info-grid, .blog-grid, .fleet-cat-grid { gap: 22px; }
}

/* ---- 1280 ---- */
@media (max-width: 1280px) {
  .wrap { max-width: 100%; }
  .fleet-display { gap: 36px; }
  .footer-top { gap: 40px; }
}

/* ---- 1024: tablet — desktop nav off, hero form stacks, grids -> 2-col ---- */
@media (max-width: 1024px) {
  nav { display: none; }
  .menu-toggle { display: flex; }
  .header-phone { display: none; }

  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-content { max-width: none; }
  .booking-card { width: 100%; }

  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid    { grid-template-columns: repeat(2, 1fr); }
  .blog-grid    { grid-template-columns: repeat(2, 1fr); }
  .fleet-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .stats-grid   { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .footer-top   { grid-template-columns: 1fr 1fr; gap: 36px; }
  .reviews-grid { grid-template-columns: 1fr 1fr; gap: 20px; }

  .fleet-display { grid-template-columns: 1fr; gap: 32px; }
  .content-split { grid-template-columns: 1fr; gap: 40px; }
  .content-split.reverse .split-media { order: 0; }
  .contact-grid  { grid-template-columns: 1fr; gap: 40px; }

  .vcard { flex-basis: calc((100% - 24px) / 2); }   /* fleet slider: 2 across */
}

/* ---- 768: phone-landscape — single column for content, fleet slider peek,
        sticky mobile CTA, 48px tap targets ---- */
@media (max-width: 768px) {
  .services-grid, .info-grid, .blog-grid, .fleet-cat-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }

  /* Tighten stacked section padding so adjacent sections don't leave
     cavernous empty bands on phones (item 8: "negative spacing"). */
  section.content { padding: 64px 0; }
  .cta-band { padding: 64px 0; }
  .testimonial-section { padding: 72px 0; }
  .stats-band { padding: 48px 0; }
  footer { padding-top: 56px; }

  /* Sticky mobile CTA */
  .mobile-cta { display: flex; }
  body { padding-bottom: 76px; }

  /* Tap targets / no iOS zoom */
  .form-field input, .form-field select, .contact-card .form-field textarea { min-height: 48px; font-size: 16px; }
  .btn-primary, .btn-call, .btn-cta, .mobile-cta a { min-height: 48px; }

  /* Fleet slider: one card with a peek of the next, native snap (no jumpy tabs) */
  .fleet-track { gap: 16px; }
  .vcard { flex-basis: 84%; }
  .fleet-nav { justify-content: center; }

  .page-hero-actions .btn-primary, .page-hero-actions .btn-call { flex: 1 1 auto; }
}

/* ---- 640: phone — 4-col grids fully collapse, hero/booking compaction ---- */
@media (max-width: 640px) {
  .features-grid { grid-template-columns: 1fr; gap: 16px; }
  .process-grid  { grid-template-columns: 1fr; gap: 36px; }
  .footer-top    { grid-template-columns: 1fr; gap: 40px; }
  .reviews-grid  { grid-template-columns: 1fr; gap: 18px; margin-top: 40px; }

  .announce-bar { font-size: 12px; gap: 12px; padding: 8px var(--pad-x); }
  .announce-bar > span:nth-child(2) { display: none; }
  .header-inner { padding: 16px var(--pad-x); }
  .logo-mark { font-size: 22px; }
  .logo-sub { font-size: 9px; letter-spacing: 0.24em; }
  .btn-cta { display: none; }

  .hero { padding: 44px 0 52px; }
  .booking-card { padding: 24px 20px; border-radius: 4px; }
  .booking-tabs { margin: -24px -20px 24px; }
  .booking-tab { padding: 14px 8px; font-size: 12px; letter-spacing: 0.02em; }
  .form-row { grid-template-columns: 1fr; gap: 16px; }
  .booking-actions { flex-direction: column; gap: 10px; }

  .cta-buttons { width: 100%; }
  .cta-buttons .btn-primary, .cta-buttons .btn-call { flex: 1 1 100%; }
}

/* ---- 480 ---- */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; gap: 30px; }
  .testimonial-attr { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .fleet-display { padding: 22px; }
  .section-header { margin-bottom: clamp(36px, 7vh, 56px); }
}

/* ---- 375: smallest — guarantee containment ---- */
@media (max-width: 375px) {
  :root { --pad-x: 16px; }
  .booking-tab { font-size: 11px; padding: 13px 6px; }
  .trust-row { gap: 18px; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ================================================================ ELEVATION PASS II
   Footer as a reservation moment, editorial stats, cinematic interlude,
   hero scroll cue. Same rules as pass I: transform/opacity motion only,
   nothing hidden without JS, reduced-motion safe. */

/* Footer: oversized reservation headline + gold phone, columns beneath */
.footer-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto;
  align-items: end;
  column-gap: 64px;
  row-gap: 32px;
  padding-bottom: clamp(40px, 6vh, 60px);
  margin-bottom: clamp(44px, 7vh, 64px);
  border-bottom: 1px solid rgba(250, 247, 241, 0.1);
}
.footer-cta .eyebrow { margin-bottom: 18px; }
.footer-cta-title { color: var(--cream); font-size: clamp(34px, 4.4vw, 62px); margin-bottom: 14px; }
.footer-cta-sub { color: rgba(250, 247, 241, 0.6); font-size: 15px; line-height: 1.65; max-width: 48ch; }
.footer-cta-contact { text-align: right; padding-bottom: 6px; }
.fc-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, 0.5);
  margin-bottom: 10px;
}
.fc-phone {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--gold-soft);
  transition: color 0.3s;
}
.fc-phone:hover { color: var(--cream); }
.fc-mail {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  color: rgba(250, 247, 241, 0.65);
  border-bottom: 1px solid rgba(250, 247, 241, 0.25);
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}
.fc-mail:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.footer-col h4 { color: rgba(250, 247, 241, 0.45); font-size: 11px; letter-spacing: 0.16em; }
.footer-col p { line-height: 1.7; }
.footer-bottom .footer-social { margin-top: 0; }

/* Stats: editorial hairline language, matching the process rail */
.stats-grid { text-align: left; }
.stat { padding-top: 22px; border-top: 1px solid var(--rule); }
.stat-num { font-size: clamp(44px, 5vw, 72px); }
.stat-label { color: var(--text-mute); letter-spacing: 0.12em; font-size: 12px; }

/* Hero scroll cue (desktop only; the gold dash breathes) */
.hero-scrollcue {
  position: absolute;
  left: var(--pad-x);
  bottom: 26px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, 0.55);
  pointer-events: none;
}
.hero-scrollcue::before {
  content: "";
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-soft), transparent);
  animation: cue-breathe 2.8s ease-in-out infinite;
}
@keyframes cue-breathe {
  0%, 100% { transform: translateX(0); opacity: 0.45; }
  50%      { transform: translateX(10px); opacity: 1; }
}

/* Cinematic interlude: full-bleed night image with parallax */
.interlude {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(110px, 18vh, 180px) 0;
  background: var(--footer-bg);
}
.interlude-media {
  position: absolute;
  inset: -16% 0;
  z-index: 0;
  background-size: cover;
  background-position: center 30%;
}
.interlude-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(5, 6, 5, 0.86) 8%, rgba(5, 6, 5, 0.55) 55%, rgba(31, 52, 36, 0.35) 100%),
    linear-gradient(to top, rgba(5, 6, 5, 0.5), transparent 40%);
  pointer-events: none;
}
.interlude .wrap { position: relative; z-index: 2; }
.interlude .eyebrow { color: var(--gold-soft); margin-bottom: 22px; }
.interlude .eyebrow::before { background: var(--gold-soft); }
.interlude-line {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--cream);
  max-width: 22ch;
  text-wrap: balance;
}

/* Elevation pass II: responsive */
@media (max-width: 1024px) {
  .hero-scrollcue { display: none; }
}
@media (max-width: 900px) {
  .footer-cta { grid-template-columns: 1fr; align-items: start; }
  .footer-cta-contact { text-align: left; padding-bottom: 0; }
}
@media (max-width: 768px) {
  .interlude { padding: 88px 0; }
  .stat { padding-top: 16px; }
}
@media (max-width: 480px) {
  .footer-cta-title { font-size: clamp(30px, 9vw, 38px); }
  .fc-phone { font-size: 32px; }
}

/* ================================================================ ELEVATION PASS III
   Ambient aurora + glass surfaces; compact footer. Glass only reads when
   there is light behind it, so a fixed glow layer sits beneath the page
   and translucent surfaces let it breathe through. Solid fallbacks remain
   for browsers without backdrop-filter. */

/* Fixed ambient glow layer (paints above the canvas bg, below all content) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1000px 720px at 10% 6%, rgba(61, 100, 71, 0.16), transparent 70%),
    radial-gradient(860px 860px at 90% 42%, rgba(212, 168, 92, 0.06), transparent 70%),
    radial-gradient(760px 640px at 18% 96%, rgba(61, 100, 71, 0.09), transparent 70%);
}
/* Alt sections turn faintly translucent so the glow carries through them */
section.content.alt { background: rgba(22, 24, 20, 0.66); }

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .service-card, .info-card, .blog-card, .fleet-cat-card, .fleet-display, .contact-card {
    background-color: rgba(28, 31, 28, 0.45);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
            backdrop-filter: blur(18px) saturate(130%);
    border-color: rgba(237, 234, 227, 0.09);
  }
  .service-card:hover, .info-card:hover, .blog-card:hover, .fleet-cat-card:hover {
    border-color: rgba(212, 168, 92, 0.28);
  }
  .review-card {
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
  }
  header {
    background: rgba(14, 16, 14, 0.7);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
            backdrop-filter: saturate(160%) blur(18px);
  }
  header.scrolled { border-bottom-color: rgba(212, 168, 92, 0.16); }
}

/* Footer: compact, headline scaled back */
footer { padding-top: clamp(52px, 8vh, 76px); }
.footer-cta { padding-bottom: clamp(30px, 5vh, 44px); margin-bottom: clamp(30px, 5vh, 44px); }
.footer-cta-title { font-size: clamp(30px, 3.6vw, 50px); margin-bottom: 12px; }
.footer-cta-sub { font-size: 14px; }
.fc-phone { font-size: clamp(28px, 2.8vw, 40px); }
.footer-top { padding-bottom: clamp(32px, 5vh, 44px); }
.footer-bottom { padding: 20px 0; }

/* ================================================================ ROUND-2 CONTENT
   Indicative fares, chauffeur line-up, airport calculator. */

/* Indicative fare on homepage service cards */
.svc-price {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--gold-soft);
  margin: -2px 0 12px;
}

/* Indicative fare badge on service pages */
.service-fare {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin: 4px 0 22px;
  padding: 10px 18px;
  border: 1px solid rgba(212, 168, 92, 0.28);
  border-radius: 4px;
  background: rgba(212, 168, 92, 0.06);
}
.service-fare span { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.service-fare strong { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--gold-soft); }

/* Meet our chauffeurs */
.chauffeur-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.chauffeur-card { margin: 0; transition: transform 0.4s var(--ease-out); }
.chauffeur-card:hover { transform: translateY(-5px); }
.chauffeur-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1.5px solid var(--gold);
  border-radius: 5px;
  padding: 5px;
  overflow: hidden;
}
.chauffeur-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 2px;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.chauffeur-card:hover .chauffeur-photo img { transform: scale(1.04); }
.chauffeur-card figcaption { padding: 16px 2px 0; }
.chauffeur-card figcaption h3 { font-size: 20px; color: var(--ink); margin-bottom: 5px; }
.chauffeur-card figcaption p { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold); line-height: 1.45; }

/* Airport transfer calculator */
.calc {
  max-width: 720px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
}
.calc-row { display: flex; align-items: flex-end; gap: 20px; }
.calc-field { flex: 1; text-align: left; min-width: 0; }
.calc-field label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 8px; }
.calc-field select {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  padding: 14px 40px 14px 16px;
  font-size: 16px;
  color: var(--ink);
  border-radius: 2px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23D4A85C' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.calc-field select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 168, 92, 0.15); }
.calc-dest { padding: 14px 16px; border: 1px dashed var(--rule); border-radius: 2px; color: var(--text-soft); font-size: 15px; }
.calc-arrow { flex: 0 0 auto; color: var(--gold); padding-bottom: 13px; }
.calc-arrow svg { width: 24px; height: 24px; }
.calc-result { margin: 28px 0 24px; padding: 24px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.calc-result-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 10px; }
.calc-result-price { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 6vw, 60px); color: var(--gold-soft); line-height: 1; }
.calc-cta { display: inline-flex; width: auto; flex: none; }
.calc-note { margin-top: 16px; font-size: 12px; color: var(--text-mute); }

@media (max-width: 1024px) { .chauffeur-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 560px) {
  .calc-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .calc-arrow { transform: rotate(90deg); align-self: center; padding: 0; }
  .chauffeur-grid { gap: 16px; }
}

/* ================================================================ NEWSLETTER POPUP */
.np-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 6, 5, 0.66);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.np-overlay[hidden] { display: none; }       /* must beat the .np-overlay display:flex above */
.np-overlay.show { opacity: 1; pointer-events: auto; }
.np-modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid rgba(212, 168, 92, 0.22);
  border-radius: 8px;
  box-shadow: var(--shadow-xl);
  padding: clamp(30px, 5vw, 46px);
  transform: translateY(18px) scale(0.98);
  transition: transform 0.5s var(--ease-out);
}
.np-overlay.show .np-modal { transform: none; }
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .np-modal {
    background: rgba(22, 24, 20, 0.72);
    -webkit-backdrop-filter: blur(26px) saturate(135%);
            backdrop-filter: blur(26px) saturate(135%);
  }
}
.np-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-mute);
  border-radius: 50%;
  transition: color 0.3s, background 0.3s;
}
.np-close:hover { color: var(--cream); background: rgba(250, 247, 241, 0.06); }
.np-close svg { width: 18px; height: 18px; }
.np-eyebrow { margin-bottom: 18px; }
.np-title { font-size: clamp(28px, 4vw, 40px); line-height: 1.08; color: var(--ink); margin-bottom: 16px; }
.np-copy { font-size: 14.5px; line-height: 1.65; color: var(--text-soft); margin-bottom: 24px; }
.np-field { display: flex; gap: 10px; }
.np-field input {
  flex: 1;
  min-width: 0;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  padding: 14px 16px;
  font-size: 16px;
  color: var(--ink);
  border-radius: 2px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.np-field input::placeholder { color: var(--text-mute); }
.np-field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 168, 92, 0.15); }
.np-field input.np-invalid { border-color: #c2554a; box-shadow: 0 0 0 3px rgba(194, 85, 74, 0.14); }
.np-field .btn-primary { flex: 0 0 auto; }
.np-note { margin-top: 14px; font-size: 12px; color: var(--text-mute); }
.np-success { text-align: center; padding: 10px 0 4px; }
.np-success svg { width: 42px; height: 42px; color: var(--gold-soft); margin-bottom: 14px; }
.np-success strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--ink); margin-bottom: 6px; }
.np-success span { font-size: 14px; color: var(--text-soft); }
@media (max-width: 480px) {
  .np-field { flex-direction: column; }
  .np-field .btn-primary { width: 100%; }
}

/* ================================================================ POLISH LAYER
   Decorative layers are all pointer-events:none so they never intercept clicks. */

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 300;
  pointer-events: none;
  background: transparent;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--forest), var(--gold-soft));
  box-shadow: 0 0 10px rgba(212, 168, 92, 0.5);
}

/* Cursor spotlight (pointer devices only) */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 480px; height: 480px;
  margin: -240px 0 0 -240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 168, 92, 0.10), transparent 62%);
  pointer-events: none;
  z-index: 95;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: transform;
}
@media (hover: none), (max-width: 1024px) { .cursor-glow { display: none; } }

/* Primary buttons: soft gold lift on hover */
.btn-primary:hover { box-shadow: var(--shadow), 0 8px 26px rgba(212, 168, 92, 0.16); }

/* Monogram sizes down on small screens */
@media (max-width: 640px) {
  .logo-monogram { width: 34px; height: 34px; font-size: 17px; }
  .logo { gap: 9px; }
}

/* ================================================================ REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-kenburns { animation: none; }
  .hero-scrollcue::before { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}