/* =============================================================
   ERS International — design system
   Tokens lifted from the original Elementor build:
   ink #121212 · red #FF383C · white · body text at 70% ink
   Display: Base Neue Condensed Bold Oblique · Body: Inter
   ============================================================= */

@font-face {
	font-family: 'Base Neue';
	src: url('../fonts/BaseNeue-CondensedBoldOblique.woff2') format('woff2'),
		url('../fonts/BaseNeue-CondensedBoldOblique.woff') format('woff');
	font-weight: 700;
	font-style: oblique;
	font-display: swap;
}

:root {
	--ink: #121212;
	--ink-70: rgba(18, 18, 18, 0.7);
	--ink-40: rgba(18, 18, 18, 0.4);
	--red: #ff383c;
	--red-dark: #e02a2e;
	--paper: #ffffff;
	--paper-dim: #f4f4f4;
	--line: rgba(18, 18, 18, 0.12);
	--line-inverse: rgba(255, 255, 255, 0.16);
	/* namespaced: Elementor containers declare a variable of the same
	   unprefixed name for layout, which overwrote this font stack */
	--ersi-display: 'Base Neue', 'Arial Narrow', sans-serif;
	--body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
	--radius: 6px;
	--wrap: 1200px;
	--gutter: clamp(20px, 4vw, 48px);
	--section-y: clamp(64px, 9vw, 120px);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink-70);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { margin: 0 0 0.4em; color: var(--ink); line-height: 1.05; }
p { margin: 0 0 1em; }

h1, h2, .display {
	font-family: var(--ersi-display);
	font-style: oblique;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}
h1 { font-size: clamp(42px, 6.5vw, 84px); }
h2 { font-size: clamp(32px, 4.5vw, 56px); }
h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; }
h4 { font-size: 18px; font-weight: 700; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--dark { background: var(--ink); }
.section--dark :is(h1, h2, h3, h4) { color: var(--paper); }
.section--dark { color: rgba(255, 255, 255, 0.72); }
.section--dim { background: var(--paper-dim); }

.eyebrow {
	color: var(--red);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.section-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn svg { width: 14px; height: 14px; }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-dark); }
.btn--ghost { border: 1px solid var(--line-inverse); color: #fff; }
.btn--ghost:hover { border-color: var(--red); color: var(--red); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }

/* ---------- header account menu ---------- */
.account-menu { position: relative; }
.account-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	border: 1px solid var(--line-inverse);
	color: #fff;
	border-radius: 999px;
	padding: 5px 14px 5px 5px;
	font-family: var(--body);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}
.account-chip:hover, .account-menu.is-open .account-chip { border-color: var(--red); }
.account-chip__avatar {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--red);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
}
.account-chip__caret { width: 12px; height: 12px; transition: transform 0.2s; }
.account-menu.is-open .account-chip__caret { transform: rotate(180deg); }
.account-menu__panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	min-width: 232px;
	background: var(--ink);
	border: 1px solid var(--line-inverse);
	border-radius: var(--radius);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 60;
}
.account-menu.is-open .account-menu__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.account-menu__head {
	padding: 10px 12px 12px;
	border-bottom: 1px solid var(--line-inverse);
	margin-bottom: 6px;
	display: grid;
	gap: 2px;
}
.account-menu__hello { color: rgba(255, 255, 255, 0.5); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.account-menu__who { color: #fff; font-weight: 600; font-size: 14px; }
.account-menu__panel a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	font-weight: 500;
	border-radius: 4px;
	white-space: nowrap;
}
.account-menu__panel a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.account-menu__panel a svg { width: 16px; height: 16px; color: var(--red); flex-shrink: 0; }
.account-menu__logout { border-top: 1px solid var(--line-inverse); margin-top: 6px; }
.account-menu__logout:hover { color: var(--red); }
.account-login { padding: 11px 22px; gap: 8px; }

/* ---------- login lightbox ---------- */
.login-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s;
}
.login-modal.is-open { opacity: 1; visibility: visible; }
.login-modal__overlay { position: absolute; inset: 0; background: rgba(18, 18, 18, 0.74); backdrop-filter: blur(3px); }
.login-modal__card {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: var(--ink);
	border-radius: var(--radius);
	padding: 40px 40px 34px;
	color: rgba(255, 255, 255, 0.72);
	transform: translateY(12px);
	transition: transform 0.2s ease;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.login-modal.is-open .login-modal__card { transform: none; }
.login-modal__card h3 {
	color: #fff;
	font-family: var(--ersi-display);
	font-style: oblique;
	text-transform: uppercase;
	font-size: 30px;
	margin-bottom: 6px;
}
.login-modal__sub { font-size: 14px; margin-bottom: 22px; }
.login-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid var(--line-inverse);
	background: none;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.login-modal__close svg { width: 13px; height: 13px; }
.login-modal__close:hover { border-color: var(--red); color: var(--red); }
.login-modal form p { margin: 0 0 16px; }
.login-modal form label { display: block; color: rgba(255, 255, 255, 0.8); font-size: 13px; margin-bottom: 6px; }
.login-modal form .input,
.login-modal form input[type='text'],
.login-modal form input[type='password'] {
	width: 100%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--line-inverse);
	border-radius: var(--radius);
	color: #fff;
	padding: 12px 14px;
	font-size: 15px;
	font-family: var(--body);
}
.login-modal form input:focus { outline: none; border-color: var(--red); }
.login-modal .login-remember label { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 0; cursor: pointer; }
.login-modal .login-remember input { accent-color: var(--red); width: 15px; height: 15px; }
.login-modal .login-submit { margin-bottom: 0; }
.login-modal input[type='submit'] {
	width: 100%;
	background: var(--red);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 14px 32px;
	font-family: var(--body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s;
}
.login-modal input[type='submit']:hover { background: var(--red-dark); }
.login-modal__lost { display: block; text-align: center; margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.login-modal__lost:hover { color: var(--red); }

/* ---------- topbar ---------- */
.topbar { background: var(--red); color: #fff; font-size: 13px; }
.topbar .wrap { display: flex; align-items: center; gap: 26px; min-height: 42px; flex-wrap: wrap; }
.topbar a { color: #fff; }
.topbar a:hover { text-decoration: underline; }
.topbar__spacer { flex: 1; }
.topbar__item { display: inline-flex; align-items: center; gap: 7px; }
.topbar__item svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---------- header ---------- */
/* .site-top wraps topbar + header. On the front page it overlays the hero;
   on inner pages it stays in flow with a solid dark nav strip. */
.site-top { position: absolute; top: 0; left: 0; right: 0; z-index: 40; }
.admin-bar .site-top { top: 32px; }
/* Inner pages: relative + high z-index so the nav dropdown paints above
   page content (animated sections create their own stacking contexts). */
.site-top--solid { position: relative; z-index: 90; }
.admin-bar .site-top--solid { position: relative; top: auto; }
.site-top--solid .site-header { background: var(--ink); }
.site-header { background: transparent; }
.site-header .wrap { display: flex; align-items: center; gap: 32px; min-height: 100px; }
.brand img { height: 64px; width: auto; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
	color: #fff;
	font-weight: 500;
	font-size: 17px;
	padding: 12px 16px;
	border-radius: 4px;
}
.nav > ul { display: flex; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav > ul > li + li::before {
	content: '|';
	color: rgba(255, 255, 255, 0.25);
	margin: 0 4px;
}
.nav li { position: relative; display: flex; align-items: center; }
.nav li.current-menu-item > a, .nav a:hover { color: var(--red); }
/* down-caret on items that open a dropdown; flips up while open */
.nav li.menu-item-has-children > a { display: inline-flex; align-items: center; gap: 8px; }
.nav li.menu-item-has-children > a::after {
	content: '';
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
.nav li.menu-item-has-children:hover > a::after,
.nav li.menu-item-has-children:focus-within > a::after { margin-top: 4px; transform: rotate(225deg); }
.nav .sub-menu {
	z-index: 95;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 320px;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
	list-style: none;
	padding: 10px;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.nav li:hover > .sub-menu, .nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav .sub-menu a { color: var(--ink); display: block; padding: 10px 14px; font-size: 14px; }
.nav .sub-menu a:hover { background: var(--paper-dim); color: var(--red); }
.header-cta { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.header-cta__link { color: #fff; font-size: 14px; font-weight: 500; }
.header-cta__link:hover { color: var(--red); }

.nav-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: transform 0.2s, opacity 0.2s; }

/* ---------- hero ---------- */
.hero {
	position: relative;
	min-height: min(92vh, 900px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--ink);
	color: rgba(255, 255, 255, 0.82);
	overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img, .elementor .hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25); opacity: 0.6; }
.hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,18,18,0.55), rgba(18,18,18,0.35) 55%, var(--ink)); }
.hero__inner { position: relative; z-index: 2; max-width: 860px; padding: 160px var(--gutter) 90px; }
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero p { font-size: 17px; max-width: 560px; margin: 0 auto 34px; }
.hero__scroll {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	color: rgba(255, 255, 255, 0.6);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.hero__scroll:hover { color: #fff; }
.hero__scroll svg {
	width: 16px;
	height: 16px;
	color: var(--red);
	animation: hero-scroll-bob 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-bob {
	0%, 100% { transform: translateY(0); opacity: 1; }
	50% { transform: translateY(7px); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
	.hero__scroll svg { animation: none; }
}

/* ---------- course catalog (Explore Our Courses) ---------- */
.filter-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: clamp(28px, 4vw, 44px); }
.filter-pill {
	border: 1px solid var(--red);
	background: transparent;
	color: var(--red);
	border-radius: 999px;
	padding: 10px 20px;
	font-family: var(--body);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.filter-pill.is-active, .filter-pill:hover { background: var(--red); color: #fff; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.catalog-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s, box-shadow 0.2s;
}
.catalog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(18, 18, 18, 0.1); }
.catalog-card.is-hidden { display: none; }
.catalog-card__media { display: block; aspect-ratio: 16 / 10; background: var(--paper-dim); overflow: hidden; }
.catalog-card__media img, .elementor .catalog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.catalog-card__body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.catalog-card__body h3 { font-size: 20px; margin-bottom: 12px; }
.catalog-card__body h3 a:hover { color: var(--red); }
.catalog-card__meta { list-style: none; margin: 0 0 18px; padding: 0; font-size: 14px; display: grid; gap: 6px; }
.catalog-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- upcoming courses (list rows, per original) ---------- */
.course-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: center; margin-bottom: clamp(20px, 3vw, 32px); }
.course-sort__label {
	font-family: var(--body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(18, 18, 18, 0.55);
	margin-right: 4px;
}
.course-sort__btn {
	border: 1px solid var(--red);
	background: transparent;
	color: var(--red);
	border-radius: 999px;
	padding: 8px 18px;
	font-family: var(--body);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.course-sort__btn.is-active, .course-sort__btn:hover { background: var(--red); color: #fff; }
.course-list { border-top: 1px solid rgba(18, 18, 18, 0.14); }
.course-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 30px 0;
	border-bottom: 1px solid rgba(18, 18, 18, 0.14);
}
.course-row--extra { display: none; }
.course-row--extra.is-shown { display: flex; }
.course-row__title {
	font-family: var(--ersi-display);
	font-style: oblique;
	color: var(--red);
	font-size: clamp(22px, 2.4vw, 28px);
	margin-bottom: 10px;
}
.course-row__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font-size: 15px; color: var(--ink-70); }
.course-row__meta li + li::before { content: '|'; margin: 0 14px; color: rgba(18, 18, 18, 0.25); }
.course-row .btn { flex-shrink: 0; }
.course-list__more { text-align: center; margin-top: 34px; }
.load-more {
	background: var(--red);
	color: #fff;
	border: 0;
	padding: 12px 26px;
	font-family: var(--body);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s;
}
.load-more:hover { background: var(--red-dark); }

/* ---------- about label + rule ---------- */
.rule-head {
	border-bottom: 1px solid var(--ink);
	padding-bottom: 12px;
	margin-bottom: clamp(30px, 4vw, 48px);
}
.rule-head span { font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }

/* ---------- counter band (outlined numerals, per original) ---------- */
.counter-band {
	display: flex;
	align-items: center;
	gap: clamp(22px, 4vw, 48px);
	flex-wrap: wrap;
	margin-bottom: clamp(44px, 7vw, 90px);
}
.counter-band__number {
	font-family: var(--ersi-display);
	font-style: oblique;
	font-size: clamp(96px, 17vw, 230px);
	line-height: 0.85;
	color: transparent;
	-webkit-text-stroke: 3px var(--red);
	text-stroke: 3px var(--red);
}
.counter-band__label {
	max-width: 300px;
	color: var(--red);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.45;
}

/* ---------- photo bands ---------- */
.photo-band {
	position: relative;
	background-size: cover;
	background-position: center;
	padding: clamp(56px, 8vw, 110px) 0;
	margin-top: clamp(48px, 7vw, 96px);
}
.photo-band::before { content: ''; position: absolute; inset: 0; background: rgba(18, 18, 18, 0.55); }
.photo-band > .wrap { position: relative; }
.photo-band--red::before { background: rgba(255, 56, 60, 0.82); }
.photo-band--tall { margin-top: 0; padding: clamp(90px, 12vw, 160px) 0; }
.photo-band .stat-row { margin-top: 0; }
.cta-divider { width: 72px; border: 0; border-top: 3px solid var(--red); margin: 22px auto 22px; }
.photo-band--red .cta-divider { border-color: #fff; }
.photo-band .eyebrow { color: #fff; }
.photo-band--tall .eyebrow { color: var(--red); }

/* ---------- about / stats ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.about-blocks { display: grid; gap: 18px; }
.about-blocks h4 { margin-bottom: 4px; }
.about-blocks .mission { font-weight: 700; color: var(--ink); }
.label-italic { font-style: italic; font-family: var(--body); font-size: 17px; }
.lead-italic { font-style: italic; font-weight: 700; color: var(--ink); }

/* the dotted world-map band: animated canvas behind plain text columns */
.map-band {
	position: relative;
	overflow: hidden;
	background: var(--paper);
	padding: clamp(70px, 10vw, 140px) 0;
	margin-top: clamp(48px, 7vw, 96px);
	min-height: clamp(420px, 38vw, 600px);
	display: flex;
	align-items: center;
}
.map-band .wrap { position: relative; z-index: 2; width: 100%; }
.wdm__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); text-align: center; }
/* soft paper halo so red type stays crisp over the dots */
.stat { position: relative; padding: 8px 4px; }
.stat::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 150%;
	height: 230%;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center,
		rgba(255, 255, 255, 0.96) 0%,
		rgba(255, 255, 255, 0.9) 38%,
		rgba(255, 255, 255, 0.55) 62%,
		rgba(255, 255, 255, 0) 82%);
	z-index: -1;
	pointer-events: none;
}
.stat h3 {
	font-family: var(--ersi-display);
	font-style: oblique;
	text-transform: uppercase;
	color: var(--red);
	font-size: clamp(20px, 2vw, 26px);
	margin-bottom: 10px;
}
.stat p { margin: 0; font-size: 15px; color: var(--ink); }

/* ---------- training audience cards (gray, icon + logo) ---------- */
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.audience-card {
	background: #f2f2f2;
	border-radius: var(--radius);
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: box-shadow 0.2s, transform 0.2s;
}
.audience-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(18, 18, 18, 0.12); }
.audience-card__imgs { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.audience-card__icon, .elementor .audience-card__icon {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	object-fit: cover;
	border: 2px solid var(--line);
}
.audience-card__logo, .elementor .audience-card__logo { max-height: 34px; max-width: 110px; width: auto; object-fit: contain; }
.audience-card h4 { color: var(--ink); font-size: 20px; }
.audience-card p { font-size: 14px; margin: 0; }
.audience-card__tags { color: var(--red); font-size: 13px; font-weight: 600; margin-top: 10px; }
.audience-card .btn { margin-top: 18px; align-self: flex-start; }

/* ---------- programs (icon cards + promoted ERP panel) ---------- */
/* the grey block carries a whisper of the footer pentagon linework */
#programs {
	background-color: var(--paper-dim);
	background-image: url('../img/ers-pattern-light.svg');
	background-size: cover;
	background-position: left bottom;
	background-repeat: no-repeat;
}
.programs-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 60px); align-items: end; margin-bottom: clamp(30px, 4vw, 46px); }
.programs-head p { font-size: 16px; margin: 0; }
.programs-head__copy { display: flex; flex-direction: column; gap: 14px; }
.program-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-bottom: 22px; }
.program {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 30px 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.program:hover { transform: translateY(-3px); border-color: rgba(255, 56, 60, 0.4); box-shadow: 0 16px 38px rgba(18, 18, 18, 0.08); }
.program__icon {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: rgba(255, 56, 60, 0.09);
	color: var(--red);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.25s ease;
}
.program:hover .program__icon { background: rgba(255, 56, 60, 0.16); }
.program h4 { font-family: var(--ersi-display); font-style: oblique; text-transform: uppercase; font-size: 23px; margin: 0; }
.program p { font-size: 14px; margin: 0; flex: 1; }
.text-link { color: var(--red); font-weight: 600; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; margin-top: auto; }
.text-link:hover { text-decoration: underline; }

.erp-panel {
	background: var(--ink);
	border-radius: var(--radius);
	padding: clamp(30px, 4vw, 46px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: clamp(28px, 4vw, 48px);
	align-items: center;
}
.erp-panel__copy { display: flex; flex-direction: column; align-items: flex-start; }
.erp-panel__copy .eyebrow { margin-bottom: 12px; }
.erp-panel h3 { font-family: var(--ersi-display); font-style: oblique; text-transform: uppercase; font-size: clamp(26px, 3vw, 34px); color: #fff; margin: 0 0 12px; }
.erp-panel p { color: rgba(255, 255, 255, 0.72); font-size: 15px; margin: 0 0 22px; }
.erp-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.erp-points li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	border: 1px solid var(--line-inverse);
	border-radius: var(--radius);
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
}
.erp-points__tick { color: var(--red); display: flex; flex-shrink: 0; }

/* ---------- why choose (overlapping panel + icon rows) ---------- */
.why-layout { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.why-media { position: relative; padding-bottom: 54px; }
.why-media img, .elementor .why-media img { width: 100%; height: clamp(360px, 40vw, 470px); object-fit: cover; border-radius: var(--radius); display: block; }
.why-panel {
	position: absolute;
	right: -36px;
	bottom: 0;
	width: 330px;
	background: var(--ink);
	border-radius: var(--radius);
	padding: 30px 28px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	box-shadow: 0 24px 60px rgba(18, 18, 18, 0.28);
}
.why-panel h4 { font-family: var(--ersi-display); font-style: oblique; text-transform: uppercase; font-size: 24px; color: #fff; margin: 0; }
.why-panel p { color: rgba(255, 255, 255, 0.72); font-size: 14px; margin: 0; }
.why-panel .btn { margin-top: 4px; padding: 12px 22px; }

.why-rows { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.why-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); align-items: start; }
.why-row__icon {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: rgba(255, 56, 60, 0.09);
	color: var(--red);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.25s ease;
}
.why-row:hover .why-row__icon { background: rgba(255, 56, 60, 0.16); }
.why-row h4 { font-family: var(--ersi-display); font-style: oblique; text-transform: uppercase; font-size: 21px; margin: 0 0 6px; }
.why-row p { font-size: 14px; margin: 0; }

@media (max-width: 1024px) {
	.programs-head { grid-template-columns: 1fr; align-items: start; }
	.program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.erp-panel { grid-template-columns: 1fr; }
	.why-layout { grid-template-columns: 1fr; }
	.why-media { padding-bottom: 0; }
	.why-panel { position: static; width: 100%; margin-top: 18px; box-shadow: none; }
}
@media (max-width: 720px) {
	.program-grid { grid-template-columns: 1fr; }
}

/* ---------- staff directory table ---------- */
.table-wrapper { width: 100%; overflow-x: auto; }
.staff-table { width: 100%; border-collapse: collapse; min-width: 850px; }
.staff-table thead { background: rgba(255, 56, 60, 0.1); }
.staff-table thead th {
	padding: 26px 20px;
	text-align: left;
	color: var(--red);
	font-family: var(--ersi-display);
	font-style: oblique;
	font-size: 26px;
	line-height: 0.93;
	text-transform: uppercase;
}
.staff-table tbody tr { border-bottom: 1px solid var(--ink); }
.staff-table tbody td { padding: 28px 20px; color: var(--ink); font-size: 18px; }
.staff-table tbody td:nth-child(2) { color: var(--ink-70); }
.staff-table a:hover { color: var(--red); }

/* ---------- contact page ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.contact-info h2 { font-size: clamp(32px, 3.5vw, 44px); margin-bottom: 18px; }
.contact-info > p { font-size: 17px; margin-bottom: 0; }
.contact-rows { display: grid; gap: 28px; margin-top: 40px; }
.contact-row { display: flex; align-items: flex-start; gap: 18px; }
.contact-row__icon {
	width: 48px;
	height: 48px;
	border: 1px solid var(--line);
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--red);
}
.contact-row__icon svg { width: 20px; height: 20px; }
.contact-row__label {
	color: var(--red);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.contact-row__val { color: var(--ink); font-size: 17px; }
.contact-row__val a:hover { color: var(--red); }

.contact-card {
	background: var(--ink);
	border-radius: var(--radius);
	padding: 44px 44px 40px;
	color: rgba(255, 255, 255, 0.72);
}
.contact-card h3 {
	color: #fff;
	font-family: var(--ersi-display);
	font-style: oblique;
	text-transform: uppercase;
	font-size: 26px;
	margin-bottom: 16px;
}
/* placeholders do the labelling in the card; keep labels for screen readers */
.contact-card .gform_wrapper .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.contact-card .gform_wrapper .gfield_required,
.contact-card .gform_wrapper .gform_required_legend { display: none; }
.contact-card .gform_wrapper input:not([type='submit']),
.contact-card .gform_wrapper textarea { padding: 12px 14px; border-radius: var(--radius); font-size: 15px; }
.contact-card .gform_wrapper textarea { min-height: 130px; }
.contact-card .gform_fields { grid-column-gap: 18px; grid-row-gap: 18px; }
/* First/Last/Email/Phone share rows on GF's 12-col grid; Address stays a short textarea */
.contact-card #field_1_1, .contact-card #field_1_2,
.contact-card #field_1_3, .contact-card #field_1_4 { grid-column: span 6; }
.contact-card #field_1_5 textarea { min-height: 64px; height: 96px; }
.contact-card .gform_footer { display: flex; justify-content: center; }
@media (max-width: 900px) {
	.contact-layout { grid-template-columns: 1fr; }
	.contact-card { padding: 30px 24px; }
	.contact-card #field_1_1, .contact-card #field_1_2,
	.contact-card #field_1_3, .contact-card #field_1_4 { grid-column: span 12; }
}

/* ---------- contact form (dark section) ---------- */
.contact-form { max-width: 760px; margin: 0 auto; }
.contact-form .gform_wrapper input:not([type='submit']),
.contact-form .gform_wrapper textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--line-inverse);
	color: #fff;
}
.contact-form .gform_wrapper input::placeholder,
.contact-form .gform_wrapper textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
.contact-form .gform_wrapper label { color: rgba(255, 255, 255, 0.8); font-size: 13px; }
.contact-form .gform_footer { text-align: center; }

/* ---------- ERT stories (featured film + two) ---------- */
.story-lead { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: clamp(26px, 3vw, 40px); align-items: center; margin-bottom: 22px; }
.story-lead__copy { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.story-lead__tag {
	display: inline-block;
	background: var(--red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
}
.story-lead h3 { font-family: var(--ersi-display); font-style: oblique; text-transform: uppercase; font-size: clamp(28px, 3.4vw, 40px); margin: 0; }
.story-lead p { font-size: 16px; margin: 0; }

.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.story { display: flex; flex-direction: column; gap: 10px; }
.story h4 { font-family: var(--ersi-display); font-style: oblique; text-transform: uppercase; font-size: 21px; margin: 0; }
.story p { font-size: 14px; margin: 0; }

/* click-to-play tile: poster frame now, player only once pressed */
.story-tile {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--ink);
	cursor: pointer;
}
.story-tile img, .elementor .story-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease, opacity 0.3s ease; }
.story-tile::after { content: ''; position: absolute; inset: 0; background: rgba(18, 18, 18, 0.28); transition: background 0.3s ease; }
.story-tile:hover img { transform: scale(1.03); }
.story-tile:hover::after { background: rgba(18, 18, 18, 0.14); }
.story-tile__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 66px;
	height: 66px;
	border-radius: 999px;
	background: var(--red);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 30px rgba(18, 18, 18, 0.35);
	transition: transform 0.25s ease, background 0.25s ease;
}
.story-tile__play svg { width: 26px; height: 26px; margin-left: 2px; }
.story-tile:hover .story-tile__play { transform: translate(-50%, -50%) scale(1.08); background: var(--red-dark); }
.story-tile--lead .story-tile__play { width: 84px; height: 84px; }
.story-tile--lead .story-tile__play svg { width: 32px; height: 32px; }
.story-tile iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.story-tile.is-playing::after, .story-tile.is-playing .story-tile__play { display: none; }

@media (max-width: 900px) {
	.story-lead { grid-template-columns: 1fr; }
	.story-grid { grid-template-columns: 1fr; }
}

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 12px; }
.cta-band p { max-width: 520px; margin: 0 auto 30px; }

/* ---------- footer (photo bg, red slashed labels, chevron links) ---------- */
.site-footer {
	/* Branded "anchor" pattern (client SVG) — pentagon rings rising from the
	   bottom-left; dark base and scrims are baked into the artwork. */
	background-color: #080b0f;
	background-image: url('../img/ers-footer-bg.svg');
	background-size: cover;
	background-position: left bottom;
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
	position: relative;
}
.site-footer__scrim { padding-top: clamp(48px, 6vw, 80px); }
.site-footer a:hover { color: var(--red); }
.to-top {
	position: absolute;
	top: 44px;
	right: clamp(20px, 4vw, 60px);
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.to-top svg { width: 14px; height: 14px; }
.to-top:hover { border-color: var(--red); color: var(--red); }
.footer-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: clamp(28px, 5vw, 64px);
	padding-bottom: clamp(40px, 5vw, 64px);
}
.footer-grid h4 {
	color: var(--red);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.footer-links a { display: inline-flex; align-items: center; gap: 10px; }
.footer-links a::before {
	content: '';
	width: 7px;
	height: 7px;
	border-top: 2px solid var(--red);
	border-right: 2px solid var(--red);
	transform: rotate(45deg);
	flex-shrink: 0;
}
.footer-legal {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0 26px;
	flex-wrap: wrap;
	border-top: 1px solid var(--red);
	font-size: 13px;
}
.footer-legal .sep { margin: 0 8px; color: rgba(255, 255, 255, 0.3); }

/* ---------- reveals ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
	.audience-grid, .story-grid, .catalog-grid { grid-template-columns: repeat(2, 1fr); }
	.about-grid, .programs-grid, .why-layout { grid-template-columns: 1fr; }
	.why-media { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	.topbar__mail, .topbar .topbar__item:last-child { display: none; }
	.nav-toggle { display: block; }
	.nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--ink);
		padding: 12px var(--gutter) 24px;
	}
	.nav.is-open { display: block; }
	.nav > ul { flex-direction: column; align-items: stretch; }
	.nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; min-width: 0; padding-left: 16px; }
	.nav .sub-menu a { color: rgba(255, 255, 255, 0.75); }
	.header-cta { display: none; }
	.audience-grid, .story-grid, .why-grid, .program-grid, .stat-row, .footer-grid, .catalog-grid, .why-media { grid-template-columns: 1fr; }
	.course-row { flex-direction: column; text-align: center; gap: 16px; }
	.course-row__meta { justify-content: center; }
}

/* ---------- motion polish (1.5.0) ---------- */
html { scroll-behavior: smooth; }
.btn { transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s ease, box-shadow 0.2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(18, 18, 18, 0.16); }
.btn svg { transition: transform 0.2s ease; }
.btn:hover svg { transform: translateX(3px); }
.load-more, .course-sort__btn { transition: background 0.2s, color 0.2s, transform 0.2s ease; }
.load-more:hover, .course-sort__btn:hover { transform: translateY(-1px); }
.course-row { transition: background 0.25s ease; }
.course-row:hover { background: rgba(18, 18, 18, 0.03); }
.nav a { transition: color 0.2s ease; }
.footer-links a { transition: color 0.2s ease, transform 0.2s ease; }
.footer-links a:hover { transform: translateX(4px); }
.to-top { transition: border-color 0.2s, color 0.2s, transform 0.25s ease; }
.to-top:hover { transform: translateY(-4px); }
.contact-row__icon { transition: border-color 0.25s ease, transform 0.25s ease; }
.contact-row:hover .contact-row__icon { border-color: var(--red); transform: scale(1.06); }
@keyframes ersi-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}
.hero__inner > * { animation: ersi-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero__inner > *:nth-child(2) { animation-delay: 0.12s; }
.hero__inner > *:nth-child(3) { animation-delay: 0.24s; }
.hero__inner > *:nth-child(4) { animation-delay: 0.36s; }
.ld-hero .wrap { animation: ersi-rise 0.6s ease both; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.hero__inner > *, .ld-hero .wrap { animation: none; }
	.btn:hover, .to-top:hover, .footer-links a:hover, .contact-row:hover .contact-row__icon { transform: none; }
}

/* mobile nav extras: calendar + account links (desktop uses .header-cta) */
.nav__extras { display: none; }
@media (max-width: 720px) {
	.nav { z-index: 50; }
	.nav__extras {
		display: flex;
		flex-direction: column;
		gap: 2px;
		border-top: 1px solid var(--line-inverse);
		margin-top: 12px;
		padding-top: 12px;
	}
	.nav__extras a { color: #fff; font-weight: 500; font-size: 17px; padding: 10px 16px; border-radius: 4px; }
	.nav__extras a:hover { color: var(--red); }
	.hero__inner { padding-top: 120px; }
}

/* tighter top spacing for pages without a title header (calendar) */
.section--tight { padding-top: clamp(24px, 3.5vw, 48px); }

/* ---------- inner-page content (marketing site) ---------- */
.entry-content h2 {
	font-size: clamp(26px, 3vw, 40px);
	margin-top: clamp(28px, 4vw, 48px);
}
.entry-content h2:first-child { margin-top: 0; }
.entry-content h3 {
	font-family: var(--ersi-display);
	font-style: oblique;
	text-transform: uppercase;
	font-size: clamp(19px, 2vw, 24px);
	margin-top: 30px;
	color: var(--red);
}
.entry-content ul { padding-left: 22px; }
.entry-content li { margin-bottom: 6px; }
.entry-content .course-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.entry-content table th {
	background: var(--ink);
	color: #fff;
	text-align: left;
	padding: 12px 14px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
}
.entry-content table th:hover { color: var(--red); }
.entry-content table td { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.entry-content table tr:nth-child(even) td { background: var(--paper-dim); }
.page-calendar .entry-content { overflow-x: auto; }
@media (max-width: 860px) {
	.entry-content .course-cols { grid-template-columns: 1fr; }
}

/* keep header items on one line */
.nav a, .header-cta__link, .header-cta .btn { white-space: nowrap; }

/* Gravity Forms modern markup: its own theme CSS overrides our placeholder
   colour (dark-on-dark inside the contact card) and the button case. */
.contact-card .gform_wrapper input::placeholder,
.contact-card .gform_wrapper textarea::placeholder {
	color: rgba(255, 255, 255, 0.5) !important;
	opacity: 1;
}
.gform_wrapper .gform_button,
.gform_wrapper button.gform_button {
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	cursor: pointer;
}

/* ---------- portal login dropdown (logo + label rows) ---------- */
.nav .sub-menu .portal-link > a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
}
.portal-logo {
	flex: 0 0 44px;
	width: 44px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.portal-logo img, .elementor .portal-logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.portal-logo__blank {
	width: 22px;
	height: 22px;
	border-radius: 4px;
	background: rgba(18, 18, 18, 0.08);
}
.portal-label { flex: 1; line-height: 1.3; }
.nav .menu-item-has-children .sub-menu:has(.portal-link) { min-width: 340px; }
@media (max-width: 720px) {
	.portal-logo { flex-basis: 34px; width: 34px; height: 22px; }
	.portal-logo img { filter: brightness(0) invert(1); }
	.portal-logo__blank { background: rgba(255, 255, 255, 0.18); }
}

/* dropdown rows: hover highlight spans the full dropdown width */
.nav .sub-menu { padding: 8px 0; overflow: hidden; }
.nav .sub-menu a { padding: 10px 18px; }
.nav .sub-menu .portal-link > a { padding: 9px 18px; }
/* sub-menu rows are blocks (top-level .nav li is flex) so links fill the row */
.nav .sub-menu li { display: block; }
.nav .sub-menu li > a { width: 100%; }
/* team heading stays on one line where there's room */
.section-head--team { max-width: none; }
.section-head--team h2 { white-space: nowrap; }
@media (max-width: 900px) { .section-head--team h2 { white-space: normal; } }

/* ---------- mobile menu: scrollable panel + submenu accordions ---------- */
.nav__sub-toggle { display: none; }
@media (max-width: 720px) {
	/* the desktop pipe separators are noise in a stacked list */
	.nav > ul > li + li::before { content: none; }
	/* the panel scrolls inside the viewport instead of running off it */
	.nav {
		max-height: calc(100vh - 96px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding-bottom: 16px;
	}
	.nav > ul > li { display: block; position: relative; }
	.nav > ul > li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
	.nav a { display: block; padding: 15px 16px; font-size: 16px; }
	/* submenus collapse; the chevron button opens them */
	.nav li.menu-item-has-children > a { padding-right: 60px; }
	.nav li.menu-item-has-children > a::after { display: none; }
	.nav .sub-menu {
		display: none;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: rgba(255, 255, 255, 0.04);
		border-radius: var(--radius);
		min-width: 0;
		margin: 0 16px 12px;
		padding: 6px 0;
		overflow: visible;
	}
	.nav li.menu-item-has-children.is-open > .sub-menu { display: block; }
	.nav .sub-menu a { color: rgba(255, 255, 255, 0.82); font-size: 15px; padding: 12px 16px; }
	.nav .sub-menu a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
	.nav__sub-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 2px;
		right: 4px;
		width: 48px;
		height: 48px;
		background: none;
		border: 0;
		color: #fff;
		cursor: pointer;
		padding: 0;
	}
	.nav__sub-toggle svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
	.nav li.menu-item-has-children.is-open > .nav__sub-toggle svg { transform: rotate(180deg); }
}

/* ---------- touch-target sizing (phones/tablets) ---------- */
@media (max-width: 900px) {
	/* sort pills and small controls reach a comfortable tap size */
	.course-sort__btn { padding: 12px 22px; }
	.course-sort { gap: 12px; }
	/* footer + topbar links get real height without changing their look */
	.footer-links a { min-height: 44px; }
	.topbar__item { min-height: 40px; }
	/* the Blue Winds badge is its own flex pill — this touch-target rule
	   outranks it and would flatten it, so leave it out */
	.site-footer .footer-legal a:not(.bwm-badge) { display: inline-block; padding: 6px 0; }
	/* text links inside cards */
	.text-link, .story a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* team directory: a scrolling table on desktop, stacked cards on phones */
@media (max-width: 720px) {
	.table-wrapper { overflow-x: visible; }
	.staff-table { min-width: 0; display: block; }
	.staff-table thead { display: none; }
	.staff-table tbody, .staff-table tr, .staff-table td { display: block; width: 100%; }
	.staff-table tbody tr {
		background: #fff;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: 6px 4px 10px;
		margin-bottom: 14px;
	}
	.staff-table tbody td { padding: 8px 16px; border: 0; font-size: 16px; }
	.staff-table tbody td::before {
		content: attr(data-label);
		display: block;
		font-family: var(--body);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--red);
		margin-bottom: 2px;
	}
	.staff-table tbody td:first-child { font-family: var(--ersi-display); font-style: oblique; text-transform: uppercase; font-size: 20px; }
	.staff-table tbody td a { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ---------- tablet nav breakpoint: the header needs ~1000px to breathe,
   so tablets get the same panel treatment as phones ---------- */
@media (max-width: 980px) {
	.nav-toggle { display: block; margin-left: auto; }
	.header-cta { display: none; }
	.nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 50;
		background: var(--ink);
		padding: 12px var(--gutter) 24px;
		max-height: calc(100vh - 96px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
	.nav.is-open { display: block; }
	.nav > ul { flex-direction: column; align-items: stretch; }
	.nav > ul > li { display: block; position: relative; }
	.nav > ul > li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
	.nav > ul > li + li::before { content: none; }
	.nav a { display: block; padding: 15px 16px; font-size: 16px; }
	.nav li.menu-item-has-children > a { padding-right: 60px; }
	.nav li.menu-item-has-children > a::after { display: none; }
	.nav .sub-menu {
		display: none;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: rgba(255, 255, 255, 0.04);
		border-radius: var(--radius);
		min-width: 0;
		margin: 0 16px 12px;
		padding: 6px 0;
	}
	.nav li.menu-item-has-children.is-open > .sub-menu { display: block; }
	.nav .sub-menu a { color: rgba(255, 255, 255, 0.82); font-size: 15px; padding: 12px 16px; }
	.nav__sub-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 2px;
		right: 4px;
		width: 48px;
		height: 48px;
		background: none;
		border: 0;
		color: #fff;
		cursor: pointer;
		padding: 0;
	}
	.nav__sub-toggle svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
	.nav li.menu-item-has-children.is-open > .nav__sub-toggle svg { transform: rotate(180deg); }
	.nav__extras {
		display: flex;
		flex-direction: column;
		gap: 2px;
		border-top: 1px solid var(--line-inverse);
		margin-top: 12px;
		padding-top: 12px;
	}
	.nav__extras a { color: #fff; font-weight: 500; font-size: 16px; padding: 14px 16px; border-radius: 4px; }
}
/* the featured play button is proportionally large on a phone-width tile */
@media (max-width: 900px) {
	.story-tile--lead .story-tile__play { width: 62px; height: 62px; }
	.story-tile--lead .story-tile__play svg { width: 24px; height: 24px; }
}

/* ---------- Superior Ropeworks mark ---------- */
/* It is a round badge, not a wide wordmark: the shared logo slots are sized
   by height, which crushes a circular mark to an illegible dot. */
.audience-card__logo--badge, .elementor .audience-card__logo--badge { max-height: 58px; max-width: 58px; }
.portal-logo--badge, .elementor .portal-logo--badge { height: 40px; }
@media (max-width: 720px) {
	.portal-logo--badge { flex-basis: 34px; width: 34px; height: 34px; }
}

/* Elementor's stylesheet resets `.elementor img { height: auto }` at a
   specificity the plain class selectors above cannot beat, which flattened the
   hero photo and collapsed the card, story and section images to zero height.
   The selectors above are widened rather than duplicated so each size keeps a
   single source of truth. */