/* ============================================================
   ALIFY — services-hub.css · /services overview page
   (row list visuals live in home.css: .svc-index / .svc-hub)
   ============================================================ */

.hub-hero { padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)); }
.hub-hero__grid { display: grid; gap: 2.5rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 1024px) {
  .hub-hero__grid { grid-template-columns: repeat(12, 1fr); align-items: end; }
  .hub-hero__lead { grid-column: 1 / 8; }
  .hub-hero__aside { grid-column: 9 / 13; justify-self: end; text-align: right; }
}
.hub-hero__count { font-family: var(--ff-display); font-size: clamp(3rem, 7vw, 5rem); font-weight: 600; color: transparent; -webkit-text-stroke: 1px rgba(12,220,42,.6); line-height: 1; }
.hub-hero__count small { display: block; -webkit-text-stroke: 0; color: var(--muted); font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; margin-top: .5rem; }

/* capability strip */
.cap-strip { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .cap-strip { grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); } }
.cap {
  background: var(--bg);
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
@media (min-width: 1024px) { .cap { border: 0; border-radius: 0; } }
.cap .ph, .cap .ph-duotone { display: block; font-size: 1.7rem; color: var(--teal-2); margin-bottom: 1.1rem; }
.cap:nth-child(2) .ph, .cap:nth-child(2) .ph-duotone { color: var(--green); }
.cap:nth-child(3) .ph, .cap:nth-child(3) .ph-duotone { color: var(--sand); }
.cap:nth-child(4) .ph, .cap:nth-child(4) .ph-duotone { color: var(--sage-2); }
.cap__title { font-family: var(--ff-display); font-weight: 600; font-size: 1.05rem; color: var(--off); margin-bottom: .5rem; }
.cap__text { font-size: .86rem; color: var(--muted); line-height: 1.55; }