/* Arabic text follows document direction; artwork keeps its physical geometry. */
.ias-language-switcher { position: fixed; inset-block-start: 19px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 10002; display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid #315746; border-radius: 24px; background: #fffffb; color: #183e2d; font: 14px/1.4 system-ui,sans-serif; }
html[dir="rtl"] .ias-language-switcher { transform: translateX(50%); }
.ias-language-switcher a { color: inherit; text-decoration: none; padding: 7px 12px; min-height: 24px; display: flex; align-items: center; border-radius: 18px; }
.ias-language-switcher a[aria-current] { background: #183e2d; color: #fffffb; }
.ias-language-switcher a:focus-visible, .ias-skip-link:focus-visible { outline: 3px solid #bd5b00; outline-offset: 3px; }
.ias-skip-link { position: fixed; inset-block-start: -100px; inset-inline-start: 12px; z-index: 10010; padding: 12px 18px; background: #183e2d; color: #fff; }
.ias-skip-link:focus { inset-block-start: 12px; }
@font-face { font-family: "IAS Arabic Display"; src: url("/assets/fonts/rakkas/Rakkas-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IAS Arabic UI"; src: url("/assets/fonts/readex-pro/ReadexPro.ttf") format("truetype"); font-weight: 160 700; font-style: normal; font-display: swap; }
html[lang="ar"] {
  --ias-arabic-display: "IAS Arabic Display", "Rakkas", serif;
  --ias-arabic-ui: "IAS Arabic UI", "Readex Pro", sans-serif;
  --ias-arabic-font: var(--ias-arabic-ui);
}
/* The English system has a display voice (Chonburi) and a working voice
   (Rubik). Rakkas carries the expressive, illustrated headline role; Readex
   Pro carries the readable UI and body role. */
html[lang="ar"] :is(.framer-text, p, h2,h3,h4,h5,h6,label,input,textarea,button,.ias-chatbot-widget,.ias-cert-section) { font-family: var(--ias-arabic-ui) !important; letter-spacing: normal !important; word-break: normal; font-optical-sizing: auto; }
html[lang="ar"] :is(h1, [data-framer-name="Hero"] h1, [data-framer-name="Hero section"] h1) { font-family: var(--ias-arabic-display) !important; font-weight: 400 !important; letter-spacing: normal !important; line-height: 1.35 !important; font-optical-sizing: auto; }
/* Latin 100–110% leading crowds Arabic dots and stacked headings. Keep
   generous authored leading, but give Arabic text a script-specific floor. */
html[lang="ar"] :is(h2,h3,h4,h5,h6).framer-text {
  line-height: max(1.4em, var(--framer-line-height, 1.5em)) !important;
}
html[lang="ar"] p.framer-text {
  line-height: max(1.5em, var(--framer-line-height, 1.5em)) !important;
}
/* Keep the source scale and colour tokens. Arabic changes the drawing system,
   not the hierarchy: display-xl/lg/md remain their English sizes, section
   titles retain their weights, and ink/green/terracotta remain inherited. */
html[lang="ar"] :is(h2,h3,h4,h5,h6,p,label,input,textarea,button) { font-optical-sizing: auto; }
html[lang="ar"] .ias-localized-emphasis { font-family:inherit !important; font-size:inherit; font-weight:600 !important; --framer-text-color:var(--color-text-highlight,#a64823); color:var(--color-text-highlight,#a64823) !important; }
html[lang="ar"] [data-ias-arabic-display="true"] > .ias-localized-emphasis { font-weight:700 !important; }
html[lang="ar"] [data-i18n="portfolio.trustbill.tablet-process"] { white-space:pre-line; }
html[lang="ar"] .framer-text { --framer-text-alignment: right; }
/* The export puts physical alignment in inline custom properties. Override
   its layout edge independently of text direction: numeric and Latin runs
   stay LTR but must share their Arabic caption's edge. Keep centres intact. */
html[lang="ar"] [style*="--framer-text-alignment: left"],
html[lang="ar"] [style*="--framer-text-alignment:left"] { --framer-text-alignment: right !important; text-align: right !important; }
/* Trailing labels (episode guests, dates, metadata) keep their grid edge. */
html[lang="ar"] [style*="--framer-text-alignment: right"],
html[lang="ar"] [style*="--framer-text-alignment:right"] { --framer-text-alignment: left !important; text-align: left !important; }
/* The logo wrapper's 8px inset is authored as padding-left. Move it to the
   inline start so the logo sits 168px from its edge (18px on phones), as in
   English, instead of 8px closer. */
html[lang="ar"] .framer-5vKhO .framer-fjs43y { padding-left: 0 !important; padding-right: 8px !important; }
/* Mirror navigation glyphs, never the surrounding control or artwork. */
html[lang="ar"] :is(a,button) svg:has(path[d^="M221.66,133.66"]) { transform: scaleX(-1); }
html[lang="ar"] .framer-1TapC .framer-GK0bB svg { transform: none !important; }
html[lang="ar"] :is(.ias-project-back-label,.ias-project-overview-button-primary) svg { transform: scaleX(-1); }
html[lang="ar"] :is(bdi,[dir="ltr"]) { unicode-bidi: isolate; }
/* The partner strip is a JS marquee whose loop is physical: every cell moves
   by -translateX and wraps once it passes the left edge. In RTL the track
   overflows leftwards, so cells wrapped out of view and the strip went blank
   within two seconds. Brand logos have no reading direction; run it LTR,
   exactly as English does. */
html[lang="ar"] .framer-bW7uD .framer-9uv7q3 { direction: ltr; }
/* Envoy's artwork extends outward from its column. Re-anchor the composition
   in RTL without reflecting the screenshots themselves. */
@media (min-width: 1200px) {
  html[lang="ar"] .framer-7ZGqa .framer-1ocsoq { right:auto; left:-172px; }
  html[lang="ar"] .framer-7ZGqa .framer-1sjaff6 { left:auto; right:0; }
  html[lang="ar"][data-ias-route="/portfolio/cib"] .framer-1cbgor8 { right:auto; left:-172px; }
  html[lang="ar"][data-ias-route="/portfolio/cib"] .framer-138weog { left:auto; right:20px; }
}
/* The footer illustration has a physical right anchor in the export.
   Reserve its space at the logical end instead of letting RTL links cross it.
   The phone variant (framer-v-182ytb6) has no such padding in English, so the
   reservation stays off there and the illustration simply mirrors. */
html[lang="ar"] .framer-7e6vI .framer-dac2ff { right:auto !important; left:0 !important; }
html[lang="ar"] .framer-7e6vI:not(.framer-v-182ytb6) .framer-vfmuad { padding-right:0 !important; padding-inline-end:150px !important; }
html[lang="ar"] .framer-7e6vI:not(.framer-v-182ytb6) .framer-gigo10 { flex-wrap:wrap !important; padding-inline-end:230px !important; }
html[lang="ar"] .framer-7e6vI .framer-gigo10 a { flex-shrink:0; }
/* Reading direction and placement are separate: the LTR address shares
   the Arabic contact column's leading (right) edge with its CTA. */
html[lang="ar"] .framer-7e6vI .framer-42cwqs .framer-1xyad46 > .framer-text { text-align:right !important; }
html[lang="ar"] [style*="--framer-text-alignment: center"],html[lang="ar"] [style*="--framer-text-alignment:center"] { --framer-text-alignment: center; }
html[lang="ar"] :is(p,h1,h2,h3,h4,h5,h6) { height: auto; }
/* Fields start at the Arabic edge; submit buttons keep English's centred label. */
html[lang="ar"] input:not([type=submit]):not([type=button]),html[lang="ar"] textarea { text-align: start; }
html[lang="ar"] [dir="ltr"] { unicode-bidi: isolate; }
html[lang="ar"] .ias-chatbot-msg { text-align: start; line-height: 1.8; }
html[lang="ar"] .ias-chatbot-input { padding-inline: 16px 50px !important; }
html[lang="ar"] .ias-chatbot-send-btn { right: auto !important; left: 8px !important; }
html[lang="ar"] .ias-chatbot-close-btn { margin-inline-start: auto; }
html[lang="ar"] .ias-chatbot-send-btn svg,html[lang="ar"] .ias-project-back-link svg { transform: scaleX(-1); }
html[lang="ar"] .ias-cert-card { text-align: start; }
html[lang="ar"] :is(.ias-chatbot-chip,.ias-chatbot-followup-chip) { font-family: var(--ias-arabic-font); white-space: normal; line-height: 1.6; }
.ias-chatbot-pill:focus-visible,.ias-chatbot-chip:focus-visible,.ias-chatbot-followup-chip:focus-visible { outline: 3px solid #bd5b00; outline-offset: 4px; }
@media (max-width: 809px) {
  .ias-language-switcher { inset-block-start: 18px; font-size: 12px; }
  .ias-language-switcher a { padding: 5px 8px; }
  html[lang="ar"] .ias-chatbot-window { max-height: calc(100dvh - 110px); }
}
@media (prefers-reduced-motion: reduce) {
  html[lang="ar"] *, html[lang="ar"] *::before, html[lang="ar"] *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
html[lang="ar"] form label { left: auto !important; right: 15px !important; }
html[lang="ar"] .ias-chatbot-message { text-align: start; line-height: 1.8; }
.ias-chatbot-window:not(.expanded .ias-chatbot-window) { visibility: hidden; }
.ias-chatbot-widget.expanded .ias-chatbot-window { visibility: visible; }
.ias-form-feedback { margin-block: 8px; font-size: 15px; line-height: 1.6; color: #8b271a; grid-column: 1 / -1; }
html[lang="ar"] :is(.ias-image-language-note,.ias-external-language-note) { font-family: var(--ias-arabic-font); font-size: 13px; line-height: 1.7; color: #504b40; }

/* Arabic directional actions: reflect only the glyph, preserving text and
   certificate artwork. Existing vertical overview arrows stay unchanged. */
html[lang="ar"] .ias-cert-cta svg,
html[lang="ar"] .ias-link-icon {
  transform: scaleX(-1);
}