/* ============================================================
   رفد القيادة — مكوّنات الموقع العام
   منقول حرفياً من _mockups/d-khurafi.html — يعتمد متغيرات tokens.css
   (يُحمَّل بعده في القالب). كل الألوان من التوكنز، لا hex خام.
   ============================================================ */

/* ============================================================
   MOTION — دخول مُدار + كشف تمرير. صفر حركة على <h1> (عنصر LCP).
   ============================================================ */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise var(--dur-3) var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
.reveal{opacity:0;transform:translateY(14px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease);transition-delay:calc(var(--i,0) * 55ms)}
.reveal.in{opacity:1;transform:none}
html.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   مسرح الحركة — «تنقلات مبهرة»:
   كل شيء transform/opacity/clip-path، ويُدار سويتش reduced-motion.
   ============================================================ */

/* ستارة الافتتاح: تُحقن بالـ JS (بلا JS لا وجود لها = لا شاشة فارغة).
   حافتها السفلية مقصوصة برأس سهم رفد — الستارة نفسها راية. */
.intro{
  position:fixed;inset:-1px -1px 0 -1px;z-index:300;
  display:grid;place-items:center;
  background:var(--brand-primary);
  clip-path:polygon(0 0,100% 0,100% 100%,54% 100%,50% calc(100% - 9vh),46% 100%,0 100%);
  padding-block-end:9vh;
}
.intro svg{
  inline-size:min(44vw,280px);block-size:auto;color:var(--brand-mint);
  opacity:0;transform:scale(.93) translateY(10px);
  animation:intro-mark .7s var(--ease) .12s forwards;
}
@keyframes intro-mark{to{opacity:1;transform:none}}
.intro .hint{
  position:absolute;inset-block-end:14vh;inset-inline:0;text-align:center;
  color:var(--color-on-primary-2);font-size:var(--fs-xs);opacity:0;
  animation:intro-mark .5s var(--ease) .9s forwards;
}
.intro.leave{transform:translateY(-104%);transition:transform .68s cubic-bezier(.76,0,.24,1)}

/* مسح التنقّل: لوحان يجتاحان الشاشة برأس سهم في مقدّمتهما —
   شريحة برتقالية رفيعة تتقدّم لوح التركوازي بلحظة. */
.wipe{position:fixed;inset:0;z-index:250;pointer-events:none;visibility:hidden}
.wipe.run{visibility:visible;pointer-events:auto}
.wipe .pane{
  position:absolute;inset:-1px 0;
  transform:translateX(108%);
  clip-path:polygon(7vw 0,100% 0,100% 100%,7vw 100%,0 50%); /* رأس السهم في مقدمة الاجتياح */
}
.wipe .pane--accent{background:var(--color-accent)}
.wipe .pane--body{background:var(--brand-primary)}
.wipe.run .pane--accent{animation:wipe-sweep .82s cubic-bezier(.72,.04,.26,1) forwards}
.wipe.run .pane--body{animation:wipe-sweep .82s cubic-bezier(.72,.04,.26,1) .07s forwards}
@keyframes wipe-sweep{
  0%{transform:translateX(108%)}
  46%,54%{transform:translateX(0)}   /* لحظة تغطية كاملة — القفزة تحدث هنا */
  100%{transform:translateX(-112%)}
}
/* تنقّل بين الصفحات: يغطّي ويثبت (لا يكشف) حتى تُحمّل الصفحة الجديدة — بلا وميض */
.wipe.cover .pane--accent{animation:wipe-cover .5s cubic-bezier(.72,.04,.26,1) forwards}
.wipe.cover .pane--body{animation:wipe-cover .5s cubic-bezier(.72,.04,.26,1) .06s forwards}
@keyframes wipe-cover{from{transform:translateX(108%)}to{transform:translateX(0)}}
/* التحميل البطيء: الغطاء يحيا بمؤشر بدل أن يتجمّد لوحاً برتقالياً ميتاً.
   لا يظهر إلا بعد 1.15s — الصفحات السريعة لا تراه إطلاقاً. */
.wipe .load{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);
  opacity:0;transition:opacity .4s var(--ease)
}
.wipe.waiting .load{opacity:1}
.wipe .load .mark{inline-size:34px;block-size:26px;color:var(--brand-mint);
  animation:load-mark 1.15s var(--ease) infinite}
@keyframes load-mark{
  0%,100%{opacity:.34;transform:translateX(0)}
  50%    {opacity:1;  transform:translateX(-7px)}
}
.wipe .load .bar{position:relative;inline-size:118px;block-size:2px;
  background:rgba(206,225,219,.26);overflow:hidden}
.wipe .load .bar::after{content:"";position:absolute;inset-block:0;inline-size:42%;
  background:var(--color-accent);animation:load-bar 1.1s cubic-bezier(.65,.05,.36,1) infinite}
@keyframes load-bar{from{inset-inline-start:-42%}to{inset-inline-start:100%}}

/* كشف العناوين كلمةً كلمة من قناع */
h2.masked .w{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-block-end:.14em;margin-block-end:-.14em}
h2.masked .wi{display:inline-block;transform:translateY(120%);
  transition:transform .65s var(--ease);transition-delay:calc(var(--d,0)*55ms)}
h2.masked.in .wi{transform:none}
html.no-js h2.masked .wi{transform:none}

/* الهيدر يختبئ نازلًا ويطلّ صاعدًا */
.site-header{transition:box-shadow var(--dur-2) var(--ease),transform .3s var(--ease)}
.site-header.tuck{transform:translateY(-102%)}

/* رايات القيم تسري ببطء — فقط والقسم على الشاشة */
.values .vflag{animation:drift 17s ease-in-out infinite alternate;animation-play-state:paused;will-change:transform}
.values .vflag--b{animation-duration:23s;animation-delay:-6s}
.values.live .vflag{animation-play-state:running}
@keyframes drift{to{transform:translate(-16px,12px) rotate(.5deg)}}

/* رايات الهيرو: parallax عبر rAF — الـ JS يكتب --py */
.hero .flag--a{transform:translate3d(0,calc(var(--py,0)*.14px),0)}
.hero .flag--b{transform:translate3d(0,calc(var(--py,0)*.07px),0)}

/* كشف أعمق للبطاقات + أيقونة الخدمة تتنفس عند المرور */
.reveal{transform:translateY(24px) scale(.985)}
.svc .ic{transition:color var(--dur-1) var(--ease),transform var(--dur-2) var(--ease)}
a.svc:hover .ic{transform:translateY(-3px) scale(1.08)}
.step .marker{transition:transform var(--dur-2) var(--ease)}
.step:hover .marker{transform:translateY(-3px) rotate(-4deg)}

@media (prefers-reduced-motion:reduce){
  .values .vflag{animation:none}
  .hero .flag--a,.hero .flag--b{transform:none}
  h2.masked .wi{transform:none;transition:none}
  .site-header.tuck{transform:none}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-block-size:48px;padding:.65em 1.6em;
  font:inherit;font-weight:600;font-size:var(--fs-base);
  border:1px solid transparent;border-radius:var(--r-md);
  cursor:pointer;user-select:none;text-decoration:none;
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-1)}
.btn:active{transform:translateY(1px);box-shadow:none}
/* نص أبيض على البرتقالي بطلب العميل. الأبيض/#FE5923 = 3.13:1 — يمرّ WCAG AA
   للنص الكبير فقط، لذا 19px + وزن 700 إلزاميان هنا (لا تصغّرهما). */
.btn--primary{background:var(--color-accent);color:#fff;font-weight:700;font-size:1.1875rem}
.btn--primary:hover{background:var(--color-accent-strong)}
.btn--dark{background:var(--brand-primary);color:var(--brand-mint)}
.btn--dark:hover{background:var(--brand-primary-2)}
.btn--ghost-dark{background:transparent;color:var(--brand-mint);border-color:rgba(206,225,219,.55)}
.btn--ghost-dark:hover{background:var(--brand-mint);color:var(--color-ink);border-color:var(--brand-mint)}

/* ============================================================
   HEADER — فاتح ثابت، ظل يظهر مع التمرير
   ============================================================ */
.site-header{
  position:sticky;inset-block-start:0;z-index:60;
  background:var(--color-surface);
  border-block-end:1px solid var(--color-line);
}
.site-header.is-stuck{box-shadow:var(--shadow-1)}
.site-header .bar{display:flex;align-items:center;gap:var(--sp-5);min-block-size:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:var(--sp-3);color:var(--brand-primary)}
.brand svg{block-size:44px;inline-size:auto;display:block}
.brand .wordmark{block-size:36px}
.nav{display:none;align-items:center;gap:clamp(14px,1.6vw,26px);margin-inline-start:auto}
.nav a{
  color:var(--color-ink);font-weight:500;font-size:var(--fs-sm);padding-block:6px;
  background:linear-gradient(currentColor,currentColor) no-repeat;
  background-size:0% 2px;background-position:100% 100%; /* يمين = بداية القراءة في RTL */
  transition:background-size var(--dur-2) var(--ease),color var(--dur-1) var(--ease);
}
.nav a:hover{color:var(--color-accent-ink);background-size:100% 2px}
.nav a[aria-current="page"]{color:var(--brand-primary);font-weight:700;background-size:100% 2px;background-image:linear-gradient(var(--color-accent),var(--color-accent))}
.header-tools{display:flex;align-items:center;gap:var(--sp-3);margin-inline-start:auto}
.nav ~ .header-tools{margin-inline-start:0}
/* مبدّل اللغة: لغتك الآن رقعة صلبة، والوجهة تنتظر، وبينهما شيفرون رفد
   يشير إليها ويتقدّم نحوها عند اللمس. رابط واحد لا زرّان أحدهما معطّل. */
.lang-switch{
  display:inline-flex;align-items:center;min-block-size:34px;
  border:1px solid var(--color-line);border-radius:var(--r-md);overflow:hidden;
  background:transparent;line-height:1;
  transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)
}
.lang-switch .cur{
  align-self:stretch;display:inline-flex;align-items:center;
  padding-inline:.72em;font-weight:700;font-size:var(--fs-xs);
  background:var(--brand-primary);color:var(--brand-mint)   /* 8.0:1 */
}
.lang-switch .glyph{
  inline-size:13px;block-size:10px;flex-shrink:0;
  margin-inline:.5em;color:var(--color-accent);
  transition:transform var(--dur-1) var(--ease)
}
.lang-switch .alt{
  padding-inline-end:.72em;font-weight:700;font-size:var(--fs-xs);
  color:var(--brand-primary);transition:color var(--dur-1) var(--ease)
}
.lang-switch:hover{border-color:var(--color-accent);background:var(--color-surface-2)}
.lang-switch:hover .alt,.lang-switch:focus-visible .alt{color:var(--color-accent-ink)}
/* الشيفرون يشير يساراً أصلاً — على LTR نعكسه ليشير إلى الوجهة يميناً.
   نفس مقدار الإزاحة يخدم الاتجاهين لأن الانعكاس يقلب إشارتها بصرياً. */
.lang-switch:hover .glyph,.lang-switch:focus-visible .glyph{transform:translateX(-3px)}
[dir="ltr"] .lang-switch .glyph{transform:scaleX(-1)}
[dir="ltr"] .lang-switch:hover .glyph,
[dir="ltr"] .lang-switch:focus-visible .glyph{transform:scaleX(-1) translateX(-3px)}
.burger{display:inline-flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;border:1px solid var(--color-line);border-radius:var(--r-md);background:transparent;color:var(--brand-primary);cursor:pointer}
.hdr-cta{display:none}
@media (min-width:64rem){
  .nav{display:flex}
  .burger{display:none}
  .hdr-cta{display:inline-flex;min-block-size:40px;padding:.45em 1.2em;font-size:var(--fs-sm)}
}

/* الدرج — dialog أصلي: حبس تركيز + Escape + خلفية inert مجاناً */
.drawer{border:0;padding:0;margin:0;margin-inline-end:auto;block-size:100dvh;max-block-size:100dvh;inline-size:min(320px,86vw);background:var(--color-surface);color:var(--color-ink)}
.drawer[open]{animation:drawer-in var(--dur-2) var(--ease)}
@keyframes drawer-in{from{transform:translateX(100%)}} /* +X = من اليمين، جهة البداية في RTL */
.drawer::backdrop{background:rgba(16,38,42,.55)}
.drawer .inner{display:grid;gap:var(--sp-2);padding:var(--sp-5)}
.drawer .head{display:flex;align-items:center;justify-content:space-between;margin-block-end:var(--sp-3)}
.drawer nav{display:grid}
.drawer nav a{display:block;padding:14px 4px;color:var(--color-ink);font-weight:600;border-block-end:1px solid var(--color-line)}
.drawer nav a:hover{color:var(--color-accent-ink)}
.drawer .btn{margin-block-start:var(--sp-4)}
.x{display:inline-flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;border:1px solid var(--color-line);border-radius:var(--r-md);background:transparent;color:var(--brand-primary);cursor:pointer}

/* ============================================================
   HERO — تركوازي عميق، رايات ضخمة من هندسة الشعار، نص أبيض/منت
   ============================================================ */
.hero{position:relative;background:var(--brand-primary);color:var(--color-on-primary);overflow:hidden}
.hero .container{position:relative;z-index:2;display:grid;align-content:center;min-block-size:max(540px, calc(92dvh - var(--header-h)));padding-block:var(--sp-16)}
.hero .kicker{display:inline-flex;align-items:center;gap:var(--sp-3);color:var(--brand-mint);font-weight:600;font-size:var(--fs-sm);margin-block-end:var(--sp-5)}
.hero .kicker::before{content:"";inline-size:9px;block-size:9px;background:var(--color-accent);flex-shrink:0}
/* balance يوازن السطرين، والمسافة غير الفاصلة في العنوان تمنع قصّ «أثر مستدام» */
.hero h1{color:#fff;max-inline-size:15ch;margin-block-end:var(--sp-4);text-wrap:balance}
/* inline-size:fit-content يجعل الشعار الإنجليزي بعرض محتواه فيلتصق بحافة القراءة
   (يمين في RTL) تحت العنوان مع باقي المحتوى، بدل التمدّد الكامل والالتصاق باليسار */
.hero .en{display:block;inline-size:fit-content;max-inline-size:100%;color:var(--brand-mint);font-weight:500;font-size:var(--fs-lg);margin-block-end:var(--sp-5)}
.hero .lead{color:var(--color-on-primary);max-inline-size:36rem;font-size:var(--fs-lg);margin-block-end:var(--sp-6)}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}
.hero .flags{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero .flag{position:absolute;fill:var(--brand-primary-2)}
/* راية واحدة كبيرة مرساة للركن السفلي كخلفية هادئة + راية علوية خافتة جدًا.
   خفّضنا الشفافية وأزلنا السهم البرتقالي الطائر ليصبح البرتقالي حصرًا لزر الـCTA. */
.hero .flag--a{inline-size:clamp(320px,44vw,680px);inset-inline-end:-12%;inset-block-end:-20%;opacity:.34}
.hero .flag--b{inline-size:clamp(200px,26vw,420px);inset-inline-end:20%;inset-block-start:-24%;opacity:.16}
@media (max-width:47.99rem){
  .hero .flag--b{display:none}
  .hero .flag--a{inset-inline-end:-30%;opacity:.5}
}

/* ============================================================
   SECTION HEAD — نمط رأس موحّد
   ============================================================ */
.shead{max-inline-size:52rem;margin-block-end:clamp(2rem,1.4rem + 2vw,3.2rem)}
.shead .eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:600;font-size:var(--fs-sm);color:var(--color-accent-ink);margin-block-end:var(--sp-2)}
.shead .eyebrow::before{content:"";inline-size:8px;block-size:8px;background:var(--color-accent)}
.shead p{color:var(--color-ink-2);max-inline-size:44rem;margin-block-end:0}
.on-dark .shead h2{color:#fff}
.on-dark .shead p{color:var(--color-on-primary)}
.on-dark .shead .eyebrow{color:var(--brand-mint)}

/* ============================================================
   من نحن — تخطيط تحريري غير متماثل: رؤية/رسالة + بطاقة الأهداف
   ============================================================ */
/* الرؤية والرسالة لوحان متكافئان عرضاً وارتفاعاً (ملاحظة العميل 5).
   كان 1.1fr/0.9fr مع align-items:start، فيأخذ النصّ الأقصر العمود الأعرض
   وتختلف الارتفاعات — يُقرأ اختلالاً لا تحرّراً. */
.about-grid{display:grid;gap:var(--sp-5)}
@media (min-width:64rem){.about-grid{grid-template-columns:1fr 1fr;align-items:stretch}}
.about-grid > .vm{display:flex;flex-direction:column}
.card{background:var(--color-surface);border-radius:var(--r-lg);padding:clamp(1.4rem,1.1rem + 1.2vw,2.2rem);box-shadow:var(--shadow-1)}
.vm .top{display:flex;align-items:center;gap:var(--sp-3);margin-block-end:var(--sp-3)}
.vm .top .ic{inline-size:26px;block-size:26px;color:var(--brand-primary-2)}
.vm h3{margin-block-end:0}
.vm p{margin-block-end:0;color:var(--color-ink-2)}
.vm p+ p{margin-block-start:var(--sp-3)}
/* الأهداف اثنا عشر مجالاً — بطاقة بعرض القسم كاملاً، وست بلاطات في السطر
   على الحاسب (سطران). البلاطة موسّطة على محور واحد: رقم ← أيقونة ← نص،
   بنفس لغة بطاقة القيمة كي تُقرأ الصفحتان كنظام واحد.
   السلّم 2 ← 3 ← 4 ← 6 يقسم الاثني عشر بلا صفّ أعرج في أي عرض. */
.goals{margin-block-start:var(--sp-5)}
.goals h3{margin-block-end:var(--sp-5)}
.goals ol{list-style:none;margin:0;padding:0;display:grid;
  gap:var(--sp-5) var(--sp-4);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:36rem){.goals ol{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:48rem){.goals ol{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:62rem){.goals ol{grid-template-columns:repeat(6,minmax(0,1fr))}}
.goals li{position:relative;padding-block-start:var(--sp-4);text-align:center}
.goals li::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;
  inline-size:52%;block-size:2px;margin-inline:auto;background:var(--color-line);
  transition:inline-size var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease);
}
.goals li:hover::before{inline-size:100%;background:var(--color-accent)}
@media (prefers-reduced-motion:reduce){.goals li::before{transition:none}}
.goals .no{display:block;font-weight:700;color:var(--color-accent-ink);
  font-variant-numeric:lining-nums tabular-nums;font-size:var(--fs-sm);
  margin-block-end:var(--sp-2)}
.goals .ic{display:block;inline-size:26px;block-size:26px;margin-inline:auto;
  color:var(--brand-primary-2);margin-block-end:var(--sp-3)}
.goals .txt{display:block;font-weight:500;font-size:var(--fs-sm);line-height:1.75}

/* ============================================================
   الخدمات — 9 بطاقات بيضاء بظل، البطاقة كلها رابط
   ============================================================ */
.svc-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
@media (min-width:64rem){.svc-grid{grid-template-columns:repeat(3,1fr)}} /* 3×3 — لا بطاقة يتيمة */
a.svc{
  display:grid;grid-template-rows:auto 1fr auto;gap:var(--sp-4);
  background:var(--color-surface);border-radius:var(--r-lg);
  padding:var(--sp-5);min-block-size:196px;
  color:var(--color-ink);box-shadow:var(--shadow-1);
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
a.svc:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.svc .top{display:flex;align-items:center;justify-content:space-between}
.svc .ic{inline-size:30px;block-size:30px;color:var(--brand-primary-2)}
a.svc:hover .ic{color:var(--color-accent-ink)}
.svc .no{font-weight:700;font-size:var(--fs-xs);color:var(--color-ink-2);font-variant-numeric:lining-nums tabular-nums}
.svc h3{font-size:var(--fs-lg);margin-block-end:0}
.svc .more{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:600;font-size:var(--fs-sm);color:var(--color-accent-ink);opacity:0;transform:translateX(6px);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
a.svc:hover .more,a.svc:focus-visible .more{opacity:1;transform:none}
@media (hover:none){.svc .more{opacity:1;transform:none}}

/* ============================================================
   القيم — لوحة داكنة برايات هادئة
   ============================================================ */
.values{position:relative;background:var(--brand-primary);overflow:hidden}
.values .container{position:relative;z-index:2}
.values .vflag{position:absolute;fill:var(--brand-primary-2);opacity:.5;pointer-events:none}
.values .vflag--a{inline-size:clamp(260px,30vw,480px);inset-inline-start:-8%;inset-block-end:-22%}
.values .vflag--b{inline-size:clamp(180px,20vw,320px);inset-inline-end:-6%;inset-block-start:-18%;opacity:.35}
/* شبكة متزنة لأي عدد: الصف الناقص يتوسّط بدل أن يلتصق بجهة —
   auto-fit كان يترك عنصرين يتيمين على الحافة فيُقرأ خللاً لا تصميماً.
   القيم سبع، ومجالات العمل اثنا عشر، والعدد قابل للتغيير من اللوحة. */
.val-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-4) var(--sp-5)}
/* نصف بكسل مطروح — انظر تعليق .prt-grid: المجموع الدقيق يُنزل الأخير */
.val-grid > *{flex:1 1 100%;max-inline-size:100%}
@media (min-width:36rem){
  .val-grid > *{flex-basis:calc((100% - var(--sp-5)) / 2 - 0.5px);max-inline-size:calc((100% - var(--sp-5)) / 2)}
}
@media (min-width:62rem){
  .val-grid > *{flex-basis:calc((100% - 3 * var(--sp-5)) / 4 - 0.5px);max-inline-size:calc((100% - 3 * var(--sp-5)) / 4)}
}
/* البطاقة موسّطة بالكامل: الأيقونة والاسم العربي ومقابله الإنجليزي على
   محور واحد. والخط فوقها موسّط كذلك بنصف العرض، يمتدّ ويتلوّن عند اللمس. */
.val{position:relative;padding-block-start:var(--sp-4);text-align:center}
.val::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;
  inline-size:52%;block-size:2px;margin-inline:auto;
  background:var(--color-line-dark);
  transition:inline-size var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease);
}
.val:hover::before{inline-size:100%;background:var(--color-accent)}
@media (prefers-reduced-motion:reduce){.val::before{transition:none}}
.val .ic{display:block;inline-size:28px;block-size:28px;margin-inline:auto;
  color:var(--brand-mint);margin-block-end:var(--sp-3)}
.val h3{color:#fff;font-size:var(--fs-lg);margin-block-end:var(--sp-1)}
.val span{display:block;color:var(--color-on-primary-2);font-size:var(--fs-sm);font-weight:500}

/* ============================================================
   المنهجية — مسار من 4 مراحل بخط واصل
   ============================================================ */
.method-grid{display:grid;gap:var(--sp-5);counter-reset:step}
@media (min-width:48rem){.method-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.method-grid{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;background:var(--color-surface);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow-1)}
.step .marker{display:inline-flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;border-radius:var(--r-md);background:var(--brand-primary);color:var(--brand-mint);margin-block-end:var(--sp-4)}
.step .marker .ic{inline-size:22px;block-size:22px}
.step .no{position:absolute;inset-inline-end:var(--sp-5);inset-block-start:var(--sp-5);font-weight:700;font-size:var(--fs-sm);color:var(--color-ink-2);font-variant-numeric:lining-nums tabular-nums}
.step h2{font-size:var(--fs-lg)}
.step p{color:var(--color-ink-2);font-size:var(--fs-sm);margin-block-end:0}

/* ============================================================
   الشركاء — شعارات حقيقية معكوسة للحبر على بطاقات بيضاء
   ============================================================ */
/* الشركاء ثلاثة في الصف على كل العروض — الجوال أيضاً (طلب العميل).
   البطاقة تتقلّص بدل أن تُلفّ: حشوة ولوحة وخط أصغر تحت 36rem. */
.prt-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2)}
/* نصف بكسل مطروح من الأساس مقصود: مجموع الثلاثة كان يساوي عرض الحاوية
   بالضبط، فأي كسر بكسل في حساب المتصفح يُنزل الثالث إلى سطر جديد.
   الطرح يضمن اتّساع ثلاثة ولا يسمح برابع، وflex-grow يعيد العرض كاملاً. */
.prt-grid > *{
  flex:1 1 calc((100% - 2 * var(--sp-2)) / 3 - 0.5px);
  max-inline-size:calc((100% - 2 * var(--sp-2)) / 3);
}
@media (min-width:36rem){
  .prt-grid{gap:var(--sp-4)}
  .prt-grid > *{
    flex-basis:calc((100% - 2 * var(--sp-4)) / 3 - 0.5px);
    max-inline-size:calc((100% - 2 * var(--sp-4)) / 3);
  }
}
/* بطاقة الشريك — ملاحظتا العميل 16 و18.
   ملفات الشركاء الأربعة أشكال بيضاء مصمَّتة (متوسط سطوع البكسل المرئي
   246–250/255) صُنعت لخلفيات داكنة، ولا تحمل أي لون داخلي أصلاً.
   لذا تُعرض في سياقها: لوحة تركوازي الهوية مقصوصة 45°، والشعار أبيض
   نقي عليها — 10.9:1. توحيد السطوع يمنع اختلاف البياض بين الملفات. */
.prt{display:grid;grid-template-rows:auto auto 1fr;justify-items:center;gap:var(--sp-2);
  /* figure يحمل هامشاً افتراضياً 40px من المتصفح، والهوامش تدخل في حساب
     عرض عنصر flex عند تقرير اللف — فكان مجموع الثلاثة 1440px ويلتفّ عند
     اثنين مهما صغّرنا الأساس. تصفيره شرط لثلاثة في الصف. */
  margin:0;
  background:var(--color-surface-2);border-radius:var(--r-md);padding:var(--sp-2);
  min-block-size:0;box-shadow:var(--shadow-1);
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.prt:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.prt .plate{
  display:grid;place-items:center;inline-size:100%;min-block-size:62px;
  padding:var(--sp-2);background:var(--brand-primary);border-radius:var(--r-sm);
  /* قصّة الركن 45° — نفس زاوية مضلّعات الشعار، بلا منحنيات */
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%)
}
.prt img{max-block-size:34px;max-inline-size:100%;inline-size:auto;block-size:auto;object-fit:contain;
  /* أسود ثم عكس = أبيض نقي: يوحّد الأربعة مهما اختلف بياضها الأصلي */
  filter:brightness(0) invert(1)}
/* شريك بلا شعار بعد: اسمه بالمنت داخل اللوحة — إيقاع الشبكة محفوظ
   ولا تظهر لوحة فارغة تُقرأ عطلاً. يُستبدل تلقائياً فور رفع الشعار. */
.plate-name{
  display:block;padding-inline:var(--sp-2);
  color:var(--brand-mint);font-weight:700;font-size:var(--fs-xs);
  line-height:1.5;text-align:center;text-wrap:balance;
}
@media (min-width:36rem){.plate-name{font-size:var(--fs-sm);padding-inline:var(--sp-3)}}
.prt figcaption{font-size:var(--fs-xs);font-weight:700;color:var(--brand-primary);text-align:center;line-height:1.5}
/* من 36rem فصاعداً تكبر البطاقة إلى مقاسها الكامل */
@media (min-width:36rem){
  .prt{gap:var(--sp-3);border-radius:var(--r-lg);padding:var(--sp-4);min-block-size:150px}
  .prt .plate{min-block-size:104px;padding:var(--sp-4);border-radius:var(--r-md);
    clip-path:polygon(0 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%)}
  .prt img{max-block-size:62px}
  .prt figcaption{font-size:var(--fs-sm)}
}
.prt-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-block-start:var(--sp-6);padding:var(--sp-5);background:var(--color-surface-2);border-radius:var(--r-lg)}
.prt-cta p{margin:0;font-weight:600;color:var(--brand-primary)}
.prt-cta .en{display:block;font-weight:500;color:var(--color-ink-2);font-size:var(--fs-sm)}

/* ============================================================
   رؤية 2030 — بطاقة داكنة واحدة كعلامة ترقيم
   ============================================================ */
.v2030{background:var(--brand-primary);color:var(--color-on-primary);border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:clamp(1.6rem,1.2rem + 1.8vw,2.6rem);display:grid;gap:var(--sp-4);position:relative;overflow:hidden}
@media (min-width:48rem){.v2030{grid-template-columns:auto 1fr;align-items:center;gap:var(--sp-6)}}
.v2030 .badge2030{display:grid;place-items:center;inline-size:96px;block-size:96px;border-radius:var(--r-md);background:var(--brand-primary-2);color:#fff;font-weight:700;font-size:1.45rem;font-variant-numeric:lining-nums tabular-nums;flex-shrink:0}
.v2030 h2{color:#fff;font-size:var(--fs-xl);margin-block-end:var(--sp-2)}
.v2030 p{margin:0;color:var(--color-on-primary)}
.v2030 .vf{position:absolute;inline-size:220px;inset-inline-end:-60px;inset-block-end:-70px;fill:var(--brand-primary-2);opacity:.32;pointer-events:none}

/* ============================================================
   الختام — لوحة داكنة + CTA
   ============================================================ */
.closing{position:relative;background:var(--brand-primary);color:var(--color-on-primary);overflow:hidden}
.closing .container{position:relative;z-index:2;display:grid;gap:var(--sp-5);justify-items:start}
.closing h2{color:#fff;max-inline-size:26ch;margin-block-end:0}
.closing .cflag{position:absolute;inline-size:clamp(260px,26vw,430px);inset-inline-end:-7%;inset-block-end:-30%;fill:var(--brand-primary-2);opacity:.55;pointer-events:none}
.contact-chips{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.chip{display:inline-flex;align-items:center;gap:var(--sp-2);border:1px solid var(--color-line-dark);border-radius:var(--r-full);padding:.5em 1.1em;color:var(--brand-mint);font-weight:500;font-size:var(--fs-sm);transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.chip:hover{border-color:var(--brand-mint);background:rgba(206,225,219,.08)}
.chip .ic{inline-size:18px;block-size:18px}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--color-ink);color:var(--color-on-primary-2);padding-block:var(--sp-8) var(--sp-6)}
.site-footer .cols{display:grid;gap:var(--sp-6)}
@media (min-width:48rem){.site-footer .cols{grid-template-columns:1.4fr 1fr 1fr}}
.site-footer .flogo{color:var(--brand-mint)}
.site-footer .flogo svg{block-size:40px;inline-size:auto}
.site-footer h3{color:#fff;font-size:var(--fs-base);margin-block-end:var(--sp-3)}
.site-footer p{color:var(--color-on-primary-2);font-size:var(--fs-sm);max-inline-size:34ch}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.site-footer li a{color:var(--color-on-primary-2);font-size:var(--fs-sm);transition:color var(--dur-1) var(--ease)}
.site-footer li a:hover{color:var(--brand-mint)}
/* عناصر التواصل في التذييل: أيقونة + نص، هدف لمس مريح */
.site-footer .c-item{display:inline-flex;align-items:center;gap:var(--sp-2);min-block-size:28px}
.site-footer .c-item .ic{inline-size:18px;block-size:18px;flex-shrink:0;color:var(--brand-mint)}
.site-footer .base{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between;align-items:center;margin-block-start:var(--sp-8);padding-block-start:var(--sp-5);border-block-start:1px solid rgba(206,225,219,.14);font-size:var(--fs-xs)}
.site-footer .base [dir="ltr"]{color:var(--color-on-primary-2)}
/* WCAG 2.5.8: أهداف اللمس ≥24×24 — روابط الشريط السفلي كانت 22px ارتفاعًا */
.site-footer .base-links{display:inline-flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}
.site-footer .base-links a{display:inline-flex;align-items:center;min-block-size:24px}


/* شارة العدد — تُحسب من الصفوف فلا تكذب مهما أضاف العميل أو حذف */
.cnt-chip{
  display:inline-grid;place-items:center;
  min-inline-size:1.55em;padding:.05em .45em;margin-inline-start:var(--sp-2);
  background:var(--color-accent);color:var(--color-on-accent);
  border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:700;line-height:1.6;
  font-variant-numeric:lining-nums tabular-nums;
}


/* ============================================================
   الجوال (تحت 36rem) — كثافة أعلى بطلب العميل:
   القيم والخدمات ثلاثٌ في الصف، والمنهجية اثنتان، وكل المقاسات
   تتقلّص تناسبياً كي يبقى النص مقروءاً لا مضغوطاً.
   الحد الأدنى للخط 12px (‎--fs-xs‎) — لا ننزل تحته على العربية.
   ============================================================ */
@media (max-width:35.99rem){

  /* ---- القيم: ثلاث في الصف ---- */
  .val-grid{gap:var(--sp-3) var(--sp-2)}
  .val-grid > *{
    flex:1 1 calc((100% - 2 * var(--sp-2)) / 3 - 0.5px);
    max-inline-size:calc((100% - 2 * var(--sp-2)) / 3);
  }
  .val{padding-block-start:var(--sp-3)}
  .val .ic{inline-size:20px;block-size:20px;margin-block-end:var(--sp-2)}
  .val h3{font-size:var(--fs-xs);line-height:1.5;margin-block-end:2px}
  .val span{font-size:.6875rem;line-height:1.45}

  /* ---- الخدمات: اثنتان في الصف ----
     عناوين الخدمات طويلة («التخطيط الاستراتيجي والتشغيلي ومتابعة التنفيذ»)،
     فثلاثٌ في الصف تضغطها إلى عمود نحيل يتكسّر على ستة أسطر. اثنتان تمنحان
     العنوان عرضاً يُقرأ، وتُبقيان الكثافة أعلى من واحدة. */
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
  a.svc{
    gap:var(--sp-3);padding:var(--sp-3);
    min-block-size:0;border-radius:var(--r-md);
  }
  .svc .ic{inline-size:24px;block-size:24px}
  .svc .no{font-size:var(--fs-xs)}
  .svc h3{font-size:var(--fs-sm);line-height:1.5}
  .svc .more{font-size:var(--fs-xs)}

  /* ---- المنهجية: اثنتان في الصف ---- */
  .method-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
  .step{padding:var(--sp-3);border-radius:var(--r-md)}
  .step .marker{inline-size:34px;block-size:34px;margin-block-end:var(--sp-3)}
  .step .marker .ic{inline-size:18px;block-size:18px}
  .step .no{inset-inline-end:var(--sp-3);inset-block-start:var(--sp-3);font-size:.6875rem}
  .step h2,.step h3{font-size:var(--fs-sm);line-height:1.45}
  .step p{font-size:var(--fs-xs);line-height:1.6}
}