/*
 * SD hero slider — full-bleed banner carousel.
 *
 * Measured on the reference at 1440: the slider is 1440 wide and exactly
 * 505px tall, with the artwork cropped to fill (its source is a wide,
 * short banner). At 390 the reference hero measures 150px.
 */
.sd-slider { position: relative; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); }
.sd-slider__track { display: flex; transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
.sd-slider__slide { flex: 0 0 100%; position: relative; display: block; color: inherit; }
.sd-slider__slide:hover { text-decoration: none; }
.sd-slider__image { width: 100%; display: block; height: 505px; object-fit: cover; }
@media (max-width: 1199px) { .sd-slider__image { height: 35vw; min-height: 260px; } }
@media (max-width: 767px)  { .sd-slider__image { height: 150px; min-height: 0; } }

/* The reference labels a slide with a small white pill, not a full-width
   gradient caption. */
.sd-slider__label {
  position: absolute; right: 40px; bottom: 40px;
  display: block; padding: 10px 18px;
  background: #fff; border-radius: 3px; color: #000;
}
.sd-slider__label strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.sd-slider__label span { display: block; margin-top: 2px; color: #4c4d4f; }
@media (max-width: 767px) { .sd-slider__label { right: 15px; bottom: 15px; padding: 8px 12px; } }

.sd-slider__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; gap: 6px; justify-content: center; }
.sd-slider__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; }
.sd-slider__dot.is-active { background: #fff; }