/* =========================================================
   OUR WORKS PAGE
========================================================= */

.works-container{
    width:min(1280px,calc(100% - 48px));
    margin:auto;
}


/* =========================================================
   HERO
========================================================= */

.works-hero{
    position:relative;

    height:500px;
    min-height:500px;

    display:grid;
    grid-template-columns:43% 57%;

    overflow:hidden;

    background:#fffaf2;
}


/* LEFT */

.works-hero-copy{
    position:relative;
    z-index:5;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(228,171,58,.10),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #fffdf8,
            #fff6e6
        );
}


/* CURVE */

.works-hero-copy::after{
    content:"";

    position:absolute;

    z-index:-1;

    top:-175px;
    right:-105px;

    width:365px;
    height:760px;

    background:
        linear-gradient(
            160deg,
            #fffaf1,
            #fff5e3
        );

    border-radius:
        0 0 88% 72% /
        0 0 60% 48%;

    transform:
        rotate(10deg)
        skewY(-2deg);

    box-shadow:
        10px 0 0 #d89b2a,
        20px 0 0 rgba(239,190,88,.40);

    pointer-events:none;
}


.works-hero-inner{
    width:min(
        500px,
        calc(100% - 70px)
    );

    position:relative;

    z-index:3;
}


.works-label{
    display:block;

    color:#b96c04;

    font-size:12px;
    font-weight:700;

    letter-spacing:1.2px;
}


.works-small-rule{
    width:34px;
    height:2px;

    margin:
        13px 0
        18px;

    background:#ca7a04;
}


.works-hero h1{
    margin:0;

    color:#241a13;

    font:
        600 49px/1.03
        "Playfair Display",
        serif;

    letter-spacing:-1.4px;
}


.works-hero h1 em{
    font-style:normal;

    color:#b96b02;
}


.works-heading-rule{
    width:90px;

    display:flex;
    align-items:center;

    margin:
        23px 0;
}


.works-heading-rule span{
    flex:1;

    height:1px;

    background:#c77b05;
}


.works-heading-rule i{
    width:6px;
    height:6px;

    border:1px solid #c77b05;

    background:#fffaf2;

    transform:
        rotate(45deg);
}


.works-hero p{
    max-width:430px;

    margin:
        0 0
        27px;

    color:#625950;

    font-size:13px;
    line-height:1.75;
}


/* BUTTON */

.works-gold-btn{
    min-height:48px;

    padding:
        0 24px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:16px;

    border-radius:5px;

    color:#fff;

    background:
        linear-gradient(
            90deg,
            #b86a00,
            #d58c08
        );

    font-size:10.5px;
    font-weight:700;

    letter-spacing:.6px;

    box-shadow:
        0 11px 25px
        rgba(178,105,0,.18);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.works-gold-btn:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0 17px 33px
        rgba(178,105,0,.25);
}


.works-gold-btn svg{
    width:17px;
    height:17px;

    fill:none;
    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* RIGHT */

.works-hero-image{
    position:relative;

    height:500px;

    overflow:hidden;

    background:#eee;
}


.works-hero-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform 1.3s
        cubic-bezier(.16,1,.3,1);
}


.works-hero:hover
.works-hero-image img{
    transform:
        scale(1.025);
}


/* =========================================================
   STATS
========================================================= */

.works-stats-section{
    padding:
        30px 0
        20px;

    background:#fffdf9;
}


.works-stats{
    display:grid;

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

    border:
        1px solid
        #ead6b6;

    border-radius:10px;

    padding:
        18px 0;

    background:
        linear-gradient(
            90deg,
            #fffdf9,
            #fff8ed
        );

    box-shadow:
        0 11px 28px
        rgba(76,51,20,.05);
}


.works-stat{
    text-align:center;

    padding:
        5px 20px;

    border-right:
        1px solid
        #e2c58f;
}


.works-stat:last-child{
    border:0;
}


.works-stat-icon{
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#c67705;
}


.works-stat-icon svg{
    width:31px;
    height:31px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.55;

    stroke-linecap:round;
    stroke-linejoin:round;
}


.works-stat strong{
    display:block;

    margin:
        3px 0
        1px;

    color:#ad6403;

    font:
        600 34px
        "Playfair Display",
        serif;
}


.works-stat small{
    color:#33271e;

    font-size:10.5px;
}


/* =========================================================
   PROJECTS
========================================================= */

.works-projects{
    padding:
        34px 0
        40px;

    background:#fffdf9;
}


.works-projects-heading{
    text-align:center;

    margin-bottom:28px;
}


.works-projects-heading > span{
    color:#b86a02;

    font-size:10px;
    font-weight:700;

    letter-spacing:1.1px;
}


.works-projects-heading h2{
    margin:
        7px 0
        0;

    color:#261b13;

    font:
        600 37px/1.1
        "Playfair Display",
        serif;
}


.works-heading-center{
    margin:
        14px auto
        0;
}


/* GRID */

.works-project-grid{
    display:grid;

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

    gap:22px;
}


/* CARD */

.work-project-card{
    min-width:0;

    overflow:hidden;

    border:
        1px solid
        rgba(232,210,174,.65);

    border-radius:13px;

    background:#fff;

    box-shadow:
        0 9px 26px
        rgba(60,42,21,.06);

    transition:
        transform .35s
        cubic-bezier(.16,1,.3,1),
        box-shadow .35s ease,
        border-color .35s ease;
}


.work-project-card:hover{
    transform:
        translateY(-7px);

    border-color:
        #dfa347;

    box-shadow:
        0 20px 42px
        rgba(60,42,21,.12);
}


/* IMAGE */

.work-project-image{
    position:relative;

    height:245px;

    overflow:hidden;

    background:#eee;
}


.work-project-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .7s
        cubic-bezier(.16,1,.3,1);
}


.work-project-card:hover
.work-project-image img{
    transform:
        scale(1.055);
}


/* subtle overlay */

.work-project-image::after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(23,14,6,.20)
        );

    pointer-events:none;
}


/* NUMBER */

.work-project-number{
    position:absolute;

    z-index:4;

    left:12px;
    top:12px;

    min-width:31px;
    height:25px;

    padding:
        0 7px;

    border-radius:20px;

    display:grid;
    place-items:center;

    background:
        rgba(25,16,8,.42);

    color:#fff;

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

    backdrop-filter:
        blur(7px);

    font-size:8px;
    font-weight:700;

    letter-spacing:.8px;
}


/* VIEW */

.work-project-view{
    position:absolute;

    z-index:5;

    right:12px;
    bottom:12px;

    width:37px;
    height:37px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:
        rgba(255,250,240,.94);

    color:#b66b03;

    opacity:0;

    transform:
        translate3d(8px,8px,0)
        scale(.8);

    transition:
        opacity .3s ease,
        transform .4s
        cubic-bezier(.16,1,.3,1);
}


.work-project-card:hover
.work-project-view{
    opacity:1;

    transform:none;
}


.work-project-view svg{
    width:16px;
    height:16px;

    fill:none;

    stroke:currentColor;

    stroke-width:2;
}


/* COPY */

.work-project-copy{
    padding:
        16px 18px
        20px;
}


.work-project-copy h3{
    margin:
        0 0
        7px;

    color:#241a13;

    font:
        600 18px/1.1
        "Playfair Display",
        serif;
}


.work-project-location{
    display:flex;
    align-items:center;

    gap:6px;

    margin-bottom:9px;

    color:#7d7064;

    font-size:9.5px;
}


.work-project-location svg{
    width:14px;
    height:14px;

    fill:none;

    stroke:#c77907;

    stroke-width:1.8;

    flex:0 0 auto;
}


.work-project-copy p{
    margin:0;

    color:#655d55;

    font-size:10.5px;
    line-height:1.65;
}


/* =========================================================
   CTA
========================================================= */

.works-contact-strip{
    padding:
        0 0
        34px;

    background:#fffdf9;
}


.works-contact-inner{
    min-height:95px;

    padding:
        18px 30px;

    display:grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:center;

    gap:22px;

    border:
        1px solid
        rgba(234,208,165,.55);

    border-radius:11px;

    background:
        linear-gradient(
            100deg,
            #fff8eb,
            #fff0d5
        );
}


.works-contact-icon{
    width:58px;
    height:58px;

    border-radius:50%;

    display:grid;
    place-items:center;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #ad6200,
            #d58b0b
        );

    box-shadow:
        0 10px 23px
        rgba(173,98,0,.18);
}


.works-contact-icon svg{
    width:27px;
    height:27px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;
    stroke-linejoin:round;
}


.works-contact-inner h2{
    margin:
        0 0
        5px;

    color:#281d15;

    font:
        600 21px/1.1
        "Playfair Display",
        serif;
}


.works-contact-inner p{
    margin:0;

    color:#615950;

    font-size:11px;
}


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

@media(max-width:1000px){

    .works-hero{
        grid-template-columns:
            48% 52%;
    }


    .works-hero h1{
        font-size:42px;
    }


    .works-project-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


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

@media(max-width:760px){

    .works-container{
        width:
            calc(100% - 26px);
    }


    .works-hero{
        height:auto;
        min-height:auto;

        display:flex;
        flex-direction:column;
    }


    .works-hero-image{
        order:1;

        height:270px;
    }


    .works-hero-copy{
        order:2;

        justify-content:flex-start;
    }


    .works-hero-copy::after{
        display:none;
    }


    .works-hero-inner{
        width:100%;

        padding:
            32px 18px
            38px;
    }


    .works-hero h1{
        font-size:37px;
    }


    .works-stats{
        grid-template-columns:
            repeat(2,1fr);

        padding:0;
    }


    .works-stat{
        padding:
            18px 10px;

        border-bottom:
            1px solid
            #e2c58f;
    }


    .works-stat:nth-child(2){
        border-right:0;
    }


    .works-stat:nth-child(3),
    .works-stat:nth-child(4){
        border-bottom:0;
    }


    .works-project-grid{
        grid-template-columns:1fr;
    }


    .work-project-image{
        height:260px;
    }


    .work-project-view{
        opacity:1;

        transform:none;
    }


    .works-contact-inner{
        grid-template-columns:
            auto 1fr;
    }


    .works-contact-inner
    .works-gold-btn{
        grid-column:1/-1;

        width:100%;
    }

}


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

@media(max-width:480px){

    .works-hero-image{
        height:230px;
    }


    .works-hero h1{
        font-size:33px;
    }


    .works-projects-heading h2{
        font-size:29px;
    }


    .work-project-image{
        height:225px;
    }


    .works-stat strong{
        font-size:28px;
    }


    .works-contact-inner h2{
        font-size:18px;
    }

}