/* Nad Al Sheba Gardens skin, loaded after the shared site.css (Akra, 2 Oct 2026: "more in the
   project's brand colours and way"). Taken from the Phase 11 brochure: cream paper #E8E2D6,
   bronze #AD8051 / #BBA084, deep olive-brown #3B3A2C, sage #96A08E (the map page), pale aqua
   #AAC1BF (the 4-bedroom villa pages); headings in thin, widely spaced capitals; the bronze and
   blue flower artwork (site/media/fl-*.webp, cut from the brochure by scripts/media.py).
   Arabic keeps normal spacing: spaced letters break Arabic joining. */
:root {
  --ink: #2E2A21;
  --muted: #6F6656;
  --ground: #F7F3EC;
  --band: #EDE6DA;
  --line: #D8CDBB;
  --sage: #96A08E;
  --sage-pale: #DFE3D8;
  --aqua-pale: #D9E4E2;
  --bronze: #8C6A45;
  --deep: #3B3A2C;
  --radius: 0;
  --shadow: 0 6px 28px rgba(59, 58, 44, 0.08);
}
body { background: var(--ground); }
.hdr { background: rgba(247, 243, 236, 0.86); }
.hdr.is-solid, .hdr.is-menu, .mnav { background: var(--ground); }

/* ---------- type: thin spaced capitals, as the brochure sets them ---------- */
.eyebrow { font: 400 13px/1.4 var(--sans); letter-spacing: 0.32em; color: var(--bronze); margin-bottom: 14px; }
.h2, .form__title { font: 400 30px/1.35 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--deep); }
.h3, .units__head span, .unit__name, .pcard b, .hcard b { font-family: var(--sans); font-weight: 400; letter-spacing: 0.04em; }
.tag { font: 400 13px/1.4 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze); }
.hero__title { font: 400 58px/1.12 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; }
.hero__sub { letter-spacing: 0.02em; }
.gallery__head .h2, .pay__head .h2 { color: var(--deep); }

/* ---------- buttons: flat, small spaced capitals ---------- */
.btn { border-radius: 0; font: 500 14px/1.2 var(--ui); letter-spacing: 0.12em; text-transform: uppercase; }
.btn--big { font: 500 15px/1.2 var(--ui); }
.btn--line { color: var(--deep); border-color: var(--deep); }
.btn--line:hover { background: var(--deep); }
.btn--white { color: var(--deep); }
.tab { border-radius: 0; letter-spacing: 0.1em; text-transform: uppercase; font-size: 13px; }

/* ---------- first screen: warm light, bronze card, the Meraas mark at its own size ---------- */
.hero__dev { width: 150px; }
.hero::after { background: linear-gradient(90deg, rgba(34, 27, 16, 0.55) 0%, rgba(34, 27, 16, 0.25) 45%, rgba(34, 27, 16, 0) 70%), linear-gradient(180deg, rgba(34, 27, 16, 0.05) 0%, rgba(34, 27, 16, 0.18) 40%, rgba(34, 27, 16, 0.65) 100%); }
[dir="rtl"] .hero::after { background: linear-gradient(270deg, rgba(34, 27, 16, 0.55) 0%, rgba(34, 27, 16, 0.25) 45%, rgba(34, 27, 16, 0) 70%), linear-gradient(180deg, rgba(34, 27, 16, 0.05) 0%, rgba(34, 27, 16, 0.18) 40%, rgba(34, 27, 16, 0.65) 100%); }
/* The text sits on a busy aerial picture (Akra, 2 Oct 2026: hard to read on the phone). */
.hero__title { font-weight: 500; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }
.hero__sub { font-weight: 500; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.4); }
.hcard--glass { background: rgba(59, 58, 44, 0.42); border-radius: 0; }
.hcard--solid { background: var(--bronze); border-radius: 0; }

/* ---------- bands in the kit's colours ---------- */
.amen { position: relative; overflow: hidden; background: var(--sage-pale); }
.amen__text { background: var(--ground); }
.gallery { background: var(--band); }
.unit__row, .plans, .facts { background: var(--band); }
.unit.is-open .unit__row { background: var(--deep); }
.loc__card { background: var(--sage-pale); }
.drive__n { background: var(--sage); }
.pay { position: relative; overflow: hidden; background: var(--band); }
.pcard, .pay__promo { border-radius: 0; }
.pcard b { color: var(--bronze); }
.enquire { position: relative; overflow: hidden; background: var(--aqua-pale); }
.enquire__form { border-radius: 0; position: relative; z-index: 1; }
.ftr { background: var(--deep); }
.gallery__nav, .totop { background: var(--deep); }

/* ---------- the flowers ---------- */
.amen::before, .pay::before, .enquire::before, .about::after {
  content: ''; position: absolute; pointer-events: none; background: no-repeat center / contain;
}
.about { position: relative; }
.about::after { width: 150px; height: 197px; left: -78px; top: 200px; background-image: url(/media/fl-bronze.webp); }
.amen::before { width: 260px; height: 342px; right: max(20px, calc(50% - 720px)); top: 30px; background-image: url(/media/fl-blue.webp); }
.pay::before { width: 200px; height: 201px; left: max(10px, calc(50% - 700px)); top: 40px; background-image: url(/media/fl-petal.webp); }
.enquire::before { width: 220px; height: 238px; right: max(0px, calc(50% - 760px)); bottom: -10px; background-image: url(/media/fl-poppy.webp); z-index: 2; }
[dir="rtl"] .about::after { left: auto; right: -78px; transform: scaleX(-1); }
[dir="rtl"] .amen::before { right: auto; left: max(20px, calc(50% - 720px)); transform: scaleX(-1); }
[dir="rtl"] .pay::before { left: auto; right: max(10px, calc(50% - 700px)); transform: scaleX(-1); }
[dir="rtl"] .enquire::before { right: auto; left: max(0px, calc(50% - 760px)); transform: scaleX(-1); }

@media (max-width: 1100px) {
  .hero__title { font-size: 46px; }
  .about::after { display: none; }
}
@media (max-width: 900px) {
  .h2, .form__title { font-size: 21px; letter-spacing: 0.16em; line-height: 1.4; }
  .hero__dev { width: 120px; }
  .hero::after, [dir="rtl"] .hero::after { background: linear-gradient(180deg, rgba(34, 27, 16, 0.1) 0%, rgba(34, 27, 16, 0.5) 20%, rgba(34, 27, 16, 0.68) 45%, rgba(34, 27, 16, 0.78) 100%); }
  .hero__title { font-size: 31px; letter-spacing: 0.14em; line-height: 1.2; }
  .eyebrow, .tag { font-size: 12px; letter-spacing: 0.26em; }
  .btn { font-size: 13px; letter-spacing: 0.08em; }
  .amen--swipe .amen__text .h2 { font-size: 16px; letter-spacing: 0.12em; }
  .amen::before { width: 96px; height: 126px; right: 4px; top: 10px; }
  .amen > .wrap > .eyebrow, .amen > .wrap > .h2 { padding-right: 96px; }
  [dir="rtl"] .amen > .wrap > .eyebrow, [dir="rtl"] .amen > .wrap > .h2 { padding-right: 0; padding-left: 96px; }
  .pay::before { display: none; }
  .mobar .btn { white-space: normal; text-transform: none; letter-spacing: 0; font-size: 15px; line-height: 1.15; }
  .enquire::before { width: 140px; height: 151px; left: auto; right: 0; top: 6px; bottom: auto; }
  [dir="rtl"] .amen::before { left: 6px; }
  [dir="rtl"] .enquire::before { right: auto; left: 0; }
}

/* ---------- Arabic: no letter spacing, no capitals ---------- */
[dir="rtl"] .eyebrow, [dir="rtl"] .h2, [dir="rtl"] .form__title, [dir="rtl"] .tag, [dir="rtl"] .btn, [dir="rtl"] .tab,
[dir="rtl"] .h3, [dir="rtl"] .units__head span, [dir="rtl"] .unit__name, [dir="rtl"] .hero__sub { letter-spacing: 0; }
[dir="rtl"] .h2, [dir="rtl"] .form__title { font-weight: 500; }