/* ==========================================================================
   ROYAL VELVET — Cyber Skill Institute design layer
   Owns: header, footer, home page. Loads last, so it wins over legacy CSS.
   ========================================================================== */

:root {
	/* ---- Royal Velvet, the supplied ramp (deep -> pale) ---- */
	--royal-velvet-1: #10002b;
	--royal-velvet-2: #3c096c;
	--royal-velvet-3: #7b2cbf;
	--royal-velvet-4: #c77dff;
	--royal-velvet-5: #e0aaff;

	/* ---- Derived stops ----
	   The supplied ramp bottoms out at #e0aaff, which is far too saturated to
	   serve as page wash, card fill or hairline. These four extend the same hue
	   family outward at both ends so light surfaces and mid-tones exist. */
	--rv-mid: #9d4edd;
	--rv-deep: #240046;
	--rv-tint: #f3e8ff;
	--rv-wash: #faf6ff;
	--rv-line: #e9dcf9;

	/* ---- Compatibility aliases ----
	   ~200 rules across arctic.css / arctic-pages.css already resolve against
	   these names. They are kept (rather than renamed at every call site) and
	   simply repointed, preserving the original light -> saturated ordering. */
	--arctic-blue-1: var(--rv-tint);
	--arctic-blue-2: var(--royal-velvet-5);
	--arctic-blue-3: var(--royal-velvet-4);
	--arctic-blue-4: var(--rv-mid);
	--arctic-blue-5: var(--royal-velvet-3);

	--ab-ink: var(--royal-velvet-1);
	--ab-ink-2: var(--royal-velvet-2);
	--ab-slate: #5b4a72;
	--ab-muted: #8b78a6;
	--ab-paper: #ffffff;
	--ab-wash: var(--rv-wash);
	--ab-line: var(--rv-line);

	--ab-r-sm: 12px;
	--ab-r: 20px;
	--ab-r-lg: 28px;
	--ab-r-xl: 40px;

	--ab-shadow: 0 18px 50px -28px rgba(16, 0, 43, .35);
	--ab-shadow-lg: 0 40px 90px -40px rgba(16, 0, 43, .45);
	--ab-grad: linear-gradient(120deg, var(--royal-velvet-3), var(--royal-velvet-4));
	--ab-glow: 0 18px 40px -18px rgba(123, 44, 191, .75);
	--ab-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ab-head: 'Playfair Display', 'Inter', serif;
	/* utility face for numbering, eyebrows and meta — a technical counterpoint
	   to the Playfair, and free: no extra font request */
	--ab-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

	/* dark-surface ink levels, used by the header / hero / footer */
	--ab-on-dark: rgba(224, 170, 255, .78);
	--ab-on-dark-soft: rgba(224, 170, 255, .55);
	--ab-hairline: rgba(199, 125, 255, .16);
}

/* ---------- base ---------- */
body,
body.sf-theme {
	font-family: var(--ab-font);
	color: var(--ab-ink);
	background: var(--ab-paper);
	-webkit-font-smoothing: antialiased;
}

.ab-shell {
	width: min(1240px, calc(100% - 40px));
	margin-inline: auto;
}

.ab-sec {
	position: relative;
	padding: clamp(64px, 8vw, 120px) 0;
}

.ab-sec--wash {
	background: var(--ab-wash);
}

.ab-sec--ink {
	background: var(--ab-ink);
	color: #fff;
}

/* ---------- shared atoms ---------- */
.ab-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--arctic-blue-5);
	background: var(--arctic-blue-1);
	border-radius: 999px;
	padding: 8px 16px;
	margin-bottom: 18px;
}

.ab-eyebrow i {
	font-size: 11px;
}

.ab-sec--ink .ab-eyebrow {
	color: var(--arctic-blue-1);
	background: rgba(199, 125, 255, .14);
}

.ab-h2 {
	font-family: var(--ab-head);
	font-weight: 600;
	font-size: clamp(30px, 4.2vw, 52px);
	line-height: 1.1;
	letter-spacing: -.01em;
	margin: 0 0 14px;
	color: inherit;
}

.ab-h2 em {
	font-style: italic;
	color: var(--arctic-blue-5);
}

.ab-lede {
	font-size: 16px;
	line-height: 1.75;
	color: var(--ab-slate);
	max-width: 60ch;
	margin: 0;
}

.ab-sec--ink .ab-lede {
	color: rgba(224, 170, 255, .78);
}

.ab-head {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp(32px, 5vw, 56px);
}

.ab-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ab-head--center .ab-lede {
	text-align: center;
}

.ab-head__l {
	max-width: 620px;
}

/* buttons */
.ab-btn,
button.ab-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 26px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 650;
	line-height: 1;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform .25s, box-shadow .25s, background .25s, color .25s;
	text-decoration: none;
}

.ab-btn i,
button.ab-btn i {
	font-size: 13px;
	transition: transform .25s;
}

.ab-btn:hover i,
button.ab-btn:hover i {
	transform: translateX(4px);
}

.ab-btn--solid,
button.ab-btn--solid {
	background: var(--ab-ink);
	color: #fff;
	box-shadow: 0 16px 34px -18px rgba(16, 0, 43, .8);
}

.ab-btn--solid:hover,
button.ab-btn--solid:hover {
	background: var(--arctic-blue-5);
	color: #ffffff;
	transform: translateY(-2px);
}

.ab-btn--aqua,
button.ab-btn--aqua {
	background: var(--arctic-blue-5);
	color: #ffffff;
	box-shadow: 0 16px 34px -16px rgba(123, 44, 191, .8);
}

.ab-btn--aqua:hover,
button.ab-btn--aqua:hover {
	background: var(--arctic-blue-4);
	color: #ffffff;
	transform: translateY(-2px);
}

.ab-btn--line,
button.ab-btn--line {
	border-color: var(--ab-line);
	color: var(--ab-ink);
	background: #fff;
}

.ab-btn--line:hover,
button.ab-btn--line:hover {
	border-color: var(--arctic-blue-4);
	color: var(--arctic-blue-5);
}

.ab-sec--ink .ab-btn--line,
button.ab-sec--ink .ab-btn--line {
	background: transparent;
	border-color: rgba(199, 125, 255, .35);
	color: #fff;
}

.ab-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 650;
	font-size: 15px;
	color: var(--arctic-blue-5);
	text-decoration: none;
	border-bottom: 1.5px solid transparent;
	padding-bottom: 3px;
}

.ab-link:hover {
	color: var(--ab-ink);
	border-color: var(--arctic-blue-4);
}

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.ab-load {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--ab-ink);
	transition: opacity .55s ease, visibility .55s, transform .55s ease;
}

/* soft aurora light drifting behind the mark */
.ab-load__aurora {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: .5;
	pointer-events: none;
}

.ab-load__aurora--a {
	width: 46vmax;
	height: 46vmax;
	top: -16vmax;
	left: -12vmax;
	background: radial-gradient(circle, var(--arctic-blue-5), transparent 68%);
	animation: ab-load-drift 11s ease-in-out infinite;
}

.ab-load__aurora--b {
	width: 38vmax;
	height: 38vmax;
	right: -12vmax;
	bottom: -14vmax;
	background: radial-gradient(circle, var(--arctic-blue-3), transparent 70%);
	animation: ab-load-drift 13s ease-in-out infinite reverse;
}

.ab-load__inner {
	position: relative;
	z-index: 1;
	width: min(560px, calc(100% - 48px));
	display: grid;
	justify-items: stretch;
}

/* wordmark: dim outline copy, flooded bottom-up by a lit copy */
.ab-load__word {
	position: relative;
	font-family: var(--ab-head);
	font-size: clamp(30px, 7vw, 62px);
	line-height: 1.05;
	letter-spacing: -.01em;
	text-align: center;
}

.ab-load__word-base {
	display: block;
	color: transparent;
	-webkit-text-stroke: 1px rgba(199, 125, 255, .34);
}

.ab-load__word-fill {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--arctic-blue-2), var(--arctic-blue-5));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* --p is written by the preloader script */
	clip-path: inset(calc(100% - var(--p, 0%)) 0 0 0);
	transition: clip-path .35s cubic-bezier(.4, 0, .2, 1);
}

/* hairline meter with a travelling glint */
.ab-load__meter {
	position: relative;
	margin-top: 34px;
	height: 2px;
	border-radius: 2px;
	background: rgba(199, 125, 255, .16);
	overflow: hidden;
}

.ab-load__meter i {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--p, 0%);
	border-radius: 2px;
	background: linear-gradient(90deg, var(--arctic-blue-3), var(--arctic-blue-5));
	transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

.ab-load__meter::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 34%;
	background: linear-gradient(90deg, transparent, rgba(224, 170, 255, .5), transparent);
	animation: ab-load-glint 1.9s linear infinite;
}

.ab-load__foot {
	margin-top: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(224, 170, 255, .6);
}

.ab-load__pct {
	color: var(--arctic-blue-3);
	font-variant-numeric: tabular-nums;
	letter-spacing: .12em;
}

.ab-load.is-done {
	opacity: 0;
	visibility: hidden;
	transform: scale(1.04);
}

@keyframes ab-load-drift {

	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(6vmax, 4vmax, 0) scale(1.15);
	}
}

@keyframes ab-load-glint {
	from {
		transform: translateX(-120%);
	}

	to {
		transform: translateX(400%);
	}
}

@media (prefers-reduced-motion: reduce) {

	.ab-load__aurora,
	.ab-load__meter::after {
		animation: none;
	}
}

@keyframes ab-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   HEADER — velvet glass rail
   Two decks: a deep announcement strip that folds away on scroll, and a main
   bar that turns to translucent velvet glass once it is stuck. The mega panel
   is anchored to the bar's inner shell rather than to its own <li>, so it lines
   up with the page gutters instead of floating centred on the trigger.
   ========================================================================== */
/* Fixed, not sticky, on purpose: the strip folds and the bar shrinks on scroll,
   and while the header was in flow that height change reflowed everything below
   it. Scroll anchoring then pulled the scroll position back under the threshold,
   the strip re-opened, and the header juddered through the first ~60px of
   scroll. Out of flow, the collapse costs the page nothing — .page-wrapper
   reserves the resting height through --ab-hdr-h instead. */
.ab-hdr {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: 900;
	background: var(--royal-velvet-1);
	transition: background .35s ease, box-shadow .35s ease;
}

.ab-hdr::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(199, 125, 255, .5), transparent);
	opacity: 0;
	transition: opacity .35s;
}

.ab-hdr.is-stuck {
	background: rgba(16, 0, 43, .82);
	backdrop-filter: blur(22px) saturate(170%);
	-webkit-backdrop-filter: blur(22px) saturate(170%);
	box-shadow: 0 26px 60px -38px rgba(16, 0, 43, 1);
}

.ab-hdr.is-stuck::after {
	opacity: 1;
}

/* ---------- announcement strip ---------- */
.ab-hdr__strip {
	background:
		radial-gradient(620px 90px at 50% 0%, rgba(123, 44, 191, .6), transparent 70%),
		var(--rv-deep);
	border-bottom: 1px solid var(--ab-hairline);
	max-height: 46px;
	opacity: 1;
	overflow: hidden;
	transition: max-height .4s cubic-bezier(.22, 1, .36, 1), opacity .28s ease;
}

/* The strip only unclips once it is fully open and standing still (.is-rested,
   set by the header script after the fold transition ends). Leaving
   overflow:hidden on at rest cropped the language / currency panels to the 46px
   strip; unclipping it for the whole not-stuck state was worse — mid-fold the
   ticker and the language / currency controls spilled out of the collapsing
   strip and printed over the logo bar. */
.ab-hdr.is-rested .ab-hdr__strip {
	overflow: visible;
}

/* the strip folds away the moment the page moves, handing its height back to
   the bar so the stuck header keeps a small footprint */
.ab-hdr.is-stuck .ab-hdr__strip {
	max-height: 0;
	opacity: 0;
}

.ab-hdr__strip-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 45px;
}

.ab-hdr__ticker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 12.5px;
	letter-spacing: .01em;
	color: var(--ab-on-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ab-hdr__ticker i {
	color: var(--royal-velvet-4);
	font-size: 11px;
}

.ab-hdr__ticker b {
	color: #fff;
	font-weight: 650;
}

.ab-hdr__tools {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.ab-hdr__tools .ab-div {
	width: 1px;
	height: 18px;
	background: var(--ab-hairline);
}

.ab-hdr__tlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ab-on-dark);
	text-decoration: none;
	transition: color .24s, background .24s;
}

.ab-hdr__tlink:hover {
	color: #fff;
	background: rgba(199, 125, 255, .14);
}

/* ---------- mini dropdowns (language / currency) ---------- */
.ab-mini {
	position: relative;
}

.ab-mini__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	border-radius: 999px;
	border: 1px solid transparent;
	background: rgba(199, 125, 255, .07);
	color: var(--ab-on-dark);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: .24s;
}

.ab-mini__btn:hover,
.ab-mini.is-open .ab-mini__btn {
	background: rgba(199, 125, 255, .16);
	border-color: rgba(199, 125, 255, .3);
	color: #fff;
}

.ab-mini__btn .fa-chevron-down {
	font-size: 8px;
	opacity: .8;
	transition: transform .28s;
}

.ab-mini:hover .ab-mini__btn .fa-chevron-down,
.ab-mini.is-open .ab-mini__btn .fa-chevron-down {
	transform: rotate(180deg);
}

/* ---------- shared dropdown panel ---------- */
.ab-pop {
	position: absolute;
	top: calc(100% + 14px);
	right: 0;
	min-width: 232px;
	padding: 8px;
	background: linear-gradient(165deg, #1c0745 0%, var(--royal-velvet-1) 100%);
	border: 1px solid rgba(199, 125, 255, .2);
	border-radius: 18px;
	box-shadow: 0 40px 90px -45px rgba(16, 0, 43, 1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(.97);
	transform-origin: top right;
	transition: opacity .24s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility .24s;
	z-index: 60;
}

/* bridges the 14px gap so the panel survives the trip from trigger to menu */
.ab-pop::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: -16px;
	height: 16px;
}

.ab-pop::after {
	content: '';
	position: absolute;
	top: -6px;
	right: 24px;
	width: 12px;
	height: 12px;
	background: #1c0745;
	border-left: 1px solid rgba(199, 125, 255, .2);
	border-top: 1px solid rgba(199, 125, 255, .2);
	border-radius: 3px 0 0 0;
	transform: rotate(45deg);
}

.ab-mini:hover .ab-pop,
.ab-mini.is-open .ab-pop,
.ab-acct:hover .ab-pop,
.ab-acct.is-open .ab-pop {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ab-pop--scroll {
	max-height: 320px;
	overflow-y: auto;
}

.ab-pop__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 14px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 550;
	color: var(--ab-on-dark);
	text-decoration: none;
	transition: background .22s, color .22s, padding-left .22s;
}

/* accent bar wipes up from nothing on hover / current */
.ab-pop__row::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 50%;
	width: 3px;
	height: 0;
	border-radius: 3px;
	background: var(--royal-velvet-4);
	transform: translateY(-50%);
	transition: height .25s ease;
}

.ab-pop__row:hover,
.ab-pop__row.is-current {
	background: rgba(199, 125, 255, .13);
	color: #fff;
	padding-left: 19px;
}

.ab-pop__row:hover::before,
.ab-pop__row.is-current::before {
	height: 18px;
}

.ab-pop__row .fi {
	border-radius: 3px;
}

.ab-pop__row .fa-check {
	margin-left: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--royal-velvet-4);
	color: var(--royal-velvet-1);
	font-size: 8px;
	display: grid;
	place-items: center;
	opacity: 0;
	transform: scale(.5);
	transition: .22s;
}

.ab-pop__row.is-current .fa-check {
	opacity: 1;
	transform: none;
}

.ab-pop__row--danger {
	color: #ff9d9d;
}

.ab-pop__row--danger::before {
	background: #ff6b6b;
}

.ab-pop__row--danger:hover {
	background: rgba(255, 107, 107, .14);
	color: #ffc9c9;
}

.ab-pop__sym {
	width: 22px;
	text-align: center;
	font-weight: 700;
	color: var(--royal-velvet-4);
}

.ab-pop__sep {
	display: block;
	height: 1px;
	background: var(--ab-hairline);
	margin: 7px 6px;
}

.ab-pop__ico {
	width: 26px;
	font-size: 13px;
	color: var(--royal-velvet-4);
}

.ab-pop__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 6px 4px 4px;
	padding: 13px 15px;
	border-radius: 13px;
	background: var(--ab-grad);
	color: #fff;
	font-weight: 650;
	font-size: 14px;
	text-decoration: none;
	box-shadow: var(--ab-glow);
	transition: .25s;
}

.ab-pop__cta:hover {
	color: #fff;
	transform: translateY(-2px);
	filter: brightness(1.08);
}

/* ---------- account ---------- */
.ab-acct {
	position: relative;
}

.ab-acct__head {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px;
	border-radius: 14px;
	background: rgba(199, 125, 255, .1);
	border: 1px solid var(--ab-hairline);
	margin-bottom: 7px;
}

.ab-acct__name {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: #fff;
}

.ab-acct__creds {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--royal-velvet-4);
}

/* ---------- main bar ---------- */
.ab-hdr__bar {
	position: relative;
}

.ab-hdr__bar-in {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 80px;
	transition: min-height .35s ease;
}

.ab-hdr.is-stuck .ab-hdr__bar-in {
	min-height: 66px;
}

.ab-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex-shrink: 0;
}

.ab-logo__mark {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 15px;
	background: var(--ab-grad);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 800;
	/* three glyphs ("CSI") in a 44px tile — 16px overflowed the rounded corners */
	font-size: 13.5px;
	letter-spacing: .01em;
	box-shadow: 0 14px 30px -14px rgba(123, 44, 191, 1), inset 0 1px 0 rgba(255, 255, 255, .35);
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.ab-logo:hover .ab-logo__mark {
	transform: rotate(-6deg) scale(1.05);
}

.ab-logo__text {
	display: grid;
	line-height: 1.15;
}

.ab-logo__text b {
	font-size: 18px;
	font-weight: 750;
	letter-spacing: -.02em;
	color: #fff;
}

.ab-logo__text span {
	font-size: 9.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ab-on-dark-soft);
}

/* ---------- nav ---------- */
.ab-nav {
	margin-inline: auto;
}

.ab-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 5px;
	/* border-radius: 999px;
	background: rgba(199, 125, 255, .06);
	border: 1px solid var(--ab-hairline); */
}

/* static on purpose: .ab-mega then anchors to .ab-hdr__bar-in and spans the
   page gutters instead of centring itself on a 90px-wide <li> */
.ab-nav__item {
	position: static;
}

.ab-nav__link {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 19px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--ab-on-dark);
	text-decoration: none !important;
	transition: color .26s ease;
}

.ab-nav__link::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(199, 125, 255, .24), rgba(123, 44, 191, .34));
	border: 1px solid rgba(199, 125, 255, .3);
	opacity: 0;
	transform: scale(.8);
	transition: opacity .26s ease, transform .34s cubic-bezier(.34, 1.56, .64, 1);
}

.ab-nav__link i {
	font-size: 8px;
	opacity: .75;
	transition: transform .28s;
}

.ab-nav__link:hover {
	color: #fff;
}

.ab-nav__link:hover::before {
	opacity: 1;
	transform: none;
}

.ab-nav__item:hover .ab-nav__link i,
.ab-nav__item.is-open .ab-nav__link i {
	transform: rotate(180deg);
}

/* active reads as a filled lilac capsule — the one solid mark on the bar */
.ab-nav__link.is-active {
	color: var(--royal-velvet-1);
}

.ab-nav__link.is-active::before {
	opacity: 1;
	transform: none;
	background: linear-gradient(135deg, var(--royal-velvet-5), var(--royal-velvet-4));
	border-color: transparent;
	box-shadow: 0 12px 26px -14px rgba(199, 125, 255, 1);
}

/* ---------- mega panel ---------- */
.ab-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 14px;
	padding: 22px;
	display: grid;
	grid-template-columns: 290px 1fr;
	gap: 20px;
	background: linear-gradient(160deg, #1c0745 0%, var(--royal-velvet-1) 100%);
	border: 1px solid rgba(199, 125, 255, .18);
	border-radius: 28px;
	box-shadow: 0 60px 120px -55px rgba(16, 0, 43, 1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity .28s ease, transform .38s cubic-bezier(.22, 1, .36, 1), visibility .28s;
	z-index: 50;
}

.ab-mega::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: -16px;
	height: 16px;
}

.ab-nav__item:hover .ab-mega,
.ab-nav__item.is-open .ab-mega {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ab-mega__aside {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 26px;
	border-radius: 22px;
	background: linear-gradient(150deg, var(--royal-velvet-3), var(--royal-velvet-2));
	color: #fff;
}

.ab-mega__aside::after {
	content: '';
	position: absolute;
	right: -110px;
	bottom: -130px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: var(--royal-velvet-4);
	filter: blur(60px);
	opacity: .45;
	pointer-events: none;
}

.ab-mega__aside > * {
	position: relative;
}

.ab-mega__aside .ab-eyebrow {
	align-self: flex-start;
	margin-bottom: 4px;
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

.ab-mega__aside h4 {
	margin: 0;
	font-family: var(--ab-head);
	font-size: 25px;
	line-height: 1.15;
	color: #fff;
}

.ab-mega__aside p {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .78);
}

.ab-mega__all {
	margin-top: auto;
	padding-top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 650;
	font-size: 14px;
	color: #fff;
	text-decoration: none;
}

.ab-mega__all i {
	transition: transform .25s;
}

.ab-mega__all:hover {
	color: #fff;
}

.ab-mega__all:hover i {
	transform: translateX(5px);
}

.ab-mega__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	align-content: start;
}

.ab-mega__card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px;
	border-radius: 16px;
	border: 1px solid transparent;
	background: rgba(199, 125, 255, .05);
	text-decoration: none;
	transition: background .24s, border-color .24s, transform .24s;
}

.ab-mega__card:hover {
	background: rgba(199, 125, 255, .13);
	border-color: rgba(199, 125, 255, .3);
	transform: translateY(-3px);
}

.ab-mega__ico {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 13px;
	display: grid;
	place-items: center;
	background: rgba(199, 125, 255, .14);
	color: var(--royal-velvet-4);
	font-size: 15px;
	transition: .24s;
}

.ab-mega__card:hover .ab-mega__ico {
	background: var(--ab-grad);
	color: #fff;
}

.ab-mega__name {
	display: block;
	font-weight: 650;
	font-size: 14.5px;
	color: #fff;
}

.ab-mega__desc {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--ab-on-dark-soft);
}

/* ---------- actions ---------- */
.ab-hdr__act {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-shrink: 0;
}

.ab-ico-btn {
	position: relative;
	width: 46px;
	height: 46px;
	border-radius: 16px;
	border: 1px solid var(--ab-hairline);
	background: rgba(199, 125, 255, .07);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 16px;
	cursor: pointer;
	text-decoration: none;
	transition: background .24s, border-color .24s, transform .24s;
}

.ab-ico-btn:hover {
	background: rgba(199, 125, 255, .18);
	border-color: rgba(199, 125, 255, .42);
	color: #fff;
	transform: translateY(-2px);
}

.ab-ico-btn .ab-count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 21px;
	height: 21px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--royal-velvet-4);
	color: var(--royal-velvet-1);
	font-size: 11px;
	font-weight: 700;
	display: grid;
	place-items: center;
	border: 2px solid var(--royal-velvet-1);
}

.ab-avatar {
	width: 31px;
	height: 31px;
	border-radius: 10px;
	background: var(--ab-grad);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 13px;
}

.ab-hdr__cta,
button.ab-hdr__cta {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 24px;
	border-radius: 999px;
	background: var(--ab-grad);
	color: #fff;
	font-weight: 650;
	font-size: 14.5px;
	text-decoration: none;
	box-shadow: var(--ab-glow);
	transition: transform .25s, box-shadow .25s;
}

/* sheen sweep on hover */
.ab-hdr__cta::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -70%;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
	transform: skewX(-18deg);
	transition: left .6s ease;
}

.ab-hdr__cta:hover::after {
	left: 130%;
}

.ab-hdr__cta > * {
	position: relative;
}

.ab-hdr__cta:hover,
button.ab-hdr__cta:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 24px 48px -20px rgba(123, 44, 191, .95);
}

.ab-burger {
	display: none;
	width: 46px;
	height: 46px;
	border-radius: 16px;
	border: 1px solid var(--ab-hairline);
	background: rgba(199, 125, 255, .07);
	cursor: pointer;
	padding: 0;
	place-items: center;
	gap: 5px;
	flex-direction: column;
}

.ab-burger span {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	transition: transform .3s, opacity .2s;
}

.ab-burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.ab-burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.ab-burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---------- mobile drawer ---------- */
.ab-drawer {
	position: fixed;
	inset: 0;
	z-index: 950;
	visibility: hidden;
}

.ab-drawer.is-open {
	visibility: visible;
}

.ab-drawer__ov {
	position: absolute;
	inset: 0;
	background: rgba(16, 0, 43, .68);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity .3s;
}

.ab-drawer.is-open .ab-drawer__ov {
	opacity: 1;
}

.ab-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(400px, 89vw);
	padding: 22px;
	background: linear-gradient(180deg, #1c0745 0%, var(--royal-velvet-1) 100%);
	border-left: 1px solid rgba(199, 125, 255, .18);
	transform: translateX(100%);
	transition: transform .42s cubic-bezier(.4, 0, .2, 1);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.ab-drawer.is-open .ab-drawer__panel {
	transform: none;
}

.ab-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--ab-hairline);
}

.ab-drawer__close {
	width: 40px;
	height: 40px;
	border-radius: 13px;
	border: 1px solid var(--ab-hairline);
	background: rgba(199, 125, 255, .08);
	color: #fff;
	cursor: pointer;
	transition: .22s;
}

.ab-drawer__close:hover {
	background: rgba(199, 125, 255, .2);
}

.ab-drawer__nav {
	display: grid;
	gap: 3px;
	padding: 18px 0;
}

.ab-drawer__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px;
	border: 0;
	border-radius: 14px;
	background: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: left;
	color: rgba(224, 170, 255, .88);
	text-decoration: none;
	cursor: pointer;
	transition: background .22s, color .22s;
}

.ab-drawer__link i:last-child {
	margin-left: auto;
	font-size: 12px;
	color: var(--ab-on-dark-soft);
	transition: transform .25s;
}

.ab-drawer__link:hover,
.ab-drawer__link.is-active {
	background: rgba(199, 125, 255, .13);
	color: #fff;
}

.ab-drawer__link.is-active {
	box-shadow: inset 3px 0 0 var(--royal-velvet-4);
}

.ab-drawer__link.is-open i:last-child {
	transform: rotate(180deg);
}

.ab-drawer__num {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--royal-velvet-4);
}

.ab-drawer__sub {
	display: none;
	margin-left: 18px;
	padding: 4px 0 10px 22px;
	border-left: 2px solid var(--ab-hairline);
}

.ab-drawer__sub.is-open {
	display: grid;
	gap: 2px;
}

.ab-drawer__sub a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-radius: 11px;
	font-size: 14px;
	color: var(--ab-on-dark);
	text-decoration: none;
	transition: .22s;
}

.ab-drawer__sub a i {
	width: 16px;
	font-size: 13px;
	color: var(--royal-velvet-4);
}

.ab-drawer__sub a:hover {
	background: rgba(199, 125, 255, .12);
	color: #fff;
}

.ab-drawer__foot {
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--ab-hairline);
	display: grid;
	gap: 8px;
}

.ab-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.ab-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--ab-hairline);
	background: rgba(199, 125, 255, .06);
	font-size: 13px;
	font-weight: 600;
	color: var(--ab-on-dark);
	text-decoration: none;
	transition: .22s;
}

.ab-chip.is-current {
	background: rgba(199, 125, 255, .18);
	border-color: rgba(199, 125, 255, .4);
	color: #fff;
}

/* ==========================================================================
   CART DRAWER (legacy hooks preserved)
   ========================================================================== */
.cartcanvas__info {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: min(420px, 90vw);
	background: #fff;
	z-index: 1200;
	transform: translateX(105%);
	transition: transform .4s cubic-bezier(.4, 0, .2, 1);
	overflow-y: auto;
	padding: 26px;
	box-shadow: var(--ab-shadow-lg);
}

.cartcanvas__info.info-open {
	transform: none;
}

.offcanvas__overlay {
	position: fixed;
	inset: 0;
	background: rgba(16, 0, 43, .45);
	backdrop-filter: blur(3px);
	z-index: 1100;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}

.offcanvas__overlay.overlay-open {
	opacity: 1;
	visibility: visible;
}

.ab-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--ab-line);
	margin-bottom: 18px;
}

.ab-cart__head h4 {
	font-family: var(--ab-head);
	font-size: 22px;
	margin: 0;
	color: var(--ab-ink);
}

.cartcanvas__close {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--ab-wash);
	display: grid;
	place-items: center;
	cursor: pointer;
	color: var(--ab-ink);
}

.cartcanvas__close:hover {
	background: var(--arctic-blue-1);
}

.ab-cart__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.ab-cart__item {
	position: relative;
	display: flex;
	gap: 13px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-r-sm);
	background: var(--ab-wash);
}

.ab-cart__thumb {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--arctic-blue-1);
	display: grid;
	place-items: center;
	color: var(--arctic-blue-5);
}

.ab-cart__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ab-cart__t {
	display: block;
	font-weight: 650;
	font-size: 14px;
	color: var(--ab-ink);
	text-decoration: none;
	margin-bottom: 4px;
}

.ab-cart__meta {
	font-size: 12.5px;
	color: var(--ab-slate);
	margin: 0;
}

.ab-cart__lvl {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--arctic-blue-1);
	color: var(--arctic-blue-5);
	margin-bottom: 5px;
}

.ab-cart__rm {
	position: absolute;
	top: 8px;
	right: 8px;
	color: #c0392b;
	opacity: .55;
	font-size: 13px;
}

.ab-cart__rm:hover {
	opacity: 1;
}

.ab-cart__empty {
	text-align: center;
	padding: 50px 0;
	color: var(--ab-muted);
}

.ab-cart__empty i {
	font-size: 40px;
	color: var(--arctic-blue-2);
	margin-bottom: 14px;
	display: block;
}

.ab-cart__foot {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--ab-line);
}

.ab-cart__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	font-weight: 700;
}

.ab-cart__total strong {
	font-size: 20px;
	color: var(--arctic-blue-5);
}

.ab-cart__btns {
	display: flex;
	gap: 9px;
}

.ab-cart__btns .ab-btn {
	flex: 1;
	justify-content: center;
	padding: 13px 16px;
	font-size: 14px;
}

/* ==========================================================================
   HERO — velvet stage
   Runs deep so it reads as one piece with the header above it; the page turns
   light again at the marquee. The visual is a 3D card deck: the neighbouring
   slides sit behind the active one at an angle, so the rotation reads as a
   physical shuffle rather than a crossfade.
   ========================================================================== */
.ab-hero {
	--ab-hero-dur: 6000ms;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	align-items: center;
	min-height: min(86vh, 840px);
	padding: clamp(52px, 6vw, 96px) 0 clamp(60px, 7vw, 112px);
	color: #fff;
	background: var(--royal-velvet-1);
}

/* ---------- stage: the artwork carries the banner ---------- */
.ab-hero__stage {
	position: absolute;
	inset: 0;
	z-index: -3;
}

.ab-hero__plate {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 1.1s ease;
}

.ab-hero__plate.is-active {
	opacity: 1;
}

.ab-hero__plate img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
}

/* only the visible plate drifts, so the stage is never quite still and the
   four waiting behind it cost nothing */
.ab-hero__plate.is-active img {
	animation: ab-pan 14s ease-out forwards;
}

@keyframes ab-pan {
	from {
		transform: scale(1.05) translate3d(0, 0, 0);
	}

	to {
		transform: scale(1.15) translate3d(-1.8%, -1.4%, 0);
	}
}

/* heaviest at the left, where the copy sits, and again along the bottom so the
   photograph hands off to the marquee band rather than stopping dead */
.ab-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		linear-gradient(101deg, var(--royal-velvet-1) 0%, rgba(16, 0, 43, .97) 28%, rgba(16, 0, 43, .8) 48%, rgba(16, 0, 43, .34) 74%, rgba(16, 0, 43, .6) 100%),
		linear-gradient(to top, rgba(16, 0, 43, .95) 0%, rgba(16, 0, 43, 0) 44%),
		radial-gradient(1000px 560px at 78% 10%, rgba(123, 44, 191, .4), transparent 64%);
}

/* halftone dot field, bled into the corner the
   photograph leaves empty */
.ab-hero__tone {
	position: absolute;
	inset: auto 0 0 0;
	height: 58%;
	z-index: -1;
	pointer-events: none;
	opacity: .6;
	background-image: radial-gradient(var(--royal-velvet-4) 1.2px, transparent 1.3px);
	background-size: 7px 7px;
	-webkit-mask-image: linear-gradient(to top right, #000 0%, transparent 44%);
	mask-image: linear-gradient(to top right, #000 0%, transparent 44%);
}

.ab-hero__in {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

/* ---------- copy ---------- */
.ab-hero__copy {
	max-width: 42rem;
}

.ab-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
	font-family: var(--ab-mono);
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--royal-velvet-5);
}

.ab-hero__eyebrow b {
	font-weight: 500;
	color: var(--royal-velvet-4);
}

.ab-hero__eyebrow b::after {
	content: '';
	display: inline-block;
	width: 34px;
	height: 1px;
	margin-left: 12px;
	vertical-align: middle;
	background: linear-gradient(90deg, var(--royal-velvet-4), transparent);
}

.ab-hero__title {
	margin: 0 0 22px;
	font-family: var(--ab-head);
	font-weight: 400;
	font-size: clamp(44px, 7.2vw, 94px);
	line-height: .97;
	letter-spacing: -.025em;
	color: #fff;
}

.ab-hero__title span,
.ab-hero__title em {
	display: block;
}

/* fit-content so the ink stroke below hugs the word instead of running the full
   measure of the column */
.ab-hero__title em {
	position: relative;
	width: fit-content;
	max-width: 100%;
	padding-bottom: .1em;
	font-style: italic;
	background: linear-gradient(96deg, var(--royal-velvet-5) 0%, var(--royal-velvet-4) 46%, #fff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* an ink stroke that redraws itself under each new track — clear of the
   italic's descenders */
.ab-hero__title em::after {
	content: '';
	position: absolute;
	left: .04em;
	right: .06em;
	bottom: 0;
	height: .05em;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--royal-velvet-4), rgba(199, 125, 255, .18));
	transform-origin: left center;
}

/* the tracks' opening lines run one to two lines; reserving two keeps the
   buttons from hopping as the banner rotates */
.ab-hero__desc {
	margin: 0 0 30px;
	max-width: 40ch;
	min-height: 3.5em;
	font-size: 17px;
	line-height: 1.75;
	color: rgba(224, 170, 255, .86);
}

.ab-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 30px;
}

/* the outline button needs a light treatment on the velvet ground */
.ab-hero .ab-btn--line {
	background: rgba(199, 125, 255, .08);
	border-color: rgba(199, 125, 255, .34);
	color: #fff;
	backdrop-filter: blur(10px);
}

.ab-hero .ab-btn--line:hover {
	background: rgba(199, 125, 255, .18);
	border-color: var(--royal-velvet-4);
	color: #fff;
}

/* what the school actually offers, in the index's own voice — no invented
   percentages */
.ab-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin: 0;
	padding-top: 22px;
	border-top: 1px solid rgba(199, 125, 255, .18);
	font-family: var(--ab-mono);
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(224, 170, 255, .72);
}

.ab-hero__meta span {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.ab-hero__meta span+span::before {
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--royal-velvet-4);
	opacity: .7;
}

/* ---------- track index ---------- */
.ab-hero__index {
	display: grid;
	gap: 2px;
	width: min(310px, 32vw);
	padding: 10px;
	border-radius: 24px;
	background: rgba(16, 0, 43, .42);
	border: 1px solid rgba(199, 125, 255, .2);
	backdrop-filter: blur(18px);
	box-shadow: 0 44px 90px -50px rgba(0, 0, 0, 1);
}

.ab-hero__track {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 4px 14px;
	width: 100%;
	padding: 14px 16px;
	border: 0;
	border-radius: 16px;
	background: transparent;
	font: inherit;
	text-align: left;
	color: var(--ab-on-dark);
	cursor: pointer;
	transition: background .3s ease, color .3s ease;
}

.ab-hero__track:hover {
	background: rgba(199, 125, 255, .1);
	color: #fff;
}

.ab-hero__track:focus-visible {
	outline: 2px solid var(--royal-velvet-4);
	outline-offset: 2px;
}

.ab-hero__track.is-active {
	background: rgba(199, 125, 255, .15);
	color: #fff;
}

.ab-hero__track b {
	font-family: var(--ab-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .1em;
	color: rgba(224, 170, 255, .5);
	transition: color .3s ease;
}

.ab-hero__track.is-active b {
	color: var(--royal-velvet-4);
}

.ab-hero__track-t {
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.3;
}

/* the hairline is the autoplay clock: it fills over exactly one interval, so
   the rotation never surprises anyone reading. Every row reserves its height
   even while hidden, or the list shuffles each time the active row changes */
.ab-hero__meter {
	grid-column: 2;
	display: block;
	height: 2px;
	margin-top: 8px;
	border-radius: 99px;
	background: rgba(199, 125, 255, .22);
	overflow: hidden;
	opacity: 0;
	transition: opacity .3s ease;
}

.ab-hero__track.is-active .ab-hero__meter {
	opacity: 1;
}

.ab-hero__meter-f {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--royal-velvet-4), var(--royal-velvet-5));
	transform: scaleX(0);
	transform-origin: left center;
}

.ab-hero__track.is-active .ab-hero__meter-f {
	animation: ab-meter var(--ab-hero-dur) linear forwards;
}

.ab-hero.is-paused .ab-hero__meter-f {
	animation-play-state: paused;
}

@keyframes ab-meter {
	to {
		transform: scaleX(1);
	}
}

/* ---------- entrance, replayed on every track change ---------- */
.ab-hero__copy.is-in .ab-hero__eyebrow {
	animation: ab-rise .6s cubic-bezier(.22, 1, .36, 1) both;
}

.ab-hero__copy.is-in .ab-hero__title span {
	animation: ab-rise .7s cubic-bezier(.22, 1, .36, 1) .06s both;
}

.ab-hero__copy.is-in .ab-hero__title em {
	animation: ab-rise .7s cubic-bezier(.22, 1, .36, 1) .13s both;
}

.ab-hero__copy.is-in .ab-hero__title em::after {
	animation: ab-ink .8s cubic-bezier(.22, 1, .36, 1) .3s both;
}

.ab-hero__copy.is-in .ab-hero__desc {
	animation: ab-rise .7s cubic-bezier(.22, 1, .36, 1) .2s both;
}

@keyframes ab-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ab-ink {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

@media (prefers-reduced-motion: reduce) {

	.ab-hero__plate,
	.ab-hero__plate.is-active img,
	.ab-hero__copy.is-in .ab-hero__eyebrow,
	.ab-hero__copy.is-in .ab-hero__title span,
	.ab-hero__copy.is-in .ab-hero__title em,
	.ab-hero__copy.is-in .ab-hero__title em::after,
	.ab-hero__copy.is-in .ab-hero__desc,
	.ab-hero__track.is-active .ab-hero__meter-f {
		animation: none;
		transition: none;
	}

	.ab-hero__plate.is-active img {
		transform: scale(1.05);
	}

	.ab-hero__track.is-active .ab-hero__meter-f {
		transform: scaleX(1);
	}
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
/* Light band on purpose: the hero above it is now deep velvet, and a second
   dark strip immediately below read as one undifferentiated slab. */
.ab-marq {
	background: var(--rv-tint);
	padding: 20px 0;
	overflow: hidden;
	border-block: 1px solid var(--rv-line);
}

.ab-marq__track {
	display: flex;
	width: max-content;
	animation: ab-scroll 34s linear infinite;
}

.ab-marq__run {
	display: flex;
	align-items: center;
	gap: 34px;
	padding-right: 34px;
}

.ab-marq__item {
	font-family: var(--ab-head);
	font-size: clamp(20px, 2.6vw, 32px);
	font-style: italic;
	color: var(--royal-velvet-2);
	white-space: nowrap;
}

.ab-marq__sep {
	color: var(--royal-velvet-3);
	font-size: 12px;
}

@keyframes ab-scroll {
	to {
		transform: translateX(-50%);
	}
}

/* ==========================================================================
   COURSES GRID
   Editorial card: tall media with a permanent scrim, a gradient index pill,
   and a footer that reads as a tinted bar at rest and fills with the brand
   gradient on hover — so the whole card has one obvious affordance.
   ========================================================================== */
.ab-courses {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

@media (max-width: 1000px) {
	.ab-courses {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.ab-courses {
		grid-template-columns: 1fr;
	}
}

.ab-course {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--rv-line);
	border-radius: 26px;
	box-shadow: 0 1px 2px rgba(16, 0, 43, .04);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s, border-color .35s;
}

.ab-course:hover {
	transform: translateY(-8px);
	border-color: var(--royal-velvet-4);
	box-shadow: 0 40px 80px -40px rgba(16, 0, 43, .45);
}

.ab-course__media {
	position: relative;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: var(--rv-tint);
}

.ab-course__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(16, 0, 43, .55) 100%);
}

.ab-course__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.ab-course:hover .ab-course__media img {
	transform: scale(1.07);
}

.ab-course__tag {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--ab-grad);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	box-shadow: 0 10px 22px -10px rgba(123, 44, 191, .9);
}

.ab-course__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: 24px;
}

.ab-course__title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ab-ink);
	transition: color .25s;
}

.ab-course:hover .ab-course__title {
	color: var(--royal-velvet-3);
}

.ab-course__sum {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ab-slate);
}

/* tinted bar at rest, brand gradient on hover */
.ab-course__go {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 16px;
	border-radius: 15px;
	background: var(--rv-tint);
	color: var(--royal-velvet-3);
	font-size: 14px;
	font-weight: 650;
	text-decoration: none;
	transition: background .35s, color .35s, box-shadow .35s;
}

.ab-course:hover .ab-course__go {
	background: var(--ab-grad);
	color: #fff;
	box-shadow: var(--ab-glow);
}

.ab-course__go i {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(123, 44, 191, .12);
	font-size: 11px;
	transition: transform .3s, background .35s;
}

.ab-course:hover .ab-course__go i {
	background: rgba(255, 255, 255, .22);
	transform: translateX(4px);
}

.ab-course__link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* ==========================================================================
   FEATURES / WHY
   ========================================================================== */
.ab-why {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}

.ab-why__card {
	position: relative;
	padding: 30px 26px;
	border-radius: var(--ab-r-lg);
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(199, 125, 255, .18);
	transition: .35s;
	overflow: hidden;
}

.ab-why__card:hover {
	background: rgba(199, 125, 255, .12);
	transform: translateY(-5px);
}

.ab-why__num {
	position: absolute;
	top: 18px;
	right: 22px;
	font-family: var(--ab-head);
	font-size: 46px;
	color: rgba(199, 125, 255, .16);
	line-height: 1;
}

.ab-why__ico {
	width: 54px;
	height: 54px;
	border-radius: 17px;
	background: var(--ab-grad);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 20px;
	margin-bottom: 18px;
}

.ab-why__card h3 {
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 8px;
	color: #fff;
}

.ab-why__card p {
	font-size: 14px;
	line-height: 1.7;
	color: rgba(224, 170, 255, .7);
	margin: 0;
}

/* ==========================================================================
   CATEGORY INDEX
   The tracks are a curriculum in order, so this reads as an index rather than
   a tile grid: the page already opens on full-bleed photography and carries a
   card grid above, and a third rectangle field would say nothing new. Each row
   is a record — number, plate, title, summary, course count — and lifts into a
   white card on hover instead of hiding its description behind one.
   ========================================================================== */
.ab-track {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ab-line);
}

.ab-track__row {
	border-bottom: 1px solid var(--ab-line);
}

.ab-track__link {
	position: relative;
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: clamp(16px, 2.4vw, 34px);
	padding: clamp(18px, 2.2vw, 26px) clamp(14px, 1.8vw, 24px);
	border-radius: 20px;
	text-decoration: none;
	color: var(--ab-ink);
	transition: background .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}

.ab-track__link:hover,
.ab-track__link:focus-visible {
	background: var(--ab-paper);
	box-shadow: var(--ab-shadow);
	transform: translateX(6px);
	outline: none;
}

.ab-track__link:focus-visible {
	outline: 2px solid var(--royal-velvet-3);
	outline-offset: 3px;
}

/* accent rule grows down the left edge on hover, so the active row is marked
   without the layout moving */
.ab-track__link::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 0;
	border-radius: 99px;
	background: var(--ab-grad);
	transform: translateY(-50%);
	transition: height .4s cubic-bezier(.22, 1, .36, 1);
}

.ab-track__link:hover::before,
.ab-track__link:focus-visible::before {
	height: 62%;
}

.ab-track__num {
	font-family: var(--ab-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--ab-muted);
	transition: color .35s ease;
}

.ab-track__link:hover .ab-track__num {
	color: var(--royal-velvet-3);
}

.ab-track__thumb {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(84px, 9vw, 116px);
	aspect-ratio: 16 / 11;
	overflow: hidden;
	border-radius: 14px;
	background: var(--royal-velvet-1);
	box-shadow: inset 0 0 0 1px rgba(199, 125, 255, .18);
}

.ab-track__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.75);
	transition: transform .6s cubic-bezier(.22, 1, .36, 1), filter .4s ease;
}

.ab-track__link:hover .ab-track__thumb img {
	transform: scale(1.09);
	filter: saturate(1);
}

/* icon stands in when a category has no photo, or when one fails to load */
.ab-track__thumb i {
	font-size: 22px;
	color: var(--royal-velvet-4);
}

.ab-track__thumb.is-empty::after {
	content: '\f0c1';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	color: var(--royal-velvet-4);
	opacity: .6;
}

.ab-track__body {
	min-width: 0;
}

.ab-track__t {
	display: block;
	font-family: var(--ab-head);
	font-size: clamp(21px, 2.1vw, 29px);
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: -.015em;
	color: var(--ab-ink);
}

.ab-track__d {
	display: block;
	margin-top: 7px;
	max-width: 62ch;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--ab-slate);
}

/* the count is the one number on the row worth reading, so it gets the mono */
.ab-track__meta {
	text-align: right;
	white-space: nowrap;
}

.ab-track__meta b {
	display: block;
	font-family: var(--ab-mono);
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
	color: var(--royal-velvet-3);
}

.ab-track__meta span {
	font-family: var(--ab-mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ab-muted);
}

.ab-track__go {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	border-radius: 999px;
	border: 1px solid var(--ab-line);
	background: var(--ab-paper);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--royal-velvet-2);
	transition: background .35s ease, border-color .35s ease, color .35s ease;
}

.ab-track__go i {
	font-size: 11px;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.ab-track__link:hover .ab-track__go {
	background: var(--ab-grad);
	border-color: transparent;
	color: #fff;
}

.ab-track__link:hover .ab-track__go i {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {

	.ab-track__link,
	.ab-track__link::before,
	.ab-track__thumb img,
	.ab-track__go i {
		transition: none;
	}

	.ab-track__link:hover {
		transform: none;
	}
}

/* ==========================================================================
   ABOUT / LEDGER
   The ledger was four boxed cards; it is now a connected timeline — a single
   rail threaded through the numerals — which reads as a sequence rather than
   four unrelated tiles. The two proof shots overlap instead of sitting in an
   even 2-up grid.
   ========================================================================== */
.ab-about {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp(32px, 5vw, 70px);
	align-items: start;
}

.ab-about__sticky {
	position: sticky;
	top: 130px;
}

.ab-about__shots {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin-top: 34px;
}

.ab-about__shots figure {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: 22px;
	border: 3px solid #fff;
	box-shadow: 0 30px 60px -30px rgba(16, 0, 43, .45);
}

.ab-about__shots figure:nth-child(1) {
	z-index: 1;
}

/* second shot drops and tucks behind the first */
.ab-about__shots figure:nth-child(2) {
	margin-top: 40px;
	margin-left: -22px;
}

.ab-about__shots img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ab-ledger {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.ab-ledger li {
	position: relative;
	display: flex;
	gap: 22px;
	padding: 26px 24px 26px 0;
	border-bottom: 1px solid var(--rv-line);
	transition: background .3s, border-color .3s;
}

.ab-ledger li:last-child {
	border-bottom: 0;
}

/* the rail: a hairline threaded down through the numerals */
.ab-ledger li::before {
	content: '';
	position: absolute;
	left: 23px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--rv-line);
}

.ab-ledger li:first-child::before {
	top: 26px;
}

.ab-ledger li:last-child::before {
	bottom: calc(100% - 74px);
}

.ab-ledger__n {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--rv-line);
	color: var(--royal-velvet-3);
	font-weight: 750;
	font-size: 15px;
	transition: background .3s, color .3s, border-color .3s, box-shadow .3s;
}

.ab-ledger li:hover .ab-ledger__n {
	background: var(--ab-grad);
	border-color: transparent;
	color: #fff;
	box-shadow: var(--ab-glow);
}

.ab-ledger li > div {
	padding-top: 4px;
}

.ab-ledger h3 {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 700;
	color: var(--ab-ink);
	transition: color .3s;
}

.ab-ledger li:hover h3 {
	color: var(--royal-velvet-3);
}

.ab-ledger p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--ab-slate);
}

/* ==========================================================================
   CREDITS / TOP-UP
   The calculator was split light-left / dark-right, which read as two unrelated
   panels. It is now one velvet console: the amount you type and the credits you
   get sit in the same surface, divided by a hairline. Tiers gained a weight bar
   and a ghost multiplier so the active step is legible at a glance.
   ========================================================================== */
.ab-calc {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 0;
	max-width: 980px;
	margin: 0 auto clamp(46px, 6vw, 78px);
	overflow: hidden;
	border-radius: 32px;
	background: linear-gradient(150deg, #1c0745 0%, var(--royal-velvet-1) 100%);
	border: 1px solid rgba(199, 125, 255, .2);
	box-shadow: 0 50px 110px -50px rgba(16, 0, 43, .9);
}

.ab-calc::after {
	content: '';
	position: absolute;
	right: -140px;
	top: -140px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: var(--royal-velvet-3);
	filter: blur(100px);
	opacity: .5;
	pointer-events: none;
}

/* both columns centre on the same axis — the input side is shorter than the
   readout side and was otherwise top-aligned against a centred neighbour */
.ab-calc__side {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(30px, 4vw, 46px);
}

.ab-calc__side--ink {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	background: rgba(199, 125, 255, .05);
	border-left: 1px solid var(--ab-hairline);
}

.ab-calc__label {
	display: block;
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--royal-velvet-4);
}

.ab-calc__input {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 20px;
	border: 2px solid rgba(199, 125, 255, .24);
	border-radius: 20px;
	background: rgba(16, 0, 43, .5);
	transition: border-color .25s, box-shadow .25s;
}

.ab-calc__input:focus-within {
	border-color: var(--royal-velvet-4);
	box-shadow: 0 0 0 5px rgba(199, 125, 255, .14);
}

.ab-calc__input span {
	font-size: 26px;
	font-weight: 700;
	color: var(--royal-velvet-4);
}

.ab-calc__input input {
	flex: 1;
	width: 100%;
	padding: 12px 0;
	border: 0;
	outline: 0;
	background: none;
	font-family: var(--ab-font);
	font-size: 34px;
	font-weight: 700;
	color: #fff;
}

.ab-calc__input input::placeholder {
	color: rgba(224, 170, 255, .35);
}

.ab-calc__note {
	display: block;
	margin-top: 14px;
	font-size: 13px;
	color: var(--ab-on-dark-soft);
}

.ab-calc__cells {
	display: grid;
	gap: 10px;
	margin-bottom: 6px;
}

.ab-calc__cell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 16px;
	border-radius: 14px;
	background: rgba(199, 125, 255, .08);
	border: 1px solid var(--ab-hairline);
	font-size: 14px;
	color: var(--ab-on-dark);
}

.ab-calc__cell strong {
	font-size: 17px;
	color: #fff;
}

.ab-calc__cell--total {
	background: var(--ab-grad);
	border-color: transparent;
	color: #ffffff;
	box-shadow: var(--ab-glow);
}

.ab-calc__cell--total strong {
	font-size: 26px;
	color: #ffffff;
}

.ab-calc__hidden {
	display: none;
}

.ab-calc__go {
	width: 100%;
	justify-content: center;
	margin-top: 6px;
}

.ab-calc__trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--ab-on-dark-soft);
}

/* ---------- tiers ---------- */
.ab-tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
	margin-bottom: 42px;
}

.ab-tier {
	position: relative;
	overflow: hidden;
	padding: 30px 24px 26px;
	border-radius: 22px;
	background: #fff;
	border: 1.5px solid var(--rv-line);
	transition: transform .3s, box-shadow .3s, border-color .3s;
}

/* weight bar across the top — fills in for the active tier */
.ab-tier::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--rv-line);
	transition: background .3s;
}

.ab-tier:hover::before,
.ab-tier.timeline-step-highlight::before {
	background: var(--ab-grad);
}

.ab-tier:hover,
.ab-tier.timeline-step-highlight {
	border-color: var(--royal-velvet-4);
	transform: translateY(-6px);
	box-shadow: 0 30px 60px -30px rgba(123, 44, 191, .5);
}

.ab-tier.timeline-step-highlight {
	background: linear-gradient(180deg, var(--rv-tint), #fff 65%);
}

.ab-tier__x {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	font-size: 24px;
	font-weight: 750;
	color: var(--royal-velvet-3);
}

.ab-tier__x em {
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--ab-grad);
	color: #fff;
}

.ab-tier h4 {
	position: relative;
	margin: 0 0 5px;
	font-size: 18px;
	font-weight: 700;
	color: var(--ab-ink);
}

.ab-tier__range {
	position: relative;
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 650;
	color: var(--royal-velvet-3);
}

.ab-tier p {
	position: relative;
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ab-slate);
}

/* ---------- perks ---------- */
.ab-perks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.ab-perks li {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 10px 20px 10px 10px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--rv-line);
	font-size: 14px;
	font-weight: 600;
	color: var(--ab-ink);
	transition: border-color .25s, box-shadow .25s, transform .25s;
}

.ab-perks li:hover {
	border-color: var(--royal-velvet-4);
	box-shadow: 0 16px 32px -18px rgba(123, 44, 191, .55);
	transform: translateY(-2px);
}

.ab-perks i {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ab-grad);
	color: #fff;
	font-size: 13px;
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.ab-cta {
	position: relative;
	border-radius: var(--ab-r-xl);
	background: var(--ab-ink);
	color: #fff;
	padding: clamp(40px, 6vw, 72px);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.2fr auto;
	gap: 30px;
	align-items: center;
}

.ab-cta::before {
	content: '';
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: var(--arctic-blue-5);
	filter: blur(120px);
	opacity: .4;
	top: -140px;
	right: -60px;
}

.ab-cta__in {
	position: relative;
}

.ab-cta h2 {
	font-family: var(--ab-head);
	font-size: clamp(28px, 4vw, 46px);
	line-height: 1.12;
	margin: 0 0 12px;
	color: #fff;
}

.ab-cta p {
	color: rgba(224, 170, 255, .75);
	font-size: 16px;
	line-height: 1.7;
	margin: 0;
	max-width: 55ch;
}

.ab-cta__act {
	position: relative;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* ==========================================================================
   FOOTER — velvet anchor
   Masthead row (brand + newsletter card) over an asymmetric link ledger, closed
   by a bottom rule. Columns are deliberately uneven — the contact block needs
   more room than the link lists, so a flat repeat(4, 1fr) wasted space.
   ========================================================================== */
.ab-ftr {
	position: relative;
	overflow: hidden;
	padding: clamp(64px, 8vw, 104px) 0 26px;
	color: var(--ab-on-dark);
	background:
		radial-gradient(1100px 460px at 14% -12%, rgba(60, 9, 108, .9) 0%, transparent 62%),
		linear-gradient(180deg, var(--royal-velvet-1) 0%, #17033b 52%, var(--royal-velvet-1) 100%);
}

.ab-ftr::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--royal-velvet-4), transparent);
}

.ab-ftr__glow {
	position: absolute;
	left: -120px;
	bottom: -320px;
	width: 560px;
	height: 560px;
	border-radius: 50%;
	background: var(--royal-velvet-3);
	filter: blur(150px);
	opacity: .3;
	pointer-events: none;
}

/* ---------- masthead ---------- */
.ab-ftr__top {
	position: relative;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 44px;
	align-items: start;
	padding-bottom: 48px;
	border-bottom: 1px solid var(--ab-hairline);
}

.ab-ftr__logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	text-decoration: none;
}

.ab-ftr__logo b {
	font-size: 21px;
	font-weight: 750;
	letter-spacing: -.02em;
	color: #fff;
}

.ab-ftr__statement {
	max-width: 44ch;
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.8;
}

.ab-ftr__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-ftr__badges li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	border-radius: 999px;
	border: 1px solid var(--ab-hairline);
	background: rgba(199, 125, 255, .06);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ab-on-dark);
}

.ab-ftr__badges i {
	font-size: 11px;
	color: var(--royal-velvet-4);
}

/* newsletter now lives in its own lifted card instead of floating on the band */
.ab-ftr__sub {
	position: relative;
	overflow: hidden;
	padding: 28px;
	border-radius: 26px;
	background: linear-gradient(150deg, rgba(199, 125, 255, .14) 0%, rgba(123, 44, 191, .06) 100%);
	border: 1px solid rgba(199, 125, 255, .2);
}

.ab-ftr__sub::after {
	content: '';
	position: absolute;
	right: -90px;
	top: -90px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: var(--royal-velvet-3);
	filter: blur(70px);
	opacity: .4;
	pointer-events: none;
}

.ab-ftr__sub > * {
	position: relative;
}

.ab-ftr__sub-label {
	display: block;
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--royal-velvet-4);
}

.ab-ftr__field {
	display: flex;
	gap: 8px;
	padding: 6px 6px 6px 20px;
	border-radius: 999px;
	background: rgba(16, 0, 43, .55);
	border: 1px solid rgba(199, 125, 255, .24);
	transition: border-color .25s, box-shadow .25s;
}

.ab-ftr__field:focus-within {
	border-color: var(--royal-velvet-4);
	box-shadow: 0 0 0 4px rgba(199, 125, 255, .14);
}

.ab-ftr__field input {
	flex: 1;
	min-width: 0;
	padding: 12px 0;
	background: none;
	border: 0;
	outline: 0;
	font-family: var(--ab-font);
	font-size: 14.5px;
	color: #fff;
}

.ab-ftr__field input::placeholder {
	color: var(--ab-on-dark-soft);
}

.ab-ftr__send,
button.ab-ftr__send {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ab-grad);
	color: #fff;
	cursor: pointer;
	box-shadow: var(--ab-glow);
	transition: transform .25s, filter .25s;
}

.ab-ftr__send:hover,
button.ab-ftr__send:hover {
	transform: translateY(-2px);
	filter: brightness(1.1);
}

.ab-ftr__note {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--ab-on-dark-soft);
}

/* ---------- link ledger ---------- */
.ab-ftr__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1.35fr;
	gap: 34px;
	padding: 48px 0;
}

.ab-ftr__h {
	position: relative;
	margin: 0 0 20px;
	padding-left: 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #fff;
}

.ab-ftr__h::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 14px;
	border-radius: 4px;
	background: var(--ab-grad);
	transform: translateY(-50%);
}

.ab-ftr__links {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-ftr__links a {
	display: inline-flex;
	align-items: center;
	font-size: 14.5px;
	color: inherit;
	text-decoration: none;
	transition: color .26s;
}

/* a dash slides out of nothing and pushes the label right */
.ab-ftr__links a::before {
	content: '';
	width: 0;
	height: 1.5px;
	margin-right: 0;
	border-radius: 2px;
	background: var(--royal-velvet-4);
	transition: width .28s ease, margin-right .28s ease;
}

.ab-ftr__links a:hover {
	color: #fff;
}

.ab-ftr__links a:hover::before {
	width: 15px;
	margin-right: 9px;
}

.ab-ftr__contact {
	display: grid;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-ftr__contact span.lbl {
	display: block;
	margin-bottom: 5px;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--royal-velvet-4);
}

.ab-ftr__contact a,
.ab-ftr__contact li > span:not(.lbl) {
	font-size: 14.5px;
	line-height: 1.65;
	color: #fff;
	text-decoration: none;
}

.ab-ftr__contact a:hover {
	color: var(--royal-velvet-4);
}

/* ---------- bottom rule ---------- */
.ab-ftr__bottom {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding-top: 26px;
	border-top: 1px solid var(--ab-hairline);
	font-size: 13.5px;
}

.ab-ftr__bottom p {
	margin: 0;
}

.ab-ftr__bottom a {
	color: var(--royal-velvet-4);
	text-decoration: none;
}

.ab-ftr__right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.ab-ftr__pay {
	max-height: 26px;
	opacity: .75;
	transition: opacity .25s;
}

.ab-ftr__pay:hover {
	opacity: 1;
}

.ab-ftr__up {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 17px;
	border-radius: 999px;
	border: 1px solid rgba(199, 125, 255, .28);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff !important;
	transition: background .25s, border-color .25s, transform .25s;
}

.ab-ftr__up i {
	transition: transform .25s;
}

.ab-ftr__up:hover {
	background: var(--ab-grad);
	border-color: transparent;
	color: #fff !important;
	transform: translateY(-2px);
}

.ab-ftr__up:hover i {
	transform: translateY(-3px);
}

.scroll-to-top {
	background: var(--royal-velvet-3) !important;
	color: #fff !important;
	border-radius: 50% !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
	.ab-hdr__cta {
		display: none;
	}
}

/* the mega drops to two card columns before the nav itself goes away */
@media (max-width: 1180px) {
	.ab-mega {
		grid-template-columns: 240px 1fr;
	}

	.ab-mega__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1100px) {
	.ab-nav {
		display: none;
	}

	.ab-burger {
		display: flex;
	}

	.ab-hero__in,
	.ab-about,
	.ab-calc,
	.ab-cta {
		grid-template-columns: 1fr;
	}

	/* once the hero stacks, the index reads better as a strip under the copy:
	   same five rows, laid on their side */
	.ab-hero__index {
		width: 100%;
		grid-auto-flow: column;
		grid-auto-columns: minmax(148px, 1fr);
		gap: 4px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.ab-hero__index::-webkit-scrollbar {
		display: none;
	}

	.ab-hero__track {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		gap: 5px;
	}

	.ab-hero__meter {
		grid-column: 1;
	}

	.ab-about__sticky {
		position: static;
	}

	.ab-ftr__top,
	.ab-ftr__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {

	.ab-hdr__strip-in .ab-hdr__ticker {
		display: none;
	}

	.ab-hdr__strip-in {
		justify-content: flex-end;
	}

	.ab-ftr__top {
		grid-template-columns: 1fr;
	}

	/* the artwork is mostly behind the copy now, so the scrim leans vertical to
	   keep the headline legible over any of the five photographs */
	.ab-hero__scrim {
		background:
			linear-gradient(180deg, rgba(16, 0, 43, .82) 0%, rgba(16, 0, 43, .72) 40%, rgba(16, 0, 43, .95) 100%),
			radial-gradient(700px 420px at 80% 6%, rgba(123, 44, 191, .38), transparent 66%);
	}
}

@media (max-width: 640px) {
	.ab-shell {
		width: calc(100% - 32px);
	}

	.ab-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.ab-ftr__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.ab-hero {
		min-height: 0;
		padding: 44px 0 52px;
	}

	.ab-hero__title {
		line-height: 1.02;
	}

	.ab-hero__desc {
		font-size: 15.5px;
	}

	.ab-hero__actions .ab-btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	.ab-hero__index {
		grid-auto-columns: minmax(132px, 1fr);
		padding: 8px;
		border-radius: 20px;
	}

	.ab-hero__track {
		padding: 12px 13px;
	}

	.ab-hero__track-t {
		font-size: 13.5px;
	}

	.ab-ftr__sub {
		padding: 22px;
	}

	.ab-calc__input input {
		font-size: 26px;
	}

	.ab-cart__btns {
		flex-direction: column;
	}
}

/* The header is fixed, so the wrapper carries its resting height. --ab-hdr-h is
   re-measured by the header script on load and resize; the 126px fallback is the
   strip (45px + 1px hairline) plus the 80px bar. Overrides app.css's 70px. */
.page-wrapper,
body:not(.page-index) .page-wrapper {
	padding-top: var(--ab-hdr-h, 126px);
}

/* Scrollbars — arctic, replacing the old ember/green thumbs from app.css */
* {
	scrollbar-color: var(--arctic-blue-4) var(--ab-wash);
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--ab-wash);
}

::-webkit-scrollbar-thumb {
	background: var(--arctic-blue-4);
	border-radius: 6px;
	border: 2px solid var(--ab-wash);
	box-shadow: none;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--arctic-blue-5);
	box-shadow: none;
}

/* ==========================================================================
   LEGACY OVERRIDES
   style.css/app.css style `.subscribe-form` and bare `p` with the old theme at
   a higher weight than single-class rules — re-assert the arctic values here.
   ========================================================================== */
.ab-ftr .ab-ftr__statement,
.ab-ftr .ab-ftr__note {
	color: rgba(224, 170, 255, .74);
}

.ab-ftr .ab-ftr__note {
	color: rgba(224, 170, 255, .55);
}

.ab-ftr .subscribe-form {
	position: static;
}

.ab-ftr .subscribe-form form {
	margin: 0;
}

.ab-ftr .subscribe-form input.email {
	position: static;
	width: auto;
	height: auto;
	flex: 1;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	font-size: 14.5px;
	padding: 12px 0;
}

.ab-ftr .subscribe-form button.ab-ftr__send {
	position: static;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--ab-grad);
	color: #ffffff;
	flex-shrink: 0;
}

.ab-ftr .subscribe-form button.ab-ftr__send:hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
}

.ab-ftr .suces_rinfo {
	color: var(--royal-velvet-4) !important;
	font-size: 13px;
	margin-top: 10px;
}

/* theme.css gives every bare <section> a 64px band padding; the newsletter card
   is a <section>, so neutralise that at matching weight and restore the card's
   own padding in the same rule (a plain .ab-ftr__sub would lose, 0,1,0 < 0,1,1) */
.ab-ftr__top section {
	margin: 0;
	padding: 0;
}

.ab-ftr__top section.ab-ftr__sub {
	padding: 28px;
}

.ab-ftr .ab-ftr__bottom,
.ab-ftr .ab-ftr__bottom p {
	color: rgba(224, 170, 255, .7);
}

.ab-ftr .ab-ftr__bottom a {
	color: var(--arctic-blue-3);
}

.ab-ftr .ab-ftr__bottom a.ab-ftr__up {
	color: #fff;
}

.ab-ftr__up {
	white-space: nowrap;
	flex-shrink: 0;
}

/* ==========================================================================
   ELEMENT-LEVEL LEGACY OVERRIDES
   theme.css ships `section:nth-child(even)` / `section:nth-child(3n)` with
   `background-color: transparent` — 0,1,1, which outranks a single class and
   silently blanked whole sections. Re-assert each themed band at that weight.
   ========================================================================== */
section.ab-sec--wash {
	background: var(--ab-wash);
}

section.ab-sec--ink {
	background: var(--ab-ink);
}

/* the hero paints its own ground behind the artwork; this selector is 0,1,1 and
   would otherwise beat the .ab-hero rule that sets it */
section.ab-hero {
	background: var(--royal-velvet-1);
}

section.ab-marq {
	background: var(--rv-tint);
}

section.px-page,
section.vx-sec,
section.ordr,
section.dbx,
section.topup-console-section,
section.cart-redesign,
section.faq-section,
section.instructor-section,
section.instructor-detail-section {
	background: var(--ab-wash);
}

section.vx-sec--paper {
	background: #fff;
}

section.vx-sec--tint {
	background: var(--arctic-blue-1);
}

section.vx-hero {
	background: linear-gradient(170deg, #fff 0%, var(--arctic-blue-1) 100%);
}

.page-about-us section.ab-intro {
	background: linear-gradient(170deg, #fff 0%, var(--arctic-blue-1) 100%);
}

.page-about-us section.ab-manifesto {
	background: var(--ab-ink);
}

.page-about-us section.ab-tracks {
	background: var(--ab-wash);
}

.page-about-us section.ab-proof {
	background: #fff;
}

/* Cart button — app.css forces `.cart-btn` white-on-white with !important, so
   the header uses its own class; keep the icon legible either way. */
.ab-hdr .ab-ico-btn--cart {
	background: rgba(199, 125, 255, .07);
	color: #fff;
	border: 1px solid var(--ab-hairline);
}

.ab-hdr .ab-ico-btn--cart:hover {
	background: rgba(199, 125, 255, .18);
	border-color: rgba(199, 125, 255, .42);
	color: #fff;
}

.ab-hdr .ab-ico-btn--cart i {
	font-size: 17px;
}

/* Preloader — style.css sets a light #f7f7f7 on the #preloader id (1,0,0),
   which washed the whole overlay out. Match that weight. */
#preloader.ab-load {
	position: fixed;
	inset: 0;
	background: var(--ab-ink);
	z-index: 999999;
}

/* Category index — responsive collapse.
   The five-column row survives to tablet by dropping the count, then folds into
   a stacked record on phones: plate and number on one line, then title, summary
   and the link beneath. */
@media (max-width: 1000px) {
	.ab-track__link {
		grid-template-columns: auto auto minmax(0, 1fr) auto;
	}

	.ab-track__meta {
		display: none;
	}

	.ab-track__d {
		font-size: 14px;
	}
}

@media (max-width: 720px) {
	.ab-track__link {
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: 14px;
		column-gap: 16px;
		padding: 20px 14px;
		transform: none;
	}

	.ab-track__link:hover,
	.ab-track__link:focus-visible {
		transform: none;
	}

	.ab-track__num {
		align-self: center;
	}

	.ab-track__thumb {
		width: 62px;
		border-radius: 12px;
	}

	/* title block and the link both span the full width under the plate */
	.ab-track__body,
	.ab-track__go {
		grid-column: 1 / -1;
	}

	.ab-track__go {
		justify-self: start;
	}
}

.ab-ftr .ab-ftr__links,
.ab-ftr .ab-ftr__contact {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.ab-ftr .ab-ftr__links li {
	padding: 0;
	margin: 0;
	list-style: none;
}

.ab-ftr .ab-ftr__links li a {
	padding: 0;
	margin: 0;
}

/* The footer "back to top" pill reuses `.scroll-to-target` for script.js's
   smooth-scroll handler; style.css styles that class as the hidden floating
   button, so re-assert the pill here. */
.ab-ftr .ab-ftr__up.scroll-to-target {
	position: static;
	visibility: visible;
	opacity: 1;
	width: auto;
	height: auto;
	line-height: normal;
	background: transparent;
	border: 1px solid rgba(199, 125, 255, .25);
	border-radius: 999px;
	padding: 9px 16px;
	box-shadow: none;
	transform: none;
}

.ab-ftr .ab-ftr__up.scroll-to-target:hover {
	background: var(--ab-grad);
	border-color: transparent;
	color: #ffffff !important;
	transform: translateY(-2px);
}

/* ==========================================================================
   LEGACY TOKEN RETARGET
   theme.css defines the retired seafoam/pine palette, and app.css, style.css
   and theme.css itself resolve ~215 var() references against it — including
   `button[type="submit"]`, whose green fill outranked every single-class
   button. Repointing the tokens here (arctic.css loads after theme.css) moves
   every remaining legacy surface onto the royal-velvet palette in one place.
   Dark tokens stay dark and light tokens stay light, so existing contrast
   pairings are preserved and only the hue changes.
   ========================================================================== */
:root {
	/* light scale */
	--seafoam-1: #f3e8ff;
	--seafoam-2: #e0aaff;
	--seafoam-3: #c77dff;
	--seafoam-4: #9d4edd;
	--seafoam-5: #7b2cbf;

	/* dark scale */
	--pine-1: #6a1fa8;
	--pine-2: #3c096c;
	--pine-3: #10002b;
	--pine-4: #10002b;

	/* canvas */
	--canvas: #faf6ff;
	--canvas-tint: #f3e8ff;
	--canvas-deep: #10002b;

	/* elevation */
	--ring: 0 0 0 1px rgba(16, 0, 43, .08);
	--lift-sm: 0 2px 8px rgba(16, 0, 43, .05);
	--lift-md: 0 10px 30px -12px rgba(16, 0, 43, .16);
	--lift-lg: 0 28px 60px -28px rgba(16, 0, 43, .28);
	--glow: 0 12px 32px -10px rgba(123, 44, 191, .45);

	/* brand core — primary CTA fill is ink, hover is one step lighter, so
	   legacy buttons keep white labels at full contrast in both states */
	--brand-purple: #10002b;
	--brand-purple-dark: #3c096c;
	--brand-purple-light: #c77dff;
	--brand-purple-wash: rgba(123, 44, 191, .10);
	--brand-purple-glow: rgba(123, 44, 191, .35);

	--brand-blue: #7b2cbf;
	--brand-blue-dark: #6a1fa8;
	--brand-blue-light: #e0aaff;
	--brand-blue-wash: rgba(157, 78, 221, .10);
	--brand-blue-glow: rgba(157, 78, 221, .30);

	--brand-black: #10002b;
	--brand-black-soft: #0a0020;
	--brand-black-card: #10002b;
	--brand-black-border: #3c096c;

	/* semantic aliases */
	--color-ink: #10002b;
	--color-pencil: #5b4a72;
	--color-graphite: #8b78a6;
	--color-charcoal: #3c096c;
	--color-cream: #faf6ff;
	--color-stone: #e9dcf9;
	--shadow-lg: 0 18px 50px -28px rgba(16, 0, 43, .35);
}