* {

margin:0;
padding:0;
box-sizing:border-box;

}



body {


background:#050505;

color:white;

font-family:'Montserrat','Century Gothic',sans-serif;

font-weight:300;

}




/* NAV */


header {


position:fixed;

top:0;

width:100%;

padding:40px 60px;

z-index:20;


}



nav {


display:flex;

justify-content:space-between;

align-items:center;


}



.logo{

    display:flex;

    align-items:center;

    gap:16px;

    letter-spacing:5px;

    font-size:12px;

}.logo img{

    width:24px;

    height:24px;

    object-fit:contain;

}



.menu {


display:flex;

gap:45px;


}


.menu a {


color:white;

text-decoration:none;

font-size:11px;

letter-spacing:4px;

opacity:.8;

transition:.4s;


}


.menu a:hover {

opacity:1;

}





/* HERO */


.hero {


height:100vh;

position:relative;

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

text-align:center;


}



.hero-video {


position:absolute;

width:100%;

height:100%;

object-fit:cover;

z-index:-2;


}



.overlay {


position:absolute;

inset:0;

background:

linear-gradient(
rgba(0,0,0,.45),
rgba(0,0,0,.85)
);


z-index:-1;


}



.hero-content {


animation:fade 2s ease;


}



.hero h1 {


font-size:100px;

font-weight:200;

letter-spacing:20px;

line-height:1.1;


}



.hero p {


margin-top:40px;

font-size:13px;

letter-spacing:8px;


}




@keyframes fade {


from {

opacity:0;

transform:translateY(40px);

}


to {

opacity:1;

transform:none;

}


}







/* WORK */


.work {


padding:150px 60px;


}



h2 {


font-size:35px;

font-weight:200;

letter-spacing:12px;

margin-bottom:80px;


}




.projects {


display:grid;

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

gap:70px;


}




.image-container {


overflow:hidden;


}



.project img {


width:100%;

transition:1s cubic-bezier(.2,.8,.2,1);


}



.project:hover img {


transform:scale(1.08);


}




.project-info {


padding-top:25px;


}



.project-info h3 {


font-size:18px;

font-weight:300;

letter-spacing:6px;


}



.project-info p {


margin-top:10px;

font-size:12px;

letter-spacing:3px;

opacity:.6;


}








/* ABOUT */
/* =========================
   ABOUT
========================= */

.about {
    padding: 160px 60px;
    max-width: 950px;
}

.about-name {
    margin-bottom: 50px;

    font-size: 13px;
    letter-spacing: 7px;
}

.about-role {
    margin-bottom: 55px;

    font-size: clamp(28px, 4vw, 52px);
    font-weight: 200;
    line-height: 1.25;
    letter-spacing: 1px;
}

.about-statement {
    margin-bottom: 35px;

    font-size: clamp(22px, 3vw, 38px);
    font-weight: 200;
    line-height: 1.45;
    letter-spacing: 1px;
    opacity: 0.75;
}

@media (max-width: 768px) {
    .about {
        padding: 100px 25px;
    }

    .about-name {
        margin-bottom: 35px;
    }

    .about-role {
        margin-bottom: 40px;
    }
}






/* CONTACT */


.contact {


padding:150px 60px;


}



.contact p {


letter-spacing:5px;


}






footer {


padding:50px 60px;

font-size:11px;

letter-spacing:5px;

opacity:.5;


}






/* MOBILE */


@media(max-width:768px){


header {

padding:25px;

}



.menu {

gap:15px;

}



.hero h1 {


font-size:45px;

letter-spacing:10px;


}



.projects {


grid-template-columns:1fr;


}



.work,
.about,
.contact {


padding:90px 25px;


}



.about p {


font-size:18px;


}


}/* =========================
   LOADING SEQUENCE
========================= */


.loader {

position:fixed;

inset:0;

background:#050505;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:999;

animation:loaderFade 1.5s ease forwards;

animation-delay:3s;

}



.loader-text {

text-align:center;

animation:loaderMove 2s ease;

}



.loader h1 {


font-size:50px;

font-weight:200;

letter-spacing:18px;


}



.loader p {


margin-top:25px;

font-size:11px;

letter-spacing:8px;

opacity:.6;


}




.loader-line {


position:absolute;

bottom:30%;

width:0;

height:1px;

background:white;

animation:

lineGrow 2.5s ease forwards;


}



@keyframes lineGrow {


from {

width:0;

}


to {

width:200px;

}


}




@keyframes loaderMove {


from {

opacity:0;

transform:translateY(30px);

}


to {

opacity:1;

transform:none;

}


}



@keyframes loaderFade {


to {

opacity:0;

visibility:hidden;

}


}/* =========================
   SELECTED WORKS ARCHIVE
========================= */


.archive {

padding:150px 60px;

}



.archive-item {

display:grid;

grid-template-columns:100px 1fr;

padding:55px 0;

border-bottom:1px solid rgba(255,255,255,0.2);

transition:0.6s ease;

}



.archive-item span {

font-size:12px;

letter-spacing:5px;

opacity:.5;

}



.archive-item h3 {

font-size:42px;

font-weight:200;

letter-spacing:10px;

margin-bottom:15px;

transition:.5s ease;

}



.archive-item p {

font-size:13px;

letter-spacing:4px;

opacity:.6;

}



.archive-item .role {

margin-top:15px;

opacity:1;

}



.archive-item:hover {

padding-left:40px;

}



.archive-item:hover h3 {

letter-spacing:15px;

}



@media(max-width:768px){


.archive {

padding:90px 25px;

}


.archive-item {

grid-template-columns:50px 1fr;

}


.archive-item h3 {

font-size:24px;

letter-spacing:5px;

}


}/* =========================
   SELECTED WORKS
========================= */


.selected-works {

padding:150px 60px;

}




.feature-project {


display:grid;

grid-template-columns:1.3fr 1fr;

gap:80px;

align-items:center;

margin-bottom:180px;


}



.project-image {


overflow:hidden;


}



.project-image img {


width:100%;

display:block;

transition:1.2s ease;


}



.project-image:hover img {


transform:scale(1.04);


}




.project-text span {


font-size:12px;

letter-spacing:6px;

opacity:.5;


}



.project-text h3 {


font-size:55px;

font-weight:200;

letter-spacing:12px;

margin:25px 0;


}



.project-text p {


font-size:14px;

letter-spacing:3px;

line-height:2;

opacity:.7;

max-width:450px;


}



.project-text .credits {


margin-top:30px;

opacity:1;

letter-spacing:5px;


}

.showreel{

    padding:180px 60px;

}

.video-wrapper{

    position:relative;

    width:100%;

    aspect-ratio:16/9;

    overflow:hidden;

    background:#000;

}

.video-wrapper iframe{

    width:100%;
    height:100%;
    border:none;

}