@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&display=swap');


* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html {
    scroll-behavior:smooth;
}


body {
    font-family:Inter, sans-serif;
    background:#0b0b0b;
    color:#f5f5f5;
    overflow-x:hidden;
}


a {
    color:inherit;
    text-decoration:none;
}


.navbar {

    position:fixed;
    top:0;
    width:100%;
    padding:30px 5%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:10;

    backdrop-filter:blur(15px);
}


.logo {

    font-size:1.4rem;
    font-weight:700;
    letter-spacing:-0.05em;

}


nav {
    display:flex;
    gap:35px;
    font-size:.9rem;
}


nav a {
    opacity:.7;
    transition:.3s;
}


nav a:hover {
    opacity:1;
}



.hero {

    min-height:100vh;
    display:flex;
    align-items:center;
    padding:0 5%;
    position:relative;
}


.hero-content {
    max-width:900px;
}


.small {
    text-transform:uppercase;
    letter-spacing:.2em;
    font-size:.75rem;
    opacity:.6;
    margin-bottom:30px;
}


h1 {

    font-size:clamp(3rem,8vw,7rem);
    line-height:.95;
    letter-spacing:-.08em;
    font-weight:800;

}


h1 span {

    display:block;
    font-style:italic;
    color:#aaa;

}


.intro {

    max-width:500px;
    margin:40px 0;
    color:#aaa;
    line-height:1.7;

}


.button {

    display:inline-block;
    border:1px solid #444;
    padding:15px 30px;
    border-radius:50px;
    transition:.4s;

}


.button:hover {

    background:white;
    color:black;

}



.floating-shape {

    position:absolute;
    right:10%;
    width:300px;
    height:300px;
    border-radius:50%;
    background:linear-gradient(135deg,#444,#111);
    filter:blur(2px);
    animation:float 8s infinite alternate;

}


@keyframes float {

    from {
        transform:translateY(-30px);
    }

    to {
        transform:translateY(30px);
    }

}



section {

    padding:120px 5%;

}


.section-title p {

    text-transform:uppercase;
    font-size:.7rem;
    letter-spacing:.2em;
    color:#777;

}


.section-title h2 {

    font-size:4rem;
    letter-spacing:-.06em;

}



.project-grid {

    margin-top:70px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:40px;

}


.project img {

    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    filter:grayscale(100%);
    transition:.6s;

}


.project:hover img {

    filter:grayscale(0%);
    transform:scale(1.03);

}


.project-info {

    padding-top:20px;

}


.project-info h3 {

    font-size:1.4rem;

}


.project-info p {

    color:#777;
    margin:10px 0;

}



.studio-content {

    max-width:800px;
    margin-top:50px;
    font-size:1.5rem;
    line-height:1.5;

}


.studio-content p {

    margin-bottom:30px;

}



.team {

    margin-top:60px;

}


.member {

    border-top:1px solid #333;
    padding-top:25px;

}


.member p {

    font-size:1rem;
    color:#777;

}



.contact-box {

    margin-top:50px;
    font-size:2rem;

}


.contact-box a {

    display:block;
    margin:30px 0;
}


.socials {

    display:flex;
    gap:30px;
    font-size:1rem;

}


footer {

    padding:40px 5%;
    color:#555;
    font-size:.8rem;

}



.reveal {

    opacity:0;
    transform:translateY(40px);
    transition:1s ease;

}


.reveal.visible {

    opacity:1;
    transform:none;

}



@media(max-width:700px){

    nav {
        display:none;
    }


    .floating-shape {
        width:180px;
        height:180px;
        right:5%;
        opacity:.4;
    }


    .section-title h2 {
        font-size:3rem;
    }

}

/* PROJECT PAGES */


.project-page {
    padding-top:120px;
}



.project-hero {

    padding:80px 5%;

}


.project-hero h1 {

    margin:30px 0;

}



.project-description {

    max-width:600px;
    color:#999;
    font-size:1.3rem;
    line-height:1.7;

}



.hero-image {

    width:100%;
    margin-top:80px;
    max-height:80vh;
    object-fit:cover;

}




.project-details {

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    padding:80px 5%;
    border-top:1px solid #222;
    border-bottom:1px solid #222;

}



.label {

    color:#666;
    text-transform:uppercase;
    font-size:.7rem;
    letter-spacing:.2em;
    margin-bottom:15px;

}




.project-text {

    max-width:800px;
    padding:120px 5%;

}



.project-text h2 {

    font-size:3rem;
    letter-spacing:-.05em;
    margin-bottom:40px;

}



.project-text p {

    font-size:1.4rem;
    line-height:1.8;
    color:#bbb;

}




.gallery {

    padding:0 5%;
    display:grid;
    gap:40px;

}


.gallery img {

    width:100%;
    display:block;

}



.next-project {

    padding:120px 5%;
    font-size:2rem;

}



.next-project a {

    transition:.3s;

}


.next-project a:hover {

    opacity:.5;

}





@media(max-width:700px){

    .project-details {

        grid-template-columns:1fr;

    }


    .project-text p {

        font-size:1.1rem;

    }

}