/* ============================================================
   services.css — additive styles for service hub / overview pages
   main.css and main.js are READ-ONLY; every new rule lives here.
   Scope: decorative illustration slot + hub two-column layout only.
   ============================================================ */

/* Decorative SVG illustration (aria-hidden, alt=""). Real photos stay placeholders. */
.service-illustration {
  margin: var(--sp-6) 0 0;
}
.service-illustration__img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-card);
}

/* Hub / overview intro: text + decorative illustration side by side on wide screens */
.hub-intro {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}
@media (min-width: 60rem) {
  .hub-intro {
    grid-template-columns: 1.25fr 1fr;
  }
  .hub-intro .service-illustration {
    margin-top: 0;
  }
}