/* The photograph stays underneath until an actual video frame is playing. */
.banner-motion { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:var(--banner-position,50% 50%); opacity:0; pointer-events:none; }
.banner-motion[data-visible="true"] { opacity:1; }
.banner-video[data-banner-layout=background] .banner-surface { min-height:clamp(30rem,34cqw,40rem); background:#182322; align-items:end; }
.banner-video[data-banner-layout=background] .banner-media { inset:0; width:100%; height:100%; max-width:none; }
.banner-video[data-banner-layout=background] .banner-media picture { width:100%; height:100%; padding:0; }
.banner-video[data-banner-layout=background] .banner-media::before { display:none; }
.banner-video[data-banner-layout=background] .banner-surface::after { display:block; background:linear-gradient(180deg,transparent 35%,#0000000a 55%,#00000069 100%); }
.banner-video[data-banner-layout=background] .banner-content { width:min(40rem,55%); max-width:none; margin-left:max(2.25rem,calc((100cqw - 90rem)/2)); padding:3rem 0 5.5rem; }
.banner-video[data-banner-layout=background] .banner-text,
.banner-video[data-banner-layout=background] .banner-description { color:#fff; text-shadow:0 1px 12px #00000040; }
.banner-video[data-banner-layout=background] .banner-title { font-size:clamp(2.75rem,4.5cqw,5rem); font-weight:500; line-height:1.04; letter-spacing:-.04em; margin-bottom:.65rem; }
.banner-video[data-banner-layout=background] .banner-description { font-size:clamp(1rem,1.5cqw,1.4rem); letter-spacing:.12em; margin-bottom:1.5rem; }
.banner-video[data-banner-layout=background] .banner-button { background:#fff; color:#191919; border-color:#fff; text-shadow:none; }
.banner-video[data-banner-layout=background] .banner-button:hover { background:#eee; border-color:#eee; }

.hero-carousel .hero-indicators i,
.hero-carousel[data-auto-paused="true"] .hero-indicators [aria-pressed="true"] i { transform:scaleX(var(--hero-progress,0))!important; }
.hero-carousel:has(.hero-slide.is-active .banner-video) .hero-controls { --control-shadow:#000000b3; --control-hover:#ffffff1a; color:#fff; }

@container(max-width:760px) {
  .banner-video[data-banner-layout=background] .banner-surface { min-height:31.25rem; }
  .banner-video[data-banner-layout=background] .banner-content { width:auto; margin-inline:1.125rem; padding:0 0 4.8rem; }
  .banner-video[data-banner-layout=background] .banner-title { font-size:clamp(2.25rem,10cqw,3.2rem); }
  .banner-video[data-banner-layout=background] .banner-description { font-size:1rem; margin-bottom:1.25rem; }
  .banner-motion { object-position:var(--banner-mobile-position,50% 50%); }
}
@media(max-width:760px) {
  .hero-carousel .hero-slide { min-height:31.25rem; }
}