/* ==========================================================================
   iOTA GCC — Arabic (RTL)
   Loaded only on /ar/ pages. The layout itself needs almost no mirroring
   because every rule uses logical properties (inset-inline-*, padding-inline-*,
   text-align: start/end). This file handles the typeface and the few places
   where direction genuinely changes the design.
   ========================================================================== */

[dir='rtl'] body,
[dir='rtl'] .i-hero__line,
[dir='rtl'] .i-h1,
[dir='rtl'] .i-h2,
[dir='rtl'] .i-h3,
[dir='rtl'] .i-display,
[dir='rtl'] .i-menu__link,
[dir='rtl'] .i-footer__word,
[dir='rtl'] .i-loader__mark,
[dir='rtl'] .i-tier__title,
[dir='rtl'] .i-tier__tagline,
[dir='rtl'] .i-tiercard__title,
[dir='rtl'] .i-industry__name,
[dir='rtl'] .i-milestone__title,
[dir='rtl'] .i-member__name,
[dir='rtl'] .i-award__short,
[dir='rtl'] .i-case__client,
[dir='rtl'] .i-principle__h,
[dir='rtl'] .i-cap__h,
[dir='rtl'] .i-cta,
[dir='rtl'] .i-form__thanks,
[dir='rtl'] .i-contact__email {
	font-family: 'Noto Kufi Arabic', 'Archivo', sans-serif;
	letter-spacing: normal;
}

/* Kufi has a taller x-height; the display sizes need a little more leading. */
[dir='rtl'] .i-h1 { line-height: 1.02; }
[dir='rtl'] .i-h1--soft,
[dir='rtl'] .i-h1--house,
[dir='rtl'] .i-h1--services { line-height: 1.06; }
[dir='rtl'] .i-h1--contact { line-height: 1; }
[dir='rtl'] .i-h2,
[dir='rtl'] .i-h2--who { line-height: 1.1; }
[dir='rtl'] .i-hero__line { line-height: 1.35; }
[dir='rtl'] .i-menu__link { line-height: 1.3; }
[dir='rtl'] .i-footer__word { line-height: 1; }
[dir='rtl'] .i-tier__num { line-height: .9; }
[dir='rtl'] .i-industry__name { line-height: 1.2; }
[dir='rtl'] .i-loader__mark { line-height: 1.1; }

/* Arabic has no uppercase; the transform only adds rendering cost. */
[dir='rtl'] .i-h1,
[dir='rtl'] .i-h2,
[dir='rtl'] .i-h3,
[dir='rtl'] .i-menu__link,
[dir='rtl'] .i-tier__title,
[dir='rtl'] .i-tier__tagline,
[dir='rtl'] .i-tiercard__title,
[dir='rtl'] .i-industry__name,
[dir='rtl'] .i-award__short,
[dir='rtl'] .i-principle__h,
[dir='rtl'] .i-cap__h,
[dir='rtl'] .i-brand__sub,
[dir='rtl'] .i-brand__meta,
[dir='rtl'] .i-brand__badge { text-transform: none; }

/* The eyebrow and micro-labels keep their tracking in Latin, not in Arabic. */
[dir='rtl'] .i-eyebrow,
[dir='rtl'] .i-meta,
[dir='rtl'] .i-form__label,
[dir='rtl'] .i-footer__coltitle,
[dir='rtl'] .i-contact__dlabel,
[dir='rtl'] .i-numbers__eyebrow,
[dir='rtl'] .i-tier__wholabel,
[dir='rtl'] .i-tier__meta,
[dir='rtl'] .i-case__tag,
[dir='rtl'] .i-who__statlabel,
[dir='rtl'] .i-milestone__year,
[dir='rtl'] .i-logos__label,
[dir='rtl'] .i-hero__scroll,
[dir='rtl'] .i-tiercard__more { letter-spacing: .06em; }

/* The hover nudge on menu items follows the reading direction. */
[dir='rtl'] .i-menu__link:hover,
[dir='rtl'] .i-menu__link:focus-visible { transform: translateX(-14px); }

/* The marquee scrolls the other way so logos still enter from the leading edge. */
[dir='rtl'] .i-logos__track { animation-direction: reverse; }

/* Latin brand wordmarks stay LTR inside an RTL page. */
[dir='rtl'] .i-brand__word,
[dir='rtl'] .i-logo,
[dir='rtl'] .i-loader__mark,
[dir='rtl'] .i-footer__email,
[dir='rtl'] .i-contact__email,
[dir='rtl'] .i-contact__dvalue[href^='tel'],
[dir='rtl'] .i-contact__dvalue[href^='mailto'],
[dir='rtl'] .i-menu__foot a {
	direction: ltr;
	unicode-bidi: isolate;
}

[dir='rtl'] .i-brand__word,
[dir='rtl'] .i-loader__mark { display: inline-block; }

/* Numerals stay Western Arabic, matching the approved design. */
[dir='rtl'] .i-numbers__val,
[dir='rtl'] .i-who__statval,
[dir='rtl'] .i-tier__num,
[dir='rtl'] .i-award__year {
	direction: ltr;
	unicode-bidi: isolate;
	font-family: 'Bricolage Grotesque', sans-serif;
}

/* Native select arrow position. */
[dir='rtl'] select.i-form__field {
	background-position: 12px calc(50% + 1px), 17px calc(50% + 1px);
	background-image: linear-gradient(45deg, transparent 50%, rgba(243, 239, 230, .6) 50%),
		linear-gradient(135deg, rgba(243, 239, 230, .6) 50%, transparent 50%);
	padding-inline-end: 0;
	padding-inline-start: 26px;
}

/* The house intro sits against the opposite edge. */
[dir='rtl'] .i-house__intro { text-align: end; }
