/* Sherwood Ford prototype. Tokens come straight from the approved vehicle page
   design (Main.dc.html and Desktop.dc.html). Mobile first. The design defines
   no dark mode, so the site is light only. */

:root {
  --bg: #F5F4F0;
  --surface: #FFFFFF;
  --well: #ECEBE8;
  --panel: #F7F6F2;
  --track: #EEECE7;
  --hair: #E4E2DC;
  --rule: #DAD6CD;
  --text: #121316;
  --text-2: #3B3F46;
  --muted: #5E636B;
  --footer-text: #B8BBC2;
  --input: #8A8E96;
  --navy: #0C2A66;
  --navy-hover: #081D47;
  --focus: #1747B8;
  --tint: #EEF2FA;
  --red: #A50E27;
  --footer: #121316;
  --shadow-card: 0 1px 2px rgba(12,42,102,0.06), 0 10px 28px -10px rgba(12,42,102,0.18);
  --shadow-float: 0 1px 3px rgba(18,19,22,0.16);
  --display: 'Archivo', 'Arial Narrow', sans-serif;
  --body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 16px;
  color-scheme: light;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1280px) { :root { --gutter: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--navy); }
a:hover { color: var(--navy-hover); }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
main:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 16px; border-radius: 12px; background: var(--navy); color: #FFFFFF;
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 8px; color: #FFFFFF; }

.wrap { max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.display { font-family: var(--display); font-stretch: 78%; font-weight: 800; line-height: 1; }
.tnum { font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; }
.strong { font-weight: 700; color: var(--text); }
.red { color: var(--red); }
.h1 { margin: 0; font-size: 36px; letter-spacing: -0.01em; text-wrap: balance; color: var(--text); }
.h2 { margin: 0; font-size: 28px; letter-spacing: -0.005em; color: var(--text); }
@media (min-width: 1024px) {
  .h1 { font-size: 40px; letter-spacing: -0.012em; }
  .h2 { font-size: 30px; }
}
.eyebrow {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.fine { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.label-muted { font-size: 13px; font-weight: 600; color: var(--muted); }

/* ---------- Buttons and controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 12px; font-family: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap; text-align: center;
}
.btn-primary { height: 52px; padding: 0 20px; background: var(--navy); color: #FFFFFF; font-size: 16px; }
.btn-primary:hover { background: var(--navy-hover); color: #FFFFFF; }
.btn-secondary {
  height: 48px; padding: 0 16px; border: 1.5px solid var(--navy);
  background: #FFFFFF; color: var(--navy); font-size: 15px;
}
.btn-secondary:hover { background: var(--tint); color: var(--navy-hover); }
.btn-secondary[aria-expanded="true"] { background: var(--navy); color: #FFFFFF; }
.btn-block { width: 100%; }
.btn-count {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px;
  background: rgba(255,255,255,0.18); font-size: 13px; font-variant-numeric: tabular-nums;
}
.btn-secondary .btn-count { background: var(--tint); }
.btn-text {
  min-height: 44px; min-width: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--navy);
  font-family: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer;
}
.icon-btn {
  width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text); cursor: pointer;
}
.icon-btn-muted { color: var(--text-2); }
.icon-btn:hover { background: var(--track); color: var(--text); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--input); border-radius: 999px; background: #FFFFFF; color: var(--text);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #FFFFFF; }
.chip-count { font-weight: 400; font-variant-numeric: tabular-nums; opacity: 0.8; }
.chips-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.chips-set legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.chips-note { margin-top: 8px; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); min-width: 0; }
.input, .select {
  height: 48px; width: 100%; padding: 0 12px; border: 1px solid var(--input); border-radius: 12px;
  background: #FFFFFF; color: var(--text); font-family: inherit; font-size: 16px; font-weight: 400;
}
.select { padding-right: 36px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233B3F46' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.input[aria-invalid="true"] { border-color: var(--red); }
.err { margin: 0; font-size: 13px; font-weight: 600; color: var(--red); }

.badge {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
.badge-coming { background: var(--navy); color: #FFFFFF; }
.badge-status { background: #FFFFFF; color: var(--text); box-shadow: var(--shadow-float); }
/* The active campaign (Employee Pricing, Trucktober). Live text, never burned into a photo. */
.badge-offer { background: var(--red); color: #FFFFFF; letter-spacing: 0.03em; text-transform: uppercase; }
.muted { color: var(--muted); font-weight: 400; }

.card { background: #FFFFFF; border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; }

/* ---------- Prototype ribbon, header, menu ---------- */
.proto {
  padding: 6px var(--gutter); background: var(--tint); color: var(--navy);
  font-size: 12px; line-height: 1.4; text-align: center;
}
.proto-short { display: none; }
.proto-preview { font-weight: 700; }
@media (max-width: 719.98px) {
  .proto-long { display: none; }
  .proto-short { display: inline; }
}
.site-header { position: relative; z-index: 20; background: #FFFFFF; border-bottom: 1px solid var(--hair); }
.hdr-bar {
  max-width: 1440px; margin: 0 auto; height: 56px; padding: 0 8px 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo { display: flex; align-items: center; min-height: 44px; }
.logo img { width: 96px; height: auto; }
.nav-desk { display: none; }
.hdr-actions { display: flex; align-items: center; gap: 2px; }
.hdr-phone, .btn-hdr { display: none; }
/* Phones and tablets: a Service shortcut beside the call icon (milestone 3). The pill
   looks 38px tall; its tap area reaches 44px. */
.hdr-service {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; margin: 0 4px 0 0;
  border: 1.5px solid var(--navy); border-radius: 999px; color: var(--navy);
  font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.hdr-service::before { content: ''; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; }
.hdr-service:hover { background: var(--tint); color: var(--navy-hover); }
.hdr-service[aria-current="page"] { background: var(--navy); color: #FFFFFF; }
.menu-panel { padding: 4px 16px 12px; border-top: 1px solid var(--hair); background: #FFFFFF; }
.menu-panel a {
  display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--hair);
  color: var(--text); font-size: 17px; font-weight: 600; text-decoration: none;
}
.menu-panel a:last-child { border-bottom: 0; color: var(--navy); }
.menu-panel .menu-call { color: var(--navy); font-variant-numeric: tabular-nums; }
.menu-panel a[aria-current="page"] { color: var(--navy); }
/* Nine menu items since milestone 3, so the full desktop menu starts at 1280px. */
@media (min-width: 1280px) {
  .hdr-bar { height: 80px; padding: 0 var(--gutter); gap: 24px; }
  .logo { flex: 0 0 auto; }
  .logo img { width: 128px; }
  .nav-desk { display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 600; white-space: nowrap; }
  .nav-desk a {
    display: flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none;
    border-bottom: 2px solid transparent;
  }
  .nav-desk a:hover { color: var(--text); }
  .nav-desk a[aria-current="page"] { color: var(--text); border-bottom-color: var(--navy); }
  .hdr-actions { gap: 20px; }
  .hdr-phone {
    display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text);
    font-size: 15px; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .hdr-call, .hdr-service, .menu-btn, .menu-panel { display: none !important; }
}
/* The vehicle page header button fits beside nine menu items from 1440px; below that
   the test drive button in the price card does the job. */
@media (min-width: 1440px) { .btn-hdr { display: inline-flex; height: 44px; padding: 0 18px; } }
@media (min-width: 1600px) { .nav-desk { gap: 24px; font-size: 15px; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer); }
.footer-inner {
  max-width: 1440px; margin: 0 auto; padding: 32px var(--gutter) 36px;
  display: flex; flex-direction: column; gap: 16px;
}
.footer-logo { width: 104px; height: auto; }
.footer-text { max-width: 760px; display: flex; flex-direction: column; gap: 8px; }
.footer-text p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--footer-text); }
.footer-text a { color: #FFFFFF; }
.footer-links { display: flex; flex-wrap: wrap; column-gap: 20px; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; text-decoration: none; }
.footer-links a:hover { color: #FFFFFF; text-decoration: underline; }
.footer-proto { color: #8E929A !important; }
@media (min-width: 1024px) {
  .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 48px; padding-top: 40px; padding-bottom: 40px; }
  .footer-logo { width: 120px; }
}

/* ---------- Vehicle cards (search, home) ---------- */
.vcard {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: #FFFFFF; border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden;
}
.vcard-photo { position: relative; aspect-ratio: 4 / 3; background: var(--well); }
/* Absolute, so a portrait photo (OS8922) cannot stretch the box past its ratio */
.vcard-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vcard.is-placeholder .vcard-photo, .vcard.is-placeholder .vcard-photo img { background: #FFFFFF; object-fit: contain; }
.vcard-nophoto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-weight: 600; }
.vcard-badges { position: absolute; left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.vcard-caption, .vcard-count {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px);
  height: 26px; padding: 0 10px; display: flex; align-items: center; border-radius: 999px;
  background: rgba(18,19,22,0.74); color: #FFFFFF; font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vcard-count { left: auto; right: 10px; font-variant-numeric: tabular-nums; }
.vcard-body { flex: 1 1 auto; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.vcard-title {
  margin: 2px 0 0; font-family: var(--display); font-stretch: 78%; font-weight: 800;
  font-size: 24px; line-height: 1.05; letter-spacing: -0.005em; text-wrap: balance;
}
.vcard-sub { margin: 0; font-size: 14px; color: var(--text-2); }
.vcard-meta { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
/* Price and campaign badge sit together at the foot of the card */
.vcard-money { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.vp { display: flex; flex-direction: column; gap: 2px; }
.vp-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; min-height: 24px; }
.vp-lbl { font-size: 13px; font-weight: 600; color: var(--text-2); }
.vp-gst { font-size: 13px; color: var(--muted); }
/* The amount and "Plus GST" on one line */
.vp-mid { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.vp-amt { font-size: 34px; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.vp-msrp { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vp-below { color: var(--red); font-weight: 700; }
.vp-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vp-duo > div { display: flex; flex-direction: column; gap: 2px; }
.vp-duo-lbl { font-size: 13px; color: var(--muted); }
.vp-duo-amt { font-size: 28px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.vcard-offer { height: 24px; padding: 0 9px; gap: 5px; font-size: 11px; }
.badge-end { font-weight: 600; opacity: 0.92; }
/* "Unlock my payment" (2026-09-28): no payment on a card, the button goes to the vehicle's
   payment gate. It sits above the card's full-size link, so the tap is its own. */
.vcard-unlock { position: relative; z-index: 1; margin-top: 10px; width: 100%; height: 48px; font-size: 15px; }
.vcard-unlock .lock { flex: 0 0 auto; }
.vcard-go { margin-top: 10px; width: 100%; height: 48px; font-size: 15px; }
.vcard-unlock + .vcard-go { margin-top: 8px; }
/* Phones: compact cards, about two to a screen. A shorter photo, the title and stock
   number on one row, tighter spacing, and no stretch gap above the price. */
@media (max-width: 639.98px) {
  .cards { gap: 12px; }
  .cards .vcard-photo { aspect-ratio: 12 / 5; }
  .cards .vcard-body {
    padding: 8px 14px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px; row-gap: 1px; align-items: baseline;
  }
  .cards .vcard-body > .eyebrow { grid-column: 2; grid-row: 1; font-size: 11px; }
  .cards .vcard-body > .vcard-title { grid-column: 1; grid-row: 1; font-size: 21px; margin: 0; }
  .cards .vcard-body > :not(.eyebrow):not(.vcard-title) { grid-column: 1 / -1; }
  .cards .vcard-sub, .cards .vcard-meta { font-size: 13px; line-height: 1.4; }
  .cards .vcard-money { margin-top: 0; padding-top: 6px; gap: 0; }
  .cards .vp-amt { font-size: 30px; }
  .cards .vp-duo-amt { font-size: 25px; }
  .cards .vcard-unlock { margin-top: 8px; height: 44px; }
  .cards .vcard-go { margin-top: 6px; height: 44px; }
}
/* The whole card is tappable through View vehicle (Unlock my payment keeps its own tap). */
.vcard-go::after { content: ''; position: absolute; inset: 0; border-radius: 16px; }
.vcard-go:focus-visible { outline: none; }
/* Drawn inside the card: .vcard clips anything outside its edge. */
.vcard-go:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
.vcard:hover { box-shadow: 0 1px 2px rgba(12,42,102,0.08), 0 14px 32px -10px rgba(12,42,102,0.28); }

/* ---------- Home ---------- */
.hero { background: #FFFFFF; border-bottom: 1px solid var(--hair); }
.hero-inner { padding-top: 32px; padding-bottom: 36px; display: flex; flex-direction: column; gap: 14px; }
.hero-h { margin: 0; font-size: 44px; letter-spacing: -0.015em; text-wrap: balance; max-width: 14ch; }
.hero-lead { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-2); max-width: 36em; }
.hero-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; max-width: 480px; }
.hero-btns .btn { height: 52px; padding: 0 12px; font-size: 16px; }
.hero-meta { margin: 0; font-size: 13px; color: var(--muted); }
/* The building hero (Kurtis, 2026-09-26: "It needs to be the building."). Since 2026-09-28
   it is the design Kurtis picked from the three directions: Showroom (direction 1) with
   Night's four buttons (direction 3). The real store photo fills the first screen, full
   bleed, as the real day it is (no filter, no tint). The campaign badge, a large condensed
   headline and the savings line sit on its open sky at the top left over a navy scrim, the
   campaign button is white at the photo's foot, and the four buttons sit along the bottom
   of the photo over a dark foot shade: solid white tiles, the icon beside a one-line label,
   all four the same size, a 2 x 2 on phones and one row of four from 720px.
   The stage height comes from the visible screen height (svh), capped, so the four buttons
   end on the first screen of a 390 x 664 phone (an iPhone in Safari with its bars), a
   375 x 667 and a 360 x 740 one. The photo is anchored at its top right, so any crop comes
   off the left and the bottom, never the pylon or the sky. On a shorter phone the stage and
   the headline get smaller together, so the Ford oval, the pylon and the SHERWOOD showroom
   sign stay in view, below or beside the words and above the campaign button. Tiles,
   button and contrast measured in headless Edge (README, Home first screen). */
.hero-building { position: relative; border-bottom: 0; --tile-h: 60px; --tile-gap: 10px; --under-pad: 14px; }
.hero-stage {
  position: relative; overflow: hidden; background: #1B2A45;
  height: 620px; height: clamp(440px, calc(100vh - 190px), 620px); height: clamp(440px, calc(100svh - 190px), 620px);
}
.hero-pic { display: block; height: 100%; }
.hero-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 0%; }
/* The foot shade: dark behind the campaign button and the tiles, clear above the showroom
   sign (the sign sits a little more than half way down the photo at every phone size). */
.hero-stage::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48%; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 14, 36, 0) 0%, rgba(4, 14, 36, 0.5) 40%, rgba(4, 14, 36, 0.84) 78%, rgba(4, 14, 36, 0.9) 100%);
}
/* The words at the top, the campaign button at the foot, just above the tiles: the bottom
   padding is the height of the tile grid (two rows on phones) plus its margin and a gap. */
.hero-over {
  position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  padding-top: 18px; padding-bottom: calc(2 * var(--tile-h) + var(--tile-gap) + var(--under-pad) + 12px);
}
.hero-building .hero-copy { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: min(244px, calc(66vw - 8px)); color: #FFFFFF; }
/* The badge and its end date stay on one line on 360px phones, a little past the words. */
.hero-building .hero-badges { flex-wrap: nowrap; width: max-content; }
/* The scrim sits behind the words, from the photo's left edge: dark on the left, clear by
   the pylon, full strength down to the last line of words and gone 20px below it, so the
   showroom under the words reads clearly and a longer campaign line is still covered. */
.hero-building .hero-copy::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: -120px; bottom: -20px; left: calc(-1 * var(--gutter)); width: 100vw;
  background: linear-gradient(90deg, rgba(4, 14, 36, 0.9) 0%, rgba(4, 14, 36, 0.86) 64%, rgba(4, 14, 36, 0.34) 72%, rgba(4, 14, 36, 0) 82%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 20px), transparent 100%);
}
/* The headline grows with the screen height as well as its width. On a tall phone (390 x
   844) it is the big three-line headline; on a short one (390 x 664) the stage is shorter,
   so the showroom sign sits higher, and the headline shrinks until it sets in two lines that
   end above the sign. Its width stops 8px short of the Ford oval, which grows and moves left
   as the stage gets taller (tied to the stage height above: change one, measure both). */
.hero-building .hero-h {
  max-width: min(100%, calc(100vw - 23.33vh + 20px)); max-width: min(100%, calc(100vw - 23.33svh + 20px));
  font-size: 40px; font-size: clamp(34px, min(12.8vw, 15.96vh - 76px), 52px); font-size: clamp(34px, min(12.8vw, 15.96svh - 76px), 52px);
  font-stretch: 66%; line-height: 0.94; letter-spacing: -0.01em; overflow-wrap: break-word; color: #FFFFFF;
}
.hero-building .hero-ends { color: #FFFFFF; }
.hero-building .hero-save { font-size: 22px; line-height: 1.08; color: #FFFFFF; text-wrap: balance; }
.hero-building .hero-eyebrow { color: #FFFFFF; }
.hero-building .hero-lead { font-size: 17px; font-weight: 600; color: #FFFFFF; }
/* The campaign button: white on the photo, the full width of the words column on phones. */
.hero-building .hero-btns-one { margin-top: 0; max-width: none; }
.hero-building .hero-btns-one .btn { background: #FFFFFF; color: var(--navy); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45); }
.hero-building .hero-btns-one .btn:hover { background: var(--tint); color: var(--navy-hover); }
.hero-building .hero-btns-one .btn-count { background: var(--tint); }
/* Focus on the photo: a white ring edged in navy, so it shows on the sky, the showroom and
   the foot shade alike. */
.hero-building .hero-btns-one .btn:focus-visible,
.hero-building .tile:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 7px var(--navy); }
/* Shared by the hero words and the fine print and all-in line at the foot of the page. */
.hero-after { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hero-badges { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.hero-ends { font-size: 14px; font-weight: 700; color: var(--text); }
.hero-save { margin: 0; font-family: var(--display); font-stretch: 78%; font-weight: 800; font-size: 24px; line-height: 1.1; color: var(--red); }
.hero-btns-one { grid-template-columns: minmax(0, 1fr); max-width: 360px; margin-top: 2px; }
.hero-trust { margin: 2px 0 0; font-size: 15px; color: var(--text-2); }
.hero-trust strong { color: var(--text); }
/* The campaign fine print: one line, the full disclaimer one tap away. In the page, not a pop-up. */
.hero-fine { max-width: 60em; font-size: 13px; line-height: 1.4; color: var(--muted); }
.hero-fine summary { min-height: 44px; padding: 4px 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; cursor: pointer; list-style: none; }
.hero-fine summary::-webkit-details-marker { display: none; }
.hero-fine-line { margin: 0; font-size: 13px; color: var(--text-2); }
.hero-fine-more { font-weight: 700; color: var(--navy); text-decoration: underline; white-space: nowrap; }
.hero-fine-more::after { content: ' +'; }
.hero-fine[open] .hero-fine-more::after { content: ' \2212'; }
.hero-fine-body { padding: 2px 0 4px; display: flex; flex-direction: column; gap: 4px; }
.hero-fine-body p { margin: 0; font-size: 12px; line-height: 1.5; }
.hero-fine-link { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
/* The four buttons along the foot of the photo (Kurtis, 2026-09-26: new, used, service and
   Giant Deals; the other departments are in the top menu). Direction 3's tiles: solid
   white, the icon beside a one-line label, all four the same size. */
.hero-under { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding-top: 0; padding-bottom: var(--under-pad); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tile-gap); }
.tile {
  min-width: 0; min-height: var(--tile-h); padding: 8px 12px; display: flex; flex-direction: row;
  align-items: center; justify-content: center; gap: 10px; border-radius: 14px;
  background: #FFFFFF; color: var(--navy); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.7);
  font-size: 16px; font-weight: 700; line-height: 1.15; white-space: nowrap; text-decoration: none;
}
.tile:hover { background: var(--tint); color: var(--navy-hover); }
.tile svg { flex: 0 0 auto; }
/* Under 380px (360 and 375px phones) the tiles are 159 to 166px wide: a little less room
   around the icon so "Book service" stays on one line. */
@media (max-width: 379.98px) {
  .tile { padding: 8px 8px; gap: 8px; }
}
/* 720px and wider: the wide photo fills the screen height, capped at 780px. The words start
   at the top and, from 1280px, the button follows them. The scrim follows the text column, which starts at
   the page gutter inside the 1440px frame. It stays full strength to --x1, past the right
   edge of the words, and is gone by --x2. From 720 to 1279px --x2 is 64% of the width, so the
   shading ends before the Ford oval and the pylon (the oval starts about 66% across). The
   four tiles are one row. */
@media (min-width: 720px) {
  /* The savings line everywhere else (the Giant Deals card on /specials/); the home photo
     sets its own sizes below with .hero-building .hero-save, which wins. */
  .hero-save { font-size: 32px; }
  .hero-building { --tile-h: 80px; --tile-gap: 12px; --under-pad: 28px; }
  .hero-stage { height: 780px; height: clamp(480px, calc(100vh - 150px), 780px); height: clamp(480px, calc(100svh - 150px), 780px); }
  .hero-stage::after { height: 40%; }
  .hero-over { max-width: 1440px; margin: 0 auto; justify-content: flex-start; padding-top: 40px; padding-bottom: calc(var(--tile-h) + var(--under-pad) + 20px); }
  .hero-building .hero-copy { max-width: 420px; }
  .hero-building .hero-copy::before {
    --x0: max(0px, 50% - 720px); --x1: 440px; --x2: max(470px, 64vw);
    bottom: -120px; left: calc(-1 * (max(0px, 50vw - 720px) + var(--gutter)));
    background: linear-gradient(90deg, rgba(4, 14, 36, 0.86) 0, rgba(4, 14, 36, 0.8) calc(var(--x0) + var(--x1)), rgba(4, 14, 36, 0) calc(var(--x0) + var(--x2)));
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 120px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 120px), transparent 100%);
  }
  .hero-building .hero-h { max-width: none; font-size: 60px; }
  .hero-building .hero-save { font-size: 30px; }
  .hero-building .hero-btns-one { margin-top: 18px; max-width: 360px; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile { padding: 8px 12px; gap: 12px; border-radius: 16px; font-size: 17px; }
}
/* 720 to 1279px (tablets and small laptops): the showroom sign sits nearer the words, so
   the words start a little higher, the scrim ends sooner under them, and the campaign
   button goes to the foot of the photo, just above the tiles, instead of straight under
   the words, where it covered the sign at 1024 x 768. */
@media (min-width: 720px) and (max-width: 1279.98px) {
  .hero-over { justify-content: space-between; padding-top: 28px; }
  /* The scrim fades out 40px below the words instead of 120px, so the showroom sign under
     them is not shaded. */
  .hero-building .hero-copy::before {
    bottom: -40px;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 40px), transparent 100%);
  }
  /* The headline stops 8px short of the Ford oval, which moves left as the stage gets taller
     (a tall iPad at 1024 x 1366 put it under "Every fee is already in the price."). */
  .hero-building .hero-h {
    max-width: calc(100vw - 0.6817 * clamp(480px, 100vh - 150px, 780px) - 40px);
    max-width: calc(100vw - 0.6817 * clamp(480px, 100svh - 150px, 780px) - 40px);
  }
}
/* 720 to 1023px (tablets upright): the wide photo stays a little taller than its own 2:1
   shape, and the headline and savings line scale with the width, so a two-line savings
   line (October's) still ends above the showroom sign. The headline stops 8px short of the
   Ford oval (the oval starts 53.65% across while the stage is 68% of the width tall, and
   further right when the stage is shorter), so the crop never pulls the oval and the pylon
   in under the words. The tiles are narrower here (155px at 720), so the
   label drops to 16px to stay on one line. */
@media (min-width: 720px) and (max-width: 1023.98px) {
  .hero-stage { height: clamp(440px, 68vw, calc(100vh - 190px)); height: clamp(440px, 68vw, calc(100svh - 190px)); }
  .hero-over { padding-top: 24px; }
  .hero-building .hero-h { max-width: calc(53.65vw - 40px); font-size: clamp(52px, 7.3vw, 60px); }
  .hero-building .hero-save { font-size: clamp(26px, 3.65vw, 30px); }
  .tile { padding: 8px 8px; gap: 8px; font-size: 16px; }
}
@media (min-width: 1024px) {
  .hero-building .hero-copy::before { --x1: 540px; --x2: 64vw; }
  .hero-building .hero-copy { max-width: 480px; }
  .hero-building .hero-h { font-size: 72px; }
}
/* 1280px and wider: the button follows the words, so the words and the button have to fit
   above the tiles. On a short laptop screen (1366 x 768 or 1280 x 720 once the browser's
   bars and the taskbar take their share) the stage stops at its 480px floor, and October's
   two-line savings line put the button under the tiles. So the headline and savings line
   also take their size from the visible screen height: the full 88px and 36px from about
   685px of visible height, down to 68px and 28px at 630px, where the stage reaches its
   floor. A two-line headline, a two-line savings line and the button then end at least
   15px above the tiles (tied to the stage height above: change one, measure both). */
@media (min-width: 1280px) {
  .hero-building .hero-copy::before { --x1: 680px; --x2: 940px; }
  .hero-building .hero-copy { max-width: 600px; }
  .hero-building .hero-h { font-size: 88px; font-size: clamp(68px, calc(36.2vh - 160px), 88px); font-size: clamp(68px, calc(36.2svh - 160px), 88px); }
  .hero-building .hero-save { font-size: 36px; font-size: clamp(28px, calc(14.8vh - 65px), 36px); font-size: clamp(28px, calc(14.8svh - 65px), 36px); }
}
.reviews-strip { background: var(--surface); border-bottom: 1px solid var(--hair); }
.reviews-inner { min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 2px; padding-top: 10px; padding-bottom: 10px; }
.reviews-inner p { margin: 0 0 0 8px; font-size: 14px; color: var(--text); }
.star { flex: 0 0 auto; }
@media (min-width: 720px) {
  .hero-inner { padding-top: 56px; padding-bottom: 56px; }
  .hero-h { font-size: 64px; }
}
@media (min-width: 1280px) { .hero-h { font-size: 76px; } }
.home-sec { padding-top: 40px; display: flex; flex-direction: column; gap: 16px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.sec-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 700; text-decoration: none; }
.feat-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 78%); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 20px;
  margin: 0 calc(-1 * var(--gutter)); scroll-padding: 0 var(--gutter);
}
.feat-row > * { scroll-snap-align: start; }
@media (min-width: 720px) { .feat-row { grid-auto-columns: minmax(280px, 42%); } }
@media (min-width: 1024px) {
  .feat-row { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 4px 0 8px; }
}
.home-visit { padding-bottom: 48px; }
.home-visit .sec { padding: 40px 0 0; }

/* ---------- Search pages ---------- */
.offer-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 16px;
  padding: 8px 12px; border-radius: 12px; background: #FFFFFF; box-shadow: var(--shadow-card);
}
.offer-text { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; line-height: 1.4; color: var(--text); }
.offer-text .badge { height: 24px; font-size: 11px; }
.offer-end { color: var(--muted); }
.offer-link { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; }
@media (min-width: 1024px) {
  .offer-row { grid-area: offer; margin-bottom: 16px; }
}
.srp { padding-top: 24px; padding-bottom: 56px; }
.srp-head { display: flex; flex-direction: column; gap: 12px; }
.srp-lead { margin: 0; font-size: 15px; color: var(--text-2); }
.tabs { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--track); max-width: 360px; }
.tabs a {
  min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px;
  border-radius: 9px; color: var(--text-2); font-size: 15px; font-weight: 700; text-decoration: none;
}
.tabs a[aria-current="page"] { background: #FFFFFF; color: var(--text); box-shadow: 0 1px 2px rgba(18,19,22,0.14); }
.tab-count { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.lead-short { display: none; }
@media (max-width: 719.98px) {
  /* Phones: a compact head so the first vehicle and its price make the first screen */
  .srp { padding-top: 16px; }
  .srp-head { gap: 10px; }
  .srp-head .h1 { font-size: 28px; }
  .srp-lead { font-size: 13px; color: var(--muted); }
  .lead-long { display: none; }
  .lead-short { display: inline; }
}
.srp-grid { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
/* Filters button, count and Sort, right above the cards */
.srp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.f-toggle { order: 1; height: 44px; padding: 0 14px; font-size: 15px; }
.f-n {
  min-width: 22px; height: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--navy); color: #FFFFFF; font-size: 12px; font-variant-numeric: tabular-nums;
}
.f-toggle[aria-expanded="true"] .f-n { background: #FFFFFF; color: var(--navy); }
.srp-bar .field-inline { order: 2; flex: 1 1 0; min-width: 0; flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; }
.srp-bar .field-inline .select { width: auto; max-width: 100%; min-width: 0; height: 44px; }
.filters { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1023.98px) {
  /* One in-page panel under the Filters button, not a pop-up */
  .filters:not(.is-open) { display: none; }
  .filters { padding: 16px; border-radius: 16px; background: #FFFFFF; box-shadow: var(--shadow-card); }
}
.f-more { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.f-more summary {
  min-height: 48px; display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--text); list-style: none;
}
.f-more summary::-webkit-details-marker { display: none; }
.f-more summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--text-2); }
.f-more[open] summary::after { content: '\2212'; }
.f-more-body { padding: 4px 0 16px; display: flex; flex-direction: column; gap: 12px; }
.f-price { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#f-clear { align-self: flex-start; }
.results { min-width: 0; }
.results-count { order: 3; flex: 1 0 100%; min-width: 0; margin: 0; font-size: 14px; color: var(--text-2); }
.results-count strong { color: var(--text); font-variant-numeric: tabular-nums; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.more-row { display: flex; justify-content: center; margin-top: 24px; }
.more-row .btn { min-width: 200px; }
.empty { margin: 8px 0 0; padding: 24px; border-radius: 16px; background: #FFFFFF; font-size: 15px; color: var(--text-2); }
.srp-note { margin-top: 16px; }
@media (min-width: 1024px) {
  .srp-grid {
    margin-top: 20px; display: grid; grid-template-columns: 280px minmax(0, 1fr);
    grid-template-areas: "filters bar" "filters offer" "filters results"; column-gap: 40px; row-gap: 0; align-items: start;
  }
  .srp-bar { grid-area: bar; flex-wrap: nowrap; align-items: flex-end; margin-bottom: 16px; }
  .filters { grid-area: filters; position: sticky; top: 24px; }
  .results { grid-area: results; }
  .f-toggle, .f-done { display: none; }
  .results-count { order: 1; flex: 1 1 auto; margin-bottom: 12px; font-size: 15px; }
  .srp-bar .field-inline { order: 2; flex: 0 0 220px; flex-direction: column; align-items: stretch; gap: 6px; }
  .srp-bar .field-inline .select { width: 100%; height: 48px; }
  .f-more { border-bottom: 0; }
}
@media (min-width: 1280px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Service band (home) and offer cards (milestone 3) ---------- */
.svc-band { background: #FFFFFF; border-bottom: 1px solid var(--hair); }
.svc-inner { padding-top: 32px; padding-bottom: 28px; display: flex; flex-direction: column; gap: 20px; }
.svc-top { display: flex; flex-direction: column; gap: 16px; }
.svc-copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.svc-h { margin: 0; max-width: 18ch; font-size: 34px; letter-spacing: -0.01em; text-wrap: balance; color: var(--text); }
.svc-hours { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.svc-hours-note { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.svc-actions, .dept-actions { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.svc-actions .btn, .dept-actions .btn { width: 100%; }
.svc-actions-2, .dept-actions-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* October: the winter tire changeover leads the band and the service page. */
.svc-lead {
  padding: 20px; border-radius: 16px; background: var(--navy); color: #FFFFFF;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
}
.svc-lead-h { margin: 0; font-size: 30px; line-height: 1.05; color: #FFFFFF; text-wrap: balance; }
.svc-lead-text { margin: 0; font-size: 15px; line-height: 1.5; color: #DCE3F2; max-width: 44em; }
.svc-lead .btn-primary { width: 100%; max-width: 360px; background: #FFFFFF; color: var(--navy); }
.svc-lead .btn-primary:hover { background: var(--tint); color: var(--navy-hover); }
.ocards { display: grid; gap: 12px; }
.ocard {
  padding: 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  border-radius: 16px; background: var(--panel); border: 1px solid var(--hair);
}
.ocard-h { margin: 0; font-family: var(--display); font-stretch: 78%; font-weight: 800; font-size: 22px; line-height: 1.05; color: var(--text); }
.ocard-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.ocard-go { margin-top: auto; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; text-decoration: none; }
/* Phones: the band's cards scroll sideways, like Fresh on the lot. */
.ocards-row {
  grid-auto-flow: column; grid-auto-columns: minmax(240px, 78%); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px var(--gutter) 8px; margin: 0 calc(-1 * var(--gutter)); scroll-padding: 0 var(--gutter);
}
.ocards-row > * { scroll-snap-align: start; }
.ocards-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) {
  .svc-actions-2, .dept-actions-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  .ocards-row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .ocards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .svc-inner { padding-top: 48px; padding-bottom: 40px; }
  .svc-top { display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: 48px; align-items: end; }
  .svc-h { font-size: 44px; }
  .ocards-row, .ocards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-lead { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h btn" "text btn"; column-gap: 32px; align-items: center; padding: 24px 28px; }
  .svc-lead-h { grid-area: h; font-size: 34px; }
  .svc-lead-text { grid-area: text; }
  .svc-lead-btns { grid-area: btn; }
  .svc-lead .btn-primary { width: auto; }
}

/* ---------- Department pages (milestone 3) ---------- */
[data-page="dept"] main { padding-bottom: 56px; }
.dept-hero { background: #FFFFFF; border-bottom: 1px solid var(--hair); }
.dept-grid { padding-top: 24px; padding-bottom: 28px; display: flex; flex-direction: column; gap: 20px; }
.dept-copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dept-h { max-width: 20ch; }
.dept-lead { margin: 0; max-width: 40em; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.dept-copy .dept-actions { margin-top: 4px; }
.dept-box {
  max-width: 420px; padding: 16px; display: flex; flex-direction: column; gap: 8px;
  border-radius: 16px; background: var(--panel); border: 1px solid var(--hair);
}
.dept-box .label-muted { margin: 0; }
.dept-box-line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.dept-box-line a { font-weight: 700; }
.dept-box-more { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 8px; }
.dept-reviews { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.dept-sec { padding-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.dept-sec .ocard { background: #FFFFFF; border: 0; box-shadow: var(--shadow-card); }
.dept-p { margin: 0; max-width: 44em; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.dept-list { margin: 0; padding: 0; list-style: none; max-width: 44em; border-top: 1px solid var(--rule); }
.dept-list li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.5; color: var(--text); }
.price-rows { margin: 0; max-width: 560px; border-top: 1px solid var(--rule); }
.price-rows > div { padding: 12px 0; display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--rule); }
.price-rows dt { font-weight: 700; color: var(--text); }
.price-rows dd { margin: 0; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.spec-card {
  max-width: 760px; padding: 20px; display: flex; flex-direction: column; gap: 10px;
  border-radius: 16px; background: #FFFFFF; box-shadow: var(--shadow-card);
}
.spec-h { margin: 0; font-size: 34px; letter-spacing: -0.01em; color: var(--text); text-wrap: balance; }
.spec-note { margin: 0; font-size: 15px; color: var(--text-2); }
/* Every department's hours and phone in one table. Phones stack each row. */
.dept-table {
  width: 100%; max-width: 960px; border-collapse: collapse; font-size: 15px; line-height: 1.45;
  background: #FFFFFF; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card);
}
.dept-table th, .dept-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.dept-table thead th { font-size: 13px; font-weight: 600; color: var(--muted); background: var(--panel); }
.dept-table tbody th { font-weight: 700; color: var(--text); }
.dept-table tbody tr:last-child > * { border-bottom: 0; }
.dt-line { display: block; }
.dept-table a { font-weight: 700; }
@media (max-width: 719.98px) {
  .dept-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dept-table, .dept-table tbody, .dept-table tr, .dept-table th, .dept-table td { display: block; }
  .dept-table tr { padding: 14px 16px; border-bottom: 1px solid var(--hair); }
  .dept-table tbody tr:last-child { border-bottom: 0; }
  .dept-table th, .dept-table td { padding: 0; border: 0; }
  .dept-table tbody th { margin-bottom: 4px; font-size: 16px; }
  .dept-table td + td { margin-top: 4px; }
  .dept-table a { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (min-width: 1024px) {
  .dept-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 48px; align-items: start; padding-top: 40px; padding-bottom: 40px; }
  .dept-copy .dept-actions { flex-direction: row; flex-wrap: wrap; max-width: none; }
  .dept-copy .dept-actions .btn { width: auto; }
  .dept-copy .dept-actions-2 { display: flex; flex-wrap: wrap; gap: 10px; }
  .dept-sec .dept-actions { flex-direction: row; flex-wrap: wrap; max-width: none; }
  .dept-sec .dept-actions .btn { width: auto; }
  .dept-sec { padding-top: 48px; }
}
/* The service page photo (2026-09-26): the service bay doors. Phones get a modest 7:2
   strip (its own crop, hero-service-phone) so the hours, the phone and Book service stay
   on the first screen; 720px and wider get the wide storefront photo as a banner. */
.dept-photo { background: var(--well); }
.dept-pic img { width: 100%; height: auto; aspect-ratio: 5 / 1; object-fit: cover; object-position: 50% 60%; } /* thinner, Kurtis 2026-09-26 */
.dept-hero-photo .dept-grid { padding-top: 16px; }
/* Phones: Call and Text share a row; Text hides the number the Call button shows, but
   only visually, so the spoken name is "Text 587-840-5616" at every width and always
   holds the visible words (WCAG 2.5.3 Label in Name). No aria-label on this link. */
.dept-actions-calltext { grid-template-columns: minmax(0, 1fr) auto; }
.dept-actions-calltext .lbl-num {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (min-width: 560px) {
  .dept-actions-calltext { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dept-actions-calltext .lbl-num { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}
@media (min-width: 720px) {
  .dept-pic img { aspect-ratio: auto; height: clamp(160px, 18vw, 260px); object-position: 30% 55%; }
  .dept-hero-photo .dept-grid { padding-top: 24px; }
}
@media (min-width: 1024px) { .dept-hero-photo .dept-grid { padding-top: 32px; } }

/* ---------- Coming soon ---------- */
.coming { padding-top: 48px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin-left: 0; }
.coming-text { margin: 0; font-size: 17px; color: var(--text-2); }
.coming-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (min-width: 1440px) { .coming { margin-left: auto; margin-right: auto; max-width: 1440px; } }

/* ---------- Vehicle page (phone first, 390 design) ---------- */
.crumbs { display: none; }
/* Phones: "Back to new vehicles" is a pill on the photo's top corner, not a row of its own
   (2026-09-28 review: the row pushed the payment gate off a 390 x 664 screen). */
.back-row { position: absolute; top: 12px; left: 12px; z-index: 2; }
.back-link {
  min-height: 44px; padding: 0 14px 0 10px; display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px; background: rgba(255,255,255,0.95); box-shadow: var(--shadow-float);
  font-size: 14px; font-weight: 700; color: var(--navy); text-decoration: none; white-space: nowrap;
}
.back-link:hover { background: #FFFFFF; color: var(--navy); }
.back-link svg { width: 18px; height: 18px; }
.vdp { max-width: 560px; margin: 0 auto; }
.vdp-gallery { position: relative; }
.gal-frame { position: relative; }
.gal {
  display: flex; aspect-ratio: 4 / 3; overflow-x: auto; scroll-snap-type: x mandatory;
  background: var(--well); scrollbar-width: none; overscroll-behavior-x: contain;
}
.gal::-webkit-scrollbar { display: none; }
/* When a short screen crops the photo (below), keep the wheels and lose ceiling instead. */
.gal img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; scroll-snap-align: center; }
.gal:focus-visible { outline-offset: -3px; }
.is-placeholder .gal { background: #FFFFFF; }
.is-placeholder .gal img { object-fit: contain; }
.gal-none { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; color: var(--muted); font-weight: 600; }
.gal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255,255,255,0.92); color: var(--text); cursor: pointer; box-shadow: var(--shadow-float);
}
.gal-prev { left: 8px; }
.gal-next { right: 8px; }
.gal-coming { position: absolute; left: 12px; top: 12px; height: 30px; padding: 0 12px; font-size: 13px; }
.gal-over {
  position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; pointer-events: none;
}
.gal-over > * { pointer-events: auto; }
.pill-btn {
  height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px;
  background: rgba(255,255,255,0.95); color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow-float); white-space: nowrap;
}
.pill-btn:hover { color: var(--text); background: #FFFFFF; }
.counter {
  min-height: 28px; padding: 4px 10px; display: flex; align-items: center; border-radius: 999px;
  background: rgba(18,19,22,0.74); color: #FFFFFF; font-size: 13px; font-weight: 600; line-height: 1.3;
  font-variant-numeric: tabular-nums; text-align: right;
}
.thumbs { display: none; }
/* Phones and tablets: the photo takes its height from the visible screen height (svh), so the
   title, the price and the payment gate's Unlock row fit the first screen of a 390 x 664
   phone (an iPhone's Safari with its bars showing), and it is the full 4:3 photo on a
   390 x 844 screen. The width is set too, so the height does not narrow it through the 4:3
   ratio; browsers without svh drop the height and keep the 4:3 photo. (2026-09-28 review;
   README, Unlock my payment.) */
@media (max-width: 1023.98px) {
  .vdp-gallery .gal { width: 100%; height: clamp(176px, calc(100svh - 480px), min(75vw, 420px)); }
  .gal-coming { left: auto; right: 12px; }
}
/* Pages with a campaign badge (the build adds has-offer to .vdp): the badge and its note sit on
   top of the price card (below), so on phones and tablets the photo pays for them (Kurtis,
   2026-09-29). It takes 80% of each pixel of screen height past 500px: 131px on a 390 x 664
   phone (53px less than without a badge), 275px at 390 x 844, the full 4:3 from about
   390 x 866. Never under 120px, where the Back pill, the arrows and the Window sticker pill
   still fit as 44px targets without touching. Cropped, it keeps the wheels (80% down), and the
   arrows sit as a pair in the photo's top corner, clear of the Back pill and the Window sticker
   pill. Units without a badge keep the photo above. (README, Campaign badge back on top.) */
@media (max-width: 1023.98px) {
  .vdp.has-offer .vdp-gallery .gal { height: clamp(120px, calc(80svh - 400px), min(75vw, 420px)); }
  .vdp.has-offer .gal img { object-position: 50% 80%; }
  .vdp.has-offer .gal-arrow { top: 12px; transform: none; }
  .vdp.has-offer .gal-prev { left: auto; right: 64px; }
  .vdp.has-offer .gal-next { right: 12px; }
}

.vdp-head { padding: 16px 16px 0; display: flex; flex-direction: column; gap: 6px; }
.vdp-title { margin: 0; font-size: 36px; letter-spacing: -0.01em; text-wrap: balance; color: var(--text); }
.vdp-sub { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.vdp-km { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.vdp-note { margin: 0; font-size: 14px; font-weight: 600; color: var(--navy); }
.vdp-status { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.vdp-status .badge-status { box-shadow: none; border: 1.5px solid var(--text); }

.price-card {
  margin: 12px 16px 0; background: #FFFFFF; border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden;
  scroll-margin-top: 16px;
}
.price-block { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 4px; }
.price-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.price-lbl { font-size: 13px; font-weight: 600; color: var(--text-2); }
.price-gst { font-size: 13px; color: var(--muted); white-space: nowrap; }
.price-hero { font-size: 48px; letter-spacing: -0.015em; color: var(--text); }
/* Ford MSRP and Below MSRP on one line, as on the cards (2026-09-28 review). */
.price-msrp { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.price-below { color: var(--red); font-weight: 600; white-space: nowrap; }
.price-duo { margin-top: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.price-duo > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.duo-lbl { font-size: 13px; font-weight: 600; color: var(--text-2); }
.duo-amt { font-size: 40px; letter-spacing: -0.015em; color: var(--text); }
.price-note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--track); }
.vdp-offer { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--text-2); }
/* Phones and tablets: the campaign badge and its note stay on top of the price card, above the
   price, where they sat before the 2026-09-28 review moved them under the payment gate (Kurtis,
   2026-09-29). The badge and the note share their first line, so the block is two lines (40px;
   with the badge on a line of its own it was 71px) from 360 to 430px wide, in Employee Pricing
   and in Trucktober. The shorter photo on these pages (above) keeps the Unlock row on a
   390 x 664 first screen. Desktop is unchanged. */
@media (max-width: 1023.98px) {
  .price-block > .vdp-offer { display: block; margin: 0 0 8px; font-size: 12px; line-height: 1.5; }
  .price-block > .vdp-offer .badge { height: 22px; margin-right: 6px; padding: 0 8px; font-size: 11px; vertical-align: 1px; }
}
.price-reviews {
  margin: 0; padding: 12px 20px 16px; display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--hair); font-size: 14px; color: var(--text);
}
.pay-per { margin-left: 2px; font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--muted); }
/* The payment gate (2026-09-28), straight under the price: "Your payment $... bi-weekly"
   blurred, with the lock, and Unlock my payment beside it (under it on the narrowest
   phones). The gate opens in place under the row; unlocked, the payment shows right here
   with the term and down payment choices. */
.pc-pay { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; scroll-margin-top: 16px; }
.pc-pay-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.pc-pay-now { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-pay-lbl { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--text-2); }
.pc-pay-nocc { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--text-2); white-space: nowrap; }
.pc-pay-blur { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.pc-pay-blur .display { font-size: 26px; color: var(--text); filter: blur(6px); user-select: none; }
.pc-pay-btn { flex: 0 0 auto; height: 44px; padding: 0 12px; gap: 6px; font-size: 15px; }
.pc-pay-btn .lock { flex: 0 0 auto; }
.pc-pay-hook { margin: 0; color: var(--text-2); }
.pay-gate { margin-top: 6px; }
.gate-reviews { margin: -4px 0 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.pc-pay-done { display: flex; flex-direction: column; gap: 14px; }
.pc-pay-done .pc-pay-row { align-items: flex-end; }
.pc-pay-done .pay-fig { font-size: 34px; color: var(--text); flex: 0 0 auto; }
.pc-pay .pay-trade { padding: 0; justify-content: flex-start; }
.pay-terms legend { margin-bottom: 6px; }
.terms { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.term {
  min-height: 60px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1.5px solid var(--input); border-radius: 12px; background: #FFFFFF; color: var(--text); font-family: inherit; cursor: pointer;
}
.term:hover { border-color: var(--navy); }
.term[aria-pressed="true"] { border-color: var(--navy); background: var(--tint); box-shadow: 0 0 0 1px var(--navy) inset; }
.term-pay { font-size: 22px; }
.term-len { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--text-2); }
.pay-down { display: flex; flex-direction: column; }
.pay-down-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pay-down-lbl { font-size: 13px; font-weight: 600; color: var(--text-2); }
.pay-down-val { font-size: 22px; color: var(--text); }
.pay-down-ends { margin: -4px 0 0; display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); }
/* The down payment slider: a native range, a 44px thumb, the track filled to the choice. */
.pay-range {
  --p: 0; --fill: linear-gradient(to right, var(--navy) 0, var(--navy) calc(22px + (100% - 44px) * var(--p)), var(--rule) calc(22px + (100% - 44px) * var(--p)), var(--rule) 100%);
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 52px; margin: 0; padding: 0; background: transparent; cursor: pointer;
}
.pay-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: var(--fill); }
.pay-range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--fill); }
.pay-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 44px; height: 44px; margin-top: -18px;
  border: 3px solid var(--navy); border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(12,42,102,0.28);
}
.pay-range::-moz-range-thumb {
  box-sizing: border-box; width: 44px; height: 44px;
  border: 3px solid var(--navy); border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(12,42,102,0.28);
}
.pay-range:focus-visible { outline: none; }
.pay-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--focus); }
.pay-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--focus); }
.proto-note { color: var(--navy); }
/* Calling. Phones: a tel: link of equal weight under Confirm availability. Desktop
   (wider than 1024px): "Have us call you", an in-page callback form. */
.call-row { display: flex; flex-direction: column; }
.call-closed { margin-top: 6px; text-align: center; color: var(--text-2); }
.call-back, .callback-panel, .callback-thanks { display: none !important; }
@media (min-width: 1025px) {
  .call-tel, .call-closed { display: none; }
  .call-back:not([hidden]) { display: inline-flex !important; }
  .callback-panel:not([hidden]) { display: flex !important; }
  .callback-thanks:not([hidden]) { display: flex !important; }
}
.holiday-line { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.hr { height: 1px; background: var(--hair); }
.actions { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.avail-idle { display: flex; flex-direction: column; gap: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid2 .btn { padding: 0 8px; white-space: normal; line-height: 1.15; }

.panel { margin: 0; padding: 16px; border-radius: 12px; background: var(--panel); display: flex; flex-direction: column; gap: 14px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -8px -8px -6px 0; }
.panel-title { font-size: 17px; font-weight: 700; color: var(--text); }
.panel-line { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.texting { margin: 0; display: flex; align-items: center; flex-wrap: wrap; column-gap: 6px; font-size: 14px; color: var(--text-2); }
.texting strong { color: var(--text); }
.thanks {
  padding: 14px 16px; display: flex; align-items: flex-start; gap: 10px; border-radius: 12px;
  background: var(--tint); font-size: 14px; line-height: 1.5; color: var(--text);
}
.thanks-icon { flex: 0 0 auto; margin-top: 1px; }

/* Trade-in panel (2026-09-26): the same in-page panel as the test drive, in three steps.
   On a vehicle page it sits in the price card; on Trade and Finance it is a white card. */
.trade-wrap { display: contents; }
.trade { scroll-margin-top: 12px; }
.trade-step { display: flex; flex-direction: column; gap: 14px; }
.trade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trade .select[aria-invalid="true"] { border-color: var(--red); }
.trade-vin { text-transform: uppercase; letter-spacing: 0.04em; }
.trade-vin::placeholder { text-transform: none; letter-spacing: 0; }
.trade-swap { margin: -8px 0 -6px; }
.trade-headline { display: block; font-size: 26px; line-height: 1.1; letter-spacing: -0.005em; text-wrap: balance; }
.trade-sum { margin: 0; display: flex; align-items: center; flex-wrap: wrap; column-gap: 8px; font-size: 14px; color: var(--text-2); }
.trade-photos { display: flex; flex-direction: column; gap: 8px; }
.trade-add { position: relative; align-self: flex-start; cursor: pointer; }
.trade-add:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.trade-thumbs { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.trade-thumb { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--well); }
.trade-thumb img { width: 100%; height: 100%; object-fit: cover; }
.trade-thumb-x {
  position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0; border: 0;
  display: flex; align-items: flex-start; justify-content: flex-end; background: transparent; color: #FFFFFF; cursor: pointer;
}
.trade-thumb-x svg { margin: 4px; padding: 4px; width: 24px; height: 24px; border-radius: 999px; background: rgba(18,19,22,0.72); box-sizing: border-box; }
.dept-sec .trade { max-width: 560px; background: #FFFFFF; box-shadow: var(--shadow-card); }
.dept-sec .trade-thanks { max-width: 560px; }

/* Pass 2 (2026-09-26): "Step 1 of 2" at the top, the condition slider, the km nudge and the
   shopper's own number. The step line sits inside the title, over the headline. */
.trade .panel-head { align-items: flex-start; }
.trade-steps { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--navy); }
.trade-dots { display: inline-flex; gap: 4px; }
.trade-dot { width: 18px; height: 6px; border-radius: 3px; background: var(--rule); transition: background-color 0.25s ease; }
.trade-dot:first-child, .trade-dot.is-on { background: var(--navy); }
.trade-title-txt { display: block; }
.trade-km { display: flex; flex-direction: column; }
.trade-nudge { margin: 0; font-size: 14px; font-weight: 600; color: var(--navy); }
.trade-nudge > span { display: block; margin-top: 8px; animation: trade-pop 0.3s ease-out; }
@keyframes trade-pop { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* The condition slider: a native range input, 5 stops, a 44px thumb with a small truck on
   it, and a track that warms from slate to orange as the condition goes up. */
.trade-cond { display: flex; flex-direction: column; gap: 2px; }
.trade-cond-lbl { font-size: 13px; font-weight: 600; color: var(--text-2); }
.trade-cond-now { margin: 2px 0 0; }
.trade-cond-now .display { font-size: 24px; line-height: 1.15; color: var(--text); }
.trade-cond-line { min-height: 20px; font-size: 14px; color: var(--text-2); }
.trade-cond-ends { margin: -4px 0 2px; display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); }
.trade-range {
  --p: 0.5; --cond: #D29B2C; --rail: #D9D5CB;
  --fill: linear-gradient(to right, var(--cond) 0, var(--cond) calc(22px + (100% - 44px) * var(--p)), var(--rail) calc(22px + (100% - 44px) * var(--p)), var(--rail) 100%);
  --truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C2A66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h11v10H2zM13 9h4l3.5 3.5V16H13z'/%3E%3Ccircle cx='6' cy='17.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.8'/%3E%3C/svg%3E");
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 52px; margin: 0; padding: 0;
  background: transparent; cursor: pointer;
}
.trade-range[data-level="1"] { --p: 0; --cond: #6B7F99; }
.trade-range[data-level="2"] { --p: 0.25; --cond: #A0876A; }
.trade-range[data-level="3"] { --p: 0.5; --cond: #D29B2C; }
.trade-range[data-level="4"] { --p: 0.75; --cond: #E8812A; }
.trade-range[data-level="5"] { --p: 1; --cond: #E2582B; }
.trade-range::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: var(--fill); }
.trade-range::-moz-range-track { height: 12px; border-radius: 999px; background: var(--fill); }
.trade-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 44px; height: 44px; margin-top: -16px;
  border: 3px solid var(--cond); border-radius: 50%; background: #FFFFFF var(--truck) center / 24px no-repeat;
  box-shadow: 0 2px 6px rgba(12,42,102,0.28); transition: transform 0.15s ease, border-color 0.2s ease;
}
.trade-range::-moz-range-thumb {
  box-sizing: border-box; width: 44px; height: 44px;
  border: 3px solid var(--cond); border-radius: 50%; background: #FFFFFF var(--truck) center / 24px no-repeat;
  box-shadow: 0 2px 6px rgba(12,42,102,0.28); transition: transform 0.15s ease, border-color 0.2s ease;
}
.trade-range:active::-webkit-slider-thumb { transform: scale(1.08); }
.trade-range:active::-moz-range-thumb { transform: scale(1.08); }
.trade-range:focus-visible { outline: none; }
.trade-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--focus); }
.trade-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--focus); }
/* One rule per vendor: a browser drops a whole selector list with a pseudo-element it does
   not know, so Chrome and Edge would skip a combined rule for its ::-moz- part. */
@media (prefers-reduced-motion: reduce) {
  .trade-range::-webkit-slider-thumb { transition: none; }
  .trade-range::-moz-range-thumb { transition: none; }
  .trade-dot { transition: none; }
  .trade-nudge > span { animation: none; }
}

/* Their number: two optional dollar boxes with the $ inside the box. */
.trade-own { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--hair); }
.field-opt { font-weight: 400; color: var(--muted); }
.money-box { position: relative; display: block; }
.money-sign { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 600; color: var(--text-2); pointer-events: none; }
.money-box .input { padding-left: 28px; }

/* "Trading in? Value it first", under the unlocked payment and the cash quote. */
.pay-trade { margin: 0; padding: 0 20px 12px; display: flex; justify-content: center; }
.pay-trade .btn-text { font-size: 15px; }
/* "With your trade at your estimate of ..." once the shopper has given their number. */
.pay-trade-line { padding: 10px 12px; border-radius: 10px; background: var(--tint); color: var(--text); font-size: 14px; }

.pay { margin: 16px 16px 0; scroll-margin-top: 16px; }
.pay-top { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 12px; }
.pay-h { font-size: 16px; font-weight: 700; color: var(--text); }
.pay-form { margin: 0; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.pay-sub { font-size: 13px; color: var(--muted); }
.pay-fig { font-size: 32px; color: var(--text); flex: 0 0 auto; }
.pay-done { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.pay-done > div { display: flex; flex-direction: column; gap: 12px; }
.pay-cash { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--text); }

.sec { padding: 40px 16px 0; display: flex; flex-direction: column; gap: 16px; }
/* What's on this truck (Kurtis, 2026-09-28): Ford's price build-up from the window sticker,
   a card per priced option with Ford's price on a chip, the no-charge items as chips, and the
   standard features collapsed. The feed's list (no sticker) uses the same cards, no prices.
   Phones: a receipt-style build-up, one card per row. 720px and up: the build-up as a row of
   boxes, two columns of cards. The section is about 830px wide even on a 1440px screen (the
   price card takes the right-hand column), so the cards stay at two columns there. */
.wot { gap: 20px; }
.wot-block { display: flex; flex-direction: column; gap: 10px; }
.wot-label { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.stk { padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-card); }
.stk-sum { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.stk-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 15px; color: var(--text-2); }
.stk-op { flex: 0 0 12px; text-align: center; font-weight: 700; color: var(--muted); }
.stk-box { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.stk-amt { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stk-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--rule); color: var(--text); font-weight: 700; }
.stk-total .stk-amt { font-family: var(--display); font-stretch: 78%; font-weight: 800; font-size: 26px; line-height: 1; }
.stk-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.stk .sticker-link { margin-top: -4px; align-self: flex-start; }
.opt-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.opt-card { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; }
.opt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.opt-name { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.opt-price { flex: 0 0 auto; padding: 2px 10px; border-radius: 999px; background: var(--tint); color: var(--navy); font-size: 14px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.opt-tag { margin: -4px 0 0; align-self: flex-start; padding: 2px 8px; border: 1px solid var(--rule); border-radius: 6px; font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--text-2); }
.opt-subs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.opt-subs li { position: relative; padding-left: 14px; overflow-wrap: anywhere; }
.opt-subs li::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--input); }
.opt-subs .opt-subs-more { color: var(--muted); }
.opt-subs .opt-subs-more::before { display: none; }
.opt-more > .opt-grid { margin-top: 8px; }
.more-open, .opt-more[open] .more-closed { display: none; }
.opt-more[open] .more-open { display: inline; }
.inc-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.inc-chip { padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text-2); overflow-wrap: anywhere; }
.std-groups { margin-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.std-h { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.std-group .feature-list { margin-top: 0; border-top: 1px solid var(--rule); }
@media (min-width: 720px) {
  .stk { padding: 20px; }
  .stk-sum { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 8px 6px; }
  .stk-row { padding: 0; align-items: center; gap: 6px; }
  .stk-row:first-child .stk-op { display: none; }
  .stk-op { flex-basis: auto; font-size: 18px; }
  .stk-box { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 10px 14px; border-radius: 12px; background: var(--panel); }
  .stk-lbl { font-size: 13px; font-weight: 600; color: var(--muted); }
  .stk-total { margin: 0; padding: 0; border: 0; }
  .stk-total .stk-box { background: var(--tint); }
  .stk-total .stk-lbl { color: var(--navy); }
  .stk-total .stk-amt { font-size: 22px; }
  .opt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.features summary {
  min-height: 44px; display: inline-flex; align-items: center; cursor: pointer;
  color: var(--navy); font-size: 15px; font-weight: 700; text-decoration: underline;
}
.feature-list {
  margin: 8px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px; font-size: 14px; color: var(--text-2);
}
.feature-list li { padding: 8px 0; border-bottom: 1px solid var(--rule); min-width: 0; overflow-wrap: anywhere; }
.vdp-figure { margin: 40px 0 0; aspect-ratio: 4 / 3; background: var(--well); overflow: hidden; }
.vdp-figure img { width: 100%; height: 100%; object-fit: cover; }
.specs { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--rule); }
.specs > div { padding: 12px 0; display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--rule); min-width: 0; }
.specs dt { font-size: 13px; color: var(--muted); }
.specs dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.specs .spec-vin { grid-column: 1 / -1; }
.vin { letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }

.visit-grid { display: flex; flex-direction: column; gap: 16px; }
.visit-addr { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.visit-hours { display: flex; flex-direction: column; gap: 8px; }
.hours { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.hours > div { display: flex; justify-content: space-between; gap: 12px; }
.hours dt { color: var(--text-2); }
.hours dd { margin: 0; font-weight: 600; color: var(--text); }
.visit-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.visit-btns .btn { padding: 0 8px; }

.mbar {
  position: sticky; bottom: 0; z-index: 6; margin-top: 48px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px; background: #FFFFFF;
  border-top: 1px solid var(--hair); box-shadow: 0 -6px 18px rgba(18,19,22,0.06);
  transition: transform 200ms ease-out;
}
.mbar.is-hidden { transform: translateY(110%); pointer-events: none; }
/* The price side opens the payment gate (2026-09-28): the price, then "See my payment". */
.mbar-price {
  flex: 1 1 auto; min-width: 0; min-height: 48px; margin: 0; padding: 0; border: 0; background: transparent;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  color: var(--text); font-family: inherit; text-align: left; cursor: pointer;
}
.mbar-line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.mbar-line .mbar-gst { font-size: 12px; }
.mbar-amt { font-size: 24px; color: var(--text); white-space: nowrap; }
.mbar-see { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.mbar-see .lock { width: 14px; height: 14px; flex: 0 0 auto; }
.mbar-call {
  flex: 0 0 auto; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--navy); border-radius: 12px; color: var(--navy);
}
/* On phones the button text may take two lines, so the price keeps its room */
.mbar-go {
  flex: 0 1 auto; max-width: 8em; height: 48px; padding: 0 14px; background: var(--navy); color: #FFFFFF;
  font-size: 15px; white-space: normal; line-height: 1.15;
}
.mbar-go:hover { background: var(--navy-hover); color: #FFFFFF; }
@media (min-width: 480px) { .mbar-go { max-width: none; white-space: nowrap; } }
/* Used, two prices: both prices across the top; See my payment, call and button underneath */
.mbar-two { flex-wrap: wrap; row-gap: 6px; padding-top: 8px; }
.mbar-prices {
  flex: 1 0 100%; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
  font-size: 13px; color: var(--text-2);
}
.mbar-prices strong { margin-left: 4px; font-family: var(--display); font-stretch: 78%; font-weight: 800; font-size: 20px; color: var(--text); }
.mbar-gst { color: var(--muted); }
.mbar-two .mbar-see { font-size: 14px; }
.mini { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mbar, .mini { transition: none; }
  .gal { scroll-behavior: auto; }
}
/* Narrow phones: the gate's row keeps its button beside "Your payment" (it wrapped under it at
   360 and 375px, 52px taller, and at 390px it fitted with 3px to spare). */
@media (max-width: 399.98px) {
  .pc-pay-row { column-gap: 8px; }
  .pc-pay-btn { padding: 0 10px; gap: 5px; font-size: 14px; }
}
@media (max-width: 379.98px) {
  .price-block, .actions { padding-left: 16px; padding-right: 16px; }
  .price-reviews { padding-left: 16px; padding-right: 16px; }
  .pc-pay-blur .display { font-size: 22px; }
}
@media (max-width: 380px) {
  .mbar-go { padding: 0 10px; font-size: 14px; }
  .mbar-amt { font-size: 22px; }
  .duo-amt { font-size: 34px; }
}
/* Six-figure prices on the narrowest phones */
@media (max-width: 359.98px) {
  .mbar-amt { font-size: 20px; }
  .mbar-prices { gap: 2px 10px; }
  .mbar-prices strong { font-size: 18px; }
  .duo-amt { font-size: 30px; }
  .price-duo { gap: 12px; }
  /* 320px phones (iPhone SE first generation): the 2 x 2 tiles are 139px wide, so the
     icon and the space around it get smaller and "Book service" stays on one line. The
     site's first-screen rule is set for 360px and up (README). */
  .tile { padding: 8px 6px; gap: 6px; font-size: 15px; }
  .tile svg { width: 20px; height: 20px; }
}

/* ---------- Vehicle page, desktop (1440 design) ---------- */
@media (min-width: 1024px) {
  .crumbs {
    max-width: 1440px; margin: 0 auto; padding: 24px var(--gutter) 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--muted);
  }
  .crumbs a { color: var(--muted); text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
  .crumbs a:hover { color: var(--text); text-decoration: underline; }
  .crumbs [aria-current="page"] { color: var(--text); font-weight: 600; }
  .back-row { display: none; }

  .vdp {
    max-width: 1440px; padding: 16px var(--gutter) 80px;
    display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 40px; row-gap: 48px;
  }
  .vdp-gallery { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 8px; }
  .vdp-main { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 48px; }
  .vdp-rail { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 12px; }
  .gal-frame { border-radius: 16px; overflow: hidden; }
  /* Short laptop screens: the photo gives up a little height so its Window sticker button
     stays on the first screen (1536 x 730, 1366 x 657), now that View window sticker in the
     price card sits under the actions (2026-09-28 review). Full 4:3 on taller screens. */
  .vdp-gallery .gal { width: 100%; max-height: max(360px, calc(100svh - 190px)); }
  .gal-over { left: 16px; right: 16px; bottom: 16px; gap: 12px; }
  .pill-btn { padding: 0 18px; }
  .counter { min-height: 30px; padding: 4px 12px; }
  .thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .thumb {
    position: relative; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 12px; overflow: hidden;
    background: var(--well); cursor: pointer;
  }
  .thumb img { width: 100%; height: 100%; object-fit: cover; }
  .thumb[aria-current="true"] { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--navy); }
  .thumb-more {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(12,42,102,0.72); color: #FFFFFF; font-size: 15px; font-weight: 700;
  }

  .vdp-price { background: #FFFFFF; border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; scroll-margin-top: 24px; }
  .vdp-head { padding: 24px 24px 20px; gap: 8px; border-bottom: 1px solid var(--hair); }
  .vdp-title { font-size: 40px; letter-spacing: -0.012em; }
  .price-card { margin: 0; border-radius: 0; box-shadow: none; }
  .price-block { padding: 20px 24px; }
  .price-hero { font-size: 60px; }
  .actions { padding: 20px 24px 24px; }
  .pay { margin: 0; scroll-margin-top: 24px; }
  .pay-top { padding: 20px 24px 0; }
  .pay-form { padding: 16px 24px 24px; }
  .pay-done { padding: 16px 24px 24px; }
  .pay-fig { font-size: 34px; }

  .mini {
    position: sticky; top: 24px; margin-top: 12px; padding: 16px 20px;
    display: flex; align-items: center; gap: 16px; background: #FFFFFF; border-radius: 16px;
    box-shadow: var(--shadow-card); transition: opacity 180ms ease-out;
  }
  .mini.is-hidden { opacity: 0; visibility: hidden; }
  .mini-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .mini-lbl { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mini-amt { font-size: 28px; color: var(--text); }
  .mini-gst { font-size: 12px; color: var(--muted); }
  .mini-two { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-2); }
  .mini-two strong { margin-left: 4px; font-family: var(--display); font-stretch: 78%; font-weight: 800; font-size: 22px; color: var(--text); }
  .mini-go { flex: 0 0 auto; height: 48px; padding: 0 18px; background: var(--navy); color: #FFFFFF; font-size: 15px; }
  .mini-go:hover { background: var(--navy-hover); color: #FFFFFF; }

  .sec { padding: 0; }
  .feature-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
  .std-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .std-group .feature-list { grid-template-columns: minmax(0, 1fr); }
  .vdp-figure { display: none; }
  .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
  .specs > div { padding: 16px 0; }
  .visit-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; align-items: start;
    border-top: 1px solid var(--rule); padding-top: 20px;
  }
  .visit-btns { grid-template-columns: 1fr; }
  .hours { gap: 6px; }
  .mbar { display: none; }
}
@media (min-width: 1280px) {
  .vdp { grid-template-columns: minmax(0, 1fr) 432px; column-gap: 48px; }
}
@media (min-width: 1440px) { .std-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Window sticker link in the price card (most clicked button on the current site). */
.sticker-link { min-height: 44px; margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
/* In the price card, under the actions (2026-09-28 review); the photo's Window sticker button
   is on the first screen. */
.sticker-row { margin: -12px 0 0; padding: 0 20px 8px; }
.sticker-row .sticker-link { margin-top: 0; }
@media (max-width: 379.98px) { .sticker-row { padding-left: 16px; padding-right: 16px; } }
@media (min-width: 1024px) { .sticker-row { padding: 0 24px 12px; } }

/* Book service: the scheduler inside our own page (2026-09-27). */
.book-sec { padding-top: 8px; padding-bottom: 24px; }
.book-frame { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(12,42,102,0.06), 0 10px 28px -10px rgba(12,42,102,0.18); scroll-margin-top: 72px; }
.book-frame iframe { display: block; width: 100%; height: 1350px; border: 0; }
.book-fallback { margin: 12px 0 0; font-size: 14px; color: var(--muted, #5E636B); }
@media (min-width: 720px) { .book-frame iframe { height: 1100px; } }