/* ============================================================
   Clicksoft — Hero art
   Animated diagrams for the right column of page heroes.
   Requires: assets/styles.css (uses its custom properties).
   Drop this file after styles.css, or paste the whole thing
   at the bottom of styles.css.
   ============================================================ */

/* ---------- Shared layout ---------- */
.page-hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr);
  gap:clamp(32px,4vw,64px);
  align-items:center;
}
@media (max-width:1080px){ .page-hero-layout{grid-template-columns:minmax(0,1fr);} }
.page-hero-layout > .page-hero-copy > h1{margin-top:0;}

.hero-art{
  display:block;
  width:100%;
  max-width:100%;
  margin-top:clamp(20px, 4vw, 32px);
  overflow:hidden;
}
.hero-art svg{width:100%; height:auto; display:block; max-width:100%;}
@media (max-width:767px){
  .hero-art{
    margin-top:24px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:16px;
    background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  }
  .hero-art .a-eyebrow{font-size:11px;}
  .hero-art .a-mono{font-size:11px;}
  .hero-art .a-name{font-size:12px;}
  .art-home .a-mono{font-size:10px;}
  .art-home .a-name{font-size:11px;}
}
@media (max-width:767px) and (prefers-reduced-motion: no-preference){
  .hero-art .a-pulse,
  .art-services .a-trunk-flow,
  .art-partner .a-loop-run,
  .engage-bg .b-run{animation-duration:1.4s;}
}

/* ---------- Shared ink ---------- */
.hero-art .a-rail{fill:none; stroke:var(--line); stroke-width:1;}
.hero-art .a-frame{fill:none; stroke:var(--line-soft); stroke-width:1;}
.hero-art .a-name{font-family:var(--sans); font-size:13px; font-weight:600;
  fill:var(--ink); letter-spacing:-0.01em;}
.hero-art .a-mono{font-family:var(--mono); font-size:10.5px; fill:var(--body);
  letter-spacing:0.04em;}
.hero-art .a-eyebrow{font-family:var(--mono); font-size:9.5px; fill:var(--muted);
  letter-spacing:0.16em; text-transform:uppercase;}
.hero-art .a-chip{font-family:var(--mono); font-size:9.5px; fill:var(--ink);
  letter-spacing:0.06em;}

/* Travelling pulses only run where CSS motion path is supported,
   so unsupported browsers get the static diagram instead of a stray dot. */
.hero-art .a-pulse{opacity:0;}


/* ============================================================
   1. SERVICES — six practices converge on one delivery team
   ============================================================ */
.art-services .a-eyebrow{display:none;}
.art-services .a-frame{display:none;}
.art-services .a-row{cursor:pointer;}
.art-services .a-row:hover .a-node{fill:var(--pink); stroke:var(--pink);}
.art-services .a-row:hover .a-name{fill:var(--pink);}
.art-services .a-row:hover .a-track{stroke:var(--pink); opacity:.7;}
.art-services .a-track{fill:none; stroke:var(--line); stroke-width:1;}
.art-services .a-trunk{fill:none; stroke:url(#svcGrad); stroke-width:3; stroke-linecap:square;}
.art-services .a-trunk-flow{fill:none; stroke:#F6F5F9; stroke-width:2.5; stroke-linecap:square;
  stroke-dasharray:14 142; opacity:.55; animation:caSvcFlow 2.6s linear infinite;}
@keyframes caSvcFlow{from{stroke-dashoffset:156}to{stroke-dashoffset:0}}
.art-services .a-node{fill:var(--bg); stroke:var(--line-strong); stroke-width:1;}
.art-services .a-out{fill:none; stroke:var(--pink); stroke-width:1.5;
  animation:caSvcOut 2.6s ease-in-out infinite;}
@keyframes caSvcOut{0%,64%{opacity:.32}76%{opacity:1}100%{opacity:.32}}
@supports (offset-path: path('M0 0 L1 1')){
  .art-services .a-pulse{fill:#fff; offset-rotate:0deg;
    animation:caSvcRun 2.6s cubic-bezier(.5,0,.5,1) infinite, caSvcFade 2.6s linear infinite;
    animation-delay:var(--d), var(--d);}
  .art-services .a-pulse.p1{offset-path:path('M28,44 H280 C348,44 332,199 400,199 H528');}
  .art-services .a-pulse.p2{offset-path:path('M28,106 H280 C348,106 332,199 400,199 H528');}
  .art-services .a-pulse.p3{offset-path:path('M28,168 H280 C348,168 332,199 400,199 H528');}
  .art-services .a-pulse.p4{offset-path:path('M28,230 H280 C348,230 332,199 400,199 H528');}
  .art-services .a-pulse.p5{offset-path:path('M28,292 H280 C348,292 332,199 400,199 H528');}
  .art-services .a-pulse.p6{offset-path:path('M28,354 H280 C348,354 332,199 400,199 H528');}
}
@keyframes caSvcRun{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes caSvcFade{0%{opacity:0}8%{opacity:1}82%{opacity:1}96%{opacity:0}100%{opacity:0}}

/* ============================================================
   2. INDUSTRIES — each sector lights the frameworks it drags in
   ============================================================ */
.art-industries .a-sector{font-family:var(--sans); font-size:13.5px; font-weight:600;
  fill:var(--ink); opacity:.60; cursor:pointer; transition:opacity .2s;}
.art-industries .a-sector:hover{opacity:1 !important;}
.art-industries .a-chipbox{fill:rgba(255,255,255,0.035); stroke:var(--line); stroke-width:1;}
.art-industries .a-chipg{opacity:.45;}
.art-industries .a-chipg.always{opacity:1;}
.art-industries .a-chipg.always .a-chipbox{fill:rgba(240,5,139,0.10); stroke:rgba(240,5,139,0.42);}
.art-industries .a-cursor{fill:url(#indGrad); animation:caIndBar 24s steps(1,end) infinite;}
@keyframes caIndBar{0%{transform:translateY(0px)} 16.6667%{transform:translateY(50px)} 33.3333%{transform:translateY(100px)} 50%{transform:translateY(150px)} 66.6667%{transform:translateY(200px)} 83.3333%{transform:translateY(250px)} 100%{transform:translateY(0)}}
.art-industries .a-sector.s1{animation:caIndS1 24s linear infinite;}
@keyframes caIndS1{0%{opacity:1} 16.667%{opacity:1} 17.467%{opacity:0.60} 100%{opacity:0.60}}
.art-industries .a-sector.s2{animation:caIndS2 24s linear infinite;}
@keyframes caIndS2{0%{opacity:0.60} 15.867%{opacity:0.60} 16.667%{opacity:1} 33.333%{opacity:1} 34.133%{opacity:0.60} 100%{opacity:0.60}}
.art-industries .a-sector.s3{animation:caIndS3 24s linear infinite;}
@keyframes caIndS3{0%{opacity:0.60} 32.533%{opacity:0.60} 33.333%{opacity:1} 50%{opacity:1} 50.8%{opacity:0.60} 100%{opacity:0.60}}
.art-industries .a-sector.s4{animation:caIndS4 24s linear infinite;}
@keyframes caIndS4{0%{opacity:0.60} 49.2%{opacity:0.60} 50%{opacity:1} 66.667%{opacity:1} 67.467%{opacity:0.60} 100%{opacity:0.60}}
.art-industries .a-sector.s5{animation:caIndS5 24s linear infinite;}
@keyframes caIndS5{0%{opacity:0.60} 65.867%{opacity:0.60} 66.667%{opacity:1} 83.333%{opacity:1} 84.133%{opacity:0.60} 100%{opacity:0.60}}
.art-industries .a-sector.s6{animation:caIndS6 24s linear infinite;}
@keyframes caIndS6{0%{opacity:0.60} 82.533%{opacity:0.60} 83.333%{opacity:1} 100%{opacity:1}}
.art-industries .a-chipg.b1{animation:caInd_b1 24s linear infinite;}
@keyframes caInd_b1{0%{opacity:1} 16.667%{opacity:1} 17.467%{opacity:0.45} 100%{opacity:0.45}}
.art-industries .a-chipg.b2{animation:caInd_b2 24s linear infinite;}
@keyframes caInd_b2{0%{opacity:0.45} 15.867%{opacity:0.45} 16.667%{opacity:1} 33.333%{opacity:1} 34.133%{opacity:0.45} 100%{opacity:0.45}}
.art-industries .a-chipg.b3{animation:caInd_b3 24s linear infinite;}
@keyframes caInd_b3{0%{opacity:0.45} 32.533%{opacity:0.45} 33.333%{opacity:1} 50%{opacity:1} 50.8%{opacity:0.45} 100%{opacity:0.45}}
.art-industries .a-chipg.b4{animation:caInd_b4 24s linear infinite;}
@keyframes caInd_b4{0%{opacity:0.45} 49.2%{opacity:0.45} 50%{opacity:1} 66.667%{opacity:1} 67.467%{opacity:0.45} 100%{opacity:0.45}}
.art-industries .a-chipg.b5{animation:caInd_b5 24s linear infinite;}
@keyframes caInd_b5{0%{opacity:0.45} 65.867%{opacity:0.45} 66.667%{opacity:1} 83.333%{opacity:1} 84.133%{opacity:0.45} 100%{opacity:0.45}}
.art-industries .a-chipg.b6{animation:caInd_b6 24s linear infinite;}
@keyframes caInd_b6{0%{opacity:0.45} 82.533%{opacity:0.45} 83.333%{opacity:1} 100%{opacity:1}}
.art-industries .a-chipg.b23{animation:caInd_b23 24s linear infinite;}
@keyframes caInd_b23{0%{opacity:0.45} 15.867%{opacity:0.45} 16.667%{opacity:1} 50%{opacity:1} 50.8%{opacity:0.45} 100%{opacity:0.45}}
.art-industries .a-chipg.b25{animation:caInd_b25 24s linear infinite;}
@keyframes caInd_b25{0%{opacity:0.45} 15.867%{opacity:0.45} 16.667%{opacity:1} 33.333%{opacity:1} 34.133%{opacity:0.45} 65.867%{opacity:0.45} 66.667%{opacity:1} 83.333%{opacity:1} 84.133%{opacity:0.45} 100%{opacity:0.45}}
.art-industries .a-chipg.b135{animation:caInd_b135 24s linear infinite;}
@keyframes caInd_b135{0%{opacity:1} 16.667%{opacity:1} 17.467%{opacity:0.45} 32.533%{opacity:0.45} 33.333%{opacity:1} 50%{opacity:1} 50.8%{opacity:0.45} 65.867%{opacity:0.45} 66.667%{opacity:1} 83.333%{opacity:1} 84.133%{opacity:0.45} 100%{opacity:0.45}}

/* ============================================================
   3. TECHNOLOGIES — a sweep down the stack you actually run
   ============================================================ */
.art-tech .a-layer{fill:rgba(255,255,255,0.025); stroke:var(--line); stroke-width:1;}
.art-tech .a-layergrp{cursor:pointer; animation:caTechLayer 7.2s linear infinite;}
.art-tech .a-layergrp:hover .a-layer{fill:rgba(255,255,255,0.06); stroke:rgba(255,255,255,0.22);}
.art-tech .a-layergrp:hover .a-name{fill:var(--pink);}
.art-tech .a-beam{fill:url(#techBeam); animation:caTechBeam 7.2s cubic-bezier(.65,0,.35,1) infinite;}
.art-tech .a-beamline{stroke:var(--pink); stroke-width:1; opacity:.85;
  animation:caTechBeam 7.2s cubic-bezier(.65,0,.35,1) infinite;}
@keyframes caTechBeam{0%{transform:translateY(0)}90%{transform:translateY(290px)}100%{transform:translateY(290px)}}
.art-tech .a-layergrp.l1{animation-name:caTechL1;}
@keyframes caTechL1{0%{opacity:1} 15%{opacity:1} 15.8%{opacity:0.60} 100%{opacity:0.60}}
.art-tech .a-layergrp.l2{animation-name:caTechL2;}
@keyframes caTechL2{0%{opacity:0.60} 14.2%{opacity:0.60} 15%{opacity:1} 30%{opacity:1} 30.8%{opacity:0.60} 100%{opacity:0.60}}
.art-tech .a-layergrp.l3{animation-name:caTechL3;}
@keyframes caTechL3{0%{opacity:0.60} 29.2%{opacity:0.60} 30%{opacity:1} 45%{opacity:1} 45.8%{opacity:0.60} 100%{opacity:0.60}}
.art-tech .a-layergrp.l4{animation-name:caTechL4;}
@keyframes caTechL4{0%{opacity:0.60} 44.2%{opacity:0.60} 45%{opacity:1} 60%{opacity:1} 60.8%{opacity:0.60} 100%{opacity:0.60}}
.art-tech .a-layergrp.l5{animation-name:caTechL5;}
@keyframes caTechL5{0%{opacity:0.60} 59.2%{opacity:0.60} 60%{opacity:1} 75%{opacity:1} 75.8%{opacity:0.60} 100%{opacity:0.60}}
.art-tech .a-layergrp.l6{animation-name:caTechL6;}
@keyframes caTechL6{0%{opacity:0.60} 74.2%{opacity:0.60} 75%{opacity:1} 90%{opacity:1} 90.8%{opacity:0.60} 100%{opacity:0.60}}
.art-tech .a-layer-on{fill:rgba(240,5,139,0.06); stroke:rgba(240,5,139,0.45); stroke-width:1;
  animation:caTechLayer 7.2s linear infinite; opacity:0;}
.art-tech .a-layer-on.o1{animation-name:caTechO1;}
@keyframes caTechO1{0%{opacity:1} 15%{opacity:1} 15.8%{opacity:0} 100%{opacity:0}}
.art-tech .a-layer-on.o2{animation-name:caTechO2;}
@keyframes caTechO2{0%{opacity:0} 14.2%{opacity:0} 15%{opacity:1} 30%{opacity:1} 30.8%{opacity:0} 100%{opacity:0}}
.art-tech .a-layer-on.o3{animation-name:caTechO3;}
@keyframes caTechO3{0%{opacity:0} 29.2%{opacity:0} 30%{opacity:1} 45%{opacity:1} 45.8%{opacity:0} 100%{opacity:0}}
.art-tech .a-layer-on.o4{animation-name:caTechO4;}
@keyframes caTechO4{0%{opacity:0} 44.2%{opacity:0} 45%{opacity:1} 60%{opacity:1} 60.8%{opacity:0} 100%{opacity:0}}
.art-tech .a-layer-on.o5{animation-name:caTechO5;}
@keyframes caTechO5{0%{opacity:0} 59.2%{opacity:0} 60%{opacity:1} 75%{opacity:1} 75.8%{opacity:0} 100%{opacity:0}}
.art-tech .a-layer-on.o6{animation-name:caTechO6;}
@keyframes caTechO6{0%{opacity:0} 74.2%{opacity:0} 75%{opacity:1} 90%{opacity:1} 90.8%{opacity:0} 100%{opacity:0}}

/* ============================================================
   4. PARTNERING WITH US — four stages, then a standing cadence
   ============================================================ */
.art-partner .a-spine{stroke:var(--line); stroke-width:1; fill:none;}
.art-partner .a-stagegrp{cursor:pointer; animation:caPtnStage 11s linear infinite;}
.art-partner .a-stagegrp:hover{opacity:1 !important; animation-play-state:paused;}
.art-partner .a-stagegrp:hover .a-dot{stroke:var(--pink);}
.art-partner .a-stagegrp:hover .a-name{fill:var(--pink);}
.art-partner .a-stagegrp.g1{animation-name:caPtnS1;}
@keyframes caPtnS1{0%{opacity:1} 15%{opacity:1} 15.8%{opacity:0.58} 100%{opacity:0.58}}
.art-partner .a-stagegrp.g2{animation-name:caPtnS2;}
@keyframes caPtnS2{0%{opacity:0.58} 14.2%{opacity:0.58} 15%{opacity:1} 30%{opacity:1} 30.8%{opacity:0.58} 100%{opacity:0.58}}
.art-partner .a-stagegrp.g3{animation-name:caPtnS3;}
@keyframes caPtnS3{0%{opacity:0.58} 29.2%{opacity:0.58} 30%{opacity:1} 45%{opacity:1} 45.8%{opacity:0.58} 100%{opacity:0.58}}
.art-partner .a-stagegrp.g4{animation-name:caPtnS4;}
@keyframes caPtnS4{0%{opacity:0.58} 44.2%{opacity:0.58} 45%{opacity:1} 60%{opacity:1} 60.8%{opacity:0.58} 100%{opacity:0.58}}
.art-partner .a-dot{fill:var(--bg); stroke:var(--line-strong); stroke-width:1.5;}
.art-partner .a-dot-live{fill:url(#ptnGrad); stroke:none;}
.art-partner .a-loop{fill:none; stroke:url(#ptnGrad); stroke-width:1.5; opacity:.55;}
.art-partner .a-loop-run{fill:none; stroke:#F6F5F9; stroke-width:1.5; stroke-linecap:round;
  stroke-dasharray:22 190; animation:caPtnLoop 4.4s linear infinite;}
@keyframes caPtnLoop{from{stroke-dashoffset:212}to{stroke-dashoffset:0}}
@supports (offset-path: path('M0 0 L1 1')){
  .art-partner .a-pulse{fill:#fff; animation:caPtnRun 11s cubic-bezier(.6,0,.4,1) infinite,
    caPtnFade 11s linear infinite;}
}
@keyframes caPtnRun{0%{offset-distance:0%}12%{offset-distance:0%}22%{offset-distance:33.3%}32%{offset-distance:33.3%}42%{offset-distance:66.7%}52%{offset-distance:66.7%}62%{offset-distance:100%}100%{offset-distance:100%}}
@keyframes caPtnFade{0%{opacity:0}6%{opacity:1}86%{opacity:1}94%{opacity:0}100%{opacity:0}}

/* ============================================================
   5. ABOUT — two offices on one clock
   ============================================================ */
.art-about .a-ring{fill:none; stroke:var(--line-soft); stroke-width:1;}
.art-about .a-band-us{fill:none; stroke:var(--pink); stroke-width:7; stroke-linecap:butt; opacity:.9;}
.art-about .a-band-in{fill:none; stroke:var(--purple-2); stroke-width:7; stroke-linecap:butt; opacity:.9;}
.art-about .a-wedge{fill:url(#abtGrad); opacity:.14; animation:caAbtWedge 12s ease-in-out infinite;}
@keyframes caAbtWedge{0%,42%{opacity:.10}54%{opacity:.34}70%{opacity:.10}100%{opacity:.10}}
.art-about .a-tick{stroke:var(--line); stroke-width:1;}
.art-about .a-chord{stroke:var(--line-strong); stroke-width:1; stroke-dasharray:3 5; fill:none;}
@supports (offset-path: path('M0 0 L1 1')){
  .art-about .a-sun{fill:#fff; opacity:.9; animation:caAbtOrbit 12s linear infinite;}
  .art-about .a-hand{fill:url(#abtGrad); animation:caAbtHand 12s ease-in-out infinite;}
}
@keyframes caAbtOrbit{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes caAbtHand{0%,42%{offset-distance:0%;opacity:0}46%{opacity:1}58%{offset-distance:100%;opacity:1}64%{offset-distance:100%;opacity:0}100%{opacity:0}}

/* ============================================================
   6. CAREERS — a path that steps up, and roles open now
   ============================================================ */
.art-careers .a-mono{font-size:10px;}
.art-careers .a-step{fill:none; stroke:var(--line); stroke-width:1;}
.art-careers .a-path{fill:none; stroke:url(#carGrad); stroke-width:2;}
.art-careers .a-fill{fill:url(#carFill); opacity:.5;}
.art-careers .a-rung{cursor:pointer; animation:caCarRung 9s linear infinite;}
.art-careers .a-rung:hover{opacity:1 !important; animation-play-state:paused;}
.art-careers .a-rung:hover .a-marker{stroke:var(--pink); fill:rgba(240,5,139,0.12);}
.art-careers .a-rung:hover .a-name{fill:var(--pink);}
.art-careers .a-rung.r1{animation-name:caCarR1;}
@keyframes caCarR1{0%{opacity:1} 100%{opacity:1}}
.art-careers .a-rung.r2{animation-name:caCarR2;}
@keyframes caCarR2{0%{opacity:0.3} 17.2%{opacity:0.3} 18%{opacity:1} 100%{opacity:1}}
.art-careers .a-rung.r3{animation-name:caCarR3;}
@keyframes caCarR3{0%{opacity:0.3} 35.2%{opacity:0.3} 36%{opacity:1} 100%{opacity:1}}
.art-careers .a-rung.r4{animation-name:caCarR4;}
@keyframes caCarR4{0%{opacity:0.3} 53.2%{opacity:0.3} 54%{opacity:1} 100%{opacity:1}}
.art-careers .a-marker{fill:var(--bg); stroke:var(--pink); stroke-width:2;}
@supports (offset-path: path('M0 0 L1 1')){
  .art-careers .a-climber{animation:caCarClimb 9s cubic-bezier(.55,0,.45,1) infinite, caCarFade 9s linear infinite;}
}
@keyframes caCarClimb{0%{offset-distance:0%}80%{offset-distance:100%}100%{offset-distance:100%}}
@keyframes caCarFade{0%{opacity:0}5%{opacity:1}88%{opacity:1}96%{opacity:0}100%{opacity:0}}
.art-careers .a-open{fill:#22C58B; animation:caCarBlink 2.4s ease-in-out infinite;}
@keyframes caCarBlink{0%,100%{opacity:.35}50%{opacity:1}}

/* ============================================================
   7. HOME — option A: animated circuit behind the engage card
   ============================================================ */
.hero-engage{position:relative; padding-left:clamp(30px,3.2vw,40px);}
.engage-bg{position:absolute; left:12px; top:16px; bottom:16px; width:6px;
  pointer-events:none; height:auto;}
.engage-bg .b-spine{fill:none; stroke:url(#homeGrad); stroke-width:2.5; opacity:.7;}
.engage-bg .b-run{fill:none; stroke:#F6F5F9; stroke-width:1.5; stroke-linecap:round;
  stroke-dasharray:26 374; opacity:.7; animation:caHomeRun 5.2s linear infinite;}
@keyframes caHomeRun{from{stroke-dashoffset:400}to{stroke-dashoffset:0}}
.engage-bg .b-tap{fill:var(--pink); animation:caHomeTap 5.2s linear infinite; animation-delay:var(--d);}
@keyframes caHomeTap{0%,100%{opacity:0}6%{opacity:.95}18%{opacity:0}}

/* ============================================================
   8. HOME — option B: end-to-end delivery map (full replacement)
   ============================================================ */
.art-home .a-col{fill:none; stroke:var(--line); stroke-width:1;}
.art-home .a-name{font-size:12px;}
.art-home .a-mono{font-size:9px; letter-spacing:0.02em;}
.art-home .a-box{fill:rgba(255,255,255,0.03); stroke:var(--line); stroke-width:1;
  transition:fill .18s, stroke .18s; cursor:default;}
.art-home .a-core{fill:rgba(240,5,139,0.07); stroke:rgba(240,5,139,0.40); stroke-width:1;
  transition:fill .18s, stroke .18s; cursor:default;}
.art-home .a-box:hover{fill:rgba(255,255,255,0.07); stroke:rgba(255,255,255,0.28);}
.art-home .a-core:hover{fill:rgba(240,5,139,0.16); stroke:rgba(240,5,139,0.72);}
.art-home .a-wire{fill:none; stroke:var(--line); stroke-width:1;}
.art-home .a-ship{fill:none; stroke:url(#hmGrad); stroke-width:2;}
.art-home .a-live{fill:#22C58B; animation:caCarBlink 2.4s ease-in-out infinite;}
@supports (offset-path: path('M0 0 L1 1')){
  .art-home .a-pulse{fill:#fff; animation:caHmRun 3.4s cubic-bezier(.5,0,.5,1) infinite,
    caHmFade 3.4s linear infinite; animation-delay:var(--d), var(--d);}
  .art-home .a-pulse.hp1{offset-path:path('M196,89 H228');}
  .art-home .a-pulse.hp2{offset-path:path('M196,179 H228');}
  .art-home .a-pulse.hp3{offset-path:path('M196,269 H228');}
  .art-home .a-pulse.hp4{offset-path:path('M382,89 C424,89 416,179 452,179');}
  .art-home .a-pulse.hp5{offset-path:path('M382,179 H452');}
  .art-home .a-pulse.hp6{offset-path:path('M382,269 C424,269 416,179 452,179');}
}
@keyframes caHmRun{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes caHmFade{0%{opacity:0}10%{opacity:1}80%{opacity:1}95%{opacity:0}100%{opacity:0}}

/* ============================================================
   9. SERVICENOW — requests route through Now Platform to resolution
   ============================================================ */
.art-servicenow .a-track{fill:none; stroke:var(--line); stroke-width:1;}
.art-servicenow .a-hub{fill:rgba(240,5,139,0.07); stroke:rgba(240,5,139,0.40); stroke-width:1;}
.art-servicenow .a-out{fill:rgba(142,51,246,0.07); stroke:rgba(142,51,246,0.40); stroke-width:1;}
.art-servicenow .a-box{fill:rgba(255,255,255,0.03); stroke:var(--line); stroke-width:1;}
.art-servicenow .a-wire{fill:none; stroke:var(--line); stroke-width:1;}
.art-servicenow .a-ship{fill:none; stroke:url(#snGrad); stroke-width:2;}
.art-servicenow .a-live{fill:#22C58B; animation:caCarBlink 2.4s ease-in-out infinite;}
@supports (offset-path: path('M0 0 L1 1')){
  .art-servicenow .a-pulse{fill:#fff; animation:caSnRun 3.2s cubic-bezier(.5,0,.5,1) infinite,
    caSnFade 3.2s linear infinite; animation-delay:var(--d), var(--d);}
  .art-servicenow .a-pulse.sp1{offset-path:path('M178,90 C220,90 212,190 248,190');}
  .art-servicenow .a-pulse.sp2{offset-path:path('M178,190 H248');}
  .art-servicenow .a-pulse.sp3{offset-path:path('M178,290 C220,290 212,190 248,190');}
  .art-servicenow .a-pulse.sp4{offset-path:path('M402,190 H460');}
}
@keyframes caSnRun{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes caSnFade{0%{opacity:0}10%{opacity:1}80%{opacity:1}96%{opacity:0}100%{opacity:0}}

/* ---------- Reduced motion ----------
   styles.css already neutralises animations globally under
   prefers-reduced-motion. Every diagram above is authored so its
   un-animated base state is the readable, static version. ---------- */
@media (prefers-reduced-motion: reduce){
  .hero-art .a-pulse,
  .hero-art .a-climber,
  .hero-art .a-sun,
  .hero-art .a-hand,
  .engage-bg .b-run,
  .engage-bg .b-tap,
  .art-services .a-trunk-flow,
  .art-partner .a-loop-run{display:none;}
  .art-tech .a-beam,
  .art-tech .a-beamline{display:none;}
}