@import "https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Barlow:wght@400;500;600;700;800&family=Knewave&display=swap";
.hp {
  width: 100%;
  min-height: 100vh;
  background: #050505;
  overflow-x: hidden;
  color: #f4f4f4;
  font-family:
    Barlow Condensed,
    sans-serif;
  text-transform: uppercase;
}
.hp * {
  box-sizing: border-box;
}
:where(.hp) :where(h1, h2, h3, p) {
  margin: 0;
}
.hp em {
  font-style: italic;
  color: #e51b2b;
}
.hp > section,
.hp > footer {
  width: 100%;
  max-width: none;
  position: relative;
  overflow: hidden;
}
.hp .section-inner {
  width: min(94vw, 1600px);
  max-width: none;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
}
.hp img {
  max-width: 100%;
}
.homepage-top-static {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.hp .hp-btn,
.hp .hp-btn span {
  color: #fff;
}
.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 54px;
  padding: 0 28px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: #00000080;
  font-size: 17px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.hp-btn.primary {
  background: #e51b2b;
  border-color: #e51b2b;
}
.hp-btn.sm {
  height: 40px;
  font-size: 15px;
  padding: 0 20px;
}
.hp-btn:hover {
  background: #e51b2b;
  border-color: #e51b2b;
}
.hp-flogo img {
  width: 100%;
  display: block;
  object-fit: contain;
  background: transparent;
}
.hp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hp-head h2 {
  font-size: 68px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}
.hp-head span:not(.hp-btn) {
  font-size: 13px;
  letter-spacing: 0.3em;
  color: #cfcfcf;
}
.hp-drivers {
  padding: 44px 0 46px;
  height: auto;
}
.hp-drivers .hp-head {
  margin-bottom: 14px;
}
.hp-dgrid {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.hp-dpair {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.hp-cat {
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.hp-cat.r {
  background: #c0111f;
}
.hp-cat.b {
  background: #1448a8;
}
.hp-dcard {
  position: relative;
  display: block;
  height: 354px;
  overflow: hidden;
  border: 1px solid #3a3b3f;
  background: #111;
}
.hp-dcard img {
  width: 100%;
  height: 315px;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.hp-dcard:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 62%, #000 90%);
}
.hp-dinfo {
  position: absolute;
  z-index: 1;
  left: 14px;
  bottom: 12px;
  font-style: italic;
}
.hp-dinfo h3 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}
.hp-dinfo span {
  font-size: 20px;
  font-weight: 600;
}
.hp-dcard i {
  position: absolute;
  z-index: 1;
  right: 12px;
  bottom: 14px;
  font-size: 24px;
  font-style: normal;
}
.hp-series {
  padding-top: 36px;
}
.hp-series .hp-head {
  margin-bottom: 14px;
}
.hp-sgrid {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.hp-scard {
  position: relative;
  height: 300px;
  overflow: hidden;
  border: 1px solid #3a3b3f;
  background: radial-gradient(ellipse at 70% 50%, #1b1c20, #000 75%);
}
.hp-scard:nth-child(2) {
  background: radial-gradient(ellipse at 70% 50%, #14284d, #03060d 75%);
}
.hp-scard .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 60%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent);
  mask-image: linear-gradient(90deg, #000 55%, transparent);
}
.hp-scard:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 40%, rgba(0, 0, 0, 0.3));
}
.hp-scopy {
  position: absolute;
  z-index: 1;
  right: 4%;
  top: 0;
  bottom: 0;
  width: 56%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.hp-scopy .mark {
  width: 360px;
  max-width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
}
.hp-scopy .mark.amsoil {
  width: 330px;
}
.hp-partners {
  padding-top: 34px;
}
.hp-partners .hp-head {
  margin-bottom: 14px;
}
.hp-partners h2 {
  font-size: 63px;
}
.hp-prow {
  height: 135px;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #2c2d30;
  background: linear-gradient(#141415, #080808);
}
.hp-prow a {
  display: grid;
  place-items: center;
  padding: 0 20px;
}
.hp-prow img {
  width: 300px;
  max-width: 100%;
  height: 90px;
  object-fit: contain;
  mix-blend-mode: screen;
}
.hp-media {
  padding: 26px 0 30px;
}
.hp-media .hp-head {
  margin-bottom: 12px;
}
.hp-media h2 {
  font-size: 60px;
}
.hp-mrow {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.hp-mrow a {
  display: block;
  height: 145px;
  overflow: hidden;
  border: 1px solid #3a3b3f;
}
.hp-mrow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hp-footer {
  height: 150px;
  background: #050505;
  border-top: 1px solid #2a2a2c;
  padding-top: 22px;
}
.hp-frow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hp-flogo {
  width: 300px;
  flex: none;
}
.hp-footer nav {
  display: flex;
  gap: 40px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.hp-fright {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 20px;
  font-weight: 800;
  font-style: italic;
  line-height: 0.95;
  color: #a6a6a6;
}
.hp-copy {
  font-size: 12px;
  color: #8d8d90;
  margin-top: 6px !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
@media (max-width: 1100px) {
  .hp-head h2 {
    font-size: 48px;
  }
  .hp-partners h2 {
    font-size: 44px;
  }
  .hp-media h2 {
    font-size: 42px;
  }
  .hp-media .hp-head {
    flex-wrap: wrap;
  }
  .hp-flogo {
    width: 200px;
  }
  .hp-footer nav {
    font-size: 15px;
    gap: 24px;
  }
  .hp-dgrid {
    grid-template-columns: 1fr;
  }
  .hp-scopy .mark {
    width: 240px;
  }
}
@media (max-width: 760px) {
  .hp-dinfo h3 {
    font-size: 22px;
  }
  .hp-dinfo span {
    font-size: 15px;
  }
  .hp-btn {
    height: 46px;
    font-size: 15px;
  }
  .hp-head {
    flex-wrap: wrap;
  }
  .hp-head h2,
  .hp-partners h2,
  .hp-media h2 {
    font-size: 32px;
  }
  .hp-head span:not(.hp-btn) {
    font-size: 10px;
    letter-spacing: 0.15em;
  }
  .hp-drivers {
    padding: 30px 0;
  }
  .hp-dcard {
    height: 300px;
  }
  .hp-dcard img {
    height: 260px;
  }
  .hp-dgrid {
    gap: 10px;
  }
  .hp-sgrid {
    grid-template-columns: 1fr;
  }
  .hp-scard {
    height: 240px;
  }
  .hp-scopy .mark,
  .hp-scopy .mark.amsoil {
    width: 200px;
  }
  .hp-prow {
    height: auto;
    grid-template-columns: 1fr 1fr;
    padding: 10px 0;
  }
  .hp-prow a {
    height: 70px;
  }
  .hp-prow img {
    width: 140px;
    height: 50px;
  }
  .hp-mrow {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .hp-mrow a {
    height: 100px;
  }
  .hp-footer {
    height: auto;
    padding: 24px 0;
  }
  .hp-frow {
    flex-wrap: wrap;
    gap: 14px;
  }
  .hp-fright {
    width: 150px;
  }
  .hp-footer nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
  }
  .hp-fright {
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .hp-dpair {
    grid-template-columns: 1fr;
  }
  .hp-dcard {
    height: 354px;
  }
  .hp-dcard img {
    height: 315px;
  }
  .hp-mrow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.hp-flogo,
.hp-flogo img {
  background: transparent;
  border: none;
  box-shadow: none;
}
.hp-flogo img {
  filter: none;
}
.hp > section,
.hp-footer {
  box-shadow: inset 0 1px #ffffff0d;
}
.hp-dcard {
  border-color: #ffffff24;
  background: linear-gradient(180deg, #ffffff06, #0000001a), #111;
  box-shadow:
    0 8px 25px #00000059,
    inset 0 1px #ffffff0a;
}
.hp-dcard:after {
  background: linear-gradient(
    180deg,
    transparent 52%,
    rgba(0, 0, 0, 0.32) 72%,
    #000 92%
  );
  pointer-events: none;
}
.hp-dcard {
  --driver-accent: 220, 20, 35;
  cursor: pointer;
  transform-origin: center top;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.hp-dcard[data-driver-group="next"] {
  --driver-accent: 30, 94, 215;
}
.hp-dcard i {
  transition: transform 0.18s ease;
}
.hp-dcard:focus-visible {
  outline: 2px solid rgb(var(--driver-accent));
  outline-offset: 3px;
  border-color: #ffffff52;
  box-shadow: 0 0 18px rgba(var(--driver-accent), 0.25);
}
.hp-dcard:hover {
  z-index: 2;
  transform: translateY(-4px) scale(1.01);
  border-color: #ffffff52;
  box-shadow:
    0 14px 35px #0000008c,
    0 0 18px rgba(var(--driver-accent), 0.18);
}
.hp-dcard:hover i {
  transform: translate(4px);
}
@media (prefers-reduced-motion: reduce) {
  .hp-dcard,
  .hp-dcard i {
    transition: none;
  }
  .hp-dcard:hover,
  .hp-dcard:hover i {
    transform: none;
  }
}
.hp-scard {
  border-color: #ffffff24;
  box-shadow:
    0 8px 25px #0000004d,
    inset 0 1px #ffffff0a;
}
.hp-scard .bg {
  filter: contrast(1.08) brightness(0.91);
}
.hp-scard:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url(../media/home/dust.jpg) center/cover;
  opacity: 0.075;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(
    ellipse at 50% 45%,
    #000 20%,
    transparent 78%
  );
  mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 78%);
}
.hp-scard:after {
  pointer-events: none;
  background:
    radial-gradient(ellipse at 45% 45%, transparent 32%, rgba(0, 0, 0, 0.45)),
    linear-gradient(
      90deg,
      transparent 25%,
      rgba(0, 0, 0, 0.7) 58%,
      rgba(0, 0, 0, 0.89)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 15%);
}
.hp-scopy .mark,
.hp-prow img {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.hp-scopy .mark.corr {
  -webkit-mask-image: url(../media/home/masks/corr-mark.png);
  mask-image: url(../media/home/masks/corr-mark.png);
}
.hp-scopy .mark.amsoil {
  -webkit-mask-image: url(../media/home/masks/amsoil-mark.png);
  mask-image: url(../media/home/masks/amsoil-mark.png);
}
.hp-prow img[data-testid="img-partner-rzr"] {
  -webkit-mask-image: url(../media/home/masks/rzr-logo.png);
  mask-image: url(../media/home/masks/rzr-logo.png);
}
.hp-prow img[data-testid="img-partner-maxxis"] {
  -webkit-mask-image: url(../media/home/masks/maxxis-logo.png);
  mask-image: url(../media/home/masks/maxxis-logo.png);
}
.hp-prow img[data-testid="img-partner-polaris"] {
  -webkit-mask-image: url(../media/home/masks/polaris-logo.png);
  mask-image: url(../media/home/masks/polaris-logo.png);
}
.hp-prow img[data-testid="img-partner-valor-offroad"] {
  -webkit-mask-image: url(../media/home/masks/valor-logo.png);
  mask-image: url(../media/home/masks/valor-logo.png);
}
.hp-prow {
  background: linear-gradient(180deg, #111, #070707);
  border-color: #ffffff24;
  box-shadow: inset 0 1px #ffffff0a;
}
.hp-prow a {
  background: transparent;
  box-shadow: none;
}
.hp-prow img {
  mix-blend-mode: normal;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.65));
}
.hp-mrow a {
  position: relative;
  box-shadow: 0 5px 16px #00000073;
  border-color: #ffffff24;
}
.hp-mrow a:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.25));
}
.hp-footer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 25%),
    repeating-linear-gradient(
      115deg,
      transparent 0 17px,
      rgba(255, 255, 255, 0.006) 17px 18px
    ),
    #050505;
}