@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Inter:wght@300;400;500;600&display=swap');
:root{--bg:#f8f4ee;--cream:#efe7dc;--green:#5f6b55;--text:#292622;}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text);line-height:1.7}
.wrap{width:min(1180px,92%);margin:auto}
header{position:fixed;width:100%;background:rgba(248,244,238,.9);backdrop-filter:blur(10px);z-index:99}
.nav{display:flex;justify-content:space-between;padding:18px 0}
nav a{text-decoration:none;color:var(--text);margin-left:24px}
.brand{font-family:"Cormorant Garamond",serif;font-size:2rem}
.hero{min-height:100vh;display:grid;place-items:center;background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.45)),url('https://images.unsplash.com/photo-1517457373958-b7bdd4587205?q=80&w=1600&auto=format&fit=crop') center/cover;color:white;text-align:center}
.hero-content{max-width:800px;padding:20px}
.hero h1{font-family:"Cormorant Garamond",serif;font-size:5rem;line-height:1}
.lead{font-size:1.2rem;margin:20px 0}
.eyebrow,.section-tag{letter-spacing:.15em;text-transform:uppercase;font-size:.8rem;color:var(--green)}
.light{color:#d9d1c6}
.buttons{display:flex;gap:16px;justify-content:center}
.btn{background:var(--green);color:white;padding:14px 22px;border:none;border-radius:999px;text-decoration:none}
.secondary{background:transparent;border:1px solid white}
.section{padding:110px 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.image-card,.portrait,.ph{background:#d9d1c6;border-radius:18px}
.image-card,.portrait{height:420px;display:grid;place-items:center}
.cream{background:var(--cream)}
.dark{background:#2f342d;color:white}
h2{font-family:"Cormorant Garamond",serif;font-size:3rem;margin:10px 0 20px}
.grid,.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.card,.services>div{background:white;padding:18px;border-radius:18px;transition:.3s}
.card:hover,.services>div:hover{transform:translateY(-8px)}
.ph{height:220px;margin-bottom:14px}
.contact form{display:grid;gap:14px;max-width:650px;margin:25px auto}
input,textarea{padding:16px;border:1px solid #d7d1c7;border-radius:12px}
textarea{min-height:180px}
footer{text-align:center;padding:40px 0}
@media(max-width:768px){
.hero h1{font-size:3rem}
.split{grid-template-columns:1fr}
.nav{flex-direction:column;gap:12px}
nav a{margin:0 12px 0 0}
.buttons{flex-direction:column}
}