/* Client film: a quiet poster that expands into the native video dialog. */
.client-film{padding:48px 0 42px;background:#fff;color:var(--black)}
.client-film-inner{max-width:1000px}
.client-film-poster{display:block;position:relative;isolation:isolate;aspect-ratio:16/9;background:#101010;border:1px solid #dedede;box-shadow:0 12px 34px #10101012;transition:transform .3s ease,box-shadow .3s ease;text-decoration:none}
.client-film-poster>img{display:block;width:100%;height:100%;object-fit:contain}
.client-film-poster:hover{transform:translateY(-4px);box-shadow:-5px 5px 0 #15a29c,5px -5px 0 #ff0077,0 18px 38px #10101018}
.client-film-poster:focus-visible{outline:3px solid var(--pink);outline-offset:6px}
.client-film-play{position:absolute;left:8.65%;top:86.85%;width:clamp(44px,6vw,66px);aspect-ratio:1;display:grid;place-items:center;transform:translate(-50%,-50%);border:2px solid var(--teal);border-radius:50%;background:#101010;transition:background .25s,border-color .25s,box-shadow .25s}
.client-film-play>span{width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:15px solid #fff;margin-left:4px}
.client-film-poster:is(:hover,:focus-visible) .client-film-play{background:var(--pink);border-color:var(--pink);box-shadow:0 0 0 8px #ff00771a}
.client-film-play-label{position:absolute;left:15%;top:86.85%;transform:translateY(-50%);color:white;font:500 12px var(--mono);letter-spacing:.07em}
.client-film-caption{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:26px}
.client-film-caption p{font-size:19px;line-height:1.45;margin:0}
.client-film-caption .button{flex-shrink:0}
body.client-video-open{overflow:hidden}
#client-video-dialog{padding:0;border:1px solid #3b4949;max-width:none;width:min(1200px,calc(100vw - 32px),calc((100dvh - 140px)*1.777778));max-height:calc(100dvh - 24px);margin:auto;background:#101010;color:#fff;overflow:visible;box-shadow:0 28px 100px #0008}
#client-video-dialog::backdrop{background:#071316ed;backdrop-filter:blur(8px);animation:film-backdrop-in .3s ease both}
.client-video-shell{transform-origin:0 0}
.client-video-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:2px solid var(--teal)}
.client-video-toolbar h2{font:400 25px/1.2 var(--display);margin:0;color:white}
.client-video-close{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:5px 12px;border:1px solid #5a6565;background:#101010;color:white;font:500 14px var(--body);cursor:pointer}
.client-video-close>span:last-child{font:28px/1 Arial}
.client-video-close:hover{border-color:var(--pink);background:var(--pink)}
.client-video-close:focus-visible,.client-video-footer a:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.client-video-screen{position:relative;aspect-ratio:16/9;min-height:200px;background:#000;overflow:hidden}
.client-video-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.client-video-mount,.client-video-mount iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.client-video-footer{display:flex;justify-content:flex-end;padding:11px 18px;min-height:44px}
.client-video-footer a{color:#ddd;font:400 13px var(--body);text-underline-offset:4px}
.client-video-footer a:hover{color:#fff}
@keyframes film-backdrop-in{from{opacity:0}to{opacity:1}}
@media(max-width:760px){.client-film{padding:30px 0}.client-film-caption{align-items:flex-start;gap:18px;flex-direction:column;margin-top:22px}.client-film-caption p{font-size:17px}.client-film-caption .button{width:100%;text-align:center}.client-film-play-label{display:none}.client-video-toolbar{padding:9px 12px;gap:10px}.client-video-toolbar h2{font-size:19px}.client-video-close{padding:4px 9px;gap:7px}.client-video-footer{padding:10px 12px}}
@media(max-height:480px) and (orientation:landscape){#client-video-dialog{width:min(900px,calc(100vw - 28px),calc((100dvh - 112px)*1.777778));max-height:calc(100dvh - 12px)}.client-video-toolbar{padding:4px 12px}.client-video-toolbar h2{font-size:18px}.client-video-footer{padding:6px 12px;min-height:30px}.client-video-screen{min-height:200px}}
@media(prefers-reduced-motion:reduce){.client-film-poster,.client-film-play{transition:none}.client-film-poster:hover{transform:none}#client-video-dialog::backdrop{animation:none}}