/* ==========================================================================
   INSIDE THE WORK — the motion graphic stage (assets/s7-work.js)
   16:9 on desktop and tablet; 4:5 on phones (the script sets .is-tall from
   the stage's own width and lays the scene out again). Without the script
   the stage shows the original still instead.
   ========================================================================== */
.s7w {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background: #f7f4fc url('media/growth-ops-all-systems-one-goal.webp') center / cover no-repeat;
  border: 1px solid rgba(92, 70, 180, .10);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 30px 70px -24px rgba(46, 28, 110, .24),
    0 10px 26px -14px rgba(20, 12, 50, .14);
}
.s7w.is-live { background: #f7f4fc; }
.s7w.is-tall { aspect-ratio: 4 / 5; border-radius: 22px; }
.s7w > svg,
.s7w > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.s7w-back   { z-index: 0; }
.s7w-canvas { z-index: 1; pointer-events: none; }
.s7w-front  { z-index: 2; pointer-events: none; }
.s7w:not(.is-live) > svg,
.s7w:not(.is-live) > canvas { visibility: hidden; }

section.show-strip--motion .section-head { margin-bottom: 36px; }
section.show-strip--motion .section-head .desc { max-width: 46ch; }

@media (max-width: 620px) {
  .s7w { aspect-ratio: 4 / 5; border-radius: 22px; }
  section.show-strip--motion .section-head { margin-bottom: 26px; }
}