/* ==========================================================================
   NIMB EDU — main stylesheet
   Hand-written, no framework. Organised as: tokens, reset, layout,
   components, templates, utilities, responsive.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   ----------------------------------------------------------------------- */
:root {
	--ink: #10233b;
	--ink-soft: #4a5a70;
	--ink-faint: #6b7a8f;

	--brand: #123a6b;
	--brand-dark: #0c2a4e;
	--brand-light: #e8f0fa;
	--accent: #c8770f;
	--accent-light: #fdf3e3;

	--surface: #ffffff;
	--surface-alt: #f6f8fb;
	--line: #dde4ed;

	--ok: #1f7a4d;

	--radius: 10px;
	--radius-lg: 16px;
	--shadow-sm: 0 1px 2px rgba(16, 35, 59, .06), 0 1px 3px rgba(16, 35, 59, .08);
	--shadow-md: 0 4px 12px rgba(16, 35, 59, .08), 0 2px 4px rgba(16, 35, 59, .04);

	--wrap: 1180px;
	--wrap-narrow: 760px;
	--gap: 24px;

	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--surface);
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-dark); }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.2rem; }
p, ul, ol, table { margin: 0 0 1.1em; }

/* Visible focus everywhere — never removed, only styled. */
:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
	border-radius: 3px;
}

/* --------------------------------------------------------------------------
   3. Layout
   ----------------------------------------------------------------------- */
.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 20px;
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.site-content { display: block; }

.section { padding: 64px 0; }
.section--courses { background: var(--surface-alt); }
.section--usp { background: var(--surface); }
.section--partners { background: var(--surface-alt); border-top: 1px solid var(--line); }
.section--visit { background: var(--brand-light); }

.section__head { max-width: 62ch; margin-bottom: 2.2em; }
.section__head .section__heading { margin-bottom: .35em; }
.section__heading {
	font-size: clamp(1.4rem, 3vw, 1.85rem);
	margin-bottom: 1.1em;
	letter-spacing: -.02em;
}
.section__heading--center { text-align: center; margin-inline: auto; }
.section__lead { color: var(--ink-soft); font-size: 1.03rem; margin: 0; }
.section__more { margin-top: 32px; }

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

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--brand); color: #fff; padding: 12px 18px;
}
.skip-link:focus {
	left: 8px; top: 8px; width: auto; height: auto;
	clip: auto; color: #fff;
}

/* --------------------------------------------------------------------------
   4. Header
   ----------------------------------------------------------------------- */
.topbar {
	background: var(--brand-dark);
	color: #dce7f5;
	font-size: .85rem;
}
.topbar__inner {
	display: flex;
	justify-content: flex-end;
	gap: 20px;
	padding-block: 7px;
}
.topbar__item { color: #dce7f5; text-decoration: none; }
.topbar__item:hover { color: #fff; text-decoration: underline; }
.topbar__item--phone { font-weight: 600; }

.site-header {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 40;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	padding-block: 14px;
}

.site-branding .custom-logo { max-height: 56px; width: auto; }
.site-title {
	font-size: 1.4rem;
	margin: 0;
	letter-spacing: -.02em;
}
.site-title a { color: var(--brand); text-decoration: none; }
.site-description {
	margin: 2px 0 0;
	font-size: .82rem;
	color: var(--ink-faint);
}

.primary-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-nav__list a {
	display: block;
	padding: 9px 14px;
	border-radius: var(--radius);
	color: var(--ink);
	text-decoration: none;
	font-weight: 500;
	font-size: .96rem;
}
.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a {
	background: var(--brand-light);
	color: var(--brand-dark);
}

/* Sub-menus */
.primary-nav__list li { position: relative; }
.primary-nav__list .sub-menu {
	position: absolute;
	top: 100%; left: 0;
	min-width: 240px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	list-style: none;
	margin: 0; padding: 6px;
	display: none;
	z-index: 50;
}
.primary-nav__list li:hover > .sub-menu,
.primary-nav__list li:focus-within > .sub-menu { display: block; }

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px; height: 44px;
	padding: 0 10px;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
}
.nav-toggle__bar {
	display: block;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   5. Breadcrumbs
   ----------------------------------------------------------------------- */
.breadcrumbs {
	background: var(--surface-alt);
	border-bottom: 1px solid var(--line);
	font-size: .85rem;
}
.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0; padding: 10px 0;
}
.breadcrumbs li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--ink-faint);
}
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   6. Buttons
   ----------------------------------------------------------------------- */
.btn {
	display: inline-block;
	padding: 12px 22px;
	border-radius: var(--radius);
	font-weight: 600;
	font-size: .97rem;
	text-decoration: none;
	text-align: center;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--brand); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--brand); background: var(--brand-light); }
.btn--block { display: block; width: 100%; margin-bottom: 10px; }

/* Accent: the single highest-intent action on a screen (enquire, call). */
.btn--accent {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
	box-shadow: 0 2px 10px rgba(200, 119, 15, .28);
}
.btn--accent:hover {
	background: #ab6509;
	border-color: #ab6509;
	color: #fff;
	box-shadow: 0 4px 14px rgba(200, 119, 15, .34);
}

/* Glass: a secondary action sitting on a photo or dark gradient. */
.btn--glass {
	background: rgba(255, 255, 255, .13);
	color: #fff;
	border-color: rgba(255, 255, 255, .45);
	backdrop-filter: blur(6px);
}
.btn--glass:hover {
	background: rgba(255, 255, 255, .24);
	border-color: #fff;
	color: #fff;
}

.btn--lg { padding: 15px 30px; font-size: 1.02rem; }

/* --------------------------------------------------------------------------
   7. Hero
   ----------------------------------------------------------------------- */
.hero {
	position: relative;
	isolation: isolate;
	background: linear-gradient(155deg, var(--brand-dark) 0%, var(--brand) 55%, #1c5a9e 100%);
	color: #fff;
	padding: 88px 0 96px;
	overflow: hidden;
}

/* Soft light shape, purely decorative, adds depth behind the text. */
.hero::after {
	content: "";
	position: absolute;
	inset: auto -10% -55% auto;
	width: 620px; height: 620px;
	background: radial-gradient(circle, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 68%);
	z-index: -1;
	pointer-events: none;
}

/* An <img>, so it needs object-fit where it used to need background-size.
   Sitting at inset:0 with explicit 100% sizing means the intrinsic dimensions
   never influence layout, so swapping a 3:2 photo for the 16:9 SVG artwork
   moves nothing and contributes no CLS. */
.hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: -3;
}
.hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(155deg, var(--brand-dark) 0%, var(--brand) 100%);
	z-index: -2;
}

.hero__content { max-width: 46rem; }

.hero__eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	padding: 6px 14px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .03em;
	backdrop-filter: blur(4px);
}

.hero__title {
	font-size: clamp(2rem, 5vw, 3.15rem);
	line-height: 1.12;
	margin-bottom: .3em;
	color: #fff;
	letter-spacing: -.025em;
	text-wrap: balance;
}
.hero__sub {
	font-size: clamp(1rem, 2vw, 1.18rem);
	max-width: 56ch;
	color: #dbe7f6;
	margin-bottom: 1.7em;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   7b. Stats strip
   ----------------------------------------------------------------------- */
.stats-strip {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	margin-top: -34px;
	position: relative;
	z-index: 5;
}
.stats-strip__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 2px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	padding: 0;
}
.stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 24px 20px;
	text-align: center;
	border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat__value {
	font-size: 1.9rem;
	font-weight: 800;
	color: var(--brand);
	line-height: 1;
	letter-spacing: -.02em;
}
.stat__label {
	font-size: .84rem;
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* --------------------------------------------------------------------------
   7c. Why choose us
   ----------------------------------------------------------------------- */
.usp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--gap);
}
.usp-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 28px 24px;
	text-align: center;
	box-shadow: var(--shadow-sm);
	transition: box-shadow .18s ease, transform .18s ease;
}
.usp-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.usp-card__icon {
	width: 68px; height: 68px;
	margin: 0 auto 16px;
	display: grid;
	place-items: center;
	background: var(--brand-light);
	border-radius: 50%;
	overflow: hidden;
}
/* The slot holds an inline SVG now, not a photograph. currentColor on the
   wrapper is what tints it, so the icon picks up the brand colour without
   every path in icons.php having to name it. */
.usp-card__icon { color: var(--brand); }
.usp-card__icon svg { width: 34px; height: 34px; display: block; }
.usp-card__title { font-size: 1.08rem; margin-bottom: .45em; color: var(--brand-dark); }
.usp-card__text { font-size: .93rem; color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------------------
   7d. Testimonials
   ----------------------------------------------------------------------- */
.section--testimonials { background: var(--surface-alt); }
.testimonial-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: var(--gap);
}
.testimonial {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 28px 24px 22px;
	margin: 0;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.testimonial__quote {
	margin: 0;
	color: var(--ink-soft);
	font-size: .97rem;
	position: relative;
	padding-top: 26px;
	flex: 1 1 auto;
}
.testimonial__quote::before {
	content: "\201C";
	position: absolute;
	top: -8px; left: -2px;
	font-size: 3.4rem;
	line-height: 1;
	color: var(--brand-light);
	font-family: Georgia, serif;
}
.testimonial__quote p:last-child { margin-bottom: 0; }
.testimonial__person {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}
.testimonial__avatar img {
	width: 52px; height: 52px;
	border-radius: 50%;
	object-fit: cover;
}
.testimonial__meta { display: flex; flex-direction: column; line-height: 1.4; }
.testimonial__name { font-weight: 700; }
.testimonial__course { font-size: .85rem; color: var(--brand); }
.testimonial__outcome { font-size: .85rem; color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   7e. Hiring partners
   ----------------------------------------------------------------------- */
.partner-strip {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 18px;
	align-items: center;
}
.partner-strip__item {
	display: grid;
	place-items: center;
	padding: 18px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	min-height: 92px;
}
.partner-strip__item img {
	max-height: 46px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .72;
	transition: filter .2s ease, opacity .2s ease;
}
.partner-strip__item:hover img { filter: grayscale(0); opacity: 1; }
.partner-strip__name { font-weight: 600; color: var(--ink-soft); font-size: .92rem; text-align: center; }

/* --------------------------------------------------------------------------
   8. Course cards
   ----------------------------------------------------------------------- */
.course-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: var(--gap);
}

.course-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow .18s ease, transform .18s ease;
}
.course-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.course-card__link { display: block; color: inherit; text-decoration: none; height: 100%; }
.course-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--surface-alt);
}
.course-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.course-card:hover .course-card__media img { transform: scale(1.04); }

/* Lettered tile shown until a real course image is uploaded. */
.course-card__media--empty {
	background: linear-gradient(150deg, var(--brand) 0%, var(--brand-dark) 100%);
	display: grid;
	place-items: center;
}
.course-card__placeholder {
	font-size: 3.4rem;
	font-weight: 800;
	color: rgba(255, 255, 255, .32);
	line-height: 1;
}

/* Fee badge over the image — the number a student looks for first. */
.course-card__badge {
	position: absolute;
	left: 14px; bottom: 14px;
	background: rgba(255, 255, 255, .96);
	color: var(--brand-dark);
	font-weight: 700;
	font-size: .92rem;
	padding: 6px 13px;
	border-radius: 999px;
	box-shadow: var(--shadow-sm);
}
.course-card__body { padding: 20px; }
.course-card__title { font-size: 1.13rem; margin-bottom: .4em; color: var(--brand-dark); }
.course-card__excerpt { font-size: .93rem; color: var(--ink-soft); margin-bottom: 1em; }

.course-card__meta {
	list-style: none;
	margin: 0 0 14px;
	padding: 12px 0 0;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	font-size: .88rem;
}
.course-card__meta-label {
	display: block;
	color: var(--ink-faint);
	font-size: .76rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.course-card__cta { font-weight: 600; font-size: .92rem; color: var(--brand); }

/* --------------------------------------------------------------------------
   9. Single course
   ----------------------------------------------------------------------- */
.course-hero {
	position: relative;
	background: linear-gradient(150deg, var(--brand-dark) 0%, var(--brand) 100%);
	color: #fff;
	padding: 56px 0 60px;
	overflow: hidden;
}
.course-hero::after {
	content: "";
	position: absolute;
	inset: auto -8% -60% auto;
	width: 520px; height: 520px;
	background: radial-gradient(circle, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 70%);
	pointer-events: none;
}
.course-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 48px;
	align-items: center;
}
.course-hero__eyebrow { margin: 0 0 10px; font-size: .88rem; }
.course-hero__eyebrow a {
	color: #b9d2ee;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .8rem;
}
.course-hero__eyebrow a:hover { color: #fff; text-decoration: underline; }

.course-hero__title {
	font-size: clamp(1.7rem, 4vw, 2.5rem);
	color: #fff;
	letter-spacing: -.02em;
	line-height: 1.15;
	text-wrap: balance;
}
.course-hero__excerpt { font-size: 1.05rem; color: #d8e5f4; max-width: 52ch; }

.course-hero__facts {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 36px;
	margin: 24px 0;
	padding: 18px 0;
	border-block: 1px solid rgba(255, 255, 255, .22);
}
.course-hero__fact-label {
	display: block;
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #a8c4e4;
	margin-bottom: 2px;
}
.course-hero__fact-value { font-weight: 700; font-size: 1.12rem; color: #fff; }
.course-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.course-hero__media img {
	border-radius: var(--radius-lg);
	box-shadow: 0 12px 34px rgba(6, 20, 38, .38);
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.course-hero__media--empty {
	background: rgba(255, 255, 255, .08);
	border: 1px dashed rgba(255, 255, 255, .35);
	border-radius: var(--radius-lg);
	padding: 28px;
	text-align: center;
	font-size: .9rem;
	color: #d8e5f4;
}
.course-hero__media--empty a { color: #fff; }

/* --- E-E-A-T byline and sources --------------------------------------- */
.eeat-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 20px;
	padding: 14px 18px;
	margin-bottom: 32px;
	background: var(--surface-alt);
	border-left: 3px solid var(--brand);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: .88rem;
}
.eeat-byline p { margin: 0; }
.eeat-byline__label {
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: .74rem;
	color: var(--ink-faint);
	margin-right: 4px;
}
.eeat-byline__creds { color: var(--ink-soft); }
.eeat-byline__date { color: var(--ink-faint); }
.eeat-byline__updated { color: var(--ink-faint); }

.sources { margin-top: 40px; }
.sources__heading { font-size: 1.2rem; margin-bottom: .5em; }
.sources__note {
	font-size: .88rem;
	color: var(--ink-soft);
	margin-bottom: 1em;
}
.sources__list {
	padding-left: 1.3em;
	font-size: .9rem;
	color: var(--ink-soft);
}
.sources__list li { margin-bottom: .4em; }

/* --- Syllabus --------------------------------------------------------- */
.syllabus { margin-bottom: 44px; }
.syllabus__heading { font-size: 1.5rem; margin-bottom: 1em; }
.syllabus__list { list-style: none; margin: 0; padding: 0; counter-reset: mod; }
.syllabus__item {
	display: flex;
	gap: 18px;
	padding: 20px;
	margin-bottom: 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	transition: border-color .18s ease, box-shadow .18s ease;
}
.syllabus__item:hover { border-color: #bcd3ec; box-shadow: var(--shadow-sm); }
.syllabus__num {
	flex: 0 0 auto;
	width: 42px; height: 42px;
	display: grid;
	place-items: center;
	background: var(--brand-light);
	color: var(--brand);
	font-weight: 800;
	font-size: .95rem;
	border-radius: 10px;
}
.syllabus__body { min-width: 0; }
.syllabus__title { font-size: 1.05rem; margin-bottom: .25em; color: var(--brand-dark); }
.syllabus__detail { margin: 0; color: var(--ink-soft); font-size: .94rem; }

.course-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 48px;
	padding-block: 48px;
	align-items: start;
}
.course-sidebar__sticky { position: sticky; top: 96px; }

/* Details table */
.course-details {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 22px;
	margin-bottom: 22px;
	box-shadow: var(--shadow-sm);
}
.course-details__title { font-size: 1.1rem; margin-bottom: .8em; }
.course-details__table { width: 100%; border-collapse: collapse; font-size: .93rem; margin: 0; }
.course-details__table th,
.course-details__table td {
	text-align: left;
	vertical-align: top;
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
}
.course-details__table th { width: 42%; color: var(--ink-faint); font-weight: 600; padding-right: 12px; }
.course-details__table tr:last-child th,
.course-details__table tr:last-child td { border-bottom: 0; }
.course-details__note {
	margin: 14px 0 0;
	font-size: .88rem;
	color: var(--ink-soft);
	background: var(--accent-light);
	border-left: 3px solid var(--accent);
	padding: 10px 12px;
	border-radius: 0 var(--radius) var(--radius) 0;
}

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 22px;
	margin-bottom: 22px;
	box-shadow: var(--shadow-sm);
}
.card__title { font-size: 1.05rem; margin-bottom: .6em; }
.card--placement { border-left: 4px solid var(--ok); }
.card--enquiry { background: var(--brand-light); border-color: #c9dcf2; }

/* Instructor, FAQs, locations */
.instructor, .faqs, .course-locations { margin-top: 40px; }
.instructor {
	background: var(--surface-alt);
	border-radius: var(--radius-lg);
	padding: 24px;
}
.instructor__name { font-weight: 700; font-size: 1.1rem; margin-bottom: .2em; }
.instructor__creds { color: var(--ink-soft); margin: 0; }

.faq {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: 10px;
	background: var(--surface);
}
.faq__q {
	cursor: pointer;
	padding: 14px 18px;
	font-weight: 600;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; font-size: 1.3rem; color: var(--brand); line-height: 1; }
.faq[open] .faq__q::after { content: "–"; }
.faq__a { padding: 0 18px 16px; color: var(--ink-soft); }

.course-locations__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
}
.course-locations__list a,
.area-list a {
	display: inline-block;
	padding: 8px 15px;
	background: var(--brand-light);
	border-radius: 999px;
	font-size: .9rem;
	text-decoration: none;
	color: var(--brand-dark);
}
.course-locations__list a:hover,
.area-list a:hover { background: #d7e6f8; }

.area-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; }

.area-cta {
	margin: 48px 0;
	padding: 32px;
	background: var(--brand-light);
	border-radius: var(--radius-lg);
	text-align: center;
}
.area-cta__heading { margin-bottom: .4em; }

.related { background: var(--surface-alt); padding: 56px 0; border-top: 1px solid var(--line); }
.related__heading { margin-bottom: 1.2em; }

/* Visit / contact band */
.visit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}
.visit__text { flex: 1 1 320px; }
.visit__text .section__heading { margin-bottom: .5em; }
.visit__address {
	font-style: normal;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--brand-dark);
	margin-bottom: 6px;
}
.visit__hours { color: var(--ink-soft); margin: 0; }
.visit__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.card__text { color: var(--ink-soft); font-size: .93rem; }
.card__note {
	margin: 12px 0 0;
	font-size: .84rem;
	color: var(--ink-faint);
	text-align: center;
}

/* --------------------------------------------------------------------------
   10. Generic pages, posts, editor content
   ----------------------------------------------------------------------- */
.page-head { padding-block: 40px 20px; }
.page-head__title { margin-bottom: .3em; }
.page-head__intro { color: var(--ink-soft); font-size: 1.05rem; max-width: 70ch; }
.page-head__meta { color: var(--ink-faint); font-size: .9rem; }
.page-head__updated { margin-left: 12px; }
.page-head__address { font-style: normal; color: var(--ink-soft); margin-top: 12px; }

.page-single, .post-single { padding-bottom: 56px; }
.page-single__media, .post-single__media { margin: 0 0 28px; border-radius: var(--radius-lg); overflow: hidden; }

.entry-content h2 { margin-top: 1.6em; }
.entry-content h3 { margin-top: 1.4em; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: .4em; }
.entry-content img { border-radius: var(--radius); }
.entry-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.entry-content th { background: var(--surface-alt); }
.entry-content blockquote {
	margin: 1.5em 0;
	padding: 4px 20px;
	border-left: 4px solid var(--brand);
	color: var(--ink-soft);
	font-style: italic;
}

.post-list { display: grid; gap: 28px; padding-bottom: 48px; }
.post-summary {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--line);
}
.post-summary:last-child { border-bottom: 0; }
.post-summary__media img { border-radius: var(--radius); aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.post-summary__title { font-size: 1.25rem; margin-bottom: .3em; }
.post-summary__title a { color: var(--brand-dark); text-decoration: none; }
.post-summary__title a:hover { text-decoration: underline; }
.post-summary__meta { color: var(--ink-faint); font-size: .85rem; margin-bottom: .5em; }
.post-summary__excerpt { color: var(--ink-soft); font-size: .95rem; margin: 0; }

.no-results { padding: 40px 0; color: var(--ink-soft); }

/* Pagination */
.pagination { padding: 32px 0 56px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
	display: inline-block;
	padding: 9px 15px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--ink);
}
.pagination .page-numbers.current { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Editor-only notice — never shown to visitors. */
.editor-notice {
	background: var(--accent-light);
	border: 1px dashed var(--accent);
	border-radius: var(--radius);
	padding: 14px 18px;
	margin: 16px 0;
	font-size: .92rem;
	color: #6b4708;
}
.editor-notice p { margin: 0; }

/* --------------------------------------------------------------------------
   11. Footer
   ----------------------------------------------------------------------- */
.site-footer { background: var(--brand-dark); color: #c6d6ea; margin-top: 0; }
.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px;
	padding-block: 52px;
}
.site-footer__heading { color: #fff; font-size: 1.02rem; margin-bottom: .9em; }
.site-footer__legal { font-size: .88rem; color: #9fb5d0; }
.site-footer__address { font-style: normal; margin-bottom: 12px; font-size: .93rem; }
.site-footer__contact, .site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__contact li, .site-footer__list li { margin-bottom: 8px; }
.site-footer a { color: #c6d6ea; text-decoration: none; font-size: .93rem; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__hours { font-size: .88rem; color: #9fb5d0; margin-top: 12px; }
.site-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-block: 18px;
	font-size: .85rem;
}
.site-footer__bar p { margin: 0; }

/* Fixed action bar on course pages (mobile) — the enquiry route is always
   one tap away, which is where course-page enquiries actually come from. */
.mobile-bar {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 60;
	background: var(--surface);
	border-top: 1px solid var(--line);
	box-shadow: 0 -3px 14px rgba(16, 35, 59, .12);
	padding: 10px 12px;
	gap: 10px;
}
.mobile-bar a {
	flex: 1 1 0;
	text-align: center;
	padding: 13px 10px;
	border-radius: var(--radius);
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
}
.mobile-bar__call { background: var(--accent); color: #fff; }
.mobile-bar__enquire { background: var(--brand); color: #fff; }

/* Floating call button — mobile only. */
.call-fab {
	display: none;
	position: fixed;
	left: 16px; right: 16px; bottom: 16px;
	z-index: 60;
	background: var(--accent);
	color: #fff;
	text-align: center;
	padding: 14px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   12. Responsive
   ----------------------------------------------------------------------- */
@media (max-width: 1020px) {
	.course-layout { grid-template-columns: 1fr; gap: 32px; }
	.course-sidebar__sticky { position: static; }
	/* Sidebar cards read better side by side once they are full width. */
	.course-sidebar__sticky {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 20px;
		align-items: start;
	}
	.course-details, .card { margin-bottom: 0; }
}

@media (max-width: 860px) {
	.nav-toggle { display: flex; }

	.primary-nav {
		display: none;
		position: absolute;
		left: 0; right: 0;
		top: 100%;
		background: var(--surface);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow-md);
		padding: 10px 20px 18px;
	}
	.site-header__inner { position: relative; flex-wrap: wrap; }
	.primary-nav.is-open { display: block; }
	.primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.primary-nav__list a { padding: 12px 8px; border-bottom: 1px solid var(--line); border-radius: 0; }
	.primary-nav__list .sub-menu {
		position: static;
		display: block;
		border: 0;
		box-shadow: none;
		padding: 0 0 0 16px;
	}

	.hero { padding: 56px 0 64px; }

	.stats-strip { margin-top: -22px; }
	.stat { padding: 18px 14px; }
	.stat__value { font-size: 1.5rem; }

	.course-hero { padding: 40px 0 44px; }
	.course-hero__inner { grid-template-columns: 1fr; gap: 26px; }
	.course-hero__media { order: -1; }

	.post-summary { grid-template-columns: 1fr; }

	h1 { font-size: 1.75rem; }
	h2 { font-size: 1.35rem; }
}

@media (max-width: 620px) {
	body { font-size: 16px; }
	.section { padding: 44px 0; }
	.course-grid { grid-template-columns: 1fr; }
	.topbar__inner { justify-content: center; gap: 14px; font-size: .8rem; }
	.hero__actions .btn, .course-hero__actions .btn { flex: 1 1 100%; }

	.stats-strip__inner { grid-template-columns: repeat(2, 1fr); }
	.stat { border-right: 0; border-bottom: 1px solid var(--line); }
	.stat:nth-child(odd) { border-right: 1px solid var(--line); }
	.stat:nth-last-child(-n+2) { border-bottom: 0; }

	.syllabus__item { padding: 16px; gap: 14px; }
	.syllabus__num { width: 34px; height: 34px; font-size: .85rem; }

	.visit { flex-direction: column; align-items: flex-start; gap: 22px; }

	.call-fab { display: block; }
	.mobile-bar { display: flex; }

	/* Only one fixed element at a time: course pages use the richer bar. */
	.single-course .call-fab { display: none; }

	/* Both of these are position:fixed, so they sit on top of whatever the page
	   ends with. On the thank-you page that was the brochure download - the one
	   button the page exists to offer, hidden behind a floating one. It is the
	   last thing on every other page too; nobody had noticed because the last
	   thing is usually a footer nobody reads.

	   Reserving the space is the fix rather than hiding the bar: the bar is
	   doing its job, it just should not be doing it on top of something. */
	body { padding-bottom: 84px; }

	/* Keep fixed elements from covering the footer's last line. */
	.site-footer__bar { padding-bottom: 84px; }
}

/* --------------------------------------------------------------------------
   13. Preferences
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

@media print {
	.topbar, .site-header, .breadcrumbs, .call-fab, .site-footer, .related { display: none; }
	body { font-size: 12pt; }
}

/* --- Admission boilerplate ------------------------------------------- */
.admission-note {
	margin-top: 40px;
	padding: 22px 24px;
	background: var(--surface-alt);
	border-radius: var(--radius-lg);
}
.admission-note__heading { font-size: 1.2rem; margin-bottom: .6em; }
.admission-note p { color: var(--ink-soft); font-size: .95rem; }
.admission-note p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Visual course components
   ----------------------------------------------------------------------- */
.nimb-icon { display: block; }

/* Highlights strip — the facts, scannable, straddling the hero edge. */
.highlights { margin: -34px 0 8px; position: relative; z-index: 5; }
.highlights__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
}
.highlight {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 20px 18px;
	background: var(--surface);
}
.highlight__icon {
	color: var(--brand);
	background: var(--brand-light);
	width: 40px; height: 40px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	margin-bottom: 4px;
}
.highlight__label {
	font-size: .73rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ink-faint);
	font-weight: 600;
}
.highlight__value { font-weight: 700; font-size: 1rem; color: var(--brand-dark); line-height: 1.35; }

/* Software badges */
.tools { margin: 0 0 40px; }
.tools__heading { font-size: 1.3rem; margin-bottom: .7em; }
.tools__list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.tool {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-weight: 600;
	font-size: .93rem;
	color: var(--brand-dark);
	box-shadow: var(--shadow-sm);
}
.tool__icon { color: var(--accent); display: grid; place-items: center; }
.tools__note { font-size: .88rem; color: var(--ink-faint); margin: 0; }

/* Why-study cards on the course page */
.why-cards { margin: 44px 0; }
.why-cards__heading { font-size: 1.4rem; margin-bottom: 1em; }
.why-cards__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
}
.why-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 22px 20px;
	box-shadow: var(--shadow-sm);
	transition: box-shadow .18s ease, transform .18s ease;
}
.why-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.why-card__icon {
	color: #fff;
	background: linear-gradient(140deg, var(--brand) 0%, var(--brand-dark) 100%);
	width: 44px; height: 44px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	margin-bottom: 14px;
}
.why-card__title { font-size: 1rem; margin-bottom: .4em; color: var(--brand-dark); }
.why-card__text { font-size: .9rem; color: var(--ink-soft); margin: 0; }

@media (max-width: 620px) {
	.highlights { margin-top: -20px; }
	.highlights__grid { grid-template-columns: repeat(2, 1fr); }
	.highlight { padding: 16px 14px; }
}

/* --------------------------------------------------------------------------
   15. Colour system for cards and sections
   -----------------------------------------------------------------------
   The card components were monochrome navy on white, which reads flat next to
   competitors using tinted bands and coloured icons. These add colour without
   abandoning the palette: six accent hues, each used as a tinted tile with a
   matching icon, rotating across cards so a grid never repeats a colour.
   ----------------------------------------------------------------------- */
:root {
	--c1: #1c5a9e;  --c1-bg: #e7f0fa;   /* blue    */
	--c2: #c8770f;  --c2-bg: #fdf1de;   /* amber   */
	--c3: #1f7a4d;  --c3-bg: #e4f4ec;   /* green   */
	--c4: #7b3fa8;  --c4-bg: #f2e9fa;   /* purple  */
	--c5: #c0392b;  --c5-bg: #fbeae8;   /* red     */
	--c6: #0e7c86;  --c6-bg: #e2f4f5;   /* teal    */
}

/* Rotating colour assignment. */
.why-card:nth-child(6n+1) .why-card__icon,
.highlight:nth-child(6n+1) .highlight__icon,
.feature:nth-child(6n+1) .feature__icon { background: var(--c1-bg); color: var(--c1); }
.why-card:nth-child(6n+2) .why-card__icon,
.highlight:nth-child(6n+2) .highlight__icon,
.feature:nth-child(6n+2) .feature__icon { background: var(--c2-bg); color: var(--c2); }
.why-card:nth-child(6n+3) .why-card__icon,
.highlight:nth-child(6n+3) .highlight__icon,
.feature:nth-child(6n+3) .feature__icon { background: var(--c3-bg); color: var(--c3); }
.why-card:nth-child(6n+4) .why-card__icon,
.highlight:nth-child(6n+4) .highlight__icon,
.feature:nth-child(6n+4) .feature__icon { background: var(--c4-bg); color: var(--c4); }
.why-card:nth-child(6n+5) .why-card__icon,
.highlight:nth-child(6n+5) .highlight__icon,
.feature:nth-child(6n+5) .feature__icon { background: var(--c5-bg); color: var(--c5); }
.why-card:nth-child(6n+6) .why-card__icon,
.highlight:nth-child(6n+6) .highlight__icon,
.feature:nth-child(6n+6) .feature__icon { background: var(--c6-bg); color: var(--c6); }

/* Why-cards on a tinted band, with a coloured top edge. */
.why-cards {
	background: linear-gradient(170deg, #f2f7fd 0%, #eaf2fb 100%);
	border-radius: var(--radius-lg);
	padding: 38px 32px;
	margin: 48px 0;
}
.why-cards__heading { text-align: center; margin-bottom: 1.2em; }
.why-card {
	position: relative;
	overflow: hidden;
	border: 0;
	box-shadow: 0 2px 10px rgba(16, 35, 59, .07);
}
.why-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
}
.why-card:nth-child(6n+1)::before { background: var(--c1); }
.why-card:nth-child(6n+2)::before { background: var(--c2); }
.why-card:nth-child(6n+3)::before { background: var(--c3); }
.why-card:nth-child(6n+4)::before { background: var(--c4); }
.why-card:nth-child(6n+5)::before { background: var(--c5); }
.why-card:nth-child(6n+6)::before { background: var(--c6); }
.why-card__icon {
	background: var(--brand-light);
	color: var(--brand);
	width: 46px; height: 46px;
	border-radius: 12px;
}

/* Highlights: coloured icon tiles instead of uniform navy. */
.highlight__icon { width: 42px; height: 42px; border-radius: 11px; }

/* Features & facilities grid */
.features { margin: 48px 0; }
.features__heading { text-align: center; font-size: 1.5rem; margin-bottom: .4em; }
.features__lead {
	text-align: center;
	color: var(--ink-soft);
	max-width: 56ch;
	margin: 0 auto 2em;
	font-size: .98rem;
}
.features__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}
.feature {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 24px 20px;
	text-align: center;
	transition: box-shadow .18s ease, transform .18s ease;
}
.feature:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.feature__icon {
	width: 52px; height: 52px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	margin: 0 auto 14px;
}
.feature__title { font-size: .98rem; margin-bottom: .35em; color: var(--brand-dark); }
.feature__text { font-size: .87rem; color: var(--ink-soft); margin: 0; }

/* Tool badges get colour too. */
.tool { border-color: transparent; background: var(--brand-light); }
.tool__icon { color: var(--brand); }

/* Photo slot: an intentional placeholder rather than a broken frame. */
.photo-slot {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	background: repeating-linear-gradient(45deg, #eef3f9, #eef3f9 12px, #e6edf6 12px, #e6edf6 24px);
	border: 2px dashed #c3d3e6;
	border-radius: var(--radius-lg);
	color: var(--ink-faint);
	font-size: .88rem;
	text-align: center;
	padding: 20px;
}

@media (max-width: 620px) {
	.why-cards { padding: 26px 18px; }
	.features__grid { grid-template-columns: repeat(2, 1fr); }
	.feature { padding: 18px 12px; }
	.feature__icon { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   16. Progressive disclosure
   -----------------------------------------------------------------------
   Long prose is collapsed to a readable height with a fade and a Read more
   button. The full text stays in the DOM: it is clipped with max-height, not
   loaded on demand, so crawlers see every word while the reader sees a page
   that does not look like an essay.
   ----------------------------------------------------------------------- */
.expandable { position: relative; }
.expandable__inner {
	max-height: 320px;
	overflow: hidden;
	transition: max-height .35s ease;
}
.expandable.is-open .expandable__inner { max-height: none; }

.expandable__fade {
	position: absolute;
	left: 0; right: 0; bottom: 44px;
	height: 110px;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--surface) 88%);
	pointer-events: none;
	transition: opacity .25s ease;
}
.expandable.is-open .expandable__fade { opacity: 0; }

.expandable__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 11px 22px;
	font: inherit;
	font-size: .93rem;
	font-weight: 600;
	color: var(--brand);
	background: var(--brand-light);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .15s ease;
}
.expandable__toggle:hover { background: #d7e6f8; }
.expandable__toggle::after {
	content: "";
	width: 8px; height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .25s ease;
}
.expandable.is-open .expandable__toggle::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* Career roles as cards rather than a run of headings and paragraphs. */
.roles { margin: 44px 0; }
.roles__heading { font-size: 1.5rem; margin-bottom: .4em; }
.roles__lead { color: var(--ink-soft); margin-bottom: 1.6em; }
.roles__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 16px;
}
.role {
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 4px solid var(--c1);
	border-radius: var(--radius);
	padding: 20px;
}
.role:nth-child(5n+2) { border-left-color: var(--c2); }
.role:nth-child(5n+3) { border-left-color: var(--c3); }
.role:nth-child(5n+4) { border-left-color: var(--c4); }
.role:nth-child(5n+5) { border-left-color: var(--c6); }
.role__title { font-size: 1rem; margin-bottom: .4em; color: var(--brand-dark); }
.role__text { font-size: .9rem; color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------------------
   Course-in-area pages: route block and sibling mesh.
   Both are rendered from term meta rather than written into post content, so
   they sit outside .entry-content and need their own type scale.
   ----------------------------------------------------------------------- */
.area-route {
	margin: 40px auto 0;
	padding: 20px 24px;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.area-route__heading { font-size: 1.25rem; margin: 0 0 .6em; }
.area-route__text { margin: 0 0 .8em; color: var(--ink-soft); }
.area-route__address {
	font-style: normal;
	display: block;
	margin: 0 0 .8em;
	padding-left: 14px;
	border-left: 3px solid var(--accent);
	color: var(--ink);
}
.area-route__note { margin: 0; font-size: .9rem; color: var(--ink-faint); }

.area-mesh { margin: 40px auto 8px; }
.area-mesh__heading {
	font-size: 1.15rem;
	margin: 28px 0 .7em;
	padding-bottom: .4em;
	border-bottom: 1px solid var(--line);
}
.area-mesh__heading:first-child { margin-top: 0; }
.area-mesh__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 8px 20px;
}
.area-mesh__list a {
	display: block;
	padding: 9px 12px;
	background: var(--surface-alt);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--brand);
	font-size: .95rem;
}
.area-mesh__list a:hover,
.area-mesh__list a:focus { background: var(--brand-light); text-decoration: underline; }
.area-mesh__hub { margin: 20px 0 0; font-weight: 600; }

@media (max-width: 600px) {
	.area-route { padding: 16px 18px; }
	.area-mesh__list { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Diagrams in post content. Hand-authored SVG referenced as <img>, so it
   scales to the column and needs no intrinsic-size juggling.
   ----------------------------------------------------------------------- */
.post-figure { margin: 32px 0; }
.post-figure img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.post-figure figcaption {
	margin-top: 10px;
	font-size: .9rem;
	color: var(--ink-faint);
	line-height: 1.5;
}

/* ==========================================================================
   Article and area page layout.
   The course template and front page already carried the design language;
   these bring guides, compliance pages and the area matrix onto it.
   ========================================================================== */

/* --- Article hero ------------------------------------------------------ */
.article-hero {
	background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 70%, #16457d 100%);
	color: #fff;
	padding: 52px 0 46px;
}
.article-hero__inner { max-width: var(--wrap); }
.article-hero__eyebrow {
	font-size: .82rem; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--accent); margin: 0 0 14px;
}
.article-hero__eyebrow a { color: inherit; text-decoration: none; }
.article-hero__eyebrow a:hover { text-decoration: underline; }
.article-hero__title {
	font-size: clamp(1.8rem, 4vw, 2.75rem); line-height: 1.15;
	margin: 0 0 16px; max-width: 22ch; letter-spacing: -.02em;
}
.article-hero__standfirst {
	font-size: 1.1rem; line-height: 1.6; color: #cddcf0;
	margin: 0 0 22px; max-width: 62ch;
}
.article-hero__meta {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 10px 26px;
	font-size: .9rem; color: #a9bdd8;
}
.article-hero__meta li { position: relative; }
.article-hero__meta li + li::before {
	content: ""; position: absolute; left: -14px; top: 50%;
	width: 3px; height: 3px; border-radius: 50%; background: currentColor;
}

/* --- Two-column body + aside ------------------------------------------ */
.post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 48px;
	align-items: start;
	margin-top: 40px;
	margin-bottom: 8px;
}
.post-layout__body { min-width: 0; }
.post-layout__body .entry-content { max-width: 68ch; }
.post-layout__aside { position: sticky; top: 24px; display: grid; gap: 22px; }

@media (max-width: 960px) {
	.post-layout { grid-template-columns: 1fr; gap: 32px; }
	.post-layout__aside { position: static; order: -1; }
}

/* --- Table of contents ------------------------------------------------- */
.toc {
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 20px;
}
.toc__heading {
	margin: 0 0 10px; font-size: .78rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}
.toc__list { margin: 0; padding: 0 0 0 1.1em; display: grid; gap: 7px; }
.toc__list li { font-size: .92rem; line-height: 1.4; }
.toc__list a { color: var(--brand); text-decoration: none; }
.toc__list a:hover, .toc__list a:focus { text-decoration: underline; }

/* --- Related reading --------------------------------------------------- */
.related {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 20px;
}
.related__heading {
	margin: 0 0 12px; font-size: .78rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}
.related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.related__list a { color: var(--brand); text-decoration: none; font-size: .92rem; line-height: 1.4; display: block; }
.related__list a:hover, .related__list a:focus { text-decoration: underline; }
.related__time { font-size: .78rem; color: var(--ink-faint); }

/* --- Sidebar at-a-glance card ------------------------------------------ */
.aside-card {
	background: var(--brand);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: 22px;
	box-shadow: var(--shadow-md);
}
.aside-card__heading {
	margin: 0 0 14px; font-size: .78rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.aside-card__facts { margin: 0 0 18px; display: grid; gap: 10px; }
.aside-card__facts dt {
	font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
	color: #a9bdd8; margin-bottom: 2px;
}
.aside-card__facts dd { margin: 0 0 6px; font-size: .95rem; line-height: 1.45; }
.aside-card__btn { width: 100%; text-align: center; }
.aside-card__phone { margin: 12px 0 0; font-size: .88rem; color: #cddcf0; text-align: center; }
.aside-card__phone a { color: #fff; font-weight: 700; }

/* --- Suitability callouts ---------------------------------------------- */
.suits {
	display: flex; gap: 12px; align-items: flex-start;
	padding: 14px 16px; margin: 14px 0;
	border-radius: var(--radius);
	border-left: 4px solid;
}
.suits--yes { background: #f0f8f3; border-left-color: var(--ok); }
.suits--no  { background: #fdf4ee; border-left-color: var(--accent); }
.suits__mark {
	flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: .8rem; font-weight: 700; color: #fff; margin-top: 2px;
}
.suits--yes .suits__mark { background: var(--ok); }
.suits--no  .suits__mark { background: var(--accent); }
.suits__body { display: block; }

/* --- Closing enquiry band ---------------------------------------------- */
.cta-band {
	background: var(--surface-alt);
	border-top: 1px solid var(--line);
	margin-top: 48px;
	padding: 48px 0 54px;
}
.cta-band__inner {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 44px; align-items: start;
}
.cta-band__heading { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 12px; }
.cta-band__sub { color: var(--ink-soft); margin: 0 0 18px; max-width: 48ch; line-height: 1.6; }
.cta-band__phone { margin: 0; font-size: 1.35rem; font-weight: 800; }
.cta-band__phone a { color: var(--brand); text-decoration: none; }
.cta-band__form {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 24px;
	box-shadow: var(--shadow-sm);
}
@media (max-width: 860px) {
	.cta-band__inner { grid-template-columns: 1fr; gap: 28px; }
}

/* --- Button variant used by the area hero ------------------------------ */
.btn--link {
	background: transparent; color: #cddcf0; border: 0;
	text-decoration: underline; padding-left: 4px; padding-right: 4px;
}
.btn--link:hover, .btn--link:focus { color: #fff; }

/* --------------------------------------------------------------------------
   Guides hub and category archives.
   ----------------------------------------------------------------------- */
.guides { margin-top: 44px; }
.guides__pillar { margin-bottom: 56px; }
.guides__pillar-head { margin-bottom: 22px; max-width: 72ch; }
.guides__pillar-title { font-size: 1.6rem; margin: 0 0 8px; }
.guides__pillar-title a { color: var(--ink); text-decoration: none; }
.guides__pillar-title a:hover, .guides__pillar-title a:focus { color: var(--brand); text-decoration: underline; }
.guides__pillar-desc { margin: 0; color: var(--ink-soft); line-height: 1.6; }

.guides__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 18px;
}
.guide-card {
	display: flex; flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 22px 22px 18px;
	transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.guide-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #c3d2e6; }
.guide-card__link { text-decoration: none; }
.guide-card__title {
	font-size: 1.08rem; line-height: 1.35; margin: 0 0 10px;
	color: var(--brand);
}
.guide-card__link:hover .guide-card__title,
.guide-card__link:focus .guide-card__title { text-decoration: underline; }
.guide-card__excerpt {
	margin: 0 0 16px; font-size: .93rem; line-height: 1.55;
	color: var(--ink-soft); flex: 1 1 auto;
}
.guide-card__meta {
	margin: 0; display: flex; gap: 16px;
	font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
	color: var(--ink-faint);
}
@media (max-width: 560px) {
	.guides__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   FAQ accordions. Native <details>, so no JS and no ARIA of our own.
   ----------------------------------------------------------------------- */
.faq { margin: 20px 0 8px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
	cursor: pointer;
	list-style: none;
	padding: 16px 40px 16px 0;
	position: relative;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.45;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
	content: "";
	position: absolute; right: 8px; top: 50%;
	width: 9px; height: 9px;
	border-right: 2px solid var(--brand);
	border-bottom: 2px solid var(--brand);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .18s ease;
}
.faq__item[open] .faq__q::after { transform: translateY(-30%) rotate(225deg); }
.faq__q:hover, .faq__q:focus-visible { color: var(--brand); }
.faq__a { padding: 0 0 18px; color: var(--ink-soft); }
.faq__a > :first-child { margin-top: 0; }
.faq__a > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Calculators and the course chooser.
   ----------------------------------------------------------------------- */
.calc {
	margin: 28px 0;
	padding: 22px 24px 18px;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}
.calc__title { margin: 0 0 16px; font-size: 1.15rem; }
.calc__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px 18px; margin-bottom: 18px;
}
.calc__field { display: flex; flex-direction: column; gap: 6px; }
.calc__field > span {
	font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
	color: var(--ink-faint); font-weight: 700;
}
.calc__field input[type="number"], .calc__field select {
	padding: 10px 12px; font-size: 1rem; font-family: inherit;
	border: 1px solid var(--line); border-radius: var(--radius);
	background: var(--surface); color: var(--ink); width: 100%;
}
.calc__field input:focus, .calc__field select:focus {
	outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
.calc__field--check { flex-direction: row; align-items: center; gap: 9px; }
.calc__field--check input { width: 18px; height: 18px; flex: 0 0 auto; }
.calc__field--check > span { text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 400; color: var(--ink); }

.calc__out {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 6px 18px 14px;
}
.calc__row {
	display: flex; justify-content: space-between; gap: 18px;
	padding: 10px 0; border-bottom: 1px solid var(--line);
	font-size: .95rem; color: var(--ink-soft);
}
.calc__row:last-of-type { border-bottom: 0; }
.calc__row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); white-space: nowrap; }
.calc__row--total { font-weight: 800; color: var(--ink); border-top: 2px solid var(--ink); border-bottom: 0; margin-top: 4px; }
.calc__row--total span:last-child { font-size: 1.15rem; color: var(--brand); }
.calc__hint { margin: 12px 0 0; font-size: .87rem; line-height: 1.55; color: var(--ink-soft); }
.calc__note { margin: 12px 0 0; font-size: .82rem; line-height: 1.55; color: var(--ink-faint); }

.chooser {
	margin: 28px 0; padding: 26px 26px 22px;
	background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.chooser__q { margin: 0 0 16px; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.chooser__opts { display: grid; gap: 10px; }
.chooser__opts button {
	text-align: left; padding: 14px 16px; font: inherit; cursor: pointer;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); color: var(--ink);
	transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.chooser__opts button:hover, .chooser__opts button:focus-visible {
	border-color: var(--brand); background: var(--brand-light); transform: translateX(2px);
}
.chooser__lead { margin: 0 0 16px; line-height: 1.6; color: var(--ink); }
.chooser__card {
	display: block; padding: 18px 20px; margin-bottom: 14px;
	background: var(--brand); color: #fff; border-radius: var(--radius);
	text-decoration: none;
}
.chooser__card:hover { background: var(--brand-dark); }
/* The theme gives strong a dark ink colour, which on this navy card resolved
   to exactly the background and made the course title invisible. Forced, and
   worth the comment so it is not "tidied" away later. */
.chooser__card strong { display: block; font-size: 1.15rem; margin-bottom: 4px; color: #fff; }
.chooser__facts { display: block; font-size: .9rem; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.chooser__why { display: block; font-size: .93rem; line-height: 1.55; color: #cddcf0; }
.chooser__alt { margin: 0 0 10px; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }
.chooser__restart {
	margin-top: 8px; padding: 8px 14px; font: inherit; font-size: .88rem; cursor: pointer;
	background: transparent; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-soft);
}
.chooser__restart:hover { border-color: var(--brand); color: var(--brand); }

/* Testimonial monogram — shown when a student has not supplied a photo. */
.testimonial__avatar--monogram {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--brand-light);
	color: var(--brand);
	font-size: 1.25rem;
	font-weight: 800;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Key takeaways and the entity line.
   Rendered from meta, not written into post content — the same rule the
   sources block, the area mesh and the route block already follow.
   ----------------------------------------------------------------------- */
.tldr {
	margin: 0 0 28px;
	padding: 20px 24px;
	background: var(--brand-light);
	border-left: 4px solid var(--brand);
	border-radius: 0 var(--radius) var(--radius) 0;
}
.tldr__heading {
	margin: 0 0 12px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--brand);
}
.tldr__list { margin: 0; padding-left: 1.15em; display: grid; gap: 9px; }
.tldr__list li { line-height: 1.55; color: var(--ink); }
.tldr__list li::marker { color: var(--accent); }

.entity-line {
	margin: 0 0 24px;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--ink-soft);
	padding-left: 14px;
	border-left: 3px solid var(--accent);
}

/* Guides hub introduction. Lives in an option because WordPress never renders
   a posts page's own content, so there is nowhere in the editor to put it. */
.guides-intro {
	max-width: 68ch;
	margin: 36px auto 4px;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--ink-soft);
}

/* With a picture the intro uses the wrap's own width instead of a 68ch column
   adrift in the middle of it.

   This said `max-width: none` at first, which was worse than the problem it
   fixed. The element carries both .wrap and .guides-intro, so overriding
   max-width did not restore the wrap's 1200px - it removed the constraint
   altogether, and on a 2000px monitor the grid spanned the whole viewport
   while the text column stayed capped at 62ch. The result was 650px of empty
   space between the paragraph and the picture.

   Restating var(--wrap) is the fix: it undoes .guides-intro's 68ch cap and
   nothing else. The text column keeps its own cap because a 700px line length
   is unreadable whatever is sitting beside it. */
.guides-intro--split {
	max-width: var(--wrap);
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	margin: 40px auto 8px;
}
.guides-intro--split .guides-intro__text { max-width: 62ch; }
.guides-intro__media { margin: 0; }
.guides-intro__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-lg);
}

@media (max-width: 860px) {
	/* Stacked, and the picture goes last. On a phone it is worth showing but it
	   is not worth pushing the first paragraph below the fold for. */
	.guides-intro--split {
		grid-template-columns: 1fr;
		gap: 22px;
	}
	.guides-intro__media { order: 2; }
}
.guides-intro p { margin: 0 0 14px; }
.guides-intro p:last-child { margin-bottom: 0; }

/* --- Area page: the course, rendered from the course record ------------- */
.area-course {
	margin: 34px 0 0;
	padding: 26px 26px 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface-alt);
}
.area-course > h2 { margin-top: 0; }
.area-course .post-figure { margin: 0 0 20px; }
.area-course__modules {
	margin: 0 0 22px;
	padding-left: 1.25rem;
	display: grid;
	gap: 10px;
}
.area-course__modules li { line-height: 1.55; }
.area-course__modules strong { display: block; color: var(--ink); }
.area-course__facts {
	margin: 0 0 18px;
	display: grid;
	grid-template-columns: minmax(8rem, max-content) 1fr;
	gap: 8px 20px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}
.area-course__facts dt {
	font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--ink-soft); padding-top: .18rem;
}
.area-course__facts dd { margin: 0; line-height: 1.5; }
@media (max-width: 600px) {
	.area-course { padding: 20px 18px 16px; }
	.area-course__facts { grid-template-columns: 1fr; gap: 2px 0; }
	.area-course__facts dd { margin: 0 0 10px; }
}

/* --- Links into the area cluster from its two parents ------------------- */
.area-links {
	margin: 34px 0 0;
	padding: 24px 26px 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface-alt);
}
.area-links__heading { margin: 0 0 6px; font-size: 1.15rem; }
.area-links__standfirst { margin: 0 0 14px; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.area-links__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 8px 18px;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.area-links__list a {
	display: block; padding: 9px 12px;
	border: 1px solid var(--line); border-radius: var(--radius);
	background: var(--surface); text-decoration: none;
	font-size: .93rem; line-height: 1.4;
}
.area-links__list a:hover { border-color: var(--brand); }
@media (max-width: 600px) {
	.area-links { padding: 18px 16px 14px; }
}

/* --- Fee, stated as ordinary body text ---------------------------------
   Deliberately not a callout. A bordered box with its own button is a second
   hero, and the point is that the price is not what the page leads with. */
.fee-note {
	margin: 22px 0;
	color: var(--ink-soft);
	line-height: 1.7;
}

/* --- Partner logos ------------------------------------------------------ */
.partner-strip__logo {
	max-width: 132px;
	max-height: 46px;
	width: auto;
	height: auto;
	object-fit: contain;
	/* The six logos arrive in six different brand colours against a white
	   card. Desaturating them holds the strip together and keeps the eye on
	   the heading rather than on whichever mark happens to be reddest. */
	filter: grayscale(1);
	opacity: .72;
	transition: filter .18s ease, opacity .18s ease;
}
.partner-strip__item:hover .partner-strip__logo { filter: grayscale(0); opacity: 1; }
.area-course__standfirst { margin: 0 0 20px; line-height: 1.75; }
.area-course__standfirst strong { color: var(--ink); }
.trust-line { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .93rem; line-height: 1.65; }

/* --------------------------------------------------------------------------
   Thank-you page
   -----------------------------------------------------------------------

   Reached only after an enquiry is saved. Its job is to confirm, set an
   expectation, and hand over the brochure - in that order, because that is the
   order the questions arrive in the visitor's head. */
.thanks {
	padding: 48px 0 64px;
	text-align: center;
}

.thanks__mark {
	color: var(--brand);
	margin-bottom: 18px;
}

.thanks__title {
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	line-height: 1.2;
	margin: 0 0 .5em;
	color: var(--brand-dark);
}

.thanks__lead {
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--ink);
	margin: 0 auto 14px;
	max-width: 54ch;
}

.thanks__when {
	font-size: .95rem;
	color: var(--ink-soft);
	margin: 0 auto 36px;
	max-width: 54ch;
}

/* The brochure card. Left-aligned inside a centred page, because a paragraph
   of running text centred under a picture is hard to read. */
.thanks__brochure {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 24px;
	align-items: center;
	text-align: left;
	margin: 0 0 40px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface-alt);
}
.thanks__brochure-media img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	border: 1px solid var(--line);
	display: block;
}
.thanks__brochure-title { margin: 0 0 .4em; font-size: 1.15rem; color: var(--brand-dark); }
.thanks__brochure-text p { margin: 0 0 16px; color: var(--ink-soft); font-size: .96rem; line-height: 1.6; }

.thanks__next { text-align: left; margin: 0 0 30px; }
.thanks__next-title { font-size: 1.05rem; margin: 0 0 .6em; color: var(--brand-dark); }
.thanks__links { list-style: none; margin: 0; padding: 0; }
.thanks__links li { padding: 11px 0; border-bottom: 1px solid var(--line); }
.thanks__links li:last-child { border-bottom: 0; }
.thanks__links a { font-weight: 500; }

.thanks__call { color: var(--ink-soft); font-size: .96rem; }
.thanks__call a { font-weight: 700; white-space: nowrap; }

@media (max-width: 640px) {
	.thanks { padding: 34px 0 48px; }
	.thanks__brochure {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	/* The picture is reassurance, not information, and at phone width it would
	   otherwise push the download button below the fold. */
	.thanks__brochure-media { max-width: 260px; }
	.thanks__brochure .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Classroom photo band
   A slot built for photographs, which is the whole point of it. The site's
   other image holders are sized for what they hold - .usp-card__icon is 38px
   square, .partner-logo is a lockup - and a room full of people dropped into
   one of those is an unreadable smudge. This one is wide, crops to a fixed
   3:2 so a row of frames lines up, and never renders an image smaller than
   about 340px.

   Dark ground on purpose: the band sits between two light sections on the
   homepage and between body copy and the CTA band on a page, and a full-bleed
   navy break reads as a deliberate change of register rather than as more
   content. Photographs also sit better on it than on grey.
   ----------------------------------------------------------------------- */
.section--photos {
	background: var(--brand-dark);
	color: #fff;
}
.section--photos .section__heading { color: #fff; }
.section--photos .section__lead { color: rgba(255, 255, 255, .74); }

.photo-band {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.photo-band__item {
	margin: 0;
	min-width: 0; /* Grid children default to min-content; a wide image would push the row past 100vw. */
	display: flex;
	flex-direction: column;
}

.photo-band__img {
	width: 100%;
	height: auto;
	/* The attachments are all 3:2 and the requested sizes are 3:2 crops, so
	   this only guards against a future upload of a different shape breaking
	   the row. It also reserves the box before the bytes arrive, which is what
	   keeps a lazy-loaded band from shifting the page under the reader. */
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius);
	display: block;
}

/* The honesty line. Quiet, but it renders with the band and is the reason the
   band is allowed to exist: these are illustrations of a kind of room, not
   photographs of this institute's rooms, and nothing above says otherwise. */
.photo-band__note {
	margin: 22px 0 0;
	max-width: 68ch;
	font-size: .82rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, .5);
}

@media (min-width: 700px) {
	.photo-band { gap: 18px; }
	.photo-band--2,
	.photo-band--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* At this width the lead still runs full width and the pair sits beneath
	   it; splitting three photographs across two columns leaves an orphan. */
	.photo-band--3 .photo-band__item--lead { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
	.photo-band--3 {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	/*
	 * The lead sits in the wide column and keeps its 3:2 crop.
	 *
	 * It used to span both rows with `height: 100%; aspect-ratio: auto`, the
	 * intention being that it stretch to whatever height the stacked pair came
	 * to, giving the band one flat bottom edge. That reasoning was sound and
	 * the result was not: a percentage height resolved against an `auto` row
	 * that was itself sized by its contents is circular, so the image fell back
	 * to dictating the height it was supposed to inherit. Measured at a 1024px
	 * viewport it rendered 634x1500 - a ratio of 0.42 where the file is 1.5.
	 *
	 * Left as two 3:2 pictures in a 2fr column beside two in a 1fr column, the
	 * heights come out within about 80px of each other on their own, which is a
	 * ragged edge nobody will notice and a layout that cannot do this again.
	 */
	.photo-band--3 .photo-band__item--lead {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: start;
	}
}

@media (max-width: 640px) {
	.section--photos { padding: 44px 0 48px; }
}


/* --------------------------------------------------------------------------
   Guide offer, archive actions, course comparison
   -----------------------------------------------------------------------

   The guide offer is deliberately the only warm-coloured block inside the
   sidebar rail. The contents list and the related-reading box beside it are
   both grey-on-white by design, because they are navigation; this one is an
   ask, and on a page where the previous nearest action was a floating call
   button 90% of the way down, it has to be findable by colour alone.

   It is not the brand-blue .aside-card used on area pages. That card is the
   full-commitment ask on a page whose reader has already chosen a course, and
   reusing it here would tell a reader mid-filing-deadline that this page is
   selling as hard as an area page is. The lighter accent panel asks smaller.
   -------------------------------------------------------------------------- */

.guide-offer {
	background: var(--accent-light);
	border: 1px solid #f0ddbe;
	border-left: 4px solid var(--accent);
	border-radius: var(--radius);
	padding: 18px 20px;
}
.guide-offer__heading {
	margin: 0 0 8px;
	font-size: 1.02rem; font-weight: 700; line-height: 1.35;
	color: var(--brand-dark);
}
.guide-offer__body { margin: 0 0 10px; font-size: .94rem; line-height: 1.5; color: var(--ink-soft); }
.guide-offer__timing { margin: 0 0 14px; font-size: .85rem; line-height: 1.45; color: var(--ink-faint); }
.guide-offer__btn { display: block; width: 100%; }
.guide-offer__alt { margin: 6px 0 0; font-size: .88rem; line-height: 1.45; color: var(--ink-soft); text-align: center; }

/* Padding rather than min-height: this is an anchor inside a sentence, so a
   block display change would be needed for min-height to do anything, and
   padding reaches 47px while leaving the underline on the words. */
.guide-offer__alt a { display: inline-block; padding: 11px 0; }

/* The inline placement, around two-thirds down the article. One line and one
   button on a single row where there is room, stacked where there is not, so
   it reads as a break between sections rather than as a second banner. */
.guide-offer--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 34px 0;
}
.guide-offer--inline .guide-offer__body {
	margin: 0;
	flex: 1 1 240px;
	font-size: .97rem;
	color: var(--ink);
}
.guide-offer--inline .guide-offer__btn { display: inline-block; width: auto; flex: 0 0 auto; }

/* --- Course archive: an action above the fold -------------------------- */
.page-head__actions { margin: 20px 0 0; }

/* --- The courses side by side ------------------------------------------ */
.course-compare { margin: 52px 0 8px; }
.course-compare__heading { font-size: 1.35rem; margin: 0 0 .3em; color: var(--brand-dark); }
.course-compare__note { margin: 0 0 18px; font-size: .92rem; color: var(--ink-soft); }

.course-compare__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.course-compare__table th,
.course-compare__table td {
	text-align: left;
	vertical-align: top;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
}
.course-compare__table thead th {
	background: var(--surface-alt);
	font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--ink-faint);
	border-bottom: 2px solid var(--line);
}
.course-compare__table tbody th { font-weight: 700; color: var(--brand-dark); }
.course-compare__table tbody th a { display: inline-block; padding: 10px 0; text-decoration: none; }
.course-compare__table tbody th a:hover,
.course-compare__table tbody th a:focus { text-decoration: underline; }
.course-compare__blank { color: var(--ink-faint); }

/*
 * Below 860px the table becomes one card per course.
 *
 * Not a horizontally scrolling table. Five columns of prose at 375px needs
 * about three viewport widths, and a sideways scroll inside a page that
 * scrolls vertically is the one gesture a thumb cannot discover. Stacking
 * keeps a single DOM - the labels come from data-label on the cells, so the
 * table markup stays a table for a screen reader and for anything parsing it.
 */
@media (max-width: 860px) {
	.course-compare__table,
	.course-compare__table tbody,
	.course-compare__table tr,
	.course-compare__table th,
	.course-compare__table td { display: block; }

	.course-compare__table thead {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.course-compare__table tr {
		border: 1px solid var(--line);
		border-radius: var(--radius);
		margin-bottom: 14px;
		padding: 6px 0 10px;
	}
	.course-compare__table th,
	.course-compare__table td { border-bottom: 0; padding: 7px 16px; }
	.course-compare__table tbody th { background: none; font-size: 1.04rem; padding-top: 4px; }
	.course-compare__table td::before {
		content: attr(data-label);
		display: block;
		font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
		color: var(--ink-faint);
	}
}

/* --------------------------------------------------------------------------
   Course poster
   -----------------------------------------------------------------------

   Shown at the full width of the article column rather than card-sized,
   because the point of it is the syllabus text printed inside the image. At
   card width that text is unreadable and the figure is decoration; at column
   width it is the densest summary of the course on the page. */
.course-poster {
	margin: 32px 0 8px;
}

.course-poster__img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	/* Matches the file: 1024x687. Reserves the box before the bytes land,
	   which matters because this is lazy and mid-article - exactly where an
	   unreserved image shifts the paragraph somebody is reading. */
	aspect-ratio: 1024 / 687;
}

@media (max-width: 640px) {
	.course-poster { margin: 24px 0 4px; }
}