/* Keep all services visible; motion only enhances the existing cards. */
#services .service-card{position:relative;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background-color .25s ease}
#services .service-symbol{width:fit-content;min-width:56px;padding:0 10px;color:var(--blue);transition:transform .25s ease}
#services .service-card h3,#services .service-note{transition:color .25s ease}
#services .service-note span{display:inline-block;transition:transform .25s ease}
#services .service-card:focus-within{border-color:#a9baff;background:#f8faff;box-shadow:0 14px 32px #3357f614}
@media(hover:hover) and (pointer:fine){
#services .service-card:hover{transform:translateY(-7px);border-color:#a9baff;background:#f8faff;box-shadow:0 18px 38px #3357f61a}
#services .service-card:hover .service-symbol{transform:translateY(-3px)}
#services .service-card:hover h3,#services .service-card:hover .service-note{color:var(--blue)}
#services .service-card:hover .service-note span{transform:translate(4px,-3px)}
}
@media(prefers-reduced-motion:reduce){
#services .service-card,#services .service-symbol,#services .service-card h3,#services .service-note,#services .service-note span{transition:none}
#services .service-card:hover,#services .service-card:hover .service-symbol,#services .service-card:hover .service-note span{transform:none}
}