/* Hero slider — shared by the modern and classic looks. */
.lx-slider {
  position: relative;
  overflow: hidden;
  background: #0b2233;
  height: clamp(240px, 36vw, 540px);
}
.lx-slider__track,
.lx-slide { position: absolute; inset: 0; }
.lx-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.lx-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .9s ease;
}
.lx-slide > *,
.lx-slide figure,
.lx-slide a { display: block; width: 100%; height: 100%; margin: 0; }
.lx-slide img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.lx-slide.is-active img { animation: lx-zoom 9s ease-out both; }
@keyframes lx-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }

.lx-slide__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 48px 6% 56px;
  color: #fff;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  background: linear-gradient(to top, rgba(4, 22, 36, .75), rgba(4, 22, 36, 0));
}

.lx-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: #0f2a3d;
  font-size: 30px;
  line-height: 40px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s, background .2s;
}
.lx-slider:hover .lx-slider__arrow,
.lx-slider__arrow:focus-visible { opacity: 1; }
.lx-slider__arrow:hover { background: #fff; }
.lx-slider__arrow--prev { left: 20px; }
.lx-slider__arrow--next { right: 20px; }

.lx-slider__dots {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.lx-slider__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: width .25s, background .25s;
}
.lx-slider__dot.is-active { width: 28px; background: #fff; }

@media (hover: none) {
  .lx-slider__arrow { opacity: 1; width: 36px; height: 36px; font-size: 24px; line-height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-slide, .lx-slide.is-active { transition: none; }
  .lx-slide.is-active img { animation: none; }
}