/* ==========================================================================
   Process Timeline — reused on Home (compact) and the Process page (full)
   ========================================================================== */

.timeline { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) {
  .timeline--horizontal { grid-template-columns: repeat(4, 1fr); }
}
.timeline__step { position: relative; }
.timeline__number {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--color-gold-500);
  margin-bottom: var(--space-2);
}
.timeline__step h3 { font-size: 1.05rem; margin-bottom: 4px; }
.timeline__step p { font-size: var(--fs-ui); color: var(--color-text-secondary); }

/* --- Vertical variant: credential timeline (About page) --- */
.timeline--vertical {
  position: relative;
  max-width: 60ch;
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--color-border);
}
.timeline--vertical .timeline__step { padding-bottom: var(--space-5); }
.timeline--vertical .timeline__step::before {
  content: "";
  position: absolute;
  right: calc(-1 * var(--space-5) - 6px);
  top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--color-gold-500);
  border: 2px solid var(--color-white);
}
.timeline--vertical .timeline__number { font-size: 0.95rem; margin-bottom: 4px; }