/* Hero geometry is reserved before images or scripts load. */
.c-perform-hero { position: relative; isolation: isolate; width: 100%; height: 55vh; height: 55svh; overflow: hidden; background: #000; }
.c-perform-hero__picture { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 2s ease; }
.c-perform-hero__picture.is-current { opacity: 1; }
.c-perform-hero__picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.c-perform-hero__title { position: absolute; z-index: 1; top: 50%; left: max(var(--perform-content-gutter), calc((100% - var(--perform-content-width)) / 2)); right: max(var(--perform-content-gutter), calc((100% - var(--perform-content-width)) / 2)); transform: translateY(-50%); margin: 0; color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / 50%); font-family: var(--perform-font-sans); font-weight: 700; font-size: 30px; line-height: 1.4; }
@media (max-width: 767px) { .c-perform-hero__title { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .c-perform-hero__picture { transition: none; } }