.hero-carousel {
  background: #050505;
  border-bottom: 1px solid #685016;
}

.hero-carousel-stage {
  background: #080808 url('/assets/hero-wesllen-poster.jpg') center / cover no-repeat;
  position: relative;
  width: 100%;
  aspect-ratio: 1983 / 793;
  max-height: 500px;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

.hero-carousel-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}

.hero-carousel-slide.is-active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}

.hero-carousel-slide picture,
.hero-carousel-slide img,
.hero-carousel-slide video,
.hero-carousel-slide a {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-carousel-slide img,
.hero-carousel-slide video {
  object-fit: cover;
  object-position: var(--desktop-position, center center);
}

.hero-carousel-hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 10px;
  cursor: pointer;
  transition: background 180ms ease, box-shadow 180ms ease;
}
.hero-carousel-brand-correction {
  position: absolute;
  z-index: 2;
  left: 4.7%;
  top: 8.2%;
  width: 42%;
  background: #080a0b;
  color: #f6f6f6;
  font: 500 clamp(10px, 1.18vw, 16px)/1.4 Arial, sans-serif;
  letter-spacing: .18em;
  white-space: nowrap;
  pointer-events: none;
}
.hero-carousel-brand-correction strong { color: #ffc400; font-weight: 800; }

.hero-carousel-hotspot:hover,
.hero-carousel-hotspot:focus-visible {
  background: #ffce281c;
  box-shadow: inset 0 0 0 2px #ffd34d;
  outline: none;
}
.hero-carousel-hotspot--embedded:hover {
  background: transparent;
  box-shadow: none;
}
.hero-carousel-hotspot--embedded:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.hero-carousel-responsive-actions { display: none; }

.hero-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 48px;
  padding: 4px 14px;
  background: #090909;
  border-top: 1px solid #48380f;
}

.hero-carousel-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #605021;
  border-radius: 50%;
  background: #171717;
  color: #ffc400;
  font: 400 31px/1 Arial, sans-serif;
  transition: background 180ms ease, border-color 180ms ease;
}

.hero-carousel-arrow:hover,
.hero-carousel-arrow:focus-visible {
  background: #292109;
  border-color: #ffc400;
}

.hero-carousel-arrow span { transform: translateY(-2px); }

.hero-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.hero-carousel-dot {
  display: grid;
  place-items: center;
  width: 30px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
}

.hero-carousel-dot::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #777;
  transition: background 180ms ease, transform 180ms ease;
}

.hero-carousel-dot:hover::before,
.hero-carousel-dot[aria-current="true"]::before {
  background: #ffc400;
  transform: scale(1.3);
}

@media (max-width: 1100px) {
  .hero-carousel-slide img,
  .hero-carousel-slide video { object-position: var(--tablet-position, center center); }
  .hero-carousel-responsive-actions:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px 12px;
    border-top: 1px solid #48380f;
    background: #0b0b0b;
  }
  .hero-carousel-responsive-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid #9b7319;
    border-radius: 6px;
    color: #ffd44e;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
  }
  .hero-carousel-responsive-actions a:hover,
  .hero-carousel-responsive-actions a:focus-visible { background: #312408; border-color: #ffd44e; }
  .hero-carousel-responsive-actions[data-kind="personalize"] {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
    padding: 18px clamp(16px, 4vw, 34px) 22px;
    gap: 16px;
  }
  .hero-carousel-mobile-copy { max-width: 760px; }
  .hero-carousel-mobile-eyebrow { display: block; color: #ffc400; font-size: 11px; font-weight: 800; letter-spacing: .13em; }
  .hero-carousel-mobile-copy h2 { margin: 8px 0; color: #ffc400; font-size: clamp(27px, 5vw, 40px); line-height: 1; font-weight: 900; }
  .hero-carousel-mobile-copy p { margin: 0; color: #eee; font-size: 14px; line-height: 1.45; }
  .hero-carousel-mobile-copy ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; padding: 0; margin: 14px 0 0; list-style: none; }
  .hero-carousel-mobile-copy li { color: #f4f4f4; font-size: 11px; font-weight: 800; }
  .hero-carousel-mobile-copy li::before { content: '✦'; color: #ffc400; margin-right: 6px; }
  .hero-carousel-responsive-actions[data-kind="personalize"] a {
    min-height: 49px;
    max-width: 450px;
    background: linear-gradient(#ffd84e,#e5a500);
    border-color: #ffcf32;
    color: #0c0c0c;
    font-size: 15px;
  }
}

@media (max-width: 820px) {
  .hero-carousel-stage { aspect-ratio: auto; height: clamp(340px, 52vw, 420px); }
}

@media (max-width: 600px) {
  .hero-carousel-brand-correction { display: none; }
  .hero-carousel-stage { height: clamp(295px, 81vw, 350px); }
  .hero-carousel-slide img,
  .hero-carousel-slide video { object-position: var(--mobile-position, left center); }
  .hero-carousel-controls { min-height: 50px; gap: 10px; }
  .hero-carousel-arrow { width: 42px; height: 42px; }
  .hero-carousel-dot { width: 30px; height: 42px; }
  .hero-carousel-responsive-actions:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-carousel-responsive-actions a:first-child { grid-column: 1 / -1; }
  .hero-carousel-responsive-actions[data-count="2"] a:first-child { grid-column: auto; }
  .hero-carousel-responsive-actions[data-kind="personalize"] { grid-template-columns: 1fr; }
  .hero-carousel-responsive-actions[data-kind="personalize"] a:first-of-type { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel-slide,
  .hero-carousel-arrow,
  .hero-carousel-dot::before { transition-duration: 0ms; }
}