html,
body {
  overflow-x: hidden;
}

#assembly-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-copy {
  z-index: 4;
}

.hero-media {
  overflow: hidden;
}

.hero-media img,
.service-visual img {
  will-change: transform;
}

.section {
  opacity: 1;
  transform: none;
  transition: none;
}

.motion-ready .hero-copy > *,
.motion-ready .proof-strip > *,
.motion-ready .steps li,
.motion-ready .principle-list > div {
  will-change: transform, opacity;
}

@media (max-width: 720px) {
  #assembly-canvas {
    top: 40%;
    height: 60%;
    opacity: .88;
  }
}

@media (prefers-reduced-motion: reduce) {
  #assembly-canvas {
    display: none;
  }

  .hero-media img,
  .service-visual img,
  .motion-ready .hero-copy > *,
  .motion-ready .proof-strip > *,
  .motion-ready .steps li,
  .motion-ready .principle-list > div {
    transform: none !important;
    opacity: 1 !important;
  }
}