/* ==========================================================================
   WorkSphere — site background ("Global Talent Grid")
   A fixed layer behind every page: soft brand aurora, a fine dot grid and
   slow "flight routes" between hiring hubs. Content and cards stay as they were;
   light sections only turn see-through so the layer shows behind them.
   ========================================================================== */
.ws-bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,#fbfaff 0%,#f5f3fc 45%,#f3f8fa 100%)}
.ws-bgfx__grid{position:absolute;inset:-2px;
  background-image:radial-gradient(rgba(77,0,133,.13) 1px,transparent 1.5px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000 25%,transparent 78%);mask-image:radial-gradient(120% 90% at 50% 30%,#000 25%,transparent 78%);opacity:.75}
.ws-bgfx__lines{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(77,0,133,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(77,0,133,.05) 1px,transparent 1px);background-size:130px 130px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.ws-bgfx__o{position:absolute;border-radius:50%;will-change:transform}
.ws-bgfx__o.a{width:62vmax;height:62vmax;left:-18vmax;top:-22vmax;background:radial-gradient(circle,rgba(123,47,214,.20),rgba(123,47,214,0) 62%);animation:wsbgA 38s ease-in-out infinite alternate}
.ws-bgfx__o.b{width:56vmax;height:56vmax;right:-20vmax;top:18vh;background:radial-gradient(circle,rgba(15,181,174,.16),rgba(15,181,174,0) 62%);animation:wsbgB 46s ease-in-out infinite alternate}
.ws-bgfx__o.c{width:48vmax;height:48vmax;left:22vw;bottom:-26vmax;background:radial-gradient(circle,rgba(90,0,165,.13),rgba(90,0,165,0) 62%);animation:wsbgC 52s ease-in-out infinite alternate}
@keyframes wsbgA{to{transform:translate3d(8vw,10vh,0) scale(1.08)}}
@keyframes wsbgB{to{transform:translate3d(-10vw,-8vh,0) scale(1.1)}}
@keyframes wsbgC{to{transform:translate3d(6vw,-12vh,0) scale(.94)}}
.ws-bgfx canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.ws-bgfx__noise{position:absolute;inset:0;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* let the layer show behind light sections (cards keep their own white) */
body.ws-bg{background:transparent}
html:has(body.ws-bg){background:#f7f6fc}
body.ws-bg{--background-color:transparent}
body.ws-bg section.cm,body.ws-bg section.wc,body.ws-bg section.mv,body.ws-bg section.wa,body.ws-bg section.wy-sec,body.ws-bg section.ec,body.ws-bg #cv-service-teaser{background:transparent!important}
body.ws-bg section.cm::before,body.ws-bg section.cm::after{opacity:.0}

@media (max-width:767px){
  .ws-bgfx__grid{background-size:22px 22px;opacity:.6}
  .ws-bgfx__lines{display:none}
  .ws-bgfx__o.c{display:none}
}
@media (prefers-reduced-motion:reduce){.ws-bgfx__o{animation:none}}