.reel-player{position:relative;background:#000;border-radius:8px;overflow:hidden;isolation:isolate;aspect-ratio:16/9;color:#fff}
.reel-player video{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;border-radius:0}.reel-preview{position:absolute;inset:0;object-fit:cover!important;pointer-events:none}.has-started .reel-preview{display:none}
.reel-player button{background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.65);color:#fff;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;padding:12px;cursor:pointer}.reel-player button:hover{background:rgba(0,0,0,.8)}.reel-player button:focus-visible,.reel-player input:focus-visible{outline:2px solid #fff;outline-offset:4px}.reel-player button svg{width:24px;height:24px}.reel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:72px!important;height:72px!important}.reel-play span{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid #fff;margin-left:4px}.reel-play.paused span{width:15px;height:20px;border:0;border-left:5px solid #fff;border-right:5px solid #fff;margin-left:0}.is-playing:not(:hover):not(:focus-within) .reel-play{opacity:0}
.reel-controls{position:absolute;z-index:4}.reel-audio{top:18px;right:18px;display:flex;align-items:center;gap:12px;flex-direction:row-reverse}.reel-volume{width:90px;accent-color:#fff}.reel-mute.muted{opacity:.65}.reel-full{right:18px;bottom:30px}.reel-seek{left:18px;bottom:10px;width:calc(100% - 36px);accent-color:#fff;cursor:pointer}.reel-error{position:absolute;left:20px;bottom:70px;background:#111;color:#fff!important;padding:12px;z-index:5;font-size:16px!important}.reel-error[hidden]{display:none}.reel-player:fullscreen{width:100%;height:100%;border-radius:0}
@media(hover:hover) and (pointer:fine){.reel-player.pointer-active .reel-main{cursor:none}.reel-player.pointer-active .reel-play{pointer-events:none}}
@media(max-width:600px){.reel-audio{top:10px;right:10px;gap:8px}.reel-player button{width:40px;height:40px;padding:9px}.reel-full{right:10px;bottom:30px}.reel-volume{width:70px}.reel-play{width:56px!important;height:56px!important}}

/* Supplied circular icons, with a matching rounded volume control. */
.reel-player button,.reel-player button:hover{padding:0;border:0;background:transparent;color:#fff;transition:color .18s ease}.reel-player button:hover,.reel-player button:focus-visible{color:var(--accent)}.reel-player button svg{width:100%;height:100%;display:block}.reel-mute.muted{opacity:1}.reel-full{bottom:18px}.reel-audio{gap:0}.reel-volume{appearance:none;-webkit-appearance:none;width:0;margin:0;opacity:0;visibility:hidden;pointer-events:none;height:42px;background:transparent;transition:width .2s ease,opacity .2s ease,margin .2s ease;accent-color:var(--accent)}.reel-audio:hover .reel-volume,.reel-audio:has(:focus-visible) .reel-volume{width:100px;margin-right:12px;opacity:1;visibility:visible;pointer-events:auto}.reel-volume::-webkit-slider-runnable-track{height:6px;background:#fff;border-radius:99px}.reel-volume::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #000;margin-top:-5px}.reel-volume:hover::-webkit-slider-runnable-track,.reel-volume:focus-visible::-webkit-slider-runnable-track{background:var(--accent)}.reel-volume:hover::-webkit-slider-thumb,.reel-volume:focus-visible::-webkit-slider-thumb{background:var(--accent)}.reel-volume::-moz-range-track{height:6px;background:#fff;border-radius:99px}.reel-volume::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid #000}.reel-player.pointer-active .reel-play{color:var(--accent)}
@media(hover:none){.reel-audio:has(:focus-visible) .reel-volume{width:80px}}

/* Full-width hero video with a bounded text column. */
@media(min-width:801px){.hero .hero-background{inset:0;left:0;right:0;width:100%;max-width:none;transform:none}.hero .hero-background .hero-video{width:100%;height:100%;object-fit:contain}}

.reel-player.is-preview .reel-play,.reel-player.is-preview .reel-controls{visibility:hidden;opacity:0;pointer-events:none}.reel-player.is-preview,.reel-player.is-preview .reel-main{cursor:pointer!important}

/* Accent is the resting color; hover changes scale instead of color. */
.reel-player button,.reel-player button:hover,.reel-player button:focus-visible{color:var(--accent)}
.reel-player button svg{transition:transform .18s ease,filter .18s ease}
.reel-player button:hover svg,.reel-player button:focus-visible svg{transform:none;filter:brightness(1.12)}
.reel-volume::-webkit-slider-runnable-track,.reel-volume::-moz-range-track{background:var(--accent)}
.reel-volume::-webkit-slider-thumb,.reel-volume::-moz-range-thumb{background:var(--accent)}
@media(prefers-reduced-motion:reduce){.reel-player button svg{transition:none}.reel-player button:hover svg,.reel-player button:focus-visible svg{transform:none}}

.reel-play svg path{stroke-width:28}
@media(max-width:600px){.reel-play svg path{stroke-width:30}}

/* Same hover visibility for preview and full playback. */
.reel-player .reel-play,.reel-player .reel-controls,
.reel-player.is-preview .reel-play,.reel-player.is-preview .reel-controls{visibility:hidden;opacity:0;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}
.reel-player:hover .reel-play,.reel-player:hover .reel-controls,
.reel-player.is-preview:hover .reel-play,.reel-player.is-preview:hover .reel-controls,
.reel-player:has(:focus-visible) .reel-play,.reel-player:has(:focus-visible) .reel-controls{visibility:visible;opacity:1;pointer-events:auto}
@media(hover:hover) and (pointer:fine){.reel-player.pointer-active .reel-play{pointer-events:none}}
@media(hover:none){.reel-player.touch-controls .reel-play,.reel-player.touch-controls .reel-controls{visibility:visible;opacity:1;pointer-events:auto}}

.reel-player.controls-idle .reel-play,.reel-player.controls-idle .reel-controls{visibility:hidden!important;opacity:0!important;pointer-events:none!important}.reel-player.controls-idle,.reel-player.controls-idle .reel-main{cursor:none!important}

@media(min-width:801px){.contact h2{font-size:clamp(38px,5.2vw,78px);line-height:1.15}}

.contact-title-line{display:block}
@media(min-width:801px){.contact h2{font-size:clamp(32px,4.4vw,64px)}.contact-title-line{white-space:nowrap}}
@media(max-width:800px){.contact-title-line{display:inline}.contact-title-line:not(:last-child)::after{content:' '}}

.reel-player.is-watch-prompt .reel-play{width:104px!important;height:104px!important;background:var(--accent);color:#000;border-radius:50%;font-family:var(--font-body,Inter,Arial,sans-serif)}
.reel-player.is-watch-prompt .reel-play .reel-watch-label{width:auto;height:auto;border:0;margin:0;padding:12px;font-size:15px;font-weight:600;line-height:1.15;text-align:center}
.reel-player.is-watch-prompt .reel-play:hover{filter:brightness(1.12)}
@media(max-width:600px){.reel-player.is-watch-prompt .reel-play{width:88px!important;height:88px!important}.reel-player.is-watch-prompt .reel-watch-label{font-size:14px}}
/* The custom player pointer replaces the native cursor, including preview and controls. */
@media(hover:hover) and (pointer:fine){.reel-player,.reel-player *,.reel-player.is-preview,.reel-player.is-preview .reel-main{cursor:none!important}}
@media(hover:hover) and (pointer:fine){.reel-player .reel-volume{cursor:ew-resize!important}.reel-player .reel-audio,.reel-player .reel-audio button{cursor:pointer!important}}

.project-preview .reel-player input.reel-volume{padding:0;border:0}.project-preview .reel-player button{margin:0}.case-figure .reel-player video{height:100%}

/* Keep the initial watch circle centered and visible until playback starts. */
.reel-player.is-watch-prompt .reel-watch-label{color:#000}.reel-player.is-preview{cursor:pointer}

/* Independent layers crossfade without replacing the icon or label. */
.reel-player .reel-watch-circle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:104px;height:104px;border-radius:50%;background:var(--accent);color:#000;display:grid;place-items:center;font-family:var(--font-body,Inter,Arial,sans-serif);font-size:15px;font-weight:600;line-height:1.15;z-index:3;pointer-events:none;opacity:0;transition:opacity .24s ease}
.reel-player.is-watch-prompt .reel-watch-circle{opacity:1}
.reel-player.is-watch-prompt .reel-play,.reel-player.is-watch-prompt.controls-idle .reel-play{opacity:0!important;visibility:hidden!important;pointer-events:none!important;background:transparent;width:72px!important;height:72px!important;transition:opacity .24s ease,visibility .24s ease}
.reel-player .reel-play{transition:opacity .24s ease,visibility .24s ease}
@media(max-width:600px){.reel-player .reel-watch-circle{width:88px;height:88px}.reel-player.is-watch-prompt .reel-play{width:56px!important;height:56px!important}}
@media(prefers-reduced-motion:reduce){.reel-player .reel-watch-circle,.reel-player .reel-play{transition:none!important}}

/* Empty controls stay hidden during setup; the fading play icon keeps its own color. */
.reel-player:not(.player-ready) .reel-play,.reel-player:not(.player-ready) .reel-controls{visibility:hidden!important;opacity:0!important;transition:none!important}
.reel-player .reel-play,.reel-player.is-watch-prompt .reel-play{background:transparent!important;color:#fff;width:72px!important;height:72px!important}
.reel-player.pointer-active .reel-play{color:var(--accent)}
@media(max-width:600px){.reel-player .reel-play,.reel-player.is-watch-prompt .reel-play{width:56px!important;height:56px!important}}

/* A mouse play cursor is revealed only after its real coordinates are set. */
@media(hover:hover) and (pointer:fine){.reel-player:not(.pointer-active):not(:has(:focus-visible)) .reel-play{opacity:0!important;visibility:hidden!important;pointer-events:none!important}}