/* Address Villas Tierra skin, loaded after the shared site.css. Taken from Emaar's brochure: the
   cover's deep teal #03465E and lighter teal #00667C, the pale aqua panel of page 15 (#A3C6BD), the
   white silk paper (#F6F6F6), headings in light serif capitals under an italic serif word ("Living in",
   "Luxe", "Embrace"). Arabic keeps normal spacing: spaced letters break Arabic joining. */
:root {
  --ink: #23302F;
  --muted: #5E6B69;
  --ground: #F6F6F4;
  --band: #ECEFEE;
  --line: #D3DCDA;
  --aqua: #A3C6BD;
  --aqua-pale: #DCEAE6;
  --teal: #03465E;
  --radius: 0;
  --shadow: 0 6px 28px rgba(3, 70, 94, 0.08);
}
body { background: var(--ground); }
.hdr { background: rgba(246, 246, 244, 0.88); }
.hdr.is-solid, .hdr.is-menu, .mnav { background: var(--ground); }
.hdr__logo--project img { width: 70px; height: auto; }

/* ---------- type: light serif capitals, the eyebrow in serif italic, as the brochure sets them ---------- */
.eyebrow { font: italic 400 18px/1.3 var(--serif); letter-spacing: 0.01em; text-transform: none; color: #00667C; margin-bottom: 10px; }
.h2, .form__title { font: 400 32px/1.2 var(--serif); letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal); }
.hero__title { font: 400 60px/1.08 var(--serif); letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4); }
.hero__sub { font-weight: 500; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); }
[dir="rtl"] .eyebrow, [dir="rtl"] .h2, [dir="rtl"] .form__title, [dir="rtl"] .hero__title { letter-spacing: 0; font-style: normal; }

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

/* ---------- first screen ---------- */
.hero__dev { width: 140px; }
.hcard--glass { background: rgba(3, 70, 94, 0.45); border-radius: 0; }
.hcard--solid { background: var(--teal); border-radius: 0; }

/* ---------- bands in the kit's colours ---------- */
.amen { background: var(--aqua-pale); }
.amen__text { background: var(--ground); }
.gallery { background: var(--band); }
.unit__row, .plans, .facts { background: var(--band); }
.unit.is-open .unit__row { background: var(--teal); }
.loc__card { background: var(--aqua-pale); }
.drive__n { background: var(--aqua); }

@media (max-width: 700px) {
  .hero__title { font-size: 40px; }
  .h2, .form__title { font-size: 26px; }
}