/* Simple slider — replaces LayerSlider (crossfade + Ken Burns, captions, arrows, dots). */
/* the 1600px cap lives on the wrapper so .ss-slider has nothing that can be overridden */
.ss-wrap { max-width: 1600px; margin: 0 auto; }
.ss-slider {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    overflow: hidden; background: #0f1a0f; outline: none; user-select: none; touch-action: pan-y;
}
.ss-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.ss-slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; z-index: 1; }
.ss-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); }
.ss-slide.is-active img { animation: ssKenBurns var(--ss-dur, 4.5s) ease-out forwards; }
.ss-slide.is-even.is-active img { animation-name: ssKenBurns2; }
@keyframes ssKenBurns  { from { transform: scale(1);    } to { transform: scale(1.08) translate(-1%, -1%); } }
@keyframes ssKenBurns2 { from { transform: scale(1.08) translate(1%, 0); } to { transform: scale(1); } }

/* caption */
.ss-cap {
    position: absolute; left: 50%; bottom: 7%; width: min(92%, 1100px); transform: translate(-50%, 20px);
    padding: 22px 26px; border-radius: 12px; background: rgba(0, 0, 0, .55); color: #fff; text-align: center;
    font-size: clamp(16px, 2.4vw, 34px); line-height: 1.4; opacity: 0; backdrop-filter: blur(2px);
    transition: opacity .6s ease .35s, transform .6s cubic-bezier(.2, .8, .2, 1) .35s;
}
.ss-slide.is-active .ss-cap { opacity: 1; transform: translate(-50%, 0); }

/* arrows */
.ss-arrow {
    position: absolute; top: 50%; z-index: 3; width: 52px; height: 52px; margin-top: -26px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .22); color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease, background .2s ease, transform .2s ease;
}
.ss-prev { left: 18px; } .ss-next { right: 18px; }
.ss-slider:hover .ss-arrow, .ss-slider:focus-within .ss-arrow { opacity: 1; }
.ss-arrow:hover, .ss-arrow:focus-visible { background: var(--ss-accent, #05ae00); transform: scale(1.08); outline: none; }

/* dots + progress */
.ss-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.ss-dot {
    position: relative; width: 34px; height: 8px; padding: 0; border: 0; border-radius: 8px; overflow: hidden;
    background: rgba(255, 255, 255, .45); cursor: pointer; transition: width .3s ease, background .2s ease;
}
.ss-dot:hover, .ss-dot:focus-visible { background: rgba(255, 255, 255, .8); outline: none; }
.ss-dot.is-active { width: 56px; background: rgba(255, 255, 255, .35); }
.ss-dot.is-active::after { content: ""; position: absolute; inset: 0; transform-origin: left; background: var(--ss-accent, #05ae00); animation: ssProgress var(--ss-dur, 4.5s) linear forwards; }
.ss-slider.is-paused .ss-dot.is-active::after { animation-play-state: paused; }
@keyframes ssProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 767px) {
    .ss-arrow { width: 40px; height: 40px; margin-top: -20px; font-size: 16px; opacity: .85; }
    .ss-prev { left: 8px; } .ss-next { right: 8px; }
    .ss-cap { padding: 10px 14px; bottom: 30px; }
    .ss-dot { width: 22px; height: 6px; } .ss-dot.is-active { width: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .ss-slide, .ss-slide.is-active, .ss-cap { transition: none; }
    .ss-slide.is-active img, .ss-dot.is-active::after { animation: none; }
    .ss-dot.is-active { background: var(--ss-accent, #05ae00); }
}