.hero__banners,.hero__banner{position:absolute;inset:0}.hero__banner{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .75s ease,visibility 0s linear .75s}.hero__banner[data-active]{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .75s ease,visibility 0s}.hero__banner{display:block;overflow:hidden;background:#d9d5cb}.hero__banner img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

.hero__banner .hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:transparent}.hero__banner video:not([data-ready]){visibility:hidden}.hero__banner[data-desktop-type="video"] picture,.hero__banner[data-desktop-type="image"] video{display:none}@media(max-width:750px){.hero__banner[data-mobile-type="video"] picture,.hero__banner[data-mobile-type="image"] video{display:none}.hero__banner[data-mobile-type="image"] picture,.hero__banner[data-mobile-type="video"] video{display:block}}

.hero__banners{touch-action:pan-y}
.hero__controls{position:absolute;z-index:5;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:18px;color:#fff;text-shadow:0 1px 8px #0006}
.hero__controls[hidden]{display:none}
.hero__arrow{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#0004;color:#fff;cursor:pointer;transition:background .2s ease}
.hero__arrow:hover,.hero__arrow:focus-visible{background:#0008}.hero__arrow svg{display:block;width:27px;height:27px;fill:currentColor;opacity:.9}.hero__arrow[data-slide-next] svg{transform:rotate(180deg)}
 .hero__count{display:grid;place-items:center;min-width:38px;height:36px;text-align:center;font:300 12px Gelion,Arial,sans-serif;letter-spacing:1.6px}
@media(max-width:750px){.hero__controls{bottom:20px;gap:15px}.hero__arrow{width:32px;height:32px}.hero__arrow svg{width:25px;height:25px}.hero__count{height:32px}}

/* Keep the moving brand line clear of the navigation controls. */
.hero:has(.hero__banners) .marquee{bottom:76px}
@media(max-width:750px){.hero:has(.hero__banners) .marquee{bottom:65px}}
@media(prefers-reduced-motion:reduce){.hero__banner,.hero__banner[data-active]{transition:none}}

.hero__banner picture{display:block;width:100%;height:100%}
.hero__banner picture img{width:100%;height:100%;object-fit:cover}