/* ============================================================
   الهيكل التنظيمي والمالي — أنماط خاصة بهذه الصفحة وحدها.
   المُحدِّدات كلها مسبوقة بـog- لتجنّب أي تعارض مع site.css.
   ============================================================ */

.og-open, .og-chart-sec, .og-fin, .og-extra, .og-docs{ --og-pad: clamp(50px, 5.2vw, 80px); }
/* ‎.og-open-inner كان خارج هذه القاعدة فبقي بلا حدّ لعرضه، فيلتصق النص
   بحافة الشاشة على الشاشات العريضة. */
.og-inner,
.og-open-inner{max-width:1180px; margin:0 auto;}

.og-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-size:11.5px; font-weight:700;
  color:var(--teal); background:var(--mint-pale);
  border:1px solid rgba(31,120,116,.16); padding:6px 15px; border-radius:999px;
}
.og-eyebrow::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--teal);}
.og-eyebrow-light{
  color:var(--mint); background:rgba(179,222,202,.10); border-color:rgba(179,222,202,.24);
}
.og-eyebrow-light::before{background:var(--mint);}

/* ---------- الافتتاحية ---------- */
.og-open{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(155deg, #04203A 0%, var(--navy) 52%, #0B3A5E 100%);
  color:#fff; padding:clamp(92px,9.5vw,140px) 28px clamp(52px,5.5vw,74px);
}
/* شبكة رفيعة توحي بالتنظيم والبناء — مناسبة لموضوع الصفحة */
.og-open-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(64% 82% at 84% 6%, rgba(44,148,142,.28), transparent 60%),
    radial-gradient(46% 62% at 6% 98%, rgba(65,127,193,.18), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.035) 0 1px, transparent 1px 56px);
}
.og-kicker{
  display:inline-block; font-family:var(--font-head); font-size:12.5px; font-weight:700;
  color:var(--mint); background:rgba(179,222,202,.10);
  border:1px solid rgba(179,222,202,.22); padding:7px 16px; border-radius:999px; margin-bottom:20px;
}
/* المحتوى موسّط داخل عمود مقيّد العرض */
.og-open-inner{text-align:center;}
.og-open h1{
  font-family:var(--font-head); font-weight:800; color:#fff;
  font-size:clamp(27px,3.9vw,48px); line-height:1.25; letter-spacing:-.5px;
  max-width:18ch; margin-inline:auto; text-wrap:balance;
}
.og-open-lede{
  margin:18px auto 0; max-width:64ch;
  font-size:clamp(14.5px,1.3vw,16.5px); line-height:1.8; color:rgba(255,255,255,.78);
}
.og-open-lede p{margin:0 0 12px;}
.og-open-lede p:last-child{margin-bottom:0;}

.og-quick{
  list-style:none; margin:34px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
}
.og-quick li{
  display:flex; flex-direction:column; gap:2px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  padding:14px 22px; min-width:132px;
}
.og-quick b{font-family:'Roboto',sans-serif; font-size:26px; font-weight:800; color:var(--mint); line-height:1;}
.og-quick span{font-size:12px; color:rgba(255,255,255,.66);}

/* ---------- الفهرس اللاصق ---------- */
.og-toc{
  position:sticky; top:0; z-index:40;
  background:rgba(251,252,251,.92); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.og-toc-inner{
  max-width:1180px; margin:0 auto; padding:0 28px;
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
}
.og-toc-inner::-webkit-scrollbar{display:none;}
.og-toc a{
  position:relative; white-space:nowrap; flex-shrink:0;
  padding:14px 16px; font-size:13.5px; font-weight:600; color:#7c8b99;
  transition:color .25s ease;
}
.og-toc a::after{
  content:''; position:absolute; bottom:0; inset-inline:14px; height:2px;
  background:var(--teal); transform:scaleX(0); transform-origin:right;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.og-toc a:hover{color:var(--navy);}
.og-toc a.is-active{color:var(--teal);}
.og-toc a.is-active::after{transform:scaleX(1);}

/* ---------- رأس القسم ---------- */
.og-chart-sec{padding:var(--og-pad) 28px; background:var(--paper-tint);}
.og-head{margin-bottom:clamp(28px,3.2vw,42px);}
.og-head h2{
  font-family:var(--font-head); color:var(--navy);
  font-size:clamp(23px,2.8vw,33px); font-weight:800; line-height:1.3; margin-top:13px;
}

/* ============ المخطط التنظيمي ============
   شجرة موصولة لا صناديق متجاورة: كل مستوى يرتبط بما فوقه بخط مرسوم
   بعنصر زائف — بلا صور وبلا مكتبة رسم. */
.og-chart{
  --og-line: rgba(5,34,62,.18);
  --og-gap: 30px;
  position:relative; display:flex; flex-direction:column; align-items:center;
}

/* الوصلة الرأسية القياسية بين المستويات */
.og-chart .og-node::before,
.og-chart .og-exec::before,
.og-chart .og-branch::before,
.og-chart .og-support-wrap::before{
  content:''; display:block; width:2px; height:var(--og-gap);
  margin:0 auto; background:var(--og-line);
}
.og-chart > *:first-child > li:first-child::before{display:none;}

.og-chain{list-style:none; margin:0; padding:0; width:100%; display:flex; flex-direction:column; align-items:center;}
.og-node{display:flex; flex-direction:column; align-items:center; width:100%;}
.og-node > span{
  display:inline-block; text-align:center;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  padding:14px 30px; min-width:min(100%, 290px);
  font-family:var(--font-head); font-size:15px; font-weight:800; color:var(--navy);
}
.og-node.is-top > span{
  background:var(--navy); color:#fff; border-color:var(--navy);
  letter-spacing:.2px;
}

/* الفروع الرقابية — بخط متقطّع لتمييزها عن خط السلطة التنفيذية */
.og-branch{display:flex; flex-direction:column; align-items:center; width:100%;}
.og-branch::before{background:repeating-linear-gradient(180deg, var(--og-line) 0 5px, transparent 5px 10px) !important;}
.og-branch-tag{
  font-size:11px; font-weight:700; color:#8394a3; letter-spacing:.3px; margin-bottom:10px;
}
.og-branch-boxes{display:flex; flex-wrap:wrap; justify-content:center; gap:12px;}

.og-box{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  border:1.5px dashed rgba(31,120,116,.42); color:var(--navy); background:#fff;
  padding:11px 20px; font-size:13.5px; font-weight:700; min-height:44px;
  transition:border-color .3s ease, background .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.og-box:hover{border-color:var(--teal); background:var(--mint-pale); transform:translateY(-2px);}

/* الجهاز التنفيذي */
.og-exec{display:flex; flex-direction:column; align-items:center; width:100%;}
.og-exec > span{
  display:inline-block; text-align:center;
  background:linear-gradient(120deg, var(--teal), var(--teal-soft)); color:#fff;
  padding:15px 34px; min-width:min(100%, 290px);
  font-family:var(--font-head); font-size:15.5px; font-weight:800;
  box-shadow:0 16px 30px -16px rgba(31,120,116,.6);
}
.og-support-wrap{width:100%;}
.og-support{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; width:100%;}

/* الأقسام والوحدات */
/* شريط الوصل بين المدير التنفيذي والأقسام.
   الغلاف يحجز شريطاً بارتفاع --og-gap عبر padding-top، وداخله ثلاث
   وصلات: نصف رأسي نازل من الأعلى، ثم الناقل الأفقي في منتصف الشريط،
   ثم نصف رأسي نازل إلى رأس كل قسم. كل الوصلات مطلقة التموضع فلا تضيف
   ارتفاعاً ولا تزحزح شيئاً. */
.og-depts-wrap{
  --og-col-gap:18px;
  position:relative; width:100%; padding-top:var(--og-gap);
}
.og-depts-wrap::before{
  content:''; position:absolute; top:0; inset-inline-start:50%;
  width:2px; height:calc(var(--og-gap) / 2); background:var(--og-line);
  transform:translateX(50%);
}
.og-depts{
  display:grid; grid-template-columns:repeat(var(--n,3), minmax(0,1fr)); gap:var(--og-col-gap);
}
/* يمتد من مركز أول عمود إلى مركز آخر عمود تماماً: الإزاحة من كل جانب
   تساوي نصف عرض العمود = (العرض − مجموع الفواصل) ÷ (2 × عدد الأعمدة). */
.og-bus{
  position:absolute; top:calc(var(--og-gap) / 2); height:2px; background:var(--og-line);
  inset-inline:calc((100% - (var(--n, 3) - 1) * var(--og-col-gap)) / (2 * var(--n, 3)));
}
.og-dept{
  position:relative; background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .35s ease;
}
/* النصف السفلي من الوصلة: من الناقل الأفقي إلى رأس القسم */
.og-dept::before{
  content:''; position:absolute; top:calc(var(--og-gap) / -2); inset-inline-start:50%;
  width:2px; height:calc(var(--og-gap) / 2); background:var(--og-line); transform:translateX(50%);
}
.og-dept:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:rgba(31,120,116,.3);}
.og-dept h3{
  font-family:var(--font-head); font-size:14.5px; font-weight:800; color:#fff;
  background:var(--navy); padding:14px 18px; line-height:1.45; text-align:center;
}
.og-dept ul{list-style:none; margin:0; padding:8px 16px 14px;}
.og-dept li{
  display:flex; align-items:flex-start; gap:9px;
  padding:9px 4px; font-size:13.5px; line-height:1.6; color:#41566a;
  border-bottom:1px solid var(--line);
}
.og-dept li:last-child{border-bottom:none;}
.og-dept li::before{
  content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0; margin-top:7px;
  background:var(--teal-soft);
}

.og-raw{background:#fff; border:1px solid var(--line); padding:22px;}

.og-notice{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:26px; padding:14px 18px;
  background:#fff; border:1px solid var(--line); border-inline-start:3px solid var(--teal-soft);
  font-size:13px; line-height:1.7; color:#5d7285;
}
.og-notice svg{width:16px; height:16px; color:var(--teal); flex-shrink:0; margin-top:2px;}

/* ============ الهيكل المالي ============ */
.og-fin{padding:var(--og-pad) 28px; background:linear-gradient(165deg, #06264A, var(--navy));}
.og-fin-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,60px); align-items:center;}
.og-fin h2{
  font-family:var(--font-head); color:#fff;
  font-size:clamp(23px,2.7vw,32px); font-weight:800; line-height:1.3; margin-top:13px;
}
.og-prose{margin-top:14px; font-size:15px; line-height:1.9; color:rgba(255,255,255,.74); max-width:62ch;}
.og-prose p{margin:0 0 14px;}
.og-prose p:last-child{margin-bottom:0;}

.og-flow{list-style:none; margin:0; padding:0; position:relative;}
.og-flow::before{
  content:''; position:absolute; inset-block:18px; inset-inline-start:17px; width:2px;
  background:rgba(255,255,255,.14);
}
.og-flow li{
  position:relative; display:flex; align-items:center; gap:16px;
  padding:9px 0;
}
.og-flow b{
  position:relative; z-index:1; flex-shrink:0;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Roboto',sans-serif; font-size:12px; font-weight:800;
  background:#06264A; color:var(--mint); border:2px solid rgba(179,222,202,.34);
}
.og-flow li:last-child b{background:var(--teal); color:#fff; border-color:var(--mint);}
.og-flow span{font-size:14px; font-weight:600; color:rgba(255,255,255,.85); line-height:1.5;}

/* ============ أقسام إضافية ============ */
.og-extra{padding:var(--og-pad) 28px;}
.og-extra h2{
  font-family:var(--font-head); font-size:clamp(20px,2.2vw,26px); font-weight:800;
  color:var(--navy); margin-bottom:14px;
}
.og-extra .og-prose{color:#41566a;}

/* ============ وثائق ذات صلة ============ */
.og-docs{padding:var(--og-pad) 28px; background:var(--paper-tint);}
.og-docs h2{
  font-family:var(--font-head); font-size:clamp(20px,2.2vw,26px); font-weight:800;
  color:var(--navy); margin-bottom:22px;
}
.og-docs-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
.og-doc{
  display:flex; flex-direction:column; gap:5px;
  background:#fff; border:1px solid var(--line); padding:19px 21px 21px;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.og-doc:hover{transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:rgba(31,120,116,.35);}
.og-doc-label{font-family:var(--font-head); font-size:15.5px; font-weight:800; color:var(--navy);}
.og-doc-note{font-size:12.5px; line-height:1.6; color:#7c8b99;}
.og-doc svg{width:17px; height:17px; color:var(--teal); margin-top:9px; transition:transform .35s cubic-bezier(.16,1,.3,1);}
.og-doc:hover svg{transform:translateX(-5px);}

/* ============ الحركة ============ */
@media (prefers-reduced-motion: no-preference){
  .og-quick li,
  [data-reveal] .og-node,
  [data-reveal] .og-exec,
  [data-reveal] .og-box,
  [data-reveal] .og-dept,
  [data-reveal] .og-flow li,
  [data-reveal] .og-doc{
    animation:og-rise .68s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--i, 0) * 85ms);
  }
  [data-reveal] .og-node,
  [data-reveal] .og-exec,
  [data-reveal] .og-box,
  [data-reveal] .og-dept,
  [data-reveal] .og-flow li,
  [data-reveal] .og-doc{animation-play-state:paused;}
  [data-reveal].in-view .og-node,
  [data-reveal].in-view .og-exec,
  [data-reveal].in-view .og-box,
  [data-reveal].in-view .og-dept,
  [data-reveal].in-view .og-flow li,
  [data-reveal].in-view .og-doc{animation-play-state:running;}

  @keyframes og-rise{
    from{opacity:0; translate:0 16px;}
    to{opacity:1; translate:0 0;}
  }
}

/* ============ الاستجابة ============ */
@media (max-width:960px){
  .og-fin-inner{grid-template-columns:1fr; gap:30px;}
  .og-docs-grid{grid-template-columns:repeat(2, 1fr);}
  .og-depts{grid-template-columns:1fr; gap:14px;}
  /* بعمود واحد يفقد الناقل الأفقي معناه: نُخفيه، ونمدّ الوصلة النازلة
     من المدير التنفيذي لتصل رأس البطاقة الأولى، وتربط وصلات قصيرة
     بين البطاقات المتتالية. */
  .og-bus{display:none;}
  .og-depts-wrap::before{height:var(--og-gap);}
  .og-dept::before{top:-14px; height:14px;}
  .og-dept:first-child::before{display:none;}
}
@media (max-width:620px){
  .og-docs-grid{grid-template-columns:1fr;}
  .og-chart{--og-gap:20px;}
  .og-node > span, .og-exec > span{padding:12px 18px; font-size:14px; min-width:100%;}
  .og-box{width:100%; font-size:13px;}
  .og-branch-boxes, .og-support{width:100%;}
  .og-quick li{flex:1 1 calc(50% - 12px); min-width:0; padding:12px 16px;}
  .og-quick b{font-size:22px;}
}