/* Service-specific vector stories. All essential copy remains static and readable. */
.service-story{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.service-story .svc-hero-copy{padding:32px 40px 64px max(32px,calc((100vw - 1400px)/2));gap:64px;min-width:0;justify-content:flex-start}
.service-story h1{font-size:clamp(44px,4.6vw,76px);line-height:1.04;margin-bottom:34px;overflow-wrap:normal}
.service-promise{font-size:clamp(24px,2.3vw,34px);line-height:1.2;letter-spacing:-.035em;color:var(--violet);margin-bottom:22px}
.service-story .svc-lead{font-size:18px;line-height:1.6;max-width:470px}
.motion-stage{margin:0;background:#6045cf;min-width:0;overflow:hidden;display:grid;place-items:center;position:relative;isolation:isolate;min-height:640px;padding:24px 0}
.motion-stage:before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent)}
.motion-stage:focus-visible{outline:3px solid #f5f2e9;outline-offset:-7px}
.service-art{display:block;width:100%;max-width:850px;height:auto;overflow:visible;stroke:#6045cf;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.service-art .paper{fill:#f5f2e9;stroke:#30245f}
.service-art .white{fill:#fffdf7;stroke:#b5a8df}
.service-art .lilac{fill:#e5def9;stroke:#ad9dd8}
.service-art .solid{fill:#6045cf;stroke:none}
.service-art .faint{fill:#b9a6ec;stroke:none}
.service-art .ink{fill:#30245f;stroke:none}
.service-art .cream-fill{fill:#f5f2e9;stroke:none}
.service-art .rule{stroke:#c8bedb;stroke-width:1.5}
.service-art .route{stroke:#9278d6;stroke-width:2}
.service-art .muted-line{stroke:#b4a7cb;stroke-width:5}
.service-art .stage-rule{stroke:#ffffff20}
.service-art text{font-family:'Instrument Sans',Arial,sans-serif;fill:#30245f;stroke:none;font-size:26px;letter-spacing:-.6px;font-weight:500}
.service-art .light-label{fill:#f5f2e9}
.service-art .api-label{fill:#f5f2e9;font-size:34px}
.service-art .light-stroke{stroke:#f5f2e9;stroke-width:3;fill:none}
.service-art .check-mark{stroke:#6045cf;stroke-width:3;fill:none}
.service-art .cursor-shape{fill:#30245f;stroke:#f5f2e9;stroke-width:2}
.service-art .circuit{stroke:#b9a6ec;stroke-width:2}
.service-art .signal{stroke:#f5f2e9;stroke-width:4;stroke-dasharray:8 24}
.service-art .bar-stroke{stroke:#6045cf;stroke-width:16;stroke-linecap:butt}
.board-shadow,.browser-window,.document-front,.response-float,.system-app,.system-crm,.system-db,.system-pay,.phone-float,.review-float{filter:drop-shadow(0 12px 0 #30245f20)}
/* Each loop returns to its original pose, with deliberate holds between actions. */
.motion-started .card-a{animation:research-sort 10s cubic-bezier(.45,0,.2,1) infinite}
.motion-started .card-b{animation:research-lift 10s cubic-bezier(.45,0,.2,1) infinite}
.motion-started .planning-card{animation:plan-focus 10s ease-in-out infinite}
.motion-started .insight-tag{animation:float-note 10s ease-in-out infinite}
.motion-started .plan-tag{animation:float-note 10s -5s ease-in-out infinite}
.motion-started .strategy-cursor{animation:strategy-pointer 10s cubic-bezier(.45,0,.2,1) infinite}
.motion-started .priority-card .check-mark{stroke-dasharray:30;animation:check-draw 10s ease-in-out infinite}
.motion-started .priority-card .check-1{animation-delay:-9.4s}.motion-started .priority-card .check-2{animation-delay:-8.8s}
.motion-started .phone-float{animation:phone-shift 10s cubic-bezier(.45,0,.2,1) infinite}
.motion-started .component-float{animation:float-note 10s -3s ease-in-out infinite}
.motion-started .app-bars{transform-origin:280px 330px;animation:bars-build 10s ease-in-out infinite}
.motion-started .app-cursor{animation:app-pointer 10s cubic-bezier(.45,0,.2,1) infinite}
.motion-started .document-back{animation:document-fan 12s ease-in-out infinite}
.motion-started .document-front{animation:float-note 12s -6s ease-in-out infinite}
.motion-started .response-float{animation:float-note 12s -3s ease-in-out infinite}
.motion-started .answer-lines{transform-origin:502px 252px;animation:answer-write 12s ease-in-out infinite}
.motion-started .core-turn{transform-box:fill-box;transform-origin:center;animation:core-cycle 12s cubic-bezier(.45,0,.2,1) infinite}
.motion-started .review-float{animation:review-rise 12s ease-in-out infinite}
.motion-started .source-token{animation:source-travel 12s ease-in-out infinite}
.motion-started .signal{animation:flow-line 4s linear infinite}
.motion-started .signal-b{animation-delay:-2s}
.motion-started .system-app,.motion-started .system-pay{animation:node-float 12s ease-in-out infinite}
.motion-started .system-crm,.motion-started .system-db{animation:node-float 12s -6s ease-in-out infinite}
.motion-started .port-pulse{animation:port-glow 4s ease-in-out infinite}
.motion-started .connection-block{animation:float-note 12s -3s ease-in-out infinite}
@keyframes research-sort{0%,12%,88%,100%{transform:translate(0,0) rotate(0)}30%,65%{transform:translate(0,10px) rotate(-3deg)}}
@keyframes research-lift{0%,12%,88%,100%{transform:translate(0,0)}30%,65%{transform:translate(8px,-8px)}}
@keyframes plan-focus{0%,15%,85%,100%{transform:translate(0,0)}35%,65%{transform:translate(0,-12px)}}
@keyframes float-note{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes strategy-pointer{0%,15%,100%{transform:translate(396px,438px)}35%,48%{transform:translate(349px,338px)}60%,78%{transform:translate(549px,391px)}}
@keyframes check-draw{0%,20%,100%{stroke-dashoffset:30}38%,85%{stroke-dashoffset:0}}
@keyframes phone-shift{0%,12%,88%,100%{transform:translate(0,0)}35%,65%{transform:translate(-32px,-16px)}}
@keyframes bars-build{0%,100%{transform:scaleY(.55)}40%,65%{transform:scaleY(1)}}
@keyframes app-pointer{0%,15%,100%{transform:translate(374px,412px)}35%,48%{transform:translate(447px,307px)}60%,78%{transform:translate(537px,478px)}}
@keyframes document-fan{0%,100%{transform:translate(0,0)}50%{transform:translate(9px,-14px)}}
@keyframes answer-write{0%,10%,100%{transform:scaleX(.35)}45%,82%{transform:scaleX(1)}}
@keyframes core-cycle{0%,15%{transform:rotate(0)}40%,65%{transform:rotate(90deg)}90%,100%{transform:rotate(180deg)}}
@keyframes review-rise{0%,20%,100%{transform:translateY(8px)}55%,80%{transform:translateY(-8px)}}
@keyframes source-travel{0%,10%{transform:translate(-40px,0);opacity:0}20%{opacity:1}38%{transform:translate(28px,0)}55%{transform:translate(28px,42px);opacity:1}65%,100%{transform:translate(80px,42px);opacity:0}}
@keyframes flow-line{to{stroke-dashoffset:-128}}
@keyframes node-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes port-glow{0%,100%{opacity:.5}50%{opacity:1}}
.benefit-motion{display:grid;place-items:center;background:#e8e2f8;margin-bottom:28px;min-height:180px;overflow:hidden}
.benefit-motion svg{width:100%;max-width:360px;height:auto;stroke:#6045cf;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.benefit-motion svg rect,.benefit-motion svg circle{fill:#f5f2e9}
.benefit-motion svg .mini-dot{fill:#6045cf}
.motion-started .mini-lift{animation:mini-lift 8s ease-in-out infinite}
.motion-started .mini-shift{animation:mini-shift 8s ease-in-out infinite}
.motion-started .late{animation-delay:-2.6s}.motion-started .later{animation-delay:-5.2s}
.motion-started .mini-flow{stroke-dasharray:5 10;animation:mini-flow 3s linear infinite}
.motion-started .mini-trace{stroke-dasharray:500;animation:mini-trace 8s ease-in-out infinite}
.motion-started .mini-search{animation:mini-search 8s ease-in-out infinite}
.motion-started .mini-scan{animation:mini-scan 8s ease-in-out infinite}
.motion-started .mini-ring{transform-origin:160px 90px;animation:mini-ring 8s ease-in-out infinite}
@keyframes mini-lift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes mini-shift{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}
@keyframes mini-flow{to{stroke-dashoffset:-60}}
@keyframes mini-trace{0%,100%{stroke-dashoffset:500}45%,75%{stroke-dashoffset:0}}
@keyframes mini-search{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,12px)}}
@keyframes mini-scan{0%,100%{transform:translateX(-80px)}50%{transform:translateX(80px)}}
@keyframes mini-ring{0%,100%{transform:scale(.9)}50%{transform:scale(1.1)}}
[data-motion-scene] *{animation-play-state:paused!important}
[data-motion-scene].motion-running *{animation-play-state:running!important}
@media(hover:hover){[data-motion-scene]:hover *{animation-play-state:paused!important}}
[data-motion-scene]:focus *{animation-play-state:paused!important}
.svc-section-head>.svc-kicker{font-size:22px;color:#6045cf}.svc-method .svc-kicker{color:#c4b7ff}
@media(max-width:1100px){.service-story{grid-template-columns:1fr}.service-story .svc-hero-copy{padding:30px 32px 48px;gap:35px}.service-story h1{font-size:clamp(50px,7vw,76px)}.service-story .svc-hero-copy>div{max-width:760px}.service-story .svc-lead{max-width:600px}.motion-stage{min-height:0;padding:0}.service-art{max-width:740px}}
@media(max-width:600px){.service-story .svc-hero-copy{padding:26px 20px 36px;gap:30px}.service-story h1{font-size:clamp(38px,9.5vw,55px);letter-spacing:-.05em;margin-bottom:26px}.service-promise{font-size:26px}.service-story .svc-lead{font-size:17px}.service-art text{font-size:29px}.service-art .api-label{font-size:34px}.service-art{width:100%;height:auto}.motion-stage{padding:16px 0}.svc-section-head>.svc-kicker{font-size:20px}.benefit-motion{margin-bottom:22px}}
@media(prefers-reduced-motion:reduce){[data-motion-scene] *{animation:none!important}.source-token{opacity:0}.priority-card .check-mark{stroke-dashoffset:0}}