/* ============================================================
   FOUR ELEMENTS VILLAS — Ubud, Bali
   Design language: quiet minimalist luxury (inspired brief).
   Palette: cream / ink / muted terracotta + sage accent.
   ============================================================ */

:root{
  --cream:      #F6F2EA;   /* page background        */
  --cream-2:    #EFE9DD;   /* alt section background */
  --ink:        #051E28;   /* dark petrol text       */
  --ink-soft:   #3C5159;   /* secondary text         */
  --line:       #D8D1C2;   /* hairlines              */
  --accent:     #9A6A4B;   /* terracotta / earth     */
  --sage:       #A8B5A2;   /* muted sage green panel */
  --sage-dark:  #97A690;
  --white:      #FFFFFF;
  --bg:         #A6B4A7;   /* page background (sage) */

  /* Newsreader ≈ GT Sectra (serif body) · Hanken Grotesk ≈ History (sans headings) */
  --serif: 'Newsreader', Georgia, serif;
  --sans:  'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Cinzel', Georgia, serif;   /* hero + villa headings */

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 80px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
/* Nav jumps land at the very start of the target so the previous section isn't
   left peeking above it. The header auto-hides on scroll-down, and each target
   opens with its own top padding, so nothing ends up tucked under the header. */
#yourstay, #inside, #location{ scroll-margin-top:0; }
body{
  font-family:var(--serif);
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---- Typographic helpers ---- */
h1,h2,h3,h4{ font-family:var(--sans); font-weight:500; line-height:1.15; letter-spacing:.01em; }
h2{ font-size:clamp(2rem, 4.5vw, 3.4rem); }
h3{ font-size:clamp(1.8rem, 3.5vw, 2.6rem); }
h3 em{ font-style:italic; color:var(--accent); }
.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.72rem;
  font-weight:400;
  color:var(--accent);
  margin-bottom:1rem;
}
.eyebrow--light{ color:rgba(255,255,255,.75); }
.lede{
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  color:var(--ink-soft);
  max-width:60ch;
  margin-inline:auto;
}

/* ============ HEADER ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s ease, box-shadow .4s ease, transform .45s ease;
}
/* solid bar when revealed after scrolling */
.site-header.scrolled{ background:var(--bg); box-shadow:0 1px 0 rgba(5,30,40,.08); }
/* hide when scrolling down */
.site-header.hidden{ transform:translateY(-100%); }
.header-inner{
  max-width:var(--maxw); margin:0 auto;
  padding:18px var(--pad);
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px;
}
/* keep nav vertically aligned near the top while the big logo hangs below */
.main-nav, .nav-toggle{ margin-top:14px; }
.site-header.scrolled .main-nav, .site-header.scrolled .nav-toggle{ margin-top:6px; }
.brand{ display:flex; align-items:center; gap:12px; color:var(--white); flex:none; }
.site-header.scrolled .brand{ color:var(--ink); }
/* brand logo image, top-left (prominent over hero, shrinks when scrolled) */
.brand-logo{
  height:216px; width:auto; max-width:none; flex:none; display:block;
  margin-top:-14px; margin-left:-24px;   /* a bit higher and shifted left */
  filter:brightness(0) invert(1);      /* white over the hero photo */
  transition:filter .4s ease, height .4s ease;
}
.site-header.scrolled .brand-logo{ height:64px; filter:none; margin-top:0; margin-left:-6px; }  /* smaller + black on the bar */
.brand-mark{
  width:42px; height:42px; flex:none;
  border:1px solid currentColor; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--serif); font-size:1.1rem; letter-spacing:.05em;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{ font-family:var(--serif); font-size:1.15rem; letter-spacing:.02em; }
.brand-sub{ font-family:var(--sans); font-size:.74rem; letter-spacing:.32em; text-transform:uppercase; opacity:.85; }

.main-nav{ display:flex; align-items:center; justify-content:flex-end; margin-left:auto; gap:30px; }
.main-nav a{
  font-family:var(--sans);
  font-size:.92rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--white); position:relative; padding:4px 0;
  white-space:nowrap;   /* keep multi-word items ("Your Stay", "Enquire Now") on one line */
}
.site-header.scrolled .main-nav a{ color:var(--ink); }
/* current page highlighted green in the menu */
.main-nav a.is-active,
.site-header.scrolled .main-nav a.is-active{ color:#36C24A; }

/* language switcher (top right) */
.lang-switch{ display:flex; align-items:center; gap:7px; margin-left:6px; }
.lang-switch button{
  background:none; border:0; cursor:pointer; padding:2px 1px;
  font-family:var(--sans); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; opacity:.6; transition:opacity .2s ease;
}
.site-header.scrolled .lang-switch button{ color:var(--ink); }
.lang-switch button:hover{ opacity:.9; }
.lang-switch button.is-active{ opacity:1; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.lang-switch span{ color:#fff; opacity:.4; }
.site-header.scrolled .lang-switch span{ color:var(--ink); }
.main-nav a:not(.nav-cta):not(.nav-cta-ghost)::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:currentColor; transition:width .3s ease;
}
.main-nav a:not(.nav-cta):not(.nav-cta-ghost):hover::after{ width:100%; }
.nav-cta-ghost{ border:1px solid currentColor; padding:9px 18px !important; border-radius:2px; }
.nav-cta{
  background:var(--white); color:var(--ink) !important;
  padding:9px 20px !important; border-radius:2px;
  transition:background .3s, color .3s;
}
.site-header.scrolled .nav-cta{ background:var(--ink); color:var(--white) !important; }
.nav-cta:hover{ background:var(--accent); color:var(--white) !important; }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; width:30px; height:22px; position:relative; }
.nav-toggle span{ position:absolute; left:0; width:100%; height:1.5px; background:var(--white); transition:.3s; }
.site-header.scrolled .nav-toggle span{ background:var(--ink); }
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:10px; }
.nav-toggle span:nth-child(3){ top:20px; }

/* ============ HERO ============ */
.hero{ position:relative; height:100vh; min-height:600px; display:grid; place-items:center; overflow:hidden; }
.hero-media{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.05); animation:slowZoom 18s ease-out forwards;
}
@keyframes slowZoom{ to{ transform:scale(1); } }
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,18,14,.45) 0%, rgba(20,18,14,.15) 40%, rgba(20,18,14,.55) 100%);
}
.hero-content{ position:relative; text-align:center; color:var(--white); padding:0 20px; }
/* elegant serif wordmark in the centre of the hero */
.hero-title{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.9rem, 5.2vw, 4rem); line-height:1.12;
  letter-spacing:.05em; text-transform:uppercase;
  text-shadow:0 2px 24px rgba(0,0,0,.4);
}
.hero-place{
  margin-top:1.1rem; font-family:var(--sans); font-weight:300;
  letter-spacing:.52em; font-size:clamp(.7rem,1.6vw,.9rem);
  text-transform:uppercase; opacity:.92; padding-left:.52em;
}
/* breadcrumb under the hero title (villa detail pages) */
.breadcrumb{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:12px; margin-top:1.3rem;
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.2em;
  font-size:.72rem; color:#fff;
}
.breadcrumb a{ color:#fff; opacity:.9; transition:opacity .2s ease; }
.breadcrumb a:hover{ opacity:1; text-decoration:underline; }
.breadcrumb .bc-current{ opacity:.7; }
.bc-sep{ width:7px; height:7px; border-radius:50%; background:#36C24A; flex:none; }

/* visually-hidden helper (kept for accessibility) */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.scroll-cue{
  position:absolute; bottom:30px; left:50%;
  width:58px; height:58px; margin-left:-29px;
  display:grid; place-items:center;
  border:1.5px solid rgba(255,255,255,.85); border-radius:50%;
  background:rgba(255,255,255,.08); backdrop-filter:blur(2px);
  animation:scrollBounce 1.6s ease-in-out infinite;
}
.scroll-cue svg{ width:24px; height:24px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.scroll-cue:hover{ background:rgba(255,255,255,.2); }
@keyframes scrollBounce{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(10px) } }

/* ============ INTRO ============ */
.intro{ background:var(--sage); text-align:center; padding:clamp(110px,16vw,200px) var(--pad); }
.intro .eyebrow, .intro h2, .intro .lede{ max-width:820px; margin-left:auto; margin-right:auto; }
.intro h2{ font-family:var(--display); font-weight:500; margin:.3rem auto 1.6rem; }
.intro .intro-question{ margin:clamp(2.4rem,4vw,3.4rem) auto 0; }
/* white circular Instagram link */
.intro-circle{
  display:inline-grid; place-items:center;
  width:158px; height:158px; border-radius:50%;
  background:#fff; color:var(--ink);
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.2em; font-size:.82rem;
  margin-top:clamp(2.4rem,4vw,3.4rem);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.intro-circle:hover{
  transform:scale(1.05); background:var(--ink); color:#fff;   /* darker petrol on hover */
  box-shadow:0 16px 36px -16px rgba(5,30,40,.45);
}
/* thin vertical line beneath the circle */
.intro-line{
  display:block; width:1px; height:80px; background:var(--ink);
  opacity:.45; margin:clamp(2.4rem,4vw,3.4rem) auto 0;
}

/* ============ SECTION HEAD ============ */
.section-head{ text-align:center; padding:clamp(50px,8vw,100px) var(--pad) clamp(20px,4vw,50px); }

/* ============ VILLAS — full-bleed alternating panels ============ */
.villas{ background:var(--sage); }
.villa{
  display:grid; grid-template-columns:1fr 1fr;
  min-height:clamp(460px, 82vh, 820px);
}
/* image side */
.villa-img{ position:relative; background-size:cover; background-position:center; }
/* villa name overlaid on the image — shown on mobile only, where image and text
   panel stack and it's hard to tell which photo belongs to which villa */
.villa-img-name{ display:none; }
/* text panel side */
.villa-panel{ background:var(--sage); display:flex; align-items:center; }
.villa--img-left .villa-img{ order:1; }
.villa--img-left .villa-panel{ order:2; }
/* gentle alternating tone so stacked panels read as offset */
.villa--img-left .villa-panel{ background:var(--sage-dark); }

.villa-panel-inner{
  width:100%; color:var(--ink); text-align:left;
  display:flex; align-items:center; gap:clamp(16px,2vw,30px);
  padding-top:clamp(34px,5vw,58px); padding-bottom:clamp(34px,5vw,58px);
}
/* text sits CLOSER to the image: small padding on the image side, larger on the outer side */
.villa--img-right .villa-panel-inner{ padding-left:clamp(28px,5vw,72px); padding-right:clamp(16px,2vw,28px); }
.villa--img-left  .villa-panel-inner{ padding-right:clamp(28px,5vw,72px); padding-left:clamp(16px,2vw,28px); }
/* element logo: much bigger, to the LEFT of the villa text */
.villa-icon{ flex:none; margin:0; line-height:0; }
.villa-icon img{
  display:block; width:auto; height:auto;
  max-width:190px; max-height:190px; object-fit:contain;
}
.villa-copy{ flex:1 1 auto; min-width:0; }

.villa h3{
  font-family:var(--display); font-weight:500; color:var(--ink);
  text-transform:uppercase; letter-spacing:.05em;
  font-size:36px; line-height:42px; margin-bottom:.8rem;
}
.villa-price{
  font-family:var(--sans); font-weight:400; color:var(--ink);
  text-transform:uppercase; letter-spacing:.08em;
  font-size:20px; line-height:20px; margin-bottom:1.3rem;
}
.villa-desc{
  font-family:var(--serif); font-size:1.25rem; line-height:1.5;
  color:var(--ink); opacity:.92; margin:0 0 1.8rem;
}

/* EXPLORE with long arrow */
.explore{
  display:inline-flex; align-items:center; gap:18px;
  font-family:var(--sans); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:2.4rem;
}
.explore-arrow{ position:relative; width:80px; height:1px; background:var(--ink); transition:width .3s ease; }
.explore-arrow::after{
  content:""; position:absolute; right:0; top:50%; width:8px; height:8px;
  border-top:1px solid var(--ink); border-right:1px solid var(--ink);
  transform:translateY(-50%) rotate(45deg);
}
.explore:hover .explore-arrow{ width:104px; }

.villa-btns{ display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-start; }

/* ============ ULTRA-WIDE BANNER SLIDER (full width, 21:9) ============ */
.banner{ position:relative; width:100%; aspect-ratio:21/9; overflow:hidden; background:#1a1f1c; }
.banner-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1s ease;
}
.banner-slide.is-active{ opacity:1; }
.banner-ov{ position:absolute; inset:0; background:linear-gradient(rgba(5,30,40,.28),rgba(5,30,40,.5)); }
.banner-content{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; color:#fff; padding:0 20px; }
.banner-content h2{
  font-family:var(--display); font-weight:500; color:#fff;
  text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(1.6rem,4vw,3.4rem); text-shadow:0 2px 22px rgba(0,0,0,.5);
}
/* slider navigation dots */
.banner-dots{
  position:absolute; left:50%; bottom:clamp(14px,2.5vw,26px); transform:translateX(-50%);
  display:flex; gap:11px; z-index:3;
}
.banner-dots .dot{
  width:12px; height:12px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background:rgba(255,255,255,.55); box-shadow:0 1px 4px rgba(0,0,0,.3);
  transition:background .3s ease, transform .3s ease;
}
.banner-dots .dot:hover{ background:rgba(255,255,255,.85); }
.banner-dots .dot.is-active{ background:#3ddc6a; transform:scale(1.2); }   /* active = green */
/* prev / next arrows on the banner */
.banner-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:48px; height:48px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.85); color:var(--ink); font-size:1.7rem; line-height:1;
  display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.28);
  transition:background .2s ease, transform .2s ease;
}
.banner-arrow:hover{ background:#fff; }
.banner-prev{ left:clamp(12px,2vw,28px); }
.banner-next{ right:clamp(12px,2vw,28px); }
/* On phones the 21:9 strip is too small for the villa galleries — use a square,
   matching the chessboard images above (auto-playing home banner stays 21:9) */
@media (max-width:640px){
  .banner[data-manual]{ aspect-ratio:1/1; }
}

/* ============ YOUR STAY BAND ============ */
/* Mirrors the Sustainability band (same width, padding and font sizes) but on the
   site's sage-green background, with the service lists laid out in two columns. */
.yourstay{ background:var(--sage); color:var(--ink); padding:clamp(70px,11vw,150px) var(--pad); }
.yourstay-inner{ max-width:780px; margin:0 auto; }
.yourstay h2{
  font-family:var(--display); font-weight:500; color:var(--ink);
  text-transform:uppercase; letter-spacing:.05em; text-align:center;
  font-size:clamp(2rem,4vw,3rem); margin:0 0 1.8rem;
}
.yourstay-intro{
  font-family:var(--serif); font-size:1.15rem; line-height:1.75;
  color:var(--ink); text-align:left; margin:0 0 2.6rem;
}
.yourstay-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:2.4rem; margin-bottom:2.6rem;
}
.yourstay-col h3,
.yourstay-guests h3{
  font-family:var(--display); font-weight:500; text-transform:uppercase;
  letter-spacing:.04em; font-size:1.15rem; color:var(--ink); margin:0 0 1rem;
}
.yourstay-col ul{ list-style:none; margin:0; padding:0; }
.yourstay-col li{
  font-family:var(--serif); font-size:1.15rem; line-height:1.6; color:var(--ink);
  position:relative; padding-left:1.4em; margin:0 0 .7rem;
}
.yourstay-col li:last-child{ margin-bottom:0; }
.yourstay-col li::before{ content:"—"; position:absolute; left:0; color:var(--accent); }
.yourstay-guests{ text-align:left; }
.yourstay-guests p{
  font-family:var(--serif); font-size:1.15rem; line-height:1.75; color:var(--ink); margin:0 0 1.2rem;
}
.yourstay-guests p:last-child{ margin-bottom:0; }
@media (max-width:640px){
  .yourstay-cols{ grid-template-columns:1fr; gap:2rem; }
}

/* ============ SUSTAINABILITY BAND ============ */
.sustain{ background:#ED9871; color:var(--ink); padding:clamp(70px,11vw,150px) var(--pad); }
.sustain-inner{ max-width:780px; margin:0 auto; }
.sustain h2{
  font-family:var(--display); font-weight:500; color:var(--ink);
  text-transform:uppercase; letter-spacing:.05em; text-align:center;
  font-size:clamp(2rem,4vw,3rem); margin:0 0 1.8rem;
}
.sustain p{
  font-family:var(--serif); font-size:1.15rem; line-height:1.75;
  color:var(--ink); margin:0 0 1.2rem;
}
.sustain p:last-child{ margin-bottom:0; }

/* ============ QUAD GRID — chessboard of 4 full-bleed tiles ============ */
.quad{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.quad-tile{
  position:relative; overflow:hidden;
  aspect-ratio:1/1;                 /* almost square tiles */
  display:grid; place-items:center;
}
.quad-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform .7s ease, filter .7s ease;
}
.quad-ov{ position:absolute; inset:0; background:rgba(5,30,40,.42); transition:background .5s ease; }
.quad-tile:hover .quad-bg{ transform:scale(1.06); filter:brightness(1.18); }   /* enlarge + lighten */
.quad-tile:hover .quad-ov{ background:rgba(5,30,40,.18); }
.quad-tile h3{
  position:relative; z-index:2; color:#fff;
  font-family:var(--display); font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
  font-size:clamp(1.3rem,2.4vw,2rem); text-shadow:0 2px 16px rgba(0,0,0,.45);
}
/* heading + round button stacked (e.g. Location → Google Maps) */
.quad-content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2vw,24px); }
.quad-content h3{ text-shadow:0 2px 16px rgba(0,0,0,.45); }
.quad-circle{
  display:grid; place-items:center; text-align:center;
  width:clamp(104px,13vw,134px); height:clamp(104px,13vw,134px); border-radius:50%;
  background:#fff; color:var(--ink);
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; line-height:1.4;
  transition:transform .3s ease, background .3s ease, color .3s ease;
}
.quad-tile:hover .quad-circle{ transform:scale(1.06); background:var(--ink); color:#fff; }
@media (max-width:600px){ .quad{ grid-template-columns:1fr; } }

/* ============ GLIMPSE CAROUSEL ============ */
.glimpse{ padding-bottom:clamp(60px,9vw,120px); }
.section-head h2{ font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:.04em; }

.glimpse-carousel{ position:relative; padding:0 clamp(16px, 3vw, 44px); }
.glimpse-track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:0 0 12px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.glimpse-track::-webkit-scrollbar{ display:none; }

.glimpse-card{ flex:0 0 auto; width:min(86vw, 540px); scroll-snap-align:start; }
.glimpse-img{
  width:100%; aspect-ratio:1/1; background-size:cover; background-position:center;
  border-radius:2px; transition:filter .5s ease;
}
.glimpse-card:hover .glimpse-img{ filter:brightness(1.06); }
/* Diagrams/sketches must show in full (labels on all sides) — fit inside the
   square with the paper-toned letterbox rather than cropping the edges */
.glimpse-img--fit{ background-size:contain; background-repeat:no-repeat; background-color:#ECD8C0; }
.glimpse-date{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--ink-soft); margin:18px 0 8px; }
.glimpse-title{ font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:.03em; font-size:1.05rem; line-height:1.3; margin:0 0 8px; }
.glimpse-text{ font-family:var(--serif); font-size:1rem; line-height:1.6; color:var(--ink-soft); }

/* prev / next arrows */
.glimpse-arrow{
  position:absolute; top:clamp(187px, 22.5vw, 270px); transform:translateY(-50%);
  width:46px; height:46px; border:0; border-radius:50%; cursor:pointer; z-index:5;
  background:#fff; color:var(--ink); font-size:1.5rem; line-height:1;
  display:grid; place-items:center; box-shadow:0 6px 18px -6px rgba(5,30,40,.4);
  transition:background .25s ease, transform .25s ease;
}
.glimpse-arrow:hover{ background:var(--ink); color:#fff; }
.glimpse-prev{ left:8px; }
.glimpse-next{ right:8px; }

/* ============ FEATURE (Longstay / Location) ============ */
.feature{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:clamp(24px,5vw,72px);
  padding:clamp(50px,8vw,110px) var(--pad);
}
.feature--reverse .feature-media{ order:2; }
.feature-media{ aspect-ratio:7/5; background-size:cover; background-position:center; border-radius:2px; box-shadow:0 30px 60px -30px rgba(28,26,22,.4); }
.feature-text h2{ margin:.3rem 0 1.2rem; }
.feature-text p{ color:var(--ink-soft); margin-bottom:2rem; max-width:48ch; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-block; font-family:var(--sans);
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  padding:15px 32px; border-radius:2px; transition:.3s; cursor:pointer; border:1px solid transparent;
}
.btn-outline{ border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--cream); }
.btn-solid{ background:var(--ink); color:var(--cream); }
.btn-solid:hover{ background:var(--accent); }
.btn-light{ border-color:rgba(255,255,255,.6); color:var(--white); }
.btn-light:hover{ background:var(--white); color:var(--ink); }
/* villa panel buttons (defined after .btn so the border colour wins) */
.btn-outline-dark{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-outline-dark:hover{ background:var(--ink); color:var(--sage); }
.btn-book{ background:var(--ink); color:var(--white); }
.btn-book:hover{ background:#0A2E3A; }
/* fully rounded (pill) buttons — e.g. Longstay & Location */
.btn-round{ border-radius:999px; padding:16px 38px; }

/* ============ CTA BAND ============ */
.cta-band{
  position:relative; text-align:center; color:var(--white);
  padding:clamp(80px,12vw,150px) var(--pad);
  background:linear-gradient(rgba(28,26,22,.55),rgba(28,26,22,.55)), url('../assets/Villa%20Earth.jpeg') center/cover;
}
.cta-band h2{ font-family:var(--display); font-weight:500; letter-spacing:.04em; margin-bottom:1rem; }
.cta-lede{ max-width:46ch; margin:0 auto 2.4rem; color:rgba(255,255,255,.85); }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ============ INSTAGRAM FEED (8 square posts) ============ */
.insta{
  background:#ED9871;
  /* outer space to the edges is larger than the gap between images */
  padding:clamp(56px,8vw,120px) clamp(40px,8vw,130px);
  display:flex; align-items:stretch; gap:clamp(16px,3vw,44px);
}
/* vertical handle to the left of the grid (reads bottom-to-top) */
.insta-handle{
  writing-mode:vertical-rl; transform:rotate(180deg);
  align-self:center; white-space:nowrap;
  font-family:var(--sans); font-weight:500; text-transform:uppercase;
  letter-spacing:.22em; font-size:clamp(.68rem,1vw,.82rem);
  color:var(--ink);
}
.insta-grid{
  flex:1;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.4vw,20px);          /* equal spacing between all images */
}
.insta-tile{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:2px; display:block; }
.insta-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .6s ease, filter .6s ease; }
.insta-tile:hover .insta-bg{ transform:scale(1.06); filter:brightness(1.08); }
.insta-ov{ position:absolute; inset:0; background:rgba(5,30,40,0); transition:background .4s ease; }
.insta-tile:hover .insta-ov{ background:rgba(5,30,40,.22); }
/* Instagram reel tile: play button + label sit over the thumbnail */
.insta-tile--reel .insta-ov{ background:rgba(5,30,40,.30); }
.insta-play{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; pointer-events:none; }
.insta-play svg{ width:clamp(46px,5vw,62px); height:clamp(46px,5vw,62px); filter:drop-shadow(0 2px 10px rgba(0,0,0,.4)); transition:transform .3s ease; }
.insta-tile--reel:hover .insta-play svg{ transform:scale(1.1); }
.insta-reel-label{
  position:absolute; left:0; right:0; bottom:clamp(10px,1.4vw,16px); z-index:2; text-align:center;
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.55); pointer-events:none;
}
@media (max-width:860px){ .insta-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============ VILLA DETAIL (chessboard: text / square image) ============ */
.vdetail{ display:grid; grid-template-columns:1fr 1fr; background:var(--sage); }
.vd-text{ display:flex; align-items:center; }
.vd-text-inner{ width:100%; max-width:560px; margin:0 auto; padding:clamp(36px,5vw,72px) clamp(28px,5vw,64px); }
.vd-text h2{
  font-family:var(--display); font-weight:500; color:var(--ink);
  text-transform:uppercase; letter-spacing:.04em; font-size:clamp(1.7rem,3vw,2.4rem); margin:0 0 1.2rem;
}
.vd-text p{ font-family:var(--serif); font-size:1.1rem; line-height:1.7; color:var(--ink); margin:0 0 1rem; }
.vd-img{ aspect-ratio:1/1; background-size:cover; background-position:center; }

.vd-features{ list-style:none; margin:0 0 1.4rem; padding:0; }
.vd-features li{
  font-family:var(--serif); font-size:1.05rem; line-height:1.5; color:var(--ink);
  position:relative; padding-left:1.4em; margin-bottom:.7rem;
}
.vd-features li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.vd-features li.vd-extra{ display:none; }
.vd-features.expanded li.vd-extra{ display:block; }
.vd-viewmore{
  display:inline-flex; align-items:center; gap:16px; background:none; border:0; cursor:pointer; padding:0;
  font-family:var(--sans); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
  margin-bottom:2rem;
}

/* ============ CONTACT (image-left / details-right) ============ */
.contact-detail .vd-img{ aspect-ratio:auto; min-height:clamp(360px, 52vh, 640px); }
.vd-lead{ font-family:var(--serif); font-size:1.1rem; line-height:1.7; color:var(--ink); margin:0 0 1.8rem; max-width:48ch; }
.contact-group{ margin-bottom:1.3rem; }
.contact-label{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; color:var(--ink); opacity:.6; margin:0 0 .45rem; }
.contact-group a{ display:block; font-family:var(--serif); font-size:1.08rem; color:var(--ink); margin-bottom:.2rem; transition:color .2s ease; }
.contact-group a:hover{ color:var(--accent); }

/* ============ EXPLORE OTHER VILLAS ============ */
.explore-villas{ background:#ED9871; padding:clamp(56px,8vw,110px) var(--pad); }
.ev-head{ text-align:center; margin-bottom:clamp(30px,5vw,56px); }
.ev-head h2{
  font-family:var(--display); font-weight:500; color:var(--ink);
  text-transform:uppercase; letter-spacing:.04em; font-size:clamp(1.7rem,3.2vw,2.5rem);
}
.ev-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); }
.ev-tile{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:2px; display:grid; place-items:center; }
.ev-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .6s ease, filter .6s ease; }
.ev-tile:hover .ev-bg{ transform:scale(1.06); filter:brightness(1.08); }
.ev-ov{ position:absolute; inset:0; background:rgba(5,30,40,.28); transition:background .4s ease; }
.ev-tile:hover .ev-ov{ background:rgba(5,30,40,.15); }
.ev-tile h3{
  position:relative; z-index:2; color:#fff; font-family:var(--display); font-weight:500;
  text-transform:uppercase; letter-spacing:.05em; font-size:clamp(1.2rem,2vw,1.7rem); text-shadow:0 2px 14px rgba(0,0,0,.4);
}
@media (max-width:760px){
  .vdetail{ grid-template-columns:1fr; }
  .ev-grid{ grid-template-columns:1fr; }
}

/* ============ ENQUIRY FORM ============ */
.enquire-section{ padding:clamp(60px,9vw,120px) var(--pad); }
.enquire-wrap{
  max-width:760px; margin:0 auto; background:#fff; border-radius:4px;
  padding:clamp(30px,5vw,60px); box-shadow:0 30px 70px -28px rgba(5,30,40,.5);
}
/* orange required-field marker */
.req{ color:#E2722E; font-weight:600; }
.enquire-wrap .eyebrow{ text-align:center; }
.enquire-wrap h2{
  font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:.04em;
  text-align:center; font-size:clamp(1.7rem,3.4vw,2.5rem); margin:.3rem 0 2rem;
}
.enquire-form{ display:flex; flex-direction:column; gap:18px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field-row--3{ grid-template-columns:1fr 1fr 1fr; }
.enquire-form label{
  display:flex; flex-direction:column; gap:7px;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}
.enquire-form input, .enquire-form select, .enquire-form textarea{
  font-family:var(--serif); font-size:1rem; color:var(--ink); width:100%;
  padding:12px 14px; border:1px solid var(--line); border-radius:2px; background:#fff;
  text-transform:none; letter-spacing:normal;
}
.enquire-form input:focus, .enquire-form select:focus, .enquire-form textarea:focus{ outline:none; border-color:var(--ink); }
.enquire-form textarea{ resize:vertical; }
.checkbox-field{
  flex-direction:row !important; align-items:flex-start; gap:11px;
  text-transform:none !important; letter-spacing:normal !important;
  font-family:var(--serif) !important; font-size:.95rem !important; color:var(--ink) !important; line-height:1.5;
}
.checkbox-field input{ width:auto; flex:none; margin-top:4px; }
.checkbox-field a{ color:var(--accent); text-decoration:underline; }
.checkbox-field .privacy-note{ opacity:.7; font-style:italic; }
.enquire-form .btn{ align-self:flex-start; margin-top:8px; cursor:pointer; border:0; }
.enquire-success{
  font-family:var(--sans); font-size:.95rem; color:#2c5a2c;
  background:#eef5ee; border:1px solid #cfe3cf; border-radius:3px; padding:14px 18px; margin:0;
}
@media (max-width:600px){ .field-row, .field-row--3{ grid-template-columns:1fr; } }

/* ============ PRE-FOOTER BANNER (Instagram circle) ============ */
.footer-banner{
  position:relative; width:100%; overflow:hidden;
  /* same full width AND roughly the same height as the "Ready when you are" band */
  min-height:clamp(400px, calc(24vw + 235px), 620px);
  display:grid; place-items:center; background:#1a1f1c;
}
.footer-banner-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.footer-banner-ov{ position:absolute; inset:0; background:rgba(5,30,40,.22); }
.footer-banner-content{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(22px,4vw,56px); text-align:center;
}
.footer-banner .intro-circle{ margin-top:0; flex:none; }
.footer-banner-title{
  font-family:var(--display); font-weight:500; color:#fff;
  text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(1.8rem,4vw,3.2rem); text-shadow:0 2px 20px rgba(0,0,0,.45);
}

/* ============ FOOTER ============ */
.site-footer{ background:var(--sage); color:var(--ink); padding:clamp(50px,7vw,90px) var(--pad) 30px; }
.footer-inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;
  gap:40px 56px;                     /* evenly distributed columns, top-aligned */
}
.footer-brand{ flex:0 1 auto; }
.footer-col{ flex:0 1 auto; min-width:120px; }
.footer-name{
  font-family:var(--display); font-weight:500; color:var(--ink);
  text-transform:uppercase; letter-spacing:.03em; line-height:1.1; white-space:nowrap;
  font-size:clamp(1.3rem,1.9vw,1.85rem); margin:0 0 16px;
}
.footer-logo{ display:block; width:185px; height:auto; }
.footer-col h4{
  font-family:var(--sans); font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; font-size:.78rem; color:var(--ink); opacity:.92; margin-bottom:1.2rem;
}
.footer-col a{
  display:block; font-family:var(--sans); font-size:.92rem; letter-spacing:.01em;
  color:var(--ink); opacity:.82; margin-bottom:.7rem; transition:.25s ease;
}
.footer-col a:hover{ opacity:1; color:var(--accent); padding-left:4px; }
.footer-bottom{
  max-width:var(--maxw); margin:50px auto 0; padding-top:24px; border-top:1px solid rgba(5,30,40,.18);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:var(--sans); font-size:.74rem; letter-spacing:.06em; color:var(--ink); opacity:.62;
}
.footer-bottom a:hover{ opacity:1; }

/* ============ MODALS (gallery / card) ============ */
.modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(5,30,40,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:fadeIn .3s ease; }
.modal-panel{
  position:relative; z-index:1; width:min(94vw, 1000px); max-height:90vh;
  background:#fff; border-radius:4px; overflow:hidden;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.6); animation:modalIn .35s ease;
}
.modal--flip .modal-panel{ animation:flipIn .55s ease; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes modalIn{ from{ opacity:0; transform:translateY(20px) scale(.97) } to{ opacity:1; transform:none } }
@keyframes flipIn{ from{ opacity:0; transform:perspective(1400px) rotateY(90deg) } to{ opacity:1; transform:perspective(1400px) rotateY(0) } }

.modal-close{
  position:absolute; top:12px; right:12px; z-index:5;
  width:44px; height:44px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--ink); font-size:1.7rem; line-height:1;
  display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.modal-close:hover{ background:#fff; }

/* horizontal scroll gallery inside a modal */
.modal-gallery{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; max-height:90vh; scrollbar-width:none; }
.modal-gallery::-webkit-scrollbar{ display:none; }
.modal-gallery img{ flex:0 0 100%; width:100%; height:min(80vh,720px); object-fit:cover; scroll-snap-align:center; display:block; }
/* Environment photos are wide panoramas — show them big, near full-screen,
   at their natural ratio (no cropping). Transparent panel so the photo dominates. */
#modal-environment .modal-panel{ width:min(97vw, 1900px); background:transparent; box-shadow:none; }
#gal-environment{ align-items:center; }
#gal-environment img{ height:auto; max-height:90vh; object-fit:contain; border-radius:4px; }
.mg-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:48px; height:48px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.9); color:var(--ink); font-size:1.6rem; line-height:1;
  display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.25); transition:background .2s;
}
.mg-arrow:hover{ background:#fff; }
.mg-prev{ left:14px; }
.mg-next{ right:14px; }

/* long-stay conditions card */
.modal-panel--card{ background:#ED9871; }
.longstay-card{ padding:clamp(34px,5vw,64px); max-height:90vh; overflow-y:auto; color:var(--ink); }
.longstay-card .eyebrow{ color:var(--ink); opacity:.75; }
.longstay-card h3{ font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(1.7rem,3.2vw,2.4rem); margin:.2rem 0 1.2rem; }
.longstay-card p{ font-family:var(--serif); font-size:1.1rem; line-height:1.7; margin:0 0 1rem; }
.longstay-card .ls-note{ font-style:italic; opacity:.8; }
.longstay-card ul{ list-style:none; margin:0 0 1.4rem; padding:0; }
.longstay-card li{ font-family:var(--serif); font-size:1.1rem; line-height:1.6; padding-left:1.4em; position:relative; margin-bottom:.5rem; }
.longstay-card li::before{ content:"—"; position:absolute; left:0; }
.ls-cta{ margin-top:.6rem; }

/* Your Stay modal: grey flip card, content mirrors the "Your Stay" band 1:1
   (the .yourstay-cols / .yourstay-col / .yourstay-guests styles apply as-is). */
#modal-yourstay .modal-panel--card{ background:#D8D6D0; }
.yourstay-card{ padding:clamp(34px,5vw,64px); max-height:90vh; overflow-y:auto; color:var(--ink); }
.yourstay-card > h3{
  font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:.05em;
  text-align:center; font-size:clamp(1.8rem,3.4vw,2.6rem); margin:0 0 1.6rem;
}
.yourstay-card .yourstay-intro{ margin-bottom:2.2rem; }

/* ---- Food modal: single breakfast / in-villa dining card ---- */
.food-cards{ align-items:stretch; }
.food-card{ flex:0 0 100%; width:100%; max-height:90vh; overflow-y:auto; scroll-snap-align:center; -webkit-overflow-scrolling:touch; }
.food-card--img{ display:flex; justify-content:center; align-items:flex-start; background:#ED9871; }
.food-card--img img{ width:100%; height:auto; max-height:none; object-fit:contain; display:block; }
.food-card--text .food-card-inner{ padding:clamp(30px,5vw,60px); color:var(--ink); }
.food-card-inner .eyebrow{ color:var(--ink); opacity:.75; }
.food-card-inner h3{ font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(1.6rem,3vw,2.3rem); margin:.2rem 0 1.1rem; }
.food-card-inner h4{ font-family:var(--sans); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; opacity:.85; margin:1.2rem 0 .4rem; }
.food-card-inner p{ font-family:var(--serif); font-size:1.05rem; line-height:1.7; margin:0 0 1rem; }
.food-card-inner .ls-note{ font-style:italic; opacity:.82; }
.food-card-inner ul{ list-style:none; margin:0 0 .6rem; padding:0; }
.food-card-inner li{ font-family:var(--serif); font-size:1.04rem; line-height:1.55; padding-left:1.4em; position:relative; margin-bottom:.4rem; }
.food-card-inner li::before{ content:"—"; position:absolute; left:0; }
.food-card-inner .btn{ margin-top:.8rem; }
/* Floating-breakfast image inside the breakfast card */
.food-card-inner .breakfast-figure{ margin:1.4rem 0 .4rem; }
.food-card-inner .breakfast-figure img{
  width:100%; height:auto; display:block; border-radius:14px;
  box-shadow:0 10px 30px rgba(5,30,40,.14);
}
.food-card-inner .breakfast-figure figcaption{
  font-family:var(--serif); font-style:italic; font-size:.95rem;
  opacity:.75; text-align:center; margin-top:.7rem;
}

/* ---- Team tiles (the four middle Instagram tiles = our staff) ---- */
.insta-tile--team{
  border:0; padding:0; background:none; font:inherit; cursor:pointer;
  transition:transform .35s ease, box-shadow .35s ease;
}
.insta-tile--team:hover,
.insta-tile--team:focus-visible{
  transform:scale(1.05); z-index:3; outline:none;
  box-shadow:0 18px 38px -14px rgba(5,30,40,.55);
}
/* first-name caption, signals these tiles are people you can meet */
.insta-name{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:26px 14px 12px; pointer-events:none;
  font-family:var(--sans); font-size:.82rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#fff;
  background:linear-gradient(to top, rgba(5,30,40,.62), rgba(5,30,40,0));
}

/* ---- Team modal: flip cards (photo on top, story below, big first name) ---- */
#modal-team .modal-panel--card{ background:var(--sage); }
.team-cards{ align-items:stretch; }
.team-card{
  flex:0 0 100%; width:100%; max-height:90vh; overflow-y:auto;
  scroll-snap-align:center; -webkit-overflow-scrolling:touch;
  background:var(--sage);
}
/* higher specificity than the generic ".modal-gallery img" rule above */
#modal-team .team-card-photo img{
  flex:none; width:100%; height:min(52vh,460px); max-height:460px;
  object-fit:cover; object-position:center 25%; display:block;
}
.team-card-body{ padding:clamp(26px,4.5vw,54px); color:var(--ink); }
.team-card-el{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; opacity:.72; margin:0 0 .35rem;
}
.team-card-name{
  font-family:var(--display); font-weight:500; text-transform:uppercase;
  letter-spacing:.05em; line-height:1; font-size:clamp(2.1rem,4.6vw,3.1rem);
  margin:0 0 1.1rem;
}
.team-card-text{
  font-family:var(--serif); font-size:clamp(1rem,1.5vw,1.12rem);
  line-height:1.75; margin:0 0 1rem;
}

/* ---- Cutout variant: figure (transparent PNG/WebP) stands on the sage bg ---- */
.team-card--cutout{
  display:flex; flex-direction:row; align-items:stretch;
  overflow:hidden; background:var(--sage);
}
.team-card--cutout .team-card-body--cutout{
  flex:1 1 56%; min-width:0; align-self:stretch; overflow-y:auto;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,4.5vw,60px);
}
.team-card--cutout .team-card-figure{
  flex:0 0 44%; align-self:flex-end; display:flex; justify-content:center;
  /* soft radial "ground" so the figure doesn't float awkwardly */
  background:radial-gradient(120% 60% at 50% 100%, rgba(5,30,40,.10), rgba(5,30,40,0) 70%);
}
.team-card--cutout .team-card-figure picture{ display:flex; align-items:flex-end; }
.team-card--cutout .team-card-figure img{
  width:100%; height:auto; max-height:88vh; object-fit:contain; object-position:bottom center;
  display:block;
}
/* stack on narrow screens: figure on top, story below */
@media (max-width:640px){
  .team-card--cutout{ flex-direction:column; }
  .team-card--cutout .team-card-figure{ flex:0 0 auto; order:-1; align-self:stretch; height:42vh; }
  .team-card--cutout .team-card-figure img{ max-height:42vh; }
  .team-card--cutout .team-card-body--cutout{ flex:1 1 auto; justify-content:flex-start; }
}

/* ---- Photo cards (Elisiya/Novi/Tio): on desktop, two columns (photo | text).
        The photo fills its column edge-to-edge (cover) at a fixed card height, so
        there is no green letterbox/frame above or below it. The portraits are tall,
        so cover only trims a little at the sides — the person stays fully visible.
        Mobile keeps the stacked full-width photo above. ---- */
@media (min-width:641px){
  #modal-team .team-card:not(.team-card--cutout){
    display:flex; flex-direction:row; align-items:stretch; overflow:hidden;
    height:min(88vh,620px);
  }
  #modal-team .team-card:not(.team-card--cutout) .team-card-photo{
    flex:0 0 46%; align-self:stretch; overflow:hidden;
  }
  #modal-team .team-card:not(.team-card--cutout) .team-card-photo img{
    width:100%; height:100%; max-height:none; object-fit:cover; object-position:center; display:block;
  }
  #modal-team .team-card:not(.team-card--cutout) .team-card-body{
    flex:1 1 54%; align-self:stretch; overflow-y:auto;
  }
}

/* ============ WHATSAPP FLOAT ============ */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:95;
  width:58px; height:58px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  color:#25D366; display:grid; place-items:center;       /* green icon */
  box-shadow:0 8px 22px -8px rgba(0,0,0,.4);
  animation:waPulse 2.6s ease-out infinite, waVibrate 5s ease-in-out infinite;
  transition:background .25s;
}
.wa-float:hover{ background:rgba(255,255,255,.85); }
/* soft green halo that gently expands and fades */
@keyframes waPulse{
  0%   { box-shadow:0 8px 22px -8px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,.45); }
  70%  { box-shadow:0 8px 22px -8px rgba(0,0,0,.4), 0 0 0 15px rgba(37,211,102,0); }
  100% { box-shadow:0 8px 22px -8px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,0); }
}
/* brief, subtle wiggle every few seconds (idle most of the time) */
@keyframes waVibrate{
  0%, 88%, 100% { transform:rotate(0) scale(1); }
  90% { transform:rotate(-6deg) scale(1.05); }
  93% { transform:rotate(5deg); }
  96% { transform:rotate(-3deg); }
  98% { transform:rotate(1deg); }
}
/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .wa-float{ animation:none; }
}
.wa-badge{
  position:absolute; top:1px; right:3px; width:12px; height:12px; z-index:1;
  border-radius:50%; background:#ff3b30; border:2px solid #fff;
}

/* ---- chat popup ---- */
.wa-panel{
  position:fixed; right:22px; bottom:92px; z-index:95;
  width:min(92vw, 340px);
  background:#ece5dd; border-radius:14px; overflow:hidden;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.45);
  font-family:var(--sans);
  animation:waPop .22s ease;
}
.wa-panel[hidden]{ display:none; }
@keyframes waPop{ from{ opacity:0; transform:translateY(12px) scale(.96) } to{ opacity:1; transform:none } }

.wa-head{ display:flex; align-items:center; gap:10px; background:#1f2c33; color:#fff; padding:14px 16px; }
.wa-head-av{ width:30px; height:30px; border-radius:50%; background:#25D366; display:grid; place-items:center; flex:none; }
.wa-head-title{ font-weight:600; letter-spacing:.02em; font-size:.95rem; flex:1; }
.wa-close{ background:none; border:0; color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; opacity:.85; padding:0 2px; }
.wa-close:hover{ opacity:1; }

.wa-body{ padding:18px 16px 8px; min-height:120px; }
.wa-bubble{
  position:relative; background:#fff; border-radius:10px; padding:12px 14px 20px;
  max-width:90%; box-shadow:0 1px 1px rgba(0,0,0,.14); color:#222; font-size:.9rem; line-height:1.5;
}
.wa-bubble::before{
  content:""; position:absolute; top:0; left:-7px;
  border-width:0 9px 9px 0; border-style:solid; border-color:transparent #fff transparent transparent;
}
.wa-bubble p{ margin:0 0 .55rem; }
.wa-bubble p:last-of-type{ margin-bottom:0; }
.wa-time{ position:absolute; right:10px; bottom:5px; font-size:.62rem; color:#9aa0a6; }

.wa-foot{ padding:14px 16px 18px; }
.wa-start{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:#25D366; color:#fff; padding:13px; border-radius:30px;
  font-size:.92rem; letter-spacing:.04em; font-weight:500; transition:background .2s;
}
.wa-start:hover{ background:#1ebe57; }

/* ============ RESPONSIVE ============ */
@media (max-width:860px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(80vw,320px);
    background:var(--bg); flex-direction:column; align-items:flex-start;
    justify-content:center; gap:22px; padding:40px;
    transform:translateX(100%); transition:transform .4s ease; box-shadow:-20px 0 60px -30px rgba(0,0,0,.4);
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav a{ color:var(--ink) !important; font-size:1rem; }
  /* must out-specify ".main-nav a" above, or the label is ink-on-ink (invisible) */
  .main-nav .nav-cta{ background:var(--ink); color:var(--cream) !important; }
  .main-nav .lang-switch button, .main-nav .lang-switch span{ color:var(--ink); }
  .nav-toggle{ display:block; z-index:101; }
  .villa, .feature{ grid-template-columns:1fr; min-height:0; }
  .feature--reverse .feature-media{ order:0; }
  .villa-img{ min-height:62vh; order:0 !important; }
  .villa-img-name{
    display:block; position:absolute; left:0; right:0; bottom:0;
    padding:56px 20px 18px; text-align:center;
    font-family:var(--display); font-weight:500; text-transform:uppercase;
    letter-spacing:.08em; font-size:1.3rem; color:#fff;
    background:linear-gradient(rgba(5,30,40,0), rgba(5,30,40,.55));
    text-shadow:0 1px 12px rgba(0,0,0,.35);
  }
  .villa-panel{ order:1 !important; }
  .villa-panel-inner{ margin:0 !important; flex-direction:column; align-items:stretch; text-align:left; gap:1rem; }
  .villa-btns{ justify-content:flex-start; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:200px; }
  .g-wide{ grid-column:span 2; }
  .g-tall{ grid-row:span 1; }
}
/* footer: switch from even-spread to stacked-brand before columns would wrap awkwardly */
@media (max-width:1080px){
  .footer-inner{ justify-content:flex-start; }
  .footer-brand{ flex:1 1 100%; }
  .footer-col{ flex:1 1 150px; }
}
@media (max-width:520px){
  .footer-col{ flex:1 1 100%; }
  .gallery-grid{ grid-template-columns:1fr; }
  .g-wide,.g-tall{ grid-column:auto; grid-row:auto; }
}