/* ===========================================================================
   MEET OUR ADVISERS

   The founders, then a postcode finder and a map of five adviser regions.
   Ported from the concept preview at _previews/meet-our-advisers.html, with
   the preview's generic class names (.hero, .btn, .quote, .legend) prefixed —
   on a real page those would collide with half the site.

   Colours are the four brand hues plus navy, one per region. They are literals
   rather than variables because the map needs each as an SVG fill, a stroke
   and a drop-shadow colour, and the South West's #a8b93f is a darkened Express
   that exists only here: Express itself is too pale to read as a filled region
   against white.

   Replaces team.css, which is still present so the old page can be restored.
   =========================================================================== */

.advisers-hero,
.advisers-founders,
.advisers-map-section {
	--adv-navy:  #253d47;
	--adv-line:  #e4e9eb;
	--adv-muted: var(--ci-color-text-muted);
}


/* ── Our founders ─────────────────────────────────────────────────────────── */

.advisers-founders {
	background-color: #f9f9f9;
	padding: 4.5rem 0;
}

.advisers-founders__head {
	margin: 0 0 2.25rem;
}

.advisers-founders h2 {
	font-family: var(--ci-font-primary);
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 0.6rem;
}

.advisers-founders__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem;
}

/* The photo and the name sit together on a row, and the words run the full
   width of the card underneath. A portrait column beside a tall paragraph
   gives a narrow measure and a lot of white space under the picture. */
.advisers-founder {
	background-color: #ffffff;
	border-radius: 1.5rem;
	padding: 2rem;
}

.advisers-founder__top {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	margin: 0 0 1.5rem;
}

.advisers-founder img {
	width: 112px;
	height: 112px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	border: 4px solid var(--ci-color-engage);
	background-color: var(--adv-line);
}

.advisers-founder__name {
	font-family: var(--ci-font-primary);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 0.1rem;
}

.advisers-founder__role {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	color: #ffffff;
	background-color: var(--adv-navy);
	border-radius: 9999px;
	padding: 0.28rem 0.8rem;
	margin: 0.45rem 0 0;
}

/* First person, because that is how they are written — set as speech rather
   than as a description of somebody. */
.advisers-founder__bio {
	font-size: 0.98rem;
	line-height: 1.7;
	color: var(--ci-color-text);
	margin: 0;
}


/* ── Hero and postcode finder ─────────────────────────────────────────────── */

.advisers-hero {
	background-color: var(--adv-navy);
	color: #ffffff;
	padding: 4rem 0 2.25rem;
	position: relative;
	overflow: clip;
}

.advisers-hero::before,
.advisers-hero::after {
	content: '';
	position: absolute;
	background-color: rgba(255, 255, 255, 0.06);
	transform: rotate(45deg);
	pointer-events: none;
}

.advisers-hero::before {
	width: 420px;
	height: 420px;
	border-radius: 2.75rem;
	top: -190px;
	left: -150px;
}

.advisers-hero::after {
	width: 240px;
	height: 240px;
	border-radius: 2rem;
	bottom: -120px;
	right: -60px;
}

.advisers-hero .site-container {
	position: relative;
	z-index: 1;
}

.advisers-hero h1 {
	font-family: var(--ci-font-primary);
	font-size: clamp(2.4rem, 4.6vw, 3.6rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
	color: #ffffff;
}

.advisers-hero__intro {
	color: rgba(255, 255, 255, 0.82);
	margin: 0 0 2.25rem;
	font-size: 1.1rem;
}

.advisers-finder {
	max-width: 620px;
}

.advisers-finder h2 {
	font-family: var(--ci-font-primary);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 0.2rem;
	color: #ffffff;
}

.advisers-finder p {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.95rem;
	margin: 0 0 1rem;
}

/* The submit sits inside the field rather than beside it: one control instead
   of two, and the arrow says "go" without a second label competing with the
   heading above it. The input's right padding clears the button. */
.advisers-finder__row {
	position: relative;
	max-width: 420px;
}

.advisers-finder input {
	width: 100%;
	font-family: var(--ci-font-primary);
	font-size: 1rem;
	padding: 0.9rem 3.6rem 0.9rem 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 9999px;
	background-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.advisers-finder input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.advisers-finder input:focus {
	outline: 2px solid var(--ci-color-engage);
	outline-offset: 2px;
}

.advisers-finder__go {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background-color: var(--ci-color-engage);
	color: #ffffff;
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0;
}

.advisers-finder__go svg {
	width: 18px;
	height: 18px;
}

.advisers-finder__go:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.advisers-finder__msg {
	margin: 0.7rem 0 0;
	font-size: 0.9rem;
	color: var(--ci-color-engage);
	min-height: 1.3em;
}


/* ── Map and profile ──────────────────────────────────────────────────────── */

.advisers-map-section {
	padding: 3rem 0 4.5rem;
}

.advisers-map-section__head {
	margin: 0 0 2.5rem;
}

.advisers-map-section h2 {
	font-family: var(--ci-font-primary);
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 0.6rem;
}

.advisers-map-section__head p {
	color: var(--adv-muted);
	font-size: 1.1rem;
}

/* Centred, not top-aligned: the card is a good deal shorter than the map, and
   pinned to the top it read as a short note floating beside a tall picture. */
.advisers-map-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: center;
}

.uk-map {
	width: 100%;
	height: auto;
	display: block;
}

.uk-map__bg {
	fill: #e9edee;
	stroke: #e9edee;
	stroke-width: 2;
	stroke-linejoin: round;
}

/* Each region is stroked in its OWN colour, not white. The boundaries are
   simplified per region, so a shared border ends up very slightly different on
   each side of it — with a white stroke those differences read as cracks
   running through the country. Stroking in the fill colour closes them and
   still leaves each region legible against its neighbour.

   Unselected regions sit right back, so the chosen one is the only thing
   carrying full colour. Keeping a tint of their own colour rather than going
   grey means the map still reads as five areas at a glance. */
.uk-map__region {
	stroke-width: 2;
	stroke-linejoin: round;
	cursor: pointer;
	opacity: 0.3;
	transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.uk-map__region:focus {
	outline: none;
}

.uk-map__region:focus-visible {
	outline: 3px solid var(--adv-navy);
	outline-offset: 2px;
}

.uk-map__region[data-region="north-east"] {
	fill: #af4d76;
	stroke: #af4d76;
	--adv-glow: rgba(175, 77, 118, 0.45);
}

.uk-map__region[data-region="north-west"] {
	fill: #f99d31;
	stroke: #f99d31;
	--adv-glow: rgba(249, 157, 49, 0.5);
}

.uk-map__region[data-region="south-west"] {
	fill: #a8b93f;
	stroke: #a8b93f;
	--adv-glow: rgba(168, 185, 63, 0.5);
}

.uk-map__region[data-region="south-east"] {
	fill: #538da9;
	stroke: #538da9;
	--adv-glow: rgba(83, 141, 169, 0.45);
}

.uk-map__region[data-region="northern-ireland"] {
	fill: #253d47;
	stroke: #253d47;
	--adv-glow: rgba(37, 61, 71, 0.45);
}

/* The selected region: full colour, a white edge to cut it away from its
   neighbours, its own colour thrown behind it as a glow, and a shade larger.
   JS also moves it to the end of the SVG so it draws over the regions it
   touches — SVG has no z-index, only document order. */
.uk-map__region.is-active {
	opacity: 1;
	stroke: #ffffff;
	stroke-width: 5;
	transform: scale(1.018);
	transform-box: fill-box;
	transform-origin: center;
	filter: drop-shadow(0 8px 16px var(--adv-glow));
}

/* One row, five pills, each carrying its own region colour. Sized off the
   available width rather than the label, so "South West" and "North West &
   Wales" do not make two very different buttons. Doubles as the keyboard and
   small-screen route into the same thing. */
.advisers-legend {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.5rem;
	margin: 1.5rem 0 0;
}

.advisers-legend button {
	font-family: var(--ci-font-primary);
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.7rem 0.5rem;
	border-radius: 9999px;
	border: 2px solid transparent;
	background-color: var(--adv-tint);
	color: var(--adv-deep);
	cursor: pointer;
	text-align: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.advisers-legend button[data-region="north-east"] {
	--adv-tint: #f3e3ea;
	--adv-deep: #8e3a5e;
	--adv-solid: #af4d76;
}

.advisers-legend button[data-region="north-west"] {
	--adv-tint: #fdeedb;
	--adv-deep: #b56920;
	--adv-solid: #f99d31;
}

.advisers-legend button[data-region="south-west"] {
	--adv-tint: #eef2dc;
	--adv-deep: #6f7d24;
	--adv-solid: #a8b93f;
}

.advisers-legend button[data-region="south-east"] {
	--adv-tint: #e3edf3;
	--adv-deep: #3a6e87;
	--adv-solid: #538da9;
}

.advisers-legend button[data-region="northern-ireland"] {
	--adv-tint: #e4e9eb;
	--adv-deep: #253d47;
	--adv-solid: #253d47;
}

.advisers-legend button.is-active {
	background-color: var(--adv-solid);
	color: #ffffff;
}


/* ── Adviser profile ──────────────────────────────────────────────────────── */

.advisers-panel {
	border: 1px solid var(--adv-line);
	border-radius: 1.5rem;
	padding: 2.25rem;
	background-color: #ffffff;
}

.advisers-panel__top {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	margin: 0 0 1.5rem;
}

.advisers-panel__photo {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	border: 4px solid var(--adv-accent);
	background-color: #f9f9f9;
}

.advisers-panel__region {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #ffffff;
	background-color: var(--adv-accent);
	border-radius: 9999px;
	padding: 0.3rem 0.85rem;
	margin: 0 0 0.6rem;
}

/* A second tag beside the region — Laura also covers international schools,
   which is not a place on the map. Outlined rather than filled so it reads as
   additional information, not a second region. */
.advisers-panel__tag {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--adv-accent);
	border: 1.5px solid var(--adv-accent);
	border-radius: 9999px;
	padding: 0.24rem 0.8rem;
	margin: 0 0 0.6rem 0.4rem;
}

.advisers-panel__name {
	font-family: var(--ci-font-primary);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 0.15rem;
}

.advisers-panel__role {
	color: var(--adv-muted);
	font-size: 0.95rem;
}

.advisers-panel__bio {
	margin: 0 0 1.75rem;
}

/* Nothing follows the paragraph on a panel with no quote and no button. */
.advisers-panel__bio:last-child {
	margin-bottom: 0;
}

.advisers-panel h4 {
	font-family: var(--ci-font-primary);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--adv-muted);
	margin: 0 0 0.75rem;
}

/* The speech bubble from the site's testimonial board — .cc-ts-bubble in
   testimonials.css. Same radius, padding, shadow and rotated-square tail, so a
   quote here reads as the same component schools see elsewhere. The tint
   follows the region rather than cycling through three, which ties the quote
   to the adviser it belongs to. */
.advisers-quote {
	position: relative;
	background-color: var(--adv-tint);
	border-radius: 1rem;
	padding: 1.75rem;
	margin: 0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 20px rgba(0, 0, 0, 0.05);
}

.advisers-quote p {
	font-size: var(--ci-text-body);
	line-height: 1.55;
	color: var(--adv-navy);
	margin: 0 0 1rem;
}

.advisers-quote p:last-child {
	margin-bottom: 0;
}

/* The tail: a small rotated square in the bubble's own colour. Geometric, not
   a rounded cartoon balloon. */
.advisers-quote::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	background-color: inherit;
	bottom: -7px;
	left: 26px;
	transform: rotate(45deg);
	border-radius: 3px;
}

/* Attribution sits OUTSIDE the bubble, under the tail — the same arrangement
   as .cc-ts-footer on the testimonial board, with the colours flipped: there
   it sits on navy so the name is white, here the card is white so it takes the
   page's own ink and muted greys. */
.advisers-quote-attrib {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0 0 1.75rem;
	padding-top: 1.4rem;
}

/* contain, not cover — a school badge cannot be cropped without losing what
   it is. The gradient is the placeholder for a school with no crest yet. */
.advisers-quote-attrib__crest {
	width: 40px;
	height: 40px;
	border-radius: 0.4rem;
	flex-shrink: 0;
	background-image: linear-gradient(135deg, #e8edf0 0%, #d4dce0 100%);
}

img.advisers-quote-attrib__crest {
	object-fit: contain;
	background-image: none;
}

.advisers-quote-attrib__name {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--ci-color-text);
	margin: 0;
	line-height: 1.35;
}

.advisers-quote-attrib__meta {
	font-size: 0.95rem;
	color: var(--adv-muted);
	margin: 0;
	line-height: 1.45;
}

.advisers-panel__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}


/* ── Hover, kept away from touch ──────────────────────────────────────────── */

@media (hover: hover) {

	.advisers-finder__go:hover {
		background-color: #e08a1e;
	}

	.uk-map__region:not(.is-active):hover {
		opacity: 0.62;
	}

	.advisers-legend button:hover {
		background-color: var(--adv-solid);
		color: #ffffff;
	}
}


/* ── Narrower screens ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {

	.advisers-map-layout {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.advisers-legend {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 880px) {

	.advisers-founders__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {

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

@media (max-width: 520px) {

	.advisers-founder img {
		width: 88px;
		height: 88px;
	}
}


/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

	.uk-map__region {
		transition: none;
	}

	.uk-map__region.is-active {
		transform: none;
	}
}