:root{
  --bg:#f3efe9; --card:#ffffff; --ink:#222; --muted:#6b6b6b;
  --accent:#121212; --accent-ink:#fff; --border:rgba(0,0,0,.08);
  --cta:#2BB0A3; /* softer teal for CTAs (Book Now, Send request, mobile CTA) */
  --radius:18px; --radius-lg:26px; --space:clamp(16px,2vw,24px);
  --header-h:64px; /* single source of truth for header height */
}

/* never render elements marked hidden (prevents “double menu”) */
[hidden]{display:none !important;}

*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility
}
img{max-width:100%;height:auto;display:block;border-radius:16px}
.container{width:min(1120px, 92%);margin:0 auto;max-width:100vw}
a{color:inherit;text-decoration:none}

/* Type scale */
.eyebrow{letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:var(--muted)}
.h2{font-family:"Playfair Display", Georgia, serif;font-size:clamp(28px,4vw,40px);line-height:1.2;margin:.4em 0}
.h3{font-family:"Playfair Display", Georgia, serif;font-size:clamp(22px,3vw,30px);line-height:1.2;margin:.2em 0 10px}
.display{font-family:"Playfair Display", Georgia, serif;font-size:clamp(40px,6vw,60px);line-height:1.1;margin:0 0 10px}
.lead{max-width:60ch;color:var(--muted);margin:0 0 20px}

/* Slick heading stack: title + subtitle rhythm */
.section .h2{ margin: 0 0 12px; }
.h3{ margin: 0 0 8px; }
.lead{ margin: 6px 0 16px; color: var(--muted); }

/* Rooms & Rates: align spacing with About section */
#rooms .h2{ margin-bottom: 14px; }
#rooms .feature{ row-gap: 12px; }
#rooms .feature .left .h3{ margin: 0 0 8px; }
#rooms .feature .left .lead{ margin: 4px 0 14px; }

/* ----- BUTTONS (shared) ----- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 20px;border-radius:999px;font-weight:600;line-height:1;
  font-size:16px; /* unified size */
  border:1px solid var(--cta); background:var(--cta); color:#fff; cursor:pointer;
}
.btn:hover{opacity:.9}
.btn-primary{ background:var(--cta); border-color:var(--cta); color:#fff }

/* Header CTA should not appear on mobile (per latest ask) */
.header-cta{display:none !important;}

/* ----- HEADER / NAV ----- */
/* Use FIXED across all viewports (sticky + backdrop-filter is flaky on some desktops) */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1100; /* above content; mobile drawer sits higher */
  background:rgba(243,239,233,.7);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--border);
  min-height:var(--header-h);
}
/* Offset the page so content doesn't slide under the fixed header */
body{ padding-top: var(--header-h); }

.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px;font-family:"Playfair Display", Georgia, serif;font-weight:700;font-size:20px}
.brand img{width:36px;height:36px;border-radius:50%}
.menu{display:flex;gap:6px;list-style:none;margin:0;padding:0;align-items:center}
.menu a{padding:10px 12px;border-radius:999px}
.menu a.cta{background:var(--cta);color:#fff;border:1px solid var(--cta)}
.nav-toggle{display:none;background:none;border:0;font-size:28px;padding:10px;line-height:1;cursor:pointer}

/* ----- TOP HERO PHOTO (new) ----- */
.hero-top{padding-top:8px}
.hero-photo{margin:10px 0 2px}
.hero-photo img{
  width:100%;
  display:block;
  border-radius:20px;
  object-fit:cover;
  aspect-ratio:21/9; /* landscape, shorter height than other images on desktop */
}
/* Mobile: same content width as other images but even shorter height */
@media (max-width:900px){
  .hero-photo img{aspect-ratio:16/7;}
}

/* ----- HERO (text block only now) ----- */
.hero{position:relative;display:grid;align-items:end;border-bottom:1px solid var(--border)}
.hero .container{padding:3vh 0 6vh}

/* ----- SECTIONS / LAYOUT ----- */
.section{padding:calc(var(--space)*3) 0}
.section.alt{background:#f7f4ef;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.grid-2{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space);align-items:center}
.media-card img{border-radius:20px}

.feature{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space);align-items:center;margin-bottom:calc(var(--space)*2)}
.feature .left{order:1}
.feature .right{order:2}
.feature .feature-media img{border-radius:20px}

/* ----- CONTACT (desktop 2/3 + 1/3) ----- */
.contact .contact-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:clamp(18px,3vw,28px);
  align-items:stretch; /* match heights across columns */
}
.form{
  background:var(--card);border:1px solid var(--border);border-radius:24px;
  padding:clamp(18px,3vw,28px)
}
.form-title{font-family:"Playfair Display", Georgia, serif;font-size:clamp(26px,3.6vw,34px);margin:0 0 4px}
.form-sub{color:var(--muted);margin:0 0 18px}

.row{display:grid;gap:14px;margin-bottom:14px}
.row.one{grid-template-columns:1fr}
.row.two{grid-template-columns:1fr 1fr}
.row.three{grid-template-columns:1fr 1fr 1fr}

.field{display:grid;gap:8px}
label{font-size:.9rem;color:#4a4a4a}
input, textarea, select{
  appearance:none;width:100%;padding:14px 16px;border:1px solid var(--border);border-radius:12px;
  background:#fcfbf9;outline:none;font:inherit;color:var(--ink)
}
input:focus, textarea:focus{border-color:#bbb;background:#fff;box-shadow:0 0 0 3px rgba(0,0,0,.04)}
textarea{resize:vertical;min-height:160px}
.actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* Right column must fill full height and each item gets equal height */
.contact-info{
  display:grid;
  grid-template-rows:repeat(4, 1fr); /* 4 equal rows for WhatsApp/Location/Transfers/Email */
  gap:14px;
  height:100%;
}
.info-block{
  display:flex; align-items:center; height:100%;
  background:var(--card); padding:16px; border-radius:16px; border:1px solid var(--border)
}
.info-row{display:flex;align-items:center;gap:10px}
.info-row svg{flex:0 0 auto}

/* ----- DATE PICKER ACCENTS ----- */
input[type="date"]{accent-color:#a7cffb;background:#fcfbf9;color-scheme:light}
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-calendar-picker-indicator{background-color:transparent}

/* ----- REVIEWS ----- */
.reviews{display:grid;gap:14px}
.review-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
.stars{display:inline-flex;gap:2px;vertical-align:middle}
.stars svg{width:18px;height:18px}

/* ----- FOOTER ----- */
.site-footer{padding:40px 0;border-top:1px solid var(--border);text-align:center;background:#f7f4ef}
.footer-stack{display:grid;gap:16px} /* equal spacing between copyright, menu, socials */
.site-footer .footer-menu{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.site-footer .socials{display:flex;justify-content:center;gap:16px;align-items:center}
.site-footer .socials a{
  display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;
  background:#fff;border:1px solid var(--border)
}
.site-footer .socials svg{width:20px;height:20px}

/* ===== MOBILE DROPDOWN MENU (drawer) ===== */
.mobile-panel{
  position: fixed;
  top: var(--header-h);     /* anchor to header height */
  right: 0; left: 0;
  z-index: 1200;           /* above header */
  background: #ffffff;
  border-top: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  will-change: transform, opacity;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.mobile-panel:not([hidden]){ transform: translateY(0); opacity: 1; }

.mobile-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(1px);
  z-index: 1190;           /* below panel, above header */
}

.mobile-panel .menu-col{
  display: grid;
  gap: 8px;
  padding: 12px;
}
.mobile-panel a{
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  font-weight: 600;
}
/* Mobile CTA uses softer color */
.mobile-panel a.cta{ background: var(--cta); color:#fff; border-color: var(--cta); }

/* ----- MOBILE ----- */
@media (max-width:900px){
  .grid-2, .feature, .contact .contact-grid{grid-template-columns:1fr}
  .menu{display:none}
  .nav-toggle{display:block}

  /* stack inputs to avoid Firefox overflow on small screens */
  .row.two, .row.three{grid-template-columns:1fr}

  /* on mobile, let right contact boxes size naturally */
  .contact-info{grid-template-rows:none;height:auto}
  .info-block{height:auto}
}

/* ensure nothing accidentally disables sticking */
html, body { overflow-x: hidden; }