/* Services — V3.0 design (Figma 33:6607).
   Unit name and description on the left, its numbered services on the right. */

.sv-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

/* One padded block around both units rather than a padded section each: two
   adjacent sections on the same cream double their lead-ins into a gap that
   reads as a hole. The rule between them does the separating instead. */
.sv-units { padding-block: var(--space-8); }

.su-unit { padding-block: var(--space-6); }

.su-unit.has-rule {
  border-block-start: 1px solid var(--line);
  margin-block-start: var(--space-6);
}

.su-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-6);
}

.su-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.su-line {
  margin: var(--space-3) 0 0;
  max-inline-size: 46ch;
  color: rgb(5 50 37 / 0.78);
}

.su-rows {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Deliberately not links and not interactive — no hover, no pointer, nothing
   that invites a click. The detail pages still exist and are still reachable
   from search and the sitemap; this page just does not point at them. */
.su-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.su-num {
  /* A fixed column, not just tabular figures: the brand face has no tabular
     set, so 01 and 04 render at different widths and the names step in and out
     by a couple of pixels down the list. */
  flex: none;
  inline-size: 2.6ch;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
  color: var(--green-600);
  font-variant-numeric: tabular-nums;
}

.su-name {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

/* ----------------------------------------------------------- Responsive --- */

@media (max-width: 60rem) {
  .su-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
}

@media (max-width: 48rem) {
  .sv-hero-actions .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; }
  .su-rows { gap: var(--space-2); }
}