/* Arabic RTL viewport normalization.
   Scoped to Arabic pages so the English layout remains unchanged. */
html[dir="rtl"] {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow-x: clip;
  direction: rtl;
}

html[dir="rtl"] body {
  display: block;
  position: relative;
  inset: auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  float: none;
  transform: none !important;
  zoom: 1 !important;
  overflow-x: clip;
}

html[dir="rtl"] #siteHeader,
html[dir="rtl"] .announcement-strip,
html[dir="rtl"] #main-content,
html[dir="rtl"] #main-content > section,
html[dir="rtl"] body > footer {
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  float: none;
  box-sizing: border-box;
}

html[dir="rtl"] #siteHeader {
  position: sticky;
  top: 0;
  z-index: 100;
}

html[dir="rtl"] #main-content {
  overflow: clip;
}

html[dir="rtl"] #main-content > section {
  flex: 0 0 100%;
}

html[dir="rtl"] .container {
  width: min(92%, 1340px);
  min-width: 0;
  max-width: 1340px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

html[dir="rtl"] #siteHeader .nav {
  width: min(92%, 1340px);
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
}

html[dir="rtl"] .hero.hero-bg.hero-centered {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: none;
  align-items: center;
}

html[dir="rtl"] .hero-centered .hero-center-content {
  width: min(92%, 1000px);
  min-width: 0;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

html[dir="rtl"] img,
html[dir="rtl"] video,
html[dir="rtl"] iframe {
  max-width: 100%;
}

html[dir="rtl"] .about-grid,
html[dir="rtl"] .services-grid,
html[dir="rtl"] .clients-grid,
html[dir="rtl"] .team-grid,
html[dir="rtl"] .accred-grid,
html[dir="rtl"] .blog-grid,
html[dir="rtl"] .method-grid,
html[dir="rtl"] .philosophy-grid {
  min-width: 0;
}

@media (max-width: 650px) {
  html[dir="rtl"] .container,
  html[dir="rtl"] #siteHeader .nav,
  html[dir="rtl"] .hero-centered .hero-center-content {
    width: 92%;
    max-width: 540px;
  }

  html[dir="rtl"] #main-content > section {
    padding-left: 0;
    padding-right: 0;
  }

  html[dir="rtl"] .hero.hero-bg.hero-centered {
    min-height: max(650px, calc(100svh - 105px));
  }
}