/* Numbered circles and their connections move together; copy stays stationary. */
.t3 .services.has-step-lines:before{display:none}
.t3 .service-step-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.t3 .service-step-line,.t3 .service-step-flow{fill:none;stroke:var(--accent);stroke-linecap:round;stroke-linejoin:round}
.t3 .service-step-line{stroke-width:1;opacity:.42}
.t3 .service-step-flow{stroke-width:2;stroke-dasharray:18 118;stroke-dashoffset:18;opacity:0;filter:drop-shadow(0 0 4px var(--accent))}
.t3 .services.steps-active .service-step-flow{animation:serviceLineFlow 8.8s linear infinite both}
.t3 .service-step-flow[data-connection='1']{animation-delay:2.2s!important}
.t3 .service-step-flow[data-connection='2']{animation-delay:4.4s!important}
.t3 .services b{position:relative;transform-origin:center;will-change:transform;isolation:isolate}
.t3 .services b:before{content:'';position:absolute;inset:-8px;border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent),transparent 72%);opacity:0}
.t3 .services.steps-active b{animation:serviceCircleLift 8.8s cubic-bezier(.4,0,.2,1) infinite both}
.t3 .services.steps-active b:before{animation:serviceCircleHalo 8.8s ease-in-out infinite both}
.t3 .services article:nth-child(2) b,.t3 .services article:nth-child(2) b:before{animation-delay:2.2s}
.t3 .services article:nth-child(3) b,.t3 .services article:nth-child(3) b:before{animation-delay:4.4s}
.t3 .services article:nth-child(4) b,.t3 .services article:nth-child(4) b:before{animation-delay:6.6s}
@keyframes serviceCircleLift{
  0%,22%,100%{transform:translate3d(0,0,0) scale(1);background:var(--bg);box-shadow:0 0 0 transparent}
  7%,12%{transform:translate3d(0,-5px,0) scale(1.1);background:color-mix(in srgb,var(--bg) 88%,var(--accent));box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 14%,transparent),0 0 22px color-mix(in srgb,var(--accent) 22%,transparent),inset 0 0 12px #fff7}
}
@keyframes serviceCircleHalo{0%,22%,100%{opacity:0}7%,12%{opacity:1}}
@keyframes serviceLineFlow{
  0%,5%{stroke-dashoffset:18;opacity:0}
  7%{stroke-dashoffset:18;opacity:.85}
  32%{stroke-dashoffset:-100;opacity:.85}
  35%,100%{stroke-dashoffset:-100;opacity:0}
}
@media(prefers-reduced-motion:reduce){.t3 .services.steps-active b,.t3 .services.steps-active b:before,.t3 .services.steps-active .service-step-flow{animation:none!important}.t3 .services b{will-change:auto}}
