.process {
    --process-background: #f6f6f6;
    --process-margin: 1rem;
    --process-gap: 1.5rem;
    margin-top: calc(-1 * var(--site-header-height));
    padding-block: calc(var(--site-header-height) + 2rem) var(--home-section-gap);
    background: var(--process-background);
}

main:has(> .process) {
    background: #f6f6f6;
}

.process-hero {
    display: grid;
    gap: 0.875rem;
    text-align: center;
}

.process-hero__eyebrow {
    color: var(--color-dark-blue-100);
    font-size: 1.75rem;
    font-variation-settings: var(--opsz-medium);
    font-weight: 600;
    line-height: 2.25rem;
}

.process-hero__title {
    color: var(--color-blue-300);
    font-weight: 700;
    text-transform: uppercase;
    text-wrap: balance;
}

.process-hero__lead {
    color: var(--color-dark-blue-100);
}

.process-phases {
    position: relative;
    display: grid;
    gap: var(--process-gap);
    max-width: 110rem;
    margin: 2rem auto 0;
    padding: 0 var(--process-margin);
    list-style: none;
}

.process-phase {
    --phase-color: var(--color-blue-300);
    position: relative;
    border-radius: 1.5rem;
    background: var(--color-white);
    box-shadow: 0 0.25rem 1.5625rem rgb(112 112 112 / 0.3);
}

.process-phase--gray {
    --phase-color: var(--color-dark-blue-75);
}

.process-phase--sky {
    --phase-color: #148ce2;
}

.process-phase--orange {
    --phase-color: var(--color-orange-300);
}

/* 1.375rem keeps the white title large text on every heading colour, where 3:1 is enough (WCAG AA). */
.process-phase__head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 5.625rem;
    margin: 0;
    padding: 0.75rem 1.375rem;
    border-radius: 1.5rem 1.5rem 0 0;
    background: var(--phase-color);
    color: var(--color-white);
    font-size: 1.375rem;
    font-variation-settings: var(--opsz-medium);
    font-weight: 700;
    line-height: 1.75rem;
}

.process-phase__head img {
    display: block;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
}

.process-phase__steps {
    display: grid;
    gap: 1.5rem;
    margin: 0;
    padding: 1.875rem 1.625rem 2.125rem;
    list-style: none;
}

.process-step__title {
    margin: 0 0 0.625rem;
    color: var(--color-dark-blue-100);
    font-size: 1.0625rem;
    font-variation-settings: var(--opsz-medium);
    font-weight: 600;
    line-height: 1.5625rem;
}

.process-step__text {
    color: var(--color-gray-100);
    font-size: var(--text-body-m);
    line-height: 1.4375rem;
}

@media (min-width: 48rem) {
    .process {
        padding-top: calc(var(--site-header-height) + 3.5rem);
    }

    .process-phases {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* From here the four columns share a row: the wavy line runs above them from the first column's centre to the last's,
   through a dot over each column, and curves up to the logo. */
@media (min-width: 77.5rem) {
    .process-hero__title {
        font-size: var(--text-h2);
        line-height: var(--leading-h2);
    }

    .process-phases {
        --process-centre: calc(var(--process-margin) + (100% - 2 * var(--process-margin) - 3 * var(--process-gap)) / 8);
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-top: 6.125rem;
    }

    .process-phases::before {
        content: "";
        position: absolute;
        top: -3.25rem;
        right: var(--process-centre);
        left: calc(var(--process-centre) - 4.25rem);
        height: 0.5rem;
        background: url("../images/process/wave.svg") left center / 1.75rem 0.5rem repeat-x;
    }

    .process-phases::after {
        content: "";
        position: absolute;
        top: -10.375rem;
        right: calc(var(--process-centre) - 7.75rem);
        width: 7.75rem;
        height: 7.625rem;
        background:
            url("../images/brand/logo-mark.svg") right top / 3.25rem auto no-repeat,
            url("../images/process/timeline-curve.svg") left bottom / 5.25rem 4.875rem no-repeat;
        pointer-events: none;
    }

    .process-phase::before {
        content: "";
        position: absolute;
        top: -3.75rem;
        left: 50%;
        z-index: 1;
        width: 1.5rem;
        height: 1.5rem;
        border: 1px dashed #afafaf;
        border-radius: 50%;
        background: radial-gradient(circle, var(--phase-color) 0 0.375rem, var(--process-background) 0.4rem);
        translate: -50% 0;
    }

    /* The triangle runs on into the heading, 1.5rem wide where it crosses the heading's edge: two edges that only
       touch show a hairline at fractional scales. */
    .process-phase::after {
        content: "";
        position: absolute;
        top: -0.625rem;
        left: 50%;
        width: 2.1rem;
        height: 0.875rem;
        background: var(--phase-color);
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        translate: -50% 0;
    }
}