/* Decorative brand-red field, scoped to the Services needs section only. */
html[lang="en"] #needs{position:relative;isolation:isolate;overflow:hidden}
html[lang="en"] #needs>.wrap{position:relative;z-index:1}
#needs .needs-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;display:grid;place-items:center}
#needs .needs-art svg{width:clamp(280px,38vw,460px);height:auto;max-width:none;opacity:.1;color:var(--red);transform:translate(12%,12%)}
#needs .needs-art path{fill:currentColor}
#needs .needs-art .needs-art-line{fill:none;stroke:currentColor;stroke-width:1.5}
#needs .needs-art circle{fill:currentColor}
#needs .needs-art-turn{transform-origin:200px 200px;animation:needs-art-rotate 44s linear infinite;animation-play-state:paused}
html.motion #needs.needs-art-visible .needs-art-turn{animation-play-state:running}
@keyframes needs-art-rotate{to{transform:rotate(360deg)}}
@media(max-width:760px){#needs .needs-art svg{width:320px;opacity:.08;transform:translate(12%,0)}}
@media(prefers-reduced-motion:reduce){html.motion #needs .needs-art-turn{animation:none}}

/* Outer SVG translation composes with the inner group's rotation. */
#needs .needs-art svg{translate:var(--needs-pointer-x,0px) var(--needs-pointer-y,0px)}
@media(prefers-reduced-motion:reduce){#needs .needs-art svg{translate:0 0}}