/* =========================================================
   Process page — Requirement-to-Specification Process,
   Procurement Governance, Delivery & Fulfillment Support
   ========================================================= */

/* ---------- requirement-to-specification hero ---------- */
.process-steps-graphic { margin-top: var(--sp-7); }
.process-steps-graphic img { width: 100%; height: auto; }

.process-stage-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.process-stage {
  background: var(--c-bg);
  border: 1px solid var(--c-card-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.process-stage:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--c-orange); }
.process-stage__num {
  display: block;
  font-size: var(--fs-5);
  font-weight: 800;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--c-orange-text);
}
.process-stage__title { margin-top: var(--sp-1); font-size: var(--fs-3); font-weight: 700; color: var(--c-ink); line-height: 1.3; }
.process-stage__text { margin-top: var(--sp-2); font-size: var(--fs-4); color: var(--c-muted); line-height: 1.5; }

.process-hero__closing { margin-top: var(--sp-7); max-width: 60ch; }

@media (max-width: 900px) {
  .process-stage-grid { grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-6); }
  .process-stage {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--sp-4);
    align-items: start;
    padding: var(--sp-4) var(--sp-5);
  }
  .process-stage__num { grid-row: 1 / 3; padding-top: .2rem; }
  .process-stage__title { margin-top: 0; }
  .process-stage__text { grid-column: 2; margin-top: var(--sp-2); }
}