:root {
  --gold: #2478b7;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body,
.btn,
.header-cta,
.text-link,
.section-heading > a,
.contact-direct a,
.menu,
.floating-call {
  font-synthesis: none;
}

.brand-logo img {
  image-rendering: auto;
  object-fit: contain;
  clip-path: none;
  transform: none;
  backface-visibility: hidden;
}

.intro-strip,
.btn.gold,
.floating-call {
  background: #2478b7;
  border-color: #2478b7;
}

.intro-strip,
.intro-strip span,
.btn.gold,
.floating-call {
  color: #fff;
}

/* Keep every page dark from top to bottom. */
html,
body,
main,
.section,
.feature,
.detail,
.coverage,
.contact,
.repair-showcase,
.gallery-pairs,
.before-after {
  background-color: #080a0d;
  color: #f7f4eb;
}

.feature,
.detail,
.coverage,
.contact,
.repair-showcase,
.gallery-pairs,
.before-after {
  background: #080a0d;
}

.repair-showcase .eyebrow,
.gallery-pairs .eyebrow,
.before-after .eyebrow,
.repair-showcase > div > p:not(.eyebrow) {
  color: #b8c1c7;
}

/* The car remains fixed while the page content scrolls over it. */
.hero {
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* Show the car first, then introduce the hero wording two seconds later. */
.hero-copy,
.hero-index {
  opacity: 0;
  animation: rolling-clean-copy-arrival 700ms ease-out 2s forwards;
}

@keyframes rolling-clean-copy-arrival {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy,
  .hero-index {
    animation-name: rolling-clean-copy-arrival-reduced;
  }

  @keyframes rolling-clean-copy-arrival-reduced {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}