/* DUAL-TECH prototype — shared styles */

/* Web fonts: hosted with the site so every phone and computer sees the same type (Barlow, SIL Open Font License) */
@font-face { font-family: "Barlow"; src: url("fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --bg: #000;
  --bg-2: #0d0d0d;
  --panel: #141414;
  --panel-2: #1b1b1b;
  --line: #2a2a2a;
  --text: #fff;
  --muted: #fff;
  --orange: #ff8201;
  --orange-hot: #ff9a33;
  --orange-deep: #d96d00;
  --radius: 4px;
  --wrap: 1240px;
  --head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--body); font-size: 17px; font-weight: 600; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, option { font-weight: 600; }   /* they don't inherit the body weight on their own */
::selection { background: var(--orange); color: #000; }

h1, h2, h3, h4, .eyebrow, .btn, .nav-links a, .stat b, .label {
  font-family: var(--head); font-stretch: condensed; text-transform: uppercase; letter-spacing: .01em;
}
h1 { font-size: clamp(44px, 8vw, 104px); line-height: .92; font-weight: 700; }
h2 { font-size: clamp(34px, 5vw, 60px); line-height: .98; font-weight: 700; }
h3 { font-size: 26px; line-height: 1.05; font-weight: 700; }
h4 { font-size: 15px; letter-spacing: .14em; color: var(--muted); font-weight: 600; }
.o { color: var(--orange); }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--orange); font-size: 15px; letter-spacing: .22em; font-weight: 600; margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 34px; height: 3px; background: var(--orange); }
.lead { font-size: 20px; color: #fff; max-width: 640px; }
.muted { color: var(--muted); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
section { padding: 110px 0; position: relative; }
section.tight { padding: 70px 0; }
.bg-2 { background: var(--bg-2); }
.head { margin-bottom: 56px; }
.head.center { text-align: center; }
.head.center .eyebrow { justify-content: center; }
.head.center .lead { margin: 18px auto 0; }
.head .lead { margin-top: 18px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; font-size: 18px; font-weight: 700; letter-spacing: .08em; border: 2px solid var(--orange); background: var(--orange); color: #000; border-radius: var(--radius); transition: background .2s, color .2s, transform .2s; cursor: pointer; }
.btn:hover { background: var(--orange-hot); border-color: var(--orange-hot); transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--text); border-color: #fff; }
.btn.ghost:hover { border-color: var(--orange); color: var(--orange); }
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(4px); }
.btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* "Toll-free" / "Local" in front of each number, so callers know which is free.
   Dropped from the narrow top bar, where the phone call bar carries them. */
.ph-lbl { font-size: .82em; letter-spacing: .04em; }
@media (max-width: 560px) { .topbar .ph-lbl { display: none; } }

/* Sticky call bar, phones only. The top bar's phone number scrolls out of sight
   almost immediately on a phone, so this keeps Call and Get a Quote within
   thumb reach on every page. Hidden on anything wider, where the header CTAs
   are already visible. env(safe-area-inset-bottom) keeps it clear of the
   home indicator on newer iPhones. */
.callbar { display: none; }
@media (max-width: 760px) {
  .callbar {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--line);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .callbar a {
    display: flex; align-items: center; justify-content: center;
    padding: 16px 4px;
    font-family: var(--head); font-stretch: condensed; font-weight: 700;
    text-transform: uppercase; letter-spacing: .02em; font-size: 13px;
    white-space: nowrap;
    background: #141414; color: #fff;
  }
  .callbar a.cb-quote { background: var(--orange); color: #000; }
  .callbar a { flex-direction: column; line-height: 1.15; padding-top: 10px; padding-bottom: 10px; }
  .callbar a small { display: block; font-size: 10px; letter-spacing: .1em; margin-bottom: 3px; }
  /* so the footer and page bottom are never hidden behind the bar */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* A slow orange pulse on the hero's "See In-Stock Trucks" button, to pull the
   eye toward the inventory. Hovering stops it so the normal hover still reads,
   and it holds steady orange for anyone who asks for less motion. */
@keyframes btn-flash {
  0%, 100% { border-color: #fff; color: var(--text); box-shadow: none; }
  50%      { border-color: var(--orange); color: var(--orange); box-shadow: 0 0 22px rgba(255, 130, 1, .30); }
}
.btn.ghost.flash { animation: btn-flash 2s ease-in-out infinite; }
.btn.ghost.flash:hover { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .btn.ghost.flash { animation: none; border-color: var(--orange); color: var(--orange); }
}

/* Top bar + nav */
.topbar { background: var(--orange); color: #000; font-family: var(--head); font-stretch: condensed; text-transform: uppercase; font-size: 15px; letter-spacing: .1em; font-weight: 600; }
.topbar .wrap { display: flex; justify-content: space-between; gap: 16px; padding-top: 13px; padding-bottom: 13px; }
.topbar a:hover { text-decoration: underline; }
.site-header { position: sticky; top: 0; z-index: 50; background: #000d; backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 112px; gap: 24px; }
.brand img { height: 72px; width: auto; }
.nav-links { display: flex; gap: 4px; }
.nav-links a { padding: 8px 13px; font-size: 17px; font-weight: 600; letter-spacing: .08em; color: #fff; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px; background: var(--orange); transform: scaleX(0); transition: transform .2s; }
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-cta { padding: 11px 20px; font-size: 16px; }
.burger { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 10px; right: 10px; height: 2px; background: #fff; transition: .25s; }
.burger span:nth-child(1) { top: 14px; } .burger span:nth-child(2) { top: 21px; } .burger span:nth-child(3) { top: 28px; }
.nav-open .burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-open .burger span:nth-child(2) { opacity: 0; }
.nav-open .burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* Hero */
.hero { position: relative; min-height: calc(100vh - 116px); min-height: calc(100svh - 116px); display: flex; align-items: flex-end; overflow: hidden; padding: 0; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; animation: drift 24s ease-out both; }
@keyframes drift { from { transform: scale(1.14); } to { transform: scale(1); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0009 0%, #0004 40%, #0000 65%), linear-gradient(0deg, #000 0%, #0000 25%); }
.hero .wrap { position: relative; z-index: 2; padding-bottom: 90px; width: 100%; }
.hero h1 { max-width: 900px; margin-bottom: 26px; }
.hero .lead { margin-bottom: 38px; }
.scroll-cue { position: absolute; z-index: 2; right: 28px; bottom: 34px; font-family: var(--head); font-stretch: condensed; letter-spacing: .3em; font-size: 13px; color: var(--muted); writing-mode: vertical-rl; display: flex; align-items: center; gap: 12px; }
.scroll-cue::after { content: ""; width: 2px; height: 60px; background: linear-gradient(var(--orange), transparent); }

/* Page banner */
.banner { position: relative; padding: 170px 0 80px; overflow: hidden; border-bottom: 3px solid var(--orange); }
.banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #000 0%, #0008 18%, #0004 45%, #0001 75%, #0000 100%); }
.banner .wrap { position: relative; z-index: 2; }
.banner h1 { font-size: clamp(48px, 7vw, 88px); margin-bottom: 18px; }

/* Stats strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.stat { padding: 38px 28px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-size: clamp(40px, 5vw, 62px); line-height: 1; color: var(--orange); font-weight: 700; }
.stat span { color: var(--muted); font-size: 15px; text-transform: uppercase; letter-spacing: .12em; }

/* Grids + cards */
.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--panel); border: 1px solid var(--orange); border-radius: var(--radius); overflow: hidden; transition: border-color .25s, transform .25s; display: flex; flex-direction: column; }
.card:hover { border-color: var(--orange-hot); transform: translateY(-4px); }
.card .ph { aspect-ratio: 4/3; overflow: hidden; background: #111; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.card:hover .ph img { transform: scale(1.06); }
.card .body { padding: 24px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.card .body p { color: var(--muted); font-size: 16px; margin-top: 10px; }
.card .more { margin-top: auto; padding-top: 18px; color: var(--orange); font-family: var(--head); font-stretch: condensed; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }

/* The call to action on each in-stock card is a bordered button, shaped like
   the ghost buttons elsewhere, and pulsing so the eye lands on it. Scoped to
   .inv so the "View Specs" links on the home page stay calm. Hover holds it
   steady, and so does a reduced-motion preference. */
@keyframes more-flash {
  0%, 100% { border-color: #fff;           color: #fff;           box-shadow: none; }
  50%      { border-color: var(--orange);  color: var(--orange);  box-shadow: 0 0 20px rgba(255, 130, 1, .38); }
}
.card.inv .kv { margin-bottom: 18px; }
.card.inv .more {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: auto;
  padding: 13px 24px;
  border: 2px solid var(--orange);
  border-radius: var(--radius);
  font-size: 18px; letter-spacing: .1em; font-weight: 700;
  animation: more-flash 1.6s ease-in-out infinite;
}
.card.inv:hover .more,
.card.inv .more:hover { animation: none; border-color: var(--orange-hot); color: var(--orange-hot); }
@media (prefers-reduced-motion: reduce) { .card.inv .more { animation: none; } }
.label { display: inline-block; font-size: 13px; letter-spacing: .16em; font-weight: 600; color: var(--orange); margin-bottom: 8px; }
.cap { font-family: var(--head); font-stretch: condensed; font-size: 46px; line-height: 1; font-weight: 700; color: #fff; }
.cap small { font-size: 18px; color: var(--muted); letter-spacing: .1em; margin-left: 4px; }

/* Split feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.split.flip > :first-child { order: 2; }
.split .media { position: relative; }
.split .media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
.split .media::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 2px solid var(--orange); border-radius: var(--radius); z-index: -1; }
.split.flip .media::before { inset: 18px 18px -18px -18px; }
.split p { color: #fff; margin-top: 18px; }
.checks { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.checks li { padding-left: 34px; position: relative; color: #fff; }
.checks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 18px; height: 10px; border-left: 3px solid var(--orange); border-bottom: 3px solid var(--orange); transform: rotate(-45deg); }

/* Quad rail callout */
.quad { position: relative; overflow: hidden; }
.quad > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.quad::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 50%, #0000 0%, #000 75%); z-index: 1; }
.quad .wrap { position: relative; z-index: 2; }
.big-num { font-family: var(--head); font-stretch: condensed; font-weight: 700; font-size: clamp(110px, 18vw, 240px); line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--orange); }

/* Marquee */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--orange); color: #000; padding: 18px 0; }
.marquee-track { display: flex; gap: 60px; width: max-content; animation: slide 38s linear infinite; font-family: var(--head); font-stretch: condensed; text-transform: uppercase; font-size: 30px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.marquee-track span::after { content: "★"; margin-left: 60px; font-size: 20px; vertical-align: middle; }
@keyframes slide { to { transform: translateX(-50%); } }

/* CTA band */
.cta { position: relative; padding: 120px 0; overflow: hidden; text-align: center; }
.cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#000c, #000a, #000d); }
.cta .wrap { position: relative; z-index: 2; }
.cta h2 { font-size: clamp(40px, 6vw, 76px); margin-bottom: 18px; }
.cta .lead { margin: 0 auto 36px; }
.cta .btns { justify-content: center; }
.slogan { font-family: var(--head); font-stretch: condensed; text-transform: uppercase; color: var(--muted); letter-spacing: .14em; margin-top: 30px; font-size: 15px; }

/* Spec tables (models) */
.model { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: clip; margin-bottom: 36px; scroll-margin-top: 142px; }
.model.flip .model-media { order: 2; }
.model-media { position: relative; min-height: 420px; }
.model-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.model-media .badge { position: absolute; left: 20px; top: 20px; background: var(--orange); color: #000; font-family: var(--head); font-stretch: condensed; text-transform: uppercase; font-weight: 700; letter-spacing: .1em; padding: 6px 12px; font-size: 14px; border-radius: 2px; }
.model-body { padding: 44px 44px 40px; }
.model-body h2 { font-size: clamp(40px, 4.5vw, 58px); }
.model-body > p { color: #fff; margin: 14px 0 24px; }
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 26px; }
.specs div { background: var(--panel-2); padding: 14px 16px; }
.specs b { display: block; font-family: var(--head); font-stretch: condensed; font-size: 26px; line-height: 1.05; color: #fff; }
.specs span { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.feat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feat-cols h4 { margin-bottom: 8px; color: var(--orange); }
.feat-cols ul { list-style: none; font-size: 15px; color: #fff; display: grid; gap: 4px; }
.feat-cols li::before { content: "— "; color: var(--orange); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.tabs a { padding: 10px 18px; border: 1px solid #fff; border-radius: var(--radius); font-family: var(--head); font-stretch: condensed; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: #fff; transition: .2s; }
.tabs a:hover { border-color: var(--orange); color: var(--orange); }

/* Compare table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.compare { width: 100%; border-collapse: collapse; min-width: 720px; }
.compare th, .compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); }
.compare th { font-family: var(--head); font-stretch: condensed; text-transform: uppercase; letter-spacing: .08em; font-size: 20px; background: var(--panel-2); }
.compare th:first-child, .compare td:first-child { color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: .1em; }
.compare tr:last-child td { border-bottom: 0; }
.compare td { background: var(--panel); }
.compare .hl { color: var(--orange); font-weight: 600; }

/* Gallery */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.filters button { background: transparent; color: #fff; border: 1px solid #fff; padding: 10px 18px; border-radius: var(--radius); font-family: var(--head); font-stretch: condensed; text-transform: uppercase; letter-spacing: .1em; font-size: 16px; font-weight: 600; cursor: pointer; transition: .2s; }
.filters button:hover { border-color: var(--orange); color: #fff; }
.filters button.on { background: var(--orange); border-color: var(--orange); color: #000; }
.masonry { columns: 3; column-gap: 16px; }
.masonry figure { break-inside: avoid; margin-bottom: 16px; position: relative; overflow: hidden; border-radius: var(--radius); cursor: zoom-in; background: #111; }
.masonry img { width: 100%; transition: transform .5s, opacity .3s; }
.masonry figure:hover img { transform: scale(1.04); }
.masonry figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px; background: linear-gradient(transparent, #000d); font-family: var(--head); font-stretch: condensed; text-transform: uppercase; letter-spacing: .08em; font-size: 15px; opacity: 0; transition: opacity .25s; }
.masonry figure:hover figcaption { opacity: 1; }
.masonry figure.hide { display: none; }
.masonry.cols { columns: auto; display: flex; gap: 16px; align-items: flex-start; }   /* site.js fills these left to right */
.masonry.cols .m-col { flex: 1; min-width: 0; }
.masonry img[width] { height: auto; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: #000f; display: none; align-items: center; justify-content: center; padding: 30px; }
.lightbox.show { display: flex; }
.lightbox img { max-width: 100%; max-height: 86vh; object-fit: contain; }
.lightbox p { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-family: var(--head); font-stretch: condensed; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.lb-btn { position: absolute; background: #0008; border: 1px solid #fff; color: #fff; width: 52px; height: 52px; border-radius: 50%; font-size: 24px; cursor: pointer; }
.lb-btn:hover { border-color: var(--orange); color: var(--orange); }
.lb-close { top: 20px; right: 20px; } .lb-prev { left: 20px; top: 50%; } .lb-next { right: 20px; top: 50%; }

/* Inventory */
.inv .ph { position: relative; }
.inv .status { position: absolute; top: 14px; left: 14px; background: var(--orange); color: #000; font-family: var(--head); font-stretch: condensed; text-transform: uppercase; font-weight: 700; letter-spacing: .1em; font-size: 13px; padding: 5px 10px; border-radius: 2px; }
.inv .status.used { background: #fff; }
.inv .status.sold { background: #555; color: #fff; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 15px; margin: 14px 0 4px; }
.kv dt { color: var(--muted); text-transform: uppercase; font-size: 13px; letter-spacing: .1em; padding-top: 3px; }
.stock { font-family: var(--head); font-stretch: condensed; color: var(--muted); letter-spacing: .1em; font-size: 14px; }

/* Events */
.event { display: grid; grid-template-columns: 150px 1fr; gap: 30px; align-items: center; background: var(--panel); border: 1px solid var(--orange); border-left: 4px solid var(--orange); border-radius: var(--radius); padding: 26px 30px; margin-bottom: 16px; transition: .2s; }
.event:hover { background: var(--panel-2); }
.event .when b { display: block; font-family: var(--head); font-stretch: condensed; font-size: 34px; line-height: 1; text-transform: uppercase; color: var(--orange); }
.event .when span { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.event .where { color: var(--muted); margin-top: 4px; }
.event .booth { color: var(--orange); }
.event .hours { margin-top: 6px; font-size: 15px; }
.event .show-link { display: inline-block; margin-top: 10px; color: var(--orange); font-family: var(--head); font-stretch: condensed;
                    text-transform: uppercase; letter-spacing: .1em; font-size: 15px; }
.event .show-link:hover { color: var(--orange-hot); }
.event[hidden] { display: none; }
.no-shows a { color: var(--orange); }

/* Dealers */
.dealer { min-width: 0; overflow-wrap: anywhere; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; transition: .2s; }
.dealer:hover { border-color: var(--orange); }
.dealer .state { font-family: var(--head); font-stretch: condensed; color: var(--orange); letter-spacing: .16em; text-transform: uppercase; font-size: 14px; font-weight: 600; }
.dealer h3 { margin: 6px 0 12px; }
.dealer a.tel { font-family: var(--head); font-stretch: condensed; font-size: 30px; font-weight: 700; color: #fff; }
.dealer a.tel:hover { color: var(--orange); }

/* Forms */
.form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--head); font-stretch: condensed; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; background: #0a0a0a; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); padding: 14px 16px; font: inherit; font-size: 16px; transition: border-color .2s; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); }
.info-block { border-left: 3px solid var(--orange); padding: 4px 0 4px 22px; margin-bottom: 30px; }
.info-block h4 { margin-bottom: 6px; }
.info-block p, .info-block a { font-size: 20px; }
.info-block a:hover { color: var(--orange); }
.info-block .info-hours { font-size: 16px; color: var(--muted); margin-top: 10px; line-height: 1.45; }
.cta .visit-line { margin-top: 14px; font-size: 16px; color: var(--muted); }
.cta .visit-line a { color: var(--text); }
.cta .visit-line a:hover { color: var(--orange); }
.cta .visit-line .sep { margin: 0 10px; color: var(--orange); }
@media (max-width: 600px) { .cta .visit-line .sep { display: block; height: 4px; overflow: hidden; color: transparent; } }
.map { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; filter: grayscale(1) invert(.92) contrast(.9); }
.map iframe { width: 100%; height: 360px; border: 0; display: block; }

/* Timeline */
.timeline { position: relative; display: grid; gap: 34px; padding-left: 40px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--orange), var(--line)); }
.timeline .step { position: relative; }
.timeline .step::before { content: ""; position: absolute; left: -38px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 3px solid var(--orange); }
.timeline .step p { color: var(--muted); margin-top: 6px; }
.timeline .num { font-family: var(--head); font-stretch: condensed; color: var(--orange); letter-spacing: .14em; font-size: 14px; font-weight: 600; }

/* Footer */
.site-footer { background: #050505; border-top: 3px solid var(--orange); padding: 80px 0 0; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.foot-grid img { height: 64px; width: auto; margin-bottom: 20px; }
.foot-grid p { color: var(--muted); font-size: 15px; }
.foot-grid h4 { color: #fff; margin-bottom: 16px; }
.foot-grid ul { list-style: none; display: grid; gap: 8px; }
.foot-grid ul a { color: var(--muted); font-size: 15px; }
.foot-grid ul a:hover { color: var(--orange); }
.foot-bottom { margin-top: 60px; border-top: 1px solid var(--line); padding: 22px 0; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: #fff; font-size: 14px; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-bg img, .marquee-track { animation: none; }
}

/* Responsive */
@media (max-width: 1080px) {
  .nav-links, .nav-cta { display: none; }
  .burger { display: block; }
  .nav-open .nav-links { display: flex; flex-direction: column; position: absolute; top: 112px; left: 0; right: 0; background: #000; border-bottom: 3px solid var(--orange); padding: 12px 20px 20px;
                         max-height: calc(100vh - 163px); max-height: calc(100dvh - 163px); overflow-y: auto; }   /* short screens: the open menu scrolls */
  .nav-open .nav-links a { padding: 14px 6px; font-size: 22px; border-bottom: 1px solid var(--line); }
  .nav-open .nav-links a::after { display: none; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .model, .model.flip { grid-template-columns: 1fr; }
  .model.flip .model-media { order: 0; }
  .model-media { min-height: 0; aspect-ratio: 16/10; }
}
@media (max-width: 820px) {
  body { font-size: 16px; }
  section { padding: 76px 0; }
  .wrap { padding: 0 16px; }
  .topbar .hide-sm { display: none; }
  .site-header .wrap { height: 70px; }
  .nav-open .nav-links { top: 70px; max-height: calc(100vh - 121px); max-height: calc(100dvh - 121px); }
  .brand img { height: 40px; }
  .split, .split.flip { grid-template-columns: 1fr; gap: 44px; }
  .split.flip > :first-child { order: 0; }
  .split .media::before { inset: 12px -8px -12px 12px; }
  .split.flip .media::before { inset: 12px 12px -12px -8px; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .masonry { columns: 2; column-gap: 10px; }
  .masonry.cols { gap: 10px; }
  .masonry figure { margin-bottom: 10px; }
  .event { grid-template-columns: 1fr; gap: 12px; }
  .form { padding: 24px; }
  .form .row { grid-template-columns: 1fr; gap: 0; }
  .model-body { padding: 28px 22px; }
  .specs { grid-template-columns: 1fr 1fr; }
  .feat-cols { grid-template-columns: 1fr; }
  .hero .wrap { padding-bottom: 60px; }
  .scroll-cue { display: none; }
  .banner { padding: 120px 0 56px; }
}
@media (max-width: 520px) {
  .g4 { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .masonry { columns: 1; }
  .btn { padding: 14px 22px; font-size: 16px; }
}

/* Social icons */
.social { display: inline-flex; gap: 10px; align-items: center; }
.social a { display: inline-flex; }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.tb-right { display: inline-flex; align-items: center; gap: 0; }
.tb-social { margin-left: 16px; padding-left: 16px; border-left: 1px solid #0004; }
.tb-social svg { width: 15px; height: 15px; }
.foot-social { margin-top: 22px; gap: 12px; }
.foot-social a { width: 42px; height: 42px; border: 1px solid #fff; border-radius: 50%; align-items: center; justify-content: center; color: #fff; transition: .2s; }
.foot-social a:hover { border-color: var(--orange); color: var(--orange); }

/* Video */
.hero-bg video { width: 100%; height: 100%; object-fit: cover; }
.yt { position: relative; aspect-ratio: 16/9; background: #111 center/cover no-repeat; cursor: pointer; border-radius: var(--radius); overflow: hidden; }
.yt::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #000c, #0002 60%); transition: background .25s; }
.yt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50%/34px no-repeat; transition: transform .25s; box-shadow: 0 0 0 8px #ff820133; }
.yt:hover::after { transform: scale(1.1); }
.yt:hover::before { background: linear-gradient(0deg, #000a, #0000 60%); }
.yt.playing::before, .yt.playing::after { display: none; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-card h3 { font-size: 21px; margin-top: 14px; }
.vid-card .tag { font-family: var(--head); font-stretch: condensed; text-transform: uppercase; letter-spacing: .14em; color: var(--orange); font-size: 13px; margin-top: 4px; }
.social-cards .dealer { display: flex; flex-direction: column; gap: 8px; }
.social-cards svg { width: 40px; height: 40px; fill: var(--orange); }
@media (max-width: 820px) { .tb-social { display: none; } }

/* YouTube Shorts */
.yt.short { aspect-ratio: 9/16; }
.shorts { grid-template-columns: repeat(4, 1fr); }
.shorts .vid-card h3 { font-size: 18px; }
@media (max-width: 1080px) { .shorts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .shorts { gap: 12px; } .shorts .vid-card h3 { font-size: 15px; } }

/* Inventory full-spec disclosure */
.specs-more { margin: 10px 0 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.specs-more summary { cursor: pointer; font-family: var(--head); font-stretch: condensed; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; color: var(--orange); list-style: none; }
.specs-more summary::-webkit-details-marker { display: none; }
.specs-more summary::before { content: "+ "; }
.specs-more[open] summary::before { content: "− "; }
.specs-more .kv { margin-top: 10px; }

/* Video in place of images (factory page) */
.cta > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-video::after { background: linear-gradient(#0007, #0005, #0008); }
/* every background video plays brighter than the file itself */
.banner > video, .hero-bg video, .cta > video { filter: brightness(1.18) saturate(1.08); }
.cta-video h2, .cta-video p, .cta-video .eyebrow { text-shadow: 0 2px 14px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.7); }
.card .ph video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Stats strip: center number + label in each box */
.stat { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
@media (max-width: 480px) { .stat { padding: 30px 10px; } }   /* room for "Quad Rail" on one line */

/* Subscribe / follow pop-up for social links */
.social-modal { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 20px; background: #000c; backdrop-filter: blur(4px); }
.social-modal.show { display: flex; animation: smFade .2s ease; }
@keyframes smFade { from { opacity: 0; } to { opacity: 1; } }
.sm-box { position: relative; width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--brand, var(--orange)); border-radius: 6px; padding: 38px 30px 26px; text-align: center; animation: smPop .25s ease; }
@keyframes smPop { from { transform: translateY(14px) scale(.97); } to { transform: none; } }
.sm-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--brand, var(--orange)); display: flex; align-items: center; justify-content: center; }
.sm-icon svg { width: 32px; height: 32px; fill: #fff; }
.sm-title { font-size: 26px; margin-bottom: 10px; }
.sm-msg { color: #fff; margin-bottom: 24px; }
.sm-go { width: 100%; justify-content: center; }
.sm-no { margin-top: 12px; background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; }
.sm-no:hover { color: #fff; }
.sm-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; }
.sm-x:hover { color: #fff; }

/* Page banner with a looping video slideshow instead of a photo */
.banner > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* brighter videos: a soft shadow keeps the words readable on top of them */
.banner h1, .banner p, .banner .eyebrow, .hero h1, .hero .lead, .hero .eyebrow { text-shadow: 0 2px 14px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.7); }
.banner .eyebrow, .hero .eyebrow, .cta-video .eyebrow { text-shadow: 0 1px 3px #000, 0 0 10px #000, 0 0 18px rgba(0,0,0,.8);
  background: rgba(0,0,0,.55); padding: 6px 12px; border-radius: 3px; }
.banner-video { padding-top: 200px; padding-bottom: 100px; }
@media (max-width: 820px) { .banner-video { padding-top: 140px; padding-bottom: 64px; } }

/* Five-up lineup row (home "Pick Your Weight Class") */
.g5 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.g5 .card .body { padding: 20px 18px 24px; }
.g5 .cap { font-size: 38px; }
.g5 h3 { font-size: 23px; }
@media (max-width: 820px) { .g5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .g5 { grid-template-columns: 1fr; } }

/* Local video pop-up player (e.g. sidepuller "Watch It Work") */
.video-modal { position: fixed; inset: 0; z-index: 320; display: none; align-items: center; justify-content: center; padding: 20px; background: #000e; }
.video-modal.show { display: flex; animation: smFade .2s ease; }
.vm-box { position: relative; width: 100%; max-width: 1100px; }
.video-modal.vertical .vm-box { max-width: min(420px, calc((100vh - 60px) * 9 / 16)); }
.vm-box video { display: block; width: 100%; max-height: calc(100vh - 60px); background: #000; border-radius: 6px; border-top: 4px solid var(--orange); }
.vm-x { position: absolute; top: -14px; right: -14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: var(--orange); color: #000; border: 0; font-size: 18px; font-weight: 700; cursor: pointer; }
/* Poster tile for a local video (Videos page) — reuses the .yt play-button look */
.local-video { position: relative; background: #111 center/cover no-repeat; cursor: pointer; border-radius: var(--radius); overflow: hidden; }

/* Jump links (e.g. Watch It Work -> videos.html#rollbacks) land below the sticky header */
section[id] { scroll-margin-top: 132px; }
.local-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }

/* Contact form: "Build Your Deck" dropdowns + multi-select options */
.build-box { border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: var(--radius); padding: 20px 20px 4px; margin: 4px 0 20px; background: #0f0f0f; }
.build-title { font-family: var(--head); font-stretch: condensed; text-transform: uppercase; letter-spacing: .12em; font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.build-title span { color: var(--muted); font-weight: 600; font-size: 13px; letter-spacing: .08em; }
.opt-drop { position: relative; }
.opt-drop summary { list-style: none; cursor: pointer; background: #0a0a0a; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 40px 14px 16px; color: var(--text); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opt-drop summary::-webkit-details-marker { display: none; }
.opt-drop summary::after { content: "▾"; position: absolute; right: 16px; top: 13px; color: var(--muted); }
.opt-drop[open] summary { border-color: var(--orange); }
.opt-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 300px; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--orange); border-radius: var(--radius); padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; box-shadow: 0 12px 30px #000a; }
.opt-list label { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 3px; font-size: 15px; color: #fff; cursor: pointer; text-transform: none; letter-spacing: 0; font-family: var(--body); margin: 0; }
.opt-list label:hover { background: #262626; }
.opt-list input { width: 16px; height: 16px; accent-color: var(--orange); }
@media (max-width: 820px) { .opt-list { grid-template-columns: 1fr; } }

/* Header: two quote buttons (truck + parts) */
.nav-ctas { display: flex; gap: 8px; flex-shrink: 0; }
.nav-ctas .nav-cta { padding: 10px 14px; font-size: 14px; white-space: nowrap; }
.site-header .wrap { gap: 16px; }
@media (max-width: 1360px) { .nav-links a { padding: 8px 9px; font-size: 16px; } .nav-links a::after { left: 9px; right: 9px; } }
@media (max-width: 1080px) { .nav-ctas { display: none; } }
/* In the mobile menu, show both quote links at the bottom */
.nav-links .m-quote { display: none; }
@media (max-width: 1080px) { .nav-open .nav-links .m-quote { display: block; color: var(--orange); } }

/* Parts quote: description box with photo upload underneath */
.desc-box { border: 1px solid var(--line); border-radius: var(--radius); background: #0a0a0a; overflow: hidden; transition: border-color .2s; }
.desc-box:focus-within { border-color: var(--orange); }
.desc-box textarea { border: 0 !important; border-radius: 0; background: transparent; min-height: 120px; }
.photo-drop { border-top: 1px dashed #333; padding: 12px 14px; transition: background .2s; }
.photo-drop.drag { background: #1d1409; }
.photo-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.field .photo-btn, .photo-btn { display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 14px; color: var(--muted); }
.photo-btn b { color: var(--orange); font-weight: 600; }
.photo-btn svg { width: 30px; height: 30px; flex-shrink: 0; fill: var(--orange); }
.photo-btn:hover span { color: #fff; }
.photo-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-drop.has-photos .photo-thumbs { margin-top: 12px; }
.photo-thumb { position: relative; width: 84px; height: 84px; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumb button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #000c; color: #fff; font-size: 12px; cursor: pointer; line-height: 22px; padding: 0; }
.photo-thumb button:hover { background: var(--orange); color: #000; }

/* Number counter (extra pylon / bed lights) */
.counter { display: flex; align-items: center; gap: 0; }
.counter input { width: 64px !important; text-align: center; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; -moz-appearance: textfield; font-weight: 700; }
.counter input::-webkit-outer-spin-button, .counter input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cnt-btn { width: 48px; height: 50px; background: #1c1c1c; border: 1px solid var(--line); color: var(--text); font-size: 22px; font-weight: 700; cursor: pointer; line-height: 1; transition: background .15s, color .15s; }
.cnt-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.cnt-btn:nth-of-type(2) { border-radius: 0 var(--radius) var(--radius) 0; }
.cnt-btn:hover { background: var(--orange); color: #000; border-color: var(--orange); }
.cnt-hint { margin-left: 12px; color: var(--muted); font-size: 14px; }
.counter.has-count input { color: var(--orange); }

/* Keep grid/flex columns from stretching past the screen when their content is long */
.split > *, .row > *, .form { min-width: 0; }
.opt-drop summary { display: block; max-width: 100%; }
/* Chosen options shown as wrapping tags under the Options dropdown */
.opt-picked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.opt-picked:empty { display: none; }
.opt-picked span { background: #1d1409; border: 1px solid #5a3405; color: var(--orange-hot); font-size: 13px; padding: 4px 10px; border-radius: 999px; }

/* TikTok tiles (videos page) - styled like the YouTube Shorts tiles */
.tt-tile{position:relative;aspect-ratio:9/16;border-radius:var(--radius);overflow:hidden;background:#111}
.tt-tile iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Auto-updating YouTube tiles (videos page) */
.feed-title{font-size:24px;margin:0 0 20px;text-transform:uppercase;letter-spacing:.5px}
#yt-videos .vid-card h3,#yt-shorts .vid-card h3{font-size:16px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Keep the header logo from getting squeezed when the nav is crowded */
.brand { flex-shrink: 0; }
.brand img { max-width: none; }
.site-header .wrap { max-width: calc(var(--wrap) + 160px); gap: 18px; }
@media (max-width: 1500px) { .nav-links a { padding: 8px 9px; font-size: 16px; } .nav-links a::after { left: 9px; right: 9px; } }
@media (max-width: 1260px) { .brand img { height: 52px; } .nav-links { gap: 0; } .nav-links a { padding: 8px 7px; font-size: 15px; } .nav-links a::after { left: 7px; right: 7px; } .nav-ctas .nav-cta { padding: 9px 11px; font-size: 13px; } }
@media (min-width: 1261px) and (max-width: 1300px) { .brand img { height: 60px; } }   /* full menu + 72px logo is 3px too wide here */

/* Top orange bar: never wrap mid-phrase; drop the slogan before things get tight */
.topbar .wrap { align-items: center; }
.topbar span, .topbar a { white-space: nowrap; }
@media (max-width: 1180px) { .topbar .hide-md { display: none; } }
/* menu links never wrap onto two lines */
.nav-links a { white-space: nowrap; }

/* Home lineup: the custom-build card's word-sized cap */
.g5 .card .cap .cap-word { font-size: 30px; letter-spacing: .01em; }

/* Logo reads as a link: slight lift + glow on hover */
.brand { transition: transform .2s, filter .2s; }
.brand:hover { transform: translateY(-1px); filter: brightness(1.15) drop-shadow(0 0 10px #ff820166); }
.brand:active { transform: translateY(0); }

/* Inventory: opening "Full specs" grows only that card, not its row-mates */
#inv-grid { align-items: start; }

/* Inventory photo slideshows */
.ph.slides { position: relative; }
.ph.slides img { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease; }
.ph.slides img.on { opacity: 1; }
.card:hover .ph.slides img { transform: none; }
.sl-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 46px;
  border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .25s, background .25s; z-index: 2; }
.sl-arrow:hover { background: var(--orange); color: #000; }
.sl-prev { left: 0; border-radius: 0 3px 3px 0; }
.sl-next { right: 0; border-radius: 3px 0 0 3px; }
.ph.slides:hover .sl-arrow, .sl-arrow:focus-visible { opacity: 1; }
.sl-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center;
  gap: 6px; z-index: 2; }
.sl-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.45); transition: background .25s, transform .25s; }
.sl-dots button.on { background: var(--orange); transform: scale(1.35); }
.sl-count { position: absolute; right: 12px; bottom: 8px; z-index: 2; font-family: var(--head);
  font-stretch: condensed; font-size: 12px; letter-spacing: .08em; color: #fff;
  background: rgba(0,0,0,.5); padding: 2px 7px; border-radius: 2px; }
@media (max-width: 720px) { .sl-arrow { opacity: 1; background: rgba(0,0,0,.35); } }

/* Required-field marker on the quote forms */
.field .req { color: var(--orange); margin-left: 3px; }

/* Group headings inside the options picker */
.opt-group { grid-column: 1 / -1; font-family: var(--head); font-stretch: condensed; text-transform: uppercase;
  letter-spacing: .12em; font-size: 12px; color: var(--orange); padding: 12px 8px 4px;
  border-top: 1px solid var(--line); margin-top: 4px; }
.opt-list .opt-group:first-child { border-top: 0; margin-top: 0; padding-top: 4px; }
.opt-list { max-height: 360px; }
.opt-list label[hidden], .opt-list .opt-group[hidden] { display: none; }

/* Contact page stacked: info on top, wide form, map underneath */
.contact-stack { display: block; }
.contact-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 30px; margin-bottom: 44px; }
.contact-info .info-block { margin-bottom: 0; }
.contact-stack .form { width: 100%; }
.contact-stack .map { margin-top: 44px; }
.contact-stack .map iframe { height: 420px; }
@media (max-width: 900px) { .contact-info { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .contact-info { grid-template-columns: 1fr; gap: 18px; } }

/* Warranty line above the footer credits */
.foot-warranty { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 16px;
  color: var(--muted); font-size: 14px; letter-spacing: .02em; }

/* Models page: whole photo, not a zoomed crop, and it follows you down the spec lists */
.model-media { position: relative; min-height: 0; }
.model-pin { position: sticky; top: 96px; }
.model-media img { position: static; width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .model-media { aspect-ratio: auto; }
  .model-pin { position: static; }
}

/* ---------- One page per truck (/trucks/c6005.html) ---------- */
.truck-page { padding: 120px 0 90px; }
.back-link { display: inline-block; color: var(--muted); font-family: var(--head); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: .12em; font-size: 14px; margin-bottom: 22px; }
.back-link:hover { color: var(--orange); }
.truck-top { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }
.truck-media { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: clip; }
.truck-media .ph.slides { aspect-ratio: 4/3; }
.truck-info h1 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.02; margin-top: 10px; }
.truck-price { font-size: 46px; margin: 14px 0 6px; }
.truck-info .kv { font-size: 16px; }
.finance-note { font-size: 15px; margin: -2px 0 10px; }
.truck-visit { margin-top: 20px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.truck-visit a { color: var(--text); }
.truck-visit a:hover { color: var(--orange); }

/* Truck pages only: the price, the financing line and the two outline buttons
   pulse, so the page keeps nudging toward the next step. The solid orange
   "Get a Quote" button is left alone - it is already the loudest thing here,
   and everything flashing at once reads as noise. Hover stops the pulse, and
   anyone who asks for less motion gets the end state held steady. */
@keyframes truck-price-flash {
  0%, 100% { color: #fff;          text-shadow: none; }
  50%      { color: var(--orange); text-shadow: 0 0 24px rgba(255, 130, 1, .45); }
}
@keyframes truck-note-flash {
  0%, 100% { color: var(--muted); }
  50%      { color: var(--orange); }
}
@keyframes truck-ghost-flash {
  0%, 100% { border-color: #fff;           color: var(--text);   box-shadow: none; }
  50%      { border-color: var(--orange);  color: var(--orange); box-shadow: 0 0 18px rgba(255, 130, 1, .30); }
}
.truck-page .truck-price  { animation: truck-price-flash 2s ease-in-out infinite; }
.truck-page .finance-note { animation: truck-note-flash  2s ease-in-out infinite; }
.truck-page .btn.ghost    { animation: truck-ghost-flash 2s ease-in-out infinite; }
.truck-page .btn.ghost:hover { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .truck-page .truck-price,
  .truck-page .finance-note,
  .truck-page .btn.ghost { animation: none; }
}
.truck-specs { margin-top: 54px; border-top: 1px solid var(--line); padding-top: 34px; }
.truck-specs h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 18px; }
/* Full specs run in two label/value pairs per row - the lists are long and a
   single column left half the page empty. Collapses to one pair on narrow screens. */
.truck-specs .kv { grid-template-columns: 185px minmax(0, 1fr) 185px minmax(0, 1fr);
                   column-gap: 40px; row-gap: 7px; max-width: 1080px; }
.spec-head { font-family: var(--head); font-stretch: condensed; text-transform: uppercase; letter-spacing: .08em;
             font-size: 17px; color: var(--orange); margin: 30px 0 6px; padding-top: 18px; border-top: 1px solid var(--line); max-width: 1080px; }
.spec-head:first-of-type { margin-top: 10px; padding-top: 0; border-top: 0; }
.truck-specs .kv dd { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .truck-page { padding: 96px 0 70px; }
  .truck-top { grid-template-columns: 1fr; gap: 26px; }
  .truck-price { font-size: 38px; }
  .truck-specs .kv { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }
}

/* Quote forms: collapsible deck builder, parts list rows, serial-number hint, checkbox line */
.build-box > summary { list-style: none; cursor: pointer; margin-bottom: 0; position: relative; padding-right: 28px; }
.build-box > summary::-webkit-details-marker { display: none; }
.build-box > summary::after { content: "▾"; position: absolute; right: 0; top: 0; color: var(--orange); transition: transform .2s; }
.build-box[open] > summary { margin-bottom: 14px; }

/* Build Your Deck uses the same layout as the spec sheet on the truck pages:
   orange section headings with a rule between them, and two label/value
   pairs per row - small grey label on the left, the dropdown or tick box as
   its value. */
.build-box .bb-head { font-family: var(--head); font-stretch: condensed; text-transform: uppercase;
                      letter-spacing: .08em; font-size: 17px; color: var(--orange);
                      margin: 26px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.build-box .bb-head:first-of-type { margin-top: 8px; padding-top: 0; border-top: 0; }
.build-box .bb-grid { display: grid; grid-template-columns: 170px minmax(0, 1fr) 170px minmax(0, 1fr);
                      column-gap: 36px; row-gap: 10px; align-items: center; }
.build-box .bb-grid label { color: var(--muted); text-transform: uppercase; font-size: 12px;
                            letter-spacing: .1em; line-height: 1.35; margin: 0; font-family: inherit; }
.build-box .bb-grid select { width: 100%; background: #0a0a0a; border: 1px solid var(--line);
                             border-radius: var(--radius); color: var(--text); padding: 9px 12px; font: inherit; font-size: 15px; }
.build-box .bb-grid select:focus { outline: none; border-color: var(--orange); }
.build-box .bb-grid .bb-note { grid-column: 1 / -1; margin: -2px 0 2px; font-size: 14px; }   /* e.g. the 10 Series 21' deck note */
.build-box .bb-grid .bb-note b { color: var(--orange); }
/* SL-40 in the quote builder: deck-only fields hide, its specs and standard equipment show */
.build-box [data-for][hidden] { display: none; }
.build-box .sl40-info { margin: 18px 0 4px; }
.build-box .sl40-info .specs { margin-bottom: 14px; }
.build-box .sl40-info .feat-cols { grid-template-columns: 1fr; }

/* options: name on the left, tick box as the value, two per row */
.build-box .opt-list { position: static; max-height: none; overflow: visible; background: none; border: 0;
                       padding: 0; box-shadow: none; display: grid; grid-template-columns: 1fr 1fr;
                       column-gap: 36px; row-gap: 2px; }
.build-box .opt-list label { display: grid; grid-template-columns: 170px auto; align-items: center; gap: 0 36px;
                             padding: 6px 0; border-radius: 0; cursor: pointer; }
.build-box .opt-list label:hover { background: none; }
.build-box .opt-list label span { color: var(--muted); text-transform: uppercase; font-size: 12px;
                                  letter-spacing: .1em; line-height: 1.35; }
.build-box .opt-list label:hover span { color: var(--orange-hot); }
.build-box .opt-list input { width: 18px; height: 18px; margin: 0; accent-color: var(--orange); }
.build-box .opt-list .opt-group { grid-column: 1 / -1; color: var(--text); font-size: 13px; letter-spacing: .12em;
                                  margin: 14px 0 4px; padding: 0; border: 0; }
.build-box .opt-list .opt-group:first-child { margin-top: 0; }
/* options not offered on the chosen series must stay hidden */
.build-box .opt-list label[hidden], .build-box .opt-list .opt-group[hidden] { display: none; }

@media (max-width: 900px) {
  .build-box .bb-grid { grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); column-gap: 16px; }
  .build-box .opt-list { grid-template-columns: 1fr; }
  .build-box .opt-list label { grid-template-columns: minmax(110px, 1fr) auto; gap: 0 16px; }
}
/* small phones: label above a full-width dropdown, so the choices stay readable */
@media (max-width: 520px) {
  .build-box .bb-grid { grid-template-columns: 1fr; row-gap: 4px; }
  .build-box .bb-grid label { margin-top: 10px; }
}
.build-box[open] > summary::after { transform: rotate(180deg); }

/* Models page: Standard and Options collapse, the same way the deck builder on
   the quote form does. Those lists run to 50-odd items each and three series
   stacked them into a very long page. Closed by default, with the count on the
   summary so you know how much is in there before opening it. */
.spec-list { border: 1px solid var(--line); border-left: 3px solid var(--orange);
             border-radius: var(--radius); background: #0f0f0f; padding: 0 18px;
             margin-bottom: 14px; }
.spec-list > summary { list-style: none; cursor: pointer; position: relative;
                       padding: 15px 30px 15px 0;
                       font-family: var(--head); font-stretch: condensed; font-weight: 600;
                       text-transform: uppercase; letter-spacing: .12em;
                       font-size: 14px; color: var(--orange); }
.spec-list > summary::-webkit-details-marker { display: none; }
.spec-list > summary::after { content: "▾"; position: absolute; right: 2px; top: 13px;
                              color: var(--orange); transition: transform .2s; }
.spec-list[open] > summary::after { transform: rotate(180deg); }
.spec-list > summary:hover { color: var(--orange-hot); }
.spec-list .spec-count { color: var(--muted); letter-spacing: .06em; margin-left: 4px; }
.spec-list ul { margin: 0; padding-bottom: 16px; }
.build-box:not([open]) { padding-bottom: 20px; }
.build-box[hidden] { display: none; }
.part-row { display: grid; grid-template-columns: 1fr 88px auto; gap: 10px; margin-bottom: 10px; align-items: center; }
.part-row input[type=number] { text-align: center; }
.part-x { background: transparent; border: 1px solid #fff; color: var(--muted); border-radius: var(--radius); width: 44px; height: 48px; cursor: pointer; font-size: 16px; }
.part-x:hover { color: #fff; border-color: var(--orange); }
.part-add { background: transparent; border: 1px dashed #444; color: var(--orange); border-radius: var(--radius); padding: 10px 16px; cursor: pointer; font-family: var(--head); font-stretch: condensed; text-transform: uppercase; letter-spacing: .1em; font-size: 14px; font-weight: 600; }
.part-add:hover { border-color: var(--orange); }
.serial-hint { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; background: #0a0a0a; border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 18px; }
.serial-hint img { width: 96px; border-radius: 3px; }
.serial-hint p { font-size: 14px; color: var(--muted); line-height: 1.5; margin: 0; }
.serial-hint b { color: var(--text); }
.check-line { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin: 0 0 18px; background: #0a0a0a; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font-size: 15px; color: #fff; }
.check-line input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--orange); flex: none; }
.check-line b { color: var(--orange); }
.check-line[hidden] { display: none; }
.filters[hidden] { display: none; }
/* Dealers page: the banner shows the dealer logos instead of a video */
.dealer-banner { background: linear-gradient(135deg, #161616 0%, #000 65%); }
.dealer-banner .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 48px; align-items: center; }
.logo-slides { position: relative; aspect-ratio: 16 / 9; border: 1px solid #fff; border-radius: var(--radius); overflow: hidden;
               background: #fff; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.logo-slides img { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 9% 11% 13%;
                   object-fit: contain; background: #fff; opacity: 0; transition: opacity .55s ease; }
.logo-slides img.dark { background: #111; }
.logo-slides img.on { opacity: 1; }
.logo-slides .sl-count { display: none; }
.logo-slides .sl-dots button { background: #9a9a9a; box-shadow: 0 0 0 1px #fff; }
.logo-slides .sl-dots button.on { background: var(--orange); }
@media (max-width: 820px) { .dealer-banner .wrap { grid-template-columns: 1fr; gap: 30px; } }
.blank-cards { margin-bottom: 30px; }
.blank-card .body { min-height: 170px; }
.blank-card:hover { transform: none; border-color: var(--orange); }
.card .ph.dealer-logo { background: #fff; display: flex; align-items: center; justify-content: center; padding: 8% 10%; }
.card .ph.dealer-logo img { width: 100%; height: 100%; object-fit: contain; }
.card:hover .ph.dealer-logo img { transform: none; }
.card .ph.dealer-logo.dark, .dealer-top-logo.dark { background: #111; }   /* white-lettered logos (PJ's) */
/* a dealer with no logo yet: their name, lettered like a heading */
.card .ph.dealer-logo.name-logo { background: #111; text-align: center; font-family: var(--head); font-stretch: condensed;
                                  font-weight: 700; text-transform: uppercase; font-size: clamp(36px, 3.6vw, 50px); line-height: .95; color: #fff; }
.card .ph.dealer-logo.name-logo .o { color: var(--orange); display: block; }
.dealer-info h3 { font-size: 24px; line-height: 1.1; }
.dealer-info p { margin-top: 12px; }
.dealer-info a:hover { color: var(--orange); }
/* a dealer's people and numbers (Stivers lists them all) */
.dealer-info .dealer-contacts { list-style: none; margin: 12px 0 0; padding: 0; font-size: 15px; line-height: 1.5; }
.dealer-info .dealer-contacts li { margin-top: 8px; }
.dealer-contacts .lbl, .dealer-people span { color: var(--orange); font-family: var(--head); font-stretch: condensed; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.dealer-contacts a { overflow-wrap: anywhere; }
.dealer-lines { margin-top: 10px; font-size: 17px; }
.dealer-lines span:not(.sep) { color: var(--orange); font-family: var(--head); font-stretch: condensed; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }
.dealer-lines .sep { margin: 0 10px; }
.dealer-lines a:hover { color: var(--orange); }
.dealer-people { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 56px; margin-top: 24px; }
.dealer-people > div { display: flex; flex-direction: column; gap: 3px; font-size: 16px; }
.dealer-people b { font-size: 20px; }
.dealer-people a { overflow-wrap: anywhere; }
.dealer-people a:hover { color: var(--orange); }
.dealer-info .dealer-btns { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }   /* buttons line up along the bottom of every card */
.dealer-info .dealer-btns .btn { flex: 1 1 auto; justify-content: center; text-align: center; white-space: nowrap; padding: 14px 12px; font-size: 16px; }
.dealer-info .dealer-btns.tight .btn { letter-spacing: .02em; padding-left: 8px; padding-right: 8px; }   /* longer labels (Call JC 334.315.2979) stay side by side */
/* A dealer's own page (View Trucks): their logo across the top, then their trucks */
.dealer-top { background: linear-gradient(135deg, #161616 0%, #000 65%); text-align: center; padding-top: 150px; }
.dealer-top-logo { max-width: 560px; aspect-ratio: 16 / 9; margin: 0 auto 30px; background: #fff; border: 1px solid #fff;
                   border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.dealer-top-logo img { width: 100%; height: 100%; box-sizing: border-box; padding: 9% 11%; object-fit: contain; }
.dealer-top h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1.05; }
.dealer-top .lead { margin: 0 auto; }
.dealer-top .lead a:hover { color: var(--orange); }
.dealer-top .btns { justify-content: center; margin-top: 26px; }
@media (max-width: 760px) { .dealer-top { padding-top: 110px; } }
/* Privacy policy page */
.policy { max-width: 860px; }
.policy .updated { color: var(--muted); font-size: 15px; margin-bottom: 8px; }
.policy h2 { font-size: clamp(26px, 3vw, 34px); margin: 40px 0 12px; }
.policy p { margin: 0 0 14px; }
.policy ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.policy li { margin-bottom: 8px; }
.policy li::marker { color: var(--orange); }
.policy a { color: var(--orange); }
@media (max-width: 520px) { .serial-hint { grid-template-columns: 72px 1fr; } .serial-hint img { width: 72px; } .part-row { grid-template-columns: 1fr 72px auto; } }
.opt-hint { font-size: 15px; margin: 4px 0 2px; }   /* truck quote: shown until a Model is picked */
.opt-hint[hidden] { display: none; }