/* The Yards Plaza skin, loaded after the shared site.css. Taken from BEYOND's brochure: the navy of its map
   and of the PLAZA mark (#132F61), its cream pages (#FBF8EF) and sand land (#E8E2D6), light spaced capitals
   for its headings ("THE LOCATION", "MAP"), and the copper of the facade's fins for the buttons (#94572F).
   Arabic keeps normal spacing: spaced letters break Arabic joining. */
:root {
  --ink: #1B2440;
  --muted: #5E6475;
  --ground: #FBF8EF;
  --band: #F2EDE2;
  --line: #DDD5C6;
  --sand: #E8E2D6;
  --navy: #132F61;
  --copper: #94572F;
  --radius: 0;
  --shadow: 0 6px 28px rgba(19, 47, 97, 0.08);
}
body { background: var(--ground); }
.hdr { background: rgba(251, 248, 239, 0.92); }
.hdr.is-solid, .hdr.is-menu, .mnav { background: var(--ground); }
.hdr__logo--project img { width: 66px; height: auto; }

/* ---------- type: light spaced capitals in navy, as the brochure sets them ---------- */
.eyebrow { font: 500 14px/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper); margin-bottom: 10px; }
.h2, .form__title { font: 500 30px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.hero__title { font: 600 60px/1.08 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; 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); }
[dir="rtl"] .eyebrow, [dir="rtl"] .h2, [dir="rtl"] .form__title, [dir="rtl"] .hero__title { letter-spacing: 0; text-transform: none; }

/* ---------- buttons: flat, copper ---------- */
.btn { border-radius: 0; letter-spacing: 0.08em; text-transform: uppercase; font-size: 14px; }
[dir="rtl"] .btn { letter-spacing: 0; }
.btn--line { color: var(--navy); border-color: var(--navy); }
.btn--line:hover { background: var(--navy); }
.btn--white { color: var(--navy); }
.tab { border-radius: 0; }

/* ---------- first screen ---------- */
.hero__dev { width: 140px; }
.hcard--glass { background: rgba(19, 47, 97, 0.5); border-radius: 0; }
.hcard--solid { background: var(--navy); border-radius: 0; }

/* ---------- bands in the brochure'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(--navy); }
.loc__card { background: var(--sand); }
.drive__n { background: var(--navy); }

/* The floor plans are landscape sheets (the developer's A3 pages): two to a row. */
.plans--4 { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) {
  .plans--4 { grid-template-columns: 1fr; }
  .hero__title { font-size: 40px; letter-spacing: 0.05em; }
  .h2, .form__title { font-size: 24px; }
}

/* The price card in one line, "Offices from $776,000" (Akra, 22 Oct 2026): the label carries the line
   (content.mjs, usdLine), the AED figure and the USD note are hidden, and the card takes a row of its own
   above the payment card, so the line never wraps. */
.hero__cards { flex-direction: column; width: 410px; }
.hcard--glass { width: auto; min-height: 0; justify-content: center; border-radius: 0; }
.hcard--solid { width: auto; min-height: 150px; border-radius: 0; }
.hcard--glass b, .hcard--glass small { display: none; }
.hcard--glass span { font: 500 28px/1.2 var(--serif); letter-spacing: -0.01em; white-space: nowrap; }
[data-lang="ru"] .hcard--glass span { font-size: 26px; }
@media (max-width: 900px) {
  .hero__cards { width: 100%; }
  .hcard--glass span { font-size: 24px; }
  [data-lang="ru"] .hcard--glass span { font-size: 24px; }
}