/* ============================================================
   EL MASRIA — Design System v4.0
   شركة المصرية للسلامة والصحة المهنية | منذ 1999
   Direction: RTL · Arabic-first · Industrial consultancy
   ------------------------------------------------------------
   الباليتة مشتقة من ألوان شعار الشركة الرسمي (BRAND.md §2):
     --cyan  #00A3D5   أزرق اللوجو (القرص)  → اللون المسيطر على الواجهة
     --lime  #BCD800   لايم اللوجو          → لمسات زخرفية فقط
     --org   #F16026   برتقالي اللوجو       → تمييز دقيق (اقتباس · أرقام)
     --g900  #071B2A   الأزرق الداكن الحامل → هيرو · فوتر · بطاقات داكنة
   الخطوط: Cairo (عناوين) + IBM Plex Sans Arabic (نصوص) — لا نستخدم
   خطوط النظام لأن العناوين العربية الكبيرة تحتاج وزنًا وأشكالًا محترفة.
   قاعدة تباين ملزمة: الزر الأساسي سماوي #00A3D5 بنص داكن #04121D
   (6.0:1) — النص الأبيض على السماوي 2.9:1 ويسقط معيار AA.
   ============================================================ */
:root{
  /* الأزرق الداكن — الحامل */
  --g950:#04121d;
  --g900:#071b2a;
  --g850:#0a2338;
  --g800:#0d2a3e;
  /* تدرّج السماوي — نصوص وروابط وأيقونات على الخلفيات الفاتحة */
  --g700:#0b5e86;
  --cyan:#00a3d5;
  /* سماوي داكن لحالة hover على الأزرار — الأبيض عليه 5.10:1 (يمرّ AA).
     --g600 الأصلي #0088b8 كان 4.03:1 ويسقط المعيار. */
  --cyan-d:#00779c;
  --cyan-soft:#e7f8fc;
  /* قيم اللوجو الحرفية — للعناصر الملتصقة بالشعار والزخارف فقط */
  --logo-blue:#00a3d5;
  --logo-lime:#bcd800;
  --lime:#bcd800;
  /* لايم غامق للنص والأيقونات على الخلفيات البيضاء — #bcd800 على أبيض = 1.62:1 (يسقط AA) */
  --lime-d:#5f6b00;
  /* محايدة باردة */
  --paper:#f6f9fa;
  --paper2:#edf3f6;
  --ink:#0f2231;
  --ink2:#263c4c;
  --mut:#63727e;
  --line:#dde7ec;
  --line-d:rgba(255,255,255,.16);
  --w:#ffffff;
  /* برتقالي اللوجو — تمييز دقيق فقط (على الأبيض يُستخدم --org-d) */
  --org:#f16026;
  --org-d:#c94a15;
  --org-t:#fdeee4;
  --org-lt:#ff8a4c;
  /* أخضر النجاح — لعلامات التحقق فقط (أبيض على #2e7d32 = 5.13:1) */
  --ok:#2e7d32;
  --ok-soft:#e8f4ea;
  /* بنية */
  --r:18px;
  --r-sm:14px;
  --r-lg:24px;
  --font-h:"Cairo",system-ui,sans-serif;
  --font-b:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --sh:0 24px 60px -24px rgba(7,27,42,.20);
  --sh-s:0 12px 30px -14px rgba(7,27,42,.16);
  --sh-lg:0 34px 84px -32px rgba(7,27,42,.32);
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;font-family:var(--font-b);color:var(--ink);background:var(--w);
  line-height:1.85;font-size:16.5px;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3,h4,.foot-h,.side-h,.card-h,.cluster-h,.cf-h,.why-h{font-family:var(--font-h);line-height:1.45;margin:0 0 .6em;font-weight:800;color:var(--ink)}
img{max-width:100%;height:auto;display:block}
a{color:var(--g800)}
::selection{background:var(--cyan);color:var(--g950)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:4px}
.container{width:min(var(--max),92%);margin-inline:auto}
section{padding:96px 0}
.section{padding:96px 0}
.section.alt{background:var(--paper)}
.sec-dark{background:var(--g900);color:#e8f1f6}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark p{color:#bfd3de}

/* ---------- signature: label / tick / numbers ---------- */
.kicker{display:flex;align-items:center;gap:12px;font-weight:700;font-size:13.5px;
  letter-spacing:.4px;color:var(--g700);margin-bottom:14px}
.kicker::before{content:"";width:40px;height:4px;background:var(--cyan);border-radius:2px;flex:none}
.sec-dark .kicker{color:var(--cyan)}
.sec-title{font-size:clamp(27px,4vw,46px);max-width:22ch;letter-spacing:-.4px}
.sec-sub{color:var(--mut);max-width:62ch;font-size:17px}
.sec-dark .sec-sub{color:#b2c8d4}
.tick{width:52px;height:5px;background:var(--cyan);border-radius:3px;margin:0 0 18px}
/* رأس قسم بعمودين — عنوان يمين · تمهيد يسار (نمط الهوية الجديدة) */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:42px}
.sec-head>div{max-width:60%}
.sec-head .sec-title{margin-bottom:0}
.sec-head .sec-sub{margin:0;max-width:44ch}
/* ---------- about : بطاقة المحتوى + لوحة الأرقام الداكنة ---------- */
.grid2{display:grid;grid-template-columns:1.06fr .94fr;gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh)}
/* بطاقة المحتوى — الصورة في العمود الخارجي والنص بجوار اللوحة الداكنة،
   مع شريط لايم علوي وفقاعة سماوية خفيفة في القاع. */
.about{padding:14px;display:grid;grid-template-columns:1.05fr .95fr;gap:26px;overflow:hidden;position:relative}
.about::before{content:"";position:absolute;inset-inline-end:14px;top:14px;width:84px;height:5px;
  background:var(--lime);border-radius:3px;z-index:3}
.about::after{content:"";position:absolute;inset-inline-start:-70px;bottom:-70px;width:200px;height:200px;
  border-radius:50%;background:var(--cyan);opacity:.07;pointer-events:none;z-index:0}
.about-image{position:relative;border-radius:18px;overflow:hidden;min-height:400px;z-index:1}
/* القص: المصدر 1024×1536 (عمودي). على الديسكتوب يُعرض الارتفاع كاملًا ويُقص العرض فقط
   (overflow_y = 0 فالقيمة الرأسية بلا أثر)، وعند ≤1020px ينقلب القص إلى رأسي فيُعرض ~45%
   من الارتفاع فقط. القيمة 48% هي الوحيدة التي تُبقي الخوذة كاملة وشعار «المصرية» على السترة
   كاملًا عند 1020 و390 معًا — 45% تقصّ الشعار، و52% تقصّ قمة الخوذة. مُتحقَّق منها بمحاكاة cover. */
.about-image img{width:100%;height:100%;object-fit:cover;object-position:50% 48%}
.about-copy{padding:26px 22px;position:relative;z-index:1}
.about-copy h3{font-size:clamp(22px,2.8vw,29px);line-height:1.4;margin:0 0 14px}
.about-copy p{margin:0;color:var(--mut);font-size:16px}
.about-cta{margin-top:22px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.about-cta .btn .ic{width:1.05em;height:1.05em}
/* تمييز كلمة داخل العنوان: على الأبيض سماوي عميق (7.1:1) — لا يُستخدم --cyan كنص على أبيض */
.hl-cyan{color:var(--g700)}
/* على الخلفية الداكنة اللايم هو اللون الصحيح (10.8:1) */
.hl-lime{color:var(--lime)}
.checks{display:grid;gap:11px;list-style:none;padding:0;margin:20px 0 0}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--ink2)}
.check{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--ok);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:900}
.check .ic{width:14px;height:14px;stroke-width:2.8}
/* اللوحة الداكنة — بلا شبكة خلفية */
.card.dark{background:var(--g900);color:#fff;border-color:transparent;padding:34px;position:relative;overflow:hidden}
.card.dark>*{position:relative}
.card.dark h3{font-size:clamp(22px,2.8vw,29px);line-height:1.4;margin:8px 0 14px;color:#fff}
.card.dark p{color:#bfd3de;margin:0}
.card.dark .kicker{color:var(--cyan)}
/* شريط البادج في اللوحة الداكنة لايم ليتوافق مع لون اللوجو */
.card.dark .kicker::before{background:var(--lime)}
/* طبقة الصورة الصناعية أسفل اللوحة — تتلاشى للأعلى بلا حدود حادة.
   specificity أعلى من .card.dark>* حتى تبقى absolute. */
.card.dark .dark-photo{position:absolute;inset:auto 0 0 0;height:46%;z-index:0;pointer-events:none}
.card.dark .dark-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.45;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.4) 55%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.4) 55%,transparent 100%)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.stat{display:flex;align-items:center;gap:14px;
  border:1px solid var(--line-d);background:rgba(255,255,255,.06);border-radius:16px;padding:16px 18px}
.stat .si{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.07)}
.stat .si .ic{width:21px;height:21px}
.stat .num{flex:1;min-width:0}
.stat .num b{display:block;font-family:var(--font-h);font-size:27px;line-height:1.1;color:#fff}
.stat .num .lbl{display:block;margin-top:5px;color:#a8bdc8;font-size:12.5px;line-height:1.5}
.stat .bar{display:block;height:3px;width:30px;border-radius:2px;margin-top:9px}
.stat.cyan .si{color:var(--cyan)} .stat.cyan .bar{background:var(--cyan)}
.stat.lime .si{color:var(--lime)} .stat.lime .bar{background:var(--lime)}
.stat.org  .si{color:var(--org-lt)} .stat.org .bar{background:var(--org-lt)}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-h);font-weight:800;font-size:16px;text-decoration:none;
  min-height:52px;padding:14px 30px;border-radius:var(--r-sm);border:2px solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
/* الأساسي — سماوي بنص داكن (6.0:1) */
.btn-primary,.btn-org{background:var(--cyan);color:var(--g950);
  box-shadow:0 16px 34px -16px rgba(0,163,213,.8)}
.btn-primary:hover,.btn-org:hover{background:var(--cyan-d);color:#fff}
/* الثانوي — أزرق داكن */
.btn-navy,.btn-green{background:var(--g900);color:#fff;box-shadow:var(--sh-s)}
.btn-navy:hover,.btn-green:hover{background:var(--g800)}
.btn-ghost{background:transparent;color:var(--g900);border-color:var(--g900)}
.btn-ghost:hover{background:var(--g900);color:#fff}
.btn-light{background:#fff;color:var(--g900);box-shadow:var(--sh-s)}
.btn-light:hover{background:var(--cyan-soft)}
.btn-outline-w{border-color:rgba(255,255,255,.6);color:#fff}
.btn-outline-w:hover{background:#fff;color:var(--g900);border-color:#fff}
.btn-sm{min-height:44px;padding:10px 20px;font-size:14.5px}

/* ---------- topbar + header ---------- */
.topbar{background:var(--g950);color:#a9c4d3;font-size:13px}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:9px;padding-bottom:9px}
.topbar a{color:#fff;text-decoration:none;font-weight:700}
.topbar .tb-group{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.tb-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);display:inline-block;margin-inline-end:6px}
.site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.site-head.scrolled{box-shadow:0 14px 34px -22px rgba(7,27,42,.45)}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{width:52px;height:52px;flex:none;border-radius:14px;background:var(--g900);color:#fff;
  display:grid;place-items:center;font-family:var(--font-h);font-weight:900;font-size:20px;position:relative;overflow:hidden}
.brand-mark::after{content:"";position:absolute;inset:auto -8px -10px auto;width:34px;height:34px;background:var(--cyan);transform:rotate(45deg)}
.brand-name{font-family:var(--font-h);font-weight:900;font-size:19px;color:var(--g900);line-height:1.3}
.brand-name small{display:block;font-family:var(--font-b);font-weight:400;font-size:12px;color:var(--mut)}
/* الشعار الرسمي — BRAND.md · emblem مربع شفاف + نص HTML حي */
.brand-tile{background:#fff;border:1px solid var(--line);border-radius:15px;padding:4px;display:flex;align-items:center;justify-content:center;flex:none}
.brand-logo{height:52px;width:52px;object-fit:contain;display:block;border-radius:11px}
.brand-logo.missing{display:none}
.brand-tile:has(.brand-logo.missing){display:none}
/* عند وجود الشعار نخفي البديل النصي (م) فقط — ونُبقي الاسم العربي حيًا */
.brand:has(.brand-logo:not(.missing)) .brand-mark{display:none}
.drawer-logo{height:46px;width:46px;object-fit:contain;display:block;border-radius:11px;background:#fff;padding:2px;flex:none}
.drawer-logo.missing{display:none}
.drawer-brand{display:flex;gap:10px;align-items:center}
.drawer-brandname{font-family:var(--font-h);font-weight:900;font-size:16px;color:#fff;line-height:1.4}
.drawer-brandname small{display:block;font-family:var(--font-b);font-size:11.5px;font-weight:400;color:#9db4c1;letter-spacing:.4px}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav-links>li{position:relative}
.nav-links a.nl{display:block;padding:12px 15px;text-decoration:none;color:var(--ink2);font-weight:700;font-size:15.5px;border-radius:10px}
.nav-links a.nl:hover{color:var(--g700);background:var(--cyan-soft)}
.nav-links a.nl.active{color:var(--g900);background:var(--cyan-soft);box-shadow:inset 0 -3px 0 var(--cyan)}
.has-drop .drop{position:absolute;top:calc(100% + 8px);right:0;min-width:560px;max-width:92vw;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-lg);padding:14px;display:none;grid-template-columns:1fr 1fr;gap:4px}
.has-drop:hover .drop,.has-drop:focus-within .drop{display:grid}
.drop a{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink2)}
.drop a:hover{background:var(--paper)}
.drop a b{display:block;font-size:14.5px}
.drop a span.dn{display:block;font-size:12.5px;color:var(--mut);font-weight:400}
.drop .di{width:34px;height:34px;flex:none;border-radius:10px;background:var(--g900);color:#fff;display:grid;place-items:center;font-size:16px}
.drop .di.o{background:var(--cyan);color:var(--g950)}
.burger{display:none;background:var(--g900);color:#fff;border:0;border-radius:12px;width:48px;height:48px;font-size:22px;cursor:pointer}
.drawer{display:none}

/* ---------- hero : تكوين بصري (صورة + نص + أرقام) ---------- */
.hero{position:relative;background:var(--g900);color:#fff;overflow:hidden;padding:0}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.55}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to left,rgba(4,18,29,.95) 26%,rgba(4,18,29,.80) 54%,rgba(4,18,29,.40));
}
.hero-layout{position:relative;z-index:3;padding:104px 0 96px;display:flex;align-items:center;min-height:min(88vh,720px)}
.hero-inner{max-width:860px}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);
  border:1px solid var(--line-d);border-radius:100px;padding:8px 18px;font-size:13.5px;font-weight:700;color:#d8ecf5}
.hero-badge i{width:8px;height:8px;border-radius:50%;background:var(--lime);display:inline-block}
.hero h1{color:#fff;font-size:clamp(32px,5.4vw,62px);font-weight:900;margin:20px 0 14px;letter-spacing:-.6px}
.hero h1 .o{color:var(--cyan)}
.hero p.lead{font-size:clamp(16.5px,2.2vw,20px);color:#cfe0ea;max-width:60ch;margin:0}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
/* شبكة أرقام الهيرو — 4 بطاقات (بنية الهوية الجديدة) */
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:40px;max-width:900px}
.hstat{padding:18px 20px;border:1px solid var(--line-d);background:rgba(255,255,255,.06);border-radius:18px}
.hstat b{display:block;font-family:var(--font-h);font-size:23px;line-height:1.2;color:#fff}
.hstat b em{font-style:normal;color:var(--cyan)}
/* الوسم بعد الرقم فقط — لا `.hstat span`، وإلا أصاب الـspan المتداخل
   داخل <b> فصار الرقم display:block (فينكسر «27+» على سطرين) وبحجم 12.5px رمادي */
.hstat > b + span{display:block;margin-top:7px;font-size:12.5px;color:#a8bdc8;line-height:1.6}

/* ---------- page hero (inner) ---------- */
.page-hero{background:var(--g900);color:#fff;position:relative;overflow:hidden}
.page-hero .ph-bg{position:absolute;inset:0;opacity:.32}
.page-hero .ph-bg img{width:100%;height:100%;object-fit:cover}
/* قصّ خاص بهيرو صفحة التواصل وحده. القاعدة أعلاه مشتركة في 17 صفحة، وصور pack
   نسبها مختلفة (4.17 و2.26 و2.72) وبعضها بيُقصّ أفقيًا — فتعديلها كان هيغيّر
   هيرو 15 صفحة بلا داعي.
   المصدر 1672×941 (1.78) والصندوق أعرض بكتير (3.63 عند 1280) فيُقصّ رأسيًا ويُعرض
   العرض كاملًا — يعني object-position الأفقي بلا أثر عند ≥768px، وعند 390px ينقلب
   لقصّ أفقي. 40% 40%: رأسيًا تُبقي لافتة SAFETY FIRST كاملة مع العمال (50% تقصّها)،
   وأفقيًا تُبقي الخوذة الصفراء بشعار «المصرية» في المنطقة الباينة يسار الهيرو
   (النص والتدرّج الداكن على اليمين). مُتحقَّق منها عند أقصى حركة Ken Burns (scale 1.1). */
.page-hero.hero-contact .ph-bg img{object-position:40% 40%}
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to left,rgba(4,18,29,.92) 22%,rgba(4,18,29,.62) 60%,rgba(4,18,29,.30))}
.page-hero .container{position:relative;padding:70px 0 88px;z-index:2}
/* الرسومات الأصلية للشركة — دمج screen يُخفي الأسود على الداكن */
.ph-orig{position:absolute;left:0;top:0;bottom:0;width:min(470px,42%);object-fit:contain;
  object-position:left bottom;mix-blend-mode:screen;opacity:.95;pointer-events:none;z-index:1;
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 22%);
  mask-image:linear-gradient(to left,transparent 0,#000 22%)}
@media(max-width:760px){
  .ph-orig{width:100%;object-position:center bottom;opacity:.28;
    -webkit-mask-image:none;mask-image:none}
}
.crumb{display:flex;gap:10px;align-items:center;font-size:13.5px;color:#a9c4d3;margin-bottom:14px;flex-wrap:wrap}
.crumb a{color:#fff;text-decoration:none}
.crumb a:hover{color:var(--cyan)}
.page-hero h1{color:#fff;font-size:clamp(28px,4.4vw,48px);margin-bottom:10px}
.page-hero p{color:#c3d6e1;max-width:68ch}
.page-hero .tick{margin-top:16px;background:var(--cyan)}

/* ---------- intro / split ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split .ph{position:relative}
.split .ph img.main{border-radius:var(--r-lg);box-shadow:var(--sh-lg);aspect-ratio:4/4.4;object-fit:cover;width:100%}
.split .ph::before{content:"";position:absolute;inset:22px -18px -18px 22px;border:2px solid var(--cyan);border-radius:var(--r-lg);z-index:-1}
.exp-card{position:absolute;bottom:26px;right:-14px;background:var(--g900);color:#fff;border-radius:18px;
  padding:16px 24px;box-shadow:var(--sh-lg);display:flex;gap:14px;align-items:center;border-inline-start:5px solid var(--cyan)}
.exp-card b{font-family:var(--font-h);font-size:30px;line-height:1}
.exp-card > b + span{font-size:13px;color:#b9cfdb}

/* ---------- services : filters + groups + tiles ---------- */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 38px}
.filter{border:1px solid var(--line);background:#fff;color:#4c5f6d;padding:11px 20px;border-radius:999px;
  font-family:var(--font-h);font-size:13.5px;font-weight:800;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.filter:hover{border-color:var(--cyan);color:var(--g700)}
.filter.active{background:var(--g900);border-color:var(--g900);color:#fff}
.svc-group{margin-bottom:56px}
.svc-group:last-of-type{margin-bottom:0}
.svc-group[hidden]{display:none}
.svc-group-head{display:flex;align-items:center;gap:15px;margin-bottom:24px}
.svc-group-mark{width:46px;height:46px;flex:none;border-radius:14px;background:var(--cyan-soft);color:var(--g700);
  font-family:var(--font-h);font-weight:900;font-size:20px;display:grid;place-items:center}
.svc-group-head h3{font-size:clamp(22px,2.6vw,29px);margin:0;letter-spacing:-.3px}
.svc-group-head p{margin:4px 0 0;color:#55636f;font-size:15px}
/* ثلاث أعمدة بدل أربعة. البطاقة كانت 277px داخل شبكة من 4 أعمدة، والمجموعات
   (3 + 5 + 3 خدمات) تترك 5 خانات فارغة في آخر صف — مع 3 أعمدة تبقى خانة واحدة
   فقط، والعرض يصعد إلى 373px فيصبح النص أسهل قراءة. */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .24s ease,box-shadow .24s ease}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.svc-card .im{position:relative;height:200px;overflow:hidden;display:block}
.svc-card .im img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.svc-card:hover .im img{transform:scale(1.05)}
.svc-card .im::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,18,29,.5),transparent 62%)}
.svc-card .svc-num{top:12px;left:12px}
.svc-card .svc-ico{bottom:14px;right:14px;width:44px;height:44px;border-radius:13px;border-width:2px}
.svc-card .svc-ico .ic{width:22px;height:22px}
.svc-card .svc-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
/* اسم الخدمة كان 18px — أصغر نص في القسم كله (عنوان القسم 46px، عنوان المجموعة
   27px) وهو أهم معلومة في البطاقة. رُفع إلى 21px بوزن 800 ليصبح التسلسل صحيحًا:
   عنوان المجموعة أكبر من اسم الخدمة، واسم الخدمة أكبر من الوصف. */
.svc-card .svc-body h3{font-size:21px;margin:0 0 10px;line-height:1.45;font-weight:800;letter-spacing:-.2px}
.svc-card .svc-body h3 a{color:var(--ink);text-decoration:none}
.svc-card .svc-body h3 a:hover{color:var(--g700)}
/* الوصف مقصوص على 3 سطور (line-clamp) حتى تتساوى الكروت رأسيًا — الطول الكامل
   موجود في صفحة الخدمة، والنقاط الثلاث في آخر السطر تدلّ على وجود بقية.
   اللون #55636f بدل --mut #63727e: تباينه 6.18:1 على الأبيض بدل 4.95:1. */
.svc-card .svc-body p{margin:0 0 18px;font-size:15.5px;color:#55636f;flex:1;line-height:1.85;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.svc-card .svc-link{margin-top:auto}
.svc-link{font-weight:800;color:var(--g700);text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-size:15px}
.svc-link:hover{color:var(--g900);gap:12px}
.svc-num{position:absolute;top:12px;left:12px;z-index:2;background:rgba(4,18,29,.86);color:#fff;font-family:var(--font-h);
  font-weight:800;font-size:13px;padding:6px 13px;border-radius:100px;border:1px solid var(--line-d)}
.svc-num em{font-style:normal;color:var(--lime)}
.svc-ico{position:absolute;bottom:-24px;right:20px;z-index:2;width:52px;height:52px;border-radius:14px;background:var(--cyan);
  color:var(--g950);display:grid;place-items:center;font-size:24px;box-shadow:var(--sh-s);border:3px solid #fff}

/* capability strip */
.cap-band{background:var(--g900);border-radius:var(--r-lg);padding:46px;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  position:relative;overflow:hidden;margin-top:44px}
.cap-band::before{content:"";position:absolute;top:0;right:0;width:220px;height:100%;background:var(--cyan);
  clip-path:polygon(38% 0,100% 0,100% 100%,0 100%);opacity:.9}
.cap{position:relative;color:#fff}
.cap b{font-family:var(--font-h);font-size:20px;display:block;margin-bottom:4px}
.cap span{font-size:14px;color:#b9cfdb}
.cap .n{font-family:var(--font-h);color:var(--cyan);font-weight:900;font-size:15px}

/* ---------- why / features ---------- */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:34px}
.why-card{background:#fff;border:1px solid var(--line);border-inline-start:5px solid var(--cyan);border-radius:var(--r);padding:26px;
  transition:transform .2s ease,box-shadow .2s ease}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--sh-s)}
.why-card.o{border-inline-start-color:var(--org)}
.why-card h3,.why-card .why-h{font-size:19px;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.why-card p{margin:0;color:var(--mut);font-size:15.5px}
/* لوحة بصرية + بنود (نمط «لماذا المصرية» الجديد) */
.feature{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;align-items:stretch}
.visual{position:relative;min-height:480px;border-radius:var(--r-lg);overflow:hidden}
/* 50% 50% مُتحقَّق منها على المصدر العمودي 1024×1536: رؤوس الفريق الأربعة
   والمخطط تبقى داخل الإطار عند 1280 و1020 و390 (الافتراضي، لكن مثبَّتة صراحةً هنا). */
.visual img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.visual::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,18,29,0) 38%,rgba(4,18,29,.92) 100%)}
.caption{position:absolute;bottom:26px;right:26px;left:26px;z-index:2;color:#fff}
.caption strong{display:block;font-family:var(--font-h);font-size:clamp(22px,2.8vw,30px);line-height:1.3}
.caption span{display:block;color:#c3d6e1;margin-top:8px;font-size:14.5px}
.features{display:grid;gap:14px}
.feature-item{padding:24px;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  transition:transform .2s ease,box-shadow .2s ease}
.feature-item:hover{transform:translateY(-3px);box-shadow:var(--sh-s)}
.feature-item .icon{width:44px;height:44px;border-radius:14px;background:var(--g900);color:#fff;
  display:grid;place-items:center;font-family:var(--font-h);font-weight:900;font-size:15px;margin-bottom:14px}
.feature-item h3{margin:0 0 6px;font-size:19px}
.feature-item p{margin:0;color:var(--mut);font-size:15px}

/* ---------- process : 3 مراحل ---------- */
.proc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.proc-step{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;position:relative;overflow:hidden;
  transition:transform .24s ease,box-shadow .24s ease}
.proc-step::before{content:"";position:absolute;top:0;right:0;left:0;height:4px;
  background:linear-gradient(to left,var(--cyan),var(--lime))}
.proc-step:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.proc-num{font-family:var(--font-h);font-weight:900;font-size:12px;letter-spacing:.18em;color:var(--g700)}
.proc-step h3{font-size:21px;margin:12px 0 8px}
.proc-step p{margin:0;color:var(--mut);font-size:15px}

/* ---------- sectors ---------- */
.sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.sector-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px}
.sector{position:relative;border-radius:22px;overflow:hidden;min-height:250px;display:flex;align-items:flex-end;
  text-decoration:none;color:#fff}
.sector img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.sector:hover img{transform:scale(1.06)}
.sector::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,18,29,.94) 18%,rgba(4,18,29,.35) 62%,transparent)}
.sector div{position:relative;z-index:2;padding:22px}
.sector b{font-family:var(--font-h);font-size:17px;display:block}
.sector span{font-size:13.5px;color:#c3d6e1}

/* ---------- chairman / leadership ---------- */
/* بطاقة القيادة — تُستخدم في الرئيسية (06 · القيادة) وفي «من نحن» (04 · القيادة).
   عمودان: لوحة الصورة ثم المحتوى. في RTL يأخذ الأول العمود الأيمن فتقع الصورة يمينًا. */
/* بطاقة القيادة — بيضاء على قسم أبيض، بلا شبكة. لوحة الصورة تحتفظ
   بالصورة + التدرّج الداكن لأن الاسم أبيض فوق الصورة ولازم يفضل مقروء. */
.chair-card{position:relative;overflow:hidden;border-radius:var(--r-lg);background:#fff;
  color:var(--ink);display:grid;grid-template-columns:320px 1fr;
  border:1px solid var(--line);box-shadow:var(--sh-lg)}
.chair-card>*{position:relative;z-index:2}
/* لوحة الصورة — التدرّج يضمن قراءة الاسم فوق أي صورة */
/* المصدر 1254×1254 (مربّع) والبورتريه معروض بحد أقصى 460px عرضًا/طولًا.
   النسخ المُهيّأة: chairman-480/960.webp — وما تحت الصورة خلفية ضبابية منها
   نفسها (نسخة 480 تكفي لأنها مموّهة 30px) فمفيش فراغ ميت. */
.cc-side{position:relative;min-height:420px;overflow:hidden;background:var(--g850)}
.cc-side::before{content:"";position:absolute;inset:0;z-index:0;
  background:url(../img/chairman-480.webp) center 25%/cover no-repeat;
  filter:blur(30px);transform:scale(1.15);opacity:.5}
.cc-side>img{position:absolute;top:0;left:0;width:100%;height:min(100%,460px);
  object-fit:cover;object-position:50% 18%;z-index:1}
.cc-side::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(to top,rgba(4,18,29,.97) 0%,rgba(4,18,29,.80) 30%,
    rgba(4,18,29,.18) 62%,transparent 82%)}
.cc-meta{position:absolute;inset:auto 0 0 0;z-index:3;padding:20px 18px;text-align:center}
.cc-meta h3{color:#fff;margin:0;font-size:19px;line-height:1.3}
.cc-meta .role-chip{margin-top:9px;font-size:12.5px;padding:5px 16px}
.cc-meta .btn{margin-top:13px}
.cc-quote{margin:13px 0 0;font-size:12.5px;line-height:1.65;color:#cfe0ea;text-align:start;
  border-inline-start:2px solid var(--lime);padding-inline-start:10px}
/* محتوى البطاقة */
.cc-body{padding:38px 34px;display:flex;flex-direction:column}
.cc-body .kicker{color:var(--g700);margin-bottom:12px}
.cc-body .kicker::before{background:var(--lime-d)}
.cc-body h3{color:var(--ink);font-size:clamp(20px,2.3vw,26px);line-height:1.45;margin:0 0 14px}
/* اللايم على الأبيض يسقط — نستخدم النسخة الغامقة جوه البطاقة فقط */
.cc-body .hl-lime{color:var(--lime-d)}
.cc-body p{color:var(--mut);margin:0}
.cc-body .svc-link{margin-top:22px;color:var(--g700);align-self:flex-start}
.cc-body .svc-link:hover{color:var(--g900)}
.cc-actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
/* أرقام الملف المهني — أيقونة فوق الرقم فوق الوسم */
.kstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0 0}
.kstat{text-align:center}
.kstat .ki{width:46px;height:46px;margin:0 auto 10px;border-radius:14px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line)}
.kstat .ki .ic{width:22px;height:22px}
.kstat b{display:block;font-family:var(--font-h);font-size:24px;line-height:1.1;color:var(--ink)}
.kstat > b + span{display:block;margin-top:5px;color:var(--mut);font-size:12px;line-height:1.5}
/* ألوان الأيقونات على الأبيض: السماوي 2.92 واللايم 1.62 والبرتقالي الفاتح 2.34 — كلهم يسقطوا AA */
.kstat.cyan .ki{color:var(--g700)}
.kstat.lime .ki{color:var(--lime-d)}
.kstat.org .ki{color:var(--org-d)}
/* قائمة المؤهلات — أيقونة لايم + النص، عمودان */
.cred-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 0;list-style:none;padding:0}
.cred-item{display:flex;gap:10px;align-items:center;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:12.5px;
  line-height:1.45;color:var(--ink)}
.cred-item .ci{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:rgba(95,107,0,.12);color:var(--lime-d)}
.cred-item .ci .ic{width:16px;height:16px}
/* قسم القيادة — أبيض ناصع بلا أي زخرفة أو خطوط خلفية */
.sec-lead{position:relative;background:#fff}
.sec-lead .container{position:relative;z-index:1}
.role-chip{display:inline-block;margin-top:10px;background:var(--org-d);color:#fff;
  font-weight:800;font-size:14px;border-radius:100px;padding:6px 20px;letter-spacing:.4px}

/* ---------- values / policy ---------- */
.pol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.pol{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;position:relative;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease}
.pol::before{content:"";position:absolute;top:0;right:0;left:0;height:5px;background:linear-gradient(to left,var(--cyan),var(--lime))}
.pol:hover{transform:translateY(-4px);box-shadow:var(--sh-s)}
.pol h3{font-size:19px}
.pol p{color:var(--mut);font-size:15px;margin:0}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,var(--g900),var(--g950));border-radius:var(--r-lg);color:#fff;padding:56px;
  display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;top:-40px;left:-40px;width:260px;height:260px;border:26px solid rgba(0,163,213,.28);border-radius:50%}
.cta-band h2{color:#fff;font-size:clamp(24px,3.4vw,38px);position:relative}
.cta-band p{color:#bfd3de;position:relative}
.cta-band .kicker{color:var(--cyan);position:relative}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;position:relative}
.tel-big{display:inline-flex;align-items:center;gap:12px;background:#fff;border-radius:var(--r-sm);padding:13px 22px;
  font-family:var(--font-h);font-weight:900;font-size:21px;color:var(--g900);text-decoration:none;direction:ltr}
.tel-big:hover{background:var(--cyan-soft)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px;align-items:start}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.info-card h3,.info-card .card-h{font-size:18px;margin-bottom:14px}
.tel-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tel-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;padding:12px 16px;text-decoration:none;color:var(--g900);
  font-weight:800;direction:ltr}
.tel-list a:hover{background:var(--cyan-soft);border-color:var(--cyan)}
.tel-list a span{font-size:12.5px;color:var(--mut);font-weight:400}
/* صف واتساب في كارت البيانات. بلون واتساب الرسمي #25d366 لأن هذا هو ما يتعرّف
   عليه الزائر فورًا كزر واتساب — الأخضر الداكن #04331a عليه تباينه 12.4:1. */
.wa-first a{display:flex;align-items:center;gap:12px;background:#25d366;color:#04331a;
  border-radius:var(--r-sm);padding:14px 18px;text-decoration:none;transition:background .2s ease}
.wa-first a:hover{background:#1eb857}
.wa-first a b{font-size:20px;font-weight:800;letter-spacing:.3px;direction:ltr}
.wa-first a span{margin-inline-start:auto;font-size:12.5px;font-weight:700;white-space:nowrap;
  background:rgba(4,51,26,.15);border-radius:100px;padding:4px 14px}
.wa-first .ic{width:24px;height:24px;flex:none}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f-group{margin-bottom:16px}
.f-group label{display:block;font-weight:700;font-size:14.5px;margin-bottom:6px}
.f-group input,.f-group select,.f-group textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;
  padding:12px 14px;font-family:inherit;font-size:15px;background:#fff;color:var(--ink)}
.f-group input:focus,.f-group select:focus,.f-group textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-soft)}
.f-err{color:#b3261e;font-size:13px;min-height:20px;margin:4px 0 0}
.map-frame{border:0;border-radius:var(--r);width:100%;height:320px;margin-top:22px}

/* ---------- service detail ---------- */
.svc-layout{display:grid;grid-template-columns:1fr 330px;gap:34px;margin-top:40px;align-items:start}
.svc-main .lead{font-size:18px;color:var(--ink2)}
.svc-main h2{font-size:24px;margin-top:34px}
.svc-points{list-style:none;padding:0;margin:18px 0;display:grid;gap:12px}
.svc-points li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;display:flex;gap:12px;align-items:flex-start}
.svc-points .n{flex:none;width:34px;height:34px;border-radius:10px;background:var(--g900);color:#fff;font-family:var(--font-h);
  font-weight:800;display:grid;place-items:center;font-size:15px}
.svc-points li:nth-child(even) .n{background:var(--cyan);color:var(--g950)}.svc-side{position:sticky;top:110px;display:grid;gap:18px}
.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.side-card.dark{background:var(--g900);color:#fff;border-color:var(--g900)}
.side-card.dark h3,.side-card.dark .side-h{color:#fff}
.side-card h3,.side-card .side-h{font-size:17px;margin-bottom:12px}
.side-card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.side-card ul a{color:var(--ink2);text-decoration:none;font-size:14.5px;display:flex;justify-content:space-between;align-items:center;
  padding:9px 12px;border-radius:10px;background:var(--paper)}
.side-card ul a:hover{background:var(--cyan-soft);color:var(--g700)}
.side-card ul a[aria-current="page"]{background:var(--g900);color:#fff;font-weight:800}
.side-card ul a[aria-current="page"] .ic{color:var(--cyan)}
.side-card.dark .tel-big{font-size:17px;padding:10px 14px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.rel-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);
  transition:transform .2s ease,box-shadow .2s ease}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--sh-s)}
.rel-card img{height:150px;width:100%;object-fit:cover}
.rel-card div{padding:16px 18px}
.rel-card b{font-size:16px}
.rel-card span{display:block;font-size:13.5px;color:var(--mut)}

/* ---------- footer ---------- */
footer{background:var(--g950);color:#bfd3de;margin-top:0}
.foot-cut{height:24px;background:var(--w);clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:36px;padding:66px 0 40px}
.foot-grid h4,.foot-grid .foot-h{color:#fff;font-size:16.5px;margin-bottom:16px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-grid ul a{color:#bfd3de;text-decoration:none;font-size:14.5px}
.foot-grid ul a:hover{color:var(--cyan)}
.foot-brand p{font-size:14.5px}
.foot-contact li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start}
.foot-contact a{color:#fff;font-weight:700}
.foot-bottom{border-top:1px solid var(--line-d);padding:20px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px}

/* ---------- misc ---------- */
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.tag{background:var(--cyan-soft);color:var(--g700);font-size:13.5px;font-weight:700;border-radius:100px;padding:6px 16px}
.note-box{background:var(--org-t);border:1px solid #f2c79b;border-inline-start:5px solid var(--org);border-radius:12px;padding:18px 22px;color:#7a3c0c}
.aud{display:flex;gap:10px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;padding:12px 18px;
  font-size:15.5px;color:var(--ink2);margin-top:16px}
.aud::before{content:"";width:10px;height:10px;background:var(--cyan);border-radius:2px;flex:none;margin-top:8px}
.aud b{color:var(--g800)}
.faq-list{display:grid;gap:12px;margin-top:22px}
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:12px;padding:16px 20px;font-family:var(--font-h);
  font-weight:800;font-size:16.5px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--cyan);font-weight:900;line-height:1;flex:none}
.faq[open] summary::after{content:"–"}
.faq[open]{border-color:var(--cyan)}
.faq summary + p{margin:0;padding:0 20px 18px;color:var(--ink2);font-size:16px}.tel-first a{display:flex;align-items:center;gap:12px;background:var(--g900);color:#fff;
  border-radius:var(--r-sm);padding:16px 20px;font-size:24px;font-weight:800;text-decoration:none}
.tel-first a span{font-size:13px;font-weight:700;background:var(--org-d);border-radius:100px;padding:4px 14px}
.timeline{position:relative;margin-top:34px}
.timeline::before{content:"";position:absolute;top:10px;bottom:10px;right:27px;width:2px;background:var(--line)}
.tl-item{position:relative;display:flex;gap:22px;padding:18px 0}
.tl-item::before{content:"";position:absolute;top:28px;right:20px;width:16px;height:16px;border-radius:50%;
  background:var(--w);border:4px solid var(--cyan);z-index:1}
.tl-year{flex:none;width:120px;text-align:center;font-family:var(--font-h);font-weight:900;font-size:19px;
  color:#fff;background:var(--g900);border-radius:12px;padding:10px 6px;align-self:flex-start}
.tl-item:nth-child(3) .tl-year{background:var(--cyan);color:var(--g950)}
.tl-item div b{font-size:17.5px}
.tl-item div p{margin:4px 0 0;color:var(--mut);font-size:15.5px;max-width:60ch}
.statements{margin-top:30px;border-top:2px solid var(--g900)}
.statement{display:grid;grid-template-columns:84px 1fr;gap:20px;padding:28px 4px;border-bottom:1px solid var(--line);align-items:start}
.st-no{font-family:var(--font-h);font-weight:900;font-size:42px;line-height:1;color:var(--g700)}
.statement:nth-child(2) .st-no{color:var(--cyan)}
.statement:nth-child(3) .st-no{color:var(--g900)}
.statement h3{font-size:21px;margin:0 0 6px}
.statement p{margin:0;color:var(--ink2);font-size:17.5px;max-width:72ch}
.band-paper{background:var(--paper2)}
table.info{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;font-size:15px}
table.info td{border-bottom:1px solid var(--line);padding:13px 18px}
table.info tr td:first-child{font-weight:800;color:var(--g900);width:34%}/* --- technical panel --- */
.tech-panel{background:var(--g950);color:#e3eef4;border-radius:var(--r-lg);
  padding:34px clamp(22px,4vw,44px);position:relative;overflow:hidden;margin-top:30px}
.tech-panel::after{content:"";position:absolute;top:0;right:0;left:0;height:4px;
  background:linear-gradient(to left,var(--cyan),var(--lime))}
.tech-panel h2{color:#fff;position:relative}
.tech-panel ul{position:relative;list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.tech-panel li{display:flex;gap:12px;align-items:flex-start;color:#cfe0ea;font-size:16.5px}
.tech-panel li .ic{color:var(--cyan);width:20px;height:20px;margin-top:6px}/* --- service clusters (index + services index) --- */
.svc-clusters{display:grid;gap:60px;margin-top:40px}
.cluster-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:22px}
.cluster-no{flex:none;width:54px;height:54px;border-radius:16px;background:var(--g900);color:#fff;
  font-family:var(--font-h);font-weight:900;font-size:24px;display:grid;place-items:center}
.cluster:nth-child(2) .cluster-no{background:var(--cyan);color:var(--g950)}
.cluster:nth-child(3) .cluster-no{background:var(--g700)}
.cluster-head h3,.cluster-head .cluster-h{font-size:23px;margin:0}
.cluster-head p{margin:4px 0 0;color:var(--mut);font-size:15.5px;max-width:60ch}
.cluster-feat{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:8px}
.cluster.flip .cf-img{order:2}
.cf-img{position:relative;min-height:280px;display:block;overflow:hidden}
.cf-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cluster-feat:hover .cf-img img{transform:scale(1.05)}
.cf-img .svc-num{position:absolute;top:14px;left:14px;z-index:2}
.cf-img .svc-ico{bottom:16px;right:16px}
.cf-body{padding:36px 34px;display:flex;flex-direction:column;justify-content:center}
.cf-body .kicker{margin-bottom:8px}
.cf-body h4,.cf-body .cf-h{font-size:22px;margin:0 0 8px}
.cf-body h4 a,.cf-body .cf-h a{color:var(--ink);text-decoration:none}
.cf-body h4 a:hover,.cf-body .cf-h a:hover{color:var(--g700)}
.cf-body p{color:var(--mut);font-size:15.5px;margin:0 0 18px}
.svc-rows{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line)}
.svc-rows li{border-bottom:1px solid var(--line)}
.svc-rows a{display:flex;align-items:center;gap:16px;padding:15px 6px;text-decoration:none;color:var(--ink)}
.svc-rows a:hover{background:var(--paper)}
.sr-no{font-family:var(--font-h);font-weight:900;color:var(--g700);font-size:15px;min-width:30px}
.sr-ic{width:46px;height:46px;flex:none;border-radius:13px;background:var(--paper);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--g800);transition:background .2s ease,color .2s ease}
.sr-ic .ic{width:23px;height:23px}
.svc-rows a:hover .sr-ic{background:var(--g900);color:#fff;border-color:var(--g900)}
.sr-tx{flex:1;min-width:0}
.sr-tx b{display:block;font-size:16.5px}
.sr-tx span{display:block;font-size:13.5px;color:var(--mut)}
.sr-go{color:var(--g700);font-weight:900;font-size:18px;transition:transform .2s ease;display:inline-flex;align-items:center}
.sr-go .ic{width:19px;height:19px}
.svc-rows a:hover .sr-go{transform:translateX(-6px)}
.cluster-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--g900);color:#fff;border-radius:var(--r-lg);padding:32px 36px;position:relative;overflow:hidden}
.cluster-cta::before{content:"";position:absolute;top:0;bottom:0;left:0;width:120px;background:var(--cyan);
  clip-path:polygon(0 0,100% 0,55% 100%,0 100%);opacity:.9}
.cluster-cta p{margin:0;color:#bfd3de;position:relative}
.cluster-cta b{color:#fff}
.cluster-cta .btn{position:relative}
/* تمييز بصري لكل مجموعة خدمات */
.svc-a .page-hero{border-bottom:5px solid var(--cyan)}
.svc-b .page-hero{border-bottom:5px solid var(--lime)}
.svc-c .page-hero{border-bottom:5px solid var(--org)}
body.svc-a .page-hero .tick{background:var(--cyan)}
body.svc-b .page-hero .tick{background:var(--lime)}
body.svc-c .page-hero .tick{background:var(--org)}
.svc-a .lead{font-size:clamp(19px,2.6vw,24px);font-weight:700;color:var(--ink)}
.svc-a .svc-points li{border-inline-start:4px solid var(--cyan)}
body.svc-b .svc-points .n{background:var(--g700)}
body.svc-b .svc-points li:nth-child(even) .n{background:var(--lime);color:var(--g950)}
body.svc-c .svc-points .n{background:var(--g900)}
body.svc-c .svc-points li:nth-child(even) .n{background:var(--cyan);color:var(--g950)}
body.svc-b .side-card.dark{background:var(--g800)}
/* variant B — borderless capability rows */
body.svc-b .svc-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0}
body.svc-b .svc-points li{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start;
  background:none;border:0;border-top:2px solid var(--line);border-radius:0;
  padding:20px 4px;box-shadow:none}
body.svc-b .svc-points li:last-child{border-bottom:2px solid var(--line)}
body.svc-b .svc-points .n{font-family:var(--font-h);font-weight:900;font-size:30px;color:var(--g800);
  background:none;width:auto;height:auto;border-radius:0}
body.svc-b .svc-points li:nth-child(even) .n{background:none;color:var(--g800)}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in,.reveal.show{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.4s}
.reveal-img{clip-path:inset(10% 7% 10% 7% round 18px);opacity:0;transform:scale(.985);
  transition:clip-path .9s cubic-bezier(.2,.7,.2,1),opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal-img.in{clip-path:inset(0 0 0 0 round 18px);opacity:1;transform:none}
.hero-layout .hero-inner>*{opacity:0;transform:translateY(30px);animation:heroUp .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero-layout .hero-inner>*:nth-child(1){animation-delay:.05s}
.hero-layout .hero-inner>*:nth-child(2){animation-delay:.16s}
.hero-layout .hero-inner>*:nth-child(3){animation-delay:.27s}
.hero-layout .hero-inner>*:nth-child(4){animation-delay:.38s}
.hero-layout .hero-inner>*:nth-child(5){animation-delay:.49s}
.hero-layout .hero-inner.anim-done>*{animation:none;opacity:1;transform:none}
@keyframes heroUp{to{opacity:1;transform:none}}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.1)}}
.hero-media img{animation:kb 26s ease-in-out infinite alternate;will-change:transform}
.page-hero .ph-bg img{animation:kb 34s ease-in-out infinite alternate}

/* ---------- icons (SVG sprite) ---------- */
.ic{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em;flex:none}
.ic-fill{fill:currentColor;stroke:none}
.di .ic{width:20px;height:20px}
.svc-ico .ic{width:26px;height:26px}
.page-hero h1 .ic-h{width:.92em;height:.92em;vertical-align:-.1em;color:var(--cyan)}
.why-card h3 .ic,.why-card .why-h .ic,.pol h3 .ic,.info-card h3 .ic,.info-card .card-h .ic,.form-card h3 .ic{color:var(--g700);width:1.05em;height:1.05em;vertical-align:-.14em}
.foot-contact .ic{color:var(--cyan);width:18px;height:18px}
.tel-big .ic{color:var(--g900);width:22px;height:22px}
.mobile-call .ic{width:20px;height:20px;vertical-align:-.18em}
.burger .ic{width:24px;height:24px;vertical-align:0}
button[data-close]{display:grid;place-items:center;line-height:0}
button[data-close] .ic{width:19px;height:19px}
.nav-links a.nl .ic{width:.85em;height:.85em;margin-inline-start:5px;vertical-align:-.06em}
.nav-links a.nl:hover .ic{color:var(--g700)}
.btn .ic{width:1.05em;height:1.05em}
.svc-link .ic{width:1em;height:1em;transition:transform .2s ease}
.svc-link:hover .ic{transform:translateX(-3px)}
.side-card ul a .ic{width:16px;height:16px;color:var(--g700)}
.side-card ul a:hover .ic{color:var(--g700)}
/* لمعة الأزرار — بيضاء على الداكن، داكنة على الفاتح */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:-10%;bottom:-10%;width:36%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .55s ease;pointer-events:none}
.btn-primary::after,.btn-org::after,.btn-light::after{
  background:linear-gradient(100deg,transparent,rgba(4,18,29,.16),transparent)}
.btn:hover::after{left:135%}
@media (prefers-reduced-motion:reduce){.btn::after{display:none}}
/* تعويض الهيدر الثابت للروابط الداخلية */
section[id],div[id],form[id]{scroll-margin-top:96px}
/* شريط تقدم القراءة */
#progress{position:fixed;top:0;right:0;left:0;height:3px;z-index:90;
  background:linear-gradient(to left,var(--cyan),var(--lime));
  transform:scaleX(0);transform-origin:right;will-change:transform}
/* زر الصعود */
#toTop{position:fixed;bottom:24px;right:24px;left:auto;z-index:80;width:52px;height:52px;border-radius:50%;
  border:0;background:var(--g900);color:#fff;display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--sh);opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,background .2s ease}
#toTop.show{opacity:1;transform:none;pointer-events:auto}
#toTop:hover{background:var(--cyan);color:var(--g950)}
#toTop:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
#toTop .ic{width:22px;height:22px}
/* مؤشر النزول في الهيرو */
.scroll-cue{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);z-index:4;
  width:30px;height:50px;border:2px solid rgba(255,255,255,.5);border-radius:16px;
  pointer-events:none;transition:opacity .35s ease}
.scroll-cue span{position:absolute;top:8px;right:50%;transform:translateX(50%);width:5px;height:9px;
  border-radius:3px;background:var(--cyan);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:1;top:8px}70%{opacity:0;top:22px}100%{opacity:0;top:8px}}
.scroll-cue.off{opacity:0}
/* واتساب */
#waFloat{position:fixed;bottom:24px;left:24px;z-index:85;width:58px;height:58px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;text-decoration:none;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.65);transition:transform .2s ease}
#waFloat:hover{transform:scale(1.08)}
#waFloat .ic{width:30px;height:30px}
#waFloat::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(37,211,102,.7);animation:waPing 2.2s ease-out infinite;pointer-events:none}
@keyframes waPing{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){
  #waFloat::before,.scroll-cue span{animation:none}
  .hero-media img,.page-hero .ph-bg img{animation:none!important}
  .hero-inner>*{opacity:1!important;transform:none!important;animation:none!important}
  .reveal,.reveal-img{opacity:1!important;transform:none!important;clip-path:none!important}
}
.has-drop.open .drop{display:grid}
/* ---------- drawer ---------- */
.drawer .dl.dsvc{border-top:1px dashed var(--line-d);font-size:14.5px}
.drop-h{grid-column:1/-1;font-family:var(--font-h);font-weight:800;font-size:13px;
  color:var(--g700);padding:10px 12px 0}
.drop-h:first-child{padding-top:2px}
.dl-h{display:block;font-family:var(--font-h);font-weight:800;font-size:13.5px;
  color:var(--cyan);padding:12px 4px 2px;border-top:1px solid var(--line-d);margin-top:8px}
.mobile-call{display:none}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .sectors{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1020px){
  section,.section{padding:78px 0}
  .hero-layout{padding:84px 0 78px}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .cap-band{grid-template-columns:repeat(2,1fr)}
  .sector-grid{grid-template-columns:repeat(2,1fr)}
  .sectors{grid-template-columns:repeat(2,1fr)}
  .pol-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:40px}
  .feature{grid-template-columns:1fr}
  .grid2,.about{grid-template-columns:1fr}
  .about-copy{padding:6px 14px 22px}
  /* الشكل ثابت 3/2 مع min-height حتى لا يتحكّم الأصل الرأسي (1024×1536) في ارتفاع الكتلة.
     بلا aspect-ratio كان height:100% على الصورة لا يقيّد شيئًا لأن الأب ارتفاعه auto،
     فيرسم المتصفح الصورة بنسبتها الطبيعية → كتلة 908×1362 بدل 908×606 (ارتفاع الصفحة +757px).
     بهذين السطرين: height = max(min-height, width/1.5) = نفس هندسة ما قبل التبديل بالحرف. */
  .about-image{min-height:280px;aspect-ratio:3/2}
  .visual{min-height:360px;aspect-ratio:3/2}
  .proc-steps{grid-template-columns:1fr}
  .cta-band{grid-template-columns:1fr}
  .cta-btns{justify-content:flex-start}
  .chair-card{grid-template-columns:1fr}
  /* لوحة القيادة على الشاشات الضيقة: الصورة في نطاق خاص بها والاسم تحتها —
     بلا تراكب. السبب: كتلة الاسم (اسم + شريحة + اقتباس + زر ≈ 225px) كانت تُرسم
     فوق الصورة فيقع الاسم على وجه الرئيس. ده عطل قديم مش من الصورة الجديدة —
     ظهر في لقطة v23 بالصورة القديمة بنفس الشكل.
     مفيش ارتفاع ثابت يحلّها: `cover` بيغيّر مقاس الوجه مع عرض الحاوية، فالنسبة
     بين موضع الوجه وارتفاع اللوحة بتتغيّر من موبايل لتابلت. الحل بالتدفّق (flow)
     مضمون على كل العروض — التحقق بلقطات 390/768/1000 (v24). */
  .cc-side{--ph:min(92vw,440px);min-height:0}
  .cc-side>img{position:relative;top:auto;left:auto;display:block;
    width:100%;height:var(--ph);object-fit:cover;object-position:50% 26%}
  .cc-side::before{display:none}
  .cc-side::after{inset:0 0 auto 0;height:var(--ph);
    background:linear-gradient(to top,rgba(4,18,29,.9) 0%,rgba(4,18,29,.28) 40%,transparent 70%)}
  .cc-meta{position:relative;inset:auto;padding:22px 18px 26px}
  .kstats{grid-template-columns:1fr 1fr;gap:10px}
  .svc-layout{grid-template-columns:1fr}
  .svc-side{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .burger{display:grid;place-items:center}
  .drawer{display:block;position:fixed;inset:0;z-index:100;pointer-events:none}
  .drawer .scrim{position:absolute;inset:0;background:rgba(4,18,29,.65);opacity:0;transition:opacity .25s}
  .drawer .panel{position:absolute;top:0;bottom:0;right:0;width:min(360px,88%);background:var(--g950);color:#fff;
    padding:26px;overflow:auto;transform:translateX(100%);transition:transform .28s ease}
  .drawer.open{pointer-events:auto}
  .drawer.open .scrim{opacity:1}
  .drawer.open .panel{transform:none}
  .drawer a.dl{display:block;color:#fff;text-decoration:none;font-weight:700;padding:12px 10px;border-bottom:1px solid var(--line-d)}
  .drawer a.dl:hover{color:var(--cyan)}
  .drawer .dsvc{font-size:14px;padding-inline-start:22px;color:#bfd3de}
  .rel-grid{grid-template-columns:repeat(2,1fr)}
  .sec-head{display:block}
  .sec-head>div{max-width:none}
  .sec-head .sec-sub{margin-top:12px;max-width:none}
  .cc-body{padding:28px 22px}
  .cluster-feat{grid-template-columns:1fr}
  .cluster.flip .cf-img{order:0}
  .cf-img{min-height:0;height:220px}
  .cf-body{padding:26px 24px}
  .cluster-cta{flex-direction:column;align-items:stretch;text-align:center}
  .sr-tx span{display:none}
}
@media(max-width:640px){
  body{font-size:15.5px}
  section,.section{padding:58px 0}
  .navbar{padding:8px 0;gap:8px}
  .navbar .btn{display:none}
  .brand{min-width:0;flex:1;gap:8px}
  .brand-logo{height:42px;width:42px}
  .brand-name{font-size:15px;line-height:1.4}
  .brand-name small{display:none}
  .brand-mark{width:38px;height:38px;font-size:15px;border-radius:10px}
  .burger{width:44px;height:44px}
  .hero-layout{min-height:0;padding:56px 0 60px}
  .hero-stats{grid-template-columns:1fr 1fr;gap:9px}
  .hstat{padding:14px}
  .hstat b{font-size:19px}
  .hstat > b + span{font-size:11.5px}
  /* بلاطات أرقام "من نحن" على الشاشات الصغيرة — أيقونة وخطوط أصغر حتى لا يلتف النص ٣ أسطر */
  .stats{gap:9px}
  .stat{padding:14px;gap:11px;border-radius:14px}
  .stat .si{width:34px;height:34px;border-radius:10px}
  .stat .si .ic{width:17px;height:17px}
  .stat .num b{font-size:22px}
  .stat .num .lbl{font-size:11.5px;margin-top:4px}
  .stat .bar{width:24px;margin-top:7px}
  .hero-cta .btn{width:100%}
  .svc-grid,.sectors,.sector-grid,.pol-grid,.proc-steps{grid-template-columns:1fr}
  .cap-band{grid-template-columns:1fr;padding:32px}
  .contact-grid{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr}
  .cta-band{padding:36px 26px}
  .foot-grid{grid-template-columns:1fr}
  .cred-list{grid-template-columns:1fr}
  .rel-grid{grid-template-columns:1fr}
  .exp-card{right:8px;left:8px}
  .timeline::before{right:19px}
  .tl-item::before{right:12px}
  .tl-year{width:88px;font-size:15px}
  .statement{grid-template-columns:56px 1fr;gap:14px}
  .st-no{font-size:32px}
  .tech-panel{padding:26px 20px}
  .scroll-cue{display:none}
  #toTop{bottom:86px;right:14px;left:auto}
  /* شريط الجوال السفلي بقى فيه زر واتساب بعرض كامل وبنص واضح، فبقاء الزر العائم
     معناه دعوتان أخضران لنفس الشيء على نفس الشاشة. الزر اللي في الشريط أسهل
     وصولًا بالإبهام وأوضح، فالزر العائم بيتخفي على الموبايل بس (فوق 640px
     الشريط مش ظاهر أصلًا فالزر العائم بيفضل زي ما هو). */
  #waFloat{display:none}
  .mobile-call{display:flex;position:fixed;bottom:0;right:0;left:0;z-index:70;background:var(--g950);
    border-top:3px solid var(--cyan);padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px}
  .mobile-call a{flex:1;text-align:center;text-decoration:none;font-family:var(--font-h);font-weight:800;
    border-radius:12px;padding:12px;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
  .mobile-call .mc-tel{background:var(--cyan);color:var(--g950)}
  /* كان الزر بكلاس mc-wa لكنه لا يفتح واتساب إطلاقًا: يفتح mailto على صفحة
     التواصل، وصفحة contact.html على باقي الصفحات. صار الآن رابط واتساب حقيقي
     بلون العلامة، فأصبح الاسم مطابقًا للسلوك. */
  .mobile-call .mc-wa{background:#25d366;color:#04331a}
  body{padding-bottom:70px}
}
@media print{
  .site-head,.drawer,.mobile-call,.cta-band,.topbar,#progress,#toTop,.scroll-cue,#waFloat{display:none}
}