/* Sinaracing · track-inspired editorial design */
:root {
  --carbon: #141414;
  --carbon-2: #222;
  --paper: #efefef;
  --white: #fff;
  --ink: #161616;
  --ink-soft: #484848;
  --line: #d0d0d0;
  --signal: #dafe68;
  --maxw: 1640px;
  --gutter: clamp(1rem, 4.2vw, 5rem);
  --radius: 0px;
  --frame-radius: 0px;
  --frame-cut: clamp(10px, 1.5vw, 20px);
}

html { scroll-padding-top: calc(var(--header-h) + 4.25rem); }
body { background: var(--paper); }
.site-header::before { background: rgb(20 20 20 / .97); }
.site-header .bar { max-width: none; }
.brand-name { font-weight: 800; }
.brand-tag { display: none; }
.nav-link.nav-price { border-radius: 0; }
.submenu { border-top: 2px solid var(--signal); }
.page-progress {
  position: fixed;
  z-index: 101;
  top: calc(var(--header-h) - 2px);
  width: 100%;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

.btn, .range-actions .btn, .launch-actions .btn {
  min-height: 48px;
  border-radius: 0;
  padding-inline: clamp(.9rem, 1.8vw, 1.35rem);
}
.btn:focus-visible, .product-card:focus-within, .range-hero :focus-visible { outline-offset: 3px; }
.section-head h2, .home #products h2, .showcase h2, .interior h2,
.home .engineering .approach-title, .home .film .section-head h2, .home .contact h2,
.workshop h2 {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8vw, 9rem);
  font-weight: 800;
  line-height: .81;
  text-transform: uppercase;
  letter-spacing: -.022em;
  text-wrap: initial;
}
.section-head { align-items: end; }
.section-head p { line-height: 1.5; }

.grid-hero {
  display: grid;
  margin-top: var(--header-h);
  isolation: isolate;
}
.grid-hero-copy {
  position: relative;
  z-index: 1;
  background: var(--signal);
  padding: clamp(2.7rem, 6.5vw, 8rem) var(--gutter);
}
.grid-kicker, .grid-hero-art figcaption {
  font: 600 clamp(.66rem, 1.1vw, .84rem)/1.25 var(--font-label);
  text-transform: uppercase;
  letter-spacing: .105em;
}
.grid-hero h1 {
  font: 800 clamp(4rem, 9.3vw, 10rem)/.79 var(--font-display);
  letter-spacing: -.018em;
  text-transform: uppercase;
  text-wrap: initial;
  margin: 0;
}
.grid-hero-copy > p:not(.grid-kicker) { margin: 1.45rem 0; max-width: 33ch; }
.grid-actions { display: flex; align-items: start; flex-wrap: wrap; gap: .5rem; }
.grid-actions .btn-primary { background: var(--ink); color: #fff; }
.grid-actions .btn-primary:hover { background: #393939; }
.grid-hero-art {
  display: grid;
  position: relative;
  isolation: isolate;
  min-height: clamp(16rem, 52vw, 37rem);
  margin: 0;
  background: #ebebeb;
  overflow: hidden;
}
.grid-hero-image, .grid-hero-image picture { position: absolute; inset: 0; }
.grid-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 48%;
  mix-blend-mode: multiply;
}
.grid-hero-art figcaption {
  display: flex;
  gap: .75rem;
  align-items: center;
  align-self: end;
  justify-self: start;
  position: relative;
  padding: .75rem 1rem;
  background: var(--carbon);
  color: #fff;
  margin: clamp(.85rem, 2.1vw, 2rem);
}
.grid-hero-art figcaption span { color: var(--signal); }
.platform-rail { background: var(--carbon); color: #fff; }
.platform-rail .container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-inline: 0;
}
.platform-rail a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .35rem;
  min-height: 52px;
  padding: .75rem var(--gutter);
  border: 1px solid #3b3b3b;
  border-top: 0;
  font: 600 clamp(.75rem, 1.2vw, 1rem)/1.2 var(--font-label);
  text-decoration: none;
}
.platform-rail a span { color: var(--signal); }
.platform-rail a:hover, .platform-rail a:focus-visible { background: var(--signal); color: var(--ink); }
.platform-rail a:hover span, .platform-rail a:focus-visible span { color: inherit; }
.platform-rail a:focus-visible { outline-offset: -3px; outline-color: var(--carbon); }

.showcase { background: var(--carbon); padding-block: clamp(3.8rem, 8vw, 8rem); }
.showcase-intro { text-align: left; }
.showcase h2 span { color: var(--signal); }
.showcase-step h3 { font: 800 clamp(2.25rem, 4.2vw, 4.9rem)/.86 var(--font-display); text-transform: uppercase; letter-spacing: -.012em; }
.showcase-step h3::before { width: 3rem; height: 3px; }
.showcase-grid.is-animated .showcase-stage {
  border-radius: 0;
  border-color: #646464;
  background: #e6e6e6;
}
.stage-images::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, #191919 1px, transparent 1px), linear-gradient(#191919 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: .1;
  mask-image: radial-gradient(ellipse, transparent 38%, #000 100%);
}
.stage-dock { background: #181818; }
.stage-controls { padding: 0; gap: 0; }
.stage-controls a { border-right: 1px solid #494949; }
.stage-controls a:last-child { border-right: 0; }
.stage-controls a:focus-visible { outline-offset: -3px; }

.home #products { background: var(--paper); }
.home .lineup { gap: 1px; background: #cbcbcb; border: 1px solid #cbcbcb; }
.home .product-card { border: 0; border-radius: 0; }
.home .product-card:not(.is-soon) .plate { clip-path: none; background: #f9f9f9; }
.home .product-card:not(.is-soon) .meta { background: var(--white); }
.home .product-card .plate { height: clamp(12rem, 27vw, 30rem); }
.home .product-card .meta { padding-bottom: clamp(1.2rem, 3vw, 3.25rem); }
.home .product-card h3 { font: 800 clamp(2.1rem, 4vw, 4.5rem)/.9 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; }
.home .product-card .meta::after { align-self: end; }
.home .product-card:focus-within { z-index: 1; outline-offset: -3px; }
.workshop { min-height: clamp(28rem, 82svh, 68rem); }
.workshop h2 { color: #fff; }
.workshop h2::first-line { color: var(--signal); }
.home .engineering .split { align-items: start; }
.home .engineering .photo-frame { clip-path: none; }
.home .engineering .principle h3 { font-size: clamp(1.55rem, 3vw, 2.4rem); text-transform: uppercase; }
.home .film { background: #1b1b1b; }
.contact h2 { overflow-wrap: anywhere; }
.site-footer { border-top: 1px solid #414141; }

.range-hero { background: var(--signal); padding-bottom: var(--gutter); }
.range-hero .crumbs { color: #333; }
.range-hero .crumbs li + li::before { color: #505050; }
.range-hero .range-composition { display: grid; }
.range-intro { max-width: none; margin: 0; text-align: left; align-self: center; min-width: 0; padding-block: clamp(1.4rem, 4vw, 4.8rem); }
.range-hero h1, .range-chassis h1 {
  font: 800 clamp(4.1rem, 10.5vw, 12rem)/.8 var(--font-display);
  letter-spacing: -.024em;
  text-transform: uppercase;
}
.range-lead { margin-inline: 0; }
.range-actions { justify-content: flex-start; }
.range-hero:not(.range-material) .btn-primary { color: #fff; background: var(--carbon); }
.range-hero:not(.range-material) .btn-primary:hover { background: #383838; }
.range-hero:not(.range-material) .launch-kicker { color: #343434; }
.range-front .range-art, .range-chassis .range-art {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  background: #fafafa;
  mix-blend-mode: normal;
  clip-path: var(--frame-shape);
  overflow: hidden;
}
.range-front .range-art img, .range-chassis .range-art img {
  width: 100%;
  height: 100%;
  min-height: 11rem;
  max-height: 35rem;
  mix-blend-mode: multiply;
}
.range-front .range-art img { aspect-ratio: 2 / 1; object-fit: contain; padding: clamp(.65rem, 2vw, 2.5rem); }
.range-wordmark { display: none; }
.range-material { background: var(--carbon); min-height: clamp(32rem, 73svh, 55rem); }
.range-material .range-composition { display: flex; min-height: clamp(20rem, 52svh, 40rem); }
.range-material .range-intro { align-self: end; }
.range-material .crumbs { color: #eee; }
.range-material .crumbs li + li::before { color: #ddd; }
.range-material::after { background: linear-gradient(90deg, rgb(15 15 15 / .92), rgb(15 15 15 / .4) 70%), linear-gradient(0deg, rgb(15 15 15 / .58), transparent 65%); }
.range-material h1 { color: #fff; }
.range-material .range-lead { color: #eee; }
.range-compact .range-composition { min-height: clamp(12rem, 30vw, 24rem); }

.interior .specs-wrap { background: var(--carbon); }
.interior .specs div { padding-inline-end: .85rem; }
.interior .block h2, .interior .price-group h2, .interior .price-note h2 { font: 800 clamp(2rem, 5vw, 5rem)/.88 var(--font-display); text-transform: uppercase; letter-spacing: -.012em; }
.interior .block { border-color: #c7c7c7; }
.interior .jump { background: rgb(239 239 239 / .95); }
.interior .jump a { border-radius: 0; font-family: var(--font-label); font-size: .8rem; }
.interior .gallery { gap: 2px; background: #d4d4d4; }
.interior .gallery .zoom { border: 0; }
.interior .gallery .zoom img { clip-path: none; }
.interior .gallery .zoom:focus-visible { outline-offset: -3px; z-index: 1; }
.esc-feature { max-width: min(72rem, 100%); }
.esc-feature figcaption { display: inline-block; margin-top: 0; padding: .55rem .85rem; background: var(--carbon); color: var(--signal); }
.interior .price-group { margin-bottom: .8rem; border-left: 4px solid var(--carbon); }
.interior .price-group:has(h2:target) { border-left-color: #688006; outline: none; }
.interior .price-note { border-top: 3px solid var(--signal); }

@media (min-width: 780px) {
  .platform-rail .container { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home .lineup .product-card { grid-column: span 6; }
}
@media (min-width: 920px) {
  .grid-hero { grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); min-height: min(calc(100svh - var(--header-h) - 52px), 62rem); }
  .grid-hero-copy { display: flex; flex-direction: column; justify-content: center; padding-inline-end: clamp(1.2rem, 3vw, 3.75rem); }
  .grid-hero h1 { font-size: clamp(4.45rem, 8.65vw, 10rem); }
  .range-front .range-composition, .range-chassis .range-composition { grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); gap: clamp(1rem, 3vw, 4rem); }
  .range-front h1, .range-chassis h1 { font-size: clamp(5rem, 8.5vw, 10rem); }
}
@media (max-width: 480px) {
  .grid-hero h1 { font-size: clamp(3.4rem, 12.2vw, 5.25rem); }
  .range-hero h1 { font-size: clamp(3.4rem, 12vw, 5.6rem); }
  .grid-actions .btn, .range-actions .btn { font-size: .8rem; }
  .grid-hero-copy > p:not(.grid-kicker), .range-lead { margin-block-start: 1.1rem; }
  .interior .price-table td.is-ask { white-space: normal; }
}
@media (prefers-reduced-motion: no-preference) {
  .grid-hero-image picture { animation: grid-hero-in .9s cubic-bezier(.2,.72,.22,1) both; }
  .grid-hero-copy h1 { animation: grid-type-in .7s cubic-bezier(.2,.72,.22,1) both; }
  @keyframes grid-hero-in { from { transform: scale(1.05); opacity: .75; } to { transform: none; opacity: 1; } }
  @keyframes grid-type-in { from { translate: 0 .23em; opacity: .65; } to { translate: 0 0; opacity: 1; } }
  @supports (animation-timeline: scroll()) {
    .page-progress { animation: grid-progress linear both; animation-timeline: scroll(root block); }
    .grid-hero-image img { animation: grid-image-depth linear both; animation-timeline: scroll(root block); animation-range: 0 75svh; }
    @keyframes grid-progress { to { transform: scaleX(1); } }
    @keyframes grid-image-depth { from { transform: scale(1); } to { transform: scale(1.15) translateX(-2%); } }
  }
  @supports (animation-timeline: view()) {
    .interior .block .gallery, .esc-feature {
      animation: grid-enter linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 72%;
    }
    @keyframes grid-enter { from { translate: 0 22px; opacity: .7; } to { translate: 0 0; opacity: 1; } }
  }
}