@font-face {
  font-family: Italiana;
  src: url("/fonts/italiana.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --ink: #0c0c0c;
  --ivory: #f1eee8;
  --muted: #bbb8b3;
  --line: rgb(241 238 232/0.27);
  --accent: #ba3630;
  --gutter: clamp(22px, 6.7vw, 130px);
  --display: Italiana, "Bodoni 72", Didot, Georgia, serif;
  --head: calc(28px + clamp(62px, 6vw, 91px));
  --photo-scale: 1;
  --hero-opacity: 1;
  --p: 0;
  --ease: cubic-bezier(0.2, 0.8, 0.25, 1);
  color-scheme: dark;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--head);
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font:
    400 clamp(15px, 1.05vw, 18px) / 1.5 Arial,
    Helvetica,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.054em;
  line-height: 0.99;
  text-wrap: balance;
}
h1 em,
h2 em {
  font-style: normal;
}
h1 {
  font-size: clamp(65px, 6.4vw, 116px);
}
h2 {
  font-size: clamp(54px, 6.5vw, 115px);
}
h3 {
  font-size: clamp(50px, 5.9vw, 102px);
}
p {
  max-width: 55ch;
}
a {
  color: inherit;
  text-decoration: none;
}
a:focus-visible,
summary:focus-visible {
  outline: 2px solid #f1eee8;
  outline-offset: 5px;
}
img {
  display: block;
  max-width: 100%;
}
::selection {
  background: #7a2926;
  color: #fff;
}
.eyebrow,
.counter,
.edition,
.scroll-cue,
.model-link,
.buy,
.foot small,
.portfolio-caption,
figcaption,
.open-label,
.close-label {
  font:
    500 10px/1.35 Arial,
    Helvetica,
    sans-serif;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.skip {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 10px 16px;
  color: var(--ink);
  background: var(--ivory);
  transform: translateY(-160%);
}
.skip:focus {
  transform: translateY(0);
}
.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  pointer-events: none;
}
.site-head a,
.site-head details,
.site-head summary {
  pointer-events: auto;
}
.offer {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #191918;
  border-bottom: 1px solid #323231;
  color: #c6c4c0;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.015em;
}
.offer span:first-child {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.offer i {
  width: 1px;
  height: 10px;
  background: #74716b;
}
.offer s {
  color: #aaa7a2;
}
.offer strong {
  color: #edeae3;
  font-weight: 500;
}
.offer small {
  font-size: 10px;
  color: #a8a59f;
  letter-spacing: 0.04em;
}
.offer .arrow {
  width: 11px;
  height: 11px;
  opacity: 0.7;
}
.nav-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: clamp(62px, 6vw, 91px);
  padding: 0 clamp(18px, 2.8vw, 55px);
  transition: background 0.35s;
  background: linear-gradient(to bottom, rgb(4 4 4/0.73), transparent);
}
.away .nav-bar,
.menu-visible .nav-bar {
  background: rgb(13 13 13/0.98);
}
.tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
  font-size: 12px;
  letter-spacing: 0.035em;
}
.tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #c7c4c0;
}
.tabs a[aria-current="page"] {
  color: var(--ivory);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.tabs em {
  color: #817e78;
  font-style: normal;
}
.signature {
  display: grid;
  place-items: center;
  min-height: 44px;
}
.signature .brand-logo {
  width: clamp(62px, 4.7vw, 77px);
  height: auto;
  clip-path: inset(0);
  transition: clip-path 350ms var(--ease);
}
.carros.away:not(.menu-visible) .nav-bar {
  background: linear-gradient(to bottom, rgb(6 6 6 / 0.76), transparent);
}
.carros.away:not(.menu-visible) .signature .brand-logo {
  /* The triangle occupies the top 45% of the supplied full lockup. */
  clip-path: inset(0 0 54%);
}
.carros .tabs,
.carros .menu summary {
  transition: transform 350ms var(--ease);
}
.carros.away:not(.menu-visible) .tabs,
.carros.away:not(.menu-visible) .menu summary {
  transform: translateY(-9px);
}
.menu {
  justify-self: end;
}
.menu summary {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  justify-content: flex-end;
  cursor: pointer;
  list-style: none;
}
.menu summary::-webkit-details-marker {
  display: none;
}
.open-label,
.close-label {
  font-size: 9px;
  letter-spacing: 0.14em;
}
.close-label,
.menu[open] .open-label {
  display: none;
}
.menu[open] .close-label {
  display: inline;
}
.menu summary i {
  display: block;
  width: 17px;
  height: 7px;
  border-block: 1px solid var(--ivory);
  transition: transform 0.25s;
}
.menu[open] summary i {
  transform: rotate(-45deg);
}
.menu-panel {
  position: fixed;
  inset: var(--head) 0 0;
  pointer-events: auto;
  background: #111110;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: auto;
  overscroll-behavior: contain;
}
.menu-body {
  padding: clamp(32px, 6vw, 90px) var(--gutter);
}
.menu-body .eyebrow {
  color: var(--muted);
  margin-bottom: 30px;
}
.menu-body nav {
  display: flex;
  flex-direction: column;
  margin-bottom: 34px;
}
.menu-body nav a {
  display: flex;
  align-items: baseline;
  gap: 17px;
  width: fit-content;
  font: 400 clamp(36px, 4.3vw, 75px) / 1.25 var(--display);
  letter-spacing: -0.045em;
}
.menu-body nav a:hover {
  color: #c7aea5;
}
.menu-body nav small {
  font: 10px Arial;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.menu-image {
  background:
    linear-gradient(90deg, #111110 0%, transparent 38%),
    url("/assets/builds.webp") center / cover;
}
.menu-visible {
  overflow: hidden;
}
.buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 46px;
  padding: 14px 21px;
  border: 1px solid #817f7b;
  background: rgb(12 12 12/0.26);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.13em;
  transition:
    color 0.25s,
    background 0.25s,
    border-color 0.25s;
}
.arrow {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.25s var(--ease);
}
.buy:hover,
.buy:focus-visible {
  color: var(--ink);
  background: var(--ivory);
  border-color: var(--ivory);
}
.buy:hover .arrow,
.offer:hover .arrow {
  transform: translate(2px, -2px);
}
.hero-run {
  position: relative;
  height: 170svh;
  background: #050505;
}
.hero {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  isolation: isolate;
  overflow: hidden;
  background: #080809;
  text-align: center;
}
.hero-picture,
.hero-picture img,
.scene-photo,
.manifesto-bg,
.portfolio-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero-picture {
  z-index: -2;
  transform: scale(var(--photo-scale));
  transform-origin: 50% 56%;
}
.hero-picture img {
  object-position: center 51%;
}
.hero:after,
.closing:after,
.portfolio-cover:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgb(6 6 6/0.05) 25%,
    transparent 65%,
    rgb(5 5 5/0.78) 100%
  );
}
.hero-title {
  position: absolute;
  top: clamp(115px, 15.7svh, 195px);
  left: 4%;
  right: 4%;
  opacity: var(--hero-opacity);
  transform: translateY(calc(var(--p) * -30px));
}
.hero-title .eyebrow {
  margin: 0 auto 15px;
  color: #d0cdc7;
}
.hero-title h1 {
  line-height: 0.93;
}
.hero-bottom {
  position: absolute;
  bottom: clamp(35px, 5.6svh, 72px);
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: var(--hero-opacity);
}
.hero-bottom p {
  color: #f0ede8;
  font-size: clamp(13px, 0.95vw, 17px);
}
.scroll-cue,
.edition {
  position: absolute;
  bottom: 25px;
  color: #c6c3bf;
  font-size: 9px;
  opacity: var(--hero-opacity);
}
.scroll-cue {
  left: clamp(18px, 2.8vw, 55px);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 35px;
}
.scroll-cue span {
  display: block;
  height: 22px;
  border-left: 1px solid currentColor;
  position: relative;
}
.scroll-cue span:after {
  content: "";
  width: 5px;
  height: 5px;
  transform: rotate(-45deg);
  position: absolute;
  bottom: 0;
  left: -3px;
  border-bottom: 1px solid;
  border-left: 1px solid;
}
.edition {
  right: clamp(18px, 2.8vw, 55px);
  bottom: 36px;
}
.progress {
  position: fixed;
  z-index: 50;
  bottom: 6px;
  left: 10px;
  right: 10px;
  height: 1px;
  background: #ffffff24;
  pointer-events: none;
}
.progress i {
  display: block;
  height: 100%;
  background: #e9e6df;
  transform-origin: 0 0;
  transform: scaleX(var(--read, 0));
}
.manifesto,
.approach,
.showroom,
.closing,
.portfolio-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.manifesto {
  min-height: 95svh;
  display: grid;
  place-items: center;
  padding: 17vh var(--gutter) 23vh;
  text-align: center;
  background: #171311;
}
.manifesto-bg {
  height: 115%;
  top: -7%;
  object-position: center 43%;
  filter: brightness(0.44);
  transform: scale(1.03);
}
.manifesto:after,
.approach:after,
.showroom:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.manifesto:after {
  background: linear-gradient(180deg, #08080844, #09080844 55%, #080808d9);
}
.manifesto-copy h2 {
  font-size: clamp(57px, 6.7vw, 115px);
}
.filmstrip {
  position: absolute;
  bottom: 5vh;
  left: 50%;
  display: flex;
  align-items: center;
  gap: clamp(5px, 1vw, 18px);
  width: max-content;
  transform: translateX(-50%);
}
.filmstrip img {
  width: clamp(49px, 5.7vw, 102px);
  aspect-ratio: 4/5;
  object-fit: cover;
}
.filmstrip img:nth-child(3n) {
  transform: translateY(-9%);
}
.filmstrip img:nth-child(3n + 1) {
  transform: translateY(8%);
}
.approach {
  min-height: 104svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(95px, 16vh, 190px) 0 clamp(60px, 10vh, 120px);
}
.approach > .scene-photo {
  object-position: center 54%;
}
.approach:after {
  background: linear-gradient(180deg, #1007078a, #160b0a40 45%, #100a09d9);
}
.approach h2 {
  padding: 0 var(--gutter);
  max-width: 1000px;
}
.approach-base {
  display: grid;
  grid-template-columns: minmax(0, 2.3fr) minmax(230px, 1fr);
  align-items: center;
  gap: 4vw;
  margin-top: 90px;
  padding-right: var(--gutter);
}
.approach-base p,
.showroom-copy p:not(.eyebrow),
.step-copy p,
.services-intro p:not(.eyebrow) {
  margin: 21px 0 25px;
  line-height: 1.55;
  color: #dedad4;
  font-size: clamp(15px, 1.1vw, 19px);
}
.brand-window {
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 8%,
    #000 90%,
    transparent
  );
}
.brand-track,
.brand-row {
  display: flex;
  align-items: center;
  width: max-content;
}
.brand-track {
  animation: marquee 57s linear infinite;
}
.brand-row {
  gap: clamp(25px, 4vw, 76px);
  padding-right: clamp(25px, 4vw, 76px);
}
.brand-row img {
  width: clamp(65px, 6vw, 105px);
  max-height: 48px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(0.9);
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
.sequence {
  position: relative;
  background: #141312;
}
.sequence-pics {
  display: none;
}
.step {
  position: relative;
}
.step-inline {
  height: 64svh;
  max-height: 820px;
}
.step-inline img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.step-copy {
  padding: clamp(40px, 7vw, 115px) var(--gutter);
}
.counter {
  display: block;
  font-size: 12px;
  color: #d3ccc5;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}
.counter i {
  padding: 0 4px;
  font-style: normal;
  color: #77746d;
}
.step-copy h3 {
  margin-bottom: 12px;
}
.step-copy p {
  max-width: 34ch;
}
.services-intro {
  min-height: 96svh;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 10vw;
  padding: clamp(90px, 10vw, 175px) var(--gutter);
  background: #101010;
}
.services-intro .eyebrow {
  margin-bottom: 26px;
  color: #c8c5bd;
}
.services-intro h2 {
  font-size: clamp(65px, 7.4vw, 135px);
}
.services-intro p:not(.eyebrow) {
  max-width: 39ch;
}
.services-intro figure {
  width: 100%;
  justify-self: end;
  align-self: center;
}
.services-intro figure img {
  width: 100%;
  height: auto;
  max-height: 66svh;
  object-fit: cover;
}
.services-intro figcaption {
  color: #aaa7a2;
  margin-top: 12px;
  font-size: 9px;
}
.services {
  background: #141414;
}
.services .step-copy h3 {
  font-size: clamp(52px, 6vw, 107px);
}
.aerial {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(60px, 7vw, 140px) var(--gutter) clamp(70px, 9vw, 150px);
  background: radial-gradient(ellipse at 50% 53%, #252322, #101010 63%);
}
.aerial-word {
  font: 400 clamp(100px, 19vw, 370px) / 1 var(--display);
  letter-spacing: -0.085em;
  color: #a49e96;
}
.aerial-cars {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 6vw, 125px);
  position: relative;
  margin: clamp(-95px, -6vw, -30px) auto -2vh;
  max-width: 1400px;
}
.aerial-cars img {
  width: min(19%, 250px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 14px #0009);
}
.aerial-cars img:nth-child(2) {
  transform: translateY(6%);
}
.aerial-end {
  position: relative;
  padding-top: 3vw;
}
.aerial-end h2 {
  font-size: clamp(60px, 9vw, 152px);
}
.aerial-end p {
  margin: 21px auto 0;
  color: #c8c5bf;
}
.showroom {
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding: clamp(90px, 13vh, 170px) var(--gutter);
}
.showroom:after {
  background: linear-gradient(
    90deg,
    #060606c9 0%,
    #08080865 42%,
    #08080805 73%
  );
}
.showroom-copy {
  max-width: 530px;
}
.showroom-copy .eyebrow {
  margin-bottom: 24px;
}
.showroom-copy p:not(.eyebrow) {
  max-width: 35ch;
}
.stock {
  align-items: flex-start;
  text-align: center;
  justify-content: center;
}
.stock:after {
  background: linear-gradient(180deg, #030303cc, #08080855 60%, #08080811);
}
.stock .showroom-copy p:not(.eyebrow) {
  margin-inline: auto;
}
.closing {
  min-height: 100svh;
  text-align: center;
  display: flex;
  justify-content: center;
  background: #070707;
  padding: clamp(95px, 15vh, 170px) var(--gutter) 45vh;
}
.closing-copy .eyebrow {
  margin: 0 auto 16px;
}
.closing h2 {
  margin-bottom: 26px;
  font-size: clamp(60px, 6.4vw, 115px);
}
.closing:after {
  background: linear-gradient(180deg, #07070744, transparent 50%, #09090911);
}
.foot {
  padding: 56px var(--gutter) 27px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  gap: 30px;
  background: #101010;
  border-top: 1px solid #ffffff26;
}
.foot-brand {
  display: inline-flex;
  width: fit-content;
}
.foot-brand .brand-logo {
  width: 104px;
  height: auto;
}
.foot p,
.foot div a {
  font-size: 13px;
  color: #d0cdc8;
}
.foot div {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
}
.foot div a:hover,
.foot small a:hover {
  text-decoration: underline;
}
.foot small {
  grid-column: 1/-1;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #a5a19b;
  font-size: 11px;
}
.portfolio-cover {
  height: 100svh;
  min-height: 610px;
  padding: var(--head) var(--gutter) 0;
  display: flex;
  align-items: center;
}
.portfolio-photo {
  object-position: center 48%;
}
.portfolio-cover:after {
  background:
    linear-gradient(90deg, #080808c5 0%, #08080861 40%, #08080800 80%),
    linear-gradient(0deg, #080808aa, transparent 34%);
}
.portfolio-intro {
  margin-top: -2vh;
  position: relative;
}
.portfolio-intro .eyebrow {
  color: #e0d6cd;
  margin-bottom: 15px;
}
.portfolio-intro h1 {
  font-size: clamp(100px, 12.5vw, 232px);
  line-height: 0.96;
}
.portfolio-intro h1 span {
  color: #ba3a34;
}
.portfolio-desc {
  margin: 20px 0 27px;
  max-width: 29ch;
  font-size: clamp(16px, 1.45vw, 23px);
}
.model-link {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  border-bottom: 1px solid #b0afa9;
  min-height: 43px;
}
.model-link span {
  font: 22px Arial;
}
.portfolio-caption,
.portfolio-purchase {
  position: absolute;
  bottom: 35px;
}
.portfolio-caption {
  left: var(--gutter);
  display: flex;
  gap: 24px;
  align-items: center;
  color: #d7d4cc;
}
.portfolio-caption span:first-child {
  color: #b4ada3;
}
.portfolio-purchase {
  right: var(--gutter);
}
@media (max-width: 760px) {
  :root {
    --head: 90px;
    --gutter: clamp(20px, 6vw, 40px);
  }
  .nav-bar {
    min-height: 62px;
  }
  .tabs {
    font-size: 11px;
    gap: 7px;
  }
  .signature .brand-logo {
    width: 58px;
  }
  .menu-panel {
    grid-template-columns: 1fr;
  }
  .menu-image {
    display: none;
  }
  .menu-body nav a {
    font-size: 48px;
  }
  .menu-body {
    padding-top: 7vh;
  }
  .hero-run {
    height: 135svh;
  }
  .hero {
    min-height: 520px;
  }
  .hero-title {
    top: max(125px, 17svh);
  }
  .hero-title h1 {
    font-size: clamp(56px, 9vw, 76px);
  }
  .hero-title .eyebrow {
    font-size: 9px;
    margin-bottom: 12px;
  }
  .hero-picture img {
    object-position: 50% 54%;
  }
  .hero-bottom {
    bottom: max(50px, 7svh);
    gap: 15px;
  }
  .scroll-cue {
    font-size: 8px;
    bottom: 9px;
    left: 16px;
  }
  .edition {
    font-size: 8px;
    bottom: 20px;
    right: 16px;
  }
  .scroll-cue span {
    height: 15px;
  }
  .buy {
    font-size: 9px;
    letter-spacing: 0.12em;
    min-height: 44px;
  }
  .manifesto {
    min-height: 78svh;
  }
  .manifesto-copy h2 {
    font-size: clamp(48px, 9vw, 74px);
  }
  .filmstrip {
    bottom: 8vh;
  }
  .approach {
    min-height: 84svh;
    padding: 90px 0 45px;
  }
  .approach-base {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 22px;
    margin-top: 100px;
  }
  .approach-base > div:last-child {
    padding: 0 var(--gutter);
  }
  .approach-base p {
    max-width: 34ch;
  }
  .brand-row img {
    max-height: 35px;
  }
  .step-inline {
    height: 52svh;
    max-height: 480px;
  }
  .step-copy {
    padding: 40px var(--gutter) 60px;
  }
  .step-copy p {
    max-width: 42ch;
  }
  .counter {
    margin-bottom: 13px;
  }
  .pillars .step-inline {
    padding: 24px var(--gutter) 0;
    height: 50svh;
  }
  .services-intro {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-block: 75px;
    min-height: 0;
  }
  .services-intro figure {
    width: 51%;
    margin-right: 0;
  }
  .services-intro figure img {
    max-height: 35svh;
  }
  .aerial-cars {
    gap: 7vw;
    margin-top: -32px;
  }
  .aerial-cars img {
    width: 24%;
  }
  .aerial-word {
    font-size: 20vw;
  }
  .aerial-end {
    padding-top: 24px;
  }
  .showroom {
    min-height: 78svh;
  }
  .builds {
    align-items: flex-end;
  }
  .showroom:after {
    background: linear-gradient(0deg, #070707dd, #08080866 52%, #08080811);
  }
  .stock {
    align-items: flex-start;
  }
  .stock:after {
    background: linear-gradient(180deg, #070707df, #08080855 68%, #08080819);
  }
  .closing {
    min-height: 76svh;
    padding-top: 78px;
  }
  .closing-art {
    background-position: center 55%;
  }
  .foot {
    grid-template-columns: 1fr;
    gap: 23px;
    padding-top: 40px;
  }
  .foot div {
    justify-content: flex-start;
    gap: 25px;
  }
  .foot small {
    grid-column: 1;
  }
  .portfolio-cover:after {
    background:
      linear-gradient(90deg, #080808c9, #08080828),
      linear-gradient(0deg, #080808bf, transparent 48%);
  }
  .portfolio-caption {
    bottom: 30px;
  }
  .portfolio-purchase {
    bottom: 87px;
    left: var(--gutter);
    right: auto;
  }
  .portfolio-intro {
    margin-top: -10vh;
  }
}
@media (max-width: 390px) {
  .offer {
    gap: 6px;
    font-size: 10px;
  }
  .offer span:first-child,
  .offer small {
    font-size: 9px;
  }
  .open-label,
  .close-label {
    font-size: 8px;
  }
  .hero-title h1 {
    font-size: 53px;
  }
  .hero-bottom p {
    font-size: 12px;
  }
  .menu summary {
    gap: 6px;
  }
  .edition {
    font-size: 7px;
  }
  .offer .arrow {
    width: 9px;
  }
}
@media (max-height: 570px) and (orientation: landscape) {
  .hero {
    min-height: 420px;
  }
  .hero-title {
    top: 95px;
  }
  .hero-title h1 {
    font-size: 45px;
  }
  .hero-title .eyebrow,
  .hero-bottom p {
    display: none;
  }
  .hero-bottom {
    bottom: 20px;
  }
  .hero-picture img {
    object-fit: contain;
  }
  .closing {
    min-height: 530px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .hero-run {
    height: auto;
  }
  .hero {
    position: relative;
  }
  .hero-picture,
  .hero-title {
    transform: none;
    opacity: 1;
  }
  .hero-bottom,
  .scroll-cue,
  .edition {
    opacity: 1;
  }
  .brand-window {
    overflow-x: auto;
    mask-image: none;
  }
  .brand-row[aria-hidden] {
    display: none;
  }
  .brand-row {
    padding-inline: var(--gutter);
  }
}

html:not(.enhanced) .menu {
  display: none;
}
html:not(.enhanced) .site-head {
  position: relative;
}
html:not(.enhanced) .hero-run {
  height: auto;
}
html:not(.enhanced) .hero {
  position: relative;
}
.plain-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 10px 16px;
  background: var(--ink);
  font-size: 12px;
}

/* These scenes keep ordinary document flow until motion is enabled. */
.hero-run {
  height: auto;
  background: #080808;
}
.hero-stage {
  position: relative;
}
.hero {
  position: relative;
}
.hero-picture,
.hero-title {
  transform: none;
}
.hero-picture img {
  object-position: center;
}
.opening-film,
.drive-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  visibility: hidden;
  pointer-events: none;
}
.cinematic [data-media="opening"] .opening-film,
.cinematic [data-media="drive"] .drive-film {
  visibility: visible;
}
.opening-slate[hidden],
.closing-depth,
.sequence-ambient {
  display: none;
}
.opening-slate {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #050505;
  color: var(--ivory);
  display: grid;
  place-items: center;
  transition: opacity 0.35s var(--ease);
}
.opening-slate img {
  width: clamp(115px, 11vw, 175px);
  height: auto;
}
.opening-slate button {
  position: absolute;
  bottom: max(25px, 5svh);
  right: var(--gutter);
  padding: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.opening-slate button:focus-visible {
  outline: 1px solid currentColor;
}
.opening-slate.is-leaving {
  opacity: 0;
  pointer-events: none;
}
.manifesto {
  background: #0b0b0b;
}
.manifesto-bg,
.showroom-photo,
.closing-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  transform: none;
  filter: none;
  pointer-events: none;
}
.manifesto-bg img,
.showroom-photo img,
.closing-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.manifesto-bg {
  opacity: 0.55;
}
.manifesto-anchor {
  display: block;
  position: absolute;
  top: 50%;
  scroll-margin-top: 0;
}
.hero-title h1 {
  line-height: 1;
}
.hero-title h1 span,
.hero-title h1 em {
  display: inline-block;
}
.approach {
  overflow: clip;
  background: #0a0a0a;
}
.step-inline {
  overflow: hidden;
}
.showroom,
.stock {
  height: 100svh;
  min-height: 540px;
  padding: 51svh var(--gutter) 5svh;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #080808;
}
.showroom:after,
.stock:after {
  background: linear-gradient(0deg, #000d, #0006 38%, transparent 72%);
}
.showroom-copy {
  max-width: min(90vw, 800px);
}
.showroom-copy h2 {
  font-size: clamp(47px, 6.4vw, 112px);
}
.showroom-copy p:not(.eyebrow) {
  margin: 14px auto 18px;
  max-width: 45ch;
}
.showroom-copy .eyebrow {
  margin-bottom: 10px;
}
.closing {
  height: 100svh;
  min-height: 540px;
  padding: 0 var(--gutter);
  align-items: center;
}
.closing:after {
  background: linear-gradient(0deg, #0005, transparent 26%, #0002 70%, #0008);
}
.closing-depth.is-ready {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}
.closing-copy {
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  .cinematic .hero-run {
    height: 340svh;
    /* The following approach photo opens over the last pinned screen. */
    margin-bottom: -100svh;
  }
  .cinematic .hero-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: clip;
    isolation: isolate;
    background: #0b0b0b;
  }
  .cinematic .hero {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 0;
    z-index: 1;
  }
  .cinematic .hero:after {
    opacity: var(--copy, 1);
  }
  .cinematic .hero-title,
  .cinematic .hero-bottom,
  .cinematic .scroll-cue,
  .cinematic .edition {
    opacity: var(--copy, 1);
  }
  .cinematic .hero-title {
    transform: translateY(calc(-22px * (1 - var(--copy, 1))));
  }
  .cinematic .opening .hero-title > *,
  .cinematic .opening .hero-bottom > * {
    opacity: 0;
  }
  .cinematic .hero-stage[data-media]:not([data-media="poster"]) .hero-picture {
    visibility: hidden;
  }
  .cinematic .manifesto {
    position: absolute;
    inset: 0;
    z-index: 2;
    min-height: 0;
    padding: 0 var(--gutter);
    justify-items: center;
    align-content: center;
    visibility: hidden;
    background: transparent;
    pointer-events: none;
  }
  .cinematic .manifesto.is-active {
    visibility: visible;
  }
  .cinematic .manifesto:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #0b0b0b url("/assets/clone-x/forged-carbon.webp") repeat
      center/313px 314px;
    background-blend-mode: soft-light;
    opacity: var(--carbon, 0);
  }
  .cinematic .manifesto:after {
    background: transparent;
  }
  .cinematic .manifesto-bg {
    visibility: hidden;
    opacity: 0;
  }
  .cinematic [data-media="cabin"] .manifesto-bg {
    visibility: visible;
    opacity: 1;
  }
  .cinematic .manifesto-copy {
    opacity: var(--statement, 0);
    transform: translateY(calc(20px * (1 - var(--statement, 0))));
  }
  .cinematic .manifesto-anchor {
    top: 39.5%;
  }
  .cinematic .approach {
    z-index: 3;
    transform: translateY(var(--arrival-y, 0)) scale(var(--arrival-scale, 1));
    clip-path: inset(var(--arrival-inset, 0%));
  }
  .cinematic .approach .scene-photo {
    transform: scale(1.12) translateY(var(--photo-y, 0%));
  }
  .cinematic .services-intro {
    overflow: clip;
  }
  .cinematic .services-intro h2 {
    color: transparent;
    background: linear-gradient(105deg, var(--ivory) 47%, #595653 52%);
    background-size: 220% 100%;
    background-position-x: var(--fill-x, 100%);
    background-clip: text;
    -webkit-background-clip: text;
  }
  .cinematic .aerial {
    padding: clamp(100px, 14vw, 270px) 0 clamp(80px, 12vw, 200px);
    overflow: clip;
    background:
      linear-gradient(#020202eb, #10101077 55%, #050505f7),
      url("/assets/clone-x/asphalt.webp") center/740px 740px;
  }
  .cinematic .aerial-word {
    position: sticky;
    top: 12svh;
    z-index: 0;
    line-height: 0.95;
    color: var(--ivory);
    font-size: clamp(95px, 14vw, 225px);
    transform: scale(var(--title-scale, 1));
    opacity: var(--title-alpha, 1);
  }
  .cinematic .aerial-cars {
    display: block;
    max-width: none;
    margin: 5vw auto 0;
  }
  .cinematic .aerial-cars img {
    display: block;
    width: clamp(240px, 42vw, 690px);
    margin-inline: auto;
    filter: none;
    transform: none;
  }
  .cinematic .aerial-cars img:not(:nth-child(2)) {
    position: absolute;
    top: 25%;
  }
  .cinematic .aerial-cars img:first-child {
    right: 72%;
    transform: translateY(var(--left-car, 0%));
  }
  .cinematic .aerial-cars img:last-child {
    left: 72%;
    transform: translateY(var(--right-car, 0%));
  }
  .cinematic .aerial-end {
    margin: 0 auto;
    transform: translateY(var(--end-y, 0)) scale(var(--end-scale, 1));
  }
  .cinematic .showroom-photo {
    transform: translateY(var(--photo-y, 0%));
  }
  .cinematic .showroom-copy {
    transform: translateY(var(--copy-y, 0%));
  }
  .cinematic .closing-art,
  .cinematic .closing-depth {
    transform: scale(var(--final-scale, 1));
    transform-origin: center;
    opacity: var(--final-alpha, 1);
  }
  .cinematic .closing-copy {
    transform: translateY(var(--final-copy, 0px));
    opacity: var(--final-text, 1);
  }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .cinematic .sequence {
    display: grid;
    isolation: isolate;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    background: #0b0b0b url("/assets/clone-x/forged-carbon.webp") repeat
      center/313px 314px;
    background-blend-mode: soft-light;
  }
  .cinematic .sequence-ambient {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  .cinematic .sequence-ambient > div {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: clip;
  }
  .cinematic .sequence-ambient .sequence-frame img {
    filter: blur(9px) brightness(0.32);
    transform: scale(1.08);
  }
  .cinematic .sequence-pics {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    place-items: center;
    overflow: clip;
    pointer-events: none;
  }
  .cinematic .sequence-window {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .cinematic .pillars .sequence-window {
    width: min(39vw, 72svh);
    height: auto;
    aspect-ratio: 1;
    margin-left: 8vw;
  }
  .cinematic .pillars .sequence-pics {
    overflow: visible;
  }
  .cinematic .sequence-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #131313;
  }
  .cinematic .sequence-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cinematic .sequence-frame ~ .sequence-frame {
    clip-path: inset(50%);
  }
  .cinematic .services .sequence-frame ~ .sequence-frame {
    clip-path: inset(100% 0 0);
  }
  .cinematic .step-inline {
    display: none;
  }
  .cinematic .step {
    min-height: 100svh;
    display: flex;
    align-items: center;
  }
  .cinematic .step-copy {
    padding: max(7svh, 40px) clamp(35px, 8vw, 155px);
  }
  .cinematic .step-copy:focus-within {
    opacity: 1 !important;
  }
  .cinematic .services .sequence-pics {
    grid-column: 2;
    grid-row: 1;
  }
  .cinematic .services .sequence-steps {
    grid-column: 1;
    grid-row: 1;
  }
  .cinematic .services-intro figure {
    transform: translateY(var(--detail-y, 0));
  }
  .cinematic .services-intro > div {
    transform: translateY(var(--intro-y, 0));
  }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .cinematic .manifesto.trail-active {
    pointer-events: auto;
  }
  .cinematic .filmstrip {
    inset: 0;
    width: 100%;
    transform: none;
    pointer-events: none;
  }
  .cinematic .filmstrip img {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(125px, 15vw, 225px);
    border-radius: 4px;
    visibility: hidden;
  }
  .cinematic .filmstrip img.is-print {
    visibility: visible;
  }
}
@media (max-width: 1023px), (pointer: coarse) {
  .cinematic .filmstrip {
    display: none;
  }
  .cinematic .aerial-cars img:nth-child(2) {
    width: min(85vw, 505px);
  }
  .cinematic .aerial-cars img:not(:nth-child(2)) {
    display: none;
  }
  .cinematic .step-inline {
    position: relative;
  }
  .cinematic .services .step-inline img {
    transform: translateY(var(--mobile-y, 0)) scale(1.24);
  }
  .cinematic .pillars .step-inline img {
    transform: scale(var(--mobile-scale, 1));
  }
}
@media (max-height: 550px) and (orientation: landscape) {
  .showroom {
    min-height: 420px;
    padding: 31svh var(--gutter) 3svh;
  }
  .showroom-copy .eyebrow {
    margin-bottom: 4px;
  }
  .showroom-copy h2 {
    font-size: 44px;
  }
  .showroom-copy p:not(.eyebrow) {
    margin: 7px auto;
  }
}
.hero-depth {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .cinematic [data-media="depth"] .hero-depth.is-ready {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .closing-depth.is-ready {
    display: none;
  }
}
/* Keep the expanding approach photo inside the viewport while its center mask opens. */
.carros main {
  overflow-x: clip;
}
.motion-word {
  display: inline-block;
}
.roll-label {
  display: block;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .cinematic .manifesto-copy .motion-word,
  .cinematic .closing-copy .motion-word {
    opacity: var(--grow, 1);
    transform: scale(calc(0.08 + 0.92 * var(--grow, 1)));
    filter: blur(calc(8px * (1 - var(--grow, 1))));
  }
  .cinematic main .buy {
    position: relative;
  }
  .cinematic .roll-label span {
    display: inline-block;
    text-shadow: 0 -2em currentColor;
    transition: transform 0.46s cubic-bezier(0.36, 0.08, 0.18, 0.97);
    transition-delay: calc(var(--letter) * 6ms);
  }
  @media (hover: hover) and (pointer: fine) {
    .cinematic main .buy:hover {
      color: var(--ivory);
      background: #17171799;
      border-color: #eae5dcb0;
    }
    .cinematic .buy:hover .roll-label span {
      transform: translateY(2em);
    }
  }
  .cinematic main .buy:focus-visible,
  .cinematic main .buy:focus-visible .roll-label span {
    transition: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .cinematic .approach {
    min-height: 100svh;
  }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .cinematic .approach-slot {
    position: relative;
    z-index: 3;
    min-height: calc(100svh + 100px);
  }
  .cinematic .approach {
    position: sticky;
    top: 0;
    height: 100svh;
  }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .cinematic .approach {
    transform: none;
    clip-path: none;
    justify-content: flex-end;
    gap: 24px;
  }
  .cinematic .approach-base {
    margin-top: 0;
  }
  .cinematic .services-intro {
    min-height: 75svh;
    display: flex;
    align-items: center;
  }
  .cinematic .services-intro figure {
    display: none;
  }
  .cinematic .services .step {
    display: flex;
    align-items: center;
    min-height: max(75svh, 410px);
    isolation: isolate;
    overflow: hidden;
  }
  .cinematic .services .step-inline {
    position: absolute;
    inset: 0;
    height: 100%;
    max-height: none;
    z-index: -1;
  }
  .cinematic .services .step-inline:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #080808b8, #08080885);
  }
  .cinematic .services .step-copy {
    padding: 44px var(--gutter);
  }
  .cinematic .aerial-end {
    transform: none;
    padding-block: 30px 0;
  }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .cinematic .services-stage {
    position: relative;
    overflow: clip;
    background: #0b0b0b;
  }
  .cinematic .services {
    transform: translateY(var(--service-lift, 0));
  }
}

/* The second portfolio model has its own price and visual identity. */
.model-racing:after {
  background: linear-gradient(90deg, #090a0bd9, #0b0c0f65 53%, #0b0c0f0a),
    linear-gradient(0deg, #080808cb, transparent 40%);
}
.model-racing h2 {
  font-size: clamp(54px, 8.7vw, 172px);
  line-height: .98;
}
.model-racing h2 span { color: #fed60a; }
.model-racing .portfolio-photo { object-position: 58% 50%; }
.portfolio-caption a { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .tabs a:first-child, .tabs em:nth-child(2) { display: none; }
  .tabs { gap: 5px; font-size: 10px; }
  .model-racing .portfolio-caption { gap: 14px; }
}
.portfolio-offers > a { display: inline-flex; align-items: center; gap: .5em; }
.portfolio-offers > a:hover { color: white; }