@charset "UTF-8";
/* ==========================================================================
   شركة هرم الانشاء — التوقيعات البصرية
   --------------------------------------------------------------------------
   ورقة رابعة تُحمَّل **بعد** main.css و sections.css و dark.css، فتفوز
   قواعدها عند تساوي الوزن بلا ‎!important‎ في أي سطر.

   لماذا وُجدت: التصميم نظيف لكنه كان يتبع القالب المعتاد — بطل، ثم عنوان
   في الوسط، ثم شبكة بطاقات، ثم قسم داكن، ثم شبكة أخرى. زائرٌ رأى عشرة
   مواقع شركات يشعر أنه رآه من قبل. المطلوب **شخصية بصرية** لا مزيد من
   التنظيف، فكانت هذه التوقيعات الخمسة.

   قواعد كتبتُها على نفسي قبل أن أكتب سطراً:

   ١) لا ماركب ولا PHP: كل توقيع يعمل على الأصناف الموجودة كما هي،
      عبر ‎::before‎ و‎::after‎ و‎clip-path‎ و‎counter‎ فقط.
   ٢) لا محتوى: ولا حرفاً واحداً من نصّ الشركة يُضاف أو يُحذف. الرقم
      الوحيد الذي يظهر هنا مولَّد من عدّاد CSS، وهو زخرفة لا معلومة،
      ولذلك ‎aria-hidden‎ بطبيعته (محتوى العنصر الزائف لا يُقرأ كمعنى،
      وكل عنصر زائف هنا ‎pointer-events: none‎ ولا يُنتقى بالفأرة).
   ٣) لا صخب: شركة مقاولات تتعامل مع جهات حكومية. أكبر حركة هنا تكبير
      قطعٍ بمقدار ١٢بك، وأقوى نقشٍ خلف نصّ شفافيته ٧٫٥٪، ولا شيء يومض
      أو يدور أو يتمايل.
   ٤) الإتاحة: كل **حركة** تتوقف عند ‎prefers-reduced-motion‎ فتظهر
      التوقيعات ساكنة كاملة بلا انتظار، ولا يمسّ شيء منها نسبة تباين —
      النقوش خلف النصّ مقنّعة لتختفي حيث يمرّ الحرف، وكل رسم ملوّن
      قيست نسبته وهي فوق حدّ الرسوم ٣:١.
   ٥) الرموز: كل لون من رموز main.css / dark.css، فيتبع التوقيع لوحة
      لوحة التحكم تلقائياً وينقلب على السطح الداكن بلا قاعدة مكرّرة.

   الفهرس
   ٠١  رموز التوقيع
   ٠٢  التوقيع الأول — الفصّ السداسي (من الشعار)
   ٠٣  التوقيع الثاني — زاوية مقطوعة في صور المشاريع
   ٠٤  التوقيع الثالث — ترقيم فصول الصفحة الرئيسية
   ٠٥  التوقيع الرابع — الخيط البرونزي الذي يُرسم عند الظهور
   ٠٦  التوقيع الخامس — الحافة القطرية بين سطحين
   ٠٧  تقليل الحركة والطباعة
   ========================================================================== */


/* ==========================================================================
   ٠١ — رموز التوقيع
   --------------------------------------------------------------------------
   لا لون هوية مكتوب برقمه هنا: البرونز والأخضر والحبر كلها من رموز
   main.css، والنسخة الداكنة تأخذ البرونز الفاتح ‎--h-accent-on-dark‎
   الذي حسبته dark.css ليبقى فوق ٣:١ على الأخضر البترولي. الاستثناء
   الوحيد ‎#fff‎ في حجاب الضوء على السطح الداكن — وهو أبيض خالص لا لون
   هوية، وبنفس صيغة ‎rgba(255,255,255,…)‎ التي يكتبها dark.css نفسه.
   ========================================================================== */
:root {

	/* مسدّس الشعار: رأس علوي وسفلي وضلعان رأسيان — نسبة القطع ٢٦٪
	 * مقيسة من ‎assets/img/logo-dark.png‎ نفسه لا مقدّرة. */
	--hg-hex: polygon(50% 0%, 100% 26%, 100% 74%, 50% 100%, 0% 74%, 0% 26%);

	/* عمق الزاوية المقطوعة في صور المشاريع، وعمقها عند المرور */
	--hg-facet: clamp(22px, 2.4vw, 34px);
	--hg-facet-lg: clamp(30px, 3.4vw, 46px);

	/* الخيط البرونزي */
	--hg-bronze: var(--h-accent);
	--hg-rule-h: 3px;
	--hg-rule-w: 64px;
	--hg-draw: 820ms;

	/* رقم الفصل خلف العنوان */
	--hg-watermark: rgba(var(--h-primary-rgb), .055);

	/* الرقاقة السداسية طبقتان: خيط بلون برونزي شفاف، وأرضية **مصمتة**
	 * تحته. لو تُركت الأرضية شفافة لتراكم اللونان في الداخل وذاب الخيط
	 * في الأرضية فلا يُرى — ولهذا تُحسب الأرضية بالمزج فوق أرضية
	 * البطاقة التي تعيش الرقاقة داخلها دائماً.
	 * القيم ٤٪ و٦٪ ليست اختراعاً: هي نفسها التي كتبها dark.css
	 * للبطاقة ولدائرة الأيقونة، فتبقى النتيجة ‎#3B5455‎ كما وثّقها. */
	--hg-chip-base: var(--h-white);
	--hg-chip-fill: color-mix(in srgb, var(--h-primary) 6%, var(--hg-chip-base));
	--hg-chip-line: color-mix(in srgb, var(--hg-bronze) 30%, transparent);

	/* عمق الحافة القطرية */
	--hg-seam: clamp(26px, 3.2vw, 54px);
}

/* =====================================================================
 * احتياط للمتصفحات التي لا تعرف color-mix():
 * بدونها تسقط الرموز أعلاه إلى قيم باطلة فتختفي مسدّسات الأيقونات تماماً.
 * القيم أدناه هي ناتج المزج نفسه محسوباً مسبقاً.
 * ================================================================== */
@supports not (color: color-mix(in srgb, red, blue)) {

	:root {
		--hg-chip-base: #FFFFFF;
		--hg-chip-fill: #F1F4F4;
		--hg-chip-line: rgba(149, 123, 105, .30);
	}

	:is(.section--dark, [data-surface="dark"]) {
		--hg-chip-base: #324C4D;
		--hg-chip-fill: #3B5455;
		--hg-chip-line: rgba(200, 172, 151, .34);
	}
}

/* السطح الداكن يقلب الرموز وحدها — لا قاعدة واحدة تتكرر بعدها */
:is(.section--dark, [data-surface="dark"]) {
	--hg-bronze: var(--h-accent-on-dark);
	--hg-watermark: rgba(255, 255, 255, .055);

	/* على الأخضر البترولي تحتاج حافة الرقاقة صوتاً أعلى قليلاً لتُرى،
	 * كما فعل dark.css بحدّها الأبيض قبلها. */
	--hg-chip-base: color-mix(in srgb, #fff 4%, var(--h-primary));
	--hg-chip-fill: color-mix(in srgb, #fff 6%, var(--hg-chip-base));
	--hg-chip-line: color-mix(in srgb, var(--hg-bronze) 34%, transparent);
}


/* ==========================================================================
   ٠٢ — التوقيع الأول: الفصّ السداسي
   --------------------------------------------------------------------------
   الفكرة ومن أين استُلهمت: شعار الشركة ليس دائرة ولا مربّعاً، بل مسدّس
   مدبّب من أعلى وأسفل بضلعين رأسيين، والحرف H بداخله. الموقع كان يستعمل
   دوائر جاهزة لكل رقاقة أيقونة — وهي أكثر شكل محايد في العالم. فأخذت
   صورة الشعار الظليّة وجعلتها **وحدة الشكل** المتكررة في الموقع: كل
   رقاقة أيقونة (الخدمات، المزايا، مراحل العمل) صارت مسدّس الشعار نفسه.

   لماذا طبقتان: على السطح الداكن كانت الرقاقة تعتمد على حدّ ‎border‎
   ليفصلها عن الأخضر، و‎clip-path‎ يقصّ الحدّ فيتركه أشلاء على الأضلاع
   المائلة. فصار المسدّس طبقتين: الخارجية بلون الخيط، والداخلية ‎inset:1px‎
   بلون أرضية الرقاقة — فينتج خيط شعري يتبع المسدّس تماماً، وتبقى نسبة
   التمييز التي حسبتها dark.css كما هي.

   مقياسان لنفس الشكل: الرقاقة (٥٦–٧٨بك) ونقش شريط الإحصاءات (٩٦بك)،
   وبينهما الزاوية المقطوعة في التوقيع التالي — وهي ضلع واحد من نفس
   المسدّس. فيقرأ الزائر «هذا الموقع مبنيّ من شكل واحد» بلا أن ننطقها.
   ========================================================================== */
/* ملاحظة على الوزن: sections.css و dark.css يكتبان ‎border‎ و‎background‎
 * لهذه الرقاقات بوزن صنفين، فكُتبت المحدِّدات هنا بوزن صنفين كذلك
 * (الأب + الرقاقة) لتفوز بترتيب التحميل وحده لا بـ‎!important‎. */
:is(.service-card, .why-item, .about-step, .pillar) :is(
	.service-card__icon,
	.why-item__icon,
	.about-step__icon,
	.pillar__icon
) {
	position: relative;
	border: 0;
	border-radius: 0;
	background: var(--hg-chip-line);
	clip-path: var(--hg-hex);
	transition: background-color var(--h-t), transform var(--h-t);
}

/* الطبقة الداخلية: أرضية الرقاقة نفسها، منزاحة ١بك فتترك خيطاً شعرياً */
:is(.service-card, .why-item, .about-step, .pillar) :is(
	.service-card__icon,
	.why-item__icon,
	.about-step__icon,
	.pillar__icon
)::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 1px;
	background: var(--hg-chip-fill);
	clip-path: var(--hg-hex);
	transition: background-color var(--h-t);
	pointer-events: none;
}

/* الأيقونة نفسها فوق الطبقتين */
:is(.service-card, .why-item, .about-step, .pillar) :is(
	.service-card__icon,
	.why-item__icon,
	.about-step__icon,
	.pillar__icon
) > * {
	position: relative;
	z-index: 1;
}

/* المرور: الخيط يشتعل برونزاً والأرضية تدفأ. القاعدة نفسها مكرّرة بوزن
 * السطح الداكن لأن dark.css يكتب أرضية المرور بوزن أعلى — والتكرار هنا
 * وزنٌ لا لون: القيمتان تأتيان من نفس الرمزين. */
:is(.services .service-card, .why .why-item, .about .about-step, .pillars .pillar):hover :is(
	.service-card__icon,
	.why-item__icon,
	.about-step__icon,
	.pillar__icon
),
:is(.section--dark, [data-surface="dark"]) :is(.services .service-card, .why .why-item, .about .about-step, .pillars .pillar):hover :is(
	.service-card__icon,
	.why-item__icon,
	.about-step__icon,
	.pillar__icon
) {
	/* الخلطة مكتوبة هنا لا في رمز عند :root، لأن ‎var()‎ داخل رمزٍ
	 * يُستبدل عند تعريفه فيتجمّد على برونز السطح الفاتح ولا ينقلب. */
	background: rgba(149, 123, 105, .40);
	background: color-mix(in srgb, var(--hg-bronze) 40%, transparent);
}

.service-card:hover .service-card__icon::before,
.why-item:hover .why-item__icon::before,
.about-step:hover .about-step__icon::before {
	background: var(--hg-chip-fill);
	background: color-mix(in srgb, var(--hg-bronze) 10%, var(--hg-chip-base));
}

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

   التباين: النقش مقنّع بتدرّج شعاعي يفرّغ منتصف الشريط تماماً، فحيث
   يمرّ الرقم لا يوجد نقش أصلاً — النسبة المحسوبة في dark.css تبقى
   حرفياً كما هي، والنقش لا يعيش إلا في الهوامش الفارغة.
   -------------------------------------------------------------------------- */
.section.stats,
.page-hero {
	position: relative;
	isolation: isolate;
}

.section.stats::before,
.page-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69.28' height='120' viewBox='0 0 69.28 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.075' stroke-width='1'%3E%3Cpath d='M0 20 L34.64 0 L69.28 20'/%3E%3Cpath d='M0 20 L0 60'/%3E%3Cpath d='M69.28 20 L69.28 60'/%3E%3Cpath d='M0 60 L34.64 80 L69.28 60'/%3E%3Cpath d='M34.64 80 L34.64 120'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 96px 166px;
	-webkit-mask-image: radial-gradient(115% 135% at 50% 50%, transparent 0%, #000 74%);
	mask-image: radial-gradient(115% 135% at 50% 50%, transparent 0%, #000 74%);
	pointer-events: none;
}

/* على الجوال يصير الشريط عمودياً طويلاً فيتّسع النقش ويعلو صوته:
 * خليّة أصغر وحدّة أخفت حتى يبقى نقشاً لا شبكة. */
@media (max-width: 767px) {

	.section.stats::before,
	.page-hero::before {
		opacity: .62;
		background-size: 66px 114px;
	}
}

.section.stats > .container {
	position: relative;
	z-index: 1;
}


/* ==========================================================================
   ٠٣ — التوقيع الثاني: زاوية مقطوعة في صور المشاريع
   --------------------------------------------------------------------------
   الفكرة ومن أين استُلهمت: نفس قطع الشعار، لكن مرّة واحدة بدل ستّ.
   شبكة «أعمالنا» هي واجهة الشركة الحقيقية، وكانت ستّ مستطيلات بزوايا
   دائرية — أي بطاقة مشروع في أي موقع مقاولات. قصّة زاوية واحدة في أسفل
   الصورة تفتح فيها وتداً من أرضية البطاقة، فتصير الصورة **فصّاً** لا
   مستطيلاً، ويتوازن القطعُ مع شارة التصنيف القابعة في الزاوية المقابلة.

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

   العمق: عند المرور يتعمّق القطع من ‎--hg-facet‎ إلى ‎--hg-facet-lg‎ في
   ٧٠٠مث. لا إمالة ولا تحريك للصورة داخل الإطار — البطاقة أصلاً ترتفع
   ٥بك وتكبّر صورتها ٤٪، وزيادة حركة ثالثة تشتّت.

   ‎clip-path‎ يُطبَّق على ‎.project-card__media‎ لا على البطاقة، فيبقى
   ظلّ البطاقة وحدّها وزواياها الدائرية سليمة تماماً.
   ========================================================================== */
.project-card__media {
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		var(--hg-facet) 100%,
		0 calc(100% - var(--hg-facet))
	);
	transition: clip-path var(--h-t-slow);
}

.project-card:hover .project-card__media,
.project-card:focus-within .project-card__media {
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		var(--hg-facet-lg) 100%,
		0 calc(100% - var(--hg-facet-lg))
	);
}

/* في الإنجليزية تنعكس الجهات: القطع ينتقل إلى الزاوية السفلية اليمنى */
[dir="ltr"] .project-card__media {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--hg-facet)),
		calc(100% - var(--hg-facet)) 100%,
		0 100%
	);
}

[dir="ltr"] .project-card:hover .project-card__media,
[dir="ltr"] .project-card:focus-within .project-card__media {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--hg-facet-lg)),
		calc(100% - var(--hg-facet-lg)) 100%,
		0 100%
	);
}


/* ==========================================================================
   ٠٤ — التوقيع الثالث: ترقيم فصول الصفحة الرئيسية
   --------------------------------------------------------------------------
   الفكرة ومن أين استُلهمت: الملف التعريفي للشركة مفهرس ومرقّم، وقسم
   «من نحن» في الموقع يحمل أصلاً مراحل العمل الأربع بأرقام كبيرة باهتة
   (٠١ التخطيط · ٠٢ التنفيذ · ٠٣ الإشراف · ٠٤ التسليم). فأخذت هذا
   الإيقاع الموجود ومددته إلى الصفحة كلها: كل قسم عنوانه في الوسط
   (خدماتنا · أعمالنا · لماذا هرم · شهادات الآيزو · عملاؤنا · تواصل
   معنا) يحمل رقمه خلف عنوانه. الصفحة تصير **فهرساً** لا رصفاً
   من الأقسام. والعدّاد لا يُحصي إلا العناوين المركزية، فقسم «من نحن»
   ذو العنوان الجانبي يبقى مقدّمةً بلا رقم كما هو في الملف التعريفي.

   لماذا مصمت باهت لا مفرّغ: العنوان الشبحي المفرّغ من التصميم القديم
   وممنوع رجوعه. الرقم هنا تعبئة مصمتة بشفافية ٥٫٥٪ فقط.

   التباين: ٥٫٥٪ من الأخضر فوق الأبيض تعطي أرضية ‎#F5F6F6‎ تقريباً،
   وعليها العنوان ‎#264142‎ ⇒ ٨٫٤:١. وعلى السطح الداكن ٥٫٥٪ أبيض فوق
   ‎#264142‎ تعطي ‎#334C4D‎ وعليها الأبيض ⇒ ٩٫٧:١. كلاهما فوق AA بمراحل.

   العدّاد على ‎body.home‎ فلا يظهر الترقيم في الصفحات الداخلية،
   ويُعاد ترقيمه وحده إن رتّب المسؤول أقسام الرئيسية من لوحة التحكم.
   ========================================================================== */
body.home {
	counter-reset: hg-chapter;
}

body.home .section .section-head--center {
	position: relative;
	z-index: 0;
	counter-increment: hg-chapter;
}

body.home .section .section-head--center::before {
	content: counter(hg-chapter, decimal-leading-zero);
	position: absolute;
	z-index: -1;
	inset-block-start: -.82em;
	inset-inline: 0;
	color: var(--hg-watermark);
	font-family: var(--h-font-head);
	font-size: clamp(3.9rem, 8.2vw, 6.4rem);
	font-weight: 800;
	line-height: 1;
	text-align: center;
	direction: ltr;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}


/* ==========================================================================
   ٠٥ — التوقيع الرابع: الخيط البرونزي الذي يُرسم عند الظهور
   --------------------------------------------------------------------------
   الفكرة ومن أين استُلهمت: البرونز في هذه الهوية لمسة تمييز صغيرة لا
   لون أسطح، وكان حاضراً في الشارات والأيقونات فقط. أعطيته وظيفة واحدة
   إضافية: أن يكون **علامة بداية الفصل**. خيط ٦٤بك تحت كل عنوان مركزي،
   يبدأ بعرض صفر ويتمدّد إلى عرضه الكامل حين يدخل العنوان الشاشة —
   كأن أحداً يخطّه بالمسطرة عند فتح صفحة جديدة من الملف.

   كيف بلا سطر جافاسكربت واحد: العناوين المركزية تحمل أصلاً الصنف
   ‎.reveal‎ ويضيف main.js عليها ‎.is-visible‎. فالقاعدة الافتراضية
   ‎scaleX(1)‎ — أي الخيط كامل — والانكماش مقصور على
   ‎html.js .reveal:not(.is-visible)‎. النتيجة: بلا جافاسكربت أو مع
   تعطيله يظهر الخيط كاملاً فوراً، ولا يبقى عنصر مخفي أبداً.

   وله صدى واحد في البطل: خيط بنفس السماكة عند قاعدة الصورة في جهة
   البداية، تحت كتلة النصّ مباشرة، يختم الشاشة الأولى بلمسة الهوية
   بدل خطّ فاصل رمادي.
   ========================================================================== */
.section-head--center::after {
	content: "";
	display: block;
	inline-size: var(--hg-rule-w);
	block-size: var(--hg-rule-h);
	margin-block-start: clamp(20px, 2.2vw, 30px);
	margin-inline: auto;
	border-radius: 2px;
	background: var(--hg-bronze);
	transform: scaleX(1);
	transform-origin: center;
}

html.js .section-head--center.reveal::after {
	transition: transform var(--hg-draw) var(--h-ease-soft) 180ms;
}

html.js .section-head--center.reveal:not(.is-visible)::after {
	transform: scaleX(0);
}

/* صدى الخيط في البطل: يختم قاعدة الصورة كلها، مصمتاً عند جهة بداية
 * القراءة ثم يذوب قبل منتصف الشاشة — لا خطّ فاصل رمادي، ولا شريط
 * برونزي عريض يصرخ، بل لمسة هوية تنتهي حيث ينتهي النظر. */
.hero::after {
	content: "";
	position: absolute;
	z-index: 3;
	inset-block-end: 0;
	inset-inline: 0;
	block-size: var(--hg-rule-h);
	background: linear-gradient(to left, var(--hg-bronze) 0%, transparent 62%);
	pointer-events: none;
}

[dir="ltr"] .hero::after {
	background: linear-gradient(to right, var(--hg-bronze) 0%, transparent 62%);
}


/* ==========================================================================
   ٠٦ — التوقيع الخامس: الحافة القطرية بين سطحين
   --------------------------------------------------------------------------
   الفكرة ومن أين استُلهمت: أكثر ما جعل الصفحة تبدو «مثل الباقي» هو أن
   أسطحها الثمانية تتلاقى كلها بخطوط أفقية مسطرة تماماً — شرائح مرصوفة.
   فكسرتُ واحداً منها فقط: مدخل قسم «لماذا هرم الإنشاء» يهبط قطرياً
   من جهة البداية إلى جهة النهاية بميل خفيف جداً (٢٦–٥٤بك على عرض
   الشاشة كلها، أي أقل من درجتين). حافة واحدة تكفي لتكسر الرتابة؛
   لو تكررت في كل قسم لصارت هي القالب الجديد.

   موقعها مقصود: الانتقال من «أعمالنا» الأبيض إلى السطح الداكن هو
   أوضح تباين سطحين في الصفحة، فالحافة تُقرأ هناك بلا مبالغة.

   التنفيذ: وتد بلون السطح الأعلى يُرسم فوق أعلى القسم الداكن، فلا
   ‎clip-path‎ على القسم نفسه ولا خطر على خلفيته ولا على أي نصّ —
   ارتفاعه أصغر بكثير من حشوة القسم العلوية.
   ========================================================================== */
body.home .section--dark.why::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: var(--hg-seam);
	background: var(--h-white);
	clip-path: polygon(0 0, 100% 0, 100% 100%);
	pointer-events: none;
}

[dir="ltr"] body.home .section--dark.why::before {
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

body.home .section--dark.why > .container {
	position: relative;
	z-index: 1;
}


/* ==========================================================================
   ٠٧ — تقليل الحركة والطباعة
   --------------------------------------------------------------------------
   من طلب تقليل الحركة يرى **كل** التوقيعات كاملة وثابتة: المسدّسات
   والقطع والأرقام والحافة القطرية كلها أشكال ساكنة أصلاً، والخيط
   البرونزي يظهر بعرضه الكامل بلا رسم. لا يختفي شيء ولا ينتظر شيء.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

	/* المحدِّدات هنا بوزن قواعدها أعلاه بالضبط، وإلا لم تُلغَ الانتقالات */
	:is(.service-card, .why-item, .about-step) :is(
		.service-card__icon,
		.why-item__icon,
		.about-step__icon
	),
	:is(.service-card, .why-item, .about-step) :is(
		.service-card__icon,
		.why-item__icon,
		.about-step__icon
	)::before,
	.project-card__media,
	html.js .section-head--center.reveal::after {
		transition: none;
	}

	/* لا تعميق للقطع عند المرور */
	.project-card:hover .project-card__media,
	.project-card:focus-within .project-card__media {
		clip-path: polygon(
			0 0,
			100% 0,
			100% 100%,
			var(--hg-facet) 100%,
			0 calc(100% - var(--hg-facet))
		);
	}

	[dir="ltr"] .project-card:hover .project-card__media,
	[dir="ltr"] .project-card:focus-within .project-card__media {
		clip-path: polygon(
			0 0,
			100% 0,
			100% calc(100% - var(--hg-facet)),
			calc(100% - var(--hg-facet)) 100%,
			0 100%
		);
	}

	/* الخيط مرسوم كاملاً منذ البداية */
	html.js .section-head--center.reveal:not(.is-visible)::after {
		transform: scaleX(1);
	}
}

/* الورق: زخرفة الشاشة لا تُطبع، والحبر يوفَّر */
@media print {

	.section.stats::before,
	.page-hero::before,
	body.home .section .section-head--center::before,
	body.home .section--dark.why::before,
	.hero::after {
		display: none;
	}

	.section-head--center::after {
		background: #000;
	}
}

/* رأس يبدأ بشارة: الحشو يُنزل الشارة تحت رقم الفصل بدل أن تركب عليه.
 * الرقم مثبّت على حافة الصندوق العليا فلا يتحرّك، والمحتوى وحده ينزل. */
body.home .section .section-head--center:has(> .section-head__eyebrow) {
	padding-block-start: 26px;
}