/* =========================================================
   صفحة «من نحن» — قالب template-about.php
   تُحمَّل على هذه الصفحة فقط (inc/enqueue.php) وكل قاعدة مقيّدة بـ body.page-about-a.

   اللغة البصرية: نفس لغة الصفحة الرئيسية (النموذج أ) — خلفية كحلية داكنة، عناوين بيضاء،
   لمسات تيلي، بطاقات زجاجية، ثم استراحة فاتحة (ورقي #f3f1ec) في آخر قسمين كما في الرئيسية.
   الحركة: ظهور متتابع عبر .reveal/.visible من main.js + حركات خاصة بكل قسم هنا.
   ========================================================= */

body.page-about-a {
	--ab-ink:    #08111f;                /* أعمق درجة — خلفية الصفحة (نفس الرئيسية) */
	--ab-ink-2:  #0a1729;                /* درجة أفتح قليلًا لتناوب الأقسام */
	--ab-deep:   var(--primary-900);     /* كحلي عميق — الغلاف */
	--ab-navy:   var(--primary);
	--ab-teal:   var(--accent);
	--ab-teal-s: #7fd3da;                /* تيل فاتح — العناوين الصغيرة */
	--ab-paper:  #f3f1ec;                /* ورقي — القسمان الأخيران */
	--ab-line:   rgba(255, 255, 255, .1);
	--ab-glass:  rgba(255, 255, 255, .05);
	--ab-radius: 16px;

	background: var(--ab-ink);
	color: #fff;
}
/* الفوتر الداكن يلتصق بلا فاصل */
body.page-about-a .footer { background: var(--ab-ink); }

/* =========================================================
   عناصر مشتركة
   ========================================================= */
body.page-about-a .ab-section {
	position: relative;
	padding: clamp(72px, 8vw, 116px) 0;
	scroll-margin-top: 64px;
}
body.page-about-a .ab-section-ink   { background: var(--ab-ink); }
body.page-about-a .ab-section-ink2  { background: var(--ab-ink-2); }
body.page-about-a .ab-section-paper { background: var(--ab-paper); color: var(--ab-ink); }

/* عنوان قسم: سطر تمهيدي تيلي + عنوان كبير، بحركة دخول من الأسفل */
body.page-about-a .ab-heading { margin-bottom: clamp(36px, 4.5vw, 56px); max-width: 56rem; }
body.page-about-a .ab-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .3em;
	line-height: 1.4;
	color: var(--ab-teal-s);
}
body.page-about-a .ab-eyebrow i {
	flex: none;
	width: 40px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: var(--ab-o, right);
	transition: transform 700ms cubic-bezier(.2, .8, .2, 1) 120ms;
}
html[dir="ltr"] body.page-about-a { --ab-o: left; }
body.page-about-a .visible .ab-eyebrow i,
body.page-about-a .ab-heading.visible .ab-eyebrow i { transform: none; }
body.page-about-a .ab-heading h2 {
	margin: 18px 0 0;
	font-size: clamp(1.875rem, 3.4vw, 3rem);
	line-height: 1.28;
	font-weight: 700;
	color: #fff;
	text-wrap: balance;
}
body.page-about-a .ab-heading p {
	margin: 16px 0 0;
	max-width: 46rem;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, .62);
}
body.page-about-a .ab-section-paper .ab-heading h2 { color: var(--ab-navy); }
body.page-about-a .ab-section-paper .ab-heading p  { color: rgba(8, 17, 31, .62); }
body.page-about-a .ab-section-paper .ab-eyebrow    { color: var(--accent-dark); }

body.page-about-a .ab-subtitle { margin: 44px 0 22px; font-size: 1.125rem; font-weight: 700; letter-spacing: .02em; color: var(--ab-teal-s); }
body.page-about-a .ab-hint {
	margin-top: 22px;
	padding: 18px 22px;
	border: 1px dashed rgba(255, 255, 255, .22);
	border-radius: 12px;
	color: rgba(255, 255, 255, .6);
	font-size: .875rem;
	line-height: 1.7;
}
body.page-about-a .ab-hint a { color: var(--ab-teal-s); }

/* ظهور متتابع عام */
body.page-about-a .reveal { transition-delay: calc(var(--i, 0) * 70ms); }

/* =========================================================
   1) الغلاف
   ========================================================= */
body.page-about-a .ab-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(68vh, 640px);
	padding: calc(var(--header) + 72px) 0 0;
	color: #fff;
	background: linear-gradient(180deg, var(--ab-deep), var(--ab-ink));
	overflow: hidden;
	isolation: isolate;
}
body.page-about-a .ab-hero-media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
	transform-origin: 60% 50%;
	animation:
		abHeroSettle 1700ms cubic-bezier(.2, .8, .2, 1) both,
		abHeroDrift 30s ease-in-out 1700ms infinite alternate;
}
@keyframes abHeroSettle { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1.04); } }
@keyframes abHeroDrift  { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.09) translate(-1.4%, 1%); } }
/* التعتيم بلون الهوية الكحلي — نفس نغمة هيرو الرئيسية */
body.page-about-a .ab-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to left, rgba(0, 31, 70, .94) 0%, rgba(0, 31, 70, .45) 58%, rgba(0, 31, 70, .72) 100%),
		linear-gradient(180deg, rgba(0, 31, 70, .34) 0%, rgba(0, 31, 70, .1) 40%, rgba(8, 17, 31, .92) 100%);
}
html[dir="ltr"] body.page-about-a .ab-hero-scrim {
	background:
		linear-gradient(to right, rgba(0, 31, 70, .94) 0%, rgba(0, 31, 70, .45) 58%, rgba(0, 31, 70, .72) 100%),
		linear-gradient(180deg, rgba(0, 31, 70, .34) 0%, rgba(0, 31, 70, .1) 40%, rgba(8, 17, 31, .92) 100%);
}
body.page-about-a .ab-hero-inner { position: relative; padding-bottom: clamp(36px, 5vw, 64px); }
body.page-about-a .ab-hero-copy { max-width: 50rem; }
body.page-about-a .ab-hero .breadcrumb ol { margin-bottom: 24px; }
body.page-about-a .ab-hero-title {
	margin: 20px 0 18px;
	font-size: clamp(2.375rem, 5.2vw, 4.25rem);
	line-height: 1.18;
	font-weight: 700;
	letter-spacing: -.01em;
	text-wrap: balance;
}
body.page-about-a .ab-hero-lead {
	margin: 0;
	max-width: 42rem;
	font-size: clamp(1rem, 1.25vw, 1.125rem);
	line-height: 1.85;
	color: rgba(255, 255, 255, .8);
}
/* دخول متتابع لسطور الغلاف */
body.page-about-a .ab-hero-copy > * {
	animation: abUp 800ms cubic-bezier(.2, .8, .2, 1) both;
}
body.page-about-a .ab-hero-copy > *:nth-child(1) { animation-delay: 180ms; }
body.page-about-a .ab-hero-copy > *:nth-child(2) { animation-delay: 300ms; }
body.page-about-a .ab-hero-copy > *:nth-child(3) { animation-delay: 420ms; }
body.page-about-a .ab-hero-copy > *:nth-child(4) { animation-delay: 540ms; }
@keyframes abUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* نص للقارئات الشاشية فقط */
body.page-about-a .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================
   2) شريط التنقّل الداخلي
   ========================================================= */
body.page-about-a .ab-subnav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(8, 17, 31, .82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--ab-line);
	transition: top var(--ease);
}
body.page-about-a .ab-subnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 2px;
	overflow-x: auto;
	scrollbar-width: none;
}
body.page-about-a .ab-subnav ul::-webkit-scrollbar { display: none; }
body.page-about-a .ab-subnav a {
	position: relative;
	display: block;
	padding: 17px 18px;
	font-size: .9375rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .55);
	white-space: nowrap;
	text-decoration: none;
	transition: color var(--ease);
}
body.page-about-a .ab-subnav a::after {
	content: "";
	position: absolute;
	inset-inline: 18px;
	bottom: -1px;
	height: 2px;
	background: var(--ab-teal);
	transform: scaleX(0);
	transform-origin: var(--ab-o, right);
	transition: transform 320ms cubic-bezier(.2, .8, .2, 1);
}
body.page-about-a .ab-subnav a:hover { color: #fff; }
body.page-about-a .ab-subnav a.is-active { color: #fff; }
body.page-about-a .ab-subnav a.is-active::after { transform: none; }

/* =========================================================
   3) كلمة الرئيس التنفيذي
   ========================================================= */
body.page-about-a .ab-ceo-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: clamp(32px, 5vw, 76px);
	align-items: center;
}
/* الصورة: إطار تيلي مزاح خلفها + كشف بقناع عند الظهور */
body.page-about-a .ab-ceo-photo {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	border-radius: var(--ab-radius);
	overflow: hidden;
	background: rgba(255, 255, 255, .04);
	clip-path: inset(0 0 0 0);
}
body.page-about-a .ab-ceo-figure { position: relative; }
body.page-about-a .ab-ceo-figure::before {
	content: "";
	position: absolute;
	inset: 22px -18px -18px 22px;
	border: 1px solid rgba(0, 165, 181, .5);
	border-radius: var(--ab-radius);
	pointer-events: none;
	opacity: 0;
	transform: translate(10px, 10px);
	transition: opacity 700ms var(--ease), transform 700ms cubic-bezier(.2, .8, .2, 1);
}
html[dir="ltr"] body.page-about-a .ab-ceo-figure::before { inset: 22px 22px -18px -18px; }
body.page-about-a .ab-ceo-figure.visible::before { opacity: 1; transform: none; }
body.page-about-a .ab-ceo-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.06);
	transition: transform 1200ms cubic-bezier(.2, .8, .2, 1);
}
body.page-about-a .ab-ceo-figure.visible .ab-ceo-photo img { transform: none; }
/* صورة الرئيس التنفيذي حين تكون مقصوصة الخلفية (المرفقة بالقالب) */
body.page-about-a .ab-ceo-photo.is-cutout {
	background:
		radial-gradient(90% 76% at 50% 4%, rgba(0, 165, 181, .28) 0%, rgba(0, 165, 181, .06) 46%, transparent 72%),
		linear-gradient(180deg, #0d2135 0%, #091628 100%);
}
body.page-about-a .ab-ceo-photo.is-cutout img {
	object-fit: cover;
	object-position: top center;
	transform: none;
}
body.page-about-a .ab-ceo-figure.visible .ab-ceo-photo.is-cutout img { transform: none; }
body.page-about-a .ab-ceo-placeholder { display: grid; place-items: center; height: 100%; color: rgba(255, 255, 255, .16); }
body.page-about-a .ab-ceo-placeholder svg { width: 92px; height: 92px; }
body.page-about-a .ab-ceo-quote {
	position: relative;
	margin: 0 0 24px;
	padding-inline-start: 24px;
	font-size: clamp(1.1875rem, 1.9vw, 1.625rem);
	line-height: 1.6;
	font-weight: 700;
	color: #fff;
	text-wrap: balance;
}
body.page-about-a .ab-ceo-quote::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: .2em;
	bottom: .2em;
	width: 4px;
	border-radius: 4px;
	background: var(--ab-teal);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 800ms cubic-bezier(.2, .8, .2, 1) 150ms;
}
body.page-about-a .ab-ceo-quote.visible::before { transform: none; }
body.page-about-a .ab-ceo-text p { margin: 0 0 14px; font-size: 1.0625rem; line-height: 1.9; color: rgba(255, 255, 255, .68); }
body.page-about-a .ab-ceo-sign { margin-top: 28px; display: flex; flex-direction: column; gap: 5px; }
body.page-about-a .ab-ceo-sign strong { font-size: 1.125rem; color: #fff; }
body.page-about-a .ab-ceo-sign span { font-size: .875rem; font-weight: 600; letter-spacing: .05em; color: var(--ab-teal-s); }

/* =========================================================
   4) رحلتنا — شريط زمني أفقي ينتهي بالعام الحالي
   بنية كل محطة: قطعة خط + نقطة + سنة + عنوان + وصف. القطع مجتمعة تصنع خطًا متصلًا،
   وتمتلئ بالتيلي واحدة تلو الأخرى عند ظهور الشريط (تأثير رسم الخط).
   ========================================================= */
body.page-about-a .ab-journey-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
body.page-about-a .ab-journey-span {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	border: 1px solid var(--ab-line);
	border-radius: 999px;
	font-family: var(--font-en);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--ab-teal-s);
	background: rgba(0, 165, 181, .08);
	white-space: nowrap;
}
/* الخط الزمني التفاعلي: المحطة النشطة دائرة كبيرة، والجارتان أصغر، والباقي نقاط */
body.page-about-a .ab-tl {
	margin-top: clamp(30px, 4.5vw, 52px);
	--ab-tl-far: 16px;
	--ab-tl-near: clamp(52px, 6vw, 66px);
	--ab-tl-on: clamp(96px, 10vw, 128px);
}
body.page-about-a .ab-tl-rail {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 26px);
}
body.page-about-a .ab-tl-arrow {
	flex: none;
	width: clamp(42px, 4vw, 52px);
	height: clamp(42px, 4vw, 52px);
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 10px;
	background: rgba(0, 45, 98, .55);
	color: #fff;
	cursor: pointer;
	transition: background var(--ease), border-color var(--ease), opacity var(--ease), transform var(--ease);
}
body.page-about-a .ab-tl-arrow svg { width: 20px; height: 20px; }
html[dir="rtl"] body.page-about-a .ab-tl-arrow svg { transform: scaleX(-1); }
body.page-about-a .ab-tl-arrow:hover:not(:disabled) { background: var(--ab-teal); border-color: var(--ab-teal); }
body.page-about-a .ab-tl-arrow:disabled { opacity: .28; cursor: default; }

body.page-about-a .ab-tl-track {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	min-height: calc(var(--ab-tl-on) + 12px);
}
body.page-about-a .ab-tl-line {
	position: absolute;
	inset-inline: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: rgba(255, 255, 255, .14);
	border-radius: 2px;
}
body.page-about-a .ab-tl-line i {
	display: block;
	height: 100%;
	width: var(--ab-tl-fill, 0%);
	border-radius: 2px;
	background: linear-gradient(to left, var(--ab-teal), rgba(0, 165, 181, .45));
	transition: width 620ms cubic-bezier(.2, .8, .2, 1);
}
html[dir="ltr"] body.page-about-a .ab-tl-line i { background: linear-gradient(to right, var(--ab-teal), rgba(0, 165, 181, .45)); }

body.page-about-a .ab-tl-nodes {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
body.page-about-a .ab-tl-item { display: flex; }
body.page-about-a .ab-tl-node {
	position: relative;
	--s: var(--ab-tl-far);
	width: var(--s);
	height: var(--s);
	display: grid;
	place-items: center;
	padding: 0;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .3);
	background: var(--ab-ink-2);
	color: #fff;
	cursor: pointer;
	transition: width 560ms cubic-bezier(.2, .8, .2, 1),
	            height 560ms cubic-bezier(.2, .8, .2, 1),
	            background 460ms var(--ease),
	            border-color 460ms var(--ease),
	            box-shadow 460ms var(--ease);
}
body.page-about-a .ab-tl-node:hover { border-color: var(--ab-teal); }
body.page-about-a .ab-tl-node:focus-visible { outline: 2px solid var(--ab-teal-s); outline-offset: 4px; }
body.page-about-a .ab-tl-node-year {
	font-family: var(--font-en);
	font-weight: 800;
	letter-spacing: -.01em;
	font-size: 0;
	opacity: 0;
	transform: scale(.6);
	transition: opacity 380ms var(--ease), transform 460ms cubic-bezier(.2, .8, .2, 1), font-size 460ms var(--ease);
}
/* الجارتان */
body.page-about-a .ab-tl-node.is-near {
	--s: var(--ab-tl-near);
	border-color: rgba(255, 255, 255, .38);
}
body.page-about-a .ab-tl-node.is-near .ab-tl-node-year {
	font-size: clamp(.75rem, 1.1vw, .9375rem);
	opacity: .85;
	transform: none;
}
/* المحطة النشطة */
body.page-about-a .ab-tl-node.is-active {
	--s: var(--ab-tl-on);
	border-color: rgba(155, 226, 233, .55);
	background: radial-gradient(120% 120% at 30% 24%, #2ec2cf 0%, #0f95a6 48%, #077183 100%);
	box-shadow: 0 0 44px rgba(0, 165, 181, .3);
	cursor: default;
}
body.page-about-a .ab-tl-node.is-active .ab-tl-node-year {
	font-size: clamp(1.375rem, 2.2vw, 1.875rem);
	opacity: 1;
	transform: none;
	color: #fff;
}
/* محطة «اليوم»: حلقة نابضة منفصلة حتى لا تتأثر حافة الدائرة نفسها */
body.page-about-a .ab-tl-node::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
}
body.page-about-a .ab-tl-item.is-now .ab-tl-node.is-active::after {
	box-shadow: 0 0 0 2px rgba(0, 165, 181, .55);
	animation: abPulse 2.8s ease-out 1s infinite;
}
@keyframes abPulse {
	0%   { opacity: .6; transform: scale(1); }
	70%  { opacity: 0;  transform: scale(1.32); }
	100% { opacity: 0;  transform: scale(1.32); }
}

/* النص أسفل الخط */
body.page-about-a .ab-tl-panes {
	position: relative;
	margin: clamp(26px, 3.6vw, 40px) auto 0;
	max-width: 46rem;
	min-height: 172px;
	text-align: center;
}
body.page-about-a .ab-tl-pane { animation: abTlIn 520ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes abTlIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body.page-about-a .ab-tl-tag {
	display: inline-block;
	margin-bottom: 12px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--ab-teal);
	color: var(--ab-ink);
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .08em;
}
body.page-about-a .ab-tl-pane-year {
	display: block;
	font-family: var(--font-en);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--ab-teal-s);
}
body.page-about-a .ab-tl-pane h3 {
	margin: 10px 0 12px;
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	line-height: 1.4;
	font-weight: 700;
	color: #fff;
	text-wrap: balance;
}
body.page-about-a .ab-tl-pane p {
	margin: 0;
	font-size: clamp(.9375rem, 1.2vw, 1.0625rem);
	line-height: 1.95;
	color: rgba(255, 255, 255, .66);
	text-wrap: pretty;
}

/* =========================================================
   5) الرؤية والرسالة والاستراتيجية
   ========================================================= */
body.page-about-a .ab-cards-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}
body.page-about-a .ab-card {
	position: relative;
	padding: 40px 32px 36px;
	border-radius: var(--ab-radius);
	background: var(--ab-glass);
	border: 1px solid var(--ab-line);
	overflow: hidden;
	transition: transform var(--ease), border-color var(--ease), background var(--ease);
}
body.page-about-a .ab-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: linear-gradient(to left, var(--ab-teal), transparent);
	transform: scaleX(0);
	transform-origin: var(--ab-o, right);
	transition: transform 700ms cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 90ms + 120ms);
}
body.page-about-a .ab-card.visible::before { transform: none; }
body.page-about-a .ab-card:hover { transform: translateY(-6px); border-color: rgba(0, 165, 181, .4); background: rgba(255, 255, 255, .075); }
body.page-about-a .ab-card-icon {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin-bottom: 24px;
	border-radius: 18px;
	background: rgba(0, 165, 181, .12);
	border: 1px solid rgba(0, 165, 181, .28);
	color: var(--ab-teal-s);
	transition: transform var(--slow), background var(--ease);
}
body.page-about-a .ab-card:hover .ab-card-icon { transform: translateY(-3px) rotate(-4deg); background: rgba(0, 165, 181, .2); }
body.page-about-a .ab-card-icon svg { width: 30px; height: 30px; }
body.page-about-a .ab-card h3 { margin: 0 0 14px; font-size: 1.375rem; font-weight: 700; color: #fff; }
body.page-about-a .ab-card p  { margin: 0; font-size: 1rem; line-height: 1.85; color: rgba(255, 255, 255, .64); }
body.page-about-a .ab-card-lead p { font-size: 1.0625rem; color: rgba(255, 255, 255, .82); }

/* =========================================================
   6) مجلس الإدارة
   ========================================================= */
body.page-about-a .ab-team {
	display: grid;
	gap: clamp(22px, 2.6vw, 34px);
}
body.page-about-a .ab-team-leads {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 820px;
	margin-inline: auto;
}
body.page-about-a .ab-team-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(26px, 3vw, 40px);
}

/* البطاقة: خلفية داكنة بإضاءة خلف الرأس، والصورة تتلاشى في الأسفل */
body.page-about-a .ab-team-card { position: relative; }
body.page-about-a .ab-team-shot {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 22px;
	overflow: hidden;
	display: grid;
	place-items: end center;
	background:
		radial-gradient(90% 78% at 50% 4%, rgba(0, 165, 181, .3) 0%, rgba(0, 165, 181, .06) 46%, transparent 72%),
		linear-gradient(180deg, #0d2135 0%, #091628 100%);
	border: 1px solid rgba(255, 255, 255, .1);
	transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
body.page-about-a .ab-team-item:hover .ab-team-shot {
	border-color: rgba(0, 165, 181, .45);
	transform: translateY(-5px);
	box-shadow: 0 26px 60px rgba(0, 0, 0, .38);
}
/* الصور موحّدة الإطار (نفس مقاس الرأس وموضعه) والتلاشي السفلي مدمج فيها */
body.page-about-a .ab-team-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	transition: transform 700ms cubic-bezier(.2, .8, .2, 1);
}
body.page-about-a .ab-team-item:hover .ab-team-shot img { transform: scale(1.035); }
body.page-about-a .ab-team-initial {
	place-self: center;
	font-size: 3rem;
	font-weight: 800;
	color: rgba(255, 255, 255, .3);
}
/* الرقم التسلسلي داخل البطاقة */
body.page-about-a .ab-team-no {
	position: absolute;
	inset-block-end: 14px;
	inset-inline-start: 18px;
	font-family: var(--font-en);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .34em;
	color: rgba(255, 255, 255, .42);
}
/* أقواس الزوايا لبطاقتَي الرئيس ونائبه */
body.page-about-a .ab-team-frame {
	position: absolute;
	inset: -11px;
	pointer-events: none;
	z-index: 2;
	background:
		linear-gradient(var(--ab-teal-s), var(--ab-teal-s)) 0 0 / 22px 1px no-repeat,
		linear-gradient(var(--ab-teal-s), var(--ab-teal-s)) 0 0 / 1px 22px no-repeat,
		linear-gradient(var(--ab-teal-s), var(--ab-teal-s)) 100% 0 / 22px 1px no-repeat,
		linear-gradient(var(--ab-teal-s), var(--ab-teal-s)) 100% 0 / 1px 22px no-repeat,
		linear-gradient(var(--ab-teal-s), var(--ab-teal-s)) 0 100% / 22px 1px no-repeat,
		linear-gradient(var(--ab-teal-s), var(--ab-teal-s)) 0 100% / 1px 22px no-repeat,
		linear-gradient(var(--ab-teal-s), var(--ab-teal-s)) 100% 100% / 22px 1px no-repeat,
		linear-gradient(var(--ab-teal-s), var(--ab-teal-s)) 100% 100% / 1px 22px no-repeat;
	opacity: .5;
}

/* الاسم والمنصب أسفل البطاقة */
body.page-about-a .ab-team-meta { margin-top: 20px; text-align: center; }
body.page-about-a .ab-team-rule {
	display: block;
	width: 34px;
	height: 2px;
	margin: 0 auto 14px;
	border-radius: 2px;
	background: var(--ab-teal);
	transform: scaleX(0);
	transition: transform 600ms cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 60ms + 120ms);
}
body.page-about-a .ab-team-item.visible .ab-team-rule { transform: none; }
body.page-about-a .ab-team-meta h3 {
	margin: 0 0 8px;
	font-size: clamp(1rem, 1.4vw, 1.1875rem);
	line-height: 1.45;
	font-weight: 700;
	color: #fff;
	text-wrap: balance;
}
body.page-about-a .ab-team-role {
	display: block;
	font-size: .875rem;
	line-height: 1.6;
	font-weight: 600;
	color: var(--ab-teal-s);
}
body.page-about-a .ab-team-link { display: inline-block; margin-top: 8px; font-size: .75rem; font-weight: 700; color: rgba(255, 255, 255, .6); }
body.page-about-a .ab-team-link:hover { color: var(--ab-teal-s); }

/* =========================================================
   7) سياسة الجودة
   ========================================================= */
body.page-about-a .ab-quality-panel {
	position: relative;
	padding: 30px 32px;
	border-radius: var(--ab-radius);
	background: linear-gradient(150deg, rgba(0, 165, 181, .1), rgba(255, 255, 255, .03));
	border: 1px solid var(--ab-line);
	border-inline-start: 4px solid var(--ab-teal);
}
body.page-about-a .ab-quality-panel p { margin: 0; font-size: 1.0625rem; line-height: 1.95; color: rgba(255, 255, 255, .82); }
body.page-about-a .ab-quality-panel strong { color: #fff; }
body.page-about-a .ab-pillars {
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
body.page-about-a .ab-pillars li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
	border-radius: var(--ab-radius);
	background: var(--ab-glass);
	border: 1px solid var(--ab-line);
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	transition: transform var(--ease), border-color var(--ease);
}
body.page-about-a .ab-pillars li:hover { transform: translateY(-4px); border-color: rgba(0, 165, 181, .4); }
body.page-about-a .ab-pillar-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(0, 165, 181, .12);
	color: var(--ab-teal-s);
}
body.page-about-a .ab-pillar-icon svg { width: 24px; height: 24px; }

/* =========================================================
   8) الالتزامات الاستراتيجية — استراحة فاتحة
   ========================================================= */
body.page-about-a .ab-commit-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}
body.page-about-a .ab-commit-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-height: 196px;
	padding: 30px 22px;
	border-radius: var(--ab-radius);
	background: #fff;
	border: 1px solid rgba(0, 45, 98, .1);
	text-align: center;
	transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
body.page-about-a .ab-commit-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(0, 31, 70, .45); border-color: rgba(0, 165, 181, .4); }
body.page-about-a .ab-commit-icon {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin-bottom: 14px;
	border-radius: 15px;
	background: rgba(0, 165, 181, .1);
	color: var(--accent-dark);
	transition: transform var(--slow);
}
body.page-about-a .ab-commit-card:hover .ab-commit-icon { transform: translateY(-3px) rotate(-4deg); }
body.page-about-a .ab-commit-icon svg { width: 26px; height: 26px; }
body.page-about-a .ab-commit-text { font-size: 1rem; line-height: 1.6; font-weight: 700; color: var(--ab-navy); }
/* وصف اختياري تحت نصّ البطاقة — البطاقات بلا وصف لا تتأثر */
body.page-about-a .ab-commit-desc {
	font-size: .875rem;
	line-height: 1.65;
	font-weight: 400;
	color: rgba(0, 45, 98, .66);
	margin-top: 2px;
}
body.page-about-a .ab-commit-card.is-goal { border: 2px dashed var(--ab-teal); background: rgba(0, 165, 181, .05); }
body.page-about-a .ab-commit-card.is-goal .ab-commit-text { color: var(--accent-dark); }

/* =========================================================
   8.5) الملف التعريفي — بطاقة تنزيل: غلاف الصفحة الأولى + الزر
   الغلاف مائل قليلًا كورقة مرفوعة، ويستوي عند المرور.
   ========================================================= */
body.page-about-a .ab-profile-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	padding: clamp(24px, 3vw, 40px);
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-radius);
	background: var(--ab-glass);
}
body.page-about-a .ab-profile-card.is-nocover { grid-template-columns: minmax(0, 1fr); }

body.page-about-a .ab-profile-cover {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 22px 44px rgba(0, 0, 0, .45);
	transform: rotate(-1.4deg);
	transition: transform var(--ease), box-shadow var(--ease);
}
html[dir="ltr"] body.page-about-a .ab-profile-cover { transform: rotate(1.4deg); }
body.page-about-a .ab-profile-cover:hover,
body.page-about-a .ab-profile-cover:focus-visible {
	transform: rotate(0) translateY(-2px);
	box-shadow: 0 26px 52px rgba(0, 0, 0, .5);
}
body.page-about-a .ab-profile-cover img { display: block; width: 100%; height: auto; }

body.page-about-a .ab-profile-text {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.9;
	color: rgba(236, 242, 246, .78);
}

body.page-about-a .ab-profile-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}
body.page-about-a .ab-profile-meta li {
	padding: 6px 12px;
	border: 1px solid var(--ab-line);
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--ab-teal-s);
}

body.page-about-a .ab-profile-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin-top: 28px;
}
body.page-about-a .ab-profile-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 54px;
	padding: 15px 28px;
	border-radius: 8px;
	background: var(--ab-teal);
	color: #06222a;
	font-weight: 700;
	text-decoration: none;
	transition: background var(--ease), transform var(--ease);
}
body.page-about-a .ab-profile-btn:hover { background: var(--ab-teal-s); transform: translateY(-1px); }
body.page-about-a .ab-profile-btn-ico { display: inline-flex; width: 20px; height: 20px; }
body.page-about-a .ab-profile-btn-ico svg { width: 100%; height: 100%; }

body.page-about-a .ab-profile-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(236, 242, 246, .82);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(236, 242, 246, .28);
	padding-bottom: 2px;
	transition: color var(--ease), border-color var(--ease);
}
body.page-about-a .ab-profile-link:hover { color: #fff; border-color: rgba(236, 242, 246, .6); }
body.page-about-a .ab-profile-ext { display: inline-flex; width: 15px; height: 15px; }
body.page-about-a .ab-profile-ext svg { width: 100%; height: 100%; }
html[dir="rtl"] body.page-about-a .ab-profile-ext { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
	body.page-about-a .ab-profile-cover { transform: none; }
}

/* =========================================================
   9) الختام — ورقي كما في الرئيسية
   ========================================================= */
body.page-about-a .ab-cta {
	background: var(--ab-paper);
	color: var(--ab-ink);
	padding: clamp(56px, 6vw, 92px) 0;
	border-top: 1px solid rgba(8, 17, 31, .08);
}
body.page-about-a .ab-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
body.page-about-a .ab-cta h2 { margin: 0; font-size: clamp(1.625rem, 3vw, 2.75rem); line-height: 1.24; font-weight: 700; color: var(--ab-ink); text-wrap: balance; }
body.page-about-a .ab-cta p { margin: 12px 0 0; font-size: 1.0625rem; color: rgba(8, 17, 31, .64); }
body.page-about-a .ab-cta-btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 54px;
	padding: 16px 32px;
	border-radius: 8px;
	background: var(--ab-navy);
	color: #fff;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	transition: background var(--ease), transform var(--ease);
}
body.page-about-a .ab-cta-btn:hover { background: var(--ab-ink); transform: translateY(-1px); }

/* =========================================================
   المقاسات
   ========================================================= */
@media (max-width: 1024px) {
	body.page-about-a .ab-ceo-grid    { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 32px; }
	body.page-about-a .ab-cards-3     { grid-template-columns: 1fr; }
	body.page-about-a .ab-team-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.page-about-a .ab-pillars     { grid-template-columns: 1fr; }
	body.page-about-a .ab-commit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.page-about-a .ab-profile-card { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
	body.page-about-a .ab-hero        { min-height: 0; padding: calc(var(--header) + 40px) 0 0; }
	body.page-about-a .ab-subnav a    { padding: 14px 13px; font-size: .875rem; }
	body.page-about-a .ab-section     { scroll-margin-top: 54px; }
	body.page-about-a .ab-ceo-grid    { grid-template-columns: 1fr; }
	body.page-about-a .ab-ceo-photo   { max-width: 300px; }
	body.page-about-a .ab-ceo-figure::before { inset: 16px -12px -12px 16px; }
	body.page-about-a .ab-team-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
	body.page-about-a .ab-team-leads  { gap: 18px; }
	body.page-about-a .ab-team-shot   { border-radius: 16px; }
	body.page-about-a .ab-team-frame  { inset: -6px; }
	body.page-about-a .ab-team-meta   { margin-top: 14px; }
	body.page-about-a .ab-commit-grid { grid-template-columns: 1fr; }
	body.page-about-a .ab-commit-card { min-height: 0; flex-direction: row; text-align: start; gap: 16px; padding: 18px; }
	body.page-about-a .ab-commit-icon { margin-bottom: 0; width: 46px; height: 46px; }
	body.page-about-a .ab-cta-inner   { flex-direction: column; align-items: stretch; }
	body.page-about-a .ab-cta-btn     { justify-content: center; }

	/* الخط الزمني: نفس التركيب بمقاسات أصغر.
	   المحطات صارت ١٣ بدل ٨، وبالمقاسات السابقة كان مجموع الدوائر والفجوات يتجاوز
	   عرض الشريط على شاشة 430 بكسل بنحو ٢٠ بكسل فتُقصّ آخر محطة. القياس بعد التصغير:
	   ٢٢٧ بكسل داخل ٢٥٨ متاحة — بفسحة تكفي محطة إضافية مستقبلًا. */
	body.page-about-a .ab-tl {
		--ab-tl-far: 9px;
		--ab-tl-near: 36px;
		--ab-tl-on: 68px;
	}
	body.page-about-a .ab-tl-rail  { gap: 8px; }
	body.page-about-a .ab-tl-arrow { width: 38px; height: 38px; border-radius: 9px; }
	body.page-about-a .ab-tl-arrow svg { width: 17px; height: 17px; }
	body.page-about-a .ab-tl-nodes { gap: 2px; }
	body.page-about-a .ab-tl-node.is-near .ab-tl-node-year { font-size: .625rem; }
	body.page-about-a .ab-tl-node.is-active .ab-tl-node-year { font-size: 1.125rem; }
	body.page-about-a .ab-tl-panes { min-height: 200px; }
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
	body.page-about-a .ab-hero-media,
	body.page-about-a .ab-hero-copy > *,
	body.page-about-a .ab-tl-pane { animation: none; opacity: 1; transform: none; }
	body.page-about-a .ab-tl-node,
	body.page-about-a .ab-tl-node-year,
	body.page-about-a .ab-tl-line i,
	body.page-about-a .ab-card::before,
	body.page-about-a .ab-ceo-quote::before,
	body.page-about-a .ab-ceo-figure::before,
	body.page-about-a .ab-ceo-photo img,
	body.page-about-a .ab-eyebrow i { transition: none; transform: none; opacity: 1; }
	body.page-about-a .ab-tl-item.is-now .ab-tl-node.is-active::after { animation: none; opacity: 0; }
}

/* الشاشات الضيقة جدًا (≤400 بكسل): الخط الزمني بثلاث عشرة محطة.
   القياس عند 360 بكسل بمقاسات شريحة 640: آخر محطة تخرج ٣٩ بكسل خارج الشريط فتُقصّ.
   الشريط لا يمرّر أفقيًا (الحركة بالسهمين)، فالحل تصغير الدوائر لا إخفاؤها:
   مجموع العرض يصير ١٥٨ بكسل داخل ١٦٤ متاحة عند 320 — أضيق مقاس يدعمه القالب. */
@media (max-width: 400px) {
	body.page-about-a .ab-tl {
		--ab-tl-far: 6px;
		--ab-tl-near: 28px;
		--ab-tl-on: 52px;
	}
	body.page-about-a .ab-tl-nodes { gap: 1px; }
	body.page-about-a .ab-tl-rail  { gap: 6px; }
	body.page-about-a .ab-tl-arrow { width: 32px; height: 32px; }
	body.page-about-a .ab-tl-node.is-active .ab-tl-node-year { font-size: .875rem; }
	body.page-about-a .ab-tl-node.is-near .ab-tl-node-year   { font-size: .5625rem; }
}

/* =========================================================
   تعديلات الجوال — مراجعة ما قبل التسليم (2026-09-16)
   ========================================================= */

/* شريط الأقسام على الجوال: كان آخر عنصر يُقصّ عند الحافة بلا أي إشارة إلى أن
   الشريط يُمرَّر — فيُقرأ كنصّ مبتور لا كشريط. (شريط التمرير مخفيّ عمدًا في
   scrollbar-width: none، وهو ما أزال آخر دليل بصري.)

   العلاج: تلاشٍ عند حافة الفيض وحدها + فسحة في نهايته. والتلاشي **اتجاهي**:
   في العربية يفيض الشريط يسارًا وفي الإنجليزية يمينًا، فلو ثبّتنا الجهة لظهر
   التلاشي على الحافة الخطأ في إحدى اللغتين. */
@media (max-width: 640px) {
	body.page-about-a .ab-subnav ul {
		padding-inline-end: 26px;
	}
	html[dir="rtl"] body.page-about-a .ab-subnav ul {
		-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent);
		        mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent);
	}
	html[dir="ltr"] body.page-about-a .ab-subnav ul {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
		        mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
	}
}

/* بطاقة الالتزام على الجوال: البطاقة تصير صفًّا (flex-direction: row)، لكن
   أبناءها الثلاثة — الأيقونة والعنوان والوصف — كلهم عناصر مرنة في الصف نفسه.
   فيقتسمون العرض أثلاثًا ويبقى للعنوان نحو ٦٠ بكسل، فينكسر كلمةً في كل سطر:
   «السلامة / والصحة / والبيئة».

   العلاج شبكة لا صفّ: عمود للأيقونة وعمود للنصّ، والعنوان والوصف سطران فيه.
   بلا تعديل في القالب — الترتيب كله من الـCSS. */
@media (max-width: 640px) {
	body.page-about-a .ab-commit-card {
		display: grid;
		grid-template-columns: 46px minmax(0, 1fr);
		column-gap: 16px;
		row-gap: 4px;
		align-items: start;
	}
	body.page-about-a .ab-commit-icon { grid-column: 1; grid-row: 1 / span 2; }
	body.page-about-a .ab-commit-text { grid-column: 2; grid-row: 1; }
	body.page-about-a .ab-commit-desc { grid-column: 2; grid-row: 2; }
}

/* =========================================================
   تتبُّع الحروف والعربية — مراجعة ما قبل التسليم (2026-09-16)
   =========================================================

   الحرف العربي متّصل بما قبله وما بعده، و letter-spacing تُدخِل فراغًا بين كل
   حرفين فتفكّ هذا الاتصال. على iOS تظهر الكلمة **مقطّعة** فعلًا — رُصد على
   آيفون في «صناعة سعودية منذ 2005» وتتبُّعها 0.32em — وعلى كروم تبدو مبعثرة
   وإن بقيت متصلة.

   والتتبُّع تقليد طباعي **لاتيني** للعناوين الصغيرة لا مقابل له في العربية.
   فيُلغى هنا في الاتجاه العربي وحده، ويبقى في النسخة الإنجليزية وفي المقاطع
   اللاتينية المعلَّمة بـ dir="ltr" (الأسعار، رموز تداول، أكواد المنتجات)
   — ولهذا :not([dir="ltr"]).

   وحيث كان التتبُّع كبيرًا (‏≥ 0.18em) فالمقصود «عنوان صغير متباعد»، فيُعوَّض
   بتباعد بين **الكلمات** لا بين الحروف: يحفظ الأثر البصري ولا يمسّ الاتصال.
   ========================================================= */

html[dir="rtl"] body.page-about-a .ab-journey-span:not([dir="ltr"]),
html[dir="rtl"] body.page-about-a .ab-tl-tag:not([dir="ltr"]) {
	letter-spacing: normal;
}

html[dir="rtl"] body.page-about-a .ab-eyebrow:not([dir="ltr"]),
html[dir="rtl"] body.page-about-a .ab-team-no:not([dir="ltr"]),
html[dir="rtl"] body.page-about-a .ab-tl-pane-year:not([dir="ltr"]) {
	letter-spacing: normal;
	word-spacing: .14em;
}