/* 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; }
html[lang="ar"] {
  --font-ar-display: "Fustat", "Noto Sans Arabic", sans-serif;
  --font-ar-ui: "Cairo", "Noto Sans Arabic", Arial, sans-serif;
  --ias-arabic-font: var(--font-ar-ui);
  --font-ar-accent: "Aref Ruqaa", "Noto Naskh Arabic", serif;
}
/* Cairo is the default reading/UI voice. Fustat is an explicit editorial
   role, never a blanket heading replacement. Keep the shared English scale. */
html[lang="ar"] body { font-family: var(--font-ar-ui); }
html[lang="ar"] :is(.framer-text, p, a, label,input,textarea,button,.ias-chatbot-widget,.ias-cert-section) { font-family: var(--font-ar-ui) !important; letter-spacing: normal !important; word-break: normal; font-optical-sizing: auto; }
html[lang="ar"] :is(.framer-text, p, a, h1,h2,h3,h4,h5,h6,label,input,textarea,button,.ias-chatbot-widget,.ias-cert-section) * { letter-spacing: normal !important; }
/* 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,
html[lang="ar"] p[data-ias-section-title] {
  line-height: max(1.4em, var(--framer-line-height, 1.4em)) !important;
}
/* Framer can put the real heading size on an inner span, so its leading must
   resolve against that span's font size rather than the 16px outer fallback. */
html[lang="ar"] :is(h2,h3,h4,h5,h6).framer-text :is(span,strong,em) {
  line-height: max(1.4em, var(--framer-line-height, 1.4em)) !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:700 !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);
}
/* Case-study typography already has stable semantic containers in the
   export. Apply the settled roles before the deferred heading/prose passes
   run, so their class/attribute stamps cannot resize the hero at startup. */
html[lang="ar"][data-ias-route="/portfolio/cib"] #main [data-framer-name="Elements/Hero section header"] h2.framer-text {
  font-family: var(--type-heading-family, var(--font-ar-display)) !important;
  --framer-font-family: var(--type-heading-family, var(--font-ar-display)) !important;
  font-weight: var(--type-heading-weight, 900) !important;
  --framer-font-weight: var(--type-heading-weight, 900) !important;
}
html[lang="ar"][data-ias-route="/portfolio/cib"] #main [data-framer-name="Elements/Hero section header"] h2.framer-text :is(span,strong,em,b) {
  font-family: inherit !important;
  font-weight: inherit !important;
}
html[lang="ar"][data-ias-route="/portfolio/cib"] body #main [data-framer-name="Elements/Hero section header"] [data-framer-name="Description"] p.framer-text {
  font-family: var(--font-ar-ui) !important;
  font-size: var(--section-subtitle-size, 1.25rem) !important;
  font-weight: 400 !important;
  line-height: var(--section-subtitle-leading, 1.6) !important;
  color: var(--color-text-secondary, #69645a) !important;
  --framer-text-color: var(--color-text-secondary, #69645a) !important;
  letter-spacing: normal !important;
  text-wrap: pretty;
}
/* The CIB export's server CSS leaves the role text at min-content width;
   its hydrated stylesheet expands the same column to the available space.
   Reserve the authored column width only while SSR variants exist, bounded
   by the remaining card space after its icon and gap. The caption then stays
   on one line without overriding Framer's hydrated responsive column. */
html[lang="ar"][data-ias-route="/portfolio/cib"] .framer-Rg6SM .framer-15uy5i5:has(> .ssr-variant) {
  width: 320px;
  max-width: calc(100% - 44px);
}

/* Match visual roles, not HTML tag names: the export also uses h4/h5 for
   paragraphs and button labels. Never assign them a heading-size fallback. */
html[lang="ar"] {
  --ias-arabic-display-leading: 1.4;
  --ias-arabic-display-size: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  --ias-arabic-section-size: clamp(2.5rem, 1.9rem + 2vw, 3.75rem);
  --ias-arabic-body-leading: 1.7;
}
/* Page headlines and deliberately selected editorial section titles share a
   single role. Their inline runs must inherit it rather than Framer's face. */




html[lang="ar"] .framer-kfGpL h1.framer-text,
html[lang="ar"] .ias-arabic-display.ias-arabic-display {
  font-family: var(--font-ar-display) !important;
  font-size: var(--ias-arabic-display-size) !important;
  font-weight: 700 !important;
  line-height: var(--ias-arabic-display-leading) !important;
  letter-spacing: normal !important;
  letter-spacing: normal !important;
  font-synthesis: none;
  text-wrap: balance;
  overflow-wrap: normal;
}
html[lang="ar"] .ias-arabic-display.ias-arabic-display:not(h1) {
  font-size: var(--ias-arabic-section-size) !important;
}
html[lang="ar"] .framer-kfGpL h1.framer-text :is(span,strong,em,b),
html[lang="ar"] .ias-arabic-display.ias-arabic-display :is(span,strong,em,b) {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: normal;
  line-height: inherit !important;
  letter-spacing: normal !important;
}
html[lang="ar"] .framer-kfGpL h1.framer-text :is(strong,b),
html[lang="ar"] .ias-arabic-display.ias-arabic-display :is(strong,b) {
  font-weight: 700 !important;
}
@media (max-width: 809.98px) {
  /* English's compact Why-work heading uses weight, not colour, for emphasis. */
  html[lang="ar"][data-ias-route="/"] [data-i18n="home.why-workwith-me-2"] :is(strong,.ias-localized-emphasis) {
    color: inherit !important;
    --framer-text-color: inherit;
  }
}
html[lang="ar"] h4[data-i18n="about.a-simple-person-trying-to-understand-things-a"] {
  font-size: max(1.0625rem, var(--framer-font-size, 1rem)) !important;
  line-height: var(--ias-arabic-body-leading) !important;
  font-weight: 400 !important;
  color: var(--color-text-secondary, #69645a) !important;
}
/* Prevent UI font fallback; let it inherit from display rules */
html[lang="ar"] :is(.ias-cert-heading,.ias-voices-center h2) {
  line-height: 1.4;
}
html[lang="ar"] .ias-arabic-prose {
  font-size: max(1.0625rem, var(--framer-font-size, 1rem));
  line-height: max(1.75em, var(--framer-line-height, 1.75em)) !important;
}
html[lang="ar"] .ias-unified-subtitle {
  line-height: 1.75 !important;
}
/* Long metric qualifications are captions, not body paragraphs. */
html[lang="ar"] p[data-i18n*=".ps-these-numbers-are-hypothetical"] {
  font-size: .75rem !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}
html[lang="ar"] :is(button,input,textarea,select,.ias-reader-details) {
  font-family: var(--font-ar-ui) !important;
}
html[lang="ar"] :is(input[type="email"],input[type="tel"],a[href^="mailto:"],a[href^="tel:"]) {
  unicode-bidi: isolate;
}
/* Force bold on title accents and localized emphases in Arabic */
html[lang="ar"] p.framer-text > strong.framer-text,
html[lang="ar"] .ias-localized-emphasis {
  font-weight: 700 !important;
  --framer-font-weight: 700 !important;
}
/* A legacy strong wrapper surrounds TrustBill's entire hero description.
   It is body copy in English, not a highlighted passage. */
html[lang="ar"] [data-framer-name="Elements/Hero section header"] [data-framer-name="Description"] p.framer-text :is(strong,b) {
  font-weight: 400 !important;
  --framer-font-weight: 400 !important;
}
/* Semantic emphasis is selected text, never the paragraph's inherited ink.
   Match the English body / emphasis weights (400 / 600). */
html[lang="ar"] p.ias-semantic-prose {
  color: var(--color-text-secondary, #69645a) !important;
  --framer-text-color: var(--color-text-secondary, #69645a) !important;
  font-weight: 400 !important;
}
html[lang="ar"] p.ias-semantic-prose > strong.ias-localized-emphasis {
  font-weight: 700 !important;
  letter-spacing: normal !important;
  --framer-font-weight: 700 !important;
  letter-spacing: normal !important;
}


/* --- Semantic Typography System --- */
html[lang="ar"] .font-ar-display {
  font-family: var(--font-ar-display) !important;
  font-weight: 700 !important;
  line-height: var(--ias-arabic-display-leading) !important;
  letter-spacing: normal !important;
}
html[lang="ar"] .font-ar-display-600 {
  font-family: var(--font-ar-display) !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}
html[lang="ar"] .font-ar-ui-600 {
  font-family: var(--font-ar-ui) !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
}
html[lang="ar"] .font-ar-ui-500 {
  font-family: var(--font-ar-ui) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}
html[lang="ar"] .font-ar-accent {
  font-family: var(--font-ar-accent) !important;
}

html[lang="ar"] .font-ar-display :is(span, strong, em, b) {
  font-family: inherit !important;
}

/* Force consistent font rendering for Arabic UI elements to prevent subpixel thickening */

html[lang="ar"] {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}


/* Fix: Apply Arabic display font to true headings across the site */
html[lang="ar"] h1.framer-text,
html[lang="ar"] :is(h2, h3, h4, h5, h6).framer-text:has(> strong.framer-text),
html[lang="ar"] .ias-cert-heading,
html[lang="ar"] .ias-voices-center h2,
html[lang="ar"] p.framer-text[data-ias-section-title] {
  font-family: var(--font-ar-display) !important;
}

html[lang="ar"] h1.framer-text :is(span, strong, em, b),
html[lang="ar"] :is(h2, h3, h4, h5, h6).framer-text:has(> strong.framer-text) :is(span, strong, em, b),
html[lang="ar"] .ias-cert-heading :is(span, strong, em, b),
html[lang="ar"] .ias-voices-center h2 :is(span, strong, em, b),
html[lang="ar"] p.framer-text[data-ias-section-title] :is(span, strong, em, b) {
  font-family: inherit !important;
}