/* ============================================================
   LENOX VIP TRANSPORT — Dark Luxury Design System
   ============================================================ */
:root {
  --ink: #08080a;
  --ink-2: #0d0d11;
  --panel: #121218;
  --panel-2: #17171f;
  --line: rgba(212, 175, 55, 0.18);
  --line-soft: rgba(255, 255, 255, 0.07);
  --gold: #d4af37;
  --gold-2: #e8c96a;
  --gold-dim: #a8892b;
  --text: #eceae4;
  --muted: #a7a49b;
  --muted-2: #7d7a72;
  --radius: 14px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 1;
}
img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; }

/* Inline links inside body copy get an underline. JR read the nationwide
   link under "Roadshow Ready" as a stray gold font rather than a link -
   if a co-owner cannot tell, a first-time visitor cannot either, and that
   link exists to move corporate traffic. Buttons, nav and the footer keep
   their own styling. */
.section p a, .card p a, .split p a, .article-body a, .faq-a-inner a,
.hero-sub p a, li a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(212, 175, 55, 0.45);
}
.section p a:hover, .card p a:hover, .split p a:hover, .article-body a:hover,
.faq-a-inner a:hover, .hero-sub p a:hover, li a:not(.btn):hover {
  text-decoration-color: var(--gold);
}
.nav-links a, .footer-main a, .btn, .brand { text-decoration: none !important; }
::selection { background: rgba(212, 175, 55, 0.3); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }

/* ---------- Typography ---------- */
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 600; letter-spacing: 0.01em; }
h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 1.06; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.12; }
h3 { font-size: 1.35rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--gold);
}
.eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--gold-dim); }
.lead { color: var(--muted); font-size: 1.08rem; max-width: 62ch; }
.center { text-align: center; }
.center .eyebrow::after { content: ''; width: 34px; height: 1px; background: var(--gold-dim); }
.section-head { margin-bottom: 52px; }
.section-head h2 { margin: 14px 0 16px; }
.section-head.center .lead { margin: 0 auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 30px; border-radius: 999px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  cursor: pointer; border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-2), var(--gold) 55%, var(--gold-dim));
  color: #16130a;
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.22);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(212, 175, 55, 0.34); }
.btn-ghost { background: transparent; color: var(--text); border-color: rgba(255, 255, 255, 0.22); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn-dark { background: #101014; color: var(--text); border-color: var(--line); }
.btn-dark:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(8, 8, 10, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 28px;
  height: 76px; display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 11px; line-height: 1; }
.brand-lion { height: 36px; width: auto; flex: none; }
.brand-text { display: flex; flex-direction: column; gap: 3px; }
.brand-name {
  font-family: var(--serif); font-size: 26px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--text);
}
.brand-name span { color: var(--gold); }
.brand-sub {
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.46em;
  text-transform: uppercase; color: var(--muted);
}
.nav-links { display: flex; align-items: center; gap: 34px; list-style: none; }
.nav-links a {
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  transition: color 0.2s;
  padding: 6px 0; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold); transition: width 0.25s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { margin-left: 8px; }
.nav-cta .btn { padding: 11px 22px; font-size: 12px; }
.nav-phone { display: inline-flex; align-items: center; gap: 7px; color: var(--gold); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; }

.hamburger {
  /* Was 40x32 (24px bars + 8px padding). Below the 44x44 minimum for a
     finger, and it is the only way into the menu on a phone. Sized up
     through padding and centring so the three bars look identical. */
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; background: none; border: none; cursor: pointer;
  width: 44px; min-width: 44px; height: 44px; flex: none; padding: 0; margin-right: -10px;
}
.hamburger span { width: 24px; height: 2px; background: var(--text); transition: all 0.3s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  /* Six links plus a quote button, fixed at top:76px with no height limit —
     on a short screen (landscape, or a small phone with large text) the last
     links and the CTA sat below the fold with nothing to scroll. dvh so the
     iOS URL bar collapsing does not change the answer. */
  display: none; position: fixed; top: 76px; left: 0; right: 0; z-index: 199;
  max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: rgba(10, 10, 13, 0.97);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  padding: 18px 28px 30px;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block; padding: 15px 4px;
  font-size: 15px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text); border-bottom: 1px solid var(--line-soft);
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu .btn { width: 100%; margin-top: 14px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 92vh; min-height: 92dvh;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 38%;
  transform: scale(1.06);
  animation: slowZoom 22s ease-out forwards;
}
@keyframes slowZoom { to { transform: scale(1.0); } }
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 8, 10, 0.94) 0%, rgba(8, 8, 10, 0.72) 42%, rgba(8, 8, 10, 0.28) 75%, rgba(8, 8, 10, 0.45) 100%),
    linear-gradient(0deg, var(--ink) 0%, rgba(8, 8, 10, 0) 30%);
}
.hero-inner { position: relative; z-index: 2; padding-top: 150px; padding-bottom: 90px; width: 100%; }
.hero h1 { margin: 20px 0 22px; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6); }
.hero h1 em { font-style: italic; color: var(--gold-2); }
.hero .lead { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(13, 13, 17, 0.65);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--muted);
}
.chip svg { flex: none; }

/* subpage hero */
.hero-sub { min-height: 56vh; min-height: 56dvh; }
.hero-sub .hero-inner { padding-top: 150px; padding-bottom: 70px; }

/* ---------- Fade-up animation ---------- */
.fade-up { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.hero .fade-up { transition-delay: calc(var(--d, 0) * 0.12s); }

/* ---------- Trust strip ---------- */
.trust-strip { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--ink-2); }
.trust-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 20px 56px; padding: 26px 28px;
  max-width: 1180px; margin: 0 auto;
}
.trust-item { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.trust-item img { height: 34px; width: auto; opacity: 0.85; filter: grayscale(35%); transition: filter 0.3s, opacity 0.3s; }
.trust-item:hover img { filter: grayscale(0); opacity: 1; }
.trust-item .stars { color: var(--gold); letter-spacing: 2px; font-size: 13px; }

/* ---------- Sections ---------- */
section { position: relative; }
.section { padding: 110px 0; }
.section-alt { background: var(--ink-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

/* ---------- Cards grid ---------- */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 36px 30px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative; overflow: hidden;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity 0.35s;
}
.card:hover { transform: translateY(-6px); border-color: var(--line); box-shadow: var(--shadow); }
.card:hover::before { opacity: 1; }
.card h3 { margin: 18px 0 10px; }
.card p { color: var(--muted); font-size: 0.95rem; }
.card .icon {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212, 175, 55, 0.09);
  border: 1px solid var(--line);
  color: var(--gold);
}
.card-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
}
.card-link svg { transition: transform 0.25s; }
.card:hover .card-link svg { transform: translateX(5px); }

/* ---------- Fleet cards ---------- */
.fleet-card {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  display: flex; flex-direction: column;
}
.fleet-card:hover { transform: translateY(-6px); border-color: var(--line); box-shadow: var(--shadow); }
.fleet-img {
  background:
    radial-gradient(ellipse at 50% 80%, rgba(212, 175, 55, 0.10), transparent 65%),
    linear-gradient(180deg, #1a1a22, #101016);
  padding: 34px 26px 10px; display: flex; align-items: flex-end; justify-content: center;
  min-height: 190px;
}
.fleet-img img { max-height: 130px; width: auto; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55)); transition: transform 0.35s ease; }
.fleet-card:hover .fleet-img img { transform: translateX(6px); }
.fleet-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.fleet-body h3 { margin-bottom: 4px; }
.fleet-meta { color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 12px; }
.fleet-body p { color: var(--muted); font-size: 0.93rem; flex: 1; }
.fleet-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fleet-tags span {
  font-size: 11px; letter-spacing: 0.05em; color: var(--muted);
  border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 12px;
}
.fleet-rate { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--muted); }
.fleet-rate strong { color: var(--gold-2); font-size: 16px; font-family: var(--serif); }

/* ---------- Split layout ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.split-img { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.split-img::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid rgba(212, 175, 55, 0.25); border-radius: var(--radius);
  pointer-events: none;
}
.split-img img { width: 100%; height: 100%; object-fit: cover; }
.split-img .offset-frame {
  content: ''; position: absolute; inset: 14px;
  border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 8px; pointer-events: none;
}
.split h2 { margin: 14px 0 20px; }
.split p { color: var(--muted); margin-bottom: 16px; }

/* ---------- Feature list ---------- */
.feature-list { list-style: none; margin-top: 24px; display: grid; gap: 14px; }
.feature-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--muted); }
.feature-list .tick {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(212, 175, 55, 0.12); border: 1px solid var(--line); color: var(--gold);
  font-size: 11px;
}
.feature-list strong { color: var(--text); font-weight: 600; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; text-align: center; }
.stat h3 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); color: var(--gold-2); font-weight: 600; }
.stat p { color: var(--muted); font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 8px; }

/* ---------- Amenities strip ---------- */
.amenity-note {
  margin: 26px auto 0; max-width: 720px; text-align: center;
  font-size: 13px; line-height: 1.65; color: var(--muted-2);
}
.amenities { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.amenity { text-align: center; padding: 28px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--panel); transition: border-color 0.3s, transform 0.3s; }
.amenity:hover { border-color: var(--line); transform: translateY(-4px); }
.amenity .icon { margin: 0 auto 14px; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(212, 175, 55, 0.09); border: 1px solid var(--line); color: var(--gold); }
.amenity p { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

/* ---------- Parallax band ---------- */
.parallax {
  position: relative; min-height: 46vh; display: flex; align-items: center;
  background-size: cover; background-position: center; background-attachment: fixed;
}
.parallax .shade { position: absolute; inset: 0; background: rgba(8, 8, 10, 0.68); }
.parallax .wrap { position: relative; z-index: 2; text-align: center; padding: 90px 28px; }
.parallax h2 { max-width: 20ch; margin: 14px auto 26px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: step; }
.step { position: relative; padding: 40px 30px 34px; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.step-num {
  font-family: var(--serif); font-size: 54px; line-height: 1; color: transparent;
  -webkit-text-stroke: 1px var(--gold-dim);
  margin-bottom: 18px;
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 0.94rem; }

/* ---------- Testimonials ---------- */
.quote-card {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 38px 34px; position: relative;
}
.quote-card::before {
  content: '\201C'; font-family: var(--serif); font-size: 90px; line-height: 0.5;
  color: rgba(212, 175, 55, 0.28); position: absolute; top: 38px; left: 28px;
}
.quote-card .stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 16px; font-size: 14px; }
.quote-card blockquote { font-family: var(--serif); font-size: 1.22rem; font-style: italic; line-height: 1.5; color: var(--text); margin-bottom: 22px; position: relative; z-index: 2; }
.quote-card figcaption { font-size: 13px; color: var(--muted); letter-spacing: 0.06em; }
.quote-card figcaption strong { color: var(--gold-2); display: block; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Rotating Google reviews ---------- */
.google-line {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 18px; font-size: 14px; color: var(--muted); flex-wrap: wrap;
}
.google-line .stars { color: var(--gold); letter-spacing: 2px; }
.google-line strong { color: var(--text); font-weight: 600; }
.google-line a { font-size: 13px; }
.review-rotator .quote-card { transition: opacity 0.42s ease, transform 0.42s ease; }
.review-rotator .quote-card.r-fading { opacity: 0; transform: translateY(8px); }
.review-rotator blockquote { min-height: 7.5em; }
.g-src { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; transition: border-color 0.3s; }
.faq-item.open { border-color: var(--line); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 26px; text-align: left;
  color: var(--text); font-family: var(--sans); font-size: 15.5px; font-weight: 600;
}
.faq-q .faq-arrow { flex: none; color: var(--gold); transition: transform 0.3s ease; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-a-inner { padding: 0 26px 24px; color: var(--muted); font-size: 0.95rem; }

/* ---------- Gallery strip ---------- */
.gallery-strip { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; }
.gallery-strip .g-item { border-radius: var(--radius); overflow: hidden; position: relative; min-height: 300px; }
.gallery-strip .g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gallery-strip .g-item:hover img { transform: scale(1.05); }
.gallery-strip .g-item::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(212, 175, 55, 0.2); border-radius: var(--radius); pointer-events: none; }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(212, 175, 55, 0.12), transparent 55%),
    linear-gradient(160deg, var(--panel-2), var(--ink-2));
  border: 1px solid var(--line); border-radius: 20px;
  padding: 70px 56px; text-align: center; position: relative; overflow: hidden;
}
.cta-band h2 { max-width: 22ch; margin: 14px auto 18px; }
.cta-band .lead { margin: 0 auto 34px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px;
  background: #0e0e13; border: 1px solid var(--line-soft); border-radius: 10px;
  color: var(--text); font-family: var(--sans); font-size: 15px;
  transition: border-color 0.25s, box-shadow 0.25s;
  -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23d4af37' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-dim); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}
.field textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: 12.5px; color: var(--muted-2); margin-top: 14px; }
.hidden { display: none !important; }
.form-success { text-align: center; padding: 60px 30px; }
.form-success h3 { color: var(--gold-2); font-size: 1.8rem; margin-bottom: 12px; }
.form-success p { color: var(--muted); }

/* ---------- Contact info blocks ---------- */
.contact-block { display: flex; gap: 18px; align-items: flex-start; padding: 24px 0; border-bottom: 1px solid var(--line-soft); }
.contact-block:last-child { border-bottom: none; }
.contact-block .icon { flex: none; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(212, 175, 55, 0.09); border: 1px solid var(--line); color: var(--gold); }
.contact-block h3 { font-size: 1.1rem; font-family: var(--sans); font-weight: 600; margin-bottom: 4px; }
.contact-block p, .contact-block a { color: var(--muted); font-size: 0.95rem; }
.contact-block a:hover { color: var(--gold); }

/* ---------- Footer ---------- */
footer { background: #060608; border-top: 1px solid var(--line-soft); position: relative; z-index: 2; }
.footer-main {
  max-width: 1180px; margin: 0 auto; padding: 70px 28px 50px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 44px;
}
.footer-main h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.footer-main ul { list-style: none; display: grid; gap: 11px; }
.footer-main ul a { color: var(--muted); font-size: 14px; transition: color 0.2s; }
.footer-main ul a:hover { color: var(--gold-2); }
.footer-about p { color: var(--muted); font-size: 13.5px; margin-top: 16px; max-width: 34ch; }
.footer-badges { display: flex; gap: 14px; margin-top: 22px; align-items: center; flex-wrap: wrap; }
.footer-badges img { height: 30px; width: auto; opacity: 0.75; }
.footer-contact li { color: var(--muted); font-size: 14px; display: flex; gap: 10px; align-items: center; }
.footer-contact svg { color: var(--gold); flex: none; }
.footer-bottom { border-top: 1px solid var(--line-soft); }
.footer-bottom-inner {
  max-width: 1180px; margin: 0 auto; padding: 22px 28px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  font-size: 12.5px; color: var(--muted-2);
}
.footer-legal a { color: var(--muted-2); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.footer-legal a:hover { color: var(--gold); border-bottom-color: var(--gold-dim); }
.footer-social { display: flex; gap: 16px; }
.footer-social a { color: var(--muted); transition: color 0.2s, transform 0.2s; display: inline-flex; }
.footer-social a:hover { color: var(--gold); transform: translateY(-2px); }
.footer-credit { padding: 12px 0 26px; text-align: center; }
.naveron-credit { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; opacity: 0.45; transition: opacity 0.2s; color: var(--muted); }
.naveron-credit:hover { opacity: 0.85; }
.naveron-text { font-size: 11px; letter-spacing: 0.5px; color: inherit; }
.naveron-logo { height: 16px; width: auto; color: inherit; }

/* ---------- Floating call button (mobile) ---------- */
.float-call {
  position: fixed; left: 20px; bottom: 22px; z-index: 300;
  display: none; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-2), var(--gold-dim));
  color: #16130a; box-shadow: 0 12px 30px rgba(212, 175, 55, 0.35);
}

/* ============================================================
   LENOX CONCIERGE — chat quote widget
   ============================================================ */
.lc-launch {
  position: fixed; right: 22px; bottom: 22px; z-index: 400;
  display: flex; align-items: center; gap: 11px;
  padding: 15px 22px; border-radius: 999px; border: 1px solid rgba(212, 175, 55, 0.5);
  background: linear-gradient(135deg, #16130a, #0d0d11);
  color: var(--gold-2); font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  cursor: pointer; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.12);
  transition: transform 0.25s, box-shadow 0.25s;
}
.lc-launch:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 24px rgba(212, 175, 55, 0.25); }
.lc-launch .lc-dot { width: 8px; height: 8px; border-radius: 50%; background: #58d67c; box-shadow: 0 0 10px rgba(88, 214, 124, 0.8); animation: lcPulse 2s infinite; }
@keyframes lcPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.lc-panel {
  position: fixed; right: 22px; bottom: 92px; z-index: 401;
  width: 390px; max-width: calc(100vw - 32px);
  height: 560px; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px);
  display: none; flex-direction: column;
  background: #0c0c10; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}
.lc-panel.open { display: flex; }
.lc-head {
  padding: 18px 20px; display: flex; align-items: center; gap: 13px;
  background: linear-gradient(135deg, #17140a, #101016);
  border-bottom: 1px solid var(--line);
}
.lc-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--gold-2), var(--gold-dim));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 19px; color: #16130a;
}
.lc-head-info { flex: 1; line-height: 1.25; }
.lc-head-info strong { display: block; font-size: 14.5px; letter-spacing: 0.04em; }
.lc-head-info span { font-size: 11.5px; color: #58d67c; }
.lc-close { background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; display: flex; }
.lc-close:hover { color: var(--text); }
.lc-body { flex: 1; overflow-y: auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.lc-msg { max-width: 86%; padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 1.5; animation: lcIn 0.3s ease; white-space: pre-line; }
@keyframes lcIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lc-msg.bot { align-self: flex-start; background: #16161d; border: 1px solid var(--line-soft); border-bottom-left-radius: 4px; color: var(--text); }
.lc-msg.user { align-self: flex-end; background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.12)); border: 1px solid var(--line); border-bottom-right-radius: 4px; color: var(--gold-2); }
.lc-msg.quote-box { background: linear-gradient(160deg, #17140a, #12121a); border: 1px solid var(--gold-dim); width: 86%; }
.lc-msg .lc-price { font-family: var(--serif); font-size: 30px; color: var(--gold-2); display: block; margin: 6px 0 2px; }
.lc-msg small { color: var(--muted); font-size: 11.5px; }
.lc-typing { align-self: flex-start; display: flex; gap: 5px; padding: 14px 18px; background: #16161d; border-radius: 14px; border-bottom-left-radius: 4px; }
.lc-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-dim); animation: lcBounce 1.2s infinite; }
.lc-typing span:nth-child(2) { animation-delay: 0.15s; }
.lc-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes lcBounce { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }
.lc-options { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 100%; animation: lcIn 0.3s ease; }
.lc-opt {
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--gold-dim); color: var(--gold-2);
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.03em;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.lc-opt:hover { background: rgba(212, 175, 55, 0.15); transform: translateY(-1px); }
.lc-inputrow { display: flex; gap: 9px; padding: 14px 16px; border-top: 1px solid var(--line-soft); background: #0a0a0e; }
.lc-inputrow input {
  flex: 1; padding: 12px 15px; border-radius: 999px;
  background: #14141a; border: 1px solid var(--line-soft); color: var(--text);
  font-family: var(--sans); font-size: 14px;
}
.lc-inputrow input:focus { outline: none; border-color: var(--gold-dim); }
.lc-send {
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; flex: none;
  background: linear-gradient(135deg, var(--gold-2), var(--gold-dim)); color: #16130a;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.lc-send:hover { transform: scale(1.06); box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35); }
.lc-note { font-size: 10.5px; color: var(--muted-2); text-align: center; padding: 0 16px 10px; background: #0a0a0e; }

/* ---------- Hero booking widget ---------- */
.bw {
  margin-top: 38px; max-width: 780px;
  background: rgba(9, 9, 12, 0.74);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 22px 22px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.bw-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.bw-tab {
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  color: var(--muted); font-family: var(--sans); font-size: 12px;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.bw-tab:hover { color: var(--text); }
.bw-tab.active { color: var(--gold-2); border-color: var(--gold-dim); background: rgba(212, 175, 55, 0.08); }
.bw-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bw .field label { font-size: 10.5px; margin-bottom: 6px; }
.bw .field select { padding: 12px 14px; font-size: 14px; }
.bw-hint p { color: var(--muted-2); font-size: 12.5px; padding: 12px 2px; }
.bw-action { margin-top: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bw-action .btn { padding: 13px 28px; }
.bw-terms { font-size: 11.5px; color: var(--muted-2); }
.bw-result {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  animation: lcIn 0.35s ease;
}
.bw-quote-info { flex: 1; min-width: 220px; }
.bw-title { font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
.bw-note { color: var(--muted); font-size: 12.5px; }
.bw-quote-act { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bw-price { font-family: var(--serif); font-size: 36px; color: var(--gold-2); line-height: 1; }
.bw-book { padding: 12px 22px; font-size: 12px; }
.hero-alt { margin-top: 20px; font-size: 13.5px; color: var(--muted); }
.hero-alt a { color: var(--gold-2); font-weight: 600; }

/* ---------- The Lenox Standard protocol ---------- */
.protocol { list-style: none; margin-top: 26px; }
.protocol li { display: flex; gap: 20px; padding: 17px 0; border-top: 1px solid var(--line-soft); align-items: flex-start; }
.protocol li:last-child { border-bottom: 1px solid var(--line-soft); }
.protocol .p-num {
  font-family: var(--serif); font-size: 26px; line-height: 1.25; min-width: 44px;
  color: transparent; -webkit-text-stroke: 1px var(--gold-dim);
}
.protocol strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 2px; }
.protocol p { color: var(--muted); font-size: 0.92rem; }

/* ---------- Segment (Who We Serve) cards ---------- */
.seg-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 340px; display: flex; align-items: flex-end;
  border: 1px solid var(--line-soft);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.seg-card:hover { transform: translateY(-6px); border-color: var(--line); box-shadow: var(--shadow); }
.seg-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.5s ease; }
.seg-card:hover .seg-bg { transform: scale(1.05); }
.seg-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 6, 8, 0.97) 0%, rgba(6, 6, 8, 0.88) 26%, rgba(6, 6, 8, 0.35) 55%, rgba(6, 6, 8, 0.1) 100%); }
.seg-body { position: relative; z-index: 2; padding: 26px 26px 28px; width: 100%; }
.seg-body h3, .seg-body .seg-tag { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); }
.seg-body p { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }
.seg-body h3 { margin-bottom: 6px; }
.seg-body p { color: var(--muted); font-size: 0.92rem; margin-bottom: 14px; }
.seg-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }

/* ---------- Hero video ---------- */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  filter: saturate(0.82) contrast(1.05) brightness(0.9);
}
@media (max-width: 960px) {
  .hero-video { display: none; } /* photo fallback on mobile — saves data & battery */
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-bg { animation: none; transform: none; }
  .fade-up { transition: none; opacity: 1; transform: none; }
}

/* ---------- Ambient inline videos ---------- */
.split-img video, .gallery-strip .g-item video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.gallery-strip .g-item video { position: absolute; inset: 0; }

/* ---------- Reels row (The Lenox Experience) ---------- */
.reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.reel-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 9 / 16; background: #0e0e13;
  border: 1px solid var(--line-soft);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.reel-card:hover { transform: translateY(-6px); border-color: var(--line); box-shadow: var(--shadow); }
.reel-card video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.85) contrast(1.03);
}
.reel-card::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid rgba(212, 175, 55, 0.18); border-radius: var(--radius);
  pointer-events: none;
}
.reels-cta { text-align: center; margin-top: 36px; }

/* ---------- Craft pass: unified image grade ---------- */
.hero-bg, .parallax { filter: saturate(0.82) contrast(1.04) brightness(0.96); }
.split-img img, .split-img video, .gallery-strip .g-item img, .gallery-strip .g-item video, .seg-bg { filter: saturate(0.85) contrast(1.03); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 40px 26px; }
  .amenities { grid-template-columns: repeat(3, 1fr); }
  .split { gap: 44px; }
  .footer-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  /* iOS zooms the page when focusing inputs under 16px — keep all form
     controls at 16px on touch layouts */
  .field input, .field select, .field textarea,
  .bw .field select, .lc-inputrow input { font-size: 16px; }
  .split-img video { max-height: 74vh; }
  .reels { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .nav-links, .nav-cta, .nav-phone { display: none; }
  .hamburger { display: flex; }
  .split { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .gallery-strip { grid-template-columns: 1fr 1fr; }
  .gallery-strip .g-item:first-child { grid-column: 1 / -1; }
  .parallax { background-attachment: scroll; }
  .section { padding: 80px 0; }
  .form-grid { grid-template-columns: 1fr; }
  .float-call { display: flex; }
  .lc-launch { right: 16px; bottom: 20px; padding: 14px 18px; }
  .lc-panel { right: 16px; }
}
@media (max-width: 960px) and (min-width: 641px) {
  .bw-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  /* Mobile simplification: sections marked .m-hide exist on desktop only.
     Phones get the corporate-page treatment — hero, essentials, one CTA. */
  .m-hide { display: none !important; }
  .review-rotator .r-desk { display: none; } /* phones rotate one card through all reviews */
  .review-rotator blockquote { min-height: 0; }
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .bw { padding: 16px; }
  .bw-fields { grid-template-columns: 1fr; }
  .bw-hint { display: none; }
  .bw-result { flex-direction: column; align-items: flex-start; }
  .amenities { grid-template-columns: repeat(2, 1fr); }
  .gallery-strip { grid-template-columns: 1fr; }
  .gallery-strip .g-item:first-child { grid-column: auto; }
  .cta-band { padding: 50px 26px; }
  .hero-inner { padding-top: 130px; padding-bottom: 70px; }
  .trust-inner { gap: 16px 28px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  /* The label used to be hidden here, leaving phone visitors an unlabelled
     circle where the site's main conversion action should be. Kept, just
     tightened — an icon alone does not say "get a price". */
  .lc-launch span.lc-label { font-size: 13px; letter-spacing: 0.06em; }
  .lc-launch { padding-left: 14px; padding-right: 16px; }
  .lc-panel { bottom: 86px; height: 70vh; }
}

/* ---------- Insights (blog) ---------- */
.article-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.article-meta .cat { color: var(--gold); }
.article-meta .dot { opacity: 0.4; }
.article-body { max-width: 760px; margin: 0 auto; }
.article-body p { color: var(--muted); margin: 0 0 22px; line-height: 1.85; font-size: 1.02rem; }
.article-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin: 52px 0 18px;
}
/* h3 was 1.18rem (18.9px) and looked SMALLER than the bold run-in labels
   under it ("The math worth noticing:", 16.3px Inter 600). Nominally the
   heading was bigger; optically it was not. Headings are Cormorant Garamond,
   whose x-height is roughly 0.36em against Inter's ~0.52em, so at 18.9px the
   letters you actually read were shorter than the 16.3px bold sans beneath.
   Section headings therefore ranked below their own body copy.
   Fixed by size and by air: ~22px at a 1000px viewport, and a bigger top
   margin so the break reads before you get to the words. Kept under h2
   (which lands ~26px at the same width) so the ladder still descends.
   If the display face ever changes, re-check this against the run-ins
   rather than trusting the rem values. */
.article-body h3 {
  font-size: clamp(1.38rem, 2.1vw, 1.58rem);
  margin: 46px 0 14px;
  line-height: 1.25;
}
.article-body ul, .article-body ol { color: var(--muted); margin: 0 0 24px; padding-left: 22px; line-height: 1.8; }
.article-body li { margin-bottom: 10px; }
.article-body li strong, .article-body p strong { color: var(--text); font-weight: 600; }
.article-body a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(212,175,55,0.35); }
.article-body a:hover { border-bottom-color: var(--gold); }
.article-body blockquote {
  margin: 32px 0; padding: 20px 26px; border-left: 2px solid var(--gold-dim);
  background: var(--ink-2); color: var(--text); font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; font-style: italic;
}
.article-cta {
  margin: 48px 0; padding: 34px 36px; border: 1px solid var(--line);
  border-radius: var(--radius); background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(212,175,55,0.02));
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.article-cta h3 { margin: 0 0 6px; }
.article-cta p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.insight-card { display: flex; flex-direction: column; }
.insight-card .ic-cat {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 12px;
}
.insight-card h3 { margin: 0 0 10px; font-size: 1.25rem; }
.insight-card h3 a { color: var(--text); text-decoration: none; }
.insight-card h3 a:hover { color: var(--gold); }
.insight-card .ic-date { margin-top: auto; padding-top: 16px; font-size: 0.78rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
@media (max-width: 960px) {
  .article-cta { padding: 26px 22px; }
}

/* ---------- LQC (Limo Anywhere) embedded quote form ---------- */
.lqc-embed {
  max-width: 860px; margin: 0 auto; padding: 26px 28px;
  background: #101014; border-radius: var(--radius);
  border: 1px solid var(--line);
}
.lqc-embed iframe { display: block; width: 100% !important; }
@media (max-width: 960px) { .lqc-embed { padding: 14px; } }

/* LQC embed: fixed min-height kills the pop-in layout jump; context bar
   shows the quoted ride carried over from "Book This Ride". */
.lqc-embed { min-height: 420px; }
.lqc-context {
  max-width: 860px; margin: 0 auto 18px; padding: 14px 20px;
  border: 1px solid rgba(212, 175, 55, 0.4); border-radius: var(--radius);
  background: rgba(212, 175, 55, 0.08); color: var(--text); font-size: 0.95rem;
}
.lqc-context strong { color: var(--gold); }

/* ---------- Native quote form (quote.html) ---------- */
.quote-form-wrap {
  max-width: 880px; margin: 0 auto; padding: 40px 44px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border: 1px solid var(--line); border-radius: var(--radius);
}
.seg-toggle { display: flex; gap: 10px; }
.seg-btn {
  flex: 1; padding: 12px 16px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line-soft);
  color: var(--muted); font-family: inherit; font-size: 0.92rem; font-weight: 600;
  letter-spacing: 0.03em; transition: all 0.2s ease;
}
.seg-btn:hover { border-color: var(--line); color: var(--text); }
.seg-btn.active {
  background: linear-gradient(135deg, rgba(212,175,55,0.22), rgba(212,175,55,0.08));
  border-color: var(--gold-dim); color: var(--gold);
}
@media (max-width: 960px) {
  .quote-form-wrap { padding: 26px 20px; }
  .seg-toggle { flex-direction: column; }
}

/* ============================================================
   MOBILE POLISH — from the iPhone-viewport audit (Aug 13).
   Fixes found at 390px: footer 2-column layout clipped the
   email address off-screen; the hero booking tabs wrapped onto
   two rows; footer links were 16px tap targets.
   ============================================================ */
@media (max-width: 620px) {
  /* Footer was 1fr 1fr at this width — the contact column is too
     narrow for booking@lenoxtransport.com, which ran off-screen. */
  .footer-main { grid-template-columns: 1fr; gap: 34px; }
  .footer-main ul a,
  .footer-contact li { font-size: 15px; }
  /* Long email/address strings must never overflow the viewport */
  .footer-contact li { align-items: flex-start; }
  .footer-contact li a,
  .footer-contact li span,
  .js-email, .js-email a {
    overflow-wrap: anywhere; word-break: break-word; min-width: 0;
  }
  /* Comfortable thumb targets in the footer link lists.
     ⚠️ MUST exclude .footer-contact. When this rule applied to the contact
     list too, `display:block; padding:9px 0` pushed the phone and email TEXT
     9px below their top-aligned 14px icons, while the address and hours rows
     (plain <span>, no <a>) stayed aligned — so only two of the four rows
     looked broken, which is why it read as a random glitch. */
  .footer-main ul { gap: 4px; }
  .footer-main ul:not(.footer-contact) a { display: block; padding: 9px 0; }
  /* Icon sits on the first text line even when the value wraps to two. */
  .footer-contact li { gap: 10px; }
  .footer-contact svg { margin-top: 4px; }

  /* ---- Mobile hero ----
     The kicker wraps to two lines at 390px and shoves the h1 down. */
  .hero-kicker { display: none; }

  /* The homepage hero photo is 1440x962 landscape. At 390x780 `cover` scales
     it to 1167x780 — the height matches EXACTLY, so background-position's
     vertical value does nothing and the browser crops ~two thirds of the
     WIDTH. Centred, that slice lands on the parking-garage ceiling above the
     roofline instead of the vehicle. Pull the crop left onto the grille and
     the Lenox plate. (Vertical tuning is wasted effort here — check the
     scaled height against the viewport before reaching for it.) */
  .hero-bg-home { background-position: 18% center; }

  /* ---- Hero stacking on mobile ----
     Desktop puts the booking widget ON the photo, which works at 1440px wide.
     On a phone the photo is behind ALL of it — headline, lead paragraph and a
     five-field form — so the shade has to be heavy enough to read text
     through, and the car ends up invisible wallpaper. Worse, "See My Price"
     fell below the fold on a 390x844 screen.

     So on mobile the hero becomes two stacked pieces: a photo band with the
     headline over it, then the widget on solid ink underneath. The band height
     (58vh) is tuned so the photo ends exactly where the widget begins —
     measured at 390x844: background bottom 490px, widget top 489px. If you
     change .hero-inner's padding or the h1 size, re-measure; the two numbers
     drifting apart is what makes this look accidental rather than designed.

     .hero must be display:block with min-height:0 or it keeps centring the
     whole stack, and overflow must be visible since the bg no longer fills it.
     slowZoom is off here — a 1.06 scale on a band-height background crops the
     car back out of frame.

     ⚠️ SCOPED TO :not(.hero-sub) ON PURPOSE. Sub-page heroes are short and
     have no widget; giving them a fixed 58vh background while their content
     is shorter than that would spill the photo past the hero and over the top
     of the next section. Only the homepage hero stacks. */
  .hero:not(.hero-sub) { min-height: 0; display: block; overflow: visible; }
  .hero:not(.hero-sub) .hero-bg,
  .hero:not(.hero-sub) .hero-shade { height: 58vh; bottom: auto; }
  .hero:not(.hero-sub) .hero-bg { transform: none; animation: none; }
  .hero:not(.hero-sub) .hero-shade {
    background: linear-gradient(180deg,
      rgba(8, 8, 10, 0.88) 0%,
      rgba(8, 8, 10, 0.40) 44%,
      rgba(8, 8, 10, 0.76) 80%,
      var(--ink) 100%);
  }
  .hero:not(.hero-sub) .hero-inner { padding-top: 118px; padding-bottom: 30px; }
  .hero:not(.hero-sub) .bw { margin-top: 20px; }

  /* Alternating .split sections collapse to one column on mobile, so an
     image-first section lands its photo directly under the previous
     section's photo — two photos back to back and a lot of dead scroll.
     Hide the second one rather than reordering, which would put the "02"
     heading below its own body copy. */
  .split-img.hide-mobile { display: none; }

  /* Hero booking widget: three tabs fit one row instead of
     orphaning "By the Day" onto a second line. */
  .bw-tabs { flex-wrap: nowrap; gap: 5px; }
  .bw-tab { flex: 1 1 0; min-width: 0; padding: 11px 6px; font-size: 11px; letter-spacing: 0.04em; text-align: center; }

  /* Keep the last of the page clear of the floating call/chat buttons */
  footer { padding-bottom: 92px; }
}

/* ---------- GRATUITY APPROVAL BLOCK ----------
   Shared by the hero widget, the Concierge and the quote page.
   The customer approves an itemised total before booking; the ride
   price stays all-inclusive and gratuity is shown as what it is —
   a tip that goes to the chauffeur, not company revenue. */
.grat-box {
  flex: 1 1 100%;
  margin-top: 18px; padding: 16px 18px;
  border: 1px solid var(--line-soft); border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}
.grat-head {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-2); font-weight: 600; margin-bottom: 12px;
}
.grat-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: 13.5px; padding: 5px 0; color: var(--muted);
}
.grat-row span:last-child { font-variant-numeric: tabular-nums; color: var(--text); }
.grat-total {
  margin-top: 8px; padding-top: 11px; border-top: 1px solid var(--line-soft);
  font-weight: 600; font-size: 15px; color: var(--text);
}
.grat-total span:last-child { font-family: var(--serif); font-size: 22px; color: var(--gold-2); }
.grat-picker { display: flex; gap: 8px; margin-top: 13px; }
.grat-btn {
  flex: 1 1 0; padding: 9px 0; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line-soft); border-radius: 7px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.grat-btn:hover { color: var(--text); border-color: var(--gold-2); }
.grat-btn.active { color: #12100c; background: var(--gold-2); border-color: var(--gold-2); }
.grat-fine { margin-top: 11px; font-size: 11.5px; line-height: 1.55; color: var(--muted-2); }
.bw-book-row { flex: 1 1 100%; margin-top: 14px; }
.bw-book-row .btn { width: 100%; }
.lqc-context-total {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--muted); line-height: 1.55;
}
/* Chat quote box needs a little more room now that it itemises. */
.lc-msg.quote-box { width: 94%; }
.lc-msg.quote-box .grat-box { margin-top: 14px; padding: 13px 14px; }
.lc-msg.quote-box .grat-row { font-size: 12.5px; }
.lc-msg.quote-box .grat-total span:last-child { font-size: 19px; }
.lc-msg.quote-box .grat-btn { padding: 8px 0; font-size: 12px; }

/* ---------- Legal pages (privacy, terms) ---------- */
.legal-body { max-width: 78ch; }
.legal-body h2 { margin-top: 38px; }
.legal-body ul { margin: 14px 0; }
.legal-body li { margin-bottom: 9px; }
.legal-updated { color: var(--muted-2); font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 26px; }
.legal-confirm { border-left: 2px solid var(--gold-dim); padding-left: 16px; }
.form-disclosure { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--muted-2); }
.form-disclosure a { color: var(--muted); border-bottom: 1px solid var(--line); }
.form-disclosure a:hover { color: var(--gold); }

/* ----- Address autocomplete (see ADDRESS AUTOCOMPLETE in main.js) ----- */
.ac-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
  margin-top: 6px; max-height: 288px; overflow-y: auto;
  background: #0e0e13; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}
.ac-item {
  padding: 11px 16px; cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 2px;
}
.ac-item:last-child { border-bottom: 0; }
.ac-item:hover, .ac-item.is-active { background: rgba(212, 175, 55, 0.09); }
.ac-main { font-size: 14.5px; color: var(--text); }
.ac-sec { font-size: 12.5px; color: var(--muted-2); }

/* ----- Quote form: voided approval + capacity note ----- */
.lqc-context-void { color: #e8b4b4 !important; }
.field-note {
  margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--gold-2);
}