/* Mobile: video blocks in "Meet Lizzie" / "How it works" rows rest slightly inset,
   then zoom to full page width (5px gutter) as they reach the middle of the screen,
   with rounded corners and the surrounding page dimmed. Driven by mobile-video-zoom.js. */
@media (max-width: 1000px){
  .mvz.mvz.mvz.mvz.mvz{
    width:100% !important; max-width:100% !important; min-width:0 !important;
    margin-left:0 !important; margin-right:0 !important;
    overflow:visible !important; border:0 !important; background:transparent !important;
    aspect-ratio:auto !important; height:auto !important;
    box-shadow:none !important; border-radius:0 !important;
    position:relative; z-index:1;
  }
  .mvz.mvz.mvz.mvz.mvz > .mvz-inner{
    display:block; position:relative; z-index:1;
    transform-origin:50% 50%; backface-visibility:hidden; will-change:transform;
    overflow:hidden; border-radius:16px;
    box-shadow:0 0 0 100vmax rgba(8,8,12,calc(var(--mvz-p, 0) * .3));
  }
  .mvz.mvz.mvz.mvz.mvz > .mvz-inner > video{
    display:block; width:100% !important; height:auto !important; border-radius:inherit;
  }
  .mvz-host{ position:relative; z-index:2; }
  /* breathing room so the copy is read after the clip, not under the dim */
  .beacon-fix .bf-row:has(.mvz), .p-works .p-row:has(.mvz){ row-gap:clamp(28px,7vw,44px) !important; }
}
@media (prefers-reduced-motion: reduce){
  .mvz > .mvz-inner{ transform:none !important; box-shadow:none !important; }
}