/* The three Figma artworks share one square optical frame in each context.
   Native SVG dimensions and aspect ratios remain intact; visible height is equal. */
.service-art { display:block; position:relative; width:100%; max-width:100%; aspect-ratio:1; flex:none; }
:is(html.services-v2 .solution-card .solution-visual,
    .about-page .page-hero.service-hero .page-hero-visual,
    .about-page .sr-complement-art,.about-page .eb-complement-art,.about-page .dr-complement-art)
  .service-art > svg.service-illustration {
  position:absolute; left:0; top:5%; display:block; width:auto; height:90%;
  max-width:100%; max-height:90%; overflow:visible; shape-rendering:geometricPrecision;
}
html.services-v2 .solution-card .solution-visual .service-art { width:min(100%,144px); }
.about-page .page-hero.service-hero .page-hero-visual .service-art { width:min(80%,624px); }
@media(max-width:600px) {
  html.services-v2 .solution-card .solution-visual .service-art { width:72px; }
}
/* Gentle, continuous loops for the original Business solutions SVG artwork. */
.service-illustration [class*="service-motion-"] {
  transform-box: fill-box;
  transform-origin: center;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.service-illustration .service-motion-rings {
  animation-name: service-svg-rings;
  animation-duration: 4.8s;
}

.service-illustration .service-motion-rings-social {
  animation-delay: -1.3s;
}

.service-illustration .service-motion-rings-employer {
  animation-delay: -2.6s;
}

.service-illustration .service-motion-social-avatar {
  animation-name: service-svg-social-avatar;
  animation-duration: 3.8s;
  animation-delay: -.7s;
}

.service-illustration .service-motion-social-search {
  animation-name: service-svg-social-search;
  animation-duration: 4.2s;
  animation-delay: -1.4s;
}

.service-illustration .service-motion-employer-building {
  transform-origin: center bottom;
  animation-name: service-svg-employer-building;
  animation-duration: 4s;
  animation-delay: -1.1s;
}

.service-illustration .service-motion-employer-avatar {
  animation-name: service-svg-employer-avatar;
  animation-duration: 4.4s;
  animation-delay: -2.4s;
}

.service-illustration .service-motion-employer-growth {
  animation-name: service-svg-employer-growth;
  animation-duration: 3.6s;
  animation-delay: -.5s;
}

.service-illustration .service-motion-direct-ring-middle {
  animation-name: service-svg-direct-ring-middle;
  animation-duration: 4.8s;
  animation-delay: -1.9s;
}

.service-illustration .service-motion-direct-ring-inner {
  animation-name: service-svg-direct-ring-inner;
  animation-duration: 4.2s;
  animation-delay: -.8s;
}

.service-illustration .service-motion-direct-avatar-main {
  animation-name: service-svg-direct-avatar-main;
  animation-duration: 3.8s;
  animation-delay: -1s;
}

.service-illustration .service-motion-direct-avatar-first {
  animation-name: service-svg-direct-avatar-first;
  animation-duration: 4.2s;
  animation-delay: -2.1s;
}

.service-illustration .service-motion-direct-avatar-second {
  animation-name: service-svg-direct-avatar-second;
  animation-duration: 4.6s;
  animation-delay: -3.1s;
}

.service-illustration .service-motion-direct-check {
  animation-name: service-svg-direct-check;
  animation-duration: 3.6s;
  animation-delay: -.6s;
}

.service-illustration.is-service-motion-active [class*="service-motion-"] {
  animation-play-state: running;
}

@keyframes service-svg-rings {
  0%, 100% { transform: scale(.96); }
  50% { transform: scale(1.025); }
}

@keyframes service-svg-social-avatar {
  0%, 100% { transform: translate(-5px, 7px) scale(.98); }
  50% { transform: translate(7px, -12px) scale(1.05); }
}

@keyframes service-svg-social-search {
  0%, 100% { transform: translate(-30px, 22px); }
  50% { transform: translate(0, -5px); }
}

@keyframes service-svg-employer-building {
  0%, 100% { transform: scaleY(.94); }
  50% { transform: scaleY(1.09); }
}

@keyframes service-svg-employer-avatar {
  0%, 100% { transform: translate(0, -7px); }
  50% { transform: translate(16px, 13px); }
}

@keyframes service-svg-employer-growth {
  0%, 100% { transform: translateY(5px) scale(.96); }
  50% { transform: translateY(-12px) scale(1.07); }
}

@keyframes service-svg-direct-ring-middle {
  0%, 100% { transform: scale(.94); }
  50% { transform: scale(1.05); }
}

@keyframes service-svg-direct-ring-inner {
  0%, 100% { transform: scale(.95); }
  50% { transform: scale(1.045); }
}

@keyframes service-svg-direct-avatar-main {
  0%, 100% { transform: translateY(5px); }
  50% { transform: translateY(-9px); }
}

@keyframes service-svg-direct-avatar-first {
  0%, 100% { transform: translate(-4px, 7px); }
  50% { transform: translate(9px, -10px); }
}

@keyframes service-svg-direct-avatar-second {
  0%, 100% { transform: translate(5px, -8px); }
  50% { transform: translate(-9px, 10px); }
}

@keyframes service-svg-direct-check {
  0%, 100% { transform: scale(.94); }
  50% { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .service-illustration [class*="service-motion-"] {
    animation: none !important;
    transform: none !important;
  }
}