.process {
  padding-block: var(--sp-16);
  background: var(--bone-warm);
}

.process__head {
  margin-bottom: var(--sp-8);
}

.process__timeline {
  position: relative;
  display: grid;
  gap: var(--sp-6);
  padding-left: 2.5rem;
  max-width: 60ch;
}

.process__timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--aida-green);
  opacity: 0.4;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1200ms var(--ease-arch);
}

.process.is-active .process__timeline::before {
  transform: scaleY(1);
}

.process__step {
  position: relative;
  display: grid;
  gap: 0.6rem;
}

.process__step::before {
  content: "";
  position: absolute;
  left: -2.5rem;
  top: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bone-warm);
  border: 2px solid var(--aida-green);
  z-index: 2;
  transition: background 300ms var(--ease-arch);
}

.process__step::after {
  content: "";
  position: absolute;
  left: calc(-2.5rem + 7px);
  top: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aida-green);
  z-index: 3;
  transform: scale(0);
  transition: transform 300ms var(--ease-arch);
}

.process.is-active .process__step::after {
  transform: scale(1);
}

.process__step-num {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--aida-green);
  font-weight: 500;
}

.process__step-title {
  font-family: var(--ff-body);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--shadow-ink);
  line-height: 1.2;
}

.process__step-desc {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--charcoal);
  font-weight: 300;
  max-width: 48ch;
}