/* Only the hero objects change. The six-scene page composition stays intact. */
.hero-art .hero-canvas { position: relative; width: 100%; height: 100%; }
.hero-art .hero-canvas > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; object-fit: contain; transform: none;
  mask-image: none; -webkit-mask-image: none;
  filter: none; opacity: 1;
}
.hero-art .hero-phone {
  position: absolute; left: 53.7%; top: 13.4%; width: 21.8%; height: auto;
  aspect-ratio: 360 / 750; overflow: visible; max-width: none;
  pointer-events: none; filter: none; transform: none;
  text-rendering: geometricPrecision;
}
@media(max-width:700px) {
  .hero-art .hero-canvas {
    position: absolute; width: 167%; height: auto; aspect-ratio: 3 / 2;
    left: -67%; top: 50%; transform: translateY(-50%);
    mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 86%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 86%, transparent);
  }
}