* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root { font-family:Georgia,serif; color:#1d2924; background:#fcfaf6; line-height:1.5; --green:#193c32; --gold:#bd915b; --cream:#f4f0e8; --sand:#ded2bf; } * { box-sizing:border-box; } body { margin:0; } a { color:inherit; } button,input,select,textarea { font:inherit; } .site-header { position:absolute; z-index:2; width:100%; display:flex; justify-content:space-between; align-items:center; padding:1.5rem 7%; color:white; } .brand { font-weight:bold; letter-spacing:1px; text-decoration:none; line-height:.85; display:grid; } .brand span,.eyebrow { color:var(--gold); } .brand small { font:8px monospace; letter-spacing:2px; margin-top:6px; } .nav { display:flex; gap:1.3rem; align-items:center; font:12px Arial,sans-serif; } .nav a { text-decoration:none; } .nav-book { border:1px solid #fff; padding:.5rem .8rem; } .menu-toggle { display:none; } .hero { min-height:43rem; height:100vh; display:flex; align-items:center; padding:8rem 12%; color:white; background:linear-gradient(90deg,#102a23bb,#102a2322),url('https://images.unsplash.com/photo-1464278533981-50106e6176b1?auto=format&fit=crop&w=2200&q=90') center/cover; } .hero-copy { max-width:47rem; animation:rise .8s both; } .eyebrow { font:10px monospace; letter-spacing:2px; text-transform:uppercase; } h1,h2,h3 { line-height:1.05; } h1 { font-size:clamp(3rem,6vw,5.8rem); margin:.8rem 0; } h2 { font-size:clamp(2.2rem,4vw,4rem); margin:.5rem 0; } h3 { font-size:1.75rem; margin:.5rem 0; }.hero p:not(.eyebrow) { max-width:30rem; font-size:1.15rem; margin:1.5rem 0 2rem; } .button { display:inline-block; border:0; background:var(--green); color:white; padding:.9rem 1.3rem; text-decoration:none; font:600 12px Arial,sans-serif; cursor:pointer; transition:transform .2s; } .button:hover { transform:translateY(-2px); }.hero .button { background:var(--gold); }.ghost { background:transparent!important; border:1px solid #fff; margin-left:.5rem; }.booking-wrap { max-width:82rem; margin:-5rem auto 0; padding:0 1rem; position:relative; }.booking-bar { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr auto; gap:1rem; align-items:end; background:#fff; padding:1.5rem; box-shadow:0 15px 35px #193c3233; }.booking-bar label,form label { display:grid; gap:.4rem; text-transform:uppercase; font:10px monospace; letter-spacing:1px; }.booking-bar input,.booking-bar select,form input,form textarea { border:0; border-bottom:1px solid #bbb; padding:.6rem 0; background:transparent; }.booking-wrap>p { min-height:1.5rem; font:13px Arial,sans-serif; color:var(--green); }.section { max-width:105rem; margin:auto; padding:8rem 8%; }.intro { max-width:32rem; color:#58655c; }.stays { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:1.2rem; margin-top:3rem; }.stay { background:var(--cream); }.stay img { width:100%; height:15rem; object-fit:cover; display:block; }.stay.featured img { height:23rem; }.stay div { padding:1.3rem; }.stay p { color:#566259; font-size:14px; }.stay b { display:block; margin:1rem 0; color:var(--green); font:12px Arial,sans-serif; }.reserve-room,.filters button { border:0; background:none; color:var(--green); padding:0; cursor:pointer; font:12px Arial,sans-serif; }.services { background:var(--green); padding:7rem 8%; color:#fff; text-align:center; }.amenities { display:grid; grid-template-columns:repeat(3,1fr); max-width:70rem; margin:3rem auto 0; border-top:1px solid #ffffff33; }.amenities span { padding:1.3rem; border-bottom:1px solid #ffffff33; font-size:18px; }.experience { display:grid; grid-template-columns:1.1fr .9fr; min-height:39rem; }.experience>div { background:url('https://images.unsplash.com/photo-1511497584788-876760111969?auto=format&fit=crop&w=1400&q=85') center/cover; }.experience article { padding:10% 12%; background:var(--sand); }.experience article>p:not(.eyebrow) { max-width:28rem; }.experience a { color:var(--green); font:12px Arial,sans-serif; }.tags { margin:2rem 0; font-size:14px; }.filters { display:flex; gap:1rem; margin:2rem 0; }.filters .active { border-bottom:1px solid var(--green); }.gallery { display:grid; grid-template-columns:1.2fr .8fr .8fr; grid-auto-rows:15rem; gap:1rem; }.gallery img { width:100%; height:100%; object-fit:cover; }.gallery img:first-child { grid-row:span 2; }.gallery img.hidden { display:none; }.arrival { display:grid; grid-template-columns:1fr 1fr; background:var(--cream); }.arrival article { padding:12%; }.arrival article p:not(.eyebrow) { max-width:28rem; }.outline { color:var(--green); border:1px solid var(--green); background:transparent; }.map { min-height:22rem; display:grid; place-items:center; color:#fff; font-size:1.7rem; background:linear-gradient(#193c3288,#193c3288),url('https://images.unsplash.com/photo-1569336415962-a4bd9f69cd83?auto=format&fit=crop&w=1300&q=85') center/cover; }.contact { display:grid; grid-template-columns:1fr 1fr; gap:10%; }.contact article>p:not(.eyebrow) { max-width:28rem; }.contact form { display:grid; gap:1.3rem; } #contactMessage { color:var(--green); font:13px Arial,sans-serif; } footer { background:#102a23; padding:3rem 8%; color:#ddd; display:flex; justify-content:space-between; align-items:end; font:11px Arial,sans-serif; }.whatsapp,.chat-toggle { position:fixed; z-index:4; right:1rem; width:3rem; height:3rem; border-radius:50%; display:grid; place-items:center; border:0; color:#fff; text-decoration:none; background:#287b55; font:bold 11px Arial,sans-serif; }.whatsapp { bottom:1rem; }.chat-toggle { bottom:4.8rem; background:var(--gold); font-size:18px; }.chat-toggle:hover { cursor:pointer; }.chat-panel { visibility:hidden; opacity:0; position:fixed; z-index:5; right:1rem; bottom:8.5rem; width:min(20rem,calc(100vw - 2rem)); padding:1.5rem; background:#fff; box-shadow:0 12px 38px #102a2344; transition:.2s; }.chat-panel.open { visibility:visible; opacity:1; }.chat-panel button { width:100%; border:0; border-top:1px solid #ddd; background:none; text-align:left; padding:.8rem 0; color:var(--green); }.chat-panel #chatClose { width:auto; position:absolute; right:.7rem; top:.5rem; border:0; font-size:20px; }.chat-panel h3 { font-size:1.5rem; } @keyframes rise { from { opacity:0; transform:translateY(1rem); } to { opacity:1; transform:none; } } @media(max-width:800px) { .site-header { padding:1.2rem; }.menu-toggle { display:block; border:0; background:none; color:white; text-transform:uppercase; }.nav { display:none; position:absolute; top:100%; left:0; width:100%; padding:1rem; flex-direction:column; align-items:flex-start; background:var(--green); }.nav.open { display:flex; }.hero { padding:7rem 1.2rem; }.booking-bar { grid-template-columns:1fr 1fr; }.booking-bar div,.booking-bar .button { grid-column:1/-1; }.section { padding:5rem 1.2rem; }.stays,.experience,.arrival,.contact { grid-template-columns:1fr; }.stay.featured img { height:18rem; }.experience>div { min-height:24rem; }.amenities { grid-template-columns:1fr 1fr; }.gallery { grid-template-columns:1fr 1fr; grid-auto-rows:10rem; } footer { display:grid; gap:1rem; }.contact { gap:3rem; } } @media(max-width:460px) { .booking-bar,.amenities { grid-template-columns:1fr; }.gallery { grid-auto-rows:8rem; } }