/* Keep the artwork on the right; Arabic text still reads right-to-left.
   Physical margins are intentional: inline margins would mirror this layout. */
html[lang="ar"] body.is-rtl {
  --ar-hero-copy-width: min(600px, 44vw);
}

html[lang="ar"] body.is-rtl :is(.hero, .project-hero) {
  direction: ltr;
  justify-content: flex-start;
}

html[lang="ar"] body.is-rtl :is(.hero-copy, .project-hero-copy) {
  position: relative;
  inset: auto;
  transform: none;
  flex: 0 1 var(--ar-hero-copy-width);
  width: var(--ar-hero-copy-width);
  max-width: var(--ar-hero-copy-width);
  min-width: 0;
  margin-left: 0;
  margin-right: auto;
  direction: rtl;
  text-align: right;
}

/* Leave the shell and offer metadata full-width, moving only the hero copy. */
html[lang="ar"] body.is-rtl :is(.references-hero, .offers-hero, .offer-detail-hero) > .shell > :is(.project-breadcrumb, .eyebrow, h1, .lead) {
  display: block;
  width: var(--ar-hero-copy-width);
  max-width: var(--ar-hero-copy-width);
  margin-left: 0;
  margin-right: auto;
  direction: rtl;
  text-align: right;
}

html[lang="ar"] body.is-rtl :is(.hero, .references-hero, .offers-hero, .offer-detail-hero, .project-hero) h1 {
  width: 100%;
  max-width: var(--ar-hero-copy-width);
  font-size: clamp(48px, 5.2vw, 84px);
  line-height: 1.16;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

html[lang="ar"] body.is-rtl .hero-foot {
  direction: rtl;
}

html[lang="ar"] body.is-rtl .hero {
  padding-bottom: 140px;
}

@media (min-width: 601px) and (max-width: 900px) {
  html[lang="ar"] body.is-rtl {
    --ar-hero-copy-width: 52vw;
  }
  html[lang="ar"] body.is-rtl :is(.hero, .references-hero, .offers-hero, .offer-detail-hero, .project-hero) h1 {
    font-size: clamp(40px, 5.6vw, 50px);
  }
}

/* A readable left-hand column on phones, rather than a cramped half-width. */
@media (max-width: 600px) {
  html[lang="ar"] body.is-rtl {
    --ar-hero-copy-width: min(82%, 420px);
  }
  html[lang="ar"] body.is-rtl :is(.hero-copy, .project-hero-copy) h1 {
    max-width: 100%;
  }
  html[lang="ar"] body.is-rtl :is(.hero, .references-hero, .offers-hero, .offer-detail-hero, .project-hero) h1 {
    font-size: clamp(30px, 8.6vw, 46px);
    line-height: 1.2;
  }
  html[lang="ar"] body.is-rtl .project-hero h1 {
    font-size: clamp(26px, 7vw, 40px);
  }
}