/* villa-page.css — shared styles for individual villa pages */

/* ---------- Fonts ---------- */
@font-face{font-family:"Centra";font-style:normal;font-weight:200;font-display:swap;src:url("assets/fonts/centra-thin.woff2") format("woff2"),url("assets/fonts/centra-thin.woff") format("woff")}
@font-face{font-family:"Centra";font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/centra-light.woff2") format("woff2"),url("assets/fonts/centra-light.woff") format("woff")}
@font-face{font-family:"Centra";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/centra-book.woff2") format("woff2"),url("assets/fonts/centra-book.woff") format("woff")}
@font-face{font-family:"Centra";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/centra-medium.woff2") format("woff2"),url("assets/fonts/centra-medium.woff") format("woff")}
@font-face{font-family:"Centra";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/centra-bold.woff2") format("woff2"),url("assets/fonts/centra-bold.woff") format("woff")}

/* ---------- Tokens ---------- */
:root{
  --bg:#0b0b0b;
  --bg-alt:#070707;
  --ink:#f4f1ec;
  --ink-mute:rgba(244,241,236,0.65);
  --ink-faint:rgba(244,241,236,0.42);
  --line:rgba(244,241,236,0.22);
  --line-strong:rgba(244,241,236,0.55);
  --accent:#cdb79a;
  --maxw:1280px;
  --gutter:clamp(20px,3.6vw,56px);
  --content-x:clamp(96px,14vw,220px);
  --col:clamp(260px,28vw,360px);
  --nav-h:104px;
  --t-display:clamp(56px,9.5vw,128px);
  --t-h2:clamp(44px,5.4vw,76px);
  --t-h3:clamp(22px,1.8vw,28px);
  --t-body:14px;
  --t-eye:11px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:"Centra","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:300;letter-spacing:0.005em;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;font-size:var(--t-body);line-height:1.65;}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--accent);color:#0b0b0b}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:grid;
  grid-template-columns:calc(var(--content-x) - var(--gutter)) 1fr auto;
  align-items:center;
  padding:14px var(--gutter);height:var(--nav-h);
  background:#0b0b0b; /* solid on villa pages — no hero video underneath */
}
.nav__logo{grid-column:1;display:flex;align-items:center;justify-self:start;gap:12px}
@media(max-width:980px){
  .nav__logo{flex-direction:column;align-items:flex-start;gap:6px}
}
.nav__logo img{width:72px;height:72px;display:block;object-fit:contain;filter:brightness(0) invert(1)}
.nav__burger{
  display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:100%;height:14px;flex-shrink:0;
}
.nav__burger span{
  display:block;width:22px;height:1.5px;
  background:#f4f1ec;border-radius:1px;
  transition:transform .3s ease, opacity .3s ease;
}
.nav__logo.menu-open .nav__burger span:nth-child(1){transform:translateY(6.5px);opacity:0}
.nav__logo.menu-open .nav__burger span:nth-child(3){transform:translateY(-6.5px);opacity:0}
.menu{
  grid-column:2;justify-self:start;
  display:flex;justify-content:space-between;align-items:center;
  width:clamp(400px,56vw,820px);
  font-size:16px;font-weight:300;color:#fff;letter-spacing:0.005em;
}
.menu a{position:relative;padding:6px 0;opacity:.92;transition:opacity .25s}
.menu a:hover{opacity:1}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:#fff;
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.menu a:hover::after{transform:scaleX(1)}
.cta{
  grid-column:3;justify-self:end;
  border:none;border-bottom:1px solid rgba(255,255,255,0.28);
  padding:6px 0;font-size:13px;font-weight:300;
  letter-spacing:0.08em;text-transform:uppercase;color:#fff;
  cursor:pointer;background:none;
  transition:border-color .4s ease,opacity .4s ease;
}
.cta:hover{border-bottom-color:rgba(255,255,255,0.85);opacity:1}

/* ---------- Mobile menu ---------- */
.mobileMenu{
  position:fixed;inset:0;z-index:85;
  background:#0b0b0b;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 32px) var(--gutter) 48px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 0.4s ease,visibility 0s linear 0.4s;
}
.mobileMenu.is-open{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity 0.4s ease,visibility 0s linear 0s;
}
.nav.menu-open{background:rgba(11,11,11,0.96)}
.mobileMenu__nav{
  display:flex;flex-direction:column;gap:2px;
  list-style:none;padding:0;margin:0;
}
.mobileMenu__nav a{
  display:block;
  font-size:clamp(32px,8vw,52px);font-weight:300;
  letter-spacing:-0.01em;line-height:1.15;
  color:rgba(255,255,255,0.85);
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:color 0.2s ease;
}
.mobileMenu__nav a:hover{color:#fff}
.mobileMenu__nav li:last-child a{border-bottom:0}

/* ---------- Responsive nav ---------- */
@media(max-width:980px){
  :root{--content-x:var(--gutter)}
  .nav{grid-template-columns:auto 1fr auto;padding-top:28px}
  .menu{display:none}
  .nav__burger{display:flex}
  .nav__logo img{width:54px;height:54px}
}

/* ---------- Wrap ---------- */
.wrap{max-width:none;margin:0;padding-left:var(--content-x);padding-right:var(--gutter);position:relative}

/* ---------- Villa page main ---------- */
.villa-main{
  background:#0b0b0b;
  min-height:100vh;
}

/* ---------- Villa detail ---------- */
.villaDetail{
  width:100%;max-width:1240px;margin:0 auto;
  padding:calc(var(--nav-h) + 16px) clamp(24px,4vw,80px) clamp(40px,6vh,72px);
  display:flex;flex-direction:column;gap:clamp(40px,6vh,72px);
}
.villaDetail__back{
  display:inline-flex;align-items:center;gap:8px;
  background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(244,241,236,0.5);padding:0;
  transition:color .2s;align-self:flex-start;margin-bottom:-24px;
  text-decoration:none;
}
.villaDetail__back:hover{color:#f4f1ec}
.villaDetail__head{
  display:grid;grid-template-columns:minmax(0,0.75fr) minmax(0,1.25fr);
  gap:clamp(32px,5vw,72px);align-items:start;
}
.villaDetail__copy{max-width:46ch}
.villaDetail__copy h1{
  font-weight:300;font-size:clamp(40px,4.6vw,68px);
  line-height:1;letter-spacing:-0.01em;color:#fff;
  margin:0 0 24px;
  margin-left:-0.04em;
  white-space:nowrap;
}
.villaDetail__collection{
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(244,241,236,0.38);margin:0 0 12px;font-weight:400;
}
.villaDetail__intro{
  font-size:clamp(15px,1.05vw,17px);line-height:1.72;
  color:rgba(244,241,236,0.80);font-weight:300;
  margin:0 0 32px;max-width:42ch;
}
.villaDetail__specs{
  display:grid;grid-template-columns:auto 1fr;
  gap:8px 24px;margin:20px 0 28px;
}
.villaDetail__specs dt{
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(244,241,236,0.45);padding-top:3px;white-space:nowrap;
}
.villaDetail__specs dd{
  margin:0;font-size:clamp(14px,0.95vw,16px);
  color:rgba(244,241,236,0.85);font-weight:300;line-height:1.55;
}
.villaDetail__reserve{
  display:inline-block;
  background:none;border:none;border-bottom:1px solid rgba(255,255,255,0.28);
  padding:6px 0;font-size:13px;font-weight:300;
  letter-spacing:0.08em;text-transform:uppercase;color:#fff;
  cursor:pointer;
  transition:border-color .4s ease,opacity .4s ease;
}
.villaDetail__reserve:hover{border-bottom-color:rgba(255,255,255,0.85)}
.villaDetail__enquire{
  display:inline-block;margin-top:10px;margin-left:24px;
  font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  color:rgba(244,241,236,0.5);border-bottom:1px solid rgba(244,241,236,0.22);
  padding:4px 0;transition:color .3s,border-color .3s;
}
.villaDetail__enquire:hover{color:rgba(244,241,236,0.65);border-bottom-color:rgba(244,241,236,0.40)}
.villaDetail__enquire--mobile{display:none}
.villaDetail__actions{margin-top:28px}

/* ---------- Rates ---------- */
.villaRates{margin-top:28px}
.villaRates__from{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.villaRates__fromLabel{
  font-size:10px;letter-spacing:0.20em;text-transform:uppercase;
  color:rgba(244,241,236,0.40);font-weight:300;
}
.villaRates__fromPrice{
  font-size:clamp(22px,2vw,28px);font-weight:300;
  color:rgba(244,241,236,0.90);letter-spacing:0.01em;
}
.villaRates__fromUnit{
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(244,241,236,0.40);margin-left:4px;
}
.villaRates__toggle{
  background:none;border:none;border-bottom:1px solid rgba(244,241,236,0.22);
  padding:2px 0;font-family:inherit;font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:rgba(244,241,236,0.42);cursor:pointer;
  transition:border-color .3s,color .3s;
}
.villaRates__toggle:hover{border-bottom-color:rgba(244,241,236,0.60);color:rgba(244,241,236,0.65)}
.villaRates__drawer{max-height:0;opacity:0;overflow:hidden;transition:max-height .55s cubic-bezier(.25,.46,.45,.94),opacity .35s ease}
.villaRates__drawer.is-open{max-height:360px;opacity:1}
.villaRates__row{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-top:1px solid rgba(244,241,236,0.10)}
.villaRates__row:last-of-type{border-bottom:1px solid rgba(244,241,236,0.10)}
.villaRates__label{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(244,241,236,0.38);font-weight:300}
.villaRates__price{font-size:15px;font-weight:300;color:rgba(244,241,236,0.80)}
.villaRates__note{margin:12px 0 0;font-size:11px;letter-spacing:0.05em;color:rgba(244,241,236,0.25);line-height:1.8;font-weight:300}

/* ---------- Floor plan ---------- */
.villaDetail__plan{
  margin:0;display:flex;flex-direction:column;gap:10px;
  align-self:center;
  width:80%;
  margin-top:clamp(30px,4vw,55px);
  margin-left:auto;
}
.villaDetail__plan > img{width:100%;height:auto;display:block;filter:brightness(0.75)}
.villaDetail__plan figcaption{font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(244,241,236,0.45)}
.villaDetail__plan--wide{width:100%}
.villaDetail__plan--88{width:88%}

/* Floor plan carousel (multi-floor Makai villas) */
.floorplanCarousel{display:flex;flex-direction:column;gap:14px}
.floorplanCarousel__viewport{position:relative;width:100%}
.floorplanCarousel__img{display:none;width:100%;height:auto;filter:brightness(0.75)}
.floorplanCarousel__img.is-active{display:block}
.floorplanCarousel__nav{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.floorplanCarousel__btn{
  background:transparent;
  border:1px solid rgba(244,241,236,0.30);
  color:rgba(244,241,236,0.75);
  font-family:inherit;
  font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
  font-weight:400;line-height:1;
  padding:9px 14px;cursor:pointer;
  transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease;
}
.floorplanCarousel__btn:hover,.floorplanCarousel__btn:focus-visible{color:#f4f1ec;border-color:rgba(244,241,236,0.6);outline:none}
.floorplanCarousel__btn.is-active{background:#f4f1ec;color:#0b0b0b;border-color:#f4f1ec}

/* ---------- Photo strip ---------- */
.villaStrip{width:100%;overflow:hidden;background:#0b0b0b;margin-top:0}
.villaStrip__track{
  display:flex;gap:3px;
  height:clamp(280px,42vh,520px);
  overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  cursor:grab;align-items:stretch;
}
.villaStrip__track::-webkit-scrollbar{display:none}
.villaStrip__track.is-dragging{cursor:grabbing;scroll-behavior:auto}
.villaStrip__img{
  width:calc((100% - 9px) / 3.25);
  height:clamp(280px,42vh,520px);
  min-height:280px;
  flex-shrink:0;display:block;
  object-fit:cover;object-position:center;
  pointer-events:none;user-select:none;
}
@media(max-width:768px){
  .villaStrip__track{height:clamp(200px,50vw,320px)}
  .villaStrip__img{width:calc((100% - 6px) / 2.2);height:clamp(200px,50vw,320px);min-height:200px}
}

/* ---------- Mobile detail layout ---------- */
@media(max-width:980px){
  .villaDetail{padding:calc(var(--nav-h) + 28px) var(--gutter) 48px;gap:32px}
  .villaDetail__head{display:flex;flex-direction:column;gap:24px}
  .villaDetail__copy{order:1;max-width:100%;width:100%}
  .villaDetail__plan{order:2;width:100%;margin-top:8px;margin-left:0}
  .villaDetail__plan--wide{width:100%}
  .villaDetail__plan--88{width:100%}
  .villaDetail__copy h1{font-size:clamp(32px,8vw,48px);white-space:normal;margin-bottom:16px}
  .villaDetail__intro{font-size:15px;margin-bottom:24px;max-width:100%}
  .villaDetail__specs{grid-template-columns:1fr;gap:14px}
  .villaDetail__specs dt{margin-bottom:2px}
  .villaDetail__specs dd{font-size:14px;line-height:1.6;padding-bottom:14px;border-bottom:1px solid rgba(244,241,236,0.08)}
  .villaDetail__specs dd:last-child{border-bottom:none;padding-bottom:0}
  .villaDetail__enquire{display:none}
  .villaDetail__enquire--mobile{display:block;margin-top:16px;margin-left:0;text-align:left}
  .villaRates__label{font-size:10px}
  .villaRates__price{font-size:14px}
}

/* ---------- WhatsApp button (hidden) ---------- */
.wa-btn{display:none}

/* ---------- Floating enquire button ---------- */
.enquire-float{
  position:fixed;bottom:28px;right:28px;z-index:999;
  font-size:11px;letter-spacing:0.10em;text-transform:uppercase;
  color:#f4f1ec;text-decoration:none;
  background:#0b0b0b;border:1px solid rgba(255,255,255,0.18);
  padding:10px 18px;border-radius:2px;
  box-shadow:0 4px 16px rgba(0,0,0,0.30);
  transition:background .25s ease,border-color .25s ease;
}
.enquire-float:hover{background:#1a1a1a;border-color:rgba(255,255,255,0.32)}
@media(max-width:767px){.enquire-float{bottom:20px;right:16px;font-size:10px;padding:9px 15px}}

/* ---------- Footer ---------- */
.foot{
  background:#f4f1ec;color:#0b0b0b;
  padding:clamp(96px,12vh,160px) 0 40px;
  position:relative;overflow:hidden;
}
.foot>.wrap{position:relative;z-index:2}
.foot__top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(28px,4vw,64px);margin-bottom:64px;max-width:780px}
.foot h4{font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(11,11,11,0.55);margin:0 0 16px;font-weight:400}
.foot p{font-size:13px;line-height:1.75;color:rgba(11,11,11,0.78);margin:0;max-width:32ch}
.foot a{color:rgba(11,11,11,0.78)}
.foot a:hover{color:#0b0b0b}
.foot__address,.foot__maplink{text-decoration:none;display:inline-block;transition:color 0.4s ease}
.foot__address:hover,.foot__maplink:hover{color:#0b0b0b;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.foot__brand .logo-mark{height:56px;width:auto;display:block;margin-bottom:16px;filter:brightness(0)}
.foot__top>div:not(.foot__brand){padding-top:40px}
.foot__bar{
  margin-top:48px;border-top:1px solid rgba(11,11,11,0.18);padding-top:24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:12px;color:rgba(11,11,11,0.55);letter-spacing:0.04em;
}
.foot__bar .links{display:flex;gap:24px;margin-right:90px}
.foot__bar .links a{display:flex;align-items:center}
.foot__bar .links svg{width:20px;height:20px;stroke:currentColor}
.ig-label{margin:24px 0 14px;display:flex;align-items:baseline;gap:10px}
.ig-label h4{margin:0}
.ig-label small{font-size:12px;color:rgba(11,11,11,0.45)}

/* Newsletter form */
.form{display:flex;border-bottom:1px solid rgba(11,11,11,0.30);align-items:stretch}
.form input{
  flex:1;background:none;border:none;outline:none;padding:8px 0;
  font-family:inherit;font-size:13px;font-weight:300;
  color:#0b0b0b;
}
.form input::placeholder{color:rgba(11,11,11,0.55)}
.form button{
  background:none;border:none;border-left:1px solid rgba(11,11,11,0.20);
  padding:8px 14px;font-size:15px;cursor:pointer;
  color:#0b0b0b;transition:background .2s;
}
.form button:hover{background:rgba(11,11,11,0.06)}

/* Social icon links */
.iglink svg{width:20px;height:20px;display:block;stroke:rgba(11,11,11,0.6);transition:stroke .2s}
.iglink:hover svg{stroke:#0b0b0b}

@media(max-width:980px){
  .foot__top{grid-template-columns:1fr;gap:32px}
  .foot__bar .links{margin-right:72px}
  .foot__bar{flex-wrap:wrap;gap:12px}
}