/* ==========================================================================
   EDU MIGRATE WIDGETS
   --------------------------------------------------------------------------
   Every custom property falls back to a literal value, so the widgets look
   right even if the theme's stylesheet is dequeued or the plugin is used with
   a different theme.

   Shape rule for the whole page:
     buttons ........ pill
     cards / media .. 14px
     inputs ......... 10px
   ========================================================================== */

.edum-section {
	padding-block: clamp(64px, 9vw, 104px);
	position: relative;
}

.edum-shell {
	width: 100%;
	max-width: var(--edum-shell, 1180px);
	margin-inline: auto;
	padding-inline: var(--edum-gutter, clamp(20px, 5vw, 40px));
}

/* --------------------------------------------------------------------------
   SECTION HEADER
   -------------------------------------------------------------------------- */

.edum-sechead {
	max-width: 62ch;
	margin-bottom: 48px;
}

.edum-sechead__eyebrow {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--edum-accent-ink, #A85400);
}

.edum-sechead__title {
	margin: 0 0 .45em;
	font-size: clamp(28px, 3.8vw, 42px);
	color: var(--edum-navy, #004066);
}

.edum-sechead__body {
	margin: 0;
	max-width: 58ch;
	color: var(--edum-body, #46566B);
}

/* Orange highlight, echoing the arrow in the logo. Sits behind the text,
   never over it, so contrast holds. */
mark {
	background: none;
	color: inherit;
	position: relative;
	white-space: nowrap;
}
mark::after {
	content: '';
	position: absolute;
	left: -.04em;
	right: -.04em;
	/* Proportional to the type, not fixed: at 68px a .3em slab reads as a
	   highlighter smear, while .14em sitting on the baseline reads as an
	   underscore drawn under the words. */
	bottom: .02em;
	height: .14em;
	background: color-mix(in srgb, var(--edum-mark, var(--edum-accent, #F38901)) 34%, transparent);
	border-radius: 2px;
	z-index: -1;
}

/* --------------------------------------------------------------------------
   BUTTONS (plugin copy, so widgets work outside the theme)
   -------------------------------------------------------------------------- */

.edum-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 28px;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: transform .2s cubic-bezier(.16,1,.3,1), background-color .2s, box-shadow .2s;
}
.edum-btn--sm { padding: 11px 20px; font-size: 14.5px; }

.edum-btn--solid {
	/* Brand orange carrying a deep navy label. White on this orange is about
	   2.5:1, nowhere near AA, so the button inverts instead: the orange is the
	   field and the navy is the type. The gradient's lighter stop only lifts
	   the orange, which raises contrast against the navy rather than lowering
	   it. */
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--edum-cta-bg, #F38901) 94%, #ffffff) 0%, var(--edum-cta-bg, #F38901) 100%);
	background-color: var(--edum-cta-bg, #F38901);
	color: var(--edum-cta-fg, #002E49);
	box-shadow: var(--edum-shadow-md, 0 10px 30px -12px rgba(16,42,67,.18));
}
.edum-btn--solid:hover { background: var(--edum-cta-bg-hover, #FFA23D); transform: translateY(-2px); }
.edum-btn--solid:active { transform: scale(.98); }

.edum-btn--quiet {
	background: transparent;
	color: var(--edum-navy, #004066);
	box-shadow: inset 0 0 0 1.5px var(--edum-line, #DCE4EC);
}
.edum-btn--quiet:hover { box-shadow: inset 0 0 0 1.5px currentColor; transform: translateY(-2px); }
.edum-btn--quiet:active { transform: scale(.98); }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.edum-hero {
	background:
		linear-gradient(118deg, var(--edum-paper, #FFFFFF) 0%, var(--edum-paper, #FFFFFF) 52%, color-mix(in srgb, var(--edum-mist, #F2F6FA) 78%, transparent) 52.2%, color-mix(in srgb, var(--edum-mist, #F2F6FA) 52%, transparent) 100%);
	overflow: hidden;
}

.edum-hero__grid {
	display: grid;
	/* Single column is the base; the editorial layer at the end of this file
	   builds the two column bleed from 1024px up. */
	grid-template-columns: 1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.edum-hero--media-left .edum-hero__copy { order: 2; }
.edum-hero--media-left .edum-hero__visual { order: 1; }

.edum-hero__eyebrow {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--edum-accent-ink, #A85400);
}

.edum-hero__title {
	margin: 0;
	/* Scale is planned against the portrait image beside it. At 1280px a five
	   word headline holds two lines at this size; longer copy needs a smaller
	   maximum, not more hero padding. */
	font-size: clamp(34px, 4.2vw, 52px);
	line-height: 1.08;
	letter-spacing: 0;
	color: var(--edum-navy, #004066);
	text-wrap: balance;
}

.edum-hero__sub {
	margin: 20px 0 0;
	max-width: 48ch;
	font-size: clamp(16.5px, 1.4vw, 18.5px);
	line-height: 1.62;
	color: var(--edum-body, #46566B);
}

.edum-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
	max-width: 620px;
}

.edum-hero__meta span {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 8px 13px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--edum-white, #FFFFFF) 86%, transparent);
	color: var(--edum-navy, #004066);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--edum-line, #DCE4EC) 82%, transparent);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}

.edum-hero__meta span::before {
	content: '';
	width: 7px;
	height: 7px;
	margin-right: 8px;
	border-radius: 999px;
	background: var(--edum-accent, #F38901);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--edum-accent, #F38901) 18%, transparent);
}

.edum-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.edum-hero__visual {
	position: relative;
	min-height: 420px;
}

.edum-hero__media {
	margin: 0 0 0 auto;
	border-radius: 14px;
	overflow: hidden;
	background: var(--edum-mist, #F2F6FA);
	aspect-ratio: 4 / 4.7;
	box-shadow: var(--edum-shadow-lg, 0 28px 60px -24px rgba(16,42,67,.26));
	width: min(78%, 540px);
}
.edum-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.edum-hero__route {
	position: absolute;
	top: 22px;
	left: 0;
	z-index: 3;
	display: grid;
	grid-template-columns: auto minmax(84px, 1fr) auto;
	align-items: center;
	gap: 12px;
	width: min(58%, 360px);
	padding: 15px 18px;
	border-radius: 14px;
	background: var(--edum-white, #FFFFFF);
	box-shadow: inset 0 0 0 1px var(--edum-line, #DCE4EC), var(--edum-shadow-md, 0 10px 30px -12px rgba(16,42,67,.18));
	color: var(--edum-navy, #004066);
	font-family: var(--edum-font-display, sans-serif);
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
}

.edum-hero__route-line {
	position: relative;
	height: 2px;
	background-image: linear-gradient(to right, var(--edum-line, #DCE4EC) 55%, transparent 55%);
	background-size: 12px 2px;
}

.edum-hero__route-line::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 52%;
	width: 12px;
	height: 12px;
	border-top: 2px solid var(--edum-accent-ink, #A85400);
	border-right: 2px solid var(--edum-accent-ink, #A85400);
	transform: translate(-50%, -50%) rotate(45deg);
}

.edum-hero__doc {
	position: absolute;
	right: 24px;
	bottom: -20px;
	z-index: 3;
	width: min(46%, 270px);
	padding: 18px 20px;
	border-radius: 14px;
	background: var(--edum-white, #FFFFFF);
	box-shadow: inset 0 0 0 1px var(--edum-line, #DCE4EC), var(--edum-shadow-lg, 0 28px 60px -24px rgba(16,42,67,.26));
	color: var(--edum-body, #46566B);
	font-size: 13.5px;
	line-height: 1.45;
}

.edum-hero__doc::before {
	content: '';
	position: absolute;
	top: 18px;
	right: 18px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background:
		linear-gradient(135deg, transparent 48%, var(--edum-accent, #F38901) 49% 56%, transparent 57%),
		color-mix(in srgb, var(--edum-accent, #F38901) 12%, transparent);
}

.edum-hero__doc-kicker {
	display: block;
	margin-bottom: 6px;
	color: var(--edum-accent-ink, #A85400);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.edum-hero__doc strong {
	display: block;
	margin-bottom: 4px;
	padding-right: 46px;
	color: var(--edum-navy, #004066);
	font-family: var(--edum-font-display, sans-serif);
	font-size: 19px;
	line-height: 1.15;
}

.edum-hero__proof {
	position: absolute;
	left: 0;
	bottom: 58px;
	max-width: 236px;
	padding: 18px 20px;
	border-radius: 14px;
	background:
		linear-gradient(150deg, color-mix(in srgb, var(--edum-navy-block, #004066) 90%, #ffffff) 0%, var(--edum-navy-block, #004066) 62%),
		var(--edum-navy-block, #004066);
	color: var(--edum-on-navy, #fff);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .10),
		var(--edum-shadow-lg, 0 28px 60px -24px rgba(16,42,67,.26));
}
.edum-hero__proof-figure {
	margin: 0;
	font-family: var(--edum-font-display, sans-serif);
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	color: var(--edum-accent-soft, #FFC170);
}
.edum-hero__proof-label {
	margin: 8px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--edum-on-navy-mut, #C6D6E6);
}

@media (max-width: 1023px) {
	.edum-hero--media-left .edum-hero__copy,
	.edum-hero--media-left .edum-hero__visual { order: initial; }
	.edum-hero__visual { max-width: 640px; min-height: 360px; }
	.edum-hero__media { aspect-ratio: 16 / 11; width: 86%; }
	.edum-hero__route { width: min(66%, 360px); }
	.edum-hero__proof { left: auto; right: 16px; bottom: 22px; }
	.edum-hero__doc { right: 26px; bottom: -20px; }
}

@media (max-width: 767px) {
	.edum-hero__visual { min-height: auto; }
	.edum-hero__media { width: 100%; }
	.edum-hero__route,
	.edum-hero__doc,
	.edum-hero__proof { position: static; width: auto; max-width: none; margin-top: 14px; }
	.edum-hero__doc { position: relative; left: auto; right: auto; bottom: auto; }
	.edum-hero__route { grid-template-columns: auto minmax(60px, 1fr) auto; }
	.edum-hero__actions .edum-btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   BENTO PILLARS
   -------------------------------------------------------------------------- */

.edum-bento {
	display: grid;
	grid-template-columns: repeat(var(--edum-bento-cols, 3), minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}

.edum-bento__cell {
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	overflow: hidden;
	background: var(--edum-white, #fff);
	box-shadow: inset 0 0 0 1px var(--edum-line, #DCE4EC);
	transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.edum-bento__cell:hover {
	transform: translateY(-4px);
	box-shadow: inset 0 0 0 1px var(--edum-line, #DCE4EC), var(--edum-shadow-md, 0 10px 30px -12px rgba(16,42,67,.18));
}

.edum-bento__cell--wide { grid-column: span 2; }

.edum-bento__cell--tint { background: var(--edum-mist, #F2F6FA); }

.edum-bento__cell--navy {
	background:
		linear-gradient(155deg, color-mix(in srgb, var(--edum-navy-block, #004066) 92%, #ffffff) 0%, var(--edum-navy-block, #004066) 58%),
		var(--edum-navy-block, #004066);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}
/* Inverted blocks: specificity note.
   Elementor compiles a colour control into `.elementor-widget-NAME .target`,
   which scores (0,2,0) and lands after this file. A contextual rule like
   `.edum-bento__cell--navy .edum-bento__title` also scores (0,2,0), so it
   loses on source order and a navy card gets navy text on navy.
   Adding the grid class lifts these to (0,3,0) so context wins, while a
   deliberate colour set on the widget still applies to every other cell. */
.edum-bento .edum-bento__cell--navy .edum-bento__title { color: var(--edum-on-navy, #fff); }
.edum-bento .edum-bento__cell--navy .edum-bento__text { color: var(--edum-on-navy-mut, #B9C9DA); }
.edum-bento .edum-bento__cell--navy .edum-bento__link { color: var(--edum-accent-soft, #FFC170); }
.edum-bento .edum-bento__cell--navy .edum-bento__icon {
	background: rgba(255, 255, 255, .1);
	color: var(--edum-accent-soft, #FFC170);
}

/*
 * A fixed ratio ties the photograph's height to the cell's width, so a cell
 * spanning two columns grew a 484px tall photo next to a 236px one and dragged
 * the whole row to 715px. Height is what has to agree across a row, so height
 * is what gets set; the ratio is left to fall out of the cell's width.
 */
.edum-bento__media {
	height: clamp(190px, 15.5vw, 250px);
	background: var(--edum-mist, #F2F6FA);
}

@media (max-width: 600px) {
	/* One column, so every cell is the same width and a ratio reads better
	   than a fixed height. */
	.edum-bento__media { height: auto; aspect-ratio: 3 / 2; }
}
.edum-bento__media img { width: 100%; height: 100%; object-fit: cover; }

.edum-bento__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 30px 28px;
	flex: 1;
}

.edum-bento__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 20px;
	border-radius: 10px;
	font-size: 20px;
	background: color-mix(in srgb, var(--edum-cell-accent, var(--edum-accent, #F38901)) 12%, transparent);
	color: var(--edum-accent-ink, #A85400);
}
.edum-bento__icon svg { width: 1em; height: 1em; fill: currentColor; }

.edum-bento__title {
	margin: 0 0 .5em;
	font-size: 20px;
	color: var(--edum-navy, #004066);
}

.edum-bento__text {
	margin: 0;
	font-size: 15.5px;
	color: var(--edum-body, #46566B);
}

.edum-bento__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 20px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	color: var(--edum-accent-ink, #A85400);
}
.edum-bento__arrow {
	width: 16px;
	height: 1.5px;
	background: currentColor;
	position: relative;
	transition: transform .2s cubic-bezier(.16,1,.3,1);
}
.edum-bento__arrow::after {
	content: '';
	position: absolute;
	right: 0;
	top: -3px;
	width: 7px;
	height: 7px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
}
.edum-bento__link:hover .edum-bento__arrow { transform: translateX(4px); }

@media (max-width: 1023px) {
	.edum-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.edum-bento__cell--wide { grid-column: span 2; }
}
@media (max-width: 767px) {
	.edum-bento { grid-template-columns: 1fr; }
	.edum-bento__cell--wide { grid-column: span 1; }
}

/* --------------------------------------------------------------------------
   COURSES
   -------------------------------------------------------------------------- */

.edum-section--courses { background: var(--edum-mist, #F2F6FA); }

.edum-courses {
	display: grid;
	grid-template-columns: repeat(var(--edum-course-cols, 3), minmax(0, 1fr));
	gap: 20px;
}

.edum-course {
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	overflow: hidden;
	background: var(--edum-white, #fff);
	box-shadow: inset 0 0 0 1px var(--edum-line, #DCE4EC);
	transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.edum-course:hover {
	transform: translateY(-4px);
	box-shadow: inset 0 0 0 1px var(--edum-line, #DCE4EC), var(--edum-shadow-md, 0 10px 30px -12px rgba(16,42,67,.18));
}

.edum-course--featured {
	background:
		linear-gradient(160deg, color-mix(in srgb, var(--edum-navy-block, #004066) 92%, #ffffff) 0%, var(--edum-navy-block, #004066) 60%),
		var(--edum-navy-block, #004066);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}
.edum-courses .edum-course--featured .edum-course__title { color: var(--edum-on-navy, #fff); }
.edum-courses .edum-course--featured .edum-course__summary,
.edum-courses .edum-course--featured .edum-course__facts dd { color: var(--edum-on-navy-mut, #BCCFE2); }
.edum-courses .edum-course--featured .edum-course__facts dt,
.edum-courses .edum-course--featured .edum-course__count { color: #9DB1C6; }
.edum-courses .edum-course--featured .edum-course__price { color: var(--edum-accent-soft, #FFC170); }
.edum-course--featured .edum-course__fact { border-color: rgba(255,255,255,.14); }
.edum-course--featured .edum-course__foot { border-color: rgba(255,255,255,.14); }

.edum-course__media { aspect-ratio: 3 / 2; background: var(--edum-mist, #F2F6FA); }
.edum-course__media img { width: 100%; height: 100%; object-fit: cover; }

.edum-course__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 26px 26px 22px;
}

.edum-course__title { margin: 0 0 .4em; font-size: 20px; color: var(--edum-navy, #004066); }
.edum-course__summary { margin: 0 0 20px; font-size: 15px; color: var(--edum-body, #46566B); }

/* Facts use two hairlines total, not one per row. */
.edum-course__facts {
	margin: 0 0 20px;
	display: grid;
	gap: 10px;
}
.edum-course__fact {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
}
.edum-course__fact dt { margin: 0; color: var(--edum-muted, #5B6B7F); }
.edum-course__fact dd { margin: 0; font-weight: 600; color: var(--edum-ink, #16233A); text-align: right; }
.edum-course__count { font-weight: 400; color: var(--edum-muted, #5B6B7F); }

.edum-course__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--edum-line, #DCE4EC);
}

.edum-course__price {
	margin: 0;
	font-family: var(--edum-font-display, sans-serif);
	font-size: 22px;
	font-weight: 800;
	color: var(--edum-accent-ink, #A85400);
}

.edum-courses__more {
	margin: 40px 0 0;
	text-align: center;
	font-weight: 700;
}
.edum-courses__more a {
	color: var(--edum-accent-ink, #A85400);
	text-underline-offset: 5px;
}

@media (max-width: 1023px) { .edum-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .edum-courses { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   JOURNEY
   -------------------------------------------------------------------------- */

.edum-journey {
	display: grid;
	grid-template-columns: repeat(var(--edum-journey-count, 4), minmax(0, 1fr));
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.edum-journey__step {
	position: relative;
	padding-top: 34px;
}

/* One continuous rule across the row, with a node per step sitting on it. */
.edum-journey__step::before {
	content: '';
	position: absolute;
	top: 7px;
	left: 0;
	right: -32px;
	height: 1px;
	background: var(--edum-line, #DCE4EC);
}
.edum-journey__step:last-child::before { right: 0; }

.edum-journey__node {
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--edum-paper, #FFFFFF);
	box-shadow: inset 0 0 0 3px var(--edum-journey-line, var(--edum-accent, #F38901));
}

.edum-journey__title { margin: 0 0 .3em; font-size: 19px; color: var(--edum-navy, #004066); }
.edum-journey__timing { margin: 0 0 .7em; font-size: 13.5px; font-weight: 700; color: var(--edum-accent-ink, #A85400); }
.edum-journey__body { margin: 0; font-size: 15px; color: var(--edum-body, #46566B); }

@media (max-width: 1023px) {
	.edum-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.edum-journey__step:nth-child(2n)::before { right: 0; }
}
@media (max-width: 767px) {
	.edum-journey { grid-template-columns: 1fr; gap: 28px; }
	.edum-journey__step::before { right: 0; }
}

/* Photographic band above the journey steps. Wide crop so it reads as a
   band rather than a hero, and it never competes with the steps below. */
.edum-journey__banner {
	margin: 0 0 clamp(32px, 4vw, 52px);
	border-radius: 14px;
	overflow: hidden;
	background: var(--edum-mist, #F2F6FA);
	aspect-ratio: 16 / 6;
}
.edum-journey__banner img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767px) {
	.edum-journey__banner { aspect-ratio: 3 / 2; }
}

/* --------------------------------------------------------------------------
   MILESTONES
   The one deliberate colour block on the page.
   -------------------------------------------------------------------------- */

.edum-section--navy {
	background: var(--edum-navy-block, #004066);
	color: var(--edum-on-navy-mut, #BCCFE2);
}
.edum-section--navy .edum-milestones .edum-milestone__value { color: var(--edum-on-navy, #fff); }
.edum-section--navy .edum-milestones .edum-milestone__affix { color: var(--edum-accent-soft, #FFC170); }
.edum-section--navy .edum-milestones .edum-milestone__label { color: #DCE6F0; }
.edum-section--navy .edum-milestones .edum-milestone__note,
.edum-section--navy .edum-milestones__intro { color: #9DB1C6; }
.edum-section--navy .edum-milestone { border-color: rgba(255, 255, 255, .13); }

.edum-milestones__intro {
	margin: 0 0 40px;
	max-width: 52ch;
	font-size: 15.5px;
	color: var(--edum-muted, #5B6B7F);
}

.edum-milestones {
	display: grid;
	grid-template-columns: repeat(var(--edum-milestone-cols, 4), minmax(0, 1fr));
	gap: 1px 0;
}

/* No card boxes here. A single hairline separates each figure. */
.edum-milestone {
	padding: 4px 28px 4px 0;
	border-left: 1px solid var(--edum-line, #DCE4EC);
	padding-left: 28px;
}
.edum-milestone:first-child { border-left: 0; padding-left: 0; }

.edum-milestone__value {
	display: flex;
	align-items: baseline;
	gap: 2px;
	margin: 0;
	font-family: var(--edum-font-display, sans-serif);
	font-size: clamp(36px, 4.4vw, 52px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--edum-navy, #004066);
}
/* The suffix is type, not decoration, so it takes the text-safe orange.
   Brand orange on white is 2.5:1, under the 3:1 large-text minimum. */
.edum-milestone__affix { color: var(--edum-accent-ink, #A85400); }

.edum-milestone__label {
	margin: 14px 0 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--edum-ink, #16233A);
}
.edum-milestone__note {
	margin: 2px 0 0;
	font-size: 13.5px;
	color: var(--edum-muted, #5B6B7F);
}

@media (max-width: 1023px) {
	.edum-milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 0; }
	.edum-milestone:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 479px) {
	.edum-milestones { grid-template-columns: 1fr; }
	.edum-milestone { border-left: 0; padding-left: 0; }
}

/* --------------------------------------------------------------------------
   TESTIMONIAL SLIDER
   -------------------------------------------------------------------------- */

.edum-slider { position: relative; }

.edum-slider__viewport { overflow: hidden; border-radius: 14px; }

.edum-slider__track {
	display: flex;
	transition: transform .5s cubic-bezier(.16,1,.3,1);
	will-change: transform;
}

.edum-quote {
	flex: 0 0 100%;
	min-width: 100%;
	margin: 0;
	padding: clamp(28px, 4vw, 48px);
	background: var(--edum-white, #fff);
	box-shadow: inset 0 0 0 1px var(--edum-line, #DCE4EC);
	border-radius: 14px;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		'portrait quote'
		'portrait by';
	column-gap: 28px;
	align-content: center;
}

.edum-quote__portrait {
	grid-area: portrait;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--edum-mist, #F2F6FA);
	align-self: start;
}
.edum-quote__portrait img { width: 100%; height: 100%; object-fit: cover; }

.edum-quote__text {
	grid-area: quote;
	margin: 0;
	font-size: clamp(17px, 1.7vw, 20px);
	line-height: 1.6;
	font-weight: 500;
	color: var(--edum-navy, #004066);
	/* Three lines is the cap. Anything longer is a copy problem. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.edum-quote__text p { margin: 0; }

.edum-quote__by {
	grid-area: by;
	margin-top: 18px;
	font-size: 14.5px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
}
.edum-quote__name { font-weight: 700; color: var(--edum-ink, #16233A); }
.edum-quote__role { color: var(--edum-muted, #5B6B7F); }

.edum-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 26px;
}

.edum-slider__arrow {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--edum-line, #DCE4EC);
	transition: box-shadow .2s, transform .2s;
}
.edum-slider__arrow:hover { box-shadow: inset 0 0 0 1.5px var(--edum-navy, #004066); }
.edum-slider__arrow:active { transform: scale(.94); }

.edum-slider__chevron {
	width: 9px;
	height: 9px;
	border-top: 1.8px solid var(--edum-navy, #004066);
	border-right: 1.8px solid var(--edum-navy, #004066);
}
.edum-slider__chevron--next { transform: rotate(45deg) translate(-1px, 1px); }
.edum-slider__chevron--prev { transform: rotate(-135deg) translate(-1px, 1px); }

.edum-slider__dots { display: flex; align-items: center; gap: 8px; }

.edum-slider__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--edum-line, #DCE4EC);
	cursor: pointer;
	transition: width .25s cubic-bezier(.16,1,.3,1), background-color .25s;
}
.edum-slider__dot[aria-selected='true'] {
	width: 26px;
	background: var(--edum-accent, #F38901);
}

@media (max-width: 639px) {
	.edum-quote {
		grid-template-columns: 1fr;
		grid-template-areas: 'portrait' 'quote' 'by';
		row-gap: 18px;
	}
	.edum-quote__text { -webkit-line-clamp: 5; line-clamp: 5; }
}

/* --------------------------------------------------------------------------
   LEAD CAPTURE
   -------------------------------------------------------------------------- */

.edum-capture {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

.edum-capture__title { margin: 0 0 .45em; font-size: clamp(28px, 3.6vw, 40px); color: var(--edum-navy, #004066); }
.edum-capture__body { margin: 0; color: var(--edum-body, #46566B); max-width: 46ch; }

.edum-capture__promises {
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 14px;
}
.edum-capture__promises li {
	position: relative;
	padding-left: 34px;
	font-size: 15.5px;
	color: var(--edum-ink, #16233A);
}
.edum-capture__promises li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .45em;
	width: 18px;
	height: 9px;
	border-left: 2px solid var(--edum-form-accent, var(--edum-accent, #F38901));
	border-bottom: 2px solid var(--edum-form-accent, var(--edum-accent, #F38901));
	transform: rotate(-45deg) scale(.8);
	transform-origin: left center;
}

.edum-capture__photo {
	margin: 32px 0 0;
	border-radius: 14px;
	overflow: hidden;
	background: var(--edum-mist, #F2F6FA);
	aspect-ratio: 4 / 3;
}
.edum-capture__photo img { width: 100%; height: 100%; object-fit: cover; }

/* The form is the job of this section on a small screen. The photograph is
   atmosphere, so it steps aside rather than pushing the fields down. */
@media (max-width: 1023px) {
	.edum-capture__photo { display: none; }
}

.edum-formcard {
	padding: clamp(26px, 3vw, 38px);
	border-radius: 14px;
	background: var(--edum-white, #fff);
	box-shadow: inset 0 0 0 1px var(--edum-line, #DCE4EC), var(--edum-shadow-md, 0 10px 30px -12px rgba(16,42,67,.18));
}

.edum-form__title { margin: 0 0 .3em; font-size: 22px; color: var(--edum-navy, #004066); }
.edum-form__hint { margin: 0 0 24px; font-size: 14px; color: var(--edum-muted, #5B6B7F); }

.edum-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.edum-field { margin-bottom: 18px; }

.edum-field label {
	display: block;
	margin-bottom: 7px;
	font-size: 13.5px;
	font-weight: 700;
	/* AA against the card background. */
	color: var(--edum-navy, #004066);
}

.edum-field input,
.edum-field select,
.edum-field textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1.5px solid var(--edum-line, #DCE4EC);
	border-radius: 10px;
	background: var(--edum-paper, #FFFFFF);
	color: var(--edum-ink, #16233A);
	font: inherit;
	font-size: 15.5px;
	transition: border-color .2s, box-shadow .2s;
}
.edum-field textarea { resize: vertical; min-height: 84px; }

.edum-field input:focus,
.edum-field select:focus,
.edum-field textarea:focus {
	outline: none;
	border-color: var(--edum-form-accent, var(--edum-accent-ink, #A85400));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--edum-form-accent, #F38901) 22%, transparent);
}

.edum-field__help { margin: 7px 0 0; font-size: 13px; color: var(--edum-muted, #5B6B7F); }

.edum-field__error,
.edum-form__error {
	margin: 7px 0 0;
	font-size: 13.5px;
	font-weight: 600;
	color: #B3261E;
}
@media (prefers-color-scheme: dark) {
	.edum-field__error,
	.edum-form__error { color: #FF9C93; }
}

.edum-field--invalid input,
.edum-field--invalid select { border-color: #B3261E; }

.edum-form__error { margin-bottom: 14px; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.edum-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.edum-form { position: relative; }

.edum-form__submit { width: 100%; margin-top: 4px; }
.edum-form__submit[aria-busy='true'] { opacity: .7; cursor: progress; }

.edum-form__consent {
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--edum-muted, #5B6B7F);
}

.edum-form__success { text-align: left; }
.edum-form__success-title { margin: 0 0 .4em; font-size: 22px; color: var(--edum-navy, #004066); }
.edum-form__success p { margin: 0; color: var(--edum-body, #46566B); }

@media (max-width: 1023px) { .edum-capture { grid-template-columns: 1fr; } }
@media (max-width: 519px)  { .edum-form__row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   SECTION BACKDROPS

   Atmosphere on a white page. Every one of these is drawn on a pseudo-element
   behind the content, uses only the brand navy and orange, and is held at an
   alpha low enough that the section still reads as white. No purple mesh, no
   neon, no full-bleed colour fields.

   `--edum-backdrop-strength` is wired to a slider in the panel, so each one
   can be pushed or pulled back per section without editing CSS.
   -------------------------------------------------------------------------- */

.edum-backdrop {
	position: relative;
	isolation: isolate;
	--edum-backdrop-strength: 1;
	/* Ink for line and dot work. Navy at very low alpha on white, white at low
	   alpha on the dark toggle, so patterns never invert into hard contrast. */
	--edum-backdrop-ink: rgba(16, 42, 67, .07);
	--edum-backdrop-accent: rgba(15, 157, 110, .10);
	--edum-backdrop-navy: rgba(16, 42, 67, .06);
}

html[data-edum-theme='dark'] .edum-backdrop {
	--edum-backdrop-ink: rgba(255, 255, 255, .06);
	--edum-backdrop-accent: rgba(52, 199, 149, .10);
	--edum-backdrop-navy: rgba(120, 160, 200, .07);
}

.edum-backdrop::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: var(--edum-backdrop-strength);
}

/* Soft brand wash. Two wide radials, orange high right and navy low left, so
   the section has a light source rather than a flat fill. */
.edum-backdrop--wash::before {
	background:
		radial-gradient(70% 60% at 88% 0%, var(--edum-backdrop-accent) 0%, transparent 62%),
		radial-gradient(60% 55% at 5% 100%, var(--edum-backdrop-navy) 0%, transparent 60%);
}

/* Dot field, faded out at the edges so it never collides with a section join. */
.edum-backdrop--dots::before {
	background-image: radial-gradient(var(--edum-backdrop-ink) 1.15px, transparent 1.15px);
	background-size: 22px 22px;
	background-position: 0 0;
	-webkit-mask-image: radial-gradient(78% 68% at 50% 42%, #000 0%, transparent 78%);
	mask-image: radial-gradient(78% 68% at 50% 42%, #000 0%, transparent 78%);
}

/* Hairline grid. Wider spacing than the dots so the two never read as siblings. */
.edum-backdrop--grid::before {
	background-image:
		linear-gradient(to right, var(--edum-backdrop-ink) 1px, transparent 1px),
		linear-gradient(to bottom, var(--edum-backdrop-ink) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(72% 62% at 50% 50%, #000 0%, transparent 76%);
	mask-image: radial-gradient(72% 62% at 50% 50%, #000 0%, transparent 76%);
}

/* Gradient band. Replaces a hard-edged tint block with one that fades in and
   out, so the section has no visible seam against the white above and below. */
.edum-backdrop--band::before {
	background: linear-gradient(
		180deg,
		transparent 0%,
		var(--edum-mist, #F2F6FA) 12%,
		var(--edum-mist, #F2F6FA) 88%,
		transparent 100%
	);
}

/* A section using the band draws its own tint, so it must not also carry a
   flat background colour or the fade has nothing to fade against. */
.edum-section--courses.edum-backdrop--band { background: transparent; }

@media (prefers-reduced-transparency: reduce) {
	/* Keep the tint, drop the soft-focus layers. */
	.edum-backdrop--wash::before,
	.edum-backdrop--dots::before,
	.edum-backdrop--grid::before { background: none; }
}

/* --------------------------------------------------------------------------
   SECTION SURFACES

   Named surfaces rather than fixed hex, so a section that is tinted in light
   mode becomes the equivalent raised dark tone instead of staying cream on a
   near-black page.
   -------------------------------------------------------------------------- */

.edum-surface--mist { background: var(--edum-mist, #F2F6FA); }
.edum-surface--page { background: var(--edum-paper, #FFFFFF); }

/* --------------------------------------------------------------------------
   EMPTY STATE

   Shown inside the Elementor editor only, when a widget is reading from the
   library and the library has nothing to give it. It is composed rather than
   apologetic, and it says exactly what to do next.
   -------------------------------------------------------------------------- */

.edum-empty-state {
	display: grid;
	justify-items: start;
	gap: 8px;
	padding: 36px 32px;
	border-radius: 14px;
	background: var(--edum-mist, #F2F6FA);
	box-shadow: inset 0 0 0 1px var(--edum-line, #DCE4EC);
}

.edum-empty-state__title {
	margin: 0;
	font-family: var(--edum-font-display, sans-serif);
	font-size: 19px;
	font-weight: 700;
	color: var(--edum-navy, #004066);
}

.edum-empty-state__body {
	margin: 0;
	max-width: 58ch;
	font-size: 15px;
	color: var(--edum-body, #46566B);
}

.edum-empty-state__link {
	margin-top: 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--edum-accent-ink, #A85400);
	text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   SCROLL REVEAL
   Motion here does one job: it sequences a section's contents so the eye lands
   on the heading before the cards. Nothing loops, nothing parallaxes.
   -------------------------------------------------------------------------- */

[data-edum-reveal] {
	opacity: 0;
	transition:
		opacity .6s cubic-bezier(.16,1,.3,1) var(--edum-reveal-delay, 0ms),
		transform .6s cubic-bezier(.16,1,.3,1) var(--edum-reveal-delay, 0ms);
	will-change: opacity, transform;
}
[data-edum-reveal='rise'] { transform: translateY(22px); }
[data-edum-reveal='fade'] { transform: none; }

[data-edum-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* No JavaScript, no hidden content. */
.no-js [data-edum-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	[data-edum-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.edum-slider__track { transition: none; }
}

/* --------------------------------------------------------------------------
   SHARED UTILITIES
   -------------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.edum-section :focus-visible {
	outline: 3px solid var(--edum-accent-ink, #A85400);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ==========================================================================
   EDITORIAL LAYER
   --------------------------------------------------------------------------
   Everything above builds a correct, accessible page. This layer is what
   separates it from a competent template, and each rule is here for a stated
   reason rather than for decoration.

   Three problems it fixes:

   1. Timid hierarchy. The hero was only 1.24x the section heading, so the page
      had no clear first voice. Widened to roughly 1.45x, with optical sizing
      and tightened tracking at each tier.

   2. A page made entirely of boxes. Ten rounded rectangles with hairlines read
      as a component library, not a composition. The testimonial loses its box
      entirely and becomes type; the hero and one band break the container.

   3. Uniform rhythm. Every section had identical padding, which flattens
      pacing. Sections now breathe differently depending on their job.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HIERARCHY
   -------------------------------------------------------------------------- */

/* Tracking is set through Elementor's own variable, not around it.
   Elementor compiles a typography control bound to a Global into
   `letter-spacing: var(--e-global-typography-primary-letter-spacing)` on a
   selector that outranks anything here. Redefining that variable on the
   element lets Elementor's own declaration resolve to the right value per
   tier, and an editor who sets a letter-spacing in the panel still wins,
   because Elementor then emits a literal instead of the variable. */

.edum-hero__title {
	--e-global-typography-primary-letter-spacing: var(--edum-track-display, -0.035em);
	font-size: clamp(38px, 5.2vw, 68px);
	line-height: 1.02;
	letter-spacing: 0;
	font-variation-settings: 'opsz' var(--edum-opsz-display, 96);
}

.edum-sechead__title,
.edum-capture__title {
	--e-global-typography-primary-letter-spacing: var(--edum-track-heading, -0.026em);
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.06;
	letter-spacing: var(--edum-track-heading, -0.026em);
	font-variation-settings: 'opsz' var(--edum-opsz-heading, 72);
}

/* Card and list headings share the display face at a smaller tier. */
.edum-bento__title,
.edum-course__title,
.edum-journey__title,
.edum-form__title {
	--e-global-typography-primary-letter-spacing: var(--edum-track-title, -0.015em);
	letter-spacing: var(--edum-track-title, -0.015em);
	font-variation-settings: 'opsz' var(--edum-opsz-title, 40);
}

/* The supporting line under a heading is a different voice, not a smaller
   version of the same one: body face, roomier leading, narrower measure. */
.edum-sechead__body,
.edum-capture__body {
	font-size: 17px;
	line-height: 1.65;
	max-width: 52ch;
}

.edum-hero__sub {
	/* Extra top margin because the highlight rule hangs below the headline. */
	margin-top: 30px;
	font-size: clamp(17px, 1.35vw, 19px);
	line-height: 1.6;
	max-width: 46ch;
}

/* Eyebrows sit smaller and wider than before so they read as a label rather
   than as competing with the headline. */
.edum-hero__eyebrow,
.edum-sechead__eyebrow {
	font-size: 11.5px;
	letter-spacing: .16em;
}

/* --------------------------------------------------------------------------
   2. COMPOSITION

   The hero reaches the right edge of the viewport instead of stopping at the
   container. This is the single move that most changes how the page reads:
   the photograph becomes part of the page's architecture rather than an
   element placed inside a box.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.edum-hero__grid {
		max-width: none;
		padding-right: 0;
		/* Align the text column to where the container would have started, so
		   it still lines up with every section below it. */
		/* Align the headline with the section headings below it. That means the
		   container's *content* edge, so the gutter is part of the sum: the
		   shell is a centred box of --edum-shell that then pads itself by
		   --edum-gutter, and text starts inside that padding.

		   `100%`, not `100vw` — the grid's containing block is the hero
		   section, which is the client width, while `100vw` includes the
		   scrollbar. Both errors were live at once: the headline sat 40px left
		   of every heading below it, and a further 7px right of that on any
		   scrollbar-reserving desktop. */
		padding-left: max(
			var(--edum-gutter, 40px),
			calc((100% - var(--edum-shell, 1180px)) / 2 + var(--edum-gutter, 40px))
		);
		grid-template-columns:
			minmax(0, calc(var(--edum-shell, 1180px) * 0.44 * var(--edum-hero-split, 1.05)))
			1fr;
		gap: clamp(40px, 5vw, 80px);
	}

	.edum-hero__copy {
		position: relative;
		z-index: 4;
	}

	/* Radius only on the corners that are still visible. A rounded corner
	   against a cut edge is the detail that gives this away as a hack. */
	.edum-hero__media {
		border-radius: 24px 0 0 24px;
		aspect-ratio: 1 / 1.02;
		width: min(88%, 680px);
	}

	.edum-hero--media-left .edum-hero__grid {
		padding-left: 0;
		padding-right: max(
			var(--edum-gutter, 40px),
			calc((100% - var(--edum-shell, 1180px)) / 2 + var(--edum-gutter, 40px))
		);
		grid-template-columns:
			1fr
			minmax(0, calc(var(--edum-shell, 1180px) * 0.44 * var(--edum-hero-split, 1.05)));
	}
	.edum-hero--media-left .edum-hero__media {
		margin-left: 0;
		margin-right: auto;
		border-radius: 0 24px 24px 0;
	}

	.edum-hero--media-left .edum-hero__route {
		left: auto;
		right: 0;
	}

	.edum-hero--media-left .edum-hero__proof {
		left: auto;
		right: 0;
	}

	.edum-hero--media-left .edum-hero__doc {
		left: 24px;
		right: auto;
	}
}

/* One full-bleed band. Used once, so it stays an event rather than a habit.

   `clip` rather than `hidden`: both crop the bleed overshoot identically, but
   `hidden` makes the element a scroll container, and a scroll container is
   what a view timeline resolves against. With `hidden` here the parallax
   below resolved against a box that never scrolls and sat frozen. */
.edum-section--journey { overflow: clip; }

@media (min-width: 768px) {
	.edum-journey__banner {
		/* Full bleed by relative offset, because the two usual techniques are
		   both already claimed on this element:
		     - transform, by the scroll-reveal, which sets `transform: none`
		       once the band has animated in and would silently undo a
		       translate-based bleed;
		     - margin, by Elementor's own frontend reset, which zeroes every
		       `figure` margin at a specificity this rule cannot reach without
		       an !important fight.
		   `left` on a relatively positioned box is untouched by both. The
		   section clips the few pixels of scrollbar overshoot, symmetrically. */
		position: relative;
		left: calc(50% - 50vw);
		width: 100vw;
		max-width: none;
		border-radius: 0;
		aspect-ratio: 21 / 7;
	}
}

/* The testimonial stops being a card and becomes the thing it is: a sentence
   worth reading, set large, with the attribution beneath rather than beside. */
.edum-quote {
	background: transparent;
	box-shadow: none;
	padding: clamp(4px, 1vw, 12px) 0;
	border-radius: 0;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		'quote quote'
		'portrait by';
	column-gap: 14px;
	row-gap: 26px;
	align-content: start;
}

.edum-quote__text {
	font-family: var(--edum-font-display, sans-serif);
	font-size: clamp(21px, 2.5vw, 33px);
	font-weight: 600;
	line-height: 1.24;
	letter-spacing: var(--edum-track-heading, -0.026em);
	font-variation-settings: 'opsz' var(--edum-opsz-heading, 72);
	max-width: 19em;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.edum-quote__portrait { width: 46px; height: 46px; align-self: center; }
.edum-quote__by { margin-top: 0; align-self: center; flex-direction: column; gap: 1px; }

@media (max-width: 639px) {
	.edum-quote {
		grid-template-columns: auto 1fr;
		grid-template-areas: 'quote quote' 'portrait by';
	}
	.edum-quote__text { -webkit-line-clamp: 5; line-clamp: 5; }
}

/* Course meta was a justified two-column list, which opened ragged gaps
   between label and value. It reads as a spec strip instead. */
.edum-course__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin-bottom: 22px;
}
.edum-course__fact { display: block; }
.edum-course__fact dt {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	margin-bottom: 1px;
}
.edum-course__fact dd { text-align: left; font-size: 14.5px; }

/* --------------------------------------------------------------------------
   3. RHYTHM

   Sections breathe according to their job: the ones carrying a single idea get
   room, the ones carrying dense cards get less.
   -------------------------------------------------------------------------- */

.edum-hero               { padding-block: clamp(56px, 7vw, 88px) clamp(64px, 9vw, 116px); }
.edum-section--pillars   { padding-block: clamp(72px, 10vw, 128px); }
.edum-section--courses   { padding-block: clamp(64px, 8vw, 104px); }
.edum-section--journey   { padding-block: clamp(72px, 10vw, 128px); }
.edum-section--milestones{ padding-block: clamp(56px, 7vw, 88px); }
.edum-section--quotes    { padding-block: clamp(72px, 10vw, 132px); }
.edum-section--capture   { padding-block: clamp(64px, 9vw, 112px); }

/* --------------------------------------------------------------------------
   4. MATERIAL DETAIL

   Motion that responds to the pointer, at a speed slow enough to read as
   material rather than as a effect.
   -------------------------------------------------------------------------- */

.edum-course__media,
.edum-bento__media { overflow: hidden; }

.edum-course__media img,
.edum-bento__media img {
	transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}

.edum-course:hover .edum-course__media img,
.edum-bento__cell:hover .edum-bento__media img { transform: scale(1.045); }

/* Underline that draws from the left rather than switching on. */
.edum-courses__more a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1.5px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 3px;
	transition: background-size .45s cubic-bezier(.16, 1, .3, 1);
}
.edum-courses__more a:hover { background-size: 100% 1.5px; }

@media (prefers-reduced-motion: reduce) {
	.edum-course__media img,
	.edum-bento__media img,
	.edum-courses__more a { transition: none; }
	.edum-course:hover .edum-course__media img,
	.edum-bento__cell:hover .edum-bento__media img { transform: none; }
}

/* With the testimonial de-boxed and set left, centred controls read as
   belonging to a card that is no longer there. They align to the text. */
.edum-section--quotes .edum-slider__controls {
	justify-content: flex-start;
	margin-top: 34px;
}

/* The viewport no longer needs to clip a card edge, so let the quote breathe
   to a comfortable measure instead of the full container width. */
.edum-section--quotes .edum-slider__viewport { border-radius: 0; }

/* --------------------------------------------------------------------------
   SECTION JOINS

   Two stacked sections each contribute their own padding, so the gap between
   them is padding-bottom plus padding-top. Where the next section opens with a
   heading that carries visual weight, that reads as rhythm. Where it opens
   with a small muted line, as the milestones do, the same gap reads as a void
   and the page looks broken.

   The journey to milestones join is that case, so it is tightened and marked
   with a hairline: the space then reads as a deliberate divider rather than as
   something missing.
   -------------------------------------------------------------------------- */

.edum-section--journey { padding-bottom: clamp(48px, 6vw, 76px); }

/* No padding override here on purpose. The widget exposes a padding control,
   and Elementor compiles it to a selector that outranks this file, so a rule
   here would look correct in the stylesheet and do nothing on the page. The
   default lives in the control instead. */

.edum-section--milestones .edum-shell::before {
	content: '';
	display: block;
	height: 1px;
	margin-bottom: clamp(28px, 3.5vw, 44px);
	background: linear-gradient(
		90deg,
		var(--edum-line, #DCE4EC) 0%,
		var(--edum-line, #DCE4EC) 62%,
		transparent 100%
	);
}

/* On the navy variant the hairline needs to read against a dark ground. */
.edum-section--milestones.edum-section--navy .edum-shell::before {
	background: linear-gradient(90deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.18) 62%, transparent 100%);
}

/* The intro sits closer to the figures it introduces. */
.edum-milestones__intro { margin-bottom: clamp(24px, 3vw, 32px); }

/* ==========================================================================
   TOUCH TARGETS

   Every interactive element needs a 44x44 tap area (Apple HIG) / 48x48dp
   (Material). Several controls here were visually correct but too small to
   hit reliably on a phone, which matters: most of this audience arrives on
   one. The visual size is left alone; only the hit area grows.
   ========================================================================== */

/* Small buttons on course cards were 39px tall. */
.edum-btn--sm {
	min-height: 44px;
	padding-block: 12px;
}

/* An inline text link is only as tall as its line box. */
.edum-courses__more a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* The brand lockup is a link, so it needs the same floor. Padding rather than
   height, so it stays vertically centred in the 72px header. */
.edum-brand {
	min-height: 44px;
	padding-block: 3px;
}

/* Slider arrows were 42px, two short of the minimum. */
.edum-slider__arrow {
	width: 44px;
	height: 44px;
}

/*
 * Pagination dots are 9px by design, and a 9px tap target is unusable. The
 * button grows to a full-height target with the dot drawn inside it, so the
 * control looks unchanged and the hit area quadruples.
 *
 * The dots stay narrower than 44px on purpose: widening them far enough would
 * either overlap neighbouring targets, which causes mis-taps, or space them so
 * far apart they stop reading as a group. The arrows either side are the
 * full-size controls, so no function depends on hitting a dot.
 */
/* 8px is the minimum spacing between adjacent touch targets. */
.edum-slider__dots { gap: 8px; }

.edum-slider__dot {
	width: 28px;
	height: 44px;
	padding: 0;
	background: none;
	display: grid;
	place-items: center;
	border-radius: 0;
}

.edum-slider__dot::before {
	content: '';
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: var(--edum-line, #DCE4EC);
	transition: width .25s cubic-bezier(.16, 1, .3, 1), background-color .25s;
}

.edum-slider__dot[aria-selected='true'] {
	width: 40px;
	background: none;
}
.edum-slider__dot[aria-selected='true']::before {
	width: 26px;
	background: var(--edum-accent, #F38901);
}

@media (prefers-reduced-motion: reduce) {
	.edum-slider__dot::before { transition: none; }
}

/* --------------------------------------------------------------------------
   MOTION TIMING

   Micro-interactions belong in the 150-300ms band, complex transitions under
   400ms. The image zoom was 800ms and the scroll reveal 600ms, both of which
   read as sluggish rather than considered.
   -------------------------------------------------------------------------- */

.edum-course__media img,
.edum-bento__media img { transition-duration: .45s; }

[data-edum-reveal] { transition-duration: .5s; }

/* Small caps labels sit at 10.5-11.5px at desktop, which is within platform
   label sizing, but on a phone held at arm's length it is under the 12px floor
   for legible text. They step up on small screens. */
@media (max-width: 767px) {
	.edum-hero__eyebrow,
	.edum-sechead__eyebrow { font-size: 12px; }

	.edum-course__fact dt { font-size: 12px; }

	.edum-milestone__note,
	.edum-quote__role { font-size: 13.5px; }
}

/* ==========================================================================
   DESTINATIONS

   A compact image and label grid. Deliberately not another tall card: the
   courses section already owns that family, and repeating it would make the
   two sections read as the same component twice.
   ========================================================================== */

.edum-dests {
	display: grid;
	grid-template-columns: repeat(var(--edum-dest-cols, 6), minmax(0, 1fr));
	gap: 20px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.edum-dest__inner {
	display: block;
	text-decoration: none;
	color: inherit;
}

.edum-dest__media {
	border-radius: 14px;
	overflow: hidden;
	background: var(--edum-mist, #F2F6FA);
	aspect-ratio: 4 / 5;
	margin-bottom: 12px;
}
.edum-dest__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
a.edum-dest__inner:hover .edum-dest__media img { transform: scale(1.05); }

.edum-dest__name {
	display: block;
	font-family: var(--edum-font-display, sans-serif);
	font-weight: 700;
	font-size: 15.5px;
	line-height: 1.25;
	color: var(--edum-navy, #004066);
}

.edum-dest__note {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--edum-muted, #5B6B7F);
}

@media (max-width: 1023px) { .edum-dests { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 559px)  { .edum-dests { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
	.edum-dest__media img { transition: none; }
	a.edum-dest__inner:hover .edum-dest__media img { transform: none; }
}

/* ==========================================================================
   PARTNER INSTITUTIONS

   A restrained trust row under the hero. Names are set as type until real
   logos are supplied, which is the honest default: an institution mark is a
   trademark, and showing one implies a relationship.
   ========================================================================== */

.edum-section--partners { padding-block: 8px 40px; }

.edum-partners__intro {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--edum-muted, #5B6B7F);
}

.edum-partners__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.edum-partner__inner {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
}

.edum-partner__logo {
	height: 30px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
}

.edum-partner__name {
	font-family: var(--edum-font-display, sans-serif);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -0.01em;
	color: var(--edum-navy, #004066);
	opacity: .78;
}
a.edum-partner__inner:hover .edum-partner__name { opacity: 1; }

@media (max-width: 639px) {
	.edum-partners__list { gap: 8px 22px; }
	.edum-partner__name { font-size: 14.5px; }
}

/* ==========================================================================
   MILESTONES WITH A PHOTOGRAPH
   ========================================================================== */

/* --------------------------------------------------------------------------
   MILESTONES BESIDE A PHOTOGRAPH

   The figures are the point of this section and the photograph supports them,
   so the figures take the larger column. Explicit grid areas rather than
   source order, because the figure element comes first in the markup and
   ordering it by hand is what put the photograph in the flexible track and
   squeezed four counters into 75px each.
   -------------------------------------------------------------------------- */

.edum-milestones__split {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		'body'
		'media';
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.edum-milestones__split .edum-milestones__body  { grid-area: body; min-width: 0; }
.edum-milestones__split .edum-milestones__media { grid-area: media; min-width: 0; }

.edum-milestones__media {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	background: var(--edum-mist, #F2F6FA);
	aspect-ratio: 4 / 5;
}
.edum-milestones__media img { width: 100%; height: 100%; object-fit: cover; }

/* The hairline divider belongs to the figures, not to the photograph. */
.edum-milestones__split::before { content: none; }
.edum-milestones__split .edum-milestones__body::before {
	content: '';
	display: block;
	height: 1px;
	margin-bottom: clamp(20px, 2.5vw, 30px);
	background: linear-gradient(90deg, var(--edum-line, #DCE4EC) 0%, var(--edum-line, #DCE4EC) 62%, transparent 100%);
}

@media (min-width: 900px) {
	.edum-milestones__split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
		grid-template-areas: 'body media';
		gap: clamp(40px, 5vw, 76px);
	}

	/*
	 * Two counters across beside a photograph, not four. Elementor compiles the
	 * Columns control to `.elementor-N .elementor-element.elementor-element-ID
	 * .edum-milestones`, which scores (0,4,0) and loads after this file, so the
	 * override has to reach (0,5,0) to win. The control still governs the full
	 * width arrangement, which is the only place more than two fit.
	 */
	.edum-section.edum-section--milestones .edum-shell.edum-milestones__split .edum-milestones {
		--edum-milestone-cols: 2;
		gap: clamp(28px, 3vw, 40px) clamp(24px, 2.5vw, 36px);
	}

	/* In a two up block the first item of each row starts the row, so it takes
	   no left rule. */
	.edum-milestones__split .edum-milestone:nth-child(2n+1) {
		border-left: 0;
		padding-left: 0;
	}
	.edum-milestones__split .edum-milestone:nth-child(2n) {
		border-left: 1px solid var(--edum-line, #DCE4EC);
		padding-left: clamp(20px, 2vw, 28px);
	}

	/* A 4:5 crop in a 560px column runs to 700px tall and drags the section
	   past the figures it is meant to sit beside. */
	.edum-milestones__media { aspect-ratio: 1 / 1; }
}

@media (max-width: 767px) {
	/* The figures are the point of this section; the photograph supports them,
	   so on a phone it steps aside rather than pushing them below the fold. */
	.edum-milestones__media { display: none; }
}

/* ==========================================================================
   NAVY TILE OVER A PHOTOGRAPH

   Keeps the lead tile as the grid's focal point while giving it imagery. The
   scrim is heavy enough that the white text holds its contrast over any
   photograph, which a lighter overlay would not guarantee.
   ========================================================================== */

.edum-bento__cell--navy-image {
	position: relative;
	isolation: isolate;
	background: var(--edum-navy-block, #004066);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}

.edum-bento__backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}
.edum-bento__backdrop img { width: 100%; height: 100%; object-fit: cover; }

.edum-bento__backdrop::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(150deg, rgba(0, 64, 102, .93) 0%, rgba(0, 64, 102, .86) 55%, rgba(0, 46, 73, .92) 100%);
}

.edum-bento .edum-bento__cell--navy-image .edum-bento__title { color: var(--edum-on-navy, #fff); }
.edum-bento .edum-bento__cell--navy-image .edum-bento__text { color: var(--edum-on-navy-mut, #BCCFE2); }
.edum-bento .edum-bento__cell--navy-image .edum-bento__link { color: var(--edum-accent-soft, #FFC170); }
.edum-bento .edum-bento__cell--navy-image .edum-bento__icon {
	background: rgba(255, 255, 255, .12);
	color: var(--edum-accent-soft, #FFC170);
}

/* ==========================================================================
   FLAGS

   Real flag assets from flagcdn, not emoji: emoji flags render differently on
   every platform, are missing entirely on some, and cannot be sized, bordered
   or aligned. A hairline ring keeps flags with white in them, Poland and the
   Netherlands among these, from dissolving into a white page.
   ========================================================================== */

.edum-flag {
	width: 20px;
	height: 15px;
	flex: none;
	border-radius: 2px;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(0, 64, 102, .16);
	vertical-align: -2px;
}

/* Destination label: flag and country name on one baseline. */
.edum-dest__label {
	display: flex;
	align-items: center;
	gap: 8px;
}

.edum-dest__label .edum-flag {
	width: 22px;
	height: 16px;
}

/* Attribution line in a testimonial. */
.edum-quote__role {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* --------------------------------------------------------------------------
   FOOTER FLAG STRIP
   -------------------------------------------------------------------------- */

.edum-footer__flags {
	padding-bottom: 26px;
	margin-bottom: 24px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.edum-footer__flags-label {
	margin: 0 0 12px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #8FA6BC;
}

.edum-flagstrip {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.edum-flagstrip__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #D6E2EE;
}

/* On the navy footer the ring has to read light, not dark. */
.edum-flagstrip .edum-flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }

@media (max-width: 639px) {
	.edum-flagstrip { gap: 8px 18px; }
	.edum-flagstrip__item { font-size: 13px; }
	.edum-footer__flags-label { font-size: 12px; }
}

/* ==========================================================================
   PARALLAX

   Built on CSS scroll-driven animation, so there is no scroll listener
   anywhere: the browser drives it off the element's own view timeline, off the
   main thread. A JS parallax would run work on every scroll frame, which is
   the usual reason parallax feels sticky on a phone.

   Three guards, all deliberate:
     - @supports, so browsers without scroll timelines get a static band rather
       than a broken one. There is no JS fallback on purpose: parallax is
       decoration, and decoration is not worth a scroll handler.
     - prefers-reduced-motion, because drifting backgrounds are a common
       trigger for motion sensitivity.
     - one band per page. Repeated down a page, parallax stops reading as depth
       and starts reading as things failing to keep up.

   Only transform is animated, and the image is oversized so the drift never
   exposes an edge.
   ========================================================================== */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* `overflow: hidden` makes an element a scroll container, and a view
		   timeline resolves against the nearest scrollport. With hidden on the
		   frame, the timeline pointed at a box that never scrolls and the
		   animation sat frozen at its first frame. `clip` crops identically
		   without creating a scroll container, so the timeline resolves against
		   the document as intended. */
		.edum-journey__banner--parallax { overflow: clip; }

		.edum-journey__banner--parallax img {
			height: 128%;
			will-change: transform;
			animation: edum-parallax linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}

		@keyframes edum-parallax {
			from { transform: translate3d(0, -11%, 0); }
			to   { transform: translate3d(0, 0, 0); }
		}
	}
}

/* An institution with no logo uploaded yet. The tile reads as a slot waiting
   for artwork; a bare wordmark reads as a page someone forgot to finish. */
.edum-partner__mark {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 9px;
	background: var(--edum-mist, #F2F6FA);
	box-shadow: inset 0 0 0 1px var(--edum-line, #DCE4EC);
	font-family: var(--edum-font-display, sans-serif);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .01em;
	color: var(--edum-navy, #004066);
}

.edum-partner__inner { display: inline-flex; align-items: center; gap: 11px; }

/* ==========================================================================
   HERO STAGE

   Everything below is motion and ornament layered onto a hero that already
   reads correctly without it. Three rules held throughout:

   1. Nothing here moves layout. The aura, the weave and the tilt are painted
      on top of a grid that measures the same whether they run or not, so a
      dropped animation is a plainer hero, never a broken one.
   2. Every entrance ends at the element's resting state, and `.no-js` plus
      `prefers-reduced-motion` jump straight to that state. Content is never
      left at opacity 0 waiting for a frame that may not come.
   3. Perpetual motion is slow and small — the ambient layer is meant to be
      noticed only once. Anything that reads as "moving" while someone is
      trying to read the headline is a bug, not a feature.
   ========================================================================== */

.edum-hero { position: relative; isolation: isolate; }
.edum-hero > .edum-shell { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Ambient background

   The page is white by design, so this stays architectural: angled bands and
   a measured dot field behind the composition, not separate decorative shapes.
   -------------------------------------------------------------------------- */

.edum-hero__aura,
.edum-hero__weave {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.edum-hero__blob {
	position: absolute;
	display: block;
	border-radius: 0;
	filter: none;
	opacity: .22;
	will-change: transform;
}

.edum-hero__blob--navy {
	top: 11%;
	right: -12%;
	width: 48%;
	height: 34%;
	background: linear-gradient(135deg, transparent 0%, color-mix(in srgb, var(--edum-navy, #004066) 18%, transparent) 38%, transparent 78%);
	transform: skewX(-16deg);
	animation: edum-drift-a 34s ease-in-out infinite;
}

.edum-hero__blob--warm {
	bottom: 2%;
	left: 8%;
	width: 42%;
	height: 28%;
	background: linear-gradient(28deg, transparent 0%, color-mix(in srgb, var(--edum-accent, #F38901) 20%, transparent) 44%, transparent 82%);
	transform: skewX(-12deg);
	animation: edum-drift-b 40s ease-in-out infinite;
}

@keyframes edum-drift-a {
	0%, 100% { transform: translate3d(0, 0, 0) skewX(-16deg); }
	50%      { transform: translate3d(5%, 4%, 0) skewX(-16deg); }
}
@keyframes edum-drift-b {
	0%, 100% { transform: translate3d(0, 0, 0) skewX(-12deg); }
	50%      { transform: translate3d(-5%, -4%, 0) skewX(-12deg); }
}

/* A dot grid in the empty corner above the eyebrow. It is masked to that
   corner for two reasons: it fills the one part of the hero that was carrying
   nothing, and it stays off the paragraph — a dot grid behind body text costs
   legibility for decoration, which is a bad trade at any opacity. */
.edum-hero__weave {
	background-image: radial-gradient(color-mix(in srgb, var(--edum-navy, #004066) 30%, transparent) 1.4px, transparent 1.4px);
	background-size: 24px 24px;
	opacity: .75;
	-webkit-mask-image: radial-gradient(72% 62% at 3% 2%, #000 0%, transparent 68%);
	mask-image: radial-gradient(72% 62% at 3% 2%, #000 0%, transparent 68%);
}

/* --------------------------------------------------------------------------
   Copy cascade

   The copy block already carries data-edum-reveal, so it gains .is-revealed
   when it enters the viewport. That class is the starting gun for the children
   here — no extra observers, and the order is authored in one place.
   -------------------------------------------------------------------------- */

.edum-hero__copy > * { opacity: 1; }

[data-edum-hero] .edum-hero__copy[data-edum-reveal] > * {
	opacity: 0;
	transform: translateY(14px);
}

[data-edum-hero] .edum-hero__copy.is-revealed > * {
	animation: edum-hero-in .72s cubic-bezier(.2, .74, .28, 1) forwards;
}

/* The headline animates word by word, so the block itself must not also fade
   or the two run over each other. */
[data-edum-hero] .edum-hero__copy.is-revealed > .edum-hero__title {
	opacity: 1;
	transform: none;
	animation: none;
}

[data-edum-hero] .edum-hero__copy.is-revealed > .edum-hero__eyebrow { animation-delay: .04s; }
[data-edum-hero] .edum-hero__copy.is-revealed > .edum-hero__sub     { animation-delay: .42s; }
[data-edum-hero] .edum-hero__copy.is-revealed > .edum-hero__actions { animation-delay: .54s; }

@keyframes edum-hero-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* The eyebrow's rule draws itself rather than appearing. */
.edum-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.edum-hero__eyebrow::before {
	content: '';
	width: 30px;
	height: 2px;
	border-radius: 2px;
	background: var(--edum-accent, #F38901);
	transform-origin: left;
	transform: scaleX(0);
}
[data-edum-hero] .edum-hero__copy.is-revealed .edum-hero__eyebrow::before {
	animation: edum-rule-draw .6s .16s cubic-bezier(.2, .74, .28, 1) forwards;
}
@keyframes edum-rule-draw { to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   Headline words

   The mask is the point: each word travels from fully below its own baseline,
   so the line assembles rather than fading in. `padding-bottom` with a matching
   negative margin buys room for descenders and the accent underline without
   changing where the line sits.
   -------------------------------------------------------------------------- */

.edum-word {
	display: inline-block;
	overflow: hidden;
	padding-bottom: .16em;
	margin-bottom: -.16em;
	vertical-align: bottom;
}

.edum-word__in {
	display: inline-block;
	transform: translateY(112%);
	opacity: 0;
	will-change: transform;
}

[data-edum-hero] .edum-hero__copy.is-revealed .edum-word__in {
	animation: edum-word-up .82s cubic-bezier(.16, .84, .28, 1) forwards;
	/* Capped so a long headline still finishes before the buttons arrive. */
	animation-delay: calc(.12s + min(var(--edum-word-i, 0) * .055s, .5s));
}

@keyframes edum-word-up {
	from { transform: translateY(112%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

/* The highlight rule under <mark> already exists at the top of this file; here
   it draws itself, left to right, after the words it belongs to have landed. */
[data-edum-hero] .edum-hero__title mark::after {
	transform: scaleX(0);
	transform-origin: left;
}
[data-edum-hero] .edum-hero__copy.is-revealed .edum-hero__title mark::after {
	animation: edum-underline .68s .62s cubic-bezier(.2, .74, .28, 1) forwards;
}
@keyframes edum-underline { to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   The photograph

   Entrance is a clip-path wipe on the figure; the drift is a transform on the
   image. Two elements, because a wipe and a tilt on one element would be two
   animations fighting over one transform.
   -------------------------------------------------------------------------- */

[data-edum-hero] .edum-hero__visual[data-edum-reveal] .edum-hero__media {
	clip-path: inset(0 0 100% 0);
}

[data-edum-hero] .edum-hero__visual.is-revealed .edum-hero__media {
	animation: edum-wipe-up 1.05s .18s cubic-bezier(.22, .78, .26, 1) forwards;
}

@keyframes edum-wipe-up {
	from { clip-path: inset(0 0 100% 0); }
	to   { clip-path: inset(0 0 0 0); }
}

[data-edum-hero] .edum-hero__media img {
	transform: scale(1.1);
	transition: transform 1.4s cubic-bezier(.22, .78, .26, 1);
}

/* Settles to a scale just above 1, which is the headroom the pointer tilt
   moves within without exposing an edge of the crop. The shorter duration is
   for the tilt: once the entrance has run this transition is only ever
   tracking the pointer, and 1.4s of easing on that feels like lag. */
[data-edum-hero] .edum-hero__visual.is-revealed .edum-hero__media img {
	transform:
		scale(1.035)
		translate3d(calc(var(--edum-px, 0) * -10px), calc(var(--edum-py, 0) * -10px), 0);
	transition: transform .6s cubic-bezier(.22, .78, .26, 1);
}

/* A soft brand wash across the top of the crop, so the photograph joins the
   palette instead of sitting on it. */
.edum-hero__media { position: relative; }
.edum-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(200deg, color-mix(in srgb, var(--edum-navy, #004066) 20%, transparent) 0%, transparent 46%);
	mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   Proof card

   Entrance on opacity and clip so the perpetual float keeps the transform to
   itself. The float is 6px over 7s: present in peripheral vision, invisible if
   you look straight at it.
   -------------------------------------------------------------------------- */

[data-edum-hero] .edum-hero__proof {
	opacity: 0;
	clip-path: inset(0 100% 0 0 round 14px);
}

[data-edum-hero] .edum-hero__visual.is-revealed .edum-hero__proof {
	animation:
		edum-proof-in .8s .82s cubic-bezier(.2, .74, .28, 1) forwards,
		edum-float 7s 1.7s ease-in-out infinite;
}

[data-edum-hero] .edum-hero__route,
[data-edum-hero] .edum-hero__doc {
	opacity: 0;
	clip-path: inset(0 100% 0 0 round 14px);
}

[data-edum-hero] .edum-hero__visual.is-revealed .edum-hero__route {
	animation: edum-proof-in .72s .48s cubic-bezier(.2, .74, .28, 1) forwards;
}

[data-edum-hero] .edum-hero__visual.is-revealed .edum-hero__doc {
	animation: edum-proof-in .72s .68s cubic-bezier(.2, .74, .28, 1) forwards;
}

@keyframes edum-proof-in {
	from { opacity: 0; clip-path: inset(0 100% 0 0 round 14px); }
	to   { opacity: 1; clip-path: inset(0 0 0 0 round 14px); }
}

@keyframes edum-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(0, -6px, 0); }
}

/* --------------------------------------------------------------------------
   Buttons

   A sheen that crosses once on hover. Kept to the solid button: on the quiet
   button there is no fill for it to cross.
   -------------------------------------------------------------------------- */

.edum-hero__actions .edum-btn--solid {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.edum-hero__actions .edum-btn--solid::after {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 45%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
	transform: skewX(-18deg);
}
.edum-hero__actions .edum-btn--solid:hover::after,
.edum-hero__actions .edum-btn--solid:focus-visible::after {
	animation: edum-sheen .72s ease-out;
}
@keyframes edum-sheen {
	from { left: -60%; }
	to   { left: 130%; }
}

/* --------------------------------------------------------------------------
   Opt-outs

   Both of these have to restore the resting state explicitly. Cancelling the
   animation alone would leave the words at translateY(112%) and the proof card
   clipped to nothing.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.edum-hero__blob,
	.edum-hero__weave { animation: none; }

	[data-edum-hero] .edum-hero__copy > *,
	[data-edum-hero] .edum-hero__copy.is-revealed > *,
	[data-edum-hero] .edum-word__in,
	[data-edum-hero] .edum-hero__route,
	[data-edum-hero] .edum-hero__doc,
	[data-edum-hero] .edum-hero__proof,
	[data-edum-hero] .edum-hero__visual.is-revealed .edum-hero__proof {
		animation: none;
		opacity: 1;
		transform: none;
		clip-path: none;
	}

	[data-edum-hero] .edum-hero__eyebrow::before { transform: scaleX(1); }
	[data-edum-hero] .edum-hero__title mark::after { animation: none; transform: scaleX(1); }

	[data-edum-hero] .edum-hero__visual[data-edum-reveal] .edum-hero__media,
	[data-edum-hero] .edum-hero__visual.is-revealed .edum-hero__media {
		animation: none;
		clip-path: none;
	}

	[data-edum-hero] .edum-hero__media img,
	[data-edum-hero] .edum-hero__visual.is-revealed .edum-hero__media img {
		transform: none;
		transition: none;
	}

	.edum-hero__actions .edum-btn--solid::after { animation: none; }
}

.no-js [data-edum-hero] .edum-hero__copy > *,
.no-js [data-edum-hero] .edum-hero__route,
.no-js [data-edum-hero] .edum-hero__doc,
.no-js [data-edum-hero] .edum-hero__proof {
	opacity: 1;
	transform: none;
	clip-path: none;
}
.no-js [data-edum-hero] .edum-hero__visual .edum-hero__media { clip-path: none; }
.no-js [data-edum-hero] .edum-hero__media img { transform: none; }
.no-js [data-edum-hero] .edum-hero__eyebrow::before { transform: scaleX(1); }
.no-js [data-edum-hero] .edum-hero__title mark::after { transform: scaleX(1); }