/* =============================================================
   Albilad FFS — design system v2
   Identity built from the OFFICIAL logo colors:
   deep blue #2F4EA0 · sky #2FAFDF · brand red #C0121F (CTA only)
   Industrial · engineering-led · corporate · high contrast
   Mobile-first · RTL-ready (logical properties)
   ============================================================= */

:root {
	/* brand (from logo) */
	--primary: #2f4ea0;
	--primary-dark: #24397a;
	--sky: #2fafdf;
	--cta: #c0121f;
	--cta-dark: #9c0e19;
	/* neutrals (blue-biased) */
	--navy: #16203a;
	--navy-2: #1d2c55;
	--ink: #1a2233;
	--steel: #5a6474;
	--paper: #ffffff;
	--surface: #f4f6f9;
	--line: #dfe4ec;
	--hover-wash: #e9eef6;
	--on-dark: #f4f6fa;
	--on-dark-dim: #b9c2d4;
	/* status */
	--success: #2e7d4f;
	--warning: #b97a0d;
	--error: #b3261e;
	/* type */
	--font-display: "Barlow Condensed", "Arial Narrow", "Segoe UI", Tahoma, sans-serif;
	--font-body: "Barlow", -apple-system, "SF Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
	/* layout */
	--wrap: 1200px;
	--radius: 3px;
	--gap: clamp(16px, 2.5vw, 28px);
	--section-pad: clamp(44px, 6vw, 76px);
	--header-h: 66px;
	--motion: 1;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(15.5px, 1vw + 10px, 17px);
	line-height: 1.65;
	color: var(--ink);
	background: var(--paper);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); }
a:hover { color: var(--primary-dark); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; box-shadow: 0 0 0 5px rgb(36 57 122 / .35); }

[id] { scroll-margin-block-start: calc(var(--header-h) + 24px); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.wrap--narrow { max-width: 840px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Hidden by default (takes no layout space), slides in only on keyboard focus. */
.skip-link {
	position: absolute; inset-inline-start: 16px; top: 0; z-index: 999;
	transform: translateY(-200%);
	background: var(--navy); color: #fff; padding: 10px 18px;
	border-radius: 0 0 var(--radius) var(--radius); text-decoration: none;
	transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- typography ---------- */
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: 0.015em;
	text-transform: uppercase;
	margin: 0 0 0.45em;
	text-wrap: balance;
	color: inherit;
}
h1 { font-size: clamp(30px, 5vw, 50px); }
h2 { font-size: clamp(24px, 3.4vw, 34px); }
h3 { font-size: clamp(18px, 2.2vw, 22px); }
p { margin: 0 0 1em; }

.eyebrow {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--primary);
	margin: 0 0 10px;
}
.eyebrow a { text-decoration: none; }

/* ---------- buttons ---------- */
.btn {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 12px 26px;
	border: 2px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); color: #fff; }
.btn--cta { background: var(--cta); color: #fff; }
.btn--cta:hover { background: var(--cta-dark); color: #fff; }
.btn--ghost { border-color: var(--primary); color: var(--primary); background: transparent; }
.btn--ghost:hover { background: var(--hover-wash); }
.btn--ghost-dark { border-color: rgb(185 194 212 / .7); color: var(--on-dark); background: transparent; }
.btn--ghost-dark:hover { border-color: #fff; color: #fff; }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--surface); color: var(--navy); }

/* ---------- topbar (slim) ---------- */
.topbar { background: var(--navy); color: var(--on-dark-dim); font-size: 12.5px; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 5px; min-height: 28px; }
.topbar__note { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .02em; }
.topbar__link { color: #fff; font-weight: 500; text-decoration: none; white-space: nowrap; }
.topbar__link:hover { color: var(--sky); }

/* ---------- header ---------- */
.site-header {
	position: sticky; top: 0; z-index: 90;
	background: var(--paper);
	border-block-end: 1px solid var(--line);
	transition: box-shadow .2s ease;
}
/* Grid: fixed logo | flexible centered nav | fixed tools — no overlap possible */
.site-header__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(10px, 1.5vw, 22px);
	min-height: var(--header-h);
}
.site-header.is-stuck { box-shadow: 0 3px 16px rgb(22 32 58 / .12); }
.site-header.is-stuck .brand__img { height: 42px; }

.brand { display: inline-flex; align-items: center; text-decoration: none; }
/* Official 2026 lockup (378×165, transparent PNG): height-driven, width auto keeps ratio */
.brand__img { height: 54px; width: auto; object-fit: contain; transition: height .2s ease; }
.site-header.is-stuck .brand__img { height: 44px; }
@media (max-width: 767px) {
	.brand__img { height: 42px; }
	.site-header.is-stuck .brand__img { height: 40px; }
}
.brand--footer { max-width: 260px; background: none; padding: 0; }
.brand--footer .brand__img { height: 66px; width: auto; }

.header-tools { display: flex; align-items: center; gap: 10px; justify-self: end; }
.lang-switch {
	display: inline-flex; align-items: center; height: 40px;
	font-size: 14px; font-weight: 700; letter-spacing: .02em;
	border: 1px solid var(--line); border-radius: var(--radius);
	padding-inline: 13px; color: var(--primary); white-space: nowrap;
	text-decoration: none; transition: background-color .15s ease, border-color .15s ease;
}
a.lang-switch:hover { background: var(--hover-wash); border-color: var(--primary); color: var(--primary); }
.header-cta { display: none; }
@media (min-width: 1360px) {
	.header-cta { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; font-size: 14.5px; }
}

.nav-toggle {
	display: grid; place-items: center;
	width: 44px; height: 44px;
	background: none; border: 1px solid var(--line); border-radius: var(--radius);
}
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
	content: ""; display: block; width: 20px; height: 2px; background: var(--ink); position: relative;
}
.nav-toggle__bar::before { position: absolute; top: -6px; }
.nav-toggle__bar::after { position: absolute; top: 6px; }

/* ---------- navigation ---------- */
.site-nav { display: none; }
.site-nav__list { list-style: none; margin: 0; padding: 0; }
.site-nav__list a {
	font-family: var(--font-display); font-weight: 600;
	letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--ink); text-decoration: none; white-space: nowrap;
	display: block;
}
.site-nav__list a:hover { color: var(--primary); }

/* mobile: full-screen panel */
.site-nav.is-open {
	display: block; position: fixed; inset: 0; top: 0; z-index: 100;
	background: var(--navy); overflow-y: auto;
	padding: 84px clamp(20px, 6vw, 40px) 40px;
}
.site-nav.is-open .site-nav__list a { color: var(--on-dark); font-size: 22px; padding: 12px 0; border-block-end: 1px solid rgb(255 255 255 / .08); }
.site-nav.is-open .site-nav__list a:hover { color: var(--sky); }
.site-nav.is-open .sub-menu { list-style: none; padding: 0 0 6px; margin: 0; }
.site-nav.is-open .sub-menu a { font-family: var(--font-body); font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--on-dark-dim); padding: 8px 0 8px; padding-inline-start: 18px; border: 0; }
.nav-close {
	position: fixed; top: 18px; inset-inline-end: 18px; z-index: 101;
	display: none; width: 44px; height: 44px;
	background: rgb(255 255 255 / .08); color: #fff; border: 0; border-radius: var(--radius);
	font-size: 22px; line-height: 1; cursor: pointer;
}
body.nav-open .nav-close { display: grid; place-items: center; }
body.nav-open { overflow: hidden; }

/* desktop: one-line nav + dropdowns (early breakpoint so nothing ever wraps) */
@media (min-width: 1200px) {
	.nav-toggle, .nav-close { display: none !important; }
	.site-nav { display: block; min-width: 0; }
	.site-nav__list { display: flex; justify-content: center; flex-wrap: nowrap; gap: 0; }
	.site-nav__list > li { position: relative; }
	.site-nav__list > li > a { padding: 22px clamp(7px, 0.85vw, 13px); font-size: 14.5px; }
	.site-nav__list > li.current-menu-item > a,
	.site-nav__list > li.current-menu-ancestor > a { color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); }

	.site-nav__list .sub-menu {
		list-style: none; margin: 0; padding: 8px 0;
		position: absolute; top: 100%; inset-inline-start: 0; min-width: 250px;
		background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--primary);
		border-radius: 0 0 var(--radius) var(--radius);
		box-shadow: 0 16px 34px rgb(22 32 58 / .16); z-index: 95;
		opacity: 0; visibility: hidden; transform: translateY(6px);
		transition: opacity .16s ease, transform .16s ease, visibility .16s;
	}
	.site-nav__list > li:hover > .sub-menu,
	.site-nav__list > li:focus-within > .sub-menu,
	.site-nav__list > li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
	.site-nav__list .sub-menu a {
		font-family: var(--font-body); font-size: 15px; font-weight: 500;
		text-transform: none; letter-spacing: 0; color: var(--ink);
		padding: 9px 18px; white-space: normal;
	}
	.site-nav__list .sub-menu a:hover { background: var(--hover-wash); color: var(--primary); }
	/* mega: wide 2-col panel for items flagged .mega (Solutions) */
	.site-nav__list > li.mega > .sub-menu { min-width: 460px; columns: 2; column-gap: 0; padding: 12px 6px; }
	.site-nav__list > li.mega > .sub-menu > li { break-inside: avoid; }
}

/* ---------- hero (home) ---------- */
.hero {
	position: relative;
	background: linear-gradient(115deg, var(--navy) 0%, var(--navy-2) 55%, var(--primary-dark) 100%);
	color: var(--on-dark); overflow: hidden;
}
.hero__stripe {
	position: absolute; inset-block: 0; inset-inline-end: -8%;
	width: 44%;
	background: repeating-linear-gradient(-58deg, transparent 0 26px, rgb(47 175 223 / .10) 26px 52px);
	clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
	pointer-events: none;
}
.hero__inner { position: relative; display: grid; gap: var(--gap); padding-block: clamp(48px, 7.5vw, 96px); align-items: center; }
.hero .eyebrow { color: var(--sky); }
.hero__title { color: #fff; max-width: 18ch; margin-bottom: 14px; }
.hero__lead { font-size: clamp(16px, 1.8vw, 19px); color: var(--on-dark-dim); max-width: 50ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 12px; }
.hero__media { position: relative; }
.hero__media img { border-radius: var(--radius); box-shadow: 0 24px 48px rgb(0 0 0 / .35); }
.hero__media::after {
	content: ""; position: absolute; inset-block-end: -10px; inset-inline-start: -10px;
	width: 42%; height: 8px; background: var(--cta);
}
@media (min-width: 900px) { .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }

/* ---------- trust bar ---------- */
.trust { background: var(--primary); color: #fff; }
.trust__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; padding-block: 16px; }
.trust__item { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 6px 4px; text-align: center; }
.trust__item svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: var(--sky); stroke-width: 1.8; }
.trust__item span { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- sections ---------- */
.section { padding-block: var(--section-pad); }
.section--dark { background: var(--navy); color: var(--on-dark); }
.section--dark .section__title { color: #fff; }
.section--tinted { background: var(--surface); }
.section__head { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 24px; margin-block-end: clamp(20px, 3.5vw, 32px); }
.section__title { margin: 0; }
.section__intro { flex-basis: 100%; color: var(--steel); max-width: 64ch; margin: 4px 0 0; }
.section--dark .section__intro { color: var(--on-dark-dim); }
.section__more {
	margin-inline-start: auto;
	font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
	letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
	white-space: nowrap;
}
.section--dark .section__more { color: var(--sky); }

/* ---------- grids, tiles, cards ---------- */
.grid { display: grid; gap: var(--gap); }
@media (min-width: 640px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.tile {
	position: relative; display: block;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 24px 22px 20px;
	text-decoration: none; color: inherit;
	border-block-start: 3px solid var(--primary);
	transition: transform .16s ease, box-shadow .16s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgb(22 32 58 / .12); color: inherit; }
.tile__title { margin-block-end: 6px; }
.tile__count, .tile__desc { color: var(--steel); font-size: 14.5px; margin: 0; }
.tile__arrow { position: absolute; inset-inline-end: 18px; inset-block-end: 12px; color: var(--primary); font-size: 19px; transition: transform .16s ease; }
.tile:hover .tile__arrow { transform: translateX(4px); }
.tile--dark { background: var(--navy-2); border-color: #2a3760; border-block-start-color: var(--sky); color: var(--on-dark); }
.tile--dark .tile__desc { color: var(--on-dark-dim); }
.tile--dark .tile__arrow { color: var(--sky); }
.tile--dark:hover { color: var(--on-dark); }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.card__media { aspect-ratio: 16 / 10; background: var(--surface); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease, opacity .4s ease; }
.card:hover .card__media img { transform: scale(1.035); }
.card__media-fallback {
	display: block; width: 100%; height: 100%;
	background:
		repeating-linear-gradient(-58deg, transparent 0 18px, rgb(47 78 160 / .06) 18px 36px),
		var(--surface);
}
.card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.card__meta { color: var(--steel); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.card__title { margin: 0; }
.card__excerpt { color: var(--steel); font-size: 14.5px; margin: 0; }
.card__cta {
	margin-block-start: auto; padding-block-start: 8px;
	font-family: var(--font-display); font-weight: 600; font-size: 14px;
	letter-spacing: 0.09em; text-transform: uppercase; color: var(--primary);
}
.card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgb(22 32 58 / .12); border-color: #c9d3e4; }

/* ---------- stats / counters ---------- */
.stats { background: var(--primary); color: #fff; }
.stats__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; padding-block: 24px; }
.stat { text-align: center; padding-inline: 8px; }
.stat__value { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.6vw, 40px); line-height: 1; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; opacity: .92; }

/* ---------- capabilities split ---------- */
.split { display: grid; gap: calc(var(--gap) * 1.4); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr 1fr; } }
.split__media img { border-radius: var(--radius); }
.split__media { position: relative; }
.split__media::before {
	content: ""; position: absolute; inset-block-start: -12px; inset-inline-start: -12px;
	width: 34%; height: 8px; background: var(--sky);
}
.split__points { list-style: none; margin: 18px 0 22px; padding: 0; }
.split__points li { position: relative; padding: 8px 0; padding-inline-start: 30px; border-block-end: 1px solid var(--line); font-weight: 500; }
.split__points li::before {
	content: ""; position: absolute; inset-inline-start: 2px; top: 15px;
	width: 13px; height: 13px; background: var(--primary);
	clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 18%, 84% 4%, 40% 66%);
}

/* ---------- page hero (inner, compact) ---------- */
.page-hero {
	background: linear-gradient(115deg, var(--navy) 0%, var(--navy-2) 70%, var(--primary-dark) 100%);
	color: var(--on-dark);
	padding-block: clamp(24px, 4vw, 44px);
	border-block-end: 3px solid var(--primary);
}
.page-hero__title { color: #fff; margin: 0; }
.page-hero__lead { color: var(--on-dark-dim); max-width: 62ch; margin: 8px 0 0; font-size: clamp(15px, 1.6vw, 17.5px); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 18px; }
.page-hero--detail { padding-block: clamp(30px, 5vw, 56px); }

.breadcrumbs { font-size: 13px; color: var(--on-dark-dim); margin: 0 0 10px; }
.breadcrumbs a { color: var(--on-dark-dim); text-decoration: none; }
.breadcrumbs a:hover { color: var(--sky); }
.breadcrumbs .sep { margin-inline: 7px; opacity: .55; }

/* ---------- detail layout ---------- */
.detail-layout { display: grid; gap: calc(var(--gap) * 1.4); }
@media (min-width: 900px) { .detail-layout { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); } }
.detail-block { margin-block-end: 26px; }
.detail-block h2 { font-size: 20px; padding-block-end: 7px; border-block-end: 2px solid var(--primary); display: inline-block; }
.detail-block--related { margin-block-start: 18px; }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { position: relative; padding: 7px 0; padding-inline-start: 28px; border-block-end: 1px solid var(--line); font-size: 15px; }
.checklist li::before {
	content: ""; position: absolute; inset-inline-start: 2px; top: 13px;
	width: 13px; height: 13px; background: var(--primary);
	clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 18%, 84% 4%, 40% 66%);
}

.spec-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.spec-table th, .spec-table td { text-align: start; padding: 8px 10px; border-block-end: 1px solid var(--line); vertical-align: top; }
.spec-table th { color: var(--steel); font-weight: 600; width: 42%; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-block: 22px; }
.media-grid__item { margin: 0; }
.media-grid__item img { border-radius: var(--radius); width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

.single-thumb { margin: 0 0 24px; }
.single-thumb img { border-radius: var(--radius); }
.post-meta { color: var(--steel); text-transform: uppercase; letter-spacing: .05em; font-size: 13.5px; }

/* ---------- prose ---------- */
.prose { max-width: 72ch; }
.prose h2, .prose h3 { margin-block-start: 1.5em; }
.prose h2 { font-size: clamp(20px, 2.6vw, 26px); color: var(--navy); padding-block-end: 6px; border-block-end: 2px solid var(--line); }
.prose ul, .prose ol { padding-inline-start: 24px; }
.prose li { margin-block: 4px; }
.prose img { border-radius: var(--radius); margin-block: 10px; }
.prose table { width: 100%; border-collapse: collapse; }
.prose td, .prose th { border: 1px solid var(--line); padding: 8px 10px; text-align: start; }

/* ---------- forms ---------- */
.quote-form, .form-grid { margin-block-start: 10px; }
.form-grid { display: grid; gap: 0 var(--gap); }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.quote-form label { display: block; font-weight: 600; font-size: 14.5px; margin-block-end: 5px; }
.quote-form input[type="text"], .quote-form input[type="email"], .quote-form input[type="tel"],
.quote-form select, .quote-form textarea {
	width: 100%; font: inherit; color: inherit;
	padding: 11px 12px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--paper);
	transition: border-color .15s ease;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { border-color: var(--primary); outline: none; }
.hp-field { position: absolute !important; inset-inline-start: -9999px !important; }

.notice { padding: 13px 17px; border-radius: var(--radius); margin-block: 16px; border: 1px solid; font-size: 15px; }
.notice--success { background: #edf6f0; border-color: #bcdcc7; color: #1e5c34; }
.notice--info { background: #eef3fb; border-color: #c8d7ef; color: #24397a; }

/* ---------- contact / branches ---------- */
.branches-grid { margin-block-start: 24px; }
.branch-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; border-block-start: 3px solid var(--primary); background: var(--paper); }
.branch-card--draft { opacity: .75; }
.contact-list { list-style: none; margin: 0; padding: 0; color: var(--steel); font-size: 15px; }
.contact-list li { padding-block: 4px; }

/* ---------- prefooter + footer ---------- */
.prefooter-cta { background: linear-gradient(115deg, var(--primary-dark), var(--primary)); color: #fff; }
.prefooter-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap); padding-block: clamp(28px, 4.5vw, 44px); }
.prefooter-cta__title { color: #fff; margin: 0 0 4px; font-size: clamp(21px, 2.8vw, 28px); }
.prefooter-cta__text { margin: 0; opacity: .92; }
.prefooter-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.site-footer { background: var(--navy); color: var(--on-dark-dim); font-size: 14.5px; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--sky); }
.site-footer__grid { display: grid; gap: calc(var(--gap) * 1.3); padding-block: clamp(36px, 5.5vw, 56px); }
@media (min-width: 800px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h3 { color: #fff; font-size: 15px; letter-spacing: .12em; }
.site-footer__menu { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.site-footer__menu a { display: block; padding-block: 4px; }
.site-footer__placeholder { font-style: italic; }
.site-footer__legal { border-block-start: 1px solid #26314f; }
.site-footer__legal-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 14px; font-size: 13px; }
.site-footer__legal p { margin: 0; }

/* ---------- misc ---------- */
.pagination { margin-block-start: 32px; text-align: center; }
.pagination .nav-links { display: inline-flex; gap: 6px; }
.pagination a, .pagination span.current {
	display: inline-block; min-width: 40px; padding: 8px 12px;
	border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none;
}
.pagination span.current { background: var(--primary); color: #fff; border-color: var(--primary); }
.empty-state { color: var(--steel); text-align: center; padding-block: 36px; font-size: 17px; }

/* =============================================================
   Motion — transform/opacity only, IO-driven, reduced-motion safe
   ============================================================= */
[data-reveal] { opacity: 0; transform: translateY(18px); }
.is-revealed[data-reveal], [data-reveal].is-revealed {
	opacity: 1; transform: none;
	transition: opacity .55s ease, transform .55s cubic-bezier(.2, .6, .2, 1);
	transition-delay: calc(var(--stagger, 0) * 70ms);
}
.hero [data-reveal] { transform: translateY(14px); }
img.lazy-fade { opacity: 0; transition: opacity .45s ease; }
img.lazy-fade.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	:root { --motion: 0; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	[data-reveal] { opacity: 1 !important; transform: none !important; }
	img.lazy-fade { opacity: 1; }
}

/* ---------- logo grids (clients / suppliers) ---------- */
.logo-block { margin-block-end: 44px; }
.logo-block__title { font-size: clamp(19px, 2.4vw, 24px); padding-block-end: 8px; border-block-end: 2px solid var(--primary); display: inline-block; margin-block-end: 20px; }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.logo-grid--strip { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.logo-cell {
	margin: 0; display: flex; align-items: center; justify-content: center;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	padding: 16px 18px; min-height: 96px; transition: box-shadow .16s ease, transform .16s ease;
}
.logo-cell:hover { box-shadow: 0 8px 20px rgb(22 32 58 / .10); transform: translateY(-2px); }
.logo-cell img { max-width: 100%; max-height: 60px; width: auto; height: auto; object-fit: contain; }
.logo-cell a { display: flex; align-items: center; justify-content: center; width: 100%; }
.logo-cell__name { font-weight: 600; color: var(--steel); text-align: center; font-size: 14px; }

/* ---------- filter bar (projects) ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 28px; }
.filter-chip {
	font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
	padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 40px; text-decoration: none; color: var(--steel);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.filter-chip:hover { border-color: var(--primary); color: var(--primary); }
.filter-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.section__downloadnote { margin-block-start: 32px; padding: 16px 20px; background: var(--surface); border-radius: var(--radius); color: var(--steel); }
.section__downloadnote p { margin: 0; }

/* ============================================================
   Fix round — cert cards, project cards, neutral "Soon", banner, upload
   ============================================================ */

/* neutral "Soon" state replaces the old striped fallback everywhere */
.card__media-fallback {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%; background: var(--surface);
	color: var(--steel); font-family: var(--font-display); font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase; font-size: 15px;
}
.card__media-fallback::after { content: "Soon"; }
:root[lang="ar"] .card__media-fallback::after,
html[lang^="ar"] .card__media-fallback::after { content: "قريبًا"; }

/* ---- Certification cards: seal contained on white, equal height ---- */
.cert-grid { align-items: stretch; }
.cert-card {
	display: flex; flex-direction: column; background: var(--paper);
	border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
	transition: box-shadow .16s ease, transform .16s ease;
}
.cert-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgb(22 32 58 / .12); }
.cert-card__media {
	display: flex; align-items: center; justify-content: center;
	height: 170px; padding: 20px; background: #fff; border-block-end: 1px solid var(--line);
}
.cert-card__img { max-width: 100%; max-height: 130px; width: auto; height: auto; object-fit: contain; }
.cert-card__soon { color: var(--steel); font-family: var(--font-display); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cert-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; flex: 1; }
.cert-card__title { font-size: 17px; margin: 0; }
.cert-card__auth { color: var(--steel); font-size: 14px; margin: 0; }
.cert-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-start: auto; padding-block-start: 10px; }
.cert-card__doc { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--primary); }
.badge { font-family: var(--font-body); font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.badge--valid { background: #e8f3ec; color: var(--success); }
.badge--expired { background: #f6e6e6; color: var(--error); }
.badge--pending_verification { background: var(--surface); color: var(--steel); }

/* ---- Project cards: full image (contain, no crop), fixed ratio, metadata ---- */
.pcard { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .16s ease, box-shadow .16s ease; }
.pcard:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgb(22 32 58 / .12); }
.pcard__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.pcard__media { aspect-ratio: 16 / 10; background: #0f1729; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pcard__img { width: 100%; height: 100%; object-fit: contain; }
.pcard__soon { color: var(--on-dark-dim); font-family: var(--font-display); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.pcard__sector { color: var(--primary); font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.pcard__title { margin: 0; font-size: 18px; }
.pcard__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--steel); font-size: 13.5px; }
.pcard__meta li { position: relative; }
.pcard__meta li + li::before { content: "·"; position: absolute; inset-inline-start: -8px; }
.pcard__excerpt { color: var(--steel); font-size: 14px; margin: 0; }
.back-link { margin-block-start: 24px; }
.back-link a { font-family: var(--font-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }

/* ---- filter bar: equal heights, wrap, mobile horizontal scroll ---- */
.filter-bar { align-items: center; }
.filter-chip { height: 38px; display: inline-flex; align-items: center; }
@media (max-width: 640px) {
	.filter-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-block-end: 6px; scrollbar-width: thin; }
	.filter-chip { flex: 0 0 auto; }
}

/* ---- custom file upload (translatable, RTL-safe) ---- */
.file-field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.file-field input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-field__btn {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
	font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .05em; text-transform: uppercase;
	padding: 10px 20px; border: 2px solid var(--primary); color: var(--primary); border-radius: var(--radius); background: transparent;
	transition: background-color .15s ease;
}
.file-field__btn:hover, .file-field input:focus-visible + .file-field__btn { background: var(--hover-wash); }
.file-field__name { color: var(--steel); font-size: 14px; }
.file-field__hint { flex-basis: 100%; color: var(--steel); font-size: 12.5px; margin-block-start: 2px; }

	background: #7a5c12; color: #fdf3d6; font: 500 13px/1 var(--font-body); letter-spacing: .02em;
	border-block-end: 1px solid rgb(0 0 0 / .15); text-align: center; padding-inline: 12px;
}
/* offset the sticky header so the banner never overlaps it */
.site-nav.is-open { padding-block-start: 84px; }

/* cert "certificate available" doc mark (valid cert without a seal image) */
.cert-card__docmark { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--primary); }
.cert-card__docmark em { font-style: normal; font-family: var(--font-display); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 12.5px; color: var(--steel); }

/* ---- news cards (branded cover when no image; never "Soon") ---- */
.ncard { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .16s ease, box-shadow .16s ease; }
.ncard:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgb(22 32 58 / .12); }
.ncard__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.ncard__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.ncard__img { width: 100%; height: 100%; object-fit: cover; }
.ncard__cover { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
	color: rgb(255 255 255 / .9);
	background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 60%, var(--primary-dark) 100%);
	position: relative; }
.ncard__cover::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-58deg, transparent 0 16px, rgb(47 175 223 / .08) 16px 32px); }
.ncard__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.ncard__title { margin: 0; font-size: 18px; }

/* ---- product gallery: proper grid + thumbnail strip + lightbox ---- */
.pgallery { display: grid; gap: 12px; margin-block: 20px; }
.pgallery__main { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pgallery__main img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.pgallery__thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.pgallery__thumb { width: 84px; height: 84px; flex: 0 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; cursor: pointer; }
.pgallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pgallery__thumb.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px rgb(47 78 160 / .25); }
@media (max-width: 640px) { .pgallery__thumb { width: 72px; height: 72px; } .pgallery__thumbs { flex-wrap: nowrap; overflow-x: auto; } }
/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 3000; background: rgb(10 14 26 / .92); display: none; align-items: center; justify-content: center; padding: 24px; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: var(--radius); }
.lightbox__close { position: fixed; top: 18px; inset-inline-end: 22px; width: 46px; height: 46px; border: 0; background: rgb(255 255 255 / .12); color: #fff; font-size: 26px; border-radius: var(--radius); cursor: pointer; }

/* product doc list + inline soon */
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li { padding-block: 6px; border-block-end: 1px solid var(--line); font-size: 15px; }
.soon-inline { color: var(--steel); font-family: var(--font-display); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }

/* ---- milestones timeline ---- */
.timeline { position: relative; padding-inline-start: 34px; }
.timeline::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 9px; width: 2px; background: linear-gradient(var(--primary), var(--line)); }
.timeline__year { position: relative; margin: 34px 0 18px; }
.timeline__year:first-child { margin-block-start: 0; }
.timeline__year span {
	display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 22px;
	letter-spacing: .06em; color: #fff; background: var(--navy); padding: 4px 16px; border-radius: var(--radius);
}
.timeline__year::before { content: ""; position: absolute; inset-inline-start: -31px; top: 50%; transform: translateY(-50%);
	width: 14px; height: 14px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgb(47 78 160 / .18); }
.tl-item { position: relative; margin-block-end: 22px; }
.tl-item__dot { position: absolute; inset-inline-start: -28px; top: 26px; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); }
.tl-item__card {
	display: flex; gap: 0; text-decoration: none; color: inherit; overflow: hidden;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	transition: transform .16s ease, box-shadow .16s ease;
}
.tl-item__card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgb(22 32 58 / .12); color: inherit; }
.tl-item__media { flex: 0 0 220px; background: var(--surface); }
.tl-item__media img { width: 100%; height: 100%; object-fit: cover; }
.tl-item__body { padding: 18px 20px; min-width: 0; }
.tl-item__title { margin: 4px 0 6px; font-size: 19px; }
.tl-item__excerpt { margin: 0 0 10px; color: var(--steel); font-size: 15px; }
@media (max-width: 640px) {
	.tl-item__card { flex-direction: column; }
	.tl-item__media { flex-basis: auto; aspect-ratio: 16 / 8; }
}

/* ---- unified navy wash on archive-card photos (legacy imagery treatment) ---- */
.card__media { position: relative; }
.card__media img, .tl-item__media img, .ncard__img { filter: saturate(.82) contrast(1.06); }
.card__media::after, .tl-item__media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(160deg, rgb(47 78 160 / .16), rgb(22 32 58 / .30));
	mix-blend-mode: multiply;
}
.tl-item__media { position: relative; }

/* ---- home stats strip ---- */
.stats { background: var(--navy); color: var(--on-dark); }
.stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; padding-block: clamp(34px, 5vw, 54px); }
@media (min-width: 900px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 4.4vw, 54px); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.stat__num .stat__plus { color: var(--sky); }
.stat__label { margin-top: 6px; color: var(--on-dark-dim); font-size: 15px; letter-spacing: .04em; }
.stats__cities { border-block-start: 1px solid rgb(255 255 255 / .12); padding-block: 16px 22px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.stats__cities-label { font-family: var(--font-display); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; color: var(--sky); margin-inline-end: 6px; }
.city-chip { font-size: 13.5px; color: var(--on-dark); background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); border-radius: 999px; padding: 4px 13px; white-space: nowrap; }

/* ---- reveal-on-scroll (JS adds .reveal-init then .is-in; no-JS stays visible) ---- */
.reveal-init { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal-init.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal-init { opacity: 1; transform: none; transition: none; } }

/* ---- 404 ---- */
.error-hero { background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 55%, var(--primary-dark) 100%); color: var(--on-dark); text-align: center; padding-block: clamp(70px, 11vw, 130px); }
.error-hero__code { font-family: var(--font-display); font-weight: 700; font-size: clamp(80px, 14vw, 150px); line-height: 1; color: rgb(255 255 255 / .18); }
.error-hero h1 { color: #fff; }
.error-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }

/* ---- FAQ / glossary ---- */
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); margin-block-end: 10px; }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
	padding: 15px 18px; font-family: var(--font-display); font-weight: 600; font-size: 17.5px; letter-spacing: .02em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; color: var(--primary); flex: 0 0 auto; transition: transform .18s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { color: var(--primary); }
.faq-item > :not(summary) { padding-inline: 18px; }
.faq-item > p:last-child { padding-block-end: 16px; }
.glossary dt { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: .03em; text-transform: uppercase; color: var(--primary); margin-top: 18px; }
.glossary dd { margin: 4px 0 0; color: var(--ink); }

/* seals/logos: full image on white, no crop, no wash */
.card--contain .card__media { background: #fff; }
.card--contain .card__media img { object-fit: contain; padding: 16px; filter: none; }
.card--contain .card__media::after { content: none; }

/* single news figure */
.news-figure { margin: 0 0 26px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.news-figure__img { width: 100%; height: auto; max-height: 480px; object-fit: contain; background: #fff; }

/* careers application */
.careers-apply { margin-block-start: 34px; padding-block-start: 26px; border-block-start: 2px solid var(--line); }
.form-notice { padding: 13px 18px; border-radius: var(--radius); margin-block-end: 18px; font-weight: 500; }
.form-notice--ok { background: #e7f3ec; color: var(--success); border: 1px solid #bfe0cd; }

/* search form */
.search-form { display: flex; gap: 10px; max-width: 560px; margin-block-end: 30px; }
.search-form input[type="search"] { flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; }

/* footer social */
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social__link { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius); background: rgb(255 255 255 / .08); color: var(--on-dark-dim); border: 1px solid rgb(255 255 255 / .12); }
.footer-social__link:hover { color: #fff; background: rgb(255 255 255 / .14); }