/* ==========================================================================
   Hero (Work page and Portfolio tabs): full-width media directly BELOW the sticky header (the header is in the normal flow, so the
   video starts at the bar's bottom edge and nothing is hidden behind it), VIEW REEL button, scroll hint.
   Figma: hero 1642x741 (cropped to the 1440 frame), inner shadow 0 -32 / 70.7 blur / -26 spread, 79% black;
   button = 55px play icon + Quicksand Bold 20.
   ========================================================================== */
.ps-hero { position: relative; overflow: hidden; background: #000; color: #fff; }
.ps-hero__media { display: block; width: 100%; height: clamp(340px, 92vw, 480px); object-fit: cover; } /* phones: taller than wide-screen crop, 16:9 sources keep ~65% of their width */
@media (min-width: 600px) { .ps-hero__media { height: clamp(300px, 51.5vw, 741px); } }
.ps-hero::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -32px 70.7px -26px rgba(0, 0, 0, 0.79); pointer-events: none; }
.ps-hero__actions { position: absolute; left: 0; right: 0; bottom: clamp(20px, 15%, 112px); z-index: 2; max-width: var(--ps-container); margin-inline: auto; box-sizing: border-box; padding-inline: var(--ps-gutter); pointer-events: none; }
.ps-hero__actions > * { pointer-events: auto; }
.ps-hero--tab { background: #fff; }

.ps-reel-button { display: inline-flex; align-items: center; gap: 14px; min-height: 55px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--ps-font-brand); font-weight: 700; font-size: clamp(15px, 3.8vw, 20px); letter-spacing: 0; color: #fff; }
.ps-reel-button--dark { color: #1e1e1e; }
.ps-reel-button .ps-icon { width: 55px; height: 55px; flex: 0 0 auto; transition: transform 0.2s cubic-bezier(0, 0, 0.58, 1); }
.ps-reel-button:hover .ps-icon, .ps-reel-button:focus-visible .ps-icon { transform: scale(1.06); }

.ps-scroll-hint { margin: 0; padding: 20px 0 0; text-align: center; }
.ps-scroll-hint a { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; color: #1e1e1e; }
.ps-scroll-hint .ps-icon { width: 28px; height: 28px; transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) { .ps-reel-button .ps-icon { transition: none; } }