/* Video slots: poster image + video + glass play button + pause/mute controls. Replace files in assets/videos/. */
.vid{position:relative;overflow:hidden;isolation:isolate;cursor:pointer;background:#0b2f6b}
.vid .vp,.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vid video{opacity:0;transition:opacity .5s;background:transparent}.vid.ready video{opacity:1}
.vid::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,16,60,.12),rgba(0,16,60,.34));transition:opacity .4s}
.vid.playing::after{opacity:0}
/* big centre play button */
.vbtn{position:absolute;z-index:3;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;cursor:pointer;padding:0;color:#fff;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s,box-shadow .3s;box-shadow:0 14px 34px -10px rgba(0,16,60,.6)}
.vbtn::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:vping 2.2s cubic-bezier(.2,.6,.3,1) infinite}
.vbtn i{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#001868,#008878 55%,#13b8a3);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px -4px rgba(0,136,120,.7)}
.vbtn svg{width:26px;height:26px;fill:#fff;margin-left:4px}
.vid:hover .vbtn,.vbtn:focus-visible{transform:scale(1.1);box-shadow:0 18px 40px -8px rgba(19,184,163,.65)}
.vid.playing .vbtn{opacity:0;pointer-events:none;transform:scale(.7)}.vid.playing .vbtn::before{animation:none}
@keyframes vping{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55);opacity:0}}
/* small control cluster: pause/play + mute */
.vctl{position:absolute;z-index:4;right:.8rem;top:.8rem;display:flex;gap:.45rem;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s}
.vid:hover .vctl,.vid:focus-within .vctl,.vid.paused .vctl{opacity:1;transform:none}
.vid.playing:not(:hover):not(:focus-within) .vctl{opacity:0}
@media(hover:none){.vid .vctl{opacity:1;transform:none}.vid.playing .vctl{opacity:.85}}
.vctl button{width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(0,16,60,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .2s,transform .2s}
.vctl button:hover{background:linear-gradient(135deg,#001868,#008878 55%,#13b8a3);transform:scale(1.08)}
.vctl svg{width:18px;height:18px;fill:#fff}
.vctl .ic-play,.vid.paused .vctl .ic-pause{display:none}.vid.paused .vctl .ic-play{display:block}
.vctl .ic-sound,.vctl .vm.on .ic-mute{display:none}.vctl .vm.on .ic-sound{display:block}
.vid.paused .vctl .vp2{display:none}
.vid.nofile .vctl,.vid.nofile .vbtn{display:none}
.vid .vtip{position:absolute;z-index:5;left:50%;bottom:1rem;transform:translateX(-50%);background:rgba(0,16,60,.85);color:#fff;font-size:.8rem;font-weight:700;padding:.4rem .9rem;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .3s;white-space:nowrap}
.vid.nofile .vtip{opacity:1}
/* gallery captions must not block clicks */
.gi span{pointer-events:none}
/* About hero: full-size video, same size as the home hero */
.vhero{position:relative;display:grid;align-items:center;min-height:clamp(540px,82vh,760px);padding:3rem 0 5.5rem;color:#fff;overflow:hidden;background:#0b2f6b}
.vhero .vid{position:absolute;inset:0;border-radius:0;box-shadow:none;margin:0;aspect-ratio:auto}
.vhero .vid::after{display:none}
.vhero .vctl{top:auto;bottom:1.6rem;right:max(1.25rem,calc((100% - 1240px)/2))}
.vhero .vctl,.vhero.on .vctl{opacity:1;transform:none}
.vhero .vbtn{top:auto;bottom:1.6rem;left:auto;right:max(1.25rem,calc((100% - 1240px)/2));margin:0;width:68px;height:68px}
.vhero .vbtn i{width:50px;height:50px}.vhero .vbtn svg{width:22px;height:22px}
.vhero .hpanel{z-index:1}.vhero .hcont{z-index:2;pointer-events:none}.vhero .hcont a{pointer-events:auto}
.vhero .bc,.vhero .bc a{color:#cfe8ff}.vhero h1{color:#fff;font-size:clamp(2.2rem,4.8vw,4rem);margin:.5rem 0 1rem;max-width:44rem;text-shadow:0 2px 18px rgba(0,0,0,.3)}
.vhero .lead{max-width:36rem}
@media(max-width:900px){.vhero{min-height:clamp(480px,78vh,640px)}.vctl button{width:40px;height:40px}.vbtn{width:72px;height:72px;margin:-36px 0 0 -36px}.vbtn i{width:52px;height:52px}}
@media(prefers-reduced-motion:reduce){.vbtn::before{animation:none}}
/* Spotlight cards: video replaces the linked image */
.spimg .vid{border-radius:0;box-shadow:none;aspect-ratio:16/10}
.spimg .spb{z-index:6}
.gi .vid{border-radius:22px}.gi .vctl{top:.6rem;right:.6rem}
.spc h3 a{color:inherit;text-decoration:none}.spc h3 a:hover{color:var(--teal)}
/* Fixed shapes: height comes from padding, so every video box keeps its picture shape whatever the file's own size */
.vid{aspect-ratio:auto!important;height:0;padding-top:75%}
.vid.r169{padding-top:56.25%}
.spimg .vid{padding-top:62.5%}
.vhero .vid{height:auto;padding-top:0}