/* Video hero option (final-video.html only) */
.photo-frame .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#0e3a5c}
.photo-frame>img{visibility:hidden}
.photo-frame .image-shade{z-index:1;background:linear-gradient(0deg,#0e3a5ccc,transparent 38%)!important}
.photo-frame .image-caption,.photo-frame .photo-label{z-index:2}
@media (prefers-reduced-motion:reduce){.photo-frame .hero-video{display:none}.photo-frame>img{visibility:visible}}
/* The film is three workplaces side by side (16:9): give it a wide frame so nobody is cropped */
@media (min-width:981px){
  .opening:has(.video-hero){grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
  .video-hero{align-self:center;height:auto!important}
  .video-hero .photo-frame{aspect-ratio:16/9!important;height:auto!important}
}
@media (max-width:980px){.video-hero .photo-frame{aspect-ratio:16/9!important;height:auto!important}.video-hero{height:auto!important}}
/* Keep the action (hands, vase, box) visible: caption becomes a compact tag */
.video-hero .image-caption{left:16px!important;right:auto!important;bottom:16px!important;width:auto!important;padding:8px 12px!important;gap:10px}
.video-hero .image-caption span:first-child{font-size:15px!important;line-height:1.2}
.video-hero .image-caption .diagonal-arrow{width:16px;height:16px}
.video-hero .image-caption .diagonal-arrow svg{width:14px;height:14px}
.video-hero .photo-label{top:12px!important;left:12px!important}