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

body{
font-family: system-ui, -apple-system, Arial, sans-serif;
background:#000;
color:white;
line-height:1.6;
}


.site-header{
position:sticky;
top:0;
background:rgba(0,0,0,.8);
backdrop-filter:blur(8px);
z-index:100;
}

.header-inner{
max-width:1200px;
margin:auto;
padding:1rem 2rem;

display:flex;
align-items:center;
justify-content:space-between;
}

.logo img{
height:40px;
}

.site-title{
font-size:1.2rem;
font-weight:400;
}

.site-title span{
display:block;
font-size:.8rem;
opacity:.7;
}

nav a{
color:white;
text-decoration:none;
margin-left:2rem;
font-size:.9rem;
}


.intro{
max-width:1000px;
margin:6rem auto;
padding:0 2rem;

display:grid;
grid-template-columns:250px 1fr;
gap:3rem;
align-items:center;
}

.intro img{
width:100%;
border-radius:6px;
}

.clients{
margin:1rem 0;
opacity:.7;
font-size:.9rem;
}

.contact-intro{
margin-top:1.5rem;
font-size:.95rem;
}

.contact-intro a{
color:white;
text-decoration:none;
opacity:.9;
}

.contact-intro a:hover{
opacity:1;
text-decoration:underline;
}

.contact-separator{
margin:0 .6rem;
opacity:.5;
}
.portfolio{
max-width:1300px;
margin:6rem auto;
padding:0 2rem;
}

.portfolio h2{
margin-bottom:2rem;
font-weight:400;
}


.portfolio-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:1.5rem;
}


.image{
position:relative;
overflow:hidden;
border-radius:6px;
}

.image img{
width:100%;
height:100%;
object-fit:cover;
display:block;

transition:transform .4s ease;
}

.image:hover img{
transform:scale(1.05);
}


.image-description{
position:absolute;
bottom:0;
left:0;
right:0;

padding:1rem;

background:linear-gradient(
to top,
rgba(0,0,0,.8),
rgba(0,0,0,0)
);

font-size:.9rem;
opacity:0;

transition:opacity .3s;
}

.image:hover .image-description{
opacity:1;
}


.site-footer{
margin-top:6rem;
border-top:1px solid rgba(255,255,255,.2);
background:#000;
}

.footer-inner{
max-width:1200px;
margin:auto;
padding:3rem 2rem;

display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:2rem;
}

.site-footer h3{
font-size:.9rem;
margin-bottom:1rem;
font-weight:400;
opacity:.7;
}

.site-footer p{
font-size:.9rem;
margin-bottom:.7rem;
}

.site-footer a{
color:white;
text-decoration:none;
display:block;
margin-bottom:.4rem;
opacity:.8;
}

.site-footer a:hover{
opacity:1;
}

.footer-credit{
text-align:right;
}

.footer-note{
opacity:.6;
font-size:.8rem;
margin-top:.5rem;
}

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

a:visited{
color:white;
}

a:hover{
opacity:0.8;
}

a:active{
color:white;
}


@media (max-width:800px){

.intro{
grid-template-columns:1fr;
text-align:center;
}

.header-inner{
flex-direction:column;
gap:1rem;
}

nav a{
margin:0 1rem;
}

}