@charset "UTF-8";
/* ==========================================================================
   شركة هرم الانشاء — صقل الأقسام
   --------------------------------------------------------------------------
   ورقة تكميلية تُحمَّل **بعد** main.css فتفوز قواعدها عند تساوي الوزن.
   لا تغيّر البنية ولا الألوان ولا المحتوى؛ ترفع مستوى التفاصيل فقط:
   إيقاع المسافات، تنضيد أهدأ، عمق أنعم، حركة ساكنة، وتوازن الشبكات.

   القاعدة المتّبعة: كل محدّد هنا مساوٍ أو أثقل من نظيره في main.css،
   فلا حاجة إلى ‎!important‎ في أي سطر.

   الفهرس
   ٠١  رموز الصقل (حركة · ظلال · مسافات)
   ٠٢  التنضيد وإيقاع القراءة
   ٠٣  الظهور عند التمرير
   ٠٤  «من نحن» — لوح الهوية
   ٠٥  مراحل العمل الأربع (خط زمني)
   ٠٦  الخدمات
   ٠٧  الإحصائيات
   ٠٨  بطاقات المشاريع
   ٠٩  الشهادات
   ١٠  الآلات والمعدّات (شبكة بأحجام متفاوتة)
   ١١  «باختيارك» والعملاء والفروع — توازن الشبكات
   ١٢  النماذج
   ١٣  الفوتر
   ١٤  التركيز والإتاحة والروابط النصية
   ١٥  التجاوب
   ١٦  تقليل الحركة
   ========================================================================== */


/* ==========================================================================
   ٠١ — رموز الصقل
   --------------------------------------------------------------------------
   منحنى واحد لكل حركة في الموقع: بداية سريعة ونهاية تتلاشى بهدوء.
   وسلّم مسافات ٨/١٦/٢٤/٤٠/٦٤/٩٦/١٢٨ يُستهلك بالاسم لا بالأرقام الحرة.
   ========================================================================== */
:root {

	/* ---- الحركة الهادئة ---- */
	--hs-ease: cubic-bezier(.22, .61, .36, 1);
	--hs-t: .28s var(--hs-ease);			/* الحالات القصيرة */
	--hs-t-med: .45s var(--hs-ease);		/* الطبقات والتدرّجات */
	--hs-t-img: .7s var(--hs-ease);			/* تكبير الصور والظهور */

	/* ---- سلّم المسافات ---- */
	--hs-1: 8px;
	--hs-2: 16px;
	--hs-3: 24px;
	--hs-4: 40px;
	--hs-5: 64px;
	--hs-6: 96px;
	--hs-7: 128px;

	/* ---- خطوط شعرية وظلال متعدّدة الطبقات ---- */
	--hs-hair: rgba(var(--h-ink-rgb), .08);
	--hs-hair-2: rgba(var(--h-ink-rgb), .12);
	--hs-bronze-hair: rgba(var(--h-accent-rgb), .22);
	--hs-bronze-hair-strong: rgba(var(--h-accent-rgb), .34);

	--hs-lift-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);

	--hs-lift-2:
		0 1px 2px rgba(var(--h-ink-rgb), .04),
		0 8px 20px rgba(var(--h-ink-rgb), .06),
		0 26px 60px rgba(var(--h-ink-rgb), .08);

	--hs-lift-3:
		0 2px 4px rgba(var(--h-ink-rgb), .05),
		0 14px 32px rgba(var(--h-ink-rgb), .07),
		0 40px 88px rgba(var(--h-ink-rgb), .11);
}


/* ==========================================================================
   ٠٢ — التنضيد وإيقاع القراءة
   --------------------------------------------------------------------------
   ملاحظة عربية مهمّة: ‎letter-spacing‎ الموجب يفصل الحروف المتّصلة ويشوّه
   الكلمة، لذلك لا يُستعمل موجباً على أي نصّ عربي هنا. التهوية في العبارات
   القصيرة تأتي من ‎word-spacing‎، والسالب الخفيف جداً يُقصر على العناوين
   الكبيرة حيث يشدّ الكلمة بلا أن يلمس وصلاتها.
   ========================================================================== */

/* شدّ خفيف جداً للعناوين الكبيرة + كسر أسطر متوازن */
.section-head__title,
.cta__title,
.page-hero__title {
	letter-spacing: -.012em;
	text-wrap: balance;
}

.section-head__eyebrow {
	word-spacing: .08em;
}

/* الفقرات: طول سطر ٦٠–٧٥ حرفاً وكسر أسطر لا يترك كلمة يتيمة */
.section-head__text,
.about__text p,
.history__text,
.quality__text,
.cta__text {
	text-wrap: pretty;
}

.section-head__text {
	max-inline-size: 68ch;
}

.section-head--center {
	max-inline-size: 74ch;
}

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

.about__text p {
	max-inline-size: 68ch;
}

/* تدرّج حجمي أوضح بين العنوان والوصف داخل البطاقات */
.service-card__text,
.why-item__text,
.about-step__text,
.cert-card__text {
	text-wrap: pretty;
}


/* ==========================================================================
   ٠٣ — الظهور عند التمرير
   --------------------------------------------------------------------------
   إزاحة ١٤px فقط ومدة ‎.7s‎: الحركة تُحَسّ ولا تُرى.
   ========================================================================== */
html.js .reveal {
	transform: translateY(14px);
	transition: opacity .7s var(--hs-ease), transform .7s var(--hs-ease);
}


/* --------------------------------------------------------------------------
   إصلاح تعارض: تلاشي الصور مقابل تكبيرها
   --------------------------------------------------------------------------
   قاعدة ‎html.has-img-fade img‎ في main.css تضبط ‎transition‎ على ‎opacity‎
   وحدها، ووزنها ‎(0,2,1)‎ يفوق أي محدّد صنف مفرد — فتُلغى حركة تكبير الصور
   عند المرور في كل البطاقات. نعيد الحركتين معاً بنفس الوزن ومن ورقة لاحقة:
   التلاشي كما وضعه صاحبه، والتكبير الهادئ فوقه.
   -------------------------------------------------------------------------- */
html.has-img-fade .project-card__img,
html.has-img-fade .cert-card__img,
html.has-img-fade .equipment-card__img,
html.has-img-fade .about__img,
html.has-img-fade .project-gallery__img,
html.has-img-fade .post-card__media img {
	transition:
		opacity .5s var(--h-ease-soft),
		transform var(--hs-t-img);
}


/* ==========================================================================
   ٠٤ — «من نحن»: لوح الهوية
   --------------------------------------------------------------------------
   لوح هادئ يحمل شعار الشركة: أرضية متدرّجة رقيقة، حدّ برونزي شعري،
   إطار داخلي أرفع منه، خط برونزي قصير، ثم العبارة تحته. لا ظل ثقيل —
   اللوح يبدو مطبوعاً على الورق لا طافياً فوقه.
   ========================================================================== */
.about .about__media--brand {
	overflow: visible;
	border: 0;
	background: transparent;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.about .about__brand {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--hs-3);
	inline-size: 100%;
	min-block-size: clamp(320px, 32vw, 440px);
	padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 56px);
	border: 1px solid var(--hs-bronze-hair);
	border-radius: var(--h-r-lg);
	background:
		radial-gradient(118% 92% at 50% 0%, #FFFFFF 0%, var(--h-light) 100%);
	box-shadow:
		0 1px 2px rgba(var(--h-ink-rgb), .03),
		0 22px 56px rgba(var(--h-ink-rgb), .06);
}

/* إطار داخلي شعري — تفصيلة لوح الهوية */
.about .about__brand::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid rgba(var(--h-accent-rgb), .14);
	border-radius: calc(var(--h-r-lg) - 6px);
	pointer-events: none;
}

.about .about__brand-logo {
	inline-size: auto;
	max-inline-size: min(76%, 300px);
	block-size: clamp(92px, 10.5vw, 146px);
	object-fit: contain;
}

/* الخط البرونزي القصير: يتلاشى طرفاه فلا يبدو قاطعاً */
.about .about__brand-rule {
	inline-size: 64px;
	block-size: 1px;
	border: 0;
	background: linear-gradient(
		to left,
		transparent,
		var(--h-accent) 22%,
		var(--h-accent) 78%,
		transparent
	);
	opacity: .7;
}

/* «نحن نبني بجودة»: تهوية بالمسافة بين الكلمات لا بين الحروف */
.about .about__brand-tagline {
	margin: 0;
	font-family: var(--h-font-head);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.8;
	color: var(--h-accent-text);
	word-spacing: .3em;
	text-align: center;
}

/* شارة التصنيف: شارة تحضن نصّها لا شريطاً يعبر العمود */
.about .about__classification {
	align-self: flex-start;
	margin-block-start: var(--hs-3);
	padding: 14px 22px;
	border: 1px solid var(--hs-hair);
	border-inline-start: 2px solid var(--h-accent);
	background: linear-gradient(
		to left,
		rgba(var(--h-accent-rgb), .07),
		rgba(var(--h-accent-rgb), .02) 88%
	);
}


/* ==========================================================================
   ٠٥ — مراحل العمل الأربع
   --------------------------------------------------------------------------
   التخطيط · التنفيذ · الإشراف · التسليم.
   الأيقونة داخل مربّع بزوايا دائرية، والرقم رقم كبير باهت خلفها لا شارة
   تزاحمها، وخط زمني شعري يمرّ بين البطاقات على الشاشات الكبيرة — يظهر في
   الفراغات فقط لأن البطاقات بيضاء معتمة، فيبدو كخيط يربطها.
   ========================================================================== */
.about .about-steps {
	position: relative;
	margin-block-start: clamp(var(--hs-4), 5vw, 80px);
	gap: clamp(18px, 2vw, 28px);
}

.about .about-step {
	position: relative;
	z-index: 1;
	gap: var(--hs-2);
	padding: 32px 28px 30px;
	border: 1px solid var(--hs-hair);
	border-radius: var(--h-r-card);
	background: var(--h-card-bg);
	box-shadow: var(--hs-lift-1);
	overflow: hidden;
	transition:
		transform var(--hs-t),
		box-shadow var(--hs-t),
		border-color var(--hs-t);
}

.about .about-step:hover {
	transform: translateY(-4px);
	border-color: var(--hs-bronze-hair);
	box-shadow: var(--hs-lift-2);
}

/* الأيقونة: مربّع بزوايا دائرية بخلفية تيل شفافة ولون برونزي */
.about .about-step__icon {
	inline-size: 56px;
	block-size: 56px;
	border-radius: 18px;
	border: 1px solid rgba(var(--h-accent-rgb), .16);
	background: rgba(var(--h-primary-rgb), .06);
	color: var(--h-accent-text);
	transition: background-color var(--hs-t), border-color var(--hs-t);
}

.about .about-step:hover .about-step__icon {
	background: rgba(var(--h-accent-rgb), .10);
	border-color: var(--hs-bronze-hair-strong);
}

/*
 * الرقم: عنصر خلفي باهت — حاضر بلا صوت، في الركن المقابل للأيقونة
 * (الأيقونة عند بداية السطر، والرقم عند نهايته) فلا يزاحمها.
 * ملاحظة: لا نضع ‎direction: ltr‎ هنا لأن كروم يحسب ‎inset-inline-*‎
 * من اتجاه العنصر نفسه، فينقلب الركن ويقع الرقم فوق الأيقونة.
 */
.about .about-step__num {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-end: 18px;
	z-index: -1;
	font-family: var(--h-font-head);
	font-size: 3.3rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: rgba(var(--h-primary-rgb), .075);
	user-select: none;
	transition: color var(--hs-t);
}

.about .about-step:hover .about-step__num {
	color: rgba(var(--h-accent-rgb), .16);
}

.about .about-step__title {
	margin-block-start: 2px;
	font-size: 1.12rem;
	line-height: 1.6;
	color: var(--h-primary);
}

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


/* ==========================================================================
   ٠٦ — الخدمات
   --------------------------------------------------------------------------
   أربع بطاقات متساوية الارتفاع، الأيقونة الرسمية بمقاس مريح، ولمسة برونزية
   واحدة: خط شعري يُرسم عند حافة البطاقة العليا حين يمرّ المؤشر.
   ========================================================================== */
.services .services__grid {
	align-items: stretch;
	gap: clamp(var(--hs-2), 2.2vw, 28px);
}

.services .service-card {
	block-size: 100%;
	gap: 20px;
	padding: 36px 30px 32px;
	border: 1px solid var(--hs-hair);
	box-shadow: var(--hs-lift-1);
	transition:
		transform var(--hs-t),
		box-shadow var(--hs-t),
		border-color var(--hs-t);
}

.services .service-card:hover {
	transform: translateY(-4px);
	border-color: var(--hs-bronze-hair);
	box-shadow: var(--hs-lift-2);
}

/*
 * اللمسة البرونزية الوحيدة في البطاقة: خط قصير عند الحافة العليا فوق
 * الأيقونة، يمتدّ ويظهر عند المرور. لا إطار ملوّن ولا خلفية — خط واحد.
 */
.services .service-card::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: 30px;
	inline-size: 56px;
	block-size: 2px;
	border-radius: var(--h-r-pill);
	background: var(--h-accent);
	opacity: 0;
	transform: scaleX(.35);
	transform-origin: 100% 50%;
	transition: opacity var(--hs-t), transform var(--hs-t-med);
}

[dir="ltr"] .services .service-card::before {
	transform-origin: 0 50%;
}

.services .service-card:hover::before {
	opacity: .9;
	transform: scaleX(1);
}

/* الأيقونة الرسمية بمقاس مريح */
.services .service-card__icon {
	inline-size: 78px;
	block-size: 78px;
	border: 1px solid rgba(var(--h-accent-rgb), .12);
	background: rgba(var(--h-primary-rgb), .05);
	transition:
		background-color var(--hs-t),
		border-color var(--hs-t),
		transform var(--hs-t);
}

.services .service-card:hover .service-card__icon {
	background: rgba(var(--h-accent-rgb), .09);
	border-color: var(--hs-bronze-hair);
	transform: translateY(-2px);
}

.services .service-card__icon-img {
	inline-size: 42px;
	block-size: 42px;
}

.services .service-card__title {
	font-size: 1.18rem;
	line-height: 1.55;
}

/* البطاقة كلها قابلة للنقر: العنوان هو الرابط، وطبقته تغطّي البطاقة */
.services .service-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: var(--h-r-card);
}

.services .service-card:has(.service-card__title a) {
	cursor: pointer;
}

/* سهم زخرفي يتقدّم قليلاً عند المرور */
.services .service-card__more {
	color: var(--h-accent-text);
	transition: transform var(--hs-t), color var(--hs-t);
}

.services .service-card:hover .service-card__more {
	transform: translateX(-6px);
	color: var(--h-primary);
}

[dir="ltr"] .services .service-card:hover .service-card__more {
	transform: translateX(6px);
}


/* ==========================================================================
   ٠٧ — الإحصائيات
   --------------------------------------------------------------------------
   القسم الداكن الوحيد. أرقام أكبر، تباعد أوسع، وفواصل رأسية تتلاشى عند
   طرفيها فلا تبدو كأعمدة جدول.
   ========================================================================== */
.section.stats {
	padding-block: clamp(72px, 7.5vw, 112px);
}

.stats .stats__grid {
	--hs-stat-gap: clamp(32px, 4vw, 64px);
	gap: var(--hs-stat-gap);
	align-items: start;
}

.stats .stat {
	gap: 10px;
	padding-block: var(--hs-1);
}

.stats .stat + .stat::before {
	inset-block: 4px;
	inset-inline-start: calc(var(--hs-stat-gap) / -2);
	background: linear-gradient(
		to bottom,
		transparent,
		rgba(255, 255, 255, .20) 18%,
		rgba(255, 255, 255, .20) 82%,
		transparent
	);
}

.stats .stat__value {
	font-size: clamp(2.8rem, 5vw, 4.1rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
}

.stats .stat__suffix {
	font-size: .42em;
}

.stats .stat__label {
	font-size: 1rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, .80);
	word-spacing: .06em;
}


/* ==========================================================================
   ٠٨ — بطاقات المشاريع
   --------------------------------------------------------------------------
   تكبير ‎1.04‎ خلال ‎.7s‎، تدرّج دائم خفيف أسفل الصورة يثبّت الشارة ويُعمّق
   الصورة، شارة تصنيف أنيقة، وسهم يتقدّم مع خط سفلي يُرسم عند المرور.
   ========================================================================== */
.project-card {
	border-color: var(--hs-hair);
	box-shadow: var(--hs-lift-1);
	transition:
		transform var(--hs-t),
		box-shadow var(--hs-t),
		border-color var(--hs-t);
}

.project-card:hover {
	transform: translateY(-5px);
	border-color: var(--hs-bronze-hair);
	box-shadow: var(--hs-lift-3);
}

.project-card__img {
	transition: transform var(--hs-t-img);
}

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

/* التدرّج حاضر دائماً بخفّة، ويعمق قليلاً عند المرور */
.project-card__media::after {
	background: linear-gradient(
		to top,
		rgba(var(--h-dark-rgb), .34),
		rgba(var(--h-dark-rgb), .06) 42%,
		transparent 62%
	);
	opacity: .55;
	transition: opacity var(--hs-t-med);
}

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

.project-card__cat {
	inset-block-start: 16px;
	inset-inline-start: 16px;
	padding: 7px 15px;
	background: rgba(255, 255, 255, .93);
	box-shadow:
		0 1px 2px rgba(var(--h-ink-rgb), .10),
		0 6px 18px rgba(var(--h-ink-rgb), .10);
	font-size: .76rem;
}

.project-card__body {
	gap: 12px;
	padding: 24px 26px 26px;
}

.project-card__title {
	font-size: 1.14rem;
	line-height: 1.6;
	text-wrap: balance;
}

.project-card__meta {
	font-size: .88rem;
	color: var(--h-ink-3);
}

/* الرابط: خط سفلي يُرسم من جهة البداية + سهم يتقدّم */
.project-card__link > span:first-of-type {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0 1px;
	background-position: 100% calc(100% - 2px);
	transition: background-size var(--hs-t-med);
}

[dir="ltr"] .project-card__link > span:first-of-type {
	background-position: 0 calc(100% - 2px);
}

.project-card:hover .project-card__link > span:first-of-type,
.project-card__link:focus-visible > span:first-of-type {
	background-size: 100% 1px;
}

.project-card__link .haram-icon {
	transition: transform var(--hs-t);
}

.project-card:hover .project-card__link .haram-icon {
	transform: translateX(-6px);
}

[dir="ltr"] .project-card:hover .project-card__link .haram-icon {
	transform: translateX(6px);
}


/* ==========================================================================
   ٠٩ — الشهادات
   --------------------------------------------------------------------------
   الصور ملوّنة واضحة على لوح فاتح، والشارة تحتها بحدّ برونزي شعري،
   والبيانات في سطور دفترية مفصولة بخطوط منقّطة.
   ========================================================================== */
.certs .certs__grid {
	gap: clamp(var(--hs-2), 2.2vw, 28px);
	align-items: stretch;
}

.certs .cert-card {
	block-size: 100%;
	border-color: var(--hs-hair);
	box-shadow: var(--hs-lift-1);
	transition:
		transform var(--hs-t),
		box-shadow var(--hs-t),
		border-color var(--hs-t);
}

.certs .cert-card:hover {
	transform: translateY(-4px);
	border-color: var(--hs-bronze-hair);
	box-shadow: var(--hs-lift-2);
}

.certs .cert-card__media {
	padding: 26px 26px 22px;
	background: linear-gradient(180deg, #FFFFFF 0%, var(--h-light) 100%);
	border-block-end-color: var(--hs-hair);
}

.certs .cert-card__img {
	block-size: 290px;
	transition: transform var(--hs-t-img);
}

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

.certs .cert-card__body {
	gap: 12px;
	padding: 24px 26px 26px;
}

/* الشارة أسفل الصورة */
.certs .cert-card__standard {
	padding: 6px 15px;
	border: 1px solid rgba(var(--h-accent-rgb), .24);
	background: rgba(var(--h-accent-rgb), .07);
	font-size: .76rem;
	letter-spacing: .04em;
}

.certs .cert-card__title {
	font-size: 1.1rem;
	line-height: 1.6;
	text-wrap: balance;
}


/* ==========================================================================
   ١٠ — الآلات والمعدّات
   --------------------------------------------------------------------------
   صور فقط بلا نصوص. شبكة بأحجام متفاوتة: الصورة الأولى لوحة كبيرة
   ٢×٢، وواحدة عريضة في كل دورة، والباقي مربّعات — والدورة من ثمانية
   عناصر تملأ ثلاثة صفوف كاملة بلا خانة فارغة ولا عنصر يتيم.
   ========================================================================== */
.equipment .equipment-card {
	display: block;
	border-color: var(--hs-hair);
	box-shadow: var(--hs-lift-1);
	transition: transform var(--hs-t), box-shadow var(--hs-t);
}

.equipment .equipment-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--hs-lift-2);
}

.equipment .equipment-card__img {
	transition: transform var(--hs-t-img);
}

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

/* طبقة تدرّج شديدة الخفّة تمنع الصور الفاتحة من الذوبان في الأرضية */
.equipment .equipment-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(var(--h-dark-rgb), .16),
		transparent 46%
	);
	opacity: .8;
	transition: opacity var(--hs-t-med);
}

.equipment .equipment-card:hover .equipment-card__media::after {
	opacity: .35;
}


/* ==========================================================================
   ١١ — توازن الشبكات: «باختيارك» والعملاء والفروع
   --------------------------------------------------------------------------
   شبكات مرنة بسطر أخير موسّط: أياً كان عدد العناصر لا يبقى عنصر يتيم
   ملتصقاً بحافة، بل يتوسّط سطره.
   ========================================================================== */

/* ---- باختيارك هرم الإنشاء: خمس بطاقات ⇐ ٣ + ٢ موسّطتان ---- */
.why .why__grid {
	gap: clamp(var(--hs-2), 2.2vw, 28px);
}

.why .why__grid > * {
	flex: 1 1 clamp(280px, 30%, 360px);
	max-inline-size: 380px;
}

/* البطاقات عناصر مرنة تتمدّد تلقائياً لأطول بطاقة في السطر — لا ارتفاع مفروض */
.why .why-item {
	gap: var(--hs-2);
	padding: 34px 30px;
	border-color: var(--hs-hair);
	box-shadow: var(--hs-lift-1);
	transition:
		transform var(--hs-t),
		box-shadow var(--hs-t),
		border-color var(--hs-t);
}

.why .why-item:hover {
	transform: translateY(-4px);
	border-color: var(--hs-bronze-hair);
	box-shadow: var(--hs-lift-2);
}

.why .why-item__icon {
	inline-size: 62px;
	block-size: 62px;
	border-radius: 20px;
	border: 1px solid rgba(var(--h-accent-rgb), .14);
	background: rgba(var(--h-primary-rgb), .05);
	color: var(--h-accent-text);
	transition: background-color var(--hs-t), border-color var(--hs-t);
}

.why .why-item:hover .why-item__icon {
	background: rgba(var(--h-accent-rgb), .09);
	border-color: var(--hs-bronze-hair);
}

.why .why-item__title {
	font-size: 1.1rem;
	line-height: 1.6;
}

/* ---- العملاء: لوحات أسماء متساوية بسطر أخير موسّط ---- */
.clients .clients__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--hs-2);
}

.clients .clients__grid > * {
	flex: 1 1 clamp(190px, 21%, 260px);
	max-inline-size: 300px;
}

.clients .client-card {
	min-block-size: 152px;
	padding: 26px 22px;
	border-color: var(--hs-hair);
	box-shadow: var(--hs-lift-1);
	text-align: center;
	transition:
		transform var(--hs-t),
		box-shadow var(--hs-t),
		border-color var(--hs-t);
}

.clients .client-card:hover {
	transform: translateY(-3px);
	border-color: var(--hs-bronze-hair);
	box-shadow: var(--hs-lift-2);
}

.clients .client-card__name {
	font-size: 1rem;
	line-height: 1.7;
	text-wrap: balance;
}


/* ---- الفروع: قائمة بإيقاع أهدأ ورقم برونزي صغير ---- */
.branches .branches__list {
	gap: var(--hs-2);
}

.branches .branch {
	gap: 18px;
	padding: 22px 24px;
	border-color: var(--hs-hair);
	box-shadow: var(--hs-lift-1);
	transition:
		transform var(--hs-t),
		box-shadow var(--hs-t),
		border-color var(--hs-t);
}

.branches .branch:hover {
	transform: translateY(-3px);
	border-color: var(--hs-bronze-hair);
	box-shadow: var(--hs-lift-2);
}

.branches .branch__num {
	inline-size: 38px;
	block-size: 38px;
	border-radius: 13px;
	border: 1px solid rgba(var(--h-accent-rgb), .16);
	background: rgba(var(--h-primary-rgb), .05);
	color: var(--h-accent-text);
	font-size: .86rem;
	direction: ltr;
}

.branches .branches__media {
	box-shadow: var(--hs-lift-2);
}

/*
 * صفحة «فروعنا» تعيد استعمال ‎.branches__grid‎ لبطاقات فرع، لا لعمودَي
 * صورة ونصّ كما في الصفحة الرئيسية. الشبكة هناك عمودان فتترك البطاقة
 * الثالثة يتيمة؛ فحين تحمل الشبكة بطاقات نجعلها صفّاً مرناً بسطر أخير
 * موسّط — ثلاث بطاقات في سطر واحد متّزن.
 */
.branches__grid:has(.branch-card) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: clamp(var(--hs-2), 2.2vw, 28px);
}

.branches__grid:has(.branch-card) > * {
	flex: 1 1 clamp(260px, 30%, 360px);
	max-inline-size: 400px;
}

.branch-card {
	border-color: var(--hs-hair);
	box-shadow: var(--hs-lift-1);
	transition:
		transform var(--hs-t),
		box-shadow var(--hs-t),
		border-color var(--hs-t);
}

.branch-card:hover {
	transform: translateY(-4px);
	border-color: var(--hs-bronze-hair);
	box-shadow: var(--hs-lift-2);
}

.branch-card__title {
	text-wrap: balance;
}

/*
 * نموذج التواصل يأتي من الإضافة؛ فإن غاب لا نترك نصف الشبكة فراغاً:
 * تصير عموداً واحداً موسّطاً بعرض قراءة مريح.
 */
.contact__grid:not(:has(.contact-form)) {
	grid-template-columns: minmax(0, 1fr);
	max-inline-size: 760px;
	margin-inline: auto;
}


/* ==========================================================================
   ١٢ — النماذج
   --------------------------------------------------------------------------
   حقول هادئة بحدّ شعري، وحالة تركيز واضحة بلا صخب: الحدّ يصير أخضر
   بترولياً وحوله هالة رقيقة.
   ========================================================================== */
.contact-form {
	border-color: var(--hs-hair);
	box-shadow: var(--hs-lift-1);
}

.form-field label {
	margin-block-end: 2px;
	color: var(--h-fg);
	letter-spacing: -.005em;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form select,
.contact-form textarea,
.search-form .search-field {
	padding: 14px 17px;
	border-color: var(--hs-hair-2);
	background: var(--h-white);
	transition:
		border-color var(--hs-t),
		box-shadow var(--hs-t),
		background-color var(--hs-t);
}

.contact-form input[type="text"]:hover,
.contact-form input[type="email"]:hover,
.contact-form input[type="tel"]:hover,
.contact-form input[type="url"]:hover,
.contact-form select:hover,
.contact-form textarea:hover {
	border-color: rgba(var(--h-ink-rgb), .22);
}

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

.contact-form textarea {
	min-block-size: 160px;
	line-height: 1.85;
}


/* ==========================================================================
   ١٣ — الفوتر
   --------------------------------------------------------------------------
   إيقاع أعمدة متّزن، عنوان كل عمود تحته علامة برونزية قصيرة،
   وخط فاصل رقيق قبل السطر الأخير.
   ========================================================================== */
.site-footer .footer-top {
	padding-block: clamp(var(--hs-5), 6vw, 92px);
}

.site-footer .footer-grid {
	gap: clamp(var(--hs-3), 3.2vw, 56px);
}

.site-footer .footer-title {
	position: relative;
	margin-block-end: var(--hs-3);
	padding-block-end: 12px;
	font-size: 1.02rem;
}

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

.site-footer .footer-links {
	gap: 12px;
}

.site-footer .footer-links a,
.site-footer .footer-contact a {
	transition: color var(--hs-t), transform var(--hs-t);
}

.site-footer .footer-about {
	max-inline-size: 46ch;
	line-height: 1.95;
	text-wrap: pretty;
}

.site-footer .footer-bottom {
	border-block-start-color: rgba(255, 255, 255, .10);
}


/* ==========================================================================
   ١٤ — التركيز والإتاحة والروابط النصية
   --------------------------------------------------------------------------
   حلقة تركيز أنيقة تتبع لون السطح (‎--h-focus‎ يُعاد تعريفه في الأسطح
   الداكنة أصلاً)، وخط سفلي يُرسم على الروابط النصية بدل تغيير اللون وحده.
   ========================================================================== */
.service-card__title a:focus-visible,
.project-card__title a:focus-visible,
.project-card__link:focus-visible,
.cert-card__media:focus-visible,
.equipment-card__media:focus-visible,
.footer-links a:focus-visible,
.footer-contact a:focus-visible,
.branch__phone a:focus-visible {
	outline: 2px solid var(--h-focus);
	outline-offset: 4px;
	border-radius: 8px;
	box-shadow: 0 0 0 5px var(--h-focus-halo);
}

/* الصور الكبيرة: الحلقة تلتصق بحوافها لا بمساحة فارغة حولها */
.cert-card__media:focus-visible,
.equipment-card__media:focus-visible {
	outline-offset: -3px;
	border-radius: var(--h-r-card);
}

/* الروابط النصية: الخط السفلي يُرسم عند المرور وعند التركيز */
.branch__phone a,
.footer-contact a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0 1px;
	background-position: 100% calc(100% - 1px);
	transition: background-size var(--hs-t-med), color var(--hs-t);
}

[dir="ltr"] .branch__phone a,
[dir="ltr"] .footer-contact a {
	background-position: 0 calc(100% - 1px);
}

.branch__phone a:hover,
.branch__phone a:focus-visible,
.footer-contact a:hover,
.footer-contact a:focus-visible {
	background-size: 100% 1px;
}

/* مؤشر واضح على البطاقات القابلة للنقر بالكامل */
.project-card--linked,
.services .service-card:has(.service-card__title a) {
	cursor: pointer;
}


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

/* ---- ≥993px: خط زمني للمراحل، وشبكة المعدّات بأحجام متفاوتة ---- */
@media (min-width: 993px) {

	/* المراحل الأربع في صفّ واحد ليصحّ الخط الزمني */
	.about .about-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* الخيط الرابط: يمرّ خلف البطاقات فلا يُرى إلا في الفراغات بينها */
	.about .about-steps::before {
		content: "";
		position: absolute;
		inset-block-start: 60px;
		inset-inline: 11%;
		block-size: 1px;
		background: linear-gradient(
			to left,
			transparent,
			var(--hs-bronze-hair-strong) 10%,
			var(--hs-bronze-hair-strong) 90%,
			transparent
		);
		pointer-events: none;
	}

	/* المعدّات: دورة من ثمانية تملأ ثلاثة صفوف كاملة */
	.equipment .equipment__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: clamp(168px, 14vw, 216px);
		grid-auto-flow: dense;
		gap: clamp(14px, 1.5vw, 22px);
	}

	.equipment .equipment-card {
		grid-column: span 1;
		grid-row: span 1;
		block-size: 100%;
	}

	.equipment .equipment-card:nth-child(8n + 1) {
		grid-column: span 2;
		grid-row: span 2;
	}

	.equipment .equipment-card:nth-child(8n + 6) {
		grid-column: span 2;
	}

	.equipment .equipment-card__media {
		aspect-ratio: auto;
		block-size: 100%;
	}
}

/* ---- 993–1200px: البطاقات أضيق فيهدأ الرقم والأيقونة معها ---- */
@media (min-width: 993px) and (max-width: 1200px) {

	.about .about-step {
		padding: 28px 22px 26px;
	}

	.about .about-step__icon {
		inline-size: 50px;
		block-size: 50px;
		border-radius: 16px;
	}

	.about .about-step__num {
		inset-inline-end: 14px;
		font-size: 2.6rem;
	}

	/* الخيط يمرّ في منتصف الأيقونة الجديدة */
	.about .about-steps::before {
		inset-block-start: 53px;
	}

	.services .service-card__icon {
		inline-size: 70px;
		block-size: 70px;
	}

	.services .service-card__icon-img {
		inline-size: 38px;
		block-size: 38px;
	}
}

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

	/* عمودان للمعدّات: أهدأ من ثلاثة أعمدة ضيّقة */
	.equipment .equipment__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(14px, 2vw, 20px);
	}

	.about .about-step__num {
		font-size: 3rem;
	}

	.about .about__brand {
		min-block-size: 300px;
	}
}

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

	/*
	 * على العمود الواحد تصير البطاقة سطراً: الأيقونة ثم العنوان بجانبها،
	 * والرقم الباهت في الطرف المقابل — أهدأ من بطاقة عريضة نصفها فارغ.
	 */
	.about .about-step {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 18px;
		padding: 22px 24px;
	}

	.about .about-step__icon {
		flex: 0 0 auto;
	}

	.about .about-step__title {
		flex: 1 1 auto;
		margin-block-start: 0;
	}

	.about .about-step__text {
		flex: 1 0 100%;
	}

	.about .about-step__num {
		inset-block-start: 50%;
		inset-inline-end: 22px;
		font-size: 2.4rem;
		transform: translateY(-50%);
	}

	.services .service-card {
		padding: 30px 26px;
	}

	.why .why-item {
		padding: 28px 24px;
	}

	.certs .cert-card__img {
		block-size: 240px;
	}

	.stats .stats__grid {
		--hs-stat-gap: clamp(28px, 5vw, 40px);
	}

	.clients .clients__grid > * {
		flex: 1 1 clamp(150px, 44%, 220px);
	}

	.site-footer .footer-title {
		margin-block-end: var(--hs-2);
	}
}

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

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

	.about .about__brand {
		padding: 36px 24px;
		min-block-size: 260px;
	}

	.about .about__brand-logo {
		block-size: 88px;
	}

	.stats .stat__value {
		font-size: clamp(2.6rem, 12vw, 3.2rem);
	}

	.clients .clients__grid > * {
		flex: 1 1 100%;
		max-inline-size: none;
	}
}


/* ==========================================================================
   ١٦ — تقليل الحركة
   --------------------------------------------------------------------------
   من طلب سكوناً فله سكون كامل: لا رفع ولا تكبير ولا رسم خطوط.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

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

	.about .about-step:hover,
	.services .service-card:hover,
	.certs .cert-card:hover,
	.equipment .equipment-card:hover,
	.why .why-item:hover,
	.clients .client-card:hover,
	.branches .branch:hover,
	.project-card:hover {
		transform: none;
	}

	.project-card:hover .project-card__img,
	.certs .cert-card:hover .cert-card__img,
	.equipment .equipment-card:hover .equipment-card__img,
	.services .service-card:hover .service-card__icon {
		transform: none;
	}

	/* الخط البرونزي يظهر بلا امتداد */
	.services .service-card:hover::before {
		opacity: .9;
		transform: none;
	}

	.project-card:hover .project-card__link .haram-icon,
	.services .service-card:hover .service-card__more {
		transform: none;
	}
}


/* =====================================================================
 * تصحيح: قوائم بيانات الشهادات في القوالب تستعمل dt/dd مباشرة بلا غلاف،
 * فكانت التسمية والقيمة تنزلان على سطرين متعرّجين. نجعلها عمودين.
 * ================================================================== */
.cert-card__meta:not(:has(> div)) {
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 10px;
	align-items: baseline;
}

.cert-card__meta:not(:has(> div)) dt {
	margin: 0;
	color: var(--h-ink-3, #62706F);
	font-size: .86rem;
	white-space: nowrap;
}

.cert-card__meta:not(:has(> div)) dd {
	margin: 0;
	text-align: start;
	font-size: .92rem;
	font-weight: 500;
	overflow-wrap: anywhere;
}


/* =====================================================================
 * منع البطاقات اليتيمة في آخر الصفوف — عدد العناصر هو ما يحدّد الأعمدة.
 * ================================================================== */


/* الإحصائيات الخمس: عمود واحد على الجوال بدل صفّ يتيم */
@media (max-width: 768px) {
	.stats__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.stat {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 14px;
		row-gap: 4px;
		text-align: start;
	}
}


/* ==========================================================================
   ١٧ — «من نحن» في الصفحة الرئيسية: الميدالية السداسية والخط الزمني
   --------------------------------------------------------------------------
   بديل التخطيط الكلاسيكي (لوح كبير + عمود نصّ + أربع بطاقات) بتكوين له
   شخصية واحدة مأخوذة من علامة الشركة نفسها: **السداسي**.

   السداسي يتكرّر بثلاثة أحجام فيصير لغة لا زخرفة:
   ميدالية العلامة (كبيرة) · خاتم التصنيف (صغير جداً) · عُقد المراحل (أربع).

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

   لا لون ولا خط ولا كلمة خارج ما هو مقرّر: تيل ‎#264142‎ وبرونز ‎#957B69‎
   والنصوص كما وردت في الملف التعريفي حرفاً بحرف.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ١٧-أ) الشكل السداسي المشترك
   هو مسدّس الشعار نفسه: رأس علوي وسفلي وضلعان رأسيان بقطع ‎٢٦٪‎، ونسبة
   ‎278:250‎ مقيسة من ‎assets/img/logo-dark.png‎. ونأخذه من ‎--hg-hex‎ في
   ‎signature.css‎ إن حضرت الورقة، وإلا فالقيمة نفسها مكتوبة احتياطاً —
   فالشكل واحد في الموقع كلّه لا شكلان.
   الحدّ الشعري يُرسم بطبقتين متطابقتي القصّ: طبقة برونزية ثم وجه فوقها
   بإزاحة ‎1.5px‎، فيبقى الحدّ متساوي السماكة على الأضلاع المائلة أيضاً
   (‎border‎ وحده يُقصّ مع ‎clip-path‎ فلا يصلح هنا).
   -------------------------------------------------------------------------- */
.about--medal .about-hex {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	aspect-ratio: 278 / 250;
	--about-hex-clip: var(--hg-hex, polygon(50% 0%, 100% 26%, 100% 74%, 50% 100%, 0% 74%, 0% 26%));
}

.about--medal .about-hex::before,
.about--medal .about-hex::after {
	content: "";
	position: absolute;
	clip-path: var(--about-hex-clip);
	pointer-events: none;
}

/* الحدّ */
.about--medal .about-hex::before {
	inset: 0;
	background: var(--h-accent);
	opacity: .34;
}

/* الوجه */
.about--medal .about-hex::after {
	inset: 1.5px;
	background: var(--h-card-bg);
}

/* المحتوى فوق الطبقتين */
.about--medal .about-hex > * {
	position: relative;
	z-index: 1;
}


/* --------------------------------------------------------------------------
   ١٧-ب) شبكة الصدر: عنوان عريض ← ميدالية عند الحافة ← فقرتان ← شريط الدلائل
   -------------------------------------------------------------------------- */
.about--medal .about-lede {
	display: grid;
	grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
	grid-template-areas:
		"head    mark"
		"text    text"
		"signals signals";
	column-gap: clamp(28px, 4vw, 64px);
	row-gap: clamp(26px, 3vw, 40px);
	align-items: start;
}

.about--medal .about-lede__head {
	grid-area: head;
	align-self: center;
}

/* الرمش: شارة برونزية ثم خيط شعري يتلاشى نحو الميدالية فيربط طرفَي الصفّ */
.about--medal .about-lede__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-block-end: clamp(14px, 1.6vw, 20px);
}

.about--medal .about-lede__eyebrow .section-head__eyebrow {
	flex: none;
	margin-block-end: 0;
}

.about--medal .about-lede__eyebrow::after {
	content: "";
	flex: 1 1 auto;
	block-size: 1px;
	background: linear-gradient(
		to left,
		var(--hs-bronze-hair),
		rgba(var(--h-accent-rgb), 0)
	);
}

/* العنوان: أكبر من عناوين الأقسام الأخرى عمداً — هو بطل القسم */
.about--medal .about-lede__title {
	margin: 0;
	font-family: var(--h-font-head);
	font-size: clamp(1.85rem, 3.6vw, 3.05rem);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -.016em;
	color: var(--h-fg-title);
	text-wrap: balance;
}


/* --------------------------------------------------------------------------
   ١٧-ج) الميدالية: علامة الشركة داخل سداسي
   الشعار ملفّ واحد فيه العلامة واسم الشركة تحتها؛ نقصّه على العلامة وحدها
   (‎x 113–390‎ و‎y 0–249‎ من أصل ‎541×366‎) فلا يظهر اسم مصغّر لا يُقرأ.
   الاسم الكامل باقٍ في ‎alt‎ وفي الترويسة والتذييل.
   -------------------------------------------------------------------------- */
.about--medal .about-lede__mark {
	grid-area: mark;
	justify-self: center;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
}

.about--medal .about-medal::before {
	opacity: .44;
}

.about--medal .about-medal {
	inline-size: clamp(158px, 15.5vw, 206px);
	filter: drop-shadow(0 10px 20px rgba(var(--h-ink-rgb), .07));
}

/* وجه الميدالية: أبيض يميل إلى التيل في ركنه السفلي فيُقرأ فوق الأبيض */
.about--medal .about-medal::after {
	background: linear-gradient(
		206deg,
		var(--h-white) 0%,
		var(--h-white) 46%,
		color-mix(in srgb, var(--h-primary) 4%, var(--h-white)) 100%
	);
}

.about--medal .about-medal__mark {
	position: relative;
	z-index: 1;
	display: block;
	inline-size: 60%;
	aspect-ratio: 278 / 250;
	overflow: hidden;
}

.about--medal .about-medal__mark img {
	position: absolute;
	top: 0;
	left: -40.65%;			/* ‎113 ÷ 541 × 194.6%‎ */
	inline-size: 194.6%;		/* ‎541 ÷ 278‎ */
	max-inline-size: none;
	block-size: auto;
}

/* «نحن نبني بجودة»: تهوية بالمسافة بين الكلمات لا بين الحروف */
.about--medal .about-lede__tagline {
	margin-block-start: 14px;
	font-family: var(--h-font-head);
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.7;
	color: var(--h-fg-accent);
	word-spacing: .3em;
	text-align: center;
}


/* --------------------------------------------------------------------------
   ١٧-د) الفقرتان في عمودين متجاورين — أهمّ سبب لقِصر القسم
   -------------------------------------------------------------------------- */
.about--medal .about-lede__text {
	grid-area: text;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(28px, 4vw, 64px);
	row-gap: var(--hs-2);
	font-size: 1.02rem;
	line-height: 1.95;
	color: var(--h-fg-soft);
}

.about--medal .about-lede__text p {
	margin: 0;
	text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   ١٧-هـ) شريط الدلائل: شارة التصنيف عند البداية والأرقام عند النهاية
   الأرقام تُقرأ من ‎stats_items‎ نفسها، وهيئتها هنا هادئة عمداً حتى لا
   تنافس قسم الإحصائيات الداكن الذي يملك لحظة الأرقام الكبيرة.
   -------------------------------------------------------------------------- */
.about--medal .about-signals {
	grid-area: signals;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 2.4vw, 38px);
	margin: 0;
	padding-block: clamp(16px, 1.9vw, 22px);
	border-block: 1px solid var(--hs-hair);
}

.about--medal .about-signals__seal {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-inline-end: auto;
}

.about--medal .about-seal {
	inline-size: 32px;
	color: var(--h-fg-accent);
}

.about--medal .about-seal::before {
	opacity: .5;
}

.about--medal .about-seal::after {
	background: color-mix(in srgb, var(--h-accent) 9%, var(--h-white));
}

.about--medal .about-signals__seal-text {
	font-family: var(--h-font-head);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--h-fg-title);
}

.about--medal .about-signal {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

/* فاصل شعري بين الأرقام فقط — لا يسبق أوّلها */
.about--medal .about-signal + .about-signal {
	border-inline-start: 1px solid var(--hs-hair-2);
	padding-inline-start: clamp(16px, 2.4vw, 38px);
}

.about--medal .about-signal__num {
	font-family: var(--h-font-head);
	font-size: clamp(1.3rem, 1.9vw, 1.6rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--h-fg-title);
	font-variant-numeric: tabular-nums;
}

.about--medal .about-signal__label {
	font-size: .92rem;
	line-height: 1.6;
	color: var(--h-fg-soft);
}


/* --------------------------------------------------------------------------
   ١٧-و) مراحل العمل: خطّ زمني حقيقي لا أربع بطاقات
   خيط برونزي واحد يمرّ خلف أربع عُقد سداسية معتمة، فلا يُرى إلا بينها.
   -------------------------------------------------------------------------- */
.about--medal .about-flow {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(8px, 1.4vw, 20px);
	margin-block-start: clamp(36px, 4.4vw, 60px);
}

.about--medal .about-flow::before {
	content: "";
	position: absolute;
	inset-inline: 12%;
	inset-block-start: 23px;
	block-size: 1px;
	background: linear-gradient(
		to left,
		transparent,
		var(--hs-bronze-hair-strong) 7%,
		var(--hs-bronze-hair-strong) 93%,
		transparent
	);
	pointer-events: none;
}

.about--medal .about-flow__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.about--medal .about-flow__node {
	inline-size: 51px;
	color: var(--h-fg-accent);
	transition: color var(--hs-t);
}

.about--medal .about-flow__node::after {
	background: var(--h-white);
	transition: background-color var(--hs-t);
}

.about--medal .about-flow__step:hover .about-flow__node::before {
	opacity: .55;
}

.about--medal .about-flow__step:hover .about-flow__node::after {
	background: color-mix(in srgb, var(--h-accent) 7%, var(--h-white));
}

.about--medal .about-flow__num {
	font-size: .72rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .14em;
	color: var(--h-fg-accent);
	font-variant-numeric: tabular-nums;
}

.about--medal .about-flow__title {
	margin: 0;
	font-size: clamp(.98rem, 1.15vw, 1.08rem);
	font-weight: 600;
	line-height: 1.5;
	color: var(--h-fg-title);
}

/* شرح المرحلة: لا وجود له في الملف التعريفي، لكن الحقل في اللوحة فنُنسّقه */
.about--medal .about-flow__text {
	margin: 0;
	max-inline-size: 30ch;
	font-size: .9rem;
	line-height: 1.75;
	color: var(--h-fg-soft);
	text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   ١٧-ز) التجاوب
   -------------------------------------------------------------------------- */

/* ---- 992px: عمود واحد، والميدالية لحظة علامة في وسطه ---- */
@media (max-width: 992px) {

	.about--medal .about-lede {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"head"
			"mark"
			"text"
			"signals";
	}

	.about--medal .about-lede__mark {
		justify-self: center;
	}

	.about--medal .about-lede__text {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1em;
		max-inline-size: 70ch;
	}
}

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

	/*
	 * على الضيّق يصير الشريط شبكة من عمودين: الشارة تعبر العمودين والأرقام
	 * تحتها. لا فواصل شعرية هنا — الفاصل في صفّ ملتفّ يظهر في أوّل السطر
	 * فيبدو خطاً تائهاً، والشبكة تغني عنه.
	 */
	.about--medal .about-signals {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 18px;
	}

	.about--medal .about-signals__seal {
		grid-column: 1 / -1;
		margin-inline-end: 0;
	}

	.about--medal .about-signal + .about-signal {
		border-inline-start: 0;
		padding-inline-start: 0;
	}

	.about--medal .about-flow {
		gap: 8px;
	}

	.about--medal .about-flow__node {
		inline-size: 46px;
	}

	.about--medal .about-flow::before {
		inset-block-start: 21px;
	}
}

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

	.about--medal .about-signals {
		gap: 12px 16px;
	}

	.about--medal .about-signal__label {
		font-size: .86rem;
	}

	.about--medal .about-flow__node {
		inline-size: 42px;
	}

	.about--medal .about-flow::before {
		inset-block-start: 19px;
	}

	.about--medal .about-flow__step {
		gap: 8px;
	}

	.about--medal .about-flow__title {
		font-size: .92rem;
	}
}


/* ---- من طلب سكوناً فله سكون ---- */
@media (prefers-reduced-motion: reduce) {

	.about--medal .about-flow__node,
	.about--medal .about-flow__node::after {
		transition: none;
	}
}


/* =====================================================================
 * بطاقة الخدمة على الهواتف الصغيرة: التخطيط الرأسي كان يترك نحو ٧٠٪
 * من عرض البطاقة فراغاً. نحوّلها إلى صفّ أفقي فينزل ارتفاعها للثلث.
 * ================================================================== */
@media (max-width: 560px) {

	.service-card {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 16px;
		padding: 18px 20px;
		text-align: start;
	}

	.service-card__icon,
	.service-card__media {
		flex: 0 0 auto;
		margin-block-end: 0;
	}

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

	.service-card__title {
		margin-block: 0;
	}
}


/* =====================================================================
 * ركائز الشركة: الرؤية · الرسالة · القيم · الأهداف
 * أربع بطاقات متساوية، الأيقونة داخل مسدّس الهوية، ونصّ مختصر.
 * ================================================================== */
.pillars__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pillar {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: clamp(24px, 2.4vw, 34px);
	background: var(--h-white);
	border: 1px solid var(--h-card-line, rgba(28, 43, 43, .08));
	border-radius: var(--h-r-card, 16px);
	box-shadow: var(--h-shadow-1, 0 1px 2px rgba(28, 43, 43, .04), 0 10px 30px rgba(28, 43, 43, .07));
	transition: transform var(--h-t), border-color var(--h-t), box-shadow var(--h-t);
}

.pillar:hover {
	transform: translateY(-4px);
	border-color: rgba(var(--h-accent-rgb), .38);
	box-shadow: var(--h-shadow-2, 0 2px 6px rgba(28, 43, 43, .05), 0 22px 48px rgba(28, 43, 43, .12));
}

/* الأيقونة داخل مسدّس الشعار — نفس رقاقة الخدمات */
.pillar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 62px;
	block-size: 62px;
	color: var(--h-fg-accent);
	/* الأرضية والخيط والمسدّس نفسه من signature.css — مصدر واحد لكل رقاقات الموقع. */
}

.pillar__title {
	margin: 0;
	font-family: var(--h-font-head);
	font-size: 1.16rem;
	font-weight: 700;
	color: var(--h-fg);
}

.pillar__text {
	margin: 0;
	font-size: .95rem;
	line-height: 1.85;
	color: var(--h-ink-2);
}

.pillars__actions {
	display: flex;
	justify-content: center;
	margin-block-start: clamp(28px, 3vw, 44px);
}

@media (max-width: 992px) {
	.pillars__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.pillars__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.pillar {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		padding: 18px 20px;
	}

	.pillar__icon {
		flex: 0 0 auto;
		inline-size: 50px;
		block-size: 50px;
	}
}


/* =====================================================================
 * #8 الركيزة: العنوان والنصّ في غلاف واحد، فتبقى الأيقونة بجانبهما
 * على الجوال بدل أن يصير العنوان عموداً نحيفاً بين الأيقونة والنصّ.
 * ================================================================== */
.pillar__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-inline-size: 0;
}

@media (max-width: 560px) {
	.pillar__body {
		gap: 6px;
	}
}

/* =====================================================================
 * #14 شبكة الخدمات بين ٥٦١ و٧٦٨بك: عمودان مثل شبكة الركائز المجاورة
 * بدل عمود واحد ببطاقات عريضة شبه فارغة.
 * ================================================================== */
@media (max-width: 768px) and (min-width: 561px) {
	.services .services__grid,
	.services .grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* =====================================================================
 * ملاحظات المراجعة المتوسطة
 * ================================================================== */

/* #14 بين ٧٦٩ و١١٩٩بك: الخدمات ٢+٢ بدل ٣+١، والإحصائيات الخمس في صفّ واحد. */
@media (min-width: 769px) and (max-width: 1199px) {
	.services .services__grid,
	.services .grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.stats .stats__grid {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
}

/* #13 عناوين الشهادات بارتفاع محجوز فتتحاذى جداولها في الصفّ الواحد. */
@media (min-width: 769px) {
	.cert-card__title {
		min-block-size: 2lh;
	}
}

/* #17 نصّ بطاقة التواصل يملأ عرضها، والرابط بعرض نصّه لا بعرض البطاقة. */
.contact-info__body {
	flex: 1 1 auto;
}

.contact-info__value {
	align-self: flex-start;
}

@media (max-width: 560px) {

	/* #18 بطاقات «لماذا نحن» والفروع بعرض العمود كاملاً على الجوال. */
	.why .why__grid > *,
	.branches__grid:has(.branch-card) > * {
		max-inline-size: none;
		flex-basis: 100%;
	}
}

/* #6 الخريطة: أرضية هادئة لو لم يُحمَّل الإطار، وشريط تحته يفتح العنوان في
 * خرائط جوجل — تحت الإطار لا فوقه، فلا يغطّي بطاقة جوجل التي في ركنه. */
.contact-map {
	background: var(--h-surface, #EEF1F1);
}

.contact-map__open {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 56px;
	padding: 14px 20px;
	background: var(--h-white, #fff);
	border-block-start: 1px solid var(--h-card-line, rgba(28, 43, 43, .08));
	color: var(--h-primary);
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.4;
	transition: color var(--h-t), background-color var(--h-t);
}

.contact-map__open svg {
	flex: none;
	color: var(--h-fg-accent, currentColor);
}

.contact-map__open:hover,
.contact-map__open:focus-visible {
	color: var(--h-fg-accent, var(--h-primary));
	background: var(--h-surface, #EEF1F1);
}

/* صفحة التواصل بلا نموذج (الإضافة غير مفعّلة): الرأس يتوسّط فوق البطاقات
 * بدل أن يلتصق بطرف الحاوية، والبطاقة الأخيرة إن بقيت وحدها تأخذ الصفّ كله. */
.contact .section-head:has(+ .contact__grid--info-only) {
	max-inline-size: 760px;
	margin-inline: auto;
	text-align: center;
}

.contact__grid--info-only .contact-info__item:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* المعدّات بسبع صور: تكتمل صفوف الشبكة بلا خانة فارغة. */
@media (min-width: 993px) {

	/* السابعة عريضة كالسادسة فيكتمل الصفّ الثالث: ٤ + ٤ + ٢ + ٢ = ١٢ خانة. */
	.equipment .equipment__grid:has(> .equipment-card:nth-child(7):last-child) > .equipment-card:nth-child(7) {
		grid-column: span 2;
	}
}

@media (min-width: 561px) and (max-width: 992px) {

	/* عمودان: الأولى بعرض الصفّ صورةً رئيسية، والستّ الباقية ثلاثة صفوف كاملة. */
	.equipment .equipment__grid:has(> .equipment-card:nth-child(7):last-child) > .equipment-card:first-child {
		grid-column: 1 / -1;
	}

	.equipment .equipment__grid:has(> .equipment-card:nth-child(7):last-child) > .equipment-card:first-child .equipment-card__media {
		aspect-ratio: 16 / 9;
	}
}