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

.process{

    position:relative;

    background:var(--bg);

    padding-top:clamp(100px,9vw,160px);

    overflow:hidden;

    scroll-margin-top:clamp(90px,10vw,120px);

}


/*==================================================
                CONTAINER
==================================================*/

.process-container{

    display:grid;

    grid-template-columns:
        minmax(340px,38%)
        minmax(0,62%);

    gap:clamp(24px,3vw,36px);

    align-items:stretch;

}

/*==================================================
                LEFT COLUMN
==================================================*/

.process-left{

    position:relative;
    overflow:hidden;
    background:#111;
    border:1px solid rgba(255,255,255,.05);
    border-radius:var(--radius-xl);

    min-height:clamp(600px,58vw,680px);

    margin-top:-20px;
}

.process-right{

    position:relative;

    min-height:clamp(600px,58vw,680px);

}

/*==================================================
                    IMAGE
==================================================*/

.process-left img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.02);

    transition:
        transform 1.2s cubic-bezier(.22,1,.36,1);

    user-select:none;

    -webkit-user-drag:none;

    will-change:transform;

}

.process-left:hover img{

    transform:scale(1.055);

}


/*==================================================
                IMAGE OVERLAY
==================================================*/

.process-left::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.82),
            rgba(0,0,0,.20)
        );

}


/*==================================================
                TEXT OVERLAY
==================================================*/

.process-overlay{

    position:relative;

    z-index:5;

    width:100%;

    padding:

        clamp(34px,4vw,70px);

}


/*==================================================
                    TITLE
==================================================*/

.process-overlay h2{

    margin:0;

    color:#fff;

    font-size:clamp(2.5rem,4vw,4.25rem);

    font-weight:800;

    line-height:1.05;

    text-wrap:balance;

}

.process-overlay h2 span{

    color:var(--green);

}


/*==================================================
                    DIVIDER
==================================================*/

.process-divider{

    width:70px;

    height:3px;

    margin:20px 0 22px;

    border-radius:20px;

    background:var(--green);

}


/*==================================================
                DESCRIPTION
==================================================*/

.process-overlay p{

    width:min(520px,100%);

    margin:0;

    color:var(--gray-300);

    font-size:clamp(1rem,1.15vw,1.2rem);

    line-height:1.8;

    text-wrap:pretty;

}


/*==================================================
                RIGHT COLUMN
==================================================*/
/*
.process-right{

    position:relative;

    min-height:760px;

}
*/

/*==================================================
                TIMELINE
==================================================*/

.process-right::before{

    content:"";

    position:absolute;

    top:40px;

    bottom:40px;

    left:41px;

    width:2px;

    background:
        linear-gradient(
            to bottom,
            rgba(22,163,74,0),
            rgba(22,163,74,.85),
            rgba(22,163,74,.85),
            rgba(22,163,74,0)
        );
display:none;
}


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

.process-item{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:5px;

    margin-bottom:clamp(38px,3vw,55px);

    cursor:pointer;

}

.process-item:last-child{

    margin-bottom:0;

}


/*==================================================
            BACKGROUND NUMBER
==================================================*/

.process-bg-number{

    position:absolute;

    top:-18px;

    right:0;

    user-select:none;

    pointer-events:none;

    opacity:.04;

    color:#fff;

    font-size:145px;

    font-weight:800;

    line-height:1;

    transition:
        opacity .40s ease,
        transform .40s ease;

    will-change:transform;

}

.process-item:hover .process-bg-number{

    opacity:.075;

    transform:scale(1.035);

}


/*==================================================
                    ICON
==================================================*/

.process-icon{

    position:relative;

    flex:0 0 62px;

    width:62px;

    height:62px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#090909;

    color:var(--green);

    z-index:3;

    transition:var(--transition);

    will-change:transform;

}


/*==================================================
                OUTER RING
==================================================*/

.process-icon::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    border:2px solid rgba(22,163,74,.25);

    transition:.45s ease;

}


/*==================================================
                INNER RING
==================================================*/

.process-icon::after{

    content:"";

    position:absolute;

    inset:10px;

    border-radius:50%;

    border:1px solid rgba(22,163,74,.45);

    transition:.45s ease;

}


/*==================================================
                    SVG
==================================================*/

.process-icon svg{

    width:30px;

    height:30px;

    stroke-width:1.8;

    flex-shrink:0;

}


/*==================================================
                TIMELINE DOT
==================================================*/

.process-dot{

    position:absolute;

    left:41px;

    top:92px;

    transform:translateX(-50%);

    width:16px;

    height:16px;

    border-radius:50%;

    background:var(--green);

    box-shadow:

        0 0 10px rgba(22,163,74,.75),

        0 0 28px rgba(22,163,74,.40);

    display:none;

    z-index:2;

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.process-item:hover .process-dot{

    transform:

        translateX(-50%)

        scale(1.18);

    box-shadow:

        0 0 12px rgba(22,163,74,.85),

        0 0 26px rgba(22,163,74,.40);

}


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

.process-text{

    flex:1;

    min-width:0;

}


/*==================================================
                STEP NUMBER
==================================================*/

.process-text span{

    display:block;

    margin-bottom:10px;

    color:var(--green);

    font-size:clamp(1.65rem,2vw,2rem);

    font-weight:800;

    line-height:1;

}


/*==================================================
                    TITLE
==================================================*/

.process-text h3{

    margin-bottom:12px;

    color:#fff;

    font-size:clamp(1.5rem,2.2vw,2.125rem);

    font-weight:800;

    line-height:1.15;

    text-wrap:balance;

    transition:

        color var(--transition),

        transform var(--transition);

}


/*==================================================
                DESCRIPTION
==================================================*/

.process-text p{

    width:min(520px,100%);

    margin:0;

    color:var(--gray-400);

    font-size:clamp(1rem,1.1vw,1.125rem);

     line-height:1.6;

    text-wrap:pretty;

}


/*==================================================
                ITEM HOVER
==================================================*/

.process-item:hover .process-icon{

    transform:scale(1.08);

    color:#fff;

    background:var(--green);

    box-shadow:

        0 0 18px rgba(22,163,74,.35),

        0 0 35px rgba(22,163,74,.25);

}


.process-item:hover .process-icon::before{

    transform:rotate(180deg);

    border-color:var(--green);

}


.process-item:hover .process-icon::after{

    transform:rotate(-180deg);

    border-color:rgba(255,255,255,.45);

}


.process-item:hover .process-text h3{

    color:var(--green);

}


.process-item:hover .process-text{

    transform:translateX(4px);

    transition:transform .35s ease;

}


/*==================================================
            REVEAL ANIMATION
==================================================*/

.process-item.reveal{

    opacity:0;

    transform:translateY(45px);

    transition:

        opacity .75s ease,

        transform .75s cubic-bezier(.22,1,.36,1);

}


.process-item.reveal.show{

    opacity:1;

    transform:translateY(0);

}


/*==================================================
                STAGGER
==================================================*/

.process-item.reveal:nth-child(1){

    transition-delay:.10s;

}


.process-item.reveal:nth-child(2){

    transition-delay:.20s;

}


.process-item.reveal:nth-child(3){

    transition-delay:.30s;

}


.process-item.reveal:nth-child(4){

    transition-delay:.40s;

}


/*==================================================
            FINAL OPTIMIZATIONS
==================================================*/

.process-left,
.process-right,
.process-item,
.process-overlay,
.process-icon,
.process-text,
.process-bg-number{

    position:relative;

}


/*==================================================
            IMAGE OPTIMIZATION
==================================================*/

.process-left img{

    user-select:none;

    -webkit-user-drag:none;

    -webkit-user-select:none;

    pointer-events:none;

}


/*==================================================
            TEXT IMPROVEMENTS
==================================================*/

.process-overlay h2,
.process-text h3{

    text-wrap:balance;

}


.process-overlay p,
.process-text p{

    text-wrap:pretty;

}


/*==================================================
            SVG
==================================================*/

.process-icon svg{

    flex-shrink:0;

    display:block;

}


/*==================================================
            GPU ACCELERATION
==================================================*/

.process-left img,
.process-icon,
.process-bg-number,
.process-dot{

    will-change:transform;

    transform:translateZ(0);

    backface-visibility:hidden;

}


/*==================================================
            HOVER PERFORMANCE
==================================================*/

.process-item:hover .process-icon,
.process-item:hover .process-bg-number,
.process-left:hover img{

    transform-style:preserve-3d;

}


/*==================================================
            ACCESSIBILITY
==================================================*/

.process-item:focus-visible{

    outline:2px solid var(--green);

    outline-offset:8px;

    border-radius:var(--radius-md);

}


/*==================================================
            REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

    .process-left img,

    .process-icon,

    .process-icon::before,

    .process-icon::after,

    .process-bg-number,

    .process-dot,

    .process-item,

    .process-text h3{

        transition:none;

    }

    .process-item.reveal{

        opacity:1;

        transform:none;

    }

}


/*==================================================
                TABLET
==================================================*/

@media (max-width:992px){

/*==================================
            LAYOUT
==================================*/

.process-container{

    grid-template-columns:1fr;

    gap:clamp(50px,7vw,70px);

}


/*==================================
            LEFT COLUMN
==================================*/

.process-left{

    order:1;

    margin-top:0;

    min-height:clamp(560px,70vw,760px);

}


.process-right{

    order:2;

    min-height:auto;

}


/*==================================
            OVERLAY
==================================*/

.process-overlay{

    left:clamp(32px,5vw,56px);

    right:clamp(28px,5vw,50px);

    bottom:clamp(30px,5vw,55px);

}


.process-overlay h2{

    font-size:clamp(2.3rem,5vw,3.4rem);

}


.process-divider{

    width:clamp(56px,6vw,68px);

    margin:

        clamp(18px,2vw,20px)

        0

        clamp(18px,2vw,22px);

}


.process-overlay p{

    font-size:clamp(1rem,1.6vw,1.1rem);

}


/*==================================
            TIMELINE
==================================*/

.process-right::before{

    left:41px;

    top:30px;

    bottom:30px;

    display:none;
}


/*==================================
                ITEMS
==================================*/

.process-item{

    gap:clamp(18px,2vw,24px);

    margin-bottom:clamp(55px,6vw,75px);

}


/*==================================
                ICON
==================================*/

.process-icon{

    flex:0 0 clamp(68px,7vw,78px);

    width:clamp(68px,7vw,78px);

    height:clamp(68px,7vw,78px);

}


.process-icon svg{

    width:clamp(28px,3vw,32px);

    height:clamp(28px,3vw,32px);

}


/*==================================
        BACKGROUND NUMBER
==================================*/

.process-bg-number{

    font-size:clamp(95px,11vw,120px);

}


/*==================================
                TEXT
==================================*/

.process-text span{

    font-size:clamp(1.5rem,2.8vw,1.8rem);

}


.process-text h3{

    font-size:clamp(1.5rem,3vw,2rem);

}


.process-text p{

    font-size:clamp(.98rem,1.4vw,1.05rem);

}

}


/*==================================================
                    MOBILE
==================================================*/

@media (max-width:768px){

/*==================================
                CONTAINER
==================================*/

.process-container{

    display:flex;

    flex-direction:column;

    gap:clamp(45px,8vw,65px);

}


/*==================================
            LEFT COLUMN
==================================*/

.process-left{

    width:100%;

    margin-top:0;

    min-height:clamp(520px,85vw,680px);

    border-radius:var(--radius-lg);

}


.process-right{

    width:100%;

    min-height:auto;

}


/*==================================
                OVERLAY
==================================*/

.process-overlay{

    left:clamp(28px,6vw,50px);

    right:clamp(20px,5vw,36px);

    bottom:clamp(28px,5vw,46px);

}


.process-overlay h2{

    font-size:clamp(2rem,7vw,2.9rem);

}


.process-divider{

    width:clamp(46px,7vw,55px);

    margin:

        clamp(14px,2vw,16px)

        0

        clamp(16px,2vw,18px);

}


.process-overlay p{

    font-size:clamp(.98rem,2vw,1.06rem);

    line-height:1.65;

}


/*==================================
                TIMELINE
==================================*/

.process-right::before{

    left:41px;

    top:25px;

    bottom:25px;

}


/*==================================
                ITEMS
==================================*/

.process-item{

    gap:clamp(16px,3vw,22px);

    margin-bottom:clamp(50px,7vw,70px);

}


/*==================================
                ICON
==================================*/

.process-icon{

    flex:0 0 clamp(64px,9vw,72px);

    width:clamp(64px,9vw,72px);

    height:clamp(64px,9vw,72px);

}


.process-icon svg{

    width:clamp(26px,4vw,29px);

    height:clamp(26px,4vw,29px);

}


/*==================================
            TIMELINE DOT
==================================*/

.process-dot{

    left:41px;

    top:clamp(74px,9vw,82px);

    width:clamp(12px,2vw,14px);

    height:clamp(12px,2vw,14px);

}


/*==================================
                TEXT
==================================*/

.process-text span{

    font-size:clamp(1.35rem,5vw,1.65rem);

    margin-bottom:8px;

}


.process-text h3{

    font-size:clamp(1.35rem,5vw,1.65rem);

    margin-bottom:12px;

}


.process-text p{

    font-size:1rem;

    line-height:1.7;

}


/*==================================
        BACKGROUND NUMBER
==================================*/

.process-bg-number{

    top:-12px;

    font-size:clamp(76px,16vw,100px);

}

}


/*==================================================
                SMALL MOBILE
==================================================*/

@media (max-width:480px){

.process-overlay{

    left:24px;

    right:18px;

    bottom:24px;

}


.process-overlay h2{

    font-size:clamp(1.85rem,8vw,2.45rem);

}


.process-overlay p{

    font-size:.95rem;

    line-height:1.65;

}


.process-item{

    gap:16px;

    margin-bottom:48px;

}


.process-icon{

    flex:0 0 60px;

    width:60px;

    height:60px;

}


.process-icon svg{

    width:24px;

    height:24px;

}


.process-right::before{

    left:36px;

}


.process-dot{

    left:36px;

    top:70px;

    width:12px;

    height:12px;

}


.process-text span{

    font-size:1.25rem;

}


.process-text h3{

    font-size:1.35rem;

    line-height:1.2;

}


.process-text p{

    font-size:.95rem;

    line-height:1.65;

}


.process-bg-number{

    top:-8px;

    font-size:clamp(68px,18vw,82px);

}

}