/* Skitter is behind the unchanged hero caption and gradient. */
.hero-photo .hero-photo-bg { filter: none; object-position: center 35%; }
.estella-hero-skitter.skitter {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  margin: 0; background: transparent; pointer-events: none; z-index: 0;
}
.estella-hero-skitter > ul { display: none !important; }
.hero-photo:not(.hero-slider-ready) .estella-hero-skitter { visibility: hidden; }
.estella-hero-skitter .container_skitter { position: relative; overflow: hidden; }
.estella-hero-skitter .image { width: 100%; height: 100%; }
.estella-hero-skitter .image img, .estella-hero-skitter .box_clone img {
  width: var(--hero-slider-width) !important; height: var(--hero-slider-height) !important;
  max-width: none; object-fit: cover; object-position: center 35%;
}
.hero-slider-ready > .hero-photo-bg { visibility: hidden; }
.hero-photo::after { pointer-events: none; z-index: 1; }
.hero-slider-controls {
  position: absolute; z-index: 3; right: 24px; bottom: 16px;
  display: flex; align-items: center; gap: 6px;
}
.hero-slider-controls button {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  color: #fff; background: transparent; border: 0; cursor: pointer;
}
.hero-slider-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1px solid #fff; opacity: .7; }
.hero-slider-dot[aria-current="true"]::before { background: #fff; opacity: 1; }
.hero-slider-controls button:hover { opacity: .8; }
.hero-slider-controls button:focus-visible { outline-color: #fff; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .hero-slider-pause { display: none !important; } }