/* Converted from components/home/hero.module.css — class names are namespaced "hero__*". */
.hero__hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background: var(--color-brand-black);
  color: var(--color-brand-white);
}

.hero__scene {
  position: relative;
  height: 100svh;
  min-height: 42rem;
  overflow: hidden;
  background: var(--color-brand-black);
}

.hero__mediaReveal,
.hero__camera,
.hero__drift,
.hero__media,
.hero__overlay,
.hero__depthShade,
.hero__warmWash,
.hero__handoff {
  position: absolute;
  inset: 0;
}

.hero__mediaReveal {
  z-index: 0;
  overflow: hidden;
  perspective: 1450px;
}

.hero__camera {
  backface-visibility: hidden;
  transform-origin: 50% 79%;
  transform-style: preserve-3d;
  will-change: transform;
}

.hero__drift {
  backface-visibility: hidden;
  will-change: transform;
}

.hero__image {
  object-fit: cover;
  object-position: 50% 50%;
}

.hero__overlay {
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgb(7 7 7 / 91%) 0%,
      rgb(7 7 7 / 76%) 32%,
      rgb(7 7 7 / 30%) 64%,
      rgb(7 7 7 / 13%) 100%
    ),
    linear-gradient(
      180deg,
      rgb(0 0 0 / 48%) 0%,
      transparent 28%,
      transparent 61%,
      rgb(0 0 0 / 58%) 100%
    );
  opacity: 1;
  pointer-events: none;
  will-change: opacity;
}

.hero__depthShade {
  z-index: 2;
  background:
    radial-gradient(
      ellipse at 54% 47%,
      transparent 0 22%,
      rgb(0 0 0 / 10%) 51%,
      rgb(0 0 0 / 56%) 100%
    ),
    linear-gradient(180deg, transparent 47%, rgb(0 0 0 / 46%) 100%);
  opacity: 0.18;
  pointer-events: none;
  will-change: opacity;
}

.hero__warmWash {
  z-index: 2;
  background:
    radial-gradient(circle at 54% 23%, rgb(190 118 42 / 20%), transparent 40%),
    linear-gradient(180deg, transparent 52%, rgb(55 30 10 / 44%) 100%);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.hero__content {
  position: relative;
  z-index: 3;
  height: 100svh;
  min-height: 42rem;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-height) + 3rem);
  padding-bottom: clamp(4.75rem, 10vh, 7rem);
}

.hero__copy {
  width: min(100%, 54rem);
}

.hero__labelExit,
.hero__heading,
.hero__description,
.hero__actionsExit {
  will-change: transform, opacity;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(1rem, 2.2vh, 1.5rem);
  color: var(--color-brand-yellow);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
}

.hero__eyebrow > span {
  width: 2rem;
  height: 2px;
  flex: none;
  background: currentColor;
}

.hero__heading {
  max-width: 12ch;
  color: var(--color-brand-white);
  font-size: clamp(3.9rem, 6.25vw, 6.4rem);
  text-wrap: balance;
}

.hero__heading > span,
.hero__description > span,
.hero__actionsExit > div {
  display: block;
}

.hero__description {
  max-width: 35rem;
  margin-top: clamp(1.25rem, 3vh, 1.75rem);
  color: rgb(255 255 255 / 82%);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.65;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3.6vh, 2.25rem);
}

.hero__primaryAction,
.hero__secondaryAction {
  min-height: 50px;
  padding-inline: 1.35rem;
  white-space: nowrap;
}

.hero__secondaryAction {
  border-color: rgb(255 255 255 / 48%);
  color: var(--color-brand-white);
}

.hero__secondaryAction:hover {
  border-color: rgb(255 255 255 / 86%);
}

.hero__bottomFade {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(3rem, 9vh, 6rem);
  background: linear-gradient(180deg, transparent, rgb(13 12 11 / 34%));
  pointer-events: none;
}

.hero__handoff {
  z-index: 4;
  background:
    radial-gradient(ellipse at 55% 100%, rgb(121 70 25 / 34%), transparent 52%),
    linear-gradient(
      180deg,
      transparent 0 48%,
      rgb(18 15 12 / 58%) 73%,
      rgb(15 14 12) 100%
    );
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

@media (max-width: 61.999rem) {
  .hero__scene,
  .hero__content {
    min-height: 38rem;
  }

  .hero__camera {
    transform-origin: 44% 80%;
  }

  .hero__image {
    object-position: 43% 50%;
  }

  .hero__overlay {
    background:
      linear-gradient(
        90deg,
        rgb(7 7 7 / 78%) 0%,
        rgb(7 7 7 / 52%) 70%,
        rgb(7 7 7 / 31%) 100%
      ),
      linear-gradient(
        180deg,
        rgb(0 0 0 / 50%) 0%,
        rgb(0 0 0 / 8%) 30%,
        rgb(0 0 0 / 67%) 72%,
        rgb(0 0 0 / 91%) 100%
      );
  }

  .hero__content {
    padding-bottom: clamp(4.5rem, 9vh, 6.25rem);
  }

  .hero__copy {
    width: min(100%, 46rem);
  }

  .hero__heading {
    max-width: 11.5ch;
    font-size: clamp(3.4rem, 8vw, 5.4rem);
  }
}

@media (max-width: 47.999rem) {
  .hero__hero,
  .hero__scene,
  .hero__content {
    min-height: 100svh;
  }

  .hero__camera {
    transform-origin: 22% 78%;
  }

  .hero__image {
    object-position: 22% 50%;
  }

  .hero__content {
    align-items: flex-end;
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: clamp(2.25rem, 6vh, 3.75rem);
  }

  .hero__eyebrow {
    margin-bottom: 0.9rem;
    font-size: 0.7rem;
  }

  .hero__heading {
    max-width: 10.75ch;
    font-size: clamp(2.85rem, 13.2vw, 4.2rem);
  }

  .hero__description {
    max-width: 31rem;
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.55;
  }

  .hero__actions {
    display: grid;
    gap: 0.625rem;
    margin-top: 1.35rem;
  }

  .hero__primaryAction,
  .hero__secondaryAction {
    width: 100%;
    min-height: 48px;
  }
}

@media (max-height: 43.75rem) and (min-width: 48rem) {
  .hero__scene,
  .hero__content {
    min-height: 34rem;
  }

  .hero__content {
    align-items: center;
    padding-top: calc(var(--header-height) + 2.5rem);
    padding-bottom: 2.5rem;
  }

  .hero__heading {
    font-size: clamp(3.2rem, 7.2vh, 4.6rem);
  }

  .hero__description {
    margin-top: 0.9rem;
  }

  .hero__actions {
    margin-top: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__hero {
    overflow: visible;
  }

  .hero__camera,
  .hero__drift,
  .hero__labelExit,
  .hero__heading,
  .hero__description,
  .hero__actionsExit,
  .hero__overlay,
  .hero__depthShade,
  .hero__warmWash,
  .hero__handoff {
    will-change: auto;
  }

  .hero__warmWash,
  .hero__handoff {
    display: none;
  }
}