/*====================================
PROCESS
====================================*/

.process{

    padding-top:4rem;

    padding-bottom:6rem;

}
.process-header{

    max-width:56rem;

    margin-inline:auto;

    margin-bottom:var(--space-5xl);

    text-align:center;

}

.process-header .section-eyebrow{

    display:inline-flex;

    flex-direction:column;

    align-items:center;

}

.process-header .section-eyebrow::before{

    left:50%;

    right:auto;

    transform:translateX(-50%);

}

.process-header .section-title{

    max-width:32ch;

    margin-inline:auto;

    text-align:center;

}

.process-header .section-description{

    max-width:42rem;

    margin-inline:auto;

    text-align:center;

}

.process-timeline{

    position:relative;

    max-width:52rem;

    margin-inline:auto;

}

.process-timeline::before{

    content:"";

    position:absolute;

    left:1.15rem;

    top:0;

    bottom:0;

    width:1px;

    background:rgba(179,138,59,.35);

}

.process-step{

    display:grid;

    grid-template-columns:4rem 1fr;

    gap:3rem;

    padding-bottom:4rem;

    position:relative;

}

.process-step:last-child{

    padding-bottom:0;

}

.step-number{

    width:2.3rem;

    height:2.3rem;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--color-background);

    border:1px solid var(--color-accent);

    border-radius:50%;

    color:var(--color-accent);

    font-size:.85rem;

    font-weight:600;

    z-index:2;

}

.step-content h3{

    margin-bottom:1rem;

}

.step-content p{

    color:var(--color-text-muted);

    max-width:38rem;

}
/*====================================
PROCESS
MOBILE
====================================*/

@media (max-width:768px){

    .process{

        padding:3rem 0;

    }

    .process-header{

        max-width:420px;

        margin:0 auto 3rem;

    }

    .process-header .section-eyebrow{

        margin-bottom:.9rem;

    }

    .process-header .section-title{

        max-width:24ch;

        margin:0 auto 1.5rem;

        font-size:1.55rem;

        line-height:1.08;

        text-wrap:balance;

    }

    .process-header .section-description{

        max-width:38ch;

        margin:0 auto;

        font-size:.92rem;

        line-height:1.6;

    }

    .process-timeline{

        max-width:420px;

        margin:0 auto;

    }

    .process-timeline::before{

        left:1rem;

    }

    .process-step{

        grid-template-columns:3rem 1fr;

        gap:1.5rem;

        padding-bottom:2.5rem;

    }

    .step-number{

        width:2rem;

        height:2rem;

        font-size:.8rem;

    }

    .step-content h3{

        margin-bottom:.6rem;

        font-size:1.15rem;

        line-height:1.25;

    }

    .step-content p{

        font-size:.92rem;

        line-height:1.6;

        max-width:100%;

    }

}