/* hero-video.css — stacked poster + intro + loop. No transitions on purpose: every hand-over lands on an identical picture. */
.hero-video {
  position: relative;
  width: 100%;
  aspect-ratio: 2206 / 946;            /* the footage's own shape (21:9); override the box if the design needs another one */
  overflow: hidden;
  background: #1c1e23;                 /* the shop's shadow tone: what shows for the first milliseconds */
  --hero-focus: 50% 50%;               /* when the box is NOT 21:9 the sides get cropped: 72% 50% keeps the phone, 25% 50% keeps the mechanic */
}
.hero-video picture,
.hero-video picture img,
.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus);
  display: block;
}
.hero-video video { visibility: hidden; }
.hero-video video.is-visible { visibility: visible; }