/* ============================================================
   Dream Stay — Villa site
   Palette: warm cream, deep ink, bamboo wood, teal pool glow
   ============================================================ */

:root{
  --cream: #F6F1E7;
  --cream-2: #EEE5D3;
  --ink: #17160f;
  --ink-soft: #4a463c;
  --wood: #B27B4A;
  --wood-dark: #8C5A2E;
  --wood-light: #D9AE7C;
  --teal: #3E7A73;
  --teal-glow: #7FE4C9;
  --white: #FFFFFF;
  --line: rgba(23,22,15,0.12);

  --ff-serif: "Fraunces", "Georgia", serif;
  --ff-sans: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1240px;
  --radius-lg: 34px;
  --radius-md: 20px;
  --radius-sm: 12px;

  --ease: cubic-bezier(.16,.84,.32,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ padding:0; margin:0; }
html{ background:var(--cream); }

body{
  font-family: var(--ff-sans);
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--ff-serif); font-weight:500; margin:0; line-height:1.05; letter-spacing:-0.01em; }
p{ margin:0; }

::selection{ background: var(--teal); color:#fff; }

.section-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow{
  font-family: var(--ff-sans);
  font-size: 12.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
  margin-bottom: 14px;
}
.center{ text-align:center; margin-left:auto; margin-right:auto; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 16px 30px;
  border-radius: 100px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent;
  transition: transform .45s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
  white-space: nowrap;
}
.btn--solid{ background: var(--ink); color: var(--cream); }
.btn--solid:hover{ background: var(--teal); transform: translateY(-3px); }
.btn--ghost{ border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover{ background: var(--ink); color: var(--cream); transform: translateY(-3px); }
.btn--full{ width:100%; }

/* ============ PRELOADER ============ */
.preloader{
  position: fixed; inset:0; z-index: 9999;
  display:flex; align-items:center; justify-content:center;
}
.preloader__panel{
  position:absolute; top:0; bottom:0; width:52%; background: var(--ink);
  z-index:2;
}
.preloader__panel--l{ left:0; }
.preloader__panel--r{ right:0; }

.preloader__inner{ position:relative; z-index:3; text-align:center; color: var(--cream); }
.preloader__logo{
  font-family: var(--ff-serif);
  font-size: clamp(34px, 6vw, 62px);
  letter-spacing: .01em;
  display:flex; justify-content:center;
}
.preloader__letter{ display:inline-block; opacity:0; transform: translateY(30px); }
.preloader__gap{ width: .4em; display:inline-block; }

.preloader__bar-track{
  width: min(320px, 60vw);
  height: 2px;
  background: rgba(246,241,231,0.18);
  margin: 34px auto 14px;
  border-radius: 2px;
  overflow:hidden;
}
.preloader__bar-fill{
  width:0%; height:100%;
  background: linear-gradient(90deg, var(--wood-light), var(--teal-glow));
  box-shadow: 0 0 14px var(--teal-glow);
}
.preloader__percent{
  font-size: 12px; letter-spacing:.2em; color: rgba(246,241,231,0.55); font-weight:600;
}

/* ============ CURSOR GLOW ============ */
.cursor-glow{
  position: fixed; top:0; left:0; width: 420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(127,228,201,0.12), transparent 65%);
  transform: translate(-50%,-50%);
  pointer-events:none; z-index: 5; mix-blend-mode: screen;
  display:none;
}
@media (hover:hover) and (pointer:fine){ .cursor-glow{ display:block; } }

/* ============ NAV ============ */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 200;
  padding: 22px 0;
  transition: background .4s ease, padding .4s ease, box-shadow .4s ease;
}
.nav__inner{
  max-width: var(--container); margin:0 auto; padding: 0 32px;
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
}
.nav.is-scrolled{
  background: rgba(246,241,231,0.82);
  backdrop-filter: blur(14px);
  padding: 14px 0;
  box-shadow: 0 1px 0 var(--line);
}
.nav__brand{
  font-family: var(--ff-serif); font-size: 21px; font-weight:600; color: var(--cream);
}
.nav.is-scrolled .nav__brand{ color: var(--ink); }
.nav__brand span{ color: var(--teal-glow); }
.nav.is-scrolled .nav__brand span{ color: var(--teal); }

.nav__links{ display:flex; gap: 34px; }
.nav__links a{
  font-size: 13.5px; font-weight:600; letter-spacing:.03em;
  color: var(--cream); opacity:.85; position:relative; padding-bottom:2px;
  transition: opacity .3s ease, color .3s ease;
}
.nav.is-scrolled .nav__links a{ color: var(--ink); opacity:.75; }
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background: currentColor;
  transition: right .35s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ right:0; }

.nav__cta{
  padding: 11px 22px; border-radius:100px; font-size:13px; font-weight:700;
  background: var(--cream); color: var(--ink);
  transition: transform .35s var(--ease), background .3s ease, color .3s ease;
}
.nav.is-scrolled .nav__cta{ background: var(--ink); color: var(--cream); }
.nav__cta:hover{ transform: translateY(-2px); background: var(--teal); color:#fff; }

.nav__burger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; z-index: 5;
}
.nav__burger span{ width:22px; height:2px; background: var(--cream); transition: all .3s ease; }
.nav.is-scrolled .nav__burger span{ background: var(--ink); }

/* ============ HERO ============ */
.hero{
  position: relative; height: 100vh; min-height: 620px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; color: var(--cream);
}
.hero__bg{ position:absolute; inset: -10% 0 0 0; height:120%; z-index:0; overflow:hidden; }
.hero__video-wrap{ position:relative; width:100%; height:100%; }
.hero__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity 1.1s ease; background: var(--ink);
}
.hero__video.is-active{ opacity:1; }
.hero__gradient{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(23,22,15,.45) 0%, rgba(23,22,15,.15) 30%, rgba(23,22,15,.35) 68%, rgba(23,22,15,.85) 100%);
}
.hero__glow{
  position:absolute; border-radius:50%; filter: blur(80px); z-index:1; pointer-events:none; opacity:0;
}
.hero__glow--1{ width:420px; height:420px; background: rgba(127,228,201,0.25); top:8%; left:-6%; }
.hero__glow--2{ width:360px; height:360px; background: rgba(178,123,74,0.25); bottom:-4%; right:-4%; }

.hero__content{ position:relative; z-index:2; text-align:center; padding: 0 20px; }
.hero__kicker{ letter-spacing:.3em; font-size:12.5px; font-weight:700; margin-bottom: 18px; overflow:hidden; }
.hero__kicker span, .hero__subtitle span, .hero__actions span{ display:inline-block; }

.hero__title{ font-size: clamp(58px, 13vw, 168px); font-weight:500; }
.hero__title-line{ display:block; overflow:hidden; }
.hero__title-line span, .hero__title-line{ }

.hero__subtitle{
  font-family: var(--ff-serif); font-style:italic; font-weight:400;
  font-size: clamp(16px, 2.1vw, 22px);
  color: rgba(246,241,231,0.9);
  margin: 22px auto 34px; max-width: 560px; overflow:hidden;
}
.hero__actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; overflow:hidden; }
.hero__actions .btn--ghost{ border-color: rgba(246,241,231,.5); color: var(--cream); }
.hero__actions .btn--ghost:hover{ background: var(--cream); color: var(--ink); }

.hero__scroll-cue{
  position:absolute; bottom: 34px; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.8; z-index:2;
}
.hero__scroll-line{ width:1px; height:46px; background: linear-gradient(180deg, rgba(246,241,231,0), rgba(246,241,231,.9)); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--teal-glow);
  animation: scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ============ TRUST BAR ============ */
.trust-bar{
  background: var(--ink); color: var(--cream);
  padding: 24px 0; border-top:1px solid rgba(246,241,231,.08); border-bottom:1px solid rgba(246,241,231,.08);
}
.trust-bar__list{
  max-width: var(--container); margin: 0 auto; padding: 0 32px;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap: 12px 22px;
}
.trust-bar__list li{
  font-family: var(--ff-serif); font-size: 15px; letter-spacing:.01em; color: rgba(246,241,231,.88);
}
.trust-bar__dot{ color: var(--teal-glow); font-size: 9px; }

/* ============ REVEALS (base state, JS/GSAP animates) ============ */
.reveal-up{ opacity:0; transform: translateY(46px); }
.reveal-line span{ transform: translateY(110%); display:block; }

/* ============ ABOUT ============ */
.about{ padding: 150px 0 130px; }
.about__grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap: 90px; align-items:center; }
.about__media{ position:relative; }
.about__text h2{ font-size: clamp(32px, 4vw, 50px); margin: 8px 0 22px; }
.about__lead{ font-size:19px; color: var(--ink); margin-bottom:16px; }
.about__text p{ color: var(--ink-soft); font-size:16px; line-height:1.7; margin-bottom:14px; }

.about__stat-card{
  position:absolute; bottom:-30px; right:-30px;
  background: var(--ink); color:var(--cream);
  border-radius: var(--radius-md);
  padding: 22px 26px; width: 190px;
  box-shadow: 0 30px 60px rgba(23,22,15,.35);
}
.about__stat-card .about__stat-number{ font-family: var(--ff-serif); font-size:40px; color: var(--teal-glow); }
.about__stat-card p{ font-size:12.5px; margin-top:6px; color: rgba(246,241,231,.75); }

.about__stats{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-top: 34px; padding-top: 30px; border-top:1px solid var(--line); }
.about__stat-number{ font-family: var(--ff-serif); font-size: 34px; color: var(--wood-dark); }
.about__stat p{ font-size: 12.5px; color: var(--ink-soft); margin-top:4px; }

/* ============ TILT CARD ============ */
.tilt-card{
  position:relative; overflow:hidden; border-radius: var(--radius-lg);
  transform-style: preserve-3d; will-change: transform;
  box-shadow: 0 40px 70px -30px rgba(23,22,15,.4);
}
.tilt-card img{ width:100%; height:100%; object-fit:cover; transform: scale(1.001); }
.about__media .tilt-card{ aspect-ratio: 4/5; }

/* ============ PLACEHOLDER IMAGE FALLBACK ============ */
img.is-ph{ background: linear-gradient(135deg, var(--wood-light), var(--teal)); min-height: 160px; }
.img-fallback-wrap{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background: linear-gradient(135deg, rgba(178,123,74,.9), rgba(62,122,115,.9));
  color: rgba(255,255,255,.92); font-size:12.5px; letter-spacing:.05em; padding: 20px;
  min-height: 160px;
}
.img-fallback-wrap::before{ content:'\1F334'; display:block; font-size:26px; margin-bottom:10px; }

/* ============ GALLERY ============ */
.gallery{ padding: 100px 0 140px; background: var(--cream-2); }
.gallery h2{ font-size: clamp(30px, 4vw, 46px); max-width: 620px; }
.gallery__grid{
  margin-top: 60px;
  display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; gap: 22px;
}
.gallery__item{ position:relative; border-radius: var(--radius-md); overflow:hidden; margin:0; }
.gallery__item--wide{ grid-column: span 2; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.gallery__item:hover img{ transform: scale(1.08); }
.gallery__item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding: 22px;
  background: linear-gradient(0deg, rgba(23,22,15,.75), transparent);
  color:#fff; font-family: var(--ff-serif); font-size:17px;
  display:flex; align-items:baseline; gap:10px;
  transform: translateY(10px); opacity:0; transition: all .4s ease;
}
.gallery__item:hover figcaption{ transform: translateY(0); opacity:1; }
.gallery__item figcaption span{ font-family: var(--ff-sans); font-size:11px; color: var(--teal-glow); font-weight:700; }

/* ============ AMENITIES ============ */
.amenities{ padding: 130px 0; }
.amenities h2{ font-size: clamp(30px, 4vw, 46px); margin: 0 auto 60px; max-width: 640px; }
.amenities__grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow:hidden;
}
.amenity{
  background: var(--cream); padding: 40px 28px; transition: background .35s ease, transform .35s ease;
}
.amenity:hover{ background: var(--ink); color: var(--cream); transform: translateY(-4px); z-index:1; position:relative; }
.amenity:hover p{ color: rgba(246,241,231,.7); }
.amenity__icon{ font-size: 30px; margin-bottom: 18px; }
.amenity h3{ font-size:17px; font-weight:600; margin-bottom:8px; }
.amenity p{ font-size:13.5px; color: var(--ink-soft); line-height:1.55; }

/* ============ VILLAS (LISTINGS) ============ */
.villas{ padding: 130px 0; background: var(--cream-2); }
.villas h2{ font-size: clamp(30px, 4vw, 46px); }
.villas__lead{ color: var(--ink-soft); font-size:16px; max-width: 480px; margin: 16px auto 0; }
.villas__grid{
  margin-top: 60px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.villa-card{ display:flex; flex-direction:column; background: var(--cream); }
.villa-card__media{
  position:relative; aspect-ratio: 4/3; display:block; width:100%; padding:0; border:none; background:none;
  border-radius: var(--radius-md) var(--radius-md) 0 0; overflow:hidden; cursor:pointer;
}
.villa-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.villa-card__media:hover img{ transform: scale(1.06); }
.villa-card__badge{
  position:absolute; top:14px; left:14px; background: var(--ink); color: var(--cream);
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding: 7px 12px; border-radius:100px;
}
.villa-card__badge--alt{ background: var(--teal); }
.villa-card__body{ padding: 22px; border: 1px solid var(--line); border-top:none; border-radius: 0 0 var(--radius-md) var(--radius-md); flex:1; display:flex; flex-direction:column; }
.villa-card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.villa-card__top h3{ font-size: 19px; }
.villa-card__rating{ font-size:13px; font-weight:700; color: var(--wood-dark); white-space:nowrap; padding-top:2px; }
.villa-card__location{ font-size:12.5px; color: var(--ink-soft); margin-top:6px; }
.villa-card__stats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.villa-card__stats li{ font-size:11.5px; font-weight:600; color: var(--ink-soft); padding:5px 11px; border:1px solid var(--line); border-radius:100px; }
.villa-card__footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:20px; padding-top:18px; border-top:1px dashed var(--line); }
.villa-card__price{ font-family: var(--ff-serif); font-size:19px; }
.villa-card__price small{ font-family: var(--ff-sans); font-size:11.5px; color: var(--ink-soft); font-weight:600; }
.villa-card .btn--sm{ padding: 10px 18px; font-size:12.5px; }

/* ============ WHY BOOK DIRECT ============ */
.why-direct{ padding: 130px 0; }
.why-direct h2{ font-size: clamp(30px, 4vw, 46px); margin: 0 auto 60px; max-width: 640px; }
.why-direct__grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.why-direct__item{ text-align:center; padding: 0 12px; }
.why-direct__icon{ font-size:32px; margin-bottom:16px; }
.why-direct__item h3{ font-size:17px; margin-bottom:10px; }
.why-direct__item p{ font-size:14px; color: var(--ink-soft); line-height:1.6; }

/* ============ SOUTH LOMBOK DESTINATION ============ */
.lombok{ padding: 130px 0; background: var(--cream-2); }
.lombok__grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items:center; }
.lombok__text h2{ font-size: clamp(30px, 4vw, 46px); margin: 10px 0 20px; }
.lombok__text p{ color: var(--ink-soft); font-size:16px; line-height:1.7; max-width: 440px; }
.lombok__list{ margin-top: 26px; display:flex; flex-direction:column; gap:12px; }
.lombok__list li{
  font-size:14px; color: var(--ink); font-weight:600; padding-left:22px; position:relative;
}
.lombok__list li::before{ content:'\2726'; position:absolute; left:0; color: var(--teal); font-size:12px; top:2px; }
.lombok__mosaic{
  display:grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: 16px;
}
.lombok__mosaic-item{ border-radius: var(--radius-md); overflow:hidden; }
.lombok__mosaic-item img{ width:100%; height:100%; object-fit:cover; }
.lombok__mosaic-item--big{ grid-column: span 2; grid-row: span 2; }
.lombok__credit{ margin-top: 22px; font-size:11px; color: var(--ink-soft); opacity:.6; text-align:right; }

/* ============ TESTIMONIALS ============ */
.testimonials{ padding: 130px 0; }
.testimonials h2{ font-size: clamp(30px, 4vw, 46px); margin: 0 auto 60px; max-width:640px; }
.testimonials__grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.testimonial{
  background: var(--cream-2); border-radius: var(--radius-md); padding: 34px 30px;
}
.testimonial p{ font-family: var(--ff-serif); font-style:italic; font-size:18px; line-height:1.5; margin-bottom: 20px; color: var(--ink); }
.testimonial cite{ font-size:12.5px; font-style:normal; color: var(--teal); font-weight:700; letter-spacing:.03em; }

/* ============ BOOKING ============ */
.booking{ padding: 130px 0; background: var(--ink); color: var(--cream); position:relative; overflow:hidden; }
.booking::before{
  content:''; position:absolute; width:600px; height:600px; border-radius:50%;
  background: radial-gradient(circle, rgba(127,228,201,.14), transparent 70%);
  top:-200px; right:-200px; pointer-events:none;
}
.booking__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items:start; position:relative; }
.booking__intro .eyebrow{ color: var(--teal-glow); }
.booking__intro h2{ font-size: clamp(32px, 4vw, 48px); margin: 10px 0 22px; color: var(--cream); }
.booking__intro p{ color: rgba(246,241,231,.72); font-size:16px; line-height:1.7; max-width: 420px; margin-bottom: 30px; }
.booking__price{ font-family: var(--ff-serif); font-size: 44px; color: var(--cream); display:flex; align-items:baseline; gap:8px; }
.booking__price small{ font-family: var(--ff-sans); font-size:13px; color: rgba(246,241,231,.6); font-weight:600; }
.booking__trust{ margin-top:26px; display:flex; flex-direction:column; gap:10px; }
.booking__trust li{ font-size:13.5px; color: rgba(246,241,231,.8); }

.booking-card__field--villa{ margin-bottom:16px; }
.booking-card__select{
  width:100%; padding: 14px 16px; border-radius: var(--radius-sm); border:1px solid var(--line);
  background: #fff; font-size:14.5px; font-weight:600; color: var(--ink); appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2317160f' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 16px center;
}

.booking__start-card{
  background: var(--cream); color: var(--ink); border-radius: var(--radius-lg);
  padding: 40px; box-shadow: 0 50px 90px -30px rgba(0,0,0,.5); text-align:center;
}
.booking__start-card .booking__price{ color: var(--ink); justify-content:center; margin: 10px 0 18px; }
.booking__start-card .booking__price small{ color: var(--ink-soft); }
.booking__start-note{ font-size:13.5px; color: var(--ink-soft); line-height:1.6; margin-bottom: 26px; }

.booking-card__row{ display:flex; gap:14px; margin-bottom: 16px; }
.booking-card__field{ flex:1; position:relative; }
.booking-card__field label{ display:block; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:8px; font-weight:700; }
.booking-card__date{
  width:100%; text-align:left; padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff; font-size:14.5px; font-weight:600; color: var(--ink);
  transition: border-color .25s ease;
}
.booking-card__date.is-filled{ color: var(--teal); border-color: var(--teal); }
.booking-card__date:hover{ border-color: var(--wood); }

.booking-card__calendar{
  max-height:0; overflow:hidden; opacity:0; transition: max-height .45s var(--ease), opacity .3s ease, margin .45s ease;
  background:#fff; border-radius: var(--radius-sm); border:1px solid var(--line);
}
.booking-card__calendar.is-open{ max-height: 420px; opacity:1; margin-bottom:16px; }
.cal__header{ display:flex; align-items:center; justify-content:space-between; padding: 16px 18px 6px; font-weight:700; font-size:14px; }
.cal__header button{ background:none; border:none; font-size:18px; width:30px; height:30px; border-radius:50%; transition: background .2s; }
.cal__header button:hover{ background: var(--cream-2); }
.cal__weekdays{ display:grid; grid-template-columns: repeat(7,1fr); padding: 0 12px; font-size:11px; color: var(--ink-soft); text-align:center; font-weight:700; }
.cal__days{ display:grid; grid-template-columns: repeat(7,1fr); gap:2px; padding: 8px 12px 16px; }
.cal__day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:13px; border-radius:8px;
  border:none; background:transparent; color: var(--ink); transition: background .2s ease, color .2s ease;
}
.cal__day:disabled{ color: rgba(23,22,15,.22); cursor:not-allowed; }
.cal__day:not(:disabled):hover{ background: var(--cream-2); }
.cal__day.is-selected{ background: var(--ink); color: var(--cream); font-weight:700; }
.cal__day.is-in-range{ background: rgba(62,122,115,.16); border-radius:0; }
.cal__hint{ padding: 0 18px 16px; font-size:11.5px; color: var(--ink-soft); }

.stepper{ display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 16px; width: fit-content; }
.stepper button{ width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; transition: background .2s ease, color .2s ease; }
.stepper button:hover{ background: var(--ink); color:#fff; border-color: var(--ink); }
.stepper span{ min-width:14px; text-align:center; font-weight:700; }

/* ============ LOCATION ============ */
.location{ padding: 130px 0; }
.location__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items:center; }
.location__text h2{ font-size: clamp(30px, 4vw, 46px); margin: 10px 0 20px; }
.location__text p{ color: var(--ink-soft); font-size:16px; line-height:1.7; margin-bottom: 14px; max-width:440px; }
.location__address{ font-family: var(--ff-serif); font-style:italic; color: var(--ink); font-size:18px; margin-bottom: 26px !important; }
.location__map{ aspect-ratio: 1/1; border-radius: var(--radius-lg); overflow:hidden; }
.location__map-placeholder{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(127,228,201,.35), transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(178,123,74,.4), transparent 55%),
    var(--ink);
  color: var(--cream);
}
.location__pin{ font-size: 38px; animation: bob 3s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
.location__map-placeholder span{ font-family: var(--ff-serif); font-style:italic; font-size:16px; }

/* ============ CTA STRIP ============ */
.cta-strip{ padding: 100px 0; background: var(--cream-2); }
.cta-strip__inner{ display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap:wrap; }
.cta-strip h2{ font-size: clamp(28px, 4vw, 44px); max-width: 520px; }

/* ============ FOOTER ============ */
.footer{ background: var(--ink); color: rgba(246,241,231,.75); padding: 90px 0 26px; }
.footer__grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 60px; border-bottom: 1px solid rgba(246,241,231,.1); }
.footer__brand .nav__brand{ color: var(--cream); }
.footer__brand p{ margin-top:14px; font-size:14px; max-width:240px; line-height:1.6; }
.footer__col h4{ font-family: var(--ff-sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color: var(--cream); margin-bottom:18px; font-weight:700; }
.footer__col a{ display:block; font-size:14px; margin-bottom:12px; transition: color .2s ease; }
.footer__col a:hover{ color: var(--teal-glow); }
.footer__col p{ font-size:14px; margin-bottom:14px; line-height:1.6; }
.footer__newsletter{ display:flex; gap:8px; }
.footer__newsletter input{
  flex:1; background: rgba(246,241,231,.08); border:1px solid rgba(246,241,231,.18); border-radius:100px;
  padding: 12px 16px; color: var(--cream); font-size:13px;
}
.footer__newsletter input::placeholder{ color: rgba(246,241,231,.4); }
.footer__newsletter button{ width:42px; height:42px; border-radius:50%; background: var(--teal); color:#fff; border:none; font-size:16px; flex-shrink:0; }
.footer__bottom{ padding-top: 26px; display:flex; justify-content:space-between; font-size:12.5px; flex-wrap:wrap; gap:8px; }
.footer__ph-note{ opacity:.5; font-style:italic; }

/* ============ MODAL ============ */
.modal{ position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; padding:20px; visibility:hidden; opacity:0; transition: opacity .3s ease, visibility .3s ease; }
.modal.is-open{ visibility:visible; opacity:1; }
.modal::before{ content:''; position:absolute; inset:0; background: rgba(23,22,15,.6); backdrop-filter: blur(6px); }
.modal__panel{
  position:relative; background: var(--cream); border-radius: var(--radius-lg); padding: 46px 40px; max-width: 380px; text-align:center;
  transform: scale(.9) translateY(20px); transition: transform .4s var(--ease);
}
.modal.is-open .modal__panel{ transform: scale(1) translateY(0); }
.modal__icon{ font-size: 40px; margin-bottom: 16px; }
.modal__panel h3{ font-size: 24px; margin-bottom: 10px; }
.modal__panel p{ color: var(--ink-soft); font-size: 14.5px; line-height:1.6; }
.modal__close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px; color: var(--ink-soft); z-index:2; }

/* ============ VILLA DETAIL MODAL ============ */
.modal__panel--villa{
  max-width: 760px; width:100%; text-align:left; padding:0; overflow:hidden; max-height: 88vh;
  display:grid; grid-template-columns: 1.1fr 1fr; overflow-y:auto;
}
.villa-modal__gallery{ background: var(--ink); display:flex; flex-direction:column; }
.villa-modal__main{ aspect-ratio: 4/3; }
.villa-modal__main img{ width:100%; height:100%; object-fit:cover; }
.villa-modal__thumbs{ display:flex; gap:6px; padding:8px; overflow-x:auto; }
.villa-modal__thumbs img{
  width:60px; height:46px; object-fit:cover; border-radius:6px; cursor:pointer; opacity:.55; flex-shrink:0;
  transition: opacity .2s ease;
}
.villa-modal__thumbs img:hover, .villa-modal__thumbs img.is-active{ opacity:1; }
.villa-modal__body{ padding: 34px 32px; display:flex; flex-direction:column; }
.villa-modal__tagline{ font-family: var(--ff-serif); font-style:italic; font-size:16px; color: var(--ink-soft); margin-top:8px; }
.villa-modal__desc{ font-size:14.5px; line-height:1.7; color: var(--ink-soft); margin-top:18px; }
.villa-modal__footer{ margin-top:auto; padding-top:24px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.villa-modal__body .villa-card__stats{ margin-top:16px; }

/* ============ BOOKING FLOW MODAL ============ */
.modal__panel--flow{
  max-width: 640px; width:100%; max-height: 90vh; padding:0; text-align:left;
  display:flex; flex-direction:column; overflow:hidden;
}
.flow__progress{
  display:flex; gap:6px; padding: 26px 32px 0;
}
.flow__dot{
  flex:1; text-align:center; font-size:11px; font-weight:700; color: var(--ink-soft);
  padding-bottom:14px; border-bottom: 3px solid var(--line); position:relative;
}
.flow__dot span{
  display:block; width:22px; height:22px; line-height:22px; border-radius:50%; background: var(--cream-2);
  color: var(--ink-soft); font-size:11px; margin: 0 auto 6px; transition: background .3s ease, color .3s ease;
}
.flow__dot.is-active{ color: var(--ink); border-bottom-color: var(--teal); }
.flow__dot.is-active span, .flow__dot.is-done span{ background: var(--teal); color:#fff; }
.flow__dot.is-done{ color: var(--ink); border-bottom-color: var(--teal); }

.flow__body{ padding: 28px 32px; overflow-y:auto; flex:1; }
.flow__step{ display:none; }
.flow__step.is-active{ display:block; }
.flow__step-title{ font-size: 24px; margin-bottom: 8px; }
.flow__step-sub{ font-size:14px; color: var(--ink-soft); margin-bottom: 22px; }

.flow__step .booking-card__field--villa,
.flow__step .booking-card__row{ margin-bottom: 18px; }
.flow__step .booking-card__field--guests{ margin-top: 4px; }

/* Add-ons */
.addons__grid{ display:flex; flex-direction:column; gap:12px; }
.addon{
  display:flex; align-items:center; gap:16px; padding: 16px; border:1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .25s ease, background .25s ease;
}
.addon--toggle{ cursor:pointer; }
.addon.is-selected{ border-color: var(--teal); background: rgba(62,122,115,.06); }
.addon__icon{ font-size:24px; flex-shrink:0; width:40px; text-align:center; }
.addon__body{ flex:1; min-width:0; }
.addon__body h4{ font-size:14.5px; font-weight:700; }
.addon__body p{ font-size:12.5px; color: var(--ink-soft); margin-top:2px; line-height:1.5; }
.addon__price{ font-size:12px; color: var(--wood-dark); font-weight:700; margin-top:4px; }
.addon__control{ flex-shrink:0; }
.addon__toggle{
  width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; color:transparent; transition: all .2s ease;
}
.addon.is-selected .addon__toggle{ background: var(--teal); border-color: var(--teal); color:#fff; }
.addon__qty{ display:flex; align-items:center; gap:10px; }
.addon__qty button{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:14px;
  display:flex; align-items:center; justify-content:center; transition: background .2s ease, color .2s ease;
}
.addon__qty button:hover{ background: var(--ink); color:#fff; border-color: var(--ink); }
.addon__qty span{ min-width:12px; text-align:center; font-weight:700; font-size:13.5px; }

/* Guest details form */
.flow__form{ display:flex; flex-direction:column; gap:16px; }
.flow__field label{ display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:8px; font-weight:700; }
.flow__field label span{ text-transform:none; letter-spacing:0; font-weight:500; opacity:.7; }
.flow__field input, .flow__field textarea{
  width:100%; padding: 13px 15px; border-radius: var(--radius-sm); border:1px solid var(--line);
  background:#fff; font-size:14.5px; font-family:inherit; color: var(--ink); resize:vertical;
}
.flow__field input:focus, .flow__field textarea:focus{ outline:none; border-color: var(--teal); }

/* Review step */
.flow__review{ border:1px solid var(--line); border-radius: var(--radius-sm); overflow:hidden; }
.flow__review-row{
  display:flex; justify-content:space-between; gap:14px; padding: 13px 16px; font-size:13.5px;
  border-bottom:1px solid var(--line); color: var(--ink-soft);
}
.flow__review-row:last-child{ border-bottom:none; }
.flow__review-row span:first-child{ color: var(--ink); }
.flow__review-row--total{ font-weight:800; color: var(--ink); font-size:16px; background: var(--cream-2); }
.flow__pay-note{
  margin-top:18px; font-size:12.5px; color: var(--ink-soft); display:flex; align-items:flex-start; gap:8px; line-height:1.6;
}

.flow__footer{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 18px 32px; border-top:1px solid var(--line); background: var(--cream);
}
.flow__footer-total{ display:flex; flex-direction:column; }
.flow__footer-total span{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-soft); font-weight:700; }
.flow__footer-total strong{ font-family: var(--ff-serif); font-size:22px; }
.flow__footer-nav{ display:flex; gap:10px; }
.flow__footer-nav .btn{ padding: 13px 22px; }
#flowBack[hidden]{ display:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .about__grid, .booking__grid, .location__grid, .lombok__grid{ grid-template-columns: 1fr; gap: 50px; }
  .amenities__grid, .villas__grid, .why-direct__grid{ grid-template-columns: repeat(2,1fr); }
  .testimonials__grid{ grid-template-columns: 1fr; }
  .about__stat-card{ position:static; margin-top:20px; width:auto; }
  .modal__panel--villa{ grid-template-columns: 1fr; max-width: 480px; }
  .villa-modal__main{ aspect-ratio: 16/10; }
}

@media (max-width: 860px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav__cta{ display:none; }
  .gallery__grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 230px; }
  .gallery__item--wide{ grid-column: span 2; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .lombok__mosaic{ grid-auto-rows: 130px; }
}

@media (max-width: 640px){
  .section-inner{ padding: 0 20px; }
  .about, .villas, .why-direct, .gallery, .amenities, .lombok, .testimonials, .booking, .location{ padding-top: 80px; padding-bottom: 80px; }
  .amenities__grid{ grid-template-columns: 1fr 1fr; }
  .villas__grid, .why-direct__grid{ grid-template-columns: 1fr; }
  .gallery__grid{ grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .gallery__item--wide{ grid-column: span 1; }
  .footer__grid{ grid-template-columns: 1fr; gap: 34px; }
  .about__stats{ grid-template-columns: repeat(2,1fr); }
  .cta-strip__inner{ flex-direction:column; align-items:flex-start; }
  .booking__start-card{ padding: 28px 22px; }
  .hero__actions{ flex-direction:column; width:100%; }
  .hero__actions span{ display:flex; flex-direction:column; gap:14px; width:100%; }
  .lombok__mosaic{ grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .lombok__mosaic-item--big{ grid-column: span 1; grid-row: span 1; }

  .modal--flow{ padding:0; }
  .modal__panel--flow{ max-width:100%; width:100%; height:100%; max-height:100%; border-radius:0; }
  .flow__progress{ padding: 18px 20px 0; }
  .flow__dot{ font-size:0; }
  .flow__dot span{ font-size:11px; margin-bottom:0; }
  .flow__body{ padding: 22px 20px; }
  .flow__footer{ padding: 16px 20px; }
}

/* Mobile nav open state */
.nav__links.is-open{
  display:flex; position:fixed; inset:0; top:0; background: var(--ink); flex-direction:column;
  align-items:center; justify-content:center; gap: 30px; z-index:150;
}
.nav__links.is-open a{ color: var(--cream); font-size:22px; opacity:1; }
.nav__burger.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__burger.is-active span:nth-child(2){ opacity:0; }
.nav__burger.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ── Custom villa picker (replaces the ugly native <select> on mobile) ── */
select.booking-card__select.is-enhanced{ position:absolute!important; width:1px; height:1px; opacity:0; pointer-events:none; }
.villa-pick{ position:relative; }
.villa-pick__trigger{
  width:100%; text-align:left; padding:13px 44px 13px 16px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:#fff; font-size:14.5px; font-weight:600; color:var(--ink);
  position:relative; cursor:pointer; transition:border-color .25s ease; line-height:1.25;
}
.villa-pick__trigger:hover{ border-color:var(--wood); }
.villa-pick__trigger small{ display:block; font-weight:600; font-size:12px; color:var(--teal); margin-top:2px; }
.villa-pick__trigger::after{
  content:''; position:absolute; right:16px; top:50%; width:13px; height:9px; transform:translateY(-50%);
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2317160f' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition:transform .25s ease; pointer-events:none;
}
.villa-pick.is-open .villa-pick__trigger::after{ transform:translateY(-50%) rotate(180deg); }
.villa-pick__panel{
  position:absolute; z-index:60; left:0; right:0; top:calc(100% + 8px);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.35); max-height:300px; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s; -webkit-overflow-scrolling:touch;
}
.villa-pick.is-open .villa-pick__panel{ opacity:1; visibility:visible; transform:none; }
.villa-pick__group{ padding:11px 16px 5px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--wood-dark); font-weight:800; position:sticky; top:0; background:#fff; }
.villa-pick__opt{
  display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%;
  padding:12px 16px; background:none; border:0; border-top:1px solid var(--line); cursor:pointer; text-align:left;
  font-size:14px; color:var(--ink); transition:background .15s ease;
}
.villa-pick__opt:hover{ background:var(--cream); }
.villa-pick__opt.is-sel{ background:rgba(62,122,115,.12); }
.villa-pick__opt-name{ font-weight:600; }
.villa-pick__opt-price{ font-size:12.5px; color:var(--ink-soft); white-space:nowrap; }

/* Already-booked nights in the booking calendar (Airbnb-style, struck through) */
.cal__day.is-booked{
  color: rgba(23,22,15,.28); text-decoration: line-through; cursor: not-allowed;
  background: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(23,22,15,.05) 4px, rgba(23,22,15,.05) 8px);
}
.cal__day.is-booked:hover{ background: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(23,22,15,.05) 4px, rgba(23,22,15,.05) 8px); }

/* Booking recap card on the Payment/Review step */
.flow__recap{ display:flex; gap:14px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:12px; margin-bottom:16px; }
.flow__recap-img{ width:100px; height:82px; flex:none; border-radius:12px; overflow:hidden; background:var(--cream-2); }
.flow__recap-img img{ width:100%; height:100%; object-fit:cover; }
.flow__recap-info{ min-width:0; }
.flow__recap-name{ font-family:var(--ff-serif); font-size:21px; font-weight:500; line-height:1; }
.flow__recap-meta{ font-size:12.5px; color:var(--ink-soft); margin-top:6px; }
.flow__recap-incl{ font-size:11.5px; color:var(--teal); margin-top:6px; font-weight:600; }
.flow__recap-link{ display:inline-block; font-size:12.5px; font-weight:700; color:var(--ink); text-decoration:underline; margin-top:8px; }
.flow__recap-link:hover{ color:var(--teal); }
@media(max-width:520px){ .flow__recap-incl{ display:none; } .flow__recap-img{ width:80px; height:70px; } .flow__recap-name{ font-size:18px; } }