/* v5 video: programme films (ambient loop in a brand shape + full-screen player). Prefix .vf- / .vp- / .vb-.
   Colours come from site.css tokens only. */

/* Film row inside a programme card: the film next to the programme's own words */
.vf-row{display:grid;gap:22px;padding:24px;border-bottom:2px solid var(--fog-2);align-items:center}
.vf-txt{display:grid;gap:12px;align-content:center;min-width:0}
.vf-txt .lab{margin:0}
.vf-say{margin:0;font-family:var(--f-d);font-weight:800;letter-spacing:-.035em;line-height:1.02;font-size:clamp(25px,6.4vw,50px);max-width:24ch;text-wrap:balance}
.vf-by{margin:0;font-size:14.5px;color:var(--stone);display:flex;align-items:center;gap:8px}
.vf-by::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--vf-c,var(--sun));flex:none}
.vf-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.vf-tr{font-size:15px;color:var(--stone);max-width:68ch}
.vf-tr summary{cursor:pointer;font-weight:700;color:var(--ink);min-height:44px;display:inline-flex;align-items:center;gap:8px;list-style:none}
.vf-tr summary::-webkit-details-marker{display:none}
.vf-tr summary::before{content:"";width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor;transition:background .2s}
.vf-tr[open] summary::before{background:currentColor}
.vf-tr p{margin:4px 0 0;line-height:1.55}

/* The film: a portrait arch on a colour shape, with a sticker and a play pill */
.vf{position:relative;margin:0;width:min(100%,300px);justify-self:center;isolation:isolate;padding:0 0 18px 18px}
.vf::before{content:"";position:absolute;z-index:-1;left:0;bottom:0;width:72%;aspect-ratio:1;border-radius:50%;background:var(--vf-c,var(--sun))}
.vf::after{content:"";position:absolute;z-index:-1;right:-6px;top:16%;width:22px;height:22px;border-radius:50%;background:var(--vf-d,var(--blue))}
.vf-shape{position:relative;aspect-ratio:4/5;border-radius:999px 999px var(--r-l) var(--r-l);overflow:hidden;background:var(--ink-2);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.vf-shape video,.vf-shape img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vf-shape img{transition:opacity .5s var(--ease)}
.vf.is-live .vf-shape img{opacity:0}
.vf-stk{position:absolute;z-index:2;top:-6px;right:-10px;rotate:5deg;font-family:var(--f-hand);font-weight:700;font-size:21px;line-height:1;padding:7px 12px 8px;border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:0 8px 20px rgba(0,0,0,.14);pointer-events:none}
.vf-play{position:absolute;z-index:2;left:50%;bottom:16px;translate:-50% 0;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 6px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font:700 14.5px/1 var(--f-b);cursor:pointer;white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.25);transition:scale .3s var(--spring)}
.vf-play:hover{scale:1.05}
.vf-play:focus-visible{outline:3px solid var(--vf-c,var(--sun));outline-offset:3px}
.vf-tri{width:36px;height:36px;border-radius:50%;background:var(--vf-c,var(--sun));display:grid;place-items:center;flex:none}
.vf-tri::before{content:"";margin-left:3px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--ink)}
.vf-shape .vf-hit{position:absolute;inset:0;z-index:1;cursor:pointer}

@media (min-width:700px){
  .vf-row{grid-template-columns:minmax(220px,300px) 1fr;gap:40px;padding:32px 36px}
  .vf{justify-self:start}
  .vf-say{font-size:clamp(26px,3.7vw,46px);max-width:22ch}
}
@media (min-width:1200px){
  .vf-row{grid-template-columns:340px 1fr;gap:64px}
  .vf{width:340px}
  .vf-say{font-size:clamp(36px,3.2vw,58px)}
}

@media (min-width:1400px){
  .pg .vf-txt{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:64px;align-items:center}
  .pg .vf-txt>:not(.vf-tr){grid-column:1}
  .pg .vf-tr{grid-column:2;grid-row:1/span 3;align-self:center;padding:22px 26px;border-radius:var(--r-m);background:var(--fog)}
  .pg .vf-tr p{font-size:16px}
}

/* Founder band near the top of the page */
.vb{padding-block:clamp(40px,7vw,96px);overflow:hidden}
.vb-in{display:grid;gap:30px;align-items:center}
.vb .h2{margin:8px 0 0}
.vb .vf-say{font-size:clamp(23px,5.6vw,40px);max-width:30ch;margin-top:18px;color:var(--paper)}
.vb .vf-by{color:var(--stone-2);margin-top:12px}
.vb .vf-acts{margin-top:22px}
.vb .vf{width:min(100%,320px)}
@media (min-width:700px){
  .vb-in{grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,72px)}
  .vb .vf{width:clamp(250px,30vw,400px);max-width:400px;justify-self:end}
}
@media (min-width:700px) and (max-width:1199px){.vb .h2{font-size:clamp(34px,5vw,60px)}.vb .vf-say{font-size:clamp(22px,2.9vw,34px)}}
@media (min-width:1500px){.vb-in{grid-template-columns:1fr 440px}.vb .vf{max-width:440px}}

/* Full-screen player */
.vp{position:fixed;inset:0;z-index:1000;background:var(--ink);color:var(--paper);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));opacity:0;transition:opacity .3s var(--ease);overscroll-behavior:contain;touch-action:pan-x}
.vp[hidden]{display:none}
.vp.on{opacity:1}
.vp-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.vp-bg b{position:absolute;left:-2vw;bottom:-4vw;font-family:var(--f-d);font-weight:800;letter-spacing:-.06em;line-height:.8;font-size:24vw;color:var(--vf-c,var(--sun));opacity:.13;white-space:nowrap}
.vp-bg i{position:absolute;right:8vw;top:12vh;width:22vmin;height:22vmin;border-radius:50%;background:var(--vf-c,var(--sun));opacity:.22}
.vp-stage{position:relative;height:min(calc(100dvh - 120px),calc((100vw - 32px) * 16 / 9),1080px);aspect-ratio:608/1080;max-width:100%;border-radius:22px;overflow:hidden;background:var(--ink-2);box-shadow:0 30px 80px rgba(0,0,0,.5);transition:translate .25s var(--ease),scale .25s var(--ease);scale:.96}
.vp.on .vp-stage{scale:1}
.vp-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--ink-2)}
.vp-x{position:absolute;z-index:3;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:48px;height:48px;border-radius:50%;border:0;background:var(--paper);color:var(--ink);font:700 26px/1 var(--f-b);cursor:pointer;display:grid;place-items:center}
.vp-x:focus-visible,.vp-cta:focus-visible{outline:3px solid var(--vf-c,var(--sun));outline-offset:3px}
.vp-side{position:relative;z-index:2;display:none}
.vp-side .lab{margin:0;color:var(--stone-2)}
.vp-side h2{font-family:var(--f-d);font-weight:800;letter-spacing:-.05em;line-height:.95;font-size:clamp(34px,3.4vw,64px);margin:10px 0 14px}
.vp-side p{margin:0 0 22px;color:var(--stone-2);max-width:34ch}
.vp-hint{position:absolute;left:max(16px,env(safe-area-inset-left));top:calc(max(14px,env(safe-area-inset-top)) + 14px);font-size:12.5px;color:var(--stone-2);margin:0;display:flex;align-items:center;gap:8px}
.vp-hint::before{content:"";width:5px;height:16px;border-radius:9px;background:var(--stone-2);opacity:.6}
.vp-mcta{display:flex;justify-content:center;margin-top:12px;position:relative;z-index:2}
@media (hover:hover) and (pointer:fine){.vp-hint{display:none}}
@media (min-width:1000px){
  .vp{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:48px;padding:32px 48px}
  .vp-side{display:block;justify-self:end;align-self:end;margin-bottom:6vh;max-width:380px}
  .vp-stage{height:min(calc(100dvh - 64px),1080px);grid-column:2}
  .vp-mcta{display:none}
}
/* phones and tablets held upright: film and button centred together, clear of the close button */
@media (max-width:999px){
  .vp{grid-template-rows:auto auto;align-content:center;gap:14px;padding-top:calc(max(14px,env(safe-area-inset-top)) + 60px)}
  .vp-stage{height:min(calc(100dvh - 176px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),calc((100vw - 32px) * 16 / 9))}
  .vp-mcta{margin-top:0}
}
/* phones (and small tablets) on their side: the film uses the full height, the button sits beside it */
@media (max-width:999px) and (orientation:landscape) and (max-height:600px){
  .vp{grid-template-rows:auto;grid-template-columns:auto auto;justify-content:center;align-content:center;align-items:end;gap:20px;
      padding:max(10px,env(safe-area-inset-top)) calc(max(14px,env(safe-area-inset-right)) + 60px) max(10px,env(safe-area-inset-bottom)) calc(max(14px,env(safe-area-inset-left)) + 60px)}
  .vp-stage{height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:16px}
  .vp-mcta{margin:0 0 6px}
  .vp-hint{display:none}
}
.vp .dots-loader.overlay{z-index:4}
html.vp-lock,html.vp-lock body{overflow:hidden}

/* phones on their side: keep the portrait film inside one screen */
@media (orientation:landscape) and (max-height:520px){
  .vf,.vb .vf{width:min(300px,calc((100svh - 70px) * .8));max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  .vf-play,.vp,.vp-stage,.vf-shape img{transition:none}
  .vf-play:hover{scale:1}
  .vp-stage,.vp.on .vp-stage{scale:1}
}