:root {--ctrl-bg:rgba(0,0,0,0.05); --ctrl-radius:15px; --ctrl-gap:10px; --btn-size:34px; --icon-size:20px; --accent:#ffffff; --progress-width:min(13vw, 920px); --progress-height:2px; --thumb-size:8px;}
html, body {height:100%; margin:0; background:#fff;  font-family:"Montserrat", sans-serif;} 

.headings { position: fixed; display: flex; align-items: center; justify-content: center; width: 100%; bottom: 15px; left: 50%; transform: translateX(-50%); color: #fff; text-align: center; }
.headings h1 { font-size: 13px; font-weight: 600; margin: 0 4px; text-transform: uppercase;}
.headings h2 { font-size: 13px; font-weight: 400; margin: 0}

.cookie-btn-wrapper{ position: fixed; right:20px; bottom: 15px; color: #fff;}
.cookie-btn-wrapper a{ font-size: 12px; color: #fff; filter: brightness(0) invert(1);}

.bg-video {position:fixed; inset:0; width:100vw; height:100vh; object-fit:cover; z-index:0; background:#fff;}
.overlay {position:fixed; inset:0; z-index:1; pointer-events:none;}
.video-logo {position:fixed; left:50%; transform:translateX(-50%); top:30px; width:50px; height:50px; z-index:2; display:flex; gap:var(--ctrl-gap); align-items:center; pointer-events:auto;}
.video-logo .logo {width:100%; height:100%; object-fit:contain; object-position:center;}
.video-controls {position:fixed; left:50%; transform:translateX(-50%); bottom:74px; z-index:2; display:flex; gap:var(--ctrl-gap); align-items:center; background:var(--ctrl-bg); padding:6px 6px; border-radius:var(--ctrl-radius); backdrop-filter:blur(2px); pointer-events:auto;}
.video-controls .control {-webkit-tap-highlight-color:transparent; border:0; background:transparent; color:var(--accent); font-size:16px; height:var(--btn-size); width:var(--btn-size); display:inline-flex; align-items:center; justify-content:center; border-radius:10px; cursor:pointer; transition:background .12s, transform .08s; padding:0;}
.video-controls .control:focus {outline:2px solid rgba(255,255,255,0.12); outline-offset:2px;}
.video-controls .control:hover {background:rgba(255,255,255,0.06);}
.icon {color:var(--accent); filter:brightness(0) invert(1);}
.progress-container {position:fixed; left:50%; transform:translateX(-50%); bottom:60px; z-index:3; width:var(--progress-width); max-width:calc(100% - 40px); display:flex; align-items:center; justify-content:center; pointer-events:auto;}
.progress {position:relative; width:100%; height:var(--progress-height); background:rgba(255,255,255,0.12); border-radius:999px; overflow:visible; cursor:pointer;}
.progress .buffered {position:absolute; left:0; top:0; bottom:0; height:100%; width:0%; background:rgba(255,255,255,0.18); border-radius:999px;}
.progress .played {position:absolute; left:0; top:0; bottom:0; height:100%; width:0%; background:linear-gradient(90deg, #fff 0%, #fff 100%); border-radius:999px; transition:width 0.05s linear;}
.progress .thumb {position:absolute; top:50%; transform:translate(-50%,-50%); left:0%; width:var(--thumb-size); height:var(--thumb-size); border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0, 0, 0, 0.5); transition:transform .06s; touch-action:none; display:none;}
.progress.dragging .thumb {display:block;}
.progress:hover .thumb {display:block;}
.sr-only {position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; clip-path:inset(50%); border:0; padding:0; margin:-1px;}

@media (max-width:440px) {
:root {--btn-size:44px; --icon-size:18px; --ctrl-gap:8px; --progress-width:92vw;}
.progress {height:3px;}
:root {--thumb-size:10px;}
.headings { display: inline;}
.headings { color: #333;}
.bg-video {height:75vh}
.icon { filter:none;}
.cookie-btn-wrapper a{   filter: none;}
.progress {background:rgba(50,50,50,0.12);}
.progress .buffered {background:rgba(50, 50, 50, 0.18);}
.progress .thumb {background-color:#333;}
.progress .played {background:linear-gradient(90deg, #333 0%, #333 100%);}
}