
:root{
  --cream:#f5efe7;
  --beige:#e8decd;
  --tan:#d7c7ad;
  --moka:#9c7e56;
  --gold:#b89a5a;
  --brown:#6d5536;
  --ink:#3b3b3b;
  --white:#fff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Arial;
  line-height:1.7;
  color:var(--ink);
  background:linear-gradient(180deg,var(--cream),var(--beige));
}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:1rem;top:1rem;z-index:10;background:var(--white);padding:.5rem 1rem;border:2px solid var(--gold)}

.site-header{
  position:sticky;top:0;z-index:9;
  display:flex;justify-content:space-between;align-items:center;
  padding:.5rem 1rem;background:var(--cream);border-bottom:1px solid rgba(0,0,0,.06)
}
.brand{display:flex;gap:.75rem;align-items:center}
.logo{height:44px;width:auto}
.brand-text strong{font-family:'Playfair Display', serif;font-weight:700;letter-spacing:.5px}
.brand-text span{display:block;font-size:.8rem;color:var(--brown)}
.nav{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.nav a{padding:.45rem .8rem;border-radius:999px;text-decoration:none;color:var(--brown);font-weight:600}
.nav a:hover{background:var(--beige)}
.nav .btn.booking{background:var(--gold);color:white}

.hero{position:relative;min-height:62vh;display:grid;place-items:center;overflow:hidden}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) blur(1px)}
.hero-inner{position:relative;z-index:1;color:#fff;text-align:center;padding:4rem 1rem}
.hero h1{font-family:'Playfair Display',serif;font-size:clamp(2rem,5vw,3rem);margin:.2rem 0}
.lead{max-width:780px;margin:0 auto 1rem}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.btn{border-radius:999px;border:2px solid var(--gold);padding:.6rem 1.1rem;text-decoration:none;font-weight:700}
.btn.primary{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn.ghost{background:transparent;color:#fff;border-color:#fff}
.btn.primary:hover{filter:brightness(.92)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}

.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem;padding:1rem}
.qcard{display:grid;place-items:center;padding:1.1rem;background:var(--tan);color:#fff;text-decoration:none;border-radius:18px;font-weight:700;border:2px solid var(--gold)}
.qcard:hover{filter:brightness(.98)}

section{padding:3rem 1rem}
section h2{font-family:'Playfair Display',serif;color:var(--brown);font-size:clamp(1.6rem,3vw,2.2rem)}
.two-col{display:grid;gap:1.2rem;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}
.two-col.alt{background:var(--beige)}
.two-col .media img{width:100%;border-radius:16px}
.bullets{padding-left:1.1rem}
.bullets li{margin:.25rem 0}

.cards .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1rem}
.card{background:var(--white);border-radius:16px;padding:1rem;border:1px solid rgba(0,0,0,.06)}
.card img{width:100%;height:180px;object-fit:cover;border-radius:12px}
.card h3{font-family:'Playfair Display',serif;margin:.6rem 0;color:var(--brown)}

.pricing .pgrid{display:grid;grid-template-columns:1fr 420px;gap:1rem;align-items:start}
.pricing table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
.pricing thead{background:var(--tan);color:#fff}
.pricing th,.pricing td{padding:.65rem .8rem;border-bottom:1px solid #eee;text-align:left}
.pricing figure img{width:100%;border-radius:12px}

.faq .accordion{max-width:960px;margin:auto}
.faq details{background:#fff;border-radius:12px;border:1px solid rgba(0,0,0,.08);padding:1rem;margin:.6rem 0}
.faq summary{font-weight:700;color:var(--brown);font-family:'Playfair Display',serif}

.contact .cgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem;align-items:center}
.contact figure img{width:100%;border-radius:16px}

.site-footer{padding:1rem;text-align:center;color:#6b5b43}
.site-footer .back{margin-left:.5rem}

.floating-wa{
  position:fixed;right:1rem;bottom:1rem;background:var(--gold);color:#fff;
  padding:.7rem 1rem;border-radius:999px;border:2px solid #fff;text-decoration:none;font-weight:800
}

/* Responsive */
@media (max-width: 900px){
  .two-col,.pricing .pgrid,.contact .cgrid{grid-template-columns:1fr}
  .nav{display:none}
}
