/* Home page film (VSL). Kept in its own file so site.css / conversion.css, cached for a year under ?v=75,
   don't need a version bump on every page. */
.vsl-section{padding-top:calc(var(--header-h) + clamp(1.5rem,3.2vw,2.75rem));padding-bottom:clamp(2.75rem,5vw,4.25rem);text-align:center;
  background:radial-gradient(ellipse 75% 60% at 50% 48%,rgba(199,154,94,.13),rgba(199,154,94,0) 70%),var(--ink-950)}
.vsl-pill{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 clamp(1rem,2vw,1.35rem);padding:.6rem 1.3rem;
  border:1px solid rgba(199,154,94,.55);border-radius:999px;background:rgba(199,154,94,.08);
  color:var(--brass-lift);font:600 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.vsl-pill__dot{width:7px;height:7px;border-radius:50%;background:var(--brass-lift);box-shadow:0 0 0 0 rgba(224,186,132,.6);
  animation:vsl-pulse 2s ease-out infinite}
@keyframes vsl-pulse{0%{box-shadow:0 0 0 0 rgba(224,186,132,.55)}70%{box-shadow:0 0 0 7px rgba(224,186,132,0)}100%{box-shadow:0 0 0 0 rgba(224,186,132,0)}}
.vsl-section .vsl-title{font-size:clamp(1.75rem,3vw,2.7rem);line-height:1.13;letter-spacing:-.01em;max-width:30ch;
  margin:0 auto clamp(.7rem,1.4vw,1rem);text-wrap:balance}
/* Plain sans for readability; normal (not balanced) wrapping so the first line runs longest. */
.vsl-sub{max-width:52ch;margin:0 auto clamp(1.4rem,2.6vw,2.1rem);font:400 clamp(1rem,1.25vw,1.13rem)/1.6 var(--sans);
  color:#BAC4CF;text-wrap:pretty}

/* The film is letterboxed to 2.39:1 inside its 16:9 file. The frame crops to the picture (object-fit: cover
   trims exactly the black bars), so no space goes to bars; fullscreen still shows the whole file. It fills the
   first screen on desktop with the button still visible below it. */
.vsl-frame{position:relative;width:min(100%,1180px,calc((100svh - var(--header-h) - 420px) * 2.39));min-width:min(100%,640px);
  margin-inline:auto;aspect-ratio:2.39/1;background:#000;border:1px solid rgba(199,154,94,.55);border-radius:12px;
  overflow:hidden;box-shadow:0 0 0 4px rgba(199,154,94,.07),0 0 55px rgba(199,154,94,.18),0 30px 80px rgba(0,0,0,.6)}
.vsl-video{display:block;width:100%;height:100%;object-fit:cover;background:#000}

.vsl-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  padding:0;border:0;cursor:pointer;color:#fff;font:inherit;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.05) 0%,rgba(0,0,0,.45) 75%)}
.vsl-play__icon{display:grid;place-items:center;width:clamp(64px,8vw,92px);aspect-ratio:1;border-radius:50%;
  background:var(--cta);color:var(--cta-ink);box-shadow:0 0 0 10px rgba(199,154,94,.16),0 12px 40px rgba(0,0,0,.5);
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.vsl-play__icon svg{width:34%;height:34%;margin-left:7%}
.vsl-play:hover .vsl-play__icon,.vsl-play:focus-visible .vsl-play__icon{transform:scale(1.06);background:var(--cta-hover);
  box-shadow:0 0 0 14px rgba(199,154,94,.2),0 12px 40px rgba(0,0,0,.5)}
.vsl-play:focus-visible{outline:2px solid var(--brass-lift);outline-offset:-4px}
.vsl-play__label{font:500 .72rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.vsl-frame.is-started .vsl-play{display:none}

.vsl-cta{display:flex;flex-direction:column;align-items:center;margin-top:clamp(1.4rem,3vw,2.2rem)}
.vsl-cta .btn{min-width:280px;justify-content:center;box-shadow:0 12px 34px rgba(199,154,94,.22)}

/* The buttons lost their trailing arrow span; conversion.css (cached under ?v=75) still hides the last span of
   the home sticky button on phones, which is now the label itself. */
.v2[data-page="home"] .sticky-cta .btn>span:last-child{display:inline}

/* Second button, under the "Recognise any of these?" list. */
.recognition-cta{display:flex;flex-direction:column;align-items:center;margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.recognition-cta .btn{min-width:260px;justify-content:center}

/* Phones and small tablets get a 16:9 player and a 16:9 cut of the film (vsl2m-720.mp4: the picture band
   centre-cropped), so the video is as big as the screen allows instead of a thin 2.39:1 strip. */
@media (max-width:899px){
  .vsl-frame{width:100%;min-width:0;aspect-ratio:16/9}
}
@media (max-width:699px){
  .vsl-section{padding-top:calc(var(--header-h) + 1rem);padding-bottom:2.25rem}
  .vsl-pill{font-size:.64rem;letter-spacing:.16em;padding:.55rem 1.05rem}
  .vsl-section .vsl-title{font-size:1.6rem;max-width:20ch}
  .vsl-sub{font-size:.95rem;max-width:none}
  .vsl-frame{border-radius:10px}
  .vsl-play{gap:.6rem}
  .vsl-play__icon{width:54px;box-shadow:0 0 0 7px rgba(199,154,94,.16),0 8px 24px rgba(0,0,0,.5)}
  .vsl-play__label{font-size:.62rem}
  .vsl-cta .btn,.recognition-cta .btn{width:100%;min-width:0;min-height:58px}
}
@media (prefers-reduced-motion:reduce){.vsl-play__icon{transition:none}.vsl-pill__dot{animation:none}}