/* ============================================================
   SKYWALK — RTL / Arabic
   Scoped to [dir="rtl"]. Loaded after style.css on every page.

   The single biggest problem this file solves is not mirroring —
   the browser does most of that on its own once dir="rtl" is set.
   It is that the whole design system is built on Latin typographic
   devices that damage Arabic:

     letter-spacing   pulls joined Arabic letters apart. The brand
                      uses tracking from .03em to .28em in roughly
                      forty places. On Arabic every one of those
                      reads as a rendering fault.
     text-transform   uppercase does nothing to Arabic, so any rule
                      relying on it for hierarchy simply loses it —
                      weight and colour have to carry it instead.
     tight line-height Poppins sits happily at 1.02. Cairo has far
                      taller ascenders and deeper descenders, and
                      clips or collides at anything under about 1.3.

   Rather than chase those rules one at a time, they are reset
   broadly here and re-granted only where the content is Latin.
   ============================================================ */

/* ------------------------------------------------------------
   1. TYPEFACE
   ------------------------------------------------------------ */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea {
  font-family: 'Cairo', 'Poppins', sans-serif;
}
[dir="rtl"] body { line-height: 1.85; }

/* ------------------------------------------------------------
   2. TRACKING AND CASE
   Reset everywhere, then hand back to the places that are still
   genuinely Latin: the wordmark, partner and tenant names, tenant
   logos' alt text, and anything explicitly marked .is-latin.
   ------------------------------------------------------------ */
[dir="rtl"] *:not(.logo-type):not(.logo-type *):not(.is-latin):not(.is-latin *) {
  letter-spacing: normal;
}
[dir="rtl"] .eyebrow,
[dir="rtl"] .btn,
[dir="rtl"] .nav-cta,
[dir="rtl"] .tab-btn,
[dir="rtl"] .news-filter,
[dir="rtl"] .dept-btn,
[dir="rtl"] .stat-label,
[dir="rtl"] .news-date,
[dir="rtl"] .news-cat,
[dir="rtl"] .yr-sum em,
[dir="rtl"] .yr-rail-hint,
[dir="rtl"] .fac-shot figcaption,
[dir="rtl"] .signia-facts span,
[dir="rtl"] .hero-eyebrow,
[dir="rtl"] .hero-scroll,
[dir="rtl"] .tenant-more,
[dir="rtl"] .anchor-more,
[dir="rtl"] .map-swipe-hint,
[dir="rtl"] .adb-label,
[dir="rtl"] .rpc-status,
[dir="rtl"] .cd-label,
[dir="rtl"] .region-tag,
[dir="rtl"] .vp-step b,
[dir="rtl"] .job-meta span {
  text-transform: none;
}
/* Uppercase was doing the work of separating these small labels from body
   copy. With it gone, weight and colour take over so the hierarchy survives. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .adb-label,
[dir="rtl"] .rpc-status,
[dir="rtl"] .hero-eyebrow { font-weight: 600; }
[dir="rtl"] .stat-label,
[dir="rtl"] .news-date,
[dir="rtl"] .cd-label,
[dir="rtl"] .yr-sum em { font-weight: 500; }

/* The wordmark is a Latin logotype and keeps its original treatment
   in both languages — it is artwork, not copy. */
[dir="rtl"] .logo-type .l1 { letter-spacing: .24em; }
[dir="rtl"] .logo-type .l2 { letter-spacing: .16em; }

/* ------------------------------------------------------------
   3. HEADINGS
   Negative tracking and 1.02 line-height are Poppins settings.
   Cairo needs positive room in both directions.
   ------------------------------------------------------------ */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: normal; }
[dir="rtl"] .h-hero    { line-height: 1.35; font-weight: 700; }
[dir="rtl"] .h-section { line-height: 1.4; font-weight: 700; }
[dir="rtl"] .h-sub     { line-height: 1.5; font-weight: 600; }
[dir="rtl"] .lede      { line-height: 1.95; }

/* The masked line-by-line reveal measures a Poppins glyph box. Cairo's is
   taller, so the mask clipped the tops of alef and lam. */
[dir="rtl"] .ln-mask { padding: 0.34em 0.06em; margin: -0.34em -0.06em; }
[dir="rtl"] .clip-wrap { padding: 12px 0; }
[dir="rtl"] .clip-wrap .clip-inner { transform: translateY(140%); }

/* ------------------------------------------------------------
   4. NUMBERS AND LATIN FRAGMENTS INSIDE ARABIC
   A stat like "275,000" or a brand like "Signia by Hilton" sitting
   in an Arabic sentence gets reordered by the bidi algorithm unless
   it is isolated. Isolating keeps the digits and the Latin words in
   their own run while the sentence around them still flows RTL.
   ------------------------------------------------------------ */
[dir="rtl"] .stat-num,
[dir="rtl"] .cd-num,
[dir="rtl"] .yr-num,
[dir="rtl"] .signia-facts b,
[dir="rtl"] .dept-btn .count,
[dir="rtl"] .lp-eta {
  direction: ltr;
  unicode-bidi: isolate;
}
[dir="rtl"] .tenant-cell span.t-name,
[dir="rtl"] .partner-logo { direction: ltr; unicode-bidi: isolate; }

/* Phone, email and URL fields read left to right in every language. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"] { direction: ltr; text-align: right; }

/* ------------------------------------------------------------
   5. TEXT ALIGNMENT
   Most blocks inherit the right edge from dir="rtl" on <html>.
   These are the ones that were pinned left in style.css and so
   stayed left-aligned in Arabic — the "alignment is off" problem.
   ------------------------------------------------------------ */
[dir="rtl"] .stat-cell,
[dir="rtl"] .teaser-copy,
[dir="rtl"] .progress-copy,
[dir="rtl"] .loc-copy,
[dir="rtl"] .about-dev-block,
[dir="rtl"] .value-card,
[dir="rtl"] .mp-phase-row,
[dir="rtl"] .region-row,
[dir="rtl"] .anchor-body,
[dir="rtl"] .yr-card-body,
[dir="rtl"] .yr-head,
[dir="rtl"] .hn-body,
[dir="rtl"] .signia-copy,
[dir="rtl"] .job-card,
[dir="rtl"] .job-body,
[dir="rtl"] .vip-step,
[dir="rtl"] .intent-card,
[dir="rtl"] .fac-shot figcaption,
[dir="rtl"] .newsletter-copy,
[dir="rtl"] .rpc-blurb,
[dir="rtl"] .legal-body { text-align: right; }

[dir="rtl"] .hero-inner { text-align: right; align-items: flex-start; }
[dir="rtl"] .hero-cta-row { justify-content: flex-start; }
[dir="rtl"] .footer-bottom { text-align: right; }

/* Centred blocks stay centred — centring is symmetrical. */
[dir="rtl"] .final-cta-inner,
[dir="rtl"] .countdown-wrap,
[dir="rtl"] .tenant-more { text-align: center; }

/* ------------------------------------------------------------
   6. DIRECTIONAL LAYOUT
   ------------------------------------------------------------ */
[dir="rtl"] .nav-right { flex-direction: row-reverse; }
[dir="rtl"] .nav-links .caret { margin-left: 0; margin-right: 5px; }
[dir="rtl"] .footer-top,
[dir="rtl"] .footer-legal { flex-direction: row-reverse; }

[dir="rtl"] .teaser-grid { direction: rtl; }
[dir="rtl"] .teaser.reverse .teaser-grid { direction: ltr; }
[dir="rtl"] .teaser.reverse .teaser-grid > * { direction: rtl; }

[dir="rtl"] .hero-scroll {
  right: auto; left: clamp(20px, 4vw, 56px); flex-direction: row-reverse;
}

[dir="rtl"] .mobile-menu { align-items: flex-start; }
[dir="rtl"] .mobile-menu .mm-close { right: auto; left: 12px; }

[dir="rtl"] .has-dropdown .dropdown,
[dir="rtl"] .menu-item-has-children .sub-menu {
  left: auto; right: 50%; transform: translateX(50%) translateY(6px);
}
[dir="rtl"] .has-dropdown:hover .dropdown,
[dir="rtl"] .menu-item-has-children:hover .sub-menu {
  transform: translateX(50%) translateY(0);
}

/* The rule before the eyebrow belongs on the leading edge, which is the
   right-hand one in Arabic. */
[dir="rtl"] .eyebrow { flex-direction: row-reverse; justify-content: flex-end; }

/* Arrows point the way the reader is going. An arrow glyph baked into the
   copy is flipped by the bidi algorithm already; an arrow drawn in CSS is
   not, so it is mirrored here. */
[dir="rtl"] .btn { flex-direction: row-reverse; }
[dir="rtl"] .btn-arrow i,
[dir="rtl"] .mp-phase-row .r-go i,
[dir="rtl"] .loc-proximity .lp-go i { transform: scaleX(-1); }

[dir="rtl"] .loc-address {
  border-left: none; border-right: 1px solid var(--c-blue);
  padding-left: 0; padding-right: 18px;
}
[dir="rtl"] .region-pin-card { text-align: right; }
[dir="rtl"] .rpc-close { right: auto; left: 8px; }
[dir="rtl"] .phase-tooltip { text-align: right; }
[dir="rtl"] .mp-back { left: auto; right: 20px; flex-direction: row-reverse; }
[dir="rtl"] .mp-legend { flex-direction: row-reverse; }
[dir="rtl"] .loc-proximity a { flex-direction: row-reverse; }
[dir="rtl"] .facility-item { flex-direction: row-reverse; text-align: right; }

/* ------------------------------------------------------------
   7. UPDATES — TIMELINE
   The grid mirrors on its own, but the spine is drawn with an
   absolute `left`, which does not: it stayed on the left-hand
   side while the dots moved to the right, leaving the line and
   the nodes disconnected.
   ------------------------------------------------------------ */
[dir="rtl"] .tl::before{ left:auto; right:139px; }
[dir="rtl"] .tl-when{ align-items:flex-start; text-align:left; }
[dir="rtl"] .tl-node i{ left:auto; right:19px; }
[dir="rtl"] .tl-card{ padding-left:0; padding-right:26px; }
[dir="rtl"] .tl-text p{ margin-right:0; }
[dir="rtl"] .tl-ymark b{ text-align:right; }
@media (max-width:900px){
  [dir="rtl"] .tl::before{ right:5px; }
  [dir="rtl"] .tl-node i{ right:1px; left:auto; }
  [dir="rtl"] .tl-ymark{ padding-left:0; padding-right:30px; }
  [dir="rtl"] .tl-when{ justify-content:flex-end; }
  [dir="rtl"] .tl-card{ padding-right:0; }
}

/* ------------------------------------------------------------
   7b. UPDATES — LEGACY YEAR STACK
   The row is a four-column grid; in RTL the year number belongs on
   the right and the chevron on the left, which the grid does on its
   own once the column order is reversed.
   ------------------------------------------------------------ */
[dir="rtl"] .yr-head { direction: rtl; }
[dir="rtl"] .yr-head:hover { padding-right: 14px; padding-left: 14px; }
[dir="rtl"] .yr-chev { transform: rotate(45deg) translateY(-2px); }
[dir="rtl"] .yr.is-open .yr-chev { transform: rotate(225deg) translateY(-2px); }
[dir="rtl"] .yr-rail { direction: rtl; }
[dir="rtl"] .yr-sum { align-items: flex-start; }
[dir="rtl"] .news-meta { flex-direction: row-reverse; justify-content: flex-end; }
[dir="rtl"] .signia-facts { flex-direction: row-reverse; justify-content: flex-end; }
[dir="rtl"] .signia-facts li { align-items: flex-start; }

/* The lightbox close control moves to the leading corner. */
[dir="rtl"] .sl-close { right: auto; left: 22px; }

/* ------------------------------------------------------------
   8. FORMS
   ------------------------------------------------------------ */
[dir="rtl"] form label { text-align: right; display: block; }
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select { text-align: right; }
[dir="rtl"] .checkbox-label,
[dir="rtl"] .consent-row { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .vip-progress { flex-direction: row-reverse; }
[dir="rtl"] .file-drop { text-align: center; }

/* ------------------------------------------------------------
   9. MOTION
   ------------------------------------------------------------ */
[dir="rtl"] .ln-mask .ln { transform-origin: right center; }

/* Centred CTA blocks keep their eyebrow centred in Arabic too; the general
   RTL eyebrow rule above pushes it to the leading edge. */
[dir="rtl"] .final-cta-inner .eyebrow { justify-content: center; }
[dir="rtl"] .next-step .final-cta-actions { justify-content: flex-start; }
[dir="rtl"] .photo-hero-media::after{
  background:
    linear-gradient(270deg, rgba(10,11,13,.88) 0%, rgba(10,11,13,.6) 42%, rgba(10,11,13,.12) 100%),
    linear-gradient(180deg, rgba(10,11,13,.35) 0%, rgba(10,11,13,0) 30%, rgba(10,11,13,0) 70%, rgba(10,11,13,.9) 100%);
}
/* Arabic menu: right-aligned, and no letter-spacing (it breaks joined letters). */
[dir="rtl"] .dropdown a{ text-align:right; align-items:flex-end; }
[dir="rtl"] .dropdown .dd-title,
[dir="rtl"] .footer-col-title{ letter-spacing:0; }
[dir="rtl"] .chapter-nav a, [dir="rtl"] .chapter-num, [dir="rtl"] .tenant-group-title,
[dir="rtl"] .as-label, [dir="rtl"] .av-num, [dir="rtl"] .about-lux-link{ letter-spacing:0; }

[dir="rtl"] .element-logo{ margin:0 0 26px auto; }
[dir="rtl"] .bld-legend{ left:auto; right:20px; }
[dir="rtl"] .bld-hint{ right:auto; left:20px; }
[dir="rtl"] .bld-legend button, [dir="rtl"] .bld-hint, [dir="rtl"] .bf-floor{ letter-spacing:0; }
@media (max-width:760px){ [dir="rtl"] .bld-legend{ left:10px; right:10px; } }
[dir="rtl"] .compare-label{ letter-spacing:0; }

/* Select arrow on the leading (left) edge in Arabic. The base rule draws it
   22px/16px in from the RIGHT, where Arabic text starts, so the chevron sat
   on top of the first letter of every dropdown (seen on the contact form's
   subject field in the 27 Sep browser test). */
[dir="rtl"] .field select{ background-position:16px center, 22px center; padding-left:40px; }

/* Keyboard access to the header dropdowns — mirrors the hover rule above. */
[dir="rtl"] .has-dropdown:focus-within .dropdown{ transform:translateX(50%) translateY(0); }