/* ══════════════════════════════════════════════════════════════
   About page — pixel-faithful implementation of the Claude Design
   file "My Tarbiyyah About.dc.html".

   Everything is scoped under .mt-about so the design's own palette
   (#0B7777 / #F9BE19) can be used verbatim without disturbing the
   theme presets (#0B6E6E / #F2BE22) used by the rest of the site.
   ══════════════════════════════════════════════════════════════ */

.mt-about {
	--ab-teal: #0b7777;
	--ab-teal-hover: #0d8a8a;
	--ab-gold: #f9be19;
	--ab-gold-hover: #ffcd3f;
	--ab-ink: #15191a;
	--ab-mist: #f5f9f9;
	--ab-tile: #edf3f3;

	/* This div is a direct child of .entry-content.has-global-padding and
	   carries `alignfull`, so WordPress's own negative-margin rule cancels
	   the root padding for us. Don't set max-width here — it would defeat
	   that rule and leave white gutters down both sides.

	   Deliberately no overflow-x here either: per spec, overflow-x:hidden
	   forces overflow-y to compute to auto, which turns this wrapper into
	   its own scroll container and produces a second scrollbar. The
	   decorative circles are already clipped by their own sections
	   (.ab-sec--teal / .ab-quote both set overflow:hidden). */
	background: #fff;
	color: var(--ab-ink);
	font-family: Poppins, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.mt-about *,
.mt-about *::before,
.mt-about *::after {
	box-sizing: border-box;
}
.mt-about a {
	color: var(--ab-teal);
	text-decoration: none;
}

/* Scroll reveal. The hidden start state is gated behind .ab-js, which
   about.js adds as soon as it runs — so if the script fails to load the
   sections stay visible instead of leaving the page blank below the fold. */
.mt-about.ab-js [data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1),
		transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.mt-about.ab-js [data-reveal].om-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.mt-about.ab-js [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ── Section shells ── */
.ab-sec {
	padding: clamp(70px, 8vw, 120px) clamp(20px, 5vw, 48px);
}
.ab-sec--white { background: #fff; }
.ab-sec--mist { background: var(--ab-mist); }
.ab-sec--teal { background: var(--ab-teal); position: relative; overflow: hidden; }
.ab-sec--gold { background: var(--ab-gold); text-align: center; padding: clamp(70px, 9vw, 126px) clamp(20px, 5vw, 48px); }

/* Match the site's own wide container (theme.json wideSize, 1340px) so
   the About sections line up with the homepage, header and footer
   instead of the design file's narrower 1180px. */
.ab-wrap {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin: 0 auto;
}
.ab-wrap--rel { position: relative; }

/* Two-column auto-fit split used by most sections */
.ab-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(36px, 5vw, 72px);
	align-items: center;
}
.ab-split--start { align-items: start; gap: clamp(34px, 5vw, 68px); }
.ab-split--300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(36px, 5vw, 68px); }
.ab-split--280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(30px, 4vw, 60px); }

.ab-col {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.ab-col--20 { gap: 20px; }
.ab-col--16 { gap: 16px; }

/* ── Typography ── */
.ab-eyebrow {
	font: 600 11px Poppins, sans-serif;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ab-teal);
}
.ab-eyebrow--gold { color: var(--ab-gold); }

.ab-h1 {
	margin: 0;
	font: 800 clamp(38px, 5.4vw, 74px) / 1.02 Poppins, sans-serif;
	color: #fff;
	letter-spacing: -0.025em;
	max-width: 13ch;
	text-wrap: balance;
}
.ab-h2 {
	margin: 0;
	font: 700 clamp(28px, 3.4vw, 46px) / 1.12 Poppins, sans-serif;
	letter-spacing: -0.02em;
}
.ab-h2--tight { font-size: clamp(27px, 3.2vw, 44px); line-height: 1.14; }
.ab-h2--light { color: #fff; }
.ab-h2--balance { max-width: 19ch; text-wrap: balance; }
.ab-h3 {
	margin: 0;
	font: 600 19px/1.35 Poppins, sans-serif;
	color: var(--ab-teal);
}

.ab-lead {
	margin: 0;
	max-width: 52ch;
	font: 400 clamp(15px, 1.3vw, 18px) / 1.75 Poppins, sans-serif;
	color: rgba(255, 255, 255, 0.8);
	text-wrap: pretty;
}
.ab-p {
	margin: 0;
	font: 400 clamp(14px, 1.2vw, 16px) / 1.8 Poppins, sans-serif;
	color: rgba(21, 25, 26, 0.66);
	max-width: 52ch;
	text-wrap: pretty;
}
.ab-p--strong {
	font-weight: 500;
	font-size: clamp(15px, 1.25vw, 17px);
	line-height: 1.78;
	color: var(--ab-ink);
}
.ab-p--mid {
	font-size: clamp(14px, 1.2vw, 16.5px);
	line-height: 1.8;
	color: rgba(21, 25, 26, 0.68);
}
.ab-p--light { color: rgba(255, 255, 255, 0.7); max-width: 50ch; }
.ab-p--light-strong {
	font-weight: 500;
	font-size: clamp(14px, 1.2vw, 16.5px);
	color: rgba(255, 255, 255, 0.88);
	max-width: 50ch;
}

/* ── Buttons ──
   Every colour rule here is scoped with .mt-about so it outranks the
   `.mt-about a { color: teal }` base rule above — without the extra
   class these anchors inherit teal and go invisible on teal/gold. */
.mt-about .ab-btn {
	display: inline-block;
	font: 600 15px Poppins, sans-serif;
	border-radius: 999px;
	transition: background-color 0.25s ease, color 0.25s ease,
		border-color 0.25s ease, transform 0.25s ease;
}
.mt-about .ab-btn--gold {
	color: var(--ab-ink);
	background: var(--ab-gold);
	padding: 17px 36px;
	box-shadow: 0 12px 30px rgba(249, 190, 25, 0.26);
}
.mt-about .ab-btn--gold:hover {
	background: var(--ab-gold-hover);
	color: var(--ab-ink);
	transform: translateY(-2px);
}
.mt-about .ab-btn--ghost {
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	padding: 16px 32px;
}
.mt-about .ab-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}
.mt-about .ab-btn--teal {
	color: #fff;
	background: var(--ab-teal);
	padding: 15px 32px;
}
.mt-about .ab-btn--teal:hover {
	background: var(--ab-teal-hover);
	color: #fff;
	transform: translateY(-2px);
}
.mt-about .ab-btn--teal-lg { padding: 16px 34px; }
.mt-about .ab-btn--teal-cta {
	padding: 17px 38px;
	box-shadow: 0 12px 28px rgba(11, 119, 119, 0.24);
}
.mt-about .ab-btn--teal-outline {
	color: var(--ab-teal);
	background: transparent;
	border: 1.5px solid rgba(11, 119, 119, 0.3);
	padding: 15px 30px;
}
.mt-about .ab-btn--teal-outline:hover {
	background: var(--ab-teal);
	color: #fff;
	border-color: var(--ab-teal);
}
.mt-about .ab-btn--ink-outline {
	color: var(--ab-ink);
	border: 1.5px solid rgba(21, 25, 26, 0.35);
	padding: 16px 34px;
}
.mt-about .ab-btn--ink-outline:hover {
	background: var(--ab-ink);
	color: var(--ab-gold);
	border-color: var(--ab-ink);
}
.mt-about .ab-erdc-link { color: var(--ab-teal); }
.ab-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 6px;
}
.ab-btn-row--center { justify-content: center; margin-top: 8px; }

/* ── Hero ──
   Extra top padding so the site header's shield logo, which hangs below
   the header edge, clears the eyebrow text instead of sitting on top of it. */
.ab-hero {
	padding: clamp(112px, 11vw, 168px) clamp(20px, 5vw, 48px) clamp(64px, 8vw, 112px);
}
@media (max-width: 782px) {
	/* The badge shrinks to 90px on small screens, so it needs less clearance. */
	.ab-hero {
		padding-top: clamp(76px, 14vw, 104px);
	}
}
.ab-hero__blob-a {
	position: absolute;
	top: -150px;
	right: -110px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.045);
}
.ab-hero__blob-b {
	position: absolute;
	bottom: -200px;
	left: -130px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	border: 1px solid rgba(249, 190, 25, 0.2);
}
.ab-hero__grid {
	position: relative;
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(34px, 5vw, 64px);
	align-items: center;
}
.ab-hero__col { display: flex; flex-direction: column; gap: 22px; }

/* Image tiles */
.ab-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	border-radius: 28px;
	overflow: hidden;
	font: 500 11.5px/1.6 ui-monospace, Menlo, monospace;
	letter-spacing: 0.05em;
}
.ab-tile--hero {
	height: clamp(280px, 32vw, 420px);
	padding: 0;
	color: rgba(255, 255, 255, 0.75);
}
/* The hero artwork is transparent white line art, so it sits *inside*
   the tile's tinted panel rather than filling it edge to edge. */
.ab-tile--hero img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.ab-tile--portrait {
	background: var(--ab-tile);
	background-image: repeating-linear-gradient(135deg, rgba(11, 119, 119, 0.08) 0 10px, rgba(0, 0, 0, 0) 10px 20px);
	color: var(--ab-teal);
	padding: 0;
}
/* Photographs fill their tile completely and are cropped to it. */
.ab-tile--portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
	display: block;
}
.ab-tile--founder { height: clamp(340px, 38vw, 520px); }
.ab-tile--erdc-person { height: clamp(300px, 34vw, 440px); }
.ab-tile--erdc-person img { object-position: center 18%; }

/* ── Chips ── */
.ab-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}
.ab-chips--tight { gap: 9px; }
.ab-chip {
	font: 500 13px Poppins, sans-serif;
	color: var(--ab-teal);
	background: var(--ab-mist);
	border-radius: 999px;
	padding: 9px 18px;
}
.ab-chip--onmist { background: #fff; }
.ab-chip--self { align-self: flex-start; }

/* ── Quote card (Our Story) ── */
.ab-quote {
	background: var(--ab-mist);
	border-radius: 28px;
	padding: clamp(32px, 4vw, 56px);
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: relative;
	overflow: hidden;
}
.ab-quote__mark {
	position: absolute;
	top: 14px;
	left: 26px;
	font: 800 110px/1 Poppins, sans-serif;
	color: rgba(249, 190, 25, 0.35);
}
.ab-quote__q {
	position: relative;
	margin: 26px 0 0;
	font: 700 clamp(23px, 2.8vw, 36px) / 1.3 Poppins, sans-serif;
	color: var(--ab-teal);
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.ab-quote__sub {
	margin: 0;
	font: 400 15px/1.75 Poppins, sans-serif;
	color: rgba(21, 25, 26, 0.66);
	max-width: 40ch;
}
.ab-rule {
	width: 56px;
	height: 4px;
	border-radius: 2px;
	background: var(--ab-gold);
}
.ab-rule--sm { width: 44px; }

/* ── Need tiles (The Problem We Saw) ──
   Presented as a checklist so the seven points read as a deliberate set
   rather than loose boxes. The last item spans the full row so an odd
   count never leaves a lopsided gap at the end. */
.ab-needs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ab-needs > :last-child {
	grid-column: 1 / -1;
}
.ab-need {
	display: flex;
	align-items: center;
	gap: 12px;
	font: 500 14.5px/1.4 Poppins, sans-serif;
	color: var(--ab-ink);
	background: var(--ab-mist);
	border: 1px solid rgba(11, 119, 119, 0.1);
	border-radius: 14px;
	padding: 15px 18px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.ab-need:hover {
	border-color: rgba(11, 119, 119, 0.28);
	box-shadow: 0 10px 24px rgba(11, 119, 119, 0.08);
	transform: translateY(-2px);
}
.ab-need__ic {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: rgba(249, 190, 25, 0.22);
	color: var(--ab-teal);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ab-need__ic svg { width: 15px; height: 15px; }

.ab-problem-card {
	background: #fff;
	border-radius: 28px;
	padding: clamp(28px, 3.4vw, 44px);
}

/* ── Progression list ── */
.ab-prog {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 28px;
	padding: clamp(28px, 3.4vw, 44px);
}
.ab-prog__label {
	font: 600 11px Poppins, sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(11, 119, 119, 0.7);
	margin-bottom: 20px;
}
.ab-prog__item { display: flex; flex-direction: column; }
.ab-prog__row { display: flex; align-items: center; gap: 16px; }
.ab-prog__dot {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ab-mist);
	border: 1.5px solid rgba(11, 119, 119, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 14px Poppins, sans-serif;
	color: var(--ab-teal);
}
.ab-prog__item--first .ab-prog__dot {
	background: var(--ab-gold);
	border-color: var(--ab-gold);
	color: var(--ab-ink);
}
.ab-prog__text { display: flex; flex-direction: column; gap: 2px; }
.ab-prog__title { font: 600 18px Poppins, sans-serif; color: var(--ab-ink); }
.ab-prog__desc { font: 400 13.5px/1.5 Poppins, sans-serif; color: rgba(21, 25, 26, 0.6); }
.ab-prog__line {
	width: 2px;
	height: 18px;
	background: rgba(11, 119, 119, 0.22);
	margin: 8px 0 8px 19px;
}
.ab-prog__item:last-child .ab-prog__line { height: 0; }

/* ── Philosophy hadith card ── */
.ab-glass {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 28px;
	padding: clamp(32px, 4vw, 54px);
	display: flex;
	flex-direction: column;
	gap: 22px;
}
/* Arabic sits above the translation, set larger and in a naskh face so
   the harakāt render cleanly. */
.ab-glass__ar {
	margin: 0;
	font-family: "Noto Naskh Arabic", "Traditional Arabic", "Scheherazade New", serif;
	font-size: clamp(21px, 2.3vw, 30px);
	line-height: 2;
	color: #fff;
	direction: rtl;
	text-align: right;
}
.ab-glass__quote {
	margin: 0;
	font: 500 italic clamp(17px, 1.9vw, 24px) / 1.5 Poppins, sans-serif;
	color: rgba(255, 255, 255, 0.92);
	text-wrap: pretty;
}
.ab-glass__by { margin: 0; font: 500 14px Poppins, sans-serif; color: var(--ab-gold); }
.ab-glass__ref {
	margin: -8px 0 0;
	font: 400 12.5px Poppins, sans-serif;
	color: rgba(255, 255, 255, 0.6);
}
.ab-sec--teal .ab-glass__blob {
	position: absolute;
	top: -140px;
	left: -110px;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Section headers ── */
.ab-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: clamp(34px, 4vw, 54px);
}
.ab-head--center { align-items: center; text-align: center; }
.ab-head--left { max-width: 620px; margin-bottom: clamp(34px, 4vw, 56px); }

/* ── Card grids ── */
.ab-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 20px;
}
.ab-grid--22 { gap: 22px; }
.ab-grid--230 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ab-grid--280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.ab-grid--300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Belief cards */
.ab-card {
	background: var(--ab-mist);
	border-radius: 24px;
	padding: 30px 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform 0.3s, box-shadow 0.3s;
}
.ab-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(11, 119, 119, 0.12);
}
.ab-card__icon {
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: var(--ab-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ab-ink);
	box-shadow: 0 8px 18px rgba(249, 190, 25, 0.28);
	margin-bottom: 4px;
}
.ab-card__icon svg {
	width: 26px;
	height: 26px;
	stroke-width: 1.9;
}
.ab-card__p {
	margin: 0;
	font: 400 14.5px/1.7 Poppins, sans-serif;
	color: rgba(21, 25, 26, 0.66);
	text-wrap: pretty;
}

/* Approach stage cards */
.ab-stage {
	border-radius: 24px;
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
	background: #fff;
	transition: transform 0.3s;
}
.ab-stage:hover { transform: translateY(-6px); }
.ab-stage--dark { background: var(--ab-teal); }
.ab-stage__n { font: 700 13px Poppins, sans-serif; color: var(--ab-gold); }
.ab-stage__rule { width: 100%; height: 1px; background: rgba(11, 119, 119, 0.15); }
.ab-stage--dark .ab-stage__rule { background: rgba(255, 255, 255, 0.22); }
.ab-stage__title {
	margin: 0;
	font: 700 clamp(21px, 2vw, 26px) Poppins, sans-serif;
	color: var(--ab-teal);
}
.ab-stage--dark .ab-stage__title { color: #fff; }
.ab-stage__p {
	margin: 0;
	font: 400 14.5px/1.7 Poppins, sans-serif;
	color: rgba(21, 25, 26, 0.66);
	text-wrap: pretty;
}
.ab-stage--dark .ab-stage__p { color: rgba(255, 255, 255, 0.75); }

/* Service cards (Turning Belief Into Action) */
.ab-service {
	background: var(--ab-mist);
	border-radius: 24px;
	padding: clamp(28px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform 0.3s, box-shadow 0.3s;
}
.ab-service:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(11, 119, 119, 0.12);
}
.ab-service__title {
	margin: 0;
	font: 700 clamp(20px, 1.8vw, 24px) Poppins, sans-serif;
	color: var(--ab-teal);
}
.ab-service__p {
	margin: 0;
	font: 400 15px/1.72 Poppins, sans-serif;
	color: rgba(21, 25, 26, 0.68);
}

/* ── Founder ── */
.ab-founder__role { margin: 0; font: 600 15px Poppins, sans-serif; color: var(--ab-gold); }

/* ── Roots / ERDC ── */
.ab-roots {
	display: flex;
	flex-direction: column;
	gap: clamp(34px, 4vw, 56px);
}
.ab-erdc-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	background: #fff;
	border-radius: 26px;
	padding: clamp(26px, 3vw, 40px);
}
.ab-erdc-logo {
	width: 180px;
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ab-erdc-logo img {
	width: 100%;
	height: auto;
	display: block;
}
.ab-erdc-link { font: 600 15px Poppins, sans-serif; color: var(--ab-teal); }
.ab-erdc-url { font: 400 13.5px Poppins, sans-serif; color: rgba(21, 25, 26, 0.55); }

.ab-vm {
	border-radius: 26px;
	padding: clamp(30px, 3.6vw, 48px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ab-vm--teal { background: var(--ab-teal); }
.ab-vm--white { background: #fff; border: 1px solid rgba(11, 119, 119, 0.1); }
.ab-vm__label {
	font: 600 11px Poppins, sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.ab-vm--teal .ab-vm__label { color: var(--ab-gold); }
.ab-vm--white .ab-vm__label { color: var(--ab-teal); }
.ab-vm__p {
	margin: 0;
	font: 500 clamp(16px, 1.7vw, 21px) / 1.6 Poppins, sans-serif;
	text-wrap: pretty;
}
.ab-vm--teal .ab-vm__p { color: #fff; }
.ab-vm--white .ab-vm__p { color: var(--ab-ink); }

/* ── Timeline ── */
.ab-tl {
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-top: 3px solid rgba(11, 119, 119, 0.25);
	padding-top: 20px;
}
.ab-tl--first { border-top-color: var(--ab-gold); }
.ab-tl__label {
	font: 700 clamp(22px, 2.4vw, 30px) Poppins, sans-serif;
	color: var(--ab-teal);
}
.ab-tl__desc { font: 400 14.5px/1.7 Poppins, sans-serif; color: rgba(21, 25, 26, 0.66); }

/* ── Values ── */
.ab-values-h {
	margin: 0 0 clamp(32px, 4vw, 52px);
	font: 700 clamp(28px, 3.4vw, 46px) / 1.12 Poppins, sans-serif;
	color: #fff;
	letter-spacing: -0.02em;
}
.ab-vgroup {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 24px;
	padding: 30px 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ab-vgroup__name {
	font: 600 11px Poppins, sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ab-gold);
}
.ab-vgroup__list { display: flex; flex-direction: column; gap: 12px; }
.ab-vitem { display: flex; align-items: center; gap: 12px; }
.ab-vitem__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ab-gold);
}
.ab-vitem__t { font: 500 15.5px Poppins, sans-serif; color: #fff; }

/* ── Closing CTA ── */
.ab-cta {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.ab-cta__h {
	margin: 0;
	font: 800 clamp(30px, 4.2vw, 56px) / 1.1 Poppins, sans-serif;
	color: var(--ab-ink);
	letter-spacing: -0.02em;
}
.ab-cta__p {
	margin: 0;
	max-width: 56ch;
	font: 400 clamp(15px, 1.3vw, 17.5px) / 1.7 Poppins, sans-serif;
	color: rgba(21, 25, 26, 0.72);
	text-wrap: pretty;
}
.ab-cta__tag {
	margin: 10px 0 0;
	font: 500 italic 14.5px Poppins, sans-serif;
	color: rgba(21, 25, 26, 0.6);
}