/* ════════════════════════════════════════════════════════════════
   ARETA — services.html cinematic stage clips.
   Each service section opens with a produced motion-graphics video
   (1920×880, seamless loop, rendered from the brand's own tokens).
   Playback is owned by app.js: IntersectionObserver plays on-screen
   only; prefers-reduced-motion never plays (poster = money-shot frame).
   ════════════════════════════════════════════════════════════════ */

/* DO NOT crop .svc-stage to a taller mobile aspect (16/9, 2/1 …).
   Verified 2026-07-16: the 1920×880 renders keep mono captions ~105-120px
   from the left edge and Hebrew titles ~110px from the right edge — any
   cover-crop ≥80px/side clips moving text. Keep aspect-ratio:1920/880;
   mobile presence comes from the section rhythm rules below. */
.svc-stage{
  position:relative;width:100%;aspect-ratio:1920/880;border-radius:24px;
  overflow:hidden;isolation:isolate;margin-bottom:34px;
  background:radial-gradient(120% 140% at 70% 0%,#141a2e,#080b16);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 64px -38px rgba(8,11,22,.95),inset 0 1px 0 rgba(255,255,255,.06);
  content-visibility:auto;contain-intrinsic-size:auto 500px;
}
.svc-stage .stage-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}

@media (max-width:640px){
  .svc-stage{border-radius:16px;margin-bottom:30px;}
}

/* ── PHONE RHYTHM (2026-07-16) — generous air around the stage clips.
   All rules ≤768px only; desktop is pixel-identical. ── */
@media (max-width:768px){
  main > .deep-section:first-of-type{padding-top:104px} /* nav bottom ≈80px + 24px air */
  .deep-section{padding:48px 0} /* was 32px — seam total 96px */
  .deep-section .pkg-head{margin-bottom:22px} /* was 0px — heading no longer fuses into cards */
  .svc-stage{contain-intrinsic-size:auto 45vw} /* ≈ real height (100vw-28px)×880/1920 — kills scroll jumps */
}
@media (max-width:560px){
  main > .deep-section:first-of-type{padding-top:92px} /* nav bottom ≈68px + 24px air */
}
@media (max-width:420px){
  main > .deep-section:first-of-type{padding-top:84px} /* nav bottom ≈63px + 21px air */
  .deep-section{padding:40px 0} /* was 24px — seam total 80px */
}