/* ============================================================
   GO DETAILING — VISUAL POLISH LAYER (v16)
   Loads AFTER wireframe.css + tokens.css.
   Refines the look. Never breaks existing layout.
   ============================================================ */

/* ─────────────────────────────────────────────
   GLOBAL FOUNDATION
   ───────────────────────────────────────────── */

body {
  background:
    radial-gradient(1200px 600px at 0% -10%, rgba(216,227,236,.45), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(255,241,242,.55), transparent 55%),
    var(--surface-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" on, "cv11" on;
}

/* Type rhythm refinements */
h1, h2, h3, h4, .h-display {
  letter-spacing: var(--ls-tight);
}

p { color: var(--text-secondary); }

/* Selection */
::selection {
  background: var(--brand);
  color: #fff;
}

/* Focus rings — visible everywhere */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* Smooth all transitions (interactive elements only) */
a, button, .pill, .chip, .card, .pkg-card, .rating-card,
.step-card, .steam-card, .blog-card, input, select, textarea {
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

/* ─────────────────────────────────────────────
   REMOVE DEV WIREFRAME CHROME
   ───────────────────────────────────────────── */

/* Hide all dev wireframe chrome */
.wireframe-tabs,
.wf-watermark,
.wf-page-label,
.wireframe-label { display: none !important; }

/* Booking preview-step dev strip — handled by adding .dev-only class in HTML */
.dev-only { display: none !important; }

/* Demote wireframe-section labels to invisible (keep structure)
   IMPORTANT: do NOT force background:transparent — sections may have inline
   dark backgrounds (e.g. showroom-reveal). Only neutralize wf-only chrome. */
.wf-section {
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.wf-section::before { display: none !important; }

/* Reset transparent only for sections that don't carry inline bg */
.wf-section:not([style*="background"]):not(.wf-footer) { background: transparent; }

/* ─────────────────────────────────────────────
   TOP NAV (wf-topbar) — refined glass nav
   ───────────────────────────────────────────── */

.wf-topbar {
  background: var(--nav-bg) !important;
  -webkit-backdrop-filter: var(--nav-blur);
  backdrop-filter: var(--nav-blur);
  border-bottom: var(--nav-border);
  box-shadow: var(--elev-1);
  z-index: var(--z-sticky);
}

.wf-logo-mark {
  background: var(--carbon-900);
  color: #fff;
  border-radius: var(--radius-xs);
  font-weight: 700;
  letter-spacing: -0.02em;
  box-shadow: var(--elev-1);
}

.wf-logo-text .lg {
  font-family: var(--font-display);
  letter-spacing: var(--ls-tight);
}

.wf-nav a {
  color: var(--nav-link-color);
  font-weight: 500;
  border-radius: var(--radius-pill);
  padding: 8px 14px;
}
.wf-nav a:hover {
  color: var(--nav-link-color-hover);
  background: var(--nav-link-active-bg);
}

.wf-cta-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--carbon-50);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
}
.wf-cta-icon:hover {
  background: var(--carbon-900);
  color: #fff;
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────── */

.btn, .hero-cta-primary, .hero-cta-ghost, .pkg-cta, button.btn-primary {
  border-radius: var(--btn-radius);
  font-family: var(--font-display);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--ls-tight);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  box-shadow: var(--btn-shadow);
  position: relative;
  overflow: hidden;
}

.btn-primary, .hero-cta-primary, .pkg-cta {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border: 1px solid transparent;
}
.btn-primary:hover, .hero-cta-primary:hover, .pkg-cta:hover {
  background: var(--btn-primary-bg-hover);
  box-shadow: 0 12px 28px rgba(230,0,18,.28), 0 4px 8px rgba(230,0,18,.18);
  transform: translateY(-1px);
}
.btn-primary:active, .hero-cta-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--btn-dark-bg);
  color: #fff;
  border: 1px solid var(--carbon-700);
}
.btn-secondary:hover {
  background: var(--btn-dark-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--elev-3);
}

.btn-ghost, .hero-cta-ghost {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover, .hero-cta-ghost:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.5);
}

/* light-bg ghost */
.btn-ghost.btn-ghost--light,
.pkg-card .btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}
.btn-ghost.btn-ghost--light:hover {
  background: var(--carbon-50);
  border-color: var(--border-strong);
}

/* ─────────────────────────────────────────────
   HERO — overlay & rhythm
   ───────────────────────────────────────────── */

.hero-v {
  background: var(--carbon-950);
}
.hero-v-overlay {
  background: var(--hero-overlay) !important;
}

.hero-v-content {
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}

/* Force the hero headline to exactly 2 lines */
.hero-v-content h1 {
  max-width: none !important;
  white-space: nowrap;
  font-size: clamp(1.9rem, 0.6rem + 3vw, 3.25rem) !important;
  line-height: 1.12 !important;
}
.hero-v-content h1 .tw-wrap {
  white-space: nowrap;
}
@media (max-width: 760px) {
  .hero-v-content h1 {
    /* Keep 2 lines on mobile by allowing the first line to fit "Premium Mobile Steam Detailing" */
    white-space: nowrap;
    font-size: clamp(0.95rem, 4.4vw, 1.55rem) !important;
    letter-spacing: -0.02em;
  }
}
@media (max-width: 380px) {
  .hero-v-content h1 {
    font-size: 3.8vw !important;
  }
}

.tw-text, #typewriter {
  font-family: var(--font-display);
  letter-spacing: var(--ls-tighter);
  /* Cycling city in brand red */
  color: var(--brand-red) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.tw-cursor { color: var(--brand-red) !important; }

.hero-sub {
  color: rgba(255,255,255,.92);
  font-weight: 400;
}

.hero-microline {
  color: rgba(255,255,255,.7);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-wide);
}

.hero-transition {
  color: rgba(255,255,255,.78);
  border-radius: var(--radius-pill);
  transition: all var(--dur-base) var(--ease-out);
}
.hero-transition:hover {
  color: #fff;
  transform: translateY(2px);
}

/* ─────────────────────────────────────────────
   TRUST BAR / RATING CARDS
   (wireframe.css has the Aria-style design.
    polish.css ONLY tightens spacing — does NOT override
    the warm peach gradient or original card styling.)
   ───────────────────────────────────────────── */

.trust-stats-bar {
  padding-top: clamp(48px, 6vw, 80px) !important;
  padding-bottom: clamp(48px, 6vw, 80px) !important;
}

.trust-band-pill {
  /* keep Aria-style pill from wireframe.css — just polish slightly */
  transition: all var(--dur-base) var(--ease-out);
}
.trust-band-pill:hover {
  background: var(--carbon-900);
  color: #fff;
  border-color: var(--carbon-900);
  transform: translateY(-1px);
}

/* Rating card hover lift only — keep original aesthetic */
.rating-card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.rating-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(15,17,21,.09); }

/* ─────────────────────────────────────────────
   SHOWROOM REVEAL — preserve inline dark bg + restore contrast
   ───────────────────────────────────────────── */

#showroom-reveal {
  background: var(--carbon, #0F1115) !important;
  color: #fff !important;
}
#showroom-reveal .reveal-copy h2,
#showroom-reveal .reveal-copy .lead,
#showroom-reveal .reveal-bullets li {
  color: #fff !important;
}
#showroom-reveal .reveal-copy .lead { color: rgba(255,255,255,.82) !important; }
#showroom-reveal .reveal-bullets li { color: rgba(255,255,255,.92) !important; }
#showroom-reveal .reveal-bullets .rb-check {
  color: var(--brand-red);
  font-weight: 800;
  margin-right: 8px;
}
#showroom-reveal .reveal-photo-tag {
  background: rgba(15,17,21,.78);
  color: #fff;
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
}
.eyebrow.eyebrow-light { color: #FF8088 !important; }
.eyebrow.eyebrow-light::before { background: #FF8088 !important; }

/* Final CTA section — preserve inline dark bg */
section[data-label*="Final CTA"] > div[style*="background:var(--carbon)"] {
  background: var(--carbon) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────
   REASSURANCE PILLAR ICONS
   ───────────────────────────────────────────── */

.pillar-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgba(230, 0, 18, 0.08);
  color: var(--brand-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.pillar-icon svg { width: 28px; height: 28px; }

/* ─────────────────────────────────────────────
   HOW IT WORKS — Aria-style warm section + refined cards
   ───────────────────────────────────────────── */

/* Wrap the section in a soft warm background to match Aria-trust style */
section#how {
  background:
    radial-gradient(circle at 20% 0%, rgba(230, 0, 18, 0.04), transparent 40%),
    linear-gradient(180deg, var(--showroom) 0%, #F3EEE4 100%);
  border-top: 1px solid rgba(15,17,21,.06);
  border-bottom: 1px solid rgba(15,17,21,.06);
}

.step-card {
  background: #ffffff;
  border: 1px solid rgba(15,17,21,.06);
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(15,17,21,.06);
  padding: 28px;
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(15,17,21,.09);
}

.step-badge {
  position: absolute;
  top: 20px; right: 20px;
  background: var(--carbon-900);
  color: #fff;
  width: 32px; height: 32px;
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(15,17,21,.18);
}

.step-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgba(230, 0, 18, 0.08);
  color: var(--brand-red);
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 0 18px;
}
.step-icon svg { width: 26px; height: 26px; stroke: var(--brand-red); }

/* Modern duotone step icons — bold solid red on cream tile */
.step-icon.step-icon--modern {
  width: 72px; height: 72px;
  border-radius: 20px;
  background: #FFF6F6;
  border: 1px solid rgba(230, 0, 18, 0.12);
  box-shadow: 0 2px 0 rgba(255,255,255,1) inset, 0 10px 24px -12px rgba(230,0,18,.45);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.step-icon.step-icon--modern svg {
  width: 44px; height: 44px;
  stroke: none;
  filter: drop-shadow(0 2px 4px rgba(230,0,18,.25));
}
.step-card:hover .step-icon.step-icon--modern {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 2px 0 rgba(255,255,255,1) inset, 0 16px 32px -12px rgba(230,0,18,.55);
}

.step-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--carbon);
  margin: 0 0 8px;
}
.step-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--slate);
  margin: 0;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 800;
  color: var(--brand-red);
  font-family: var(--font-display);
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: currentColor;
}

/* ─────────────────────────────────────────────
   STEAM TECH BENTO — fixed grid, no orphans
   ───────────────────────────────────────────── */

/* Balanced 4-col grid: hero full-width on top, then 2x2 features below */
.steam-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}
@media (max-width: 900px) {
  .steam-grid { grid-template-columns: 1fr !important; }
}

.steam-card { grid-column: span 2; }
.steam-card--hero { grid-column: span 4 !important; }
@media (max-width: 900px) {
  .steam-card, .steam-card--hero { grid-column: span 1 !important; }
}

.steam-card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--elev-1);
  padding: var(--card-padding);
  position: relative;
  overflow: hidden;
}
.steam-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--elev-3);
}
.steam-card--hero {
  background: linear-gradient(135deg, var(--carbon-900) 0%, var(--carbon-800) 100%);
  color: #fff;
  border-color: var(--carbon-700);
  box-shadow: var(--elev-3);
}
.steam-card--hero::before {
  content: "";
  position: absolute;
  top: -50%; right: -20%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(216,227,236,.18), transparent 60%);
  pointer-events: none;
}
.steam-card--hero h3, .steam-card--hero p { color: #fff; }
.steam-card--hero p { color: rgba(255,255,255,.78); }

/* Steam feature card icon — tinted square */
.steam-card:not(.steam-card--hero) .icon-pill {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(230, 0, 18, 0.08);
  color: var(--brand-red);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.steam-card:not(.steam-card--hero) .icon-pill svg { width: 22px; height: 22px; }

.steam-card--hero .icon-pill {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  position: relative; z-index: 1;
}
.steam-card--hero .icon-pill svg { width: 22px; height: 22px; }

/* ─────────────────────────────────────────────
   PACKAGE CARDS
   ───────────────────────────────────────────── */

.pkg-grid { gap: var(--space-7); }

.pkg-card {
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius-lg);
  box-shadow: var(--elev-2);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
}
.pkg-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--elev-4);
  border-color: var(--border-default);
}

.pkg-card--popular {
  background: linear-gradient(180deg, var(--carbon-900) 0%, var(--carbon-800) 100%);
  color: #fff;
  border: 1px solid var(--carbon-700);
  box-shadow: var(--elev-4);
  transform: translateY(-6px);
}
.pkg-card--popular:hover {
  transform: translateY(-10px);
  box-shadow: var(--elev-5);
}
.pkg-card--popular h3,
.pkg-card--popular .price-dollars,
.pkg-card--popular .price-cents { color: #fff; }
.pkg-card--popular p { color: rgba(255,255,255,.78); }
.pkg-card--popular .pkg-features li { color: rgba(255,255,255,.86); }

.popular-tag, .tier-ribbon {
  position: absolute;
  top: 0; right: var(--space-7);
  background: var(--brand);
  color: #fff;
  padding: 6px 14px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  box-shadow: var(--elev-2);
}

.price-dollars {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--ls-tighter);
  font-size: var(--fs-48);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.price-cents {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 600;
  color: var(--text-secondary);
  vertical-align: super;
}

.pkg-features li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
}
.pkg-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: 700;
}
.pkg-card--popular .pkg-features li::before {
  color: #FF8088;
}
/* feat-hot rows use their own bolt SVG — disable the check */
.pkg-features li.feat-hot::before {
  content: "" !important;
  color: transparent !important;
}

/* Tier labels — clean type-only chips, no gradient boxes */
.tier-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.tier-label--bronze {
  background: rgba(184, 115, 51, 0.10);
  color: #8B5A2B;
  border: 1px solid rgba(184, 115, 51, 0.22);
}
.tier-label--silver {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.22);
}
.tier-label--platinum {
  background: rgba(15,17,21,0.05);
  color: var(--carbon-900);
  border: 1px solid rgba(15,17,21,0.10);
}

/* Reposition popular tag inside dark card */
.pkg-card--popular {
  padding-top: 36px !important;
}
.popular-tag {
  position: absolute !important;
  top: 14px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: var(--brand-red) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(230,0,18,.32);
  white-space: nowrap;
  z-index: 2;
}

/* Center tier label in package cards */
.pkg-card .tier-label { display: block; margin: 0 auto 0; text-align: center; width: fit-content; }
.pkg-card--popular .tier-label { margin-top: 12px; }

/* feat-hot rows — add a bolt SVG marker on a separate element */
.pkg-features li.feat-hot {
  padding-left: var(--space-6);
  position: relative;
}
.pkg-features li.feat-hot::after {
  content: "";
  position: absolute;
  left: 0; top: 0.4em;
  width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E60012'><path d='M13 2L4.09 12.97a.5.5 0 0 0 .41.79H11l-2 8.24L19.91 11.03a.5.5 0 0 0-.41-.79H13L13 2z'/></svg>") no-repeat center / contain;
}
.pkg-card--popular .pkg-features li.feat-hot::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF8088'><path d='M13 2L4.09 12.97a.5.5 0 0 0 .41.79H11l-2 8.24L19.91 11.03a.5.5 0 0 0-.41-.79H13L13 2z'/></svg>") no-repeat center / contain;
}

/* Strip the duplicated ✓ glyph rendered inline in the HTML */
.pkg-features li { list-style: none; }

/* ─────────────────────────────────────────────
   BEFORE/AFTER SLIDER
   ───────────────────────────────────────────── */

.ba-wrap {
  border-radius: var(--card-radius-lg);
  box-shadow: var(--elev-3);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.ba-handle {
  background: #fff;
  box-shadow: var(--elev-3);
}
.ba-label {
  border-radius: var(--radius-pill);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  font-size: var(--fs-12);
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* .ba-cap / .ba-caption styling lives in inline <style> in homepage.html (light theme cards) */

/* ─────────────────────────────────────────────
   REVIEWS MARQUEE — narrower fade so cards aren't clipped
   ───────────────────────────────────────────── */

.reviews-marquee {
  /* Smooth ~8% edge fade — partial cards look intentional (motion), not clipped */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  padding-block: 8px;
}

.google-card, .review-card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--elev-1);
  padding: var(--space-6);
}
.google-card:hover { box-shadow: var(--elev-2); }

.reviewer-avatar {
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--brand), var(--red-700));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}

.stars { color: #F5A524; }

/* ─────────────────────────────────────────────
   FAQ — single plus icon, refined accordion
   ───────────────────────────────────────────── */

.faq-item {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--elev-1);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.faq-item:hover { box-shadow: var(--elev-2); }

.faq-q {
  position: relative;
  padding: var(--space-5) calc(var(--space-6) + 36px) var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-16);
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  display: block;
}
.faq-q::after {
  content: "";
  position: absolute;
  right: var(--space-6);
  top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  color: var(--text-muted);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-item.open .faq-q::after {
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
  color: var(--brand-red);
  transform: translateY(-50%) rotate(180deg);
}

.faq-a {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

/* Show first open answer with the question header (state must be visible) */
.faq-item.open { box-shadow: var(--elev-2); }
.faq-item.open .faq-q { color: var(--carbon-900); }

/* ─────────────────────────────────────────────
   SERVICE AREAS — refined header, calm pills
   ───────────────────────────────────────────── */

.areas-v2 {
  background:
    radial-gradient(circle at 20% 0%, rgba(230, 0, 18, 0.04), transparent 40%),
    linear-gradient(180deg, var(--showroom) 0%, #F3EEE4 100%) !important;
  border-top: 1px solid rgba(15,17,21,.06);
  border-bottom: 1px solid rgba(15,17,21,.06);
}

.areas-v2-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-7);
}
.areas-v2-head .eyebrow { margin-bottom: 14px; }

.areas-v2-title {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3.8vw, 44px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--carbon-900) !important;
  margin: 12px 0 12px !important;
  text-align: center;
}
.areas-v2-lead {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 540px;
}

/* Calm white pills with hairline border — not screaming black blocks */
.area-pill, .areas-v2-pills .area-pill {
  background: #fff !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-pill) !important;
  padding: 9px 16px !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  color: var(--text-primary) !important;
  box-shadow: 0 1px 2px rgba(15,17,21,.04) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.area-pill svg { color: var(--brand-red); opacity: 1 !important; width: 12px !important; height: 12px !important; }
.area-pill:hover {
  background: var(--carbon-900) !important;
  color: #fff !important;
  border-color: var(--carbon-900) !important;
  transform: translateY(-1px);
}
.area-pill:hover svg { color: #fff; }

/* ─────────────────────────────────────────────
   FOOTER REFINEMENT
   ───────────────────────────────────────────── */

footer, .footer {
  background: var(--carbon-950);
  color: var(--text-inverse-muted);
}
footer a { color: rgba(255,255,255,.78); }
footer a:hover { color: #fff; }

/* ─────────────────────────────────────────────
   BOOKING FLOW POLISH
   ───────────────────────────────────────────── */

.booking-step,
.book-step,
.step-shell {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius-lg);
  box-shadow: var(--elev-2);
}

.progress-dot, .step-dot {
  transition: all var(--dur-base) var(--ease-out);
}
.progress-dot.active, .step-dot.active {
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(230,0,18,.15);
}

.summary-rail, .booking-summary {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius-lg);
  box-shadow: var(--elev-3);
  position: sticky;
  top: 100px;
}

/* Booking option cards */
.option-card,
.addon-card,
.vehicle-card,
.package-option {
  background: var(--card-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--card-radius);
  box-shadow: var(--elev-1);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.option-card:hover,
.addon-card:hover,
.vehicle-card:hover,
.package-option:hover {
  border-color: var(--carbon-700);
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}
.option-card.selected,
.addon-card.selected,
.vehicle-card.selected,
.package-option.selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: var(--elev-2), 0 0 0 2px var(--brand);
}

/* Inputs / Forms */
input, select, textarea {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: var(--input-font-size);
  font-family: var(--font-body);
  color: var(--text-primary);
  width: 100%;
}
input:hover, select:hover, textarea:hover {
  border-color: var(--input-border-hover);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--focus-ring);
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted);
}
label { color: var(--text-primary); font-weight: 500; }

/* ─────────────────────────────────────────────
   BLOG HUB
   ───────────────────────────────────────────── */

.featured-post, .blog-featured {
  background: linear-gradient(135deg, var(--carbon-900), var(--carbon-800));
  color: #fff;
  border-radius: var(--card-radius-lg);
  box-shadow: var(--elev-4);
  overflow: hidden;
  position: relative;
}
.featured-post h2, .featured-post h3,
.blog-featured h2, .blog-featured h3 { color: #fff; }
.featured-post p, .blog-featured p { color: rgba(255,255,255,.78); }
.featured-post .eyebrow,
.blog-featured .eyebrow { color: #FF8088; }

.blog-card, .article-card, .post-card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--elev-1);
  overflow: hidden;
  transition: all var(--dur-base) var(--ease-out);
}
.blog-card:hover, .article-card:hover, .post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--elev-3);
}

.blog-card h3, .article-card h3, .post-card h3 {
  font-family: var(--font-display);
  letter-spacing: var(--ls-tight);
}

/* Pillar / bento blocks on blog */
.pillar-card, .topic-card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--elev-1);
  padding: var(--space-7);
  transition: all var(--dur-base) var(--ease-out);
}
.pillar-card:hover, .topic-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--elev-3);
}

/* Category chips */
.category-chip, .blog-chip, [data-cat] {
  background: var(--chip-bg);
  color: var(--chip-fg);
  border: var(--chip-border);
  border-radius: var(--chip-radius);
  padding: 8px 14px;
  font-size: var(--fs-13);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all var(--dur-base) var(--ease-out);
}
.category-chip:hover, .blog-chip:hover {
  border-color: var(--carbon-700);
  transform: translateY(-1px);
}
.category-chip.active, .blog-chip.active,
[data-cat].active {
  background: var(--chip-bg-active);
  color: var(--chip-fg-active);
  border-color: var(--chip-bg-active);
}

/* Search input */
#blogSearchInput {
  border-radius: var(--radius-pill);
  padding-left: 48px;
  background-color: #fff;
}

/* ─────────────────────────────────────────────
   ACCOUNT DASHBOARD
   ───────────────────────────────────────────── */

.dash-card, .account-card, .booking-row {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--elev-1);
  padding: var(--card-padding);
  transition: all var(--dur-base) var(--ease-out);
}
.dash-card:hover, .booking-row:hover {
  box-shadow: var(--elev-2);
}

.dash-stat {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: var(--ls-tighter);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────
   REVEAL ANIMATIONS — refined
   ───────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.in-view, .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─────────────────────────────────────────────
   MARQUEE / TICKER
   ───────────────────────────────────────────── */

.reviews-track {
  animation-timing-function: linear;
}

@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none !important; }
}

/* ─────────────────────────────────────────────
   SECTION RHYTHM — tightened, no double-padding
   wireframe.css already sets .section-spacing { padding: 64px 0 }.
   Override to a calmer 56px rhythm and don't add extra to <section>.
   ───────────────────────────────────────────── */

section.section-spacing {
  padding-top: clamp(48px, 5vw, 72px) !important;
  padding-bottom: clamp(48px, 5vw, 72px) !important;
}

/* ─────────────────────────────────────────────
   MOBILE STICKY CTA
   ───────────────────────────────────────────── */

.mobile-sticky {
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -8px 24px rgba(15,17,21,.08);
}

/* ─────────────────────────────────────────────
   UTILITIES
   ───────────────────────────────────────────── */

.lift-hover { transition: all var(--dur-base) var(--ease-out); }
.lift-hover:hover { transform: translateY(-2px); box-shadow: var(--elev-3); }

img { max-width: 100%; height: auto; }

/* Reduced motion: kill all transforms */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────
   REAL LOGO IMAGE (replaces GD square + text)
   ───────────────────────────────────────────── */

/* Hide ALL inner placeholder children (text mark, wrapper, bare spans) */
.wf-logo > * { display: none !important; }
.wf-logo .wf-logo-mark,
.wf-logo .wf-logo-text,
.wf-logo > span { display: none !important; }
/* Also nuke any text nodes — handled via font-size 0 fallback */
.wf-logo { font-size: 0 !important; line-height: 0 !important; }

/* Topbar logo: light variant (works on cream/white) */
.wf-logo {
  display: inline-block !important;
  width: 168px;
  height: 46px;
  background-image: url("logo-godetailing-transparent.png");
  background-image: image-set(url("logo-godetailing-transparent.webp") type("image/webp"), url("logo-godetailing-transparent.png") type("image/png"));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  vertical-align: middle;
}

/* Larger footer / hero version */
.wf-logo.wf-logo-lg {
  width: 220px;
  height: 60px;
}

/* Dark footer: use the white/red variant so it reads against carbon */
.wf-footer .wf-logo,
[style*="background:var(--carbon)"] .wf-logo,
section[data-label*="Final CTA"] .wf-logo,
#showroom-reveal .wf-logo {
  background-image: url("logo-godetailing-on-dark.png");
  background-image: image-set(url("logo-godetailing-on-dark.webp") type("image/webp"), url("logo-godetailing-on-dark.png") type("image/png"));
}

/* Mobile: smaller topbar logo */
@media (max-width: 700px) {
  .wf-logo { width: 134px; height: 38px; }
  .wf-logo.wf-logo-lg { width: 180px; height: 52px; }
}

/* ─────────────────────────────────────────────
   MODERN VEHICLE ICONS — bigger, with red accent on active
   ───────────────────────────────────────────── */
.vehicle-card .v-icon {
  width: 84px !important;
  height: 46px !important;
  margin: 4px auto 10px;
  color: #1a1d24;
  transition: color .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.vehicle-card:hover .v-icon { transform: translateY(-2px) scale(1.04); }
.vehicle-card.active .v-icon,
.vehicle-card.selected .v-icon { color: var(--brand-red); }
.vehicle-card .v-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ─────────────────────────────────────────────
   PHOTO-BASED VEHICLE CARDS (replaces SVG icons)
   ───────────────────────────────────────────── */
.vehicle-card {
  padding: 14px 14px 16px !important;
}
.vehicle-card .v-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--showroom, #FAF8F4);
  margin-bottom: 10px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.vehicle-card .v-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.vehicle-card:hover .v-photo img { transform: scale(1.05); }
.vehicle-card .v-name {
  display: block;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--carbon);
  margin-top: 4px;
  letter-spacing: -0.005em;
}
.vehicle-card.active .v-name,
.vehicle-card.selected .v-name { color: var(--brand-red); }

/* Hide all the removed/legacy children if any remain */
.vehicle-card .v-seats,
.vehicle-card .v-sub,
.vehicle-card .v-icon { display: none !important; }

/* ═════════════════════════════════════════════════════════
   LUXURY "HOW IT WORKS" — Editorial 3-step flow (v2)
   Matches reference: red eyebrow + red italic accent in
   title, gold gradient line-art icons with sparkles,
   inline gold connector arrows between steps.
   ═════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');

.how-lux {
  background: linear-gradient(180deg, #FAF8F4 0%, #F6F2E9 50%, #FAF8F4 100%) !important;
  padding-block: clamp(80px, 9vw, 130px) !important;
  position: relative;
  overflow: hidden;
}
.how-lux::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 40% at 50% 0%, rgba(201,168,106,.08), transparent 70%),
    radial-gradient(60% 60% at 50% 100%, rgba(15,17,21,.02), transparent 70%);
  pointer-events: none;
}
.how-lux .container { position: relative; z-index: 1; }

/* ── Head ── */
.how-lux__head {
  max-width: 1100px;
  margin: 0 auto clamp(60px, 7vw, 96px);
  text-align: center;
}

.how-lux__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #E60012; /* brand red */
  margin-bottom: 26px;
}
.how-lux__eyebrow::before,
.how-lux__eyebrow::after {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1.5px;
  background: #E60012;
  border-radius: 1px;
}

.how-lux__title {
  font-family: 'Playfair Display', 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #0F1115;
  margin: 0;
}
.how-lux__title em {
  font-style: italic;
  font-weight: 500;
  color: #E60012;
}

/* ── Flow row ── */
.how-lux__flow {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1280px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 0;
}

/* ── Step column ── */
.how-lux__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 18px;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}

/* Numeral — plain "1, 2, 3" in a thin gold circle */
.how-lux__num {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  color: #C9A86A;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #C9A86A;
  border-radius: 50%;
  background: transparent;
  margin-bottom: 24px;
  transition: background-color .4s ease, transform .4s ease, border-color .4s ease;
}

/* Icon — bigger, illustrative, gold-gradient line art */
.how-lux__icon {
  width: 100%;
  max-width: 220px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.how-lux__icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Heading with gold underline accent */
.how-lux__h {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(22px, 1.9vw, 28px);
  letter-spacing: -0.005em;
  color: #0F1115;
  margin: 0 0 14px;
  line-height: 1.25;
  position: relative;
  display: inline-block;
}
.how-lux__h::after {
  content: "";
  display: block;
  width: 42px;
  height: 1.5px;
  background: #C9A86A;
  margin: 10px auto 0;
  border-radius: 1px;
}

.how-lux__p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #6B6F76;
  max-width: 320px;
  margin: 6px auto 0;
  font-weight: 400;
}

/* ── Connector arrow between steps ── */
.how-lux__arrow {
  list-style: none;
  align-self: start;
  width: clamp(70px, 9vw, 130px);
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* align to icon mid-line: 50px (num) + 24px (margin) + ~65px (half-icon) */
  margin-top: 138px;
}
.how-lux__arrow-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(201,168,106,.0) 0%,
    rgba(201,168,106,.85) 15%,
    #B89855 50%,
    rgba(201,168,106,.85) 85%,
    rgba(201,168,106,1) 100%
  );
  display: block;
}
.how-lux__arrow-tip {
  display: inline-flex;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.how-lux__arrow-tip svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Hover ── */
.how-lux__step:hover { transform: translateY(-3px); }
.how-lux__step:hover .how-lux__icon { transform: scale(1.03); }
.how-lux__step:hover .how-lux__num {
  background: rgba(201,168,106,.08);
  border-color: #B8954E;
}

/* ── Tablet ── stay in one row, just tighten spacing */
@media (max-width: 960px) {
  .how-lux__flow { gap: 0; }
  .how-lux__step { padding: 0 10px; }
  .how-lux__icon { height: 110px; max-width: 200px; }
  .how-lux__arrow { margin-top: 130px; }
}

/* ── Mobile ── keep 3 across, shrink everything proportionally ── */
@media (max-width: 640px) {
  .how-lux__flow {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
    max-width: 100%;
    padding: 0 4px;
  }
  .how-lux__step {
    padding: 0 4px;
    min-width: 0;
  }
  .how-lux__num {
    width: 32px;
    height: 32px;
    font-size: 15px;
    border-width: 1px;
    margin-bottom: 14px;
  }
  .how-lux__icon {
    height: 60px;
    max-width: 100%;
    margin-bottom: 16px;
  }
  .how-lux__h {
    font-size: 15px;
    line-height: 1.2;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
  }
  .how-lux__h::after {
    width: 24px;
    height: 1px;
    margin: 6px auto 0;
  }
  .how-lux__p {
    font-size: 11px;
    line-height: 1.45;
    margin-top: 4px;
    max-width: 100%;
  }
  .how-lux__arrow {
    width: clamp(14px, 5vw, 28px);
    height: 10px;
    margin-top: 86px;
    gap: 1px;
  }
  .how-lux__arrow-line {
    height: 1px;
  }
  .how-lux__arrow-tip {
    width: 8px;
    height: 8px;
  }
}

/* ── Very small phones (iPhone SE, etc) ── extra tightening */
@media (max-width: 380px) {
  .how-lux__num { width: 28px; height: 28px; font-size: 13px; margin-bottom: 12px; }
  .how-lux__icon { height: 52px; margin-bottom: 12px; }
  .how-lux__h { font-size: 13px; }
  .how-lux__p { font-size: 10px; line-height: 1.4; }
  .how-lux__arrow { margin-top: 74px; }
}

/* Hide any legacy step-card / step-icon remnants in this section */
.how-lux .step-card,
.how-lux .step-icon,
.how-lux .step-icon--modern { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   CUSTOMER TRUST — Editorial asymmetric layout (v2)
   Apple × Porsche × premium detailing aesthetic
   Atmospheric car backdrop · large editorial type · stacked
   floating cards with depth · dark hero review card.
   ═══════════════════════════════════════════════════════════ */

.trust-edit {
  position: relative;
  background: linear-gradient(180deg, #FAF8F4 0%, #F4EFE5 50%, #FAF8F4 100%) !important;
  padding-block: clamp(80px, 9vw, 130px) !important;
  overflow: hidden;
}

/* ── Atmospheric backdrop (luxury car silhouette + monogram) ── */
.trust-edit__atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.trust-edit__atmosphere img {
  position: absolute;
  bottom: -10%;
  left: -8%;
  width: 65%;
  max-width: 900px;
  object-fit: cover;
  opacity: .12;
  filter: grayscale(.3) brightness(.95);
  mask-image: radial-gradient(ellipse 70% 80% at 30% 70%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 70%, #000 0%, transparent 80%);
}
.trust-edit__monogram {
  position: absolute;
  top: -2vw;
  left: 4%;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(180px, 22vw, 320px);
  line-height: 1;
  color: rgba(15, 17, 21, 0.04);
  letter-spacing: -0.04em;
  user-select: none;
  pointer-events: none;
}

.trust-edit .container { position: relative; z-index: 1; }

/* ── Grid: editorial 1.05 / 1 split ── */
.trust-edit__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  max-width: 1280px;
  margin-inline: auto;
}

/* ── LEFT — Editorial copy ── */
.trust-edit__copy { max-width: 560px; }

.trust-edit__kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #E60012;
  margin: 0 0 28px;
}
.trust-edit__kicker-line {
  display: inline-block;
  width: 36px;
  height: 2px;
  background: #E60012;
  border-radius: 1px;
}

.trust-edit__title {
  font-family: 'Playfair Display', 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #0F1115;
  margin: 0 0 26px;
}
.trust-edit__title em {
  font-style: italic;
  font-weight: 500;
  color: #E60012;
  position: relative;
}
.trust-edit__title em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 8%;
  bottom: 4px;
  height: 4px;
  background: #C9A86A;
  border-radius: 2px;
  opacity: .85;
}

.trust-edit__lede {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.75;
  color: #5b6168;
  margin: 0 0 36px;
  max-width: 520px;
  font-weight: 400;
}

/* ── Luxury glass pills with thin gold border & icons ── */
.trust-edit__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.trust-edit__pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 14px 14px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(201, 168, 106, 0.35);
  border-radius: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: #0F1115;
  letter-spacing: -0.005em;
  box-shadow: 0 2px 8px rgba(15, 17, 21, 0.04);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.trust-edit__pill:hover {
  transform: translateY(-2px);
  border-color: #C9A86A;
  box-shadow: 0 6px 18px rgba(201, 168, 106, 0.18);
}
.trust-edit__pill-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: #C9A86A;
  background: rgba(201, 168, 106, 0.1);
  border-radius: 8px;
}
.trust-edit__pill-ico svg { width: 18px; height: 18px; }

/* ── RIGHT — Stacked floating cards ── */
.trust-edit__stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Base card ── */
.trust-card {
  position: relative;
  border-radius: 18px;
  padding: 22px 26px;
  background: #ffffff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 1px 3px rgba(15, 17, 21, 0.04),
    0 12px 28px rgba(15, 17, 21, 0.06),
    0 28px 60px rgba(15, 17, 21, 0.05);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 22px;
}
.trust-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 1px 3px rgba(15, 17, 21, 0.05),
    0 16px 36px rgba(15, 17, 21, 0.08),
    0 36px 80px rgba(15, 17, 21, 0.07);
}

/* ── HERO card (Google reviews — dark, with gold glow) ── */
.trust-card--hero {
  background: linear-gradient(155deg, #16181E 0%, #0F1115 60%, #1a1d24 100%);
  border: 1px solid rgba(201, 168, 106, 0.25);
  padding: 26px 28px 22px;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  box-shadow:
    0 0 0 1px rgba(201, 168, 106, 0.08) inset,
    0 1px 3px rgba(15, 17, 21, 0.2),
    0 16px 32px rgba(15, 17, 21, 0.18),
    0 36px 70px rgba(15, 17, 21, 0.22);
}
.trust-card--hero:hover {
  box-shadow:
    0 0 0 1px rgba(201, 168, 106, 0.18) inset,
    0 1px 3px rgba(15, 17, 21, 0.22),
    0 22px 44px rgba(15, 17, 21, 0.22),
    0 48px 100px rgba(201, 168, 106, 0.18);
}
/* Gold underglow strip */
.trust-card--hero__edge {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -1px;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 168, 106, 0.7) 30%,
    #C9A86A 50%,
    rgba(201, 168, 106, 0.7) 70%,
    transparent 100%);
  filter: blur(0.5px);
}

.trust-card--hero__top {
  display: flex;
  align-items: center;
  gap: 18px;
}
.trust-card--hero__logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.trust-card--hero__logo svg { width: 32px; height: 32px; }

.trust-card--hero__score-wrap { flex: 1; min-width: 0; }
.trust-card--hero__score-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.trust-card--hero__score {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(34px, 3.4vw, 44px);
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1;
}
.trust-card--hero__score-out {
  font-size: 0.55em;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  margin-left: 2px;
}
.trust-card--hero__stars {
  font-size: 22px;
  letter-spacing: 0.08em;
  color: #C9A86A;
  text-shadow: 0 0 12px rgba(201, 168, 106, 0.45);
  white-space: nowrap;
}
.trust-card--hero__platform {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  margin: 4px 0 0;
  letter-spacing: -0.005em;
}

/* Avatar cluster */
.trust-card--hero__avatars {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.trust-card--hero__avatars img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #16181E;
  margin-left: -10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.trust-card--hero__avatars img:first-child { margin-left: 0; }
.trust-card--hero__avatars-count {
  margin-left: -10px;
  height: 36px;
  min-width: 36px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #16181E;
  border-radius: 999px;
  background: linear-gradient(135deg, #C9A86A 0%, #8C6E3A 100%);
  color: #0F1115;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.trust-card--hero__footer {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin: 4px 0 0;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* ── Cream cards (deposit + steam) ── */
.trust-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.trust-card__icon svg { width: 28px; height: 28px; }
.trust-card__icon--green {
  background: linear-gradient(135deg, rgba(34, 168, 95, 0.13) 0%, rgba(34, 168, 95, 0.06) 100%);
  color: #1f9a55;
  box-shadow: 0 0 0 1px rgba(34, 168, 95, 0.12) inset, 0 6px 14px rgba(34, 168, 95, 0.1);
}
.trust-card__icon--red {
  background: linear-gradient(135deg, rgba(230, 0, 18, 0.10) 0%, rgba(230, 0, 18, 0.04) 100%);
  color: #E60012;
  box-shadow: 0 0 0 1px rgba(230, 0, 18, 0.10) inset, 0 6px 14px rgba(230, 0, 18, 0.08);
}

.trust-card__body { flex: 1; min-width: 0; position: relative; z-index: 1; }

.trust-card__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.trust-card__big {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 2.6vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.trust-card__big--green { color: #1f9a55; }
.trust-card__big--red { color: #E60012; }
.trust-card__label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #1f9a55;
}
.trust-card__label--red { color: #E60012; }

.trust-card__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0F1115;
  margin: 4px 0 4px;
  line-height: 1.3;
}
.trust-card__sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #6B6F76;
  margin: 0;
  font-weight: 400;
}

/* Atmospheric props on cream cards */
.trust-card__keyfob,
.trust-card__steam {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 90px;
  height: 60px;
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.trust-card__keyfob svg, .trust-card__steam svg { width: 100%; height: 100%; }
.trust-card__steam { right: 18px; opacity: .7; }

/* ── Tablet ── */
@media (max-width: 1024px) {
  .trust-edit__grid { gap: 48px; }
  .trust-card--hero__avatars img { width: 30px; height: 30px; }
  .trust-card--hero__avatars-count { height: 30px; min-width: 30px; }
}

/* ── Mobile ── */
@media (max-width: 860px) {
  .trust-edit__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .trust-edit__copy { max-width: 100%; }
  .trust-edit__monogram { font-size: clamp(160px, 38vw, 240px); top: 6%; opacity: .9; }
  .trust-edit__atmosphere img {
    width: 130%;
    left: -15%;
    bottom: -5%;
    opacity: .08;
  }
  .trust-edit__title { font-size: clamp(34px, 8vw, 46px); }
  .trust-edit__title br { display: none; }
  .trust-edit__pills { gap: 10px; }
  .trust-edit__pill { font-size: 12.5px; padding: 12px 14px 12px 12px; }
  .trust-card { padding: 20px 22px; gap: 16px; }
  .trust-card--hero { padding: 22px 22px 20px; }
  .trust-card--hero__top { flex-wrap: wrap; gap: 14px; }
  .trust-card--hero__score { font-size: 30px; }
  .trust-card--hero__stars { font-size: 18px; }
  .trust-card__icon { width: 54px; height: 54px; }
  .trust-card__icon svg { width: 24px; height: 24px; }
  .trust-card__big { font-size: 26px; }
  .trust-card__keyfob, .trust-card__steam { display: none; }
}

@media (max-width: 480px) {
  .trust-card--hero__avatars { display: none; }
  .trust-card--hero__score-row { gap: 8px; }
}

/* Hide legacy trust-band / rating-card if any still in DOM */
.trust-edit .trust-band,
.trust-edit .trust-band-copy,
.trust-edit .trust-ratings,
.trust-edit .rating-card,
.trust-stats-bar .trust-band {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────
   WHY STEAM WINS — luxury editorial rebuild (May 19)
   Dark cinematic hero card + 2x2 cream cards with gold icons
   Matches reference: charcoal→black gradient, golden glow,
   steam extraction photo on right, gold underline, italic serif accents
   ────────────────────────────────────────────────────────── */

.steam-lux { background: var(--showroom); position: relative; }

/* Hide legacy steam grid inside this new section, if any leftover styles try to apply */
.steam-lux .steam-grid,
.steam-lux .steam-card { display: none !important; }

/* ── Editorial intro ── */
.steam-lux__intro {
  text-align: center;
  max-width: 820px;
  margin: 0 auto var(--s-7);
}
.steam-lux__kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 20px;
}
.steam-lux__kicker-rule {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--brand-red);
  opacity: .55;
}
.steam-lux__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(34px, 4.5vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--carbon);
  margin: 0;
}
.steam-lux__title em {
  font-style: italic;
  color: var(--brand-red);
  font-weight: 500;
}

/* ──────────────────────────────────────────────
   HERO BLACK CARD with steam photo
   ────────────────────────────────────────────── */
.steam-lux__hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  min-height: 440px;
  margin-bottom: 24px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 100% at 0% 50%, #1a1c20 0%, #0d0e11 55%, #06070a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 1px 0 rgba(0,0,0,.06),
    0 18px 40px -18px rgba(0,0,0,.4),
    0 40px 80px -30px rgba(0,0,0,.35);
  isolation: isolate;
}

/* Soft warm glow from right (mimics golden hour leak) */
.steam-lux__hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 60% 70% at 92% 50%, rgba(232, 184, 102, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(232, 184, 102, 0.08) 0%, transparent 70%);
}

/* Light streak — subtle diagonal shine */
.steam-lux__hero-streak {
  position: absolute;
  top: -20%;
  left: -10%;
  width: 70%;
  height: 140%;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.04) 48%,
    rgba(232, 184, 102, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 52%,
    transparent 65%);
  transform: skewX(-12deg);
  pointer-events: none;
  z-index: 2;
}

/* Faint grain for atmosphere */
.steam-lux__hero-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: .35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Hero photo on right with fade-to-black on left edge */
.steam-lux__hero-photo {
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 100%;
  min-height: 440px;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
}
.steam-lux__hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.05) saturate(.95);
}
.steam-lux__hero-photo-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #06070a 0%,
    rgba(6, 7, 10, 0.85) 12%,
    rgba(6, 7, 10, 0.35) 28%,
    transparent 55%);
  pointer-events: none;
}

/* Hero copy (left side) */
.steam-lux__hero-copy {
  position: relative;
  z-index: 4;
  grid-column: 1;
  grid-row: 1;
  padding: 48px 36px 48px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  max-width: 560px;
}

.steam-lux__hero-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(232, 199, 126, 0.16), rgba(140, 110, 58, 0.08));
  border: 1px solid rgba(232, 199, 126, 0.35);
  color: #E8C77E;
  margin-bottom: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 6px 18px -10px rgba(232, 199, 126, 0.4);
}
.steam-lux__hero-glyph svg { width: 22px; height: 22px; }

.steam-lux__hero-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 22px;
}
.steam-lux__hero-title em {
  font-style: italic;
  color: #E8C77E;
  font-weight: 500;
}

.steam-lux__hero-rule {
  display: block;
  width: 64px;
  height: 1.5px;
  background: linear-gradient(90deg, #8C6E3A 0%, #E8C77E 50%, #8C6E3A 100%);
  margin-bottom: 22px;
  border-radius: 2px;
}

.steam-lux__hero-lede {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 22px;
  max-width: 440px;
}

.steam-lux__hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}
.steam-lux__hero-meta strong {
  color: #E8C77E;
  font-weight: 600;
}
.steam-lux__hero-meta-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #E8C77E;
  flex-shrink: 0;
}
.steam-lux__hero-meta-dot svg { width: 18px; height: 18px; }

/* Hero gold underline glow at the very bottom edge */
.steam-lux__hero::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 168, 106, 0.55) 30%,
    #E8C77E 50%,
    rgba(201, 168, 106, 0.55) 70%,
    transparent 100%);
  filter: blur(.2px);
  z-index: 5;
  pointer-events: none;
}

/* ──────────────────────────────────────────────
   2x2 luxury benefit grid
   ────────────────────────────────────────────── */
.steam-lux__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.steam-lux__card {
  position: relative;
  display: grid;
  grid-template-columns: 132px 1fr;
  align-items: center;
  gap: 28px;
  padding: 32px 32px 32px 28px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F4 100%);
  border: 1px solid rgba(201, 168, 106, 0.16);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 1px 0 rgba(0,0,0,.02),
    0 8px 22px -12px rgba(15, 17, 21, 0.08),
    0 20px 40px -30px rgba(15, 17, 21, 0.1);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
  overflow: hidden;
  isolation: isolate;
}
.steam-lux__card::before {
  /* faint gold sheen on the inside top-left corner */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 199, 126, 0.55), transparent);
  z-index: 1;
}
.steam-lux__card:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 168, 106, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 12px 28px -14px rgba(15, 17, 21, 0.12),
    0 30px 60px -30px rgba(140, 110, 58, 0.22);
}

/* Cream circle with gold thin-line icon */
.steam-lux__card-icon {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #F6EFDF 60%, #EFE3C6 100%);
  border: 1px solid rgba(201, 168, 106, 0.35);
  color: #8C6E3A;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.9),
    inset 0 -1px 4px rgba(201, 168, 106, 0.18),
    0 4px 14px -6px rgba(201, 168, 106, 0.28);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.steam-lux__card-icon::after {
  /* gold ring on hover */
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(232, 199, 126, 0);
  transition: border-color .4s ease;
}
.steam-lux__card:hover .steam-lux__card-icon {
  transform: scale(1.04);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.95),
    inset 0 -1px 6px rgba(201, 168, 106, 0.25),
    0 8px 22px -8px rgba(201, 168, 106, 0.45);
}
.steam-lux__card:hover .steam-lux__card-icon::after {
  border-color: rgba(232, 199, 126, 0.4);
}
.steam-lux__card-icon svg {
  width: 56px;
  height: 56px;
  position: relative;
  z-index: 1;
}

/* Card body */
.steam-lux__card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.steam-lux__card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(22px, 1.8vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--carbon);
  margin: 0;
}
.steam-lux__card-rule {
  display: block;
  width: 42px;
  height: 1.5px;
  background: linear-gradient(90deg, #8C6E3A 0%, #E8C77E 100%);
  border-radius: 2px;
}
.steam-lux__card-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate);
  margin: 0;
  max-width: 320px;
}

/* ──────────────────────────────────────────────
   Responsive
   ────────────────────────────────────────────── */
/* Tablet — keep side-by-side, slight rebalance */
@media (max-width: 980px) {
  .steam-lux__hero {
    grid-template-columns: 1.2fr 1fr;
    min-height: 360px;
  }
  .steam-lux__hero-copy {
    padding: 36px 32px;
  }
  .steam-lux__hero-title { font-size: clamp(26px, 4.6vw, 34px); }
  .steam-lux__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Mobile — force side-by-side (text 62% / image 38%) */
@media (max-width: 640px) {
  .steam-lux__hero {
    grid-template-columns: 62fr 38fr;
    min-height: 280px;
    margin-bottom: 18px;
    border-radius: 16px;
  }
  .steam-lux__hero-photo { min-height: 100%; }
  .steam-lux__hero-photo-fade {
    background: linear-gradient(90deg,
      #06070a 0%,
      rgba(6, 7, 10, 0.55) 25%,
      transparent 60%);
  }
  .steam-lux__hero-copy {
    padding: 20px 14px 22px 20px;
  }
  .steam-lux__hero-glyph {
    width: 32px;
    height: 32px;
    margin-bottom: 14px;
    border-radius: 6px;
  }
  .steam-lux__hero-glyph svg { width: 16px; height: 16px; }
  .steam-lux__hero-title {
    font-size: clamp(16px, 4.4vw, 22px);
    line-height: 1.15;
    margin-bottom: 10px;
  }
  .steam-lux__hero-title br { display: inline; }
  .steam-lux__hero-title br::after { content: " "; }
  .steam-lux__hero-rule {
    width: 28px;
    margin: 8px 0 12px;
  }
  .steam-lux__hero-lede {
    font-size: 11.5px;
    line-height: 1.45;
  }
}

/* Phone benefits grid stays single-column */
@media (max-width: 560px) {
  .steam-lux__title { font-size: clamp(24px, 7vw, 32px); }

  .steam-lux__card {
    grid-template-columns: 88px 1fr;
    gap: 18px;
    padding: 24px 22px;
  }
  .steam-lux__card-icon { width: 76px; height: 76px; }
  .steam-lux__card-icon svg { width: 40px; height: 40px; }
  .steam-lux__card-title { font-size: 20px; line-height: 1.2; }
  .steam-lux__card-text { font-size: 13.5px; }
}

/* Very small phones (≤ 380px) — keep the layout, ease the type further */
@media (max-width: 380px) {
  .steam-lux__hero { min-height: 260px; }
  .steam-lux__hero-copy { padding: 16px 10px 18px 16px; }
  .steam-lux__hero-title { font-size: 15px; }
  .steam-lux__hero-lede { font-size: 10.5px; line-height: 1.4; }
  .steam-lux__hero-glyph { width: 28px; height: 28px; margin-bottom: 10px; }
  .steam-lux__hero-glyph svg { width: 14px; height: 14px; }
}

/* ──────────────────────────────────────────────────────────
   VEHICLE SELECTION — luxury editorial rebuild (May 19)
   .vlux__intro | .vlux__grid > .vlux__card | .vlux__custom pill
   Matches reference: floating cream cards, side-profile photos,
   red check + red glow on selected, custom-quote pill bar
   ────────────────────────────────────────────────────────── */

/* Neutralise default legacy .vehicle-card hover/selected so new .vlux__card visuals win */
.vlux__grid .vehicle-card:hover {
  border-color: transparent;
}

/* ── Editorial intro ── */
.vlux__intro {
  text-align: center;
  max-width: 1080px;
  margin: 0 auto 56px;
}
.vlux__kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 22px;
}
.vlux__kicker-rule {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--brand-red);
  opacity: .55;
}
.vlux__kicker-dash {
  opacity: .55;
  margin: 0 4px;
  font-weight: 600;
}
.vlux__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--carbon);
  margin: 0 0 24px;
}
.vlux__title em {
  font-style: italic;
  color: var(--brand-red);
  font-weight: 500;
}
.vlux__lede {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--slate);
  max-width: 720px;
  margin: 0 auto;
}

/* ── Vehicle grid ── */
.vlux__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.vlux__card.vlux__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 28px 26px 30px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF8F2 100%);
  border: 1px solid rgba(15, 17, 21, 0.06);
  border-radius: 24px;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 1px 0 rgba(0,0,0,.02),
    0 6px 16px -10px rgba(15, 17, 21, 0.06),
    0 18px 36px -24px rgba(15, 17, 21, 0.08);
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s ease,
    border-color .35s ease,
    background-color .35s ease;
}

/* Soft ground glow under the car */
.vlux__card::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 32%;
  height: 14px;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(15, 17, 21, 0.12), transparent 70%);
  filter: blur(8px);
  z-index: 0;
  opacity: .55;
  transition: opacity .35s ease;
  pointer-events: none;
}

.vlux__card.vlux__card:hover {
  transform: translateY(-4px);
  border-color: rgba(15, 17, 21, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 10px 22px -12px rgba(15, 17, 21, 0.1),
    0 28px 50px -30px rgba(15, 17, 21, 0.18);
}
.vlux__card:hover::before { opacity: .75; }

/* Vehicle photo wrap */
.vlux__photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 32px;
  overflow: hidden;
}
.vlux__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: scale(1);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  filter: drop-shadow(0 8px 12px rgba(15, 17, 21, 0.08));
}
.vlux__card:hover .vlux__photo img { transform: scale(1.025); }

/* Meta */
.vlux__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 1;
  text-align: center;
}
.vlux__name {
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--carbon);
  letter-spacing: -0.01em;
}
.vlux__sub {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--slate);
  font-weight: 400;
}

/* Check badge — hidden by default, shown on selected */
.vlux__check {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-red);
  color: #fff;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1);
  z-index: 3;
  box-shadow:
    0 2px 6px rgba(229, 57, 53, 0.35),
    0 0 0 0 rgba(229, 57, 53, 0);
  pointer-events: none;
}
.vlux__check svg { width: 14px; height: 14px; }

/* Selected state — works with both .active (existing JS) and .selected */
.vlux__card.vlux__card.active,
.vlux__card.vlux__card.selected {
  border-color: rgba(229, 57, 53, 0.55);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF7F6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 0 0 1px rgba(229, 57, 53, 0.25),
    0 10px 22px -12px rgba(229, 57, 53, 0.18),
    0 28px 50px -22px rgba(229, 57, 53, 0.2);
}
.vlux__card.active .vlux__check,
.vlux__card.selected .vlux__check {
  opacity: 1;
  transform: scale(1);
  box-shadow:
    0 3px 8px rgba(229, 57, 53, 0.4),
    0 0 0 4px rgba(229, 57, 53, 0.1);
}
.vlux__card.active .vlux__name,
.vlux__card.selected .vlux__name { color: var(--carbon); }

/* Focus state (keyboard) */
.vlux__card:focus-visible {
  outline: 2px solid rgba(229, 57, 53, 0.55);
  outline-offset: 3px;
}

/* ── Custom-quote pill bar ── */
.vlux__custom {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 760px;
  margin: 0 auto 56px;
  padding: 22px 32px 22px 24px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF8F2 100%);
  border: 1px solid rgba(15, 17, 21, 0.06);
  border-radius: 22px;
  text-decoration: none;
  color: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 1px 0 rgba(0,0,0,.02),
    0 6px 16px -10px rgba(15, 17, 21, 0.06),
    0 18px 36px -24px rgba(15, 17, 21, 0.08);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.vlux__custom:hover {
  transform: translateY(-2px);
  border-color: rgba(229, 57, 53, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 10px 22px -12px rgba(15, 17, 21, 0.1),
    0 28px 50px -30px rgba(229, 57, 53, 0.18);
}

.vlux__custom-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF1F0 0%, #FCE3E2 100%);
  color: var(--brand-red);
  flex-shrink: 0;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.9), 0 2px 6px -2px rgba(229,57,53,.15);
}
.vlux__custom-icon svg { width: 24px; height: 24px; }

.vlux__custom-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.vlux__custom-title {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--carbon);
  letter-spacing: -0.005em;
}
.vlux__custom-sub {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--slate);
}

.vlux__custom-divider {
  width: 1px;
  height: 36px;
  background: rgba(15, 17, 21, 0.1);
  flex-shrink: 0;
}

.vlux__custom-cta {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--brand-red);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vlux__custom-arrow {
  display: inline-block;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
  text-decoration: none;
}
.vlux__custom:hover .vlux__custom-arrow { transform: translateX(4px); }

/* ── Responsive ── */
@media (max-width: 1080px) {
  .vlux__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .vlux__intro { margin-bottom: 40px; }
  .vlux__title { font-size: clamp(28px, 7vw, 38px); }
  .vlux__lede { font-size: 14.5px; }
  .vlux__grid { gap: 14px; margin-bottom: 28px; }
  .vlux__card { padding: 22px 18px 24px; border-radius: 20px; }
  .vlux__photo { margin-bottom: 22px; aspect-ratio: 16/10; }
  .vlux__name { font-size: 17px; }
  .vlux__sub { font-size: 12.5px; }

  .vlux__custom {
    flex-wrap: wrap;
    padding: 20px 22px;
    gap: 16px;
  }
  .vlux__custom-divider { display: none; }
  .vlux__custom-cta { width: 100%; justify-content: flex-start; }
}
@media (max-width: 460px) {
  .vlux__grid { grid-template-columns: 1fr 1fr; }
  .vlux__card { padding: 18px 14px 20px; }
}

/* ════════════════════════════════════════════════════════════════════════
   LUXURY PRICING — editorial asymmetric layout (.plux__*)
   Apple/Porsche/Tesla concierge feel — cream surface, dark Silver hero
   ════════════════════════════════════════════════════════════════════════ */

#packages { background: #F6F3EE; position: relative; }

/* Subtle atmospheric backdrop behind pricing */
.plux {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 2.4fr);
  gap: 56px;
  align-items: start;
  margin-top: clamp(48px, 7vw, 96px);
  padding: clamp(8px, 2vw, 24px) 0;
}

.plux::before {
  content: "";
  position: absolute;
  inset: -40px -120px -40px -120px;
  background:
    radial-gradient(60% 50% at 8% 50%, rgba(15,17,21,.045), transparent 70%),
    radial-gradient(40% 40% at 50% 100%, rgba(229,57,53,.04), transparent 70%);
  pointer-events: none;
  z-index: 0;
  border-radius: 24px;
}

.plux > * { position: relative; z-index: 1; }

/* ─── Centered variant — single column, kicker on top, cards full-width ─── */
.plux.plux--centered {
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: clamp(40px, 6vw, 80px);
}
.plux--centered .plux__head {
  text-align: center;
  margin-bottom: 8px;
}
.plux__kicker--centered {
  justify-content: center;
  margin: 0 auto;
}
.plux__kicker--centered .plux__kicker-rule {
  background: #E53935;
}

/* ─── Left rail: editorial title + trust badges ─── */
.plux__rail {
  padding: 16px 8px 0;
  position: sticky;
  top: 100px;
}

.plux__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #E53935;
}
.plux__kicker-rule {
  width: 28px;
  height: 1px;
  background: #E53935;
  display: inline-block;
}

.plux__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #111315;
  font-weight: 500;
  margin: 22px 0 24px;
}
.plux__title em {
  font-style: italic;
  color: #E53935;
  font-weight: 500;
}

.plux__lede {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #5b6066;
  margin: 0 0 28px;
  max-width: 360px;
}

.plux__caption {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(15,17,21,.08);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  color: #5b6066;
  margin-bottom: 36px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.plux__caption strong {
  color: #111315;
  font-weight: 700;
  margin-left: 2px;
}
.plux__caption-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #15803D;
  box-shadow: 0 0 0 3px rgba(21,128,61,.18);
}

.plux__trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.plux__trust li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: #2a2d33;
  font-weight: 500;
}
.plux__trust-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FAF8F4 0%, #F0EBE2 100%);
  border: 1px solid rgba(200,164,107,.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #C8A46B;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(15,17,21,.04);
}
.plux__trust-icon svg {
  width: 18px;
  height: 18px;
}

/* ─── Right rail: 3 or 4 floating cards ─── */
.plux__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.plux__cards.plux__cards--four {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1180px) {
  .plux__cards.plux__cards--four {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

/* Universal card — beats legacy .pkg-card rules */
.plux__card.plux__card {
  position: relative;
  border-radius: 28px;
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid rgba(15,17,21,.06);
  box-shadow:
    0 1px 2px rgba(15,17,21,.03),
    0 12px 28px -8px rgba(15,17,21,.08),
    0 30px 60px -20px rgba(15,17,21,.06);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
  overflow: hidden;
  isolation: isolate;
}

.plux__card.plux__card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px rgba(15,17,21,.04),
    0 18px 38px -8px rgba(15,17,21,.12),
    0 40px 80px -20px rgba(15,17,21,.10);
}

/* Maintenance Wash card — light neutral with subtle cool tone */
.plux__card.plux__card--maintenance {
  background:
    radial-gradient(140% 80% at 50% 0%, rgba(15,17,21,.03), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F7F6F3 100%);
  border-color: rgba(15,17,21,.08);
}
.plux__tier--maintenance {
  color: #6b6e74;
  border-color: rgba(107,110,116,.30);
  background: rgba(15,17,21,.04);
}

/* Bronze card — soft cream with gold whisper */
.plux__card.plux__card--bronze {
  background:
    radial-gradient(140% 80% at 50% 0%, rgba(200,164,107,.06), transparent 60%),
    #FFFFFF;
}

/* Platinum card — cream with gold edge */
.plux__card.plux__card--platinum {
  background:
    radial-gradient(140% 80% at 50% 0%, rgba(200,164,107,.08), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FAF8F4 100%);
  border-color: rgba(200,164,107,.25);
}

/* Silver — dark luxury hero */
.plux__card.plux__card--silver {
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(229,57,53,.16), transparent 60%),
    radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #1a1c20 0%, #0a0b0d 100%);
  border-color: rgba(255,255,255,.08);
  color: #f5f5f7;
  transform: translateY(-12px);
  box-shadow:
    0 1px 2px rgba(229,57,53,.10),
    0 18px 40px -8px rgba(229,57,53,.18),
    0 40px 80px -20px rgba(15,17,21,.30),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.plux__card.plux__card--silver:hover {
  transform: translateY(-16px);
  box-shadow:
    0 1px 2px rgba(229,57,53,.14),
    0 24px 48px -8px rgba(229,57,53,.24),
    0 50px 100px -20px rgba(15,17,21,.40),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* "Most Popular" floating badge — beats legacy .popular-tag */
.plux__card .plux__popular.plux__popular {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #ef3f3a 0%, #c9251e 100%);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow:
    0 4px 12px rgba(229,57,53,.40),
    0 8px 24px rgba(229,57,53,.25),
    inset 0 1px 0 rgba(255,255,255,.18);
  z-index: 4;
  border: none;
}

/* Tier label — small refined chip — beats legacy .tier-label */
.plux__card .plux__tier.plux__tier {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0 auto 18px;
  background: transparent;
  border: 1px solid;
}
.plux__tier--bronze {
  color: #B58B45;
  border-color: rgba(181,139,69,.35);
  background: rgba(200,164,107,.08);
}
.plux__tier--silver {
  color: #d5d6d9;
  border-color: rgba(213,214,217,.30);
  background: rgba(255,255,255,.06);
}
.plux__tier--platinum {
  color: #6b6e74;
  border-color: rgba(107,110,116,.35);
  background: rgba(15,17,21,.04);
}

/* Card name */
.plux__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: inherit;
}
.plux__card--silver .plux__name { color: #fafafa; }

/* Giant price */
.plux__price {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #111315;
  margin: 0 0 14px;
}
.plux__card--silver .plux__price { color: #fafafa; }

.plux__currency {
  font-size: 28px;
  font-weight: 500;
  margin-top: 10px;
  margin-right: 2px;
  color: inherit;
  opacity: .8;
}
.plux__dollars {
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.plux__cents {
  font-size: 20px;
  font-weight: 500;
  margin-top: 12px;
  margin-left: 2px;
  color: inherit;
  opacity: .65;
}

/* Sub-label under price */
.plux__sub {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: #6b6e74;
  margin: 0 0 14px;
  font-weight: 500;
}
.plux__card--silver .plux__sub { color: #b8babd; }

/* Bonus pill — green free salt removal — override legacy .badge-success */
.plux__card .plux__bonus.plux__bonus {
  display: inline-block;
  background: rgba(21,128,61,.10);
  color: #15803D;
  border: 1px solid rgba(21,128,61,.25);
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 7px 14px;
  border-radius: 999px;
  margin: 0 auto 24px;
  text-align: center;
  white-space: nowrap;
}
.plux__card--silver .plux__bonus {
  background: rgba(74,222,128,.12);
  color: #6ee7a1;
  border-color: rgba(74,222,128,.30);
}

/* Feature list */
.plux__feats {
  list-style: none;
  padding: 0;
  margin: 6px 0 28px;
  text-align: left;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plux__feats li {
  position: relative;
  padding-left: 26px;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: #2a2d33;
  font-weight: 400;
}
.plux__feats li strong {
  font-weight: 600;
  color: #111315;
}
.plux__feats li em {
  font-style: italic;
  color: #6b6e74;
  font-weight: 400;
}
.plux__feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23E53935' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.2l3.2 3.2L13 5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.plux__feats--dark li { color: #d5d6d9; }
.plux__feats--dark li strong { color: #fafafa; }
.plux__feats--dark li em { color: #b8babd; }

/* CTAs — pill-shaped, premium */
.plux__cta.plux__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-decoration: none;
  transition: all .3s cubic-bezier(.2,.7,.2,1);
  margin-top: auto;
  border: 1.5px solid transparent;
  cursor: pointer;
}

.plux__cta--ghost {
  background: transparent;
  color: #E53935;
  border-color: rgba(229,57,53,.35);
}
.plux__cta--ghost:hover {
  background: rgba(229,57,53,.06);
  border-color: #E53935;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(229,57,53,.30);
}

.plux__cta--solid {
  background: linear-gradient(180deg, #ef3f3a 0%, #c9251e 100%);
  color: #fff;
  box-shadow:
    0 4px 14px rgba(229,57,53,.36),
    0 8px 24px rgba(229,57,53,.20),
    inset 0 1px 0 rgba(255,255,255,.20);
}
.plux__cta--solid:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 22px rgba(229,57,53,.46),
    0 14px 36px rgba(229,57,53,.28),
    inset 0 1px 0 rgba(255,255,255,.24);
}

.plux__cta span { display: inline-block; transition: transform .3s ease; }
.plux__cta:hover span { transform: translateX(3px); }

/* Hide legacy decorations on new cards */
.plux__card .pkg-features { display: none; }

/* Responsive — mobile */
@media (max-width: 980px) {
  .plux {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .plux__rail {
    position: static;
    text-align: left;
    padding: 0;
  }
  .plux__title {
    font-size: clamp(34px, 8vw, 48px);
  }
  .plux__cards,
  .plux__cards.plux__cards--four {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .plux__card.plux__card--silver {
    transform: translateY(0);
    order: -1; /* surface Silver first on mobile */
  }
  .plux__card.plux__card--silver:hover { transform: translateY(-2px); }
  .plux__card .plux__popular.plux__popular {
    top: -14px;
  }
  .plux__dollars { font-size: 56px; }
}

@media (max-width: 560px) {
  .plux__card.plux__card { padding: 32px 22px 26px; }
  .plux__lede { max-width: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   LUXURY REVIEWS — editorial centered layout (.rlux__*)
   Cream surface, floating Google summary, premium dark CTA
   ════════════════════════════════════════════════════════════════════════ */

.rlux {
  background: #F6F3EE;
  position: relative;
  overflow: hidden;
}

/* Subtle automotive atmosphere — blurred radial glows */
.rlux__atmos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(45% 60% at 95% 50%, rgba(15,17,21,.07), transparent 60%),
    radial-gradient(35% 50% at 5% 30%, rgba(15,17,21,.05), transparent 60%),
    radial-gradient(50% 40% at 50% 100%, rgba(229,57,53,.04), transparent 70%);
}

.rlux__inner { position: relative; z-index: 1; }

/* Editorial header */
.rlux__head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
}

.rlux__kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: #E53935;
  margin-bottom: 22px;
}
.rlux__kicker-rule {
  width: 30px;
  height: 1px;
  background: #E53935;
  display: inline-block;
}

.rlux__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: #111315;
  font-weight: 500;
  margin: 0 0 36px;
}
.rlux__title em {
  font-style: italic;
  color: #E53935;
  font-weight: 500;
}

/* Floating Google summary row */
.rlux__summary {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,17,21,.07);
  border-radius: 999px;
  padding: 14px 26px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 1px 2px rgba(15,17,21,.03),
    0 12px 28px -10px rgba(15,17,21,.10),
    0 24px 60px -20px rgba(15,17,21,.08);
  font-family: 'Inter', sans-serif;
  flex-wrap: wrap;
  justify-content: center;
}

.rlux__g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.rlux__g svg { width: 100%; height: 100%; }

.rlux__rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.rlux__rating-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #111315;
  letter-spacing: -0.01em;
}
.rlux__rating-stars {
  font-size: 16px;
  color: #F4B400;
  letter-spacing: 1px;
}

.rlux__summary-divider {
  width: 1px;
  height: 22px;
  background: rgba(15,17,21,.12);
  display: inline-block;
}

.rlux__summary-count {
  font-size: 13.5px;
  color: #2a2d33;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.rlux__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #15803D;
}
.rlux__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #15803D;
  box-shadow: 0 0 0 4px rgba(21,128,61,.18);
  animation: rluxPulse 2.4s ease-in-out infinite;
}
@keyframes rluxPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21,128,61,.30); }
  50% { box-shadow: 0 0 0 6px rgba(21,128,61,0); }
}

/* Marquee — enhanced edge fade */
.rlux__marquee {
  margin-top: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

/* Card upgrade — beats legacy .google-card */
.rlux .google-card.google-card {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,17,21,.06);
  border-radius: 24px;
  padding: 32px 28px 26px;
  box-shadow:
    0 1px 2px rgba(15,17,21,.03),
    0 10px 26px -10px rgba(15,17,21,.08),
    0 24px 56px -20px rgba(15,17,21,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.rlux .google-card.google-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(15,17,21,.04),
    0 18px 40px -10px rgba(15,17,21,.14),
    0 36px 80px -20px rgba(15,17,21,.12);
}

/* Dark luxury CTA */
.rlux__cta-wrap {
  text-align: center;
  margin-top: 56px;
}

.rlux__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, #1a1c20 0%, #0a0b0d 100%);
  color: #fafafa;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 16px 30px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 1px 2px rgba(15,17,21,.20),
    0 12px 30px -8px rgba(15,17,21,.30),
    0 24px 60px -20px rgba(15,17,21,.20),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition: all .35s cubic-bezier(.2,.7,.2,1);
  position: relative;
  isolation: isolate;
}

.rlux__cta::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: radial-gradient(60% 100% at 50% 100%, rgba(229,57,53,.30), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
  filter: blur(8px);
}

.rlux__cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(15,17,21,.24),
    0 18px 40px -8px rgba(15,17,21,.40),
    0 34px 80px -20px rgba(229,57,53,.20),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.rlux__cta:hover::before { opacity: 1; }

.rlux__cta-star {
  color: #F4B400;
  font-size: 16px;
}
.rlux__cta-arrow {
  display: inline-block;
  transition: transform .3s ease;
}
.rlux__cta:hover .rlux__cta-arrow { transform: translateX(4px); }

.rlux__cta-note {
  margin-top: 16px;
  font-size: 11.5px;
  color: #6b6e74;
  letter-spacing: 0.4px;
}

/* Responsive */
@media (max-width: 720px) {
  .rlux__summary {
    flex-direction: column;
    gap: 12px;
    padding: 18px 22px;
    border-radius: 24px;
  }
  .rlux__summary-divider { display: none; }
  .rlux__title { font-size: clamp(32px, 8vw, 44px); }
  .rlux__marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   LUXURY PRICING — fixes & polish
   ════════════════════════════════════════════════════════════════════════ */

/* Bonus pill — allow 2-line wrap and clamp width to card */
.plux__card .plux__bonus.plux__bonus {
  white-space: normal;
  max-width: 100%;
  line-height: 1.35;
  padding: 8px 14px;
  text-align: center;
  text-wrap: balance;
}

/* Make sure CTAs read clearly even if legacy .btn rules interfere */
.plux__card .plux__cta.plux__cta {
  text-decoration: none !important;
  background-clip: padding-box;
}

/* Reduce overflow risk from any descendants of legacy .pkg-card rules */
.plux__card .pkg-features,
.plux__card .price-dollars,
.plux__card .price-cents { color: inherit !important; }

/* Ensure Bronze ghost CTA shows its border properly above legacy .btn-primary */
.plux__card a.plux__cta--ghost.plux__cta--ghost {
  background: transparent !important;
  color: #E53935 !important;
  border: 1.5px solid rgba(229,57,53,.35) !important;
}
.plux__card a.plux__cta--ghost.plux__cta--ghost:hover {
  background: rgba(229,57,53,.06) !important;
  border-color: #E53935 !important;
}

/* Silver solid CTA — beat .btn-primary */
.plux__card a.plux__cta--solid.plux__cta--solid {
  background: linear-gradient(180deg, #ef3f3a 0%, #c9251e 100%) !important;
  color: #fff !important;
  border: 1.5px solid transparent !important;
}

/* Tier chips — beat legacy .tier-label */
.plux__card .plux__tier.plux__tier {
  display: inline-block !important;
  width: auto !important;
  text-align: center !important;
  margin: 0 auto 18px !important;
}
.plux__card .plux__tier--bronze {
  color: #B58B45 !important;
  background: rgba(200,164,107,.10) !important;
  border: 1px solid rgba(181,139,69,.35) !important;
}
.plux__card .plux__tier--silver {
  color: #d5d6d9 !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(213,214,217,.30) !important;
}
.plux__card .plux__tier--platinum {
  color: #6b6e74 !important;
  background: rgba(15,17,21,.04) !important;
  border: 1px solid rgba(107,110,116,.35) !important;
}

/* Hide legacy popular tag pseudo elements */
.plux__card.pkg-card--popular::before,
.plux__card.pkg-card--popular::after { display: none !important; content: none !important; }

/* ============================================================
   ▓▓▓  SECTION 09 · LUXURY TRUST & CONVENIENCE (.tlux__*) ▓▓▓
   White-glove cards — cream surface, atmospheric glow,
   floating glass cards with oversized icons.
   ============================================================ */

.tlux {
  position: relative;
  background: #F6F3EE;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 9vw, 128px) 0 clamp(72px, 9vw, 128px);
}
.tlux__atmos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 18% 35%, rgba(200, 164, 107, 0.10), transparent 65%),
    radial-gradient(ellipse 55% 45% at 85% 70%, rgba(229, 57, 53, 0.05), transparent 65%),
    radial-gradient(ellipse 80% 70% at 50% 110%, rgba(17, 19, 21, 0.06), transparent 60%);
  filter: blur(40px);
}
.tlux__inner {
  position: relative;
  z-index: 1;
}

/* Header */
.tlux__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vw, 76px);
}
.tlux__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #E53935;
  margin-bottom: 24px;
}
.tlux__kicker::before,
.tlux__kicker::after {
  content: '';
  width: 28px;
  height: 1px;
  background: #E53935;
  opacity: 0.55;
}
.tlux__kicker-rule { display: none; }
.tlux__title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(38px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #111315;
  margin: 0 0 20px;
}
.tlux__title em {
  font-style: italic;
  font-weight: 400;
  color: #E53935;
}
.tlux__lede {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #5b6066;
  max-width: 580px;
  margin: 0 auto;
}

/* Card grid */
.tlux__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.2vw, 32px);
  align-items: stretch;
  max-width: 1180px;
  margin: 0 auto;
}

/* Card base — doubled selector for legacy override */
.tlux__card.tlux__card {
  position: relative;
  background: #FFFFFF;
  border-radius: 28px;
  padding: 44px 36px 40px;
  border: 1px solid rgba(17, 19, 21, 0.06);
  box-shadow:
    0 1px 2px rgba(17, 19, 21, 0.03),
    0 8px 24px rgba(17, 19, 21, 0.06),
    0 30px 60px -20px rgba(17, 19, 21, 0.08);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  overflow: hidden;
}
.tlux__card.tlux__card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 4px rgba(17, 19, 21, 0.04),
    0 14px 32px rgba(17, 19, 21, 0.08),
    0 40px 80px -20px rgba(17, 19, 21, 0.12);
}

/* Featured card (red accent · elevated) */
.tlux__card--featured.tlux__card--featured {
  transform: translateY(-8px);
  border-color: rgba(229, 57, 53, 0.22);
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(229, 57, 53, 0.06), transparent 60%),
    #FFFFFF;
  box-shadow:
    0 1px 2px rgba(229, 57, 53, 0.06),
    0 10px 28px rgba(229, 57, 53, 0.10),
    0 40px 80px -20px rgba(229, 57, 53, 0.18);
}
.tlux__card--featured.tlux__card--featured:hover {
  transform: translateY(-14px);
  box-shadow:
    0 2px 4px rgba(229, 57, 53, 0.08),
    0 18px 40px rgba(229, 57, 53, 0.16),
    0 50px 100px -20px rgba(229, 57, 53, 0.25);
}

/* Badge (Our promise) */
.tlux__badge {
  position: absolute;
  top: 24px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: linear-gradient(135deg, #E53935 0%, #C8262C 100%);
  padding: 7px 13px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(229, 57, 53, 0.35);
  z-index: 2;
}

/* Icon wrap (oversized circle with glow) */
.tlux__icon-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px auto 28px;
  isolation: isolate;
}
.tlux__icon-wrap--red {
  background: linear-gradient(135deg, #FCEBEB 0%, #FFF5F5 100%);
  color: #E53935;
}
.tlux__icon-wrap--gold {
  background: linear-gradient(135deg, #FAF1DE 0%, #FFF8E8 100%);
  color: #C8A46B;
}
.tlux__icon-wrap--mono {
  background: linear-gradient(135deg, #F2F0EC 0%, #FAF8F4 100%);
  color: #111315;
}
.tlux__icon-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  z-index: -1;
  opacity: 0.5;
  filter: blur(14px);
}
.tlux__icon-wrap--red .tlux__icon-glow { background: rgba(229, 57, 53, 0.30); }
.tlux__icon-wrap--gold .tlux__icon-glow { background: rgba(200, 164, 107, 0.30); }
.tlux__icon-wrap--mono .tlux__icon-glow { background: rgba(17, 19, 21, 0.10); }
.tlux__icon {
  width: 44px;
  height: 44px;
}

/* Divider rule */
.tlux__divider {
  display: block;
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C8A46B, transparent);
  margin: 4px auto 22px;
}

/* Card text */
.tlux__name {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #111315;
  text-align: center;
  margin: 0 0 14px;
}
.tlux__body {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #5b6066;
  text-align: center;
  margin: 0;
}
.tlux__hl {
  color: #E53935;
  font-weight: 600;
}

/* Footnote */
.tlux__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(48px, 6vw, 76px);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #6b6e74;
}
.tlux__foot-rule {
  flex: 0 0 88px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C8A46B, transparent);
}
.tlux__foot-icon {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  color: #C8A46B;
}
.tlux__foot-icon svg {
  width: 22px;
  height: 22px;
}

/* Responsive — Trust */
@media (max-width: 980px) {
  .tlux__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 460px;
  }
  .tlux__card.tlux__card,
  .tlux__card--featured.tlux__card--featured {
    transform: none;
    min-height: 0;
    padding: 40px 28px 36px;
  }
  .tlux__card--featured.tlux__card--featured:hover,
  .tlux__card.tlux__card:hover {
    transform: translateY(-4px);
  }
  .tlux__title { font-size: clamp(34px, 8vw, 44px); }
  .tlux__foot-rule { flex-basis: 48px; }
  .tlux__foot { font-size: 12px; gap: 12px; }
}

/* ============================================================
   ▓▓▓  SECTION 07 · LUXURY BEFORE & AFTER (.balux__*)  ▓▓▓
   Editorial proof — cream surface, atmospheric backdrop,
   cinematic slider, floating caption cards,
   premium pills with icons, gradient red CTA.
   ============================================================ */

.balux {
  position: relative;
  background: #F6F3EE;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 9vw, 128px) 0;
}
.balux__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 12% 50%, rgba(200, 164, 107, 0.14), transparent 60%),
    radial-gradient(ellipse 45% 50% at 88% 30%, rgba(229, 57, 53, 0.05), transparent 65%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(17, 19, 21, 0.06), transparent 65%);
  filter: blur(34px);
}
.balux__container {
  position: relative;
  z-index: 1;
}

/* Editorial header */
.balux__head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}
.balux__kicker.balux__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #E53935;
  background: transparent;
  padding: 0;
  border: none;
  margin-bottom: 24px;
}
.balux__title.balux__title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: #111315;
  margin: 0 0 24px;
}
.balux__title-em {
  font-style: italic;
  font-weight: 400;
  color: #E53935;
}
.balux__lede {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #5b6066;
  max-width: 600px;
  margin: 0 auto;
}

/* Slider wrap (frame around legacy .ba-wrap) */
.balux__slider-wrap {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 4px 12px rgba(17, 19, 21, 0.08),
    0 24px 48px rgba(17, 19, 21, 0.14),
    0 60px 100px -30px rgba(17, 19, 21, 0.25);
}
.balux .ba-wrap {
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 640px;
}
.balux .ba-label.before {
  background: linear-gradient(135deg, #E53935 0%, #C8262C 100%);
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 8px 16px;
  border-radius: 999px;
  top: 22px;
  left: 22px;
  box-shadow: 0 6px 16px rgba(229, 57, 53, 0.4);
}
.balux .ba-label.after {
  background: #111315;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 8px 16px;
  border-radius: 999px;
  top: 22px;
  right: 22px;
  box-shadow: 0 6px 16px rgba(17, 19, 21, 0.35);
}
.balux .ba-divider {
  background: #FFFFFF;
  width: 3px;
  box-shadow: 0 0 0 1px rgba(229, 57, 53, 0.3), 0 0 24px rgba(229, 57, 53, 0.4);
}
.balux .ba-handle {
  width: 54px;
  height: 54px;
  background: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  color: transparent;
  box-shadow:
    0 0 0 6px rgba(229, 57, 53, 0.15),
    0 8px 24px rgba(17, 19, 21, 0.30);
  transition: transform 0.2s ease;
}
.balux .ba-handle:hover {
  transform: translate(-50%, -50%) scale(1.08);
}
.balux .ba-handle svg {
  display: block;
}

/* Hint */
.balux__hint {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #6b6e74;
  margin: 28px auto 0;
  letter-spacing: 0.01em;
}
.balux__hint b {
  color: #E53935;
  font-weight: 600;
}

/* Floating caption cards */
.balux__cards.balux__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 32px);
  max-width: 1180px;
  margin: clamp(36px, 4.5vw, 56px) auto 0;
  background: transparent;
}
.balux__card.balux__card {
  position: relative;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 32px 32px 30px;
  border: 1px solid rgba(17, 19, 21, 0.05);
  box-shadow:
    0 2px 4px rgba(17, 19, 21, 0.03),
    0 10px 28px rgba(17, 19, 21, 0.07),
    0 30px 60px -20px rgba(17, 19, 21, 0.10);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.balux__card--before.balux__card--before {
  border-color: rgba(229, 57, 53, 0.14);
}
.balux__card--after.balux__card--after {
  border-color: rgba(15, 138, 74, 0.16);
}
.balux__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.balux__icon--red {
  background: linear-gradient(135deg, #FCEBEB 0%, #FFF5F5 100%);
  box-shadow: 0 0 0 1px rgba(229, 57, 53, 0.08);
}
.balux__icon--green {
  background: linear-gradient(135deg, #E3F4EA 0%, #F2FAF5 100%);
  box-shadow: 0 0 0 1px rgba(15, 138, 74, 0.10);
}
.balux__card-title.balux__card-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0;
  display: block;
}
.balux__card-title--red { color: #E53935; }
.balux__card-title--green { color: #0F8A4A; }
.balux__card-body.balux__card-body {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #5b6066;
  display: block;
}

/* Category pills */
.balux__cats.balux__cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: clamp(40px, 5vw, 60px) auto 0;
  max-width: 1180px;
}
.balux__pill.balux__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #FFFFFF;
  border: 1px solid rgba(17, 19, 21, 0.08);
  color: #5b6066;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 2px 6px rgba(17, 19, 21, 0.04);
}
.balux__pill.balux__pill .balux__pill-icon {
  width: 16px;
  height: 16px;
  color: #6b6e74;
  flex-shrink: 0;
}
.balux__pill.balux__pill:hover {
  border-color: rgba(17, 19, 21, 0.18);
  color: #111315;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(17, 19, 21, 0.08);
}
.balux__pill.balux__pill:hover .balux__pill-icon {
  color: #111315;
}
.balux__pill.balux__pill.active {
  background: #111315;
  color: #FFFFFF;
  border-color: #111315;
  box-shadow: 0 8px 20px rgba(17, 19, 21, 0.22);
}
.balux__pill.balux__pill.active .balux__pill-icon {
  color: #C8A46B;
}

/* CTA */
.balux__cta-wrap {
  text-align: center;
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 600px;
}
.balux__cta.balux__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  background: linear-gradient(135deg, #E53935 0%, #C8262C 100%);
  padding: 18px 38px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow:
    0 8px 22px rgba(229, 57, 53, 0.30),
    0 18px 44px rgba(229, 57, 53, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.balux__cta.balux__cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgba(229, 57, 53, 0.36),
    0 24px 56px rgba(229, 57, 53, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.balux__cta-sub {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: #6b6e74;
  margin-top: 16px;
}

/* Responsive — Before/After */
@media (max-width: 820px) {
  .balux__cards.balux__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .balux__title.balux__title {
    font-size: clamp(34px, 9vw, 48px);
  }
  .balux .ba-wrap {
    aspect-ratio: 4 / 3;
  }
  .balux .ba-label.before,
  .balux .ba-label.after {
    top: 14px;
    padding: 6px 12px;
    font-size: 10px;
  }
  .balux .ba-label.before { left: 14px; }
  .balux .ba-label.after { right: 14px; }
  .balux .ba-handle {
    width: 46px;
    height: 46px;
  }
  .balux__cta.balux__cta {
    padding: 16px 28px;
    font-size: 15px;
  }
  .balux__pill.balux__pill {
    font-size: 13px;
    padding: 9px 14px;
  }
}

/* ============================================================
   ▓▓▓  MOBILE STICKY CTA — LUXURY FLOATING GLASS BAR (.mcta) ▓▓▓
   Premium concierge-style bottom CTA. Hidden at top of page,
   fades up after scroll, minimizes while scrolling down,
   re-expands on scroll up. Safe-area aware. Mobile only.
   ============================================================ */

/* Override legacy wireframe.css + older polish.css base rules */
.mobile-sticky.mcta {
  display: none;
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  padding: 0;
  border: none;
  border-radius: 28px;
  background: transparent;
  color: inherit;
  box-shadow: none;
  pointer-events: none;
  opacity: 0;
  transform: translateY(140%);
  transition:
    opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
}

/* Glass surface lives on the inner wrapper so we can independently animate */
.mobile-sticky.mcta .mcta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 11px 11px 18px;
  background: rgba(252, 250, 246, 0.78);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 0 0 1px rgba(17, 19, 21, 0.04),
    0 8px 22px rgba(17, 19, 21, 0.10),
    0 24px 48px rgba(17, 19, 21, 0.14),
    0 36px 60px -20px rgba(200, 164, 107, 0.10);
  transition:
    padding 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Subtle gold ambient glow inside the bar */
.mobile-sticky.mcta .mcta__inner::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 80% at 0% 50%, rgba(200, 164, 107, 0.10), transparent 70%),
    radial-gradient(ellipse 60% 80% at 100% 50%, rgba(229, 57, 53, 0.07), transparent 70%);
  z-index: 0;
}
.mobile-sticky.mcta .mcta__copy,
.mobile-sticky.mcta .mcta__btn {
  position: relative;
  z-index: 1;
}

/* Copy block */
.mobile-sticky.mcta .mcta__copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.mobile-sticky.mcta .mcta__title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #111315;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-sticky.mcta .mcta__meta {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #6b6e74;
  line-height: 1.25;
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-sticky.mcta .mcta__dot {
  color: #C8A46B;
  margin: 0 4px;
  font-weight: 700;
}

/* Actions group — Text + Book sit side-by-side */
.mobile-sticky.mcta .mcta__actions {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* Secondary "Text us" pill — outlined glass, charcoal text */
.mobile-sticky.mcta .mcta__btn--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 11px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  color: #111315;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  min-height: 44px;
  border: 1px solid rgba(17, 19, 21, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 8px rgba(17, 19, 21, 0.06),
    0 8px 18px rgba(17, 19, 21, 0.08);
  transition:
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.2s ease,
    box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}
.mobile-sticky.mcta .mcta__btn--text:hover {
  background: rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 3px 10px rgba(17, 19, 21, 0.08),
    0 10px 22px rgba(17, 19, 21, 0.10);
}
.mobile-sticky.mcta .mcta__btn--text:active {
  transform: scale(0.97);
  background: rgba(245, 242, 236, 0.95);
}
.mobile-sticky.mcta .mcta__btn--text svg { color: #C8262C; }

/* CTA button — pill, luxury red, ambient glow */
.mobile-sticky.mcta .mcta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 12px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #E53935 0%, #C8262C 100%);
  color: #FFFFFF;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  min-height: 44px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 16px rgba(229, 57, 53, 0.32),
    0 14px 32px rgba(229, 57, 53, 0.22);
  transition:
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.mobile-sticky.mcta .mcta__btn-arrow {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mobile-sticky.mcta .mcta__btn:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 20px rgba(229, 57, 53, 0.38),
    0 18px 40px rgba(229, 57, 53, 0.28);
}
.mobile-sticky.mcta .mcta__btn:hover .mcta__btn-arrow {
  transform: translateX(3px);
}
.mobile-sticky.mcta .mcta__btn:active {
  transform: scale(0.97);
  filter: brightness(0.97);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 12px rgba(229, 57, 53, 0.34),
    0 8px 20px rgba(229, 57, 53, 0.24);
}

/* Visibility & minimize states */
.mobile-sticky.mcta.is-visible {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
.mobile-sticky.mcta.is-min .mcta__inner {
  transform: translateY(4px) scale(0.96);
  padding: 10px 10px 10px 18px;
  opacity: 0.92;
}

/* Mobile-only — show flex on small screens (display:none above) */
@media (max-width: 700px) {
  .mobile-sticky.mcta { display: block; }
}

/* Very small screens — tighten while keeping CTA generous */
@media (max-width: 380px) {
  .mobile-sticky.mcta { left: 12px; right: 12px; }
  .mobile-sticky.mcta .mcta__inner { padding: 11px 11px 11px 16px; gap: 8px; }
  .mobile-sticky.mcta .mcta__title { font-size: 15px; }
  .mobile-sticky.mcta .mcta__meta  { font-size: 11px; }
  .mobile-sticky.mcta .mcta__actions { gap: 6px; }
  .mobile-sticky.mcta .mcta__btn   { padding: 12px 16px; font-size: 14px; }
  .mobile-sticky.mcta .mcta__btn--text { padding: 11px 12px; font-size: 13px; }
  .mobile-sticky.mcta .mcta__btn--text .mcta__btn-text-label { display: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mobile-sticky.mcta,
  .mobile-sticky.mcta .mcta__inner,
  .mobile-sticky.mcta .mcta__btn,
  .mobile-sticky.mcta .mcta__btn-arrow {
    transition: none;
  }
}

/* ============================================================
   MOBILE UX HARDENING
   Prevents horizontal page scroll caused by overflowing marquee
   tracks, ensures the page can't be panned sideways on touch
   devices, and protects the layout from any stray wide element.
   ============================================================ */

/* Hard-clip the reviews ticker so the page never grows wider than the viewport */
.reviews-marquee {
  overflow: hidden !important;
  max-width: 100%;
}
.reviews-track {
  /* Track is wider than viewport on purpose — clipping happens above */
  will-change: transform;
}

/* Global page-level guard: stop accidental horizontal scrolling */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

/* Any other horizontal scroller (areas pill row, vehicle picker) — keep them inside their own bounds */
.areas-grid,
.veh-track,
.vehicle-track,
.ba-cats,
.balux__cats,
.pricing-grid {
  max-width: 100%;
}

/* Make sure no image or video can push the layout wider than its column.
   IMPORTANT: do NOT include <svg> here. iOS Safari renders inline SVGs
   without explicit width/height at 100% of the parent when max-width:100%
   is applied, which explodes icons to full screen width. Inline SVG icons
   already have explicit width/height attributes or are sized by CSS. */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* iOS Safari safety net: every inline icon SVG should size from its
   width attribute (or a sensible default), never stretch with the parent. */
svg {
  max-width: 100%;
}
svg:not([width]) {
  /* SVGs with no width attribute fall back to their viewBox intrinsic size */
  width: auto;
  height: auto;
}

/* ============================================================
   MOBILE HAMBURGER MENU — luxury drop-down (only ≤ 900px)
   ============================================================ */
.wf-burger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(17,19,21,.10);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
  margin-left: 4px;
}
.wf-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #111315;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.wf-burger:hover { background: #fff; border-color: rgba(17,19,21,.18); }
.wf-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wf-burger.is-open span:nth-child(2) { opacity: 0; }
.wf-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.wf-mobile-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: max(env(safe-area-inset-right), 12px);
  left: max(env(safe-area-inset-left), 12px);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(17,19,21,.08);
  border-radius: 18px;
  padding: 10px;
  box-shadow:
    0 24px 60px -20px rgba(17,19,21,.22),
    0 8px 20px -12px rgba(17,19,21,.12);
  z-index: 1000;
  flex-direction: column;
  gap: 2px;
  animation: wfMenuIn .22s ease-out;
}
.wf-mobile-menu:not([hidden]) { display: flex; }
.wf-mobile-menu a {
  display: block;
  padding: 13px 16px;
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 16px;
  letter-spacing: .01em;
  color: #111315;
  text-decoration: none;
  border-radius: 12px;
  transition: background .15s ease, color .15s ease;
}
.wf-mobile-menu a:hover,
.wf-mobile-menu a:active {
  background: rgba(229,57,53,.06);
  color: #E53935;
}
.wf-mobile-menu__cta {
  margin-top: 6px;
  background: linear-gradient(180deg, #E53935 0%, #C62828 100%);
  color: #fff !important;
  text-align: center;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 8px 20px -8px rgba(229,57,53,.45);
}
.wf-mobile-menu__cta:hover,
.wf-mobile-menu__cta:active {
  background: linear-gradient(180deg, #EF5350 0%, #D32F2F 100%) !important;
  color: #fff !important;
}

@keyframes wfMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Show burger only on mobile; the existing .wf-nav { display:none } at ≤900px handles desktop nav hiding */
@media (max-width: 900px) {
  .wf-burger { display: inline-flex; }
  .wf-topbar { position: relative; }
}

/* Prevent body scroll while menu open (light variant — just hint, doesn't lock) */
body.wf-menu-open { overflow: hidden; }

/* ============================================================
   MOBILE TOPBAR — compact, fit logo + phone + Book + burger
   ============================================================ */
@media (max-width: 900px) {
  .wf-topbar-inner {
    gap: 8px;
    padding-left: max(env(safe-area-inset-left), 12px);
    padding-right: max(env(safe-area-inset-right), 12px);
  }
  .wf-cta-group {
    gap: 8px;
  }
  .wf-topbar .btn-primary,
  .wf-topbar .wf-cta-group .btn.btn-primary {
    padding: 9px 16px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    white-space: nowrap;
    border-radius: 999px;
    box-shadow: 0 6px 16px -8px rgba(229,57,53,.45);
  }
  .wf-cta-icon {
    width: 38px;
    height: 38px;
  }
  .wf-cta-icon svg { width: 16px; height: 16px; }
}

@media (max-width: 420px) {
  .wf-logo-text .lg { font-size: 13px; letter-spacing: -.01em; }
  .wf-logo-text .sm { display: none; }
  .wf-topbar .btn-primary,
  .wf-topbar .wf-cta-group .btn.btn-primary {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  .wf-cta-icon { width: 36px; height: 36px; }
  .wf-burger { width: 38px; height: 38px; }
}

@media (max-width: 360px) {
  /* Ultra-tight: hide phone icon, keep Book + burger */
  .wf-cta-icon { display: none; }
}