/* =====================================================================
   Our Process
   Horizontal timeline on desktop, vertical on mobile/tablet.
   ===================================================================== */

.process__timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Same soft cap as .services__grid/.why-choose__grid (services.css,
       why-choose-us.css) — without it this row of 4 steps stretches to
       the full edge-to-edge container while its sibling sections above
       and below cap at --content-max-width-wide, so their edges stop
       lining up past that width. */
    max-width: var(--content-max-width-wide);
    margin-inline: auto;
}

@media (min-width: 1024px) {
    .process__timeline {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-xl);
    }
}

.process__step {
    position: relative;
    flex: 1;
    padding: var(--space-xl) 0 var(--space-xl) var(--space-2xl);
    border-left: 2px solid var(--color-border);
}

.process__step:last-child {
    padding-bottom: 0;
}

@media (min-width: 1024px) {
    .process__step {
        padding: var(--space-2xl) var(--space-lg) 0 0;
        border-left: none;
        border-top: 2px solid var(--color-border);
    }
}

.process__step-number {
    position: absolute;
    left: -1.05rem;
    top: var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
}

@media (min-width: 1024px) {
    .process__step-number {
        left: 0;
        top: -1.05rem;
    }
}

.process__step-title {
    font-size: var(--fs-h4);
    margin-bottom: var(--space-sm);
}

.process__step-description {
    color: var(--color-text-grey);
    font-size: var(--fs-body);
    max-width: 320px;
}