/* Three approved illustrations; one stable scene per visit. */
.hero .hero-art {
  position: absolute; top: 60px; bottom: auto;
  right: max(24px, calc((100% - 1440px) / 2 + 24px));
  width: min(48vw, 720px); height: auto; margin: 0; z-index: 2; opacity: 1;
}
.hero-scene { position: relative; width: 100%; aspect-ratio: 4 / 3; margin: 0; isolation: isolate; }
.hero .hero-scene-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-scene-image:not([src]) { display: none; }
.hero-scene-motion { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-motion-toggle {
  position: absolute; right: 3%; bottom: 0; padding: 6px 12px; min-height: 36px;
  border: 1px solid #e4eaf4; border-radius: 5px; color: #64708a; background: #fff; font-size: 12px;
}
.hero-motion-toggle:hover { border-color: #b7caff; color: #1457ff; }
.hero-motion-toggle[hidden] { display: none; }
@media (min-width: 1600px) {
  .hero .hero-art { top: max(60px, calc((100vh - 780px) / 2)); }
}
@media (max-width: 1100px) {
  .hero { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .hero .hero-content { display: contents; }
  .hero .hero-copy { order: 0; padding: 46px 40px 0; max-width: none; }
  .hero .hero-description { max-width: 575px; }
  .hero .hero-art { position: relative; top: auto; right: auto; width: min(740px, calc(100% - 48px)); align-self: center; order: 1; margin: 22px 0 24px; }
  .hero .hero-metrics { position: relative; order: 2; left: auto; right: auto; bottom: auto; width: calc(100% - 80px); margin: 0 40px; padding-bottom: 32px; }
}
@media (max-width: 700px) {
  .hero .hero-copy { padding: 36px 24px 0; }
  .hero .hero-art { width: calc(100% - 24px); margin: 16px 0 22px; }
  .hero .hero-metrics { width: calc(100% - 48px); margin: 0 24px; }
  .hero-motion-toggle { bottom: -8px; min-height: 32px; padding: 4px 8px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene-motion, .hero-motion-toggle { display: none; }
}