/* Methodology: scroll-led progression without decorative cards. */
.process .split { align-items: start; }
.process-copy { position: sticky; top: 138px; }
.process-copy h2 { max-width: 665px; }
.steps { --progress: 0%; position: relative; }
.steps::before,.steps::after { content: ''; position: absolute; left: 26px; top: 27px; width: 1px; }
.steps::before { bottom: 27px; background: var(--line); }
.steps::after { height: var(--progress); background: var(--lime); transition: height .55s cubic-bezier(.2,.75,.2,1); }
.steps li { position: relative; padding: 23px 0; opacity: .35; transform: translateY(13px); transition: opacity .45s ease, transform .45s ease, padding-left .3s ease; transition-delay: var(--step-delay); }
.process.is-revealed .steps li { opacity: .63; transform: translateY(0); }
.process.is-revealed .steps li.is-active { opacity: 1; padding-left: 12px; }
.steps li b { position: relative; z-index: 1; display: grid; place-items: center; width: 53px; height: 25px; background: var(--paper); color: #789f00; transition: color .3s ease, background .3s ease; }
.steps li.is-active b { color: var(--ink); background: var(--lime); }
.steps li h3 { transition: color .3s ease; }
.steps li.is-active h3 { color: #668800; }
@media (hover:hover) { .process.is-revealed .steps li:hover { opacity: 1; padding-left: 12px; } .process.is-revealed .steps li:hover h3 { color: #668800; } }
@media (max-width:900px) { .process-copy { position: static; } .steps::before,.steps::after { left: 26px; } }
@media (prefers-reduced-motion:reduce) { .steps::after,.steps li,.steps li b,.steps li h3 { transition: none; } }