:root{
  --navy:#1b2a3a; --gold:#b08d57; --charcoal:#272523; --ink:#2b2b2b;
  --warm:#f5f1ea; --warm-2:#efe8dd; --line:#d9cfbf; --muted:#6c6459; --white:#fffdf9;
  --serif:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
  --maxw:1280px; --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--warm);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.7;font-weight:300;-webkit-font-smoothing:antialiased;letter-spacing:.01em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:.005em;color:var(--navy);line-height:1.12;margin:0}
h1{font-size:clamp(2.2rem,6vw,4.2rem)}
h2{font-size:clamp(1.7rem,4.2vw,2.9rem)}
h3{font-size:clamp(1.25rem,2.6vw,1.7rem)}
p{margin:0 0 1.1em}
.eyebrow{font-family:var(--sans);font-weight:400;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.lede{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.5;color:var(--navy);font-weight:300}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.center{text-align:center}
.measure{max-width:46ch;margin-inline:auto}
.measure-wide{max-width:60ch;margin-inline:auto}

/* ---- header ---- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);transition:background .4s ease,padding .4s ease;color:var(--white)}
.site-header.solid{background:rgba(27,42,58,.96);padding:12px var(--pad);backdrop-filter:blur(6px)}
.brand{display:flex;flex-direction:column;line-height:1}
.brand .name{font-family:var(--serif);font-size:1.5rem;letter-spacing:.14em;color:var(--white)}
.brand .sig{font-size:1rem;color:var(--gold);margin-top:3px;letter-spacing:.04em}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--white);opacity:.9}
.nav a:hover{opacity:1;color:var(--gold)}
.btn{display:inline-block;font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--gold);color:var(--white);padding:11px 22px;transition:.3s;background:transparent}
.btn:hover{background:var(--gold);color:var(--navy)}
.btn-dark{border-color:var(--navy);color:var(--navy)}
.btn-dark:hover{background:var(--navy);color:var(--white)}
.nav-toggle{display:none;background:none;border:0;color:var(--white);font-size:1.6rem;cursor:pointer;line-height:1}
@media(max-width:900px){
  .nav{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:30px;background:rgba(27,42,58,.99);
    transform:translateX(100%);transition:transform .4s ease}
  .nav.open{transform:none}
  .nav a{font-size:1rem}
  .nav-toggle{display:block;z-index:60}
  .site-header.solid{padding:12px var(--pad)}
}

/* ---- hero ---- */
.hero{position:relative;height:100svh;min-height:560px;display:flex;align-items:flex-end;justify-content:center;
  text-align:center;color:var(--white);overflow:hidden}
.hero>video,.hero>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,30,40,.35)0%,rgba(20,30,40,.05)40%,rgba(20,30,40,.55)100%)}
.hero-inner{position:relative;z-index:2;padding-bottom:clamp(48px,10vh,120px)}
.hero h1{color:var(--white);font-size:clamp(2.6rem,9vw,6rem)}
.hero .sub{font-family:var(--serif);font-size:clamp(1.1rem,2.6vw,1.7rem);margin:14px auto 26px;max-width:30ch;font-weight:300;color:#f3ede3}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero.page-hero{height:72svh;min-height:440px}

/* ---- sections ---- */
section{padding-block:clamp(56px,9vw,120px)}
.band{background:var(--warm-2)}
.band-navy{background:var(--navy);color:#e9e2d6}
.band-navy h2,.band-navy h3{color:var(--white)}
.band-navy .eyebrow{color:var(--gold)}
.rule{width:46px;height:1px;background:var(--gold);margin:22px auto}
.stack>*+*{margin-top:14px}

/* full-bleed figure + caption */
.feature{display:grid;gap:clamp(24px,5vw,64px);align-items:center;grid-template-columns:1fr}
@media(min-width:860px){.feature{grid-template-columns:1.05fr .95fr}.feature.rev .fig{order:2}}
.feature .fig img{width:100%;height:auto;border-radius:2px}
.full-img{margin:0}
.full-img img{width:100%;height:clamp(320px,62vh,720px);object-fit:cover}

/* moments */
.moments{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:760px){.moments{grid-template-columns:repeat(3,1fr)}}
.moment .fig img{height:clamp(300px,44vh,460px);object-fit:cover;width:100%}
.moment h3{margin-top:18px}
.moment .label{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}

/* teaser rows */
.teaser{display:grid;gap:clamp(20px,4vw,56px);align-items:center;grid-template-columns:1fr}
@media(min-width:860px){.teaser{grid-template-columns:1fr 1fr}.teaser.rev .fig{order:2}}
.teaser .fig img{width:100%;height:clamp(300px,50vh,540px);object-fit:cover}
.teaser .txt{padding-block:10px}

/* gallery */
.gallery{columns:1;column-gap:14px}
@media(min-width:620px){.gallery{columns:2}}
@media(min-width:1040px){.gallery{columns:3}}
.gallery figure{margin:0 0 14px;break-inside:avoid}
.gallery img{width:100%;height:auto}
.gallery.small-mix img.small{max-width:300px}
.grid-2{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-2 img{width:100%;height:clamp(260px,40vh,440px);object-fit:cover}

/* facts */
.facts{display:grid;gap:14px 36px;grid-template-columns:1fr}
@media(min-width:680px){.facts{grid-template-columns:1fr 1fr}}
.facts li{list-style:none;padding:12px 0;border-top:1px solid var(--line);font-size:.95rem}
.facts{padding:0;margin:0}
.facts .k{color:var(--gold);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;display:block;margin-bottom:3px}

/* suite meta */
.suite-meta{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.suite-meta b{color:var(--navy);font-weight:400}

/* suite cards (suites overview) */
.suite-cards{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:760px){.suite-cards{grid-template-columns:1fr 1fr}}
.suite-card{position:relative;overflow:hidden;color:var(--white)}
.suite-card img{height:clamp(320px,52vh,520px);width:100%;object-fit:cover;transition:transform .8s ease}
.suite-card:hover img{transform:scale(1.04)}
.suite-card .cap{position:absolute;inset:auto 0 0 0;padding:26px;background:linear-gradient(0deg,rgba(20,28,38,.7),transparent)}
.suite-card .cap h3{color:var(--white)}
.suite-card .cap .m{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-top:6px}

/* phone frame (guest app) */
.phones{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.phone{width:240px;max-width:72vw;border:10px solid #15202c;border-radius:34px;overflow:hidden;background:#000;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.phone img{width:100%;display:block}

/* footer */
.site-footer{background:var(--charcoal);color:#cfc6b8;padding-block:60px;font-size:.9rem}
.site-footer a:hover{color:var(--gold)}
.foot-grid{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:2fr 1fr 1fr}}
.site-footer .sig{font-size:1.3rem;color:var(--gold)}
.site-footer h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#8a8070;margin:0 0 12px}
.foot-bottom{margin-top:44px;padding-top:20px;border-top:1px solid #3a352f;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.78rem;color:#8a8070}
.foot-bottom a{color:#8a8070}

/* ===== v2 components ===== */
:root{--cream:var(--white);--ink2:#272523;--clay:var(--gold)}
/* sound toggle — replica of Blanca */
.hero__sound{position:absolute;right:clamp(1rem,3vw,2.2rem);bottom:clamp(1rem,3vw,2.2rem);z-index:4;width:44px;height:44px;padding:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--white);color:var(--white);background:rgba(20,18,15,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;transition:all .25s ease}
.hero__sound:hover,.hero__sound:focus-visible{background:var(--white);color:var(--navy)}
.hero__sound svg{width:20px;height:20px}
.hero__sound .hero__sound-ic--on{display:none}
.hero__sound[aria-pressed="true"] .hero__sound-ic--off{display:none}
.hero__sound[aria-pressed="true"] .hero__sound-ic--on{display:inline}
@media(prefers-reduced-motion:reduce){.hero>video{display:none}.hero__sound{display:none}}

/* floating WhatsApp button — replica of Blanca */
.wa-float{position:fixed;z-index:90;right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--navy);color:var(--white);box-shadow:0 6px 22px rgba(20,18,15,.3);transition:opacity .3s ease,transform .2s ease,visibility .3s ease}
.wa-float svg{width:28px;height:28px}
.wa-float:hover,.wa-float:focus-visible{opacity:.85;transform:translateY(-2px)}
.wa-float--hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px)}
body.lb-open .wa-float{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:620px){.wa-float{width:52px;height:52px}.wa-float svg{width:26px;height:26px}}

/* partner band + footer — replica of Blanca */
.partner-band{background:var(--charcoal);padding:clamp(2.2rem,5vw,3.2rem) 0}
.partner-band .eyebrow{color:var(--gold);text-align:center;margin:0 0 clamp(1.3rem,3.5vw,2rem);display:block}
.partner-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.8rem,5vw,3.4rem)}
.partner-logos a,.partner-logos span{display:inline-flex;align-items:center;line-height:0}
.partner-logos img{height:44px;width:auto;opacity:.82;transition:opacity .25s ease;display:block}
.partner-logos a:hover img{opacity:1}
.partner-logos .pl-stack img{height:40px}
@media(min-width:760px){.partner-logos img{height:52px}.partner-logos .pl-stack img{height:46px}}
@media(max-width:620px){.partner-logos{gap:1.6rem 1rem}.partner-logos a,.partner-logos span{flex:0 0 calc((100% - 2rem)/3);justify-content:center}.partner-logos img{max-width:100%}}
.site-footer{background:var(--charcoal);color:rgba(250,247,241,.78);padding-block:clamp(3rem,7vw,5rem) clamp(4.5rem,8vw,6rem);font-size:.95rem}
.site-footer a{color:rgba(250,247,241,.78);transition:color .2s ease}
.site-footer a:hover{color:var(--gold)}
.footer-grid{display:grid;gap:2.5rem;grid-template-columns:1fr}
.footer-brand .brand__name{color:var(--white);font-family:var(--serif);font-size:1.4rem;letter-spacing:.1em}
.footer-brand .sig{color:var(--gold);font-size:1.1rem}
.footer-col h2{font-family:var(--sans);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,247,241,.5);margin:0 0 1rem;font-weight:600}
.footer-col a,.footer-col p{display:block;padding:.3rem 0;font-size:.95rem;margin:0}
.footer-bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(250,247,241,.14);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;font-size:.8rem;color:rgba(250,247,241,.5)}
.footer-bottom a{color:rgba(250,247,241,.5)}
@media(min-width:760px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem}}

/* highlights (6, 2x3) */
.highlights{display:grid;gap:30px 40px;grid-template-columns:1fr}
@media(min-width:720px){.highlights{grid-template-columns:repeat(3,1fr)}}
.hl{ text-align:center}
.hl .ic{width:40px;height:40px;margin:0 auto 14px;color:var(--gold)}
.hl .ic svg{width:100%;height:100%;stroke:var(--gold);stroke-width:1;fill:none}
.hl h3{font-size:1.3rem;margin-bottom:6px}
.hl p{font-size:.92rem;color:var(--muted);margin:0}

/* reviews */
.reviews{text-align:center}
.review{max-width:60ch;margin:0 auto;min-height:12em;display:flex;flex-direction:column;justify-content:center;transition:opacity .9s ease}
.review.fade{opacity:0}
.review blockquote{font-family:var(--serif);font-size:clamp(1.3rem,2.8vw,2rem);line-height:1.5;color:var(--navy);font-weight:300;margin:0 0 20px;font-style:italic}
.review .who{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.review .who b{color:var(--navy);font-weight:500}
.review-dots{display:flex;gap:8px;justify-content:center;margin-top:26px}
.review-dots button{width:7px;height:7px;border-radius:999px;border:0;background:var(--line);cursor:pointer;padding:0}
.review-dots button[aria-current=true]{background:var(--gold)}

/* gallery anti-gap */
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.ggrid{grid-template-columns:1fr}}
.gfull{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:12px}
.gduo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
@media(max-width:760px){.gduo{grid-template-columns:1fr}}
.gcell{position:relative;overflow:hidden;cursor:zoom-in;background:var(--warm-2)}
.gcell img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform .7s ease}
.gcell:hover img{transform:scale(1.03)}
.gfull .gcell img{aspect-ratio:16/7}

/* lightbox */
.lb{position:fixed;inset:0;z-index:120;background:rgba(18,16,14,.96);display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:86vh;object-fit:contain;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lb__x,.lb__a{position:absolute;background:none;border:0;color:#fff;cursor:pointer;opacity:.8}
.lb__x{top:18px;right:24px;font-size:2rem}
.lb__a{top:50%;transform:translateY(-50%);font-size:2.6rem;padding:20px}
.lb__a.prev{left:10px}.lb__a.next{right:10px}
.lb__a:hover,.lb__x:hover{opacity:1}
.lb__count{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:rgba(255,255,255,.8);font-size:.82rem;letter-spacing:.1em}
@media(max-width:620px){.lb__a{font-size:2rem;padding:10px}}

/* ===== logo + tagline ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brand-logo{display:inline-flex;align-items:center}
.brand-logo img{height:34px;width:auto;display:block}
@media(max-width:900px){.brand-logo img{height:28px}}
.hero__logo{display:block;width:min(420px,62vw);height:auto;margin:0 auto clamp(18px,3vh,30px);filter:drop-shadow(0 2px 14px rgba(0,0,0,.35))}
.hero .tagline{font-family:var(--serif);font-weight:300;font-size:clamp(1.3rem,3.4vw,2.1rem);color:#fff;margin:0 0 6px;letter-spacing:.01em}
.hero .tagline-sub{font-family:var(--sans);font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 26px}
.footer-brand .brand-logo img{height:38px;opacity:.95}
.footer-brand .sig{display:block;color:var(--gold);font-size:1.05rem;margin:10px 0 4px}
.footer-brand .foot-tag{font-family:var(--serif);font-style:italic;color:rgba(250,247,241,.7)}

/* ===== v3 fixes ===== */
section{padding-block:clamp(44px,6.5vw,88px)}
.hero.page-hero{height:62svh;min-height:400px}
.feature .fig img{max-height:70vh;object-fit:cover}
.teaser .fig img{height:clamp(280px,44vh,480px)}
.moment .fig img{height:clamp(260px,36vh,400px)}

/* header: nav+reserve LEFT, logo RIGHT */
.site-header{justify-content:space-between}
.hdr-left{display:flex;align-items:center;gap:26px}
.brand-logo img{height:50px;width:auto}
@media(max-width:900px){.brand-logo img{height:40px}.hdr-left{gap:0}}
@media(min-width:901px){.nav-toggle{display:none}}

/* highlights compact band */
.hl-band{background:var(--warm-2);padding-block:clamp(30px,4vw,48px)}
.highlights{display:grid;gap:26px 40px;grid-template-columns:repeat(3,1fr)}
@media(max-width:720px){.highlights{grid-template-columns:1fr;gap:22px}}
.hl{text-align:center}
.hl-rule{display:block;width:28px;height:1px;background:var(--gold);margin:0 auto 12px}
.hl h3{font-size:1.25rem;margin-bottom:4px}
.hl p{font-size:.9rem;color:var(--muted);margin:0}

/* footer blanca logo weight */
.partner-logos .pl-blanca{height:62px}
@media(min-width:760px){.partner-logos .pl-blanca{height:70px}}

/* staycation h3 */
.teaser h3{font-size:clamp(1.4rem,2.6vw,1.9rem)}
/* logo legibility over video/varied bg */
.brand-logo img{filter:drop-shadow(0 1px 7px rgba(0,0,0,.55))}
.site-header.solid .brand-logo img{filter:none}

/* ===== v4 ===== */
/* header stacked logo top-right + top gradient for legibility */
.site-header::before{content:"";position:absolute;inset:0 0 auto 0;height:160px;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0));pointer-events:none;z-index:-1;transition:opacity .4s}
.site-header.solid::before{opacity:0}
.brand-logo img{height:72px;width:auto;filter:drop-shadow(0 1px 8px rgba(0,0,0,.5))}
.site-header.solid .brand-logo img{filter:none}
@media(max-width:900px){.brand-logo img{height:56px}}
/* hero tagline sizing + veil */
.hero::after{background:linear-gradient(180deg,rgba(20,30,40,.30)0%,rgba(20,30,40,.02)38%,rgba(20,30,40,.62)100%)}
.hero .tagline{font-size:clamp(28px,4.4vw,44px);color:#fffdf9;text-shadow:0 2px 16px rgba(0,0,0,.45);margin:0 0 8px}
.hero .tagline-sub{font-size:15px;letter-spacing:.3em;color:#fffdf9;opacity:.9;text-shadow:0 1px 10px rgba(0,0,0,.4);margin:0 0 26px}
/* footer group logos uniform + bigger */
.partner-logos img{height:90px!important;opacity:1!important}
.partner-logos .pl-blanca{height:90px!important}
@media(max-width:760px){.partner-logos img,.partner-logos .pl-blanca{height:64px!important}.partner-logos{gap:1.4rem 2rem}.partner-logos a,.partner-logos span{flex:0 0 calc((100% - 2rem)/3)}}
.footer-brand .brand-logo img{height:64px;filter:none}
/* highlights 8 -> 4 cols */
.highlights.hl8{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.highlights.hl8{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.highlights.hl8{grid-template-columns:1fr}}
.hl .ic{display:block;width:26px;height:26px;margin:0 auto 10px}
.hl .ic svg{width:26px;height:26px;stroke:var(--gold);stroke-width:1.25;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* journal grid */
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.jgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.jgrid{grid-template-columns:1fr}}
.jcard{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .3s,box-shadow .3s}
.jcard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,18,15,.1)}
.jcard img{width:100%;aspect-ratio:3/2;object-fit:cover}
.jcard .jc{padding:16px 18px 20px}
.jcard .cat{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.jcard h2{font-size:1.15rem;margin:8px 0 6px;color:var(--navy)}
.jcard p{font-size:.9rem;color:var(--muted);margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jcard .date{font-size:.75rem;color:var(--muted)}
/* article */
.article{max-width:760px;margin:0 auto}
.article .meta{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.article h1{margin-bottom:14px}
.article .cover{width:100%;aspect-ratio:3/2;object-fit:cover;margin:24px 0 32px;border-radius:var(--r)}
.article .intro{font-family:var(--serif);font-size:1.3rem;line-height:1.6;color:var(--navy);margin-bottom:28px}
.article h2{font-size:1.5rem;margin:34px 0 12px}
.article p{font-size:1.02rem;line-height:1.8;color:var(--ink);margin-bottom:16px}
.flag-note{background:#fff4f8;border:1px solid #f3cfe0;color:#9a376a;font-size:.8rem;padding:8px 12px;border-radius:var(--r);margin:0 0 20px}

/* ===== v5 layout: all section/gallery photos 3:2, height auto, no fixed heights ===== */
.feature .fig img,.teaser .fig img,.moment .fig img,.grid-2 img,.full-img img,.suite-card img{
  aspect-ratio:3/2!important;width:100%!important;height:auto!important;object-fit:cover;max-height:none!important}
.gcell img,.gfull .gcell img{aspect-ratio:3/2!important;height:auto!important}
/* highlight photo cards 4:5 */
.highlights.hlphoto{grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.highlights.hlphoto{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.highlights.hlphoto{grid-template-columns:1fr}}
.hlc{position:relative;display:block;overflow:hidden;border-radius:var(--r);color:#fff}
.hlc img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .6s ease}
.hlc:hover img{transform:scale(1.03)}
.hlc .cap{position:absolute;inset:auto 0 0 0;padding:18px 16px 16px;background:linear-gradient(0deg,rgba(18,24,32,.78),rgba(18,24,32,.15),transparent)}
.hlc .cap h3{color:#fffdf9;font-size:24px;line-height:1.1;margin:0 0 4px}
.hlc .cap p{color:#fffdf9;opacity:.92;font-size:.85rem;margin:0}
/* header logo thicker/bigger */
.brand-logo img{height:88px}
@media(max-width:900px){.brand-logo img{height:64px}}
.gym-small{display:flex;gap:14px;justify-content:center;margin-top:14px}
.gym-small img{max-width:240px;width:auto;height:auto;aspect-ratio:auto!important}

/* ---- enquiry form (contact) ---- */
.hide{display:none!important}
.hp{position:absolute!important;left:-9999px!important;height:0;overflow:hidden}
.form-success{max-width:640px;margin:0 auto 10px;background:#eef5ee;border:1px solid #bcd3bc;color:#2f5130;border-radius:var(--r);padding:16px 18px;text-align:center}
form.enquiry{max-width:720px;margin:26px auto 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}
form.enquiry .field{display:block;margin:0 0 16px}
form.enquiry .field span{display:block;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
form.enquiry input,form.enquiry textarea{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #d8cfc0;border-radius:var(--r);background:#fff;font:inherit;color:inherit}
form.enquiry input:focus,form.enquiry textarea:focus{outline:none;border-color:var(--gold)}
.form-note{margin-top:14px;font-size:.82rem;color:var(--muted)}

/* ---- En bref / FAQ ---- */
.en-bref{margin-top:-10px}
.en-bref-box{max-width:820px;margin:0 auto;background:var(--warm,#f5f1ea);border:1px solid #e4dccd;border-radius:var(--r);padding:26px 30px}
.en-bref-box ul{list-style:none;margin:0;padding:0}
.en-bref-box li{padding:7px 0;border-top:1px solid #e9e2d5;font-size:.98rem;line-height:1.5}
.en-bref-box li:first-child{border-top:none}
.en-bref-box b{color:var(--navy,#1b2a3a)}
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-top:1px solid #e4dccd;padding:22px 0}
.faq-item h2{font-size:1.15rem;margin:0 0 8px}
.faq-item p{margin:0;color:var(--muted)}

/* ======================================================================
   NEW-source layout: images native aspect (verticals WHOLE, no 3:2 crop,
   never background-image). Masonry galleries (no gaps). Overrides all
   earlier 3:2 / object-fit:cover rules except [data-card] and [data-hero].
   ====================================================================== */
.fig{height:auto!important;aspect-ratio:auto!important;background:none!important}
.fig img{width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;display:block;border-radius:var(--r)}
.feature .fig img,.teaser .fig img,.moment .fig img{border-radius:var(--r)}
/* masonry gallery */
[data-gallery].masonry{column-count:3;column-gap:16px}
@media(max-width:860px){[data-gallery].masonry{column-count:2}}
@media(max-width:560px){[data-gallery].masonry{column-count:1}}
[data-gallery].masonry .gcell{break-inside:avoid;margin:0 0 16px;border-radius:var(--r);overflow:hidden;cursor:zoom-in;background:none}
[data-gallery].masonry .gcell img{width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;display:block}
/* suite card thumbnail native aspect */
.suite-card img{height:auto!important;aspect-ratio:auto!important;object-fit:cover}
/* page hero as <img> (replaces background-image) */
.page-hero{position:relative;overflow:hidden;min-height:46vh;display:flex;align-items:flex-end}
.page-hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.45));z-index:1}
.page-hero .hero-inner{position:relative;z-index:2}
.charter-partner img.charter-logo{max-width:190px;width:auto!important;height:auto!important;aspect-ratio:auto!important;margin-top:10px;background:#fff;padding:6px 10px;border-radius:var(--r)}

/* journal covers: uniform 3:2 cards (data-card), not tall boxes */
.jcard img{width:100%!important;aspect-ratio:3/2!important;height:auto!important;object-fit:cover!important;display:block}

/* ======================================================================
   PHIL ROUND 2 — two backgrounds only (ivory content, navy footer)
   ====================================================================== */
.band,.hl-band{background:var(--warm)!important}
.band-navy{background:var(--warm)!important}
.band-navy,.band-navy *{color:var(--ink)!important}
.band-navy h1,.band-navy h2,.band-navy h3{color:var(--navy)!important}
.band-navy .eyebrow{color:var(--gold)!important}
.band-navy .btn{border:1px solid var(--navy);color:var(--navy)}
.band-navy .btn:hover{background:var(--gold);color:var(--navy)}
/* footer + partner band = one continuous navy block */
.partner-band{background:var(--navy)!important}
.partner-band .eyebrow{color:var(--gold)!important}
.site-footer{background:var(--navy)!important;color:rgba(250,247,241,.82)!important}
.site-footer a{color:rgba(250,247,241,.82)!important}
.site-footer a:hover{color:var(--gold)!important}

/* aligned 3:2 grid (suites, wellness, yacht) — no masonry */
.grid32{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.grid32{grid-template-columns:repeat(2,1fr)}}
.grid32 .g32{aspect-ratio:3/2;overflow:hidden;border-radius:var(--r);background:var(--warm-2);cursor:zoom-in}
.grid32 .g32 img{width:100%!important;height:100%!important;object-fit:cover!important;display:block;aspect-ratio:auto!important}
.yacht3{grid-template-columns:repeat(3,1fr)}
@media(max-width:620px){.yacht3{grid-template-columns:repeat(3,1fr)}}

/* ---- /gallery : justified rows + space tabs + lightbox caption ---- */
.gal-tabs{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 0 14px;border-bottom:1px solid var(--line)}
.gal-tabs button{appearance:none;background:none;border:none;white-space:nowrap;font:inherit;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:8px 12px;cursor:pointer;border-bottom:2px solid transparent}
.gal-tabs button[aria-selected=true]{color:var(--navy);border-bottom-color:var(--gold)}
.gal-group-title{font-family:var(--serif);font-weight:300;color:var(--navy);font-size:1.5rem;margin:34px 0 6px}
.gal-group-rule{height:1px;background:linear-gradient(90deg,var(--gold),transparent);width:120px;margin-bottom:14px}
.gal-row{display:flex;gap:8px;margin-bottom:8px}
.gal-row .gph{position:relative;overflow:hidden;border-radius:var(--r);cursor:zoom-in;background:var(--warm-2)}
.gal-row .gph img{display:block;width:100%;height:100%;object-fit:cover}
.gph .cap{position:absolute;left:0;right:0;bottom:0;padding:6px 8px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);opacity:0;transition:opacity .2s}
.gph:hover .cap{opacity:1}
/* lightbox caption (counter + space) */
.lb-caption{position:fixed;left:0;right:0;bottom:18px;text-align:center;color:#fff;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;z-index:100000}

/* ---- /contact reserve page ---- */
.reserve-contact{max-width:720px;margin:0 auto}
.rc-btns{display:flex;flex-direction:column;gap:12px;max-width:460px;margin:22px auto 8px}
.rc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 20px;border-radius:var(--r);font:inherit;font-size:1rem;text-decoration:none;border:1px solid var(--navy)}
.rc-btn.primary{background:var(--navy);color:var(--white)}
.rc-btn.primary:hover{background:var(--gold);color:var(--navy)}
.rc-btn.secondary{background:transparent;color:var(--navy)}
.rc-btn.secondary:hover{background:var(--navy);color:var(--white)}
.rc-call{text-align:center;margin:6px 0 2px}.rc-call a{color:var(--navy)}
.rc-note{text-align:center;color:var(--muted);font-size:.85rem;margin-top:4px}
.rc-form-btns{display:flex;gap:12px;flex-wrap:wrap}
.rc-form-btns .btn{flex:1;min-width:180px}
.booking-link{text-align:center;margin-top:30px;font-size:.9rem}.booking-link a{color:var(--muted);text-decoration:underline}

/* /gallery lightbox */
.gal-lb{position:fixed;inset:0;z-index:99999;background:rgba(15,18,22,.96);display:none;align-items:center;justify-content:center}
.gal-lb.open{display:flex}
.gal-lb img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:var(--r)}
.gal-lb button{position:absolute;background:rgba(255,255,255,.08);border:none;color:#fff;cursor:pointer;border-radius:999px}
.gal-lb-close{top:18px;right:20px;width:44px;height:44px;font-size:26px;line-height:1}
.gal-lb-prev,.gal-lb-next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:30px;line-height:1}
.gal-lb-prev{left:18px}.gal-lb-next{right:18px}
.gal-lb button:hover{background:var(--gold);color:var(--navy)}
@media(max-width:640px){.gal-lb-prev,.gal-lb-next{width:42px;height:42px;font-size:24px}.gal-lb-prev{left:6px}.gal-lb-next{right:6px}}
.gal-rows{overflow:hidden}

/* FIX: justified rows need a flex-wrap container (JS sets each .gph px size) */
.gal-rows{display:flex!important;flex-wrap:wrap;gap:8px;overflow:hidden;align-items:flex-start}
/* default tile size BEFORE the JS justified layout runs — keeps the page a realistic height so
   loading=lazy actually defers the below-the-fold thumbnails (JS then sets exact px width/height) */
.gal-rows .gph{display:block;position:relative;overflow:hidden;border-radius:var(--r);cursor:zoom-in;background:var(--warm-2);flex:0 0 auto;width:clamp(150px,30%,340px);aspect-ratio:3/2}
.gal-rows .gph img{display:block;width:100%;height:100%;object-fit:cover}
.gal-rows .gph .cap{position:absolute;left:0;right:0;bottom:0;padding:6px 8px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);opacity:0;transition:opacity .2s}
.gal-rows .gph:hover .cap{opacity:1}

/* In detail / suite features list (sober, no icons) */
.indetail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px}
@media(max-width:780px){.indetail{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.indetail{grid-template-columns:1fr}}
.indetail li{padding:10px 0;border-top:1px solid #e4dccd;font-size:.95rem;color:var(--ink)}
/* Where to find us — lazy Google map embed */
.map-wrap{position:relative;max-width:1000px;margin:24px auto 0;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* massage block */
.massage-feat .fig45{max-width:420px}
.massage-feat .fig45 img{aspect-ratio:4/5!important;object-fit:cover!important;border-radius:var(--r)}
.massage-sm{margin-top:16px;max-width:200px}
.massage-sm img{border-radius:var(--r);width:100%;height:auto}
.massage-band{max-width:560px;margin-left:auto;margin-right:auto}
.massage-band img{width:100%;height:auto;aspect-ratio:3/2!important;object-fit:cover!important;border-radius:var(--r)}

/* ======================================================================
   PHIL ROUND 5 — Part 0 urgent fixes (hero name, header, gradient, nav,
   partner logos, map, empty block). Overrides earlier rules.
   ====================================================================== */
/* 0.1 header: logo fully visible, ~48px, ≥24px top margin; nav vertically centred */
.site-header{padding:24px var(--pad)!important;align-items:center!important}
.site-header.solid{padding:16px var(--pad)!important}
.brand-logo img{height:48px!important}
@media(max-width:900px){.brand-logo img{height:40px!important}}
.hdr-left,.nav{align-items:center!important}
.site-header:not(.solid) .nav a,.site-header:not(.solid) .nav .btn{text-shadow:0 1px 10px rgba(0,0,0,.45)}
/* 0.1 hero name wordmark above the tagline */
.hero__logo{display:block!important;width:clamp(160px,32vw,250px)!important;height:auto!important;margin:0 auto clamp(16px,3vh,26px)!important;filter:drop-shadow(0 2px 16px rgba(0,0,0,.45))}
.hero-inner{text-align:center}
.tagline{color:var(--white);text-shadow:0 1px 14px rgba(0,0,0,.4)}
.tagline-sub{color:var(--gold);letter-spacing:.3em;font-size:.8rem;margin-top:10px;text-shadow:0 1px 10px rgba(0,0,0,.4)}
/* 0.1 gradient only at the bottom (do not darken the whole video) */
.hero::after{background:linear-gradient(to top,rgba(0,0,0,.6) 0%,rgba(0,0,0,.22) 24%,rgba(0,0,0,0) 48%)!important}
/* 0.5 partner logos — equal optical weight (chakana smaller, blanca larger) */
.partner-logos img{height:54px!important;opacity:.9!important}
.partner-logos .pl-stack img{height:54px!important}
.partner-logos .pl-blanca{height:82px!important}
.partner-logos .pl-chakana{height:44px!important}
@media(max-width:760px){.partner-logos img{height:40px!important}.partner-logos .pl-stack img{height:40px!important}.partner-logos .pl-blanca{height:60px!important}.partner-logos .pl-chakana{height:32px!important}}
/* 0.4 Where-to-find-us: fixed height map + info beside it */
.map-wrap{aspect-ratio:auto!important;height:420px!important;max-width:none!important;margin:0!important}
@media(max-width:760px){.map-wrap{height:320px!important}}
#where .where-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:center;margin-top:24px}
@media(max-width:860px){#where .where-grid{grid-template-columns:1fr}}
#where .where-info .facts{margin:14px 0 0}

/* ======================================================================
   PHIL ROUND 5b — inner-page light nav + layout, suite-card veil
   ====================================================================== */
/* 1. light ivory nav for pages without a dark top */
.nav-light.site-header{background:rgb(245,241,234)!important;border-bottom:1px solid rgba(27,42,58,.1);backdrop-filter:none!important}
.nav-light .nav a{color:var(--navy)!important;text-shadow:none!important;opacity:.82}
.nav-light .nav a:hover{color:var(--gold)!important;opacity:1}
.nav-light .nav .btn{color:var(--navy)!important;border-color:var(--navy);text-shadow:none!important}
.nav-light .nav .btn:hover{background:var(--navy);color:#fff!important}
.nav-light .nav-toggle{color:var(--navy)!important}
@media(max-width:900px){.nav-light .nav{background:rgb(245,241,234)!important}}
/* 1. inner-page header: centred container, modest top gap (clear fixed header ~96px + ≤64px) */
.page-top{padding:120px 0 0!important;text-align:center}
.page-top+*{margin-top:0}
/* 3. suite-card veil lighter (gradient only behind text, bottom) */
.suite-card .cap{background:linear-gradient(0deg,rgba(20,28,38,.55),rgba(20,28,38,.12) 45%,transparent)!important}
/* 3. suite name + subtitle */
.suite-name-sub{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px;font-weight:400}
.hero .suite-name-sub{color:#e9e2d6;opacity:.85}
.suite-card .cap .suite-name-sub{color:#eee;opacity:.8}

/* ======================================================================
   PHIL ROUND 5c — highlight cards (Aman, caption below), services,
   massage 2-col, aligned moments, orphan-word control, suite subtitle
   ====================================================================== */
/* highlight cards: contained 4-col grid, caption BELOW photo on ivory */
.highlights.hlphoto{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:24px!important;max-width:1200px;margin:0 auto}
@media(max-width:960px){.highlights.hlphoto{grid-template-columns:1fr 1fr!important}}
@media(max-width:560px){.highlights.hlphoto{grid-template-columns:1fr!important}}
.hlc{background:none!important;display:block!important;border-radius:0!important;overflow:visible!important}
.hlc .hlc-img{aspect-ratio:4/5;overflow:hidden;border-radius:var(--r)}
.hlc .hlc-img img{width:100%;height:100%;object-fit:cover;display:block}
.hlc .hlc-cap{padding-top:16px;background:none!important;position:static!important;inset:auto!important}
.hlc .hlc-cap h2{font-family:var(--serif);font-weight:300;color:var(--navy);font-size:1.3rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hlc .hlc-cap p{margin-top:6px;font-size:.94rem;line-height:1.4;color:rgba(27,42,58,.7)}
@media(max-width:400px){.hlc .hlc-cap h2{white-space:normal}}
/* services section */
.services-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1100px;margin:24px auto 0}
.services-photos img{width:100%!important;aspect-ratio:4/5!important;object-fit:cover!important;height:auto!important;border-radius:var(--r);display:block}
.services-list{list-style:none;margin:28px auto 0;padding:0;max-width:1100px;display:grid;grid-template-columns:1fr 1fr;gap:22px 40px}
@media(max-width:700px){.services-photos{grid-template-columns:1fr}.services-list{grid-template-columns:1fr}}
.services-list li h3{font-size:1.15rem;margin:0}.services-list li p{margin:6px 0 0;color:var(--muted)}
/* massage: text left, 4:5 photo right */
.massage-feat .fig45{max-width:440px;justify-self:end}
.massage-feat .fig45 img{aspect-ratio:4/5!important;object-fit:cover!important;border-radius:var(--r);width:100%}
/* The Day moments — identical 3:2 height, legends aligned */
.moment .fig{aspect-ratio:3/2!important;height:auto!important;overflow:hidden;border-radius:var(--r)}
.moment .fig img{width:100%!important;height:100%!important;object-fit:cover!important;aspect-ratio:auto!important}
/* orphan words: balance titles/short lines, pretty paragraphs */
h1,h2,h3,h4,.lede,.tagline,.review blockquote{text-wrap:balance}
p,.measure,.measure-wide{text-wrap:pretty}
/* suite name subtitle */
.hero .suite-name-sub{margin-top:8px;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:#e9e2d6;opacity:.9}

/* ======================================================================
   PHIL ROUND 6 — inner-page nav (no gradient), horizontal logo, gaps
   ====================================================================== */
/* 1. remove the dark gradient scrim on light inner pages; solid ivory bar + 1px filet */
.nav-light.site-header::before{display:none!important}
.nav-light.site-header,.nav-light.site-header.solid{background:rgb(245,241,234)!important;box-shadow:none!important;backdrop-filter:none!important;border-bottom:1px solid rgba(27,42,58,.1)!important}
/* 2. horizontal logo (symbol + AMARTA AZUL), ~150px desktop / 120px mobile, full opacity */
.brand-logo img{height:auto!important;width:150px!important;opacity:1!important}
@media(max-width:900px){.brand-logo img{width:120px!important}}
.site-header{padding-top:16px!important;padding-bottom:16px!important}
.site-header.solid{padding-top:10px!important;padding-bottom:10px!important}
.site-header.solid .brand-logo img{width:124px!important}
/* 3. /contact + /reserve: tighten the void between intro and the contact buttons */
.reserve-contact{margin-top:0}
.reserve-contact .rc-btns{margin-top:28px}
#reserve.wrap, .reserve-contact{padding-top:0}

/* guest portal phone frame (sober: thin border, rounded, no fake reflections) */
.phone-frame{max-width:300px;margin:0 auto;border:1px solid rgba(27,42,58,.18);border-radius:30px;overflow:hidden;box-shadow:0 14px 40px rgba(20,18,15,.14);background:#0b1016}
.phone-frame img{width:100%;height:auto;display:block;border-radius:29px}
.band-navy .phone-frame{border-color:rgba(245,241,234,.25)}

/* FIX: phone frame — no black side bands; image fills the frame exactly */
.fig .phone-frame,.wrap.center .phone-frame{width:284px;max-width:82%;margin:0 auto}
.phone-frame{border:1px solid rgba(27,42,58,.2);border-radius:30px;overflow:hidden;box-shadow:0 14px 40px rgba(20,18,15,.14);background:transparent!important;line-height:0;padding:0}
.phone-frame img{width:100%!important;height:auto!important;display:block!important;object-fit:contain!important;aspect-ratio:auto!important;border-radius:29px}
.band-navy .phone-frame{border-color:rgba(245,241,234,.3)}

/* FIX2: force the portal screenshot to its portrait aspect so the frame wraps it (no bands) */
.phone-frame{width:min(284px,82%)!important;height:auto!important;aspect-ratio:auto!important;display:block;margin:0 auto}
.phone-frame img,.fig .phone-frame img{width:100%!important;height:auto!important;aspect-ratio:1170/2532!important;object-fit:cover!important;display:block!important;border-radius:29px}
.band-navy .teaser .fig,.feature .fig{align-self:center}

/* ======================================================================
   ROUND 12 — map / estate / latitude / portal-row / logo-flip / massage
   ====================================================================== */

/* pt2 — header logo: white over dark hero (drop-shadow), navy on ivory nav or once scrolled opaque */
.brand-logo{position:relative;line-height:0}
.brand-logo img{display:block}
.brand-logo .bl-dark{display:none!important}
.site-header.solid .brand-logo .bl-light,
.nav-light .brand-logo .bl-light{display:none!important}
.site-header.solid .brand-logo .bl-dark,
.nav-light .brand-logo .bl-dark{display:block!important}
.brand-logo .bl-light{filter:drop-shadow(0 2px 7px rgba(0,0,0,.55))!important}
.site-header.solid .brand-logo .bl-dark{filter:none!important}

/* pt1 — inner pages: solid ivory nav, no gradient/shadow, 1px navy-10% filet */
.nav-light.site-header::before,.nav-light.site-header::after{display:none!important;content:none!important}
.nav-light.site-header,.nav-light.site-header.solid{background:rgb(245,241,234)!important;box-shadow:none!important;backdrop-filter:none!important;border-bottom:1px solid rgba(27,42,58,.1)!important}

/* pt9 — custom static map (ivory land, navy roads, no competitor labels); whole map clickable */
.where-map{display:block;max-width:1000px;margin:28px auto 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 30px rgba(20,18,15,.08)}
.where-map img{display:block;width:100%;height:auto}
.where-maplink{text-align:center;margin:12px 0 0;font-size:.95rem}
.where-maplink a{color:var(--navy);border-bottom:1px solid currentColor;padding-bottom:1px}
.where-foot{display:flex;justify-content:space-between;gap:40px;max-width:1000px;margin:36px auto 0;flex-wrap:wrap}
.where-foot .wi-addr{text-align:left}
.where-foot .wi-here{text-align:right}
.where-foot .wi-here .facts{margin:10px 0 0}
.where-foot .eyebrow{display:block;margin-bottom:8px}
@media(max-width:620px){.where-foot{gap:24px}.where-foot .wi-here{text-align:left}}

/* pt8 — estate two-house logos, 1px navy-30% vertical filet between, hover 70% */
.estate-logos{display:flex;align-items:center;justify-content:center;margin:0 auto 48px}
.estate-logo{display:inline-flex;align-items:center;transition:opacity .25s}
.estate-logo img{height:72px;width:auto;display:block}
.estate-logo:hover{opacity:.7}
.estate-div{display:inline-block;width:1px;height:56px;background:rgba(27,42,58,.3);margin:0 64px}
@media(max-width:620px){.estate-logo img{height:52px}.estate-div{height:40px;margin:0 32px}}

/* pt10 — Latitude 8° block (artwork hidden until Phil validates it; Spotify link disabled) */
.lat8{display:flex;align-items:center;gap:40px;justify-content:center;flex-wrap:wrap}
.lat8-art{flex:0 0 auto;background:#0b0e12;border-radius:var(--r);padding:18px;line-height:0}
.lat8-art img{width:200px;height:auto;display:block}
.lat8-art.is-hidden{display:none!important}
.lat8-txt{max-width:460px}
.lat8-txt .eyebrow{display:block}
@media(max-width:620px){.lat8-art img{width:160px}}
.btn.is-disabled{opacity:.42;pointer-events:none;cursor:default}

/* pt7 — guest app: tight intro→phones, 4 sober equal frames + legends */
.ga-intro .lede{margin-bottom:40px}
.portal-row{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin:0 auto}
.portal-cell{margin:0}
.portal-row .phone-frame{width:min(230px,44vw)!important;max-width:230px!important;margin:0 auto!important}
.portal-row figcaption{line-height:1.2;margin-top:12px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}
@media(max-width:900px){.portal-row{gap:18px}.portal-row .phone-frame{width:min(44vw,220px)!important}}
@media(max-width:560px){.portal-row{gap:16px 14px}.portal-row .phone-frame{width:min(70vw,260px)!important}}

/* pt6 — massage feature: 12-col (6 text / 5 photo), text vertically centered, 4:5 photo <=480px */
.massage-feat{display:grid;grid-template-columns:6fr 5fr;gap:48px;align-items:center}
.massage-feat .txt{align-self:center}
.massage-feat .fig45{max-width:480px;width:100%;justify-self:end}
.massage-feat .fig45 img{aspect-ratio:4/5!important;object-fit:cover!important;border-radius:var(--r);width:100%;max-height:600px}
@media(max-width:760px){.massage-feat{grid-template-columns:1fr;gap:24px}.massage-feat .fig45{justify-self:center;max-width:360px}}

/* ======================================================================
   ROUND 13 — header/logo/menu/surtitles/spacing (authoritative, last-wins)
   ====================================================================== */

/* item1 — LOGO COLOUR STRICTLY BY BAR BACKGROUND (not page type) */
/* bar transparent-over-video OR navy(scrolled dark) => WHITE logo; bar ivory(nav-light) => NAVY logo */
.brand-logo .bl-light{display:block!important}
.brand-logo .bl-dark{display:none!important}
.nav-light .brand-logo .bl-light{display:none!important}
.nav-light .brand-logo .bl-dark{display:block!important}
/* drop-shadow ONLY on the transparent video bar (dark page, not scrolled); none on ivory/navy bars */
.brand-logo img{filter:none!important}
.site-header:not(.solid):not(.nav-light) .brand-logo .bl-light{filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))!important}

/* item2 — menu never clips: generous side padding, tighten 1200-1440, compact <1200 */
.site-header{padding-left:max(32px,var(--pad))!important;padding-right:max(32px,var(--pad))!important}
@media(max-width:1440px){.hdr-left{gap:18px}.nav{gap:18px}.nav a{letter-spacing:.1em;font-size:.76rem}}
@media(max-width:1320px){.hdr-left{gap:14px}.nav{gap:13px}.nav a{letter-spacing:.06em;font-size:.73rem}.nav .btn{letter-spacing:.12em;padding-inline:14px}}
@media(min-width:1201px){.nav-toggle{display:none!important}}
@media(max-width:1200px){
  .nav-toggle{display:inline-flex!important;align-items:center;background:none;border:0;cursor:pointer;z-index:60;
    font-family:var(--sans);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;line-height:1;padding:6px 2px}
  .nav-toggle{color:#fff}
  .nav-light .nav-toggle{color:var(--navy)!important}
  .site-header.solid:not(.nav-light) .nav-toggle{color:#fff!important}
  .hdr-left{gap:0}
  .nav{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
    background:rgb(245,241,234)!important;transform:translateX(100%);transition:transform .38s ease;z-index:55;padding:40px;backdrop-filter:none!important}
  .nav.open{transform:none}
  .nav a{font-family:var(--serif)!important;font-size:1.5rem!important;letter-spacing:.01em!important;text-transform:none!important;
    color:var(--navy)!important;opacity:.92;text-shadow:none!important}
  .nav a:hover{color:var(--gold)!important;opacity:1}
  .nav .btn{font-family:var(--sans)!important;font-size:.78rem!important;letter-spacing:.2em!important;text-transform:uppercase!important;
    color:var(--navy)!important;border:1px solid var(--navy)!important;background:none!important;margin-top:8px}
}

/* item3 — inner-page content clears the 132px bar + 64px; responsive */
.inner-top{padding-top:196px!important}
.inner-band{padding-block:196px 10px!important}
@media(max-width:900px){.inner-top{padding-top:172px!important}.inner-band{padding-block:172px 10px!important}}
@media(max-width:560px){.inner-top{padding-top:150px!important}.inner-band{padding-block:150px 10px!important}}
/* item3 — photo-hero surtitles: ivoire full opacity, legible on photo */
.page-hero .eyebrow{color:#f7f3ec!important;opacity:1!important;font-size:14px!important;letter-spacing:.3em!important;
  text-shadow:0 1px 3px rgba(0,0,0,.45)!important;display:block;margin-bottom:24px!important}

/* item4 — gallery: no void between subtitle and tabs (<=48px) */
.gal-head{padding-bottom:0!important}
.gal-tabs-sec{padding-top:40px!important}

/* item5 — suite: photos -> 'In this suite' gap 64px */
.suite-grid{padding-bottom:32px!important}
.suite-feats{padding-top:32px!important}

/* item6 — contact: centre content in 1200px; map -> form gap 64px */
body[data-page="contact"] .reserve-contact,
body[data-page="contact"] .reserve-form{max-width:760px;margin-left:auto;margin-right:auto}
body[data-page="contact"] #reserve .center{margin-left:auto;margin-right:auto}
body[data-page="contact"] #reserve{padding-bottom:32px!important}
body[data-page="contact"] #where{padding-top:32px!important}

/* item7 — services titles: serif, heavier, navy */
.services-list h3{font-family:var(--serif)!important;font-weight:500!important;font-size:1.5rem!important;color:var(--navy)!important;letter-spacing:.005em}

/* item8 — portal frames: 6px dark bezel so the rounded corners never crop content */
.phone-frame{padding:6px!important;background:#0b1016!important;box-sizing:border-box}
.phone-frame img,.fig .phone-frame img,.portal-row .phone-frame img{border-radius:22px!important}
.band-navy .phone-frame{background:#0b1016!important;border-color:rgba(245,241,234,.22)!important}

/* ======================================================================
   ROUND 13b — fixes (override round-12 .solid logo rules; tighten gaps)
   ====================================================================== */
/* logo flip STRICTLY by bar bg — beat the round-12 .solid rules (same/high specificity) */
.site-header.solid .brand-logo .bl-light{display:block!important}
.site-header.solid .brand-logo .bl-dark{display:none!important}
.site-header.nav-light .brand-logo .bl-light,
.site-header.solid.nav-light .brand-logo .bl-light{display:none!important}
.site-header.nav-light .brand-logo .bl-dark,
.site-header.solid.nav-light .brand-logo .bl-dark{display:block!important}
/* shadow only over the transparent video bar */
.site-header.solid .brand-logo img,.site-header.nav-light .brand-logo img{filter:none!important}

/* gallery: subtitle -> tabs <=48px */
.gal-head .lede{margin-bottom:0!important}
.gal-tabs-sec{padding-top:24px!important}
/* suite: grid -> 'In this suite' ~64px */
.suite-grid{padding-bottom:28px!important}
.suite-feats{padding-top:28px!important}

/* ======================================================================
   PHASE 2 — language switcher (EN · FR · ES · RU), left of the logo
   ====================================================================== */
.hdr-right{display:flex;align-items:center;gap:22px}
.lang-switch{display:flex;align-items:center;font-family:var(--sans);font-size:.72rem;letter-spacing:.14em}
.lang-switch .ls-link{padding:0 8px;opacity:.6;position:relative;color:inherit;text-transform:uppercase}
.lang-switch .ls-link + .ls-link::before{content:"·";position:absolute;left:-2px;opacity:.45}
.lang-switch .ls-link[aria-current="true"]{opacity:1;font-weight:500}
.lang-switch .ls-link:hover{opacity:1;color:var(--gold)}
/* colour by bar bg */
.site-header .lang-switch{color:#fff}
.site-header.nav-light .lang-switch{color:var(--navy)}
.site-header.solid:not(.nav-light) .lang-switch{color:#fff}
/* bar vs panel visibility */
.lang-switch.panel{display:none}
@media(min-width:1201px){.nav-toggle{display:none!important}}
@media(max-width:1200px){
  .lang-switch.bar{display:none}
  .nav .lang-switch.panel{display:flex;margin-top:22px;color:var(--navy)!important;font-size:.92rem}
  .nav .lang-switch.panel .ls-link{font-family:var(--sans)!important;font-size:.92rem!important;letter-spacing:.16em!important;color:var(--navy)!important;text-transform:uppercase!important}
}

/* longer languages (ES/RU) — tighten inline nav so it still fits 1200-1440 before the compact menu */
@media(min-width:1201px) and (max-width:1460px){
  html[lang="ru"] .nav, html[lang="es"] .nav{gap:12px}
  html[lang="ru"] .nav a, html[lang="es"] .nav a{font-size:.71rem;letter-spacing:.02em}
  html[lang="ru"] .hdr-right, html[lang="es"] .hdr-right{gap:14px}
  html[lang="ru"] .lang-switch .ls-link, html[lang="es"] .lang-switch .ls-link{padding:0 5px}
}

/* ======================================================================
   ROUND 15 — single vertical rhythm + 1200 axis (authoritative)
   ====================================================================== */
:root{
  --sec:48px;        /* section vertical padding -> 96px between two sections */
  --band2sec:80px;   /* top-of-page photo band -> first section */
  --g-eyebrow:16px;  /* surtitle -> title */
  --g-title:24px;    /* title -> text */
  --g-content:48px;  /* text -> content (photos/grid/list/buttons) */
}
@media(max-width:1439px){ :root{--sec:40px} }                 /* laptop: 80 between */
@media(max-width:767px){ :root{--sec:28px; --band2sec:48px; --g-content:32px} } /* phone: 56 between */

/* container axis: max 1200, side margins 48 (laptop) / 20 (phone) */
:root{ --maxw:1200px; --pad:clamp(20px,5vw,48px); }
.wrap{max-width:1200px}

/* one section rhythm (kills the 176px inter-section voids). Inline styles still win where intentional. */
main > section{padding-block:var(--sec)}
.hero + section, .page-hero + section{padding-top:var(--band2sec)}
main > section.band-navy.inner-band{padding-bottom:10px}   /* navy hero bands keep tight bottom */

/* centred text blocks: max 720, centred on the axis */
.center .lede, .center > .wrap > .lede, section.center .measure-wide,
.wrap.center .lede, .wrap.center > p{max-width:720px;margin-left:auto;margin-right:auto}

/* heading micro-rhythm */
.center .eyebrow, .feature .eyebrow, .teaser .eyebrow, .txt .eyebrow{display:inline-block;margin-bottom:var(--g-eyebrow)}
.feature .txt h2, .teaser .txt h2{margin-bottom:var(--g-title)}
.feature .txt p, .teaser .txt p{margin-top:0}

/* photo + text: 12-col (photo 7 / text 5), text vertically centred, alternating L/R, stack on phone */
@media(min-width:860px){
  .feature{grid-template-columns:7fr 5fr;align-items:center;gap:clamp(32px,4vw,64px)}
  .feature.rev{grid-template-columns:5fr 7fr}
  .teaser{grid-template-columns:7fr 5fr;align-items:center;gap:clamp(32px,4vw,64px)}
  .teaser.rev{grid-template-columns:5fr 7fr}
}

/* R15 point 3 — active page link: brand-gold filet (1px, 6px below baseline); word keeps its legible colour */
.nav a[aria-current="page"]{opacity:1 !important;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:6px}
.nav-light .nav a[aria-current="page"]{color:var(--navy) !important}            /* ivory bar: navy word + gold filet */
.site-header:not(.nav-light) .nav a[aria-current="page"]{color:#fff !important}  /* dark/navy bar: white word + gold filet */
@media(max-width:1200px){ .nav a[aria-current="page"]{color:var(--navy) !important;text-underline-offset:7px} } /* ivory panel */
/* active language in the switcher: gold filet */
.lang-switch .ls-link[aria-current="true"]{opacity:1;font-weight:500;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:5px}

/* R15 point 2 — balanced, centred lists + wellness 2-up + attached isolated line */
.grid32.grid2{grid-template-columns:1fr 1fr;max-width:940px;margin-inline:auto}
@media(max-width:600px){.grid32.grid2{grid-template-columns:1fr}}

/* In the app: 3 balanced columns, centred */
.facts.facts-app{grid-template-columns:repeat(3,1fr);max-width:860px;margin-inline:auto;text-align:left;gap:0 44px}
@media(max-width:780px){.facts.facts-app{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.facts.facts-app{grid-template-columns:1fr}}

/* In this suite / In detail: centre the grid, incomplete last row centred */
.indetail{display:flex;flex-wrap:wrap;justify-content:center;gap:0 48px;max-width:980px;margin-inline:auto}
.indetail li{flex:0 0 auto;width:calc(33.333% - 32px);min-width:230px;text-align:left}
@media(max-width:780px){.indetail li{width:calc(50% - 24px)}}
@media(max-width:520px){.indetail li{width:100%}}

/* isolated Latitude line attached to the In-the-app list (32px above, no void) */
.lat-line{margin:32px auto 0;max-width:720px;text-align:center}
.lat-line a{color:var(--navy);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.lat-line a:hover{color:var(--gold)}

/* Latitude artwork visible (coords corrected) */
.lat8-art{display:block}

/* R15 — normalise section-edge margins so inter-section gap == section padding (96/80/56), no element-margin creep */
main > section > *:first-child, main > section > .wrap > *:first-child, main > section > .wrap > .center > *:first-child{margin-top:0}
main > section > *:last-child, main > section > .wrap > *:last-child, main > section > .wrap > .center > *:last-child{margin-bottom:0}
/* page-hero: title sits closer to the band bottom so band->section reads ~80px (not photo+80) */
.page-hero .hero-inner{padding-bottom:clamp(24px,4vh,44px)}

/* ======================================================================
   ROUND 16 — wellness 2x2 + services 8-item grid
   ====================================================================== */
.grid32.g2x2{grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.grid32.g2x2{grid-template-columns:1fr}}

.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3vw,42px) 36px;margin-top:var(--g-content);text-align:left;align-items:start}
@media(max-width:1024px){.services-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.services-grid{grid-template-columns:1fr}}
.svc h3{font-family:var(--serif);font-weight:500;font-size:1.28rem;color:var(--navy);margin:0 0 8px;letter-spacing:.005em;line-height:1.2}
.svc p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
.svc-foot{text-align:center;max-width:720px;margin:32px auto 0;color:var(--navy);font-family:var(--serif);font-style:italic;font-size:1.12rem}

/* ======================================================================
   ROUND 17 — Included section + The Senses (sound & scent)
   ====================================================================== */
/* A1 — Included in every stay: 3 centred text cards (Services style) */
.included-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3vw,42px) 36px;margin-top:var(--g-content);max-width:1120px;margin-inline:auto}
@media(max-width:1000px){.included-grid{grid-template-columns:repeat(2,1fr);max-width:720px}}
@media(max-width:760px){.included-grid{grid-template-columns:1fr;max-width:420px}}
.included-grid .svc{text-align:center}
.inc-card{display:block;text-decoration:none;color:inherit;transition:opacity .25s}
a.inc-card:hover{opacity:.7}

/* A5 — The Senses: two equal columns, same construction */
.senses-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);margin-top:var(--g-content);align-items:start}
@media(max-width:760px){.senses-grid{grid-template-columns:1fr;gap:44px;justify-items:center;text-align:center}}
.sense{display:flex;flex-direction:column;align-items:flex-start}
@media(max-width:760px){.sense{align-items:center}}
.sense-art{width:200px;height:200px;border-radius:var(--r);overflow:hidden;background:#0b0e12;line-height:0;margin-bottom:22px;flex:0 0 auto}
.sense-art.sense-art-ivory{background:rgb(245,241,234);border:1px solid var(--line)}
.sense-art img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:760px){.sense-art{width:160px;height:160px}}
.sense-txt .eyebrow{display:block;margin-bottom:var(--g-eyebrow)}
.sense-txt h3{margin:0 0 var(--g-title)}
.sense-txt p{margin:0 0 14px}
.sense-link{color:var(--navy);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;font-size:.92rem;letter-spacing:.02em}
.sense-link:hover{color:var(--gold)}

/* ======================================================================
   ROUND 17 — Aman final pass: typography scale, buttons, motion
   ====================================================================== */
/* B1 — one coherent type scale */
body{font-size:17px;line-height:1.6;letter-spacing:.005em}
@media(max-width:767px){body{font-size:16px}}
.eyebrow{font-size:.78rem;letter-spacing:.3em;font-weight:400}
p{line-height:1.6}
.measure{max-width:68ch;margin-inline:auto}
.measure-wide{max-width:76ch;margin-inline:auto}
.lede{line-height:1.5}

/* B2 — exactly two button styles, identical geometry/height */
.btn,.btn-dark,.btn-primary{display:inline-block;font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;padding:13px 28px;border-radius:2px;border:1px solid;transition:background .3s,color .3s,opacity .3s;cursor:pointer;line-height:1.1}
/* PRIMARY — navy fill, ivory text (one per screen) */
.btn-primary{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn-primary:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
/* SECONDARY — thin outline */
.btn-dark{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-dark:hover{background:var(--navy);color:var(--white)}
/* .btn over dark hero/video = secondary on dark (ivory outline) */
.btn{background:transparent;border-color:rgba(255,253,249,.7);color:var(--white)}
.btn:hover{background:var(--white);color:var(--navy);border-color:var(--white)}
.band-navy .btn-primary{background:var(--white);color:var(--navy);border-color:var(--white)}
.band-navy .btn-primary:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}

/* B5 — scroll reveal (fade only). Head script adds html.js (and html.rm for reduced-motion). */
html.js:not(.rm) main>section{opacity:0;transition:opacity .45s ease}
html.js:not(.rm) main>section.in{opacity:1}
html.js:not(.rm) main>section.hero,html.js:not(.rm) main>section.page-hero{opacity:1}

/* B3 — one consistent corner radius on content photos (device/card frames keep their own) */
:root{--r-img:6px}
.feature .fig img,.teaser .fig img,.moment .fig img,.hlc-img,.hlc-img img,.grid32 .g32,.suite-card img,.jcard img,.article .cover,.fig45 img{border-radius:var(--r-img)}

/* ======================================================================
   ROUND 18 — button variant driven by the REAL section background
   (overrides all earlier .btn/.btn-dark colour rules by source order)
   ====================================================================== */
.btn,.btn-dark,.btn-primary,.btn-outline{display:inline-block;font-family:var(--sans);font-size:.74rem;
  letter-spacing:.2em;text-transform:uppercase;padding:13px 28px;border:1px solid;border-radius:2px;
  transition:background .2s ease,color .2s ease,border-color .2s ease;cursor:pointer;line-height:1.1;text-decoration:none}
/* LIGHT sections (default): primary = navy fill / secondary = navy outline */
.btn-primary{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn,.btn-dark,.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-primary:hover{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn:hover,.btn-dark:hover,.btn-outline:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}
/* DARK sections (hero / video / navy band): invert */
.hero .btn-primary,.page-hero .btn-primary,.band-navy .btn-primary{background:var(--white);color:var(--navy);border-color:var(--white)}
.hero .btn,.hero .btn-dark,.hero .btn-outline,
.page-hero .btn,.page-hero .btn-dark,.page-hero .btn-outline,
.band-navy .btn,.band-navy .btn-dark,.band-navy .btn-outline{background:transparent;color:var(--white);border-color:var(--white)}
.hero .btn-primary:hover,.page-hero .btn-primary:hover,.band-navy .btn-primary:hover{background:transparent;color:var(--white);border-color:var(--white)}
.hero .btn:hover,.hero .btn-dark:hover,.hero .btn-outline:hover,
.page-hero .btn:hover,.page-hero .btn-dark:hover,.page-hero .btn-outline:hover,
.band-navy .btn:hover,.band-navy .btn-dark:hover,.band-navy .btn-outline:hover{background:var(--white);color:var(--navy);border-color:var(--white)}

/* R18 — nav "Reserve" button follows the BAR colour (header is not a section) */
.site-header .btn{background:transparent;color:#fff;border-color:rgba(255,253,249,.85)}
.site-header.nav-light .btn{color:var(--navy);border-color:var(--navy)}
.site-header:not(.nav-light) .btn:hover{background:#fff;color:var(--navy);border-color:#fff}
.site-header.nav-light .btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
/* compact-menu panel (ivory) Reserve = navy outline */
@media(max-width:1200px){.nav .btn{color:var(--navy)!important;border-color:var(--navy)!important}}

/* R18 point 3 — sustainability line + grid */
.sustain-line a{color:var(--navy);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sustain-line a:hover{color:var(--gold)}
.sustain-grid{max-width:none}

/* R18 point 4 — compact menu: ONE opaque ivory panel, single fade, above everything, scroll-locked */
@media(max-width:1200px){
  .nav{position:fixed!important;inset:0!important;transform:none!important;
    background:rgb(245,241,234)!important;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s ease,visibility .25s ease!important;z-index:200!important;
    display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:40px;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .nav.open{opacity:1;visibility:visible;pointer-events:auto}
  .nav-toggle{z-index:210!important}
  body.menu-open{overflow:hidden;touch-action:none}
  body.menu-open .nav-toggle{color:var(--navy)!important}
  body.menu-open .wa-float{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
}

/* R18 point 4 FIX — header backdrop-filter (on .solid) makes it the containing block for the
   fixed menu panel; disable it while the menu is open so the panel fills the viewport. */
body.menu-open .site-header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* ======================================================================
   ROUND FINAL — block alignment (buttons/links on one baseline) + fixes
   ====================================================================== */
/* THE SENSES: equal-height columns, Spotify link pushed to the bottom line */
.senses-grid{align-items:stretch}
.sense{display:flex;flex-direction:column;height:100%}
.sense-txt{display:flex;flex-direction:column;flex:1 1 auto}
.sense-cta{margin-top:auto;padding-top:14px}
/* Generic: any side-by-side card/block set whose items carry a CTA → CTA on the bottom line */
.teaser{align-items:stretch}
.teaser .txt{display:flex;flex-direction:column}
.teaser .txt > p:last-child:has(.btn,.btn-dark,.btn-primary){margin-top:auto;padding-top:12px}

/* ======================================================================
   ROUND FINAL 2 — Aman finishes (authoritative, last-wins)
   6.1 single radius ≤2px · 6.2 scroll navbar · 6.3 motion · 6.5 wa-float
   ====================================================================== */

/* ---- 6.1 ONE corner radius (≤2px) on every image / card / frame / field /
   map / THE SENSES visual. Exceptions: phone-frame (realistic device corners)
   and the round WhatsApp button. ---- */
:root{--r:2px; --r-img:2px}
.fig img,.feature .fig img,.teaser .fig img,.moment .fig img,
.hlc-img,.hlc-img img,.grid32 .g32,.grid32 .g32 img,
.suite-card,.suite-card img,.jcard,.jcard img,.article .cover,
.fig45 img,.massage-feat .fig45 img,.massage-band img,
[data-gallery].masonry .gcell,.gcell,.gcell img,
.sense-art,.sense-art img,.lat8-art,
.where-map,.where-map img,.map-wrap,
form.enquiry input,form.enquiry textarea,.form-success,.en-bref-box,
.gal-row .gph,.gal-rows .gph,.gph,.gph img,
.lb img,.gal-lb img{border-radius:var(--r)!important}
/* kept intentionally non-2px: realistic phone frames + round WhatsApp */
.phone-frame{border-radius:30px!important}
.phone-frame img,.fig .phone-frame img,.portal-row .phone-frame img{border-radius:24px!important}

/* ---- 6.2 Scroll navbar: on hero/photo pages the scrolled bar becomes ivory
   glass (92% + blur 12px), navy ink, gold active link, ~72px. Transparent at
   the top is unchanged. Inner (nav-light) pages keep their ivory bar. ---- */
.site-header.solid:not(.nav-light){
  background:rgba(245,241,234,.92)!important;
  -webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important;
  border-bottom:1px solid rgba(27,42,58,.1)!important;box-shadow:none!important;
  padding-top:16px!important;padding-bottom:16px!important}
.site-header.solid:not(.nav-light)::before{opacity:0!important}
.site-header.solid:not(.nav-light) .nav a{color:var(--navy)!important;text-shadow:none!important;opacity:.82}
.site-header.solid:not(.nav-light) .nav a:hover{color:var(--gold)!important;opacity:1}
.site-header.solid:not(.nav-light) .nav a[aria-current="page"]{color:var(--navy)!important}
.site-header.solid:not(.nav-light) .lang-switch{color:var(--navy)!important}
.site-header.solid:not(.nav-light) .nav-toggle{color:var(--navy)!important}
/* Reserve button on the scrolled ivory bar = navy outline (contrast ≥ 4.5) */
.site-header.solid:not(.nav-light) .btn{background:transparent!important;color:var(--navy)!important;border-color:var(--navy)!important;text-shadow:none!important}
.site-header.solid:not(.nav-light) .btn:hover{background:var(--navy)!important;color:#fff!important;border-color:var(--navy)!important}
/* logo flips to navy once the bar is ivory */
.site-header.solid:not(.nav-light) .brand-logo .bl-light{display:none!important}
.site-header.solid:not(.nav-light) .brand-logo .bl-dark{display:block!important}
.site-header.solid:not(.nav-light) .brand-logo img{filter:none!important}

/* ---- 6.3 Motion: reveal fade 800ms + ≤12px lift (once); hover zoom 1.03/1.2s
   on clickable images; parallax handled in app.js. Reduced-motion disables all. ---- */
html.js:not(.rm) main>section{opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform .8s ease;will-change:opacity,transform}
html.js:not(.rm) main>section.in{opacity:1;transform:none}
html.js:not(.rm) main>section.hero,html.js:not(.rm) main>section.page-hero{opacity:1;transform:none}
.gcell img,.grid32 .g32 img,.suite-card img,.jcard img,.hlc img,.hlc-img img{transition:transform 1.2s ease}
.gcell:hover img,.grid32 .g32:hover img,.suite-card:hover img,.jcard:hover img,.hlc:hover img{transform:scale(1.03)}
[data-hero],.hero>video{will-change:transform}
@media(prefers-reduced-motion:reduce){
  html.js main>section{opacity:1!important;transform:none!important}
  .gcell img,.grid32 .g32 img,.suite-card img,.jcard img,.hlc img,.hlc-img img{transition:none!important}
  .gcell:hover img,.grid32 .g32:hover img,.suite-card:hover img,.jcard:hover img,.hlc:hover img{transform:none!important}
  [data-hero],.hero>video{transform:none!important}
}

/* ---- 6.5 Floating WhatsApp: 48px, navy, light shadow, 24px from the edge ---- */
.wa-float{width:48px!important;height:48px!important;right:calc(24px + env(safe-area-inset-right,0px))!important;bottom:calc(24px + env(safe-area-inset-bottom,0px))!important;box-shadow:0 4px 14px rgba(20,18,15,.18)!important}
.wa-float svg{width:24px!important;height:24px!important}

/* ======================================================================
   ROUND DE CLÔTURE — radius sweep · teaser grouping · band-navy buttons ·
   where-to-find-us · sustainability photo · legal pages (authoritative)
   ====================================================================== */

/* --- radius: EVERY image/card/frame/field/map/visual → --r (2px). Catches the
   remaining containers (The Day .moment .fig, .lat8-art, hlc-img, map, etc.).
   Only realistic phone frames + the round WhatsApp button are excepted. --- */
.jcard,.jcard img,.article .cover,.hlc,.form-success,.flag-note,.en-bref-box,
form.enquiry input,form.enquiry textarea,
.fig img,.feature .fig img,.teaser .fig img,.moment .fig,.moment .fig img,
[data-gallery].masonry .gcell,.gcell,.gcell img,
.charter-partner img.charter-logo,.grid32 .g32,.grid32 .g32 img,
.gal-row .gph,.gal-rows .gph,.gph,.gph img,.gal-lb img,.lb img,
.map-wrap,.where-map,.where-map img,
.massage-feat .fig45 img,.massage-sm img,.massage-band img,
.hlc .hlc-img,.hlc-img,.hlc-img img,.services-photos img,
.sense-art,.sense-art img,.lat8-art,.lat8-art img,
.suite-card,.suite-card img,.sustain-photo{border-radius:var(--r)!important}

/* --- Photo+text teasers: text+button GROUPED, button 32px under text, group
   vertically centred vs the photo/phone. margin-top:auto kept ONLY for the
   side-by-side cards opted in with .cta-bottom (Signature stays, Estate). --- */
.teaser:not(.cta-bottom){align-items:center}
.teaser:not(.cta-bottom) .txt{display:block}
.teaser:not(.cta-bottom) .txt > p:last-child:has(.btn,.btn-dark,.btn-primary){margin-top:32px;padding-top:0}
.teaser.cta-bottom{align-items:stretch}
.teaser.cta-bottom .txt{display:flex;flex-direction:column;height:100%}
.teaser.cta-bottom .txt > p:last-child:has(.btn,.btn-dark,.btn-primary){margin-top:auto;padding-top:12px}

/* --- band-navy is ivory now (two-backgrounds rule): its buttons follow LIGHT
   rules so "See the app" (primary) is navy-fill ivory-text, never ivory/ivory. --- */
.band-navy .btn-primary{background:var(--navy)!important;color:var(--white)!important;border-color:var(--navy)!important}
.band-navy .btn-primary:hover{background:var(--gold)!important;color:var(--navy)!important;border-color:var(--gold)!important}
.band-navy .btn,.band-navy .btn-dark,.band-navy .btn-outline{background:transparent!important;color:var(--navy)!important;border-color:var(--navy)!important}
.band-navy .btn:hover,.band-navy .btn-dark:hover,.band-navy .btn-outline:hover{background:var(--navy)!important;color:var(--white)!important;border-color:var(--navy)!important}

/* --- Where to find us: Address + Getting here both LEFT-aligned; the transfers
   note sits in the Getting-here column, 24px under the list. --- */
.where-foot .wi-addr,.where-foot .wi-here{text-align:left!important}
.where-foot .wi-here .facts{margin-left:0}
.wi-note{margin:24px 0 0;color:var(--muted);font-size:.95rem}

/* --- Sustainability photo (g276): 16:9, full container width, above the cards --- */
.sustain-photo{margin:var(--g-content) auto 0;max-width:1120px;aspect-ratio:16/9;overflow:hidden}
.sustain-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* --- Legal pages + preview-only draft banner --- */
.draft-banner{display:block;background:#7a2e2e;color:#fff;text-align:center;font-family:var(--sans);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;padding:9px 16px;border-radius:var(--r);margin:0 0 28px}
.legal{max-width:760px;margin-inline:auto}
.legal h1{margin-bottom:6px}
.legal .legal-intro{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.5;color:var(--navy);margin:16px 0 6px}
.legal h2{font-size:1.3rem;margin:30px 0 8px}
.legal p{color:var(--ink);line-height:1.75;margin:0 0 4px}

/* ======================================================================
   ROUND FINAL (6 corrections) — phone frame fill · contact form · (EN) badge
   ====================================================================== */
/* 1. Guest-app phone frame: image fills the screen, navy screen bg (no white band) */
.phone-frame{aspect-ratio:1170/2532!important;height:auto!important;background:#0f1b31!important;overflow:hidden!important}
.phone-frame img,.fig .phone-frame img,.portal-row .phone-frame img{
  width:100%!important;height:100%!important;object-fit:cover!important;object-position:top!important;
  aspect-ratio:auto!important;display:block!important;border-radius:22px!important}
/* home Guest-app teaser: centre the text+button group on the phone's vertical centre */
.band-navy .teaser:not(.cta-bottom){align-items:center}
.band-navy .teaser .fig{align-self:center}

/* 2. Contact form: even 24px vertical rhythm, equal field heights, left-aligned booking link */
body[data-page="contact"] .form-grid{gap:24px}
body[data-page="contact"] form.enquiry .field{margin:0}
body[data-page="contact"] form.enquiry input{height:52px;padding:0 14px;line-height:normal}
body[data-page="contact"] form.enquiry textarea{padding:12px 14px;min-height:112px}
body[data-page="contact"] form.enquiry > .field{margin-top:24px}
body[data-page="contact"] form.enquiry .form-note{margin-top:24px}
body[data-page="contact"] form.enquiry .rc-form-btns{margin-top:24px}
body[data-page="contact"] .booking-link{max-width:720px;margin:24px auto 0;text-align:left}

/* 4. Journal "(EN)" badge on localized index pages (hidden on the English site) */
.jc-en{display:inline-block;margin-left:8px;font-size:.58rem;letter-spacing:.14em;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r);padding:1px 5px;vertical-align:middle;text-transform:uppercase}
html[lang="en"] .jc-en{display:none}
/* legal: last-updated line */
.legal-updated{margin-top:28px;color:var(--muted);font-size:.82rem;font-style:italic}

/* ======================================================================
   ROUND CORRECTIFS + AMAN — phone ratio · booking-link x · header redesign
   ====================================================================== */

/* A — phone frame: screen ratio 1170/2532 (exact HD capture ratio) so object-fit:cover
   shows the whole screenshot with NO crop and NO background padding */
.phone-frame,.portal-row .phone-frame,.fig .phone-frame{
  aspect-ratio:1170/2532!important;height:auto!important;padding:0!important;background:#0f1b31!important;overflow:hidden!important}
.phone-frame img,.fig .phone-frame img,.portal-row .phone-frame img{
  width:100%!important;height:100%!important;object-fit:cover!important;object-position:top!important;
  aspect-ratio:auto!important;display:block!important;border-radius:0!important}

/* B — contact: booking link shares the form's exact left edge (form is 760px, not 720) */
body[data-page="contact"] .booking-link{max-width:760px!important;margin:24px auto 0!important;text-align:left!important}

/* C — header: centred logo · Menu (left) · lang dropdown + Reserve (right) */
.site-header{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}
.hdr-left{justify-self:start;display:flex;align-items:center}
.hdr-center{justify-self:center;display:flex;align-items:center}
.hdr-right{justify-self:end;display:flex;align-items:center;gap:16px}
.hdr-center .brand-logo img{height:auto!important;width:150px!important}
@media(max-width:560px){.hdr-center .brand-logo img{width:118px!important}.hdr-right{gap:10px}.site-header{gap:8px}}

/* Menu button — CSS 2-line icon + translated word; visible on every width */
.nav-toggle{display:inline-flex!important;align-items:center;gap:10px;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;line-height:1;padding:6px 2px;color:inherit}
.nav-toggle::before{content:"";width:20px;height:11px;border-top:1.6px solid currentColor;border-bottom:1.6px solid currentColor}
@media(min-width:1201px){.nav-toggle{display:inline-flex!important}}
@media(max-width:560px){.nav-toggle{font-size:0;gap:0}.nav-toggle::before{width:22px;height:13px}}

/* bar-colour-aware ink for the header controls */
.site-header .nav-toggle,.site-header .lang-dd>summary{color:#fff}
.site-header:not(.nav-light):not(.solid) .nav-toggle,.site-header:not(.nav-light):not(.solid) .lang-dd>summary{text-shadow:0 1px 8px rgba(0,0,0,.45)}
.site-header.nav-light .nav-toggle,.site-header.nav-light .lang-dd>summary,
.site-header.solid:not(.nav-light) .nav-toggle,.site-header.solid:not(.nav-light) .lang-dd>summary{color:var(--navy);text-shadow:none}

/* compact language dropdown */
.lang-dd{position:relative}
.lang-dd>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.14em}
.lang-dd>summary::-webkit-details-marker{display:none}
.lang-caret{width:10px;height:6px;transition:transform .2s ease}
.lang-dd[open] .lang-caret{transform:rotate(180deg)}
.lang-dd-menu{position:absolute;top:calc(100% + 12px);right:0;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 12px 30px rgba(20,18,15,.16);padding:8px 6px;display:flex;flex-direction:column;gap:2px;min-width:76px;z-index:220}
.lang-dd-menu .ls-link{padding:7px 14px;color:var(--navy)!important;opacity:.72;font-size:.8rem;letter-spacing:.16em;text-shadow:none!important}
.lang-dd-menu .ls-link:hover,.lang-dd-menu .ls-link[aria-current="true"]{opacity:1;color:var(--gold)!important}
.lang-dd-menu .ls-link + .ls-link::before{content:none!important}

/* Reserve — filled, follows the bar colour */
.hdr-reserve{padding:9px 20px!important;font-size:.72rem!important;border:1px solid!important}
.site-header:not(.nav-light):not(.solid) .hdr-reserve{background:var(--white)!important;color:var(--navy)!important;border-color:var(--white)!important}
.site-header.nav-light .hdr-reserve,.site-header.solid:not(.nav-light) .hdr-reserve{background:var(--navy)!important;color:#fff!important;border-color:var(--navy)!important}
.site-header:not(.nav-light):not(.solid) .hdr-reserve:hover{background:var(--gold)!important;color:var(--navy)!important;border-color:var(--gold)!important}
.site-header.nav-light .hdr-reserve:hover,.site-header.solid:not(.nav-light) .hdr-reserve:hover{background:var(--gold)!important;color:var(--navy)!important;border-color:var(--gold)!important}

/* full-screen navy panel (role=dialog) */
.nav-panel{position:fixed;inset:0;z-index:300;background:var(--navy);color:#f5f1ea;
  display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(56px,9vh,96px) var(--pad);
  opacity:0;transition:opacity .28s ease}
.nav-panel[hidden]{display:none!important}
.nav-panel.open{opacity:1}
.nav-close{position:absolute;top:22px;right:28px;background:none;border:0;color:#f5f1ea;font-size:2.6rem;line-height:.6;cursor:pointer;padding:6px}
.nav-close:hover{color:var(--gold)}
.np-links{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,2vh,18px);flex:1 1 auto;justify-content:center;margin:0;padding:0}
.np-links a{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,5.2vw,2.9rem);color:#f5f1ea;line-height:1.08;letter-spacing:.01em}
.np-links a:hover,.np-links a[aria-current="page"]{color:var(--gold)}
.np-foot{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding-top:20px}
.np-addr{font-size:.85rem;color:rgba(245,241,234,.72);max-width:38ch;margin:0;line-height:1.5}
.np-wa{font-size:.92rem;color:#f5f1ea;border-bottom:1px solid rgba(245,241,234,.4);padding-bottom:1px}
.np-wa:hover{color:var(--gold);border-color:var(--gold)}
.np-foot .lang-switch{display:flex;gap:2px;margin-top:4px}
.np-foot .lang-switch .ls-link{color:#f5f1ea;font-size:.92rem;letter-spacing:.16em;opacity:.8;padding:0 8px}
.np-foot .lang-switch .ls-link[aria-current="true"]{color:var(--gold);opacity:1}
.np-foot .lang-switch .ls-link + .ls-link::before{content:"·";opacity:.4;position:absolute;left:-2px}
body.panel-open{overflow:hidden}
/* hide the consent banner while the full-screen menu panel is open (it would overlap the language row) */
body.panel-open [aria-label="Cookie consent"]{display:none!important}

/* ======================================================================
   ROUND SUITE — scroll header 80px/300ms · menu panel logo+layout
   ====================================================================== */
/* 1 — smooth 300ms transition when the bar turns ivory (threshold 80px set in app.js) */
.site-header{transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease,color .3s ease,padding .3s ease!important}
.site-header .brand-logo img,.site-header .nav-toggle,.site-header .lang-dd>summary,.site-header .hdr-reserve{transition:color .3s ease,background .3s ease,border-color .3s ease,opacity .3s ease}

/* 2 — menu panel: ivory logo at top, links centred in the space below (>=96px under the logo), address 2 lines */
.nav-panel{justify-content:space-between!important;padding-block:clamp(22px,4vh,46px)!important}
.np-top{display:flex;justify-content:center;width:100%}
.np-logo img{height:auto!important;width:168px!important;display:block;filter:none!important}
.np-links{flex:1 1 auto;justify-content:center;padding-top:96px}
.np-addr{max-width:none!important;font-size:clamp(.76rem,3.2vw,.9rem);line-height:1.6}
@media(max-width:560px){.np-logo img{width:140px!important}.np-links{padding-top:96px;gap:6px}}

/* Guest App — phone caption (screen name + description), two translatable leaves */
.portal-row figcaption.pc-t{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);margin-top:14px}
.portal-row p.pc-d{font-size:.84rem;letter-spacing:normal;text-transform:none;color:var(--muted);margin:6px auto 0;line-height:1.5;max-width:30ch;text-align:center}

/* home highlight cards — equal 4:5 images + titles reserve 2 lines so all card texts top-align */
.highlights.hlphoto .hlc .hlc-cap h2{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;min-height:2.35em;display:block}

/* ======================================================================
   HEADER-FIX round — logo visibility, RESERVE safety, hero-title wrap
   ====================================================================== */
/* 1a — transparent bar over photo/video: discreet dark gradient 0.45 -> 0 at 220px */
.site-header:not(.solid):not(.nav-light)::before{height:220px!important;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0))!important;opacity:1!important;border:0!important}
/* 1b — white logo over media: 100% opacity + soft drop-shadow */
.site-header:not(.solid):not(.nav-light) .brand-logo .bl-light{opacity:1!important;filter:drop-shadow(0 1px 6px rgba(0,0,0,.5))!important}
/* 1c — scrolled (solid) + inner (nav-light) bars: navy logo (= RESERVE navy) at 100% opacity, no shadow/gray */
.site-header.solid .brand-logo img,.site-header.nav-light .brand-logo img{opacity:1!important}
.site-header.solid .brand-logo .bl-dark,.site-header.nav-light .brand-logo .bl-dark{filter:none!important}
/* 1d — +15% logo on desktop (150 -> 172px) in the top state; solid stays 124px so the solid-bar height is unchanged */
@media(min-width:901px){.hdr-center .brand-logo img{width:172px!important}}

/* 2 — RESERVE/lang never clipped: right group stays intact; bar never overflows the viewport */
.site-header{box-sizing:border-box!important;max-width:100vw!important}
.hdr-right{flex:0 0 auto}
.hdr-right,.hdr-reserve{white-space:nowrap}

/* 3 — hero / page-hero main title: never clipped — responsive, wraps, centred, max 90vw */
.hero .hero-inner h1,.page-hero .hero-inner h1{
  font-size:clamp(2rem,5.8vw,5.5rem)!important;max-width:90vw!important;
  margin-left:auto!important;margin-right:auto!important;overflow-wrap:break-word;text-wrap:balance}
@media(max-width:560px){.hero .hero-inner h1,.page-hero .hero-inner h1{font-size:clamp(1.7rem,7.5vw,2.6rem)!important}}

/* ======================================================================
   SOLID-HEADER LOGO legibility (scrolled / inner cream bar)
   ====================================================================== */
/* navy logo: 124 -> 156px on desktop; 120px minimum on mobile */
@media(min-width:901px){.site-header.solid .brand-logo img{width:156px!important}}
@media(max-width:900px){.site-header.solid .brand-logo img{width:120px!important}}
/* thicken the thin navy strokes (no change to the drawing) — must out-specify .solid:not(.nav-light) .brand-logo img */
.site-header.solid:not(.nav-light) .brand-logo .bl-dark,.site-header.nav-light .brand-logo .bl-dark{
  filter:drop-shadow(0 0 0.4px #1f2a3a) drop-shadow(0 0 0.4px #1f2a3a)!important;opacity:1!important}
/* solid bar: minimal height around the larger logo (overrides the earlier 16px rule), logo clear of edges, centred */
.site-header.solid:not(.nav-light){padding-top:7px!important;padding-bottom:7px!important}
/* transparent gradient drops to opacity 0 INSTANTLY when the bar turns solid — no grey band while scrolling */
.site-header::before,.site-header.solid::before{transition:none!important}
.site-header.solid::before{opacity:0!important}
/* home hero end-card: tagline / over-title / CTA fade out over the final logo card (0.6s), fade back in when the loop restarts. Opacity only — text stays in the DOM and a11y tree. */
.hero .hero-inner{transition:opacity .6s ease}
.hero .hero-inner.is-endcard{opacity:0}
@media (prefers-reduced-motion:reduce){.hero .hero-inner{transition:none}.hero .hero-inner.is-endcard{opacity:1}}

/* ======================================================================
   MOBILE-HEADER round (<600px) — 3 fixed zones, page-centred logo,
   language selector moved into the menu, compact Reserve. Nothing
   changes at/above 600px.  +  Estate page B1/B2/B3/B4.
   ====================================================================== */
/* short Reserve label hidden by default (desktop + non-RU show the full label) */
.rsv-short{display:none}

@media(max-width:600px){
  /* flex bar: Menu hard-left, Reserve hard-right; logo is taken out of flow and
     centred on the PAGE via absolute positioning (not between its neighbours). */
  .site-header{display:flex!important;justify-content:space-between!important;align-items:center;gap:8px;
    padding-left:14px!important;padding-right:14px!important}
  .hdr-left{justify-self:auto!important;flex:0 0 auto}
  .hdr-right{justify-self:auto!important;flex:0 0 auto}
  .hdr-center{position:absolute!important;left:50%;top:50%;transform:translate(-50%,-50%);
    justify-self:auto!important;margin:0!important;z-index:1;pointer-events:none}
  .hdr-center .brand-logo{pointer-events:auto}
  .hdr-left,.hdr-right{z-index:2}
  .hdr-right{gap:0!important}
  /* logo: min 120px, never shrunk by neighbours (it is out of flow) */
  .hdr-center .brand-logo img{width:128px!important;min-width:120px!important}
  .site-header.solid .hdr-center .brand-logo img{width:122px!important;min-width:120px!important}
  /* language selector lives in the mobile menu, not in the bar */
  .site-header .lang-dd{display:none!important}
  /* compact Reserve — one line, reduced padding + text */
  .hdr-reserve{padding:6px 11px!important;font-size:.62rem!important;letter-spacing:.1em!important;white-space:nowrap}
  html[lang="ru"] .hdr-reserve .rsv-full{display:none}
  html[lang="ru"] .hdr-reserve .rsv-short{display:inline}
}

/* mobile menu: language row at the very top (under the logo), 4 languages, active marked */
.np-lang{display:flex;justify-content:center;width:100%;margin-top:6px}
.np-lang .lang-switch{display:flex;align-items:center;gap:0}
.np-lang .lang-switch .ls-link{color:#f5f1ea;font-size:1rem;letter-spacing:.18em;opacity:.78;padding:4px 12px}
.np-lang .lang-switch .ls-link:hover{opacity:1}
.np-lang .lang-switch .ls-link[aria-current="true"]{color:var(--gold);opacity:1}
.np-lang .lang-switch .ls-link + .ls-link{border-left:1px solid rgba(245,241,234,.28)}

/* ---- Estate page ---- */
/* B2 — the two CTA buttons: 16px gap; side-by-side + centred on desktop,
   stacked + equal-width + centred on mobile */
.estate-cta{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:26px}
@media(max-width:600px){
  .estate-cta{flex-direction:column}
  .estate-cta>.btn-primary,.estate-cta>.btn-dark{width:100%;max-width:320px;text-align:center}
}
/* B1 — "Ask about Amarta Estate" centred horizontally (desktop + mobile) */
.estate-ask{display:block;width:-moz-fit-content;width:fit-content;margin-left:auto;margin-right:auto}
/* B3 — key figures: 2×2 grid on mobile (no orphan line), single row on desktop */
@media(max-width:600px){
  body[data-page="estate"] .suite-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;
    justify-items:center;align-items:start;text-align:center}
}
/* B4 — both estate symbols: same navy, 100% opacity; wordmarks share one baseline */
.estate-logo img{opacity:1!important}

/* ======================================================================
   INTERACTIVE MODULES (6 playground modules) — site design system.
   ====================================================================== */
/* --- Module 5: recolourable header sun + fixed wordmark (JS only; no-JS keeps the combined logo) --- */
html.js .brand-logo .bl-combined{display:none!important}
/* keep the combined fallback hidden even on the solid/ivory bar (out-specify the bl-dark show rule) */
html.js .site-header.solid .brand-logo .bl-combined,html.js .site-header.nav-light .brand-logo .bl-combined{display:none!important}
.brand-split{display:none}
html.js .hdr-center .brand-logo .brand-split{display:inline-flex;align-items:center;line-height:0;width:150px}
@media(min-width:901px){html.js .hdr-center .brand-logo .brand-split{width:172px}}
html.js .site-header.solid .hdr-center .brand-logo .brand-split{width:124px}
@media(min-width:901px){html.js .site-header.solid .hdr-center .brand-logo .brand-split{width:156px}}
@media(max-width:900px){html.js .site-header.solid .hdr-center .brand-logo .brand-split{width:120px}}
@media(max-width:600px){html.js .hdr-center .brand-logo .brand-split{width:128px;min-width:120px}
  html.js .site-header.solid .hdr-center .brand-logo .brand-split{width:122px;min-width:120px}}
.brand-split .brand-sun{flex:0 0 34.78%;aspect-ratio:313/594;
  -webkit-mask:url(/assets/img/logo-azul-sun-mask.png) no-repeat center/contain;
  mask:url(/assets/img/logo-azul-sun-mask.png) no-repeat center/contain;
  background-color:var(--az-sun-light,#f5f1ea);transition:background-color .6s ease}
.site-header.solid .brand-split .brand-sun,.site-header.nav-light .brand-split .brand-sun{background-color:var(--az-sun-dark,#1b2a3a)}
.hdr-center .brand-logo .brand-split .brand-word{flex:0 0 65.22%;width:65.22%!important;height:auto!important;min-width:0!important;filter:none!important}
.brand-split .bw-dark{display:none}
.site-header.solid .brand-split .bw-light,.site-header.nav-light .brand-split .bw-light{display:none}
.site-header.solid .brand-split .bw-dark,.site-header.nav-light .brand-split .bw-dark{display:block}
.brand-split .bw-light{filter:drop-shadow(0 1px 6px rgba(0,0,0,.5))!important}
@media(prefers-reduced-motion:reduce){.brand-split .brand-sun{transition:none}}

/* --- shared module chrome --- */
.az-mod{overflow-wrap:break-word}
.az-head{text-align:center;max-width:720px;margin:0 auto 28px}
.az-head .eyebrow{display:inline-block;margin-bottom:12px}
.az-head h2{margin:0 0 10px}
.az-head p,.az-head .az-instr{color:var(--muted);font-size:.95rem;line-height:1.6;margin:0 auto;max-width:62ch}
.az-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:24px}
.az-msg{color:var(--muted);font-size:.95rem;font-style:italic;font-family:var(--serif)}
.az-mod .note{font-family:var(--sans)}

/* --- Module 1: who sleeps where --- */
.az-switch{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 auto 24px}
.az-switch button{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:10px 18px;
  border:1px solid var(--line);background:transparent;color:var(--navy);cursor:pointer;border-radius:2px;transition:.25s;min-width:0}
.az-switch button.on{background:var(--navy);color:var(--white);border-color:var(--navy)}
.az-guests{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 auto 14px;max-width:760px}
.az-g{position:relative;font-family:var(--sans);font-size:.9rem;padding:9px 32px 9px 16px;border:1px solid var(--line);
  background:var(--white);color:var(--navy);cursor:pointer;border-radius:2px;transition:.2s;min-width:0}
.az-g.on{background:var(--navy);color:var(--white);border-color:var(--navy)}
.az-x{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:18px;height:18px;line-height:17px;text-align:center;border-radius:50%;font-size:14px;opacity:.6}
.az-x:hover,.az-x:focus{opacity:1;color:var(--gold);outline:none}
.az-addrow{display:flex;gap:10px;justify-content:center;max-width:460px;margin:0 auto 24px}
.az-input{flex:1;min-width:0;font-family:var(--sans);font-size:.95rem;padding:11px 14px;border:1px solid var(--line);background:var(--white);color:var(--navy);border-radius:2px}
.az-input:focus{outline:2px solid var(--gold);outline-offset:1px}
.az-suites{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:960px;margin:0 auto}
.az-suite{display:flex;flex-direction:column;gap:6px;text-align:left;padding:16px;border:1px solid var(--line);background:var(--white);cursor:pointer;border-radius:2px;transition:.2s;min-width:0}
.az-suite:hover{border-color:var(--gold)}
.az-suite.full{opacity:.72}
.az-suite.blanca{background:var(--warm-2)}
.az-sub{font-family:var(--sans);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.az-sname{font-family:var(--serif);font-size:1.3rem;color:var(--navy);line-height:1}
.az-beds{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.az-slot{font-family:var(--sans);font-size:.8rem;padding:6px 10px;border:1px dashed var(--line);color:var(--muted);border-radius:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.az-slot.on{border-style:solid;border-color:var(--navy);background:var(--warm);color:var(--navy)}

/* --- Module 2: compose your day --- */
.az-daygrid{display:grid;grid-template-columns:3fr 2fr;gap:28px;max-width:980px;margin:0 auto;align-items:stretch}
/* true 3 columns × 4 rows: headers in the auto row, options in four equal (1fr) rows,
   placed column-by-column so the four rows align across MORNING/AFTERNOON/EVENING */
.az-daycols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto repeat(4,1fr);grid-auto-flow:column;gap:10px 14px}
.az-daycol-h{font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0;text-align:center;align-self:end;padding-bottom:4px}
.az-opt{display:flex;flex-direction:column;gap:4px;width:100%;height:100%;text-align:left;padding:12px;border:1px solid var(--line);background:var(--white);color:var(--navy);cursor:pointer;border-radius:2px;transition:.2s;min-width:0;justify-content:flex-start}
.az-opt>span{font-family:var(--serif);font-size:1rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.az-opt small{font-family:var(--sans);font-size:.72rem;color:var(--muted);line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.9em}
.az-opt.on{background:var(--navy);border-color:var(--navy)}
.az-opt.on>span{color:var(--white)}
.az-opt.on small{color:rgba(255,253,249,.82)}
.az-daycard{background:var(--warm);border:1px solid var(--line);padding:26px;border-radius:2px}
.az-daycard .eyebrow{display:block;margin-bottom:6px}
.az-daycard h3{font-family:var(--serif);margin:0 0 14px}
.az-daylist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.az-daylist li{font-family:var(--serif);font-size:1.08rem;color:var(--navy);line-height:1.25}
.az-daylist li span{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.az-daysig{font-family:"Noto Sans Balinese",var(--serif);font-size:22px;color:var(--navy);margin:18px 0 10px;opacity:.9}
.az-dayfoot{font-family:var(--sans);font-size:.76rem;color:var(--muted);line-height:1.45}

/* --- Module 3: which suite are you --- */
.az-quizbox{max-width:680px;margin:0 auto;min-height:230px}
.az-q .note{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:block;text-align:center;margin-bottom:10px}
.az-q p{font-family:var(--serif);font-size:clamp(1.3rem,3.6vw,1.7rem);text-align:center;color:var(--navy);margin:0 0 22px;line-height:1.2}
.az-answers{display:grid;gap:10px}
.az-answers .az-opt{text-align:center;align-items:center;padding:14px 16px;font-family:var(--serif);font-size:1.08rem}
.az-result{text-align:center}
.az-result .eyebrow{display:block;margin-bottom:6px}
.az-result h3{font-family:var(--serif);font-size:clamp(1.9rem,5vw,2.4rem);margin:0;color:var(--navy)}
.az-result .az-tag{font-family:var(--sans);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin:4px 0 16px}
.az-result>p{color:var(--muted);line-height:1.6;max-width:60ch;margin:0 auto 22px}
.az-result .az-actions{margin-top:0}

/* --- Module 4: footer sunset line --- */
.foot-sunset{font-size:.82rem;color:rgba(245,241,234,.62);margin-top:10px;line-height:1.5}

/* --- Module 6: name in Balinese script --- */
.az-aksara .az-addrow{max-width:360px}
.az-bali-out{font-family:"Noto Sans Balinese",var(--serif);font-size:clamp(40px,10vw,76px);line-height:1.45;color:var(--navy);text-align:center;margin:18px 0 8px;min-height:1.45em;word-break:break-word}
.az-bali-syl{text-align:center;color:var(--muted);font-family:var(--sans);font-size:.85rem;min-height:1.2em}
.az-warn{text-align:center;color:var(--muted);font-size:.76rem;margin:16px auto 0;font-style:italic;font-family:var(--serif);max-width:60ch}

/* --- mobile: no element exceeds the screen; two-button selectors stack full-width --- */
@media(max-width:600px){
  .az-mod .az-suite,.az-mod .az-opt,.az-mod .az-input,.az-mod .az-g,.az-mod button,.az-mod .az-daycard,.az-mod .btn-primary,.az-mod .btn-dark{max-width:100%;min-width:0}
  .az-switch{flex-direction:column}
  .az-switch button{width:100%;white-space:normal}
  .az-suites{grid-template-columns:1fr 1fr}
  .az-daygrid{grid-template-columns:1fr}
  /* mobile: revert to the stacked layout (header + its options), full text, no clamp */
  .az-daycols{display:block}
  .az-daycol-h{text-align:left;margin:16px 0 8px}
  .az-opt{height:auto;margin-bottom:8px}
  .az-opt>span{min-height:0;-webkit-line-clamp:none;display:block}
  .az-opt small{-webkit-line-clamp:none;display:block}
  .az-actions .btn-primary,.az-actions .btn-dark,.az-result .az-actions a,.az-result .az-actions button{width:100%;max-width:320px;text-align:center}
}

/* ======================================================================
   ROUND-24 — gallery tabs scrollbar, guest-app labels, AHG parent line,
   Included 7th card centring.
   ====================================================================== */
/* Item 2 — gallery chapter tabs: hide the scrollbar (keep touch/trackpad scroll),
   fade the right edge when the list overflows */
.gal-tabs{scrollbar-width:none;-ms-overflow-style:none}
.gal-tabs::-webkit-scrollbar{width:0;height:0;display:none}
.gal-tabs-sec{position:relative}
.gal-tabs-sec.tabs-overflow::after{content:"";position:absolute;top:0;right:calc(var(--pad) - 1px);width:46px;height:44px;pointer-events:none;background:linear-gradient(90deg,rgba(245,241,234,0),var(--warm))}

/* Item 4 — "IN THE APP": 6 labels, 2 complete rows of 3, each on ONE line at >=1440 */
.facts.facts-app{max-width:1060px;gap:0 40px}
.facts.facts-app li{font-size:.86rem}
@media(min-width:781px){.facts.facts-app li{white-space:nowrap}}

/* Item 5 — AHG band: Ro:en at the same height; discreet M&P parent line under the row */
.partner-logos .pl-roen img{height:48px}
@media(min-width:760px){.partner-logos .pl-roen img{height:56px}}
.ahg-parent{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin:clamp(1.2rem,3vw,1.9rem) auto 0;text-align:center}
.ahg-parent .ahg-mp{height:16px;width:auto;opacity:.6;display:block}
.ahg-parent a{color:rgba(245,241,234,.55);font-family:var(--sans);font-size:.74rem;letter-spacing:.03em;text-decoration:none;transition:color .25s}
.ahg-parent a:hover{color:var(--gold)}


/* ======================================================================
   FULL-SCREEN MENU — all links (The Villa … Contact) fit with no scroll
   from 700px tall; height-proportional sizing; group centred vertically.
   Below 700px the inner area scrolls (overflow-y:auto) while the close
   button stays fixed (it sits on .nav-panel, which does not scroll).
   ====================================================================== */
.nav-panel{justify-content:stretch!important;padding:0!important;overflow:hidden!important}
.nav-close{z-index:10}
.np-scroll{flex:1 1 auto;width:100%;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;align-items:center;box-sizing:border-box;
  padding:clamp(58px,8vh,76px) var(--pad) clamp(18px,4vh,40px);gap:clamp(4px,1.3vh,14px)}
/* auto margins centre the group when it fits, and collapse (top-align, no clipping) when it overflows */
.np-scroll > :first-child{margin-top:auto}
.np-scroll > :last-child{margin-bottom:auto}
.np-top{margin:0!important;width:100%;display:flex;justify-content:center}
.np-logo img{height:clamp(60px,10vh,110px)!important;width:auto!important}
.np-lang{margin-top:clamp(4px,1.3vh,12px)!important}
.np-links{flex:0 0 auto!important;padding:0!important;margin-top:clamp(8px,2.2vh,24px)!important;
  gap:clamp(3px,1vh,13px)!important;justify-content:flex-start!important}
.np-links a{font-size:clamp(28px,5.2vh,56px)!important;line-height:1.04!important}
.np-foot{padding-top:0!important;margin-top:clamp(8px,2vh,20px)!important;gap:clamp(6px,1.2vh,12px)!important}
.np-addr{font-size:clamp(.72rem,1.5vh,.88rem)!important;line-height:1.45!important}