.vbs-hero-horizon-frame { --vb-cinema-scroll: 220vh; overflow: clip; padding-block: clamp(2rem, 5vw, 4rem); }
.vbs-hero-horizon-frame__viewport { display: grid; gap: 2rem; padding-inline: var(--vb-gutter); max-inline-size: calc(var(--vb-max-wide) + var(--vb-gutter) * 2); margin-inline: auto; }
.vbs-hero-horizon-frame__masthead { display: grid; gap: 1rem; }
.vbs-hero-horizon-frame__title { font-size: clamp(var(--vb-fs-h1), 7vw, calc(var(--vb-fs-display-1) * 1.3)); max-inline-size: var(--vb-heading-measure, 20ch); }
.vbs-hero-horizon-frame__title em { font-weight: inherit; }
.vbs-hero-horizon-frame__media { --vb-ratio: 16 / 9; inline-size: 100%; border-radius: var(--vb-radius-card); }
.vbs-hero-horizon-frame__target, .vbs-hero-horizon-frame__cue { display: none; }
.vbs-hero-horizon-frame__chapter { display: grid; gap: 1.25rem; max-inline-size: 40rem; }
.vbs-hero-horizon-frame__chapter .vb-body { max-inline-size: 42ch; }
.vbs-hero-horizon-frame__chapter .vb-btn { justify-self: start; }
.vbs-hero-horizon-frame__footer { display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; padding-block-start: 1rem; border-block-start: var(--vb-border-hair) solid var(--vb-color-rule); }
.vbs-hero-horizon-frame__progress { position: absolute; inset-inline: var(--vb-gutter); inset-block-end: 0; block-size: calc(var(--vb-border-hair) * 2); background: var(--vb-color-rule); }
.vbs-hero-horizon-frame__progress span { display: block; block-size: 100%; background: var(--vb-color-accent); }
@media (min-width: 64rem) {
 .vbs-hero-horizon-frame__viewport { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; }
 .vbs-hero-horizon-frame__masthead, .vbs-hero-horizon-frame__footer { grid-column: 1 / -1; }
 .vbs-hero-horizon-frame__media { grid-column: 2; grid-row: 2; --vb-ratio: 4 / 3; }
 .vbs-hero-horizon-frame__chapters { grid-column: 1; grid-row: 2; align-self: center; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 64rem) and (min-height: 44rem) {
 html.vb-gsap .vbs-hero-horizon-frame[data-vb-cinema-pin="true"] { padding-block: 0; }
 html.vb-gsap .vbs-hero-horizon-frame[data-vb-cinema-pin="true"] .vbs-hero-horizon-frame__viewport { display: block; position: relative; block-size: 100svh; max-inline-size: none; overflow: hidden; isolation: isolate; }
 html.vb-gsap .vbs-hero-horizon-frame[data-vb-cinema-pin="true"] .vbs-hero-horizon-frame__masthead { position: absolute; z-index: 2; inset: 0 0 auto; padding: 1.75rem var(--vb-gutter) 1.25rem; background: var(--vb-surface); }
 html.vb-gsap .vbs-hero-horizon-frame[data-vb-cinema-pin="true"] .vbs-hero-horizon-frame__title { font-size: clamp(var(--vb-fs-h1), 6.5vw, var(--vb-fs-display-1)); }
 html.vb-gsap .vbs-hero-horizon-frame[data-vb-cinema-pin="true"] .vbs-hero-horizon-frame__media { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; aspect-ratio: auto; margin: 0; border-radius: 0; }
 html.vb-gsap .vbs-hero-horizon-frame[data-vb-cinema-pin="true"] .vbs-hero-horizon-frame__target { display: block; position: absolute; inset: 29% var(--vb-gutter) 13% 50%; border-radius: var(--vb-radius-card); visibility: hidden; pointer-events: none; }
 html.vb-gsap .vbs-hero-horizon-frame[data-vb-cinema-pin="true"] .vbs-hero-horizon-frame__chapters { position: absolute; inset: 30% 54% 13% var(--vb-gutter); display: grid; align-content: center; }
 html.vb-gsap .vbs-hero-horizon-frame[data-vb-cinema-pin="true"] .vbs-hero-horizon-frame__chapter { gap: clamp(.75rem, 2vh, 1.5rem); }
 html.vb-gsap .vbs-hero-horizon-frame[data-vb-cinema-pin="true"] .vbs-hero-horizon-frame__lead { font-size: var(--vb-fs-h2); }
 html.vb-gsap .vbs-hero-horizon-frame[data-vb-cinema-pin="true"] .vbs-hero-horizon-frame__footer { position: absolute; z-index: 2; inset: auto 0 0; padding: 1.5rem var(--vb-gutter); background: var(--vb-surface); border: 0; }
 html.vb-gsap .vbs-hero-horizon-frame[data-vb-cinema-pin="true"] .vbs-hero-horizon-frame__cue { display: inline; }
}