/* ==================================================================
 * base.css — tokens, reset, typography, components, motion engine, loader.
 * Loads on every view. Real token values are printed by dynamic-css.php;
 * the :root block below is the fallback only.
 * ================================================================== */

/* ------------------------------------------------ Tokens (fallback) */
:root {
	--qaf-primary: #b8912f;
	--qaf-primary-rgb: 184, 145, 47;
	--qaf-primary-dark: #8c6b1f;
	--qaf-ink: #0f0e0c;
	--qaf-ink-rgb: 15, 14, 12;
	--qaf-dark: #0a0906;
	--qaf-dark-rgb: 10, 9, 6;
	--qaf-dark-2: #14130f;
	--qaf-bg: #f2eee7;
	--qaf-bg-rgb: 242, 238, 231;
	--qaf-bg-soft: #e8e2d7;
	--qaf-line: #d6cdbd;
	--qaf-body: #3a362e;
	--qaf-muted: #7a7263;
	--qaf-on-dark: #ada694;
	--qaf-container: 1440px;
	--qaf-radius: 0px;
	--qaf-fs-base: 16.5px;
	--qaf-body-weight: 300;
	--qaf-h1: clamp(34px, 4.9vw, 70px);
	--qaf-h2: clamp(26px, 3.2vw, 46px);
	--qaf-h3: clamp(22px, 2.4vw, 36px);
	--qaf-h4: clamp(20px, 1.8vw, 26px);
	--qaf-logo-h: 56px;
	--qaf-logo-h-m: 42px;
	--qaf-anim-dur: 1100ms;
	--qaf-anim-dist: 22px;
	--qaf-anim-stagger: 90ms;

	/* Derived — CSS only */
	--qaf-paper: #fbf8f2;
	--qaf-cream: #e7e1d3;
	--qaf-line-2: color-mix(in srgb, var(--qaf-line) 88%, var(--qaf-ink));
	--qaf-muted-2: color-mix(in srgb, var(--qaf-body) 78%, var(--qaf-bg));
	--qaf-on-dark-2: color-mix(in srgb, var(--qaf-on-dark) 72%, var(--qaf-dark));
	--qaf-on-dark-3: color-mix(in srgb, var(--qaf-on-dark) 50%, var(--qaf-dark));
	--qaf-gold-line: rgba(var(--qaf-primary-rgb), .34);
	--qaf-gold-line-2: rgba(var(--qaf-primary-rgb), .18);
	--qaf-gutter: clamp(20px, 4.72vw, 68px);
	--qaf-space-section: clamp(64px, 7.64vw, 110px);
	--qaf-font-h: "Noto Naskh Arabic", "Libre Baskerville", Georgia, serif;
	--qaf-font-b: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
	--qaf-font-num: "Libre Baskerville", Georgia, serif;
	--qaf-lh-h: 1.22;
	--qaf-lh-b: 1.85;
	--qaf-track-label: .22em;
	--qaf-ease: cubic-bezier(.22, .61, .36, 1);
	--qaf-ease-out: cubic-bezier(.16, 1, .3, 1);
	--qaf-ease-io: cubic-bezier(.76, 0, .24, 1);
	--qaf-dir: 1;
	--qaf-shadow-s: 0 1px 2px rgba(var(--qaf-ink-rgb), .06), 0 2px 8px rgba(var(--qaf-ink-rgb), .05);
	--qaf-shadow-m: 0 2px 6px rgba(var(--qaf-ink-rgb), .06), 0 12px 32px rgba(var(--qaf-ink-rgb), .09);
	--qaf-shadow-l: 0 4px 12px rgba(var(--qaf-ink-rgb), .08), 0 30px 70px rgba(var(--qaf-ink-rgb), .16);
	--qaf-header-h: 100px;
	--qaf-topbar-h: 0px;
}

/* ------------------------------------------------ Reset */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scrollbar-gutter: stable;
	scroll-padding-block-start: calc(var(--qaf-header-h) + 16px);
}

body {
	margin: 0;
	overflow-x: clip;
	background: var(--qaf-bg);
	color: var(--qaf-body);
	font-family: var(--qaf-font-b);
	font-size: var(--qaf-fs-base);
	font-weight: var(--qaf-body-weight);
	line-height: var(--qaf-lh-b);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis: none;
}

img, svg, video, iframe { display: block; max-inline-size: 100%; }
img { block-size: auto; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--qaf-font-h);
	font-weight: 700;
	line-height: var(--qaf-lh-h);
	color: var(--qaf-ink);
	text-wrap: balance;
}
p { text-wrap: pretty; }
::selection { background: rgba(var(--qaf-primary-rgb), .28); color: var(--qaf-ink); }

:focus-visible {
	outline: 2px solid var(--qaf-primary);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	inline-size: 1px; block-size: 1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}

.qaf-skip {
	position: fixed;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	z-index: 10000;
	padding: 10px 18px;
	background: var(--qaf-primary);
	color: var(--qaf-ink);
	transform: translateY(-160%);
	transition: transform .4s var(--qaf-ease-out);
}
.qaf-skip:focus { transform: none; }

/* ------------------------------------------------ Layout */
.qaf-container {
	inline-size: 100%;
	max-inline-size: var(--qaf-container);
	margin-inline: auto;
	padding-inline: var(--qaf-gutter);
}

.qaf-main { display: block; outline: 0; }

.qaf-sec {
	position: relative;
	padding-block: var(--qaf-space-section);
	background: var(--qaf-bg);
	isolation: isolate;
}
.qaf-sec--soft { background: var(--qaf-bg-soft); --qaf-line: var(--qaf-line-2); }
.qaf-sec--ink,
.qaf-sec--ink2 { background: var(--qaf-ink); color: var(--qaf-on-dark); }
.qaf-sec--ink2 { background: var(--qaf-dark-2); }
.qaf-sec--ink h2, .qaf-sec--ink h3,
.qaf-sec--ink2 h2, .qaf-sec--ink2 h3 { color: var(--qaf-paper); }

/* Vertical grid lines — one every sixth of the viewport, like the design */
.qaf-lines {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .45;
	background-image: linear-gradient(to right, rgba(var(--qaf-primary-rgb), .11) 1px, transparent 1px);
	background-size: calc(100% / 6) 100%;
	background-position: calc(100% / 6) 0;
}

/* Chapter: numbered rail + body */
.qaf-chapter {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: clamp(24px, 4.6vw, 66px);
}
.qaf-chapter--head { margin-block-end: clamp(32px, 4vw, 58px); }
.qaf-chapter__body {
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 3vw, 44px);
	min-inline-size: 0;
}

.qaf-rail { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.qaf-rail__meta { display: flex; flex-direction: column; gap: 20px; }
.qaf-rail--inline { flex-direction: row; align-items: center; gap: 22px; }
.qaf-rail--inline .qaf-rail__meta { gap: 10px; }

.qaf-plate {
	display: grid;
	place-items: center;
	inline-size: 92px;
	block-size: 92px;
	border: 1px solid var(--qaf-line);
	font-family: var(--qaf-font-num);
	font-size: 34px;
	line-height: 1;
	color: var(--qaf-primary);
	direction: ltr;
	transition: border-color .8s var(--qaf-ease-out), background-color .8s var(--qaf-ease-out);
}
.qaf-sec--ink .qaf-plate,
.qaf-sec--ink2 .qaf-plate { border-color: rgba(var(--qaf-primary-rgb), .38); }

.qaf-rail__label {
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: var(--qaf-track-label);
	color: var(--qaf-muted);
	line-height: 1.6;
}
.qaf-sec--ink .qaf-rail__label,
.qaf-sec--ink2 .qaf-rail__label { color: var(--qaf-on-dark-2); }

.qaf-rule {
	display: block;
	inline-size: 46px;
	block-size: 2px;
	background: var(--qaf-primary);
	transform-origin: var(--qaf-origin-start, left) center;
}
.qaf-rule--lg { inline-size: 54px; }

.qaf-dbl-rule { display: flex; flex-direction: column; gap: 5px; }
.qaf-dbl-rule span {
	display: block;
	inline-size: 140px;
	block-size: 3px;
	background: var(--qaf-primary);
	transform-origin: var(--qaf-origin-start, left) center;
}
.qaf-dbl-rule span + span { inline-size: min(420px, 70%); block-size: 1px; background: var(--qaf-gold-line); }

.qaf-h2 {
	font-size: var(--qaf-h2);
	line-height: var(--qaf-lh-h);
}

.qaf-split-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(20px, 3.5vw, 50px);
}
.qaf-split-head__text {
	max-inline-size: 420px;
	font-size: 16px;
	line-height: 2.15;
	color: var(--qaf-on-dark);
}
.qaf-sec:not(.qaf-sec--ink):not(.qaf-sec--ink2) .qaf-split-head__text { color: var(--qaf-muted-2); }

/* ------------------------------------------------ Eyebrow */
.qaf-eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--qaf-font-num);
	font-size: 11px;
	letter-spacing: .34em;
	color: var(--qaf-primary);
	line-height: 1.4;
}
.qaf-eyebrow__rule { inline-size: 54px; block-size: 2px; background: currentColor; flex: none; }

/* ------------------------------------------------ Buttons */
.qaf-btn {
	--qaf-btn-bg: var(--qaf-primary);
	--qaf-btn-fg: var(--qaf-ink);
	--qaf-btn-bd: var(--qaf-primary);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 28px;
	border: 1px solid var(--qaf-btn-bd);
	border-radius: var(--qaf-radius);
	background: var(--qaf-btn-bg);
	color: var(--qaf-btn-fg);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	isolation: isolate;
	transition: color .6s var(--qaf-ease-out), border-color .6s var(--qaf-ease-out), background-color .6s var(--qaf-ease-out);
}
.qaf-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .34) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 1.1s var(--qaf-ease-out);
}
.qaf-btn:hover::before { transform: translateX(120%); }
.qaf-btn:hover { --qaf-btn-bg: color-mix(in srgb, var(--qaf-primary) 86%, #fff); }
.qaf-btn--lg { padding: 18px 40px; font-size: 14.5px; }

.qaf-btn--outline {
	--qaf-btn-bg: transparent;
	--qaf-btn-fg: var(--qaf-bg);
	--qaf-btn-bd: rgba(var(--qaf-primary-rgb), .42);
}
.qaf-btn--outline::before { background: rgba(var(--qaf-primary-rgb), .14); transform: scaleY(0); transform-origin: bottom; transition: transform .7s var(--qaf-ease-out); }
.qaf-btn--outline:hover { --qaf-btn-bg: transparent; --qaf-btn-bd: var(--qaf-primary); }
.qaf-btn--outline:hover::before { transform: scaleY(1); }
.qaf-sec:not(.qaf-sec--ink):not(.qaf-sec--ink2) .qaf-btn--outline { --qaf-btn-fg: var(--qaf-ink); }

/* ------------------------------------------------ Arrow link */
.qaf-link {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	inline-size: fit-content;
	padding-block-end: 9px;
	border-block-end: 2px solid var(--qaf-accent, var(--qaf-primary));
	font-size: 14.5px;
	font-weight: 400;
	color: var(--qaf-ink);
	line-height: 1.4;
	position: relative;
}
.qaf-link .qaf-icon {
	color: var(--qaf-accent, var(--qaf-primary));
	transition: translate .6s var(--qaf-ease-out);
}
.qaf-link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -2px;
	block-size: 2px;
	background: var(--qaf-ink);
	transform: scaleX(0);
	transform-origin: var(--qaf-origin-end, right) center;
	transition: transform .7s var(--qaf-ease-out);
}
.qaf-link:hover .qaf-icon,
a:hover .qaf-link .qaf-icon { translate: calc(5px * var(--qaf-dir)) 0; }
a.qaf-link:hover::after { transform: scaleX(1); transform-origin: var(--qaf-origin-start, left) center; }
.qaf-link--light,
.qaf-sec--ink .qaf-link,
.qaf-sec--ink2 .qaf-link { color: var(--qaf-paper); }
.qaf-sec--ink a.qaf-link::after { background: var(--qaf-paper); }

.qaf-icon { flex: none; }

/* ------------------------------------------------ Frames & specs */
.qaf-frame {
	padding: 9px;
	border: 1px solid var(--qaf-line);
	background: transparent;
}
.qaf-frame--sm { padding: 7px; }
.qaf-frame--xs { padding: 5px; }
.qaf-frame__media {
	position: relative;
	overflow: hidden;
	background: color-mix(in srgb, var(--qaf-line) 60%, var(--qaf-bg));
	block-size: 100%;
}
.qaf-frame__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 1.6s var(--qaf-ease-out), filter 1.2s var(--qaf-ease-out);
}
.qaf-frame:hover .qaf-frame__media img { transform: scale(1.045); }

.qaf-specs { display: flex; flex-direction: column; }
.qaf-specs__row {
	display: grid;
	grid-template-columns: 86px minmax(0, 1fr);
	gap: 14px;
	padding-block: 13px;
	border-block-start: 1px solid var(--qaf-line);
}
.qaf-specs__row:last-child { border-block-end: 1px solid var(--qaf-line); }
.qaf-specs dt { font-size: 12px; color: var(--qaf-muted); font-weight: 400; line-height: 1.7; }
.qaf-specs dd { font-size: 13.5px; color: var(--qaf-ink); line-height: 1.7; font-weight: 400; }
.qaf-specs--dark .qaf-specs__row { border-color: rgba(var(--qaf-primary-rgb), .16); }
.qaf-specs--dark dt { color: var(--qaf-on-dark-3); }
.qaf-specs--dark dd { color: var(--qaf-cream); }
.qaf-specs--wide .qaf-specs__row { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding-block: 19px; }
.qaf-specs--wide dt { font-size: 13.5px; }
.qaf-specs--wide dd { font-size: 15px; }

/* ------------------------------------------------ Social */
.qaf-social { display: flex; flex-wrap: wrap; gap: 10px; }
.qaf-social a {
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	border: 1px solid rgba(var(--qaf-primary-rgb), .26);
	border-radius: var(--qaf-radius);
	color: var(--qaf-primary);
	transition: background-color .5s var(--qaf-ease-out), color .5s var(--qaf-ease-out), border-color .5s var(--qaf-ease-out), transform .5s var(--qaf-ease-out);
}
.qaf-social a:hover { background: var(--qaf-primary); color: var(--qaf-ink); border-color: var(--qaf-primary); transform: translateY(-3px); }

/* ==================================================================
 * Motion engine — [data-qaf-anim]
 * Hidden only when JS runs, motion is on and the user allows motion.
 * A CSS failsafe reveals everything after 4.5s if the script never binds.
 * ================================================================== */
@keyframes qaf-failsafe { to { opacity: 1; transform: none; filter: none; } }

.qaf-js .qaf-anim-on [data-qaf-anim] {
	opacity: 0;
	transition:
		opacity var(--qaf-anim-dur) var(--qaf-ease-out) var(--qaf-delay, 0ms),
		transform var(--qaf-anim-dur) var(--qaf-ease-out) var(--qaf-delay, 0ms),
		clip-path calc(var(--qaf-anim-dur) * 1.15) var(--qaf-ease-io) var(--qaf-delay, 0ms),
		filter var(--qaf-anim-dur) var(--qaf-ease-out) var(--qaf-delay, 0ms);
	animation: qaf-failsafe .01s linear 4s forwards;
}
.qaf-anim-ready .qaf-anim-on [data-qaf-anim] { animation: none; }

.qaf-js .qaf-anim-on [data-qaf-anim="up"] { transform: translate3d(0, var(--qaf-anim-dist), 0); }
.qaf-js .qaf-anim-on [data-qaf-anim="down"] { transform: translate3d(0, calc(var(--qaf-anim-dist) * -1), 0); }
.qaf-js .qaf-anim-on [data-qaf-anim="start"] { transform: translate3d(calc(var(--qaf-anim-dist) * -1 * var(--qaf-dir)), 0, 0); }
.qaf-js .qaf-anim-on [data-qaf-anim="end"] { transform: translate3d(calc(var(--qaf-anim-dist) * var(--qaf-dir)), 0, 0); }
.qaf-js .qaf-anim-on [data-qaf-anim="zoom"] { transform: scale(.965); }
.qaf-js .qaf-anim-on [data-qaf-anim="blur"] { filter: blur(10px); transform: translate3d(0, 10px, 0); }
.qaf-js .qaf-anim-on [data-qaf-anim="reveal"] { opacity: 1; }
.qaf-js .qaf-anim-on [data-qaf-anim="reveal"] > * { clip-path: inset(0 0 100% 0); transition: clip-path calc(var(--qaf-anim-dur) * 1.2) var(--qaf-ease-io) var(--qaf-delay, 0ms); animation: qaf-unclip .01s linear 4.5s forwards; }
.qaf-anim-ready .qaf-anim-on [data-qaf-anim="reveal"] > * { animation: none; }
@keyframes qaf-unclip { to { clip-path: inset(0 0 0 0); } }
.qaf-js .qaf-anim-on [data-qaf-anim="reveal"] img { transform: scale(1.14); transition: transform 2.2s var(--qaf-ease-out) var(--qaf-delay, 0ms); }
.qaf-js .qaf-anim-on [data-qaf-anim="line"] { opacity: 1; }
.qaf-js .qaf-anim-on [data-qaf-anim="line"] span,
.qaf-js .qaf-anim-on .qaf-rule[data-qaf-anim="line"] { transform: scaleX(0); transition: transform 1.3s var(--qaf-ease-out) var(--qaf-delay, 0ms); }
.qaf-js .qaf-anim-on [data-qaf-anim="line"] span + span { transition-delay: calc(var(--qaf-delay, 0ms) + 140ms); }
.qaf-js .qaf-anim-on [data-qaf-anim="plinth"] { transform: translate3d(0, 34px, 0); }

.qaf-js .qaf-anim-on [data-qaf-anim].qaf-in { opacity: 1; transform: none; filter: none; clip-path: none; }
.qaf-js .qaf-anim-on [data-qaf-anim="reveal"].qaf-in > * { clip-path: inset(0 0 0 0); }
.qaf-js .qaf-anim-on [data-qaf-anim="reveal"].qaf-in img,
.qaf-js .qaf-anim-on [data-qaf-anim="line"].qaf-in span,
.qaf-js .qaf-anim-on .qaf-rule.qaf-in { transform: none; }

/* Rail rule draws after the plate */
.qaf-js .qaf-anim-on .qaf-rail .qaf-rule { transform: scaleX(0); transition: transform 1.2s var(--qaf-ease-out) 260ms; }
.qaf-js .qaf-anim-on .qaf-rail.qaf-in .qaf-rule { transform: none; }

/* Word-by-word headings (split by animations.js, words stay intact for Arabic shaping) */
.qaf-js .qaf-anim-on [data-qaf-anim="words"] { opacity: 1; }
.qaf-w { display: inline-block; white-space: nowrap; }
.qaf-js .qaf-anim-on [data-qaf-anim="words"] .qaf-w {
	opacity: 0;
	filter: blur(8px);
	transform: translate3d(0, .42em, 0);
	transition:
		opacity 1s var(--qaf-ease-out),
		filter 1.1s var(--qaf-ease-out),
		transform 1.2s var(--qaf-ease-out);
	transition-delay: calc(var(--qaf-delay, 0ms) + var(--qaf-i, 0) * 55ms);
}
.qaf-js .qaf-anim-on [data-qaf-anim="words"].qaf-in .qaf-w { opacity: 1; filter: none; transform: none; }

/* ==================================================================
 * Loader
 * ================================================================== */
.qaf-loader { display: none; }

.qaf-js .qaf-loader {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: auto;
	animation: qaf-loader-failsafe .01s linear 7s forwards;
}
@keyframes qaf-loader-failsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }
.qaf-anim-ready .qaf-loader { animation: none; }


.qaf-loader__gold,
.qaf-loader__ink {
	position: absolute;
	inset: 0;
	clip-path: inset(0 0 0 0);
	will-change: clip-path;
}
.qaf-loader__gold { background: var(--qaf-primary); }
.qaf-loader__ink {
	display: grid;
	place-items: center;
	background: radial-gradient(120% 90% at 50% 45%, var(--qaf-dark-2) 0%, var(--qaf-dark) 62%);
	color: rgba(var(--qaf-primary-rgb), .07);
}
.qaf-loader__pattern {
	position: absolute;
	inset: -10%;
	inline-size: 120%;
	block-size: 120%;
	animation: qaf-drift 18s linear infinite;
}
@keyframes qaf-drift { to { transform: translate3d(-128px, -128px, 0); } }

.qaf-loader__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 24px;
	text-align: center;
	transition: opacity .6s var(--qaf-ease-out), transform .8s var(--qaf-ease-out), filter .6s var(--qaf-ease-out);
}

.qaf-loader__mark { inline-size: 120px; block-size: 120px; color: var(--qaf-primary); }
.qaf-loader__mark svg { overflow: visible; animation: qaf-turn 2.6s var(--qaf-ease-out) both; }
.qaf-loader__mark img { inline-size: 100%; block-size: 100%; object-fit: contain; animation: qaf-mark-in 1.4s var(--qaf-ease-out) both; }
@keyframes qaf-turn { from { transform: rotate(-45deg) scale(.86); } to { transform: none; } }
@keyframes qaf-mark-in { from { opacity: 0; transform: scale(.9); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.qaf-loader__star,
.qaf-loader__sq {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	vector-effect: non-scaling-stroke;
}
.qaf-loader__star { stroke-width: 1.6; animation: qaf-draw 1.5s var(--qaf-ease-io) .15s forwards, qaf-glow 2.4s ease-in-out 1.6s infinite alternate; }
.qaf-loader__sq { opacity: .45; }
.qaf-loader__sq--a { animation: qaf-draw 1.3s var(--qaf-ease-io) .45s forwards; }
.qaf-loader__sq--b { animation: qaf-draw 1.3s var(--qaf-ease-io) .6s forwards; }
.qaf-loader__dot { fill: currentColor; transform-origin: 64px 64px; transform: scale(0); animation: qaf-pop .9s var(--qaf-ease-out) 1.2s forwards; }
@keyframes qaf-draw { to { stroke-dashoffset: 0; } }
@keyframes qaf-pop { to { transform: scale(1); } }
@keyframes qaf-glow { from { filter: drop-shadow(0 0 0 rgba(var(--qaf-primary-rgb), 0)); } to { filter: drop-shadow(0 0 10px rgba(var(--qaf-primary-rgb), .45)); } }

.qaf-loader__name {
	font-family: var(--qaf-font-h);
	font-weight: 700;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.5;
	color: var(--qaf-paper);
	clip-path: inset(0 100% 0 0);
	animation: qaf-unveil 1.4s var(--qaf-ease-io) .55s forwards;
}
@keyframes qaf-unveil { to { clip-path: inset(0 0 0 0); } }

.qaf-loader__sub {
	font-family: var(--qaf-font-num);
	font-size: 10px;
	letter-spacing: .7em;
	color: var(--qaf-primary);
	opacity: 0;
	animation: qaf-track 1.6s var(--qaf-ease-out) 1s forwards;
}
@keyframes qaf-track { to { letter-spacing: .36em; opacity: 1; } }

.qaf-loader__meter {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-block-start: 22px;
	opacity: 0;
	animation: qaf-fade-in .8s var(--qaf-ease-out) .9s forwards;
}
@keyframes qaf-fade-in { to { opacity: 1; } }
.qaf-loader__bar {
	position: relative;
	inline-size: 180px;
	block-size: 1px;
	background: rgba(var(--qaf-primary-rgb), .2);
	overflow: hidden;
}
.qaf-loader__bar span {
	position: absolute;
	inset: 0;
	background: var(--qaf-primary);
	transform: scaleX(var(--qaf-p, 0));
	transform-origin: var(--qaf-origin-start, left) center;
	transition: transform .5s var(--qaf-ease-out);
}
.qaf-loader__count {
	min-inline-size: 44px;
	font-family: var(--qaf-font-num);
	font-size: 11px;
	letter-spacing: .12em;
	color: var(--qaf-on-dark-2);
	font-variant-numeric: tabular-nums;
	text-align: end;
}
.qaf-loader__count b { font-weight: 400; color: var(--qaf-primary); }
.qaf-loader__count i { font-style: normal; }

/* Leaving the intro: stage lifts away, then the ink curtain and the gold curtain rise in sequence */
.qaf-loader.is-leaving .qaf-loader__stage { opacity: 0; transform: translate3d(0, -18px, 0); filter: blur(4px); }

.qaf-loaded .qaf-loader__ink { clip-path: inset(0 0 100% 0); transition: clip-path 1.05s var(--qaf-ease-io); }
.qaf-loaded .qaf-loader__gold { clip-path: inset(0 0 100% 0); transition: clip-path 1.05s var(--qaf-ease-io) .12s; }
.qaf-loaded .qaf-loader { pointer-events: none; }
.qaf-loader.is-done { visibility: hidden; }

/* Quick curtain (next pages) */
.qaf-loader-quick .qaf-loader__stage { display: none; }
.qaf-loader-quick.qaf-loaded .qaf-loader__ink { transition-duration: .8s; }
.qaf-loader-quick.qaf-loaded .qaf-loader__gold { transition-duration: .8s; transition-delay: .08s; }

/* Leaving the page: curtains drop from the top, gold first */
.qaf-leaving .qaf-loader { visibility: visible; pointer-events: auto; }
.qaf-leaving .qaf-loader__gold { clip-path: inset(0 0 0 0); transition: clip-path .62s var(--qaf-ease-io); }
.qaf-leaving .qaf-loader__ink { clip-path: inset(0 0 0 0); transition: clip-path .62s var(--qaf-ease-io) .09s; }
.qaf-leaving .qaf-loader__stage { display: none; }

/* ------------------------------------------------ Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.qaf-js .qaf-loader { display: none; }
	.qaf-js [data-qaf-anim], .qaf-js [data-qaf-anim] .qaf-w { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
}

@media (max-width: 1024px) {
	.qaf-chapter { grid-template-columns: minmax(0, 1fr); }
	.qaf-rail { flex-direction: row; align-items: center; gap: 16px; }
	.qaf-rail__meta { gap: 8px; }
	.qaf-plate { inline-size: 62px; block-size: 62px; font-size: 24px; }
	.qaf-rail__label { font-size: 11.5px; }
	.qaf-split-head { flex-direction: column; align-items: flex-start; }
	.qaf-split-head__text { max-inline-size: none; }
}

@media (max-width: 640px) {
	.qaf-specs--wide .qaf-specs__row { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding-block: 15px; }
	.qaf-btn--lg { padding: 15px 26px; }
	.qaf-dbl-rule span { inline-size: 84px; }
	.qaf-dbl-rule span + span { inline-size: 200px; }
}

/* ==================================================================
 * Shared editorial components (v2.1)
 * ================================================================== */

/* Gold foil text — a slow light sweep once when it enters */
.qaf-foil {
	background: linear-gradient(100deg, var(--qaf-primary-dark) 0%, #d9b75c 38%, var(--qaf-primary) 62%, #e7cd7f 80%, var(--qaf-primary-dark) 100%);
	background-size: 220% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	transition: background-position 2.8s var(--qaf-ease-out) .3s;
}
.qaf-foil.qaf-in,
html:not(.qaf-js) .qaf-foil { background-position: 0 0; }

/* Kicker: short line + tracked label */
.qaf-kicker {
	display: flex;
	align-items: center;
	gap: 13px;
	font-size: 12px;
	letter-spacing: .32em;
	color: var(--qaf-primary);
	line-height: 1.6;
}
.qaf-kicker__rule { inline-size: 40px; block-size: 1px; background: currentColor; flex: none; }

/* Arch frame (company gallery / services) */
.qaf-arch { border-radius: 999px 999px 3px 3px; overflow: hidden; isolation: isolate; }
.qaf-arch--sm { border-radius: 105px 105px 3px 3px; }
.qaf-arch img { transition: transform 1.8s var(--qaf-ease-out); }
/* Chromium drops rounded clipping on composited children — clip the child itself too */
.qaf-arch > * { border-radius: inherit; overflow: hidden; -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); }

/* Brand tags */
.qaf-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.qaf-tag,
.qaf-chip {
	--qaf-tag: var(--qaf-ink);
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border: 1px solid color-mix(in srgb, var(--qaf-tag) 24%, transparent);
	border-radius: var(--qaf-radius);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .04em;
	line-height: 1.5;
	color: var(--qaf-tag);
	white-space: nowrap;
}
.qaf-tag--qafesheh { --qaf-tag: var(--qaf-primary-dark); }
.qaf-tag--aljazi { --qaf-tag: var(--qaf-ink); }
.qaf-tag--makarem { --qaf-tag: var(--qaf-b-makarem); }

/* Ink button (on gold) */
.qaf-btn--ink { --qaf-btn-bg: var(--qaf-ink); --qaf-btn-fg: var(--qaf-bg); --qaf-btn-bd: var(--qaf-ink); }
.qaf-btn--ink:hover { --qaf-btn-bg: color-mix(in srgb, var(--qaf-ink) 82%, var(--qaf-primary)); }
.qaf-btn .qaf-icon { transition: transform .6s var(--qaf-ease-out); }
.qaf-btn:hover .qaf-icon--external { transform: translate(2px, -2px); }

/* Dark stitch band (company hero → intro) */
.qaf-stitch--band { background-color: var(--qaf-dark); }

/* ------------------------------------------------ Shared content blocks (service + job pages) */
.qaf-svcsingle__block { display: flex; flex-direction: column; gap: 18px; }
.qaf-svcsingle__h { font-size: clamp(26px, 2.36vw, 34px); line-height: 1.5; }

.qaf-checks { display: flex; flex-direction: column; gap: 14px; }
.qaf-checks li { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; line-height: 2.05; font-weight: 300; color: var(--qaf-body); }
.qaf-checks__mark { flex: none; margin-block-start: 6px; color: var(--qaf-primary); transition: transform .8s var(--qaf-ease-out); }
.qaf-checks li:hover .qaf-checks__mark { transform: rotate(45deg) scale(1.15); }

/* Sidebar */
.qaf-side { display: flex; flex-direction: column; gap: 16px; padding: 30px; }
.qaf-side--ink { padding: 34px 30px; background: var(--qaf-ink); color: var(--qaf-on-dark); }
.qaf-side--soft { background: var(--qaf-bg-soft); }
.qaf-side--line { gap: 12px; border: 1px solid var(--qaf-line); }
.qaf-side__label { font-size: 11.5px; letter-spacing: .26em; color: var(--qaf-primary); }
.qaf-side__title { font-size: 27px; line-height: 1.5; color: var(--qaf-bg); }
.qaf-side__btn { inline-size: 100%; }
.qaf-side__list li + li a { border-block-start: 1px solid var(--qaf-line); }
.qaf-side__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; font-size: 15px; color: var(--qaf-body); transition: color .5s var(--qaf-ease-out), padding .7s var(--qaf-ease-out); }
.qaf-side__list a .qaf-icon { color: var(--qaf-primary); }
.qaf-side__list a:hover { color: var(--qaf-ink); padding-inline-start: 8px; }
.qaf-side__h { font-size: 22px; }
.qaf-side--line a { font-size: 14.5px; color: var(--qaf-muted-2); inline-size: fit-content; transition: color .4s; }
.qaf-side--line a:hover { color: var(--qaf-primary-dark); }