/* Keep the visible dots small, with stable touch targets. */
.hero-slider .overlay { pointer-events: none; }
.hero-slider-dots { gap: 0; bottom: 1.25rem; }
.hero-slider-dots[hidden] { display: none; }
.hero-slider-dots button,
.hero-slider-dots button.active,
.hero-slider-dots button:hover {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border-radius: 8px;
  touch-action: manipulation;
}
.hero-slider-dots button::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,.5);
  transition: width .2s ease, background .2s ease;
}
.hero-slider-dots button:hover::before { background: rgba(255,255,255,.8); }
.hero-slider-dots button.active::before { width: 28px; background: white; }
.hero-slider-dots button:focus-visible { outline: 2px solid white; outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
  .hero-slider .slide, .hero-slider-dots button::before { transition: none; }
}