/* Quiet motion for supplied service artwork and matching inline SVG icons. */
.service-icon{flex-shrink:0;overflow:visible;transform-origin:center;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.related-links .service-icon{width:26px;height:26px}
.service-card:is(:hover,:focus-visible) .service-icon,.related-links a:is(:hover,:focus-visible) .service-icon{transform:translateY(-3px) rotate(-3deg)}
.service-icon .icon-accent{transform-box:fill-box;transform-origin:center}
.service-card:is(:hover,:focus-visible) .icon-accent,.related-links a:is(:hover,:focus-visible) .icon-accent{animation:service-accent 1.2s ease-in-out var(--accent-delay,0ms) 1}
@keyframes service-accent{0%,100%{opacity:1;transform:scale(1)}40%{opacity:.45;transform:scale(.92)}70%{opacity:1;transform:scale(1.08)}}
.service-illustration.service-motion{isolation:isolate;--float-duration:6.5s;--float-x:2px;--float-turn:.35deg}
.service-motion:before{content:'';position:absolute;inset:12% 0 8%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 58% 56%,#f87c181b,transparent 62%);animation:service-glow 7s ease-in-out infinite}
.service-motion :is(img,.service-circuit-art){animation:service-float var(--float-duration) ease-in-out infinite;transform-origin:58% 50%;will-change:transform}
.service-motion.illustration-cybersecurity{--float-duration:7.2s;--float-turn:-.35deg}
.service-motion.illustration-microsoft-365{--float-duration:7.7s;--float-x:-2px}
.service-motion.illustration-voip-telephony{--float-duration:5.8s;--float-turn:-.6deg}
.service-motion.illustration-connectivity{--float-duration:6.2s;--float-x:-3px}
.service-motion.illustration-ai-automation{--float-duration:5.5s;--float-turn:.5deg}
.service-motion.illustration-web-design-hosting{--float-duration:7s;--float-x:-2px}
.service-motion.illustration-retail-epos{--float-duration:7.5s;--float-turn:-.3deg}
.service-motion.illustration-compliance{--float-duration:8s;--float-turn:.25deg}
@keyframes service-float{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(var(--float-x),-6px) rotate(var(--float-turn))}}
@keyframes service-glow{0%,100%{opacity:.4;transform:scale(.97)}50%{opacity:1;transform:scale(1.025)}}
.service-motion[data-running=false] :is(img,.service-circuit-art),.service-motion[data-running=false]:before{animation-play-state:paused}
.service-motion-control{position:absolute;right:10px;bottom:0;z-index:2;display:flex;gap:6px;align-items:center;color:#aebbd0;background:#151d2ce8;border:1px solid #44516a;border-radius:3px;padding:7px 10px;font-size:9px;line-height:1.4}
.service-motion-control:hover{color:white;border-color:#f87c18}.service-motion-control:focus-visible{outline:2px solid #f87c18;outline-offset:3px}
@media(max-width:760px){.service-motion :is(img,.service-circuit-art){--float-x:1px;--float-turn:.2deg}.service-motion-control{bottom:3px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.service-motion :is(img,.service-circuit-art),.service-motion:before,.service-icon .icon-accent{animation:none!important}.service-icon{transition:none}.service-card:is(:hover,:focus-visible) .service-icon,.related-links a:is(:hover,:focus-visible) .service-icon{transform:none}.service-motion-control{display:none}}
.service-illustration.service-motion{overflow:visible}

.service-circuit-art{overflow:visible;pointer-events:none}
.circuit-pulse{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12 88;stroke-dashoffset:100;animation:service-circuit-flow var(--circuit-duration,3.2s) linear var(--circuit-delay,0s) infinite}
.circuit-orange{stroke:#fff0bd;--circuit-glow:#ff941f}
.circuit-rose{stroke:#ffe8f2;--circuit-glow:#ff6b9c}
.circuit-core{stroke-width:4.5;filter:drop-shadow(0 0 4px var(--circuit-glow))}
.circuit-halo{stroke:var(--circuit-glow);stroke-width:13;opacity:.55;filter:blur(5px)}
.service-motion[data-running=false] .circuit-pulse{animation-play-state:paused}
@keyframes service-circuit-flow{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.service-circuit-lights{display:none}.circuit-pulse{animation:none!important}}

/* Details illuminate in sequence; the original signal arcs themselves gently expand. */
.service-led,.service-led-bar{fill:#fff1c2;stroke:#fff1c2;filter:drop-shadow(0 0 5px #ff951f);animation:service-led-light 3.6s ease-in-out var(--signal-delay,0s) infinite}
.service-led-bar{fill:none;stroke-width:5;stroke-linecap:round}
.service-node-ring{fill:none;stroke:#ffe3ba;stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:service-node-pulse 3.2s ease-out var(--signal-delay,0s) infinite;filter:drop-shadow(0 0 5px #ff8b4a)}
.service-core-glow{fill:#ffdc95;filter:blur(15px);animation:service-core-breathe 3.6s ease-in-out infinite}
.service-check-light{fill:none;stroke:#fff5d7;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;animation:service-check-trace 5s ease-in-out var(--signal-delay,0s) infinite;filter:drop-shadow(0 0 5px #ffb755)}
.service-signal-wave{transform-box:view-box;animation:service-signal-ripple 2.2s ease-in-out var(--signal-delay,0s) infinite}
@keyframes service-signal-ripple{0%,100%{transform:scale(.975);opacity:.5}50%{transform:scale(1.035);opacity:1;filter:drop-shadow(0 0 4px #ff8a50)}}
@keyframes service-led-light{0%,65%,100%{opacity:.08}35%{opacity:.9}}
@keyframes service-node-pulse{0%{opacity:0;transform:scale(.6)}20%{opacity:.65}85%,100%{opacity:0;transform:scale(2)}}
@keyframes service-core-breathe{0%,100%{opacity:.08}50%{opacity:.45}}
@keyframes service-check-trace{0%,10%{stroke-dashoffset:100;opacity:0}30%,50%{stroke-dashoffset:0;opacity:.85}75%,100%{stroke-dashoffset:0;opacity:0}}
.service-motion[data-running=false] .service-circuit-lights *{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.service-circuit-art>image{mask:none}.service-circuit-lights *{animation:none!important}}

/* Aster IT site: the art is sized exactly like the pre-cropped <img> it replaces (site.css),
   so it is always whole at every screen size. */
.service-illustration.service-motion{position:relative}
.service-illustration .service-circuit-art{display:block;width:auto;height:auto;max-width:100%;max-height:440px}
.service-card-top .service-icon{width:56px;height:56px}
@media(max-width:760px){.service-illustration .service-circuit-art{max-height:320px}}