/*
Theme Name:   ECS Design System
Theme URI:    https://ecs-eg.com
Description:  نظام تصميم ECS — الطبقة المخصصة فوق Hello Elementor. كل ألوان وخطوط ومكوّنات الموقع تُدار من هذا الملف وحده.
Author:       Ahmed Helmy — Digital Solutions
Author URI:   https://ahmedhelmy.me
Template:     hello-elementor
Version:      1.15.0
Text Domain:  ecs-child
*/

/* ============================================================
   00 — TOKENS
   المصدر الوحيد للحقيقة. أي لون أو مقاس في الموقع يرجع لهنا.
   ============================================================ */
:root{
  /* الألوان — مستخرجة من ملف الشعار الأصلي */
  --ecs-ink:      #0F1D2C;   /* الكحلي الرسمي */
  --ecs-ink-2:    #18293F;
  --ecs-ink-deep: #050D18;
  --ecs-line-d:   #2A3E58;   /* حدود على خلفية داكنة */
  --ecs-steel:    #64798F;

  --ecs-paper:    #F4F5F3;   /* خلفية الموقع */
  --ecs-white:    #FFFFFF;
  --ecs-line:     #DDE0DC;   /* حدود على خلفية فاتحة */

  --ecs-hv:       #F2A007;   /* الكهرماني — مسار الباحثين عن عمل */
  --ecs-hv-d:     #B87600;
  --ecs-hv-soft:  #FDF3DD;
  --ecs-hv-ink:   #2A1D00;

  --ecs-body:     #3B4757;   /* لون النص الأساسي */
  --ecs-muted:    #6C7A8B;   /* نص ثانوي */

  /* الخطوط */
  --ecs-display: 'Barlow Condensed', system-ui, sans-serif;
  --ecs-sans:    'Barlow', system-ui, sans-serif;

  /* المقاسات — سائلة، تتدرّج مع عرض الشاشة بدل القفز عند نقطة التوقف */
  --ecs-maxw:    1240px;
  --ecs-gut:     clamp(18px, 4vw, 28px);   /* هامش جانبي */
  --ecs-sect:    clamp(52px, 7vw, 88px);   /* مسافة القسم الرأسية */
  --ecs-gap:     clamp(16px, 2.4vw, 32px); /* فراغ الشبكات */

  /* سلّم الخطوط السائل */
  --ecs-h1: clamp(30px, 4.15vw, 58px);
  --ecs-h2: clamp(25px, 3.4vw, 42px);
  --ecs-h3: clamp(20px, 1.9vw, 28px);
  --ecs-h4: clamp(17px, 1.5vw, 22px);
  --ecs-lg: clamp(16px, 1.3vw, 19px);      /* نص تمهيدي */

  --ecs-tr: .18s cubic-bezier(.4,0,.2,1);
}

/* العربية تأخذ Cairo في العرض والمتن معًا */
[dir="rtl"]{
  --ecs-display: 'Cairo', system-ui, sans-serif;
  --ecs-sans:    'Cairo', system-ui, sans-serif;
}

/* ============================================================
   01 — BASE
   ============================================================ */
body{
  background: var(--ecs-paper);
  color: var(--ecs-body);
  font-family: var(--ecs-sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5{
  font-family: var(--ecs-display);
  color: var(--ecs-ink);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.005em;
  margin: 0;
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5{
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0;
}

h1{ font-size: var(--ecs-h1); letter-spacing:-.02em }

/* العنوان الرئيسي في الهيرو: سطر واحد على الديسكتوب */
[dir="rtl"] .ecs-hero h1,
[dir="rtl"] h1.ecs-display{
  font-weight:900;
  line-height:1.2;
  letter-spacing:-.015em;
  max-width:none;
}
.ecs-hero h1{ color:#fff }

@media (min-width: 1024px){
  .ecs-hero h1{ white-space:nowrap }
}
@media (max-width: 1023px){
  .ecs-hero h1{ text-wrap:balance }
}
h2{ font-size: var(--ecs-h2); letter-spacing:-.015em }
h3{ font-size: var(--ecs-h3) }
h4{ font-size: var(--ecs-h4) }

a{ color: inherit; text-decoration: none }
:focus-visible{ outline: 3px solid var(--ecs-hv); outline-offset: 2px }

/* الصور لا تكسر التخطيط أبدًا */
img,svg,video{ max-width:100%; height:auto }

/* حارس التمرير الأفقي — أكثر عطل متجاوب شيوعًا */
html,body{ overflow-x:clip }

/* أرقام بعرض ثابت — مهم للعدّادات والحاسبة */
.ecs-num{
  font-family: 'Barlow Condensed', sans-serif;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   02 — LAYOUT HELPERS
   الشبكات على الحاوية الأب. إليمنتور يضيف ويحذف الأبناء،
   والشبكة تتكيّف تلقائيًا — أمتن من عرض ثابت لكل عمود.
   ============================================================ */
.ecs-sec{ padding-block: var(--ecs-sect) }
.ecs-sec--tight{ padding-block: calc(var(--ecs-sect) * .62) }

.ecs-grid-2,
.ecs-grid-3,
.ecs-grid-4,
.ecs-grid-5{ display:grid; gap: var(--ecs-gap) }

.ecs-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.ecs-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.ecs-grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.ecs-grid-5{ grid-template-columns:repeat(5,minmax(0,1fr)) }

/* شبكات بلا فراغ — للبطاقات ذات الحدود المتلاصقة */
.ecs-grid-tight{ gap:1px; background: var(--ecs-line); border:1px solid var(--ecs-line) }
.ecs-grid-tight > *{ background: var(--ecs-white) }

@media (max-width: 1024px){
  .ecs-grid-3,.ecs-grid-4,.ecs-grid-5{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width: 767px){
  .ecs-grid-2,.ecs-grid-3,.ecs-grid-4,.ecs-grid-5{ grid-template-columns:1fr }
}

.ecs-dark{ background: var(--ecs-ink); color:#C3D2E2 }
.ecs-dark h1,.ecs-dark h2,.ecs-dark h3,.ecs-dark h4{ color:#fff }
.ecs-dark p{ color:#AEC0D3 }

.ecs-white{ background: var(--ecs-white) }

/* شريط مائل صناعي — يوضع أعلى الهيرو */
.ecs-zigzag{
  height: 6px;
  background: repeating-linear-gradient(135deg,
    var(--ecs-hv) 0 16px, var(--ecs-ink) 16px 32px);
}

/* ============================================================
   03 — SECTION HEAD
   <span class="ecs-eyebrow">, ثم h2, ثم p
   ============================================================ */
.ecs-eyebrow{
  display:inline-block;
  font-family: var(--ecs-sans);
  font-size:12px; font-weight:600; letter-spacing:.08em;
  color: var(--ecs-hv-d);
  border-bottom:2px solid var(--ecs-hv);
  padding-bottom:5px; margin-bottom:18px;
}
.ecs-dark .ecs-eyebrow{ color: var(--ecs-hv) }

.ecs-lede{ font-size:17px; color: var(--ecs-muted); max-width:56ch }
.ecs-dark .ecs-lede{ color:#93A6BC }

/* ============================================================
   04 — BUTTONS
   ============================================================ */
.ecs-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--ecs-sans); font-size:15px; font-weight:600;
  padding:13px 22px; cursor:pointer; text-align:center;
  border:2px solid transparent; transition: var(--ecs-tr);
}
.ecs-btn--lg{ padding:16px 28px; font-size:16px }

.ecs-btn--ink  { background: var(--ecs-ink); color:#fff }
.ecs-btn--ink:hover  { background: var(--ecs-ink-deep) }

.ecs-btn--hv   { background: var(--ecs-hv); color: var(--ecs-hv-ink) }
.ecs-btn--hv:hover   { background:#ffb524 }

.ecs-btn--line { border-color: var(--ecs-ink); color: var(--ecs-ink); background:transparent }
.ecs-btn--line:hover { background: var(--ecs-ink); color:#fff }

.ecs-btn--ghost{ border-color: rgba(255,255,255,.4); color:#fff; background:transparent }
.ecs-btn--ghost:hover{ background: rgba(255,255,255,.12); border-color:#fff }

/* ============================================================
   05 — STATS  (شبكة الأرقام أسفل الهيرو)
   ============================================================ */
.ecs-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ecs-line-d);
}
.ecs-stats > *{
  padding:26px 22px 46px;
  border-inline-start:1px solid var(--ecs-line-d);
  padding-inline-start:22px;
}
.ecs-stats > *:first-child{ border-inline-start:0; padding-inline-start:0 }
.ecs-stat__n{
  font-family:'Barlow Condensed',sans-serif; font-variant-numeric:tabular-nums;
  font-size:clamp(30px,3.6vw,44px); color:#fff; display:block; line-height:1;
}
.ecs-stat__l{ font-size:13px; color:#8FA4BB; display:block; margin-top:9px; line-height:1.4 }

/* ويدجت العدّاد في إليمنتور — نفرض عليه هيئة ecs-stat */
.ecs-stat .elementor-counter-number-wrapper{
  font-family:'Barlow Condensed',sans-serif; font-variant-numeric:tabular-nums;
  font-size:clamp(30px,3.6vw,44px); line-height:1; color: var(--ecs-ink);
}
.ecs-dark .ecs-stat .elementor-counter-number-wrapper{ color:#fff }
.ecs-stat .elementor-counter-title{
  font-family: var(--ecs-sans); font-size:13px; font-weight:400;
  color: var(--ecs-muted); margin-top:9px; line-height:1.5; text-align:start;
}
.ecs-dark .ecs-stat .elementor-counter-title{ color:#8FA4BB }
.ecs-stat .elementor-counter-number-suffix{ color: var(--ecs-hv); font-weight:400 }

/* ============================================================
   06 — FORK  (مسار أصحاب الأعمال / الباحثين عن عمل)
   أهم مكوّن في الموقع.
   ============================================================ */
.ecs-fork{ display:grid; grid-template-columns:1fr 1fr }
.ecs-fork__panel{ padding:38px 34px; border-top:5px solid var(--ecs-ink) }
.ecs-fork__panel--employer{ background: var(--ecs-white) }
.ecs-fork__panel--seeker  { background: var(--ecs-hv); color: var(--ecs-hv-ink) }

.ecs-fork__tag{ font-size:12px; font-weight:600; letter-spacing:.06em; margin-bottom:12px }
.ecs-fork__panel--employer .ecs-fork__tag{ color: var(--ecs-hv-d) }
.ecs-fork__panel--seeker   .ecs-fork__tag{ color:#7A5400 }

.ecs-fork__panel p{ font-size:15.5px; color: var(--ecs-muted); max-width:40ch }
.ecs-fork__panel--seeker h3{ color: var(--ecs-hv-ink) }
.ecs-fork__panel--seeker p { color:#5C4200 }
.ecs-fork__panel--seeker .ecs-btn--line{ border-color: var(--ecs-hv-ink); color: var(--ecs-hv-ink) }
.ecs-fork__panel--seeker .ecs-btn--line:hover{ background: var(--ecs-hv-ink); color: var(--ecs-hv) }

/* ============================================================
   07 — STEPS  (كيف نعمل)
   ============================================================ */
.ecs-steps{ display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--ecs-line); background: var(--ecs-white) }
.ecs-step{ padding:34px 30px; border-inline-start:1px solid var(--ecs-line) }
.ecs-step:first-child{ border-inline-start:0 }
.ecs-step__n{
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:56px; color: var(--ecs-hv); line-height:.85; margin-bottom:16px;
}
.ecs-step p{ font-size:15px; color: var(--ecs-muted) }

/* جملة مفتاحية بعرض كامل */
.ecs-punch{
  background: var(--ecs-ink); color:#fff; padding:26px 30px;
  font-family: var(--ecs-display); font-size:clamp(22px,2.6vw,32px); line-height:1.15;
}
[dir="rtl"] .ecs-punch{ line-height:1.4; font-size:clamp(19px,2vw,26px) }
.ecs-punch em{ color: var(--ecs-hv); font-style:normal }

/* ============================================================
   08 — SERVICE CARD
   ============================================================ */
.ecs-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background: var(--ecs-line); border:1px solid var(--ecs-line) }
.ecs-card{ background: var(--ecs-white); padding:34px 30px; transition: var(--ecs-tr) }
.ecs-card:hover{ background: var(--ecs-hv-soft) }
.ecs-card__n{
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:14px; color: var(--ecs-hv-d); letter-spacing:.06em; margin-bottom:12px;
}
.ecs-card p{ font-size:15px; color: var(--ecs-muted); margin-bottom:16px }

/* قائمة بنقاط كهرمانية مربعة */
.ecs-list{ margin:0; padding:0; list-style:none; font-size:14.5px }
.ecs-list li{ padding:8px 0; border-top:1px solid var(--ecs-line); display:flex; gap:10px }
.ecs-list li::before{
  content:""; width:6px; height:6px; background: var(--ecs-hv);
  flex:none; margin-top:9px;
}

/* ============================================================
   09 — LAW BOX  (قانون العمل 14/2025)
   ============================================================ */
.ecs-lawbox{ border:1px solid var(--ecs-line-d); background:rgba(255,255,255,.03); padding:32px }
.ecs-lawbox__date{ font-size:13px; color: var(--ecs-hv); margin:8px 0 20px }
.ecs-lawbox ul{ list-style:none; margin:0 0 24px; padding:0; font-size:15px }
.ecs-lawbox li{
  padding:12px 0; border-top:1px solid var(--ecs-line-d);
  display:flex; gap:14px; color:#C3D2E2;
}
.ecs-lawbox li b{ color: var(--ecs-hv); font-family:'Barlow Condensed',sans-serif; font-size:17px; flex:none }

/* ============================================================
   10 — JOB ROW  (صف وظيفة في صفحة الوظائف)
   ============================================================ */
.ecs-jobrow{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  background: var(--ecs-white); border:1px solid var(--ecs-line);
  padding:16px 20px; margin-bottom:10px; transition: var(--ecs-tr);
}
.ecs-jobrow:hover{ border-color: var(--ecs-hv) }
.ecs-jobrow__t{ font-family: var(--ecs-display); font-size:19px; color: var(--ecs-ink) }
[dir="rtl"] .ecs-jobrow__t{ font-weight:700 }
.ecs-jobrow__m{ font-size:13.5px; color: var(--ecs-muted); margin-top:3px }

/* شريحة دور وظيفي */
.ecs-chip{
  display:inline-block; background: var(--ecs-white); border:1px solid var(--ecs-line);
  padding:11px 17px; font-size:15px; color: var(--ecs-ink); font-weight:500;
  transition: var(--ecs-tr);
}
.ecs-chip:hover{ border-color: var(--ecs-hv); background: var(--ecs-hv-soft) }

/* ============================================================
   11 — CLIENT MARKS
   ============================================================ */
.ecs-marks{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background: var(--ecs-line) }
.ecs-marks > *{
  background: var(--ecs-white); display:grid; place-items:center;
  min-height:110px; padding:20px;
  filter:grayscale(1); opacity:.62; transition: var(--ecs-tr);
}
.ecs-marks > *:hover{ filter:none; opacity:1 }

/* ============================================================
   12 — REVEAL  (يُفعَّل من assets/ecs.js)
   ============================================================ */
.ecs-rv{ opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease }
.ecs-rv.is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion: reduce){
  .ecs-rv{ opacity:1; transform:none; transition:none }
}

/* ============================================================
   13 — RESPONSIVE
   نقاط التوقف مطابقة لنقاط إليمنتور بالضبط، حتى لا يختلف
   ما تراه في المحرّر عمّا يراه الزائر.
   Tablet ≤1024  ·  Mobile ≤767
   ============================================================ */

/* ---- لوحي: 768 – 1024 ---- */
@media (max-width: 1024px){
  .ecs-stats{ grid-template-columns:repeat(2,1fr) }
  .ecs-stats > *{ border-inline-start:0; padding-inline-start:0;
    border-top:1px solid var(--ecs-line-d); padding-block:22px }
  .ecs-cards{ grid-template-columns:1fr }
  .ecs-marks{ grid-template-columns:repeat(3,1fr) }
  .ecs-fork{ grid-template-columns:1fr }
  .ecs-steps{ grid-template-columns:1fr }
  .ecs-step{ border-inline-start:0; border-top:1px solid var(--ecs-line) }
  .ecs-step:first-child{ border-top:0 }
}

/* ---- موبايل: ≤767 ---- */
@media (max-width: 767px){
  .ecs-marks{ grid-template-columns:repeat(2,1fr) }

  /* بطاقة الوظيفة: من صف أفقي إلى بطاقة مكدّسة */
  .ecs-jobrow{ flex-direction:column; align-items:stretch; gap:12px }
  .ecs-jobrow .ecs-btn{ width:100% }

  /* الأزرار بعرض كامل — الإبهام لا يصطاد أزرارًا صغيرة */
  .ecs-btn{ width:100%; padding-block:15px }

  .ecs-punch{ padding:22px 20px }
}

/* ---- الشريط السفلي الثابت ---- */
.ecs-mobilebar{ display:none }
@media (max-width: 767px){
  .ecs-mobilebar{
    position:fixed; inset-inline:0; bottom:0; z-index:90;
    display:grid; grid-template-columns:1fr 1fr; gap:9px;
    background: var(--ecs-ink); padding:9px;
    padding-bottom: calc(9px + env(safe-area-inset-bottom)); /* آيفون بإيماءة سفلية */
    box-shadow:0 -10px 28px rgba(5,13,24,.32);
  }
  body.has-ecs-mobilebar{ padding-bottom:86px }
}

/* ============================================================
   14 — TOUCH & FORMS
   ============================================================ */

/* مساحة لمس لا تقل عن 44px لأي عنصر تفاعلي */
.ecs-btn,
button, [type="button"], [type="submit"],
.ecs-chip, .ecs-jobrow a{ min-height:44px }

input, select, textarea{
  font-family: var(--ecs-sans);
  border:1px solid var(--ecs-line);
  padding:13px 14px;
  max-width:100%;
}

/* 16px إلزاميًا على الموبايل:
   أي قيمة أقل تدفع iOS Safari للتقريب التلقائي عند النقر على الحقل،
   فيتحرّك التخطيط في منتصف التقديم على وظيفة. */
@media (max-width: 767px){
  input, select, textarea{ font-size:16px; padding:15px 14px }
  input[type="range"]{ height:32px }   /* مساحة إصبع لا مساحة مؤشر */
}

/* ============================================================
   16 — ELEMENTOR BRIDGE
   إليمنتور يضع الكلاس على غلاف الويدجت، والعنصر الحقيقي بداخله.
   هذه الطبقة تمرّر نظامنا إلى الداخل.
   على الحاويات يعمل الكلاس مباشرة ولا يحتاج جسرًا.
   ============================================================ */

/* ------------------------------------------------------------
   الأزرار
   مسح لوني ينزلق من حافة البداية · سهم يتقدّم · حدّ حاد.
   كل الحركة على transform فقط — لا إعادة تخطيط، ناعمة على
   الأجهزة الضعيفة.
   ------------------------------------------------------------ */
.ecs-btn .elementor-button,
a.ecs-btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--ecs-sans); font-size:15px; font-weight:700;
  letter-spacing:-.005em;
  padding:15px 26px; min-height:50px;
  border:2px solid transparent;
  background:none; fill:currentColor;
  transition: color .28s ease, border-color .28s ease, transform .18s ease;
}
.ecs-btn--lg .elementor-button,
a.ecs-btn--lg{ padding:18px 34px; font-size:16px; min-height:58px }

/* طبقة المسح */
.ecs-btn .elementor-button::before,
a.ecs-btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:scaleX(0); transform-origin:inline-start;
  transition:transform .42s cubic-bezier(.22,1,.36,1);
}
.ecs-btn .elementor-button:hover::before,
a.ecs-btn:hover::before{ transform:scaleX(1) }

/* سهم يتقدّم */
.ecs-btn .elementor-button-text::after{
  content:"←"; display:inline-block; margin-inline-start:10px;
  transform:translateX(0); opacity:.55;
  transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .32s ease;
}
[dir="rtl"] .ecs-btn .elementor-button:hover .elementor-button-text::after{
  transform:translateX(-7px); opacity:1;
}

.ecs-btn .elementor-button:active,
a.ecs-btn:active{ transform:translateY(1px) }

/* --- كحلي --- */
.ecs-btn--ink .elementor-button,
a.ecs-btn--ink{ background: var(--ecs-ink); color:#fff }
.ecs-btn--ink .elementor-button::before,
a.ecs-btn--ink::before{ background: var(--ecs-hv) }
.ecs-btn--ink .elementor-button:hover,
a.ecs-btn--ink:hover{ color: var(--ecs-hv-ink) }

/* --- كهرماني: الزر الأساسي --- */
.ecs-btn--hv .elementor-button,
a.ecs-btn--hv{
  background: var(--ecs-hv); color: var(--ecs-hv-ink);
  box-shadow:0 0 0 0 rgba(242,160,7,.42);
  transition: color .28s ease, box-shadow .34s ease, transform .18s ease;
}
.ecs-btn--hv .elementor-button::before,
a.ecs-btn--hv::before{ background: var(--ecs-ink) }
.ecs-btn--hv .elementor-button:hover,
a.ecs-btn--hv:hover{ color:#fff; box-shadow:0 10px 26px -12px rgba(242,160,7,.75) }

/* --- محدّد --- */
.ecs-btn--line .elementor-button,
a.ecs-btn--line{ border-color: var(--ecs-ink); color: var(--ecs-ink) }
.ecs-btn--line .elementor-button::before,
a.ecs-btn--line::before{ background: var(--ecs-ink) }
.ecs-btn--line .elementor-button:hover,
a.ecs-btn--line:hover{ color:#fff }

/* --- شبحي على الداكن --- */
.ecs-btn--ghost .elementor-button,
a.ecs-btn--ghost{ border-color: rgba(255,255,255,.34); color:#fff }
.ecs-btn--ghost .elementor-button::before,
a.ecs-btn--ghost::before{ background:#fff }
.ecs-btn--ghost .elementor-button:hover,
a.ecs-btn--ghost:hover{ color: var(--ecs-ink); border-color:#fff }

@media (prefers-reduced-motion: reduce){
  .ecs-btn .elementor-button::before,
  a.ecs-btn::before{ transition:none }
  .ecs-btn .elementor-button-text::after{ transition:none }
}

@media (max-width: 767px){
  .ecs-btn, .ecs-btn .elementor-button{ width:100% }
}

/* --- العنوان التمهيدي --- */
.ecs-eyebrow .elementor-heading-title{
  display:inline-block;
  font-family: var(--ecs-sans);
  font-size:12px; font-weight:700; letter-spacing:.08em; line-height:1.6;
  color: var(--ecs-hv-d);
  border-bottom:2px solid var(--ecs-hv);
  padding-bottom:5px;
}
.ecs-dark .ecs-eyebrow .elementor-heading-title{ color: var(--ecs-hv) }

/* --- النص التمهيدي --- */
.ecs-lede, .ecs-lede p{
  font-size: var(--ecs-lg); color: var(--ecs-muted); line-height:1.8; max-width:62ch;
}
.ecs-dark .ecs-lede, .ecs-dark .ecs-lede p{ color:#AEC0D3 }

/* --- الجملة المفتاحية --- */
.ecs-punch .elementor-heading-title{
  display:block; background: var(--ecs-ink); color:#fff;
  padding:26px 30px; font-weight:700; line-height:1.45;
  font-size: clamp(19px, 2vw, 28px);
}
.ecs-punch em, .ecs-punch b{ color: var(--ecs-hv); font-style:normal }

/* --- قائمة الأيقونات → قائمتنا ذات النقاط المربعة --- */
.ecs-list .elementor-icon-list-items{ margin:0; padding:0 }
.ecs-list .elementor-icon-list-item{
  padding:9px 0; border-top:1px solid var(--ecs-line);
  font-size:14.5px; align-items:flex-start;
}
.ecs-list .elementor-icon-list-icon{ display:none }
.ecs-list .elementor-icon-list-item::before{
  content:""; width:6px; height:6px; background: var(--ecs-hv);
  flex:none; margin-top:9px; margin-inline-end:10px;
}
.ecs-dark .ecs-list .elementor-icon-list-item{ border-top-color: var(--ecs-line-d); color:#C3D2E2 }

/* --- أدوات نصية عامة تعمل على أي ويدجت عنوان --- */
.ecs-t-num .elementor-heading-title{
  font-family:'Barlow Condensed',sans-serif; font-variant-numeric:tabular-nums;
  font-size:56px; font-weight:700; line-height:.85; color: var(--ecs-hv);
}
.ecs-t-kicker .elementor-heading-title{
  font-family: var(--ecs-sans);
  font-size:12.5px; font-weight:700; letter-spacing:.06em; line-height:1.6;
  color: var(--ecs-hv-d);
}
.ecs-dark .ecs-t-kicker .elementor-heading-title{ color: var(--ecs-hv) }

.ecs-t-muted, .ecs-t-muted p,
.ecs-t-muted .elementor-heading-title{
  font-size:13.5px; font-weight:400; color: var(--ecs-muted); line-height:1.8;
}
.ecs-dark .ecs-t-muted, .ecs-dark .ecs-t-muted p{ color:#7E93AC }

/* --- رابط «تفاصيل الخدمة» --- */
.ecs-more .elementor-heading-title,
.ecs-more a{
  display:inline-block; font-family: var(--ecs-sans);
  font-size:15px; font-weight:700; color: var(--ecs-ink);
  border-bottom:2px solid var(--ecs-hv); padding-bottom:2px;
}
.ecs-dark .ecs-more .elementor-heading-title,
.ecs-dark .ecs-more a{ color:#fff }

/* --- شعارات العملاء النصية المؤقتة --- */
.ecs-mark .elementor-heading-title{
  display:grid; place-items:center; min-height:104px; padding:20px;
  font-family: var(--ecs-sans); font-weight:700; font-size:19px;
  color:#8A97A8; transition: var(--ecs-tr);
}
.ecs-mark:hover .elementor-heading-title{ color: var(--ecs-ink) }

/* --- خانة صورة مجهّزة للاستبدال لاحقًا --- */
.ecs-imgslot{
  display:grid; place-items:center; min-height:260px;
  border:1px dashed var(--ecs-line);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(15,29,44,.035) 14px 28px);
  color: var(--ecs-muted); font-size:13.5px; text-align:center; padding:24px;
}
.ecs-dark .ecs-imgslot{ border-color: var(--ecs-line-d); color:#7E93AC }

/* ============================================================
   17 — SIGNATURE
   العناصر التي تصنع الطابع الصناعي. بدونها التصميم «نظيف» فقط،
   وبها يصبح له صوت.
   القاعدة الحاكمة: صفر انحناء. كل شيء حاد.
   ============================================================ */

*, *::before, *::after{ border-radius:0 !important }

/* --- الهيرو --- */
/* ثلاث طبقات: الشريط المائل على الخلفية · الشبكة في ::before ·
   ختم النمر في ::after. كل طبقة بشفافيتها الخاصة. */
.ecs-hero{
  position:relative; overflow:hidden;
  background-image: repeating-linear-gradient(135deg,
    var(--ecs-hv) 0 16px, var(--ecs-ink) 16px 32px) !important;
  background-size:100% 6px !important;
  background-position:top left !important;
  background-repeat:no-repeat !important;
}

/* شبكة البلوبرنت + تلاشٍ قطري يعطي عمقًا */
.ecs-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--ecs-line-d) 1px, transparent 1px),
    linear-gradient(90deg, var(--ecs-line-d) 1px, transparent 1px);
  background-size:78px 78px, 78px 78px;
  opacity:.42;
  -webkit-mask-image: radial-gradient(120% 90% at 78% 22%, #000 0%, rgba(0,0,0,.35) 55%, transparent 88%);
          mask-image: radial-gradient(120% 90% at 78% 22%, #000 0%, rgba(0,0,0,.35) 55%, transparent 88%);
}

/* ختم النمر — علامة مائية تنزف من حافة الهيرو */
.ecs-hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset-inline-start:-160px; bottom:-190px;
  width:640px; height:640px;
  background:url('assets/mark-white.webp') no-repeat center/contain;
  opacity:.055;
}

.ecs-hero > *{ position:relative; z-index:1 }

@media (max-width: 767px){
  .ecs-hero::after{ width:400px; height:400px; inset-inline-start:-140px; bottom:-130px; opacity:.05 }
  .ecs-hero::before{ background-size:52px 52px, 52px 52px }
}

/* ============================================================
   19 — HEADER
   ============================================================ */

.ecs-shell{
  max-width: var(--ecs-maxw);
  margin-inline:auto;
  padding-inline: var(--ecs-gut);
  display:flex; align-items:center; gap:28px;
}

/* --- الشريط العلوي --- */
.ecs-topbar{
  background: var(--ecs-ink-deep); color:#8FA4BB;
  font-size:13px; line-height:1;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ecs-topbar .ecs-shell{ height:40px; justify-content:space-between; gap:16px }
.ecs-topbar__r{ display:flex; align-items:center; gap:22px }
.ecs-topbar a{ color:#8FA4BB; transition:var(--ecs-tr) }
.ecs-topbar a:hover{ color:var(--ecs-hv) }
.ecs-topbar .ecs-num{ font-size:14px; letter-spacing:.02em; color:#C3D2E2 }

/* --- الهيدر --- */
.ecs-head{
  position:sticky; top:0; z-index:80;
  background: rgba(244,245,243,.94);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
          backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--ecs-line);
}
.ecs-head .ecs-shell{ height:84px }

.ecs-head__brand{ flex:none; display:flex; align-items:center }
.ecs-head__brand img{ height:50px; width:auto; display:block }

.ecs-nav{ margin-inline-start:auto }
.ecs-nav__list{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:26px;
}
.ecs-nav__list a{
  position:relative; display:block; padding-block:6px;
  font-size:15px; font-weight:600; color:var(--ecs-body);
  transition:var(--ecs-tr);
}
.ecs-nav__list a::after{
  content:""; position:absolute; bottom:0; inset-inline-start:0;
  width:0; height:2px; background:var(--ecs-hv); transition:var(--ecs-tr);
}
.ecs-nav__list a:hover{ color:var(--ecs-ink) }
.ecs-nav__list a:hover::after,
.ecs-nav__list .current-menu-item > a::after{ width:100% }

.ecs-head__cta{ flex:none; padding:13px 24px !important; min-height:auto !important }

.ecs-burger{
  display:none; flex:none;
  width:46px; height:44px; cursor:pointer;
  background:none; border:1px solid var(--ecs-line);
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.ecs-burger i{ width:18px; height:2px; background:var(--ecs-ink); display:block; transition:var(--ecs-tr) }

/* نخفي هيدر وفوتر هلو إليمنتور الافتراضيين */
.site-header,
header.site-header,
.site-footer,
footer.site-footer{ display:none !important }

/* هيدر الثيم يتنحّى تلقائيًا متى عمل هيدر ElementsKit */
body:has(.ekit-template-content-header) .ecs-topbar,
body:has(.ekit-template-content-header) .ecs-head,
body:has([data-elementor-type="header"]) .ecs-topbar,
body:has([data-elementor-type="header"]) .ecs-head{ display:none !important }

/* ============================================================
   20 — FULL-BLEED SPLIT
   قسم بعرض الشاشة، نصفه نص محاذٍ لحاوية الموقع
   ونصفه لوح ينزف إلى حافة الشاشة.
   ============================================================ */

.e-con.ecs-bleed{
  max-width:100% !important;
  width:100% !important;
  padding-inline:0 !important;
}
.e-con.ecs-bleed > .e-con-inner{ max-width:100% !important; width:100% !important }

.e-con.ecs-split{
  display:grid !important;
  grid-template-columns:1.05fr .95fr;
  gap:0;
  align-items:stretch;
  max-width:100% !important;
  padding:0 !important;
}

/* عمود النص: حافته الخارجية على خط حاوية الموقع */
.e-con.ecs-split > *:first-child{
  padding-block: var(--ecs-sect);
  padding-inline-start: max(var(--ecs-gut), calc((100vw - var(--ecs-maxw)) / 2));
  padding-inline-end: clamp(30px, 4.6vw, 74px);
  display:flex; flex-direction:column; justify-content:center;
}

/* اللوح: ينزف إلى الحافة */
.e-con.ecs-split > *:last-child{
  padding-block: var(--ecs-sect);
  padding-inline-start: clamp(30px, 4.6vw, 74px);
  padding-inline-end: max(var(--ecs-gut), calc((100vw - var(--ecs-maxw)) / 2));
  display:flex; flex-direction:column; justify-content:center;
}

@media (max-width: 900px){
  .e-con.ecs-split{ grid-template-columns:1fr }
  .e-con.ecs-split > *{
    padding-inline: var(--ecs-gut) !important;
    padding-block: calc(var(--ecs-sect) * .7);
  }
}

/* لوح داكن يحمل محتوى — بديل خانة الصورة الفارغة */
.e-con.ecs-panel{
  background: var(--ecs-ink);
  position:relative; overflow:hidden;
}
.e-con.ecs-panel::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset-inline-end:-120px; bottom:-150px; width:460px; height:460px;
  background:url('assets/mark-white.webp') no-repeat center/contain;
  opacity:.06;
}
.e-con.ecs-panel > *{ position:relative; z-index:1 }

/* شرائح الممرات الصناعية */
.ecs-chips .elementor-icon-list-items{
  display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0;
}
.ecs-chips .elementor-icon-list-item{
  border:1px solid var(--ecs-line-d);
  padding:11px 17px; font-size:14.5px; font-weight:600;
  color:#C3D2E2; transition:var(--ecs-tr);
}
.ecs-chips .elementor-icon-list-item:hover{
  border-color: var(--ecs-hv); color:#fff;
}
.ecs-chips .elementor-icon-list-icon{ display:none }

@media (max-width: 1100px){
  .ecs-nav__list{ gap:18px }
  .ecs-nav__list a{ font-size:14px }
}
@media (max-width: 900px){
  .ecs-topbar{ display:none }
  .ecs-head .ecs-shell{ height:70px; gap:14px }
  .ecs-head__brand img{ height:40px }
  .ecs-head__cta{ display:none }
  .ecs-burger{ display:flex }
  .ecs-nav{
    position:absolute; inset-inline:0; top:100%;
    background:var(--ecs-white); border-bottom:1px solid var(--ecs-line);
    padding:14px var(--ecs-gut) 20px;
    box-shadow:0 20px 34px -22px rgba(15,29,44,.4);
    display:none;
  }
  .ecs-head.is-open .ecs-nav{ display:block }
  .ecs-nav__list{ flex-direction:column; align-items:stretch; gap:0 }
  .ecs-nav__list a{ padding:14px 0; border-bottom:1px solid var(--ecs-line); font-size:16px }
}

/* شريط مائل مستقل — فاصل بين الأقسام */
.ecs-zig{
  height:6px;
  background: repeating-linear-gradient(135deg,
    var(--ecs-hv) 0 16px, var(--ecs-ink) 16px 32px);
}

/* --- وسم الهيرو: إطار + مربع كهرماني --- */
.ecs-tag .elementor-heading-title{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--ecs-sans); font-size:13px; font-weight:400; line-height:1.6;
  color:#9DB2C8; border:1px solid var(--ecs-line-d); padding:8px 15px;
}
.ecs-tag .elementor-heading-title::before{
  content:""; width:7px; height:7px; background: var(--ecs-hv); flex:none;
}

/* --- شريط الأرقام بفواصل رأسية --- */
.ecs-stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--ecs-line-d);
}
.ecs-stats > *{
  padding:26px 22px 0;
  border-inline-start:1px solid var(--ecs-line-d);
}
.ecs-stats > *:first-child{ border-inline-start:0; padding-inline-start:0 }

@media (max-width: 767px){
  .ecs-stats{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .ecs-stats > *{ border-inline-start:0; padding-inline-start:0;
    border-top:1px solid var(--ecs-line-d); padding-block:20px 0 }
  .ecs-stats > *:first-child,
  .ecs-stats > *:nth-child(2){ border-top:0 }
}

/* --- الفورك: شريط علوي كحلي سميك --- */
.ecs-fork__panel{ border-top:5px solid var(--ecs-ink) }

/* --- البطاقات: تفاعل كهرماني --- */
.ecs-card{ transition: var(--ecs-tr); position:relative }
.ecs-card:hover{ background: var(--ecs-hv-soft) }
.ecs-card::after{
  content:""; position:absolute; inset-block-start:0; inset-inline-start:0;
  width:0; height:3px; background: var(--ecs-hv); transition: var(--ecs-tr);
}
.ecs-card:hover::after{ width:100% }

/* --- الخطوة: رقم ضخم وحد فاصل --- */
.ecs-step{ border-inline-start:1px solid var(--ecs-line) }
.ecs-step:first-child{ border-inline-start:0 }

/* --- صندوق القانون --- */
.ecs-lawbox{
  border:1px solid var(--ecs-line-d);
  background: rgba(255,255,255,.03);
}
.ecs-lawbox .elementor-icon-list-item{
  padding:13px 0; border-top:1px solid var(--ecs-line-d); color:#C3D2E2;
}

/* --- صندوق Sedex --- */
.ecs-sdx{
  border:1px solid var(--ecs-line-d);
  background: rgba(242,160,7,.07);
}

/* --- شريحة اعتماد --- */
.ecs-chip .elementor-heading-title{
  display:inline-block; font-family: var(--ecs-sans);
  font-size:12px; font-weight:700; letter-spacing:.02em;
  border:1px solid var(--ecs-hv); color: var(--ecs-hv); padding:6px 12px;
}

/* --- جدار العملاء --- */
.ecs-marks{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px; background: var(--ecs-line); border:1px solid var(--ecs-line);
}
.ecs-marks > *{ background: var(--ecs-white) }
@media (max-width:1024px){ .ecs-marks{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:767px){  .ecs-marks{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* --- صف الوظيفة --- */
.ecs-jobrow{
  border:1px solid #E6D9B8; background: var(--ecs-white);
  transition: var(--ecs-tr);
}
.ecs-jobrow:hover{ border-color: var(--ecs-hv) }

/* --- شريط سفلي ثابت للموبايل --- */
.ecs-bar{ display:none }
@media (max-width: 767px){
  .ecs-bar{
    display:grid !important; grid-template-columns:1fr 1fr; gap:9px;
    position:fixed; inset-inline:0; bottom:0; z-index:90;
    background: var(--ecs-ink); padding:9px;
    padding-bottom: calc(9px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 28px rgba(5,13,24,.32);
  }
  .ecs-bar .ecs-btn{ margin:0 }
}

/* ============================================================
   18 — SPECIFICITY OVERRIDE
   ملف الثيم يُحمَّل قبل elementor/frontend.min.css، وقاعدة
   `.e-con{display:flex}` تهزم `.ecs-grid-3{display:grid}`
   لتساوي القوة وتأخّر المصدر.
   الحل: نسبق كل قاعدة تخطيط بـ .e-con فترتفع قوتها (0,2,0).
   ============================================================ */

.e-con.ecs-grid-2,
.e-con.ecs-grid-3,
.e-con.ecs-grid-4,
.e-con.ecs-grid-5,
.e-con.ecs-stats,
.e-con.ecs-marks{
  display:grid !important;
  align-items:stretch;
}

.e-con.ecs-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ecs-gap) }
.e-con.ecs-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--ecs-gap) }
.e-con.ecs-grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--ecs-gap) }
.e-con.ecs-grid-5{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--ecs-gap) }

.e-con.ecs-grid-tight{ gap:1px; background:var(--ecs-line); border:1px solid var(--ecs-line) }
.e-con.ecs-grid-tight > *{ background:var(--ecs-white) }

/* شريط الأرقام: أعمدة متساوية بفواصل رأسية */
.e-con.ecs-stats{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--ecs-line-d);
}
.e-con.ecs-stats > *{
  padding:26px 22px 0;
  border-inline-start:1px solid var(--ecs-line-d);
}
.e-con.ecs-stats > *:first-child{ border-inline-start:0; padding-inline-start:0 }

/* جدار العملاء */
.e-con.ecs-marks{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px; background:var(--ecs-line); border:1px solid var(--ecs-line);
}
.e-con.ecs-marks > *{ background:var(--ecs-white) }

/* حدود البطاقات والخطوات */
.e-con.ecs-step{ border-inline-start:1px solid var(--ecs-line) }
.e-con.ecs-step:first-child{ border-inline-start:0 }
.e-con.ecs-card{ transition:var(--ecs-tr); position:relative }
.e-con.ecs-card:hover{ background:var(--ecs-hv-soft) }

/* الأقسام: حشو رأسي */
.e-con.ecs-sec{ padding-block:var(--ecs-sect) }
.e-con.ecs-sec--tight{ padding-block:calc(var(--ecs-sect) * .62) }

/* الفورك */
.e-con.ecs-fork__panel{ border-top:5px solid var(--ecs-ink) }

/* خانة الصورة */
.e-con.ecs-imgslot{
  display:grid !important; place-items:center; min-height:260px;
  border:1px dashed var(--ecs-line);
}

/* شبكات التخطيط الباقية — نفس سبب القسم: .e-con{display:flex} يهزمها */
.e-con.ecs-steps,
.e-con.ecs-cards,
.e-con.ecs-fork{ display:grid !important; align-items:stretch }

.e-con.ecs-steps{
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
  border:1px solid var(--ecs-line); background:var(--ecs-white);
}
.e-con.ecs-cards{
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--ecs-line); border:1px solid var(--ecs-line);
}
.e-con.ecs-fork{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 }

/* حشو الكتل التي يصفّره إليمنتور على الحاويات */
.e-con.ecs-step  { padding:34px 30px }
.e-con.ecs-card  { padding:34px 30px }
.e-con.ecs-lawbox{ padding:32px }
.e-con.ecs-sdx   { padding:24px 26px }
.e-con.ecs-punch { padding:26px 30px }

@media (max-width: 1024px){
  .e-con.ecs-steps{ grid-template-columns:1fr }
  .e-con.ecs-steps > *{ border-inline-start:0; border-top:1px solid var(--ecs-line) }
  .e-con.ecs-steps > *:first-child{ border-top:0 }
}
@media (max-width: 767px){
  .e-con.ecs-cards,
  .e-con.ecs-fork{ grid-template-columns:1fr }
}

/* الشريط السفلي للموبايل */
@media (max-width: 767px){
  .e-con.ecs-bar{ display:grid !important; grid-template-columns:1fr 1fr; gap:9px }
}
@media (min-width: 768px){
  .e-con.ecs-bar{ display:none !important }
}

/* ---- التجاوب على الشبكات عالية الأولوية ---- */
@media (max-width: 1024px){
  .e-con.ecs-grid-3,
  .e-con.ecs-grid-4,
  .e-con.ecs-grid-5,
  .e-con.ecs-marks{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .e-con.ecs-stats{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width: 767px){
  .e-con.ecs-grid-2,
  .e-con.ecs-grid-3,
  .e-con.ecs-grid-4,
  .e-con.ecs-grid-5{ grid-template-columns:1fr }
  .e-con.ecs-marks{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .e-con.ecs-stats > *{
    border-inline-start:0; padding-inline-start:0;
    border-top:1px solid var(--ecs-line-d);
  }
  .e-con.ecs-stats > *:first-child,
  .e-con.ecs-stats > *:nth-child(2){ border-top:0 }
  .e-con.ecs-step{ border-inline-start:0; border-top:1px solid var(--ecs-line) }
  .e-con.ecs-step:first-child{ border-top:0 }
}

/* ============================================================
   21 — ELEMENTSKIT HEADER / FOOTER
   القوالب مبنية داخل ElementsKit لتظهر على كل الموقع
   ويحرّرها فريق ECS من الواجهة.
   ============================================================ */

/* --- الشريط العلوي --- */
.e-con.ecs-ektop{ border-bottom:1px solid rgba(255,255,255,.07) }
.ecs-ektop__l .elementor-heading-title,
.ecs-ektop__r .elementor-heading-title{
  font-family:var(--ecs-sans); font-size:13px; font-weight:400;
  color:#8FA4BB; line-height:1.4;
}
.ecs-ektop__r .elementor-heading-title{ display:flex; align-items:center; gap:14px; justify-content:flex-end }
.ecs-ektop a{ color:#8FA4BB; transition:var(--ecs-tr) }
.ecs-ektop a:hover{ color:var(--ecs-hv) }
.ecs-ektop .ecs-num{ color:#C3D2E2; font-size:14px }
.ecs-ektop span{ color:#3E5A7D }

/* --- الهيدر --- */
.e-con.ecs-ekhead{
  position:sticky; top:0; z-index:80;
  background:rgba(244,245,243,.94) !important;
  -webkit-backdrop-filter:saturate(180%) blur(14px);
          backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--ecs-line);
}
/* الشعار: نستهدف أي صورة داخل الهيدر مهما كان نوع الويدجت،
   حتى يبقى المقاس محكومًا بعد أي تعديل من المحرّر. */
.ecs-ekbrand{ flex:none }
.e-con.ecs-ekhead img,
.ecs-ekbrand img{
  height:50px !important;
  width:auto !important;
  max-width:none !important;
  display:block;
  object-fit:contain;
}
.e-con.ecs-ekhead .elementor-widget-image{ flex:none; width:auto !important }
.e-con.ecs-ekhead .elementor-widget-image .elementor-widget-container{ line-height:0 }

.ecs-eknav{ margin-inline-start:auto }
.ecs-eknav .elementor-heading-title{
  display:flex; align-items:center; gap:26px; font-size:0;
}
/* إليمنتور يفرض font-size:inherit على الروابط داخل العناوين
   بقوة 0,2,1 — فنرفع قوتنا فوقها، وإلا ورثت الصفر واختفت. */
.ecs-eknav .elementor-heading-title a,
.ecs-eknav a{
  position:relative; display:block; padding-block:7px;
  font-family:var(--ecs-sans); font-size:15px !important; font-weight:600;
  color:var(--ecs-body); transition:var(--ecs-tr); white-space:nowrap;
  line-height:1.5;
}
.ecs-eknav a::after{
  content:""; position:absolute; bottom:0; inset-inline-start:0;
  width:0; height:2px; background:var(--ecs-hv); transition:var(--ecs-tr);
}
.ecs-eknav a:hover{ color:var(--ecs-ink) }
.ecs-eknav a:hover::after{ width:100% }

.ecs-ekcta{ flex:none }
.ecs-ekcta .elementor-button{ min-height:46px !important; padding:12px 24px !important }

@media (max-width: 1100px){
  .ecs-eknav .elementor-heading-title{ gap:16px }
  .ecs-eknav a{ font-size:13.5px }
}
@media (max-width: 900px){
  .e-con.ecs-ektop{ display:none !important }
  .ecs-ekbrand img{ height:40px }
  .ecs-ekcta{ display:none }
  .ecs-eknav .elementor-heading-title{ flex-wrap:wrap; gap:8px 16px; justify-content:flex-start }
  .ecs-eknav a{ font-size:13px; padding-block:4px }
}

/* --- الفوتر --- */
.e-con.ecs-ekfoot__grid{
  display:grid !important;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:40px;
  align-items:start;
}
.ecs-ekfoot__brand img{ height:52px; width:auto; display:block }

.ecs-ekfoot__h .elementor-heading-title{
  font-family:var(--ecs-sans); font-size:13px; font-weight:700;
  letter-spacing:.06em; color:var(--ecs-hv); margin-bottom:4px;
}
.ecs-ekfoot__links .elementor-heading-title{
  display:flex; flex-direction:column; gap:11px; font-size:0;
}
.ecs-ekfoot__links .elementor-heading-title a,
.ecs-ekfoot__links a{
  font-family:var(--ecs-sans); font-size:14.5px !important; font-weight:400;
  color:#93A6BC; transition:var(--ecs-tr); line-height:1.5;
}
.ecs-ekfoot__links a:hover{ color:#fff }

.ecs-ekfoot .ecs-list .elementor-icon-list-item{
  border-top-color:var(--ecs-line-d); color:#93A6BC; font-size:14px;
}
.ecs-ekfoot .ecs-list a{ color:#C3D2E2 }
.ecs-ekfoot .ecs-list a:hover{ color:var(--ecs-hv) }

.ecs-ekfoot__bottom .elementor-heading-title{
  font-family:var(--ecs-sans); font-size:13px; font-weight:400;
  color:#5C7392; border-top:1px solid var(--ecs-line-d);
  padding-top:22px; margin-top:44px;
}

@media (max-width: 900px){
  .e-con.ecs-ekfoot__grid{ grid-template-columns:1fr 1fr; gap:32px }
}
@media (max-width: 600px){
  .e-con.ecs-ekfoot__grid{ grid-template-columns:1fr }
}

/* ============================================================
   22 — DATA BLOCKS
   الكتل التي تحمل المعلومة التشغيلية: مصفوفة المسؤولية،
   جداول المواصفات، صفوف التسليمات. هذه ما يقرأه المشتري فعلًا.
   ============================================================ */

/* --- الجداول: معالجتان مختلفتان حسب عدد الأعمدة ---
   assets/ecs.js يعدّ الأعمدة ويضيف is-matrix أو is-2col،
   وينسخ عناوين الأعمدة إلى data-label لعرض الموبايل. --- */

/* ============ المشترك ============ */
.ecs-table table{
  width:100%; border-collapse:separate; border-spacing:0;
  font-family: var(--ecs-sans); font-size:15px;
}

/* شريط الملخّص فوق مصفوفة المسؤولية */
.ecs-tsum{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px;
}
.ecs-tsum__i{
  display:inline-flex; align-items:baseline; gap:7px;
  padding:9px 15px; font-size:13.5px; line-height:1;
  background: var(--ecs-white); border:1px solid var(--ecs-line);
  color: var(--ecs-muted);
}
.ecs-tsum__i b{ font-size:19px; font-weight:600; color: var(--ecs-ink) }
.ecs-tsum__i i{ font-style:normal; font-weight:600; color: var(--ecs-ink) }
.ecs-tsum__i.is-a{ border-color: var(--ecs-hv); background: var(--ecs-hv-soft) }
.ecs-tsum__i.is-a b{ color: var(--ecs-hv-d) }

/* ============ 1) مصفوفة المسؤولية (3 أعمدة) ============ */
.ecs-table.is-matrix table{
  background: var(--ecs-white); border:1px solid var(--ecs-line);
}
.ecs-table.is-matrix th{
  position:sticky; top:0; z-index:2;
  text-align:start; padding:15px 20px;
  background: var(--ecs-ink); color:#fff;
  font-size:12.5px; font-weight:600; letter-spacing:.05em;
  white-space:nowrap;
}
.ecs-table.is-matrix th.c{ text-align:center }
.ecs-table.is-matrix td{
  padding:0 20px; height:54px; vertical-align:middle;
  border-top:1px solid var(--ecs-line);
  color: var(--ecs-body); line-height:1.5;
}
.ecs-table.is-matrix tbody tr:first-child td{ border-top:0 }
.ecs-table.is-matrix td:first-child{
  font-weight:500; color: var(--ecs-ink);
}
/* تظليل خفيف لعمود ECS يفصل الطرفين بصريًا */
.ecs-table.is-matrix td.c:nth-child(2),
.ecs-table.is-matrix th.c:nth-child(2){ background: rgba(242,160,7,.05) }
.ecs-table.is-matrix th.c:nth-child(2){ background: var(--ecs-ink) }
.ecs-table.is-matrix td.c{ text-align:center; width:132px; padding:0 }

.ecs-table.is-matrix tbody tr{ transition: background var(--ecs-tr) }
.ecs-table.is-matrix tbody tr:hover{ background: var(--ecs-hv-soft) }
.ecs-table.is-matrix tbody tr:hover td.c:nth-child(2){ background:transparent }

/* العلامات */
.ecs-table .y,
.ecs-table .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; font-size:14px; font-weight:700; flex:none;
  transition: transform var(--ecs-tr);
}
.ecs-table .y{ background: var(--ecs-hv); color: var(--ecs-hv-ink) }
.ecs-table .n{
  background:transparent; border:0; color:#C4CCD4; font-size:18px;
}
.ecs-table.is-matrix tbody tr:hover .y{ transform:scale(1.14) }

/* ============ 2) بطاقات الالتزام (عمودان) ============ */
.ecs-table.is-2col table,
.ecs-table.is-2col tbody{ display:block; border:0; background:transparent }
.ecs-table.is-2col thead{ display:none }
.ecs-table.is-2col tbody{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background: var(--ecs-line); border:1px solid var(--ecs-line);
}
.ecs-table.is-2col tr{
  display:flex; flex-direction:column-reverse; justify-content:flex-end;
  background: var(--ecs-white); padding:22px 22px 20px;
  transition: background var(--ecs-tr);
  position:relative;
}
.ecs-table.is-2col tr::before{
  content:""; position:absolute; top:0; inset-inline-start:0;
  width:0; height:3px; background: var(--ecs-hv);
  transition: width .32s cubic-bezier(.22,.61,.36,1);
}
.ecs-table.is-2col tr:hover::before{ width:46px }
.ecs-table.is-2col td{
  display:block; padding:0; border:0;
}
/* القيمة — تظهر أعلى البطاقة بفضل column-reverse */
.ecs-table.is-2col td:last-child{
  font-family: var(--ecs-sans); font-size:22px; font-weight:600;
  line-height:1.15; color: var(--ecs-hv-d); margin-bottom:9px;
  white-space:nowrap;
}
.ecs-table.is-2col td:first-child{
  font-size:14.5px; line-height:1.6; color: var(--ecs-muted); font-weight:400;
}

@media (max-width: 1024px){
  .ecs-table.is-2col tbody{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width: 767px){
  .ecs-table.is-2col tbody{ grid-template-columns:1fr }
  .ecs-table.is-2col tr{ padding:18px 18px 16px }
  .ecs-table.is-2col td:last-child{ font-size:20px }

  /* المصفوفة تتحول إلى بطاقات مكدّسة بدل التمرير الأفقي */
  .ecs-table.is-matrix table,
  .ecs-table.is-matrix tbody,
  .ecs-table.is-matrix tr,
  .ecs-table.is-matrix td{ display:block; width:auto }
  .ecs-table.is-matrix thead{ display:none }
  .ecs-table.is-matrix table{ border:0; background:transparent }
  .ecs-table.is-matrix tr{
    background: var(--ecs-white); border:1px solid var(--ecs-line);
    margin-bottom:10px; padding:14px 16px;
  }
  .ecs-table.is-matrix td{ border:0; height:auto; padding:0 }
  .ecs-table.is-matrix td:first-child{
    font-size:15px; margin-bottom:10px; padding-bottom:10px;
    border-bottom:1px dashed var(--ecs-line);
  }
  .ecs-table.is-matrix td.c{
    display:flex; align-items:center; justify-content:space-between;
    width:auto; padding:5px 0; text-align:start;
  }
  .ecs-table.is-matrix td.c::before{
    content: attr(data-label);
    font-size:13px; font-weight:600; color: var(--ecs-muted);
  }
  .ecs-table.is-matrix td.c:nth-child(2){ background:transparent }
  .ecs-tsum__i{ flex:1 1 auto; justify-content:center }
}

/* --- صف مواصفة: تسمية + قيمة --- */
.ecs-specs .elementor-icon-list-items{ margin:0; padding:0 }
.ecs-specs .elementor-icon-list-item{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:14px 0; border-top:1px solid var(--ecs-line);
  font-size:15px; color:var(--ecs-body);
}
.ecs-specs .elementor-icon-list-item:last-child{ border-bottom:1px solid var(--ecs-line) }
.ecs-specs .elementor-icon-list-icon{ display:none }
.ecs-specs .elementor-icon-list-text b,
.ecs-specs b{
  font-family:'Barlow Condensed',sans-serif; font-variant-numeric:tabular-nums;
  font-size:19px; color:var(--ecs-ink); font-weight:700;
}
.ecs-dark .ecs-specs .elementor-icon-list-item{
  border-top-color:var(--ecs-line-d); color:#C3D2E2;
}
.ecs-dark .ecs-specs .elementor-icon-list-item:last-child{ border-bottom-color:var(--ecs-line-d) }
.ecs-dark .ecs-specs b{ color:var(--ecs-hv) }

/* --- بطاقة دور: عنوان + وصف --- */
.ecs-role h4,
.ecs-role .elementor-heading-title{ margin-bottom:6px }

/* --- شريط أرقام داخل الترويسة --- */
.e-con.ecs-facts{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--ecs-line-d);
}
.e-con.ecs-facts > *{
  padding:24px 22px 0;
  border-inline-start:1px solid var(--ecs-line-d);
}
.e-con.ecs-facts > *:first-child{ border-inline-start:0; padding-inline-start:0 }
@media (max-width: 767px){
  .e-con.ecs-facts{ grid-template-columns:1fr }
  .e-con.ecs-facts > *{
    border-inline-start:0; padding-inline-start:0;
    border-top:1px solid var(--ecs-line-d); padding-block:18px 0;
  }
  .e-con.ecs-facts > *:first-child{ border-top:0 }
}


/* --- العنوان التمهيدي على ويدجت عنوان --- */
.ecs-eyebrow .elementor-heading-title{
  display:inline-block;
  font-family:var(--ecs-sans); font-size:12px; font-weight:600; letter-spacing:.08em;
  color:var(--ecs-hv-d);
  border-bottom:2px solid var(--ecs-hv); padding-bottom:5px;
}
.ecs-dark .ecs-eyebrow .elementor-heading-title{ color:var(--ecs-hv) }

/* --- صف مواصفة: الفصل بين التسمية والقيمة داخل span إليمنتور --- */
.ecs-specs .elementor-icon-list-item{ width:100% }
.ecs-specs .elementor-icon-list-text{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:20px; width:100%;
}

/* --- بطاقة دور مبنية بـ HTML --- */
.ecs-card__n{ display:block }
.ecs-role p:last-child{ margin-bottom:0 }
.ecs-role h4{ font-size:19px; line-height:1.4 }

/* --- أسئلة الخدمة: details/summary، بلا جافاسكربت --- */
.ecs-qa{ border:1px solid var(--ecs-line); background:var(--ecs-white) }
.ecs-qa details{ border-top:1px solid var(--ecs-line) }
.ecs-qa details:first-child{ border-top:0 }
.ecs-qa summary{
  list-style:none; cursor:pointer; position:relative;
  padding:20px 58px 20px 24px;
  font-family:var(--ecs-display); font-weight:700; font-size:17px; line-height:1.5;
  color:var(--ecs-ink); transition:var(--ecs-tr);
}
[dir="rtl"] .ecs-qa summary{ padding:20px 24px 20px 58px }
.ecs-qa summary::-webkit-details-marker{ display:none }
.ecs-qa summary::after{
  content:""; position:absolute; top:26px; inset-inline-end:24px;
  width:13px; height:13px; flex:none;
  background:var(--ecs-hv);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transition:transform .3s ease;
}
.ecs-qa details[open] summary::after{ transform:rotate(180deg) }
.ecs-qa summary:hover{ background:var(--ecs-hv-soft) }
.ecs-qa details[open] summary{ background:var(--ecs-hv-soft) }
.ecs-qa .a{
  padding:0 24px 22px;
  font-size:15.5px; line-height:1.85; color:var(--ecs-body);
}
.ecs-qa .a p{ margin:0 0 10px }
.ecs-qa .a p:last-child{ margin-bottom:0 }


/* ============================================================
   23 — NAV MENU  (قائمة ووردبريس مع قائمة منسدلة)
   تُستعمل عبر [ecs_menu] داخل هيدر ElementsKit أو الثيم.
   ============================================================ */
.ecs-navmenu ul{ list-style:none; margin:0; padding:0 }
.ecs-navmenu > ul{
  display:flex; align-items:center; gap:clamp(14px,1.6vw,26px);
}
.ecs-navmenu li{ position:relative }
.ecs-navmenu a{
  display:block; padding:8px 0; white-space:nowrap;
  font-family:var(--ecs-sans); font-size:15px; font-weight:600; line-height:1.5;
  color:var(--ecs-ink); transition:var(--ecs-tr);
}
.ecs-navmenu a:hover{ color:var(--ecs-hv-d) }
.ecs-navmenu .current-menu-item > a,
.ecs-navmenu .current-page-ancestor > a{ color:var(--ecs-hv-d) }

/* سهم العنصر الأب */
.ecs-navmenu .menu-item-has-children > a::after{
  content:""; display:inline-block; width:8px; height:8px;
  margin-inline-start:7px; background:var(--ecs-hv);
  clip-path:polygon(0 0,100% 0,50% 100%);
}

/* القائمة المنسدلة */
.ecs-navmenu .sub-menu{
  position:absolute; top:100%; inset-inline-start:0;
  min-width:252px; z-index:60; padding:6px 0;
  background:var(--ecs-white); border:1px solid var(--ecs-line);
  box-shadow:0 22px 40px -24px rgba(15,29,44,.45);
  opacity:0; visibility:hidden; transform:translateY(7px);
  transition:var(--ecs-tr);
}
.ecs-navmenu li:hover > .sub-menu,
.ecs-navmenu li:focus-within > .sub-menu{
  opacity:1; visibility:visible; transform:none;
}
.ecs-navmenu .sub-menu a{
  padding:11px 18px; font-size:14.5px; font-weight:500; white-space:normal;
  border-inline-start:3px solid transparent;
}
.ecs-navmenu .sub-menu a:hover{
  background:var(--ecs-hv-soft); border-inline-start-color:var(--ecs-hv);
}

@media (max-width: 900px){
  .ecs-navmenu > ul{ flex-direction:column; align-items:stretch; gap:0 }
  .ecs-navmenu > ul > li > a{
    padding:14px 0; font-size:16px; border-bottom:1px solid var(--ecs-line);
  }
  .ecs-navmenu .menu-item-has-children > a::after{ float:inline-end; margin-top:9px }
  .ecs-navmenu .sub-menu{
    position:static; min-width:0; padding:0 0 8px;
    opacity:1; visibility:visible; transform:none;
    background:transparent; border:0; box-shadow:none;
  }
  .ecs-navmenu .sub-menu a{ padding-block:10px; font-size:14.5px; border-inline-start:0 }
  .ecs-navmenu .sub-menu a::before{
    content:"—"; color:var(--ecs-hv); margin-inline-end:8px;
  }
}

/* ============================================================
   24 — CALCULATOR  ([ecs_calc])
   أداة لا مقالة. لوح داكن مضغوط: مُدخلات صغيرة، رقم واحد مهيمن،
   وأرقام مساندة في سطر واحد، ثم زر يرسل الأرقام إلى الفريق.
   ============================================================ */
.ecs-calc{
  background: var(--ecs-ink); color:#C3D2E2;
  border:1px solid var(--ecs-line-d);
  padding: clamp(20px, 2.4vw, 28px);
  position:relative; isolation:isolate;
}
.ecs-calc::before{
  content:""; position:absolute; top:0; inset-inline:0; height:3px; z-index:2;
  background: repeating-linear-gradient(135deg,
    var(--ecs-hv) 0 12px, transparent 12px 24px);
}

/* ---- المُدخلات ---- */
.ecs-calc__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px 14px;
}
.ecs-calc label{
  display:block; margin-bottom:6px;
  font-family: var(--ecs-sans); font-size:11.5px; font-weight:600;
  letter-spacing:.04em; color:#8FA4BB;
}
.ecs-calc input,
.ecs-calc select{
  width:100%; height:44px; padding:0 12px;
  font-family: var(--ecs-sans); font-size:15px; font-weight:500;
  color:#fff; background: var(--ecs-ink-2);
  border:1px solid var(--ecs-line-d); border-radius:0;
  transition: border-color var(--ecs-tr), background var(--ecs-tr);
  appearance:none; -webkit-appearance:none;
}
.ecs-calc select{
  background-image:
    linear-gradient(45deg, transparent 50%, #8FA4BB 50%),
    linear-gradient(135deg, #8FA4BB 50%, transparent 50%);
  background-position: 14px calc(50% - 2px), 19px calc(50% - 2px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-inline-start:34px;
}
.ecs-calc input:focus,
.ecs-calc select:focus{
  outline:0; border-color: var(--ecs-hv); background:#12202F;
}
.ecs-calc select option{ background: var(--ecs-ink); color:#fff }

/* ---- النتيجة ---- */
.ecs-calc__out{
  margin-top:20px; padding-top:18px;
  border-top:1px solid var(--ecs-line-d);
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:0 24px;
}
.ecs-calc__big{ display:flex; align-items:baseline; gap:10px }
.ecs-calc__big b{
  font-family: var(--ecs-sans); font-size: clamp(46px, 6vw, 66px);
  font-weight:700; line-height:.85; color: var(--ecs-hv);
  font-variant-numeric: tabular-nums;
  transition: opacity .18s ease;
}
.ecs-calc__big span{
  font-size:13px; line-height:1.45; color:#8FA4BB; max-width:12ch;
}
.ecs-calc.is-upd .ecs-calc__big b{ opacity:.35 }

/* الأرقام المساندة */
.ecs-calc__chips{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end;
}
.ecs-calc__chip{
  display:inline-flex; align-items:baseline; gap:6px;
  padding:8px 13px; font-size:12.5px; line-height:1;
  background: var(--ecs-ink-2); border:1px solid var(--ecs-line-d);
  color:#8FA4BB; white-space:nowrap;
}
.ecs-calc__chip b{
  font-size:15px; font-weight:600; color:#fff;
  font-variant-numeric: tabular-nums;
}
.ecs-calc__chip--hv{ border-color: rgba(242,160,7,.45) }
.ecs-calc__chip--hv b{ color: var(--ecs-hv) }

/* ---- الإجراء ---- */
.ecs-calc__cta{
  margin-top:18px; padding-top:16px;
  border-top:1px solid var(--ecs-line-d);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.ecs-calc__fine{ font-size:12px; line-height:1.5; color:#6F8299; margin:0 }
.ecs-calc__go{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  height:46px; padding:0 22px;
  font-family: var(--ecs-sans); font-size:14.5px; font-weight:600;
  background: var(--ecs-hv); color: var(--ecs-hv-ink);
  border:0; text-decoration:none;
  transition: background var(--ecs-tr), transform var(--ecs-tr);
}
.ecs-calc__go:hover{ background:#FFB524; transform:translateY(-1px); color: var(--ecs-hv-ink) }
.ecs-calc__go::after{
  content:""; width:6px; height:6px; flex:none;
  border-top:2px solid currentColor; border-inline-start:2px solid currentColor;
  transform: rotate(-45deg);
}

@media (max-width: 900px){
  .ecs-calc__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .ecs-calc__out{ grid-template-columns:1fr; gap:16px }
  .ecs-calc__chips{ justify-content:flex-start }
}
@media (max-width: 560px){
  .ecs-calc__grid{ grid-template-columns:1fr }
  .ecs-calc__cta{ flex-direction:column; align-items:stretch }
  .ecs-calc__go{ justify-content:center }
}

/* ============================================================
   25 — FOOTER TOP EDGE
   الفوتر كان يلتصق بمحتوى الصفحة بلا فاصل. نضيف الشريط المائل
   نفسه الموجود أعلى الهيرو، وشبكة البلوبرنت نفسها بشفافية أقل،
   فيصبح الفوتر امتدادًا لنفس اللغة البصرية لا كتلة معلّقة.
   يعمل على أي فوتر ElementsKit بلا تعديل القالب.
   ============================================================ */
.e-con.ecs-ekfoot{ position:relative; isolation:isolate }

/* الشريط المائل الفاصل */
.e-con.ecs-ekfoot::before{
  content:""; position:absolute; z-index:2;
  top:0; inset-inline:0; height:6px; pointer-events:none;
  background: repeating-linear-gradient(135deg,
    var(--ecs-hv) 0 16px, var(--ecs-ink) 16px 32px);
}

/* شبكة البلوبرنت — تتلاشى نحو الأسفل */
.e-con.ecs-ekfoot::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--ecs-line-d) 1px, transparent 1px),
    linear-gradient(90deg, var(--ecs-line-d) 1px, transparent 1px);
  background-size:78px 78px, 78px 78px;
  opacity:.26;
  -webkit-mask-image: radial-gradient(120% 85% at 20% 0%, #000 0%, rgba(0,0,0,.3) 52%, transparent 86%);
          mask-image: radial-gradient(120% 85% at 20% 0%, #000 0%, rgba(0,0,0,.3) 52%, transparent 86%);
}

/* المحتوى فوق الطبقتين */
.e-con.ecs-ekfoot > *{ position:relative; z-index:1 }

/* مسافة تنفّس أعلى الفوتر بعد الشريط */
.e-con.ecs-ekfoot{ padding-top: clamp(52px, 6vw, 76px) }

@media (max-width: 767px){
  .e-con.ecs-ekfoot::after{ background-size:52px 52px, 52px 52px; opacity:.2 }
}

/* ============================================================
   26 — JOB FAMILIES  (عائلات الأدوار — صفحة الوظائف)
   لوحتان متجاورتان، كل واحدة قائمة أدوار. اسم الدور أعلى السطر
   ونطاقه تحته، مع وسم للأدوار التي تحتاج رخصة.
   ============================================================ */
.e-con.ecs-fams{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--ecs-gap);
  align-items:start;
}
.e-con.ecs-fam{
  background:var(--ecs-white); border:1px solid var(--ecs-line);
  border-top:4px solid var(--ecs-ink);
  padding:32px 28px 26px;
}
.e-con.ecs-fam--b{ border-top-color: var(--ecs-hv) }

.ecs-fam__n .elementor-heading-title{
  font-family: var(--ecs-sans); font-size:12px; font-weight:600;
  letter-spacing:.06em; color: var(--ecs-hv-d); margin-bottom:6px;
}
.e-con.ecs-fam h3{ font-size:22px; line-height:1.35; margin:0 0 8px }
.e-con.ecs-fam > .elementor-widget-text-editor p{
  font-size:14.5px; color: var(--ecs-muted); margin:0 0 18px;
}

/* قائمة الأدوار */
.ecs-roles .elementor-icon-list-items{ display:block }
.ecs-roles .elementor-icon-list-item{
  display:block; padding:11px 0;
  border-bottom:1px dashed var(--ecs-line);
}
.ecs-roles .elementor-icon-list-item:last-child{ border-bottom:0; padding-bottom:0 }
.ecs-roles .elementor-icon-list-icon{ display:none }
.ecs-roles .elementor-icon-list-text{
  display:block; padding:0; font-size:15px; line-height:1.55; color: var(--ecs-ink);
}
.ecs-roles b{ font-weight:600; color: var(--ecs-ink) }
.ecs-roles i{
  display:block; font-style:normal; margin-top:3px;
  font-size:13.5px; line-height:1.6; color: var(--ecs-muted);
}
.ecs-roles .lic{
  display:inline-block; margin-inline-start:8px; vertical-align:2px;
  font-size:11px; font-weight:600; letter-spacing:.04em;
  color: var(--ecs-hv-d); border:1px solid var(--ecs-hv);
  padding:1px 7px; white-space:nowrap;
}

/* ملاحظة التحقق أسفل العائلتين */
.ecs-vet{
  margin-top:26px; padding:20px 24px;
  background: var(--ecs-ink); color:#C3D2E2;
}
.ecs-vet p{ margin:0; font-size:14.5px; line-height:1.75; color:#C3D2E2 }
.ecs-vet b{ color:#fff; font-weight:600 }

/* ---------- 26.2 الشريط التفاعلي (من assets/ecs.js) ----------
   عائلة واحدة ظاهرة في المرة، وبحث فوري يعرض العائلتين معًا. */
.ecs-fambar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px; margin:28px 0 18px;
}
.ecs-seg{
  display:inline-flex; border:1px solid var(--ecs-line);
  background: var(--ecs-white);
}
.ecs-seg__b{
  display:inline-flex; align-items:center; gap:9px;
  height:46px; padding:0 20px; border:0; cursor:pointer;
  font-family: var(--ecs-sans); font-size:14.5px; font-weight:600;
  color: var(--ecs-muted); background:transparent;
  transition: color var(--ecs-tr), background var(--ecs-tr);
  position:relative;
}
.ecs-seg__b + .ecs-seg__b{ border-inline-start:1px solid var(--ecs-line) }
.ecs-seg__b span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:20px; padding:0 6px;
  font-size:12px; font-weight:600;
  background: var(--ecs-paper); color: var(--ecs-muted);
  transition: background var(--ecs-tr), color var(--ecs-tr);
}
.ecs-seg__b:hover{ color: var(--ecs-ink) }
.ecs-seg__b.is-on{ color: var(--ecs-ink); background: var(--ecs-paper) }
.ecs-seg__b.is-on::after{
  content:""; position:absolute; bottom:-1px; inset-inline:0; height:3px;
  background: var(--ecs-hv);
}
.ecs-seg__b.is-on span{ background: var(--ecs-hv); color: var(--ecs-hv-ink) }

.ecs-fsearch{ position:relative; display:flex; align-items:center; gap:12px }
.ecs-fsearch input{
  width: clamp(200px, 26vw, 300px); height:46px;
  padding:0 16px; font-family: var(--ecs-sans); font-size:14.5px;
  color: var(--ecs-ink); background: var(--ecs-white);
  border:1px solid var(--ecs-line); border-radius:0;
  transition: border-color var(--ecs-tr);
  appearance:none; -webkit-appearance:none;
}
.ecs-fsearch input:focus{ outline:0; border-color: var(--ecs-hv) }
.ecs-fsearch input::placeholder{ color:#A8B2BD }
.ecs-fsearch__n{
  font-size:13px; color: var(--ecs-muted); white-space:nowrap;
}

/* اللوحة المخفية في وضع التبويب */
.e-con.ecs-fams.is-tabs > .ecs-fam{ display:none }
.e-con.ecs-fams.is-tabs > .ecs-fam.is-on{ display:flex }
.e-con.ecs-fams.is-tabs{ grid-template-columns:1fr }

/* العائلة الظاهرة وحدها → عمودان للأدوار، فينخفض الطول للنصف */
.ecs-fams.is-tabs .ecs-roles .elementor-icon-list-items{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap: 34px;
}
@media (min-width: 1100px){
  .ecs-fams.is-tabs .ecs-roles .elementor-icon-list-items{
    grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:28px;
  }
}
.ecs-fams.is-tabs .ecs-roles .elementor-icon-list-item:nth-last-child(2){
  border-bottom:0;
}

/* الظهور المتدرّج عند التبديل أو البحث */
.ecs-fam.is-anim .elementor-icon-list-item{
  animation: ecsRoleIn .42s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--i, 0) * 26ms);
}
@keyframes ecsRoleIn{
  from{ opacity:0; transform: translateY(9px) }
  to  { opacity:1; transform:none }
}
.ecs-fam.is-anim .ecs-fam__n,
.ecs-fam.is-anim > .elementor-widget-heading,
.ecs-fam.is-anim > .elementor-widget-text-editor{
  animation: ecsRoleIn .38s cubic-bezier(.22,.61,.36,1) both;
}

/* لا نتيجة */
.ecs-fam__empty{
  padding:26px 4px; font-size:15px; color: var(--ecs-muted);
}
.ecs-fam__empty b{ color: var(--ecs-ink) }

/* إبراز نص البحث */
.ecs-roles mark{
  background: var(--ecs-hv-soft); color: var(--ecs-hv-d);
  padding:0 2px; font-weight:600;
}

@media (prefers-reduced-motion: reduce){
  .ecs-fam.is-anim .elementor-icon-list-item,
  .ecs-fam.is-anim > *{ animation:none }
}
@media (max-width: 900px){
  .ecs-fams.is-tabs .ecs-roles .elementor-icon-list-items{ grid-template-columns:1fr }
  .ecs-fambar{ gap:12px }
  .ecs-fsearch{ width:100% }
  .ecs-fsearch input{ width:100%; flex:1 1 auto }
  .ecs-seg{ width:100% }
  .ecs-seg__b{ flex:1 1 0; justify-content:center; padding:0 12px; font-size:13.5px }
}

@media (max-width: 900px){
  .e-con.ecs-fams{ grid-template-columns:1fr }
}
@media (max-width: 767px){
  .e-con.ecs-fam{ padding:26px 20px 22px }
  .e-con.ecs-fam h3{ font-size:20px }
}

/* ============================================================
   27 — MEDIA & ABOUT
   أماكن الصور والزمن والبيانات الرسمية. الغرض أن تبدو الصفحة
   لشركة قائمة لها مقر وتاريخ ومواقع، لا صفحة مكتوبة على مكتب.
   ============================================================ */

/* ---------- 27.1 مكان صورة ---------- */
.e-con.ecs-fig{
  position:relative; overflow:hidden; padding:0;
  display:flex; flex-direction:column;
  background: var(--ecs-ink-2);
  border:1px solid var(--ecs-line-d);
  aspect-ratio: 3 / 2;
}
.e-con.ecs-fig > .elementor-element{
  flex:1 1 auto; width:100%; min-height:0; display:flex;
}
.e-con.ecs-fig .elementor-widget-container{
  flex:1 1 auto; width:100%; min-height:0; display:flex; margin:0;
}
.e-con.ecs-fig img{
  flex:1 1 auto; display:block;
  width:100%; height:100%; min-height:0;
  object-fit:cover; object-position:center;
}
/* حالة الفراغ — قبل رفع الصورة */
.e-con.ecs-fig img[src*="placeholder"]{
  object-fit:contain; padding:22%; opacity:.16;
}
/* خط ضوء رفيع يعطي إحساس الإطار */
.e-con.ecs-fig::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
/* وسم ركن كهرماني */
.e-con.ecs-fig--mark::before{
  content:""; position:absolute; z-index:3;
  top:0; inset-inline-start:0; width:34px; height:4px;
  background: var(--ecs-hv);
}
/* صورة تملأ نصف القسم المنقسم من حافة إلى حافة */
.e-con.ecs-split > .ecs-fig--bleed{
  padding:0 !important;
  aspect-ratio:auto; align-self:stretch;
  min-height: clamp(400px, 54vw, 640px);
  border:0; border-inline-start:1px solid var(--ecs-line-d);
}
@media (max-width: 900px){
  .e-con.ecs-split > .ecs-fig--bleed{
    min-height: clamp(280px, 62vw, 420px);
    border-inline-start:0; border-top:1px solid var(--ecs-line-d);
  }
}
.e-con.ecs-fig--p{ aspect-ratio: 4 / 5 }
.e-con.ecs-fig--s{ aspect-ratio: 1 / 1 }
.e-con.ecs-fig--w{ aspect-ratio: 16 / 9 }
.e-con.ecs-fig--t{ aspect-ratio: 21 / 9 }

/* ---------- 27.2 شبكة صور غير متماثلة ---------- */
.e-con.ecs-gal{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px; padding:0;
}
.e-con.ecs-gal > .ecs-fig{ aspect-ratio:1 / 1 }
.e-con.ecs-gal > .ecs-fig--a{ grid-column:span 2; grid-row:span 2 }

/* ---------- 27.3 الخط الزمني ---------- */
.e-con.ecs-time{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0; padding:0;
}
.e-con.ecs-tstep{
  position:relative; padding:26px 0 0;
  padding-inline-end:26px;
  border-top:2px solid var(--ecs-line-d);
}
.e-con.ecs-tstep::before{
  content:""; position:absolute; top:-6px; inset-inline-start:0;
  width:10px; height:10px; background: var(--ecs-hv);
}
.ecs-tstep .ecs-t-year .elementor-heading-title{
  font-family: var(--ecs-sans); font-size:28px; font-weight:600;
  line-height:1; color:#fff; margin-bottom:10px;
}
.ecs-tstep h4{ font-size:16px; line-height:1.45; margin:0 0 8px; color:#fff }
.ecs-tstep p{ font-size:14px; line-height:1.7; color:#9DB2C8; margin:0 }

/* ---------- 27.4 شريط البيانات الرسمية ---------- */
.e-con.ecs-idbar{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; padding:0; background: var(--ecs-line);
  border:1px solid var(--ecs-line);
}
.e-con.ecs-idcell{ background: var(--ecs-white); padding:22px 22px 20px }
.ecs-idcell .ecs-idlabel .elementor-heading-title{
  font-family: var(--ecs-sans); font-size:11.5px; font-weight:600;
  letter-spacing:.07em; color: var(--ecs-hv-d); margin-bottom:8px;
}
.ecs-idcell .ecs-idval .elementor-heading-title{
  font-size:17px; line-height:1.45; color: var(--ecs-ink); font-weight:600;
}
.ecs-idcell p{ font-size:13.5px; line-height:1.65; color: var(--ecs-muted); margin:6px 0 0 }

/* ---------- 27.5 قائمة تحريرية بدل شبكة البطاقات ---------- */
.e-con.ecs-ed{
  display:grid; grid-template-columns:1fr 1fr;
  column-gap: calc(var(--ecs-gap) * 1.6); row-gap:0; padding:0;
}
.ecs-ed__row{
  display:grid; grid-template-columns:auto 1fr; align-items:start;
  gap:20px; padding:24px 0 22px;
  border-top:1px solid var(--ecs-line);
}
.ecs-ed__row .n{
  font-family: var(--ecs-sans); font-size:34px; font-weight:600; line-height:.9;
  color:transparent; -webkit-text-stroke:1px var(--ecs-line);
  min-width:52px;
}
.ecs-ed__row h4{ font-size:17.5px; line-height:1.4; margin:0 0 6px }
.ecs-ed__row p{ font-size:14.5px; line-height:1.75; color: var(--ecs-muted); margin:0 }
.ecs-ed__row:hover .n{ -webkit-text-stroke-color: var(--ecs-hv) }

/* ---------- 27.6 بطاقة المقر ---------- */
.ecs-addr .elementor-icon-list-item{
  display:block; padding:12px 0; border-bottom:1px solid var(--ecs-line-d);
}
.ecs-addr .elementor-icon-list-item:last-child{ border-bottom:0 }
.ecs-addr .elementor-icon-list-icon{ display:none }
.ecs-addr .elementor-icon-list-text{ display:block; padding:0; font-size:15px; line-height:1.6 }
.ecs-addr b{ display:block; font-size:12px; font-weight:600; letter-spacing:.06em;
  color: var(--ecs-hv); margin-bottom:4px }
.ecs-addr span{ color:#C3D2E2 }

/* ---------- 27.7 سطر مصدر الصورة ---------- */
.ecs-cap p{
  font-size:12.5px; line-height:1.6; color: var(--ecs-muted);
  margin:10px 0 0; padding-inline-start:12px;
  border-inline-start:2px solid var(--ecs-line);
}

@media (max-width: 900px){
  .e-con.ecs-time{ grid-template-columns:1fr 1fr }
  .e-con.ecs-idbar{ grid-template-columns:1fr 1fr }
  .e-con.ecs-ed{ grid-template-columns:1fr }
}
@media (max-width: 767px){
  .e-con.ecs-gal{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .e-con.ecs-gal > .ecs-fig--a{ grid-column:span 2; grid-row:span 1; aspect-ratio:4/3 }
  .e-con.ecs-time{ grid-template-columns:1fr }
  .e-con.ecs-tstep{ padding-inline-end:0 }
  .e-con.ecs-idbar{ grid-template-columns:1fr }
  .ecs-ed__row .n{ font-size:28px; min-width:42px }
}

/* ============================================================
   15 — PRINT
   ============================================================ */
@media print{
  .ecs-mobilebar, .ecs-btn{ display:none }
  body{ background:#fff }
}