.showreel-intro{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.4fr);gap:28px;align-items:center;padding:22px;margin:0 0 26px;background:var(--surface,#fff);border:1px solid var(--line,#d8dfd5);border-radius:12px}.showreel-poster{position:relative;display:block;padding:0;border:1px solid var(--line,#d8dfd5);border-radius:8px;overflow:hidden;background:#f3f4e9;cursor:pointer;aspect-ratio:16/9;width:100%}.showreel-poster img{display:block;width:100%;height:100%;object-fit:cover}.showreel-play{position:absolute;inset:0;display:grid;place-items:center;background:rgb(10 34 23/.1)}.showreel-play svg{width:48px;height:48px;padding:12px;border-radius:50%;background:var(--primary,#174b32);color:white;box-shadow:0 3px 14px #0002;transition:transform 160ms ease-out}.showreel-duration{position:absolute;right:9px;bottom:9px;background:#152c23;color:white;font-size:11px;padding:4px 7px;border-radius:4px;font-variant-numeric:tabular-nums}.showreel-eyebrow{display:block;color:var(--primary,#174b32);font-size:11px;font-weight:600;margin-bottom:8px}.showreel-intro h2{font-size:24px;letter-spacing:-.025em;line-height:1.2;margin:0 0 10px}.showreel-intro-copy>p{font-size:13px;color:var(--muted,#5b6b61);line-height:1.65;margin:0 0 16px;max-width:65ch}.showreel-intro-copy .showreel-meta{font-size:11px;margin:11px 0 0}.showreel-intro .btn svg{width:16px;height:16px}.showreel-poster:focus-visible{outline:3px solid var(--primary,#174b32);outline-offset:4px}.showreel-dialog{width:min(1080px,calc(100vw - 32px));max-width:1080px;max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line,#d8dfd5);border-radius:12px;overflow:auto;color:var(--ink,#152c23);background:var(--surface,#fff)}.showreel-dialog::backdrop{background:rgb(12 29 19/.72)}.showreel-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px}.showreel-dialog-head h2{font-size:18px;margin:0 0 4px}.showreel-dialog-head p,.showreel-dialog-foot p{font-size:12px;color:var(--muted,#5b6b61);margin:0;line-height:1.5}.showreel-video{display:block;width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 205px);background:#152c23;object-fit:contain}.showreel-dialog-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px}.showreel-playback-message{font-size:13px;padding:12px 20px;margin:0;background:var(--amber-bg,#fff5dd)}
@media(hover:hover) and (pointer:fine){.showreel-poster:hover .showreel-play svg{transform:scale(1.06)}}.showreel-poster:active .showreel-play svg{transform:scale(.97)}
@media(max-width:760px){.showreel-intro{grid-template-columns:1fr;gap:18px;padding:16px}.showreel-intro h2{font-size:22px}.showreel-intro .actions{align-items:stretch}.showreel-intro .actions .btn{flex:1;justify-content:center}.showreel-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.showreel-dialog-head,.showreel-dialog-foot{padding:14px}.showreel-dialog-foot{align-items:flex-start;flex-direction:column}.showreel-dialog-foot .btn{width:100%;justify-content:center}.showreel-video{max-height:calc(100dvh - 240px)}}
@media(prefers-reduced-motion:reduce){.showreel-play svg{transition:none}.showreel-poster:hover .showreel-play svg,.showreel-poster:active .showreel-play svg{transform:none}}