/* ============================================================
   BMW STRICT — final enforcement layer
   Loaded LAST. Overrides any earlier rule that drifted from
   the DESIGN-bmw markdown spec.
   Section numbers below match the markdown headings.
   ============================================================ */

/* ============ COLOR TOKENS (re-assert) ============ */
:root {
  --primary: #1c69d4;
  --primary-active: #0653b6;
  --ink: #262626;
  --body: #3c3c3c;
  --body-strong: #1a1a1a;
  --muted: #6b6b6b;
  --muted-soft: #9a9a9a;
  --hairline: #e6e6e6;
  --hairline-strong: #cccccc;
  --canvas: #ffffff;
  --surface-soft: #f7f7f7;
  --surface-card: #fafafa;
  --surface-strong: #ebebeb;
  --surface-dark: #1a2129;
  --surface-dark-elev: #262e38;
  --on-dark-soft: #bbbbbb;
  --blue: #1c69d4;
  --blue-active: #0653b6;
}

/* ============ TYPE TOKENS ============ */
html, body {
  font-family: 'Lumera Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  color: var(--body) !important;
  background: var(--canvas) !important;
}

/* Display — 700, normal case, 0 letter-spacing */
.display-xl, h1.display, .hero-title {
  font-size: clamp(40px, 5.6vw, 64px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
  margin: 0;
}
.display-lg, h1, .lab-page__title {
  font-size: clamp(36px, 4.5vw, 48px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
  margin: 0;
}
.display-md, h2 {
  font-size: clamp(26px, 3vw, 32px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
  margin: 0;
}
.display-sm, h3 {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
  margin: 0;
}
.title-lg, h4 { font-size: 20px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0 !important; color: var(--ink) !important; }
.title-md       { font-size: 18px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: 0 !important; color: var(--ink) !important; }
.title-sm       { font-size: 16px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: 0 !important; color: var(--ink) !important; }

/* Body — Light 300 */
p, .body-md {
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  color: var(--body) !important;
}
.body-sm {
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
  color: var(--body) !important;
}
.caption {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.5px !important;
  color: var(--muted) !important;
}

/* Eyebrow / label-uppercase — 13 / 700 / 1.5px tracking */
.eyebrow, .label-uppercase {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}
.eyebrow.on-dark { color: var(--blue) !important; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 0 !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.btn--blue, .btn--primary {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}
.btn--blue:hover, .btn--primary:hover {
  background: var(--primary-active) !important;
  border-color: var(--primary-active) !important;
  color: #fff !important;
}
.btn--ghost-light, .btn--secondary {
  background: var(--canvas) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hairline-strong) !important;
}
.btn--ghost-light:hover { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
.btn--ghost-dark, .btn--dark {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}
.btn--ghost-dark:hover, .btn--dark:hover {
  background: #fff !important;
  color: var(--ink) !important;
  border-color: #fff !important;
}
.btn--lg { padding: 16px 36px !important; height: 56px !important; min-height: 56px !important; }

/* Button text-link — UPPERCASE letterspaced inline */
.link-arrow, .button-text-link {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.link-arrow:hover, .button-text-link:hover { color: var(--primary) !important; }

/* ============ NAV — top bar 64px white-on-canvas (BMW strict) is option,
   but we keep dark navy because the brand reads better. Keep dark + 64px height. */
.nav { height: 64px !important; }
.nav__brand { gap: 12px !important; }
.nav__brand img { height: 36px !important; width: auto !important; }
.nav__brand span { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 2.4px !important; }
.nav__links { gap: 28px !important; }
.nav__links a {
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  color: rgba(255,255,255,0.85) !important;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: #fff !important; }

/* ============ BANDS / SECTION RHYTHM — 80px ============ */
.band, section.band { padding: 80px 0 !important; }
.band--light { background: var(--canvas) !important; }
.band--dark  { background: var(--surface-dark) !important; }
@media (max-width: 720px) {
  .band, section.band { padding: 56px 0 !important; }
}

/* Inside dark bands — text colors */
.band--dark, .band--dark p, .band--dark h1, .band--dark h2, .band--dark h3,
.band--dark h4, .band--dark .display-xl, .band--dark .display-lg,
.band--dark .display-md, .band--dark .display-sm,
.band--dark .title-lg, .band--dark .title-md, .band--dark .title-sm,
.band--dark li {
  color: #fff !important;
}
.band--dark p, .band--dark .page-head__lede {
  color: rgba(255,255,255,0.78) !important;
  font-weight: 300 !important;
}

/* ============ MODEL / PRODUCT CARDS ============ */
.card, .model-card {
  background: var(--canvas) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: border-color 240ms ease, transform 240ms ease !important;
}
.card:hover, .model-card:hover {
  border-color: var(--ink) !important;
  transform: translateY(-2px) !important;
}
.card__photo, .model-card-photo {
  background: var(--surface-card) !important;
  border-radius: 0 !important;
  padding: 16px !important;
  aspect-ratio: 1 !important;
}
.card__body, .model-card__body {
  padding: 24px !important;
}
.card__cat {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--primary) !important;
}
.card__name {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
}
.card__meta {
  font-size: 14px !important;
  font-weight: 300 !important;
  color: var(--body) !important;
}
.card__price {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}
.card__cta {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
}
.card__row {
  border-top: 1px solid var(--hairline) !important;
  padding-top: 16px !important;
}

/* ============ FILTER CHIPS ============ */
.chip, .filter-chip {
  background: var(--canvas) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: 0 !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  cursor: pointer !important;
}
.chip.is-active, .filter-chip.is-active {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}

/* ============ INPUTS ============ */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], input[type="date"],
input[type="password"], select, textarea {
  background: var(--canvas) !important;
  color: var(--ink) !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  height: 48px !important;
  outline: none !important;
}
textarea { height: auto !important; min-height: 96px !important; }
input:focus, select:focus, textarea:focus { border-color: var(--ink) !important; }

/* ============ HERO BANDS ============ */
.hero, .hero-band-dark {
  background: var(--surface-dark) !important;
  color: #fff !important;
  padding: 80px var(--pad-x) !important;
  min-height: 60vh !important;
}
.hero__inner > .eyebrow.on-dark { color: var(--blue) !important; }
.hero-title {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: clamp(40px, 5.6vw, 64px) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.hero__lead, .hero-sub {
  color: rgba(255,255,255,0.78) !important;
  font-weight: 300 !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

/* ============ FOOTER — BMW spec: surface-soft, 64px padding ============ */
.footer-v2 {
  background: var(--surface-soft) !important;
  color: var(--body) !important;
  padding: 64px var(--pad-x) !important;
  border-top: 1px solid var(--hairline) !important;
}
.footer-v2__inner { padding: 0 !important; }
.footer-v2__brand img {
  mix-blend-mode: normal !important;
  height: 56px !important;
}
.footer-v2__brand p {
  color: var(--body) !important;
  font-weight: 300 !important;
  font-size: 14px !important;
}
.footer-v2__social {
  border-bottom: 1px solid var(--hairline) !important;
  padding: 12px 0 28px !important;
}
.footer-v2__social a {
  background: var(--canvas) !important;
  border: 1px solid var(--hairline-strong) !important;
  color: var(--ink) !important;
}
.footer-v2__social a:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.footer-v2__cols {
  border-bottom: 1px solid var(--hairline) !important;
  padding: 32px 0 !important;
}
.footer-v2__cols h5 {
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
.footer-v2__cols a {
  color: var(--body) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
}
.footer-v2__cols a:hover { color: var(--primary) !important; }
.footer-v2__base {
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
}

/* ============ COMPLIANCE STRIP ============ */
.compliance {
  background: #000 !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
.compliance b { color: #fff !important; font-weight: 700 !important; }

/* ============ NO drop shadows anywhere ============ */
.card, .model-card, .lab-card, .why-card, .review-card,
.recon-calc, .verify-widget, .checkout-summary,
.btn, input, select, textarea {
  box-shadow: none !important;
}

/* ============ Hairlines — section dividers ============ */
.standards__row {
  padding-bottom: 32px !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}
.standards__num {
  color: var(--blue) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  background: none !important;
  -webkit-text-fill-color: var(--blue) !important;
}

/* ============ Breadcrumbs — quiet on light surface ============ */
.breadcrumbs {
  background: var(--surface-soft) !important;
  border-bottom: 1px solid var(--hairline) !important;
  border-top: 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.4px !important;
  color: var(--muted) !important;
  padding: 14px 0 !important;
}
.breadcrumbs a { color: var(--body) !important; }
.breadcrumbs a:hover { color: var(--primary) !important; }
.breadcrumbs span[aria-current="page"] { color: var(--ink) !important; font-weight: 700 !important; }
.bc-sep { color: var(--muted-soft) !important; padding: 0 6px !important; }

/* ============ FAQ accordion (BMW pattern) ============ */
.faq {
  border-top: 1px solid var(--hairline) !important;
  margin: 0 !important;
}
.faq details {
  border: 0 !important;
  border-bottom: 1px solid var(--hairline) !important;
  padding: 24px 0 !important;
}
.faq summary {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  list-style: none !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.faq summary::after {
  content: "+" !important;
  color: var(--primary) !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  margin-left: 16px !important;
}
.faq details[open] summary::after { content: "\2212" !important; }
.faq p {
  margin: 14px 0 0 !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color: var(--body) !important;
  max-width: 70ch !important;
}

/* ============ Page heads — clean, never boxed ============ */
.page-head {
  margin-bottom: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.page-head .eyebrow { display: inline-block; margin-bottom: 12px !important; }

/* ============ DEFENSIVE — re-confirm hide list ============ */
.tabs-mobile, .marquee, .age-gate, .intro-modal,
.footer__newsletter, section.reviews, section[data-reviews],
.ig-band, .ig-grid, .ig-tile, .ig-follow, .social-row,
section.newsletter:not([data-keep]),
.footer:not(.footer-v2),
.scroll-hint, .compliance-tab {
  display: none !important;
}

/* ---- Feature strip (4-up under hero) — explicit, locked ---- */
.features-strip {
  background: var(--canvas) !important;
  border-top: 1px solid var(--hairline) !important;
  border-bottom: 1px solid var(--hairline) !important;
}
.features-strip__inner {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.feat {
  padding: 36px 28px !important;
  border-right: 1px solid var(--hairline) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.feat:last-child { border-right: 0 !important; }
.feat__icon {
  width: 28px !important;
  height: 28px !important;
  color: var(--primary) !important;
}
.feat__h {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
.feat__p {
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: var(--body) !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  .features-strip__inner { grid-template-columns: 1fr 1fr !important; }
  .feat { border-right: 0 !important; border-bottom: 1px solid var(--hairline) !important; }
  .feat:nth-child(odd) { border-right: 1px solid var(--hairline) !important; }
  .feat:nth-last-child(-n+2) { border-bottom: 0 !important; }
}
@media (max-width: 600px) {
  .features-strip__inner { grid-template-columns: 1fr !important; }
  .feat { border-right: 0 !important; border-bottom: 1px solid var(--hairline) !important; padding: 24px 20px !important; }
  .feat:last-child { border-bottom: 0 !important; }
}