/* The service preview is a self-contained motion graphic; the left side retains all service copy. */
.svc-stage .svc-stage-caption,.svc-stage .svc-stage-badge { display:none!important; }
.svc-stage .svc-stage-pane { padding:24px; }
.svc-stage .svc-stage-artwrap { width:min(100%,680px); aspect-ratio: 720 / 430; background:#eaf1fa!important; background-image:none!important; border:1px solid #d5e2f1; border-radius:18px; overflow:hidden; }
.svc-stage .svc-stage-artwrap svg.mg-art { display:block; visibility:visible!important; width:100%; height:100%; }
.mg-art .mg-soft { fill:#e5effc; stroke:#b6d0f0; stroke-width:2; }
.mg-art .mg-card { fill:url(#mg-white); stroke:#c4d8f2; stroke-width:2; }
.mg-art .mg-line { fill:none; stroke:#6aabf7; stroke-width:4; stroke-linecap:round; }
.mg-art .mg-path { fill:none; stroke:#75adf0; stroke-width:4; stroke-linecap:round; stroke-dasharray:8 11; animation:mg-dash 3s linear infinite; }
.mg-art .mg-float { transform-box:fill-box; transform-origin:center; animation:mg-float 4s ease-in-out infinite; }
.mg-art .mg-float2 { transform-box:fill-box; transform-origin:center; animation:mg-float 4s ease-in-out -1.5s infinite; }
.mg-art .mg-beat { transform-box:fill-box; transform-origin:center; animation:mg-beat 2.2s ease-in-out infinite; }
.mg-art .mg-blink { animation:mg-blink 3s ease-in-out infinite; }
.mg-art .mg-cursor { animation:mg-cursor 3s ease-in-out infinite; }
.mg-art .mg-travel { animation:mg-travel 4s ease-in-out infinite; }
.mg-art .mg-reveal { transform-box:fill-box; transform-origin:center; animation:mg-reveal 4s ease-in-out infinite; }
.mg-art .mg-layer-up { animation:mg-layer-up 4s ease-in-out infinite; }
.mg-art .mg-layer-down { animation:mg-layer-down 4s ease-in-out infinite; }
.mg-art .mg-stagger { animation-delay:-1.2s; }
@keyframes mg-dash { to { stroke-dashoffset:-38; } }
@keyframes mg-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@keyframes mg-beat { 0%,100% { transform:scale(.82); opacity:.6; } 50% { transform:scale(1.16); opacity:1; } }
@keyframes mg-blink { 0%,100% { opacity:.35; } 50% { opacity:1; } }
@keyframes mg-cursor { 0%,100% { transform:translate(12px,10px); } 45%,65% { transform:translate(0,0); } }
@keyframes mg-travel { 0%,12% { transform:translateX(0); opacity:0; } 20% { opacity:1; } 72% { transform:translateX(260px); opacity:1; } 85%,100% { transform:translateX(260px); opacity:0; } }
@keyframes mg-reveal { 0%,15%,100% { transform:scale(.82); opacity:.3; } 45%,80% { transform:scale(1); opacity:1; } }
@keyframes mg-layer-up { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-25px); } }
@keyframes mg-layer-down { 0%,100% { transform:translateY(0); } 50% { transform:translateY(20px); } }
@media (max-width:600px) { .svc-stage .svc-stage-pane { padding:14px; } .svc-stage .svc-stage-artwrap { width:100%; } }
@media (prefers-reduced-motion:reduce) { .mg-art * { animation:none!important; } }

/* The previous illustration rules target nth-child with higher specificity.
   Override them here so no photographic background sits behind the SVG. */
#features .svc-stage .svc-stage-pane .svc-stage-artwrap {
  background-color: #eef3f9 !important;
  background-image: none !important;
}
/* Switching is immediate, so two scenes cannot cross-fade on top of each other. */
#features .svc-stage .svc-stage-pane { transition: none !important; transform: none !important; }
#features .svc-stage .svc-stage-pane:not(.is-active) { visibility: hidden !important; opacity: 0 !important; }
#features .svc-stage .svc-stage-pane.is-active { visibility: visible !important; opacity: 1 !important; }

/* One restrained action per service keeps the explanation easy to follow. */
#features .mg-art * { animation: none; }
#features .svc-stage-pane[data-svc="0"] .mg-cursor { animation: mg-cursor 3s ease-in-out infinite; }
#features .svc-stage-pane[data-svc="1"] .mg-travel { animation: mg-travel 4s ease-in-out infinite; }
#features .svc-stage-pane[data-svc="2"] .mg-reveal { animation: mg-reveal 4s ease-in-out infinite; }
#features .svc-stage-pane[data-svc="3"] .mg-path { animation: mg-dash 3s linear infinite; }
#features .svc-stage-pane[data-svc="4"] .mg-layer-up { animation: mg-layer-up 4s ease-in-out infinite; }
#features .svc-stage-pane[data-svc="5"] .mg-travel { animation: mg-travel 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  #features .mg-art * { animation: none !important; }
}