.hero-photo img.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.01);
  transition: opacity .65s ease, transform 3.5s ease-out;
}

.hero-photo img.hero-slide.is-current {
  opacity: 1;
  transform: scale(1.06);
}

.hero-photo img.hero-slide.hero-slide-portrait {
  object-fit: contain;
  object-position: 88% center;
  transform: none;
  background: #ddd6cd;
}

.hero-wash { pointer-events: none; }
.hero-inner { pointer-events: none; }
.hero-copy { pointer-events: auto; }
.hero-carousel-controls {
  position: absolute; inset: 0 0 0 50%; z-index: 3;
  display: grid; grid-template-columns: 25% 50% 25%;
}
.hero-carousel-controls[hidden] { display: none; }
.hero-carousel-controls button {
  display: grid; place-items: center; min-width: 44px; min-height: 44px;
  border: 0; padding: 0; border-radius: 0; background: transparent;
  color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hero-carousel-controls button span {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: rgba(25,29,31,.6); font: 32px/1 Arial,sans-serif;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.hero-carousel-controls [data-hero-symbol] { font-size: 22px; }
.hero-carousel-controls.show-feedback button span,
.hero-carousel-controls button:focus-visible span,
.hero-carousel-controls.is-paused [data-hero-symbol] { opacity: 1; }
.hero-carousel-controls button:focus-visible { outline: 2px solid white; outline-offset: -4px; }
.hero-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) {
  .hero-carousel-controls:hover button span { opacity: 1; }
}
@media (max-width: 600px) {
  .hero-carousel-controls { left: 0; }
}
.ba-arrows { display: inline-block; animation: compare-nudge 2.4s ease-in-out infinite; }
.ba-compare:hover .ba-arrows,
.ba-compare:active .ba-arrows,
.ba-compare:focus-within .ba-arrows { animation-play-state: paused; }
.ba-compare:focus-within .ba-handle { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes compare-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.hero-copy-intro .eyebrow { animation: home-text-in .65s ease both; }
.hero-copy-intro h1 { animation: home-text-in .85s .18s ease both; }
.hero-copy-intro .hero-lead { animation: home-text-in .85s .42s ease both; }
.home-reveal { animation: home-text-in .55s ease both; }

@keyframes home-text-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .hero-photo img.hero-slide.hero-slide-portrait { object-position: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo img.hero-slide.is-current { transform: none; }
  .ba-arrows { animation: none; }
}