*{box-sizing:border-box}
:root{--cream:#f5f1e8;--paper:#fbf9f4;--ink:#151913;--green:#0b2f1e;--gold:#b69452;--muted:#777970}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",Arial,sans-serif}
img{display:block;width:100%}
a{text-decoration:none;color:inherit}
.hero{height:94vh;min-height:680px;position:relative;color:#fff;overflow:hidden;background:#182319}
.hero-bg{position:absolute;inset:0;background:url("assets/hero.jpg") center/cover no-repeat;transform:scale(1.02)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,12,7,.38),rgba(4,12,7,.16) 40%,rgba(4,12,7,.78))}
.nav{position:absolute;z-index:3;top:0;left:0;right:0;padding:32px 7vw;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:2.5px}
.logo{font-size:14px;letter-spacing:2px}.logo span{font-size:7px;letter-spacing:3px;margin-left:9px;opacity:.8}
.nav a{border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:8px}
.hero-content{position:relative;z-index:2;width:min(1120px,86%);margin:auto;padding-top:18vh}
.eyebrow,.section-tag,.contact-kicker{font-size:9px;letter-spacing:3.2px;font-weight:600;color:var(--gold)}
.hero h1{font:500 clamp(55px,8vw,108px)/.94 "Playfair Display",serif;margin:22px 0 22px;letter-spacing:-2px}
.hero h1 em{font-weight:500}
.hero-content p{max-width:520px;font-size:14px;line-height:1.8;color:rgba(255,255,255,.84)}
.hero-cta,.dark-cta,.whatsapp{display:inline-flex;align-items:center;gap:14px;margin-top:25px;padding:14px 20px;border:1px solid rgba(255,255,255,.55);font-size:9px;font-weight:600;letter-spacing:2px}
.hero-cta span,.dark-cta span{color:var(--gold)}
.hero-bottom{position:absolute;z-index:3;bottom:28px;left:7vw;right:7vw;display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:rgba(255,255,255,.72)}
.intro{width:min(1120px,86%);margin:auto;padding:115px 0 70px;display:grid;grid-template-columns:25% 1fr;gap:60px;border-bottom:1px solid rgba(21,25,19,.15)}
.intro h2,.experience h2,.contact h2,.villa h2{font:500 clamp(43px,5vw,67px)/1.02 "Playfair Display",serif;margin:0 0 22px}
.intro h2 em,.experience h2 em,.contact h2 em,.villa h2 em{font-weight:500}
.intro p{max-width:650px;color:var(--muted);font-size:14px;line-height:1.9;margin:0}
.offers{width:min(1120px,86%);margin:0 auto;padding:65px 0 120px;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.offer{background:var(--paper);border:1px solid rgba(21,25,19,.09);box-shadow:0 16px 35px rgba(27,34,25,.05)}
.offer.featured{grid-column:span 2;display:grid;grid-template-columns:1.12fr .88fr}
.offer .image{overflow:hidden}
.offer .image img{height:100%;min-height:290px;object-fit:cover;transition:transform .6s ease}
.offer:hover img{transform:scale(1.035)}
.offer-body{padding:28px 28px 31px;display:grid;grid-template-columns:40px 1fr;gap:15px}
.offer-number{font:500 28px "Playfair Display",serif;color:var(--gold)}
.offer-copy .label{font-size:8px;letter-spacing:2.2px;color:var(--gold);font-weight:600;margin-bottom:9px}
.offer h3{font:500 29px/1.1 "Playfair Display",serif;margin:0 0 12px}
.offer p{font-size:12px;line-height:1.75;color:var(--muted);margin:0 0 20px}
.offer a{font-size:8px;font-weight:700;letter-spacing:2px;border-bottom:1px solid var(--gold);padding-bottom:6px}
.offer a span{color:var(--gold);margin-left:7px}
.villa{background:var(--green);color:#fff;display:grid;grid-template-columns:1.15fr .85fr}
.villa-image{min-height:600px}.villa-image img{height:100%;object-fit:cover}
.villa-copy{padding:90px 8vw 90px 6vw;align-self:center}
.villa-number{font:500 24px "Playfair Display",serif;color:var(--gold);margin:28px 0 10px}
.villa h2{margin-bottom:18px}.villa .lead{font:italic 20px/1.5 "Playfair Display",serif;color:#eee8dc}.villa p:not(.lead){font-size:12px;line-height:1.85;color:rgba(255,255,255,.72);max-width:520px}
.villa-facts{display:flex;flex-wrap:wrap;gap:18px;margin:28px 0;color:#d7c28f;font-size:8px;letter-spacing:1.7px}
.dark-cta{border-color:rgba(255,255,255,.35)}
.experience{width:min(1120px,86%);margin:auto;padding:120px 0}
.experience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:65px}
.experience-grid div{border-top:1px solid rgba(21,25,19,.22);padding-top:18px}
.experience-grid strong{display:block;font-size:8px;letter-spacing:2px;color:var(--gold);margin-bottom:12px}
.experience-grid span{display:block;font:500 17px/1.45 "Playfair Display",serif}
.contact{background:#102b1d;color:#fff;text-align:center;padding:110px 20px 120px}
.contact h2{margin-bottom:20px}.contact p{max-width:560px;margin:0 auto;color:rgba(255,255,255,.68);font-size:13px;line-height:1.8}
.whatsapp{border-color:#b69452;background:transparent}.wa{font-size:18px;color:#b69452}
footer{background:#082417;color:#cfc7b4;padding:24px 7vw;display:flex;justify-content:space-between;font-size:7px;letter-spacing:2px}
@media(max-width:800px){
.hero{height:88vh;min-height:620px}.nav{padding:24px 6vw}.nav a{display:none}.hero-content{width:88%;padding-top:28vh}.hero h1{font-size:58px}.hero-content p{font-size:12px}
.intro{width:88%;padding:80px 0 55px;grid-template-columns:1fr;gap:22px}.intro h2{font-size:48px}
.offers{width:88%;grid-template-columns:1fr;padding:45px 0 80px}.offer.featured{grid-column:auto;display:block}.offer .image img{height:260px;min-height:0}.offer-body{padding:24px}
.villa{grid-template-columns:1fr}.villa-image{min-height:330px}.villa-copy{padding:65px 8vw}.experience{width:88%;padding:80px 0}.experience-grid{grid-template-columns:1fr 1fr;gap:35px}.contact{padding:85px 25px 95px}footer{flex-direction:column;gap:10px}
}
@media(max-width:500px){.experience-grid{grid-template-columns:1fr}.hero h1{font-size:52px}.logo span{display:none}.offer h3{font-size:27px}}

/* ===== V2 EDITORIAL ROOM OFFER LAYOUT ===== */
.v2-offers{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "one one"
    "two three"
    "four four";
  gap:24px;
  align-items:stretch;
}
.v2-offers .offer{min-width:0}
.v2-offers .offer-01{grid-area:one}
.v2-offers .offer-04{grid-area:four}
.v2-offers .offer-small{grid-area:auto}
.v2-offers .offer-wide{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  min-height:300px;
}
.v2-offers .offer-wide .image{height:100%}
.v2-offers .offer-wide .image img{
  height:100%;
  min-height:300px;
  object-fit:cover;
}
.v2-offers .offer-small{
  display:flex;
  flex-direction:column;
}
.v2-offers .offer-small .image img{
  height:280px;
  min-height:0;
  object-fit:cover;
}
.v2-offers .offer-small .offer-body{
  min-height:215px;
}
.v2-offers .offer-body{
  align-content:center;
}
.v2-offers .offer-copy p{
  max-width:480px;
}
.v2-offers .offer-small .offer-copy p{
  max-width:410px;
}
.v2-offers .offer-wide .offer-number{
  padding-top:2px;
}
.v2-offers .offer-wide .offer-body{
  padding:38px 38px;
}
.v2-offers .offer-wide h3{
  font-size:32px;
}
.v2-offers .offer-small h3{
  font-size:27px;
}
.v2-offers .offer a{
  display:inline-block;
}
@media(max-width:800px){
  .v2-offers{
    grid-template-columns:1fr;
    grid-template-areas:
      "one"
      "two"
      "three"
      "four";
    gap:20px;
  }
  .v2-offers .offer-wide{
    display:block;
  }
  .v2-offers .offer-wide .image img{
    height:260px;
    min-height:0;
  }
  .v2-offers .offer-small .image img{
    height:260px;
  }
  .v2-offers .offer-wide .offer-body{
    padding:25px;
  }
  .v2-offers .offer-wide h3{
    font-size:28px;
  }
}

/* ===== V3 MOBILE VISIBILITY + WHATSAPP ICON FIX ===== */
.wa{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#b69452;
  flex:0 0 18px;
}
.wa svg{
  width:18px;
  height:18px;
  display:block;
  fill:currentColor;
}
.whatsapp{
  position:relative;
  z-index:2;
  min-height:46px;
}

/* Prevent featured offer text from collapsing on mobile. */
.v2-offers .offer-wide .offer-body{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  min-height:250px;
  height:auto;
  visibility:visible;
  opacity:1;
  overflow:visible;
}
.v2-offers .offer-small .offer-body{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  min-height:220px;
  height:auto;
  visibility:visible;
  opacity:1;
}
.v2-offers .offer-copy{
  min-width:0;
  visibility:visible;
  opacity:1;
}
.v2-offers .offer-copy h3,
.v2-offers .offer-copy p,
.v2-offers .offer-copy .label,
.v2-offers .offer-copy a{
  visibility:visible;
  opacity:1;
}

@media(max-width:800px){
  .v2-offers .offer-wide .offer-body,
  .v2-offers .offer-small .offer-body{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    min-height:0;
    padding:25px 22px 28px;
  }
  .v2-offers .offer-wide .offer-body{
    min-height:205px;
  }
  .v2-offers .offer-small .offer-body{
    min-height:205px;
  }
  .v2-offers .offer-number{
    font-size:25px;
  }
  .v2-offers .offer-copy .label{
    font-size:7px;
    letter-spacing:1.7px;
    margin-bottom:8px;
  }
  .v2-offers .offer-copy h3{
    font-size:25px;
    line-height:1.12;
    margin-bottom:10px;
  }
  .v2-offers .offer-copy p{
    font-size:11px;
    line-height:1.65;
    margin-bottom:16px;
  }
  .v2-offers .offer-copy a{
    font-size:7px;
    letter-spacing:1.7px;
  }
  .whatsapp{
    padding:14px 18px;
    font-size:8px;
    gap:10px;
  }
  .wa,.wa svg{
    width:19px;
    height:19px;
  }
}

/* ===== V4 — GUARANTEED MOBILE ROOM INFO ===== */
@media (max-width:800px){

  /* Use a simple block flow on mobile.
     This avoids the grid/height interaction that can hide the copy. */
  .v2-offers .offer,
  .v2-offers .offer-wide,
  .v2-offers .offer-small{
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  .v2-offers .offer .image,
  .v2-offers .offer-wide .image,
  .v2-offers .offer-small .image{
    display:block !important;
    width:100% !important;
    height:250px !important;
    min-height:250px !important;
    overflow:hidden !important;
  }

  .v2-offers .offer .image img,
  .v2-offers .offer-wide .image img,
  .v2-offers .offer-small .image img{
    display:block !important;
    width:100% !important;
    height:250px !important;
    min-height:250px !important;
    object-fit:cover !important;
  }

  .v2-offers .offer .offer-body,
  .v2-offers .offer-wide .offer-body,
  .v2-offers .offer-small .offer-body{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:205px !important;
    padding:24px 22px 27px !important;
    margin:0 !important;
    background:#fbf9f4 !important;
    color:#151913 !important;
    position:relative !important;
    visibility:visible !important;
    opacity:1 !important;
    overflow:visible !important;
  }

  .v2-offers .offer .offer-number{
    display:inline-block !important;
    width:auto !important;
    margin:0 10px 9px 0 !important;
    padding:0 !important;
    vertical-align:top !important;
    font:500 22px/1 "Playfair Display",serif !important;
    color:#b69452 !important;
  }

  .v2-offers .offer .offer-copy{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .v2-offers .offer .offer-copy .label{
    display:block !important;
    color:#b69452 !important;
    font-size:7px !important;
    line-height:1.3 !important;
    letter-spacing:1.8px !important;
    margin:0 0 7px !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .v2-offers .offer .offer-copy h3{
    display:block !important;
    color:#151913 !important;
    font:500 25px/1.12 "Playfair Display",serif !important;
    margin:0 0 10px !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .v2-offers .offer .offer-copy p{
    display:block !important;
    color:#777970 !important;
    font:400 11px/1.65 "DM Sans",Arial,sans-serif !important;
    margin:0 0 17px !important;
    max-width:none !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .v2-offers .offer .offer-copy a{
    display:inline-block !important;
    color:#151913 !important;
    font:600 7px/1 "DM Sans",Arial,sans-serif !important;
    letter-spacing:1.7px !important;
    border-bottom:1px solid #b69452 !important;
    padding:0 0 6px !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  /* Extra separation so every card is visually independent. */
  .v2-offers{
    gap:18px !important;
  }

  /* Keep the CTA logo unmistakable. */
  .whatsapp .wa,
  .whatsapp .wa svg{
    display:inline-flex !important;
    width:20px !important;
    height:20px !important;
    flex:0 0 20px !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}