/* =========================================================
   About / 20 years section
   ========================================================= */

.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.about-copy p + p { margin-top: 1.1rem; }
.about-copy { color: var(--ink-soft); }

.about-copy .callout {
  margin-top: 1.75rem;
  padding-inline-start: 1.1rem;
  border-inline-start: 3px solid var(--red);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-lead);
}

/* Timeline spine: same visual language as the hero pulse-line,
   oriented vertically, marking only the two true endpoints so we
   are not inventing history that wasn't given. */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
  padding-inline-start: 2.4rem;
}

.timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: 8px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--red), var(--red-deep));
}

.timeline-item { position: relative; }

.timeline-item::before {
  content: "";
  position: absolute;
  inset-inline-start: -2.4rem;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--red);
}

.timeline-item h3 {
  font-size: 1.05rem;
  font-weight: 700;
}

.timeline-item p {
  margin-top: 0.35rem;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}

@media (max-width: 860px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-grid > *:first-child { order: 2; }
  .about-grid > *:last-child { order: 1; }
}