:root{
  --ink:#0d0d0d;
  --paper:#f5efe7;
  --accent:#0f0f0f;
  --muted:#7b7b7b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--paper)}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; background:#fff8; backdrop-filter: blur(6px);
  border-bottom:1px solid #eee;
}
.brand{display:flex; align-items:center; gap:10px}
.kk{font-family:'Playfair Display',serif; letter-spacing:2px; font-weight:700; font-size:26px; padding:6px 10px; border:1px solid #ddd; border-radius:999px}
.wordmark{font-family:'Playfair Display',serif; letter-spacing:3px; font-size:16px}
.nav a{margin-left:14px; text-decoration:none; color:var(--ink); font-weight:600}
.btn{display:inline-block; padding:10px 16px; border-radius:999px; border:1px solid var(--ink);}
.btn.primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn.ghost{background:transparent}
.btn.small{padding:8px 12px; font-size:14px}

.hero{
  position:relative; min-height:70vh; display:grid; place-items:center;
  background: radial-gradient(1200px 500px at 50% 80%, rgba(255,255,255,0.9), rgba(245,239,231,1)),
              url('https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1350&q=60') center/cover no-repeat;
}
.hero-inner{text-align:center; padding:80px 16px; max-width:900px}
.hero-logo{font-family:'Playfair Display',serif; font-size:34px; letter-spacing:2px}
.hero-sub{color:var(--muted); margin:8px 0 22px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}

.fade-edge{
  position:absolute; left:0; right:0; bottom:-1px; height:160px;
  background: linear-gradient(180deg, rgba(245,239,231,0) 0%, var(--paper) 80%);
}

.section{padding:56px 18px; max-width:1000px; margin:0 auto}
h2{font-family:'Playfair Display',serif; font-size:28px; margin:0 0 18px}
.cards{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:#fff; padding:18px; border-radius:14px; border:1px solid #eee; box-shadow: 0 2px 12px rgba(0,0,0,.04)}
.card h3{margin:0 0 8px; font-family:'Playfair Display',serif}

.form .grid{display:grid; gap:12px; grid-template-columns:1fr 1fr}
.form input,.form textarea{width:100%; padding:12px 14px; border-radius:10px; border:1px solid #ddd; background:#fff}
.form textarea{resize:vertical}
.muted{color:var(--muted); font-size:.9em}

.footer{padding:28px 16px; text-align:center; color:var(--muted)}
@media (max-width:600px){
  .form .grid{grid-template-columns:1fr}
}