.j-grid { margin-top: 30px; position: relative; padding-left: 8px; }
.j-line {
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}
.j-line .fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: var(--gold);
  transition: height .1s linear;
}

.j-step {
  position: relative;
  padding: 0 0 82px 64px;
  opacity: .38;
  transition: opacity .5s ease;
}
.j-step:last-child { padding-bottom: 0; }
.j-step.active { opacity: 1; }

.j-step .node {
  position: absolute;
  left: -5px;
  top: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--line);
  transition: background .4s, border-color .4s;
}
.j-step.active .node { background: var(--gold); border-color: var(--gold); }

.j-step .phase { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.j-step .j-num { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--gold); }
.j-step h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.05;
  margin: 4px 0 14px;
}
.j-step p { font-size: 1.06rem; color: var(--muted); max-width: 52ch; margin-bottom: 14px; }
.j-step .note { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--ink); }

.arc { background: var(--white); padding: 90px 0; text-align: center; }
.arc p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  line-height: 1.4;
  max-width: 30ch;
  margin: 0 auto;
  color: var(--muted);
}
.arc em { color: var(--gold); }