@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Noto+Kufi+Arabic:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;700&display=swap');

:root{
  --navy:#05223E;
  --navy-soft:#0d3a63;
  --teal:#1F7874;
  --teal-soft:#2c948e;
  --blue:#417FC1;
  --mint:#B3DECA;
  --mint-pale:#EAF6F0;
  --ink:#0A1E2E;
  --paper:#FBFCFB;
  --paper-tint:#F4F8F7;
  --line: rgba(5,34,62,0.09);
  --shadow-sm: 0 4px 16px -6px rgba(5,34,62,0.12);
  --shadow-md: 0 20px 40px -18px rgba(5,34,62,0.22);
  --shadow-lg: 0 30px 70px -20px rgba(5,34,62,0.32);
  --r-lg: 3px;
  --r-xl: 4px;
  /* إيقاع رأسي موحّد للأقسام: كانت القيم متفرقة (70/80/90/100px)
     فتتراكم حشوتان متجاورتان إلى 180px بين كل قسمين. */
  --sec-y: clamp(40px, 4vw, 56px);
  --font-head: 'Tajawal', 'Noto Kufi Arabic', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  font-family:'Tajawal', sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100vw;
}
img, svg, video{max-width:100%;}
h1,h2,h3,h4{font-family:var(--font-head);}
::selection{background:var(--teal); color:#fff;}

/* Dash-list decorative marker (formal/government accent) */
.dash-list{display:flex; flex-direction:column; gap:7px; flex-shrink:0;}
.dash-list span{display:block; width:14px; height:2px; background:var(--line);}
.dash-list span:nth-child(1){width:14px;}
.dash-list span:nth-child(2){width:10px;}
.dash-list span:nth-child(3){width:14px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Tajawal', sans-serif;
  font-size:12.5px;
  letter-spacing:normal;
  color:var(--teal);
  font-weight:700;
  background:var(--mint-pale);
  padding:7px 16px 7px 14px;
  border-radius:30px;
}
.eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--teal); flex-shrink:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* Scroll reveal */
[data-reveal]{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);}
[data-reveal].in-view{opacity:1; transform:translateY(0);}

/* TOP UTILITY BAR — colored strip: social icons + quick links */
.topbar{
  background:linear-gradient(90deg, var(--teal), var(--teal-soft)); color:rgba(255,255,255,0.95); font-size:12.5px;
  font-family:'Tajawal', sans-serif;
}
.topbar-wrap{
  max-width:1280px; margin:0 auto; padding:9px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.topbar-social{display:flex; align-items:center; gap:14px;}
.topbar-social a{
  display:flex; align-items:center; justify-content:center; color:#fff; opacity:.85;
  transition:opacity .2s ease, transform .2s ease;
}
.topbar-social a:hover{opacity:1; transform:translateY(-1px);}
.topbar-social svg{width:14px; height:14px;}
.topbar-links{display:flex; align-items:center; gap:22px; font-weight:700;}
.topbar-links a{color:#fff; opacity:.9; transition:opacity .2s ease;}
.topbar-links a:hover{opacity:1; text-decoration:underline; text-underline-offset:3px;}
@media (max-width:600px){.topbar{display:none;}}

/* NAV */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  display:flex; align-items:stretch;
  transition:box-shadow .4s cubic-bezier(.16,1,.3,1), border-color .4s ease, background .4s ease;
}
.site-header.scrolled{
  background:rgba(255,255,255,0.98);
  box-shadow:0 8px 30px -14px rgba(5,34,62,0.2);
  border-bottom-color:var(--line);
}
.site-header-inner{flex:1; min-width:0;}
.nav-wrap{
  max-width:1280px; margin:0 auto; padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  transition:padding .4s cubic-bezier(.16,1,.3,1);
}
.site-header.scrolled .nav-wrap{padding:11px 32px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-logo{height:44px; width:auto; display:block; transition:height .4s cubic-bezier(.16,1,.3,1);}
.site-header.scrolled .brand-logo{height:36px;}
.nav-links{display:flex; gap:0; font-weight:600; font-size:14px; align-items:center;}
.nav-item{position:relative; display:flex; align-items:center;}
.nav-item > a, .nav-item > button{
  position:relative;
  display:flex; align-items:center; gap:6px;
  padding:11px 10px; color:#28425a; background:none; border:none;
  font-family:'Tajawal'; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap;
  border-radius:6px; transition:background .18s ease, color .18s ease;
}
.nav-item > .caret-toggle{padding:11px 10px;}
.nav-item > a::after{
  content:''; position:absolute; left:10px; right:10px; bottom:5px; height:2px;
  background:linear-gradient(90deg, var(--teal), var(--blue)); border-radius:2px; transform:scaleX(0); transform-origin:center;
  transition:transform .25s ease;
}
.nav-item:hover > a, .nav-item:hover > button, .nav-item.open > a, .nav-item.open > button{
  color:var(--navy); background:rgba(31,120,116,0.06);
}
.nav-item:hover > a::after, .nav-item.open > a::after{transform:scaleX(1);}
.nav-item .caret{width:9px; height:9px; transition:transform .2s ease; flex-shrink:0; opacity:0.55;}
.nav-item.open .caret, .nav-item.has-dropdown:hover .caret{transform:rotate(180deg);}
.nav-utility{display:flex; align-items:center; gap:14px;}
.nav-phone{display:flex; align-items:center; gap:10px; color:var(--navy); white-space:nowrap;}
.nav-phone-icon{
  width:38px; height:38px; border-radius:50%; background:var(--mint-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.nav-phone-icon svg{width:16px; height:16px;}
.nav-phone-text{font-family:var(--font-head); font-size:14.5px; font-weight:800; line-height:1.3;}
.nav-phone-text small{display:block; font-size:11px; font-weight:600; color:#7d8e9d;}
@media (max-width:1250px){.nav-phone{display:none;}}
.nav-search-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--navy);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-search-btn svg{width:16px; height:16px;}
.nav-search-btn:hover{background:var(--teal); color:#fff; border-color:var(--teal);}
.nav-search-box{
  max-height:0; overflow:hidden; background:#fff; border-top:1px solid transparent;
  transition:max-height .3s ease, border-color .2s ease;
}
.nav-search-box.open{max-height:80px; border-top-color:var(--line);}
.nav-search-inner{
  max-width:1280px; margin:0 auto; padding:16px 32px; display:flex; align-items:center; gap:12px;
}
.nav-search-inner svg{width:18px; height:18px; color:var(--teal); flex-shrink:0;}
.nav-search-inner input{
  flex:1; border:none; outline:none; font-family:'Tajawal'; font-size:15px; color:var(--navy); background:none;
}
.nav-cta{
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--teal); color:#fff; padding:0 34px; border-radius:0; flex-shrink:0;
  font-family:var(--font-head); font-weight:700; font-size:14px; white-space:nowrap; letter-spacing:normal;
  transition:background .2s ease;
}
.nav-cta svg{width:16px; height:16px;}
.nav-cta:hover{background:var(--navy);}
/* زرّان متجاوران: بوابة الأعضاء (شفّاف) وتسجيل دخول الزوّار (تيل) */
.nav-cta-group{display:flex; align-items:stretch; flex-shrink:0;}
.nav-cta-group .nav-cta{padding:0 26px;}
.nav-cta.is-ghost{
  background:var(--navy); color:#fff;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.14);
}
.nav-cta.is-ghost:hover{background:#0d3a63;}
/* أزرار الترويسة تختفي على الشاشات الضيّقة، وبديلها في لوحة الجوال */
@media (max-width:1100px){.nav-cta, .nav-cta-group{display:none;}}

.dropdown{
  position:absolute; top:calc(100% + 14px); right:0;
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--teal); border-radius:0;
  box-shadow:var(--shadow-lg);
  padding:10px; min-width:270px;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1), visibility .3s;
  z-index:60;
}
.nav-item.open .dropdown, .nav-item.has-dropdown:hover .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown a{
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-radius:2px; font-size:13.5px; color:#33475a;
  border-bottom:1px solid var(--line);
  font-weight:500; white-space:nowrap; transition:background .15s ease, color .15s ease, padding-right .15s ease;
  opacity:1;
}
.dropdown a:last-child{border-bottom:none;}
.dropdown-overview{font-weight:700 !important; color:var(--teal) !important; border-bottom:2px solid var(--line) !important; margin-bottom:4px;}
.dropdown a::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--line); flex-shrink:0; transition:background .15s ease;}
.dropdown a:hover{background:var(--mint-pale); color:var(--teal); padding-right:18px;}
.dropdown a:hover::before{background:var(--teal);}
.dropdown.wide{min-width:300px;}
.nav-item.open .dropdown a, .nav-item.has-dropdown:hover .dropdown a{
  animation:dropdown-item-in .32s cubic-bezier(.16,1,.3,1) both;
}
.nav-item.open .dropdown a:nth-child(1){animation-delay:.03s;}
.nav-item.open .dropdown a:nth-child(2){animation-delay:.07s;}
.nav-item.open .dropdown a:nth-child(3){animation-delay:.11s;}
.nav-item.open .dropdown a:nth-child(4){animation-delay:.15s;}
.nav-item.open .dropdown a:nth-child(5){animation-delay:.19s;}
.nav-item.open .dropdown a:nth-child(6){animation-delay:.23s;}
.nav-item.open .dropdown a:nth-child(7){animation-delay:.27s;}
.nav-item.open .dropdown a:nth-child(8){animation-delay:.31s;}
.nav-item.open .dropdown a:nth-child(9){animation-delay:.35s;}
@keyframes dropdown-item-in{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:translateY(0);}
}
.nav-item .caret-toggle{
  background:none; border:none; cursor:pointer; display:flex; align-items:center; color:inherit;
}

.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.nav-toggle svg{width:24px;height:24px;}

.mobile-panel{
  display:none; position:fixed; inset:0; background:#fff; z-index:100;
  padding:20px 24px; overflow-y:auto;
}
.mobile-panel.open{display:block;}
.mp-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;}
.mp-group{border-bottom:1px solid var(--line); padding:6px 0;}
.mp-group > button{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:none; border:none; padding:14px 4px; font-family:'Tajawal'; font-size:16px;
  font-weight:700; color:var(--navy); cursor:pointer;
}
.mp-group .mp-sub{display:none; padding:0 4px 14px;}
.mp-group.open .mp-sub{display:block;}
.mp-group.open > button .caret{transform:rotate(180deg);}
.mp-sub a{display:block; padding:9px 10px; font-size:14.5px; color:#465b6e; border-radius:8px;}
.mp-sub a:hover{background:var(--mint-pale);}
.mp-sub-overview{font-weight:700 !important; color:var(--teal) !important; border-bottom:1px solid var(--line); margin-bottom:6px; border-radius:0 !important;}
/* زرّا الدخول في لوحة الجوال */
.mp-login-btn.is-ghost{
  background:transparent; color:var(--navy);
  border:1px solid var(--line); margin-top:10px;
}
.mp-login-btn.is-ghost:hover{border-color:var(--teal); color:var(--teal); background:var(--mint-pale);}
.mp-login-btn svg{width:17px; height:17px; flex-shrink:0;}
.mp-me{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 18px; border:1px solid var(--line); background:var(--paper-tint);
  font-size:14px; font-weight:700; color:var(--navy);
}
.mp-me form{margin:0;}
.mp-me button{
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
  font-size:13px; font-weight:700; color:var(--teal);
}
.mp-login-wrap{padding:20px 4px 10px;}
.mp-login-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; background:var(--teal); color:#fff;
  font-weight:700; font-size:14.5px; padding:13px; border-radius:6px;
}
.mp-login-btn svg{width:17px; height:17px;}
.mp-group > a.mp-direct{
  display:block; padding:14px 4px; font-weight:700; font-size:16px; color:var(--navy);
}

@media (max-width:1100px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
  #ctaBtn{display:none;}
}

/* MAIN CONTENT SHELL */
main{display:block; overflow:hidden;}

/* HERO — real photo, left-weighted bold headline (gov/campaign style) */
/* الهيرو يلتزم بحاوية الصفحة نفسها (1180px موسّطة + هامش 28px) كبقية
   الأقسام. كان بلا هامش أفقي إطلاقاً، فيلتصق عمود النص بحافة النافذة
   ويقع خطّ محاذاته اليمنى بعيداً عن خطّ بقية الصفحة. */
.section-hero{
  position:relative; overflow:hidden;
  min-height:88vh; display:flex; align-items:center; justify-content:center;
  text-align:right; color:#fff; padding:120px 0 0;
  background:var(--navy);
}
.hero-slides{position:absolute; inset:0; z-index:0;}
.hero-slide{
  position:absolute; inset:0; opacity:0;
  background-size:cover; background-position:center;
  transition:opacity 1.8s ease;
}
.hero-slide.active{opacity:1;}
.hero-slide-1{background-image:
  linear-gradient(90deg, rgba(5,34,62,0.75) 0%, rgba(5,34,62,0.62) 40%, rgba(5,34,62,0.3) 100%),
  linear-gradient(0deg, rgba(5,34,62,0.5), rgba(5,34,62,0.5)),
  url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&w=1920&q=80');
}
.hero-slide-2{background-image:
  linear-gradient(90deg, rgba(5,34,62,0.75) 0%, rgba(5,34,62,0.62) 40%, rgba(5,34,62,0.3) 100%),
  linear-gradient(0deg, rgba(5,34,62,0.5), rgba(5,34,62,0.5)),
  url('https://images.unsplash.com/photo-1505373877841-8d25f7d46678?auto=format&fit=crop&w=1920&q=80');
}
.hero-slide-3{background-image:
  linear-gradient(90deg, rgba(5,34,62,0.75) 0%, rgba(5,34,62,0.62) 40%, rgba(5,34,62,0.3) 100%),
  linear-gradient(0deg, rgba(5,34,62,0.5), rgba(5,34,62,0.5)),
  url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1920&q=80');
}
.hero-overlay{display:none;}
.hero-pattern{
  position:absolute; inset:0; z-index:1; opacity:0.08; pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,255,255,0.7) 1.5px, transparent 1.5px);
  background-size:28px 28px;
}
.hero-orb{display:none;}
.section-hero-inner{
  position:relative; z-index:2;
  width:100%; max-width:1180px; margin-inline:auto; padding:0 28px 130px;
  display:flex; flex-direction:column; align-items:flex-start;
}
/* عمود النص لا يمتدّ عبر الحاوية كلّها: يبدأ من خطّ المحاذاة اليمنى
   نفسه ويتوقّف عند عرض مقروء، فالعنوان لا يتشظّى إلى أربعة أسطر. */
.section-hero-inner > *{max-width:min(760px, 100%);}
.section-hero .eyebrow{
  color:rgba(255,255,255,0.8); background:none; border:none; padding:0;
  font-size:13.5px; font-weight:700; letter-spacing:normal;
}
.section-hero .eyebrow::before{background:var(--mint);}
.hero-tagline{
  margin-top:0; font-family:'Tajawal', sans-serif; font-size:13.5px; font-weight:700;
  letter-spacing:normal; color:rgba(255,255,255,0.75); height:20px; overflow:hidden; position:relative;
  width:100%; text-align:right;
}
.hero-tagline span{
  display:block; position:absolute; inset:0; width:100%; text-align:right;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.hero-tagline span.active{opacity:1; transform:translateY(0);}
.section-hero h1{
  font-size:clamp(34px, 4.4vw, 64px); font-weight:900; color:#fff; line-height:1.18;
  letter-spacing:normal; margin-top:22px; text-shadow:0 4px 30px rgba(0,0,0,0.3);
  /* يوزّع الكلمات على الأسطر بالتساوي بدل ترك كلمة وحيدة في سطر */
  text-wrap:balance;
}
.section-hero h1 .accent{
  background:linear-gradient(120deg, var(--mint), #fff 60%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-circled{position:relative; display:inline-block; padding:0 8px;}
.hero-circled::after{
  content:''; position:absolute; inset:-8px -16px; border:2.5px solid var(--mint);
  border-radius:50%; transform:rotate(-3deg); pointer-events:none; opacity:.9;
}
.section-hero p{margin-top:24px; font-size:17px; color:rgba(255,255,255,0.85); max-width:560px; margin-left:0; margin-right:0;}
.section-hero .prose{margin-top:20px; color:rgba(255,255,255,0.85); font-size:15.5px; max-width:540px; margin-left:0; margin-right:0;}
.section-hero .hero-cta-row{display:flex; gap:16px; justify-content:flex-start; flex-wrap:wrap; margin-top:36px;}
.section-hero a.btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--teal); color:#fff; padding:17px 34px; border-radius:var(--r-lg);
  font-weight:700; font-size:15px; box-shadow:0 16px 32px -10px rgba(31,120,116,0.7);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, background .2s ease;
}
.section-hero a.btn-primary:hover{transform:translateY(-3px); background:var(--navy-soft);}
.hero-arrows{
  position:absolute; z-index:3; left:5vw; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:14px;
}
.hero-arrows button{
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.08); backdrop-filter:blur(6px); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.hero-arrows button:hover{background:rgba(255,255,255,0.2); border-color:var(--mint);}
.hero-arrows svg{width:18px; height:18px;}
@media (max-width:900px){.hero-arrows{display:none;}}
.section-hero a.btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  border:1.5px solid rgba(255,255,255,0.35); color:#fff; padding:16.5px 30px;
  border-radius:999px; font-weight:700; font-size:15px; background:rgba(255,255,255,0.06);
  backdrop-filter:blur(6px); transition:border-color .2s ease, background .2s ease, transform .25s ease;
}
.section-hero a.btn-ghost:hover{border-color:var(--mint); background:rgba(255,255,255,0.14); transform:translateY(-3px);}
.hero-dots{position:absolute; z-index:2; bottom:32px; left:50%; transform:translateX(-50%); display:flex; gap:8px;}
.hero-dots .dot{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.35); transition:background .3s ease, width .3s ease;}
.hero-dots .dot.active{background:var(--mint); width:24px; border-radius:4px;}
.section-hero img{display:none;}
.hero-scroll-cue{
  position:absolute; z-index:2; bottom:70px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:rgba(255,255,255,0.6); font-size:12px; letter-spacing:normal;
  animation:bobbing 2.2s ease-in-out infinite;
}
.hero-scroll-cue svg{width:16px;height:16px;}
@keyframes bobbing{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

@media (max-width:900px){
  .section-hero h1{font-size:38px;}
  .section-hero{min-height:auto; padding:130px 24px 100px;}
}

/* Section shell + heads shared across content blocks */
.block{max-width:1180px; margin:0 auto; padding:var(--sec-y) 28px;}
.block.tight{padding-top:60px;}
.section-head{max-width:640px; margin:0 auto 38px; text-align:center;}
.section-head h2{font-size:36px; font-weight:900; color:var(--navy); margin-top:14px; line-height:1.4; letter-spacing:normal;}
.section-head p{margin-top:16px; color:#4b5f72; font-size:16.5px;}

/* Rich text section */
.section-richtext{max-width:1180px; margin:0 auto; padding:var(--sec-y) 28px;}
.section-richtext-inner{max-width:760px; margin:0 auto; position:relative; padding-right:28px;}
.section-richtext-inner::before{
  content:''; position:absolute; top:6px; right:0; bottom:6px; width:4px;
  border-radius:4px; background:linear-gradient(180deg, var(--teal), var(--blue));
}
.section-richtext h2{font-size:34px; font-weight:900; color:var(--navy); margin-bottom:16px; letter-spacing:normal;}
.section-richtext .lede{color:#4b5f72; font-size:17px; margin-bottom:20px;}
.section-richtext .prose{color:#33475a; font-size:16.5px;}
.section-richtext .prose p{margin-bottom:16px;}
.section-richtext .prose a.btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(120deg, var(--teal), var(--teal-soft)); color:#fff; padding:15px 32px; border-radius:999px;
  font-weight:700; font-size:15px; margin-top:8px; box-shadow:0 14px 28px -10px rgba(31,120,116,0.5);
  transition:transform .25s ease;
}
.section-richtext .prose a.btn-primary:hover{transform:translateY(-2px);}

/* Video */
.section-video{max-width:1180px; margin:0 auto; padding:var(--sec-y) 28px;}
.section-video h2{font-size:32px; font-weight:900; color:var(--navy); margin-bottom:24px; text-align:center;}
.video-frame{position:relative; padding-bottom:56.25%; height:0; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); max-width:960px; margin:0 auto;}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* Image */
.section-image{max-width:1180px; margin:0 auto; padding:var(--sec-y) 28px;}
.section-image h2{font-size:32px; font-weight:900; color:var(--navy); margin-bottom:24px; text-align:center;}
.section-image img{border-radius:var(--r-xl); box-shadow:var(--shadow-lg); margin:0 auto; max-width:960px;}

/* Stats — floating glass card */
.section-stats-wrap{max-width:1180px; margin:-72px auto 0; padding:0 28px; position:relative; z-index:5;}
.section-stats{
  background:#fff; border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  border:1px solid var(--line);
}
.stats-grid{padding:44px 28px; display:grid; grid-template-columns:repeat(4,1fr);}
.stats-grid .stat-item{text-align:center; position:relative; padding:0 12px;}
.stats-grid .stat-item + .stat-item::before{
  content:''; position:absolute; top:10%; bottom:10%; right:100%; width:1px; background:var(--line);
}
.stats-grid .num{font-family:'Roboto'; font-size:38px; font-weight:700; background:linear-gradient(120deg, var(--teal), var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stats-grid .lab{font-size:13.5px; color:#5c7285; margin-top:6px; font-weight:500;}

/* Cards — government-style photo cards (photo top, caption + chevron below) */
.section-cards{max-width:1180px; margin:0 auto; padding:var(--sec-y) 28px;}
.section-cards .section-head{text-align:right; margin:0 0 12px; max-width:100%;}
.section-cards .section-head p.lede{max-width:820px; margin-top:14px; color:#4b5f72; font-size:16px;}
.cards-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:40px;
  border-top:1px solid var(--line); border-right:1px solid var(--line);
}
.cards-grid .card{position:relative; border-bottom:1px solid var(--line); border-left:1px solid var(--line); padding:24px;}
.cards-grid .card-photo-wrap{aspect-ratio:4/3; overflow:hidden; background:var(--paper-tint); position:relative; border:1px solid var(--line);}
.cards-grid .card-photo{
  width:100%; height:100%; background-size:cover; background-position:center;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.cards-grid .card-photo-wrap::after{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .35s ease;
  background:linear-gradient(135deg, rgba(31,120,116,0.75), rgba(5,34,62,0.55));
  mix-blend-mode:multiply;
}
.cards-grid .card:hover .card-photo-wrap::after{opacity:1;}
.cards-grid .card:hover .card-photo{transform:scale(1.07);}
.cards-grid .card-body{padding-top:16px;}
.cards-grid .card-title-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.cards-grid .card h3{font-family:var(--font-head); font-size:16px; font-weight:700; color:var(--navy);}
.cards-grid .card-chevron{width:18px; height:18px; color:var(--teal); flex-shrink:0; transition:transform .3s ease;}
.cards-grid .card:hover .card-chevron{transform:translateY(3px);}
.cards-grid .card p{font-size:13.5px; color:#5c7285; line-height:1.8; margin-top:8px;}
.cards-grid .card-num{
  position:absolute; top:10px; right:10px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; background:rgba(5,34,62,0.85); backdrop-filter:blur(4px);
  font-family:'Roboto'; font-size:13px; font-weight:700; color:#fff;
}
.cards-grid .card-icon{
  position:absolute; top:12px; left:12px; z-index:2;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.95); color:var(--teal);
}
.cards-grid .card-icon svg{width:19px; height:19px;}

/* Layout variant: feature — first card large (tall), rest smaller alongside */
.cards-grid.layout-feature{grid-template-columns:repeat(6,1fr); grid-auto-rows:1fr;}
.cards-grid.layout-feature .card:first-child{grid-column:span 3; grid-row:span 2;}
.cards-grid.layout-feature .card:first-child .card-photo-wrap{aspect-ratio:3/4;}
.cards-grid.layout-feature .card:not(:first-child){grid-column:span 3;}
@media (min-width:901px){
  .cards-grid.layout-feature .card:nth-child(2){grid-column:4 / span 3;}
  .cards-grid.layout-feature .card:nth-child(3){grid-column:4 / span 3;}
}

/* Layout variant: rows — alternating image/text full-width rows */
.cards-grid.layout-rows{display:flex; flex-direction:column; gap:0;}
.cards-grid.layout-rows .card{
  display:grid; grid-template-columns:320px 1fr; gap:36px; align-items:center;
  padding:34px 0; border-bottom:1px solid var(--line);
}
.cards-grid.layout-rows .card:nth-child(even){grid-template-columns:1fr 320px;}
.cards-grid.layout-rows .card:nth-child(even) .card-photo-wrap{order:2;}
.cards-grid.layout-rows .card-photo-wrap{aspect-ratio:16/10;}
.cards-grid.layout-rows .card-body{padding-top:0;}
.cards-grid.layout-rows .card h3{font-size:19px;}
.cards-grid.layout-rows .card p{font-size:14.5px;}

/* Layout variant: duotone — bold full-bleed color-tinted photo bands (identity moment) */
.cards-grid.layout-duotone{
  grid-template-columns:repeat(3,1fr); gap:0; border:none; min-height:360px;
}
.cards-grid.layout-duotone .card{
  border:none; padding:0; overflow:hidden; position:relative; min-height:360px;
  transition:min-height .3s ease;
}
.cards-grid.layout-duotone .card-photo-wrap{position:absolute; inset:0; border:none; aspect-ratio:auto;}
.cards-grid.layout-duotone .card-photo{filter:grayscale(1) contrast(1.15) brightness(.85);}
.cards-grid.layout-duotone .card-photo-wrap::before{
  content:''; position:absolute; inset:0; z-index:1; mix-blend-mode:color; opacity:.92;
}
.cards-grid.layout-duotone .card-photo-wrap::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(0deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.35) 100%);
}
.cards-grid.layout-duotone .card.duo-navy .card-photo-wrap::before{background:var(--navy);}
.cards-grid.layout-duotone .card.duo-teal .card-photo-wrap::before{background:var(--teal);}
.cards-grid.layout-duotone .card.duo-blue .card-photo-wrap::before{background:var(--blue);}
.cards-grid.layout-duotone .card-num{background:rgba(255,255,255,0.18); backdrop-filter:blur(4px);}
.cards-grid.layout-duotone .card-icon{background:rgba(255,255,255,0.92);}
.cards-grid.layout-duotone .card-body{
  position:absolute; z-index:3; inset-inline:0; bottom:0; padding:28px 26px;
}
.cards-grid.layout-duotone .card h3{
  color:#fff; font-size:19px; font-weight:800; letter-spacing:normal;
}
.cards-grid.layout-duotone .card-chevron{
  color:#fff; opacity:1; width:22px; height:22px;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.cards-grid.layout-duotone .card:hover .card-chevron{transform:translateX(-4px);}
.cards-grid.layout-duotone .card:hover{min-height:390px;}
.cards-grid.layout-duotone .card:hover .card-photo{transform:scale(1.08);}
.cards-grid.layout-duotone .card p{
  color:rgba(255,255,255,0.88); font-size:13.5px; margin-top:8px; max-width:90%;
}
@media (max-width:900px){
  .cards-grid.layout-duotone{grid-template-columns:1fr;}
  .cards-grid.layout-duotone .card, .cards-grid.layout-duotone{min-height:220px;}
}

@media (max-width:900px){
  .cards-grid.layout-feature{grid-template-columns:repeat(2,1fr);}
  .cards-grid.layout-feature .card:first-child{grid-column:span 2; grid-row:span 1;}
  .cards-grid.layout-feature .card:not(:first-child){grid-column:span 1;}
  .cards-grid.layout-rows .card, .cards-grid.layout-rows .card:nth-child(even){grid-template-columns:1fr; gap:16px;}
  .cards-grid.layout-rows .card:nth-child(even) .card-photo-wrap{order:0;}
  .photo-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:110px;}
}

/* Side navigation ruler (formal page-progress indicator) */
.side-nav{
  position:fixed; z-index:40; top:50%; left:14px; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:13px; align-items:flex-start;
  pointer-events:none;
}
.side-nav .tick{
  display:flex; align-items:center; cursor:pointer; background:none; border:none; padding:4px;
  pointer-events:auto;
}
.side-nav .tick .bar{width:10px; height:2px; background:var(--line); transition:width .25s ease, background .25s ease;}
.side-nav .tick .lbl{
  /* visually hidden — accessible label only, never rendered over content per design guidance */
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}
.side-nav .tick:hover .bar{width:16px; background:#9fb0bd;}
.side-nav .tick.active .bar{width:20px; background:var(--teal);}
@media (max-width:1300px){.side-nav{display:none;}}

/* Video + text split section */
.video-text-split{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:center;
  max-width:1180px; margin:0 auto; padding:var(--sec-y) 28px;
}
.video-text-split .video-frame{margin:0; max-width:none;}
.video-text-split .vts-text .eyebrow{margin-bottom:16px;}
.video-text-split .vts-text h2{font-family:var(--font-head); font-size:30px; font-weight:800; color:var(--navy); margin-bottom:16px; line-height:1.4;}
.video-text-split .vts-text p{font-size:15.5px; color:#4b5f72; line-height:1.9; margin-bottom:14px;}
.vts-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px;}
.btn-outline{
  display:inline-flex; align-items:center; gap:9px;
  border:1.5px solid var(--navy); color:var(--navy); padding:13px 26px;
  font-weight:700; font-size:14.5px; transition:background .2s ease, color .2s ease;
}
.btn-outline:hover{background:var(--navy); color:#fff;}
@media (max-width:900px){
  .video-text-split{grid-template-columns:1fr;}
}

/* Infographic stat bars */
.infographic{max-width:1180px; margin:0 auto; padding:20px 28px var(--sec-y);}
.infographic-bars{display:flex; flex-direction:column; gap:22px; margin-top:32px;}
.infographic-bar-row{display:grid; grid-template-columns:200px 1fr 60px; align-items:center; gap:18px;}
.infographic-bar-row .ib-label{font-size:14px; font-weight:700; color:var(--navy);}
.infographic-bar-row .ib-track{height:10px; background:var(--line); position:relative; overflow:hidden;}
.infographic-bar-row .ib-fill{position:absolute; inset:0; width:0; background:linear-gradient(90deg, var(--teal), var(--blue)); transition:width 1.2s cubic-bezier(.16,1,.3,1);}
.infographic-bar-row.in-view .ib-fill{width:var(--pct);}
.infographic-bar-row .ib-pct{font-family:'Roboto'; font-size:14px; font-weight:700; color:var(--teal); text-align:left;}
@media (max-width:700px){
  .infographic-bar-row{grid-template-columns:1fr; gap:6px;}
  .infographic-bar-row .ib-pct{text-align:right;}
}

/* About-intro: overlapping photo collage + checklist + signature stamp */
.about-intro{
  max-width:1180px; margin:0 auto; padding:var(--sec-y) 28px;
  display:grid; grid-template-columns:0.95fr 1.05fr; gap:56px; align-items:center;
}
.about-intro-media{position:relative; min-height:420px;}
.about-intro-media .ai-img{position:absolute; overflow:hidden; box-shadow:var(--shadow-md);}
.about-intro-media .ai-img-1{top:0; right:0; width:68%; height:78%; z-index:1;}
.about-intro-media .ai-img-2{bottom:0; left:0; width:56%; height:46%; z-index:2; border:6px solid var(--paper);}
.about-intro-media .ai-img img{width:100%; height:100%; object-fit:cover; filter:grayscale(.15);}
.about-intro-callout{
  position:absolute; top:38%; left:0; z-index:3; width:56%;
  background:var(--teal); color:#fff; padding:22px 20px; display:flex; align-items:center; gap:14px;
  box-shadow:0 16px 34px -14px rgba(31,120,116,0.55);
}
.about-intro-callout .aic-icon{
  width:42px; height:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.15);
}
.about-intro-callout .aic-icon svg{width:22px; height:22px;}
.about-intro-callout span{font-weight:800; font-size:15px; line-height:1.4; font-family:var(--font-head);}
.about-intro-text .eyebrow{margin-bottom:16px;}
.about-intro-text h2{font-family:var(--font-head); font-size:32px; font-weight:900; color:var(--navy); line-height:1.4; margin-bottom:16px;}
.about-intro-text > p{font-size:15.5px; color:#4b5f72; margin-bottom:22px; line-height:1.9;}
.about-checklist{list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:28px;}
.about-checklist li{display:flex; align-items:center; gap:12px; font-weight:700; color:var(--navy); font-size:14.5px;}
.about-checklist .ck{
  width:20px; height:20px; border-radius:50%; background:var(--teal); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.about-checklist .ck svg{width:11px; height:11px; color:#fff;}
.about-intro-foot{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  border-top:2px solid var(--teal); padding-top:22px; flex-wrap:wrap;
}
.about-intro-foot .sig-name{font-family:var(--font-head); font-size:22px; color:var(--navy); font-weight:700;}
.about-intro-foot .sig-role{font-size:13px; color:#8394a3; margin-top:4px;}
.about-badge{
  width:92px; height:92px; border-radius:50%; border:1.5px dashed var(--teal);
  display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0;
}
.about-badge svg{width:34px; height:34px; color:var(--teal);}
@media (max-width:900px){
  .about-intro{grid-template-columns:1fr;}
  .about-intro-media{min-height:340px; margin-bottom:20px;}
}

/* ============================================================
   قسم التعريف (afx) — نسخة مُعاد تصميمها
   الفكرة: بدل قائمة تحقّق مسطّحة وشريط تقدّم رفيع تحت النص، صار
   المؤشر قرصاً دائرياً يطفو على مجموعة الصور، وصارت النقاط صفوفاً
   مرقّمة ذات حدود شعرية تتفاعل بالمرور. تخطيط الصور شبكي لا مطلق،
   فيتناسب ذاتياً مع أي عرض بلا أرقام سحرية.
   ============================================================ */
.afx{max-width:1180px; margin:0 auto; padding:var(--sec-y) 28px;}
.afx-inner{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,72px); align-items:center;
}

/* ---- عمود النص ---- */
.afx-body .eyebrow{margin-bottom:18px;}
.afx-body h2{
  font-family:var(--font-head); color:var(--navy);
  font-size:clamp(26px,3.1vw,38px); font-weight:800; line-height:1.26;
  letter-spacing:-.2px; text-wrap:balance;
}
.afx-lede{
  font-size:15.5px; line-height:1.72; color:#4b5f72;
  margin-top:16px; max-width:52ch;
}
.afx-lede p{margin:0;}

/* ---- النقاط المرقّمة ---- */
.afx-points{list-style:none; margin:30px 0 0; counter-reset:afx;}
.afx-points li{
  position:relative; display:flex; align-items:center; gap:16px;
  padding:16px 0; border-top:1px solid var(--line);
  /* ظهور متتابع: كل صف يتأخر عن سابقه فيقرأ كتسلسل لا كقفزة واحدة */
  opacity:0; transform:translateY(10px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i, 0) * 90ms + 120ms);
}
.afx-points li:last-child{border-bottom:1px solid var(--line);}
[data-reveal].in-view .afx-points li{opacity:1; transform:none;}
/* الشريط الذي ينمو من حافة الصف عند المرور */
.afx-points li::before{
  content:''; position:absolute; inset-inline-start:-14px; top:50%;
  width:3px; height:0; background:var(--teal); transform:translateY(-50%);
  transition:height .35s cubic-bezier(.16,1,.3,1);
}
.afx-points li:hover::before{height:70%;}
.afx-num{
  font-family:var(--font-head); font-size:12.5px; font-weight:700;
  color:var(--teal); background:var(--mint-pale);
  min-width:34px; height:26px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .25s ease, color .25s ease;
}
.afx-points li:hover .afx-num{background:var(--teal); color:#fff;}
.afx-point-label{
  flex:1; font-weight:700; font-size:14.5px; color:var(--navy); line-height:1.45;
}
.afx-point-arrow{
  width:16px; height:16px; color:var(--teal); flex-shrink:0;
  opacity:0; transform:translateX(6px);
  transition:opacity .25s ease, transform .25s ease;
}
.afx-points li:hover .afx-point-arrow{opacity:1; transform:none;}

/* ---- مجموعة الصور ---- */
.afx-media{
  position:relative;
  display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(12,1fr);
  aspect-ratio:1 / 1.04;
}
.afx-tint{
  grid-area:3 / 8 / 12 / 13; z-index:0;
  background:repeating-linear-gradient(135deg, rgba(31,120,116,.16) 0 2px, transparent 2px 9px);
  border:1px solid rgba(31,120,116,.16);
}
.afx-shot{
  position:relative; overflow:hidden; background:var(--paper-tint);
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1);
}
.afx-shot img{width:100%; height:100%; object-fit:cover;}
.afx-shot-a{grid-area:1 / 1 / 10 / 9; z-index:2; box-shadow:var(--shadow-md);}
.afx-shot-b{
  grid-area:7 / 6 / 13 / 13; z-index:3;
  border:7px solid var(--paper); box-shadow:var(--shadow-lg);
}

/* ---- تأثيرات فوق الصور ----
   ثلاث طبقات: كشف بالمسح عند الدخول، ولمعة تعبر الصورة، وارتفاع عند
   المرور. كلها على clip-path/transform/opacity وحدها — خصائص يحرّكها
   المتصفح على المُركِّب دون إعادة تخطيط، فلا تكلفة على الأداء. */
@media (prefers-reduced-motion: no-preference){
  /* 1) الكشف: الصورة الكبرى تُمسح من اليمين (اتجاه القراءة)،
        والصغرى من الأسفل، بفارق زمني بينهما فيقرآن كحركتين لا واحدة */
  .afx-shot-a{clip-path:inset(0 0 0 100%);}
  .afx-shot-b{clip-path:inset(100% 0 0 0);}
  .afx-shot{transition:clip-path 1.15s cubic-bezier(.16,1,.3,1),
                       transform .5s cubic-bezier(.16,1,.3,1),
                       box-shadow .5s cubic-bezier(.16,1,.3,1);}
  .afx-shot-b{transition-delay:.22s, 0s, 0s;}
  [data-reveal].in-view .afx-shot-a,
  [data-reveal].in-view .afx-shot-b{clip-path:inset(0 0 0 0);}

  /* 2) اللمعة: شريط ضوئي مائل يعبر الصورة.
        لمعة الدخول ولمعة المرور على عنصرين زائفين منفصلين عمداً؛ لو
        تشاركا عنصراً واحداً لأعاد تبديل قيمة animation تشغيل لمعة
        الدخول عند خروج المؤشر، فيومض السطح مرتين بلا سبب. */
  .afx-shot::before,
  .afx-shot::after{
    content:''; position:absolute; inset:-30% -60%;
    background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.42) 50%, transparent 58%);
    transform:translateX(-120%); pointer-events:none; z-index:2;
  }
  [data-reveal].in-view .afx-shot-a::after{animation:afx-sheen 1.5s cubic-bezier(.3,0,.2,1) 1.05s 1;}
  [data-reveal].in-view .afx-shot-b::after{animation:afx-sheen 1.5s cubic-bezier(.3,0,.2,1) 1.3s 1;}
  .afx-shot:hover::before{animation:afx-sheen 1.1s cubic-bezier(.3,0,.2,1) 1;}
  @keyframes afx-sheen{from{transform:translateX(-120%);} to{transform:translateX(120%);}}

  /* 3) الارتفاع عند المرور — على الصورة التي يقف عليها المؤشر وحدها */
  .afx-shot:hover{transform:translateY(-7px); box-shadow:var(--shadow-lg);}

  /* 4) هالة حول قرص المؤشر تلفت النظر إلى الرقم دون ضجيج */
  .afx-gauge::before{
    content:''; position:absolute; inset:0; border-radius:50%;
    border:1.5px solid var(--teal); opacity:0; pointer-events:none;
  }
  [data-reveal].in-view .afx-gauge::before{animation:afx-halo 3.4s ease-out 2s infinite;}
  @keyframes afx-halo{
    0%{transform:scale(1); opacity:.5;}
    70%{transform:scale(1.28); opacity:0;}
    100%{transform:scale(1.28); opacity:0;}
  }
}

/* ---- قرص المؤشر ---- */
.afx-gauge{
  /* يتوسّط الحافة السفلى للصورة الكبرى فينصفه الحدّ: نصفه فوق الصورة
     ونصفه على البياض. لو جلس تحتها بالكامل بدا عائماً بلا رابط. */
  grid-area:8 / 1 / 12 / 6; z-index:4; place-self:center start;
  position:relative; width:clamp(118px,11vw,142px); aspect-ratio:1;
  border-radius:50%; background:#fff; box-shadow:var(--shadow-md);
  display:grid; place-items:center; text-align:center;
}
.afx-dial{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg);}
.afx-dial circle{fill:none; stroke-width:5;}
.afx-dial-bg{stroke:var(--line);}
.afx-dial-fg{
  stroke:var(--teal); stroke-linecap:round;
  /* 2πr = 276.46 عند r=44 — الخط كله مقطع واحد نُزيحه بمقدار المتبقي */
  stroke-dasharray:276.46;
  stroke-dashoffset:276.46;
  transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1) .2s;
}
[data-reveal].in-view .afx-dial-fg{
  stroke-dashoffset:calc(276.46 - 276.46 * var(--pct) / 100);
}
.afx-gauge-txt{padding:0 14px;}
.afx-gauge-txt strong{
  display:block; font-family:var(--font-head); font-weight:800;
  font-size:clamp(20px,2.2vw,26px); color:var(--navy); line-height:1.1;
}
.afx-gauge-txt span{
  display:block; margin-top:4px; font-size:10.5px; line-height:1.45; color:#8394a3;
}

/* ---- تأثير العمق أثناء التمرير ----
   يُبنى على animation-timeline المدعومة أصلاً في المتصفح، فلا مستمع
   scroll ولا حسابات في JS. المتصفحات التي لا تدعمها تعرض القسم ساكناً
   وهو تدهور مقبول تماماً. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .afx-shot-a img{
      animation:afx-pan linear both;
      animation-timeline:view(); animation-range:entry 0% exit 100%;
    }
    @keyframes afx-pan{from{transform:scale(1.08) translateY(-2.5%);} to{transform:scale(1.08) translateY(2.5%);}}
    .afx-shot-b{
      animation:afx-drift linear both;
      animation-timeline:view(); animation-range:entry 0% exit 100%;
    }
    @keyframes afx-drift{from{translate:0 16px;} to{translate:0 -16px;}}
  }
}

@media (max-width:900px){
  .afx-inner{grid-template-columns:1fr; gap:44px;}
  .afx-media{aspect-ratio:1 / 1.05; margin-top:8px;}
  .afx-gauge{width:clamp(104px,26vw,128px);}
}
@media (max-width:520px){
  .afx-gauge-txt span{font-size:9.5px;}
}

/* Icon stats strip — 4 items with circular icon + big value + label */
.icon-stats-wrap{background:var(--paper-tint); padding:0 28px 60px;}
.icon-stats{
  max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.is-item{background:#fff; padding:34px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px;}
.is-icon{
  width:50px; height:50px; border-radius:50%; background:var(--mint-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
}
.is-icon svg{width:22px; height:22px;}
.is-value{font-family:var(--font-head); font-size:27px; font-weight:900; color:var(--navy);}
.is-label{font-size:13px; color:#7d8e9d;}
@media (max-width:700px){.icon-stats{grid-template-columns:repeat(2,1fr);}}

/* Service stats variant — square outlined red icon box */
.service-stats-wrap{background:#fff; padding-top:20px;}
.service-stats{background:transparent; border:none; gap:0;}
.service-stats .is-item{border-right:1px solid var(--line); background:transparent;}
.service-stats .is-item:last-child{border-right:none;}
.is-icon-square{
  width:64px; height:64px; border-radius:6px; background:#fff; color:var(--teal);
  border:1.5px solid var(--line);
}
.is-icon-square svg{width:26px; height:26px;}
@media (max-width:700px){
  .service-stats .is-item:nth-child(2n){border-right:none;}
}

/* Service cards section — heading + CTA + photo cards w/ static red icon badge */
.service-cards-section{padding:var(--sec-y) 28px; max-width:1180px; margin:0 auto;}
.scs-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:36px;}
.scs-cta{
  flex:0 0 auto; background:var(--paper-tint); color:var(--navy); font-weight:700; font-size:14px;
  padding:14px 26px; border-radius:2px; transition:background .25s ease, color .25s ease;
}
.scs-cta:hover{background:var(--navy); color:#fff;}
.scs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.scs-card{position:relative;}
.scs-photo{position:relative; aspect-ratio:4/3; overflow:hidden;}
.scs-photo img{width:100%; height:100%; object-fit:cover;}
.scs-badge{
  position:absolute; bottom:-1px; left:-1px; width:56px; height:56px; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.scs-badge svg{width:24px; height:24px;}
.scs-label{
  background:#fff; box-shadow:0 6px 18px rgba(10,25,60,.08); margin:0 24px; margin-top:-1px; position:relative; z-index:1;
  padding:18px 20px; font-family:var(--font-head); font-weight:800; font-size:16px; color:var(--navy);
}
@media (max-width:900px){.scs-grid{grid-template-columns:1fr;}}

/* Services split — navy panel with 2-col arrow links + full-height photo */
.services-split{display:grid; grid-template-columns:1fr 1fr;}
.ss-panel{background:var(--navy); color:#fff; padding:70px 60px; display:flex; flex-direction:column; justify-content:center;}
.ss-panel .eyebrow{color:var(--teal);}
.ss-panel h2{color:#fff; margin-bottom:0;}
.ss-rule{width:100%; height:3px; background:var(--teal); margin:30px 0;}
.ss-links{display:grid; grid-template-columns:1fr 1fr; gap:0 30px;}
.ss-col a{
  display:flex; align-items:center; justify-content:space-between; gap:10px; color:#fff; opacity:.9;
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:15px; transition:opacity .2s ease, color .2s ease;
}
.ss-col a:hover{opacity:1; color:var(--teal);}
.ss-col a svg{width:16px; height:16px; flex:0 0 auto;}
.ss-media{position:relative; min-height:420px;}
.ss-media img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.ss-arrow{position:absolute; top:24px; left:24px; width:90px; height:70px; z-index:1;}
@media (max-width:900px){
  .services-split{grid-template-columns:1fr;}
  .ss-panel{padding:50px 24px;}
  .ss-links{grid-template-columns:1fr;}
  .ss-media{min-height:280px;}
}

/* Hover-reveal photo cards — white bar slides up over the photo on hover */
.hover-cards-grid{
  max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
}
.hover-card{position:relative;}
.hc-clip{position:relative; overflow:hidden; aspect-ratio:4/3.7; background:var(--paper-tint);}
.hc-photo{position:absolute; inset:0;}
.hc-photo img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1);}
.hover-card:hover .hc-photo img{transform:scale(1.08);}
.hc-bar{
  position:absolute; z-index:2; left:0; right:0; bottom:0; background:#fff;
  padding:38px 22px 26px; box-shadow:0 -10px 26px -14px rgba(5,34,62,0.2);
  transform:translateY(calc(100% - 84px)); transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.hover-card:hover .hc-bar{transform:translateY(0); transition-duration:.6s;}
.hc-icon{
  position:absolute; top:-38px; right:20px; width:54px; height:54px; z-index:3;
  background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px -8px rgba(31,120,116,0.6); flex-shrink:0;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.hover-card:hover .hc-icon{transform:translateY(-4px);}
.hc-icon svg{width:24px; height:24px;}
.hc-title{font-family:var(--font-head); font-size:16px; font-weight:800; color:var(--navy); line-height:1.4;}
.hc-desc{margin-top:13px; font-size:13.5px; color:#5b6b7a; line-height:1.85;}
.hc-cta{
  margin-top:20px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--paper-tint); padding:13px 16px; font-weight:700; font-size:13px; color:var(--navy);
}
.hc-cta svg{width:15px; height:15px; color:var(--teal); flex-shrink:0;}
@media (max-width:1000px){.hover-cards-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.hover-cards-grid{grid-template-columns:1fr;}}

/* Events + documents split section */
.events-docs{
  max-width:1180px; margin:0 auto; padding:var(--sec-y) 28px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:stretch;
}
.ed-docs{order:1;}
.ed-events{order:2;}
.ed-events .eyebrow{margin-bottom:16px;}
.ed-events h2{font-family:var(--font-head); font-size:30px; font-weight:900; color:var(--navy); line-height:1.5; margin-bottom:34px;}
.ed-event-list{display:flex; flex-direction:column; gap:22px;}
.ed-event-card{display:flex; background:#fff; box-shadow:var(--shadow-sm); border:1px solid var(--line);}
.ed-event-photo{position:relative; width:160px; flex-shrink:0; aspect-ratio:1/1; overflow:hidden;}
.ed-event-photo img{width:100%; height:100%; object-fit:cover;}
.ed-date-badge{
  position:absolute; top:0; right:0; background:var(--teal); color:#fff; padding:8px 12px; text-align:center;
  font-family:var(--font-head); font-weight:800; font-size:12.5px; line-height:1.4;
}
.ed-event-body{padding:20px 20px; display:flex; flex-direction:column; justify-content:center; gap:10px;}
.ed-event-meta{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--teal); font-weight:700;}
.ed-event-meta svg{width:14px; height:14px;}
.ed-event-body h3{font-family:var(--font-head); font-size:16px; font-weight:800; color:var(--navy); line-height:1.5;}
.ed-docs{
  position:relative; background:var(--navy); padding:44px 30px; overflow:hidden;
}
.ed-docs-accent{
  position:absolute; top:0; left:0; width:150px; height:150px; background:var(--teal);
  clip-path:polygon(0 0, 100% 0, 0 100%);
}
.ed-docs-icon{
  position:relative; z-index:2; width:60px; height:60px; border-radius:50%; background:#fff; color:var(--teal);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px; box-shadow:var(--shadow-md);
}
.ed-docs-icon svg{width:26px; height:26px;}
.ed-docs-title{position:relative; z-index:2; font-family:var(--font-head); color:#fff; font-size:23px; font-weight:800; line-height:1.5; margin-bottom:18px;}
.ed-doc-list{position:relative; z-index:2;}
.ed-doc-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.12);
}
.ed-doc-date{font-size:12px; color:rgba(255,255,255,0.55); margin-bottom:5px;}
.ed-doc-title-row{font-family:var(--font-head); color:#fff; font-weight:700; font-size:14.5px;}
.ed-doc-eye{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,0.25); color:var(--mint);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ed-doc-eye svg{width:15px; height:15px;}
@media (max-width:900px){
  .events-docs{grid-template-columns:1fr;}
}
@media (max-width:500px){
  .ed-event-card{flex-direction:column;}
  .ed-event-photo{width:100%; aspect-ratio:16/9;}
}

/* Newsletter subscribe bar */
.newsletter-bar{
  max-width:1180px; margin:0 auto; padding:0 28px var(--sec-y); display:flex; align-items:center; gap:28px;
  background:var(--teal); padding:36px 48px; flex-wrap:wrap;
}
.nl-icon{
  width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,0.15); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.nl-icon svg{width:26px; height:26px;}
.nl-text{flex:1; min-width:220px;}
.nl-text h3{font-family:var(--font-head); color:#fff; font-size:20px; font-weight:800;}
.nl-text p{color:rgba(255,255,255,0.85); font-size:13.5px; margin-top:4px;}
.nl-form{display:flex; min-width:320px; flex:1; max-width:440px;}
.nl-form input{flex:1; min-width:0; border:none; padding:15px 18px; font-family:'Tajawal'; font-size:14px; color:var(--navy);}
.nl-form button{border:none; background:var(--navy); color:#fff; padding:15px 26px; font-weight:700; font-size:14px; cursor:pointer; flex-shrink:0; transition:background .2s ease;}
.nl-form button:hover{background:var(--navy-soft);}
@media (max-width:700px){
  .newsletter-bar{padding:32px 24px; flex-direction:column; align-items:flex-start;}
  .nl-form{min-width:100%; max-width:100%;}
}

/* Blog article cards */
.blog-cards-grid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
.blog-card{background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); overflow:hidden;}
.bc-photo{position:relative; aspect-ratio:4/3; overflow:hidden;}
.bc-photo img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1);}
.blog-card:hover .bc-photo img{transform:scale(1.06);}
.bc-date-badge{
  position:absolute; top:16px; right:16px; background:var(--teal); color:#fff; padding:8px 12px; text-align:center;
  font-family:var(--font-head); font-weight:800; font-size:12.5px;
}
.bc-body{padding:22px;}
.bc-author{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.bc-avatar{width:28px; height:28px; border-radius:50%; background:var(--mint-pale); color:var(--teal); display:flex; align-items:center; justify-content:center;}
.bc-avatar svg{width:14px; height:14px;}
.bc-author span{font-size:12.5px; color:#8394a3; font-weight:600;}
.bc-body h3{font-family:var(--font-head); font-size:16.5px; font-weight:800; color:var(--navy); line-height:1.6; margin-bottom:18px;}
.bc-btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--paper-tint); padding:12px 18px;
  font-weight:700; font-size:13px; color:var(--navy); transition:background .2s ease, gap .2s ease;
}
.bc-btn svg{width:15px; height:15px; color:var(--teal);}
.bc-btn:hover{background:var(--mint-pale); gap:12px;}
@media (max-width:1000px){.blog-cards-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.blog-cards-grid{grid-template-columns:1fr;}}

/* Video banner + services links panel (gov/campaign "explore services" block) */
.video-links{position:relative;}
.vl-banner{
  position:relative; min-height:380px; display:flex; flex-direction:column; justify-content:center;
  padding:60px 8vw 100px; overflow:hidden;
}
.vl-banner-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.12);}
.vl-banner-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(5,34,62,0.72) 0%, rgba(5,34,62,0.55) 60%, rgba(5,34,62,0.4) 100%);
}
.vl-play{
  position:relative; z-index:2; width:56px; height:56px; border-radius:50%; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:24px; border:none; cursor:pointer;
  box-shadow:0 16px 34px -10px rgba(31,120,116,0.65); transition:transform .25s ease, background .2s ease;
}
.vl-play:hover{transform:scale(1.08); background:var(--navy-soft);}
.vl-play svg{width:20px; height:20px;}
.vl-banner-title{
  position:relative; z-index:2; color:#fff; font-family:var(--font-head); font-size:28px; font-weight:800;
  line-height:1.6; max-width:640px; text-shadow:0 4px 24px rgba(0,0,0,.3);
}
.vl-panel{position:relative; background:var(--navy); padding:0 8vw 60px;}
.vl-media-row{
  position:relative; display:flex; justify-content:flex-start;
  margin-top:-33px; z-index:4;
}
.vl-tag{
  position:relative; z-index:3; width:fit-content; height:fit-content;
  background:#fff; box-shadow:var(--shadow-md);
}
.vl-tag span{display:block; padding:17px 24px; font-weight:800; font-family:var(--font-head); font-size:14.5px; color:var(--navy); white-space:nowrap;}
.vl-tag::after{
  content:''; position:absolute; bottom:-9px; left:24px; width:16px; height:16px; background:#fff;
  transform:rotate(45deg);
}
.vl-links{
  display:grid; grid-template-columns:1fr 1fr; gap:0 48px; margin-top:40px; padding-top:10px;
}
.vl-link{
  display:flex; align-items:center; justify-content:space-between; gap:10px; color:#fff;
  padding:15px 0; border-bottom:1px solid rgba(255,255,255,0.15); font-weight:700; font-size:14.5px;
  transition:color .2s ease, padding-inline-start .2s ease;
}
.vl-link svg{width:14px; height:14px; color:var(--mint); flex-shrink:0;}
.vl-link:hover{color:var(--mint); padding-inline-start:8px;}
@media (max-width:700px){
  .vl-links{grid-template-columns:1fr;}
  .vl-banner-title{font-size:23px;}
}

/* Team grid — general assembly / board members */
.team-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:40px;
}
.team-card{
  position:relative; padding:0 26px; text-align:center;
}
.team-card::before, .team-card::after{
  content:""; position:absolute; top:6px; bottom:40px; width:1px;
  background:repeating-linear-gradient(to bottom, var(--teal) 0 6px, transparent 6px 12px);
}
.team-card::before{right:0;}
.team-card::after{left:0;}
.team-card:last-child::before{display:none;}
.team-card:first-child::after{display:none;}
.team-card .tc-photo{
  aspect-ratio:3/3.4; overflow:hidden; margin-bottom:20px; position:relative;
  background-color:#eef2fb;
  background-image:
    radial-gradient(currentColor 1px, transparent 1.4px),
    radial-gradient(currentColor 1px, transparent 1.4px);
  background-size:26px 26px, 26px 26px;
  background-position:0 0, 13px 13px;
  color:#d7e0f5;
}
.team-card .tc-photo img{width:100%; height:100%; object-fit:cover; object-position:top center; position:relative; z-index:1;}
.team-card .tc-role{font-size:13px; color:#8b93a7; font-weight:600; margin-bottom:6px;}
.team-card .tc-name-row{display:flex; flex-direction:column; align-items:center; gap:14px;}
.team-card .tc-name{font-family:var(--font-head); font-size:19px; font-weight:800; color:var(--navy);}
.team-card .tc-socials{display:flex; align-items:center; justify-content:center; gap:10px;}
.team-card .tc-social{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--navy);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.team-card .tc-social svg{width:14px; height:14px;}
.team-card a.tc-social:hover{background:var(--teal); border-color:var(--teal); color:#fff;}
@media (max-width:900px){
  .team-grid{grid-template-columns:repeat(2,1fr); row-gap:40px;}
  .team-card:nth-child(2n)::before{display:none;}
}
@media (max-width:560px){
  .team-grid{grid-template-columns:1fr; row-gap:40px;}
  .team-card::before, .team-card::after{display:none;}
}

/* Department / pillars strip — dark banner + icon-cards straddling the navy/white seam */
.dept-strip-wrap{background:var(--navy); position:relative; padding:26px 32px 70px; text-align:center;}
.dept-strip-head{
  max-width:1180px; margin:0 auto 44px; color:rgba(255,255,255,0.75); font-size:14.5px;
}
.dept-strip-head span{margin-left:8px;}
.dept-strip-head a{color:var(--mint); font-weight:700; text-decoration:underline; text-underline-offset:3px;}
.dept-strip-head .dept-strip-title{color:var(--mint); font-weight:700;}
.dept-strip{
  max-width:1180px; width:100%; padding:0 32px;
  position:absolute; left:50%; bottom:-70px; transform:translateX(-50%); z-index:5;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
/* ---- بطاقات الأقسام ----
   كانت خلفية البطاقة تنقلب من الأبيض إلى الكحلي عبر انتقال background،
   فيتبدّل كل شيء في اللحظة نفسها ويُقرأ كوميض لا كحركة. استبدلناه
   بموجة لونية ترتفع من قاعدة البطاقة (scaleY على عنصر زائف)، وألوان
   المحتوى تتبعها بتأخير يسير فتصل معها لا قبلها. */
.dept-item{
  position:relative; isolation:isolate; overflow:hidden;
  background:#fff; padding:28px 22px 26px; display:flex; flex-direction:column; gap:18px;
  border:1px solid var(--line); box-shadow:0 20px 40px -22px rgba(5,34,62,0.25);
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1), border-color .45s ease;
}
/* الموجة الكحلية */
.dept-item::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(165deg, #0a3457, var(--navy));
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
/* شريط تركوازي ينمو من حافة البطاقة الابتدائية (اليمين في RTL) */
.dept-item::after{
  content:''; position:absolute; top:0; inset-inline:0; height:3px;
  background:linear-gradient(90deg, var(--teal), var(--teal-soft));
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.dept-item:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 52px -20px rgba(5,34,62,.45);
  border-color:transparent;
}
.dept-item:hover::before{transform:scaleY(1);}
.dept-item:hover::after{transform:scaleX(1);}

.dept-item .di-top{display:flex; align-items:flex-start; justify-content:space-between;}
.dept-item .di-icon{
  width:48px; height:48px; border-radius:50%; background:var(--mint-pale);
  display:flex; align-items:center; justify-content:center; color:var(--teal);
  box-shadow:0 0 0 0 rgba(31,120,116,.18);
  transition:background .4s ease .06s, color .4s ease .06s, box-shadow .5s cubic-bezier(.16,1,.3,1) .06s;
}
.dept-item:hover .di-icon{
  background:var(--teal); color:#fff;
  box-shadow:0 0 0 7px rgba(255,255,255,.09);
}
.dept-item .di-icon svg{width:22px; height:22px;}
/* الرقم رقمٌ لا صندوق: أنظف وأكثر تحريرية، ويبقى مقروءاً فوق الموجة */
.dept-item .di-num{
  font-family:'Roboto',sans-serif; font-size:23px; font-weight:800; line-height:1;
  color:#dfe6ec; letter-spacing:.5px; height:fit-content;
  transition:color .4s ease .06s;
}
.dept-item:hover .di-num{color:rgba(255,255,255,.34);}
.dept-item .di-title{
  font-family:var(--font-head); font-size:15px; font-weight:800; color:var(--navy);
  line-height:1.5; transition:color .4s ease .06s;
}
.dept-item:hover .di-title{color:#fff;}

/* دخول متتابع: بطاقة تلو الأخرى بدل ظهور الأربع دفعة واحدة.
   نستخدم keyframes لا transition، ونحرّك خاصية translate لا transform:
   لو تشاركا transform لغلب ملء الحركة (forwards) قيمةَ المرور فتجمّدت
   البطاقة، ولو أُضيف تأخير التتابع إلى انتقال المرور لعادت البطاقة
   متلكّئة بعد ابتعاد المؤشر. الفصل يحفظ الحركتين نقيّتين. */
@media (prefers-reduced-motion: no-preference){
  /* لا نُخفي البطاقة بـopacity:0 ثابتة — لو لم يُضَف in-view لأي سبب
     لبقيت مخفية للأبد. نكتفي بـanimation-fill-mode:both فيُطبَّق وضع
     البداية أثناء التأخير فقط، وتبقى البطاقة مرئية افتراضياً. */
  [data-reveal].in-view .dept-item{
    animation:dept-in .75s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--i, 0) * 110ms);
  }
  @keyframes dept-in{
    from{opacity:0; translate:0 24px;}
    to{opacity:1; translate:0 0;}
  }
}
.dept-strip-wrap + *{padding-top:110px;}
@media (max-width:1000px){
  .dept-strip{grid-template-columns:repeat(2,1fr); row-gap:20px; position:static; transform:none; margin:36px auto 0;}
  .dept-strip-wrap{padding-bottom:26px;}
  .dept-strip-wrap + *{padding-top:40px;}
}
@media (max-width:640px){
  /* الحاوية والشريط كلاهما يحمل حشوة 32px، فتضيع 128px من عرض
     الشاشة الصغيرة وتنكمش البطاقة إلى 114px. نُلغي حشوة الشريط
     ونكتفي بحشوة الحاوية. */
  .dept-strip{grid-template-columns:repeat(2,1fr); padding-inline:0; gap:14px;}
  .dept-item{padding:22px 16px 20px; gap:14px;}
  .dept-item .di-num{font-size:20px;}
  .dept-item .di-icon{width:42px; height:42px;}
  .dept-item .di-icon svg{width:20px; height:20px;}
  .dept-item .di-title{font-size:14px;}
}

/* Organizational chart */
.org-chart{max-width:940px; margin:0 auto;}
.org-tier{
  width:100%; background:var(--teal); color:#fff; text-align:center; font-weight:800;
  font-family:var(--font-head); padding:15px; margin-bottom:10px; font-size:15.5px;
  box-shadow:0 8px 20px -10px rgba(31,120,116,0.5);
}
.org-tier.exec{background:linear-gradient(120deg,#C98A4B,#D9A164); box-shadow:0 8px 20px -10px rgba(201,138,75,0.5);}
.org-split-2{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:10px;}
.org-split-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:10px;}
.org-box-outline{
  border:1.5px solid var(--teal); color:var(--navy); text-align:center; font-weight:700;
  padding:13px 10px; background:#fff; font-size:14.5px;
}
.org-dept{
  background:#F3DEC4; color:var(--navy); text-align:center; font-weight:800;
  font-family:var(--font-head); padding:12px 10px; font-size:14.5px;
}
.org-units{display:flex; flex-direction:column; gap:8px;}
.org-unit{
  border:1px solid var(--line); background:#fff; text-align:center; padding:11px 10px;
  font-size:13.5px; color:#33475a;
}
@media (max-width:700px){
  .org-split-2, .org-split-3{grid-template-columns:1fr;}
}

/* File download */
.section-file{max-width:760px; margin:0 auto; padding:var(--sec-y) 28px; text-align:center;}
.file-card{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:40px 28px; background:#fff; box-shadow:var(--shadow-sm);
}
.file-card h3{font-size:19px; font-weight:800; color:var(--navy); margin-bottom:20px;}
.btn-download{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(120deg, var(--teal), var(--teal-soft)); color:#fff; padding:15px 32px; border-radius:999px;
  font-weight:700; font-size:15px; box-shadow:0 14px 28px -10px rgba(31,120,116,0.5);
  transition:transform .25s ease;
}
.btn-download:hover{transform:translateY(-2px);}

/* ===== شريط الاشتراك — الفاصل بين آخر قسم والفوتر =====
   يقع بين كتلتين داكنتين (قسم الصفحة الأخير ثم الفوتر)، فجُعل أفتحهما
   درجةً ليقرأ كشريط مقصود لا كفجوة. سابقاً كان مكانه هامشاً أبيض
   بمقدار 60px يقطع التدرّج اللوني قطعاً حاداً. */
.subscribe-band{
  position:relative; overflow:hidden;
  background:linear-gradient(115deg, #0F5F5A 0%, #1F7874 55%, #24837D 100%);
  padding:46px 28px;
}
/* حلقات ضوئية خافتة تكسر مسطّح اللون الواحد دون صورة أو طلب إضافي */
.subscribe-band::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 8% 50%, rgba(255,255,255,.075) 0 34%, transparent 35%),
    radial-gradient(circle at 8% 50%, rgba(255,255,255,.05) 0 52%, transparent 53%),
    radial-gradient(circle at 8% 50%, rgba(255,255,255,.035) 0 72%, transparent 73%);
}
.sb-inner{
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:36px; flex-wrap:wrap;
}
.sb-text{max-width:560px;}
.sb-eyebrow{
  display:inline-block; font-family:var(--font-head);
  font-size:11.5px; font-weight:700; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);
  padding:5px 14px; border-radius:999px;
}
.subscribe-band h3{
  font-family:var(--font-head); color:#fff;
  font-size:clamp(18px,2vw,24px); font-weight:700; line-height:1.6; margin-top:12px;
}
.subscribe-band p{font-size:13.5px; line-height:1.9; color:rgba(255,255,255,.82); margin-top:6px;}
.sb-form{
  display:flex; flex:0 1 430px; min-width:min(100%,300px);
  box-shadow:0 18px 38px -20px rgba(0,0,0,.55);
}
.sb-form input{
  flex:1; min-width:0; border:none; padding:15px 18px;
  font-family:'Tajawal'; font-size:14px; background:#fff; color:var(--navy);
}
.sb-form input:focus{outline:2px solid var(--mint); outline-offset:2px;}
.sb-form button{
  border:none; background:var(--navy); color:#fff; padding:15px 28px;
  font-family:'Tajawal'; font-weight:700; font-size:14px; cursor:pointer;
  flex-shrink:0; transition:background .2s ease;
}
.sb-form button:hover{background:var(--navy-soft);}
@media (max-width:760px){
  .subscribe-band{padding:34px 20px;}
  .sb-inner{flex-direction:column; align-items:stretch; gap:22px;}
  .sb-form{flex:1 1 auto;}
}

/* Footer — formal government-style multi-column */
footer.site-footer{
  background:var(--navy);
  color:#c7d5e2; padding:0 28px; position:relative;
  /* لا هامش علوي ولا حد: شريط الاشتراك أعلاه هو الفاصل الآن */
}
.footer-top{
  max-width:1180px; margin:0 auto; padding:26px 28px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.brand-logo-footer{height:52px; width:auto; max-width:100%;}
@media (max-width:600px){
  .footer-top{flex-direction:column; align-items:flex-start; gap:16px; padding:24px 20px;}
  .brand-logo-footer{height:32px; width:auto; max-width:100%;}
}
.footer-social{display:flex; align-items:center; gap:12px;}
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background .2s ease, border-color .2s ease;
}
.footer-social a:hover{background:var(--teal); border-color:var(--teal);}
.footer-social svg{width:16px; height:16px;}
/* خمسة أعمدة: تواصل + أربع مجموعات روابط تغطي صفحات الموقع كلها.
   كان الفوتر ثلاثة أعمدة بخمسة روابط، فيبقى نصف عرضه فارغاً وتُغيَّب
   معظم الصفحات عن الزائر ومحرّكات البحث. */
.footer-grid{
  max-width:1180px; margin:0 auto; display:grid;
  grid-template-columns:1.35fr repeat(4, 1fr);
  gap:0; padding:38px 28px 34px;
}
.footer-grid > div{padding:0 24px; border-right:1px solid rgba(255,255,255,0.09);}
.footer-grid > div:first-child{padding-right:0; border-right:none;}
.footer-col h4{
  position:relative; font-family:var(--font-head); color:#fff;
  font-size:13.5px; font-weight:700; margin-bottom:15px; padding-bottom:9px;
}
/* خط تركوازي قصير يفصل العنوان عن روابطه */
.footer-col h4::after{
  content:''; position:absolute; bottom:0; inset-inline-start:0;
  width:22px; height:2px; background:var(--teal-soft);
}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:7px;}
.footer-col a{
  font-size:13px; line-height:1.55; color:#8fa3b8; display:inline-block;
  transition:color .22s ease, transform .22s ease;
}
.footer-col a:hover{color:var(--mint); transform:translateX(-4px);}
.footer-contact li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; line-height:1.6; color:#8fa3b8; margin-bottom:12px;
}
.footer-contact .fc-ic{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; color:var(--teal-soft);
}
.footer-contact svg{width:13px; height:13px;}
.footer-contact a{transition:color .22s ease;}
.footer-contact a:hover{color:var(--mint);}
.footer-bottom{
  max-width:1180px; margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12px; color:#6d8499; border-top:1px solid rgba(255,255,255,0.08);
}
.footer-bottom-links{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.footer-bottom-links a{color:#8fa3b8; transition:color .22s ease;}
.footer-bottom-links a:hover{color:var(--mint);}

/* أيقونة الرابط الخارجي — تُلحق بالنص فتُعلم الزائر أنه سيغادر الموقع */
.ext-ic{
  width:11px; height:11px; display:inline-block; vertical-align:-1px;
  margin-inline-start:5px; opacity:.65; flex-shrink:0;
}
a:hover > .ext-ic{opacity:1;}

/* الأعمدة الخمسة تضيق قبل 900px بكثير، فنهبط تدريجياً:
   ثلاثة أعمدة ثم عمودان، مع إعطاء عمود التواصل عرض الصف كاملاً. */
@media (max-width:1100px){
  .footer-grid{grid-template-columns:repeat(3, 1fr); gap:30px 0; padding:32px 28px 28px;}
  .footer-grid > div{padding:0 20px;}
  .footer-grid > div:first-child{grid-column:1 / -1; padding:0 0 4px; border-bottom:1px solid rgba(255,255,255,.09);}
  .footer-col-contact .footer-contact{display:flex; flex-wrap:wrap; gap:10px 32px;}
  .footer-col-contact .footer-contact li{margin-bottom:6px;}
}
@media (max-width:640px){
  .footer-grid{grid-template-columns:repeat(2, 1fr); gap:26px 0;}
  .footer-grid > div{padding:0 12px;}
  .footer-grid > div:nth-child(even){border-right:none;}
  .footer-bottom{justify-content:center; text-align:center;}
}

@media (max-width:900px){
  .section-hero-inner{max-width:100%;}
  .stats-grid, .cards-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid .stat-item:nth-child(3)::before{display:none;}
  .section-hero h1{font-size:34px;}
  .section-stats-wrap{margin-top:-40px;}
}
@media (max-width:600px){
  .stats-grid, .cards-grid{grid-template-columns:1fr;}
  .stats-grid .stat-item::before{display:none;}
  .section-richtext-inner{padding-right:20px;}
}

/* Certificate display + extracted info grid */
.cert-frame{
  border:1px solid var(--line); padding:14px; background:var(--paper-tint); margin:32px 0;
}
.cert-frame img{width:100%; height:auto; display:block; border:1px solid var(--line);}
.cert-info-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-top:28px; border-top:1px solid var(--line);
}
.cert-info-item{
  padding:16px 22px; border-bottom:1px solid var(--line); border-left:1px solid var(--line);
}
.cert-info-item:nth-child(2n){border-left:none;}
.cert-info-item .cii-label{font-size:12.5px; color:var(--teal); font-weight:700; margin-bottom:4px;}
.cert-info-item .cii-value{font-family:var(--font-head); font-size:15.5px; font-weight:700; color:var(--navy);}
@media (max-width:700px){
  .cert-info-grid{grid-template-columns:1fr;}
  .cert-info-item{border-left:none;}
}

/* Partner / accreditation logos strip */
.logos-strip{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:26px;
}
.logo-slot{
  background:#fff; min-height:120px; display:flex; align-items:center; justify-content:center; padding:18px; flex-direction:column; gap:8px;
}
.logo-slot img{max-width:100%; max-height:70px; object-fit:contain; filter:grayscale(1); opacity:.85; transition:filter .3s ease, opacity .3s ease;}
.logo-slot:hover img{filter:grayscale(0); opacity:1;}
.logo-slot .logo-placeholder{width:44px; height:44px; border-radius:50%; border:1.5px dashed var(--line); display:flex; align-items:center; justify-content:center; color:#b7c2cc;}
.logo-slot .logo-placeholder svg{width:20px; height:20px;}
.logo-slot .logo-label{font-size:11.5px; color:#8a97a3; text-align:center;}
@media (max-width:700px){
  .logos-strip{grid-template-columns:repeat(2,1fr);}
}

/* Milestones — vertical timeline of key dates */
.milestones-list{
  margin-top:40px; position:relative; padding-right:28px; border-right:2px solid var(--line);
}
.milestone-item{
  position:relative; padding-bottom:36px;
}
.milestone-item:last-child{padding-bottom:0;}
.milestone-item::before{
  content:""; position:absolute; right:-35px; top:4px; width:12px; height:12px; border-radius:50%;
  background:var(--teal); box-shadow:0 0 0 4px #fff, 0 0 0 5px var(--line);
}
.milestone-year{font-family:var(--font-head); font-size:14px; font-weight:800; color:var(--teal); margin-bottom:4px;}
.milestone-title{font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--navy); margin-bottom:6px;}
.milestone-desc{font-size:14.5px; color:#69707d; line-height:1.7; margin:0;}

/* Documents listing page — banner + filter bar + document cards grid */
.dp-banner{
  min-height:260px; display:flex; align-items:center; justify-content:center; text-align:center;
  background-size:cover; background-position:center; position:relative;
}
.dp-banner-inner{color:#fff; padding:40px 20px;}
.dp-breadcrumb{font-size:13.5px; margin-bottom:14px; display:flex; align-items:center; justify-content:center; gap:8px; opacity:.85;}
.dp-breadcrumb a{color:#fff;}
.dp-banner-inner h1{font-family:var(--font-head); font-size:34px; font-weight:800;}
.dp-body{max-width:1180px; margin:0 auto; padding:50px 24px 70px;}
.dp-filter{
  background:var(--paper-tint); border:1px solid var(--line); border-radius:6px; padding:24px;
  display:grid; grid-template-columns:repeat(3,1fr) auto; gap:16px; align-items:end; margin-bottom:36px;
}
.dp-field label{display:block; font-size:12.5px; font-weight:700; color:var(--navy); margin-bottom:8px;}
.dp-field input, .dp-field select{
  width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:4px; background:#fff; font-family:inherit; font-size:14px;
}
.dp-search-btn{
  background:var(--teal); color:#fff; border:none; border-radius:4px; padding:12px 26px; font-weight:700; font-size:14px;
  cursor:pointer; transition:background .2s ease; white-space:nowrap;
}
.dp-search-btn:hover{background:var(--teal-soft);}
.dp-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.dp-card{background:var(--paper-tint); border-radius:6px; padding:20px 22px; overflow:hidden;}
.dp-card-image{margin:-20px -22px 18px; aspect-ratio:16/9; overflow:hidden;}
.dp-card-image img{width:100%; height:100%; object-fit:cover; display:block;}
.dp-card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
.dp-eye{color:var(--teal); display:flex;}
.dp-eye svg{width:19px; height:19px;}
.dp-date{font-size:12.5px; color:#8a97a3;}
.dp-card-bottom{display:flex; align-items:center; justify-content:space-between; gap:14px;}
.dp-title{font-family:var(--font-head); font-weight:800; font-size:16px; color:var(--navy);}
.dp-download{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:#fff; color:var(--teal);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); transition:background .2s ease, color .2s ease;
}
.dp-download:hover{background:var(--teal); color:#fff;}
.dp-download svg{width:17px; height:17px;}
.dp-pagination{display:flex; justify-content:center; gap:8px; margin-top:40px;}
.dp-page-btn{
  width:38px; height:38px; border-radius:4px; border:1px solid var(--line); background:#fff; color:var(--navy);
  font-weight:700; cursor:pointer; transition:background .2s ease, color .2s ease;
}
.dp-page-btn.active, .dp-page-btn:hover{background:var(--teal); color:#fff; border-color:var(--teal);}
@media (max-width:700px){
  .dp-filter{grid-template-columns:1fr;}
  .dp-grid{grid-template-columns:1fr;}
}

/* Career/volunteer hero — geometric shaped photo + intro + checklist */
.career-hero{
  max-width:1180px; margin:0 auto; padding:var(--sec-y) 28px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.career-hero-media{position:relative; min-height:380px;}
.chm-shape{position:absolute; border-radius:24px;}
.chm-shape-1{width:220px; height:220px; background:var(--mint-pale); top:0; right:0; transform:rotate(18deg);}
.chm-shape-2{width:140px; height:140px; background:var(--teal); bottom:6%; left:2%; border-radius:50%; opacity:.9;}
.chm-dots{
  position:absolute; top:12%; left:14%; width:90px; height:90px;
  background-image:radial-gradient(var(--navy) 2px, transparent 2.4px); background-size:14px 14px; opacity:.35;
}
.chm-photo{
  position:absolute; inset:8% 10%; overflow:hidden; box-shadow:var(--shadow-lg); z-index:2;
  border-radius:50% 50% 8% 50% / 50% 50% 8% 50%;
}
.chm-photo img{width:100%; height:100%; object-fit:cover;}
.career-hero-text h2{margin:14px 0 18px;}
.career-points{list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:14px;}
.career-points li{display:flex; align-items:center; gap:12px; font-weight:700; color:var(--navy);}
.career-points .ck{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--mint-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
}
.career-points .ck svg{width:14px; height:14px;}
@media (max-width:900px){
  .career-hero{grid-template-columns:1fr; gap:70px;}
  .career-hero-media{min-height:280px; order:1;}
  .career-hero-text{order:2;}
}

/* Job categories — single-box carousel with hover fill, sized to match heading above */
.job-categories{padding:var(--sec-y) 28px var(--sec-y); text-align:center;}
.job-categories .section-head{max-width:640px; margin:0 auto 30px;}
.jc-carousel{
  max-width:640px; margin:0 auto; position:relative; height:140px; border-radius:0; overflow:hidden;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); text-align:right;
}
.jc-slide{
  position:absolute; inset:0; display:flex; align-items:center; gap:18px; padding:26px 30px;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease, background .3s ease, color .3s ease, visibility 0s linear .5s;
  background:#fff; color:var(--navy);
}
.jc-slide.active{opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;}
.jc-carousel:hover .jc-slide.active{background:var(--teal); color:#fff;}
.jc-icon{
  flex:0 0 auto; width:56px; height:56px; border-radius:50%; background:var(--mint-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center; transition:background .3s ease, color .3s ease;
}
.jc-carousel:hover .jc-slide.active .jc-icon{background:rgba(255,255,255,.2); color:#fff;}
.jc-icon svg{width:24px; height:24px;}
.jc-slide-text{flex:1; min-width:0;}
.jc-title{font-family:var(--font-head); font-weight:800; font-size:18px; margin-bottom:6px;}
.jc-desc{font-size:13.5px; opacity:.75; line-height:1.6;}
.jc-carousel:hover .jc-slide.active .jc-desc{opacity:.9;}
.jc-dots{position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2;}
.jc-dot{width:6px; height:6px; border-radius:50%; background:var(--line); cursor:pointer; transition:background .2s ease;}
.jc-dot.active{background:var(--teal);}
@media (max-width:640px){
  .jc-carousel{height:auto; min-height:150px;}
}

/* Popular jobs / volunteer opportunities grid */
.popular-jobs{max-width:1180px; margin:0 auto; padding:var(--sec-y) 28px var(--sec-y);}
.pj-head{margin-bottom:32px;}
.pj-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.pj-card{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:26px;
  display:flex; flex-direction:column; transition:box-shadow .25s ease, transform .25s ease;
}
.pj-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.pj-top{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.pj-avatar{
  flex:0 0 auto; width:56px; height:56px; border-radius:50%; overflow:hidden; background:var(--mint-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
}
.pj-avatar img{width:100%; height:100%; object-fit:cover;}
.pj-avatar svg{width:24px; height:24px;}
.pj-title{font-family:var(--font-head); font-weight:800; font-size:17px; color:var(--navy);}
.pj-meta{font-size:12.5px; color:#8a97a3; display:flex; gap:6px; flex-wrap:wrap; margin-top:4px;}
.pj-desc{font-size:14px; color:#69707d; line-height:1.7; margin-bottom:16px;}
.pj-tags{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px;}
.pj-tag{background:var(--paper-tint); color:var(--navy); font-size:12px; font-weight:700; padding:6px 14px; border-radius:20px;}
.pj-tag-accent{background:var(--mint-pale); color:var(--teal);}
.pj-apply{align-self:flex-start; margin-top:auto;}
@media (max-width:800px){.pj-grid{grid-template-columns:1fr;}}

/* Stat highlight — colored counter badge overlapping a photo, next to intro text */
.stat-highlight{
  max-width:1180px; margin:0 auto; padding:70px 40px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.sh-text h2{margin:14px 0 16px;}
.sh-media{position:relative; min-height:340px; padding-inline-end:56px; padding-top:34px;}
.sh-media > img{width:100%; height:100%; object-fit:cover; box-shadow:var(--shadow-md); position:relative; z-index:1;}
.sh-badge{
  position:absolute; top:0; inset-inline-end:0; width:230px; background:var(--teal); color:#fff; padding:28px 24px; z-index:2;
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
}
.sh-stat{display:flex; align-items:center; gap:14px; padding:16px 0;}
.sh-stat + .sh-stat{border-top:1px solid rgba(255,255,255,.25);}
.sh-stat-icon{
  flex:0 0 auto; width:42px; height:42px; padding:9px; border-radius:50%; background:rgba(255,255,255,.15); color:#fff;
}
.sh-stat-icon svg{width:100%; height:100%;}
.sh-stat-value{font-family:var(--font-head); font-size:28px; font-weight:900; line-height:1.15;}
.sh-stat-label{font-size:13px; opacity:.92; line-height:1.4; margin-top:2px;}
@media (max-width:900px){
  .stat-highlight{grid-template-columns:1fr; gap:70px; padding:60px 24px;}
  .sh-media{order:1; margin-bottom:0; padding-inline-end:40px;}
  .sh-text{order:2;}
  .sh-badge{width:200px;}
}
@media (max-width:520px){
  .sh-media{padding-inline-end:0; padding-top:0;}
  .sh-badge{position:static; width:100%; margin-top:20px;}
}

/* File strip + departments — navy section with auto-scrolling file cards */
.file-strip-section{background:var(--navy); background-size:cover; background-position:center; padding:var(--sec-y) 28px 0;}
.fss-top{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:stretch; padding-bottom:60px;}
.fss-media{border-radius:6px; overflow:hidden; min-height:340px; align-self:stretch;}
.fss-media img{width:100%; height:100%; object-fit:cover;}
.fss-text{display:flex; flex-direction:column; align-self:stretch;}
.fss-text .eyebrow{color:var(--mint);}
.fss-text h2{color:#fff; margin:14px 0 14px;}
.fss-text .prose{color:#c3cede;}
.fss-carousel{
  margin-top:26px; position:relative; flex:1; min-height:100px; border-radius:0; overflow:hidden;
  background:#fff; box-shadow:var(--shadow-sm); max-width:460px;
}
.fss-slide{
  position:absolute; inset:0; display:flex; align-items:center; gap:16px; padding:20px 22px;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .5s ease, transform .5s ease, background .3s ease, color .3s ease, visibility 0s linear .5s;
  background:#fff; color:var(--navy);
}
.fss-slide.active{opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;}
.fss-carousel:hover .fss-slide.active{background:var(--teal); color:#fff;}
.fss-eye{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:var(--paper-tint); color:var(--teal);
  display:flex; align-items:center; justify-content:center; transition:background .3s ease, color .3s ease;
}
.fss-carousel:hover .fss-slide.active .fss-eye{background:rgba(255,255,255,.2); color:#fff;}
.fss-eye svg{width:19px; height:19px;}
.fss-slide-info{flex:1; min-width:0;}
.fss-file-date{font-size:12.5px; color:#8a97a3; transition:color .3s ease; margin-bottom:4px;}
.fss-carousel:hover .fss-slide.active .fss-file-date{color:rgba(255,255,255,.85);}
.fss-file-title{
  display:block; font-family:var(--font-head); font-weight:800; font-size:16px; color:inherit;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none;
}
.fss-download{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:var(--paper-tint); color:var(--teal);
  display:flex; align-items:center; justify-content:center; transition:background .3s ease, color .3s ease;
}
.fss-carousel:hover .fss-slide.active .fss-download{background:rgba(255,255,255,.2); color:#fff;}
.fss-download svg{width:18px; height:18px;}
.fss-dots{position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2;}
.fss-dot{width:6px; height:6px; border-radius:50%; background:var(--line); cursor:pointer; transition:background .2s ease;}
.fss-dot.active{background:var(--teal);}
@media (max-width:900px){
  .fss-top{grid-template-columns:1fr;}
  .fss-media{order:1; min-height:240px;}
  .fss-text{order:2;}
}

/* Department grid — icon + title + desc + arrow, on matching navy background */
.dept-grid-section{background:var(--navy); padding:10px 28px var(--sec-y);}
.dg-grid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:0 40px;}
.dg-item{
  display:flex; align-items:center; gap:16px; padding:22px 0; border-bottom:1px solid rgba(255,255,255,.12);
}
.dg-icon{flex:0 0 auto; width:34px; height:34px; color:var(--mint);}
.dg-icon svg{width:100%; height:100%;}
.dg-text{flex:1; min-width:0;}
.dg-title{font-family:var(--font-head); font-weight:800; font-size:15.5px; color:#fff;}
.dg-desc{font-size:12.5px; color:#8a97a3; margin-top:4px;}
.dg-arrow{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.dg-arrow:hover{background:var(--teal);}
.dg-arrow svg{width:16px; height:16px;}
@media (max-width:900px){.dg-grid{grid-template-columns:1fr;}}

/* Circle badges — vision/mission/goals/values in distinctive ringed circles */
.circle-badges-section{max-width:1180px; margin:0 auto; padding:var(--sec-y) 28px;}
.circle-badges-section .section-head{text-align:center; max-width:720px; margin:0 auto 50px;}
.circle-badges-section .section-head .eyebrow{justify-content:center;}
.cb-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px 24px;}
.cb-item{text-align:center; position:relative;}
.cb-item::before{
  content:""; position:absolute; top:56px; right:-12%; width:24%; height:2px; background:var(--line);
}
.cb-item:last-child::before, .cb-item:nth-child(3n)::before{display:none;}
.cb-ring{
  position:relative; width:150px; height:150px; margin:0 auto 24px; border-radius:50%;
  border:2px solid var(--teal); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:#fff; box-shadow:var(--shadow-sm);
}
.cb-ring::before{
  content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid transparent;
  border-top-color:var(--teal); border-left-color:var(--teal); transform:rotate(45deg);
}
.cb-icon{width:34px; height:34px; color:var(--teal);}
.cb-icon svg{width:100%; height:100%;}
.cb-number{font-family:var(--font-head); font-size:26px; font-weight:900; color:var(--navy);}
.cb-title{font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--navy); margin-bottom:8px;}
.cb-desc{font-size:14px; color:#69707d; line-height:1.7; max-width:230px; margin:0 auto;}
@media (max-width:900px){
  .cb-grid{grid-template-columns:repeat(2,1fr);}
  .cb-item:nth-child(3n)::before{display:block;}
  .cb-item:nth-child(2n)::before{display:none;}
}
@media (max-width:560px){
  .cb-grid{grid-template-columns:1fr;}
  .cb-item::before{display:none !important;}
}

/* Vision & mission — two colored panels overlapping a background photo */
.vm-section{position:relative; padding-bottom:60px;}
.vm-photo{height:320px; background-size:cover; background-position:center; position:relative;}
.vm-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,34,62,.15), rgba(5,34,62,.55));}
.vm-panels-row{
  max-width:1180px; margin:-130px auto 0; position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; box-shadow:var(--shadow-lg);
}
.vm-panel{
  position:relative; overflow:hidden; padding:48px 44px; color:#fff;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.vm-panel:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg);}
.vm-panel-navy{background:var(--navy);}
.vm-panel-teal{background:var(--teal);}
.vm-eyebrow{font-size:12.5px; font-weight:800; letter-spacing:normal; opacity:.8; margin-bottom:16px;}
.vm-panel h3{font-family:var(--font-head); font-size:30px; font-weight:900; margin-bottom:16px; position:relative; z-index:1;}
.vm-panel p{font-size:14px; line-height:1.85; opacity:.9; max-width:380px; position:relative; z-index:1;}
.vm-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:24px; font-weight:700; font-size:14px;
  position:relative; z-index:1; transition:gap .25s ease;
}
.vm-link svg{width:16px; height:16px; transition:transform .3s ease;}
.vm-panel:hover .vm-link{gap:13px;}
.vm-panel:hover .vm-link svg{transform:translateX(-4px);}
.vm-ghost-icon{
  position:absolute; bottom:14px; left:20px; width:100px; height:100px; opacity:.12; color:#fff;
  transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}
.vm-ghost-icon svg{width:100%; height:100%;}
.vm-panel:hover .vm-ghost-icon{transform:scale(1.15) rotate(-8deg); opacity:.2;}
@media (max-width:900px){
  .vm-panels-row{grid-template-columns:1fr; margin-top:-90px;}
  .vm-photo{height:260px;}
}

/* Gallery + CTAs — navy band with photo gallery and colored action buttons */
.gallery-ctas-section{background:var(--navy); padding:60px 28px 0;}
.gcs-head{max-width:1180px; margin:0 auto 34px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.gallery-ctas-section .eyebrow{color:var(--mint);}
.gallery-ctas-section h2{color:#fff; margin-top:12px;}
.gcs-badge{display:flex; align-items:center; gap:10px; color:#fff; font-size:13px; font-weight:700;}
.gcs-dot{width:26px; height:26px; border-radius:50%; background:var(--teal); flex-shrink:0;}
.gcs-grid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:160px; gap:14px; padding-bottom:0;}
.gcs-photo{overflow:hidden;}
.gcs-photo img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1);}
.gcs-photo:hover img{transform:scale(1.08);}
.gcs-cta-row{max-width:1180px; margin:34px auto 0; display:grid; grid-template-columns:repeat(4,1fr);}
.gcs-cta-btn{
  display:flex; align-items:center; justify-content:center; padding:26px 20px; background:var(--teal); color:#fff;
  font-family:var(--font-head); font-weight:800; font-size:15px; text-align:center;
  transition:background .25s ease;
}
.gcs-cta-btn:nth-child(2n){background:var(--teal-soft);}
.gcs-cta-btn:hover{background:var(--navy-soft);}
@media (max-width:900px){
  .gcs-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:140px;}
  .gcs-cta-row{grid-template-columns:repeat(2,1fr);}
}

/* Teal split text band */
.teal-split-text{
  background:var(--teal); color:#fff; max-width:100%; padding:60px 28px;
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
}
.teal-split-text .prose{font-size:15px; line-height:1.9; opacity:.95;}
.teal-split-text h2{font-family:var(--font-head); font-size:34px; font-weight:900; line-height:1.4; color:#fff;}
@media (max-width:900px){.teal-split-text{grid-template-columns:1fr;}}

/* Icon row labels — plain circular icons with label, evenly spaced */
.icon-row-section{padding:50px 28px; background:#fff;}
.irl-row{max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px;}
.irl-item{flex:1; min-width:120px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;}
.irl-icon{
  width:64px; height:64px; border-radius:50%; background:var(--paper-tint); color:var(--teal);
  display:flex; align-items:center; justify-content:center; transition:background .25s ease, color .25s ease;
}
.irl-item:hover .irl-icon{background:var(--teal); color:#fff;}
.irl-icon svg{width:26px; height:26px;}
.irl-label{font-family:var(--font-head); font-weight:800; font-size:14.5px; color:var(--navy);}

/* Initiatives browse — filter bar + event/initiative cards grid */
.initiatives-browse{max-width:1180px; margin:0 auto; padding:var(--sec-y) 28px var(--sec-y);}
.ib-filter{
  background:var(--paper-tint); border:1px solid var(--line); padding:24px;
  display:grid; grid-template-columns:repeat(3,1fr) auto; gap:16px; align-items:end; margin-bottom:40px;
}
.ib-field label{display:block; font-size:12.5px; font-weight:700; color:var(--navy); margin-bottom:8px;}
.ib-field input, .ib-field select{
  width:100%; padding:11px 14px; border:1px solid var(--line); background:#fff; font-family:inherit; font-size:14px;
}
.ib-search-btn{
  background:var(--teal); color:#fff; border:none; padding:12px 26px; font-weight:700; font-size:14px;
  cursor:pointer; transition:background .2s ease; white-space:nowrap;
}
.ib-search-btn:hover{background:var(--teal-soft);}
.ib-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.ib-card{background:#fff; box-shadow:var(--shadow-sm); border:1px solid var(--line);}
.ib-photo{position:relative; aspect-ratio:4/3; overflow:hidden;}
.ib-photo img{width:100%; height:100%; object-fit:cover;}
.ib-date-badge{
  position:absolute; top:12px; right:12px; background:var(--teal); color:#fff; text-align:center;
  padding:8px 14px; font-family:var(--font-head);
}
.ib-day{display:block; font-size:16px; font-weight:900; line-height:1.2;}
.ib-month{display:block; font-size:11px; font-weight:700; opacity:.9;}
.ib-body{padding:20px;}
.ib-meta{display:flex; align-items:center; gap:8px; font-size:13px; color:#69707d; margin-bottom:8px;}
.ib-meta svg{width:15px; height:15px; color:var(--teal); flex-shrink:0;}
.ib-title{font-family:var(--font-head); font-weight:800; font-size:17px; color:var(--navy); margin-top:10px;}
@media (max-width:900px){
  .ib-filter{grid-template-columns:1fr;}
  .ib-grid{grid-template-columns:1fr;}
}

/* Collection grid — photo cards with overlay title + tag + description below */
.collection-grid-section{max-width:1180px; margin:0 auto; padding:60px 28px;}
.cg-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:36px;}
.cg-photo{position:relative; aspect-ratio:3/3.6; overflow:hidden;}
.cg-photo img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1);}
.cg-item:hover .cg-photo img{transform:scale(1.08);}
.cg-overlay{position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,34,62,.75), rgba(5,34,62,.05) 55%);}
.cg-title{position:absolute; bottom:16px; right:16px; left:16px; color:#fff; font-family:var(--font-head); font-weight:800; font-size:16px; line-height:1.5; z-index:1;}
.cg-tag{position:absolute; bottom:0; left:0; background:var(--teal); color:#fff; font-family:var(--font-head); font-weight:800; font-size:13px; padding:6px 12px; z-index:1;}
.cg-desc{font-size:13.5px; color:#69707d; line-height:1.7; margin-top:14px;}
.cg-more-wrap{text-align:center; margin-top:36px;}
.cg-more-btn{display:inline-block; padding:12px 28px; border:1px solid var(--line); color:var(--navy); font-weight:700; font-size:14px; transition:background .2s ease, color .2s ease;}
.cg-more-btn:hover{background:var(--teal); color:#fff; border-color:var(--teal);}
@media (max-width:900px){.cg-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.cg-grid{grid-template-columns:1fr;}}

/* Exhibitions grid — photo card + meta + title + link, with dot pagination */
.exhibitions-grid-section{max-width:1180px; margin:0 auto; padding:60px 28px;}
.exg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:36px;}
.exg-photo{aspect-ratio:4/3; overflow:hidden; margin-bottom:16px;}
.exg-photo img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1);}
.exg-card:hover .exg-photo img{transform:scale(1.06);}
.exg-meta{display:flex; align-items:center; gap:8px; font-size:12.5px; color:#8a97a3; margin-bottom:10px;}
.exg-meta svg{width:15px; height:15px; color:var(--teal); flex-shrink:0;}
.exg-title{font-family:var(--font-head); font-weight:800; font-size:17px; color:var(--navy); margin-bottom:10px;}
.exg-link{display:inline-flex; align-items:center; gap:6px; color:var(--teal); font-weight:700; font-size:13.5px;}
.exg-link svg{width:14px; height:14px; transition:transform .2s ease;}
.exg-card:hover .exg-link svg{transform:translateX(-3px);}
.exg-dots{display:flex; justify-content:center; gap:8px; margin-top:40px;}
.exg-dot{width:7px; height:7px; border-radius:50%; background:var(--line);}
.exg-dot.active{background:var(--teal);}
@media (max-width:900px){.exg-grid{grid-template-columns:1fr;}}

/* Text + icon grid — intro text on one side, 2x2 icon list on the other */
.text-icon-grid-section{
  max-width:1180px; margin:0 auto; padding:60px 28px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.tig-text h2{margin:14px 0 16px;}
.tig-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px 26px;}
.tig-item{display:flex; align-items:flex-start; gap:14px;}
.tig-icon{
  flex:0 0 auto; width:48px; height:48px; border-radius:50%; background:var(--mint-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
}
.tig-icon svg{width:22px; height:22px;}
.tig-title{font-family:var(--font-head); font-weight:800; font-size:15.5px; color:var(--navy); margin-bottom:6px;}
.tig-desc{font-size:13px; color:#69707d; line-height:1.7; margin:0;}
@media (max-width:900px){
  .text-icon-grid-section{grid-template-columns:1fr;}
  .tig-grid{grid-template-columns:1fr;}
}

/* Photo duo + icon badge — two overlapping photos with a category icon between them */
.photo-duo-icon{
  max-width:1180px; margin:0 auto; padding:var(--sec-y) 28px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.pdi-media{position:relative; min-height:420px;}
.pdi-photo{position:absolute; overflow:hidden; box-shadow:var(--shadow-md);}
.pdi-photo-1{top:0; right:8%; width:75%; height:78%; z-index:1;}
.pdi-photo-2{bottom:0; left:0; width:56%; height:46%; z-index:2; border:6px solid var(--paper);}
.pdi-photo img{width:100%; height:100%; object-fit:cover;}
.pdi-icon-badge{
  position:absolute; bottom:34%; left:38%; width:64px; height:64px; border-radius:50%; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; z-index:3; box-shadow:var(--shadow-lg);
}
.pdi-icon-badge svg{width:28px; height:28px;}
.pdi-text h2{margin:14px 0 16px;}
@media (max-width:900px){
  .photo-duo-icon{grid-template-columns:1fr; gap:70px;}
  .pdi-media{min-height:320px; order:1; margin-bottom:20px;}
  .pdi-text{order:2;}
}

/* Intro feature banner — photo top, navy accent card + 3 feature cards straddling the seam */
.intro-feature-banner{position:relative; margin-bottom:var(--sec-y);}
.ifb-photo{height:220px; background-size:cover; background-position:center; position:relative;}
.ifb-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,34,62,.25), rgba(5,34,62,.55));}
.ifb-row{
  max-width:1180px; margin:-90px auto 0; position:relative; z-index:2; padding:0 28px;
  display:grid; grid-template-columns:1fr 2fr; gap:24px; align-items:start;
}
.ifb-card{background:var(--accent, var(--navy)); color:#fff; padding:34px 30px; box-shadow:var(--shadow-lg);}
.ifb-card h3{font-family:var(--font-head); font-size:21px; font-weight:800; line-height:1.5; margin-bottom:14px;}
.ifb-card .prose{font-size:13.5px; line-height:1.8; opacity:.9;}
.ifb-profile{margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.2); display:flex; flex-direction:column; gap:2px;}
.ifb-profile strong{font-family:var(--font-head); font-size:14px;}
.ifb-profile span{font-size:12.5px; opacity:.8;}
.ifb-features{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.ifb-feature{background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); padding:24px 20px;}
.ifb-feature-icon{width:42px; height:42px; border-radius:50%; background:var(--paper-tint); color:var(--accent, var(--teal)); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.ifb-feature-icon svg{width:20px; height:20px;}
.ifb-feature-title{font-family:var(--font-head); font-weight:800; font-size:14.5px; color:var(--navy); margin-bottom:8px;}
.ifb-feature-desc{font-size:12.5px; color:#69707d; line-height:1.7; margin-bottom:14px;}
.ifb-more{display:inline-block; font-size:12px; font-weight:700; color:var(--accent, var(--teal)); border:1px solid var(--line); padding:8px 14px;}
.ifb-more:hover{background:var(--accent, var(--teal)); color:#fff; border-color:var(--accent, var(--teal));}
@media (max-width:900px){
  .ifb-row{grid-template-columns:1fr; margin-top:-40px;}
  .ifb-features{grid-template-columns:1fr;}
}

/* Department collection grid — heading+button head row, photo grid below */
.dept-collection-grid{max-width:1180px; margin:0 auto; padding:60px 28px;}
.dcg-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:32px;}
.dcg-head h2{color:var(--accent, var(--navy));}
.dcg-cta{background:var(--accent, var(--navy)); color:#fff; padding:14px 26px; font-weight:700; font-size:14px; transition:opacity .2s ease;}
.dcg-cta:hover{opacity:.85;}
.dcg-grid{margin-top:0;}

/* Dark banner + link groups — photo bg, heading+CTA+play, 4 columns of grouped links */
/* بطاقة الروابط البيضاء مزاحة 40px لأسفل بـposition:relative، وهذه
   الإزاحة لا تحجز مساحة في التدفّق — فتتدلّى خارج القسم وتركب ما بعده
   (كانت تغطّي شريط الاشتراك بـ68px).

   الحجز بهامش سفلي، ومقداره ثلاثة أجزاء:
     40px  مقدار تدلّي البطاقة
     28px  يُبتلع عند نهاية <main> بانطواء الهوامش، قِيس تجريبياً
           (الفجوة الظاهرة = الهامش − 68 بعلاقة خطية ثابتة)
     --sec-y  إيقاع المسافات المعتاد بين الأقسام */
.dark-banner-links{
  background-size:cover; background-position:center; padding:var(--sec-y) 28px 0;
  margin-bottom:calc(40px + 28px + var(--sec-y));
}
.dbl-top{max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:30px; padding-bottom:70px;}
.dbl-text h2{color:#fff; font-size:32px; margin-bottom:14px;}
.dbl-text .prose{color:#d9e2ec; font-size:14px; max-width:480px;}
.dbl-cta{display:inline-block; margin-top:20px; background:var(--accent, var(--teal));}
.dbl-play{
  flex:0 0 auto; width:64px; height:64px; border-radius:50%; background:#fff; color:var(--accent, var(--navy));
  display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; box-shadow:var(--shadow-lg);
}
.dbl-play svg{width:24px; height:24px;}
.dbl-groups{
  max-width:1180px; margin:0 auto; background:#fff; box-shadow:var(--shadow-lg); position:relative; top:40px;
  display:grid; grid-template-columns:repeat(4,1fr); padding:36px 28px;
}
.dbl-group{padding:0 20px; border-right:1px solid var(--line);}
.dbl-group:first-child{border-right:none;}
.dbl-group-icon{width:32px; height:32px; color:var(--accent, var(--teal)); margin-bottom:12px;}
.dbl-group-icon svg{width:100%; height:100%;}
.dbl-group-title{font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--accent, var(--navy)); margin-bottom:14px;}
.dbl-links{list-style:none;}
.dbl-links li{font-size:13px; color:#69707d; padding:6px 0; border-bottom:1px solid var(--line);}
.dbl-links li:last-child{border-bottom:none;}
@media (max-width:900px){
  .dbl-top{flex-direction:column; align-items:flex-start; text-align:right;}
  .dbl-groups{grid-template-columns:repeat(2,1fr); row-gap:24px; top:0;}
  /* لا تدلّي هنا (top:0)، فيسقط جزء الأربعين ويبقى تعويض الانطواء */
  .dark-banner-links{margin-bottom:calc(28px + var(--sec-y));}
  .dbl-group{border-right:none; border-bottom:1px solid var(--line); padding-bottom:20px;}
}

/* News list + CTA split — compact news rows beside a teal call-to-action panel */
.news-list-split{display:grid; grid-template-columns:1.3fr 1fr; max-width:1180px; margin:var(--sec-y) auto; box-shadow:var(--shadow-md);}
.nls-list{background:#fff; padding:36px; border:1px solid var(--line); border-left:none;}
.nls-row{display:flex; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);}
.nls-row:last-child{border-bottom:none;}
.nls-icon{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--mint-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
}
.nls-icon svg{width:18px; height:18px;}
.nls-text{flex:1; min-width:0;}
.nls-date{font-size:12.5px; font-weight:700; color:var(--teal); margin-bottom:4px;}
.nls-title{display:block; font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--navy); line-height:1.5;}
.nls-thumb{flex:0 0 auto; width:64px; height:64px; overflow:hidden;}
.nls-thumb img{width:100%; height:100%; object-fit:cover;}
.nls-browse-all-btn{
  margin-top:22px; display:inline-flex; align-items:center; gap:8px; padding:11px 24px;
  border:1.5px solid var(--teal); color:var(--teal); background:transparent; border-radius:6px;
  font-weight:700; font-size:14px; transition:background .2s ease, color .2s ease;
}
.nls-browse-all-btn svg{width:16px; height:16px;}
.nls-browse-all-btn:hover{background:var(--teal); color:#fff;}
.nls-cta{background:var(--blue); color:#fff; padding:50px 40px; display:flex; flex-direction:column; justify-content:center;}
.nls-cta h2{color:#fff; font-size:30px; font-weight:900; line-height:1.5;}
.nls-cta .prose{font-size:14px; opacity:.95; margin-top:14px;}
.nls-cta-btn{
  align-self:flex-start; margin-top:20px; display:inline-block; padding:10px 22px;
  border:1.5px solid #fff; color:#fff; background:transparent; font-weight:700; font-size:14px;
  transition:background .2s ease, color .2s ease;
}
.nls-cta-btn:hover{background:#fff; color:var(--blue);}
@media (max-width:900px){
  .news-list-split{grid-template-columns:1fr;}
  .nls-list{border-left:1px solid var(--line);}
}
@media (max-width:560px){
  .nls-thumb{display:none;}
}

/* Contact page — banner, meeting-request buttons, info + form split, map */
.cp-body{max-width:1180px; margin:0 auto; padding:60px 28px;}
.cp-meeting-ctas{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:50px;}
.cp-meeting-btn{
  background:var(--paper-tint); border:1px solid var(--line); color:var(--navy); font-weight:700; font-size:14px;
  padding:22px 16px; cursor:pointer; transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
}
.cp-meeting-btn:hover{background:var(--teal); color:#fff; border-color:var(--teal); transform:translateY(-4px); box-shadow:var(--shadow-sm);}
.cp-meeting-icon{
  width:48px; height:48px; border-radius:50%; background:var(--mint-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease;
}
.cp-meeting-icon svg{width:22px; height:22px;}
.cp-meeting-btn:hover .cp-meeting-icon{background:rgba(255,255,255,.2); color:#fff;}
.cp-meeting-label{line-height:1.5;}
.cp-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px;}
.cp-info .prose{font-size:14.5px; color:#69707d; line-height:1.8; margin-top:14px;}
.cp-info-rows{margin-top:30px; display:flex; flex-direction:column; gap:20px;}
.cp-info-row{display:flex; align-items:center; gap:16px;}
.cp-info-icon{
  flex:0 0 auto; width:56px; height:56px; border-radius:8px; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.cp-info-icon svg{width:24px; height:24px;}
.cp-info-label{font-size:13px; color:#8a97a3;}
.cp-info-value{font-family:var(--font-head); font-weight:800; font-size:16px; color:var(--navy);}
.cp-form{background:var(--paper-tint); padding:30px; border:1px solid var(--line);}
.cp-form-row{display:flex; gap:14px; margin-bottom:14px;}
.cp-form input, .cp-form textarea{
  width:100%; padding:14px; border:1px solid var(--line); background:#fff; font-family:inherit; font-size:14px;
}
.cp-form textarea{min-height:130px; margin-bottom:18px; resize:vertical;}
.cp-form-status{margin-top:14px; font-weight:700; font-size:13.5px;}
.cp-map{height:360px;}
.cp-map iframe{width:100%; height:100%; border:0; display:block;}
@media (max-width:900px){
  .cp-meeting-ctas{grid-template-columns:repeat(2,1fr);}
  .cp-grid{grid-template-columns:1fr;}
  .cp-form-row{flex-direction:column;}
}

/* Meeting / membership modal */
/* ============================================================
   نافذة الطلبات (عضوية / اجتماع) — تنسيق واحد موحّد.

   كانت قواعدها متفرّقة في ثلاثة مواضع تتنازع بـ!important، فكلّ
   إصلاح يكسر غيره. جُمّعت هنا مرّةً واحدة.

   التوسيط بـmargin:auto لا align-items:center: الأخيرة تقصّ أعلى
   النافذة حين يطول محتواها عن الشاشة ولا تسمح بالتمرير إليه.
   ============================================================ */
.meeting-modal-backdrop{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(5,34,62,.62); backdrop-filter:blur(2px);
  align-items:flex-start; justify-content:center;
  padding:40px 24px; overflow-y:auto; overscroll-behavior:contain;
}
.meeting-modal-backdrop.open{display:flex;}
@media (max-width:600px){ .meeting-modal-backdrop{padding:24px 16px;} }
@media (max-height:720px){ .meeting-modal-backdrop{padding-block:24px;} }

.meeting-modal{
  position:relative; width:100%; max-width:520px; margin:auto;
  background:#fff; border-radius:14px; padding:0 0 26px;
  box-shadow:0 26px 70px rgba(5,34,62,.4);
}

/* زرّ الإغلاق على اليسار الفيزيائي دائماً — موضعه المألوف في النوافذ */
.meeting-modal-close{
  position:absolute; top:16px; left:16px; right:auto;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-tint); color:#5b6b7c; border:1px solid var(--line);
  font-size:19px; line-height:1; cursor:pointer; z-index:3; padding:0;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.meeting-modal-close:hover{background:#c0392b; color:#fff; border-color:#c0392b;}

/* الترويسة — تترك مساحة لزرّ الإغلاق فلا يركبه العنوان */
.meeting-modal .mm-head{
  display:flex; align-items:center; gap:13px;
  margin:0; padding:22px 26px 15px 62px;
  border-bottom:1px solid var(--line);
}
.mm-head-ico{
  width:40px; height:40px; flex:none; border-radius:11px;
  background:var(--mint-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
}
.mm-head-ico svg{width:20px; height:20px;}
.meeting-modal .mm-head h3{margin:0; font-size:17.5px; font-weight:900; color:var(--navy); line-height:1.4;}
.meeting-modal .mm-head p{margin:2px 0 0; font-size:12.5px; color:#6b7c8d;}

.meeting-modal form{padding:18px 26px 0;}

.meeting-modal label{
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:800; color:var(--navy);
  margin:0 0 5px; text-align:start;
}
.mm-lbl-ico{width:14px; height:14px; flex:none; color:var(--teal); opacity:.8;}

.meeting-modal .mm-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:11px;}
@media (max-width:640px){ .meeting-modal .mm-row{grid-template-columns:1fr;} }
.meeting-modal .mm-row > div{min-width:0;}

.meeting-modal input[type=text],
.meeting-modal input[type=email],
.meeting-modal input[type=tel],
.meeting-modal select{
  width:100%; margin:0; padding:9px 12px; font:inherit; font-size:13.5px;
  border:1px solid var(--line); border-radius:6px;
  background:#fff; color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.meeting-modal input:focus, .meeting-modal select:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(31,120,116,.14);
}

/* منطقة رفع الملف */
.mm-drop{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:13px 14px; margin:0 0 11px; cursor:pointer; text-align:center;
  border:1.5px dashed rgba(31,120,116,.4); border-radius:8px;
  background:var(--mint-pale);
  transition:border-color .18s ease, background .18s ease;
}
.mm-drop:hover{border-color:var(--teal); background:#e2f2ee;}
.mm-drop svg{width:21px; height:21px; color:var(--teal);}
.mm-drop-t{font-size:12.5px; font-weight:800; color:var(--navy);}
.mm-drop-h{font-size:11px; font-weight:600; color:#6b7c8d;}
.mm-drop input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.mm-drop.has-file{border-style:solid; border-color:var(--teal); background:#dff0eb;}

/* الإقرار */
.meeting-modal .mm-terms{
  display:flex; align-items:flex-start; gap:10px; margin:4px 0 0;
  padding:11px 13px; border-radius:8px;
  background:var(--paper-tint); border:1px solid var(--line);
}
.meeting-modal .mm-terms input[type=checkbox]{
  width:17px; height:17px; flex:none; margin:1px 0 0; accent-color:var(--teal); cursor:pointer;
}
.meeting-modal .mm-terms label{
  margin:0; font-size:12.5px; font-weight:600; color:#33475a; line-height:1.65; cursor:pointer;
}

/* زرّ الإرسال */
.meeting-modal .mm-submit{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin-top:14px; padding:13px 22px;
  background:linear-gradient(120deg, var(--teal), var(--teal-soft));
  color:#fff; border:0; border-radius:8px; cursor:pointer;
  font-family:inherit; font-size:14.5px; font-weight:800;
  box-shadow:0 12px 26px -12px rgba(31,120,116,.75);
  transition:transform .2s ease, box-shadow .2s ease;
}
.meeting-modal .mm-submit:hover{transform:translateY(-2px); box-shadow:0 16px 32px -12px rgba(31,120,116,.85);}
.meeting-modal .mm-submit svg{width:16px; height:16px;}
.meeting-modal .mm-submit[disabled]{opacity:.65; cursor:progress; transform:none;}

/* رسالة الاستلام */
.meeting-modal .mm-status{
  display:none; align-items:flex-start; gap:10px;
  margin-top:13px; padding:13px 15px; border-radius:8px;
  font-size:13px; font-weight:700; line-height:1.7;
  background:#e8f5ee; border:1px solid #9ccdb4; color:#1d5c3d;
}
.meeting-modal .mm-status::before{
  content:'✓'; flex:none; width:22px; height:22px; border-radius:50%;
  background:#1d7a4d; color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:13px;
}
.meeting-modal .mm-status.is-error{background:#fdecea; border-color:#e6a9a2; color:#a5312a;}
.meeting-modal .mm-status.is-error::before{content:'!'; background:#c0392b;}

.mm-meet-link{
  margin-top:14px; padding:14px; background:var(--mint-pale); border:1px solid var(--mint); border-radius:6px;
  font-size:13.5px; color:var(--navy); word-break:break-all;
}
.mm-meet-link a{color:var(--teal); font-weight:700;}

/* Membership cards */
.membership-cards-section{max-width:1180px; margin:0 auto; padding:60px 28px;}
.mc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:36px;}
.mc-wrap{display:flex; flex-direction:column;}
.mc-card{
  border-radius:16px; padding:30px; color:#fff; cursor:pointer; min-height:250px;
  display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
  box-shadow:0 20px 40px -18px rgba(5,34,62,.5);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.mc-card:hover{transform:translateY(-8px) scale(1.01); box-shadow:0 30px 60px -18px rgba(5,34,62,.6);}
.mc-card::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.08; pointer-events:none;
  background-image:radial-gradient(currentColor 1px, transparent 1.4px); background-size:16px 16px;
}
.mc-bg-photo{
  position:absolute; inset:0; z-index:0; background-image:var(--mc-bg-image); background-size:cover; background-position:center;
  opacity:.2;
}
.mc-shine{
  position:absolute; top:-60%; left:-20%; width:60%; height:220%; z-index:1; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.16), transparent 60%); transform:rotate(20deg);
}
.mc-navy{background:linear-gradient(135deg, var(--navy), var(--navy-soft));}
.mc-teal{background:linear-gradient(135deg, var(--teal), var(--teal-soft));}
.mc-mint{background:linear-gradient(135deg, #4f7d6c, #6fae9c); color:#fff;}
.mc-blue{background:linear-gradient(135deg, var(--blue), #2f5c8a);}
.mc-purple{background:linear-gradient(135deg, #4a3a6b, #2e2347);}
.mc-gold{background:linear-gradient(135deg, #8a6a2f, #5c451e);}
.mc-card-top{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; font-size:11px; opacity:.8; margin-bottom:26px;}
.mc-logo{font-family:var(--font-head); font-weight:900; font-size:17px; letter-spacing:normal;}
.mc-card-mid{position:relative; z-index:2;}
.mc-card-title{font-family:var(--font-head); font-size:23px; font-weight:900; margin-bottom:4px;}
.mc-card-sub{font-size:12.5px; opacity:.75; letter-spacing:.5px;}
.mc-gold-line{width:52px; height:2px; background:linear-gradient(90deg, #e8c887, transparent); margin:16px 0 20px;}
.mc-apply-btn{
  position:relative; z-index:2; align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.14); color:inherit; border:1px solid rgba(255,255,255,.35);
  padding:11px 20px; border-radius:30px; font-weight:700; font-size:13px; transition:background .25s ease, border-color .25s ease;
}
.mc-apply-btn svg{width:16px; height:16px;}
.mc-card:hover .mc-apply-btn{background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.6);}
.mc-terms-toggle{
  margin-top:10px; background:none; border:none; color:var(--teal); font-size:12.5px; font-weight:700;
  cursor:pointer; text-align:center; padding:6px 0; display:flex; align-items:center; justify-content:center; gap:4px; width:100%;
}
.mc-terms-toggle::after{content:'▾'; font-size:10px; transition:transform .2s ease;}
.mc-terms-toggle.open::after{transform:rotate(180deg);}
.mc-terms-panel{
  max-height:0; overflow:hidden; font-size:12.5px; color:#69707d; line-height:1.8; transition:max-height .3s ease, padding .3s ease;
  padding:0 4px; white-space:pre-line;
}
.mc-terms-panel.open{max-height:300px; padding:8px 4px;}
@media (max-width:900px){.mc-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.mc-grid{grid-template-columns:1fr;}}

/* مميزات العضويات — بطاقات قابلة للتحكم من الأدمن */
.mc-features-wrap{max-width:1180px; margin:70px auto 0;}
.mc-features-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:36px;}
.mc-feature-card{
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); padding:28px 22px; text-align:center;
  transition:transform .3s ease, box-shadow .3s ease;
}
.mc-feature-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.mc-feature-icon{
  width:52px; height:52px; margin:0 auto 16px; border-radius:50%; background:var(--mint-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
}
.mc-feature-icon svg{width:24px; height:24px;}
.mc-feature-title{font-family:var(--font-head); font-weight:800; font-size:15.5px; color:var(--navy); margin-bottom:8px;}
.mc-feature-desc{font-size:13px; color:#69707d; line-height:1.7;}
@media (max-width:900px){.mc-features-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.mc-features-grid{grid-template-columns:1fr;}}

/* Survey taking page — Google-Forms-like scale questions */
.survey-take-wrap{max-width:720px; margin:0 auto; padding:0 20px;}
.survey-take-header{text-align:center; margin-bottom:36px;}
.survey-take-header h2{margin:12px 0 10px;}
.survey-audience{margin-top:14px; display:inline-block; background:var(--mint-pale); color:var(--teal); font-weight:700; font-size:13px; padding:8px 16px; border-radius:20px;}
.survey-thanks{background:var(--mint-pale); border:1px solid var(--mint); color:#155c45; padding:22px; border-radius:8px; font-weight:700; text-align:center;}
.survey-form{background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); padding:34px;}
.survey-section-title{font-family:var(--font-head); font-size:18px; font-weight:900; color:var(--navy); margin:28px 0 18px; padding-bottom:10px; border-bottom:2px solid var(--teal);}
.survey-section-title:first-child{margin-top:0;}
.survey-basic-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.survey-basic-grid label{display:block; font-size:13px; font-weight:700; margin-bottom:6px; color:var(--navy);}
.survey-basic-grid input{width:100%; padding:12px; border:1px solid var(--line); border-radius:4px; font-family:inherit;}
.survey-question{padding:20px 0; border-bottom:1px solid var(--line);}
.survey-question > label{display:block; font-weight:700; color:var(--navy); margin-bottom:16px; font-size:15px;}
.survey-question textarea{width:100%; padding:12px; border:1px solid var(--line); border-radius:4px; font-family:inherit;}
.survey-scale{display:flex; justify-content:space-between; max-width:400px; margin:0 auto;}
.survey-scale-option{display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:#69707d;}
.survey-scale-option input{width:20px; height:20px; accent-color:var(--teal);}
.survey-scale-labels{display:flex; justify-content:space-between; max-width:400px; margin:8px auto 0; font-size:11.5px; color:#8a97a3;}
@media (max-width:600px){.survey-basic-grid{grid-template-columns:1fr;}}

/* Surveys cards — landing page listing published surveys */
.surveys-cards-section{max-width:1180px; margin:0 auto; padding:60px 28px;}
.sc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:36px;}
.sc-card{
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); padding:30px;
  display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease;
}
.sc-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.sc-icon{
  width:52px; height:52px; border-radius:50%; background:var(--mint-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.sc-icon svg{width:24px; height:24px;}
.sc-title{font-family:var(--font-head); font-weight:800; font-size:18px; color:var(--navy); margin-bottom:10px;}
.sc-goal{font-size:13.5px; color:#69707d; line-height:1.7; margin-bottom:14px;}
.sc-audience{font-size:12px; color:var(--teal); font-weight:700; margin-bottom:8px;}
.sc-meta{font-size:12px; color:#8a97a3; margin-bottom:18px;}
.sc-actions{margin-top:auto; display:flex; flex-direction:column; gap:10px;}
.sc-start-btn{text-align:center;}
.sc-results-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 16px;
  border:1.5px solid var(--teal); color:var(--teal); background:transparent; border-radius:6px;
  font-weight:700; font-size:13px; transition:background .2s ease, color .2s ease;
}
.sc-results-btn svg{width:15px; height:15px;}
.sc-results-btn:hover{background:var(--teal); color:#fff;}
@media (max-width:900px){.sc-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.sc-grid{grid-template-columns:1fr;}}

/* صفحة نتائج الاستبيان — رسوم بيانية شريطية */
.survey-results-wrap{max-width:760px; margin:0 auto; padding:0 20px;}
.sr-participants{margin-top:16px; font-size:14px; color:var(--navy); font-weight:700;}
.sr-question-card{background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); padding:26px 30px; margin-bottom:20px;}
.sr-question-title{font-family:var(--font-head); font-weight:800; font-size:15.5px; color:var(--navy); margin-bottom:14px; line-height:1.6;}
.sr-average{font-size:13px; color:var(--teal); font-weight:700; margin-bottom:16px;}
.sr-text-answered{font-size:13.5px; color:#69707d;}
.sr-bar-row{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.sr-bar-label{flex:0 0 16px; font-weight:800; color:var(--navy); font-size:13px; text-align:center;}
.sr-bar-track{flex:1; height:14px; background:var(--mint-pale); border-radius:8px; overflow:hidden;}
.sr-bar-fill{height:100%; background:linear-gradient(90deg, var(--teal), var(--blue)); border-radius:8px; transition:width .6s ease;}
.sr-bar-pct{flex:0 0 42px; font-size:12.5px; color:#69707d; font-weight:700;}
.sr-back-link{display:inline-block; margin-top:10px; color:var(--teal); font-weight:700; font-size:14px;}

/* معرض صور الخبر */
.news-gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px;}
.news-gallery-item{border-radius:12px; overflow:hidden; aspect-ratio:4/3;}
.news-gallery-item img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:700px){.news-gallery-grid{grid-template-columns:repeat(2,1fr);}}

/* فريق العمل كهيكل تنظيمي — org chart */
.org-chart-team-section{max-width:1180px; margin:0 auto; padding:60px 28px;}
.oct-chart{display:flex; flex-direction:column; align-items:center; margin-top:20px;}
.oct-tier{display:flex; flex-direction:column; align-items:center; width:100%;}
.oct-connector{width:1px; height:36px; background:repeating-linear-gradient(to bottom, var(--teal) 0 6px, transparent 6px 12px);}
.oct-row{display:flex; justify-content:center; gap:36px; flex-wrap:wrap; position:relative;}
.oct-tier-2 .oct-row::before, .oct-tier-3 .oct-row::before{
  content:""; position:absolute; top:-1px; left:12%; right:12%; height:1px;
  background:repeating-linear-gradient(to right, var(--teal) 0 6px, transparent 6px 12px);
}
.oct-row:has(.oct-card:only-child)::before{display:none;}
.oct-card{
  width:230px; text-align:center; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  padding:22px 18px 26px; margin-bottom:44px; position:relative; transition:transform .3s ease, box-shadow .3s ease;
}
.oct-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.oct-tier-1 .oct-card{width:250px; border-top:3px solid var(--navy);}
.oct-tier-2 .oct-card{border-top:3px solid var(--teal);}
.oct-tier-3 .oct-card{border-top:3px solid var(--mint);}
.oct-photo{
  width:100px; height:100px; border-radius:50%; overflow:hidden; margin:0 auto 16px; border:3px solid var(--mint-pale);
}
.oct-photo img{width:100%; height:100%; object-fit:cover;}
.oct-name{font-family:var(--font-head); font-weight:800; font-size:16.5px; color:var(--navy); margin-bottom:4px;}
.oct-role{font-size:13px; color:var(--teal); font-weight:700; margin-bottom:14px;}
.oct-tasks{text-align:right; font-size:12.5px; color:#69707d; line-height:1.9; padding-right:18px; margin:0;}
.oct-tasks li{margin-bottom:2px;}
@media (max-width:700px){
  .oct-row{flex-direction:column; align-items:center; gap:0;}
  .oct-row::before{display:none;}
  .oct-card{width:100%; max-width:280px;}
}

/* بطاقات الحسابات البنكية — خلفية داكنة + بطاقة بنكية فاخرة */
.bank-account-cards-section{background:var(--navy); padding:var(--sec-y) 28px;}
.bank-account-cards-section .section-head{max-width:1180px; margin:0 auto 40px;}
.bac-grid{max-width:900px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:50px; justify-items:center; align-items:start;}
.bac-wrap{display:flex; flex-direction:column; align-items:center; gap:16px; width:100%;}
.bac-card{
  width:100%; max-width:360px; height:220px; border-radius:16px; padding:18px 20px;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.45); box-sizing:border-box;
}
.bac-card::before{
  content:""; position:absolute; inset:0; opacity:.06; background-image:radial-gradient(#fff 1px, transparent 1.4px);
  background-size:16px 16px; pointer-events:none;
}
.bac-navy{background:linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 45%, var(--teal) 130%);}
.bac-blue{background:linear-gradient(135deg, #0d2b45 0%, var(--blue) 60%, var(--teal-soft) 140%);}
.bac-top{display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; gap:8px;}
.bac-wordmark{color:#fff; font-family:var(--font-head); font-weight:900; font-size:15px; flex:0 0 auto;}
.bac-chip{width:30px; height:22px; border-radius:4px; background:linear-gradient(135deg, #e8c877, #b8912f); box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); flex:0 0 auto;}
.bac-card-title{
  position:relative; z-index:1; flex:1; text-align:center; color:rgba(255,255,255,.75); font-size:9.5px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.2px; min-width:0;
}
.bac-holder-top{
  position:relative; z-index:1; color:#fff; font-size:12.5px; font-weight:800; text-align:center; margin-top:10px;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
}
.bac-body{position:relative; z-index:1; display:flex; flex-direction:column; gap:7px; margin-top:12px; flex:1; justify-content:center; min-width:0;}
.bac-row{display:flex; flex-direction:column; gap:1px; min-width:0;}
.bac-label{font-size:9px; color:rgba(255,255,255,.55); font-weight:600;}
.bac-value{font-size:12px; color:#fff; font-weight:800; font-family:var(--font-head); overflow-wrap:break-word; word-break:break-all; line-height:1.4;}
.bac-mono{font-family:'Roboto', monospace; letter-spacing:.3px; font-size:11px;}
.bac-empty{align-items:center; justify-content:center; text-align:center;}
.bac-empty p{color:rgba(255,255,255,.6); font-size:12px; line-height:1.7; margin:0;}
.bac-download-btn{
  display:inline-flex; align-items:center; gap:8px; padding:9px 20px; border:1.5px solid var(--mint);
  color:var(--mint); background:transparent; border-radius:6px; font-weight:700; font-size:13px;
  transition:background .2s ease, color .2s ease;
}
.bac-download-btn svg{width:15px; height:15px;}
.bac-download-btn:hover{background:var(--mint); color:var(--navy);}
@media (max-width:800px){.bac-grid{grid-template-columns:1fr;}}

/* بروفايل شخصية قيادية — تصميم على غرار Marina Smith */
.exec-profile-section{max-width:1100px; margin:0 auto; padding:60px 28px; display:grid; grid-template-columns:340px 1fr; gap:50px;}
.ep-photo{width:100%; aspect-ratio:1/1.1; overflow:hidden; border-radius:6px;}
.ep-photo img{width:100%; height:100%; object-fit:cover;}
.ep-info h2{font-family:var(--font-head); font-size:28px; font-weight:900; color:var(--navy); margin:8px 0 16px;}
.ep-quote{color:var(--teal); font-weight:700; font-size:16px; line-height:1.7; margin-bottom:16px;}
.ep-info .prose{color:#69707d; font-size:14.5px; line-height:1.9; margin-bottom:20px;}
.ep-stats{display:flex; flex-direction:column; gap:8px; margin-bottom:22px;}
.ep-stat{font-size:14px; color:var(--navy);}
.ep-stat-label{color:#8a97a3;}
.ep-bars{display:flex; flex-direction:column; gap:16px; margin-bottom:22px;}
.ep-bar-head{display:flex; justify-content:space-between; font-size:13px; font-weight:700; color:var(--navy); margin-bottom:6px;}
.ep-bar-track{height:8px; background:var(--mint-pale); border-radius:6px; overflow:hidden;}
.ep-bar-fill{height:100%; background:linear-gradient(90deg, var(--teal), var(--blue)); border-radius:6px;}
.ep-socials{display:flex; gap:10px;}
.ep-social{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--navy); transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.ep-social svg{width:16px; height:16px;}
.ep-social:hover{background:var(--teal); border-color:var(--teal); color:#fff;}
@media (max-width:800px){
  .exec-profile-section{grid-template-columns:1fr;}
  .ep-photo{max-width:280px; margin:0 auto;}
}

/* ============================================================
   «سنة رواد» — الإيقاع الموسمي الهجري لصناعة الفعاليات
   الشريط يشفّر معلومة حقيقية: ارتفاع العمود = كثافة الطلب في
   ذلك الشهر، والمؤشر الرملي = موضع اليوم من السنة.
   ============================================================ */
.season-year{
  --sy-peak:   var(--teal);
  --sy-active: #7cc0b3;
  --sy-base:   #d7e3e1;
  --sy-sand:   #B8874A;   /* النغمة الدافئة الوحيدة: تُحجز لتعليم «الآن» */
  /* الفوتر بنفس درجة --navy تماماً، فلو تركنا القسم عليها لالتحم الاثنان
     في كتلة داكنة واحدة بلا حد. نرفع درجة القسم قليلاً ليقرأ كلوحة مستقلة
     تعلو الفوتر الأغمق، ونفصل الحد بخيط رفيع ومساحة تنفّس أسفله. */
  background:#07294A;
  border-bottom:1px solid rgba(179,222,202,.16);
  color:#fff;
  padding:var(--sec-y) 28px calc(var(--sec-y) + 10px);
}
.sy-inner{max-width:1180px; margin:0 auto;}

.sy-head{display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap; margin-bottom:38px;}
.sy-head-text{max-width:620px;}
.season-year .eyebrow{
  font-family:var(--font-head);
  color:var(--mint); background:rgba(179,222,202,.10);
  border:1px solid rgba(179,222,202,.22);
}
.season-year h2{
  font-family:var(--font-head);
  font-size:clamp(21px,2.5vw,31px); font-weight:600; line-height:1.5;
  color:#fff; margin-top:12px; letter-spacing:.2px;
}
.sy-lede{margin-top:12px; font-size:14px; line-height:1.9; color:rgba(255,255,255,.72);}
.sy-lede p{margin:0;}

/* بطاقة «اليوم» */
.sy-now{
  border:1px solid rgba(255,255,255,.16);
  border-inline-start:3px solid var(--sy-sand);
  padding:16px 22px; min-width:190px; background:rgba(255,255,255,.04);
}
.sy-now-year{font-family:var(--font-head); font-size:27px; font-weight:600; color:var(--sy-sand); line-height:1.2;}
.sy-now-year span{font-size:14px; opacity:.75;}
.sy-now-date{font-size:15px; font-weight:700; margin-top:2px;}
.sy-now-label{font-size:12px; margin-top:8px; color:rgba(255,255,255,.66);}

/* الشريط */
.sy-band{
  list-style:none; margin:0; padding:0 0 4px;
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px;
}
.sy-m{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 4px 26px; min-width:0;
}
/* عمود الكثافة */
.sy-bar{display:block; width:100%; height:74px; display:flex; align-items:flex-end;}
.sy-bar i{display:block; position:relative; overflow:hidden; width:100%; background:var(--sy-base);}
.sy-lv-base   .sy-bar i{height:26%; background:var(--sy-base);}
.sy-lv-active .sy-bar i{height:58%; background:var(--sy-active);}
.sy-lv-peak   .sy-bar i{height:100%; background:var(--sy-peak);}

/* ---- حركة الأعمدة ----
   ثلاث حركات متمايزة: نموّ متتابع عند الظهور، وموجة ضوء تعبر السنة
   دورياً، ونبضة حول الشهر الحالي. كلها transform/opacity/box-shadow،
   فلا إعادة تخطيط ولا مستمع تمرير. */
@media (prefers-reduced-motion: no-preference){
  /* 1) النمو: كل عمود ينهض من قاعدته بعد سابقه بـ55ms، فتُقرأ السنة
        كتتابع زمني من مُحرَّم إلى ذي الحِجّة لا كظهور دفعة واحدة */
  .sy-bar i{
    transform:scaleY(0); transform-origin:bottom;
    transition:transform .85s cubic-bezier(.16,1,.3,1), filter .3s ease;
    transition-delay:calc(var(--i, 0) * 55ms + 120ms);
  }
  [data-reveal].in-view .sy-bar i{transform:scaleY(1);}

  /* 2) موجة الضوء: ومضة خفيفة تمرّ على الأعمدة بالترتيب كل 9 ثوانٍ */
  .sy-bar i::after{
    content:''; position:absolute; inset:0;
    background:rgba(255,255,255,.3); opacity:0;
    animation:sy-wave 9s ease-in-out infinite;
    animation-delay:calc(var(--i, 0) * 130ms);
  }
  @keyframes sy-wave{0%, 88%, 100%{opacity:0;} 93%{opacity:.24;}}

  /* 3) نبضة الشهر الحالي — تُعرّف على العنصر الأب لأن الابن يحمل
        تحويلاً خاصاً بالنمو، وجمع الاثنين على عنصر واحد يُلغي أحدهما */
  [data-reveal].in-view .sy-m.is-now .sy-bar{animation:sy-now-pulse 3.4s ease-out 1.4s infinite;}
  @keyframes sy-now-pulse{
    0%{filter:drop-shadow(0 0 0 rgba(184,135,74,.55));}
    60%{filter:drop-shadow(0 0 9px rgba(184,135,74,.5));}
    100%{filter:drop-shadow(0 0 0 rgba(184,135,74,0));}
  }

  /* 4) التفاعل: العمود يستطيل قليلاً ويضيء، واسم الشهر يتضح */
  [data-reveal].in-view .sy-m:hover .sy-bar i{transform:scaleY(1.07); filter:brightness(1.2);}
  .sy-m:hover .sy-m-name{color:#fff;}
  .sy-m:hover .sy-m-label{color:rgba(255,255,255,.8);}
  .sy-m .sy-m-name, .sy-m .sy-m-label{transition:color .25s ease;}

  /* 5) خط «الآن» يُرسم صعوداً بعد استقرار الأعمدة.
        نرفع النوعية بـ.sy-band لأن قاعدة ‎.sy-pin الأساسية تأتي لاحقاً
        في الملف وتُعيد الارتفاع إلى 12px لو تساوت النوعيتان. */
  .sy-band .sy-pin{height:0; transition:height .55s cubic-bezier(.16,1,.3,1) 1s;}
  .sy-band .sy-pin::after{opacity:0; transition:opacity .5s ease 1.35s;}
  [data-reveal].in-view .sy-pin{height:12px;}
  [data-reveal].in-view .sy-pin::after{opacity:1;}
}

.sy-m-name{
  font-family:var(--font-head);
  font-size:13px; font-weight:500; margin-top:12px; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.sy-m-label{font-size:11px; line-height:1.55; margin-top:4px; color:rgba(255,255,255,.56);}
.sy-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* الشهر الحالي */
.sy-m.is-now .sy-bar i{background:var(--sy-sand);}
.sy-m.is-now .sy-m-name{color:var(--sy-sand); font-weight:700;}
.sy-m.is-now .sy-m-label{color:rgba(255,255,255,.82);}
/* خط «الآن» داخل الشهر، موضعه = نسبة اليوم من الشهر */
.sy-pin{
  position:absolute; bottom:16px; inset-inline-start:var(--sy-p,50%);
  width:2px; height:12px; background:var(--sy-sand); transform:translateX(50%);
}
.sy-pin::after{
  content:"الآن"; position:absolute; bottom:-15px; inset-inline-start:50%; transform:translateX(50%);
  font-size:9.5px; font-weight:700; color:var(--sy-sand); white-space:nowrap;
}

/* التذييل */
.sy-foot{
  display:flex; justify-content:space-between; align-items:center; gap:22px; flex-wrap:wrap;
  margin-top:30px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12);
}
.sy-legend{list-style:none; margin:0; padding:0; display:flex; gap:20px; flex-wrap:wrap;}
.sy-legend li{display:flex; align-items:center; gap:7px; font-size:11.5px; color:rgba(255,255,255,.6);}
.sy-legend i{width:14px; height:8px; display:inline-block;}
.sy-legend .sy-lv-peak{background:var(--sy-peak);}
.sy-legend .sy-lv-active{background:var(--sy-active);}
.sy-legend .sy-lv-base{background:var(--sy-base);}
.sy-next{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; font-size:12.5px; color:rgba(255,255,255,.6); margin:0;}
.sy-next strong{font-family:var(--font-head); font-size:16px; font-weight:600; color:#fff;}
.sy-next span{color:rgba(255,255,255,.5);}
.sy-next em{font-style:normal; color:var(--sy-sand); font-weight:700;}

/* لوحي: تمرير أفقي مع الحفاظ على استعارة «السنة كخط واحد» */
@media (max-width:900px){
  .season-year{padding:48px 0 44px;}
  .sy-head, .sy-foot{padding-inline:22px;}
  .sy-band{
    grid-template-columns:repeat(12,104px);
    overflow-x:auto; padding-inline:22px 22px; scroll-snap-type:x proximity;
    scrollbar-width:thin;
  }
  .sy-m{scroll-snap-align:center;}
  .sy-now{min-width:0; flex:1;}
}
@media (max-width:520px){
  .sy-band{grid-template-columns:repeat(12,92px);}
  .sy-bar{height:62px;}
  .season-year h2{font-size:20px;}
}

@media (prefers-reduced-motion:reduce){
  .sy-bar i{transition:none;}
}

/* ---- مؤشرات بأيقونات: دخول متدرّج + عدّاد أرقام ---- */
/* الحاوية [data-reveal] تتكفّل بالتلاشي؛ البطاقات تتكفّل بالتتابع فقط،
   تفادياً لتلاشٍ مزدوج يجعل الحركة ضبابية — ولئلا يختفي المحتوى لو تعطّل شيء. */
.icon-stats-wrap .is-item{
  position:relative;
  transform:translateY(16px);
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--is-i,0) * 85ms);
}
.icon-stats-wrap.in-view .is-item{transform:none;}

.icon-stats-wrap .is-value{
  font-size:clamp(32px,3.6vw,44px); line-height:1.1;
  /* أرقام ثابتة العرض حتى لا يرتجف العدّاد أثناء العد */
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
.icon-stats-wrap .is-label{margin-top:2px;}

/* خط أفقي يُرسم تحت الرقم عند الظهور */
.icon-stats-wrap .is-value::after{
  content:""; display:block; height:2px; width:0; margin:14px auto 0;
  background:var(--teal); opacity:.85;
  transition:width .8s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--is-i,0) * 90ms + 420ms);
}
.icon-stats-wrap.in-view .is-value::after{width:34px;}

.icon-stats-wrap .is-icon{
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease;
  transition-delay:calc(var(--is-i,0) * 90ms + 120ms);
  transform:scale(.82);
}
.icon-stats-wrap.in-view .is-icon{transform:scale(1);}

.icon-stats-wrap .is-item::before{
  content:""; position:absolute; inset:0; background:var(--mint-pale);
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.icon-stats-wrap .is-item:hover::before{opacity:.45;}
.icon-stats-wrap .is-item:hover .is-icon{background:var(--teal); color:#fff; transition-delay:0s;}
.icon-stats-wrap .is-item > *{position:relative; z-index:1;}

@media (prefers-reduced-motion:reduce){
  .icon-stats-wrap .is-item,
  .icon-stats-wrap .is-icon,
  .icon-stats-wrap .is-value::after{transition:none; width:34px;}
  .icon-stats-wrap .is-item{transform:none;}
  .icon-stats-wrap .is-icon{transform:none;}
}

/* ============================================================
   الهيرو — تسلسل دخول منظّم + حركة كِن بيرنز البطيئة للصورة
   الفكرة: لحظة واحدة مرتّبة عند فتح الصفحة، لا مؤثرات متفرقة.
   ============================================================ */

/* الصورة تتنفّس ببطء أثناء عرضها، فتبدو الخلفية حيّة لا جامدة */
.hero-slide{transform:scale(1.06); transition:opacity 1.8s ease, transform 8s ease-out;}
.hero-slide.active{opacity:1; transform:scale(1);}

/* تسلسل الدخول: السطر التمهيدي ثم العنوان ثم النص ثم الأزرار */
.section-hero .hero-tagline,
.section-hero h1,
.section-hero > .section-hero-inner p,
.section-hero .prose,
.section-hero .hero-cta-row{
  opacity:0; transform:translateY(22px);
  animation:heroIn .95s cubic-bezier(.22,.61,.36,1) forwards;
}
.section-hero .hero-tagline{animation-delay:.15s;}
.section-hero h1{animation-delay:.30s;}
.section-hero > .section-hero-inner p{animation-delay:.46s;}
.section-hero .prose{animation-delay:.54s;}
.section-hero .hero-cta-row{animation-delay:.66s;}

@keyframes heroIn{to{opacity:1; transform:none;}}

/* الدائرة المرسومة حول الكلمة المميّزة تُرسم بعد استقرار العنوان */
.hero-circled::after{
  clip-path:inset(0 0 0 100%);
  animation:heroCircle 1s cubic-bezier(.22,.61,.36,1) 1.15s forwards;
}
@keyframes heroCircle{to{clip-path:inset(0 0 0 0);}}

/* عناصر التحكم تظهر أخيراً وبهدوء */
.hero-arrows, .hero-dots, .hero-scroll-cue{
  opacity:0; animation:heroFade .8s ease 1.35s forwards;
}
@keyframes heroFade{to{opacity:1;}}

/* مؤشر التمرير ينبض نبضة خفيفة تدعو للنزول */
.hero-scroll-cue{animation:heroFade .8s ease 1.35s forwards, heroCue 2.4s ease-in-out 2.2s infinite;}
@keyframes heroCue{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(7px);}
}

@media (prefers-reduced-motion:reduce){
  .hero-slide{transform:none; transition:opacity .4s ease;}
  .hero-slide.active{transform:none;}
  .section-hero .hero-tagline,
  .section-hero h1,
  .section-hero > .section-hero-inner p,
  .section-hero .prose,
  .section-hero .hero-cta-row,
  .hero-arrows, .hero-dots, .hero-scroll-cue{
    animation:none; opacity:1; transform:none;
  }
  .hero-circled::after{animation:none; clip-path:none;}
}

/* ============================================================
   بطاقات الخدمات (cards_hover) — إصلاح وتحسين الحركة
   المشكلة: موضع الشريط كان translateY(calc(100% - 84px)) و«100%»
   هنا ارتفاع الشريط نفسه، وهو تابع لطول النص. فكل بطاقة كانت ترتاح
   على ارتفاع مختلف وتقطع مسافة مختلفة عند التحرير — فبدت غير متسقة.
   الحل: توحيد ارتفاع النص (٣ أسطر) ليصبح المقدار ثابتاً لكل البطاقات.
   ============================================================ */

/* توحيد طول الوصف => ارتفاع شريط ثابت => حركة متطابقة في كل البطاقات */
.hc-desc{
  margin-top:12px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; min-height:calc(3 * 1.85em);
}

/* منحنى وزمن موحّد لكل الحركات داخل البطاقة حتى تتحرك ككتلة واحدة */
.hover-card{ --hc-ease:cubic-bezier(.22,1,.36,1); }
.hc-bar{
  transition:transform .62s var(--hc-ease), box-shadow .62s var(--hc-ease);
  will-change:transform;
}
.hover-card:hover .hc-bar,
.hover-card:focus-within .hc-bar{
  transform:translateY(0);
  transition-duration:.62s;
  box-shadow:0 -18px 40px -18px rgba(5,34,62,.28);
}
.hc-photo img{transition:transform .9s var(--hc-ease);}
.hover-card:hover .hc-photo img,
.hover-card:focus-within .hc-photo img{transform:scale(1.06);}
.hc-icon{transition:transform .62s var(--hc-ease), background .3s ease;}
.hover-card:hover .hc-icon,
.hover-card:focus-within .hc-icon{transform:translateY(-5px);}

/* الدعوة للإجراء تتقدّم قليلاً مع السهم بدل أن تظهر فجأة */
.hc-cta{transition:background .35s ease, color .35s ease;}
.hc-cta svg{transition:transform .45s var(--hc-ease);}
.hover-card:hover .hc-cta,
.hover-card:focus-within .hc-cta{background:var(--mint-pale);}
.hover-card:hover .hc-cta svg,
.hover-card:focus-within .hc-cta svg{transform:translateX(-6px);}

/* إتاحة الوصول: البطاقة رابط، فيجب أن ينكشف محتواها بلوحة المفاتيح أيضاً */
.hover-card:focus-visible,
.hover-card a:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}

/* ظهور القسم: البطاقات تتتابع بدل أن تظهر دفعة واحدة.
   الشفافية تتركها للحاوية [data-reveal] تفادياً لتلاشٍ مزدوج. */
.hover-cards-grid > *{
  transform:translateY(20px);
  transition:transform .7s var(--hc-ease, cubic-bezier(.22,1,.36,1));
}
.hover-cards-grid > *:nth-child(1){transition-delay:.00s;}
.hover-cards-grid > *:nth-child(2){transition-delay:.10s;}
.hover-cards-grid > *:nth-child(3){transition-delay:.20s;}
.hover-cards-grid > *:nth-child(4){transition-delay:.30s;}
.hover-cards-grid > *:nth-child(5){transition-delay:.40s;}
.hover-cards-grid > *:nth-child(6){transition-delay:.50s;}
[data-reveal].in-view .hover-cards-grid > *{transform:none;}

@media (prefers-reduced-motion:reduce){
  .hover-cards-grid > *{transform:none; transition:none;}
  .hc-bar, .hc-photo img, .hc-icon, .hc-cta svg{transition:none;}
}

/* ============================================================
   إعادة تصميم بطاقات الخدمات (cards_hover) — نسخة ثابتة
   ------------------------------------------------------------
   النمط السابق كان يخفي الوصف والزر خلف :hover ويكشفهما بلوح
   أبيض ينزلق فوق الصورة. ثلاث مشاكل: اللوح يقفز فيبدو اهتزازاً،
   البطاقات المتجاورة تظهر بحالات مختلفة، وعلى اللمس لا يوجد
   hover فلا يرى مستخدم الجوال الوصف ولا الزر.
   الحل: تدفّق طبيعي — الصورة أعلى والمحتوى أسفلها، كل شيء ظاهر
   دائماً، ولا يتحرك أي عنصر من موضعه. التفاعل يضيف عمقاً فقط.
   ============================================================ */

.hover-cards-grid{align-items:stretch;}

.hover-card{
  --hc-ease:cubic-bezier(.22,1,.36,1);
  display:flex; height:100%;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(5,34,62,.04);
  text-decoration:none; color:inherit;
  transition:transform .45s var(--hc-ease), box-shadow .45s var(--hc-ease), border-color .45s var(--hc-ease);
}
.hover-card:hover,
.hover-card:focus-within{
  transform:translateY(-5px);
  box-shadow:0 22px 44px -22px rgba(5,34,62,.28);
  border-color:rgba(31,120,116,.32);
}

/* الحاوية صارت عموداً عادياً بدل إطار قصّ بنسبة ثابتة */
.hc-clip{
  position:static; overflow:visible; aspect-ratio:auto; background:transparent;
  display:flex; flex-direction:column; width:100%;
}

/* الصورة: نسبة ثابتة، وهي وحدها ما يُقصّ */
.hc-photo{
  position:relative; inset:auto; width:100%; aspect-ratio:16/10;
  overflow:hidden; flex:none; background:var(--paper-tint);
}
.hc-photo img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--hc-ease);}
.hover-card:hover .hc-photo img,
.hover-card:focus-within .hc-photo img{transform:scale(1.05);}

/* المحتوى: في التدفّق الطبيعي، ثابت، لا ينزلق */
.hc-bar{
  position:relative; inset:auto;
  transform:none;
  background:#fff; box-shadow:none;
  padding:30px 22px 22px;
  display:flex; flex-direction:column; flex:1 1 auto;
  transition:none;
}
.hover-card:hover .hc-bar,
.hover-card:focus-within .hc-bar{transform:none; box-shadow:none;}

/* خيط لوني ينمو على حدّ المحتوى العلوي عند التفاعل */
.hc-bar::before{
  content:""; position:absolute; top:-1px; inset-inline-end:0;
  height:2px; width:0; background:var(--teal);
  transition:width .55s var(--hc-ease);
}
.hover-card:hover .hc-bar::before,
.hover-card:focus-within .hc-bar::before{width:100%;}

/* الأيقونة تجلس على خط التقاء الصورة بالمحتوى */
.hc-icon{
  position:absolute; top:-26px; inset-inline-end:20px; inset-inline-start:auto;
  width:52px; height:52px; z-index:3;
  background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px -10px rgba(31,120,116,.55);
  transition:transform .45s var(--hc-ease), background .35s ease;
}
.hover-card:hover .hc-icon,
.hover-card:focus-within .hc-icon{transform:translateY(-3px); background:var(--navy);}

.hc-title{font-family:var(--font-head); font-size:16px; font-weight:800; color:var(--navy); line-height:1.45;}
.hc-desc{
  margin-top:10px; font-size:13.5px; color:#5b6b7a; line-height:1.8;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* الزر يلتصق بأسفل البطاقة فتتساوى كل البطاقات مهما اختلف النص */
.hc-cta{
  margin-top:auto; padding:16px 0 0;
  border-top:1px solid var(--line);   /* فاصل في التدفّق الطبيعي بدل تموضع مطلق هشّ */
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-weight:700; font-size:13px; color:var(--navy); background:transparent;
}
.hc-cta svg{width:15px; height:15px; color:var(--teal); flex-shrink:0; transition:transform .45s var(--hc-ease);}
.hover-card:hover .hc-cta svg,
.hover-card:focus-within .hc-cta svg{transform:translateX(-6px);}
.hover-card:hover .hc-cta,
.hover-card:focus-within .hc-cta{color:var(--teal);}

.hover-card:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}

/* الظهور: ارتفاع خفيف متتابع، والشفافية تتركها للحاوية [data-reveal] */
.hover-cards-grid > *{
  transform:translateY(18px);
  transition:transform .65s var(--hc-ease, cubic-bezier(.22,1,.36,1)),
             box-shadow .45s var(--hc-ease, cubic-bezier(.22,1,.36,1)),
             border-color .45s ease;
}
[data-reveal].in-view .hover-cards-grid > *{transform:none;}
[data-reveal].in-view .hover-cards-grid > *:hover,
[data-reveal].in-view .hover-cards-grid > *:focus-within{transform:translateY(-5px);}

@media (prefers-reduced-motion:reduce){
  .hover-cards-grid > *, .hover-card, .hc-photo img, .hc-icon, .hc-cta svg, .hc-bar::before{
    transition:none !important; transform:none !important;
  }
  .hc-bar::before{width:0;}
}

/* ============================================================
   صفحة المقال — تنسيق قراءة طويلة
   المبدأ: عمود نص ضيّق (~٦٥ حرفاً) لأن السطر الطويل يُتعب العين،
   وتدرّج طباعي يفصل العناوين عن المتن، ومسافة أسطر مريحة للعربية.
   ============================================================ */

.article{max-width:1180px; margin:0 auto; padding:0 28px;}

/* --- الترويسة --- */
.article-head{max-width:720px; margin:0 auto; padding:56px 0 0; text-align:center;}
.article-kind{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.4px;
  color:var(--teal); background:var(--mint-pale); border:1px solid rgba(31,120,116,.18);
  padding:6px 16px; border-radius:30px; text-decoration:none;
  transition:background .25s ease, color .25s ease;
}
.article-kind:hover{background:var(--teal); color:#fff;}
.article-title{
  font-family:var(--font-head); font-weight:900;
  font-size:clamp(26px,4vw,44px); line-height:1.35; color:var(--navy);
  margin:18px 0 0; text-wrap:balance;
}
.article-standfirst{
  font-size:clamp(15px,1.7vw,18px); line-height:1.85; color:#5b6b7a;
  margin:18px auto 0; max-width:620px;
}
.article-meta{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  margin-top:22px; padding-top:20px; border-top:1px solid var(--line);
  font-size:13px; color:#8496a5;
}
.article-meta .am-author{font-weight:700; color:var(--navy);}

/* --- صورة المقال --- */
.article-figure{margin:38px auto 0; max-width:960px;}
.article-figure img{width:100%; height:auto; display:block; border-radius:4px;}

/* --- المتن --- */
.article-body{
  max-width:680px; margin:0 auto; padding:40px 0 0;
  font-size:17px; line-height:2.05; color:#33475a;
  /* منع الكلمات الطويلة من كسر التخطيط */
  overflow-wrap:break-word;
}
.article-body > *:first-child{margin-top:0;}
.article-body p{margin:0 0 22px;}

/* الفقرة الاستهلالية أبرز قليلاً */
.article-body > p:first-of-type{font-size:18.5px; color:#2b3d4f;}

.article-body h2{
  font-family:var(--font-head); font-size:clamp(20px,2.4vw,26px); font-weight:800;
  color:var(--navy); line-height:1.5; margin:44px 0 14px;
}
.article-body h3{
  font-family:var(--font-head); font-size:clamp(17px,2vw,20px); font-weight:800;
  color:var(--navy); line-height:1.55; margin:34px 0 12px;
}
/* خط قصير يسبق العنوان الفرعي بدل ترقيم مصطنع */
.article-body h2::before{
  content:""; display:block; width:34px; height:3px; background:var(--teal);
  margin-bottom:14px;
}

.article-body ul, .article-body ol{margin:0 0 22px; padding-inline-start:22px;}
.article-body li{margin-bottom:10px;}
.article-body ul li::marker{color:var(--teal);}
.article-body ol li::marker{color:var(--teal); font-weight:700;}

.article-body strong{color:var(--navy); font-weight:800;}
.article-body a{color:var(--teal); text-decoration:underline; text-underline-offset:3px;}
.article-body a:hover{color:var(--navy);}

.article-body blockquote{
  margin:30px 0; padding:20px 24px;
  background:var(--paper-tint); border-inline-start:3px solid var(--teal);
  font-size:18px; line-height:1.9; color:var(--navy);
}
.article-body blockquote p:last-child{margin-bottom:0;}

.article-body hr{border:none; border-top:1px solid var(--line); margin:38px 0;}
.article-body img{max-width:100%; height:auto; display:block; margin:26px auto; border-radius:4px;}
.article-body table{width:100%; border-collapse:collapse; margin:26px 0; font-size:15px;}
.article-body th, .article-body td{border:1px solid var(--line); padding:10px 12px; text-align:start;}
.article-body th{background:var(--paper-tint); font-weight:800; color:var(--navy);}

/* --- معرض الصور --- */
.article-gallery{
  max-width:960px; margin:36px auto 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;
}
.article-gallery figure{margin:0;}
.article-gallery img{width:100%; height:100%; object-fit:cover; display:block; border-radius:4px;}

/* --- تذييل المقال --- */
.article-foot{max-width:680px; margin:44px auto 0; padding:24px 0 60px; border-top:1px solid var(--line);}
.article-back{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:700; color:var(--teal); text-decoration:none;
}
.article-back svg{width:16px; height:16px; transition:transform .35s cubic-bezier(.22,1,.36,1);}
.article-back:hover svg{transform:translateX(-5px);}

/* --- مقالات ذات صلة --- */
.article-related{background:var(--paper-tint); padding:56px 28px 64px; border-top:1px solid var(--line);}
.ar-inner{max-width:1180px; margin:0 auto;}
.ar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.ar-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  text-decoration:none; color:inherit; overflow:hidden;
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1);
}
.ar-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -22px rgba(5,34,62,.26);}
.ar-photo{aspect-ratio:16/10; overflow:hidden; background:var(--mint-pale); position:relative;}
.ar-photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.22,1,.36,1);}
.ar-card:hover .ar-photo img{transform:scale(1.05);}
.ar-photo-fallback{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--teal); opacity:.35;}
.ar-photo-fallback svg{width:38px; height:38px;}
.ar-body{padding:18px 18px 20px; display:flex; flex-direction:column; flex:1;}
.ar-body h3{font-family:var(--font-head); font-size:15px; font-weight:800; color:var(--navy); line-height:1.55;}
.ar-body p{font-size:13px; color:#6b7a88; line-height:1.8; margin-top:8px;}
.ar-date{margin-top:auto; padding-top:14px; font-size:11.5px; color:#9aa8b4;}

@media (max-width:900px){
  .ar-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .article{padding:0 20px;}
  .article-head{padding-top:34px;}
  .article-body{font-size:16px; line-height:1.95; padding-top:30px;}
  .article-body > p:first-of-type{font-size:17px;}
  .ar-grid{grid-template-columns:1fr;}
  .article-related{padding:44px 20px 50px;}
}

@media (prefers-reduced-motion:reduce){
  .ar-card, .ar-photo img, .article-back svg{transition:none;}
}
/* ---- مبدّل اللغة (عربي → إنجليزي) ---- */
.topbar-links .topbar-lang{
  padding:3px 12px; border:1px solid rgba(255,255,255,.34); border-radius:999px;
  font-size:12.5px; letter-spacing:.04em;
}
.topbar-links .topbar-lang:hover{
  background:rgba(255,255,255,.14); text-decoration:none; opacity:1;
}
.mp-lang{
  display:block; margin-top:10px; padding:12px; border-radius:12px;
  border:1px dashed #cfd8e4; text-align:center;
  font-weight:800; font-size:14px; color:#0d2440;
}
.mp-lang:hover{border-style:solid; border-color:#c9a227; background:#fffdf5;}

/* ---- زرّ الحساب في الترويسة يصير زرّ خروج ----
   كان الخروج في الشريط العلوي باسم «حساب الزائر» — تسمية داخلية لا
   تعني من سجّل باسمه الشخصي. صار الاسم نفسه هو الزرّ.

   النموذج حاوية flex صريحة لا display:contents: الأخيرة تُخرج النموذج
   من التخطيط فيرث الزرّ أنماط المتصفّح الافتراضية (إطار وارتفاع ذاتي)
   فيظهر مشوّهاً بجانب الزرّ المجاور. */
.nav-cta-group .nav-cta-form{display:flex; align-items:stretch; flex-shrink:0; margin:0;}
.nav-cta-group button.nav-cta{
  -webkit-appearance:none; appearance:none;
  border:0; margin:0; cursor:pointer; align-self:stretch;
  font-family:var(--font-head); font-weight:700; font-size:14px;
  line-height:normal; height:auto; padding:0 26px;
}
.nav-cta-group button.nav-cta:focus-visible{outline:2px solid #fff; outline-offset:-4px;}
.nav-cta-out{width:15px; height:15px; opacity:.55; transition:opacity .2s ease;}
button.nav-cta:hover .nav-cta-out{opacity:1;}