/* CrewSix visual pass — service card hover/focus (W2 tokens)
   Pair with .card.svc markup that includes .svc-visual (bg SVG) and .icon-tile img/svg.
*/
.card.svc{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:20px;
  border-radius:var(--r-card,16px);
  background:var(--cs-surface,#fff);
  border:1px solid var(--cs-line,rgba(15,23,42,.12));
  box-shadow:var(--sh-1,0 1px 2px rgba(15,23,42,.06),0 2px 8px rgba(15,23,42,.06));
  transition:transform var(--dur,150ms) var(--ease,cubic-bezier(.2,.7,.2,1)),
             box-shadow var(--dur,150ms) var(--ease,cubic-bezier(.2,.7,.2,1)),
             border-color var(--dur,150ms) var(--ease,cubic-bezier(.2,.7,.2,1));
}
@media (min-width:1024px){.card.svc{padding:28px}}
.card.svc .svc-visual{
  position:absolute; inset:0 0 auto auto;
  width:min(55%,220px); height:auto; aspect-ratio:2 / 1; max-height:140px;
  pointer-events:none; z-index:0;
  opacity:.95;
  transition:transform var(--dur,150ms) var(--ease,cubic-bezier(.2,.7,.2,1)),
             opacity var(--dur,150ms) var(--ease,cubic-bezier(.2,.7,.2,1));
}
.card.svc .svc-visual img,
.card.svc .svc-visual svg{width:100%;height:100%;object-fit:contain;display:block}
.card.svc > *:not(.svc-visual){position:relative;z-index:1}
.card.svc .icon-tile{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-tile,12px);
  background:var(--cs-blue-tint,#e0ebff);color:var(--cs-blue,#0052cc);
  transition:transform var(--dur,150ms) var(--ease,cubic-bezier(.2,.7,.2,1)),
             background var(--dur,150ms) var(--ease,cubic-bezier(.2,.7,.2,1));
}
.card.svc .icon-tile svg,.card.svc .icon-tile img{width:22px;height:22px}
a.card.svc:hover,
a.card.svc:focus-visible,
.card.svc.is-interactive:hover,
.card.svc:focus-within{
  transform:translateY(-4px);
  box-shadow:var(--sh-2,0 4px 12px rgba(15,23,42,.10),0 12px 32px rgba(0,82,204,.10));
  border-color:var(--cs-border-strong,#64748b);
}
a.card.svc:hover .svc-visual,
a.card.svc:focus-visible .svc-visual,
.card.svc:focus-within .svc-visual{
  transform:translate(-6px,-4px) scale(1.04);
  opacity:1;
}
a.card.svc:hover .icon-tile,
a.card.svc:focus-visible .icon-tile,
.card.svc:focus-within .icon-tile{
  transform:scale(1.08);
  background:#cfdffb;
}
a.card.svc:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring,0 0 0 2px #fff,0 0 0 5px #0052cc)}
@media (prefers-reduced-motion:reduce){
  .card.svc,
  .card.svc .svc-visual,
  .card.svc .icon-tile{transition:none}
  a.card.svc:hover,
  a.card.svc:focus-visible,
  .card.svc:focus-within{transform:none}
  a.card.svc:hover .svc-visual,
  a.card.svc:focus-visible .svc-visual,
  .card.svc:focus-within .svc-visual{transform:none}
  a.card.svc:hover .icon-tile,
  a.card.svc:focus-visible .icon-tile,
  .card.svc:focus-within .icon-tile{transform:none}
}