/* ==========================================================================
   Sell My RV Online
   Palette: cool stone neutrals + one sunset-orange accent. Deep teal-ink for
   high-trust surfaces. Shape rule: buttons/chips are pills, cards 20px,
   large media 28px, inputs 12px.
   ========================================================================== */

:root {
  --bg: #F3F4F1;
  --bg-2: #E8ECE8;
  --surface: #FBFCFA;
  --field: #FDFDFC;
  --ink: #0E1B1F;
  --ink-2: #3F4E54;
  --ink-3: #5B686D;
  --line: #DCE2DE;
  --line-2: #C3CCC7;
  --accent: #C4471E;
  --accent-hover: #A63A15;
  --accent-ink: #FFFFFF;
  --accent-soft: #F7E1D6;
  --deep: #10262B;
  --deep-2: #193539;
  --deep-ink: #EEF2EF;
  --deep-ink-2: #B4C3C1;
  --error: #B42318;
  --shadow: 0 1px 2px rgb(16 38 43 / .05), 0 18px 40px -18px rgb(16 38 43 / .22);
  --shadow-lg: 0 2px 4px rgb(16 38 43 / .04), 0 40px 80px -30px rgb(16 38 43 / .35);

  /* hero scene: golden hour */
  --sky-1: #EE9F70;
  --sky-2: #F5C7A0;
  --sky-3: #FBE7D3;
  --sun: #F27B45;
  --sun-glow: #FFB27C;
  --m-far: #E8AC86;
  --m-mid: #CD7B56;
  --ground: #E7BE98;
  --road: #2E3438;
  --road-line: #F4E3C6;
  --cactus: #5F6C47;
  --shrub: #8C8A55;
  --coach-1: #FAFAF7;
  --coach-2: #D5DAD9;
  --coach-line: #A3ACAE;
  --glass-1: #182830;
  --glass-2: #567682;
  --paint-accent: #C9502A;
  --paint-ink: #13262B;
  --headlight: #FFE7B8;
  --beam: 0;
  --stars: 0;
  --sun-scale: 1;

  --radius: 20px;
  --radius-lg: 28px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --header-h: 84px;
  --accent-on-dark: #F2875A;
  --gold: #F5B000;
  --accent-hot: #FF6A26;
  /* Type system: Archivo (variable width + weight) for display, Geist for reading,
     Geist Mono for labels and data. Widths: condensed 78%, normal 100%, wide 112%, extended 125%. */
  --font-display: "Archivo", "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --w-cond: 78%;
  --w-wide: 112%;
  --w-ext: 125%;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: clip; touch-action: pan-y pinch-zoom; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; font-weight: 800; font-stretch: 100%; letter-spacing: -0.02em; font-kerning: normal; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.section { padding-block: clamp(80px, 11vw, 140px); }

.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon.flip { transform: scaleX(-1); }

.eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.h2 { font-size: clamp(2.05rem, 4.1vw, 3.5rem); line-height: .93; font-weight: 900; font-stretch: 90%; letter-spacing: -0.025em; text-transform: uppercase; text-wrap: balance; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ink-2); max-width: 52ch; margin-top: 20px; }

/* ---------- Buttons ---------- */
.btn {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding-inline: 22px; border-radius: 999px;
  border: 1px solid transparent; font-family: var(--font-display); font-weight: 700; font-stretch: var(--w-wide); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease), translate .4s var(--ease);
}
.btn .icon { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.btn:hover > .icon:last-child:not(:first-child) { transform: translateX(3px); }
.btn:active { transform: scale(.975); }
.btn-sm { --h: 40px; padding-inline: 18px; font-size: 12.5px; }
.btn-lg { --h: 56px; padding-inline: 28px; font-size: 14.5px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 24px -12px color-mix(in oklab, var(--accent) 80%, transparent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: var(--bg-2); border-color: var(--ink-3); }
.btn-on-dark { background: transparent; border-color: rgb(238 242 239 / .3); color: var(--deep-ink); }
.btn-on-dark:hover { background: rgb(238 242 239 / .08); border-color: rgb(238 242 239 / .6); }
.magnetic { translate: var(--tx, 0) var(--ty, 0); }

.icon-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent; cursor: pointer; color: var(--ink);
  transition: background-color .2s, border-color .2s, transform .2s var(--ease);
}
.icon-btn:hover { background: var(--bg-2); }
.icon-btn:active { transform: scale(.95); }
.icon-btn .icon { width: 20px; height: 20px; }

.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-family: var(--font-display); font-weight: 700; font-stretch: var(--w-wide); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.text-link .icon { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.text-link:hover .icon { transform: translateX(4px); }

/* ---------- Scroll progress (CSS scroll-driven, no JS) ---------- */
.scroll-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    display: block; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
    background: var(--accent); transform-origin: 0 50%; transform: scaleX(0);
    animation: progress linear both; animation-timeline: scroll(root);
  }
  @keyframes progress { to { transform: scaleX(1); } }
}

/* ---------- Top bar ---------- */

/* ---------- Header: floating island ---------- */
.site-header { position: sticky; top: 0; z-index: 50; padding-top: 10px; pointer-events: none; }
.header-inner {
  pointer-events: auto; display: flex; align-items: center; gap: 20px; height: 66px; padding: 0 8px 0 16px;
  border-radius: 999px; border: 1px solid color-mix(in oklab, var(--ink) 9%, transparent);
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .75), 0 14px 40px -20px rgb(16 38 43 / .35);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-scrolled .header-inner { background: color-mix(in oklab, var(--surface) 92%, transparent); box-shadow: inset 0 1px 0 rgb(255 255 255 / .75), 0 18px 50px -18px rgb(16 38 43 / .45); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand-mark { width: 38px; height: 38px; }
.bm-bg { fill: var(--ink); }
.bm-sun { fill: var(--accent); }
.bm-road { stroke: var(--bg); stroke-width: 1.8; stroke-linecap: round; fill: none; }
.bm-dash { stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.brand-name { font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-ext); font-size: 16px; letter-spacing: -0.01em; text-transform: uppercase; }
.brand-name span { color: var(--accent); }

.nav { display: flex; gap: 2px; margin-inline: auto; }
.nav a { padding: 8px 12px; border-radius: 999px; white-space: nowrap; text-decoration: none; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); transition: color .2s, background-color .2s; }
.nav a:hover, .nav a.is-current { color: var(--ink); background: var(--bg-2); }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* Call button: ringing phone + pulse ring */
.header-call { position: relative; display: inline-grid; place-items: center; border-radius: 999px; text-decoration: none; }
.header-call:hover .header-call-icon, .header-call:focus-visible .header-call-icon { background: var(--accent); color: var(--accent-ink); }
/* Number pops out in a card on hover / keyboard focus, so the bar stays short. */
.header-call-pop {
  position: absolute; top: calc(100% + 14px); right: -8px; display: grid; gap: 2px; min-width: 210px; padding: 14px 18px 16px;
  border-radius: 16px; background: var(--deep); color: var(--deep-ink); box-shadow: var(--shadow-lg); white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.96); transform-origin: top right;
  transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.header-call-pop::before { content: ""; position: absolute; top: -6px; right: 22px; width: 12px; height: 12px; background: var(--deep); transform: rotate(45deg); border-radius: 2px; }
.header-call:hover .header-call-pop, .header-call:focus-visible .header-call-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.header-call-pop small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--deep-ink-2); }
.header-call-pop strong { font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-ext); font-size: 22px; letter-spacing: -0.01em; line-height: 1.1; }
.header-call-pop em { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-on-dark); margin-top: 4px; }
.header-call-icon { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; background: var(--ink); color: var(--bg); flex: none; }
.header-call-icon .icon { width: 18px; height: 18px; }
.header-call-icon::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 2px solid var(--accent); opacity: 0; }

/* Primary header CTA: button-in-button, light sweep, glow pulse */
.cta-pop {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 14px;
  height: 52px; padding: 0 6px 0 22px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; font-stretch: var(--w-wide); font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 12px 28px -10px color-mix(in oklab, var(--accent) 85%, transparent);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.cta-pop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .42) 50%, transparent 65%); transform: translateX(-130%); }
.cta-pop-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: rgb(255 255 255 / .2); transition: transform .45s var(--ease), background-color .3s; }
.cta-pop-icon .icon { width: 18px; height: 18px; }
.cta-pop:hover { background: var(--accent-hover); transform: translateY(-1px); }
.cta-pop:hover .cta-pop-icon { transform: translateX(2px) rotate(-45deg) scale(1.06); background: rgb(255 255 255 / .28); }
.cta-pop:active { transform: scale(.97); }


/* Hamburger that morphs into an X */
.menu-toggle { display: none; width: 46px; height: 46px; }
.burger { position: relative; width: 20px; height: 12px; }
.burger span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: top .35s var(--ease), transform .35s var(--ease); }
.burger span:first-child { top: 0; }
.burger span:last-child { top: 10px; }
.menu-toggle[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.menu-toggle[aria-expanded="true"] .burger span:first-child { top: 5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .burger span:last-child { top: 5px; transform: rotate(-45deg); }

/* Full-screen mobile menu */
html.menu-open { overflow: hidden; }
.site-header.menu-open .header-inner { background: var(--surface); }
.mobile-menu {
  position: fixed; inset: 0; z-index: 45; padding-top: var(--menu-top, var(--header-h));
  background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path .5s var(--ease), visibility 0s linear .5s;
}
.mobile-menu.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .55s var(--ease), visibility 0s; }
.mm-inner { min-height: 100%; display: flex; flex-direction: column; gap: 24px; padding-block: 8px calc(24px + env(safe-area-inset-bottom)); }
.mm-nav { display: grid; }
.mm-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 2px; border-bottom: 1px solid var(--line); text-decoration: none;
  font-family: var(--font-display); font-size: clamp(1.5rem, 7vw, 2.05rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1; text-transform: uppercase;
  transition: color .2s;
}
.mm-nav a .icon { width: 26px; height: 26px; color: var(--ink-3); transition: transform .35s var(--ease), color .2s; }
.mm-nav a:hover, .mm-nav a:active, .mm-nav a.is-current { color: var(--accent); }
.mm-nav a:hover .icon, .mm-nav a:active .icon, .mm-nav a.is-current .icon { color: var(--accent); transform: rotate(-45deg); }
.mm-foot { margin-top: auto; display: grid; gap: 12px; }
.mm-drive { position: relative; height: 62px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mm-coach { position: absolute; left: 0; bottom: 8px; width: 156px; transform: translateX(-170px); }
.mm-lane { position: absolute; left: 0; right: 0; bottom: 5px; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--line-2) 0 18px, transparent 18px 32px); }
.mm-cta { width: 100%; height: 60px; justify-content: space-between; font-size: 14px; }
.mm-call { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: border-color .25s, transform .25s var(--ease); }
.mm-call:active { transform: scale(.98); }
.mm-call > .icon { margin-left: auto; width: 22px; height: 22px; color: var(--accent); }
.mm-call-text small { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.mm-call-text strong { display: block; font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-ext); font-size: 20px; letter-spacing: -0.01em; line-height: 1.15; }
.site-header.menu-open .header-call { display: none; }
.mm-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--ink-3); font-size: 15px; }
.mm-meta span { display: inline-flex; align-items: center; gap: 8px; }
.mm-meta .icon { width: 18px; height: 18px; color: var(--accent); }
.mm-anim { opacity: 0; transform: translateY(16px); transition: opacity .25s, transform .25s var(--ease); }
.mobile-menu.is-open .mm-anim { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 45ms + 120ms); }
@media (min-width: 961px) { .mobile-menu { display: none; } }

@media (max-width: 960px) {
  .nav { display: none; }
  .menu-toggle { display: inline-grid; }
}
@media (max-width: 560px) {
  .header-cta { display: none; }
  .brand-name { font-size: 13.5px; }
}
@media (max-width: 400px) { .header-call { display: none; } }

/* ---------- Hero: pinned video ---------- */
.hv { position: relative; margin-top: -76px; background: #0B1517; color: #F3F4F1; }
.hv-sticky { position: relative; min-height: 100dvh; overflow: hidden; display: grid; align-items: end; contain: layout paint; }
.hv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); backface-visibility: hidden; }
.hv-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(8 16 18 / .55) 0%, rgb(8 16 18 / .05) 34%, rgb(8 16 18 / .35) 62%, rgb(8 16 18 / .88) 100%),
    radial-gradient(120% 80% at 20% 100%, rgb(8 16 18 / .55), transparent 60%);
}
.hv-stage { position: relative; display: grid; padding-block: 140px clamp(56px, 9vh, 104px); }
.hv-frame { grid-area: 1 / 1; align-self: end; }
.hv-frame-2, .hv-frame-3, .hv-frame-4 { display: none; }
.hv .eyebrow { color: var(--accent-hot); text-shadow: 0 1px 12px rgb(0 0 0 / .7); }
.hero-title { font-size: clamp(2.55rem, 7.4vw, 7.2rem); line-height: .84; letter-spacing: -0.01em; word-spacing: .06em; font-weight: 900; font-stretch: var(--w-cond); text-transform: uppercase; color: #F7F6F2; text-shadow: 0 2px 30px rgb(0 0 0 / .25); }
.hero-title em { font-style: italic; color: var(--accent-hot); text-shadow: 0 0 34px rgb(255 106 38 / .45), 0 2px 18px rgb(0 0 0 / .35); }
.hero-sub { font-size: clamp(1.08rem, 1.5vw, 1.3rem); color: rgb(243 244 241 / .86); max-width: 46ch; margin-top: 24px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hv-big {
  font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-cond); text-transform: uppercase;
  font-size: clamp(3rem, 8.4vw, 8.4rem); line-height: .84; letter-spacing: -0.01em; color: #F7F6F2; text-shadow: 0 2px 30px rgb(0 0 0 / .3);
}
.hv-big em { font-style: italic; color: var(--accent-hot); text-shadow: 0 0 34px rgb(255 106 38 / .45), 0 2px 18px rgb(0 0 0 / .35); }
.hv-line { display: block; }
.hv-cta { margin-top: 32px; height: 60px; font-size: 15px; padding-left: 26px; }
.hv-progress { position: absolute; right: clamp(16px, 3vw, 40px); top: 50%; display: grid; gap: 8px; transform: translateY(-50%); }
.hv-progress span { width: 3px; height: 36px; border-radius: 3px; background: rgb(243 244 241 / .25); position: relative; overflow: hidden; }
.hv-progress span::after { content: ""; position: absolute; inset: 0; background: var(--accent-on-dark); transform: scaleY(0); transform-origin: top; }
.hv-progress { display: none; }

/* ---------- Desert coach scene (now in the closing banner) ---------- */
.scene {
  width: 100%; height: auto; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 800 / 620;
}
.scene .sun { fill: var(--sun); transform-box: fill-box; transform-origin: center; transform: scale(var(--sun-scale)); transition: transform .8s var(--ease), fill .6s; }
.scene .sun-glow { opacity: .9; }
.scene .m-far { fill: var(--m-far); }
.scene .m-mid { fill: var(--m-mid); }
.scene .ground { fill: var(--ground); }
.scene .cacti use { stroke: var(--cactus); }
.scene .shrub { fill: var(--shrub); }
.scene .road { fill: var(--road); }
.scene .road-edge { stroke: var(--road-line); stroke-width: 2; opacity: .35; }
.scene .road-dash { stroke: var(--road-line); stroke-width: 5; stroke-dasharray: 40 30; stroke-linecap: round; }
.wheel-spin { transform-box: fill-box; transform-origin: center; }

/* ---------- Proof + brands ---------- */
.proof { padding-bottom: clamp(56px, 7vw, 88px); }
.proof-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.proof-row li { display: flex; gap: 14px; padding: 28px 24px 4px 0; }
.promise-head, .promise-foot, .pr-n, .pr-check { display: none; }
.proof-row li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.proof-row .icon { width: 26px; height: 26px; color: var(--accent); margin-top: 2px; }
.proof-row strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .01em; text-transform: uppercase; }
.proof-row div > span { display: block; color: var(--ink-3); font-size: 15px; line-height: 1.45; margin-top: 2px; }

.brands { margin-top: clamp(48px, 6vw, 72px); }
.brands-label { text-align: center; color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 22px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; align-items: center; gap: clamp(40px, 5vw, 72px); padding-right: clamp(40px, 5vw, 72px); }
.marquee li { font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 44px); font-weight: 900; font-stretch: var(--w-ext); letter-spacing: -0.02em; line-height: 1; text-transform: uppercase; color: var(--ink); white-space: nowrap; transition: color .3s, -webkit-text-stroke-color .3s; }
.marquee li:hover { color: var(--accent); }
.marquee li.b-outline { color: transparent; -webkit-text-stroke: 1.3px var(--ink-3); }
.marquee li.b-outline:hover { color: transparent; -webkit-text-stroke-color: var(--accent); }
.marquee li.b-narrow { font-stretch: var(--w-cond); color: var(--ink-3); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Offer ---------- */
.offer { padding-top: clamp(48px, 6vw, 80px); background: linear-gradient(180deg, transparent, var(--bg-2) 40%, transparent); }
.offer-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.offer-aside { position: sticky; top: calc(var(--header-h) + 32px); }
.next-steps { margin-top: 36px; display: grid; gap: 22px; }
.next-steps li { display: flex; gap: 16px; }
.ns-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; flex: none; background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-weight: 500; font-size: 13px; }
.next-steps strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .01em; text-transform: uppercase; }
.next-steps span:not(.ns-num) { color: var(--ink-3); font-size: 15px; }
.call-card {
  margin-top: 40px; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius);
  background: var(--deep); color: var(--deep-ink); text-decoration: none; max-width: 400px;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.call-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.call-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); flex: none; }
.call-card small { display: block; color: var(--deep-ink-2); font-size: 14px; }
.call-card strong { display: block; font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-wide); font-size: 23px; letter-spacing: -0.01em; }
.call-card-arrow { margin-left: auto; transition: transform .3s var(--ease); }
.call-card:hover .call-card-arrow { transform: translateX(4px); }

.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3.4vw, 40px); box-shadow: var(--shadow); }
.form-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
.form-title { font-size: clamp(1.35rem, 2.1vw, 1.7rem); font-weight: 900; letter-spacing: -0.015em; line-height: 1; text-transform: uppercase; }
.form-step-label { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; }
.stepper { display: flex; gap: 6px; margin-top: 10px; }
.stepper span { width: 32px; height: 5px; border-radius: 999px; background: var(--line-2); transition: background-color .4s var(--ease); }
.stepper span.is-on { background: var(--accent); }

.step { border: 0; padding: 0; margin: 0; min-width: 0; display: none; }
.step.is-active { display: grid; gap: 20px; animation: step-in .5s var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateX(16px); } }
.step.is-back { animation-name: step-in-back; }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-16px); } }

.field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field-row.three { grid-template-columns: .8fr 1fr 1fr; }
.field label, .field .label { font-size: 15px; font-weight: 600; }
.req { color: var(--accent); }
.opt { color: var(--ink-3); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: var(--field); font-size: 16px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B686D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 38px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent); }
.field [aria-invalid="true"] { border-color: var(--error); }
.hint { font-size: 14px; color: var(--ink-3); }
.error { font-size: 14px; color: var(--error); font-weight: 500; min-height: 0; }
.error:empty { display: none; }
.form-error { color: var(--error); font-weight: 500; font-size: 15px; }
.form-error:empty { display: none; }
.form-error a { font-weight: 700; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.dropzone {
  position: relative; display: grid; justify-items: center; gap: 6px; padding: 24px; border-radius: var(--radius-sm);
  border: 1.5px dashed var(--line-2); background: var(--field); text-align: center; cursor: pointer;
  transition: border-color .2s, background-color .2s, transform .2s var(--ease);
}
.dropzone .icon { width: 28px; height: 28px; color: var(--accent); }
.dropzone strong { color: var(--accent); }
.dropzone small { color: var(--ink-3); font-size: 14px; }
.dropzone:hover, .dropzone.is-drag { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.is-drag { transform: scale(1.01); }
.dropzone:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.thumbs:empty { display: none; }
.thumbs li { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg-2); animation: pop .35s var(--ease); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 999px; border: 0; display: grid; place-items: center; background: rgb(14 27 31 / .75); color: #F3F4F1; cursor: pointer; }
.thumbs button .icon { width: 16px; height: 16px; }
@keyframes pop { from { opacity: 0; transform: scale(.9); } }

.privacy { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 14px; }
.privacy .icon { width: 18px; height: 18px; color: var(--accent); }
.step-actions { display: flex; gap: 12px; }
.step-actions .btn-primary { flex: 1; }

.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn-label::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

.step-success { text-align: center; justify-items: center; padding-block: 24px; }
.step-success p { color: var(--ink-2); max-width: 40ch; }
.step-success:focus { outline: none; }
.success-badge svg { width: 72px; height: 72px; }
.success-badge circle { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .8s var(--ease) forwards; }
.success-badge path { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .5s .5s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- How it works ---------- */
.how-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); }
.how-intro { position: sticky; top: calc(var(--header-h) + 48px); align-self: start; }
.how-steps { position: relative; padding-left: 84px; }
.road-track {
  position: absolute; left: 22px; top: 12px; bottom: 12px; width: 8px; border-radius: 999px;
  background: repeating-linear-gradient(180deg, var(--line-2) 0 14px, transparent 14px 26px);
}
.road-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform .9s var(--ease); }
.road-marker {
  position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); translate: -50% -50%;
  width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--accent); color: var(--accent); box-shadow: var(--shadow);
  transition: top .9s var(--ease);
}
.road-marker .icon { transform: rotate(90deg); }
.how-step { padding-block: clamp(36px, 7vh, 72px); transition: opacity .6s var(--ease); }
.how-step:first-of-type { padding-top: 0; }
.how-step:last-of-type { padding-bottom: 0; }
.js .how-step:not(.is-active) { opacity: .4; }
.how-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--bg-2); color: var(--ink-2); margin-bottom: 20px; transition: background-color .5s var(--ease), color .5s var(--ease), transform .5s var(--ease); }
.how-icon .icon { width: 26px; height: 26px; }
.how-step.is-active .how-icon { background: var(--accent); color: var(--accent-ink); transform: rotate(-4deg); }
.how-step h3 { font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 900; font-stretch: var(--w-wide); line-height: 1; text-transform: uppercase; }
.how-step p { color: var(--ink-2); margin-top: 10px; max-width: 46ch; }

/* ---------- Easy comparison ---------- */
.easy-title { max-width: 22ch; }
.easy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: clamp(40px, 5vw, 64px); align-items: stretch; }
.easy-card { border-radius: var(--radius); padding: clamp(24px, 3.4vw, 44px); }
.easy-diy { background: var(--surface); border: 1px solid var(--line); }
.easy-us { background: var(--deep); color: var(--deep-ink); display: flex; flex-direction: column; }
.easy-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.easy-us .easy-head { border-color: rgb(238 242 239 / .14); }
.easy-head h3 { font-size: 1.3rem; font-weight: 900; text-transform: uppercase; }
.easy-count { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.easy-count span { font-family: var(--font-display); font-size: 2.4rem; font-weight: 900; font-stretch: var(--w-ext); color: var(--ink); margin-right: 6px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; vertical-align: -0.12em; }
.easy-us .easy-count { color: var(--deep-ink-2); }
.easy-us .easy-count span { color: var(--accent); }
.diy-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; color: var(--ink-2); }
.diy-list .icon { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.js .diy-list li { opacity: 0; transform: translateY(10px) rotate(-.6deg); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 140ms + 200ms); }
.js .easy-diy.is-visible .diy-list li { opacity: 1; transform: none; }
.us-list { display: grid; gap: 22px; padding-block: 20px 32px; }
.us-list li { display: flex; gap: 16px; }
.us-check { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); flex: none; }
.us-check .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.us-list strong { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; }
.us-list span:not(.us-check) { color: var(--deep-ink-2); }
.easy-us .btn { margin-top: auto; align-self: flex-start; }
.js .us-list li { opacity: 0; transform: translateX(-12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .easy-us.is-visible .us-list li { opacity: 1; transform: none; }
.js .easy-us.is-visible .us-list li:nth-child(2) { transition-delay: .15s; }
.js .easy-us.is-visible .us-list li:nth-child(3) { transition-delay: .3s; }

/* ---------- Why us: cinematic bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.tile { position: relative; overflow: clip; isolation: isolate; border-radius: var(--radius); padding: clamp(24px, 3vw, 38px); background: var(--surface); border: 1px solid var(--line); }
.tile h3 { font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 900; line-height: .95; text-transform: uppercase; }
.tile p { color: var(--ink-2); margin-top: 12px; max-width: 42ch; }
.tile-kicker { font-family: var(--font-mono); font-size: 11px !important; letter-spacing: .16em; text-transform: uppercase; color: var(--accent) !important; margin: 0 0 14px !important; }
.tile-mega { font-size: clamp(2.6rem, 5.4vw, 5.2rem) !important; font-stretch: var(--w-cond); line-height: .86 !important; }
.tile-mega em { font-style: italic; color: var(--accent-on-dark); }
.tile-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.tile-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(8 16 18 / .15) 0%, rgb(8 16 18 / .35) 45%, rgb(8 16 18 / .9) 100%); }

.tile-pickup { grid-column: 1 / 8; grid-row: 1 / 3; min-height: 640px; display: flex; align-items: flex-end; color: #F7F6F2; border: 0; background: #0B1517; }
.tile-pickup p { color: rgb(243 244 241 / .85); }
.tile-pickup .tile-kicker, .tile-safe .tile-kicker { color: var(--accent-on-dark) !important; }
.tile-copy { position: relative; }
.pickup-route { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.pr-line, .pr-glow { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pr-line { stroke: #F7F6F2; stroke-width: 4; }
.pr-glow { stroke: var(--accent); stroke-width: 16; opacity: .55; filter: blur(6px); }
.tile-pickup.is-visible .pr-line, .tile-pickup.is-visible .pr-glow { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--ease) .3s; }
.pr-start { fill: #0B1517; stroke: #F7F6F2; stroke-width: 4; }
.pr-dot { fill: var(--accent); stroke: #F7F6F2; stroke-width: 4; }
.pr-pulse { fill: var(--accent); opacity: .35; transform-box: fill-box; transform-origin: center; }

.tile-paper { grid-column: 8 / 13; grid-row: 1; background: var(--deep); color: var(--deep-ink); border: 0; display: grid; gap: 22px; align-content: space-between; }
.tile-paper p { color: var(--deep-ink-2); }
.tile-ghost {
  position: absolute; right: -10px; bottom: -18px; z-index: -1; font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-ext);
  font-size: clamp(4rem, 8vw, 7rem); line-height: 1; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.2px rgb(238 242 239 / .12); white-space: nowrap;
}
.paper-stamps { display: grid; gap: 8px; }
.paper-stamps li {
  display: flex; justify-content: space-between; align-items: center; padding: 11px 12px 11px 16px; border-radius: 12px;
  background: rgb(238 242 239 / .06); border: 1px solid rgb(238 242 239 / .1);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.paper-stamps b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); }
.paper-stamps b .icon { width: 15px; height: 15px; stroke-width: 2.6; }

.tile-cash { grid-column: 8 / 13; grid-row: 2; background: var(--accent); color: var(--accent-ink); border: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.tile-cash p { color: inherit; opacity: .9; }
.tile-cash .tile-kicker { color: var(--accent-ink) !important; opacity: .8; }
.big-num { font-family: var(--font-display); font-size: clamp(5rem, 9vw, 8.5rem); font-weight: 900; font-stretch: var(--w-ext); line-height: .82; letter-spacing: -0.045em; margin: 0 0 18px !important; opacity: 1 !important; font-variant-numeric: tabular-nums; }

.tile-person { grid-column: 1 / 6; background: var(--accent-soft); border: 0; display: flex; flex-direction: column; }
.person-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.person-head .tile-kicker { margin: 0 !important; }
.person-ring { width: 52px; height: 52px; }
.person-ring .icon { width: 22px; height: 22px; }
.person-phone {
  display: inline-flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 26px; text-decoration: none;
  font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-ext); font-size: clamp(1.6rem, 2.6vw, 2.3rem); letter-spacing: -0.02em; color: var(--ink);
  transition: color .25s var(--ease);
}
.person-phone .icon { width: 26px; height: 26px; color: var(--accent); transition: transform .35s var(--ease); }
.person-phone:hover { color: var(--accent); }
.person-phone:hover .icon { transform: translateX(6px) rotate(-45deg); }

.tile-safe { grid-column: 6 / 13; min-height: 460px; display: flex; align-items: flex-end; color: #F7F6F2; border: 0; background: #0B1517; }
.tile-safe p { color: rgb(243 244 241 / .85); }
.safe-badge { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: rgb(243 244 241 / .12); border: 1px solid rgb(243 244 241 / .22); margin-bottom: 22px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.safe-badge .icon { width: 26px; height: 26px; color: var(--accent-on-dark); }
.safe-facts { font-family: var(--font-mono); font-size: 11.5px !important; letter-spacing: .14em; text-transform: uppercase; color: rgb(243 244 241 / .7) !important; margin-top: 20px !important; }
.safe-facts span { color: var(--accent-on-dark); margin-inline: 8px; }

.spotlight::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%);
}
.spotlight:hover::before { opacity: 1; }

/* ---------- Reviews: auto-scrolling rows ---------- */
.reviews-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.google-badge {
  display: flex; align-items: center; gap: 16px; padding: 14px 14px 14px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); flex: none;
}
.g-logo { width: 22px; height: 22px; flex: none; }
.g-logo-lg { width: 40px; height: 40px; }
.google-badge-copy p { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.gold-stars { display: inline-flex; gap: 2px; color: var(--gold); filter: drop-shadow(0 1px 0 rgb(150 100 0 / .25)); }
.gold-stars .icon { width: 18px; height: 18px; }

.reviews { overflow-x: clip; }
.avatar { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-weight: 500; font-size: 14px; letter-spacing: .04em; }

/* Review ring: cards sit on a 3D drum that springs to the next review. Without JS (or with reduced motion) it is a swipeable strip. */
.rv-stage { --cw: clamp(300px, 27vw, 400px); --ch: 450px; --rv-gap: 34px; --rv-step: 30; position: relative; margin-top: clamp(24px, 3vw, 48px); padding-block: 56px 76px; outline: none; }
.rv-stage:focus-visible .rv-card.is-active { outline: 3px solid var(--accent-hot); outline-offset: 6px; }
.rv-ring { display: flex; gap: 20px; margin: 0; padding: 10px max(16px, calc((100% - 1200px) / 2)); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rv-ring::-webkit-scrollbar { display: none; }
.rv-stage.is-3d { perspective: 1800px; perspective-origin: 50% 35%; touch-action: pan-y; cursor: grab; }
.rv-stage.is-3d.is-dragging { cursor: grabbing; }
.rv-stage.is-3d .rv-ring { position: relative; height: var(--ch); padding: 0; overflow: visible; transform-style: preserve-3d; }
.rv-stage.is-3d .rv-card { position: absolute; top: 0; left: 50%; margin-left: calc(var(--cw) / -2); will-change: transform, opacity; }

.rv-card {
  position: relative; width: var(--cw); height: var(--ch); flex: none; scroll-snap-align: center; display: flex; flex-direction: column; padding: 30px 30px 28px; border-radius: 30px; overflow: hidden;
  background: var(--surface); color: var(--ink); border: 1px solid rgb(16 38 43 / .08);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 46px 70px -42px rgb(16 38 43 / .5);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; user-select: none; -webkit-user-select: none;
  transition: box-shadow .5s var(--ease);
}
.rv-card::before { content: "\201D"; position: absolute; right: 14px; top: -34px; font-family: var(--font-display); font-weight: 900; font-size: 13rem; line-height: 1; color: currentColor; opacity: .06; pointer-events: none; }
.rv-top { display: flex; justify-content: space-between; align-items: center; }
.rv-card .gold-stars .icon { width: 22px; height: 22px; }
.rv-g { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 4px 14px rgb(16 38 43 / .14); }
.rv-card blockquote { margin: auto 0; padding-block: 22px; font-family: var(--font-display); font-weight: 650; font-size: clamp(1.2rem, 1.5vw, 1.42rem); line-height: 1.3; letter-spacing: -0.012em; text-wrap: pretty; }
.rv-who { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid color-mix(in oklab, currentColor 14%, transparent); }
.rv-who strong { display: block; font-weight: 700; font-size: 15.5px; }
.rv-who small { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.rv-place { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 13px; opacity: .82; }
.rv-place .icon { width: 14px; height: 14px; }
.rv-deep { background: radial-gradient(120% 90% at 100% 0%, #1E4048, var(--deep) 60%); color: var(--deep-ink); border-color: transparent; }
.rv-deep .avatar { background: var(--accent); color: #fff; }
.rv-hot { background: linear-gradient(155deg, #FF7A35, var(--accent) 72%); color: #fff; border-color: transparent; }
.rv-hot .gold-stars { color: #FFE08A; }
.rv-hot .avatar { background: rgb(255 255 255 / .2); color: #fff; }
.rv-card.is-active { box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 2px var(--accent-hot), 0 60px 90px -40px rgb(196 71 30 / .55); }
.rv-hot.is-active, .rv-deep.is-active { box-shadow: 0 0 0 2px #FFE08A, 0 60px 90px -40px rgb(196 71 30 / .55); }

.rv-band { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -58%; overflow: hidden; pointer-events: none; }
.rv-band-track { display: flex; width: max-content; }
.rv-band-track > div { display: flex; align-items: center; gap: .35em; padding-right: .35em; font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-ext); font-size: clamp(4.5rem, 13vw, 12rem); line-height: 1; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgb(16 38 43 / .13); }
.rv-band .icon { width: .42em; height: .42em; color: var(--accent-hot); opacity: .35; }
.rv-glow { position: absolute; left: 50%; top: 50%; width: min(1100px, 92vw); height: 560px; translate: -50% -50%; background: radial-gradient(closest-side, rgb(255 106 38 / .2), rgb(255 106 38 / .06) 55%, transparent); pointer-events: none; }
.rv-floor { position: absolute; left: 50%; bottom: 22px; width: min(980px, 86vw); height: 70px; translate: -50% 0; background: radial-gradient(closest-side, rgb(16 38 43 / .2), transparent); pointer-events: none; }

.rv-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.rv-btn { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .35s var(--ease), background-color .25s, color .25s, border-color .25s; }
.rv-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-2px); }
.rv-btn:active { transform: scale(.94); }
.rv-btn:focus-visible { outline: 3px solid var(--accent-hot); outline-offset: 3px; }
.rv-count { min-width: 8ch; text-align: center; font-family: var(--font-mono); font-size: 14px; letter-spacing: .12em; color: var(--ink-3); }
.rv-count b { font-size: 26px; font-weight: 600; color: var(--ink); }
.rv-hint { flex-basis: 100%; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- Ready: interactive seller checklist ---------- */
.ready-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.ready-panel { position: sticky; top: calc(var(--header-h) + 32px); }
.ready-meter { display: flex; align-items: center; gap: 22px; margin-top: 36px; }
.ready-meter svg { width: 132px; height: 132px; transform: rotate(-90deg); flex: none; }
.rm-track { fill: none; stroke: var(--line); stroke-width: 10; }
.rm-value { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: calc(326.73 * (1 - var(--done, 0))); transition: stroke-dashoffset .8s var(--ease), stroke .4s; }
.ready-meter.is-complete .rm-value { stroke: #2E9E5B; }
.ready-meter-num strong { display: block; font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-ext); font-size: clamp(2.6rem, 4.6vw, 3.6rem); line-height: .9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ready-meter-num span { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ready-meter-num b { font-weight: 600; color: var(--ink); }
.ready-status { margin-top: 18px; font-weight: 600; min-height: 1.6em; }
.ready-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ready-actions .btn-primary { transition: background-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s; }
.ready-actions .btn-primary.is-ready { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 22%, transparent), 0 14px 30px -12px var(--accent); }
.ready-lists { display: grid; gap: 18px; }
.ready-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 2.6vw, 28px); }
.ready-group-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ready-group-head h3 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; text-transform: uppercase; font-weight: 900; }
.ready-group-head .icon { color: var(--accent); }
.ready-count { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; padding: 5px 10px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); transition: background-color .3s, color .3s; }
.ready-count.is-full { background: var(--accent); color: var(--accent-ink); }
.rcheck { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 14px; margin-inline: -6px; border-radius: 14px; cursor: pointer; transition: background-color .25s var(--ease), transform .25s var(--ease); }
.rcheck + .rcheck { margin-top: 2px; }
.rcheck:hover { background: var(--bg-2); }
.rcheck:active { transform: scale(.99); }
.rcheck input { position: absolute; opacity: 0; pointer-events: none; }
.rcheck-box { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; border: 2px solid var(--line-2); transition: background-color .3s var(--ease), border-color .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.rcheck-box .icon { width: 17px; height: 17px; stroke-width: 2.8; color: var(--accent-ink); stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .35s var(--ease) .05s; }
.rcheck input:checked + .rcheck-box { background: var(--accent); border-color: var(--accent); transform: scale(1.1) rotate(-6deg); }
.rcheck input:checked + .rcheck-box .icon { stroke-dashoffset: 0; }
.rcheck input:focus-visible + .rcheck-box { outline: 3px solid var(--accent); outline-offset: 2px; }
.rcheck-text strong { display: block; font-weight: 600; transition: color .3s; }
.rcheck-text small { display: block; color: var(--ink-3); font-size: 14.5px; line-height: 1.45; margin-top: 2px; }
.rcheck input:checked ~ .rcheck-text strong { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* ---------- FAQ: compact two-column ---------- */
.faq.section { padding-block: clamp(64px, 8vw, 104px); }
.faq-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }
.faq-tools { display: grid; gap: 12px; justify-items: end; }
.faq-search { position: relative; width: min(360px, 100%); }
.faq-search .icon { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--ink-3); pointer-events: none; }
.faq-search input { width: 100%; height: 48px; padding: 0 18px 0 46px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--field); font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.faq-search input::placeholder { color: var(--ink-3); }
.faq-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent); }
.faq-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 36px; padding-inline: 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; color: var(--ink-2); transition: background-color .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(28px, 3vw, 40px); align-items: start; }
.qa { position: relative; overflow: hidden; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transition: border-color .3s, box-shadow .4s var(--ease), transform .4s var(--ease); }
.qa::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease); }
.qa:hover { border-color: var(--line-2); transform: translateY(-2px); }
.qa[open] { border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); box-shadow: var(--shadow); }
.qa[open]::before { transform: scaleY(1); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.005em; line-height: 1.3; transition: color .2s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }
.qa-icon { position: relative; width: 30px; height: 30px; flex: none; border-radius: 999px; border: 1px solid var(--line-2); transition: background-color .3s, border-color .3s, transform .45s var(--ease); }
.qa-icon::before, .qa-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease); }
.qa-icon::after { transform: rotate(90deg); }
.qa[open] .qa-icon { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: rotate(180deg); }
.qa[open] .qa-icon::after { transform: rotate(0deg); }
.qa-a p { color: var(--ink-2); padding: 0 20px 20px; max-width: 62ch; font-size: 15.5px; }
.qa::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.qa[open]::details-content { block-size: auto; }
.qa[open] .qa-a p { animation: qa-in .5s var(--ease); }
@keyframes qa-in { from { opacity: 0; transform: translateY(-6px); } }
.faq-empty { grid-column: 1 / -1; padding: 24px 0; display: grid; gap: 16px; justify-items: start; color: var(--ink-2); }

/* ---------- About: Phoenix HQ + live nationwide map ---------- */
.about-stage { position: relative; overflow: clip; isolation: isolate; border-radius: var(--radius-lg); min-height: clamp(720px, 74vw, 960px); padding: clamp(28px, 4.5vw, 64px); box-shadow: var(--shadow-lg); }
.about-scene { position: absolute; inset: 0; z-index: -1; }
.about-scene .scene { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.about-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.about-copy .h2 { font-size: clamp(2.4rem, 4.6vw, 4.3rem); }
.about-copy .lead { color: var(--ink); }
.about-copy > p:not(.lead):not(.hours) { color: var(--ink-2); margin-top: 14px; max-width: 54ch; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 26px 0 0; }
.stats div {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 14px 16px; border-radius: 16px;
  background: color-mix(in oklab, var(--surface) 70%, transparent); border: 1px solid rgb(255 255 255 / .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.stats dt { color: var(--ink-3); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.45; }
.stats dd { margin: 0; font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 900; font-stretch: var(--w-ext); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.hours { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 9px 14px; border-radius: 999px; background: color-mix(in oklab, var(--surface) 70%, transparent); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.hours .icon { color: var(--accent); width: 18px; height: 18px; }

.about-map {
  margin: 0; padding: 18px 18px 12px; border-radius: 24px; color: #F3F4F1;
  background: rgb(10 22 25 / .84); border: 1px solid rgb(255 255 255 / .12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 34px 80px -34px rgb(0 0 0 / .7);
}
.about-map-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 2px 6px 8px; }
.about-map .tile-kicker { color: var(--accent-hot) !important; margin: 0 !important; }
.about-map-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgb(243 244 241 / .45); }
.usmap { display: block; width: 100%; height: auto; overflow: visible; }
.map-dot { fill: rgb(243 244 241 / .3); }
.map-land { fill: url(#map-dots); stroke: rgb(243 244 241 / .38); stroke-width: 1.4; stroke-linejoin: round; }
.map-states { fill: none; stroke: rgb(243 244 241 / .09); stroke-width: 1; }
.route path { fill: none; stroke-linecap: round; }
.route-track { stroke: rgb(243 244 241 / .16); stroke-width: 1.4; stroke-dasharray: 2 7; }
.route-out { stroke: #FFF4EA; stroke-width: 1.8; stroke-dasharray: 1 1; stroke-dashoffset: 0; opacity: .55; }
.route-in { stroke: var(--accent-hot); stroke-width: 3; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.route-comet { stroke: var(--accent-hot); stroke-width: 7; stroke-dasharray: .035 2; stroke-dashoffset: -1; opacity: 0; }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 6px 2px; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgb(243 244 241 / .72); }
.map-legend li { display: inline-flex; align-items: center; gap: 10px; }
.map-legend span { width: 26px; height: 3px; border-radius: 3px; }
.lg-out { background: #FFF4EA; opacity: .75; }
.lg-in { background: var(--accent-hot); box-shadow: 0 0 10px rgb(255 106 38 / .8); }
.city-dot { fill: #F3F4F1; }
.city-pulse { fill: var(--accent-hot); opacity: 0; transform-box: fill-box; transform-origin: center; }
.hq-dot { fill: var(--accent-hot); stroke: #FFF8F2; stroke-width: 3.5; }
.hq-ring { fill: none; stroke: var(--accent-hot); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hq-label { font-family: var(--font-mono); font-size: 17px; font-weight: 500; letter-spacing: .16em; fill: #F3F4F1; text-anchor: middle; paint-order: stroke; stroke: rgb(10 22 25 / .9); stroke-width: 6px; }

/* ---------- Final CTA ---------- */
.go { padding-block: clamp(40px, 6vw, 72px); }
.go-card {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--deep); color: var(--deep-ink);
  padding: clamp(36px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end;
}
.go-card::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -120px; top: -260px; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 45%, transparent), transparent 65%); opacity: .55; pointer-events: none; }
.go-copy { position: relative; }
.go-copy p { color: var(--deep-ink-2); font-size: 1.2rem; margin-top: 16px; }
.go-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.go-card { align-items: center; }
.go-scene { position: relative; }
.go-scene .scene { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
/* Contact: a call tile that rings, and a form in a glowing shell with floating labels and topic chips. */
.call-tile {
  position: relative; display: flex; align-items: center; gap: 18px; margin-top: 34px; padding: 18px 24px 18px 18px; border-radius: 26px; overflow: hidden; text-decoration: none;
  background: radial-gradient(130% 160% at 0% 0%, #1E4048, var(--deep) 62%); color: var(--deep-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 34px 60px -34px rgb(16 38 43 / .7); transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.call-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .09) 50%, transparent 65%); transform: translateX(-100%); transition: transform .9s var(--ease); }
.call-tile:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 44px 70px -34px rgb(196 71 30 / .55); }
.call-tile:hover::after { transform: translateX(100%); }
.call-tile:active { transform: scale(.985); }
.call-ring { position: relative; width: 60px; height: 60px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-hot); color: #fff; box-shadow: 0 0 30px rgb(255 106 38 / .55); }
.call-ring::before, .call-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent-hot); opacity: 0; }
.call-ring .icon { width: 26px; height: 26px; }
.call-copy small { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-on-dark); }
.call-copy strong { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-wide); font-size: clamp(1.55rem, 2.5vw, 2.15rem); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.call-arrow { margin-left: auto; width: 26px; height: 26px; color: var(--accent-on-dark); transition: transform .4s var(--ease); }
.call-tile:hover .call-arrow { transform: translateX(5px); }
.contact-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.contact-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 14.5px; }
.contact-chips .icon { width: 18px; height: 18px; color: var(--accent); }

@property --cf-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.contact-shell {
  position: relative; padding: 2px; border-radius: 34px;
  background: conic-gradient(from var(--cf-ang), transparent 0deg, var(--accent-hot) 50deg, #FFD3B8 80deg, transparent 140deg, transparent 360deg), var(--line);
  box-shadow: 0 60px 100px -60px rgb(196 71 30 / .5), 0 2px 6px rgb(16 38 43 / .06);
}
.contact-form { position: relative; overflow: hidden; border-radius: 32px; padding: clamp(22px, 3.2vw, 40px); background: var(--surface); }
.contact-form::before { content: ""; position: absolute; top: -60px; right: -60px; width: 260px; height: 260px; background: radial-gradient(circle, rgb(16 38 43 / .14) 1.4px, transparent 1.8px) 0 0 / 14px 14px; -webkit-mask: radial-gradient(closest-side, #000, transparent); mask: radial-gradient(closest-side, #000, transparent); pointer-events: none; }
.contact-fields { position: relative; display: grid; gap: 18px; }
.cf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; }
.cf-live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.cf-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-hot); box-shadow: 0 0 0 0 rgb(255 106 38 / .5); }
.topic { margin: 0; padding: 0; border: 0; min-width: 0; }
.topic legend { margin-bottom: 10px; font-size: 15px; font-weight: 600; }
.topic-opts { display: flex; gap: 8px; }
.topic-opts label { flex: 1 1 auto; min-width: 0; }
.topic-opts label { position: relative; cursor: pointer; }
.topic-opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.topic-opts span { display: flex; justify-content: center; align-items: center; white-space: nowrap; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--field); font-size: 14.5px; font-weight: 600; transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--ease); }
.topic-opts span::before { content: ""; width: 0; height: 8px; margin-right: 0; border-radius: 50%; background: var(--accent-hot); transition: width .3s var(--ease), margin-right .3s var(--ease); }
.topic-opts label:hover span { border-color: var(--ink-3); }
.topic-opts label:active span { transform: scale(.96); }
.topic-opts input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.topic-opts input:checked + span::before { width: 8px; margin-right: 9px; }
.topic-opts input:focus-visible + span { outline: 3px solid var(--accent-hot); outline-offset: 2px; }
/* "Selling my RV" details: slide open under the topic chips */
.cf-sell { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; margin-top: -18px; transition: grid-template-rows .55s var(--ease), opacity .35s, margin-top .55s var(--ease), visibility 0s .55s; }
.cf-sell.is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; margin-top: 0; transition: grid-template-rows .55s var(--ease), opacity .45s .1s, margin-top .55s var(--ease), visibility 0s; }
.cf-sell > * { min-height: 0; }
.cf-sell-inner { display: grid; gap: 16px; margin: 0; padding: 18px; border: 1.5px dashed color-mix(in oklab, var(--accent) 45%, transparent); border-radius: 22px; background: color-mix(in oklab, var(--accent-soft) 45%, var(--surface)); min-width: 0; overflow: hidden; }
.cf-sell-head { float: left; width: 100%; display: flex; align-items: center; gap: 10px; padding: 0; font-family: var(--font-display); font-weight: 800; font-stretch: var(--w-wide); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.cf-sell-head + * { clear: both; }
.cf-sell-head .icon { width: 22px; height: 22px; }
.cf-sell .dropzone { background: var(--surface); }
.cf-sell .hint { font-size: 13px; }
#c-vin { font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }

/* Floating labels: the label sits inside the box and lifts once you type or focus. */
.ffield { position: relative; gap: 6px; }
.ffield label { position: absolute; left: 17px; top: 19px; z-index: 1; font-size: 15.5px; font-weight: 500; color: var(--ink-3); pointer-events: none; transform-origin: 0 0; transition: transform .3s var(--ease), color .2s; }
.ffield input, .ffield textarea { min-height: 62px; padding: 27px 16px 9px; border-radius: 16px; border-width: 1.5px; }
.ffield textarea { min-height: 150px; padding-top: 30px; resize: none; }
.ffield:has(input:focus, textarea:focus, input:not(:placeholder-shown), textarea:not(:placeholder-shown)) label { transform: translateY(-11px) scale(.76); }
.ffield:has(input:focus, textarea:focus) label { color: var(--accent); }
.ffield input:focus, .ffield textarea:focus { background: var(--surface); }
.cf-count { position: absolute; right: 16px; top: 120px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-3); pointer-events: none; }
.cf-count.is-near { color: var(--accent); }
.cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.cf-send { min-width: 220px; }
.cf-plane { transition: transform .5s var(--ease); }
.cf-send:hover .cf-plane { transform: translate(3px, -3px) rotate(-8deg); }
.contact-form.is-sent .cf-plane { transform: translate(160px, -120px) rotate(-20deg) scale(.6); opacity: 0; transition: transform .7s cubic-bezier(.5, 0, .75, 0), opacity .7s; }
.contact-success { text-align: center; display: grid; justify-items: center; gap: 12px; padding-block: 48px; }
.contact-success[hidden] { display: none; }
.contact-success p { color: var(--ink-2); max-width: 42ch; }
.contact-success a { color: var(--accent); font-weight: 600; }
.contact-success:focus { outline: none; }

/* ---------- Ambient background ---------- */
.bg-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; will-change: transform; }
.orb-a { width: 62vmax; height: 62vmax; top: -26vmax; right: -20vmax; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 30%, transparent), transparent 62%); }
.orb-b { width: 70vmax; height: 70vmax; bottom: -34vmax; left: -24vmax; background: radial-gradient(circle, rgb(16 38 43 / .14), transparent 62%); }
.orb-c { width: 44vmax; height: 44vmax; top: 32vh; left: 34vw; background: radial-gradient(circle, rgb(246 196 150 / .5), transparent 62%); }
.bg-grid {
  position: absolute; inset: 0 0 -60% 0;
  background-image: radial-gradient(circle at 1px 1px, rgb(16 38 43 / .11) 1px, transparent 0); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 25%, transparent 80%);
}
.grain {
  position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Statement (scroll-filled words) ---------- */
.statement { position: relative; padding-block: clamp(72px, 10vw, 128px); }
.statement-text {
  font-family: var(--font-display); font-weight: 900; font-stretch: 90%; text-transform: uppercase;
  font-size: clamp(2.3rem, 6.4vw, 5.8rem); line-height: .94; letter-spacing: -0.025em; text-wrap: balance; max-width: 18ch;
}
.statement-text em, .word-accent { font-style: italic; color: var(--accent); }

/* ---------- Headline highlight ---------- */
.h2 em {
  font-style: italic; color: var(--accent);
  background: linear-gradient(color-mix(in oklab, var(--accent) 18%, transparent), color-mix(in oklab, var(--accent) 18%, transparent)) no-repeat 0 92% / 0% .2em;
  transition: background-size 1s var(--ease) .55s;
}
.h2.is-visible em, .h2:not(.is-split) em { background-size: 100% .2em; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-top: 64px; padding-bottom: 32px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 40px; }
.footer-brand p { color: var(--ink-3); margin-top: 16px; max-width: 34ch; }
.footer-nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 40px; align-content: start; }
.footer-nav a { text-decoration: none; color: var(--ink-2); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; }
.footer-nav a:hover { color: var(--accent); }
.footer-call { display: grid; gap: 4px; justify-items: end; text-align: right; }
.footer-call small { color: var(--ink-3); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.footer-call a { font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-wide); font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.02em; text-decoration: none; }
.footer-call a:hover { color: var(--accent); }
.footer-base { display: flex; justify-content: space-between; gap: 16px; margin-top: 0; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-3); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.footer-base a { text-decoration: none; }
.footer-base a:hover { color: var(--accent); }

/* ---------- Footer wordmark ---------- */
.footer-mark {
  margin-top: 56px; padding-block: 8px 20px; overflow: hidden; white-space: nowrap; user-select: none;
  font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-ext); text-transform: uppercase;
  font-size: calc((min(100vw, 1240px) - 2 * clamp(16px, 4vw, 32px)) * .0788); line-height: .82; letter-spacing: -0.03em; color: var(--ink);
}
.footer-mark span { color: var(--accent); }

/* ---------- Headline line masks (JS wraps each line) ---------- */
.line { display: block; overflow: hidden; padding: 0 .12em .08em 0; margin: 0 -.12em -.08em 0; }
.line-inner { display: block; transform-origin: 0 100%; }

/* ---------- Mobile action bar ---------- */
.action-bar { display: none; }
@media (max-width: 767px) {
  .action-bar {
    position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; padding: 8px; border-radius: 999px;
    background: color-mix(in oklab, var(--surface) 88%, transparent); border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow-lg);
    transition: transform .45s var(--ease), opacity .3s;
  }
  .action-bar.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .action-bar .btn { --h: 48px; }
  .site-footer { padding-bottom: 104px; }
}

/* ---------- Reveal & entrance motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(36px); filter: blur(6px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .js .reveal.is-visible { opacity: 1; transform: none; filter: none; }

  .orb-a { animation: drift-a 28s ease-in-out infinite alternate; }
  .orb-b { animation: drift-b 34s ease-in-out infinite alternate; }
  .orb-c { animation: drift-c 40s ease-in-out infinite alternate; }
  @keyframes drift-a { to { transform: translate3d(-14vmax, 12vmax, 0) scale(1.15); } }
  @keyframes drift-b { to { transform: translate3d(16vmax, -10vmax, 0) scale(1.1); } }
  @keyframes drift-c { to { transform: translate3d(-22vmax, -16vmax, 0) scale(.85); } }

  .cta-pop { animation: cta-glow 2.8s var(--ease) infinite; }
  @keyframes cta-glow {
    0% { box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 12px 28px -10px color-mix(in oklab, var(--accent) 85%, transparent), 0 0 0 0 color-mix(in oklab, var(--accent) 45%, transparent); }
    70%, 100% { box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 12px 28px -10px color-mix(in oklab, var(--accent) 85%, transparent), 0 0 0 12px color-mix(in oklab, var(--accent) 0%, transparent); }
  }
  .cta-pop::before { animation: sheen 3.6s var(--ease) 1.2s infinite; }
  @keyframes sheen { 0%, 50% { transform: translateX(-130%); } 80%, 100% { transform: translateX(130%); } }
  .header-call-icon .icon { animation: ring 4.5s ease-in-out infinite; }
  @keyframes ring { 0%, 78%, 100% { transform: none; } 81% { transform: rotate(-16deg); } 84% { transform: rotate(14deg); } 87% { transform: rotate(-12deg); } 90% { transform: rotate(8deg); } 93% { transform: rotate(-4deg); } }
  .header-call-icon::after { animation: ring-pulse 4.5s var(--ease) infinite; }
  @keyframes ring-pulse { 0%, 76% { opacity: 0; transform: scale(.85); } 82% { opacity: .9; } 100% { opacity: 0; transform: scale(1.25); } }

  .rv-band-track { animation: rv-band 60s linear infinite; }
  .contact-shell { animation: cf-spin 7s linear infinite; }
  @keyframes cf-spin { to { --cf-ang: 360deg; } }
  .call-ring::before { animation: call-ring 2.4s ease-out infinite; }
  .call-ring::after { animation: call-ring 2.4s 1.2s ease-out infinite; }
  @keyframes call-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
  .call-ring .icon { animation: phone-buzz 3.6s ease-in-out infinite; }
  @keyframes phone-buzz { 0%, 8%, 100% { transform: none; } 2%, 6% { transform: rotate(-14deg); } 4% { transform: rotate(14deg); } }
  .cf-live i { animation: live-dot 2s ease-out infinite; }
  @keyframes live-dot { to { box-shadow: 0 0 0 9px rgb(255 106 38 / 0); } }
  .contact-success:not([hidden]) > * { animation: rise .7s var(--ease) both; }
  .contact-success:not([hidden]) > :nth-child(2) { animation-delay: .25s; }
  .contact-success:not([hidden]) > :nth-child(3) { animation-delay: .4s; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } }
  @keyframes rv-band { to { transform: translateX(-50%); } }
  .rv-card.is-active .gold-stars .icon { animation: star-pop .6s cubic-bezier(.34, 1.56, .64, 1) both; }
  .rv-card.is-active .gold-stars .icon:nth-child(2) { animation-delay: 70ms; }
  .rv-card.is-active .gold-stars .icon:nth-child(3) { animation-delay: 140ms; }
  .rv-card.is-active .gold-stars .icon:nth-child(4) { animation-delay: 210ms; }
  .rv-card.is-active .gold-stars .icon:nth-child(5) { animation-delay: 280ms; }
  @keyframes star-pop { from { transform: scale(.2) rotate(-40deg); opacity: 0; } }
  .js .hero-in { opacity: 0; animation: hero-in 1s var(--ease) forwards; animation-delay: calc(var(--d) * 110ms + 80ms); }
  .js .hero-title.is-split { opacity: 1; animation: none; }
  .js .hero-title.is-split .line-inner { transform: translateY(108%) skewY(7deg); animation: line-up 1.1s var(--ease) forwards; animation-delay: calc(var(--li) * 130ms + 150ms); }
  @keyframes line-up { to { transform: none; } }
  .js .h2.reveal.is-split { opacity: 1; transform: none; filter: none; }
  .js .h2.is-split .line-inner { transform: translateY(108%) skewY(7deg); transition: transform 1.05s var(--ease); transition-delay: calc(var(--li) * 110ms + var(--i, 0) * 60ms); }
  .js .h2.is-split.is-visible .line-inner { transform: none; }
  @keyframes hero-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

  .scene .layer-far { animation: pan 110s linear infinite; }
  .scene .layer-mid { animation: pan 60s linear infinite; }
  .scene .layer-near { animation: pan 18s linear infinite; }
  @keyframes pan { to { transform: translateX(-800px); } }
  .scene .road-dash { animation: dash .7s linear infinite; }
  @keyframes dash { to { stroke-dashoffset: 70; } }
  .wheel-spin { animation: spin .8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .pr-pulse { animation: pin-pulse 2s var(--ease) infinite; }
  /* Each route: the driver's dot heads out from Phoenix (light line), then the coach comes home (orange line). */
  .route-out, .route-in, .route-comet { animation-duration: 8s; animation-timing-function: linear; animation-iteration-count: infinite; animation-play-state: paused; animation-delay: calc(var(--r) * -.667s); }
  .route-out { animation-name: route-out; }
  .route-in { animation-name: route-in; }
  .route-comet { animation-name: route-comet; }
  @keyframes route-out { 0% { stroke-dashoffset: -1; opacity: .55; } 24% { stroke-dashoffset: 0; } 32% { opacity: .55; } 48%, 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes route-in { 0%, 32% { stroke-dashoffset: 1; opacity: 1; } 58% { stroke-dashoffset: 0; } 84% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes route-comet {
    0% { stroke-dashoffset: -1; stroke: #FFFFFF; opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    24% { stroke-dashoffset: .035; stroke: #FFFFFF; opacity: 1; }
    24.5%, 31.5% { stroke-dashoffset: .035; opacity: 0; stroke: #FF6A26; }
    32% { stroke-dashoffset: .035; stroke: #FF6A26; opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    58% { stroke-dashoffset: -1; stroke: #FF6A26; opacity: 1; }
    58.5%, 100% { stroke-dashoffset: -1; opacity: 0; }
  }
  .city-pulse { animation: city-pulse 8s ease-out infinite paused; animation-delay: calc(var(--r) * -.667s); }
  @keyframes city-pulse { 0%, 23% { transform: scale(.4); opacity: 0; } 24% { transform: scale(.4); opacity: .9; } 40%, 100% { transform: scale(2.8); opacity: 0; } }
  .hq-ring { animation: hq-ring 2.4s ease-out infinite paused; }
  .hq-ring-2 { animation-delay: 1.2s; }
  @keyframes hq-ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }
  .usmap.is-live .route path, .usmap.is-live .city-pulse, .usmap.is-live .hq-ring { animation-play-state: running; }
  @keyframes pin-pulse { from { transform: scale(.6); opacity: .6; } to { transform: scale(2.2); opacity: 0; } }
  .paper-stamps li { opacity: 0; transform: translateX(40px) skewX(-8deg); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--s) * 160ms + 300ms); }
  .paper-stamps b { transform: scale(0) rotate(-30deg); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--s) * 160ms + 700ms); }
  .tile-paper.is-visible .paper-stamps li { opacity: 1; transform: none; }
  .tile-paper.is-visible .paper-stamps b { transform: none; }
  .js .hv .hero-in { animation-duration: 1.2s; }
  .scene .coach-body { animation: bob .5s ease-in-out infinite alternate; }
  @keyframes bob { to { transform: translateY(-1.6px); } }
  .scene .sun-glow { animation: glow 6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
  @keyframes glow { to { opacity: .6; transform: scale(1.08); } }

  @supports (animation-timeline: view()) {
    .badge-rotor { animation: rotor linear both; animation-timeline: view(); }
    .site-footer { view-timeline-name: --footer; }
    .footer-mark { animation: mark-stretch linear both; animation-timeline: --footer; animation-range: entry 10% entry 100%; }
    @keyframes mark-stretch { from { font-stretch: 62%; letter-spacing: .02em; } to { font-stretch: var(--w-ext); letter-spacing: -0.03em; } }
    @keyframes rotor { from { transform: rotate(-70deg); } to { transform: rotate(110deg); } }
    /* Hero: pinned video; four headline frames pop in and out as you scroll. */
    .hv { height: 380vh; view-timeline-name: --hv; }
    .hv-sticky { position: sticky; top: 0; height: 100dvh; min-height: 0; }
    .hv-frame-2, .hv-frame-3 { display: block; }
    .hv-frame-4 { display: block; }
    .hv-video { animation: hv-zoom linear both; animation-timeline: --hv; animation-range: contain 0% contain 100%; }
    @keyframes hv-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
    .hv-shade { animation: hv-darken linear both; animation-timeline: --hv; animation-range: contain 0% contain 100%; }
    @keyframes hv-darken { to { background-color: rgb(8 16 18 / .35); } }
    .hv-frame-1 { animation: hv-first linear both; animation-timeline: --hv; animation-range: contain 0% contain 24%; }
    .hv-frame-2 .hv-line { animation: hv-pop linear both; animation-timeline: --hv; animation-range: contain calc(20% + var(--li) * 2.5%) contain calc(48% + var(--li) * 2.5%); }
    .hv-frame-3 .hv-line { animation: hv-pop linear both; animation-timeline: --hv; animation-range: contain calc(44% + var(--li) * 2.5%) contain calc(72% + var(--li) * 2.5%); }
    .hv-frame-4 .hv-line, .hv-frame-4 .hv-cta { animation: hv-last linear both; animation-timeline: --hv; animation-range: contain calc(68% + var(--li, 2) * 2.5%) contain calc(84% + var(--li, 2) * 2.5%); }
    @keyframes hv-first { 0%, 55% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0; transform: translateY(-90px) scale(1.04); filter: blur(10px); } }
    @keyframes hv-pop {
      0% { opacity: 0; transform: translateY(110px) skewY(6deg) scale(.94); filter: blur(14px); }
      28%, 70% { opacity: 1; transform: none; filter: none; }
      100% { opacity: 0; transform: translateY(-90px) scale(1.05); filter: blur(10px); }
    }
    @keyframes hv-last { from { opacity: 0; transform: translateY(110px) skewY(6deg) scale(.94); filter: blur(14px); } to { opacity: 1; transform: none; filter: none; } }
    .hv-frame-4 { pointer-events: none; }
    .hv-frame-4 .hv-cta { pointer-events: auto; }
    .hv-progress { display: grid; }
    .hv-progress span::after { animation: hv-tick linear both; animation-timeline: --hv; }
    .hv-progress span:nth-child(1)::after { animation-range: contain 0% contain 24%; }
    .hv-progress span:nth-child(2)::after { animation-range: contain 24% contain 48%; }
    .hv-progress span:nth-child(3)::after { animation-range: contain 48% contain 72%; }
    .hv-progress span:nth-child(4)::after { animation-range: contain 72% contain 96%; }
    @keyframes hv-tick { to { transform: scaleY(1); } }

    /* Closing banner: the coach drives into the desert scene as it scrolls into view. */
    .about-scene { view-timeline-name: --scene; }
    .coach-scroll { animation: coach-in linear both; animation-timeline: --scene; animation-range: entry 10% cover 50%; }
    @keyframes coach-in { from { transform: translateX(-760px); } to { transform: none; } }

    /* Why us: footage zooms, the route draws, the 30+ stretches, the ghost word slides. */
    .tile-pickup .tile-media, .tile-safe .tile-media { animation: media-zoom linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes media-zoom { from { transform: scale(1.25); } to { transform: scale(1.02); } }
    .tile-pickup .pr-line, .tile-pickup .pr-glow { transition: none; animation: route-draw linear both; animation-timeline: view(); animation-range: entry 30% cover 60%; }
    @keyframes route-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    .tile-cash .big-num { animation: num-stretch linear both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
    @keyframes num-stretch { from { font-stretch: 62%; } to { font-stretch: var(--w-ext); } }
    .tile-ghost { animation: ghost-slide linear both; animation-timeline: view(); }
    @keyframes ghost-slide { from { transform: translateX(30%); } to { transform: translateX(-20%); } }

    /* Dot grid drifts slower than the page for depth. */
    .bg-grid { animation: grid-drift linear both; animation-timeline: scroll(root); }
    @keyframes grid-drift { to { transform: translateY(-35%); } }

    /* Statement pins and fills word by word. */
    .statement { height: 260vh; padding: 0; view-timeline-name: --stmt; }
    .statement-sticky { position: sticky; top: 0; min-height: 100dvh; display: grid; align-items: center; padding-top: var(--header-h); }
    .statement .word { color: color-mix(in oklab, var(--ink) 13%, transparent); animation: word-fill linear both; animation-timeline: --stmt; animation-range: contain calc(var(--w) / var(--n) * 78%) contain calc((var(--w) + 1) / var(--n) * 78%); }
    .statement .word-accent { animation-name: word-fill-accent; }
    @keyframes word-fill { to { color: var(--ink); } }
    @keyframes word-fill-accent { to { color: var(--accent); } }

    /* Bento tiles rise and settle as they enter. */
    .bento .tile { animation: tile-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; filter: none; }
    .go-card.reveal { filter: none; }
    .bento .tile:nth-child(even) { --tilt: 2deg; }
    @keyframes tile-rise { from { transform: translateY(120px) scale(.88) rotate(var(--tilt, -2.5deg)); opacity: 0; clip-path: inset(18% 0 0 0 round var(--radius)); } to { transform: none; opacity: 1; clip-path: inset(0 0 0 0 round var(--radius)); } }

    /* Closing banner grows to full size. */
    .go-card { animation: go-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes go-grow { from { transform: scale(.86); opacity: .4; } to { transform: none; opacity: 1; } }
  }
}

@media print {
  body > *:not(main), main > *:not(#ready), .ready-actions, .bg-fx, .grain { display: none !important; }
  .ready-layout { grid-template-columns: 1fr; }
  .ready-panel { position: static; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marquee-track { animation: none; }
  .paper-stamps li { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .tile-pickup { grid-column: 1 / -1; grid-row: auto; min-height: 520px; }
  .tile-paper, .tile-cash { grid-column: span 6; grid-row: auto; }
  .tile-person { grid-column: span 5; }
  .tile-safe { grid-column: span 7; }
  .proof-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-row li:nth-child(3) { border-left: 0; padding-left: 0; }
  .proof-row li { padding-bottom: 20px; }
}

@media (max-width: 900px) {
  .offer-grid, .how-grid, .faq-grid, .about-grid, .contact-grid, .go-card { grid-template-columns: minmax(0, 1fr); }
  .offer-aside, .how-intro, .faq-side { position: static; }
  .how-intro { margin-bottom: 24px; }
  .go-scene { max-width: 560px; }
}

@media (max-width: 767px) {
  body { font-size: 16px; }
  .eyebrow { letter-spacing: .1em; font-size: 11px; gap: 10px; }
  .eyebrow::before { width: 18px; }
  .easy-grid, .ready-grid { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile-pickup, .tile-paper, .tile-person, .tile-safe, .tile-cash { grid-column: auto; grid-row: auto; }
  .tile-pickup { min-height: 480px; }
  .tile-safe { min-height: 440px; }
  .hv-stage { padding-block: 120px 96px; }
  .hv-progress { display: none !important; }
  .hv-shade { background: linear-gradient(180deg, rgb(8 16 18 / .35) 0%, rgb(8 16 18 / 0) 26%, rgb(8 16 18 / 0) 46%, rgb(8 16 18 / .82) 100%); }
  .ready-layout { grid-template-columns: minmax(0, 1fr); }
  .ready-panel { position: static; }
  .ready-meter svg { width: 108px; height: 108px; }
  .faq-tools { justify-items: stretch; width: 100%; }
  .faq-search { width: 100%; }
  .faq-list { grid-template-columns: minmax(0, 1fr); }
  /* Phones: narrower cards on a tighter, steeper drum so the side cards visibly wrap around */
  .rv-stage { --cw: min(66vw, 280px); --ch: 470px; --rv-gap: 14px; --rv-step: 52; padding-block: 36px 60px; }
  .rv-stage.is-3d { perspective: 720px; perspective-origin: 50% 45%; }
  .rv-card { padding: 22px 20px 22px; border-radius: 24px; }
  .rv-card blockquote { font-size: 1.08rem; padding-block: 18px; }
  .rv-card .gold-stars .icon { width: 18px; height: 18px; }
  .rv-g { width: 34px; height: 34px; }
  .rv-card .avatar { width: 42px; height: 42px; border-radius: 13px; font-size: 13px; }
  .rv-who { gap: 11px; }
  .rv-who strong { font-size: 14.5px; }
  .rv-band-track > div { font-size: 5.2rem; }
  .rv-btn { width: 52px; height: 52px; }
  .field-row, .field-row.three { grid-template-columns: minmax(0, 1fr); }
  .proof-row { grid-template-columns: minmax(0, 1fr); }
  .proof-row li, .proof-row li + li { border-left: 0; padding-left: 0; padding-right: 0; padding-top: 20px; padding-bottom: 0; }
  .how-steps { padding-left: 68px; }
  .road-track { left: 18px; }
  .road-marker { width: 42px; height: 42px; }
  .reviews-head { align-items: stretch; flex-direction: column; }
  .google-badge { flex-wrap: wrap; }
  .google-badge .btn { flex: 1 1 100%; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-call { justify-items: start; text-align: left; }
  .footer-base { flex-direction: column; }
  .hero-ctas .btn, .go-ctas .btn { width: 100%; }
  .step-actions .btn-ghost { flex: none; }
  .thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* FAQ: show the first six, reveal the rest on demand */
.faq-list.is-collapsed .qa:nth-of-type(n + 7) { display: none; }
.faq-more { margin-top: 20px; }

/* About: stack copy and map; the scene becomes a short strip at the bottom with a small coach */
@media (max-width: 1024px) {
  .about-stage { min-height: 0; display: flex; flex-direction: column; padding: 22px 18px 0; background: linear-gradient(180deg, var(--sky-1), var(--sky-2) 55%, var(--sky-3)); }
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-scene { position: relative; inset: auto; order: 2; aspect-ratio: 800 / 300; margin: 22px -18px 0; }
  .stats dd { font-size: 1.9rem; }
}

/* Touch devices: drop the costly full-screen effects so the hero video stays smooth */
@media (hover: none), (max-width: 767px) {
  .grain { display: none; }
  .orb { animation: none !important; }
  .hv-video, .hv-shade { animation: none !important; }
  .hv-frame-1, .hv-line, .hv-cta, .hv-frame-4 { filter: none !important; }
  .header-inner, .site-header.is-scrolled .header-inner { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in oklab, var(--surface) 96%, transparent); }
  .reveal { filter: none !important; }
  .hero-title, .hv-big { text-shadow: 0 2px 16px rgb(0 0 0 / .35); }
  .hero-title em, .hv-big em { text-shadow: 0 2px 16px rgb(0 0 0 / .35); }
}

/* Mobile menu: the coach drives along the lane while the menu is open */
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu.is-open .mm-coach { animation: mm-drive 5.5s linear infinite; }
  @keyframes mm-drive { from { transform: translateX(-170px); } to { transform: translateX(calc(100vw + 10px)); } }
  .mobile-menu.is-open .mm-lane { animation: mm-lane .45s linear infinite; }
  @keyframes mm-lane { to { background-position: -32px 0; } }
}

/* About on phones: headline, then the live map, then the numbers, then the story; the desert strip closes it out. */
@media (max-width: 767px) {
  .about-stage { padding: 28px 16px 0; border-radius: 28px; }
  .about-grid { gap: 0; }
  .about-copy { display: contents; }
  .about-copy .h2 { order: 1; font-size: clamp(2.5rem, 12.5vw, 3.3rem); }
  .about-map { order: 2; margin: 22px -8px 0; padding: 14px 10px 12px; border-radius: 22px; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(10 22 25 / .95); }
  .about-map-head { flex-direction: column; gap: 3px; padding: 2px 6px 6px; }
  .map-legend { gap: 6px 16px; font-size: 10px; }
  .route-track { stroke-width: 2.6; stroke-dasharray: 4 10; }
  .route-out { stroke-width: 3.6; }
  .route-in { stroke-width: 6; }
  .route-comet { stroke-width: 13; }
  .city-dot { r: 9px; }
  .hq-dot { r: 17px; stroke-width: 6; }
  .hq-label { font-size: 30px; stroke-width: 9px; }
  .stats { order: 3; gap: 8px; margin-top: 12px; }
  .stats div { padding: 12px 10px; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(255 255 255 / .66); }
  .stats dd { font-size: 1.75rem; }
  .stats dt { font-size: 9px; letter-spacing: .08em; }
  .about-copy .lead { order: 4; margin-top: 24px; font-size: 1.05rem; }
  .about-copy > p:not(.lead):not(.hours) { order: 5; font-size: .95rem; }
  .hours { order: 6; justify-self: start; }
  .about-scene { aspect-ratio: 800 / 270; margin: 20px -16px 0; }
}

/* Contact on phones: keep the number on one line and the info chips side by side */
@media (max-width: 480px) {
  .call-tile { gap: 14px; padding: 14px 16px 14px 14px; }
  .call-ring { width: 50px; height: 50px; }
  .call-copy strong { font-size: clamp(1.3rem, 6.6vw, 1.6rem); font-stretch: 100%; }
  .call-arrow { display: none; }
  .contact-chips { gap: 8px; }
  .contact-chips li { padding: 9px 12px; font-size: 13px; gap: 6px; }
  .contact-chips .icon { width: 16px; height: 16px; }
  .cf-send { width: 100%; }
  .topic-opts { gap: 6px; }
  .topic-opts span { padding: 10px 8px; font-size: 13.5px; }
  .topic-opts input:checked + span::before { margin-right: 6px; }
}


/* Under the hero on phones: one "promise" card. A spinning seal, four numbered promises that check off in turn, and the next step. */
@media (max-width: 767px) {
  .proof { padding-top: 22px; }
  .promise {
    position: relative; padding: 22px 18px 18px; border-radius: 28px; overflow: hidden;
    background: linear-gradient(180deg, var(--surface), color-mix(in oklab, var(--accent-soft) 35%, var(--surface)));
    border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(16 38 43 / .05), 0 30px 60px -36px rgb(16 38 43 / .4);
  }
  .promise::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgb(16 38 43 / .1) 1.2px, transparent 1.6px) 0 0 / 12px 12px; -webkit-mask: linear-gradient(180deg, #000, transparent 40%); mask: linear-gradient(180deg, #000, transparent 40%); pointer-events: none; }
  .promise-head { position: relative; display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 2px dashed var(--line-2); }
  .promise-seal { position: relative; width: 88px; height: 88px; flex: none; }
  .seal-text { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .seal-text text { font-family: var(--font-mono); font-size: 9.6px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; fill: var(--accent); }
  .seal-mark { position: absolute; inset: 24px; width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 8px 18px -6px rgb(232 87 31 / .6); }
  .promise-kicker { margin: 0 0 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
  .promise-title { margin: 0; font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-cond); font-size: clamp(1.5rem, 7.4vw, 1.85rem); line-height: .95; text-transform: uppercase; letter-spacing: -0.01em; }
  .promise-title em { font-style: italic; color: var(--accent); }

  .promise-list { position: relative; display: block; border-top: 0; counter-reset: none; }
  .promise-list li, .promise-list li + li, .promise-list li:nth-child(n) { display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; align-items: center; gap: 12px; padding: 15px 4px; border-left: 0; border-bottom: 1px solid var(--line); border-radius: 14px; }
  .promise-list li:last-child { border-bottom: 0; }
  .promise-list .icon { display: none; }
  .pr-n { display: block; font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-ext); font-size: 1.3rem; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.3px var(--accent); }
  .promise-list strong { font-size: 15.5px; line-height: 1.15; }
  .promise-list div > span { font-size: 13.5px; margin-top: 3px; }
  .pr-check { display: block; width: 30px; height: 30px; }
  .pr-check svg { width: 100%; height: 100%; overflow: visible; }
  .pr-check circle { fill: none; stroke: var(--line-2); stroke-width: 2; }
  .pr-check path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .promise-list .is-visible .pr-check circle, .no-js .pr-check circle { fill: var(--accent-hot); stroke: var(--accent-hot); }

  .promise-foot { position: relative; display: grid; gap: 12px; justify-items: center; margin-top: 8px; padding-top: 18px; border-top: 2px dashed var(--line-2); }
  .promise-foot .btn { width: 100%; }
  .promise-call { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; }
  .promise-call .icon { width: 18px; height: 18px; color: var(--accent); }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .seal-text { animation: seal-spin 22s linear infinite; }
  @keyframes seal-spin { to { transform: rotate(360deg); } }
  .js .pr-check circle { fill: transparent; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s var(--ease), fill .35s, stroke .35s; transition-delay: calc(var(--i) * 280ms + 250ms); }
  .js .pr-check path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .4s var(--ease); transition-delay: calc(var(--i) * 280ms + 650ms); }
  .js .promise-list .is-visible .pr-check circle { stroke-dashoffset: 0; }
  .js .promise-list .is-visible .pr-check path { stroke-dashoffset: 0; }
  .js .promise-list .is-visible { animation: promise-flash 1s ease-out both; animation-delay: calc(var(--i) * 280ms + 550ms); }
  @keyframes promise-flash { 0% { background: transparent; } 30% { background: color-mix(in oklab, var(--accent-soft) 80%, transparent); } 100% { background: transparent; } }
}

/* What we buy: hero chips, the card beside the offer form, and the RV type picker on both forms */
.hero-elig { margin-top: 26px; }
.elig-label { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.elig-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-hot); box-shadow: 0 0 0 4px rgb(255 106 38 / .25), 0 0 14px rgb(255 106 38 / .9); }
.elig-row { display: flex; flex-wrap: wrap; gap: 10px; }
.elig { display: inline-flex; align-items: center; gap: 12px; padding: 9px 18px 9px 10px; border-radius: 16px; background: rgb(8 16 18 / .55); border: 1px solid rgb(255 255 255 / .18); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .1); }
.elig b { display: inline-flex; align-items: baseline; padding: 6px 10px; border-radius: 11px; background: #fff; color: var(--ink); font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-wide); font-size: 1.25rem; line-height: 1; letter-spacing: -0.03em; }
.elig b i { font-style: normal; color: var(--accent); }
.elig > span { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; }
.elig-hot b { background: var(--accent-hot); color: #fff; box-shadow: 0 0 22px rgb(255 106 38 / .6); }
.elig-hot b i { color: #FFE1CC; }

.buy-rules { margin: 26px 0 6px; padding: 18px; border-radius: 22px; background: var(--deep); color: var(--deep-ink); box-shadow: 0 30px 60px -36px rgb(16 38 43 / .6); }
.buy-rules-head { margin: 0 0 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-on-dark); }
.buy-rules ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.buy-rules li { display: flex; align-items: center; gap: 14px; }
.buy-rules li + li { padding-top: 10px; border-top: 1px dashed rgb(255 255 255 / .16); }
.buy-rules b { flex: none; min-width: 86px; text-align: center; padding: 8px 10px; border-radius: 12px; background: rgb(255 255 255 / .08); font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-wide); font-size: 1.45rem; line-height: 1; letter-spacing: -0.03em; }
.buy-rules b i { font-style: normal; color: var(--accent-hot); }
.buy-rules li span { font-size: 14px; color: var(--deep-ink-2); }
.buy-rules li strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 15px; text-transform: uppercase; color: var(--deep-ink); }

.rv-type { margin: 0; padding: 0; border: 0; min-width: 0; }
.rv-type legend { padding: 0; margin-bottom: 10px; }
.type-opts { flex-wrap: wrap; }
.rv-type-hint { margin: 2px 0 0; }
@media (max-width: 767px) {
  .hero-elig { margin-top: 20px; }
  .elig-row { gap: 8px; }
  .elig { gap: 9px; padding: 7px 12px 7px 7px; border-radius: 14px; }
  .elig b { font-size: 1.05rem; padding: 6px 8px; }
  .elig > span { font-size: 12.5px; }
  .type-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-ymm { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- City pages, the /sell-my-rv/ hub and the homepage "Areas we serve" block ---------- */
/* Short hero: same video and type as the homepage, without the pinned scroll sequence */
.hv.hv-static { height: auto; }
.hv-static .hv-sticky { position: relative; height: auto; min-height: min(92svh, 860px); }
.hv-static .hv-frame-1, .hv-static .hv-video, .hv-static .hv-shade { animation: none; }
.crumbs { padding-block: 18px 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink); }

.city-facts { padding-block: 22px 0; }
.city-facts dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.city-facts div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.city-facts dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.city-facts dd { margin: 0; font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-wide); font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.city-facts dd small { margin-left: 4px; font-size: .45em; letter-spacing: .04em; color: var(--accent); }
.city-facts .dd-text { font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-stretch: 100%; letter-spacing: -0.01em; line-height: 1.2; }

.city-guide-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.city-guide-copy .lead { color: var(--ink); }
.city-guide-copy > p:not(.lead):not(.eyebrow) { margin-top: 14px; color: var(--ink-2); max-width: 58ch; }
.city-map { align-self: start; }
.city-route { fill: none; stroke: var(--accent-hot); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.city-pulse.is-on { opacity: .35; }
.city-label { font-family: var(--font-mono); font-size: 17px; font-weight: 500; letter-spacing: .14em; fill: #fff; paint-order: stroke; stroke: rgb(10 22 25 / .9); stroke-width: 6px; }
.city-map-foot { margin: 8px 6px 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgb(243 244 241 / .72); }
.city-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(32px, 4vw, 52px); }
.city-card { padding: 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.city-card > .icon { width: 44px; height: 44px; padding: 11px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.city-card h3 { margin: 14px 0 8px; font-size: 1.15rem; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.city-card p { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.city-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.city-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--bg-2); font-size: 14px; font-weight: 600; }
.model-chips b { padding: 2px 7px; border-radius: 7px; background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
.city-faq .faq-list { margin-top: clamp(28px, 4vw, 44px); }
.city-more.section { padding-block: clamp(56px, 7vw, 96px); background: var(--bg-2); }
.city-more-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); }
.city-more-h { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.005em; }
.near-list { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.near-list a, .hub-region a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; transition: border-color .2s, transform .3s var(--ease), color .2s; }
.near-list a:hover, .hub-region a:hover { border-color: var(--accent); color: var(--accent); transform: translateX(3px); }
.near-list small, .hub-region small { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-3); font-weight: 400; white-space: nowrap; }

/* Hub */
.hub-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.hub-map { position: sticky; top: 100px; }
.hub-regions, .areas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; margin-top: 28px; }
.hub-region h3 { margin-bottom: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.hub-region ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hub-dot { fill: #F3F4F1; stroke: var(--accent-hot); stroke-width: 4; cursor: pointer; transition: r .2s; }
.usmap a:hover .hub-dot, .usmap a:focus-visible .hub-dot { r: 12px; fill: var(--accent-hot); }
.hub-models.section { background: var(--bg-2); }
.model-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: clamp(28px, 4vw, 48px); }
.model-group { padding: 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.model-group h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; font-size: 1.15rem; font-weight: 900; text-transform: uppercase; }
.model-group h3 span { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; color: var(--accent); }
.model-group ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.model-group li { display: flex; gap: 14px; padding: 10px 0; border-top: 1px dashed var(--line); }
.model-group li b { flex: none; width: 30px; font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-wide); font-size: 15px; color: var(--accent); }
.model-group li strong { display: block; font-weight: 700; }
.model-group li span { font-size: 14px; color: var(--ink-2); }

/* Homepage areas */
.areas.section { padding-block: clamp(8px, 2vw, 24px) clamp(64px, 8vw, 104px); } /* follows the contact section, which already brings its own bottom space */
.areas-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.areas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.areas-grid .hub-region a { padding: 10px 14px; font-size: 15px; }

@media (max-width: 1024px) {
  .city-guide-grid, .hub-grid { grid-template-columns: minmax(0, 1fr); }
  .hub-map { position: relative; top: 0; }
  .areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .city-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .city-facts div { padding: 14px; border-radius: 16px; }
  .city-cards, .city-more-grid, .model-groups { grid-template-columns: minmax(0, 1fr); }
  .hub-regions { grid-template-columns: minmax(0, 1fr); }
  .areas-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .city-map { margin-inline: -8px; padding: 14px 10px 12px; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(10 22 25 / .95); }
  .city-route { stroke-width: 8; }
  .city-label { font-size: 30px; stroke-width: 9px; }
  .hub-dot { r: 12px; stroke-width: 6; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .city-route { stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease) .3s; }
  .js .city-map.is-visible .city-route { stroke-dashoffset: 0; }
  .city-map .hq-ring, .hub-map .hq-ring { animation-play-state: running; }
}
.city-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 56px); margin-top: clamp(32px, 4vw, 52px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }
.city-notes h3 { margin-bottom: 10px; font-size: 1.2rem; font-weight: 900; text-transform: uppercase; }
.city-notes p { color: var(--ink-2); line-height: 1.65; max-width: 62ch; }
@media (max-width: 767px) { .city-notes { grid-template-columns: minmax(0, 1fr); } }