/* ==========================================================================
   Serenity — site styles
   Desktop reads as a boutique hotel; mobile behaves like an app (bottom tab
   bar, full-width cards, 44px tap targets). Written with logical properties
   throughout so the Arabic (RTL) build needs no separate stylesheet.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}

html[lang="ar"] body { font-family: var(--font-arabic); }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
  font-family: var(--font-arabic-display); font-weight: 700;
  line-height: 1.35; /* Arabic ascenders + tashkeel need more room than 1.1 */
}
html[lang="ar"] .hero h1 { line-height: 1.4; }

p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--link-hover); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

::selection { background: var(--brand-gold); color: #fff; }

.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;
}

.skip-link {
  position: absolute; inset-block-start: -100px; inset-inline-start: var(--space-4);
  z-index: 100; background: var(--surface-raised); color: var(--text-heading);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
}
.skip-link:focus { inset-block-start: var(--space-4); }

/* --- Type helpers ----------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-gold-deep);
  font-weight: 600;
}
html[lang="ar"] .eyebrow { font-family: var(--font-arabic); letter-spacing: .06em; }

.lead { font-size: var(--text-body-lg); line-height: var(--leading-loose); }
.muted { color: var(--text-muted); }

/* --- Layout ----------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section { padding-block: clamp(56px, 8vw, 96px); }
.section--band { background: var(--surface-band); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section--offer { padding-block: clamp(28px, 4vw, 44px) 0; }

.section-head { max-width: 620px; margin-block-end: var(--space-7); }
.section-head h2 { margin-block: var(--space-2) var(--space-3); font-size: var(--text-h1); }

.grid { display: grid; gap: var(--space-6); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
}

/* --- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 11px 22px;
  font-family: inherit; font-size: 15px; font-weight: 500;
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn svg { inline-size: 17px; block-size: 17px; flex: none; }

.btn--primary { background: var(--accent-primary); color: var(--text-on-accent); }
.btn--primary:hover { background: var(--accent-primary-hover); color: var(--text-on-accent); }

.btn--accent { background: var(--accent, var(--accent-primary)); color: var(--text-on-accent); }
.btn--accent:hover { background: var(--accent-deep, var(--accent-primary-hover)); color: var(--text-on-accent); }

.btn--secondary { background: transparent; color: var(--text-heading); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--surface-band); color: var(--text-heading); }

.btn--ghost { background: transparent; color: var(--text-body); }
.btn--ghost:hover { background: var(--surface-band); color: var(--text-heading); }

.btn--on-photo { background: rgba(253, 251, 247, .16); color: #fff; border-color: rgba(255, 255, 255, .55); backdrop-filter: blur(2px); }
.btn--on-photo:hover { background: rgba(253, 251, 247, .28); color: #fff; }

.btn--lg { padding: 14px 28px; font-size: 17px; }
.btn--sm { padding: 8px 16px; font-size: 14px; min-height: 36px; }
.btn--block { width: 100%; }

/* --- Badges & chips --------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: var(--accent, var(--brand-gold)); color: var(--text-on-accent);
  font-size: var(--text-caption); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill);
}
.badge--soft { background: var(--accent-tint, var(--sand-2)); color: var(--accent-deep, var(--brand-gold-deep)); }
html[lang="ar"] .badge { letter-spacing: 0; }

.rating {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-body-sm); font-weight: 600; color: var(--text-heading);
}
.rating svg { inline-size: 15px; block-size: 15px; color: var(--brand-gold); }

/* --- Header ----------------------------------------------------------- */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: var(--surface-card);
  border-block-end: 1px solid var(--border-subtle);
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.site-header--overlay {
  position: fixed; inset-inline: 0; background: transparent; border-block-end-color: transparent;
}
.site-header--overlay.is-stuck {
  background: var(--surface-card);
  border-block-end-color: var(--border-subtle);
  box-shadow: var(--shadow-card);
}

.header-inner {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: 72px;
}

.brand { display: inline-flex; align-items: center; gap: var(--space-3); flex: none; }
.brand__mark { block-size: 40px; width: auto; }
.brand__type { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.brand__name {
  font-family: var(--font-display); font-size: 23px; font-weight: 600;
  letter-spacing: .2em; color: var(--text-heading);
}
.brand__sub {
  font-family: var(--font-body); font-size: 8px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted);
}
/* Over a photo the lockup is always light. */
.site-header--overlay:not(.is-stuck) .brand__name { color: #fff; }
.site-header--overlay:not(.is-stuck) .brand__sub { color: rgba(255, 255, 255, .70); }
.brand--footer { align-items: center; margin-block-end: var(--space-4); }
.brand--footer .brand__mark { block-size: 56px; }
.brand--footer .brand__name { font-size: 30px; color: #F4EEE3; }
.brand--footer .brand__sub { font-size: 9px; color: rgba(244, 238, 227, .55); }

.main-nav { display: flex; gap: var(--space-6); margin-inline-start: auto; }
.main-nav a {
  font-size: var(--text-body-sm); font-weight: 500; letter-spacing: .04em;
  color: var(--text-body); padding-block-end: 4px;
  border-block-end: 2px solid transparent;
}
.main-nav a:hover, .main-nav a[aria-current="page"] {
  color: var(--text-heading); border-block-end-color: var(--brand-gold);
}

.header-tools { display: flex; align-items: center; gap: var(--space-2); flex: none; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-inline-size: var(--tap-min); min-block-size: var(--tap-min);
  padding-inline: var(--space-3);
  background: transparent; color: var(--text-body);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
  cursor: pointer; font-family: inherit; font-size: var(--text-body-sm); font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--surface-band); color: var(--text-heading); }
.icon-btn svg { inline-size: 18px; block-size: 18px; }
.icon-btn .theme-icon-dark { display: none; }
:root[data-theme="dark"] .icon-btn .theme-icon-light { display: none; }
:root[data-theme="dark"] .icon-btn .theme-icon-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .theme-icon-light { display: none; }
  :root:not([data-theme="light"]) .icon-btn .theme-icon-dark { display: block; }
}

/* Header rendered over the hero photo */
.site-header--overlay:not(.is-stuck) .header-inner { text-shadow: 0 1px 12px rgba(18, 15, 12, .55); }
.site-header--overlay:not(.is-stuck) .main-nav a { color: rgba(255, 255, 255, .92); }
.site-header--overlay:not(.is-stuck) .main-nav a:hover,
.site-header--overlay:not(.is-stuck) .main-nav a[aria-current="page"] { color: #fff; }
.site-header--overlay:not(.is-stuck) .icon-btn { color: rgba(255, 255, 255, .9); border-color: rgba(255, 255, 255, .35); }
.site-header--overlay:not(.is-stuck) .icon-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.site-header--overlay:not(.is-stuck) .header-cta { background: var(--brand-gold); color: #fff; }

.nav-toggle { display: none; }

@media (max-width: 900px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .header-inner { min-height: 64px; gap: var(--space-3); }
  .brand__mark { block-size: 32px; }
  .brand__name { font-size: 19px; }
  .brand__sub { font-size: 7px; }
  .header-tools { margin-inline-start: auto; }
}
/* Phone: the brand subline and the roomy pill padding are the first things
   to go, so the menu button always fits on one row. */
@media (max-width: 560px) {
  .brand__sub { display: none; }
  .brand { gap: var(--space-2); }
  .header-tools { gap: var(--space-1); }
  .icon-btn { min-inline-size: 40px; min-block-size: 40px; padding-inline: var(--space-2); }
  .container { padding-inline: var(--space-4); }
}

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 60;
  background: var(--surface-page);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.mobile-nav[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.mobile-nav a.mobile-nav__link {
  font-family: var(--font-display); font-size: 30px; color: var(--text-heading);
  padding-block: var(--space-3); border-block-end: 1px solid var(--border-subtle);
}
html[lang="ar"] .mobile-nav a.mobile-nav__link { font-family: var(--font-arabic-display); }
.mobile-nav__foot { margin-block-start: auto; display: flex; gap: var(--space-3); }

/* Mobile bottom tab bar — the app-like layer from the design system */
.tab-bar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45;
  display: none;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--border-subtle);
  padding-block-end: env(safe-area-inset-bottom, 0);
}
.tab-bar a {
  flex: 1; min-block-size: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-muted); font-size: 11px; font-weight: 500;
}
.tab-bar a[aria-current="page"] { color: var(--brand-gold-deep); font-weight: 600; }
.tab-bar svg { inline-size: 21px; block-size: 21px; }
/* The app-like tab bar is for phones and small tablets; wider tablets keep
   the ordinary header + menu. */
@media (max-width: 760px) {
  .tab-bar { display: flex; }
  body { padding-block-end: 58px; }
}

/* --- Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  min-block-size: min(88vh, 760px);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(22, 19, 15, .86) 0%, rgba(22, 19, 15, .58) 34%, rgba(22, 19, 15, .10) 68%, rgba(22, 19, 15, 0) 84%),
    linear-gradient(to bottom, rgba(22, 19, 15, .52) 0%, rgba(22, 19, 15, 0) 22%),
    linear-gradient(to top, rgba(22, 19, 15, .78) 0%, rgba(22, 19, 15, .34) 42%, rgba(22, 19, 15, .06) 70%);
}
html[dir="rtl"] .hero::after {
  background:
    linear-gradient(to left, rgba(22, 19, 15, .86) 0%, rgba(22, 19, 15, .58) 34%, rgba(22, 19, 15, .10) 68%, rgba(22, 19, 15, 0) 84%),
    linear-gradient(to bottom, rgba(22, 19, 15, .52) 0%, rgba(22, 19, 15, 0) 22%),
    linear-gradient(to top, rgba(22, 19, 15, .78) 0%, rgba(22, 19, 15, .34) 42%, rgba(22, 19, 15, .06) 70%);
}
.hero__body { text-shadow: 0 1px 20px rgba(18, 15, 12, .45); position: relative; z-index: 2; padding-block: var(--space-8) clamp(48px, 7vw, 88px); color: #fff; }
.hero__body .eyebrow { color: var(--brand-gold); }
.hero h1 {
  font-size: var(--text-hero); color: #fff;
  margin-block: var(--space-3) var(--space-4);
  max-inline-size: 14ch;
}
.hero p { max-inline-size: 52ch; color: rgba(255, 255, 255, .88); font-size: var(--text-body-lg); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }

.hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  margin-block-start: clamp(32px, 5vw, 56px);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid rgba(255, 255, 255, .25);
}
.hero__facts div { color: #fff; }
@media (max-width: 560px) {
  .hero { min-block-size: min(92vh, 720px); }
  .hero__actions { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
  .hero__actions .btn { width: 100%; }
  .hero__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .hero__facts strong { font-size: 21px; }
  .hero__facts span { font-size: var(--text-caption); }
}
.hero__facts strong { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 500; }
html[lang="ar"] .hero__facts strong { font-family: var(--font-arabic-display); }
.hero__facts span { font-size: var(--text-body-sm); color: rgba(255, 255, 255, .72); }

/* --- Story ------------------------------------------------------------ */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.story__figure { position: relative; }
.story__figure img {
  inline-size: 100%; block-size: min(60vh, 520px); object-fit: cover;
  border-radius: var(--radius-arch);
 
}
.story__caption {
  margin-block-start: var(--space-3); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted);
}
html[lang="ar"] .story__caption { letter-spacing: 0; text-transform: none; }
.story p + p { margin-block-start: var(--space-4); }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } }

/* --- Unit cards ------------------------------------------------------- */
.unit-card {
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.unit-card:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.unit-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.unit-card__media img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
 
  transition: transform var(--dur-med) var(--ease-out);
}
.unit-card:hover .unit-card__media img { transform: scale(1.03); }
.unit-card__media .badge { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; }
.unit-card__no {
  position: absolute; inset-block-start: 12px; inset-inline-end: 12px;
  background: rgba(253, 251, 247, .92); color: var(--ink-1);
  border-radius: var(--radius-pill); padding: 4px 12px;
  font-size: var(--text-body-sm); font-weight: 600; letter-spacing: .04em;
}
:root[data-theme="dark"] .unit-card__no { background: rgba(20, 18, 14, .82); color: #F4EEE3; }
.unit-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.unit-card__body h3 { font-size: var(--text-h3); }
.unit-card__meta { font-size: var(--text-body-sm); color: var(--text-muted); }
.unit-card__blurb { font-size: var(--text-body-sm); }
.unit-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-block-start: auto; padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--border-subtle);
}
.price { display: flex; align-items: baseline; gap: 6px; }
.price strong { font-size: var(--text-body-lg); font-weight: 600; color: var(--accent, var(--brand-gold-deep)); }
.price span { font-size: var(--text-caption); color: var(--text-muted); }

/* --- Offer band ------------------------------------------------------- */
.offer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: var(--space-5) var(--space-8);
  background: linear-gradient(120deg, var(--brand-gold) 0%, var(--brand-gold-deep) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.offer h2 { color: #fff; font-size: var(--text-h2); }
.offer p { color: rgba(255, 255, 255, .88); max-inline-size: 56ch; }
@media (max-width: 780px) {
  .offer { grid-template-columns: 1fr; }
  .offer .btn { width: 100%; }
}

/* --- Reviews ---------------------------------------------------------- */
.review {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  margin: 0;
}
.review__stars { display: inline-flex; gap: 3px; color: var(--brand-gold); }
.review__stars svg { inline-size: 15px; block-size: 15px; }
.review blockquote {
  margin: 0;
  font-family: var(--font-display); font-size: var(--text-body-lg); font-style: italic;
  color: var(--text-heading); line-height: var(--leading-normal);
}
html[lang="ar"] .review blockquote { font-family: var(--font-arabic-display); font-style: normal; }
.review figcaption { font-size: var(--text-body-sm); color: var(--text-muted); margin-block-start: auto; }
.review--quiet { background: transparent; box-shadow: none; }

/* --- Location --------------------------------------------------------- */
.place { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .place { grid-template-columns: 1fr; } }

.map-frame {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-card); background: var(--surface-band);
}
.map-frame iframe { display: block; inline-size: 100%; block-size: 380px; border: 0; }
.place figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
:root[data-theme="dark"] .map-frame iframe { filter: invert(.9) hue-rotate(180deg) brightness(1.05) contrast(.92); }

.walk-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.walk-list li {
  display: flex; align-items: center; gap: var(--space-3);
  min-block-size: 40px; font-size: var(--text-body-sm);
  border-block-end: 1px solid var(--border-subtle); padding-block-end: var(--space-2);
}
.walk-list li:last-child { border-block-end: 0; }
.walk-list svg { inline-size: 18px; block-size: 18px; color: var(--link); flex: none; }
.walk-list b { margin-inline-start: auto; color: var(--text-heading); font-weight: 600; white-space: nowrap; }

/* --- Forms ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 6px; margin-block-end: var(--space-4); }
.field > span { font-size: var(--text-body-sm); font-weight: 500; color: var(--text-heading); }
.field input, .field textarea {
  inline-size: 100%; padding: 12px 14px; min-block-size: var(--tap-min);
  font-family: inherit; font-size: var(--text-body-md); color: var(--text-heading);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { min-block-size: 128px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--unit-teal); box-shadow: var(--focus-ring); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }

.form-note { font-size: var(--text-caption); color: var(--text-muted); margin-block-start: var(--space-3); }

.contact-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6);
}
.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.contact-list li { display: flex; align-items: flex-start; gap: var(--space-3); }
.contact-list svg { inline-size: 20px; block-size: 20px; color: var(--brand-gold-deep); flex: none; margin-block-start: 2px; }
.contact-list b { display: block; font-size: var(--text-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
html[lang="ar"] .contact-list b { letter-spacing: 0; text-transform: none; }
.contact-list a, .contact-list span.value { font-size: var(--text-body-md); color: var(--text-heading); }
.contact-list a:hover { color: var(--link); }

/* --- Footer ----------------------------------------------------------- */
.site-footer {
  background: var(--surface-deep); color: var(--text-on-deep);
  padding-block: var(--space-8) var(--space-6);
  margin-block-start: var(--space-8);
}
:root[data-theme="dark"] .site-footer { border-block-start: 1px solid var(--border-subtle); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h3 {
  font-family: var(--font-body); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--brand-gold); font-weight: 600; margin-block-end: var(--space-4);
}
html[lang="ar"] .site-footer h3 { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer a { color: var(--text-on-deep); font-size: var(--text-body-sm); }
.site-footer a:hover { color: var(--brand-gold); }
.site-footer p { font-size: var(--text-body-sm); line-height: var(--leading-loose); }
.footer-legal {
  margin-block-start: var(--space-6); padding-block-start: var(--space-5);
  border-block-start: 1px solid rgba(253, 251, 247, .15);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between;
  font-size: var(--text-caption); color: rgba(253, 251, 247, .5);
}

/* --- Unit page -------------------------------------------------------- */
.unit-hero { padding-block-start: var(--space-6); }
.breadcrumb { font-size: var(--text-body-sm); margin-block-end: var(--space-4); }
.breadcrumb a { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.breadcrumb a:hover { color: var(--link); }
.breadcrumb svg { inline-size: 15px; block-size: 15px; }
html[dir="rtl"] .breadcrumb svg { transform: scaleX(-1); }

.unit-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-4); }
.unit-title h1 { font-size: var(--text-h1); }
.unit-sub { margin-block-start: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-body-sm); color: var(--text-muted); }

/* Gallery */
.gallery { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-3); margin-block-start: var(--space-6); }
.gallery__main { position: relative; }
.gallery__shot {
  padding: 0; border: 0; background: none; cursor: zoom-in; display: block;
  inline-size: 100%; block-size: 100%; overflow: hidden; border-radius: var(--radius-lg);
}
.gallery__shot img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform var(--dur-med) var(--ease-out); }
.gallery__shot:hover img { transform: scale(1.03); }
.gallery__main .gallery__shot { aspect-ratio: 4 / 3; }
.gallery__side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--space-3); }
.gallery__more {
  display: inline-flex; align-items: center; gap: 8px; inline-size: auto; block-size: auto;
  box-shadow: var(--shadow-card);
  position: absolute; inset-block-end: var(--space-4); inset-inline-end: var(--space-4);
  background: rgba(253, 251, 247, .92); color: var(--ink-1);
  border-radius: var(--radius-pill); padding: 10px 18px; font-size: var(--text-body-sm); font-weight: 600;
  cursor: pointer; border: 0; font-family: inherit; min-height: 40px;
}
:root[data-theme="dark"] .gallery__more { background: rgba(20, 18, 14, .88); color: #F4EEE3; }
@media (max-width: 700px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery__side { display: none; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(12, 10, 8, .985);
  display: none; flex-direction: column;
}
.lightbox[data-open="true"] { display: flex; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); color: #fff; }
.lightbox__bar button { background: rgba(255, 255, 255, .12); border: 0; color: #fff; border-radius: var(--radius-pill); min-inline-size: 44px; min-block-size: 44px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lightbox__bar button:hover { background: rgba(255, 255, 255, .24); }
.lightbox__count { font-size: var(--text-body-sm); color: rgba(255, 255, 255, .72); }
.lightbox__stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 var(--space-4) var(--space-5); min-block-size: 0; }
.lightbox__stage img { max-block-size: 100%; max-inline-size: 100%; object-fit: contain; border-radius: var(--radius-md); }
.lightbox__nav { position: absolute; inset-block-start: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .12); border: 0; color: #fff; inline-size: 48px; block-size: 48px; border-radius: var(--radius-pill); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.lightbox__nav--prev { inset-inline-start: var(--space-4); }
.lightbox__nav--next { inset-inline-end: var(--space-4); }
html[dir="rtl"] .lightbox__nav svg { transform: scaleX(-1); }

/* Unit body layout */
.unit-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(340px, 430px); gap: clamp(32px, 4vw, 56px); align-items: start; margin-block-start: var(--space-8); }
@media (max-width: 1000px) { .unit-layout { grid-template-columns: 1fr; } }

.unit-block + .unit-block { margin-block-start: var(--space-7); padding-block-start: var(--space-7); border-block-start: 1px solid var(--border-subtle); }
.unit-block h2 { font-size: var(--text-h2); margin-block-end: var(--space-4); }

.amenities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); }
@media (max-width: 560px) { .amenities { grid-template-columns: 1fr; } }
.amenities li { display: flex; align-items: center; gap: var(--space-3); min-block-size: 36px; font-size: var(--text-body-sm); }
.amenities svg { inline-size: 18px; block-size: 18px; color: var(--accent, var(--unit-teal)); flex: none; }

.spec-row { display: flex; flex-wrap: wrap; gap: var(--space-7); margin-block-start: var(--space-6); padding-block-start: var(--space-5); border-block-start: 1px solid var(--border-subtle); }
.spec-row div strong { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 500; color: var(--text-heading); }
html[lang="ar"] .spec-row div strong { font-family: var(--font-arabic-display); }
.spec-row div span { font-size: var(--text-caption); color: var(--text-muted); }

/* Booking panel */
.booking-panel {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4);
}
.booking-panel .price strong { font-size: 30px; }
.booking-panel .eyebrow + .price { margin-block-end: var(--space-1); }
.booking-panel__note { font-size: var(--text-caption); color: var(--text-muted); text-align: center; }
.booking-panel hr { border: 0; border-block-start: 1px solid var(--border-subtle); margin: 0; }
.booking-panel__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-body-sm); }
/* Booking itself happens in the Bookingmood form inside the card, so WhatsApp
   is a quiet secondary route rather than a competing primary button. */
.booking-panel__ask {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: var(--tap-min);
  font-size: var(--text-body-sm); font-weight: 500; color: var(--text-body);
}
.booking-panel__ask:hover { color: var(--link); }
.booking-panel__ask svg { inline-size: 17px; block-size: 17px; flex: none; }
/* Clear the sticky header (and the mobile book bar) when jumping to the card. */
#availability { scroll-margin-block-start: 88px; }
.booking-panel__perks li { display: flex; gap: var(--space-2); align-items: center; }
.booking-panel__perks svg { inline-size: 16px; block-size: 16px; color: var(--success); flex: none; }

.calendar-frame {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  overflow: hidden; background: #fff;
  margin-inline: calc(var(--space-2) * -1);
}
/* Bookingmood only posts its height to origins registered with the account,
   so the local build cannot rely on the auto-resize listener in site.js. This
   height fits the collapsed calendar plus the embed's own booking form. */
.calendar-frame iframe { display: block; inline-size: 100%; block-size: 1120px; border: 0; }

/* Mobile sticky booking bar */
.book-bar {
  position: fixed; inset-inline: 0; inset-block-end: 58px; z-index: 46;
  display: none; align-items: center; justify-content: space-between; gap: var(--space-3);
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-5);
}
@media (max-width: 1000px) {
  .book-bar { display: flex; inset-block-end: 0; }
  .booking-panel { position: static; }
  body.has-book-bar { padding-block-end: 76px; }
}
@media (max-width: 760px) {
  .book-bar { inset-block-end: 58px; }
  body.has-book-bar { padding-block-end: 134px; }
}

/* Other units strip */
.other-units { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 700px) { .other-units { grid-template-columns: 1fr; } }

/* --- Motion ----------------------------------------------------------- */
/* Opt-in: the hidden state only applies once the script has run, so content
   is never invisible if JS fails or IntersectionObserver never fires. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}