/* ============================================================
   ANAHATA, Gili Air · design system
   Organic-biophilic editorial luxury. Calm, cinematic, island-smooth.
   Type + colour + real photography + restraint.
   ============================================================ */
@import url('fonts.css');  /* self-hosted Fraunces + Inter Tight, see css/fonts.css */

:root{
  /* palette, warm earth + jungle green + brass + pool turquoise */
  --paper:#F7F2E8; --sand:#EEE5D4; --sand-2:#E5D9C2; --shell:#FCF8F0;
  --ink:#1B1712; --ink-2:#6A6151; --ink-3:#978C78;
  /* "green" tokens repurposed → warm near-black ink (dark sections / buttons). Colour comes from photography. */
  --green:#251E15; --green-700:#1B150E; --green-900:#14100A; --green-300:#3a322880;
  --brass:#AE8743; --brass-2:#CBA969; --brass-soft:#E6D2A6;
  --turq:#2C8C84;
  --line:#E2D6BF; --line-d:rgba(247,240,227,.16);
  --cream:#F6EFE1;
  /* type */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono','SFMono-Regular',Menlo,monospace;
  /* motion, island calm */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease:cubic-bezier(.4,0,.2,1);
  --rev:760ms;  /* reveal duration: calm but not laggy */
  --micro:260ms;
  /* layout */
  --wrap:1240px; --measure:64ch; --gutter:clamp(22px,5vw,64px);
  --nav-h:78px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:clamp(16px,1.05vw,18.5px);line-height:1.6;font-weight:400;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--brass);color:#fff}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}

/* ---------- type ---------- */
.serif{font-family:var(--serif)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-.015em;font-optical-sizing:auto}
.display{font-size:clamp(2.9rem,8vw,7.5rem);font-weight:360;line-height:.98;letter-spacing:-.025em}
h2{font-size:clamp(2rem,5vw,4rem)}
h3{font-size:clamp(1.45rem,2.6vw,2.2rem)}
.lead{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.5;max-width:var(--measure);font-weight:350}
p{max-width:var(--measure)}
em{font-style:italic}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:var(--brass)}
.eyebrow--light{color:var(--brass-2)}
.muted{color:var(--ink-2)}
.center{text-align:center}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:920px}
section{position:relative}
.pad{padding-block:clamp(60px,8.5vw,120px)}
.pad-sm{padding-block:clamp(46px,6vw,82px)}
.stack>*+*{margin-top:1.3em}
.hairline{height:1px;background:var(--line);border:0}
.bg-sand{background:var(--sand)}
.bg-shell{background:var(--shell)}
.bg-green{background:var(--green-900);color:var(--cream)}
.bg-green .muted{color:#C9BCA0}
.bg-green h2,.bg-green h3{color:var(--cream)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.7em;font-family:var(--sans);font-size:.92rem;font-weight:500;letter-spacing:.01em;padding:1.05em 1.7em;border-radius:100px;border:1px solid transparent;cursor:pointer;transition:transform var(--micro) var(--ease),background var(--micro),color var(--micro),border-color var(--micro);will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--green);color:var(--cream)}
.btn--primary:hover{background:var(--green-700)}
.btn--brass{background:var(--brass);color:var(--green-900)}
.btn--brass:hover{background:var(--brass-2)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--ink);background:rgba(35,32,26,.03)}
.btn--light{border:1px solid rgba(246,239,225,.4);color:var(--cream)}
.btn--light:hover{background:rgba(246,239,225,.08);border-color:var(--cream)}
.btn .arr{transition:transform var(--micro) var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.link-u{position:relative;color:inherit;padding-bottom:2px}
.link-u::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--micro) var(--ease-out)}
.link-u:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:90;display:flex;align-items:center;transition:background .34s var(--ease),backdrop-filter .34s,box-shadow .34s}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__logo{height:34px;width:auto;transition:filter var(--rev) var(--ease)}
.nav__links{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.nav__links a{font-size:.86rem;letter-spacing:.02em;color:var(--cream);opacity:.86;transition:opacity var(--micro)}
.nav__links a:hover{opacity:1}
.nav__cta{font-family:var(--sans);font-size:.82rem;font-weight:500;padding:.7em 1.3em;border-radius:100px;border:1px solid rgba(246,239,225,.45);color:var(--cream);transition:all var(--micro) var(--ease)}
.nav__cta:hover{background:var(--cream);color:var(--green-900);border-color:var(--cream)}
.nav__burger{display:none;background:none;border:0;color:var(--cream);cursor:pointer;width:30px;height:30px}
.nav__burger span{display:block;height:1.5px;background:currentColor;margin:6px 0;transition:transform var(--micro),opacity var(--micro)}
/* scrolled state (set via JS) */
.nav.is-solid{background:var(--paper);box-shadow:0 1px 0 var(--line)}
.nav.is-solid .nav__logo{filter:none}
.nav.is-solid .nav__links a,.nav.is-solid .nav__cta{color:var(--ink)}
.nav.is-solid .nav__cta{border-color:var(--line)}
.nav.is-solid .nav__cta:hover{background:var(--green);color:var(--cream);border-color:var(--green)}
.nav.is-solid .nav__burger{color:var(--ink)}
.nav__logo--dark{filter:brightness(0) invert(1)} /* white logo over photo */
.nav.is-solid .nav__logo--dark{filter:none}
.nav__burger[aria-expanded="true"]{color:var(--cream);position:relative;z-index:86}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- mobile menu overlay ---------- */
.mobile-menu{position:fixed;inset:0;z-index:85;background:var(--green-900);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--gutter);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity var(--rev) var(--ease),transform var(--rev) var(--ease),visibility var(--rev)}
.mobile-menu.open{opacity:1;visibility:visible;transform:none}
.mobile-menu a{font-family:var(--serif);font-size:clamp(2rem,8.5vw,3.1rem);color:var(--cream);padding:12px 0;border-bottom:1px solid var(--line-d)}
.mobile-menu a:last-child{border-bottom:0;color:var(--brass-2)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;color:var(--cream)}
.hero__media{position:absolute;inset:-8% 0 0 0;z-index:-2;will-change:transform}
.hero__media img,.hero__media video{width:100%;height:116%;object-fit:cover;object-position:center 52%}
.hero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(22,16,10,.30) 0%,rgba(22,16,10,.12) 34%,rgba(18,13,8,.80) 100%)}
.hero__inner{padding-bottom:clamp(54px,8vh,110px);width:100%}
.hero .eyebrow{margin-bottom:26px}
.hero h1{color:#FCF7EC;max-width:16ch}
.hero h1 .it{font-style:italic;color:var(--brass-2)}
.hero__sub{margin-top:26px;max-width:44ch;font-size:clamp(1.05rem,1.5vw,1.32rem);color:#EFE6D4;font-weight:350}
.hero__row{margin-top:40px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hero__proof{margin-top:38px;display:flex;flex-wrap:wrap;gap:26px 40px;align-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#D8CDB6}
.hero__proof b{font-family:var(--serif);font-size:1.15rem;color:var(--brass-2);letter-spacing:0;text-transform:none;margin-right:.4em}
.scrollcue{position:absolute;left:var(--gutter);bottom:26px;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:#CFC2A8}
.scrollcue i{width:42px;height:1px;background:var(--brass-2);transform-origin:left;display:block;animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleX(.35);opacity:.5}50%{transform:scaleX(1);opacity:1}}

/* ---------- reveal (calm, 1-2 elems/view) ---------- */
html.js [data-r]{opacity:0;transform:translateY(16px);transition:opacity var(--rev) var(--ease-out),transform var(--rev) var(--ease-out)}
html.js [data-r="fade"]{transform:none}
html.js [data-r="img"]{opacity:0;transform:scale(1.04);transition:opacity 1300ms var(--ease-out),transform 1600ms var(--ease-out)}
html.js [data-r].in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.09s}[data-d="2"]{transition-delay:.18s}[data-d="3"]{transition-delay:.27s}[data-d="4"]{transition-delay:.36s}
/* The hero copy at the top of a page (.reel__inner on the home pages, .hero__inner on the guide
   pages) plays the same rise and fade from the first paint, run by CSS, so the headline never
   waits for the scripts. Its resting style is the revealed one (what .in gives), and the
   animation fills only its start, so once it ends the copy is painted exactly as before. */
@keyframes rIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes rFade{from{opacity:0}to{opacity:1}}
html.js .reel__inner [data-r],html.js .hero__inner [data-r]{opacity:1;transform:none;animation:rIn var(--rev) var(--ease-out) backwards}
html.js .reel__inner [data-r="fade"],html.js .hero__inner [data-r="fade"]{animation-name:rFade}
html.js .reel__inner [data-d="1"],html.js .hero__inner [data-d="1"]{animation-delay:.09s}
html.js .reel__inner [data-d="2"],html.js .hero__inner [data-d="2"]{animation-delay:.18s}
html.js .reel__inner [data-d="3"],html.js .hero__inner [data-d="3"]{animation-delay:.27s}
html.js .reel__inner [data-d="4"],html.js .hero__inner [data-d="4"]{animation-delay:.36s}

/* ---------- section intro ---------- */
.intro{max-width:760px}
.intro .eyebrow{margin-bottom:18px;display:block}
.intro h2{margin-bottom:0}
.intro .lead{margin-top:22px}
.kicker{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.2vw,1.8rem);color:var(--green);line-height:1.35}

/* ---------- villas ---------- */
.villa{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.villa--wide-media{grid-template-columns:1.55fr 1fr}
.villa--rev{direction:rtl}.villa--rev>*{direction:ltr}
.villa__media{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:4/5}
.villa__media img,.villa__media video{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.villa__media:not([data-carousel]):hover img{transform:scale(1.04)}
.villa__tag{position:absolute;top:18px;left:18px;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;background:rgba(20,15,9,.62);color:var(--cream);padding:7px 12px;border-radius:40px;backdrop-filter:blur(4px)}
.villa__body h3{margin-bottom:14px}
.villa__specs{margin:22px 0;display:flex;flex-wrap:wrap;gap:10px}
.villa__specs span{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line);padding:6px 12px;border-radius:40px}
.villa__price{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--brass)}
.villa__price small{font-family:var(--sans);font-size:.8rem;color:var(--ink-2)}

/* ---------- base-camp ---------- */
.basecamp{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px}
.bc{border:1px solid var(--line);border-radius:8px;padding:30px 28px;background:var(--shell);transition:transform var(--micro) var(--ease),border-color var(--micro)}
.bc:hover{transform:translateY(-4px);border-color:var(--ink-3)}
.bc .num{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;color:var(--brass);text-transform:uppercase}
.bc h3{font-size:1.45rem;margin:14px 0 12px;color:var(--green)}
.bc p{color:var(--ink-2);font-size:.98rem;max-width:none}
.bc--home{background:var(--shell);border-color:var(--line)}

/* ---------- experiences (offset gallery) ---------- */
.exp{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,26px)}
.exp__item{position:relative;border-radius:6px;overflow:hidden}
.exp__item img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.exp__item:hover img{transform:scale(1.05)}
.exp__cap{position:absolute;left:18px;bottom:16px;color:var(--cream);z-index:2}
.exp__cap .t{font-family:var(--serif);font-size:1.25rem;line-height:1.1}
.exp__cap .s{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-top:4px}
.exp__item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(18,13,8,.66));z-index:1;transition:opacity var(--micro)}
.exp__a{grid-column:span 7;aspect-ratio:16/11}
.exp__b{grid-column:span 5;aspect-ratio:4/5}
.exp__c{grid-column:span 5;aspect-ratio:4/5}
.exp__d{grid-column:span 7;aspect-ratio:16/11}
.exp__s{grid-column:span 4;aspect-ratio:1}

/* ---------- proof / quotes ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-block:1px solid var(--line)}
.stat{padding:34px 26px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .n{font-family:var(--serif);font-size:clamp(2.5rem,4vw,3.7rem);color:var(--green);line-height:1}
.stat .n small{font-size:.9rem;color:var(--ink-2)}
.stat .l{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-top:12px}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px);margin-top:14px}
.quote blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.42;color:var(--green)}
.bg-green .quote blockquote{color:var(--cream)}
.quote cite{display:block;margin-top:16px;font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.bg-green .quote cite{color:#A99E86}
.stars{color:var(--brass);letter-spacing:.18em;font-size:.9rem;margin-bottom:12px}
/* ---------- guest reviews: auto 3-up carousel (slides right→left) ---------- */
.reviews{--rev-gap:clamp(22px,3vw,44px);margin-top:clamp(30px,4vw,54px);display:flex;align-items:flex-start;gap:clamp(18px,3.2vw,52px)}
.reviews__viewport{overflow:hidden;flex:1;min-width:0}
.reviews__track{display:flex;flex-wrap:nowrap;gap:var(--rev-gap);will-change:transform}
.rev-arrow{flex:0 0 auto;padding:0 8px;border:0;background:none;color:var(--line);line-height:0;cursor:pointer;transition:color var(--micro) var(--ease),transform var(--micro) var(--ease)}
.rev-arrow svg{height:clamp(96px,14vw,148px);width:auto;display:block}
.rev-arrow:hover,.rev-arrow:focus-visible{color:var(--ink-2)}
.rev-arrow--next svg{transform:scaleX(-1)}
.rev-arrow--prev:hover{transform:translateX(-3px)}
.rev-arrow--next:hover{transform:translateX(3px)}
.reviews .quote{flex:0 0 calc((100% - 2*var(--rev-gap))/3);min-width:0}
@media(max-width:820px){.reviews .quote{flex-basis:calc((100% - var(--rev-gap))/2)}}
@media(max-width:560px){.reviews .quote{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.reviews__viewport{overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* (cinematic band component removed, superseded by .gate) */

/* ---------- CTA / booking ---------- */
.cta-final{text-align:center}
.cta-final h2{max-width:20ch;margin-inline:auto}
.cta-final .row{margin-top:36px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.whatsapp-ico{width:18px;height:18px;fill:currentColor}

/* ---------- footer ---------- */
.footer{background:var(--green-900);color:#C9BCA0;padding-block:clamp(54px,7vw,90px) 40px}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.footer__logo{height:42px;filter:brightness(0) invert(1);opacity:.92;margin-bottom:22px}
.footer h3{font-family:var(--mono);font-weight:500;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-2);margin-bottom:18px}
.footer a{color:#D8CDB6;display:block;padding:5px 0;transition:color var(--micro)}
.footer a:hover{color:var(--cream)}
.footer__bar{margin-top:54px;padding-top:24px;border-top:1px solid var(--line-d);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:#AEA28A}

/* ---------- sticky mobile book bar ---------- */
.bookbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(250,247,240,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.bookbar a{flex:1;text-align:center;justify-content:center}

/* ---------- progress ---------- */
.scroll-prog{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--brass),var(--brass-2));z-index:100;transition:width .1s linear}

/* ---------- marquee (kinetic rhythm) ---------- */
.marquee{overflow:hidden;background:var(--green-900);padding:20px 0}
.marquee__track{display:inline-flex;white-space:nowrap;animation:marquee 34s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2.3vw,2rem);color:var(--cream);padding-left:1.1em;display:inline-flex;align-items:center}
.marquee span::after{content:"·";color:var(--brass-2);padding-left:1.1em}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---------- sub-page hero + island comparison ---------- */
.hero--sub{min-height:66vh}
/* the copy is bottom-aligned in a 66vh box, so on a short laptop a long title grew past
   the box and its first line slid up behind the fixed nav. This top padding is the nav's
   own clearance: it only takes space once the copy needs it, so taller viewports, where
   the copy still fits, look exactly as before. */
.hero--sub .hero__inner{padding-top:calc(var(--nav-h) + 20px);padding-bottom:clamp(40px,6vh,74px)}
.island{padding:clamp(30px,4vw,50px) 0;border-top:1px solid var(--line);display:grid;grid-template-columns:210px 1fr;gap:clamp(20px,4vw,56px);align-items:start}
.island:first-of-type{border-top:0}
.island__label{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--green);line-height:1.1}
.island__label .meta{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:10px}
.island__body p{max-width:62ch}
.island__verdict{margin-top:16px;font-family:var(--serif);font-style:italic;font-size:1.18rem;color:var(--green)}
.island--star .island__label{color:var(--brass)}
.cmp-wrap{overflow-x:auto;margin-top:12px}
.cmp{width:100%;border-collapse:collapse;font-size:.95rem;min-width:560px}
.cmp th,.cmp td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
.cmp tbody th{font-family:var(--sans);font-weight:500;color:var(--ink)}
.cmp td.you{background:linear-gradient(90deg,rgba(174,135,67,.13),transparent);color:var(--green);font-weight:500}
.cmp thead th.you{color:var(--brass)}
@media(max-width:600px){
  .cmp{min-width:0}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:100%}
  .cmp tr{border:1px solid var(--line);border-radius:10px;margin-bottom:14px;background:var(--shell);overflow:hidden}
  .cmp tbody th{font-family:var(--serif);font-size:1.25rem;color:var(--green);padding:16px 18px 8px;border:0}
  .cmp td{border:0;border-top:1px solid var(--line);padding:11px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px}
  .cmp td::before{content:attr(data-l);font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);flex:0 0 auto}
  .cmp td.you{background:linear-gradient(90deg,rgba(174,135,67,.16),transparent);color:var(--green);font-weight:600}
  .cmp td.you::before{content:attr(data-l);color:var(--brass)}
}
.exp-list{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.5vw,30px)}
.exp-card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--shell);display:flex;flex-direction:column;transition:transform var(--micro) var(--ease),box-shadow var(--micro)}
.exp-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px -30px rgba(20,58,46,.5)}
.exp-card__media{aspect-ratio:16/10;overflow:hidden}
.exp-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.exp-card:hover .exp-card__media img{transform:scale(1.05)}
.exp-card__body{padding:24px 24px 26px}
.exp-card__body h3{font-size:1.3rem;margin-bottom:10px}
.exp-card__body p{font-size:.95rem;color:var(--ink-2);max-width:none}
.exp-card .tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:8px}
.steps{counter-reset:s}
.step{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:clamp(26px,3.5vw,40px) 0;border-top:1px solid var(--line);align-items:start}
.step__n{font-family:var(--serif);font-size:2.4rem;color:var(--brass);line-height:1}
.step__b h3{font-size:1.35rem;margin-bottom:10px}
.step__b p{color:var(--ink-2)}
.info-pill{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;background:var(--sand);color:var(--green);padding:6px 12px;border-radius:30px;margin-top:12px}
/* getting-here, island wayfinding map */
.map{margin:clamp(48px,7vw,84px) auto 0;max-width:540px;text-align:center}
.map .eyebrow{display:block;margin-bottom:16px}
.map img{width:100%;height:auto;display:block;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-composite:intersect}
.map figcaption{margin-top:20px;font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.5;color:var(--ink-2);max-width:42ch;margin-inline:auto}
/* ---------- villa photo gallery + lightbox ---------- */
.gallery-btn{position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:rgba(252,248,240,.92);backdrop-filter:blur(4px);border:1px solid rgba(20,58,46,.14);padding:9px 14px;border-radius:30px;cursor:pointer;transition:background var(--micro),transform var(--micro)}
.gallery-btn:hover{background:#fff;transform:translateY(-1px)}
.gallery-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7}
.villa__media:has(.gallery-btn){cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(14,10,6,.95);opacity:0;transition:opacity .3s var(--ease)}
.lightbox.open{display:flex;opacity:1}
.lightbox__img{max-width:92vw;max-height:84vh;object-fit:contain;border-radius:4px;box-shadow:0 30px 80px -30px #000;user-select:none;-webkit-user-drag:none}
.lightbox__btn{position:absolute;background:rgba(252,248,240,.08);border:1px solid rgba(252,248,240,.28);color:var(--cream);width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--micro)}
.lightbox__btn:hover{background:rgba(252,248,240,.2)}
.lightbox__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.lightbox__close{top:20px;right:20px}
.lightbox__prev{left:max(14px,3vw)}.lightbox__next{right:max(14px,3vw)}
.lightbox__prev,.lightbox__next{top:50%;transform:translateY(-50%)}
.lightbox__bar{position:absolute;left:0;right:0;bottom:22px;text-align:center;pointer-events:none;padding:0 20px}
.lightbox__count{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;color:var(--brass-2)}
.lightbox__cap{font-family:var(--serif);font-style:italic;font-size:1rem;color:#EFE6D4;margin-top:6px;max-width:48ch;margin-inline:auto;text-shadow:0 1px 12px rgba(0,0,0,.6)}
@media(max-width:560px){.lightbox__img{max-width:96vw;max-height:76vh}.lightbox__prev{left:6px}.lightbox__next{right:6px}.lightbox__btn{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.lightbox{transition:none}}
@media(max-width:820px){
  .island{grid-template-columns:1fr;gap:10px}
  .exp-list{grid-template-columns:1fr}
  .step{grid-template-columns:44px 1fr;gap:16px}
}

/* ============== RESPONSIVE ============== */
@media (max-width:1000px){
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  :root{--nav-h:66px}
  .nav__links{display:none}
  .nav__burger{display:block}
  .villa{grid-template-columns:1fr;gap:28px}
  .villa--rev{direction:ltr}
  .villa__media{aspect-ratio:3/2}
  .basecamp{grid-template-columns:1fr;gap:14px}
  .exp{grid-template-columns:1fr 1fr}
  .exp__a,.exp__b,.exp__c,.exp__d,.exp__s{grid-column:span 1;aspect-ratio:1}
  .exp__a,.exp__d{grid-column:span 2;aspect-ratio:16/10}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
  .quotes{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .bookbar{display:flex}
  body{padding-bottom:0}
}
@media (max-width:480px){
  .exp{grid-template-columns:1fr}
  .exp__a,.exp__d{grid-column:span 1}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--line)}
}

/* ============== REDUCED MOTION ============== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-r]{opacity:1!important;transform:none!important}
  .hero__media,.gate__media,.reel__video,.reel__fallback{transform:none!important}
}

/* ===================================================================
   AWWWARDS ELEVATION LAYER, "a filmmaker's reel, in chapters"
   Full-bleed cinematic photography · pool-teal contrast · film grain.
   Extends the base system above; later rules intentionally win.
   =================================================================== */
:root{
  /* pool-teal, the one moment of contrast, pulled from the water */
  --teal:#1C6B63; --teal-2:#2F938A; --teal-soft:#8FBFB8;
  --rev-slow:1150ms;
  --ink-0:#100C07;            /* deepest cinematic ground */
  --ink-3:#7E7461;            /* darkened from base for AA contrast on cream */
}

/* film grain, a filmmaker's site should have grain (very subtle, fixed) */
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  background-size:180px}
@media(prefers-reduced-motion:reduce){.grain{opacity:.035}}

/* custom scrollbar */
html{scrollbar-width:thin;scrollbar-color:var(--brass) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--sand-2);border-radius:20px;border:3px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:var(--brass)}

/* more cinematic display type */
.display{font-size:clamp(3rem,8.7vw,8.2rem);font-weight:330;letter-spacing:-.038em;line-height:.93}
.serif{font-feature-settings:"liga" 1}
h2{letter-spacing:-.02em}

/* chapter index marker */
.chap{font-family:var(--mono);font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;color:var(--brass-2);display:inline-flex;align-items:center;gap:.9em}
.chap::before{content:"";width:30px;height:1px;background:currentColor;opacity:.6}
.bg-shell .chap,.bg-sand .chap,.pad .chap{color:var(--brass)}

/* teal accent utilities (used sparingly, the contrast moment) */
.accent-teal{color:var(--teal)}
.eyebrow--teal{color:var(--teal)}
.bg-green .eyebrow--teal{color:var(--teal-soft)}

/* full-bleed helper for chaptered media */
.bleed{position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}

/* ---------- HERO refinement (shared w/ sub-pages, elevated) ---------- */
.hero__media img{height:118%}
.hero__media img.hero-img{object-position:center 46%}
.hero__scrim{background:linear-gradient(180deg,rgba(16,12,7,.42) 0%,rgba(16,12,7,.18) 38%,rgba(12,9,5,.86) 100%)}
.hero h1,.hero .hero__sub{text-shadow:0 2px 28px rgba(10,7,4,.5)}
.hero h1{max-width:15ch;text-wrap:balance}
.hero .eyebrow{margin-bottom:24px}
/* sub-page heroes use brighter frames → left-biased editorial scrim protects
   the left-aligned text column while the image still reads on the right */
.hero--sub .hero__scrim{background:
  linear-gradient(102deg,rgba(11,8,4,.80) 0%,rgba(11,8,4,.40) 50%,rgba(11,8,4,.06) 100%),
  linear-gradient(180deg,rgba(11,8,4,.30),transparent 34%,rgba(11,8,4,.52))}
.hero--sub h1,.hero--sub .hero__sub{text-shadow:0 2px 30px rgba(10,7,4,.55)}
.hero--sub .chap{color:var(--brass-soft)}
/* cinematic hero: slow continuous Ken-Burns drift (scale on img; JS parallax owns .hero__media translate) */
.hero__media img{animation:heroKenBurns 34s var(--ease) infinite alternate;transform-origin:56% 44%}
/* a slow DIRECTED pan (constant over-scale + travel), reveals composition, not a scale-pulse */
@keyframes heroKenBurns{from{transform:scale(1.12) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-2.6%,-1.7%,0)}}
@media(prefers-reduced-motion:reduce){.hero__media img{animation:none!important;transform:none!important}}

/* ---------- CHAPTER GATE, full-bleed cinematic transition ---------- */
.gate{position:relative;min-height:80vh;display:flex;align-items:flex-end;overflow:hidden;color:var(--cream)}
.gate__media{position:absolute;inset:-8% 0 0 0;z-index:-2;will-change:transform}
.gate__media img{width:100%;height:118%;object-fit:cover}
.gate::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(16,12,7,.30),rgba(16,12,7,.04) 38%,rgba(16,12,7,.62))}
.gate .wrap{padding-block:clamp(50px,9vh,108px);width:100%}
.gate__line{font-family:var(--serif);font-style:italic;font-size:clamp(1.7rem,3.6vw,3.1rem);max-width:22ch;line-height:1.16;color:#FCF7EC;text-wrap:balance}
.gate .chap{color:var(--brass-soft);margin-bottom:22px;text-shadow:0 1px 14px rgba(8,5,2,.55)}
.hero .chap{color:var(--brass-soft);text-shadow:0 1px 14px rgba(8,5,2,.55)}

/* ---------- THE REEL, scroll-scrubbed WebGL cinematic hero ---------- */
.reel{position:relative;color:var(--cream)}
.reel__stage{position:relative;height:100svh;min-height:560px;overflow:hidden;display:flex;align-items:flex-end}
.reel__fallback{position:absolute;top:-8%;left:0;right:0;height:116%;z-index:-3;background:#100C07 center/cover no-repeat;background-image:url('../video/hero-poster.jpg');will-change:transform}
.reel__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-2;opacity:0;transition:opacity 1s var(--ease)}
.reel--webgl .reel__canvas{opacity:1}
.reel__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(16,12,7,.42) 0%,rgba(16,12,7,.16) 38%,rgba(12,9,5,.86) 100%)}
.reel__inner{padding-bottom:clamp(54px,8vh,110px);width:100%;position:relative;z-index:1}
.reel h1{color:#FCF7EC;max-width:15ch;text-wrap:balance}
/* home hero: smaller on desktop so the longer FR headline clears the nav with breathing room (mobile keeps the .display rule) */
@media(min-width:821px){ .reel h1{font-size:clamp(3rem,6.2vw,5.8rem)} }
.reel h1 .it{font-style:italic;color:var(--brass-2)}
.reel h1,.reel .hero__sub{text-shadow:0 2px 28px rgba(10,7,4,.5)}
.reel .chap{color:var(--brass-soft);text-shadow:0 1px 14px rgba(8,5,2,.55);margin-bottom:24px}
.reel__cap{position:absolute;left:var(--gutter);top:clamp(92px,16vh,190px);z-index:1;font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,2.2rem);line-height:1.15;color:#FCF7EC;max-width:15ch;opacity:0;text-shadow:0 2px 22px rgba(8,5,2,.55);pointer-events:none;transition:opacity .25s linear;will-change:opacity}
/* pinned scrub mode, ONLY when WebGL is live (else this is a normal 100vh hero) */
.reel--webgl{height:340vh}
.reel--webgl .reel__stage{position:sticky;top:0}
@media(max-width:880px){ .reel--webgl{height:100svh} .reel--webgl .reel__stage{position:relative} .reel__cap{display:none} }
@media(prefers-reduced-motion:reduce){ .reel--webgl{height:100svh} .reel--webgl .reel__stage{position:relative} .reel__canvas{transition:none} }
/* centred CTA needs central protection over a bright frame */
.gate.cta-final::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 82% 64% at 50% 44%,rgba(12,9,5,.62),rgba(12,9,5,.10) 80%)}
.gate.cta-final h2{text-shadow:0 2px 34px rgba(10,7,4,.5)}
.gate.cta-final .chap{color:var(--brass-soft)}
/* centred CTA: the reply-note <p> must not inherit the 64ch left-pinned measure */
.gate.cta-final p{max-width:none;margin-inline:auto;text-align:center;text-shadow:0 1px 12px rgba(8,5,2,.6)}
.gate.cta-final .row{margin-bottom:0}

/* ---------- FLOATING-BREAKFAST FEATURE, the signature moment ---------- */
.feature{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5.5vw,90px);align-items:center}
.feature--rev{direction:rtl}.feature--rev>*{direction:ltr}
.feature__media{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/5}
.feature__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease-out)}
.feature__media:hover img{transform:scale(1.045)}
.feature__media .villa__tag{top:16px;left:16px}
.feature h2 .it{font-style:italic;color:var(--teal-2)}
.bg-green .feature h2 .it{color:var(--teal-soft)}

/* ---------- elevated gallery captions / hover ---------- */
.exp__item::after{background:linear-gradient(180deg,transparent 42%,rgba(14,10,6,.72))}
.exp__cap .t{font-size:1.35rem}
.exp__item:hover .exp__cap .t{color:#fff}

/* ---------- villa media, taller, more cinematic ---------- */
.villa__media{border-radius:4px}
.villa__price{color:var(--teal)}

/* ---------- proof stats, let the number breathe ---------- */
.stat .n{color:var(--ink)}
.stat:hover .n{color:var(--brass)}
.stat{transition:background var(--micro)}
.stat:hover{background:rgba(174,135,67,.05)}

/* ---------- section rhythm, more generous, editorial ---------- */
.pad{padding-block:clamp(72px,10vw,150px)}
.intro{max-width:820px}

/* nav logo a touch larger for presence */
.nav__logo{height:32px}

@media(max-width:820px){
  .feature{grid-template-columns:1fr;gap:24px}
  .feature--rev{direction:ltr}
  .feature__media{aspect-ratio:3/4}
  .gate{min-height:64vh}
  /* home hero (.reel) used a FIXED height:100svh → on phones the tall copy overflowed the
     bottom-aligned stage and slid up under the fixed nav (first headline line clipped).
     Let the stage grow with its content so nothing is anchored off-screen. */
  .reel__stage{height:auto;min-height:100svh}
  /* clear the fixed nav (top) + the fixed mobile book-bar (bottom) on bottom-aligned heroes */
  .hero__inner,.reel__inner{padding-top:calc(var(--nav-h) + 20px);padding-bottom:104px}
  .gate .wrap{padding-bottom:108px}
  .gate.cta-final .wrap{padding-bottom:clamp(50px,9vh,108px)}
  .display{font-size:clamp(2.85rem,11.5vw,4rem)}
  .footer{padding-bottom:108px}            /* clear the fixed mobile book-bar */
  .nav__burger{width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;align-items:center}
  .nav__burger span{width:26px}
}
@media(prefers-reduced-motion:reduce){
  .gate__media,.feature__media img{transform:none!important}
}

/* ---------- language switcher ---------- */
/* one globe, endonyms, real links; <details> so it opens with scripts off */
.lang{position:relative;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream)}
.nav.is-solid .lang{color:var(--ink)}
.lang__lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lang>summary{display:inline-flex;align-items:center;gap:.5em;padding:.4em 0;cursor:pointer;color:inherit;list-style:none;transition:opacity var(--micro) var(--ease)}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary::marker{content:""}
.lang>summary:hover{opacity:.7}
.lang__globe{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
.lang__now{line-height:1}
.lang__menu{position:absolute;top:calc(100% + 12px);right:0;z-index:95;min-width:168px;margin:0;padding:6px;list-style:none;background:var(--cream);border:1px solid var(--line);border-radius:12px;box-shadow:0 26px 60px -30px rgba(27,23,18,.55)}
.lang__menu li{list-style:none}
.lang__menu a{display:block;padding:9px 13px;border-radius:8px;font-family:var(--sans);font-size:.88rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);transition:background var(--micro) var(--ease)}
.lang__menu a:hover{background:var(--sand)}
.lang__menu a[aria-current]{color:var(--brass);font-weight:500}

/* the same languages, flat, inside the mobile menu */
.mobile-menu .mlang{display:flex;flex-wrap:wrap;gap:20px;padding:14px 0;border-bottom:1px solid var(--line-d)}
.mobile-menu .mlang a{padding:0;border-bottom:0;font-family:var(--sans);font-size:1.05rem;color:var(--cream);opacity:.6}
.mobile-menu .mlang a[aria-current]{opacity:1;color:var(--brass-2)}

/* ---------- book-direct module ---------- */
.book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.book__copy,.book__form{min-width:0}
.book__trust{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:18px}
.book__trust li{padding-left:26px;position:relative}
.book__trust li::before{content:"";position:absolute;left:0;top:.4em;width:11px;height:11px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 18%,transparent)}
.book__trust b{display:block;font-weight:600;color:var(--ink)}
.book__trust span{color:var(--ink-2);font-size:.92rem}
.book__form{background:var(--cream);border:1px solid rgba(40,38,34,.14);border-radius:14px;padding:clamp(22px,3vw,32px);box-shadow:0 24px 60px -34px rgba(40,38,34,.42)}
.bf__field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.bf__field label{font-family:var(--mono,monospace);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.bf__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.book__form input,.book__form select{font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid rgba(40,38,34,.18);border-radius:8px;padding:13px 14px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;-webkit-appearance:none;appearance:none}
.book__form select{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.book__form input:focus,.book__form select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 16%,transparent)}
.bf__note{margin-top:14px;font-size:.78rem;color:var(--ink-2);text-align:center;line-height:1.5}
@media(max-width:820px){.book{grid-template-columns:minmax(0,1fr);gap:34px}}

/* ---------- floating WhatsApp (last-resort contact) ---------- */
.wa-fab{position:fixed;right:22px;bottom:22px;z-index:60;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -8px rgba(0,0,0,.45);transition:transform .25s ease}
.wa-fab svg{width:28px;height:28px;fill:currentColor}
.wa-fab:hover{transform:scale(1.08)}
@media(max-width:820px){.wa-fab{bottom:86px;right:16px;width:48px;height:48px}}

/* ===================================================================
   ANAHATA CONCIERGE, chat launcher (repurposed .wa-fab) + chat panel
   On-brand: cream/ink/teal, Fraunces title, restrained. Not a SaaS bot.
   =================================================================== */
/* launcher state, same position/size as .wa-fab, but teal + chat icon */
.wa-fab.is-chat{background:var(--teal);box-shadow:0 14px 32px -10px rgba(28,107,99,.5);cursor:pointer;-webkit-appearance:none;appearance:none;border:0}
.wa-fab.is-chat:hover{background:var(--teal-2);transform:scale(1.08)}
.wa-fab.is-chat svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8}
@media(prefers-reduced-motion:reduce){.wa-fab.is-chat{transition:none}.wa-fab.is-chat:hover{transform:none}}

/* panel shell */
.chat-panel{position:fixed;right:22px;bottom:86px;z-index:61;width:min(384px,92vw);height:min(560px,72vh);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--cream);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 30px 70px -28px rgba(16,12,7,.5),0 4px 14px -8px rgba(16,12,7,.3);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .28s var(--ease-out),transform .28s var(--ease-out)}
.chat-panel.open{opacity:1;transform:none;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.chat-panel{transition:opacity .2s linear;transform:none}}

/* header, darkest brand tone, cream text */
.chat-head{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:16px 16px 15px 18px;background:var(--green-900);color:var(--cream)}
.chat-head__txt{flex:1 1 auto;min-width:0}
.chat-head__title{font-family:var(--serif);font-weight:400;font-size:1.18rem;line-height:1.1;letter-spacing:-.01em;color:var(--cream)}
.chat-head__sub{font-family:var(--sans);font-size:.72rem;font-weight:400;letter-spacing:.02em;color:#C9BCA0;margin-top:2px}
.chat-close{flex:0 0 auto;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:#C9BCA0;cursor:pointer;font-size:20px;line-height:1;transition:background var(--micro) var(--ease),color var(--micro) var(--ease)}
.chat-close:hover{background:rgba(246,239,225,.12);color:var(--cream)}
.chat-close svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none}

/* message scroll area */
.chat-body{flex:1 1 auto;overflow-y:auto;scroll-behavior:smooth;display:flex;flex-direction:column;gap:10px;padding:18px 16px;background:var(--shell)}
/* "continue on WhatsApp" under a reply that needs the team (a gap or a handoff) */
.chat-wa{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:-2px;padding:9px 14px;border-radius:999px;background:#25D366;color:#fff;font-family:var(--sans);font-weight:600;font-size:.8rem;line-height:1;letter-spacing:.01em;text-decoration:none;box-shadow:0 8px 20px -10px rgba(0,0,0,.4)}
.chat-wa svg{width:16px;height:16px;fill:currentColor}
.chat-wa:hover{filter:brightness(1.06)}
.chat-book{background:var(--brass);color:var(--green-900)}
.chat-body::-webkit-scrollbar{width:8px}
.chat-body::-webkit-scrollbar-thumb{background:var(--sand-2);border-radius:20px;border:2px solid var(--shell)}

/* bubbles */
.chat-msg{max-width:82%;padding:10px 13px;border-radius:14px;line-height:1.5;font-size:.92rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.chat-msg.bot{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:5px}
.chat-msg.user{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:5px}

/* typing indicator */
.chat-typing{align-self:flex-start;display:inline-flex;gap:5px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:5px;padding:13px 14px}
.chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-3);opacity:.5;animation:chatDot 1.2s infinite ease-in-out}
.chat-typing span:nth-child(2){animation-delay:.18s}
.chat-typing span:nth-child(3){animation-delay:.36s}
@keyframes chatDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:.9}}
@media(prefers-reduced-motion:reduce){.chat-typing span{animation:none;opacity:.6}}

/* input row, matches .book__form inputs */
.chat-input{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--cream);border-top:1px solid var(--line)}
.chat-input input{flex:1 1 auto;min-width:0;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid rgba(40,38,34,.18);border-radius:8px;padding:11px 14px;-webkit-appearance:none;appearance:none}
.chat-input input::placeholder{color:var(--ink-3)}
.chat-input input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 16%,transparent)}
.chat-send{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--brass);color:#fff;cursor:pointer;transition:background var(--micro) var(--ease),transform var(--micro) var(--ease)}
.chat-send:hover{background:var(--brass-2)}
.chat-send:disabled{opacity:.45;cursor:default}
.chat-send svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2}

/* footer, WhatsApp last-resort fallback inside the panel */
.chat-foot{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 7px;padding:9px 14px 9px;background:var(--cream);border-top:1px solid var(--line);font-size:.76rem;color:var(--ink-2)}
.chat-disc{flex:0 0 100%;text-align:center;font-size:.66rem;line-height:1.35;color:var(--ink-3);letter-spacing:.01em}
.chat-foot a{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);transition:color var(--micro) var(--ease)}
.chat-foot a:hover{color:var(--ink)}
.chat-foot svg{width:15px;height:15px;fill:#25D366;flex:0 0 auto}

/* bottom-sheet on small screens */
@media(max-width:560px){
  .chat-panel{left:0;right:0;bottom:0;width:100%;height:86vh;border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0}
}

/* ---------- video hero ---------- */
/* slots into the reel's existing negative-z stack: fallback(-3) → video(-2) → scrim(-1) → copy(1). height lives on .reel__stage, so .reel needs no min-height. */
.reel__video{position:absolute;top:-8%;left:0;right:0;width:100%;height:116%;object-fit:cover;z-index:-2;opacity:0;transition:opacity .9s ease;will-change:transform}
.reel__video.is-playing{opacity:1}


/* villa image carousel (auto-advancing, directional; thin arrows whose tip breaks the frame) */
.villa__media[data-carousel]{cursor:default;overflow:visible}
.vc-stage{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.villa__media .vc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease-out);will-change:transform}
.vc-arrow{position:absolute;z-index:3;display:block;width:clamp(55px,7.2vw,84px);padding:0;border:0;background:none;line-height:0;cursor:pointer;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));transition:transform var(--micro) var(--ease)}
.vc-arrow svg{width:100%;height:auto;display:block}
.vc-arrow .vc-shaft{stroke:var(--brass)}
.vc-arrow .vc-head{stroke:var(--brass)}
.vc-arrow--tl{top:clamp(12px,2vw,20px);left:calc(-1 * clamp(18px,3.4vw,44px))}
.vc-arrow--tl:hover{transform:translateX(-5px)}
.vc-arrow--br{bottom:clamp(12px,2vw,20px);right:calc(-1 * clamp(18px,3.4vw,44px));transform:scaleX(-1)}
.vc-arrow--br:hover{transform:scaleX(-1) translateX(-5px)}
@media(prefers-reduced-motion:reduce){.villa__media .vc-img{transition:none}}


/* experiences, activity tiles (homepage ch05) */
.acts{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.5vw,20px)}
.act{position:relative;display:block;overflow:hidden;border-radius:6px;grid-column:span 2;aspect-ratio:3/4}
.act--lg{grid-column:span 3;aspect-ratio:4/3}
.act img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.act:hover img,.act:focus-visible img{transform:scale(1.05)}
.act__cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:4px;padding:clamp(16px,2vw,26px);background:linear-gradient(0deg,rgba(20,16,10,.82),rgba(20,16,10,.22) 52%,transparent);color:var(--cream)}
.act__t{font-family:var(--serif);font-size:clamp(1.35rem,2vw,2rem);line-height:1.02}
.act__s{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-2)}
@media(max-width:760px){.acts{grid-template-columns:repeat(2,1fr)}.act,.act--lg{grid-column:span 1;aspect-ratio:4/5}}

/* experiences page, per-activity photo grid */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:clamp(8px,1vw,14px);align-items:start}
.photo-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;display:block;background:var(--sand)}
.photo-grid video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:4px;display:block;background:#14100a}

/* ---------- currency chooser (js/fx.js): the currency group inside the language menu, guide amounts next to rupiah prices ---------- */
.lang__dot{opacity:.45;margin:0 .15em}
.lang__menu--two{display:flex;align-items:flex-start;gap:0;padding:8px;min-width:0}
.lang__group{min-width:150px}
.lang__group+.lang__group{margin-left:6px;padding-left:6px;border-left:1px solid var(--line)}
.lang__group ul{list-style:none;margin:0;padding:0}
.lang__eyebrow{display:block;padding:8px 13px 4px;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.fx{font-style:normal;white-space:nowrap}
.fx:empty{display:none}
.fx::before{content:" ("}
.fx::after{content:")"}
.villa__price small .fx::before{content:" · "}
.villa__price small .fx::after{content:""}
.villa__price small .fx{color:var(--ink);font-size:1.05em}
.info-pill .fx{color:inherit;opacity:.85}
.villa__price[hidden]{display:none}