/* Scope localized layout to the new pages; existing site and app assets stay intact. */
.site-redesign :is(.hero,.inner-hero,.feature-story) > * { min-inline-size: 0; }
.site-redesign .language ul {
  right: auto;
  inset-inline-end: 0;
  max-block-size: min(70vh, 31rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.site-redesign .hero h1 { font-size: clamp(2.5rem, 4.45vw, 4.25rem); }
.site-redesign .hero > .facade-art {
  width: 100%;
  max-inline-size: 34rem;
  block-size: auto;
  border-radius: 1.5rem;
}
.site-redesign .company-art { min-block-size: min(35vw, 17rem); }
.site-redesign :is(.language, .tool-directory, .support-card, .marketing-footer) { overflow-wrap: anywhere; }

html[dir="rtl"] body {
  font-family: system-ui, "Noto Sans Arabic", "Geeza Pro", "Tahoma", sans-serif;
  line-height: 1.65;
}
html[dir="rtl"] :is(h1,h2,h3,.kicker,.hero-eyebrow,.marketing-footer nav h2) {
  letter-spacing: normal;
  line-height: 1.25;
}
html[dir="rtl"] .brand { unicode-bidi: isolate; }
html[dir="rtl"] .skip { left: auto; inset-inline-start: 12px; }
html[dir="rtl"] .mobile-menu nav { right: auto; inset-inline-end: 0; }
html[dir="rtl"] .language summary span { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .language a { text-align: right; }
html[dir="rtl"] .story-index a svg { margin-left: 0; margin-inline-start: auto; }
html[dir="rtl"] .feature-arrow { right: auto; inset-inline-end: 17px; }
html[dir="rtl"] .crumbs li+li::before { margin-right: 0; margin-inline-end: 10px; }
html[dir="rtl"] .faq details p { padding-inline: 3px 20px; }
html[dir="rtl"] .support-card address[dir="ltr"] { text-align: right; unicode-bidi: isolate; }
html[dir="rtl"] :is(.dues-tool-table td, [data-dues-total], .resident-tool__columns) {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] .dues-tool-table :is(th, td) { text-align: start; }
html[dir="rtl"] :is(.dues-tool input[dir="ltr"],.resident-tool textarea[dir="ltr"]) { text-align: right; }
/* Arrow cues follow reading direction. Building, chart and menu icons keep their orientation. */
html[dir="rtl"] :is([data-icon="arrow"],[data-icon="diagonal"]) { scale: -1 1; }
@media (max-width: 800px) {
  .site-redesign .hero h1 { font-size: clamp(2.25rem, 7.75vw, 3.85rem); max-inline-size: none; }
  .site-redesign .hero > .facade-art { max-inline-size: 22rem; justify-self: center; }
}
@media (max-width: 560px) {
  .site-redesign .company-art { min-block-size: 8rem; }
  html[dir="rtl"] .feature-arrow { inset-inline-end: 10px; }
}
html[dir="rtl"] .inner-hero a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; }