/* Scroll-linked process, with an ordinary readable list before enhancement. */
.process-scroll {
    --process-scroll-accent: var(--brand-teal, #009fa5);
    --process-scroll-track: #d5dce5;
    --process-scroll-rail-x: 14px;
    --process-scroll-marker-y: 22px;
    color: var(--brand-navy, #091f54);
    background: #fffcf7;
}

.process-scroll__heading { max-width: 850px; margin-bottom: clamp(3rem, 6vw, 5rem); }
.process-scroll__heading .eyebrow { margin-bottom: 1.3rem; color: var(--process-scroll-accent); }
.process-scroll__heading h2 { max-width: 19ch; text-wrap: balance; }
.process-scroll__heading > p { max-width: 56ch; margin-top: 1.5rem; color: var(--muted); }
.process-scroll__route { position: relative; max-width: 960px; }
.process-scroll__steps { margin: 0; padding: 0; list-style: none; }
.process-scroll__step {
    position: relative;
    display: grid;
    grid-template-columns: 48px 82px minmax(0, 1fr);
    column-gap: clamp(1rem, 3vw, 2.5rem);
    min-width: 0;
    padding-bottom: clamp(3rem, 6vw, 5rem);
}
.process-scroll__step:last-child { padding-bottom: 0; }
.process-scroll__step:not(:last-child)::before {
    position: absolute;
    content: "";
    top: var(--process-scroll-marker-y);
    bottom: calc(-1 * var(--process-scroll-marker-y));
    left: calc(var(--process-scroll-rail-x) - 1px);
    width: 2px;
    background: var(--process-scroll-track);
}
.process-scroll__marker {
    position: absolute;
    z-index: 2;
    top: var(--process-scroll-marker-y);
    left: var(--process-scroll-rail-x);
    width: 18px;
    height: 18px;
    border: 2px solid var(--process-scroll-track);
    border-radius: 50%;
    background: #fffcf7;
    transform: translate(-50%, -50%);
}
.process-scroll__number {
    grid-column: 2;
    color: var(--process-scroll-accent);
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 4vw, 3.5rem);
    line-height: 1;
}
.process-scroll__copy { grid-column: 3; min-width: 0; }
.process-scroll__copy h3 { margin-bottom: .7rem; font-size: clamp(1.55rem, 2.6vw, 2.2rem); line-height: 1.2; }
.process-scroll__copy p { max-width: 53ch; color: var(--muted); font-size: clamp(.95rem, 1.3vw, 1.1rem); line-height: 1.75; }
.process-scroll__visual { display: block; width: min(100%, 320px); aspect-ratio: 4 / 3; margin-top: 1.5rem; border-radius: var(--radius-sm); }
.process-scroll__cta { margin-top: clamp(3rem, 6vw, 5rem); }
.process-scroll__track { display: none; }

.process-scroll.is-enhanced .process-scroll__step::before { display: none; }
.process-scroll.is-enhanced .process-scroll__track {
    position: absolute;
    z-index: 1;
    display: block;
    top: var(--process-scroll-marker-y);
    left: calc(var(--process-scroll-rail-x) - 1px);
    width: 2px;
    height: var(--process-scroll-track-height, 0px);
    background: var(--process-scroll-track);
}
.process-scroll__fill { position: absolute; inset: 0 0 auto; height: var(--process-scroll-progress, 0px); background: var(--process-scroll-accent); box-shadow: 0 0 9px var(--process-scroll-accent); }
.process-scroll__head {
    position: absolute;
    z-index: 3;
    top: var(--process-scroll-progress, 0px);
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--secondary, #fff5e8);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--process-scroll-accent) 20%, transparent), 0 0 18px 5px var(--process-scroll-accent);
    transform: translate(-50%, -50%);
}
.process-scroll.is-enhanced .process-scroll__number { opacity: .3; }
.process-scroll.is-enhanced .process-scroll__step.is-reached .process-scroll__number { opacity: 1; }
.process-scroll.is-enhanced .process-scroll__step.is-reached .process-scroll__marker { background: var(--process-scroll-accent); border-color: var(--process-scroll-accent); box-shadow: 0 0 0 7px color-mix(in srgb, var(--process-scroll-accent) 12%, transparent); }
.process-scroll.is-ready .process-scroll__number, .process-scroll.is-ready .process-scroll__marker { transition: opacity 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }

@media (max-width: 600px) {
    .process-scroll { --process-scroll-rail-x: 9px; --process-scroll-marker-y: 17px; }
    .process-scroll__step { grid-template-columns: 22px 44px minmax(0, 1fr); column-gap: 12px; padding-bottom: 2.8rem; }
    .process-scroll__number { font-size: 2.2rem; }
    .process-scroll__marker { width: 15px; height: 15px; }
    .process-scroll__copy h3 { font-size: 1.45rem; }
    .process-scroll__heading { margin-bottom: 2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .process-scroll.is-ready .process-scroll__number, .process-scroll.is-ready .process-scroll__marker { transition: none; }
    .process-scroll__fill { box-shadow: none; }
    .process-scroll__head { display: none; }
}