/* =========================================================
   SERVICE DETAIL PAGE — CAPABILITIES SECTION
   Editorial index: oversized numerals in a two-column list.
   ========================================================= */

.sd-capabilities {
  background: #ffffff;
  padding: clamp(48px, 6vw, 90px) 0;
}

.sd-capabilities--mobile-app .sd-section-title {
  font-size: clamp(20px, 3.4vw, 42px);
  white-space: pre-line;
}

.sd-cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(32px, 5vw, 88px);
  border-top: 1px solid #17173a;
}

.sd-cap-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 2.5vw, 36px);
  align-items: start;
  padding: clamp(30px, 3.5vw, 48px) 0;
  border-bottom: 1px solid #e4e7ef;
  transition: opacity 0.25s ease;
}

.sd-cap-item:hover {
  opacity: 0.6;
}

.sd-cap-num {
  font-family: "Geist", "Inter", sans-serif;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: #c7cddc;
}

.sd-cap-heading {
  margin: 0 0 12px;
  font-family: "Geist", "Inter", sans-serif;
  font-size: clamp(21px, 2.1vw, 28px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: #17173a;
  text-wrap: balance;
}

.sd-cap-text {
  margin: 0;
  max-width: 42ch;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #57576a;
}

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

@media (max-width: 860px) {
  .sd-cap-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-cap-item {
    transition: none;
  }
}

/* ---------- Tighter join with the overview section above ----------
   Service detail pages only: the generated pages hardcode the
   two sections as siblings (.wdi-section + .sd-capabilities),
   while service-detail/index.html injects them into adjacent
   #svc-detail-* containers. The innovation detail page shares
   these classes but matches neither pattern, so it is unchanged. */

.wdi-section + .sd-capabilities,
#svc-detail-capabilities .sd-capabilities {
  padding-top: clamp(28px, 4vw, 52px);
}