/* Self-hosted fonts (no Google Fonts request). Newsreader keeps its optical-size axis. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/newsreader-latin-opsz-normal.woff2) format('woff2')}
@font-face{font-family:'Lexend';font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/lexend-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2')}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --dark:#141210;--dark2:#1e1a16;--cream:#f4efe8;--cream2:#ede8e0;
  --teal:#2e6e78;--teal-lt:#3d8a96;--ochre:#b06820;--gold:#e2b96a;--brass:#c3a671;
  --text-dk:#f0e8da;--text-lt:#1a1612;--muted-dk:#9a8e7e;--muted-lt:#726658;
  --border-dk:rgba(240,232,218,0.16);--border-lt:#d0c4b4;
  --radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-xl:36px;
  --nav-h:96px;
  --nav-bar-h:82px;
  --playfair:'Newsreader',Georgia,serif;
  --logo:'Cormorant Garamond',Georgia,serif;
  --barlow:'Lexend',sans-serif;
  --condensed:'Barlow',sans-serif;
}
html{scroll-behavior:auto}
body{background:var(--dark);color:var(--text-dk);font-family:var(--barlow);font-weight:300;line-height:1.88;overflow-x:hidden;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch}
img{display:block;width:100%;object-fit:cover;image-rendering:auto}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}
.page{display:block;width:100%}
/* Photo grade (contrast 1.05 / saturate 1.08 / brightness .99) is now baked into the image files - no runtime CSS filter. */
@media(hover:none){
  a:hover,.nav-book:hover,.btn-primary:hover,.btn-outline-dk:hover,.btn-outline-lt:hover{opacity:1;transform:none}
  .nav-book:hover{background:var(--brass)}
  .btn-primary:hover{background:var(--brass)}
}

/* ── NAV ── */
nav{position:fixed;top:14px;left:20px;right:20px;max-width:1540px;margin:0 auto;z-index:1000;height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 3rem;background:#fff;border-radius:18px;box-shadow:0 10px 26px rgba(20,18,16,0.09);transition:top .3s ease,left .3s ease,right .3s ease,max-width .3s ease,border-radius .3s ease,box-shadow .3s ease,background .3s ease}
.nav-logo{font-family:var(--logo);font-size:1.85rem;font-weight:600;font-style:normal;color:var(--text-lt);letter-spacing:.015em;text-decoration:none;cursor:pointer;transition:color .3s ease}
body.nav-scrolled nav{top:0}

/* Transparent nav over full-bleed hero pages, until scrolled */
body.nav-hero-page:not(.nav-scrolled) nav{background:transparent;box-shadow:none;top:0;left:0;right:0;max-width:100%;border-radius:0;height:var(--nav-h)}
body.nav-hero-page:not(.nav-scrolled) .nav-logo,
body.nav-hero-page:not(.nav-scrolled) .nav-links>li>a{color:#fff}
body.nav-hero-page:not(.nav-scrolled) .nav-links a:hover,
body.nav-hero-page:not(.nav-scrolled) .nav-links a.current{color:#fff;background:rgba(255,255,255,0.16)}
body.nav-hero-page:not(.nav-scrolled) .nav-hamburger span{background:#fff}

.nav-links{display:flex;align-items:center;gap:2.5rem;list-style:none;position:absolute;left:50%;transform:translateX(-50%);height:100%}
.nav-links>li{position:relative;padding-bottom:1.2rem;margin-bottom:-1.2rem}
.nav-links a{font-family:var(--barlow);font-size:.92rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-lt);text-decoration:none;opacity:1;transition:background .2s,color .2s;cursor:pointer;display:flex;align-items:center;gap:.35rem;padding:.55rem .9rem;margin:-.55rem -.9rem;border-radius:8px;background:transparent}
.nav-links a:hover,.nav-links li.open a.has-dropdown{background:rgba(20,18,16,0.06)}
/* Invisible bridge fills gap between link and dropdown */
.nav-links>li::after{content:'';position:absolute;left:0;right:0;top:100%;height:2rem;background:transparent}
.nav-links a:hover,.nav-links a.current{opacity:1;color:var(--text-lt);background:rgba(20,18,16,0.06)}
.nav-links a.has-dropdown::after{content:'';display:inline-block;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.5;transition:transform .25s}
.nav-links li.open a.has-dropdown::after{opacity:1}
/* Dropdown - positioned with overlap to prevent gap. Its own <a> tags are still descendants of
   .nav-links, so every color/background rule here must out-specificity or out-order the .nav-links
   a rules above, or the dropdown text silently inherits the nav's own link color again. */
/* Round 252: rebuilt from a narrow single-column text list into a wider icon+description
   panel (Indo House's dropdown pattern - a small line icon, a bold title, and a one-line
   description per link, multiple groups laid out side by side) instead of a bare list of
   plain link labels. Reuses the site's own .spec-icon component rather than a new icon
   treatment. */
/* Round 253: pulled the icon+description mega-menu treatment entirely - client wanted the
   dropdown's actual layout/design looked at against other sites, not more copy. Live reference
   (Oliver's Travels' villa-holidays nav) uses plain stacked text links in loose columns, no
   icons, no subtext, generous whitespace, with a lighter font-weight distinguishing secondary
   links - this version mirrors that: just a small group label plus plain link titles, color
   shifts to brass on hover instead of a filled pill (brass is this site's one allowed accent). */
.nav-dropdown{position:absolute;top:calc(100% + .8rem);left:50%;transform:translateX(-50%);background:#fff;border:1px solid rgba(20,18,16,0.08);border-radius:var(--radius-lg);padding:1.6rem 2rem;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;transform:translateX(-50%) translateY(6px);box-shadow:0 20px 60px rgba(20,18,16,0.16)}
.nav-links li.open .nav-dropdown{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}
.nav-dropdown-groups{display:flex;align-items:flex-start;gap:3.2rem}
.nav-dropdown-group{min-width:168px}
.nav-dropdown-label{font-family:var(--barlow);font-style:normal;font-weight:600;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-lt);margin-bottom:.9rem;display:block}
.nav-dropdown-link{display:block;font-family:var(--barlow);font-size:.94rem;font-weight:500;color:var(--text-lt) !important;background:transparent !important;padding:.5rem 0;transition:color .15s;opacity:1;letter-spacing:0;text-transform:none;cursor:pointer;white-space:nowrap}
.nav-dropdown-link::after{display:none}
.nav-dropdown-link:hover{color:var(--brass) !important}
@media(max-width:1100px){.nav-dropdown-groups{flex-direction:column;gap:1.4rem}}
.nav-right{display:flex;align-items:center;gap:1rem}
.nav-book{font-family:var(--barlow);font-size:.88rem;font-weight:500;letter-spacing:.01em;color:var(--dark);background:var(--brass);padding:.6rem 1.5rem;text-decoration:none;border-radius:10px;transition:background .2s;border:none;cursor:pointer}
.nav-book:hover{filter:brightness(1.12)}

/* ── HAMBURGER ── */
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:4px;cursor:pointer}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--text-lt);transition:transform .3s,opacity .3s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── MOBILE MENU ── */
.mobile-menu{position:fixed;inset:0;z-index:999;background:var(--dark);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.15rem;padding:calc(var(--nav-h) + 20px) 1.5rem 1.5rem;opacity:0;pointer-events:none;transition:opacity .3s;overflow-y:auto}
.mobile-menu.open{opacity:1;pointer-events:all}
.mobile-menu a{font-family:var(--playfair);font-size:1.7rem;color:var(--text-dk);text-decoration:none;letter-spacing:.02em;transition:color .2s;cursor:pointer}
.mobile-menu a:hover{color:var(--text-dk);text-shadow:0 0 20px rgba(240,232,218,0.5)}
.mobile-menu .mobile-book{font-family:var(--barlow);font-size:1rem;font-weight:500;letter-spacing:.01em;color:var(--dark);background:var(--brass);padding:.9rem 2.5rem;border-radius:10px;margin-top:1rem}

/* ── BUTTONS ── */
.btn-primary{font-family:var(--barlow);font-size:.98rem;font-weight:500;letter-spacing:.01em;color:var(--dark);background:var(--brass);padding:.9rem 2.2rem;text-decoration:none;border-radius:10px;transition:filter .2s,transform .1s ease;display:inline-block;border:none;cursor:pointer}
.btn-primary:active{transform:scale(.97)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-outline-dk{font-family:var(--barlow);font-size:.98rem;font-weight:500;letter-spacing:.01em;color:rgba(240,232,218,0.88);border:1.5px solid rgba(240,232,218,0.45);padding:.9rem 2.2rem;text-decoration:none;border-radius:10px;transition:border-color .2s,color .2s,transform .1s ease;display:inline-block;background:none;cursor:pointer}
.btn-outline-dk:active{transform:scale(.97)}
.btn-outline-dk:hover{border-color:var(--gold);color:var(--gold)}
.btn-outline-dk-bright{border-width:2px;border-color:rgba(255,255,255,0.78);color:rgba(255,255,255,0.96)}
.btn-outline-dk-bright:hover{border-color:#fff;color:#fff}
.btn-outline-lt{font-family:var(--barlow);font-size:.98rem;font-weight:500;letter-spacing:.01em;color:var(--text-lt);border:1.5px solid rgba(26,22,18,0.45);padding:.9rem 2.2rem;text-decoration:none;border-radius:10px;transition:border-color .2s,color .2s,transform .1s ease;display:inline-block;background:none;cursor:pointer}
.btn-outline-lt:active{transform:scale(.97)}
.btn-outline-lt:hover{border-color:var(--ochre);color:var(--ochre)}

/* ── TYPE ── */
.eyebrow-dk{font-family:var(--barlow);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,232,218,0.55);margin-bottom:.9rem;display:block}
.eyebrow-lt{font-family:var(--barlow);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(26,22,18,0.45);margin-bottom:.9rem;display:block}
.title-dk{font-family:var(--playfair);font-size:clamp(2rem,3.5vw,2.9rem);font-weight:400;line-height:1.15;color:var(--text-dk);margin-bottom:1.2rem}
.title-lt{font-family:var(--playfair);font-size:clamp(2rem,3.5vw,2.9rem);font-weight:400;line-height:1.15;color:var(--text-lt);margin-bottom:1.2rem}
.body-dk{font-size:1.08rem;font-weight:300;color:rgba(240,232,218,0.88);line-height:1.8}
.body-lt{font-size:1.08rem;font-weight:300;color:rgba(26,22,18,0.9);line-height:1.8}
/* Ochre rule - signature accent used before section titles */
.ochre-rule{display:block;width:2.5rem;height:2px;background:var(--muted-lt);margin-bottom:2.6rem}

/* ── HERO ── */
.home-hero-wrap{padding:0}
#hero-section{position:relative;height:100vh;height:calc(var(--vh,1vh)*100);height:100dvh;min-height:640px;overflow:hidden;transform:translateZ(0)}
@media(max-width:900px){
.home-hero-wrap{padding:0}
/* Round 266: dvh alone still left a sliver of gap below the hero on a real phone, so
   layering in a small fixed overshoot on top of it - hero runs a little past one
   screen's worth of height rather than risking falling a little short of it. Barely
   noticeable as "one extra soft scroll," but it means there's never a gap of bare
   page peeking in underneath the hero on load. */
#hero-section{height:100vh;height:calc(var(--vh,1vh)*100);height:calc(100dvh + 60px);min-height:560px}
}
#hero-section img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:center;animation:heroKenBurns 26s ease-out forwards;will-change:transform}
@keyframes heroKenBurns{from{transform:scale(1)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){#hero-section img{animation:none}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(14,12,10,0.45) 0%,rgba(14,12,10,0.24) 22%,rgba(14,12,10,0.3) 50%,rgba(14,12,10,0.5) 75%,rgba(14,12,10,0.68) 100%),radial-gradient(ellipse 62% 46% at 50% 42%,rgba(14,12,10,0.38) 0%,rgba(14,12,10,0) 72%)}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--nav-h) + 1rem) 2rem 5rem}
.hero-title{font-family:var(--playfair);font-size:clamp(3.2rem,7vw,6rem);font-weight:500;letter-spacing:.006em;line-height:1.05;color:var(--text-dk);max-width:840px;margin-bottom:1.4rem}
.hero-title em{font-style:normal;color:inherit}
.hero-sub{font-size:1rem;font-weight:300;color:rgba(240,232,218,0.88);margin-bottom:2.4rem;letter-spacing:.02em;max-width:480px}
.hero-ctas{display:flex;gap:.85rem;flex-wrap:wrap;justify-content:center}
/* Indo House style property stats - outlined pills at hero bottom */
.hero-stats{position:absolute;bottom:2.5rem;left:0;right:0;z-index:2;display:flex;justify-content:center;align-items:center;gap:2rem;padding:0 2rem}
.hero-stat-item{display:flex;align-items:center;gap:.75rem}
.hero-stat-circle{width:34px;height:34px;border-radius:50%;border:1px solid rgba(240,232,218,0.35);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero-stat-circle svg{width:14px;height:14px;stroke:rgba(240,232,218,0.75);fill:none;stroke-width:1.5}
.hero-stat-text{font-family:var(--barlow);font-size:.72rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,232,218,0.88);white-space:nowrap}
.hero-stat-divider{width:1px;height:16px;background:rgba(240,232,218,0.18)}

/* ── LOCATION PAGE: full-bleed cinematic hero (same device as the home hero,
   scaled slightly shorter so it reads as a section hero, not the landing page) ── */
.loc-hero-wrap{padding:0}
.loc-hero-section{position:relative;height:92vh;min-height:600px;overflow:hidden;transform:translateZ(0)}
.loc-hero-section img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;animation:heroKenBurns 26s ease-out forwards;will-change:transform}
@media (prefers-reduced-motion:reduce){.loc-hero-section img{animation:none}}
.loc-hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:calc(var(--nav-h) + 2rem) 3.5rem 4.5rem;max-width:1400px;margin:0 auto}
.loc-hero-eyebrow{font-family:var(--barlow);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,232,218,0.82);margin-bottom:1.1rem;display:block;overflow:hidden;text-shadow:0 0 3px rgba(0,0,0,0.9),0 0 10px rgba(0,0,0,0.75),0 1px 2px rgba(0,0,0,0.9)}
.loc-hero-eyebrow span{display:block;transform:translateY(112%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
body.intro-done .loc-hero-eyebrow span{transform:none}
.loc-hero-content .hero-title{color:var(--text-dk);text-align:left;margin-bottom:1rem}
.loc-hero-content .hero-sub{text-align:left;margin-bottom:2rem;max-width:520px}
.loc-hero-content .hero-ctas{justify-content:flex-start}
@media(max-width:900px){
.loc-hero-section{height:82vh;min-height:520px}
.loc-hero-content{padding:calc(var(--nav-h) + 1.5rem) 1.5rem 3rem}
}

/* ── ABOUT - 50/50 split ──
   Round 252: dropped the overlapping accent photo that used to sit on top of the main image -
   it's the first "device" a visitor hits after the hero, and the client felt it read as another
   distinct layout treatment rather than part of one planned page (Indo House's equivalent
   homepage-intro section runs the same way: one large photo, text alongside, no overlap). */
#about{background:var(--cream);padding:0}
.about-split{display:grid;grid-template-columns:1fr 1fr;min-height:820px}
.about-split-img{position:relative;overflow:visible;background:var(--cream);display:flex;align-items:center;padding:3.5rem 3rem}
.about-photo-main{position:relative;width:100%;height:600px;overflow:hidden;border-radius:var(--radius-lg);box-shadow:0 24px 60px rgba(0,0,0,0.4);z-index:1}
.about-photo-main img{width:100%;height:100%;object-fit:cover}
.about-split-text{display:flex;flex-direction:column;justify-content:center;padding:6rem 5rem;background:var(--cream)}
.about-headline{font-family:var(--playfair);font-size:clamp(2.4rem,3.5vw,3.6rem);font-weight:400;line-height:1.08;color:var(--text-lt);margin-bottom:1.8rem}
.about-headline em{font-style:normal;font-weight:500}
.about-ctas{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2.2rem}
/* second image - full bleed bridge to statement */
.about-img-full{position:relative;overflow:hidden;height:480px}
.about-img-full img{height:100%;}

.about-img-label{position:absolute;bottom:0;left:0;right:0;padding:2rem 3rem;background:linear-gradient(to top,rgba(14,12,10,0.88) 0%,rgba(14,12,10,0.3) 55%,transparent 100%);display:flex;align-items:flex-end;justify-content:space-between}
.about-img-pills{display:flex;gap:.45rem;flex-wrap:wrap}
.about-img-pills span{font-family:var(--barlow);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,232,218,0.88);background:rgba(240,232,218,0.12);border:1px solid rgba(240,232,218,0.22);padding:.28rem .8rem;border-radius:var(--radius-sm)}
.about-view-more{font-family:var(--barlow);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dark);background:rgba(240,232,218,0.88);border:none;padding:.6rem 1.35rem;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;display:inline-block;transition:background .2s;white-space:nowrap;margin-left:1.5rem;flex-shrink:0}
.about-view-more:hover{background:#fff}

/* ── AMENITIES PREVIEW - Indo House 2-col ── */
#amenities-preview{background:var(--cream);padding:8rem 3.5rem}
.amenities-preview-inner{max-width:1200px;margin:0 auto}
.amenities-top{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:end;margin-bottom:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--border-lt)}
/* 2-col full-bleed feature panels */
.feature-panels{display:grid;grid-template-columns:1.15fr .85fr;gap:1.4rem}
.feature-panel{position:relative;overflow:hidden;height:560px;border-radius:var(--radius-lg)}
.feature-panel img{height:100%;transition:transform .6s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.feature-panel:hover img{transform:scale(1.06)}}
.feature-panel-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,12,10,0.88) 0%,rgba(14,12,10,0.08) 52%)}
.feature-panel-body{position:absolute;bottom:0;left:0;right:0;padding:2rem 2.2rem}
.feature-panel-name{font-family:var(--playfair);font-size:1.55rem;color:#fff;display:block;margin-bottom:.35rem}
.feature-panel-desc{font-size:.86rem;color:rgba(255,255,255,0.82);font-weight:300;line-height:1.6;margin-bottom:1rem}
.feature-panel-pills{display:flex;flex-wrap:wrap;gap:.4rem}
.feature-panel-pills span{font-family:var(--barlow);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);padding:.25rem .7rem;border-radius:var(--radius-sm)}
/* pill strip */
/* Amenities list - was a 3x3 grid of custom icon+label pairs, the same repeated-tile
   formula flagged elsewhere on the site. Recast as the same categorized text list used
   in Todo's "Everything You Need to Know" section (villa-spec-grid), so the two most
   fact-dense sections on the site share one editorial convention instead of two. */
/* Round 251: back to a plain icon+heading+hairline list, no card box, no pill-tag rows - the
   client flagged the tinted-box treatment itself (not the pills, not the categorization) as
   reading like a template card grid. One small line icon per category (not per item) above the
   heading, matching the reference-site "icon, heading, hairline rule, plain list" convention. */
.amenity-spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem;margin-top:4rem}
.amenity-spec-grid>div{padding:0}
.spec-icon{width:28px;height:28px;margin-bottom:1.2rem;color:var(--brass)}
.spec-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.amenity-spec-grid h5{font-family:var(--playfair);font-weight:500;font-size:1.1rem;color:var(--text-lt);margin-bottom:1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--border-lt)}
.amenity-spec-grid ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.amenity-spec-grid li{font-family:var(--barlow);font-size:.86rem;line-height:1.55;color:rgba(26,22,18,0.82)}
@media(max-width:700px){.amenity-spec-grid{grid-template-columns:1fr;gap:2rem}}

/* ── STATEMENT BAND - solid color-block, no photo. The site otherwise only ever breaks
   cream with a photo-darkened dark section; this is the one place a flat color carries a
   moment on its own. Teal read as a cool, coastal-spa color dropped into a warm African
   lodge palette, so this uses the site's own near-black instead - still a genuine flat-color
   beat (no photo texture at all), just one that belongs to Chitova's palette already. ── */

/* ── WEATHER WIDGET - live conditions, fetched client-side from Open-Meteo (no key needed).
   Sits in Todo's "When to Go" section since that's exactly where a guest is deciding when
   to visit and what to pack. Fails silently to a plain message if the request doesn't land. ── */
.weather-now{max-width:540px;margin:3.5rem auto 0;padding:2.1rem 2.4rem;border:1px solid var(--border-lt);border-radius:var(--radius-lg);text-align:center;background:var(--cream2)}
.weather-now-label{display:block;font-family:var(--playfair);font-size:1.15rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-lt);margin-bottom:1.1rem}
.weather-now-body{display:flex;align-items:center;justify-content:center;gap:1.7rem;flex-wrap:wrap;min-height:2.6rem}
.weather-now-temp{font-family:var(--barlow);font-size:2.8rem;font-weight:700;color:var(--text-lt);line-height:1;letter-spacing:-.02em}
.weather-now-desc{font-family:var(--barlow);font-size:.9rem;color:rgba(26,22,18,0.72);text-align:left;line-height:1.5}
.weather-now-desc strong{display:block;color:var(--text-lt);font-size:1rem;font-weight:500;margin-bottom:.15rem}
.weather-now-loading,.weather-now-error{font-family:var(--barlow);font-size:.86rem;color:var(--muted-lt)}

/* ── REVIEWS CAROUSEL ── */
/* Round 256: moved from position #3 (right after the hero) down to right after About, and
   brought the photo backdrop back - using the site's own established full-bleed-photo +
   dark-gradient-overlay recipe (same component idea as #site-footer-cta / .villa-fullbleed)
   instead of the one-off blurred treatment used before round 251. With About now sitting as a
   full cream section between the hero and this one, the photo no longer competes with the
   hero's own full-bleed moment - and Amenities/Experience/FAQ still sit as a cream buffer
   before the footer's own full-bleed photo, so no two photo sections land back to back. Quote
   cards are unchanged; they already worked over dark, photo or flat backgrounds. */
#reviews-section{position:relative;overflow:hidden;padding:6rem 0}
#reviews-photo-bg{position:absolute;inset:0}
#reviews-photo-bg img{width:100%;height:100%;object-fit:cover;object-position:center 65%}
#reviews-photo-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(14,12,10,0.74) 0%,rgba(14,12,10,0.8) 45%,rgba(14,12,10,0.86) 100%)}
#platforms-strip{padding:3rem 2rem;text-align:center;background:var(--cream)}
.platforms-label{font-family:var(--barlow);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-lt);margin-bottom:1.6rem}
.platforms-row{display:flex;justify-content:center;align-items:center;gap:3rem;flex-wrap:wrap}
.platforms-row a{display:block;transition:opacity .2s;color:var(--muted-lt);text-decoration:none;font-family:var(--barlow);font-size:.85rem}
.platforms-row a:hover .platform-logo-img{opacity:1}
/* Brass monochrome treatment for the booking-partner logos - applied via filter (not CSS
   mask-image, which silently fails to paint raster PNG masks in some Chromium builds) so the
   logos render reliably everywhere while staying in the site's brass tone rather than clashing
   brand colors. brightness(0) first flattens the source art to a black silhouette, then the
   invert/sepia/saturate/hue-rotate chain recolors that silhouette to --brass (#c3a671). */
.platform-logo-img{display:block;height:36px;width:auto;opacity:.85;transition:opacity .2s;filter:brightness(0) invert(54%) sepia(95%) saturate(169%) hue-rotate(1deg) brightness(105%) contrast(85%)}
.platform-logo-svg{display:block;width:150px;height:auto;opacity:.85;transition:opacity .2s}
.platforms-row a:hover .platform-logo-svg{opacity:1}
.platform-logo-svg .xp-navy{fill:var(--brass)}
.platform-logo-svg .xp-gold{fill:var(--cream)}
@media(max-width:899px){#platforms-strip{padding:2.4rem 1.1rem}.platforms-row{gap:.8rem}.platform-logo-img{height:22px}.platform-logo-svg{width:auto;height:22px}}
.reviews-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 3.5rem}
.reviews-header{margin-bottom:3rem}
.reviews-score-block{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:1rem}
.reviews-score-num{font-family:var(--playfair);font-size:6rem;font-weight:600;color:var(--brass);line-height:1;letter-spacing:-.02em}
.reviews-score-meta{display:flex;flex-direction:column;gap:.3rem}
.reviews-score-out{font-family:var(--barlow);font-size:.8rem;letter-spacing:.1em;color:rgba(240,232,218,0.9);text-transform:uppercase}
.reviews-score-platform{font-family:var(--barlow);font-size:.68rem;letter-spacing:.18em;color:rgba(240,232,218,0.75);text-transform:uppercase}
.reviews-score-count{font-family:var(--barlow);font-size:.68rem;letter-spacing:.1em;color:rgba(240,232,218,0.9);text-transform:uppercase;margin-top:.1rem}
.reviews-carousel-wrap{position:relative}
.reviews-track-outer{overflow:hidden;padding:.5rem 0 2.5rem}
.reviews-track{display:flex;gap:1.4rem;align-items:stretch;transition:transform .45s cubic-bezier(.25,.46,.45,.94);will-change:transform}
/* Round 251: redesigned from one dominant card floating on a bigger card into a row of
   three smaller flat cards over the same blurred photo backdrop - a Serene Oasis (photo
   backdrop, a row of cards) x Buildometry (individual flat cards, no card-on-card) hybrid.
   Still paged with the existing arrow/dot controls, just revPerPage cards at a time instead
   of one. */
.review-quote{flex:0 0 calc((100% - 2.8rem)/3);min-width:0;display:flex}
.review-quote-card{background:rgba(250,247,242,0.95);border-radius:var(--radius-md);box-shadow:0 14px 40px rgba(0,0,0,0.2);padding:2.2rem 2rem;width:100%;display:flex;flex-direction:column;text-align:left}
/* Round 253: moved the star rating and platform logo up to the top of the card (client's own
   Buildometry reference) instead of the old giant quote-mark glyph, and moved the platform meta
   (logo + score link) out of the footer row since the logo now lives up top - footer is just the
   author line. Brass-tinted logo treatment from round 252 carries over unchanged. */
.review-quote-top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:1.3rem}
.review-quote-stars{display:flex;gap:.2rem}
.review-quote-stars svg{width:14px;height:14px;fill:var(--brass)}
/* Round 267: this filter was landing as flat grey instead of the warm brass it was going for -
   retuned the invert/sepia/saturate curve so the platform logos actually read as brand-gold
   against the review cards instead of looking like a broken/unstyled image.
   Round 267b: split per-platform. logo-google.png turned out to already be the real
   full-colour Google wordmark (the old shared filter was flattening it to brass along with
   the other two) - just drop the filter for it. logo-airbnb.png is a plain white cutout with
   no colour data of its own, but Airbnb's actual mark is a single flat coral, so it recolors
   the same way the brass tint did, just aimed at their real #FF5A5F instead. Booking.com stays
   on the brass tint from the pass above. */
.review-quote-platform-logo{height:18px;width:auto;display:block;opacity:1}
.review-quote-platform-logo.logo-booking{filter:brightness(0) invert(65%) sepia(45%) saturate(600%) hue-rotate(-5deg) brightness(95%) contrast(92%)}
.review-quote-platform-logo.logo-google{height:26px;filter:none}
.review-quote-platform-logo.logo-airbnb{filter:brightness(0) invert(48%) sepia(79%) saturate(2476%) hue-rotate(325deg) brightness(100%) contrast(101%)}
.review-quote-text{font-family:var(--playfair);font-size:1.05rem;font-weight:400;font-style:normal;line-height:1.55;color:var(--text-lt);margin-bottom:1.4rem;flex:1}
.review-quote-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;padding-top:1rem;border-top:1px solid var(--border-lt)}
.review-quote-attr{font-family:var(--barlow);font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-lt)}
.review-quote-link{font-family:var(--barlow);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-lt);text-decoration:none;padding-bottom:2px;border-bottom:1px solid var(--border-lt);transition:color .2s,border-color .2s}
.review-quote-link:hover{color:var(--muted-lt);border-color:var(--muted-lt)}
@media(max-width:900px){.review-quote{flex:0 0 calc((100% - 1.4rem)/2)}}
@media(max-width:600px){.review-quote{flex:0 0 100%}}
.reviews-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(240,232,218,0.5);background:rgba(20,18,16,0.4);color:#fff;font-size:1.4rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s;font-family:var(--barlow);z-index:3;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.reviews-arrow:hover{background:rgba(20,18,16,0.6);border-color:#fff}
.reviews-arrow-prev{left:-36px}
.reviews-arrow-next{right:-36px}
.reviews-dots{display:flex;gap:.5rem;align-items:center;justify-content:center;margin-top:2rem}
.reviews-dot{width:5px;height:5px;border-radius:50%;background:rgba(240,232,218,0.4);transition:background .2s,width .2s}
.reviews-dot.active{background:var(--gold);width:16px;border-radius:3px}

/* ── VICTORIA FALLS EXPERIENCES ── */
#experience-section{background:var(--cream);padding:8rem 3.5rem}
.experience-intro{max-width:1200px;margin:0 auto 5rem}
.experience-heading{font-family:var(--playfair);font-weight:500;font-size:clamp(2.2rem,4vw,3.2rem);color:var(--text-lt);max-width:640px;line-height:1.1;margin-bottom:1.3rem}
.experience-lede{font-family:var(--barlow);font-size:1.08rem;line-height:1.7;color:rgba(26,22,18,0.82);max-width:640px}
.experience-lede a{color:var(--text-lt);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.experience-quickhits{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.experience-quickhit{position:relative;height:460px;overflow:hidden}
.experience-quickhit img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.experience-quickhit-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,12,10,0.88) 0%,rgba(14,12,10,0.25) 55%,rgba(14,12,10,0.05) 100%)}
.experience-quickhit-body{position:absolute;left:0;right:0;bottom:0;padding:1.8rem}
.experience-quickhit-tag{display:inline-block;font-family:var(--barlow);font-size:.66rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,0.92);background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.28);padding:.3rem .8rem;border-radius:var(--radius-sm);margin-bottom:.9rem}
.experience-quickhit-body h4{font-family:var(--playfair);font-weight:500;font-size:1.35rem;color:#fff;margin-bottom:.5rem}
.experience-quickhit-body p{font-family:var(--barlow);font-size:.88rem;line-height:1.5;color:rgba(255,255,255,0.82)}
@media(hover:hover){.experience-quickhit:hover img{transform:scale(1.06)}}

@media (max-width:900px){
.experience-quickhits{grid-template-columns:1fr}
}

.todo-card{border-radius:var(--radius-lg);overflow:hidden;background:#fff;border:1px solid var(--border-lt);box-shadow:0 2px 12px rgba(26,22,18,0.06);transition:box-shadow .3s,transform .3s}
.todo-img img{height:100%;width:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){
@media(hover:hover) and (pointer:fine){.todo-card:hover{box-shadow:0 12px 32px rgba(26,22,18,0.12);transform:translateY(-3px)}
.todo-card:hover .todo-img img{transform:scale(1.05)}}
}
.todo-img{height:220px;overflow:hidden;position:relative;background:var(--cream2)}
.todo-tag{position:absolute;top:.8rem;left:.8rem;font-family:var(--barlow);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:var(--ochre);color:var(--dark);padding:.28rem .75rem;border-radius:var(--radius-sm)}
.todo-fact{display:inline-block;font-family:var(--barlow);font-size:.82rem;font-weight:500;color:rgba(26,22,18,0.75);border:1px solid var(--border-lt);padding:.32rem .8rem;border-radius:8px;margin-top:.9rem}

/* ── TODO EDITORIAL HEADER (no banner hero) ── */
.todo-editorial-header{background:var(--cream);padding:calc(var(--nav-h) + 4rem) 3.5rem 4rem;display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center}
.todo-editorial-text h2{font-family:var(--playfair);font-weight:500;font-size:clamp(2.3rem,4vw,3.3rem);color:var(--text-lt);line-height:1.15;margin-bottom:1.4rem}
.todo-editorial-text p{font-family:var(--barlow);font-size:1.08rem;line-height:1.7;color:rgba(26,22,18,0.82);max-width:480px}
.todo-editorial-collage{display:grid;grid-template-columns:1.3fr 1fr;gap:1rem;height:420px}
.todo-editorial-collage .tec-large,.todo-editorial-collage .tec-small{border-radius:var(--radius-md);overflow:hidden}
.todo-editorial-collage img{width:100%;height:100%;object-fit:cover;display:block}
.todo-editorial-collage .tec-stack{display:flex;flex-direction:column;gap:1rem}
.todo-editorial-collage .tec-small{flex:1;min-height:0}
@media(max-width:900px){
.todo-editorial-header{grid-template-columns:1fr;padding:calc(var(--nav-h) + 3rem) 1.5rem 2.5rem;gap:2.5rem}
.todo-editorial-collage{height:320px}
}

/* ── DEVIL'S POOL: full-bleed statement ── */
.todo-statement{position:relative;width:100vw;margin-left:calc(-50vw + 50%);margin-bottom:6rem;height:620px;overflow:hidden}
.todo-statement img{width:100%;height:100%;object-fit:cover}
.todo-statement-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,12,10,0.88) 0%,rgba(14,12,10,0.35) 45%,rgba(14,12,10,0.05) 70%)}
.todo-statement-text{position:absolute;left:0;bottom:0;padding:3.5rem;max-width:620px}
.todo-statement-text h3{font-family:var(--playfair);font-weight:500;font-size:clamp(1.9rem,3vw,2.6rem);color:#fff;margin-bottom:1rem}
.todo-statement-text p{font-family:var(--barlow);font-size:1rem;line-height:1.7;color:rgba(255,255,255,0.86)}
.todo-statement-facts{display:flex;gap:2.5rem;margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.25)}
.todo-statement-facts div{font-family:var(--barlow);font-size:.86rem;color:rgba(255,255,255,0.75)}
.todo-statement-facts span{display:block;font-family:var(--playfair);font-size:1.25rem;color:#fff;font-weight:500;margin-bottom:.15rem}

/* ── OVERLAP HERO: floating card over photo ── */
.overlap-hero{position:relative;display:flex;align-items:center;min-height:480px;max-width:1200px;margin:0 auto 6rem}
.oh-photo{width:62%;height:480px;object-fit:cover;border-radius:var(--radius-lg);box-shadow:0 24px 50px rgba(20,18,16,0.2);display:block}
.oh-card{position:relative;margin-left:-16%;background:#fff;border-radius:var(--radius-lg);padding:3rem 2.75rem;box-shadow:0 30px 60px rgba(20,18,16,0.16);max-width:440px;z-index:2}
.oh-card h3{font-family:var(--playfair);font-weight:500;font-size:clamp(1.7rem,2.6vw,2.3rem);color:var(--text-lt);margin-bottom:1.1rem}
.oh-card p{font-family:var(--barlow);font-size:1rem;line-height:1.75;color:rgba(26,22,18,0.82)}
@media(max-width:860px){
.overlap-hero{flex-direction:column;min-height:auto}
.oh-photo{width:100%;height:320px}
.oh-card{margin-left:0;margin-top:-3.5rem;width:calc(100% - 2.5rem);max-width:none;padding:2rem 1.75rem}
}

/* ── SECTION STATEMENT: full-height breathing room ── */
.section-statement{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:var(--dark);padding:4rem 2rem;width:100vw;margin-left:calc(-50vw + 50%);margin-bottom:6rem}
.section-statement p{font-family:var(--playfair);font-style:normal;font-weight:400;font-size:clamp(1.6rem,3.2vw,2.6rem);color:var(--text-dk);max-width:820px;line-height:1.4}
@media(max-width:700px){.section-statement{min-height:auto;padding:5rem 1.5rem}}
.bonatsa-trio{max-width:1200px;margin:0 auto 5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.bonatsa-card{position:relative;height:480px;border-radius:var(--radius-lg);overflow:hidden}
.bonatsa-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.bonatsa-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,12,10,0.85) 0%,rgba(14,12,10,0.2) 55%,rgba(14,12,10,0.05) 100%)}
.bonatsa-text{position:absolute;left:0;right:0;bottom:0;padding:1.8rem}
.bonatsa-text h4{font-family:var(--playfair);font-weight:500;font-size:1.4rem;color:#fff;margin-bottom:.5rem}
.bonatsa-text p{font-family:var(--barlow);font-size:.88rem;line-height:1.55;color:rgba(255,255,255,0.85)}
@media(hover:hover){.bonatsa-card:hover img{transform:scale(1.06)}}

/* ── SPECIES TRIO: plain supporting imagery, Indo-style ── */
.species-trio{max-width:1200px;margin:0 auto 8rem}
.species-trio-label{font-family:var(--playfair);font-style:normal;font-size:1.1rem;color:var(--text-lt);margin-bottom:1.4rem}
.species-trio-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.species-trio-item{position:relative;height:200px;border-radius:var(--radius-md);overflow:hidden}
.species-trio-item img{width:100%;height:100%;object-fit:cover}
.species-trio-item span{position:absolute;left:0;right:0;bottom:0;padding:.7rem 1rem;background:linear-gradient(to top,rgba(14,12,10,0.7),transparent);font-family:var(--barlow);font-size:.82rem;color:#fff}

@media(max-width:900px){
.todo-statement{height:440px}
.todo-statement-text{padding:2rem}
.bonatsa-trio{grid-template-columns:1fr}
.species-trio-row{grid-template-columns:repeat(2,1fr)}
}
.todo-body{padding:1.6rem}
.todo-body h4{font-family:var(--playfair);font-size:1.12rem;color:var(--text-lt);margin-bottom:.5rem;font-weight:400}
.todo-body p{font-size:.98rem;color:rgba(26,22,18,0.9);line-height:1.75;font-weight:300}
.todo-pull{font-family:var(--playfair);font-size:.88rem;font-style:normal;color:rgba(26,22,18,0.9);line-height:1.6;margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--border-lt)}

/* ── VILLA-STYLE PAGE (mimicking Indo's Villa page) ── */
/* ── DESTINATION HERO (mimicking Bonatsa's Antiparos page: framed photo with breathing room, not edge-to-edge) ── */
.dest-hero{background:var(--cream);padding:calc(var(--nav-h) + 2rem) 2rem 2.5rem}
.dest-hero-photo{position:relative;height:78vh;min-height:520px;border-radius:var(--radius-lg);overflow:hidden;display:flex;align-items:flex-end}
.dest-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dest-hero-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,12,10,0.62) 0%,rgba(14,12,10,0) 42%)}
.dest-hero-inner{position:relative;z-index:2;width:100%;padding:0 3rem 3.5rem}
.dest-hero-inner .title-dk{font-size:clamp(2.8rem,6vw,4.8rem);margin-bottom:0}
@media(max-width:900px){
.dest-hero{padding:calc(var(--nav-h) + 1.5rem) 1rem 1.5rem}
.dest-hero-photo{height:56vh;min-height:380px;border-radius:var(--radius-md)}
.dest-hero-inner{padding:0 1.5rem 2rem}
}


.villa-section{max-width:1200px;margin:0 auto;padding:0 2rem 6.5rem}
.villa-fullbleed+.villa-section,.villa-dark-band+.villa-section{padding-top:5rem}
.villa-section-plain{max-width:1200px}
.villa-section h2{font-family:var(--playfair);font-weight:500;color:var(--text-lt);font-size:clamp(2.4rem,4.6vw,3.8rem);line-height:1.08;letter-spacing:-.01em;margin-bottom:1.6rem}
.villa-section-lede{font-family:var(--barlow);font-size:1.08rem;line-height:1.75;color:rgba(26,22,18,0.82);margin-bottom:1.3rem;max-width:640px}


.villa-single-photo{border-radius:var(--radius-lg);overflow:hidden;height:460px;margin-top:2.3rem}
.villa-single-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:700px){.villa-single-photo{height:300px}}

.villa-feature-duo{display:grid;grid-template-columns:1.3fr 1fr;gap:3.5rem;margin-top:3rem;align-items:center}
.villa-feature-duo-rev{grid-template-columns:1fr 1.3fr}
.villa-feature-duo-rev .villa-feature-duo-side{padding-top:0}
.villa-feature-duo-main{height:520px;overflow:hidden}
.villa-feature-duo-main img{width:100%;height:100%;object-fit:cover;display:block}
.villa-feature-duo-side{display:flex;flex-direction:column;gap:1.8rem;padding-top:1rem}
.villa-feature-duo-side h4{font-family:var(--playfair);font-weight:500;font-size:1.2rem;color:var(--text-lt);margin-bottom:.5rem}
.villa-feature-duo-side p{font-family:var(--barlow);font-size:1rem;line-height:1.65;color:rgba(26,22,18,0.82)}
@media(max-width:800px){.villa-feature-duo{grid-template-columns:1fr;gap:2rem}.villa-feature-duo-main{height:360px}}

/* Round 252: restored - Devil's Pool doesn't have a proper dedicated photo, so it went back to
   being paired with Sunset Cruise as two smaller equal-weight mentions under Rainforest Walk
   instead of getting the same full single-topic duo treatment (client felt giving it that much
   weight overstated the photography, and disliked the overlapping-card-on-photo look). */
/* Round 253: the main Rainforest Walk device above is a horizontal split (photo one side, text
   the other), but these two smaller mentions stacked text below their photos - a different text
   orientation right under it, which read as an accidental mismatch rather than a deliberate
   change of scale. Switched to a caption overlaid directly on the photo (same recipe already
   used on the Home quickhit trio and the Location reach-tiles) so there's no separate stacked
   text block to clash with the device above - it just reads as a smaller, quieter mention. */
.villa-mini-duo{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;margin-top:3rem}
.villa-mini-item{position:relative;display:block;border-radius:var(--radius-md);overflow:hidden;height:340px}
.villa-mini-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.villa-mini-item::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(14,12,10,0.82) 0%,rgba(14,12,10,0.12) 55%,transparent 100%)}
@media(hover:hover) and (pointer:fine){.villa-mini-item:hover img{transform:scale(1.06)}}
.villa-mini-item-body{position:absolute;left:1.6rem;right:1.6rem;bottom:1.5rem;z-index:2}
.villa-mini-item h5{font-family:var(--playfair);font-weight:500;font-size:1.3rem;color:var(--text-dk);margin-bottom:.35rem}
.villa-mini-item p{font-family:var(--barlow);font-size:.86rem;line-height:1.55;color:rgba(240,232,218,0.85)}
@media(max-width:700px){.villa-mini-duo{grid-template-columns:1fr;gap:1.2rem}.villa-mini-item{height:280px}}

.villa-fullbleed{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:86vh;min-height:600px;overflow:hidden}
.villa-fullbleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.villa-fullbleed-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,12,10,0.8) 0%,rgba(14,12,10,0.25) 45%,rgba(14,12,10,0) 68%)}
.villa-fullbleed-text{position:absolute;left:0;right:0;bottom:0;padding:4.5rem 3.5rem;max-width:820px}
.villa-fullbleed-text span{font-family:var(--barlow);font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:1rem}
.villa-fullbleed-text h2{font-family:var(--playfair);font-weight:500;color:#fff;font-size:clamp(2.6rem,5.5vw,4.6rem);line-height:1.05;letter-spacing:-.01em;margin-bottom:1.2rem}
.villa-fullbleed-text p{font-family:var(--barlow);font-size:1.1rem;line-height:1.7;color:rgba(240,232,218,0.9)}
@media(max-width:900px){.villa-fullbleed{height:60vh;min-height:440px}.villa-fullbleed-text{padding:2.2rem 1.5rem;max-width:100%}}



.villa-dark-band{background:var(--dark);padding:6.5rem 2rem}
.villa-dark-band-inner{max-width:1200px;margin:0 auto}
.villa-dark-band h2{font-family:var(--playfair);font-weight:500;color:var(--text-dk);font-size:clamp(2.4rem,4.6vw,3.8rem);line-height:1.08;letter-spacing:-.01em;margin-bottom:1.6rem}
.villa-dark-band .villa-section-lede{color:rgba(240,232,218,0.78);max-width:680px}
.villa-dark-split{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:center}
.villa-dark-split-facts{display:flex;flex-direction:column;gap:1.4rem;margin-top:2rem}
.villa-dark-split-facts h5{font-family:var(--playfair);font-weight:500;font-size:1.1rem;color:var(--brass);margin-bottom:.3rem}
.villa-dark-split-facts p{font-family:var(--barlow);font-size:.92rem;color:rgba(240,232,218,0.75);line-height:1.6}
.villa-dark-split-media{height:560px;overflow:hidden}
.villa-dark-split-media img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){.villa-dark-split{grid-template-columns:1fr;gap:2rem}.villa-dark-split-media{height:420px}}


/* Round 251: back to a plain icon+heading+hairline list, no card box, no pill-tag rows - same
   reasoning and treatment as .amenity-spec-grid on Home (see that comment). Reuses the shared
   .spec-icon class so the two pages match. */
.villa-spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.2rem;margin-top:3rem}
.villa-spec-grid>div{padding:0}
.villa-spec-grid h5{font-family:var(--playfair);font-weight:500;font-size:1.1rem;color:var(--text-lt);margin-bottom:1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--border-lt)}
.villa-spec-grid ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.villa-spec-grid li{font-family:var(--barlow);font-size:.82rem;line-height:1.5;color:rgba(26,22,18,0.82)}

/* Todo quote band - a single guest voice, full weight, between the experiential content above
   and the practical logistics below. Todo had zero guest testimonials anywhere on it despite
   being the most experience-driven page; this borrows the review carousel's type treatment
   without duplicating its card/carousel machinery. */
.todo-quote-band{max-width:760px;margin:0 auto;padding:5.5rem 2rem;text-align:center}
.todo-quote-mark{display:block;font-family:var(--playfair);font-size:3.6rem;color:rgba(26,22,18,0.16);line-height:.5;margin-bottom:1.2rem}
.todo-quote-text{font-family:var(--playfair);font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:400;line-height:1.5;color:var(--text-lt);margin-bottom:1.4rem}
.todo-quote-attr{font-family:var(--barlow);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(26,22,18,0.5)}
@media(max-width:600px){.todo-quote-band{padding:4rem 1.5rem}}

/* Round 253: was two flat muted-label/heading/hairline-rule/paragraph cards - the exact generic
   template-card recipe already banned elsewhere on this site. Rebuilt as the flowing narrative
   prose the section's own original comment called for but never actually shipped, so it reads as
   text (like the "Two Countries"/"Lions" copy elsewhere) rather than another boxed grid sitting
   right before "Everything You Need to Know". */
.season-copy{margin-top:1.6rem;max-width:760px}
.season-copy p{font-family:var(--barlow);font-size:1rem;line-height:1.85;color:rgba(26,22,18,0.85);margin-bottom:1.3rem}
.season-copy strong{color:var(--text-lt);font-weight:600}

@media(max-width:900px){
.villa-section{padding:0 1.5rem 4rem}
.villa-dark-band{padding:4.5rem 1.5rem}
.villa-fullbleed+.villa-section,.villa-dark-band+.villa-section{padding-top:3rem}
.villa-spec-grid{grid-template-columns:1fr 1fr;gap:2rem 1.6rem}
}
@media(max-width:600px){.villa-spec-grid{grid-template-columns:1fr;gap:1.8rem}}

/* ── FAQ ── */
#faq-section{background:var(--cream2);padding:8rem 3.5rem;border-top:1px solid var(--border-lt)}
.faq-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1.5fr;gap:6rem;align-items:start}
.faq-list{display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--border-lt)}
.faq-item:first-child{border-top:1px solid var(--border-lt)}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;text-align:left;cursor:pointer;padding:1.35rem 0;font-family:var(--playfair);font-size:1.25rem;font-weight:500;color:var(--text-lt);transition:color .2s}
.faq-question:hover{color:var(--ochre)}
.faq-cat{display:block;margin-bottom:1.6rem}
.faq-cat-label{font-family:var(--playfair);font-size:1.5rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-lt)}
.season-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
.season-card-tag{font-family:var(--barlow);font-size:.86rem;font-weight:500;color:rgba(26,22,18,0.75);display:block;margin-bottom:.6rem}
/* ── PROCESS V2: editorial split, no icons ── */
.process-section-v2{background:var(--cream);display:grid;grid-template-columns:1fr 1.2fr;min-height:640px;overflow:hidden}
.process-v2-media{position:relative;overflow:hidden}
.process-v2-media img{width:100%;height:100%;object-fit:cover;display:block}
.process-v2-text{padding:5rem 4.5rem;display:flex;flex-direction:column;justify-content:center}
.process-v2-lede{font-size:1.05rem;line-height:1.85;margin-top:.5rem}
#todo .process-v2-text .title-lt{font-size:clamp(2.4rem,4.6vw,3.6rem);letter-spacing:-.01em;line-height:1.1}
#todo .book-bar-lt{padding:4rem 3.5rem}
#todo .book-bar-lt-heading{font-size:2.1rem;font-weight:500}
.process-v2-lede strong{font-family:var(--playfair);font-weight:500;font-style:normal;color:var(--text-lt)}
@media(max-width:900px){
.process-section-v2{grid-template-columns:1fr}
.process-v2-media{height:320px}
.process-v2-text{padding:3rem 1.5rem}
}
.journey-strip{display:flex;align-items:flex-start}
.journey-stop{flex:1;text-align:center;padding:0 1.2rem}
.journey-photo{width:150px;height:150px;margin:0 auto 1.5rem;border-radius:50% 50% 10px 10px;overflow:hidden;box-shadow:0 14px 32px rgba(20,18,16,0.16)}
.journey-photo img{width:100%;height:100%;object-fit:cover}
.journey-tag{font-family:var(--barlow);font-size:.86rem;font-weight:500;color:rgba(26,22,18,0.75);display:block;margin-bottom:.6rem}
.journey-title{font-family:var(--playfair);font-size:1.28rem;font-weight:400;color:var(--text-lt);margin-bottom:.7rem}
.journey-desc{font-size:.86rem;color:rgba(26,22,18,0.85);line-height:1.7;font-weight:300;max-width:230px;margin:0 auto}
.journey-line{width:56px;height:1px;background:var(--border-lt);margin-top:75px;flex-shrink:0}
@media (max-width:880px){
.location-float-hero{height:420px!important}
.location-float-card{max-width:calc(100% - 2.4rem)!important;left:1.2rem!important;right:1.2rem!important;bottom:1.5rem!important;padding:1.6rem 1.6rem!important}
}
@media (max-width:800px){
.journey-strip{flex-direction:column;gap:2.8rem}
.journey-line{display:none}
.journey-desc{max-width:320px}
}
@media (max-width:800px){
.process-steps{flex-direction:column;gap:2.6rem}
.process-connector{display:none}
.process-desc{max-width:340px}
}
@media (max-width:880px){
.season-cards{grid-template-columns:1fr;gap:2.6rem}
}
.faq-icon{font-family:var(--barlow);font-size:1.4rem;color:var(--text-lt);flex-shrink:0;margin-left:1rem;transition:transform .25s;line-height:1}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
.faq-answer-inner{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s linear .32s}
.faq-answer p{padding-bottom:1.4rem;font-size:.92rem;color:rgba(26,22,18,0.9);line-height:1.82;font-weight:300}
.faq-item.open .faq-answer{grid-template-rows:1fr}
.faq-item.open .faq-answer-inner{visibility:visible;transition-delay:0s}

/* ── BOOK CTA ── */
#site-footer-cta{position:relative;overflow:hidden}
#site-footer-cta-bg{position:absolute;inset:0}
#site-footer-cta-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
#site-footer-cta-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(14,12,10,0.86) 0%,rgba(14,12,10,0.93) 60%,#0e0c0a 100%)}
.closing-cta{position:relative;z-index:2;max-width:580px;margin:0 auto;padding:7rem 3.5rem 3.5rem;text-align:center}
.footer-divider{position:relative;z-index:2;max-width:1200px;margin:0 auto;border-top:1px solid rgba(240,232,218,0.14)}
.book-platforms{display:flex;gap:1rem;justify-content:center;margin-top:2.5rem;flex-wrap:wrap}
.platform-btn{font-family:var(--barlow);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.95rem 2.4rem;text-decoration:none;border-radius:8px;transition:background-color .2s,color .2s,border-color .2s,opacity .2s,transform .2s}
.platform-btn:active{transform:scale(.97)}
.platform-airbnb{background:var(--ochre);color:var(--dark)}
.platform-airbnb:hover{background:var(--gold)}
.platform-booking{background:transparent;color:var(--text-dk);border:1px solid var(--border-dk)}
.platform-booking:hover{border-color:var(--ochre);color:var(--ochre)}
.book-rating-badge{display:flex;align-items:center;justify-content:center;gap:2rem;margin:1.6rem 0 2.2rem}
.book-badge-item{display:flex;flex-direction:column;align-items:center}
.book-badge-score{font-family:var(--barlow);font-size:2rem;font-weight:700;color:var(--brass);line-height:1}
.book-badge-label{font-family:var(--barlow);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dk);margin-top:.3rem}
.book-badge-div{width:1px;height:36px;background:var(--border-dk)}
.book-note{font-family:var(--barlow);font-size:.74rem;letter-spacing:.06em;color:var(--muted-dk);margin-top:1.6rem}

/* ── PAGE HERO ── */
.page-hero{position:relative;padding-top:calc(var(--nav-h) + 7rem);padding-bottom:5.5rem;overflow:hidden;min-height:400px}
.page-hero-bg{position:absolute;inset:0}
.page-hero-bg img{height:100%;object-position:center 30%;animation:heroKenBurns 26s ease-out forwards;will-change:transform}
@media (prefers-reduced-motion:reduce){.page-hero-bg img{animation:none}}
.page-hero-bg-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(14,12,10,0.45) 0%,rgba(14,12,10,0.72) 100%)}
.page-hero-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 3.5rem}
.page-hero-inner .title-dk{font-size:clamp(2.4rem,4.5vw,3.8rem);margin-bottom:1.2rem}
.page-hero-inner .ochre-rule{margin-top:1.4rem;margin-bottom:0;background:rgba(240,232,218,0.4)}

/* ── SUB-PAGE SECTIONS ── */
.section-cream{background:var(--cream);padding:8rem 3.5rem}
.section-dark{background:var(--dark);padding:8rem 3.5rem}
.section-dark2{background:var(--dark2);padding:8rem 3.5rem}
.max-w{max-width:1200px;margin:0 auto}
/* Round 252: gallery grid specifically runs wider and its tiles taller than the site's normal
   1200px content column - measured against Indo House's own justified gallery (~1400px container,
   ~520px row height at desktop) and Chitova's was noticeably smaller on both counts. */
.gallery-max-w{max-width:1400px}

/* Round 251: Location restructured into 3 chapters (The House / A Day Here / Getting Here
   & Around) instead of reading as a run of disconnected sections top to bottom. Each chapter
   opens with one of these - a plain, larger heading and a one-line sub, no eyebrow label,
   number or icon, just a bigger version of the same section-heading type already used
   throughout the site. */
.location-chapter-heading{text-align:center;max-width:780px;margin:0 auto;padding-bottom:1rem}
.location-chapter-heading h2{font-family:var(--playfair);font-weight:400;font-size:clamp(2.6rem,4.6vw,3.8rem);color:var(--text-lt);line-height:1.1;margin-bottom:.9rem}
.location-chapter-heading p{font-family:var(--barlow);font-size:1.05rem;color:rgba(26,22,18,0.72);max-width:560px;margin:0 auto}
@media(max-width:700px){.location-chapter-heading{padding-bottom:.5rem}}

/* ── AMENITIES PAGE ── */
.amenity-row{display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;align-items:center}
.where-youll-be-row{grid-template-columns:1.15fr 1fr;gap:5rem}
.reach-quote-row{max-width:900px;margin:2.8rem auto 0;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.find-us-row{display:grid;grid-template-columns:1fr 1.6fr;gap:4rem;align-items:start}
.faq-browse-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1.8fr;gap:7rem;align-items:start}
.faq-browse-sidebar{position:sticky;top:calc(var(--nav-h) + 2rem)}
.faq-page-section{background:var(--cream);padding:8rem 3.5rem;border-top:1px solid var(--border-lt)}
@media(max-width:900px){
.where-youll-be-row{grid-template-columns:1fr;gap:1.8rem}
.reach-quote-row{grid-template-columns:1fr;gap:1.8rem}
.find-us-row{grid-template-columns:1fr;gap:2.2rem}
.faq-browse-grid{grid-template-columns:1fr;gap:2.8rem}
.faq-browse-sidebar{position:static;top:auto}
.faq-page-section{padding:5rem 1.5rem}
}
.amenity-row.reverse{direction:rtl}
.amenity-row.reverse>*{direction:ltr}
.amenity-row-img{overflow:hidden;height:520px;position:relative;border-radius:var(--radius-lg)}
.amenity-row-img img{height:100%}
.amenity-row-tag{position:absolute;top:1.4rem;left:1.4rem;z-index:2;font-family:var(--barlow);font-size:.68rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,0.92);background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.28);padding:.42rem 1rem;border-radius:var(--radius-sm);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
/* Plain hairline-divided fact strip (replaces a circle-icon stat row - design-bar's
   named AI-tell - with the Indo House hairline-list convention instead) */
.fact-strip{display:flex;flex-wrap:wrap;margin-top:1.8rem}
.fact-strip .fact-item{padding:0 1.7rem;border-left:1px solid var(--border-lt);font-family:var(--barlow);font-size:.85rem;font-weight:500;color:var(--text-lt);letter-spacing:.005em;line-height:1.4}
.fact-strip .fact-item:first-child{padding-left:0;border-left:none}
@media(max-width:600px){.fact-strip{flex-direction:column;gap:.9rem}.fact-strip .fact-item{padding:0;border-left:none}}
.amenity-cat-title-dk{font-family:var(--playfair);font-size:1.85rem;color:var(--text-dk);margin-bottom:.7rem}
.amenity-cat-title-lt{font-family:var(--playfair);font-size:1.85rem;color:var(--text-lt);margin-bottom:.7rem}
.amenity-cat-desc-dk{font-size:.94rem;color:rgba(240,232,218,0.88);font-weight:300;line-height:1.82;margin-bottom:1.4rem}
.amenity-cat-desc-lt{font-size:.94rem;color:rgba(26,22,18,0.9);font-weight:300;line-height:1.82;margin-bottom:1.4rem}
.amenity-tags-dk{display:flex;flex-wrap:wrap;gap:.6rem}
.amenity-tag-dk{display:flex;align-items:center;gap:.55rem;padding:.65rem 1.1rem;background:var(--dark2);border:1px solid var(--border-dk);border-radius:var(--radius-md);font-family:var(--barlow);font-size:.78rem;letter-spacing:.04em;color:var(--text-dk)}
.amenity-tags-lt{display:flex;flex-wrap:wrap;gap:.6rem}
.amenity-tag-lt{display:flex;align-items:center;gap:.55rem;padding:.65rem 1.1rem;background:#fff;border:1px solid var(--border-lt);border-radius:var(--radius-md);font-family:var(--barlow);font-size:.78rem;letter-spacing:.04em;color:var(--text-lt)}
.amenity-tag-dk .dot{width:5px;height:5px;border-radius:50%;background:var(--muted-dk);flex-shrink:0}
.amenity-tag-lt .dot{width:5px;height:5px;border-radius:50%;background:var(--muted-lt);flex-shrink:0}
/* review pull-quote under kitchen */
.amenity-pull-quote{margin-top:2rem;padding-top:1.8rem;border-top:1px solid var(--border-lt)}
/* Round 267: this was background:var(--cream2) on pages that are themselves var(--cream) -
   the two are 7 units apart in every RGB channel, so the "card" only ever showed up as a
   near-invisible hairline border - fixed by giving it real background contrast.
   Round 267c: teal + a left accent stripe didn't land. Round 267d: solid ochre read as too
   loud/saturated next to black and teal - all three attempts were reaching for a strong,
   fully-saturated color when the actual ask was just enough contrast to read as a card.
   Landed on --border-lt, the same soft warm taupe already used sitewide for borders/dividers -
   it's a full tint step off --cream (not 7 units like the old bug) so it reads clearly as its
   own surface, but it's a neutral, not a "color," so it stays quiet next to everything else. */
.pull-quote-elevated{position:relative;margin-top:2.2rem;padding:1.9rem 2.1rem;background:var(--border-lt);border:none;border-radius:var(--radius-lg);overflow:visible;box-shadow:0 12px 30px rgba(20,18,16,0.1)}
.amenity-pull-quote p{font-family:var(--barlow);font-size:1.05rem;font-style:normal;color:rgba(26,22,18,0.9);line-height:1.7}
.amenity-pull-quote cite{font-family:var(--playfair);font-size:.95rem;font-weight:400;letter-spacing:.01em;text-transform:none;color:var(--muted-lt);display:block;margin-top:.6rem;font-style:normal}
.amenity-pull-quote.pull-quote-elevated cite{color:var(--ochre)}
/* lookbook 2-col image grid - labels as overlay */
.amenity-lookbook{display:grid;grid-template-columns:1.25fr 1fr;gap:1.5rem;margin-bottom:3rem}
.amenity-lookbook-item{position:relative;overflow:hidden;border-radius:var(--radius-lg);transition:box-shadow .3s,transform .3s}
@media(hover:hover) and (pointer:fine){.amenity-lookbook-item:hover{box-shadow:0 16px 40px rgba(26,22,18,0.18);transform:translateY(-3px)}
.amenity-lookbook-item:hover img{transform:scale(1.05)}}
.amenity-lookbook-item img{height:520px;transition:transform .6s ease;display:block;width:100%}

.amenity-lookbook-label{position:absolute;bottom:0;left:0;right:0;padding:2.5rem 2.2rem;background:linear-gradient(to top,rgba(14,12,10,0.92) 0%,rgba(14,12,10,0.4) 55%,transparent 100%)}
.amenity-lookbook-title{font-family:var(--playfair);font-size:1.55rem;color:var(--text-dk);font-weight:400;margin-bottom:.6rem;font-style:normal}
.amenity-lookbook-desc{font-size:.86rem;color:rgba(240,232,218,0.88);font-weight:300;line-height:1.65;margin-bottom:1rem}
.amenity-lookbook-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.amenity-lookbook-tags .amenity-tag-dk{background:rgba(240,232,218,0.1);border-color:rgba(240,232,218,0.2);font-size:.72rem;padding:.4rem .85rem}
/* Round 253: was a 1-tall + 3-stacked bento grid ("The Falls" spanning both rows) - client
   wasn't sure about the one tall tile, and there's no real content reason for it (all four are
   equally-weighted nearby attractions, not a lead item), so it read as an arbitrary shape rather
   than a deliberate one. Even 4-up grid now - simpler and consistent with the rest of the page. */
.reach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;height:300px}
.reach-tile{position:relative;display:block;border-radius:var(--radius-md);overflow:hidden;height:100%;text-decoration:none;cursor:pointer}
.reach-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
@media(hover:hover) and (pointer:fine){.reach-tile:hover img{transform:scale(1.06)}}
.reach-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(14,12,10,0.75) 0%,rgba(14,12,10,0.1) 55%,transparent 100%)}
.reach-tile-label{position:absolute;bottom:1.1rem;left:1.2rem;right:1.2rem;z-index:2;font-family:var(--barlow);font-size:.82rem;font-weight:600;letter-spacing:.05em;color:var(--text-dk)}
@media(max-width:880px){.reach-grid{grid-template-columns:1fr 1fr;height:auto}.reach-tile{height:200px}}
@media(max-width:520px){.reach-grid{grid-template-columns:1fr}}
/* Plain label/value pairs with a hairline rule (replaces the circle-icon device -
   same fix as .fact-strip above, applied to the distances list) */
.distance-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1.4rem;margin-bottom:0}
.distance-item{padding:0 0 1.1rem;border-bottom:1px solid var(--border-lt);margin-bottom:1.1rem}
.distance-label{display:block;font-family:var(--barlow);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-lt);margin-bottom:.35rem}
.distance-value{display:block;font-family:var(--barlow);font-size:.98rem;font-weight:600;color:var(--text-lt)}
@media(max-width:600px){.distance-grid{grid-template-columns:1fr}}
.bedroom-montage{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-bottom:3rem}
.montage-photo{border-radius:var(--radius-md);overflow:hidden;height:300px}
.montage-photo img{width:100%;height:100%;object-fit:cover}
.bed-text-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.bedroom-dark-card{background:var(--dark);border-radius:var(--radius-lg);padding:2.4rem 2.2rem}
.bedroom-dark-row{display:flex;align-items:baseline;gap:1.1rem;padding:.9rem 0;border-bottom:1px solid var(--border-dk)}
.bedroom-dark-row:last-of-type{border-bottom:none}
.bedroom-dark-num{font-family:var(--playfair);font-size:1.3rem;font-weight:400;font-style:normal;color:var(--gold);width:2.2rem;flex-shrink:0}
.bedroom-dark-name{font-family:var(--barlow);font-size:.82rem;letter-spacing:.05em;color:var(--text-dk);flex:1}
.bedroom-dark-beds{font-family:var(--barlow);font-size:.78rem;color:var(--muted-dk)}
.bedroom-dark-total{margin-top:1.4rem;background:var(--ochre);border-radius:var(--radius-sm);padding:.9rem 1.2rem;display:flex;justify-content:space-between;align-items:center}
.bedroom-dark-total span{font-family:var(--barlow);font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--dark)}
.poolside-cards{display:flex;flex-direction:column;gap:1.4rem}
.poolside-card{position:relative;height:250px;border-radius:var(--radius-lg);overflow:hidden}
.poolside-card img{width:100%;height:100%;object-fit:cover}
@media(max-width:880px){.bedroom-montage{grid-template-columns:1fr 1fr}.bed-text-split{grid-template-columns:1fr}}
@media(max-width:560px){.bedroom-montage{grid-template-columns:1fr}}
.evening-photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-bottom:4rem}
.bedroom-dark-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 3rem}
@media(max-width:700px){.evening-photo-grid{grid-template-columns:1fr}.evening-photo-grid .montage-photo{height:320px !important}.bedroom-dark-grid{grid-template-columns:1fr}.bedroom-dark-row{border-bottom:1px solid var(--border-dk) !important}.bedroom-dark-row:last-child{border-bottom:none !important}}
.journey-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:880px){.journey-panels{grid-template-columns:1fr}.journey-panels .feature-panel{height:340px !important}}
/* Getting here trio - text above, plain photo below, no overlay/gradient (Indo House
   "Getting Here" concierge pattern - avoids repeating the lookbook/reach-grid
   gradient-overlay device a third time on the same page) */
.transfer-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}
/* Round 248: the middle column used to be staggered lower with a taller photo to break up the
   even rhythm - the client's screenshot showed this reading as misaligned/broken rather than
   intentional, so all three columns now sit on the same top edge with matching photo heights. */
.transfer-item h4{font-family:var(--playfair);font-weight:500;font-size:1.4rem;color:var(--text-lt);margin-bottom:.6rem}
.transfer-item p{font-family:var(--barlow);font-size:.94rem;line-height:1.7;color:rgba(26,22,18,0.82);margin-bottom:1.6rem}
.transfer-photo{border-radius:var(--radius-md);overflow:hidden;height:230px}
.transfer-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
@media(hover:hover) and (pointer:fine){.transfer-photo:hover img{transform:scale(1.06)}}
@media(max-width:880px){.transfer-trio{grid-template-columns:1fr;gap:2.4rem}.transfer-photo{height:260px}}
/* Practical-info trio - plain typographic columns, no icons/circles (replaces the
   circle-icon 3-up grid, which is design-bar's named AI-tell pattern) */
.practical-spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem}
.practical-spec-grid>div{padding:0}
.practical-spec-grid h5{font-family:var(--playfair);font-weight:500;font-size:1.15rem;color:var(--text-lt);margin-bottom:.9rem;padding-bottom:.8rem;border-bottom:1px solid var(--border-lt)}
.practical-spec-grid p{font-family:var(--barlow);font-size:.94rem;line-height:1.75;color:rgba(26,22,18,0.85)}
@media(max-width:700px){.practical-spec-grid{grid-template-columns:1fr;gap:2rem}}
/* full-bleed visual break */
.amenity-break{position:relative;height:52vh;min-height:360px;overflow:hidden}
.amenity-break img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:center}
.amenity-break-overlay{position:absolute;inset:0;background:rgba(14,12,10,0.42)}
.amenity-break-content{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 2rem}
.amenity-break-text{font-family:var(--playfair);font-size:clamp(1.6rem,3.5vw,2.8rem);font-style:normal;color:var(--text-dk);max-width:700px;line-height:1.3}
/* practical tag cloud */
.amenity-practical{background:var(--cream);padding:9rem 3.5rem;border-top:1px solid var(--border-lt)}
.amenity-practical-inner{max-width:1200px;margin:0 auto}
.amenity-practical-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0}
.amenity-practical-tag{font-family:var(--barlow);font-size:.86rem;font-weight:500;letter-spacing:.08em;color:var(--text-lt);border:1px solid var(--border-lt);border-radius:var(--radius-xl);padding:.85rem 1.8rem;background:#fff;transition:border-color .2s,color .2s}
.amenity-practical-tag:hover{border-color:var(--ochre);color:var(--ochre)}

/* ── GALLERY - Indo House pill tabs ── */
/* ── GALLERY HERO (mimicking Indo's gallery page) ── */
.gallery-hero{max-width:1400px;margin:0 auto;padding:calc(var(--nav-h) + 3rem) 3.5rem 5rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;background:var(--cream)}
.gallery-hero.wide-photos{grid-template-columns:1.6fr 1fr}
.gallery-hero-text h1{font-family:var(--playfair);font-weight:500;color:var(--text-lt);font-size:clamp(2.4rem,4.5vw,3.6rem);line-height:1.1;margin-bottom:1.4rem}
.gallery-hero-text p{font-family:var(--barlow);font-size:1.02rem;line-height:1.7;color:rgba(26,22,18,0.82);margin-bottom:2rem;max-width:440px}
.gallery-hero-ctas{display:flex;gap:1rem;flex-wrap:wrap}
.gallery-hero-collage{position:relative;height:520px}
.gallery-hero-collage img{position:absolute;border-radius:var(--radius-md);box-shadow:0 20px 50px rgba(20,18,16,0.18);object-fit:cover}
.ghc-1{width:52%;height:72%;top:0;left:0;z-index:1}
.ghc-2{width:46%;height:58%;top:8%;right:0;z-index:2}
.ghc-3{width:34%;height:38%;bottom:0;left:36%;z-index:3}

/* ── MINI-HERO PHOTO ROW (mimicking Indo's FAQ/Contact heroes — reuses .gallery-hero grid + text styles) ── */
.mini-hero-photos{display:flex;gap:14px;height:460px;min-width:0}
.mini-hero-photos img{border-radius:var(--radius-md);object-fit:cover;height:100%;min-width:0;box-shadow:0 20px 50px rgba(20,18,16,0.16)}
.mini-hero-photos.trio img:nth-child(1){flex:0.8}
.mini-hero-photos.trio img:nth-child(2){flex:1.6}
.mini-hero-photos.trio img:nth-child(3){flex:0.8}
.mini-hero-photos.single img{flex:1;width:100%}
@media(max-width:900px){
.mini-hero-photos{height:280px}
}

/* ── SUB-NAV (permanently fixed under the header — not scroll-triggered, so it can never overlap it)
   Originally Gallery-only; round 253 reused it verbatim as an in-page chapter/category jump bar on
   Location (The House / A Day Here / Getting Here & Around) and Todo (The Falls / Adventure /
   Wildlife / Plan Your Visit) — same pill, same brass active state, same scrollToGalleryPanel()
   function, just pointed at each page's own section ids. No new component invented. ── */
.gallery-subnav{position:fixed;top:calc(var(--nav-h) + 5px);left:50%;right:auto;margin:0;transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);height:60px;z-index:90;background:#fff;border-radius:16px;box-shadow:0 10px 26px rgba(20,18,16,0.09);display:flex;align-items:center;justify-content:center;padding:0 .6rem;transition:top .3s ease,left .3s ease,right .3s ease,transform .3s ease,max-width .3s ease,width .3s ease,border-radius .3s ease,box-shadow .3s ease}
body.nav-scrolled .gallery-subnav{top:calc(var(--nav-bar-h) + 5px)}
.gallery-subnav-links{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:center}
.gallery-subnav a{font-family:var(--barlow);font-size:.88rem;color:rgba(26,22,18,0.7);text-decoration:none;padding:.55rem 1.2rem;border-radius:10px;transition:background .2s,color .2s;white-space:nowrap;cursor:pointer}
.gallery-subnav a:hover{background:rgba(0,0,0,0.04)}
.gallery-subnav a.active{background:var(--brass);color:var(--dark);font-weight:500}
@media(max-width:640px){
.gallery-subnav{top:calc(var(--nav-h) + 6px);left:20px;right:20px;transform:none;width:auto;max-width:none;height:52px;padding:0 1rem;overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,transparent 0,black 16px,black calc(100% - 20px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black 16px,black calc(100% - 20px),transparent 100%)}
.gallery-subnav::-webkit-scrollbar{display:none}
.gallery-subnav-links{flex-wrap:nowrap;justify-content:flex-start}
.gallery-subnav a{padding:.45rem .9rem;font-size:.8rem;flex-shrink:0}
}
@media(max-width:900px){
.gallery-hero{grid-template-columns:1fr;padding:calc(var(--nav-h) + 2rem) 1.5rem 3rem;gap:2rem}
.gallery-hero.wide-photos{grid-template-columns:1fr}
.gallery-hero-collage{height:360px;order:-1}
}





#gallery .gallery-hero{padding-top:calc(var(--nav-h) + 5px + 60px + 3rem)}
.gallery-panel{scroll-margin-top:calc(var(--nav-h) + 5px + 60px + 1.5rem);padding-top:1rem}
/* Round 253: same fixed-subnav clearance, reused on Location and Todo now that both carry a
   .gallery-subnav chapter bar. .chapter-anchor is the scroll target class for both pages' sections. */
#location .gallery-hero,#todo .gallery-hero{padding-top:calc(var(--nav-h) + 5px + 60px + 3rem)}
.chapter-anchor{scroll-margin-top:calc(var(--nav-h) + 5px + 60px + 1.5rem)}
@media(max-width:900px){
#gallery .gallery-hero{padding-top:calc(var(--nav-h) + 6px + 52px + 2rem)}
.gallery-panel{scroll-margin-top:calc(var(--nav-h) + 6px + 52px + 1rem)}
#location .gallery-hero,#todo .gallery-hero{padding-top:calc(var(--nav-h) + 6px + 52px + 2rem)}
.chapter-anchor{scroll-margin-top:calc(var(--nav-h) + 6px + 52px + 1rem)}
}
.gallery-group-title{font-family:var(--playfair);font-size:2.3rem;color:var(--text-lt);margin-bottom:.6rem;font-weight:400;text-align:center}
.gallery-group-desc{font-size:.95rem;color:rgba(26,22,18,0.85);font-weight:300;line-height:1.72;margin-bottom:2rem;max-width:600px;text-align:center;margin-left:auto;margin-right:auto}
.full-gallery-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.img-reveal{position:relative;overflow:hidden;cursor:pointer}
.img-reveal::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.15);opacity:0;transition:opacity .25s}
.img-reveal::before{content:'+';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);width:44px;height:44px;border-radius:50%;border:1.5px solid #fff;color:#fff;font-size:1.3rem;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s,transform .25s;z-index:2}
.img-reveal:hover::after,.img-reveal:hover::before{opacity:1}
.img-reveal:hover::before{transform:translate(-50%,-50%) scale(1)}
.full-gallery-grid>div{overflow:hidden;height:460px;cursor:pointer;border-radius:var(--radius-md)}
.full-gallery-grid>div img{width:100%;height:100%;display:block;object-fit:cover}

/* ── LIGHTBOX ── */
.lightbox{position:fixed;inset:0;z-index:2000;background:rgba(10,8,6,0.97);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.lightbox.open{opacity:1;pointer-events:all}
.lightbox-img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:var(--radius-md);width:auto;height:auto;opacity:1;transition:opacity .2s ease}
.lightbox-img.fading{opacity:0}
.lightbox-close{position:absolute;top:1.5rem;right:1.5rem;background:none;border:none;color:var(--text-dk);font-size:1.8rem;cursor:pointer;font-family:var(--barlow);opacity:.65;transition:opacity .2s;line-height:1}
.lightbox-close:hover{opacity:1}
.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(240,232,218,0.1);border:1px solid rgba(240,232,218,0.18);color:var(--text-dk);font-size:1.3rem;cursor:pointer;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;transition:background .2s;font-family:var(--barlow)}
.lightbox-prev{left:1.5rem}
.lightbox-next{right:1.5rem}
.lightbox-prev:hover,.lightbox-next:hover{background:rgba(240,232,218,0.2)}

/* ── LOCATION ── */
.location-aerial{position:relative;height:70vh;min-height:500px;overflow:hidden}
.location-aerial img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:center}
.location-aerial-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(14,12,10,0.2) 0%,rgba(14,12,10,0.65) 100%)}
.location-aerial-stats{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:3rem 3.5rem;max-width:1200px;margin:0 auto}
.location-stat-row{display:flex;gap:0;border-top:1px solid rgba(240,232,218,0.15);padding-top:2rem}
.location-stat{display:flex;flex-direction:column;flex:1;padding-right:2rem;border-right:1px solid rgba(240,232,218,0.1)}
.location-stat:last-child{border-right:none}
.location-stat-time{font-family:var(--barlow);font-size:1.6rem;font-weight:600;color:var(--gold);line-height:1;letter-spacing:-.01em}
.location-stat-place{font-family:var(--barlow);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(240,232,218,0.88);margin-top:.4rem}
.map-embed{height:520px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-dk)}

/* ── CONTACT - clean Indo House style ── */
#contact-section{background:var(--cream);padding:8rem 3.5rem}
.contact-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:6rem;align-items:start}
.contact-img{overflow:hidden;height:520px;margin-bottom:2.5rem;border-radius:var(--radius-lg)}
.contact-img img{height:100%}
.contact-book-priority{padding:1.8rem 0;border-top:1px solid var(--border-lt);border-bottom:1px solid var(--border-lt);margin:2rem 0}
.contact-info{display:flex;flex-direction:column;gap:1.2rem}
.contact-info-item{display:flex;flex-direction:column;gap:.2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--border-lt)}
.contact-info-item:last-child{border-bottom:none}
.contact-info-label{font-family:var(--barlow);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-lt)}
.contact-info-value{font-family:var(--barlow);font-size:.97rem;color:var(--text-lt);font-weight:300}
.contact-info-value a{color:var(--text-lt);text-decoration:underline;text-underline-offset:3px}
.contact-form-wrap{background:#fff;border:1px solid rgba(20,18,16,0.08);box-shadow:0 20px 50px rgba(20,18,16,0.08);border-radius:var(--radius-sm);padding:3.8rem}
.contact-form-title{font-family:var(--playfair);font-size:2.4rem;color:var(--text-lt);margin-bottom:.7rem;line-height:1.15}
.contact-form-sub{font-size:.91rem;color:rgba(26,22,18,0.75);margin-bottom:2.5rem;line-height:1.75}
.form-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.3rem}
.form-label{font-family:var(--barlow);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-lt)}
.form-input{background:var(--cream2);border:1px solid var(--border-lt);border-radius:var(--radius-sm);padding:.88rem 1.1rem;font-family:var(--barlow);font-size:.94rem;font-weight:300;color:var(--text-lt);width:100%;min-width:0;transition:border-color .2s;outline:none}
input[type="date"].form-input::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer}
.form-input::placeholder{color:var(--muted-lt)}
.form-input:focus{border-color:var(--ochre)}
/* Round 267: iOS Safari doesn't paint a "mm/dd/yyyy" hint into an empty date input the way
   desktop browsers do - it just shows a blank box, which reads as broken. This overlays our
   own styled hint text that hides itself once a date is picked, via .has-value on the wrapper.
   Scoped to WebKit touch (iOS) only via @supports below - desktop Chrome/Firefox/Edge already
   draw their own native hint, so showing ours everywhere would just double up the text. */
.date-field{position:relative}
.date-field-hint{display:none;position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);font-family:var(--barlow);font-size:.94rem;font-weight:300;color:var(--muted-lt);pointer-events:none;transition:opacity .15s}
.date-field.has-value .date-field-hint{opacity:0}
@supports (-webkit-touch-callout:none){
  .date-field-hint{display:block}
}
#faq-search{transition:border-color .2s}
#faq-search:focus{border-color:var(--ochre) !important}
.faq-quicklink{transition:color .2s}
.faq-quicklink:hover{color:var(--gold) !important}
textarea.form-input{resize:vertical;min-height:130px}
/* Round 267: 1fr alone still lets a native date-input's intrinsic min-width push the track
   wider than its share, even with min-width:0 on the child - minmax(0,1fr) caps the track
   itself so the check-in/check-out inputs can't force the row past the form's edge. */
.form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
.form-row>.form-group{min-width:0}
.btn-submit{width:100%;font-family:var(--barlow);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dark);background:var(--ochre);border:none;border-radius:8px;padding:1.1rem;cursor:pointer;transition:background .2s;margin-top:.5rem}
.btn-submit:hover{background:var(--gold)}

/* ── SHARED BOOK ── */
.shared-book{position:relative;text-align:center;padding:7rem 3.5rem;overflow:hidden}
.shared-book-bg{position:absolute;inset:0}
.book-bar{background:var(--dark);padding:2.6rem 3.5rem;display:flex;align-items:center;justify-content:center;gap:2.5rem;flex-wrap:wrap;text-align:center}
.book-bar-lt{background:var(--cream2);padding:2.8rem 3.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;border-top:1px solid var(--border-lt)}
.book-bar-lt-text{display:flex;flex-direction:column;gap:.4rem}
.book-bar-lt-heading{font-family:var(--playfair);font-weight:400;font-size:1.6rem;color:var(--text-lt)}
.book-bar-lt-sub{font-family:var(--barlow);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-lt)}
.book-bar-lt .book-platforms{margin:0}
.platform-booking-lt{background:transparent;color:var(--text-lt);border:1.5px solid rgba(26,22,18,0.45)}
@media (max-width:700px){
.book-bar-lt{justify-content:center;text-align:center}
.book-bar-lt-text{align-items:center}
}
.book-bar span{font-family:var(--playfair);font-size:1.3rem;color:var(--text-dk);font-weight:400}
.book-bar .book-platforms{margin:0}
.shared-book-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.shared-book-overlay{position:absolute;inset:0;background:rgba(14,12,10,0.84)}
.shared-book .book-inner{position:relative;z-index:2;max-width:560px;margin:0 auto}
.shared-book .book-inner::before{content:'';display:block;width:3rem;height:2px;background:var(--brass);margin:0 auto 2rem}

/* ── FOOTER ── */
footer{background:#0e0c0a;padding:3rem 3.5rem;border-top:1px solid var(--border-dk)}
#site-footer-cta{background:none;border-top:none;padding:0}
#site-footer-cta .footer-inner{position:relative;z-index:2;padding:3rem 3.5rem 0}
#site-footer-cta .footer-bottom{position:relative;z-index:2;padding:0 3.5rem 2.5rem}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.8fr 1fr 1fr 1.2fr;gap:3rem;align-items:start}
.footer-logo{font-family:var(--playfair);font-size:1.15rem;color:var(--text-dk);margin-bottom:.85rem}
.footer-logo span{color:var(--ochre)}
.footer-tagline{font-size:.87rem;color:var(--muted-dk);line-height:1.72;margin-bottom:1.2rem;font-weight:300}
.footer-address{font-family:var(--barlow);font-size:.7rem;letter-spacing:.08em;color:var(--muted-dk);line-height:1.9}
.footer-col-title{font-family:var(--barlow);font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dk);margin-bottom:1.1rem}
.footer-links{display:flex;flex-direction:column;gap:.65rem}
.footer-links a{font-family:var(--barlow);font-size:.76rem;letter-spacing:.06em;color:var(--muted-dk);text-decoration:none;transition:color .2s;cursor:pointer}
.footer-links a:hover{color:var(--gold)}
.footer-contact-col{display:flex;flex-direction:column;gap:.65rem}
.footer-contact-col a{font-family:var(--barlow);font-size:.76rem;letter-spacing:.06em;color:var(--text-dk);text-decoration:none}
.footer-bottom{max-width:1200px;margin:.8rem auto 0;padding-top:1.5rem;border-top:1px solid var(--border-dk);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}
.footer-copy{font-family:var(--barlow);font-size:.66rem;letter-spacing:.08em;color:var(--muted-dk)}

/* ── SCROLL REVEAL ── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
/* editorial image reveal - slower, scale-led, for gallery/photo tiles */
.img-reveal{opacity:0;transform:scale(1.06);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.img-reveal.visible{opacity:1;transform:scale(1)}
/* Same scroll-entrance fade as .img-reveal, without the gallery lightbox's hover cursor/+-icon
   affordance - for decorative/non-clickable photos on Location and Todo (round 246). */
.photo-reveal{opacity:0;transform:scale(1.05);transition:opacity .9s cubic-bezier(.23,1,.32,1),transform .95s cubic-bezier(.23,1,.32,1)}
.photo-reveal.visible{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){.img-reveal{transition:none;opacity:1;transform:none}}
/* ── premium pass ── */
::selection{background:var(--ochre);color:var(--dark)}
.hero-title .hline{display:block;overflow:hidden}
.hero-title .hline span{display:block;transform:translateY(112%);transition:transform .95s cubic-bezier(.16,1,.3,1)}
.hero-title .hline:nth-child(2) span{transition-delay:.13s}
.hero-title .hline:nth-child(3) span{transition-delay:.26s}
.hero-title em{font-style:normal}
body.intro-done .hero-title .hline span{transform:none}
.hero-sub,.hero-ctas,.hero-stats{opacity:0;transition:opacity .8s ease .55s,transform .8s ease .55s}
.hero-sub,.hero-ctas{transform:translateY(14px)}
body.intro-done .hero-sub,body.intro-done .hero-ctas{opacity:1;transform:none}
body.intro-done .hero-stats{opacity:1}
.full-gallery-grid>div{position:relative}
.full-gallery-grid>div img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){
.full-gallery-grid>div::after{content:attr(data-cap);position:absolute;left:0;right:0;bottom:0;padding:1.8rem 1.2rem .95rem;background:linear-gradient(to top,rgba(14,12,10,0.78),transparent);color:var(--text-dk);font-family:var(--barlow);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;pointer-events:none}
.full-gallery-grid>div:hover::after{opacity:1;transform:none}
@media(hover:hover) and (pointer:fine){.full-gallery-grid>div:hover img{transform:scale(1.05)}}
}
@media (prefers-reduced-motion:reduce){
.hero-title .hline span{transform:none;transition:none}
.hero-sub,.hero-ctas,.hero-stats{opacity:1;transform:none;transition:none}
}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}
.reveal-delay-4{transition-delay:.32s}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  /* NAV - near edge-to-edge on mobile (was a floating pill with a big 20px inset).
     Round 265: pulled the side inset in further (8px read as too much of a gap still) -
     now it's basically touching the edges, with just enough inset left that the
     rounded corners still show as a curve against the page behind it. */
  nav{top:0;left:3px;right:3px;max-width:calc(100% - 6px);border-radius:var(--radius-md);padding:0 1.2rem;box-shadow:0 4px 20px rgba(20,18,16,0.1)}
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  .nav-hamburger span{width:27px}
  .nav-book{padding:.55rem 1.15rem;font-size:.82rem}
  /* HERO STATS */
  .hero-stats{gap:1.5rem;bottom:1.8rem}
  .hero-stat-divider{display:none}
  /* HERO */
  .hero-title{font-size:clamp(2.2rem,7vw,3.2rem)}
  .hero-sub{font-size:.92rem;max-width:90vw}
  .hero-ctas{flex-direction:column;align-items:center;gap:.65rem;width:100%}
  .hero-ctas .btn-primary,.hero-ctas .btn-outline-dk{width:min(320px,80vw);text-align:center;padding:.95rem 1.5rem}
  .hero-content{padding:0 1.5rem}
  /* ABOUT */
  #about{padding:0}
  .about-split{grid-template-columns:1fr;min-height:auto}
  .about-split-img{padding:2.5rem 1.5rem 3.5rem;height:auto}
  .about-photo-main{height:340px}
  .about-split-text{padding:3.5rem 1.5rem}
  .about-ctas{flex-direction:column;gap:.65rem}
  .about-ctas .btn-primary,.about-ctas .btn-outline-dk,.about-ctas .btn-outline-lt{text-align:center;padding:.9rem 1.5rem}
  .about-img-full{height:260px}
  .about-img-label{flex-direction:column;align-items:flex-start;gap:1rem}
  .about-view-more{margin-left:0}
  /* STATEMENT */
  .statement-section{height:50vh;min-height:320px}
  .statement-mark{font-size:3.5rem}
  .statement-quote{font-size:clamp(1.3rem,5vw,1.8rem)}
  .statement-attr{font-size:.6rem;letter-spacing:.14em}
  /* AMENITIES PREVIEW */
  #amenities-preview{padding:5rem 1.5rem}
  .amenities-top{grid-template-columns:1fr;gap:1.5rem;border-bottom:none;margin-bottom:2rem;padding-bottom:0}
  .feature-panels{grid-template-columns:1fr;gap:1rem}
  .feature-panel{height:320px}
  .amenity-pills{gap:.5rem}
  .amenity-pill{font-size:.72rem;padding:.45rem .9rem}
  /* REVIEWS */
  #reviews-section{padding:4rem 0}
  .reviews-inner{padding:0 1.5rem}
  .reviews-header{grid-template-columns:1fr;gap:1.5rem}
  .reviews-score-num{font-size:4rem}
  .reviews-arrow{width:38px;height:38px;font-size:1.2rem}
  .reviews-arrow-prev{left:-10px}
  .reviews-arrow-next{right:-10px}
  .review-quote-card{padding:2.2rem 1.6rem}
  /* THINGS TO DO */
  #experience-section{padding:5rem 1.5rem}
  .experience-intro{margin-bottom:3rem}
  .todo-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .todo-card.featured{grid-row:auto}
  .todo-card.featured .todo-img{height:240px;min-height:unset}
  /* FAQ */
  #faq-section{padding:5rem 1.5rem}
  .faq-inner{grid-template-columns:1fr;gap:2.5rem}
  .faq-question{font-size:1.08rem}
  /* BOOK CTA */
  #book-section{padding:5rem 1.5rem}
  .book-rating-badge{gap:1.2rem}
  .book-badge-score{font-size:1.6rem}
  .book-platforms{flex-direction:column;align-items:center}
  .book-platforms .platform-btn{width:min(320px,80vw);text-align:center}
  /* CONTACT */
  #contact-section{padding:5rem 1.5rem}
  .contact-inner{grid-template-columns:1fr;gap:2.5rem}
  .contact-img{height:260px;margin-bottom:1.5rem}
  .contact-form-wrap{padding:2.2rem}
  .form-row{grid-template-columns:1fr}
  .contact-book-priority .btn-primary,.contact-book-priority .btn-outline-lt{display:block;text-align:center;width:100%}
  /* SUB-PAGE SECTIONS */
  .section-cream,.section-dark,.section-dark2{padding:5rem 1.5rem}
  .max-w{padding:0}
  .page-hero{padding-top:calc(var(--nav-h) + 4.5rem);padding-bottom:4.5rem}
  .page-hero-inner{padding:0 1.5rem}
  /* AMENITIES PAGE */
  .amenity-row{grid-template-columns:1fr;gap:1.8rem}
  .amenity-row.reverse{direction:ltr}
  .amenity-row-img{height:280px !important}
  .amenity-lookbook{grid-template-columns:1fr;gap:2rem}
  .amenity-lookbook-item img{height:360px !important}
  .amenity-practical-inner>div{grid-template-columns:1fr;gap:2.5rem}
  .amenity-practical-grid{gap:.6rem}
  .amenity-practical-tag{font-size:.76rem;padding:.6rem 1.1rem}
  .amenity-break{height:38vh;min-height:240px}
  .amenity-break-text{font-size:clamp(1.2rem,4.5vw,1.8rem)}
  .amenity-pull-quote p{font-size:.95rem}
  .amenity-practical{padding:5rem 1.5rem}
  /* GALLERY */

  .full-gallery-grid{gap:8px}
  .full-gallery-grid>div{height:300px}
  .gallery-group-title{font-size:1.3rem}
  /* LIGHTBOX */
  .lightbox-img{max-width:98vw;max-height:85vh}
  .lightbox-prev{left:.4rem;width:38px;height:38px}
  .lightbox-next{right:.4rem;width:38px;height:38px}
  .lightbox-close{top:1rem;right:1rem}
  /* LOCATION */
  .location-aerial{height:60vh;min-height:400px}
  .location-stat-row{flex-wrap:wrap;gap:0;padding-top:1.5rem}
  .location-stat{border-right:none;padding-right:0;flex:0 0 50%;padding-bottom:1.2rem}
  .location-stat-time{font-size:1.3rem}
  .map-embed{height:300px;border-radius:var(--radius-md)}
  /* SHARED BOOK */
  .shared-book{padding:5rem 1.5rem}
  .closing-cta{padding:5rem 1.5rem 2.5rem}
  .shared-book .book-platforms{flex-direction:column;align-items:center}
  .shared-book .platform-btn{width:min(320px,80vw);text-align:center}
  /* FOOTER */
  footer{padding:3rem 1.5rem}
  #site-footer-cta .footer-inner{padding:3rem 1.5rem 0}
  #site-footer-cta .footer-bottom{padding:0 1.5rem 2.5rem}
  .footer-inner{grid-template-columns:1fr 1fr;gap:2rem}
}
@media(max-width:600px){
  /* NAV */
  .nav-logo{font-size:clamp(1.05rem,5.2vw,1.4rem)}
  /* HERO */
  .hero-title{font-size:clamp(2rem,9vw,2.8rem)}
  .hero-stats{gap:.6rem;padding:0 .6rem;bottom:1.4rem}
  .hero-stat-item{gap:.35rem}
  .hero-stat-circle{width:22px;height:22px}
  .hero-stat-circle svg{width:10px;height:10px}
  .hero-stat-text{font-size:.52rem;letter-spacing:.02em}
  /* REVIEWS */
  .reviews-score-block{gap:.8rem}
  .reviews-score-num{font-size:3.2rem}
  /* FOOTER */
  .footer-inner{grid-template-columns:1fr}
  .footer-inner>div:not(:first-child){padding-top:1.5rem;border-top:1px solid var(--border-dk)}
  /* BOOK */
  .book-rating-badge{flex-direction:column;gap:1rem}
  .book-badge-div{display:none}
  /* ABOUT */
  .about-photo-main{height:260px}
  /* LOCATION */
  .location-aerial{height:55vh;min-height:360px}
  .location-stat{flex:0 0 100%;border-bottom:1px solid rgba(240,232,218,0.08);padding-bottom:1rem}
  .location-stat:last-child{border-bottom:none}
  /* GALLERY - stack full-width single column on phones to avoid odd narrow slivers */
  .full-gallery-grid{flex-direction:column}
  .full-gallery-grid>div{height:240px;width:100%}
  .full-gallery-grid>div img{width:100%;height:100%;object-fit:cover}
  /* CONTACT */
  .contact-form-wrap{padding:1.8rem 1.4rem}
  .contact-form-title{font-size:1.8rem}
  /* MISC */
  .page-hero{padding-top:calc(var(--nav-h) + 3rem);padding-bottom:3rem}
  .amenity-practical-grid{gap:.5rem}
}

/* ===== MPA additions (round 268) ===== */
/* Longer wordmark ("Chitova's Guesthouse"): keep it on one line everywhere, tighten the centered
   links between 1101-1280px, and hand off to the hamburger menu at 1100px instead of 900px so the
   two never collide. */
.nav-logo{white-space:nowrap}
.nav-links a{white-space:nowrap}
@media(max-width:1280px) and (min-width:1101px){
  .nav-logo{font-size:1.5rem}
  .nav-links{gap:1.5rem}
  .nav-links a{font-size:.82rem;letter-spacing:.08em}
}
@media(max-width:1100px){.nav-links{display:none}.nav-hamburger{display:flex}}
@media(max-width:400px){.nav-logo{font-size:clamp(.95rem,4.6vw,1.4rem)}}
@media(max-width:340px){.nav-book{display:none}}
.platform-airbnb,.btn-submit{color:#000}
.todo-quote-attr{color:var(--muted-lt)}
.amenity-pull-quote.pull-quote-elevated cite{color:#7a4510}
.faq-cat{font-size:18.72px} /* was an h3 (UA default 1.17em); now an h2 - keep identical spacing */
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:2000;background:var(--dark);color:#fff;padding:.7rem 1.1rem;border-radius:8px;font-family:var(--barlow);font-size:.85rem;text-decoration:none;transition:top .15s}
.skip-link:focus{top:1rem}
:focus-visible{outline:2px solid #1a1612;outline-offset:3px;box-shadow:0 0 0 5px rgba(255,255,255,.75);border-radius:4px}
.footer-credit{color:var(--muted-dk);text-decoration:none;transition:color .2s}
@media(hover:hover){.footer-credit:hover,.footer-legal a:hover{color:var(--gold)}}
.footer-legal{display:flex;gap:1.4rem;flex-wrap:wrap}
.footer-legal a{font-family:var(--barlow);font-size:.66rem;letter-spacing:.08em;color:var(--muted-dk);text-decoration:none;transition:color .2s}
.form-note{font-family:var(--barlow);font-size:.74rem;line-height:1.6;color:var(--muted-lt);margin-top:1rem}
.form-note a{color:var(--text-lt);text-decoration:underline;text-underline-offset:3px}
.map-consent{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem;text-align:center;background:var(--cream2)}
.map-consent p{max-width:440px;font-family:var(--barlow);font-size:.86rem;line-height:1.7;color:var(--muted-lt);margin:0}
.map-consent p a{color:var(--text-lt);text-decoration:underline;text-underline-offset:3px}
.map-consent-actions{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;align-items:center}
.map-embed iframe{display:block;width:100%;height:100%;border:0}
button.reviews-dot{border:0;padding:0;appearance:none;-webkit-appearance:none}
.legal{background:var(--cream)}
.legal-inner{max-width:760px;margin:0 auto;padding:calc(var(--nav-h) + 4.5rem) 1.5rem 6rem}
.legal h1{font-family:var(--playfair);font-size:clamp(2.3rem,5vw,3.3rem);font-weight:400;line-height:1.1;color:var(--text-lt);margin-bottom:.6rem}
.legal-updated{font-family:var(--barlow);font-size:.8rem;color:var(--muted-lt);margin-bottom:2.4rem}
.legal h2{font-family:var(--playfair);font-size:1.5rem;font-weight:500;line-height:1.25;color:var(--text-lt);margin:2.4rem 0 .7rem}
.legal p,.legal li{font-family:var(--barlow);font-size:.95rem;font-weight:300;line-height:1.85;color:var(--text-lt)}
.legal p{margin-bottom:1rem}
.legal ul{padding-left:1.2rem;margin-bottom:1rem}
.legal li{margin-bottom:.6rem}
.legal a{color:var(--text-lt);text-decoration:underline;text-underline-offset:3px}
.status-inner{max-width:620px;margin:0 auto;padding:calc(var(--nav-h) + 7rem) 1.5rem 9rem;text-align:center}
.status-inner h1{font-family:var(--playfair);font-size:clamp(2.3rem,5vw,3.3rem);font-weight:400;line-height:1.1;color:var(--text-lt);margin-bottom:1.2rem}
.status-inner p{font-family:var(--barlow);font-size:1rem;font-weight:300;line-height:1.8;color:var(--text-lt);margin-bottom:2rem}
@media (prefers-reduced-motion:reduce){
  .reveal,.photo-reveal{opacity:1;transform:none;transition:none}
  .reviews-track{transition:none}
  .faq-answer,.faq-answer-inner,.faq-icon{transition:none}
}


/* ===== Cookie consent (round 269) ===== */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;margin:0 auto;max-width:780px;z-index:950;background:var(--dark2);color:var(--text-dk);border:1px solid var(--border-dk);border-radius:18px;box-shadow:0 14px 40px rgba(20,18,16,.35);padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;opacity:0;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease}
.cookie-bar.show{opacity:1;transform:none}
.cookie-bar[hidden]{display:none}
.cookie-bar p{flex:1 1 320px;margin:0;font-family:var(--barlow);font-size:.82rem;line-height:1.55;color:var(--text-dk)}
.cookie-bar a{color:var(--brass);text-decoration:underline;text-underline-offset:2px}
.cookie-actions{display:flex;gap:.6rem;flex:0 0 auto}
.cookie-btn{font-family:var(--barlow);font-size:.78rem;font-weight:500;letter-spacing:.04em;min-width:7rem;padding:.7rem 1.4rem;border-radius:999px;cursor:pointer;border:1px solid var(--brass);background:transparent;color:var(--text-dk);transition:background .2s,color .2s}
.cookie-btn.accept{background:var(--brass);color:#141210}
@media(hover:hover){.cookie-btn:hover{background:var(--brass);color:#141210}}
.cookie-settings-link{font-family:var(--barlow);font-size:.66rem;font-weight:300;line-height:inherit;letter-spacing:.08em;color:var(--muted-dk);background:none;border:0;padding:0;cursor:pointer;transition:color .2s}
@media(hover:hover){.cookie-settings-link:hover{color:var(--gold)}}
@media(max-width:600px){.cookie-bar{left:10px;right:10px;bottom:10px;padding:.9rem 1rem calc(.9rem + env(safe-area-inset-bottom))}.cookie-actions{width:100%}.cookie-btn{flex:1}}
@media(prefers-reduced-motion:reduce){.cookie-bar{transition:none}}