@charset "utf-8";
/* =========================================================================
   Nails and Beauty Academy - design system
   -------------------------------------------------------------------------
   One accent colour (magenta), one neutral family (warm plum-tinted greys),
   one radius scale (pill buttons / 14px cards / 10px inputs). Light theme by
   default, dark theme through prefers-color-scheme. No framework.
   ========================================================================= */

/* -------------------------------------------------------------- 1. Tokens */

:root {
	/* Brand plum, taken from the 2014 site (#63125c) and extended into a ramp */
	--plum-900: #240821;
	--plum-800: #360C31;
	--plum-700: #4B0E45;
	--plum-600: #63125C;
	--plum-500: #7C2274;
	--plum-100: #F2E7F1;
	--plum-050: #FAF5F9;

	/* Single accent. --accent carries white text at 4.6:1; --accent-ink is the
	   text-on-light variant at 6.5:1. Never swap their roles. */
	--accent: #E5006D;
	--accent-ink: #B00055;
	--accent-soft: #FFEAF2;

	--ink: #1B141A;
	--ink-2: #4C424B;
	--ink-3: #6F6572;

	--surface: #FFFFFF;
	--surface-2: #FBF8FA;
	--surface-3: #F4EFF3;
	--line: #E7DFE5;
	--line-strong: #D3C7CF;

	--on-plum: #FFFFFF;
	--on-plum-2: #E4CFE1;

	--focus: #FFB300;

	/* Tick glyph is a data URI, so its stroke colour cannot inherit a token.
	   Each theme gets its own copy rather than a dark-on-dark tick. */
	--tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B00055' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");

	--radius-card: 14px;
	--radius-input: 10px;
	--radius-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(36, 8, 33, .06), 0 2px 8px rgba(36, 8, 33, .05);
	--shadow-md: 0 2px 4px rgba(36, 8, 33, .06), 0 12px 28px rgba(36, 8, 33, .09);

	--gutter: clamp(1rem, 4vw, 2.5rem);
	--measure: 68ch;
	--header-h: 68px;

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

	--step--1: clamp(.8125rem, .79rem + .11vw, .875rem);
	--step-0: clamp(1rem, .97rem + .16vw, 1.0625rem);
	--step-1: clamp(1.125rem, 1.07rem + .28vw, 1.3125rem);
	--step-2: clamp(1.375rem, 1.27rem + .52vw, 1.75rem);
	--step-3: clamp(1.625rem, 1.44rem + .92vw, 2.375rem);
	--step-4: clamp(2rem, 1.66rem + 1.7vw, 3.375rem);
}

@media (prefers-color-scheme: dark) {
	:root {
		--plum-100: #3A1035;
		--plum-050: #2C0B28;

		--accent: #FF3D8E;
		--accent-ink: #FF87B6;
		--accent-soft: #3B0E2A;
		--tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FF87B6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");

		--ink: #F6EFF4;
		--ink-2: #D2C4CE;
		--ink-3: #A899A4;

		--surface: #180512;
		--surface-2: #210A1C;
		--surface-3: #2B0F25;
		--line: #3C1A34;
		--line-strong: #552A4A;

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
		--shadow-md: 0 12px 28px rgba(0, 0, 0, .55);
	}
}

/* --------------------------------------------------------------- 2. Reset */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}

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

body {
	margin: 0;
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--step-0);
	line-height: 1.65;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	line-height: 1.15;
	letter-spacing: -.02em;
	font-weight: 700;
	text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1rem; }
p { text-wrap: pretty; }

a { color: var(--accent-ink); text-underline-offset: .18em; }
a:hover { color: var(--accent); }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: 4px;
}

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

::selection { background: var(--accent); color: #fff; }

/* ------------------------------------------------------------- 3. Helpers */

.wrap {
	width: min(1240px, 100%);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap--narrow { width: min(880px, 100%); }

.section { padding-block: clamp(2.75rem, 6vw, 5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section--tinted { background: var(--surface-2); }

.section__head { max-width: var(--measure); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.section__head p { color: var(--ink-2); margin-bottom: 0; }
.section__head h2 + p { margin-top: .6rem; }
.section__head--flush { margin-bottom: 0; }
.section__more { margin-top: 1.5rem; }
.section__head p + p { margin-top: .6rem; }

.eyebrow {
	display: block;
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent-ink);
	margin-bottom: .5rem;
}

/* A class setting `display` outranks the user-agent [hidden] rule, which
   silently un-hides anything with both. Make the attribute authoritative. */
[hidden] { display: none !important; }

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

.skip-link {
	position: absolute;
	left: 1rem;
	top: -100%;
	z-index: 200;
	background: var(--accent);
	color: #fff;
	padding: .75rem 1.25rem;
	border-radius: 0 0 var(--radius-input) var(--radius-input);
	font-weight: 600;
	text-decoration: none;
}
.skip-link:focus { top: 0; color: #fff; }

/* ------------------------------------------------------------- 4. Buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	white-space: nowrap;
	padding: .8rem 1.4rem;
	border-radius: var(--radius-pill);
	border: 2px solid transparent;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease,
		border-color .18s ease, transform .12s ease;
}

.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-ink); color: #fff; }

.btn--outline {
	background: transparent;
	color: var(--accent-ink);
	border-color: currentColor;
}
.btn--outline:hover { background: var(--accent-soft); color: var(--accent-ink); }

.btn--on-plum {
	background: #fff;
	color: var(--plum-700);
	border-color: #fff;
}
.btn--on-plum:hover { background: var(--plum-100); color: var(--plum-700); }

.btn--ghost-on-plum {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .55);
}
.btn--ghost-on-plum:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.btn--block { width: 100%; }
.btn--sm { padding: .55rem 1rem; font-size: var(--step--1); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* -------------------------------------------------------------- 5. Header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--plum-700);
	color: var(--on-plum);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

.site-header__bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: var(--header-h);
}

.brand {
	display: flex;
	align-items: center;
	gap: .7rem;
	color: #fff;
	text-decoration: none;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
	margin-right: auto;
}
.brand__mark {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 10px;
	background: var(--accent);
	color: #fff;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -.04em;
}
.brand__mark em { font-style: normal; opacity: .72; }
.brand > span { font-size: 1rem; }
.brand small {
	display: block;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--on-plum-2);
}

.nav { display: none; }

.nav > ul {
	display: flex;
	align-items: center;
	gap: .15rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav a {
	display: block;
	padding: .55rem .7rem;
	border-radius: var(--radius-pill);
	color: #fff;
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease;
}
.nav a:hover,
.nav a[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff; }

.nav__group { position: relative; }

.nav__panel {
	position: absolute;
	left: 0;
	top: calc(100% + .35rem);
	min-width: 300px;
	padding: .5rem;
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-md);
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.nav__group:hover > .nav__panel,
.nav__group:focus-within > .nav__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.nav__panel a {
	color: var(--ink);
	font-weight: 500;
	border-radius: 8px;
	padding: .5rem .65rem;
	white-space: normal;
}
.nav__panel a:hover { background: var(--accent-soft); color: var(--accent-ink); }

.nav__panel .nav__panel-all a {
	font-weight: 700;
	color: var(--accent-ink);
}

.header-tel {
	display: none;
	align-items: center;
	gap: .45rem;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.header-tel:hover { color: #fff; text-decoration: underline; }
.header-tel svg { width: 18px; height: 18px; flex: none; }

.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	border: 0;
	border-radius: var(--radius-pill);
	padding: .55rem 1rem;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.drawer { display: none; padding-bottom: 1.25rem; }
.drawer[data-open="true"] { display: block; }

.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer > ul > li { border-top: 1px solid rgba(255, 255, 255, .16); }
.drawer a {
	display: block;
	padding: .7rem .25rem;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.drawer ul ul a {
	padding-left: 1.1rem;
	font-weight: 500;
	font-size: .92rem;
	color: var(--on-plum-2);
}

.drawer summary {
	padding: .7rem .25rem;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after {
	content: "";
	width: .55rem;
	height: .55rem;
	margin-right: .35rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .18s ease;
}
.drawer details[open] > summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

@media (min-width: 1080px) {
	.nav { display: block; }
	.header-tel { display: inline-flex; }
	.nav-toggle, .drawer { display: none !important; }
}

/* --------------------------------------------------------- 6. Breadcrumbs */

.crumbs {
	font-size: var(--step--1);
	color: var(--ink-3);
	padding-block: .9rem;
}
.crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--line-strong); }
.crumbs.pager { margin-top: 2rem; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent-ink); text-decoration: underline; }

/* ----------------------------------------------------------- 7. Home hero */

.hero {
	background: var(--plum-700);
	color: var(--on-plum);
	padding-block: clamp(2rem, 5vw, 3.5rem);
	overflow: hidden;
}

.hero__grid {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

.hero h1 {
	color: #fff;
	max-width: 20ch;
	font-size: clamp(2rem, 1.5rem + 2.1vw, 3rem);
}

.hero__lede {
	margin-top: 1rem;
	max-width: 46ch;
	font-size: var(--step-1);
	color: var(--on-plum-2);
}

.hero .btn-row { margin-top: 1.6rem; }

.hero__media {
	position: relative;
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	aspect-ratio: 4 / 3;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

@media (min-width: 900px) {
	.hero__grid { grid-template-columns: 1.05fr .95fr; }
}

/* Interior pages get a compact band rather than a full hero. */
.page-head {
	background: var(--plum-700);
	color: var(--on-plum);
	padding-block: clamp(1.75rem, 4vw, 2.75rem);
}
.page-head h1 { color: #fff; }
.page-head p {
	margin: .85rem 0 0;
	max-width: 60ch;
	color: var(--on-plum-2);
	font-size: var(--step-1);
}
.page-head .crumbs { color: var(--on-plum-2); padding-top: 0; padding-bottom: .75rem; }
.page-head .crumbs a { color: var(--on-plum-2); }
.page-head .crumbs a:hover { color: #fff; }
.page-head .crumbs li + li::before { color: rgba(255, 255, 255, .4); }

/* ------------------------------------------------------- 8. Accreditation */

.trust {
	border-bottom: 1px solid var(--line);
	background: var(--surface);
	padding-block: 1.25rem;
}
.trust ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.25rem, 4vw, 3rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.trust__label {
	margin: 0 0 1rem;
	text-align: center;
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.trust img {
	height: 44px;
	width: auto;
	background: #fff;
	padding: 4px 8px;
	border-radius: 8px;
}

/* ---------------------------------------------------------- 9. Category bento */

.bento {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.bento { grid-template-columns: repeat(2, 1fr); }
	.bento > :first-child { grid-column: span 2; }
}

@media (min-width: 1040px) {
	.bento {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: minmax(210px, auto);
	}
	.bento > :first-child { grid-column: span 2; grid-row: span 2; }
	.bento > :nth-child(2) { grid-column: span 2; }
	.bento > :nth-child(3),
	.bento > :nth-child(4) { grid-column: span 1; }
}

.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 210px;
	padding: 1.25rem;
	border-radius: var(--radius-card);
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	background: var(--plum-700);
	isolation: isolate;
}
.tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform .4s ease;
}
.tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(36, 8, 33, .15) 0%,
		rgba(36, 8, 33, .55) 45%,
		rgba(36, 8, 33, .88) 100%);
}
.tile:hover img { transform: scale(1.04); }
.tile:hover { color: #fff; }
.tile h3 { color: #fff; font-size: var(--step-2); }
.tile p {
	margin: .35rem 0 0;
	color: rgba(255, 255, 255, .86);
	font-size: var(--step--1);
	max-width: 42ch;
}
.tile__count {
	display: inline-block;
	margin-top: .7rem;
	font-size: var(--step--1);
	font-weight: 700;
	color: #fff;
	border-bottom: 2px solid var(--accent);
	padding-bottom: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.tile:hover img { transform: none; }
}

/* ------------------------------------------------------- 10. Course cards */

.grid-heading {
	font-size: var(--step-2);
	margin-bottom: 1.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

.course-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover {
	border-color: var(--line-strong);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.card__media { background: var(--surface-3); overflow: hidden; }
.card__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.card__body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.15rem 1.25rem; }
.card__title { font-size: var(--step-1); margin-bottom: .4rem; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--accent-ink); }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card__summary {
	color: var(--ink-2);
	font-size: var(--step--1);
	margin-bottom: 1rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.card__meta {
	display: grid;
	gap: .15rem;
	margin-top: auto;
	padding-top: .85rem;
	border-top: 1px solid var(--line);
	font-size: var(--step--1);
	color: var(--ink-3);
}
.card__price { font-size: var(--step-1); font-weight: 800; color: var(--ink); }
.card__price s { color: var(--ink-3); font-weight: 500; font-size: var(--step--1); }

.pill {
	display: inline-block;
	padding: .2rem .6rem;
	border-radius: var(--radius-pill);
	background: var(--accent-soft);
	color: var(--accent-ink);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .02em;
}

/* Horizontal rail for "most booked", so breadth does not become a long list */
.rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(255px, 1fr);
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 1rem;
	margin-inline: calc(var(--gutter) * -1);
	padding-inline: var(--gutter);
	scrollbar-width: thin;
	list-style: none;
}
.rail > * { scroll-snap-align: start; }

@media (min-width: 1180px) {
	.rail {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, 1fr);
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}
}

/* ------------------------------------------- 11. Course detail two-column */

.detail {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: start;
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 1000px) {
	.detail { grid-template-columns: minmax(0, 1fr) 340px; }
	.detail__aside { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}

.prose { max-width: var(--measure); }
.prose > h2 {
	font-size: var(--step-2);
	margin-top: 2.5rem;
	margin-bottom: .85rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose > h3 { font-size: var(--step-1); margin: 1.75rem 0 .6rem; }
.prose p { color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose figure { margin: 1.5rem 0; }
/* Never upscale: the legacy library holds 124px thumbnails alongside full-width
   banners, and stretching the small ones to the measure makes them blurry. */
.prose figure img {
	border-radius: var(--radius-card);
	width: auto;
	max-width: 100%;
	height: auto;
}
.prose p img { max-width: 100%; height: auto; }

.module-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}
.module-grid a {
	display: block;
	height: 100%;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	overflow: hidden;
	text-decoration: none;
	color: var(--ink);
	transition: border-color .18s ease, box-shadow .18s ease;
}
.module-grid a:hover {
	border-color: var(--accent);
	box-shadow: var(--shadow-sm);
	color: var(--accent-ink);
}
.module-grid img {
	width: 100%;
	height: auto;
	aspect-ratio: 124 / 118;
	object-fit: cover;
}
.module-grid span {
	display: block;
	padding: .65rem .75rem .8rem;
	font-size: var(--step--1);
	font-weight: 600;
	line-height: 1.35;
}

/* "On this course you will learn" - two columns of ticked items, no hairline
   under every row (a 12-row bordered table is unreadable on a phone). */
.checklist {
	display: grid;
	gap: .55rem 1.5rem;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
}
@media (min-width: 640px) { .checklist { grid-template-columns: 1fr 1fr; } }

.checklist li {
	position: relative;
	padding-left: 1.85rem;
	color: var(--ink-2);
	font-size: var(--step--1);
	line-height: 1.5;
}
.checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .28em;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: var(--accent-soft) var(--tick) center / .8rem no-repeat;
}

.related-links {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}
.related-links a {
	display: inline-block;
	padding: .5rem .95rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.related-links a:hover {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent-ink);
}

/* Syllabus rows: "Topic - what you will learn", one per line, full measure. */
.syllabus {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	gap: .1rem;
}
.syllabus li {
	position: relative;
	padding: .7rem .9rem .7rem 2.4rem;
	border-radius: var(--radius-input);
	color: var(--ink-2);
	font-size: var(--step--1);
	line-height: 1.55;
}
.syllabus li:nth-child(odd) { background: var(--surface-2); }
.syllabus li::before {
	content: "";
	position: absolute;
	left: .85rem;
	top: 1.05em;
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: var(--accent);
}
.syllabus strong, .syllabus b { color: var(--ink); font-weight: 700; }

/* Longer claims with no bold lead-in: readable prose bullets, no striping. */
.points {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	gap: .9rem;
}
.points li {
	position: relative;
	padding-left: 1.75rem;
	color: var(--ink-2);
	line-height: 1.6;
	max-width: var(--measure);
}
.points li::before {
	content: "";
	position: absolute;
	left: .25rem;
	top: .62em;
	width: .45rem;
	height: .45rem;
	border-radius: 50%;
	background: var(--accent);
}

/* ----------------------------------------------------- 12. Booking panel */

.booking {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.booking__media { background: var(--surface-3); overflow: hidden; }
.booking__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.booking__body { padding: 1.25rem; }
.booking__price {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
}
.booking__price small {
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--ink-3);
	letter-spacing: 0;
}
.booking__was {
	display: inline-block;
	margin-top: .4rem;
	font-size: var(--step--1);
	color: var(--ink-3);
}
.booking__was s { margin-right: .35rem; }

.facts {
	margin: 1.1rem 0;
	padding: 0;
	font-size: var(--step--1);
}
.facts div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .5rem 0;
	border-bottom: 1px solid var(--line);
}
.facts div:last-child { border-bottom: 0; }
.facts dt { color: var(--ink-3); margin: 0; }
.facts dd { margin: 0; font-weight: 700; text-align: right; }

.booking__note {
	margin: .85rem 0 0;
	font-size: .78rem;
	line-height: 1.5;
	color: var(--ink-3);
}

.booking__call {
	display: block;
	margin-top: .75rem;
	text-align: center;
	font-size: var(--step--1);
	color: var(--ink-2);
}
.booking__call a { font-weight: 700; }

.assurances {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid var(--line);
	font-size: .82rem;
	color: var(--ink-2);
	display: grid;
	gap: .7rem;
}
.assurances li { position: relative; padding-left: 1.5rem; line-height: 1.5; }
.assurances li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--accent);
}

.upsell {
	margin-top: 1.25rem;
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius-card);
	background: var(--surface-2);
}
.upsell h2 { font-size: var(--step-1); margin-bottom: .5rem; }
.upsell p { font-size: var(--step--1); color: var(--ink-2); margin-bottom: .75rem; }
.upsell__price {
	font-size: var(--step-2);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--ink) !important;
	margin-bottom: .85rem !important;
}

/* Sidebar bullets keep the small legacy icons; cap them so a 156px-wide
   accreditation badge cannot dominate the panel. */
.assurances img {
	display: block;
	max-height: 34px;
	width: auto;
	margin: 0 0 .45rem;
}

/* ------------------------------------------------------- 13. Testimonials */

.quotes {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.quote {
	display: flex;
	flex-direction: column;
	padding: 1.4rem;
	border-radius: var(--radius-card);
	background: var(--surface);
	border: 1px solid var(--line);
}
.quote blockquote {
	margin: 0 0 1rem;
	font-size: var(--step-1);
	line-height: 1.45;
	letter-spacing: -.01em;
}
.quote__fig { margin: 0; display: contents; }
.quote figcaption {
	margin-top: auto;
	font-size: var(--step--1);
	color: var(--ink-3);
}
.quote figcaption b { display: block; color: var(--ink); font-weight: 700; }

.stars { display: flex; gap: 2px; margin-bottom: .8rem; color: var(--accent); }
.stars svg { width: 16px; height: 16px; }

/* --------------------------------------------------------- 14. Fact rows */

.facts-2col {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}
@media (min-width: 900px) { .facts-2col { grid-template-columns: .85fr 1.15fr; } }

.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .reasons { grid-template-columns: 1fr 1fr; } }

.reasons h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.reasons p { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.reasons b {
	display: block;
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--accent-ink);
	margin-bottom: .4rem;
}

/* -------------------------------------------------------- 15. Locations */

.locations {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}
.locations li {
	padding: 1.15rem 1.25rem;
	border-radius: var(--radius-card);
	background: var(--surface);
	border: 1px solid var(--line);
}
.locations h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.locations address {
	font-style: normal;
	color: var(--ink-2);
	font-size: var(--step--1);
	line-height: 1.55;
}
.locations p { margin: .7rem 0 0; font-size: .8rem; color: var(--ink-3); }

/* ---------------------------------------------------------- 16. CTA band */

.cta-band {
	background: var(--plum-700);
	color: var(--on-plum);
	padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
.cta-band__inner {
	display: grid;
	gap: 1.5rem;
	align-items: center;
}
@media (min-width: 860px) {
	.cta-band__inner { grid-template-columns: 1.4fr auto; }
}
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band p { margin: .75rem 0 0; color: var(--on-plum-2); max-width: 52ch; }

/* ------------------------------------------------------------ 17. Tables */

.table-scroll { overflow-x: auto; margin-bottom: 1.25rem; }
.table-scroll table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--step--1);
	min-width: 420px;
}
.table-scroll th,
.table-scroll td {
	text-align: left;
	padding: .65rem .8rem;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}
.table-scroll thead th {
	background: var(--surface-3);
	font-weight: 700;
	color: var(--ink);
}

/* ------------------------------------------------------------ 18. Footer */

.site-footer {
	background: var(--plum-800);
	color: var(--on-plum-2);
	padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem;
	font-size: var(--step--1);
}
.site-footer h2 {
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: .9rem;
}
.site-footer a { color: var(--on-plum-2); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }

.footer-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.footer-brand p { max-width: 34ch; margin-top: .9rem; }
.footer-brand address { font-style: normal; margin-top: .9rem; line-height: 1.6; }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.5rem;
	justify-content: space-between;
	align-items: center;
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: .8rem;
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1rem; }

.footer-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1.1rem;
}
.footer-badges img {
	height: 38px;
	width: auto;
	background: #fff;
	padding: 4px 6px;
	border-radius: 6px;
}

/* ------------------------------------------------------------ 19. Prints */

@media print {
	.site-header, .site-footer, .cta-band, .booking, .trust { display: none; }
	body { color: #000; background: #fff; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* Categories with a long course list get a two-column mega panel rather than a
   300px-wide column of 20 rows. */
.nav__panel--wide {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 .5rem;
	min-width: 560px;
}
.nav__panel--wide .nav__panel-all { grid-column: 1 / -1; }

/* Sidebar notes reflowed into the body on listing pages, which have no aside. */
.assurances--inline {
	border-top: 0;
	padding-top: 0;
	font-size: var(--step--1);
}

/* Homepage discipline panels: the 2014 site's four intro paragraphs. */
.panels {
	display: grid;
	gap: 1.5rem 2.5rem;
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.panels h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.panels h3 a { color: inherit; text-decoration: none; }
.panels h3 a:hover { color: var(--accent-ink); }
.panels p { margin: 0; color: var(--ink-2); font-size: var(--step--1); }

.related-links--block { align-content: start; }

.badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}
.badges img { max-height: 54px; width: auto; }

/* =============================================== 20. Enquiry form =========
   The legacy site shipped this form with no styles at all. Labels sit above
   inputs, help text below the label, and every foreground colour is taken
   from the token set so both themes clear WCAG AA.
   ========================================================================= */

.enquiry {
	display: grid;
	gap: 1.25rem;
	max-width: 46rem;
}

.enquiry__intro { font-size: var(--step-1); color: var(--ink-2); margin: 0; }
.enquiry__hint,
.enquiry__consent { margin: 0; font-size: var(--step--1); color: var(--ink-3); }
.enquiry__consent { max-width: 60ch; }

.field { display: grid; gap: .4rem; border: 0; padding: 0; margin: 0; }

.field label,
.field legend {
	font-weight: 700;
	font-size: var(--step--1);
	color: var(--ink);
	padding: 0;
}

.field abbr {
	color: var(--accent-ink);
	text-decoration: none;
	margin-left: .15rem;
}

.field__help {
	font-size: .82rem;
	color: var(--ink-3);
	line-height: 1.5;
	max-width: 60ch;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
	width: 100%;
	padding: .7rem .85rem;
	font: inherit;
	font-size: var(--step-0);
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-input);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.field textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }

.field select {
	appearance: none;
	padding-right: 2.5rem;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%;
	background-size: .35rem .35rem, .35rem .35rem;
	background-repeat: no-repeat;
}

.field :is(input, select, textarea):hover { border-color: var(--ink-3); }

.field :is(input, select, textarea):focus {
	outline: 3px solid var(--focus);
	outline-offset: 1px;
	border-color: var(--accent);
}

/* Browser-side validation styling only after the field has been filled in and
   left, so an untouched form is never shown covered in red. */
.field :is(input, select):user-invalid,
.field :is(input, select):-moz-ui-invalid {
	border-color: #B3261E;
	box-shadow: 0 0 0 1px #B3261E;
}

.field ::placeholder { color: var(--ink-3); opacity: 1; }

.field--group { display: grid; gap: .5rem; }

.choices { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .2rem; }

.choice {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .6rem 1.35rem .6rem 1rem;
	min-width: 5.5rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: var(--step--1);
	cursor: pointer;
}
.choice:hover { border-color: var(--ink-3); }
.choice:has(input:checked) {
	border-color: var(--accent);
	background: var(--accent-soft);
	color: var(--accent-ink);
}
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice input { accent-color: var(--accent); }

.enquiry button[type="submit"] { justify-self: start; padding-inline: 2rem; }

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

/* Post-submit banners. Present but [hidden]; the Worker removes the attribute
   server-side, so the visitor is told what happened with JavaScript off. */
.banner { margin-bottom: 1.75rem; padding: 1.15rem 1.35rem; border-radius: var(--radius-card); }
.banner h2 { font-size: var(--step-2); margin-bottom: .35rem; }
.banner p { margin: 0; color: var(--ink-2); }

.banner--ok { background: #E8F5EE; border: 1px solid #9FCFB5; }
.banner--ok h2 { color: #14603C; }
.banner--error { background: #FDECEA; border: 1px solid #F0B4AC; }
.banner--error h2 { color: #8C1D18; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .banner--ok {
		background: #0F2A1D; border-color: #2E6647;
	}
	:root:not([data-theme="light"]) .banner--ok h2 { color: #7FD8A8; }
	:root:not([data-theme="light"]) .banner--error {
		background: #33140F; border-color: #7A342B;
	}
	:root:not([data-theme="light"]) .banner--error h2 { color: #F5A79C; }
	:root:not([data-theme="light"]) .field :is(input, select):user-invalid {
		border-color: #F2857A; box-shadow: 0 0 0 1px #F2857A;
	}
}