/* ═══ قسم About us — اللوحة الخلفية والإطار ═══
   القسم يلي المشهد المثبّت في تدفّق الصفحة، فيصل إليه السكرول طبيعياً
   بعد اكتمال الأنيميشن، ويقصده رابط الشريط #about مباشرةً. */

/* خطّا العنوان — ملفّان محلّيان من مجلّد fonts على سطح المكتب.
   ../../ ضرورية: المسار يُحسب من موضع هذا الملفّ (css/sections/). */
@font-face{
  font-family:'Gragio';
  src:url('../../assets/fonts/gragio.otf') format('opentype');
  font-weight:normal;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'RuthClair';
  src:url('../../assets/fonts/ruthclair.ttf') format('truetype');
  font-weight:normal;font-style:normal;font-display:swap;
}
/* خطّ متغيّر الوزن (100–900) — لفقرات القسم بطلب المستخدم */
@font-face{
  font-family:'Montserrat';
  src:url('../../assets/fonts/montserrat-var.ttf') format('truetype');
  font-weight:100 900;font-style:normal;font-display:swap;
}

.sec-about{
  /* فوق الـ pin (z-index:1) وتحت شريط التنقّل (z-index:7) */
  position:relative;
  z-index:2;
  background:#000;
  width:100%;
  /* نسبة صورة الخلفية نفسها (1920×3426 منذ 2026-08-08 — الخلفية النظيفة
     بلا نصوص مطبوعة) فتظهر اللوحة كاملة بلا قصّ على الشاشات العريضة.
     وعلى الشاشات الطولية جداً (هواتف) يتكفّل min-height بملء الشاشة
     على الأقلّ، وcover تحت يقصّ الفائض الأفقي البسيط بالتساوي. */
  aspect-ratio:1920/3426;
  min-height:100vh;
  overflow:hidden;
}

/* الخلفية صورة <img> لا background-image عمداً: loading="lazy" يؤجّل
   تنزيل 2.2MB حتى يقترب القسم من الشاشة، فلا تُبطئ فتح الصفحة. */
.sec-about__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  pointer-events:none;
  user-select:none;
}

/* إطار العناصر — كلّ ما يُضاف للقسم يوضع هنا فيركب فوق الخلفية.
   يغطّي القسم كاملاً، فإحداثيات العناصر تُحسب من حدود اللوحة نفسها. */
.sec-about__inner{
  position:absolute;
  inset:0;
  z-index:1;
}

/* ── نصّ FRAMEline الأحمر ──
   الملفّ assets/frameline-text.png مقصوص على حدود النصّ تماماً
   (‏1369×518، من reference/frameline text.png)، فالنِّسَب هنا تحكم النصّ
   المرئي نفسه بلا هوامش خفيّة:
     width ← حجم النصّ (نسبة من عرض القسم، مع حدّين للهواتف والشاشات الضخمة)
     top   ← ارتفاعه داخل القسم
   الموضع بنسبٍ من مقاس القسم فيبقى ملازماً للّوحة على كلّ الشاشات. */
.sec-about__brand{
  position:absolute;
  /* المقاس والموضع مقيسان من reference/Final Design.jpg بالبكسل لا
     بالتقدير: التصميم يضع الشعار بمقاس 1:1 على لوحة عرضها 1920 —
     قلب النصّ الأحمر 1288px أي ‎67.1%‎ من العرض، وقلب الملفّ المقصوص
     ‎94.4%‎ من عرضه، فالعرض المطلوب ‎67.1 ÷ 0.944 = 71%‎.
     التوسيط بالهوامش لا بـtranslateX(-50%)‎: الهوامش تُحسب في التخطيط
     فتُثبَّت على بكسل صحيح والصورة تبقى حادّة — وright:‎.8%‎ يزيح
     المركز إلى ‎49.6%‎ لأنّ الضفيرة تميل بالملفّ قليلاً عن مركز نصّه. */
  left:0;
  right:.8%;
  margin:0 auto;
  /* نفس بكسلات التصميم — النسبة على ارتفاع اللوحة الجديدة 3426 */
  top:3.89%;
  width:max(240px, 71%);
  height:auto;
  pointer-events:none;
  user-select:none;
}

/* ── الظهور الموحّد لعناصر القسم ──
   كلّ عنصر عليه js-reveal: يبدأ أخفض قليلاً وشفّافاً، وحين يضيف
   js/about.js الصنف is-in (مرّة واحدة، لا يُنزَع) يصعد ويكتمل.
   المدّتان أبطأ من إيقاع الشريط بطلب المستخدم — ظهور مهيب لا خاطف.
   نهاية الحركة transform:none لا translateY(0)‎: «لا تحويل» يعيد العنصر
   لمسار الرسم العادي فيُرسَم نصّه حادّاً على شبكة البكسل. */
.sec-about .js-reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 1.9s cubic-bezier(.16,.72,.24,1),
             transform 2.3s cubic-bezier(.16,.72,.24,1);
}
.sec-about .js-reveal.is-in{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  .sec-about .js-reveal{transition-duration:.01ms}
  .sec-about__copy p{transition-duration:.01ms;transition-delay:0s}
}

/* ── فقرات «We don't just create…» ──
   نصّ Gragio بلون أخضر مقيس من التصميم (#018c74). المقاسات من
   reference/Final Design.jpg: بداية الكتلة x=118 ⇒ ‎6.15%‎، حجم الخطّ
   مشتقّ من عرض الأسطر الأربعة المقيسة ‎(≈26.3px على 1920 ⇒ 1.37vw)‎،
   وتباعد الأسطر 37.5px ⇒ ‎1.43‎، وفاصل الفقرات سطر فارغ كامل.
   فواصل الأسطر <br> صريحة لتطابق التصميم حرفياً. */
.sec-about__copy{
  position:absolute;
  /* أسلوب التصميم نفسه: كتلة يسارية بمحاذاة يسار عند حافّة التصميم
     (‏x=118 ⇒ ‎6.15%‎)، منزولة قليلاً عن موضع التصميم بطلب المستخدم،
     والخطّ باقٍ GC EpicPro. الحجم ‎1.05vw‎: أكبر من مقاس المطابقة
     الحرفية (‏.91vw‎) ليَبين، وأطول سطر يقف عند ‎≈55%‎ فلا يعتلي
     الجزء المضاء من الوجه. */
  /* مواضع الخلفية الجديدة (1920×3293): الكتلة تبدأ عند x=100 وقمّة
     حبرها عند y=1418، والفقرات الثلاث تتوزّع بهوامش تُنزل كلّ كتلة
     على موضعها المقيس فتقع الفواصل المرسومة في الخلفية بين الكتل. */
  left:5.21%;
  top:41.23%;
  width:max-content;
  direction:ltr;
  text-align:left;
  /* Gragio ← GC EpicPro ← Montserrat (2026-08-08 بطلب المستخدم):
     الخطّ الهندسي نفسه المستعمل في فقرات التصميم، بأحرفه الصغيرة */
  font-family:'Montserrat','Segoe UI',system-ui,sans-serif;
  font-weight:500;
  font-size:1.18vw;
  line-height:1.28;
  letter-spacing:0;
  /* لون فقرات التصميم الأصلي نفسه — معيّن من قلب حروف
     reference/Final Design.jpg (أنصع ربع بكسلات المقطع الثاني) */
  color:#00937a;
  white-space:nowrap;
  /* ظلّ خفيف يفصل النصّ عن صورة البورتريه فيبقى مقروءاً فوقها */
  text-shadow:0 2px 14px rgba(0,0,0,.6), 0 0 4px rgba(0,0,0,.45);
}
/* هوامش بالقياس: قمّة الكتلة الثانية بعد 159px من الأولى، والثالثة بعد
   427px — مطروحاً منها ارتفاع ما قبلها بأسطرنا نحن (29px للسطر) */
.sec-about__copy p{position:relative}
/* الفقرة الوسطى موسَّطة رأسياً بين الخطّين بالتساوي (بطلب المستخدم):
   نزلت ‎+23px‎ (‏1.02em) وهامش الثالثة نقص بمثلها فبقي كلّ ما عداها
   في مكانه، وإزاحة الخطّ الأوّل عُوّضت في قاعدته تحت. */
.sec-about__copy p:nth-child(2){margin-top:5.48em}
.sec-about__copy p:nth-child(3){margin-top:5.7em}

/* ── ظهور الفقرات المتمهّل عند النزول إليها ──
   الحاوية نفسها تُحيَّد عن أنماط js-reveal العامّة (القاعدة تلي العامّة
   في الملفّ فترجحها)، والظهور على الفقرات الثلاث نفسها: كلّ كتلة تصعد
   وتكتمل ببطء بعد سابقتها، ومعها خطّها الفاصل لأنّه مربوط بها. */
.sec-about .sec-about__copy{
  opacity:1;
  transform:none;
  transition:none;
}
.sec-about__copy p{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 2.4s cubic-bezier(.16,.72,.24,1),
             transform 2.6s cubic-bezier(.16,.72,.24,1);
}
.sec-about__copy p:nth-child(2){transition-delay:.5s}
.sec-about__copy p:nth-child(3){transition-delay:1s}
.sec-about .sec-about__copy.is-in p{
  opacity:1;
  transform:none;
}

/* الخطّان الرفيعان بين الكتل — بمقاسات التصميم (y=1522 و1782 على
   لوحة 1920، عرض 596px = 31vw). أُزيلا بطلب المستخدم ثمّ أُعيدا بطلبه. */
.sec-about__copy p:nth-child(2)::before,
.sec-about__copy p:nth-child(3)::before{
  content:"";
  position:absolute;
  left:0;
  width:31vw;
  height:1px;
  background:rgba(255,255,255,.3);
}
.sec-about__copy p:nth-child(2)::before{top:-3.18em}
.sec-about__copy p:nth-child(3)::before{top:-2.52em}

/* ── السطور الثلاثة أسفل القسم ──
   GC EpicPro صغير بلون رمادي فاتح، كلّ عبارة في موضعها المقيس من
   التصميم (المواضع يسار كلّ عنقود نصّي على لوحة 1920). */
.sec-about__taglines{
  position:absolute;
  left:0;
  right:0;
  /* قمّة أحرف السطور عند y≈2435 على لوحة 3426 */
  top:70.99%;
  height:1em;
  direction:ltr;
  font-family:'GC EpicPro','Segoe UI',system-ui,sans-serif;
  font-weight:normal;
  font-size:.74vw;
  letter-spacing:.13em;
  color:#b9b9bc;
}
/* الشفافية 70% على العبارات نفسها لا على الحاوية: حركة الظهور تملك
   شفافية الحاوية (0→1) فلا تتعارضان، والحاصل النهائي 70% */
.sec-about__taglines span{position:absolute;top:0;white-space:nowrap;opacity:.7}
.sec-about__taglines span:nth-child(1){left:19.17%}
.sec-about__taglines span:nth-child(2){left:45.42%}
.sec-about__taglines span:nth-child(3){left:67.86%}

/* ── شبكة الموك-أب: شريطان دائران يتأثّران بالسكرول ──
   مقاسة من التصميم: الصفّ الأوّل عند y=2512 بارتفاع 360px، فجوة 16px،
   الصفّ الثاني 369px — كنسب من لوحة 1920×3426. الحركة كلّها من محرّك
   js/about.js: انزلاق زمنيّ دائم (الصفّ الأوّل يميناً والثاني يساراً،
   data-marquee-dir في index.html) — مستقلّ عن السكرول تماماً: يزحف
   بسرعة ثابتة من لحظة تحميل الصفحة ولا يتسارع بالتمرير.
   السرعة قابلة للضبط من الكونسول: __mockups.drift */
.sec-about__mockups{
  position:absolute;
  left:0;
  right:0;
  /* هامش تنفّس (~2vw) عن حافّة المنطقة العلوية، ومثله يبقى تحت
     الصفّين قبل قاع القسم — بطلب المستخدم: لا تلتصق الصور بالحوافّ */
  top:74.44%;
}
/* الحاوية نفسها ثابتة — تبطل عليها أنماط js-reveal العامّة (الأولوية
   بالترتيب: هذه القاعدة تلي قاعدة ‎.sec-about .js-reveal‎ في الملفّ)،
   وis-in عليها يُشغّل المحرّك (يقرأه js/about.js). */
.sec-about .sec-about__mockups{
  opacity:1;
  transform:none;
  transition:none;
}
/* الصفّان يملآن منطقة الشبكة مع هامش رقيق فوقهما وتحتهما:
   المنطقة ≈ ‎47.6vw‎ − هامشا ‎1vw‎ ⇒ ‎45.55vw‎ للصفّين والفجوة */
.sec-about__mockups-row{
  overflow:hidden;
  width:100%;
  height:21.3vw;
  /* direction:ltr ضرورية: الصفحة RTL فيرصف flex الشريطَ من اليمين
     ويتدلّى خارج الحاوية يساراً — ومحرّك الإزاحة في js/about.js يفترض
     شريطاً مرسوّاً على اليسار؛ بدونها يختفي الصفّ الثاني بالكامل. */
  direction:ltr;
}
.sec-about__mockups-row--bot{
  height:21.45vw;
  margin-top:.85vw;
}
/* الشريط: مجموعتان متطابقتان — المحرّك يلفّ الإزاحة على عرض مجموعة
   واحدة فلا تظهر وصلة. الفجوة عند الوصلة من padding-inline-end على
   المجموعة (لا gap على الشريط) كي يكون عرض الشريط ضعف عرض المجموعة
   تماماً. */
.sec-about__mockups-track{
  display:flex;
  width:max-content;
  height:100%;
  will-change:transform;
  /* لا وضع ابتدائيّ خارج الشاشة: الشريطان ظاهران ممتلئين من البداية
     (أُزيلت مرحلة الدخول بطلب المستخدم) والمحرّك يحرّكهما عند الوصول */
}
.sec-about__mockups-group{
  display:flex;
  gap:.83vw;
  padding-inline-end:.83vw;
  height:100%;
}
/* نسبة كلّ صورة من width/height في وسمها فيأخذ الكولاج مقاسه الصحيح
   قبل تنزيل الصور المؤجَّلة */
.sec-about__mockups-group img{
  height:100%;
  width:auto;
  display:block;
  border-radius:clamp(6px, .52vw, 12px);
  user-select:none;
  object-fit:cover;
}

/* ── العنوان: FRAMELINE was BUILT, FRAME by FRAME. ──
   المقاسات والمواضع مقيسة من reference/Final Design.jpg على لوحة 1920:
   الأبيض GC EpicPro بحجم ‎61.5px ≈ 3.2vw، و«was» بـGragio أكبر منه
   (‏1.42em)، و«by» بـRuthClair حرف زخرفي ضخم (4.3em) راكب على السطرين.
   الألوان معيّنة من بكسل التصميم نفسه. */
.sec-about__built{
  position:absolute;
  /* التوسيط بالهوامش (left:0 + right:2% ⇒ المركز على 49%) بدل
     translateX(-50%)‎ — الهوامش تُثبَّت على بكسل صحيح فيبقى النصّ
     حادّاً، وتحويل الظهور ينتهي على none تحت للسبب نفسه. */
  left:0;
  right:2%;
  margin:0 auto;
  /* نفس بكسلات التصميم على اللوحة الأطول (1008.9px ÷ 3426) */
  top:29.45%;
  width:max-content;
  text-align:center;
  direction:ltr;
  font-family:'GC EpicPro','Segoe UI',system-ui,sans-serif;
  font-weight:normal;
  font-size:3.2vw;
  letter-spacing:.06em;
  line-height:1;
  color:#fff;
  white-space:nowrap;
}
.sec-about__built-l1,
.sec-about__built-l2{display:block}
.sec-about__built-l2{margin-top:.025em}
.sec-about__built-was{
  font-family:'Gragio','GC EpicPro',serif;
  font-style:normal;
  font-size:1.42em;
  /* line-height:0 كي لا يرفع الحرفُ الأكبر ارتفاعَ السطر الأبيض */
  line-height:0;
  letter-spacing:0;
  text-transform:lowercase;
  color:#cb190a;
}
/* «by»: line-height:0 كي لا يوسّع الحرفُ الضخم سطرَه — يرسم فوق السطرين
   ويفيض عنهما كما في التصميم. vertical-align يضبط قاعدته تحت قاعدة
   السطر الثاني. */
.sec-about__built-by{
  font-family:'RuthClair','GC EpicPro',cursive;
  font-style:normal;
  font-size:4.3em;
  line-height:0;
  letter-spacing:0;
  text-transform:lowercase;
  color:#016b59;
  vertical-align:-.23em;
  margin:0 .05em 0 .07em;
}
@media (prefers-reduced-motion:reduce){
  .sec-about__built{transition-duration:.01ms}
}


/* ═══ الهواتف واللوحيّات: نسخة طبق الأصل من سطح المكتب ═══
   كلّ عناصر القسم مقيسة بنسبٍ من عرض اللوحة (مواضع %‎ ومقاسات vw)،
   فهي تتصاغر متناسبةً مع الشاشة وحدها — التركيب نفسه تماماً.
   الشيء الوحيد الذي كان يكسر المطابقة: min-height:100vh يمطّ القسم
   أطولَ من نسبة اللوحة على الشاشات الطولية، فتنزاح العناصر (المرصوفة
   بنسبٍ من الارتفاع) عن مواضعها المصمَّمة وتُقصّ الخلفية بcover.
   بإلغائه تبقى النسبة 1920:3426 محفوظة فيطابق الهاتف سطحَ المكتب. */
@media (max-width:1024px){
  .sec-about{min-height:0}
}

/* ═══ الهواتف وحدها: نفس التركيب بمقاسات تُقرأ ═══
   على 390px يصير قياس المطابقة الحرفية 4.6px للفقرات و2.9px للسطور
   الثلاثة — تركيبٌ صحيح لا يُقرأ. هذه الكتلة تُطيل القسم ليتّسع لنصّ
   بحجم حقيقي، وتُبقي الترتيب كما هو: شعار في الأعلى، عنوان، فقرات
   يسارية والبورتريه إلى يمينها، ثم السطور الثلاثة فالموك-أب.

   لماذا الإطالة لا تُزيح شيئاً عن اللوحة: الخلفية 'cover'، وحين تكون
   نسبة القسم أطول من نسبة اللوحة (‏1:1.784) تُقاس اللوحة بارتفاعها،
   فتنطبق رأسياً على القسم 1:1 ويقع القصّ أفقياً وحده. أي أنّ نِسَب
   top تظلّ تشير إلى معالم اللوحة نفسها تماماً كما في سطح المكتب.
   عند 1:2.6 يبقى ‎68.6%‎ من عرض اللوحة مرئياً، والبورتريه (‏58–85%‎ من
   عرضها) داخل النافذة كاملاً مع object-position‏ 58%. أطولُ من ذلك يقصّ
   الوجه: عند 1:3 يبقى ‎59.5%‎ فقط فتضيع علامة F من يمينه. */
/* ═══ الهواتف: تنفيذ تصميم المصمّم الطوليّ حرفياً ═══
   الخلفية هنا ليست لوحة الديسكتوب بل التركيب الطوليّ الذي سلّمه
   المصمّم (‏assets/bg-about-mobile.jpg، ‏1080×3983، يُختار بـ<picture>
   في index.html). كلّ نسبة أدناه مقيسة من ملفّ التصميم المركَّب بطرحه
   من طبقة الخلفية النظيفة وتحليل ما تبقّى — لا تقدير فيها:

     الشعار      y 17.87–31.02%   x 10.56–87.59%
     العنوان     y 54.92–57.53%   x 10.37–88.70%
     فقرة ①      y 66.27–67.62%   x 6.67–47.96%
     فقرة ②      y 72.79–78.87%   x 6.67–44.63%
     فقرة ③      y 83.08–92.92%   x 7.04–43.89%
     السطور ③    y 97.84%         x 7.04–94.44%

   القسم أطول من اللوحة بنسبة 15% ليتّسع لشريطي الموك-أب تحتها (وهما
   ليسا في تصميم المصمّم)، ولذلك:
     ارتفاع القسم = 3.688 × 1.15 = 4.241 من عرضه
     الخلفية تشغل ‎86.96%‎ من أعلاه — فتظهر اللوحة كاملة بلا قصّ
     .sec-about__inner ينتهي عند الحدّ نفسه، فتُحسب نِسَب العناصر على
     صندوق اللوحة مباشرةً وتطابق أرقام المصمّم أعلاه بلا تحويل. */
@media (max-width:560px){
  /* ارتفاع القسم = اللوحة (‏3.688 × العرض) + شاشة كاملة لشريطي الموك-أب
     تحتها. اللوحة تشغل الجزء الأوّل بالضبط فتظهر كاملة بلا قصّ، و
     .sec-about__inner ينتهي عند حدّها فتُحسب نِسَب العناصر عليها. */
  .sec-about{aspect-ratio:auto; height:calc(368.8vw + 70vh)}
  .sec-about__bg{height:368.8vw; object-position:center top}
  .sec-about__inner{bottom:70vh}

  /* ① الشعار — الترتيب ذو السطرين (يُختار بـ<picture>)، بعرض التصميم
     نفسه ‎77%‎ وموسَّطاً في نطاقه المقيس ‎17.87–31.02%‎: نسبته 1.432
     تعطي ارتفاعاً ‎14.58%‎ من اللوحة، فيبدأ عند ‎17.16%‎. */
  .sec-about__brand{left:10.56%; right:auto; margin:0; width:77%; top:17.16%}

  /* ② العنوان — موسَّط على 49.5%‎ كما في التصميم، والحجم يجعل عرض
     السطر ‎≈78%‎ مثله */
  .sec-about__built{
    left:0; right:1%; margin:0 auto;
    top:54.5%;
    /* 4.9vw يجعل عرض السطر ‎≈78.3%‎ — عرضه في التصميم بالضبط */
    font-size:4.9vw;
    letter-spacing:.03em;
  }

  /* ③ الفقرات — العمود بعرض التصميم، وكلّ فقرة مرصوفة على نسبتها
     المقيسة: أدقّ من الهوامش لأنّ الالتفاف يغيّر ارتفاع الفقرات. */
  /* الكتلة موسَّطة رأسياً بين قاع العنوان (‏57.53%‎) وقمّة السطور الثلاثة
     (‏97.84%‎) بـflex لا بموضع محسوب: يبقى التوسيط صحيحاً مهما تغيّر
     ارتفاع الفقرات بالالتفاف أو بتغيّر الخطّ. */
  .sec-about__copy{
    left:6.8%;
    top:58.6%;
    bottom:4.6%;
    width:41%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    white-space:normal;
    text-align:justify;
    hyphens:auto;
    /* الحجم مشتقّ من التصميم لا مختار: عند 2.26vw تقع الفقرات الثلاث
       على نطاقاتها المقيسة (‏1.35%‎ و‎6.08%‎ و‎9.84%‎ من ارتفاع اللوحة).
       أكبر منه يطوّلها فتزحف على السطور الثلاثة أسفلها. */
    font-size:clamp(7px, 2.26vw, 13px);
    line-height:1.38;
  }
  /* position:relative لا static: الخطّ الفاصل ::before يرتكز على الفقرة
     نفسها، فلو صارت static ارتكز على الحاوية وانزاح. */
  .sec-about__copy p{position:relative; top:auto; left:auto; width:auto; margin:0}
  /* فجوتان متساويتان (الهوامش الأصلية ‎5.48em و‎5.7em تخصيصها أعلى
     فتُبطَل هنا بنفس التخصيص)، والخطّ الفاصل في منتصف كلٍّ منهما
     تماماً — كان أقرب إلى الفقرة التالية فبدت الفجوة فوقه هوّة. */
  .sec-about__copy p:nth-child(2),
  .sec-about__copy p:nth-child(3){margin-top:3em}
  .sec-about__copy p:nth-child(2)::before,
  .sec-about__copy p:nth-child(3)::before{width:88%; top:-1.5em}

  /* ④ السطور الثلاثة — صفّ موزَّع بين حدّي التصميم */
  .sec-about__taglines{
    top:97.84%;
    left:7.04%;
    right:5.56%;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    height:auto;
    font-size:clamp(5px, 1.5vw, 9px);
    letter-spacing:.06em;
  }
  .sec-about__taglines span{position:static}

  /* ⑤ الموك-أب — شاشة كاملة وحده تحت اللوحة (ليس في تصميم المصمّم).
     top:100%‎ هو حدّ اللوحة تماماً، والشريطان موسَّطان في الشاشة.
     الارتفاع بـvh لا vw: المطلوب أن يملأ الشاشة لا أن يتبع العرض. */
  .sec-about__mockups{
    top:100%;
    /* ‏70vh لا 100vh: مع السطور الثلاثة فوقها يقع الكلّ داخل شاشة واحدة
       (‏من قمّة السطور إلى قاع القسم ‎622px على هاتف 844)، ولا يبقى فراغ
       أسود بينهما. */
    height:70vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    /* خلفية الشريط: منطقة النار والظلّ من اللوحة الأصلية — هي التي كانت
       خلف الموك-أب قبل أن ينتقل إلى شريطه. قاع لوحة المصمّم أسود صافٍ
       (‏#020202) وقمّة هذه القصاصة سوداء مثله، فالوصلة غير مرئية. */
    background-image:url('../../assets/bg-mockups-mobile.jpg');
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
  }
  .sec-about__mockups-row{height:26vh}
  .sec-about__mockups-row--bot{height:26vh; margin-top:2vh}
}