/* Midnight: black and red, bold condensed headings, square corners. The
   banner is one of the dealer's cars, full width behind the text (on phones
   too). Loaded after site.css when the dealer picks it. */
:root {
  --navy: #0d0f13;
  --navy-2: #171a20;
  --red: #e0302b;
  --red-dark: #c02520;
  --accent-light: #ff4d45;
  --accent-tint: #fde8e7;
  --bg: #f1f1ef;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .07);
}
h1, h2, .logo, .price, .car-price, .spot-price {
  font-family: "Barlow Condensed", Inter, system-ui, sans-serif;
}
h1, h2 { text-transform: uppercase; letter-spacing: .005em; font-weight: 800; }
.price { font-size: 25px; font-weight: 700; letter-spacing: 0; }
.car-price { font-size: 40px; font-weight: 700; letter-spacing: 0; }
.btn { border-radius: 4px; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; font-weight: 700; }
.badge, .badge-inline { border-radius: 3px; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }

/* Black header and top bar */
.topbar { background: #000; color: #9a9ea7; }
.site-header { background: var(--navy); border-bottom-color: #23262d; --mark-color: #2a2e37; }
/* Logos are usually dark ink: on the black header they sit on a white plate. */
.logo-tone-light img { background: none; padding: 0; }
.logo-tone-dark img { background: #fff; padding: 4px 10px; border-radius: 4px; box-sizing: content-box; }
.logo { color: #fff; font-size: 23px; letter-spacing: .01em; text-transform: uppercase; }
.logo small { font-family: Inter, system-ui, sans-serif; color: var(--accent-light); }
.nav a { color: #b5b9c2; text-transform: uppercase; font-size: 14px; letter-spacing: .05em; }
.nav a:hover, .nav a.on { color: #fff; }

/* Banner: the car fills it; the text sits on a dark fade from the left. */
.hero { background: var(--navy); padding: 104px 0 128px; }
.hero h1 { font-size: clamp(2.8rem, 6.4vw, 5rem); max-width: 11ch; line-height: .95; }
.hero p { color: #c4c7ce; }
.hero .hero-eyebrow { border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; }
.hero-spot { width: 100%; inset: 0 0 52px 0; }
.spot-media { -webkit-mask-image: none; mask-image: none; }
.spot-media::after {
  background:
    linear-gradient(90deg, rgba(13, 15, 19, .96) 0%, rgba(13, 15, 19, .82) 30%, rgba(13, 15, 19, .25) 62%, rgba(13, 15, 19, .1) 100%),
    linear-gradient(to top, #0d0f13 0%, rgba(13, 15, 19, .85) 8%, rgba(13, 15, 19, 0) 40%);
}
.spot-go { border-bottom-color: var(--red); text-transform: uppercase; letter-spacing: .05em; font-size: 14px; }
.spot-price { font-size: 36px; font-weight: 700; letter-spacing: 0; }
@media (max-width: 999px) {
  .hero-spot { display: block; }
  .hero-spot .spot-card { pointer-events: none; }
  .spot-caption, .spot-dots { display: none; }
  .spot-media::after { background: linear-gradient(to top, #0d0f13 0%, rgba(13, 15, 19, .74) 14%); }
  .hero { padding: 64px 0 96px; }
}
@media (max-width: 760px) {
  .logo { font-size: 19px; }
  .nav a { font-size: 13px; }
}

/* Inventory and trade-in page headings */
.page-head { background: var(--navy); border-bottom: 3px solid var(--red); }
.section-head a { text-transform: uppercase; letter-spacing: .05em; font-size: 14px; }
.site-footer { background: #000; }