/* ==========================================================================
   /services/ hub. Loaded after main.css, challenges.css and
   specialties-hub.css (hero, cards, group headers, proof, report band, FAQ
   and link lists come from there). This file only adds the step number in
   each group header and the group's one-line intro, with :root tokens.
   ========================================================================== */

.svh-page .sh-group-h { display: flex; align-items: baseline; gap: 14px; }
.svh-step {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); color: var(--ink);
  font-family: var(--sans); font-weight: 500; font-size: 14px; line-height: 1;
  transform: translateY(-3px);
}
.svh-group-sub {
  margin: -6px 0 4px; max-width: var(--measure-text);
  font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.5; color: var(--muted);
}
/* The service heroes keep their subject centre-right; a gentler crop than the specialty cards. */
.svh-page .sh-card-img img { object-position: 70% 40%; }

@media (max-width: 768px) {
  .svh-step { width: 28px; height: 28px; font-size: 13px; transform: translateY(-2px); }
  .svh-group-sub { margin: -4px 0 2px; font-size: 15px; }
}

/* Hero: keep the lede left of the subject (she stands centre-right). */
@media (min-width: 1025px) {
  .svh-hero .ch-hero-sub { max-width: 540px; }
}