/* ============================================================
   40 — CONTACT ROW
   Scope: .supc*
   ============================================================ */

.supc__head { max-width: 58ch; margin-block-end: var(--s-9); }

.supc__title { font-size: var(--fs-h2); max-width: 22ch; }

.supc__note {
  margin-block-start: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--text-body);
}

.supc__grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.supc__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-7);
  border-radius: var(--r-lg);
  background: var(--surface);
  /* Hairline first, elevation second — the ring is what reads at rest. */
  box-shadow: inset 0 0 0 1px var(--border), var(--sh-xs);
  transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.supc__card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-brand) 34%, transparent), var(--sh-md);
}

.supc__ico {
  width: var(--s-7);
  height: var(--s-7);
  color: var(--c-brand);
  margin-block-end: var(--s-2);
}

/* The response time is the headline fact, so it sits above the name. */
.supc__eta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-brand-press);
}

.supc__dot {
  width: var(--s-2);
  height: var(--s-2);
  border-radius: var(--r-pill);
  background: var(--c-brand);
  flex: none;
}

.supc__t { font-size: var(--fs-h4); }

.supc__b {
  font-size: var(--fs-sm);
  color: var(--text-body);
}

/* Pushed to the foot so all three links align across the row. */
.supc__link {
  margin-block-start: auto;
  padding-block-start: var(--s-4);
  overflow-wrap: anywhere;
}