/* Nomad VAs service cards: muted flat illustrations with restrained hover motion.
   Used by the homepage "What we staff" grid and the /services role cards.
   Artwork is inline SVG (aria-hidden). Everything is fully visible at rest; motion only plays
   once on pointer hover or keyboard focus, and not at all with prefers-reduced-motion. */
.svc-art {
  --sc-clay: #BA8B65; --sc-sage: #A2AA90; --sc-peach: #EED9C4; --sc-peach2: #F3E1D0;
  --sc-ivory: #FFF9EE; --sc-gray: #B9B5A8; --sc-gray2: #E8DFCF; --sc-dark: #35302B;
  width: 100%; aspect-ratio: 320 / 190; line-height: 0; flex: none;
}
.svc-art svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.svc-art .p { fill: var(--sc-peach); }   .svc-art .p2 { fill: var(--sc-peach2); }
.svc-art .k { fill: var(--sc-clay); }    .svc-art .s { fill: var(--sc-sage); }
.svc-art .i { fill: var(--sc-ivory); }   .svc-art .g { fill: var(--sc-gray); }
.svc-art .g2 { fill: var(--sc-gray2); }  .svc-art .d { fill: var(--sc-dark); }
.svc-art .ks { stroke: var(--sc-clay); fill: none; }
.svc-art .ci { fill: none; stroke: var(--sc-ivory); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.svc-art .cis { stroke: var(--sc-ivory); }
.svc-art .cs path { fill: none; stroke: var(--sc-ivory); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.svc-art .chk, .svc-art .a-tile, .svc-art .a-cal, .svc-art .a-pencil, .svc-art .a-a, .svc-art .a-b,
.svc-art .a-cursor, .svc-art .a-badge, .svc-art .a-cross, .svc-art .a-reply, .svc-art .a-mag { transform-box: fill-box; transform-origin: center; }
.svc-art .a-hl { transform-box: fill-box; transform-origin: left center; }
.svc-art .a-hand { transform-origin: 238px 70px; }

/* focus indicators: the Explore link on the homepage, the whole card on /services */
.svc-card a:focus-visible, a.svc-card:focus-visible { outline: 2px solid #8C5D3C; outline-offset: 3px; border-radius: 12px; }
a.svc-card:focus-visible { border-radius: 28px; }

@keyframes svc-pop { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes svc-slide { from { opacity: .55; transform: translate(10px, 5px); } to { opacity: 1; transform: none; } }
@keyframes svc-grow { from { transform: scaleX(.55); } to { transform: scaleX(1); } }
@keyframes svc-draw { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .svc-art .a-mag, .svc-art .a-tile, .svc-art .a-cal, .svc-art .a-pencil, .svc-art .a-a, .svc-art .a-b,
  .svc-art .a-cursor, .svc-art .a-badge, .svc-art .a-cross, .svc-art .a-hand { transition: transform .7s cubic-bezier(.22,.61,.36,1), opacity .5s ease; }
  .svc-art .a-tile .tile, .svc-art .a-mark { transition: fill .5s ease; }
  .svc-card:focus-within .a-mag { transform: translate(-16px, 8px); }
  .svc-card:focus-within .a-tile { transform: translateY(-3px); }
  .svc-card:focus-within .a-tile .tile { fill: #F6E4D1; }
  .svc-card:focus-within .a-reply { animation: svc-slide .6s cubic-bezier(.22,.61,.36,1) both; }
  .svc-card:focus-within .a-cal { transform: translateY(-4px); }
  .svc-card:focus-within .a-mark { fill: #A2AA90; }
  .svc-card:focus-within .a-pencil { transform: translate(-7px, 3px) rotate(-3deg); }
  .svc-card:focus-within .a-hl { animation: svc-grow .75s cubic-bezier(.22,.61,.36,1) both; }
  .svc-card:focus-within .a-a { opacity: .8; transform: translateY(2px); }
  .svc-card:focus-within .a-b { transform: translateY(-4px); }
  .svc-card:focus-within .a-cursor { transform: translate(9px, -5px); }
  .svc-card:focus-within .a-hand { transform: rotate(40deg); }
  .svc-card:focus-within .a-path { animation: svc-draw .85s linear both; }
  .svc-card:focus-within .a-badge { transform: scale(1.06); }
  .svc-card:focus-within .a-cross { transform: scale(1.06); }
  .svc-card:focus-within .chk { animation: svc-pop .5s ease-out var(--d, 0s) both; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .svc-card:hover .a-mag { transform: translate(-16px, 8px); }
  .svc-card:hover .a-tile { transform: translateY(-3px); }
  .svc-card:hover .a-tile .tile { fill: #F6E4D1; }
  .svc-card:hover .a-reply { animation: svc-slide .6s cubic-bezier(.22,.61,.36,1) both; }
  .svc-card:hover .a-cal { transform: translateY(-4px); }
  .svc-card:hover .a-mark { fill: #A2AA90; }
  .svc-card:hover .a-pencil { transform: translate(-7px, 3px) rotate(-3deg); }
  .svc-card:hover .a-hl { animation: svc-grow .75s cubic-bezier(.22,.61,.36,1) both; }
  .svc-card:hover .a-a { opacity: .8; transform: translateY(2px); }
  .svc-card:hover .a-b { transform: translateY(-4px); }
  .svc-card:hover .a-cursor { transform: translate(9px, -5px); }
  .svc-card:hover .a-hand { transform: rotate(40deg); }
  .svc-card:hover .a-path { animation: svc-draw .85s linear both; }
  .svc-card:hover .a-badge { transform: scale(1.06); }
  .svc-card:hover .a-cross { transform: scale(1.06); }
  .svc-card:hover .chk { animation: svc-pop .5s ease-out var(--d, 0s) both; }
}