/* Richmond Residences skin, loaded after the shared site.css (every project site wears its
   developer's look since 3 Oct 2026). Taken from the Mira Developments Presentation: cream paper
   #F4F1EA, the brown of its logos and headings #66442F, charcoal text #3C3C3B, sand and terracotta
   from the renders; headings in plain capitals with light spacing, as the Presentation sets them;
   square corners. Started from the Nad Al Sheba Gardens skin. The kit has no cut-out artwork, so
   there is no decoration. Arabic keeps normal spacing: spaced letters break Arabic joining. */
:root {
  --ink: #2F2622;
  --muted: #7A6A5E;
  --ground: #F7F4EE;
  --band: #EEE8DD;
  --line: #DCD2C3;
  --sand: #E6DCCB;
  --sea-pale: #DCE6E6;
  --brown: #66442F;
  --deep: #3D2A1F;
  --radius: 0;
  --shadow: 0 6px 28px rgba(61, 42, 31, 0.08);
}
body { background: var(--ground); }
.hdr__logo--project img { width: 200px; }
.hdr { background: rgba(247, 244, 238, 0.88); }
.hdr.is-solid, .hdr.is-menu, .mnav { background: var(--ground); }

/* ---------- type: capitals with light spacing, as the Presentation sets them ---------- */
.eyebrow { font: 400 13px/1.4 var(--sans); letter-spacing: 0.28em; color: var(--brown); margin-bottom: 14px; }
.h2, .form__title { font: 700 28px/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--deep); }
.h3, .units__head span, .unit__name, .pcard b, .hcard b { font-family: var(--sans); font-weight: 700; letter-spacing: 0.03em; }
.tag { font: 400 13px/1.4 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--brown); }
.hero__title { font: 700 56px/1.1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.hero__sub { letter-spacing: 0.01em; }
.gallery__head .h2, .pay__head .h2 { color: var(--deep); }

/* ---------- buttons: flat, small spaced capitals ---------- */
.btn { border-radius: 0; font: 600 14px/1.2 var(--ui); letter-spacing: 0.1em; text-transform: uppercase; }
.btn--big { font: 600 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: the sunset aerial, warm shade, the Mira Coral Bay mark at its own size ---------- */
.hero__dev { width: 104px; }
.hero::after { background: linear-gradient(90deg, rgba(38, 24, 16, 0.6) 0%, rgba(38, 24, 16, 0.28) 45%, rgba(38, 24, 16, 0) 70%), linear-gradient(180deg, rgba(38, 24, 16, 0.08) 0%, rgba(38, 24, 16, 0.2) 40%, rgba(38, 24, 16, 0.68) 100%); }
[dir="rtl"] .hero::after { background: linear-gradient(270deg, rgba(38, 24, 16, 0.6) 0%, rgba(38, 24, 16, 0.28) 45%, rgba(38, 24, 16, 0) 70%), linear-gradient(180deg, rgba(38, 24, 16, 0.08) 0%, rgba(38, 24, 16, 0.2) 40%, rgba(38, 24, 16, 0.68) 100%); }
.hero__title { 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(61, 42, 31, 0.45); border-radius: 0; }
.hcard--solid { background: var(--brown); border-radius: 0; }

/* ---------- bands in the kit's colours ---------- */
.amen { background: var(--sand); }
.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(--sand); }
.drive__n { background: var(--brown); }
.pay { background: var(--band); }
.pcard, .pay__promo { border-radius: 0; }
.pcard b { color: var(--brown); }
.enquire { background: var(--sea-pale); }
.enquire__form { border-radius: 0; }
.ftr { background: var(--deep); }
.gallery__nav, .totop { background: var(--deep); }
/* The "plan" slot holds an interior render here (the kit has no floor plans): let it fill the slot. */
.plans img { object-fit: cover; }

@media (max-width: 1100px) {
  .hero__title { font-size: 44px; }
}
@media (max-width: 900px) {
  .h2, .form__title { font-size: 20px; letter-spacing: 0.06em; line-height: 1.35; }
  .hero__dev { width: 84px; }
  .hdr__logo--project img { width: 164px; }
  .hero::after, [dir="rtl"] .hero::after { background: linear-gradient(180deg, rgba(38, 24, 16, 0.1) 0%, rgba(38, 24, 16, 0.5) 20%, rgba(38, 24, 16, 0.68) 45%, rgba(38, 24, 16, 0.8) 100%); }
  .hero__title { font-size: 30px; letter-spacing: 0.1em; line-height: 1.2; }
  .eyebrow, .tag { font-size: 12px; letter-spacing: 0.22em; }
  .btn { font-size: 13px; letter-spacing: 0.06em; }
  .amen--swipe .amen__text .h2 { font-size: 16px; letter-spacing: 0.06em; }
  .mobar .btn { white-space: normal; text-transform: none; letter-spacing: 0; font-size: 15px; line-height: 1.15; }
}

/* ---------- 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, [dir="rtl"] .hero__title { letter-spacing: 0; }

/* The long "Included" value starts on its label's line and keeps to the right edge, like the short
   values above it (Akra, 6 Oct 2026); it used to drop under the label. */
.facts div { flex-wrap: nowrap; align-items: flex-start; }
.facts dd { flex: 1 1 0; min-width: 0; }