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

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:#f5f5f2;
color:#111;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}

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

.noise{
position:fixed;
inset:0;
opacity:.03;
pointer-events:none;
background-image:radial-gradient(#000 1px,transparent 1px);
background-size:4px 4px;
z-index:9999;
}

.navbar{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:28px 48px;
backdrop-filter:blur(20px);
background:rgba(245,245,242,.72);
border-bottom:1px solid rgba(0,0,0,.06);
z-index:999;
}

.logo{
font-size:14px;
letter-spacing:.18em;
font-weight:600;
}

.nav-links{
display:flex;
gap:32px;
font-size:13px;
color:rgba(0,0,0,.65);
}

.hero{
min-height:100vh;
display:flex;
align-items:center;
padding:140px 64px 80px;
}

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

.hero-tag{
font-size:13px;
letter-spacing:.16em;
text-transform:uppercase;
color:rgba(0,0,0,.45);
margin-bottom:24px;
}

h1{
font-size:clamp(60px,10vw,140px);
line-height:.92;
letter-spacing:-.06em;
margin-bottom:32px;
}

.hero-description{
max-width:700px;
font-size:18px;
line-height:1.8;
color:rgba(0,0,0,.66);
margin-bottom:48px;
}

.hero-actions{
display:flex;
gap:18px;
flex-wrap:wrap;
}

.btn{
padding:15px 26px;
border-radius:999px;
font-size:14px;
transition:.3s ease;
}

.primary{
background:#111;
color:white;
}

.primary:hover{
transform:translateY(-2px);
}

.secondary{
border:1px solid rgba(0,0,0,.1);
background:white;
}

.metrics-section{
padding:0 64px 120px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:24px;
}

.metric-card{
padding:36px;
background:white;
border-radius:28px;
border:1px solid rgba(0,0,0,.06);
}

.metric-number{
font-size:42px;
margin-bottom:12px;
letter-spacing:-.05em;
}

.metric-label{
color:rgba(0,0,0,.55);
}

.content-section,
.journal-section{
padding:120px 64px;
}

.section-label{
font-size:13px;
letter-spacing:.16em;
text-transform:uppercase;
color:rgba(0,0,0,.45);
margin-bottom:48px;
}

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

.project-card{
background:white;
border-radius:32px;
padding:36px;
border:1px solid rgba(0,0,0,.06);
transition:.35s ease;
}

.project-card:hover{
transform:translateY(-6px);
}

.project-card.large{
grid-column:span 2;
}

.project-category{
font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;
color:rgba(0,0,0,.45);
margin-bottom:18px;
}

.project-card h2{
font-size:32px;
margin-bottom:18px;
letter-spacing:-.04em;
}

.project-card p{
line-height:1.8;
color:rgba(0,0,0,.64);
}

.journal-item{
padding-bottom:36px;
margin-bottom:36px;
border-bottom:1px solid rgba(0,0,0,.08);
}

.journal-date{
font-size:13px;
margin-bottom:12px;
color:rgba(0,0,0,.42);
}

.journal-item h3{
font-size:28px;
margin-bottom:16px;
letter-spacing:-.04em;
}

.journal-item p{
max-width:760px;
line-height:1.8;
color:rgba(0,0,0,.62);
}

footer{
padding:80px 64px;
display:flex;
justify-content:space-between;
align-items:center;
border-top:1px solid rgba(0,0,0,.08);
flex-wrap:wrap;
gap:24px;
}

.footer-title{
font-size:16px;
margin-bottom:8px;
}

.footer-sub{
color:rgba(0,0,0,.55);
}

.footer-links{
display:flex;
gap:24px;
color:rgba(0,0,0,.52);
}

@media(max-width:768px){

.nav-links{
display:none;
}

.hero,
.content-section,
.journal-section,
footer{
padding-left:24px;
padding-right:24px;
}

.metrics-section{
padding-left:24px;
padding-right:24px;
}

.navbar{
padding:24px;
}

.project-card.large{
grid-column:span 1;
}

h1{
font-size:64px;
}
}