:root {
  --color-primary: #d8ae4b;
  --color-accent: #d8ae4b;
  --color-on-accent: #171105;
  --hero-logo-size: clamp(300px, 25vw, 390px);
  --hero-logo-top-offset: 11px;
  --hero-logo-tablet-size: clamp(250px, 31vw, 315px);
  --hero-logo-tablet-top-offset: 9px;
}

.depth-brand-badge { aspect-ratio: auto; }
.depth-brand-badge img { height: auto; }
.brand-logo { width: 145px; max-width: 145px; max-height: 56px; }
:focus-visible { outline-color: var(--color-accent); }

@media (min-width: 1101px) {
  .depth-car { width: 72%; right: 1.5%; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .depth-car { width: 88%; right: 1%; }
}

@media (max-width: 760px) {
  .brand-logo { width: 118px; max-width: 118px; max-height: 46px; }
  .depth-hero h1 { font-size: clamp(47px, 12.5vw, 64px); }
  .depth-car {
    right: -4%;
    width: 118%;
    transform: translate3d(calc(var(--depth-p) * -8vw), calc(var(--depth-p) * -10vh), 0) rotateY(calc(-6deg + var(--depth-p) * 10deg)) rotateZ(calc(-3deg + var(--depth-p) * 5deg)) scale(calc(.98 + var(--depth-p) * .12));
  }
}