/* ============================================================
   Luxury hotel page — design ported from the Lovable "Luxe
   Template Suite" (TanStack/Tailwind) into plain CSS for the
   static generator. Hub pages keep style.css; this styles the
   standalone hotel money-page only.
   ============================================================ */
:root{
  --bg:#fdfcfa;--ink:#23282f;--mut:#6b7280;--line:#e8e6e1;--panel:#f6f3ee;
  --accent:#b08442;--accent2:#946d31;--dark:#1c2230;--deep-fg:#f3efe7;--gold:#c79a4f;
  /* CTA = a deliberately CONTRASTING colour so buttons pop off the theme, never blend in */
  --cta:#e2603a;--cta2:#c64d2b;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* deterministic per-hotel themes */
body.theme-ocean{--accent:#0e7c86;--accent2:#0b5e66;--gold:#3aa6ad;--dark:#10242b;--deep-fg:#eaf6f4;--cta:#f2913d;--cta2:#dd7a26;--serif:"Playfair Display",Georgia,serif}
body.theme-noir{--accent:#9a6a55;--accent2:#7c5343;--gold:#c0926f;--dark:#221c19;--deep-fg:#f1e9e3;--cta:#2f9c8c;--cta2:#247a6d}
/* warm boutique — cream ground, green accent, Playfair headings (inspired by a warm hotel palette). Also warms the neutrals so the whole page reads editorial, not just the accent. */
body.theme-warm{--bg:#f7f4ef;--panel:#eeeae1;--ink:#2c2521;--mut:#7c6f63;--line:#e4ddd0;
  --accent:#36704f;--accent2:#2b5a40;--gold:#c39a68;--dark:#2c1e16;--deep-fg:#f2e9df;
  --cta:#b0623a;--cta2:#95502f;--serif:"Playfair Display",Georgia,serif}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.7 var(--sans);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--accent2);text-decoration:none}
main{display:block}
.lx{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);letter-spacing:-.01em;margin:0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* reveal on scroll */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* ---------- top nav (transparent over hero -> frosted on scroll) ---------- */
.hotel-head{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s,box-shadow .3s,border-color .3s}
.hotel-head .lx,.hh-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:72px}
.hotel-head .hh-in{max-width:1200px;margin:0 auto;padding:0 24px}
/* `flex:1 1 0` + `min-width:0` let the brand shrink to LITERALLY zero whenever the nav
   wanted the space — measured at 0-16px across a wide range of viewports, i.e. the hotel's
   own name, the single string these pages rank and convert on, silently absent. A floor
   fixes it at the source; the nav shrinks instead (`flex:0 1 auto` below). Basis `auto`
   rather than `0` so the brand asks for its natural width first. */
.hotel-brand{display:inline-flex;align-items:center;gap:12px;color:#fff;white-space:nowrap;
  flex:1 1 auto;min-width:min(35vw,190px);overflow:hidden}
/* The nav must NOT shrink: when it did, it kept its non-wrapping content and simply
   overflowed, clipping the booking CTA off the right edge. It stays at its natural width and
   the brand absorbs the squeeze instead — down to its floor, never past it. */
.hotelnav,.sh-nav{flex:0 0 auto}
.cta-sm{display:none}
.hotel-brand:hover{text-decoration:none}
.brand-crest{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1.5px solid currentColor;
  display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:.04em;position:relative}
.brand-crest::after{content:"";position:absolute;inset:3px;border-radius:50%;border:1px solid currentColor;opacity:.32}
.brand-id{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.brand-name{font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-sub{font-size:9px;letter-spacing:.26em;text-transform:uppercase;opacity:.72;margin-top:3px;font-family:var(--sans)}
.hotelnav{display:flex;align-items:center;gap:30px}
.hotelnav a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85);transition:color .2s}
.hotelnav a:hover{color:#fff}
.hotelnav a.active{color:#fff}
.hotelnav .navbook{padding:10px 18px;background:var(--cta);color:#fff;letter-spacing:.12em;font-weight:600}
.hotelnav .navbook:hover{background:var(--cta2)}
.hotel-head.scrolled{background:rgba(253,252,250,.86);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.hotel-head.scrolled .hotel-brand{color:var(--ink)}
.hotel-head.scrolled .hotelnav a{color:rgba(35,40,47,.7)}
.hotel-head.scrolled .hotelnav a:hover,.hotel-head.scrolled .hotelnav a.active{color:var(--accent2)}
/* actions cluster (mobile: Book + burger); on desktop both children hide, nav handles it */
.hh-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.nav-book-mini{display:none;padding:9px 16px;background:var(--cta);color:#fff;border-radius:7px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.nav-book-mini:hover{background:var(--cta2)}
/* burger toggle — hidden on desktop, shown on mobile */
.nav-burger{display:none;width:44px;height:44px;flex:0 0 auto;background:none;border:0;cursor:pointer;padding:11px;z-index:70}
.nav-burger span{display:block;height:2px;border-radius:2px;background:#fff;transition:transform .25s,opacity .2s;margin:4px 0}
.hotel-head.scrolled .nav-burger span,.hotel-head.nav-open .nav-burger span{background:var(--ink)}
.hotel-head.nav-open .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hotel-head.nav-open .nav-burger span:nth-child(2){opacity:0}
.hotel-head.nav-open .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:880px){.hotelnav{gap:20px}.hotelnav a:not(.navbook){font-size:11px}}
/* 761-1023px — THE HOTEL NAME MUST NEVER VANISH.
   The nav only collapses into the burger at <=760px, so through this whole band the full
   desktop nav still renders. `.hotel-brand` is `flex:1 1 0` with `min-width:0` on
   `.brand-id`, so when the nav wins the space contest the brand shrinks to LITERALLY zero
   width: measured across 17 viewport widths, the hotel's own name — the one string these
   pages live or die on — rendered at 0px on all 2,872 sites, and the Check Availability
   button clipped off the right edge.
   The name gets a guaranteed floor and the nav gives way instead: secondary links drop
   first (they are all reachable from the in-page sections and the footer), the booking CTA
   never does. */
@media(min-width:761px) and (max-width:1023px){
  .hotel-brand{flex:1 1 auto;min-width:min(52vw,300px);max-width:none}
  .brand-name{font-size:17px}
  .hotelnav{gap:14px}
  .hotelnav a:not(.navbook){font-size:10px;letter-spacing:.1em}
  .hotelnav .navbook{padding:9px 14px;letter-spacing:.08em;white-space:nowrap}
}
/* 761-900px — even the trimmed nav crowds the name out, so the section links stand down.
   They are anchors to sections further down the same page and are all reachable by
   scrolling; the booking CTA and the hotel name both stay. */
@media(min-width:761px) and (max-width:1100px){
  .hotelnav a:not(.navbook),.hotelnav .cur-select,.hotelnav .lang-select{display:none}
}
/* 1101px-1279px — the full nav returns here but its natural width is ~870px, which with the
   brand's floor overflows the 1200px-capped inner container by ~16px and clipped the booking
   CTA off the right edge. Tighten the nav rather than starve the name again. */
@media(min-width:1101px) and (max-width:1279px){
  .hotelnav{gap:20px}
  .hotelnav a:not(.navbook){font-size:11px;letter-spacing:.12em}
  /* the two selects are ~150px of the nav's ~870px natural width and are the least
     load-bearing controls up here; currency persists via localStorage and language has
     hreflang alternates, so dropping them buys the name its space without losing a route */
  .hotelnav .cur-select,.hotelnav .lang-select{display:none}
}
@media(max-width:1023px){
  .nav-burger{display:block}
  .nav-book-mini{display:inline-flex}
  .hotel-head .hh-in,.hotel-head .lx{height:60px;padding:0 16px;gap:10px}
  .hotel-brand{gap:9px;max-width:48vw}
  .brand-crest{width:36px;height:36px;font-size:13px}
  .brand-name{font-size:15px;overflow:hidden;text-overflow:ellipsis;max-width:44vw;white-space:nowrap}
  .brand-sub{font-size:8px;letter-spacing:.2em}
  /* nav collapses into a slide-down panel under the header */
  .hotelnav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 18px 34px rgba(0,0,0,.16);
    padding:6px 0;max-height:82vh;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s ease,transform .25s ease,visibility 0s .25s}
  .hotel-head.nav-open .hotelnav{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .25s ease}
  .hotel-head.nav-open{background:rgba(253,252,250,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .hotel-head.nav-open .hotel-brand,.hotel-head.nav-open .brand-name{color:var(--ink)}
  .hotelnav a:not(.navbook){display:block;color:var(--ink);font-size:13px;letter-spacing:.14em;
    padding:15px 22px;border-bottom:1px solid var(--line)}
  .hotelnav a:not(.navbook):hover{color:var(--accent2)}
  .hotelnav .cur-select{margin:14px 22px 4px;align-self:flex-start;color:var(--ink);border-color:var(--line)}
  .hotelnav .navbook{margin:12px 22px 16px;justify-content:center;text-align:center;padding:15px 18px;font-size:13px}
  .hotelnav .cta-lg{display:inline}.hotelnav .cta-sm{display:none}
}

/* ---------- hero (full-screen image slider) ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--dark)}
/* brand hero — a designed themed gradient stands in when a hotel has no usable photo, so no page ships a blank hero */
.hero.hero-brand{background:var(--dark)}
.hero.hero-brand{background:linear-gradient(158deg,color-mix(in srgb,var(--accent) 44%,var(--dark)) 0%,var(--dark) 54%,#0b1017 100%)}
.hero.hero-brand::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(72% 55% at 80% 6%,color-mix(in srgb,var(--accent2,var(--accent)) 40%,transparent),transparent 60%)}
.hero.hero-brand::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;z-index:0;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(8,11,17,.55))}
.hero.hero-brand .hero-in{position:relative;z-index:2}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;background:var(--dark) center/cover no-repeat;opacity:0;transition:opacity 1.1s ease}
.hero-slide.on{opacity:1}
.hero-in{position:relative;z-index:2;max-width:1200px;width:100%;margin:0 auto;padding:0 24px 92px;color:#fff}
.rating-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(12,16,24,.45);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);color:#fff;
  padding:8px 16px;border-radius:999px;font-size:12.5px;letter-spacing:.04em;margin-bottom:22px}
.hero-eyebrow{display:block;color:var(--gold,#c8a45c);font-family:var(--sans);font-size:13px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;
  text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hero h1{color:#fff;font-size:clamp(40px,7vw,80px);line-height:1.02;max-width:14ch;font-weight:600;
  text-shadow:0 2px 30px rgba(0,0,0,.3)}
.tagline{font-size:clamp(17px,2vw,21px);color:rgba(255,255,255,.9);margin:20px 0 0;max-width:52ch;line-height:1.5;font-family:var(--sans)}
.hero-actions{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.hero-scroll{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85);display:inline-flex;align-items:center;gap:8px}
.hero-dots{position:absolute;z-index:3;left:0;right:0;bottom:26px;display:flex;gap:8px;justify-content:center}
.hero-dot{position:relative;width:8px;height:8px;border:0;border-radius:999px;background:rgba(255,255,255,.5);cursor:pointer;padding:0;transition:background .25s}
.hero-dot.on{background:#fff;width:24px;border-radius:5px}
/* enlarge the touch area to ~40px without changing the visible dot (a11y tap target) */
.hero-dot:after{content:"";position:absolute;inset:-16px}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}}

/* ---------- a11y + polish (Web Interface Guidelines pass) ---------- */
html{scroll-padding-top:76px}
:root{color-scheme:light}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.amt,.stat-v,.rprice,.sl-v,.transfer-km,.guests-score,.bb-price{font-variant-numeric:tabular-nums}
.skip-link{position:absolute;left:8px;top:-52px;z-index:120;background:var(--bg);color:var(--accent);border:1px solid var(--line);border-radius:8px;padding:9px 16px;font-family:var(--sans);font-size:14px;text-decoration:none;transition:top .18s ease}
.skip-link:focus{top:8px}

/* ---------- buttons (sharp-cornered, like Lovable) ---------- */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--cta);color:#fff;
  padding:14px 26px;border-radius:0;font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,box-shadow .2s;box-shadow:0 6px 18px rgba(0,0,0,.16)}
.cta:hover{background:var(--cta2);text-decoration:none}
.cta.lg{padding:17px 34px;font-size:13px}
.cta.sm{padding:11px 18px;font-size:11.5px}
.cta.ghost{background:transparent;color:var(--ink);border:1px solid rgba(35,40,47,.25)}
.cta.ghost:hover{background:var(--ink);color:#fff}
.get-dir{margin:2px 0 14px}.get-dir .cta svg{width:15px;height:15px}

/* ---------- booking bar (overlaps hero bottom) ---------- */
.booking-box{position:relative;z-index:10;max-width:1200px;margin:-44px auto 0;padding:0 24px;
  display:grid}
.booking-box>.bx-card{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:24px;align-items:end;
  background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -34px rgba(20,30,55,.3);padding:22px 26px}
.bx-field label{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.bx-field input,.bx-field select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:8px 0;font:inherit;font-size:15px;color:var(--ink);outline:none}
.bx-field input:focus,.bx-field select:focus{border-color:var(--accent)}
@media(max-width:760px){.booking-box{padding:0 16px}.booking-box>.bx-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:0}}

/* ---------- generic section rhythm ---------- */
.sec{padding:96px 0}
.sec.band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec.tight{padding:64px 0}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:14px}
.sec h2{font-size:clamp(28px,3.6vw,46px);line-height:1.05;font-weight:600;max-width:18ch}
.sec-lede{color:var(--mut);max-width:60ch;margin:14px 0 22px;line-height:1.55}
.tour-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.tour-card{display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:18px 18px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);transition:transform .15s,box-shadow .15s,border-color .15s}
.tour-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.08);border-color:var(--accent);text-decoration:none}
.tour-label{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.2;color:var(--ink)}
.tour-cta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent)}
.tour-cta svg{width:15px;height:15px}
.sec h2.center{margin-inline:auto;text-align:center;max-width:22ch}
.lead{margin:18px 0 0;color:var(--mut);font-size:18px;line-height:1.7;max-width:60ch}
.lead.center{margin-inline:auto;text-align:center}
.head-center{text-align:center}
.head-center .eyebrow{}

/* quick facts strip */
.factbar{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;padding:30px 0}
.fact{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:rgba(35,40,47,.82)}
.fact svg{width:18px;height:18px;color:var(--accent)}

/* welcome + stats */
.welcome .lx{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:start}
.welcome .intro{font-size:19px;line-height:1.85;color:rgba(35,40,47,.82);font-weight:300}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* in the welcome section the stats sit in a narrow right column — 3-up gets clipped, so
   stack them into a bordered card that balances the intro copy on the left */
.welcome .stats{grid-template-columns:1fr;gap:0;background:var(--panel);border:1px solid var(--line);padding:6px 26px}
.welcome .stat{border-top:1px solid var(--line);padding:20px 0}
.welcome .stat:first-child{border-top:0}
.stat{border-top:1px solid var(--line);padding-top:18px}
.stat-v{font-family:var(--serif);font-size:34px;font-weight:600;color:var(--ink);line-height:1}
.stat-l{margin-top:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.stat-s{font-size:12.5px;color:var(--mut);margin-top:3px}
@media(max-width:860px){.welcome .lx{grid-template-columns:1fr;gap:36px}}
/* phones: the 3-up stats can't fit (★★★★★ / long prices don't shrink) and would force
   the page — and the fixed header — wider than the viewport. Drop to 2-up + smaller value. */
@media(max-width:600px){.stats{grid-template-columns:1fr 1fr;gap:16px 14px}.stat-v{font-size:24px}}

/* verdict */
.verdict-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:46px}
.vcol{padding:34px;border:1px solid var(--line);background:var(--bg)}
.vcol h3{font-size:24px;font-weight:600;margin-bottom:18px}
.vcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.vcol li{display:flex;gap:12px;color:rgba(35,40,47,.85);line-height:1.5}
.vcol li:before{content:"";flex:0 0 18px;height:18px;margin-top:2px;background:var(--accent);
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.vcol-yes li:before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.vcol-no li:before{background:var(--mut);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
@media(max-width:760px){.verdict-cols{grid-template-columns:1fr}}

/* feature blocks (alternating image/text) */
.features{display:flex;flex-direction:column;gap:68px}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feature.flip .feature-img{order:2}
.feature-img{aspect-ratio:4/3;background:var(--panel) center/cover no-repeat;border-radius:3px}
.feature-text h2{font-size:clamp(26px,3vw,38px);line-height:1.1;font-weight:600}
.feature-text p{margin:18px 0 0;color:rgba(35,40,47,.72);line-height:1.85;font-weight:300}
/* text-only block (dining/spa with no confidently-matched photo): an intentional,
   constrained centred statement rather than a lonely half-empty row */
.feature.feature-noimg{grid-template-columns:1fr;gap:0;max-width:680px;margin:0 auto;text-align:center;
  padding:8px 0}
.feature.feature-noimg .feature-text h2:before{content:"";display:block;width:32px;height:2px;
  background:var(--accent);margin:0 auto 22px}
@media(max-width:860px){.feature{grid-template-columns:1fr;gap:24px}.feature.flip .feature-img{order:0}}

/* rooms */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:54px}
.room{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.room-img{aspect-ratio:4/3;background:var(--panel) center/cover no-repeat;transition:transform .7s ease}
.room:hover .room-img{transform:scale(1.04)}
.room-body{padding:24px;display:flex;flex-direction:column;flex:1}
.room-body h3{font-size:23px;font-weight:600}
.room-link{display:block;overflow:hidden}
.room-body h3 a{color:inherit}.room-body h3 a:hover{color:var(--accent2)}
.specs{font-size:12.5px;color:var(--mut);margin:4px 0 0}
.rfac{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 0;padding:0;list-style:none}
.rfac li,.rfac span{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:rgba(35,40,47,.7);
  border:1px solid var(--line);padding:4px 9px}
.room-foot{margin-top:auto;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.rprice-l{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.rprice{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--ink)}
.rprice small{font-size:13px;color:var(--mut);font-family:var(--sans)}
@media(max-width:980px){.rooms{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.rooms{grid-template-columns:1fr}}

/* experience cards */
.exp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.exp-card{position:relative;aspect-ratio:4/5;overflow:hidden;display:flex;align-items:flex-end;
  background:var(--dark) center/cover no-repeat;color:#fff}
.exp-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.15) 45%,rgba(0,0,0,.72))}
.exp-card .exp-in{position:relative;z-index:2;padding:22px;display:flex;align-items:center;gap:12px}
.exp-icon svg{width:22px;height:22px;color:var(--gold)}
.exp-label{font-family:var(--serif);font-size:22px;font-weight:600}
@media(max-width:640px){.exp-cards{grid-template-columns:1fr 1fr;gap:12px}}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:42px}
.gallery a{position:relative;overflow:hidden;aspect-ratio:1/1;display:block}
.gallery a:first-child{grid-column:span 2;grid-row:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform .7s ease}
.gallery a:hover img{transform:scale(1.05)}
@media(max-width:860px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* amenities / facilities */
.fac-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:48px}
.fac-card h3{font-size:20px;font-weight:600;border-bottom:1px solid var(--line);padding-bottom:13px}
.fac-card ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.fac-card li{display:flex;gap:11px;font-size:14px;color:rgba(35,40,47,.8);line-height:1.4}
.fac-card li:before{content:"";flex:0 0 15px;height:15px;margin-top:3px;background:var(--accent);
  -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
@media(max-width:860px){.fac-cards{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:480px){.fac-cards{grid-template-columns:1fr}}

/* getting there — dark band */
.getting-there{background:var(--dark);color:var(--deep-fg)}
.getting-there .lx{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:center}
.transfer-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.22);
  padding:7px 14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.transfer-badge svg{width:14px;height:14px}
.transfer-km{font-family:var(--serif);font-size:clamp(48px,6vw,68px);font-weight:600;line-height:1;margin:18px 0 6px}
.transfer-sub{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.getting-there h2{font-size:clamp(28px,3.4vw,40px);color:#fff;font-weight:600}
.getting-there p{margin:16px 0 0;color:rgba(255,255,255,.8);line-height:1.85;font-weight:300;max-width:60ch}
.gt-more{margin-top:20px}.gt-more a{color:var(--gold);font-size:13px;letter-spacing:.05em}
.gt-facts{justify-content:flex-start;gap:10px 14px;padding:22px 0 2px}
.getting-there .gt-facts .fact{color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 13px;font-size:12.5px}
.getting-there .gt-facts .fact svg{color:var(--gold)}
/* journey steps (getting-there page) */
.steps{list-style:none;counter-reset:s;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.steps li{counter-increment:s;position:relative;padding-left:54px;color:rgba(35,40,47,.82);line-height:1.65}
.steps li:before{content:counter(s);position:absolute;left:0;top:-3px;width:36px;height:36px;border:1px solid var(--accent);color:var(--accent);font-family:var(--serif);font-size:18px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.steps b{color:var(--ink)}
@media(max-width:860px){.getting-there .lx{grid-template-columns:1fr;gap:24px}}

/* location */
.loc-grid{display:grid;grid-template-columns:7fr 5fr;gap:40px;margin-top:42px}
.loc-grid.loc-grid-solo{grid-template-columns:1fr}
.map{width:100%;height:460px;border:1px solid var(--line);filter:saturate(.9)}
.near-h{font-size:23px;font-weight:600;margin-bottom:10px}
.nearby-poi{list-style:none;margin:0 0 26px;padding:0}
.nearby-poi li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.poi-name{color:var(--ink)}.poi-type{color:var(--mut)}.poi-dist{color:var(--mut);white-space:nowrap}
.addr{display:inline-flex;align-items:center;gap:8px;color:var(--mut);font-size:14px;margin-top:6px}
.addr svg{width:15px;height:15px;color:var(--accent);flex:0 0 auto}
@media(max-width:860px){.loc-grid{grid-template-columns:1fr}.map{height:340px}}

/* guests */
.guests-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.guests-score{font-family:var(--serif);font-size:56px;font-weight:600;line-height:1;color:var(--ink)}
.guests-sub{color:var(--mut);font-size:14px;margin-top:6px}
.guests-summary{margin-top:22px;color:rgba(35,40,47,.8);line-height:1.85;font-weight:300}
.catscores{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.catscores li{display:grid;gap:7px}
.cat-row{display:flex;justify-content:space-between;font-size:14px}
.cat-row .topic{color:var(--ink)}.cat-row .val{color:var(--mut)}
.bar{height:3px;background:var(--line);overflow:hidden}
.bar>span{display:block;height:100%;background:var(--accent)}
.pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.pill{border:1px solid var(--line);padding:7px 13px;font-size:12.5px;color:rgba(35,40,47,.8)}
.pill b{color:var(--accent);font-weight:600}
@media(max-width:860px){.guests-grid{grid-template-columns:1fr;gap:30px}}
/* guest-review summary (from Booking) */
.pills.praise{margin-top:20px}
.worth-knowing{margin-top:22px}
.worth-knowing .wk-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:600}
.worth-knowing ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.worth-knowing li{position:relative;padding-left:16px;color:rgba(35,40,47,.72);font-size:13.5px;line-height:1.5}
.worth-knowing li:before{content:"–";position:absolute;left:0;color:var(--accent)}
.review-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.review-quotes figure{margin:0;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:4px;position:relative}
.review-quotes blockquote{margin:0;font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--ink);font-weight:500}
.review-quotes figcaption{margin-top:14px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);font-weight:600}
@media(max-width:860px){.review-quotes{grid-template-columns:1fr;gap:16px}}

/* good to know */
.gtk{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:36px}
.gtk-item{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.gtk-l{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.gtk-v{color:var(--ink);font-size:14px;text-align:right}
@media(max-width:680px){.gtk{grid-template-columns:1fr}}

/* faq */
.faq{max-width:780px;margin:38px auto 0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 0;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);
  display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--accent);font-size:24px;font-weight:400;transition:transform .2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{margin:0 0 24px;color:rgba(35,40,47,.74);line-height:1.85;font-weight:300}

/* cta banner */
.cta-banner{position:relative;padding:120px 0;overflow:hidden;text-align:center;color:#fff}
.cta-banner .cb-img{position:absolute;inset:0;background:var(--dark) center/cover no-repeat;z-index:0}
.cta-banner:after{content:"";position:absolute;inset:0;background:rgba(20,24,40,.72);z-index:1}
.cta-banner .lx{position:relative;z-index:2}
.cta-banner .eyebrow{color:var(--gold)}
.cta-banner h2{color:#fff;font-size:clamp(32px,4.4vw,58px);font-weight:600;margin-inline:auto;max-width:18ch}
.cta-banner .from{display:block;margin:16px 0 30px;color:rgba(255,255,255,.82)}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:8px}
.ci-l{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.ci-v{font-size:18px;color:var(--ink)}
.contact a.ci-v:hover{color:var(--accent2)}
.contact .phone{font-family:var(--serif);font-size:30px;font-weight:600}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr;gap:26px}}

/* sticky bottom book bar */
.bookbar{position:fixed;left:0;right:0;bottom:0;z-index:50;transform:translateY(110%);transition:transform .3s ease;
  background:rgba(253,252,250,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(20,30,55,.4)}
.bookbar.show{transform:none}
.bookbar .lx{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 24px}
.bb-name{font-weight:600;font-size:15px}
.bb-price{color:var(--accent2);font-weight:600;margin-left:6px}

/* footer */
.hotel-foot{background:var(--dark);color:var(--deep-fg);padding:64px 0 36px}
.hf-main{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:30px 40px;align-items:start}
.hf-brand{font-family:var(--serif);font-size:24px;color:#fff}
.hf-h{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:12px}
.hf-line{font-size:14px;color:rgba(255,255,255,.7);margin-top:8px}
.hf-col .hf-line{margin-top:0;line-height:2.15}
.hf-line a{color:rgba(255,255,255,.7);transition:color .15s}
.hf-line a:hover{color:#fff}
.hf-cta{align-self:center}
.hf-fine{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:rgba(255,255,255,.5);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.hf-fine a{color:rgba(255,255,255,.6)}
@media(max-width:900px){.hf-main{grid-template-columns:1fr 1fr;gap:28px 30px}}
@media(max-width:560px){.hf-main{grid-template-columns:1fr;gap:22px}.hf-cta{align-self:start}
  /* finger-friendly footer nav: pad each link to a ~44px touch target */
  .hf-col .hf-line{line-height:1.4}
  .hf-col .hf-line a{display:inline-block;padding:11px 0}
  .hf-fine{gap:6px 16px}.hf-fine a{display:inline-block;padding:8px 0}}

/* ---------- variant section ordering (footprint variety) ---------- */
.flow{display:flex;flex-direction:column}
.flow>section{order:0}

/* ===== MACROSTRUCTURE VARIANTS (deterministic per hotel via variant()) =====
   Not just section order: v0/v1/v2 change page RHYTHM + FEATURE treatment so two
   hotels don't share one structural fingerprint (design variety + smaller SEO footprint).
   v0 "Editorial bands" = default. Structural overrides are desktop-only (min-width:861px)
   so every variant collapses to the same safe single-column stack on mobile. */
body.v1 .sec-features{order:1}body.v1 .sec-rooms{order:2}body.v1 .sec-verdict{order:3}body.v1 .sec-experiences{order:4}
body.v2 .sec-rooms{order:1}body.v2 .sec-features{order:2}body.v2 .sec-experiences{order:3}body.v2 .sec-verdict{order:4}
@media(min-width:861px){
  /* v1 "Feature grid" — features become a 2-up card grid (image-top), tighter rhythm. */
  body.v1 .sec{padding:80px 0}
  body.v1 .features{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
  body.v1 .feature{grid-template-columns:1fr;gap:0;background:var(--bg);border:1px solid var(--line);border-radius:4px;overflow:hidden;align-content:start}
  body.v1 .feature .feature-img{aspect-ratio:16/10;border-radius:0}
  body.v1 .feature.flip .feature-img{order:0}
  body.v1 .feature .feature-text{padding:24px 26px 28px}
  body.v1 .feature.feature-noimg{max-width:none;margin:0;text-align:left;background:var(--panel)}
  body.v1 .feature.feature-noimg .feature-text h2:before{margin:0 0 14px}
  /* v2 "Airy bands" — alternating bands but larger imagery, roomier gaps + section rhythm. */
  body.v2 .sec{padding:116px 0}
  body.v2 .features{gap:84px}
  body.v2 .feature{gap:64px}
  body.v2 .feature-img{aspect-ratio:5/4}
  body.v2 .hero-in{padding-bottom:110px}
}

/* gallery lightbox (shared with site.js) */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(15,18,28,.95);display:none;align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:2px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-btn{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;
  width:46px;height:46px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-close{top:18px;right:18px}.lb-prev{left:14px;top:50%;transform:translateY(-50%)}.lb-next{right:14px;top:50%;transform:translateY(-50%)}

/* ---------- hub pages (home / atoll / city) ---------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(253,252,250,.92);backdrop-filter:blur(12px) saturate(140%);border-bottom:1px solid var(--line);transition:background .3s,border-color .3s,box-shadow .3s}
.sh-in{max-width:1200px;margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.site-head .brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);letter-spacing:.2px;min-width:0;flex:0 1 auto}
.site-head .brand:hover{text-decoration:none}
.logo-mark{width:30px;height:30px;flex:0 0 auto;color:var(--accent);transition:color .3s}
.brand-wm{font-family:var(--serif);font-weight:600;font-size:21px;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-wm b{font-weight:700}
.sh-nav{display:flex;align-items:center;gap:24px;font-size:13px;letter-spacing:.02em}
.sh-nav a{color:var(--ink);opacity:.85}.sh-nav a:hover{opacity:1;text-decoration:none;color:var(--accent2)}
.sh-cta{background:var(--cta)!important;color:#fff!important;opacity:1!important;padding:9px 17px;border-radius:7px;font-weight:600;letter-spacing:.02em;box-shadow:0 6px 16px rgba(0,0,0,.14)}
.sh-cta:hover{background:var(--cta2)!important}
.sh-crumb{border-top:1px solid var(--line);font-size:12px;letter-spacing:.04em;color:var(--mut)}
.sh-crumb .sh-in{height:auto;padding-top:10px;padding-bottom:10px;justify-content:flex-start;gap:0}
.sh-crumb a{color:var(--mut)}.sh-crumb a:hover{color:var(--accent2)}.sh-crumb .sep{color:#c9c4ba;margin:0 7px}
/* floating transparent header over the home hero, frosts on scroll */
.site-head.over-hero{position:fixed;left:0;right:0;background:transparent;backdrop-filter:none;border-bottom-color:transparent}
.site-head.over-hero .brand,.site-head.over-hero .sh-nav a{color:#fff;opacity:.92}
.site-head.over-hero .logo-mark{color:#fff}
.site-head.over-hero.scrolled{background:rgba(253,252,250,.94);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--line)}
.site-head.over-hero.scrolled .brand,.site-head.over-hero.scrolled .sh-nav a{color:var(--ink)}
.site-head.over-hero.scrolled .logo-mark{color:var(--accent)}
@media(max-width:680px){
  .sh-nav a:not(.sh-cta){display:none}
  /* currency switcher is dropped from the top bar on phones so the full brand + CTA
     both fit; it stays on hotel detail pages and the chosen currency persists via
     localStorage, so home/hub prices still reflect it. */
  .sh-nav .cur-select{display:none}
  .brand-wm{font-size:18px}
  .sh-in{padding:0 16px;gap:10px}
  .sh-nav{gap:10px}
  .sh-cta{padding:9px 15px}
  .sh-nav .cta-lg{display:none}.sh-nav .cta-sm{display:inline}
}
.hub-head{max-width:900px;margin:0 auto;text-align:center;padding:64px 24px 14px}
.hub-head .eyebrow{text-align:center}
.hub-head h1{font-size:clamp(34px,5vw,58px);font-weight:600;line-height:1.05}
.hub-blurb{font-family:var(--serif);font-size:clamp(18px,2.2vw,23px);color:var(--mut);margin:16px auto 0;max-width:680px;line-height:1.5}
/* homepage hero "browse all" link */
.hh-browse{display:inline-block;margin-top:18px;color:rgba(255,255,255,.92);font-size:14px;font-weight:600;letter-spacing:.01em;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px}
.hh-browse:hover{color:#fff;border-color:#fff;text-decoration:none}
/* ---- /search/ results page ---- */
.sr-hero{padding-bottom:8px}
.sr-wrap{max-width:1200px;margin:0 auto;padding:8px 24px 64px}
/* mobile toolbar (filters toggle + sort) — hidden on desktop */
.sr-toolbar{display:none;gap:12px;align-items:center;margin-bottom:14px}
.sr-toggle{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.sr-toggle svg{width:17px;height:17px}
.sr-fcount{background:var(--cta);color:#fff;border-radius:999px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;padding:0 6px}
.sr-toolsort{flex:1 1 auto}
.sr-filters{display:flex;flex-wrap:wrap;align-items:end;gap:14px 16px;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.sr-f{display:flex;flex-direction:column;gap:6px;flex:1 1 150px;min-width:0}
.sr-f.sr-q{flex:2 1 240px}
.sr-f label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);font-weight:600}
.sr-f input,.sr-f select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:14px}
.sr-f input:focus,.sr-f select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,124,134,.12)}
.sr-q-wrap{position:relative;display:flex;align-items:center}
.sr-q-ico{position:absolute;left:11px;width:16px;height:16px;color:var(--mut);pointer-events:none}
.sr-q-wrap input{padding-left:34px;padding-right:34px}
.sr-q-clear{position:absolute;right:6px;width:24px;height:24px;border:0;background:none;color:var(--mut);font-size:20px;line-height:1;cursor:pointer;border-radius:6px}
.sr-q-clear:hover{color:var(--ink);background:rgba(0,0,0,.05)}
.sr-checks{display:flex;flex-wrap:wrap;gap:10px 18px;flex:1 1 100%;padding-top:2px}
.sr-chk{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink);white-space:nowrap;cursor:pointer}
.sr-chk input{width:auto;accent-color:var(--cta)}
/* active filter chips */
.sr-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.sr-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:13px;cursor:pointer;transition:border-color .15s,background .15s}
.sr-chip:hover{border-color:var(--cta);background:var(--panel)}
.sr-chip span{font-size:15px;color:var(--mut)}
.sr-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 2px 16px}
.sr-count{font-size:15px;font-weight:600;color:var(--ink)}
.sr-clear{background:none;border:0;color:var(--accent2);font-size:13px;font-weight:600;cursor:pointer;padding:0}
.sr-clear:hover{text-decoration:underline}
.sr-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px}
.sr-grid li{min-width:0}
.sr-card{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:transform .15s,box-shadow .15s}
.sr-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px -16px rgba(20,30,55,.4);text-decoration:none}
.sr-card-img{position:relative;aspect-ratio:4/3;background:var(--panel)}
.sr-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.sr-noimg{display:block;width:100%;height:100%;background:linear-gradient(135deg,#dfe7ea,#cdd8dc)}
.sr-tag{position:absolute;top:10px;left:10px;background:rgba(16,36,43,.82);color:#fff;font-size:11px;font-weight:600;letter-spacing:.04em;padding:4px 9px;border-radius:6px;backdrop-filter:blur(3px)}
.sr-card-b{padding:14px 15px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.sr-card-b h3{font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.2;color:var(--ink);margin:0}
.sr-meta{font-size:12.5px;color:var(--mut)}
.sr-card .hub-price{margin-top:auto;padding-top:4px;font-size:14px;font-weight:600;color:var(--ink)}
.sr-card .hub-price .pl{color:var(--mut);font-weight:400}
.sr-noprice{margin-top:auto;padding-top:4px;font-size:13px;color:var(--mut)}
.sr-more-wrap{text-align:center;margin-top:28px}
.sr-empty{text-align:center;color:var(--mut);margin:48px 0;font-size:16px;display:flex;flex-direction:column;align-items:center;gap:16px}
@media(max-width:760px){
  .sr-toolbar{display:flex}
  .sr-filters{display:none;margin-bottom:4px}
  .sr-filters.open{display:flex;flex-direction:column;align-items:stretch;gap:14px}
  .sr-filters.open .sr-f{flex:1 1 auto}
  .sr-sortwrap{display:none}            /* sort lives in the always-visible toolbar on mobile */
  .sr-grid{grid-template-columns:1fr 1fr;gap:12px}
  .sr-card-b h3{font-size:15px}
  .sr-card-b{padding:11px 12px 13px}
}
@media(max-width:380px){.sr-grid{grid-template-columns:1fr}}
.sr-toolsort select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:14px;color:var(--ink)}
.hub-grid{list-style:none;max-width:1200px;margin:40px auto 0;padding:0 24px 40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.hub-card{position:relative;display:flex;align-items:flex-end;height:300px;overflow:hidden;border:1px solid var(--line);
  background:var(--dark) center/cover no-repeat;transition:transform .25s ease,box-shadow .25s ease}
.hub-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px -24px rgba(20,30,55,.45);text-decoration:none}
.hub-card-body{position:relative;z-index:2;padding:22px;width:100%}
.hub-card h3{font-family:var(--serif);font-weight:600;font-size:24px;color:#fff;margin:0;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hub-meta{display:block;margin-top:4px;font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.9);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.site-foot{background:var(--dark);color:var(--deep-fg);margin-top:0}
.sf-in{max-width:1200px;margin:0 auto;padding:64px 24px 40px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.site-foot .brand{display:inline-flex;align-items:center;gap:11px;color:#fff}
.site-foot .brand:hover{text-decoration:none}
.site-foot .logo-mark{color:var(--gold)}
.site-foot .brand-wm{font-size:21px}
.sf-brand p{margin:16px 0 0;max-width:42ch;color:rgba(255,255,255,.62);font-size:14px;line-height:1.7}
.sf-col h4{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:6px 0 16px;font-weight:600}
.sf-col ul{list-style:none;margin:0;padding:0}
.sf-col li{margin:9px 0}
.sf-col a{color:rgba(255,255,255,.82);font-size:14px}.sf-col a:hover{color:#fff}
.sf-fine{max-width:1200px;margin:0 auto;padding:20px 24px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:rgba(255,255,255,.5);font-size:12.5px}
@media(max-width:760px){.hub-head{padding-top:48px}.sf-in{grid-template-columns:1fr 1fr;gap:28px}.sf-brand{grid-column:1/-1}}

/* ---------- prose (trust/legal pages) ---------- */
.prose{max-width:760px}
.prose h2{font-size:26px;font-weight:600;margin:38px 0 12px}
.prose p{margin:0 0 16px;color:rgba(35,40,47,.85);line-height:1.8}
.prose ul{margin:0 0 16px;padding-left:22px;color:rgba(35,40,47,.85);line-height:1.8}
.prose a{text-decoration:underline;text-underline-offset:3px}
/* inline affiliate disclosure next to booking CTAs (FTC proximity) */
.disclosure{font-size:12px;color:var(--mut);margin:10px 0 0;line-height:1.5}
/* visible breadcrumb under the hero (hotel pages) */
.crumb{font-size:12.5px;color:var(--mut);padding:14px 0 0}
.crumb a{color:var(--mut)}.crumb a:hover{color:var(--accent2)}
.crumb .c-sep{color:#c9c4ba;margin:0 2px}
.near-more{margin-top:18px;font-size:14px}
/* island chips on atoll hubs */
.isl-row{padding:6px 0 0}
.isl-chips{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.isl-chips a{display:inline-block;border:1px solid var(--line);padding:7px 13px;font-size:13.5px;color:var(--ink)}
.isl-chips a:hover{border-color:var(--accent);color:var(--accent2);text-decoration:none}
.isl-n{color:var(--mut);font-size:12px;margin-left:4px}
/* "view all" link on home collection rows */
.sec-more{margin-left:auto;font-size:13.5px;white-space:nowrap;align-self:end}

/* lazy-bg placeholders keep a dark base so overlay text stays readable pre-hydrate/no-JS */
[data-bg]{background-color:var(--dark)}

/* multi-OTA price comparison under the booking box */
.ota-compare{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:12px;
  padding:12px 16px;background:#fff;border:1px solid var(--line)}
.oc-l{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.oc-row{display:inline-flex;align-items:baseline;gap:7px;font-size:13.5px;color:var(--ink);
  padding:5px 11px;border:1px solid var(--line);white-space:nowrap}
.oc-row:hover{border-color:var(--accent);text-decoration:none;color:var(--accent2)}
.oc-row b{font-weight:600}
.oc-note{font-size:11.5px;color:var(--mut);margin-left:auto}
@media(max-width:680px){.oc-note{margin-left:0;flex-basis:100%}}
/* transfer typical-cost note */
.gt-cost{margin-top:12px;font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.7;
  border-left:2px solid var(--gold);padding-left:12px}
.pills-note{font-size:11.5px;color:var(--mut);margin-top:8px}

/* ---------- print ---------- */
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html,body{background:#fff}
  .hotel-head,.bookbar,.hero-dots,.hero-scroll,.lightbox{display:none!important}
  .hero{min-height:560px}
  .js .reveal{opacity:1!important;transform:none!important}
  .sec{padding:52px 0}
  a[href]{text-decoration:none}
  @page{size:1360px 2000px;margin:0}
}

/* --- atoll context + same-atoll internal links --- */
.atoll-about{max-width:760px;margin:10px 0 4px;color:var(--mut);font-size:15px;line-height:1.7}
.atoll-links{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.atoll-links a{display:block;padding:11px 14px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#fff;font-weight:600;font-size:14px}
.atoll-links a:hover{border-color:var(--accent);color:var(--accent2);text-decoration:none}
.atoll-links .al-island{color:var(--mut);font-weight:400}

/* ===================== HOMEPAGE ===================== */
.home-hero{position:relative;background:var(--dark) center/cover no-repeat;color:#fff;
  padding:clamp(70px,12vw,150px) 24px clamp(80px,12vw,140px);text-align:center}
.home-hero>.hero-slides{z-index:0}
.hh-wrap{max-width:880px;margin:0 auto;position:relative;z-index:1}
.home-hero .eyebrow.light{color:rgba(255,255,255,.82)}
.home-hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(38px,6vw,72px);margin:.15em 0 .2em;line-height:1.04}
.home-sub{font-size:clamp(15px,1.7vw,19px);color:rgba(255,255,255,.9);max-width:640px;margin:0 auto 30px;line-height:1.6}
.home-search{display:flex;gap:0;background:#fff;border-radius:12px;padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.28);align-items:stretch;text-align:left;max-width:860px;margin:0 auto}
.hs-field{display:flex;flex-direction:column;justify-content:center;padding:8px 14px;position:relative;border-right:1px solid var(--line)}
.hs-field label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:600;margin-bottom:3px}
.hs-field input,.hs-field select{border:0;font:inherit;font-size:15px;color:var(--ink);background:transparent;outline:none;padding:2px 0;min-width:0;width:100%}
.hs-dest{flex:1 1 auto;min-width:200px}.hs-date{flex:0 0 130px}.hs-guests{flex:0 0 120px}
.home-search .cta{margin-left:6px;border-radius:8px;flex:0 0 auto;align-self:stretch}
.hs-results{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff;border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.2);overflow:hidden;z-index:20;min-width:320px}
.hs-results a{display:flex;flex-direction:column;padding:11px 16px;border-bottom:1px solid var(--line);color:var(--ink)}
.hs-results a:last-child{border-bottom:0}.hs-results a:hover{background:var(--panel);text-decoration:none}
.hs-results b{font-weight:600;font-size:14px}.hs-results span{font-size:12px;color:var(--mut)}
.home-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 44px;padding:26px 24px;background:var(--panel);color:var(--mut);font-size:14px;text-align:center}
.home-strip b{color:var(--ink)}
.home-sec{max-width:1200px;margin:0 auto;padding:clamp(44px,6vw,72px) 24px}
/* band sections are full-bleed backgrounds; constrain EVERY direct child to the same
   content box as non-band sections (1200px outer − 24px inline padding) so card rows,
   exp grids and headings all line up vertically down the page. */
.home-sec.band{max-width:none;background:var(--bg);padding-inline:0}
.home-sec.band>*{max-width:1200px;margin-inline:auto;padding-inline:24px;box-sizing:border-box}
.home-sec-head{margin-bottom:26px}
.home-sec-head .eyebrow{color:var(--accent2)}
.home-sec-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(26px,3.4vw,40px);margin:.1em 0 0}
.card-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hcard{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--dark) center/cover no-repeat;display:flex;align-items:flex-end;color:#fff;transition:transform .2s}
.hcard:hover{transform:translateY(-4px);text-decoration:none}
.hcard-b{padding:18px}
.hcard-b h3{font-family:var(--serif);font-size:20px;font-weight:600;margin:0 0 4px;line-height:1.15}
.hcard-m{font-size:12.5px;color:rgba(255,255,255,.88)}
.atoll-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.atoll-card{position:relative;aspect-ratio:5/4;border-radius:14px;overflow:hidden;background:var(--dark) center/cover no-repeat;display:flex;align-items:flex-end;color:#fff;transition:transform .2s}
.atoll-card:hover{transform:translateY(-4px);text-decoration:none}
.ac-b{padding:16px}
.ac-b h3{font-family:var(--serif);font-size:19px;font-weight:600;margin:0 0 2px}
.ac-b span{font-size:12.5px;color:rgba(255,255,255,.85)}
@media(max-width:900px){
  .card-row,.atoll-grid{grid-template-columns:repeat(2,1fr)}
  .home-search{flex-wrap:wrap}
  .hs-field{border-right:0;border-bottom:1px solid var(--line);flex:1 1 100%}
  .hs-dest,.hs-date,.hs-guests{flex:1 1 100%}
  .home-search .cta{flex:1 1 100%;margin:6px 0 0}
  .hs-results{min-width:0}
}

/* ---- price badges + hub sort ---- */
.hcard-price{display:block;margin-top:6px;font-size:14px;font-weight:700;color:#fff}
.hcard-price small{font-weight:400;font-size:11px;opacity:.8}
.hub-price{display:block;margin-top:5px;font-size:14px;font-weight:700;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hub-price small{font-weight:400;font-size:11px;opacity:.85}
.hub-sort{max-width:1200px;margin:0 auto;padding:0 24px 8px;display:flex;align-items:center;justify-content:flex-end;gap:10px}
.hub-sort label{font-size:12px;letter-spacing:.04em;color:var(--mut)}
.hub-sort select{font:inherit;font-size:14px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}

/* ---- stay-length toggle ---- */
.stay-bar{max-width:1200px;margin:0 auto;padding:22px 24px 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.stay-lbl{font-size:13px;letter-spacing:.04em;color:var(--mut);font-weight:600}
.stay-note{font-size:12px;color:var(--mut);opacity:.8}
.stay-toggle{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.stay-toggle button{font:inherit;font-size:13px;font-weight:600;color:var(--mut);background:transparent;border:0;
  padding:9px 15px;cursor:pointer;border-right:1px solid var(--line);transition:background .15s,color .15s}
.stay-toggle button:last-child{border-right:0}
.stay-toggle button:hover{color:var(--ink)}
.stay-toggle button.on{background:var(--accent);color:#fff}
.hub-controls{max-width:1200px;margin:0 auto;padding:0 24px 8px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.hub-controls .hub-sort{padding:0}
@media(max-width:600px){.stay-toggle button{padding:8px 11px;font-size:12px}.stay-note{flex-basis:100%}}
/* ---- hotel-page stay-cost ladder ---- */
.stay-ladder{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 0}
.stay-ladder .sl{flex:1 1 120px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;text-align:center}
.stay-ladder .sl-n{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);font-weight:600}
.stay-ladder .sl-v{font-family:var(--serif);font-size:25px;font-weight:700;color:var(--ink);margin-top:3px}
.stay-ladder-note{margin-top:10px;font-size:12.5px;color:var(--mut)}

/* ---- things-to-do experience tiles ---- */
.exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.exp-tile{position:relative;min-height:300px;border-radius:14px;overflow:hidden;background:var(--dark) center/cover no-repeat;display:flex;align-items:flex-end;color:#fff;transition:transform .2s}
.exp-tile:hover{transform:translateY(-4px);text-decoration:none}
.exp-tile-b{padding:22px}
.exp-kicker{display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:7px}
.exp-tile h3{font-family:var(--serif);font-size:24px;font-weight:600;margin:0 0 7px;line-height:1.1}
.exp-tile p{margin:0;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.86)}
@media(max-width:900px){.exp-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.exp-grid{grid-template-columns:1fr}}

/* ---- best-value section header (heading + stay tabs) ---- */
.value-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.value-head .eyebrow{margin-bottom:8px}
@media(max-width:600px){.value-head .stay-toggle{width:100%}.value-head .stay-toggle button{flex:1}}

/* ---- signature feature callout (marquee resorts) ---- */
.signature{display:flex;gap:16px;align-items:center;max-width:840px;margin:0 auto;
  background:linear-gradient(120deg,var(--panel),#fff);border:1px solid var(--line);
  border-radius:12px;padding:20px 24px}
.sig-star{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--gold);color:#fff;
  display:grid;place-items:center;font-size:17px}
.signature p{margin:0;font-family:var(--serif);font-size:19px;line-height:1.45;color:var(--ink)}

/* ---- currency selector (header) ---- */
.cur-select{font:inherit;font-size:12px;letter-spacing:.06em;background:transparent;color:inherit;
  border:1px solid currentColor;border-radius:7px;padding:6px 8px;cursor:pointer;opacity:.8;line-height:1}
.cur-select:hover{opacity:1}
.cur-select option{color:#23282f}
/* over-hero (white text) header variants */
.hotelnav .cur-select{color:#fff;border-color:rgba(255,255,255,.45)}
.hotel-head.scrolled .hotelnav .cur-select{color:var(--ink);border-color:var(--line)}
.site-head.over-hero .cur-select{color:#fff;border-color:rgba(255,255,255,.45)}
.site-head.over-hero.scrolled .cur-select{color:var(--ink);border-color:var(--line)}
.site-head:not(.over-hero) .cur-select{color:var(--ink);border-color:var(--line)}
@media(max-width:760px){.cur-select{font-size:11px;padding:5px 6px}
  /* Mobile: .hotelnav is a LIGHT dropdown panel, not transparent-over-hero, so the
     white-text variant above would render the currency picker invisible (white on
     #fdfcfa). The earlier mobile rule (~L95) loses the cascade to the over-hero rule
     that follows it at equal specificity — so it must be re-applied HERE, after it. */
  .hotelnav .cur-select,.hotel-head.scrolled .hotelnav .cur-select{
    color:var(--ink);border-color:var(--line)}}

/* ---- update-business form ---------------------------------------------- */
.ubform label{display:block;font-weight:500;color:var(--ink);font-size:15px}
.ubform>label{margin:0}
.ubform input[type=text],.ubform input[type=email],.ubform select,.ubform textarea{
  display:block;width:100%;margin-top:7px;padding:12px 14px;font:inherit;font-size:15px;
  color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:9px;
  -webkit-appearance:none;appearance:none}
.ubform select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.ubform textarea{resize:vertical;min-height:120px;line-height:1.5}
.ubform input:focus,.ubform select:focus,.ubform textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(176,132,66,.15)}
.ubform input[type=radio]{width:auto;margin-right:6px;accent-color:var(--accent)}
.ubform .cta.lg{border:0;cursor:pointer;font:inherit;font-weight:600;letter-spacing:.04em;text-transform:uppercase}

/* Stay22 nearby-stays comparison (catalog pilot) — button swaps to iframe on click */
.s22wrap{margin-top:18px}
.s22map{width:100%;height:480px;border:1px solid var(--line);display:block;background:var(--panel)}
@media(max-width:700px){.s22map{height:420px}}

/* ---------- language switcher (two-letter codes, styled like cur-select) ---------- */
.lang-select{font:inherit;font-size:12px;letter-spacing:.06em;background:transparent;color:inherit;border:1px solid var(--line);border-radius:6px;padding:5px 7px;cursor:pointer}
.lang-select:hover{opacity:1}
.lang-select option{color:#23282f}
.hotelnav .lang-select{color:#fff;border-color:rgba(255,255,255,.45)}
.hotel-head.scrolled .hotelnav .lang-select{color:var(--ink);border-color:var(--line)}
.site-head.over-hero .lang-select{color:#fff;border-color:rgba(255,255,255,.45)}
.site-head.over-hero.scrolled .lang-select,.site-head:not(.over-hero) .lang-select{color:var(--ink);border-color:var(--line)}
@media (max-width:760px){
  /* inside the opened burger menu, below the currency select */
  .hotelnav .lang-select{margin:6px 22px 4px;align-self:flex-start;color:var(--ink);border-color:var(--line)}
}
/* --- compact mobile header tools (2026-08-16): the currency and language controls
   share ONE chip vocabulary — squared, 1px-bordered, same 32px height as each other
   and the same geometry as the desktop nav. An earlier globe-in-flag-colors disc was
   rejected on review: a filled circle fought the squared controls beside it, the flag
   stripes turned to noise at 32px, and the white globe outline lost contrast on
   red/white. "PL" needs no icon on a Polish hotel page. --- */
.hh-tools{display:none;align-items:center;gap:6px;flex:0 0 auto}
.cur-mini,.lang-mini{height:32px;padding:0 7px;border:1px solid rgba(255,255,255,.4);
  border-radius:8px;font:inherit;font-size:13px;font-weight:600;letter-spacing:.02em;
  color:#fff;background:transparent;-webkit-appearance:none;appearance:none;
  text-align:center;text-align-last:center;cursor:pointer;transition:border-color .2s,background .2s}
.cur-mini:hover,.lang-mini:hover{border-color:rgba(255,255,255,.75)}
.cur-mini:focus-visible,.lang-mini:focus-visible{outline:2px solid var(--cta);outline-offset:2px}
.hotel-head.scrolled .cur-mini,.hotel-head.scrolled .lang-mini,
.hotel-head.nav-open .cur-mini,.hotel-head.nav-open .lang-mini{color:var(--ink);border-color:var(--line)}
.hotel-head.scrolled .cur-mini:hover,.hotel-head.scrolled .lang-mini:hover{border-color:var(--ink)}
@media(max-width:1023px){
  .hh-tools{display:flex}
}
@media(prefers-reduced-motion:reduce){.cur-mini,.lang-mini{transition:none}}
/* Burger sized to the chip system on mobile (2026-08-16): it was 44x44 with 11px
   padding next to 32px chips — the widest element in the cluster and visually
   unrelated to it. 32x32 with a 20px bar span keeps the 44px touch target via a
   transparent ::before, so compactness costs no tap accuracy (WCAG 2.5.8). */
@media(max-width:1023px){
  .nav-burger{position:relative;width:32px;height:32px;padding:6px}
  .nav-burger span{margin:3px 0}
  .nav-burger::before{content:"";position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px}
}
/* BOOK sized to the chip row (2026-08-16): it stays the one filled, highest-contrast
   element — hierarchy comes from the terracotta fill, not from bulk. 32px height
   matches the currency/language chips exactly, so the whole cluster reads as one row
   and the freed width goes to the hotel name. */

/* The REAL mobile book button is .nav-book-mini in .hh-actions (the drawer's .navbook
   is a different element — styling that one changed nothing visible). Sized to the
   32px chip row so BOOK, currency, language and burger form one consistent cluster;
   it keeps the terracotta fill, which is what carries the hierarchy. */
@media(max-width:1023px){
  .nav-book-mini{height:32px;padding:0 12px;font-size:11px;letter-spacing:.08em;
    border-radius:8px;align-items:center}
  .hh-actions{gap:6px}
}
/* Tighter chip row (2026-08-16, second pass): 28px height, 10px type. The 44px touch
   target is preserved on every control via transparent ::before insets — shrinking the
   PAINTED chip is a visual change, not a tap-accuracy one (WCAG 2.5.8). Below this the
   currency glyph stops being legible, so 28px is the floor. */
@media(max-width:1023px){
  .hh-actions{gap:5px}
  .nav-book-mini{height:28px;padding:0 10px;font-size:10px;letter-spacing:.06em;
    border-radius:7px;position:relative}
  .nav-book-mini::before{content:"";position:absolute;top:-8px;left:-4px;right:-4px;bottom:-8px}
  .hh-tools{gap:5px}
  .cur-mini,.lang-mini{height:28px;padding:0 5px;font-size:11px;border-radius:7px;position:relative}
  .nav-burger{width:28px;height:28px;padding:5px}
  .nav-burger span{margin:2.5px 0}
  .nav-burger::before{top:-8px;left:-8px;right:-8px;bottom:-8px}
}
/* Third pass: 26px row. This IS the floor — the € glyph at 10px is the binding
   constraint, and the border radius is dropped to 6px so the chips don't read as
   pills at this height. Touch targets stay 44px via the transparent insets. */
@media(max-width:1023px){
  .hh-actions{gap:4px}
  .nav-book-mini{height:26px;padding:0 9px;font-size:9.5px;letter-spacing:.05em;border-radius:6px}
  .hh-tools{gap:4px}
  .cur-mini,.lang-mini{height:26px;padding:0 4px;font-size:10px;border-radius:6px}
  .nav-burger{width:26px;height:26px;padding:4.5px}
  .nav-burger span{height:1.8px;margin:2.2px 0}
}
/* TABLET DEAD BAND FIX (2026-08-16, portfolio-wide): between 761px and 1023px the
   desktop nav links + currency + language were hidden but the burger was still
   mobile-only, so an iPad-portrait visitor (834px) got NO menu, NO currency and NO
   language — only the book button. Found by measuring computed display at 834px on a
   live page. The compact cluster now covers the whole band the desktop nav vacates. */
@media(min-width:761px) and (max-width:1023px){
  .nav-burger{display:block}
  .hh-tools{display:flex}
  .nav-book-mini{display:inline-flex}
}