/* Independent layers: the hit target stays still while its contents move. */
.magnetic-card { perspective: 1100px; transform: none !important; isolation: auto; border: 0; outline: none; box-shadow: none; }
.magnetic-card:hover { border: 0; outline: none; box-shadow: none; }
.magnetic-card:focus-visible { outline: 2px solid #fff; outline-offset: 8px; box-shadow: none; }
.service-surface { position: absolute; inset: 0; transform-style: preserve-3d; border-radius: 8px; }
.magnetic-card .service-bg { transform: translateZ(0); border: 0; }
.magnetic-card .service-bg img { filter: blur(3px) saturate(.85); opacity: .65; transform: scale(1.08); }
.magnetic-card .service-bg:after { background: linear-gradient(180deg, #080d0f08 15%, #080d0f44 45%, #080d0fe8 74%, #080d0f 100%); }
.magnetic-card.branding .service-bg { background: #77264f; }
.magnetic-card.packaging .service-bg { background: #b46a19; }
.magnetic-card.advertising .service-bg { background: #081b42; }
.magnetic-card.advertising .service-bg img { object-position: 52% 35%; filter: blur(.5px); opacity: .9; }
.magnetic-card .service-art,
.magnetic-card.packaging .service-art,
.magnetic-card.advertising .service-art { left: 24px; right: 24px; width: auto; top: -44px; height: 70%; transform: translateZ(48px); transition: none; filter: drop-shadow(0 16px 10px #0004); }
.magnetic-card .service-art .service-product { object-fit: contain; overflow: visible; }
.magnetic-card.packaging .service-art { top: -32px; height: 67%; }
.magnetic-card.advertising .service-art { top: -80px; height: 54%; left: 15%; right: 15%; filter: drop-shadow(2px 4px 0 #111c26) drop-shadow(0 22px 18px #0008); }
.service-shadow { position: absolute; top: 58%; left: 23%; width: 54%; height: 24px; border-radius: 50%; background: #000; filter: blur(14px); opacity: .36; pointer-events: none; }
.advertising .service-shadow { top: 47%; }
.magnetic-card .service-caption { transform: translateZ(24px); pointer-events: none; }
.magnetic-card .service-plus { transform: translateZ(28px); }
.magnetic-card:hover .service-plus { transform: translateZ(28px) rotate(45deg); }
.magnetic-card:focus-visible .service-plus { background: #fff; color: #080d0f; }
@media (max-width: 900px) {
  .service-cards { gap: 104px; }
  .magnetic-card .service-art { top: -40px; height: 68%; }
  .magnetic-card.packaging .service-art { top: -30px; height: 65%; }
  .magnetic-card.advertising .service-art { top: -70px; height: 54%; }
}
@media (prefers-reduced-motion: reduce) {
  .service-surface, .magnetic-card .service-art, .magnetic-card .service-bg img,
  .service-shadow, .magnetic-card .service-plus { transform: none !important; }
}
.motion-quiet .service-surface, .motion-quiet .magnetic-card .service-art,
.motion-quiet .magnetic-card .service-bg img, .motion-quiet .service-shadow { transform: none !important; }