/* Shared behavior, deliberately after Standard styles. Desktop grid overlap
   reserves the tallest slide; the stacked mobile layout follows the active one. */
.ccstl-hero .ccstl-hero-slides { display: grid; height: auto; }
/* Delay visual hiding until the outgoing fade ends. JS makes the outgoing
   slide inert immediately, so only the incoming controls remain interactive. */
.ccstl-hero .ccstl-hero-slide { grid-area: 1 / 1; position: relative; height: auto; min-width: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 600ms ease, visibility 0s linear 600ms; }
.ccstl-hero .ccstl-hero-slide--active { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.ccstl-hero-standard { width: 100%; height: 100%; background-size: cover; display: flex; align-items: flex-end; }
.ccstl-hero-standard .ccstl-hero-content { position: relative; bottom: auto; width: 100%; }
.ccstl-hero-standard .ccstl-hero-body { color: #fff; opacity: 1; }
.ccstl-hero .ccstl-hero-arrows { flex-wrap: wrap; }
.ccstl-hero:not(.ccstl-hero--ready) .ccstl-hero-arrows { visibility: hidden; }
.ccstl-hero .ccstl-hero-arrow { min-width: 44px; min-height: 44px; border-radius: 50%; }
.ccstl-hero-arrow img { display: block; width: 50px; height: 50px; }
.ccstl-hero .ccstl-hero-arrow:focus-visible,
.ccstl-hero :is(a,button):focus-visible { outline: 3px solid #fff !important; outline-offset: 5px; }
.ccstl-hero .ccstl-hero-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ccstl-hero .ccstl-hero-lightbox { display: none; position: fixed; inset: 0; margin: auto; padding: 54px 16px 16px; width: min(94vw,940px); height: auto; max-height: 92vh; border: 0; border-radius: 10px; background: #031c35; color: #fff; transform: none; }
.ccstl-hero .ccstl-hero-lightbox[open] { display: block; opacity: 1; visibility: visible; }
.ccstl-hero-lightbox::backdrop { background: rgba(0,0,0,.8); }
.ccstl-hero .ccstl-hero-lightbox-content { width: 100%; max-width: none; max-height: none; }
.ccstl-hero .ccstl-hero-lightbox-close { position: absolute; top: 8px; right: 12px; padding: 8px 12px; color: #fff; background: transparent; border: 1px solid #fff; border-radius: 4px; cursor: pointer; }
@media (max-width: 992px) { .ccstl-hero-arrow img { width: 40px; height: 40px; } }
@media (max-width: 768px) { .ccstl-hero-arrow img { width: 36px; height: 36px; } }
@media (max-width: 767px) {
    /* Only the active slide sets mobile height. Outgoing slides remain layered
       for the crossfade without making shorter slides inherit their height. */
    .ccstl-hero .ccstl-hero-slides { display: block; }
    .ccstl-hero .ccstl-hero-slide { position: absolute; }
    .ccstl-hero .ccstl-hero-slide--active { position: relative; }
}
@media (prefers-reduced-motion: reduce) { .ccstl-hero *, .ccstl-hero *::before, .ccstl-hero .ccstl-hero-slide { transition: none; animation: none; } .ccstl-hero-bg-video-wrap { display: none; } }