:root{
  --cream:#f4f5f5; --cream-2:#eaebec; --paper:#ffffff; --white:#ffffff;
  --gold:#c6aa53; --gold-2:#ceb56a; --gold-deep:#a78a30; --gold-lite:#e1d3a8; --gold-soft:#eee8d3;
  /* same hue (45deg) + saturation as --gold-deep, 4% darker: the only gold safe as TEXT on light bg */
  --gold-text:#977d2b;
  /* ---- ANYTHING that sits ON a gold fill: labels, icons, badges ----
     White on gold measures 1.09-2.44:1 across the palette — WCAG AA needs 4.5:1 for text
     and 3:1 for icons, so white is unusable here at every gold stop.
     Dark ink on the SAME gold: 7.0:1 on --gold-2, 6.17:1 on --gold, 4.21:1 on --gold-deep.
     The badges and buttons stay gold; only what sits on top of them changes. */
  --on-gold:#2b2c2e;
  --badge-ink:var(--on-gold);
  --taupe:#d3d5d6; --taupe-2:#c6c8ca; --taupe-line:#b7b9bc;
  --ink:#393a3c; --ink-2:#555659; --gray:#75777a; --muted:#929396;
  --line:#e4e5e6; --line-2:#dadcdd;
  --disp:'Tajawal',system-ui,sans-serif; --body:'Tajawal',system-ui,sans-serif;
  --r:16px; --r-lg:22px; --r-xl:28px; --pill:999px;
  /* ---- TYPE SCALE — the ONLY font sizes allowed ---- */
  --t1:14px;  /* meta, captions, badges, eyebrow, dates */
  --t2:16px;  /* body copy, links, buttons, nav-adjacent */
  --t3:18px;  /* section intro paragraph, footer column heads */
  --t4:20px;  /* card titles (h3/h4) */
  --t5:25px;  /* feature sub-display */
  --t6:32px;  /* section headings (h2), stat figures */
  --t7:40px;  /* hero heading @ tablet, decorative glyph */
  --t8:56px;  /* hero heading (h1) */
  /* ---- WEIGHTS: 3 only ---- */
  --w-reg:400; --w-bold:700; --w-head:800;

  /* ---- SPACING SCALE — 8px base. The ONLY padding values allowed. ---- */
  --s1:8px;   /* micro: badges, dropdown items, tight insets */
  --s2:16px;  /* small: compact card bodies, mobile gutters */
  --s3:24px;  /* base: card padding, container gutter, title -> content */
  --s4:32px;  /* medium: reflection well */
  --s5:48px;  /* section padding-block */
  --s6:64px;  /* page bookends: hero bottom, footer top */
  --s7:96px;  /* sticky-nav anchor offset */
  --shadow:0 22px 50px -26px rgba(45,47,50,.4);
  --shadow-sm:0 12px 30px -18px rgba(45,47,50,.34);
  --wrap:1320px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--s7);overflow-x:hidden}
body{font-family:var(--body);font-size:var(--t2);font-weight:var(--w-reg);color:var(--ink);background:var(--cream);
  line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4,h5{font-family:var(--disp);font-weight:var(--w-head);line-height:1.25;color:var(--ink)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s3)}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold-lite)}

/* ---------- buttons / pills ---------- */
.pill{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--disp);font-weight:var(--w-bold);font-size:var(--t2);
  padding:var(--s1) var(--s3);min-height:48px;border-radius:var(--pill);border:1.5px solid var(--gold);color:var(--ink);
  background:transparent;cursor:pointer;transition:.28s}
.pill:hover{background:var(--gold);color:var(--on-gold);box-shadow:0 12px 26px -14px rgba(167,138,48,.8);transform:translateY(-2px)}
.pill--solid{background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:var(--on-gold);border-color:transparent}
.pill--solid:hover{filter:brightness(1.05)}   /* the label stays --on-gold; white here measured 2.06:1 */

/* ---------- section heading ---------- */
.shead{text-align:center;margin-bottom:var(--s3)}
.shead .eyebrow{display:block;font-family:var(--disp);font-weight:var(--w-bold);font-size:var(--t1);letter-spacing:.14em;color:var(--ink-2);margin-bottom:.35rem}
.shead h2{font-size:var(--t6);color:var(--gold-text)}
.shead .rule{width:74px;height:4px;border-radius:3px;margin:.7rem auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.shead p{color:var(--ink-2);max-width:560px;margin:.7rem auto 0;font-size:var(--t3)}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:60;transition:.3s}
.nav.scrolled .nav__main{box-shadow:0 10px 30px -22px rgba(45,47,50,.5)}

/* top bar */
.nav__top{background:#333333;height:36px;display:flex;align-items:center}
.nav__top .wrap{display:flex;align-items:center;justify-content:space-between;height:100%}
.nav__social{display:flex;align-items:center;gap:2px}
.nav__social a{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  color:rgba(255,255,255,.6);transition:color .2s,background .2s}
.nav__social a:hover{color:var(--gold);background:rgba(198,170,83,.12)}
.nav__social a svg{width:15px;height:15px}
.nav__top-end{display:flex;align-items:center;gap:4px}
.nav__top-sep{width:1px;height:16px;background:rgba(255,255,255,.15);margin-inline:6px}
.lang-btn{display:flex;align-items:center;gap:5px;font-family:var(--disp);font-weight:var(--w-bold);
  font-size:12px;color:rgba(255,255,255,.8);padding:4px 10px;border-radius:var(--pill);
  border:1px solid rgba(255,255,255,.3);background:#333333;transition:.2s;cursor:pointer}
.lang-btn:hover{color:var(--gold);border-color:var(--gold);background:#333333}
.lang-btn svg{width:13px;height:13px}

/* main nav bar */
.nav__main{background:rgba(245,245,244,.96);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s}
.nav__main .wrap{display:flex;align-items:center;gap:var(--s2);height:72px}
.brand{display:flex;align-items:center;flex:none}
.brand-logo{height:54px;width:auto;display:block}
.brand-logo--foot{height:48px}
.brand .mk{width:34px;height:34px;flex:none}
.brand .wm{display:flex;flex-direction:column;line-height:1.15}
.menu{display:flex;align-items:center;gap:2px;list-style:none;margin-inline:auto}
.menu>li{position:relative}
.menu>li>a{display:flex;align-items:center;gap:4px;font-family:var(--disp);font-weight:var(--w-bold);font-size:var(--t2);
  color:var(--ink-2);padding:8px var(--s2);border-radius:10px;transition:.2s;white-space:nowrap}
.menu>li>a:hover,.menu>li.active>a{color:var(--ink);background:var(--cream-2)}
.menu>li>a .cx{width:12px;height:12px;opacity:.55;transition:.25s}
.menu>li:hover>a .cx{transform:rotate(180deg)}
.menu>li>a:hover{color:var(--gold-text)}
.drop{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:var(--s1);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.24s;z-index:5}
.menu>li:hover .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:var(--s1) var(--s2);border-radius:9px;font-size:var(--t2);color:var(--ink-2);transition:.18s}
.drop a:hover{background:var(--cream-2);color:var(--ink)}
.nav__actions{display:flex;align-items:center;gap:6px;flex:none}
.ico{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:var(--gray);background:transparent;border:0;cursor:pointer;
  transition:background .24s,color .24s,transform .24s}
.ico:hover{color:#333333;background:var(--gold);transform:translateY(-2px)}
.ico:active{transform:translateY(0)}
.ico:focus-visible{border-radius:50%;outline-offset:2px}
.ico svg{width:20px;height:20px}
.nav__search-btn{display:flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:var(--w-bold);
  font-size:var(--t2);color:var(--ink-2);background:var(--cream-2);border:1.5px solid var(--line-2);
  border-radius:var(--pill);padding:7px 16px;cursor:pointer;transition:.25s;white-space:nowrap}
.nav__search-btn svg{width:16px;height:16px;color:var(--gray)}
.nav__search-btn:hover{border-color:var(--gold);color:var(--gold-text);background:var(--gold-soft)}
.burger{display:none;width:42px;height:42px;border:0;background:transparent;cursor:pointer;flex-direction:column;gap:5px;justify-content:center;align-items:center;margin-inline-start:auto}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}


/* ---------- admin quick-bar (logged-in admins only) ---------- */
.abar{background:var(--ink);color:#fff;font-size:var(--t1)}
.abar__inner{display:flex;align-items:center;gap:var(--s3);min-height:40px;flex-wrap:wrap;padding-block:6px}
.abar__brand{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--disp);font-weight:var(--w-bold);
  color:var(--gold-2);white-space:nowrap}
.abar__brand svg{width:15px;height:15px}
.abar__links{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-inline-start:auto;list-style:none}
.abar__links a{display:inline-flex;align-items:center;gap:.4rem;padding:5px 10px;border-radius:var(--pill);
  color:#e9eaeb;transition:background .2s,color .2s;white-space:nowrap}
.abar__links a:hover{background:rgba(255,255,255,.12);color:#fff}
.abar__links svg{width:14px;height:14px;opacity:.85}


/* ---------- HERO CAROUSEL ---------- */
.hcar{position:relative;display:grid}
/* every slide occupies the same cell -> the art column never jumps between slides */
.hslide{grid-area:1/1;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.75,.2,1)}
.hslide.is-active{opacity:1;transform:none;pointer-events:auto}
.hslide[hidden]{display:none}
.hero__title--alt{margin-bottom:0}
/* the two hero artworks share one cell and cross-fade with the carousel */
.hero__float{position:relative}
/* Driven by HEIGHT, not width: the artwork is landscape (1.46:1) while slide 1's is square,
   so matching both dimensions is impossible. Instead it grows until its AREA matches — which
   lands at 512px wide. Wider than that and it starts colliding with the stats grid, so the cap
   is exactly the art box plus the two grid gutters it is allowed to spill into. */
.hero__statillo{position:absolute;z-index:1;inset:0;margin:auto;display:block;
  /* measured: the vertical slogan is the binding constraint, and it sits exactly 12px
     beyond the art box at every desktop width. Growing past that clips the slogan. */
  width:auto;height:auto;max-height:100%;max-width:calc(100% + 12px);pointer-events:none;
  opacity:0;transform:scale(.94);
  filter:drop-shadow(0 26px 40px rgba(45,47,50,.22));
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.75,.2,1)}
.hero.art-2 .hero__statillo{opacity:1;transform:none}
/* dropping the animation releases its forwards-fill, so these declarations can take effect */
.hero__illo{transition:opacity .5s ease,transform .5s cubic-bezier(.2,.75,.2,1)}
.hero.art-2 .hero__illo{animation:none;opacity:0;transform:scale(.96)}
@media(prefers-reduced-motion:reduce){
  .hero__statillo,.hero__illo{transition:none;transform:none}
}
.hero__lede{margin-top:-.6rem;max-width:34em;color:var(--ink-2);font-size:var(--t3);line-height:1.85}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--s3)}

.hcar__ui{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s3)}
.hcar__dots{display:flex;gap:8px}
.hcar__dot{width:26px;height:6px;border-radius:var(--pill);border:0;padding:0;cursor:pointer;
  background:var(--taupe-2);transition:.3s}
.hcar__dot.is-on{width:40px;background:var(--gold)}
.hcar__dot:focus-visible{outline:2px solid var(--gold-text);outline-offset:3px}
.hcar__arrows{display:flex;gap:8px}
.hcar__nav{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;cursor:pointer;
  background:var(--paper);border:1px solid var(--line-2);color:var(--ink-2);
  box-shadow:var(--shadow-sm);transition:background .24s,color .24s,transform .24s,border-color .24s}
.hcar__nav svg{width:18px;height:18px}
.hcar__nav:hover{background:var(--gold);border-color:var(--gold);color:#2b2c2e;transform:translateY(-2px)}
.hcar__nav:active{transform:translateY(0)}
.hcar__nav:focus-visible{border-radius:50%;outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .hslide{transition:none;transform:none}
  .hcar__nav:hover{transform:none}
}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;padding-block:var(--s2) var(--s4)}
.hero__curves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero__curves path{fill:none;stroke:var(--taupe-line);stroke-width:1.1;opacity:.75;
  stroke-dasharray:2600;stroke-dashoffset:2600;animation:draw 2.6s ease forwards .3s}
.hero__curves path:nth-child(2){opacity:.32;animation-delay:.5s}
.hero__curves path:nth-child(3){opacity:.22;animation-delay:.7s}
.hero__curves .arrow{opacity:.7;stroke-width:1.4}
@keyframes draw{to{stroke-dashoffset:0}}
.dotgrid{position:absolute;width:120px;height:80px;z-index:0;opacity:0;animation:fadeIn 1s ease forwards .9s;
  background-image:radial-gradient(var(--taupe-2) 1.3px,transparent 1.3px);background-size:13px 13px}
.dotgrid.a{top:52px;right:33%}
.dotgrid.b{top:40px;left:6%;width:150px;height:110px;opacity:0;animation-delay:1.1s}
@keyframes fadeIn{to{opacity:.5}}
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.06fr;gap:var(--s3);align-items:center}
/* right column (art) comes first in RTL => appears on the right */
.hero__art{position:relative;display:flex;align-items:center;gap:10px;min-height:380px}
.hero__float{flex:1;min-width:0;position:relative;display:flex;justify-content:center;align-items:center;animation:floaty 6s ease-in-out infinite 1.4s}
.hero__illo{position:relative;z-index:1;display:block;width:100%;max-width:430px;height:auto;margin-inline:auto;opacity:0;transform:scale(.9) translateY(18px);animation:heroPop 1.1s cubic-bezier(.2,.8,.2,1) .45s both;will-change:transform,opacity;filter:drop-shadow(0 26px 40px rgba(45,47,50,.22))}
@keyframes heroPop{to{opacity:1;transform:none}}
.hero__glow{position:absolute;z-index:0;width:76%;aspect-ratio:1;left:50%;top:52%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(206,181,106,.15),rgba(206,181,106,.12) 45%,transparent 68%);filter:blur(6px);opacity:0;animation:glowIn 1.2s ease .5s forwards,glowPulse 6.5s ease-in-out infinite 1.7s}
@keyframes glowIn{to{opacity:1}}
@keyframes glowPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.09)}}
.spark{position:absolute;z-index:2;border-radius:50%;background:radial-gradient(circle,#f2e7c9,var(--gold));box-shadow:0 0 10px 2px rgba(206,181,106,.65);opacity:0;animation:twinkle 3.4s ease-in-out infinite}
.spark.s1{width:10px;height:10px;left:5%;top:22%;animation-delay:1.1s}
.spark.s2{width:7px;height:7px;right:7%;top:38%;animation-delay:1.5s}
.spark.s3{width:12px;height:12px;left:12%;bottom:15%;animation-delay:1.8s}
.spark.s4{width:6px;height:6px;right:14%;bottom:24%;animation-delay:2.1s}
@keyframes twinkle{0%,100%{opacity:.4;transform:translateY(0) scale(.9)}50%{opacity:1;transform:translateY(-8px) scale(1.15)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero__slogan{flex:none;/*text-align:end;*/font-family:var(--disp);padding-inline-start:2px}
.hero__slogan span{display:block;font-weight:var(--w-bold);font-size:var(--t3);color:var(--ink-2);
  opacity:0;transform:translateX(-14px);animation:slideIn .7s ease forwards}
.hero__slogan span:nth-child(1){animation-delay:1.2s}
.hero__slogan span:nth-child(2){animation-delay:1.35s}
.hero__slogan span:nth-child(3){animation-delay:1.5s}
.hero__slogan .u{width:40px;height:3px;background:var(--gold);border-radius:3px;margin-top:.5rem;
  opacity:0;animation:fadeIn2 .6s ease forwards 1.7s}
@keyframes fadeIn2{to{opacity:1}}
@keyframes slideIn{to{opacity:1;transform:none}}
/* left column (content) */
.hero__title{font-size:var(--t8);color:var(--gold-text);line-height:1.18;margin-bottom:1.2rem}
.hero__title .l{display:block;opacity:0;transform:translateY(18px);animation:rise .8s cubic-bezier(.2,.75,.2,1) forwards}
.hero__title .l:nth-child(1){animation-delay:.15s}
.hero__title .l:nth-child(2){animation-delay:.32s;color:var(--ink)}
.hero__title .dots{color:var(--gold);letter-spacing:2px}
@keyframes rise{to{opacity:1;transform:none}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;direction:ltr}
.stat-card{direction:inherit;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.42));
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 10px 30px -18px rgba(57,58,60,.35),inset 0 1px 0 rgba(255,255,255,.9);
  padding:var(--s3) var(--s2);text-align:center;box-shadow:var(--shadow-sm);position:relative;
  opacity:0;transform:translateY(24px);animation:rise .7s cubic-bezier(.2,.75,.2,1) both;transition:.3s}
/* Safari/Firefox without backdrop-filter would show the curves straight through the card */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .stat-card{background:linear-gradient(180deg,#fbfbfb,#eff0f0);border-color:var(--line-2)}
}
.stat-card:nth-child(1){animation-delay:.6s}
.stat-card:nth-child(2){animation-delay:.75s}
.stat-card:nth-child(3){animation-delay:.9s}
.stat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.stat-card__ic{width:58px;height:58px;border-radius:50%;background:var(--paper);margin:0 auto 12px;
  display:grid;place-items:center;box-shadow:0 8px 18px -10px rgba(45,47,50,.5)}
.stat-card__ic svg{width:26px;height:26px;color:var(--gold-text)}
.stat-card .lbl{font-size:var(--t1);color:var(--ink-2);line-height:1.5;min-height:2.6em}
.stat-card .num{font-family:var(--disp);font-weight:var(--w-head);font-size:var(--t6);color:var(--gold-text);margin:.15rem 0}
.stat-card .sub{font-size:var(--t1);color:var(--ink-2)}

/* ---------- FEATURE (news + chairman) ---------- */
.feature{padding-block:var(--s5)}
.feature__grid{display:grid;grid-template-columns:1fr 1.62fr;gap:var(--s3);align-items:stretch}
/* right(RTL)=leadership (stacked) ; left(RTL)=news */

/* ---- leadership cards ---- */
.lead-col{display:flex;flex-direction:column;gap:var(--s3)}
/* same shell and same behaviour as the pillar cards: border-only at rest,
   a gold wash and a gold bar that arrive together on hover */
.lead-card{position:relative;display:flex;flex-direction:column;flex:1;background:transparent;
  border:1px solid var(--taupe-line);border-radius:var(--r-xl);padding:var(--s3);
  box-shadow:none;transition:transform .32s,box-shadow .32s,border-color .32s;overflow:hidden}
.lead-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,var(--gold-soft) 0%,rgba(238,232,211,.5) 32%,rgba(255,255,255,0) 68%);
  opacity:0;transition:opacity .34s ease}
.lead-card > *{position:relative;z-index:1}
.lead-card::after{content:"";position:absolute;z-index:2;inset:0 0 auto 0;height:0;
  background:linear-gradient(90deg,var(--gold-2),var(--gold),var(--gold-deep));transition:.3s}
.lead-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--gold-lite)}
.lead-card:hover::before{opacity:1}
.lead-card:hover::after{height:4px}
/* the chairman's card is the "featured" one — it carries the wash at rest, exactly like
   حقائق مصرفية does among the pillars. NOT the permanent gold bar: you asked me to remove that. */
.lead-card--feat{border-color:var(--gold-lite)}
.lead-card--feat::before{opacity:.68}

/* the avatar answers the hover the way the pillar icons do */
.lead-author__ava{transition:transform .42s cubic-bezier(.2,.75,.2,1),box-shadow .42s ease,border-color .42s ease}
.lead-card:hover .lead-author__ava{transform:translateY(-3px) scale(1.06);border-color:var(--gold-lite);
  box-shadow:0 12px 22px -12px rgba(151,125,43,.5)}
.lead-btn svg{transition:transform .26s}
.lead-card:hover .lead-btn svg{transform:translateX(-4px)}
.lead-badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--gold);color:var(--badge-ink);  /* same treatment as .nfeat__tag — the svg uses currentColor, so the star / briefcase follow the label */
  font-family:var(--disp);font-weight:var(--w-bold);font-size:var(--t1);padding:var(--s1) var(--s2);border-radius:var(--pill);align-self:flex-start}
.lead-badge svg{width:14px;height:14px}
.lead-card__title{font-family:var(--disp);font-weight:var(--w-head);font-size:var(--t4);color:var(--ink);margin-top:.75rem}
.lead-quote{position:relative;color:var(--ink-2);line-height:1.85;font-size:var(--t2);margin-top:.5rem;flex:1}
.lead-quote::before{content:"\201D";font-family:var(--disp);font-size:var(--t7);color:var(--taupe-2);line-height:0;
  position:relative;top:.32em;margin-inline-end:.12rem}
.lead-div{height:1px;background:var(--line);margin:1rem 0 .9rem}
.lead-author{display:flex;align-items:center;gap:.75rem}
.lead-author__ava{flex:none;width:46px;height:46px;border-radius:50%;overflow:hidden;border:2px solid var(--line-2);background:var(--cream-2)}
.lead-author__ava img{width:100%;height:100%;object-fit:cover}
.lead-author__meta b{display:block;font-family:var(--disp);font-weight:var(--w-head);color:var(--ink);font-size:var(--t2)}
.lead-author__meta span{font-size:var(--t1);color:var(--ink-2)}
.lead-btn{align-self:flex-start;margin-top:1.05rem;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--disp);font-weight:var(--w-bold);font-size:var(--t2);color:var(--ink);
  padding:var(--s1) var(--s3);border:1.5px solid var(--taupe-line);border-radius:var(--pill);transition:.26s}
.lead-btn svg{width:14px;height:14px}
.lead-btn:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px)}

/* ---- news feed (option A) ---- */
.news-a{display:flex;flex-direction:column;background:var(--cream-2);
  border:1px solid var(--line-2);border-radius:var(--r-xl);padding:var(--s3);gap:14px;height:100%}
.news-a__head{display:flex;align-items:center;gap:12px}
.news-a__head h3{font-family:var(--disp);font-weight:var(--w-head);font-size:var(--t4);color:var(--ink);white-space:nowrap}
.news-a__line{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--line-2))}
.news-a__badge{flex:none;background:var(--ink);color:#fff;font-family:var(--disp);font-weight:var(--w-bold);font-size:var(--t1);padding:var(--s1) var(--s2);border-radius:var(--pill)}
.news-a__feat{display:flex;align-items:stretch;background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  transition:.3s;text-decoration:none;min-height:160px}
.news-a__feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--taupe-line)}
.news-a__feat-img{flex:0 0 38%;position:relative;overflow:hidden;background:var(--cream-2)}
.news-a__feat-img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.news-a__feat:hover .news-a__feat-img img{transform:scale(1.05)}
.news-a__feat-tag{position:absolute;top:10px;inset-inline-start:10px;background:var(--gold);color:var(--on-gold);
  font-family:var(--disp);font-weight:var(--w-bold);font-size:var(--t1);padding:4px 10px;border-radius:var(--pill)}
.news-a__feat-body{flex:1;padding:var(--s2);display:flex;flex-direction:column;justify-content:center;gap:6px}
.news-a__feat-body h4{font-size:var(--t3);line-height:1.45;color:var(--ink);font-weight:var(--w-head)}
.news-a__feat-foot{display:flex;align-items:center;justify-content:space-between;font-size:var(--t1);color:var(--ink-2);margin-top:auto}
.news-a__feat-foot time{font-weight:var(--w-bold)}
.news-a__feed{display:flex;flex-direction:column;gap:0;flex:1}
.news-a__item{display:flex;align-items:center;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--gold-lite);text-decoration:none;transition:.2s}
.news-a__item:last-child{border-bottom:none}
.news-a__item:hover{transform:translateX(-3px)}
.news-a__item-img{flex:none;width:56px;height:56px;border-radius:10px;overflow:hidden;background:var(--cream-2)}
.news-a__item-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.news-a__item:hover .news-a__item-img img{transform:scale(1.07)}
.news-a__item-body{flex:1;min-width:0}
.news-a__item-body time{font-size:var(--t1);color:var(--ink-2);font-weight:var(--w-bold);display:block;margin-bottom:2px}
.news-a__item-body h5{font-size:var(--t2);color:var(--ink);line-height:1.4;font-weight:var(--w-bold)}
.news-a__item-arrow{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--cream-2);color:var(--ink-2);transition:.2s}
.news-a__item:hover .news-a__item-arrow{background:var(--gold);color:var(--on-gold)}
.news-a__item-arrow svg{width:12px;height:12px}
.news-a__more{width:100%;justify-content:center;margin-top:4px}

/* ---------- MAGAZINE (editorial split) ---------- */
.mag{position:relative;padding-block:var(--s5);overflow:hidden;
  background:linear-gradient(168deg,#757779 0%,#6e7072 38%,#686a6c 72%,#606264 100%)}
.mag::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 56% at 50% 44%,rgba(198,170,83,.12),transparent 66%)}
.mag>.wrap{position:relative;z-index:1}
.mag .shead{margin-bottom:var(--s4)}
.mag .shead .eyebrow{color:#fff;opacity:.92}
.mag .shead h2{color:#fff;font-size:var(--t6)}
.mag .shead p{color:rgba(255,255,255,.8);margin-top:.5rem;font-size:var(--t3)}
.mag .pill{color:#fff;border-color:rgba(255,255,255,.55)}
.mag .pill:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.mag__grid{display:grid;grid-template-columns:1fr 1.55fr;gap:var(--s4);align-items:start}
.mag__list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;
  padding-inline-end:8px;scrollbar-width:thin;scrollbar-color:rgba(198,170,83,.4) transparent}
.mag__list::-webkit-scrollbar{width:4px}
.mag__list::-webkit-scrollbar-thumb{background:rgba(198,170,83,.4);border-radius:2px}
.mag__list::-webkit-scrollbar{width:4px}
.mag__list::-webkit-scrollbar-thumb{background:rgba(198,170,83,.4);border-radius:2px}
.mag__row{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:12px;
  cursor:pointer;transition:background .22s,transform .22s;border:1px solid transparent}
.mag__row:hover{background:rgba(255,255,255,.08);transform:translateX(-3px)}
.mag__row.active{background:rgba(198,170,83,.15);border-color:rgba(198,170,83,.35)}
.mag__thumb{flex:none;width:48px;height:62px;border-radius:6px;overflow:hidden;
  background:rgba(255,255,255,.1);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.mag__thumb img{width:100%;height:100%;object-fit:cover}
.mag__row-meta{flex:1;min-width:0}
.mag__row-meta strong{display:block;font-size:var(--t2);font-weight:var(--w-bold);color:#fff;line-height:1.3}
.mag__row-meta span{font-size:var(--t1);color:rgba(255,255,255,.55)}
.mag__row.active .mag__row-meta strong{color:var(--gold-2)}
.mag__row.active .mag__row-meta span{color:rgba(198,170,83,.7)}
.mag__feat{position:relative}
.mag__cover-wrap{display:flex;align-items:stretch;gap:28px}
.mag__cover{flex:none;width:240px;border-radius:16px;overflow:hidden;position:relative;
  box-shadow:0 32px 64px -24px rgba(0,0,0,.6),0 0 0 3px var(--gold)}
.mag__cover img{width:100%;object-fit:cover;display:block;aspect-ratio:3/4;
  transition:transform .5s cubic-bezier(.2,.75,.2,1)}
.mag__cover:hover img{transform:scale(1.03)}
.mag__latest-badge{position:absolute;top:12px;inset-inline-start:12px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:var(--on-gold);
  font-size:var(--t1);font-weight:var(--w-bold);padding:5px 12px;border-radius:var(--pill);
  display:flex;align-items:center;gap:5px;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.mag__latest-badge svg{width:12px;height:12px}
.mag__info{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px}
.mag__info-badge{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:var(--on-gold);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.5)}
.mag__info-badge svg{width:18px;height:18px}
.mag__title{font-size:26px;font-weight:var(--w-head);color:#fff;line-height:1.2}
.mag__quarter{font-size:var(--t2);font-weight:var(--w-bold);color:var(--gold-2);
  display:flex;align-items:center;gap:8px}
.mag__quarter .dot{width:5px;height:5px;border-radius:50%;background:var(--gold-2);display:inline-block}
.mag__desc{font-size:var(--t2);color:rgba(255,255,255,.65);line-height:1.7;max-width:280px}
.mag__actions{display:flex;gap:10px;flex-wrap:wrap}
.cf-read,.cf-pdf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--disp);font-weight:var(--w-bold);height:48px;font-size:var(--t2);
  padding-block:0;padding-inline:var(--s3);border-radius:var(--pill);text-decoration:none;transition:.25s;cursor:pointer}
.cf-read{background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:var(--on-gold);border:none}
.cf-read:hover{filter:brightness(1.07);transform:translateY(-2px)}
.cf-pdf{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.cf-pdf:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff;transform:translateY(-2px)}
.cf-read svg,.cf-pdf svg{width:16px;height:16px;flex:none}
.mag-more{display:flex;justify-content:center;margin-top:var(--s4)}
@media(max-width:900px){
  .mag__grid{grid-template-columns:1fr}
  .mag__list{max-height:none;flex-direction:row;overflow-x:auto;overflow-y:visible;flex-wrap:nowrap}
  .mag__row{flex:0 0 auto}
  .mag__row-meta{min-width:150px}
  .mag__cover-wrap{flex-direction:column;align-items:center}
  .mag__cover{width:220px}
}
@media(max-width:640px){
  .mag__cover{width:180px}
  .mag__title{font-size:var(--t4)}
  .mag__info{gap:10px}
}

.coverflow{position:relative;margin-top:0;outline:none}
.mag-swiper{overflow:hidden;padding-block:var(--s1) var(--s4)}
.mag-swiper:not(.swiper-initialized){overflow-x:auto}
.mag-swiper:not(.swiper-initialized) .swiper-wrapper{gap:16px}
.mag-swiper:not(.swiper-initialized) .swiper-slide{flex:0 0 auto}
.mag-swiper .swiper-slide{width:200px;height:auto}
.cf-card{position:relative;border-radius:16px;overflow:hidden;background:var(--paper);
  box-shadow:0 18px 36px -22px rgba(0,0,0,.5);
  -webkit-box-reflect:below 2px linear-gradient(to bottom,rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 15%)}
.cf-card__img{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--cream-2)}
.cf-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.cf-card__img::after{content:"";position:absolute;inset:0;background:rgba(43,44,46,.30);
  transition:.45s;pointer-events:none;z-index:2}
.swiper-slide-active .cf-card__img::after{background:rgba(43,44,46,0)}
.cf-latest{position:absolute;z-index:3;inset-block-start:var(--s1);inset-inline-end:var(--s1);
  display:inline-flex;align-items:center;gap:.3rem;
  background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:var(--on-gold);
  font-family:var(--disp);font-weight:var(--w-bold);font-size:var(--t1);padding:var(--s1) var(--s2);border-radius:var(--pill);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.6)}
.cf-latest svg{width:12px;height:12px}

/* active (centered) slide */
/* the 'الأحدث' badge already marks this issue — a second permanent gold ring was redundant */
.cf-card--latest{box-shadow:0 22px 44px -24px rgba(0,0,0,.5)}
.swiper-slide-active .cf-card{box-shadow:0 30px 56px -26px rgba(0,0,0,.62),0 0 0 3px var(--gold)}

/* dynamic info panel (active issue) */
.cf-info{margin-top:0;display:flex;flex-direction:column;align-items:center;gap:.28rem;text-align:center;min-height:0}
.cf-info__badge{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;margin-bottom:0;
  background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:var(--on-gold);box-shadow:0 8px 20px -6px rgba(0,0,0,.55)}
.cf-info__badge svg{width:17px;height:17px}
.cf-info__title{font-family:var(--disp);font-weight:var(--w-head);font-size:var(--t5);color:#fff;line-height:1.2}
.cf-info__meta{font-family:var(--disp);font-weight:var(--w-bold);font-size:var(--t2);color:#fff;
  display:inline-flex;align-items:center;gap:.5rem}
.cf-info__meta .dot{width:5px;height:5px;border-radius:50%;background:#fff;display:inline-block}
.cf-info__actions{display:flex;gap:10px;margin-top:.5rem;flex-wrap:wrap;justify-content:center}
.cf-read,.cf-pdf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--disp);font-weight:var(--w-bold);height:52px;font-size:var(--t2);
  padding-block:0;padding-inline:var(--s3);border-radius:var(--pill);text-decoration:none;transition:.25s;cursor:pointer}
.cf-read{background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:var(--on-gold);border:1.5px solid transparent}
.cf-read:hover{filter:brightness(1.07);transform:translateY(-2px)}
.cf-pdf{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.cf-pdf:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff;transform:translateY(-2px)}
.cf-read svg,.cf-pdf svg{width:16px;height:16px;flex:none}
.cf-info.cf-anim{animation:cfIn .45s ease}
@keyframes cfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .ico:hover,.footer__social a:hover{transform:none}
}

.cf-nav{position:absolute;top:45%;transform:translateY(-50%);z-index:40;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(43,44,46,.55);backdrop-filter:blur(6px);
  color:#fff;display:grid;place-items:center;cursor:pointer;transition:.25s}
.cf-nav:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold);transform:translateY(-50%) scale(1.06)}
.cf-nav svg{width:22px;height:22px}
.cf-left{left:1%}
.cf-right{right:1%}

.cf-dots{margin-top:10px;display:flex;gap:8px;justify-content:center;position:static}
.cf-dots .swiper-pagination-bullet{width:8px;height:8px;margin:0!important;background:rgba(255,255,255,.32);
  opacity:1;border-radius:50%;transition:.28s}
.cf-dots .swiper-pagination-bullet:hover{background:rgba(255,255,255,.6)}
.cf-dots .swiper-pagination-bullet-active{background:var(--gold);width:22px;border-radius:5px}

.mag-more{display:flex;justify-content:center;margin-top:12px}

@media(max-width:640px){
  .mag-swiper{padding-block:var(--s1) var(--s4)}
  .mag-swiper .swiper-slide{width:168px}
  .cf-nav{width:42px;height:42px}
  .cf-nav svg{width:19px;height:19px}
  .cf-info__title{font-size:var(--t4)}
  .cf-info__actions{gap:8px;width:100%}
  .cf-read,.cf-pdf,.mag .pill{padding-inline:var(--s2);font-size:var(--t2)}
}

/* ---------- PILLARS — dark strip (option B) ---------- */
.pillars{padding-block:var(--s5);background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%);position:relative}
.pillars::before{content:none}
.pillars>.wrap{position:relative;z-index:1}
.pillars .shead{margin-bottom:var(--s4)}
.pillars .shead .eyebrow{color:var(--ink-2)}
.pillars .shead h2{color:var(--gold-text)}
.pillars .shead p{color:var(--ink-2)}
.pillars .shead .rule{background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.pillars__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.pillar{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0;gap:0;
  background:var(--paper);border-radius:var(--r-xl);overflow:hidden;
  border:1.5px solid var(--gold-lite);box-shadow:0 4px 18px -8px rgba(198,170,83,.2);
  transition:transform .38s cubic-bezier(.2,.75,.2,1),box-shadow .38s,border-color .38s;
  text-decoration:none;position:relative}
/* shimmer sweep on hover */
.pillar::before{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 30%,rgba(198,170,83,.12) 50%,transparent 70%);
  background-size:200% 100%;background-position:200% 0;
  opacity:0;transition:opacity .3s,background-position .7s ease;pointer-events:none;z-index:0}
.pillar:hover{transform:translateY(-8px);box-shadow:0 22px 48px -18px rgba(151,125,43,.35),0 0 0 1.5px var(--gold);border-color:var(--gold)}
.pillar:hover::before{opacity:1;background-position:-200% 0}
/* image header */
.pillar__img{width:100%;height:180px;position:relative;overflow:hidden;flex:none}
.pillar__img img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.72) brightness(.82) sepia(.18);
  transition:transform .5s cubic-bezier(.2,.75,.2,1),filter .4s}
.pillar:hover .pillar__img img{transform:scale(1.05);filter:saturate(.8) brightness(.88) sepia(.12)}
/* dual overlay: dark fade bottom + gold tint */
.pillar__img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(197,169,81,.18) 0%,
    rgba(42,42,42,.1) 45%,
    rgba(42,42,42,.82) 100%
  )}
/* content body */
.pillar__body{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:var(--s3) var(--s3) var(--s4);gap:var(--s2);flex:1;position:relative;z-index:1}
.pillar__ic{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:var(--on-gold);
  box-shadow:0 12px 28px -10px rgba(151,125,43,.4);
  transition:transform .38s cubic-bezier(.2,.75,.2,1),box-shadow .38s;position:relative;z-index:1}
.pillar__ic svg{width:32px;height:32px}
.pillar:hover .pillar__ic{transform:translateY(-5px) scale(1.08);
  box-shadow:0 18px 36px -14px rgba(167,138,48,.6)}

.pillar h3{font-family:var(--disp);font-size:var(--t4);color:var(--ink);font-weight:var(--w-head);position:relative;z-index:1;margin-bottom:.4rem}
.pillar p{font-size:var(--t2);color:var(--ink-2);line-height:1.85;max-width:280px;
  position:relative;z-index:1;flex:1}
.pillar__link{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--disp);font-weight:var(--w-bold);font-size:var(--t2);color:var(--gold-text);
  padding:6px var(--s2);border-radius:var(--pill);border:1px solid var(--gold-lite);
  transition:.25s;position:relative;z-index:1}
.pillar__link svg{width:14px;height:14px;transition:.22s}
.pillar:hover .pillar__link{background:var(--gold-soft);border-color:var(--gold)}
.pillar:hover .pillar__link svg{transform:translateX(-4px)}
.pillars__more{display:flex;justify-content:center;margin-top:var(--s4)}
.pillars .pill{color:var(--ink);border-color:var(--gold-lite)}
.pillars .pill:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
@media(prefers-reduced-motion:reduce){
  .pillar:hover .pillar__ic{transform:none}
  .lead-card:hover{transform:none}
  .lead-card:hover .lead-author__ava{transform:none}
  .lead-card:hover .lead-btn svg{transform:none}
}

/* ---------- MEMBERS (bank logo grid) ---------- */
.members{padding-block:var(--s5);background:linear-gradient(180deg,var(--cream-2) 0%,var(--cream) 100%);border-top:3px solid var(--gold-lite)}
.banks-marquee{margin-top:0;overflow:hidden;position:relative;direction:ltr;padding-block:24px;margin-block:-24px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.banks-track{display:flex;flex-wrap:nowrap;width:max-content;direction:ltr;
  /* promoted to its own compositor layer: the scroll never touches the main thread */
  transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden}
.mbank{position:relative;flex:0 0 auto;width:220px;margin-inline:12px;display:grid;place-items:center;
  background:#fff;border:1.5px solid var(--gold-lite);
  border-radius:18px;padding:var(--s3) var(--s4);min-height:130px;box-shadow:0 4px 16px -8px rgba(198,170,83,.18);
  transition:transform .3s,box-shadow .3s,border-color .3s;overflow:hidden}
.mbank::before{content:"";position:absolute;inset:0 0 auto 0;height:0;
  background:linear-gradient(90deg,var(--gold-2),var(--gold),var(--gold-deep));transition:.3s}
.mbank:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--gold)}
.mbank:hover::before{height:3px}
.mbank img{max-height:72px;max-width:160px;object-fit:contain;transition:.35s}
.mbank:hover img{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){
  .banks-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;margin-inline:auto}
  .banks-track .mbank[aria-hidden="true"]{display:none}
}

/* ---------- FOOTER ---------- */
.footer{background:#333333;color:#d6d7d9;padding-block:var(--s6) var(--s3);position:relative}
.footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:var(--s3)}
.footer__brand .mk{width:44px;height:44px}
.footer__brand .row{display:flex;align-items:center;gap:12px;margin-bottom:1rem}
.footer__brand p{font-size:var(--t2);color:#b6ad9c;line-height:1.8;max-width:320px}
.footer h4{color:#fff;font-size:var(--t3);margin-bottom:1rem}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.footer ul a{font-size:var(--t2);color:#b8babd;transition:.2s}
.footer ul a:hover{color:#fff}
.footer__contact li{display:flex;gap:.6rem;font-size:var(--t2);color:#b8babd;align-items:flex-start}
.footer__contact svg{width:16px;height:16px;color:#8f9194;flex:none;margin-top:3px}
.footer__social{display:flex;gap:8px;margin-top:1.1rem;flex-wrap:wrap}
.footer__social a{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);
  display:grid;place-items:center;flex:none;color:#d6d7d9;
  transition:background .24s,color .24s,transform .24s}
.footer__social a:hover{background:var(--gold);color:#2b2c2e;transform:translateY(-2px)}
.footer__social a:active{transform:translateY(0)}
/* gold ring: --gold-deep is too dark against the #2b2c2e footer */
.footer__social a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:50%}
.footer__social svg{width:20px;height:20px}
.footer__bar{border-top:1px solid rgba(255,255,255,.1);margin-top:var(--s3);padding-top:var(--s3);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:var(--t1);color:#a49b8a}
.footer__bar a{color:#d6d7d9}
.footer__bar a:hover{color:#fff}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
/* nav collapses earlier than the layout: 44px icons + 8px menu padding need ~1226px of bar */
@media(max-width:1320px){
  .nav__actions{display:none}
  .burger{display:flex}
  .brand{margin-inline-start:0}
  .nav__main{position:relative}
  .menu{display:flex;position:absolute;top:100%;inset-inline:0;flex-direction:column;background:var(--paper);
    border-bottom:0 solid var(--line);padding-inline:var(--s2);padding-block:0;gap:var(--s1);box-shadow:var(--shadow);
    max-height:0;overflow:hidden;transition:max-height .35s ease;align-items:stretch}
  .menu.open{max-height:80vh;overflow:auto;border-bottom-width:1px;padding-block:var(--s2)}
  .menu .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 var(--s2);background:transparent}
}
@media(max-width:1200px){
  .feature__grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}

  .hero__grid{grid-template-columns:1fr}
  .hero__art{order:2;min-height:auto;flex-direction:column-reverse}
  .hero__slogan{position:static;text-align:center;margin-top:14px;display:flex;flex-direction:column;align-items:center}
  .footer__grid{grid-template-columns:1fr 1fr}
  .hero__title{font-size:var(--t7)}   /* 56 -> 40 */
  /* single column: nothing to collide with, but nothing to spill into either */
  .hero__statillo{width:100%;height:auto;max-width:100%;max-height:none}
}
/* tablet */
@media(max-width:900px){
  .pillars__grid{grid-template-columns:repeat(2,1fr)}
  .feature,.members{padding-block:var(--s5)}
  .stats{gap:12px}
  .stat-card{padding:var(--s2) var(--s1)}
  .stat-card .num{font-size:var(--t5)}
}
/* large phone */
@media(max-width:640px){
  .nav .wrap{gap:4px}
  .nav__search-btn span{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr}
  .footer__bar{flex-direction:column;text-align:center}
  .lead-col{gap:var(--s3)}
  .lead-card{padding:var(--s3)}
  .hero{padding-block:var(--s3) var(--s5)}
  .feature,.mag,.members{padding-block:var(--s5)}
  .pillars__grid{grid-template-columns:1fr}
  .hero__title{font-size:var(--t6)}   /* 40 -> 32 */
  .shead h2{font-size:var(--t5)}      /* 32 -> 25 */
  /* 6px-tall dots are too small to hit; grow the hit area, not the dot */
  .hcar__dot{position:relative}
  .hcar__dot::after{content:"";position:absolute;inset:-16px -4px}
  /* 16px-tall footer links were an awkward tap target */
  .footer ul a{display:inline-block;padding-block:7px}

}
/* small phone */
@media(max-width:420px){
  .wrap{padding-inline:var(--s2)}
  .stats{grid-template-columns:1fr}
  .brand-logo{height:36px}
  .shead p{font-size:var(--t2)}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero__curves path{stroke-dashoffset:0}
  .reveal{opacity:1;transform:none}
}

/* The design was authored Arabic-first and hard-set `direction: rtl` here, which
   overrode the <html dir> attribute and rendered the English site right-to-left
   (punctuation jumped to the start of the line). Scope it to the RTL document so
   the same stylesheet serves both locales. */
html[dir="rtl"], html[dir="rtl"] body { direction: rtl; }
html[dir="ltr"], html[dir="ltr"] body { direction: ltr; }

/* ---------- directional arrows ----------
   The design is Arabic-first: every "forward" arrow and chevron is drawn pointing
   LEFT, which is correct in RTL. On the English (LTR) site those same glyphs point
   backwards, so mirror anything tagged .arw when the document is LTR.
   Only horizontal, direction-carrying icons get .arw — the vertical download arrow
   and the nav dropdown chevron are deliberately left alone. */
html[dir="ltr"] .arw { transform: scaleX(-1); }

/* ================================================================
   HEADER FIT — ABP has a 9-item Arabic main menu; the design mockup
   had 7 shorter (English) labels.

   Measured: the Arabic menu needs ~1166px, but the design's 1320px
   .wrap leaves only ~941px beside the logo and search button. The
   result was clipped menu items AND the search button pushed off
   screen (x = -109px at 1600px) — the header looked "cut off" and
   the Arabic search box looked missing entirely.

   Fixed by giving the nav bar (only) a wider container, tightening
   item spacing as space runs out, and collapsing to the burger a bit
   earlier than the design did (1320 -> 1400) so it degrades cleanly
   instead of overflowing. Content stays on the 1320 grid.
   ================================================================ */

/* the nav bar may use more width than the content column */
.nav__main .wrap{max-width:1560px}
.nav__top .wrap{max-width:1560px}

/* the menu absorbs the leftover space; brand and actions never shrink */
.brand,.nav__actions{flex:none}
.menu{min-width:0}

/* tighten spacing so 9 Arabic labels fit beside the logo and search button.
   Applied at every width: even at 1920px the bar is capped at 1560px, so the
   available space does not grow and full 16px padding overflowed by ~33px. */
.menu>li>a{padding-inline:11px}
.menu{gap:1px}
@media(max-width:1460px){
  .menu>li>a{padding-inline:8px;font-size:15px}
  .brand-logo{height:48px}
}

/* collapse to the burger before anything can clip (design used 1320) */
@media(max-width:1400px){
  .nav__actions{display:none}
  .burger{display:flex}
  .brand{margin-inline-start:0}
  .nav__main{position:relative}
  .menu{display:flex;position:absolute;top:100%;inset-inline:0;flex-direction:column;background:var(--paper);
    border-bottom:0 solid var(--line);padding-inline:var(--s2);padding-block:0;gap:var(--s1);box-shadow:var(--shadow);
    max-height:0;overflow:hidden;transition:max-height .35s ease;align-items:stretch}
  .menu.open{max-height:80vh;overflow:auto;border-bottom-width:1px;padding-block:var(--s2)}
  .menu>li>a{padding:10px var(--s2);font-size:var(--t2)}
  .menu .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 var(--s2);background:transparent}
}

/* The burger drawer hides .nav__actions, so give the drawer its own search entry.
   Order matters: the default must come BEFORE the media query, otherwise the
   unconditional rule wins on equal specificity and the field never shows. */
.menu .menu__search{display:none}
@media(max-width:1400px){
  .menu .menu__search{display:block}
}

/* drawer search field */
.menu__search form{display:flex;gap:.4rem;padding:var(--s1) 0}
.menu__search input{flex:1;min-width:0;height:44px;padding-inline:var(--s2);
  font-family:var(--body);font-size:var(--t2);color:var(--ink);background:var(--cream);
  border:1.5px solid var(--line-2);border-radius:var(--pill)}
.menu__search input:focus-visible{border-color:var(--gold);outline-offset:2px}
.menu__search button{flex:none;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:var(--on-gold)}
.menu__search button svg{width:18px;height:18px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}