/* ==========================================================================
   NOMU — Arabic
   Loaded only by ar.html, after the other stylesheets.
   The layout already flips by itself (the CSS uses logical properties such
   as margin-inline-start), so this file only adjusts the type:
   Cairo for everything (Brand Guidelines 05), no letter-spacing (it breaks
   the joined Arabic letters), no uppercase, and taller lines.
   ========================================================================== */

:root[lang="ar"] {
  --font-display: var(--font-arabic);
  --font-text:    var(--font-arabic);
  --size-hero:    clamp(3rem, 10vw, 8.6rem);
  --size-h2:      clamp(2.3rem, 5.8vw, 5rem);
}

/* Arabic letters join, so never space them out */
:root[lang="ar"] body * { letter-spacing: 0 !important; }

/* Latin words inside the Arabic page (NOMU, iOS…) keep the Latin fonts */
:root[lang="ar"] [lang="en"] { font-family: "Poppins", sans-serif; }

body { line-height: 1.75; }

/* Light + bold headings: Cairo ExtraLight 200 and ExtraBold 800 */
.title,
.hero__title,
.footer__cta { line-height: 1.25; }
.title__light,
.hero__line--light { font-weight: 200; }

/* the headline mask needs more room for Arabic letter shapes */
.js .hero__line { padding-bottom: 0.25em; margin-bottom: -0.25em; }

.label {
  text-transform: none;
  font-size: 0.95rem;
}

.hero__meaning-text { text-transform: none; font-size: 0.95rem; }
.hero__arabic[lang="en"] { font-weight: 800; font-size: 1.9rem; }

.logo { font-family: var(--font-arabic); font-weight: 800; font-size: 2rem; }

.lead,
.services__intro,
.work__intro,
.plan__intro { line-height: 1.75; }

.service__name,
.piece__title,
.step__title { line-height: 1.35; }

.button { font-weight: 700; }
.qa summary { font-weight: 700; line-height: 1.5; }

.mobile-menu a { line-height: 1.5; }


/* Service card pictures */
.mock-site__light,
.mock-site__bold { line-height: 1.4; font-size: 1.15rem; }
.mock-site__logo { font-size: 0.95rem; }
.mock-feed__tile--dark { font-size: 0.8rem; line-height: 1.4; }
.mock-brand__mark { font-size: 5.6rem; line-height: 1.2; }
.offer-card__title { line-height: 1.4; }

/* Email and phone are typed left-to-right, but sit on the right like the other fields */
.field input[dir="ltr"] { text-align: right; }
.field label, .field-group legend { font-weight: 700; }
.contact-thanks h3 { line-height: 1.4; }