:root{
  --x-ink:#0A0C10;--x-surf:#12161C;--x-surf2:#0E1319;--x-line:#1F2630;--x-line2:#2C3541;
  --x-t1:#F5F3EF;--x-t2:#8B97A8;--x-t3:#7B8798;--x-metal:#9AA3AE;--x-dust:#5A6675;
  --x-btnBg:#F5F3EF;--x-btnFg:#0A0C10;--x-scrim:rgba(10,12,16,.74);
  --x-cartact:#0F766E;--x-cartactTxt:#2DD4BF;--x-cartactLite:#2DD4BF;--x-cartactDeep:#0A5A54;
  --x-amber:#FBBF24;--x-amberTxt:#FBBF24;--x-amberPale:#FDE68A;--x-nejmaTeal:#14B8A6;
  --x-display:"Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,"Times New Roman",serif;
  --x-sans:"Helvetica Neue",Helvetica,"Segoe UI Variable Text","Segoe UI",system-ui,Arial,sans-serif;
  --x-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --x-spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.975 57.1%,.998 69.8%,1.007 76.9%,1);
  --x-out:cubic-bezier(.2,.7,.3,1);
}
:root[data-theme="light"]{
  --x-ink:#F5F3EF;--x-surf:#FBFAF7;--x-surf2:#EDE9E1;--x-line:#D6D0C5;--x-line2:#BEB6A7;
  --x-t1:#0A0C10;--x-t2:#4C5563;--x-t3:#5F6875;--x-metal:#8A8378;--x-dust:#B3AB9E;
  --x-btnBg:#0A0C10;--x-btnFg:#F5F3EF;--x-scrim:rgba(245,243,239,.8);
  --x-cartactTxt:#0A5A54;--x-amberTxt:#8F5B06;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--x-ink);color:var(--x-t1);font-family:var(--x-sans);font-size:16px;line-height:1.55;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
:root[lang="ar"] body{font-family:"Noto Kufi Arabic","IBM Plex Sans Arabic","Geeza Pro",Tahoma,sans-serif;line-height:1.85;font-size:17.3px}
:root[lang="ar"] [data-display]{font-family:"Noto Naskh Arabic",Amiri,"Geeza Pro","Traditional Arabic",serif}
a{color:var(--x-t1);text-decoration:none}
a:hover{color:var(--x-metal)}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit;font-size:16px}
:focus-visible{outline:2px solid var(--x-metal);outline-offset:3px}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
[data-num]{font-variant-numeric:tabular-nums lining-nums}
[dir="rtl"] [data-flip]{transform:scaleX(-1)}
@keyframes xDrift{0%,100%{opacity:.22;transform:translateY(0)}50%{opacity:.7;transform:translateY(-3px)}}
@media (max-width:900px){[data-desk]{display:none!important}[data-mob]{display:inline-flex!important}}
/* The hero keeps the mark in a second column beside the headline. On a phone
   that column still claimed ~112px, leaving the headline about 214px to wrap
   in, which read as cramped rather than composed. Below 820px the hero becomes
   one column and the mark moves above the text as a masthead. */
@media (max-width:820px){
  [data-hero]{grid-template-columns:1fr!important;gap:clamp(20px,5vw,32px)!important}
  [data-heromark]{order:-1;width:96px!important;height:96px!important}
}

/* [data-stick] is the section heading that stays put beside a scrolling list
   in the two-column layout. Once [data-split] collapses to one column the
   heading sits ABOVE the list instead of beside it, so staying sticky makes it
   ride down over the list text and hide it. It has to unstick at exactly the
   breakpoint where the grid collapses. */
@media (max-width:820px){[data-split]{grid-template-columns:1fr!important}[data-swap]{order:2}[data-stick]{position:static!important;top:auto!important}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---- generated from style-hover="…" in the design ---- */
/* Inline style attributes outrank class rules, hence !important. */
.hv1:hover{color:var(--x-t1) !important}
.hv2:hover{color:var(--x-t1) !important}
.hv3:hover{color:var(--x-t1) !important}
.hv4:hover{color:var(--x-t1) !important}
.hv5:hover{color:var(--x-t1) !important;border-color:var(--x-line2) !important}
.hv6:hover{transform:translateY(-2px) !important;color:var(--x-btnFg) !important}
.hv7:hover{transform:translateY(-3px) !important;color:var(--x-btnFg) !important}
.hv8:hover{transform:translateY(-3px) !important;border-color:var(--x-t1) !important;color:var(--x-t1) !important}
.hv9:hover{transform:translateY(-4px) !important;border-color:var(--x-cartact) !important;box-shadow:0 8px 18px -10px rgba(0,0,0,.5) !important;color:var(--x-t1) !important}
.hv10:hover{transform:translateY(-4px) !important;border-color:var(--x-amber) !important;box-shadow:0 8px 18px -10px rgba(0,0,0,.5) !important;color:var(--x-t1) !important}
.hv11:hover{transform:translateY(-3px) !important}

/* sc-if -> [data-if]; the hidden elements carry inline display:flex, which
   would otherwise beat the UA stylesheet's [hidden]{display:none}. */
[hidden]{display:none !important}