/* Bespoke service diagrams: open SVG compositions with restrained motion. */
.service-row__vector { width:180px; max-width:100%; grid-column:2; justify-self:start; pointer-events:none; }
.service-vector { display:block; width:100%; height:auto; overflow:visible; stroke:var(--color-bordeaux); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; transition:transform .45s var(--ease); }
.vector-guide { stroke:#9fa9ba; stroke-width:.8; stroke-dasharray:2 5; opacity:.7; }
.vector-paper { fill:#fafbfe; }
.vector-wash { fill:#e9dfe8; stroke:#9b6b80; }
.vector-dot,.vector-solid { fill:var(--color-bordeaux); }
.vector-accent { fill:var(--color-orange); stroke:var(--color-orange); }
.vector-line { stroke:#8c96a7; stroke-width:1.3; }
.vector-cursor { fill:var(--color-orange); stroke:white; stroke-width:1.6; animation:vector-cursor 5s ease-in-out infinite; animation-play-state:var(--pattern-play); }
.vector-device { animation:vector-lift 5s ease-in-out infinite; animation-play-state:var(--pattern-play); }
.vector-check { transform-box:fill-box; transform-origin:center; animation:vector-confirm 4s ease-in-out infinite; animation-play-state:var(--pattern-play); }
.vector-receipt { animation:vector-lift 5s ease-in-out infinite reverse; animation-play-state:var(--pattern-play); }
.vector-connection { stroke:#ac7c90; stroke-dasharray:4 5; animation:vector-connect 3s linear infinite; animation-play-state:var(--pattern-play); }
.vector-core { transform-box:fill-box; transform-origin:center; animation:vector-core 5s ease-in-out infinite; animation-play-state:var(--pattern-play); }
.vector-signal { animation:vector-lift 4s ease-in-out infinite; animation-play-state:var(--pattern-play); }
.vector-orbit { transform-origin:107px 64px; animation:vector-orbit 18s linear infinite; animation-play-state:var(--pattern-play); }
.vector-orbit-path { stroke:#b1b9c7; stroke-width:1; stroke-dasharray:2 8; }
.service-vector--commerce .vector-wash { fill:#ece3d6; stroke:#a98c70; }
.service-vector--custom { stroke:#344e73; }.service-vector--custom .vector-solid { fill:#263c5d; stroke:#263c5d; }
.service-vector--strategy .vector-wash { fill:#e6ebf3; stroke:#9faec3; }
.service-row--hover .service-vector { transform:translateY(-4px) rotate(-3deg) scale(1.06); }
.service-row--hover .vector-guide { stroke:var(--color-orange); opacity:1; }
.services--hover .service-row__number { color:transparent; -webkit-text-stroke:1px #9294a6; }
.service-row--hover .service-row__number { color:var(--color-bordeaux); -webkit-text-stroke:1px var(--color-bordeaux); }
.services--hover .service-row::before { background:linear-gradient(95deg,#781f380b,#fff9 48%,#ffffff60); }
/* Second background pattern: curved circuit paths with moving light segments. */
.web-pattern__flow { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke-linecap:round; mask-image:linear-gradient(90deg,#0009, #0003 26%,transparent 46%,transparent 56%,#0003 77%,#000b); }
.web-pattern__routes { stroke:#8090ac; stroke-width:1; opacity:.25; }
.web-pattern__packets { stroke:#c94716; stroke-width:2; stroke-dasharray:35 340; stroke-dashoffset:0; opacity:.5; }
.web-pattern__packets>path { animation:flow-packets 10s linear infinite; animation-play-state:var(--pattern-play); }
.web-pattern__packets>path:nth-child(2) { stroke:#781f38; animation-direction:reverse; animation-duration:13s; }
.web-pattern__packets>path:nth-child(3) { animation-delay:-4s; animation-duration:8s; }
.web-pattern__junctions { fill:#f5f5f9; stroke:#781f38; stroke-width:1; opacity:.3; }
.web-pattern__scan { position:absolute; inset:-130px 0 auto; height:130px; background:linear-gradient(transparent,#8999bf06,transparent); border-bottom:1px solid #9ca9c719; animation:pattern-scan 12s linear infinite; animation-play-state:var(--pattern-play); }
.web-pattern__grid { background-image:linear-gradient(#15223814 1px,transparent 1px),linear-gradient(90deg,#15223814 1px,transparent 1px); }
.web-pattern__dots { animation:pattern-dots 8s ease-in-out infinite; animation-play-state:var(--pattern-play); }
.web-pattern__code { color:#781f3825; animation-duration:8s; }
.web-pattern__code--second { color:#15223825; }
.web-pattern__wireframe { animation-duration:12s; border-color:#15223825; }
.web-pattern__beam--first { animation-duration:7s; }.web-pattern__beam--second { animation-duration:10s; }.web-pattern__beam--third { animation-duration:12s; }
@keyframes vector-cursor { 0%,100%{transform:translate(7px,4px)} 45%,60%{transform:translate(-9px,-5px)} }
@keyframes vector-lift { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes vector-confirm { 0%,100%{transform:scale(.93)} 45%,60%{transform:scale(1.08)} }
@keyframes vector-connect { to{stroke-dashoffset:-36} }
@keyframes vector-core { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
@keyframes vector-orbit { to{transform:rotate(360deg)} }
@keyframes flow-packets { to{stroke-dashoffset:-750} }
@keyframes pattern-scan { to{transform:translateY(1500px)} }
@keyframes pattern-dots { 0%,100%{opacity:.45} 50%{opacity:.9} }
@media(min-width:768px) and (max-width:1023px) {
  .services--hover .service-row { grid-template-columns:96px minmax(0,1fr) minmax(210px,.75fr); }
  .service-row__vector { grid-column:2/4; justify-self:end; width:160px; margin-top:-6px; }
}
@media(min-width:1024px) {
  .services--hover .service-row { grid-template-columns:104px minmax(0,1.1fr) minmax(0,1fr) 142px; column-gap:24px; min-height:185px; padding:31px 0; }
  .services--hover .service-row__title { font-size:clamp(1.7rem,2.45vw,2.25rem); }
  .services--hover .service-row__leading { gap:20px; }
  .services--hover .service-row__number { font-size:2.8rem; }
  .services--hover .service-row__icon { width:42px; height:42px; }
  .service-row__vector { grid-column:4; grid-row:1; width:142px; justify-self:end; }
  .services--hover .service-row__description { font-size:1.0625rem; }
}
@media(min-width:1400px) {
  .services--hover .service-row { grid-template-columns:128px minmax(0,1.12fr) minmax(0,1fr) 180px; column-gap:32px; }
  .service-row__vector { width:180px; }
  .services--hover .service-row__title { font-size:2.35rem; }
  .services--hover .service-row__description { font-size:1.125rem; }
}
@media(max-width:767px) {
  .service-row__vector { width:165px; margin-top:7px; }
  .web-pattern__flow { opacity:.55; }
  .web-pattern__scan { opacity:.55; }
}
@media(prefers-reduced-motion:reduce) {
  .service-vector *,.web-pattern * { animation:none!important; }
  .service-vector { transition:none; }
}