/* One drawing system: fine outlines, restrained copper accents and geometric frames. */
#services .service-card {
  --illustration-size: clamp(96px, 8vw, 152px);
  --illustration-accent: #a85f45;
}
#services .service-card:is(:nth-child(4n + 1), :nth-child(4n)) {
  --illustration-accent: #d18e70;
}
#services .service-illustration {
  position: absolute;
  right: clamp(30px, 3vw, 42px);
  top: 146px;
  width: var(--illustration-size);
  height: auto;
  overflow: visible;
  color: inherit;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
#services .service-illustration :is(path, rect, circle) { vector-effect: non-scaling-stroke; }
#services .service-illustration .illustration-orbit {
  opacity: .1;
  stroke-width: 1;
  stroke-dasharray: 2 7;
}
#services .service-illustration .illustration-muted { opacity: .3; }
#services .service-illustration .illustration-surface { fill: var(--service-rest-background); }
#services .service-illustration .illustration-tint { fill: currentColor; fill-opacity: .07; }
#services .service-illustration .illustration-dot { fill: currentColor; stroke: none; }
#services .service-illustration .illustration-accent { stroke: var(--illustration-accent); }
#services .service-illustration .illustration-accent-fill { fill: var(--illustration-accent); stroke: var(--illustration-accent); }
#services .service-illustration .illustration-accent-surface {
  fill: var(--service-rest-background);
  stroke: var(--illustration-accent);
}
#services .service-illustration .illustration-main { transition: transform .35s ease; }
#services .service-card h3,
#services .service-card p {
  max-width: calc(100% - var(--illustration-size) - 12px);
}
#services .service-card .service-icon { font-size: 18px; }
#services .service-card:focus-visible {
  --illustration-accent: var(--navy, #152531);
}
#services .service-card:focus-visible .illustration-surface,
#services .service-card:focus-visible .illustration-accent-surface {
  fill: var(--copper, #a85f45);
}
@media (hover: hover) and (pointer: fine) {
  #services .service-card:hover { --illustration-accent: var(--navy, #152531); }
  #services .service-card:hover .illustration-surface,
  #services .service-card:hover .illustration-accent-surface { fill: var(--copper, #a85f45); }
  #services .service-card:hover .illustration-main { transform: translateY(-3px); }
}
/* Compact cards give the drawing a dedicated area above the copy. */
@media (min-width: 651px) and (max-width: 1100px), (max-width: 549px) {
  #services .service-card .service-illustration {
    top: 61px;
    right: 26px;
    width: 88px;
  }
  #services .service-card h3 {
    max-width: none;
    margin-top: 98px;
  }
  #services .service-card p { max-width: none; }
  #services .service-card .service-icon {
    top: 24px;
    right: 26px;
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
}
@media (max-width: 650px) {
  #services .service-card:nth-child(n) { --illustration-accent: #a85f45; }
  #services .service-card:nth-child(odd) { --illustration-accent: #d18e70; }
  #services .service-card .service-illustration { width: 88px; right: 26px; }
  #services .service-card:focus-visible { --illustration-accent: var(--navy, #152531); }
}
@media (prefers-reduced-motion: reduce) {
  #services .service-illustration .illustration-main { transition: none; transform: none !important; }
}

@media (hover: hover) and (pointer: fine) {
  #services .service-card:nth-child(n):hover { --illustration-accent: var(--navy, #152531); }
}