/* ═══════════════════════════════════════════════════════════════════════════
   ENQUIRE PAGE
   Two-panel layout: context left, form right.
   ═══════════════════════════════════════════════════════════════════════════ */

.enquire-content {
	min-height: calc(100vh - 72px);
	display: flex;
	align-items: stretch;
}

/* ── Two-panel grid ── */
.enquire-content__layout {
	display: grid;
	grid-template-columns: 45fr 55fr;
	width: 100%;
}

/* ── Left panel ── */
.enquire-content__left {
	background-color: #253d47;
	display: flex;
	align-items: center;
	padding: 1.875rem max(2rem, calc((100vw - 1280px) / 2 + 2rem));
	padding-right: 4rem;
}

.enquire-content__left-inner {
	max-width: 440px;
}

.enquire-content__heading {
	font-family: var(--ci-font-primary);
	font-size: clamp(2.5rem, 3.5vw, 3.75rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--ci-color-white);
	margin: 0 0 1.25rem;
}

.enquire-content__intro {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
}

/* ── Right panel ── */
.enquire-content__right {
	background-color: var(--ci-color-white);
	display: flex;
	align-items: center;
	padding: 1.875rem max(2rem, calc((100vw - 1280px) / 2 + 2rem)) 1.875rem 4rem;
}

/* No width cap. The form fills its column, which puts its right edge on the same
   line the site header's content ends on — the form used to stop 110px short of
   that at 1728px, which is what made it look like it was floating in the white
   space rather than sitting on the page.

   Uncapped is safe here because the column's own right padding is
   container-relative — max(2rem, calc((100vw - 1280px) / 2 + 2rem)) — so it grows
   as fast as the viewport does. The form widens from 520px to 630px at 1728px and
   still only reaches ~736px on a 4K display; it can't run away. Below ~1120px the
   column is narrower than 520px anyway, so nothing changes there. */
.enquire-content__right-inner {
	width: 100%;
}

/* ── Form layout ── */
.enquire-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.enquire-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto;   /* label · control · error */
	gap: 1rem;
}

/* Label, input and error message sit on tracks shared across the row, so if one
   label wraps to two lines and its neighbour doesn't, both inputs still start on
   the same line, and an error under one field doesn't shove its partner around.

   THREE rows, not two. With two, a validation message appended as the field's
   third child had no track of its own and rendered on top of the input.

   Row gap is zero and the spacing comes from margins instead, deliberately: an
   empty error track still generates a gutter, which would have added 0.45rem
   under every input on the form whether or not anything was wrong with it. */
.enquire-form__row > .enquire-field {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	row-gap: 0;
	column-gap: 0;
	align-content: start;
}

.enquire-form__row > .enquire-field > .enquire-field__input,
.enquire-form__row > .enquire-field > .enquire-field__textarea,
.enquire-form__row > .enquire-field > .enquire-field__select-wrap,
.enquire-form__row > .enquire-field > .enquire-field__phone-wrap {
	margin-top: 0.45rem;
}

/* ── Individual field ── */
.enquire-field {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.enquire-field__label {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ci-color-navy);
}

/* ── Inputs & selects ── */
.enquire-field__input,
.enquire-field__select {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1.5px solid #d2d2d7;
	border-radius: 12px;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: var(--ci-color-text);
	background-color: var(--ci-color-white);
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.enquire-field__textarea {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1.5px solid #d2d2d7;
	border-radius: 12px;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: var(--ci-color-text);
	background-color: var(--ci-color-white);
	outline: none;
	box-sizing: border-box;
	resize: vertical;
	/* A quarter shorter than it was (131px, from rows="4"). Set explicitly rather
	   than by the rows attribute alone: rows="3" only reaches 105px, because a
	   quarter off lands between line boxes. rows="3" is still on the element as
	   the no-CSS fallback. resize:vertical keeps this a starting height, and the
	   floor is cut by the same quarter so the drag range is unchanged in feel. */
	height: 98px;
	min-height: 82px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	line-height: 1.6;
}

.enquire-field__input::placeholder,
.enquire-field__textarea::placeholder {
	color: #b0b0b8;
}

.enquire-field__input:hover,
.enquire-field__select:hover,
.enquire-field__textarea:hover {
	border-color: #a8a8b3;
}

.enquire-field__input:focus,
.enquire-field__select:focus,
.enquire-field__textarea:focus {
	border-color: #538eaa;
	background-color: #f2f7f9;
	box-shadow: inset 0 1px 4px rgba(30, 45, 61, 0.10);
}

/* ── "How did you hear about us?" — on-site dropdown, not the browser default ──
   The real <select> stays in the DOM (see enquire.js) so required-field
   validation and form submission are unaffected; it's just made invisible
   without display:none, which would exclude it from constraint validation. */
.enquire-field__select-wrap {
	position: relative;
}

.enquire-field__select--native-hidden {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

.enquire-field__select-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1.5px solid #d2d2d7;
	border-radius: 12px;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: var(--ci-color-text);
	background-color: var(--ci-color-white);
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.enquire-field__select-toggle:hover {
	border-color: #a8a8b3;
}

.enquire-field__select-wrap.is-open .enquire-field__select-toggle {
	border-color: #538eaa;
	background-color: #f2f7f9;
	box-shadow: inset 0 1px 4px rgba(30, 45, 61, 0.10);
}

.enquire-field__select-toggle-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.enquire-field__select-chevron {
	flex-shrink: 0;
	margin-left: 0.75rem;
	font-size: 0.75rem;
	color: #6e6e73;
	transition: transform 0.15s ease;
}

.enquire-field__select-wrap.is-open .enquire-field__select-chevron {
	transform: rotate(180deg);
}

.enquire-field__select-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	/* Anchored to the toggle's right edge and grown leftward rather than
	   matching the toggle's own (narrower, two-column-row) width — the
	   longest labels need more room than the field itself has to give
	   without widening the field and disrupting the form's grid. Growing
	   left stays within the row's own width instead of overflowing the
	   form entirely. */
	right: 0;
	left: auto;
	width: max-content;
	min-width: 100%;
	max-width: 420px;
	z-index: 20;
	/* max-height is set inline by enquire.js, clamped to whatever space is
	   actually left below the toggle when it opens — on a normal screen
	   that's larger than the full list (no visible scroll), only a short
	   viewport where the list would otherwise run off-screen triggers this. */
	overflow-y: auto;
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	background: var(--ci-color-white);
	border: 1.5px solid #d2d2d7;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.enquire-field__select-search-item {
	position: sticky;
	top: -0.4rem;
	z-index: 1;
	margin: -0.4rem -0.4rem 0.4rem;
	padding: 0.4rem 0.4rem 0.5rem;
	background: var(--ci-color-white);
	border-bottom: 1px solid #ececf0;
}

.enquire-field__select-search {
	width: 100%;
	padding: 0.55rem 0.75rem;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: var(--ci-color-text);
	background: #f5f5f7;
	border: 1.5px solid transparent;
	border-radius: 8px;
	box-sizing: border-box;
}

.enquire-field__select-search:focus {
	outline: none;
	border-color: #538eaa;
	background: var(--ci-color-white);
}

.enquire-field__select-option {
	display: flex;
	align-items: center;
	padding: 0.65rem 0.75rem;
	border-radius: 8px;
	cursor: pointer;
}

.enquire-field__select-option:not(:last-child) {
	margin-bottom: 0.15rem;
}

/* The search filter sets .hidden on the options it wants out of the way, and
   the attribute alone was losing to the display: flex above it — [hidden]'s
   display: none comes from the UA stylesheet, which any author rule outranks.
   So typing in the country search marked options hidden and every one of them
   stayed on screen. Same trap as .ce-proj-card[hidden] in projects-archive.css. */
.enquire-field__select-option[hidden] {
	display: none;
}


.enquire-field__select-option-text {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: var(--ci-color-text);
	white-space: nowrap;
}

.enquire-field__select-option-lead {
	font-weight: 600;
}

.enquire-field__select-option-detail {
	font-weight: 400;
	color: #8a8a91;
}

.enquire-field__select-option:hover {
	background: #f2f7f9;
}

.enquire-field__select-option[aria-selected="true"] {
	background: #eaf2f6;
}

.enquire-field__select-option[aria-selected="true"] .enquire-field__select-option-lead {
	color: #538eaa;
}

/* Non-interactive <optgroup> heading inside a menu. */
.enquire-field__select-group-label {
	padding: 0.5rem 0.75rem 0.3rem;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #a3a3ab;
}

.enquire-field__select-group-label:not(:first-child) {
	margin-top: 0.3rem;
	border-top: 1px solid #ececf0;
	padding-top: 0.6rem;
}

/* The phone prefix menu hangs off a narrow chip at the LEFT edge of a
   full-width row (the "how did you hear" field's own default — anchored
   right, growing left — assumes it's sitting in a half-width column with
   room to its left; here that would push the menu toward the edge of the
   form instead). Anchoring left and growing rightward keeps it within the
   phone row itself. Options are short country names, not long detail
   strings, so a narrower cap reads better than the 420px used elsewhere. */
.enquire-field__prefix-wrap .enquire-field__select-menu {
	left: 0;
	right: auto;
	max-width: 280px;
}

/* ── Phone reveal wrapper ── */
.enquire-phone-wrapper {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: -1.25rem;
	transition: grid-template-rows 0.35s ease, margin-top 0.35s ease;
}

.enquire-phone-wrapper.is-visible {
	grid-template-rows: 1fr;
	margin-top: 0;
}

.enquire-field--phone {
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.enquire-phone-wrapper.is-visible .enquire-field--phone {
	opacity: 1;
	transition: opacity 0.2s ease 0.15s;
}

/* Lifted only once the reveal animation has actually finished (see the
   transitionend listener in enquire.js) — needed so the phone-prefix
   dropdown, an absolutely-positioned descendant, isn't clipped by the
   overflow:hidden this field relies on for its expand/collapse animation. */
.enquire-field--phone.is-settled {
	overflow: visible;
}

/* ── Connected phone input (prefix + number) ── */
/* No overflow:hidden here (there used to be, to clip the two children's
   square corners into the container's rounded pill) — the prefix dropdown's
   menu is an absolutely-positioned descendant of .enquire-field__prefix-wrap,
   and overflow:hidden on an ancestor clips absolutely-positioned descendants
   too, which would make the whole menu invisible. Rounding is done directly
   on each child's outer corners instead (below) so the pill look survives
   without needing to clip anything. */
.enquire-field__phone-wrap {
	display: flex;
	border: 1.5px solid #d2d2d7;
	border-radius: 12px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.enquire-field__phone-wrap:hover {
	border-color: #a8a8b3;
}

.enquire-field__phone-wrap:focus-within {
	border-color: #538eaa;
	box-shadow: inset 0 1px 4px rgba(30, 45, 61, 0.10);
}

/* The wrap's own background-color would be invisible — the prefix toggle and
   number input are opaque children that fill it edge to edge — so the tint is
   applied to both of them directly instead. */
.enquire-field__phone-wrap:focus-within .enquire-field__select-toggle,
.enquire-field__phone-wrap:focus-within .enquire-field__number {
	background-color: #f2f7f9;
}

.enquire-field__prefix-wrap {
	/* Deliberately NOT overflow:hidden — the dropdown menu below is an
	   absolutely-positioned child of this same element, and clipping here
	   would hide it exactly as it would on the parent (see note above). The
	   toggle button carries its own corner radius instead, so nothing needs
	   to be clipped to achieve the rounded-pill look. */
	border-right: 1.5px solid #d2d2d7;
	flex-shrink: 0;
	min-width: 5.25rem;
}

/* On-site dropdown toggle, standing in for the old plain "+44" display div.
   Overrides the shared .enquire-field__select-toggle look (own border, full
   corner radius, own focus glow) to instead read as one seamless piece with
   .enquire-field__number below — rounded only on the left, to match the
   container's corners on that side. .enquire-field__phone-wrap's own
   :focus-within already shows focus for the combined prefix+number control,
   so the toggle's individual focus ring would be redundant. */
.enquire-field__prefix-wrap .enquire-field__select-toggle {
	border: none;
	border-radius: 0;
	border-top-left-radius: 10.5px; /* 12px container radius minus the 1.5px border */
	border-bottom-left-radius: 10.5px;
	background: var(--ci-color-off-white);
	padding: 0.8rem 1.5rem 0.8rem 1rem;
	box-shadow: none;
}

.enquire-field__prefix-wrap.is-open .enquire-field__select-toggle {
	box-shadow: none;
}

.enquire-field__prefix-wrap .enquire-field__select-chevron {
	margin-left: 0.5rem;
	font-size: 0.7rem;
}

.enquire-field__number {
	border: none;
	padding: 0.8rem 1rem;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: var(--ci-color-text);
	background: var(--ci-color-white);
	outline: none;
	flex: 1;
	min-width: 0;
	border-top-right-radius: 10.5px;
	border-bottom-right-radius: 10.5px;
}

.enquire-field__number::placeholder {
	color: #b0b0b8;
}

/* ── Checkbox ── */
.enquire-field__checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	cursor: pointer;
}

.enquire-field__checkbox {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 0.15rem;
	cursor: pointer;
	accent-color: #538eaa;
}

.enquire-field__checkbox-text {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	line-height: 1.6;
	color: var(--ci-color-text);
}

/* ── Submit button ── */
.enquire-form__submit {
	width: 100%;
	padding: 0.95rem 2rem;
	background-color: var(--ci-color-engage);
	color: var(--ci-color-white);
	border: none;
	border-radius: 9999px;
	font-family: var(--ci-font-primary);
	font-size: 1rem;
	font-weight: 400;
	cursor: pointer;
	transition: background-color 0.18s ease;
	margin-top: 0.25rem;
}

@media (hover: hover) and (pointer: fine) {
	.enquire-form__submit:hover {
		background-color: #b56920;
	}
}

/* ── Tablet ── */
@media (max-width: 900px) {
	.enquire-content__layout {
		grid-template-columns: 1fr;
	}

	.enquire-content__left {
		padding: 3.5rem 2rem 3rem;
		align-items: flex-start;
	}

	.enquire-content__left-inner {
		max-width: 100%;
	}

	.enquire-content__right {
		padding: 2.5rem 2rem 4rem;
		align-items: flex-start;
	}

	.enquire-content__right-inner {
		max-width: 100%;
	}
}

/* ── Mobile ── */
@media (max-width: 600px) {
	.enquire-content__left {
		padding: 2rem 1.5rem 1.75rem;
	}


	.enquire-content__heading {
		font-size: clamp(2.2rem, 9vw, 3rem);
	}

	.enquire-form__row {
		grid-template-columns: 1fr;
	}

	.enquire-field__input,
	.enquire-field__select,
	.enquire-field__textarea,
	.enquire-field__select-toggle,
	.enquire-field__number {
		font-size: 1rem;
	}
}


/* ── AJAX submission feedback ───────────────────────────────────────────────── */

.enquire-form__status {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: transparent;
	transition: color 0.2s ease;
}

/* Collapses to zero space (including the flex gaps either side of it) until
   an error message actually fills it — previously reserved a fixed
   min-height at all times, leaving a large dead gap above the submit
   button on the common case of no error. */
.enquire-form__status:empty {
	display: none;
}

.enquire-form__status.is-error {
	color: #c0392b;
	margin-bottom: 0.75rem;
}

/* ── Success takeover ───────────────────────────────────────────────────────
   Replaces the whole two-panel layout rather than sitting inside the right half
   of it.

   The confirmation used to be a 200px panel where the form had been, scrolled
   to with block:'center'. Centring something that short pushes the navy panel
   to the top of a phone screen — so what you landed on after submitting was the
   heading "Tell us about your school", and a successful enquiry read as a
   failed one. Taking over the section leaves nothing stale above it.

   scroll-margin-top is the house pattern for landing clear of the fixed header;
   --nav-bottom carries the header plus the admin bar. See cpd.css. */
.enquire-success {
	background-color: #253d47;
	/* .enquire-content is a stretch flex row, so a child that does not claim the
	   width takes only its content's — which rendered the takeover as a navy
	   column down the left of a white page. */
	width: 100%;
	min-height: calc(100vh - var(--nav-bottom, 64px));
	display: grid;
	place-items: center;
	padding: 4rem max(2rem, calc((100vw - 1280px) / 2 + 2rem));
	text-align: center;
	position: relative;
	overflow: clip;
	scroll-margin-top: var(--nav-bottom, 64px);
}

.enquire-success[hidden] {
	display: none;
}

.enquire-content.is-submitted .enquire-content__layout {
	display: none;
}

/* The same soft diamonds the CPD and audit bands use, moved to opposite
   corners: the band's own offsets are drawn for something wide and shallow and
   would put the large one straight through the heading here. */
.enquire-success::before,
.enquire-success::after {
	content: '';
	position: absolute;
	background: rgba(255, 255, 255, 0.06);
	transform: rotate(45deg);
	pointer-events: none;
	z-index: 0;
}

.enquire-success::before {
	width: 450px;
	height: 450px;
	border-radius: 2.75rem;
	top: -160px;
	left: -170px;
}

.enquire-success::after {
	width: 260px;
	height: 260px;
	border-radius: 2rem;
	bottom: -90px;
	right: -70px;
}

.enquire-success__inner {
	position: relative;
	z-index: 1;
	max-width: 560px;
	display: grid;
	justify-items: center;
}

.enquire-success__tick {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	display: grid;
	place-items: center;
	color: var(--ci-color-white);
}

.enquire-success__tick svg {
	width: 26px;
	height: 26px;
}

.enquire-success__heading {
	font-family: var(--ci-font-primary);
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--ci-color-white);
	margin: 1.5rem 0 0.9rem;
}

.enquire-success__message {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.8);
	max-width: 46ch;
	margin: 0;
}

.enquire-success__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 1.75rem;
}

/* Below the base rules, not up with the other breakpoints: place-items on
   .enquire-success is a shorthand, so an align-items declared earlier in the
   file loses to it however narrow the screen is.

   Centred vertically, the confirmation sits halfway down a tall phone — under
   the address bar that is a lot of empty navy before anything is said. Pinned
   near the top instead, where a reader looks first. Still full height, so
   nothing stale can show beneath it. */
@media (max-width: 900px) {
	.enquire-success {
		align-items: start;
		padding: 3.25rem 1.5rem 4rem;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   VALIDATION

   Replaces the browser's own bubble ("Please fill in this field"), which is
   unstyleable, points at one field at a time, disappears on the next click and
   looks like nothing else on the site. These messages are part of the page:
   they stay put, every invalid field shows its own, and the wording says what
   is wanted rather than that something is missing.
   ═══════════════════════════════════════════════════════════════════════════ */

.enquire-field__error {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	font-family: var(--ci-font-primary);
	font-size: 0.875rem;                /* 14px — the legal-microcopy exception */
	line-height: 1.45;
	color: #c0392b;                     /* same red as .enquire-form__status.is-error */
	margin: 0.35rem 0 0;
}

.enquire-field__error[hidden] { display: none; }

.enquire-field__error::before {
	content: '!';
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.06rem;
	border-radius: 50%;
	background: #c0392b;
	color: var(--ci-color-white);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.05rem;
	text-align: center;
}

/* The field itself. Border only — no red fill, which on a form this size reads
   as alarm rather than correction. */
.enquire-field--invalid .enquire-field__input,
.enquire-field--invalid .enquire-field__textarea,
.enquire-field--invalid .enquire-field__select-toggle {
	border-color: #c0392b;
}

.enquire-field--invalid .enquire-field__input:focus,
.enquire-field--invalid .enquire-field__textarea:focus,
.enquire-field--invalid .enquire-field__select-toggle:focus {
	border-color: #c0392b;
	background-color: #fdf6f5;
	box-shadow: inset 0 1px 4px rgba(192, 57, 43, 0.12);
}

/* Number spinners. The roll field is type="number" so Safari cannot mistake it
   for a credential field, but the stepper arrows have no place on a form
   styled like this one. */
.enquire-field__input[type='number'] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.enquire-field__input[type='number']::-webkit-outer-spin-button,
.enquire-field__input[type='number']::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}