/* ===========================================================
   Featured Work
=========================================================== */

.featured-work{

    position:relative;

    z-index:1;

    padding:140px 0;

    overflow:hidden;

}

.featured-work-container{

    width:min(1000px,calc(100% - 64px));

    margin:auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:30px;

}

.featured-work-container > .trust-end{

    margin:-100px auto 46px;

}

.featured-label{

    font-size:15px;

    letter-spacing:6px;

    opacity:.65;

}

.featured-title{

    max-width:1000px;

    font-size:clamp(46px,6vw,72px);

    line-height:1.12;

}

.featured-description{

    max-width:720px;

    font-size:22px;

    line-height:1.8;

    opacity:.72;

}

/* ===========================================================
   Carousel
=========================================================== */

.work-carousel{

    position:relative;

    width:min(1500px,100%);

    margin:75px auto 0;

}

.work-stage{

    --drag-x:0px;

    position:relative;

    width:100%;

    height:clamp(390px,48vw,650px);

    overflow:hidden;

    perspective:1400px;

    cursor:grab;

    touch-action:pan-y;

    -webkit-user-select:none;
    user-select:none;

}

.work-stage.is-dragging{

    cursor:grabbing;

}

.work-card{

    --card-x:0px;
    --card-scale:1;
    --card-rotate:0deg;
    --card-opacity:1;

    position:absolute;

    left:50%;
    top:50%;

    width:clamp(310px,52vw,760px);

    aspect-ratio:16/10;

    opacity:var(--card-opacity);

    transform:

        translate(-50%,-50%)
        translateX(calc(var(--card-x) + var(--drag-x)))
        scale(var(--card-scale))
        rotateY(var(--card-rotate));

    transition:

        transform .75s cubic-bezier(.22,.8,.22,1),
        opacity .5s ease,
        filter .5s ease;

    will-change:transform;

}

.work-card-frame{

    position:relative;

    width:100%;
    height:100%;

    overflow:hidden;

    box-sizing:border-box;

    border-radius:28px;

    background:#0c1017;

    border:1px solid rgba(255,255,255,.12);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.16),
        0 35px 100px rgba(0,0,0,.58);

        transition:
            transform .45s ease,
            border-color .45s ease,
            box-shadow .45s ease;

}

.work-card.is-active .work-card-frame{

    border:3px solid rgba(255,255,255,.94);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.10),
        0 35px 100px rgba(0,0,0,.58);

}

.work-card.is-active .work-card-frame:hover{

    transform:translateY(-7px);

    border-color:#ffffff;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.14),
        0 48px 130px rgba(0,0,0,.68);

}

.work-card-image{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center top;

    transform:scale(1.055);

    filter:
        brightness(.44)
        saturate(.72);

    transition:
        filter .65s ease,
        transform 1.1s cubic-bezier(.22,.8,.22,1);

}

.work-card.is-active .work-card-image{

    filter:
        brightness(.82)
        saturate(.92);

}

.work-card.is-active .work-card-frame:hover .work-card-image{

    transform:scale(1.075);

}

.work-card-shade{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            to top,
            rgba(2,4,7,.94) 0%,
            rgba(2,4,7,.38) 40%,
            transparent 72%
        );

    opacity:.48;

    transition:opacity .55s ease;

}

.work-card.is-active .work-card-shade{

    opacity:1;

}

/* ===========================================================
   Project Information
=========================================================== */

.work-card-content{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:13px;

    padding:34px 28px;

    text-align:center;

    opacity:0;

    transform:translateY(18px);

    pointer-events:none;

    transition:

        opacity .42s ease .16s,
        transform .55s cubic-bezier(.22,.8,.22,1) .12s;

}

.work-card.is-active .work-card-content{

    opacity:1;

    transform:translateY(0);

    pointer-events:auto;

}

.work-card-category{

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:rgba(255,255,255,.68);

}

.work-card-title{

    font-size:clamp(28px,3.2vw,46px);

    line-height:1.1;

}

.work-card-link{

    margin-top:6px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:13px 25px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.16);

    background:rgba(8,10,15,.48);

    color:inherit;

    text-decoration:none;

    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);

    font-size:14px;

    transition:
        transform .3s ease,
        background .3s ease;

}

.work-card-link:hover{

    transform:translateY(-3px);

    background:rgba(255,255,255,.10);

}

/* ===========================================================
   Arrows
=========================================================== */

.work-arrow{

    position:absolute;

    top:50%;

    z-index:20;

    width:52px;
    height:52px;

    transform:translateY(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.11);

    background:rgba(8,11,17,.72);

    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);

    color:#fff;

    font-size:20px;

    cursor:pointer;

    transition:

        transform .3s ease,
        background .3s ease,
        border-color .3s ease;

}

.work-arrow:hover{

    transform:translateY(-50%) scale(1.08);

    background:rgba(255,255,255,.10);

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

}

.work-arrow-prev{

    left:28px;

}

.work-arrow-next{

    right:28px;

}

/* ===========================================================
   Pagination
=========================================================== */

.work-pagination{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:4px;

    margin-top:12px;

}

.work-dot{

    position:relative;

    flex:0 0 44px;

    width:44px;
    height:44px;

    margin:0;

    padding:0;

    border:0;

    background:transparent;

    cursor:pointer;

}

.work-dot::before{

    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:5px;
    height:5px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:rgba(255,255,255,.28);

    transition:
        width .35s ease,
        border-radius .35s ease,
        background .35s ease;

}

.work-dot.is-active::before{

    width:30px;

    border-radius:999px;

    background:rgba(255,255,255,.82);

}

.work-carousel-status{

    position:absolute;

    width:1px;
    height:1px;

    margin:-1px;
    padding:0;

    overflow:hidden;

    clip:rect(0 0 0 0);
    clip-path:inset(50%);

    white-space:nowrap;

    border:0;

}

/* ===========================================================
   Mobile
=========================================================== */

@media (max-width:768px){

    .featured-work{

        padding:90px 0;

    }

    .featured-work-container{

        width:calc(100% - 44px);

        gap:22px;

    }

    .featured-work-container > .trust-end{

        margin-top:-62px;

        margin-bottom:30px;

    }

    .featured-title{

        display:block;

        font-size:clamp(34px,8.5vw,40px);

        line-height:1.12;

        text-wrap:wrap;

    }

    .featured-title > span{

        display:inline;

    }

    .featured-description{

        max-width:340px;

        font-size:16px;

        line-height:1.7;

    }

    .work-carousel{

        margin-top:55px;

    }

    .work-stage{

        height:clamp(320px,82vw,460px);

    }

    .work-card{

        width:84vw;

        max-width:560px;

    }

    .work-card-frame{

        border-radius:18px;

    }

    .work-card-content{

        gap:10px;

        padding:24px 20px;

    }

    .work-card-category{

        font-size:10px;

        letter-spacing:2px;

    }

    .work-card-title{

        font-size:clamp(25px,7vw,36px);

    }

    .work-card-link{

        padding:11px 20px;

        font-size:13px;

    }

    .work-arrow{

        display:none;

    }

}

@media (max-width:767px){

    .work-stage{

        perspective:none;

    }


    .work-card{

        backface-visibility:hidden;

        -webkit-backface-visibility:hidden;

        transition:
            transform .48s cubic-bezier(.22,.8,.22,1),
            opacity .3s ease;

    }


    .work-card-frame{

        box-shadow:
            0 18px 55px rgba(0,0,0,.46);

    }


    .work-card-image{

        transform:scale(1.025);

        transition:
            filter .35s ease;

    }


    .work-card.is-active .work-card-frame:hover{

        transform:none;

    }


    .work-card.is-active .work-card-frame:hover .work-card-image{

        transform:scale(1.025);

    }

}