.hero {
  background-image: none;
  overflow: hidden;
}

.hero-slides,
.hero-slide {
  position: absolute;
  inset: 0;
}

.hero-slides::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 6, 6, .92) 0%, rgba(5, 6, 6, .5) 42%, transparent 68%);
}

.hero-slide {
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .9s ease;
}

.hero-slide.active {
  opacity: 1;
  animation: hero-image-motion 25s linear forwards;
}

.hero-copy.is-changing {
  animation: hero-copy-in .55s ease;
}

.hero-wordmark {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: .12em;
  font-size: .78em;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 44px;
  height: 58px;
  margin-top: -29px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(7, 8, 7, .45);
  color: #fff;
  font: 34px/1 Georgia, serif;
  cursor: pointer;
  transition: .2s;
}

.hero-arrow:hover,
.hero-arrow:focus-visible {
  border-color: var(--gold);
  background: var(--gold);
  color: #111;
}

.hero-prev { left: 18px; }
.hero-next { right: 18px; }

.hero-dots {
  z-index: 3;
  bottom: 16px;
}

.hero .slide-count {
  z-index: 3;
}

.hero-dots button {
  width: 28px;
  height: 14px;
  padding: 6px 2px;
  border: 0;
  background: linear-gradient(#4b4c48, #4b4c48) center / 24px 2px no-repeat;
  cursor: pointer;
}

.hero-dots button.active {
  background-image: linear-gradient(var(--gold), var(--gold));
}

@keyframes hero-copy-in {
  from { opacity: .25; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes hero-image-motion {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(-8px, -3px, 0); }
}

@media (max-width: 620px) {
  .hero-slide { background-position: 63% center; }
  .hero-arrow { top: auto; bottom: 44px; width: 38px; height: 42px; margin: 0; }
  .hero-prev { left: 14px; }
  .hero-next { right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity .2s ease; transform: none; animation: none; }
  .hero-copy.is-changing { animation: none; }
}