@charset "utf-8";
/* =========================================================================
   عبدالله شفيع — نظام الهوية
   -------------------------------------------------------------------------
   كل قيمة هنا مستخرجة من خلفية الشعار وبنيته:

   • اللون   — أسود مزرقّ لا محايد. الأطراف ‎#06080B‎ والضوء يرتفع لـ ‎#1E242E‎
   • الملمس  — رمل حيّ (assets/js/sand.js) لا ضجيج رقمي
   • التايبو — امتداد أفقي بالتطويل + صواعد رأسية نادرة وحادة
   • النسبة  — الشعار ~٤:١، وحوله فراغ ~٢٠٪ من كل جهة
   ========================================================================= */

/* ── 1. الخطوط ─────────────────────────────────────────────────────────── */
@font-face { font-family:'Thmanyah Display'; src:url('../fonts/thmanyahserifdisplay-Light.woff2')   format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Thmanyah Display'; src:url('../fonts/thmanyahserifdisplay-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Thmanyah Display'; src:url('../fonts/thmanyahserifdisplay-Medium.woff2')  format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Thmanyah Display'; src:url('../fonts/thmanyahserifdisplay-Bold.woff2')    format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Thmanyah Display'; src:url('../fonts/thmanyahserifdisplay-Black.woff2')   format('woff2'); font-weight:900; font-display:swap; }

@font-face { font-family:'Thmanyah Text'; src:url('../fonts/thmanyahseriftext-Light.woff2')   format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Thmanyah Text'; src:url('../fonts/thmanyahseriftext-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }

/* HT Moshreq Pro — hadiType Foundry (محمد هادي). خط تجاري.
   ⚠︎ رخصة الويب تُشترى من haditypo.com قبل النشر.
   الوزن الأسود مسجّل داخل الملف ‎800‎ لا ‎900‎ رغم اسم الملف الأصلي —
   الإعلان بـ‎800‎ ضروري وإلا زيّف المتصفّح الوزن وشوّه الحروف. */
@font-face { font-family:'Moshreq'; src:url('../fonts/htmoshreqpro-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Moshreq'; src:url('../fonts/htmoshreqpro-Black.woff2')   format('woff2'); font-weight:800; font-display:swap; }

@font-face { font-family:'Thmanyah Sans'; src:url('../fonts/thmanyahsans-Light.woff2')   format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Thmanyah Sans'; src:url('../fonts/thmanyahsans-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Thmanyah Sans'; src:url('../fonts/thmanyahsans-Medium.woff2')  format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Thmanyah Sans'; src:url('../fonts/thmanyahsans-Bold.woff2')    format('woff2'); font-weight:700; font-display:swap; }

/* ── 2. المتغيّرات ─────────────────────────────────────────────────────── */
:root {
  --r: 20px;                              /* تدوير الأطر */
  /* الرماديات كلها باردة: المكوّن الأزرق أعلى من الأحمر، كخلفية الشعار */
  --void:  #06080B;
  --bg:    #0A0D12;
  --bg-2:  #10141A;
  --bg-3:  #171C24;
  --rise:  #1E242E;

  --mark:  #FFFFFF;                       /* الشعار أبيض خالص، لا مكسور */
  --fg:    #EDEFF3;
  --fg-2:  rgba(237, 239, 243, 0.58);
  --fg-3:  rgba(237, 239, 243, 0.32);
  --fg-4:  rgba(237, 239, 243, 0.13);
  --line:  rgba(237, 239, 243, 0.09);

  /* ثلاث طبقات: العلامة (موشرق أسود) ← العرض (موشرق عادي) ← النص (ثمانية).
     موشرق أضيق وأشدّ أفقية — يقوى كلّما كبر، ويتعب في القراءة الطويلة.
     فبقي جسم النص على ثمانية: أوسع وأريح على السطر الطويل. */
  --f-mark:   'Moshreq', 'Thmanyah Display', Georgia, serif;   /* ٨٠٠ */
  --f-display:'Moshreq', 'Thmanyah Display', Georgia, serif;   /* ٤٠٠ */
  --f-text:   'Thmanyah Text', Georgia, serif;
  --f-sans:   'Thmanyah Sans', system-ui, -apple-system, sans-serif;

  /* موشرق صواعده أعلى من مربّع الخط نفسه، فالسطر الضيّق يقصّ التشكيل */
  --lh-mark:  1.45;
  --lh-disp:  1.55;

  --t-mark: clamp(2.6rem, 8.5vw, 8rem);
  --t-xl:   clamp(2rem, 5.5vw, 5rem);
  --t-lg:   clamp(1.5rem, 3.4vw, 3rem);
  --t-md:   clamp(1.15rem, 2vw, 1.7rem);
  --t-base: clamp(1rem, 1.1vw, 1.08rem);
  --t-sm:   0.875rem;
  --t-xs:   0.75rem;
  --t-2xs:  0.6875rem;

  /* الفراغ مأخوذ من نسبة الشعار: ~٢٠٪ حوله */
  --pad:   clamp(1.25rem, 6vw, 7rem);
  --gap:   clamp(1rem, 2vw, 2rem);
  --sec:   clamp(6rem, 18vh, 15rem);

  --e:     cubic-bezier(0.16, 1, 0.3, 1);
  --e-io:  cubic-bezier(0.76, 0, 0.24, 1);
}

/* ── 3. إعادة الضبط ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); -webkit-text-size-adjust: 100%; scrollbar-color: rgba(237,239,243,.18) transparent; }

body {
  font-family: var(--f-text);
  font-size: var(--t-base);
  font-weight: 300;
  line-height: 1.85;
  color: var(--fg);
  background: transparent;   /* الرمل خلف كل شيء */
  /* شبكة أمان فقط — مصدر الفيض عولج عند الهالة، لا هنا.
     ولا يوضع القصّ على الجذر: يُعطّل التمرير المركَّب للصفحة كلّها. */
  overflow-x: hidden;
  /* لا font-smoothing ولا optimizeLegibility: كلاهما يُنحّف وصلات العربية */
}
body.menu { overflow: hidden; }

img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--mark); color: var(--void); }
:focus-visible { outline: 1px solid var(--mark); outline-offset: 4px; }

.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* تسمية لاتينية دقيقة — التباعد الحرفي هنا فقط، لا على العربية أبدًا */
.lb {
  font-family: var(--f-sans);
  font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-3); line-height: 1;
}
.lb-ar { font-family: var(--f-sans); font-size: var(--t-xs); font-weight: 400; color: var(--fg-3); }

/* ── 4. الرمل الحيّ ────────────────────────────────────────────────────── */
.sand { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; }
/* طبقة تعتيم فوق الرمل تحت الأقسام النصّية حتى يبقى النص مقروءًا */
.sand-veil {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,13,18,0) 0%, rgba(10,13,18,.55) 45%, rgba(10,13,18,.92) 100%);
  opacity: 0; transition: opacity .8s var(--e);
}
.sand-veil.on { opacity: 1; }

/* حبيبات حيّة فوق الصفحة كلها (assets/js/grain.js).
   فوق كل شيء لأن حبيبة الفيلم تقع على الصورة كاملة لا على جزء منها —
   وتحت المؤشّر وحده. لا تلتقط أحداثًا فلا تعطّل أي نقرة. */
.grain {
  position: fixed; inset: 0; z-index: 90;
  width: 100%; height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
  mix-blend-mode: overlay;
  opacity: .85;
}

/* ── 5. المؤشر ─────────────────────────────────────────────────────────── */
.cursor { position: fixed; top: 0; inset-inline-start: 0; z-index: 100; pointer-events: none; opacity: 0; transition: opacity .3s; mix-blend-mode: difference; }
.cursor.on { opacity: 1; }
.cursor i {
  position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--mark);
  transition: width .45s var(--e), height .45s var(--e), margin .45s var(--e);
}
.cursor.big i { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ── 6. النافبار ───────────────────────────────────────────────────────── */
/* كبسولة عائمة — استلهامًا من شريط «السقّاف»، لا نقلًا له.
   أخذنا: شريط منفصل عن الحواف بعرض محتواه، زجاج مثلّج يضبّب ما تحته،
   وزرّ دعوة مملوء في طرفه. وتركنا: حوافّهم الدائرية ولونهم البرتقالي —
   هويّتهم. عندنا زوايا قائمة، وأبيض بارد، والزرّ يقلب اللونين كما يفعل
   تظليل النصّ في الموقع أصلًا.

   ملاحظة: التوسيط في ‎translate‎ لا في ‎transform‎، لأن ‎transform‎
   محجوز لإخفاء الشريط عند النزول — ولو اجتمعا لألغى أحدهما الآخر. */
.nav {
  position: fixed; top: clamp(.7rem, 1.8vw, 1.25rem); left: 50%; z-index: 60;
  translate: -50% 0;
  width: max-content; max-width: calc(100% - 1.6rem);
  display: flex; align-items: center; gap: clamp(.9rem, 2.6vw, 2.2rem);
  /* أخفض وأخفّ حدًّا وأغمق زجاجًا: كان ‎59px‎ بخلفيةٍ فاتحة تسبح فوق
     الواجهة الداكنة، فيُقرأ لوحًا لا شريطًا. */
  padding: .34rem .34rem .34rem 1.05rem;
  background: rgba(6, 8, 11, .5);
  border: 1px solid rgba(237, 239, 243, .055);
  -webkit-backdrop-filter: blur(26px) saturate(.88);
          backdrop-filter: blur(26px) saturate(.88);
  transition: background-color .5s var(--e), border-color .5s var(--e);
}
.nav.solid { background: rgba(6, 8, 11, .72); border-color: rgba(237, 239, 243, .1); }

/* المؤشّر المنزلق: هو حركة الشريط. ينزلق إلى الرابط الذي تقف عنده
   الصفحة، فيتحرّك مع تمريرك لا مع نقرك — ويسبقه إلى ما تحوم عليه.
   العرض والموضع يقيسهما motion.js لأنهما يتبعان الخطّ والمقاس. */
.nav__ind {
  /* ‎left‎ لا ‎inset-inline-start‎: الثاني منطقيّ فينقلب في ‎RTL‎ إلى اليمين،
     بينما ‎translateX‎ فيزيائيّ أبدًا. فكانت الشعرة تُثبَّت عند يمين كتلة
     الروابط ثمّ تُدفع يمينًا بمقدار ‎offsetLeft‎ — فتخرج من الكتلة وتقف
     تحت الاسم. و‎offsetLeft‎ فيزيائيّ أيضًا، فباتّفاقهما تصحّ في الاتجاهين. */
  position: absolute; left: 0; bottom: -.55rem;
  height: 1px; width: var(--w, 0px);
  transform: translateX(var(--x, 0px));
  background: var(--mark);
  opacity: var(--o, 0);
  transition: transform .55s var(--e), width .55s var(--e), opacity .35s var(--e);
  pointer-events: none;
}

/* التركيز لا يرسم صندوقًا حول الكلمة — يستدعي الشعرة نفسها.
   الإطار المفرّغ العام كان يضيف نوع مربّع ثالثًا داخل الشريط. */
.nav__links a:focus-visible { outline: none; color: var(--fg); }
.nav__cta:focus-visible { outline: 1px solid var(--mark); outline-offset: 3px; }

/* زرّ الدعوة: قلب اللونين — نفس منطق ‎::selection‎ في هذا الموقع */
/* كان أبيض صمّاء فيصرخ فوق شريطٍ داكن — أقوى عنصرٍ في الشاشة لأخفّ
   رسالة. الآن داكنٌ بحدٍّ أبيض، ويمتلئ عند المرور: الوعد لا الإعلان. */
.nav__cta {
  font-family: var(--f-sans); font-size: var(--t-xs); font-weight: 500;
  padding: .48rem 1rem; white-space: nowrap; border-radius: calc(var(--r) * .55);
  background: transparent; color: var(--fg);
  box-shadow: inset 0 0 0 1px rgba(237, 239, 243, .34);
  transition: background-color .35s var(--e), color .35s var(--e), box-shadow .35s var(--e);
}
.nav__cta:hover {
  background: var(--mark); color: var(--void);
  box-shadow: inset 0 0 0 1px var(--mark);
}

/* الشعار في النافبار — يتبع نسبة ٤:١ */
.nav__mark { display: flex; align-items: baseline; gap: .6rem; }
.nav__mark b { font-family: var(--f-mark); font-size: clamp(.95rem, 1.3vw, 1.1rem); font-weight: 800; color: var(--mark); }
.nav__mark img { height: clamp(18px, 2vw, 26px); width: auto; }

/* رابط العودة في صفحة العمل — يبقى ظاهرًا على الجوال، بخلاف .nav__links */
.nav__back { color: var(--fg-2); transition: color .35s; }
.nav__back:hover { color: var(--fg); }

.nav__links { position: relative; display: flex; gap: clamp(1.1rem, 2.6vw, 2.6rem); margin-inline-start: auto; }
@media (prefers-reduced-motion: reduce) { .nav__ind { transition: none; } }
.nav__links a { position: relative; font-family: var(--f-sans); font-size: var(--t-sm); font-weight: 300; color: var(--fg-2); transition: color .35s; }
.nav__links a:hover, .nav__links a.on { color: var(--fg); }

.burger { display: none; width: 26px; height: 13px; position: relative; }
.burger i { position: absolute; inset-inline: 0; height: 1px; background: currentColor; transition: transform .45s var(--e); }
.burger i:first-child { top: 0; }
.burger i:last-child { bottom: 0; }
body.menu .burger i:first-child { transform: translateY(6px) rotate(45deg); }
body.menu .burger i:last-child { transform: translateY(-6px) rotate(-45deg); }

/* القائمة تايم‌لاين: مسارٌ رأسيّ ينزل، وأرقام مقاطع، وكلمات تُكشف مسحًا.
   لا معايناتٍ خلفية عند اللمس — القائمة للجوّال وحده ولا ‎hover‎ فيه،
   واللمسة الوحيدة المتاحة تنتقل بالزائر فلا يرى المعاينة أصلًا. */
.menu-p {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(6,8,11,.96); backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: flex-start;
  /* تبدأ عند ثلث الشاشة لا في منتصفها: أربع كلمات في الوسط تترك خواءً
     فوقها وتحتها، والبداية من الثلث تجعل الكتلة تُقرأ قائمةً لا شعارًا. */
  padding: 35svh var(--pad) var(--pad);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .48s var(--e-io);
  visibility: hidden;
}
body.menu .menu-p { clip-path: inset(0 0 0 0); visibility: visible; }

.menu-p__list { position: relative; padding-inline-start: 1.15rem; }
/* رأس القراءة: ينزل من أعلى إلى أسفل عند الفتح.
   ‎scaleY‎ لا ‎height‎: تحويلٌ خالص يجري على البطاقة بلا إعادة تخطيط. */
.menu-p__head {
  position: absolute; inset-block: -.2rem; inset-inline-start: 0; width: 1px;
  background: linear-gradient(to bottom, var(--fg-4), rgba(237,239,243,.34), var(--fg-4));
  transform: scaleY(0); transform-origin: top;
  transition: transform .52s var(--e-io) .08s;
}
body.menu .menu-p__head { transform: scaleY(1); }

.menu-p a {
  position: relative;
  display: flex; align-items: baseline; gap: .95rem;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.2rem, 9.8vw, 3.8rem); line-height: 1.3;
  padding-block: .2rem;
}

/* الخطّ التفاعليّ: شرطةٌ على المسار تمتدّ نحو الكلمة عند الضغط —
   كأنّ المقطع اختير على التايم‌لاين. ولا ‎hover‎ هنا (لمسٌ لا مؤشّر)،
   فالحالة ‎:active‎ هي لحظة الاختيار الوحيدة المتاحة. */
.menu-p a::before {
  content: ''; position: absolute; top: 50%;
  inset-inline-start: -1.15rem;
  width: .55rem; height: 1px; background: var(--fg-4);
  transition: width .38s var(--e), background-color .38s var(--e);
}
.menu-p a:active::before,
.menu-p a:focus-visible::before { width: 2.1rem; background: var(--mark); }

/* السهم: يشير إلى جهة القراءة (يسارًا)، ويدخل من الخارج عند الضغط.
   حدودٌ فيزيائية وتدويرٌ ثابت — لا تنقلب مع الاتّجاه. */
.menu-p a::after {
  content: ''; position: absolute; inset-inline-end: .1rem; top: 50%;
  width: 10px; height: 10px;
  border-top: 1px solid var(--mark); border-right: 1px solid var(--mark);
  transform: translateY(-50%) rotate(-135deg) translate(-7px, 7px);
  opacity: 0;
  transition: opacity .3s var(--e), transform .42s var(--e);
}
.menu-p a:active::after,
.menu-p a:focus-visible::after {
  opacity: 1; transform: translateY(-50%) rotate(-135deg) translate(0, 0);
}
/* رقم المقطع */
.menu-p a b {
  font-family: var(--f-sans); font-size: var(--t-2xs); font-weight: 500;
  color: var(--fg-3); font-variant-numeric: tabular-nums; letter-spacing: .06em;
  transition: color .35s var(--e);
  flex: none;
}
.menu-p a:hover b, .menu-p a:focus-visible b { color: var(--mark); }
/* الكلمة تطلع من تحت خلف نافذة تقصّها — لا تنزلق ولا تتلاشى.
   النافذة ‎overflow: hidden‎ والكلمة داخلها مزاحةٌ ‎120%‎ لأسفل ثمّ تصعد.
   وحشوٌ سفليّ يسع نقاط الحروف تحت السطر فلا تُقصّ. */
.menu-p .mw { display: inline-block; overflow: hidden; padding-bottom: .2em; }
.menu-p .mw > span {
  display: inline-block;
  transform: translateY(120%);
  transition: transform .56s var(--e-io);
}
body.menu .menu-p .mw > span { transform: none; }
body.menu .menu-p a:nth-child(2) .mw > span { transition-delay: .10s; }
body.menu .menu-p a:nth-child(3) .mw > span { transition-delay: .17s; }
body.menu .menu-p a:nth-child(4) .mw > span { transition-delay: .24s; }
body.menu .menu-p a:nth-child(5) .mw > span { transition-delay: .31s; }
/* الأرقام تسبق الكلمات */
.menu-p a b { opacity: 0; transition: opacity .3s var(--e), color .35s var(--e); }
body.menu .menu-p a b { opacity: 1; }
body.menu .menu-p a:nth-child(2) b { transition-delay: .06s; }
body.menu .menu-p a:nth-child(3) b { transition-delay: .10s; }
body.menu .menu-p a:nth-child(4) b { transition-delay: .14s; }
body.menu .menu-p a:nth-child(5) b { transition-delay: .18s; }
body.menu .menu-p a:nth-child(5) { transition-delay: .40s; }


/* ── 8. حركات الظهور ───────────────────────────────────────────────────── */
.js [data-rise] { opacity: 0; transform: translateY(22px); }
.js [data-rise].in { opacity: 1; transform: none; transition: opacity .9s var(--e), transform 1s var(--e); }

/* الأقواس النهائية (swsh): موشرق يحمل ٢٨ بديلًا ممتدًّا للحرف الأخير —
   ى ب ت ث ف ك ل ن ق ص ض س ش. وهي امتداد أفقي مرسوم بيد الخطّاط،
   فتلتقي مع التطويل في المنطق نفسه بدل أن تزاحمه. مقصورة على أكبر
   طبقة فقط: في النص الصغير تُقرأ زخرفة، وفي العنوان تُقرأ توقيعًا.

   والقاعدة: أداة مدّ واحدة للكلمة الواحدة. ‎.foot__big‎ مستثناة لأن
   كلمتها «تكفي» تحمل تطويلًا متحرّكًا أصلًا — والقوس فوقه مدٌّ على مدّ. */
.lock__t, .lock__txt, .head h2, .stage__t, .case-hero__t { font-feature-settings: 'swsh' 1; }

/* الكلمة تُكشف بامتداد أفقي — لا تصعد من تحت. منطق التطويل نفسه. */
/* الكلمة تصعد من تحت. كانت تنزلق من اليمين مع ‎scaleX‎ — أي أنها تدخل
   ممطوطة ثم تعتدل، وهو التمطيط نفسه الذي أُلغي، فذهب معه.

   ولا قناع ‎overflow‎ تحتها: القناع حيلة لاتينية تصلح حيث الحرف يجلس فوق
   السطر، والعربية تنزل تحته — ج ع ي ن — فيقصّها. الحدّ هنا شفافية لا حافّة. */
.w { display: inline-block; }
.js .w { opacity: 0; transform: translateY(clamp(14px, 1.6vw, 26px)); }
.js .in .w { opacity: 1; transform: none; transition: opacity .8s var(--e), transform 1.05s var(--e); }

/* سحبة الفوكس: الكلمة ثابتة في مكانها، والمتغيّر حدّتها وحدها.
   الحالة الابتدائية هنا فقط لمنع ومضة الوضوح قبل أول إطار — و‎.fw‎
   لا يُنشأ إلا من جافاسكربت، فلا خطر بقاء النصّ مغبّشًا بدونها. */
.fw { display: inline-block; opacity: .14; filter: blur(4px); }
/* كلمة التطويل تحجز عرضها النهائي مقدّمًا، فيبقى فائض قبل أن تمتلئ.
   التوسيط يقسم الفائض نصفين فيُقرأ تباعدًا لا مسافة زائدة. */
.fw[data-tw] { text-align: center; }
@media (prefers-reduced-motion: reduce) { .fw { opacity: 1; filter: none; } }

.mask { position: relative; overflow: hidden; background: var(--bg-3); border-radius: var(--r); }
.mask img, .mask video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s var(--e), filter .9s var(--e); }
.js .mask img, .js .mask video { transform: scale(1.12); }
.js .mask.in img, .js .mask.in video { transform: scale(1); }
.js .mask::after {
  content: ''; position: absolute; inset: 0; z-index: 3; background: var(--bg);
  transform-origin: right; transition: transform 1.2s var(--e-io);
}
/* الكشف يمسح أفقيًا من اليمين لليسار — اتجاه القراءة العربي */
.js .mask.in::after { transform: scaleX(0); transform-origin: left; }

.par { position: absolute; inset: -6% 0; will-change: transform; }
.par img, .par video { width: 100%; height: 100%; object-fit: cover; }

/* ── 9. الواجهة الأولى ─────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--pad) + 3.5rem) var(--pad) var(--pad);
}
/* كتلة النصّ تُحصر في نصف الشاشة القارئ (اليمين في العربية) بدل أن
   تمتدّ فيتكدّس الثقل. والباقي لِلَقطات — لا فراغًا. */
.hero__in { position: relative; z-index: 2; max-width: min(52ch, 54%); }
@media (max-width: 900px) { .hero__in { max-width: none; } }
/* ── أشرطة الواجهة ──────────────────────────────────────────────────────
   استلهامًا من «قصّة»: أشرطة رأسية من الشغل تعمل خلف الاسم. أخذنا المبدأ
   — أرض الواجهة تكون عملك يتحرّك، لا زخرفة — وتركنا لونهم الذهبي وشبكتهم
   الثابتة ‎320px‎. عندنا أعمدة مرنة، وتعتيم بارد من لوحة الموقع.

   ولا تلغي الرمل الحيّ: هي في الواجهة وحدها، والرمل يكمل تحتها وفي بقية
   الصفحة. فيجتمع التوقيع البصري مع الشغل بدل أن يُقصى أحدهما. */
.hero { position: relative; }
/* ‎.rail‎ مستثناة: القاعدة تخصيصها ‎(0,3,0)‎ و‎.rail‎ ‎(0,1,0)‎، فكانت
   تغلبها وتفرض ‎position: relative‎ — فيسقط الشريط في مجرى الصفحة تحت
   كتلة النصّ بدل أن يثبت عند قاع الواجهة. */
.hero > *:not(.frames):not(.hero__scrim):not(.rail) { position: relative; z-index: 2; }

/* اللقطات: ثلاثٌ متداخلة على النصف الطليق من الشاشة (اليسار الفيزيائيّ).
   ‎left‎ و‎width‎ فيزيائيّان لا منطقيّان: هذا تكوينٌ بصريّ ثابت لا يتبع
   اتّجاه القراءة، ولو استُعملت ‎inset-inline‎ لانقلب في العربية. */
.frames {
  position: absolute; top: 0; bottom: 0; left: 0; width: 56%; z-index: 0;
  display: none; pointer-events: none;
  /* ‎f--up‎ تنزف ‎4%‎ خارج الحاوية عمدًا — وحافّة الحاوية هي حافّة الشاشة،
     فالقصّ هنا يعطي النزف المقصود ويمنع اتّساع الصفحة أفقيًّا. */
  overflow: hidden;
}
.frames.on { display: block; }

/* المواضع متفاوتة عمدًا: كبرى في الوسط، وواحدة تدخل من فوقها والأخرى من
   تحتها — وكلٌّ تتجاوز حدود حاويتها قليلًا فتُقرأ لقطاتٍ مبعثرة من
   ‎timeline‎ لا معرضًا مرصوفًا. */
/* الغلاف: الموضع والنسبة والبارالاكس. */
.frame-p { position: absolute; will-change: transform; }
/* اللقطة: الصعود وحده — تحويلٌ لا يشاركه أحد فلا يُمحى. */
.frame {
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--r);
  /* محوران لا محور: بعض اللقطات تصعد وبعضها تدخل من الجانب */
  transform: translate(var(--inx, 0px), var(--iny, 0px));
  will-change: transform;
}
/* الإطار **داخل** اللقطة لا على حافّتها: شعرةٌ منزاحة تُرسم فوق الصورة
   نفسها، كالماتّ في كادر المصوّر. الحدّ الخارجيّ كان يفصل اللقطة عن
   الصفحة؛ وهذا يفصلها عن نفسها — فيصير الكادر جزءًا من الصورة.
   ‎--fi‎ إزاحة الإطار، ونصف قطره يتبعها كي يوازي الزاوية الخارجية. */
.frame { --fin: clamp(7px, .7vw, 12px); }
.frame::after {
  content: ''; position: absolute; inset: var(--fin); z-index: 1;
  border: 1px solid rgba(237, 239, 243, .3);
  border-radius: calc(var(--r) - var(--fin));
  pointer-events: none;
}
.frame > video, .frame > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* كان ‎brightness(.62)‎ تحت حجابَين فيهبط الظهور إلى ‎2%‎ عند القاع.
     الحجاب انتقل إلى النصّ، فالمرشّح وحده يحكم — ‎.55‎ تعطي نحو ‎45%‎
     على الجهة الطليقة. رماديّ لأن الهوية رمادية لا لأنه يخفي. */
  filter: grayscale(1) contrast(1.08) brightness(.55);
}
/* أربع نسبٍ مختلفة عمدًا — ‎4:5‎ و‎1:1‎ و‎16:10‎ و‎9:16‎ — فلا يبدو الأربعُ
   قصاصةً واحدة كُرّرت. والرابعة هي الشاذّة: أضيقها وأطولها، تسدّ الخواء
   أسفل اليسار وتعبر ركن الكبرى، فتُقرأ قصاصةً وُضعت فوق أخرى في مونتاج. */
.f--mid  { left: 16%; top: 22%; width: 52%; aspect-ratio: 4 / 5;   z-index: 2; }
.f--up   { left: -4%; top: 6%;  width: 34%; aspect-ratio: 1 / 1;   z-index: 1; }
.f--dn   { left: 50%; top: 62%; width: 40%; aspect-ratio: 16 / 10; z-index: 3; }
/* الطولية **خلف** الكبرى لا فوقها (‎z:1‎ دون ‎z:2‎): كانت تقف أمامها
   فيبقى ركنٌ خاوٍ بينهما ويُقرأ فجوةً. وبدخولها تحتها يختفي الخواء،
   ويصير التداخل عمقًا لا تجاورًا — قصاصةٌ تحت قصاصة في مونتاج. */
.f--tall { left: -3%; top: 35%; width: 30%; aspect-ratio: 9 / 16;  z-index: 1; }



/* التعتيم: أثقل عند القاع حيث النصّ، وأخفّ عند القمة — فيبقى للحركة
   حضور دون أن تنازع الشعار. */
/* الحجاب القديم كان على الكادر كلّه: خطّيٌّ يُعتم نحو القاع، وشعاعيٌّ
   يُعتم الأطراف ‎70%‎ — والثاني هو الذي كان يقتل اللقطات في الجانبين.

   الآن يتبع النصّ: معتمٌ خلف عمود الكلام (اليمين)، ويتلاشى قبل اللقطات.
   فتُقرأ الصور عند ‎45%‎ ويبقى النصّ فوق ‎4%‎ — الاثنان معًا بلا مقايضة. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to left,
    rgba(6, 8, 11, .93) 0%, rgba(6, 8, 11, .88) 26%,
    rgba(6, 8, 11, .42) 52%, rgba(6, 8, 11, .16) 74%, rgba(6, 8, 11, .16) 100%);
}
@media (max-width: 900px) {
  /* التعتيم انتقل إلى داخل اللقطة نفسها (‎.f--mid .frame::before‎)،
     فحجاب الصفحة لم يعد له عمل — وبقاؤه يعتّم النصّ بلا سبب. */
  .hero__scrim { display: none; }
}

@media (prefers-reduced-motion: reduce) { .frame > video { display: none; } }


/* القفل: شعار عبدالله. صورة إن توفّرت، وإلا نصّ بنفس منطق التطويل. */
.lock { margin-block: clamp(2rem, 7vh, 5rem); }
.lock__img { width: min(72vw, 900px); height: auto; }
/* جملة الواجهة — لا تُقاس بمقياس الاسم: الاسم كلمتان تحتملان أضخم مقاس،
   وهذه سبع كلمات. فمقياسٌ أهدأ وعرضٌ محدود بالمحارف كي تُقرأ سطرين أو
   ثلاثة لا سبعة. */
.lock__t {
  font-family: var(--f-mark);
  /* أصغر ‎18%‎ عن السابق على السطح (‎67‎ ← ‎55‎): الجملة تُقرأ أسرع وتترك
     للقطات مكانًا. والحدّ الأدنى كما هو — على الجوّال ‎29.6px‎ أصلًا،
     وتصغيره يجعله دون عنوان القسم. */
  font-size: clamp(1.85rem, 4.4vw, 3.45rem);
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: normal;
}
/* التراتب باللون لا بالمقاس: مقاسان متقاربان يصنعان عنوانَين، أمّا لونان
   فيصنعان تمهيدًا وضربة. */
.lock__l { display: block; color: var(--fg-2); }
.lock__l.is-hit { color: var(--mark); }
.lock__txt {
  font-family: var(--f-mark);
  font-size: var(--t-mark);
  font-weight: 800;
  line-height: var(--lh-mark);
  color: var(--mark);
  letter-spacing: normal;
}
.lock__sub {
  font-family: var(--f-sans); font-size: clamp(.6rem, 1vw, .78rem);
  font-weight: 500; letter-spacing: .48em; text-transform: uppercase;
  color: var(--fg-2); margin-top: .7rem;
  /* الحروف لاتينية فتُقرأ LTR، لكن الكتلة تبقى على يمين الصفحة
     تحت القفل تمامًا — بلا هذا تقفز إلى الطرف المقابل */
  direction: ltr; unicode-bidi: isolate; text-align: right;
}

/* «الإبداع .. ببساطة» وسمٌ فوق العنوان لا عنوانٌ ثانٍ تحته: كان ‎48px‎
   مقابل ‎67‎ — فرقٌ ‎29%‎ لا يصنع تراتبًا بل منافسة. */
.hero__eyebrow {
  font-family: var(--f-sans); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .04em; color: var(--fg-2);
  margin-bottom: clamp(.9rem, 1.8vw, 1.4rem);
}
.hero__eyebrow .beat { color: var(--fg-4); letter-spacing: .16em; padding-inline: .3em; }

.hero__line {
  font-family: var(--f-display);
  font-size: var(--t-lg); font-weight: 400; line-height: var(--lh-disp);
  max-width: 22ch;
}
.hero__line .dim { color: var(--fg-2); }

/* التراتب داخل الجملة الواحدة: الكلمة المفتاح أكبر وأبيض خالص، والأخرى
   أصغر ورماديّة. الحجم يفرّق لا الوزن — لأن الوزن ٨٠٠ محجوز للقفل فوق
   السطر مباشرة، ولو تكرّر لتضاعفت الكتلة وضاع القفل.
   و«ببساطة» أصغر ما في السطر: الكلمة تُكتب كما تقول. */
.hero__line .key  { font-size: 1.26em; color: var(--mark); }
.hero__line .soft { font-size: .64em;  color: var(--fg-2); }

/* السطر أبطأ من بقية الصفحة: «الإبداع» ما زالت تستقرّ حين تنزل النقطتان،
   فلا تقع الوقفة على سكون ميّت. */
.js .hero__line.in .w { transition-duration: 1s, 1.3s; }
/* النقطتان علامة وقفة لا كلمة: تخفت ويتّسع ما حولها ليصير الصمت مرئيًا.
   التباعد الحرفي مسموح هنا لأنها نقاط لا حروف عربية تتّصل. */
.hero__line .beat { color: var(--fg-3); letter-spacing: .16em; padding-inline: .3em; }

.hero__foot {
  margin-top: auto; padding-top: clamp(2rem, 6vh, 4rem);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--gap);
  border-top: 1px solid var(--line);
}
.hero__note {
  max-width: 40ch; color: var(--fg-2); line-height: 1.85;
  margin-top: clamp(1.1rem, 2.2vw, 1.8rem);
  font-size: var(--t-sm);
}

/* الدعوة: كانت الواجهة تنتهي بلا حركةٍ تالية */
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); margin-top: clamp(1.6rem, 3.2vw, 2.6rem); }
.go {
  font-family: var(--f-sans); font-size: var(--t-sm); font-weight: 500;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .72rem 1.35rem; border-radius: 999px;
  color: var(--mark); border: 1px solid rgba(237, 239, 243, .26);
  transition: background-color .4s var(--e), border-color .4s var(--e), color .4s var(--e);
}
/* السهم يميل قليلًا عند المرور — إشارة خروجٍ لا زخرفة */
.go i { width: 8px; height: 8px; border-top: 1px solid currentColor; border-inline-start: 1px solid currentColor; transform: rotate(-45deg); transition: transform .4s var(--e); }
.go:hover { background: var(--mark); color: var(--void); border-color: var(--mark); }
.go:hover i { transform: rotate(-45deg) translate(2px, -2px); }
/* الثاني أخفّ: رابطٌ لا زرّ */
.go--alt { border-color: transparent; padding-inline: .2rem; color: var(--fg-2); }
.go--alt:hover { background: none; color: var(--mark); border-color: transparent; }


/* شريط الزمن — يملأ الشريط الخاوي أسفل الواجهة (‎107px‎) بمعنًى لا بزخرفة.

   الفكرة: حافّة الواجهة السفلى تُقرأ **مسطرة مونتاج**. مسارٌ رفيع، وعليه
   علامات إطارات، ورأس قراءة يمشي من اليمين إلى اليسار — كالذي تراه تحت
   أي تايم‌لاين. فالفراغ يمتلئ بشيء من صنعتك لا بخطٍّ يلمع.

   وبلا ‎filter‎ إطلاقًا: النعومة من التدرّج نفسه، والحركة ‎transform‎ خالصة
   — تجري على البطاقة بلا إعادة رسم. (شعاع الحواف علّمنا الفرق.) */
.rail {
  position: absolute; z-index: 2; pointer-events: none;
  /* على حافّة الواجهة السفلى تمامًا وبعرضها كلّه: هو الفاصل بين الواجهة
     والأعمال، لا عنصرٌ يسبح داخلها. والتدرّج يذيب طرفيه فلا يحتاج حشوًا. */
  inset-inline: 0; bottom: 0;
  height: 9px; overflow: hidden;
}
/* المسار: شعرة تذوب عند الطرفين */
.rail::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right,
    transparent, var(--line) 7%, var(--line) 93%, transparent);
}
/* علامات الإطارات: شرطة كل ‎46px‎ — والقناع يذيبها عند الطرفين */
.rail i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: repeating-linear-gradient(to right,
    rgba(237, 239, 243, .17) 0 1px, transparent 1px 46px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
/* رأس القراءة: نواةٌ ساطعة ‎1px‎ وفوقها بلومٌ مرسوم — لا مطموس */
.rail b {
  position: absolute; left: 0; bottom: 0; width: 20%; height: 100%;
  background:
    linear-gradient(to right, transparent, rgba(237, 239, 243, .92) 50%, transparent)
      bottom / 100% 1px no-repeat,
    radial-gradient(58% 130% at 50% 100%, rgba(237, 239, 243, .2), transparent 72%);
  /* ‎10.8s‎ لا ‎9s‎: المسافة زادت السدس (‎500% → 600%‎) فزادت المدّة مثلها،
     وإلا أسرع الرأس وتغيّر إيقاعه بلا سبب. */
  animation: rail 10.8s linear infinite;
  will-change: transform;
}
/* من وراء حافّة اليمين إلى ما وراء حافّة اليسار.
   ‎translateX‎ فيزيائيّ لا ينقلب، والنسبة من عرض الرأس نفسه.

   كانت ‎400%‎ — أي ‎(100 − 20) ÷ 20‎ — فتضع الرأس **عند** الحافّة اليمنى
   لا وراءها: يشغل ‎[80%, 100%]‎ وهو داخل الإطار كلّه. فينتهي الشوط عند
   ‎-100%‎ خارجًا تمامًا ثم يتجسّد في المطلع بنواته الساطعة على ‎90%‎ —
   وهو القطع الذي يُرى.

   ‎500%‎ تضع حافّته اليسرى عند ‎100%‎: وراء الحدّ كلّه، فيدخل انزلاقًا
   كما يخرج. */
@keyframes rail { from { transform: translateX(500%); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .rail b { animation: none; opacity: 0; } }

/* ── 10. الأقسام ───────────────────────────────────────────────────────── */
.sec { position: relative; padding: var(--sec) var(--pad); }

.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--gap); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.head > :first-child { flex: 1 1 min(100%, 30rem); min-width: 0; }
.head h2 { font-family: var(--f-mark); font-size: var(--t-xl); font-weight: 800; line-height: var(--lh-mark); margin-top: .7rem; }

/* كان العنوان يُكشف بمسحة قصّ من اليمين مع خطّ ضوء على حافّتها. حركة
   جميلة، لكنها كانت الوحيدة من نوعها في الصفحة: الواجهة تصعد، والفقرات
   تصعد، والعنوان يُقصّ. فصار يصعد كلمة كلمة مثلها — إيقاع واحد للصفحة.

   والحاوية المشقوقة لا تتحرّك أبدًا: ‎data-rise‎ عليها لتدخل الطابور فقط،
   والحركة في كلماتها. بلا هذا يصعد الاثنان فتتضاعف المسافة. */
.js [data-split] { opacity: 1; transform: none; }

/* بلا تفريق بين الكلمة الأولى وما بعدها: كان الاسم بوزن ‎800‎ ووصفه
   بـ‎400‎ أخفت — أُلغي، والعنوان يُقرأ بوزن واحد. */
.head p { color: var(--fg-2); font-size: var(--t-sm); max-width: 34ch; line-height: 1.9; }

/* جدار الأعمال: مستوى ثلاثي الأبعاد خلف القسم. ‎--z‎ و‎--rx‎ و‎--ry‎
   و‎--wo‎ يقودها motion.js من موضع التمرير — فأنت من يدخل الجدار.
   بلا حوافّ دائرية ولا ظلال: مربّعات مسطّحة رمادية، خلفية لا بطاقات. */
.sec--work { position: relative; }
.sec--work > *:not(.wall) { position: relative; z-index: 1; }

/* ── مسرح الأعمال ────────────────────────────────────────────────────────
   من إسكلة: الكلام في **قلب** الحقل لا فوقه. صورهم متناثرة حول نصّ في
   المنتصف، ومركزهم فارغ نظيف فتُقرأ الكتلة جزيرةً وسط الشغل.

   أخذنا التركيب وتركنا التنفيذ. صورهم ساكنة على أرض كريمية وتتحرّك
   كتلةً واحدة؛ وحقلنا جدارٌ يسير وتغوص فيه بالتمرير. وبدل الفراغ الأبيض
   في مركزهم: ضباب. العتمة تكثف تحت الكلمة وتخفّ عند الأطراف — حيلة مدير
   التصوير لا المصمّم، وأليق بصاحب هذا الموقع.

   والمسرح يمتدّ عرض الشاشة كاملًا رغم حشو القسم، وإلا ضاق الحقل. */
.stage {
  position: relative;
  /* لا ارتفاع مفروض: كان ‎88svh‎ ثم ‎62‎، وفي الحالتين يبقى خواء تحت الكلام
     لأن الجدار خلفه لا يملؤه — شفافيته تبلغ ذروتها في منتصف مسار التمرير
     لا في طول المسرح. فالارتفاع الآن من المحتوى وحده، والجدار يتبعه. */
  min-height: 0;
  /* بلا حشو علويّ: القسم يحشو ‎--sec‎ (‎144px‎) فوق المسرح أصلًا، وإضافة
     ‎102px‎ أخرى هنا كانت تجمع ‎246px‎ بين قاع الواجهة وأول كلمة — ثلث
     الشاشة خواءً. الفصل من القسم، والمسرح يحشو أسفله فقط. */
  padding-block: 0 clamp(2.5rem, 5vw, 4.5rem);
  display: grid; place-items: center;
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  margin-bottom: 0;
}

/* الضباب: بين الجدار والكلام — ‎z‎ الجدار ‎0‎ وهذا ‎1‎ والنصّ ‎2‎

   كان بقعةً سوداء واحدة ‎48%‎ عرضًا و‎.93‎ سوادًا: أوسعَ من الكلام،
   فيطفو العنوان على قرصٍ أسود بدل أن يجلس في الحقل. صار طبقتين لكلٍّ
   وظيفة — حاجبٌ ضيّقٌ للوضوح، وتوهّجٌ واسعٌ للحقل. والترتيب مقصود:
   التوهّج **أوّلًا** في القائمة أي فوق الحاجب، فيلمس حافّة العتمة
   لا مركزها.

   ‎--fog‎ يكتبه ‎wallRun()‎ مع ‎--wo‎ على التِكّة نفسها: يبدأ ‎.88‎ وأنت
   مقبل — العنوان حادٌّ على سوادٍ شبه تامّ — ثم يرقّ إلى ‎.55‎ حين يستقرّ
   القسم، فتنفرج الغيوم وتظهر اللقطات، ثم تتسلّم الشبكة. */
.stage::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 46%,
    rgba(190, 205, 235, .05) 0%, rgba(190, 205, 235, 0) 70%);
}

/* حاجب الوضوح مربوطٌ بالكلام لا بالمسرح. جرّبته نسبةً من المسرح
   (‎34%×30%‎) فانضبط على السطح واختلّ على الجوّال: هناك يشغل الكلام
   ‎49%‎ من العرض و‎77%‎ من الارتفاع — فيغطّيه الحاجب عرضًا ويقصر عنه
   طولًا. والنسبة لا تُصلَح بالتنقيح لأن الكلام يلتفّ فيطول والمسرح
   يتبعه، فتتغيّر النسبة مع كل عرضٍ للشاشة.

   الحلّ أن يقيس نفسه: صندوقٌ حول الكلام بحاشية، والشعاعيّ فيه يملؤه
   بحكم كونه ‎farthest-corner‎. لا رقمَ يُضبط، ولا انكسارَ عند مقاس.

   و‎z-index: -1‎ يبقى داخل ‎.stage__in‎ — فهي تصنع سياق تكديس بموضعها
   ورقمها ‎2‎ — فينزل خلف الحروف ولا ينزل خلف الجدار. */
.stage__in::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  /* كان قطعًا ناقصًا واحدًا بحاشية ‎2.9rem‎. وما دام الجدار خافتًا كان
     يمرّ؛ فلمّا امتلأ وأضاء بانت حافّة الشكل، فصار يُقرأ **بقعةً** ملصوقة
     فوق الكولاج لا عتمةً في الصورة.

     العلاج طبقتان لكلٍّ دورٌ لا تُحسنه الأخرى:

     ① شريطٌ أفقيّ يعبر العرض كلّه — تدرّجٌ خطّيّ رأسيّ، فليس له حافّة
       جانبية أصلًا. يعتّم شريحةً بارتفاع الكلام من الطرف إلى الطرف،
       كما يفعل مرشّح متدرّج على العدسة. لا شكلَ يُرى لأنه لا يَنتهي.

     ② عدسةٌ تركّز العتمة على الكلام نفسه — واسعةٌ (‎30vw‎ لا ‎2.9rem‎)
       فتخرج حافّتها من الكادر أو تكاد، وتتلاشى إلى صفر عند حدّها.

     مجموعهما فوق الحروف كمجموع الطبقة الواحدة قبله، والفرق أن العين
     لا تجد حدًّا تمسك به. */
  /* الصندوق ‎-50vw‎ لكل جهة: أوسع من الشاشة دائمًا مهما كان عرضها. وذلك
     شرطٌ للشريط — لو انتهى الصندوق داخل الكادر لانتهى معه الشريط بحافّة
     رأسيّة تُرى (قِستها: ‎1291‎ في شاشة ‎1440‎). والآن لا حافّة له.

     ومقاس العدسة صريحٌ بالنسبة (‎37%‎) لا متروكٌ للصندوق: لو تبعته لاتّسعت
     باتّساعه فعتّمت العرض كلّه بدل أن تركّز. و‎37%‎ من الصندوق تساوي نصف
     عرض الشاشة تقريبًا عند كل مقاس — فتنطفئ العدسة عند الطرفين تمامًا،
     ويبقى الشريط وحده هناك: تدرّجٌ خفيف بلا شكل. */
  inset: -3.4rem -50vw;
  background:
    radial-gradient(37% 128% at 50% 50%,
      rgba(6, 8, 11, calc(var(--fog, .88) * .70)) 0%,
      rgba(6, 8, 11, calc(var(--fog, .88) * .55)) 58%,
      rgba(6, 8, 11, 0) 100%),
    /* الهضبة ‎20→80‎ لا ‎34→66‎: الكلام يشغل ‎19%→81%‎ من الصندوق (الحاشية
       ‎3.4rem‎ فوقه ومثلها تحته)، فهضبةٌ أضيق منه تترك السطر السفليّ في
       المنحدر — قِسته فوجدته ‎0.25‎ بينما العنوان ‎0.49‎. */
    linear-gradient(to bottom,
      rgba(6, 8, 11, 0) 0%,
      rgba(6, 8, 11, calc(var(--fog, .88) * .34)) 20%,
      rgba(6, 8, 11, calc(var(--fog, .88) * .34)) 80%,
      rgba(6, 8, 11, 0) 100%);
}

.stage__in { position: relative; z-index: 2; text-align: center; max-width: 46ch; }
.stage__t {
  font-family: var(--f-mark); font-size: var(--t-xl);
  font-weight: 800; line-height: var(--lh-mark); margin-top: .8rem;
}
.stage__x {
  color: var(--fg-2); font-size: var(--t-sm); line-height: 1.9;
  margin: 1.3rem auto 0; max-width: 40ch;
}

/* كانت هذه القاعدة مبنيّة على أن الجدار يختفي دون ‎900px‎ — ولم يعد يختفي.
   فأعادت الحشو العلويّ ‎60px‎ فوق حشو القسم ‎80px‎: مئةٌ وثلاثة وخمسون
   بكسلًا بين قاع الواجهة وأول كلمة. والفصل من القسم وحده كما على السطح.
   وضبابُ المسرح يعود أيضًا، فالجدار خلفه صار ظاهرًا ويحتاج ما يفصل
   الكلام عنه. */
@media (max-width: 900px) {
  .stage { min-height: auto; padding-block: 0 clamp(2rem, 8vw, 3.4rem); margin-bottom: 0; }
}

/* الجدار ينزّ ‎6%‎ خارج المسرح عمدًا ليذوب القناع قبل الحافّة — والقسم يقصّه،
   وإلا صار للصفحة كلها تمرير أفقي بمقدار النزّ.
   ‎overflow-x: clip‎ لا ‎hidden‎: الأخير يصنع حاوية تمرير فيموت ‎sticky‎ داخلها. */
/* ‎--sec‎ (‎162px‎ على ‎1440‎) مقياسٌ لأقسامٍ عناوينها على سوادٍ خالص، فتحتاج
   ما يفصلها عمّا قبلها. وهذا القسم غير ذلك: خلف عنوانه **حقل** يبدأ حيث
   يبدأ القسم، فالحشو لا يفصل شيئًا — يترك شريطًا أسود بين خطّ الزمن وأوّل
   بلاطة، ويهبط بالكلام إلى ثلث الشاشة.

   ‎--wtop‎ ثلثه تقريبًا: يكفي نَفَسًا ولا يصنع خواءً. والجدار يتبعه بالمتغيّر
   نفسه فلا ينفصلان مهما تغيّر أحدهما. */
.sec--work {
  overflow-x: clip;
  --wtop: clamp(3rem, 6vw, 5.5rem);
  padding-block-start: var(--wtop);
}

.wall {
  /* القمّة تُقاس من قمّة **القسم** لا كنسبةٍ من المسرح: النسبة تتغيّر مع
     ارتفاع الكلام، والمطلوب أن يبدأ الحقل تحت خطّ الزمن بعشرة بكسلات
     مهما طال العنوان أو قصر. وعشرةٌ لا صفر: الجدار يُرسم بعد الواجهة،
     فلو تجاوزها لطمس الخطّ. */
  position: absolute; inset: calc(10px - var(--wtop, var(--sec))) -6% -46%; z-index: 0;
  pointer-events: none; overflow: hidden;
  perspective: 1100px; perspective-origin: 50% 44%;
  opacity: var(--wo, 0);
  /* قناعان يتقاطعان: شعاعيّ يذيب الأركان، وخطّيّ رأسيّ يذيب القمّة والقاع
     **بنسبة الصندوق لا بمقاسه**. كان الشعاعيّ وحده، وهو يعتمد على أن يكون
     الصندوق عاليًا — فلمّا قصر المسرح قصر معه، وانتهت البلاطات عند حدٍّ
     قاطع بدل أن تذوب. النسبة تحمي من هذا مهما تغيّر الارتفاع. */
  /* الشعاعيّ كان ‎92%‎ نصفَ قطر وينطفئ من ‎22%‎، وحافّة الشاشة تقع عند
     ‎48.5%‎ منه — فالعتمة الكاملة لا تبلغ إلا الخُمسين الأوسطين (‎394‎ إلى
     ‎1046‎ على شاشة ‎1440‎)، وما بعدهما يخفت حتى ‎54%‎ عند الطرف. فيُقرأ
     الكولاج موضوعًا في حاوية ضيّقة لا خلفيةً ممتدّة.

     ‎125%‎ ينقل الحافّة إلى ‎35.7%‎، وهي داخل منطقة العتمة الكاملة (‎60%‎)
     — فتبلغ الصور طرفَي الشاشة بكامل قوّتها، ويقع التلاشي كلّه خارج
     الكادر. والنسبة ثابتة مع أي عرض لأن حشو الجدار نسبيّ (‎-6%‎).

     وإذابة الحوافّ لم تُفقَد: الخطّيّ الرأسيّ ما زال يذيب القمّة والقاع،
     وهو الذي يفصل الجدار عن خطّ الزمن وعن الشبكة تحته. */
  --mask:
    radial-gradient(125% 85% at 50% 50%, #000 60%, transparent 100%),
    /* ‎14%‎ لا ‎26%‎: المنحدر العلويّ كان ‎124px‎ تُفتح فيها الصور تدريجيًّا،
       فيُقرأ فراغًا لا تمهيدًا. والقاع يبقى ‎74%‎ ليذوب في الشبكة تحته. */
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 74%, transparent 100%);
  -webkit-mask-image: var(--mask);
          mask-image: var(--mask);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.wall__plane {
  /* ‎left‎ فيزيائيّ لا ‎inset-inline-start‎: الأخير في ‎rtl‎ يعني **يمين**،
     فيوضع المستوى بحافّته اليمنى عند المنتصف ثم يزيحه ‎translate‎ يسارًا —
     فينحسر في نصف الصفحة الأيسر. والتحويلات فيزيائية دائمًا. */
  position: absolute; top: 50%; left: 50%;
  display: flex; gap: 1.6vw;
  transform-style: preserve-3d;
  /* ‎-59.3%‎ لا ‎-50%‎: الدوران ‎rotateY(-8deg)‎ يُقصي الطرف الأيسر ويُقرّب
     الأيمن، فتخرج الكتلة المُسقَطة مزاحةً يمينًا — قِستها فوجدت مركزها
     عند ‎889‎ على شاشة ‎1440‎ (والمركز ‎720‎)، وعند ‎516‎ على ‎820‎ (والمركز
     ‎410‎). الانحراف ‎9.0%‎ و‎9.5%‎ من عرض المستوى: نسبةٌ ثابتة لأن الزاوية
     ثابتة. فنردّه بمقدارها فيتساوى الهامشان ولا يبقى طرفٌ على شفا فراغ.

     ‎translateX‎ فيزيائيّ لا ينقلب في ‎rtl‎ — كما ‎left‎ أعلاه. */
  transform: translate(-59.3%, -50%)
             rotateX(9deg) rotateY(-8deg)
             translateZ(-380px) scale(1.35);
  will-change: transform;
}

.wall__col {
  display: flex; flex-direction: column; gap: 1.6vw;
  /* تسعة أعمدة × ‎13vw‎ = ‎117vw‎، ومع ‎scale(1.25)‎ تتجاوز ‎145vw‎ — فيبلغ
     الجدار طرفَي الصفحة معًا. كان خمسة أعمدة (‎75vw‎) فينحسر في جهة واحدة. */
  /* ‎clamp‎ لا ‎13vw‎ عارية: النسبة بلا سقف، فعلى شاشة ‎1920‎ تعطي بلاطة
     ‎250×156‎ تُزاحم الشبكة. والحدّان لا يمسّان المقاسات الشائعة —
     ‎1440‎ تبقى ‎187‎ كما كانت. */
  width: clamp(135px, 13vw, 205px); flex: none;
  animation: wall-drift var(--d, 40s) linear infinite;
}
.wall__col--rev { animation-direction: reverse; }
@keyframes wall-drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* ظلّ عمق: القاعدة التي منعناها، مرفوعة هنا لأنها تخدم — بلا ظلّ
   يُقرأ المستوى صورةً مائلة لا مسافة. وبقيت الزوايا قائمة: التدوير
   لا يضيف عمقًا ويكسر اتساق الموقع كلّه. */
.wall__col i {
  display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--r) * .6);
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .85);
}
/* ‎grayscale(1)‎ كان يقتل الشيء الوحيد الذي يعطي القسم طقسًا: لون
   اللقطة نفسها. اضرب ‎.46‎ في ذروة الجدار ‎.62‎ وفي ما ينفذ من الضباب
   ‎.07‎ تجد ‎٢٪‎ من ضوء الأصل — أعمالك مطفأةٌ رياضيًّا خلف العنوان.
   ‎.72‎ تُبقي ‎٢٨٪‎ من اللون: كهرمانُ الحج وزُرقة الملاعب تعبُر ولا
   تصير الخلفية صورةً ملوّنة تزاحم الكلام. والكلفة صفر — نفس الخاصيّة
   الساكنة، لا فلترٌ جديد ولا متحرّك. */
.wall__col img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.72) brightness(.5) contrast(1.06);
}

/* كان مخفيًّا على الجوّال حفاظًا على الأداء. يظهر الآن بأعمدة أقلّ وميلٍ
   أخفّ: تسعة أعمدة على شاشة ‎430px‎ تعطي بلاطاتٍ لا تُقرأ، والمنظور العميق
   على جهازٍ أضعف كلفةٌ بلا مقابل. */
@media (max-width: 900px) {
  /* العنوان يرتفع: حشو القسم كان ‎--sec‎ (‎80px‎) وهو مقياس السطح. على
     الجوّال ثلثه يكفي، والجدار يتبعه فلا ينفصلان. */
  #work { --wtop: clamp(1.5rem, 5.6vw, 2.4rem); padding-block-start: var(--wtop); }
  /* يرتفع أكثر ويبدأ ظهوره أبكر: كان قناعه الخطّيّ يفرغ أعلى ‎26%‎ منه،
     وقمّته تبدأ ‎-30%‎ فقط — فيبقى شريطٌ خاوٍ تحت خطّ الزمن قبل أن تظهر
     أوّل بلاطة. الرفع إلى ‎-52%‎ والتلاشي إلى ‎12%‎ يسدّانه. */
  .wall {
    /* السحب بمقدار حشو القسم نفسه لا بنسبةٍ من المسرح: النسبة تُحسب من
       ارتفاع المسرح (‎227px‎) فتعطي ‎73px‎ لا تكفي، والحشو ‎--sec‎ هو ما
       يفصل الجدار عن خطّ الزمن فعلًا. */
    /* السحب يتبع حشو القسم الفعليّ (‎--wtop‎) لا ‎--sec‎: القسم صار أقلّ
       حشوًا على الجوّال ليرتفع العنوان، ولو بقي السحب على ‎--sec‎ لتجاوز
       الجدارُ خطَّ الزمن وطمسه — وقسمُه يُرسم بعد الواجهة. */
    inset: calc(-1 * var(--wtop, var(--sec)) - 1rem) -14% -24%;
    perspective: 720px;
    /* بلا تلاشٍ علويّ: كان يفرغ أعلى ‎26%‎ من الجدار فيظهر شريطٌ خاوٍ
       تحت الخطّ قبل أوّل بلاطة. والقاع وحده يذوب. */
    --mask:
      radial-gradient(98% 92% at 50% 46%, #000 46%, transparent 92%),
      linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  }
  .wall__col i { box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .85); }
}

/* ── مقاس البلاطة: ثابتٌ بالبكسل لا بنسبة الشاشة ────────────────────────
   كانت قاعدةً واحدة تحت ‎900px‎: أربعة أعمدة بعرض ‎38vw‎. ضُبطت على هاتف
   عرضه ‎430‎ فأعطت بلاطة ‎163×102‎ — صحيحة. ولم تُراجَع عند حدّها الأعلى:
   على آيباد ‎820‎ تعطي ‎312×180‎، أي بلاطةٌ **أوسع من كتلة الكلام كلّها**
   (‎243×126‎). فيصير الجدار هو المشهد والعنوان ضيفًا عليه.

   والخطأ في وحدة القياس نفسها: ‎vw‎ تكبر بلا سقف، وعدد الأعمدة ثابت —
   فكلّما اتّسعت الشاشة تضخّمت البلاطة بدل أن يزيد عددها. والصواب عكسه:
   البلاطة تبقى في حدود ‎160–190px‎، والشاشة الأوسع تأخذ أعمدةً أكثر. */

/* الهواتف: أربعة أعمدة */
@media (max-width: 600px) {
  .wall__col:nth-child(n+5) { display: none; }
  .wall__plane { gap: 3.4vw; }
  .wall__col { width: clamp(130px, 38vw, 195px); gap: 3.4vw; }
}

/* اللوحيّات: ستّة أعمدة، والبلاطة بمقاس الهاتف نفسه لا ضعفه */
@media (min-width: 601px) and (max-width: 900px) {
  .wall__col:nth-child(n+7) { display: none; }
  .wall__plane { gap: 1.9vw; }
  .wall__col { width: clamp(150px, 21vw, 195px); gap: 1.9vw; }
}
@media (prefers-reduced-motion: reduce) { .wall__col { animation: none; } }

/* ── 11. الأعمال ───────────────────────────────────────────────────────── */
/* شبكة متساوية: عمودان وبطاقات متطابقة المقاس. كانت «بنتو» — اثنا عشر
   عمودًا وستّة مقاسات تتناوب — فقُرئت نثارًا لا تأليفًا، لأن ارتفاعات
   الشريط الواحد لا تتّفق. التنوّع انتقل إلى ما تحمله البطاقة.

   والإطار ‎16/9‎ لا مربّعًا كما عند «محيط»: أغلفتك إطاراتُ فيديو، ونسبة
   شغلك هي نسبتها. أخذنا التساوي وتركنا نسبتهم. */
.works {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.6rem, 3.4vw, 3.4rem) clamp(1rem, 2.2vw, 2.2rem);
}

.wk { position: relative; display: block; }
.wk__m { position: relative; overflow: hidden; background: var(--bg-3); border-radius: var(--r); --fin: clamp(7px, .7vw, 12px); }
/* الإطار الداخليّ نفسه الذي في لقطات الواجهة — شعرةٌ منزاحة فوق الصورة.
   ‎::before‎ لا ‎::after‎: الأخير محجوز لستارة الكشف في ‎.mask‎، و‎.js .mask::after‎
   أقوى تخصيصًا فيبتلع أي شيء نضعه فيه.
   ‎z‎ فوق الوسائط ودون العلامة واللافتة. */
.wk__m::before {
  content: ''; position: absolute; inset: var(--fin); z-index: 3;
  border: 1px solid rgba(237, 239, 243, .3);
  border-radius: calc(var(--r) - var(--fin));
  pointer-events: none;
}
/* البطاقة تعرض مقطعًا صامتًا لا صورة. ‎.mv‎ يشمل الاثنين حتى يبقى
   العمل الذي مصدره صورة ساكنة عاملًا بلا استثناء في القواعد. */
/* التعتيم بالشفافية لا بـ‎brightness()‎: المقطع يعمل، والمرشِّح على فيديو
   متحرّك تمريرة نقطرة في كل إطار ‎×٦‎ بطاقات. والشفافية تركيبٌ خالص فوق
   أرضية ‎--bg-3‎ الداكنة، والنتيجة البصرية هي هي. */
.wk__m img, .wk__m .mv { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .84; transition: transform 1.3s var(--e), opacity .7s; }
.wk:hover .wk__m img, .wk:hover .wk__m .mv { transform: scale(1.035); opacity: 1; }

.wk__m { aspect-ratio: 16 / 9; }
.wk__b { padding-top: clamp(.9rem, 1.6vw, 1.4rem); }

/* شعار الجهة على الغلاف — من «محيط». يعرّف صاحب العمل قبل أن تُقرأ كلمة،
   ويأتي مجّانًا: مُحمِّل الشعارات وسلسلة لواحقه موجودان للشريط أصلًا. */
.wk__mark.cl__i {
  position: absolute; z-index: 4;
  /* كان ‎1rem‎ من حافّة البطاقة، وشعرة الإطار الداخليّ عند ‎--fin‎ (‎11px‎)
     — فيقع حدّ اللوح على بُعد ‎5px‎ منها: مستطيلان مستديران متوازيان
     يتضاربان. الإزاحة تُحسب من الشعرة لا من الحافّة، فيبقى بينهما فسحة. */
  inset-block-end: calc(var(--fin, 11px) + .85rem);
  inset-inline-start: calc(var(--fin, 11px) + .85rem);
  width: clamp(140px, 14vw, 190px); height: auto;
  padding: clamp(9px, 1vw, 13px);
}
.wk:hover .wk__mark { background: rgba(237, 239, 243, .10); border-color: rgba(237, 239, 243, .18); }

/* السطر: ما الذي حدث في هذا العمل. كان مكتوبًا في data.js ولا يُقرأ. */
.wk__x {
  margin-top: .5rem; max-width: 44ch;
  font-size: var(--t-sm); line-height: 1.85; color: var(--fg-2);
}
.wk__t { font-family: var(--f-display); font-size: var(--t-md); font-weight: 400; line-height: var(--lh-disp); }
/* كان هذا كلّه تحت ‎.wk:hover‎ — فبلا مؤشّرٍ فوق البطاقة لا ‎flex‎ ولا
   ‎gap‎: تتلاصق الخانات فيُقرأ «أفلام2024» كلمةً واحدة. ولا يخفي الهوفر
   شيئًا هنا أصلًا (لا ‎display: none‎)، فالشرط كان سهوًا لا تصميمًا. */
.wk__meta { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-family: var(--f-sans); font-size: var(--t-xs); color: var(--fg-3); }
.wk__meta span { display: inline-flex; align-items: center; gap: .6rem; }
/* النقطة عنصرٌ مرن داخل الخانة، فترتيبها يتبع اتّجاه الخانة نفسها.
   ولذلك لا تحمل خانةُ السنة ‎.ltr‎: العزل على الأرقام وحدها في الداخل. */
.wk__meta span + span::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; flex: none; }


/* الضوء: بقعة تتبع المؤشر داخل كل كتلة، وشدّتها ‎--near‎ تتلاشى بالبُعد.
   ⚠︎ في عنصر مستقلّ لا في ‎::after‎ — ذاك محجوز لستارة الكشف في ‎.mask‎،
   و‎.js .mask::after‎ أقوى تخصيصًا فيبتلع أي خلفية نضعها هنا.
   screen يرفع الصورة موضعيًا بدل أن يضع طبقة بيضاء فوقها. */
/* ومضة عند كشف الكتلة: إطاران من الضوء كأن اللقطة دخلت للتوّ */
@keyframes wk-splice { 0% { opacity: 0 } 18% { opacity: .85 } 100% { opacity: 0 } }
.js .wk.in .wk__lit { animation: wk-splice .5s var(--e) both; }

.wk__lit {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(420px circle at var(--cx, 50%) var(--cy, 50%),
              rgba(237, 239, 243, .45), rgba(237, 239, 243, .16) 40%, transparent 72%);
  mix-blend-mode: screen;
  opacity: var(--near, 0);
  transition: opacity .45s var(--e);
}

/* الحدّ المضيء: شعرة تلمع عند موضع المؤشر وتخفت حول الكتلة. حيلة الإطار
   المتدرّج: تدرّج يملأ العنصر، وقناعان يستبعد أحدهما الآخر فلا يبقى إلا
   الإطار. مشروطة بالدعم، وإلا امتلأت الكتلة بياضًا. */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .wk__lit::after {
    content: ''; position: absolute; inset: 0; padding: 1.5px;
    background: radial-gradient(320px circle at var(--cx, 50%) var(--cy, 50%),
                rgba(237, 239, 243, 1), rgba(237, 239, 243, .32) 38%, transparent 68%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
  }
}

/* لا مؤشر على اللمس، فلا ضوء يتبعه */
@media (hover: none), (pointer: coarse) { .wk__lit { display: none; } }

/* ── 12. الأرقام ───────────────────────────────────────────────────────── */
/* الأرقام صارت داخل إطار السحابة نفسه، فحدّاها العلوي والسفلي منه —
   ولو بقيا هنا لظهر خطّان مزدوجان عند الحافّتين. */
.stats { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); padding: clamp(2.4rem, 5vw, 4rem) clamp(1rem, 2.4vw, 2rem) 0; }
/* داخل الإطار يتولّى ‎.cloud‎ الفسحة العليا، فلا يُجمَع حشوان */
.cloud > .stats { padding-inline: clamp(1rem, 2.4vw, 2rem); padding-bottom: 0; }
.stat { position: relative; z-index: 1; }

/* فاصل بين الأرقام الثلاثة: شعرة في منتصف الفجوة، لا على حافّة الخانة.

   ‎inset-inline-start‎ لا ‎end‎. الخانة الثانية جارتُها **السابقة** تقع على
   يمينها في ‎rtl‎، و‎start‎ هو اليمين. جرّبتها ‎end‎ أوّلًا فوقع فاصل الثانية
   بينها وبين الثالثة، وفاصل الثالثة **خارج الشريط من اليسار** — وبقيت
   الفجوة الأولى خالية.

   وبنصف الفجوة سالبًا تستقرّ في وسطها تمامًا بدل أن تلتصق بأحد الرقمين.

   وارتفاعها ارتفاع الرقم نفسه لا ارتفاع الشريط: خطّ يمتدّ في الحشو
   العلوي والسفلي يصنع جدولًا، وهذا فصلٌ لا تجدول. */
.stat + .stat::before {
  content: ''; position: absolute; inset-block: 0;
  inset-inline-start: calc(var(--gap) / -2); width: 1px;
  background: var(--line);
}

/* شعاع الحدّ: شرطة مضيئة تجري على محيط الإطار.

   مرّت بثلاث محاولات قبل أن تستقرّ: شرطة طويلة بلا توهّج فبدت خطًّا يزحف،
   ثم كتلة مضبّبة فطفت فوق الخطّ بدل أن تكونه، ثم جسمًا صلبًا قصيرًا —
   والصلب لا ينحني، فتطير أطرافه عن الزاوية كلّما أطلته.

   وهي الآن جزء من المسار نفسه (‎stroke-dasharray‎ على ‎path‎)، فتنحني مع
   القوس مهما طالت. ‎linecap: round‎ يليّن طرفيها، و‎drop-shadow‎ متعدّد
   الطبقات يتبع شكلها فيمتدّ معها طولًا لا قرصًا حولها. */
/* الشعاع: شرطة تجري على محيط الإطار — وهي **جزء من المسار**، فتنحني مع
   الزاوية ولا تنفصل عنها مهما طالت.

   طبقتان: عريضة خافتة بلا مرشِّح تعطي الجسم واللين، ونواة رفيعة بتمريرة
   ترشيح **واحدة** تعطي التوهّج. كانت أربع تمريرات فوق ‎630‎ ألف بكسل في
   كل إطار — وهي التي أثقلت الصفحة عند هذين القسمين. */
.beam {
  position: absolute; top: 0; left: -1px; z-index: 0;
  overflow: visible; pointer-events: none;
}
.beam path {
  fill: none; stroke-linecap: round;
  animation: beam var(--dur, 12s) linear infinite;
}
.beam__glow { stroke: rgba(255,255,255,.13); stroke-width: 7; }
.beam__core {
  stroke: #fff; stroke-width: 1.5;
  filter: drop-shadow(0 0 7px rgba(255,255,255,.8));
}
@keyframes beam { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .beam { display: none; } }
.stat { text-align: center; }
.stat b {
  display: block; font-family: var(--f-mark);
  font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums;
  /* ‎direction: ltr‎ يضمن «+٢٤» لا «٢٤+»، وهو وحده المسؤول عن الترتيب.
     المحاذاة منفصلة عنه تمامًا — كانت ‎right‎ فتتكدّس الأرقام الثلاثة على
     أطراف خاناتها ويُقرأ التوزيع مائلًا. */
  direction: ltr; unicode-bidi: isolate; text-align: center;
}
.stat span { font-family: var(--f-sans); color: var(--fg-3); font-size: var(--t-sm); }

/* الزرّ إلى الأرشيف. رفضته أوّلًا لأنه كان ينزل بك إلى شبكة تراها،
   وصحّ حين صارت الشبكة صفحة. وبلا تدوير «محيط» و«إسكلة»: زواياه قائمة
   كبقية الموقع، والسهم يمدّ خطّه عند المرور — الحركة في الخطّ لا في علبة. */
.more {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  display: inline-flex; align-items: center; gap: 1rem;
  font-family: var(--f-sans); font-size: var(--t-sm); font-weight: 500;
  color: var(--fg); padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
  transition: border-color .5s var(--e), color .5s var(--e);
}
.more i {
  display: block; width: 34px; height: 1px; background: currentColor;
  opacity: .5; transition: width .55s var(--e), opacity .5s var(--e);
}
.more:hover { color: var(--mark); border-bottom-color: var(--fg-3); }
.more:hover i { width: 58px; opacity: 1; }

/* ── الأرشيف: عمل واحد لكل شاشة ─────────────────────────────────────────
   من «إسكلة»، بفرقين.

   ① **القطع.** مراحلهم تنزلق واحدة إثر أخرى فتذوب الحدود. هنا كل مرحلة
   ‎sticky‎ عند القمّة: تثبت التي تقرأها، وتصعد التالية **فوقها** بحافّة
   قاطعة — بلا تلاشٍ ولا تداخل. حدٌّ واحد يعبر الشاشة، وهي القطعة نفسها:
   إطارٌ ينتهي وإطارٌ يبدأ. وهذا لسانك أنت لا لسانهم.

   ② **الخواء.** كان التاريخ عند القمّة والنصّ في القاع وبينهما نصف شاشة
   فارغة. صار الكلّ كتلة واحدة أسفل الإطار، والمرحلة ‎68svh‎ لا ‎100‎ —
   فيظهر طرف التالية دائمًا، وهو ما يجعل القطع مقروءًا قبل وقوعه.
   والخطّ **لم** يصغّر معها. جرّبته فانقلب المقصود: الكتلة انكمشت أسرع من
   المرحلة، فصار الخواء ‎52%‎ بدل ‎23%‎. المطلوب امتلاء لا انكماش — كتلة
   إسكلة ‎74%‎ من مرحلتهم، وهذه النسبة هي الهدف لا حجم الحرف. */
.arch { scroll-snap-type: y proximity; }
.sec--arch { padding-top: calc(var(--sec) + 3rem); padding-inline: 0; }
.sec--arch .head { padding-inline: var(--pad); }

.pj {
  position: sticky; top: 0;
  min-height: 68svh; scroll-snap-align: start;
  display: grid; align-items: end;
  /* الحشو الأفقي ضِعف حشو الصفحة: الغلاف يقف عند حدّ الصفحة، والكلام
     يقف داخله بمسافة — بلا هذا يلتصق النصّ بحافّة الفيديو. */
  padding: clamp(1.4rem, 3vw, 2.6rem) calc(var(--pad) * 2);
  isolation: isolate;
}

/* الغلاف على حدّ الصفحة لا على حافّة الشاشة: كان ‎inset: 0‎ فيلمس الطرفين
   بينما كل كتلة أخرى محشوّة — فيُقرأ خارجًا عن النظام. الآن يحاذي البطاقات
   والأطر وسائر الصفحة. ورأسيًا يبقى ممتدًّا حتى يبقى القطع بين المشروعين
   حدًّا واحدًا يعبر الشاشة.
   وأرضية تحته: المقاطع ‎lazy‎ فتصل بعد دخول المرحلة. */
.pj__m { position: absolute; inset: 0 var(--pad); z-index: 0; overflow: hidden; background: var(--bg-3); border-radius: var(--r); --fin: clamp(9px, .9vw, 16px); }
/* الإطار الداخليّ — فوق الحجاب (‎::after‎ z:auto) كي لا يبتلعه */
.pj__m::before {
  content: ''; position: absolute; inset: var(--fin); z-index: 2;
  border: 1px solid rgba(237, 239, 243, .26);
  border-radius: calc(var(--r) - var(--fin));
  pointer-events: none;
}
.pj__m img, .pj__m .mv { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.5) contrast(1.05); }
.pj__m::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(6,8,11,.94) 0%, rgba(6,8,11,.46) 52%, rgba(6,8,11,.62) 100%),
    radial-gradient(74% 56% at 66% 78%, rgba(6,8,11,.62), rgba(6,8,11,0) 78%);
}
.pj__m img, .pj__m .mv { transition: filter .8s var(--e), transform 1.6s var(--e); }
.pj:hover .pj__m img, .pj:hover .pj__m .mv { filter: brightness(.62) contrast(1.05); transform: scale(1.03); }

.pj__in { position: relative; z-index: 2; max-width: 34ch; }

/* ── لوح الجهة ───────────────────────────────────────────────────────────
   الشعار كان ‎22px‎ محشورًا في سطر الزرّ، فلا يُرى. صار لوحًا قائمًا بذاته
   فوق العنوان.

   اقتباسًا من اللوح الذي أرسلته: الشعار **داخل حاوية** لا عائمًا، والحاوية
   شفّافة يظهر خلفها المشهد. أخذنا الاثنين.

   وتركنا شكله. لوحه **مربّع** لأن شعاره مربّع؛ وشعارات جهاتك **لوكبات
   أفقية** ‎3:1‎ (رمز + عربي + إنجليزي). ومربّعٌ يحوي ‎3:1‎ بـ‎contain‎ يترك
   الشعار يملأ ثلث ارتفاعه ويهدر الثلثين — وهو سبب صغره. فاللوح هنا أفقي
   بنسبة الشعار نفسه.

   وتركنا التدوير: زوايا هذا الموقع قائمة من الجدار إلى البطاقة، ولوحٌ
   مدوّر وحده يُقرأ لصيقًا لا جزءًا. */
/* ‎.cl__i‎ (كتلة شريط الجهات) تأتي **بعد** هذه في الملف، فحشوها الرأسي
   ‎.5rem‎ كان يفوز بترتيب المصدر ويسحق الحشو إلى ‎8px‎ مقابل ‎19‎ أفقيًا.
   نضمّ الصنفين في المحدِّد فيعلو التخصيص ولا يبقى الأمر رهن الترتيب. */
.pj__badge.cl__i, .wk__mark.cl__i {
  border-radius: var(--r);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0;
  background: rgba(237, 239, 243, .06);
  border: 1px solid rgba(237, 239, 243, .10);
  /* بلا ‎backdrop-filter‎: تسعة عشر لوحًا في الأرشيف، وكلٌّ يفرض تمريرة
     ترشيح لما خلفه. والمشهد خلفها معتّم أصلًا، فالمكسب لا يساوي الكلفة. */
  transition: background-color .5s var(--e), border-color .5s var(--e);
}
/* الشعار يملأ عرض اللوح، واللوح يأخذ ارتفاعه منه.
   القياس بالعكس — لوحٌ ذو نسبة ثابتة ثم ‎contain‎ داخله — يترك صندوق
   المحتوى بعد الحشو أعرض من الشعار، فيُحصر الشعار بالارتفاع ويتضاءل. */
.pj__badge .cl__logo, .wk__mark .cl__logo {
  width: 100%; height: auto; aspect-ratio: 3 / 1;
  object-fit: contain; opacity: .95; transform: none;
}
.pj__badge .cl__word, .wk__mark .cl__word {
  font-size: var(--t-2xs); opacity: .9; transform: none; text-align: center;
}

.pj__badge.cl__i {
  /* الحدّ الأدنى كان ‎206px‎ — أي ‎62%‎ من عرض كتلة النصّ عند ‎375px‎، فيطغى
     اللوح على ما يعرّفه. ‎150‎ تجعله ‎45%‎ هناك، ويبقى ‎300‎ على السطح. */
  width: clamp(150px, 21vw, 300px); height: auto;
  padding: clamp(10px, 1.3vw, 18px);
  margin-bottom: clamp(1rem, 1.8vw, 1.6rem);
}
.pj:hover .pj__badge { background: rgba(237, 239, 243, .10); border-color: rgba(237, 239, 243, .18); }
.pj__t {
  font-family: var(--f-mark); font-size: var(--t-xl); font-weight: 800;
  line-height: var(--lh-mark); margin-top: .6rem;
}
.pj__x { margin-top: 1rem; color: var(--fg-2); font-size: var(--t-sm); line-height: 1.85; max-width: 42ch; }

/* الوسوم: نصّ يفصله شعرة، لا حبّات مدوّرة */
.pj__tags { display: flex; flex-wrap: wrap; gap: .45rem 1.3rem; margin-top: 1.2rem; list-style: none; }
.pj__tags li {
  font-family: var(--f-sans); font-size: var(--t-xs); color: var(--fg-3);
  padding-inline-end: 1.4rem; border-inline-end: 1px solid var(--line);
}
.pj__tags li:last-child { padding-inline-end: 0; border-inline-end: 0; }

.pj__go {
  display: inline-flex; align-items: center; gap: .9rem; margin-top: 1.7rem;
  font-family: var(--f-sans); font-size: var(--t-sm); font-weight: 500; color: var(--fg);
  padding-bottom: .7rem; border-bottom: 1px solid var(--line);
  transition: border-color .5s var(--e), color .5s var(--e);
}
.pj__go i { display: block; width: 30px; height: 1px; background: currentColor; opacity: .5; transition: width .55s var(--e), opacity .5s var(--e); }
.pj:hover .pj__go { color: var(--mark); border-bottom-color: var(--fg-3); }
.pj:hover .pj__go i { width: 54px; opacity: 1; }

/* السنة على سطر الترقيم نفسه: كانت تطفو وحدها عند القمّة فتفتح خواءً
   بينها وبين الكلام. سطر واحد يحمل الاثنين. */
.pj__hd { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 1.2rem; }
.pj__d { font-family: var(--f-sans); font-size: var(--t-2xs); font-weight: 500; letter-spacing: .2em; color: var(--fg-3); }

@media (max-width: 760px) {
  .pj { min-height: 62svh; }
  .pj__in { max-width: none; }
}

/* ── سحابة الجهات ────────────────────────────────────────────────────────
   من «Logo Cloud 15»: العنوان **يقطع** الحدّ العلوي للإطار لا يعلوه، وشعاع
   يدور على الإطار.

   وتنفيذ القطع هنا ليس بخلفية تحجب الخطّ خلفها — تلك تترك رقعة صمّاء فوق
   الرمل الحيّ. الحدّ العلوي مبنيّ من شعرتين تتمدّدان والعنوان بينهما، فلا
   شيء يُحجب لأنه لم يُرسم أصلًا.

   والشعاع هو نفسه شعاع الأرقام (‎data-beam‎) — جهاز واحد في موضعين، لا
   تنفيذان متشابهان. */

.cloud {
  position: relative;
  border: 1px solid var(--line); border-top: 0;
  border-radius: var(--r);
  /* الفسحتان لم تكونا متساويتين رغم أن أرقامهما كانت متقاربة، والسبب أن
     العنوان **يمتطي** الحدّ بـ‎translateY(-50%)‎: نصفه يغطس داخل الإطار
     فيبتلع الفسحة العليا كلّها. فكانت الصفوف تلتصق بالعنوان (‎1px‎) ويبقى
     تحتها ‎45px‎ خواءً.

     فالفسحة العليا تُحسب: نصف العنوان + الفسحة. وارتفاع العنوان
     ‎fs × (1.5 سطرًا + 0.84 حشوًا) = fs × 2.34‎، ونصفه ‎fs × 1.17‎. */
  /* كان حدّه الأدنى ‎1.55rem‎ فيهبط إلى ‎24.8px‎ على الجوّال، بينما «مشاهد
     صنعتها» و«فكرة واحدة تكفي» عندها ‎32px‎ — قسمان يتكلّمان وقسمان
     يهمسان وكلّها في المرتبة نفسها. والحدّ الأقصى ‎2rem‎ أصلًا، فالتسوية
     لا تكبّر شيئًا على السطح. */
  --ct: clamp(1.9rem, 4.6vw, 2rem);        /* مقاس عنوان الإطار */
  --cgap: clamp(1.5rem, 2.8vw, 2.4rem);    /* الفسحة حول المحتوى */
  padding-bottom: var(--cgap);
}
.cloud > [data-clients],
.cloud > .stats { padding-top: calc(var(--ct) * 1.17 + var(--cgap)); }

/* الحدّ العلوي: شعرتان والعنوان بينهما.

   والصفّ **يمتطي** حافّة الحاوية لا يجلس تحتها. كان ساكنًا في مجرى
   الصفحة، فتوسّطت الشعرتان ارتفاعه بينما يرسم الشعاع مساره على الحافّة
   الحقيقية فوقهما بنصف ارتفاع الصفّ — خطّان علويّان في مستويين، ويُقرأ
   الفرق خطًّا زائدًا عند الزاوية. الآن مركز الصفّ ينطبق على الحافّة،
   فيتّحد الخطّان في واحد. */
.cloud__top {
  /* الشعرتان تبدآن حيث ينتهي انحناء الزاوية: الحدّ العلوي ‎0‎ والتدوير
     ‎--r‎، فالضلع الجانبي ينحني وينتهي عند ‎--r‎ — ولو بدأت الشعرة من ‎0‎
     لطفت فوق الانحناء ولم تلتقِ به. */
  position: absolute; top: 0; inset-inline: var(--r); transform: translateY(-50%);
  z-index: 2; display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.1rem);
}
.cloud__top i { flex: 1; height: 1px; background: var(--line); }
.cloud__t {
  font-family: var(--f-mark);
  /* مقياسه الخاصّ لا ‎--t-md‎: ذاك يهبط إلى ‎18.4px‎ على الجوّال — نفس حجم
     عنوان بطاقة واحدة، فيتساوى القسم بعنصر فيه. */
  font-size: var(--ct); font-weight: 800;
  line-height: 1.5; white-space: nowrap;
  /* الشعاع لا يعبر الجملة — يختفي في فجوتها ويظهر أثره توهّجًا في حروفها.
     ‎drop-shadow‎ لا ‎text-shadow‎: الحروف مملوءة بتدرّج مقصوص، والأول
     يعمل على الناتج المرسوم والثاني يحتاج لونًا صمّاء. */
  /* المرشِّح يحقنه motion.js عند مرور الشعاع فقط */
}
/* الحروف تُملأ بالتدرّج لا باللون: موجة بيضاء تعبر داخلها حين يمرّ
   الشعاع، وما عداها لون الكلمة الأساس ‎--c‎.
   واللون هنا في ‎--c‎ لا في ‎color‎ لأن ‎text-fill-color‎ الشفّاف يبطله. */
/* ‎background-clip: text‎ يقصّ الخلفية على **صندوق الحشو**، وما خرج الحرف
   عنه لا يجد ما يُملأ به فيختفي. والعربية تخرج كثيرًا: نقاط «ب» و«ن» و«ي»
   تحت السطر، ونقاط «ق» و«ف» فوقه. فحشوٌ رأسيّ يوسّع الصندوق ليسعها. */
/* حروفٌ مصمتة لا مفرَّغة.
   كانت تُملأ بتدرّجٍ مقصوص عليها ليعبرها ضوءٌ مع الشعاع — وهي حيلةٌ
   هشّة: الحرف لا لون له، وإنما يُرى ما خلفه. فمتى زاغت الخلفية بكسلًا
   واحدًا عن صندوقه اختفى الحرف. والحشو الرأسيّ باقٍ ليسع نقاط العربية. */
.cloud__t .w {
  color: var(--fg);
  padding-block: .42em;
}


/* الصفّان يخرجان بحشو القسم سالبًا ليجريا من حافّة الشاشة إلى حافّتها —
   وكان صوابًا حين لم يكن ثمّة إطار. داخل الإطار يثقبانه، فيُلغى النزّ.
   وقناع التلاشي باقٍ: الشعارات تذوب قبل أن تلمس الحدّ لا تُقصّ عليه. */
.cloud .cl { margin-inline: 0; }

/* صفّ واحد على الجوّال: الصفّ الثاني نفس الجهات بترتيب مزاح، فحذفه لا
   يُخفي شعارًا واحدًا — ويوفّر ‎21‎ صورة تُحمَّل وتتحرّك على جهاز أضعف. */
@media (max-width: 700px) {
  .cl + .cl { display: none; }
}


@media (max-width: 700px) {
  .cloud__t { white-space: normal; text-align: center; }
  .cloud__top { gap: 1rem; }
}

/* ── 13. الجهات ────────────────────────────────────────────────────────── */
/* صفّان متعاكسان بمدّتين مختلفتين فلا يتزامنان أبدًا، والإيقاع أبطأ من
   المعتاد ليمشي مع انجراف الرمل خلفه لا فوقه.

   الحلقة بلا جافاسكربت: المجموعة مكرّرة مرّتين بالضبط والحركة إلى ‎-50%‎،
   فتعود إلى نقطة مطابقة بصريًا — لا حساب عرض ولا قفزة. */
.cl {
  /* الحاوية LTR: في RTL يُحاذى المسار الفائض إلى اليمين فيخرج أحد
     الصفّين خارج الشاشة تمامًا. */
  direction: ltr;
  overflow: hidden;
  margin-inline: calc(var(--pad) * -1);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.cl + .cl { margin-top: clamp(1rem, 2.4vw, 2rem); }

.cl__track {
  display: inline-flex;
  align-items: center;
  gap: clamp(2.2rem, 4.5vw, 4.5rem);
  width: max-content;
  will-change: transform;
  animation: cl-run 74s linear infinite;
}
.cl__track--rev { animation: cl-run-rev 92s linear infinite; }
@keyframes cl-run     { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes cl-run-rev { from { transform: translateX(-50%); }  to { transform: translateX(0); } }

/* التباطؤ عند المرور — لا توقّف كامل، فالسكون يقطع إحساس الانجراف.
   ولا يُفعَل بـ‎animation-duration‎: تقدّم الحركة في ‎CSS‎ = المنقضي ÷ المدّة،
   فتغيير المدّة وحدها يعيد ربط الزمن نفسه بموضعٍ آخر — والمسار **يقفز**
   ألفَي بكسل. لذلك صار بـ‎playbackRate‎ في ‎home.js‎: يبدّل السرعة
   ويحفظ الموضع. */

.cl__i {
  direction: rtl;                 /* الاسم العربي يعود لاتجاهه داخل المسار */
  flex: none;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding-block: .5rem;
  text-align: center;
}

/* توحيد الشعارات: أي ملف — ملوّن أو متدرّج — يُسحق إلى أسود ثم يُقلب
   إلى أبيض خالص. بلا هذا تتضارب ألوان ١٩ جهة وتفكّك القسم. */
/* صندوق ثابت ٣:١ لكل شعار — نفس نسبة لوح العمل المطلوب (٤٨٠×١٦٠).
   ‎object-fit: contain‎ يجعل الملف يتوسّط الصندوق مهما كانت نسبته،
   فيصبح التوحيد من اللوح لا من حوافّ الشعار. لو قِسنا بالارتفاع فقط
   لطلع الوردمارك الأفقي ضخمًا والشعار الدائري قزمًا. */
.cl__logo {
  /* أكبر مما يبدو ضروريًا عمدًا: شعارات الجهات لوكبات كاملة
     (رمز + عربي + إنجليزي + إطارات)، ولو صغّرناها ذابت تفاصيلها. */
  width: clamp(140px, 14.5vw, 210px);
  aspect-ratio: 3 / 1;
  height: auto;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .55;
  /* ‎--s‎ معامل الموازنة البصرية، يحقنه home.js من tools/logo-balance.py */
  transform: scale(var(--s, 1));
  transition: opacity .45s var(--e), transform .45s var(--e);
}
/* شعارات ذات نسخة أحادية بيضاء جاهزة: توضع في المجلد باسم ‎{id}-white.svg‎
   ويُلغى الفلتر عنها حتى لا تُطمس تفاصيلها الداخلية. */
.cl__logo[data-white] { filter: none; }
.cl__i:hover .cl__logo { opacity: 1; transform: scale(var(--s, 1)) translateY(-2px); }

/* البديل حين لا يوجد ملف شعار: الاسم كعلامة نصّية بيضاء */
.cl__word {
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.45vw, 1.3rem);
  font-weight: 400;          /* موشرق لا يملك ٣٠٠ — والمتصفّح يزيّفه */
  color: var(--mark);
  opacity: .5;
  white-space: nowrap;
  transition: opacity .45s var(--e), transform .45s var(--e);
}
.cl__i:hover .cl__word { opacity: 1; transform: translateY(-2px); }

.cl__name {
  font-family: var(--f-sans);
  font-size: var(--t-2xs);
  /* ‎--fg-3‎ كان يكفي وسمًا مصنّفًا يُقرأ أو لا يُقرأ. والاسم الآن هو ما
     يعرّف الشعار، فرُفع إلى ‎--fg-2‎ ليُقرأ فعلًا على شاشة الجوّال. */
  color: var(--fg-2);
  white-space: nowrap;
  opacity: 0; transform: translateY(-5px);
  transition: opacity .4s var(--e), transform .45s var(--e);
}
.cl__i:hover .cl__name { opacity: 1; transform: none; }

/* على اللمس لا يوجد Hover: الشعارات أوضح والاسم ظاهر دائمًا */
@media (hover: none) {
  .cl__logo, .cl__word { opacity: .82; }
  .cl__name { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cl { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .cl__track { animation: none; }
}

/* نثار الشوريل: لقطات مربّعة حول المركز، بعضها ينزف خارج الحافة.
   ‎--x/--y‎ موضعها و‎--w‎ عرضها — كلها من home.js فيسهل تحريك النثرة
   بلا لمس التنسيق. مربّعة بزوايا قائمة، ورمادية كبقية الموقع. */
.sec--reel { position: relative; }

/* ── 14. الشوريل ───────────────────────────────────────────────────────── */
.reel { margin-inline: calc(var(--pad) * -1); position: relative; }
.reel__f { position: relative; aspect-ratio: 21/9; overflow: hidden; background: var(--bg-3); border-radius: var(--r); }
.reel__f img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); transition: transform 1.5s var(--e), filter .8s; }
.reel:hover .reel__f img { transform: scale(1.03); filter: brightness(.68); }
.reel__btn { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; will-change: transform; }
.reel__ring {
  width: clamp(66px, 8vw, 106px); height: clamp(66px, 8vw, 106px);
  border: 1px solid rgba(255,255,255,.4); border-radius: 50%;
  display: grid; place-items: center;
  transition: background-color .5s var(--e), border-color .5s, transform .55s var(--e);
}
.reel__btn:hover .reel__ring { background: var(--mark); border-color: transparent; transform: scale(1.06); }
.reel__ring svg { width: 18px; height: 18px; fill: var(--mark); transition: fill .5s; margin-inline-start: 3px; }
.reel__btn:hover .reel__ring svg { fill: var(--void); }

.player { position: fixed; inset: 0; z-index: 80; background: #000; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .5s var(--e), visibility .5s; }
.player.on { opacity: 1; visibility: visible; }
.player__box { width: min(100%, 1500px); aspect-ratio: 16/9; padding: clamp(0px, 3vw, 3rem); }
.player__box video, .player__box iframe { width: 100%; height: 100%; border: 0; background: #000; }
.player__x { position: absolute; top: clamp(1rem, 3vw, 2.2rem); inset-inline-end: clamp(1rem, 3vw, 2.2rem); color: var(--fg-2); transition: color .35s; }
.player__x:hover { color: var(--fg); }
.player__miss { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-sans); text-align: center; color: var(--fg-3); font-size: var(--t-sm); padding: 2rem; line-height: 2.2; }

/* ── 15. عنّي ──────────────────────────────────────────────────────────── */
.about { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap) clamp(2rem, 5vw, 5rem); }
/* النص على جهة القراءة، والكادر يوازيه بارتفاعه — لا صورة صغيرة في
   زاوية. والخدمات تنزل صفًّا كاملًا تحتهما. */
.about__l   { grid-column: 1 / span 6; }
.about__r   { grid-column: 8 / span 5; }
.about__svc { grid-column: 1 / -1; margin-top: clamp(2.5rem, 6vw, 5rem); }
/* العنوان كان بوسم صغير: ‎12px‎ بشفافية ‎0.32‎ — أخفت ممّا يعرّفه، والوصف
   تحته ‎14px‎ بشفافية ‎0.58‎. فانقلب الترتيب: يهمس العنوان ويعلو ما دونه.
   ويبقى صغيرًا عمدًا (لا ينافس أسماء المجالات ‎27px‎) لكن بلونٍ كامل —
   فالبياض التامّ يجعله يُقرأ عنوانًا بلا أن يكبر. */
.svc-t {
  font-family: var(--f-sans); font-size: var(--t-sm); font-weight: 500;
  color: var(--fg); line-height: 1.4;
  margin-bottom: clamp(.9rem, 1.6vw, 1.35rem);
}
/* أربعة أعمدة لأربع خدمات: ثلاثةٌ كانت تترك الرابعة يتيمةً في سطر وحدها.
   وعلى اللوحي عمودان — أربعة في ‎768px‎ تجعل كل خانة ‎170px‎ فينكسر الوصف. */
.about__svc .svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 1100px) { .about__svc .svc { grid-template-columns: repeat(2, 1fr); } }
.about__lead { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 400; line-height: var(--lh-disp); margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.about__b { display: flex; flex-direction: column; gap: 1.15rem; color: var(--fg-2); max-width: 50ch; line-height: 1.95; }
/* قاعدةٌ واحدة فوق الكتلة، والفراغ يفصل الأعمدة.
   الحدّ السفليّ على كل خانة كان صحيحًا يوم كانت القائمة عمودًا واحدًا —
   يرسم قائمةً مسطّرة. وحين صارت أربعة أعمدة انقطع عند الفجوات، فظهر
   خطًّا متّصلًا فوق وأربع قطع تحت: جدولٌ لم يكتمل رسمه.
   فبقي مسطَّرًا حيث يصحّ التسطير — العمود الواحد على الهاتف. */
.svc { border-top: 1px solid var(--line); }
.svc li { padding-block: clamp(.85rem, 1.6vw, 1.15rem); transition: padding-inline-start .5s var(--e); }
@media (max-width: 760px) { .svc li { border-bottom: 1px solid var(--line); } }
/* شعرةٌ في منتصف الفجوة بين كل خانة والتي قبلها.
   على عنصرٍ زائف لا على حدّ الخانة: الحدّ يلتصق بحافّتها فيلاصق النصّ،
   ويزاحم ‎padding-inline-start‎ الذي ينزلق عند المرور. والزائف يقف في
   منتصف الفجوة تمامًا ولا يمسّ الحشو. */
.svc li { position: relative; }
.svc li + li::before {
  content: ''; position: absolute; inset-block: 0;
  inset-inline-start: calc(var(--gap) / -2); width: 1px;
  background: var(--line);
}
/* عمودان: الفاصل بين الأول والثاني فقط في كل صفّ — لا قبل من يفتح صفًّا */
@media (max-width: 1100px) {
  .svc li + li::before { content: none; }
  .svc li:nth-child(2n)::before { content: ''; }
}
/* عمودٌ واحد: لا فواصل رأسية، السطور تفصلها.
   ‎:nth-child(n)‎ ليس زخرفًا: بدونه يبقى ‎.svc li:nth-child(2n)::before‎
   أعلى تخصيصًا فيغلب هذه القاعدة مهما تأخّرت في الملف — فتبقى الشعرة
   بارزةً خارج الخانة وتفيض الصفحة أفقيًّا. */
@media (max-width: 760px) { .svc li:nth-child(n)::before { content: none; } }

/* ‎[data-rise].in‎ يُعيد كتابة ‎transition‎ كاملةً فيمحو انزياح الهوفر.
   نعيده هنا مع الاثنين الآخرين بدل أن نخسره. */
.js .svc li[data-rise].in {
  transition: opacity .9s var(--e), transform 1s var(--e), padding-inline-start .5s var(--e);
}
@media (hover: hover) { .svc li:hover { padding-inline-start: .6rem; } }
/* ── البورتريه ──────────────────────────────────────────────────────────
   الصورة مقصوصة بلا خلفية، فالشخص يقف **في** الصفحة لا داخل صندوق —
   وهذا وحده يحلّ انفصال الخلفية الرمادية عن سواد الموقع.

   والتدريج مطبوخ في بكسلات الملف نفسه (لا في CSS): أبيض وأسود سينمائي،
   ثنائي اللون من ‎--void‎ إلى ‎--fg‎ — أي أن الصورة مبنية من لونَي الصفحة
   حرفيًا — مع مفتاح إضاءة شعاعي يجعل الوجه أفتح ما في الكادر. الفلتر لا
   يستطيع ذلك: هو يعامل كل البكسلات سواءً، فلا يعتّم خلفية دون وجه.

   والإطار أضيق من الشخص عمدًا: يكسره من الجانبين ومن أعلى. فهو خطّ
   يمرّ خلفه لا صندوق يحويه. */
/* الحشوة العلوية تترك للرأس مكانًا يخرج فيه فوق الإطار وهو باقٍ داخل
   حدود ‎.me‎ — وهذا شرط لأن مسحة الكشف تقصّ عند حدود ‎.me‎. */
/* الحشو العلويّ كان ‎12%‎ من العرض (‎52px‎ عند ‎1440‎) فيدفع الصورة لأسفل،
   وهو موضوع أصلًا ليتّسع للمسحة عند الكشف — و‎4%‎ تكفيها. */
.me { position: relative; margin: 0; padding-top: 4%; --frame: 20%; }

.me__stage {
  position: relative;
  /* رفعٌ يوازن الكتلة البصرية لا الصندوق: القصاصة فيها جسمٌ يمتدّ لأسفل،
     فمركز ثقلها المرئيّ أنزل من مركز صندوقها — والنصّ يبدو أعلى منها. */
  margin-top: clamp(-3rem, -2.4vw, -1.2rem);
  margin-inline: var(--frame);
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line); border-radius: var(--r);
  /* لا ‎overflow‎ ولا ‎clip-path‎ هنا: كلاهما يقصّ الأبناء، فيمنع الشخص
     من تجاوز الإطار — وتجاوزه هو الفكرة. المسحة تُطبَّق على ‎.me‎. */
}

/* هالة الحضور: ضوء كحلي خافت خلفه، وعتمة تحته تفصله عن الصفحة.
   شدّتها تتبع ‎--pk‎ (٠ غائب · ١ حاضر) فيضيء المكان مع صعوده. */
.me__halo {
  opacity: calc(.4 + var(--pk, 0) * .6);
  position: absolute; inset: -18% -34%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(44% 38% at 50% 30%, rgba(132, 162, 210, .30), transparent 72%),
    radial-gradient(66% 54% at 50% 44%, rgba(6, 8, 11, .88), transparent 78%);
}

/* الظلّ يتبع حدود الشخص لا حدود المربّع — لأن الملف شفّاف */
.me__img {
  position: absolute; z-index: 1;
  bottom: -7%; inset-inline-start: 50%;
  /* ‎max-width:none‎ ضروري: إعادة الضبط العامة تحدّ الصور بـ‎100%‎ من
     حاضنها، فتمنع الشخص من تجاوز الإطار — وتجاوزه هو الفكرة كلّها. */
  width: 160%; max-width: none; height: auto;
  transform: translateX(50%)
             translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--ey, 0px)), 0)
             scale(var(--ps, 1));
  transform-origin: 50% 100%;
  /* الأصل بورتريه صدري: الجسم مقطوع عند حافة الملف بخطّ مستقيم. لولا
     هذا التلاشي لبدا مقصوصًا بسكين. الآن يذوب في سواد الصفحة أسفله. */
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 58%, transparent 96%);
  /* سحبة فوكس، لا ضبابة حركة: ‎blur‎ متساوي المحورين كالذي على النصّ.
     المرشّح الاتّجاهيّ (‎stdDeviation="0 N"‎) كان يترك التفاصيل الأفقية
     حادّة والرأسية ممسوحة، فتظهر خصل الشعر أعمدةً مُمشّطة. */
  filter: blur(var(--mb, 0px)) drop-shadow(0 0 38px rgba(0, 0, 0, .85));
  will-change: transform;
}

/* الدخول: الإطار يظهر بهدوء، والشخص يدخل بضبابة حركة يقودها JS.
   لا ‎clip-path‎ هنا — سبق أن قصّ ما يتجاوز الإطار وأفسد الفكرة. */
.js .me__stage { opacity: 0; }
.js .me.in .me__stage { opacity: 1; transition: opacity .7s var(--e); }
.js .me .me__img { opacity: var(--eo, 0); }




/* على اللوحي والجوّال: إطار أوسع وتجاوز أقلّ.

   ‎--frame: 26%‎ كان يخنق الإطار — عمودٌ عرضه ‎330px‎ يترك إطارًا ‎158‎ فقط،
   والصورة ‎160%‎ منه تخرج ‎46px‎ من كل جهة. فيصغر الشخص ويكبر خروجه معًا،
   وهو عكس المقصود: كسر الإطار يُقرأ حين يكون الإطار واضحًا والشخص كبيرًا.

   على شاشة ضيّقة الأولوية أن **يُرى الوجه**، فالإطار يتّسع والخروج يخفّ. */
/* ونسبة الإطار تتبع نسبة الملف لا العكس.

   الملفّ ‎1200×1105‎ — نسبته ‎1.09‎، أي شبه مربّع، وشفافيته فوق الرأس ‎3.6%‎
   فقط. والإطار ‎4/5‎ (نسبة ‎0.8‎) أي **طوليّ**. وحين تُلصق صورة شبه مربّعة
   بقاع إطار طوليّ يبقى فوقها ‎22%‎ من ارتفاعه خواءً — وهو الفراغ الذي يظهر
   فوق الرأس. الفراغ من تنافر النسبتين لا من مقاس الصورة. */
@media (max-width: 1024px) {
  .me { --frame: 16%; margin-top: 0; }
  .me__stage { aspect-ratio: 9 / 10; }
  .me__img { width: 132%; }
}
@media (max-width: 700px) {
  .me { --frame: 9%; }
  .me__stage { aspect-ratio: 14 / 15; }
  .me__img { width: 120%; }
}
/* الهالة كانت تنزف ‎34%‎ فتخرج عن الشاشة ‎44px‎ من كل جهة، فيتّسع إطار
   الصفحة المنطقيّ ويُجَرّ الموقع أفقيًا على سفاري الجوّال.

   والقصّ عند القسم كان يوقف الجرّ لكنه يكلّف: داخل القسم صورةٌ عليها
   ‎filter: url()‎ ومسحة وتحويل يتحرّك مع التمرير — والقصّ يمنع رفعها إلى
   طبقة مستقلّة فتُعاد رسمتها كل إطار.

   فالعلاج عند المصدر: نضيّق صندوق الهالة ليساوي عرض الشاشة تمامًا،
   ونوسّع أنصاف الأقطار بالنسبة نفسها — فالبكسلات المرئية لا تتغيّر.
   ‎.7216V × 1.386 ≈ V‎ · ‎.44×1.68/1.386 = 53.3%‎ · ‎.66×1.68/1.386 = 80%‎ */
@media (max-width: 700px) {
  .me__halo {
    inset-inline: -19.3%;
    background:
      radial-gradient(53.3% 38% at 50% 30%, rgba(132, 162, 210, .30), transparent 72%),
      radial-gradient(80%   54% at 50% 44%, rgba(6, 8, 11, .88), transparent 78%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .me__stage { opacity: 1; }
  .js .me .me__img { opacity: 1; --mb: 0px; }
}

.svc b { display: block; font-family: var(--f-display); font-weight: 400; font-size: var(--t-md); margin-bottom: .38rem; }
/* ‎--fg-3‎ وسمٌ يُقرأ أو لا يُقرأ. وهذه الأسطر هي ما تقوله عن عملك —
   فرُفعت إلى ‎--fg-2‎ ومقاس النصّ الصغير لا الأصغر. */
.svc span { font-family: var(--f-sans); color: var(--fg-2); font-size: var(--t-sm); line-height: 1.75; }

/* ── 16. الفوتر ────────────────────────────────────────────────────────── */
/* خانتا التواصل — من «كويك مارك»: مفتاح صغير فوق، والقيمة تحته.

   أخذنا الترتيب وتركنا شكلهم: عندهم عمودُ نصٍّ في تذييل مزدحم، وعندك
   خانتان قائمتان بذاتهما — لأن التذييل هنا هو صفحة التواصل نفسها، وليس
   فيه ما ينافسهما. والإطار والتدوير من نظام الصفحة لا من عندهم. */
.fields {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 46rem;
}
.fld {
  position: relative; display: flex; flex-direction: column; gap: .45rem;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .45s var(--e), background-color .45s var(--e);
}
.fld:hover { border-color: var(--fg-3); background: rgba(237, 239, 243, .035); }
/* العلامة: ‎currentColor‎ فتتبع حالة الخانة بلا نسخة ثانية ولا ملفّ */
.fld__m { display: block; color: var(--fg-3); transition: color .45s var(--e); }
.fld__m svg { width: clamp(20px, 2.2vw, 26px); height: auto; display: block; }
.fld:hover .fld__m { color: var(--mark); }

.fld__k { font-family: var(--f-sans); font-size: var(--t-2xs); font-weight: 500; letter-spacing: .16em; color: var(--fg-3); margin-top: .35rem; }
.fld__v { font-family: var(--f-display); font-size: clamp(.95rem, 2vw, 1.35rem); font-weight: 400; color: var(--fg); word-break: break-word; }
/* السهم خطّ يمتدّ عند المرور — نفس زرّ الأرشيف، لا أيقونة جديدة */
.fld__go {
  position: absolute; inset-block-start: clamp(1.1rem, 2.2vw, 1.6rem);
  inset-inline-end: clamp(1.1rem, 2.2vw, 1.6rem);
  width: 18px; height: 1px; background: var(--fg-3);
  transition: width .5s var(--e), background-color .45s var(--e);
}
.fld:hover .fld__go { width: 34px; background: var(--mark); }
@media (max-width: 620px) { .fields { grid-template-columns: 1fr; } }

/* الختام — من «‎Footer Section‎»: ضوءٌ يدخل من منتصف الحافّة العليا.

   وبقي ممتدًّا لا لوحًا محتوًى: في الصفحة لوحان مؤطّران سلفًا (الجهات
   والأرقام)، وثالثٌ يجعل الختام شقيقًا لهما لا خاتمةً لهما.

   وثلاث طبقات ساكنة لا تتحرّك أبدًا، فطمسها يُحسب مرّةً عند الرسم الأول
   ولا يُعاد — بخلاف شعاع الحواف الذي كان يدور فيُعاد رسمه كلّ إطار. */
.foot {
  position: relative;
  padding: var(--sec) var(--pad) clamp(1.5rem, 3vw, 2.5rem);
  /* ١) البلوم: ضوءٌ واسعٌ ضحل ينزل من القمّة ويتلاشى */
  background: radial-gradient(36% 132px at 50% 0, rgba(237, 239, 243, .06), transparent);
}
/* ٢) الحدّ متدرّج لا مسطّح: إن كان الضوء يدخل من المنتصف فلا يستوي
   الخطّ في طرفيه ووسطه. (عندهم مسطّح — وهو تناقضٌ في فكرتهم.) */
.foot::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right,
    transparent, var(--line) 18%, rgba(237, 239, 243, .30) 50%, var(--line) 82%, transparent);
}
/* ٣) شعرة الضوء: ثلث العرض، مطموسة، تجلس على الحدّ فتشقّه بضوء */
.foot::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 34%; height: 1px; border-radius: 999px;
  background: rgba(237, 239, 243, .22); filter: blur(8px);
  pointer-events: none;
}
.foot__big { font-family: var(--f-mark); font-size: var(--t-xl); font-weight: 800; line-height: var(--lh-mark); margin-bottom: clamp(2rem, 5vw, 3.5rem); max-width: 18ch; }
.foot__row { margin-top: clamp(3rem, 7vw, 5rem); padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; font-family: var(--f-sans); color: var(--fg-3); font-size: var(--t-sm); }
.foot__soc { display: flex; flex-wrap: wrap; gap: 1.15rem; }
.foot__soc a { color: var(--fg-2); transition: color .35s var(--e), transform .35s var(--e); }
.foot__soc a:hover { color: var(--fg); transform: translateY(-2px); }
/* مساحة اللمس ‎44px‎ وإن كان الرسم ‎20‎ — الإصبع أعرض من الأيقونة */
.soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -12px;
}
.soc svg { display: block; width: 20px; height: 20px; }

/* زرّ الصعود — دائرةٌ صغيرة عند الزاوية السفلية الخارجة (يسار في العربية).
   بلا ‎backdrop-filter‎: تسع عشرة لوحة شعارات علّمتنا كلفته، وهذا عنصر
   ثابت فوق كل تمريرة. خلفيةٌ صلبة شبه معتمة تكفي وتُرسم مرّة.

   ‎translateY‎ للإخفاء لا ‎display‎: المحور الرأسيّ لا ينقلب في ‎RTL‎،
   فالتحويل الفيزيائيّ يوافق ‎inset-inline-end‎ المنطقيّ بلا تصادم. */
.top {
  position: fixed; z-index: 60;
  inset-inline-end: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(1rem, 2.4vw, 2rem);
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center;
  color: var(--fg-2);
  background: rgba(10, 12, 16, .82);
  border: 1px solid var(--line);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .45s var(--e), transform .55s var(--e),
              color .35s var(--e), border-color .35s var(--e);
}
.top.on { opacity: 1; transform: none; pointer-events: auto; }
.top:hover { color: var(--fg); border-color: rgba(237, 239, 243, .22); }
.top svg { width: 18px; height: 18px; display: block; }
@media (prefers-reduced-motion: reduce) { .top { transition: none; } }

/* ── 17. صفحة العمل ────────────────────────────────────────────────────── */
/* إطار الفيلم — لا نسبة مفروضة: يُعرض كما صُوِّر، أفقيًّا كان أو رأسيًّا.
   والمشغّل أصليّ عن قصد: مشغّلٌ مخصّص قرارٌ قائم بذاته، لا شيء يُقحم. */
.film {
  position: relative; margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: var(--bg-3);
  /* كان يمتدّ بعرض القسم كلّه: ‎1267×714‎ على شاشة ‎1440×900‎ — أي ‎88%‎
     عرضًا و‎79%‎ ارتفاعًا. لوحٌ لا مشغّل.
     ‎fit-content‎ ليعانق الإطارُ الفيلمَ مهما كانت نسبته (بعضها رأسيّ)،
     والسقفان يمنعان أن يبتلع الشاشة عرضًا أو طولًا. */
  width: fit-content; max-width: min(100%, 62rem);
}
.film video {
  display: block; width: auto; max-width: 100%;
  height: auto; max-height: 72svh;
}
/* والإطار الداخليّ نفسه على مشغّل الفيلم — لغةٌ واحدة في الصفحات الثلاث */
.film { --fin: clamp(7px, .7vw, 12px); }
.film::after {
  content: ''; position: absolute; inset: var(--fin); z-index: 2;
  border: 1px solid rgba(237, 239, 243, .3);
  border-radius: calc(var(--r) - var(--fin));
  pointer-events: none;
}

.case-hero { position: relative; height: 88svh; overflow: hidden; border-radius: var(--r); display: flex; align-items: flex-end; padding: var(--pad); }
.case-hero__m { position: absolute; inset: 0; z-index: 0; }
.case-hero__m img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); }
.case-hero__m::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,8,11,.95) 2%, rgba(6,8,11,.12) 55%, rgba(6,8,11,.5)); }
.case-hero__in { position: relative; z-index: 2; width: 100%; }
.case-hero__t { font-family: var(--f-mark); font-size: var(--t-xl); font-weight: 800; line-height: var(--lh-mark); max-width: 18ch; margin-block: clamp(.8rem, 2vw, 1.5rem); }
.case-hero__x { max-width: 46ch; color: var(--fg-2); line-height: 1.9; }
.case-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding-top: clamp(1rem, 2.4vw, 1.8rem); border-top: 1px solid var(--line); }
.case-meta dd { font-size: var(--t-sm); margin-top: .25rem; }
.stills { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2.4vw, 2.4rem); padding-block: clamp(3rem, 7vw, 6rem); }
.still--full { grid-column: 1 / -1; } .still--full .mask { aspect-ratio: 16/9; }
.still--half { grid-column: span 6; } .still--half .mask { aspect-ratio: 4/3; }
.next { position: relative; min-height: 52svh; overflow: hidden; border-radius: var(--r); display: grid; place-items: center; text-align: center; padding: var(--sec) var(--pad); margin-inline: calc(var(--pad) * -1); }
.next__bg { position: absolute; inset: 0; z-index: 0; }
.next__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.3); transition: transform 1.5s var(--e), filter .8s; }
.next:hover .next__bg img { transform: scale(1.04); filter: brightness(.45); }
.next__in { position: relative; z-index: 2; }
.next__t { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 400; line-height: var(--lh-disp); margin-top: .7rem; }

/* ── 18. الجوال ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* البنتو يحتاج عرضًا ليُقرأ تشابكه — دونه يصير عمودين متساويين */
  .works { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .works { grid-template-columns: 1fr; }

  /* عمود واحد لا اثنا عشر: الفجوة الأفقية ‎2rem‎ × ‎11‎ فاصلًا = ‎352px‎ —
     أوسع من الحاوية نفسها (‎330‎) عند ‎375px‎. فتنهار المسارات إلى صفر ويصير
     عرض الابن الممتدّ = مجموع الفجوات، أي ‎22px‎ خارج الحدّ. ولهذا كانت
     كتل «عنّي» وحدها ملتصقة بالحافّة اليسرى دون بقيّة الصفحة. */
  .about { grid-template-columns: 1fr; }
  /* الشوريل يخرج عن الحشو عمدًا ليلمس الحافّتين — وعلى شاشة ضيّقة يصير
     العنصر الوحيد الذي يفعل ذلك بين كتل محشوّة، فيُقرأ شذوذًا لا قصدًا. */
  .reel { margin-inline: 0; }
  .about__l, .about__r, .about__svc { grid-column: 1 / -1; }
  /* الصورة قبل الكلام على الشاشة الضيّقة: الشبكة تُسطّح إلى عمود واحد،
     فيقع النصّ أوّلًا بترتيب المصدر — وهو ترتيب السطح لا ترتيب القراءة
     هنا. ‎order‎ يقلبها بلا لمس الوسم. */
  .about__r { order: -1; margin-bottom: clamp(1.6rem, 5vw, 2.6rem); }
  .about__r { max-width: 26rem; }
  .about__svc .svc { grid-template-columns: repeat(2, 1fr); }
  .case-meta { grid-template-columns: repeat(2, 1fr); gap: 1.2rem var(--gap); }
}
@media (max-width: 760px) {
  /* عمودٌ واحد على الهاتف: خانتان بعرض ‎181px‎ تكسران كل وصف سطرين */
  .about__svc .svc { grid-template-columns: 1fr; }
  .works { grid-template-columns: 1fr; gap: 2.6rem; }
  :root { --t-mark: clamp(2.2rem, 13vw, 3.6rem); --sec: 5rem; }
  .nav__links { display: none; }
  .burger { display: block; }
  .nav { gap: 1rem; padding-inline-start: .9rem; }
  .nav__cta { font-size: var(--t-2xs); padding: .5rem .8rem; }
  .hero { justify-content: flex-end; }
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .lock__sub { letter-spacing: .3em; }
  .stats { grid-template-columns: 1fr; gap: 0; padding: clamp(1.6rem, 6vw, 2.4rem) 1rem 0; }
  /* عمود واحد: الفصل يصير أفقيًا بحدّ الخانة السفلي، فلا معنى للشعرة الرأسية */
  .stat + .stat::before { display: none; }
  .stat { display: flex; align-items: baseline; justify-content: space-between; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
  .stat b { font-size: 2.2rem; text-align: start; }
  .works { gap: 3.5rem; }
  .head { flex-direction: column; align-items: flex-start; }
  .cl { grid-template-columns: 1fr; }
  .reel__f { aspect-ratio: 4/5; }
  .still--half, .still--full { grid-column: 1 / -1; }
  .still--full .mask { aspect-ratio: 4/3; }
  .foot__row { flex-direction: column; align-items: flex-start; }
}

/* ── 19. تقليل الحركة ──────────────────────────────────────────────────── */
/* واجهة الجوّال — بناءٌ خاصّ لا نسخةٌ مضغوطة عن السطح.

   اللقطة تملأ العرض في أعلى الشاشة، ويذوب قاعها في تدرّجٍ أسود، والعنوان
   يدخل فوق آخرها — فيُقرأ خارجًا **من** اللقطة لا موضوعًا تحتها. وهذا
   وحده يختصر ارتفاع الواجهة نحو الثلث، ويلغي الحفرة التي كانت بينهما. */
@media (max-width: 900px) {
  .hero {
    /* النصّ في القاع لأن الأشرطة صارت خلفه لا فوقه — والحجاب أثقل هناك */
    justify-content: flex-end;
    padding: calc(var(--pad) + 2.6rem) 0 calc(var(--pad) + 2.6rem);
    /* ارتفاع شريط الزمن عن الحافّة — تشترك فيه الأشرطة كي ينتهي تدرّجها
       عند الخطّ لا تحته. رقمٌ واحد يحكم الاثنين فلا ينفصلان. */
    --rail-y: clamp(1rem, 3.6vw, 1.7rem);
  }
  /* أربعة أشرطة طولية تملأ أعلى الشاشة — الفكرة الأولى، عائدةً للجوّال
     وحده. مصدرها ‎640×1138‎ أي ‎9:16‎، فهي طولية بطبعها لا مقصوصة قسرًا.
     والارتفاع مفروض بـ‎svh‎ لا بنسبة الأبعاد: أربعة أشرطة بعرض ‎105px‎
     على نسبتها الطبيعية ترتفع ‎187px‎ فقط — خمس الشاشة. */
  /* ‎.frames.on‎ لا ‎.frames‎: الأولى تخصيصها ‎(0,2,0)‎ وتضع ‎display: block‎،
     فتغلب أي ‎display‎ نكتبه على الصنف وحده مهما تأخّر في الملفّ — فتبقى
     الأشرطة عمودًا واحدًا بعرض الشاشة بدل أربعة. */
  .frames, .frames.on {
    /* تملأ الواجهة خلفيةً لها لا كتلةً في أعلاها — وتنتهي عند خطّ الزمن
       لا تحته: كان التدرّج يتجاوزه فيظهر شريطٌ داكن أسفل الخطّ. */
    position: absolute; inset: 0 0 var(--rail-y) 0; width: auto; height: auto; margin: 0;
    /* بلا فجوات: الأربعة كادرٌ واحد مشقوق، لا أربع بطاقات متجاورة */
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0; overflow: hidden;
  }
  .f--up, .f--dn, .f--tall { display: block; }
  .frame-p {
    position: relative; left: auto; top: auto; right: auto; bottom: auto;
    width: auto; height: 110%; aspect-ratio: auto; margin: 0;
  }
  /* أخفت: خلفيةٌ لا مشهد. كانت ‎.55‎ حين كانت كتلةً مستقلّة فوق النصّ،
     والآن النصّ فوقها كلّه — فتنزل إلى ‎.32‎ ويبقى ما فيها مقروءًا. */
  .frame > video, .frame > img { filter: grayscale(1) contrast(1.06) brightness(.32); }
  /* إزاحاتٌ متفاوتة تصنع الموزاييك — بلا ‎transform‎ لأن البارالاكس يكتبه */
  .f--mid  { margin-top: -6%; }
  .f--up   { margin-top: 0; }
  .f--dn   { margin-top: -9%; }
  .f--tall { margin-top: -3%; }
  .frame { border-radius: 0; }
  /* الإطار الداخليّ يناقض الذوبان: كادرٌ محدَّد لا لقطةٌ تسيل */
  .frame::after { content: none; }
  /* التدرّج على المجموعة كلّها لا على شريطٍ منها: يذيب قاعها في السواد
     ويعطي العنوان أرضًا يُقرأ عليها. */
  .frames::after {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(6, 8, 11, .42) 0%, rgba(6, 8, 11, .55) 34%,
      rgba(6, 8, 11, .84) 68%, rgba(6, 8, 11, .96) 90%, var(--void) 100%);
  }

  /* النصّ يدخل فوق آخر اللقطة — بهامشٍ سالب لا بموضعٍ مطلق، فيبقى في
     المجرى ويدفع ما بعده بدل أن يطفو فوقه. */
  /* التداخل بنسبة من اللقطة لا من الشاشة: ‎-17vh‎ كانت ‎159px‎ على لقطة
     ارتفاعها ‎323‎ — أي نصفها. الربع يكفي لتُقرأ الكلمة خارجةً منها. */
  /* لا هامش سالب: لم تعد ثمّة كتلةٌ فوقه يدخل تحتها — الأشرطة خلفه */
  .hero__in { margin-top: 0; padding-inline: var(--pad); }
  /* شريط الزمن يرتفع عن الحافّة: كان ملتصقًا بها فيُقصّ نصفه على الجوّال */
  .rail { bottom: var(--rail-y); }
  .lock__t { font-size: clamp(2.1rem, 9.2vw, 3.4rem); line-height: 1.16; }
  .hero__eyebrow { margin-bottom: .55rem; }
  .hero__note { margin-top: .9rem; max-width: 34ch; }

  /* الزرّ يملأ العرض و«عنّي» تحته — لا معلَّقةً بجانبه */
  .hero__cta { flex-direction: column; align-items: stretch; gap: .55rem; margin-top: 1.4rem; }
  .go { justify-content: center; }
  .go--alt { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-rise], .js .w { opacity: 1; transform: none; }
  .js .mask::after { transform: scaleX(0); }
  .js .mask img { transform: none; }
}