*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#061506;
    color:#f7faf7;
    font-family:Arial,sans-serif;
}

body.gallery-open{
    overflow:hidden;
}

.wrap{
    width:min(1180px,92%);
    margin:auto;
}


/* =========================================================
   HEADER
   ========================================================= */

header{
    position:fixed;
    z-index:20;
    inset:0 0 auto;
    background:#061506e8;
    border-bottom:1px solid #ffffff18;
}

.nav{
    height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.nav nav{
    display:flex;
    gap:20px;
    align-items:center;
}

.nav a{
    color:#fff;
    text-decoration:none;
}

.lang{
    border:1px solid #57ef40;
    padding:7px 10px;
    border-radius:20px;
    color:#57ef40!important;
}


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

.hero{
    height:92vh;
    min-height:650px;
    background:url("/static/uploads/s06_04.jpg") center/cover;
    position:relative;
    display:flex;
    align-items:end;
}

.hero-slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity 1s;
}

.hero-slide.active{
    opacity:1;
}

.shade{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,#031003e8,#03100355),
        linear-gradient(0deg,#061506,transparent 45%);
}

.hero-copy{
    position:relative;
    padding-bottom:70px;
}

.hero small{
    color:#57ef40;
    letter-spacing:.2em;
}

.hero h1{
    font-size:clamp(50px,8vw,100px);
    line-height:.9;
    letter-spacing:-.055em;
    max-width:950px;
    margin:18px 0;
}

.hero p{
    font-size:20px;
    color:#d9e6d9;
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

section{
    padding:90px 0;
    border-top:1px solid #ffffff12;
}

h2{
    font-size:clamp(38px,5vw,65px);
    letter-spacing:-.04em;
}

.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.grid article{
    padding:25px;
    background:#0b200c;
    border:1px solid #28502a;
}

.grid p{
    color:#a8b8a8;
    line-height:1.6;
}


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

.projects{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}

.projects article{
    background:#0b200c;
    border:1px solid #28502a;
    overflow:hidden;
}

.projects img{
    width:100%;
    height:330px;
    object-fit:cover;
}

.projects article > div{
    padding:22px;
}

.projects small{
    color:#57ef40;
}

.projects b{
    color:#57ef40;
}

.project-gallery-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:18px;
    padding:11px 17px;
    border:1px solid #57ef40;
    border-radius:4px;
    background:transparent;
    color:#57ef40;
    font:inherit;
    font-weight:700;
    cursor:pointer;
    transition:
        background .2s ease,
        color .2s ease;
}

.project-gallery-button:hover{
    background:#57ef40;
    color:#061506;
}


/* =========================================================
   PROJECT GALLERY / LIGHTBOX
   ========================================================= */

.project-lightbox{
    position:fixed;
    inset:0;
    z-index:1000;
    display:none;
    background:#020902f5;
}

.project-lightbox.open{
    display:flex;
    align-items:center;
    justify-content:center;
}

.project-lightbox-backdrop{
    position:absolute;
    inset:0;
}

.project-lightbox-content{
    position:relative;
    z-index:2;
    width:min(1200px,94%);
    height:min(850px,92vh);
    display:flex;
    flex-direction:column;
}

.project-lightbox-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-height:60px;
}

.project-lightbox-title{
    margin:0;
    font-size:clamp(20px,3vw,32px);
}

.project-lightbox-close{
    width:46px;
    height:46px;
    flex:0 0 46px;
    border:1px solid #ffffff35;
    border-radius:50%;
    background:#0b200c;
    color:#fff;
    font-size:28px;
    line-height:1;
    cursor:pointer;
}

.project-lightbox-main{
    position:relative;
    flex:1;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.project-lightbox-image{
    display:block;
    max-width:100%;
    max-height:calc(92vh - 150px);
    width:auto;
    height:auto;
    object-fit:contain;
}

.project-lightbox-prev,
.project-lightbox-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:52px;
    height:60px;
    border:1px solid #ffffff35;
    background:#061506d9;
    color:#fff;
    font-size:34px;
    cursor:pointer;
    z-index:3;
}

.project-lightbox-prev{
    left:0;
}

.project-lightbox-next{
    right:0;
}

.project-lightbox-counter{
    text-align:center;
    min-height:40px;
    padding-top:12px;
    color:#a8b8a8;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
    padding:50px 0;
    border-top:1px solid #28502a;
}


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

@media(max-width:800px){

    .nav nav a:not(.lang){
        display:none;
    }

    .grid,
    .projects{
        grid-template-columns:1fr;
    }

    .projects img{
        height:260px;
    }

    .project-lightbox-content{
        width:100%;
        height:100%;
        padding:12px;
    }

    .project-lightbox-header{
        min-height:55px;
    }

    .project-lightbox-image{
        max-height:calc(100vh - 150px);
        max-width:100%;
    }

    .project-lightbox-prev,
    .project-lightbox-next{
        width:44px;
        height:54px;
        font-size:28px;
    }

    .project-lightbox-prev{
        left:4px;
    }

    .project-lightbox-next{
        right:4px;
    }
}