/* ==========================================================================
   TIMELINE STEPS & NAVIGATION RAIL
   ========================================================================== */
.route-head { 
  display: flex; 
  justify-content: space-between; 
  align-items: baseline; 
  margin-bottom: 24px; 
}

.route-head h2 { 
  font-size: 1.3rem; 
}

.route-head span { 
  font-size: 0.8rem; 
  color: rgba(30, 76, 97, 0.5); 
  font-weight: 700; 
}

.step { 
  display: grid; 
  grid-template-columns: 24px 1fr; 
  column-gap: 20px; 
}

.step .rail { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
}

.step .dot {
  width: 12px; 
  height: 12px; 
  border-radius: 50%;
  background: var(--coral);
  outline: 4px solid rgba(245, 165, 142, 0.2);
  margin-top: 6px;
  flex-shrink: 0;
}

.step .thread { 
  width: 2px; 
  flex: 1; 
  background: rgba(245, 165, 142, 0.3); 
  margin: 6px 0; 
  border-radius: 2px; 
}

.step:last-child .thread { 
  display: none; 
}

.step-body { 
  padding-bottom: 36px; 
}

.step-body h3 { 
  font-size: 1.1rem; 
  margin-bottom: 8px; 
  color: var(--navy); 
}

.step-body p { 
  margin: 0 0 16px; 
  font-size: 0.95rem; 
  color: rgba(44, 62, 80, 0.8); 
}