/* ==========================================================================
   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); }

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 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); 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 img { width: 100%; height: clamp(120px, 14vw, 160px); object-fit: cover; display: block; }
.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; }