/* Mira Ocean Estates skin, loaded after the shared site.css. Taken from Mira Developments' presentation: cream
   grounds (#F6EFE4), the sand stone of the latticed facades (#C9A97C, bronze #8A6A3E for buttons), the deep sea of
   the closing page (#14303F), headings in a light wide sans in capitals ("A FULLY INTEGRATED COASTAL COMMUNITY").
   Arabic keeps normal spacing. */
:root {
  --ink: #1D2A31;
  --muted: #5E6A70;
  --ground: #F8F3EA;
  --band: #EFE5D5;
  --line: #DCCDB5;
  --sand: #E7D8BF;
  --sea: #14303F;
  --bronze: #8A6A3E;
  --bronze-pale: #F2E8D8;
  --radius: 0;
  --shadow: 0 6px 28px rgba(20, 48, 63, 0.08);
}
body { background: var(--ground); }
.hdr { background: rgba(248, 243, 234, 0.92); }
.hdr.is-solid, .hdr.is-menu, .mnav { background: var(--ground); }

.eyebrow { font: 600 13px/1.3 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); margin-bottom: 12px; }
.h2, .form__title { font: 400 34px/1.15 var(--sans); letter-spacing: 0.02em; color: var(--sea); }
.hero__title { font: 400 60px/1.02 var(--sans); letter-spacing: 0.06em; 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; }

.btn { border-radius: 0; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; font-weight: 700; }
[dir="rtl"] .btn { letter-spacing: 0; }
.btn--line { color: var(--sea); border-color: var(--sea); }
.btn--line:hover { background: var(--sea); }
.btn--white { color: var(--sea); }
.tab { border-radius: 0; }

.hero__dev { width: 160px; }
.hcard--glass { background: rgba(20, 48, 63, 0.5); border-radius: 0; }
.hcard--solid { background: var(--bronze); border-radius: 0; }

.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(--sea); }
.loc__card { background: var(--bronze-pale); }
.drive__n { background: var(--sea); }

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