/* YASLOGIST — image discipline, readable Arabic and invariant page geometry.
   English/Arabic switch changes the language of content, never the physical page layout. */
:root {
  --yas-arabic:"IBM Plex Sans Arabic","YAS Unified Arabic",Tahoma,Arial,sans-serif;
  --yas-ruqaa:"Aref Ruqaa",var(--yas-arabic);
}
html{direction:ltr!important;}
html body{direction:ltr;}
/* Text direction must be independent of the page grid and nav positioning. */
html [lang="ar"]{font-family:var(--yas-arabic);direction:rtl;unicode-bidi:isolate;letter-spacing:0}
html [lang="en"]{direction:ltr;unicode-bidi:isolate}
html[data-lang="ar"] [data-i18n]{direction:rtl;unicode-bidi:plaintext;font-family:var(--yas-arabic)}
html[data-lang="en"] [data-i18n]{direction:ltr;unicode-bidi:plaintext}
html[data-lang="ar"] body.identity-editorial {font-family:var(--yas-arabic)!important}
html[data-lang="en"] body.identity-editorial {font-family:var(--body)!important}
html[data-lang="ar"] :is(h1,h2,h3,h4) {letter-spacing:0;word-spacing:0;line-height:1.43}
html[data-lang="ar"] body.identity-editorial :is(h1,h2,h3,h4){font-family:var(--yas-arabic);font-weight:700;line-height:1.43}
html[data-lang="ar"] body.identity-editorial p{line-height:1.85}
html[data-lang="ar"] .masthead{font-family:var(--yas-arabic)}
/* Protect the original Western logo and monospace identifiers from Arabic fallback. */
.masthead .wordmark__text, .foot .ico, .mono-code, .mono-label, [class*="__coordinates"]{direction:ltr;font-family:var(--display)}
/* Distinctive but readable ruqaa only on the short Home masthead, not on dense information. */
html[data-lang="ar"] .hero__head [lang="ar"] {
 font-family:var(--yas-arabic);font-size:.96em;font-weight:700;line-height:1.48;
 letter-spacing:0;word-spacing:0;text-shadow:none;-webkit-text-stroke:0;
}
/* Ruqaa remains a deliberate short brand accent, never a dense text font. */
html[data-lang="ar"] .glass__name [lang="ar"] {
 font-family:var(--yas-ruqaa);font-size:1.18em;font-weight:700;
 line-height:1.9;word-spacing:.08em;
}
/* Information architecture and all navigation use readable uniform sans-serif Arabic. */
html[data-lang="ar"] :is(.band__head,.stance__head,.reel__line,.cap__name,.unit__name,.panel__head,.nav-item__name,.glass__name,.sub__head,.surface-content,.section-heading,.hero-grid) [lang="ar"]{
 font-family:var(--yas-arabic);font-weight:650;font-size:1em;line-height:1.55;letter-spacing:0;
}
html[data-lang="ar"] :is(.panel__head,.nav-item__name,.glass__name) [lang="ar"]{font-size:1.05em}
html[data-lang="ar"] :is(.sub__body,.foot__meta,.nav-inline,.foot__legal,.foot__social) [lang="ar"]{font-family:var(--yas-arabic);font-weight:400}
/* Distinguish content reading direction from page geometry: positions remain fixed. */
html[data-lang="ar"] :is(.hero__head,.hero__sub,.section-heading p,.body-copy,.lead,.mode p,.mode h3,.panel__group,.sub__text,.foot__meta){text-align:right}
html[data-lang="en"] :is(.hero__head,.hero__sub,.section-heading p,.body-copy,.lead,.mode p,.mode h3){text-align:left}
html[data-lang="ar"] .eyebrow,html[data-lang="en"] .eyebrow{direction:ltr;unicode-bidi:isolate}
/* Shared navigation must maintain identical dimensions and alignments in both languages. */
.masthead{direction:ltr!important}
.masthead .head-tools{direction:ltr}
.foot{direction:ltr}

/* Photographic art direction: each image is unique, responsive and locally owned. */
body[data-page="platform"] .hero-art{aspect-ratio:2.32;background:#152027}
body[data-page="platform"] .hero-art>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 42%}
body[data-page="platform"] .hero-art figcaption{z-index:1}
body[data-page="platform"] .mode>.visual-photo{margin:0;min-width:0;position:relative}
body[data-page="platform"] .mode>div:last-child{padding:25px}
.visual-photo{position:relative;overflow:hidden;isolation:isolate;min-width:0;margin:0;background:#152027}
.visual-photo>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.92)}
.visual-photo figcaption{position:absolute;inset-inline-start:12px;bottom:12px;
 max-width:calc(100% - 24px);padding:8px 10px;background:rgba(12,20,27,.83);color:#f1f5f4;
 border:1px solid rgba(255,255,255,.16);font-size:clamp(.65rem,.85vw,.78rem);line-height:1.5;backdrop-filter:blur(6px)}
body[data-page="platform"] .proof .handoff-photo{aspect-ratio:1.5;min-height:220px}
body[data-page="platform"] .mode-photo{aspect-ratio:1.28}
body[data-page="atlas"] .surface-card>.surface-photo{aspect-ratio:1.25}
body[data-page="atlas"] .surface-photo>img{width:100%;height:100%;object-fit:cover}
body[data-page="atlas"] .surface-card:last-child>.surface-photo{aspect-ratio:1.7}
@media(max-width:720px){body[data-page="platform"] .hero-art{aspect-ratio:1.35}body[data-page="platform"] .proof .handoff-photo{aspect-ratio:1.45} }
/* Legacy Platform skip link used left:-9999px. On an RTL root this creates a
   10,000px horizontal scroll range. Hide it vertically instead, preserving focus. */
body[data-page="platform"] .skip{left:12px!important;top:12px;transform:translateY(-220%);opacity:0;pointer-events:none;z-index:9999}
body[data-page="platform"] .skip:focus-visible{transform:none;opacity:1;pointer-events:auto}