/* ============================================================
   MORALES INNS & SUITES — main.css
   ------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Layout primitives
   4.  Typography
   5.  Buttons & links
   6.  Header / drawer
   7.  Hero
   8.  Search & filters
   9.  Trust strip
   10. Property cards
   11. Destination rail
   12. Why book direct
   13. Reviews
   14. Experiences
   15. FAQ
   16. CTA
   17. Footer
   18. Mobile booking bar
   19. Motion & preferences
   ============================================================ */

/* 1. TOKENS ------------------------------------------------ */
:root{
  --ink:#102019;
  --ink-2:#1A2D27;
  --ink-3:#08110E;
  --bone:#FBF8F2;
  --bone-2:#F3EDE3;
  --sand:#E8DDCE;
  --brass:#A47749;
  --brass-ink:#7B592F;   /* 5.1:1 on --bone */
  --brass-lt:#D1B07D;
  --text:#18201C;
  --text-mute:#586159;
  --danger:#8C3B2E;
  --line:rgba(18,33,28,.13);
  --line-2:rgba(18,33,28,.07);
  --line-dark:rgba(250,247,241,.18);
  --surface:rgba(255,252,247,.9);
  --surface-2:rgba(247,240,230,.94);
  --surface-dark:rgba(8,17,14,.86);
  --bg-glow-1:rgba(164,119,73,.10);
  --bg-glow-2:rgba(18,33,28,.05);

  /* Fallbacks ordered by metric proximity, not popularity: Cormorant is a
     narrow high-contrast garalde (Times is far closer than Georgia), and Jost
     is a geometric sans (Century Gothic / Avenir before the grotesques).
     Keeps the swap-in reflow small enough not to register as layout shift. */
  --serif:"Cormorant Garamond",Cormorant,"Times New Roman",Times,Georgia,serif;
  --sans:"Jost","Century Gothic","Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* ── Motion ───────────────────────────────────────────
     Four durations only. Anything that needs a fifth is wrong. */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-1:180ms;   /* colour / border — instant feedback   */
  --dur-2:280ms;   /* small movement, popovers             */
  --dur-3:460ms;   /* panels, accordions, header states    */
  --dur-4:900ms;   /* reveals and image scale              */
  --t-fast:var(--dur-1);   /* legacy alias */

  /* ── Space ────────────────────────────────────────────
     A 4px-based scale. Section rhythm and gutters are fluid. */
  --sp-1:.25rem;  --sp-2:.5rem;   --sp-3:.75rem;  --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem;  --sp-8:2rem;    --sp-10:2.5rem;
  --sp-12:3rem;   --sp-16:4rem;
  --gutter:clamp(1.25rem,5vw,4rem);
  /* The page gutter has a 20px floor, which is generous at 1440px and punishing
     at 195px of CSS width — 390px at 200% zoom — where it takes 41px, a fifth
     of the screen, before any content is drawn. The result cards were then 4px
     narrower than their own contents and clipped.
     Below 22rem the floor drops so the content gets the room back. Nothing is
     hidden, truncated or scaled down; the text simply has space to wrap. */
  --pad-y:clamp(4.5rem,9vw,8.5rem);
  --stack-sm:clamp(1.5rem,3vw,2rem);
  --stack-md:clamp(2.5rem,5vw,4rem);
  --stack-lg:clamp(2.75rem,5vw,4.5rem);
  --grid-gap:clamp(1.25rem,2.2vw,2rem);
  --grid-gap-row:clamp(2rem,3.4vw,3rem);

  /* ── Radii ────────────────────────────────────────────
     Two values. Square for surfaces, pill for chips. */
    --r:10px;
  --r-pill:999px;

  /* ── Elevation ────────────────────────────────────────
     Two shadows. Cards are flat; only floating things lift. */
    --shadow-1:0 18px 46px -26px rgba(11,21,18,.24);
    --shadow-2:0 32px 86px -44px rgba(11,21,18,.42);

  /* ── Icons ────────────────────────────────────────────
     Three sizes. Anything else is a one-off and a bug. */
  --icon-sm:13px;
  --icon-md:16px;
  --icon-lg:24px;
  --control:48px;   /* circular controls: rail arrows, socials */
  --tap:24px;       /* WCAG 2.2 2.5.8 minimum target */

  --head-h:122px;    /* measured expanded nav; set by core.js */
  --head-solid:104px; /* declared height of .site-head.is-solid .nav */

  color-scheme:light;
}

/* Sub-pages have no hero, so the fixed header is solid from the top
   and content must clear it. */
/* Offset by the header's MEASURED height, falling back to the declared one
   before core.js has run. --head-solid is a constant and was wrong whenever the
   utility toolbar wrapped — which it does at narrow widths, in longer
   languages, and at every zoom level above 100% — leaving the breadcrumb
   underneath the fixed header and unclickable. */
.page-offset{padding-top:var(--head-actual,var(--head-solid))}

/* 2. RESET & BASE ------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* WCAG 2.2 — 2.4.11 Focus Not Obscured: keep focus clear of the fixed
     header, and of the mobile booking bar where that is on screen. */
  scroll-padding-top:calc(var(--head-h) + 1rem);
  scroll-padding-bottom:1rem;
}
@media(max-width:759px){html{scroll-padding-bottom:6rem}}
body{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1rem,.97rem + .16vw,1.0625rem);
  line-height:1.75;
  color:var(--text);
  background:
    radial-gradient(circle at top left,var(--bg-glow-1) 0%,transparent 32%),
    radial-gradient(circle at top right,var(--bg-glow-2) 0%,transparent 30%),
    linear-gradient(180deg,#fcfaf5 0%,var(--bone) 36%,var(--bone-2) 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto;background-color:var(--bone-2)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
ul,ol{list-style:none;padding:0}
table{border-collapse:collapse;width:100%}
[hidden]{display:none !important}

:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:var(--r)}
.dark :focus-visible,.hero :focus-visible,.site-head :focus-visible,.cta :focus-visible{outline-color:var(--brass-lt)}
::selection{background:var(--ink);color:var(--bone)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:.75rem;left:.75rem;z-index:400;
  transform:translateY(-200%);
  background:var(--ink);color:var(--bone);
  padding:.85rem 1.4rem;border-radius:var(--r);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  transition:transform var(--t-fast) var(--ease);
}
.skip-link:focus{transform:none}

/* progressive enhancement: JS-only controls are hidden until main.js boots */
.no-js [data-requires-js]{display:none !important}

/* 3. LAYOUT PRIMITIVES ------------------------------------- */
@media (max-width:22rem){:root{--gutter:clamp(.625rem,4vw,1.25rem)}}
.wrap{width:min(1340px,100% - (var(--gutter) * 2));margin-inline:auto;min-width:0}

/* FLEX AND GRID ITEMS MUST BE ABLE TO SHRINK.
 *
 * A flex or grid item's default min-width is auto: it refuses to become
 * narrower than its own content. One long heading, place name or amenity list
 * therefore sets the minimum width of the page, and everything to its right
 * leaves the viewport.
 *
 * This is the same defect already fixed on .stepper, .foot__top and
 * .foot__contact, and it recurred in the result cards and section headers at
 * 195px of CSS width — 390px at 200% zoom, the narrowest cell in the matrix.
 * Rather than chase each element, the containers that lay content out are told
 * their children may shrink, and prose is allowed to break inside a long word
 * when there is no space for it.
 *
 * This does NOT clip, truncate, ellipsise or shrink type. The text stays
 * complete and wraps, which is what a guest at 200% zoom needs. */
.wrap>*,.res>*,.res__body>*,.page-head>*,.availability-results__summary,
.property-result__meta,.hood>*,.mrn__body>*{min-width:0}
.res__where,.res__specs,.property-badge,.property-result__meta,
.eyebrow,.lede,.mrn__title,.mrn__sub,.h-1,.h-2,.h-4{overflow-wrap:anywhere}

/* THE SAME DEFECT, THREE MORE PLACES.
 *
 * Compound German nouns ("Monatskalender", "Verfügbarkeit") and long property
 * names are single unbreakable tokens. At 195px of CSS width they are wider
 * than their container, and a container that cannot shrink passes the problem
 * up to the page.
 *
 * The card, the newsletter panel and the property feature list are told they
 * may shrink, and their prose may break inside a word when there is no room for
 * it. The text remains complete — nothing is hidden, truncated or scaled. */
.res *,.property-showcase__list,.property-showcase__list li,
.mrn,.mrn__body,.mrn__row,.mrn__interests{min-width:0}
.res__name,.res__name a,.property-showcase__list li,
.property-showcase h2,.property-showcase p{overflow-wrap:anywhere}
.mrn{max-width:100%;box-sizing:border-box}
.wrap--tight{width:min(860px,100% - (var(--gutter) * 2));margin-inline:auto}
.section{padding-block:var(--pad-y)}
.dark{background:var(--ink);color:var(--bone)}
/* NB: no `.dark a{color:inherit}` — (0,1,1) would beat .btn--light (0,1,0)
   and render light buttons bone-on-bone. Global `a{color:inherit}` covers it. */
.dark--deep{background:var(--ink-3);border-top:1px solid rgba(250,247,241,.1)}
.band{background:var(--bone-2)}
.mt-md{margin-top:var(--sp-6)}
.acts{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-8)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.rule{height:1px;background:var(--line);border:0}
.dark .rule{background:var(--line-dark)}

.s-head{display:grid;gap:1.75rem;align-items:end;margin-bottom:var(--stack-lg)}
@media(min-width:900px){
  .s-head{grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:4rem}
  .s-head--center{grid-template-columns:1fr;justify-items:center;text-align:center;max-width:44rem;margin-inline:auto}
}
.s-head p{max-width:38ch}
.s-head--center p{max-width:52ch}

/* 4. TYPOGRAPHY -------------------------------------------- */
h1,h2,h3,.display{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.15;
  letter-spacing:0;
  text-wrap:balance;
}
/* TICKET 3 — the proven 48px.
 *
 * The heading BOX was 175px and fitted the 195px viewport perfectly. Its
 * inline content did not: "übernachten" at 48px is wider than 175px, and with
 * overflow-wrap:normal there is no break opportunity inside a word, so the line
 * box ran to x=243 — exactly the document's scrollWidth — and overflow-x:visible
 * let it extend the scrollable area. Every rect-based probe reported "no
 * element exceeds the viewport", which was true of the element and irrelevant
 * to the document.
 *
 * hyphens:auto comes first because the page declares its language, so German
 * gets real hyphenation ("über-nachten") rather than an arbitrary break.
 * overflow-wrap:break-word is the fallback for a word no dictionary can split
 * and for engines that decline to hyphenate. The heading stays complete and
 * readable; nothing is clipped, ellipsised or scaled down. */
.h-hero{font-size:clamp(3rem,1.6rem + 6.4vw,6.5rem);line-height:1.08;letter-spacing:0;
  hyphens:auto;overflow-wrap:break-word}
.h-1{font-size:clamp(2.35rem,1.5rem + 3.6vw,4.25rem);line-height:1.15}
.h-2{font-size:clamp(1.75rem,1.35rem + 1.7vw,2.6rem);line-height:1.15}
.h-3{font-size:clamp(1.3rem,1.15rem + .7vw,1.7rem);line-height:1.2;letter-spacing:0}
.h-hero em,.h-1 em,.h-2 em{font-style:italic;font-weight:300}

.eyebrow{
  font-family:var(--sans);
  font-size:.6875rem;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--brass-ink);
  margin-bottom:1.5rem;display:block;
}
.dark .eyebrow,.hero .eyebrow,.cta .eyebrow{color:var(--brass-lt)}

.lede{
  font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);
  line-height:1.65;color:var(--text-mute);font-weight:300;text-wrap:pretty;
}
.dark .lede{color:rgba(250,247,241,.72)}
p+p{margin-top:1.1em}
.muted{color:var(--text-mute)}
.dark .muted{color:rgba(250,247,241,.66)}

/* 5. BUTTONS & LINKS --------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  min-height:52px;padding:.95rem 2.1rem;
  font-size:.75rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  border-radius:var(--r);border:1px solid transparent;
  position:relative;overflow:hidden;white-space:normal;overflow-wrap:anywhere;
  text-align:center;line-height:1.35;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.btn--solid{background:linear-gradient(180deg,var(--ink-2),var(--ink));color:var(--bone);border-color:var(--ink);box-shadow:var(--shadow-1)}
.btn--solid:hover{background:linear-gradient(180deg,var(--ink),var(--ink-2));border-color:var(--ink-2)}
.btn--light{background:linear-gradient(180deg,#fff,rgba(255,255,255,.92));color:var(--ink);border-color:rgba(18,33,28,.06);box-shadow:var(--shadow-1)}
.btn--light:hover{background:#fff;border-color:rgba(18,33,28,.1)}
.btn--outline{border-color:rgba(18,33,28,.16);color:var(--text);background:rgba(255,255,255,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn--outline:hover{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.btn--ghost{border-color:rgba(250,247,241,.42);color:var(--bone);background:rgba(250,247,241,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn--ghost:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn--sm{min-height:44px;padding:.7rem 1.5rem;font-size:.6875rem}
.btn--block{width:100%}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

.tlink{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  padding-bottom:.4rem;position:relative;color:var(--text);
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform-origin:right;
  transition:transform var(--dur-3) var(--ease);
}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(0);transform-origin:left}
.tlink svg{transition:transform var(--dur-3) var(--ease)}
.tlink:hover svg{transform:translateX(4px)}
.dark .tlink{color:var(--bone)}

/* 6. HEADER / DRAWER --------------------------------------- */
.site-head{
  position:fixed;inset:0 0 auto;z-index:200;color:var(--bone);
  transition:background-color var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease);
}
.site-head::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,21,18,.55) 0%,rgba(11,21,18,0) 100%);
  transition:opacity var(--dur-3) var(--ease);
}
.site-head.is-solid{background:var(--ink);box-shadow:inset 0 -1px 0 rgba(250,247,241,.1)}
.site-head.is-solid::before{opacity:0}

.topbar{
  border-bottom:1px solid rgba(250,247,241,.14);
  overflow:hidden;max-height:44px;
  transition:max-height var(--dur-3) var(--ease),opacity var(--dur-2) var(--ease);
}
.site-head.is-solid .topbar{max-height:0;opacity:0;border-color:transparent}
.topbar__in{
  display:flex;align-items:center;justify-content:center;gap:2.5rem;height:44px;
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(250,247,241,.82);
}
.topbar__in>*{white-space:nowrap}
.topbar__in span{display:inline-flex;align-items:center;gap:.55rem}
.topbar__dot{width:4px;height:4px;border-radius:50%;background:var(--brass-lt);flex:none}
.topbar__in a:hover{color:#fff}
@media(max-width:1280px){.topbar__in>*:nth-child(2){display:none}}
@media(max-width:880px){.topbar__in>*:nth-child(n+2){display:none}}

/* A FIXED HEIGHT ON A CONTAINER THAT WRAPS IS AN OVERLAP WAITING TO HAPPEN.
 *
 * `height` pinned the header to --head-h regardless of its contents. The
 * utility toolbar wraps to two rows at narrow widths — and wraps sooner in
 * German, Portuguese and Dutch, where the labels are longer — so its second row
 * grew straight out of the header and over the breadcrumb beneath it. The
 * toolbar carries backdrop-filter, which creates a stacking context, so it
 * painted ON TOP and the link underneath could not be clicked at all.
 *
 * min-height keeps the tall header the design wants and lets it grow when the
 * contents need more room. The transition still animates the collapse on
 * scroll. Verified in ten languages at eight widths by npm run audit:ui. */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  width:min(1800px,100% - (var(--gutter) * 2));
  min-height:var(--head-h);transition:min-height var(--dur-3) var(--ease);
}
.site-head.is-solid .nav{min-height:104px}

.brand{display:inline-flex;align-items:center;gap:.85rem;color:inherit;flex:none}
.brand--lockup{display:inline-flex;align-items:center;justify-content:center}
.brand__logo{
  display:block;
  height:clamp(74px,8vw,96px);
  width:auto;
  max-width:100%;
  object-fit:contain;
  background:transparent;
}
.brand__mark{width:34px;height:34px;flex:none;color:var(--brass-lt)}
.brand__type{display:grid;gap:.18rem;line-height:1}
.brand__name{
  font-family:var(--serif);font-weight:400;font-size:1.18rem;
  letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
}
.brand__sub{
  font-size:.625rem;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(250,247,241,.66);white-space:nowrap;
}
@media(max-width:520px){.brand__name{font-size:1rem;letter-spacing:.16em}.brand__sub{display:none}}
@media(max-width:760px){
  .brand__logo{height:clamp(66px,20vw,90px)}
}

.nav__links{display:none;gap:1.9rem;align-items:center}
@media(min-width:1700px){.nav__links{display:flex}}
.nav__links a{
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  color:rgba(250,247,241,.86);position:relative;padding-block:.35rem;
  transition:color var(--t-fast);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--brass-lt);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-3) var(--ease);
}
.nav__links a:hover,.nav__links a:focus-visible,.nav__links a[aria-current]{color:#fff}
.nav__links a:hover::after,.nav__links a:focus-visible::after,.nav__links a[aria-current]::after{transform:scaleX(1)}

.nav__tools{
  display:flex;align-items:center;justify-content:flex-end;gap:.75rem;
  min-width:0;max-width:100%;flex:0 1 auto;
}
.utility-toolbar{
  --utility-control-height:44px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.25rem;
  min-width:0;max-width:100%;padding:.25rem;
  border:1px solid rgba(250,247,241,.18);border-radius:var(--r);
  background:rgba(11,21,18,.48);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.utility-toolbar>*{
  min-width:0;min-height:var(--utility-control-height);flex:0 1 auto;
  align-self:center;
}
.utility-toolbar>[data-mr-locale-switcher],
.utility-toolbar>[data-mr-currency-switcher],
.utility-toolbar>.mr-account{display:flex;align-items:center}
/* WCAG 2.2 — 2.5.8: standalone links get a 24px minimum box. Links that sit
   inside running prose take the SC's inline exception and are left alone. */
.utility-toolbar a,.foot__links a,.foot__legal a,.drawer__meta a,
.results__clear,.topbar__in a{
  min-height:24px;display:inline-flex;align-items:center;
}
.utility-toolbar a,.drawer__meta a{min-width:24px;justify-content:center}
.utility-toolbar a:not(.btn){
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(250,247,241,.72);transition:color var(--t-fast);
  padding-inline:.15rem;
}
.utility-toolbar a:not(.btn):hover,.utility-toolbar a[aria-current="true"]{color:#fff}
/* Shown at EVERY width since the mobile booking bar was removed. It was the
   only persistent booking CTA on a phone; hiding this one too would leave a
   mobile visitor no way to reach availability without opening the drawer. */
.nav__cta{
  display:inline-flex;height:var(--utility-control-height);min-height:var(--utility-control-height);max-width:100%;
  flex:0 0 auto;overflow:visible;text-overflow:clip;
}
/* The glyph is shown only below 360px, where no locale's wording fits. */
.nav__cta-icon{display:none;flex:0 0 auto}

.mr-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--utility-control-height, 40px);
}

.utility-toolbar .mr-select select,
.nav__util .mr-select select {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  height: var(--utility-control-height, 40px);
  min-height: var(--utility-control-height, 40px);
  max-width: 100%;
  border-radius: var(--r);
  border: 1px solid rgba(250,247,241,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)),
    var(--surface-dark);
  color: rgba(250,247,241,.96);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: none;
  padding: .5rem 2rem .5rem .7rem;
  line-height: 1.1;
  cursor: pointer;
}

.mr-select::after {
  content: "";
  position: absolute;
  right: .72rem;
  width: 9px;
  height: 6px;
  pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23F9F5ED' stroke-width='1.2'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}

.utility-toolbar .mr-select select:hover,
.nav__util .mr-select select:hover {
  border-color: rgba(209,176,125,.58);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08)),
    var(--surface-dark);
}

.utility-toolbar .mr-select select:focus-visible,
.nav__util .mr-select select:focus-visible {
  outline: 2px solid var(--brass-lt);
  outline-offset: 2px;
  border-color: rgba(209,176,125,.78);
}

.utility-toolbar .mr-select select option,
.nav__util .mr-select select option {
  color: var(--ink);
  background: #fff;
}

@media (max-width: 759px) {
  .topbar {
    display: none;
  }

  .nav {
    flex-wrap: wrap;
    height: auto;
    gap: .55rem .85rem;
    padding-top: max(.6rem, env(safe-area-inset-top, 0px));
    padding-bottom: .5rem;
  }

  /* The scrolled header may not collapse to a fixed height here. `.nav` wraps
     onto two or three rows on a phone, and `.site-head.is-solid .nav{height:104px}`
     out-specifies the `height:auto` above — so once the page scrolled, the
     header clipped its own wrapped rows and the language, currency and account
     controls were sliced in half. Height follows content at this width. */
  .site-head.is-solid .nav { height: auto; }

  /* Takes a full row of `.nav` rather than shrinking to fit. The toolbar owns
     every utility control, wraps from one spacing rule and leaves the menu
     button as the stable navigation affordance at the row edge. */
  .nav__tools {
    flex: 1 1 100%;
    margin-left: 0;
    gap: .6rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .utility-toolbar {
    flex:1 1 auto;
  }

  .utility-toolbar>[data-mr-locale-switcher],
  .utility-toolbar>[data-mr-currency-switcher] {
    flex: 1 1 7rem;
    min-width: 0;
  }

  .utility-toolbar .mr-select select {
    width: 100%;
    min-width: 0;
    min-height: var(--utility-control-height);
    font-size: .64rem;
    letter-spacing: .05em;
    padding-left: .58rem;
    padding-right: 1.75rem;
  }
}

.burger{display:inline-flex;flex:none;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;align-items:flex-end}
@media(min-width:1700px){.burger{display:none}}
.burger span{display:block;height:1px;background:var(--bone);transition:transform var(--dur-3) var(--ease),width var(--dur-3) var(--ease)}
.burger span:nth-child(1){width:26px}
.burger span:nth-child(2){width:18px}
.burger[aria-expanded="true"] span:nth-child(1){width:26px;transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){width:26px;transform:translateY(-3.5px) rotate(-45deg)}

.drawer[hidden]{display:none !important}
.drawer{
  position:fixed;inset:0;z-index:190;background:var(--ink);color:var(--bone);
  padding:calc(var(--head-h) + 2.5rem) var(--gutter) 2.5rem;
  display:flex;flex-direction:column;
  /* No `visibility` here: transitioning it means the computed value is still
     `hidden` on the tick the panel opens, and focus() is silently rejected.
     The `hidden` attribute (display:none) covers the closed state instead. */
  opacity:0;transform:translateY(-1.5rem);pointer-events:none;
  transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease);
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer.is-open{opacity:1;transform:none;pointer-events:auto}
.drawer__nav{display:grid;gap:.25rem;margin-block:auto}
.drawer__nav a{
  font-family:var(--serif);font-size:clamp(2rem,10vw,2.9rem);font-weight:300;
  padding-block:.4rem;border-bottom:1px solid rgba(250,247,241,.1);
  opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease);
}
.drawer.is-open .drawer__nav a{opacity:1;transform:none}
.drawer.is-open .drawer__nav a:nth-child(1){transition-delay:60ms}
.drawer.is-open .drawer__nav a:nth-child(2){transition-delay:120ms}
.drawer.is-open .drawer__nav a:nth-child(3){transition-delay:180ms}
.drawer.is-open .drawer__nav a:nth-child(4){transition-delay:240ms}
.drawer.is-open .drawer__nav a:nth-child(5){transition-delay:300ms}
.drawer.is-open .drawer__nav a:nth-child(6){transition-delay:360ms}
.drawer__foot{display:grid;gap:1.25rem;padding-top:2rem;border-top:1px solid rgba(250,247,241,.14)}
.drawer__meta{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,247,241,.66)}
.drawer__meta a:hover{color:var(--bone)}
body.is-locked{overflow:hidden}

/* 7. HERO --------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;
  min-height:760px;min-height:100svh;
  display:flex;flex-direction:column;
  padding-top:calc(var(--head-h) + 44px);
  color:var(--bone);
}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--ink-3)}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,21,18,.68) 0%,rgba(11,21,18,.32) 24%,rgba(11,21,18,.5) 52%,rgba(11,21,18,.72) 74%,rgba(11,21,18,.93) 100%),
    linear-gradient(90deg,rgba(11,21,18,.45) 0%,rgba(11,21,18,0) 58%);
}
@media(max-width:760px){
  .hero__media::after{
    background:linear-gradient(180deg,rgba(11,21,18,.66) 0%,rgba(11,21,18,.42) 20%,rgba(11,21,18,.62) 50%,rgba(11,21,18,.78) 72%,rgba(11,21,18,.95) 100%);
  }

  .hero {
    padding-top: calc(var(--head-h) + .65rem);
  }

  .hero__in {
    gap: 1.7rem;
    padding-block: 1.2rem 1.7rem;
  }

  .hero__copy .eyebrow {
    margin-bottom: 1.15rem;
  }

  .hero__sub {
    margin-top: 1.1rem;
    max-width: 32ch;
    font-size: 1rem;
    line-height: 1.6;
  }

  .hero__acts {
    margin-top: 1.5rem;
    gap: .65rem;
  }

  .hero__acts .btn {
    min-height: 46px;
    font-size: .72rem;
    letter-spacing: .14em;
    padding-block: .75rem;
  }

  .hero__highlights {
    margin-top: .95rem;
    gap: .55rem .9rem;
  }

  .hero__highlights li {
    font-size: .68rem;
    letter-spacing: .13em;
  }
}
.hero__in{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(2.5rem,5vw,4rem);padding-block:clamp(2.5rem,6vw,4.5rem);
}
.hero__copy{max-width:min(100%,56rem)}
.hero__copy .eyebrow{margin-bottom:1.75rem}
.hero__copy .h-hero{color:#fff;text-shadow:0 1px 40px rgba(11,21,18,.35)}
.hero__sub{
  max-width:46ch;margin-top:1.75rem;
  font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);
  font-weight:300;line-height:1.7;color:rgba(250,247,241,.88);
}
.hero__acts{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.5rem}
.hero__highlights{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;margin-top:1.2rem;list-style:none;padding:0}
.hero__highlights li{display:inline-flex;align-items:center;gap:.6rem;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,247,241,.78)}
.hero__highlights li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass-lt);flex:none;box-shadow:0 0 0 4px rgba(198,175,131,.16)}
@media(max-width:520px){.hero__acts{flex-direction:column;align-items:stretch}.hero__acts .btn{width:100%}.hero__highlights{flex-direction:column;align-items:flex-start;gap:.65rem}}

.hero__cue{
  position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);
  display:none;align-items:center;gap:.75rem;
  font-size:.625rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(250,247,241,.6);
}
@media(min-width:1200px) and (min-height:940px){.hero__cue{display:flex}}
.hero__cue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,rgba(250,247,241,.7),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.2);transform-origin:bottom;opacity:0}}

/* 8. SEARCH & FILTERS -------------------------------------- */
.search{
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);color:var(--text);border-radius:var(--r);
  box-shadow:var(--shadow-2);border:1px solid rgba(18,33,28,.08);
}
.search__grid{display:grid;grid-template-columns:1fr}
/* THE ONE-ROW SEARCH NEEDS 1100px, NOT 1024px.
 *
 * The five-column row used to engage at 1024. The last column is `auto` — it
 * sizes to the submit button — so a longer button label in another language
 * takes its width out of the destination column beside it. At 1024 that left
 * "Toutes les destinations" 191px of text in a 167px control and "Alle
 * bestemmingen" 171px in 149px: the control clipped its own value, in French
 * and Dutch, on the homepage. English never showed it at 143px.
 *
 * So the two-column layout holds until 1100, where there is room for the row,
 * and the destination column goes from 1.65fr to 2fr. At 1.65fr French cleared
 * by a single pixel at 1100 — that is not clearance, it is the same defect
 * waiting for a different font to render. At 2fr French clears by 32px and
 * Dutch by 31px.
 *
 * Found by an audit that measures rendered text against its box across locales
 * AND zoom levels: the same finding appeared at 125% browser zoom, which is
 * 1024 arriving by another route. */
@media(min-width:600px) and (max-width:1099.98px){
  .search__grid{grid-template-columns:1fr 1fr}
  .field:first-child,.field.guests,.search__submit{grid-column:1 / -1}
  .field:nth-child(2){border-right:1px solid var(--line-2)}
}
@media(min-width:1100px){
  .search__grid{grid-template-columns:2fr 1fr 1fr 1.15fr auto;align-items:stretch}
}
.field{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  gap:.3rem;padding:1.05rem 1.5rem;min-height:82px;
  border-bottom:1px solid var(--line-2);
  transition:background-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
@media(min-width:1024px){
  .field{border-bottom:0;border-right:1px solid var(--line-2)}
  .field.guests{border-right:0}
}
.field:focus-within{background:rgba(255,255,255,.72)}
/* A 6% tint was the only field-level signal, which is close to invisible and
   is colour alone. The inset ring is drawn rather than bordered because .field
   already owns its border on both axes — a real border would shift the grid.
   The message text carries the meaning; this only locates it. */
.field.is-invalid{
  background:rgba(140,59,46,.06);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--danger) 55%,transparent);
}
.field.is-invalid .field__label{color:var(--danger)}
@supports not (color:color-mix(in oklab,red,blue)){
  .field.is-invalid{box-shadow:inset 0 0 0 1px rgba(140,59,46,.55)}
}
.field__label{font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-mute);font-weight:400}
.field__ctrl{border:0;background:transparent;width:100%;padding:0;font-size:1rem;font-weight:400;color:var(--text);line-height:1.4}
.field__ctrl:focus{outline:0}
.field select.field__ctrl{
  appearance:none;-webkit-appearance:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237B592F' stroke-width='1.2'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right center/11px 7px;
  padding-right:1.5rem;cursor:pointer;
}
.field input[type="date"]{cursor:pointer;min-height:1.5rem}
.field input[type="date"]::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer}
.search__submit{padding:.75rem}
@media(min-width:1100px){.search__submit{display:flex;align-items:stretch;padding:.5rem}}
.search__submit .btn{height:100%;min-height:52px}
@media(min-width:1100px){.search__submit .btn{padding-inline:2.4rem}}

.search__error{
  grid-column:1 / -1;margin:0 1.5rem 1rem;
  font-size:.8125rem;color:var(--danger);display:flex;align-items:center;gap:.5rem;
}
.search__error svg{width:var(--icon-md);height:var(--icon-md);flex:none}

.guests{position:relative}
.guests__trigger{width:100%;text-align:left;display:grid;gap:.3rem;cursor:pointer}
.guests__value{font-size:1rem}
.guests__pop{
  position:absolute;z-index:30;left:.75rem;right:.75rem;top:calc(100% - .25rem);
  background:var(--bone);border:1px solid var(--line);
  box-shadow:var(--shadow-1);
  padding:1.35rem;display:grid;gap:1.15rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility var(--dur-2);
}
@media(min-width:1024px){.guests__pop{left:auto;right:.5rem;width:300px}}
.guests__pop.is-open{opacity:1;visibility:visible;transform:none}
/* THE GUEST STEPPER SET THE MINIMUM WIDTH OF THE WHOLE PAGE.
 *
 * A flex row whose items cannot shrink is as rigid as its widest child. The
 * label ("Adults" + "Ages 13 and above") and the −/+ control together needed
 * 188px inside a 162px popover, so the row overflowed to 243px and the DOCUMENT
 * scrolled sideways by 48px — on every page carrying the search panel, in every
 * language, at 390px and 200% zoom.
 *
 * A flex item's default min-width is auto, which refuses to shrink below the
 * content's intrinsic width; min-width:0 lets the label wrap instead of forcing
 * the row wider. flex-wrap lets the control drop beneath the label when even
 * that is not enough, which is the correct behaviour at 195px rather than a
 * horizontal scrollbar across the site. */
.stepper{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;min-width:0}
.stepper__label{display:grid;gap:.1rem;min-width:0;flex:1 1 8rem}
.stepper__label b,.stepper__label small{overflow-wrap:anywhere}
.stepper__ctrl{flex:0 0 auto}
.stepper__label b{font-weight:400;font-size:.9375rem}
.stepper__label small{font-size:.75rem;color:var(--text-mute);line-height:1.4}
.stepper__ctrl{display:flex;align-items:center;gap:.35rem}
.stepper__btn{
  width:44px;height:44px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-size:1rem;line-height:1;color:var(--text);
  transition:border-color var(--t-fast),background-color var(--t-fast),color var(--t-fast);
}
.stepper__btn:hover:not(:disabled){border-color:var(--ink);background:var(--ink);color:var(--bone)}
.stepper__btn:disabled{opacity:.32;cursor:not-allowed}
.stepper__out{min-width:2ch;text-align:center;font-variant-numeric:tabular-nums;font-size:.9375rem}

/* hero quick filters */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.15rem;justify-content:center}
.chips button{
  display:inline-flex;align-items:center;gap:.45rem;
  min-height:44px;
  padding:.5rem 1.05rem;border-radius:var(--r-pill);
  border:1px solid rgba(250,247,241,.45);
  /* .72, not .28. These chips sit on the hero PHOTOGRAPH, and blur softens what
     is behind them without darkening it — over a bright part of the image the
     90%-white label measured 1.66:1 against the composited background, where
     4.5:1 is required. .72 is not a new number: it is what the
     prefers-reduced-transparency rule below already switches to, and it holds
     about 5.6:1 even against a pure white frame. */
  background:rgba(11,21,18,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(250,247,241,.9);
  transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.chips button:hover{background:rgba(250,247,241,.16);border-color:rgba(250,247,241,.55);color:#fff}
.chips button[aria-pressed="true"]{background:var(--bone);border-color:var(--bone);color:var(--ink)}
/* On small screens the filters scroll rather than disappear — they are the
   fastest path to a match on the device most guests arrive on. */
@media(max-width:560px){
  .chips{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    justify-content:flex-start;scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);padding-block:.15rem;
  }
  .chips::-webkit-scrollbar{display:none}
  .chips button{flex:none}
}

/* results bar above the residence grid */
.results{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;
  padding:1rem 0 1.25rem;margin-bottom:2rem;
  border-block:1px solid var(--line);
}
.results__count{font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
.results__count b{color:var(--text);font-weight:400}
.results__tags{display:flex;flex-wrap:wrap;gap:.5rem}
.results__tag{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.35rem .5rem .35rem .85rem;border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text);
}
/* Remove controls are full touch targets; the icon stays visually compact. */
.results__tag button{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--line-2);color:var(--text);transition:background-color var(--t-fast)
}
.results__tag button:hover{background:var(--ink);color:var(--bone)}
.results__tag svg{width:9px;height:9px}
.results__clear{margin-left:auto;min-height:44px;display:inline-flex;align-items:center;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-ink);border-bottom:1px solid currentColor;padding:.5rem 0}
.results__clear:hover{color:var(--ink)}

.empty{
  grid-column:1 / -1;padding:clamp(3rem,7vw,5rem) 2rem;text-align:center;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bone-2);
}
.empty h3{font-size:clamp(1.4rem,1.2rem + .8vw,1.9rem);margin-bottom:.75rem}
.empty p{color:var(--text-mute);max-width:44ch;margin-inline:auto;font-weight:300}
.empty .acts{justify-content:center}

/* 9. TRUST STRIP -------------------------------------------- */
.trust{border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--bone) 0%,var(--bone-2) 100%)}
/* auto-fit so the strip stays balanced when unverified figures are
   gated out of the DOM — 1, 2, 3 or 4 tiles all read correctly */
.trust__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.trust__item{
  padding:clamp(2rem,3.6vw,3rem) clamp(1rem,2vw,1.5rem);
  display:grid;gap:.7rem;justify-items:center;text-align:center;align-content:center;
  border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
}
@media(min-width:900px){.trust__item{border-bottom:0}.trust__item:last-child{border-right:0}}
@media(max-width:899px){.trust__item:nth-child(2n){border-right:0}.trust__item:nth-child(n+3){border-bottom:0}}
.trust__figure{font-family:var(--serif);font-size:clamp(1.75rem,1.4rem + 1.2vw,2.4rem);font-weight:300;line-height:1;display:flex;align-items:baseline;gap:.3rem}
.trust__figure sup{font-size:.5em;color:var(--brass-ink);line-height:1}
.trust__label{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);line-height:1.7;max-width:28ch;text-wrap:balance}

/* 10. RESIDENCE CARDS --------------------------------------- */
/* Below 660px this grid declares no columns, so its single implicit track is
   sized to the ITEM'S MIN-CONTENT. article.res demanded 217px inside a 175px
   container — measured spill 42px — and stranded the card off-screen at a
   195px viewport. Identical mechanism to .foot__news: an explicit
   minmax(0,1fr) lets the track resolve to the container instead. */
.grid-res{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--grid-gap-row) var(--grid-gap)}
@media(min-width:660px){.grid-res{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.grid-res{grid-template-columns:repeat(3,minmax(0,1fr))}}

.res{display:flex;flex-direction:column;height:100%;position:relative}
.res__media{position:relative;z-index:4;overflow:hidden;background:var(--sand);aspect-ratio:4/5;border-radius:var(--r)}
.res__media{box-shadow:var(--shadow-1)}
.res__media a,.res__media-link{display:block;position:relative;z-index:4}
.res__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-4) var(--ease)}
.res:hover .res__media img,.res:focus-within .res__media img{transform:scale(1.045)}
.res__tag{
  position:absolute;top:1rem;left:1rem;z-index:2;
  background:rgba(255,252,247,.96);color:var(--ink);
  padding:.42rem .85rem;border-radius:var(--r);
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
}
.res__tag--dark{background:rgba(18,33,28,.88);color:var(--bone)}
.res__body{padding-top:1.4rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
/* The name and the availability badge share one row. Flex items default to
   min-width:auto, so neither could shrink below its own content and the row
   pushed past the card on a 320px screen — 2 to 10px of the card clipped, in
   Dutch, German, Italian, Portuguese, Spanish and French but never English,
   because "Beschikbaar" and "Disponibile" are simply wider than "Available".
   Wrapping lets the badge drop under the name when the row will not fit, which
   costs English nothing: at 320px it already fits, so it never wraps. */
.res__top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.35rem 1rem}
.res__top>*{min-width:0}
.res__name{font-family:var(--serif);font-size:1.5rem;font-weight:400;letter-spacing:-.01em;line-height:1.15}
.res__name a::after{content:"";position:absolute;inset:0;z-index:3}
.res__rate{display:inline-flex;align-items:center;gap:.35rem;flex:none;font-size:.8125rem;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.res__rate svg{width:var(--icon-sm);height:var(--icon-sm);color:var(--brass)}
.res__place{
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-mute);
}
/* property-type badge — icon + label, one per taxonomy entry */
.res__type{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--brass-ink);white-space:nowrap;
}
/* TICKET 1 — the exact 10px.
 *
 * white-space:nowrap keeps "Vacation Home" on one line, which is right at every
 * ordinary width and impossible at 97px: the label demanded 123px inside a
 * 97.4px content box, so .res__body needed 139px in a 129px card and clipped by
 * 10px. overflow-wrap cannot help here — nowrap forbids wrapping outright, so
 * no amount of word-breaking elsewhere reaches it.
 *
 * Below 22rem the label is allowed to wrap onto a second line. The icon still
 * cannot be stranded from its text: .res__type remains one flex item inside
 * .res__place, so only the label itself breaks. Nothing is hidden or shortened.
 */
@media (max-width:22rem){
  .res__type{white-space:normal}

}
.res__type svg{width:var(--icon-sm);height:var(--icon-sm);flex:none;color:var(--brass)}
/* one flex item, so a wrap never strands the separator on its own line */
.res__where{display:inline}
.res__onrequest{
  font-family:var(--serif);font-size:1.25rem;font-weight:400;
  letter-spacing:.01em;color:var(--text);
}
.res__specs{font-size:.9375rem;color:var(--text-mute);font-weight:300;line-height:1.6}
.res__foot{
  margin-top:auto;padding-top:1rem;border-top:1px solid var(--line-2);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.res__price b{font-family:var(--serif);font-size:1.4rem;font-weight:400;letter-spacing:-.01em}
.res__price span{font-size:.8125rem;color:var(--text-mute)}
.res__cta{
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-ink);
  border-bottom:1px solid currentColor;padding-bottom:.2rem;transition:color var(--t-fast);
  /* 23px — one pixel short of 2.5.8, and the primary call to action on a
     results card. Left as the only target on the site still relying on the
     spacing exception, it would be the first to break under a layout change. */
  display:inline-flex;align-items:center;min-height:24px;
}
.res:hover .res__cta{color:var(--ink)}

/* the whole card is one link target — move the ring to the card */
.res:has(a:focus-visible),.exp:has(a:focus-visible),.hood:has(a:focus-visible){
  outline:2px solid var(--brass);outline-offset:8px;border-radius:var(--r);
}
.hood:has(a:focus-visible){outline-color:var(--brass-lt);outline-offset:4px}
.res:has(a:focus-visible) a:focus-visible,
.exp:has(a:focus-visible) a:focus-visible,
.hood:has(a:focus-visible) a:focus-visible{outline:0}

.grid-more{display:flex;justify-content:center;margin-top:var(--stack-md)}

/* 11. NEIGHBOURHOOD RAIL ------------------------------------ */
.rail-nav{display:none;gap:.6rem;margin-top:1.75rem}
@media(min-width:900px){.rail-nav{display:flex}}
.rail-nav button{
  width:var(--control);height:var(--control);border:1px solid var(--line-dark);border-radius:50%;
  display:grid;place-items:center;color:inherit;
  transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast),opacity var(--t-fast);
}
.rail-nav button:hover:not(:disabled){background:var(--bone);border-color:var(--bone);color:var(--ink)}
.rail-nav button:disabled{opacity:.28;cursor:not-allowed}

.rail{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:clamp(252px,76vw,300px);
  gap:clamp(1rem,1.8vw,1.75rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-block:.5rem;
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
  scroll-padding-inline:var(--gutter);
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
@media(min-width:700px){.rail{grid-auto-columns:clamp(290px,30vw,344px)}}

.hood{
  position:relative;scroll-snap-align:start;
  min-height:clamp(400px,42vw,468px);
  overflow:hidden;border-radius:var(--r);
  display:flex;align-items:flex-end;
  background:var(--ink-2);isolation:isolate;
}
.hood img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-4) var(--ease)}
.hood::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,21,18,0) 12%,rgba(11,21,18,.3) 44%,rgba(11,21,18,.8) 74%,rgba(11,21,18,.96) 100%);
}
.hood:hover img,.hood:focus-within img{transform:scale(1.06)}
.hood__body{padding:1.75rem;color:var(--bone);display:grid;gap:.5rem;width:100%}
.hood__count{font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-lt)}
.hood__name{font-family:var(--serif);font-size:1.75rem;font-weight:400;line-height:1.1}
.hood__desc{font-size:.9375rem;font-weight:300;line-height:1.55;color:rgba(250,247,241,.8);max-width:30ch}
.hood__link::after{content:"";position:absolute;inset:0}

/* market framing above the rail — scales as countries are added */
.market{display:flex;align-items:center;gap:.75rem 1.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.market__name{
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:var(--sans);font-size:.6875rem;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--bone);
}
.market__name i{width:24px;height:1px;background:var(--brass-lt);flex:none}
.market>span{font-size:.8125rem;font-weight:300;color:rgba(250,247,241,.62)}
.dest-note{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;
  border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
  font-size:.9375rem;font-weight:300;color:rgba(250,247,241,.66);
}

/* 12. WHY BOOK DIRECT --------------------------------------- */
.why{display:grid;gap:clamp(3rem,6vw,5rem)}
@media(min-width:1000px){
  .why{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(3rem,6vw,6rem);align-items:start}
  /* when the cost comparison is gated off, the remaining column centres
     instead of leaving a hole */
  .why:has(> [hidden]){grid-template-columns:minmax(0,64ch);justify-content:center}
}

.benefits{display:grid;gap:0;margin-top:2.75rem;border-top:1px solid var(--line-dark)}
.benefit{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.35rem;padding-block:1.6rem;border-bottom:1px solid var(--line-dark)}
.benefit__ico{width:var(--icon-lg);height:var(--icon-lg);color:var(--brass-lt);margin-top:.15rem}
.benefit h3{font-family:var(--sans);font-size:.8125rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.5rem;line-height:1.4}
.benefit p{font-size:.9375rem;font-weight:300;line-height:1.65;color:rgba(250,247,241,.68);max-width:44ch}

.compare{border:1px solid var(--line-dark);border-radius:var(--r);background:rgba(250,247,241,.035);overflow:hidden}
.compare caption{padding:1.5rem 1.5rem 0;text-align:left;font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-lt)}
.compare th,.compare td{padding:1.05rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-dark);font-size:.875rem;font-weight:300;line-height:1.5}
.compare thead th{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400;color:rgba(250,247,241,.72);padding-block:1.25rem}
.compare thead th:nth-child(2){color:var(--brass-lt)}
.compare tbody th{font-weight:400;color:rgba(250,247,241,.9);padding-left:1.5rem;width:38%}
.compare td{color:rgba(250,247,241,.6)}
.compare td:first-of-type{color:var(--bone)}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare td:last-child{padding-right:1.5rem}
.compare thead th:first-child{padding-left:1.5rem}
.compare thead th:last-child{padding-right:1.5rem}
.compare .total{font-family:var(--serif);font-size:1.5rem;font-weight:400;letter-spacing:-.01em}
.tick{display:inline-flex;align-items:center;gap:.5rem}
.tick svg{width:var(--icon-md);height:var(--icon-md);flex:none;color:var(--brass-lt)}
.tick--no svg{color:rgba(250,247,241,.34)}
@media(max-width:600px){
  .compare th,.compare td{padding:.85rem .75rem;font-size:.8125rem}
  .compare tbody th{padding-left:1rem;width:34%}
  .compare thead th:first-child{padding-left:1rem}
}
.why__note{margin-top:1.5rem;display:flex;gap:.75rem;align-items:flex-start;font-size:.8125rem;line-height:1.6;color:rgba(250,247,241,.55)}
.why__note svg{width:var(--icon-md);height:var(--icon-md);flex:none;margin-top:.28rem;color:var(--brass-lt)}

/* 13. REVIEWS ----------------------------------------------- */
.rev-summary{
  display:grid;gap:2.5rem;align-items:center;
  padding-block:clamp(2.25rem,4vw,3.25rem);
  margin-bottom:var(--stack-md);
  border-block:1px solid var(--line);
}
@media(min-width:860px){.rev-summary{grid-template-columns:auto 1fr;gap:clamp(3rem,7vw,7rem)}}
.rev-score{display:grid;gap:.5rem;justify-items:start}
.rev-score__n{font-family:var(--serif);font-size:clamp(4rem,3rem + 4vw,6rem);font-weight:300;line-height:.86;letter-spacing:-.03em}
.rev-score__stars{display:flex;gap:.28rem;color:var(--brass)}
.rev-score__stars svg{width:var(--icon-md);height:var(--icon-md)}
.rev-score__meta{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute)}
.rev-sources{display:grid;gap:0;border-top:1px solid var(--line-2)}
@media(min-width:560px){.rev-sources{grid-template-columns:repeat(3,minmax(0,1fr));border-top:0}}
.rev-source{display:grid;gap:.3rem;padding:1.1rem 0;border-bottom:1px solid var(--line-2)}
@media(min-width:560px){
  .rev-source{padding:0 1.75rem;border-bottom:0;border-left:1px solid var(--line-2)}
  .rev-source:first-child{padding-left:0;border-left:0}
}
.rev-source b{font-family:var(--serif);font-size:1.5rem;font-weight:400;letter-spacing:-.01em}
.rev-source span{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute)}

.grid-rev{display:grid;gap:var(--grid-gap)}
@media(min-width:760px){.grid-rev{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1120px){.grid-rev{grid-template-columns:repeat(3,minmax(0,1fr))}}
.review{
  display:flex;flex-direction:column;gap:1.25rem;height:100%;
  padding:clamp(1.75rem,2.6vw,2.25rem);
  background:var(--bone);border:1px solid var(--line-2);border-radius:var(--r);
}
.band .review{background:#fff}
.review__head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.review__stars{display:flex;gap:.22rem;color:var(--brass)}
.review__stars svg{width:var(--icon-sm);height:var(--icon-sm)}
.review blockquote{
  font-family:var(--serif);font-size:clamp(1.1875rem,1.1rem + .35vw,1.375rem);
  font-weight:300;line-height:1.5;letter-spacing:-.005em;color:var(--text);text-wrap:pretty;
}
.review__who{margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--line-2);display:flex;align-items:center;gap:.9rem}
.review__av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--sand);color:var(--ink);font-size:.75rem;letter-spacing:.06em}
.review__id{display:grid;gap:.12rem;min-width:0}
.review__id b{font-weight:400;font-size:.9375rem}
.review__id span{font-size:.75rem;color:var(--text-mute);line-height:1.4}
.review__src{
  flex:none;font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  color:var(--text-mute);border:1px solid var(--line);border-radius:var(--r-pill);padding:.3rem .7rem;
}

/* 14. EXPERIENCES ------------------------------------------- */
.grid-exp{display:grid;gap:var(--grid-gap-row)}
@media(min-width:620px){.grid-exp{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.grid-exp{grid-template-columns:repeat(4,minmax(0,1fr))}}
.exp{position:relative;display:flex;flex-direction:column;gap:1.15rem;height:100%}
.exp__media{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:3/2;background:var(--ink-2)}
.exp__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-4) var(--ease)}
.exp:hover .exp__media img,.exp:focus-within .exp__media img{transform:scale(1.05)}
.exp__meta{display:flex;align-items:center;gap:.6rem;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-lt)}
.exp__meta i{width:3px;height:3px;border-radius:50%;background:currentColor;flex:none}
.exp h3{font-family:var(--serif);font-size:1.375rem;font-weight:400;line-height:1.2}
.exp h3 a::after{content:"";position:absolute;inset:0}
.exp p{font-size:.9375rem;font-weight:300;line-height:1.65;color:rgba(250,247,241,.66)}

/* 15. FAQ ---------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.65rem 0;text-align:left;
  font-family:var(--serif);font-size:clamp(1.1875rem,1.1rem + .45vw,1.5rem);
  font-weight:400;line-height:1.3;letter-spacing:-.01em;color:var(--text);
  transition:color var(--t-fast);
}
.faq__q:hover{color:var(--brass-ink)}
.faq__ico{position:relative;width:16px;height:16px;flex:none;margin-top:.55rem;color:var(--brass-ink)}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;background:currentColor;left:50%;top:50%;transition:transform var(--dur-3) var(--ease)}
.faq__ico::before{width:16px;height:1px;transform:translate(-50%,-50%)}
.faq__ico::after{width:1px;height:16px;transform:translate(-50%,-50%)}
.faq__q[aria-expanded="true"] .faq__ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-3) var(--ease)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden;visibility:hidden;transition:visibility 0s linear var(--dur-3)}
.faq__item.is-open .faq__a>div{visibility:visible;transition-delay:0s}
.faq__a p{padding-bottom:1.75rem;max-width:64ch;color:var(--text-mute);font-weight:300;font-size:1rem;line-height:1.75}
.faq__head{margin-bottom:var(--stack-lg)}
.faq__more{margin-top:var(--stack-md);display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}
.faq__more-note{font-size:.9375rem;max-width:38ch}

/* 16. CTA ---------------------------------------------------- */
.cta{position:relative;isolation:isolate;color:var(--bone);overflow:hidden}
.cta__media{position:absolute;inset:0;z-index:-2;background:var(--ink-3)}
.cta__media img{width:100%;height:100%;object-fit:cover}
.cta__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,21,18,.84) 0%,rgba(11,21,18,.6) 45%,rgba(11,21,18,.9) 100%),
    radial-gradient(110% 75% at 50% 48%,rgba(11,21,18,.16) 0%,rgba(11,21,18,.6) 100%);
}
.cta__in{padding-block:clamp(5rem,10vw,9.5rem);display:grid;gap:2.25rem;justify-items:center;text-align:center;max-width:52rem;margin-inline:auto}
.cta__lede{color:rgba(250,247,241,.82);max-width:52ch}
.cta__acts{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
@media(max-width:520px){.cta__acts{flex-direction:column;align-self:stretch}.cta__acts .btn{width:100%}}
.cta__meta{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:center;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,247,241,.66)}
.cta__meta span{display:inline-flex;align-items:center;gap:.55rem}

/* 17. FOOTER -------------------------------------------------- */
.foot{background:var(--ink-3);color:rgba(250,247,241,.66);padding-top:clamp(3.5rem,7vw,6rem)}
/* Grid items default to min-width:auto and refuse to shrink below their
   content, so the footer prose pushed the document 6px wider at 200% zoom.
   Same cause as the guest stepper above. */
.foot__top{display:grid;gap:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(3rem,5vw,4.5rem);border-bottom:1px solid rgba(250,247,241,.12)}
.foot__top>*{min-width:0}
.foot__about{overflow-wrap:anywhere}
@media(min-width:900px){.foot__top{grid-template-columns:1.25fr repeat(3,minmax(0,.8fr));gap:clamp(2rem,4vw,4rem)}}
.foot .brand__name,.foot h2{color:var(--bone)}
.foot__about{max-width:36ch;margin-top:1.5rem;font-size:.9375rem;font-weight:300;line-height:1.7}
.foot__platform{color:var(--bone);font-weight:400}
.foot__contact{display:grid;gap:.6rem;margin-top:1.75rem}
/* An inline-flex row of icon + address will not shrink below the address, so
   these forced the document wider at 200% zoom once the grid above them was
   allowed to shrink. The address wraps instead. */
.foot__contact a,.foot__contact span{display:inline-flex;align-items:center;gap:.7rem;font-size:.9375rem;font-weight:300;min-width:0;max-width:100%;overflow-wrap:anywhere}
.foot__contact a>svg,.foot__contact span>svg{flex:none}
.foot__contact a{transition:color var(--t-fast)}
.foot__contact a:hover{color:var(--bone)}
.foot__contact svg{width:var(--icon-md);height:var(--icon-md);flex:none;color:var(--brass-lt)}
.foot h3{font-family:var(--sans);font-size:.6875rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--bone);margin-bottom:1.35rem}
.foot__links{display:grid;gap:.6rem}
.foot__links a{font-size:.9375rem;font-weight:300;position:relative;width:fit-content;transition:color var(--t-fast)}
.foot__links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-3) var(--ease)}
.foot__links a:hover{color:var(--bone)}
.foot__links a:hover::after{transform:scaleX(1)}

/* TICKET 2 — the true width constraint.
 *
 * .foot__news is a single-column grid. Its implicit track is sized to the item's
 * MIN-CONTENT width, and a grid item's default min-width is auto, so the item
 * refused to shrink below 227.66px and the track grew to match — inside a 175px
 * container, inside a 195px viewport. The form's own max-width:100% was
 * meaningless because 100% of an over-wide track is still over-wide.
 *
 * min-width:0 on the ITEM is what lets the track resolve to the container. This
 * is the constraint itself, not a mask over it: the measured track width drops
 * from 227.66px to the container width. */
.foot__news{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;align-items:center;padding-block:clamp(2.5rem,4vw,3.25rem);border-bottom:1px solid rgba(250,247,241,.12)}
.foot__news>*{min-width:0}
@media(min-width:860px){.foot__news{grid-template-columns:1fr minmax(0,26rem);gap:4rem}}
.foot__news h2{font-family:var(--serif);font-size:clamp(1.5rem,1.3rem + 1vw,2rem);font-weight:300;line-height:1.15}
.foot__news p{font-size:.9375rem;font-weight:300;margin-top:.65rem;max-width:44ch}
.news-form{display:flex;gap:0;border-bottom:1px solid rgba(250,247,241,.3);align-items:center}
.news-form input{flex:1;min-width:0;background:transparent;border:0;padding:.9rem .25rem;font-size:1rem;font-weight:300;color:var(--bone)}
.news-form input::placeholder{color:rgba(250,247,241,.45)}
.news-form input:focus{outline:0}
.news-form:focus-within{border-color:var(--brass-lt)}
.news-form button{flex:none;padding:.9rem .25rem .9rem 1.25rem;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-lt);transition:color var(--t-fast)}
.news-form button:hover{color:var(--bone)}
.news-form button[disabled]{opacity:.5;cursor:wait}
.news-note{font-size:.75rem;margin-top:.75rem;color:rgba(250,247,241,.58);line-height:1.5}
.news-status{font-size:.8125rem;margin-top:.6rem;color:var(--brass-lt);min-height:1.2em}
.news-status.is-error{color:#E39A8C}

.foot__bottom{padding-block:2rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;font-size:.75rem;color:rgba(250,247,241,.6)}
.foot__legal{display:flex;flex-wrap:wrap;gap:1.5rem}
.foot__legal a:hover{color:var(--bone)}
.foot__policies{padding:0 0 1rem;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.45rem 1.25rem;font-size:.75rem;color:rgba(250,247,241,.66)}
.foot__policies-label{flex-basis:100%;text-align:right;color:rgba(250,247,241,.78)}
/* WCAG 2.2 AA 2.5.8 — see the matching rule in pages.css.
   The site ships the same footer utilities under two class prefixes: `foot__`
   on the marketing pages and `page-foot__` on the content and legal pages.
   Correcting only one leaves half the site 22px tall and passing on the spacing
   exception alone, which is what made this worth a shared rule rather than a
   per-page patch. Additive: no existing declaration is changed. */
.foot__policies a,
.foot__concierge a,
.foot__team a{display:inline-flex;align-items:center;min-height:24px}
.foot__policies a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.foot__policies a:hover,.foot__policies a:focus-visible{color:var(--bone);border-bottom-color:currentColor}
.foot__policies a:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.foot__social{display:flex;gap:.6rem}
.foot__social a{width:38px;height:38px;border:1px solid rgba(250,247,241,.18);border-radius:50%;display:grid;place-items:center;color:rgba(250,247,241,.7);transition:border-color var(--t-fast),color var(--t-fast),background-color var(--t-fast)}
.foot__social a:hover{border-color:var(--bone);color:var(--ink);background:var(--bone)}
.foot__social svg{width:var(--icon-md);height:var(--icon-md)}
.foot__team{padding:0 0 1.5rem;display:flex;justify-content:flex-end;gap:.5rem;font-size:.75rem;color:rgba(250,247,241,.72)}
.foot__team-label{opacity:.72}
.foot__team a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.foot__team a:hover,.foot__team a:focus-visible{color:var(--bone);border-bottom-color:currentColor}
.foot__team a:focus-visible{outline:2px solid var(--bone);outline-offset:3px}

/* AI Concierge entry. Styled as a sibling of the legal and team utilities
   rather than as a call to action — the feature is not built, and a prominent
   button for something that answers "coming soon" spends attention the booking
   path needs. The "Coming soon" marker is a separate span so it is announced as
   status text and never reads as part of the link label. */
.foot__concierge{padding:0 0 .75rem;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:.5rem;font-size:.75rem;color:rgba(250,247,241,.72)}
.foot__concierge a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.foot__concierge a:hover,.foot__concierge a:focus-visible{color:var(--bone);border-bottom-color:currentColor}
.foot__concierge a:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.foot__concierge-soon{font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;opacity:.66}

/* 18. MOBILE BOOKING BAR — REMOVED 2026-08-02 ----------------
   `.mbar` was a full-width bar pinned to the bottom of the viewport on
   mobile. It was the second floating widget on the site, and the production
   requirement is exactly one: the WhatsApp button.

   It was also the ONLY persistent booking call to action on mobile, because
   `.nav__cta` is display:none below 760px. Deleting it alone would have met
   the requirement and silently cost the mobile booking path, so the header
   CTA is now shown at every width instead — page chrome, not a floating
   widget.

   Removed rather than hidden. A `display:none` rule leaves the markup, the
   scroll handler and the tab stop in place, and the next person re-enables a
   duplicate by deleting one line.
   ---------------------------------------------------------- */

/* 18b. FLOATING WHATSAPP — REMOVED 2026-08-02 ---------------
   These styled `.wa-fab`, a SECOND floating WhatsApp button built by core.js.
   The owner saw two chat buttons stacked in the lower-right corner; this was
   the other one.

   The surviving widget is `.mrw` in contact.css, built by contact.js: it is
   admin-configurable, bilingual, carries page context and records the click as
   a lead source. None of which this one did, and it skipped every noindex page
   so it was absent from all fourteen new pages anyway.

   Removed rather than commented out, so a duplicate cannot return by someone
   deleting a flag. scripts/audit-floating-widgets.js fails the build if a
   second WhatsApp float ever appears again.
   --------------------------------------------------------- */

/* 19. MOTION & PREFERENCES ------------------------------------ */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity var(--dur-4) var(--ease),transform var(--dur-4) var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}
/* stagger for sibling cards, declared here rather than written into the DOM */
.grid-rev>[data-reveal]:nth-child(2),.grid-exp>[data-reveal]:nth-child(2){transition-delay:90ms}
.grid-rev>[data-reveal]:nth-child(3),.grid-exp>[data-reveal]:nth-child(3){transition-delay:180ms}
.grid-exp>[data-reveal]:nth-child(4){transition-delay:270ms}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-reveal]{opacity:1!important;transform:none!important}
  .hero__cue i{animation:none}
}
@media(prefers-reduced-transparency:reduce){
  .chips button{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(11,21,18,.72)}
}
@media(prefers-contrast:more){
  :root{--line:rgba(18,33,28,.4);--line-2:rgba(18,33,28,.25);--line-dark:rgba(250,247,241,.45);--text-mute:#3D4540}
}
@media print{
  .site-head,.drawer,.hero__cue,.rail-nav,.chips,.results{display:none!important}
  body{background:#fff;color:#000}
  .dark,.cta{background:#fff!important;color:#000!important}
  .hero{min-height:0}
}

/* ============================================================
   20. COLLECTION PAGE
   Additive only. Reuses the existing tokens, .res card, .empty
   state and .btn components without modification.
   ============================================================ */

/* page header ------------------------------------------------ */
.page-head{padding-block:clamp(2.5rem,5vw,4rem) 0}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);margin-bottom:var(--sp-6)}
.crumbs a{min-height:var(--tap);display:inline-flex;align-items:center;transition:color var(--dur-1) var(--ease)}
.crumbs a:hover{color:var(--text)}
.crumbs li{display:flex;align-items:center;gap:.5rem}
.crumbs li+li::before{content:"";width:10px;height:1px;background:var(--line);flex:none}
.crumbs [aria-current]{color:var(--text)}

.page-head__in{display:grid;gap:var(--sp-6);align-items:end}
@media(min-width:900px){.page-head__in{grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:4rem}}
.page-head p{max-width:52ch}

/* layout: sidebar + results ---------------------------------- */
.collection{display:grid;gap:var(--stack-md);padding-block:var(--stack-md) var(--pad-y);align-items:start}
@media(min-width:1000px){
  .collection{grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:clamp(2.5rem,4vw,4rem)}

  /* PLACED, NOT AUTO-PLACED.
     Auto-placement puts the results in whichever track is free, so for as long
     as the filter panel is not yet in flow the results take the 272px filter
     track and every card is laid out a quarter of its real width. When the
     panel joins, the results jump to the 982px track and the whole page
     reflows: measured as a single 0.48 layout shift, four fifths of the
     page's entire CLS, on a 1440 desktop. Naming the tracks makes the results
     column 2 from the first layout, whatever the panel is doing. */
  .collection>.filters{grid-column:1;grid-row:1}
  .collection>section{grid-column:2;grid-row:1}
}

/* filter panel ----------------------------------------------- */
.filters{display:grid;gap:0}
@media(min-width:1000px){
  .filters{position:sticky;top:calc(var(--head-h) + var(--sp-6));max-height:calc(100svh - var(--head-h) - var(--sp-12));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}
.filters__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.filters__head h2{font-family:var(--sans);font-size:.6875rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase}
.filters__reset{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-ink);border-bottom:1px solid currentColor;padding:.5rem 0;min-height:44px;display:inline-flex;align-items:center}
.filters__reset:hover{color:var(--ink)}
.filters__reset[hidden]{display:none}

/* <fieldset> carries a UA border/margin/padding and a min-inline-size that
   breaks grid children — reset before styling. */
.fgroup{
  border:0;border-bottom:1px solid var(--line-2);
  margin:0;padding:var(--sp-5) 0;min-inline-size:0;
}
.fgroup:last-child{border-bottom:0}
.fgroup__legend{
  display:block;width:100%;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-mute);margin-bottom:var(--sp-4);
}
.fgroup__body{display:grid;gap:var(--sp-3)}

/* checkbox / radio rows -------------------------------------- */
.fopt{display:flex;align-items:center;gap:var(--sp-3);cursor:pointer;min-height:var(--tap);font-size:.9375rem;font-weight:300}
.fopt input{position:absolute;opacity:0;width:1px;height:1px}
.fopt__box{
  width:18px;height:18px;flex:none;border:1px solid var(--line);border-radius:var(--r);
  display:grid;place-items:center;background:var(--bone);
  transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.fopt__box svg{width:10px;height:10px;color:var(--bone);opacity:0;transition:opacity var(--dur-1) var(--ease)}
.fopt input:checked+.fopt__box{background:var(--ink);border-color:var(--ink)}
.fopt input:checked+.fopt__box svg{opacity:1}
.fopt input:focus-visible+.fopt__box{outline:2px solid var(--brass);outline-offset:3px}
.fopt__label{display:flex;align-items:center;gap:.5rem;min-width:0}
.fopt__label svg{width:var(--icon-sm);height:var(--icon-sm);flex:none;color:var(--brass)}
.fopt__count{margin-left:auto;font-size:.75rem;color:var(--text-mute);font-variant-numeric:tabular-nums}
.fopt:hover .fopt__box{border-color:var(--ink)}
.fopt.is-empty{opacity:.42}
.fopt.is-empty input{pointer-events:none}

/* numeric stepper rows --------------------------------------- */
.fstep{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:var(--tap)}
.fstep__label{font-size:.9375rem;font-weight:300}

/* mobile filter sheet ---------------------------------------- */
.filterbar{display:flex;gap:var(--sp-3);align-items:center;margin-bottom:var(--sp-5)}
@media(min-width:1000px){.filterbar{display:none}}
.filterbar .btn{flex:1}
.filterbar__count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding-inline:.35rem;border-radius:var(--r-pill);
  background:var(--brass);color:#fff;font-size:.6875rem;font-variant-numeric:tabular-nums;
}
@media(max-width:999px){
  /* Sheet. Closed state is `display:none` and the open state uses an
     ANIMATION rather than a transition: display:block + animation runs
     immediately with no start-value flush, so focus() is never rejected
     the way a transitioned `visibility` would reject it. */
  /* THE HEADER IS TALLER THAN THE CONSTANT SAYS.
     --head-solid is 104px, declared once and never true again: the real header
     is 206px at 390px wide, because the topbar is expanded and a translated nav
     wraps to more lines than English does. The header is fixed at z-index 200
     and this sheet is 190, so everything this padding failed to clear sits
     UNDER the header, unclickable. core.js measures the header and publishes
     --head-actual for exactly this; .page-offset already uses it. */
  .filters{
    position:fixed;inset:0;z-index:190;background:var(--bone);
    padding:calc(var(--head-actual, var(--head-solid)) + var(--sp-5)) var(--gutter) 6rem;
    overflow-y:auto;overscroll-behavior:contain;
    display:none;
  }
  .filters.is-open{display:block;animation:sheet-in var(--dur-3) var(--ease)}
  .filters__apply{
    position:fixed;left:0;right:0;bottom:0;padding:var(--sp-4) var(--gutter);
    padding-bottom:calc(var(--sp-4) + env(safe-area-inset-bottom,0px));
    background:var(--bone);border-top:1px solid var(--line);display:flex;gap:var(--sp-3);
  }
  .filters__apply .btn{flex:1}
}
@keyframes sheet-in{from{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:none}}
@media(min-width:1000px){.filters__apply{display:none}}
/* An empty panel must never render: the groups are built by collection.js */
.no-js .filters,.no-js .filterbar,.no-js .toolbar__sort,.no-js .pagination{display:none}
/* Sheet-only. `display` is declared here (not in a min-width query) because
   media queries add no specificity and a later rule would win. */
.filters__close{display:none}
@media(max-width:999px){
  /* Absolutely positioned, so it escaped the sheet's padding and landed at
     y=16 — inside the fixed header's band, behind it at every one of its five
     hit points. The only way out of the filter sheet was the Apply button at
     the other end of the screen. It belongs below the header, where the sheet's
     own content starts. */
  .filters__close{
    position:absolute;top:calc(var(--head-actual, var(--head-solid)) + var(--sp-2));
    right:var(--gutter);
    width:44px;height:44px;display:grid;place-items:center;color:var(--text);
  }
}

/* results toolbar -------------------------------------------- */
.toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);
  padding-bottom:var(--sp-5);margin-bottom:var(--stack-sm);border-bottom:1px solid var(--line);
}
.toolbar__count{font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
.toolbar__count b{color:var(--text);font-weight:400;font-variant-numeric:tabular-nums}
.toolbar__sort{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3)}
.toolbar__sort label{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-mute)}
.toolbar__sort select{
  appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237C5E38' stroke-width='1.2'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right .9rem center/11px 7px;
  padding:.6rem 2.2rem .6rem .9rem;min-height:var(--control);font-size:.875rem;cursor:pointer;
}
.toolbar__sort select:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* active filter pills ---------------------------------------- */
.active-filters{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--stack-sm)}
.active-filters:empty{display:none}

/* results grid ----------------------------------------------- */
.grid-collection{display:grid;gap:var(--grid-gap-row) var(--grid-gap)}
@media(min-width:660px){.grid-collection{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.grid-collection{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1240px){.grid-collection{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grid-collection[aria-busy="true"]{opacity:.45;transition:opacity var(--dur-1) var(--ease)}

/* pagination -------------------------------------------------- */
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--sp-2);margin-top:var(--stack-md)}
.pagination__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.pagination a,.pagination span{
  min-width:var(--control);min-height:var(--control);
  display:inline-flex;align-items:center;justify-content:center;
  padding-inline:.75rem;border:1px solid var(--line);border-radius:var(--r);
  font-size:.875rem;font-variant-numeric:tabular-nums;
  transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.pagination a:hover{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.pagination [aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.pagination .is-disabled{opacity:.35;pointer-events:none}
.pagination__gap{border:0;min-width:auto;padding-inline:.25rem;color:var(--text-mute)}

.result-note{margin-top:var(--sp-5);text-align:center;font-size:.8125rem;color:var(--text-mute)}

/* no-JS notice ------------------------------------------------ */
.nojs-note{
  display:none;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bone-2);
  padding:var(--sp-4) var(--sp-5);font-size:.875rem;color:var(--text-mute);margin-bottom:var(--stack-sm);
}
.no-js .nojs-note,.nojs-note.is-shown{display:block}

/* ── account menu ──────────────────────────────────────────────────────────
   The one bridge between the guest site and the operations portal. Signed out
  it stays out of the header; signed in it offers only the workspaces the
  server authorised. */

.mr-account { position: relative; display: inline-flex; }

.mr-account__button {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 40px; padding: .3rem .6rem;
  background: transparent; border: 1px solid var(--line, #e3ded4);
  border-radius: 999px; cursor: pointer; font: inherit; font-size: .82rem;
  color: inherit;
}
.mr-account__button:hover { border-color: var(--brass, #a9853f); }

.mr-account__icon {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--ink, #1c1917); color: var(--bone, #faf6ee);
  font-size: .74rem; font-weight: 700; line-height: 1;
}

.mr-account__menu {
  position: absolute; right: 0; top: calc(100% + .45rem); z-index: 60;
  min-width: 232px; padding: .35rem;
  background: #fff; border: 1px solid var(--line, #e3ded4);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.14);
}
.mr-account__menu[hidden] { display: none; }

.mr-account__who {
  margin: 0; padding: .5rem .6rem .55rem;
  border-bottom: 1px solid var(--line, #e3ded4);
  font-size: .76rem; color: var(--text-mute, #6b6660);
}
.mr-account__who strong { color: var(--text, #1c1917); font-size: .86rem; }

.mr-account__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .55rem .6rem; min-height: 44px;
  border-radius: 8px; text-decoration: none;
  color: var(--text, #1c1917); font-size: .87rem;
}
.mr-account__menu a:hover { background: var(--surface-2, #f7f5f1); }

.mr-account__badge {
  background: #8f2f2f; color: #fff; border-radius: 999px;
  font-size: .68rem; font-weight: 700; padding: .05rem .38rem; min-width: 18px; text-align: center;
}

/* The label is the first thing to go when space is tight; the avatar keeps the
   control recognisable and the accessible name stays intact either way. */
@media (max-width: 900px) {
  .mr-account__label { display: none; }
  .mr-account__button { padding: .3rem; border-color: transparent; }
}

@media (max-width: 420px) {
  .mr-account__menu { right: -.4rem; min-width: min(268px, calc(100vw - 1.6rem)); }
}

/* MOBILE-FIRST LEGIBILITY FLOOR --------------------------------------------
 *
 * Two label styles compute to 10px (.625rem), which is below comfortable
 * reading size on a phone. Raised to 11px on narrow viewports only, so desktop
 * typography is unchanged. Uppercase tracked labels at 10px are legible on a
 * 27-inch display and not in one hand on a bus.
 *
 * Deliberately NOT solved by hiding the text: these carry property counts and
 * status tags a guest uses to choose. */
@media (max-width: 599px) {
  .hood__count, .res__tag { font-size: .6875rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE-FIRST GUEST EXPERIENCE
   ═══════════════════════════════════════════════════════════════════════════
   The First Revision rejected the phone experience as a desktop layout poured
   into a narrow column, and the measurements agreed: the mobile header stood
   at 206px against desktop's 122px — the small screen was paying MORE for
   chrome than the large one — with 102px of that spent on a language pill and
   a currency pill. The booking form existed but sat below the fold, under six
   lines of introduction, so the first screen of a booking application asked
   the guest to configure the site and read an essay before it offered them a
   room.

   Everything here is scoped below 900px. Desktop composition is untouched.
   Nothing is hidden that a guest needs — the language and currency controls
   move into the drawer, and the brand copy moves below the booking module
   rather than away.
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 899px) {

  /* ── header: a logo, and a way in ──────────────────────────────────────
     Two elements, one row. The utility controls are not deleted, they are
     relocated to the drawer, where a control that is used once per visit
     belongs — rather than occupying the most valuable 102px on the device. */
  /* The toolbar stays, but only the language control does — see the
     LANGUAGE IN THE CLOSED MOBILE HEADER block below, which selects what
     survives. Currency, account and the header CTA move to the drawer. */

  .brand__logo { height: 40px; width: auto; }

  header .nav__tools { margin-inline-start: auto; }

  .burger {
    inline-size: var(--tap, 44px);
    block-size: var(--tap, 44px);
    min-inline-size: 44px;
    min-block-size: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .burger span { inline-size: 22px; block-size: 2px; }

  /* ── hero: brand, promise, and the booking module ──────────────────────
     display:contents lets the copy block's children become siblings of the
     search form, so the form can sit directly under the headline. Without it
     the form can only move above or below the entire copy block, and neither
     produces a sensible reading order. */
  .hero__copy { display: contents; }

  .hero__in {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .hero__in .eyebrow      { order: 1; margin-bottom: 0; }
  .hero__in .h-hero       { order: 2; margin: 0; }
  .hero__in > div:has(#search) { order: 3; }
  .hero__in .hero__acts   { order: 4; }
  .hero__in .hero__sub    { order: 5; }
  .hero__in .hero__highlights { order: 6; }

  /* A phone headline should command the screen without owning it.
     1.12, not 1.06: at 1.06 the line box was shorter than the type it holds, so
     the headline reported scrollHeight past clientHeight at 320, 390 and 768 —
     "A quieter way to stay" is set in a display serif and its q and y descend
     below the box and get cut. Measured at ratio 1.06 in English, German and
     Spanish, at every width below 1440. The site's largest words are the last
     place to lose a few pixels of leading. */
  .h-hero { font-size: clamp(2rem, 10.5vw, 2.75rem); line-height: 1.12; }
  .hero__sub { font-size: 1rem; line-height: 1.55; }
  .eyebrow { font-size: 0.6875rem; letter-spacing: 0.14em; }

  /* ── the booking module: WHERE / WHEN / WHO ────────────────────────────
     One card, stacked, every control at least a thumb tall. The fields were
     already here; what was missing was the promotion to first-class. */
  .search {
    background: rgba(12, 20, 28, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    padding: 0.9rem;
  }
  .search__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .search__grid > .field:first-child { grid-column: 1 / -1; }
  .search__grid > .search__submit,
  .search__grid > .search__error { grid-column: 1 / -1; }

  .field__ctrl,
  .guests__trigger {
    min-block-size: 48px;
    font-size: 1rem;          /* 16px stops iOS Safari zooming the page on focus */
  }
  .search__submit .btn { min-block-size: 52px; font-size: 1rem; letter-spacing: 0.08em; }

  /* ── secondary actions read as secondary ───────────────────────────────
     Two full-width buttons of equal weight under the headline was the reason
     nothing looked primary. */
  .hero__acts { display: flex; gap: 0.5rem; }
  .hero__acts .btn { flex: 1; min-block-size: 44px; font-size: 0.8125rem; padding-inline: 0.75rem; }

  .hero__highlights { font-size: 0.8125rem; line-height: 1.5; }

  /* ── section rhythm ────────────────────────────────────────────────────
     Desktop section padding on a 320px screen is what turned this page into
     15,000px of scrolling. */
  section { padding-block: clamp(2rem, 7vw, 3rem); }
}

/* ── property cards: the action must look like an action ─────────────────
   "View property" was 11px uppercase text with a hairline underline — the
   primary call to action on a results card, styled as a caption. The First
   Revision reported it as hard to find, and a guest should never have to work
   out which piece of small text is clickable.
   Promoted to a bordered control in the existing brass palette. Deliberately
   NOT recoloured to a generic blue or green: prominence is the requirement,
   and the brand already has a colour for actions. */
.res__cta {
  font-size: 0.75rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  min-height: var(--tap, 44px);
  justify-content: center;
  transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast);
}
.res:hover .res__cta,
.res__cta:hover,
.res__cta:focus-visible {
  background: var(--brass-ink, currentColor);
  border-color: transparent;
  color: #fff;
}

@media (max-width: 899px) {
  /* Full width on a phone: an edge-to-edge target cannot be missed, and it
     gives the card a clear bottom edge. */
  .res__cta { display: flex; width: 100%; font-size: 0.8125rem; letter-spacing: 0.12em; }
}

/* ── mobile header height, corrected ─────────────────────────────────────
   Hiding the utility toolbar removed its 102px but left --head-h reserving
   desktop chrome, so the header still stood at 122px with the logo and the
   hamburger drifting to opposite corners of an over-tall box. A phone header
   should be one row of one thumb's height. */
@media (max-width: 899px) {
  .nav {
    min-height: 0;
    gap: 1rem;
    padding-block: 0.5rem;
    align-items: center;
  }
  .site-head.is-solid .nav { min-height: 0; }

  /* The booking card: Guests was orphaned at half width beside empty space,
     and the destination label sat a long way from its control. */
  .search__grid > .field.guests { grid-column: 1 / -1; }
  .search .field { display: flex; flex-direction: column; gap: 0.35rem; }
  .search .field__label { margin: 0; }

  /* Labels on a dark glass card were rendering at the desktop's low contrast,
     which is a legibility problem outdoors on a phone rather than a taste one. */
  .search .field__label,
  .search .guests__trigger .field__label { color: rgba(250, 247, 241, 0.92); }
  .search .guests__value { color: inherit; }
}

/* The header row was wrapping: the brand and the tools each took a line, which
   is where the remaining height was going. One row, and the tools keep their
   intrinsic width so the logo cannot push them down. */
@media (max-width: 899px) {
  .nav { flex-wrap: nowrap; }
  .nav .brand { flex: 0 0 auto; }
  .nav__tools { flex: 0 0 auto; gap: 0.5rem; }
}

/* ── booking card contrast, corrected after looking at it ────────────────
   Two faults the viewport tests could not see, because neither overflows.
   The destination <select> was rendering dark ink on a transparent background
   over a dark glass card — effectively invisible, while the date inputs beside
   it sat on white. And my own label rule had lightened the Guests label, which
   lives INSIDE the white control, so it went white on white.
   Labels on the card are light; controls are white surfaces with dark ink, and
   anything inside a control follows the control. */
@media (max-width: 899px) {
  .search select.field__ctrl {
    background-color: rgba(255, 255, 255, 0.96);
    color: #18201c;
    -webkit-appearance: none;
    appearance: none;
    padding-inline: 0.85rem;
    padding-inline-end: 2.25rem;
    border-radius: 10px;
  }
  .search .guests__trigger .field__label,
  .search .guests__trigger .guests__value { color: #18201c; }
  .search .guests__trigger { padding: 0.5rem 0.85rem; text-align: start; }
}

/* ── 320px, the screen everything must survive ───────────────────────────
   Side-by-side date inputs clip their own placeholder at this width — the
   control renders "mm," and the guest cannot see the format they are being
   asked for. A clipped control is a failure, so the pair goes single-column
   below 380px rather than being shrunk further.
   The rest is rhythm: at 568px tall, every gap spent above the button decides
   whether CHECK AVAILABILITY is reachable without scrolling. */
@media (max-width: 344px) {
  .search__grid { grid-template-columns: 1fr; gap: 0.5rem; }
  .search { padding: 0.75rem; }
  .search .field__label { font-size: 0.6875rem; }
  .field__ctrl, .guests__trigger { min-block-size: 46px; }
  .search__submit .btn { min-block-size: 48px; }

  .hero__in { gap: 0.6rem; }
  .h-hero { font-size: 1.85rem; }
  .eyebrow { font-size: 0.625rem; }

  /* The float sat over the Guests control on a 320px card. */
  .mrw { width: 2.5rem; height: 2.5rem; }
}

/* Paired date inputs were truncating their own format hint to "mm/dd" on a
   390px card: the guest could not see that a year was expected. Trimming the
   control's inner padding buys the ~24px the placeholder needs, without
   dropping below the 16px that stops iOS zooming the page on focus. */
@media (min-width: 345px) and (max-width: 899px) {
  .search input[type="date"].field__ctrl { padding-inline: 0.5rem; }
}

/* ── LANGUAGE IN THE CLOSED MOBILE HEADER ────────────────────────────────
 * Owner requirement: a guest must reach language without opening the menu.
 * The mobile-first pass moved the whole utility toolbar into the drawer to
 * reclaim 102px of header; that was right for currency and the account menu
 * and wrong for language, which is the one control a guest may need before
 * they can read anything else.
 * Language returns to the header as a compact control; currency and account
 * stay in the drawer. Header stays one row.        [ LOGO ]  [ 🌐 ]  [ ☰ ] */
@media (max-width: 899px) {
  /* 44px, not 40px: every control in this toolbar is a tap target, and the
     component contract is one consistent height across the row. */
  .utility-toolbar { display: flex; gap: 0.35rem; --utility-control-height: 44px; }
  /* Currency and the account menu stay in the drawer. */
  .utility-toolbar > [data-mr-currency-switcher],
  .utility-toolbar > .mr-account { display: none; }

  /* ── THE BOOKING CTA COMES BACK ────────────────────────────────────────
   * Section 18 removed the mobile booking bar and recorded that the header
   * CTA would be shown at every width instead, because the bar had been the
   * only persistent booking call to action on a phone. This block was written
   * later and hid `.nav__cta` again, which quietly restored exactly the gap
   * that note was written to prevent: below 900px a guest had no booking
   * affordance in the header at all, only inside the drawer.
   *
   * It fits without costing a row. The second row was never about the CTA's
   * width — a 44px icon wrapped too. It came from `flex: 1 1 7rem` on the
   * language control inside a wrapping toolbar, which reserved a 7rem basis
   * and pushed the next child down. Letting the toolbar hold one line and the
   * language control size to its content seats both controls plus the burger
   * in 271px of the 294px available at 320, with the header still 66px. */
  .utility-toolbar { flex-wrap: nowrap; }
  .utility-toolbar > .nav__cta { display: inline-flex; }
  .nav__cta { white-space: nowrap; }

  /* "Check availability" fits at 390 in English and overflows the header in
     Dutch (246px), Portuguese (210px), French (200px) and Italian (181px)
     against roughly 175px of room. Measuring only English is what let that
     through the first time. The short label fits in all eleven locales with
     32px to spare in the worst of them, Dutch "Beschikbaarheid". */
  .nav__cta-long { display: none; }
  .nav__cta-short { display: inline; }
  /* The glyph only appears below 360; see that block for why. */
  .nav__cta { position: relative; }

  .utility-toolbar > [data-mr-locale-switcher] { display: flex; align-items: center; flex: 0 1 auto; }
  .utility-toolbar [data-mr-locale-switcher] select,
  .utility-toolbar [data-mr-locale-switcher] button {
    min-block-size: 44px;
    min-inline-size: 44px;
    font-size: 0.75rem;
    padding-inline: 0.5rem;
    max-inline-size: 7.5rem;   /* long endonyms stay on one line */
    text-overflow: ellipsis;
  }
}

/* The label is the point of the control, so it is kept and set smaller rather
   than traded for an icon a guest has to decode. */
@media (max-width: 599px) {
  .nav__cta { font-size: 0.68rem; padding-inline: 0.6rem; }
}

/* Above the drawer breakpoint the full wording is the call to action. */
@media (min-width: 900px) {
  .nav__cta-long { display: inline; }
  .nav__cta-short { display: none; }
}

/* ── BELOW 420px NO LOCALE'S WORDING FITS, AND SAYING SO IS THE FIX ──────
 * The row is the logo, the language control, the booking CTA and the burger.
 * Because the body hides horizontal overflow, an over-wide row does not
 * scroll — it pushes the MENU BUTTON off the right edge, silently. Measured
 * against the viewport rather than against the nav, which is what hid this:
 * Dutch "Beschikbaarheid" put the burger 31px off at 360, 16px at 375 and
 * still 1px off at 390.
 *
 * Three candidate labels were measured in all eleven locales. The worst case
 * of each needs a 404px viewport ("Beschikbaarheid"), 408px ("Vérifier les
 * dates") or 368px ("Rechercher") — none fits a 320-390 phone, and shrinking
 * type does not close a 48px gap at 320.
 *
 * So the CTA keeps its place in the row and shows the glyph here. The short
 * label stays in the accessibility tree rather than being removed, so the link
 * is announced as "Availability" and is not an unnamed icon. The wording
 * returns at 420, where the longest locale clears by 16px. */
@media (max-width: 419px) {
  /* 6.5rem, not 5.25rem. The narrower cap was written when this block stopped
     at 320px, where the logo, a language control and a burger really is all
     that fits. Raising the glyph breakpoint to 419 brought the cap with it into
     widths that have 68px to 124px of free space between the logo and the
     tools, and it truncated the control's own value: Dutch "Nederlands" needs
     98px and had 84. A <select> does not report that as overflow — it just
     renders less of the word — which is why it took measuring the text against
     the box to see it. 6.5rem clears the longest endonym and still leaves 48px
     spare at 320. */
  .utility-toolbar [data-mr-locale-switcher] select,
  .utility-toolbar [data-mr-locale-switcher] button { max-inline-size: 6.5rem; padding-inline: 0.35rem; }

  .nav__cta { padding-inline: 0.5rem; min-inline-size: 2.75rem; justify-content: center; }
  .nav__cta-icon { display: block; }
  .nav__cta-short {
    position: absolute; inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px; overflow: hidden; white-space: nowrap;
    clip: rect(0, 0, 0, 0); border: 0;
  }
}

/* ── THE GUEST SELECTOR MUST OPEN INSIDE THE VIEWPORT ────────────────────
 * Measured on the deployed site: the panel spanned 554-950px in an 844px
 * viewport at 390 wide, and 643-1039 at 320 — up to half of it below the fold,
 * with the stepper controls unreachable without scrolling the page underneath
 * an open panel. The tester read that as the dropdown rendering "behind"
 * content; nothing was stacking above it (z-index 30 wins every probe). The
 * fault was extent, not order.
 * The panel now cannot exceed the space beneath its trigger and scrolls
 * internally when the content is taller. */
@media (max-width: 899px) {
  .guests__pop {
    /* A height ceiling alone did not fix this. The panel opens at y=560 on a
       390x844 phone, so only 284px of screen remains beneath it — capping the
       height at 60vh (506px) never bound. The fault is where it opens, not how
       tall it is.

       On a phone it becomes a bottom sheet: anchored to the bottom edge, full
       width, above the page, scrolling internally. That is the native pattern
       for a control this size and it cannot run off-screen by construction.
       Desktop keeps the anchored dropdown, which has always fitted. */
    position: fixed;
    inset-inline: 0;
    inset-block-start: auto;
    inset-block-end: 0;
    inline-size: 100%;
    max-block-size: min(70dvh, 30rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-start-start-radius: 16px;
    border-start-end-radius: 16px;
    padding-block-end: max(env(safe-area-inset-bottom, 0px), 1rem);
    /* Above the floating WhatsApp control (900) and every page element. */
    z-index: 1000;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.38);
  }
}

/* ── THE ACTUAL LAYERING ROOT CAUSE ──────────────────────────────────────
 * With the panel finally inside the viewport, every probe came back BLOCKED by
 * the form's own fields and buttons — the defect the tester reported, now
 * genuinely reproduced.
 *
 * It is not a z-index ordering problem. `.search` carries backdrop-filter from
 * the glass-card treatment, and backdrop-filter creates a STACKING CONTEXT.
 * That traps the sheet's z-index:1000 inside the card, where it competes only
 * with its siblings — and position:fixed does not escape it either, because a
 * filtered ancestor becomes the containing block. Raising the number could
 * never have worked, which is why the earlier fix attempts did not.
 *
 * While the sheet is open the card stops creating that context. The glass
 * treatment returns the moment it closes, so the design is unchanged in every
 * state a guest sees without the panel open. */
@media (max-width: 899px) {
  .search:has(.guests__pop:not([hidden])) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* Kept legible without the blur behind it. */
    background: rgba(12, 20, 28, 0.94);
  }
}