/* Shared premium-polish layer — safe to include on any UAA prototype page.
   Purely additive: only styles elements that opt in via these classes. */

/* The closed mobile drawer (position:fixed + transform:translateX(100%))
   still registers as contributing to the document's scrollable width in
   some browsers, producing a stray horizontal scrollbar on every page even
   though the drawer is visually off-screen. overflow-x on html AND body
   together breaks header's position:sticky, so this sets it on html only. */
html{overflow-x:hidden}

/* ============ Shared site nav (dropdowns + mobile drawer) ============
   Used by the full 10-link header + Buildings/Upcoming dropdown menus,
   reused identically across every page via assets/header-nav.js. */
.nav-links{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.nav-item{position:relative}
.nav-item>.link{display:flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand,#F3EDE1);opacity:.85;transition:.3s;padding:12px 13px;cursor:pointer}
.nav-item>.link:hover,.nav-item>.link.active{opacity:1;color:var(--gold,#C9A227)}
.nav-item .cx{font-size:8px;opacity:.7;transition:.3s}
.nav-item:hover .cx{transform:rotate(180deg);color:var(--gold,#C9A227)}
.dropdown{position:absolute;top:calc(100% + 2px);left:0;background:#0B0B0B;background:rgba(11,11,11,.98);backdrop-filter:blur(16px);border:1px solid rgba(201,162,39,.3);border-radius:14px;padding:10px;min-width:230px;opacity:0;visibility:hidden;transform:translateY(12px);transition:.28s cubic-bezier(.16,1,.3,1);z-index:80;box-shadow:0 30px 60px rgba(0,0,0,.55)}
.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:none}
.dd-link{display:block;padding:9px 14px;font-size:12.5px;color:var(--gold-soft,#d8c27a);border-radius:8px;border:1px solid transparent;transition:.2s;letter-spacing:.02em;white-space:nowrap;margin:2px 0}
.dd-link:hover{color:#ffffff;background:#6e5300;border-color:#ffd03e}
.nav-actions{display:flex;align-items:center;gap:16px}
.menu-toggle{display:none;background:none;border:none;color:var(--sand,#F3EDE1);cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.menu-toggle i{width:26px;height:1.6px;background:var(--sand,#F3EDE1);display:block;transition:.3s}
@media(max-width:1200px){.nav-links{display:none}.menu-toggle{display:flex}}

/* Mobile nav-actions polish — on phones the lang switcher + gold CTA button
   used to crowd the hamburger with no responsive adjustment at all. The CTA
   is already duplicated at the bottom of the drawer, so drop it here; the
   lang switcher becomes a compact pill instead of loose inline text. */
@media(max-width:600px){
  .nav-actions{gap:10px}
  .nav-actions>.btn{display:none}
  .nav-actions .lang{display:flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.06em;background:rgba(243,237,225,.06);border:1px solid var(--line,rgba(243,237,225,.16));border-radius:999px;padding:6px 10px;white-space:nowrap}
  .nav-actions .lang b{font-weight:600}
  .menu-toggle{padding:8px}
}

/* mobile drawer */
.drawer{position:fixed;top:0;right:0;bottom:0;width:350px;max-width:88vw;z-index:90;background:var(--ink,#0B0B0B);border-left:1px solid var(--line,rgba(243,237,225,.16));transform:translateX(100%);transition:.5s cubic-bezier(.16,1,.3,1);overflow-y:auto;padding:24px}
.drawer.open{transform:none;box-shadow:-24px 0 60px rgba(0,0,0,.55)}
.drawer-scrim{position:fixed;inset:0;z-index:85;background:rgba(11,11,11,.6);opacity:0;visibility:hidden;transition:.4s}
.drawer-scrim.open{opacity:1;visibility:visible}
.drawer .dclose{background:none;border:1px solid var(--line,rgba(243,237,225,.16));color:var(--sand,#F3EDE1);width:42px;height:42px;border-radius:50%;font-size:16px;cursor:pointer;margin-bottom:18px}
.drawer .dhome{display:block;padding:13px 4px;font-family:var(--serif,serif);font-size:21px;text-transform:uppercase;border-bottom:1px solid var(--line,rgba(243,237,225,.16));color:var(--sand,#F3EDE1)}
.acc{border-bottom:1px solid var(--line,rgba(243,237,225,.16))}
.acc>button{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:none;color:var(--sand,#F3EDE1);font-family:var(--serif,serif);font-size:21px;text-transform:uppercase;padding:13px 4px;cursor:pointer;letter-spacing:.02em}
.acc>button .ac{color:var(--gold,#C9A227);font-size:18px;transition:.3s;line-height:1}
.acc.open>button .ac{transform:rotate(45deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .45s ease}
.acc.open .acc-body{max-height:640px;padding-bottom:10px}
.acc-body a{display:block;padding:9px 16px;font-size:13px;color:var(--sand-dim,#C9C2B3);letter-spacing:.04em}
.acc-body a:hover{color:var(--gold,#C9A227)}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.reveal{transition:none;opacity:1;transform:none}}

/* Card image zoom-on-hover — works with the .card > .slider/.stage/.track img
   markup already used across buildings.html / building.html / sim-card etc. */
.card,.sim-card{transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .45s,box-shadow .45s}
.card:hover,.sim-card:hover{box-shadow:0 24px 48px -16px rgba(0,0,0,.55)}
.card .track img,.card .im img,.sim-card .im img,.pcard .im img{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.card:hover .track img,.card:hover .im img,.sim-card:hover .im img,.pcard:hover .im img{transform:scale(1.09)}

/* Gold button shine sweep */
.btn.gold{position:relative;overflow:hidden}
.btn.gold::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s cubic-bezier(.16,1,.3,1)}
.btn.gold:hover::after{left:130%}

/* Stat pill — small rounded metric badge, e.g. "16 Buildings" */
.stat-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(201,162,39,.1);border:1px solid rgba(201,162,39,.35);color:var(--gold-soft,#d8c27a);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:7px 16px;border-radius:999px;margin-top:14px}
.stat-pill b{font-family:var(--serif,serif);font-size:15px;color:var(--gold,#C9A227);font-weight:600;letter-spacing:0}

/* Filter / sort bar */
.filter-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:26px 0 8px;padding:16px 18px;background:var(--midnight,#151515);border:1px solid var(--line,rgba(243,237,225,.16));border-radius:12px}
.filter-bar .fcount{font-size:12.5px;color:var(--sand-dim,#C9C2B3);margin-right:auto}
.filter-bar .fcount b{color:var(--gold,#C9A227);font-weight:600}
.filter-bar select{appearance:none;-webkit-appearance:none;background:rgba(243,237,225,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23C9A227'/%3E%3C/svg%3E") no-repeat right 14px center;border:1px solid var(--line,rgba(243,237,225,.16));border-radius:999px;color:var(--sand,#F3EDE1);font-family:var(--sans,inherit);font-size:12.5px;letter-spacing:.04em;padding:9px 34px 9px 16px;cursor:pointer;outline:none;transition:.3s}
.filter-bar select:hover,.filter-bar select:focus{border-color:var(--gold,#C9A227)}
.filter-bar select option{background:var(--ink,#0B0B0B);color:var(--sand,#F3EDE1)}

/* Page-head subtle hairline pattern accent */
.ph-pattern{position:relative;overflow:hidden}
.ph-pattern::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(115deg,rgba(201,162,39,.05) 0 1px,transparent 1px 64px);pointer-events:none}
.ph-pattern>*{position:relative}

/* Breadcrumb (matches building.html's .crumb) */
.crumb{font-size:12px;letter-spacing:.04em;color:var(--sand-dim,#C9C2B3);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumb a{color:var(--sand-dim,#C9C2B3);transition:.25s}
.crumb a:hover{color:var(--gold,#C9A227)}
.crumb span.sep{opacity:.4}
.crumb span.cur{color:var(--gold,#C9A227)}

/* Table row polish (units tables etc.) */
table.units tbody tr{transition:background .25s}
table.units tbody tr:hover{background:rgba(201,162,39,.06)}
table.units tbody tr:nth-child(even){background:rgba(243,237,225,.02)}

/* Language switcher (shared across pages that don't define their own .lang) */
.lang{font-size:11px;letter-spacing:.18em;color:var(--sand-dim,#C9C2B3);cursor:pointer;text-transform:uppercase}
.lang b{color:var(--sand,#F3EDE1)}
.lang-link{cursor:pointer;transition:.25s}
.lang-link:hover{color:var(--gold,#C9A227)}

/* Agent / leasing-team contact card — used in building.html & property.html
   sidebars in place of a plain enquiry button. */
.agent-card{display:flex;flex-direction:column;gap:14px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line,rgba(243,237,225,.16))}
.agent-card .ac-top{display:flex;align-items:center;gap:14px}
.agent-card .ac-avatar{width:56px;height:56px;flex-shrink:0;border-radius:50%;object-fit:contain;background:rgba(201,162,39,.08);border:1px solid rgba(201,162,39,.35);padding:8px}
.agent-card .ac-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand-dim,#C9C2B3)}
.agent-card .ac-name{font-family:var(--serif,serif);font-size:18px;color:var(--sand,#F3EDE1);margin-top:2px;line-height:1.2}
.agent-card .ac-sub{font-size:11.5px;color:var(--gold-soft,#d8c27a);margin-top:3px}
.agent-card .ac-wa{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#25D366;border-color:#25D366;color:#ffffff}
.agent-card .ac-wa:hover{background:#1ebe5a;border-color:#1ebe5a;color:#ffffff}
.agent-card .ac-wa svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}
.agent-card .ac-alt{display:flex;gap:10px}
.agent-card .ac-alt a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border:1px solid var(--line,rgba(243,237,225,.16));border-radius:10px;font-size:12px;letter-spacing:.04em;transition:.25s}
.agent-card .ac-alt a:hover{border-color:var(--gold,#C9A227);color:var(--gold,#C9A227)}

/* Sticky mobile "enquire" bar — appears on scroll, hidden on desktop where
   the sidebar form is already visible/sticky. */
.sticky-enquire{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;background:rgba(11,11,11,.97);backdrop-filter:blur(14px);border-top:1px solid var(--line,rgba(243,237,225,.16));transform:translateY(100%);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.sticky-enquire.show{transform:none}
@media(max-width:900px){.sticky-enquire{display:flex}}
.sticky-enquire .se-price{font-family:var(--serif,serif);color:var(--gold,#C9A227);font-size:16px;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sticky-enquire .se-price small{display:block;font-family:var(--sans,sans-serif);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sand-dim,#C9C2B3);font-weight:400}
.sticky-enquire .btn{white-space:nowrap;flex-shrink:0}

/* Lightbox thumbnail strip — reused inside both building.html's #lb and
   property.html's #lbox overlays. */
.lb-thumbs{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;padding:14px 20px;overflow-x:auto;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent)}
.lb-thumbs img{width:56px;height:42px;object-fit:cover;border-radius:6px;opacity:.5;cursor:pointer;border:1.5px solid transparent;transition:.25s;flex-shrink:0}
.lb-thumbs img:hover{opacity:.85}
.lb-thumbs img.on{opacity:1;border-color:var(--gold,#C9A227)}

/* ============ RTL (Arabic) support ============
   Most layout (flexbox/grid rows, justify-content) already mirrors
   automatically once dir="rtl" is set on <html> — these overrides only
   cover the spots that use explicit left/right (fixed-position UI, one-off
   asymmetric spacing) plus the Arabic font swap. */
[dir="rtl"] body,
[dir="rtl"] .eyebrow,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .serif {
  font-family:'Cairo','Jost',sans-serif;
}
[dir="rtl"] .hero h1 .it,
[dir="rtl"] .story h2 .it {
  font-style:normal; /* italic doesn't read well in Arabic script */
}
[dir="rtl"] .drawer{
  right:auto;left:0;border-left:none;border-right:1px solid var(--line,rgba(243,237,225,.16));
  transform:translateX(-100%);
}
[dir="rtl"] .drawer.open{transform:translateX(0)}
[dir="rtl"] .floaters{right:auto;left:22px}
[dir="rtl"] .enquire-tab{
  right:auto;left:0;transform:translateY(-50%) rotate(90deg);
  transform-origin:left center;border-radius:0 0 6px 6px;
}
@media(max-width:760px){[dir="rtl"] .floaters{left:auto;right:22px}}
[dir="rtl"] .crumb{flex-direction:row-reverse}
[dir="rtl"] .chips span:before,
[dir="rtl"] .lang b{unicode-bidi:isolate}

.dd-sub{padding:12px 14px 4px;margin-top:8px;border-top:1px solid var(--line,rgba(243,237,225,.16));font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand-dim,#C9C2B3)}
.dd-link small{opacity:.65;margin-inline-start:8px;font-size:11px;letter-spacing:.04em}
.acc-body .dd-sub{padding:12px 0 4px}.acc-body small{opacity:.6;margin-inline-start:8px;font-size:11px}