:root{
  --primary:#5A6C75;
  --secondary:#EAE2D6;
  --accent:#88A096;
  --bg:#FFFFFF;
  --ink:#20323A;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}
.noise-bg{
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(90vmax 60vmax at 10% 10%, rgba(136,160,150,0.08), transparent 60%),
    radial-gradient(80vmax 50vmax at 90% 0%, rgba(90,108,117,0.10), transparent 60%),
    radial-gradient(70vmax 40vmax at 50% 100%, rgba(234,226,214,0.50), transparent 60%);
  z-index:0;
  filter: blur(0.2px);
}
.container{width:min(1100px, 92%); margin-inline:auto}
.site-header{
  position:sticky; top:0; z-index:10;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(0,0,0,0.05);
}
.nav{display:flex; align-items:center; gap:1rem; padding:0.8rem 0}
.logo{display:flex; align-items:center; gap:0.6rem; text-decoration:none; color:var(--ink); font-weight:700}
.logo-shape{
  width:28px; height:28px; border-radius:8px;
  background: conic-gradient(from 220deg, var(--accent), var(--secondary), var(--primary));
}
.logo-text{font-family:"Playfair Display", serif; font-size:1.2rem; letter-spacing:.2px}
.main-nav{display:flex; gap:1.2rem; margin-left:auto}
.main-nav a{color:var(--ink); text-decoration:none; padding:.4rem .2rem; border-radius:.6rem}
.main-nav a:hover{background:rgba(32,50,58,0.06)}
.cta-wrap{margin-left:.6rem}
.btn{display:inline-block; padding:.7rem 1.1rem; border-radius:999px; text-decoration:none; font-weight:700}
.btn-cta{background:var(--primary); color:white}
.btn-cta:hover{background:#4b5b63}

.nav-toggle{
  display:none; width:40px; height:36px; border:0; background:transparent; cursor:pointer;
}
.nav-toggle span{display:block; width:26px; height:2px; background:var(--ink); margin:5px auto}

.page{position:relative; z-index:1}
.hero{
  padding: clamp(4rem, 8vw, 8rem) 0 clamp(2rem, 6vw, 4rem);
}
.hero .eyebrow{
  text-transform:uppercase; letter-spacing:.12em; font-size:.85rem; color:#4b5b63;
}
.hero h1{
  font-family:"Playfair Display", serif; font-size: clamp(2rem, 5.2vw, 3.8rem); line-height:1.1; margin:.4rem 0 1rem;
}
.hero p{max-width: 58ch; font-size:1.1rem}
.hero .actions{margin-top:1.2rem; display:flex; gap:.8rem; flex-wrap:wrap}

.section{padding: clamp(2rem, 5vw, 3.5rem) 0}
.section h2{
  font-family:"Playfair Display", serif; font-size: clamp(1.6rem,3.2vw,2.2rem); margin:0 0 .6rem;
}
.grid{display:grid; gap:1.2rem}
.grid.cols-3{grid-template-columns: repeat(3, 1fr)}
.card{
  background: rgba(255,255,255,0.8);
  border:1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding:1.2rem 1.1rem;
}
.card h3{margin:.2rem 0 .4rem; font-size:1.1rem}
.card p{margin:0}

.callout{
  background: linear-gradient(180deg, rgba(234,226,214,0.5), transparent);
  border:1px solid rgba(0,0,0,0.06);
  border-radius:20px; padding:1.2rem 1.2rem;
}

.site-footer{padding:2rem 0; background:rgba(0,0,0,0.03); border-top:1px solid rgba(0,0,0,0.06)}
.site-footer p{margin:.2rem 0}

.lead{font-size:1.15rem}

.embed{border-radius:16px; overflow:hidden; border:1px solid rgba(0,0,0,0.08)}

@media (max-width: 900px){
  .main-nav{display:none; margin-left:0}
  .main-nav.open{display:flex; flex-direction:column; position:absolute; top:64px; left:0; right:0; background:white; padding:1rem; border-bottom:1px solid rgba(0,0,0,0.05)}
  .nav-toggle{display:block; margin-left:auto}
  .cta-wrap{display:none}
  .grid.cols-3{grid-template-columns:1fr}
}