/* ==========================================================================
   Le Bosphorus — design system
   Ported from the approved "Bosphorus Hotels v2" Claude Design document.
   Cream ground, olive ink, antique gold. Cormorant Garamond for display,
   Jost for interface, Noto Naskh Arabic when the document direction is RTL.
   ========================================================================== */

:root {
  --bg:        #F7F3EC;
  --panel:     #FBF8F2;
  --surface:   #ffffff;
  --line:      #E4DBCB;
  --ink:       #1C2B25;
  --muted:     #6E7269;
  --gold:      #8C6A3C;
  --gold-dark: #6F5229;
  --gold-lite: #C9A96A;
  --dark:      #12241E;
  --cream:     #F3EEE4;
  --good:      #3F7D5C;
  --bad:       #9B3B32;

  /* One Latin family carries both voices. With no serif/sans contrast left to
     do the work, the difference between a headline and a caption is weight and
     tracking — see the display rules further down. The Noto fallbacks are what
     stop a Cyrillic, CJK, Thai or Korean page from landing on whatever the
     operating system feels like: Plus Jakarta Sans covers Latin only. */
  --display: 'Plus Jakarta Sans', 'Noto Sans Arabic', var(--script), system-ui, sans-serif;
  --sans:    'Plus Jakarta Sans', 'Noto Sans Arabic', var(--script), system-ui, sans-serif;
  --arabic:  'Noto Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif;
  /* Named so the per-language Noto that layout.php loads is actually reached.
     Listing them all costs nothing: a family the browser has not downloaded is
     simply skipped. */
  --script: 'Noto Sans', 'Noto Sans Thai', 'Noto Sans JP', 'Noto Sans KR',
            'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Devanagari', 'Noto Sans Bengali';

  --gut: clamp(20px, 5vw, 56px);
  --sec: clamp(58px, 7vw, 104px);
  --sec-tight: clamp(44px, 5vw, 68px);
  --max: 1240px;
}

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

html, body { margin: 0; padding: 0; background: var(--bg); }

/* Double-tap zoom off, everything else on. "manipulation" is auto minus the
   double-tap, so panning, flicking and dragging a sheet are untouched — and
   unlike refusing the second tap in script, a click still fires, which the
   guest counter depends on. The pinch is refused in site.js; Safari only lets
   it be refused there. */
html { touch-action: manipulation; }

body {
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
  min-height: 100vh;
}

[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] button { font-family: var(--arabic); }
[dir="rtl"] * { letter-spacing: 0 !important; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-dark); }
::selection { background: var(--gold); color: #fff; }

img, video { max-width: 100%; }

input, select, button, textarea { font-family: inherit; color: inherit; font-size: inherit; }
input::placeholder, textarea::placeholder { color: rgba(28, 43, 37, .34); }
input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(140, 106, 60, .35); border-radius: 9px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@keyframes bsUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes bsIn { from { opacity: 0; } to { opacity: 1; } }

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--dark); color: var(--cream); padding: 12px 20px;
}
.skip:focus { inset-inline-start: 0; }

/* ---------- Layout ---------------------------------------------------- */

.container { max-width: var(--max); margin: 0 auto; }
.section { padding: var(--sec) var(--gut); }
.section--tight { padding: var(--sec-tight) var(--gut); }
.section--pad-top-0 { padding-top: 0; }
.section--panel { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--panel-top { background: var(--panel); border-bottom: 1px solid var(--line); }
.section--dark { background: var(--dark); color: var(--cream); }
.section--dark p { color: rgba(243, 238, 228, .66); }

.grid { display: grid; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: clamp(18px, 2vw, 26px); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: clamp(18px, 2vw, 26px); }
.items-center { align-items: center; }
.items-start { align-items: start; }
.items-end { align-items: end; }
.center { text-align: center; }
.mt0 { margin-top: 0; }

/* ---------- Type ------------------------------------------------------ */

.kicker {
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); display: block;
}
.kicker--lite { color: var(--gold-lite); }

.h-hero, .h-page, .h-sec, .h-card, .h-sub {
  font-family: var(--display); font-weight: 300; color: var(--ink); margin: 0;
}
/* A light grotesque at display size sits looser than the serif it replaced, and
   it has no serifs to give the line texture. Tracking tightens as the type
   grows, and the smaller display sizes take a little more weight so they do not
   read as thin body copy. */
.h-hero { font-size: clamp(38px, 5.4vw, 72px); line-height: 1.04; letter-spacing: -.028em; }
.h-page { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.06; margin-top: 14px; letter-spacing: -.024em; }
.h-sec  { font-size: clamp(29px, 3.4vw, 44px); line-height: 1.14; margin-top: 16px; letter-spacing: -.02em; }
.h-card { font-size: 24px; line-height: 1.25; letter-spacing: -.014em; font-weight: 400; }
.h-sub  { font-size: 27px; letter-spacing: -.016em; font-weight: 400; }

/* Arabic display never takes negative tracking — the joins do the work, and
   tightening them damages the letterforms. */
[dir="rtl"] .h-hero, [dir="rtl"] .h-page, [dir="rtl"] .h-sec,
[dir="rtl"] .h-card, [dir="rtl"] .h-sub { letter-spacing: normal; }
.section--dark .h-page, .section--dark .h-sec, .section--dark .h-hero { color: var(--cream); }

.lead { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.lead--tight { font-size: 14.5px; line-height: 1.7; }
.lead--wide { max-width: 620px; }
.muted { color: var(--muted); }
.gold { color: var(--gold); }
.price { font-family: var(--display); font-weight: 300; color: var(--ink); }
.price--lg { font-size: 27px; }
.price--md { font-size: 22px; }
.eyebrow {
  display: block; font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}

.bullet { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--ink); }
.bullet::before {
  content: ''; width: 4px; height: 4px; background: var(--gold);
  display: block; flex: none; transform: translateY(-2px);
}

/* ---------- Buttons --------------------------------------------------- */

.btn, .btn-outline, .btn-ghost {
  display: inline-block; text-align: center; cursor: pointer;
  padding: 15px 30px; font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; border: 0; line-height: 1.2;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn { background: var(--gold); color: #fff; }
.btn:hover { background: var(--gold-dark); color: #fff; }
.btn--lite { background: var(--gold-lite); color: var(--dark); }
.btn--lite:hover { background: #d8bd85; color: var(--dark); }
.btn--block { width: 100%; }
.btn--sm { padding: 11px 18px; }

.btn-outline { background: none; border: 1px solid var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.btn-ghost { background: none; border: 1px solid rgba(243, 238, 228, .4); color: var(--cream); }
.btn-ghost:hover { border-color: var(--gold-lite); color: var(--gold-lite); }

.btn-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.btn-link:hover { color: var(--gold-dark); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-row--center { justify-content: center; }
.btn[disabled], .btn-outline[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Masthead --------------------------------------------------
   Two tiers on a desktop, one on a phone.

   The upper rail states what the group is and carries every small utility
   link, which is the only reason the main bar can stay down to three things:
   who you are, which hotel, and Book. Past the hero the rail folds away and
   the bar condenses, so the page keeps its full height while scrolling.
   ---------------------------------------------------------------------- */

.mast {
  position: sticky; top: 0; z-index: 80;
  background: var(--panel); border-bottom: 1px solid var(--line);
}

/* --- tier 1: orientation and utilities ------------------------------- */

.mast__rail {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--gut); height: 34px; overflow: hidden;
  border-bottom: 1px solid var(--line-2);
  transition: height .24s ease, opacity .2s ease;
}
.mast__claim {
  margin: 0; font-size: 12px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.mast__util { display: flex; align-items: center; gap: 20px; flex: none; }
.mast__util a { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mast__util a:hover { color: var(--gold); }
.mast__lang {
  letter-spacing: .1em; text-transform: uppercase; font-size: 11px;
  color: var(--gold-dark) !important; border-inline-start: 1px solid var(--line);
  padding-inline-start: 20px;
}

/* --- tier 2: the main bar -------------------------------------------- */

.mast__bar {
  display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px);
  padding: 0 var(--gut); height: 72px;
  transition: height .24s ease;
}
.mast__brand { flex: none; display: flex; align-items: center; }
.mast__brand img { height: 38px; width: auto; display: block; transition: height .24s ease; }

.mast__nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); margin-inline-start: auto; }
.mast__link {
  display: inline-flex; align-items: center; gap: 6px; height: 40px;
  font-size: 14px; color: var(--ink); white-space: nowrap; position: relative;
}
.mast__link:hover { color: var(--gold); }
.mast__link::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 6px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: center;
  transition: transform .2s ease;
}
.mast__link.is-active::after, .mast__link:hover::after { transform: scaleX(1); }
/* Physical sides, not logical ones: a disclosure caret points down in every
   writing direction, so it must not flip with the text. */
.mast__caret {
  width: 5px; height: 5px; flex: none; margin-top: -3px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}

.mast__end { display: flex; align-items: center; gap: 14px; flex: none; }
.mast__acct { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); white-space: nowrap; }
.mast__acct:hover { color: var(--gold); }
.mast__mark {
  width: 30px; height: 30px; flex: none; border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center; position: relative;
  font-family: var(--display); font-size: 15px; color: var(--gold); line-height: 1;
}
/* Signed out there is no initial to show, so the frame carries the one glyph
   nobody has to learn: head and shoulders. On a phone the label beside it is
   hidden, so this mark has to say "account" on its own. */
.mast__mark:empty::before {
  content: ''; position: absolute; top: 7px; width: 8px; height: 8px;
  border: 1px solid var(--gold); border-radius: 50%;
}
.mast__mark:empty::after {
  content: ''; position: absolute; top: 18px; width: 16px; height: 7px;
  border: 1px solid var(--gold); border-bottom: 0; border-radius: 8px 8px 0 0;
}
.mast__book { flex: none; }

.mast__burger {
  display: none; background: none; border: 1px solid var(--line);
  width: 44px; height: 44px; flex: none; cursor: pointer;
  flex-direction: column; gap: 4px; align-items: center; justify-content: center;
}
.mast__burger span { display: block; width: 16px; height: 1px; background: var(--ink); }
.mast__burger:hover { border-color: var(--gold); }

/* --- condensed state, set by site.js past the first screenful --------- */

.mast.is-tight .mast__rail { height: 0; opacity: 0; border-bottom: 0; }
.mast.is-tight .mast__bar { height: 58px; }
.mast.is-tight .mast__brand img { height: 30px; }

@media (prefers-reduced-motion: reduce) {
  .mast__rail, .mast__bar, .mast__brand img, .mast__link::after, .mast__caret { transition: none; }
}

/* --- the hotels flyout ------------------------------------------------
   Four properties one click from every page, each carrying the walk to the
   Haram — the datum the whole group is sold on. Opens on hover and on focus
   so it works without JavaScript; site.js adds click for touch. */

.mast__has { position: relative; }
.flyout {
  position: absolute; top: 100%; inset-inline-start: 50%; transform: translateX(-50%) translateY(6px);
  width: min(680px, 92vw); background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(16,31,26,.5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
[dir="rtl"] .flyout { transform: translateX(50%) translateY(6px); }
.mast__has:hover .flyout,
.mast__has.is-open .flyout {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
[dir="rtl"] .mast__has:hover .flyout,
[dir="rtl"] .mast__has.is-open .flyout { transform: translateX(50%) translateY(0); }

/* Keyboard opening is CSS's job only when there is no JavaScript to do it.
   :focus-within cannot be cancelled from script, so leaving it on would make
   Escape do nothing while the trigger still holds focus. site.js marks the
   document and takes over with .is-open, which it can also take away. */
html:not(.js) .mast__has:focus-within .flyout {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
[dir="rtl"] html:not(.js) .mast__has:focus-within .flyout { transform: translateX(50%) translateY(0); }
.mast__has.is-open .mast__caret, .mast__has:hover .mast__caret { transform: rotate(-135deg); margin-top: 2px; }

.flyout__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flyout__h {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 14px 16px; color: var(--ink); border-bottom: 1px solid var(--line-2);
}
.flyout__h:nth-child(odd) { border-inline-end: 1px solid var(--line-2); }
.flyout__h:hover { background: var(--panel); color: var(--ink); }
.flyout__h img { width: 96px; height: 72px; object-fit: cover; display: block; background: var(--line); grid-row: span 2; }
.flyout__t { font-size: 15px; line-height: 1.25; align-self: end; }
/* Inside the flyout the walk is a quiet datum under the name, not the boxed
   chip it becomes on a property card. */
.flyout__h .walk {
  align-self: start; justify-self: start; margin-top: 5px;
  background: none; border: 0; padding: 0; font-size: 12px;
}
.flyout__h .walk__dot { width: 11px; height: 11px; }
.flyout__all {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark);
  background: var(--panel);
}
.flyout__all:hover { color: var(--gold); background: var(--line-2); }

/* --- phone: one bar, the drawer does the rest ------------------------ */

@media (max-width: 1060px) {
  .mast__rail { display: none; }
  .mast__nav, .mast__acctl { display: none; }
  .mast__burger { display: flex; }
  .mast__bar { height: 56px; gap: 10px; }
  /* Logo centred between the two controls: the phone reads as an app,
     not as a desktop header with its middle cut out. */
  .mast__brand { margin-inline: auto; min-height: 44px; }
  .mast__brand img { height: 26px; }
  .mast__end { gap: 8px; }
  .mast__acct { min-height: 44px; }
  .mast.is-tight .mast__bar { height: 56px; }
  .mast.is-tight .mast__brand img { height: 26px; }
}

@media (max-width: 400px) {
  .mast__book { padding: 12px 14px; font-size: 10.5px; letter-spacing: .1em; }
  .mast__brand img { height: 22px; }
}

/* ---------- Hero ------------------------------------------------------ */

.hero {
  position: relative; height: min(86vh, 760px); min-height: 480px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; background: var(--dark);
}
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,20,16,.5) 0%, rgba(10,20,16,.12) 34%, rgba(10,20,16,.55) 78%, rgba(10,20,16,.85) 100%);
}
.hero__inner {
  position: relative; padding: 0 var(--gut) clamp(74px, 8vw, 104px);
  max-width: 900px; color: #fff; animation: bsUp .9s ease both;
}
.hero__inner .h-hero { color: #fff; margin: 0 0 20px; }
.hero__inner p { max-width: 560px; margin: 0 0 30px; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.75; }
.hero__rule { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.hero__rule span:first-child { width: 38px; height: 1px; background: var(--gold-lite); }
.hero__rule span:last-child { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-lite); }

/* ---------- Search bar ------------------------------------------------ */

.search-wrap { padding: 0 var(--gut); margin-top: clamp(-40px, -4vw, -56px); position: relative; z-index: 20; }
.search {
  background: var(--surface); border: 1px solid var(--line);
  padding: 26px clamp(20px, 2.4vw, 30px); display: grid;
  grid-template-columns: 1.5fr 1fr 1fr .9fr .9fr auto; gap: 22px; align-items: end;
  box-shadow: 0 24px 60px -34px rgba(28, 43, 37, .35);
}
.search--inline { padding: 22px 24px; grid-template-columns: 1.4fr 1fr 1fr .9fr auto; margin-bottom: 26px; box-shadow: none; }

/* The date-range picker merges check-in and check-out into one control, so the
   grid drops a column once site.js has enhanced the form. */
.search.has-dp { grid-template-columns: 1.35fr 1.7fr .85fr .85fr auto; }
.search--inline.has-dp { grid-template-columns: 1.3fr 1.7fr .8fr auto; }

.field-label { display: block; }
.field {
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 7px 0; font-size: 15px; color: var(--ink); outline: none;
}
.field:focus { border-bottom-color: var(--gold); }
select.field { appearance: none; cursor: pointer; }
textarea.field { resize: vertical; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field-grid--gap { gap: 20px; }
.field-span { grid-column: 1 / -1; }

/* ---------- Custom dropdown ------------------------------------------- */
/* The native <select> stays in the form and remains the submitted value;
   these classes only appear once site.js has enhanced it. */

.sr-only {
  /* Pinned to the corner of its container, not left at whatever static
     position it happened to have. Once the replaced controls were moved to the
     end of the form to keep iOS from opening its own pickers, an unpositioned
     absolute box sat past the right edge and gave the booking page fifty
     pixels of sideways scroll. */
  position: absolute; inset-inline-start: 0; inset-block-start: 0;
  width: 1px; height: 1px; padding: 0; margin: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.dd { position: relative; }
.dd__btn {
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 6px 0; font-size: 15px; color: var(--ink); text-align: start; cursor: pointer;
  display: flex; align-items: center; gap: 10px; min-height: 34px;
}
.dd__btn:hover { border-bottom-color: var(--gold); }
.dd__btn::after {
  content: ''; margin-inline-start: auto; flex: none; width: 6px; height: 6px;
  border-inline-end: 1px solid var(--muted); border-bottom: 1px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .16s ease;
}
.dd__btn[aria-expanded="true"] { border-bottom-color: var(--gold); }
.dd__btn[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-3px, -3px); }
.dd__btn img { width: 34px; height: 26px; object-fit: cover; flex: none; }
.dd__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dd__menu {
  position: absolute; z-index: 60; top: calc(100% + 8px); inset-inline-start: 0;
  min-width: 100%; width: max-content; max-width: min(94vw, 380px);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 26px 60px -30px rgba(28, 43, 37, .5);
  padding: 6px; max-height: 320px; overflow-y: auto;
}
.dd__opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 10px; background: none; border: 0; text-align: start;
  cursor: pointer; font-size: 14.5px; color: var(--ink); line-height: 1.4;
}
.dd__opt img { width: 46px; height: 36px; object-fit: cover; flex: none; background: var(--line); }
.dd__opt:hover, .dd__opt.is-active { background: var(--panel); }
.dd__opt[aria-selected="true"] { color: var(--gold); }
.dd__opt[aria-selected="true"] .dd__opt-note { color: var(--gold); }
.dd__opt-note { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- Custom date range picker ---------------------------------- */

.dp { position: relative; }
.dp__pop {
  position: absolute; z-index: 70; top: calc(100% + 8px); inset-inline-start: 0;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 26px 60px -30px rgba(28, 43, 37, .5); padding: 18px;
}
.dp__pop[data-align="end"] { inset-inline-start: auto; inset-inline-end: 0; }
.dp__months { display: flex; gap: 26px; }
.dp__cal { width: 244px; }
.dp__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dp__month { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--ink); }
.dp__nav {
  background: none; border: 1px solid var(--line); width: 28px; height: 28px;
  cursor: pointer; color: var(--ink); line-height: 1; flex: none; font-size: 14px;
}
.dp__nav:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.dp__nav:disabled { opacity: .3; cursor: default; }
.dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dp__dow {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-align: center; padding: 4px 0 8px;
}
.dp__day {
  height: 34px; border: 0; background: none; cursor: pointer;
  font-size: 13.5px; color: var(--ink); font-family: inherit; padding: 0;
}
.dp__day:hover:not(:disabled) { background: rgba(140, 106, 60, .14); color: var(--gold-dark); }
.dp__day:disabled { color: rgba(28, 43, 37, .22); cursor: default; }
.dp__day.is-range { background: rgba(140, 106, 60, .10); }
.dp__day.is-start, .dp__day.is-end { background: var(--gold); color: #fff; }
.dp__day.is-start:hover, .dp__day.is-end:hover { background: var(--gold-dark); color: #fff; }
.dp__day.is-today { box-shadow: inset 0 -2px 0 var(--gold-lite); }
.dp__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.dp__hint { font-size: 12.5px; color: var(--muted); }
.dp__done {
  background: var(--gold); color: #fff; border: 0; padding: 9px 18px; cursor: pointer;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-family: inherit;
}
.dp__done:hover { background: var(--gold-dark); }

@media (max-width: 720px) {
  .dp__months { flex-direction: column; gap: 18px; }
  .dp__pop { inset-inline-start: 0; inset-inline-end: 0; max-height: 70vh; overflow-y: auto; }
  .dp__cal { width: 100%; }
}

/* ---------- Selected-hotel imagery ------------------------------------ */

.hotel-hero {
  position: relative; overflow: hidden; background: var(--line);
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.hotel-hero img {
  width: 100%; height: clamp(170px, 22vw, 260px); object-fit: cover; display: block;
  transition: opacity .35s ease;
}
.hotel-hero.is-swapping img { opacity: .25; }
.hotel-hero__cap {
  position: absolute; inset-inline: 0; bottom: 0; padding: 26px clamp(18px, 3vw, 30px) 18px;
  background: linear-gradient(180deg, rgba(10, 20, 16, 0), rgba(10, 20, 16, .82));
  color: #fff;
}
.hotel-hero__name { font-family: var(--display); font-weight: 300; font-size: clamp(21px, 2.4vw, 28px); }
.hotel-hero__meta { font-size: 12.5px; color: rgba(255, 255, 255, .8); margin-top: 3px; }

.summary-thumb { width: 100%; height: 122px; object-fit: cover; display: block; margin-bottom: 16px; background: var(--line); }

/* ---------- Payment method ------------------------------------------- */

.paymethod {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--line); padding: 18px 20px; background: var(--panel);
}
.paymethod.is-selected { border-color: var(--gold); background: rgba(140, 106, 60, .06); }
.paymethod__mark {
  flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 3px;
  border: 1px solid var(--gold); position: relative;
}
.paymethod.is-selected .paymethod__mark::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold);
}
.paymethod__title { font-size: 15.5px; color: var(--ink); }

/* ---------- Cards ----------------------------------------------------- */

.panel { background: var(--surface); border: 1px solid var(--line); }
.panel--pad { padding: clamp(24px, 3vw, 38px); }

.hcard { background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; }
.hcard img { width: 100%; height: 216px; object-fit: cover; display: block; background: var(--line); }
.hcard__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.hcard__dist { font-size: 13px; color: var(--gold); letter-spacing: .04em; margin-bottom: 12px; }
.hcard__foot {
  margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; padding-top: 16px; border-top: 1px solid var(--line);
}

.hrow { background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-columns: .95fr 1.05fr; }
.hrow img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; background: var(--line); }
.hrow__body { padding: clamp(24px, 3vw, 42px); }
.hrow__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--line);
}

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 26px; margin: 34px 0 30px; }
.stat__v { font-family: var(--display); font-weight: 300; font-size: 34px; color: var(--gold); line-height: 1; }
.stat__l { font-size: 13.5px; color: var(--muted); margin-top: 6px; }

.promise__t { font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--gold); margin-bottom: 10px; }

.tier-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); gap: 1px; background: rgba(243, 238, 228, .16); }
.tier-strip > div { background: var(--dark); padding: 26px 24px 28px; }
.tier-strip__n { font-family: var(--display); font-weight: 400; font-size: 26px; color: var(--gold-lite); margin-bottom: 6px; }
.tier-strip__r { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 238, 228, .45); margin-bottom: 16px; }

.tier-card { background: var(--surface); border: 1px solid var(--line); padding: 28px 24px; display: flex; flex-direction: column; }
.tier-card__n { font-family: var(--display); font-weight: 400; font-size: 29px; color: var(--ink); }
.tier-card__r { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 8px 0 2px; }
.tier-card__b { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.tier-card__perks { display: grid; gap: 9px; border-top: 1px solid var(--line); padding-top: 18px; }

.cell-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cell-grid > div { background: var(--surface); padding: 24px 22px; }
.cell__n { font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--ink); margin-bottom: 6px; }
.cell__note { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.cell__cost { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

.rowline { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.rowline span:first-child { color: var(--ink); }
.rowline span:last-child { color: var(--muted); }
.rowline--rule { border-bottom: 1px solid var(--line); padding-bottom: 9px; }

/* ---------- Hotel detail ---------------------------------------------- */

.detail-hero { width: 100%; height: clamp(300px, 46vw, 580px); object-fit: cover; display: block; background: var(--line); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 150px)); gap: 10px; margin-top: -42px; position: relative; }
.thumbs a { padding: 0; border: 3px solid #fff; background: none; display: block; }
.thumbs img { width: 100%; height: 88px; object-fit: cover; display: block; background: var(--line); }
.thumbs a.is-active { border-color: var(--gold-lite); }

.detail-grid { display: grid; grid-template-columns: 1.55fr .95fr; gap: clamp(30px, 4vw, 60px); align-items: start; }
.room-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.room-list > div {
  background: var(--surface); padding: 20px 22px; display: flex;
  justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap;
}
.room-list__n { font-family: var(--display); font-weight: 400; font-size: 21px; color: var(--ink); }
.room-list__m { font-size: 13px; color: var(--muted); margin-top: 4px; }
.room-list__p { font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--gold); white-space: nowrap; }
.amenity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 11px 26px; }

.aside-card { background: var(--surface); border: 1px solid var(--line); padding: 26px 24px; position: sticky; top: 96px; }

/* ---------- Booking --------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 14px; margin-top: 26px; }
.step {
  background: none; border: 0; border-top: 2px solid rgba(28, 43, 37, .28);
  padding: 12px 0 0; text-align: start; display: block; color: rgba(28, 43, 37, .28);
}
.step.is-active { border-top-color: var(--gold); color: var(--gold); }
.step.is-done { border-top-color: var(--gold-lite); color: var(--gold-lite); }
.step__n { font-size: 11px; letter-spacing: .2em; }
.step__l { font-size: 14px; margin-top: 4px; color: var(--ink); }

.booking-grid { display: grid; grid-template-columns: 1.6fr .9fr; gap: clamp(28px, 4vw, 52px); align-items: start; }
.room-offer { background: var(--surface); border: 1px solid var(--line); }
.room-offer__inner { display: grid; grid-template-columns: .7fr 1.3fr; }
.room-offer img { width: 100%; height: 100%; min-height: 190px; object-fit: cover; display: block; background: var(--line); }
.room-offer__body { padding: 24px; }
.room-offer__meta { font-size: 13px; color: var(--gold); margin-bottom: 10px; }
.rate-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.rate {
  background: var(--surface); padding: 14px 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.rate__l { font-size: 14.5px; color: var(--ink); }
.rate__n { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.rate__right { display: flex; align-items: center; gap: 16px; }
.rate__p { font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--ink); text-align: end; }
.rate__pts { font-size: 11px; color: var(--gold); text-align: end; }

.notice {
  background: var(--panel); border: 1px solid var(--line); padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 26px; font-size: 14.5px; color: var(--ink);
}
.notice--error { border-color: var(--bad); color: var(--bad); background: #fdf4f3; }
.notice--ok { border-color: var(--good); color: var(--good); background: #f2f8f4; }
.notice--soldout { display: block; text-align: center; color: var(--muted); }

.summary-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.summary-line span:first-child { color: var(--muted); }
.summary-line span:last-child { color: var(--ink); }
.summary-total {
  border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.pill {
  display: inline-block; border: 1px solid var(--line); padding: 6px 12px;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.pill-row { display: flex; gap: 9px; flex-wrap: wrap; }
.confirm-ref { font-family: var(--display); font-weight: 300; font-size: 30px; color: var(--gold); margin: 22px 0 6px; }

/* ---------- Account --------------------------------------------------- */

.acct-head { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(24px, 4vw, 52px); align-items: end; }
.acct-points { border: 1px solid rgba(243, 238, 228, .22); padding: 24px; }
.acct-points__n { font-family: var(--display); font-weight: 300; font-size: 44px; line-height: 1; color: var(--gold-lite); }
.acct-bar { height: 1px; background: rgba(243, 238, 228, .2); margin: 18px 0; }
.acct-bar span { display: block; height: 1px; background: var(--gold-lite); }

.res-card { background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-columns: 180px 1fr; }
.res-card img { width: 100%; height: 100%; min-height: 130px; object-fit: cover; display: block; background: var(--line); }
.res-card__body { padding: 20px 22px; }
.res-card__status { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.res-card__h { font-family: var(--display); font-weight: 400; font-size: 21px; color: var(--ink); margin-bottom: 4px; }
.res-card__m { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.res-card__foot { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 13px; align-items: center; }

/* ---------- Auth forms ------------------------------------------------ */

.auth-wrap { max-width: 460px; margin: 0 auto; }
.auth-card { background: var(--surface); border: 1px solid var(--line); padding: clamp(26px, 4vw, 40px); }
.form-col { display: grid; gap: 20px; }

/* ---------- App mock -------------------------------------------------- */

.phone {
  width: min(300px, 82vw); height: 548px; border: 9px solid #24382F; border-radius: 44px;
  background: var(--dark); overflow: hidden; position: relative; display: flex;
  flex-direction: column; box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .7);
}
.phone__top { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.phone__top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.phone__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,16,.35), rgba(10,20,16,.95)); }
.phone__brand { position: absolute; top: 24px; left: 0; right: 0; text-align: center; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-lite); }
.phone__hi { position: relative; padding: 0 22px 20px; }
.phone__card { flex: none; margin: 0 14px; background: #1A2E27; border: 1px solid rgba(201, 169, 106, .25); padding: 16px 18px; }
.phone__tabs {
  flex: none; margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  padding: 16px 10px 22px; border-top: 1px solid rgba(243, 238, 228, .14); background: #0D1A15;
  font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: rgba(243, 238, 228, .45);
}
.store-btn { display: flex; align-items: center; gap: 12px; border: 1px solid rgba(243, 238, 228, .36); padding: 12px 22px; color: var(--cream); }
.store-btn:hover { border-color: var(--gold-lite); color: var(--cream); }

/* ---------- Footer ---------------------------------------------------- */

.footer { background: var(--dark); color: rgba(243, 238, 228, .72); padding: clamp(48px, 6vw, 80px) var(--gut) 34px; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: clamp(26px, 3vw, 44px); }
.footer__logo { height: 42px; width: auto; display: block; margin-bottom: 18px; }
.footer__head { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lite); margin-bottom: 16px; }
.footer__links { display: grid; gap: 10px; font-size: 14px; }
.footer__links a { color: rgba(243, 238, 228, .72); }
.footer__links a:hover { color: var(--gold-lite); }
.footer__base {
  border-top: 1px solid rgba(243, 238, 228, .16); margin-top: clamp(30px, 4vw, 52px);
  padding-top: 22px; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
.footer__base span { font-size: 12.5px; color: rgba(243, 238, 228, .45); }
.footer .pill { border-color: rgba(243, 238, 228, .22); color: rgba(243, 238, 228, .5); padding: 5px 10px; font-size: 9.5px; }

/* ---------- Utility --------------------------------------------------- */

.stack-gap { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.gap-14 { gap: 14px; }
.gap-26 { gap: 26px; }
.mb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 3vw, 44px); }
.img-cover { width: 100%; object-fit: cover; display: block; }
.img-tall { height: clamp(320px, 44vw, 560px); }
.img-mid { height: clamp(280px, 38vw, 470px); }
.img-wide { height: clamp(240px, 32vw, 420px); }
.img-half { height: clamp(200px, 26vw, 300px); }
.img-short { height: clamp(150px, 19vw, 220px); }
.hide { display: none !important; }

/* ---------- Responsive ------------------------------------------------ */

@media (max-width: 1060px) {
  .grid-2, .detail-grid, .booking-grid, .acct-head,
  .hrow, .room-offer__inner, .res-card, .footer__grid { grid-template-columns: 1fr; }
  .search, .search--inline { grid-template-columns: 1fr; }
  .search .btn { width: 100%; }
  .aside-card { position: static; }
  .hrow img, .room-offer img, .res-card img { height: clamp(200px, 42vw, 300px); min-height: 0; }
  .thumbs { grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; }
  .thumbs a { scroll-snap-align: start; min-width: 120px; }
  .field-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .rate { align-items: flex-start; }
  .rate__right { width: 100%; justify-content: space-between; }
  .btn, .btn-outline, .btn-ghost { padding: 14px 22px; }
}

@media print {
  .mast, .footer, .btn, .btn-outline, .btn-link { display: none !important; }
  body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   PROPERTY LAYER — the hotel-group product surface
   --------------------------------------------------------------------------
   Benchmarked against Bonvoy/Honors for structure, but the two devices that
   carry the identity are ours: the mashrabiya lattice lifted from the carved
   window screens in the hotels own photography, and walking distance to the
   Haram treated as the primary fact on every card, because for a Madinah
   pilgrim it outranks price.
   ========================================================================== */

:root {
  --ink-900: #14251E;
  --line-2: #EDE7DB;
  --shadow-card: 0 1px 2px rgba(20, 37, 30, .04), 0 12px 32px -18px rgba(20, 37, 30, .28);
  --shadow-lift: 0 2px 4px rgba(20, 37, 30, .05), 0 26px 56px -24px rgba(20, 37, 30, .38);
}

/* The lattice: two crossed hairline grids on 45 degrees, the way a carved
   screen reads from across a room. Used as ground only, never as foreground. */
.lattice {
  background-color: var(--panel);
  background-image:
    repeating-linear-gradient(45deg,  rgba(140,106,60,.16) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(140,106,60,.16) 0 1px, transparent 1px 13px);
}
.lattice--dark {
  background-color: var(--dark);
  background-image:
    repeating-linear-gradient(45deg,  rgba(201,169,106,.18) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(-45deg, rgba(201,169,106,.18) 0 1px, transparent 1px 15px);
}

/* ---------- Section rhythm ------------------------------------------- */

.band { padding: clamp(56px, 6.5vw, 96px) var(--gut); }
.band--tight { padding: clamp(34px, 4vw, 56px) var(--gut); }
.band--panel { background: var(--panel); border-block: 1px solid var(--line); }
.band--dark { background: var(--dark); color: var(--cream); }
.wrap { max-width: var(--max); margin: 0 auto; }

.band-head { margin-bottom: clamp(26px, 3vw, 42px); }
.band-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.band-head h2 { margin: 12px 0 0; }
.band-head p { margin: 14px 0 0; max-width: 62ch; }

/* ---------- Walking distance: the signature datum --------------------- */

.walk {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .06em; color: var(--gold-dark);
  background: rgba(140, 106, 60, .07);
  border: 1px solid rgba(140, 106, 60, .22);
  padding: 5px 11px 5px 8px;
}
.walk__dot {
  width: 14px; height: 14px; flex: none;
  background:
    repeating-linear-gradient(45deg,  rgba(140,106,60,.55) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(140,106,60,.55) 0 1px, transparent 1px 5px);
  outline: 1px solid rgba(140, 106, 60, .5);
  outline-offset: -1px;
}
.walk--light { color: var(--gold-lite); background: rgba(201, 169, 106, .12); border-color: rgba(201, 169, 106, .32); }
.walk--light .walk__dot {
  background-image:
    repeating-linear-gradient(45deg,  rgba(201,169,106,.7) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(201,169,106,.7) 0 1px, transparent 1px 5px);
  outline-color: rgba(201, 169, 106, .6);
}

/* ---------- Property card -------------------------------------------- */

.props { display: grid; gap: clamp(18px, 2vw, 26px); }
.props--grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.prop {
  background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
  transition: box-shadow .22s ease;
}
.prop:hover { box-shadow: var(--shadow-lift); }
.prop__media { position: relative; overflow: hidden; background: var(--line); }
.prop__media img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.prop:hover .prop__media img { transform: scale(1.035); }
.prop__count {
  position: absolute; inset-inline-end: 12px; bottom: 12px;
  background: rgba(16, 31, 26, .74); color: var(--cream);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px;
}
.prop__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; gap: 12px; }
.prop__name { font-family: var(--display); font-weight: 400; font-size: 25px; line-height: 1.15; color: var(--ink); margin: 0; }
.prop__facts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.prop__blurb { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.prop__feat { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.prop__feat li { display: flex; gap: 9px; align-items: baseline; font-size: 13.5px; color: var(--ink); }
.prop__feat li::before { content: ''; width: 3px; height: 3px; background: var(--gold); flex: none; transform: translateY(-3px); }
.prop__foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.prop__price small { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.prop__price b { font-family: var(--display); font-weight: 400; font-size: 27px; color: var(--ink); }
.prop__price span { font-size: 12px; color: var(--muted); }
.prop__cta { display: flex; gap: 9px; flex-wrap: wrap; }

/* Wide variant for the hotels index: image beside the body. */
.prop--wide { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
.prop--wide .prop__media img { height: 100%; aspect-ratio: auto; min-height: 300px; }
.prop--wide .prop__body { padding: clamp(24px, 2.6vw, 36px); }

/* ---------- Gallery grid --------------------------------------------- */

.gal { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; }
.gal a { display: block; position: relative; overflow: hidden; background: var(--line); }
.gal a:first-child { grid-row: span 2; }
.gal img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.gal a:hover img { transform: scale(1.04); }
.gal a:first-child img { min-height: clamp(280px, 34vw, 460px); }
.gal a:not(:first-child) img { min-height: clamp(136px, 16.6vw, 227px); }
.gal__more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(16, 31, 26, .62); color: var(--cream);
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
}

.gal-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(132px, 1fr); gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; }
.gal-strip a { scroll-snap-align: start; }
.gal-strip img { width: 100%; height: 92px; object-fit: cover; display: block; background: var(--line); }
.gal-strip a.is-active { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ---------- Detail layout -------------------------------------------- */

.detail { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, .95fr); gap: clamp(28px, 3.6vw, 56px); align-items: start; }
.rail { position: sticky; top: 92px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.rail__head { padding: 20px 22px; border-bottom: 1px solid var(--line); }
.rail__body { padding: 20px 22px 22px; }
.rail__price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rail__price b { font-family: var(--display); font-weight: 300; font-size: 30px; color: var(--ink); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0; }
.facts > div { background: var(--surface); padding: 16px 18px; }
.facts dt { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 5px; }
.facts dd { margin: 0; font-size: 15px; color: var(--ink); }

/* ---------- Room + rate ---------------------------------------------- */

.room { background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.room__top { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
.room__top img { width: 100%; height: 100%; min-height: 210px; object-fit: cover; display: block; background: var(--line); }
.room__intro { padding: 22px 24px; }
.room__name { font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--ink); margin: 0 0 6px; }
.room__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--gold-dark); margin-bottom: 10px; }
.room__rates { border-top: 1px solid var(--line); }
.rate2 {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px; align-items: center; padding: 15px 24px;
  border-bottom: 1px solid var(--line-2);
}
.rate2:last-child { border-bottom: 0; }
.rate2:hover { background: var(--panel); }
.rate2--member { background: rgba(140, 106, 60, .05); }
.rate2--member:hover { background: rgba(140, 106, 60, .09); }
.rate2__name { font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rate2__tag {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--gold); padding: 3px 7px;
}
.rate2__incl { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.rate2__incl span { display: inline-flex; align-items: baseline; gap: 6px; }
.rate2__incl span::before { content: ''; width: 3px; height: 3px; background: var(--gold); transform: translateY(-3px); }
.rate2__free { color: var(--good); }
.rate2__price { text-align: end; white-space: nowrap; }
.rate2__price b { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--ink); display: block; }
.rate2__price small { font-size: 11.5px; color: var(--muted); display: block; }
.rate2__pts { font-size: 11px; color: var(--gold); display: block; margin-top: 2px; }

/* ---------- Account dashboard ---------------------------------------- */

.acct2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 3.4vw, 52px); align-items: end; }
.acct2__points { font-family: var(--display); font-weight: 300; font-size: clamp(48px, 6vw, 76px); line-height: .95; color: var(--gold-lite); }
.acct2__label { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 238, 228, .5); }

.tier { margin-top: 26px; }
.tier__track { position: relative; height: 3px; background: rgba(243, 238, 228, .18); }
.tier__fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--gold-lite); }
.tier__marks { display: flex; justify-content: space-between; margin-top: 10px; }
.tier__mark { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(243, 238, 228, .42); }
.tier__mark.is-reached { color: var(--gold-lite); }
.tier__note { margin-top: 12px; font-size: 13.5px; color: rgba(243, 238, 228, .7); }

.stay { display: grid; grid-template-columns: 168px minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); }
.stay img { width: 100%; height: 100%; min-height: 132px; object-fit: cover; display: block; background: var(--line); }
.stay__body { padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; }
.stay__status { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.stay__status.is-past { color: var(--muted); }
.stay__status.is-cancelled { color: var(--bad); }
.stay__name { display: block; font-family: var(--display); font-weight: 400; font-size: 21px; color: var(--ink); }
a.stay__name:hover { color: var(--gold); }
.stay__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; }

.perks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.perks li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: var(--ink); }
.perks li::before { content: ''; width: 3px; height: 3px; background: var(--gold); flex: none; transform: translateY(-3px); }

/* ---------- Responsive ------------------------------------------------ */

@media (max-width: 1060px) {
  .detail, .acct2, .prop--wide, .room__top, .stay { grid-template-columns: 1fr; }
  .rail { position: static; }
  .prop--wide .prop__media img { min-height: clamp(200px, 44vw, 300px); }
  .gal { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .gal a:first-child { grid-column: span 2; grid-row: auto; }
  .rate2 { grid-template-columns: 1fr; gap: 12px; }
  .rate2__price { text-align: start; }
  .stay img { height: clamp(180px, 40vw, 240px); }
}

/* ==========================================================================
   TYPE DISCIPLINE — measured against Bonvoy and Hilton
   --------------------------------------------------------------------------
   Marriott Bonvoy pairs Aldine 721 (serif, Light only) with Swiss 721, and is
   explicit about the division of labour: the serif signals heritage on hero
   headlines, while the sans "keeps room numbers, menus, and booking screens
   unambiguous". Hilton runs the same logic with Loew.
   Our Cormorant Garamond + Jost maps onto that pairing, so the rule here is
   about WHERE each face is allowed: serif for identity and headline, sans for
   every functional surface a guest reads to make a decision.
   Sources: Mother Design (Bonvoy identity); Hilton brand materials.
   ========================================================================== */

:root { --max: 1360px; }        /* Rotana runs 1600; 1360 keeps 12-image galleries generous without stranding text */

/* Every figure a guest compares must align in a column. */
.price, .prop__price b, .rail__price b, .rate2__price b, .acct2__points,
.facts dd, .summary-line span, .summary-total .price, .stay__foot span { font-variant-numeric: tabular-nums; }

/* --- Functional surfaces move to the sans ---------------------------- */

.rate2__price b,
.rate2__name,
.room__name,
.summary-line span,
.stay__name,
.facts dd {
  font-family: var(--sans);
}
.rate2__price b { font-weight: 400; font-size: 20px; letter-spacing: -.01em; }
.room__name { font-weight: 400; font-size: 19px; letter-spacing: .01em; }
.stay__name { font-weight: 400; font-size: 17px; }

/* Totals stay large but sans, so the number reads as a number. */
.summary-total .price { font-family: var(--sans); font-weight: 400; font-size: 24px; letter-spacing: -.015em; }

/* --- Serif keeps identity and headline ------------------------------- */
/* .h-hero, .h-page, .h-sec, .prop__name and the "from" price on marketing
   cards stay Cormorant: those are the heritage voice, not the transaction. */

.prop__price b { letter-spacing: -.01em; }

/* --- Eyebrow / label voice ------------------------------------------- */
/* One tracked, uppercase micro-label used consistently, the way both
   references label every field and section. */
.eyebrow, .kicker, .prop__price small, .acct2__label, .stay__status,
.rate2__tag, .tier__mark, .prop__count, .gal__more {
  font-family: var(--sans); font-weight: 400;
}

/* --- Buttons: one size system ---------------------------------------- */
.btn, .btn-outline, .btn-ghost { font-weight: 400; }

/* --- The connector ---------------------------------------------------- */
/* Bonvoy's identity hangs on a "connector" mark. Ours is the lattice seam:
   a single hairline that ties a section heading to its content. */
.seam { position: relative; padding-top: 18px; }
.seam::before {
  content: ''; position: absolute; top: 0; inset-inline-start: 0;
  width: 46px; height: 1px; background: var(--gold);
}

/* --- Density ---------------------------------------------------------- */
/* Booking screens read denser than marketing pages on both references. */
.rate2 { padding-block: 13px; }
.facts > div { padding: 14px 16px; }

/* ==========================================================================
   MOBILE — corrections driven by a measured audit at 390px
   --------------------------------------------------------------------------
   Every rule here fixes something the audit actually reported: horizontal
   overflow, a tap target under 44px, or text under 12px. Nothing speculative.
   ========================================================================== */

/* --- 1. The search grid must only widen on desktop -------------------- */
/* These were written after the max-width media query and were overriding the
   mobile stack, which is what pushed the home page 378px wide. Scoping them
   to a min-width query puts the cascade back the right way round. */
.search.has-dp, .search--inline.has-dp { grid-template-columns: 1fr; }

@media (min-width: 1061px) {
  .search.has-dp { grid-template-columns: 1.35fr 1.7fr .85fr .85fr auto; }
  .search--inline.has-dp { grid-template-columns: 1.3fr 1.7fr .8fr auto; }
}

/* --- 2. The date popover can never be wider than the screen ----------- */
.dp__pop { max-width: calc(100vw - 24px); box-sizing: border-box; }

@media (max-width: 720px) {
  /* Anchor it to the viewport rather than to a narrow grid cell. */
  .dp { position: static; }
  .dp__pop {
    position: fixed; inset-inline: 12px; inset-block-start: auto;
    bottom: 12px; top: auto; max-height: 76vh; overflow-y: auto; z-index: 120;
    box-shadow: 0 -18px 60px -20px rgba(20, 37, 30, .5);
  }
  .dp__cal { width: 100%; }
  .dp__day { height: 40px; }
  .dp__nav { width: 40px; height: 40px; }
}

/* --- 3. (The masthead sizes itself; see the Masthead block above.) ---- */

/* --- 4. Tap targets reach 44px --------------------------------------- */
@media (max-width: 1060px) {
  .mast__link { min-height: 44px; }
  .btn, .btn-outline, .btn-ghost { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
  .btn--sm { min-height: 44px; }
  .field { min-height: 44px; }
  select.field { min-height: 44px; }
  .dd__btn { min-height: 46px; }
  .btn-link { min-height: 40px; display: inline-flex; align-items: center; }
  .prop__count { min-height: 34px; display: inline-flex; align-items: center; }
  .gal-strip img { height: 74px; }
}

/* --- 5. No text below 12px on a phone -------------------------------- */
@media (max-width: 640px) {
  .kicker, .eyebrow, .prop__price small, .rate2__pts, .stay__status,
  .acct2__label, .tier__mark, .facts dt, .prop__count, .gal__more { font-size: 12px; }
  .rate2__incl { font-size: 13px; }
  .lead--tight { font-size: 15px; }
  .footer__base span { font-size: 13px; }
}

/* --- 6. Hero grows with its content ---------------------------------- */
@media (max-width: 860px) {
  .hero { height: auto; min-height: min(84vh, 620px); }
  .hero__inner { padding-block: 40px 56px; }
  .search-wrap { margin-top: -28px; }
}

/* --- 7. Two-column blocks that were pinned by inline styles ----------- */
/* apps.php and dining.php set grid-template-columns inline, which outranks a
   media query; these pages now use .split so they can stack. */
.split { display: grid; grid-template-columns: 1fr; gap: clamp(26px, 4vw, 56px); align-items: center; }
@media (min-width: 1061px) {
  .split--a { grid-template-columns: 1.05fr .95fr; }
  .split--b { grid-template-columns: 1.1fr .9fr; }
  .split--c { grid-template-columns: .9fr 1.1fr; }
  .split--d { grid-template-columns: 1fr .8fr; align-items: start; }
}

/* --- 8. The app mock never dictates page width ----------------------- */
.phone { max-width: 100%; }
@media (max-width: 640px) {
  .phone { width: min(280px, 88vw); height: 500px; }
  .phone__tabs { font-size: 9.5px; }
  .phone__brand { font-size: 11px; }
  .store-btn { flex: 1 1 auto; justify-content: center; }
}

/* --- 9. Comfortable rhythm on a phone -------------------------------- */
@media (max-width: 640px) {
  .band { padding: 44px var(--gut); }
  .band--tight { padding: 30px var(--gut); }
  .prop__body { padding: 18px 18px 20px; }
  .rate2 { padding: 14px 18px; }
  .room__intro { padding: 18px 18px; }
  .rail__head, .rail__body { padding: 18px; }
  .prop__cta { width: 100%; }
  .prop__cta .btn, .prop__cta .btn-outline { flex: 1 1 auto; }
  .prop__foot { gap: 16px; }
}

/* --- 10. Final measured corrections ---------------------------------- */
@media (max-width: 1060px) {
  /* Footer links measured 350x23; a thumb needs more than that. */
  .footer__links a { min-height: 42px; display: flex; align-items: center; }
  .footer__links { gap: 2px; }
  .prop__count { min-height: 40px; }
}
@media (max-width: 860px) {
  /* Hero content measured 16px taller than its box, so it was clipped. */
  .hero { min-height: min(84vh, 660px); }
}

@media (max-width: 1060px) {
  /* The WhatsApp line under the booking rail measured 21px high. */
  .rail__body a[href^="https://api.whatsapp"] { min-height: 42px; display: flex; align-items: center; justify-content: center; }
}

/* ==========================================================================
   MOBILE DRAWER — rebuilt
   --------------------------------------------------------------------------
   A hotel app's menu is not a list of links; it is where the guest finds out
   who they are signed in as, picks a property, and reaches reception. So the
   order here is: identity, hotels, sections, contact, and one pinned action.
   ========================================================================== */

.drawer {
  position: fixed; inset: 0; z-index: 120;
  background: var(--panel);
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
.drawer[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .drawer { animation: drawerIn .26s cubic-bezier(.22, .8, .3, 1) both; }
  @keyframes drawerIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* --- top bar --------------------------------------------------------- */
.drawer__bar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 12px var(--gut); border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.drawer__bar img { height: 28px; width: auto; display: block; }
.drawer__close {
  width: 44px; height: 44px; flex: none; background: none;
  border: 1px solid var(--line); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.drawer__close:hover { border-color: var(--gold); color: var(--gold); }

/* --- scrolling body -------------------------------------------------- */
.drawer__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* --- identity block -------------------------------------------------- */
.dmember {
  display: flex; align-items: center; gap: 14px;
  padding: 18px var(--gut); border-bottom: 1px solid var(--line);
  background-color: var(--surface);
  background-image:
    repeating-linear-gradient(45deg,  rgba(140,106,60,.10) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(140,106,60,.10) 0 1px, transparent 1px 13px);
  color: var(--ink);
}
.dmember__avatar {
  width: 46px; height: 46px; flex: none; border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 22px; color: var(--gold); background: var(--surface);
}
.dmember__who { min-width: 0; flex: 1; }
.dmember__name { font-family: var(--display); font-size: 20px; line-height: 1.15; }
.dmember__meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.dmember__go { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }

.dsignin { padding: 18px var(--gut); border-bottom: 1px solid var(--line); background: var(--surface); }
.dsignin__lead { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.dsignin__row { display: flex; gap: 10px; }
.dsignin__row > * { flex: 1 1 0; }

/* --- section label --------------------------------------------------- */
.drawer__label {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); padding: 20px var(--gut) 8px;
}

/* --- hotel shortcuts ------------------------------------------------- */
.dhotel {
  display: flex; align-items: center; gap: 13px; min-height: 62px;
  padding: 9px var(--gut); border-bottom: 1px solid var(--line-2); color: var(--ink);
}
.dhotel:hover, .dhotel:focus-visible { background: var(--surface); color: var(--ink); }
.dhotel img { width: 54px; height: 42px; object-fit: cover; flex: none; background: var(--line); }
.dhotel > span { min-width: 0; }
.dhotel__n { display: block; font-size: 15px; line-height: 1.25; }
.dhotel__d { display: block; font-size: 12px; color: var(--gold-dark); margin-top: 2px; }

/* --- primary navigation ---------------------------------------------- */
.dnav { display: flex; flex-direction: column; }
.dnav a {
  min-height: 56px; display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--gut); border-bottom: 1px solid var(--line-2);
  font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--ink);
}
.dnav a:hover, .dnav a:focus-visible { background: var(--surface); color: var(--gold-dark); }
.dnav a.is-active { color: var(--gold); }
.dnav a::after {
  content: ''; width: 7px; height: 7px; flex: none;
  border-inline-end: 1px solid var(--muted); border-block-end: 1px solid var(--muted);
  transform: rotate(-45deg);
}
[dir="rtl"] .dnav a::after { transform: rotate(135deg); }

/* --- contact + language ---------------------------------------------- */
.dfoot { padding: 20px var(--gut) 24px; display: grid; gap: 14px; }
.dcontact { display: grid; gap: 10px; }
.dcontact a { display: flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--ink); }
.dcontact a:hover { color: var(--gold); }
.dcontact span { color: var(--muted); font-size: 12.5px; }

.dlang { display: flex; border: 1px solid var(--line); }
.dlang a {
  flex: 1 1 0; min-height: 44px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; letter-spacing: .12em; color: var(--muted); background: var(--surface);
}
.dlang a.is-on { background: var(--gold); color: #fff; }

/* --- pinned action --------------------------------------------------- */
.drawer__cta {
  flex: none; padding: 14px var(--gut) calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--panel);
}
.drawer__cta .btn { width: 100%; }

/* The drawer only exists below the desktop breakpoint. */
@media (min-width: 1061px) { .drawer { display: none !important; } }

/* --- 11. Final tap-target pass --------------------------------------- */
@media (max-width: 1060px) {
  /* Contact page phone and email are display-sized links, still only ~28px tall. */
  .band a.price, .section a.price { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ==========================================================================
   THE RESERVATION DESK — a deliberately different environment
   --------------------------------------------------------------------------
   The marketing pages are cream and airy. From the moment a guest starts
   choosing a room the ground turns to the deep olive of the brand, panels
   float as warm cream, and the photography carries the page. It reads as
   "you are at the desk now", and it makes room photographs the brightest
   thing on screen, which is what the decision actually turns on.
   ========================================================================== */

.bk {
  background-color: var(--dark);
  background-image:
    repeating-linear-gradient(45deg,  rgba(201,169,106,.07) 0 1px, transparent 1px 17px),
    repeating-linear-gradient(-45deg, rgba(201,169,106,.07) 0 1px, transparent 1px 17px);
  color: var(--cream);
  min-height: 70vh;
  padding-bottom: clamp(40px, 6vw, 90px);
}

/* --- masthead + stepper ---------------------------------------------- */

.bk__head { padding: clamp(26px, 3.4vw, 44px) var(--gut) 0; }
.bk__wrap { max-width: var(--max); margin: 0 auto; }
.bk__kicker { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-lite); }
.bk__title {
  font-family: var(--display); font-weight: 300; color: var(--cream);
  font-size: clamp(30px, 4vw, 50px); line-height: 1.05; margin: 12px 0 0;
}

.steps2 { display: flex; gap: 2px; margin-top: clamp(22px, 2.6vw, 34px); }
.steps2 > * { flex: 1 1 0; padding: 12px 0 0; border-top: 2px solid rgba(243,238,228,.16); min-width: 0; }
.steps2 .is-active { border-top-color: var(--gold-lite); }
.steps2 .is-done { border-top-color: rgba(201,169,106,.55); }
.steps2 span { display: block; }
.steps2 .n { font-size: 10.5px; letter-spacing: .2em; color: rgba(243,238,228,.4); }
.steps2 .l { font-size: 13.5px; color: rgba(243,238,228,.62); margin-top: 3px; }
.steps2 .is-active .n, .steps2 .is-active .l { color: var(--gold-lite); }
.steps2 a.is-done .l { color: rgba(243,238,228,.85); }

/* --- the hotel you are booking --------------------------------------- */

.bkhotel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end;
  padding: clamp(20px, 2.4vw, 30px) 0 clamp(18px, 2vw, 26px);
  border-bottom: 1px solid rgba(243,238,228,.16);
}
.bkhotel__name { font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2.6vw, 30px); color: var(--cream); }
.bkhotel__meta { font-size: 13px; color: rgba(243,238,228,.6); margin-top: 5px; display: flex; gap: 8px 16px; flex-wrap: wrap; }
.bkhotel__strip { display: flex; gap: 5px; }
.bkhotel__strip img { width: 74px; height: 54px; object-fit: cover; display: block; background: #1d3b31; }
.bkhotel__strip a:last-child { position: relative; }
.bkhotel__more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(16,31,26,.66); color: var(--cream); font-size: 11px; letter-spacing: .1em;
}

/* --- layout ----------------------------------------------------------- */

.bk__grid {
  display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, .95fr);
  gap: clamp(22px, 2.8vw, 44px); align-items: start;
  padding: clamp(22px, 2.8vw, 36px) var(--gut) 0;
  max-width: calc(var(--max) + 2 * 56px); margin: 0 auto;
}

/* --- room card -------------------------------------------------------- */

.bkroom {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 20px 50px -28px rgba(0,0,0,.7);
  margin-bottom: clamp(16px, 2vw, 24px);
}
.bkroom__gal { display: flex; gap: 3px; overflow-x: auto; scroll-snap-type: x mandatory; background: var(--line); }
.bkroom__gal a { flex: 1 0 auto; min-width: 34%; }
.bkroom__gal a { scroll-snap-align: start; display: block; position: relative; }
.bkroom__gal img { width: 100%; height: clamp(148px, 17vw, 200px); object-fit: cover; display: block; background: var(--line); }
.bkroom__gal a:first-child { grid-column: span 1; }
.bkroom__count {
  position: absolute; inset-inline-end: 8px; bottom: 8px;
  background: rgba(16,31,26,.76); color: var(--cream);
  font-size: 10.5px; letter-spacing: .1em; padding: 4px 9px;
}
.bkroom__body { padding: 18px 22px 4px; }
.bkroom__name { font-size: 20px; color: var(--ink); letter-spacing: .01em; }
.bkroom__meta { display: flex; gap: 8px 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--gold-dark); margin: 6px 0 8px; }
.bkroom__desc { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0 0 14px; }
/* Scarcity. Only ever shown when the derived availability really is this low,
   so it reads as a warning rather than decoration. */
.bkroom__left {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .01em;
  color: var(--bad); background: rgba(155, 59, 50, .09);
  border: 1px solid rgba(155, 59, 50, .22);
  padding: 3px 9px; border-radius: 2px; white-space: nowrap;
}
.bkroom__left::before {
  content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--bad);
}

.bkrates { border-top: 1px solid var(--line); }
.bkrate {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center;
  padding: 14px 22px; border-bottom: 1px solid var(--line-2);
}
.bkrate:last-child { border-bottom: 0; }
.bkrate:hover { background: var(--panel); }
.bkrate--member { background: rgba(140,106,60,.055); }
.bkrate__n { font-size: 14.5px; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bkrate__tag { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--gold); padding: 3px 7px; }
.bkrate__i { display: flex; gap: 4px 14px; flex-wrap: wrap; margin-top: 5px; font-size: 12.5px; color: var(--muted); }
.bkrate__i b { font-weight: 400; color: var(--good); }
.bkrate__p { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bkrate__p b { display: block; font-size: 19px; color: var(--ink); font-weight: 400; letter-spacing: -.01em; }
.bkrate__p small { display: block; font-size: 11.5px; color: var(--muted); }

/* --- the two-part choice: room first, then rate ----------------------- */

.bksearch {
  background: var(--surface); padding: 16px 18px;
  margin-bottom: 16px; box-shadow: 0 20px 50px -28px rgba(0,0,0,.7);
}

/* A chosen room is marked by a gold rule down its leading edge — the same
   line language as the stepper above it, so "this is where you are" reads
   the same in both places. */
.bkroom.is-open { box-shadow: 0 24px 60px -26px rgba(0,0,0,.8); }
.bkroom.is-open .bkroom__body { border-inline-start: 2px solid var(--gold); padding-inline-start: 20px; }

.bkpick {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 22px 16px; border-top: 1px solid var(--line-2);
}
.bkpick form { display: flex; align-items: center; gap: 12px; }
.bkpick__p { font-variant-numeric: tabular-nums; }
.bkpick__p small { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bkpick__p b { font-size: 20px; font-weight: 400; color: var(--ink); letter-spacing: -.015em; }
.bkpick__on { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dark); }
.bkpick--off { display: block; text-align: center; color: var(--muted); font-size: 13.5px; padding: 16px 22px; }

.bkrates__h {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dark);
  padding: 16px 22px 10px;
}
.bkrate.is-picked { background: rgba(140,106,60,.1); }
.bkrate.is-picked .bkrate__n::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  background: var(--gold); margin-inline-end: 2px;
}
.bkrate__on {
  display: inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--gold-dark); padding: 9px 14px; white-space: nowrap;
}

/* Continue lives at the foot of the open card so the decision and the way
   forward are never more than a thumb apart. */
.bkgo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 22px; background: var(--panel); border-top: 1px solid var(--line);
}
.bkgo__t { display: flex; align-items: baseline; gap: 10px; }
.bkgo__t b { font-size: 22px; font-weight: 400; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }

/* --- summary rail ----------------------------------------------------- */

.bksum { background: var(--surface); color: var(--ink); position: sticky; top: 90px; box-shadow: 0 20px 50px -28px rgba(0,0,0,.7); }
.bksum img { width: 100%; height: 130px; object-fit: cover; display: block; background: var(--line); }
.bksum__b { padding: 18px 20px 20px; }
.bksum__h { font-family: var(--display); font-weight: 400; font-size: 20px; }
.bksum__d { font-size: 13px; color: var(--muted); margin-top: 3px; }
.bksum__rows { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; display: grid; gap: 8px; }
.bksum__r { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.bksum__r span:first-child { color: var(--muted); }
.bksum__t {
  border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.bksum__t b { font-size: 24px; font-weight: 400; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.bksum__pts { font-size: 12.5px; color: var(--gold); margin-top: 6px; }
.bksum__empty { font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }

/* --- cards on step 2 -------------------------------------------------- */

.bkcard { background: var(--surface); color: var(--ink); padding: clamp(20px, 2.4vw, 32px); margin-bottom: 16px; box-shadow: 0 20px 50px -28px rgba(0,0,0,.7); }
.bkcard__h { font-family: var(--display); font-weight: 400; font-size: 24px; margin: 0 0 4px; }
.bkcard__s { font-size: 13.5px; color: var(--muted); margin: 0 0 20px; }

.paycard { border: 1px solid var(--gold); background: rgba(140,106,60,.05); padding: 16px 18px; display: flex; gap: 13px; align-items: flex-start; }
.paycard__mark { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1px solid var(--gold); position: relative; margin-top: 2px; }
.paycard__mark::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold); }
.paycard__t { font-size: 15px; }
.paycard__d { font-size: 13.5px; color: var(--muted); margin: 5px 0 10px; }

/* --- step 3: the recap, then the payment card ------------------------- */

.bkcard--recap { padding-bottom: clamp(16px, 2vw, 22px); }
.recap { margin: 0 0 14px; display: grid; gap: 10px; }
.recap > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--line-2); padding-bottom: 10px;
}
.recap > div:last-child { border-bottom: 0; padding-bottom: 0; }
.recap dt { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0; }
.recap dd { margin: 0; font-size: 15px; color: var(--ink); text-align: end; min-width: 0; overflow-wrap: anywhere; }
.recap__ch { display: flex; gap: 22px; flex-wrap: wrap; }
.recap__ch .btn-link { display: inline-flex; align-items: center; min-height: 44px; }

/* Payment is the one card that is not made of paper. Inverting it marks the
   moment the reservation stops being a browse and becomes a commitment —
   and it is the only place the mashrabiya seal appears. */
.bkcard--pay {
  position: relative; overflow: hidden;
  background: var(--dark); color: var(--cream);
  border-top: 2px solid var(--gold);
}
.bkcard__seal {
  position: absolute; inset-block-start: -46px; inset-inline-end: -46px;
  width: 176px; height: 176px; pointer-events: none;
  background:
    repeating-linear-gradient(45deg,  rgba(201,169,106,.24) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(201,169,106,.24) 0 1px, transparent 1px 13px);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}
.bkcard--pay .bkcard__h { color: var(--cream); position: relative; }
.bkcard--pay .bkcard__s { color: rgba(243,238,228,.62); position: relative; }
.bkcard--pay .lead { color: rgba(243,238,228,.72); position: relative; }
.bkcard--pay .paycard {
  position: relative; background: rgba(201,169,106,.09); border-color: rgba(201,169,106,.55);
}
.bkcard--pay .paycard__mark { border-color: var(--gold-lite); }
.bkcard--pay .paycard__mark::after { background: var(--gold-lite); }
.bkcard--pay .paycard__t { color: var(--cream); }
.bkcard--pay .paycard__d { color: rgba(243,238,228,.66); }
.bkcard--pay .pill { border-color: rgba(243,238,228,.3); color: rgba(243,238,228,.8); }
.bkcard--pay .notice {
  position: relative; background: rgba(243,238,228,.06);
  border-color: rgba(243,238,228,.22); color: var(--cream);
}
.bkcard--pay .notice .btn-link { color: var(--gold-lite); }
.bkcard--pay .btn-row { position: relative; }
.bkcard--pay .btn-outline { border-color: rgba(243,238,228,.4); color: var(--cream); }
.bkcard--pay .btn-outline:hover { background: rgba(243,238,228,.1); }

/* --- confirmation ----------------------------------------------------- */

.bkdone { background: var(--surface); color: var(--ink); padding: clamp(28px, 4vw, 52px); text-align: center; box-shadow: 0 20px 50px -28px rgba(0,0,0,.7); }
.bkdone__ref { font-family: var(--display); font-weight: 300; font-size: clamp(28px, 3.6vw, 40px); color: var(--gold); margin: 18px 0 6px; letter-spacing: .04em; }

/* --- mobile sticky total --------------------------------------------- */

/* The swap target must not become the sticky bar's containing block, or the
   bar would only be able to stick within its own height. */
#bkbar { display: contents; }
.bkbar { display: none; }

@media (max-width: 1060px) {
  .bk__grid { grid-template-columns: 1fr; }
  .bksum { position: static; }
  .bkroom__gal a { min-width: 62%; }
  .bkrate { grid-template-columns: 1fr auto; gap: 10px 14px; }
  .bkrate__p { text-align: start; grid-column: 1; }
  .bkrate form, .bkrate > div:last-child { grid-column: 2; grid-row: 2; align-self: end; }
  .bkhotel { grid-template-columns: 1fr; align-items: start; }
  .bkhotel__strip { overflow-x: auto; }
  .steps2 .l { font-size: 12px; }
  .bkgo { flex-wrap: wrap; }
  .bkgo .btn { flex: 1 1 100%; }

  /* One persistent total, the way every booking app on a phone does it. */
  .bkbar {
    display: flex; align-items: center; gap: 14px;
    position: sticky; bottom: 0; z-index: 60;
    background: var(--dark); border-top: 1px solid rgba(201,169,106,.3);
    padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -14px 34px -18px rgba(0,0,0,.8);
  }
  .bkbar__l { min-width: 0; flex: 1; }
  /* This bar only exists on a phone, so its label follows the phone floor. */
  .bkbar__t { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(243,238,228,.5); }
  .bkbar__v { font-size: 19px; color: var(--cream); font-variant-numeric: tabular-nums; }
  .bkbar .btn { flex: none; }
}

@media (max-width: 560px) {
  .bkroom__gal a { min-width: 78%; }
  .bkroom__body { padding: 16px 18px 4px; }
  .bkroom.is-open .bkroom__body { padding-inline-start: 16px; }
  .bkrate, .bkrates__h, .bkpick, .bkgo { padding-inline: 18px; }
  /* Nothing drops below 12px on a phone. */
  .bkrates__h, .bk__kicker { font-size: 12px; }
  /* Four steps will not fit as words on a phone, so the numbers carry the
     progress and only the current step keeps its label. */
  .steps2--4 .l { display: none; }
  .steps2--4 .is-active .l { display: block; }
  .steps2--4 .n { font-size: 12px; }
  .bkpick { flex-wrap: wrap; }
  .bkpick form { width: 100%; justify-content: space-between; }
  .recap > div { flex-direction: column; gap: 3px; }
  .recap dd { text-align: start; }
}

/* --- room photo lightbox --------------------------------------------- */

.lb { position: fixed; inset: 0; z-index: 200; background: rgba(10,20,16,.95); display: flex; flex-direction: column; }
.lb[hidden] { display: none; }
.lb__bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px var(--gut); color: var(--cream); }
.lb__cap { font-size: 13.5px; color: rgba(243,238,228,.75); min-width: 0; }
.lb__x { width: 44px; height: 44px; flex: none; background: none; border: 1px solid rgba(243,238,228,.35); color: var(--cream); font-size: 20px; cursor: pointer; }
.lb__x:hover { border-color: var(--gold-lite); color: var(--gold-lite); }
.lb__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--gut) 8px; }
.lb__stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.lb__nav { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px var(--gut) calc(16px + env(safe-area-inset-bottom, 0px)); }
.lb__btn { width: 48px; height: 48px; background: none; border: 1px solid rgba(243,238,228,.35); color: var(--cream); font-size: 20px; cursor: pointer; }
.lb__btn:hover { border-color: var(--gold-lite); color: var(--gold-lite); }
.lb__i { font-size: 12.5px; color: rgba(243,238,228,.6); min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   LANGUAGE PICKER
   --------------------------------------------------------------------------
   Twenty-eight languages will not fit in a header, so the toggle becomes a
   panel: the handful this hotel's guests actually speak first, everything else
   below. Built from plain links so it still works without JavaScript — CSS
   opens it on :focus-within, and site.js adds click-to-open on top.
   ========================================================================== */

.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer; padding: 6px 2px;
  font: inherit; font-size: 12px; color: var(--muted); white-space: nowrap;
}
.lang__btn:hover { color: var(--gold); }
.lang__globe {
  width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 1px solid currentColor; position: relative;
}
/* Two strokes read as a globe at 13px; a full meridian set turns to mud. */
.lang__globe::before, .lang__globe::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid currentColor;
}
.lang__globe::before { border-inline: 0; }
.lang__globe::after { border-block: 0; transform: scaleX(.48); }

/* Fixed, not absolute: the utility rail sets overflow:hidden so it can collapse
   to nothing on scroll, and an absolutely positioned panel would be clipped by
   it. A fixed element escapes that, and the rail is pinned to the top anyway. */
.lang__panel {
  position: fixed; top: 40px; inset-inline-end: var(--gut); z-index: 90;
  width: min(560px, calc(100vw - 2 * var(--gut)));
  max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 30px 60px -28px rgba(16,31,26,.5);
  padding: 14px 16px 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(6px); transition: opacity .16s ease, transform .16s ease;
}
.lang.is-open .lang__panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
html:not(.js) .lang:focus-within .lang__panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}

.lang__head {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); padding: 10px 4px 8px;
}
.lang__head + .lang__grid { margin-bottom: 4px; }
.lang__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.lang__opt {
  display: block; padding: 9px 10px; min-height: 44px; color: var(--ink);
  border: 1px solid transparent;
}
.lang__opt:hover { background: var(--panel); color: var(--ink); }
.lang__opt.is-on { border-color: var(--gold); background: rgba(140,106,60,.06); }
/* The names keep their own script but stay aligned to the grid: an RTL name
   allowed to align right leaves the column looking broken. */
.lang__native { display: block; font-size: 14px; line-height: 1.25; text-align: start; unicode-bidi: isolate; }
.lang__en { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; text-align: start; }

@media (max-width: 700px) {
  .lang__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The drawer lists them flat — the panel is a desktop affordance. */
.dlangs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; padding: 0 var(--gut) 6px;
}
.dlangs a {
  display: flex; align-items: center; min-height: 46px; padding: 6px 10px;
  font-size: 14.5px; color: var(--ink); border: 1px solid transparent;
}
.dlangs a.is-on { border-color: var(--gold); color: var(--gold-dark); background: rgba(140,106,60,.06); }

/* ==========================================================================
   RESERVATION — rebuilt
   --------------------------------------------------------------------------
   Written against how booking screens actually get used, not how a brochure
   looks. Three decisions carry the whole thing:

   1. Light. Somebody comparing four rooms and four prices is reading, and
      reading happens on paper. The dark treatment made photographs glow while
      prices, labels and field text all had to fight for legibility — and
      several of them lost outright.
   2. One thing per row. Picture, what it is, what it costs, how to take it —
      always in the same four places, so the eye runs down a column instead of
      hunting around a card.
   3. Nothing that is not helping. No cinematic header, no drifting photograph,
      no second navigation. The page has one job.

   Same palette, same typeface, so it is plainly the same company. It simply
   stops behaving like a marketing page.
   ========================================================================== */

/* --- header ----------------------------------------------------------- */

.bkhdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.bkhdr__in {
  max-width: 1180px; margin: 0 auto; padding: 13px var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.bkhdr__mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.bkhdr__mark img { display: block; width: 30px; height: auto; }
.bkhdr__wordmark { display: flex; flex-direction: column; line-height: 1.2; }
.bkhdr__wordmark b { font-weight: 600; font-size: 14px; letter-spacing: .02em; color: var(--ink); }
.bkhdr__wordmark small {
  font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold);
}
.bkhdr__right { display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); }

.bkhdr__safe {
  display: inline-flex; align-items: center; font-size: 12px; color: var(--good);
  padding-inline-start: 19px; background-repeat: no-repeat; background-size: 13px 13px;
  background-position: left center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F7D5C' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
[dir="rtl"] .bkhdr__safe { background-position: right center; }
@media (max-width: 760px) { .bkhdr__safe { display: none; } }

.bkhdr__help {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-size: 14px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums;
  padding-inline-start: 21px; background-repeat: no-repeat; background-size: 15px 15px;
  background-position: left center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C6A3C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.8 2.1z'/%3E%3C/svg%3E");
}
[dir="rtl"] .bkhdr__help { background-position: right center; }
.bkhdr__help:hover { color: var(--gold-dark); }
.bkhdr__helpl { font-size: 11px; color: var(--muted); font-weight: 400; }
@media (max-width: 560px) { .bkhdr__helpl { display: none; } }

.bkhdr__out {
  font-size: 12.5px; text-decoration: none; color: var(--muted);
  border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px;
  transition: border-color .2s, color .2s;
}
.bkhdr__out:hover { color: var(--ink); border-color: var(--gold); }
@media (max-width: 460px) { .bkhdr__out { display: none; } }

/* --- page ------------------------------------------------------------- */

.bk {
  background-color: #F7F6F3; background-image: none; color: var(--ink);
  padding-bottom: clamp(40px, 6vw, 80px);
}
.bk--cine .bk__head { background-image: none; animation: none; padding: 0; }
.bk__head { padding: clamp(24px, 3vw, 38px) var(--gut) 0; }
.bk__wrap, .bk__grid { max-width: 1180px; }
.bk__kicker { display: none; }                 /* the header already says where you are */
.bk__title {
  color: var(--ink); font-size: clamp(23px, 2.8vw, 32px); font-weight: 600;
  letter-spacing: -.02em; text-shadow: none; margin: 0;
}

/* --- stepper ---------------------------------------------------------- */

/* Numbered discs joined by a rule — the one progress pattern nobody has to be
   taught. The number lives in the disc, so the label beside it is free to be
   words rather than "01". */
.bk__steps {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 0; margin: 20px 0 0; padding: 0; border: 0;
}
.bk__steps > * {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 0 12px 16px 0; border: 0; text-decoration: none;
  font-size: 13px; color: var(--muted);
}
.bk__steps > *::after {
  content: ''; position: absolute; top: 13px; height: 1.5px;
  inset-inline-start: 28px; inset-inline-end: 4px; background: var(--line);
}
.bk__steps > *:last-child::after { display: none; }
.bk__steps .n {
  flex: none; width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 1;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  font-variant-numeric: tabular-nums; margin: 0;
  background: #fff; color: var(--muted); border: 1.5px solid var(--line);
}
.bk__steps .l { display: block; }
.bk__steps > *.is-on { color: var(--ink); font-weight: 500; }
.bk__steps > *.is-on .n { background: var(--gold); border-color: var(--gold); color: #fff; }
.bk__steps > *.is-done { color: var(--gold-dark); }
.bk__steps > *.is-done .n { background: var(--gold-lite); border-color: var(--gold-lite); color: #fff; }
.bk__steps > *.is-done::after { background: var(--gold-lite); }
@media (max-width: 720px) {
  .bk__steps .l { display: none; }
  .bk__steps > *.is-on .l { display: block; white-space: nowrap; }
  .bk__steps > * { overflow: visible; }
}

/* --- who and when ----------------------------------------------------- */

.bkhotel {
  margin: 18px 0 0; padding: 15px 18px;
  background: #fff; border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.bkhotel__name {
  font-size: clamp(17px, 2vw, 20px); font-weight: 600; letter-spacing: -.015em;
  color: var(--ink); text-shadow: none;
}
.bkhotel__meta { margin-top: 6px; gap: 6px 18px; font-size: 13px; color: var(--muted); }
.bkhotel__meta > span {
  display: inline-flex; align-items: center;
  padding-inline-start: 21px; background-repeat: no-repeat;
  background-position: left center; background-size: 15px 15px;
}
[dir="rtl"] .bkhotel__meta > span { background-position: right center; }
.bkhotel__meta > span:nth-child(1) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C6A3C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}
.bkhotel__meta > span:nth-child(2) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C6A3C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
.bkhotel__meta > span:nth-child(3) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C6A3C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5'/%3E%3Cpath d='M6 11V8a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M3 18h18'/%3E%3C/svg%3E");
}
.bkhotel__strip { gap: 5px; }
.bkhotel__strip img { width: 56px; height: 42px; border-radius: 6px; border: 0; }
@media (max-width: 860px) { .bkhotel__strip { display: none; } }

/* --- search ----------------------------------------------------------- */

.bk__grid { padding-top: clamp(16px, 2vw, 24px); }
.bksearch {
  background: #fff; border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 37, 30, .04);
  padding: 14px; margin: 0 0 clamp(18px, 2.2vw, 26px);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.bksearch .search, .search--inline {
  display: grid; gap: 10px; padding: 0; background: transparent; border: 0; box-shadow: none;
  grid-template-columns: 1.2fr 1.4fr 1.4fr .8fr auto; align-items: stretch;
}
/* Every field is a box with edges you can see. Borderless fields photograph
   well and confuse people who are not sure where to click. */
.bksearch .field-label, .search--inline .field-label {
  margin: 0; min-width: 0; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  transition: border-color .18s, background .18s;
}
.bksearch .field-label:focus-within, .search--inline .field-label:focus-within {
  border-color: var(--gold); background: #fff;
}
.bksearch .eyebrow, .search--inline .eyebrow {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.bksearch .field, .search--inline .field {
  border: 0; background: transparent; padding: 0; height: auto; width: 100%;
  font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.bksearch .field:focus, .search--inline .field:focus { outline: 0; box-shadow: none; }
.bksearch .btn, .search--inline .btn {
  border-radius: 8px; margin: 0; align-self: stretch; min-height: 56px;
  padding-inline: clamp(20px, 2.4vw, 32px); white-space: nowrap; font-weight: 500;
}
@media (max-width: 980px) {
  .bksearch .search, .search--inline { grid-template-columns: 1fr 1fr; }
  .bksearch .btn, .search--inline .btn { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .bksearch .search, .search--inline { grid-template-columns: 1fr; }
}

/* --- rooms ------------------------------------------------------------ */

/* Picture, description, price — side by side on a wide screen, so four rooms
   read as one comparable list instead of four separate posters. */
.bkroom {
  background: #fff; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 37, 30, .04);
  margin-bottom: 14px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  transition: box-shadow .22s ease, border-color .22s ease;
}
.bkroom:hover { box-shadow: 0 14px 34px -20px rgba(20, 37, 30, .34); border-color: var(--line); }
.bkroom.is-open { border-color: var(--gold); box-shadow: 0 14px 34px -20px rgba(20, 37, 30, .34); }

.bkroom__gal {
  display: block; position: relative; background: var(--line-2);
  grid-row: 1 / span 2; height: 100%;
}
.bkroom__gal a { display: none; }
.bkroom__gal a:first-child { display: block; height: 100%; position: relative; }
.bkroom__gal img { width: 100%; height: 100%; min-height: 210px; object-fit: cover; display: block; }
.bkroom__count {
  background: rgba(255, 255, 255, .94); color: var(--ink); border: 0;
  border-radius: 999px; font-size: 11px; padding: 5px 11px;
  inset-block-end: 10px; inset-inline-start: 10px;
}

.bkroom__body { padding: 20px 22px 4px; }
.bkroom__name { font-size: 19px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.bkroom__meta { gap: 6px; margin: 9px 0 10px; font-size: 12px; color: var(--gold-dark); }
.bkroom__meta > span {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); background: var(--panel);
  padding: 4px 10px; border-radius: 999px;
}
.bkroom__desc { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin: 0 0 14px; }
.bkroom__left {
  background: #FDF3F1; color: var(--bad); border: 1px solid #F0D5CF;
  border-radius: 999px; padding: 4px 11px; font-size: 11.5px;
}

.bkpick {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 13px 22px; border-top: 1px solid var(--line-2); background: var(--panel);
}
.bkpick__p small {
  display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.bkpick__p b {
  display: block; font-size: 23px; font-weight: 600; color: var(--ink);
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.bkpick--off { padding: 16px 22px; color: var(--muted); font-size: 13.5px; }

@media (max-width: 820px) {
  .bkroom { grid-template-columns: 1fr; }
  .bkroom__gal { grid-row: auto; }
  .bkroom__gal img { min-height: 190px; height: clamp(190px, 42vw, 250px); }
}

/* --- rates ------------------------------------------------------------ */

.bkrates { border-top: 1px solid var(--line-2); grid-column: 1 / -1; }
.bkrate { border-bottom: 1px solid var(--line-2); transition: background .18s ease; }
.bkrate:hover { background: var(--panel); }
.bkrate--member { background: rgba(201, 169, 106, .1); }
.bkrate__n { color: var(--ink); }
.bkrate__i { color: var(--muted); }
.bkrate__i b { color: var(--good); }
.bkrate__tag { border-radius: 999px; letter-spacing: .08em; }
.bkrate__p b { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bkrate__p small { color: var(--muted); }

/* --- summary ---------------------------------------------------------- */

.bksum {
  background: #fff; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 37, 30, .04); top: 92px;
}
.bksum__r span, .bksum__total b { font-variant-numeric: tabular-nums; }
@media (max-width: 980px) { .bksum { position: static; } }

.bk .bkcard {
  background: #fff; border: 1px solid var(--line-2); border-radius: 12px;
  color: var(--ink); padding: 26px 22px;
}

/* --- footer ----------------------------------------------------------- */

.bkfoot { background: #fff; border-top: 1px solid var(--line-2); color: var(--muted); }
.bkfoot__in {
  max-width: 1180px; margin: 0 auto; padding: 20px var(--gut);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 24px; flex-wrap: wrap; font-size: 12.5px;
}
.bkfoot__marks { display: flex; gap: 6px; flex-wrap: wrap; }
.bkfoot__marks span {
  border: 1px solid var(--line); border-radius: 4px; padding: 4px 9px;
  font-size: 9.5px; letter-spacing: .1em; color: var(--muted);
}
.bkfoot__legal { font-size: 11.5px; color: var(--muted); }

/* --- corrections after looking at it ---------------------------------- */

/* The original stepper rules were more specific than the ones above, so the
   discs never drew. Stated at the same depth they now win. */
.bk .bk__steps > * {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 0 12px 16px 0; border: 0; text-decoration: none;
  font-size: 13px; color: var(--muted); opacity: 1;
}
.bk .bk__steps > * .n {
  flex: none; width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 1;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  font-variant-numeric: tabular-nums; margin: 0; padding: 0;
  background: #fff; color: var(--muted); border: 1.5px solid var(--line);
}
.bk .bk__steps > * .l { display: block; color: inherit; font-size: 13px; }
.bk .bk__steps > *.is-on { color: var(--ink); font-weight: 500; }
.bk .bk__steps > *.is-on .n { background: var(--gold); border-color: var(--gold); color: #fff; }
.bk .bk__steps > *.is-done { color: var(--gold-dark); }
.bk .bk__steps > *.is-done .n { background: var(--gold-lite); border-color: var(--gold-lite); color: #fff; }

/* The photo count had been stretching the width of the picture. It is a pill
   sitting in the corner, not a caption bar. */
.bkroom__gal a:first-child { position: relative; }
.bkroom .bkroom__count {
  position: absolute; width: auto; inset: auto auto 10px 10px;
  display: inline-block; text-align: center;
}
[dir="rtl"] .bkroom .bkroom__count { inset: auto 10px 10px auto; }

/* The hotel field was showing its thumbnail and swallowing the name. The
   picture is decoration here — the name is the thing being chosen. */
.bksearch .dd__label { display: block; font-size: 15px; color: var(--ink); }
.bksearch .dd img, .search--inline .dd img { display: none; }
.bksearch .field-label:first-child { min-width: 0; }

/* The stepper is .steps2 with .is-active, not .bk__steps with .is-on — which
   is why none of the above reached it. Numbered discs joined by a rule: the
   one progress pattern nobody has to be taught. */
.bk .steps2 {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 0; margin: 20px 0 0; padding: 0; border: 0; background: none;
}
.bk .steps2 > * {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 0 12px 16px 0; margin: 0; border: 0; text-decoration: none;
  font-size: 13px; color: var(--muted); opacity: 1; background: none;
}
.bk .steps2 > *::before, .bk .steps2 > *::after { border: 0; }
.bk .steps2 > *::after {
  content: ''; position: absolute; top: 13px; height: 1.5px;
  inset-inline-start: 30px; inset-inline-end: 4px; background: var(--line);
}
.bk .steps2 > *:last-child::after { display: none; }
.bk .steps2 .n {
  flex: none; width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 1;
  font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
  font-variant-numeric: tabular-nums; margin: 0; padding: 0;
  background: #fff; color: var(--muted); border: 1.5px solid var(--line);
}
.bk .steps2 .l { display: block; color: inherit; font-size: 13px; margin: 0; }
.bk .steps2 > *.is-active { color: var(--ink); font-weight: 500; }
.bk .steps2 > *.is-active .n { background: var(--gold); border-color: var(--gold); color: #fff; }
.bk .steps2 > *.is-done { color: var(--gold-dark); }
.bk .steps2 > *.is-done .n { background: var(--gold-lite); border-color: var(--gold-lite); color: #fff; }
.bk .steps2 > *.is-done::after { background: var(--gold-lite); }
@media (max-width: 720px) {
  .bk .steps2 .l { display: none; }
  .bk .steps2 > *.is-active .l { display: block; white-space: nowrap; }
  .bk .steps2 > * { overflow: visible; }
}

/* The connecting rule was running straight through the words. The label sits
   on the page colour and masks it, so the line reads as joining the discs
   rather than striking out the step. */
.bk .steps2 .l {
  position: relative; z-index: 1;
  background: #F7F6F3; padding-inline-end: 12px;
}

/* ==========================================================================
   RESERVATION — header, hotel and the phone
   --------------------------------------------------------------------------
   Three things the wide layout was hiding: a header that broke into three
   ragged lines on a phone, a stepper whose labels ran straight over the next
   step's disc, and a hotel the guest could only see as a 56-pixel thumbnail.
   ========================================================================== */

/* --- header ----------------------------------------------------------- */

.bkhdr__in { padding: 11px var(--gut); gap: 12px; }
.bkhdr__mark { gap: 10px; min-width: 0; }
.bkhdr__mark img { width: 28px; }
.bkhdr__wordmark b {
  font-size: 12.5px; font-weight: 600; letter-spacing: .13em; white-space: nowrap;
}
.bkhdr__wordmark small { font-size: 8.5px; letter-spacing: .22em; }
.bkhdr__help { font-size: 14px; white-space: nowrap; }
.bkhdr__help bdi { font-weight: 600; }

/* On a phone the header keeps the mark, the number and the language, and
   drops the rest. A telephone number that wraps onto two lines is worse than
   no telephone number. */
@media (max-width: 720px) {
  .bkhdr__in { padding: 9px var(--gut); gap: 8px; }
  .bkhdr__mark img { width: 24px; }
  .bkhdr__wordmark b { font-size: 11px; letter-spacing: .1em; }
  .bkhdr__wordmark small { font-size: 7.5px; }
  .bkhdr__right { gap: 10px; }
  .bkhdr__help { font-size: 13px; }
}
@media (max-width: 420px) {
  .bkhdr__wordmark small { display: none; }
  .bkhdr__help bdi { font-size: 12.5px; }
}

/* --- language --------------------------------------------------------- */

.bklang { position: relative; }
.bklang > summary::-webkit-details-marker { display: none; }
.bklang > summary::marker { content: ''; }
.bklang__btn {
  appearance: none; cursor: pointer; list-style: none;
  background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 13px;
  font: inherit; font-size: 12.5px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding-inline-start: 28px; background-repeat: no-repeat; background-size: 14px 14px;
  background-position: 11px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7269' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 2.5 15.3 0 18M12 3c-2.5 2.7-2.5 15.3 0 18'/%3E%3C/svg%3E");
}
[dir="rtl"] .bklang__btn { background-position: right 11px center; }
.bklang__btn:hover { border-color: var(--gold); color: var(--ink); }

.bklang__pop {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0;
  z-index: 120; width: min(70vw, 300px);
  background: #fff; border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 20px 44px -22px rgba(20, 37, 30, .45);
  padding: 6px; max-height: min(62vh, 460px); overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.bklang__pop a {
  display: block; padding: 8px 10px; border-radius: 6px;
  font-size: 13px; color: var(--ink); text-decoration: none;
}
.bklang__pop a:hover { background: var(--panel); }
.bklang__pop a.is-on { background: rgba(140, 106, 60, .1); color: var(--gold-dark); font-weight: 500; }
@media (max-width: 420px) { .bklang__btn { font-size: 0; padding-inline: 26px 12px; } }

/* --- stepper on a phone ----------------------------------------------- */

/* Four labels never fit. Rather than crush them, the phone gets the discs on
   their rule and the name of the step you are on underneath — which is the
   only one you can act on anyway. */
@media (max-width: 760px) {
  .bk .steps2 { grid-auto-columns: auto; justify-content: start; gap: 0; padding-bottom: 26px; }
  .bk .steps2 > * { padding: 0 44px 0 0; }
  [dir="rtl"] .bk .steps2 > * { padding: 0 0 0 44px; }
  .bk .steps2 > *::after { inset-inline-start: 30px; inset-inline-end: 6px; }
  .bk .steps2 .l {
    display: none; position: absolute; inset-block-start: 34px; inset-inline-start: 0;
    background: transparent; padding: 0; white-space: nowrap; font-size: 12.5px;
  }
  .bk .steps2 > *.is-active .l { display: block; }
}

/* --- the hotel, shown properly ---------------------------------------- */

.bkhotel { padding: 0; overflow: hidden; align-items: stretch; gap: 0; flex-wrap: nowrap; }
.bkhotel__shot { flex: none; width: 190px; background: var(--line-2); }
.bkhotel__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bkhotel__txt { flex: 1 1 auto; min-width: 0; padding: 16px 18px; align-self: center; }
.bkhotel .bkhotel__strip { flex: none; align-self: center; padding-inline-end: 16px; }

@media (max-width: 860px) {
  /* Stacked: the photograph is the first thing on the page, then who and when. */
  .bkhotel { display: block; }
  .bkhotel__shot { width: 100%; height: clamp(150px, 34vw, 210px); }
  .bkhotel__txt { padding: 14px 16px; }
}

/* --- search on a phone ------------------------------------------------ */

@media (max-width: 520px) {
  .bksearch { padding: 12px; }
  .bksearch .search, .search--inline { gap: 8px; }
  .bksearch .field-label, .search--inline .field-label { padding: 10px 12px; }
  .bksearch .btn, .search--inline .btn { min-height: 52px; }
}

/* The summary is no use to anybody at the bottom of a phone screen: by the
   time you scroll past four rooms you have already chosen one. It sits with
   the rooms instead. */
@media (max-width: 980px) {
  .bk__grid { display: block; }
  .bk__grid > *:last-child { margin-top: 18px; }
}

/* Price and the button stay on one line on a phone: stacking them pushed the
   only thing you can act on a further 60px down every card. */
@media (max-width: 820px) {
  .bkpick { flex-wrap: nowrap; align-items: center; gap: 12px; padding: 12px 16px; }
  .bkpick__p { flex: 1 1 auto; min-width: 0; }
  .bkpick__p b { font-size: 20px; }
  .bkpick .btn, .bkpick form { flex: none; }
  .bkpick .btn { padding-inline: 16px; font-size: 12px; }
}

/* ==========================================================================
   RESERVATION — logo header, guest stepper, payment panel
   ========================================================================== */

/* --- header: the logo, and nothing repeating it ----------------------- */

.bkhdr__in { padding: 12px var(--gut); gap: 16px; }
.bkhdr__logo { display: inline-flex; align-items: center; text-decoration: none; min-width: 0; }
.bkhdr__logo img {
  display: block; width: auto; height: 46px; max-width: 62vw; object-fit: contain;
}
@media (max-width: 860px) { .bkhdr__logo img { height: 40px; } }
@media (max-width: 560px) { .bkhdr__logo img { height: 34px; max-width: 52vw; } }
@media (max-width: 380px) { .bkhdr__logo img { height: 30px; } }

/* --- guests ----------------------------------------------------------- */

.field-label[data-guests] { position: relative; }
.gsel { position: relative; }
.gsel__btn {
  appearance: none; cursor: pointer; width: 100%; text-align: start;
  background: transparent; border: 0; padding: 0; margin: 0;
  font: inherit; font-size: 15px; color: var(--ink); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gsel__pop {
  position: absolute; inset-block-start: calc(100% + 14px); inset-inline-start: -13px;
  z-index: 130; width: min(86vw, 310px);
  background: #fff; border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 22px 48px -20px rgba(20, 37, 30, .4);
  padding: 6px 4px 4px;
}
.gsel__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px;
}
.gsel__row + .gsel__row { border-top: 1px solid var(--line-2); }
.gsel__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gsel__t strong { font-weight: 500; font-size: 14.5px; color: var(--ink); }
.gsel__t span { font-size: 11.5px; color: var(--muted); }

.gsel__ctl { display: flex; align-items: center; gap: 4px; flex: none; }
.gsel__pm {
  appearance: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--gold-dark);
  font-size: 17px; line-height: 1; font-family: inherit;
  display: grid; place-items: center;
  transition: border-color .15s, background .15s, color .15s;
}
.gsel__pm:hover:not(:disabled) { border-color: var(--gold); background: var(--panel); }
.gsel__pm:disabled { opacity: .35; cursor: default; }
.gsel__n {
  min-width: 30px; text-align: center; font-size: 15px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.gsel__done { display: flex; justify-content: flex-end; padding: 8px 10px 8px; }
.gsel__done .btn { padding: 9px 20px; font-size: 12px; }

/* --- payment panel ----------------------------------------------------
   It was written as a dark seal, which read well against the old dark page
   and became cream text on white the moment the surface turned. It keeps the
   weight — a hairline frame and a tinted ground — without the inversion. */

.bk .bkcard--pay {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
}
.bk .bkcard--pay .bkcard__h { color: var(--ink); }
.bk .bkcard--pay .bkcard__s { color: var(--muted); }
.bk .bkcard--pay .lead { color: var(--muted); }
.bk .bkcard--pay .paycard { background: #fff; border: 1px solid var(--line-2); }
.bk .bkcard--pay .paycard__mark { border-color: var(--gold); }
.bk .bkcard--pay .paycard__mark::after { background: var(--gold); }
.bk .bkcard--pay .paycard__t { color: var(--ink); }
.bk .bkcard--pay .paycard__d { color: var(--muted); }
.bk .bkcard--pay .pill { border-color: var(--line); color: var(--muted); }
.bk .bkcard--pay .notice { background: #fff; border-color: var(--line-2); color: var(--ink); }
.bk .bkcard--pay .notice .btn-link { color: var(--gold-dark); }
.bk .bkcard--pay .bkcard__seal { opacity: .06; }

/* Everything else the dark page had tinted for cream text. */
.bk .bkcard__h { color: var(--ink); }
.bk .bkcard__s { color: var(--muted); }
.bk .recap dt { color: var(--muted); }
.bk .recap dd { color: var(--ink); }
.bk .lead { color: var(--muted); }
.bk label, .bk legend { color: var(--ink); }
.bk .bkcard .field {
  background: #fff; border: 1px solid var(--line); color: var(--ink); border-radius: 8px;
}
.bk .bkcard .field:focus { border-color: var(--gold); outline: 0; }
.bk .bkcard .eyebrow { color: var(--muted); }

/* --- summary ---------------------------------------------------------- */

.bksum { overflow: hidden; }
.bksum__b, .bksum__body { padding: 18px 20px; }
.bksum .eyebrow { color: var(--muted); }
.bksum__r {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  font-size: 13.5px; color: var(--muted); padding: 5px 0;
}
.bksum__r span:last-child { color: var(--ink); }
.bksum__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  border-top: 1px solid var(--line-2); margin-top: 10px; padding-top: 12px;
}
.bksum__total b { font-size: 21px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }

/* ==========================================================================
   PROGRESS + FULL-WIDTH SEARCH
   --------------------------------------------------------------------------
   .bkflow is a fresh class, not the site's .steps2. That one is written for
   the dark marketing surface — cream labels on a near-white page, and a
   `.steps2 span { display: block }` that stacks the number above the words —
   and overriding it property by property kept losing. Nothing else in the
   stylesheet touches .bkflow, so what is written here is what happens.
   ========================================================================== */

.bkflow {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 0; margin: 22px 0 0; padding: 0; border: 0; list-style: none;
}
.bkflow > * {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 0 14px 0 0; border: 0;
  text-decoration: none; font-size: 13px; color: var(--muted); min-width: 0;
}
[dir="rtl"] .bkflow > * { padding: 0 0 0 14px; }

/* The rule joins one disc to the next and stops at the label, which sits on
   the page colour so the line never strikes through the words. */
.bkflow > *::after {
  content: ''; position: absolute; top: 50%; height: 1.5px; margin-top: -.75px;
  inset-inline-start: 30px; inset-inline-end: 6px; background: var(--line); z-index: 0;
}
.bkflow > *:last-child::after { display: none; }

.bkflow .n {
  flex: none; position: relative; z-index: 1;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  margin: 0; padding: 0;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  font-variant-numeric: tabular-nums;
  background: #fff; color: var(--muted); border: 1.5px solid var(--line);
}
.bkflow .l {
  position: relative; z-index: 1; display: block; margin: 0;
  font-size: 13px; color: var(--muted); background: #F7F6F3;
  padding-inline-end: 12px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

.bkflow > .is-active { color: var(--ink); }
.bkflow > .is-active .n { background: var(--gold); border-color: var(--gold); color: #fff; }
.bkflow > .is-active .l { color: var(--ink); font-weight: 500; }

.bkflow > .is-done { color: var(--gold-dark); }
.bkflow > .is-done .n { background: var(--gold-lite); border-color: var(--gold-lite); color: #fff; }
.bkflow > .is-done .l { color: var(--gold-dark); }
.bkflow > .is-done::after { background: var(--gold-lite); }

a.bkflow-step:hover .l { color: var(--ink); }

/* On a phone four labels never fit. The discs keep their rule and only the
   step you are on is named, on its own line beneath. */
@media (max-width: 760px) {
  .bkflow { grid-auto-columns: auto; justify-content: start; padding-bottom: 24px; }
  .bkflow > * { padding: 0 46px 0 0; }
  [dir="rtl"] .bkflow > * { padding: 0 0 0 46px; }
  .bkflow > *::after { top: 14px; margin-top: 0; inset-inline-end: 8px; }
  .bkflow .l {
    display: none; position: absolute; inset-block-start: 36px; inset-inline-start: 0;
    background: transparent; padding: 0; font-size: 12.5px;
  }
  .bkflow > .is-active .l { display: block; }
}

/* --- the search, now spanning the page -------------------------------- */

.bk__head .bksearch { margin: 18px 0 0; }
.bk__head .bksearch .search,
.bk__head .bksearch .search--inline {
  grid-template-columns: 1.15fr 1.6fr 1.15fr .8fr auto;
}
@media (max-width: 1020px) {
  .bk__head .bksearch .search,
  .bk__head .bksearch .search--inline { grid-template-columns: 1fr 1fr; }
  .bk__head .bksearch .btn { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .bk__head .bksearch .search,
  .bk__head .bksearch .search--inline { grid-template-columns: 1fr; }
}
/* The grid below no longer has a search bar in its left column. */
.bk__grid { padding-top: clamp(14px, 1.8vw, 20px); }

/* ==========================================================================
   THE TOP OF THE PAGE
   --------------------------------------------------------------------------
   Title on one line, progress on the same line beside it. Stacked, the two
   ate a third of a laptop screen before the guest saw a single room, and on a
   phone they read as a list of loose numbers. Side by side they become one
   band that says the same thing in a quarter of the height: what this is, and
   how far through you are.

   The band is white against the page's warm grey, so it reads as the header of
   the process rather than as more page.
   ========================================================================== */

.bk__head {
  padding: 0 var(--gut);
  background: #fff;
  border-bottom: 1px solid var(--line-2);
}
.bk__head .bk__wrap {
  padding-block: clamp(16px, 2vw, 22px);
}

/* Title and progress share a row and are separated by a hairline. */
.bk__crown {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
}
.bk__crown > .bk__titles { flex: none; min-width: 0; }
.bk__crown > .bkflow { flex: 1 1 380px; margin: 0; min-width: 0; }

.bk__kicker {
  display: block; font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 3px;
}
.bk__title {
  color: var(--ink); margin: 0;
  font-size: clamp(19px, 2.1vw, 25px); font-weight: 600; letter-spacing: -.02em;
  line-height: 1.15; text-shadow: none; white-space: nowrap;
}

/* The rule that used to sit behind the labels now runs on white. */
.bkflow .l { background: #fff; }

/* Slightly larger discs and a lighter rule: at this size the row is read at a
   glance rather than studied. */
.bkflow .n { width: 30px; height: 30px; font-size: 12px; }
.bkflow > *::after { inset-inline-start: 32px; background: var(--line-2); }
.bkflow > .is-done::after { background: var(--gold-lite); }
.bkflow > * { padding-inline-end: 16px; }

/* The hotel card and the search sit below the white band, on the page. */
.bk__head .bkhotel,
.bk__head .bksearch { margin-top: clamp(14px, 1.8vw, 20px); }

@media (max-width: 1040px) {
  /* Below this the two no longer fit on one line; the title leads and the
     progress takes the row under it, still horizontal. */
  .bk__crown { display: block; }
  .bk__crown > .bkflow { margin-top: 14px; }
  .bk__title { white-space: normal; }
}

@media (max-width: 760px) {
  .bk__head { padding-inline: 0; }
  .bk__head .bk__wrap { padding-inline: var(--gut); padding-block: 14px; }
  .bk__kicker { font-size: 9px; letter-spacing: .22em; }
  .bk__title { font-size: 19px; }
  .bkflow .l { background: transparent; }
  .bk__head .bkhotel { margin-inline: var(--gut); }
  .bk__head .bksearch { margin-inline: var(--gut); }
}

/* The band is white, so the cards under it need the page colour back. */
.bk__head .bkhotel { background: #fff; }

/* An empty date field says it is waiting. Without this the browser blocks the
   form on a required field the guest cannot see is empty, and the search
   button reads as broken. */
.field-label.is-empty { border-color: var(--gold-lite); background: rgba(201, 169, 106, .07); }
.field-label.is-empty .eyebrow { color: var(--gold-dark); }
.field-label.is-empty .field::after { content: attr(data-pick); }
.field-label.is-empty input[type="date"] { color: var(--gold-dark); }
.field-label.is-empty input[type="date"]::-webkit-datetime-edit { color: var(--gold-dark); opacity: .85; }
.bksearch .field-label.is-empty:focus-within { border-color: var(--gold); background: #fff; }

/* And the button says which two things it still needs, rather than failing
   silently when they are missing. */
.bksearch .btn[disabled] { opacity: .5; cursor: default; }

/* "My booking" sits beside the way out: both are places to go, neither is the
   thing the page is for, so they read as one pair rather than two decisions. */
.bkhdr__mine {
  font-size: 12.5px; text-decoration: none; color: var(--gold-dark);
  border: 1px solid var(--gold-lite); background: rgba(201, 169, 106, .1);
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  transition: border-color .2s, background .2s;
}
.bkhdr__mine:hover { border-color: var(--gold); background: rgba(201, 169, 106, .18); }
@media (max-width: 620px) { .bkhdr__mine { padding: 7px 11px; font-size: 12px; } }

/* --- the reservation header on a narrow screen -------------------------
   The number and the language button were running into each other, and the
   language button had been shrunk to font-size:0 — a globe with an invisible
   word beside it. Both now say what they are in the room they have. */

.bklang__code { display: none; font-weight: 600; letter-spacing: .06em; }
.bklang__full { display: inline; }

@media (max-width: 620px) {
  .bkhdr__right { gap: 8px; }

  /* The telephone becomes its icon. It is still a link and still dials. */
  .bkhdr__num { display: none; }
  .bkhdr__help {
    width: 38px; height: 38px; padding: 0; border-radius: 50%;
    border: 1px solid var(--line); background: #fff;
    background-position: center; background-size: 17px 17px;
    padding-inline-start: 0;
  }
  [dir="rtl"] .bkhdr__help { background-position: center; }

  /* The globe keeps a two-letter code beside it, so it is plainly a language
     switch rather than a mystery button. */
  .bklang__full { display: none; }
  .bklang__code { display: inline; }
  .bklang__btn {
    font-size: 12px; padding: 9px 12px 9px 27px;
    background-position: 9px center; background-size: 15px 15px;
  }
  [dir="rtl"] .bklang__btn { padding: 9px 27px 9px 12px; background-position: right 9px center; }
  .bklang__pop { width: min(92vw, 320px); }
}
@media (max-width: 380px) {
  .bkhdr__in { gap: 6px; }
  .bkhdr__help { width: 34px; height: 34px; background-size: 16px 16px; }
  .bklang__btn { padding: 8px 10px 8px 25px; }
}

/* --- corrections, measured -------------------------------------------
   Three faults on a phone, each confirmed by measurement rather than by eye:

   1. The telephone icon had vanished. The rule above used the `background`
      shorthand to set a white fill, and a shorthand resets every background
      property it does not mention — including the icon itself.
   2. The logo and the telephone overlapped by 17px: the logo was allowed to
      claim 52vw whether or not the controls beside it had room.
   3. The language menu opened 48px off the left edge of the screen. It is
      320px wide and anchored to the right of a button that has nothing like
      320px to its left. */

@media (max-width: 620px) {
  /* The icon is restated here because the shorthand above erased it. */
  .bkhdr__help {
    background-color: #fff;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C6A3C' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.8 2.1z'/%3E%3C/svg%3E");
  }

  /* The logo yields first. It is recognisable at 26px and the controls beside
     it are not optional. */
  .bkhdr__logo { flex: 0 1 auto; min-width: 0; }
  .bkhdr__logo img { height: 30px; max-width: 38vw; }

  /* Pinned to the viewport, not to the button: a menu wider than the space
     to its left cannot be anchored there without leaving the screen. */
  .bklang__pop {
    position: fixed;
    inset-block-start: 62px;
    inset-inline: 10px;
    width: auto; max-width: none;
    max-height: min(70vh, 460px);
  }
}
@media (max-width: 400px) {
  .bkhdr__logo img { height: 26px; max-width: 32vw; }
  .bkhdr__mine { padding: 7px 10px; font-size: 11.5px; }
}

/* --- WhatsApp -----------------------------------------------------------
   Bottom corner, above everything but the lightbox. It sits opposite the
   reading direction's start, so it never covers the beginning of a line, and
   it steps up on a phone to clear the thumb's usual resting place. */

.wafab {
  position: fixed; z-index: 150;
  inset-block-end: clamp(18px, 3vw, 28px);
  inset-inline-end: clamp(16px, 3vw, 28px);
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff; text-decoration: none;
  box-shadow: 0 10px 26px -8px rgba(37, 211, 102, .55), 0 2px 6px rgba(20, 37, 30, .2);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wafab:hover, .wafab:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -10px rgba(37, 211, 102, .6), 0 3px 8px rgba(20, 37, 30, .24);
}
.wafab svg { display: block; }
@media (max-width: 620px) {
  .wafab { width: 52px; height: 52px; inset-block-end: 16px; inset-inline-end: 14px; }
  .wafab svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) { .wafab { transition: none; } }

/* --- when the dates are gone -------------------------------------------
   The reply to an empty calendar is the one card a guest reads properly, so
   it gets room to breathe and the ways of reaching a person come first. */
.bknone { text-align: center; padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 32px); }
.bknone .lead { font-size: clamp(17px, 2vw, 20px); color: var(--ink); }
.bknone__help {
  max-width: 46ch; margin: 0 auto 22px; font-size: 14px; line-height: 1.7; color: var(--muted);
}
.bknone__acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bknone__acts .btn, .bknone__acts .btn-outline { border-radius: 8px; }
.bknone__acts bdi { font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .bknone__acts { flex-direction: column; align-items: stretch; }
  .bknone__acts .btn, .bknone__acts .btn-outline { width: 100%; }
}

/* --- progress on a phone ------------------------------------------------
   Four numbered discs need room to be read as a sequence, and a phone does not
   have it: they bunched into the left half of the screen joined by stubby
   dashes, with the step's name stranded on a line of its own below.

   So on a narrow screen the discs become the thing they were standing in for —
   a four-segment bar, filled as far as you have come, with the current step
   named under it. Same information, one line instead of three, and it reads at
   a glance rather than being counted. */

@media (max-width: 760px) {
  .bk .bkflow {
    grid-auto-columns: 1fr; justify-content: stretch;
    gap: 5px; padding-bottom: 26px; margin-top: 16px;
  }
  .bk .bkflow > * { padding: 0; overflow: visible; }
  .bk .bkflow > *::after { display: none; }   /* the segments are the rule now */

  .bk .bkflow .n {
    width: 100%; height: 4px; border-radius: 99px;
    background: var(--line-2); border: 0;
    font-size: 0; line-height: 0; color: transparent;
    display: block; place-items: unset;
  }
  .bk .bkflow > .is-active .n,
  .bk .bkflow > .is-done .n { background: var(--gold); }

  .bk .bkflow .l {
    display: none; position: absolute;
    inset-block-start: 13px; inset-inline-start: 0;
    background: transparent; padding: 0;
    font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap;
  }
  .bk .bkflow > .is-active .l { display: block; }

  /* The two lines above it tighten up to match. */
  .bk__head .bk__wrap { padding-block: 13px; }
  .bk__kicker { margin-bottom: 2px; }
  .bk__title { font-size: 20px; }
}

/* The header mark is WhatsApp now, so it wears WhatsApp's own glyph and its
   green — a telephone handset next to the word WhatsApp would be two different
   promises about what tapping it does. */
.bkhdr__wa {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325D366'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E");
}
.bkhdr__wa:hover { color: #128C7E; }
@media (max-width: 620px) {
  .bkhdr__wa { border-color: rgba(37, 211, 102, .5); background-size: 21px 21px; }
}

/* WhatsApp's own green is a signal colour and it shouted next to this palette.
   The mark keeps its shape — that is what people recognise — in the house gold,
   the same as every other icon in this header. */
.bkhdr__wa {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238C6A3C'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E");
}
.bkhdr__wa:hover { color: var(--gold-dark); }
@media (max-width: 620px) { .bkhdr__wa { border-color: var(--line); background-size: 20px 20px; } }

/* --- the code on the enquiry form -------------------------------------- */
.chal { display: flex; align-items: stretch; gap: 12px; margin: 4px 0 18px; flex-wrap: wrap; }
.chal__code {
  flex: none; display: grid; place-items: center;
  min-width: 122px; padding: 0 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  font-size: 22px; font-weight: 600; letter-spacing: .34em; text-indent: .34em;
  color: var(--gold-dark); font-variant-numeric: tabular-nums;
  user-select: none; -webkit-user-select: none;
}
.chal__in { flex: 1 1 180px; min-width: 0; margin: 0; }
.chal__in .field { text-transform: uppercase; letter-spacing: .18em; }
@media (max-width: 420px) {
  .chal { gap: 10px; }
  .chal__code { min-width: 0; width: 100%; padding: 12px; font-size: 20px; }
}

/* The mark alone, at every width. A number printed in the header is read by
   nobody — it is tapped, and on a desktop it is not even tappable. The label
   and the digits go; the link, its accessible name and the number inside that
   name all stay. */
.bkhdr__wa {
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background-color: #fff;
  background-position: center; background-size: 19px 19px;
  background-repeat: no-repeat;
  padding-inline-start: 0; gap: 0;
  transition: border-color .2s, background-color .2s;
}
[dir="rtl"] .bkhdr__wa { background-position: center; }
.bkhdr__wa:hover { border-color: var(--gold); background-color: var(--panel); }
.bkhdr__wa .bkhdr__helpl,
.bkhdr__wa .bkhdr__num { display: none; }
@media (max-width: 620px) { .bkhdr__wa { width: 38px; height: 38px; background-size: 18px 18px; } }
@media (max-width: 380px) { .bkhdr__wa { width: 34px; height: 34px; background-size: 17px 17px; } }

/* "Secure booking" in the footer, with the padlock the header uses. It reads
   as one reassurance with the payment sentence rather than two separate
   claims, so they share a line where there is room for one. */
.bkfoot__note { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bkfoot__safe {
  display: inline-flex; align-items: center; flex: none;
  font-size: 12px; font-weight: 500; color: var(--good);
  padding-inline-start: 18px; background-repeat: no-repeat; background-size: 13px 13px;
  background-position: left center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F7D5C' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
[dir="rtl"] .bkfoot__safe { background-position: right center; }

/* --- the way back to the site, on a phone --------------------------------
   It was hidden below 460px for want of room, which is the wrong answer: the
   guest who most needs a way out of a booking flow is the one who opened it by
   mistake on a phone. It becomes a house, like the WhatsApp mark beside it. */

@media (max-width: 620px) {
  .bkhdr__out {
    display: grid; place-items: center;
    width: 38px; height: 38px; padding: 0; border-radius: 50%;
    border: 1px solid var(--line); background: #fff;
    font-size: 0; line-height: 0; color: transparent;
    background-repeat: no-repeat; background-position: center;
    background-size: 18px 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7269' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.2 12 3l9 7.2'/%3E%3Cpath d='M5 9.6V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.6'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/svg%3E");
  }
  .bkhdr__out:hover { border-color: var(--gold); }
}
@media (max-width: 380px) {
  .bkhdr__out { width: 34px; height: 34px; background-size: 17px 17px; }
}

/* --- the logo must yield to its own container ---------------------------
   It was sized in vw, which measures the window and not the space actually
   left beside the controls. Flexbox duly shrank the link to 82px on a 360px
   screen while the image inside stayed 115px, overflowed its own box and ran
   under the WhatsApp mark — the wordmark reading "BOSPHO".

   Sized against the parent instead, and free to scale by height, it simply
   gets smaller when there is less room, which is what it should have done. */

.bkhdr__logo { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.bkhdr__logo img {
  height: auto; width: auto;
  max-width: 100%; max-height: 46px;
  object-fit: contain; object-position: left center;
}
[dir="rtl"] .bkhdr__logo img { object-position: right center; }
@media (max-width: 860px) { .bkhdr__logo img { max-height: 40px; } }
@media (max-width: 620px) { .bkhdr__logo img { max-height: 32px; } }
@media (max-width: 400px) { .bkhdr__logo img { max-height: 28px; } }

/* ==========================================================================
   THE SEARCH BAR ON THE MARKETING PAGES
   --------------------------------------------------------------------------
   Same control as the one on the booking page. A guest who starts a search on
   the home page and lands on the reservation screen should meet the thing they
   just used, not a second design of it — and the guest stepper, the empty-date
   prompt and the field sizes then behave identically in both places.

   It sits on a photograph here rather than on paper, so it keeps a white card
   under it; everything inside is the booking page's.
   ========================================================================== */

.search {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 24px 60px -30px rgba(20, 37, 30, .55);
  padding: 14px;
  display: grid; gap: 10px; align-items: stretch;
  grid-template-columns: 1.2fr 1.35fr 1.35fr 1.15fr .85fr auto;
}

.search .field-label {
  margin: 0; min-width: 0; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  transition: border-color .18s, background .18s;
}
.search .field-label:focus-within { border-color: var(--gold); background: #fff; }
.search .eyebrow {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.search .field {
  border: 0; background: transparent; padding: 0; height: auto; width: 100%;
  font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.search .field:focus { outline: 0; box-shadow: none; }
.search .btn {
  border-radius: 8px; margin: 0; align-self: stretch; min-height: 56px;
  padding-inline: clamp(20px, 2.4vw, 32px); white-space: nowrap; font-weight: 500;
}

/* The date prompt and the guest stepper carry over unchanged. */
.search .field-label.is-empty { border-color: var(--gold-lite); background: rgba(201, 169, 106, .07); }
.search .field-label.is-empty .eyebrow { color: var(--gold-dark); }
.search .field-label.is-empty input[type="date"] { color: var(--gold-dark); }
.search .dd__label { display: block; font-size: 15px; color: var(--ink); }
.search .dd img { display: none; }

@media (max-width: 1100px) {
  .search { grid-template-columns: 1fr 1fr 1fr; }
  .search .btn { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .search { grid-template-columns: 1fr 1fr; padding: 12px; gap: 8px; }
}
@media (max-width: 520px) {
  .search { grid-template-columns: 1fr; }
  .search .btn { min-height: 52px; }
}

/* The hero sits on a photograph; give the card room to breathe off the edges. */
.search--hero, .hero .search { margin-inline: auto; }

/* The date picker merges the two inputs into a control of its own making, so
   the box rule written for .field-label never reached it and the dates sat
   naked between three framed fields. Every direct child of the bar that is
   not the button gets the same frame, whoever built it. */
.search > *:not(.btn):not(button) {
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  padding: 9px 12px; margin: 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.search > *:not(.btn):not(button):focus-within { border-color: var(--gold); background: #fff; }
.search .dp { border: 0; background: transparent; padding: 0; }
.search .dp__pop { padding: 20px; }

/* The dates no longer need a third of the bar to themselves. */
.search { grid-template-columns: 1.15fr 1.5fr 1.05fr .85fr auto; }
@media (max-width: 1100px) { .search { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 760px)  { .search { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px)  { .search { grid-template-columns: 1fr; } }

/* ==========================================================================
   THE HOUSE MARKS
   Line drawings on a 24-unit grid, taken from what a guest sees in Madinah.
   They carry no colour of their own: beside a hotel name they are gold, in
   the footer they are cream, inside a dropdown they follow the row.
   ========================================================================== */

.ico {
  width: 1.15em; height: 1.15em; flex: none;
  display: inline-block; vertical-align: -.2em;
  color: var(--gold); overflow: visible;
}

/* Beside a name, set on its own baseline so the two never drift apart. */
.hname { display: inline-flex; align-items: center; gap: .55em; }
.hname .ico { width: 1.15em; height: 1.15em; }

/* Property cards carry the mark at title size — it is the one place the set
   is meant to be looked at rather than glanced past. */
.prop__name .ico { width: .82em; height: .82em; opacity: .78; }

/* Footer and header lists: quieter, and cream rather than gold on the dark. */
.foot .ico { color: var(--gold-lite); opacity: .62; }
.foot a:hover .ico { opacity: 1; }

/* Dropdown rows. Sized against the row, not the page, so a long hotel name
   wrapping to two lines does not drag the mark down with it. */
.dd__ico { width: 22px; height: 22px; color: var(--gold); align-self: center; }
.dd__opt[aria-selected="true"] .dd__ico { color: var(--gold-dark); }
.dd__btn .dd__ico { width: 20px; height: 20px; }

/* The contact page address list. */
.addr__h { display: flex; align-items: center; gap: 9px; }

/* An option with no mark of its own — the "Select your hotel" placeholder —
   still holds the slot, so its text does not sit a mark to the left of every
   other row. */
.dd__gap { width: 22px; flex: none; }

/* The walking-distance badge. Its crosshatch square used to read as a broken
   image; it now carries the mark that says what the number means. */
.walk__ico { width: 15px; height: 15px; color: inherit; opacity: .85; }
.walk--light .walk__ico { color: var(--gold-lite); }
.flyout__h .walk__ico, .dhotel .walk__ico { width: 13px; height: 13px; }


/* The dropdown caret is a down-caret. Built from logical borders it flipped
   with the page, so in Arabic it turned into a sideways "next" arrow. */
.dd__btn::after { border-inline-end: 0; border-right: 1px solid var(--muted); }

/* The mark travels with the name wherever the name goes. Where a name can run
   to two lines — a card title, the reservation summary — it hangs at the top
   of the first line rather than floating at the middle of the block. */
.flyout__t.hname, .dhotel__n.hname,
.bkhotel__name.hname, .bksum__h.hname,
.prop__name.hname, .h-page.hname { align-items: flex-start; }
.flyout__t.hname .ico, .dhotel__n.hname .ico,
.bkhotel__name.hname .ico, .bksum__h.hname .ico,
.prop__name.hname .ico, .h-page.hname .ico { margin-top: .12em; }

/* Lists where the name is one line: the mark sits on its centre. */
.stay__name.hname, .footer__links .hname { align-items: center; }
.rowline .hname { justify-content: flex-end; text-align: end; }

/* A mark in the field label. It sits with the small-caps text rather than
   above it, and keeps its size when the label wraps to two lines. */
.eyebrow--ico { display: inline-flex; align-items: center; gap: 6px; }
.eyebrow__ico { width: 14px; height: 14px; flex: none; color: var(--gold); opacity: .8; }
.search .eyebrow__ico { width: 13px; height: 13px; }

/* The guest counter is a bare button where its neighbours are 34px controls,
   so the bar centred a shorter stack and dropped that one label below the
   other three. */
.search .gsel__btn { min-height: 34px; display: flex; align-items: center; }

/* ---------- Telephone: country picker + local number -------------------- */

.tel__row { display: grid; grid-template-columns: minmax(96px, 132px) 1fr; gap: 14px; align-items: end; }
.tel__cc { min-width: 0; }
.tel__num { min-width: 0; }
[dir="rtl"] .tel__num { text-align: start; }

/* The flag, not a photograph: contained rather than cropped, and small enough
   that the dial code beside it stays the thing being read. */
.tel .dd__btn img { width: 24px; height: 17px; object-fit: contain; }
.tel .dd__opt img { width: 26px; height: 18px; object-fit: contain; background: none; }
.tel .dd__menu { max-width: min(94vw, 330px); }
.tel .dd__label { font-variant-numeric: tabular-nums; }

@media (max-width: 420px) {
  .tel__row { grid-template-columns: minmax(84px, 108px) 1fr; gap: 10px; }
}

/* The dropdown's search box, for lists too long to read. Sticks to the top of
   the menu so it stays reachable while the list scrolls under it. */
.dd__find {
  position: sticky; top: -6px; z-index: 2;
  width: 100%; box-sizing: border-box; margin: -6px -6px 4px; padding: 11px 12px;
  width: calc(100% + 12px);
  border: 0; border-bottom: 1px solid var(--line-2); background: #fff;
  font: inherit; font-size: 14.5px; color: var(--ink); outline: 0;
}
.dd__find::placeholder { color: var(--muted); }
.dd__find:focus { border-bottom-color: var(--gold); }

/* The country picker: dial code and country on one line, so 247 of them do
   not turn the menu into a mile of scrolling. */
.tel .dd__opt { padding: 8px 10px; gap: 10px; }
.tel .dd__opt > span { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.tel .dd__opt-note { display: inline; margin: 0; font-size: 13.5px; }

/* The country-of-residence list borrows the phone picker's flag sizing.
   Hooked on the wrapper's own name rather than on the <select> inside it: the
   select is moved into the form when the widget is built, so any :has() rule
   looking for it here matches nothing and the flags come back cropped square. */
.dd[data-for="country"] .dd__opt img { width: 26px; height: 18px; object-fit: contain; background: none; }
.dd[data-for="country"] .dd__btn img { width: 24px; height: 17px; object-fit: contain; }

/* ---------- Sign-in panel ---------------------------------------------- */

.modal {
  width: min(94vw, 418px); max-width: none; padding: 0; border: 0;
  background: var(--surface, #fff);
  box-shadow: 0 40px 90px -30px rgba(20, 37, 30, .55);
  color: var(--ink);
  /* The one gold line the card gets — a rule at the top rather than a border
     all the way round, which would read as a frame instead of a letterhead. */
  border-top: 2px solid var(--gold);
}
.modal::backdrop { background: rgba(20, 37, 30, .55); }
@supports (backdrop-filter: blur(3px)) {
  .modal::backdrop { backdrop-filter: blur(3px); }
}

.modal__x { position: absolute; inset-block-start: 0; inset-inline-end: 0; margin: 0; }
.modal__close {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 46px; height: 46px; font-size: 25px; line-height: 1;
  color: var(--muted); font-family: inherit;
}
.modal__close:hover { color: var(--gold-dark); }

.modal__body { padding: 34px 34px 28px; }
.modal__t {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(27px, 5.4vw, 34px); line-height: 1.1; letter-spacing: -.02em;
  margin: 10px 0 24px; color: var(--ink);
}
.modal__form .field-label + .field-label { margin-top: 18px; }
.modal__aside { text-align: end; margin: 12px 0 20px; }
.modal__foot {
  margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line-2);
  font-size: 13.5px; color: var(--muted); text-align: center;
}

@media (max-width: 420px) { .modal__body { padding: 28px 22px 24px; } }

/* Reduced motion is the default here: the panel appears, it does not perform. */
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-in .18s ease-out; }
  @keyframes modal-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* .dd__opt sets display:flex, which outranks the browser's own rule for the
   hidden attribute — so filtering the list hid nothing and the menu merely
   scrolled to the match. */
.dd__opt[hidden] { display: none; }

/* ---------- Touch: never let focusing a field zoom the page --------------
   Safari on iOS zooms in whenever a field it is about to focus has type
   smaller than 16px, and then leaves the page zoomed — signing in on a phone
   threw the layout sideways every time. 16px is the whole fix; nothing else
   about the field changes. */
@media (max-width: 860px), (pointer: coarse) {
  .field,
  .dd__find,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="search"], input[type="number"],
  input[type="date"], input[type="url"],
  select, textarea {
    font-size: 16px;
  }
}

/* The search bar, the reservation bar and the guest counter each restate the
   field size at higher specificity, so they need naming here too — otherwise
   the one place a guest starts a booking on a phone is the one place that
   still zooms. */
@media (max-width: 860px), (pointer: coarse) {
  .search .field, .bksearch .field,
  .search input[type="date"], .bksearch input[type="date"],
  .search select, .bksearch select,
  .gsel__btn, .search .dd__label, .bksearch .dd__label {
    font-size: 16px;
  }
}

/* ==========================================================================
   OUR JOURNEY — the facade
   The one page that raises its voice. It borrows the dark the footer already
   uses rather than introducing a colour, so the shift from cream to deep
   olive reads as this page mattering and not as a second brand.
   ========================================================================== */

.jhead { padding: clamp(46px, 6vw, 84px) var(--gut) clamp(28px, 3vw, 40px); }
.jhead__lede { margin-top: 18px; max-width: 60ch; }

/* --- the wall ---------------------------------------------------------- */

.facade {
  background: var(--dark); color: var(--cream);
  padding: clamp(40px, 5vw, 68px) var(--gut) clamp(44px, 5.5vw, 76px);
}
/* The caption sits over the wall, quiet; the total sits under it, ruled off
   the way a sum is ruled off under the column it totals. */
.facade__note {
  margin: 0 0 clamp(16px, 2vw, 22px); font-size: 13.5px;
  color: rgba(243, 238, 228, .58); max-width: 42ch;
}
.facade__sum {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 14px;
  margin-top: clamp(18px, 2.2vw, 26px); padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid rgba(201, 169, 106, .38);
}
.facade__n {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(46px, 9vw, 96px); line-height: .86; letter-spacing: -.03em;
  color: var(--cream); font-variant-numeric: tabular-nums;
}
.facade__unit {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-lite);
}

/* 849 windows. Sized in fractions of the container so the wall keeps its
   proportion from 360px to a wide desktop rather than reflowing into a
   different building on every breakpoint. */
.facade__wall {
  display: flex; flex-wrap: wrap; gap: 3px;
  align-content: flex-start;
}
.facade__block { display: contents; }
.facade__wall i {
  display: block; width: 7px; height: 11px; flex: none;
  background: var(--gold-lite); opacity: .9;
  transition: opacity .5s ease, background-color .5s ease;
}
/* Unlit: the state journey.js starts from, and one it never reaches on its
   own — with no script every window is lit from the first paint. */
.facade__wall i.is-dark { opacity: .13; background: var(--cream); }

@media (max-width: 760px) {
  .facade__wall { gap: 2.5px; }
  .facade__wall i { width: 5.5px; height: 9px; }
}
@media (max-width: 420px) {
  .facade__wall { gap: 2px; }
  .facade__wall i { width: 4.5px; height: 7.5px; }
}

/* --- the four openings ------------------------------------------------- */

.jlist { list-style: none; margin: 0; padding: 0; }
.jrow {
  display: grid; grid-template-columns: 128px 1fr; gap: clamp(20px, 4vw, 52px);
  padding: clamp(26px, 3.4vw, 40px) 0;
  border-top: 1px solid var(--line);
}
.jrow:first-child { border-top: 0; }
.jrow__year {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(30px, 4vw, 46px); line-height: 1; letter-spacing: -.02em;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.jrow__name { font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2.6vw, 30px); margin: 0; letter-spacing: -.02em; }
.jrow__rooms { margin-top: 8px; font-size: 15px; color: var(--muted); }
.jrow__total {
  display: flex; width: fit-content; align-items: baseline; gap: 9px; margin-top: 16px;
  border: 1px solid var(--line); background: var(--panel); padding: 7px 13px;
}
.jrow__totalk { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.jrow__total b { font-size: 19px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.jrow__link { display: block; margin-top: 14px; font-size: 13.5px; color: var(--gold-dark); }
.jrow__link:hover { color: var(--gold); }

/* The year that has not happened. Dashed where the others are solid, and it
   carries no number of its own. */
.jrow--open { border-top-style: dashed; border-top-color: var(--gold-lite); opacity: .95; }
.jrow--open .jrow__year { color: var(--gold-lite); }
.jrow__name--open { color: var(--muted); }
.jrow__open { margin: 10px 0 0; font-size: 15px; color: var(--muted); max-width: 46ch; }

@media (max-width: 640px) {
  .jrow { grid-template-columns: 1fr; gap: 10px; }
  .jrow__year { font-size: 28px; }
}

/* Each opening arrives as it is read; without the script they are simply
   there, which is the same page a second later. */
@media (prefers-reduced-motion: no-preference) {
  .jrow[data-journey-step] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  .jrow[data-journey-step].is-in { opacity: 1; transform: none; }
  .jrow[data-journey-step]:not(.is-armed) { opacity: 1; transform: none; }
}

/* The proof strip under the hero claim: three facts, no adjectives. */
.proof {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px;
  margin: 18px 0 4px; padding: 0; color: rgba(255, 255, 255, .82);
  font-size: 13.5px; letter-spacing: .01em;
}
.proof b { font-weight: 400; font-size: 17px; color: #fff; font-variant-numeric: tabular-nums; }
.proof:hover { color: #fff; }
.proof span { display: inline-flex; align-items: baseline; gap: 7px; }
@media (max-width: 560px) { .proof { gap: 6px 16px; font-size: 12.5px; } .proof b { font-size: 15px; } }

/* ---------- Legal pages ------------------------------------------------- */
/* A measure narrow enough to read and a rule between sections: these are
   documents, not marketing pages, and they should look like it. */
.legal { max-width: 68ch; }
.legal__s + .legal__s { margin-top: clamp(26px, 3vw, 38px); padding-top: clamp(26px, 3vw, 38px); border-top: 1px solid var(--line); }
.legal__h { font-family: var(--display); font-weight: 300; font-size: clamp(20px, 2.2vw, 26px); margin: 0 0 12px; letter-spacing: -.015em; }
.legal__t { margin: 0; font-size: 15.5px; line-height: 1.72; color: var(--muted); }
.legal__t a { color: var(--gold-dark); }
.legal__foot { margin: clamp(30px, 4vw, 46px) 0 0; font-size: 13px; color: var(--muted); }
.footer__legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer__legal a { font-size: 12.5px; color: rgba(243, 238, 228, .5); }
.footer__legal a:hover { color: var(--gold-lite); }

/* ---------- Careers ----------------------------------------------------- */
.jobs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.job { background: var(--surface); padding: clamp(18px, 2.2vw, 26px); }
.job__t { font-family: var(--display); font-weight: 300; font-size: clamp(19px, 2.1vw, 24px); margin: 0; letter-spacing: -.015em; }
.job__m { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 9px; font-size: 13px; color: var(--muted); }
.job__k { border: 1px solid var(--line); padding: 3px 9px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dark); }
.job__s { margin: 12px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.careers__cv { margin: -4px 0 4px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* ---------- Field grids: one row height ---------------------------------
   A date input carries the browser's own picker button inside it, which makes
   it two pixels taller than the text and number fields beside it. Two pixels
   is enough to read as "these are not the same control", so every input in a
   grid is given the same floor. */
.field-grid input.field,
.field-grid select.field { min-height: 36px; }
@media (max-width: 860px), (pointer: coarse) {
  .field-grid input.field,
  .field-grid select.field { min-height: 44px; }
}

/* And the picker button itself, which arrives mid-blue on a cream field.
   Tinted to the house gold and given room, so it reads as part of the field
   rather than as something the browser dropped in. */
.field-grid input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .55; margin-inline-start: 6px;
  filter: grayscale(1) sepia(1) saturate(2.2) hue-rotate(347deg) brightness(.72);
}
.field-grid input[type="date"]:hover::-webkit-calendar-picker-indicator,
.field-grid input[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: 1; }
/* Number spinners add a second control to a field that already has one. */
.field-grid input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.field-grid input[type="number"]::-webkit-outer-spin-button,
.field-grid input[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* The range picker inside a form grid rather than the search bar: it stands in
   for two cells, so it takes the full row and wears the same underline as the
   fields around it. */
.field-grid .dp { grid-column: 1 / -1; position: relative; }
.field-grid .dp .dd__btn { min-height: 36px; }
.field-grid .dp .dp__pop { inset-inline-start: 0; }
@media (max-width: 860px), (pointer: coarse) {
  .field-grid .dp .dd__btn { min-height: 44px; font-size: 16px; }
}
/* The panel must not clip the calendar that opens out of it. */
.panel--pad:has(.dp) { overflow: visible; }

/* ---------- Help ---------------------------------------------------------- */
.help { max-width: 74ch; }
.help__g + .help__g, .help__out { margin-top: clamp(30px, 3.6vw, 46px); }
.help__gh { font-family: var(--display); font-weight: 300; font-size: clamp(19px, 2.1vw, 24px); margin: 0 0 14px; letter-spacing: -.015em; }
.help__q { border-top: 1px solid var(--line); }
.help__g .help__q:last-child { border-bottom: 1px solid var(--line); }
.help__q summary {
  cursor: pointer; list-style: none; padding: 15px 34px 15px 0; position: relative;
  font-size: 15.5px; color: var(--ink);
}
[dir="rtl"] .help__q summary { padding: 15px 0 15px 34px; }
.help__q summary::-webkit-details-marker { display: none; }
.help__q summary::after {
  content: ''; position: absolute; inset-inline-end: 6px; top: 22px;
  width: 8px; height: 8px; border-inline-end: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  transform: rotate(45deg); transition: transform .16s ease;
}
.help__q[open] summary::after { transform: rotate(-135deg); top: 26px; }
.help__q summary:hover { color: var(--gold-dark); }
.help__a { padding: 0 34px 18px 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
[dir="rtl"] .help__a { padding: 0 0 18px 34px; }

/* ==========================================================================
   RESERVATION HEADER — the drawer
   Wide screens keep the bar. Phones get one button and a drawer behind it,
   because a logo and five controls do not fit on 360px and the ones that get
   dropped are always the ones somebody needed.
   ========================================================================== */

.bkhdr__burger {
  display: none; background: none; border: 1px solid var(--line);
  width: 42px; height: 42px; flex: none; cursor: pointer;
  flex-direction: column; gap: 4px; align-items: center; justify-content: center;
  margin-inline-end: 4px;
}
.bkhdr__burger span { display: block; width: 15px; height: 1px; background: var(--ink); }
.bkhdr__burger:hover { border-color: var(--gold); }

/* The account chip: a name's initial once you are known, the words before. */
.bkhdr__acct {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 13px; border: 1px solid var(--line);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-dark); white-space: nowrap;
}
.bkhdr__acct:hover { border-color: var(--gold); color: var(--gold); }

@media (max-width: 860px) {
  .bkhdr__burger { display: flex; }
  /* Everything the drawer now carries leaves the bar; WhatsApp stays, because
     it is the one thing somebody stuck mid-booking reaches for without
     opening a menu first. */
  .bkhdr__wide { display: none; }
  .bkhdr__in { gap: 10px; }
}

.bkdrawer .drawer__body { padding: clamp(20px, 5vw, 30px) var(--gut); overflow-y: auto; }
.bkdrawer .dlink {
  display: flex; align-items: center; min-height: 54px;
  font-family: var(--display); font-weight: 300; font-size: 23px;
  color: var(--ink); border-bottom: 1px solid var(--line);
}
.bkdrawer .dlink:hover { color: var(--gold-dark); }
.bkdrawer .dcontact { margin-top: 22px; }
.bkdrawer .drawer__lang { margin-top: 26px; }
.bkdrawer .drawer__lang .footer__head { color: var(--muted); }
.bkdrawer .drawer__langs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 18px; }
.bkdrawer .drawer__langs a { font-size: 14px; color: var(--muted); min-height: 34px; display: flex; align-items: center; }
.bkdrawer .drawer__langs a.is-on { color: var(--gold-dark); }
/* The reservation drawer borrows the marketing drawer's bar, so the logo is
   already sized; the contact line just needs its two parts kept apart. */
.bkdrawer .dcontact a { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Confirming the number, in place ------------------------------ */
.telv { margin-top: 12px; }
.telv__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.telv__msg { font-size: 13px; color: var(--muted); }
.telv__msg.is-ok { color: var(--gold-dark); }
.telv__msg.is-bad { color: #A6402F; }
.telv__code { display: flex; align-items: flex-end; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.telv__code .field-label { flex: 1 1 160px; min-width: 0; }
.telv__in { letter-spacing: .34em; font-size: 18px; }
.telv .is-busy { opacity: .55; cursor: default; }
/* Confirmed: the row keeps its message and loses its controls. */
.telv.is-done .telv__row { gap: 8px; }
.telv.is-done .telv__msg::before {
  content: ''; display: inline-block; width: 13px; height: 7px; margin-inline-end: 8px;
  border-inline-start: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg) translate(1px, -2px);
}
@media (max-width: 480px) {
  .telv__code { gap: 10px; }
  .telv__code .btn { width: 100%; }
}

/* [hidden] means hidden. A class that sets display outranks the browser's own
   rule for the attribute, so anything shipped hidden and revealed by script was
   visible from the first paint. It caught the dropdown's filtered rows and then
   the verification code field; this stops it catching a third thing. */
[hidden] { display: none !important; }

/* ==========================================================================
   FLUID — response, springs, materials
   Written against Apple's Designing Fluid Interfaces. Three things it is not
   allowed to cost: a third-party script (the content policy allows script from
   this origin only), a request to anywhere else, or a change to any form's
   behaviour. Everything below is CSS.
   ========================================================================== */

:root {
  /* A spring, written as a timing function rather than run by a library.
     linear() samples the curve; browsers that do not know it keep the
     cubic-bezier on the line above, which is why both are always given.
     --ease-spring  critically damped, response ~0.35s — no overshoot, for
                    anything that simply appears or moves.
     --ease-throw   damping ~0.8 — a little overshoot, only for surfaces the
                    hand pushed: the drawer, a sheet, a flicked panel. */
  --ease-spring: cubic-bezier(.22, .8, .3, 1);
  --ease-throw: cubic-bezier(.22, 1.2, .36, 1);
  --ease-exit: cubic-bezier(.4, 0, .68, .06);   /* mirror of the entry path */
  --press: 120ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, .0039 1.6%, .0157 3.2%, .0625 6.6%, .1407 10.1%,
      .25 13.8%, .3906 17.8%, .5625 22.2%, .7656 27.1%, .9102 30.9%, 1.0088 34.6%,
      1.0472 37.3%, 1.0632 40.5%, 1.0491 45.6%, 1.0169 51.2%, .9968 56.4%,
      .9926 61.5%, .9994 71.5%, 1);
    --ease-throw: linear(0, .0055 1.5%, .0224 3.1%, .0894 6.4%, .1993 9.8%,
      .3486 13.3%, .5265 17%, .7181 21%, .8628 24.4%, .9718 27.9%, 1.0404 31.4%,
      1.0761 35.1%, 1.0844 39.2%, 1.0709 44.4%, 1.0393 50.5%, 1.0106 57.4%,
      .9954 65.5%, .9944 76.3%, 1);
  }
}

/* --- 1. Response: feedback on the press, not on the release --------------
   Nothing here waits for a click to resolve. Transform and opacity only, so
   the compositor does the work and nothing reflows under the finger. The
   press is quicker than the release: a real object gives immediately and
   comes back at its own pace. */

.btn, .btn-outline, .btn-ghost, .btn-sm, .btn--sm, .btn-mini,
.dd__btn, .dd__opt, .gsel__btn, .gsel__pm, .mast__acct, .bkhdr__acct,
.bkhdr__mine, .bkhdr__out, .modal__close, .drawer__close, .dlink,
.telv__go, .telv__ok, .jrow__link, .proof,
.dp__done, .dp__nav, .help__q summary, .footer__links a, .flyout__h {
  transition: transform 220ms var(--ease-spring),
              background-color .18s ease, border-color .18s ease,
              color .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active, .btn-outline:active, .btn-ghost:active, .btn-sm:active,
.btn--sm:active, .btn-mini:active, .telv__go:active, .telv__ok:active,
.dp__done:active {
  transform: scale(.972);
  transition-duration: var(--press);
}
.dd__btn:active, .gsel__btn:active, .mast__acct:active, .bkhdr__acct:active,
.bkhdr__mine:active, .bkhdr__out:active, .modal__close:active,
.drawer__close:active, .dp__nav:active {
  transform: scale(.96);
  transition-duration: var(--press);
}
/* Rows and links compress a little less — they are wide, and a wide element
   scaling as hard as a button reads as the page moving rather than the row. */
.dd__opt:active, .dlink:active, .jrow__link:active, .proof:active,
.help__q summary:active, .footer__links a:active, .flyout__h:active {
  transform: scale(.99);
  transition-duration: var(--press);
}
.gsel__pm:active:not(:disabled) { transform: scale(.9); transition-duration: 90ms; }

/* A card is pressed at its corner as often as its middle, so it sinks rather
   than shrinks. */
.prop:active, .hcard:active, .job:active { transform: translateY(1px) scale(.997); }
.prop, .hcard, .job { transition: transform 260ms var(--ease-spring), box-shadow .2s ease; }

/* --- 2. Motion: springs where there was an unnamed default ---------------- */

.dd__menu, .dp__pop, .bklang__pop, .gsel__pop, .flyout {
  transform-origin: top center;
}
[dir="rtl"] .dd__menu, [dir="rtl"] .dp__pop { transform-origin: top right; }

/* The dialog materialises rather than fading: blur and scale together, so it
   reads as a surface arriving instead of a picture being turned up. */
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-in 340ms var(--ease-spring); }
  @keyframes modal-in {
    from { opacity: 0; transform: translateY(10px) scale(.965); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
  }
  .modal::backdrop { animation: scrim-in 260ms ease-out; }
  @keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }

  /* The drawer arrives from the edge it lives on and leaves the same way. */
  .drawer:not([hidden]) { animation: drawer-in 380ms var(--ease-throw); }
  @keyframes drawer-in {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: none; }
  }
  [dir="rtl"] .drawer:not([hidden]) { animation-name: drawer-in-rtl; }
  @keyframes drawer-in-rtl {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* --- 3. Type: tracking belongs to the size, never to the stylesheet ------- */

.h-hero, .h-page, .h-sec, .h-card, .h-sub, .facade__n, .jrow__year,
.modal__t, .job__t, .legal__h, .help__gh, .prop__name {
  font-optical-sizing: auto;
}
/* .h-sub was the one display size still set to normal tracking, which reads
   loose beside the others. */
.h-sub { letter-spacing: -.012em; }

/* --- 4. Preferences beyond motion ---------------------------------------
   Reduced motion was already honoured. Transparency and contrast were not:
   a translucent panel is unreadable for some people, and a hairline border
   is invisible for others. */

@media (prefers-reduced-transparency: reduce) {
  .modal::backdrop { background: rgba(20, 37, 30, .82); backdrop-filter: none; }
  .dd__menu, .dp__pop, .bklang__pop, .gsel__pop, .flyout, .modal {
    background: var(--surface); backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .field { border-bottom-width: 2px; border-bottom-color: var(--ink); }
  .dd__menu, .dp__pop, .gsel__pop, .modal, .panel, .prop, .job {
    border: 1px solid var(--ink);
  }
  .btn-outline, .btn-ghost { border-color: var(--ink); color: var(--ink); }
  .lead, .muted, .dim, .jrow__rooms, .legal__t, .help__a { color: var(--ink); }
}

/* Reduced motion: the press still answers, it just does not travel. */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn-outline:active, .btn-ghost:active, .dd__btn:active,
  .dd__opt:active, .prop:active, .hcard:active, .job:active, .dlink:active,
  .gsel__pm:active:not(:disabled) { transform: none; opacity: .78; }
  .modal[open], .drawer:not([hidden]) { animation: none; }
}

/* --- 5. Material: the header is a layer, not a strip ---------------------
   It was an opaque band with a hairline under it, which reads as a piece of
   furniture bolted to the top of the page. As a translucent layer the content
   passes underneath it and the page keeps its full height. The hairline is
   replaced by an edge that only appears once there is something to separate
   from — a divider drawn over blank space is a line about nothing. */

.mast {
  background: color-mix(in srgb, var(--panel) 74%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: background-color .28s ease, border-color .28s ease;
}
/* Browsers without color-mix keep the solid panel rather than a wrong colour. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .mast { background: var(--panel); backdrop-filter: none; }
}
.mast.is-tight {
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  border-bottom-color: var(--line);
}
/* The scroll edge: a short fade under the bar where floating chrome actually
   overlaps content, instead of a drawn rule. */
.mast::after {
  content: ''; position: absolute; inset-inline: 0; top: 100%; height: 14px;
  pointer-events: none; opacity: 0; transition: opacity .28s ease;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--panel) 42%, transparent), transparent);
}
.mast.is-tight::after { opacity: 1; }
.mast { position: sticky; }

/* Vibrancy: type over a translucent surface needs more contrast and a touch
   more weight than the same type over a solid one, or it greys out as the
   photograph behind it moves. */
.mast__link, .mast__acct { font-weight: 450; }

@media (prefers-reduced-transparency: reduce) {
  .mast, .bkhdr {
    background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom-color: var(--line);
  }
  .mast::after { display: none; }
}
@media (prefers-contrast: more) {
  .mast, .bkhdr { background: var(--panel); backdrop-filter: none; border-bottom: 1px solid var(--ink); }
}

/* ==========================================================================
   BOTTOM SHEETS — phones only
   A popover anchored to its trigger is right on a wide screen and wrong on a
   phone, where the list ends up in a corner the holding hand cannot reach.
   Below the breakpoint the same panels rise from the bottom edge instead, and
   can be thrown back down. sheet.js does the physics; this is the shape.
   ========================================================================== */

@media (max-width: 760px) {
  .dd__menu.is-sheet, .gsel__pop.is-sheet, .dp__pop.is-sheet {
    position: fixed; inset: auto 0 0 0; z-index: 140;
    width: auto; max-width: none; min-width: 0;
    max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
    border: 0; border-radius: 18px 18px 0 0;
    padding: 0 0 max(18px, env(safe-area-inset-bottom));
    background: var(--surface);
    box-shadow: 0 -18px 48px -22px rgba(20, 37, 30, .5);
    /* A big surface reads as a thicker material than a chip does. */
    transform: translate3d(0, 100%, 0);
    will-change: transform;
    touch-action: none;
  }
  .dp__pop.is-sheet { padding-inline: 14px; }
  .gsel__pop.is-sheet { padding-inline: 4px; }

  /* The grip says "this can be dragged" before anyone tries. */
  .sheet__grip {
    position: sticky; top: 0; z-index: 2;
    padding: 10px 0 12px; background: var(--surface);
    display: flex; justify-content: center; cursor: grab;
  }
  .sheet__grip::before {
    content: ''; width: 38px; height: 4px; border-radius: 4px;
    background: var(--line); transition: background-color .18s ease;
  }
  .is-dragging .sheet__grip { cursor: grabbing; }
  .is-dragging .sheet__grip::before { background: var(--gold-lite); }

  .sheet__scrim {
    position: fixed; inset: 0; z-index: 139;
    background: rgba(20, 37, 30, .42);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .sheet__scrim[hidden] { display: none !important; }

  /* The search box in a long list stays put while the list scrolls under it. */
  .dd__menu.is-sheet .dd__find { position: sticky; top: 34px; margin: 0; width: 100%; }
  .dd__menu.is-sheet .dd__opt { padding: 13px 16px; }
}

@media (prefers-reduced-transparency: reduce) {
  .sheet__scrim { background: rgba(20, 37, 30, .72); backdrop-filter: none; }
}

/* A control that has been replaced must stop being touchable ------------
   The native <select> stays in the form because it is what gets submitted,
   and it is clipped to a pixel so nobody sees it. But it sits inside the same
   <label> as the control that replaced it, and a tap anywhere in a label is
   forwarded to the control the label belongs to — on iOS that opens the
   system picker wheel on top of our own sheet, so the guest is handed two
   lists of the same thing. Clipping hides it; only this stops it answering. */
.sr-only, select.sr-only, .field-label.sr-only {
  pointer-events: none !important;
  -webkit-user-select: none; user-select: none;
}

/* ---------- The panel's three faces, and its shape on a phone ------------ */

.pane[hidden] { display: none !important; }
.pane__back {
  appearance: none; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; padding: 0 0 4px;
  font: inherit; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.pane__back:hover { color: var(--gold-dark); }
.modal__lede { margin: 10px 0 22px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.modal__hint { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* On a phone the panel is a sheet like every other panel on the site: it comes
   from the bottom edge, keeps a grip, and is dismissed the same way. A dialog
   centred in the middle of a tall screen is a desktop shape. */
.modal .sheet__grip { display: none; }
@media (max-width: 760px) {
  .modal {
    width: 100%; max-width: none; margin: 0; top: auto; bottom: 0;
    border-radius: 18px 18px 0 0; border-top: 2px solid var(--gold);
    max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .modal .sheet__grip { display: flex; position: sticky; top: 0; z-index: 2; }
  .modal__body { padding: 6px 22px 22px; }
  /* Kept absolute: sticky honours inset-inline-end differently and pushed
     the button off the leading edge of the sheet. */
  .modal__x { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; z-index: 3; }
  .modal:focus { outline: none; }
  @media (prefers-reduced-motion: no-preference) {
    .modal[open] { animation: sheet-in 380ms var(--ease-throw); }
    @keyframes sheet-in {
      from { transform: translateY(100%); }
      to   { transform: none; }
    }
  }
}

/* The panel, sized for a phone -----------------------------------------
   The type scale was written for a dialog floating in the middle of a
   desktop screen. In a sheet that already has the whole width, the same
   sizes read as shouting and push the button below the fold. */
@media (max-width: 760px) {
  .modal__t { font-size: 25px; line-height: 1.12; margin: 6px 0 16px; }
  .modal__lede { margin: 0 0 18px; font-size: 14px; }
  .modal__body { padding: 4px 20px 18px; }
  .modal .kicker { font-size: 10px; }
  .pane__back { font-size: 11px; padding-bottom: 2px; }
  .modal__form .field-label + .field-label { margin-top: 14px; }
  .modal__aside { margin: 10px 0 16px; }
  .modal__aside .btn-link { font-size: 11px; }
  .modal__foot { margin-top: 16px; padding-top: 14px; font-size: 13px; }
  .modal__hint { font-size: 12px; }
  .modal .btn--block { padding-block: 15px; }
  .modal__close { width: 40px; height: 40px; font-size: 22px; }
}
@media (max-width: 380px) {
  .modal__t { font-size: 23px; }
  .modal__body { padding: 4px 16px 16px; }
}

/* The account control in the reservation bar: words where there is room for
   words, the mark where there is not. */
.bkhdr__accti { display: none; }
.bkhdr__accti .ico { width: 19px; height: 19px; color: var(--gold-dark); }
@media (max-width: 860px) {
  .bkhdr__acctw { display: none; }
  .bkhdr__accti { display: inline-flex; }
  .bkhdr__acct { padding: 0; width: 40px; height: 40px; border-radius: 50%; min-height: 0; }
}

/* The maker's mark in the reservation footer. Quiet on purpose: it sits at the
   end of a page where the guest is entering a card number, and anything that
   reads as a second brand there costs the first one trust. */
.bkfoot__by {
  display: flex; align-items: baseline; gap: 8px; justify-content: flex-end;
  margin-inline-start: auto;
}
.bkfoot__byl {
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); opacity: .72;
}
.bkfoot__byn {
  font-family: var(--display); font-weight: 400; font-size: 14px;
  letter-spacing: .01em; color: var(--gold-dark);
}
@media (max-width: 760px) {
  /* On a phone the footer stacks, so the mark takes its own line, centred with
     the rest rather than pushed to an edge that no longer exists.
     The full width is what does the centring: justify-content only arranges a
     box's own children inside it, and this box was exactly as wide as the two
     words, so it stayed wherever the stacked column had put it — hard against
     the leading edge. */
  .bkfoot__by { width: 100%; justify-content: center; margin: 6px 0 0; }
  .bkfoot__byl { font-size: 9px; }
  .bkfoot__byn { font-size: 13px; }
}

/* ==========================================================================
   THE RESERVATION BAR, SET TO ONE GEOMETRY — desktop
   Six controls sat in this bar at five different heights: a 40px circle, a
   37px pill, two 39px pills and a 34px square-cornered box that was also the
   only thing in the row shouting in capitals. Read one at a time each was
   defensible; read together they looked like six things borrowed from six
   pages. One height, one radius, one type size, one border — and the two that
   are not neutral (the reservation you already hold, the way into your
   account) say so in gold rather than in a different shape.
   Desktop only: below 861px the wide items leave the bar for the drawer, and
   the account button is deliberately a round mark there.
   ========================================================================== */
@media (min-width: 861px) {
  .bkhdr__nav,
  .bkhdr__mine,
  .bkhdr__out,
  .bklang__btn,
  .bkhdr__acct {
    min-height: 38px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 15px; border-radius: 999px;
    border: 1px solid var(--line);
    /* background-COLOR, not the shorthand: the shorthand resets
       background-image too, and that quietly took the globe off the
       language button. */
    background-color: transparent;
    font-size: 12.5px; font-weight: 400; letter-spacing: normal;
    text-transform: none; white-space: nowrap; text-decoration: none;
    color: var(--muted);
  }
  .bkhdr__nav:hover,
  .bkhdr__out:hover,
  .bklang__btn:hover { border-color: var(--gold); color: var(--ink); }

  /* The globe keeps the room it needs on the leading edge. */
  .bklang__btn { padding-inline: 30px 15px; }

  .bkhdr__mine {
    color: var(--gold-dark); border-color: var(--gold-lite);
    background: rgba(201, 169, 106, .1);
  }
  .bkhdr__mine:hover { border-color: var(--gold); background: rgba(201, 169, 106, .18); }
  .bkhdr__acct { color: var(--gold-dark); }
  .bkhdr__acct:hover { border-color: var(--gold); color: var(--gold-dark); }

  /* The one deliberate exception: an icon button is a circle, not a pill —
     but the same 38px tall as everything beside it. */
  .bkhdr__wa { width: 38px; height: 38px; background-size: 18px 18px; }
}

/* ---- marks for the reservation bar ------------------------------------
   Every control in the bar carries one, at the same 15px and on the same
   13px inset, so the row reads as a row of marks with words beside them
   rather than four labels and two icons. The three neutral ones are drawn in
   the muted grey the globe already used; the two that matter — the booking
   you hold and the door to your account — are in gold, which is the only
   thing distinguishing them, since they now share everyone else's shape. */
@media (min-width: 861px) {
  .bkhdr__nav, .bkhdr__mine, .bkhdr__out, .bkhdr__acct {
    padding-inline: 33px 15px;
    background-repeat: no-repeat; background-size: 15px 15px;
    background-position: 13px center;
  }
  [dir="rtl"] .bkhdr__nav,
  [dir="rtl"] .bkhdr__mine,
  [dir="rtl"] .bkhdr__out,
  [dir="rtl"] .bkhdr__acct { background-position: right 13px center; }

  /* Help — a question. */
  .bkhdr__nav {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7269' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.3a2.6 2.6 0 1 1 3.3 2.5c-.7.2-1 .8-1 1.5v.4'/%3E%3Cpath d='M11.9 17h.2'/%3E%3C/svg%3E");
  }
  /* The booking you already hold — a calendar with the day marked. */
  .bkhdr__mine {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C6A3C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='5.4' width='17.2' height='15.2' rx='2'/%3E%3Cpath d='M3.4 10.2h17.2M8.2 3.4v3.8M15.8 3.4v3.8'/%3E%3Cpath d='m9 15.2 2 2 4-4'/%3E%3C/svg%3E");
  }
  /* The way out to the site — an arrow leaving the frame. */
  .bkhdr__out {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7269' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11.6 12.4'/%3E%3Cpath d='M18.2 14.2V19a1.8 1.8 0 0 1-1.8 1.8H5.6A1.8 1.8 0 0 1 3.8 19V8.2a1.8 1.8 0 0 1 1.8-1.8h4.8'/%3E%3C/svg%3E");
  }
  /* The account — the same figure the phone shows in place of the words. */
  .bkhdr__acct {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C6A3C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='3.6'/%3E%3Cpath d='M4.6 20.4v-1c0-3.6 3.3-6.4 7.4-6.4s7.4 2.8 7.4 6.4v1'/%3E%3C/svg%3E");
  }
}

/* ---- the reservation footer, on two fixed rows -------------------------
   It was one wrapping flex row with space-between, which meant the copyright
   landed wherever the payment chips left room — taking AMEX out of that row
   was enough to send it to the right-hand end of the first line. A grid says
   where the four things go and stops depending on how long any of them is:
   the reassurance and the copyright down the leading edge, the payment marks
   and the maker's mark down the trailing one. */
@media (min-width: 761px) {
  .bkfoot__in {
    display: grid; grid-template-columns: 1fr auto;
    align-items: center; row-gap: 10px; column-gap: 24px;
  }
  .bkfoot__note  { grid-area: 1 / 1; }
  .bkfoot__marks { grid-area: 1 / 2; justify-content: flex-end; }
  .bkfoot__legal { grid-area: 2 / 1; }
  .bkfoot__by    { grid-area: 2 / 2; margin: 0; }
}

/* ==========================================================================
   NO HORIZONTAL RUBBER-BAND
   The booking page kept sliding left and right under the finger on an iPhone,
   and every measurement said the layout fitted: 320 to 430, both writing
   directions, clip lifted, nothing wider than the screen. It was not the
   layout. With overscroll-behavior-x left at auto, a horizontal drag makes
   Safari rubber-band the whole page sideways and spring it back even when
   there is nothing to scroll to — and a drag that reaches the end of one of
   the image strips hands the rest of the movement to the page as well.

   "none" on the root refuses the bounce; "contain" on the strips keeps their
   own overscroll to themselves, so a swipe through the last photograph stops
   there instead of moving the page under it. Vertical scrolling, the strips
   themselves and the sheets are all untouched: this is the x axis only.
   ========================================================================== */
html, body { overscroll-behavior-x: none; }

.bkhotel__strip, .bkroom__gal, .gal-strip, .thumbs,
.bklang__pop, .drawer__body, .dd__menu, .dp__pop {
  overscroll-behavior-x: contain;
}