:root{
  --blush: #f9e0e3;
  --creamybrown: #EFE9E3;
  --lightbrown: #F9F8F6;
  --darkbrown: #C9B59C;
  --cream: #f7f3ef;
  --gold: #d4af37;
  --text: #3c3c3c;
  --muted: #7d7d7d;
  --white: #ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Poppins', sans-serif;
  color:var(--text);
  background: linear-gradient(180deg,var(--cream),#fff);
  -webkit-font-smoothing:antialiased;
}

.container{
  max-width:100%;
  margin:0 auto;
  padding:2rem;
}

/* Header */
.site-header{
  background:var(--creamybrown);
  padding:1.1rem 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.nav-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.brand .logo{
  font-family: 'Playfair Display', serif;
  margin:0;
  font-size:1.6rem;
  color:var(--darkbrown);
  letter-spacing:0.6px;
}
.brand a{
  text-decoration: none;
}
.tagline{ margin:0; color:var(--muted); font-size:0.85rem; }

/* Nav */
.site-nav a{ margin-left:1rem; text-decoration:none; color:var(--text); font-weight:500; }
.site-nav .btn.book-now{ background:var(--darkbrown); color:white; padding:0.5rem 1rem; border-radius:24px; text-decoration:none }

/* Hero */
.hero{
  background-size:cover;
  background-position:center;
  padding:2rem 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-inner{ display:flex; align-items:center; justify-content:center; width:100%}
.hero-card{
  padding:2.2rem;
  text-align:left;
  max-width:760px;
}
.hero-card h2{ font-family:'Playfair Display', serif; font-size:5.5rem; margin:0 0 0.5rem; color:var(--lightbrown) }
.hero-card p{ color:var(--lightbrown); margin-bottom:1.2rem; font-size:2.55rem }

.introduction{
  background-color: var(--lightbrown);
}
.introduction h2{
  collapse: var(--muted);
}
.introduction p{
  collapse: var(--muted);
}

/* Buttons */
.btn{ display:inline-block; padding:0.7rem 1.2rem; border-radius:12px; text-decoration:none; }
.btn.primary{ background:var(--darkbrown); color:var(--white); font-weight:600; border-radius:28px }
.btn.ghost{ background:transparent; border:2px solid var(--gold); padding:0.6rem 1rem; border-radius:28px; color:var(--gold) }

/* Services Preview */
.services-preview h3{ margin-top:1rem; font-size:1.4rem; font-family:'Playfair Display'; color:var(--text) }
.service-cards{ display:flex; gap:1rem; margin-top:1rem; flex-wrap:wrap }
.card{ background:var(--white); border-radius:16px; padding:1.8rem 1.4rem; box-shadow:0 6px 20px rgba(0,0,0,0.04); transition: transform .3s, box-shadow .3s; flex:1; min-width:220px }
.card:hover{ transform: translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,0.06); }
.card h4{ margin:0 0 0.4rem; font-family:'Playfair Display'; }
.card p{ color:var(--muted); font-size:0.95rem }
.card .price{ float:right; font-weight:600; color:var(--gold) }
.card img{
  width: 100%;
  border-radius: 25px;
}

/* Gallery */
.gallery-preview .grid{ display:flex; gap:12px; margin-top:1rem; }
.grid img{ width:100%; border-radius:12px; object-fit:cover; height:200px; }

/* Gallery page */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.gallery-item img{ width:100%; height:220px; object-fit:cover; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.06) }

/* Booking */
.booking-form{ display:grid; gap:12px; max-width:720px; }
.booking-form label{ display:flex; flex-direction:column; font-size:0.9rem; color:var(--muted) }
.booking-form input, .booking-form select, .booking-form textarea{
  padding:0.7rem;
  border-radius:10px;
  border:1px solid #efe7e9;
  background:white;
  font-size:1rem;
}

/* Admin table */
.admin-table{ width:100%; border-collapse:collapse; margin-top:1rem }
.admin-table th, .admin-table td{ padding:0.7rem; border-bottom:1px solid #f1efef; text-align:left; font-size:0.95rem }

/* Footer */
.site-footer{ background:var(--cream); padding:2rem 0; margin-top:2rem; color:var(--muted) }
.footer-grid{ display:flex; justify-content:space-between; gap:2rem; align-items:center }

/* Responsive */
@media (max-width:860px){
  .service-cards{ flex-direction:column }
  .gallery-grid{ grid-template-columns:repeat(2,1fr) }
  .nav-row{ flex-direction:column; gap:0.6rem; align-items:flex-start }
}
@media (max-width:520px){
  .hero{ padding:3.5rem 0 }
  .gallery-grid{ grid-template-columns:1fr }
  .hero-card h2{ font-size:2.2rem }
}