/*
Theme Name: KPC Home
Theme URI: https://kpc/
Author: KPC
Description: Minimal theme with a logo-and-Inquiry-button header that overlays a full-bleed home slider. Each slide takes an image or an uploaded video; video slides play through and expose a pause control. Slides are managed under Home Slider in the admin.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kpc-home
Tags: custom-logo, custom-colors, custom-menu, featured-images
*/

/* ------------------------------------------------------------------ tokens */

:root {
	--kpc-primary: #b60000;
	--kpc-accent: #ff8c04;
	--kpc-ink: #1a1a1a;
	--kpc-muted: #666;
	--kpc-line: #e8e8e8;

	--kpc-slide-h: 100svh;
	--kpc-overlay: .45;

	--kpc-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	/* The institute name in the header only: a wider geometric face so the
	   wordmark reads as a mark rather than another menu item. */
	--kpc-font-brand: "Montserrat", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--kpc-wrap: 1200px;
	/* Floats the header down so the slide media shows in the strip above it. */
	--kpc-header-top: 36px;
	/* Block padding inside the header bar, and a button's own vertical
	   padding. Tokens because the Inquiry button reads both to work out how
	   far it must stretch to reach the top of the screen. */
	--kpc-header-pad: 8px;
	--kpc-btn-pad-y: 11px;
	/* The crest in the left corner. It is deliberately taller than the bar:
	   it is lifted out of the bar's flow and the bar runs behind it, so this
	   width no longer drives the bar's height. The bar reserves a column of
	   this width plus a gap so the nav can never run underneath it. */
	--kpc-logo-w: 146px;
	/* Where the crest sits from the bar's left edge, and the visual gap between
	   its right edge and the institute name. */
	--kpc-logo-left: 24px;
	--kpc-logo-gap: 2px;
	/* Shrink factor for the docked bar. Kept separate from the width so each
	   breakpoint only has to state its resting width: a fixed docked width
	   would end up larger than the resting width on small screens, and the
	   crest would grow on scroll. */
	--kpc-logo-scale: 1;
	/* --kpc-logo-size is derived on .kpc-header, not here: a calc() stored in a
	   custom property is resolved where it is declared, so declaring it on
	   :root would freeze the scale at 1 and the docked header could never
	   shrink the crest by overriding --kpc-logo-scale. */

	/* Inquiry button. Overridden from the Customizer; these are fallbacks.
	   The gradient's two stops are the inquiry colour and the accent, so both
	   stay editable in Customize → Brand Colours. */
	/* Slider bottom bar. Background is overridden from the Customizer. */
	--kpc-bar-h: 52px;
	--kpc-bar-bg: #b60000;

	--kpc-inquiry-bg: #ffdc04;
	--kpc-inquiry-ink: #1a1a1a;
	/* The gradient's outer colour has its own token so the Inquiry button
	   keeps its warm look whatever the hover accent is set to. */
	--kpc-inquiry-edge: #ff8c04;
	--kpc-inquiry-grad: radial-gradient(
		circle at 50% 150%,
		var(--kpc-inquiry-bg) 0%,
		var(--kpc-inquiry-edge) 85%
	);

	/* Secondary brand colour: the News Highlights box, the video play
	   buttons and YouTube button, and the footer. Overridden from the
	   Customizer (Brand Colours → Secondary). */
	--kpc-secondary: #b60000;
}

/* ------------------------------------------------------------------- reset */

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

body {
	margin: 0;
	font-family: var(--kpc-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--kpc-ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--kpc-primary);
}

h1, h2, h3, h4 {
	margin: 0 0 .5em;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
}

p {
	margin: 0 0 1em;
}

:focus-visible {
	outline: 3px solid var(--kpc-accent);
	outline-offset: 3px;
}

.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;
}

.kpc-skip {
	position: absolute;
	left: -9999px;
	z-index: 200;
	padding: 12px 20px;
	background: #000;
	color: #fff;
}

.kpc-skip:focus {
	left: 12px;
	top: 12px;
}

.kpc-wrap {
	width: 100%;
	max-width: var(--kpc-wrap);
	margin: 0 auto;
	padding: 0 24px;
}

/* ------------------------------------------------------------------ button */

.kpc-btn {
	display: inline-block;
	padding: var(--kpc-btn-pad-y) 26px;
	font-family: inherit;
	font-size: 14px;
	/* Without this the button inherits the body's 1.7 and becomes the tallest
	   thing in the header, inflating the whole bar. */
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: var(--kpc-primary);
	border: 2px solid var(--kpc-primary);
	border-radius: 3px;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.kpc-btn:hover,
.kpc-btn:focus {
	background: var(--kpc-accent);
	border-color: var(--kpc-accent);
	color: #fff;
	transform: translateY(-1px);
}

.kpc-btn--lg {
	padding: 16px 36px;
	font-size: 15px;
}

/* Secondary-colour button (YouTube channel). Hover darkens rather than
   switching to the accent, so it never clashes with the primary hover. */
.kpc-btn--secondary {
	background: var(--kpc-secondary);
	border-color: var(--kpc-secondary);
}

.kpc-btn--secondary:hover,
.kpc-btn--secondary:focus {
	background: color-mix(in srgb, var(--kpc-secondary) 78%, black);
	border-color: color-mix(in srgb, var(--kpc-secondary) 78%, black);
}

/* ------------------------------------------------------------------ header */

.kpc-header {
	--kpc-logo-size: calc(var(--kpc-logo-w) * var(--kpc-logo-scale));
	/* Fixed in the same spot on every page and device: floated down by the
	   strip's height, so the slide or banner shows in the strip above it at
	   the top of a page, and held exactly there as the page scrolls. It never
	   docks to the top edge or moves back down. */
	position: fixed;
	top: var(--kpc-header-top);
	left: 0;
	right: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--kpc-line);
	box-shadow: 0 2px 14px rgba(0, 0, 0, .14);
	transition: transform .3s ease;
}

/* The strip above the bar stays clear, so the media (and, once scrolled, the
   page) shows through it. Only pages with no media under the bar fill it,
   matching their white background. */
.kpc-header::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: var(--kpc-header-top);
	background: #fff;
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}

body:not(.kpc-has-overlay-header) .kpc-header::before {
	opacity: 1;
}

/* A page with a slider or banner runs that media under the bar. A page with
   neither (the 404, say) starts its content below it instead. The bar's height
   is content-driven, so the script measures it into --kpc-header-h. */
body:not(.kpc-has-overlay-header) {
	padding-top: calc(var(--kpc-header-top) + var(--kpc-header-h, 61px));
}

html {
	/* Anchor jumps land below the bar. */
	scroll-padding-top: calc(var(--kpc-header-top) + var(--kpc-header-h, 61px) + 12px);
}

/* Hide the header on mobile when scrolling down; slide it up with transform. */
.kpc-header.is-hidden {
	transform: translateY(-100%);
}

.kpc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	/* A little wider than the page wrap: seven top-level menu items plus the
	   wordmark and the Enquiry button need the room on large screens. */
	max-width: 1280px;
	margin: 0 auto;
	/* Height is content-driven; the block padding is what gives the bar its
	   breathing room. */
	padding: var(--kpc-header-pad) 24px;
}

.kpc-header__right {
	display: flex;
	align-items: center;
	gap: 14px;
	/* Full-height itself, so the Inquiry button inside it has a row height to
	   stretch into. Its other children stay centred. */
	align-self: stretch;
}

/* Logo */

.kpc-logo .custom-logo-link {
	display: block;
	line-height: 0;
}

/* The crest: lifted out of the bar's flow so it can be taller than the bar,
   and painted above the bar's background so the bar reads as passing behind
   it. Anchored near the bar's top edge rather than centred on it, because a
   crest this much taller than the bar, centred, would be clipped by the top of
   the viewport. */
.kpc-header--crest .kpc-logo {
	position: absolute;
	left: var(--kpc-logo-left);
	/* Lifted into the strip above the bar, so the bar crosses the crest nearer
	   its middle rather than butting into its top edge. */
	top: calc(8px - var(--kpc-header-top));
	z-index: 3;
	width: var(--kpc-logo-size);
	line-height: 0;
	transition: top .25s ease, width .25s ease;
}

.kpc-header--crest .kpc-logo .custom-logo-link,
.kpc-header--crest .kpc-logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Reserve the crest's column: its offset, its width, then the gap to the
   name. Without this the name and nav would sit underneath it. */
.kpc-header--crest .kpc-header__inner {
	position: relative;
	padding-left: calc(var(--kpc-logo-left) + var(--kpc-logo-size) + var(--kpc-logo-gap));
	/* Follows the crest as it shrinks on docking, so the gap stays constant. */
	transition: padding-left .25s ease;
}

/* Wordmark beside the crest: the name heavy and tracked, the descriptor as
   a fine letter-spaced line beneath, both in capitals and both in the brand
   face (see --kpc-font-brand) so they read as one mark. */
.kpc-wordmark {
	/* A one-column grid whose width is set by the name alone (see the tag's
	   width: 0 below), so the descriptor can be stretched to exactly match. */
	display: grid;
	grid-template-columns: max-content;
	align-content: center;
	flex: 0 0 auto;
	/* The crest artwork has clear space inside its own box, so the name is
	   pulled back over it; measured, this leaves about 10px of visible gap. */
	margin-left: -12px;
	line-height: 1.05;
	text-decoration: none;
	color: var(--kpc-ink);
}

.kpc-wordmark__name {
	font-family: var(--kpc-font-brand);
	font-size: 1.8rem;
	font-weight: 800;
	letter-spacing: .03em;
	/* A soft drop shadow under each letter, in the same family as the slide
	   title's but far lighter: this sits on white, so it lifts the letters
	   rather than darkening around them. */
	text-shadow: 0 2px 6px rgba(0, 0, 0, .22), 0 1px 1px rgba(0, 0, 0, .18);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--kpc-wordmark, #155a83);
	transition: color .16s ease;
}

/* Runs from the first letter of the name to its last. It takes the name's
   width (width: 0 keeps it from widening the column; min-width fills it), and
   the script scales its font-size so the text fills that width with natural
   spacing. This size is the floor, small enough to fit before scaling. */
.kpc-wordmark__tag {
	width: 0;
	min-width: 100%;
	margin-top: 3px;
	font-family: var(--kpc-font-brand);
	font-size: .5rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--kpc-wordmark, #155a83);
}

.kpc-wordmark:hover .kpc-wordmark__name,
.kpc-wordmark:focus .kpc-wordmark__name {
	color: var(--kpc-primary);
}


/* The crest is out of flow, so the nav is the only remaining flex item and
   space-between would park it at the start of the content box. */
.kpc-header--crest .kpc-header__right {
	margin-left: auto;
}

.kpc-logo__fallback {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.kpc-logo__name {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.kpc-logo__tag {
	font-size: 11.5px;
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--kpc-muted);
}

/* ------------------------------------------------------ inquiry button */

.kpc-btn--inquiry {
	position: relative;
	/* Span the bar's full height whatever the logo makes it, rather than
	   relying on the button and the logo happening to be the same height.
	   Flex centring keeps the text centred in the bar as the box grows,
	   including the lopsided padding below that reaches up through the strip.
	   The label and, beneath it, the phone number stack as a column. */
	align-self: stretch;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	/* Clips the hover sheen to the button. */
	overflow: hidden;
	/* A wrapped label would make the whole bar taller. */
	white-space: nowrap;
	/* Larger and heavier than the stock button, with the side padding pulled
	   in so the box stays the width it was. */
	--kpc-btn-pad-y: 4px;
	padding-inline: 17px;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .03em;
	/* Dark label: white on yellow is unreadable. */
	color: var(--kpc-inquiry-ink);
	/* Solid colour first as the fallback, then the gradient over it. */
	background-color: var(--kpc-inquiry-bg);
	background-image: var(--kpc-inquiry-grad);
	/* A gradient cannot be a border-colour; transparent lets the background
	   paint right through the border box so the block reads as one shape. */
	border-color: transparent;
}

.kpc-btn--inquiry:hover,
.kpc-btn--inquiry:focus {
	color: var(--kpc-inquiry-ink);
	/* Not the `background` shorthand — it would reset background-image and
	   drop the gradient on hover. */
	background-color: var(--kpc-inquiry-bg);
	background-image: var(--kpc-inquiry-grad);
	border-color: transparent;
	/* Glow outward and lift the colour slightly, rather than shifting hue. */
	filter: brightness(1.08);
	/* Static fallback first, for browsers without color-mix(). */
	box-shadow: 0 0 26px rgba(255, 212, 4, .7);
	box-shadow: 0 0 26px color-mix(in srgb, var(--kpc-inquiry-bg) 70%, transparent);
	/* No translate: the button is flush to the screen edge. */
	transform: none;
}

/* Optional mobile number, set in Customize → Header & Inquiry Button. A line
   beneath the label, in the same type: inherited, so every breakpoint's
   label size carries over without a matching rule here. */
.kpc-btn__phone {
	display: block;
	font-size: inherit;
	font-weight: inherit;
	/* Digits need no tracking, and this line is the wider of the two, so it
	   sets the box's width. */
	letter-spacing: 0;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
	white-space: nowrap;
}

/* The Inquiry button fills the header's full height and reaches the top edge
   of the screen through the strip. Negative margins pull the box out past the
   header's padding and offset; the block padding is symmetric, so the label
   and number sit in the middle of the whole coloured block. Two classes deep
   so the breakpoint rules' padding-bottom (meant for the plain button) do not
   override it. */
.kpc-header .kpc-btn--inquiry {
	margin-top: calc(-1 * (var(--kpc-header-top) + var(--kpc-header-pad)));
	margin-bottom: calc(-1 * var(--kpc-header-pad));
	padding-top: calc(var(--kpc-btn-pad-y) + var(--kpc-header-pad));
	padding-bottom: calc(var(--kpc-btn-pad-y) + var(--kpc-header-pad));
	border-radius: 0;
}

/* The light sweep itself. */
.kpc-btn--inquiry::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -70%;
	width: 45%;
	background: linear-gradient(
		100deg,
		transparent 0%,
		rgba(255, 255, 255, .15) 30%,
		rgba(255, 255, 255, .85) 50%,
		rgba(255, 255, 255, .15) 70%,
		transparent 100%
	);
	transform: skewX(-18deg);
	opacity: 0;
	pointer-events: none;
}

.kpc-btn--inquiry:hover::after,
.kpc-btn--inquiry:focus-visible::after {
	animation: kpc-sheen .8s ease-out;
}

@keyframes kpc-sheen {
	0%   { left: -70%; opacity: 0; }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { left: 125%; opacity: 0; }
}

/* --------------------------------------------------------------------- nav */

.kpc-menu {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kpc-menu li {
	position: relative;
}

.kpc-menu a {
	display: block;
	padding: 9px 8px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	color: var(--kpc-ink);
	border-radius: 3px;
}

/* A small chevron marks items that open a dropdown. Positioned against the
   link, not the li: on the stacked mobile menu the li also contains the
   expanded submenu, so 50% of the li would land on a child item. */
.kpc-menu > .menu-item-has-children > a {
	position: relative;
	padding-right: 24px;
}

.kpc-menu > .menu-item-has-children > a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 9px;
	width: 6px;
	height: 6px;
	margin-top: -5px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: .7;
}

/* The page you are on, and its section, stay marked. */
.kpc-menu > .current-menu-item > a,
.kpc-menu > .current-menu-ancestor > a,
.kpc-menu > .current_page_parent > a {
	color: var(--kpc-primary);
	font-weight: 700;
}

.kpc-menu .sub-menu .current-menu-item > a {
	color: var(--kpc-primary);
	font-weight: 700;
}

.kpc-menu a:hover,
.kpc-menu a:focus {
	color: var(--kpc-primary);
	background: rgba(0, 0, 0, .05);
}

.kpc-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--kpc-line);
	border-top: 3px solid var(--kpc-primary);
	border-radius: 3px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.kpc-menu li:hover > .sub-menu,
.kpc-menu li:focus-within > .sub-menu,
.kpc-menu li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* The last dropdowns open leftwards so they cannot run off the screen edge. */
.kpc-menu > li:nth-last-child(-n+2) > .sub-menu {
	left: auto;
	right: 0;
}

/* Third level: a fly-out beside its parent entry. Parents inside a dropdown
   carry a right-pointing chevron. */
.kpc-menu .sub-menu .menu-item-has-children > a {
	position: relative;
	padding-right: 28px;
}

.kpc-menu .sub-menu .menu-item-has-children > a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 12px;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	opacity: .7;
}

.kpc-menu .sub-menu .sub-menu {
	top: -9px;
	left: 100%;
	right: auto;
	margin-left: 6px;
	transform: translateX(6px);
}

.kpc-menu .sub-menu li:hover > .sub-menu,
.kpc-menu .sub-menu li:focus-within > .sub-menu,
.kpc-menu .sub-menu li.is-open > .sub-menu {
	transform: translateX(0);
}

/* Under the last two groups the fly-out opens to the left instead. */
.kpc-menu > li:nth-last-child(-n+2) .sub-menu .sub-menu {
	left: auto;
	right: 100%;
	margin-left: 0;
	margin-right: 6px;
	transform: translateX(-6px);
}

.kpc-menu > li:nth-last-child(-n+2) .sub-menu li:hover > .sub-menu,
.kpc-menu > li:nth-last-child(-n+2) .sub-menu li:focus-within > .sub-menu,
.kpc-menu > li:nth-last-child(-n+2) .sub-menu li.is-open > .sub-menu {
	transform: translateX(0);
}

.kpc-menu .sub-menu a,
.kpc-header--overlay .kpc-menu .sub-menu a {
	color: var(--kpc-ink);
	white-space: normal;
}

/* Dropdown entries a step lighter than the bold top-level items. */
.kpc-menu .sub-menu a {
	font-weight: 500;
}

/* The "overview" entry exists for the mobile accordion, where the parent no
   longer navigates. On desktop the parent link itself does, so hide it. */
.kpc-menu__overview {
	display: none;
}

.kpc-burger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid currentColor;
	border-radius: 3px;
	cursor: pointer;
}

.kpc-burger__bars,
.kpc-burger__bars::before,
.kpc-burger__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	margin: 0 auto;
	background: var(--kpc-ink);
	content: "";
}

.kpc-burger__bars::before {
	transform: translateY(-6px);
}

.kpc-burger__bars::after {
	transform: translateY(4px);
}

/* ------------------------------------------------------------------ slider */

.kpc-slider {
	/* Pinned to the top while the page scrolls, so everything below rises up
	   over it. Sticky rather than fixed: it keeps its space in the flow, so
	   the following content starts a full screen down and no ancestor needs a
	   compensating height. */
	position: sticky;
	top: 0;
	/* Lowest layer — every later section is given a higher z-index so it
	   paints over the pinned slider. */
	z-index: 0;
	/* Only visible while media loads — a softer grey than flat black. */
	background: #2e2e2e;
	overflow: hidden;
}

.kpc-slider__track {
	display: grid;
}

.kpc-slide {
	position: relative;
	grid-area: 1 / 1;
	min-height: var(--kpc-slide-h);
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .8s ease, visibility .8s;
}

.kpc-slide.is-active {
	opacity: 1;
	visibility: visible;
}

/* Signals that the video itself is clickable to play/pause. */
.kpc-slide[data-media="video"] {
	cursor: pointer;
}

.kpc-slide__media {
	position: absolute;
	inset: 0;
}

.kpc-slide__img,
.kpc-slide__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kpc-slide__veil {
	position: absolute;
	inset: 0;
	/* Even darkening: the copy is centred now, so a one-sided gradient (which
	   suited left-aligned text) would read as lopsided. */
	background: rgba(0, 0, 0, var(--kpc-overlay));
}

.kpc-slide__body {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--kpc-wrap);
	margin: 0 auto;
	/* Clears the floated header above and the controls below. The header is
	   content-sized now, so these are deliberate literals rather than a sum. */
	padding: 141px 24px 132px;
}

.kpc-slide__copy {
	max-width: 900px;
	/* Centred block, centred text. */
	margin-inline: auto;
	text-align: center;
	color: #fff;
	/* Carries legibility for the white copy, so the overlay can stay light
	   instead of dimming the whole image to keep text readable. */
	text-shadow: 0 2px 16px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
}

/* Lead lines above the heading: lighter, so the heading still leads. */
.kpc-slide__lead {
	margin: 0 0 10px;
	font-size: clamp(1.15rem, 2.6vw, 2rem);
	font-weight: 200;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: #fff;
}

.kpc-slide__title {
	margin: 0 0 18px;
	font-size: clamp(2.1rem, 5.6vw, 4.2rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.025em;
	color: #fff;
}

.kpc-slide__text {
	margin: 0 auto 30px;
	max-width: 58ch;
	font-size: clamp(1rem, 1.7vw, 1.25rem);
	font-weight: 200;
	line-height: 1.6;
	color: rgba(255, 255, 255, .93);
}

.kpc-slide__actions {
	margin: 0;
}

/* Controls */

.kpc-slider__controls {
	position: absolute;
	left: 50%;
	bottom: 34px;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 14px;
}

.kpc-slider__arrow {
	width: 42px;
	height: 42px;
	padding: 0;
	font-size: 26px;
	line-height: 1;
	color: #fff;
	background: rgba(0, 0, 0, .38);
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 50%;
	cursor: pointer;
	transition: background .18s ease;
}

.kpc-slider__arrow:hover {
	background: var(--kpc-primary);
	border-color: var(--kpc-primary);
}

.kpc-slider__dots {
	display: flex;
	align-items: center;
	gap: 9px;
}

.kpc-slider__dot {
	width: 32px;
	height: 5px;
	padding: 0;
	background: rgba(255, 255, 255, .42);
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	transition: background .2s ease, width .2s ease;
}

.kpc-slider__dot:hover {
	background: rgba(255, 255, 255, .7);
}

.kpc-slider__dot.is-active {
	width: 52px;
	background: #fff;
}

/* Icon only, on the left edge of the slide — sits outside the centred
   arrows/dots cluster, level with it. */
.kpc-slider__pause {
	position: absolute;
	left: 24px;
	bottom: 34px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	color: #fff;
	background: rgba(0, 0, 0, .38);
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 50%;
	cursor: pointer;
	transition: background .18s ease;
}

.kpc-slider__pause:hover {
	background: rgba(0, 0, 0, .62);
}

/* Two bars = pause; swaps to a triangle when already paused. */
.kpc-slider__pause-icon {
	width: 9px;
	height: 12px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

.kpc-slider__pause.is-paused .kpc-slider__pause-icon {
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid currentColor;
	border-right: 0;
	/* A left-border triangle sits visually off-centre in a circle. */
	margin-left: 3px;
}

.kpc-slider__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	height: 3px;
	background: rgba(255, 255, 255, .2);
}

.kpc-slider__progress span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--kpc-primary);
}

/* ------------------------------------------------ slider bottom bar */

.kpc-slider__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 7;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: var(--kpc-bar-h);
	padding: 12px 24px;
	color: #fff;
	background: var(--kpc-bar-bg);
	font-size: clamp(.95rem, 1.5vw, 1.15rem);
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background .2s ease;
}

.kpc-slider__bar:hover,
.kpc-slider__bar:focus {
	color: #fff;
	text-decoration: none;
	filter: brightness(1.12);
}

/* Chevron: a rotated corner, so it needs no icon font or SVG. */
.kpc-slider__bar-arrow {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-top: -4px;
	border-right: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	transform: rotate(45deg);
	animation: kpc-nudge 1.5s ease-in-out infinite;
}

/* Translating (3,3) inside a 45deg-rotated box resolves to straight down. */
@keyframes kpc-nudge {
	0%,
	100% { transform: rotate(45deg) translate(0, 0); }
	50%  { transform: rotate(45deg) translate(3px, 3px); }
}

/* With the bar present, lift everything that sat at the bottom edge. */
.kpc-slider--has-bar .kpc-slider__controls,
.kpc-slider--has-bar .kpc-slider__pause {
	bottom: calc(var(--kpc-bar-h) + 22px);
}

.kpc-slider--has-bar .kpc-slider__progress {
	bottom: var(--kpc-bar-h);
}

.kpc-slider--has-bar .kpc-slide__body {
	padding-bottom: calc(var(--kpc-bar-h) + 120px);
}

/* ---------------------------------------------------------------- content */

.kpc-section {
	/* Above the pinned slider, with an opaque background so it covers it
	   rather than letting the video show through. */
	position: relative;
	z-index: 2;
	padding: clamp(48px, 6vw, 88px) 0;
	background: #fff;
}

.kpc-page-title {
	font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.kpc-page-media {
	margin: 0 0 32px;
}

/* Reading column for text, with wide blocks (columns, media + text, gallery)
   allowed to use the whole wrap. Measured text stays centred under the title. */
.kpc-prose > * {
	margin-top: 0;
	margin-bottom: 1.1em;
}

/* rem, not ch: ch tracks each element's own font size, so headings would get
   a wider box than paragraphs and their left edges would not line up. */
.kpc-prose > :where(p, h2, h3, h4, ul, ol, blockquote, .wp-block-buttons, .kpc-notice) {
	max-width: 44rem;
	margin-left: auto;
	margin-right: auto;
}

.kpc-prose > :where(.wp-block-columns, .wp-block-media-text, .wp-block-gallery) {
	margin-top: clamp(28px, 4vw, 56px);
	margin-bottom: clamp(28px, 4vw, 56px);
}

.kpc-prose h2 {
	margin-top: 1.6em;
	font-size: 1.6rem;
}

.kpc-prose h3 {
	margin-top: 1.4em;
	font-size: 1.2rem;
}

.kpc-prose > h2:first-child,
.kpc-prose > h3:first-child {
	margin-top: 0;
}

.kpc-prose ul,
.kpc-prose ol {
	padding-left: 1.4em;
}

.kpc-prose li {
	margin-bottom: .35em;
}

.kpc-prose li::marker {
	color: var(--kpc-primary);
}

/* Core buttons take the theme button's look. */
.kpc-prose .wp-block-buttons {
	margin-top: 1.6em;
}

.kpc-prose .wp-block-button__link {
	padding: 13px 28px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: var(--kpc-primary);
	border: 2px solid var(--kpc-primary);
	border-radius: 3px;
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.kpc-prose .wp-block-button__link:hover,
.kpc-prose .wp-block-button__link:focus {
	color: #fff;
	background: var(--kpc-accent);
	border-color: var(--kpc-accent);
	transform: translateY(-1px);
}

/* Media + text: image gets a soft edge and the heading inside starts flush. */
.kpc-prose .wp-block-media-text {
	gap: clamp(24px, 4vw, 56px);
}

.kpc-prose .wp-block-media-text__media img {
	border-radius: 4px;
}

.kpc-prose .wp-block-media-text__content {
	padding: 0;
}

.kpc-prose .wp-block-media-text__content > :first-child {
	margin-top: 0;
}

/* Feature grid on Why KPC: each column is a small card with an accent rule. */
.kpc-prose .kpc-features .wp-block-column {
	padding: 26px 24px 8px;
	border: 1px solid var(--kpc-line);
	border-top: 3px solid var(--kpc-primary);
	border-radius: 4px;
}

.kpc-prose .kpc-features h3 {
	margin: 0 0 .6em;
	font-size: 1.1rem;
}

.kpc-prose .kpc-features p {
	font-weight: 200;
	color: var(--kpc-muted);
}

/* Faculty placeholders. */
.kpc-prose .kpc-staff .wp-block-column {
	text-align: center;
}

.kpc-prose .kpc-staff .wp-block-image {
	margin: 0 auto 14px;
	max-width: 180px;
}

.kpc-prose .kpc-staff h3 {
	margin: 0 0 .2em;
	font-size: 1.05rem;
}

.kpc-prose .kpc-staff p {
	font-size: .92rem;
	color: var(--kpc-muted);
}

.kpc-prose .wp-block-gallery img {
	border-radius: 4px;
}

/* Uniform tiles: the photos mix portrait and landscape, and without a fixed
   ratio a single portrait shot makes its whole row twice as tall. */
.kpc-prose .wp-block-gallery.is-cropped .wp-block-image img {
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
}

/* A lone photo between paragraphs: wider than the text, but not the whole
   wrap, which at 1200px reads as a wall. */
.kpc-prose > .wp-block-image {
	max-width: 60rem;
	margin-left: auto;
	margin-right: auto;
}

.kpc-prose > .wp-block-image img {
	border-radius: 4px;
}

/* Heading above the child-page cards. */
.kpc-cards__heading {
	margin: 0 0 28px;
	font-size: .84rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--kpc-primary);
}

.kpc-cards--children {
	border-top: 1px solid var(--kpc-line);
}

.kpc-card__title a {
	color: inherit;
	text-decoration: none;
}

.kpc-card__title a:hover,
.kpc-card__title a:focus {
	color: var(--kpc-primary);
}

.kpc-card__media {
	display: block;
}

.kpc-list__item {
	padding: 22px 0;
	border-bottom: 1px solid var(--kpc-line);
}

.kpc-list__title {
	margin: 0 0 4px;
	font-size: 1.3rem;
}

.kpc-list__meta {
	margin: 0 0 8px;
	font-size: .85rem;
	color: var(--kpc-muted);
}

.kpc-notice {
	padding: 22px 26px;
	background: #fff8e5;
	border: 1px solid #f0d693;
	border-radius: 3px;
}

/* ---------------------------------------------------------- home cards */

.kpc-cards {
	/* Opaque and above the slider, so it covers it cleanly on the way up.
	   The header's z-index of 100 still wins, so this passes under it. */
	position: relative;
	z-index: 8;
	padding: clamp(48px, 6vw, 86px) 0;
	background: #fff;
}

.kpc-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.kpc-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--kpc-line);
	border-radius: 6px;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}

.kpc-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .13);
}

.kpc-card__media {
	position: relative;
	aspect-ratio: 19 / 13;
	overflow: hidden;
	background: var(--kpc-line);
}

/* Home cards: a soft fade at the foot of the photo so the number badge and
   the title below read as one unit, and a brand rule that appears on hover. */
.kpc-card--home {
	border: 0;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .07);
}

.kpc-card--home::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--kpc-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
	z-index: 2;
}

.kpc-card--home:hover::before {
	transform: scaleX(1);
}

.kpc-card--home {
	position: relative;
}

.kpc-card--home .kpc-card__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent);
	pointer-events: none;
}

.kpc-card__num {
	position: absolute;
	left: 18px;
	bottom: 16px;
	z-index: 1;
	padding: 5px 10px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: #fff;
	background: var(--kpc-primary);
	border-radius: 3px;
}

.kpc-card--home .kpc-card__title {
	font-size: 1.25rem;
}

.kpc-card--home .kpc-card__link {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border: 2px solid var(--kpc-primary);
	border-radius: 999px;
	transition: background .18s ease, color .18s ease;
}

.kpc-card--home .kpc-card__link:hover,
.kpc-card--home .kpc-card__link:focus {
	color: #fff;
	background: var(--kpc-primary);
}

/* -------------------------------------------------------- news & about */

.kpc-news {
	/* Opaque and above the pinned slider, like the sections around it. */
	position: relative;
	z-index: 8;
	padding: clamp(48px, 6vw, 86px) 0;
	background: #fff;
}

.kpc-news__grid {
	display: grid;
	grid-template-columns: minmax(300px, 5fr) 7fr;
	gap: clamp(32px, 5vw, 64px);
	/* Both columns share the row height, so the notice box is exactly as
	   tall as the About column beside it. */
	align-items: stretch;
}

/* The notice box. --kpc-news-h is the height of the scrolling window. */
.kpc-news__box {
	/* About five lines tall, so a normal run of notices overflows and
	   scrolls rather than sitting in a half-empty box. */
	--kpc-news-h: clamp(200px, 17vw, 220px);
	/* Sky blue for the box itself, a deeper shade of it for its outline. */
	--kpc-news-bg: #c6deeb;
	--kpc-news-line: #a6c6db;
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--kpc-news-bg);
	border: 1px solid var(--kpc-news-line);
	border-top: 4px solid var(--kpc-secondary);
	border-radius: 6px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .07);
}

.kpc-news__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--kpc-news-line);
}

.kpc-news__heading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.kpc-news__bang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1;
	color: #fff;
	background: var(--kpc-secondary);
	border-radius: 50%;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--kpc-secondary) 12%, transparent);
}

.kpc-news__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--kpc-secondary);
	background: #fff;
	border: 2px solid var(--kpc-line);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}

.kpc-news__pause:hover,
.kpc-news__pause:focus-visible {
	border-color: var(--kpc-secondary);
}

.kpc-news__pause[hidden] {
	display: none;
}

.kpc-news__pause svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.kpc-news__pause[aria-pressed="true"] .kpc-news__icon-pause,
.kpc-news__pause[aria-pressed="false"] .kpc-news__icon-play {
	display: none;
}

/* A plain scrollable list until the script confirms the content overflows
   and takes over the scrolling. */
.kpc-news__viewport {
	position: relative;
	/* Fills the box below the heading; the box itself takes the About
	   column's height on wide screens. --kpc-news-h applies when stacked.
	   A zero flex basis matters: with `auto` the list's own height would
	   size the box, and the cloned notices the ticker adds would stretch
	   the whole row. */
	flex: 1 1 0px;
	min-height: 160px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.kpc-news__box.is-ticking .kpc-news__viewport {
	overflow: hidden;
}

/* Soft fades at the top and bottom so notices emerge and dissolve. */
.kpc-news__box.is-ticking .kpc-news__viewport::before,
.kpc-news__box.is-ticking .kpc-news__viewport::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 28px;
	z-index: 1;
	pointer-events: none;
}

.kpc-news__box.is-ticking .kpc-news__viewport::before {
	top: 0;
	background: linear-gradient(var(--kpc-news-bg), transparent);
}

.kpc-news__box.is-ticking .kpc-news__viewport::after {
	bottom: 0;
	background: linear-gradient(transparent, var(--kpc-news-bg));
}

.kpc-news__list {
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}

/* One notice per line: tag, text, date, chevron. */
/* Flat list on the tinted box: no dividers, no highlight block. The red
   New tag alone marks a new notice. */
.kpc-news__item {
	border: 0;
}

/* Blank spacer between one pass of the scrolling list and the next. */
.kpc-news__gap {
	height: 40px;
}

.kpc-news__row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 9px 16px 9px 18px;
	color: var(--kpc-ink);
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

a.kpc-news__row:hover,
a.kpc-news__row:focus-visible {
	color: var(--kpc-secondary);
	text-decoration: none;
}

.kpc-news__text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .84rem;
	font-weight: 500;
	line-height: 1.4;
}

.kpc-news__date {
	flex: 0 0 auto;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--kpc-muted);
}

.kpc-news__chevron {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--kpc-muted);
	transition: transform .18s ease, color .18s ease;
}

a.kpc-news__row:hover .kpc-news__chevron,
a.kpc-news__row:focus-visible .kpc-news__chevron {
	color: var(--kpc-secondary);
	transform: translateX(3px);
}

.kpc-news__tag {
	flex: 0 0 auto;
	display: inline-block;
	padding: 1px 8px;
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.6;
	color: #fff;
	background: var(--kpc-secondary);
	border-radius: 999px;
	/* A paler cut of the brand yellow for the glow: lightened towards white,
	   then softened. A permanent ring in it, on top of which the pulse ripples. */
	--kpc-news-glow: color-mix(in srgb, var(--kpc-inquiry-bg) 55%, #fff);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--kpc-news-glow) 85%, transparent);
	animation: kpc-news-pulse 1.6s ease-out infinite;
}

/* The ring that ripples out from the New tag, in the pale yellow: the
   standing ring, a ring pushing out from it, and a wide halo behind both,
   held for most of the beat. */
@keyframes kpc-news-pulse {
	0% {
		box-shadow:
			0 0 0 3px color-mix(in srgb, var(--kpc-news-glow) 85%, transparent),
			0 0 0 3px color-mix(in srgb, var(--kpc-news-glow) 85%, transparent),
			0 0 0 0 color-mix(in srgb, var(--kpc-news-glow) 55%, transparent);
	}
	60% {
		box-shadow:
			0 0 0 3px color-mix(in srgb, var(--kpc-news-glow) 85%, transparent),
			0 0 0 9px color-mix(in srgb, var(--kpc-news-glow) 70%, transparent),
			0 0 14px 20px color-mix(in srgb, var(--kpc-news-glow) 35%, transparent);
	}
	100% {
		box-shadow:
			0 0 0 3px color-mix(in srgb, var(--kpc-news-glow) 85%, transparent),
			0 0 0 13px transparent,
			0 0 20px 26px transparent;
	}
}

.kpc-news__empty {
	margin: 0;
	padding: 24px 20px;
	color: var(--kpc-muted);
}

/* The About column mirrors the Director section's typography. */
.kpc-news__eyebrow {
	margin: 0 0 10px;
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--kpc-primary);
}

.kpc-news__title {
	margin: 0 0 18px;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}

.kpc-news__body p {
	margin: 0 0 1em;
}

.kpc-news__cta {
	margin: 26px 0 0;
}

/* ----------------------------------------------------------- chairman */

.kpc-chairman {
	/* Opaque and above the pinned slider, like the sections around it. A
	   light tint of the brand colour so it alternates with the white
	   sections above and below. */
	position: relative;
	z-index: 8;
	padding: clamp(56px, 7vw, 100px) 0;
	background: color-mix(in srgb, var(--kpc-primary) 6%, #fff);
}

.kpc-chairman__grid {
	display: grid;
	grid-template-columns: minmax(260px, 5fr) 7fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.kpc-chairman__eyebrow {
	margin: 0 0 18px;
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--kpc-primary);
}

/* The quotation: large, with an oversized opening mark behind it. */
.kpc-chairman__quote {
	position: relative;
	margin: 0 0 26px;
	padding: 0 0 0 26px;
	border-left: 4px solid var(--kpc-primary);
}

.kpc-chairman__quote p {
	margin: 0;
	font-size: clamp(1.25rem, 2.2vw, 1.7rem);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--kpc-ink);
}

.kpc-chairman__message p {
	margin: 0 0 1em;
}

.kpc-chairman__closing {
	margin: 8px 0 0;
	font-size: 1.05rem;
	font-weight: 700;
	font-style: italic;
	color: var(--kpc-primary);
}

.kpc-chairman__sign {
	margin: 26px 0 0;
	line-height: 1.4;
}

.kpc-chairman__name {
	display: block;
	font-size: 1.05rem;
}

.kpc-chairman__title {
	display: block;
	font-size: .9rem;
	font-weight: 600;
	color: var(--kpc-muted);
}

.kpc-chairman__cta {
	margin: 28px 0 0;
}

.kpc-chairman__figure {
	position: relative;
	margin: 0 22px 22px 0;
}

/* Offset block of brand colour behind the portrait, down and to the right. */
.kpc-chairman__figure::before {
	content: "";
	position: absolute;
	inset: 22px -22px -22px 22px;
	background: var(--kpc-primary);
	border-radius: 6px;
}

.kpc-chairman__photo {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
}

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

	.kpc-chairman__media {
		max-width: 400px;
	}
}

/* --------------------------------------------------------- programmes */

/* "Proposed Academic Programme": a deep navy band with orchid and purple
   accents, after the supplied design. A soft glow and a fading dot grid give
   the background depth; the cards are translucent "glass" with a gradient
   edge. Opaque and above the pinned slider, like the sections around it. */
.kpc-programmes {
	--kpc-prog-bg: #0b1140;
	--kpc-prog-orchid: #e8b0f2;
	--kpc-prog-purple: #6b1a86;
	--kpc-prog-magenta: #9b2fc4;
	--kpc-prog-ink: #eef0f8;
	--kpc-prog-muted: #c3c8dd;
	--kpc-prog-line: rgba(255, 255, 255, .12);
	position: relative;
	z-index: 8;
	overflow: hidden;
	padding: clamp(48px, 6vw, 88px) 0;
	color: var(--kpc-prog-ink);
	background: var(--kpc-prog-bg);
}

/* Glow: orchid top-left, purple top-right. */
.kpc-programmes::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 55% at 12% 0%, rgba(232, 176, 242, .22), transparent 70%),
		radial-gradient(ellipse 55% 50% at 88% 10%, rgba(107, 26, 134, .6), transparent 70%),
		radial-gradient(ellipse 70% 40% at 50% 100%, rgba(155, 47, 196, .18), transparent 70%);
	pointer-events: none;
}

/* Dot grid, fading out towards the bottom. */
.kpc-programmes::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.5px);
	background-size: 26px 26px;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 75%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 75%);
	pointer-events: none;
}

.kpc-programmes > .kpc-wrap {
	position: relative;
	z-index: 1;
}

/* ---- head */

.kpc-programmes__head {
	max-width: 680px;
	margin: 0 auto clamp(28px, 4vw, 44px);
	text-align: center;
}

.kpc-programmes__session {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding: 5px 12px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kpc-prog-orchid);
	background: rgba(107, 26, 134, .35);
	border: 1px solid rgba(232, 176, 242, .35);
	border-radius: 999px;
}

/* A small glowing dot before the tag text. */
.kpc-programmes__session::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--kpc-prog-orchid);
	box-shadow: 0 0 0 4px rgba(232, 176, 242, .25);
}

.kpc-programmes__heading {
	margin: 0;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: #fff;
	/* The last two words carry the orchid via a gradient across the line. */
	background: linear-gradient(90deg, #fff 0%, #fff 45%, var(--kpc-prog-orchid) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ---- programme cards */

.kpc-programmes__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.kpc-programmes__card {
	position: relative;
	padding: clamp(20px, 2.4vw, 26px) clamp(18px, 2.2vw, 24px);
	background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04));
	border: 1px solid var(--kpc-prog-line);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .26);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	overflow: hidden;
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* Gradient rule along the top edge. */
.kpc-programmes__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--kpc-prog-orchid), var(--kpc-prog-magenta));
}

.kpc-programmes__card:hover {
	transform: translateY(-4px);
	border-color: rgba(232, 176, 242, .45);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .36), 0 0 0 1px rgba(232, 176, 242, .15);
}

.kpc-programmes__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 14px;
	color: var(--kpc-prog-orchid);
	background: rgba(232, 176, 242, .12);
	border: 1px solid rgba(232, 176, 242, .3);
	border-radius: 11px;
}

.kpc-programmes__icon svg {
	width: 22px;
	height: 22px;
}

.kpc-programmes__title {
	margin: 0 0 8px;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

.kpc-programmes__text {
	margin: 0;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--kpc-prog-muted);
}

/* ---- note and affiliation */

.kpc-programmes__note {
	margin: 22px 0 0;
	font-size: .88rem;
	text-align: center;
	color: var(--kpc-prog-muted);
}

.kpc-programmes__affiliation {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 22px 0 0;
	padding: 14px clamp(18px, 2.4vw, 24px);
	background: linear-gradient(90deg, var(--kpc-prog-purple), var(--kpc-prog-magenta));
	border-radius: 12px;
	box-shadow: 0 14px 36px rgba(107, 26, 134, .32);
}

.kpc-programmes__affiliation-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	color: #fff;
	background: rgba(255, 255, 255, .14);
	border-radius: 50%;
}

.kpc-programmes__affiliation-text {
	margin: 0;
	font-size: .93rem;
	font-weight: 600;
	line-height: 1.5;
	color: #fff;
}

.kpc-programmes__affiliation-label {
	display: block;
	margin-bottom: 2px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}

/* ---- figures */

.kpc-programmes__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: clamp(30px, 4vw, 44px) 0 0;
	padding: clamp(22px, 3vw, 30px) 0 0;
	border-top: 1px solid var(--kpc-prog-line);
	list-style: none;
	text-align: center;
}

.kpc-programmes__stat + .kpc-programmes__stat {
	border-left: 1px solid var(--kpc-prog-line);
}

.kpc-programmes__value {
	display: block;
	font-family: var(--kpc-font-brand);
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.02em;
	background: linear-gradient(180deg, #fff 20%, var(--kpc-prog-orchid) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.kpc-programmes__label {
	display: block;
	margin-top: 6px;
	font-size: .9rem;
	font-weight: 500;
	color: var(--kpc-prog-muted);
}

/* ---- button */

.kpc-programmes__cta {
	margin: clamp(26px, 3vw, 36px) 0 0;
	text-align: center;
}

.kpc-programmes__btn,
.kpc-programmes__btn:hover,
.kpc-programmes__btn:focus {
	color: #2a0e3a;
	background: var(--kpc-prog-orchid);
	border-color: var(--kpc-prog-orchid);
	box-shadow: 0 12px 30px rgba(232, 176, 242, .3);
}

.kpc-programmes__btn:hover,
.kpc-programmes__btn:focus {
	background: #f3cdf8;
	border-color: #f3cdf8;
}

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

	.kpc-programmes__affiliation {
		flex-direction: column;
		text-align: center;
	}
}

@media (max-width: 600px) {
	.kpc-programmes__stats {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.kpc-programmes__stat + .kpc-programmes__stat {
		padding-top: 26px;
		border-left: 0;
		border-top: 1px solid var(--kpc-prog-line);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kpc-programmes__card {
		transition: none;
	}

	.kpc-programmes__card:hover {
		transform: none;
	}
}

/* --------------------------------------------------------------- team */

.kpc-team {
	position: relative;
	z-index: 8;
	padding: clamp(56px, 7vw, 96px) 0;
	background: #fff;
}

.kpc-team__head {
	max-width: 640px;
	margin: 0 auto clamp(32px, 4vw, 52px);
	text-align: center;
}

.kpc-team__eyebrow {
	margin: 0 0 10px;
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--kpc-primary);
}

.kpc-team__heading {
	margin: 0 0 12px;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
}

/* Optional accent line beneath the heading (Customize → Home: Meet Our Team).
   Centred, since the heading is. */
.kpc-team__heading--line {
	position: relative;
	margin-bottom: 18px;
	padding-bottom: 16px;
}

.kpc-team__heading--line::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 64px;
	height: 3px;
	border-radius: 2px;
	background: var(--kpc-accent);
	transform: translateX(-50%);
}

.kpc-team__intro {
	margin: 0;
	color: var(--kpc-muted);
}

.kpc-team__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(24px, 3vw, 40px);
}

.kpc-member {
	text-align: center;
}

.kpc-member__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.kpc-member__link:hover .kpc-member__name,
.kpc-member__link:focus-visible .kpc-member__name {
	color: var(--kpc-primary);
}

.kpc-member__figure {
	position: relative;
	margin: 0 14px 14px 0;
}

/* Offset block of brand colour behind the portrait, matching the
   Chairman’s Message and Principal sections. */
.kpc-member__figure::before {
	content: "";
	position: absolute;
	inset: 14px -14px -14px 14px;
	background: var(--kpc-primary);
	border-radius: 6px;
	transition: transform .2s ease;
}

.kpc-member__link:hover .kpc-member__figure::before {
	transform: translate(3px, 3px);
}

.kpc-member__photo {
	position: relative;
	display: block;
	width: 100%;
	/* The image tag carries its own height attribute; auto lets the
	   aspect ratio below decide instead. */
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 14px 36px rgba(0, 0, 0, .14);
	background: var(--kpc-line);
}

.kpc-member__name {
	margin: 18px 0 4px;
	font-size: 1.05rem;
	line-height: 1.3;
	transition: color .18s ease;
}

.kpc-member__title {
	margin: 0;
	font-size: .88rem;
	font-weight: 600;
	color: var(--kpc-muted);
}

.kpc-team__cta {
	margin: clamp(32px, 4vw, 48px) 0 0;
	text-align: center;
}

/* Team cards inside page content (the [kpc_team] shortcode). */
.kpc-prose > .kpc-team-inline {
	max-width: none;
	margin-top: clamp(40px, 5vw, 64px);
}

.kpc-team-inline__heading {
	margin: 0 0 clamp(24px, 3vw, 36px);
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
	text-align: center;
}

.kpc-team__grid--3 {
	grid-template-columns: repeat(3, 1fr);
	max-width: 900px;
	margin: 0 auto;
}

@media (max-width: 900px) {
	.kpc-team__grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.kpc-team__grid--3 {
		grid-template-columns: 1fr;
		max-width: 320px;
	}
}

@media (max-width: 900px) {
	.kpc-team__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 24px;
	}
}

@media (max-width: 480px) {
	.kpc-team__grid {
		grid-template-columns: 1fr;
		max-width: 320px;
		margin: 0 auto;
	}
}

/* ----------------------------------------------------------- director */

.kpc-director {
	/* Opaque and above the pinned slider, like the cards below it. */
	position: relative;
	z-index: 8;
	padding: clamp(56px, 7vw, 100px) 0;
	background: #f6f5f2;
}

.kpc-director__grid {
	display: grid;
	grid-template-columns: minmax(260px, 5fr) 7fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.kpc-director__figure {
	position: relative;
	margin: 0 22px 22px 0;
}

/* An offset block of brand colour behind the portrait. */
.kpc-director__figure::before {
	content: "";
	position: absolute;
	inset: 22px -22px -22px 22px;
	background: var(--kpc-primary);
	border-radius: 6px;
}

.kpc-director__photo {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
}

.kpc-director__eyebrow {
	margin: 0 0 10px;
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--kpc-primary);
}

.kpc-director__name {
	margin: 0 0 8px;
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
}

.kpc-director__title {
	margin: 0 0 24px;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--kpc-muted);
}

.kpc-director__bio p {
	margin: 0 0 1em;
}

.kpc-director__facts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.kpc-director__fact {
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--kpc-line);
	border-left: 4px solid var(--kpc-primary);
	border-radius: 4px;
}

.kpc-director__fact-value {
	display: block;
	font-size: 1.35rem;
	line-height: 1.15;
	letter-spacing: -.01em;
}

.kpc-director__fact-label {
	display: block;
	margin-top: 4px;
	font-size: .86rem;
	color: var(--kpc-muted);
}

.kpc-director__cta {
	margin: 30px 0 0;
}

/* ------------------------------------------------------------- videos */

.kpc-videos {
	position: relative;
	z-index: 8;
	padding: clamp(56px, 7vw, 100px) 0;
	background: #f6f5f2;
}

.kpc-videos__head {
	max-width: 62ch;
	margin: 0 auto 38px;
	text-align: center;
}

.kpc-videos__eyebrow {
	margin: 0 0 10px;
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--kpc-primary);
}

.kpc-videos__heading {
	margin: 0 0 12px;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.kpc-videos__intro {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 200;
	color: var(--kpc-muted);
}

.kpc-videos__more {
	margin: 36px 0 0;
	text-align: center;
}

.kpc-video-grid {
	display: grid;
	/* minmax(0, 1fr), not 1fr: a column must not grow to fit a caption that
	   cannot wrap; the caption trims instead. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

/* One video: a 16:9 poster that becomes the player when clicked. */
.kpc-video {
	margin: 0;
	/* Lets a one-line caption trim rather than widen the grid column. */
	min-width: 0;
}

.kpc-video__poster {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #111;
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
	transition: transform .2s ease, box-shadow .2s ease;
}

.kpc-video__poster:hover,
.kpc-video__poster:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .2);
}

.kpc-video__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.kpc-video__poster:hover .kpc-video__thumb {
	transform: scale(1.04);
}

/* YouTube-style play button, drawn in CSS. */
.kpc-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	margin: -24px 0 0 -34px;
	background: var(--kpc-secondary);
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
	transition: transform .2s ease;
}

.kpc-video__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -11px 0 0 -7px;
	border-style: solid;
	border-width: 11px 0 11px 20px;
	border-color: transparent transparent transparent #fff;
}

.kpc-video__poster:hover .kpc-video__play {
	transform: scale(1.08);
}

.kpc-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.kpc-video__label {
	margin: 12px 0 0;
	font-size: .95rem;
	font-weight: 600;
	text-align: center;
	color: var(--kpc-ink);
	/* Always a single line under the video: a long caption is trimmed with an
	   ellipsis rather than wrapping (the full text is in the title tooltip). */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Inside page content: a single video sits in the wide reading measure. */
.kpc-prose > .kpc-video {
	max-width: 60rem;
	margin: clamp(28px, 4vw, 56px) auto;
}

.kpc-prose > .kpc-video .kpc-video__label {
	text-align: center;
}

.kpc-prose > .kpc-video-grid {
	margin: clamp(28px, 4vw, 56px) 0;
}

.kpc-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.kpc-card:hover .kpc-card__img {
	transform: scale(1.05);
}

.kpc-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 26px 24px 28px;
}

.kpc-card__title {
	margin: 0 0 10px;
	font-size: 1.3rem;
	line-height: 1.25;
}

.kpc-card__text {
	margin: 0 0 18px;
	font-weight: 200;
	color: var(--kpc-muted);
}

/* Pushed to the foot of the card so links line up across the row. */
.kpc-card__more {
	margin: auto 0 0;
	padding-top: 6px;
}

.kpc-card__link {
	font-size: .88rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-decoration: none;
}

.kpc-card__link::after {
	content: " →";
}

/* ------------------------------------- page sections with side menu */

/* Template "Sections with side menu": a card of headings down the left, and a
   card on the right holding the chosen section. Until the script marks the
   block ready, every panel shows in order and the list is plain anchor links.
   On a phone the panels become a stack of accordion cards (see below). */
.kpc-page--sections .kpc-page__body {
	/* A soft backdrop so the white cards read as cards. */
	background: #f4f6f9;
}

.kpc-sections {
	display: grid;
	grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
	gap: clamp(24px, 3vw, 40px);
	align-items: start;
}

.kpc-sections__intro {
	margin-bottom: clamp(28px, 4vw, 48px);
}

/* ---- the list of headings */

.kpc-sections__nav {
	/* Stays in view while a long section scrolls; clear of the docked header. */
	position: sticky;
	top: 96px;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--kpc-line);
	border-radius: 14px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .07);
}

.kpc-sections__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kpc-sections__list li + li {
	margin-top: 4px;
}

.kpc-sections__tab {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 9px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--kpc-ink);
	text-decoration: none;
	transition: color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

/* Arrow that appears on the chosen heading. */
.kpc-sections__tab::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg) translateX(-4px);
	opacity: 0;
	transition: opacity .16s ease, transform .16s ease;
}

.kpc-sections__tab:hover,
.kpc-sections__tab:focus-visible {
	color: var(--kpc-primary);
	background: #f4f6f9;
	outline: none;
}

.kpc-sections__tab.is-active {
	color: #fff;
	background: var(--kpc-primary);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

.kpc-sections__tab.is-active::after {
	opacity: 1;
	transform: rotate(45deg) translateX(0);
}

/* ---- the section card */

.kpc-sections__panels {
	padding: clamp(24px, 3vw, 44px);
	background: #fff;
	border: 1px solid var(--kpc-line);
	border-radius: 14px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .07);
}

.kpc-sections__panel {
	/* Anchor jumps land below the header. */
	scroll-margin-top: 110px;
}

.kpc-sections__panel:focus {
	outline: none;
}

.kpc-sections__panel + .kpc-sections__panel {
	margin-top: clamp(36px, 5vw, 64px);
	padding-top: clamp(36px, 5vw, 64px);
	border-top: 1px solid var(--kpc-line);
}

.kpc-sections.is-ready .kpc-sections__panel + .kpc-sections__panel {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.kpc-sections.is-ready .kpc-sections__panel:not(.is-active) {
	display: none;
}

.kpc-sections.is-ready .kpc-sections__panel.is-active {
	animation: kpc-section-in .28s ease;
}

@keyframes kpc-section-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* Heading with a short accent rule beneath it. */
.kpc-sections__heading {
	position: relative;
	margin: 0 0 26px;
	padding-bottom: 16px;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.15;
	border-bottom: 1px solid var(--kpc-line);
}

.kpc-sections__heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 64px;
	height: 3px;
	border-radius: 2px;
	background: var(--kpc-accent);
}

/* The heading's clickable form, used only in the phone accordion below. */
.kpc-sections__toggle {
	display: none;
}

.kpc-sections__body > :first-child {
	margin-top: 0;
}

.kpc-sections__body > :last-child {
	margin-bottom: 0;
}

/* The panel already sits beside the menu, so its text column aligns with the
   section heading rather than centring inside the panel as page prose does. */
.kpc-sections__body > :where(p, h2, h3, h4, ul, ol, blockquote, .wp-block-buttons, .kpc-notice) {
	margin-left: 0;
	margin-right: 0;
}

@media (max-width: 900px) {
	/* Accordion: every heading as its own card, the chosen one open beneath. */
	.kpc-sections {
		display: block;
	}

	.kpc-sections__nav {
		display: none;
	}

	.kpc-sections__panels {
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
		}

	.kpc-sections__panel {
		background: #fff;
		border: 1px solid var(--kpc-line);
		border-radius: 12px;
		box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
		overflow: hidden;
		transition: box-shadow .16s ease;
	}

	.kpc-sections__panel.is-active {
		/* A coloured edge marks the open card. */
		box-shadow: inset 4px 0 0 var(--kpc-primary), 0 8px 24px rgba(0, 0, 0, .08);
	}

	.kpc-sections__panel + .kpc-sections__panel,
	.kpc-sections.is-ready .kpc-sections__panel + .kpc-sections__panel {
		margin-top: 12px;
		padding-top: 0;
		border-top: 0;
	}

	.kpc-sections.is-ready .kpc-sections__panel:not(.is-active) {
		display: block;
	}

	.kpc-sections.is-ready .kpc-sections__panel:not(.is-active) .kpc-sections__body {
		display: none;
	}

	.kpc-sections.is-ready .kpc-sections__panel.is-active {
		animation: none;
	}

	.kpc-sections__heading {
		margin: 0;
		padding: 0;
		font-size: 1.05rem;
		border-bottom: 0;
	}

	.kpc-sections__heading::after {
		display: none;
	}

	.kpc-sections__title {
		display: none;
	}

	.kpc-sections__toggle {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 16px 18px;
		font: inherit;
		font-weight: 700;
		line-height: 1.3;
		text-align: left;
		color: var(--kpc-ink);
		background: none;
		border: 0;
		cursor: pointer;
	}

		/* Chevron: points down when closed, up when open. */
	.kpc-sections__toggle::after {
		content: "";
		flex: 0 0 auto;
		width: 9px;
		height: 9px;
		margin-left: auto;
		margin-top: -4px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform .16s ease;
	}

	.kpc-sections__toggle[aria-expanded="true"] {
		color: var(--kpc-primary);
	}

	.kpc-sections__toggle[aria-expanded="true"]::after {
		margin-top: 4px;
		transform: rotate(-135deg);
	}

	.kpc-sections__body {
		padding: 4px 18px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kpc-sections.is-ready .kpc-sections__panel.is-active {
		animation: none;
	}

	.kpc-sections__tab,
	.kpc-sections__tab::after,
	.kpc-sections__toggle::after {
		transition: none;
	}
}

/* ------------------------------------------------------- contact banner */

.kpc-banner {
	position: relative;
	/* Same token the home slider uses, so both are the same height and the
	   Customizer's slider-height setting governs the pair. */
	min-height: var(--kpc-slide-h);
	background: #2e2e2e;
	overflow: hidden;
}

.kpc-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kpc-banner__veil {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--kpc-overlay));
}

/* Inner pages: a full-viewport banner would push every word below the fold,
   so they get a shorter one. Contact and Apply keep the tall banner. Either
   default can be overridden per page in the Page Banner box; a custom pixel
   height arrives as an inline min-height instead. */
.kpc-banner--page {
	min-height: clamp(340px, 56svh, 620px);
}

/* ----------------------------------------------------- page slider */

/* A slider assigned to an inner page stands in for the banner image, so it
   sits in normal flow like the banner rather than pinned like the home one. */
.kpc-slider--page {
	position: relative;
}

/* Slide Size "Banner": the same short height as .kpc-banner--page. A custom
   pixel height arrives as an inline min-height instead. */
.kpc-slide--short {
	min-height: clamp(340px, 56svh, 620px);
}

/* Any slide shorter than full screen. The slide body's padding is the home
   slider's, sized to clear a full-screen header and controls; on a shorter
   slide the copy would otherwise be crushed between them. */
.kpc-slide--compact .kpc-slide__body {
	padding: 120px 24px 96px;
}

.kpc-slide--compact .kpc-slide__title {
	margin-bottom: 12px;
	font-size: clamp(1.8rem, 4vw, 3rem);
}

.kpc-slide--compact .kpc-slide__text {
	margin-bottom: 22px;
}

/* ------------------------------------------------------------ page head */

.kpc-page-head {
	text-align: center;
	/* Tightened: this sits directly above the page body or enquiry icon, and
	   two full section paddings back to back left a large gap between them. */
	padding-bottom: clamp(18px, 2.4vw, 30px);
}

.kpc-page-head__title {
	margin: 0 0 16px;
	font-size: clamp(1.9rem, 4.4vw, 3rem);
}

.kpc-page-head__body {
	max-width: 62ch;
	margin: 0 auto;
	font-size: 1.08rem;
	font-weight: 200;
	color: var(--kpc-muted);
}

.kpc-page-head__body p {
	margin: 0 0 .6em;
}

.kpc-page__body {
	padding-top: 0;
}

/* ------------------------------------------------------------- enquire */

.kpc-enquire {
	background: var(--kpc-surface, #f8f8f8);
	/* Matches the tightened padding above it. */
	padding-top: clamp(26px, 3.2vw, 44px);
}

.kpc-enquire__head {
	max-width: 640px;
	margin: 0 auto clamp(28px, 4vw, 44px);
	text-align: center;
}

.kpc-enquire__icon {
	display: block;
	width: clamp(88px, 12vw, 124px);
	margin: 0 auto 20px;
	line-height: 0;
}

.kpc-enquire__icon svg {
	width: 100%;
	height: auto;
}

.kpc-enquire__title {
	margin: 0 0 10px;
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}

.kpc-enquire__intro {
	margin: 0;
	font-weight: 200;
	color: var(--kpc-muted);
}

/* ---------------------------------------------------------------- form */

.kpc-form {
	max-width: 820px;
	margin: 0 auto;
}

.kpc-form__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px 22px;
}

.kpc-field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.kpc-field--wide {
	grid-column: 1 / -1;
}

/* Off-screen rather than display:none — some bots skip hidden inputs. */
.kpc-field--trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kpc-field__label {
	font-size: .84rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--kpc-ink);
}

.kpc-field__req {
	color: var(--kpc-primary);
}

.kpc-field__input {
	width: 100%;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--kpc-ink);
	background: #fff;
	border: 1px solid #d8d8d8;
	border-radius: 3px;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.kpc-field__input:focus {
	border-color: var(--kpc-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--kpc-primary) 12%, transparent);
	outline: none;
}

.kpc-field__input--area {
	resize: vertical;
	line-height: 1.6;
}

.kpc-field__input.has-error {
	border-color: #c1281f;
	background: #fff8f8;
}

.kpc-field__err {
	font-size: .85rem;
	color: #c1281f;
}

.kpc-field__count {
	align-self: flex-end;
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
	color: var(--kpc-muted);
}

.kpc-field__count.is-over {
	font-weight: 700;
	color: #c1281f;
}

.kpc-field__help {
	font-size: .82rem;
	color: var(--kpc-muted);
}

/* ----------------------------------------------- application form extras */

/* Sections of the Apply form. A fieldset carries the grouping for screen
   readers; the browser default border and inline legend are replaced with a
   rule under the legend instead. */
.kpc-fieldset {
	margin: 0 0 30px;
	padding: 0;
	border: 0;
	min-width: 0;   /* without this a fieldset refuses to let its grid shrink */
	overflow: hidden;   /* contain overflow from the horizontal-scrolling table */
}

.kpc-fieldset:last-of-type {
	margin-bottom: 0;
}

.kpc-fieldset__legend {
	display: block;
	width: 100%;
	margin: 0 0 16px;
	padding: 0 0 8px;
	font-size: .84rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--kpc-primary);
	border-bottom: 1px solid var(--kpc-line);
}

/* Match the height of a text input: a select's padding renders differently. */
.kpc-field__input--select {
	padding: 11px 14px;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--kpc-ink) 50%),
	                  linear-gradient(135deg, var(--kpc-ink) 50%, transparent 50%);
	background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 38px;
}

.kpc-field--check {
	gap: 8px;
}

.kpc-check {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	cursor: pointer;
}

.kpc-check__box {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--kpc-primary);
}

.kpc-check__box.has-error {
	outline: 2px solid #c1281f;
	outline-offset: 2px;
}

.kpc-check__text {
	font-size: .95rem;
	line-height: 1.55;
	color: var(--kpc-ink);
}

.kpc-form__actions {
	margin: 26px 0 0;
	text-align: center;
}

.kpc-form__req-note {
	display: block;
	margin: 12px 0 0;
	font-size: .82rem;
	color: var(--kpc-muted);
}

.kpc-form--apply {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 16px;
	overflow-x: hidden;
}

.kpc-fieldset__help {
	margin: -6px 0 16px;
	font-size: .88rem;
	color: var(--kpc-muted);
}

/* A label for a run of related fields, e.g. the two exam-city preferences. */
.kpc-field__subheading {
	grid-column: 1 / -1;
	margin: 6px 0 -6px;
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--kpc-muted);
}

.kpc-form__grid--thirds {
	grid-template-columns: repeat(3, 1fr);
}

.kpc-field__file {
	width: 100%;
	padding: 9px 12px;
	font-family: inherit;
	font-size: .92rem;
	background: #fff;
	border: 1px dashed #c9c9c9;
	border-radius: 3px;
	cursor: pointer;
}

.kpc-field__file:focus {
	border-color: var(--kpc-primary);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--kpc-primary) 12%, transparent);
}

.kpc-field__file.has-error {
	border-color: #c1281f;
	background: #fff8f8;
}

/* ------------------------------------------- previous qualification table */

/* Ten columns will not fit a phone, so the table scrolls sideways rather than
   forcing every cell to shrink into unusability. */
.kpc-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.kpc-qual {
	width: 100%;
	border-collapse: collapse;
	min-width: 1040px;
}

.kpc-qual th,
.kpc-qual td {
	padding: 7px 6px;
	text-align: left;
	vertical-align: top;
	border: 1px solid var(--kpc-line);
}

.kpc-qual thead th {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--kpc-ink);
	background: #f6f6f6;
}

.kpc-qual__sr {
	width: 48px;
	text-align: center;
	font-weight: 700;
	color: var(--kpc-muted);
	background: #fafafa;
}

.kpc-qual .kpc-field__input {
	padding: 8px 9px;
	font-size: .92rem;
}

.kpc-qual th.is-narrow,
.kpc-qual td.is-narrow {
	width: 92px;
}

.kpc-qual .kpc-field__err {
	display: block;
	margin-top: 4px;
	font-size: .78rem;
}

.kpc-form__notice {
	max-width: 820px;
	margin: 0 auto 26px;
	padding: 16px 20px;
	border-radius: 3px;
	border: 1px solid;
}

.kpc-form__notice--ok {
	color: #14532d;
	background: #eaf7ee;
	border-color: #a7d8b5;
}

.kpc-form__notice--bad {
	color: #7f1d1d;
	background: #fdeceb;
	border-color: #e5a9a4;
}

/* --------------------------------------------------------------- where */

.kpc-where__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.kpc-where__org {
	margin: 0 0 12px;
	font-size: 1.35rem;
	line-height: 1.3;
}

.kpc-where__address {
	margin: 0;
	font-weight: 200;
	line-height: 1.8;
	color: var(--kpc-muted);
}

.kpc-where__line {
	margin: 0 0 12px;
	font-weight: 200;
}

.kpc-where__k {
	display: block;
	font-size: .76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--kpc-ink);
}

/* ----------------------------------------------------------------- footer */

/* ---------------------------------------------------------- CTA strip */

.kpc-cta {
	/* Also above the pinned slider. */
	position: relative;
	z-index: 2;
	padding: clamp(40px, 5vw, 64px) 0;
	color: #fff;
	background: linear-gradient(120deg, var(--kpc-secondary) 0%, color-mix(in srgb, var(--kpc-secondary) 60%, black) 100%);
}

.kpc-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px 40px;
}

.kpc-cta__copy {
	flex: 1 1 420px;
}

.kpc-cta__heading {
	margin: 0 0 8px;
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	color: #fff;
}

.kpc-cta__text {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 200;
	color: rgba(255, 255, 255, .88);
}

.kpc-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.kpc-cta .kpc-btn {
	padding: 15px 30px;
}

/* Outline button for the secondary action on a coloured background. */
.kpc-btn--ghost {
	color: #fff;
	background: transparent;
	border-color: rgba(255, 255, 255, .7);
}

.kpc-btn--ghost:hover,
.kpc-btn--ghost:focus {
	color: var(--kpc-secondary);
	background: #fff;
	border-color: #fff;
}

/* -------------------------------------------------------------- footer */

.kpc-footer {
	position: relative;
	z-index: 2;
	padding: clamp(52px, 6vw, 84px) 0 0;
	color: rgba(255, 255, 255, .74);
	background: #141414;
	font-size: .93rem;
}

.kpc-footer a {
	color: rgba(255, 255, 255, .84);
	text-decoration: none;
	transition: color .16s ease;
}

.kpc-footer a:hover,
.kpc-footer a:focus {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--kpc-inquiry-bg);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.kpc-footer__grid {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1.25fr 1.35fr;
	gap: 40px;
}

/* Brand column */

.kpc-footer__org {
	margin: 0 0 10px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
}

.kpc-footer__about {
	margin: 0 0 22px;
	font-weight: 200;
	line-height: 1.75;
}

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

.kpc-footer__social a,
.kpc-footer__social-pending {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: #fff;
	background: rgba(255, 255, 255, .09);
	border-radius: 50%;
	transition: background .18s ease, transform .18s ease;
}

.kpc-footer__social a:hover,
.kpc-footer__social a:focus {
	text-decoration: none;
	background: var(--kpc-secondary);
	transform: translateY(-2px);
}

/* Column headings: the brand yellow reads well on the dark ground where the
   red would not. */
.kpc-footer__heading {
	margin: 6px 0 18px;
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--kpc-inquiry-bg);
}

.kpc-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kpc-footer__menu li {
	margin: 0 0 11px;
}

.kpc-footer__menu a {
	display: inline-block;
	padding: 1px 0;
}

/* Contact column */

.kpc-footer__line {
	margin: 0 0 14px;
	line-height: 1.6;
}

.kpc-footer__k {
	display: block;
	margin-bottom: 2px;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .45);
}

.kpc-footer__map {
	font-weight: 700;
}

/* Bottom bar */

.kpc-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: clamp(40px, 5vw, 60px);
	padding: 20px 0 22px;
	font-size: .85rem;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.kpc-footer__copy {
	margin: 0;
	font-weight: 200;
}

.kpc-footer__top {
	font-weight: 700;
}

/* The crest closes the Contact column, under the address and hours. */
.kpc-footer__logo {
	margin: 22px 0 0;
}

.kpc-footer__logo a {
	display: block;
	line-height: 0;
}

.kpc-footer__logo a:hover,
.kpc-footer__logo a:focus {
	text-decoration: none;
}

/* Same size as the header crest at every breakpoint. */
.kpc-footer__logo img,
.kpc-footer__logo svg {
	display: block;
	width: var(--kpc-logo-w);
	height: auto;
}

/* ------------------------------------------------------------- responsive */

/* Between the full desktop bar and the burger layout the bar is at its most
   crowded: keep the institute name, drop its descriptor, and tighten the crest
   column, nav and button so everything stays on one line. */
@media (min-width: 901px) and (max-width: 1340px) {
	:root {
		--kpc-logo-w: 120px;
		--kpc-logo-gap: 4px;
	}

	.kpc-header__inner {
		gap: 14px;
	}

	.kpc-wordmark__name {
		font-size: .98rem;
	}

	.kpc-wordmark__tag {
		display: none;
	}

	.kpc-menu a {
		padding: 9px 7px;
		font-size: 13px;
	}

	.kpc-menu > .menu-item-has-children > a {
		padding-right: 21px;
	}

	.kpc-header__right {
		gap: 12px;
	}

	.kpc-btn--inquiry {
		padding-inline: 6px;
		font-size: 15px;
		letter-spacing: .02em;
	}
}

/* Laptops (1200–1340px): the menu still needs the compact spacing above,
   but there is room for the full two-line wordmark. */
@media (min-width: 1200px) and (max-width: 1340px) {
	.kpc-wordmark__name {
		font-size: 1.55rem;
	}

	.kpc-wordmark__tag {
		display: block;
	}
}

@media (max-width: 900px) {
	body {
		overflow-x: hidden;
	}

	:root {
		--kpc-logo-w: 120px;
		/* Aligned with the bar's reduced side padding. */
		--kpc-logo-left: 20px;
		--kpc-logo-gap: 2px;
	}

	.kpc-header__inner {
		padding: 8px 20px;
	}

	.kpc-cards__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	.kpc-director__grid {
		grid-template-columns: 1fr;
	}

	.kpc-director__media {
		max-width: 400px;
	}

	.kpc-video-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.kpc-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 36px 32px;
	}

	.kpc-footer__brand {
		grid-column: 1 / -1;
		max-width: 520px;
	}

	.kpc-burger {
		display: block;
		order: 2;
	}

	.kpc-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		/* 22 links outrun a phone screen, and once the header docks (fixed)
		   the page no longer scrolls them into view — so the menu scrolls. */
		max-height: calc(100svh - 112px);
		overflow-y: auto;
		padding: 10px 24px 18px;
		background: #fff;
		border-bottom: 1px solid var(--kpc-line);
		box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
	}

	.kpc-nav.is-open {
		display: block;
	}

	.kpc-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.kpc-menu a,
	.kpc-header--overlay .kpc-menu > li > a {
		padding: 12px 6px;
		color: var(--kpc-ink);
		border-bottom: 1px solid var(--kpc-line);
		border-radius: 0;
	}

	.kpc-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		border-left: 3px solid var(--kpc-primary);
		box-shadow: none;
		margin: 0 0 0 12px;
		padding: 0;
	}

	/* Third-level fly-outs stack inline like every other level. */
	.kpc-menu .sub-menu .sub-menu,
	.kpc-menu > li:nth-last-child(-n+2) .sub-menu .sub-menu {
		top: auto;
		left: auto;
		right: auto;
		margin: 0 0 0 12px;
		transform: none;
	}

	/* Accordion at every level: with the script running, a group is folded
	   until its parent is tapped. Without it, everything stays open. */
	.js .kpc-menu .menu-item-has-children > .sub-menu {
		display: none;
	}

	.js .kpc-menu .menu-item-has-children.is-expanded > .sub-menu {
		display: block;
		margin-bottom: 6px;
	}

	/* The chevron becomes the fold/unfold indicator: a big tap target on the
	   right, pointing down when closed and up once open, at every level. */
	.kpc-menu .menu-item-has-children > a {
		padding-right: 44px;
	}

	.kpc-menu .menu-item-has-children > a::after {
		right: 16px;
		width: 8px;
		height: 8px;
		margin-top: -6px;
		transform: rotate(45deg);
		transition: transform .2s ease;
	}

	.kpc-menu .menu-item-has-children.is-expanded > a {
		color: var(--kpc-primary);
	}

	.kpc-menu .menu-item-has-children.is-expanded > a::after {
		transform: rotate(-135deg);
		margin-top: -1px;
	}

	.kpc-menu__overview {
		display: block;
	}

	.kpc-menu__overview > a {
		font-weight: 600;
	}

	/* The burger becomes an × while the panel is open. */
	.kpc-burger__bars,
	.kpc-burger__bars::before,
	.kpc-burger__bars::after {
		transition: transform .2s ease, background .2s ease;
	}

	.kpc-burger[aria-expanded="true"] .kpc-burger__bars {
		background: transparent;
	}

	.kpc-burger[aria-expanded="true"] .kpc-burger__bars::before {
		transform: translateY(0) rotate(45deg);
	}

	.kpc-burger[aria-expanded="true"] .kpc-burger__bars::after {
		transform: translateY(-2px) rotate(-45deg);
	}

	/* Dimmed page behind the open panel; tapping it closes the menu. */
	.kpc-nav-backdrop {
		position: fixed;
		inset: 0;
		z-index: 99;
		display: none;
		background: rgba(0, 0, 0, .45);
	}

	.kpc-nav-backdrop.is-open {
		display: block;
	}

	.kpc-header__right {
		gap: 12px;
	}

	.kpc-btn--inquiry {
		/* Not the `padding` shorthand: that would reset the padding-top the
		   button needs to keep reaching the top of the screen. */
		padding-inline: 7px;
		padding-bottom: 9px;
		font-size: 15px;
		letter-spacing: .02em;
	}

	.kpc-wordmark__name {
		font-size: 1.5rem;
	}

	.kpc-wordmark__tag {
		font-size: .42rem;
	}
}

@media (max-width: 600px) {
	html {
		overflow-x: hidden;
	}

	body {
		overflow-x: hidden;
	}

	.kpc-slide__body {
		padding-bottom: 150px;
	}

	.kpc-slide--compact .kpc-slide__body {
		padding-bottom: 110px;
	}

	.kpc-slider__controls {
		gap: 10px;
		bottom: 26px;
	}

	.kpc-slider__arrow {
		width: 36px;
		height: 36px;
		font-size: 22px;
	}

	.kpc-slider__pause {
		left: 16px;
		bottom: 26px;
		width: 42px;
		height: 42px;
	}

	:root {
		--kpc-bar-h: 46px;
	}

	.kpc-slider__bar {
		gap: 10px;
		padding: 10px 16px;
		font-size: .92rem;
	}

	.kpc-cards__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.kpc-director__facts {
		grid-template-columns: 1fr;
	}

	.kpc-footer__grid {
		grid-template-columns: 1fr;
	}

	.kpc-cta__inner {
		flex-direction: column;
		align-items: stretch;
	}

	/* In a column the 420px flex-basis would become a forced height. */
	.kpc-cta__copy {
		flex: 0 0 auto;
	}

	.kpc-cta__actions {
		flex-direction: column;
	}

	.kpc-cta .kpc-btn {
		text-align: center;
	}

	.kpc-form__grid,
	.kpc-form__grid--thirds,
	.kpc-where__grid {
		grid-template-columns: 1fr;
	}

	:root {
		--kpc-logo-w: 96px;
		--kpc-logo-gap: 14px;
	}

	/* On mobile, reduce the header-top margin so there's less wasted space. */
	.kpc-header:not(.kpc-header--overlay) {
		margin-top: 0;
	}

	/* Mobile logo: use margin instead of top positioning for better mobile
	   view. 11px centres the 96px crest on the bar now that the bar starts
	   36px down (it was 29px when the bar started at 51px). */
	.kpc-header--crest .kpc-logo {
		margin-top: 11px;
	}

	/* No room beside the crest, the Inquire button and the burger on a phone;
	   the crest carries the name there. */
	.kpc-wordmark {
		display: none;
	}

	/* Mobile: shrink the inquiry button further for small screens. */
	.kpc-btn--inquiry {
		padding-inline: 7px;
		padding-bottom: 8px;
		font-size: 13px;
		letter-spacing: .02em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kpc-slide {
		transition: none;
	}

	.kpc-btn {
		transition: none;
	}

	/* No sweeping highlight; keep the glow, which does not move. */
	.kpc-btn--inquiry:hover::after,
	.kpc-btn--inquiry:focus-visible::after {
		animation: none;
	}

	/* The arrow stays, it just stops nudging. */
	.kpc-slider__bar-arrow {
		animation: none;
	}

	/* The New tag stays highlighted, it just stops pulsing. The notice box
	   never auto-scrolls for these visitors; the script leaves it as a list. */
	.kpc-news__tag {
		animation: none;
	}
}

/* ------------------------------------------------------------ faculty */

/* Full width of the page wrap, not the reading column. */
.kpc-prose > .kpc-faculty {
	max-width: none;
	margin-top: clamp(28px, 4vw, 48px);
}

/* Lead profile: the Director section's layout. */
.kpc-faculty__lead {
	display: grid;
	grid-template-columns: minmax(240px, 4fr) 8fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
	padding: clamp(28px, 4vw, 48px);
	background: #f6f5f2;
	border-radius: 6px;
}

.kpc-fac__figure {
	position: relative;
	margin: 0 16px 16px 0;
}

/* Offset block of brand colour behind the portrait. */
.kpc-fac__figure::before {
	content: "";
	position: absolute;
	inset: 16px -16px -16px 16px;
	background: var(--kpc-primary);
	border-radius: 6px;
}

.kpc-fac__media--lead .kpc-fac__figure {
	margin: 0 22px 22px 0;
}

.kpc-fac__media--lead .kpc-fac__figure::before {
	inset: 22px -22px -22px 22px;
}

.kpc-fac__photo {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .16);
}

.kpc-fac__eyebrow {
	margin: 0 0 8px;
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--kpc-primary);
}

.kpc-fac__name {
	margin: 0 0 4px;
}

.kpc-fac__name--lead {
	font-size: clamp(1.5rem, 2.8vw, 2.1rem);
}

.kpc-fac__title {
	margin: 0 0 4px;
	font-size: .92rem;
	font-weight: 600;
	color: var(--kpc-primary);
}

.kpc-fac__quals {
	margin: 0 0 14px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--kpc-muted);
}

.kpc-fac__bio p {
	margin: 0 0 1em;
}

.kpc-fac__bio p:last-child {
	margin-bottom: 0;
}

.kpc-fac__excerpt {
	margin: 0;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--kpc-muted);
}

.kpc-fac__contact {
	margin: 12px 0 0;
	font-size: .9rem;
}

/* The rest of the team as cards. */
.kpc-faculty__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(28px, 4vw, 44px) 32px;
	margin-top: clamp(36px, 5vw, 64px);
}

.kpc-fac {
	display: flex;
	flex-direction: column;
}

.kpc-fac .kpc-fac__figure {
	margin-bottom: 22px;
}

.kpc-fac .kpc-fac__name {
	font-size: 1.2rem;
}

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

	.kpc-fac__media--lead {
		max-width: 360px;
	}

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

@media (max-width: 600px) {
	.kpc-faculty__grid {
		grid-template-columns: 1fr;
		max-width: 360px;
	}
}

/* ----------------------------------------------------------- whatsapp */

/* Floating chat button, bottom right. Sits under the header (100) and the
   mobile nav backdrop (99) so the open menu covers it. */
.kpc-wa {
	--kpc-wa-green: #25d366;
	--kpc-wa-green-dark: #1da851;
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 98;
	display: flex;
	align-items: center;
	gap: 0;
	height: 58px;
	padding: 0;
	color: #fff;
	background: var(--kpc-wa-green);
	border-radius: 999px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
	text-decoration: none;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.kpc-wa::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid var(--kpc-wa-green);
	opacity: 0;
	pointer-events: none;
	animation: kpc-wa-pulse 2.6s ease-out infinite;
}

.kpc-wa:hover,
.kpc-wa:focus {
	color: #fff;
	background: var(--kpc-wa-green-dark);
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
}

.kpc-wa__icon {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin: 0 14px;
	fill: currentColor;
}

/* The label slides out to the left of the icon on hover or focus, on
   devices that can hover. Touch devices keep the plain round button. */
.kpc-wa__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	opacity: 0;
	transition: max-width .3s ease, opacity .2s ease, padding .3s ease;
}

@media (hover: hover) {
	.kpc-wa:hover .kpc-wa__label,
	.kpc-wa:focus .kpc-wa__label {
		max-width: 240px;
		padding-right: 22px;
		opacity: 1;
	}
}

/* Editors only, when no number is saved yet. */
.kpc-wa--setup {
	--kpc-wa-green: #6b7280;
	--kpc-wa-green-dark: #4b5563;
}

.kpc-wa--setup::before {
	animation: none;
}

.kpc-wa--setup .kpc-wa__label {
	max-width: 240px;
	padding-right: 22px;
	opacity: 1;
}

@keyframes kpc-wa-pulse {
	0% {
		transform: scale(1);
		opacity: .7;
	}
	70%,
	100% {
		transform: scale(1.45);
		opacity: 0;
	}
}

@media (max-width: 600px) {
	.kpc-wa {
		right: 16px;
		bottom: 16px;
		height: 54px;
	}

	.kpc-wa__icon {
		width: 28px;
		height: 28px;
		margin: 0 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kpc-wa::before {
		animation: none;
	}

	.kpc-wa,
	.kpc-wa__label {
		transition: none;
	}
}

@media print {
	.kpc-wa {
		display: none;
	}
}

/* ------------------------------------------------- news & about: responsive */

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

	.kpc-news__box {
		--kpc-news-h: 280px;
	}

	.kpc-news__viewport {
		flex: none;
		height: var(--kpc-news-h);
		min-height: 0;
	}
}

@media (max-width: 600px) {
	.kpc-news__box {
		--kpc-news-h: 270px;
	}

	.kpc-news__head {
		padding: 14px 16px;
	}

	.kpc-news__row {
		gap: 8px;
		padding: 11px 14px 11px 15px;
	}
}

/* --------------------------------------------------- light home bands */

/* Meet Our Team, the home cards and the videos sit on soft sky-blue tints,
   each a shade apart so neighbouring sections still read as separate. The
   child-page cards on inner pages keep their white background. */
.kpc-team {
	background: linear-gradient(180deg, #edf6fc 0%, #e3eff9 100%);
}

.kpc-cards:not(.kpc-cards--children) {
	background: #f3f8fd;
}

.kpc-videos {
	background: linear-gradient(180deg, #e8f2fa 0%, #dbe9f5 100%);
}

/* White cards lift gently off the tint. */
.kpc-cards:not(.kpc-cards--children) .kpc-card {
	border-color: transparent;
	box-shadow: 0 8px 26px rgba(11, 120, 186, .10);
}

/* -------------------------------------------------------- leader profile */

/* "Director Profile" template: one person's portrait beside their message —
   currently the Directors page, for Smt. Sangita Gupta. Same recipe as the
   home page's Principal section (offset colour block behind the portrait). */
.kpc-leaderpage {
	margin: clamp(8px, 2vw, 16px) 0 clamp(40px, 6vw, 72px);
}

.kpc-leaderpage__grid {
	display: grid;
	grid-template-columns: minmax(260px, 5fr) 7fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.kpc-leaderpage__figure {
	position: relative;
	margin: 0 22px 22px 0;
}

/* An offset block of brand colour behind the portrait. */
.kpc-leaderpage__figure::before {
	content: "";
	position: absolute;
	inset: 22px -22px -22px 22px;
	background: var(--kpc-primary);
	border-radius: 6px;
}

.kpc-leaderpage__photo {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
}

.kpc-leaderpage__eyebrow {
	margin: 0 0 10px;
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--kpc-primary);
}

.kpc-leaderpage__name {
	margin: 0 0 8px;
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
}

.kpc-leaderpage__position {
	margin: 0 0 16px;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--kpc-muted);
}

.kpc-leaderpage__email {
	margin: 0 0 26px;
}

.kpc-leaderpage__email a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--kpc-primary);
	text-decoration: none;
}

.kpc-leaderpage__email a:hover,
.kpc-leaderpage__email a:focus-visible {
	text-decoration: underline;
}

.kpc-leaderpage__email-icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.kpc-leaderpage__message > :first-child {
	margin-top: 0;
}

.kpc-leaderpage__message > :last-child {
	margin-bottom: 0;
}

.kpc-leaderpage__cta {
	margin: 26px 0 0;
}

/* The message sits in the same left-aligned column as the name and position
   above it, rather than centring as page prose normally does. */
.kpc-leaderpage__message > :where(p, h2, h3, h4, ul, ol, blockquote, .wp-block-buttons, .kpc-notice) {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

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

	.kpc-leaderpage__media {
		max-width: 400px;
	}
}

/* ------------------------------------------------------------- popup modal */

/* Native <dialog>, opened via showModal() in kpc.js (initModals()). Its
   default centring and border are reset so the design below applies. */
.kpc-modal {
	position: fixed;
	inset: 0;
	max-width: min(720px, calc(100% - 32px));
	max-height: min(85vh, calc(100% - 64px));
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
	overflow: hidden;
}

.kpc-modal::backdrop {
	background: rgba(10, 12, 20, .6);
}

.kpc-modal__panel {
	position: relative;
	max-height: min(85vh, calc(100vh - 64px));
	overflow-y: auto;
	padding: clamp(32px, 5vw, 48px);
}

.kpc-modal__close {
	position: sticky;
	top: 0;
	left: 100%;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0 0 0 auto;
	color: var(--kpc-muted);
	background: #f6f5f2;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: color .16s ease, background .16s ease;
}

.kpc-modal__close:hover,
.kpc-modal__close:focus-visible {
	color: #fff;
	background: var(--kpc-primary);
}

.kpc-modal__eyebrow {
	margin: 4px 0 20px;
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--kpc-primary);
}

.kpc-modal__body h3 {
	margin: 1.6em 0 .6em;
	font-size: 1.15rem;
}

.kpc-modal__body > :first-child {
	margin-top: 0;
}

.kpc-modal__body > :last-child {
	margin-bottom: 0;
}

/* Left-aligned throughout, rather than centring as page prose does. */
.kpc-modal__body > :where(p, h2, h3, h4, ul, ol, blockquote) {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

@media (max-width: 600px) {
	.kpc-modal {
		max-width: calc(100% - 20px);
		max-height: calc(100% - 40px);
	}

	.kpc-modal__panel {
		padding: 28px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kpc-modal {
		transition: none;
	}
}

/* ---------------------------------------------------------- welcome popup */

/* Customize → Home: Welcome Popup. Builds on .kpc-modal (a native <dialog>):
   a slim coloured head with an icon tile, title and tagline; a body with a
   heading, stacked pill buttons (the first highlighted) and a Skip link.
   Opened by assets/js/welcome.js. */
.kpc-welcome {
	max-width: min(680px, calc(100% - 32px));
	border-radius: 18px;
	box-shadow: 0 40px 100px rgba(0, 0, 0, .45);
}

.kpc-welcome::backdrop {
	background: rgba(10, 12, 20, .62);
	backdrop-filter: blur(4px);
}

.kpc-welcome[open] {
	animation: kpc-welcome-in .45s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes kpc-welcome-in {
	from {
		opacity: 0;
		transform: translateY(18px) scale(.96);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.kpc-welcome__panel {
	max-height: min(88vh, calc(100vh - 48px));
	overflow-y: auto;
	background: #fff;
}

/* ----- head: brand colour, icon tile left, title and tagline beside it */

.kpc-welcome__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 64px 20px 26px;
	color: #fff;
	background: linear-gradient(120deg, var(--kpc-primary), color-mix(in srgb, var(--kpc-primary) 70%, #001a33));
}

.kpc-welcome__tile {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	color: var(--kpc-inquiry-ink, #1a1a1a);
	background: var(--kpc-inquiry-bg, var(--kpc-accent));
	border-radius: 16px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
}

.kpc-welcome__tile svg {
	display: block;
}

.kpc-welcome__tile--picture {
	overflow: hidden;
	background: #fff;
}

/* The site logo: shown whole, on white, with a little room around it. */
.kpc-welcome__tile--logo {
	padding: 6px;
	background: #fff;
}

.kpc-welcome__tile--logo .kpc-welcome__img {
	object-fit: contain;
}

.kpc-welcome__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kpc-welcome__head-text {
	min-width: 0;
}

.kpc-welcome__title {
	margin: 0;
	font-size: clamp(1.15rem, 2.6vw, 1.45rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.kpc-welcome__tagline {
	margin: 5px 0 0;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--kpc-inquiry-bg, var(--kpc-accent));
}

.kpc-welcome__close {
	position: absolute;
	top: 16px;
	right: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: #fff;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	opacity: .85;
	transition: opacity .16s ease, background .16s ease, transform .16s ease;
}

.kpc-welcome__close:hover,
.kpc-welcome__close:focus-visible {
	opacity: 1;
	background: rgba(255, 255, 255, .16);
	transform: rotate(90deg);
}

/* ----- body */

.kpc-welcome__body {
	padding: clamp(26px, 4vw, 36px) clamp(24px, 5vw, 36px) clamp(18px, 3vw, 24px);
	text-align: center;
}

.kpc-welcome__heading {
	max-width: 30ch;
	margin: 0 auto 26px;
	font-size: clamp(1.35rem, 3vw, 1.8rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.015em;
	color: var(--kpc-primary);
}

.kpc-welcome__text {
	max-width: 46ch;
	margin: -12px auto 26px;
	color: var(--kpc-muted);
	line-height: 1.65;
}

.kpc-welcome__actions {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Pill buttons the full width of the card. */
.kpc-welcome__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 60px;
	padding: 14px 24px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 999px;
	transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.kpc-welcome__btn:hover,
.kpc-welcome__btn:focus-visible {
	transform: translateY(-1px);
}

.kpc-welcome__btn-icon {
	flex: 0 0 auto;
}

/* The first button: the enquiry colour with a soft glow — or the colour
   chosen in the Customizer (--kpc-wl-b1, set inline on the dialog with a
   readable text colour and a hover shade). */
.kpc-welcome__btn--main {
	min-height: 66px;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--kpc-wl-b1-ink, var(--kpc-inquiry-ink, #1a1a1a));
	background: var(--kpc-wl-b1, var(--kpc-inquiry-bg, var(--kpc-accent)));
	border-color: var(--kpc-wl-b1, var(--kpc-inquiry-edge, var(--kpc-inquiry-bg, var(--kpc-accent))));
	box-shadow: 0 12px 28px color-mix(in srgb, var(--kpc-wl-b1, var(--kpc-inquiry-bg, var(--kpc-accent))) 45%, transparent);
}

.kpc-welcome__btn--main:hover,
.kpc-welcome__btn--main:focus-visible {
	background: var(--kpc-wl-b1-hover, color-mix(in srgb, var(--kpc-inquiry-bg, var(--kpc-accent)) 88%, black));
	border-color: var(--kpc-wl-b1-hover, color-mix(in srgb, var(--kpc-inquiry-bg, var(--kpc-accent)) 88%, black));
	box-shadow: 0 14px 32px color-mix(in srgb, var(--kpc-wl-b1, var(--kpc-inquiry-bg, var(--kpc-accent))) 55%, transparent);
}

/* The others: a pale tint of the brand colour with a thin edge — or the
   chosen colour (--kpc-wl-b2), filled. */
.kpc-welcome__btn--soft {
	color: var(--kpc-wl-b2-ink, var(--kpc-ink));
	background: var(--kpc-wl-b2, color-mix(in srgb, var(--kpc-primary) 6%, white));
	border-color: var(--kpc-wl-b2, color-mix(in srgb, var(--kpc-primary) 28%, white));
}

.kpc-welcome__btn--soft:hover,
.kpc-welcome__btn--soft:focus-visible {
	color: var(--kpc-wl-b2-hover-ink, #fff);
	background: var(--kpc-wl-b2-hover, var(--kpc-primary));
	border-color: var(--kpc-wl-b2-hover, var(--kpc-primary));
}

.kpc-welcome__note {
	margin: 20px 0 0;
	font-size: .86rem;
	color: var(--kpc-muted);
}

.kpc-welcome__skip {
	display: inline-block;
	margin: 18px 0 0;
	padding: 6px 14px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--kpc-muted);
	background: transparent;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: color .16s ease, background .16s ease;
}

.kpc-welcome__skip:hover,
.kpc-welcome__skip:focus-visible {
	color: var(--kpc-ink);
	background: #f3f3f1;
}

@media (max-width: 600px) {
	.kpc-welcome {
		max-width: calc(100% - 20px);
		border-radius: 14px;
	}

	.kpc-welcome__head {
		gap: 14px;
		padding: 16px 54px 16px 18px;
	}

	.kpc-welcome__tile {
		width: 52px;
		height: 52px;
		border-radius: 13px;
	}

	.kpc-welcome__tile svg {
		width: 26px;
		height: 26px;
	}

	.kpc-welcome__close {
		top: 12px;
		right: 10px;
	}

	.kpc-welcome__btn--main {
		min-height: 60px;
		font-size: 1.05rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kpc-welcome[open] {
		animation: none;
	}

	.kpc-welcome__close,
	.kpc-welcome__btn,
	.kpc-welcome__skip {
		transition: none;
	}
}