/* projects-markets.html — page-specific styles.
   Distinct treatment: the project development process is a connected vertical
   timeline, with the stage nearest the viewport center highlighted as you
   scroll (see projects-markets.js). */

.stage-list{ position: relative; }
.stage-list::before{
  content: '';
  position: absolute;
  left: 44px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--line);
}
.stage-list .stage-num{
  position: relative;
  z-index: 1;
  background: var(--white);
  padding-right: 6px;
  transition: color 0.3s ease, transform 0.3s ease;
}
.bg-light .stage-list .stage-num{ background: var(--light); }
.stage-row.is-current .stage-num{
  color: var(--navy);
  transform: scale(1.18);
}
.stage-row.is-current h4{ color: var(--green-deep); }
.stage-row{ transition: opacity 0.3s ease; }