/* Layout concept: a light engineering sheet — white ground, navy ink, teal as the working colour.
   Signature: the oblique shards of the AINS "A" become the cuts on drawings and the stripe that opens each section.
   Red and yellow appear only as signals (live values, warnings, the stripe). */
:root{
  --paper:#F6F9F9; --surface:#FFFFFF; --ink:#073E5A; --ink-2:#3C6175; --line:#D5E2E5;
  --teal:#08ACA2; --teal-deep:#038D88; --teal-soft:#4DB9AD; --red:#E83E3D; --yellow:#FBCC0C;
  --band:#073E5A; --band-fg:#EAF4F5; --band-mute:#9EC0C9; --chip:#E6F3F2; --onteal:#FFFFFF;
  --f-display:"IBM Plex Sans Condensed","IBM Plex Sans Arabic","Arial Narrow",Arial,sans-serif;
  --f-body:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1200px; --cut:28px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#05202E; --surface:#0A2B3C; --ink:#E4EFF2; --ink-2:#A7C2CB; --line:#1C4458;
  --teal:#2CC3B8; --teal-deep:#22A79E; --teal-soft:#5CC6BB; --red:#F2605F; --yellow:#FBD43A;
  --band:#031722; --band-fg:#E4EFF2; --band-mute:#86A9B4; --chip:#0F3A4A; --onteal:#04202E; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#05202E; --surface:#0A2B3C; --ink:#E4EFF2; --ink-2:#A7C2CB; --line:#1C4458;
  --teal:#2CC3B8; --teal-deep:#22A79E; --teal-soft:#5CC6BB; --red:#F2605F; --yellow:#FBD43A;
  --band:#031722; --band-fg:#E4EFF2; --band-mute:#86A9B4; --chip:#0F3A4A; --onteal:#04202E; color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface)}
[dir=rtl] body, [dir=rtl]{font-family:"IBM Plex Sans Arabic",var(--f-body)}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media(min-width:720px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.08;letter-spacing:-.01em;text-wrap:balance;margin:0}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{font-family:"IBM Plex Sans Arabic",sans-serif;font-weight:700;letter-spacing:0;line-height:1.3}
p{margin:0}
.mono{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
[dir=rtl] .mono{font-family:"IBM Plex Sans Arabic",sans-serif;letter-spacing:0;text-transform:none;font-size:.85rem}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:24px;height:72px}
.logo{display:flex;align-items:center;flex:none}
.logo svg{height:46px;width:auto}
.nav{display:flex;gap:22px;margin-inline-start:auto;font-size:.93rem;font-weight:500}
.nav a{text-decoration:none;color:var(--ink-2);padding-block:6px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-color:var(--teal)}
.langs{display:flex;gap:2px;border:1px solid var(--line);border-radius:4px;padding:2px;flex:none}
.langs button{font:500 .78rem/1 var(--f-mono);background:none;border:0;color:var(--ink-2);padding:7px 9px;border-radius:2px;cursor:pointer}
.langs button[aria-pressed=true]{background:var(--ink);color:var(--surface)}
.langs button:disabled{opacity:.4;cursor:not-allowed}
.langs .ar{font-family:"IBM Plex Sans Arabic",sans-serif;font-size:.85rem}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 .93rem/1 var(--f-body);text-decoration:none;padding:14px 20px;border-radius:2px;border:1.5px solid var(--teal-deep);background:var(--teal-deep);color:var(--onteal);cursor:pointer;white-space:nowrap}
[dir=rtl] .btn{font-family:"IBM Plex Sans Arabic",sans-serif}
.btn:hover{background:var(--teal)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn svg{flex:none}
[dir=rtl] .btn svg.arr{transform:scaleX(-1)}
.hdr .btn{padding:11px 16px}
.burger{display:none;margin-inline-start:auto;background:none;border:1px solid var(--line);border-radius:4px;width:42px;height:42px;color:var(--ink);cursor:pointer}
@media(max-width:1080px){
  .nav{display:none;position:absolute;top:72px;inset-inline:0;flex-direction:column;gap:0;background:var(--surface);border-bottom:1px solid var(--line);padding:8px max(16px,env(safe-area-inset-left,0px)) 16px}
  .nav.open{display:flex}
  .nav a{padding-block:12px;border-bottom:1px solid var(--line)}
  .burger{display:grid;place-items:center}
  .hdr .btn{display:none}
}
@media(max-width:520px){.logo svg{height:32px}.hdr .wrap{gap:12px}}

/* facet stripe — the four logo colours, cut at the logo's angle */
.facets{display:flex;gap:4px;height:6px;width:132px}
.facets i{flex:1;clip-path:polygon(18% 0,100% 0,82% 100%,0 100%)}
.facets i:nth-child(1){background:var(--ink)}.facets i:nth-child(2){background:var(--teal)}
.facets i:nth-child(3){background:var(--red)}.facets i:nth-child(4){background:var(--yellow)}
[dir=rtl] .facets{transform:scaleX(-1)}

/* hero */
.hero{padding-block:56px 72px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero-copy{display:grid;gap:24px;min-width:0}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--teal-deep)}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.hero h1 em{font-style:normal;color:var(--teal-deep)}
.hero .lead{font-size:1.13rem;color:var(--ink-2);max-width:56ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-fig{position:relative;min-width:0}
.hero-fig .ph{aspect-ratio:4/4.3;max-width:100%;clip-path:polygon(16% 0,100% 0,100% 100%,0 100%,0 22%);background:var(--line)}
[dir=rtl] .hero-fig .ph{clip-path:polygon(0 0,84% 0,100% 22%,100% 100%,0 100%)}
.hero-fig img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.shard{position:absolute;pointer-events:none}
.shard.s1{width:84px;height:150px;background:var(--red);inset-inline-end:-18px;bottom:64px;clip-path:polygon(0 0,100% 42%,58% 100%,0 86%)}
.shard.s2{width:70px;height:96px;background:var(--yellow);inset-inline-end:-30px;bottom:-14px;clip-path:polygon(38% 0,100% 100%,0 100%)}
[dir=rtl] .shard{transform:scaleX(-1)}
.coverage{position:absolute;inset-inline-start:-28px;bottom:28px;background:var(--surface);border:1px solid var(--line);padding:16px 18px;display:grid;gap:10px;min-width:230px;box-shadow:0 18px 40px -24px rgba(7,62,90,.45)}
.coverage ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.9rem}
.coverage li{display:flex;justify-content:space-between;gap:16px}
.coverage li b{font-weight:600}
.coverage li span{color:var(--ink-2);font-size:.82rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--teal);display:inline-block;margin-inline-end:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 22%,transparent)}
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .coverage{inset-inline-start:12px;bottom:12px;min-width:0}
  .shard.s1{inset-inline-end:-6px}.shard.s2{inset-inline-end:-10px}
}

/* facts strip */
.facts{border-block:1px solid var(--line);background:var(--surface)}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:26px 24px;display:grid;gap:6px;border-inline-start:1px solid var(--line)}
.fact:first-child{border-inline-start:0;padding-inline-start:0}
.fact b{font:600 2rem/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--ink)}
.fact span{color:var(--ink-2);font-size:.9rem}
@media(max-width:760px){.facts .wrap{grid-template-columns:1fr 1fr}.fact{padding:20px 16px}.fact:nth-child(3){border-inline-start:0;padding-inline-start:0}.fact:nth-child(n+3){border-top:1px solid var(--line)}}

/* sections */
.sec{padding-block:88px}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:24px 56px;align-items:end;margin-bottom:44px}
.sec-head>*{min-width:0}
.sec-head .t{display:grid;gap:16px}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.sec-head p{color:var(--ink-2);max-width:56ch}
@media(max-width:820px){.sec{padding-block:64px}.sec-head{grid-template-columns:1fr}}

/* solutions */
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.sol{background:var(--surface);display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:inherit;min-width:0}
.sol .im{aspect-ratio:16/9;overflow:hidden;background:var(--chip);clip-path:polygon(0 0,100% 0,100% 82%,88% 100%,0 100%)}
[dir=rtl] .sol .im{clip-path:polygon(0 0,100% 0,100% 100%,12% 100%,0 82%)}
.sol .im img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.sol:hover .im img{transform:scale(1.04)}
.sol .im.code{display:grid;place-items:center;background:var(--band);color:var(--teal-soft);font:500 1.05rem/1.5 var(--f-mono);direction:ltr}
.sol .im.code pre{margin:0;font:inherit}
.sol .im.code .k{color:var(--yellow)}.sol .im.code .c{color:var(--band-mute)}
.sol .bd{padding:22px 24px 26px;display:grid;gap:10px;align-content:start}
.sol .tag{color:var(--teal-deep)}
.sol h3{font-size:1.35rem}
.sol p{color:var(--ink-2);font-size:.95rem}
.sol .more{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;margin-top:6px;color:var(--ink)}
[dir=rtl] .sol .more svg{transform:scaleX(-1)}
@media(max-width:980px){.sol-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.sol-grid{grid-template-columns:1fr}}

/* delivery process (band) */
.band{background:var(--band);color:var(--band-fg)}
.band .sec-head p{color:var(--band-mute)}
.band .eyebrow{color:var(--teal-soft)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:s}
.steps li{position:relative;padding:28px 22px 0 0;border-top:2px solid color-mix(in srgb,var(--band-fg) 18%,transparent);display:grid;gap:10px;align-content:start;counter-increment:s}
[dir=rtl] .steps li{padding:28px 0 0 22px}
.steps li::before{content:"";position:absolute;top:-2px;inset-inline-start:0;width:44px;height:2px;background:var(--teal)}
.steps li:last-child::before{background:var(--yellow)}
.steps .n{font:500 .8rem/1 var(--f-mono);color:var(--teal-soft)}
.steps .n::before{content:"0" counter(s) " — "}
.steps h3{font-size:1.2rem;color:var(--band-fg)}
.steps p{font-size:.92rem;color:var(--band-mute)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:28px 24px}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* UPS sizing tool */
.ups{display:grid;grid-template-columns:1fr 1.1fr;border:1px solid var(--line);background:var(--surface)}
.ups-in{padding:32px;display:grid;gap:24px;border-inline-end:1px solid var(--line);min-width:0}
.field{display:grid;gap:10px}
.field label{display:flex;justify-content:space-between;gap:12px;font-weight:600;font-size:.95rem}
.field output{direction:ltr;unicode-bidi:isolate;font:500 .95rem var(--f-mono);color:var(--teal-deep);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--teal-deep)}
.seg{display:flex;border:1px solid var(--line);border-radius:3px;padding:3px;gap:3px}
.seg button{flex:1;font:500 .88rem var(--f-body);background:none;border:0;padding:9px;border-radius:2px;color:var(--ink-2);cursor:pointer}
[dir=rtl] .seg button{font-family:"IBM Plex Sans Arabic",sans-serif}
.seg button[aria-pressed=true]{background:var(--chip);color:var(--ink);box-shadow:inset 0 0 0 1px var(--teal)}
.ups-out{padding:32px;display:grid;gap:22px;align-content:start;background:linear-gradient(180deg,var(--chip),transparent 70%);min-width:0}
.readout{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.readout div{background:var(--surface);padding:18px 20px;display:grid;gap:4px}
.readout .big{grid-column:1/-1}
.readout b{font:600 2.3rem/1.05 var(--f-display);font-variant-numeric:tabular-nums;direction:ltr;text-align:start}
.readout .big b{font-size:3.2rem;color:var(--teal-deep)}
.readout small{color:var(--ink-2);font-size:.82rem}
.note{font-size:.85rem;color:var(--ink-2);display:flex;gap:10px}
.note::before{content:"";flex:none;width:4px;background:var(--yellow);border-radius:2px}
@media(max-width:860px){.ups{grid-template-columns:1fr}.ups-in{border-inline-end:0;border-bottom:1px solid var(--line)}.ups-in,.ups-out{padding:24px}}

/* industries */
.ind{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ind div{border:1px solid var(--line);background:var(--surface);padding:22px;display:grid;gap:8px;align-content:start}
.ind h3{font-size:1.12rem;display:flex;align-items:center;gap:10px}
.ind h3::before{content:"";width:10px;height:14px;background:var(--teal);clip-path:polygon(40% 0,100% 0,60% 100%,0 100%);flex:none}
.ind div:nth-child(3n+2) h3::before{background:var(--ink)}
.ind div:nth-child(3n) h3::before{background:var(--red)}
.ind p{color:var(--ink-2);font-size:.92rem}
@media(max-width:860px){.ind{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ind{grid-template-columns:1fr}}
.confirm{display:inline-flex;align-items:center;gap:6px;font:500 .72rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:#6B5200;background:color-mix(in srgb,var(--yellow) 30%,var(--surface));border:1px solid color-mix(in srgb,var(--yellow) 70%,transparent);padding:5px 8px;border-radius:2px;width:fit-content;max-width:100%;line-height:1.35}
:root[data-theme="dark"] .confirm{color:var(--yellow)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .confirm{color:var(--yellow)}}
[dir=rtl] .confirm{font-family:"IBM Plex Sans Arabic",sans-serif;text-transform:none;letter-spacing:0;font-size:.78rem}

/* projects */
.proj{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.proj article{border:1.5px dashed var(--line);padding:24px;display:grid;gap:12px;align-content:start;min-height:220px}
.proj .sector{color:var(--teal-deep)}
.proj h3{font-size:1.15rem;color:var(--ink-2)}
.proj ul{margin:0;padding-inline-start:18px;color:var(--ink-2);font-size:.9rem;display:grid;gap:4px}
@media(max-width:860px){.proj{grid-template-columns:1fr}}

/* partners */
.vendors{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--surface)}
.vendors div{padding:30px 20px;display:grid;gap:6px;place-items:center;text-align:center;border-inline-start:1px solid var(--line)}
.vendors div:first-child{border-inline-start:0}
.vendors b{font:600 1.5rem/1 var(--f-display);letter-spacing:.01em;direction:ltr}
.vendors span{font-size:.82rem;color:var(--ink-2)}
@media(max-width:700px){.vendors{grid-template-columns:1fr 1fr}.vendors div:nth-child(3){border-inline-start:0}.vendors div:nth-child(n+3){border-top:1px solid var(--line)}}

/* group & strategic partner */
.group{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);background:var(--surface)}
.group article{padding:30px;display:grid;gap:14px;align-content:start;border-inline-start:1px solid var(--line);min-width:0}
.group article:first-child{border-inline-start:0;background:var(--chip)}
.group .lg{height:56px;display:flex;align-items:center}
.group .lg img{max-height:52px;width:auto}
.group .lg svg{height:52px;width:auto}
.group .lg.wide img{max-height:26px}
.group .role{color:var(--teal-deep)}
.group h3{font-size:1.3rem}
.group p{color:var(--ink-2);font-size:.93rem}
.group .where{font:500 .85rem var(--f-mono);color:var(--ink);direction:ltr;text-align:start}
[dir=rtl] .group .where{text-align:right}
.group a.lnk{font-weight:600;font-size:.9rem;display:inline-flex;gap:8px;align-items:center;text-decoration:none;border-bottom:1.5px solid var(--teal);width:max-content;padding-bottom:2px}
.logo-on-dark{display:none}
.group .lg img.keep{height:52px;max-height:none;width:auto}
.tl-night{display:none}
:root[data-theme="dark"] .lg img:not(.keep){filter:brightness(0) invert(1)}
:root[data-theme="dark"] .tl-day{display:none}:root[data-theme="dark"] .tl-night{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lg img:not(.keep){filter:brightness(0) invert(1)}:root:not([data-theme="light"]) .tl-day{display:none}:root:not([data-theme="light"]) .tl-night{display:block}}
@media(max-width:900px){.group{grid-template-columns:1fr}.group article{border-inline-start:0;border-top:1px solid var(--line)}.group article:first-child{border-top:0}}

/* CTA */
.cta{position:relative;overflow:hidden;background:var(--teal-deep);color:var(--onteal)}
.cta .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;padding-block:64px}
.cta h2{font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--onteal)}
.cta p{opacity:.9;margin-top:12px;max-width:52ch}
.cta .btn{background:var(--onteal);color:var(--teal-deep);border-color:var(--onteal)}
.cta .ctas{justify-content:flex-end}
.cta::after{content:"";position:absolute;inset-inline-end:-40px;top:-30px;width:260px;height:340px;background:color-mix(in srgb,var(--onteal) 10%,transparent);clip-path:polygon(40% 0,100% 0,60% 100%,0 100%);pointer-events:none}
@media(max-width:820px){.cta .wrap{grid-template-columns:1fr}.cta .ctas{justify-content:flex-start}}

/* footer */
.ftr{background:var(--band);color:var(--band-mute);font-size:.92rem}
.ftr .wrap{padding-block:56px 28px;display:grid;gap:40px}
.ftr .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:32px}
.ftr h4{font:500 .78rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--band-fg);margin:0 0 14px}
[dir=rtl] .ftr h4{font-family:"IBM Plex Sans Arabic",sans-serif;text-transform:none;letter-spacing:0;font-size:.9rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ftr a{text-decoration:none}.ftr a:hover{color:var(--band-fg)}
.ftr .logo svg{height:38px;--ink:#EAF4F5}
.ftr .contact li{display:grid;gap:2px}
.ftr .contact b{font-weight:500;color:var(--band-fg);direction:ltr;text-align:start;unicode-bidi:plaintext}
.ftr .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid color-mix(in srgb,var(--band-fg) 14%,transparent);padding-top:22px;font-size:.84rem}
.ftr .base div{display:flex;gap:18px;flex-wrap:wrap}
@media(max-width:860px){.ftr .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ftr .cols{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---- v2: distributor positioning, drawn technical illustrations instead of photos ---- */
.illo{background-color:var(--chip);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;color:var(--ink)}
:root{--grid:color-mix(in srgb,var(--teal) 14%,transparent);--metal:#FFFFFF;--metal-2:#E8F0F2}
:root[data-theme="dark"]{--metal:#123A4D;--metal-2:#0D3042}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--metal:#123A4D;--metal-2:#0D3042}}
.illo svg{display:block;width:100%;height:100%}
.hero-fig .ph.illo{aspect-ratio:4/4.3}
.sol .im.illo{display:block}
.sol .im.illo svg{height:100%}
.ln{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ln.t{stroke-width:1.2;opacity:.55}
.mt{fill:var(--metal);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.mt2{fill:var(--metal-2);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.tl{fill:var(--teal)}.tls{stroke:var(--teal);fill:none;stroke-width:2.2;stroke-linecap:round}
.rd{fill:var(--red)}.yl{fill:var(--yellow)}.ik{fill:var(--ink)}
.lbl{font:500 11px var(--f-mono);fill:var(--ink-2);letter-spacing:.06em}

/* brands */
.brands{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.brand{background:var(--surface);border:1px solid var(--line);padding:24px;display:grid;gap:12px;align-content:start;min-width:0}
.brand.off{border-top:3px solid var(--teal-deep)}
.brand.res{border-top:3px solid var(--ink)}
.brand b.nm{font:600 1.7rem/1 var(--f-display);direction:ltr;text-align:start}
[dir=rtl] .brand b.nm{text-align:right}
.badge{display:inline-flex;align-items:center;gap:7px;font:500 .74rem/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;padding:6px 9px;border-radius:2px;width:fit-content;max-width:100%}
.badge.off{background:var(--teal-deep);color:var(--onteal)}
.badge.res{background:var(--chip);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
[dir=rtl] .badge{font-family:"IBM Plex Sans Arabic",sans-serif;text-transform:none;letter-spacing:0;font-size:.8rem}
.brand p{color:var(--ink-2);font-size:.93rem}
.brand ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.brand li{font-size:.8rem;border:1px solid var(--line);padding:3px 8px;border-radius:2px;color:var(--ink-2)}
.brands-foot{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-top:20px;color:var(--ink-2);font-size:.92rem}
@media(max-width:980px){.brands{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.brands{grid-template-columns:1fr}}

/* partner programme (band) */
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:color-mix(in srgb,var(--band-fg) 14%,transparent);border:1px solid color-mix(in srgb,var(--band-fg) 14%,transparent)}
.perk{background:var(--band);padding:26px 24px;display:grid;gap:10px;align-content:start}
.perk svg{width:30px;height:30px;color:var(--teal-soft)}
.perk h3{font-size:1.18rem;color:var(--band-fg)}
.perk p{font-size:.92rem;color:var(--band-mute)}
.band .ctas{margin-top:32px}
.band .btn.ghost{color:var(--band-fg);border-color:color-mix(in srgb,var(--band-fg) 30%,transparent)}
.band .btn.ghost:hover{border-color:var(--band-fg)}
.who{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.who span{font-size:.82rem;border:1px solid color-mix(in srgb,var(--band-fg) 22%,transparent);color:var(--band-fg);padding:5px 10px;border-radius:2px}
@media(max-width:900px){.perks{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.perks{grid-template-columns:1fr}}


/* ================= full site components ================= */
.skip{position:absolute;inset-inline-start:-9999px;top:8px;background:var(--ink);color:var(--surface);padding:10px 14px;z-index:100}
.skip:focus{inset-inline-start:12px}
.hdr{transition:box-shadow .25s ease}
.hdr .wrap{transition:height .25s ease}
.hdr.scrolled{box-shadow:0 10px 30px -22px rgba(7,62,90,.5)}
.hdr.scrolled .wrap{height:62px}
.hdr .logo svg{transition:height .25s ease}
.hdr.scrolled .logo svg{height:38px}
.nav a[aria-current=page]{color:var(--ink);border-color:var(--teal)}
.langs a{font:500 .78rem/1 var(--f-mono);color:var(--ink-2);padding:7px 9px;border-radius:2px;text-decoration:none}
.langs a.ar{font-family:"IBM Plex Sans Arabic",sans-serif;font-size:.85rem}
.langs a[aria-current=true]{background:var(--ink);color:var(--surface)}
/* dropdown */
.dd{position:relative;display:flex;align-items:center}
.dd>button{font:inherit;font-weight:500;background:none;border:0;color:var(--ink-2);padding:6px 0;border-bottom:2px solid transparent;cursor:pointer;display:flex;gap:6px;align-items:center}
.dd>button:hover,.dd.cur>button{color:var(--ink);border-color:var(--teal)}
.dd>button svg{transition:transform .2s}
.dd-menu{position:absolute;top:calc(100% + 10px);inset-inline-start:-16px;min-width:260px;background:var(--surface);border:1px solid var(--line);box-shadow:0 22px 40px -24px rgba(7,62,90,.45);padding:8px;display:none;flex-direction:column;z-index:60}
.dd.open .dd-menu{display:flex}
.dd.open>button svg{transform:rotate(180deg)}
.dd-menu a{display:grid;gap:2px;padding:10px 12px;border:0;color:var(--ink)}
.dd-menu a small{color:var(--ink-2);font-weight:400;font-size:.8rem}
.dd-menu a:hover{background:var(--chip)}
@media(max-width:1080px){
  .dd{flex-direction:column;align-items:stretch}
  .dd>button{padding-block:12px;border-bottom:1px solid var(--line);justify-content:space-between}
  .dd-menu{position:static;box-shadow:none;border:0;padding:0 0 6px;min-width:0}
  .dd-menu a{padding-inline-start:16px}
}

/* page hero */
.phero{padding-block:48px 56px;border-bottom:1px solid var(--line);background:var(--surface);overflow:hidden;position:relative}
.phero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.phero .t{display:grid;gap:18px;min-width:0}
.phero h1{font-size:clamp(2rem,4vw,3.1rem)}
.phero .lead{font-size:1.1rem;color:var(--ink-2);max-width:60ch}
.phero .fig{min-width:0;aspect-ratio:16/10;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%,0 20%)}
[dir=rtl] .phero .fig{clip-path:polygon(0 0,88% 0,100% 20%,100% 100%,0 100%)}
.phero .fig svg{width:100%;height:100%;display:block}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.84rem;color:var(--ink-2)}
.crumbs a{color:var(--ink-2);text-decoration:none}.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{opacity:.5}
@media(max-width:860px){.phero .wrap{grid-template-columns:1fr}.phero .fig{max-width:520px}}
.phero.slim .wrap{grid-template-columns:1fr}

/* generic grids & cards */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);padding:26px;display:grid;gap:12px;align-content:start;min-width:0}
.card h3{font-size:1.25rem}
.card p{color:var(--ink-2);font-size:.95rem}
.card .ico{width:34px;height:34px;color:var(--teal-deep)}
.card ul{margin:0;padding-inline-start:18px;color:var(--ink-2);font-size:.93rem;display:grid;gap:6px}
.card.accent{border-top:3px solid var(--teal-deep)}
a.card{text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
a.card:hover{border-color:var(--teal);transform:translateY(-2px)}
.lnk2{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--teal);padding-bottom:2px;width:fit-content}
[dir=rtl] .lnk2 svg{transform:scaleX(-1)}

/* split rows (pillar pages) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split+.split{margin-top:72px}
.split .t{display:grid;gap:16px;min-width:0}
.split h2{font-size:clamp(1.6rem,3vw,2.3rem)}
.split p{color:var(--ink-2)}
.split .media{min-width:0;aspect-ratio:16/10;border:1px solid var(--line)}
.split .media svg{width:100%;height:100%;display:block}
.split.rev .media{order:-1}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:28px}.split.rev .media{order:0}}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--ink);font-size:.97rem}
.ticks li::before{content:"";width:10px;height:14px;margin-top:5px;background:var(--teal);clip-path:polygon(40% 0,100% 0,60% 100%,0 100%)}
.brandrow{display:flex;flex-wrap:wrap;gap:10px}

/* brand logo tiles (always on white: vendor guidelines) */
.ltile{background:#fff;border:1px solid var(--line);display:grid;place-items:center;padding:18px 22px;height:96px}
.ltile img{max-height:52px;max-width:100%;width:auto;height:auto;object-fit:contain}
.ltile.sm{height:64px;padding:10px 14px}.ltile.sm img{max-height:34px}
.ltile .txt{font:600 1.3rem/1 var(--f-display);color:#073E5A}
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:860px){.wall{grid-template-columns:repeat(2,1fr)}}
.brand .ltile{margin:-24px -24px 6px;border:0;border-bottom:1px solid var(--line)}
.bdetail{display:grid;grid-template-columns:280px 1fr;gap:40px;padding-block:44px;border-top:1px solid var(--line)}
.bdetail:first-of-type{border-top:0}
.bdetail aside{display:grid;gap:14px;align-content:start}
.bdetail .body{display:grid;gap:14px;min-width:0}
.bdetail h3{font-size:1.6rem}
.bdetail p{color:var(--ink-2)}
@media(max-width:820px){.bdetail{grid-template-columns:1fr;gap:20px}}
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.chips li{font-size:.82rem;border:1px solid var(--line);padding:4px 9px;border-radius:2px;color:var(--ink-2);background:var(--surface)}

/* CEO */
.ceo{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:start;background:var(--surface);border:1px solid var(--line);padding:40px}
.ceo .ph{aspect-ratio:4/5;background:var(--band);display:grid;place-items:center;position:relative;overflow:hidden}
.ceo .ph b{font:600 4rem/1 var(--f-display);color:var(--teal-soft)}
.ceo .ph::after{content:"";position:absolute;inset-inline-end:-30px;bottom:-20px;width:120px;height:160px;background:var(--red);clip-path:polygon(40% 0,100% 0,60% 100%,0 100%);opacity:.9}
.ceo blockquote{margin:0;display:grid;gap:16px;font-size:1.06rem;color:var(--ink)}
.ceo blockquote p:first-child{font:500 1.45rem/1.35 var(--f-display);color:var(--ink)}
[dir=rtl] .ceo blockquote p:first-child{font-family:"IBM Plex Sans Arabic",sans-serif}
.ceo .sig{display:grid;gap:2px;margin-top:6px}
.ceo .sig b{font-size:1.05rem}.ceo .sig span{color:var(--ink-2);font-size:.9rem}
@media(max-width:820px){.ceo{grid-template-columns:1fr;padding:24px;gap:24px}.ceo .ph{max-width:220px}}

/* offices */
.offices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.office{background:var(--surface);border:1px solid var(--line);padding:24px;display:grid;gap:10px;align-content:start}
.office .flag{font:500 .78rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-deep)}
[dir=rtl] .office .flag{font-family:"IBM Plex Sans Arabic",sans-serif;letter-spacing:0;text-transform:none;font-size:.85rem}
.office h3{font-size:1.2rem}.office p{color:var(--ink-2);font-size:.92rem}
.office.hq{border-top:3px solid var(--teal-deep)}
.office a{font-size:.9rem}
@media(max-width:900px){.offices{grid-template-columns:1fr 1fr}}@media(max-width:600px){.offices{grid-template-columns:1fr}}
.ltr{direction:ltr;unicode-bidi:isolate}

/* contact & forms */
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.kv{display:grid;gap:4px;padding-block:14px;border-bottom:1px solid var(--line)}
.kv span{font-size:.82rem;color:var(--ink-2)}
.kv b,.kv a{font-weight:500;color:var(--ink)}
.form{background:var(--surface);border:1px solid var(--line);padding:32px;display:grid;gap:18px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.form .row{grid-template-columns:1fr}.form{padding:22px}}
.form label{display:grid;gap:6px;font-weight:500;font-size:.92rem}
.form input,.form select,.form textarea{font:400 1rem var(--f-body);padding:12px 14px;border:1px solid var(--line);border-radius:2px;background:var(--paper);color:var(--ink);width:100%}
[dir=rtl] .form input,[dir=rtl] .form select,[dir=rtl] .form textarea{font-family:"IBM Plex Sans Arabic",sans-serif}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--teal);outline-offset:0;border-color:transparent}
.form textarea{min-height:140px;resize:vertical}
.form .check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.88rem;color:var(--ink-2)}
.form .check input{width:auto;margin-top:4px}
.form .hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.form .status{font-size:.92rem;padding:12px 14px;border-radius:2px;display:none}
.form .status.ok{display:block;background:color-mix(in srgb,var(--teal) 14%,var(--surface));color:var(--ink)}
.form .status.err{display:block;background:color-mix(in srgb,var(--red) 14%,var(--surface));color:var(--ink)}
.req{color:var(--red)}

/* prose (legal) */
.prose{max-width:760px;display:grid;gap:16px;color:var(--ink)}
.prose h2{font-size:1.45rem;margin-top:22px}
.prose h3{font-size:1.1rem;margin-top:8px}
.prose p,.prose li{color:var(--ink-2)}
.prose ul{margin:0;padding-inline-start:20px;display:grid;gap:6px}
.prose table{border-collapse:collapse;width:100%;font-size:.92rem}
.prose td,.prose th{border:1px solid var(--line);padding:10px;text-align:start;vertical-align:top}
.prose .tblw{overflow-x:auto}
.draft{display:flex;gap:10px;font-size:.88rem;color:var(--ink-2);background:color-mix(in srgb,var(--yellow) 18%,var(--surface));border:1px solid color-mix(in srgb,var(--yellow) 60%,transparent);padding:12px 14px}
.meta{font-size:.85rem;color:var(--ink-2)}

/* cookie banner */
.cookie{position:fixed;inset-inline:0;bottom:0;z-index:80;padding:0 max(16px,env(safe-area-inset-left,0px)) calc(16px + env(safe-area-inset-bottom,0px));pointer-events:none}
.cookie .in{pointer-events:auto;max-width:760px;margin-inline:auto;background:var(--surface);border:1px solid var(--line);box-shadow:0 24px 50px -24px rgba(7,62,90,.55);padding:18px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cookie p{flex:1 1 320px;font-size:.9rem;color:var(--ink-2)}
.cookie .btns{display:flex;gap:8px}
.cookie .btn{padding:11px 16px}

/* WhatsApp floating button */
.wa{position:fixed;inset-inline-end:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:70;width:54px;height:54px;border-radius:50%;background:#1FAF5A;color:#fff;display:grid;place-items:center;box-shadow:0 12px 26px -10px rgba(0,0,0,.4);transition:transform .2s}
.wa:hover{transform:scale(1.06)}
.wa svg{width:28px;height:28px}
body.has-cookie .wa{bottom:calc(110px + env(safe-area-inset-bottom,0px))}

/* 404 */
.nf{padding-block:96px;text-align:start}
.nf b{font:600 clamp(5rem,14vw,9rem)/1 var(--f-display);color:var(--teal-deep)}

/* social */
.social{display:flex;gap:10px}
.social a{width:36px;height:36px;border:1px solid color-mix(in srgb,var(--band-fg) 22%,transparent);display:grid;place-items:center;border-radius:2px}
.social svg{width:16px;height:16px}

/* ================= motion ================= */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
html.js .rv.in{opacity:1;transform:none}
html.js .stagger>.rv:nth-child(2){transition-delay:.08s}html.js .stagger>.rv:nth-child(3){transition-delay:.16s}
html.js .stagger>.rv:nth-child(4){transition-delay:.24s}html.js .stagger>.rv:nth-child(5){transition-delay:.32s}
html.js .stagger>.rv:nth-child(6){transition-delay:.4s}html.js .stagger>.rv:nth-child(7){transition-delay:.48s}html.js .stagger>.rv:nth-child(8){transition-delay:.56s}
/* drawings trace themselves */
html.js .draw .ln,html.js .draw .tls{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.4,.1,.2,1)}
html.js .draw .mt,html.js .draw .mt2{fill-opacity:0;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s ease,fill-opacity .8s ease .9s}
html.js .draw .tl,html.js .draw .yl,html.js .draw .rd,html.js .draw .ik,html.js .draw .lbl{opacity:0;transition:opacity .6s ease 1.1s}
html.js .draw.in .ln,html.js .draw.in .tls,html.js .draw.in .mt,html.js .draw.in .mt2{stroke-dashoffset:0;fill-opacity:1}
html.js .draw.in .tl,html.js .draw.in .yl,html.js .draw.in .rd,html.js .draw.in .ik,html.js .draw.in .lbl{opacity:1}
.shard{will-change:transform}
@media (prefers-reduced-motion:reduce){
  html.js .rv,html.js .draw *{opacity:1!important;transform:none!important;stroke-dashoffset:0!important;fill-opacity:1!important;transition:none!important}
}

/* responsive column helpers */
.sol-grid.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.sol-grid.c3{grid-template-columns:1fr 1fr}}@media(max-width:620px){.sol-grid.c3{grid-template-columns:1fr}}
.perks.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.perks.c4{grid-template-columns:1fr 1fr}}@media(max-width:560px){.perks.c4{grid-template-columns:1fr}}
.steps.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.steps.c4{grid-template-columns:1fr 1fr}}@media(max-width:520px){.steps.c4{grid-template-columns:1fr}}
.wall.c3{grid-template-columns:repeat(3,1fr)}.wall.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:520px){.wall.c3{grid-template-columns:1fr 1fr}}
.steps-light li{border-top-color:var(--line)}
.steps-light h3{color:var(--ink)}.steps-light p{color:var(--ink-2)}.steps-light .n{color:var(--teal-deep)}
.group .lg img.keep{height:52px;width:auto;max-height:none}
html.js .draw.in .ln.dash{stroke-dasharray:.03 .04}
.ftr .logo svg{--ink:#EAF4F5}
.form label{display:block}
.form label>input,.form label>select,.form label>textarea{display:block;margin-top:6px}
.form label.check{display:flex}
.form label.check>input{display:inline;margin-top:4px}
.split .media .ltile{background:transparent;padding:24px}.split .media .ltile img{max-height:110px;width:70%}
.illo svg,.fig svg,.media svg{direction:ltr}

.ceo .ph.photo{background:#073E5A}
.ceo .ph.photo::after{display:none}
.ceo .ph.photo img{width:100%;height:100%;object-fit:cover;display:block}