@charset "UTF-8";
/* ==========================================================================
   شركة هرم الانشاء — ورقة الأنماط الرئيسية
   --------------------------------------------------------------------------
   الاتجاه البصري: موقع عصري فاتح ومشرق.
   أرضية بيضاء، بطاقات بزوايا دائرية وظلال ناعمة، صور ملوّنة بلا أي فلتر،
   والأخضر البترولي لمسة قوية في الهيدر الملتصق والفوتر والإحصائيات والأزرار،
   والبرونزي تمييز صغير فقط (شارات، أيقونات، حالات hover).

   المحتوى كله من الملف التعريفي ولا يُغيَّر من هنا؛ هذا الملف تصميم بحت.

   الخطوط تُحمّل من inc/enqueue.php عبر haram_fonts_url()‎
   (Cairo 400–800 للعناوين، Tajawal 300–700 للمتن) فلا @import هنا.

   الفهرس
   ٠١  متغيّرات :root
   ٠٢  إعادة الضبط والأساسيات (RTL بخصائص منطقية)
   ٠٣  التنضيد
   ٠٤  الأدوات: الحاوية، الشبكات، الأقسام، الإخفاء البصري، الظهور
   ٠٥  الأزرار
   ٠٦  ترويسة القسم والشارة البرونزية
   ٠٧  الهيدر والشريط العلوي والقائمة وقائمة الجوال
   ٠٨  البطل بالشرائح والمؤشرات
   ٠٩  البطاقات: مشروع، خدمة، عميل، شهادة، معدّة، فرع، مقال
   ١٠  أقسام الصفحة الرئيسية
   ١١  الصفحات الداخلية: ترويسة الصفحة، المشروع المفرد، المعرض
   ١٢  النماذج ونموذج التواصل
   ١٣  المدونة والشريط الجانبي والتعليقات والترقيم و٤٠٤ والبحث
   ١٤  الفوتر والأزرار العائمة
   ١٥  التجاوب (1200 / 992 / 768 / 560)
   ١٦  تقليل الحركة والطباعة الورقية
   ========================================================================== */


/* ==========================================================================
   ٠١ — متغيّرات :root
   --------------------------------------------------------------------------
   الألوان الأربعة الأساسية (primary / accent / dark / light) قد يُعاد
   تعريفها من لوحة التحكم عبر inc/dynamic-css.php، لذلك لا يُكتب أي لون
   هوية داخل القواعد مباشرة؛ كل شيء يمرّ من هنا.
   ========================================================================== */
:root {

	/* ---- ألوان الهوية (قابلة للتغيير من لوحة التحكم) ---- */
	--h-primary: #264142;			/* الأخضر البترولي */
	--h-primary-rgb: 38, 65, 66;
	--h-accent: #957B69;			/* البرونزي */
	--h-accent-rgb: 149, 123, 105;
	--h-accent-text: #7A6455;		/* برونزي نصّي فوق الأبيض (4.9:1) */
	--h-accent-on-dark: #C8AC97;		/* برونزي نصّي فوق الداكن (5.0:1) */
	--h-dark: #1C2B2B;			/* أعمق درجة — الفوتر */
	--h-dark-rgb: 28, 43, 43;
	--h-light: #F6F7F7;			/* أرضية الأقسام المتناوبة */
	--h-white: #FFFFFF;

	/* ---- الحبر ---- */
	--h-ink: #1C2B2B;			/* النص الأساسي (13.4:1 فوق الأبيض) */
	--h-ink-rgb: 28, 43, 43;
	--h-ink-2: #5C6B6A;			/* النص الثانوي (5.6:1 فوق الأبيض) */
	--h-ink-3: #62706F;			/* تسميات صغيرة (5.2:1 فوق الأبيض، 4.8:1 فوق الفاتح) */

	/* ---- درجات مشتقّة (تتبع لون اللوحة تلقائياً) ---- */
	--h-primary-deep: color-mix(in srgb, var(--h-primary) 86%, #000);
	--h-primary-soft: color-mix(in srgb, var(--h-primary) 8%, #fff);
	--h-primary-wash: color-mix(in srgb, var(--h-primary) 4%, #fff);
	--h-accent-deep: color-mix(in srgb, var(--h-accent) 84%, #000);
	--h-accent-soft: color-mix(in srgb, var(--h-accent) 12%, #fff);

	/* ---- رموز السطح: يُعاد تعريفها داخل الأسطح الداكنة ----
	 * كل مكوّن يستهلك هذه الرموز فقط، فيصير واعياً بالسطح الذي يجلس عليه
	 * بلا تكرار أي قاعدة.
	 */
	--h-bg: var(--h-white);
	--h-fg: var(--h-ink);
	--h-fg-soft: var(--h-ink-2);
	--h-fg-faint: var(--h-ink-3);
	--h-fg-title: var(--h-primary);
	--h-fg-accent: var(--h-accent-text);
	--h-line: rgba(var(--h-ink-rgb), .10);
	--h-line-strong: rgba(var(--h-ink-rgb), .16);
	--h-card-bg: var(--h-white);
	--h-card-line: rgba(var(--h-ink-rgb), .08);
	--h-pill-bg: rgba(var(--h-accent-rgb), .12);
	--h-icon-bg: rgba(var(--h-primary-rgb), .06);
	/* ظلال ثلاثية الطبقات: خيط تماس + انتشار قريب + هالة بعيدة واسعة.
	 * ثلاثتها خفيفة جداً حتى يبقى الظل إحساساً بالعمق لا لطخة رمادية. */
	--h-shadow-1:
		0 1px 1px rgba(var(--h-ink-rgb), .03),
		0 4px 10px rgba(var(--h-ink-rgb), .04),
		0 14px 34px rgba(var(--h-ink-rgb), .05);
	--h-shadow-2:
		0 1px 2px rgba(var(--h-ink-rgb), .04),
		0 8px 20px rgba(var(--h-ink-rgb), .06),
		0 26px 58px rgba(var(--h-ink-rgb), .08);
	--h-shadow-3:
		0 2px 4px rgba(var(--h-ink-rgb), .05),
		0 14px 32px rgba(var(--h-ink-rgb), .08),
		0 42px 92px rgba(var(--h-ink-rgb), .12);
	--h-shadow-header:
		0 1px 0 rgba(var(--h-ink-rgb), .05),
		0 6px 18px rgba(var(--h-ink-rgb), .04),
		0 20px 48px rgba(var(--h-ink-rgb), .06);
	--h-focus: var(--h-primary);
	--h-focus-halo: rgba(var(--h-primary-rgb), .15);

	/* ---- الزوايا ---- */
	--h-r-card: 16px;
	--h-r-lg: 22px;
	--h-r-sm: 12px;
	--h-r-btn: 10px;
	--h-r-field: 10px;
	--h-r-pill: 999px;

	/* ---- سلّم المسافات ----
	 * كل تباعد في الموقع درجة من هذا السلّم، فيصير الإيقاع الرأسي واحداً
	 * في كل قسم بدل أرقام متفرّقة لا رابط بينها.
	 */
	--h-s-1: 8px;
	--h-s-2: 16px;
	--h-s-3: 24px;
	--h-s-4: 40px;
	--h-s-5: 64px;
	--h-s-6: 96px;
	--h-s-7: 128px;

	/* ---- القياسات ---- */
	--h-container: 1280px;
	--h-container-narrow: 860px;
	--h-gutter: var(--h-s-3);
	--h-gap: clamp(var(--h-s-3), 2.4vw, 32px);
	--h-section-y: clamp(var(--h-s-5), 8vw, var(--h-s-7));
	--h-head-gap: clamp(var(--h-s-4), 4vw, var(--h-s-5));
	/* عرض القراءة المريح: ٦٠–٧٥ حرفاً */
	--h-measure: 68ch;

	/* تُقاس من main.js وتُكتب هنا؛ القيم أدناه احتياطية قبل تشغيل السكربت */
	--h-header-h: 84px;
	--h-header-now-h: 84px;
	--h-topbar-h: 0px;
	--h-admin-bar-h: 0px;

	/* اتجاه انزلاق درج الجوال (يُقلب في LTR) */
	--h-drawer-out: 100%;

	/* ---- الخطوط ---- */
	--h-font-head: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
	--h-font-body: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;

	/* ---- الحركة ----
	 * منحنى واحد هادئ لكل الموقع: يبدأ سريعاً ويستقرّ ببطء بلا ارتداد.
	 */
	--h-ease: cubic-bezier(.4, 0, .2, 1);
	--h-ease-soft: cubic-bezier(.22, .61, .36, 1);
	--h-t: .28s var(--h-ease-soft);
	--h-t-slow: .7s var(--h-ease-soft);
	--h-t-reveal: .7s var(--h-ease-soft);
	/* مدّة عرض شريحة البطل — يقرأها مؤشّر التقدّم داخل النقطة النشطة */
	--h-hero-interval: 5s;

	/* ---- الطبقات ---- */
	--h-z-header: 900;
	--h-z-backdrop: 990;
	--h-z-nav: 1000;
	--h-z-float: 1100;
}

[dir="ltr"] {
	--h-drawer-out: -100%;
}

/* احتياطي للمتصفحات القديمة التي لا تعرف color-mix */
@supports not (color: color-mix(in srgb, red, blue)) {

	:root {
		--h-primary-deep: #1E3435;
		--h-primary-soft: #EDF1F1;
		--h-primary-wash: #F5F7F7;
		--h-accent-deep: #7A6455;
		--h-accent-soft: #F3EFEC;
	}
}

/*
 * الأسطح الداكنة — الوحيدة في الموقع:
 * البطل، ترويسة الصفحة الداخلية، قسم الإحصائيات، شريط الدعوة، والفوتر.
 */
.hero,
.page-hero,
.stats,
.cta,
.site-footer,
.section--dark,
.section--media,
[data-surface="dark"] {
	--h-bg: var(--h-primary);
	--h-fg: var(--h-white);
	--h-fg-soft: rgba(255, 255, 255, .78);
	--h-fg-faint: rgba(255, 255, 255, .62);
	--h-fg-title: var(--h-white);
	--h-fg-accent: var(--h-accent-on-dark);
	--h-line: rgba(255, 255, 255, .16);
	--h-line-strong: rgba(255, 255, 255, .28);
	--h-card-bg: rgba(255, 255, 255, .07);
	--h-card-line: rgba(255, 255, 255, .16);
	--h-pill-bg: rgba(255, 255, 255, .14);
	--h-icon-bg: rgba(255, 255, 255, .10);
	--h-focus: var(--h-white);
	--h-focus-halo: rgba(255, 255, 255, .22);
}


/* ==========================================================================
   ٠٢ — إعادة الضبط والأساسيات
   الاتجاه عربي RTL، وكل التباعد بخصائص منطقية (inline / block) حتى يعمل
   القالب في الاتجاهين بلا نسخة ثانية.
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* لون اللوحة = لون الفوتر، فلا يظهر أبيض تحته عند الارتداد أو الصفحات القصيرة. */
	background: var(--h-dark);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-block-start: calc(var(--h-header-now-h) + 24px);
}

body {
	margin: 0;
	background: var(--h-white);
	color: var(--h-ink);
	font-family: var(--h-font-body);
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.9;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body.has-nav-open,
body.is-scroll-locked {
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul {
	margin: 0;
}

ul, ol {
	padding: 0;
	list-style: none;
}

img,
svg,
video,
iframe {
	display: block;
	max-inline-size: 100%;
}

img {
	block-size: auto;
	border: 0;
	/* صور ملوّنة دائماً — لا فلاتر إطلاقاً */
	filter: none;
}

/*
 * تلاشٍ خفيف عند اكتمال التحميل بدل أن تقفز الصورة إلى مكانها.
 * الحارس: الإخفاء معلّق كلياً على الصنف ‎has-img-fade‎ الذي لا يضعه
 * main.js إلا بعد نجاح وحدته — فبلا جافاسكربت تبقى كل الصور ظاهرة،
 * والصور المخزّنة مسبقاً توسم جاهزة فوراً بلا وميض.
 */
html.has-img-fade img {
	opacity: 1;
	transition: opacity .5s var(--h-ease-soft);
}

html.has-img-fade img:not(.is-loaded) {
	opacity: 0;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--h-t);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
	margin: 0;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: inherit;
}

table {
	inline-size: 100%;
	border-collapse: collapse;
}

/*
 * main.js يخفي عناصر (مؤشرات الشرائح، عناصر المعرض المفلترة، أزرار المعرض
 * المنبثق) بالسمة hidden. بما أن أنماط القالب تفوز على أنماط المتصفح،
 * نثبّت السلوك هنا صراحةً وإلا بقيت العناصر ظاهرة.
 */
[hidden] {
	display: none !important;
}

hr {
	border: 0;
	block-size: 1px;
	background: var(--h-line);
	margin-block: 32px;
}

::selection {
	background: rgba(var(--h-primary-rgb), .16);
	color: var(--h-ink);
}

/*
 * حلقة التركيز الموحّدة: خطّ صلب بلون السطح المقابل + هالة ناعمة حوله.
 * المحدّد بـ‎:where‎ فوزنه صفر، فأي مكوّن له حلقته الخاصة (الأزرار مثلاً)
 * يفوز عليها بلا ‎!important‎.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--h-focus);
	outline-offset: 3px;
	border-radius: 6px;
	box-shadow: 0 0 0 5px var(--h-focus-halo);
}

.skip-link {
	position: fixed;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	z-index: 2000;
	padding: 12px 22px;
	border-radius: var(--h-r-btn);
	background: var(--h-primary);
	color: var(--h-white);
	font-family: var(--h-font-head);
	font-weight: 700;
	box-shadow: var(--h-shadow-2);
	transform: translateY(-160%);
	transition: transform var(--h-t);
}

.skip-link:focus {
	transform: translateY(0);
}

/* شريط إدارة ووردبريس */
body.admin-bar .site-header {
	inset-block-start: var(--h-admin-bar-h, 32px);
}

/* --------------------------------------------------------------------------
   إزالة نهائية لأثاث التصميم الكتيّبي القديم إن بقي في أي قالب
   -------------------------------------------------------------------------- */
.side-rail,
.ghost-title,
.vrule {
	display: none !important;
}


/* ==========================================================================
   ٠٣ — التنضيد
   العناوين Cairo بأوزان 700–800، والمتن Tajawal 400.
   ========================================================================== */
/*
 * الحرف العربي لا يحتمل تباعداً موجباً (يفكّ الوصل بصرياً)، لكن سالباً
 * خفيفاً يشدّ العنوان الكبير ويجعله أكثر تماسكاً. كلما صغر الحجم قلّ الشدّ.
 * ‎text-wrap: balance‎ يوزّع أسطر العنوان فلا يبقى سطر أخير بكلمة واحدة.
 */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--h-font-head);
	font-weight: 700;
	line-height: 1.25;
	color: var(--h-fg-title);
	letter-spacing: -0.008em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.1rem, 4.4vw, 3.2rem);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -0.018em;
}

h2 {
	font-size: clamp(1.9rem, 3.4vw, 2.75rem);
	line-height: 1.22;
	letter-spacing: -0.014em;
}

h3 {
	font-size: clamp(1.15rem, 1.6vw, 1.4rem);
	line-height: 1.4;
}

h4 {
	font-size: 1.12rem;
	letter-spacing: -0.004em;
}

h5 {
	font-size: 1.03rem;
	letter-spacing: 0;
}

h6 {
	font-size: .95rem;
	letter-spacing: 0;
}

p {
	color: var(--h-fg-soft);
	text-wrap: pretty;
}

p + p {
	margin-block-start: 1em;
}

strong, b {
	font-weight: 700;
	color: var(--h-fg);
}

small {
	font-size: .84rem;
}

mark,
.accent {
	background: none;
	color: var(--h-fg-accent);
	font-weight: inherit;
}

blockquote {
	margin: 0;
}

/* الروابط داخل النصوص الحرّة */
.entry-content a,
.about__text a,
.gm__text a,
.quality__text a {
	color: var(--h-fg-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(var(--h-accent-rgb), .45);
	transition: color var(--h-t), text-decoration-color var(--h-t), text-decoration-thickness var(--h-t);
}

/* الخطّ السفلي يُرسم أوضح عند المرور بدل تغيير اللون وحده */
.entry-content a:hover,
.about__text a:hover,
.gm__text a:hover,
.quality__text a:hover {
	color: var(--h-primary);
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

/* محتوى المحرّر الحرّ */
.entry-content {
	color: var(--h-fg-soft);
}

.entry-content > * + * {
	margin-block-start: 1.15em;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-block-start: 1.7em;
	color: var(--h-fg-title);
}

.entry-content ul,
.entry-content ol {
	padding-inline-start: 1.4em;
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li {
	margin-block-end: .5em;
}

.entry-content img,
.entry-content figure img {
	border-radius: var(--h-r-card);
}

.entry-content blockquote {
	padding: 20px 26px;
	border-inline-start: 3px solid var(--h-accent);
	border-radius: var(--h-r-sm);
	background: var(--h-primary-wash);
	color: var(--h-fg);
	font-size: 1.08rem;
}

.entry-content table {
	border: 1px solid var(--h-line);
	border-radius: var(--h-r-sm);
	overflow: hidden;
}

.entry-content th,
.entry-content td {
	padding: 12px 16px;
	border-block-end: 1px solid var(--h-line);
	text-align: start;
}

.entry-content th {
	background: var(--h-light);
	font-family: var(--h-font-head);
	font-weight: 700;
	color: var(--h-fg-title);
}

.entry-content code,
.entry-content pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .92em;
	background: var(--h-light);
	border-radius: 8px;
}

.entry-content code {
	padding: 2px 7px;
}

.entry-content pre {
	padding: 18px 20px;
	overflow-x: auto;
	direction: ltr;
	text-align: start;
}

/* الأرقام والبريد والهواتف تبقى LTR داخل نص عربي */
[dir="ltr"] {
	text-align: start;
}


/* ==========================================================================
   ٠٤ — الأدوات
   ========================================================================== */
.container {
	inline-size: 100%;
	max-inline-size: var(--h-container);
	margin-inline: auto;
	padding-inline: var(--h-gutter);
}

.container--narrow {
	max-inline-size: var(--h-container-narrow);
}

.section {
	position: relative;
	padding-block: var(--h-section-y);
	background: var(--h-white);
	color: var(--h-ink);
}

/* السطح المتناوب الفاتح */
.section--light {
	background: var(--h-light);
}

/*
 * السطح الداكن — استعمال محدود جداً بأمر العميل:
 * البطل، وقسم الإحصائيات، وشريط الدعوة، والفوتر فقط. لا أرضية داكنة عامة.
 * رموز السطح أعلاه تقلب كل الألوان داخله تلقائياً فيبقى التباين مرتفعاً.
 */
.section--dark {
	background: var(--h-primary);
	color: var(--h-white);
	border: 0;
}

/* أقسام بصورة خلفية (الرؤية، الدعوة) */
.section--media {
	background-color: var(--h-primary);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--h-white);
}

.section--tight {
	padding-block: clamp(44px, 5vw, 72px);
}

.section--flush {
	padding-block: 0;
}

.section--divider {
	background: var(--h-light);
}

/* منع التصاق سطحين فاتحين متطابقين فيبدوان كتلة واحدة طويلة */
.section--light + .section--light {
	padding-block-start: 0;
}

/* الشبكات */
.grid {
	display: grid;
	gap: var(--h-gap);
}

.grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* الإخفاء البصري مع بقاء العنصر لقارئ الشاشة */
.sr-only {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* الظهور عند التمرير — التأخير المتدرّج يضيفه main.js */
/*
 * الإخفاء مشروط بوجود الجافاسكربت: لو تعطّلت أو فشل تحميل main.js
 * يظهر المحتوى كاملاً بدل أن تبقى الصفحة بيضاء.
 */
/*
 * إزاحة ١٤px فقط: الحركة تُحسّ ولا تُرى. المدّة .7s بمنحنى هادئ.
 * التدرّج بين الإخوة يديره main.js بمؤقّت، و‎--h-reveal-delay‎ منفذ إضافي
 * لمن أراد تأخيراً من CSS مباشرة (قيمته الافتراضية صفر فلا أثر له).
 */
html.js .reveal {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity var(--h-t-reveal) var(--h-reveal-delay, 0s),
		transform var(--h-t-reveal) var(--h-reveal-delay, 0s);
	will-change: opacity, transform;
}

html.js .reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* أيقونات SVG الداخلية */
.haram-icon {
	display: inline-block;
	flex: 0 0 auto;
	vertical-align: middle;
	color: currentColor;
}

/* الصورة الاحتياطية للبطاقات */
.haram-thumb {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.haram-thumb--fallback {
	object-fit: cover;
	background: var(--h-primary-soft);
}

/* الشارة العامة (pill) — حدّ برونزي شعري يمنحها حافة نظيفة */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	border: 1px solid rgba(var(--h-accent-rgb), .20);
	border-radius: var(--h-r-pill);
	background: var(--h-pill-bg);
	color: var(--h-fg-accent);
	font-family: var(--h-font-head);
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: .01em;
}


/* ==========================================================================
   ٠٥ — الأزرار
   أساسي: تيل صلب بنص أبيض. ثانوي: حدّ 1.5px وخلفية شفافة.
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 30px;
	border: 1.5px solid transparent;
	border-radius: var(--h-r-btn);
	background: transparent;
	color: var(--h-fg);
	font-family: var(--h-font-head);
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	transition:
		background-color var(--h-t),
		border-color var(--h-t),
		color var(--h-t),
		box-shadow var(--h-t),
		transform var(--h-t);
}

/* الضغط يُرجع الزر إلى مستواه فوراً — استجابة محسوسة بلا ضجيج */
.btn:active {
	transform: translateY(0);
	transition-duration: .09s;
}

.btn .haram-icon {
	transition: transform var(--h-t);
}

.btn:hover .haram-icon {
	transform: translateX(-3px);
}

[dir="ltr"] .btn:hover .haram-icon {
	transform: translateX(3px);
}

/* الأساسي — يُستعمل بالاسمين الموجودين في القوالب */
.btn--primary,
.btn--accent {
	background: var(--h-primary);
	border-color: var(--h-primary);
	color: var(--h-white);
	box-shadow: 0 1px 2px rgba(var(--h-primary-rgb), .18);
}

.btn--primary:hover,
.btn--accent:hover,
.btn--primary:focus-visible,
.btn--accent:focus-visible {
	background: var(--h-primary-deep);
	border-color: var(--h-primary-deep);
	color: var(--h-white);
	box-shadow: 0 10px 26px rgba(var(--h-primary-rgb), .28);
	transform: translateY(-2px);
}

/* الأساسي فوق سطح داكن: يقلب إلى أبيض صلب ليبقى التباين عالياً */
.hero .btn--primary,
.hero .btn--accent,
.cta .btn--primary,
.cta .btn--accent,
.page-hero .btn--primary,
.page-hero .btn--accent,
.stats .btn--primary,
.stats .btn--accent,
.section--dark .btn--primary,
.section--dark .btn--accent,
.section--media .btn--primary,
.section--media .btn--accent {
	background: var(--h-white);
	border-color: var(--h-white);
	color: var(--h-primary);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.hero .btn--primary:hover,
.hero .btn--accent:hover,
.cta .btn--primary:hover,
.cta .btn--accent:hover,
.page-hero .btn--primary:hover,
.page-hero .btn--accent:hover,
.stats .btn--primary:hover,
.stats .btn--accent:hover,
.section--dark .btn--primary:hover,
.section--dark .btn--accent:hover,
.section--media .btn--primary:hover,
.section--media .btn--accent:hover {
	background: rgba(255, 255, 255, .92);
	border-color: rgba(255, 255, 255, .92);
	color: var(--h-primary-deep);
}

/* الثانوي */
.btn--ghost {
	background: transparent;
	border-color: var(--h-line-strong);
	color: var(--h-fg);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	border-color: var(--h-primary);
	background: var(--h-primary);
	color: var(--h-white);
	transform: translateY(-2px);
}

/* الثانوي فوق سطح داكن */
.hero .btn--ghost,
.cta .btn--ghost,
.page-hero .btn--ghost,
.stats .btn--ghost,
.section--dark .btn--ghost,
.section--media .btn--ghost,
.site-footer .btn--ghost {
	border-color: rgba(255, 255, 255, .55);
	color: var(--h-white);
}

.hero .btn--ghost:hover,
.cta .btn--ghost:hover,
.page-hero .btn--ghost:hover,
.stats .btn--ghost:hover,
.section--dark .btn--ghost:hover,
.section--media .btn--ghost:hover,
.site-footer .btn--ghost:hover {
	background: var(--h-white);
	border-color: var(--h-white);
	color: var(--h-primary);
}

.btn--lg {
	padding: 17px 38px;
	font-size: 1.02rem;
}

.btn--block {
	inline-size: 100%;
}

.btn:disabled,
.btn.is-loading {
	opacity: .6;
	pointer-events: none;
}

.btn.is-loading {
	position: relative;
	color: transparent;
}

.btn.is-loading::after {
	content: "";
	position: absolute;
	inline-size: 20px;
	block-size: 20px;
	border: 2px solid currentColor;
	border-block-start-color: transparent;
	border-radius: 50%;
	color: var(--h-white);
	animation: haram-spin .7s linear infinite;
}

@keyframes haram-spin {
	to { transform: rotate(360deg); }
}

/* رابط «اقرأ المزيد» يرث الزر الثانوي */
.read-more {
	font-size: .9rem;
	padding: 11px 24px;
}

/* روابط السهم البسيطة داخل البطاقات */
.project-card__link,
.service-card__link,
.post-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--h-font-head);
	font-size: .9rem;
	font-weight: 700;
	color: var(--h-primary);
	transition: color var(--h-t), gap var(--h-t);
}

.project-card__link:hover,
.service-card__link:hover,
.post-card__link:hover {
	color: var(--h-accent-text);
	gap: 14px;
}


/* ==========================================================================
   ٠٦ — ترويسة القسم
   شارة برونزية صغيرة ← عنوان واثق ← سطر وصف قصير. لا عناوين شبحية.
   ========================================================================== */
.section-head {
	max-inline-size: 66ch;
	margin-block-end: var(--h-head-gap);
}

.section-head__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-end: var(--h-s-2);
	padding: 6px 16px;
	border: 1px solid rgba(var(--h-accent-rgb), .20);
	border-radius: var(--h-r-pill);
	background: var(--h-pill-bg);
	color: var(--h-fg-accent);
	font-family: var(--h-font-head);
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.7;
}

.section-head__title {
	font-size: clamp(1.9rem, 3.4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.014em;
	color: var(--h-fg-title);
	text-wrap: balance;
}

.section-head__title--xl {
	font-size: clamp(2.2rem, 4.2vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -0.018em;
}

.section-head__text {
	max-inline-size: var(--h-measure);
	margin-block-start: var(--h-s-2);
	font-size: 1.05rem;
	line-height: 1.9;
	color: var(--h-fg-soft);
	text-wrap: pretty;
}

.section-head--center .section-head__text {
	margin-inline: auto;
}

.section-head--center {
	margin-inline: auto;
	text-align: center;
}

/* لا يُولَّد أي عنوان شبحي من data-ghost — السمة تُترك بلا تنسيق عمداً */

/* ==========================================================================
   ٠٧ — الهيدر والشريط العلوي والقائمة وقائمة الجوال
   --------------------------------------------------------------------------
   للهيدر حالتان: شفاف فوق البطل بنص أبيض، و«ملتصق» ‎.is-stuck‎ بأرضية بيضاء
   صلبة وظل ناعم ونص داكن. الصنفان يضعهما main.js، والصفحات التي لا بطل فيها
   تحصل على الأبيض الصلب مباشرة عبر ‎body:not(.has-transparent-header)‎.
   ========================================================================== */
.site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: var(--h-z-header);
	background: transparent;
	color: var(--h-white);
	/* الانتقال بين الشفاف والصلب أبطأ قليلاً من بقية الموقع حتى لا يُلمح كقفزة */
	transition:
		background-color .38s var(--h-ease-soft),
		box-shadow .38s var(--h-ease-soft),
		color .38s var(--h-ease-soft),
		-webkit-backdrop-filter .38s var(--h-ease-soft),
		backdrop-filter .38s var(--h-ease-soft);
}

.site-header::after {
	/* تدرّج خفيف جداً يضمن قراءة النص الأبيض فوق أي صورة بطل */
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 210px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(var(--h-dark-rgb), .66) 0%, rgba(var(--h-dark-rgb), .34) 55%, transparent 100%);
	transition: opacity .38s var(--h-ease-soft);
	z-index: -1;
}

/* الحالة البيضاء الصلبة */
.site-header.is-stuck,
body:not(.has-transparent-header) .site-header {
	background: var(--h-white);
	color: var(--h-ink);
	box-shadow: var(--h-shadow-header);
}

/*
 * زجاج مصنفر خفيف عند الالتصاق: المحتوى يمرّ تحته بإحساس عمق بدل حاجز صلب.
 * محصور في المتصفحات التي تدعمه فعلاً، وإلا بقي الأبيض الصلب أعلاه.
 */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {

	.site-header.is-stuck,
	body:not(.has-transparent-header) .site-header {
		background: rgba(255, 255, 255, .90);
		-webkit-backdrop-filter: saturate(1.6) blur(16px);
		backdrop-filter: saturate(1.6) blur(16px);
	}
}

.site-header.is-stuck::after,
body:not(.has-transparent-header) .site-header::after {
	opacity: 0;
}

/* --------------------------------------------------------------------------
   الشريط العلوي — رفيع جداً داخل الهيدر، ويختفي كلياً عند التمرير
   -------------------------------------------------------------------------- */
.topbar {
	border-block-end: 1px solid rgba(255, 255, 255, .14);
	font-size: .84rem;
	overflow: hidden;
	max-block-size: 46px;
	opacity: 1;
	transition:
		max-block-size var(--h-t),
		opacity var(--h-t),
		border-color var(--h-t);
}

.site-header.is-stuck .topbar {
	max-block-size: 0;
	opacity: 0;
	border-color: transparent;
}

body:not(.has-transparent-header) .topbar {
	border-block-end-color: var(--h-line);
}

.topbar__inner {
	display: flex;
	align-items: center;
	gap: 8px 26px;
	flex-wrap: wrap;
	block-size: 46px;
}

.topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	opacity: .82;
	white-space: nowrap;
	transition: opacity var(--h-t), color var(--h-t);
}

a.topbar__item:hover {
	opacity: 1;
	color: var(--h-fg-accent);
}

.topbar__item .haram-icon {
	color: var(--h-accent-on-dark);
}

body:not(.has-transparent-header) .topbar__item .haram-icon {
	color: var(--h-accent-text);
}

.topbar__item--address {
	overflow: hidden;
	text-overflow: ellipsis;
}

.topbar__social {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-inline-start: auto;
}

.topbar__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 30px;
	block-size: 30px;
	border-radius: var(--h-r-pill);
	opacity: .8;
	transition: background-color var(--h-t), opacity var(--h-t), color var(--h-t);
}

.topbar__social a:hover {
	opacity: 1;
	background: rgba(255, 255, 255, .14);
	color: var(--h-accent-on-dark);
}

body:not(.has-transparent-header) .topbar__social a:hover,
.site-header.is-stuck .topbar__social a:hover {
	background: var(--h-primary-soft);
	color: var(--h-primary);
}

/* --------------------------------------------------------------------------
   صف الهيدر: الشعار ← القائمة ← زر تواصل معنا ← زر الجوال
   -------------------------------------------------------------------------- */
.header-inner {
	display: flex;
	align-items: center;
	gap: var(--h-s-3);
	block-size: 84px;
	/* الانكماش عند الالتصاق ٨px فقط وبنفس مدّة تبديل الخلفية،
	 * فيقرأ كتحوّل واحد هادئ لا كقفزة في ارتفاع الهيدر. */
	transition: block-size .38s var(--h-ease-soft);
}

.site-header.is-stuck .header-inner {
	block-size: 76px;
}

.site-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	color: inherit;
}

.site-brand__logo {
	inline-size: auto;
	block-size: 52px;
	object-fit: contain;
	transition: block-size .38s var(--h-ease-soft);
}

.site-header.is-stuck .site-brand__logo {
	block-size: 47px;
}

.site-brand:focus-visible {
	outline-offset: 6px;
	border-radius: var(--h-r-sm);
}

/* تبديل نسختي الشعار حسب حالة الهيدر */
.site-header .site-brand__logo--dark {
	display: none;
}

.site-header.is-stuck .site-brand__logo--light,
body:not(.has-transparent-header) .site-header .site-brand__logo--light {
	display: none;
}

.site-header.is-stuck .site-brand__logo--dark,
body:not(.has-transparent-header) .site-header .site-brand__logo--dark {
	display: block;
}

.site-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.site-brand__text strong {
	font-family: var(--h-font-head);
	font-size: 1.02rem;
	font-weight: 700;
	color: inherit;
}

.site-brand__text small {
	font-size: .76rem;
	opacity: .7;
}

/*
 * قاعدة العميل: «الشعار صورة فقط بلا سطر تصنيف بجانبها».
 * فإن وُجدت صورة شعار داخل الهيدر أخفينا الكتلة النصّية المرافقة،
 * ويبقى الاسم متاحاً لقارئ الشاشة عبر السمة alt للصورة.
 */
.site-header .site-brand:has(.site-brand__logo) .site-brand__text {
	display: none;
}

.site-header .site-brand__text small {
	display: none;
}

/* --------------------------------------------------------------------------
   القائمة الرئيسية
   -------------------------------------------------------------------------- */
.main-nav {
	margin-inline-start: auto;
}

.main-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
}

.main-nav__item {
	position: relative;
}

.main-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: var(--h-r-btn);
	font-family: var(--h-font-head);
	font-size: .95rem;
	font-weight: 600;
	color: inherit;
	white-space: nowrap;
	transition: color var(--h-t), background-color var(--h-t);
}

/*
 * مؤشّر الصفحة: خطّ برونزي قصير يُرسم من جهة البداية بـ‎scaleX‎
 * (تحويل خالص على الـGPU، لا إعادة تخطيط)، ويُمحى بنفس الاتجاه.
 */
.main-nav__link::after {
	content: "";
	position: absolute;
	inset-block-end: 4px;
	inset-inline-start: 14px;
	inline-size: calc(100% - 28px);
	block-size: 2px;
	border-radius: 2px;
	background: var(--h-nav-underline, var(--h-accent));
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform .34s var(--h-ease-soft), background-color var(--h-t);
}

[dir="ltr"] .main-nav__link::after {
	transform-origin: 0 50%;
}

.main-nav__link:hover::after,
.main-nav__link:focus-visible::after,
.main-nav__link.is-active::after,
.current-menu-item > .main-nav__link::after,
.current_page_item > .main-nav__link::after {
	transform: scaleX(1);
}

.main-nav__link:hover,
.main-nav__link.is-active,
.current-menu-item > .main-nav__link,
.current_page_item > .main-nav__link {
	color: var(--h-fg-accent);
}

/*
 * فوق صورة البطل يبقى النص أبيض، والمؤشّر برونزي فاتح ليبقى مقروءاً
 * على الصورة الداكنة؛ في الحالة البيضاء يعود البرونزي الأصلي.
 */
body.has-transparent-header .site-header:not(.is-stuck) {
	--h-fg-accent: var(--h-white);
	--h-nav-underline: var(--h-accent-on-dark);
}

.site-header.is-stuck .main-nav__link:hover,
body:not(.has-transparent-header) .main-nav__link:hover {
	color: var(--h-primary);
}

.main-nav__arrow {
	transition: transform var(--h-t);
}

.main-nav__item--parent:hover > .main-nav__link .main-nav__arrow,
.main-nav__item.is-open > .main-nav__link .main-nav__arrow {
	transform: rotate(180deg);
}

/* القائمة المنسدلة */
.main-nav .sub-menu {
	position: absolute;
	inset-block-start: calc(100% + 10px);
	inset-inline-start: 0;
	min-inline-size: 236px;
	padding: 10px;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-white);
	box-shadow: var(--h-shadow-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--h-t), transform var(--h-t), visibility var(--h-t);
	z-index: 5;
}

.main-nav__item:hover > .sub-menu,
.main-nav__item:focus-within > .sub-menu,
.main-nav__item.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-nav .sub-menu .main-nav__link {
	display: flex;
	inline-size: 100%;
	padding: 10px 14px;
	color: var(--h-ink);
	font-weight: 600;
	white-space: normal;
}

.main-nav .sub-menu .main-nav__link::after {
	display: none;
}

.main-nav .sub-menu .main-nav__link:hover {
	background: var(--h-primary-soft);
	color: var(--h-primary);
}

.main-nav .sub-menu--nested {
	inset-block-start: -10px;
	inset-inline-start: 100%;
}

/* --------------------------------------------------------------------------
   أزرار الهيدر
   -------------------------------------------------------------------------- */
.header-actions {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

.header-cta {
	padding: 12px 24px;
	font-size: .92rem;
}

.site-header:not(.is-stuck) .header-cta {
	background: var(--h-white);
	border-color: var(--h-white);
	color: var(--h-primary);
}

body:not(.has-transparent-header) .site-header .header-cta {
	background: var(--h-primary);
	border-color: var(--h-primary);
	color: var(--h-white);
}

.site-header:not(.is-stuck) .header-cta:hover {
	background: rgba(255, 255, 255, .9);
	border-color: rgba(255, 255, 255, .9);
	color: var(--h-primary-deep);
}

body:not(.has-transparent-header) .site-header .header-cta:hover {
	background: var(--h-primary-deep);
	border-color: var(--h-primary-deep);
	color: var(--h-white);
}

/* زر القائمة للجوال */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	inline-size: 46px;
	block-size: 46px;
	padding: 0 11px;
	border-radius: var(--h-r-btn);
	border: 1px solid var(--h-line-strong);
	transition: background-color var(--h-t), border-color var(--h-t);
}

.nav-toggle span {
	display: block;
	block-size: 2px;
	inline-size: 100%;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--h-t), opacity var(--h-t);
}

.nav-toggle.is-open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
	opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   قائمة الجوال (درج جانبي) والخلفية المعتمة
   -------------------------------------------------------------------------- */
.nav-backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--h-z-backdrop);
	background: rgba(var(--h-dark-rgb), .52);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .42s var(--h-ease-soft), visibility .42s var(--h-ease-soft);
}

.nav-backdrop.is-open,
.nav-backdrop.is-visible {
	opacity: 1;
	visibility: visible;
}

.mobile-nav {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: var(--h-z-nav);
	inline-size: min(370px, 88vw);
	padding: 26px 24px 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--h-white);
	color: var(--h-ink);
	box-shadow: var(--h-shadow-3);
	transform: translateX(var(--h-drawer-out));
	/* مخفية فعلاً وهي مغلقة: لا يطلّ ظلّها من حافة الشاشة ولا تصلها لوحة المفاتيح. */
	visibility: hidden;
	transition: transform .42s var(--h-ease-soft), visibility 0s linear .42s;
}

.mobile-nav.is-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform .42s var(--h-ease-soft), visibility 0s;
}

.mobile-nav__close {
	position: absolute;
	inset-block-start: 18px;
	inset-inline-end: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--h-r-pill);
	background: var(--h-light);
	color: var(--h-ink);
	transition: background-color var(--h-t), color var(--h-t);
}

.mobile-nav__close:hover {
	background: var(--h-primary);
	color: var(--h-white);
}

.mobile-nav .site-brand {
	margin-block-end: 26px;
	padding-inline-end: 54px;
}

.mobile-nav .site-brand__logo {
	block-size: 48px;
}

.mobile-nav .site-brand__logo--dark {
	display: block;
}

.mobile-nav .main-nav__list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	padding-block-end: 22px;
	margin-block-end: 22px;
	border-block-end: 1px solid var(--h-line);
}

.mobile-nav .main-nav__link {
	justify-content: space-between;
	padding: 13px 14px;
	font-size: 1rem;
	color: var(--h-ink);
	white-space: normal;
}

.mobile-nav .main-nav__link::after {
	display: none;
}

.mobile-nav .main-nav__link:hover,
.mobile-nav .main-nav__link.is-active,
.mobile-nav .current-menu-item > .main-nav__link {
	background: var(--h-primary-soft);
	color: var(--h-primary);
}

.mobile-nav .sub-menu {
	position: static;
	min-inline-size: 0;
	padding: 0 0 6px;
	margin-inline-start: 14px;
	border: 0;
	border-inline-start: 2px solid var(--h-line);
	border-radius: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	display: none;
}

.mobile-nav .sub-menu.is-open,
.mobile-nav .main-nav__item.is-open > .sub-menu {
	display: block;
}

.mobile-nav .sub-menu .main-nav__link {
	padding-block: 10px;
	font-size: .95rem;
	font-weight: 500;
}

.mobile-nav__actions {
	display: grid;
	gap: 10px;
	margin-block-end: 24px;
}

.mobile-nav__contact {
	display: grid;
	gap: 4px;
	margin-block-end: 22px;
	font-size: .95rem;
	color: var(--h-ink-2);
}

.mobile-nav__contact a {
	display: inline-block;
	padding-block: 8px;
}

.mobile-nav__contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.mobile-nav__contact .haram-icon {
	margin-block-start: 13px;
	color: var(--h-accent-text);
}

.mobile-nav__contact a:hover {
	color: var(--h-primary);
}

.mobile-nav__contact .mobile-nav__map {
	text-decoration-line: underline;
	text-decoration-color: rgba(var(--h-dark-rgb), .26);
	text-underline-offset: 4px;
	transition: color var(--h-t), text-decoration-color var(--h-t);
}

.mobile-nav__contact .mobile-nav__map:hover,
.mobile-nav__contact .mobile-nav__map:focus-visible {
	color: var(--h-primary);
	text-decoration-color: var(--h-accent-text);
}

.mobile-nav__social {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mobile-nav__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--h-r-pill);
	background: var(--h-light);
	color: var(--h-ink-2);
	opacity: 1;
	transition: background-color var(--h-t), color var(--h-t);
}

.mobile-nav__social a:hover {
	background: var(--h-primary);
	color: var(--h-white);
}

/* المحتوى الرئيسي يزاح تحت الهيدر الثابت إن لم يكن هناك بطل */
.site-main {
	display: block;
}

body:not(.has-transparent-header) .site-main {
	padding-block-start: var(--h-header-h);
}


/* ==========================================================================
   ٠٨ — البطل
   صورة ملوّنة ملء الشاشة + تدرّج داكن أسفل + عنوان كبير + سطر + زرّان.
   ========================================================================== */
.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-block-size: min(88vh, 820px);
	padding-block: calc(var(--h-header-h) + 56px) clamp(72px, 9vh, 116px);
	background: var(--h-primary);
	color: var(--h-white);
	overflow: hidden;
}

.hero__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/*
 * الشريحة الخارجة تبقى على مقياسها النهائي أثناء التلاشي، والداخلة تبدأ
 * زحفها من جديد — فالانتقال تلاشٍ ناعم لا قفزة في التكبير.
 */
.hero__slide {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	transform: scale(1.075);
	transition: opacity 1.2s var(--h-ease-soft);
	will-change: opacity, transform;
}

.hero__slide.is-active {
	opacity: 1;
	animation: haram-kenburns 20s linear forwards;
}

/* كن-بيرنز بطيء جداً: ٧٪ تكبير على مدى عشرين ثانية — يُحسّ ولا يُلاحظ */
@keyframes haram-kenburns {

	from {
		transform: scale(1.005);
	}

	to {
		transform: scale(1.075);
	}
}

.hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to top, rgba(var(--h-dark-rgb), .86) 0%, rgba(var(--h-dark-rgb), .46) 58%, rgba(var(--h-dark-rgb), .24) 100%),
		linear-gradient(to bottom, rgba(var(--h-dark-rgb), .40), transparent 30%);
}

.hero .container {
	position: relative;
	z-index: 2;
	inline-size: 100%;
}

.hero__inner {
	/* عرض يكفي ليستقر العنوان في سطر واحد على الشاشات الكبيرة. */
	max-inline-size: min(46rem, 92%);
}

.hero__text,
.hero__lead {
	/* الفقرة تبقى بعرض قراءة مريح داخل الغلاف الأوسع. */
	max-inline-size: 34rem;
}

/*
 * قاعدة العميل: البطل فكرة واحدة مسيطرة — عنوان + سطر + زر.
 * الرمش العلوي محذوف بصرياً لتقليل الازدحام، ومعلوماته موجودة في «من نحن».
 */
.hero__eyebrow {
	display: none;
}

.hero__copy {
	position: relative;
}

.hero__copy-item {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition:
		opacity .7s var(--h-ease-soft),
		transform .7s var(--h-ease-soft),
		visibility .7s;
}

.hero__copy-item.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.hero__title {
	font-family: var(--h-font-head);
	font-size: clamp(2.4rem, 5.2vw, 4rem);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.022em;
	color: var(--h-white);
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .28);
}

.hero__title mark {
	color: var(--h-accent-on-dark);
}

.hero__lede,
.hero__text {
	margin-block-start: var(--h-s-3);
	max-inline-size: 60ch;
	font-size: clamp(1.02rem, 1.4vw, 1.15rem);
	line-height: 1.9;
	color: rgba(255, 255, 255, .86);
	text-wrap: pretty;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .22);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-block-start: var(--h-s-4);
}

/*
 * مؤشرات الشرائح — دوائر صغيرة، تظهر فقط عند وجود أكثر من شريحة.
 *
 * ‎--h-dot-gap‎ رقم واحد يُقرأ مرّتين: هو تباعد النقاط، وهو أيضاً المقدار
 * الذي يتمدّد به مربّع اللمس تحت كل نقطة. ولأن التمدّد بمقدار الفجوة
 * نفسها تتلاصق مساحات اللمس بلا تداخل ولا فراغ ميت بينها، فلا تذهب
 * النقرة إلى النقطة المجاورة. ويتّسع الرقم على شاشات اللمس أدناه.
 */
.hero__dots {
	--h-dot-gap: 16px;
	position: absolute;
	inset-block-end: 34px;
	inset-inline-start: 50%;
	transform: translateX(50%);
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: var(--h-dot-gap);
	row-gap: 16px;
	max-inline-size: min(86vw, 560px);
}

[dir="ltr"] .hero__dots {
	transform: translateX(-50%);
}

/*
 * لا ‎overflow: hidden‎ هنا: مساحة اللمس عنصر زائف يتجاوز حدود النقطة،
 * والقصّ كان سيبتلعها. ومؤشّر التقدّم لا يحتاجه أصلاً لأنه يرث نصف
 * القطر نفسه ولا يخرج عن صندوق النقطة.
 */
.hero__dot {
	position: relative;
	inline-size: 9px;
	block-size: 9px;
	padding: 0;
	border-radius: var(--h-r-pill);
	background: rgba(255, 255, 255, .38);
	transition:
		background-color var(--h-t),
		inline-size .42s var(--h-ease-soft);
}

/*
 * مساحة اللمس (WCAG 2.5.8): النقطة تبقى ٩ بكسل مرئية — أنيقة صغيرة —
 * ويتمدّد تحتها مربّع شفاف ارتفاعه ٤٤ بكسل وعرضه عرضُ النقطة زائداً
 * الفجوة كاملة، بحدّ أدنى ٢٤ بكسل. التوسيط بـ‎inset-inline-start: 50%‎
 * مع إزاحة نصف العرض، وإشارة الإزاحة تنقلب مع اتجاه الصفحة.
 */
.hero__dot::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: calc(100% + var(--h-dot-gap));
	min-inline-size: 24px;
	block-size: 44px;
	transform: translate(50%, -50%);
}

[dir="ltr"] .hero__dot::before {
	transform: translate(-50%, -50%);
}

.hero__dot:hover {
	background: rgba(255, 255, 255, .72);
}

/* النقطة النشطة تستطيل إلى مضمار، ويمتلئ داخله مؤشّر التقدّم */
.hero__dot.is-active {
	inline-size: 42px;
	background: rgba(255, 255, 255, .34);
}

/*
 * مؤشّر التقدّم داخل النقطة — عقده مع main.js:
 *   • السكربت يضع ‎<span class="hero__dot-fill">‎ داخل كل نقطة إن غاب،
 *   • ويضع ‎.has-dot-progress‎ على ‎.hero‎ حين يكون التشغيل التلقائي عاملاً،
 *   • ويضيف ‎.is-filling‎ لمؤشّر الشريحة الحالية بعد تصفيره،
 *   • ويكتب ‎--h-hero-interval‎ و‎animation-duration‎ بالفاصل الحقيقي.
 * فإن توقّف العدّ (مرور الفأرة) جمّد السكربت الحركة بـ‎animation-play-state‎.
 */
.hero__dot-fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 0;
	border-radius: inherit;
	background: var(--h-white);
	pointer-events: none;
}

/* بلا تشغيل تلقائي: النقطة النشطة ممتلئة ثابتة — مؤشّر موضع لا عدّاد */
.hero__dot.is-active .hero__dot-fill {
	inline-size: 100%;
}

.hero.has-dot-progress .hero__dot.is-active .hero__dot-fill {
	inline-size: 0;
}

.hero.has-dot-progress .hero__dot.is-active .hero__dot-fill.is-filling {
	animation: haram-dot-fill var(--h-hero-interval) linear forwards;
}

/*
 * احتياطي بلا جافاسكربت: لا عنصر داخلي ولا تبديل تلقائي،
 * فيُرسم المؤشّر ممتلئاً بعنصر زائف ليبقى موضع الشريحة واضحاً.
 */
.hero__dot.is-active:not(:has(.hero__dot-fill))::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline: 0;
	border-radius: inherit;
	background: var(--h-white);
	pointer-events: none;
}

@keyframes haram-dot-fill {

	from {
		inline-size: 0;
	}

	to {
		inline-size: 100%;
	}
}

/*
 * زر إيقاف/تشغيل الدوران (WCAG 2.2.2) — يبنيه main.js داخل ‎.hero__dots‎
 * ولا يُطبع في القالب، لأن وجوده مشروط بوجود دوران فعلي.
 *
 * صغير ومرئي: قرص ٣٤ بكسل من زجاج شفاف على صورة البطل، ومساحة لمسه
 * ٤٤×٤٤ بالعنصر الزائف نفسه المستعمل في النقاط.
 */
.hero__toggle {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 34px;
	block-size: 34px;
	margin-inline-start: 6px;
	border-radius: var(--h-r-pill);
	border: 1px solid rgba(255, 255, 255, .34);
	background: rgba(255, 255, 255, .14);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--h-white);
	transition:
		background-color var(--h-t),
		border-color var(--h-t);
}

.hero__toggle::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 44px;
	block-size: 44px;
	transform: translate(50%, -50%);
}

[dir="ltr"] .hero__toggle::before {
	transform: translate(-50%, -50%);
}

.hero__toggle:hover {
	background: rgba(255, 255, 255, .28);
	border-color: rgba(255, 255, 255, .55);
}

.hero__toggle-glyph {
	inline-size: 13px;
	block-size: 13px;
	fill: currentColor;
	pointer-events: none;
}

/* الأيقونة تتبع الحالة: «إيقاف» أثناء الدوران و«تشغيل» بعد إيقافه. */
.hero__toggle-glyph--play,
.hero.is-paused .hero__toggle-glyph--pause {
	display: none;
}

.hero.is-paused .hero__toggle-glyph--play {
	display: block;
}

/*
 * شاشات اللمس: الإصبع أعرض من مؤشّر الفأرة بكثير، فتتّسع الفجوة حتى
 * يبلغ مربّع اللمس ٤٤×٤٤ كاملة — ٩ للنقطة و٣٥ للفجوة — بلا أن يمسّ
 * جارَه. وعلى الشاشات الضيّقة تلتفّ الصفوف بدل أن تفيض.
 */
@media (pointer: coarse) {

	.hero__dots {
		--h-dot-gap: 35px;
	}
}

/* مؤشّر التمرير للأسفل */
.hero__scroll {
	position: absolute;
	inset-block-end: 30px;
	inset-inline-end: var(--h-gutter);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--h-r-pill);
	border: 1px solid rgba(255, 255, 255, .32);
	color: var(--h-white);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	transition: background-color var(--h-t), border-color var(--h-t), transform var(--h-t);
	animation: haram-float 3.2s var(--h-ease-soft) infinite;
}

.hero__scroll:hover {
	background: rgba(255, 255, 255, .18);
	border-color: rgba(255, 255, 255, .6);
	animation: none;
	transform: translateY(3px);
}

@keyframes haram-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(6px); }
}

/* ==========================================================================
   ٠٩ — البطاقات
   بيضاء، زوايا 16px، ظل ناعم، ورفع لطيف عند hover مع تكبير الصورة.
   ========================================================================== */

/* --------------------------------------------------------------------------
   بطاقة المشروع
   -------------------------------------------------------------------------- */
.project-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
	transition: transform var(--h-t), box-shadow var(--h-t), border-color var(--h-t);
}

.project-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--h-shadow-3);
	border-color: rgba(var(--h-accent-rgb), .28);
}

.project-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: var(--h-primary-soft);
}

.project-card__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--h-t-slow);
}

.project-card:hover .project-card__img {
	transform: scale(1.06);
}

.project-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(var(--h-dark-rgb), .38), transparent 55%);
	opacity: 0;
	transition: opacity var(--h-t);
}

.project-card:hover .project-card__media::after {
	opacity: 1;
}

.project-card__cat {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-start: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--h-r-pill);
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--h-primary);
	font-family: var(--h-font-head);
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.7;
	box-shadow: 0 2px 10px rgba(var(--h-ink-rgb), .12);
}

.project-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	padding: 22px 24px 24px;
}

.project-card__title {
	font-size: 1.16rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--h-primary);
	transition: color var(--h-t);
}

.project-card:hover .project-card__title {
	color: var(--h-accent-text);
}

.project-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	font-size: .9rem;
	color: var(--h-ink-2);
}

.project-card__meta-item,
.project-card__place,
.project-card__year {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.project-card__meta-item + .project-card__meta-item::before,
.project-card__place + .project-card__year::before {
	content: "·";
	margin-inline-end: 8px;
	color: var(--h-accent);
	font-weight: 700;
}

.project-card__meta .haram-icon {
	color: var(--h-accent-text);
}

.project-card__link {
	margin-block-start: auto;
	padding-block-start: 14px;
	align-self: flex-start;
}

/* البطاقة كلها قابلة للنقر */
.project-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
}

/* --------------------------------------------------------------------------
   بطاقة الخدمة
   -------------------------------------------------------------------------- */
.service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 34px 30px;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
	transition: transform var(--h-t), box-shadow var(--h-t), border-color var(--h-t);
}

.service-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--h-shadow-3);
	border-color: rgba(var(--h-accent-rgb), .28);
}

.service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 72px;
	block-size: 72px;
	border-radius: var(--h-r-pill);
	background: var(--h-icon-bg);
	color: var(--h-primary);
	transition: background-color var(--h-t), transform var(--h-t);
}

.service-card:hover .service-card__icon {
	background: rgba(var(--h-accent-rgb), .14);
	transform: translateY(-2px);
}

.service-card__icon-img {
	inline-size: 38px;
	block-size: 38px;
	object-fit: contain;
}

.service-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
}

.service-card__title {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--h-primary);
}

.service-card__text {
	font-size: 1rem;
	line-height: 1.85;
	color: var(--h-ink-2);
}

.service-card__link,
.service-card__more {
	margin-block-start: auto;
	padding-block-start: 6px;
	align-self: flex-start;
}

.service-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
}

/* --------------------------------------------------------------------------
   بطاقة العميل
   -------------------------------------------------------------------------- */
.client-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 148px;
	padding: 26px 20px;
	text-align: center;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
	transition: transform var(--h-t), box-shadow var(--h-t), border-color var(--h-t);
}

.client-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--h-shadow-2);
	border-color: rgba(var(--h-accent-rgb), .30);
}


.client-card__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-block-size: 54px;
	margin-block-end: 4px;
}

.client-card__logo img {
	max-block-size: 54px;
	inline-size: auto;
	object-fit: contain;
}

.client-card__name {
	font-family: var(--h-font-head);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--h-primary);
}


/* --------------------------------------------------------------------------
   بطاقة الشهادة
   -------------------------------------------------------------------------- */
.cert-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
	transition: transform var(--h-t), box-shadow var(--h-t);
}

.cert-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--h-shadow-3);
}

.cert-card__media {
	display: block;
	padding: 22px;
	background: var(--h-light);
	border-block-end: 1px solid var(--h-card-line);
	cursor: zoom-in;
}

.cert-card__img {
	inline-size: 100%;
	block-size: 260px;
	object-fit: contain;
	transition: transform var(--h-t-slow);
}

.cert-card:hover .cert-card__img {
	transform: scale(1.04);
}

.cert-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	padding: 24px 26px 26px;
}

.cert-card__standard {
	display: inline-flex;
	align-self: flex-start;
	padding: 5px 14px;
	border-radius: var(--h-r-pill);
	background: var(--h-pill-bg);
	color: var(--h-accent-text);
	font-family: var(--h-font-head);
	font-size: .78rem;
	font-weight: 700;
	direction: ltr;
}

.cert-card__title {
	font-size: 1.14rem;
	font-weight: 700;
	color: var(--h-primary);
}


.cert-card__text {
	font-size: .98rem;
	line-height: 1.85;
	color: var(--h-ink-2);
}

.cert-card__meta {
	display: grid;
	gap: 8px;
	margin-block-start: 6px;
	padding-block-start: 14px;
	border-block-start: 1px solid var(--h-line);
}

.cert-card__meta > div {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	font-size: .92rem;
}

.cert-card__meta dt {
	color: var(--h-ink-3);
	font-weight: 500;
}

.cert-card__meta dd {
	margin: 0;
	color: var(--h-ink);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   بطاقة المعدّة
   -------------------------------------------------------------------------- */
.equipment-card {
	overflow: hidden;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
	transition: transform var(--h-t), box-shadow var(--h-t);
}

.equipment-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--h-shadow-3);
}

.equipment-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--h-primary-soft);
	cursor: zoom-in;
}

.equipment-card__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--h-t-slow);
}

.equipment-card:hover .equipment-card__img {
	transform: scale(1.06);
}

.equipment-card__caption {
	padding: 16px 20px 18px;
	font-family: var(--h-font-head);
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.7;
	color: var(--h-primary);
}

/* --------------------------------------------------------------------------
   بطاقة الفرع
   -------------------------------------------------------------------------- */
.branch-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 30px 28px;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
	transition: transform var(--h-t), box-shadow var(--h-t), border-color var(--h-t);
}

.branch-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--h-shadow-2);
	border-color: rgba(var(--h-accent-rgb), .28);
}


.branch-card__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 56px;
	block-size: 56px;
	border-radius: var(--h-r-pill);
	background: var(--h-icon-bg);
	color: var(--h-primary);
}

.branch-card__logo img {
	max-inline-size: 34px;
	max-block-size: 34px;
	object-fit: contain;
}

.branch-card__title {
	font-size: 1.18rem;
	font-weight: 700;
	color: var(--h-primary);
}

.branch-card__text {
	font-size: .98rem;
	line-height: 1.85;
	color: var(--h-ink-2);
}

.branch-card__meta {
	display: grid;
	gap: 10px;
	margin-block-start: 4px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--h-line);
	font-size: .95rem;
	color: var(--h-ink-2);
}

.branch-card__meta a,
.branch-card__meta span {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.branch-card__meta .haram-icon {
	color: var(--h-accent-text);
}

.branch-card__meta a:hover {
	color: var(--h-primary);
}

/* --------------------------------------------------------------------------
   بطاقة المقال (المدونة والبحث والأرشيف)
   -------------------------------------------------------------------------- */
.post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
	transition: transform var(--h-t), box-shadow var(--h-t);
}

.post-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--h-shadow-3);
}

.post-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--h-primary-soft);
}

.post-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--h-t-slow);
}

.post-card:hover .post-card__media img {
	transform: scale(1.06);
}

.post-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
	padding: 24px 26px 26px;
}

.post-card__text {
	font-size: .98rem;
	line-height: 1.85;
	color: var(--h-ink-2);
}

.post-card__link {
	margin-block-start: auto;
	padding-block-start: 8px;
	align-self: flex-start;
}

.post-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
}

/* ==========================================================================
   ١٠ — أقسام الصفحة الرئيسية والصفحات التعريفية
   ========================================================================== */

/* --------------------------------------------------------------------------
   من نحن
   -------------------------------------------------------------------------- */
.about__grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.about__grid--flip {
	grid-template-columns: 1fr 1.05fr;
}

.about__grid--flip .about__media {
	order: -1;
}

.about__grid--no-media {
	grid-template-columns: 1fr;
	max-inline-size: 78ch;
}

.about__media {
	position: relative;
	margin: 0;
	border-radius: var(--h-r-lg);
	overflow: hidden;
	box-shadow: var(--h-shadow-2);
}

.about__img {
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--h-t-slow);
}

.about__media:hover .about__img {
	transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   لوح الهوية — يحلّ محلّ الصورة في «من نحن»
   لوح هادئ بحدّ برونزي شعري وإطار داخلي رقيق، الشعار في وسطه، وتحته
   خطّ برونزي قصير ثم سطر الشعار الصغير. لا ظلّ ثقيل ولا زخرفة زائدة:
   يجب أن يُقرأ كلوح هوية معلّق، لا كبطاقة محتوى.
   -------------------------------------------------------------------------- */
.about__media--brand {
	display: flex;
	/* يمتدّ ليساوي ارتفاع العمود النصّي مهما طال */
	align-self: stretch;
	overflow: visible;
	border-radius: var(--h-r-lg);
	box-shadow: none;
}

.about__brand {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--h-s-3);
	min-block-size: 340px;
	padding: clamp(40px, 6vw, 76px) clamp(28px, 5vw, 56px);
	border: 1px solid rgba(var(--h-accent-rgb), .26);
	border-radius: var(--h-r-lg);
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, 0) 62%),
		linear-gradient(162deg, var(--h-white) 0%, var(--h-light) 58%, rgba(var(--h-accent-rgb), .07) 100%);
	box-shadow:
		0 1px 2px rgba(var(--h-ink-rgb), .03),
		0 18px 46px rgba(var(--h-ink-rgb), .05);
	overflow: hidden;
	text-align: center;
}

/*
 * إطار داخلي شعري — تفصيلة اللوح الفاخر.
 * يُرسم على ‎::before‎ عمداً: هو نفسه العنصر الزائف الذي تستعمله
 * ‎assets/css/sections.css‎ للوح نفسه، فإن حضرت ورقتها حلّت قيمها محلّ
 * هذه ورُسم إطار واحد لا اثنان.
 */
.about__brand::before {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px solid rgba(var(--h-accent-rgb), .15);
	border-radius: calc(var(--h-r-lg) - 7px);
	pointer-events: none;
}

.about__brand-logo {
	inline-size: min(300px, 76%);
	block-size: auto;
	object-fit: contain;
}

.about__brand-rule {
	display: block;
	inline-size: 64px;
	block-size: 2px;
	border-radius: 2px;
	background: linear-gradient(to left, rgba(var(--h-accent-rgb), 0), var(--h-accent), rgba(var(--h-accent-rgb), 0));
}

.about__brand-tagline {
	margin: 0;
	font-family: var(--h-font-head);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.8;
	/* تباعد لطيف بين الكلمات وحرف شبه معدوم: العربية لا تحتمل فكّ الوصل */
	letter-spacing: .04em;
	word-spacing: .18em;
	color: var(--h-accent-text);
}

/* على الشاشات المتوسطة يصير اللوح عموداً كاملاً فنحدّ عرضه ونتوسّطه */
@media (max-width: 992px) {

	.about__media--brand {
		max-inline-size: 560px;
		margin-inline: auto;
	}

	.about__brand {
		min-block-size: 280px;
	}
}

.about__panel,
.about__body {
	display: flex;
	flex-direction: column;
}

.about__text {
	font-size: 1.05rem;
	line-height: 1.95;
	color: var(--h-fg-soft);
}

.about__text p + p {
	margin-block-start: 1em;
}

.about__classification {
	margin-block-start: 18px;
	padding: 14px 20px;
	border-inline-start: 3px solid var(--h-accent);
	border-radius: var(--h-r-sm);
	background: var(--h-primary-wash);
	font-family: var(--h-font-head);
	font-size: 1rem;
	font-weight: 600;
	color: var(--h-primary);
}


/* خطوات «كيف نعمل» */
.about-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--h-gap);
	margin-block-start: clamp(40px, 5vw, 72px);
}

.about-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 30px 26px;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
	transition: transform var(--h-t), box-shadow var(--h-t);
}

.about-step:hover {
	transform: translateY(-6px);
	box-shadow: var(--h-shadow-2);
}

.about-step__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 60px;
	block-size: 60px;
	border-radius: var(--h-r-pill);
	background: var(--h-icon-bg);
	color: var(--h-primary);
}

.about-step__icon img {
	inline-size: 32px;
	block-size: 32px;
	object-fit: contain;
}

.about-step__num {
	position: absolute;
	inset-block-start: 22px;
	inset-inline-end: 26px;
	font-family: var(--h-font-head);
	font-size: .86rem;
	font-weight: 700;
	line-height: 1;
	color: var(--h-accent-text);
}

.about-step__title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--h-primary);
}

.about-step__text {
	font-size: .97rem;
	line-height: 1.85;
	color: var(--h-ink-2);
}

/* --------------------------------------------------------------------------
   الخدمات
   -------------------------------------------------------------------------- */
.services__intro {
	max-inline-size: 70ch;
}

.services .services__grid,
.services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--h-gap);
}


/* --------------------------------------------------------------------------
   الإحصائيات — القسم الداكن الوحيد
   -------------------------------------------------------------------------- */
.section.stats {
	background: var(--h-primary);
	color: var(--h-white);
	border: 0;
}

.stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: clamp(28px, 3.4vw, 48px);
	text-align: center;
}

.stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	position: relative;
}

.stat + .stat::before {
	content: "";
	position: absolute;
	inset-block: 12px;
	inset-inline-start: calc(var(--h-gap) * -0.5);
	inline-size: 1px;
	background: rgba(255, 255, 255, .16);
}

.stat__value {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-family: var(--h-font-head);
	font-size: clamp(2.4rem, 4.6vw, 3.6rem);
	font-weight: 800;
	line-height: 1.05;
	color: var(--h-white);
	direction: ltr;
}

.stat__num {
	font-variant-numeric: tabular-nums;
}

.stat__suffix {
	font-size: .5em;
	font-weight: 700;
	color: var(--h-accent-on-dark);
}

.stat__label {
	font-size: .98rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, .78);
}

/* --------------------------------------------------------------------------
   المشاريع
   -------------------------------------------------------------------------- */
.projects__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--h-gap);
}

.projects__actions,
.projects__more {
	display: flex;
	justify-content: center;
	margin-block-start: clamp(36px, 4vw, 56px);
}

/* شريط التصفية */
.project-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-end: clamp(28px, 3.4vw, 44px);
}

.project-filter__btn {
	display: inline-flex;
	align-items: center;
	padding: 10px 22px;
	border: 1px solid var(--h-line-strong);
	border-radius: var(--h-r-pill);
	background: transparent;
	color: var(--h-ink-2);
	font-family: var(--h-font-head);
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--h-t), border-color var(--h-t), color var(--h-t);
}

.project-filter__btn:hover {
	border-color: var(--h-primary);
	color: var(--h-primary);
}

.project-filter__btn.is-active {
	background: var(--h-primary);
	border-color: var(--h-primary);
	color: var(--h-white);
}

.is-filtered-out {
	display: none !important;
}

/* --------------------------------------------------------------------------
   سياسة الجودة
   -------------------------------------------------------------------------- */
.quality__grid {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.quality__intro {
	position: sticky;
	inset-block-start: calc(var(--h-header-now-h) + 32px);
}

.quality__text {
	font-size: 1.05rem;
	line-height: 1.95;
	color: var(--h-fg-soft);
}

.quality__list {
	display: grid;
	gap: 16px;
}

.quality-item {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 24px 26px;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
	transition: transform var(--h-t), box-shadow var(--h-t);
}

.quality-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--h-shadow-2);
}

.quality-item__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 42px;
	block-size: 42px;
	border-radius: var(--h-r-pill);
	background: var(--h-icon-bg);
	color: var(--h-primary);
	font-family: var(--h-font-head);
	font-size: .95rem;
	font-weight: 800;
}

.quality-item__dot {
	display: none;
}

.quality-item__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.quality-item__title {
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--h-primary);
}

.quality-item__text {
	font-size: .98rem;
	line-height: 1.85;
	color: var(--h-ink-2);
}

/* --------------------------------------------------------------------------
   كلمة المدير العام
   -------------------------------------------------------------------------- */
.gm__grid {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

/* بلا صورة: عمود واحد بعرض قراءة مريح بدل عمود فارغ. */
.gm__grid:not(.gm__grid--media) {
	grid-template-columns: minmax(0, 1fr);
}

.gm__grid:not(.gm__grid--media) .gm__body {
	max-inline-size: 68ch;
	margin-inline: auto;
}

.gm__grid--media {
	grid-template-columns: .85fr 1.15fr;
}

.gm__aside {
	position: relative;
	padding: 34px 32px;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-lg);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
}

.gm__media {
	border-radius: var(--h-r-lg);
	overflow: hidden;
	box-shadow: var(--h-shadow-2);
}

.gm__photo {
	inline-size: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.gm__mark,
.gm__quote-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	margin-block-end: 16px;
	border-radius: var(--h-r-pill);
	background: var(--h-pill-bg);
	color: var(--h-accent-text);
	font-family: var(--h-font-head);
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1;
}

.gm__quote {
	margin: 0;
}

.gm__quote-text {
	display: block;
	font-family: var(--h-font-head);
	font-size: clamp(1.1rem, 1.8vw, 1.35rem);
	font-weight: 600;
	line-height: 1.75;
	color: var(--h-primary);
}

.gm__sign {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-block-start: 22px;
	padding-block-start: 18px;
	border-block-start: 1px solid var(--h-line);
}

.gm__name {
	font-family: var(--h-font-head);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--h-primary);
}

.gm__role {
	font-size: .92rem;
	color: var(--h-ink-3);
}

.gm__body,
.gm__text {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.gm__para,
.gm__text p {
	font-size: 1.05rem;
	line-height: 1.95;
	color: var(--h-fg-soft);
}

/* --------------------------------------------------------------------------
   الرؤية والرسالة
   -------------------------------------------------------------------------- */
/*
 * قسم الرؤية والرسالة: أرضيته فاتحة في القوالب الحالية، ويصير أبيض النصّ
 * فقط إذا وُضعت له صورة خلفية (‎.section--media‎).
 */
.vision.section--media {
	color: var(--h-white);
}

.vision__overlay,
.cta__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(var(--h-dark-rgb), .86), rgba(var(--h-dark-rgb), .62) 60%, rgba(var(--h-dark-rgb), .55));
}

.vision .container,
.cta .container {
	position: relative;
	z-index: 2;
}

/*
 * ملاحظة الرؤية: نصّ حقيقي من الملف التعريفي وليس زخرفة، فيُعرض كسطر
 * تمهيدي واضح — لا عنوان شبحي مفرّغ ولا -webkit-text-stroke.
 */
.vision__ghost {
	max-inline-size: 62ch;
	margin-block-end: clamp(28px, 3.4vw, 44px);
	font-family: var(--h-font-head);
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	font-weight: 600;
	line-height: 1.8;
	color: var(--h-fg-soft);
	-webkit-text-stroke: 0;
}

.vision__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--h-gap);
}

.vision-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 36px 34px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--h-r-lg);
	background: rgba(255, 255, 255, .08);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: transform var(--h-t), background-color var(--h-t);
}

.vision-card:hover {
	transform: translateY(-6px);
	background: rgba(255, 255, 255, .13);
}

.vision-card__title {
	font-size: clamp(1.3rem, 2vw, 1.6rem);
	font-weight: 700;
	color: var(--h-white);
}

.vision-card__text {
	font-size: 1.02rem;
	line-height: 1.9;
	color: rgba(255, 255, 255, .82);
}

/* نسخة صفحة «من نحن»: الرؤية والرسالة على أرضية فاتحة */
.vm__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--h-gap);
}

.vm__media {
	margin-block-end: clamp(28px, 3.4vw, 44px);
	border-radius: var(--h-r-lg);
	overflow: hidden;
	box-shadow: var(--h-shadow-2);
}

.vm__img {
	inline-size: 100%;
	block-size: clamp(220px, 30vw, 380px);
	object-fit: cover;
}

.vm__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 34px 32px;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-lg);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
	transition: transform var(--h-t), box-shadow var(--h-t);
}

.vm__card:hover {
	transform: translateY(-6px);
	box-shadow: var(--h-shadow-2);
}

.vm__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 64px;
	block-size: 64px;
	border-radius: var(--h-r-pill);
	background: var(--h-icon-bg);
	color: var(--h-primary);
}

.vm__title {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--h-primary);
}

.vm__text {
	font-size: 1.02rem;
	line-height: 1.9;
	color: var(--h-ink-2);
}

/* --------------------------------------------------------------------------
   القيم
   -------------------------------------------------------------------------- */
.values__intro {
	max-inline-size: 70ch;
}

.values__text {
	font-size: 1.05rem;
	line-height: 1.95;
	color: var(--h-fg-soft);
}

.values__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin-block-start: clamp(32px, 4vw, 52px);
}

.values-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
	transition: transform var(--h-t), box-shadow var(--h-t);
}

.values-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--h-shadow-2);
}

.values-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--h-r-pill);
	background: var(--h-icon-bg);
	color: var(--h-primary);
}

.values-item__title {
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--h-primary);
}

.values-item__text {
	font-size: .95rem;
	line-height: 1.8;
	color: var(--h-ink-2);
}

.values-item__dot {
	display: none;
}

/* شبكة بطاقات القيم في صفحة «من نحن» */
.values-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--h-gap);
}

.value-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px 28px;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
	transition: transform var(--h-t), box-shadow var(--h-t);
}

.value-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--h-shadow-2);
}

.value-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 64px;
	block-size: 64px;
	border-radius: var(--h-r-pill);
	background: var(--h-icon-bg);
	color: var(--h-primary);
}

.value-card__title {
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--h-primary);
}

.value-card__text {
	font-size: .98rem;
	line-height: 1.85;
	color: var(--h-ink-2);
}

/* --------------------------------------------------------------------------
   الأهداف
   -------------------------------------------------------------------------- */
.goals {
	margin-block-start: clamp(48px, 6vw, 88px);
}

.goals__title {
	margin-block-end: clamp(24px, 3vw, 40px);
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	font-weight: 700;
	color: var(--h-fg-title);
}

.goals__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--h-gap);
}

.goal,
.goal-item {
	position: relative;
	display: flex;
	gap: 16px;
	padding: 26px 26px;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
	transition: transform var(--h-t), box-shadow var(--h-t);
}

.goal-item {
	flex-direction: column;
	gap: 10px;
}

.goal:hover,
.goal-item:hover {
	transform: translateY(-5px);
	box-shadow: var(--h-shadow-2);
}

.goal__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 42px;
	block-size: 42px;
	border-radius: var(--h-r-pill);
	background: var(--h-icon-bg);
	color: var(--h-primary);
	font-family: var(--h-font-head);
	font-weight: 800;
	font-size: .95rem;
}

.goal-item__num {
	font-family: var(--h-font-head);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
	color: var(--h-accent-text);
}

.goal__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.goal__title,
.goal-item__title {
	font-size: 1.06rem;
	font-weight: 700;
	color: var(--h-primary);
}

.goal__text,
.goal-item__text {
	font-size: .97rem;
	line-height: 1.85;
	color: var(--h-ink-2);
}

/* --------------------------------------------------------------------------
   لماذا نحن
   -------------------------------------------------------------------------- */
/*
 * خمس بطاقات في شبكة رباعية تترك بطاقة يتيمة في سطر ثانٍ.
 * نستعمل flex مع توسيط السطر الأخير فتتوزّع البطاقات بشكل متزن.
 */
.why__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--h-gap);
}

.why__grid > * {
	flex: 1 1 clamp(250px, 22%, 300px);
	max-inline-size: 340px;
}

.why-item {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px 28px;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
	transition: transform var(--h-t), box-shadow var(--h-t), border-color var(--h-t);
}

.why-item:hover {
	transform: translateY(-6px);
	box-shadow: var(--h-shadow-2);
	border-color: rgba(var(--h-accent-rgb), .28);
}

.why-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 64px;
	block-size: 64px;
	border-radius: var(--h-r-pill);
	background: var(--h-icon-bg);
	color: var(--h-primary);
}

.why-item__title {
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--h-primary);
}

.why-item__text {
	font-size: .98rem;
	line-height: 1.85;
	color: var(--h-ink-2);
}

/* --------------------------------------------------------------------------
   نبذة تاريخية
   -------------------------------------------------------------------------- */
.history__inner {
	max-inline-size: 74ch;
	margin-inline: auto;
	text-align: center;
}

.history__inner .section-head {
	max-inline-size: none;
	margin-inline: auto;
	margin-block-end: 24px;
}

.history__text {
	font-size: clamp(1.05rem, 1.5vw, 1.18rem);
	line-height: 2;
	color: var(--h-fg-soft);
}

/* --------------------------------------------------------------------------
   الآلات والمعدّات
   -------------------------------------------------------------------------- */
.equipment .equipment__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: var(--h-gap);
}


.equipment__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-block-start: clamp(28px, 3.4vw, 44px);
	padding-block-start: 26px;
	border-block-start: 1px solid var(--h-line);
}

.equipment__location {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .98rem;
	color: var(--h-fg-soft);
}

.equipment__location-icon {
	display: inline-flex;
	color: var(--h-accent-text);
}

.equipment__location-text {
	font-family: var(--h-font-head);
	font-weight: 700;
	color: var(--h-fg);
}

.equipment__location-note {
	color: var(--h-fg-faint);
}

.equipment__brands {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.equipment__brand {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	border: 1px solid var(--h-line-strong);
	border-radius: var(--h-r-pill);
	font-family: var(--h-font-head);
	font-size: .84rem;
	font-weight: 600;
	color: var(--h-fg-soft);
}

/* --------------------------------------------------------------------------
   الفروع
   -------------------------------------------------------------------------- */
.branches__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.branches__grid--no-media {
	grid-template-columns: 1fr;
}

.branches__media {
	margin: 0;
	border-radius: var(--h-r-lg);
	overflow: hidden;
	box-shadow: var(--h-shadow-2);
}

.branches__img {
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.branches__body {
	display: flex;
	flex-direction: column;
}

.branches__list {
	display: grid;
	gap: 14px;
}

.branch {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 22px 24px;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
	transition: transform var(--h-t), box-shadow var(--h-t);
}

.branch:hover {
	transform: translateY(-4px);
	box-shadow: var(--h-shadow-2);
}

.branch__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--h-r-pill);
	background: var(--h-icon-bg);
	color: var(--h-primary);
	font-family: var(--h-font-head);
	font-size: .92rem;
	font-weight: 800;
}

.branch__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.branch__name {
	font-size: 1.06rem;
	font-weight: 700;
	color: var(--h-primary);
}

.branch__place,
.branch__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .95rem;
	color: var(--h-ink-2);
}

.branch__phone {
	direction: ltr;
	justify-content: flex-end;
}

.branch__phone:hover {
	color: var(--h-primary);
}

/* --------------------------------------------------------------------------
   الشهادات
   -------------------------------------------------------------------------- */
.certs .certs__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--h-gap);
}


.certs__actions {
	display: flex;
	justify-content: center;
	margin-block-start: clamp(32px, 4vw, 48px);
}


/* --------------------------------------------------------------------------
   العملاء
   -------------------------------------------------------------------------- */
.clients__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 16px;
}

/* --------------------------------------------------------------------------
   شريط الدعوة للتواصل
   -------------------------------------------------------------------------- */
.section.cta {
	background-color: var(--h-primary);
	color: var(--h-white);
	border: 0;
}

.cta__inner {
	max-inline-size: 74ch;
	margin-inline: auto;
	text-align: center;
}

.cta__title {
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	font-weight: 800;
	line-height: 1.25;
	color: var(--h-white);
}

.cta__text {
	margin-block-start: 16px;
	font-size: 1.08rem;
	line-height: 1.9;
	color: rgba(255, 255, 255, .84);
}

.cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-block-start: 32px;
}

/* --------------------------------------------------------------------------
   التواصل
   -------------------------------------------------------------------------- */
.contact__grid {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: clamp(32px, 4vw, 60px);
	align-items: start;
}

.contact__grid--info-only {
	grid-template-columns: 1fr;
}

.contact-info {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.contact-info__list {
	display: grid;
	gap: 14px;
}

.contact__grid--info-only .contact-info__list {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.contact-info__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 22px;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
	transition: transform var(--h-t), box-shadow var(--h-t);
}

.contact-info__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--h-shadow-2);
}

.contact-info__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 46px;
	block-size: 46px;
	border-radius: var(--h-r-pill);
	background: var(--h-icon-bg);
	color: var(--h-primary);
}

.contact-info__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-inline-size: 0;
}

.contact-info__label {
	font-size: .84rem;
	font-weight: 500;
	color: var(--h-fg-faint);
}

.contact-info__value {
	font-family: var(--h-font-head);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.7;
	color: var(--h-fg);
	overflow-wrap: anywhere;
}

a.contact-info__value:hover {
	color: var(--h-fg-accent);
}

.contact-info__pdf {
	margin: 0;
}

.contact-info__plate {
	overflow: hidden;
	border-radius: var(--h-r-card);
	box-shadow: var(--h-shadow-1);
}

.contact-info__plate img {
	inline-size: 100%;
	object-fit: cover;
}

.contact-info__social,
.contact-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.contact-info__social-link,
.contact-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--h-r-pill);
	border: 1px solid var(--h-line-strong);
	color: var(--h-fg-soft);
	transition: background-color var(--h-t), border-color var(--h-t), color var(--h-t), transform var(--h-t);
}

.contact-info__social-link:hover,
.contact-social a:hover {
	background: var(--h-primary);
	border-color: var(--h-primary);
	color: var(--h-white);
	transform: translateY(-3px);
}

.contact__map,
.contact-map {
	margin-block-start: clamp(32px, 4vw, 56px);
	overflow: hidden;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	box-shadow: var(--h-shadow-1);
	line-height: 0;
}

.contact-map {
	margin: 0;
	border-radius: 0;
	border-inline: 0;
}

.contact__map iframe,
.contact-map iframe {
	inline-size: 100%;
	block-size: clamp(300px, 42vw, 460px);
	border: 0;
	display: block;
}

/* ==========================================================================
   ١١ — الصفحات الداخلية
   ========================================================================== */

/* --------------------------------------------------------------------------
   ترويسة الصفحة الداخلية ومسار التنقل
   -------------------------------------------------------------------------- */
/*
 * مقاس واحد لكل الصفحات: ارتفاع الهيدر العائم فوق الشريط + منطقة ثابتة
 * للعنوان ومسار التنقل. العنوان الطويل (اسم مشروع مثلاً) يلتفّ داخل
 * المنطقة نفسها بدل أن يمدّ الشريط. النقش السداسي في signature.css.
 */
.page-hero {
	--hp-area: clamp(190px, 16vw, 230px);
	position: relative;
	display: flex;
	align-items: center;
	block-size: calc(var(--h-header-h) + var(--hp-area));
	padding-block: calc(var(--h-header-h) + 12px) 26px;
	background: var(--h-primary);
	color: var(--h-white);
	text-align: center;
	overflow: hidden;
}

.page-hero .container {
	position: relative;
	z-index: 2;
	inline-size: 100%;
}

.page-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-inline-size: 52rem;
	margin-inline: auto;
}

.page-hero__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	/* هامش يتّسع لنقاط الحروف وهمزاتها (نقطتا الياء الأخيرة تنزلان نحو .47em
	 * تحت خط الكتابة في Cairo) فلا يقصّها overflow */
	padding-block: .12em .22em;
	font-size: clamp(1.6rem, 2.9vw, 2.35rem);
	font-weight: 800;
	line-height: 1.3;
	color: var(--h-white);
}

/* اسم مشروع طويل: خطّ أصغر درجة حتى يبقى داخل الشريط نفسه */
.page-hero--long .page-hero__title {
	font-size: clamp(1.35rem, 2.2vw, 1.9rem);
}

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: .9rem;
	color: var(--h-fg-soft);
}

.page-hero__crumbs {
	justify-content: center;
	padding: 6px 16px;
	font-size: .85rem;
	border-radius: var(--h-r-pill);
	background: rgba(255, 255, 255, .12);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	inline-size: fit-content;
	max-inline-size: 100%;
	color: rgba(255, 255, 255, .82);
}

.breadcrumbs__link {
	color: inherit;
	transition: color var(--h-t);
}

.breadcrumbs__link:hover {
	color: var(--h-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.page-hero__crumbs .breadcrumbs__link:hover {
	color: var(--h-white);
}

.breadcrumbs__current {
	font-weight: 600;
	color: var(--h-fg);
}

.page-hero__crumbs .breadcrumbs__current {
	color: var(--h-white);
}

.breadcrumbs__sep {
	opacity: .5;
}

.breadcrumbs__item {
	opacity: .85;
}

/* --------------------------------------------------------------------------
   المشروع المفرد
   -------------------------------------------------------------------------- */
/*
 * بطاقة بيانات المشروع: أزواج «التسمية / القيمة» في شبكة مرنة، وزرّ
 * الدعوة في آخر البطاقة. تحلّ محلّ العمودين (نصّ + بطاقة جانبية) بعد أن
 * صارت صفحة المشروع بياناته وصوره فقط.
 */
.project-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 32px;
	margin-block-end: clamp(24px, 3vw, 40px);
	padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.8vw, 32px);
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-lg);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
}

.project-info__list {
	display: grid;
	flex: 1 1 520px;
	grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
	gap: 14px clamp(24px, 3.4vw, 48px);
	margin: 0;
}

.project-info__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.project-info__label {
	font-size: .82rem;
	color: var(--h-fg-faint);
}

.project-info__value {
	margin: 0;
	font-family: var(--h-font-head);
	font-size: .98rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--h-fg);
	overflow-wrap: anywhere;
}

.project-info__cta {
	flex: 0 0 auto;
}

.project-single__body {
	max-inline-size: var(--h-measure);
	margin-block-end: clamp(24px, 3vw, 40px);
}

/* --------------------------------------------------------------------------
   المعرض
   -------------------------------------------------------------------------- */
.project-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--h-gap);
	grid-auto-flow: dense;
}

.project-gallery__item {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
	transition: transform var(--h-t), box-shadow var(--h-t);
}

.project-gallery__item:hover {
	transform: translateY(-6px);
	box-shadow: var(--h-shadow-3);
}

.project-gallery__item--wide {
	grid-column: span 2;
}

.project-gallery__item--tall {
	grid-row: span 2;
}

.project-gallery__link {
	display: block;
	overflow: hidden;
	cursor: zoom-in;
	aspect-ratio: 4 / 3;
}

.project-gallery__item--tall .project-gallery__link {
	aspect-ratio: 3 / 4;
}

.project-gallery__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--h-t-slow);
}

.project-gallery__item:hover .project-gallery__img {
	transform: scale(1.06);
}

.project-gallery:has(> .project-gallery__item:only-child) {
	max-inline-size: 820px;
	margin-inline: auto;
}

/*
 * المعرض المنبثق (lightbox) يحقن تنسيقه الأساسي من assets/js/main.js،
 * وهنا نضمن فقط أنه فوق كل شيء وأن الصفحة خلفه لا تتحرك.
 */
.haram-lightbox {
	z-index: 1200;
}

/* --------------------------------------------------------------------------
   التنقل بين المشاريع
   -------------------------------------------------------------------------- */
.project-nav,
.post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-block-start: clamp(40px, 5vw, 64px);
	padding-block-start: clamp(28px, 3.4vw, 40px);
	border-block-start: 1px solid var(--h-line);
}

.project-nav__link,
.post-nav__link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 24px;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
	transition: transform var(--h-t), box-shadow var(--h-t), border-color var(--h-t);
}

.project-nav__link:hover,
.post-nav__link:hover {
	transform: translateY(-4px);
	box-shadow: var(--h-shadow-2);
	border-color: rgba(var(--h-accent-rgb), .28);
}

.project-nav__link--next,
.post-nav__link--next {
	flex-direction: row-reverse;
	text-align: end;
	grid-column: 2;
}

.project-nav__body,
.post-nav__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-inline-size: 0;
}

.project-nav__label,
.post-nav__label {
	font-size: .84rem;
	color: var(--h-ink-3);
}

.project-nav__title,
.post-nav__title {
	font-family: var(--h-font-head);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--h-primary);
}

.project-nav .haram-icon,
.post-nav .haram-icon {
	flex: 0 0 auto;
	color: var(--h-accent-text);
}

/* --------------------------------------------------------------------------
   الخدمة المفردة
   -------------------------------------------------------------------------- */
.service-single__head {
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 34px);
	padding-block-end: clamp(28px, 3.4vw, 40px);
	margin-block-end: clamp(28px, 3.4vw, 40px);
	border-block-end: 1px solid var(--h-line);
}

.service-single__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 96px;
	block-size: 96px;
	border-radius: var(--h-r-pill);
	background: var(--h-icon-bg);
	color: var(--h-primary);
}

.service-single__icon-img {
	inline-size: 50px;
	block-size: 50px;
	object-fit: contain;
}

.service-single__intro {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-inline-size: 0;
}


.service-single__text {
	font-size: 1.05rem;
	line-height: 1.9;
	color: var(--h-ink-2);
}

.service-single__rule {
	display: none;
}

.service-single__body {
	max-inline-size: 80ch;
	font-size: 1.05rem;
	line-height: 1.95;
}


/* ==========================================================================
   ١٢ — النماذج ونموذج التواصل
   ========================================================================== */
.contact-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: clamp(26px, 3vw, 40px);
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-lg);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
}

.form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.form-row > .form-field:only-child {
	grid-column: 1 / -1;
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	min-inline-size: 0;
}

.form-field label {
	font-family: var(--h-font-head);
	font-size: .92rem;
	font-weight: 600;
	color: var(--h-fg);
}

.form-field__req {
	color: #C0563F;
	font-weight: 700;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
select,
textarea {
	inline-size: 100%;
	padding: 13px 16px;
	border: 1px solid var(--h-line-strong);
	border-radius: var(--h-r-field);
	background: var(--h-white);
	color: var(--h-ink);
	font-family: var(--h-font-body);
	font-size: 1rem;
	line-height: 1.7;
	transition: border-color var(--h-t), box-shadow var(--h-t), background-color var(--h-t);
	appearance: none;
}

textarea {
	min-block-size: 150px;
	resize: vertical;
}

select {
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(0% + 18px) calc(50% + 1px), calc(0% + 24px) calc(50% + 1px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-inline-start: 42px;
}

input::placeholder,
textarea::placeholder {
	color: var(--h-ink-3);
	opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
	outline: 0;
	border-color: var(--h-primary);
	box-shadow: 0 0 0 4px rgba(var(--h-primary-rgb), .12);
}

input.has-error,
textarea.has-error,
select.has-error,
.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select {
	border-color: #C0563F;
	box-shadow: 0 0 0 4px rgba(192, 86, 63, .10);
}

.form-field--check {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
}

.form-field--check input[type="checkbox"],
input[type="checkbox"],
input[type="radio"] {
	inline-size: 20px;
	block-size: 20px;
	margin-block-start: 4px;
	accent-color: var(--h-primary);
	flex: 0 0 auto;
}

.form-field--check label {
	font-weight: 400;
	font-family: var(--h-font-body);
	font-size: .95rem;
	color: var(--h-ink-2);
	line-height: 1.8;
}

.form-note {
	font-size: .9rem;
	line-height: 1.8;
	color: var(--h-ink-3);
}

.form-note a {
	color: var(--h-accent-text);
}

/*
 * صندوق رسالة النموذج: main.js يكتب النص ويضيف ‎--ok‎ أو ‎--err‎.
 * لذلك نخفيه وهو فارغ فقط، ولا نستعمل display:none على الصنف نفسه
 * حتى لا نُبطل إظهاره من السكربت.
 */
.form-msg {
	padding: 14px 18px;
	border-radius: var(--h-r-field);
	border: 1px solid var(--h-line);
	background: var(--h-light);
	font-size: .96rem;
	line-height: 1.8;
	color: var(--h-ink);
}

.form-msg:empty,
.form-msg[hidden] {
	display: none;
}

.form-msg--ok {
	border-color: rgba(38, 120, 90, .28);
	background: rgba(38, 120, 90, .08);
	color: #1F5C47;
}

.form-msg--err {
	border-color: rgba(192, 86, 63, .3);
	background: rgba(192, 86, 63, .08);
	color: #96412E;
}

.form-submit {
	margin: 0;
}

/* نموذج البحث */
.search-form {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

.search-field {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.search-submit {
	flex: 0 0 auto;
	padding-inline: 22px;
}

/* ==========================================================================
   ١٣ — المدونة والشريط الجانبي والتعليقات والترقيم و٤٠٤ والبحث
   ========================================================================== */
.blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(32px, 4vw, 56px);
	align-items: start;
}

.blog-layout.no-sidebar {
	grid-template-columns: minmax(0, 1fr);
}

.blog-main {
	min-inline-size: 0;
}

/* عنوان المقال وبياناته */
.entry-title {
	font-size: clamp(1.2rem, 1.8vw, 1.5rem);
	font-weight: 700;
	line-height: 1.5;
	color: var(--h-primary);
}

.entry-title a {
	color: inherit;
	transition: color var(--h-t);
}

.entry-title a:hover {
	color: var(--h-accent-text);
}

.blog-main > article > .entry-title,
.single .entry-title {
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
	margin-block-end: 18px;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	font-size: .9rem;
	color: var(--h-ink-3);
}

.entry-meta > span,
.entry-meta__author,
.entry-meta__cats,
.entry-meta__date,
.entry-meta__type {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.entry-meta .haram-icon {
	color: var(--h-accent-text);
}

.entry-meta a:hover {
	color: var(--h-primary);
}

.entry-meta__type {
	padding: 3px 12px;
	border-radius: var(--h-r-pill);
	background: var(--h-pill-bg);
	color: var(--h-accent-text);
	font-family: var(--h-font-head);
	font-size: .78rem;
	font-weight: 600;
}

.entry__thumb {
	margin-block: 26px;
	overflow: hidden;
	border-radius: var(--h-r-lg);
	box-shadow: var(--h-shadow-1);
}

.entry__thumb img {
	inline-size: 100%;
	object-fit: cover;
}

.entry__caption {
	padding: 14px 20px;
	background: var(--h-light);
	font-size: .92rem;
	color: var(--h-ink-2);
}

.entry__edit {
	margin-block-start: 24px;
	font-size: .9rem;
}

.entry__edit a {
	color: var(--h-accent-text);
}

.entry-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-block-start: 28px;
	padding-block-start: 22px;
	border-block-start: 1px solid var(--h-line);
	font-size: .9rem;
}

.entry-tags__label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--h-font-head);
	font-weight: 700;
	color: var(--h-fg);
}

.entry-tags a {
	display: inline-flex;
	padding: 5px 14px;
	border: 1px solid var(--h-line-strong);
	border-radius: var(--h-r-pill);
	color: var(--h-ink-2);
	transition: background-color var(--h-t), border-color var(--h-t), color var(--h-t);
}

.entry-tags a:hover {
	background: var(--h-primary);
	border-color: var(--h-primary);
	color: var(--h-white);
}

.page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-block-start: 26px;
	font-size: .92rem;
}

.page-links__label {
	font-family: var(--h-font-head);
	font-weight: 700;
	color: var(--h-fg);
}

.page-links a,
.page-links > span:not(.page-links__label) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 36px;
	block-size: 36px;
	padding-inline: 10px;
	border: 1px solid var(--h-line-strong);
	border-radius: var(--h-r-btn);
}

.page-links a:hover {
	background: var(--h-primary);
	border-color: var(--h-primary);
	color: var(--h-white);
}

/* الترقيم */
.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-block-start: clamp(40px, 5vw, 64px);
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-inline-size: 44px;
	block-size: 44px;
	padding-inline: 16px;
	border: 1px solid var(--h-line-strong);
	border-radius: var(--h-r-btn);
	font-family: var(--h-font-head);
	font-size: .95rem;
	font-weight: 600;
	color: var(--h-ink-2);
	transition: background-color var(--h-t), border-color var(--h-t), color var(--h-t);
}

a.page-numbers:hover {
	border-color: var(--h-primary);
	color: var(--h-primary);
}

.page-numbers.current {
	background: var(--h-primary);
	border-color: var(--h-primary);
	color: var(--h-white);
}

.page-numbers.dots {
	border-color: transparent;
}

/* الشريط الجانبي والودجات */
.sidebar {
	position: sticky;
	inset-block-start: calc(var(--h-header-now-h) + 24px);
	display: grid;
	gap: 20px;
	min-inline-size: 0;
}

.widget {
	padding: 26px 26px 28px;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
}

.widget-title,
.footer-widget-title {
	margin-block-end: 16px;
	padding-block-end: 12px;
	border-block-end: 1px solid var(--h-line);
	font-family: var(--h-font-head);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--h-fg-title);
}

.widget ul {
	display: grid;
	gap: 10px;
	font-size: .97rem;
	color: var(--h-ink-2);
}

.widget ul li a:hover {
	color: var(--h-primary);
}

.widget ul ul {
	margin-block-start: 10px;
	padding-inline-start: 16px;
}

/* التعليقات */
.comments-area {
	margin-block-start: clamp(48px, 6vw, 80px);
	padding-block-start: clamp(32px, 4vw, 48px);
	border-block-start: 1px solid var(--h-line);
}

.comments-title,
.comment-reply-title,
.comments-form-title {
	margin-block-end: 24px;
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
	font-weight: 700;
	color: var(--h-fg-title);
}

.comment-list {
	display: grid;
	gap: 18px;
	margin-block-end: 40px;
}

.comment-list ol,
.comment-list ul {
	display: grid;
	gap: 18px;
	margin-block-start: 18px;
	padding-inline-start: clamp(16px, 3vw, 40px);
}

.comment-list .comment-body,
.comment-list article {
	padding: 24px 26px;
	border: 1px solid var(--h-card-line);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--h-shadow-1);
}

.comment-list .avatar {
	border-radius: var(--h-r-pill);
}

.comment-list .fn,
.comment-list .comment-author {
	font-family: var(--h-font-head);
	font-weight: 700;
	font-style: normal;
	color: var(--h-primary);
}

.comment-list .comment-metadata,
.comment-list .comment-meta {
	font-size: .86rem;
	color: var(--h-ink-3);
}

.comment-list .reply a {
	display: inline-flex;
	margin-block-start: 10px;
	font-family: var(--h-font-head);
	font-size: .88rem;
	font-weight: 700;
	color: var(--h-accent-text);
}

.no-comments,
.must-log-in,
.logged-in-as {
	font-size: .95rem;
	color: var(--h-ink-2);
}

.comment-form-cookies-consent {
	align-items: center;
}

/* لا نتائج */
.content-none {
	max-inline-size: 62ch;
	margin-inline: auto;
	margin-block-start: clamp(28px, 4vw, 48px);
	text-align: center;
}

.content-none .section-head {
	max-inline-size: none;
	margin-inline: auto;
}

.content-none__search {
	margin-block-end: 22px;
}

.content-none__actions,
.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* صفحة ٤٠٤ */
.error-404 {
	text-align: center;
}

.error-404 .container {
	max-inline-size: 68ch;
}

.error-404__code {
	font-family: var(--h-font-head);
	font-size: clamp(5rem, 16vw, 10rem);
	font-weight: 800;
	line-height: 1;
	color: rgba(var(--h-primary-rgb), .10);
}

.error-404 .section-head {
	max-inline-size: none;
	margin-inline: auto;
	margin-block-end: 28px;
}

.error-404__search {
	max-inline-size: 460px;
	margin: 0 auto 28px;
}


/* ==========================================================================
   ١٤ — الفوتر والأزرار العائمة
   ========================================================================== */
.site-footer {
	position: relative;
	background: var(--h-dark);
	color: rgba(255, 255, 255, .78);
	font-size: .98rem;
}

/* خيط برونزي شعري يفصل الفوتر عمّا فوقه — التفصيلة الوحيدة عند حدّه */
.site-footer::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 1px;
	pointer-events: none;
	background: linear-gradient(to left, transparent 0%, rgba(var(--h-accent-rgb), .55) 50%, transparent 100%);
}

.footer-top {
	padding-block: clamp(var(--h-s-5), 6vw, var(--h-s-6));
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr 1fr 1.15fr;
	gap: clamp(var(--h-s-3), 3.6vw, var(--h-s-5));
}

.footer-col {
	min-inline-size: 0;
}

.footer-brand {
	display: inline-flex;
	flex-direction: column;
	gap: 10px;
	margin-block-end: var(--h-s-3);
}

.footer-brand__logo {
	inline-size: auto;
	block-size: 58px;
	object-fit: contain;
	object-position: right center;
}

[dir="ltr"] .footer-brand__logo {
	object-position: left center;
}

.footer-brand__name {
	font-family: var(--h-font-head);
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--h-white);
}


.footer-about {
	max-inline-size: 46ch;
	font-size: .96rem;
	line-height: 1.9;
	color: rgba(255, 255, 255, .72);
	text-wrap: pretty;
}

.footer-about + .footer-about {
	margin-block-start: 10px;
}


.footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--h-s-1);
	margin-block-start: var(--h-s-3);
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--h-r-pill);
	border: 1px solid rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .82);
	transition: background-color var(--h-t), border-color var(--h-t), color var(--h-t), transform var(--h-t);
}

.footer-social a:hover {
	background: var(--h-white);
	border-color: var(--h-white);
	color: var(--h-dark);
	transform: translateY(-3px);
}

/* عنوان العمود يحمل خطاً برونزياً قصيراً تحته — نغمة الفوتر الوحيدة الملوّنة */
.footer-title {
	position: relative;
	margin-block-end: var(--h-s-3);
	padding-block-end: 14px;
	font-family: var(--h-font-head);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.004em;
	color: var(--h-white);
}

.footer-title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 34px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--h-accent-on-dark);
	opacity: .85;
}

.footer-links {
	display: grid;
	gap: 12px;
}

.footer-links a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, .74);
	transition: color var(--h-t), transform var(--h-t);
}

.footer-links a::before {
	content: "";
	inline-size: 5px;
	block-size: 5px;
	border-radius: var(--h-r-pill);
	background: var(--h-accent-on-dark);
	opacity: .7;
	flex: 0 0 auto;
	transition: opacity var(--h-t);
}

/* خطّ سفلي يُرسم من جهة البداية عند المرور — لا تغيير لون فقط */
.footer-links a::after {
	content: "";
	position: absolute;
	inset-block-end: 2px;
	inset-inline-start: 14px;
	inline-size: calc(100% - 14px);
	block-size: 1px;
	background: currentColor;
	opacity: .55;
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform .34s var(--h-ease-soft);
}

[dir="ltr"] .footer-links a::after {
	transform-origin: 0 50%;
}

.footer-links a:hover,
.footer-links a:focus-visible {
	color: var(--h-white);
	transform: translateX(-3px);
}

.footer-links a:hover::before,
.footer-links a:focus-visible::before {
	opacity: 1;
}

.footer-links a:hover::after,
.footer-links a:focus-visible::after {
	transform: scaleX(1);
}

[dir="ltr"] .footer-links a:hover,
[dir="ltr"] .footer-links a:focus-visible {
	transform: translateX(3px);
}

.footer-contact {
	display: grid;
	gap: 14px;
}

.footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: rgba(255, 255, 255, .76);
	line-height: 1.8;
}

.footer-contact a {
	color: inherit;
	transition: color var(--h-t);
}

.footer-contact a:hover {
	color: var(--h-white);
}

/*
 * العنوان رابط إلى الخريطة: يبقى بمظهر السطر نفسه — لا لون صارخ —
 * ويكشف عن نفسه بخطّ سفلي خافت يشتدّ عند المرور أو التركيز.
 */
.footer-contact__map {
	display: inline-flex;
	align-items: center;
	min-block-size: 24px;
	text-decoration-line: underline;
	text-decoration-color: rgba(255, 255, 255, .3);
	text-underline-offset: 4px;
	transition: color var(--h-t), text-decoration-color var(--h-t);
}

.footer-contact__map:hover,
.footer-contact__map:focus-visible {
	color: var(--h-white);
	text-decoration-color: var(--h-accent-on-dark);
}

.footer-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 36px;
	block-size: 36px;
	border-radius: var(--h-r-pill);
	background: rgba(255, 255, 255, .08);
	color: var(--h-accent-on-dark);
}

.footer-contact__icon--wa {
	background: rgba(37, 211, 102, .16);
	color: #5FE08E;
}

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(var(--h-s-3), 3vw, var(--h-s-4));
	margin-block-start: clamp(var(--h-s-4), 4vw, var(--h-s-5));
	padding-block-start: clamp(var(--h-s-3), 3.4vw, var(--h-s-4));
	border-block-start: 1px solid rgba(255, 255, 255, .10);
}

.footer-widgets .widget {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.footer-widget-title {
	border-block-end-color: rgba(255, 255, 255, .14);
	color: var(--h-white);
}

.footer-widgets ul,
.footer-widgets a {
	color: rgba(255, 255, 255, .74);
}

.footer-widgets a:hover {
	color: var(--h-white);
}

.footer-bottom {
	padding-block: var(--h-s-3);
	border-block-start: 1px solid rgba(255, 255, 255, .10);
	font-size: .9rem;
	color: rgba(255, 255, 255, .62);
}

.footer-bottom .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
}

.footer-bottom__copy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	color: inherit;
}

.footer-bottom__credit {
	color: rgba(255, 255, 255, .48);
}

.footer-bottom a:hover {
	color: var(--h-white);
}

/* --------------------------------------------------------------------------
   الأزرار العائمة — واتساب دائماً، والعودة للأعلى بعد تمرير طويل فقط
   -------------------------------------------------------------------------- */
.wa-float {
	position: fixed;
	inset-block-end: 24px;
	inset-inline-start: 24px;
	z-index: var(--h-z-float);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 58px;
	block-size: 58px;
	border-radius: var(--h-r-pill);
	background: #25D366;
	color: #FFFFFF;
	box-shadow:
		0 2px 6px rgba(37, 211, 102, .22),
		0 10px 28px rgba(37, 211, 102, .32);
	transition: transform var(--h-t), box-shadow var(--h-t);
	/* ظهور متدرّج بعد استقرار الصفحة؛ ‎backwards‎ حتى لا يقفل الحركةُ
	 * قيمةَ التحويل فيبطل الرفع عند المرور. */
	animation: haram-float-in .7s var(--h-ease-soft) .9s backwards;
}

.wa-float:hover {
	transform: translateY(-4px) scale(1.04);
	box-shadow:
		0 4px 10px rgba(37, 211, 102, .26),
		0 16px 36px rgba(37, 211, 102, .42);
}

@keyframes haram-float-in {

	from {
		opacity: 0;
		transform: translateY(16px) scale(.92);
	}
}

.to-top {
	position: fixed;
	inset-block-end: 24px;
	inset-inline-end: 24px;
	z-index: var(--h-z-float);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: var(--h-r-pill);
	border: 1px solid var(--h-line-strong);
	background: var(--h-white);
	color: var(--h-primary);
	box-shadow: var(--h-shadow-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(.94);
	transition:
		opacity .42s var(--h-ease-soft),
		visibility .42s var(--h-ease-soft),
		transform .42s var(--h-ease-soft),
		background-color var(--h-t),
		border-color var(--h-t),
		color var(--h-t);
}

.to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.to-top:hover {
	background: var(--h-primary);
	border-color: var(--h-primary);
	color: var(--h-white);
	transform: translateY(-3px) scale(1);
}

/* --------------------------------------------------------------------------
   شريط الاتصال السفلي — الجوال وحده

   سببه: تحت ٥٦٠ بكسل يختفي زر «تواصل معنا» من الهيدر، فلا تبقى على
   الشاشة وسيلة اتصال ظاهرة سوى واتساب العائم. الشريط يعيد الاتصال
   المباشر بزرّين متساويين بارتفاع لمس مريح، ويحلّ محلّ الزر العائم
   فلا يتكرّر رابط واتساب مرّتين في الشاشة نفسها.

   ‎--h-mobile-cta-h‎ على الجذر لا على الشريط، لأن ثلاثة عناصر تقرؤه:
   الشريط نفسه، و‎body‎ (حشو سفلي يمنع تغطية آخر سطر)، وزرّ العودة
   للأعلى (يرتفع فوقه فلا يتلامسان).
   -------------------------------------------------------------------------- */
:root {
	--h-mobile-cta-h: 58px;
}

.mobile-cta {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: var(--h-z-float);
	display: none;
	align-items: stretch;
	block-size: calc(var(--h-mobile-cta-h) + env(safe-area-inset-bottom, 0px));
	background: var(--h-ink);
	border-block-start: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 -6px 26px rgba(var(--h-dark-rgb), .3);
	padding-block-end: env(safe-area-inset-bottom, 0px);
	transition:
		transform .34s var(--h-ease-soft),
		visibility .34s var(--h-ease-soft);
}

/* درج القائمة أو المعرض المنبثق مفتوح: ينزلق الشريط خارج الشاشة. */
body.has-nav-open .mobile-cta,
body.is-scroll-locked .mobile-cta {
	visibility: hidden;
	transform: translateY(100%);
}

.mobile-cta__btn {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-inline-size: 0;
	padding: 10px 14px;
	font-family: var(--h-font-head);
	font-size: 1rem;
	font-weight: 600;
	color: var(--h-white);
	text-align: center;
	transition: background-color var(--h-t);
}

.mobile-cta__btn + .mobile-cta__btn {
	border-inline-start: 1px solid rgba(255, 255, 255, .14);
}

.mobile-cta__btn:active {
	background: rgba(255, 255, 255, .1);
}

.mobile-cta__btn .haram-icon {
	flex: 0 0 auto;
	inline-size: 20px;
	block-size: 20px;
}

/* الأيقونتان وحدهما تميّزان الزرّين: برونزي للهاتف وأخضر لواتساب. */
.mobile-cta__btn--call .haram-icon {
	color: var(--h-accent-on-dark);
}

.mobile-cta__btn--wa {
	background: var(--h-primary);
}

.mobile-cta__btn--wa .haram-icon {
	color: #5FE08E;
}

/* ==========================================================================
   ١٤ب — مُعدِّلات وأصناف متفرّقة تظهر في القوالب
   كل صنف مستعمل في PHP له قاعدة، حتى لو كانت تعديلاً بسيطاً.
   ========================================================================== */

/* أغلفة الأقسام التي لا تحتاج أكثر من ضبط بسيط */
.gm,
.vm,
.vision,
.clients,
.history {
	position: relative;
}

.project-single,
.service-single {
	position: relative;
	display: block;
}

/* بيانات العميل داخل بطاقة المشروع */
.project-card__client {
	color: var(--h-ink-2);
}

.project-nav__link--prev {
	grid-column: 1;
}

/* أعمدة الفوتر: الروابط والخدمات */
.footer-col--links .footer-links,
.footer-col--services .footer-links {
	font-size: .96rem;
}

/* عناصر القائمة الافتراضية من nav-walker */
.menu-item,
.haram-fallback-item {
	list-style: none;
}

.menu-item-has-children > .main-nav__link,
.main-nav__item--parent > .main-nav__link {
	padding-inline-end: 10px;
}

.main-nav__item--child > .main-nav__link {
	font-weight: 500;
}

/* حالات الهيدر التي يفهمها main.js إن استُعملت في قالب لاحقاً */
.site-header--solid {
	background: var(--h-white);
	color: var(--h-ink);
	box-shadow: var(--h-shadow-header);
}

.site-header--over-hero,
.site-header--transparent {
	background: transparent;
	color: var(--h-white);
	box-shadow: none;
}

/* أقسام المشاريع والخدمات المرتبطة */
.projects--related,
.projects--service,
.services--others {
	background: var(--h-light);
}

.projects--archive .section-head,
.services--archive .section-head {
	max-inline-size: 70ch;
}


/* أزرار ووردبريس الافتراضية إن ظهرت في الواجهة */
.button,
.button-primary,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px;
	border: 1.5px solid var(--h-primary);
	border-radius: var(--h-r-btn);
	background: var(--h-primary);
	color: var(--h-white);
	font-family: var(--h-font-head);
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.25;
	cursor: pointer;
	transition: background-color var(--h-t), border-color var(--h-t), transform var(--h-t);
}

.button:hover,
.button-primary:hover,
input[type="submit"]:hover {
	background: var(--h-primary-deep);
	border-color: var(--h-primary-deep);
	transform: translateY(-2px);
}

/* وصف حقول لوحة التخصيص إن ظهر في الواجهة */
.customize-control-title,
.customize-control-description,
.description {
	font-size: .9rem;
	color: var(--h-ink-3);
}


/* ==========================================================================
   ١٥ — التجاوب
   ========================================================================== */

/* ---- 1200px ---- */
@media (max-width: 1200px) {

	:root {
		--h-gutter: 22px;
	}

	.about-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-grid {
		grid-template-columns: 1.2fr 1fr 1fr;
	}

	.footer-col--contact {
		grid-column: 1 / -1;
	}

	.footer-contact {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}

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

	.main-nav__link {
		padding-inline: 11px;
		font-size: .92rem;
	}
}

/* ---- 992px ---- */
@media (max-width: 992px) {

	:root {
		--h-section-y: clamp(60px, 9vw, 96px);
	}

	/* القائمة تنتقل إلى الدرج الجانبي */
	.main-nav {
		display: none;
	}

	.nav-toggle {
		display: flex;
	}

	.topbar {
		display: none;
	}

	.header-inner {
		block-size: 74px;
	}

	.site-header.is-stuck .header-inner {
		block-size: 68px;
	}

	.header-cta {
		padding: 11px 20px;
		font-size: .88rem;
	}

	/* الشبكات تتحوّل إلى عمودين ثم عمود */
	.grid--3,
	.grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.about__grid,
	.about__grid--flip,
	.branches__grid,
	.quality__grid,
	.gm__grid,
	.gm__grid--media,
	.contact__grid,
	.blog-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.about__grid--flip .about__media {
		order: 0;
	}

	.quality__intro,
	.sidebar {
		position: static;
	}

	.gm__media {
		max-inline-size: 420px;
	}

	.vision__grid,
	.vm__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-col--brand {
		grid-column: 1 / -1;
	}

	.project-gallery__item--wide,
	.project-gallery__item--tall {
		grid-column: auto;
		grid-row: auto;
	}

	.stat + .stat::before {
		display: none;
	}

	.hero {
		min-block-size: min(80vh, 700px);
	}
}

/* ---- 768px ---- */
@media (max-width: 768px) {

	/* مساحة لمس مريحة لروابط بيانات التواصل — كانت ٢٧ بكسل. */
	.contact-info__value {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}

	body {
		font-size: 1rem;
	}

	:root {
		--h-gutter: 18px;
		--h-gap: 18px;
	}

	.grid--2,
	.grid--3,
	.grid--4,
	.about-steps,
	.projects__grid,
	.services__grid,
	.services .services__grid,
	.why__grid,
	.values-grid,
	.goals__list,
	.certs .certs__grid,
	.equipment .equipment__grid,
	.project-gallery,
	.vision__grid,
	.vm__grid,
	.project-nav,
	.post-nav,
	.form-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.project-nav__link--next,
	.post-nav__link--next {
		grid-column: auto;
	}

	.clients__grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	.stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 20px;
	}

	.hero {
		min-block-size: min(78vh, 640px);
		padding-block-start: calc(var(--h-header-h) + 40px);
		/* يحجز مكان النقاط وزر الإيقاف (نحو ٨١بك) تحت الأزرار. */
		padding-block-end: clamp(104px, 14vh, 132px);
	}

	.hero__scroll {
		display: none;
	}

	.hero__dots {
		inset-block-end: 22px;
	}

	.service-single__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.equipment__meta {
		flex-direction: column;
		align-items: flex-start;
	}

	.footer-bottom .container {
		justify-content: center;
		text-align: center;
	}

	.footer-bottom__copy {
		justify-content: center;
	}

	/*
	 * شريط الاتصال السفلي يحلّ محلّ زر واتساب العائم هنا: زرّان بديل
	 * زرّ واحد، ولا يبقى رابط واتساب مكرّراً على الشاشة نفسها.
	 */
	.mobile-cta {
		display: flex;
	}

	.wa-float {
		display: none;
	}

	/*
	 * الحشو مشروط بوجود الشريط فعلاً (‎:has‎): لو أُفرغ الهاتف وواتساب
	 * من لوحة التحكم فلا يُطبع الشريط ولا يبقى فراغ أسفل الصفحة.
	 */
	/* الحشو على الفوتر لا على الجسم: يمتدّ لونه الداكن حتى أسفل الشاشة خلف الشريط الثابت. */
	body:has(.mobile-cta) .site-footer {
		padding-block-end: calc(var(--h-mobile-cta-h) + env(safe-area-inset-bottom, 0px));
	}

	body:has(.mobile-cta) .to-top {
		inset-block-end: calc(var(--h-mobile-cta-h) + env(safe-area-inset-bottom, 0px) + 14px);
	}

	.to-top {
		inline-size: 44px;
		block-size: 44px;
		inset-block-end: 18px;
		inset-inline-end: 18px;
	}

	/*
	 * مساحات لمس ثانوية — روابط التذييل.
	 *
	 * ارتفاع السطر وحده ٢٩ بكسل. الحشو الرأسي يرفعه إلى ٤٥، وتُقلَّص
	 * فجوة الشبكة بالمقدار نفسه تقريباً حتى لا يتمدّد العمود: المسافة
	 * المرئية بين رابطين تبقى ١٨ بكسل كما كانت تقريباً، ومساحتا اللمس
	 * متجاورتان بلا تداخل. والخط السفلي يتبع النص لا حدّ المساحة.
	 */
	/*
	 * وبيانات التواصل معها: الهاتف والبريد ٢٨ بكسل، ورابط الخريطة ٢٢.
	 * ارتفاع أدنى ٤٤ للجميع، وتنزل أيقونة الصف ٤ بكسل فتتوسّط أمامه.
	 */
	.footer-contact {
		gap: 8px;
	}

	.footer-contact a {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}

	.footer-contact__icon {
		margin-block-start: 4px;
	}

	.footer-links {
		gap: 2px;
	}

	.footer-links a {
		padding-block: 8px;
	}

	.footer-links a::after {
		inset-block-end: 10px;
	}

	/*
	 * ومسار التنقّل: ارتفاعه ٢٧ بكسل، فيصير كل رابط صندوقاً مرناً بارتفاع
	 * ٤٤. وتُصفَّر الحشوة الرأسية للحبّة الحاوية بالمقدار نفسه فلا ينتفخ
	 * الشريط ولا يتزحزح عمّا كان.
	 */
	.breadcrumbs__link,
	.breadcrumbs__current {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}

	.page-hero__crumbs {
		padding-block: 0;
	}

	.page-hero {
		--hp-area: 170px;
	}
}

/* ---- 560px ---- */
@media (max-width: 560px) {

	:root {
		--h-gutter: 16px;
		--h-section-y: clamp(52px, 12vw, 76px);
	}

	.site-brand__logo {
		block-size: 44px;
	}

	.site-header.is-stuck .site-brand__logo {
		block-size: 40px;
	}

	/* في أضيق الشاشات يبقى زر القائمة فقط ويختفي زر الهيدر النصّي */
	.header-cta {
		display: none;
	}

	.btn {
		padding: 13px 24px;
		font-size: .92rem;
	}

	.btn--lg {
		padding: 15px 28px;
		font-size: .97rem;
	}

	.hero__actions .btn,
	.cta__actions .btn,
	.content-none__actions .btn,
	.error-404__actions .btn {
		inline-size: 100%;
	}

	.stats__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.clients__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.project-card__body,
	.post-card__body,
	.cert-card__body {
		padding: 20px;
	}

	.service-card,
	.why-item,
	.value-card,
	.vm__card,
	.branch-card,
	.about-step {
		padding: 26px 22px;
	}

	.gm__aside,
	.contact-form {
		padding: 24px 20px;
	}

	.mobile-nav {
		inline-size: min(320px, 92vw);
		padding: 22px 18px 34px;
	}

	.error-404__code {
		font-size: 5.5rem;
	}
}


/* ==========================================================================
   ١٦ — تقليل الحركة والطباعة الورقية
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.reveal {
		opacity: 1;
		transform: none;
	}

	/* البطل: بلا كن-بيرنز وبلا زحف مقياس — تبديل صامت بين الشرائح */
	.hero__slide,
	.hero__slide.is-active {
		transform: none;
		animation: none;
	}

	.hero__scroll,
	.wa-float {
		animation: none;
	}

	/*
	 * مؤشّر تقدّم الشريحة يُعرض ممتلئاً بلا حركة: النقطة النشطة تبقى
	 * واضحة تماماً لمن أوقف الحركة.
	 */
	.hero__dot.is-active .hero__dot-fill,
	.hero.has-dot-progress .hero__dot.is-active .hero__dot-fill,
	.hero.has-dot-progress .hero__dot.is-active .hero__dot-fill.is-filling {
		animation: none;
		inline-size: 100%;
	}

	/* الخطوط التي تُرسم بـ‎scaleX‎ تظهر كاملة بلا رسم */
	.main-nav__link.is-active::after,
	.current-menu-item > .main-nav__link::after,
	.current_page_item > .main-nav__link::after,
	.footer-links a:hover::after,
	.footer-links a:focus-visible::after {
		transform: scaleX(1);
	}

	.project-card:hover,
	.service-card:hover,
	.post-card:hover,
	.client-card:hover,
	.cert-card:hover,
	.equipment-card:hover,
	.branch-card:hover,
	.why-item:hover,
	.value-card:hover,
	.vm__card:hover,
	.vision-card:hover,
	.about-step:hover,
	.goal:hover,
	.goal-item:hover,
	.quality-item:hover,
	.branch:hover,
	.contact-info__item:hover,
	.project-gallery__item:hover,
	.project-nav__link:hover,
	.post-nav__link:hover,
	.btn:hover,
	.wa-float:hover,
	.to-top:hover,
	.footer-links a:hover,
	.footer-social a:hover {
		transform: none;
	}

	.project-card:hover .project-card__img,
	.post-card:hover .post-card__media img,
	.equipment-card:hover .equipment-card__img,
	.cert-card:hover .cert-card__img,
	.project-gallery__item:hover .project-gallery__img,
	.about__media:hover .about__img {
		transform: none;
	}
}

@media print {

	.site-header,
	.mobile-nav,
	.nav-backdrop,
	.hero__slides,
	.hero__dots,
	.hero__scroll,
	.wa-float,
	.mobile-cta,
	.to-top,
	.project-filter,
	.contact__map,
	.contact-map,
	.pagination,
	.comments-area,
	.sidebar,
	.footer-social,
	.skip-link {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
		line-height: 1.7;
	}

	.section,
	.section--light,
	.section--dark,
	.section--media,
	.stats,
	.cta,
	.hero,
	.page-hero,
	.site-footer {
		padding-block: 18pt;
		background: #fff !important;
		color: #000 !important;
		border: 0;
	}

	.hero__overlay,
	.vision__overlay,
	.cta__overlay {
		display: none;
	}

	.hero__title,
	.page-hero__title,
	.section-head__title,
	.cta__title,
	h1, h2, h3 {
		color: #000 !important;
	}

	.project-card,
	.service-card,
	.cert-card,
	.client-card,
	.equipment-card,
	.branch-card,
	.why-item,
	.value-card,
	.widget,
	.contact-info__item {
		border: 1px solid #ccc;
		box-shadow: none !important;
		break-inside: avoid;
	}

	.reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	a {
		text-decoration: underline;
	}

	.site-main {
		padding-block-start: 0 !important;
	}
}