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

.process{

    background:#fff;

    padding:var(--space-10) 0;

    overflow:hidden;

}

.process .container{

    width:min(var(--container),92%);

    margin:auto;

}

.process__layout{

    display:grid;

    grid-template-columns:minmax(310px,1fr) minmax(0,1.9fr);

    gap:var(--space-8);

    align-items:stretch;

}

.process__intro{

    max-width:none;

    min-height:260px;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:var(--space-6);

    background:var(--color-warm-white);

    border:1px solid rgba(115,138,105,.18);

    border-radius:8px;

    box-shadow:0 10px 28px rgba(47,49,51,.045);

    opacity:0;

    transform:translateY(24px);

    transition:
        opacity .5s ease-out,
        transform .5s ease-out,
        border-color .25s ease,
        box-shadow .25s ease;

}

.process.is-visible .process__intro{

    opacity:1;

    transform:translateY(0);

}

.process__eyebrow{

    font-size:13px;

    font-weight:600;

    line-height:1.4;

    letter-spacing:.12em;

    color:var(--sage);

    text-transform:uppercase;

    margin-bottom:var(--space-2);

}

.process__title{

    font-family:var(--font-heading);

    font-size:38px;

    font-weight:600;

    line-height:1.16;

    color:var(--graphite);

    margin-bottom:var(--space-3);

}

.process__lead{

    font-size:17px;

    line-height:1.75;

    color:var(--graphite-600);

}

.process__cta{

    width:100%;

    min-width:0;

    margin-top:var(--space-5);

    text-align:center;

}

.process__more-link{

    display:inline-flex;

    align-items:center;

    gap:6px;

    align-self:flex-start;

    margin-top:var(--space-4);

    font-family:var(--font-body);

    font-size:15px;

    font-weight:600;

    line-height:1.35;

    color:var(--sage);

    text-decoration:none;

    transition:color .25s ease;

}

.process__more-link:hover{

    color:#647b5c;

}

.process__timeline{

    min-width:0;

    display:flex;

    align-items:stretch;

}

.process__steps{

    width:100%;

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    grid-auto-rows:1fr;

    gap:var(--space-3);

    height:100%;

}

.process__step{

    position:relative;

    min-width:0;

    display:flex;

    flex-direction:column;

    align-items:stretch;

    min-height:260px;

    height:100%;

    padding:var(--space-4);

    background:#fff;

    border:1px solid rgba(115,138,105,.18);

    border-radius:8px;

    box-shadow:0 10px 28px rgba(47,49,51,.045);

    opacity:0;

    transform:translateY(18px);

    transition:
        opacity .5s ease-out,
        transform .5s ease-out,
        border-color .25s ease,
        box-shadow .25s ease;

}

.process.is-visible .process__step{

    opacity:1;

    transform:translateY(0);

}

.process.is-visible .process__step:nth-child(1){

    transition-delay:.18s;

}

.process.is-visible .process__step:nth-child(2){

    transition-delay:.28s;

}

.process.is-visible .process__step:nth-child(3){

    transition-delay:.38s;

}

.process.is-visible .process__step:nth-child(4){

    transition-delay:.48s;

}

.process__step-title{

    order:2;

    max-width:190px;

    min-height:0;

    margin:0 auto var(--space-2);

    font-family:var(--font-heading);

    font-size:18px;

    font-weight:600;

    line-height:1.28;

    text-align:center;

    color:var(--graphite);

}

.process__number-frame{

    --frame-size:19px;
    --frame-inset-x:5px;
    --frame-inset-y:5px;

    order:1;

    position:relative;

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto var(--space-3);

    flex:0 0 auto;

}

.process__number-frame .frame{

    opacity:0;

}

.process.is-visible .process__number-frame .frame{

    opacity:.86;

    transition:opacity .25s ease .38s;

}

.process__number{

    position:relative;

    z-index:2;

    font-family:var(--font-heading);

    font-size:23px;

    font-weight:600;

    line-height:1;

    color:var(--sage);

}

.process__step-description{

    order:3;

    display:block;

    margin:0;

    font-size:15px;

    line-height:1.62;

    text-align:left;

    color:var(--graphite-600);

}

@media (hover:hover){

    .process__step:hover{

        border-color:rgba(115,138,105,.32);

        box-shadow:0 14px 34px rgba(47,49,51,.06);

    }

}

@media (max-width:1120px){

    .process__layout{

        grid-template-columns:1fr;

        gap:var(--space-6);

    }

    .process__steps{

        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:var(--space-4);

    }

    .process__step{

        min-height:220px;

    }

    .process__intro{

        min-height:220px;

    }

}

@media (max-width:720px){

    .process{

        padding:var(--space-8) 0;

    }

    .process__intro{

        padding:var(--space-4);

        min-height:0;

    }

    .process__title{

        font-size:30px;

    }

    .process__lead{

        font-size:16px;

        line-height:1.7;

    }

    .process__steps{

        grid-template-columns:1fr;

        gap:var(--space-3);

    }

    .process__step{

        min-height:0;

        padding:var(--space-4);

    }

    .process__step-title{

        min-height:0;

    }

}