/* The approved 3D artwork is limited to the five homepage service items. */
#services .home-service-item:has(.jvds-icon3d) {
  --home-service-icon-size: calc(64px * 4 / 3);
  --home-service-icon-gap: 22px;
  --home-service-text-inset: calc(var(--home-service-icon-size) + var(--home-service-icon-gap));
}
#services .home-service-toggle:has(.jvds-icon3d) {
  grid-template-columns: var(--home-service-icon-size) minmax(0, 1fr) 36px;
  column-gap: var(--home-service-icon-gap);
}
#services .home-service-toggle:has(.jvds-icon3d) .icon,
#services .home-service-toggle img.jvds-icon3d {
  width: var(--home-service-icon-size);
  height: var(--home-service-icon-size);
}
#services .home-service-toggle img.jvds-icon3d{display:block;flex:0 0 auto;max-width:none;object-fit:contain;pointer-events:none;user-select:none;transform-origin:50% 62%;transition:transform .32s cubic-bezier(.22,1,.36,1),filter .32s ease;animation:jvds-home-service-icon-enter .65s cubic-bezier(.22,1,.36,1) backwards}
#services .home-service-toggle:is(:hover,:focus-visible) img.jvds-icon3d{transform:translateY(-3px) rotate(-3deg);filter:drop-shadow(0 4px 3px rgb(0 0 0 / .08))}
@keyframes jvds-home-service-icon-enter{from{opacity:0;transform:translateY(5px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (min-width: 801px) and (max-width: 1280px) {
  #services .home-service-item:has(.jvds-icon3d) { --home-service-icon-gap: 16px; }
}
@media(max-width:800px){
  #services .home-service-item:has(.jvds-icon3d) {
    --home-service-icon-size: calc(56px * 4 / 3);
    --home-service-icon-gap: 14px;
  }
  #services .home-service-toggle:has(.jvds-icon3d) { grid-template-columns: var(--home-service-icon-size) minmax(0, 1fr) 32px; }
}
@media(prefers-reduced-motion:reduce){#services .home-service-toggle img.jvds-icon3d{animation:none;transition:none}#services .home-service-toggle:is(:hover,:focus-visible) img.jvds-icon3d{transform:none;filter:none}}