*{
box-sizing:border-box;
}


html{
scroll-behavior:smooth;
}


body{

margin:0;

font-family:
-apple-system,
BlinkMacSystemFont,
"SF Pro Display",
"Helvetica Neue",
Arial,sans-serif;

color:#111;

background:#fafafa;

overflow-x:hidden;

}





.background-grid{

position:fixed;

inset:0;

background-image:
linear-gradient(#00000008 1px, transparent 1px),
linear-gradient(90deg,#00000008 1px,transparent 1px);

background-size:80px 80px;

mask-image:linear-gradient(to bottom,black,transparent);

pointer-events:none;

z-index:-1;

}





nav{

position:fixed;

top:0;

width:100%;

display:flex;

justify-content:space-between;

padding:30px 8%;

z-index:10;

transition:.4s;

}



nav.scrolled{

background:#ffffffcc;

backdrop-filter:blur(20px);

box-shadow:0 10px 30px #00000008;

}



.logo{

font-weight:700;

font-size:28px;

letter-spacing:-2px;

}



.links a{

text-decoration:none;

color:#555;

margin-left:35px;

position:relative;

}



.links a::after{

content:"";

position:absolute;

bottom:-6px;

left:0;

width:0;

height:1px;

background:#111;

transition:.3s;

}



.links a:hover::after{

width:100%;

}







.hero{

padding:190px 8% 140px;

max-width:1200px;

}



.eyebrow{

font-size:13px;

letter-spacing:3px;

color:#777;

}



h1{

font-size:
clamp(75px,12vw,145px);

letter-spacing:-8px;

line-height:.85;

margin:35px 0;

}



.hero-text{

font-size:28px;

line-height:1.5;

color:#555;

max-width:800px;

}




.focus-list{

display:flex;

gap:40px;

margin-top:40px;

color:#555;

}




.buttons{

margin-top:55px;

}



.primary,
.secondary{

padding:16px 32px;

border-radius:50px;

text-decoration:none;

margin-right:15px;

transition:.3s;

}



.primary{

background:#111;

color:white;

}



.primary:hover{

transform:translateY(-3px);

}



.secondary{

border:1px solid #ccc;

color:#111;

}



.secondary:hover{

background:#eee;

}





section{

padding:120px 8%;

}




h2{

font-size:
clamp(45px,6vw,75px);

letter-spacing:-4px;

}





.project{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

margin-top:110px;

}



.image-wrap{

border-radius:35px;

overflow:hidden;

}



.image-wrap img{

width:100%;

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

}



.image-wrap:hover img{

transform:scale(1.04);

}




.project-content h3{

font-size:50px;

letter-spacing:-3px;

}



.project-content p{

font-size:21px;

line-height:1.7;

color:#555;

}




.project-meta{

display:flex;

gap:20px;

margin-top:30px;

color:#777;

}



.project-meta span{

border-bottom:1px solid #ddd;

padding-bottom:5px;

}




.expand{

margin-top:35px;

background:none;

border:none;

font-size:17px;

cursor:pointer;

padding:0;

}



.details{

display:none;

margin-top:20px;

color:#777;

}



.details.show{

display:block;

}




#about p{

max-width:850px;

font-size:26px;

line-height:1.6;

color:#555;

}




.contact-links{

display:flex;

flex-direction:column;

gap:20px;

font-size:24px;

}



.contact-links a{

color:#111;

text-decoration:none;

}



footer{

padding:50px 8%;

color:#777;

}




.reveal{

opacity:0;

transform:translateY(40px);

transition:
opacity .8s ease,
transform .8s ease;

}



.reveal.visible{

opacity:1;

transform:none;

}







@media(max-width:800px){


nav{

padding:25px;

}


.links a{

margin-left:15px;

}


.hero{

padding:140px 25px 80px;

}


section{

padding:80px 25px;

}


.project{

grid-template-columns:1fr;

gap:40px;

}


h1{

letter-spacing:-4px;

}



.focus-list{

flex-direction:column;

gap:10px;

}



}