/* Layout concept: a calm, cool-white editorial page; one teal "Q" ring motif in the hero, content on a 1120px column, insights read like a briefing paper. */
:root{
  --paper:#F5F8F8; --surface:#FFFFFF; --ink:#0F0F0F; --muted:#55615F; --line:#DCE5E3;
  --teal:#2BCCBB; --teal-ink:#0B7F73; --teal-wash:#E5F7F4; --band:#0F0F0F; --band-ink:#F2F6F5;
  --red:#C0392B; --amber:#B7791F; --green:#2F855A;
  --f-display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --f-body:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --f-read:"Source Serif 4",Georgia,"Times New Roman",serif;
  --w:1120px; --read:680px; --gut:20px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0B100F; --surface:#121918; --ink:#ECF2F1; --muted:#9BAAA7; --line:#24312E;
  --teal:#2BCCBB; --teal-ink:#4FD9C9; --teal-wash:#0F2B27; --band:#050807; --band-ink:#ECF2F1;
  --red:#F07167; --amber:#F2B45A; --green:#6FCF97; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0B100F; --surface:#121918; --ink:#ECF2F1; --muted:#9BAAA7; --line:#24312E;
  --teal:#2BCCBB; --teal-ink:#4FD9C9; --teal-wash:#0F2B27; --band:#050807; --band-ink:#ECF2F1;
  --red:#F07167; --amber:#F2B45A; --green:#6FCF97; color-scheme:dark}
html[lang="ar"]{--f-display:"IBM Plex Sans Arabic","Montserrat",Tahoma,sans-serif;--f-body:"IBM Plex Sans Arabic",Tahoma,sans-serif;--f-read:"Noto Naskh Arabic","IBM Plex Sans Arabic",serif}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--teal-ink);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;line-height:1.15;margin:0}
p{margin:0}
.wrap{max-width:var(--w);margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink)}
html[lang="ar"] .eyebrow{letter-spacing:0;font-size:13px}
.logo-dark{display:none!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-light{display:none!important}:root:not([data-theme="light"]) .logo-dark{display:block!important}}
:root[data-theme="dark"] .logo-light{display:none!important}:root[data-theme="dark"] .logo-dark{display:block!important}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:68px}
.brand img{height:34px;width:auto;display:block}
.nav{display:flex;gap:22px;margin-inline-start:auto;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:600}
.nav a:hover{color:var(--teal-ink)}
.lang{font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;border:1px solid var(--line);padding:6px 12px;border-radius:999px}
.lang:hover{border-color:var(--teal)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:700;font-size:15px;text-decoration:none;padding:13px 22px;border-radius:999px;border:2px solid var(--ink);color:var(--paper);background:var(--ink);transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.small{padding:8px 16px;font-size:14px}
@media (max-width:900px){.nav{display:none}.top .btn.small{display:none}.top .lang{margin-inline-start:auto}}

/* hero */
.hero{position:relative;overflow:hidden;padding-block:88px 72px}
.ring{position:absolute;inset-inline-end:-140px;top:-120px;width:520px;height:520px;border-radius:50%;border:56px solid var(--teal);opacity:.16;pointer-events:none}
.ring::after{content:"";position:absolute;width:62px;height:62px;border-radius:50%;background:var(--teal);right:52px;bottom:40px}
html[lang="ar"] .ring::after{right:auto;left:52px}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:end}
.hero h1{font-size:clamp(36px,5.6vw,64px);font-weight:800;letter-spacing:-.025em;margin-block:18px 22px}
html[lang="ar"] .hero h1{letter-spacing:0;line-height:1.3}
.hero h1 em{font-style:normal;color:var(--teal-ink)}
.lead{font-size:18px;color:var(--muted);max-width:60ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.figures{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink)}
.fig{padding:18px 4px 18px 0;border-bottom:1px solid var(--line)}
.fig b{display:block;font-family:var(--f-display);font-size:34px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fig span{font-size:13px;color:var(--muted);line-height:1.4;display:block}
@media (max-width:900px){.hero{padding-block:56px 48px}.hero-grid{grid-template-columns:1fr;gap:40px}.ring{width:320px;height:320px;border-width:36px;inset-inline-end:-120px;top:-80px}.ring::after{width:40px;height:40px}}

/* sections */
section.block{padding-block:84px;border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:40px;margin-bottom:44px;align-items:end}
.sec-head h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;letter-spacing:-.02em;margin-top:10px}
html[lang="ar"] .sec-head h2{letter-spacing:0}
.sec-head p{color:var(--muted);font-size:17px;max-width:58ch}
@media (max-width:800px){.sec-head{grid-template-columns:1fr;gap:14px}section.block{padding-block:60px}}

.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:14px}
.svc .code{font-family:var(--f-display);font-weight:800;font-size:13px;color:var(--teal-ink);letter-spacing:.08em}
.svc h3{font-size:21px;font-weight:700}
.svc p{color:var(--muted);font-size:15px}
.svc .for{margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);font-size:13px;color:var(--ink)}
.svc .for b{color:var(--teal-ink)}
@media (max-width:900px){.services{grid-template-columns:1fr}}

.approach{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;align-items:start}
.quote{font-family:var(--f-read);font-size:clamp(26px,3.2vw,38px);line-height:1.3;font-weight:500;border-inline-start:6px solid var(--teal);padding-inline-start:28px}
.quote small{display:block;font-family:var(--f-body);font-size:13px;color:var(--muted);margin-top:18px;letter-spacing:.04em}
.approach .txt{display:flex;flex-direction:column;gap:18px;color:var(--muted);font-size:16.5px}
.approach .txt strong{color:var(--ink)}
@media (max-width:900px){.approach{grid-template-columns:1fr;gap:32px}}

.orgs{border-top:2px solid var(--ink)}
.org-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding-block:22px;border-bottom:1px solid var(--line);align-items:baseline}
.org-row .cty{font-family:var(--f-display);font-weight:700;font-size:15px;display:flex;gap:10px;align-items:baseline}
.org-row .cty i{font-style:normal;font-size:12px;color:var(--teal-ink);letter-spacing:.1em}
.org-row ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:18px;font-weight:600}
@media (max-width:700px){.org-row{grid-template-columns:1fr;gap:8px}}

.founder{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px}
.founder .bio{display:flex;flex-direction:column;gap:16px;font-size:16.5px;color:var(--muted)}
.founder .bio p:first-child{color:var(--ink);font-size:19px;font-weight:500}
.facts{list-style:none;margin:0;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:16px}
.facts li{display:grid;grid-template-columns:auto 1fr;gap:14px;font-size:14.5px;line-height:1.5}
.facts li b{font-family:var(--f-display);color:var(--teal-ink);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding-top:2px;min-width:86px}
html[lang="ar"] .facts li b{letter-spacing:0;font-size:13px}
@media (max-width:900px){.founder{grid-template-columns:1fr;gap:32px}}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;transition:border-color .15s ease,transform .15s ease}
.card:hover{border-color:var(--teal);transform:translateY(-2px)}
.card .cat{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
html[lang="ar"] .card .cat{letter-spacing:0;font-size:12.5px}
.card h3{font-size:19px;font-weight:700;line-height:1.3}
.card p{font-size:14.5px;color:var(--muted)}
.card .meta{margin-top:auto;font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
.more{margin-top:28px}

.contact{background:var(--band);color:var(--band-ink);border-radius:20px;padding:56px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center}
.contact h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.02em;color:var(--band-ink)}
html[lang="ar"] .contact h2{letter-spacing:0}
.contact p{color:color-mix(in srgb,var(--band-ink) 70%,transparent);margin-top:14px}
.contact .ways{display:flex;flex-direction:column;gap:14px}
.contact .way{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid color-mix(in srgb,var(--band-ink) 20%,transparent);padding-bottom:12px;font-size:15px}
.contact .way span{color:color-mix(in srgb,var(--band-ink) 60%,transparent)}
.contact .way a,.contact .way b{color:var(--band-ink);font-weight:700;text-decoration:none}
.contact .btn{background:var(--teal);border-color:var(--teal);color:#0F0F0F;align-self:flex-start;margin-top:8px}
@media (max-width:800px){.contact{grid-template-columns:1fr;padding:32px 24px}}

footer.foot{padding-block:40px 56px;color:var(--muted);font-size:13.5px}
footer.foot .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
footer.foot img{height:26px;width:auto}
footer.foot a{color:var(--muted)}

/* insights index */
.page-head{padding-block:64px 36px}
.page-head h1{font-size:clamp(34px,5vw,56px);font-weight:800;letter-spacing:-.025em;margin-top:12px}
html[lang="ar"] .page-head h1{letter-spacing:0}
.page-head p{color:var(--muted);font-size:18px;margin-top:14px;max-width:60ch}
.list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding-bottom:72px}
@media (max-width:800px){.list{grid-template-columns:1fr}}

/* article */
.art-head{padding-block:56px 28px;max-width:860px}
.art-head .back{font-size:14px;font-weight:600;text-decoration:none}
.art-head h1{font-size:clamp(32px,4.8vw,52px);font-weight:800;letter-spacing:-.025em;margin-block:16px 20px;line-height:1.12}
html[lang="ar"] .art-head h1{letter-spacing:0;line-height:1.35}
.art-head h1 em{font-style:normal;color:var(--teal-ink);display:block}
.art-head .stand{font-family:var(--f-read);font-size:21px;line-height:1.5;color:var(--ink);opacity:.85}
.byline{display:flex;align-items:center;gap:14px;margin-top:26px;font-size:14px;color:var(--muted)}
.byline .av{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:15px;flex:none}
.byline b{color:var(--ink);display:block}
.article{max-width:var(--read);padding-bottom:56px;font-family:var(--f-read);font-size:19px;line-height:1.75}
.article>*+*{margin-top:1.15em}
.article h2{font-family:var(--f-display);font-size:25px;font-weight:700;margin-top:2em;letter-spacing:-.01em}
html[lang="ar"] .article h2{letter-spacing:0}
.article hr.rule{border:0;border-top:1px solid var(--line);margin-block:0 1.5em}
.article sup{font-family:var(--f-body);font-size:.6em;color:var(--teal-ink)}
.article blockquote{margin-inline:0;padding:6px 0 6px 24px;border-inline-start:4px solid var(--teal);font-style:italic}
html[lang="ar"] .article blockquote{padding:6px 24px 6px 0;font-style:normal}
.article blockquote cite{display:block;font-style:normal;font-family:var(--f-body);font-size:14px;color:var(--muted);margin-top:8px}
.article .pull{font-family:var(--f-display);font-weight:700;font-size:24px;line-height:1.4;color:var(--teal-ink);border-block:2px solid var(--ink);padding-block:22px}
.fact-box,.warning-box{font-family:var(--f-body);font-size:15.5px;line-height:1.65;background:var(--teal-wash);border-radius:12px;padding:22px 24px}
.warning-box{background:color-mix(in srgb,var(--red) 12%,var(--surface))}
.fact-box>*+*,.warning-box>*+*{margin-top:.7em}
.fact-box-title{font-family:var(--f-display);font-weight:800;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}
html[lang="ar"] .fact-box-title{letter-spacing:0;font-size:14px}
.timeline{font-family:var(--f-body);font-size:15px;line-height:1.55;border-inline-start:2px solid var(--line);padding-inline-start:22px;display:flex;flex-direction:column;gap:18px}
.tl-item{position:relative}
.tl-dot{position:absolute;inset-inline-start:-29px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--teal);border:2px solid var(--paper)}
.tl-dot.red{background:var(--red)}
.tl-date{font-weight:800;font-size:12.5px;letter-spacing:.06em;color:var(--teal-ink)}
.tl-date.red{color:var(--red)}
.tbl{overflow-x:auto}
table.compare{width:100%;border-collapse:collapse;font-family:var(--f-body);font-size:14.5px;line-height:1.45}
table.compare th,table.compare td{text-align:start;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.compare th{background:var(--ink);color:var(--paper);font-weight:700;font-size:13px}
.badge{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.badge-green{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}
.badge-red{background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--red)}
.badge-amber{background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--amber)}
.badge-teal{background:var(--teal-wash);color:var(--teal-ink)}
.sources{font-family:var(--f-body);font-size:13.5px;line-height:1.7;color:var(--muted);border-top:2px solid var(--ink);padding-top:18px;margin-top:2.5em;overflow-wrap:anywhere}
.sources-label{font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--f-body)}
.tag{font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.tag.brand{border-color:var(--teal);color:var(--teal-ink)}
.next{border-top:1px solid var(--line);padding-block:48px 72px}
.next h2{font-size:22px;margin-bottom:20px}
.card .thumb{display:block;width:calc(100% + 48px);max-width:none;margin:-24px -24px 6px;aspect-ratio:16/9;object-fit:cover;border-radius:13px 13px 0 0;background:var(--line)}
.hero-img{margin:0 0 40px;max-width:860px}
.hero-img img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}