.showreel-trigger { background: transparent; color: var(--paper); cursor: pointer; flex-shrink: 0; }
.hero-content, .hero-index { transition: opacity 550ms ease; }
.is-showreel-open .hero-content, .is-showreel-open .hero-index { opacity: 0 !important; pointer-events: none; }
html.is-showreel-open { overflow: hidden; overscroll-behavior: none; }
.showreel-layer { position: fixed; inset: 0; z-index: 150; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 550ms ease, visibility 0s linear 550ms; }
.is-showreel-open .showreel-layer { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.showreel-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.8); }
.showreel-stage { position: absolute; inset: 100px 5vw 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; opacity: 0; transform: translateY(8px); transition: opacity 350ms ease, transform 350ms ease; }
.is-showreel-open .showreel-stage { opacity: 1; transform: none; transition-delay: 180ms; }
.showreel-stage video { display: block; width: min(100%, 1200px, calc((100svh - 180px) * 16 / 9)); max-height: calc(100svh - 180px); aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.showreel-close { display: flex; gap: 10px; align-items: center; align-self: flex-end; background: transparent; color: var(--paper); border: 0; min-height: 44px; padding: 0 12px; font: inherit; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.showreel-close:focus-visible, .showreel-trigger:focus-visible { outline: 1px solid var(--paper); outline-offset: 4px; }
.showreel-status { color: var(--paper); font-size: 12px; margin: 0; }
@media (max-width: 700px) { .showreel-stage { inset: 84px 4vw 24px; } }
@media (prefers-reduced-motion: reduce) { .hero-content, .hero-index, .showreel-layer, .showreel-stage { transition: none; } }
@media (max-width: 700px) {
  .hero-bottom { grid-template-columns: minmax(0, 1fr) 82px; align-items: center; gap: 16px; }
  .showreel-trigger { display: flex; width: 82px; height: 82px; font-size: 10px; }
}