/* Service mechanisms: retain the original white cards and brand palette. */
#services .service-card-visual{grid-template-columns:minmax(0,1fr) minmax(180px,.95fr);grid-template-areas:"code visual" "title visual" "copy visual" "link visual";column-gap:24px;min-height:260px;padding:28px 30px}
#services .service-card-visual h3{font-size:clamp(23px,1.8vw,29px);line-height:1.3;margin:16px 0 12px;text-wrap:balance}
#services .service-card-visual>p{font-size:14px;line-height:1.8;max-width:28em}
#services .service-link{font-size:13px;margin-top:22px}
#services .service-scene{grid-area:visual;align-self:center;border-radius:18px;background:linear-gradient(145deg,#edf8fd,#f5fafc);padding:4px;overflow:hidden;pointer-events:none}
#services .service-scene svg{display:block;width:100%;height:auto;max-height:210px;font-family:inherit}
#services .sv-paper{fill:#fff;filter:drop-shadow(0 3px 4px #2049560c)}
#services .sv-wash{fill:#e8f6fc}
#services .sv-faint{fill:#cce4ef}
#services .sv-blue,#services .sv-dot{fill:#009fe8}
#services .sv-solid{fill:#78cbed}
#services .sv-title{fill:#224753;font-size:14px;font-weight:650}
#services .sv-copy{fill:#536e7b;font-size:12px}
#services .sv-caption{fill:#658290;font-size:12px}
#services .service-card-visual:after{width:110px;height:110px;top:-80px;right:-40px}
#services .service-card-visual{animation:service-phase 12s ease-in-out infinite;animation-delay:calc(var(--service-order)*3s)}
#services .sv-result{animation:service-result 7s ease-in-out infinite}
#services .sv-star{transform-origin:47px 51px;animation:service-star 6s ease-in-out infinite}
#services .sv-step{animation:service-step 6s ease-in-out infinite}
#services .sv-step-b{animation-delay:1s}#services .sv-step-c{animation-delay:2s}
@keyframes service-phase{0%,24%,100%{border-color:rgba(113,155,176,.16)}5%,18%{border-color:#79cbee}}
@keyframes service-result{0%,100%{transform:translateY(0)}45%,65%{transform:translateY(-5px)}}
@keyframes service-star{0%,100%{opacity:.7;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@keyframes service-step{0%,70%,100%{opacity:.7}25%,45%{opacity:1}}
#services .service-card-visual:hover .service-scene{background:#e9f7fe}
@media(min-width:721px) and (max-width:1080px){#services .service-layout{grid-template-columns:1fr;gap:30px}#services .service-intro{position:static;max-width:640px}#services .service-intro .section-lede{max-width:540px}#services .service-connect{margin-top:24px}#services .small-note{margin-top:16px}}
@media(max-width:720px){
 #services .service-card-visual{grid-template-columns:1fr;grid-template-areas:"code" "title" "copy" "visual" "link";padding:24px;border-radius:26px;min-height:0}
 #services .service-card-visual h3{font-size:25px;margin:14px 0 10px}
 #services .service-scene{margin-top:20px;width:100%;padding:2px 10px}
 #services .service-scene svg{height:156px;max-height:none}
 #services .service-link{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){#services .service-card-visual,#services .service-scene *{animation:none!important;transition:none!important}}