/* =========================================================================
   من نحن
   المرجع: دليل الهوية - فصل 29 «مبادئ الحركة» وفصل 20 «نظام الشبكة».
   المحور 32° دائمًا، والمُدد 180 · 420 · 900 مللي، والتيسير
   cubic-bezier(.2,.8,.2,1)، والتتابع 60 مللي. سبعة أعمدة، ونصّ الجسم
   لا يتجاوز خمسة منها. نصف قطر صفر، بلا ظلال ولا تدرّجات.
   ========================================================================= */

.ab{
  --ax-x:-26px;          /* الإزاحة على المحور: 16 ÷ 26 = 0.625 = ظلّ 32° */
  --ax-y:16px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
/* الدليل يعكس المواضع للعربية (الشعار أسفل اليمين بدل أسفل اليسار)،
   فيدخل العنصر من جهة بداية القراءة، والمقدار يبقى على المحور نفسه. */
html[dir="rtl"] .ab{--ax-x:26px;}

/* ---------- الدخول على المحور ---------- */
/* الفئة يضيفها السكربت، فبدون جافاسكربت لا يُخفى شيء */
.ax > *{
  opacity:0;
  transform:translate(var(--ax-x,-26px),var(--ax-y,16px));
  transition:opacity 420ms var(--ease,cubic-bezier(.2,.8,.2,1)),
             transform 420ms var(--ease,cubic-bezier(.2,.8,.2,1));
  transition-delay:calc(var(--i,0) * 60ms);   /* التتابع المنصوص عليه */
}
.ax.is-on > *{opacity:1;transform:none;}

.ax-one{
  opacity:0;
  transform:translate(var(--ax-x,-26px),var(--ax-y,16px));
  transition:opacity 420ms var(--ease,cubic-bezier(.2,.8,.2,1)),
             transform 420ms var(--ease,cubic-bezier(.2,.8,.2,1));
}
.ax-one.is-on{opacity:1;transform:none;}

/* ---------- الترويسة ---------- */
.ab-head{
  border-block-end:2px solid var(--graphite);
  padding-block:8px 34px;
}
.ab-head .eyebrow{color:var(--signal);margin-block-end:20px;}
.ab-head h1{
  font-size:clamp(34px,5vw,64px);
  line-height:1.02;
  font-weight:700;
  letter-spacing:-.04em;
  margin:0 0 18px;
  max-width:14ch;
}
html[dir="rtl"] .ab-head h1{letter-spacing:0;line-height:1.2;max-width:17ch;}
.ab-head p{
  font-size:18px;
  line-height:1.6;
  font-weight:300;
  color:var(--muted);
  max-width:52ch;                 /* نصّ الجسم لا يتجاوز خمسة أعمدة */
  margin:0;
}

/* ---------- الرسالة: لوح يصل على المحور ثم يثبت ---------- */
.ab-mission{
  position:relative;
  overflow:hidden;
  background:var(--graphite);
  color:var(--bone);
  padding:56px 52px;
  margin-block-start:56px;
}
.ab-mission-k{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--plane);
  margin-block-end:22px;
  display:block;
}
.ab-mission .rich-content{
  font-size:clamp(20px,2.4vw,30px);
  line-height:1.5;
  font-weight:300;
  color:var(--bone);
  max-width:38ch;
}
.ab-mission .rich-content p{margin:0 0 .7em;}
.ab-mission .rich-content p:last-child{margin:0;}

/* المسحة على المحور 32° - هي الانتقال، لا التلاشي */
.ab-mission::after{
  content:"";
  position:absolute;
  inset-block:-20%;
  inset-inline-start:-40%;
  inline-size:38%;
  background:var(--plane);
  opacity:.55;
  transform:skewX(-32deg) translateX(-170%);
  pointer-events:none;
}
.ab-mission.is-on::after{animation:abSweep 900ms cubic-bezier(.2,.8,.2,1) forwards;}
@keyframes abSweep{
  from{transform:skewX(-32deg) translateX(-170%);}
  to  {transform:skewX(-32deg) translateX(470%);}
}

/* ---------- الأرقام ---------- */
.ab-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-block-start:0;
}
.ab-stat{background:var(--bone);padding:30px 26px;min-inline-size:0;}
.ab-stat b{
  display:block;
  font-family:var(--font-mono);
  font-size:clamp(28px,3.4vw,44px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--graphite);
  margin-block-end:10px;
}
.ab-stat span{
  display:block;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

/* ---------- القصة ---------- */
.ab-story{
  display:grid;
  grid-template-columns:4fr 3fr;   /* أربعة أعمدة نصًّا وثلاثة بطاقةً */
  gap:56px;
  align-items:start;
  padding-block:80px;
}
.ab-story .eyebrow{color:var(--signal);margin-block-end:16px;}
.ab-story h2{
  font-size:clamp(24px,2.8vw,34px);
  line-height:1.18;
  font-weight:700;
  letter-spacing:-.03em;
  margin:0 0 20px;
  max-width:20ch;
}
html[dir="rtl"] .ab-story h2{letter-spacing:0;line-height:1.34;}
.ab-story .rich-content{
  font-size:16px;
  line-height:1.9;
  color:var(--muted);
  font-weight:300;
  max-width:56ch;
}
.ab-story .rich-content p{margin:0 0 1.15em;}

/* بطاقة المُشغّل: جدول مواصفات لا صندوق */
.ab-op{border:1px solid var(--line);background:var(--bone);}
.ab-op-h{
  background:var(--graphite);
  color:var(--bone);
  padding:14px 20px;
  font-size:13px;
  font-weight:700;
  letter-spacing:-.02em;
}
.ab-op dl{margin:0;}
.ab-op-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  padding:14px 20px;
  border-block-start:1px solid var(--line);
}
.ab-op-row:first-child{border-block-start:0;}
.ab-op-row dt{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  flex:0 0 auto;
}
.ab-op-row dd{margin:0;font-size:13.5px;text-align:end;overflow-wrap:anywhere;}

/* ---------- عناوين الأقسام ---------- */
.ab-sec-h{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  border-block-end:2px solid var(--graphite);
  padding-block-end:18px;
}
.ab-sec-h h2{
  font-size:clamp(22px,2.6vw,32px);
  font-weight:700;
  letter-spacing:-.03em;
  margin:0;
}
html[dir="rtl"] .ab-sec-h h2{letter-spacing:0;}
.ab-sec-h span{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}

/* ---------- القيم ---------- */
.ab-values{padding-block-end:80px;}
.ab-vals{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border-inline:1px solid var(--line);
  border-block-end:1px solid var(--line);
}
.ab-val{
  background:var(--bone);
  padding:30px 26px 34px;
  position:relative;
  overflow:hidden;
  min-inline-size:0;
}
.ab-val-n{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--signal);
  margin-block-end:16px;
}
.ab-val h3{
  font-size:18px;
  font-weight:700;
  letter-spacing:-.02em;
  margin:0 0 10px;
}
html[dir="rtl"] .ab-val h3{letter-spacing:0;}
.ab-val p{
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  margin:0;
  font-weight:300;
}
/* عنصر واحد يتحرّك عند المرور */
.ab-val::after{
  content:"";
  position:absolute;
  inset-block-end:0;
  inset-inline-start:0;
  inline-size:100%;
  block-size:3px;
  background:var(--signal);
  transform:scaleX(0);
  transform-origin:inline-start center;
  transition:transform 420ms cubic-bezier(.2,.8,.2,1);
}
.ab-val:hover::after{transform:scaleX(1);}

/* ---------- العملاء ---------- */
.ab-clients{background:var(--graphite);color:var(--on-dark);padding-block:80px;}
.ab-clients .ab-sec-h{border-block-end-color:var(--muted);}
.ab-clients .ab-sec-h h2{color:var(--bone);}
.ab-clients .ab-sec-h span{color:var(--sand);}
/* عدد العملاء متغيّر، فآخر صفّ قد يبقى ناقصًا. الفواصل رُسمت أوّلًا
   بخلفية الحاوية مع gap، فظهرت الخانات الفارغة كتلًا رمادية. الحدود
   على الخانات نفسها مع تداخل بكسل واحد تعطي الخيط نفسه ولا تُظهر فراغًا. */
.ab-cl-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.ab-cl{
  background:var(--graphite);
  border:1px solid var(--muted);
  margin-inline-start:-1px;
  margin-block-start:-1px;
  padding:26px 22px;
  font-size:14px;
  color:var(--on-dark);
  min-inline-size:0;
  display:flex;
  align-items:center;
  gap:12px;
  transition:background 180ms cubic-bezier(.2,.8,.2,1);
}
.ab-cl:hover{background:var(--surface-dark);}
.ab-cl i{
  inline-size:6px;
  block-size:6px;
  background:var(--plane);
  flex:0 0 auto;
  display:block;
}

/* ---------- آراء ---------- */
.ab-tst{padding-block:80px;}
.ab-tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-block-start:32px;}

/* شريط الدعوة انتقل إلى .site-cta في main.css ليكون واحدًا لكل الصفحات */

/* ---------- الشاشات الصغيرة ---------- */
@media(max-width:1000px){
  .ab-stats{grid-template-columns:repeat(2,1fr);}
  .ab-cl-grid{grid-template-columns:repeat(2,1fr);}
  .ab-vals{grid-template-columns:repeat(2,1fr);}
  .ab-tst-grid{grid-template-columns:1fr;}
}
@media(max-width:900px){
  .ab-mission{padding:36px 24px;margin-block-start:40px;}
  .ab-story{grid-template-columns:1fr;gap:36px;padding-block:56px;}
  .ab-values{padding-block-end:56px;}
  .ab-clients,.ab-tst{padding-block:56px;}
  .ab-sec-h{flex-direction:column;align-items:flex-start;gap:8px;}
}
@media(max-width:600px){
  .ab-stats{grid-template-columns:1fr;}
  .ab-vals{grid-template-columns:1fr;}
  .ab-cl-grid{grid-template-columns:1fr;}
  .ab-stat{padding:22px 20px;}
  .ab-val{padding:24px 20px 28px;}
}

@media(prefers-reduced-motion:reduce){
  .ax > *,.ax-one{opacity:1;transform:none;transition:none;}
  .ab-mission.is-on::after{animation:none;}
  .ab-mission::after{display:none;}
  .ab-val::after,.ab-cl{transition:none;}
}

/* =========================================================================
   المنهج: سبع مراحل
   منهج العلامة المنشور من دليل الهوية. الحركة وفق دراسة 11 في فصل
   الحركة: «التقدّم يصعد مرحلة واحدة في كل نبضة، خطوات منفصلة لا
   انزلاقًا ناعمًا».
   ========================================================================= */
.ab-method{
  position:relative;
  overflow:hidden;
  background:var(--graphite);
  color:var(--on-dark);
  padding-block:84px;
}
.ab-method-field{
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(112deg,
    rgba(123,140,255,.13) 0 3px, transparent 3px 26px);
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to var(--ab-dir,left),#000 0 30%,transparent 56%);
          mask-image:linear-gradient(to var(--ab-dir,left),#000 0 30%,transparent 56%);
}
.ab-method .wrap{position:relative;z-index:2;}
.ab-method .ab-sec-h{border-block-end-color:var(--muted);}
.ab-method .ab-sec-h h2{color:var(--bone);}
.ab-method .ab-sec-h span{color:var(--plane);}
.ab-method-lead{
  font-size:17px;
  line-height:1.75;
  font-weight:300;
  color:var(--sand);
  max-width:58ch;
  margin:26px 0 34px;
}

/* شريط المراحل السبع */
.ab-steps-bar{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
  margin-block-end:30px;
}
.ab-steps-bar i{
  display:block;
  block-size:4px;
  background:var(--muted);
  transition:background 180ms cubic-bezier(.2,.8,.2,1);
}
.ab-steps-bar i.is-lit{background:var(--signal);}

/* قائمة المراحل */
.ab-stage-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.ab-stage{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:22px 20px;
  border:1px solid var(--muted);
  margin-inline-start:-1px;
  margin-block-start:-1px;
  min-inline-size:0;
  transition:background 180ms cubic-bezier(.2,.8,.2,1);
}
.ab-stage.is-on{background:var(--surface-dark);}
.ab-stage-n{
  font-size:12px;
  font-weight:700;
  /* ‏--muted رمادي معتّم للخلفيات الفاتحة، وعلى الجرافيت يعطي 2.16
     ويرسب. الرملي يعطي 13.5 والمرحلة الجارية تأخذ الأزرق المحيطي. */
  color:var(--sand);
  flex:0 0 auto;
  padding-block-start:2px;
  transition:color 180ms cubic-bezier(.2,.8,.2,1);
}
/* الأزرق المحيطي على خلفية المرحلة الجارية (#33342F) يعطي 4.21 ويرسب،
   فالرقم الجاري يأخذ العظمي، ويبقى الأزرق في شريط التقدّم وحده. */
.ab-stage.is-on .ab-stage-n{color:var(--bone);}
.ab-stage-t{min-inline-size:0;}
.ab-stage h3{
  font-size:16px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--bone);
  margin:0 0 7px;
}
html[dir="rtl"] .ab-stage h3{letter-spacing:0;}
.ab-stage p{
  font-size:13px;
  line-height:1.7;
  color:var(--sand);
  margin:0;
  font-weight:300;
}

/* =========================================================================
   تحت سقف واحد + القدرات
   ========================================================================= */
.ab-roof{padding-block:80px;}
.ab-roof-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.ab-roof-cell{
  border:1px solid var(--line);
  margin-inline-start:-1px;
  margin-block-start:-1px;
  padding:26px 22px 30px;
  background:var(--bone);
  min-inline-size:0;
}
.ab-roof-cell h3{
  font-size:16px;
  font-weight:700;
  letter-spacing:-.02em;
  margin:0 0 9px;
}
html[dir="rtl"] .ab-roof-cell h3{letter-spacing:0;}
.ab-roof-cell p{
  font-size:13.5px;
  line-height:1.75;
  color:var(--muted);
  margin:0;
  font-weight:300;
}

.ab-caps{
  display:flex;
  align-items:baseline;
  gap:24px;
  flex-wrap:wrap;
  margin-block-start:34px;
  padding-block-start:26px;
  border-block-start:1px solid var(--line);
}
.ab-caps-k{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  flex:0 0 auto;
}
.ab-caps-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.ab-caps-list li{
  font-size:13.5px;
  padding:8px 14px;
  border:1px solid var(--line);
  background:var(--bone);
}

/* =========================================================================
   الأزرار - سلوك الدليل (فصل التسلسل البصري)
   لوح 32° يمسح الزرّ عند المرور، والسهم يتقدّم 5 بكسل، والزرّ ينزل
   2 بكسل عند الضغط. نصف قطر صفر وارتفاع أدنى 44 بكسل.
   ========================================================================= */
.ab .btn{position:relative;overflow:hidden;min-block-size:44px;}
.ab .btn::before{
  content:"";
  position:absolute;
  inset-block:-40%;
  inset-inline-start:-40%;
  inline-size:36%;
  background:rgba(242,239,233,.22);
  transform:skewX(-32deg) translateX(-180%);
  transition:transform 320ms cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.ab .btn:hover::before{transform:skewX(-32deg) translateX(420%);}
.ab .btn:active{transform:translateY(2px);transition:transform 180ms cubic-bezier(.2,.8,.2,1);}
.ab .btn:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}

/* ---------- الشاشات الصغيرة ---------- */
@media(max-width:1000px){
  .ab-stage-list{grid-template-columns:repeat(2,1fr);}
  .ab-roof-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  .ab-method{padding-block:56px;}
  .ab-roof{padding-block:56px;}
  .ab-method-lead{font-size:15.5px;margin-block:20px 26px;}
  .ab-steps-bar{gap:3px;}
}
@media(max-width:600px){
  .ab-stage-list{grid-template-columns:1fr;}
  .ab-roof-grid{grid-template-columns:1fr;}
  .ab-caps{flex-direction:column;gap:14px;}
}

@media(prefers-reduced-motion:reduce){
  .ab-steps-bar i,.ab-stage,.ab-stage-n{transition:none;}
  /* بلا حركة تظهر المراحل كلها مضاءة - الحالة النهائية للمنهج */
  .ab-steps-bar i{background:var(--signal);}
  .ab .btn::before{display:none;}
  .ab .btn:active{transform:none;}
}

/* مقدّمة قسم المنظومة وعنوان مكوّناتها */
.ab-roof-lead{
  font-size:16.5px;
  line-height:1.85;
  font-weight:300;
  color:var(--muted);
  max-width:62ch;                 /* لا يتجاوز خمسة أعمدة من سبعة */
  margin:26px 0 30px;
}
.ab-roof-k{
  display:block;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-block-end:14px;
}
@media(max-width:900px){
  .ab-roof-lead{font-size:15px;margin-block:20px 24px;}
}

/* ---------- بطاقات الشهادات: عنوان واقتباس، بلا شخص ---------- */
.ab-tst-card{
  background:var(--bone);
  border:1px solid var(--line);
  padding:28px 26px 30px;
  margin:0;
  min-inline-size:0;
  position:relative;
  overflow:hidden;
}
.ab-tst-n{
  display:block;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--signal);
  margin-block-end:16px;
}
.ab-tst-h{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.02em;
  margin:0 0 12px;
}
html[dir="rtl"] .ab-tst-h{letter-spacing:0;}
.ab-tst-q{
  font-size:15px;
  line-height:1.85;
  font-weight:300;
  color:var(--muted);
  margin:0;
}
/* عنصر واحد يتحرّك عند المرور - نفس سلوك بطاقات القيم */
.ab-tst-card::after{
  content:"";
  position:absolute;
  inset-block-end:0;
  inset-inline-start:0;
  inline-size:100%;
  block-size:3px;
  background:var(--signal);
  transform:scaleX(0);
  transform-origin:inline-start center;
  transition:transform 420ms cubic-bezier(.2,.8,.2,1);
}
.ab-tst-card:hover::after{transform:scaleX(1);}

@media(prefers-reduced-motion:reduce){
  .ab-tst-card::after{transition:none;}
}

/* ---------- سطر الإسناد: صورة واسم ومنصب ---------- */
.ab-tst-by{
  display:flex;
  align-items:center;
  gap:12px;
  margin-block-start:22px;
  padding-block-start:18px;
  border-block-start:1px solid var(--line);
  min-inline-size:0;
}
.ab-tst-av{
  flex:0 0 auto;
  inline-size:42px;
  block-size:42px;
  border-radius:50%;          /* صورة شخص - الدليل نفسه يقصّها دائرة */
  object-fit:cover;
  display:block;
  background:var(--sand-2);
}
/* بلا صورة: مربّع الهوية بحرف الاسم، لا دائرة رمادية فارغة */
.ab-tst-av-i{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0;
  background:var(--graphite);
  color:var(--bone);
  font-family:var(--font-mono);
  font-size:16px;
  font-weight:600;
  line-height:1;
}
.ab-tst-who{display:flex;flex-direction:column;gap:4px;min-inline-size:0;}
.ab-tst-who b{
  font-size:14px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
}
html[dir="rtl"] .ab-tst-who b{letter-spacing:0;}
.ab-tst-who i{
  font-style:normal;
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
}