/* Selected first variants from the owner's September motion study. */
.service-scene {
  --wire: #7294b5;
  --solid: #245174;
  --soft: #e9f0f3;
  --accent: #ff713b;
  --dim: #7793a6;
  --surface: #f4f7f7;
  display: block;
  overflow: visible;
}
.service-scene .wire, .service-scene .orange-line { stroke-linejoin: round; stroke-linecap: round; }
.service-scene .process-label { fill: var(--dim); font: 9px Manrope, sans-serif; text-anchor: middle; letter-spacing: .3px; }
.service-scene .toolpath { stroke-linecap: round; stroke-linejoin: round; }
.services-grid .service-art:has(.service-scene) {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  background-image: linear-gradient(#7592a60b 1px, transparent 1px), linear-gradient(90deg, #7592a60b 1px, transparent 1px);
  background-size: 22px 22px;
}
.service-hero-visual.has-case .service-hero-art:has(.service-scene) { display: grid; }
.service-hero-visual .service-hero-art:has(.service-scene) {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  aspect-ratio: 1.35;
  background: #f4f7f7;
}
.service-hero-visual .service-hero-art .service-scene { width: 95%; height: 95%; }
.service-art .service-scene, .service-hero-art .service-scene { min-width: 0; min-height: 0; }
.service-hero-visual:has(.service-scene) .service-hero-example { flex-direction: row; align-items: center; margin-top: 12px; }
.service-hero-visual:has(.service-scene) .service-hero-example img { width: 94px; height: 90px; aspect-ratio: auto; flex: none; padding: 8px; object-fit: contain; }
.service-hero-visual:has(.service-scene) .service-hero-example-caption { flex: 1; min-width: 0; border-top: 0; padding: 12px 16px; }
@media (max-width: 760px) {
  .service-hero-visual .service-hero-art:has(.service-scene) { aspect-ratio: 1.45; }
}