/* ============================================================================
   hotel-detail.css — shared by every hotel-*.html page.
   GENERATED PAGES: the 23 hotel-*.html files are built by _hotels-build/build.js
   from _hotels-build/hotels.json. Edit the data or this stylesheet, never the
   generated HTML — a rebuild overwrites it.
   Unlike the hand-written tour pages, which each inline their own <style>, these
   share one file: 23 copies of 30KB of identical CSS is not worth the bytes.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --purple:#C8521A;
  --purple-mid:#D4651A;
  --purple-light:#E8804A;
  --purple-bg:#FFF6F0;
  --purple-border:rgba(200,82,26,0.15);
  --yellow:#FFF8F0;
  --dark:#161513;
  --dark-footer:#0f0e0d;
  --text:#1A1915;
  --text-muted:#6B665C;
  --white:#FFFFFF;
  --wa:#25D366;
  /* --purple at small sizes on cream is ~4.3:1 and fails AA; --brand-ink is the
     same hue at 5.4:1 — use it for anything under 1rem. */
  --brand-ink:#B04516;
  --green-ink:#0E7A55;
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;font-size:20px;overflow-x:clip}
body{font-family:'EB Garamond',serif;background:var(--white);color:var(--text);overflow-x:clip;max-width:100vw}
img{max-width:100%}
::selection{background:rgba(200,82,26,0.15)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── NAV ───────────────────────────────── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 4rem;height:90px;
  background:rgba(255,246,240,0.88);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(200,82,26,0.10);
  transition:box-shadow 0.3s;
}
#nav.elevated{box-shadow:0 2px 20px rgba(200,82,26,0.08)}
/* Reading state: the nav gives back a third of its height, and .hnav rides up
   with it. Both transition, so the page does not jump. */
#nav.compact{height:70px}
#nav.compact .nav-cta{padding:0.45rem 0.85rem;font-size:0.76rem}
.nav-brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.nav-logo-img{height:104px;width:auto;display:block;object-fit:contain;flex-shrink:0;transition:height 0.3s ease}
#nav.elevated .nav-logo-img{height:96px}
/* After .elevated: both match once you scroll, and the later one wins. */
#nav.compact .nav-logo-img{height:84px}
.nav-links{display:flex;align-items:center;gap:1.35rem;list-style:none}
.nav-links a{color:var(--dark);text-decoration:none;font-size:1.02rem;font-weight:700;white-space:nowrap;transition:color 0.2s}
.nav-links a:hover{color:var(--purple)}
.nav-links a.current{color:var(--purple);position:relative}
.nav-links a.current::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--purple-mid);border-radius:2px}
.nav-links li:last-child a{color:var(--purple);font-weight:800;letter-spacing:0.06em}
.nav-cta{
  display:flex;align-items:center;gap:0.5rem;
  background:var(--brand-ink);color:#fff;text-decoration:none;
  padding:0.55rem 1.125rem;border-radius:8px;
  font-size:0.8125rem;font-weight:500;
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:0.02em;
  transition:background 0.25s;white-space:nowrap;
}
.nav-cta:hover{background:#96380F}
.nav-cta svg{width:15px;height:15px;flex-shrink:0}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.nav-burger span{display:block;width:22px;height:1.5px;background:var(--text);transition:0.3s}
.nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:1320px){.nav-links{gap:1.05rem}.nav-links a{font-size:0.95rem}}
@media(max-width:1220px){
  #nav{padding:0 2rem}
  .nav-links{gap:0.8rem}
  .nav-links a{font-size:0.86rem}
  .nav-cta{display:none}
}
@media(max-width:900px){
  #nav,#nav.compact{padding:0 1.25rem;height:64px}
  .nav-logo-img,#nav.elevated .nav-logo-img,#nav.compact .nav-logo-img{height:68px}
  .nav-links{display:none}
  .nav-burger{display:flex}
}
.mob-menu{
  position:fixed;top:64px;left:0;right:0;z-index:199;
  background:#fff;border-bottom:1px solid rgba(200,82,26,0.1);
  box-shadow:0 12px 28px rgba(22,21,19,0.10);
  padding:0.75rem 1.25rem 1.25rem;display:none;flex-direction:column;
}
.mob-menu.open{display:flex}
.mob-menu a{color:var(--text);text-decoration:none;font-size:0.95rem;font-weight:600;padding:0.7rem 0;border-bottom:1px solid rgba(200,82,26,0.08)}
.mob-menu a:last-child{border-bottom:none;color:var(--brand-ink)}
.mob-menu a.current{color:var(--brand-ink)}
@media(min-width:901px){.mob-menu{display:none !important}}

/* ── SHELL ─────────────────────────────── */
/* 1340 matches the listing page and keeps the reading sections at a sane
   measure. The hero opts out with .wide-hero: it is a three-column band, not
   prose, so on a wide screen the spare margin is better spent on the photo. */
.wide{max-width:1340px;margin:0 auto;padding:0 4rem}
/* Near-full-bleed: the hero is a three-column band, so a fixed 1340 container
   left ~290px of dead cream each side on a 1920 screen. Padding scales with the
   viewport instead, and the columns take minimums so nothing collapses. */
.wide-hero{max-width:1900px;padding:0 clamp(1.25rem,4vw,4.5rem)}
/* This breadcrumb is a <nav> too — every nav rule above is id-scoped for that
   reason, and position:static here is the belt to that braces. */
.crumb{position:static;font-size:0.72rem;letter-spacing:0.08em;color:var(--text-muted);margin-bottom:0.6rem}
.crumb a{color:var(--brand-ink);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb span{opacity:0.5;margin:0 0.35rem}
.crumb b{font-weight:400;color:var(--text-muted)}

/* ── HERO ──────────────────────────────── */
/* Just clear of the fixed nav: the old 1.1rem cushion on top of 90px left a
   visible band above the breadcrumb. */
.dh-wrap{background:var(--purple-bg);padding:calc(90px + 0.3rem) 0 0;position:relative}
/* Title block across the top, then album | (price card + map). The three-column
   version squeezed the copy into 300px, wrapped the headline four deep and left
   a hole between the chips and the price. */
.dh{padding-bottom:2.75rem}
/* Spread, not a 80ch block: capped, the title sat in the left third and left
   the middle and right of the band empty. */
.dh-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem 2.5rem;flex-wrap:wrap;margin-bottom:1.5rem;
}
.dh-head-l{min-width:0;flex:1 1 420px}
.dh-head-r{
  display:flex;flex-direction:column;align-items:flex-end;gap:0.45rem;
  text-align:right;flex:0 1 auto;
}
.dh-body{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(320px,0.7fr);gap:1.75rem;align-items:stretch}
.dh-main{display:flex;flex-direction:column;min-width:0}
.dh-side{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.dh-eyebrow{font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--brand-ink);font-weight:700;margin-bottom:0.7rem}
/* Sized for a 300px column: at 2.9rem the title ran to four deep lines and
   pushed the hero row past 700px, which stretched the album into a sliver. */
.dh-h1{font-family:'Cormorant Garamond',serif;font-size:clamp(1.75rem,2.1vw,2.3rem);font-weight:600;line-height:1.07;letter-spacing:-0.02em;color:var(--dark)}
.dh-stars{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;justify-content:flex-end}
.dh-stars .s{color:#C9983A;font-size:0.95rem;letter-spacing:0.1em;line-height:1}
.dh-stars .cls{font-size:0.76rem;color:var(--text-muted)}
.dh-score{
  display:inline-flex;align-items:baseline;gap:0.3rem;
  background:var(--brand-ink);color:#fff;border-radius:100px;
  padding:0.16rem 0.6rem;font-size:0.72rem;font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;
}
.dh-score em{font-style:normal;font-weight:400;opacity:0.85;font-size:0.9em}
.dh-addr{font-size:0.8rem;line-height:1.6;color:var(--text-muted)}
.dh-addr a{color:var(--brand-ink);text-decoration:none;font-weight:600;white-space:nowrap}
.dh-addr a:hover{text-decoration:underline}
/* Chips ride beside the name instead of under it — the row was empty to the
   right of a short hotel name and the block below it looked like a second
   heading. */
.dh-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.45rem 0.9rem;margin-top:0.35rem}
.dh-feat{list-style:none;display:flex;flex-wrap:wrap;gap:0.35rem}
.dh-feat li{font-size:0.7rem;color:var(--text);background:#fff;border:1px solid var(--purple-border);border-radius:100px;padding:0.26rem 0.65rem}

/* A card now, not a strip pinned to the bottom of a tall column. */
.dh-buy{
  background:#fff;border:1px solid var(--purple-border);border-radius:16px;
  box-shadow:0 8px 26px rgba(22,21,19,0.08);
  padding:1.15rem 1.25rem 1.25rem;
  display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;
}
.dh-price .from{font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.dh-price .amt{font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:700;color:var(--brand-ink);line-height:1;margin:0.1rem 0 0.15rem;font-variant-numeric:lining-nums tabular-nums}
.dh-price .unit{font-size:0.66rem;color:var(--text-muted);line-height:1.4}
.dh-btns{display:flex;gap:0.55rem;flex-wrap:wrap;margin-left:auto}
.dh-btns .btn-p,.dh-btns .btn-wa{padding:0.7rem 1.15rem;font-size:0.82rem}
.btn-p{display:inline-flex;align-items:center;gap:0.5rem;background:var(--brand-ink);color:#fff;text-decoration:none;border:none;cursor:pointer;font-family:'EB Garamond',serif;padding:0.78rem 1.5rem;border-radius:8px;font-size:0.88rem;font-weight:600;transition:background 0.2s,transform 0.2s,box-shadow 0.2s}
.btn-p:hover{background:#96380F;transform:translateY(-2px);box-shadow:0 8px 24px rgba(200,82,26,0.25)}
.btn-wa{display:inline-flex;align-items:center;gap:0.5rem;background:var(--green-ink);color:#fff;text-decoration:none;padding:0.78rem 1.35rem;border-radius:8px;font-size:0.88rem;font-weight:600;transition:opacity 0.2s,transform 0.2s}
.btn-wa:hover{opacity:0.9;transform:translateY(-2px)}
.btn-wa svg{width:15px;height:15px;fill:currentColor;flex-shrink:0}
.btn-o{display:inline-flex;align-items:center;gap:0.5rem;color:var(--brand-ink);text-decoration:none;padding:0.78rem 1.3rem;border-radius:8px;border:1.5px solid var(--purple-border);font-size:0.88rem;font-weight:500;background:rgba(255,255,255,0.85);transition:border-color 0.2s,background 0.2s,transform 0.2s}
.btn-o:hover{border-color:var(--purple-mid);background:#fff;transform:translateY(-2px)}

/* The photo carries no intrinsic height — its image is absolutely positioned —
   so the info column sets the row height and the two end on one line. */
.dh-photo{position:relative;border-radius:20px;overflow:hidden;min-height:340px;background:linear-gradient(150deg,#F3EBE4 0%,#EADFD5 100%);box-shadow:0 26px 60px rgba(22,21,19,0.20)}
.dh-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dh-photo .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.6rem;color:rgba(176,69,22,0.34)}
.dh-photo .ph svg{width:76px;height:58px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dh-photo .ph em{font-size:0.64rem;letter-spacing:0.16em;text-transform:uppercase;font-style:normal;font-weight:700}
.dh-flag{position:absolute;top:1rem;left:1rem;z-index:2;background:var(--brand-ink);color:#fff;font-size:0.62rem;font-weight:700;letter-spacing:0.11em;text-transform:uppercase;padding:0.3rem 0.7rem;border-radius:100px}
.dh-wave{position:absolute;bottom:-1px;left:0;right:0;line-height:0;pointer-events:none}
.dh-wave svg{display:block;width:100%;height:44px}

/* ── SECTIONS ──────────────────────────── */
/* Trimmed: the wave, the hero padding and this stacked into a wide band of
   nothing between the hero and the first heading. */
.dsec{padding:1.6rem 0 0}
/* The wave already carries the break from the hero; the first section under it
   does not need a second helping of air. */
.wide>.dsec:first-of-type{padding-top:0.55rem}
.dsec-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
.dsec-h h2{font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:600;color:var(--dark);line-height:1.12}
.dsec-h h2 em{font-style:italic;color:var(--purple)}
.dsec-h .note{font-size:0.72rem;color:var(--text-muted);font-style:italic}

/* ── HERO ALBUM ────────────────────────── */
/* Thumb rail down the left, big frame on the right, both the full height of the
   hero row. The frame carries no intrinsic height — every image is absolutely
   positioned — so the row is sized by the map column and the album fills it. */
/* Absolute, not a grid track: eleven 56px thumbs stack to 706px of max-content,
   and a grid row sizes to that — the rail was setting the whole hero height. */
/* Capped and top-aligned rather than stretched to the row: filling the full
   hero height made the photo read as oversized. */
/* Stretch with a ceiling. Capping by viewport instead left up to 227px of dead
   cream under the album, which is the same complaint as the side margins. */
.dh-gal{position:relative;flex:1 1 auto;min-height:340px;min-width:0}
.gal-thumbs{
  position:absolute;top:0;bottom:0;left:0;width:74px;z-index:2;
  display:flex;flex-direction:column;gap:0.45rem;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.gal-thumbs::-webkit-scrollbar{display:none}
.gal-thumb{
  flex:0 0 auto;height:56px;width:100%;padding:0;cursor:pointer;
  border:2px solid transparent;border-radius:8px;overflow:hidden;background:#EFE7E0;
  transition:border-color 0.2s,opacity 0.2s;opacity:0.6;
}
.gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumb:hover{opacity:1}
.gal-thumb.on{border-color:var(--brand-ink);opacity:1}

.gal-main{
  position:absolute;inset:0 0 0 82px;margin:0;border-radius:20px;overflow:hidden;
  background:linear-gradient(150deg,#F3EBE4 0%,#EADFD5 100%);
  box-shadow:0 26px 60px rgba(22,21,19,0.20);
}
/* Every frame is in the DOM and stacked; only .on is opaque. Swapping one src
   would flash a blank frame on each step. */
.gal-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 0.28s ease}
.gal-img.on{opacity:1}
.gal-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,0.92);display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 14px rgba(22,21,19,0.22);transition:background 0.2s,transform 0.2s;
}
.gal-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
.gal-arrow svg{width:16px;height:16px;stroke:var(--dark);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.gal-arrow.prev{left:0.7rem}
.gal-arrow.next{right:0.7rem}
.gal-count{
  position:absolute;bottom:0.8rem;right:0.8rem;z-index:3;
  background:rgba(14,12,9,0.72);color:#fff;border-radius:100px;
  padding:0.2rem 0.65rem;font-size:0.7rem;font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.gal-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:2.4rem 1rem 0.85rem;color:#fff;font-size:0.72rem;line-height:1.5;
  background:linear-gradient(to top,rgba(12,10,8,0.82) 0%,rgba(12,10,8,0.4) 50%,rgba(12,10,8,0) 100%);
  text-shadow:0 1px 3px rgba(0,0,0,0.45);
}
/* Keep the caption clear of the counter chip in the same corner. */
.gal-cap{padding-right:4.5rem}

/* ── HERO MAP COLUMN ───────────────────── */
.dh-map{display:flex;flex-direction:column;min-width:0}
.dh-map-frame{
  position:relative;border-radius:14px;overflow:hidden;
  aspect-ratio:4/3;flex-shrink:0;
  border:1px solid var(--purple-border);background:#EFE7E0;
  box-shadow:0 8px 26px rgba(22,21,19,0.10);
}
.dh-map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.dh-map-addr{display:none;gap:0.5rem;align-items:flex-start;font-size:0.8rem;line-height:1.55;color:var(--text);margin-top:0.9rem}
.dh-map-addr svg{width:16px;height:16px;stroke:var(--brand-ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:0.12rem}
.dh-map-addr em{display:block;font-style:normal;font-size:0.74rem;color:var(--text-muted);margin-top:0.2rem}
.dh-map-open{
  align-self:flex-start;margin-top:0.6rem;
  color:var(--brand-ink);text-decoration:none;font-size:0.76rem;font-weight:600;
  border-bottom:1px solid var(--purple-border);padding-bottom:0.1rem;
}
.dh-map-open:hover{border-color:var(--purple-mid)}
.dh-map .walk{margin-top:0.9rem;grid-template-columns:minmax(0,1fr);gap:0}
.dh-map .walk li{padding:0.4rem 0;font-size:0.76rem}
.dh-map .walk .mins{font-size:0.72rem}
.dh-map-note{margin-top:0.9rem;font-size:0.76rem;line-height:1.6;color:var(--text-muted)}
/* At three columns the row height is set by this column, so let the map eat the
   slack instead of leaving a strip of cream under the walking times. */
@media(min-width:1201px){
  .dh-map-frame{flex:1 1 auto;aspect-ratio:auto;min-height:165px}
}

/* ── AIRPORT TRANSFER ──────────────────── */
/* Under the hero photo with the rates and the phone numbers in plain sight, so
   nobody has to open the form to find out what it costs or who to call. */
/* ── PERK BADGE ────────────────────────── */
/* Green because it is something the guest gets, not something they pay for.
   The terms sit in the tooltip: hover on a desktop, tap on a phone. */
.perks{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.75rem}
.perk{
  position:relative;display:inline-flex;align-items:center;gap:0.4rem;
  background:#fff;border:1px solid rgba(14,122,85,0.35);border-radius:8px;
  padding:0.32rem 0.6rem 0.32rem 0.35rem;cursor:pointer;
  font-family:inherit;font-size:0.76rem;color:var(--green-ink);
}
.perk:hover,.perk[aria-expanded="true"]{border-color:var(--green-ink);background:rgba(14,122,85,0.05)}
.perk-tag{
  font-size:0.6rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  border:1px solid rgba(14,122,85,0.5);border-radius:4px;padding:0.1rem 0.3rem;
}
/* Above the sticky section bar (180): the tooltip opens downward from the
   hero and the bar was painting over its lower half. */
.perk-tip{
  position:absolute;top:calc(100% + 10px);left:0;z-index:190;
  width:min(21rem,calc(100vw - 3rem));text-align:left;
  background:#fff;border:1px solid var(--purple-border);border-radius:12px;
  box-shadow:0 16px 40px rgba(22,21,19,0.18);padding:0.9rem 1rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity 0.16s,transform 0.16s,visibility 0.16s;
}
.perk-tip::before{
  content:'';position:absolute;top:-6px;left:1.4rem;width:10px;height:10px;
  background:#fff;border-left:1px solid var(--purple-border);border-top:1px solid var(--purple-border);
  transform:rotate(45deg);
}
.perk:hover .perk-tip,.perk[aria-expanded="true"] .perk-tip{opacity:1;visibility:visible;transform:translateY(0)}
.perk-tip b{
  display:block;font-family:'Cormorant Garamond',serif;font-size:1.05rem;
  font-weight:600;line-height:1.25;color:var(--dark);
}
.perk-tip>span{display:block;margin-top:0.4rem;font-size:0.76rem;line-height:1.65;color:var(--text-muted)}
.perk-tip em{
  display:block;margin-top:0.5rem;font-style:normal;font-size:0.62rem;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--brand-ink);
}
@media (max-width:520px){
  /* Anchored to the row, not the badge: a 21rem card hung off a 10rem button
     hangs off the screen with it. */
  .perks{position:relative}
  .perk{position:static}
  .perk-tip{left:0;right:auto;width:100%}
}

.xfer-note{
  display:flex;gap:0.6rem;align-items:flex-start;
  margin-top:0.75rem;padding:0.75rem 0.9rem;
  background:var(--purple-bg);border:1px solid var(--purple-border);border-radius:12px;
  font-size:0.76rem;line-height:1.65;color:var(--text-muted);
}
.xfer-note svg{width:18px;height:18px;stroke:var(--brand-ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:0.2rem}
.xfer-note strong{color:var(--dark);font-weight:700}
.xfer-note b{color:var(--brand-ink);font-weight:700;font-variant-numeric:lining-nums}
.xfer-note a{color:var(--brand-ink);font-weight:700;text-decoration:none;white-space:nowrap;font-variant-numeric:lining-nums}
.xfer-note a:hover{text-decoration:underline}

/* The same offer priced out where it is acted on: the form's opt-in checkbox. */
.rq-xfer{
  grid-column:1/-1;min-width:0;margin:0;
  background:#fff;border:1px solid var(--purple-border);border-radius:12px;
  padding:1rem 1.15rem 1.05rem;
}
.xf-h{display:flex;align-items:center;gap:0.45rem;font-size:0.88rem;font-weight:700;color:var(--dark);padding:0}
.xf-h svg{width:18px;height:18px;stroke:var(--brand-ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
/* One priced choice per row. Whichever row is selected is what we quote, so
   the vehicle size travels with the request instead of being asked about later. */
.xf-opts{display:flex;flex-direction:column;gap:0.4rem;margin-top:0.7rem}
.xf-opt{
  display:flex;align-items:center;gap:0.6rem;cursor:pointer;
  border:1px solid var(--purple-border);border-radius:10px;
  padding:0.55rem 0.75rem;transition:border-color 0.18s,background 0.18s;
}
.xf-opt:hover{border-color:var(--purple-mid);background:var(--purple-bg)}
.xf-opt input{width:16px;height:16px;flex-shrink:0;accent-color:var(--brand-ink);margin:0}
.xf-opt:has(input:checked){border-color:var(--brand-ink);background:var(--purple-bg)}
.xf-opt input:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px}
.xf-l{display:block;min-width:0;flex:1;font-size:0.8rem;line-height:1.35;color:var(--text)}
.xf-l em{display:block;font-style:normal;font-size:0.7rem;color:var(--text-muted);margin-top:0.1rem}
.xf-p{font-size:0.95rem;font-weight:700;color:var(--brand-ink);font-variant-numeric:lining-nums;white-space:nowrap}
.xf-sum{
  margin-top:0.65rem;font-size:0.76rem;font-weight:600;color:var(--green-ink);
  background:rgba(14,122,85,0.07);border-radius:8px;padding:0.45rem 0.65rem;
}
.xf-sum[hidden]{display:none}
.xf-note{display:block;margin-top:0.6rem;font-size:0.74rem;line-height:1.6;color:var(--text-muted)}
.xf-call{display:block;margin-top:0.5rem;font-size:0.74rem;color:var(--text-muted)}
.xf-call a{color:var(--brand-ink);font-weight:600;text-decoration:none}
.xf-call a:hover{text-decoration:underline}

/* ── ROOM PHOTOS ───────────────────────── */
/* One shot only. The other categories stay in the DOM as hidden buttons so
   the lightbox still has the whole set to page through — the strip itself
   was noise under a row that already carries specs and inclusions. */
.room-gal{position:relative;margin-top:0.8rem;max-width:440px}
.room-shot:not(.lead){display:none}
.room-shot{
  display:block;width:100%;
  padding:0;border:none;cursor:pointer;background:#EFE7E0;
  border-radius:8px;overflow:hidden;aspect-ratio:3/2;
  transition:opacity 0.2s,transform 0.2s;
}
.room-shot img{width:100%;height:100%;object-fit:cover;display:block}
.room-shot:hover{opacity:0.88}
.room-shot.lead{grid-column:1/-1;aspect-ratio:16/9;border-radius:10px}
.room-count{
  position:absolute;right:0.6rem;bottom:0.6rem;z-index:2;pointer-events:none;
  background:rgba(14,12,9,0.72);color:#fff;border-radius:100px;
  padding:0.16rem 0.55rem;font-size:0.66rem;font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;
}

/* ── DATE RANGE ────────────────────────── */
/* The run between check-in and check-out, including the live preview while
   the second end is still being chosen. */
.dp-day.r-mid{background:var(--purple-bg);border-radius:0}
.dp-day.r-start{border-radius:9px 0 0 9px}
.dp-day.r-end{border-radius:0 9px 9px 0}
.dp-day.r-start.r-end{border-radius:9px}
.date-trigger .dt-label em{
  font-style:normal;color:var(--brand-ink);font-weight:700;
  font-variant-numeric:lining-nums;margin-left:0.3rem;
}

/* ── GUESTS & ROOMS ────────────────────── */
.guest-field{position:relative}
.guest-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:0.5rem;width:100%;
  font-family:'EB Garamond',serif;font-size:0.85rem;color:var(--text);text-align:left;
  background:#fff;border:1px solid var(--purple-border);border-radius:8px;
  padding:0.62rem 0.7rem;min-height:51px;cursor:pointer;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.guest-trigger:hover{border-color:var(--purple-mid)}
.guest-trigger.open,.guest-trigger:focus-visible{outline:none;border-color:var(--purple-mid);box-shadow:0 0 0 3px rgba(200,82,26,0.10)}
.gt-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guest-trigger svg{width:13px;height:13px;stroke:var(--text-muted);fill:none;stroke-width:2.5;flex-shrink:0}
.guestpop{
  position:absolute;z-index:80;top:calc(100% + 6px);left:0;
  width:270px;max-width:min(270px,86vw);
  background:#fff;border:1px solid var(--purple-border);border-radius:14px;
  box-shadow:0 18px 44px rgba(22,21,19,0.18);padding:0.9rem;display:none;
}
.guestpop.open{display:block}
.gp-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.45rem 0}
.gp-row+.gp-row{border-top:1px solid rgba(200,82,26,0.09)}
.gp-lab{font-size:0.82rem;color:var(--text)}
.gp-step{display:flex;align-items:center;gap:0.5rem}
.gp-btn{
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  border:1px solid var(--purple-border);background:#fff;
  font-family:'EB Garamond',serif;font-size:1rem;line-height:1;color:var(--brand-ink);
  transition:background 0.2s,border-color 0.2s,opacity 0.2s;
}
.gp-btn:hover:not(:disabled){background:var(--purple-bg);border-color:var(--purple-mid)}
.gp-btn:disabled{opacity:0.35;cursor:default}
.gp-val{min-width:1.4rem;text-align:center;font-size:0.9rem;font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.gp-done{
  width:100%;margin-top:0.8rem;cursor:pointer;
  font-family:'EB Garamond',serif;font-size:0.82rem;font-weight:600;
  background:var(--brand-ink);color:#fff;border:none;border-radius:8px;padding:0.6rem;
  transition:background 0.2s;
}
.gp-done:hover{background:#96380F}
/* In the form the panel would otherwise open past the card edge. */
.rq-f .guestpop{left:auto;right:0}

/* ── ABOUT ─────────────────────────────── */
.about .dsec-h{margin-bottom:0.9rem}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr)}
.about-p{font-size:0.88rem;line-height:1.8;color:var(--text-muted)}
.about-p+.about-p{margin-top:0.75rem}
.about-tl{
  font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--brand-ink);margin-bottom:0.6rem;
}
/* The amenities guests ask about, as one quiet row rather than a second
   heading and list — the room rows already carry the per-room detail. */
.about-top{list-style:none;display:flex;flex-wrap:wrap;gap:0.4rem;align-content:flex-start}
.about-top li::before{background:var(--green-ink);opacity:1}
/* Not included in the room rate: the transfer is something we add on request,
   so it is marked rather than sitting in the list as if it came free. */
.about-top .f-opt{border-style:dashed;border-color:rgba(200,82,26,0.35)}
.about-top .f-opt::before{background:var(--brand-ink)}
.about-top .ao{
  font-size:0.6rem;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--brand-ink);border-left:1px solid rgba(200,82,26,0.25);
  margin-left:0.1rem;padding-left:0.4rem;
}
.about-side{
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid rgba(200,82,26,0.10);
}
@media (min-width:901px){
  /* Beside the prose, not under it: the text column runs out long before the
     page does, and the badges take the width it leaves. */
  .about-grid{grid-template-columns:minmax(0,1fr) minmax(14rem,17rem)}
  .about-side{
    margin-top:0.2rem;padding-top:0;border-top:0;
    padding-left:2.2rem;border-left:1px solid rgba(200,82,26,0.10);
  }
}
.about-top li{
  display:flex;align-items:center;gap:0.38rem;
  font-size:0.72rem;color:var(--text);
  background:var(--purple-bg);border:1px solid rgba(200,82,26,0.14);
  border-radius:100px;padding:0.3rem 0.72rem;
}

/* ── ROOM SEARCH BAR ───────────────────── */
/* Dates above the table, prices below follow them. Same controls as the form
   at the bottom and kept in sync with it, so nobody types dates twice. */
.roombar{
  display:flex;flex-wrap:wrap;gap:0.75rem;align-items:flex-start;
  background:#fff;border:1px solid var(--purple-border);border-radius:14px;
  box-shadow:0 8px 26px rgba(22,21,19,0.07);
  padding:1rem 1.15rem;margin-bottom:1.1rem;
}
.rb-f{display:flex;flex-direction:column;gap:0.3rem;flex:1 1 145px;min-width:0}
.rb-f.date-field{flex:1.7 1 260px}
.rb-f.guest-field{flex:1.5 1 240px}
.rb-f label{font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--brand-ink);font-weight:700}
.rb-f select{
  font-family:'EB Garamond',serif;font-size:0.85rem;color:var(--text);
  background:#fff;border:1px solid var(--purple-border);border-radius:8px;
  padding:0.62rem 0.7rem;width:100%;min-width:0;min-height:51px;
  font-variant-numeric:lining-nums tabular-nums;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.rb-f select:focus{outline:none;border-color:var(--purple-mid);box-shadow:0 0 0 3px rgba(200,82,26,0.10)}
.rb-note{
  flex:1 0 100%;font-size:0.72rem;line-height:1.6;color:var(--text-muted);
  margin-top:0.2rem;
}
.rb-note b{color:var(--brand-ink);font-weight:700;font-variant-numeric:lining-nums}

/* Column headings, so the three columns read as a table rather than as three
   unrelated stacks. Hidden once the row stacks and the headings would lie. */
.rooms-head{
  display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr) 190px;
  gap:0.9rem 1.3rem;padding:0 1.25rem 0.5rem;
  font-size:0.64rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--brand-ink);font-weight:700;
}
.rooms-head span:last-child{text-align:center}
@media(max-width:900px){.rooms-head{display:none}}

/* ── ROOM FACT CHIPS ───────────────────── */
/* One row: size, occupancy, bed, view, then the amenities. The spec line and
   a second pill list were saying overlapping things in two visual languages. */
.room-facts{list-style:none;display:flex;flex-wrap:wrap;gap:0.35rem;margin-top:0.9rem;padding-top:0.85rem;border-top:1px solid rgba(200,82,26,0.09)}
.room-facts li{
  display:flex;align-items:center;gap:0.35rem;
  font-size:0.7rem;line-height:1.4;color:var(--text);
  background:#fff;border:1px solid var(--purple-border);
  border-radius:8px;padding:0.28rem 0.6rem;
}
.room-facts li::before,.about-top li::before,.rev-meta li::before,.rules li::before{
  content:'';width:14px;height:14px;flex-shrink:0;
  background:var(--brand-ink);opacity:0.8;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
/* No matching mark: a dot, not a wrong picture. */
/* Not a warning box, just a chip with a struck-through mark — the way a
   booking site shows an amenity a room does not have. */
.f-no{color:var(--text-muted);border-style:dashed}
.f-no::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E");background:var(--text-muted);opacity:0.75}
.f-dot::before{
  width:5px;height:5px;border-radius:50%;background:var(--purple-light);opacity:1;
  -webkit-mask-image:none;mask-image:none;margin:0 0.2rem;
}
.f-size::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8V3h5M21 8V3h-5M3 16v5h5M21 16v5h-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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8V3h5M21 8V3h-5M3 16v5h5M21 16v5h-5'/%3E%3C/svg%3E")}
.f-guests::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Ccircle cx='17.5' cy='9.5' r='2.4'/%3E%3Cpath d='M16 14.6c2.9-.4 5 1.8 5 5.4'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Ccircle cx='17.5' cy='9.5' r='2.4'/%3E%3Cpath d='M16 14.6c2.9-.4 5 1.8 5 5.4'/%3E%3C/svg%3E")}
.f-bed::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-7h18v7M3 18v2M21 18v2M3 11V7a2 2 0 012-2h4a2 2 0 012 2v4M13 11V7a2 2 0 012-2h4a2 2 0 012 2v4'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-7h18v7M3 18v2M21 18v2M3 11V7a2 2 0 012-2h4a2 2 0 012 2v4M13 11V7a2 2 0 012-2h4a2 2 0 012 2v4'/%3E%3C/svg%3E")}
.f-view::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M12 3v18M4 12h16'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M12 3v18M4 12h16'/%3E%3C/svg%3E")}
.f-ac::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='7' rx='2'/%3E%3Cpath d='M7 16v3M12 16v4M17 16v3'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='7' rx='2'/%3E%3Cpath d='M7 16v3M12 16v4M17 16v3'/%3E%3C/svg%3E")}
.f-bath::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16v3a4 4 0 01-4 4H8a4 4 0 01-4-4z'/%3E%3Cpath d='M7 12V6a2 2 0 014 0'/%3E%3Cpath d='M6 19l-1 2M18 19l1 2'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16v3a4 4 0 01-4 4H8a4 4 0 01-4-4z'/%3E%3Cpath d='M7 12V6a2 2 0 014 0'/%3E%3Cpath d='M6 19l-1 2M18 19l1 2'/%3E%3C/svg%3E")}
.f-tv::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='12' rx='2'/%3E%3Cpath d='M8 21h8'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='12' rx='2'/%3E%3Cpath d='M8 21h8'/%3E%3C/svg%3E")}
.f-fridge::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Cpath d='M6 10h12M9 6v2M9 13v2'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Cpath d='M6 10h12M9 6v2M9 13v2'/%3E%3C/svg%3E")}
.f-kettle::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9h10v9a2 2 0 01-2 2H8a2 2 0 01-2-2z'/%3E%3Cpath d='M16 11h3l-1 4'/%3E%3Cpath d='M8 9V7a3 3 0 016 0v2'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9h10v9a2 2 0 01-2 2H8a2 2 0 01-2-2z'/%3E%3Cpath d='M16 11h3l-1 4'/%3E%3Cpath d='M8 9V7a3 3 0 016 0v2'/%3E%3C/svg%3E")}
.f-balcony::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V10M20 21V10M4 14h16M4 10h16'/%3E%3Cpath d='M9 10V4h6v6'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V10M20 21V10M4 14h16M4 10h16'/%3E%3Cpath d='M9 10V4h6v6'/%3E%3C/svg%3E")}
.f-wifi::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5a10 10 0 0114 0M8 15.8a5.6 5.6 0 018 0'/%3E%3Ccircle cx='12' cy='19' r='.8'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5a10 10 0 0114 0M8 15.8a5.6 5.6 0 018 0'/%3E%3Ccircle cx='12' cy='19' r='.8'/%3E%3C/svg%3E")}
.f-desk::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18M4 10v10M20 10v10M6 10V6h12v4'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18M4 10v10M20 10v10M6 10V6h12v4'/%3E%3C/svg%3E")}
.f-kitchen::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M4 11h16M8 6v2M8 15v2'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M4 11h16M8 6v2M8 15v2'/%3E%3C/svg%3E")}
.f-safe::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.f-pool::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17c1.5 0 1.5 1.5 3 1.5S7.5 17 9 17s1.5 1.5 3 1.5S13.5 17 15 17s1.5 1.5 3 1.5S19.5 17 21 17'/%3E%3Cpath d='M7 15V6a2 2 0 014 0M13 15V6a2 2 0 014 0'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17c1.5 0 1.5 1.5 3 1.5S7.5 17 9 17s1.5 1.5 3 1.5S13.5 17 15 17s1.5 1.5 3 1.5S19.5 17 21 17'/%3E%3Cpath d='M7 15V6a2 2 0 014 0M13 15V6a2 2 0 014 0'/%3E%3C/svg%3E")}
/* Hotel-wide facilities. Same mask mechanism as the room chips above. */
.f-shuttle::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 16V9a2 2 0 0 1 2-2h11v9'/%3E%3Cpath d='M15 10h3.3l2.7 3.4V16h-2.5'/%3E%3Ccircle cx='7.5' cy='17' r='1.7'/%3E%3Ccircle cx='17.5' cy='17' r='1.7'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 16V9a2 2 0 0 1 2-2h11v9'/%3E%3Cpath d='M15 10h3.3l2.7 3.4V16h-2.5'/%3E%3Ccircle cx='7.5' cy='17' r='1.7'/%3E%3Ccircle cx='17.5' cy='17' r='1.7'/%3E%3C/svg%3E")}
.f-nosmoke::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.5h11v3H4z'/%3E%3Cpath d='M17.5 14.5H20v3h-2.5z'/%3E%3Cpath d='M16 5.5c1.7.6 2.2 1.7 2.2 3.2'/%3E%3Cpath d='M4 20.5L20 4.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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.5h11v3H4z'/%3E%3Cpath d='M17.5 14.5H20v3h-2.5z'/%3E%3Cpath d='M16 5.5c1.7.6 2.2 1.7 2.2 3.2'/%3E%3Cpath d='M4 20.5L20 4.5'/%3E%3C/svg%3E")}
.f-service::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 17.5h17'/%3E%3Cpath d='M5 17.5a7 7 0 0 1 14 0'/%3E%3Ccircle cx='12' cy='7.6' r='1.1'/%3E%3Cpath d='M12 8.7v1.9'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 17.5h17'/%3E%3Cpath d='M5 17.5a7 7 0 0 1 14 0'/%3E%3Ccircle cx='12' cy='7.6' r='1.1'/%3E%3Cpath d='M12 8.7v1.9'/%3E%3C/svg%3E")}
.f-clock::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.8V12l3.4 2'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.8V12l3.4 2'/%3E%3C/svg%3E")}
.f-lift::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9.3 13.4V8.2l-1.9 2.1M9.3 8.2l1.9 2.1'/%3E%3Cpath d='M14.7 10.6v5.2l1.9-2.1M14.7 15.8l-1.9-2.1'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9.3 13.4V8.2l-1.9 2.1M9.3 8.2l1.9 2.1'/%3E%3Cpath d='M14.7 10.6v5.2l1.9-2.1M14.7 15.8l-1.9-2.1'/%3E%3C/svg%3E")}
.f-laundry::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Ccircle cx='12' cy='14' r='4'/%3E%3Cpath d='M7.2 6.6h.01M10.2 6.6h.01'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Ccircle cx='12' cy='14' r='4'/%3E%3Cpath d='M7.2 6.6h.01M10.2 6.6h.01'/%3E%3C/svg%3E")}
.f-money::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E")}
.f-bell::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 18.5h17'/%3E%3Cpath d='M5.5 15.5a6.5 6.5 0 0 1 13 0z'/%3E%3Cpath d='M12 9V6.6'/%3E%3Ccircle cx='12' cy='5.4' r='1.1'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 18.5h17'/%3E%3Cpath d='M5.5 15.5a6.5 6.5 0 0 1 13 0z'/%3E%3Cpath d='M12 9V6.6'/%3E%3Ccircle cx='12' cy='5.4' r='1.1'/%3E%3C/svg%3E")}
/* Facility-group marks. Same mask mechanism, used on the h3 rather than a chip. */
.f-star::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6l2.6 5.3 5.8.9-4.2 4.1 1 5.8-5.2-2.8-5.2 2.8 1-5.8-4.2-4.1 5.8-.9z'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6l2.6 5.3 5.8.9-4.2 4.1 1 5.8-5.2-2.8-5.2 2.8 1-5.8-4.2-4.1 5.8-.9z'/%3E%3C/svg%3E")}
.f-tree::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l4.5 6.5h-2.7L18 16H6l4.2-6.5H7.5z'/%3E%3Cpath d='M12 16v5'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l4.5 6.5h-2.7L18 16H6l4.2-6.5H7.5z'/%3E%3Cpath d='M12 16v5'/%3E%3C/svg%3E")}
.f-plug::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v5M15 3v5'/%3E%3Cpath d='M6 8h12v3a6 6 0 0 1-12 0z'/%3E%3Cpath d='M12 17v4'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v5M15 3v5'/%3E%3Cpath d='M6 8h12v3a6 6 0 0 1-12 0z'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E")}
.f-bike::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='17' r='3.2'/%3E%3Ccircle cx='18' cy='17' r='3.2'/%3E%3Cpath d='M6 17l4.5-8H15l3 8'/%3E%3Cpath d='M9.5 9h4'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='17' r='3.2'/%3E%3Ccircle cx='18' cy='17' r='3.2'/%3E%3Cpath d='M6 17l4.5-8H15l3 8'/%3E%3Cpath d='M9.5 9h4'/%3E%3C/svg%3E")}
.f-sofa::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='7' rx='2'/%3E%3Cpath d='M6 11V8a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M6 18v2M18 18v2'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='7' rx='2'/%3E%3Cpath d='M6 11V8a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M6 18v2M18 18v2'/%3E%3C/svg%3E")}
.f-fork::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v7a2 2 0 0 0 4 0V3'/%3E%3Cpath d='M9 10v11'/%3E%3Cpath d='M17 3c-1.4 1.4-2 3-2 5s.6 2.6 2 2.6V21'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v7a2 2 0 0 0 4 0V3'/%3E%3Cpath d='M9 10v11'/%3E%3Cpath d='M17 3c-1.4 1.4-2 3-2 5s.6 2.6 2 2.6V21'/%3E%3C/svg%3E")}
.f-car::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16v-5l2-4h10l2 4v5'/%3E%3Cpath d='M3 16h18'/%3E%3Ccircle cx='7.5' cy='17.6' r='1.5'/%3E%3Ccircle cx='16.5' cy='17.6' r='1.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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16v-5l2-4h10l2 4v5'/%3E%3Cpath d='M3 16h18'/%3E%3Ccircle cx='7.5' cy='17.6' r='1.5'/%3E%3Ccircle cx='16.5' cy='17.6' r='1.5'/%3E%3C/svg%3E")}
.f-spray::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='9' width='8' height='12' rx='2'/%3E%3Cpath d='M10 9V6h4v3'/%3E%3Cpath d='M14 4.5h4M18 4.5v3'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='9' width='8' height='12' rx='2'/%3E%3Cpath d='M10 9V6h4v3'/%3E%3Cpath d='M14 4.5h4M18 4.5v3'/%3E%3C/svg%3E")}
.f-lock::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
.f-info::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11.5v5M12 7.8v.4'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11.5v5M12 7.8v.4'/%3E%3C/svg%3E")}
.f-globe::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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.4 9.5h17.2M3.4 14.5h17.2'/%3E%3Cpath d='M12 3c2.4 2.6 2.4 15.4 0 18M12 3c-2.4 2.6-2.4 15.4 0 18'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.4 9.5h17.2M3.4 14.5h17.2'/%3E%3Cpath d='M12 3c2.4 2.6 2.4 15.4 0 18M12 3c-2.4 2.6-2.4 15.4 0 18'/%3E%3C/svg%3E")}
/* The green reads as "included"; the add-on keeps the brand orange. */
.about-top li::before{background:var(--green-ink);opacity:1}
.about-top .f-opt::before{background:var(--brand-ink)}

/* What the cards add up to, shown in the form. Read-only: the cards choose. */
.rq-pick{background:#fff;border:1px solid var(--purple-border);border-radius:10px;padding:0.7rem 0.85rem}
.pick-empty{font-size:0.8rem;line-height:1.6;color:var(--text-muted)}
.pick-empty[hidden]{display:none}
.pick-empty a{color:var(--brand-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pick-list{list-style:none;display:flex;flex-direction:column;gap:0.3rem}
.pick-list[hidden]{display:none}
.pick-list li{display:flex;align-items:center;gap:0.6rem;font-size:0.82rem;color:var(--text);padding:0.15rem 0}
.pick-list .pk-name{min-width:0;flex:1}
.pick-list em{font-style:normal;font-weight:700;color:var(--brand-ink);font-variant-numeric:lining-nums;min-width:3.2rem;text-align:right}
/* Editable here as well as on the cards. */
.pk-step{display:flex;align-items:center;gap:0.15rem;flex-shrink:0}
.pk-step button{
  width:24px;height:24px;border-radius:50%;cursor:pointer;
  border:1px solid var(--purple-border);background:#fff;
  font-family:inherit;font-size:0.9rem;line-height:1;color:var(--brand-ink);
  display:flex;align-items:center;justify-content:center;transition:border-color 0.15s,background 0.15s;
}
.pk-step button:hover{border-color:var(--brand-ink);background:var(--purple-bg)}
.pk-step b{min-width:1.4rem;text-align:center;color:var(--dark);font-weight:700;font-variant-numeric:lining-nums}
.pick-add{
  display:flex;align-items:center;flex-wrap:wrap;gap:0.5rem;
  margin-top:0.6rem;padding-top:0.55rem;border-top:1px solid rgba(200,82,26,0.12);
}
.pick-add label{font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--brand-ink)}
.pick-add select{
  flex:1;min-width:11rem;font-family:inherit;font-size:0.78rem;color:var(--text);
  border:1px solid var(--purple-border);border-radius:7px;padding:0.32rem 0.45rem;background:#fff;cursor:pointer;
}
.pick-add a{font-size:0.72rem;color:var(--brand-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pick-sum{
  margin-top:0.55rem;padding-top:0.5rem;border-top:1px solid rgba(200,82,26,0.12);
  font-size:0.78rem;color:var(--text-muted);
}
.pick-sum[hidden]{display:none}
.pick-sum b{color:var(--brand-ink);font-variant-numeric:lining-nums}
.pick-sum i{font-style:normal;opacity:0.75}

/* "4 rooms, total price" over the figure, so the number is never ambiguous. */
.rp-qty{font-size:0.66rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--brand-ink);margin-bottom:0.15rem}
.rp-qty[hidden]{display:none}

/* How many of this category, chosen where the price is. */
.room-qty{
  display:flex;align-items:center;justify-content:space-between;gap:0.6rem;
  width:100%;margin:0 0 0.6rem;padding:0.4rem 0.5rem 0.4rem 0.7rem;
  border:1px solid var(--purple-border);border-radius:8px;background:#fff;
  font-size:0.74rem;color:var(--text-muted);cursor:pointer;
}
.room-qty select{
  border:none;background:none;font-family:inherit;font-size:0.82rem;font-weight:600;
  color:var(--dark);cursor:pointer;padding:0.1rem 0.2rem;
}
.room-qty select:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px;border-radius:4px}
.room.picked .room-qty{border-color:var(--brand-ink)}
/* display:flex beats the hidden attribute, and the API hides this one when a
   category sells out. */
.room-qty[hidden]{display:none}

/* Sold out: the card still describes the room, but nothing on it can be
   bought. Kept legible rather than greyed into unreadability. */
.room.gone{background:#FCFAF8;border-style:dashed}
.room.gone .room-main,.room.gone .room-cond-col{opacity:0.62}
.room.gone .room-name::after{
  content:'No rooms left';margin-left:0.5rem;vertical-align:middle;
  font-size:0.6rem;letter-spacing:0.08em;text-transform:uppercase;
  color:#8E241A;background:rgba(142,36,26,0.08);
  border:1px solid rgba(142,36,26,0.25);border-radius:100px;padding:0.16rem 0.45rem;
}
/* Scarcity, from the office's own table. Orange, not red: it is information,
   not a countdown. */
.rp-left{
  display:inline-block;margin-bottom:0.4rem;
  background:rgba(200,82,26,0.10);color:var(--brand-ink);
  border:1px solid rgba(200,82,26,0.30);border-radius:100px;
  padding:0.16rem 0.5rem;font-size:0.66rem;font-weight:700;
  letter-spacing:0.04em;text-transform:uppercase;
}
.rp-left[hidden]{display:none}
/* Sold out, whether it came from the data file or the API: the price stays
   readable but plainly inactive. */
.room.gone .rp-was,.room.gone .rp-now,.room.gone .rp-vnd,.room.gone .rp-tax,.room.gone .rp-save{
  opacity:0.45;filter:grayscale(1);
}
.room.gone .room-ask[disabled]{
  background:#fff;color:var(--text-muted);border:1px dashed var(--purple-border);
  cursor:default;
}
.rp-gone{font-size:0.86rem;font-weight:600;color:#8E241A;line-height:1.4}
.rp-wasgone{font-size:0.72rem;color:var(--text-muted);margin-top:0.2rem;text-decoration:line-through}
.room-ask.alt{background:#fff;color:var(--brand-ink);border:1px solid var(--brand-ink)}
.room-ask.alt:hover{background:var(--purple-bg)}

/* The row the guest picked in the form, marked so the two ends of the page
   agree about what is being quoted. */
.room.picked{border-color:var(--brand-ink);box-shadow:0 0 0 2px rgba(200,82,26,0.12)}
.room.picked .room-name::after{
  content:'Selected';margin-left:0.5rem;vertical-align:middle;
  font-size:0.6rem;letter-spacing:0.08em;text-transform:uppercase;
  color:#fff;background:var(--brand-ink);border-radius:100px;padding:0.16rem 0.45rem;
}

/* ── ROOM CONDITIONS ───────────────────── */
.room-cond{list-style:none;display:flex;flex-direction:column;gap:0.5rem}
.room-cond li{
  position:relative;padding-left:1.25rem;
  font-size:0.76rem;line-height:1.5;color:var(--text-muted);
}
.room-cond li b{color:var(--green-ink);font-weight:700}
.room-cond li::before{
  content:'\2713';position:absolute;left:0;top:0;
  color:var(--green-ink);font-weight:700;font-size:0.85rem;line-height:1.4;
}
.room-cond .rc-card::before{content:'\1F4B3';font-size:0.72rem}

/* Amenities now sit under the room copy, so they read as description rather
   than as part of the offer. Neutral, not the conditions’ green. */
.room-inc li{
  display:flex;align-items:center;gap:0.3rem;
  font-size:0.68rem;color:var(--text);
  background:var(--purple-bg);border:1px solid rgba(200,82,26,0.14);
  border-radius:100px;padding:0.2rem 0.6rem;
}
.room-inc li::before{content:'';display:none}

/* ── ROOM PRICE ────────────────────────── */
.room-buy .rp-was,.room-buy .rp-now,.room-buy .rp-tax{text-align:center}
.rp-was{font-size:0.8rem;color:#8E241A;text-decoration:line-through;font-variant-numeric:lining-nums}
.rp-now{
  font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:700;
  color:var(--dark);line-height:1.1;margin-top:0.1rem;
  font-variant-numeric:lining-nums tabular-nums;
}
/* The hotel quotes in dong; the guest reads in dollars. Both, one under
   the other, so nobody has to trust a conversion they cannot see. */
.rp-vnd{font-size:0.72rem;color:var(--text);margin-top:0.1rem;font-variant-numeric:lining-nums tabular-nums}
.rp-tax{font-size:0.66rem;color:var(--text-muted);margin-top:0.15rem}
.rp-save{
  display:inline-block;margin-top:0.45rem;
  background:var(--green-ink);color:#fff;border-radius:6px;
  padding:0.16rem 0.5rem;font-size:0.66rem;font-weight:700;
  font-variant-numeric:lining-nums;
}
.rp-save[hidden]{display:none}
.rp-ask{font-size:0.74rem;line-height:1.55;color:var(--text-muted);font-style:italic}

/* The hero and dock prices carry the same before/after pair. */
.dh-price .amt s,.bd-price s{
  display:block;font-family:'EB Garamond',serif;font-size:0.9rem;font-weight:400;
  color:#8E241A;text-decoration:line-through;margin-bottom:0.1rem;
}

/* ── LIGHTBOX ──────────────────────────── */
.lb{
  position:fixed;inset:0;z-index:1200;display:none;
  background:rgba(12,10,8,0.96);
  align-items:center;justify-content:center;padding:3.5rem 4.5rem;
}
.lb.open{display:flex}
.lb-stage{display:flex;align-items:center;gap:1.5rem;max-width:100%;max-height:100%}
.lb-fig{position:relative;margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:0.8rem}
/* Room details beside the picture, so the viewer answers "what am I looking
   at" without closing it. Only rendered for a room’s own set. */
.lb-info{display:none;flex:0 0 360px;max-height:calc(100vh - 9rem);overflow-y:auto;background:#fff;border-radius:12px;padding:1.15rem 1.25rem}
.lb.has-info .lb-info{display:block}
.lb-info h3{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:700;color:var(--dark);line-height:1.2;margin-bottom:0.7rem}
.lb-info .room-facts{margin-top:0;padding-top:0;border-top:none}
.lb-pairs{margin-top:0.9rem;padding-top:0.8rem;border-top:1px solid rgba(200,82,26,0.10)}
.lb-pair{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:0.28rem 0}
.lb-pair dt{font-size:0.76rem;color:var(--text-muted)}
.lb-pair dd{font-size:0.8rem;font-weight:600;color:var(--text);text-align:right}
.lb-desc{margin-top:0.85rem;font-size:0.78rem;line-height:1.7;color:var(--text-muted)}
.lb-info h4{
  margin-top:1.1rem;font-size:0.64rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--brand-ink);font-weight:700;
}
.lb-list{list-style:none;margin-top:0.5rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.25rem 0.9rem}
.lb-list li{position:relative;padding-left:0.95rem;font-size:0.74rem;line-height:1.5;color:var(--text)}
.lb-list li::before{content:'\2713';position:absolute;left:0;color:var(--green-ink);font-size:0.8em;font-weight:700}
.lb-smoke{margin-top:0.9rem;font-size:0.74rem;color:var(--text-muted)}
.lb-note{margin-top:0.9rem;padding-top:0.8rem;border-top:1px solid rgba(200,82,26,0.10);font-size:0.76rem;line-height:1.65;color:var(--text-muted);font-style:italic}
.lb-img{max-width:100%;max-height:calc(100vh - 9rem);object-fit:contain;border-radius:10px;display:block}
.lb-cap{color:rgba(255,255,255,0.9);font-size:0.8rem;line-height:1.5;text-align:center;max-width:70ch}
.lb-cap b{color:#fff;font-weight:600;margin-right:0.4rem;font-variant-numeric:lining-nums}
/* On the picture, not at the screen edges — at 1900px wide the old ones sat
   half a metre from the photo they were paging. */
.lb-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,0.92);display:flex;align-items:center;justify-content:center;
  transition:background 0.2s,transform 0.2s;
}
.lb-btn:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
.lb-btn svg{width:19px;height:19px;stroke:#161513;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.lb-prev{left:0.9rem}
.lb-next{right:0.9rem}
.lb-close{
  position:absolute;top:1rem;right:1rem;transform:none;
  width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,0.16);display:flex;align-items:center;justify-content:center;
  transition:background 0.2s;
}
.lb-close:hover{background:rgba(255,255,255,0.3)}
.lb-close svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round}
@media(max-width:760px){
  .lb{padding:3.5rem 0.75rem}
  .lb-stage{flex-direction:column;gap:0.8rem;overflow-y:auto}
  .lb-info{flex:0 0 auto;width:100%;max-height:none}
  .lb-btn{width:38px;height:38px}
  .lb-prev{left:0.4rem}
  .lb-next{right:0.4rem}
}

/* ── ROOMS ─────────────────────────────── */
.rooms{list-style:none;display:flex;flex-direction:column;gap:0.5rem}
.room{
  /* The first column is the photo width, not a share of the row: the note under
   the photo used to run wider than the photo and left a gulf before the middle
   column. */
  display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr) 190px;gap:0.9rem 1.3rem;align-items:start;
  background:#fff;border:1px solid var(--purple-border);border-radius:14px;padding:1rem 1.25rem;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.room:hover{border-color:rgba(200,82,26,0.3);box-shadow:0 8px 26px rgba(22,21,19,0.07)}
.room-main{min-width:0;max-width:440px}
.room-name{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:700;color:var(--dark);line-height:1.22}
.room-note{font-size:0.76rem;line-height:1.6;color:var(--text-muted);margin-top:0.55rem}
.room-inc{list-style:none;display:flex;flex-wrap:wrap;gap:0.3rem;margin-top:0.7rem}
.room-inc li{
  display:flex;align-items:center;gap:0.3rem;
  font-size:0.68rem;color:var(--green-ink);
  background:rgba(14,122,85,0.07);border:1px solid rgba(14,122,85,0.16);
  border-radius:100px;padding:0.2rem 0.6rem;
}
.room-inc li::before{content:'\2713';font-weight:700;font-size:0.85em}
.room-cancel{font-size:0.7rem;line-height:1.55;color:var(--text-muted);margin-top:0.6rem;font-style:italic}
.room-buy{display:flex;flex-direction:column;gap:0.15rem;align-items:stretch;text-align:center}
.room-buy .room-ask{margin-top:0.7rem}
.room-buy .rp-save{align-self:center}
.room-ask{
  cursor:pointer;font-family:'EB Garamond',serif;
  background:var(--brand-ink);color:#fff;border:none;
  border-radius:8px;padding:0.62rem 1rem;font-size:0.8rem;font-weight:600;
  transition:background 0.2s;
}
.room-ask:hover{background:#96380F}
.room-conf{font-size:0.66rem;line-height:1.5;color:var(--text-muted)}

/* Empty state for the 22 hotels whose room list is not researched yet. It is a
   prompt, not an error — the page is still useful without it. */
.todo{
  display:flex;gap:0.7rem;align-items:flex-start;
  background:var(--purple-bg);border:1px dashed var(--purple-border);
  border-radius:14px;padding:1.15rem 1.3rem;
}
.todo svg{width:16px;height:16px;stroke:var(--brand-ink);fill:none;stroke-width:2;flex-shrink:0;margin-top:0.2rem}
.todo b{display:block;font-size:0.86rem;color:var(--dark);margin-bottom:0.25rem}
.todo .t{font-size:0.78rem;line-height:1.65;color:var(--text-muted)}
.todo a{color:var(--brand-ink);font-weight:600;text-decoration:none}
.todo a:hover{text-decoration:underline}

/* ── AMENITIES ─────────────────────────── */
.amen{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.55rem 1.5rem}
.amen li{display:flex;gap:0.55rem;align-items:flex-start;font-size:0.8rem;line-height:1.55;color:var(--text)}
.amen li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--purple-light);flex-shrink:0;margin-top:0.5rem}

/* ── WALKING TIMES ─────────────────────── */
.walk{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.1rem 2rem}
.walk li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:0.62rem 0;border-bottom:1px solid rgba(200,82,26,0.09);font-size:0.82rem}
.walk .to{color:var(--text)}
.walk .mins{color:var(--brand-ink);font-weight:600;font-size:0.76rem;white-space:nowrap;font-variant-numeric:lining-nums}

/* ── GOOD TO KNOW ──────────────────────── */
.know{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.95rem 1.75rem}
.know li{display:flex;gap:0.6rem;align-items:flex-start;font-size:0.79rem;line-height:1.6;color:var(--text-muted)}
.know svg{width:15px;height:15px;stroke:var(--purple-light);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:0.2rem}
.know b{color:var(--text);font-weight:600}

/* ── NEARBY ────────────────────────────── */
.near{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
/* Only two hotels are live, so this row is usually a single card — one card
   sitting in a third of a row reads as a layout bug rather than a choice. */
.near:has(> .ncard:only-child){grid-template-columns:min(100%,360px)}
.ncard{
  display:flex;flex-direction:column;background:#fff;text-decoration:none;color:inherit;
  border:1px solid var(--purple-border);border-radius:14px;overflow:hidden;
  box-shadow:0 4px 20px rgba(22,21,19,0.055);
  transition:box-shadow 0.25s,transform 0.25s,border-color 0.25s;
}
.ncard:hover{box-shadow:0 10px 32px rgba(200,82,26,0.15);transform:translateY(-3px);border-color:rgba(200,82,26,0.28)}
.ncard-img{position:relative;padding-top:56%;background:linear-gradient(150deg,#F3EBE4 0%,#EADFD5 100%)}
.ncard-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ncard-img .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(176,69,22,0.3)}
.ncard-img .ph svg{width:44px;height:34px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ncard-body{padding:0.95rem 1.05rem 1.1rem;display:flex;flex-direction:column;flex:1}
.ncard-area{font-size:0.62rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--brand-ink);font-weight:700;margin-bottom:0.35rem}
.ncard-name{font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:700;color:var(--dark);line-height:1.22;margin-bottom:0.5rem}
.ncard:hover .ncard-name{color:var(--purple)}
.ncard-foot{display:flex;align-items:baseline;justify-content:space-between;gap:0.6rem;margin-top:auto;padding-top:0.6rem;border-top:1px solid rgba(200,82,26,0.09)}
.ncard-price{font-size:0.8rem;color:var(--brand-ink);font-weight:700;font-variant-numeric:lining-nums}
.ncard-price em{font-style:normal;font-weight:400;color:var(--text-muted);font-size:0.85em}
.ncard-link{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:700;font-size:0.82rem;color:var(--brand-ink);white-space:nowrap}

/* ── DATE PICKER ───────────────────────── */
/* Chrome paints its own calendar for <input type="date"> and none of it can be
   reached from CSS, so the check-in field is a button over a hidden input. */
.date-field{position:relative}
.date-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:0.5rem;width:100%;
  font-family:'EB Garamond',serif;font-size:0.85rem;color:var(--text);text-align:left;
  background:#fff;border:1px solid var(--purple-border);border-radius:8px;
  padding:0.62rem 0.7rem;min-height:51px;cursor:pointer;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.date-trigger:hover{border-color:var(--purple-mid)}
.date-trigger.open,.date-trigger:focus-visible{outline:none;border-color:var(--purple-mid);box-shadow:0 0 0 3px rgba(200,82,26,0.10)}
.date-trigger.err{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,0.10)}
.date-trigger.placeholder .dt-label{color:#9C968B}
.date-trigger .dt-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.date-trigger svg{width:15px;height:15px;stroke:var(--brand-ink);fill:none;stroke-width:2;flex-shrink:0}
.datepicker{
  position:absolute;z-index:80;top:calc(100% + 6px);left:0;
  width:294px;max-width:min(294px,84vw);
  background:#fff;border:1px solid var(--purple-border);border-radius:16px;
  box-shadow:0 18px 44px rgba(22,21,19,0.18);padding:0.9rem;display:none;
}
.datepicker.open{display:block}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.55rem}
.dp-title{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:700;color:var(--dark);background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:0.35rem;padding:0.15rem 0.4rem;margin-left:-0.2rem;border-radius:8px;transition:background 0.15s}
.dp-title:hover{background:var(--purple-bg)}
.dp-title svg{width:12px;height:12px;stroke:var(--text-muted);fill:none;stroke-width:2.5}
.dp-nav{display:flex;gap:0.35rem}
.dp-nav button{width:30px;height:30px;border-radius:50%;border:1px solid var(--purple-border);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s,border-color 0.2s}
.dp-nav button:hover:not(:disabled){background:var(--brand-ink);border-color:var(--brand-ink)}
.dp-nav button:hover:not(:disabled) svg{stroke:#fff}
.dp-nav button:disabled{opacity:0.3;cursor:default}
.dp-nav button svg{width:13px;height:13px;stroke:var(--dark);fill:none;stroke-width:2.5;transition:stroke 0.2s}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-dow{font-size:0.62rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-muted);text-align:center;padding:0.3rem 0}
.dp-day{aspect-ratio:1;border:none;background:none;border-radius:9px;font-family:'EB Garamond',serif;font-size:0.82rem;color:var(--text);cursor:pointer;font-variant-numeric:lining-nums tabular-nums;display:flex;align-items:center;justify-content:center;transition:background 0.15s,color 0.15s}
.dp-day:hover:not(:disabled):not(.sel){background:var(--purple-bg)}
.dp-day.muted{visibility:hidden}
.dp-day:disabled{color:var(--text-muted);opacity:0.28;cursor:default}
.dp-day.today{box-shadow:inset 0 0 0 1.5px var(--purple-light)}
.dp-day.sel{background:var(--brand-ink);color:#fff;font-weight:600}
.dp-months{display:grid;grid-template-columns:repeat(3,1fr);gap:0.4rem;padding:0.4rem 0 0.2rem}
.dp-month{padding:0.75rem 0;border:none;background:none;border-radius:10px;font-family:'EB Garamond',serif;font-size:0.85rem;color:var(--text);cursor:pointer;transition:background 0.15s,color 0.15s}
.dp-month:hover:not(:disabled):not(.cur){background:var(--purple-bg)}
.dp-month:disabled{color:var(--text-muted);opacity:0.3;cursor:default}
.dp-month.cur{background:var(--brand-ink);color:#fff;font-weight:600}
.dp-foot{display:flex;justify-content:space-between;align-items:center;margin-top:0.6rem;padding-top:0.6rem;border-top:1px solid rgba(200,82,26,0.10)}
.dp-foot span{font-size:0.7rem;color:var(--text-muted)}
.dp-foot button{background:none;border:none;font-family:'EB Garamond',serif;font-size:0.76rem;font-weight:600;color:var(--brand-ink);cursor:pointer}
.dp-foot button:hover{text-decoration:underline}

/* ── REQUEST FORM ──────────────────────── */
.rq{margin-top:1.75rem;scroll-margin-top:120px;background:var(--purple-bg);border:1px solid var(--purple-border);border-radius:18px;padding:1.9rem}
.rq-k{font-size:0.66rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--brand-ink);font-weight:700;margin-bottom:0.5rem}
.rq h2{font-family:'Cormorant Garamond',serif;font-size:1.75rem;font-weight:600;color:var(--dark);line-height:1.12}
.rq h2 em{font-style:italic;color:var(--purple)}
.rq-lead{font-size:0.82rem;line-height:1.7;color:var(--text-muted);margin:0.6rem 0 1.5rem;max-width:78ch}
.rq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.9rem}
.rq-f{display:flex;flex-direction:column;gap:0.32rem;min-width:0}
.rq-f.full{grid-column:1/-1}
.rq-f label{font-size:0.64rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--brand-ink);font-weight:700}
.rq-f label .opt{letter-spacing:0.02em;text-transform:none;color:var(--text-muted);font-weight:400;font-size:0.9em}
.rq-f input,.rq-f select,.rq-f textarea{
  font-family:'EB Garamond',serif;font-size:0.85rem;color:var(--text);
  background:#fff;border:1px solid var(--purple-border);border-radius:8px;
  padding:0.62rem 0.7rem;width:100%;min-width:0;
  font-variant-numeric:lining-nums tabular-nums;
  transition:border-color 0.2s,box-shadow 0.2s;
}
/* A button and an input do not agree on height from padding alone. */
.rq-f select,.rq-f input[type="text"],.rq-f input[type="email"],.rq-f input[type="tel"]{min-height:51px}
.rq-f textarea{resize:vertical;min-height:88px;line-height:1.6}
.rq-f input:focus,.rq-f select:focus,.rq-f textarea:focus{outline:none;border-color:var(--purple-mid);box-shadow:0 0 0 3px rgba(200,82,26,0.10)}
.rq-f input.err,.rq-f select.err{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,0.10)}
.rq-check{grid-column:1/-1;display:flex;align-items:flex-start;gap:0.55rem;font-size:0.78rem;color:var(--text);line-height:1.55}
.rq-check input{width:16px;height:16px;flex-shrink:0;margin-top:0.18rem;accent-color:var(--brand-ink)}
.rq-err{grid-column:1/-1;display:none;font-size:0.78rem;color:#8E241A;background:#FDECEA;border:1px solid rgba(192,57,43,0.25);border-radius:8px;padding:0.6rem 0.8rem}
.rq-err.show{display:block}
.rq-submit{grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;cursor:pointer;font-family:'EB Garamond',serif;background:var(--brand-ink);color:#fff;border:none;border-radius:8px;padding:0.85rem 1.5rem;font-size:0.92rem;font-weight:600;transition:background 0.2s,transform 0.2s,box-shadow 0.2s}
.rq-submit:hover{background:#96380F;transform:translateY(-2px);box-shadow:0 8px 24px rgba(200,82,26,0.25)}
.rq-submit:disabled{opacity:0.7;cursor:default;transform:none}
.rq-submit svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
@keyframes spin{to{transform:rotate(360deg)}}
.rq-fine{grid-column:1/-1;font-size:0.7rem;line-height:1.65;color:var(--text-muted);display:flex;align-items:flex-start;gap:0.45rem}
.rq-fine svg{width:13px;height:13px;stroke:var(--brand-ink);fill:none;stroke-width:2;flex-shrink:0;margin-top:0.22rem}
.rq-fine a{color:var(--brand-ink);text-decoration:none;font-weight:600;white-space:nowrap}
.rq-fine a:hover{text-decoration:underline}
/* Clipped rather than pushed off-canvas: left:-9999px on a page later cloned to
   dir="rtl" drags the document ~9900px wide. */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
.rq-ok{display:none;text-align:center;padding:2rem 1rem}
.rq-ok.show{display:block}
.rq-ok .tick{width:52px;height:52px;border-radius:50%;background:var(--green-ink);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.rq-ok .tick svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rq-ok h3{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;color:var(--dark);margin-bottom:0.5rem}
.rq-ok .okt{font-size:0.82rem;line-height:1.7;color:var(--text-muted);max-width:46ch;margin:0 auto}
.rq-ok .okt b{color:var(--brand-ink);font-weight:600;font-variant-numeric:lining-nums}

/* ── BAND + FOOTER ─────────────────────── */
.band{background:var(--yellow);border-top:1px solid rgba(200,82,26,0.10);padding:2.25rem 4rem 3rem;text-align:center;margin-top:3.25rem}
.band-in{max-width:640px;margin:0 auto}
.band .eyebrow{font-size:0.8rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--brand-ink);font-weight:700;margin-bottom:0.7rem}
.band h2{font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600;color:var(--dark);line-height:1.12}
.band h2 em{font-style:italic;color:var(--purple)}
.band .bt{font-size:0.86rem;line-height:1.75;color:var(--text-muted);margin:0.9rem auto 1.6rem;max-width:52ch}
.band-btns{display:flex;gap:0.7rem;justify-content:center;flex-wrap:wrap}

footer{background:var(--dark-footer);color:rgba(255,255,255,0.5);padding:1.5rem 4rem 1rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:3rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(200,82,26,0.07);margin-bottom:1rem}
.foot-logo{display:block;margin-bottom:0.75rem;text-decoration:none}
.foot-desc{font-size:0.85rem;line-height:1.7;max-width:260px}
.foot-wa{display:inline-flex;align-items:center;gap:0.5rem;background:var(--green-ink);color:#fff;text-decoration:none;padding:0.55rem 1rem;border-radius:6px;font-size:0.8rem;font-weight:500;margin-top:1.25rem;transition:opacity 0.2s}
.foot-wa+.foot-wa{margin-top:0.6rem}
.foot-wa:hover{opacity:0.85}
.foot-email{display:inline-flex;align-items:center;gap:0.5rem;background:var(--brand-ink);color:#fff;text-decoration:none;padding:0.55rem 1rem;border-radius:6px;font-size:0.8rem;font-weight:500;margin-top:0.6rem;transition:opacity 0.2s}
.foot-email:hover{opacity:0.85}
.foot-col h4{font-size:0.63rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(232,128,74,0.85);margin-bottom:1rem}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:0.5rem}
.foot-col a{color:rgba(255,255,255,0.55);text-decoration:none;font-size:0.82rem;transition:color 0.2s}
.foot-col a:hover{color:var(--purple-light)}
.foot-bottom{display:flex;justify-content:space-between;font-size:0.75rem;gap:1rem;flex-wrap:wrap}

/* ── GUEST REVIEWS ─────────────────────── */
/* One card per review, in the guest's own words. The score sits where the eye
   lands first, the stay it came from is the quiet line at the bottom. */
/* A rail, not a grid: the list only grows. Cards keep their width and the
   arrows page through them. */
.rev-rail{position:relative}
.revs{
  list-style:none;display:flex;gap:1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* The arrows say what the bar would: no scrollbar under the cards. */
  scrollbar-width:none;-ms-overflow-style:none;
}
.revs::-webkit-scrollbar{display:none}
/* Two to a view: each card carries photos and both halves of an opinion, and
   three across left no room for either. */
.rev{scroll-snap-align:start;flex:0 0 calc((100% - 1rem) / 2);min-width:0}
.rev-nav{
  position:absolute;top:calc(50% - 20px);z-index:5;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,0.97);border:1px solid var(--purple-border);
  box-shadow:0 6px 18px rgba(22,21,19,0.14);
  display:flex;align-items:center;justify-content:center;
}
.rev-nav[hidden]{display:none}
.rev-nav:disabled{opacity:0.3;cursor:default}
.rev-nav.prev{left:-14px}
.rev-nav.next{right:-14px}
.rev-nav svg{width:18px;height:18px;fill:none;stroke:var(--brand-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.rev{flex:0 0 86%}.rev-nav{display:none}}
.rev{
  background:#fff;border:1px solid var(--purple-border);border-radius:14px;
  padding:1.15rem 1.25rem 1.05rem;
}
.rev-top{display:flex;align-items:center;gap:0.6rem}
.rev-av{
  width:34px;height:34px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--purple-bg);color:var(--brand-ink);
  font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:700;
}
.rev-who{display:block;min-width:0;flex:1}
.rev-who b{display:block;font-size:0.86rem;font-weight:600;color:var(--dark);line-height:1.3}
.rev-from{display:flex;align-items:center;gap:0.35rem;font-size:0.7rem;color:var(--text-muted);margin-top:0.1rem}
.rev-score{
  flex-shrink:0;display:flex;align-items:baseline;gap:0.1rem;
  background:var(--brand-ink);color:#fff;border-radius:8px;
  padding:0.3rem 0.5rem;font-size:0.95rem;font-weight:700;
  font-variant-numeric:lining-nums;line-height:1;
}
.rev-score em{font-style:normal;font-size:0.6rem;opacity:0.8}
.rev-h{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:600;color:var(--dark);margin-top:0.8rem}
.rev-t{font-size:0.84rem;line-height:1.7;color:var(--text);margin-top:0.35rem}
.rev-t::before{content:'\201C'}
.rev-t::after{content:'\201D'}
/* The guest's own words stand as written; the English is one click away
   rather than in front of them. */
.rev-tr{
  margin-top:0.5rem;background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:0.74rem;font-weight:600;color:var(--brand-ink);
  text-decoration:underline;text-underline-offset:3px;
}
.rev-tr:hover{color:var(--purple)}
.rev-en{
  margin-top:0.6rem;padding-left:0.7rem;border-left:2px solid var(--purple-border);
  font-size:0.78rem;line-height:1.65;color:var(--text);
}
.rev-en[hidden]{display:none}
.rev-en span{
  display:block;font-size:0.62rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--brand-ink);margin-bottom:0.2rem;
}
/* Liked / could be better, the two halves a booking-site review comes in. */
.rev-pn{margin-top:0.7rem}
.rev-pn dt{
  display:flex;align-items:center;gap:0.35rem;margin-top:0.6rem;
  font-size:0.7rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
}
.rev-pn dt:first-child{margin-top:0}
.rev-pn dt::before{content:'';width:13px;height:13px;border-radius:50%;flex-shrink:0}
.rev-pn .pn-up{color:var(--green-ink)}
.rev-pn .pn-up::before{background:var(--green-ink)}
.rev-pn .pn-dn{color:var(--text-muted)}
.rev-pn .pn-dn::before{background:var(--purple-border)}
.rev-pn dd{margin-top:0.2rem;padding-left:1.05rem;font-size:0.82rem;line-height:1.65;color:var(--text)}
/* Guest photos: a strip that opens the same lightbox as the room shots. */
.rev-gal{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.9rem}
.rev-shot{
  width:74px;height:74px;flex-shrink:0;padding:0;cursor:pointer;overflow:hidden;
  border:1px solid var(--purple-border);border-radius:8px;background:none;
  transition:border-color 0.18s,transform 0.18s;
}
.rev-shot:hover{border-color:var(--brand-ink);transform:translateY(-2px)}
.rev-shot img{display:block;width:100%;height:100%;object-fit:cover}

.rev-meta{
  list-style:none;display:flex;flex-wrap:wrap;gap:0.35rem;
  margin-top:0.85rem;padding-top:0.8rem;border-top:1px solid rgba(200,82,26,0.09);
}
.rev-src{
  display:inline-flex;align-items:center;gap:0.3rem;margin-top:0.7rem;
  font-size:0.68rem;color:var(--text-muted);text-decoration:none;
}
.rev-src:hover{color:var(--brand-ink)}
.rev-src svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rev-meta li{
  display:flex;align-items:center;gap:0.35rem;
  font-size:0.68rem;color:var(--text-muted);
  background:var(--purple-bg);border-radius:100px;padding:0.24rem 0.6rem;
}

/* ── REVIEW SHEET (phones) ─────────────── */
/* The whole review, photos included, in a sheet over the page. Below the
   lightbox in the stack, so tapping a photo still opens it full-size. */
.rvm{
  position:fixed;inset:0;z-index:1100;display:flex;align-items:flex-end;
  background:rgba(22,21,19,0.55);
  opacity:0;visibility:hidden;transition:opacity 0.2s,visibility 0.2s;
}
.rvm.open{opacity:1;visibility:visible}
.rvm-box{
  position:relative;width:100%;max-height:88vh;overflow-y:auto;
  background:#fff;border-radius:16px 16px 0 0;
  padding:1.1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom));
  transform:translateY(14px);transition:transform 0.24s ease;
}
.rvm.open .rvm-box{transform:none}
.rvm-x{
  position:absolute;top:0.5rem;right:0.6rem;z-index:2;
  width:32px;height:32px;border-radius:50%;cursor:pointer;
  background:var(--purple-bg);border:1px solid var(--purple-border);
  font-family:inherit;font-size:1.2rem;line-height:1;color:var(--text);
}
.rvm .rev{border:none;padding:0;background:none}
/* Everything the card hides comes back inside the sheet. */
.rvm .rev-t,.rvm .rev-pn dd{display:block;overflow:visible;-webkit-line-clamp:unset}
.rvm .rev-gal{display:flex}
.rvm .rev-en,.rvm .rev-src{display:block}
.rvm .rev-src{display:inline-flex}
.rvm .rev-shot{width:84px;height:84px}

/* ── SECTION BAR ───────────────────────── */
/* The page carries a lot of sections now. This pins under the site nav, says
   where you are, and keeps the CTA in reach without the dock. */
.hnav{
  position:sticky;top:90px;z-index:180;
  transition:top 0.25s ease;
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(200,82,26,0.12);
}
.hnav-in{
  max-width:1340px;margin:0 auto;padding:0 4rem;
  display:flex;align-items:center;gap:1.5rem;
}
.hnav-tabs{display:flex;gap:0.25rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;flex:1}
.hnav-tabs::-webkit-scrollbar{display:none}
.hnav-tabs a{
  flex-shrink:0;padding:0.85rem 0.7rem;text-decoration:none;white-space:nowrap;
  font-size:0.8rem;color:var(--text-muted);border-bottom:2px solid transparent;
  transition:color 0.18s,border-color 0.18s;
}
.hnav-tabs a:hover{color:var(--brand-ink)}
.hnav-tabs a.on{color:var(--brand-ink);font-weight:600;border-bottom-color:var(--brand-ink)}
/* An action, not a section: it sits in the row after Rooms so the guest who
   has just picked one does not have to hunt for the form. */
/* Specificity has to beat `.hnav-tabs a`, which owns the muted colour and the
   tall padding that make the other items look like tabs. */
.hnav-tabs a.hnav-book{
  flex-shrink:0;align-self:center;margin:0 0.35rem;
  background:var(--brand-ink);color:#fff;text-decoration:none;
  font-size:0.76rem;font-weight:600;line-height:1.25;
  padding:0.36rem 0.8rem;border-radius:7px;
  border-bottom:none;transition:background 0.2s;
}
.hnav-tabs a.hnav-book:hover{background:#96380F;color:#fff}
body.nav-compact .hnav{top:70px}
body.nav-compact .hnav-tabs a:not(.hnav-book){padding-top:0.65rem;padding-bottom:0.65rem}
.hnav-menu{display:none}
@media (max-width:900px){
  .hnav,body.nav-compact .hnav{top:64px}
  .hnav-in{padding:0 1.25rem;gap:0.75rem}
  .hnav-tabs a{padding:0.7rem 0.55rem;font-size:0.76rem}
}
@media (max-width:760px){
  /* A row of tabs you have to swipe hides half of itself. One button that says
     where you are, opening the list. */
  .hnav-in{position:relative;padding:0.5rem 1.25rem}
  .hnav-menu{
    display:flex;align-items:center;gap:0.5rem;cursor:pointer;
    background:#fff;border:1px solid var(--purple-border);border-radius:8px;
    padding:0.4rem 0.7rem;font-family:inherit;font-size:0.8rem;font-weight:600;
    color:var(--dark);
  }
  .hnav-menu svg{width:15px;height:15px;fill:none;stroke:var(--brand-ink);stroke-width:2;stroke-linecap:round}
  .hnav-tabs{
    position:absolute;top:calc(100% + 6px);left:1.25rem;right:1.25rem;z-index:5;
    flex-direction:column;gap:0;overflow:visible;
    background:#fff;border:1px solid var(--purple-border);border-radius:10px;
    box-shadow:0 14px 34px rgba(22,21,19,0.14);padding:0.3rem;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity 0.16s,transform 0.16s,visibility 0.16s;
  }
  .hnav-tabs.open{opacity:1;visibility:visible;transform:translateY(0)}
  .hnav-tabs a{
    padding:0.6rem 0.7rem;border-bottom:none;border-radius:7px;font-size:0.82rem;
  }
  .hnav-tabs a.on{background:var(--purple-bg)}
  /* Inside the dropdown it stays the one solid item, so it still reads as the
     action among a list of destinations. */
  .hnav-tabs a.hnav-book{
    display:block;margin:0.35rem 0 0.15rem;text-align:center;align-self:stretch;
  }
}

/* ── AROUND THE HOTEL ──────────────────── */
/* The lead used to stop at 70ch, which left the right half of the section
   empty and capped how much could be written here. It now runs the full width
   of the block below it as one continuous paragraph — no column split, since
   the text reads as a single run and breaking it mid-sentence into two
   columns made it look like two separate notes. */
.around-lead{font-size:0.86rem;line-height:1.75;color:var(--text-muted);margin-bottom:1.2rem}
.fx.around .fx-g li{justify-content:space-between;gap:0.75rem}
.fx.around .fx-g li::before{display:none}
.fx.around .fx-g li span{min-width:0}
.fx.around .fx-g li b{
  flex-shrink:0;font-size:0.74rem;font-weight:600;color:var(--brand-ink);
  font-variant-numeric:lining-nums;white-space:nowrap;
}
.around-note{margin-top:0.6rem;font-size:0.72rem;color:var(--text-muted);font-style:italic}

/* ── FACILITIES ────────────────────────── */
/* The hotel's own groups, three columns of them. Columns rather than a grid so
   a short group does not leave a hole under a long one. */
.fx{columns:3;column-gap:2.5rem}
.fx-g{break-inside:avoid;margin-bottom:1.4rem}
.fx-g h3{
  display:flex;align-items:center;gap:0.5rem;
  font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:600;
  color:var(--dark);margin-bottom:0.5rem;
}
.fx-g h3::before{
  content:'';width:16px;height:16px;flex-shrink:0;
  background:var(--brand-ink);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.fx-g ul{list-style:none;display:flex;flex-direction:column;gap:0.3rem}
.fx-g li{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:0.35rem;
  font-size:0.78rem;line-height:1.5;color:var(--text);
}
.fx-g li>span{flex:1 1 0;min-width:0}
.fx-g li::before{
  content:'';flex-shrink:0;width:9px;height:6px;margin-right:0.15rem;
  border-left:2px solid var(--green-ink);border-bottom:2px solid var(--green-ink);
  transform:rotate(-45deg) translateY(-2px);
}
.fx-g li.fx-no{color:var(--text-muted)}
.fx-g li.fx-no::before{
  width:9px;height:9px;border:0;border-radius:50%;transform:none;
  background:var(--purple-border);
}
.fx-g em{
  font-style:normal;font-size:0.62rem;letter-spacing:0.04em;
  color:var(--brand-ink);background:var(--purple-bg);
  border-radius:4px;padding:0.1rem 0.35rem;
}
.fx-g em.fx-off{color:var(--text-muted);background:#F3EFEA}
@media (max-width:1100px){.fx{columns:2}}
@media (max-width:700px){
  /* One group per row, but its items in two columns — the entries are two or
     three words and a single file of them ran for screens. */
  .fx{columns:1}
  .fx-g ul{display:block;columns:2;column-gap:1rem}
  .fx-g li{break-inside:avoid;margin-bottom:0.3rem}
  /* Not the distances, and not a group whose items carry an "Extra charge"
     tag: the label and the tag together need the full width. */
  .fx.around .fx-g ul,.fx-g.fx-wide ul{columns:1}
}

/* ── HOUSE RULES ───────────────────────── */
.rules-intro{font-size:0.82rem;line-height:1.7;color:var(--text-muted);margin-bottom:1rem;max-width:70ch}
.rules{
  list-style:none;display:grid;gap:0.75rem 2.5rem;
  grid-template-columns:repeat(auto-fill,minmax(min(24rem,100%),1fr));
}
.rules li{
  display:grid;grid-template-columns:14px 8.5rem minmax(0,1fr);
  align-items:baseline;gap:0.6rem;
  padding-bottom:0.75rem;border-bottom:1px solid rgba(200,82,26,0.09);
}
.rules li::before{position:relative;top:2px}
/* .f-no sets border-style:dashed for the chips. On a row that only has a
   bottom border that switches on the default width for the other three sides
   and draws a box, so the sides are turned off again here. */
.rules li.f-no{border-top-style:none;border-left-style:none;border-right-style:none;border-bottom-style:solid;color:inherit}
.rules b{font-size:0.78rem;font-weight:700;color:var(--dark)}
.rules span{font-size:0.8rem;line-height:1.65;color:var(--text-muted)}
.pays{display:flex;flex-wrap:wrap;align-items:center;gap:0.4rem;margin-top:1.1rem}
.pays-h{
  font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--brand-ink);margin-right:0.3rem;
}
.pays ul{list-style:none;display:flex;flex-wrap:wrap;gap:0.35rem}
.pays li{
  font-size:0.7rem;color:var(--text);background:#fff;
  border:1px solid var(--purple-border);border-radius:6px;padding:0.24rem 0.55rem;
}
.rules-note{
  margin-top:1.1rem;padding:0.7rem 0.9rem;font-size:0.78rem;line-height:1.65;
  color:var(--text-muted);background:var(--purple-bg);
  border-left:3px solid var(--brand-ink);border-radius:0 8px 8px 0;
}
.rules-note b{color:var(--dark)}
@media (max-width:620px){
  .rules li{grid-template-columns:14px minmax(0,1fr);row-gap:0.15rem}
  .rules span{grid-column:2}
}

/* ── GUEST QUESTIONS ───────────────────── */
/* Two columns of disclosures. The answers are short, so opening one does not
   shove the other column around: each column flows on its own. */
.faqs{columns:2;column-gap:2.5rem}
.faq{
  break-inside:avoid;margin-bottom:0.5rem;
  border-bottom:1px solid rgba(200,82,26,0.12);
}
.faq summary{
  display:flex;align-items:center;gap:0.6rem;list-style:none;cursor:pointer;
  padding:0.7rem 0;font-size:0.86rem;line-height:1.4;color:var(--dark);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';margin-left:auto;flex-shrink:0;width:9px;height:9px;
  border-right:2px solid var(--brand-ink);border-bottom:2px solid var(--brand-ink);
  transform:rotate(45deg) translateY(-2px);transition:transform 0.2s;
}
.faq[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq summary:hover{color:var(--brand-ink)}
.faq p{padding:0 1.6rem 0.85rem 0;font-size:0.8rem;line-height:1.7;color:var(--text-muted)}
@media (max-width:760px){.faqs{columns:1}}

/* ── PHONE WITH DIALLING CODE ──────────── */
/* Ported from the tour booking widget: guests type the local number and the
   code travels with it, so what reaches us can be dialled as-is. */
.phone-wrap{
  display:flex;align-items:stretch;background:#fff;
  border:1px solid var(--purple-border);border-radius:8px;transition:border-color 0.2s;
}
.phone-wrap:focus-within{border-color:var(--brand-ink)}
.cc{position:relative;flex-shrink:0}
.cc-btn{
  display:flex;align-items:center;gap:0.35rem;height:100%;
  padding:0.6rem 0.55rem 0.6rem 0.75rem;background:transparent;
  border:none;border-right:1px solid var(--purple-border);cursor:pointer;
  font-family:inherit;font-size:0.88rem;color:var(--text);
}
.cc-flag{width:18px;height:13px;object-fit:cover;border-radius:2px;flex-shrink:0;display:block;box-shadow:0 0 0 1px rgba(0,0,0,0.08)}
.cc-globe{font-size:0.8rem;line-height:13px;width:18px;text-align:center;box-shadow:none}
.cc-chev{width:11px;height:11px;flex-shrink:0;opacity:0.55}
.phone-num{
  flex:1;min-width:0;border:none;background:transparent;outline:none;
  padding:0.6rem 0.8rem;font-family:inherit;font-size:0.88rem;color:var(--text);
}
.cc-drop{
  position:absolute;top:calc(100% + 6px);left:0;z-index:60;
  width:240px;max-height:270px;overflow-y:auto;
  background:#fff;border:1px solid var(--purple-border);border-radius:10px;
  box-shadow:0 12px 32px rgba(22,21,19,0.14);padding:0.35rem;
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity 0.15s,transform 0.15s;
}
.cc-drop.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.cc-opt{
  display:flex;align-items:center;gap:0.5rem;padding:0.45rem 0.55rem;
  border-radius:6px;cursor:pointer;font-size:0.82rem;color:var(--text);white-space:nowrap;
}
.cc-opt:hover,.cc-opt:focus-visible{background:var(--purple-bg);outline:none}
.cc-opt.active{background:var(--purple-bg);color:var(--brand-ink);font-weight:600}
.cc-opt span{margin-left:auto;color:var(--text-muted);font-size:0.85em}
.cc-opt.active span{color:var(--brand-ink)}
@media (max-width:640px){.cc-drop{left:0;right:auto;width:min(240px,calc(100vw - 4rem))}}

/* ── BOOKING DOCK ──────────────────────── */
/* Bottom-right card carrying the running quote and the CTA once the hero's own
   pair has scrolled away. It stays over the form too — the form pads its right
   side so nothing ends up underneath it. */
.bookdock{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:850;
  width:270px;max-width:calc(100vw - 3rem);
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--purple-border);border-radius:16px;
  box-shadow:0 16px 44px rgba(22,21,19,0.20);
  padding:1rem 1.1rem 1.1rem;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity 0.28s ease,transform 0.28s ease;
}
.bookdock.show{opacity:1;transform:none;pointer-events:auto}
.bd-room{font-size:0.72rem;line-height:1.4;color:var(--text-muted)}
.bd-price{
  display:block;font-family:'Cormorant Garamond',serif;font-size:1.85rem;font-weight:700;
  color:var(--brand-ink);line-height:1.1;margin-top:0.15rem;
  font-variant-numeric:lining-nums tabular-nums;
}
.bd-note{font-size:0.66rem;line-height:1.4;color:var(--text-muted);margin-top:0.1rem}
.bd-add{
  margin-top:0.45rem;font-size:0.68rem;line-height:1.4;color:var(--green-ink);
  background:rgba(14,122,85,0.08);border-radius:7px;padding:0.3rem 0.45rem;
}
.bd-add[hidden]{display:none}
.bd-more{
  margin-top:0.5rem;background:none;border:none;cursor:pointer;padding:0;
  font-family:inherit;font-size:0.7rem;font-weight:600;color:var(--brand-ink);
  text-decoration:underline;text-underline-offset:3px;
}
.bd-more[hidden]{display:none}
/* The dock is fixed to the right edge, so the form keeps clear of it. The lane
   is measured in JS (--dock-lane) rather than assumed: on a wide screen the
   form already ends before the dock and reserving 270px would leave a hole. */
@media (min-width:621px){
  body.dock-on .rq{padding-right:max(1.9rem, var(--dock-lane, 1.9rem))}
  /* Same lane for the long multi-column lists: an opaque card sitting on the
     third column hides a different line every time you scroll. */
  body.dock-on #facilities .fx,
  body.dock-on #around .fx{padding-right:var(--dock-lane, 0px)}
}
.bd-btn{
  display:flex;align-items:center;justify-content:center;gap:0.4rem;
  margin-top:0.85rem;padding:0.72rem 1rem;border-radius:10px;
  background:var(--brand-ink);color:#fff;text-decoration:none;
  font-size:0.85rem;font-weight:600;transition:background 0.2s;
}
.bd-btn:hover{background:#96380F}
/* --dock-h is measured in JS: the room label wraps to one or two lines, so the
   offset the floating buttons need is not a constant. */
body.dock-on .wa-fab{bottom:calc(1.5rem + var(--dock-h,168px) + 0.85rem)}
body.dock-on .back-top{bottom:calc(1.5rem + var(--dock-h,168px) + 0.85rem + 46px + 0.6rem)}
@media(max-width:620px){
  /* Full-width bar on phones — a 270px card beside a 56px FAB leaves nothing. */
  .bookdock{
    left:0;right:0;bottom:0;width:auto;max-width:none;
    border-radius:0;border-left:none;border-right:none;border-bottom:none;
    display:flex;align-items:center;gap:0.9rem;
    padding:0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  }
  /* Two tight lines: the room on one, the price and its unit sharing the next,
     rather than a three-line stack beside an oversized button. */
  .bd-text{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 0.4rem}
  .bd-room{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:0.7rem}
  /* The struck price is display:block on the desktop card; on the bar it sits
     beside the new one so the whole thing is one line. */
  .bd-price{font-size:1.3rem;margin-top:0;white-space:nowrap;flex-shrink:0}
  .bd-price s{display:inline;font-size:0.8rem;margin:0 0.25rem 0 0}
  /* flex-basis 0 so it shrinks and ellipsises beside the price instead of
     wrapping onto a third line. */
  .bd-note{
    margin-top:0;font-size:0.62rem;flex:1 1 0;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  /* The transfer line and the photo link belong to the desktop card. */
  .bd-add,.bd-more{display:none}
  .bd-btn{flex-shrink:0;margin-top:0;padding:0.6rem 0.85rem;font-size:0.78rem}
  body.dock-on .wa-fab{bottom:calc(var(--dock-h,74px) + 1rem)}
  body.dock-on .back-top{bottom:calc(var(--dock-h,74px) + 1rem + 46px + 0.6rem)}
}

/* ── CHROME ────────────────────────────── */
.scroll-bar{position:fixed;top:0;left:0;z-index:300;height:3px;width:0%;background:var(--purple);transition:width 0.1s linear;pointer-events:none}
/* Two buttons, one column: same size, same right edge, same shadow. They were
   36px and 56px at different insets with a pulsing halo, which read as clutter
   next to the booking dock. WhatsApp keeps the brand green and the weight; the
   back-to-top is quieter, because it matters less. */
.back-top,.wa-fab{
  position:fixed;right:1.5rem;z-index:999;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(22,21,19,0.16);
  transition:transform 0.2s,opacity 0.3s,background 0.2s;
}
.wa-fab{bottom:1.5rem;background:var(--wa);text-decoration:none}
.wa-fab:hover{transform:translateY(-2px)}
.wa-fab svg{width:24px;height:24px;fill:#fff}
.back-top{
  bottom:calc(1.5rem + 46px + 0.6rem);
  background:#fff;border:1px solid var(--purple-border);cursor:pointer;
  opacity:0;pointer-events:none;
}
.back-top.show{opacity:1;pointer-events:auto}
.back-top:hover{transform:translateY(-2px);background:var(--purple-bg)}
.back-top svg{width:16px;height:16px;stroke:var(--brand-ink);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ── REVEAL ────────────────────────────── */
.rv{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease,transform 0.6s ease}
.rv.in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ── RESPONSIVE ────────────────────────── */
@media(max-width:1180px){
  .wide{padding:0 2rem}
  .band,footer{padding-left:2rem;padding-right:2rem}
}
/* Two columns: copy on the left, photo over map on the right. The copy cell
   spans both rows so it keeps its own height. */
@media(max-width:1200px){
  .dh-body{grid-template-columns:minmax(0,1.4fr) minmax(300px,0.75fr);gap:1.25rem}
  /* The copy cell spans two rows here, so margin-top:auto would drop the price
     and the CTAs hundreds of pixels below the chips they belong to. */
  .dh-buy{margin-top:0;padding-top:1.25rem}
}
@media(max-width:960px){
  .dh{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .dh-body{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .dh-head{align-items:flex-start}
  .dh-head-r{align-items:flex-start;text-align:left}
  .dh-stars{justify-content:flex-start}
  /* Rail goes horizontal once the album is full width — a vertical strip beside
     a short frame would be taller than the photo it indexes. */
  .dh-gal{display:flex;flex-direction:column;gap:0.5rem;min-height:0}
  .gal-thumbs{position:static;width:auto;flex-direction:row;overflow-x:auto;overflow-y:hidden;order:2}
  .gal-thumb{height:56px;width:84px;flex:0 0 84px}
  .gal-main{position:relative;inset:auto;order:1;height:clamp(220px,42vw,360px)}
  .dh-photo{height:clamp(200px,34vw,340px);min-height:0}
  .dh-buy{margin-top:0;padding-top:0.5rem}
  .dh-btns{margin-left:0}
  .amen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .near{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .dh-wrap{padding-top:calc(64px + 1rem)}
  .room{grid-template-columns:minmax(0,1fr)}
  .room-buy{text-align:left;align-items:flex-start}
  .room-gal{max-width:520px}
  .room-price{text-align:left}
  .wide{padding:0 1.25rem}
  .band{padding:2rem 1.25rem 2.5rem}
  footer{padding:1.5rem 1.25rem 1rem}
  .foot-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .foot-bottom{flex-direction:column;gap:0.35rem}
  /* The section above already ends with its own padding; 2.75rem on top of
     that is a hole on a phone. */
  .rq{padding:1.4rem 1.25rem 1.6rem;margin-top:1.4rem}
  .dsec{padding-top:1.1rem}
  .walk{grid-template-columns:minmax(0,1fr)}
  .know{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:620px){
  /* The bottom bar carries the price and the CTA from the first screen on a
     phone, so the hero repeating them just pushed the content down. */
  .dh-buy{display:none}
  /* Shorter cards: a flatter photo, a two-line note, and the inclusions folded
     away (the fold itself is done in JS, which moves the column into it). */
  .room{padding:0.85rem 1rem;gap:0.7rem}
  .room-shot.lead{aspect-ratio:2/1}
  .room-note{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;margin-top:0.45rem;
  }
  .rmore{border-top:1px solid rgba(200,82,26,0.10);padding-top:0.6rem}
  .rmore summary{
    display:flex;align-items:center;justify-content:space-between;gap:0.5rem;
    list-style:none;cursor:pointer;
    font-size:0.8rem;font-weight:600;color:var(--brand-ink);
  }
  .rmore summary::-webkit-details-marker{display:none}
  .rmore summary::after{
    content:'';flex-shrink:0;width:8px;height:8px;
    border-right:2px solid var(--brand-ink);border-bottom:2px solid var(--brand-ink);
    transform:rotate(45deg) translateY(-2px);transition:transform 0.2s;
  }
  .rmore[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
  .rmore .room-cond-col{margin-top:0.7rem}
  /* Reviews: a taste on the card, the whole thing in a sheet. */
  .rev-t,.rev-pn dd{
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .rev-gal,.rev-tr,.rev-en,.rev-src{display:none}
  .rev-more{
    display:block;margin-top:0.6rem;padding:0;background:none;border:none;cursor:pointer;
    font-family:inherit;font-size:0.76rem;font-weight:600;color:var(--brand-ink);
    text-decoration:underline;text-underline-offset:3px;
  }
  /* Tighter section rhythm all round on a phone. */
  .fx-g{margin-bottom:1rem}
  .fx-g:last-child{margin-bottom:0}
  .dsec{padding-top:0.9rem}
  .rq{margin-top:1.1rem}
  .band{padding:1.6rem 1.25rem 1.8rem}
  /* The bar is fixed over the page, so the page has to end above it. */
  body.dock-on{padding-bottom:calc(var(--dock-h,80px) + 0.5rem)}
  /* Four columns squeezed into two wrapped every second link. The brand block
     takes the full width and the three link columns share the row below. */
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem 0.9rem;padding-bottom:1.1rem}
  .foot-grid>:first-child{grid-column:1/-1}
  .foot-col h4{margin-bottom:0.6rem;font-size:0.6rem;letter-spacing:0.1em}
  .foot-col li{margin-bottom:0.35rem}
  .foot-col a{font-size:0.74rem;line-height:1.4}
  /* The label was wrapping to two lines inside a very tall button. */
  .rq-submit{padding:0.75rem 1rem;font-size:0.85rem;white-space:nowrap}
  /* Label, select and link in a row squeezed the select down to "Ch…". */
  .pick-add{flex-direction:column;align-items:stretch;gap:0.4rem}
  .pick-add select{width:100%;min-width:0}
  .pick-add a{align-self:flex-start}
  .amen{grid-template-columns:minmax(0,1fr)}
  .near{grid-template-columns:minmax(0,1fr)}
  .rq-grid{grid-template-columns:minmax(0,1fr)}
  .room{grid-template-columns:minmax(0,1fr)}
  /* One line of price instead of a centred column of five stacked scraps, and
     no CTA of its own: the bottom bar already has one, and picking a number of
     rooms is what actually registers the choice. */
  .room-buy{
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;
    gap:0.15rem 0.5rem;
    text-align:left;padding-top:0.7rem;border-top:1px solid rgba(200,82,26,0.10);
  }
  .room-buy .rp-was,.room-buy .rp-now{text-align:left}
  .room-qty{order:-2;width:100%;margin-bottom:0.5rem}
  .rp-qty{order:-1;width:100%;margin:0}
  .rp-was{order:0;font-size:0.85rem}
  .rp-now{order:1;font-size:1.45rem;margin-top:0}
  .rp-save{order:2;margin-top:0;align-self:center}
  .room-buy .rp-save{align-self:center}
  .rp-vnd{order:3;flex-basis:100%;margin-top:0.1rem;color:var(--text-muted)}
  /* "Includes taxes and fees" is already in the inclusions above. */
  .rp-tax,.room-ask,.room-conf{display:none}
  .room-gal{max-width:none}
  .room-price{text-align:left}
  .dh-btns{width:100%}
  .dh-btns .btn-p,.dh-btns .btn-wa{flex:1 1 auto;justify-content:center}
}