@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-bold.woff2") format("woff2");
}
:root {
  --font-editorial: "Barlow Semi Condensed", "Inter", system-ui, sans-serif;
  --race-red: #e8504c;
  --race-red-ink: #a82522;
}

.grid-hero h1, .range-hero h1, .range-chassis h1,
.showcase h2, .showcase-step h3,
.section-head h2, .home #products h2,
.home .engineering .approach-title, .home .film .section-head h2,
.home .contact h2, .interior h2, .interior .block h2,
.interior .price-group h2, .interior .price-note h2, .workshop h2 {
  font-family: var(--font-editorial);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.017em;
  text-transform: none;
}
.grid-hero h1 { font-size: clamp(3.25rem, 6.8vw, 8.25rem); }
.range-hero h1, .range-chassis h1 { font-size: clamp(3.3rem, 8.5vw, 9rem); }
.showcase h2, .home #products h2, .section-head h2, .workshop h2 { font-size: clamp(3rem, 7.2vw, 8rem); }
.interior .block h2 { font-size: clamp(2.15rem, 4.25vw, 4.5rem); }
.interior .price-group h2, .interior .price-note h2 { font-size: clamp(1.65rem, 3.2vw, 3.5rem); }
.showcase-step h3 { font-size: clamp(2.1rem, 3.8vw, 4.2rem); }
.home .product-card h3 { font-family: var(--font-editorial); font-weight: 700; letter-spacing: -.018em; }
.hero-optics {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-image: linear-gradient(90deg, #2228 1px, transparent 1px),
    linear-gradient(#2228 1px, transparent 1px),
    radial-gradient(circle at var(--optics-x, 50%) var(--optics-y, 50%), #f5f5f5 0, transparent 42%);
  background-size: 25px 25px, 25px 25px, 100% 100%;
  mask-image: radial-gradient(circle clamp(100px, 22vw, 260px) at var(--optics-x, 50%) var(--optics-y, 50%), #000 0, transparent 100%);
  mix-blend-mode: soft-light;
}
.grid-hero-art figcaption { z-index: 1; }

@media (max-width: 500px) {
  .grid-hero h1 { font-size: clamp(2.8rem, 10.1vw, 4.1rem); }
  .range-hero h1 { font-size: clamp(2.85rem, 10vw, 4.2rem); }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .is-transition-photo { view-transition-name: product-photo; }
  ::view-transition-group(product-photo) {
    animation-duration: .55s;
    animation-timing-function: cubic-bezier(.22,.72,.24,1);
    z-index: 2;
  }
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: .32s;
  }

  @supports (animation-timeline: view()) {
    .workshop .container {
      animation: workshop-shift linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 80%;
    }
    @keyframes workshop-shift {
      from { clip-path: inset(0 0 90%); translate: 0 2rem; }
      to { clip-path: inset(0 0 0); translate: 0 0; }
    }
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-optics { transition: opacity .25s ease; }
  .grid-hero-art:hover .hero-optics { opacity: .34; }
}

/* A small red detail against the darker surfaces. */
.grid-hero-art figcaption { border-inline-start: 3px solid var(--race-red); }
.stage-progress span { background: var(--race-red); }
.workshop h2 { border-inline-start-color: var(--race-red); }
.platform-rail a:hover span, .platform-rail a:focus-visible span { color: var(--race-red-ink); }

.submenu a[aria-current="page"] { color: #fff; border-inline-start: 2px solid var(--race-red); }
@media (min-width: 861px) {
  .submenu {
    background: #181818;
    border-top-color: var(--race-red);
    box-shadow: 0 12px 28px rgb(0 0 0 / .27);
  }
  .submenu a small { color: #d2d2d2; }
  .submenu a:hover { background: rgb(255 255 255 / .12); }
  @supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
    .submenu {
      background: rgb(14 14 14 / .78);
      -webkit-backdrop-filter: blur(8px) saturate(.8);
      backdrop-filter: blur(8px) saturate(.8);
    }
  }
}
@media (max-width: 860px) {
  @supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
    .nav {
      background: rgb(14 14 14 / .86);
      -webkit-backdrop-filter: blur(10px) saturate(.75);
      backdrop-filter: blur(10px) saturate(.75);
    }
  }
}