/* "What is Greenophy": the three-minute film, after the scroll animation and
   before the contact footer. No border or shadow: a softly rounded screen on
   the page's own paper, with one quiet control bar over its lower edge. */
.watch{position:relative;background:transparent;padding:clamp(64px,8vh,110px) 4.4% clamp(80px,10vh,130px)}
.watch-frame{max-width:1240px;margin:0 auto;padding:0}
.watch-screen{position:relative;aspect-ratio:16/9;background:#f4f2ed;border-radius:14px;overflow:hidden}
.watch-screen video{display:block;width:100%;height:100%;object-fit:cover;background:#f4f2ed;cursor:pointer}
.watch-screen:fullscreen{border-radius:0;background:#000}
.watch-screen:fullscreen video{object-fit:contain}
.watch-screen:not(.is-live) .watch-bar{display:none}
/* Sits just above the film's own University of Bristol logo (bottom right, 7.8% of the frame). */
.watch-bar{position:absolute;left:0;right:0;bottom:8.6%;display:flex;align-items:center;gap:14px;padding:0 18px;transition:opacity .35s ease}
.watch-screen.is-playing.is-idle .watch-bar{opacity:0}
.watch-btn{flex:none;width:36px;height:36px;border-radius:7px;background:#12273f8c;color:#fff;display:grid;place-items:center;transition:background-color .2s ease}
.watch-btn:hover{background:#12273fbf}
.watch-btn svg{width:18px;height:18px;fill:currentColor}
.watch-toggle .i-pause,.watch-screen.is-playing .watch-toggle .i-play{display:none}
.watch-screen.is-playing .watch-toggle .i-pause{display:inline}
.watch-mute .i-x,.watch-screen.is-muted .watch-mute .i-wave{display:none}
.watch-screen.is-muted .watch-mute .i-x{display:inline}
.watch-seek{--p:0%;flex:1;min-width:0;height:18px;margin:0 4px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.watch-seek::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#12273f var(--p),#12273f40 var(--p))}
.watch-seek::-moz-range-track{height:3px;border-radius:3px;background:#12273f40}
.watch-seek::-moz-range-progress{height:3px;border-radius:3px;background:#12273f}
.watch-seek::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;margin-top:-5px;border-radius:50%;background:#12273f;border:2px solid #fff}
.watch-seek::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#12273f;border:2px solid #fff}
.watch-seek:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* The silent loop's one control: a frosted, translucent disc in the centre. */
.watch-start{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#12273f2e;border:1px solid #ffffff73;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);transition:transform .25s ease,background-color .25s ease}
.watch-start:hover{transform:scale(1.05);background:#12273f47}
.watch-start svg{width:30px;height:30px;margin-left:4px;fill:currentColor}
.watch-screen.is-live .watch-start{display:none}
.watch-frame figcaption{margin-top:14px;font-size:10px;line-height:1.5;color:var(--muted)}
@media(max-width:760px){.watch-start{width:64px;height:64px;margin:-32px 0 0 -32px}.watch-start svg{width:22px;height:22px}.watch{padding:56px 24px 72px}.watch-screen{border-radius:10px}.watch-bar{gap:8px;padding:0 10px;bottom:12%}.watch-btn{width:30px;height:30px;border-radius:6px}.watch-btn svg{width:15px;height:15px}.watch-frame figcaption{font-size:9px}}
@media(prefers-reduced-motion:reduce){.watch-bar,.watch-btn{transition:none}}