/* Inetro animated illustrations. The un-animated styles ARE the final frame,
   so prefers-reduced-motion (and no-JS-yet) show a finished, calm picture.
   Motion lives only inside the no-preference media query and runs while the
   element carries .run (added by anim.js when it scrolls into view). */
[data-anim]{display:block;width:100%;max-width:520px;aspect-ratio:4/3;margin-inline:auto;position:relative;overflow:hidden}
[data-anim] svg{display:block;width:100%;height:100%;overflow:visible}
.ia *{transform-box:fill-box;transform-origin:center}
.ia .o{stroke:#24332e;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.ia .t{font:600 13px "JetBrains Mono",ui-monospace,monospace;fill:#24332e}
.ia .ts{font-size:10px;fill:#5c6b66}
.ia .tb{font:700 13px Manrope,system-ui,sans-serif;fill:#24332e}
.ia .tw{fill:#fff}
/* hidden in the final frame */
.ia-network .b3,.ia-remote-support .td,.ia-remote-support .sad,.ia-remote-support .wr,.ia-remote-support .b,
.ia-microsoft-365 .sp,.ia-custom .sp,.ia-helpdesk .n3,.ia-helpdesk .cf{opacity:0}
.ia-app .cl{transform-origin:left center}.ia-app .br{transform-origin:bottom center}.ia-app .cu{opacity:0}
.ia-migrate .pb{transform-origin:left center}
.ia-network .rg{opacity:.18}
.ia-network .rg2{opacity:0}
.ia-dns .pr{stroke-dasharray:100;stroke-dashoffset:0;transform-box:view-box;transform-origin:0 0}

@media (prefers-reduced-motion:no-preference){
.ia.paused *{animation-play-state:paused!important}
@keyframes ia-flow{to{stroke-dashoffset:-16}}
@keyframes ia-ring{0%{transform:scale(.55);opacity:.55}100%{transform:scale(1.35);opacity:0}}
@keyframes ia-blink{0%,60%,100%{opacity:1}75%{opacity:.25}}
@keyframes ia-bob{50%{transform:translateY(-6px)}}
@keyframes ia-spin{to{transform:rotate(360deg)}}
.ia.run .fl{animation:ia-flow .9s linear infinite}
.ia.run .led{animation:ia-blink 1.6s ease-in-out infinite}
.ia.run .led.d2{animation-delay:-.5s}.ia.run .led.d3{animation-delay:-1.1s}

/* 1 network — 7s */
.ia-network.run .rg{animation:ia-ring 2.4s ease-out infinite}
.ia-network.run .rg2{animation-delay:-1.2s}
.ia-network.run .l3{animation:ian-l3 7s infinite}
.ia-network.run .f3{animation:ia-flow .9s linear infinite,ian-f3 7s infinite}
.ia-network.run .b3{animation:ian-bad 7s infinite}
.ia-network.run .k3{animation:ian-ok 7s infinite}
.ia-network.run .dv3{animation:ian-shake 7s infinite}
@keyframes ian-l3{0%,30%{stroke:#cdeadf}34%,56%{stroke:#ffc2b8}62%,100%{stroke:#cdeadf}}
@keyframes ian-f3{0%,30%{opacity:1}33%,58%{opacity:0}62%,100%{opacity:1}}
@keyframes ian-bad{0%,31%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.2)}38%,55%{opacity:1;transform:scale(1)}59%,100%{opacity:0;transform:scale(.3)}}
@keyframes ian-ok{0%,29%{opacity:1;transform:scale(1)}32%,58%{opacity:0;transform:scale(.3)}63%{opacity:1;transform:scale(1.25)}67%,100%{opacity:1;transform:scale(1)}}
@keyframes ian-shake{0%,34%,48%,100%{transform:translateX(0)}37%,43%{transform:translateX(-3px)}40%,46%{transform:translateX(3px)}}

/* 2 remote support — 8s */
.ia-remote-support.run .td{animation:iar-td 8s infinite}
.ia-remote-support.run .td circle{animation:ia-bob .6s ease-in-out infinite}
.ia-remote-support.run .td circle:nth-child(2){animation-delay:-.4s}
.ia-remote-support.run .td circle:nth-child(3){animation-delay:-.2s}
.ia-remote-support.run .tx{animation:iar-tx 8s infinite}
.ia-remote-support.run .cur{animation:iar-cur 8s ease-in-out infinite}
.ia-remote-support.run .wr{animation:iar-wr 8s ease-in-out infinite}
.ia-remote-support.run .sad,.ia-remote-support.run .b{animation:iar-sad 8s infinite}
.ia-remote-support.run .hap,.ia-remote-support.run .k{animation:iar-hap 8s infinite}
.ia-remote-support.run .sc{animation:iar-sc 8s infinite}
@keyframes iar-td{0%,18%{opacity:1}21%,100%{opacity:0}}
@keyframes iar-tx{0%,19%{opacity:0}23%,100%{opacity:1}}
@keyframes iar-cur{0%,14%{transform:translate(-212px,-6px)}24%{transform:translate(-110px,-56px)}34%,100%{transform:translate(0,0)}}
@keyframes iar-wr{0%,34%{opacity:0;transform:scale(.4) rotate(0)}38%{opacity:1;transform:scale(1) rotate(-22deg)}43%{transform:rotate(22deg)}48%{transform:rotate(-22deg)}53%{opacity:1;transform:rotate(22deg)}58%,100%{opacity:0;transform:scale(.4) rotate(0)}}
@keyframes iar-sad{0%,55%{opacity:1}58%,100%{opacity:0}}
@keyframes iar-hap{0%,55%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.15)}64%,100%{opacity:1;transform:scale(1)}}
@keyframes iar-sc{0%,55%{fill:#ffe3de}62%,100%{fill:#e6f5ef}}

/* 3 microsoft 365 — 7s */
.ia-microsoft-365.run .bob{animation:ia-bob 3.2s ease-in-out infinite}
.ia-microsoft-365.run .b2{animation-delay:-1.6s}
.ia-microsoft-365.run .c1{animation:iam-c1 7s infinite}
.ia-microsoft-365.run .c2{animation:iam-c2 7s infinite}
.ia-microsoft-365.run .c3{animation:iam-c3 7s infinite}
.ia-microsoft-365.run .sh{animation:iam-sh 7s infinite}
.ia-microsoft-365.run .lk{animation:iam-lk 7s infinite}
.ia-microsoft-365.run .sf{animation:iam-sf 7s infinite}
.ia-microsoft-365.run .sp{animation:iam-sp 7s ease-out infinite}
.ia-microsoft-365.run .k{animation:iam-k 7s infinite}
@keyframes iam-c1{0%,8%{opacity:0}11%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes iam-c2{0%,15%{opacity:0}18%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes iam-c3{0%,22%{opacity:0}25%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes iam-sh{0%,34%{transform:translateY(-13px)}38%{transform:translateY(2px)}41%,93%{transform:translateY(0)}98%,100%{transform:translateY(-13px)}}
@keyframes iam-lk{0%,37%{transform:scale(1)}40%{transform:scale(1.1,.9)}44%,100%{transform:scale(1)}}
@keyframes iam-sf{0%,38%{fill:#fff}46%,93%{fill:#e6f5ef}99%,100%{fill:#fff}}
@keyframes iam-sp{0%,38%{opacity:0;transform:scale(.6)}44%{opacity:1;transform:scale(1)}58%,100%{opacity:0;transform:scale(1.25)}}
@keyframes iam-k{0%,42%{opacity:0;transform:scale(.3)}47%{opacity:1;transform:scale(1.25)}51%,93%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(.3)}}

/* 4 dns — 8s */
.ia-dns.run .ct{animation:iad-ct 14s linear infinite}
.ia-dns.run .tg{transform-origin:12px 17px;animation:iad-tg 3s ease-in-out infinite}
.ia-dns.run .pr{animation:iad-pr 8s ease-in-out infinite}
.ia-dns.run .k{animation:iad-k 8s infinite}
@keyframes iad-ct{to{transform:translateX(-180px)}}
@keyframes iad-tg{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
@keyframes iad-pr{0%,10%{stroke-dashoffset:86;stroke:#f6c453}40%{stroke:#f6c453}58%,92%{stroke-dashoffset:0;stroke:#1CA27E}100%{stroke-dashoffset:86;stroke:#f6c453}}
@keyframes iad-k{0%,57%{opacity:0;transform:scale(.3)}62%{opacity:1;transform:scale(1.25)}66%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.3)}}

/* 5 mail deliverability — 8s */
.ia-mail-deliverability.run .env{animation:iae-env 8s ease-in-out infinite}
.ia-mail-deliverability.run .g1{animation:iae-g1 8s infinite}
.ia-mail-deliverability.run .g2{animation:iae-g2 8s infinite}
.ia-mail-deliverability.run .g3{animation:iae-g3 8s infinite}
.ia-mail-deliverability.run .s1{animation:iae-s 8s infinite}
.ia-mail-deliverability.run .s2{animation:iae-s 8s infinite;animation-delay:1.12s}
.ia-mail-deliverability.run .s3{animation:iae-s 8s infinite;animation-delay:2.24s}
.ia-mail-deliverability.run .cn{animation:iae-cn 8s infinite}
@keyframes iae-env{0%{transform:translate(-300px,0);opacity:0}4%{transform:translate(-292px,0);opacity:1}14%,20%{transform:translate(-234px,0)}28%,34%{transform:translate(-156px,0)}42%,48%{transform:translate(-78px,0)}58%{transform:translate(-26px,-36px)}64%{transform:translate(0,-36px)}70%,93%{transform:translate(0,0);opacity:1}98%,100%{transform:translate(0,0);opacity:0}}
@keyframes iae-g1{0%,16%{opacity:0;transform:scale(.3)}19%{opacity:1;transform:scale(1.25)}22%,93%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}
@keyframes iae-g2{0%,30%{opacity:0;transform:scale(.3)}33%{opacity:1;transform:scale(1.25)}36%,93%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}
@keyframes iae-g3{0%,44%{opacity:0;transform:scale(.3)}47%{opacity:1;transform:scale(1.25)}50%,93%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}
@keyframes iae-s{0%,13%{opacity:0}16%{opacity:.35}22%,100%{opacity:0}}
@keyframes iae-cn{0%,69%{opacity:0;transform:scale(.3)}73%{opacity:1;transform:scale(1.25)}77%,93%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}

/* 6 it strategy — 8s */
.ia-it-strategy.run .rd{animation:ias-rd 8s ease-in-out infinite}
.ia-it-strategy.run .m1{animation:ias-m1 8s infinite}
.ia-it-strategy.run .m2{animation:ias-m2 8s infinite}
.ia-it-strategy.run .fg{animation:ias-fg 8s ease-out infinite}
.ia-it-strategy.run .wv{transform-origin:left center;animation:ias-wv 1.4s ease-in-out infinite}
@keyframes ias-rd{0%,4%{stroke-dasharray:100;stroke-dashoffset:100}70%,93%{stroke-dasharray:100;stroke-dashoffset:0}100%{stroke-dasharray:100;stroke-dashoffset:0;opacity:0}}
@keyframes ias-m1{0%,28%{opacity:0;transform:scale(.3)}32%{opacity:1;transform:scale(1.3)}36%,93%{opacity:1;transform:scale(1)}99%,100%{opacity:0}}
@keyframes ias-m2{0%,54%{opacity:0;transform:scale(.3)}58%{opacity:1;transform:scale(1.3)}62%,93%{opacity:1;transform:scale(1)}99%,100%{opacity:0}}
@keyframes ias-fg{0%,68%{transform:translateY(30px);opacity:0}70%{opacity:1}78%,93%{transform:translateY(0);opacity:1}99%,100%{opacity:0;transform:translateY(0)}}
@keyframes ias-wv{0%,100%{transform:skewY(0)}50%{transform:skewY(-6deg)}}

/* 7 custom networks & apps — 7s */
.ia-custom.run .b0{animation:iac-b0 7s infinite}
.ia-custom.run .b1{animation:iac-b1 7s infinite}
.ia-custom.run .b2{animation:iac-b2 7s infinite}
.ia-custom.run .b3{animation:iac-b3 7s infinite}
.ia-custom.run .gr{animation:ia-spin 4s linear infinite}
.ia-custom.run .sp{animation:iac-sp 7s ease-out infinite}
@keyframes iac-b0{0%{transform:translateY(-170px);opacity:0}2%{opacity:1}8%{transform:translateY(4px)}11%{transform:translateY(-4px)}14%,93%{transform:translateY(0);opacity:1}99%,100%{opacity:0}}
@keyframes iac-b1{0%,14%{transform:translateY(-150px);opacity:0}16%{opacity:1}22%{transform:translateY(4px)}25%{transform:translateY(-4px)}28%,93%{transform:translateY(0);opacity:1}99%,100%{opacity:0}}
@keyframes iac-b2{0%,28%{transform:translateY(-150px);opacity:0}30%{opacity:1}36%{transform:translateY(4px)}39%{transform:translateY(-4px)}42%,93%{transform:translateY(0);opacity:1}99%,100%{opacity:0}}
@keyframes iac-b3{0%,42%{transform:translateY(-130px);opacity:0}44%{opacity:1}50%{transform:translateY(5px)}53%{transform:translateY(-6px)}57%,93%{transform:translateY(0);opacity:1}99%,100%{opacity:0}}
@keyframes iac-sp{0%,56%{opacity:0;transform:scale(.4)}62%{opacity:1;transform:scale(1.1)}74%,100%{opacity:0;transform:scale(1.3)}}

/* 8 rmm / endpoints — 8s */
.ia-rmm.run .hb{animation:iai-hb 3s linear infinite}
.ia-rmm.run .pb{transform-origin:left center;animation:iai-pb 8s ease-in-out infinite}
.ia-rmm.run .k1{animation:iai-k1 8s infinite}
.ia-rmm.run .k2{animation:iai-k2 8s infinite}
.ia-rmm.run .k3{animation:iai-k3 8s infinite}
@keyframes iai-hb{0%{stroke-dasharray:34 66;stroke-dashoffset:100}100%{stroke-dasharray:34 66;stroke-dashoffset:0}}
@keyframes iai-pb{0%,20%{transform:scaleX(.04)}56%,93%{transform:scaleX(1)}100%{transform:scaleX(.04)}}
@keyframes iai-k1{0%,15%{opacity:0;transform:scale(.3)}19%{opacity:1;transform:scale(1.25)}23%,93%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}
@keyframes iai-k2{0%,57%{opacity:0;transform:scale(.3)}61%{opacity:1;transform:scale(1.25)}65%,93%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}
@keyframes iai-k3{0%,72%{opacity:0;transform:scale(.3)}76%{opacity:1;transform:scale(1.25)}80%,93%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}

/* 9 helpdesk — 8s */
.ia-helpdesk.run .tk{animation:iah-tk 8s ease-in-out infinite}
.ia-helpdesk.run .av{animation:iah-av 8s infinite}
.ia-helpdesk.run .k{animation:iah-k 8s infinite}
.ia-helpdesk.run .n3{animation:iah-n3 8s infinite}
.ia-helpdesk.run .n4{animation:iah-n4 8s infinite}
.ia-helpdesk.run .cf{animation:iah-cf 8s ease-out infinite}
@keyframes iah-tk{0%{transform:translate(-216px,0);opacity:0}5%,18%{transform:translate(-216px,0);opacity:1}22%{transform:translate(-162px,-10px) rotate(-3deg)}27%,55%{transform:translate(-108px,0)}59%{transform:translate(-54px,-10px) rotate(3deg)}64%,93%{transform:translate(0,0);opacity:1}98%,100%{transform:translate(0,0);opacity:0}}
@keyframes iah-av{0%,30%{opacity:0;transform:scale(.3)}34%{opacity:1;transform:scale(1.25)}38%,100%{opacity:1;transform:scale(1)}}
@keyframes iah-k{0%,64%{opacity:0;transform:scale(.3)}68%{opacity:1;transform:scale(1.3)}72%,100%{opacity:1;transform:scale(1)}}
@keyframes iah-n3{0%,65%{opacity:1}67%,100%{opacity:0}}
@keyframes iah-n4{0%,65%{opacity:0}67%,100%{opacity:1}}
@keyframes iah-cf{0%,64%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.15)}82%,100%{opacity:0;transform:scale(1.4)}}

/* 10 network installation — 8s */
.ia-install.run .cb{stroke-dasharray:100;animation:iain-cb 8s ease-in-out infinite}
.ia-install.run .cb2{animation-delay:.4s}
.ia-install.run .ap1{animation:iain-ap1 8s infinite}
.ia-install.run .ap2{animation:iain-ap2 8s infinite}
.ia-install.run .wf1{animation:iain-wf1 8s infinite}
.ia-install.run .wf2{animation:iain-wf2 8s infinite}
.ia-install.run .wf .w2{animation:ia-blink 1.6s ease-in-out infinite}
.ia-install.run .k1{animation:iain-k1 8s infinite}
.ia-install.run .k2{animation:iain-k2 8s infinite}
@keyframes iain-cb{0%,6%{stroke-dashoffset:100}34%,93%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
@keyframes iain-ap1{0%,30%{opacity:0;transform:scale(.4)}34%{opacity:1;transform:scale(1.15)}37%,93%{opacity:1;transform:scale(1)}99%,100%{opacity:0}}
@keyframes iain-ap2{0%,36%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.15)}43%,93%{opacity:1;transform:scale(1)}99%,100%{opacity:0}}
@keyframes iain-wf1{0%,40%{opacity:0}46%,93%{opacity:1}99%,100%{opacity:0}}
@keyframes iain-wf2{0%,45%{opacity:0}51%,93%{opacity:1}99%,100%{opacity:0}}
@keyframes iain-k1{0%,56%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.25)}64%,93%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}
@keyframes iain-k2{0%,64%{opacity:0;transform:scale(.3)}68%{opacity:1;transform:scale(1.25)}72%,93%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}

/* 11 application development — 8s */
.ia-app.run .cl{animation:iaa-cl 8s infinite}
.ia-app.run .c2{animation-delay:.25s}.ia-app.run .c3{animation-delay:.5s}.ia-app.run .c4{animation-delay:.75s}
.ia-app.run .c5{animation-delay:1s}.ia-app.run .c6{animation-delay:1.25s}.ia-app.run .c7{animation-delay:1.5s}.ia-app.run .c8{animation-delay:1.75s}
.ia-app.run .cu{animation:ia-blink .9s steps(1) infinite}
.ia-app.run .br{animation:iaa-br 8s ease-out infinite}
.ia-app.run .r2{animation-delay:.15s}.ia-app.run .r3{animation-delay:.3s}.ia-app.run .r4{animation-delay:.45s}.ia-app.run .r5{animation-delay:.6s}
.ia-app.run .tgl{animation:iaa-tg 8s infinite}
.ia-app.run .kn{animation:iaa-kn 8s ease-in-out infinite}
.ia-app.run .bt{animation:iaa-bt 8s infinite}
.ia-app.run .k{animation:iaa-k 8s infinite}
@keyframes iaa-cl{0%,4%{transform:scaleX(0)}10%,93%{transform:scaleX(1)}99%,100%{transform:scaleX(0)}}
@keyframes iaa-br{0%,34%{transform:scaleY(0)}46%,93%{transform:scaleY(1)}99%,100%{transform:scaleY(0)}}
@keyframes iaa-tg{0%,52%{fill:#cfdcd7}56%,93%{fill:#1CA27E}99%,100%{fill:#cfdcd7}}
@keyframes iaa-kn{0%,52%{transform:translateX(-20px)}56%,93%{transform:translateX(0)}99%,100%{transform:translateX(-20px)}}
@keyframes iaa-bt{0%,64%{transform:scale(1)}66%{transform:scale(.92)}69%,100%{transform:scale(1)}}
@keyframes iaa-k{0%,68%{opacity:0;transform:scale(.3)}72%{opacity:1;transform:scale(1.25)}76%,93%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}

/* 12 microsoft 365 migration — 8s */
.ia-migrate.run .m1{animation:iamg-m1 8s ease-in-out infinite}
.ia-migrate.run .m2{animation:iamg-m2 8s ease-in-out infinite}
.ia-migrate.run .m3{animation:iamg-m3 8s ease-in-out infinite}
.ia-migrate.run .pb{animation:iamg-pb 8s ease-in-out infinite}
.ia-migrate.run .k{animation:iamg-k 8s infinite}
@keyframes iamg-m1{0%,6%{transform:translate(-176px,-16px);opacity:0}9%{opacity:1;transform:translate(-176px,-16px)}17%{transform:translate(-90px,-96px)}25%,93%{transform:translate(0,0);opacity:1}99%,100%{opacity:0}}
@keyframes iamg-m2{0%,22%{transform:translate(-218px,-12px);opacity:0}25%{opacity:1;transform:translate(-218px,-12px)}33%{transform:translate(-110px,-96px)}41%,93%{transform:translate(0,0);opacity:1}99%,100%{opacity:0}}
@keyframes iamg-m3{0%,38%{transform:translate(-262px,-16px);opacity:0}41%{opacity:1;transform:translate(-262px,-16px)}49%{transform:translate(-132px,-100px)}57%,93%{transform:translate(0,0);opacity:1}99%,100%{opacity:0}}
@keyframes iamg-pb{0%,6%{transform:scaleX(.04)}57%,93%{transform:scaleX(1)}100%{transform:scaleX(.04)}}
@keyframes iamg-k{0%,58%{opacity:0;transform:scale(.3)}62%{opacity:1;transform:scale(1.25)}66%,93%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}

/* 13 websites & hosting — 8s */
.ia-hosting.run .pg{animation:iaw-pg 8s infinite}
.ia-hosting.run .p2{animation-delay:.35s}.ia-hosting.run .p3{animation-delay:.7s}
.ia-hosting.run .pl{animation:iaw-pl 8s infinite}
.ia-hosting.run .bk{animation:iaw-bk 8s ease-in-out infinite}
.ia-hosting.run .k{animation:iaw-k 8s infinite}
@keyframes iaw-pg{0%,12%{opacity:0;transform:translateY(8px)}22%,93%{opacity:1;transform:translateY(0)}99%,100%{opacity:0}}
@keyframes iaw-pl{0%,38%{opacity:0;transform:scale(.3)}43%{opacity:1;transform:scale(1.4)}47%,93%{opacity:1;transform:scale(1)}99%,100%{opacity:0}}
@keyframes iaw-bk{0%,55%{transform:rotate(0)}75%,100%{transform:rotate(360deg)}}
@keyframes iaw-k{0%,74%{opacity:0;transform:scale(.3)}78%{opacity:1;transform:scale(1.25)}82%,93%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}
}