*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
background:#f5f1ea;
color:#1f1f1a;
line-height:1.7;
overflow-x:hidden;
}
img{max-width:100%;display:block}
.container{width:min(1180px,90%);margin:auto}
.nav{
position:fixed;
top:0;
width:100%;
z-index:100;
background:rgba(245,241,234,.92);
backdrop-filter:blur(12px);
padding:18px 0;
}
.nav-inner{
display:flex;
justify-content:space-between;
align-items:center;
}
.logo{
height:60px;
width:auto;
}
.nav-links{
display:flex;
gap:28px;
}
.nav-links a{
text-decoration:none;
color:#1f1f1a;
font-size:14px;
}
.hero{
height:100vh;
background:url('https://images.unsplash.com/photo-1447933601403-0c6688de566e?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat;
display:flex;
align-items:center;
position:relative;
}
.overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.55);
}
.hero-content{
position:relative;
z-index:2;
max-width:720px;
color:white;
}
.eyebrow{
text-transform:uppercase;
letter-spacing:.35em;
font-size:12px;
margin-bottom:24px;
opacity:.75;
}
.dark-text{
color:#7a746d;
}
h1{
font-size:clamp(58px,9vw,120px);
font-weight:300;
line-height:.92;
}
h2{
font-size:clamp(40px,6vw,72px);
font-weight:300;
line-height:1.1;
margin-bottom:30px;
}
.lead{
font-size:22px;
margin-top:28px;
max-width:650px;
color:rgba(255,255,255,.9);
}
.button{
display:inline-block;
margin-top:40px;
padding:16px 34px;
border-radius:999px;
background:white;
color:black;
text-decoration:none;
font-size:14px;
}
.section{
padding:120px 0;
}
.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}
.rounded{
border-radius:32px;
}
.tall{
height:700px;
object-fit:cover;
width:100%;
}
.dark{
background:#101010;
color:white;
}
.forest-section{
background:url('https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat;
position:relative;
}
.forest-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.72);
}
.forest-content{
position:relative;
z-index:2;
}
.cards,.products{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:28px;
margin-top:60px;
}
.card{
background:rgba(255,255,255,.05);
padding:38px;
border-radius:30px;
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(4px);
}
.card p{
color:rgba(255,255,255,.7);
}
.card h3{
font-size:28px;
font-weight:300;
margin-bottom:18px;
}
.product{
background:white;
border-radius:30px;
overflow:hidden;
box-shadow:0 10px 35px rgba(0,0,0,.06);
}
.product img{
height:320px;
width:100%;
object-fit:cover;
}
.product-content{
padding:34px;
}
.quote-section{
position:relative;
padding:160px 0;
background:url('https://images.unsplash.com/photo-1497935586351-b67a49e012bf?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat;
text-align:center;
color:white;
}
.quote-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.72);
}
.quote-inner{
position:relative;
z-index:2;
}
.quote-title{
font-size:clamp(48px,8vw,110px);
}
.quote-text{
max-width:850px;
margin:35px auto 0;
font-size:22px;
color:rgba(255,255,255,.82);
}
.alt{
background:#ebe5db;
}
.alchemy-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
margin-top:40px;
}
.alchemy-grid div{
background:white;
padding:24px;
border-radius:18px;
font-size:20px;
}
.center{
text-align:center;
}
.contact-text{
max-width:760px;
margin:0 auto;
color:rgba(255,255,255,.75);
font-size:20px;
}
.contact-boxes{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin-top:40px;
}
.contact-box{
background:white;
color:black;
padding:18px 28px;
border-radius:999px;
}
.address{
margin-top:40px;
color:rgba(255,255,255,.6);
}
footer{
padding:36px 0;
background:#0d0d0d;
color:#aaa;
}
.footer-inner{
display:flex;
justify-content:space-between;
align-items:center;
}
.footer-links{
display:flex;
gap:20px;
}
.footer-links a{
color:#aaa;
text-decoration:none;
}
@media(max-width:900px){
.grid{
grid-template-columns:1fr;
}
.hero{
height:auto;
padding:180px 0 120px;
}
.nav-links{
display:none;
}
.logo{
height:48px;
}
}

.menu-toggle{
display:none;
background:none;
border:none;
font-size:32px;
cursor:pointer;
color:#1f1f1a;
}

@media(max-width:900px){

.menu-toggle{
display:block;
z-index:999;
}

.nav-links{
position:absolute;
top:100%;
left:0;
right:0;
background:#f5f1ea;
padding:24px;
display:none;
flex-direction:column;
gap:18px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

body.menu-open .nav-links{
display:flex;
}

.nav-inner{
position:relative;
}

}