@font-face {
  font-family: "Big Shoulders";
  src: url("assets/fonts/BigShoulders-Medium.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

:root {
  --rn-gold: #c6995b;
  --rn-dark: #050505;
  --rn-white: #ffffff;
}

.rn-hero,
.rn-hero * {
  box-sizing: border-box;
}

.rn-hero {
  --rn-car-final-x: 34%;
  --rn-car-final-y: 10%;
  --rn-car-start-x: -32%;
  --rn-car-start-y: 6%;
  --rn-car-start-scale: 2.42;
  position: relative;
  height: 238vh;
  min-height: 1260px;
  margin: 0;
  background: var(--rn-dark);
  color: var(--rn-white);
  font-family: "Big Shoulders", Impact, sans-serif;
  font-weight: 500;
  isolation: isolate;
}

.rn-hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #000;
}

body.admin-bar .rn-hero-stage {
  top: 32px;
  height: calc(100vh - 32px);
  height: calc(100svh - 32px);
}

.rn-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transform-origin: center center;
  filter: brightness(1.03) contrast(1.05);
  will-change: transform, filter;
}

.rn-hero--animated .rn-bg {
  transform: scale(1.18);
  filter: brightness(.58) contrast(1.16) blur(2px);
}

.rn-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle at 66% 58%, rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 38%, rgba(0,0,0,.56) 100%),
    linear-gradient(90deg, rgba(0,0,0,.48), rgba(0,0,0,.08) 50%, rgba(0,0,0,.34)),
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.34));
}

.rn-car {
  position: absolute;
  right: clamp(12px, 4.8vw, 110px);
  bottom: 0;
  width: min(68vw, 1320px);
  transform: translate(var(--rn-car-final-x), var(--rn-car-final-y));
  transform-origin: center center;
  z-index: 3;
  filter: brightness(1.12) contrast(1.08) drop-shadow(0 34px 46px rgba(0,0,0,.58));
  will-change: transform, filter;
  pointer-events: none;
}

.rn-hero--animated .rn-car {
  transform: translate(var(--rn-car-start-x), var(--rn-car-start-y)) scale(var(--rn-car-start-scale));
  filter: brightness(.72) contrast(1.06) drop-shadow(0 34px 46px rgba(0,0,0,.72));
}

.rn-intro {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
  padding: 0 22px;
  opacity: 0;
  transform: translateY(-36px);
}

.rn-hero--animated .rn-intro {
  opacity: 1;
  transform: none;
}

.rn-intro img {
  width: clamp(126px, 10vw, 172px);
  margin: 0 auto var(--rn-desktop-intro-logo-gap, 12px);
  display: block;
}

.rn-intro p {
  margin: 0 auto 28px;
  max-width: 760px;
  color: var(--rn-desktop-intro-color, #ffffff);
  font-size: var(--rn-desktop-intro-size, clamp(28px, 3vw, 48px));
  line-height: var(--rn-desktop-intro-line-height, 1.18);
  font-weight: var(--rn-desktop-intro-weight, 500);
  text-transform: uppercase;
  text-wrap: balance;
}

.rn-scroll-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 36px;
  margin: 0 auto;
  border: 1px solid rgba(198,153,91,.9);
  border-radius: 999px;
}

.rn-scroll-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rn-gold);
  transform: translateX(-50%);
  animation: rn-scroll-dot 1.35s ease-in-out infinite;
}

@keyframes rn-scroll-dot {
  0%,
  100% {
    opacity: .35;
    transform: translate(-50%, 0);
  }

  45% {
    opacity: 1;
    transform: translate(-50%, 12px);
  }
}

.rn-copy {
  position: absolute;
  z-index: 9;
  left: clamp(34px, 5.2vw, 118px);
  top: clamp(165px, 27vh, 292px);
  max-width: min(830px, 48vw);
  opacity: 1;
  transform: none;
  text-shadow: 0 16px 36px rgba(0,0,0,.42);
}

.rn-hero--animated .rn-copy {
  opacity: 0;
  transform: translateY(48px);
}

.rn-copy-logo {
  display: block;
  width: var(--rn-desktop-wordmark-width, clamp(210px, 18vw, 330px));
  height: auto;
  margin: 0 0 var(--rn-desktop-wordmark-gap, 24px);
}

.rn-copy h1 {
  margin: 0 0 22px;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}

.rn-copy h1 span,
.rn-copy h1 small {
  display: block;
  font: inherit;
}

.rn-copy h1 span {
  color: var(--rn-desktop-title-primary-color, #ffffff);
  font-size: var(--rn-desktop-title-primary-size, clamp(86px, 8.4vw, 156px));
  line-height: var(--rn-desktop-title-primary-line-height, .86);
  font-weight: var(--rn-desktop-title-primary-weight, 500);
}

.rn-copy h1 small {
  margin-top: 6px;
  color: var(--rn-desktop-title-secondary-color, #ffffff);
  font-size: var(--rn-desktop-title-secondary-size, clamp(64px, 6vw, 112px));
  line-height: var(--rn-desktop-title-secondary-line-height, .9);
  font-weight: var(--rn-desktop-title-secondary-weight, 500);
}

.rn-copy p {
  margin: 0 0 30px;
  max-width: 620px;
  color: var(--rn-desktop-body-color, #ffffff);
  font-size: var(--rn-desktop-body-size, clamp(28px, 2.35vw, 42px));
  line-height: var(--rn-desktop-body-line-height, 1.12);
  font-weight: var(--rn-desktop-body-weight, 500);
}

.rn-copy a,
.rn-copy a:visited,
.rn-copy a:focus,
.rn-copy a:hover,
.rn-copy a:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 176px;
  height: 58px;
  padding: 0 34px;
  background: var(--rn-desktop-button-bg, var(--rn-gold)) !important;
  color: var(--rn-desktop-button-text-color, #090909) !important;
  text-decoration: none;
  text-transform: uppercase;
  font-size: var(--rn-desktop-button-size, 24px);
  line-height: var(--rn-desktop-button-line-height, 1);
  font-weight: var(--rn-desktop-button-weight, 500);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(0,0,0,.25);
  -webkit-tap-highlight-color: transparent;
}

.rn-copy a:focus-visible {
  outline: 2px solid var(--rn-gold);
  outline-offset: 4px;
}

.rn-hero--static .rn-intro {
  display: none;
}

@media (max-width: 1180px) {
  .rn-car {
    right: clamp(-28px, -2vw, 0px);
    width: min(74vw, 1040px);
  }

  .rn-copy {
    max-width: min(680px, 54vw);
  }
}

@media (min-width: 1600px) {
  .rn-hero {
    --rn-car-final-x: 24%;
    --rn-car-final-y: 8%;
    --rn-car-start-x: -24%;
    --rn-car-start-y: 4%;
    --rn-car-start-scale: 2.28;
    height: 248vh;
    min-height: 1380px;
  }

  .rn-car {
    right: clamp(34px, 7vw, 210px);
    bottom: 1vh;
    width: min(62vw, 1380px);
  }

  .rn-copy {
    top: clamp(168px, 22vh, 268px);
    max-width: min(820px, 42vw);
  }
}

@media (min-width: 1920px) {
  .rn-hero {
    --rn-car-final-x: 16%;
    --rn-car-final-y: 6%;
    --rn-car-start-x: -18%;
    --rn-car-start-y: 3%;
    --rn-car-start-scale: 2.12;
    height: 258vh;
    min-height: 1460px;
  }

  .rn-car {
    right: clamp(54px, 10vw, 280px);
    width: min(58vw, 1440px);
  }

  .rn-copy {
    max-width: min(820px, 40vw);
  }
}

@media (max-width: 782px) {
  body.admin-bar .rn-hero-stage {
    top: 46px;
    height: calc(100vh - 46px);
    height: calc(100svh - 46px);
  }
}

@media (max-width: 760px) {
  .rn-hero {
    --rn-car-final-x: -50%;
    --rn-car-final-y: 0%;
    --rn-car-start-x: -50%;
    --rn-car-start-y: 5%;
    --rn-car-start-scale: 1.8;
    height: 210vh;
    min-height: 1040px;
  }

  .rn-hero-stage {
    min-height: 100svh;
  }

  .rn-bg {
    background-position: center;
  }

  .rn-hero--animated .rn-bg {
    transform: scale(1.16);
    filter: brightness(.58) contrast(1.12) blur(2px);
  }

  .rn-vignette {
    background:
      radial-gradient(circle at 50% 66%, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 42%, rgba(0,0,0,.46) 100%),
      linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.28));
  }

  .rn-car {
    left: 50%;
    right: auto;
    bottom: -1vh;
    width: min(142vw, 780px);
    transform: translate(var(--rn-car-final-x), var(--rn-car-final-y));
  }

  .rn-hero--animated .rn-car {
    transform: translate(var(--rn-car-start-x), var(--rn-car-start-y)) scale(var(--rn-car-start-scale));
  }

  .rn-intro {
    padding: 4vh 22px 0;
  }

  .rn-intro img {
    width: clamp(118px, 30vw, 148px);
    margin-bottom: var(--rn-mobile-intro-logo-gap, var(--rn-desktop-intro-logo-gap, 10px));
  }

  .rn-intro p {
    max-width: 320px;
    color: var(--rn-mobile-intro-color, var(--rn-desktop-intro-color, #ffffff));
    font-size: var(--rn-mobile-intro-size, clamp(26px, 8.4vw, 38px));
    line-height: var(--rn-mobile-intro-line-height, 1.16);
    font-weight: var(--rn-mobile-intro-weight, var(--rn-desktop-intro-weight, 500));
  }

  .rn-copy {
    top: max(74px, 8.2vh);
    left: 22px;
    right: 18px;
    max-width: none;
  }

  .rn-copy-logo {
    width: var(--rn-mobile-wordmark-width, min(176px, 47vw));
    margin-bottom: var(--rn-mobile-wordmark-gap, var(--rn-desktop-wordmark-gap, 18px));
  }

  .rn-copy h1 {
    margin-bottom: 18px;
  }

  .rn-copy h1 span {
    color: var(--rn-mobile-title-primary-color, var(--rn-desktop-title-primary-color, #ffffff));
    font-size: var(--rn-mobile-title-primary-size, clamp(56px, 15.5vw, 78px));
    line-height: var(--rn-mobile-title-primary-line-height, .9);
    font-weight: var(--rn-mobile-title-primary-weight, var(--rn-desktop-title-primary-weight, 500));
  }

  .rn-copy h1 small {
    color: var(--rn-mobile-title-secondary-color, var(--rn-desktop-title-secondary-color, #ffffff));
    font-size: var(--rn-mobile-title-secondary-size, clamp(40px, 10.7vw, 54px));
    line-height: var(--rn-mobile-title-secondary-line-height, .94);
    font-weight: var(--rn-mobile-title-secondary-weight, var(--rn-desktop-title-secondary-weight, 500));
  }

  .rn-copy p {
    max-width: 360px;
    margin-bottom: 26px;
    color: var(--rn-mobile-body-color, var(--rn-desktop-body-color, #ffffff));
    font-size: var(--rn-mobile-body-size, 26px);
    line-height: var(--rn-mobile-body-line-height, 1.12);
    font-weight: var(--rn-mobile-body-weight, var(--rn-desktop-body-weight, 500));
  }

  .rn-copy a,
  .rn-copy a:visited,
  .rn-copy a:focus,
  .rn-copy a:hover,
  .rn-copy a:active {
    min-width: 164px;
    height: 58px;
    padding: 0 32px;
    background: var(--rn-mobile-button-bg, var(--rn-desktop-button-bg, var(--rn-gold))) !important;
    color: var(--rn-mobile-button-text-color, var(--rn-desktop-button-text-color, #090909)) !important;
    font-size: var(--rn-mobile-button-size, 22px);
    line-height: var(--rn-mobile-button-line-height, 1);
    font-weight: var(--rn-mobile-button-weight, var(--rn-desktop-button-weight, 500));
  }
}

@media (max-width: 380px) {
  .rn-copy {
    left: 18px;
    right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rn-hero {
    height: 100svh;
    min-height: 620px;
  }

  .rn-hero-stage {
    position: relative;
  }

  .rn-hero--animated .rn-bg,
  .rn-bg {
    transform: scale(1);
    filter: brightness(1.03) contrast(1.05);
  }

  .rn-hero--animated .rn-car,
  .rn-car {
    transform: translate(var(--rn-car-final-x), var(--rn-car-final-y));
    filter: brightness(1.12) contrast(1.08) drop-shadow(0 34px 46px rgba(0,0,0,.58));
  }

  .rn-intro {
    display: none;
  }

  .rn-scroll-icon::before {
    animation: none;
  }

  .rn-hero--animated .rn-copy,
  .rn-copy {
    opacity: 1;
    transform: none;
  }
}