/*
Client: Redline Carts
Industry / category: Authorized ICON EV / EPIC / Honor LSV / STAR EV golf-cart & LSV dealer; service, lithium conversions, rentals. Two West Valley lots.
Brand personality (from THEIR voice — site + reviews, not ours): family, local, low-pressure, useful.
Primary persona: Sun City West / West Valley resident (often 55+) who wants a street-legal cart for the community, errands, golf. Fear: getting hustled, waiting months, a battery that dies in Arizona heat. Desire: see the actual cart and its windshield price, then ask about that cart.
Secondary persona: Goodyear / Estrella family buying leisure/golf; snowbird with a tired lead-acid pack.
Customer journey: see the carts → open that cart’s page (price, showroom, factory specs) → quote on that page or call the showroom in the util bar. Service/lithium are the keep-them loop.
Primary conversion: Quote form on the cart page, emailed to sales@redlinecarts.com. The cart is named in the message.
Secondary conversion: Call the closer showroom (623-259-9590 Goodyear · 480-636-1991 Sun City West). Financing = Sheffield. Service number 602-206-9042 is quieter.
Metaphor / design concept: THE SHOWROOM FLOOR — a priced dealer board, not a manufacturer lifestyle lookbook and not a pair of address tickets.
Layout DNA: asphalt chrome + bone field. First screen is the lineup photograph. The next thing is the priced board. Every listed cart has its own page. Proof is named Google reviews with the stars written out. Brands are full-bleed cart photos. No 3 equal icon cards. No 01-02-03 process.
Opening module: Full-bleed lineup photo. On desktop the quote card sits in the sky, top left, and stays off the carts. On a phone the photo stacks first, then the headline and the two buttons. #hero-ctas { display: block } is an older rule; the floor override is #hero-ctas.floor. Showroom phones stay in the util bar, not the hero.
Proof strategy: Windshield prices on real showroom carts. Google reviews Redline already publishes (Hans, Darrell, Mark, Darrin, William, Rhonda) with five stars and the name. No Kim James. FOX 10, Estrella, BBB A+ stay on About.
Type direction + logo-match rationale: REDLINE is a WIDE geometric bar-letter wordmark (stacked horizontals), not condensed. Unbounded for display (wide, sharp, contemporary geometric). Source Sans 3 for body/UI. Do not use Oswald/Bebas/Inter. Do not invert the lockup — red speed stripes must stay #DD152E.
Palette (sampled from mark): redline #DD152E, ink #111114, asphalt #161618, lot bone #F2EEE6, steel #6F6B66. Not ICON orange. Not AAR navy. Not CM BEEZ yellow/teal.
One signature move: a 3px redline that splits the two lots and underlines the wordmark — the tachometer of the brand, used as architecture not decoration.
Deliberate non-goals: the quote card never covers the carts; no sticky CTA while the hero buttons or the quote form are on screen; Facebook only, no invented Instagram; no expired Black Friday spin-to-win as a current offer; no 64-review aggregator claims; no cloning ICON Golf Cars national ads (same vehicles, different business).
Swap-test: CM BEEZ honey-drip or AAR navy/red roof on this layout would look wrong — this is a priced two-lot dealer board.
*/

:root {
  --red: #dd152e;
  --red-deep: #b10f24;
  --ink: #111114;
  --asphalt: #161618;
  --lot: #f2eee6;
  --paper: #faf8f4;
  --steel: #6f6b66;
  --line: #d8d2c6;
  --white: #fff;
  --shadow: 0 18px 40px rgba(17, 17, 20, 0.12);
  --max: 1180px;
  --gutter: clamp(1rem, 3vw, 2rem);
  --redline: 3px solid var(--red);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: "Source Sans 3", system-ui, sans-serif;
  color: var(--ink);
  background: var(--asphalt);
  line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4 {
  font-family: Unbounded, "Source Sans 3", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 0.5em;
}
p { margin: 0 0 1em; }
.skip {
  position: absolute;
  left: -999px;
  top: 0;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 80;
  background: var(--red);
  color: #fff;
  padding: 0.5rem 0.8rem;
}

/* ——— chrome ——— */
.brand-bar { height: 10px; background: var(--red); }
.util {
  background: var(--asphalt);
  color: #cfc9c0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.util-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.45rem var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.util a { color: #fff; text-decoration: none; }
.util a:hover { color: var(--red); }
.util .hide-sm { display: none; }
@media (min-width: 820px) {
  .util .hide-sm { display: inline; }
}

.site-header {
  background: var(--asphalt);
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid #2a2a2e;
}
.site-header.is-stuck { box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.7rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.logo img {
  width: clamp(132px, 28vw, 168px);
  height: auto;
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid #3a3a40;
  color: #fff;
  padding: 0.45rem 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  cursor: pointer;
  min-height: 44px;
}
.nav-toggle:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.nav {
  display: none;
}
.nav a {
  text-decoration: none;
  color: #ece8e1;
  font-size: 0.92rem;
  font-weight: 600;
}
.nav a:hover, .nav a.is-on { color: #fff; }
.nav a.is-on { box-shadow: inset 0 -2px 0 var(--red); }
.nav-item { position: relative; }
.nav-sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #0d0d0f;
  border-top: var(--redline);
  padding: 0.55rem 0;
  z-index: 50;
}
.nav-sub a {
  display: block;
  padding: 0.4rem 0.9rem;
  white-space: nowrap;
  font-size: 0.88rem;
}
.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub { display: block; }
.nav .cta {
  background: var(--red);
  color: #fff !important;
  padding: 0.55rem 0.9rem;
  display: inline-block;
}
.nav .cta:hover { background: var(--red-deep); }

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem var(--gutter) 1.4rem;
  background: #0d0d0f;
  border-top: var(--redline);
}
.nav-mobile.is-open { display: flex; }
.nav-mobile a { color: #fff; text-decoration: none; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.nav-mobile a.is-sub { color: #cfc9c0; font-weight: 600; padding-left: 0.85rem; font-size: 0.95rem; }
@media (min-width: 980px) {
  .nav-toggle { display: none; }
  .nav {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .nav-mobile,
  .nav-mobile.is-open {
    display: none !important;
  }
}
@media (min-width: 1180px) {
  .nav { gap: 1.15rem; }
}

/* ——— buttons ——— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-decoration: none;
  padding: 0.85rem 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 0;
  cursor: pointer;
  line-height: 1.2;
}
a.btn, a.btn:visited { text-decoration: none; }
.btn--red { background: var(--red); color: #fff !important; }
.btn--red:hover { background: var(--red-deep); }
.btn--ghost {
  background: transparent;
  color: #fff !important;
  border: 1px solid #fff;
}
.btn--ghost:hover { background: #fff; color: var(--ink) !important; }
.btn--ink {
  background: var(--ink);
  color: #fff !important;
}
.btn--ink:hover { background: #000; }
.btn--ghost-ink {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink) !important;
}
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.kicker {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 0.55rem;
}
.kicker--light { color: #f3b3bb; }

/* film first — product is the opening, type sits UNDER the carts */
.film { background: #000; margin: 0; }
.film img {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
}
@media (min-width: 760px) {
  .film img {
    height: min(72vh, 760px);
    object-fit: cover;
    object-position: center 62%;
  }
}

/* ——— opening: two lots ——— */
.lots-open {
  background: var(--lot);
  color: var(--ink);
  padding: clamp(1.4rem, 3.5vw, 2.4rem) 0 0;
}
.lots-open h1 {
  font-size: clamp(2rem, 5.4vw, 3.7rem);
  max-width: 16ch;
}
.lede {
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  color: #3b3834;
  max-width: 46ch;
}
.lot-grid {
  display: grid;
  gap: 0;
  margin-top: 1.6rem;
  border-top: var(--redline);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .lot-grid {
    grid-template-columns: 1fr 3px 1fr;
  }
}
.lot-rule {
  background: var(--red);
  min-height: 3px;
}
.lot-ticket {
  padding: 1.4rem 0 1.7rem;
}
@media (min-width: 860px) {
  .lot-ticket--gy { padding-right: 1.6rem; }
  .lot-ticket--scw { padding-left: 1.6rem; }
}
.lot-ticket h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  margin-bottom: 0.2rem;
}
.lot-meta { color: var(--steel); margin: 0 0 0.9rem; font-size: 0.98rem; }
.lot-phone {
  font-family: Unbounded, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 0.85rem;
  letter-spacing: -0.03em;
}
.lot-phone:hover { color: var(--red); }
.lot-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

#hero-ctas { display: block; }

/* ——— catalog board ——— */
.board {
  background: var(--paper);
  padding: clamp(2rem, 5vw, 3.4rem) 0;
}
.board-head {
  display: block;
  margin-bottom: 1.6rem;
}
.board-head h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.65rem);
  line-height: 1.08;
  max-width: 20em;
  margin-bottom: 0.4em;
}
.board-head .lede { max-width: 62ch; }
@media (min-width: 860px) {
  .board-head > div {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.7fr);
    column-gap: 2.5rem;
    align-items: start;
  }
  .board-head .kicker,
  .board-head h2 { grid-column: 1 / -1; }
  .board-head .lede,
  .board-head > div > p:last-child {
    max-width: none;
    margin-bottom: 0;
  }
}
.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
}
.card > a,
.oos-open {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.card--stock img {
  object-fit: cover;
  object-position: center 42%;
}
.card-go {
  margin: 0.55rem 0 0;
  color: var(--red);
  font-weight: 700;
  font-size: 0.92rem;
}
.card-meta {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  color: var(--steel);
}
.inv-jump {
  display: flex;
  gap: 0.4rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 1rem 0 1.1rem;
  padding-bottom: 0.15rem;
}
.inv-jump::-webkit-scrollbar { display: none; }
.inv-jump a {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  padding: 0.7rem 0.85rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  background: #fff;
  white-space: nowrap;
}
.inv-jump a:hover { border-color: var(--ink); }
@media (min-width: 980px) {
  .inv-jump { flex-wrap: wrap; overflow: visible; }
}
.sort-bar {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-weight: 600;
  width: 100%;
  max-width: 22rem;
}
.sort-bar select {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 16px;
}
.inv-tools {
  background: var(--lot);
  border-bottom: 1px solid var(--line);
  padding: 0.55rem 0 0.7rem;
  position: sticky;
  top: 3.85rem;
  z-index: 28;
}
.inv-tools .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: end;
}
.inv-empty {
  margin: 0.4rem 0 0;
}
@media (min-width: 980px) {
  .inv-tools {
    position: static;
    background: var(--paper);
    border-bottom: 0;
    padding-top: 1.1rem;
  }
}
.inv-h3 {
  font-size: 1.12rem;
  margin: 2rem 0 0.75rem;
}
#lot, #specials, #order, #goodyear, #scw, #lithium,
#order-golf, #order-leisure, #order-utility, #order-eco, #order-gas,
.inv-h3 {
  scroll-margin-top: 10.5rem;
}
@media (min-width: 980px) {
  #lot, #specials, #order, #goodyear, #scw, #lithium,
  #order-golf, #order-leisure, #order-utility, #order-eco, #order-gas,
  .inv-h3 {
    scroll-margin-top: 6rem;
  }
}
.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 48%;
  background: #ece8e0;
}
.card-body { padding: 0.85rem 0.9rem 1rem; }
.chip {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 0.3rem;
}
.card h3 {
  font-size: 1.02rem;
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
}
.price {
  font-family: Unbounded, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
}
.price small { font-family: "Source Sans 3", sans-serif; font-weight: 600; color: var(--steel); font-size: 0.82rem; white-space: nowrap; }

/* ——— photo plate (caption UNDER — never overlay the cart) ——— */
.plate {
  background: var(--asphalt);
  color: #fff;
}
.plate img {
  width: 100%;
  max-height: min(78vh, 820px);
  object-fit: cover;
  object-position: center 62%;
}
.plate figcaption {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.1rem var(--gutter) 1.5rem;
  color: #cfc9c0;
  font-size: 0.95rem;
}
.plate strong { color: #fff; }

.reel {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.75rem var(--gutter) 1.15rem;
  background: #111;
  -webkit-overflow-scrolling: touch;
}
.reel figure {
  flex: 0 0 min(82vw, 560px);
  margin: 0;
  scroll-snap-align: start;
  background: #1a1a1a;
}
.reel figure {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.reel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
.dealer-info {
  max-width: 40rem;
  border: 1px solid var(--line);
  background: #fff;
  padding-bottom: 0.4rem;
}
.dealer-logo {
  background: #000;
  padding: 1.1rem 1.2rem;
}
.dealer-logo img {
  width: min(280px, 70%);
  height: auto;
  display: block;
}
.dealer-info h2,
.dealer-info p { margin-left: 1.2rem; margin-right: 1.2rem; }
.dealer-info h2 { margin-top: 1.1rem; }
.dealer-stores {
  display: grid;
  gap: 0.8rem;
}
@media (min-width: 640px) {
  .dealer-stores { grid-template-columns: 1fr 1fr; }
}
.oos {
  border: 0;
  padding: 1.4rem 1.5rem 1.2rem;
  background: var(--paper);
  color: var(--ink);
  max-width: 22rem;
}
.oos::backdrop { background: rgba(0, 0, 0, 0.55); }
.oos p {
  font-family: Unbounded, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  margin: 0 0 1rem;
}

/* ——— chapters ——— */
.chapter {
  padding: clamp(2.2rem, 6vw, 4.2rem) 0;
}
.chapter--lot { background: var(--lot); }
.chapter--paper { background: var(--paper); }
.chapter--ink { background: var(--ink); color: #fff; }
.chapter--ink .lede, .chapter--ink p { color: #d4cfc6; }
.split {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 0.95fr; gap: 2.4rem; }
  .split--flip { grid-template-columns: 0.95fr 1.05fr; }
  .split--flip .copy { order: -1; }
}
.split img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}
.split .copy { align-self: start; }

.roster {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 1.2rem;
}
@media (min-width: 760px) {
  .roster { grid-template-columns: 1fr 1fr; }
}
.roster a, .roster article {
  background: var(--paper);
  padding: 0;
  text-decoration: none;
  color: inherit;
  display: block;
}
.roster a:hover { background: #fff; }
.roster img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center 45%;
  background: #111;
  display: block;
}
.roster a div, .roster article div { padding: 1rem 1.15rem 1.2rem; }
.roster h3 { font-size: 1.2rem; margin-bottom: 0.25rem; }
.sold-badge {
  display: inline-block;
  margin-left: 0.35rem;
  background: var(--ink);
  color: #fff;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.42rem;
  vertical-align: 0.15em;
}
.uses {
  display: grid;
  gap: 0.85rem;
}
.use-card {
  background: var(--paper);
  border-top: var(--redline);
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.use-photo { display: block; background: #111; line-height: 0; }
.use-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  object-position: center 58%;
}
.use-copy {
  padding: 1rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.use-card h3 { font-size: clamp(1.05rem, 2vw, 1.25rem); }
.use-card p { margin-bottom: 0.7rem; }
.use-price { font-weight: 700; font-size: 1.15rem; }
.use-price small { display: block; font-weight: 600; font-size: 0.78rem; color: var(--steel); }
.use-id { color: var(--steel); font-size: 0.88rem; }
.use-card .btn { margin-top: auto; align-self: flex-start; min-height: 48px; }
.use-phone { font-weight: 700; text-underline-offset: 0.15em; }
.seat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 1rem;
}
.seat-chips button {
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  padding: 0.55rem 0.85rem;
  min-height: 48px;
  font-weight: 700;
  cursor: pointer;
}
.seat-chips button.is-on { background: var(--ink); color: #fff; }
.card-street, .street-line { font-size: 0.92rem; margin: 0.35rem 0; }
@media (min-width: 900px) {
  .uses { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}

.dockets {
  display: grid;
  gap: 1rem;
}
@media (min-width: 800px) {
  .dockets { grid-template-columns: 1.4fr 1fr 1fr; }
}
.docket {
  background: #fff;
  border-top: var(--redline);
  padding: 1.2rem 1.15rem 1.3rem;
  box-shadow: var(--shadow);
}
.docket.featured { grid-row: span 1; }
.docket blockquote {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
}
.docket footer { color: var(--steel); font-size: 0.88rem; font-weight: 600; }

.facts {
  display: grid;
  gap: 0.8rem;
  margin: 1.2rem 0;
}
@media (min-width: 700px) {
  .facts { grid-template-columns: repeat(3, 1fr); }
}
.fact {
  border-left: var(--redline);
  padding: 0.2rem 0 0.2rem 0.9rem;
}
.fact b { display: block; font-family: Unbounded, sans-serif; font-size: 1.05rem; }

.nap {
  font-weight: 600;
  margin: 0 0 1.1rem;
  max-width: 36ch;
}
.pull {
  margin: 1.2rem 0 0;
  padding: 0.9rem 0 0.2rem 1rem;
  border-left: var(--redline);
  font-size: 1.05rem;
}
.pull cite {
  display: block;
  margin-top: 0.55rem;
  font-style: normal;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--steel);
}
.faq { margin: 0; }
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 1.05rem 0;
}
.faq-item dt {
  font-family: Unbounded, sans-serif;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  margin: 0 0 0.4rem;
}
.faq-item dd {
  margin: 0;
  max-width: 62ch;
  color: #3a3a3e;
}

/* ——— interiors ——— */
.page-hero {
  background: var(--lot);
  padding: clamp(1.8rem, 4vw, 3rem) 0 2rem;
  border-bottom: var(--redline);
}
.page-hero h1 { font-size: clamp(1.9rem, 4.5vw, 3.1rem); max-width: 22ch; }
.page-hero h1.two-line { max-width: 16ch; }
main { flex: 1; background: var(--paper); }
@media (max-width: 979px) {
  main { padding-bottom: 4.2rem; }
}

.prose { max-width: 68ch; }
.prose a { color: var(--red-deep); }
.prose a.btn, .prose a.btn--red, .prose a.btn--ink { color: #fff !important; }
.specs {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.98rem;
}
.specs th, .specs td {
  text-align: left;
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.specs th { width: 38%; color: var(--steel); font-weight: 600; }

.form {
  display: grid;
  gap: 0.7rem;
  max-width: 36rem;
}
.form label { font-weight: 600; font-size: 0.92rem; }
.form input, .form select, .form textarea {
  width: 100%;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line);
  background: #fff;
}
.choices {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.choices legend {
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0;
  margin-bottom: 0.15rem;
}
.choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.form .choice input {
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  margin: 0;
  accent-color: var(--red);
}
.see-cart {
  justify-self: start;
  width: auto;
  min-height: 0;
  padding: 0.15rem 0;
  background: none;
  border: 0;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.see-cart[aria-pressed="true"] { color: var(--red); }
.form textarea { min-height: 8rem; }
.form button { justify-self: start; }
.form-note { font-size: 0.88rem; color: var(--steel); }
.form-error {
  color: #3a1210;
  background: #fff4f2;
  border: 1px solid #e3b2aa;
  padding: 0.65rem 0.75rem;
  margin: 0;
  font-weight: 600;
}
.form button:disabled { opacity: 0.65; cursor: wait; }
.hp {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}
.form-success {
  display: none;
  background: #fff;
  border-left: var(--redline);
  padding: 1rem 1.1rem;
}
.form.is-ok { display: none; }
.form.is-ok + .form-success { display: block; }

.map-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 800px) {
  .map-grid { grid-template-columns: 1fr 1fr; }
}
.service-desk {
  margin-top: 1.2rem;
  background: var(--ink);
  color: #fff;
  padding: 1.3rem 1.25rem 1.4rem;
}
.service-desk p { color: #d4cfc6; max-width: 62ch; }
.service-desk h2 { color: #fff; }
.kit-row {
  display: grid;
  gap: 0.8rem;
  margin: 1rem 0;
}
@media (min-width: 700px) {
  .kit-row { grid-template-columns: 1fr 1fr; }
}
.kit {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0.8rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  padding: 0.55rem;
}
.kit img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  background: #f4f1ea;
}
.kit strong { display: block; }
.compare-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.2rem;
}
.compare-pick label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  background: #fff;
  font-weight: 600;
}
.compare-scroll { overflow-x: auto; }
.compare-table th, .compare-table td { min-width: 9rem; }
.map-grid iframe {
  width: 100%;
  height: 240px;
  border: 0;
  filter: grayscale(0.2);
}

/* sticky mobile CTA — call and quote, hidden while the hero or the form is on screen */
.sticky-cta {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: #111;
  color: #fff;
  border-top: 3px solid var(--red);
  grid-template-columns: 1fr 1fr 0.85fr;
  padding-bottom: env(safe-area-inset-bottom);
}
.sticky-cta.is-show { display: grid; }
.sticky-cta.is-service,
.sticky-cta.is-one { grid-template-columns: 1.4fr 0.9fr; }
.sticky-cta a {
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.15;
  padding: 0.7rem 0.35rem;
  min-height: 48px;
}
.sticky-cta a small {
  display: block;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0;
}
.sticky-cta a.sticky-quote { background: var(--red); }
@media (min-width: 980px) {
  .sticky-cta, .sticky-cta.is-show { display: none !important; }
}
@media (max-width: 979px) {
  body:has(.sticky-cta.is-show) { padding-bottom: 4.6rem; }
}
.floor-phones { margin: 0.75rem 0 0; font-size: 0.92rem; font-weight: 600; }
.floor-phones a { color: var(--ink); text-underline-offset: 0.15em; }
.lead-calls { display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem; }
.lead-calls .btn { width: 100%; justify-content: center; }
.chapter--ink .form-note { color: #e4dfd6; }
.quote-for { margin: 0 0 0.85rem; color: #fff; font-size: 1rem; }

footer.site {
  background: #0d0d0f;
  color: #cfc9c0;
  padding: 1.35rem 0 1.1rem;
  margin-top: auto;
  border-top: 3px solid var(--red);
}
footer.site a { color: #fff; text-decoration: none; }
footer.site a:hover { color: var(--red); }
footer.site p { margin: 0 0 0.45rem; }
footer.site h3 { margin-bottom: 0.35rem; }
.foot-grid {
  display: grid;
  gap: 1rem 1.25rem;
}
@media (min-width: 800px) {
  .foot-grid { grid-template-columns: 1.15fr 1fr 1fr 0.8fr; }
}
.foot-communities { font-size: 0.92rem; }
.foot-links { display: flex; flex-direction: column; gap: 0.15rem; }
.foot-links a { padding: 0.12rem 0; }
.foot-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-top: 0.35rem;
  background: #1877f2;
  color: #fff;
}
.foot-fb:hover { color: #fff; background: #0f5fcc; }
.colophon {
  background: #080809;
  color: #8a8680;
  font-size: 0.78rem;
  padding: 1rem 0 1.4rem;
  border-top: 1px solid #222;
}
.colophon a { color: #cfc9c0; }
.colophon p { margin: 0 0 0.35rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* Showroom floor — full cart photo, quote card in the sky so the carts stay clear */
#hero-ctas.floor { display: block; position: relative; background: #111; border-bottom: var(--redline); }
.floor-photo { margin: 0; background: #111; }
.floor-photo img {
  width: 100%;
  height: min(72vh, 720px);
  object-fit: cover;
  object-position: center 68%;
}
.floor-copy {
  padding: 1.15rem 1.2rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(250, 248, 244, 0.96);
}
.floor-copy h1 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); max-width: 16ch; margin-bottom: 0.35rem; }
.floor-copy .lede { margin-bottom: 0.85rem; font-size: 1.02rem; }
.floor-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.floor-actions .btn { flex: 1 1 10rem; justify-content: center; }
@media (max-width: 400px) {
  .util-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  .util-inner > span:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.75rem;
  }
  .floor-actions { flex-direction: column; align-items: stretch; }
  .floor-actions .btn {
    flex: 1 1 auto;
    width: 100%;
    min-height: 48px;
    white-space: nowrap;
    padding-inline: 0.7rem;
  }
}
@media (min-width: 960px) {
  .floor-copy {
    position: absolute;
    z-index: 2;
    left: var(--gutter);
    top: 1.15rem;
    width: min(28rem, 38%);
    box-shadow: var(--shadow);
  }
}
@media (max-width: 959px) {
  .floor-photo img { height: min(50vh, 390px); object-position: center 60%; }
  .floor-copy { position: static; width: auto; box-shadow: none; }
}

.stars {
  margin: 0 0 0.45rem;
  color: var(--red);
  letter-spacing: 0.12em;
  font-size: 0.95rem;
  line-height: 1;
}
.dockets { grid-template-columns: 1fr; }
@media (min-width: 800px) {
  .dockets { grid-template-columns: 1fr 1fr 1fr; }
}
.docket.featured { background: #fff; }
@media (min-width: 800px) {
  .docket.featured { grid-column: span 1; }
}

.service-menu {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  border-top: var(--redline);
}
@media (min-width: 760px) {
  .service-menu { grid-template-columns: 1fr 1fr; }
}
.service-menu li {
  margin: 0;
  padding: 0.95rem 1rem 0.95rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.12rem;
  font-weight: 600;
}
.page-hero--split { padding-bottom: 0; }
.page-hero--split .split { align-items: center; }
.page-hero--split img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 42%;
}

.contact-follow {
  background: var(--paper);
  padding: 1.5rem 0 1.7rem;
}
.contact-follow p { margin: 0; }

.vdp {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.2rem, 3vw, 2rem) 0 0.4rem;
}
@media (min-width: 960px) {
  .vdp { grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); align-items: start; gap: 1.6rem; }
}
.vdp-gallery { min-width: 0; background: #111; }
.vdp-main {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 45%;
  background: #111;
}
.vdp-thumbs { display: flex; gap: 0.4rem; padding: 0.45rem; background: #111; overflow-x: auto; }
.vdp-thumbs button {
  flex: 0 0 76px;
  width: 76px;
  height: 58px;
  padding: 0;
  border: 2px solid transparent;
  background: #111;
  cursor: pointer;
}
.vdp-thumbs button.is-on { border-color: var(--red); }
.vdp-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.vdp-video { margin-top: 0.6rem; background: #111; }
.vdp-video iframe, .vdp video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}
.vdp-buy h1 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); margin: 0 0 0.2rem; }
.vdp-price {
  font-family: Unbounded, sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 0.2rem;
}
.vdp-price small {
  display: block;
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--steel);
  margin-top: 0.2rem;
}
.crumb { font-size: 0.88rem; margin: 0 0 0.7rem; color: var(--steel); }
.crumb a { color: var(--ink); }
.vdp-ask { margin: 0.35rem 0 0.85rem; }
.vdp-buy .form { max-width: none; margin: 0; }
.vdp-buy .form textarea { min-height: 4.2rem; }
.vdp-buy .form button { width: 100%; }
.vdp-call { margin: 0.75rem 0 0.4rem; font-weight: 700; }
.vdp-call a { color: var(--ink); }
@media (max-width: 959px) {
  .vdp-main { aspect-ratio: auto; height: 148px; }
  .vdp-buy .form { gap: 0.35rem; }
  .vdp-buy .form input, .vdp-buy .form select { padding: 0.5rem 0.65rem; min-height: 44px; }
}
@media (min-width: 960px) {
  .vdp-buy .form { gap: 0.35rem; }
  .vdp-buy .form input, .vdp-buy .form select { padding: 0.45rem 0.65rem; }
}
@media (max-width: 720px) {
  .inv-tools .wrap { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .inv-tools .sort-bar:first-child,
  .inv-tools #flt-reset,
  .inv-tools .inv-count { grid-column: 1 / -1; }
}
#showroom, #quote { scroll-margin-top: 5.5rem; }

.card-media { position: relative; }
.badge-row {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  max-width: calc(100% - 1.1rem);
}
.badge {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.28rem 0.45rem;
}
.badge--special { background: var(--red); }
.vdp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.45rem;
}
.card-where, .card-id, .card-color, .card-note, .vdp-meta {
  margin: 0.15rem 0;
  font-size: 0.92rem;
}
.card-id, .card-note { font-weight: 700; }
.trust-line { font-weight: 700; margin: 0.55rem 0; }
.brand-line { font-weight: 700; letter-spacing: 0.04em; margin: 0 0 0.35rem; }
.floor-copy .trust-line { margin: 0.55rem 0 0; font-size: 0.86rem; }
.floor-copy .brand-line { margin: 0 0 0.2rem; }
.vdp-price-k {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}
.vdp-fees { margin: 0.15rem 0 0.35rem; font-weight: 700; }
.vdp-checks { list-style: none; padding: 0; margin: 0.35rem 0 0.6rem; }
.vdp-checks li { position: relative; padding-left: 1.15rem; margin: 0; line-height: 1.3; }
.vdp-checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 700;
}
.vdp-want {
  font-family: Unbounded, sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  margin: 0.15rem 0;
}
.vdp-buy p { margin: 0.3rem 0; }
.vdp-buy .form button {
  white-space: normal;
  min-height: 48px;
  width: 100%;
  justify-self: stretch;
}
.vdp-buy .form button.see-cart {
  width: auto;
  min-height: 0;
  justify-self: start;
  white-space: normal;
}
.vdp-finance .btn { width: 100%; min-height: 48px; }
.vdp-nap { font-size: 0.92rem; }
.photo-note {
  margin: 0;
  padding: 0.5rem 0.7rem 0.65rem;
  color: #cfc9c0;
  background: #111;
  font-size: 0.88rem;
}
.form-success h2 { color: var(--ink); font-size: 1.35rem; margin: 0 0 0.35rem; }
.chapter--ink .form-success h2,
.chapter--ink .form-success p { color: var(--ink); }
.success-next { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.75rem; }
.success-next .btn { min-height: 48px; }
.success-cart { font-weight: 700; }
.sort-bar input {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 16px;
}
.inv-tools { position: static; top: auto; }
.inv-count { margin: 0; font-weight: 700; align-self: center; }
.hours-now { font-weight: 700; margin: 0.35rem 0; }
.next-step { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
.chapter--ink .hours-now { color: #fff; }
.price small { white-space: normal; }
.card[hidden], .inv-group[hidden] { display: none; }