@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Inter:wght@300;400;600&display=swap');

:root{
  --cream:#f2e9e1; --shell:#eadfce; --taupe:#d9c8b7;
  --ink:#2f2b27; --accent:#b79f86;
  --radius:1.25rem; --shadow:0 10px 25px rgba(0,0,0,.07);
  --gap:clamp(1rem, 3vw, 2rem);
}

*{box-sizing:border-box}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--cream); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image: radial-gradient(ellipse at top left, rgba(255,255,255,.6), rgba(255,255,255,0) 60%);
}
a{color:inherit; text-decoration:none}
.wrap{width:min(1100px,92vw); margin:0 auto;}
.leaf-corner{position:fixed; top:0; left:0; width:160px; height:160px; z-index:0}

/* HERO */
.hero{
  position:relative; isolation:isolate;
  min-height:52vh; padding:clamp(3rem,8vw,6rem) 0 4rem;
  overflow:hidden; color:#1f1c18;
}
.hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:-1;
}
.hero .overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(242,233,225,.75), rgba(242,233,225,.35) 60%, rgba(242,233,225,0));
  z-index:0;
}
.hero-inner{position:relative; z-index:1;}
.brand{display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap;}
.logo{width:86px; height:86px; border-radius:50%; overflow:hidden; box-shadow:var(--shadow); background:var(--shell); display:grid; place-items:center; border:1px solid rgba(0,0,0,.06);}
.logo img{width:100%; height:100%; object-fit:cover; display:block}
.title{font-family:"Cormorant Garamond",serif; letter-spacing:.12em; text-transform:capitalize; font-weight:600; font-size:clamp(1.8rem,5vw,2.6rem); margin:0;}
.subtitle{opacity:.9; margin-top:.35rem}
.tagline{font-style:italic; opacity:.8; margin:.15rem 0 0}

.cta{margin-top:1rem; display:flex; gap:.75rem; flex-wrap:wrap;}
.btn{
  appearance:none; border:0; padding:.9rem 1.15rem; border-radius:999px;
  background:var(--ink); color:#fff; font-weight:600; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:.5rem;
  box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.alt{background:transparent; outline:2px solid var(--ink); color:var(--ink)}
.btn.alt:hover{opacity:.85}

.section{padding:clamp(2rem,5vw,4rem) 0}
h2{
  font-family:"Cormorant Garamond",serif; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  font-size:clamp(1.2rem,2.8vw,1.6rem);
  margin:0 0 1rem; color:#1f1c18;
}

.highlights{padding-top:1rem}
.chips{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center}
.chip{
  background:linear-gradient(180deg,#fff,var(--shell));
  border:1px solid rgba(0,0,0,.06);
  padding:.5rem .8rem; border-radius:999px;
  font-size:.95rem; box-shadow:var(--shadow)
}

.grid{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.card{
  background:linear-gradient(180deg,#fff,var(--shell));
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  padding:1.1rem; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
  min-height:260px; /* added to reduce CLS */
}
.card::after{
  content:''; position:absolute; inset:auto 0 -1px 0; height:10px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.05),transparent);
  opacity:.25;
}
.card-head{display:flex; align-items:center; gap:.6rem; margin-bottom:.4rem}
.card .icon{font-size:1.1rem}
.card .badge{margin-left:auto; font-size:.85rem; background:#fff; border:1px solid rgba(0,0,0,.08); padding:.2rem .5rem; border-radius:999px}
.card--ribbon .ribbon{
  position:absolute; top:12px; right:-40px; rotate:12deg;
  background:var(--ink); color:#fff; padding:.25rem 2.2rem; font-size:.85rem;
}

.list{list-style:none; padding:0; margin:.25rem 0 0; display:grid; gap:.4rem}
.list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  border-bottom:1px dotted rgba(0,0,0,.12); padding:.35rem 0
}
.list li:last-child{border-bottom:0}
.list em{font-style:normal; opacity:.7}
.micro{font-size:.9rem; opacity:.8; margin:.4rem 0 0}

.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem}
.gallery img{
  display:block; width:100%; height:auto;
  object-fit:cover; border-radius:.9rem;
  box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.06);
  transition:transform .2s ease
}
.gallery img:hover{transform:scale(1.01)}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.gallery{grid-template-columns:1fr}}

.form{
  display:grid; gap:1rem;
  background:#fff; padding:1.25rem;
  border-radius:var(--radius); box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.06)
}
.form .row{display:grid; gap:1rem; grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.form .row{grid-template-columns:1fr}}
label{display:grid; gap:.4rem; font-weight:500}
input,select,textarea{
  width:100%; padding:.75rem .85rem;
  border-radius:.75rem; border:1px solid rgba(0,0,0,.15);
  background:var(--cream); color:var(--ink); font:inherit;
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--accent); outline-offset:1px; background:#fff
}
.consent{display:flex; align-items:center; gap:.6rem; font-weight:400}
.consent input{width:1.1rem; height:1.1rem}
button.btn{cursor:pointer}

.site-footer{padding:2.5rem 0; border-top:1px solid rgba(0,0,0,.08); background:#fff4;}
small{opacity:.7}