/* =============================================================================
   components.css - Header, Footer, Cards, Buttons, Nav, Sections, Notification
   ============================================================================= */

/* ── Site Popup (modal) ──────────────────────────────────────────────────── */
.navttc-popup { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: var(--sp-lg); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
/* The [hidden] attribute (set by popup.js) must beat display:flex, otherwise the
   invisible full-screen layer keeps swallowing every click on the page. */
.navttc-popup[hidden] { display: none; }
.navttc-popup.is-open { opacity: 1; pointer-events: auto; }
.navttc-popup__overlay { position: absolute; inset: 0; background: rgba(15,23,42,.78); backdrop-filter: blur(3px); }
.navttc-popup__box { position: relative; z-index: 1; width: 100%; background: var(--color-white); border-radius: var(--r-xl); box-shadow: 0 30px 80px rgba(0,0,0,.45); overflow: hidden; transform: translateY(16px) scale(.97); transition: transform .3s ease; max-height: 90vh; overflow-y: auto; }
.navttc-popup.is-open .navttc-popup__box { transform: translateY(0) scale(1); }
.navttc-popup__box--small  { max-width: 480px; }
.navttc-popup__box--medium { max-width: 640px; }
.navttc-popup__box--large  { max-width: 860px; }
.navttc-popup__close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; border-radius: var(--r-full); font-size: var(--fs-base); transition: background var(--tr-fast); }
.navttc-popup__close:hover { background: rgba(0,0,0,.8); }
.navttc-popup__img, .navttc-popup__img-link img { display: block; width: 100%; height: auto; }
.navttc-popup__content { padding: var(--sp-2xl); }

/* ── Wing color tokens (overridden per-wing via inline <style>) ─────────── */
:root {
	--wing-primary:   #0A6847;
	--wing-secondary: #064e3b;
}

/* ── Wing: shared color utilities ────────────────────────────────────────── */
.wing-badge {
	background: color-mix(in srgb, var(--wing-primary) 12%, transparent);
	color: var(--wing-primary);
}

.wing-btn-primary {
	background: linear-gradient(135deg, var(--wing-primary) 0%, var(--wing-secondary) 100%);
	color: var(--color-white) !important;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--wing-primary) 35%, transparent);
}
.wing-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--wing-primary) 45%, transparent);
	color: var(--color-white) !important;
}

.wing-btn-accent {
	background: var(--color-accent);
	color: var(--color-dark) !important;
	box-shadow: 0 4px 14px rgba(245,158,11,.3);
}
.wing-btn-accent:hover { transform: translateY(-2px); color: var(--color-dark) !important; }

.wing-btn-outline {
	background: transparent;
	color: var(--wing-primary) !important;
	border: 2px solid var(--wing-primary);
}
.wing-btn-outline:hover {
	background: var(--wing-primary);
	color: var(--color-white) !important;
	transform: translateY(-2px);
}

/* Assessment/Certification quick-nav (sticky section jumps) */
.wing-quicknav { position: sticky; top: var(--header-h); z-index: 30; background: var(--color-white); border-bottom: 1px solid var(--color-border); padding: .75rem 0; }
.wing-quicknav__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.wing-quicknav__link { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.5rem; border-radius: var(--r-full); font-weight: 700; font-size: var(--fs-sm); background: color-mix(in srgb, var(--wing-primary) 10%, #fff); color: var(--wing-primary); transition: background var(--tr-base), color var(--tr-base); }
.wing-quicknav__link:hover, .wing-quicknav__link.is-active { background: var(--wing-primary); color: var(--color-white); }
/* Land section anchors below the sticky header + quick-nav */
.wing-process, .wing-directory, .wing-industry { scroll-margin-top: calc(var(--header-h) + 64px); }

/* ── Wing Hero ───────────────────────────────────────────────────────────── */
.wing-hero {
	position: relative;
	min-height: 75vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--color-dark);
	padding-block: var(--sp-4xl);
}

.wing-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .25;
}

.wing-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--wing-secondary) 80%, transparent) 0%,
		rgba(15,23,42,.9) 60%,
		rgba(15,23,42,.97) 100%
	);
}

.wing-hero .container { position: relative; z-index: 1; }

.wing-hero__inner {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: var(--sp-3xl);
	align-items: center;
}
.wing-hero__inner--full { grid-template-columns: 1fr; }
.wing-hero__inner--full .wing-hero__sub { max-width: min(820px, 100%); }

.wing-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-sm);
	padding: 0.375rem 1rem;
	background: color-mix(in srgb, var(--wing-primary) 20%, transparent);
	border: 1px solid color-mix(in srgb, var(--wing-primary) 40%, transparent);
	color: color-mix(in srgb, var(--wing-primary) 90%, white);
	font-size: var(--fs-sm);
	font-weight: 700;
	border-radius: var(--r-full);
	margin-bottom: var(--sp-lg);
}

.wing-hero__title {
	color: var(--color-white);
	font-size: clamp(var(--fs-3xl), 4.5vw, var(--fs-5xl));
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: var(--sp-lg);
}

.wing-hero__sub {
	color: rgba(255,255,255,.7);
	font-size: var(--fs-lg);
	line-height: 1.7;
	max-width: 560px;
	margin-bottom: var(--sp-2xl);
}

.wing-hero__ctas { display: flex; gap: var(--sp-md); flex-wrap: wrap; }

/* Stats grid on right */
.wing-hero__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-md);
}

.wing-stat-box {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: var(--r-xl);
	padding: var(--sp-xl);
	text-align: center;
	backdrop-filter: blur(8px);
	transition: all var(--tr-base);
}
.wing-stat-box:hover {
	background: rgba(255,255,255,.1);
	border-color: color-mix(in srgb, var(--wing-primary) 50%, transparent);
}

.wing-stat-box__number {
	display: block;
	font-size: clamp(var(--fs-3xl), 3vw, var(--fs-5xl));
	font-weight: 800;
	color: var(--color-accent);
	line-height: 1;
	margin-bottom: var(--sp-sm);
}

.wing-stat-box__label {
	display: block;
	font-size: var(--fs-xs);
	color: rgba(255,255,255,.6);
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* ── Wing Features ───────────────────────────────────────────────────────── */
.wing-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-xl);
}

.wing-feature-card {
	display: flex;
	gap: var(--sp-lg);
	align-items: flex-start;
	padding: var(--sp-xl);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--r-xl);
	transition: all var(--tr-base);
	border-left: 4px solid var(--wing-primary);
}
.wing-feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.wing-feature-card__icon {
	width: 48px; height: 48px;
	display: flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--wing-primary) 10%, transparent);
	border-radius: var(--r-lg);
	font-size: 1.3rem;
	color: var(--wing-primary);
	flex-shrink: 0;
}

.wing-feature-card__title { font-size: var(--fs-base); font-weight: 700; color: var(--color-text); margin-bottom: var(--sp-xs); }
.wing-feature-card__desc  { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.6; margin: 0; }

/* ── Wing Process Steps ──────────────────────────────────────────────────── */
.wing-process__steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-md);
	justify-content: center;
	position: relative;
}

.wing-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1 1 200px;
	max-width: 240px;
	position: relative;
}

.wing-step__number {
	width: 52px; height: 52px;
	display: flex; align-items: center; justify-content: center;
	background: var(--wing-primary);
	color: var(--color-white);
	font-size: var(--fs-xl);
	font-weight: 800;
	border-radius: var(--r-full);
	margin-bottom: var(--sp-lg);
	flex-shrink: 0;
	box-shadow: 0 4px 16px color-mix(in srgb, var(--wing-primary) 35%, transparent);
}

.wing-step__title { font-size: var(--fs-base); font-weight: 700; color: var(--color-text); margin-bottom: var(--sp-sm); }
.wing-step__desc  { font-size: var(--fs-sm); color: var(--color-text-muted); }

.wing-step__arrow {
	position: absolute;
	top: 24px;
	right: calc(-1 * var(--sp-md) - 10px);
	color: var(--wing-primary);
	opacity: .4;
	font-size: 1.2rem;
}

/* ── Wing Team ───────────────────────────────────────────────────────────── */
.wing-leader-featured {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: var(--sp-3xl);
	align-items: center;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--r-xl);
	overflow: hidden;
	margin-bottom: var(--sp-3xl);
	border-top: 5px solid var(--wing-primary);
}

.wing-leader-featured__img-wrap { background: var(--color-bg-section); }
.wing-leader-featured__img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }

.wing-leader-placeholder {
	width: 100%; aspect-ratio: 4/5;
	display: flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--wing-primary) 8%, white);
	color: color-mix(in srgb, var(--wing-primary) 30%, white);
	font-size: 5rem;
}

.wing-leader-featured__info { padding: var(--sp-2xl); }
.wing-leader-featured__name  { font-size: var(--fs-2xl); font-weight: 800; color: var(--color-text); margin-bottom: var(--sp-sm); }
.wing-leader-featured__title { color: var(--wing-primary); font-weight: 600; margin-bottom: var(--sp-lg); }
.wing-leader-featured__bio   { color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--sp-lg); }
.wing-leader-featured__email {
	display: inline-flex; align-items: center; gap: var(--sp-sm);
	color: var(--wing-primary); font-weight: 600; font-size: var(--fs-sm);
}

.wing-team__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-xl);
}

/* ── Wing Downloads ──────────────────────────────────────────────────────── */
.wing-downloads__grid {
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
}

.wing-download-card {
	display: flex;
	align-items: center;
	gap: var(--sp-lg);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--r-lg);
	padding: var(--sp-lg);
	transition: all var(--tr-fast);
}
.wing-download-card:hover { box-shadow: var(--shadow-md); border-color: var(--wing-primary); }

.wing-download-card__icon {
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--wing-primary) 10%, transparent);
	border-radius: var(--r-md);
	color: var(--wing-primary);
	font-size: 1.3rem;
	flex-shrink: 0;
}

.wing-download-card__info { flex: 1; min-width: 0; }
.wing-download-card__title { font-size: var(--fs-base); font-weight: 600; color: var(--color-text); }
.wing-download-card__meta  { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ── Wing Extra / Custom Fields ──────────────────────────────────────────── */
.wing-extra__table {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--r-xl);
	overflow: hidden;
}

.wing-extra__row {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--sp-lg);
	padding: var(--sp-md) var(--sp-xl);
	border-bottom: 1px solid var(--color-border);
	align-items: start;
}
.wing-extra__row:last-child { border-bottom: none; }
.wing-extra__row:nth-child(even) { background: var(--color-bg-light); }

.wing-extra__label {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--wing-primary);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.wing-extra__value { font-size: var(--fs-sm); color: var(--color-text); line-height: 1.6; }

.wing-contact-strip {
	background: linear-gradient(135deg, var(--wing-primary) 0%, var(--wing-secondary) 100%);
	border-radius: var(--r-xl);
	padding: var(--sp-xl) var(--sp-2xl);
}
.wing-contact-strip__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-lg);
	flex-wrap: wrap;
}
.wing-contact-strip__icon {
	width: 52px; height: 52px;
	background: rgba(255,255,255,.15);
	border-radius: var(--r-full);
	display: flex; align-items: center; justify-content: center;
	color: var(--color-white);
	font-size: 1.3rem;
	flex-shrink: 0;
}
.wing-contact-strip__label  { font-size: var(--fs-xs); color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .06em; }
.wing-contact-strip__email  { color: var(--color-white); font-size: var(--fs-lg); font-weight: 700; }

/* ── Notification Bar ────────────────────────────────────────────────────── */
.notification-bar {
	display: none; /* JS reveals after localStorage check */
	align-items: center;
	justify-content: center;
	gap: var(--sp-md);
	padding: 0.625rem var(--container-pad);
	font-size: var(--fs-sm);
	font-weight: 500;
	position: relative;
	z-index: 1000;
}
.notification-bar.is-visible { display: flex; }

.notification-bar--info    { background: #1e40af; color: #fff; }
.notification-bar--success { background: var(--color-primary); color: #fff; }
.notification-bar--warning { background: #92400e; color: #fff; }
.notification-bar--danger  { background: #991b1b; color: #fff; }

.notification-bar__content { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; justify-content: center; }
.notification-bar__icon { flex-shrink: 0; }

.notification-bar__link {
	display: inline-block;
	padding: 0.2rem 0.75rem;
	background: rgba(255,255,255,.2);
	border-radius: var(--r-full);
	color: inherit;
	font-weight: 600;
	white-space: nowrap;
	transition: background var(--tr-fast);
}
.notification-bar__link:hover { background: rgba(255,255,255,.3); color: inherit; }

.notification-bar__close {
	position: absolute;
	right: var(--sp-md);
	top: 50%;
	transform: translateY(-50%);
	width: 28px; height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.15);
	border-radius: var(--r-full);
	color: inherit;
	font-size: var(--fs-sm);
	transition: background var(--tr-fast);
	flex-shrink: 0;
}
.notification-bar__close:hover { background: rgba(255,255,255,.3); }

/* ── Top Bar ─────────────────────────────────────────────────────────────── */
.top-bar {
	background: var(--color-dark);
	height: var(--topbar-h);
	display: flex;
	align-items: center;
}

.top-bar .container { display: flex; align-items: center; justify-content: space-between; }

.top-bar__contact {
	display: flex;
	align-items: center;
	gap: var(--sp-lg);
}

.top-bar__contact a {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: rgba(255,255,255,.7);
	font-size: var(--fs-xs);
	transition: color var(--tr-fast);
}
.top-bar__contact a:hover { color: var(--color-white); }
.top-bar__contact i { color: var(--color-primary-mid); font-size: 0.7rem; }
/* Working hours is a <span>, not a link - give it the light color so it's visible on the dark bar. */
.top-bar__hours { display: flex; align-items: center; gap: 0.375rem; color: rgba(255,255,255,.7); font-size: var(--fs-xs); }

.top-bar__right { display: flex; align-items: center; gap: var(--sp-lg); }

.top-bar .social-links { display: flex; gap: var(--sp-sm); }
.top-bar .social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	background: rgba(255,255,255,.08);
	color: rgba(255,255,255,.6);
	border-radius: var(--r-sm);
	font-size: 0.7rem;
	transition: all var(--tr-fast);
}
.top-bar .social-links a:hover { background: var(--color-primary); color: var(--color-white); }

.top-bar__portal-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.875rem;
	background: var(--color-primary);
	color: var(--color-white) !important;
	font-size: var(--fs-xs);
	font-weight: 700;
	border-radius: var(--r-full);
	transition: background var(--tr-fast);
}
.top-bar__portal-btn:hover { background: var(--color-primary-mid); color: var(--color-white) !important; }

/* Premium yellow top-bar CTAs */
.top-bar__cta {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .32rem 1rem; border-radius: var(--r-full);
	font-size: var(--fs-xs); font-weight: 800; white-space: nowrap;
	background: linear-gradient(135deg, #FCD34D, #F59E0B); color: #1f2937 !important;
	box-shadow: 0 4px 12px -3px rgba(245,158,11,.55);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.top-bar__cta:hover { transform: translateY(-1px); box-shadow: 0 7px 16px -3px rgba(245,158,11,.65); color: #1f2937 !important; }
.top-bar__cta--alt {
	background: transparent; color: var(--color-accent-light) !important;
	border: 1.5px solid color-mix(in srgb, var(--color-accent) 60%, transparent); box-shadow: none;
}
.top-bar__cta--alt:hover { background: rgba(245,158,11,.16); color: #fff !important; transform: translateY(-1px); }

/* ── Main Navigation ─────────────────────────────────────────────────────── */
.main-nav {
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	position: relative;
	z-index: 900;
	transition: box-shadow var(--tr-base);
}
.main-nav.is-scrolled { box-shadow: var(--shadow-md); }

/* Make the whole header sticky. (The nav alone can't stick reliably because its
   parent .site-header is short; on long pages it would scroll away.) */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--color-white);
}

.main-nav .container { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }

/* Logo */
.site-logo { display: flex; align-items: center; gap: var(--sp-sm); text-decoration: none; flex-shrink: 0; }

.site-logo img, .site-logo__img { height: 50px; width: auto; max-width: 230px; object-fit: contain; display: block; }

.site-logo__text { line-height: 1.2; }
.site-logo__name {
	display: block;
	font-size: var(--fs-lg);
	font-weight: 800;
	color: var(--color-primary);
}
.site-logo__tagline {
	display: block;
	font-size: 0.625rem;
	font-weight: 500;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Primary menu */
.primary-menu {
	display: flex;
	align-items: center;
	gap: 0;
}

.primary-menu > li { position: relative; }

.primary-menu > li > a {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.5rem var(--sp-md);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--color-text);
	border-radius: var(--r-sm);
	transition: all var(--tr-fast);
	white-space: nowrap;
}

.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-ancestor > a {
	color: var(--color-primary);
	background: var(--color-primary-light);
}

/* Dropdown */
.primary-menu .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 220px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: all var(--tr-base);
	z-index: 100;
	padding: var(--sp-sm) 0;
}

.primary-menu > li:hover > .sub-menu,
.primary-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-menu .sub-menu li a {
	display: block;
	padding: 0.5rem var(--sp-lg);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--color-text);
	transition: all var(--tr-fast);
}
.primary-menu .sub-menu li a:hover {
	color: var(--color-primary);
	background: var(--color-primary-light);
}

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border-radius: var(--r-md);
	color: var(--color-text);
	font-size: var(--fs-lg);
	transition: all var(--tr-fast);
}
.menu-toggle:hover { background: var(--color-bg-section); color: var(--color-primary); }

/* Mobile drawer */
.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 990;
	visibility: hidden;
}
.mobile-nav.is-open { visibility: visible; }

.mobile-nav__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.5);
	opacity: 0;
	transition: opacity var(--tr-base);
}
.mobile-nav.is-open .mobile-nav__overlay { opacity: 1; }

.mobile-nav__drawer {
	position: absolute;
	top: 0; left: 0;
	height: 100%;
	width: min(320px, 88vw);
	background: var(--color-white);
	transform: translateX(-100%);
	transition: transform var(--tr-base);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
.mobile-nav.is-open .mobile-nav__drawer { transform: translateX(0); }

.mobile-nav__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-md) var(--sp-lg);
	border-bottom: 1px solid var(--color-border);
}

.mobile-nav__close {
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	border-radius: var(--r-md);
	color: var(--color-text-muted);
	font-size: var(--fs-lg);
	transition: all var(--tr-fast);
}
.mobile-nav__close:hover { background: var(--color-bg-section); color: var(--color-primary); }

.mobile-menu { flex: 1; padding: var(--sp-md) 0; }

.mobile-menu a {
	display: block;
	padding: 0.625rem var(--sp-lg);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--color-text);
	transition: all var(--tr-fast);
}
.mobile-menu a:hover { color: var(--color-primary); background: var(--color-primary-light); }

.mobile-menu .sub-menu { padding-left: var(--sp-lg); }
.mobile-menu .sub-menu a { font-weight: 500; color: var(--color-text-muted); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.85rem 1.7rem;
	font-family: inherit;
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.005em;
	border: 0;
	border-radius: var(--r-full);
	transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease, gap .2s ease;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.btn i { font-size: .9em; }
.btn:hover { gap: .8rem; }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.btn:active { transform: translateY(0) scale(.985); }

.btn-primary {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-mid) 100%);
	color: var(--color-white);
	box-shadow: 0 12px 26px -10px rgba(10,104,71,.55);
}
.btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 38px -12px rgba(10,104,71,.6);
	color: var(--color-white);
}

.btn-secondary {
	background: transparent;
	color: var(--color-white);
	box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45);
}
.btn-secondary:hover { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1.5px var(--color-white); color: var(--color-white); transform: translateY(-2px); }

.btn-outline {
	background: transparent;
	color: var(--color-primary);
	box-shadow: inset 0 0 0 1.5px var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary); color: var(--color-white); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(10,104,71,.5); }

.btn-accent {
	background: linear-gradient(135deg, #FCD34D, var(--color-accent));
	color: var(--color-dark);
	box-shadow: 0 12px 26px -10px rgba(245,158,11,.55);
}
.btn-accent:hover { transform: translateY(-3px); box-shadow: 0 20px 38px -12px rgba(245,158,11,.6); color: var(--color-dark); }

.btn-sm { padding: 0.6rem 1.2rem; font-size: var(--fs-xs); }
.btn-lg { padding: 1.05rem 2.1rem; font-size: var(--fs-base); }

/* ── On-brand section headings (consistent across every page) ─────────────── */
.section-header h2 { font-weight: 800; letter-spacing: -.02em; }
.section-header h2::after {
	content: ''; display: block; width: 60px; height: 4px; margin: .9rem auto 0; border-radius: 4px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.section-header.is-dark h2::after { background: linear-gradient(90deg, var(--color-primary-mid), var(--color-accent)); }
/* gradient-text spans pick up the brand green->gold sweep for harmony */
.gradient-text { background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ── Cards (generic) ─────────────────────────────────────────────────────── */
.card {
	background: var(--color-white);
	border-radius: var(--r-xl);
	border: 1px solid var(--color-border);
	overflow: hidden;
	transition: all var(--tr-base);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }

.card__img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

.card__body { padding: var(--sp-lg); }

.card__meta {
	display: flex;
	align-items: center;
	gap: var(--sp-sm);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin-bottom: var(--sp-sm);
}

.card__tag {
	display: inline-block;
	padding: 0.2rem 0.625rem;
	background: var(--color-primary-light);
	color: var(--color-primary);
	font-size: var(--fs-xs);
	font-weight: 700;
	border-radius: var(--r-full);
}

.card__title {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: var(--sp-sm);
	line-height: 1.35;
}
.card__title a { color: inherit; }
.card__title a:hover { color: var(--color-primary); }

.card__excerpt {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	line-height: 1.6;
	margin-bottom: var(--sp-md);
}

.card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--sp-md);
	border-top: 1px solid var(--color-border);
}

.card__read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--color-primary);
}
.card__read-more:hover { gap: 0.625rem; color: var(--color-primary-mid); }

/* ── Hero Section ────────────────────────────────────────────────────────── */
.hero {
	position: relative;
	min-height: 88vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--color-dark);
}

.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.7;
}

.hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.7;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(10,104,71,.45) 0%,
		rgba(15,23,42,.55) 55%,
		rgba(15,23,42,.78) 100%
	);
}

/* Keep hero text readable over the more-visible video/image */
.hero h1 { text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.hero__sub { text-shadow: 0 1px 10px rgba(0,0,0,.5); }

.hero__content {
	position: relative;
	z-index: 1;
	padding-block: var(--sp-4xl);
}

.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-sm);
	padding: 0.375rem 1rem;
	background: rgba(16,185,129,.15);
	border: 1px solid rgba(16,185,129,.3);
	color: var(--color-primary-mid);
	font-size: var(--fs-sm);
	font-weight: 700;
	border-radius: var(--r-full);
	margin-bottom: var(--sp-xl);
}

.hero h1 {
	color: var(--color-white);
	font-size: clamp(var(--fs-3xl), 5vw, var(--fs-6xl));
	font-weight: 800;
	line-height: 1.15;
	margin-bottom: var(--sp-lg);
	max-width: 700px;
}

.hero h1 .highlight { color: var(--color-accent); }

.hero__sub {
	font-size: clamp(var(--fs-base), 2vw, var(--fs-xl));
	color: rgba(255,255,255,.75);
	max-width: 540px;
	margin-bottom: var(--sp-2xl);
}

.hero__ctas { display: flex; gap: var(--sp-md); flex-wrap: wrap; }

.hero__stats {
	display: flex;
	gap: var(--sp-2xl);
	margin-top: var(--sp-3xl);
	padding-top: var(--sp-2xl);
	border-top: 1px solid rgba(255,255,255,.1);
	flex-wrap: wrap;
}

.hero__stat-item { text-align: left; }
.hero__stat-number { display: block; font-size: var(--fs-3xl); font-weight: 800; color: var(--color-accent); }
.hero__stat-label  { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Quick Access Cards (stakeholder portals) ────────────────────────────── */
.quick-access-section { background: var(--color-bg); }

.quick-access-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }

.quick-access-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--sp-2xl) var(--sp-lg);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--r-xl);
	transition: all var(--tr-base);
	text-decoration: none;
	color: inherit;
}
.quick-access-card:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
	color: inherit;
}

.quick-access-card__icon {
	width: 64px; height: 64px;
	display: flex; align-items: center; justify-content: center;
	background: var(--color-primary-light);
	border-radius: var(--r-xl);
	font-size: 1.75rem;
	color: var(--color-primary);
	margin-bottom: var(--sp-lg);
	transition: all var(--tr-base);
}
.quick-access-card:hover .quick-access-card__icon {
	background: var(--color-primary);
	color: var(--color-white);
}

.quick-access-card__title {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: var(--sp-sm);
}
.quick-access-card__desc { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.5; }

/* ── Stats Bar ───────────────────────────────────────────────────────────── */
.stats-section {
	background: linear-gradient(135deg, var(--color-primary) 0%, #064e3b 100%);
	padding-block: var(--sp-3xl);
}

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-xl); }

.stat-item {
	text-align: center;
	padding: var(--sp-xl);
}

.stat-item__number {
	display: block;
	font-size: clamp(var(--fs-4xl), 4vw, var(--fs-6xl));
	font-weight: 800;
	color: var(--color-white);
	line-height: 1;
	margin-bottom: var(--sp-sm);
}

.stat-item__label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: rgba(255,255,255,.75);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ── Programs Section ────────────────────────────────────────────────────── */
.programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }

.program-card {
	background: var(--color-white);
	border-radius: var(--r-xl);
	overflow: hidden;
	border: 1px solid var(--color-border);
	transition: all var(--tr-base);
}
.program-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.program-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

.program-card__body { padding: var(--sp-lg); }
.program-card__badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background: var(--color-primary-light);
	color: var(--color-primary);
	font-size: var(--fs-xs);
	font-weight: 700;
	border-radius: var(--r-full);
	margin-bottom: var(--sp-md);
}

.program-card__title {
	font-size: var(--fs-xl);
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: var(--sp-sm);
}
.program-card__title a { color: inherit; }
.program-card__title a:hover { color: var(--color-primary); }

.program-card__desc { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--sp-lg); }

.program-card__meta {
	display: flex;
	gap: var(--sp-md);
	flex-wrap: wrap;
	padding-top: var(--sp-md);
	border-top: 1px solid var(--color-border);
}

.program-card__meta-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}
.program-card__meta-item i { color: var(--color-primary); }

/* ── Sectors Section ─────────────────────────────────────────────────────── */
.sectors-section { background: var(--color-bg-section); }
.sectors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }

.sector-card {
	display: flex;
	align-items: center;
	gap: var(--sp-lg);
	padding: var(--sp-lg);
	background: var(--color-white);
	border-radius: var(--r-lg);
	border: 1px solid var(--color-border);
	transition: all var(--tr-base);
}
.sector-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }

.sector-card__icon {
	width: 52px; height: 52px;
	display: flex; align-items: center; justify-content: center;
	background: var(--color-primary-light);
	border-radius: var(--r-lg);
	font-size: 1.4rem;
	color: var(--color-primary);
	flex-shrink: 0;
}

.sector-card__info {}
.sector-card__name { font-size: var(--fs-base); font-weight: 700; color: var(--color-text); }
.sector-card__count { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ── Partners Section ────────────────────────────────────────────────────── */
.partners-section { background: var(--color-dark); padding-block: var(--sp-3xl); }

.partners-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-lg);
	justify-content: center;
	align-items: center;
}

.partner-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-md) var(--sp-xl);
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: var(--r-lg);
	transition: all var(--tr-base);
}
.partner-logo:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }

.partner-logo img { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: .6; transition: opacity var(--tr-base); }
.partner-logo:hover img { opacity: 1; }

.partner-logo--text {
	color: rgba(255,255,255,.6);
	font-weight: 700;
	font-size: var(--fs-sm);
	white-space: nowrap;
}

/* ── News Section ────────────────────────────────────────────────────────── */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }

/* ── Notice Item ─────────────────────────────────────────────────────────── */
.notice-item {
	display: flex;
	gap: var(--sp-lg);
	align-items: flex-start;
	padding: var(--sp-lg);
	background: var(--color-white);
	border-radius: var(--r-lg);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-primary);
	transition: all var(--tr-fast);
}
.notice-item:hover { box-shadow: var(--shadow-md); }

.notice-item__icon {
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	background: var(--color-primary-light);
	border-radius: var(--r-md);
	color: var(--color-primary);
	font-size: var(--fs-lg);
	flex-shrink: 0;
}

.notice-item__body { flex: 1; min-width: 0; }
.notice-item__title { font-size: var(--fs-base); font-weight: 600; color: var(--color-text); margin-bottom: var(--sp-xs); line-height: 1.4; }
.notice-item__title a { color: inherit; }
.notice-item__title a:hover { color: var(--color-primary); }
.notice-item__meta { display: flex; gap: var(--sp-md); font-size: var(--fs-xs); color: var(--color-text-muted); flex-wrap: wrap; }
.notice-item__deadline { color: #dc2626; font-weight: 600; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer { background: var(--color-dark); }

.footer-columns {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--sp-3xl);
	padding-block: var(--sp-4xl);
}

.footer-brand {}
.footer-brand .site-logo { margin-bottom: var(--sp-lg); display: inline-flex; }
/* Show the real logo on a white chip so it's clear on the dark footer (no invert). */
.footer-brand .site-logo img {
	height: 64px; width: auto;
	background: #fff;
	padding: 10px 14px;
	border-radius: var(--r-lg);
	box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.footer-brand .site-logo__name { color: var(--color-white); }
.footer-brand .site-logo__tagline { color: rgba(255,255,255,.5); }

.footer-tagline {
	font-size: var(--fs-sm);
	color: rgba(255,255,255,.55);
	line-height: 1.7;
	margin-bottom: var(--sp-lg);
	max-width: 300px;
}

.footer-brand .social-links { display: flex; gap: var(--sp-sm); }
.footer-brand .social-links a {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	background: rgba(255,255,255,.08);
	border-radius: var(--r-md);
	color: rgba(255,255,255,.6);
	font-size: var(--fs-sm);
	transition: all var(--tr-fast);
}
.footer-brand .social-links a:hover { background: var(--color-primary); color: var(--color-white); }

.footer-col__title {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-white);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--sp-lg);
	padding-bottom: var(--sp-sm);
	border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer-links { display: flex; flex-direction: column; gap: var(--sp-sm); }
.footer-links a {
	font-size: var(--fs-sm);
	color: rgba(255,255,255,.55);
	transition: color var(--tr-fast);
}
.footer-links a:hover { color: var(--color-primary-mid); }

.footer-contact-list { display: flex; flex-direction: column; gap: var(--sp-md); }
.footer-contact-item {
	display: flex;
	gap: var(--sp-sm);
	font-size: var(--fs-sm);
	color: rgba(255,255,255,.55);
}
.footer-contact-item i { color: var(--color-primary-mid); margin-top: 0.2rem; flex-shrink: 0; }

.footer-bottom {
	border-top: 1px solid rgba(255,255,255,.08);
	padding-block: var(--sp-lg);
}

.footer-bottom .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-md);
}

.footer-copyright {
	font-size: var(--fs-xs);
	color: rgba(255,255,255,.4);
}

.footer-credits {
	font-size: var(--fs-xs);
	color: rgba(255,255,255,.55);
}
.footer-credits a,
.footer-copyright a { color: var(--color-primary-mid); font-weight: 600; }
.footer-credits a:hover,
.footer-copyright a:hover { color: var(--color-accent); }

/* ── Leader Card ─────────────────────────────────────────────────────────── */
.leader-card {
	background: var(--color-white);
	border-radius: var(--r-xl);
	overflow: hidden;
	border: 1px solid var(--color-border);
	text-align: center;
	transition: all var(--tr-base);
}
.leader-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.leader-card__img-wrap {
	aspect-ratio: 4/5;
	overflow: hidden;
	background: var(--color-bg-section);
}
.leader-card__img { width: 100%; height: 100%; object-fit: cover; }

.leader-card__body { padding: var(--sp-lg); }
.leader-card__name { font-size: var(--fs-lg); font-weight: 700; color: var(--color-text); }
.leader-card__title { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--sp-sm);
	font-size: var(--fs-sm);
	color: rgba(255,255,255,.55);
	flex-wrap: wrap;
}
.breadcrumb a { color: rgba(255,255,255,.7); }
.breadcrumb a:hover { color: var(--color-white); }
.breadcrumb .sep { opacity: .4; }
.breadcrumb .current { color: var(--color-primary-mid); font-weight: 600; }

/* ── Archive filter bar ──────────────────────────────────────────────────── */
.filter-bar {
	display: flex;
	gap: var(--sp-sm);
	flex-wrap: wrap;
	margin-bottom: var(--sp-2xl);
}
.filter-btn {
	padding: 0.375rem 1rem;
	font-size: var(--fs-sm);
	font-weight: 600;
	border-radius: var(--r-full);
	border: 1.5px solid var(--color-border);
	color: var(--color-text-muted);
	transition: all var(--tr-fast);
}
.filter-btn:hover,
.filter-btn.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

/* ── Contact card ────────────────────────────────────────────────────────── */
.contact-card {
	background: var(--color-white);
	border-radius: var(--r-xl);
	padding: var(--sp-xl);
	border: 1px solid var(--color-border);
	text-align: center;
	transition: all var(--tr-base);
}
.contact-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.contact-card__icon {
	width: 56px; height: 56px;
	display: flex; align-items: center; justify-content: center;
	background: var(--color-primary-light);
	border-radius: var(--r-xl);
	font-size: 1.4rem;
	color: var(--color-primary);
	margin: 0 auto var(--sp-lg);
}
.contact-card__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); font-weight: 700; margin-bottom: var(--sp-xs); }
.contact-card__value { font-size: var(--fs-lg); font-weight: 700; color: var(--color-text); }
.contact-card__value a { color: inherit; }
.contact-card__value a:hover { color: var(--color-primary); }

/* ── Contact form ────────────────────────────────────────────────────────── */
.contact-form-wrap {
	background: var(--color-white);
	border-radius: var(--r-xl);
	padding: var(--sp-2xl);
	box-shadow: var(--shadow-md);
}
.form-group { margin-bottom: var(--sp-lg); }
.form-group label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); margin-bottom: var(--sp-xs); }
.form-control {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1.5px solid var(--color-border);
	border-radius: var(--r-md);
	font-size: var(--fs-base);
	color: var(--color-text);
	background: var(--color-bg);
	transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.form-control:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
textarea.form-control { resize: vertical; min-height: 140px; }

/* ── Admin meta table ────────────────────────────────────────────────────── */
.navttc-meta-table td input[type="text"],
.navttc-meta-table td input[type="url"],
.navttc-meta-table td input[type="date"],
.navttc-meta-table td textarea,
.navttc-meta-table td select { width: 100%; max-width: 520px; }

/* ══════════════════════════════════════════════════════════════════════════
   Region-specific components
   (hero reuses .wing-hero - only region-unique pieces below)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Region color tokens ─────────────────────────────────────────────────── */
:root {
	--region-primary:   #DC2626;
	--region-secondary: #991b1b;
}

/* ── Ecosystem grid ──────────────────────────────────────────────────────── */
.region-ecosystem__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-lg);
}

.region-partner-card {
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: var(--r-xl);
	padding: var(--sp-xl);
	transition: all var(--tr-base);
	border-top: 4px solid var(--region-primary);
}
.region-partner-card:hover {
	background: rgba(255,255,255,.1);
	transform: translateY(-3px);
	border-top-color: color-mix(in srgb, var(--region-primary) 80%, white);
}

.region-partner-card__icon {
	width: 48px; height: 48px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.1);
	border-radius: var(--r-lg);
	font-size: 1.3rem;
	color: var(--color-accent);
	margin-bottom: var(--sp-lg);
}

.region-partner-card__name  { font-size: var(--fs-lg); font-weight: 800; color: var(--color-white); margin-bottom: var(--sp-xs); }
.region-partner-card__full  { font-size: var(--fs-xs); color: rgba(255,255,255,.5); margin-bottom: var(--sp-sm); text-transform: uppercase; letter-spacing: .04em; }
.region-partner-card__desc  { font-size: var(--fs-sm); color: rgba(255,255,255,.65); line-height: 1.6; margin-bottom: var(--sp-md); }
.region-partner-card__link  {
	display: inline-flex; align-items: center; gap: 0.375rem;
	font-size: var(--fs-xs); font-weight: 700; color: var(--color-accent);
	text-decoration: none; transition: gap var(--tr-fast);
}
.region-partner-card__link:hover { gap: 0.625rem; color: var(--color-accent); }

/* ── Institute stats bar ─────────────────────────────────────────────────── */
.region-institutes__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-lg);
}

.region-inst-stat {
	text-align: center;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--r-xl);
	padding: var(--sp-2xl) var(--sp-lg);
	border-bottom: 4px solid var(--region-primary);
	transition: all var(--tr-base);
}
.region-inst-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.region-inst-stat__number {
	display: block;
	font-size: clamp(var(--fs-4xl), 4vw, var(--fs-5xl));
	font-weight: 800;
	color: var(--region-primary);
	line-height: 1;
	margin-bottom: var(--sp-sm);
}

.region-inst-stat__label {
	display: block;
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* ── Contact section ─────────────────────────────────────────────────────── */
.region-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-3xl);
	align-items: start;
}

.region-contact__details { display: flex; flex-direction: column; gap: var(--sp-xl); }

.region-contact-item {
	display: flex;
	gap: var(--sp-md);
	align-items: flex-start;
}

.region-contact-item__icon {
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--region-primary) 10%, transparent);
	border-radius: var(--r-lg);
	color: var(--region-primary);
	font-size: 1.1rem;
	flex-shrink: 0;
}

.region-contact-item__label {
	display: block;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 2px;
}

.region-contact-item__value {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--color-text);
}

a.region-contact-item__value { color: var(--region-primary); }
a.region-contact-item__value:hover { color: var(--region-secondary); }

.region-contact__form {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--r-xl);
	padding: var(--sp-2xl);
	box-shadow: var(--shadow-md);
}

/* ══════════════════════════════════════════════════════════════════════════
   Training Programs Page
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.prog-hero {
	background: linear-gradient(135deg, #0F172A 0%, #1E293B 55%, #0B1220 100%);
	padding-block: var(--sp-4xl) var(--sp-3xl);
	text-align: center;
	position: relative;
	z-index: 30;
	overflow: visible;
}
.prog-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at top, rgba(37,99,235,.20) 0%, transparent 65%), radial-gradient(ellipse at bottom right, rgba(245,158,11,.12) 0%, transparent 60%);
	pointer-events: none;
}
.prog-hero .container { position: relative; z-index: 1; }
.prog-hero__inner { max-width: 760px; margin-inline: auto; }

.prog-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-sm);
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.2);
	color: var(--color-accent);
	font-size: var(--fs-sm);
	font-weight: 700;
	padding: 0.375rem 1rem;
	border-radius: var(--r-full);
	margin-bottom: var(--sp-xl);
}

.prog-hero__title {
	color: var(--color-white);
	font-size: clamp(var(--fs-4xl), 6vw, 4.5rem);
	font-weight: 900;
	line-height: 1.1;
	margin-bottom: var(--sp-lg);
}
.prog-hero__title-amp { color: var(--color-accent); }

.prog-hero__sub {
	color: rgba(255,255,255,.75);
	font-size: var(--fs-lg);
	line-height: 1.7;
	margin-bottom: var(--sp-2xl);
}

/* Search */
.prog-search { position: relative; max-width: 640px; margin-inline: auto; z-index: 60; }
.prog-search__wrap {
	display: flex;
	align-items: center;
	background: var(--color-white);
	border-radius: var(--r-xl);
	box-shadow: 0 8px 32px rgba(0,0,0,.25);
	overflow: hidden;
	padding-left: var(--sp-lg);
}
.prog-search__icon { color: var(--color-text-muted); flex-shrink: 0; }
.prog-search__input {
	flex: 1;
	border: none;
	outline: none;
	padding: 1rem var(--sp-md);
	font-size: var(--fs-base);
	background: transparent;
	color: var(--color-text);
}
.prog-search__btn {
	border-radius: 0;
	padding: 1rem 1.5rem;
	font-size: var(--fs-sm);
}

.prog-search__results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--color-white);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-xl);
	z-index: 999;
	overflow: hidden;
	max-height: 340px;
	overflow-y: auto;
}
.prog-search__results ul { list-style: none; margin: 0; padding: 0; }
.prog-search__result-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem var(--sp-lg);
	cursor: pointer;
	font-size: var(--fs-sm);
	border-bottom: 1px solid var(--color-border);
	transition: background var(--tr-fast);
}
.prog-search__result-item:hover { background: var(--color-primary-light); }
.prog-search__result-item mark { background: none; color: var(--color-primary); font-weight: 700; }
.prog-search__result-item span { font-size: var(--fs-xs); color: var(--color-text-muted); }
.prog-search__no-results { padding: var(--sp-xl); text-align: center; color: var(--color-text-muted); font-size: var(--fs-sm); }

/* ── Stats bar ────────────────────────────────────────────────────────────── */
.prog-stats-bar {
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--sp-xl);
	box-shadow: var(--shadow-sm);
}
.prog-stats-bar__grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.prog-stats-bar__item { padding: var(--sp-md); border-right: 1px solid var(--color-border); }
.prog-stats-bar__item:last-child { border-right: none; }
.prog-stats-bar__num { display: block; font-size: var(--fs-3xl); font-weight: 900; color: var(--color-primary); }
.prog-stats-bar__label { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }

/* ── Reports archive filter chips ─────────────────────────────────────────── */
.rp-filter { display: flex; flex-wrap: wrap; gap: var(--sp-sm); justify-content: center; }
.rp-filter__btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .55rem 1.15rem; border-radius: var(--r-full);
	border: 1px solid var(--color-border); background: var(--color-white);
	font-size: var(--fs-sm); font-weight: 700; color: var(--color-text);
	cursor: pointer; transition: all var(--tr-fast);
}
.rp-filter__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.rp-filter__btn span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: var(--r-full);
	background: var(--color-bg-section); color: var(--color-text-muted);
	font-size: var(--fs-xs); font-weight: 800;
}
.rp-filter__btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.rp-filter__btn.is-active span { background: rgba(255,255,255,.25); color: #fff; }
.rp-empty { text-align: center; color: var(--color-text-muted); font-size: var(--fs-lg); padding-block: var(--sp-2xl); }

/* ── Flagship cards ───────────────────────────────────────────────────────── */
.prog-flagship__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }

.prog-flagship-card {
	border-radius: 1.5rem;
	padding: 2rem 1.85rem;
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.14);
	box-shadow: 0 16px 38px -20px color-mix(in srgb, var(--c, #0A6847) 60%, rgba(2,6,23,.5));
	transition: transform .35s ease, box-shadow .35s ease;
}
/* top sheen + bottom shade for depth */
.prog-flagship-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 70% at 100% 0%, rgba(255,255,255,.22), transparent 55%),
		linear-gradient(to bottom, transparent 55%, rgba(0,0,0,.22));
	pointer-events: none;
}
/* glossy diagonal light sweep on hover */
.prog-flagship-card::after {
	content: ''; position: absolute; top: 0; left: -70%; width: 55%; height: 100%; z-index: 1;
	background: linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent);
	transform: skewX(-18deg); pointer-events: none; transition: left .6s ease;
}
.prog-flagship-card:hover::after { left: 130%; }
.prog-flagship-card:hover { transform: translateY(-8px); box-shadow: 0 32px 60px -22px color-mix(in srgb, var(--c, #0A6847) 70%, rgba(2,6,23,.55)); }
.prog-flagship-card > *:not(.prog-flagship-card__status) { position: relative; z-index: 2; }

.prog-flagship-card__badge {
	display: inline-block;
	padding: 3px 10px;
	background: rgba(255,255,255,.2);
	color: rgba(255,255,255,.9);
	font-size: var(--fs-xs);
	font-weight: 700;
	border-radius: var(--r-full);
	text-transform: uppercase;
	letter-spacing: .05em;
	width: fit-content;
}

.prog-flagship-card__title {
	color: var(--color-white);
	font-size: var(--fs-2xl);
	font-weight: 800;
	line-height: 1.25;
}

.prog-flagship-card__sub {
	color: rgba(255,255,255,.8);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.prog-flagship-card__features {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--sp-sm);
	flex: 1;
}
.prog-flagship-card__features li {
	display: flex;
	align-items: center;
	gap: var(--sp-sm);
	font-size: var(--fs-sm);
	color: rgba(255,255,255,.85);
}
.prog-flagship-card__features i { color: rgba(255,255,255,.7); flex-shrink: 0; }

.prog-flagship-card__cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: 0.7rem 1.4rem;
	background: #fff;
	color: var(--c, var(--color-primary)) !important;
	font-size: var(--fs-sm);
	font-weight: 800;
	border-radius: var(--r-full);
	box-shadow: 0 10px 22px -8px rgba(0,0,0,.35);
	transition: gap .2s ease, transform .2s ease;
	width: fit-content;
	margin-top: auto;
}
.prog-flagship-card__cta:hover { gap: .85rem; transform: translateY(-2px); color: var(--c, var(--color-primary)) !important; }

/* ── Sector accordion ─────────────────────────────────────────────────────── */
.prog-sectors__grid { display: flex; flex-direction: column; gap: var(--sp-md); }

.prog-sector-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--r-xl);
	overflow: hidden;
	transition: box-shadow var(--tr-fast);
}
.prog-sector-card:hover { box-shadow: var(--shadow-md); }
.prog-sector-card.is-open { box-shadow: var(--shadow-lg); }

.prog-sector-card__header {
	display: flex;
	align-items: center;
	gap: var(--sp-lg);
	padding: var(--sp-lg) var(--sp-xl);
	cursor: pointer;
	user-select: none;
}

.prog-sector-card__icon {
	width: 52px; height: 52px;
	display: flex; align-items: center; justify-content: center;
	border-radius: var(--r-lg);
	font-size: 1.4rem;
	flex-shrink: 0;
}

.prog-sector-card__info { flex: 1; min-width: 0; }

.prog-sector-card__count {
	display: inline-block;
	padding: 2px 10px;
	font-size: var(--fs-xs);
	font-weight: 700;
	border-radius: var(--r-full);
	margin-bottom: var(--sp-xs);
}

.prog-sector-card__name { font-size: var(--fs-xl); font-weight: 700; color: var(--color-text); }
.prog-sector-card__desc { font-size: var(--fs-sm); color: var(--color-text-muted); }

.prog-sector-card__toggle {
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	background: var(--color-bg-section);
	border-radius: var(--r-full);
	color: var(--color-text-muted);
	flex-shrink: 0;
	transition: all var(--tr-base);
}
.prog-sector-card.is-open .prog-sector-card__toggle {
	background: var(--color-primary);
	color: var(--color-white);
	transform: rotate(180deg);
}

/* Trades panel */
.prog-sector-card__trades {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--tr-slow);
}
.prog-sector-card.is-open .prog-sector-card__trades {
	max-height: 1000px;
}

.prog-trades-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-sm);
	padding: var(--sp-lg) var(--sp-xl);
	border-top: 1px solid var(--color-border);
}

.prog-trade-item {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	padding: var(--sp-xs) 0;
	display: flex;
	align-items: center;
	gap: var(--sp-sm);
}
.prog-trade-item::before {
	content: '';
	width: 6px; height: 6px;
	background: var(--color-primary-mid);
	border-radius: var(--r-full);
	flex-shrink: 0;
}
.prog-trade-item.is-hidden { display: none; }

.prog-sector-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-xs);
	font-size: var(--fs-sm);
	font-weight: 700;
	padding: 0 var(--sp-xl) var(--sp-lg);
	transition: gap var(--tr-fast);
}
.prog-sector-card__link:hover { gap: var(--sp-sm); }

/* ── NVQF Framework ───────────────────────────────────────────────────────── */
.prog-nvqf__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-xl); }

.prog-nvqf-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--r-xl);
	border-top: 4px solid;
	padding: var(--sp-xl);
	transition: all var(--tr-base);
}
.prog-nvqf-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.prog-nvqf-card__range {
	font-size: var(--fs-4xl);
	font-weight: 900;
	line-height: 1;
	margin-bottom: var(--sp-sm);
}

.prog-nvqf-card__name {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: var(--sp-sm);
}

.prog-nvqf-card__desc {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	line-height: 1.6;
	margin-bottom: var(--sp-lg);
}

.prog-nvqf-card__meta {
	display: flex;
	flex-direction: column;
	gap: var(--sp-sm);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	padding-top: var(--sp-md);
	border-top: 1px solid var(--color-border);
}
.prog-nvqf-card__meta i { color: var(--color-primary); margin-right: 4px; }

/* ── Resources grid ───────────────────────────────────────────────────────── */
.prog-resources__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-xl); }

.prog-resource-card {
	border-radius: var(--r-xl);
	padding: var(--sp-2xl);
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
	transition: transform var(--tr-base);
}
.prog-resource-card:hover { transform: translateY(-4px); }

.prog-resource-card__icon {
	width: 56px; height: 56px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.15);
	border-radius: var(--r-xl);
	font-size: 1.5rem;
	color: var(--color-white);
}

.prog-resource-card__title { font-size: var(--fs-lg); font-weight: 800; color: var(--color-white); }
.prog-resource-card__desc  { font-size: var(--fs-sm); color: rgba(255,255,255,.75); flex: 1; }

.prog-resource-card__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-sm);
	padding: 0.5rem 1rem;
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.25);
	color: var(--color-white) !important;
	font-size: var(--fs-sm);
	font-weight: 700;
	border-radius: var(--r-lg);
	transition: background var(--tr-fast);
	width: fit-content;
}
.prog-resource-card__btn:hover { background: rgba(255,255,255,.25); color: var(--color-white) !important; }

/* ── CTA ──────────────────────────────────────────────────────────────────── */
.prog-cta {
	background: linear-gradient(135deg, #064e3b 0%, var(--color-dark) 100%);
}
.prog-cta__headline {
	color: var(--color-white);
	font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
	font-weight: 800;
	margin-bottom: var(--sp-md);
}
.prog-cta__sub {
	color: rgba(255,255,255,.7);
	max-width: 600px;
	margin-inline: auto;
	margin-bottom: var(--sp-2xl);
}
.prog-cta__btns { display: flex; gap: var(--sp-md); justify-content: center; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════
   International Collaboration Components
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Sub-nav ─────────────────────────────────────────────────────────────── */
.intl-subnav {
	position: sticky;
	top: calc(var(--topbar-h) + var(--header-h));
	z-index: 800;
	background: var(--color-dark);
	border-bottom: 1px solid rgba(255,255,255,.1);
}
.admin-bar .intl-subnav { top: calc(var(--topbar-h) + var(--header-h) + 32px); }
@media (max-width: 782px) { .admin-bar .intl-subnav { top: calc(var(--topbar-h) + var(--header-h) + 46px); } }
.intl-subnav .container { display: flex; align-items: center; gap: 0; }
.intl-subnav__link {
	display: flex;
	align-items: center;
	padding: 0.875rem 1.25rem;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: rgba(255,255,255,.55);
	border-bottom: 2px solid transparent;
	transition: all var(--tr-fast);
	white-space: nowrap;
}
.intl-subnav__link:hover,
.intl-subnav__link.is-active { color: var(--color-white); border-bottom-color: var(--intl-primary, var(--color-accent)); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.intl-hero {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-block: var(--sp-4xl);
}
.intl-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .12;
}
.intl-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 100%);
}
.intl-hero .container { position: relative; z-index: 1; }

.intl-hero__inner {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: var(--sp-3xl);
	align-items: center;
}

.intl-back-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-sm);
	color: rgba(255,255,255,.55);
	font-size: var(--fs-sm);
	margin-bottom: var(--sp-lg);
	transition: color var(--tr-fast);
}
.intl-back-link:hover { color: var(--color-white); }

.intl-hero__flags {
	display: flex;
	align-items: center;
	gap: var(--sp-md);
	margin-bottom: var(--sp-lg);
}
.intl-flag { height: 32px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.intl-flag-sep { color: rgba(255,255,255,.4); font-size: var(--fs-sm); }

.intl-hero__title {
	color: var(--color-white);
	font-size: clamp(var(--fs-2xl), 4vw, var(--fs-5xl));
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: var(--sp-lg);
}

.intl-hero__sub {
	color: rgba(255,255,255,.7);
	font-size: var(--fs-lg);
	line-height: 1.7;
	margin-bottom: var(--sp-2xl);
	max-width: 560px;
}

.intl-hero__stats {
	display: flex;
	gap: var(--sp-2xl);
	flex-wrap: wrap;
	padding-top: var(--sp-xl);
	border-top: 1px solid rgba(255,255,255,.15);
}
.intl-hero__stat { text-align: center; }
.intl-hero__stat-value {
	display: block;
	font-size: var(--fs-2xl);
	font-weight: 800;
	color: var(--color-accent);
	margin-bottom: 2px;
}
.intl-hero__stat-label {
	display: block;
	font-size: var(--fs-xs);
	color: rgba(255,255,255,.55);
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* Focus areas panel */
.intl-hero__focus {
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.15);
	border-radius: var(--r-xl);
	padding: var(--sp-xl);
	backdrop-filter: blur(8px);
}
.intl-hero__focus-title {
	color: var(--color-accent);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: var(--sp-lg);
}
.intl-hero__focus-list { display: flex; flex-direction: column; gap: var(--sp-sm); }
.intl-hero__focus-item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-sm);
	font-size: var(--fs-sm);
	color: rgba(255,255,255,.8);
}
.intl-hero__focus-item i { color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }

/* ── Highlights ───────────────────────────────────────────────────────────── */
.intl-highlights__inner {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: var(--sp-3xl);
	align-items: start;
}
.intl-highlights__text h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-md); }
.intl-highlights__text p  { color: var(--color-text-muted); line-height: 1.8; }

.intl-highlights__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-md);
}
.intl-highlight-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--r-xl);
	padding: var(--sp-xl);
	text-align: center;
	transition: all var(--tr-base);
	border-top: 4px solid var(--intl-primary, var(--color-primary));
}
.intl-highlight-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.intl-highlight-card__number {
	display: block;
	font-size: var(--fs-2xl);
	font-weight: 800;
	color: var(--intl-primary, var(--color-primary));
	margin-bottom: var(--sp-xs);
}
.intl-highlight-card__label {
	display: block;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* ── MOUs ─────────────────────────────────────────────────────────────────── */
.intl-mous__list { display: flex; flex-direction: column; gap: var(--sp-md); }

.intl-mou-item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-lg);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--r-xl);
	padding: var(--sp-xl);
	transition: all var(--tr-fast);
	border-left: 4px solid var(--intl-primary, var(--color-primary));
}
.intl-mou-item:hover { box-shadow: var(--shadow-md); }

.intl-mou-item__icon {
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--intl-primary, var(--color-primary)) 10%, transparent);
	border-radius: var(--r-md);
	color: var(--intl-primary, var(--color-primary));
	font-size: 1.2rem;
	flex-shrink: 0;
}

.intl-mou-item__body { flex: 1; min-width: 0; }
.intl-mou-item__title { font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--sp-xs); }
.intl-mou-item__desc  { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--sp-sm); }
.intl-mou-item__meta  { display: flex; gap: var(--sp-md); flex-wrap: wrap; align-items: center; font-size: var(--fs-xs); color: var(--color-text-muted); }

.intl-mou-status {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--r-full);
	font-size: var(--fs-xs);
	font-weight: 700;
}
.intl-mou-status.is-active   { background: #dcfce7; color: #15803d; }
.intl-mou-status.is-inactive { background: var(--color-bg-section); color: var(--color-text-muted); }

.intl-mou-tag {
	display: inline-block;
	padding: 2px 8px;
	background: color-mix(in srgb, var(--intl-primary, var(--color-primary)) 10%, transparent);
	color: var(--intl-primary, var(--color-primary));
	border-radius: var(--r-full);
	font-size: var(--fs-xs);
	font-weight: 600;
}

.intl-mou-item__action { flex-shrink: 0; }

/* ── Projects ─────────────────────────────────────────────────────────────── */
.intl-projects__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-xl);
}

.intl-project-card {
	display: block;
	color: inherit;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--r-xl);
	overflow: hidden;
	transition: all var(--tr-base);
}
.intl-project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.intl-project-card__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--sp-md); font-size: var(--fs-sm); font-weight: 600; color: var(--project-color, var(--color-primary)); transition: gap var(--tr-fast); }
.intl-project-card:hover .intl-project-card__more { gap: .7rem; }

.intl-project-card__header {
	position: relative;
	height: 120px;
	display: flex;
	align-items: flex-end;
	padding: var(--sp-md);
	opacity: .9;
}
.intl-project-card__icon {
	width: 44px; height: 44px;
	background: rgba(255,255,255,.2);
	border-radius: var(--r-lg);
	display: flex; align-items: center; justify-content: center;
	color: rgba(255,255,255,.8);
	font-size: 1.2rem;
}

.intl-project-status {
	position: absolute;
	top: var(--sp-md); right: var(--sp-md);
	font-size: var(--fs-xs);
	font-weight: 700;
	padding: 3px 10px;
	border-radius: var(--r-full);
}
.intl-project-status.is-ongoing   { background: rgba(255,255,255,.2); color: #fff; }
.intl-project-status.is-completed { background: rgba(0,0,0,.3); color: rgba(255,255,255,.7); }

.intl-project-card__body { padding: var(--sp-lg); }
.intl-project-card__title { font-size: var(--fs-base); font-weight: 700; color: var(--color-text); margin-bottom: var(--sp-sm); }
.intl-project-card__desc  { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--sp-md); line-height: 1.6; }
.intl-project-card__footer {
	display: flex;
	gap: var(--sp-md);
	flex-wrap: wrap;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	padding-top: var(--sp-sm);
	border-top: 1px solid var(--color-border);
}
.intl-project-card__footer i { color: var(--intl-primary, var(--color-primary)); }

/* ── International Project - detail page ───────────────────────────────────── */
.iproj-hero { color: #fff; padding: 3.5rem 0; }
.iproj-hero .breadcrumb--light a, .iproj-hero .breadcrumb--light .current, .iproj-hero .breadcrumb--light .sep { color: rgba(255,255,255,.85); }
.iproj-hero__icon { width: 3.5rem; height: 3.5rem; border-radius: var(--r-lg); background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 1rem 0 .75rem; }
.iproj-hero__status { display: inline-block; margin-left: .75rem; vertical-align: middle; padding: .25rem .85rem; border-radius: var(--r-full); background: rgba(255,255,255,.2); font-size: var(--fs-xs); font-weight: 700; }
.iproj-hero h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; color: #fff; margin: 0 0 .5rem; }
.iproj-hero__country { color: rgba(255,255,255,.85); font-weight: 500; margin: 0 0 1.25rem; }
.iproj-hero__meta { display: flex; flex-wrap: wrap; gap: .75rem; }
.iproj-hero__meta span { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem 1rem; border-radius: var(--r-full); background: rgba(255,255,255,.15); font-size: var(--fs-sm); }
.iproj-body { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-2xl); align-items: start; }
.iproj-main .entry-content { line-height: 1.8; color: var(--color-text-muted); }
.iproj-h { font-size: var(--fs-2xl); font-weight: 800; color: var(--color-text); margin: var(--sp-2xl) 0 var(--sp-md); }
.iproj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-sm); }
.iproj-list li { display: flex; align-items: flex-start; gap: .6rem; color: var(--color-text); }
.iproj-facts { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-xl); box-shadow: var(--shadow-sm); position: sticky; top: 100px; }
.iproj-facts h3 { font-size: var(--fs-lg); font-weight: 800; margin: 0 0 var(--sp-md); }
.iproj-facts dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 0 0 var(--sp-lg); font-size: var(--fs-sm); }
.iproj-facts dt { color: var(--color-text-muted); font-weight: 600; }
.iproj-facts dd { margin: 0; font-weight: 600; color: var(--color-text); text-align: right; }
.iproj-facts .btn { width: 100%; justify-content: center; margin-top: .5rem; }
.iproj-facts .btn-primary { color: #fff !important; border: none; }
@media (max-width: 900px) { .iproj-body { grid-template-columns: 1fr; } .iproj-facts { position: static; } }

/* ── Partners ─────────────────────────────────────────────────────────────── */
.intl-partners__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-lg);
	margin-bottom: var(--sp-xl);
}

.intl-partner-card {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: var(--r-xl);
	padding: var(--sp-xl);
	transition: all var(--tr-base);
}
.intl-partner-card:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }

.intl-partner-card__acronym {
	font-size: var(--fs-2xl);
	font-weight: 900;
	color: var(--color-accent);
	margin-bottom: var(--sp-md);
	line-height: 1;
}
.intl-partner-card__name  { font-size: var(--fs-sm); font-weight: 700; color: var(--color-white); margin-bottom: var(--sp-xs); }
.intl-partner-card__desc  { font-size: var(--fs-xs); color: rgba(255,255,255,.55); line-height: 1.6; margin-bottom: var(--sp-md); }
.intl-partner-card__link  {
	display: inline-flex; align-items: center; gap: 0.375rem;
	font-size: var(--fs-xs); font-weight: 700; color: var(--color-accent);
	transition: gap var(--tr-fast);
}
.intl-partner-card__link:hover { gap: 0.625rem; color: var(--color-accent); }

/* Embassy strip */
.intl-embassy-strip {
	display: flex;
	align-items: center;
	gap: var(--sp-lg);
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: var(--r-xl);
	padding: var(--sp-xl) var(--sp-2xl);
	flex-wrap: wrap;
}
.intl-embassy-strip__flag { flex-shrink: 0; }
.intl-embassy-strip__info { flex: 1; min-width: 200px; }
.intl-embassy-strip__name { color: var(--color-white); font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-xs); }
.intl-embassy-strip__desc { color: rgba(255,255,255,.6); font-size: var(--fs-sm); margin-bottom: var(--sp-sm); }
.intl-embassy-strip__meta {
	display: flex; gap: var(--sp-lg); flex-wrap: wrap;
	font-size: var(--fs-xs); color: rgba(255,255,255,.5);
}
.intl-embassy-strip__meta i { color: var(--color-accent); }

/* Clickable trade item in sector accordion */
.prog-trade-item--link { color: var(--color-primary); font-weight: 600; text-decoration: none; transition: gap var(--tr-fast); }
.prog-trade-item--link:hover { color: var(--color-primary-mid); }

/* ══════════════════════════════════════════════════════════════════════════
   Course card (archives, sector pages, students explorer)
   ══════════════════════════════════════════════════════════════════════════ */
.courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }

.course-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--r-xl);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: all var(--tr-base);
	height: 100%;
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.course-card__head {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--sp-xl);
	min-height: 150px;
	padding: var(--sp-lg);
	color: #fff;
}
.course-card__head:hover { color: #fff; }
.course-card__head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); }
.course-card__level {
	background: rgba(255,255,255,.2); color: #fff;
	font-size: var(--fs-xs); font-weight: 700; padding: 3px 11px; border-radius: var(--r-full);
}
.course-card__dur { display: inline-flex; align-items: center; gap: .35rem; color: rgba(255,255,255,.9); font-size: var(--fs-sm); font-weight: 500; }
.course-card__head-main { margin-top: auto; }
.course-card__title { font-size: var(--fs-xl); font-weight: 800; line-height: 1.2; margin: 0 0 2px; color: #fff; }
.course-card__sector { font-size: var(--fs-sm); font-weight: 500; color: rgba(255,255,255,.85); }
.course-card__body { padding: var(--sp-lg); display: flex; flex-direction: column; flex: 1; gap: var(--sp-md); }
.course-card__excerpt { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.6; margin: 0; flex: 1; }
.course-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.course-card__tags span { font-size: var(--fs-xs); font-weight: 600; color: var(--color-primary); background: var(--color-primary-light); padding: 3px 10px; border-radius: var(--r-full); }
.course-card__actions { display: flex; gap: var(--sp-sm); margin-top: auto; }
.course-card__btn { flex: 1; text-align: center; font-size: var(--fs-sm); font-weight: 700; padding: .6rem 1rem; border-radius: var(--r-md); transition: all var(--tr-fast); }
.course-card__btn--primary { background: var(--color-primary); color: #fff !important; }
.course-card__btn--primary:hover { background: var(--color-primary-mid); color: #fff !important; }
.course-card__btn--ghost { border: 1.5px solid var(--color-border); color: var(--color-text) !important; }
.course-card__btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Course detail page
   ══════════════════════════════════════════════════════════════════════════ */
.course-hero { padding-block: var(--sp-3xl); color: #fff; }
.course-hero__grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-3xl); align-items: center; }
.course-hero .breadcrumb { margin-bottom: var(--sp-md); }
.course-hero__badges { display: flex; gap: var(--sp-sm); flex-wrap: wrap; margin-bottom: var(--sp-md); }
.course-hero__badge { background: rgba(255,255,255,.2); color: #fff; font-size: var(--fs-xs); font-weight: 700; padding: 4px 12px; border-radius: var(--r-full); }
.course-hero__badge--accent { background: var(--color-accent); color: var(--color-dark); }
.course-hero__title { color: #fff; font-size: clamp(var(--fs-3xl), 4vw, var(--fs-5xl)); font-weight: 800; line-height: 1.15; margin-bottom: var(--sp-md); }
.course-hero__sub { color: rgba(255,255,255,.85); font-size: var(--fs-lg); line-height: 1.6; margin-bottom: var(--sp-lg); max-width: 600px; }
.course-hero__meta { display: flex; gap: var(--sp-lg); flex-wrap: wrap; margin-bottom: var(--sp-xl); font-size: var(--fs-sm); color: rgba(255,255,255,.9); }
.course-hero__meta i { margin-right: 4px; }
.course-hero__ctas { display: flex; gap: var(--sp-md); flex-wrap: wrap; }
.course-hero__facts { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-xl); padding: var(--sp-xl); backdrop-filter: blur(8px); }
.course-hero__facts-title { color: #fff; font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--sp-md); }
.course-hero__facts ul { display: flex; flex-direction: column; gap: var(--sp-sm); }
.course-hero__facts li { display: flex; align-items: flex-start; gap: var(--sp-sm); font-size: var(--fs-sm); color: rgba(255,255,255,.9); }
.course-hero__facts li i { color: var(--color-accent-light); margin-top: 3px; flex-shrink: 0; }

.course-subnav { position: sticky; top: calc(var(--topbar-h) + var(--header-h)); z-index: 800; background: var(--color-white); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.admin-bar .course-subnav { top: calc(var(--topbar-h) + var(--header-h) + 32px); }
@media (max-width: 782px) { .admin-bar .course-subnav { top: calc(var(--topbar-h) + var(--header-h) + 46px); } }
.course-subnav .container { display: flex; gap: 0; overflow-x: auto; }
.course-subnav__link { padding: 0.875rem 1.25rem; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.course-subnav__link:hover, .course-subnav__link.is-active { color: var(--course-primary, var(--color-primary)); border-bottom-color: var(--course-primary, var(--color-primary)); }
/* Offset anchor jumps so the target heading clears the sticky header + subnav. */
.course-page section[id] { scroll-margin-top: calc(var(--topbar-h) + var(--header-h) + 66px); }

.course-intro__grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-3xl); align-items: start; }
.course-intro__subhead { font-size: var(--fs-xl); font-weight: 700; margin: var(--sp-2xl) 0 var(--sp-lg); }
.course-learn-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); }
.course-learn-list li { display: flex; align-items: flex-start; gap: var(--sp-sm); font-size: var(--fs-sm); color: var(--color-text); }
.course-learn-list li i { color: var(--color-primary); margin-top: 3px; flex-shrink: 0; }
.course-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.course-why-card { display: flex; gap: var(--sp-md); padding: var(--sp-lg); background: var(--color-bg-light); border-radius: var(--r-lg); }
.course-why-card__icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--course-primary,var(--color-primary)) 12%, transparent); color: var(--course-primary, var(--color-primary)); border-radius: var(--r-md); }
.course-why-card h4 { font-size: var(--fs-base); margin-bottom: 2px; }
.course-why-card p { font-size: var(--fs-sm); color: var(--color-text-muted); }

.course-detail-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-xl); margin-bottom: var(--sp-lg); }
.course-detail-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-md); }
.course-detail-list li { display: flex; justify-content: space-between; gap: var(--sp-md); padding: var(--sp-sm) 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.course-detail-list li:last-child { border-bottom: none; }
.course-detail-list span { color: var(--color-text-muted); }
.course-fee { color: var(--color-primary); }
.course-apply-card { border-radius: var(--r-xl); padding: var(--sp-xl); color: #fff; }
.course-apply-card h4 { color: #fff; font-size: var(--fs-lg); margin-bottom: var(--sp-sm); }
.course-apply-card p { color: rgba(255,255,255,.8); font-size: var(--fs-sm); margin-bottom: var(--sp-lg); }

.course-modules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-xl); }
.course-module-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); overflow: hidden; }
.course-module-card__head { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: var(--sp-lg); color: #fff; }
.course-module-card__num { display: none; }
.course-module-card__head h3 { color: #fff; font-size: var(--fs-lg); }
.course-module-card__weeks { display: inline-block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,.25); padding: .25rem .8rem; border-radius: 999px; }
.course-module-card__topics { padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-sm); }
.course-module-card__topics li { position: relative; padding-left: var(--sp-lg); font-size: var(--fs-sm); color: var(--color-text-muted); }
.course-module-card__topics li::before { content: '\2022'; position: absolute; left: var(--sp-sm); color: var(--color-primary); }

.course-eligibility__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2xl); }
.course-elig-item { display: flex; gap: var(--sp-md); margin-bottom: var(--sp-lg); }
.course-elig-item__check { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #dcfce7; color: #15803d; border-radius: var(--r-full); }
.course-elig-item h4 { font-size: var(--fs-base); margin-bottom: 2px; }
.course-elig-item p { font-size: var(--fs-sm); color: var(--color-text-muted); }
.course-docs-card { background: var(--color-dark); color: #fff; border-radius: var(--r-xl); padding: var(--sp-xl); }
.course-docs-card h3 { color: #fff; font-size: var(--fs-base); margin-bottom: var(--sp-md); }
.course-docs-card__sel { margin-top: var(--sp-xl); }
.course-docs-list li { display: flex; align-items: center; gap: var(--sp-sm); font-size: var(--fs-sm); color: rgba(255,255,255,.85); padding: var(--sp-xs) 0; }
.course-docs-list li i { color: var(--color-accent); }
.course-selection-list { display: flex; flex-direction: column; gap: var(--sp-sm); }
.course-selection-list li { display: flex; align-items: center; gap: var(--sp-sm); font-size: var(--fs-sm); color: rgba(255,255,255,.85); }
.course-selection-num { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--color-accent); color: var(--color-dark); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; }

.course-career__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-lg); }
.course-career-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-xl); text-align: center; transition: all var(--tr-base); }
.course-career-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.course-career-card__icon { width: 48px; height: 48px; margin: 0 auto var(--sp-md); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--course-primary,var(--color-primary)) 12%, transparent); color: var(--course-primary, var(--color-primary)); border-radius: var(--r-lg); font-size: 1.2rem; }
.course-career-card h4 { font-size: var(--fs-base); margin-bottom: var(--sp-xs); }
.course-career-card p { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--sp-md); }
.course-career-card__salary { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--color-primary); }
.course-graduates { margin-top: var(--sp-2xl); text-align: center; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-xl); }
.course-graduates h3 { font-size: var(--fs-base); color: var(--color-text-muted); margin-bottom: var(--sp-lg); }
.course-graduates__logos { display: flex; flex-wrap: wrap; gap: var(--sp-xl); justify-content: center; }
.course-graduate-logo { font-weight: 800; font-size: var(--fs-lg); color: var(--color-text-light); }

.course-video__frame { position: relative; max-width: 860px; margin: 0 auto; aspect-ratio: 16/9; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-xl); background: var(--color-dark); display: flex; align-items: center; justify-content: center; }
.course-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.course-brochure { color: #fff; padding-block: var(--sp-3xl); }
.course-brochure__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2xl); flex-wrap: wrap; }
.course-brochure h2 { color: #fff; margin-bottom: var(--sp-md); }
.course-brochure p { color: rgba(255,255,255,.8); max-width: 520px; margin-bottom: var(--sp-lg); }
.course-brochure__btns { display: flex; gap: var(--sp-md); flex-wrap: wrap; }
.course-brochure__icon { font-size: 6rem; color: rgba(255,255,255,.85); }

.course-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }
.course-related-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); overflow: hidden; display: block; transition: all var(--tr-base); }
.course-related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.course-related-card__head { padding: var(--sp-lg); color: #fff; }
.course-related-card__head h4 { color: #fff; font-size: var(--fs-lg); margin-bottom: 2px; }
.course-related-card__head span { font-size: var(--fs-xs); opacity: .85; }
.course-related-card__body { padding: var(--sp-lg); }
.course-related-card__body p { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--sp-md); }
.course-related-card__link { font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary); display: inline-flex; align-items: center; gap: 0.375rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Students page
   ══════════════════════════════════════════════════════════════════════════ */
.stu-hero { background: linear-gradient(135deg, #111827 0%, #1E293B 55%, #0B1220 100%); padding-block: var(--sp-4xl); text-align: center; position: relative; overflow: hidden; }
.stu-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(59,130,246,.22) 0%, transparent 70%), radial-gradient(28rem 18rem at 85% 100%, rgba(245,158,11,.12), transparent 70%); }
.stu-hero .container { position: relative; z-index: 1; }
.stu-hero__inner { max-width: 760px; margin-inline: auto; }
.stu-hero__badge { display: inline-flex; align-items: center; gap: var(--sp-sm); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: var(--color-accent); font-size: var(--fs-sm); font-weight: 700; padding: 0.375rem 1rem; border-radius: var(--r-full); margin-bottom: var(--sp-xl); }
.stu-hero__title { color: #fff; font-size: clamp(var(--fs-3xl), 5vw, 3.5rem); font-weight: 900; line-height: 1.15; margin-bottom: var(--sp-lg); }
.stu-hero__highlight { display: block; color: var(--color-accent); }
.stu-hero__sub { color: rgba(255,255,255,.8); font-size: var(--fs-lg); line-height: 1.7; margin-bottom: var(--sp-2xl); }
.stu-hero__ctas { display: flex; gap: var(--sp-md); justify-content: center; flex-wrap: wrap; }

.stu-benefits__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-xl); }
.stu-benefit-card { text-align: center; padding: var(--sp-xl); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); transition: all var(--tr-base); }
.stu-benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.stu-benefit-card__icon { width: 64px; height: 64px; margin: 0 auto var(--sp-lg); display: flex; align-items: center; justify-content: center; border-radius: var(--r-xl); font-size: 1.6rem; }
.stu-benefit-card__title { font-size: var(--fs-lg); margin-bottom: var(--sp-sm); }
.stu-benefit-card__desc { font-size: var(--fs-sm); color: var(--color-text-muted); }

.stu-courses__filter { display: flex; flex-wrap: wrap; gap: var(--sp-sm); justify-content: center; margin-bottom: var(--sp-2xl); }
.stu-courses__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.stu-filter-btn { padding: 0.5rem 1.1rem; font-size: var(--fs-sm); font-weight: 600; border-radius: var(--r-full); border: 1.5px solid var(--color-border); background: var(--color-white); color: var(--color-text-muted); cursor: pointer; transition: all var(--tr-fast); }
.stu-filter-btn:hover, .stu-filter-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.stu-eligibility__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2xl); align-items: start; }
.stu-eligibility__list { display: flex; flex-direction: column; gap: var(--sp-md); }
.stu-elig-item { display: flex; align-items: center; gap: var(--sp-md); font-size: var(--fs-base); font-weight: 500; }
.stu-elig-item__check { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #dcfce7; color: #15803d; border-radius: var(--r-full); font-size: var(--fs-xs); }
.stu-docs-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-xl); box-shadow: var(--shadow-sm); }
.stu-docs-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-lg); }
.stu-docs-card ul { display: flex; flex-direction: column; gap: var(--sp-sm); }
.stu-docs-card li { display: flex; align-items: center; gap: var(--sp-sm); font-size: var(--fs-sm); color: var(--color-text-muted); }
.stu-docs-card li i { color: var(--color-primary); }

.stu-popular__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); }
.stu-popular-item { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-md); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-lg); transition: all var(--tr-fast); }
.stu-popular-item:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.stu-popular-item__icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); font-size: 1.1rem; }
.stu-popular-item__info { flex: 1; min-width: 0; }
.stu-popular-item__title { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--color-text); }
.stu-popular-item__meta { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }
.stu-popular-item__arrow { color: var(--color-text-light); }

.stu-projects__list { display: flex; flex-direction: column; gap: var(--sp-xl); }
.stu-project-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-xl); padding: var(--sp-2xl); }
.stu-project-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; margin-bottom: var(--sp-xl); }
.stu-project-card__badge { display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--color-accent); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--sp-xs); }
.stu-project-card__title { color: #fff; font-size: var(--fs-2xl); font-weight: 800; }
.stu-project-status { font-size: var(--fs-xs); font-weight: 700; padding: 4px 12px; border-radius: var(--r-full); white-space: nowrap; }
.stu-project-status--current { background: rgba(16,185,129,.2); color: #6ee7b7; }
.stu-project-status--completed { background: rgba(255,255,255,.15); color: rgba(255,255,255,.7); }
.stu-project-card__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); margin-bottom: var(--sp-xl); }
.stu-project-stat { background: rgba(255,255,255,.06); border-radius: var(--r-lg); padding: var(--sp-lg); text-align: center; }
.stu-project-stat__num { display: block; font-size: var(--fs-2xl); font-weight: 800; color: var(--color-accent); }
.stu-project-stat__label { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .04em; }
.stu-project-card__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xl); margin-bottom: var(--sp-xl); }
.stu-project-card__col h4 { color: #fff; font-size: var(--fs-sm); margin-bottom: var(--sp-md); display: flex; align-items: center; gap: var(--sp-sm); }
.stu-project-card__col h4 i { color: var(--color-accent); }
.stu-project-tags { display: flex; flex-direction: column; gap: var(--sp-xs); }
.stu-project-tags li { font-size: var(--fs-sm); color: rgba(255,255,255,.7); padding-left: var(--sp-md); position: relative; }
.stu-project-tags li::before { content: '\2713'; position: absolute; left: 0; color: var(--color-accent); }
.stu-project-chips { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.stu-project-chips span { font-size: var(--fs-xs); background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); padding: 4px 12px; border-radius: var(--r-full); }

.stu-apply__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-xl); }
.stu-apply-step { text-align: center; position: relative; padding: var(--sp-xl) var(--sp-md); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); }
.stu-apply-step__num { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: #fff; border-radius: var(--r-full); font-weight: 800; font-size: var(--fs-sm); }
.stu-apply-step__icon { width: 56px; height: 56px; margin: var(--sp-md) auto var(--sp-md); display: flex; align-items: center; justify-content: center; background: var(--color-primary-light); color: var(--color-primary); border-radius: var(--r-xl); font-size: 1.4rem; }
.stu-apply-step__title { font-size: var(--fs-base); margin-bottom: var(--sp-sm); }
.stu-apply-step__desc { font-size: var(--fs-sm); color: var(--color-text-muted); }

.stu-testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }
.stu-testimonial-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-xl); }
.stu-testimonial-card__stars { display: flex; gap: 2px; margin-bottom: var(--sp-md); color: var(--color-border); }
.stu-testimonial-card__stars .is-on { color: #f59e0b; }
.stu-testimonial-card__quote { font-size: var(--fs-sm); color: var(--color-text); line-height: 1.7; font-style: italic; margin-bottom: var(--sp-lg); }
.stu-testimonial-card__person { display: flex; align-items: center; gap: var(--sp-md); }
.stu-testimonial-card__avatar { width: 48px; height: 48px; border-radius: var(--r-full); object-fit: cover; }
.stu-testimonial-card__avatar--ph { display: flex; align-items: center; justify-content: center; background: var(--color-bg-section); color: var(--color-text-light); }
.stu-testimonial-card__name { display: block; font-weight: 700; font-size: var(--fs-sm); }
.stu-testimonial-card__role { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }

.stu-videos__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }
.stu-video-card { display: block; }
.stu-video-card__thumb { position: relative; display: block; aspect-ratio: 16/9; background: var(--color-dark) center/cover no-repeat; border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-sm); }
.stu-video-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 1.5rem; transition: background var(--tr-fast); }
.stu-video-card:hover .stu-video-card__play { background: rgba(0,0,0,.55); }
.stu-video-card__title { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); }
.stu-video-card:hover .stu-video-card__title { color: var(--color-primary); }

.stu-faq__list { max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-md); }
.stu-faq-item { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; }
.stu-faq-item__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: var(--sp-lg); background: none; border: none; cursor: pointer; font-size: var(--fs-base); font-weight: 600; color: var(--color-text); text-align: left; }
.stu-faq-item__q i { transition: transform var(--tr-base); color: var(--color-primary); flex-shrink: 0; }
.stu-faq-item.is-open .stu-faq-item__q i { transform: rotate(180deg); }
.stu-faq-item__a { max-height: 0; overflow: hidden; transition: max-height var(--tr-base); }
.stu-faq-item.is-open .stu-faq-item__a { max-height: 500px; }
.stu-faq-item__a-inner { padding: 0 var(--sp-lg) var(--sp-lg); color: var(--color-text-muted); font-size: var(--fs-sm); line-height: 1.7; }

/* Premium white portal cards with per-service accent (--c) */
.stu-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.stu-service-card {
	--c: #0A6847;
	position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .5rem;
	padding: 2rem 1.75rem; color: var(--color-text);
	background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
	border: 1px solid var(--color-border); border-radius: 1.6rem;
	box-shadow: 0 8px 24px -16px rgba(2,6,23,.25);
	transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.stu-service-card::before {
	content: ''; position: absolute; top: -40%; right: -30%; width: 80%; height: 85%; border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%);
	pointer-events: none; transition: transform .35s ease;
}
.stu-service-card::after {
	content: ''; position: absolute; top: 0; left: -70%; width: 50%; height: 100%;
	background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
	transform: skewX(-18deg); pointer-events: none; transition: left .55s ease;
}
.stu-service-card:hover::after { left: 125%; }
.stu-service-card:hover::before { transform: scale(1.25); }
.stu-service-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 28px 52px -22px color-mix(in srgb, var(--c) 38%, rgba(2,6,23,.35)); }
.stu-service-card__icon {
	width: 3.4rem; height: 3.4rem; margin-bottom: .7rem; display: flex; align-items: center; justify-content: center;
	border-radius: 1rem; font-size: 1.35rem; color: #fff;
	background: linear-gradient(135deg, color-mix(in srgb, var(--c) 85%, #fff), color-mix(in srgb, var(--c) 68%, #000));
	box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--c) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
	transition: transform .3s ease;
}
.stu-service-card:hover .stu-service-card__icon { transform: translateY(-4px) scale(1.07); }
.stu-service-card__title { font-size: 1.1rem; font-weight: 800; color: var(--color-text); letter-spacing: -.01em; }
.stu-service-card__desc { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.6; flex: 1; }
.stu-service-card__link { display: inline-flex; align-items: center; gap: .45rem; margin-top: .4rem; font-size: var(--fs-sm); font-weight: 700; color: var(--c); transition: gap .2s ease; }
.stu-service-card:hover .stu-service-card__link { gap: .85rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Homepage sections
   ══════════════════════════════════════════════════════════════════════════ */

/* Centered hero variant */
.hero--home { min-height: 78vh; }

/* Homepage first section - same pattern as the approved reference site:
   the section is exactly one viewport tall and the video is absolutely
   positioned with object-fit:cover, so it CROPS to fill the box. No part of
   the section's own background can ever show → no bars above/below the film,
   at any viewport size or aspect ratio. */
.home-video { position: relative; width: 100%; height: 100vh; height: 100svh; background: #0A6847; overflow: hidden; line-height: 0; font-size: 0; }
.home-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0A6847; margin: 0; }

/* Bouncing scroll-down cue (as on the reference homepage) */
.home-video__scroll {
	position: absolute; bottom: 2rem; left: 50%; z-index: 5;
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: var(--r-full);
	background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.5);
	color: #fff; font-size: 1.15rem;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	animation: navttc-scroll-bounce 2s infinite;
	transition: background-color var(--tr-fast);
}
.home-video__scroll:hover { background: rgba(255,255,255,.34); color: #fff; }
/* Sound on/off toggle (bottom-right of the video) */
.home-video__sound {
	position: absolute; bottom: 2rem; right: 2rem; z-index: 6;
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: var(--r-full);
	background: rgba(15,23,42,.42); border: 1.5px solid rgba(255,255,255,.55);
	color: #fff; font-size: 1rem; cursor: pointer; line-height: 1;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	transition: background-color var(--tr-fast), transform var(--tr-fast), border-color var(--tr-fast);
}
.home-video__sound:hover { background: rgba(15,23,42,.65); transform: scale(1.06); }
.home-video__sound:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.home-video__sound.is-on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
@media (max-width: 640px) { .home-video__sound { width: 42px; height: 42px; bottom: 1.25rem; right: 1.25rem; } }
@keyframes navttc-scroll-bounce {
	0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
	40% { transform: translate(-50%, -12px); }
	60% { transform: translate(-50%, -6px); }
}
@media (prefers-reduced-motion: reduce) { .home-video__scroll { animation: none; transform: translateX(-50%); } }

/* Homepage second section - hero content on a clean white background.
   Dark text replaces the white, the yellow highlight stays. */
.hero--solid {
	min-height: auto;
	overflow: visible;
	padding: clamp(3rem, 8vw, 6rem) 0;
	background: var(--color-white);
}
.hero--solid { position: relative; }
.hero--solid .hero__content { padding-block: 0; }
/* Two-column hero: content left, leadership image covering the whole right side */
.hero--solid__grid { display: block; }
.hero--solid .hero__content { position: relative; z-index: 1; text-align: left; max-width: min(600px, 46vw); }
.hero--solid .hero__content .hero__badge { margin-inline: 0; }
.hero--solid .hero__content h1 { margin-inline: 0; max-width: 14ch; font-size: clamp(var(--fs-3xl), 3.6vw, var(--fs-5xl)); }
.hero--solid .hero__content .hero__sub { margin-inline: 0; }
.hero--solid .hero__content .hero__ctas { justify-content: flex-start; }
.hero--solid__media { position: absolute; top: clamp(1.5rem, 4vw, 3rem); right: 0; bottom: 0; width: 50vw; }
/* Edge fades so the image melts into the white section (top, left + gentle bottom) */
.hero--solid__media img {
	width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
	-webkit-mask-image:
		linear-gradient(to bottom, transparent 0, #000 22%, #000 100%),
		linear-gradient(to right, transparent 0, #000 24%, #000 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to bottom, transparent 0, #000 22%, #000 100%),
		linear-gradient(to right, transparent 0, #000 24%, #000 100%);
	mask-composite: intersect;
}
@media (max-width: 900px) {
	.hero--solid__grid { display: flex; flex-direction: column; }
	.hero--solid__media { position: static; width: auto; margin: 0 0 1.75rem; order: -1; }
	.hero--solid__media img { height: auto; max-height: 360px; object-fit: contain; }
	.hero--solid .hero__content { max-width: none; text-align: center; }
	.hero--solid .hero__content .hero__badge,
	.hero--solid .hero__content h1,
	.hero--solid .hero__content .hero__sub { margin-inline: auto; }
	.hero--solid .hero__content .hero__ctas { justify-content: center; }
}
/* Image fades up-in with the section */
.hero--solid__media[data-reveal] { opacity: 0; translate: 0 28px; }
.hero--solid__media[data-reveal].is-revealed { animation: navttc-role-rise 1s ease .35s both; }
@media (prefers-reduced-motion: reduce) {
	.hero--solid__media[data-reveal] { opacity: 1; translate: 0 0; animation: none !important; }
}
.hero--solid h1 { color: var(--color-text); text-shadow: none; }
.hero--solid h1 .highlight { color: var(--color-accent); }
.hero--solid .hero__sub { color: var(--color-text-muted); text-shadow: none; }
.hero--solid .hero__badge { background: var(--color-primary-light); border-color: rgba(10,104,71,.25); color: var(--color-primary); }
.hero--solid .btn-secondary { color: var(--color-text); border-color: rgba(17,24,39,.30); }
.hero--solid .btn-secondary:hover { background: rgba(17,24,39,.06); border-color: var(--color-text); color: var(--color-text); }

/* Elements rise in one by one when the section scrolls into view */
.hero--solid .hero__content[data-reveal] > * { opacity: 0; translate: 0 26px; }
.hero--solid .hero__content[data-reveal].is-revealed > * { animation: navttc-role-rise .8s ease both; }
.hero--solid .hero__content[data-reveal].is-revealed > *:nth-child(1) { animation-delay: .1s; }
.hero--solid .hero__content[data-reveal].is-revealed > *:nth-child(2) { animation-delay: .45s; }
.hero--solid .hero__content[data-reveal].is-revealed > *:nth-child(3) { animation-delay: .8s; }
.hero--solid .hero__content[data-reveal].is-revealed > *:nth-child(4) { animation-delay: 1.15s; }
@media (prefers-reduced-motion: reduce) {
	.hero--solid .hero__content[data-reveal] > * { opacity: 1; translate: 0 0; animation: none !important; }
}

/* ── Skill Initiatives: premium alternating text / image rows ─────────────── */
.sinit {
	position: relative; overflow: hidden;
	padding: clamp(1rem, 2.5vw, 2rem) 0 clamp(3rem, 6vw, 5.5rem);
	background: linear-gradient(180deg, #ffffff 0%, var(--color-bg-light) 100%);
}

/* Elegant vertical-image motif: a tall, faintly framed 3D panel that floats
   behind the zig-zag rows and tilts gently toward the cursor (--px/--py are
   set by JS on pointer move). Purely decorative, masked to fade at the edges. */
.sinit__bg {
	position: absolute; inset: 0; z-index: 0; overflow: hidden;
	pointer-events: none; perspective: 1500px;
}
.sinit__bg img {
	position: absolute; top: 50%; left: 50%;
	width: clamp(300px, 34vw, 560px); height: auto;
	border-radius: 1.75rem;
	transform:
		translate(-50%, -50%)
		rotateX(calc(var(--py, 0) * 5deg))
		rotateY(calc(var(--px, 0) * -12deg))
		translateZ(0);
	transform-style: preserve-3d;
	transition: transform .4s cubic-bezier(.22,.61,.36,1);
	opacity: .22;
	box-shadow: 0 50px 90px -30px rgba(15,23,42,.5);
	-webkit-mask-image: radial-gradient(62% 72% at 50% 50%, #000 52%, transparent 100%);
	        mask-image: radial-gradient(62% 72% at 50% 50%, #000 52%, transparent 100%);
}
@media (max-width: 700px) {
	.sinit__bg img { width: clamp(220px, 60vw, 340px); opacity: .16; }
}
@media (prefers-reduced-motion: reduce) {
	.sinit__bg img { transition: none; transform: translate(-50%, -50%); }
}
.sinit__rows { display: flex; flex-direction: column; gap: clamp(3rem, 6vw, 5.5rem); }
.sinit-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 5vw, 4.5rem); align-items: center; }
.sinit-row--rev .sinit-row__text { order: 2; }
.sinit-row--rev .sinit-row__media { order: 1; }

/* Text column */
.sinit-row__badge {
	display: inline-flex; align-items: center; gap: .45rem; padding: .4rem 1rem; border-radius: 999px;
	font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); margin-bottom: 1.1rem;
}
.sinit-row__badge i { font-size: .42rem; }
.sinit-row__title { font-size: clamp(1.6rem, 3.2vw, 2.25rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.14; color: var(--color-text); margin-bottom: .9rem; }
.sinit-row__desc { font-size: 1.02rem; line-height: 1.8; color: var(--color-text-muted); margin-bottom: 1.5rem; max-width: 42ch; }
.sinit-row__cta {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .85rem 1.7rem; border-radius: 999px; font-weight: 700; font-size: .9rem; color: #fff !important;
	background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 58%, #000));
	box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--c) 70%, transparent);
	transition: gap .2s ease, transform .25s ease, box-shadow .25s ease;
}
.sinit-row__cta:hover { gap: .85rem; transform: translateY(-3px); box-shadow: 0 20px 38px -10px color-mix(in srgb, var(--c) 78%, transparent); color: #fff !important; }

/* Media column - a premium accent-gradient panel framing the program image */
.sinit-row__media { position: relative; perspective: 1200px; }
.sinit-row__card {
	position: relative; display: block; border-radius: 1.8rem; transform-style: preserve-3d; will-change: transform;
	transition: transform .25s ease;
}
/* No glow / panel - the image sits directly on the section. */
.sinit-row__glow { display: none; }
/* Frameless: no background, border or padding - just the artwork. */
.sinit-row__frame {
	position: relative; display: flex; align-items: center; justify-content: center;
	background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; overflow: visible;
}
.sinit-row__frame::before, .sinit-row__frame::after { content: none; display: none; }
.sinit-row__frame img {
	position: relative; z-index: 1; display: block; max-width: 100%; height: auto;
	width: auto; object-fit: contain;
	filter: drop-shadow(0 18px 30px rgba(2,6,23,.16));
}

/* Reveal: text rises with staggered children, the image panel scales in */
.sinit-row[data-reveal] .sinit-row__text > * { opacity: 0; translate: 0 22px; }
.sinit-row[data-reveal].is-revealed .sinit-row__text > * { animation: navttc-role-rise .7s cubic-bezier(.22,.61,.36,1) both; }
.sinit-row[data-reveal].is-revealed .sinit-row__text > *:nth-child(1) { animation-delay: .1s; }
.sinit-row[data-reveal].is-revealed .sinit-row__text > *:nth-child(2) { animation-delay: .22s; }
.sinit-row[data-reveal].is-revealed .sinit-row__text > *:nth-child(3) { animation-delay: .34s; }
.sinit-row[data-reveal].is-revealed .sinit-row__text > *:nth-child(4) { animation-delay: .46s; }
/* Sudden reveal: the image pops in quickly with a slight overshoot. */
.sinit-row[data-reveal] .sinit-row__media { opacity: 0; }
.sinit-row[data-reveal].is-revealed .sinit-row__media { animation: sinit-pop .4s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes sinit-pop { 0% { opacity: 0; transform: scale(.8); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }

@media (max-width: 820px) {
	.sinit-row, .sinit-row--rev { grid-template-columns: 1fr; gap: 1.75rem; }
	.sinit-row--rev .sinit-row__text { order: 2; }
	.sinit-row--rev .sinit-row__media { order: 1; }
	.sinit-row__media { order: 1; }
	.sinit-row__text { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
	.sinit-row__card { transition: none; }
	.sinit-row[data-reveal] .sinit-row__text > *, .sinit-row[data-reveal] .sinit-row__media { opacity: 1; translate: 0 0; scale: 1; animation: none !important; transition: none; }
}

/* ── For Training Institutes: 3 numbered steps, vertical flip cards (classic) ─ */
.inst {
	position: relative; overflow: hidden;
	padding: clamp(2.5rem, 5vw, 4.5rem) 0;
	background: linear-gradient(160deg, #0B1322 0%, #0F172A 58%, #122036 100%);
}
.inst::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(40rem 22rem at 50% 0%, rgba(16,185,129,.10), transparent 70%),
		radial-gradient(30rem 18rem at 85% 100%, rgba(245,158,11,.07), transparent 70%);
}
.inst > .container { position: relative; z-index: 1; }
.inst__head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.25rem, 5vw, 3.5rem); }
.inst__eyebrow {
	display: inline-block; padding: .35rem 1rem; border-radius: 999px;
	font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	color: var(--color-accent-light); background: rgba(245,158,11,.12);
	border: 1px solid rgba(245,158,11,.3); margin-bottom: 1rem;
}
.inst__head h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; }
.inst__head p { color: rgba(255,255,255,.72); margin-top: .9rem; font-size: 1.02rem; line-height: 1.7; }
.inst__trust { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.65); }
.inst__trust i { color: var(--color-primary-mid); }

.inst__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.inst-card { position: relative; height: 460px; perspective: 1400px; cursor: pointer; outline: none; }
.inst-card__inner {
	position: absolute; inset: 0;
	transform-style: preserve-3d;
	transition: transform .7s cubic-bezier(.3,.7,.25,1);
}
/* Vertical flip: the card tips up and over, distinct from the rotateY cards above */
.inst-card:hover .inst-card__inner,
.inst-card:focus-visible .inst-card__inner,
.inst-card.is-open .inst-card__inner { transform: rotateX(-180deg); }

.inst-card__front,
.inst-card__back {
	position: absolute; inset: 0; border-radius: 1.6rem; overflow: hidden;
	-webkit-backface-visibility: hidden; backface-visibility: hidden;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}
/* Front: glossy luminous glass panel with a giant ghost step numeral */
.inst-card__front {
	gap: .9rem; padding: 2rem;
	background:
		radial-gradient(120% 90% at 0% 100%, color-mix(in srgb, var(--c) 26%, transparent), transparent 55%),
		linear-gradient(115deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.07) 45%, rgba(255,255,255,.03) 100%);
	border: 1px solid rgba(255,255,255,.24);
	border-top-color: rgba(255,255,255,.5);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 18px 40px -16px rgba(0,0,0,.6);
}
.inst-card__front::before { /* static diagonal gloss highlight */
	content: ''; position: absolute; top: -55%; left: -15%; width: 80%; height: 130%;
	background: linear-gradient(115deg, rgba(255,255,255,0) 25%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 75%);
	transform: rotate(10deg); pointer-events: none;
}
.inst-card__front::after { /* accent edge light along the bottom */
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
	background: linear-gradient(90deg, transparent, var(--c), transparent); opacity: .85;
}
.inst-card__num {
	position: absolute; top: .6rem; right: 1.4rem;
	font-size: 6.5rem; font-weight: 800; line-height: 1; letter-spacing: -.04em;
	background: linear-gradient(180deg, color-mix(in srgb, var(--c) 85%, #fff) 0%, color-mix(in srgb, var(--c) 35%, transparent) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	opacity: .8; pointer-events: none;
}
.inst-card__icon {
	width: 3.4rem; height: 3.4rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center;
	font-size: 1.4rem; color: #fff;
	background: linear-gradient(135deg, color-mix(in srgb, var(--c) 80%, #fff), color-mix(in srgb, var(--c) 70%, #000));
	box-shadow: 0 12px 28px -6px color-mix(in srgb, var(--c) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
}
.inst-card__title { font-size: 1.3rem; font-weight: 800; color: #fff; letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.inst-card__sub { font-size: .92rem; color: rgba(255,255,255,.8); margin: 0; }
.inst-card__cta {
	display: inline-flex; align-items: center; gap: .5rem; margin-top: .4rem;
	padding: .6rem 1.3rem; border-radius: 999px; font-size: .85rem; font-weight: 700;
	color: #fff; background: color-mix(in srgb, var(--c) 32%, transparent);
	border: 1.5px solid color-mix(in srgb, var(--c) 80%, #fff);
	box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--c) 70%, transparent);
	transition: background-color .25s, gap .2s;
}
.inst-card__cta:hover { background: var(--c); color: #fff; gap: .8rem; }
/* Back: accent gradient with the full details */
.inst-card__back {
	gap: .7rem; padding: 1.8rem; transform: rotateX(180deg);
	background:
		linear-gradient(150deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 40%, rgba(0,0,0,.22) 100%),
		linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 56%, #000));
	box-shadow: 0 30px 60px -22px color-mix(in srgb, var(--c) 55%, rgba(0,0,0,.4));
}
.inst-card__btitle { font-size: 1.05rem; font-weight: 800; color: #fff; }
.inst-card__btitle span { opacity: .55; margin-right: .35rem; }
.inst-card__desc { font-size: .85rem; line-height: 1.55; color: rgba(255,255,255,.92); margin: 0; }
.inst-card__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.inst-card__points li { display: flex; align-items: flex-start; gap: .55rem; font-size: .8rem; line-height: 1.5; color: rgba(255,255,255,.85); }
.inst-card__points i { margin-top: .2rem; font-size: .7rem; color: var(--color-accent-light); }
.inst-card__btn {
	display: inline-flex; align-items: center; gap: .5rem; margin-top: .4rem;
	padding: .6rem 1.25rem; border-radius: 999px; font-size: .85rem; font-weight: 700;
	background: #fff; color: var(--c); box-shadow: 0 10px 24px -8px rgba(0,0,0,.4);
	transition: gap .2s, transform .2s;
}
.inst-card__btn:hover { gap: .85rem; transform: translateY(-2px); color: var(--c); }

/* Entrance: header first, then the three steps rise in one by one */
.inst__head[data-reveal] > * { opacity: 0; translate: 0 22px; }
.inst__head[data-reveal].is-revealed > * { animation: navttc-role-rise .6s ease both; }
.inst__head[data-reveal].is-revealed > *:nth-child(1) { animation-delay: .05s; }
.inst__head[data-reveal].is-revealed > *:nth-child(2) { animation-delay: .17s; }
.inst__head[data-reveal].is-revealed > *:nth-child(3) { animation-delay: .29s; }
.inst__head[data-reveal].is-revealed > *:nth-child(4) { animation-delay: .41s; }
.inst__grid[data-reveal] .inst-card { opacity: 0; translate: 0 34px; }
.inst__grid[data-reveal].is-revealed .inst-card { animation: navttc-role-rise .65s cubic-bezier(.22,.61,.36,1) both; }
.inst__grid[data-reveal].is-revealed .inst-card:nth-child(1) { animation-delay: .2s; }
.inst__grid[data-reveal].is-revealed .inst-card:nth-child(2) { animation-delay: .4s; }
.inst__grid[data-reveal].is-revealed .inst-card:nth-child(3) { animation-delay: .6s; }
@media (max-width: 1024px) {
	.inst__grid { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
	.inst-card { height: 420px; }
}
@media (max-width: 480px) {
	.inst-card { height: 470px; }
	.inst-card__front, .inst-card__back { padding: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.inst-card__inner { transition: none; }
	.inst__head[data-reveal] > *, .inst__grid[data-reveal] .inst-card { opacity: 1; translate: 0 0; animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Partner with NAVTTC - 3D horizontal timeline
   ══════════════════════════════════════════════════════════════════════════ */
.ptl {
	position: relative; overflow: hidden;
	padding: clamp(2.5rem, 5vw, 4.5rem) 0;
	background:
		radial-gradient(42rem 22rem at 50% -6%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 70%),
		linear-gradient(180deg, #ffffff 0%, var(--color-bg-light) 100%);
}
.ptl-track { position: relative; perspective: 1400px; }
.ptl-steps {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.5rem);
	transform-style: preserve-3d;
}
/* The connecting line runs across the node row */
.ptl-line {
	position: absolute; top: 44px; left: 12%; right: 12%; height: 4px; border-radius: 4px;
	background: var(--color-border); overflow: hidden; z-index: 0;
}
.ptl-line__fill {
	display: block; width: 0; height: 100%; border-radius: 4px;
	background: linear-gradient(90deg, #0A6847, #0e7490, #b45309);
}
.ptl-track[data-reveal].is-revealed .ptl-line__fill { width: 100%; transition: width 1.6s cubic-bezier(.4,0,.2,1) .2s; }

.ptl-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }

/* 3D node sphere */
.ptl-node {
	position: relative; z-index: 1; width: 88px; height: 88px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: #fff;
	background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--c) 75%, #fff), var(--c) 42%, color-mix(in srgb, var(--c) 55%, #000) 100%);
	border: 4px solid #fff;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent), 0 18px 32px -10px color-mix(in srgb, var(--c) 70%, transparent);
	transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.ptl-node__ring { position: absolute; inset: -10px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c) 50%, transparent); opacity: 0; }
.ptl-node__num {
	position: absolute; top: -6px; right: -6px; width: 28px; height: 28px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800;
	color: var(--c); background: #fff; box-shadow: 0 4px 10px -3px rgba(2,6,23,.35);
}
.ptl-step:hover .ptl-node { transform: translateY(-6px) scale(1.06); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 38%, transparent), 0 26px 44px -12px color-mix(in srgb, var(--c) 80%, transparent); }
.ptl-step:hover .ptl-node__ring { animation: ptl-ring 1.1s ease-out infinite; }
@keyframes ptl-ring { 0% { transform: scale(.85); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }

/* Tilted 3D card below each node */
.ptl-card {
	position: relative; margin-top: 2rem; width: 100%; padding: 1.8rem 1.6rem; border-radius: 1.4rem;
	background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
	border: 1.5px solid color-mix(in srgb, var(--c) 22%, var(--color-border));
	box-shadow: 0 14px 34px -20px rgba(2,6,23,.3);
	transform: perspective(1000px) rotateX(7deg); transform-origin: top center;
	transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.ptl-card::after { content: ''; position: absolute; left: 1.6rem; right: 1.6rem; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, transparent, var(--c), transparent); opacity: .8; }
.ptl-step:hover .ptl-card {
	transform: perspective(1000px) rotateX(0deg) translateY(-6px);
	border-color: color-mix(in srgb, var(--c) 45%, transparent);
	box-shadow: 0 30px 56px -22px color-mix(in srgb, var(--c) 40%, rgba(2,6,23,.4));
}
.ptl-card__step { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); padding: .25rem .75rem; border-radius: 999px; margin-bottom: .7rem; }
.ptl-card__title { font-size: 1.2rem; font-weight: 800; color: var(--color-text); letter-spacing: -.01em; margin-bottom: .5rem; }
.ptl-card__desc { font-size: .9rem; color: var(--color-text-muted); line-height: 1.6; margin-bottom: 1rem; }
.ptl-card__cta { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 700; color: var(--c); transition: gap .2s ease; }
.ptl-step:hover .ptl-card__cta { gap: .8rem; }

/* Entrance: line draws, nodes pop and cards rise in sequence */
.ptl-track[data-reveal] .ptl-step { opacity: 0; translate: 0 30px; }
.ptl-track[data-reveal].is-revealed .ptl-step { animation: navttc-role-rise .7s cubic-bezier(.22,.61,.36,1) both; }
.ptl-track[data-reveal].is-revealed .ptl-step:nth-child(1) { animation-delay: .35s; }
.ptl-track[data-reveal].is-revealed .ptl-step:nth-child(2) { animation-delay: .85s; }
.ptl-track[data-reveal].is-revealed .ptl-step:nth-child(3) { animation-delay: 1.35s; }

@media (max-width: 820px) {
	/* Vertical timeline on tablet/mobile */
	.ptl-steps { grid-template-columns: 1fr; gap: 0; max-width: 460px; margin-inline: auto; }
	.ptl-line { top: 0; bottom: 0; left: 43px; right: auto; width: 4px; height: auto; }
	.ptl-line__fill { width: 100% !important; height: 0; transition: none; }
	.ptl-track[data-reveal].is-revealed .ptl-line__fill { height: 100%; width: 100% !important; transition: height 1.6s cubic-bezier(.4,0,.2,1) .2s; background: linear-gradient(180deg, #0A6847, #0e7490, #b45309); }
	.ptl-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 1.25rem; padding-bottom: 2rem; }
	.ptl-node { width: 72px; height: 72px; font-size: 1.4rem; flex-shrink: 0; }
	.ptl-card { margin-top: 0; transform: none; }
	.ptl-step:hover .ptl-card { transform: translateY(-4px); }
	.ptl-card__cta { }
}
@media (prefers-reduced-motion: reduce) {
	.ptl-track[data-reveal] .ptl-step { opacity: 1; translate: 0 0; animation: none !important; }
	.ptl-track[data-reveal].is-revealed .ptl-line__fill { transition: none; width: 100%; }
	.ptl-card { transform: none; }
}

/* ── Generic scroll-in stagger: add .nv-reveal + data-reveal to any container ─ */
.nv-reveal[data-reveal] > * { opacity: 0; translate: 0 30px; }
.nv-reveal[data-reveal].is-revealed > * { animation: navttc-role-rise .8s cubic-bezier(.22,.61,.36,1) both; }
.nv-reveal[data-reveal].is-revealed > *:nth-child(1) { animation-delay: .15s; }
.nv-reveal[data-reveal].is-revealed > *:nth-child(2) { animation-delay: .45s; }
.nv-reveal[data-reveal].is-revealed > *:nth-child(3) { animation-delay: .75s; }
.nv-reveal[data-reveal].is-revealed > *:nth-child(4) { animation-delay: 1.05s; }
.nv-reveal[data-reveal].is-revealed > *:nth-child(5) { animation-delay: 1.35s; }
.nv-reveal[data-reveal].is-revealed > *:nth-child(6) { animation-delay: 1.65s; }
.nv-reveal[data-reveal].is-revealed > *:nth-child(7) { animation-delay: 1.95s; }
.nv-reveal[data-reveal].is-revealed > *:nth-child(8) { animation-delay: 2.25s; }
.nv-reveal[data-reveal].is-revealed > *:nth-child(n+9) { animation-delay: 2.5s; }
@media (prefers-reduced-motion: reduce) {
	.nv-reveal[data-reveal] > * { opacity: 1; translate: 0 0; animation: none !important; }
}

/* ── Transparent header overlaying the homepage video ─────────────────────── */
/* The header is taken out of flow (fixed) so the video sits flush at the very top
   with no gap. It turns solid on scroll (main.js adds .nav-solid). */
body.has-hero-video .site-header { position: fixed; top: 0; left: 0; right: 0; }
body.has-hero-video.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { body.has-hero-video.admin-bar .site-header { top: 46px; } }
body.has-hero-video .site-content { margin-top: 0; }

/* Smooth fade between transparent and solid states */
body.has-hero-video .site-header,
body.has-hero-video .top-bar,
body.has-hero-video .main-nav { transition: background-color var(--tr-base), border-color var(--tr-base); }

/* Transparent state (at top, over the video) */
body.has-hero-video .site-header { background: transparent; }
body.has-hero-video .top-bar { background: transparent; }
body.has-hero-video .main-nav { background: transparent; border-bottom-color: rgba(255,255,255,.18); }
/* Legibility scrim behind the header content */
body.has-hero-video .site-header::before {
	content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
	background: linear-gradient(to bottom, rgba(15,23,42,.38) 0%, rgba(15,23,42,.08) 65%, transparent 100%);
	transition: opacity var(--tr-base);
}
body.has-hero-video .primary-menu > li > a { color: #fff; }
body.has-hero-video .primary-menu > li > a:hover,
body.has-hero-video .primary-menu > li.current-menu-item > a,
body.has-hero-video .primary-menu > li.current-menu-ancestor > a { color: #fff; background: rgba(255,255,255,.18); }
body.has-hero-video .site-logo__name { color: #fff; }
body.has-hero-video .site-logo__tagline { color: rgba(255,255,255,.8); }
body.has-hero-video .site-logo img, body.has-hero-video .site-logo__img { filter: drop-shadow(0 2px 8px rgba(0,0,0,.55)); }
body.has-hero-video .menu-toggle__bars span { background: #fff; }

/* Solid state (scrolled past the video) - restore the normal look */
body.has-hero-video .site-header.nav-solid { background: var(--color-white); box-shadow: var(--shadow-md); }
body.has-hero-video .site-header.nav-solid::before { opacity: 0; }
body.has-hero-video .site-header.nav-solid .top-bar { background: var(--color-dark); }
body.has-hero-video .site-header.nav-solid .main-nav { background: var(--color-white); border-bottom-color: var(--color-border); }
body.has-hero-video .site-header.nav-solid .primary-menu > li > a { color: var(--color-text); }
body.has-hero-video .site-header.nav-solid .primary-menu > li > a:hover,
body.has-hero-video .site-header.nav-solid .primary-menu > li.current-menu-item > a,
body.has-hero-video .site-header.nav-solid .primary-menu > li.current-menu-ancestor > a { color: var(--color-primary); background: var(--color-primary-light); }
body.has-hero-video .site-header.nav-solid .site-logo__name { color: var(--color-primary); }
body.has-hero-video .site-header.nav-solid .site-logo__tagline { color: var(--color-text-muted); }
body.has-hero-video .site-header.nav-solid .site-logo img, body.has-hero-video .site-header.nav-solid .site-logo__img { filter: none; }
body.has-hero-video .site-header.nav-solid .menu-toggle__bars span { background: var(--color-text); }
.hero__content--center { text-align: center; max-width: 820px; margin-inline: auto; }
.hero__content--center .hero__badge { margin-inline: auto; }
.hero__content--center h1 { margin-inline: auto; }
.hero__content--center .hero__sub { margin-inline: auto; }
.hero__content--center .hero__ctas { justify-content: center; }

/* ── Who Are You? ─────────────────────────────────────────────────────────── */
/* Deep emerald night backdrop. Glassmorphism only reads as "glass" when there
   are vivid, soft shapes BEHIND the panels for the blur to refract - so two
   slowly drifting colour orbs sit behind the card row. */
.home-roles {
	position: relative; overflow: hidden;
	background:
		radial-gradient(70% 90% at 50% 0%, rgba(255,255,255,.06), transparent 60%),
		radial-gradient(55% 65% at 50% 45%, rgba(52,211,153,.14), transparent 70%),
		#0A6847;
}
.home-roles::before,
.home-roles::after { content: ''; position: absolute; border-radius: 50%; filter: blur(64px); pointer-events: none; }
.home-roles::before {
	width: 460px; height: 460px; left: -100px; top: 4%;
	background: radial-gradient(circle at 35% 35%, rgba(52,211,153,.35), rgba(16,185,129,.12) 65%, transparent 80%);
	animation: navttc-orb 16s ease-in-out infinite alternate;
}
.home-roles::after {
	width: 400px; height: 400px; right: -90px; bottom: -12%;
	background: radial-gradient(circle at 60% 40%, rgba(245,158,11,.26), rgba(245,158,11,.08) 62%, transparent 80%);
	animation: navttc-orb 21s ease-in-out infinite alternate-reverse;
}
@keyframes navttc-orb {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(60px, -40px) scale(1.15); }
}
.home-roles > .container { position: relative; z-index: 1; }
/* Third orb (bright teal) behind the middle of the grid, below the cards in paint order. */
.home-roles > .container::before {
	content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
	width: 380px; height: 380px; left: 50%; top: 55%; transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(45,212,191,.26), rgba(16,185,129,.10) 60%, transparent 80%);
	filter: blur(70px);
	animation: navttc-orb 18s ease-in-out infinite alternate;
}
.home-roles .section-header h2 { color: #fff; }
.home-roles .section-header p  { color: rgba(255,255,255,.78); }

.home-roles__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }

/* Frosted-glass card: gradient sheen + strong blur/saturation + lit top edge. */
.home-role-card {
	--ac: #10b981; --ac2: #059669;
	display: flex; flex-direction: column; gap: var(--sp-sm);
	padding: var(--sp-2xl) var(--sp-xl); color: #fff; position: relative; overflow: hidden;
	border-radius: 22px;
	background: linear-gradient(160deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.055) 100%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	border: 1px solid rgba(255,255,255,.22);
	border-top-color: rgba(255,255,255,.40);
	box-shadow: 0 8px 32px rgba(0,0,0,.28), inset 0 1px 1px rgba(255,255,255,.16);
	transition: transform .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* Light streak that sweeps across the glass on hover. */
.home-role-card::before {
	content: ''; position: absolute; top: 0; left: -65%; width: 55%; height: 100%;
	background: linear-gradient(105deg, transparent, rgba(255,255,255,.18), transparent);
	transform: skewX(-18deg); pointer-events: none; transition: left .55s ease;
}
.home-role-card:hover::before { left: 120%; }
.home-role-card:hover {
	transform: translateY(-8px);
	background: linear-gradient(160deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.10) 100%);
	border-color: rgba(255,255,255,.45);
	box-shadow: 0 22px 48px rgba(0,0,0,.38), 0 14px 44px -10px var(--ac), inset 0 1px 1px rgba(255,255,255,.24);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.home-role-card { background: rgba(255,255,255,.14); }
}
/* Bare icon glyph - no tile/background behind it, just the accent colour + glow. */
.home-role-card__icon {
	display: inline-flex; align-items: center;
	background: none; border-radius: 0; box-shadow: none;
	font-size: 1.85rem; color: var(--ac); margin-bottom: var(--sp-sm);
	filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
	transition: transform .3s ease;
}
.home-role-card:hover .home-role-card__icon { transform: translateY(-3px) scale(1.07); }
.home-role-card__title { color: #fff; font-size: var(--fs-xl); font-weight: 800; }
.home-role-card__desc { color: rgba(255,255,255,.82); font-size: var(--fs-sm); line-height: 1.6; flex: 1; }
.home-role-card__link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); font-weight: 700; color: #fff; margin-top: var(--sp-sm); transition: gap var(--tr-fast); }
.home-role-card:hover .home-role-card__link { gap: 0.75rem; }
@media (prefers-reduced-motion: reduce) {
	.home-roles::before, .home-roles::after, .home-roles > .container::before { animation: none; }
}

/* Lazy staggered entrance - cards rise in one-by-one (base .3s, +.2s each).
   Uses `translate`/opacity (not `transform`) so the hover lift stays independent. */
.home-roles__grid[data-reveal] .home-role-card { opacity: 0; translate: 0 30px; }
.home-roles__grid[data-reveal].is-revealed .home-role-card { animation: navttc-role-rise .7s ease both; }
.home-roles__grid[data-reveal].is-revealed .home-role-card:nth-child(1) { animation-delay: .3s; }
.home-roles__grid[data-reveal].is-revealed .home-role-card:nth-child(2) { animation-delay: .5s; }
.home-roles__grid[data-reveal].is-revealed .home-role-card:nth-child(3) { animation-delay: .7s; }
.home-roles__grid[data-reveal].is-revealed .home-role-card:nth-child(4) { animation-delay: .9s; }
@keyframes navttc-role-rise { to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
	.home-roles__grid[data-reveal] .home-role-card { opacity: 1; translate: 0 0; animation: none; }
}

/* ── Why Pakistan ─────────────────────────────────────────────────────────── */
.home-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }
.home-why-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-2xl); transition: all var(--tr-base); }
.home-why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.home-why-card__icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-xl); font-size: 1.4rem; margin-bottom: var(--sp-lg); }
.home-why-card__title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-sm); }
.home-why-card__desc { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.7; }

/* ── Flagship initiatives ─────────────────────────────────────────────────── */
.home-flagship__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }
.home-flagship-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); overflow: hidden; transition: all var(--tr-base); display: flex; flex-direction: column; }
.home-flagship-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.home-flagship-card__head { position: relative; min-height: 150px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); font-size: 3rem; }
.home-flagship-card__flag { position: absolute; top: var(--sp-md); left: var(--sp-md); background: var(--color-accent); color: var(--color-dark); font-size: var(--fs-xs); font-weight: 800; padding: 3px 12px; border-radius: var(--r-full); text-transform: uppercase; letter-spacing: .05em; }
.home-flagship-card__body { padding: var(--sp-xl); display: flex; flex-direction: column; flex: 1; }
.home-flagship-card__title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; margin-bottom: var(--sp-sm); }
.home-flagship-card__desc { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.6; margin-bottom: var(--sp-md); flex: 1; }
.home-flagship-card__tags { display: flex; flex-direction: column; gap: var(--sp-xs); margin-bottom: var(--sp-lg); }
.home-flagship-card__tags span { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-xs); font-weight: 600; color: var(--color-primary); }
.home-flagship-card__link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); font-weight: 700; color: var(--color-primary); transition: gap var(--tr-fast); margin-top: auto; }
.home-flagship-card__link:hover { gap: 0.75rem; }

/* ── Industries We Serve (chips) ──────────────────────────────────────────── */
.home-sectors__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-md); }
.home-sector-chip { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-sm); padding: var(--sp-lg) var(--sp-md); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); transition: all var(--tr-base); }
.home-sector-chip:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.home-sector-chip__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-lg); font-size: 1.3rem; }
.home-sector-chip__name { font-size: var(--fs-sm); font-weight: 700; color: var(--color-text); line-height: 1.3; }
.home-sector-chip__count { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ── International partners ────────────────────────────────────────────────── */
.home-intl__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2xl); }
.home-intl__panel { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-xl); padding: var(--sp-2xl); }
.home-intl__panel-title { color: #fff; font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-xl); display: flex; align-items: center; gap: var(--sp-sm); }
.home-intl__panel-title i { color: var(--color-accent); }
.home-intl__countries { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm); }
.home-country { display: flex; align-items: center; gap: var(--sp-sm); padding: 0.5rem 0.75rem; background: rgba(255,255,255,.06); border-radius: var(--r-md); font-size: var(--fs-sm); color: rgba(255,255,255,.85); }
.home-country img { width: 22px; height: auto; border-radius: 2px; flex-shrink: 0; }
a.home-country:hover { background: rgba(255,255,255,.12); color: #fff; }
.home-intl__partners { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.home-partner { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-lg); padding: var(--sp-lg); }
.home-partner__name { display: block; color: #fff; font-weight: 800; font-size: var(--fs-base); }
.home-partner__desc { display: block; color: rgba(255,255,255,.55); font-size: var(--fs-xs); margin-top: 2px; }

/* ── Digital Services (image-led portal cards + intro + secondary row) ─────── */
.dserv { position: relative; overflow: clip; background: linear-gradient(180deg, #ffffff 0%, var(--color-bg-light) 100%); }

/* ── Minimalistic 3D background patterns (Partner / Skill Initiatives / Digital
   Services). A receding perspective grid gives depth; a fine dot matrix adds
   intricacy. Per-section accent via --pat. Subtle, responsive, decorative. ── */
.nv-pattern { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.nv-pattern::before {
	content: ''; position: absolute; left: 50%; bottom: -12%;
	width: 200%; height: 78%;
	transform: translateX(-50%) perspective(58rem) rotateX(60deg);
	transform-origin: 50% 100%;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--pat, var(--color-primary)) 30%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--pat, var(--color-primary)) 30%, transparent) 1px, transparent 1px);
	background-size: 3.25rem 3.25rem;
	-webkit-mask-image: radial-gradient(125% 92% at 50% 100%, #000 30%, transparent 80%);
	        mask-image: radial-gradient(125% 92% at 50% 100%, #000 30%, transparent 80%);
	opacity: .85;
}
.nv-pattern::after {
	content: ''; position: absolute; inset: 0;
	background-image: radial-gradient(color-mix(in srgb, var(--pat, var(--color-primary)) 42%, transparent) 1.4px, transparent 1.7px);
	background-size: 1.5rem 1.5rem;
	-webkit-mask-image: radial-gradient(75% 62% at 92% 0%, #000, transparent 62%);
	        mask-image: radial-gradient(75% 62% at 92% 0%, #000, transparent 62%);
	opacity: .8;
}
/* Keep section content above the decorative pattern */
.ptl > .container,
.sinit > .container,
.dserv > .container { position: relative; z-index: 1; }
@media (max-width: 700px) {
	.nv-pattern::before { background-size: 2.3rem 2.3rem; height: 68%; }
	.nv-pattern::after  { background-size: 1.15rem 1.15rem; }
}
.dserv__head { text-align: center; max-width: 44rem; margin: 0 auto clamp(2.25rem, 5vw, 3.25rem); }
.dserv__head .hm-tag { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent); margin-bottom: .9rem; }
.dserv__head h2 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.dserv__head h2::after { content: ''; display: block; width: 64px; height: 4px; margin: 1rem auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); }
.dserv__head p { margin-top: 1rem; color: var(--color-text-muted); font-size: 1.05rem; line-height: 1.7; }

.dserv__main { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
/* Left intro column */
.dserv__intro { position: sticky; top: 6rem; }
.dserv__eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 1rem; }
.dserv__rule { width: 2rem; height: 2px; background: var(--color-accent); border-radius: 2px; }
.dserv__intro h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--color-text); margin-bottom: 1rem; }
.dserv__intro p { color: var(--color-text-muted); font-size: 1rem; line-height: 1.75; margin-bottom: 1.75rem; }

/* Right 2x2 image cards */
.dserv__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.dcard {
	display: flex; flex-direction: column; overflow: hidden; color: inherit;
	background: var(--color-white); border: 1px solid var(--color-border); border-radius: 1.4rem;
	box-shadow: 0 10px 28px -18px rgba(2,6,23,.28);
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.dcard:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 28px 52px -22px color-mix(in srgb, var(--c) 35%, rgba(2,6,23,.4)); }
.dcard__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0b1322; }
.dcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dcard:hover .dcard__media img { transform: scale(1.06); }
/* color bridge: a subtle brand-accent wash unifies the varied photos with the site palette */
.dcard__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, transparent) 0%, transparent 45%, rgba(2,6,23,.3) 100%); pointer-events: none; }
.dcard__icon {
	position: absolute; top: .9rem; left: .9rem; z-index: 1;
	width: 2.8rem; height: 2.8rem; display: flex; align-items: center; justify-content: center;
	border-radius: .85rem; font-size: 1.05rem; color: var(--c);
	background: rgba(255,255,255,.92); box-shadow: 0 8px 18px -6px rgba(2,6,23,.4);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.dcard__body { display: flex; flex-direction: column; gap: .4rem; padding: 1.4rem 1.5rem 1.5rem; flex: 1; }
.dcard__cat { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.dcard__title { font-size: 1.15rem; font-weight: 800; color: var(--color-text); letter-spacing: -.01em; line-height: 1.25; }
.dcard__desc { font-size: .88rem; color: var(--color-text-muted); line-height: 1.6; flex: 1; }
.dcard__link { display: inline-flex; align-items: center; gap: .45rem; margin-top: .4rem; font-size: var(--fs-sm); font-weight: 700; color: var(--c); transition: gap .2s ease; }
.dcard:hover .dcard__link { gap: .8rem; }

/* Secondary mini row */
.dserv__secondary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.dmini { display: flex; align-items: center; gap: .85rem; padding: 1.1rem 1.25rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 1rem; color: inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.dmini:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 18px 34px -20px color-mix(in srgb, var(--c) 35%, rgba(2,6,23,.4)); }
.dmini__icon { flex-shrink: 0; width: 2.6rem; height: 2.6rem; display: flex; align-items: center; justify-content: center; border-radius: .75rem; font-size: .95rem; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.dmini__text { display: flex; flex-direction: column; min-width: 0; }
.dmini__title { font-size: var(--fs-sm); font-weight: 800; color: var(--color-text); }
.dmini__desc { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.45; }
.dmini__chev { margin-left: auto; color: var(--color-text-light); font-size: .8rem; transition: transform .25s ease, color .25s ease; }
.dmini:hover .dmini__chev { transform: translateX(3px); color: var(--c); }

@media (max-width: 980px) {
	.dserv__main { grid-template-columns: 1fr; }
	.dserv__intro { position: static; }
	.dserv__secondary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.dserv__grid { grid-template-columns: 1fr; }
	.dserv__secondary { grid-template-columns: 1fr; }
}

/* ── Programs page: Open / Closed filter + status chips ───────────────────── */
.prog-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin-bottom: var(--sp-2xl); }
.prog-filter__btn {
	padding: .5rem 1.4rem; border-radius: var(--r-full); cursor: pointer;
	border: 1.5px solid var(--color-border); background: var(--color-white);
	font-family: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--color-text-muted);
	transition: all var(--tr-fast);
}
.prog-filter__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.prog-filter__btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.prog-flagship-card { position: relative; }
.prog-flagship-card__status {
	position: absolute; top: 1.1rem; right: 1.1rem; z-index: 3;
	padding: .25rem .75rem; border-radius: var(--r-full);
	font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.prog-flagship-card__status--open { background: rgba(255,255,255,.92); color: var(--color-primary); }
.prog-flagship-card__status--closed { background: rgba(15,23,42,.55); color: #fff; border: 1px solid rgba(255,255,255,.35); }

/* ══════════════════════════════════════════════════════════════════════════
   About page (premium revamp)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.ab-hero {
	position: relative; overflow: hidden;
	padding: clamp(3rem, 6vw, 5rem) 0;
	background:
		radial-gradient(46rem 26rem at 10% 0%, rgba(245,158,11,.12), transparent 70%),
		radial-gradient(38rem 24rem at 92% 100%, rgba(59,130,246,.14), transparent 70%),
		var(--hero-bg, linear-gradient(135deg, #111827 0%, #1E293B 55%, #0B1220 100%));
}
.ab-hero::before { /* faint dotted texture */
	content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
	background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
	background-size: 26px 26px;
	mask-image: linear-gradient(to bottom, transparent, #000 30%, transparent);
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, transparent);
}
/* Two-column hero: content left, animated stat boxes right */
.ab-hero__grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.ab-hero__grid--full { grid-template-columns: 1fr; }
.ab-hero__content { position: relative; max-width: 56rem; }
/* Button row (used by Registration / Affiliation heroes) */
.ab-hero__chips { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--sp-xl); }
.ab-hero__badge {
	display: inline-flex; align-items: center; gap: .55rem; padding: .45rem 1.1rem;
	border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 700;
	color: var(--color-accent-light); background: rgba(245,158,11,.12);
	border: 1px solid rgba(245,158,11,.3); margin-bottom: var(--sp-lg);
}
.ab-hero h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin-bottom: var(--sp-lg); }
.ab-hero h1 span { color: var(--color-accent); }
.ab-hero p { color: rgba(255,255,255,.78); font-size: clamp(var(--fs-base), 1.6vw, var(--fs-lg)); line-height: 1.7; }
/* Stat boxes (right column) */
.ab-hero__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ab-stat {
	position: relative; overflow: hidden; padding: 1.5rem 1.4rem; border-radius: 1.25rem; text-align: left;
	background: linear-gradient(165deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 100%);
	border: 1px solid rgba(255,255,255,.16); border-top-color: rgba(255,255,255,.32);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 16px 34px -18px rgba(0,0,0,.5);
	transition: transform .3s ease, border-color .3s ease;
}
.ab-stat:hover { transform: translateY(-5px); border-color: rgba(245,158,11,.4); }
.ab-stat__icon { display: inline-flex; font-size: 1.2rem; color: var(--color-accent-light); margin-bottom: .6rem; }
.ab-stat__num { display: block; font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1; }
.ab-stat__lbl { display: block; margin-top: .35rem; font-size: var(--fs-sm); color: rgba(255,255,255,.72); }
@media (max-width: 860px) {
	.ab-hero__grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
	.ab-hero__stats { grid-template-columns: 1fr; }
}

/* ── Functions accordions (Who We Are, right column) ───────────────────────── */
/* min-height reserves room for one open accordion body so hovering never
   changes the column (and section) height. */
.ab-funcs { display: flex; flex-direction: column; gap: .7rem; min-height: 34rem; justify-content: flex-start; }
@media (max-width: 768px) { .ab-funcs { min-height: 0; } }
.ab-funcs__label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: .2rem; }
.ab-func {
	border: 1px solid var(--color-border); border-radius: 1rem; background: var(--color-white);
	overflow: hidden; outline: none; cursor: default;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ab-func__head { display: flex; align-items: center; gap: .85rem; padding: .85rem 1.1rem; }
.ab-func__icon {
	width: 2.4rem; height: 2.4rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	border-radius: .7rem; font-size: .95rem; color: #fff;
	background: linear-gradient(135deg, color-mix(in srgb, var(--c) 85%, #fff), color-mix(in srgb, var(--c) 70%, #000));
	box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--c) 70%, transparent);
}
.ab-func__title { font-weight: 700; font-size: var(--fs-sm); color: var(--color-text); flex: 1; }
.ab-func__chev { font-size: .7rem; color: var(--color-text-light); transition: transform .3s ease; }
.ab-func__body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s ease, opacity .3s ease; }
.ab-func__body p { margin: 0; padding: 0 1.1rem .95rem calc(1.1rem + 2.4rem + .85rem); font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.6; }
.ab-func:hover, .ab-func:focus-visible, .ab-func:focus-within {
	border-color: color-mix(in srgb, var(--c) 45%, transparent);
	box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--c) 45%, rgba(2,6,23,.3));
	transform: translateX(4px);
}
.ab-func:hover .ab-func__body, .ab-func:focus-visible .ab-func__body, .ab-func:focus-within .ab-func__body { max-height: 9rem; opacity: 1; }
.ab-func:hover .ab-func__chev, .ab-func:focus-visible .ab-func__chev { transform: rotate(180deg); }

/* ── Core Values: glass cards on dark ──────────────────────────────────────── */
.ab-vals {
	position: relative; overflow: hidden;
	padding: clamp(2.5rem, 5vw, 4.25rem) 0;
	background: linear-gradient(150deg, #0B1322 0%, #0F172A 60%, #11271F 100%);
}
.ab-vals::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(32rem 20rem at 18% 18%, rgba(16,185,129,.14), transparent 70%),
		radial-gradient(28rem 18rem at 85% 90%, rgba(245,158,11,.10), transparent 70%);
}
.ab-vals > .container { position: relative; z-index: 1; }
.ab-vals__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }
.ab-val {
	position: relative; overflow: hidden; padding: 2rem 1.6rem; border-radius: 1.4rem;
	background: linear-gradient(165deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%);
	border: 1px solid rgba(255,255,255,.16); border-top-color: rgba(255,255,255,.34);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 32px -16px rgba(0,0,0,.5);
	transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.ab-val::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
	background: linear-gradient(90deg, transparent, var(--c), transparent); opacity: .8;
}
.ab-val:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 26px 50px -20px color-mix(in srgb, var(--c) 35%, rgba(0,0,0,.6)); }
.ab-val__icon {
	width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center;
	border-radius: .95rem; font-size: 1.25rem; color: #0F172A;
	background: linear-gradient(135deg, #fff, var(--c)); margin-bottom: 1rem;
	box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--c) 70%, transparent);
}
.ab-val h3 { color: #fff; font-size: var(--fs-lg); font-weight: 800; margin-bottom: .4rem; }
.ab-val p { color: rgba(255,255,255,.72); font-size: var(--fs-sm); line-height: 1.6; margin: 0; }

/* ── Dignitaries ───────────────────────────────────────────────────────────── */
.dig__list { display: flex; flex-direction: column; gap: var(--sp-2xl); }
.dig-row { display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-xl); align-items: stretch; }
.dig-row.is-rev { grid-template-columns: 1fr 320px; }
.dig-row.is-rev .dig-row__portrait { order: 2; }
.dig-row__portrait {
	position: relative; border-radius: 1.5rem; overflow: hidden; min-height: 320px;
	background: linear-gradient(160deg, color-mix(in srgb, var(--c) 85%, #000), color-mix(in srgb, var(--c) 45%, #000));
	box-shadow: 0 24px 48px -20px color-mix(in srgb, var(--c) 55%, rgba(2,6,23,.5));
}
.dig-row__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.dig-row__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: rgba(255,255,255,.5); }
.dig-row__caption {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1.2rem .9rem;
	background: linear-gradient(to top, rgba(2,6,23,.88), transparent);
	display: flex; flex-direction: column; gap: .1rem;
}
.dig-row__caption strong { color: #fff; font-size: var(--fs-base); font-weight: 800; line-height: 1.3; }
.dig-row__caption em { color: rgba(255,255,255,.75); font-size: var(--fs-xs); font-style: normal; }
.dig-row__body {
	position: relative; background: var(--color-white); border: 1px solid var(--color-border);
	border-radius: 1.5rem; padding: 2.2rem 2.4rem; display: flex; flex-direction: column; justify-content: center;
	box-shadow: 0 12px 30px -20px rgba(2,6,23,.25); overflow: hidden;
}
.dig-row__body::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 50%, #fff)); }
.dig-row__quote { font-size: 2rem; color: color-mix(in srgb, var(--c) 30%, transparent); margin-bottom: .8rem; }
.dig-row__body p { color: var(--color-text-muted); font-size: var(--fs-base); line-height: 1.85; margin: 0 0 1rem; }
.dig-row__sig { font-weight: 800; font-size: var(--fs-sm); color: var(--c); }

/* ── Wings: glossy flip cards ──────────────────────────────────────────────── */
.wf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }
.wf-card { position: relative; height: 280px; perspective: 1300px; cursor: pointer; outline: none; }
.wf-card__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.3,.7,.25,1); }
.wf-card:hover .wf-card__inner, .wf-card:focus-visible .wf-card__inner, .wf-card.is-open .wf-card__inner { transform: rotateY(180deg); }
.wf-card__front, .wf-card__back {
	position: absolute; inset: 0; border-radius: 1.5rem; overflow: hidden; padding: 1.8rem;
	-webkit-backface-visibility: hidden; backface-visibility: hidden;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .7rem;
}
.wf-card__front {
	background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
	border: 1px solid var(--color-border);
	box-shadow: 0 6px 18px -10px rgba(0,0,0,.18);
}
.wf-card__front::before { /* diagonal gloss */
	content: ''; position: absolute; top: -60%; left: -20%; width: 90%; height: 130%;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.8) 50%, transparent 70%);
	transform: rotate(8deg); opacity: .45; pointer-events: none;
}
.wf-card__front::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); }
.wf-card__icon {
	width: 3.4rem; height: 3.4rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center;
	font-size: 1.4rem; color: #fff;
	background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 62%, #000));
	box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--c) 65%, transparent);
}
.wf-card__title { font-size: 1.12rem; font-weight: 800; color: var(--color-text); letter-spacing: -.01em; }
.wf-card__hint { font-size: var(--fs-xs); color: var(--color-text-light); font-weight: 600; }
.wf-card__back {
	transform: rotateY(180deg);
	background:
		linear-gradient(150deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.04) 40%, rgba(0,0,0,.2) 100%),
		linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 56%, #000));
	box-shadow: 0 30px 60px -22px color-mix(in srgb, var(--c) 55%, rgba(0,0,0,.4));
}
.wf-card__btitle { font-size: 1rem; font-weight: 800; color: #fff; }
.wf-card__desc { color: rgba(255,255,255,.88); font-size: .85rem; line-height: 1.55; margin: 0; }
.wf-card__btn {
	display: inline-flex; align-items: center; gap: .5rem; margin-top: .3rem;
	padding: .55rem 1.15rem; border-radius: var(--r-full); font-size: .82rem; font-weight: 700;
	background: #fff; color: var(--c); box-shadow: 0 10px 22px -8px rgba(0,0,0,.4);
	transition: gap .2s, transform .2s;
}
.wf-card__btn:hover { gap: .85rem; transform: translateY(-2px); color: var(--c); }

/* ── Regional Offices: map cards with hover takeover ───────────────────────── */
.reg {
	position: relative; overflow: hidden;
	background:
		radial-gradient(40rem 22rem at 85% 0%, rgba(16,185,129,.12), transparent 70%),
		linear-gradient(150deg, #0B1322 0%, #0F172A 65%, #11271F 100%);
}
.reg > .container { position: relative; z-index: 1; }
.reg__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.reg-card {
	position: relative; display: flex; flex-direction: column; border-radius: 1.5rem; overflow: hidden;
	background: linear-gradient(165deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 100%);
	border: 1px solid rgba(255,255,255,.15); border-top-color: rgba(255,255,255,.3);
	box-shadow: 0 16px 36px -18px rgba(0,0,0,.55);
	transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.reg-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 30px 56px -22px color-mix(in srgb, var(--c) 40%, rgba(0,0,0,.6)); }
/* Row 1: the district map (region highlighted, capital pinned) */
.reg-card__map { position: relative; display: block; height: 210px; padding: .9rem; }
.reg-card__svg {
	width: 100%; height: 100%;
	--map-base: rgba(148,163,184,.16);                       /* rest of the country */
	--map-hl: color-mix(in srgb, var(--c) 72%, #fff);        /* this card's region  */
	stroke: rgba(2,6,23,.55); stroke-width: 1.6;             /* district borders    */
	filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
	transition: filter .3s ease;
}
.reg-card:hover .reg-card__svg { filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--c) 45%, rgba(0,0,0,.5))); }
.reg-card__dot {
	fill: var(--color-accent); stroke: rgba(255,255,255,.85); stroke-width: 5;
	filter: drop-shadow(0 0 10px rgba(245,158,11,.9));
}
.reg-card__pulse {
	fill: none; stroke: var(--color-accent); stroke-width: 5;
	transform-box: fill-box; transform-origin: center;
	animation: reg-pulse 2s ease-out infinite;
}
@keyframes reg-pulse { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
/* Row 2: name + CTA */
.reg-card__bar {
	display: flex; align-items: center; justify-content: space-between; gap: .8rem;
	padding: 1.1rem 1.4rem; border-top: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.04);
}
.reg-card__name { color: #fff; font-weight: 800; font-size: var(--fs-base); display: flex; flex-direction: column; line-height: 1.25; }
.reg-card__name em { color: rgba(255,255,255,.6); font-size: var(--fs-xs); font-style: normal; font-weight: 600; }
.reg-card__cta { display: inline-flex; align-items: center; gap: .45rem; color: var(--color-accent-light); font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }
/* Hover: details take over the whole card */
.reg-card__over {
	position: absolute; inset: 0; z-index: 2; padding: 1.6rem;
	display: flex; flex-direction: column; justify-content: center; gap: .55rem;
	background:
		linear-gradient(150deg, rgba(255,255,255,.16) 0%, transparent 45%, rgba(0,0,0,.25) 100%),
		linear-gradient(135deg, color-mix(in srgb, var(--c) 92%, #000), color-mix(in srgb, var(--c) 55%, #000));
	opacity: 0; transform: translateY(14px); pointer-events: none;
	transition: opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.reg-card:hover .reg-card__over, .reg-card:focus-visible .reg-card__over { opacity: 1; transform: translateY(0); }
.reg-card__over strong { color: #fff; font-size: 1.05rem; font-weight: 800; margin-bottom: .3rem; }
.reg-card__detail { display: flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.88); font-size: var(--fs-sm); }
.reg-card__detail i { width: 1rem; text-align: center; color: rgba(255,255,255,.65); font-size: .8rem; }
.reg-card__overcta {
	display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; margin-top: .6rem;
	padding: .5rem 1.15rem; border-radius: var(--r-full); font-size: .82rem; font-weight: 700;
	background: #fff; color: var(--c);
}

/* ── Organizational Hierarchy: visual chain ────────────────────────────────── */
.hier { position: relative; max-width: 860px; margin-inline: auto; padding: 1rem 0; }
.hier::before { /* central spine */
	content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%);
	background: linear-gradient(180deg, var(--color-accent), var(--color-primary-mid), var(--color-primary));
	border-radius: 3px; opacity: .5;
}
.hier-level { position: relative; display: flex; align-items: center; gap: 2.2rem; width: 50%; padding: 1.4rem 0; padding-right: 3.2rem; }
.hier-level.is-right { margin-left: 50%; flex-direction: row-reverse; padding-right: 0; padding-left: 3.2rem; }
.hier-level__node {
	position: absolute; top: 50%; right: -29px; transform: translateY(-50%); z-index: 1;
	width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	font-size: 1.25rem; color: #fff;
	background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #0F172A));
	border: 3px solid var(--color-white);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 35%, transparent), 0 14px 28px -10px color-mix(in srgb, var(--c) 70%, transparent);
}
.hier-level.is-right .hier-level__node { right: auto; left: -29px; }
.hier-level__card {
	flex: 1; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 1.25rem;
	padding: 1.4rem 1.6rem; box-shadow: 0 10px 26px -18px rgba(2,6,23,.3);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.hier-level:hover .hier-level__card { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 22px 44px -20px color-mix(in srgb, var(--c) 40%, rgba(2,6,23,.35)); }
.hier-level__card h3 { font-size: var(--fs-lg); font-weight: 800; color: var(--color-text); margin-bottom: .25rem; }
.hier-level__card p { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.6; margin: 0; }

/* ── About responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.ab-vals__grid { grid-template-columns: repeat(2, 1fr); }
	.wf-grid { grid-template-columns: repeat(2, 1fr); }
	.reg__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.dig-row, .dig-row.is-rev { grid-template-columns: 1fr; }
	.dig-row.is-rev .dig-row__portrait { order: 0; }
	.dig-row__portrait { min-height: 360px; }
	.hier::before { left: 29px; transform: none; }
	.hier-level, .hier-level.is-right { width: 100%; margin-left: 0; flex-direction: row; padding: 1rem 0 1rem 4.6rem; }
	.hier-level__node, .hier-level.is-right .hier-level__node { left: 0; right: auto; }
}
@media (max-width: 640px) {
	.ab-vals__grid, .wf-grid, .reg__grid { grid-template-columns: 1fr; }
	.dig-row__body { padding: 1.6rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
	.wf-card__inner { transition: none; }
	.reg-card__pulse { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Registration page
   ══════════════════════════════════════════════════════════════════════════ */
.reg-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
/* Hero video / elegant placeholder */
.reg-hero__video {
	position: relative; aspect-ratio: 16 / 9; border-radius: 1.4rem; overflow: hidden;
	background: linear-gradient(150deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%);
	border: 1px solid rgba(255,255,255,.18); border-top-color: rgba(255,255,255,.34);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 30px 60px -26px rgba(0,0,0,.6);
}
.reg-hero__video-media { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.reg-hero__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.reg-hero__ph-glow { position: absolute; width: 60%; height: 60%; border-radius: 50%; background: radial-gradient(circle, rgba(245,158,11,.30), transparent 70%); filter: blur(40px); }
.reg-hero__play {
	position: relative; width: 5rem; height: 5rem; border: 0; border-radius: 50%; cursor: pointer;
	display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #1f2937;
	background: linear-gradient(135deg, #FCD34D, var(--color-accent));
	box-shadow: 0 16px 34px -10px rgba(245,158,11,.6);
	transition: transform .25s ease;
}
.reg-hero__play::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(245,158,11,.45); animation: reg-pulse 2.2s ease-out infinite; }
.reg-hero__play:hover { transform: scale(1.08); }
.reg-hero__ph-label { position: relative; font-size: var(--fs-sm); font-weight: 600; color: rgba(255,255,255,.78); }
.reg-hero__btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.7rem; border-radius: var(--r-full); font-weight: 700; font-size: var(--fs-sm); line-height: 1; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, gap .2s ease; }
.reg-hero__btn--primary { background: var(--color-accent); color: #1f2937; box-shadow: 0 10px 26px -8px rgba(245,158,11,.5); }
.reg-hero__btn--primary:hover { transform: translateY(-3px); color: #1f2937; }
.reg-hero__btn--ghost { color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.reg-hero__btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; transform: translateY(-2px); }

/* Pathways: premium static cards */
.reg-paths { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-xl); align-items: stretch; }
.regp {
	position: relative; overflow: hidden; display: flex; flex-direction: column;
	padding: 2.25rem 2rem; border-radius: 1.6rem;
	background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
	border: 1px solid var(--color-border);
	box-shadow: 0 14px 36px -22px rgba(2,6,23,.3);
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.regp::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); }
.regp::after { content: ''; position: absolute; top: -40%; right: -30%; width: 70%; height: 80%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%); pointer-events: none; transition: transform .4s ease; }
.regp:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 30px 56px -24px color-mix(in srgb, var(--c) 40%, rgba(2,6,23,.4)); }
.regp:hover::after { transform: scale(1.25); }
.regp__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.regp__icon {
	width: 3.6rem; height: 3.6rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	border-radius: 1.1rem; font-size: 1.5rem; color: #fff;
	background: linear-gradient(135deg, color-mix(in srgb, var(--c) 88%, #fff), color-mix(in srgb, var(--c) 65%, #000));
	box-shadow: 0 14px 28px -8px color-mix(in srgb, var(--c) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.4);
}
.regp__tag { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); padding: .35rem .85rem; border-radius: var(--r-full); }
.regp__title { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--color-text); margin-bottom: .35rem; }
.regp__sub { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: 1.25rem; }
.regp__points { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.regp__points li { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text); }
.regp__check { flex-shrink: 0; width: 1.4rem; height: 1.4rem; margin-top: .05rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: .62rem; color: #fff; background: var(--c); }
.regp__btn {
	align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem;
	padding: .85rem 1.6rem; border-radius: var(--r-full); font-size: .9rem; font-weight: 800; color: #fff !important;
	background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 58%, #000));
	box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--c) 70%, transparent);
	transition: gap .2s ease, transform .2s ease;
}
.regp__btn:hover { gap: .85rem; transform: translateY(-2px); color: #fff !important; }

/* Statistics on a dark band */
.reg-stats { position: relative; overflow: hidden; padding: clamp(2.5rem, 5vw, 4rem) 0; background: linear-gradient(150deg, #0B1322 0%, #0F172A 60%, #11271F 100%); }
.reg-stats::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(34rem 20rem at 50% 0%, rgba(16,185,129,.14), transparent 70%); }
.reg-stats > .container { position: relative; z-index: 1; }
.reg-stats__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-lg); }
.reg-stat {
	position: relative; overflow: hidden; text-align: center; padding: 2rem 1.2rem; border-radius: 1.3rem;
	background: linear-gradient(165deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 100%);
	border: 1px solid rgba(255,255,255,.15); border-top-color: rgba(255,255,255,.3);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 14px 30px -16px rgba(0,0,0,.5);
	transition: transform .3s ease, border-color .3s ease;
}
.reg-stat::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--c), transparent); opacity: .85; }
.reg-stat:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.reg-stat__icon {
	width: 3rem; height: 3rem; margin: 0 auto .85rem; display: flex; align-items: center; justify-content: center;
	border-radius: .9rem; font-size: 1.15rem; color: #fff;
	background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #000));
	box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--c) 70%, transparent);
}
.reg-stat__num { display: block; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1; }
.reg-stat__lbl { display: block; margin-top: .6rem; font-size: var(--fs-sm); color: rgba(255,255,255,.72); line-height: 1.4; }

/* Intro video */
.reg-video { position: relative; max-width: 960px; margin-inline: auto; border-radius: 1.5rem; overflow: hidden; padding: 6px; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); box-shadow: 0 30px 60px -24px rgba(2,6,23,.4); }
.reg-video__media { display: block; width: 100%; aspect-ratio: 16/9; border-radius: 1.15rem; background: #000; }

/* FAQ accordion (native details/summary) */
.reg-faq { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: .85rem; }
.reg-faq__item { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 1rem; overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease; }
.reg-faq__item[open] { border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); box-shadow: 0 14px 30px -18px rgba(2,6,23,.25); }
.reg-faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; font-weight: 700; font-size: var(--fs-base); color: var(--color-text); }
.reg-faq__q::-webkit-details-marker { display: none; }
.reg-faq__q i { flex-shrink: 0; width: 1.9rem; height: 1.9rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: .75rem; color: var(--color-primary); background: var(--color-primary-light); transition: transform .3s ease; }
.reg-faq__item[open] .reg-faq__q i { transform: rotate(135deg); }
.reg-faq__a { padding: 0 1.4rem 1.2rem; }
.reg-faq__a p { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); line-height: 1.7; }

@media (max-width: 1024px) {
	.reg-hero__grid { grid-template-columns: 1fr; }
	.reg-stats__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	.reg-paths { grid-template-columns: 1fr; }
	.reg-stats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.reg-stats__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.reg-flip__inner { transition: none; }
}

/* ── Affiliation: Qualification Awarding Bodies grid ───────────────────────── */
/* Region filter tabs (minimal pills) */
.qab-tabs { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-bottom: 2.5rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--color-border); }
.qab-tab { padding: .55rem 1.15rem; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-muted); background: transparent; border: 0; border-radius: var(--r-full); cursor: pointer; transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.qab-tab:hover { color: var(--color-primary); background: var(--color-primary-light); }
.qab-tab.is-active { color: #fff; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-mid) 100%); box-shadow: 0 8px 20px -8px rgba(10,104,71,.5); }

/* Elegant minimal QAB cards: centered logo + title + location */
.qab-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.qab-card {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	padding: 1.65rem 1rem 1.35rem; border-radius: var(--r-lg); color: inherit;
	background: #fff; border: 1px solid var(--color-border);
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.qab-card:not(.qab-card--static):hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--c) 55%, transparent);
	box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--c) 50%, rgba(2,6,23,.4));
}
.qab-card__logo {
	width: 4.6rem; height: 4.6rem; flex-shrink: 0; margin-bottom: 1rem; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	background: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: var(--r-md);
	transition: transform .25s ease;
}
.qab-card__logo img { width: 100%; height: 100%; object-fit: contain; padding: .55rem; }
.qab-card__logo i { font-size: 1.7rem; color: var(--c); }
.qab-card:not(.qab-card--static):hover .qab-card__logo { transform: scale(1.05); }
.qab-card__name {
	font-size: .82rem; font-weight: 700; color: var(--color-text); line-height: 1.4; margin-bottom: .5rem;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qab-card__meta { margin-top: auto; }
.qab-card__loc { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-xs); color: var(--color-text-muted); }
.qab-card__loc i { font-size: .6rem; color: var(--c); }
.qab-card.is-hidden { display: none; }
.qab-note { text-align: center; margin-top: var(--sp-xl); font-size: var(--fs-xs); color: var(--color-text-light); }
@media (max-width: 1280px) { .qab-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) { .qab-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .qab-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Qualifications & Courses registry ────────────────────────────────────── */
.qreg__tabs { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-bottom: 1.5rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--color-border); }
.qreg__bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: center; margin-bottom: 1.75rem; }
.qreg__search { position: relative; display: inline-flex; align-items: center; flex: 1 1 280px; max-width: 420px; }
.qreg__search i { position: absolute; left: 1rem; color: var(--color-text-light); font-size: .85rem; pointer-events: none; }
.qreg__search input { width: 100%; padding: .7rem 1rem .7rem 2.4rem; border: 1px solid var(--color-border); border-radius: var(--r-full); font: inherit; font-size: var(--fs-sm); background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.qreg__search input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent); }
.qreg__bar select { padding: .7rem 2.2rem .7rem 1rem; border: 1px solid var(--color-border); border-radius: var(--r-full); font: inherit; font-size: var(--fs-sm); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E") no-repeat right 1rem center; -webkit-appearance: none; appearance: none; cursor: pointer; }
.qreg__bar select:focus { outline: none; border-color: var(--color-primary); }

.qreg__tablewrap { position: relative; }
.qreg__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.qreg__table thead th { text-align: left; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); padding: .85rem 1rem; border-bottom: 2px solid var(--color-border); white-space: nowrap; }
.qreg__row td { padding: 1rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; color: var(--color-text); }
.qreg__row:hover td { background: var(--color-bg-light); }
.qreg__row.is-hidden { display: none; }
.qreg__code { display: inline-block; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .72rem; font-weight: 700; color: var(--color-primary); background: var(--color-primary-light); padding: .25rem .5rem; border-radius: var(--r-sm); }
.qreg__level { display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); padding: .15rem .55rem; border-radius: var(--r-sm); white-space: nowrap; }
.qreg__title { display: block; font-weight: 700; color: var(--color-text); line-height: 1.3; }
.qreg__trade { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: .15rem; }
.qreg__program { font-weight: 600; color: var(--color-primary); }
.qreg__program:hover { text-decoration: underline; }
.qreg__docs { display: flex; flex-wrap: wrap; gap: .4rem; }
.qreg__doc { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); font-weight: 600; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent); padding: .35rem .7rem; border-radius: var(--r-full); transition: background-color .2s ease, color .2s ease; }
.qreg__doc:hover { background: var(--color-primary); color: #fff; }
.qreg__noresults { text-align: center; padding: 2.5rem 1rem; color: var(--color-text-muted); }
.qreg__empty-state { text-align: center; padding: 3rem 1rem; color: var(--color-text-muted); }

@media (max-width: 860px) {
	.qreg__table thead { display: none; }
	.qreg__table, .qreg__table tbody, .qreg__row, .qreg__row td { display: block; width: 100%; }
	.qreg__row { border: 1px solid var(--color-border); border-radius: var(--r-md); margin-bottom: .9rem; padding: .3rem 1rem; background: #fff; }
	.qreg__row:hover td { background: transparent; }
	.qreg__row td { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem; padding: .55rem 0; border-bottom: 1px dashed var(--color-border); text-align: right; }
	.qreg__row td:last-child { border-bottom: 0; }
	.qreg__row td::before { content: attr(data-label); font-weight: 700; font-size: var(--fs-xs); color: var(--color-text-muted); text-align: left; flex-shrink: 0; }
	.qreg__docs { justify-content: flex-end; }
}

/* ── Single qualification ─────────────────────────────────────────────────── */
.qual-single { max-width: 880px; }
.qual-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.qual-fact { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-md); }
.qual-fact__icon { width: 2.6rem; height: 2.6rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--color-primary-light); color: var(--color-primary); }
.qual-fact__body { display: flex; flex-direction: column; }
.qual-fact__label { font-size: var(--fs-xs); color: var(--color-text-muted); }
.qual-fact__value { font-size: var(--fs-sm); color: var(--color-text); }
.qual-content { margin-bottom: 2rem; line-height: 1.7; color: var(--color-text); }
.qual-docs-block h2 { font-size: var(--fs-xl); margin-bottom: 1rem; }
.qual-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; margin-bottom: 2rem; }
.qual-doc { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-md); color: var(--color-text); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.qual-doc:hover { border-color: var(--color-primary); box-shadow: 0 12px 24px -16px rgba(10,104,71,.4); transform: translateY(-2px); }
.qual-doc__icon { color: var(--color-primary); font-size: 1.1rem; }
.qual-doc__label { font-weight: 600; flex: 1; }
.qual-doc__go { color: var(--color-text-light); font-size: .8rem; }
.qual-program-link { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem; padding: 1.25rem; background: var(--color-bg-light); border-radius: var(--r-md); margin-bottom: 1.5rem; }
.qual-program-link span { font-weight: 600; }
.qual-back a { display: inline-flex; align-items: center; gap: .4rem; color: var(--color-text-muted); font-weight: 600; }
.qual-back a:hover { color: var(--color-primary); }

/* ── Students: program-first selector ─────────────────────────────────────── */
.stu-prog-select { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.stu-prog-card {
	flex: 0 1 280px; display: flex; flex-direction: column; align-items: center; gap: .65rem; text-align: center;
	padding: 1.7rem 1.4rem; border-radius: var(--r-lg); background: #fff; border: 2px solid var(--color-border);
	cursor: pointer; font: inherit; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.stu-prog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); }
.stu-prog-card.is-active {
	border-color: var(--color-primary);
	background: linear-gradient(180deg, #fff 0%, var(--color-primary-light) 100%);
	box-shadow: 0 20px 44px -22px color-mix(in srgb, var(--color-primary) 60%, transparent);
}
.stu-prog-card__icon { width: 3.6rem; height: 3.6rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); font-size: 1.45rem; transition: background .25s ease, color .25s ease, transform .25s ease; }
.stu-prog-card:hover .stu-prog-card__icon { transform: scale(1.06); }
.stu-prog-card.is-active .stu-prog-card__icon { background: var(--color-primary); color: #fff; }
.stu-prog-card__name { font-weight: 800; font-size: 1.12rem; color: var(--color-text); letter-spacing: -.01em; }
.stu-prog-card__count { font-size: var(--fs-xs); color: var(--color-text-muted); }
.stu-prog-coursehead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.stu-prog-coursehead__title { font-size: var(--fs-xl); font-weight: 800; color: var(--color-text); margin: 0; }
.stu-prog-coursehead__title span { color: var(--color-primary); }
.stu-prog-coursehead .stu-course-search { margin: 0; flex: 0 1 360px; }
@media (max-width: 560px) { .stu-prog-card { flex-basis: 100%; } }

/* Trade (sector) chips for the selected program */
.stu-trade-filter { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0 0 1.75rem; }
.stu-trade-filter:empty { display: none; }
.stu-trade-btn {
	padding: .45rem 1rem; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-muted);
	background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-full); cursor: pointer;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.stu-trade-btn:hover { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.stu-trade-btn.is-active { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }

/* Pagination */
.stu-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; margin-top: var(--sp-2xl); }
.stu-pager:empty { display: none; }
.stu-page-btn {
	min-width: 2.5rem; height: 2.5rem; padding: 0 .65rem; display: inline-flex; align-items: center; justify-content: center;
	font: inherit; font-weight: 700; font-size: var(--fs-sm); color: var(--color-text);
	background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-md); cursor: pointer;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.stu-page-btn:hover:not([disabled]) { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-1px); }
.stu-page-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.stu-page-btn[disabled] { opacity: .4; cursor: not-allowed; }
.stu-page-ellipsis { padding: 0 .35rem; color: var(--color-text-light); }

/* ── Takamul (SVP) page ───────────────────────────────────────────────────── */
.tkm-subnav { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); }
.tkm-subnav__inner { display: flex; flex-wrap: nowrap; gap: .35rem; overflow-x: auto; padding: .6rem var(--container-pad); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tkm-subnav__inner::-webkit-scrollbar { display: none; }
.tkm-subnav a { white-space: nowrap; padding: .5rem 1rem; border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-muted); transition: color .2s ease, background-color .2s ease; }
.tkm-subnav a:hover { color: var(--color-primary); background: var(--color-primary-light); }
#overview, #eligibility, #procedure, #trades, #centers, #apply { scroll-margin-top: 80px; }

.tkm-overview { max-width: 60rem; margin: 0 auto 2.5rem; font-size: 1.08rem; line-height: 1.8; color: var(--color-text); text-align: center; }
.tkm-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.tkm-infocard { padding: 1.8rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.tkm-infocard__icon { width: 3.2rem; height: 3.2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--color-primary-light); color: var(--color-primary); font-size: 1.3rem; margin-bottom: 1rem; }
.tkm-infocard h3 { font-size: var(--fs-xl); margin-bottom: .5rem; }
.tkm-infocard p { color: var(--color-text-muted); line-height: 1.7; }
@media (max-width: 720px) { .tkm-twocol { grid-template-columns: 1fr; } }

.tkm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; counter-reset: tkm; }
.tkm-step { display: flex; align-items: flex-start; gap: .9rem; padding: 1.25rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-md); }
.tkm-step__num { flex-shrink: 0; width: 2.2rem; height: 2.2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-mid)); color: #fff; font-weight: 800; }
.tkm-step__text { font-size: var(--fs-sm); line-height: 1.55; color: var(--color-text); }

.tkm-toolsearch { position: relative; display: flex; align-items: center; max-width: 420px; margin: 0 auto 1.75rem; }
.tkm-toolsearch i { position: absolute; left: 1rem; color: var(--color-text-light); font-size: .85rem; pointer-events: none; }
.tkm-toolsearch input { width: 100%; padding: .75rem 1rem .75rem 2.5rem; border: 1px solid var(--color-border); border-radius: var(--r-full); font: inherit; font-size: var(--fs-sm); background: #fff; }
.tkm-toolsearch input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent); }

.tkm-trades { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; }
.tkm-trade { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-md); color: var(--color-text); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.tkm-trade:hover { border-color: var(--color-primary); box-shadow: 0 14px 26px -18px rgba(10,104,71,.4); transform: translateY(-2px); }
.tkm-trade__icon { width: 2.6rem; height: 2.6rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--color-primary-light); color: var(--color-primary); }
.tkm-trade__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tkm-trade__name { font-weight: 700; }
.tkm-trade__type { font-size: var(--fs-xs); color: var(--color-text-muted); }
.tkm-trade__dl { color: var(--color-text-light); }

.tkm-cfilters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: center; margin-bottom: 1.75rem; }
.tkm-cfilters__search { margin: 0; flex: 1 1 320px; max-width: 420px; }
.tkm-cfilters select { padding: .75rem 2.2rem .75rem 1rem; border: 1px solid var(--color-border); border-radius: var(--r-full); font: inherit; font-size: var(--fs-sm); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E") no-repeat right 1rem center; -webkit-appearance: none; appearance: none; cursor: pointer; }
.tkm-cfilters select:focus { outline: none; border-color: var(--color-primary); }

.tkm-centers { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.1rem; }
.tkm-center { display: flex; flex-direction: column; gap: .55rem; padding: 1.35rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.tkm-center__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.tkm-center__name { font-size: 1.02rem; font-weight: 800; line-height: 1.35; color: var(--color-text); }
.tkm-center__status { flex-shrink: 0; font-size: var(--fs-xs); font-weight: 700; padding: .2rem .6rem; border-radius: var(--r-full); }
.tkm-center__status--active { color: #047857; background: #d1fae5; }
.tkm-center__status--inactive { color: #b45309; background: #fef3c7; }
.tkm-center__meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: var(--fs-sm); color: var(--color-text-muted); }
.tkm-center__meta i { color: var(--color-primary); margin-right: .25rem; }
.tkm-center__addr { font-size: var(--fs-xs); color: var(--color-text-light); line-height: 1.5; }
.tkm-center__trades { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.55; }
.tkm-center__contact { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: auto; padding-top: .5rem; border-top: 1px dashed var(--color-border); font-size: var(--fs-xs); }
.tkm-center__contact a { color: var(--color-primary); font-weight: 600; word-break: break-word; }
.tkm-center__contact i { margin-right: .3rem; }

.tkm-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; max-width: 920px; margin: 0 auto; }
.tkm-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); background: #000; }
.tkm-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tkm-video__title { font-size: var(--fs-base); font-weight: 700; margin-top: .85rem; line-height: 1.4; }
.tkm-noresults { text-align: center; padding: 2rem 1rem; color: var(--color-text-muted); }

/* ── Matric-Tech program page ─────────────────────────────────────────────── */
.mtech-lead { max-width: 62rem; margin: 0 auto 2rem; font-size: 1.08rem; line-height: 1.85; color: var(--color-text); text-align: center; }
.mtech-regions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.mtech-region { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary); background: var(--color-primary-light); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent); padding: .45rem 1rem; border-radius: var(--r-full); }
.mtech-region i { font-size: .8rem; }

.mtech-trades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.mtech-trade {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: .85rem;
	padding: 1.8rem 1.1rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.mtech-trade:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); box-shadow: 0 18px 38px -22px color-mix(in srgb, var(--color-primary) 55%, transparent); }
.mtech-trade__icon { width: 3.6rem; height: 3.6rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.5rem; color: var(--color-primary); background: var(--color-primary-light); transition: background .25s ease, color .25s ease, transform .25s ease; }
.mtech-trade:hover .mtech-trade__icon { background: var(--color-primary); color: #fff; transform: scale(1.06); }
.mtech-trade__name { font-weight: 700; font-size: var(--fs-sm); line-height: 1.4; color: var(--color-text); }
@media (max-width: 900px) { .mtech-trades { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mtech-trades { grid-template-columns: 1fr; } }

.mtech-infograph { margin: 0; text-align: center; }
.mtech-infograph img { display: block; margin-inline: auto; max-width: min(100%, 900px); height: auto; border-radius: var(--r-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); }

.mtech-partners { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; max-width: 56rem; margin: 0 auto; }
.mtech-partner { display: flex; align-items: flex-start; gap: .65rem; padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-md); font-weight: 600; color: var(--color-text); }
.mtech-partner i { color: var(--color-primary); margin-top: .15rem; }
@media (max-width: 720px) { .mtech-partners { grid-template-columns: 1fr; } }

.mtech-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem; margin-top: 2.5rem; padding: 1.8rem 2rem; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%); color: #fff; }
.mtech-cta__text h3 { font-size: var(--fs-xl); margin: 0 0 .25rem; color: #fff; }
.mtech-cta__text p { margin: 0; color: rgba(255,255,255,.82); }

/* ── PM message banner (full-width, typing effect) ────────────────────────── */
.pm-banner {
	position: relative; width: 100vw; margin-left: 50%; transform: translateX(-50%);
	display: flex; align-items: center; overflow: hidden;
	min-height: clamp(360px, 40vw, 580px);
	background-size: cover; background-position: center right; background-repeat: no-repeat; background-color: #0b1220;
}
.pm-banner::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgba(7,15,30,.82) 0%, rgba(7,15,30,.6) 36%, rgba(7,15,30,.18) 60%, transparent 78%);
}
.pm-banner__inner { position: relative; width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.pm-banner__text { width: 66%; color: #fff; }
.pm-banner__eyebrow { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-light); margin-bottom: 1.1rem; }
.pm-banner__quote { font-size: clamp(1.15rem, 2.1vw, 2rem); font-weight: 700; line-height: 1.55; min-height: 1.55em; margin: 0; text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.pm-banner__quote.is-typing::after { content: '|'; margin-left: 2px; color: var(--color-accent-light); animation: pm-caret 1s steps(1) infinite; }
@keyframes pm-caret { 50% { opacity: 0; } }
.pm-banner__author { display: block; margin-top: 1.4rem; font-size: clamp(.98rem, 1.4vw, 1.18rem); font-weight: 800; }
.pm-banner__author span { display: block; font-weight: 500; font-size: .82em; color: rgba(255,255,255,.82); margin-top: .1rem; }
@media (max-width: 768px) {
	.pm-banner { background-position: center; min-height: 460px; }
	.pm-banner::before { background: linear-gradient(180deg, rgba(7,15,30,.5) 0%, rgba(7,15,30,.72) 100%); }
	.pm-banner__inner { display: flex; justify-content: center; }
	.pm-banner__text { width: 90%; text-align: center; }
}

/* ═══ Skills for Tomorrow program page ═══════════════════════════════════════ */
.sft-narrow { max-width: 64rem; }
#how-to-apply, #eligibility, #courses, #sft-video { scroll-margin-top: 90px; }
/* Hero (slate, not green) */
.sft-hero { position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 6rem) 0; background: linear-gradient(135deg, #0F172A 0%, #1E293B 55%, #0B1220 100%); }
.sft-hero::before { content: ''; position: absolute; top: -8rem; right: -6rem; width: 28rem; height: 28rem; border-radius: 50%; background: radial-gradient(circle, rgba(245,158,11,.12), transparent 70%); pointer-events: none; }
.sft-hero::after { content: ''; position: absolute; bottom: -10rem; left: -8rem; width: 32rem; height: 32rem; border-radius: 50%; background: radial-gradient(circle, rgba(16,185,129,.10), transparent 70%); pointer-events: none; }
.sft-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.sft-hero__content h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -.02em; margin: 1.2rem 0; }
.sft-hero__content > p { color: rgba(255,255,255,.82); font-size: 1.1rem; line-height: 1.7; max-width: 40rem; margin-bottom: 1.75rem; }
.sft-hero__badges { display: flex; flex-wrap: wrap; gap: .6rem; }
.sft-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.sft-badge--live { background: var(--color-primary-mid); color: #fff; }
.sft-badge--date { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.sft-badge--ondark { background: rgba(255,255,255,.1); color: var(--color-accent-light); }
.sft-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: sft-pulse 2s infinite; }
@keyframes sft-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 50% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } }
.sft-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.sft-hero__stats { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.sft-hero__stats div { text-align: center; }
.sft-hero__stats strong { display: block; font-size: 1.9rem; font-weight: 800; color: #fff; }
.sft-hero__stats span { font-size: .82rem; color: rgba(255,255,255,.6); }
/* Countdown card */
.sft-hero__card { background: rgba(255,255,255,.08); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-xl); padding: clamp(1.5rem, 3vw, 2.25rem); text-align: center; }
.sft-hero__card h3 { color: #fff; font-size: 1.15rem; font-weight: 700; margin-bottom: 1.4rem; }
.sft-countdown { display: flex; justify-content: center; gap: .75rem; margin-bottom: 1.5rem; }
.sft-cd { flex: 1; min-width: 0; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark, #064E3B)); border-radius: var(--r-md); padding: .7rem .3rem; }
.sft-cd strong { display: block; font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1; }
.sft-cd span { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.7); }
.sft-hero__limited { background: rgba(255,255,255,.08); border-radius: var(--r-md); padding: 1rem; margin-bottom: 1.4rem; }
.sft-hero__limited-title { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--color-accent-light); margin-bottom: .35rem; }
.sft-hero__limited p { color: rgba(255,255,255,.75); font-size: .85rem; margin: 0; }
.sft-hero__start { display: block; width: 100%; padding: .95rem; border-radius: var(--r-md); font-weight: 800; color: #fff !important; background: linear-gradient(135deg, var(--color-accent), #d97706); transition: transform .25s ease, box-shadow .25s ease; }
.sft-hero__start:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(245,158,11,.55); }
@media (max-width: 900px) { .sft-hero__grid { grid-template-columns: 1fr; } }

/* About */
.sft-about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.sft-about__text h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 800; margin: .6rem 0 1.1rem; }
.sft-about__text > p { color: var(--color-text-muted); line-height: 1.8; margin-bottom: 1.1rem; }
.sft-features { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1.75rem; }
.sft-feature { display: flex; align-items: flex-start; gap: .8rem; }
.sft-feature__icon { width: 2.6rem; height: 2.6rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--color-primary-light); color: var(--color-primary); }
.sft-feature strong { display: block; font-size: var(--fs-sm); color: var(--color-text); }
.sft-feature span { font-size: var(--fs-xs); color: var(--color-text-muted); }
.sft-about__media { position: relative; }
.sft-about__imgwrap { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.sft-about__imgwrap img { display: block; width: 100%; height: clamp(280px, 36vw, 420px); object-fit: cover; }
.sft-about__stat { position: absolute; left: -1rem; bottom: -1.5rem; display: flex; align-items: center; gap: .9rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 1rem 1.25rem; }
.sft-about__stat-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent); font-size: 1.2rem; }
.sft-about__stat strong { display: block; font-size: 1.5rem; font-weight: 800; color: var(--color-text); }
.sft-about__stat span { font-size: var(--fs-xs); color: var(--color-text-muted); }
@media (max-width: 900px) { .sft-about { grid-template-columns: 1fr; } .sft-about__media { margin-bottom: 1.5rem; } }

/* Steps */
.sft-steps { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 1rem; }
.sft-steps::before { content: ''; position: absolute; top: 1.1rem; left: 6%; right: 6%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #f97316, #06b6d4, #10b981, #f59e0b); z-index: 0; }
.sft-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 0 .25rem; }
.sft-step__num { width: 2.2rem; height: 2.2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800; color: #fff; background: var(--sc); box-shadow: 0 0 0 4px #fff, 0 6px 14px -4px var(--sc); margin-bottom: .85rem; }
.sft-step h3 { font-size: .9rem; font-weight: 700; color: var(--color-text); }
.sft-step p { font-size: var(--fs-xs); color: var(--color-text-muted); margin: 0; }
.sft-step--final h3 { color: var(--color-accent); }
@media (max-width: 900px) { .sft-steps { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; } .sft-steps::before { display: none; } }

/* Eligibility */
.sft-elig { list-style: none; margin: 0 0 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 1.1rem; }
.sft-elig li { display: flex; align-items: flex-start; gap: 1rem; }
.sft-elig__num { width: 1.6rem; height: 1.6rem; flex-shrink: 0; margin-top: .15rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: .72rem; font-weight: 800; color: #fff; background: var(--sc); }
.sft-elig strong { display: block; color: var(--color-text); }
.sft-elig p { margin: .15rem 0 0; color: var(--color-text-muted); font-size: var(--fs-sm); line-height: 1.6; }
.sft-quota { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; border-radius: var(--r-lg); color: #fff; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-mid)); }
.sft-quota__icon { width: 2.6rem; height: 2.6rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.2); }
.sft-quota strong { display: block; }
.sft-quota p { margin: .1rem 0 0; font-size: var(--fs-sm); color: rgba(255,255,255,.85); }

/* Training areas */
.sft-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.sft-area { position: relative; display: flex; gap: 0; overflow: hidden; background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-lg); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.sft-area:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -22px color-mix(in srgb, var(--ac) 50%, rgba(2,6,23,.4)); border-color: color-mix(in srgb, var(--ac) 35%, var(--color-border)); }
.sft-area__bar { width: 7px; flex-shrink: 0; background: linear-gradient(180deg, var(--ac), color-mix(in srgb, var(--ac) 60%, #000)); transition: width .25s ease; }
.sft-area:hover .sft-area__bar { width: 11px; }
.sft-area__icon { width: 3rem; height: 3rem; flex-shrink: 0; margin: 1.25rem 0 0 1.25rem; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); color: #fff; font-size: 1.1rem; background: linear-gradient(135deg, var(--ac), color-mix(in srgb, var(--ac) 65%, #000)); box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--ac) 60%, transparent); }
.sft-area__body { flex: 1; min-width: 0; padding: 1.25rem; }
.sft-area__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.sft-area__head h3 { font-size: 1.02rem; font-weight: 800; color: var(--color-text); }
.sft-area__badge { flex-shrink: 0; font-size: var(--fs-xs); font-weight: 700; padding: .15rem .6rem; border-radius: 999px; color: var(--ac); background: color-mix(in srgb, var(--ac) 14%, transparent); }
.sft-area__desc { font-size: var(--fs-sm); color: var(--color-text-muted); margin: .4rem 0 .7rem; line-height: 1.5; }
.sft-area__meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: var(--fs-xs); color: var(--color-text-light); margin-bottom: 1rem; }
.sft-area__meta i { margin-right: .25rem; }
.sft-area__cta { display: flex; gap: .5rem; }
.sft-area__btn { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .9rem; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 700; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.sft-area__btn--ghost { background: var(--color-bg-section); color: var(--color-text); }
.sft-area__btn--ghost:hover { background: var(--color-border); }
.sft-area__btn--primary { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-mid)); color: #fff !important; }
.sft-area__btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 16px -6px rgba(10,104,71,.5); }
@media (max-width: 760px) { .sft-areas, .sft-features { grid-template-columns: 1fr; } }

/* Video */
.sft-videosec { padding: clamp(3rem, 6vw, 5rem) 0; background: #0F172A; }
.sft-videosec__title { color: #fff; }
.sft-video { max-width: 60rem; margin: 0 auto; border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); aspect-ratio: 16/9; background: #000; }
.sft-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Final CTA */
.sft-cta { padding: clamp(3.5rem, 7vw, 6rem) 0; text-align: center; background: linear-gradient(135deg, var(--color-primary) 0%, #064E3B 45%, #0F172A 100%); }
.sft-cta__eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.1rem; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-size: .82rem; font-weight: 700; margin-bottom: 1.25rem; }
.sft-cta h2 { color: #fff; font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; margin-bottom: 1rem; }
.sft-cta > .container > p { color: rgba(255,255,255,.85); font-size: 1.15rem; max-width: 44rem; margin: 0 auto 2rem; line-height: 1.7; }
.sft-cta__btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.sft-cta__trust { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-top: 2.25rem; color: rgba(255,255,255,.85); font-weight: 600; }
.sft-cta__trust i { color: var(--color-primary-mid); margin-right: .35rem; }

/* ── Notifications listing page ───────────────────────────────────────────── */
.notif-list { display: flex; flex-direction: column; gap: 1rem; }
.notif-card { display: flex; gap: 1.1rem; padding: 1.3rem 1.4rem; background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--nc, var(--color-primary)); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease; }
.notif-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.notif-card__icon { width: 2.8rem; height: 2.8rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--nc, var(--color-primary)); background: color-mix(in srgb, var(--nc, var(--color-primary)) 12%, transparent); font-size: 1.1rem; }
.notif-card__body { flex: 1; min-width: 0; }
.notif-card__title { font-size: var(--fs-lg); font-weight: 800; color: var(--color-text); margin: 0 0 .35rem; }
.notif-card__msg { color: var(--color-text-muted); line-height: 1.6; margin: 0 0 .6rem; }
.notif-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; font-size: var(--fs-xs); color: var(--color-text-light); }
.notif-card__meta i { margin-right: .3rem; }
.notif-card__link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--nc, var(--color-primary)); transition: gap .2s ease; }
.notif-card__link:hover { gap: .65rem; }
.notif-empty { text-align: center; padding: 3rem 1rem; color: var(--color-text-muted); font-size: 1.05rem; }
.notif-empty i { display: block; font-size: 2rem; color: var(--color-text-light); margin-bottom: .75rem; }

/* ═══ Nav revamp: pill links + premium animated mega menus ═══════════════════ */
.primary-menu {
	flex: 0 0 auto; width: max-content; max-width: 100%; margin-inline: auto;
	gap: .1rem; padding: .25rem;
	border: 1px solid var(--color-border); border-radius: var(--r-full);
	background: color-mix(in srgb, #fff 72%, transparent); backdrop-filter: blur(8px);
}
.primary-menu > li > a {
	padding: .4rem .85rem; border-radius: var(--r-full); font-weight: 600; font-size: var(--fs-sm);
	transition: color .2s ease, background-color .2s ease;
}
/* kill the old underline on non-parent links (pill fill replaces it) */
.primary-menu > li:not(.menu-item-has-children) > a::after { content: none; }
.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-ancestor > a,
.primary-menu > li.menu-item-has-children:hover > a {
	color: #fff; background: var(--color-accent);
}
.primary-menu .menu-item-has-children > a::after { opacity: .85; }

/* Transparent (over-video) header: light pill, yellow highlight (dark text) */
body.has-hero-video .primary-menu { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.10); }
body.has-hero-video .site-header.nav-solid .primary-menu { border-color: var(--color-border); background: color-mix(in srgb, #fff 72%, transparent); }
body.has-hero-video .primary-menu > li > a:hover,
body.has-hero-video .primary-menu > li.menu-item-has-children:hover > a,
body.has-hero-video .primary-menu > li.current-menu-item > a,
body.has-hero-video .primary-menu > li.current-menu-ancestor > a,
body.has-hero-video .site-header.nav-solid .primary-menu > li > a:hover,
body.has-hero-video .site-header.nav-solid .primary-menu > li.menu-item-has-children:hover > a,
body.has-hero-video .site-header.nav-solid .primary-menu > li.current-menu-item > a,
body.has-hero-video .site-header.nav-solid .primary-menu > li.current-menu-ancestor > a { background: var(--color-accent); color: #fff; }

/* ── Mega menu panel ──────────────────────────────────────────────────────── */
.primary-menu .sub-menu--mega {
	left: 50%; right: auto; transform: translateX(-50%) translateY(-10px);
	width: max-content; min-width: 640px; max-width: min(94vw, 940px);
	padding: 1.6rem; column-count: initial; column-gap: normal;
}
.primary-menu > li:hover > .sub-menu--mega,
.primary-menu > li:focus-within > .sub-menu--mega { transform: translateX(-50%) translateY(0); }
.mega { display: flex; gap: 1.6rem; align-items: stretch; }
.mega__cols { flex: 1; min-width: 0; display: flex; gap: 1.6rem; }
.mega__col { flex: 1; min-width: 0; }
.mega__col-title { display: block; font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary); padding-bottom: .5rem; margin-bottom: .55rem; border-bottom: 1px solid var(--color-border); }
.mega__items { display: flex; flex-direction: column; gap: .12rem; }
.mega-item { display: flex; align-items: flex-start; gap: .75rem; padding: .6rem .7rem; border-radius: var(--r-md); transition: background-color .2s ease, transform .2s ease; }
.mega-item:hover { background: var(--color-bg-light); transform: translateX(3px); }
.mega-item__icon { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); font-size: 1rem; overflow: hidden; color: var(--ic, var(--color-primary)); background: color-mix(in srgb, var(--ic, var(--color-primary)) 13%, transparent); transition: transform .2s ease; }
.mega-item:hover .mega-item__icon { transform: scale(1.08); }
.mega-item__icon--flag { background: var(--color-bg-section); }
.mega-item__icon--flag img { width: 100%; height: 100%; object-fit: cover; }
.mega-item__text { display: flex; flex-direction: column; line-height: 1.35; }
.mega-item__title { font-size: var(--fs-sm); font-weight: 700; color: var(--color-text); }
.mega-item:hover .mega-item__title { color: var(--color-primary); }
.mega-item__desc { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* Feature: latest news card */
.mega__feature { flex: 0 0 290px; display: flex; flex-direction: column; gap: .6rem; padding-left: 1.6rem; border-left: 1px solid var(--color-border); }
.mega__feature-label { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-light); }
.mega-news { display: block; border-radius: var(--r-md); overflow: hidden; background: var(--color-bg-light); border: 1px solid var(--color-border); transition: box-shadow .25s ease, transform .25s ease; }
.mega-news:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.mega-news__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.mega-news__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mega-news:hover .mega-news__media img { transform: scale(1.06); }
.mega-news__body { display: block; padding: .85rem 1rem 1rem; }
.mega-news__title { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--color-text); line-height: 1.4; }
.mega-news__excerpt { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: .3rem; line-height: 1.5; }
.mega-news__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; font-size: var(--fs-xs); font-weight: 700; color: var(--color-primary); transition: gap .2s ease; }
.mega-news:hover .mega-news__more { gap: .7rem; }

/* Entrance: items + feature fade-up in sequence when the panel opens */
.primary-menu .sub-menu--mega .mega-item,
.primary-menu .sub-menu--mega .mega__feature { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
.primary-menu > li:hover > .sub-menu--mega .mega-item,
.primary-menu > li:focus-within > .sub-menu--mega .mega-item,
.primary-menu > li:hover > .sub-menu--mega .mega__feature,
.primary-menu > li:focus-within > .sub-menu--mega .mega__feature { opacity: 1; transform: none; }
.primary-menu .sub-menu--mega .mega-item:nth-child(1) { transition-delay: .05s; }
.primary-menu .sub-menu--mega .mega-item:nth-child(2) { transition-delay: .10s; }
.primary-menu .sub-menu--mega .mega-item:nth-child(3) { transition-delay: .15s; }
.primary-menu .sub-menu--mega .mega-item:nth-child(4) { transition-delay: .20s; }
.primary-menu .sub-menu--mega .mega-item:nth-child(5) { transition-delay: .25s; }
.primary-menu .sub-menu--mega .mega__feature { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
	.primary-menu .sub-menu--mega .mega-item,
	.primary-menu .sub-menu--mega .mega__feature { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 1100px) {
	.primary-menu .sub-menu--mega { min-width: 520px; max-width: 92vw; }
	.mega { flex-direction: column; }
	.mega__feature { flex: 1 1 auto; padding-left: 0; border-left: 0; border-top: 1px solid var(--color-border); padding-top: 1rem; }
}
.home-service-mini__icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); font-size: 1.05rem; }
.home-service-mini__title { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--color-text); }
.home-service-mini__desc { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ── Quick services: premium 3D tilt cards ────────────────────────────────── */
.home-quick__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }
.home-quick-card {
	--c: #0A6847;
	position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .55rem;
	text-align: left; padding: 2rem 1.75rem;
	background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
	border: 1px solid var(--color-border); border-radius: 1.6rem;
	box-shadow: 0 8px 24px -16px rgba(2,6,23,.25);
	transition: box-shadow .3s ease, border-color .3s ease;
}
/* Accent glow blooming from the top corner */
.home-quick-card::before {
	content: ''; position: absolute; top: -40%; right: -30%; width: 80%; height: 85%; border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--c) 17%, transparent), transparent 70%);
	pointer-events: none; transition: transform .35s ease;
}
.home-quick-card:hover::before { transform: scale(1.25); }
/* Glossy light sweep on hover */
.home-quick-card::after {
	content: ''; position: absolute; top: 0; left: -70%; width: 50%; height: 100%;
	background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
	transform: skewX(-18deg); pointer-events: none; transition: left .55s ease;
}
.home-quick-card:hover::after { left: 125%; }
.home-quick-card:hover {
	border-color: color-mix(in srgb, var(--c) 45%, transparent);
	box-shadow: 0 30px 55px -22px color-mix(in srgb, var(--c) 38%, rgba(2,6,23,.35));
}
.home-quick-card__icon {
	width: 3.4rem; height: 3.4rem; margin-bottom: .7rem;
	display: flex; align-items: center; justify-content: center;
	border-radius: 1rem; font-size: 1.35rem; color: #fff;
	background: linear-gradient(135deg, color-mix(in srgb, var(--c) 85%, #fff), color-mix(in srgb, var(--c) 68%, #000));
	box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--c) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
	transition: transform .3s ease;
}
.home-quick-card:hover .home-quick-card__icon { transform: translateY(-4px) scale(1.07); }
.home-quick-card__title { font-size: 1.05rem; font-weight: 800; color: var(--color-text); letter-spacing: -.01em; }
.home-quick-card__desc { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.6; flex: 1; margin: 0; }
.home-quick-card__link { display: inline-flex; align-items: center; gap: .45rem; margin-top: .4rem; font-size: var(--fs-sm); font-weight: 700; color: var(--c); transition: gap .2s ease; }
.home-quick-card:hover .home-quick-card__link { gap: .85rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Shared inner-page patterns (pg-*)
   ══════════════════════════════════════════════════════════════════════════ */
.pg-hero-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-3xl); align-items: center; }
.pg-hero-stats { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: var(--r-xl); padding: var(--sp-xl); backdrop-filter: blur(8px); }
.pg-hero-stats__title { color: #fff; font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--sp-lg); }
.pg-hero-stats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.pg-hero-stats__grid > div { background: rgba(255,255,255,.08); border-radius: var(--r-lg); padding: var(--sp-lg); text-align: center; }
.pg-hero-stats__num { display: block; font-size: var(--fs-2xl); font-weight: 800; color: var(--color-accent); }
.pg-hero-stats__label { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.7); }

.pg-support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xl); }
.pg-support-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-2xl); }
.pg-support-card h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-lg); display: flex; align-items: center; gap: var(--sp-sm); }
.pg-support-card h3 i { color: var(--color-primary); }
.pg-check-list { display: flex; flex-direction: column; gap: var(--sp-sm); margin-bottom: var(--sp-lg); }
.pg-check-list li { position: relative; padding-left: 1.75rem; font-size: var(--fs-sm); color: var(--color-text-muted); }
.pg-check-list li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; color: var(--color-primary); }
.pg-check-list--light li { color: rgba(255,255,255,.9); }
.pg-check-list--light li::before { color: var(--color-accent); }

.pg-countries { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-md); }
.pg-country { display: flex; align-items: center; gap: var(--sp-sm); padding: 0.625rem 0.875rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); font-size: var(--fs-sm); color: rgba(255,255,255,.85); }
.pg-country img { width: 24px; border-radius: 2px; flex-shrink: 0; }

.pg-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-xl); }
.pg-step { text-align: center; position: relative; }
.pg-step__num { width: 48px; height: 48px; margin: 0 auto var(--sp-md); display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: #fff; border-radius: var(--r-full); font-size: var(--fs-lg); font-weight: 800; }
.pg-step__title { font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--sp-sm); }
.pg-step__desc { font-size: var(--fs-sm); color: var(--color-text-muted); }

.pg-next { background: linear-gradient(135deg, #1e40af 0%, #312e81 100%); padding-block: var(--sp-4xl); }
.pg-next__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-3xl); align-items: start; }
.pg-next__features { display: flex; flex-direction: column; gap: var(--sp-md); margin: var(--sp-xl) 0; }
.pg-next__features li { font-size: var(--fs-sm); color: rgba(255,255,255,.8); }
.pg-next__features i { color: #6ee7b7; margin-right: 0.4rem; }
.pg-next__features strong { color: #fff; }
.pg-next__stats { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: var(--r-xl); padding: var(--sp-xl); }
.pg-next__stats h3 { color: #fff; font-size: var(--fs-lg); margin-bottom: var(--sp-lg); display: flex; align-items: center; gap: var(--sp-sm); }
.pg-next__stats h3 i { color: var(--color-accent); }
.pg-next__stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); margin-bottom: var(--sp-xl); }
.pg-next__stats-grid > div { background: rgba(255,255,255,.08); border-radius: var(--r-lg); padding: var(--sp-lg); text-align: center; }
.pg-next__num { display: block; font-size: var(--fs-2xl); font-weight: 800; color: var(--color-accent); }
.pg-next__label { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.7); }
.pg-next__how { color: #fff; font-size: var(--fs-base); margin-bottom: var(--sp-md); }
.pg-next__steps { counter-reset: nx; display: flex; flex-direction: column; gap: var(--sp-sm); }
.pg-next__steps li { counter-increment: nx; position: relative; padding-left: 2rem; font-size: var(--fs-sm); color: rgba(255,255,255,.8); }
.pg-next__steps li::before { content: counter(nx); position: absolute; left: 0; top: -2px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: var(--color-accent); color: var(--color-dark); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 800; }

.pg-inquiry { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-3xl); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.pg-inquiry__info { background: linear-gradient(135deg, var(--color-primary) 0%, #064e3b 100%); color: #fff; padding: var(--sp-2xl); }
.pg-inquiry__info h2 { color: #fff; }
.pg-inquiry__info p { color: rgba(255,255,255,.8); margin-bottom: var(--sp-xl); }
.pg-inquiry__contact p { display: flex; align-items: center; gap: var(--sp-sm); font-size: var(--fs-sm); color: rgba(255,255,255,.9); margin-bottom: var(--sp-md); }
.pg-inquiry__contact i { color: var(--color-accent); width: 18px; }
.pg-inquiry__contact a { color: #fff; }
.pg-inquiry .contact-form-wrap { box-shadow: none; padding: var(--sp-2xl); }

.pg-greenbox { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-2xl); background: linear-gradient(135deg, #0A6847 0%, #065f46 100%); border-radius: var(--r-xl); padding: var(--sp-3xl); align-items: center; }
.pg-greenbox__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.pg-greenbox__stats > div { background: rgba(255,255,255,.1); border-radius: var(--r-lg); padding: var(--sp-lg); text-align: center; }
.pg-greenbox__num { display: block; font-size: var(--fs-3xl); font-weight: 800; color: var(--color-accent); }
.pg-greenbox__label { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.8); }

/* ── About page ───────────────────────────────────────────────────────────── */
.about-intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-3xl); align-items: start; }
.about-intro__stats { display: flex; gap: var(--sp-xl); margin-top: var(--sp-xl); flex-wrap: wrap; }
.about-intro__num { display: block; font-size: var(--fs-3xl); font-weight: 800; color: var(--color-primary); }
.about-intro__label { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.about-intro__img img { border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.about-vm { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xl); margin-bottom: var(--sp-3xl); }
.about-vm__card { border-radius: var(--r-xl); padding: var(--sp-2xl); color: #fff; }
.about-vm__icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.2); border-radius: var(--r-xl); font-size: 1.5rem; margin-bottom: var(--sp-lg); }
.about-vm__card h3 { color: #fff; font-size: var(--fs-xl); margin-bottom: var(--sp-md); }
.about-vm__card p { color: rgba(255,255,255,.9); line-height: 1.8; }
.about-values__title { text-align: center; color: #fff; font-size: var(--fs-2xl); margin-bottom: var(--sp-xl); }
.about-values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }
.about-value-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-xl); padding: var(--sp-xl); text-align: center; }
.about-value-card__icon { width: 52px; height: 52px; margin: 0 auto var(--sp-md); display: flex; align-items: center; justify-content: center; background: rgba(245,158,11,.15); color: var(--color-accent); border-radius: var(--r-xl); font-size: 1.3rem; }
.about-value-card h4 { color: #fff; font-size: var(--fs-lg); margin-bottom: var(--sp-xs); }
.about-value-card p { color: rgba(255,255,255,.6); font-size: var(--fs-sm); }
.about-messages { display: flex; flex-direction: column; gap: var(--sp-xl); }
.about-message { display: grid; grid-template-columns: 280px 1fr; gap: 0; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); }
.about-message.is-rev { grid-template-columns: 1fr 280px; }
.about-message.is-rev .about-message__person { order: 2; }
.about-message__person { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-md); padding: var(--sp-2xl); color: #fff; text-align: center; }
.about-message__person img { width: 110px; height: 110px; border-radius: var(--r-full); object-fit: cover; border: 4px solid rgba(255,255,255,.3); }
.about-message__ph { width: 110px; height: 110px; border-radius: var(--r-full); background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.about-message__name { font-weight: 700; }
.about-message__body { padding: var(--sp-2xl); position: relative; }
.about-message__quote-icon { color: var(--color-primary); opacity: .2; font-size: 2rem; margin-bottom: var(--sp-sm); }
.about-message__body p { color: var(--color-text-muted); line-height: 1.8; font-style: italic; margin-bottom: var(--sp-md); }
.about-message__sig { font-weight: 700; color: var(--color-primary); }
.about-regions { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-md); margin-bottom: var(--sp-2xl); }
.about-region-card { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-xl); border-radius: var(--r-xl); color: #fff; transition: transform var(--tr-base); }
.about-region-card:hover { transform: translateY(-4px); }
.about-region-card > i { font-size: 1.5rem; margin-bottom: var(--sp-sm); }
.about-region-card__name { font-size: var(--fs-lg); font-weight: 800; color: #fff; }
.about-region-card__city { font-size: var(--fs-xs); color: rgba(255,255,255,.8); }
.about-region-card__link { margin-top: var(--sp-md); font-size: var(--fs-sm); font-weight: 700; color: #fff; display: inline-flex; align-items: center; gap: 0.4rem; }
.about-region-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }
.about-region-stats > div { background: rgba(255,255,255,.06); border-radius: var(--r-lg); padding: var(--sp-lg); text-align: center; }
.about-region-stats__num { display: block; font-size: var(--fs-2xl); font-weight: 800; color: var(--color-accent); }
.about-region-stats__label { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.7); }
.about-hierarchy { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }
.about-hier-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-xl); text-align: center; }
.about-hier-card__icon { width: 56px; height: 56px; margin: 0 auto var(--sp-md); display: flex; align-items: center; justify-content: center; background: var(--color-primary-light); color: var(--color-primary); border-radius: var(--r-xl); font-size: 1.3rem; }
.about-hier-card h3 { font-size: var(--fs-base); margin-bottom: var(--sp-xs); }
.about-hier-card p { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ── Reports / Progress page ──────────────────────────────────────────────── */
.rp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-md); margin-bottom: var(--sp-2xl); flex-wrap: wrap; }
.rp-head h2 { margin-top: var(--sp-sm); }
.rp-annual-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }
.rp-annual-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); overflow: hidden; transition: all var(--tr-base); }
.rp-annual-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.rp-annual-card__head { position: relative; min-height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-sm); color: #fff; }
.rp-annual-card__head > i { font-size: 2rem; opacity: .85; }
.rp-annual-card__year { font-size: var(--fs-2xl); font-weight: 800; }
.rp-annual-card__body { padding: var(--sp-lg); }
.rp-annual-card__body h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-sm); }
.rp-annual-card__body p { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--sp-md); }
.rp-annual-card__foot { display: flex; align-items: center; justify-content: space-between; padding-top: var(--sp-md); border-top: 1px solid var(--color-border); font-size: var(--fs-xs); color: var(--color-text-muted); }
.rp-annual-card__foot a { color: var(--color-primary); font-weight: 700; }
.rp-list-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.rp-list-item { display: flex; gap: var(--sp-md); padding: var(--sp-lg); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-lg); transition: all var(--tr-fast); }
.rp-list-item:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.rp-list-item__icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); font-size: 1.1rem; }
.rp-list-item__title { display: block; font-weight: 700; font-size: var(--fs-base); color: var(--color-text); }
.rp-list-item__desc { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); margin: 2px 0 var(--sp-xs); }
.rp-list-item__meta { display: block; font-size: var(--fs-xs); color: var(--color-text-light); }
.rp-policy-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-xl); transition: all var(--tr-base); }
.rp-policy-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.rp-policy-card__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-lg); font-size: 1.2rem; margin-bottom: var(--sp-md); }
.rp-policy-card h3 { font-size: var(--fs-base); margin-bottom: var(--sp-sm); }
.rp-policy-card p { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--sp-md); }
.rp-research { display: flex; flex-direction: column; gap: var(--sp-md); }
.rp-research-item { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-lg); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-lg); transition: all var(--tr-fast); }
.rp-research-item:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.rp-research-item__icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); font-size: 1.1rem; }
.rp-research-item__body { flex: 1; min-width: 0; }
.rp-research-item__title { display: block; font-weight: 700; font-size: var(--fs-base); color: var(--color-text); }
.rp-research-item__src { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); }
.rp-research-item__action { color: var(--color-primary); }

/* ── TVET Sector page ─────────────────────────────────────────────────────── */
.tvet-apex { display: flex; align-items: center; gap: var(--sp-xl); border-radius: var(--r-xl); padding: var(--sp-2xl); color: #fff; flex-wrap: wrap; }
.tvet-apex__icon { width: 72px; height: 72px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.2); border-radius: var(--r-xl); font-size: 2rem; }
.tvet-apex__body { flex: 1; min-width: 260px; }
.tvet-apex__body h3 { color: #fff; font-size: var(--fs-xl); margin-bottom: var(--sp-sm); }
.tvet-apex__body p { color: rgba(255,255,255,.85); margin-bottom: var(--sp-md); }
.tvet-apex__tags { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.tvet-apex__tags span { background: rgba(255,255,255,.15); color: #fff; font-size: var(--fs-xs); padding: 3px 12px; border-radius: var(--r-full); }
.tvet-tevta-card { background: var(--color-white); border: 1px solid var(--color-border); border-top: 4px solid; border-radius: var(--r-xl); padding: var(--sp-xl); transition: all var(--tr-base); }
.tvet-tevta-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tvet-tevta-card h3 { font-size: var(--fs-lg); font-weight: 800; margin-bottom: var(--sp-sm); }
.tvet-tevta-card p { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--sp-md); }
.tvet-tevta-card__meta { display: flex; gap: var(--sp-md); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: var(--sp-md); }
.tvet-tevta-card__meta i { color: var(--color-primary); }
.tvet-board-col { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-xl); }
.tvet-board-col h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-lg); display: flex; align-items: center; gap: var(--sp-sm); }
.tvet-board-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: var(--sp-md) 0; border-bottom: 1px solid var(--color-border); }
.tvet-board-item:last-child { border-bottom: none; }
.tvet-board-item__name { display: block; font-weight: 600; font-size: var(--fs-sm); color: var(--color-text); }
.tvet-board-item__sub { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }
.tvet-board-item i { color: var(--color-text-light); }
.tvet-partner-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-xl); text-align: center; transition: all var(--tr-base); }
.tvet-partner-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tvet-partner-card__logo { width: 64px; height: 64px; margin: 0 auto var(--sp-md); display: flex; align-items: center; justify-content: center; border-radius: var(--r-full); font-weight: 800; font-size: var(--fs-base); }
.tvet-partner-card h3 { font-size: var(--fs-base); margin-bottom: var(--sp-xs); }
.tvet-partner-card p { font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: var(--sp-md); line-height: 1.6; }
.tvet-banner { display: flex; align-items: center; gap: var(--sp-xl); background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); border-radius: var(--r-xl); padding: var(--sp-2xl); color: #fff; flex-wrap: wrap; }
.tvet-banner__icon { width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.2); border-radius: var(--r-xl); font-size: 1.5rem; }
.tvet-banner__body { flex: 1; min-width: 260px; }
.tvet-banner__body h3 { color: #fff; font-size: var(--fs-lg); margin-bottom: var(--sp-sm); }
.tvet-banner__body p { color: rgba(255,255,255,.85); font-size: var(--fs-sm); margin-bottom: var(--sp-md); }
.tvet-banner__tags { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.tvet-banner__tags span { background: rgba(255,255,255,.18); color: #fff; font-size: var(--fs-xs); padding: 3px 12px; border-radius: var(--r-full); }
.tvet-provider-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-xl); transition: all var(--tr-base); }
.tvet-provider-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tvet-provider-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-sm); }
.tvet-provider-card p { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--sp-md); }

/* ── Contact page ─────────────────────────────────────────────────────────── */
.contact-map { aspect-ratio: 16/10; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--color-border); }
.contact-map iframe { width: 100%; height: 100%; border: 0; }
.contact-quick { display: flex; flex-direction: column; gap: var(--sp-sm); }
.contact-quick-item { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-md); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-lg); transition: all var(--tr-fast); }
.contact-quick-item:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.contact-quick-item__icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); }
.contact-quick-item__title { display: block; font-weight: 700; font-size: var(--fs-sm); color: var(--color-text); }
.contact-quick-item__desc { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }
.contact-region-card { display: flex; flex-direction: column; gap: var(--sp-xs); background: var(--color-white); border: 1px solid var(--color-border); border-left: 4px solid; border-radius: var(--r-lg); padding: var(--sp-xl); }
.contact-region-card h3 { font-size: var(--fs-base); }
.contact-region-card__city { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--sp-sm); }
.contact-region-card__row { display: flex; align-items: center; gap: var(--sp-sm); font-size: var(--fs-sm); color: var(--color-text); }
.contact-region-card__row i { color: var(--color-primary); width: 16px; }
.contact-wing-card { display: flex; flex-direction: column; gap: var(--sp-xs); border: 1px solid; border-radius: var(--r-xl); padding: var(--sp-xl); transition: transform var(--tr-base); }
.contact-wing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.contact-wing-card h3 { font-size: var(--fs-base); font-weight: 800; }
.contact-wing-card__sub { font-size: var(--fs-xs); color: var(--color-text-muted); }
.contact-wing-card__email { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); margin-top: var(--sp-sm); word-break: break-all; }
.contact-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
.contact-faq-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: var(--sp-xl); }
.contact-faq-card h3 { color: #fff; font-size: var(--fs-base); margin-bottom: var(--sp-sm); }
.contact-faq-card p { color: rgba(255,255,255,.65); font-size: var(--fs-sm); line-height: 1.7; }

/* ══════════════════════════════════════════════════════════════════════════
   Header navigation - enhanced
   ══════════════════════════════════════════════════════════════════════════ */
.main-nav .container { gap: var(--sp-lg); }
.primary-menu { flex: 0 0 auto; width: max-content; max-width: 100%; margin-inline: auto; justify-content: center; }
.primary-menu > li > a { gap: 0.35rem; }

/* animated underline on hover/active */
.primary-menu > li > a { position: relative; }
.primary-menu > li > a::after {
	content: ''; position: absolute; left: var(--sp-md); right: var(--sp-md); bottom: 4px;
	height: 2px; background: var(--color-primary); border-radius: 2px;
	transform: scaleX(0); transform-origin: center; transition: transform var(--tr-base);
}
.primary-menu > li:hover > a::after,
.primary-menu > li.current-menu-item > a::after,
.primary-menu > li.current-menu-ancestor > a::after { transform: scaleX(1); }

.nav-caret { font-size: 0.6rem; transition: transform var(--tr-base); opacity: .7; }
.menu-item-has-children:hover .nav-caret { transform: rotate(180deg); }

/* Unified dropdown caret - also shows for custom WordPress menus (Appearance → Menus). */
.primary-menu .menu-item-has-children > a::after {
	content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
	position: static; left: auto; right: auto; bottom: auto; height: auto; width: auto;
	background: none; border-radius: 0; transform: none;
	font-size: 0.55rem; margin-left: 0.4rem; opacity: .6; display: inline-block;
	transition: transform var(--tr-base);
}
.primary-menu .menu-item-has-children:hover > a::after { transform: rotate(180deg); opacity: 1; }

/* ── Right-side actions ───────────────────────────────────────────────────── */
.main-nav__actions { display: flex; align-items: center; gap: var(--sp-md); flex-shrink: 0; }
.nav-cta {
	display: inline-flex; align-items: center; gap: 0.45rem;
	padding: 0.55rem 1.1rem; border-radius: var(--r-full);
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-mid) 100%);
	color: #fff !important; font-size: var(--fs-sm); font-weight: 700;
	box-shadow: 0 4px 14px rgba(10,104,71,.3); transition: all var(--tr-base); white-space: nowrap;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(10,104,71,.4); color: #fff !important; }

/* ── Animated hamburger ───────────────────────────────────────────────────── */
.menu-toggle__bars { position: relative; width: 22px; height: 16px; display: inline-block; }
.menu-toggle__bars span {
	position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
	background: var(--color-text); transition: all var(--tr-base);
}
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 7px; }
.menu-toggle__bars span:nth-child(3) { top: 14px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ── Rich dropdowns ───────────────────────────────────────────────────────── */
.primary-menu .sub-menu--rich { min-width: 340px; padding: var(--sp-sm); }
.sub-menu__heading {
	padding: 0.5rem var(--sp-md) 0.35rem; font-size: var(--fs-xs); font-weight: 800;
	text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-light);
}
.primary-menu .sub-menu--rich li a {
	display: flex; align-items: center; gap: var(--sp-md);
	padding: 0.55rem var(--sp-md); border-radius: var(--r-md);
}
.sub-menu__icon, .sub-menu__flag {
	width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	border-radius: var(--r-md); font-size: 1rem; overflow: hidden;
}
.sub-menu__flag { background: var(--color-bg-section); }
.sub-menu__flag img { width: 100%; height: 100%; object-fit: cover; }
.sub-menu__text { display: flex; flex-direction: column; line-height: 1.3; }
.sub-menu__label { font-size: var(--fs-sm); font-weight: 700; color: var(--color-text); }
.sub-menu__desc { font-size: var(--fs-xs); color: var(--color-text-muted); }
.primary-menu .sub-menu--rich li a:hover .sub-menu__label { color: var(--color-primary); }

/* (Old column-count mega styles removed - superseded by the .mega grid+feature
   layout defined earlier in this file.) */

/* ── Mobile drawer extras ─────────────────────────────────────────────────── */
.mobile-menu__row { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__row a { flex: 1; }
.mobile-submenu-toggle {
	width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	color: var(--color-text-muted); background: none; transition: all var(--tr-fast);
}
.mobile-submenu-toggle i { transition: transform var(--tr-base); }
.mobile-menu .menu-item-has-children > .sub-menu { max-height: 0; overflow: hidden; transition: max-height var(--tr-base); background: var(--color-bg-light); }
.mobile-menu .menu-item-has-children.is-open > .sub-menu { max-height: 2000px; }
.mobile-menu .mobile-submenu__heading { padding: .6rem var(--sp-lg) .25rem; font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary); }
.mobile-menu .menu-item-has-children.is-open .mobile-submenu-toggle i { transform: rotate(180deg); color: var(--color-primary); }

.mobile-nav__footer { padding: var(--sp-lg); border-top: 1px solid var(--color-border); margin-top: auto; }

/* ── Students course search box ──────────────────────────────────────────── */
.stu-course-search { display: flex; align-items: center; gap: var(--sp-sm); max-width: 560px; margin: 0 auto var(--sp-xl); background: var(--color-white); border: 1.5px solid var(--color-border); border-radius: var(--r-full); padding: 0.25rem 0.5rem 0.25rem 1.25rem; box-shadow: var(--shadow-sm); transition: border-color var(--tr-fast), box-shadow var(--tr-fast); }
.stu-course-search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent); }
.stu-course-search i { color: var(--color-text-muted); }
.stu-course-search__input { flex: 1; border: none; outline: none; background: transparent; padding: 0.7rem 0.5rem; font-size: var(--fs-base); color: var(--color-text); }
.stu-course-noresults { text-align: center; color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-lg); }

/* ═══════════════════════════════════════════════════════════════════════════
   Wing page - extended sections (About / dark Process / Curricula / Industry / Updates)
   ═══════════════════════════════════════════════════════════════════════════ */
.wing-text        { color: var(--wing-primary); }
.wing-accent-text { color: var(--color-accent); }
.wing-badge--accent { background: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-accent); }
.section-header--light h2 { color: #fff; }
.section-header--light p  { color: rgba(255,255,255,.75); }

/* ── About (no image) ─────────────────────────────────────────────────────── */
.wing-about__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-3xl); align-items: center; }
.wing-about__grid--full { grid-template-columns: 1fr; }
.wing-about__grid--full .wing-about__lead { max-width: min(820px, 100%); }
.wing-about__title { font-size: var(--fs-3xl); font-weight: 800; color: var(--color-text); margin: var(--sp-md) 0 var(--sp-lg); }
.wing-about__lead { color: var(--color-text-muted); line-height: 1.8; margin-bottom: var(--sp-xl); }
.wing-about__list { display: grid; gap: var(--sp-lg); }
.wing-about__item { display: flex; gap: var(--sp-md); align-items: flex-start; }
.wing-about__item i { color: var(--wing-primary); font-size: 1.25rem; margin-top: 2px; flex-shrink: 0; }
.wing-about__item-title { display: block; font-weight: 700; color: var(--color-text); }
.wing-about__item-desc  { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--color-text-muted); }

.wing-about__panel {
	position: relative; overflow: hidden;
	background: linear-gradient(135deg, var(--wing-primary) 0%, var(--wing-secondary) 100%);
	border-radius: var(--r-xl); padding: var(--sp-2xl); color: #fff;
	box-shadow: var(--shadow-lg); text-align: center;
}
.wing-about__panel-glow { position: absolute; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.12); top: -80px; right: -80px; }
.wing-about__panel-icon { font-size: 2.5rem; opacity: .85; margin-bottom: var(--sp-md); }
.wing-about__panel-title { font-size: var(--fs-xl); font-weight: 800; margin: 0 0 var(--sp-xs); color: #fff; }
.wing-about__panel-sub { font-size: var(--fs-sm); color: rgba(255,255,255,.8); margin: 0 0 var(--sp-xl); }
.wing-about__panel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.wing-about__panel-stat { background: rgba(255,255,255,.12); border-radius: var(--r-lg); padding: var(--sp-lg) var(--sp-md); backdrop-filter: blur(4px); }
.wing-about__panel-num { display: block; font-size: var(--fs-3xl); font-weight: 800; color: var(--color-accent-light); }
.wing-about__panel-label { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.8); margin-top: 2px; }

/* ── Dark Process + Framework ─────────────────────────────────────────────── */
.wing-process--dark { background: var(--color-dark); }
.wing-proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }
.wing-proc-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: var(--r-xl); padding: var(--sp-xl); text-align: center; }
.wing-proc-card__num { width: 48px; height: 48px; margin: 0 auto var(--sp-md); display: flex; align-items: center; justify-content: center; border-radius: var(--r-full); background: var(--color-accent); color: var(--color-dark); font-weight: 800; font-size: var(--fs-xl); }
.wing-proc-card__title { color: #fff; font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--sp-sm); }
.wing-proc-card__desc { color: rgba(255,255,255,.7); font-size: var(--fs-sm); margin: 0; }
.wing-framework { margin-top: var(--sp-2xl); background: rgba(255,255,255,.05); border-radius: var(--r-xl); padding: var(--sp-2xl); }
.wing-framework__title { text-align: center; color: #fff; font-size: var(--fs-xl); font-weight: 700; margin-bottom: var(--sp-xl); }
.wing-framework__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }
.wing-framework__phase { color: var(--color-accent); font-weight: 700; margin-bottom: var(--sp-md); display: flex; align-items: center; gap: var(--sp-sm); }
.wing-framework__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-sm); }
.wing-framework__items li { color: rgba(255,255,255,.72); font-size: var(--fs-sm); padding-left: 1rem; position: relative; }
.wing-framework__items li::before { content: '•'; position: absolute; left: 0; color: var(--color-accent); }

/* ── Curricula Library ────────────────────────────────────────────────────── */
.wing-curricula__filters { background: var(--color-bg-section); border-radius: var(--r-xl); padding: var(--sp-xl); margin-bottom: var(--sp-2xl); }
.wing-curricula__filters-title { font-weight: 700; color: var(--color-text); margin-bottom: var(--sp-md); }
.wing-curricula__filters-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); }
.wing-curricula__filters label { display: block; }
.wing-curricula__filters label span { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: 4px; }
.wing-curricula__filters select { width: 100%; padding: .55rem .75rem; border: 1px solid var(--color-border); border-radius: var(--r-md); background: #fff; font-size: var(--fs-sm); }
.wing-curricula__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); margin-bottom: var(--sp-2xl); }
.wing-cur-card { border: 1px solid color-mix(in srgb, var(--cur) 25%, var(--color-border)); border-radius: var(--r-xl); padding: var(--sp-xl); background: color-mix(in srgb, var(--cur) 6%, #fff); transition: transform var(--tr-base), box-shadow var(--tr-base); }
.wing-cur-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.wing-cur-card__head { display: flex; align-items: center; gap: var(--sp-md); margin-bottom: var(--sp-md); }
.wing-cur-card__icon { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-lg); background: var(--cur); color: #fff; font-size: 1.2rem; }
.wing-cur-card__name { font-size: var(--fs-base); font-weight: 700; color: var(--color-text); margin: 0; }
.wing-cur-card__count { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }
.wing-cur-card__list { list-style: none; margin: 0 0 var(--sp-md); padding: 0; display: grid; gap: var(--sp-sm); }
.wing-cur-card__list li { font-size: var(--fs-sm); color: var(--color-text); }
.wing-cur-card__list i { color: #dc2626; margin-right: 6px; }
.wing-cur-card__link { font-weight: 600; font-size: var(--fs-sm); color: var(--cur); }
.wing-cur-card__link:hover { text-decoration: underline; }
.wing-curricula__cta { text-align: center; }

/* ── Industry Partnership ─────────────────────────────────────────────────── */
.wing-industry { background: var(--wing-primary); }
.wing-industry__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xl); }
.wing-industry__card { background: #fff; border-radius: var(--r-xl); padding: var(--sp-2xl); }
.wing-industry__card-title { font-size: var(--fs-xl); font-weight: 700; color: var(--color-text); margin: 0 0 var(--sp-md); }
.wing-industry__card-title i { color: var(--wing-primary); margin-right: var(--sp-sm); }
.wing-industry__card-text { color: var(--color-text-muted); margin-bottom: var(--sp-lg); }
.wing-industry__points { list-style: none; margin: 0 0 var(--sp-lg); padding: 0; display: grid; gap: var(--sp-sm); }
.wing-industry__points li { color: var(--color-text); }
.wing-industry__points i { color: #16a34a; margin-right: var(--sp-sm); }
.wing-industry__steps { list-style: none; margin: 0 0 var(--sp-lg); padding: 0; display: grid; gap: var(--sp-md); counter-reset: none; }
.wing-industry__steps li { display: flex; align-items: flex-start; gap: var(--sp-md); color: var(--color-text); }
.wing-industry__step-num { width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--r-full); background: var(--wing-primary); color: #fff; font-size: var(--fs-sm); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.wing-industry__doc { display: inline-flex; align-items: center; gap: var(--sp-sm); color: var(--wing-primary); font-weight: 600; }
.wing-industry__doc:hover { text-decoration: underline; }

/* ── Latest Updates ───────────────────────────────────────────────────────── */
.wing-updates__grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-xl); align-items: start; }
.wing-updates__panel { background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-xl); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-lg); }
.wing-updates__panel-title { font-weight: 700; color: var(--color-text); margin: 0 0 var(--sp-lg); }
.wing-updates__panel-title i { color: var(--wing-primary); margin-right: var(--sp-sm); }
.wing-updates__list { display: grid; gap: var(--sp-md); }
.wing-update { border-left: 4px solid var(--u); padding: var(--sp-sm) var(--sp-md); }
.wing-update__title { font-weight: 600; color: var(--color-text); margin: 0; }
.wing-update__desc { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 4px 0 0; }
.wing-update__date { font-size: var(--fs-xs); color: var(--color-text-light); margin: 6px 0 0; }
.wing-updates__res { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-sm); }
.wing-updates__res a { display: flex; align-items: center; gap: var(--sp-sm); color: var(--color-text); font-size: var(--fs-sm); }
.wing-updates__res a:hover { color: var(--wing-primary); }
.wing-updates__res i { color: #dc2626; }
.wing-updates__contact { background: linear-gradient(135deg, var(--wing-primary), var(--wing-secondary)); color: #fff; border-radius: var(--r-xl); padding: var(--sp-xl); }
.wing-updates__contact h3 { color: #fff; margin: 0 0 var(--sp-xs); font-size: var(--fs-lg); }
.wing-updates__contact-lead { font-size: var(--fs-sm); color: rgba(255,255,255,.8); margin: 0 0 var(--sp-md); }
.wing-updates__contact p { font-size: var(--fs-sm); margin: 6px 0; }
.wing-updates__contact a { color: #fff; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
	.wing-about__grid { grid-template-columns: 1fr; }
	.wing-proc-grid { grid-template-columns: repeat(2, 1fr); }
	.wing-framework__grid { grid-template-columns: 1fr; gap: var(--sp-lg); }
	.wing-curricula__grid { grid-template-columns: repeat(2, 1fr); }
	.wing-curricula__filters-grid { grid-template-columns: repeat(2, 1fr); }
	.wing-industry__grid { grid-template-columns: 1fr; }
	.wing-updates__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.wing-proc-grid { grid-template-columns: 1fr; }
	.wing-curricula__grid { grid-template-columns: 1fr; }
	.wing-curricula__filters-grid { grid-template-columns: 1fr; }
	.wing-about__panel-stats { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Wing - toggleable section toolkit (cards / directory / portals / statrow / nvqf / tenders)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Card grid */
.wing-cardsgrid__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }
.wing-cardx { background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-xl); box-shadow: var(--shadow-sm); transition: transform var(--tr-base), box-shadow var(--tr-base); }
.wing-cardx:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.wing-cardx__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-lg); background: color-mix(in srgb, var(--wing-primary) 12%, transparent); color: var(--wing-primary); font-size: 1.25rem; margin-bottom: var(--sp-md); }
.wing-cardx__title { font-size: var(--fs-base); font-weight: 700; color: var(--color-text); margin: 0 0 var(--sp-xs); }
.wing-cardx__desc { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; line-height: 1.6; }

/* Directory grid */
.wing-directory__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.wing-diritem { display: block; background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--d); border-radius: var(--r-lg); padding: var(--sp-lg); box-shadow: var(--shadow-sm); transition: transform var(--tr-base), box-shadow var(--tr-base); color: inherit; }
a.wing-diritem:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.wing-diritem__head { display: flex; align-items: center; gap: var(--sp-md); }
.wing-diritem__badge { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: color-mix(in srgb, var(--d) 15%, #fff); color: var(--d); font-weight: 800; font-size: var(--fs-sm); }
/* Logo tile: shows the body's favicon when a website URL is set, else a letter-badge. */
.wing-diritem__logo { position: relative; width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: color-mix(in srgb, var(--d) 12%, #fff); overflow: hidden; }
.wing-diritem__logo-fb { font-weight: 800; font-size: var(--fs-sm); color: var(--d); text-transform: uppercase; letter-spacing: .01em; }
.wing-diritem__logo-img { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); object-fit: contain; background: #fff; border-radius: var(--r-sm); }
.wing-diritem__name { font-size: var(--fs-base); font-weight: 700; color: var(--color-text); margin: 0; }
.wing-diritem__sub { font-size: var(--fs-xs); color: var(--color-text-muted); margin: 2px 0 0; }
.wing-diritem__note { font-size: var(--fs-sm); color: var(--color-text-muted); margin: var(--sp-md) 0 0; }
.wing-diritem__link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-md); font-size: var(--fs-sm); font-weight: 600; color: var(--d); }

/* Portal cards */
.wing-portals__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }
.wing-portal { display: block; border-radius: var(--r-xl); padding: var(--sp-xl); color: #fff; background: linear-gradient(135deg, var(--p), color-mix(in srgb, var(--p) 70%, #000)); box-shadow: var(--shadow-md); transition: transform var(--tr-base), box-shadow var(--tr-base); }
a.wing-portal:hover { transform: translateY(-3px); box-shadow: var(--shadow-xl); }
.wing-portal__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-lg); background: rgba(255,255,255,.2); font-size: 1.4rem; margin-bottom: var(--sp-md); }
.wing-portal__title { font-size: var(--fs-lg); font-weight: 800; margin: 0 0 var(--sp-xs); color: #fff; }
.wing-portal__desc { font-size: var(--fs-sm); color: rgba(255,255,255,.85); margin: 0 0 var(--sp-md); }
.wing-portal__link { font-size: var(--fs-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

/* Stat row */
.wing-statrow--dark { background: var(--color-dark); }
.wing-statrow__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-xl) var(--sp-2xl); text-align: center; }
.wing-statrow__item { padding: var(--sp-md); flex: 0 1 250px; max-width: 300px; }
.wing-statrow__icon { font-size: 1.75rem; color: var(--color-accent); display: block; margin-bottom: var(--sp-sm); }
.wing-statrow__num { display: block; font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 800; line-height: 1.2; color: var(--wing-primary); text-wrap: balance; }
.wing-statrow--dark .wing-statrow__num { color: var(--color-accent-light); }
.wing-statrow__label { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 4px; }
.wing-statrow--dark .wing-statrow__label { color: rgba(255,255,255,.75); }

/* NVQF levels bar */
.wing-nvqf__bar { background: linear-gradient(135deg, var(--wing-primary), var(--wing-secondary)); border-radius: var(--r-xl); padding: var(--sp-2xl); color: #fff; }
.wing-nvqf__title { text-align: center; color: #fff; font-size: var(--fs-xl); font-weight: 700; margin: 0 0 var(--sp-xl); }
.wing-nvqf__levels { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-md); }
.wing-nvqf__level { background: rgba(255,255,255,.12); border-radius: var(--r-lg); padding: var(--sp-lg) var(--sp-sm); text-align: center; backdrop-filter: blur(4px); }
.wing-nvqf__num { display: block; font-size: var(--fs-2xl); font-weight: 900; color: var(--color-accent-light); }
.wing-nvqf__label { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.85); margin-top: 4px; }

/* Tenders table */
.wing-tenders__wrap { overflow-x: auto; background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); }
.wing-tenders__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.wing-tenders__table th { text-align: left; background: var(--color-bg-section); color: var(--color-text); padding: var(--sp-md) var(--sp-lg); font-weight: 700; }
.wing-tenders__table td { padding: var(--sp-md) var(--sp-lg); border-top: 1px solid var(--color-border); color: var(--color-text); }
.wing-tenders__cat { display: inline-block; padding: 2px 10px; border-radius: var(--r-full); background: color-mix(in srgb, var(--wing-primary) 12%, #fff); color: var(--wing-primary); font-size: var(--fs-xs); font-weight: 600; }
.wing-tenders__dl { color: var(--wing-primary); font-weight: 600; }
.wing-tenders__more { text-align: center; margin-top: var(--sp-lg); }
.wing-tenders__more a { color: var(--wing-primary); font-weight: 600; }

@media (max-width: 992px) {
	.wing-cardsgrid__grid, .wing-directory__grid, .wing-portals__grid { grid-template-columns: repeat(2, 1fr); }
	.wing-statrow__grid { grid-template-columns: repeat(2, 1fr); }
	.wing-nvqf__levels { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.wing-cardsgrid__grid, .wing-directory__grid, .wing-portals__grid { grid-template-columns: 1fr; }
	.wing-nvqf__levels { grid-template-columns: repeat(2, 1fr); }
	/* stacked tender table */
	.wing-tenders__table thead { display: none; }
	.wing-tenders__table, .wing-tenders__table tbody, .wing-tenders__table tr, .wing-tenders__table td { display: block; width: 100%; }
	.wing-tenders__table tr { border-top: 1px solid var(--color-border); padding: var(--sp-sm) 0; }
	.wing-tenders__table td { border: none; padding: 4px var(--sp-lg); }
	.wing-tenders__table td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--color-text-muted); }
}

/* =============================================================================
   Bilingual program pages (Takamol + RPL)  .bi-*
   English + Urdu content, audience tabs, animated counters, FAQ accordion.
   ============================================================================= */
.bi-ur { font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Urdu Typesetting', 'Noto Naskh Arabic', var(--font-primary); line-height: 2; }

/* Shared helpers used by these pages */
.container--narrow { max-width: 860px; }
.section-header--left { text-align: left; margin-bottom: var(--sp-2xl); }
.section-header--left h2::after { margin-left: 0; }
.section-header--invert h2 { color: #fff; }
.section-header--invert p  { color: rgba(255,255,255,.72); }
.section-header--invert .badge { background: rgba(255,255,255,.12); color: var(--color-accent-light); }
.btn-light { background: #fff; color: var(--color-primary); box-shadow: var(--shadow-lg); }
.btn-light:hover { color: var(--color-primary); transform: translateY(-3px); box-shadow: 0 22px 40px -14px rgba(0,0,0,.45); }
.btn-ghost-light { background: rgba(255,255,255,.10); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); backdrop-filter: blur(6px); }
.btn-ghost-light:hover { color: #fff; background: rgba(255,255,255,.20); transform: translateY(-3px); }

/* Hero */
.bi-hero { position: relative; overflow: hidden; color: #fff; padding-block: clamp(3rem, 7vw, 6rem); }
.bi-hero--saudi { background: linear-gradient(135deg, #0F172A 0%, #1E293B 55%, #0B1220 100%); }
.bi-hero--green { background: linear-gradient(135deg, #0F172A 0%, #1E293B 55%, #0B1220 100%); }
.bi-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.bi-hero__bg::before, .bi-hero__bg::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .20; }
.bi-hero__bg::before { top: -60px; left: -40px; width: 320px; height: 320px; background: #2563eb; }
.bi-hero__bg::after { bottom: -80px; right: -40px; width: 420px; height: 420px; background: var(--color-accent); }
.bi-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.bi-hero__badge { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1rem; background: rgba(255,255,255,.10); backdrop-filter: blur(6px); border-radius: var(--r-full); font-size: var(--fs-sm); margin-bottom: var(--sp-lg); }
.bi-hero__badge img { border-radius: 2px; }
.bi-dot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: biPulse 2s infinite; }
@keyframes biPulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.5); } 70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.bi-hero__title { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.1; margin-bottom: var(--sp-lg); }
.bi-hero__accent { color: var(--color-accent-light); }
.bi-hero__sub { display: block; font-size: clamp(1.2rem, 2.4vw, 1.8rem); font-weight: 500; color: rgba(255,255,255,.82); margin-top: var(--sp-sm); }
.bi-hero__lead { font-size: var(--fs-lg); color: rgba(255,255,255,.85); margin-bottom: var(--sp-md); }
.bi-hero__lead-en { color: rgba(255,255,255,.65); margin-bottom: var(--sp-xl); }
.bi-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-md); margin-bottom: var(--sp-2xl); }

/* Hero stats / counters */
.bi-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); padding-top: var(--sp-xl); border-top: 1px solid rgba(255,255,255,.12); }
.bi-stat__num { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; display: inline-flex; align-items: baseline; }
.bi-stat__suffix { color: var(--color-accent-light); }
.bi-stat__label { font-size: var(--fs-sm); color: rgba(255,255,255,.6); margin-top: 2px; }

/* Hero visual panels */
.bi-hero__visual { position: relative; }
.bi-hero__panel { position: relative; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-xl); padding: var(--sp-xl); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.bi-sector { background: #fff; border-radius: var(--r-lg); padding: var(--sp-lg); text-align: center; color: var(--color-text); transition: transform var(--tr-base); }
.bi-sector:hover { transform: translateY(-6px); }
.bi-sector__icon { width: 56px; height: 56px; margin: 0 auto var(--sp-sm); display: flex; align-items: center; justify-content: center; border-radius: var(--r-lg); font-size: 1.6rem; color: var(--ic, var(--color-primary)); background: color-mix(in srgb, var(--ic, var(--color-primary)) 14%, #fff); }
.bi-sector h3 { font-size: var(--fs-base); margin-bottom: 2px; }
.bi-sector p { font-size: var(--fs-sm); color: var(--color-text-muted); }
.bi-hero__pin { position: absolute; top: -14px; right: -10px; background: var(--color-accent); color: var(--color-dark); padding: .45rem 1rem; border-radius: var(--r-full); font-weight: 700; font-size: var(--fs-sm); box-shadow: var(--shadow-lg); }
.bi-hero__imgcard { position: relative; background: #fff; border-radius: var(--r-xl); padding: var(--sp-md); box-shadow: var(--shadow-xl); }
.bi-hero__imgcard img { width: 100%; height: auto; border-radius: var(--r-lg); display: block; }

/* Tab bar (Takamol) */
.bi-tabbar { position: sticky; top: calc(var(--header-h)); z-index: 30; background: #fff; border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.bi-tabbar__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-md); padding-block: var(--sp-md); }
.bi-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.6rem; border-radius: var(--r-md); border: 2px solid var(--color-border); background: #fff; color: var(--color-text-muted); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; transition: all var(--tr-base); }
.bi-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.bi-tab:hover { border-color: var(--color-accent); color: var(--color-accent); }
.bi-tab.is-active { background: var(--color-accent); border-color: transparent; color: #fff; box-shadow: 0 12px 24px -12px rgba(245,158,11,.55); }

/* Tab panels */
.bi-panel { display: none; animation: biFade .45s ease; }
.bi-panel.is-active { display: flex; flex-direction: column; }
.bi-panel > section { width: 100%; }
.bi-order-first { order: -1; }
@keyframes biFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Dark section */
.bi-dark { background: linear-gradient(135deg, #0F172A 0%, #1E293B 55%, #0B1220 100%); color: #fff; }
/* Guarantee readable light text on every dark surface (no dark-on-dark). */
.bi-hero h1, .bi-hero h2, .bi-hero h3, .bi-hero h4,
.bi-dark h2, .bi-dark h3, .bi-dark h4,
.bi-timeline h3, .bi-timeline h4,
.bi-cta h2, .bi-cta h3 { color: #fff; }
.bi-dark .section-header p, .bi-dark .bi-step h3 { color: #fff; }

/* Card grids */
.bi-cards { display: grid; gap: var(--sp-lg); }
.bi-cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.bi-cards--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.bi-card { background: #fff; border-radius: var(--r-lg); padding: var(--sp-xl); box-shadow: var(--shadow-md); border: 2px solid transparent; transition: transform var(--tr-base), border-color var(--tr-base); }
.bi-card:hover { transform: translateY(-6px); border-color: var(--ic, var(--color-primary)); }
.bi-card--top { border-top: 4px solid var(--ic, var(--color-primary)); }
.bi-card--glass { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #fff; }
.bi-card--glass:hover { border-color: color-mix(in srgb, var(--ic, var(--color-primary-mid)) 60%, transparent); }
.bi-card__icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-lg); font-size: 1.6rem; color: var(--ic, var(--color-primary)); background: color-mix(in srgb, var(--ic, var(--color-primary)) 14%, #fff); margin-bottom: var(--sp-md); }
.bi-card--glass .bi-card__icon { background: color-mix(in srgb, var(--ic, var(--color-primary-mid)) 22%, transparent); }
.bi-card__title { font-size: var(--fs-lg); margin-bottom: 2px; }
.bi-card__en { font-weight: 600; color: var(--ic, var(--color-primary)); font-size: var(--fs-sm); margin-bottom: var(--sp-sm); }
.bi-card--glass .bi-card__en { color: rgba(255,255,255,.7); }
.bi-card__desc { color: var(--color-text-muted); font-size: var(--fs-sm); }
.bi-card--glass .bi-card__desc { color: rgba(255,255,255,.6); }

/* Sector list cards */
.bi-sectorcard { background: color-mix(in srgb, var(--ic, var(--color-primary)) 6%, #fff); border: 1px solid color-mix(in srgb, var(--ic, var(--color-primary)) 18%, #fff); border-radius: var(--r-lg); padding: var(--sp-xl); }
.bi-sectorcard__head { display: flex; align-items: center; gap: var(--sp-md); margin-bottom: var(--sp-lg); }
.bi-sectorcard__icon { width: 54px; height: 54px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--ic, var(--color-primary)); color: #fff; font-size: 1.4rem; }
.bi-sectorcard__head h3 { font-size: var(--fs-lg); }
.bi-sectorcard__head p { color: var(--ic, var(--color-primary)); font-size: var(--fs-sm); }
.bi-sectorcard__list { display: flex; flex-direction: column; gap: var(--sp-sm); }
.bi-sectorcard__list li { display: flex; align-items: center; gap: .6rem; color: var(--color-text); }
.bi-sectorcard__list i { color: var(--ic, var(--color-primary)); }

/* Steps */
.bi-steps { display: grid; gap: var(--sp-lg); }
.bi-steps--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.bi-steps--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.bi-step { position: relative; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: var(--sp-xl); }
.bi-step--card { background: color-mix(in srgb, var(--ic, var(--color-primary)) 7%, #fff); border: 1px solid color-mix(in srgb, var(--ic, var(--color-primary)) 18%, #fff); color: var(--color-text); transition: transform var(--tr-base); }
.bi-step--card:hover { transform: translateY(-6px); }
.bi-step__num { position: absolute; top: -16px; left: -10px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800; background: var(--color-accent); color: var(--color-dark); box-shadow: var(--shadow-md); }
.bi-step--card .bi-step__num { background: var(--ic, var(--color-primary)); color: #fff; }
.bi-step__icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); font-size: 1.5rem; color: var(--ic, var(--color-primary-mid)); background: color-mix(in srgb, var(--ic, var(--color-primary-mid)) 20%, transparent); margin: var(--sp-sm) 0 var(--sp-md); }
.bi-step--card .bi-step__icon { background: color-mix(in srgb, var(--ic, var(--color-primary)) 14%, #fff); }
.bi-step h3 { font-size: var(--fs-lg); margin-bottom: 2px; }
.bi-step__en { color: rgba(255,255,255,.7); font-size: var(--fs-sm); margin-bottom: var(--sp-sm); }
.bi-step--card .bi-step__en { color: var(--ic, var(--color-primary)); font-weight: 600; margin-bottom: var(--sp-sm); }
.bi-step__desc { color: rgba(255,255,255,.6); font-size: var(--fs-sm); }
.bi-step--card .bi-step__desc { color: var(--color-text-muted); }
.bi-step__sub { color: var(--color-text-light); font-size: var(--fs-xs); margin-top: 4px; }

/* Eligibility / requirements split */
.bi-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
.bi-reqs { display: flex; flex-direction: column; gap: var(--sp-md); }
.bi-req { display: flex; align-items: flex-start; gap: var(--sp-md); padding: var(--sp-md); background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.bi-req__check { width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--color-primary-light); color: var(--color-primary); }
.bi-req h4 { font-size: var(--fs-base); }
.bi-req p { font-size: var(--fs-sm); color: var(--color-text-muted); }
.bi-docs { background: #fff; border-radius: var(--r-xl); padding: var(--sp-2xl); box-shadow: var(--shadow-xl); }
.bi-docs h3 { text-align: center; margin-bottom: var(--sp-lg); }
.bi-doc { display: flex; align-items: center; gap: .8rem; padding: var(--sp-md); background: var(--color-bg-light); border-radius: var(--r-md); margin-bottom: var(--sp-sm); }
.bi-doc i { color: var(--color-primary); }

/* Partnership timeline */
.bi-timeline { background: linear-gradient(135deg, #1E293B, #0B1220); color: #fff; border-radius: var(--r-xl); padding: var(--sp-2xl); }
.bi-timeline > h3 { margin-bottom: var(--sp-lg); color: var(--color-accent-light); }
.bi-tl-item { display: flex; gap: var(--sp-md); padding-bottom: var(--sp-lg); position: relative; }
.bi-tl-item:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--color-accent), transparent); }
.bi-tl-item__num { width: 28px; height: 28px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-accent); color: var(--color-dark); font-weight: 700; font-size: var(--fs-sm); }
.bi-tl-item h4 { font-size: var(--fs-base); }
.bi-tl-item p { font-size: var(--fs-sm); color: rgba(255,255,255,.7); }

/* Trades grid (RPL) */
.bi-trades { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--sp-md); }
.bi-trade { background: #fff; border-radius: var(--r-md); padding: var(--sp-lg) var(--sp-md); text-align: center; box-shadow: var(--shadow-sm); border: 2px solid transparent; transition: all var(--tr-base); }
.bi-trade:hover { transform: translateY(-5px); border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.bi-trade__icon { width: 48px; height: 48px; margin: 0 auto var(--sp-sm); display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); font-size: 1.25rem; color: var(--ic, var(--color-primary)); background: color-mix(in srgb, var(--ic, var(--color-primary)) 14%, #fff); }
.bi-trade__ur { display: block; font-weight: 600; color: var(--color-text); font-size: var(--fs-sm); }
.bi-trade__en { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }

/* FAQ accordion */
.bi-faq { display: flex; flex-direction: column; gap: var(--sp-md); }
.bi-faq__item { background: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; }
.bi-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: var(--sp-lg); background: none; border: 0; cursor: pointer; text-align: left; font-weight: 600; color: var(--color-text); font-size: var(--fs-base); }
.bi-faq__chev { color: var(--color-primary); transition: transform var(--tr-base); }
.bi-faq__item.is-open .bi-faq__chev { transform: rotate(180deg); }
.bi-faq__a { max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--tr-slow), opacity var(--tr-base), padding var(--tr-base); padding: 0 var(--sp-lg); }
.bi-faq__item.is-open .bi-faq__a { max-height: 600px; opacity: 1; padding-bottom: var(--sp-lg); }
.bi-faq__a p { color: var(--color-text-muted); }

/* CTA banner */
.bi-cta { padding-block: clamp(3rem, 6vw, 5rem); text-align: center; color: #fff; background: linear-gradient(120deg, #1E293B 0%, #0F172A 100%); }
.bi-cta--green { background: linear-gradient(120deg, #1E293B 0%, #0F172A 100%); }
.bi-cta h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: var(--sp-sm); }
.bi-cta p { color: rgba(255,255,255,.85); font-size: var(--fs-lg); margin-bottom: var(--sp-xl); }
.bi-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-md); }

@media (max-width: 860px) {
	.bi-hero__inner { grid-template-columns: 1fr; }
	.bi-hero__visual { order: -1; }
	.bi-split { grid-template-columns: 1fr; }
	.bi-tabbar { top: 0; }
}
@media (max-width: 480px) {
	.bi-hero__panel { grid-template-columns: 1fr; }
	.bi-stats { gap: var(--sp-sm); }
}

/* =============================================================================
   Students - Open Programs (premium alternating showcase)  .stu-open*
   ============================================================================= */
.stu-open__list { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.5rem); }
.stu-open-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	transition: transform .45s cubic-bezier(.4,0,.2,1) .06s, box-shadow .45s cubic-bezier(.4,0,.2,1) .06s;
}
.stu-open-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }

/* Alternating sides (zig-zag) */
.stu-open-card__media { order: 1; }
.stu-open-card__body  { order: 2; }
.stu-open-card--reverse .stu-open-card__media { order: 2; }
.stu-open-card--reverse .stu-open-card__body  { order: 1; }

/* Media */
.stu-open-card__media {
	position: relative;
	min-height: 320px;
	background: linear-gradient(150deg, var(--c-from, #059669) 0%, var(--c-to, #0f766e) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.stu-open-card__media::after {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient(120% 80% at 80% 0%, rgba(255,255,255,.18), transparent 60%);
	pointer-events: none;
}
.stu-open-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.stu-open-card:hover .stu-open-card__media img { transform: scale(1.06); }
.stu-open-card__icon { font-size: 4.5rem; color: rgba(255,255,255,.92); position: relative; z-index: 1; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.stu-open-card:hover .stu-open-card__icon { transform: scale(1.12) rotate(-4deg); }
.stu-open-card__pill { position: absolute; top: 1rem; left: 1rem; z-index: 2; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; background: rgba(255,255,255,.95); color: var(--color-primary); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; box-shadow: var(--shadow-sm); }
.stu-open-card__dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: biPulse 2s infinite; }

/* Body */
.stu-open-card__body { padding: clamp(1.75rem, 3vw, 2.85rem); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--sp-md); }
.stu-open-card__badge { display: inline-block; padding: .3rem .85rem; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: linear-gradient(120deg, var(--c-from, #059669), var(--c-to, #0f766e)); }
.stu-open-card__title { font-size: clamp(1.4rem, 2.5vw, 1.95rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.stu-open-card__desc { color: var(--color-text-muted); line-height: 1.7; }
.stu-open-card__meta { display: flex; flex-wrap: wrap; gap: .55rem .65rem; list-style: none; padding: 0; margin: 0; }
.stu-open-card__meta li { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; background: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: var(--r-full); font-size: var(--fs-sm); color: var(--color-text); }
.stu-open-card__meta i { color: var(--c-from, var(--color-primary)); }
.stu-open-card__features { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.stu-open-card__features li { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--fs-sm); color: var(--color-text); }
.stu-open-card__features i { color: var(--color-primary); margin-top: .25rem; font-size: .8em; }
.stu-open-card__cta { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-xs); }
.stu-open-card__cta .btn { transition: transform var(--tr-base), box-shadow var(--tr-base), background-color var(--tr-base), gap var(--tr-base); }
.stu-open-card:hover .stu-open-card__cta .btn-primary { box-shadow: 0 16px 30px -12px rgba(10,104,71,.55); }

/* Responsive: stack with media on top regardless of zig-zag order */
@media (max-width: 860px) {
	.stu-open-card { grid-template-columns: 1fr; }
	.stu-open-card__media { min-height: 220px; order: 1 !important; }
	.stu-open-card__body  { order: 2 !important; }
}
@media (prefers-reduced-motion: reduce) {
	.stu-open-card, .stu-open-card__media img, .stu-open-card__icon { transition: none; }
	.stu-open-card:hover { transform: none; }
}

/* =============================================================================
   Institute Registration - premium 10-step flow  .ireg-*
   ============================================================================= */

/* Hero */
.ireg-hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--color-bg-light); }
.ireg-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.ireg-hero__bg::before { content: ''; position: absolute; top: -34%; left: 50%; transform: translateX(-50%); width: 680px; height: 480px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 13%, transparent), transparent); }
.ireg-hero__bg::after { content: ''; position: absolute; bottom: -42%; right: 6%; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent); }
.ireg-hero__inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; text-align: center; }
.ireg-hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-lg); }
.ireg-hero__pulse { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: biPulse 2s infinite; }
.ireg-hero__title { font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; color: var(--color-text); margin-bottom: var(--sp-md); }
.ireg-hero__lead { font-size: var(--fs-lg); color: var(--color-text-muted); max-width: 560px; margin: 0 auto var(--sp-xl); }
.ireg-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-md); margin-bottom: var(--sp-xl); }
.ireg-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-lg); list-style: none; padding: 0; margin: 0; }
.ireg-hero__meta li { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--color-text-muted); }
.ireg-hero__meta i { color: var(--color-primary); }

/* Snake grid */
.ireg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }
@media (min-width: 640px)  { .ireg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ireg-grid { grid-template-columns: repeat(5, 1fr); align-items: start; } .ireg-step { order: var(--lg-order, 0); } }

/* Step card */
.ireg-step { position: relative; background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-lg); padding: var(--sp-lg) var(--sp-md) var(--sp-md); text-align: center; cursor: pointer; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.ireg-step:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); box-shadow: var(--shadow-md); }
.ireg-step:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ireg-step.is-open { border-color: var(--color-primary); box-shadow: 0 12px 32px -10px color-mix(in srgb, var(--color-primary) 42%, transparent); }

/* Number / icon swap */
.ireg-step__num { position: relative; width: 46px; height: 46px; margin: 0 auto var(--sp-sm); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-bg-section); color: var(--color-text-muted); font-weight: 700; transition: background .3s ease, color .3s ease, box-shadow .3s ease; }
.ireg-step__n, .ireg-step__ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .3s ease, transform .3s ease; }
.ireg-step__ic { opacity: 0; transform: scale(.55); font-size: 1.05rem; }
.ireg-step:hover .ireg-step__num, .ireg-step.is-open .ireg-step__num { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; box-shadow: 0 7px 18px -5px rgba(34,197,94,.55); }
.ireg-step:hover .ireg-step__n, .ireg-step.is-open .ireg-step__n { opacity: 0; transform: scale(.55); }
.ireg-step:hover .ireg-step__ic, .ireg-step.is-open .ireg-step__ic { opacity: 1; transform: scale(1); }
.ireg-step--final .ireg-step__num { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; box-shadow: 0 7px 18px -5px rgba(34,197,94,.45); }

.ireg-step__title { font-size: var(--fs-base); font-weight: 700; color: var(--color-text); }
.ireg-step__sub { font-size: var(--fs-xs); color: var(--color-text-light); margin-top: 2px; }
.ireg-step__sub--final { color: var(--color-primary); font-weight: 600; }
.ireg-step__chev { display: block; margin-top: .65rem; color: #cbd5e1; font-size: .7rem; transition: transform .3s ease, color .3s ease; }
.ireg-step.is-open .ireg-step__chev { color: var(--color-primary); transform: rotate(180deg); }

/* Accordion panel */
.ireg-step__panel { max-height: 0; overflow: hidden; opacity: 0; text-align: left; transition: max-height .35s ease, opacity .3s ease, margin .3s ease, padding .3s ease; }
.ireg-step.is-open .ireg-step__panel { max-height: 220px; opacity: 1; margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--color-border); }
.ireg-step__panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ireg-step__panel li { position: relative; padding-left: 1rem; font-size: var(--fs-xs); color: var(--color-text-muted); }
.ireg-step__panel li::before { content: ''; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); }

/* Turn arrow (desktop snake only) */
.ireg-turn { display: none; }
@media (min-width: 1024px) {
	.ireg-turn { display: flex; grid-column: 1 / -1; order: 0; align-items: center; justify-content: flex-end; padding: .35rem 0; gap: 0; }
}
.ireg-turn__line { height: 2px; width: 64px; background: linear-gradient(90deg, transparent, var(--color-border)); }
.ireg-turn__dot { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-primary); font-size: .7rem; box-shadow: var(--shadow-sm); }

/* Key figures */
.ireg-facts { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #fff; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.ireg-facts__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg); }
@media (min-width: 768px) { .ireg-facts__grid { grid-template-columns: repeat(4, 1fr); } }
.ireg-fact { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.ireg-fact__icon { width: 46px; height: 46px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--color-primary-light); color: var(--color-primary); font-size: 1.1rem; margin-bottom: .35rem; }
.ireg-fact__num { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; color: var(--color-text); letter-spacing: -.01em; }
.ireg-fact__lbl { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* Closing CTA */
.ireg-cta { position: relative; overflow: hidden; padding-block: clamp(3rem, 6vw, 4.5rem); background: linear-gradient(120deg, #1E293B 0%, #0F172A 100%); color: #fff; }
.ireg-cta__bg { position: absolute; inset: 0; pointer-events: none; }
.ireg-cta__bg::before { content: ''; position: absolute; top: -40%; right: -5%; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent); }
.ireg-cta__bg::after { content: ''; position: absolute; bottom: -50%; left: -5%; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(closest-side, rgba(37,99,235,.22), transparent); }
.ireg-cta__inner { position: relative; z-index: 1; text-align: center; max-width: 640px; margin-inline: auto; }
.ireg-cta__inner h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 800; color: #fff; margin-bottom: var(--sp-sm); }
.ireg-cta__inner p { color: rgba(255,255,255,.72); margin-bottom: var(--sp-xl); }
.ireg-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-md); }

@media (prefers-reduced-motion: reduce) {
	.ireg-step, .ireg-step__num, .ireg-step__n, .ireg-step__ic, .ireg-step__chev { transition: none; }
	.ireg-step:hover { transform: none; }
}

/* =============================================================================
   Course "Interested?" button + interest modal  .course-card__interest / .ci-*
   ============================================================================= */
.course-card__interest {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	margin-top: .6rem;
	padding: .7rem 1rem;
	border: 1px dashed color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
	background: color-mix(in srgb, var(--color-accent) 8%, #fff);
	color: #b45309;
	font-weight: 700;
	font-size: var(--fs-sm);
	border-radius: var(--r-md);
	cursor: pointer;
	transition: background-color var(--tr-base), border-color var(--tr-base), transform var(--tr-base), box-shadow var(--tr-base);
}
.course-card__interest:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(245,158,11,.6); }
.course-card__interest:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Modal */
.ci-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--sp-lg); }
.ci-modal[hidden] { display: none; }
.ci-modal__overlay { position: absolute; inset: 0; background: rgba(15,23,42,.6); backdrop-filter: blur(3px); animation: ciFade .25s ease; }
.ci-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 440px; background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-xl); padding: clamp(1.5rem, 4vw, 2.25rem); animation: ciPop .3s cubic-bezier(.4,0,.2,1); max-height: 92vh; overflow-y: auto; }
@keyframes ciFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ciPop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.ci-modal__close { position: absolute; top: .9rem; right: .9rem; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--color-bg-section); color: var(--color-text-muted); cursor: pointer; transition: background-color var(--tr-base), color var(--tr-base); display: flex; align-items: center; justify-content: center; }
.ci-modal__close:hover { background: #fee2e2; color: #dc2626; }

.ci-modal__head { text-align: center; margin-bottom: var(--sp-lg); }
.ci-modal__icon { width: 56px; height: 56px; margin: 0 auto var(--sp-md); display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.4rem; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, #fff); }
.ci-modal__head h3 { font-size: var(--fs-xl); font-weight: 800; color: var(--color-text); }
.ci-modal__sub { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: .35rem; }
.ci-modal__course { margin-top: .65rem; display: inline-block; padding: .35rem .85rem; border-radius: var(--r-full); background: var(--color-primary-light); color: var(--color-primary); font-weight: 700; font-size: var(--fs-sm); }
.ci-modal__course[hidden] { display: none; }

.ci-form { display: flex; flex-direction: column; gap: var(--sp-md); }
.ci-field { display: flex; flex-direction: column; gap: .35rem; }
.ci-field > span { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); }
.ci-field input { width: 100%; padding: .75rem 1rem; border: 1px solid var(--color-border); border-radius: var(--r-md); font-size: var(--fs-base); font-family: inherit; transition: border-color var(--tr-base), box-shadow var(--tr-base); }
.ci-field input:focus { outline: 0; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.ci-form__msg { font-size: var(--fs-sm); color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; padding: .6rem .85rem; border-radius: var(--r-md); margin: 0; }
.ci-form__msg[hidden] { display: none; }
.ci-form__submit { width: 100%; justify-content: center; margin-top: .25rem; }
.ci-form__submit.is-loading { opacity: .7; pointer-events: none; }
.ci-form__submit.is-loading .ci-form__btn-text::after { content: '…'; }

.ci-modal__done { text-align: center; padding: var(--sp-md) 0; }
.ci-modal__done[hidden] { display: none; }
.ci-modal__done-icon { font-size: 3rem; color: #16a34a; display: block; margin-bottom: var(--sp-sm); }
.ci-modal__done h3 { font-size: var(--fs-xl); font-weight: 800; color: var(--color-text); margin-bottom: .4rem; }
.ci-modal__done p { color: var(--color-text-muted); margin-bottom: var(--sp-lg); }

@media (prefers-reduced-motion: reduce) {
	.ci-modal__overlay, .ci-modal__dialog { animation: none; }
	.course-card__interest:hover { transform: none; }
}

/* =============================================================================
   Institute Registration - life & polish enhancements (theme 2.5.1)
   ============================================================================= */

/* Hero: drifting glows + floating decorative chips */
.ireg-hero__bg::before { animation: iregDrift1 15s ease-in-out infinite; }
.ireg-hero__bg::after  { animation: iregDrift2 18s ease-in-out infinite; }
@keyframes iregDrift1 { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-46%, 18px); } }
@keyframes iregDrift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-20px, -16px); } }

.ireg-hero__shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ireg-shape { position: absolute; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: rgba(255,255,255,.72); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); backdrop-filter: blur(4px); font-size: 1.2rem; animation: iregFloat 6.5s ease-in-out infinite; }
.ireg-shape--1 { top: 16%; left: 7%;  color: #0A6847; animation-delay: 0s; }
.ireg-shape--2 { top: 26%; right: 9%; color: #ca8a04; animation-delay: 1.3s; }
.ireg-shape--3 { bottom: 22%; left: 12%; color: #2563eb; animation-delay: 2.2s; }
.ireg-shape--4 { bottom: 17%; right: 13%; color: #7c3aed; animation-delay: .7s; }
@keyframes iregFloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
@media (max-width: 960px) { .ireg-shape { display: none; } }

.ireg-hero__eyebrow { transition: transform var(--tr-base), box-shadow var(--tr-base); }
.ireg-hero__eyebrow:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Step cards: per-step accent (--sc), animated top bar, ring, colored glow */
.ireg-step { overflow: hidden; }
.ireg-step::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--sc, var(--color-primary)), color-mix(in srgb, var(--sc, var(--color-primary)) 45%, #fff)); transition: width .4s cubic-bezier(.22,.61,.36,1); }
.ireg-step:hover::before, .ireg-step.is-open::before { width: 64%; }
.ireg-step:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--sc, var(--color-primary)) 35%, var(--color-border)); box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--sc, var(--color-primary)) 48%, transparent); }
.ireg-step.is-open { border-color: var(--sc, var(--color-primary)); box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--sc, var(--color-primary)) 48%, transparent); }

/* Number circle takes the step's accent on hover/open + a pulsing ring */
.ireg-step__num::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--sc, var(--color-primary)); opacity: 0; transform: scale(.82); transition: opacity .35s ease, transform .35s ease; }
.ireg-step:hover .ireg-step__num::after, .ireg-step.is-open .ireg-step__num::after { opacity: .45; transform: scale(1); }
.ireg-step:hover .ireg-step__num, .ireg-step.is-open .ireg-step__num { background: linear-gradient(135deg, var(--sc, var(--color-primary)), color-mix(in srgb, var(--sc, var(--color-primary)) 62%, #000)); color: #fff; box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--sc, var(--color-primary)) 60%, transparent); }
.ireg-step.is-open .ireg-step__chev { color: var(--sc, var(--color-primary)); }
.ireg-step.is-open .ireg-step__panel li::before { background: var(--sc, var(--color-primary)); }

/* Snake turn arrow: gentle bob */
.ireg-turn__dot { animation: iregBob 2s ease-in-out infinite; }
@keyframes iregBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Key figures: become hover-lift cards + animated suffix */
.ireg-fact { padding: var(--sp-lg) var(--sp-md); border-radius: var(--r-lg); border: 1px solid transparent; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease; }
.ireg-fact:hover { transform: translateY(-5px); border-color: var(--color-border); background: var(--color-bg-light); box-shadow: var(--shadow-md); }
.ireg-fact__icon { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.ireg-fact:hover .ireg-fact__icon { transform: translateY(-3px) scale(1.1); }
.ireg-fact__num { display: inline-flex; align-items: baseline; }
.ireg-fact__suffix { color: var(--color-primary); }

/* CTA: slow light-sweep shimmer + button sheen */
.ireg-cta { isolation: isolate; }
.ireg-cta::after { content: ''; position: absolute; top: 0; left: -35%; width: 35%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.07), transparent); transform: skewX(-12deg); animation: iregShimmer 7s linear infinite; pointer-events: none; z-index: 0; }
@keyframes iregShimmer { 0% { left: -35%; } 60%, 100% { left: 135%; } }
.ireg-cta__bg::before { animation: iregPulseGlow 9s ease-in-out infinite; }
@keyframes iregPulseGlow { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }

/* Sheen sweep on the hero/CTA primary buttons */
.ireg-hero__cta .btn, .ireg-cta__btns .btn { position: relative; overflow: hidden; }
.ireg-hero__cta .btn::after, .ireg-cta__btns .btn::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); transition: left .6s ease; }
.ireg-hero__cta .btn:hover::after, .ireg-cta__btns .btn:hover::after { left: 130%; }

@media (prefers-reduced-motion: reduce) {
	.ireg-hero__bg::before, .ireg-hero__bg::after, .ireg-shape, .ireg-turn__dot, .ireg-cta::after, .ireg-cta__bg::before { animation: none; }
	.ireg-step:hover, .ireg-fact:hover { transform: none; }
	.ireg-hero__cta .btn::after, .ireg-cta__btns .btn::after { display: none; }
}

/* =============================================================================
   Registration steps - colourful resting state + open-on-hover (theme 2.5.2)
   ============================================================================= */

/* Lively first look (no hover needed): tinted card, coloured top bar,
   filled accent number circle, accent sub-label. */
.ireg-step { background: color-mix(in srgb, var(--sc, var(--color-primary)) 5%, #fff); border-color: color-mix(in srgb, var(--sc, var(--color-primary)) 24%, var(--color-border)); }
.ireg-step::before { width: 46%; }
.ireg-step:hover::before, .ireg-step.is-open::before { width: 72%; }
.ireg-step__num { background: linear-gradient(135deg, var(--sc, var(--color-primary)), color-mix(in srgb, var(--sc, var(--color-primary)) 60%, #000)); color: #fff; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--sc, var(--color-primary)) 55%, transparent); }
.ireg-step__sub { color: color-mix(in srgb, var(--sc, var(--color-primary)) 75%, var(--color-text-muted)); font-weight: 600; }
.ireg-step__chev { color: color-mix(in srgb, var(--sc, var(--color-primary)) 60%, var(--color-text-light)); }
/* Keep the accent number visible at rest; the icon still swaps in on hover. */
.ireg-step__n { opacity: 1; }

/* Open-on-hover: on pointer devices the panel expands inline (it gently pushes
   the next row down instead of overlapping). Touch/keyboard keep the same
   accordion via the .is-open class. */
@media (hover: hover) and (min-width: 1024px) {
	.ireg-step:hover .ireg-step__panel,
	.ireg-step:focus-within .ireg-step__panel {
		max-height: 220px; opacity: 1; margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--color-border);
	}
	.ireg-step:hover .ireg-step__chev, .ireg-step:focus-within .ireg-step__chev { color: var(--sc, var(--color-primary)); transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
	.ireg-step__panel { transition: none; }
}

/* TVET sector: brand/favicon logos on authority cards, board items + partners */
.tvet-tevta-card__logo { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; margin-bottom: var(--sp-md); border-radius: 18px; background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); overflow: hidden; padding: 10px; }
.tvet-tevta-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.tvet-board-item__logo { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--color-border); padding: 5px; }
.tvet-board-item > span { flex: 1; min-width: 0; }
/* Logo tile: fixed height, flexible width so BOTH square logos (UNDP, PSDF) and
 * horizontal ones (World Bank, British Council) sit centred without distortion. */
.tvet-partner-card__logo--img { display: flex; align-items: center; justify-content: center; height: 84px; width: 100%; max-width: 170px; margin-inline: auto; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); overflow: hidden; padding: 10px 16px; }
.tvet-partner-card__logo--img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Wide (horizontal) logos may use the full card width. */
.tvet-partner-card__logo--img.is-wide { max-width: 100%; }
/* White / light logos sit on a dark tile so they stay visible. */
.tvet-partner-card__logo--img.is-dark { background: #0f172a; border-color: #0f172a; }
/* Training-provider cards carry a logo tile, centred above the text. */
.tvet-provider-card { text-align: center; }
.tvet-provider-card__logo { margin: 0 auto var(--sp-md); }
.tvet-provider-card .card__read-more { justify-content: center; }

/* Wing - Curricula Library: CBT + Conventional stream cards */
.wing-curricula__streams { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--sp-xl); }
.wing-curstream { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-2xl); transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-base); }
.wing-curstream::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--cur, var(--color-primary)), color-mix(in srgb, var(--cur, var(--color-primary)) 45%, #fff)); }
.wing-curstream:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--cur, var(--color-primary)) 35%, var(--color-border)); box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--cur, var(--color-primary)) 45%, transparent); }
.wing-curstream__head { display: flex; align-items: center; gap: var(--sp-md); margin-bottom: var(--sp-lg); }
.wing-curstream__icon { width: 60px; height: 60px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: var(--r-lg); font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, var(--cur, var(--color-primary)), color-mix(in srgb, var(--cur, var(--color-primary)) 62%, #000)); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--cur, var(--color-primary)) 55%, transparent); }
.wing-curstream__name { font-size: var(--fs-xl); font-weight: 800; color: var(--color-text); line-height: 1.2; }
.wing-curstream__sub { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 2px; }
.wing-curstream__list { list-style: none; margin: 0 0 var(--sp-lg); padding: 0; display: grid; gap: .5rem; }
.wing-curstream__list li { display: flex; align-items: flex-start; gap: .55rem; color: var(--color-text); font-size: var(--fs-sm); }
.wing-curstream__list i { color: var(--cur, var(--color-primary)); margin-top: .15rem; font-size: .9em; }
.wing-curstream__link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--cur, var(--color-primary)); transition: gap var(--tr-base); }
.wing-curstream__link:hover { gap: .85rem; }
@media (prefers-reduced-motion: reduce) { .wing-curstream:hover { transform: none; } }

/* Intro-video placeholder (Registration + Affiliation) when no video is set */
.reg-video__ph { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; width: 100%; aspect-ratio: 16/9; border-radius: 1.15rem; overflow: hidden; background: radial-gradient(circle at 50% 38%, #103a2c 0%, #0b1220 72%); }
.reg-video__ph-label { position: relative; font-size: var(--fs-sm); font-weight: 600; color: rgba(255,255,255,.78); }

/* Clickable wing notifications */
.wing-update--link { display: block; border-radius: 0 var(--r-md) var(--r-md) 0; text-decoration: none; transition: background-color var(--tr-base), transform var(--tr-base), box-shadow var(--tr-base); }
.wing-update--link:hover { background: color-mix(in srgb, var(--u) 7%, #fff); transform: translateX(3px); box-shadow: var(--shadow-sm); }
.wing-update__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); margin-top: 8px; flex-wrap: wrap; }
.wing-update__date { font-size: var(--fs-xs); color: var(--color-text-light); margin: 0; }
.wing-update__more { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); font-weight: 700; color: var(--u); opacity: 0; transform: translateX(-4px); transition: opacity var(--tr-base), transform var(--tr-base); }
.wing-update--link:hover .wing-update__more, .wing-update--link:focus-visible .wing-update__more { opacity: 1; transform: translateX(0); }

/* Notification page: wing-source tag */
.notif-card__tag { display: inline-block; align-self: flex-start; padding: .2rem .7rem; margin-bottom: .35rem; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; color: var(--nc, var(--color-primary)); background: color-mix(in srgb, var(--nc, var(--color-primary)) 12%, #fff); }

/* Course card: inline "Show Interest" button (side by side with View Details) */
.course-card__btn--interest { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1.5px dashed color-mix(in srgb, var(--color-accent) 55%, var(--color-border)); background: color-mix(in srgb, var(--color-accent) 8%, #fff); color: #b45309 !important; }
.course-card__btn--interest:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff !important; }

/* Notices & Tenders archive list */
.notice-list { display: flex; flex-direction: column; gap: var(--sp-md); }

/* Takamul hero: sector card titles must stay dark (the .bi-hero h3 catch-all turned them white) */
.bi-hero .bi-sector h3 { color: var(--color-text); }

/* Takamul: trade name chips (students "Trades Available") */
.tkm-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem; }
.tkm-chip { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); text-align: left; line-height: 1.35; transition: border-color var(--tr-base), box-shadow var(--tr-base), transform var(--tr-base), background-color var(--tr-base); }
.tkm-chip i { flex: 0 0 auto; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: .7rem; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, #fff); }
.tkm-chip:hover { border-color: var(--color-primary); background: var(--color-primary-light); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
@media (max-width: 560px) { .tkm-chips { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

/* Notifications: 2-line message clamp, linked titles, single detail view */
.notif-card__msg { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-card__title a { color: inherit; transition: color var(--tr-base); }
.notif-card__title a:hover { color: var(--nc, var(--color-primary)); }
.notif-back { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--sp-lg); transition: gap var(--tr-base), color var(--tr-base); }
.notif-back:hover { gap: .8rem; color: var(--color-primary); }
.notif-detail { background: #fff; border: 1px solid var(--color-border); border-left: 5px solid var(--nc, var(--color-primary)); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow-md); }
.notif-detail__head { display: flex; align-items: flex-start; gap: var(--sp-md); margin-bottom: var(--sp-lg); }
.notif-detail__icon { width: 52px; height: 52px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); font-size: 1.4rem; color: var(--nc, var(--color-primary)); background: color-mix(in srgb, var(--nc, var(--color-primary)) 12%, #fff); }
.notif-detail__date { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: .35rem; }
.notif-detail__body { color: var(--color-text); line-height: 1.8; margin-bottom: var(--sp-lg); }
.notif-detail__body p { margin: 0 0 .85rem; }

/* Registration: condensed 4-step grid */
.ireg-grid--steps4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .ireg-grid--steps4 { grid-template-columns: repeat(4, 1fr); } }

/* =============================================================================
   Quick Resource Hub (Registration)  .qrh*
   ============================================================================= */
.qrh__layout { display: grid; grid-template-columns: 340px 1fr; gap: var(--sp-xl); align-items: start; }
.qrh__tabs { display: flex; flex-direction: column; gap: .6rem; }
.qrh-tab { display: flex; align-items: center; gap: .85rem; text-align: left; width: 100%; padding: .9rem 1rem; border: 1px solid var(--color-border); border-radius: var(--r-lg); background: #fff; cursor: pointer; transition: transform var(--tr-base), border-color var(--tr-base), box-shadow var(--tr-base), background-color var(--tr-base); }
.qrh-tab:hover { border-color: color-mix(in srgb, var(--qc) 40%, var(--color-border)); transform: translateX(3px); }
.qrh-tab.is-active { border-color: var(--qc); background: color-mix(in srgb, var(--qc) 5%, #fff); box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--qc) 45%, transparent); }
.qrh-tab__icon { width: 44px; height: 44px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); font-size: 1.1rem; color: var(--qc); background: color-mix(in srgb, var(--qc) 12%, #fff); transition: background-color var(--tr-base), color var(--tr-base); }
.qrh-tab.is-active .qrh-tab__icon { background: var(--qc); color: #fff; }
.qrh-tab__text { display: flex; flex-direction: column; min-width: 0; }
.qrh-tab__title { font-weight: 700; color: var(--color-text); line-height: 1.25; }
.qrh-tab__sub { font-size: var(--fs-xs); color: var(--color-text-muted); }
.qrh-tab__arrow { margin-left: auto; color: var(--color-text-light); transition: transform var(--tr-base), color var(--tr-base); }
.qrh-tab.is-active .qrh-tab__arrow { color: var(--qc); transform: translateX(3px); }

.qrh-panel { display: none; background: #fff; border: 1px solid var(--color-border); border-top: 4px solid var(--qc); border-radius: var(--r-xl); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow-md); animation: biFade .4s ease; }
.qrh-panel.is-active { display: block; }
.qrh-panel__icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-lg); font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, var(--qc), color-mix(in srgb, var(--qc) 62%, #000)); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--qc) 55%, transparent); margin-bottom: var(--sp-md); }
.qrh-panel h3 { font-size: var(--fs-2xl); font-weight: 800; }
.qrh-panel__sub { color: var(--qc); font-weight: 600; margin-bottom: var(--sp-md); }
.qrh-panel__desc { color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--sp-lg); max-width: 60ch; }
.qrh-panel__video { position: relative; aspect-ratio: 16 / 9; max-width: 680px; border-radius: var(--r-lg); overflow: hidden; background: #000; margin-bottom: var(--sp-lg); }
.qrh-panel__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 860px) { .qrh__layout { grid-template-columns: 1fr; } }

/* Quick Resource Hub: in-panel summary points */
.qrh-panel__points { margin-bottom: var(--sp-lg); }
.qrh-panel__pt { font-size: var(--fs-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--qc); margin-bottom: var(--sp-sm); }
.qrh-panel__points ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.qrh-panel__points li { display: flex; align-items: flex-start; gap: .6rem; color: var(--color-text); font-size: var(--fs-sm); line-height: 1.55; }
.qrh-panel__points li i { color: var(--qc); margin-top: .2rem; font-size: .9em; flex: 0 0 auto; }
.qrh-panel__cta { margin-top: .25rem; }

/* Logo tiles: letter-avatar fallback when a favicon/logo image fails to load */
.tvet-tevta-card__logo, .tvet-partner-card__logo--img { position: relative; }
.logo-tile__fb { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font-weight: 800; font-size: 1.5rem; color: var(--lf, var(--color-primary)); background: color-mix(in srgb, var(--lf, var(--color-primary)) 10%, #fff); border-radius: inherit; }
.logo-tile__img { position: relative; z-index: 1; }

/* =============================================================================
   NVQF: homepage interactive donut + /nvqf/ page
   ============================================================================= */
.section-pad--alt { background: var(--color-bg-light); }

/* Homepage interactive donut */
.home-nvqf { padding-block: clamp(2.5rem, 5vw, 4.5rem); background: linear-gradient(180deg, var(--color-bg-light) 0%, var(--color-white) 100%); }
.home-nvqf__layout { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; max-width: 1080px; margin: 0 auto; }
.home-nvqf__chart { position: relative; display: flex; justify-content: center; }
.home-nvqf__wrap { position: relative; width: min(380px, 90vw); }
.home-nvqf__svg { display: block; width: 100%; height: auto; overflow: visible; }
.home-nvqf__seg { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform .3s ease, filter .3s ease; outline: none; }
.home-nvqf__seg path { animation: nvqfSeg .55s ease both; }
.home-nvqf__seg:hover, .home-nvqf__seg:focus-visible { filter: brightness(1.08); transform: scale(1.05); }
.home-nvqf__seg.is-active { filter: brightness(1.12); transform: scale(1.08); }
.home-nvqf__seg:focus-visible path { stroke: var(--color-dark); stroke-width: 3; }
.home-nvqf__seg-label { pointer-events: none; fill: #fff; text-anchor: middle; dominant-baseline: middle; font-weight: 800; font-size: 18px; text-shadow: 0 1px 3px rgba(0,0,0,.28); }
@keyframes nvqfSeg { from { opacity: 0; } to { opacity: 1; } }
.home-nvqf__tooltip { position: absolute; left: 50%; top: -14px; transform: translate(-50%, 6px); background: var(--color-white); padding: .55rem .8rem; border-radius: var(--r-md); box-shadow: var(--shadow-lg); font-size: var(--fs-xs); line-height: 1.35; pointer-events: none; opacity: 0; transition: opacity .2s ease, transform .2s ease; z-index: 5; white-space: nowrap; display: flex; flex-direction: column; gap: 2px; }
.home-nvqf__tooltip[hidden] { display: flex; }
.home-nvqf__tooltip.is-visible { opacity: 1; transform: translate(-50%, 0); }
.home-nvqf__tt-title { font-weight: 800; }
.home-nvqf__tt-desc { color: var(--color-text-muted); }
.home-nvqf__panel { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow-md); min-height: 340px; display: flex; flex-direction: column; justify-content: flex-start; }
.home-nvqf__hub { cursor: pointer; outline: none; }
.home-nvqf__hub circle { transition: filter .2s ease; }
.home-nvqf__hub:hover circle, .home-nvqf__hub:focus-visible circle { filter: brightness(1.14); }
.home-nvqf__hub:focus-visible circle { stroke: #fff; stroke-width: 3; }
.home-nvqf__intro { display: flex; flex-direction: column; flex: 1 1 auto; }
.home-nvqf__intro[hidden] { display: none; }
.home-nvqf__kicker { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary); margin-bottom: .5rem; }
.home-nvqf__intro h3 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--color-text); margin: 0 0 .75rem; }
.home-nvqf__intro > p { color: var(--color-text-muted); line-height: 1.75; margin: 0 0 1rem; }
.home-nvqf__hint { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--color-text-light); margin: 0 0 1.5rem !important; }
.home-nvqf__hint i { color: var(--color-accent); }
.home-nvqf__explore { display: inline-flex; align-items: center; gap: .6rem; margin-top: auto; align-self: flex-start; padding: .8rem 1.6rem; border-radius: var(--r-full); border: 2px solid var(--color-primary); color: var(--color-primary); font-weight: 700; font-size: var(--fs-sm); transition: all var(--tr-base); }
.home-nvqf__explore:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(10,104,71,.22); }
.home-nvqf__level.is-in { animation: nvqfPanelIn .4s ease both; }
@keyframes nvqfPanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.home-nvqf__level-head { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); }
.home-nvqf__level-num { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; background: var(--color-white); border: 2px solid var(--color-primary); color: var(--color-primary); }
.home-nvqf__level-titles h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 800; color: var(--color-text); margin: 0; line-height: 1.2; }
.home-nvqf__level-meta { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: .2rem; }
.home-nvqf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; }
.home-nvqf__cell p { font-size: var(--fs-sm); color: var(--color-text); line-height: 1.5; margin: .35rem 0 0; }
.home-nvqf__cell-tag { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: .15rem .5rem; border-radius: var(--r-sm); }
.home-nvqf__cell-tag--k { color: #0A6847; background: #ecfdf5; }
.home-nvqf__cell-tag--s { color: #2563eb; background: #eff6ff; }
.home-nvqf__cell-tag--r { color: #ea580c; background: #fff7ed; }
.home-nvqf__cell-tag--e { color: #7c3aed; background: #f5f3ff; }
.home-nvqf__level-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.home-nvqf__level-more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: var(--fs-sm); color: var(--color-text-muted); transition: color var(--tr-fast); }
.home-nvqf__level-more:hover { color: var(--color-primary); }
.home-nvqf__level-find { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.3rem; border-radius: var(--r-full); border: 2px solid var(--color-primary); color: var(--color-primary); font-weight: 700; font-size: var(--fs-sm); transition: all var(--tr-base); }
.home-nvqf__level-find:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
@media (max-width: 860px) {
	.home-nvqf__layout { grid-template-columns: 1fr; }
	.home-nvqf__panel { min-height: 0; }
	.home-nvqf__grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* /nvqf/ page */
.nvqf-page-hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 5rem); background: linear-gradient(135deg, #0F172A 0%, #1F2937 55%, #0b1220 100%); color: #fff; text-align: center; }
.nvqf-page-hero__glow { position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% -10%, rgba(16,185,129,.28), transparent 70%); pointer-events: none; }
.nvqf-page-hero__inner { position: relative; max-width: 820px; margin: 0 auto; }
.nvqf-page-hero__badge { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem; border-radius: var(--r-full); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em; margin-bottom: 1rem; }
.nvqf-page-hero__badge i { color: var(--color-accent-light); }
.nvqf-page-hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; margin: 0 0 1rem; color: #fff; }
.nvqf-page-hero .nvqf-hl { color: var(--color-accent-light); }
.nvqf-page-hero p { font-size: var(--fs-lg); line-height: 1.7; color: rgba(255,255,255,.82); margin: 0; }
.nvqf-intro { display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; background: linear-gradient(135deg, var(--color-primary-light) 0%, #f0fdfa 100%); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: clamp(1.75rem, 4vw, 3rem); }
.nvqf-intro__body h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--color-text); margin: 0 0 1rem; }
.nvqf-intro__body > p { color: var(--color-text); line-height: 1.75; margin: 0 0 1.25rem; }
.nvqf-intro__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.nvqf-intro__list li { display: flex; align-items: flex-start; gap: .65rem; color: var(--color-text); font-weight: 500; }
.nvqf-intro__list i { color: var(--color-primary); margin-top: .2rem; }
.nvqf-intro__badge { flex-shrink: 0; width: clamp(120px, 20vw, 168px); aspect-ratio: 1; border-radius: 50%; background: var(--color-white); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nvqf-intro__badge-num { font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-mid)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nvqf-intro__badge-lbl { font-size: var(--fs-sm); font-weight: 700; color: var(--color-text-muted); }
.nvqf-cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.nvqf-cert-card { text-align: center; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-lg); padding: 1.75rem 1.25rem; box-shadow: var(--shadow-sm); transition: transform var(--tr-base), box-shadow var(--tr-base); }
.nvqf-cert-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.nvqf-cert-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--r-md); font-size: 1.3rem; margin-bottom: 1rem; color: var(--nvqf-accent, var(--color-primary)); background: color-mix(in srgb, var(--nvqf-accent, var(--color-primary)) 12%, #fff); }
.nvqf-cert-card h3 { font-size: var(--fs-lg); font-weight: 800; color: var(--color-text); margin: 0 0 .4rem; }
.nvqf-cert-card p { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }
.nvqf-levels { display: grid; gap: 1.25rem; }
.nvqf-lv { display: flex; gap: 1.25rem; background: var(--color-white); border: 1px solid var(--color-border); border-left: 4px solid var(--nvqf-accent, var(--color-primary)); border-radius: var(--r-lg); padding: clamp(1.25rem, 3vw, 1.75rem); box-shadow: var(--shadow-sm); transition: transform var(--tr-base), box-shadow var(--tr-base); }
.nvqf-lv:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.nvqf-lv__num { flex-shrink: 0; width: 54px; height: 54px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; background: var(--color-white); border: 2px solid var(--nvqf-accent, var(--color-primary)); color: var(--nvqf-accent, var(--color-primary)); }
.nvqf-lv__main { flex: 1; min-width: 0; }
.nvqf-lv__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.1rem; }
.nvqf-lv__titles { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.nvqf-lv__titles h3 { font-size: var(--fs-xl); font-weight: 800; color: var(--color-text); margin: 0; }
.nvqf-lv__badge { font-size: var(--fs-xs); font-weight: 700; color: #fff; background: var(--nvqf-accent, var(--color-primary)); padding: .25rem .7rem; border-radius: var(--r-full); }
.nvqf-lv__equiv { font-size: var(--fs-xs); font-weight: 700; color: var(--nvqf-accent, var(--color-primary)); background: color-mix(in srgb, var(--nvqf-accent, var(--color-primary)) 12%, #fff); padding: .25rem .7rem; border-radius: var(--r-full); }
.nvqf-lv__browse { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); font-weight: 700; color: var(--nvqf-accent, var(--color-primary)); border: 2px solid var(--nvqf-accent, var(--color-primary)); padding: .5rem 1rem; border-radius: var(--r-full); transition: all var(--tr-base); }
.nvqf-lv__browse:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.nvqf-lv__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.nvqf-lv__tag { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: .15rem .5rem; border-radius: var(--r-sm); margin-bottom: .4rem; }
.nvqf-lv__tag--k { color: #0A6847; background: #ecfdf5; }
.nvqf-lv__tag--s { color: #2563eb; background: #eff6ff; }
.nvqf-lv__tag--r { color: #ea580c; background: #fff7ed; }
.nvqf-lv__cell p { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.55; margin: 0; }
.nvqf-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.nvqf-benefit { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r-lg); padding: 1.75rem; box-shadow: var(--shadow-sm); transition: transform var(--tr-base), box-shadow var(--tr-base); }
.nvqf-benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.nvqf-benefit__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: var(--r-md); font-size: 1.25rem; margin-bottom: 1rem; color: var(--nvqf-accent, var(--color-primary)); background: color-mix(in srgb, var(--nvqf-accent, var(--color-primary)) 12%, #fff); }
.nvqf-benefit h3 { font-size: var(--fs-lg); font-weight: 800; color: var(--color-text); margin: 0 0 .5rem; }
.nvqf-benefit p { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.6; margin: 0; }
.nvqf-vid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.nvqf-vid + .nvqf-vid { margin-top: clamp(2rem, 5vw, 3.5rem); }
.nvqf-vid__eyebrow { display: inline-block; font-size: var(--fs-sm); font-weight: 700; padding: .4rem 1rem; border-radius: var(--r-full); margin-bottom: 1rem; }
.nvqf-vid__eyebrow--green { color: var(--color-primary); background: var(--color-primary-light); }
.nvqf-vid__eyebrow--blue { color: #2563eb; background: #eff6ff; }
.nvqf-vid__text h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; color: var(--color-text); margin: 0 0 1rem; }
.nvqf-vid__text > p { color: var(--color-text-muted); line-height: 1.75; margin: 0 0 1.25rem; }
.nvqf-vid__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.nvqf-vid__list li { display: flex; align-items: center; gap: .6rem; color: var(--color-text); font-weight: 500; }
.nvqf-vid__list i { color: var(--color-primary); }
.nvqf-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--color-bg-section); }
.nvqf-video__frame iframe, .nvqf-video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.nvqf-video__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; padding: 1.5rem; background: linear-gradient(135deg, color-mix(in srgb, var(--nvqf-accent, var(--color-primary)) 16%, #fff), #fff); border: 2px dashed color-mix(in srgb, var(--nvqf-accent, var(--color-primary)) 45%, #fff); }
.nvqf-video__play { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: #fff; color: var(--nvqf-accent, var(--color-primary)); font-size: 1.4rem; box-shadow: var(--shadow-lg); }
.nvqf-video__ph-label { font-weight: 800; color: var(--color-text); }
.nvqf-video__ph-sub { font-size: var(--fs-sm); color: var(--color-text-muted); }
.nvqf-cta { position: relative; overflow: hidden; padding-block: clamp(3rem, 6vw, 4.5rem); background: linear-gradient(135deg, #0F172A 0%, #1F2937 60%, #0b1220 100%); color: #fff; text-align: center; }
.nvqf-cta__glow { position: absolute; inset: 0; background: radial-gradient(55% 90% at 50% 120%, rgba(16,185,129,.3), transparent 70%); pointer-events: none; }
.nvqf-cta__inner { position: relative; max-width: 680px; margin: 0 auto; }
.nvqf-cta h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; color: #fff; margin: 0 0 .75rem; }
.nvqf-cta p { color: rgba(255,255,255,.8); line-height: 1.7; margin: 0 0 1.75rem; }
.nvqf-cta__btn { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 2rem; border-radius: var(--r-full); background: var(--color-white); color: var(--color-primary); font-weight: 800; box-shadow: var(--shadow-lg); transition: all var(--tr-base); }
.nvqf-cta__btn:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.3); }
@media (max-width: 860px) {
	.nvqf-intro { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.nvqf-intro__list li { text-align: left; }
	.nvqf-cert-grid, .nvqf-benefits { grid-template-columns: 1fr; }
	.nvqf-lv__grid { grid-template-columns: 1fr; }
	.nvqf-vid, .nvqf-vid--rev { grid-template-columns: 1fr; }
	.nvqf-vid--rev .nvqf-video__frame { order: 2; }
}
@media (min-width: 561px) and (max-width: 860px) {
	.nvqf-cert-grid, .nvqf-benefits { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================================
   Qualification Track archive hero (/track/<slug>/)
   ============================================================================= */
.qtax-hero { position: relative; overflow: hidden; padding-block: clamp(2.25rem, 5vw, 3.5rem); background: linear-gradient(135deg, #0F172A 0%, #1F2937 55%, #0b1220 100%); color: #fff; }
.qtax-hero__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 80% at 12% -10%, color-mix(in srgb, var(--qtax-accent, #10b981) 42%, transparent), transparent 70%); }
.qtax-hero__crumbs { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: rgba(255,255,255,.6); margin-bottom: 1.5rem; }
.qtax-hero__crumbs a { color: rgba(255,255,255,.7); transition: color var(--tr-fast); }
.qtax-hero__crumbs a:hover { color: #fff; }
.qtax-hero__crumbs i { font-size: .6rem; opacity: .5; }
.qtax-hero__crumbs [aria-current] { color: var(--color-accent-light); font-weight: 600; }
.qtax-hero__inner { position: relative; display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.75rem); }
.qtax-hero__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: clamp(56px, 9vw, 76px); height: clamp(56px, 9vw, 76px); border-radius: var(--r-lg); font-size: clamp(1.4rem, 3vw, 2rem); color: #fff; background: color-mix(in srgb, var(--qtax-accent, #10b981) 30%, transparent); border: 1px solid color-mix(in srgb, var(--qtax-accent, #10b981) 55%, transparent); box-shadow: 0 10px 30px color-mix(in srgb, var(--qtax-accent, #10b981) 30%, transparent); }
.qtax-hero__eyebrow { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-light); margin-bottom: .35rem; }
.qtax-hero__text h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800; color: #fff; margin: 0 0 .6rem; line-height: 1.12; }
.qtax-hero__text > p { font-size: var(--fs-base); line-height: 1.7; color: rgba(255,255,255,.8); margin: 0 0 1.1rem; max-width: 62ch; }
.qtax-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; }
.qtax-hero__chip { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 600; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.qtax-hero__chip i { color: var(--color-accent-light); }
.qtax-hero__all { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 700; color: #0F172A; background: #fff; transition: all var(--tr-base); }
.qtax-hero__all:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
@media (max-width: 640px) {
	.qtax-hero__inner { flex-direction: column; align-items: flex-start; }
}

/* ── Wing contact form (per-wing, emails the wing's own address) ───────────── */
.wing-contact { background: var(--color-bg-light, #f8fafc); }
.wing-contact__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-2xl); align-items: start; }
.wing-contact__aside { display: flex; flex-direction: column; gap: var(--sp-lg); }
.wing-contact-item { display: flex; gap: var(--sp-md); align-items: flex-start; }
.wing-contact-item__icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; color: #fff; background: var(--wing-primary, var(--color-primary)); }
.wing-contact-item__label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: 2px; }
.wing-contact-item__value { font-weight: 600; color: var(--color-heading, var(--color-text)); word-break: break-word; }
a.wing-contact-item__value:hover { color: var(--wing-primary, var(--color-primary)); }
.wing-contact__form { background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-2xl); box-shadow: var(--shadow-sm); }
.wing-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.wing-contact-form .form-group { margin-bottom: var(--sp-md); }
.wing-contact-form label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 6px; }
.wing-contact__form .btn { margin-top: var(--sp-xs); }
.wing-contact__notice { display: flex; align-items: center; gap: .6rem; padding: var(--sp-md) var(--sp-lg); border-radius: var(--r-lg); margin-bottom: var(--sp-lg); font-weight: 600; }
.wing-contact__notice--ok  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.wing-contact__notice--err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
@media (max-width: 860px) {
	.wing-contact__grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
	.wing-contact-form__row { grid-template-columns: 1fr; }
}