/* ========================================================================
   BLACKMON AUTO SALES — FINAL BRAND LAYER
   White showroom canvas · graphite typography · disciplined signal red
   Loaded after the source theme so the PHP/HTML/JS structure can stay intact.
   ======================================================================== */

:root {
  --blackmon-red: #c9141e;
  --blackmon-red-dark: #a70f18;
  --blackmon-red-soft: #fff0f1;
  --blackmon-ink: #17191c;
  --blackmon-graphite: #24272c;
  --blackmon-muted: #68707a;
  --blackmon-line: #e2e5e9;
  --blackmon-canvas: #f5f6f8;
  --blackmon-white: #ffffff;
  --blackmon-shadow: 0 24px 70px rgba(23, 25, 28, .10);
  --blackmon-shadow-soft: 0 14px 40px rgba(23, 25, 28, .07);

  --ink: var(--blackmon-ink);
  --muted: var(--blackmon-muted);
  --soft: var(--blackmon-canvas);
  --line: var(--blackmon-line);
  --dark: var(--blackmon-ink);
  --dark2: #0e1012;
  --orange: var(--blackmon-red);
  --orange-dark: var(--blackmon-red-dark);
  --cream: var(--blackmon-canvas);
  --chrome: #c9ced4;
  --gold: var(--blackmon-red);
  --paper: var(--blackmon-white);
  --ivory: var(--blackmon-canvas);
  --charcoal: var(--blackmon-ink);
  --champagne: var(--blackmon-red);
  --champagne-deep: var(--blackmon-red-dark);
  --shadow: var(--blackmon-shadow);
  --shadow-dark: 0 30px 90px rgba(0, 0, 0, .28);
  --radius: 16px;
  --container: 1460px;
  --serif: "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  --sans: "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
}

/* Show the complete supplied homepage feature image without cropping. */
.mission-img img[src$="blackmon-about-dealership.webp"] {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

html {
  color-scheme: light;
}

body {
  color: var(--blackmon-ink) !important;
  background: var(--blackmon-white) !important;
  font-family: var(--sans) !important;
  line-height: 1.65;
}

::selection {
  color: #fff;
  background: var(--blackmon-red);
}

.container {
  width: min(var(--container), calc(100% - 80px));
}

.narrow {
  width: min(1080px, calc(100% - 80px));
}

.eyebrow {
  color: var(--blackmon-red) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .22em !important;
}

.pill {
  min-height: 34px !important;
  padding: 8px 14px !important;
  color: var(--blackmon-red-dark) !important;
  background: rgba(201, 20, 30, .07) !important;
  border: 1px solid rgba(201, 20, 30, .22) !important;
  border-radius: 999px !important;
  letter-spacing: .14em !important;
}

.page-title,
.mission h2,
.featured-head h2,
.cta-dark h2,
.page-hero h1 {
  font-family: var(--sans) !important;
  font-weight: 760 !important;
  letter-spacing: -.055em !important;
}

.intro-text,
.mission p {
  color: #59616b !important;
}

/* Header ---------------------------------------------------------------- */

.site-header,
.site-header.tsc-header {
  background: rgba(255, 255, 255, .88) !important;
  color: var(--blackmon-ink) !important;
  border-bottom: 1px solid rgba(23, 25, 28, .09) !important;
  box-shadow: 0 10px 34px rgba(23, 25, 28, .07) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

.header-inner,
.tsc-header .header-inner {
  height: 82px !important;
  gap: 24px !important;
}

.brand,
.tsc-header .brand {
  min-width: 218px !important;
}

.brand img,
.tsc-header .brand img {
  width: 230px !important;
  max-height: 62px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.nav,
.tsc-header .nav {
  color: var(--blackmon-ink) !important;
  gap: 24px !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
}

.nav a,
.tsc-header .nav a {
  color: #35393f !important;
}

.nav a::after {
  bottom: -11px !important;
  height: 2px !important;
  background: var(--blackmon-red) !important;
}

.nav a:hover,
.nav a.active {
  color: var(--blackmon-red-dark) !important;
}

.header-search,
.tsc-header .header-search {
  height: 44px !important;
  min-width: 280px !important;
  max-width: 430px !important;
  color: var(--blackmon-ink) !important;
  background: rgba(245, 246, 248, .92) !important;
  border: 1px solid #dfe3e7 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

.header-search .search-mark {
  color: var(--blackmon-red) !important;
}

.header-search input {
  color: var(--blackmon-ink) !important;
}

.header-search input::placeholder {
  color: #858c95 !important;
}

.header-search button {
  color: #fff !important;
  background: var(--blackmon-red) !important;
  border-left: 0 !important;
}

.header-search button:hover {
  color: #fff !important;
  background: var(--blackmon-red-dark) !important;
}

.icon-btn,
.mobile-header-actions .icon-btn,
.mobile-call-button {
  color: var(--blackmon-ink) !important;
  background: #fff !important;
  border-color: #d9dde2 !important;
}

.mobile-menu {
  color: var(--blackmon-ink) !important;
  background: rgba(255, 255, 255, .98) !important;
  border-color: var(--blackmon-line) !important;
}

.mobile-menu-head {
  background: rgba(255, 255, 255, .96) !important;
  border-bottom-color: var(--blackmon-line) !important;
}

.mobile-menu a {
  color: var(--blackmon-ink) !important;
  border-bottom-color: var(--blackmon-line) !important;
}

.mobile-menu a:hover {
  color: var(--blackmon-red) !important;
}

/* Buttons --------------------------------------------------------------- */

.btn,
button.btn {
  min-height: 50px !important;
  padding: 13px 23px !important;
  color: #fff !important;
  background: var(--blackmon-red) !important;
  border: 1px solid var(--blackmon-red) !important;
  border-radius: 11px !important;
  box-shadow: 0 10px 24px rgba(201, 20, 30, .16) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .11em !important;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

.btn:hover,
button.btn:hover {
  color: #fff !important;
  background: var(--blackmon-red-dark) !important;
  border-color: var(--blackmon-red-dark) !important;
  box-shadow: 0 14px 30px rgba(201, 20, 30, .22) !important;
  transform: translateY(-2px) !important;
}

.btn.light {
  color: var(--blackmon-ink) !important;
  background: #fff !important;
  border-color: #fff !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14) !important;
}

.btn.light:hover {
  color: #fff !important;
  background: var(--blackmon-red) !important;
  border-color: var(--blackmon-red) !important;
}

.btn.ghost {
  color: #fff !important;
  background: rgba(18, 20, 23, .26) !important;
  border-color: rgba(255, 255, 255, .55) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.btn.ghost:hover {
  color: var(--blackmon-ink) !important;
  background: #fff !important;
  border-color: #fff !important;
}

.btn.outline {
  color: var(--blackmon-ink) !important;
  background: transparent !important;
  border-color: #bbc1c8 !important;
  box-shadow: none !important;
}

.btn.outline:hover {
  color: #fff !important;
  background: var(--blackmon-red) !important;
  border-color: var(--blackmon-red) !important;
}

.btn.dark {
  color: #fff !important;
  background: var(--blackmon-ink) !important;
  border-color: var(--blackmon-ink) !important;
  box-shadow: 0 10px 24px rgba(23, 25, 28, .14) !important;
}

.btn.dark:hover {
  background: var(--blackmon-red) !important;
  border-color: var(--blackmon-red) !important;
}

/* Home hero ------------------------------------------------------------- */

.hero,
.home-hero {
  min-height: 700px !important;
  align-items: center !important;
  color: #fff !important;
  background:
    linear-gradient(90deg, rgba(11, 13, 15, .88) 0%, rgba(11, 13, 15, .67) 36%, rgba(11, 13, 15, .18) 72%, rgba(11, 13, 15, .08) 100%),
    url('/assets/images/blackmon-hero.webp') center 52% / cover no-repeat !important;
}

.hero::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .10) 56%, rgba(0, 0, 0, .55)) !important;
}

.hero::after {
  left: 0 !important;
  bottom: 0 !important;
  width: 10px !important;
  height: 100% !important;
  background: var(--blackmon-red) !important;
}

.home-hero .hero-content,
.hero-content {
  padding: 110px 0 150px !important;
}

.hero .eyebrow {
  display: inline-flex;
  padding: 8px 12px;
  color: #fff !important;
  background: rgba(201, 20, 30, .82);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hero h1,
.home-hero h1 {
  max-width: 860px !important;
  margin: 19px 0 24px !important;
  font-family: var(--sans) !important;
  font-size: clamp(52px, 6.4vw, 98px) !important;
  font-weight: 780 !important;
  line-height: .94 !important;
  letter-spacing: -.065em !important;
  text-shadow: 0 8px 36px rgba(0, 0, 0, .34) !important;
}

.hero p,
.home-hero p {
  max-width: 670px !important;
  color: rgba(255, 255, 255, .86) !important;
  font-size: clamp(16px, 1.25vw, 20px) !important;
  line-height: 1.62 !important;
}

.hero-slider-arrows {
  bottom: 104px !important;
}

.hero-slider-arrows button {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .14) !important;
  border-color: rgba(255, 255, 255, .34) !important;
}

.hero-slider-arrows button:hover {
  color: #fff !important;
  background: var(--blackmon-red) !important;
  border-color: var(--blackmon-red) !important;
}

/* Generic page hero ----------------------------------------------------- */

.page-hero,
.page-hero.light {
  position: relative !important;
  overflow: hidden !important;
  min-height: 440px !important;
  padding: 105px 0 96px !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(201, 20, 30, .24), transparent 32%),
    linear-gradient(135deg, #111316, #262a30 62%, #15171a) !important;
  border: 0 !important;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  background: linear-gradient(90deg, var(--blackmon-red) 0 22%, rgba(201, 20, 30, .12) 22% 100%);
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero .eyebrow,
.page-hero.light .eyebrow {
  color: #ff727a !important;
}

.page-hero h1,
.page-hero.light h1 {
  max-width: 980px !important;
  margin: 14px 0 22px !important;
  color: #fff !important;
  font-size: clamp(48px, 6vw, 88px) !important;
  line-height: .98 !important;
}

.page-hero p,
.page-hero.light p {
  max-width: 850px !important;
  color: rgba(255, 255, 255, .72) !important;
  font-size: 18px !important;
}

.page-hero .text-link {
  color: #fff !important;
}

.blackmon-404 {
  min-height: 100vh !important;
  display: flex;
  align-items: center;
}

/* Sections and cards ---------------------------------------------------- */

.section {
  padding: 104px 0 !important;
}

.light-section {
  background: var(--blackmon-canvas) !important;
}

.dark-section,
.cta-dark {
  color: #fff !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(201, 20, 30, .16), transparent 34%),
    #17191c !important;
}

.dark-section .page-title,
.cta-dark h2 {
  color: #fff !important;
}

.split-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  border: 0 !important;
}

.process-card {
  min-height: 410px !important;
  padding: 44px 40px !important;
  background: rgba(255, 255, 255, .055) !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

.process-card:hover {
  background: rgba(255, 255, 255, .085) !important;
  border-color: rgba(255, 103, 111, .42) !important;
}

.circle-icon {
  width: 58px !important;
  height: 58px !important;
  margin-bottom: 32px !important;
  color: #fff !important;
  background: rgba(201, 20, 30, .16) !important;
  border-color: rgba(255, 103, 111, .45) !important;
}

.circle-icon svg {
  stroke: #ff737b !important;
}

.process-card h3 {
  margin: 18px 0 16px !important;
  color: #fff !important;
  font-family: var(--sans) !important;
  font-size: 29px !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
}

.process-card p {
  color: rgba(255, 255, 255, .67) !important;
}

.mini-line {
  height: 2px !important;
  background: var(--blackmon-red) !important;
}

.text-link {
  color: var(--blackmon-red) !important;
}

.mission-grid {
  grid-template-columns: 1.05fr .95fr !important;
  gap: clamp(48px, 7vw, 108px) !important;
}

.mission-img {
  overflow: visible !important;
  border-radius: 20px !important;
  box-shadow: var(--blackmon-shadow) !important;
}

.mission-img::before {
  content: "";
  position: absolute;
  left: -18px;
  bottom: -18px;
  width: 44%;
  height: 46%;
  z-index: -1;
  background: var(--blackmon-red);
  border-radius: 16px;
}

.mission-img::after {
  display: none !important;
}

.mission-img img {
  width: 100% !important;
  min-height: 470px !important;
  object-fit: cover !important;
  border-radius: 20px !important;
}

.content-card,
.lender-card,
.field,
.form-wrap {
  border-radius: 16px !important;
}

.content-card,
.lender-card {
  background: #fff !important;
  border-color: var(--blackmon-line) !important;
  box-shadow: var(--blackmon-shadow-soft) !important;
}

.lender-card h3,
.content-card h2,
.content-card h3 {
  color: var(--blackmon-ink) !important;
  font-family: var(--sans) !important;
  letter-spacing: -.035em !important;
}

/* Inventory and vehicle cards ------------------------------------------ */

.home-featured-overlap {
  margin-top: -78px !important;
  padding-bottom: 62px !important;
  background: linear-gradient(to bottom, transparent 0 52px, #fff 53px 100%) !important;
}

.home-featured-overlap .featured-row {
  gap: 20px !important;
  padding: 0 8px 26px !important;
}

.home-featured-overlap .vehicle-card {
  min-width: 350px !important;
  max-width: 350px !important;
}

.vehicle-card,
.original-card,
.inventory-card {
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid var(--blackmon-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--blackmon-shadow-soft) !important;
}

.vehicle-card:hover,
.original-card:hover,
.inventory-card:hover {
  border-color: rgba(201, 20, 30, .34) !important;
  box-shadow: var(--blackmon-shadow) !important;
  transform: translateY(-5px) !important;
}

.vehicle-media,
.vehicle-media img,
.vehicle-media a img {
  background: #f2f3f5 !important;
}

.vehicle-media img,
.vehicle-media a img {
  object-fit: contain !important;
}

.vehicle-body {
  padding: 26px !important;
}

.vehicle-title {
  color: var(--blackmon-ink) !important;
  font-family: var(--sans) !important;
  font-size: 22px !important;
  font-weight: 750 !important;
  letter-spacing: -.035em !important;
}

.price,
.price-row .price {
  color: var(--blackmon-red-dark) !important;
  font-family: var(--sans) !important;
  font-weight: 800 !important;
}

.spec-grid {
  border-color: var(--blackmon-line) !important;
}

.card-btn {
  width: 100%;
}

.inventory-page.native-inventory,
.inventory-page {
  background: var(--blackmon-canvas) !important;
}

.filter-sidebar {
  background: #fff !important;
  border-right-color: var(--blackmon-line) !important;
}

.filter-title,
.filter-toggle {
  color: var(--blackmon-ink) !important;
  background: #fff !important;
  border-color: var(--blackmon-line) !important;
}

.filter-content,
.check-list label {
  color: #4f565f !important;
}

.filter-sidebar input[type="checkbox"] {
  accent-color: var(--blackmon-red) !important;
}

.inventory-topbar {
  background: rgba(255, 255, 255, .91) !important;
  border-color: var(--blackmon-line) !important;
  box-shadow: var(--blackmon-shadow-soft) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.inventory-topbar input,
.inventory-topbar select,
.input,
.select,
.form-wrap input,
.form-wrap select,
.form-wrap textarea,
.request-info-form input,
.request-info-form textarea {
  color: var(--blackmon-ink) !important;
  background: #fff !important;
  border-color: #cfd4da !important;
  border-radius: 10px !important;
}

.inventory-topbar input:focus,
.inventory-topbar select:focus,
.form-wrap input:focus,
.form-wrap select:focus,
.form-wrap textarea:focus,
.request-info-form input:focus,
.request-info-form textarea:focus {
  border-color: var(--blackmon-red) !important;
  box-shadow: 0 0 0 4px rgba(201, 20, 30, .10) !important;
  outline: 0 !important;
}

.result-count,
.active-filter-count {
  color: var(--blackmon-red-dark) !important;
}

/* Unit detail ----------------------------------------------------------- */

.unit-detail-page .page-hero {
  min-height: 320px !important;
  padding: 76px 0 70px !important;
}

.unit-detail-page .inventory-page {
  padding-top: 54px !important;
}

.vdp-gallery,
.vdp-side,
.overview,
.vdp-specs,
.unit-purchase-support {
  background: #fff !important;
  border-color: var(--blackmon-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--blackmon-shadow-soft) !important;
}

.vdp-side {
  border-top: 4px solid var(--blackmon-red) !important;
}

.unit-detail-page .vdp-gallery-button img,
.unit-gallery-image,
.request-info-unit img {
  object-fit: contain !important;
  background: #f2f3f5 !important;
}

.vdp-side h1,
.overview h2 {
  color: var(--blackmon-ink) !important;
  font-family: var(--sans) !important;
  letter-spacing: -.045em !important;
}

.unit-availability-dot {
  background: var(--blackmon-red) !important;
}

.unit-support-icon,
.vdp-main-nav,
.gallery-open-icon {
  color: #fff !important;
  background: var(--blackmon-red) !important;
  border-color: var(--blackmon-red) !important;
}

.thumb-row button.is-active {
  border-color: var(--blackmon-red) !important;
}

.unit-detail-page .page-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(201, 20, 30, .24), transparent 32%),
    linear-gradient(135deg, #111316, #262a30 62%, #15171a) !important;
}

.unit-detail-page .page-hero::after,
.unit-detail-page .vdp-side::before,
.unit-detail-page .overview h2::after {
  background: var(--blackmon-red) !important;
}

.unit-detail-page .page-hero .eyebrow,
.unit-detail-page .request-info-kicker {
  color: #ff727a !important;
}

.unit-detail-page .vdp-side {
  color: var(--blackmon-ink) !important;
  background: #fff !important;
  border-color: var(--blackmon-line) !important;
  border-top: 5px solid var(--blackmon-red) !important;
  box-shadow: var(--blackmon-shadow) !important;
}

.unit-detail-page .vdp-side .eyebrow,
.unit-detail-page .vdp-side h1,
.unit-detail-page .vdp-side .price {
  color: var(--blackmon-ink) !important;
}

.unit-detail-page .vdp-side .price::before {
  background: var(--blackmon-red) !important;
}

.unit-detail-page .unit-availability,
.unit-detail-page .unit-photo-count {
  color: #4f565f !important;
  background: var(--blackmon-canvas) !important;
  border-color: var(--blackmon-line) !important;
}

.unit-detail-page .vdp-actions .btn.dark,
.unit-detail-page .vdp-main-nav:hover,
.unit-detail-page .mobile-call-button {
  color: #fff !important;
  background: var(--blackmon-red) !important;
  border-color: var(--blackmon-red) !important;
}

.unit-detail-page .vdp-actions .btn.dark:hover {
  color: #fff !important;
  background: var(--blackmon-red-dark) !important;
  border-color: var(--blackmon-red-dark) !important;
}

.unit-detail-page .vdp-actions .btn.outline {
  color: var(--blackmon-ink) !important;
  background: transparent !important;
  border-color: #bbc1c8 !important;
}

.unit-detail-page .vdp-actions .btn.outline:hover {
  color: #fff !important;
  background: var(--blackmon-red) !important;
  border-color: var(--blackmon-red) !important;
}

.unit-detail-page .unit-purchase-support,
.unit-detail-page .vdp-specs,
.unit-detail-page .vdp-specs > div,
.unit-detail-page .vdp-specs > div:nth-child(even) {
  color: var(--blackmon-ink) !important;
  background: var(--blackmon-canvas) !important;
  border-color: var(--blackmon-line) !important;
}

.unit-detail-page .unit-support-heading {
  background: #f0f2f4 !important;
  border-bottom-color: var(--blackmon-line) !important;
}

.unit-detail-page .unit-support-heading strong,
.unit-detail-page .unit-support-item,
.unit-detail-page .unit-support-item strong,
.unit-detail-page .spec-value,
.unit-detail-page .overview h2 {
  color: var(--blackmon-ink) !important;
}

.unit-detail-page .unit-support-heading span,
.unit-detail-page .unit-support-item small,
.unit-detail-page .spec-label,
.unit-detail-page .overview p {
  color: var(--blackmon-muted) !important;
}

.unit-detail-page .unit-support-icon,
.unit-detail-page .unit-support-arrow {
  color: var(--blackmon-red) !important;
  background: var(--blackmon-red-soft) !important;
}

.unit-detail-page .unit-support-item:hover,
.unit-detail-page .unit-support-item:focus-visible {
  color: var(--blackmon-ink) !important;
  background: #fff !important;
}

.unit-detail-page .request-info-panel {
  border-color: var(--blackmon-line) !important;
  border-top-color: var(--blackmon-red) !important;
}

.unit-detail-page .request-info-field input:focus,
.unit-detail-page .request-info-field textarea:focus {
  border-color: var(--blackmon-red) !important;
  outline-color: rgba(201, 20, 30, .20) !important;
}

/* Principles replacing borrowed reviews ------------------------------- */

.blackmon-principles {
  padding: 108px 0 !important;
  color: var(--blackmon-ink) !important;
  background:
    radial-gradient(circle at 82% 10%, rgba(201, 20, 30, .055), transparent 30%),
    var(--blackmon-canvas) !important;
}

.blackmon-principles::before {
  display: none !important;
}

.principles-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 70px;
  align-items: end;
  margin-bottom: 48px;
}

.principles-heading h2 {
  max-width: 780px !important;
  margin: 18px 0 0 !important;
  color: var(--blackmon-ink) !important;
  font-family: var(--sans) !important;
  font-size: clamp(44px, 5.2vw, 76px) !important;
  font-weight: 760 !important;
  line-height: .98 !important;
  letter-spacing: -.06em !important;
  text-align: left !important;
}

.principles-heading > p {
  margin: 0;
  color: #636b74;
  font-size: 17px;
  line-height: 1.75;
}

.principle-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  overflow: visible !important;
}

.principle-card {
  min-height: 300px !important;
  padding: 34px !important;
  color: var(--blackmon-ink) !important;
  background: #fff !important;
  border: 1px solid var(--blackmon-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--blackmon-shadow-soft) !important;
}

.principle-card:nth-child(2) {
  color: #fff !important;
  background: var(--blackmon-ink) !important;
  border-color: var(--blackmon-ink) !important;
  transform: translateY(-12px);
}

.principle-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 46px;
  color: var(--blackmon-red);
  background: var(--blackmon-red-soft);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .10em;
}

.principle-card:nth-child(2) .principle-number {
  color: #fff;
  background: var(--blackmon-red);
}

.principle-card h3 {
  margin: 0 0 14px;
  color: inherit !important;
  font-family: var(--sans) !important;
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -.04em;
}

.principle-card p,
.principle-card .review-copy p {
  color: #5f6770 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.principle-card:nth-child(2) p {
  color: rgba(255, 255, 255, .68) !important;
}

/* Team role cards ------------------------------------------------------- */

.team-role-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-top: 50px !important;
}

.team-role-card {
  min-height: 320px;
  padding: 34px !important;
  background: #fff !important;
  border: 1px solid var(--blackmon-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--blackmon-shadow-soft) !important;
}

.team-role-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 54px;
  place-items: center;
  color: #fff;
  background: var(--blackmon-red);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 800;
}

.team-role-card .team-info {
  padding: 0 !important;
}

.team-role-card h3 {
  margin-bottom: 14px !important;
  color: var(--blackmon-ink) !important;
  font-family: var(--sans) !important;
  font-size: 25px !important;
  letter-spacing: -.04em !important;
}

.team-role-card p {
  color: #626a73 !important;
}

/* Delivery, map and forms ---------------------------------------------- */

.delivery-picture-grid {
  gap: 20px !important;
}

.delivery-picture {
  overflow: hidden !important;
  border-radius: 18px !important;
  box-shadow: var(--blackmon-shadow) !important;
}

.delivery-picture img {
  width: 100% !important;
  height: 100% !important;
  min-height: 360px !important;
  object-fit: cover !important;
}

.contact-map-wrap {
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 18px !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .28) !important;
}

.request-info-result,
.delivery-form-result,
.warranty-form-result {
  border-radius: 12px !important;
}

/* Search and quick-action modal ---------------------------------------- */

.search-modal,
.deal-modal {
  background: rgba(10, 12, 14, .72) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.search-panel,
.deal-panel {
  overflow: hidden !important;
  background: rgba(255, 255, 255, .97) !important;
  border: 1px solid rgba(255, 255, 255, .70) !important;
  border-radius: 20px !important;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .32) !important;
}

.deal-head,
.scheduler-head,
.search-top {
  background: #fff !important;
  border-bottom-color: var(--blackmon-line) !important;
}

.deal-brand img {
  width: 180px !important;
  max-height: 52px !important;
  object-fit: contain !important;
}

.deal-brand span {
  display: none !important;
}

.blackmon-quick-panel {
  max-height: min(72vh, 650px);
  padding: 32px;
  overflow-y: auto;
}

.blackmon-quick-panel h3 {
  margin: 8px 0 8px;
  color: var(--blackmon-ink);
  font-family: var(--sans);
  font-size: 34px;
  letter-spacing: -.05em;
}

.blackmon-deal-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

.deal-option {
  min-height: 96px !important;
  padding: 18px !important;
  background: var(--blackmon-canvas) !important;
  border: 1px solid var(--blackmon-line) !important;
  border-radius: 12px !important;
}

.deal-option:hover {
  background: var(--blackmon-red-soft) !important;
  border-color: rgba(201, 20, 30, .30) !important;
  transform: translateY(-2px);
}

.deal-option strong {
  color: var(--blackmon-ink) !important;
}

.deal-option small {
  color: #707780 !important;
}

.deal-option .arrow {
  color: var(--blackmon-red) !important;
}

.quick-panel-note {
  margin-top: 20px;
  padding: 14px 16px;
  color: #5e6670;
  background: #fff;
  border: 1px solid var(--blackmon-line);
  border-radius: 11px;
  font-size: 13px;
}

.quick-panel-note span {
  margin: 0 9px;
  color: var(--blackmon-red);
}

.blackmon-deal-nav {
  grid-template-columns: repeat(3, 1fr) !important;
  background: #fff !important;
  border-top-color: var(--blackmon-line) !important;
}

.blackmon-deal-nav button {
  color: #545b64 !important;
  background: #fff !important;
}

.blackmon-deal-nav button:hover {
  color: var(--blackmon-red) !important;
  background: var(--blackmon-red-soft) !important;
}

.floating-deal {
  color: #fff !important;
  background: var(--blackmon-red) !important;
  border-color: rgba(255, 255, 255, .5) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 40px rgba(201, 20, 30, .30) !important;
}

/* Footer ---------------------------------------------------------------- */

.site-footer {
  color: rgba(255, 255, 255, .72) !important;
  background:
    radial-gradient(circle at 8% 10%, rgba(201, 20, 30, .13), transparent 26%),
    #111316 !important;
  border-top: 0 !important;
}

.site-footer h4 {
  color: #fff !important;
}

.site-footer a {
  color: rgba(255, 255, 255, .72) !important;
}

.site-footer a:hover {
  color: #ff727a !important;
}

.site-footer .footer-logo,
.footer-logo {
  width: 250px !important;
  max-height: none !important;
  margin: 0 0 24px !important;
  padding: 10px 13px !important;
  background: rgba(255, 255, 255, .98) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 12px !important;
}

.footer-bottom {
  border-top-color: rgba(255, 255, 255, .11) !important;
}

/* Revision 2: centered branding and final red/graphite cleanup --------- */

.brand,
.tsc-header .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.brand img,
.tsc-header .brand img,
.mobile-menu-head img,
.deal-brand img {
  object-position: center center !important;
}

.deal-head,
.scheduler-head {
  position: relative;
  justify-content: center !important;
}

.deal-brand {
  justify-content: center !important;
}

.deal-close {
  position: absolute !important;
  right: 20px;
}

.content-card.dark {
  color: #fff !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(201, 20, 30, .19), transparent 33%),
    var(--blackmon-ink) !important;
  border-color: #2b2e33 !important;
  border-top: 4px solid var(--blackmon-red) !important;
}

.content-card.dark h2,
.content-card.dark h3 {
  color: #fff !important;
}

.content-card.dark p {
  color: rgba(255, 255, 255, .72) !important;
}

.dealer-map-section {
  background:
    radial-gradient(circle at 12% 12%, rgba(201, 20, 30, .16), transparent 34%),
    var(--blackmon-ink) !important;
}

.map-location-card__link:hover,
.map-location-card__stars {
  color: var(--blackmon-red) !important;
}

.lender-card,
.team-card {
  border-top-color: var(--blackmon-red) !important;
}

.warranty-submit,
.mobile-filter-label,
.request-info-submit {
  color: #fff !important;
  background: var(--blackmon-red) !important;
  border-color: var(--blackmon-red) !important;
}

.warranty-submit:hover,
.mobile-filter-label:hover,
.request-info-submit:hover {
  background: var(--blackmon-red-dark) !important;
  border-color: var(--blackmon-red-dark) !important;
}

.mission-actions {
  margin-top: 30px;
}

/* Featured inventory: white cards with Blackmon red accents. */
.home-featured-overlap .featured-card {
  border-color: var(--blackmon-line) !important;
  background: #fff !important;
  box-shadow: var(--blackmon-shadow-soft) !important;
}

.home-featured-overlap .featured-card::before {
  background: var(--blackmon-red) !important;
}

.home-featured-overlap .featured-card:hover {
  border-color: rgba(201, 20, 30, .34) !important;
  box-shadow: var(--blackmon-shadow) !important;
}

.home-featured-overlap .featured-card .vehicle-media {
  border-bottom-color: var(--blackmon-line) !important;
  background: #f1f3f5 !important;
}

.home-featured-overlap .featured-card .vehicle-media::after {
  background: linear-gradient(to top, rgba(23, 25, 28, .20), transparent) !important;
}

.home-featured-overlap .featured-card .featured-condition {
  color: var(--blackmon-red-dark) !important;
  border-color: rgba(201, 20, 30, .18) !important;
  box-shadow: 0 4px 14px rgba(23, 25, 28, .12) !important;
}

.home-featured-overlap .featured-card .vehicle-body {
  background: #fff !important;
}

.home-featured-overlap .featured-card .vehicle-sub {
  color: var(--blackmon-red-dark) !important;
}

.home-featured-overlap .featured-card .vehicle-title,
.home-featured-overlap .featured-card .featured-fact strong {
  color: var(--blackmon-ink) !important;
}

.home-featured-overlap .featured-card .vehicle-meta-row {
  color: var(--blackmon-muted) !important;
}

.home-featured-overlap .featured-card .featured-fact {
  border-color: var(--blackmon-line) !important;
  background: var(--blackmon-canvas) !important;
}

.home-featured-overlap .featured-card .featured-fact small,
.home-featured-overlap .featured-card .featured-price-label {
  color: #7a828c !important;
}

.home-featured-overlap .featured-card .featured-price-wrap {
  border-top-color: var(--blackmon-line) !important;
}

.home-featured-overlap .featured-card .price {
  color: var(--blackmon-ink) !important;
}

.home-featured-overlap .featured-card .price::before {
  background: var(--blackmon-red) !important;
}

.home-featured-overlap .featured-card .card-btn,
.home-featured-overlap .featured-card .card-btn:hover,
.home-featured-overlap .featured-card:hover .card-btn {
  color: #fff !important;
  background: var(--blackmon-red) !important;
  border-color: var(--blackmon-red) !important;
}

.home-featured-overlap .featured-card .card-btn:hover,
.home-featured-overlap .featured-card:hover .card-btn {
  background: var(--blackmon-red-dark) !important;
  border-color: var(--blackmon-red-dark) !important;
}

/* Catalogue: same light inventory card language as the homepage. */
.inventory-page,
.native-inventory,
.inventory-results,
.original-card-grid {
  background: var(--blackmon-canvas) !important;
}

.filter-title {
  color: #fff !important;
  background: var(--blackmon-ink) !important;
  border-bottom-color: var(--blackmon-red) !important;
}

.filter-title > span:first-child,
.filter-toggle:hover,
.filter-content.check-list label:hover,
.original-card-grid .vehicle-card-kicker {
  color: var(--blackmon-red-dark) !important;
}

.active-filter-count,
.clear-filters:hover {
  color: #fff !important;
  background: var(--blackmon-red) !important;
  border-color: var(--blackmon-red) !important;
}

.clear-filters {
  color: var(--blackmon-red-dark) !important;
  border-color: var(--blackmon-red) !important;
}

.original-card-grid .vehicle-card {
  border-color: var(--blackmon-line) !important;
  background: #fff !important;
  box-shadow: var(--blackmon-shadow-soft) !important;
}

.original-card-grid .vehicle-card::before {
  background: var(--blackmon-red) !important;
}

.original-card-grid .vehicle-card:hover {
  border-color: rgba(201, 20, 30, .34) !important;
  box-shadow: var(--blackmon-shadow) !important;
}

.original-card-grid .vehicle-media {
  border-bottom-color: var(--blackmon-line) !important;
  background: #f1f3f5 !important;
}

.original-card-grid .vehicle-media::after {
  background: linear-gradient(to top, rgba(23, 25, 28, .20), transparent) !important;
}

.original-card-grid .vehicle-card-badge.condition {
  color: var(--blackmon-red-dark) !important;
  border-color: rgba(201, 20, 30, .18) !important;
}

.original-card-grid .vehicle-card-badge.type,
.original-card-grid .vehicle-card-stock {
  color: #fff !important;
  background: rgba(23, 25, 28, .90) !important;
}

.original-card-grid .vehicle-body {
  background: #fff !important;
}

.original-card-grid .vehicle-title,
.original-card-grid .vehicle-card-detail strong,
.original-card-grid .price {
  color: var(--blackmon-ink) !important;
}

.original-card-grid .vehicle-meta-row,
.original-card-grid .vehicle-card-detail small,
.original-card-grid .vehicle-price-label {
  color: var(--blackmon-muted) !important;
}

.original-card-grid .vehicle-card-detail {
  border-color: var(--blackmon-line) !important;
  background: var(--blackmon-canvas) !important;
}

.original-card-grid .vehicle-card-bottom {
  border-top-color: var(--blackmon-line) !important;
}

.original-card-grid .price::before {
  background: var(--blackmon-red) !important;
}

.original-card-grid .card-btn,
.original-card-grid .vehicle-card:hover .card-btn,
.original-card-grid .card-btn:hover {
  color: #fff !important;
  background: var(--blackmon-red) !important;
  border-color: var(--blackmon-red) !important;
}

.original-card-grid .vehicle-card:hover .card-btn,
.original-card-grid .card-btn:hover {
  background: var(--blackmon-red-dark) !important;
  border-color: var(--blackmon-red-dark) !important;
}

/* Reviews: proof and a clear reason to choose Blackmon. */
.blackmon-reviews {
  color: var(--blackmon-ink) !important;
  background:
    radial-gradient(circle at 82% 10%, rgba(201, 20, 30, .06), transparent 30%),
    var(--blackmon-canvas) !important;
}

.blackmon-reviews::before {
  display: none !important;
}

.reviews-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: end;
  margin-bottom: 44px;
}

.reviews-heading h2 {
  max-width: 850px;
  margin: 18px 0 0 !important;
  color: var(--blackmon-ink) !important;
  font-family: var(--sans) !important;
  font-size: clamp(44px, 5.2vw, 76px) !important;
  font-weight: 760 !important;
  line-height: .98 !important;
  letter-spacing: -.06em !important;
  text-align: left !important;
}

.review-score-card {
  display: grid;
  min-width: 230px;
  padding: 22px 26px;
  color: #fff;
  background: var(--blackmon-ink);
  border-bottom: 4px solid var(--blackmon-red);
  border-radius: 15px;
  box-shadow: var(--blackmon-shadow-soft);
}

.review-score-card strong {
  font-size: 46px;
  line-height: 1;
  letter-spacing: -.06em;
}

.review-score-card .stars {
  margin: 8px 0 5px !important;
  color: #f1b91d !important;
  letter-spacing: .08em;
}

.review-score-card > span:last-child {
  color: rgba(255, 255, 255, .66);
  font-size: 13px;
}

.blackmon-reviews .review-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  text-align: left !important;
}

.blackmon-reviews .review-card {
  min-height: 330px !important;
  padding: 30px !important;
  background: #fff !important;
  border: 1px solid var(--blackmon-line) !important;
  border-top: 4px solid var(--blackmon-red) !important;
  border-radius: 16px !important;
  box-shadow: var(--blackmon-shadow-soft) !important;
}

.blackmon-reviews .review-card-top .stars {
  color: #f1b91d !important;
}

.blackmon-reviews .review-source {
  color: var(--blackmon-red-dark) !important;
  background: var(--blackmon-red-soft) !important;
  border-color: rgba(201, 20, 30, .18) !important;
}

.blackmon-reviews .review-quote-mark {
  color: rgba(201, 20, 30, .28) !important;
}

.blackmon-reviews .reviewer .avatar {
  background: var(--blackmon-red) !important;
}

.blackmon-reviews .review-expand,
.blackmon-reviews .review-expand:hover,
.blackmon-reviews .review-expand:focus-visible {
  color: var(--blackmon-red-dark) !important;
}

.blackmon-reviews .slide-arrow {
  color: #fff !important;
  background: var(--blackmon-ink) !important;
  border-color: var(--blackmon-ink) !important;
}

.blackmon-reviews .slide-arrow:hover {
  background: var(--blackmon-red) !important;
  border-color: var(--blackmon-red) !important;
}

.blackmon-reviews .dot.active {
  background: var(--blackmon-red) !important;
}

/* Team page */
.blackmon-team-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.blackmon-team-card {
  padding: 0 !important;
  border: 1px solid var(--blackmon-line) !important;
  border-top: 0 !important;
  border-radius: 16px !important;
  box-shadow: var(--blackmon-shadow-soft) !important;
}

.blackmon-team-card .team-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-bottom: 5px solid var(--blackmon-red);
  background: #15181c;
}

.blackmon-team-card .team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.team-photo-slot {
  display: grid;
  aspect-ratio: 4 / 5;
  place-items: end start;
  padding: 24px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 76% 17%, rgba(201, 20, 30, .56), transparent 32%),
    linear-gradient(145deg, #111316, #2a2e34);
  border-bottom: 5px solid var(--blackmon-red);
}

.team-photo-slot span {
  color: rgba(255, 255, 255, .20);
  font-size: clamp(72px, 7vw, 118px);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.08em;
}

.blackmon-team-card .team-info {
  padding: 25px 24px 28px !important;
  text-align: left !important;
}

.blackmon-team-card .team-info h3 {
  color: var(--blackmon-ink) !important;
  font-size: 24px !important;
  letter-spacing: -.04em;
}

.blackmon-team-card .team-info p {
  color: #626a73 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1280px) {
  .header-search,
  .tsc-header .header-search {
    min-width: 220px !important;
    max-width: 300px !important;
  }

  .nav,
  .tsc-header .nav {
    gap: 16px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 900px) {
  .container,
  .narrow {
    width: min(100% - 38px, var(--container)) !important;
  }

  .header-inner,
  .tsc-header .header-inner {
    height: 74px !important;
  }

  .brand img,
  .tsc-header .brand img {
    width: 188px !important;
    max-height: 52px !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .hero,
  .home-hero {
    min-height: 650px !important;
    background:
      linear-gradient(90deg, rgba(11, 13, 15, .86), rgba(11, 13, 15, .46)),
      url('/assets/images/blackmon-hero.webp') 62% center / cover no-repeat !important;
  }

  .home-hero .hero-content,
  .hero-content {
    width: min(100% - 38px, var(--container)) !important;
    padding: 96px 0 132px !important;
  }

  .hero h1,
  .home-hero h1 {
    max-width: 660px !important;
    font-size: clamp(48px, 11vw, 74px) !important;
  }

  .hero-slider-arrows {
    right: 20px !important;
    bottom: 84px !important;
  }

  .split-cards,
  .principle-grid,
  .team-role-grid {
    grid-template-columns: 1fr !important;
  }

  .process-card {
    min-height: auto !important;
  }

  .mission-grid {
    grid-template-columns: 1fr !important;
  }

  .mission-img img {
    min-height: 360px !important;
  }

  .principles-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .reviews-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .review-score-card {
    width: min(100%, 310px);
  }

  .blackmon-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .principle-card:nth-child(2) {
    transform: none;
  }

  .blackmon-deal-options {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .section {
    padding: 72px 0 !important;
  }

  .page-hero,
  .page-hero.light {
    min-height: 390px !important;
    padding: 78px 0 72px !important;
  }

  .page-hero h1,
  .page-hero.light h1 {
    font-size: clamp(40px, 13vw, 60px) !important;
  }

  .home-hero .hero-content,
  .hero-content {
    padding-bottom: 118px !important;
  }

  .hero h1,
  .home-hero h1 {
    font-size: clamp(43px, 13.5vw, 61px) !important;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-slider-arrows {
    display: none !important;
  }

  .home-featured-overlap .vehicle-card {
    min-width: min(88vw, 330px) !important;
    max-width: min(88vw, 330px) !important;
  }

  .process-card,
  .principle-card,
  .team-role-card {
    padding: 30px 25px !important;
  }

  .mission-img::before {
    left: -10px;
    bottom: -10px;
  }

  .mission-img img {
    min-height: 290px !important;
  }

  .principles-heading h2 {
    font-size: 42px !important;
  }

  .reviews-heading h2 {
    font-size: 42px !important;
  }

  .blackmon-reviews .review-grid {
    display: flex !important;
    grid-template-columns: none !important;
  }

  .blackmon-team-grid {
    grid-template-columns: 1fr !important;
  }

  .blackmon-quick-panel {
    padding: 24px 18px;
  }

  .deal-option {
    min-height: 88px !important;
  }

  .quick-panel-note span {
    display: block;
    height: 0;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}