/* One control for every video and motion on the site (owner, 29 September 2026; docs/website-house-rules.md): a small,
   quiet icon in the bottom-right corner of the motion, pause while it plays and replay after, with no words on screen.
   Its name says what it does, and it answers anywhere in a 44px target however small the icon looks. It brightens on
   hover and focus. The team story (team-story.js) and the homepage film (home-film.js) draw their own; motions whose
   earlier controls are hidden get theirs from motion-controls.js, which adds motion-control--dark on dark grounds.
   Quiet, but never below 3:1 at rest (owner, 13 October 2026): 60% ink on light grounds, and the film's icons sit on
   a small dark disc, because its end card is bright. */
.motion-control{position:absolute;right:4px;bottom:4px;z-index:3;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--motion-control-ink,rgba(32,52,50,.6));cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.motion-control[hidden]{display:none}
.motion-control::before{content:"";position:absolute;inset:9px;border-radius:50%;background:currentColor;opacity:0}
.motion-control>svg{position:relative;display:block;width:14px;height:14px}
.motion-control:hover,.motion-control:focus-visible{color:var(--motion-control-ink-strong,#203432)}
.motion-control:hover::before{opacity:.12}
.motion-control:focus-visible{outline:2px solid currentColor;outline-offset:-7px}
.motion-control--dark{--motion-control-ink:rgba(238,245,240,.46);--motion-control-ink-strong:#fff}
@media(prefers-reduced-motion:no-preference){.motion-control,.motion-control::before{transition:color .2s,opacity .2s}}
@media(forced-colors:active){.motion-control{color:ButtonText}.motion-control::before{content:none}}
.home-film-controls>.motion-control{--motion-control-ink:rgba(238,245,240,.88)}
.home-film-controls>.motion-control::before{background:rgb(6,18,16);opacity:.6}
.home-film-controls>.motion-control:hover::before{opacity:.75}
/* The motion the control sits in, when it has no position of its own */
.motion-control-host{position:relative}
/* The controls those motions were built with stay in the page for their scripts, out of sight */
[data-motion-proxied]{display:none!important}