/* =============================================================
   Elite Pearl Charter — contact details + enquiry form
   ============================================================= */

.epc-contact {
	background: var(--epc-black);
	color: var(--epc-silver);
	border-top: 1px solid var(--epc-line-soft);
}

.epc-contact__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	width: 100%;
	max-width: var(--epc-container);
	margin-inline: auto;
	padding: 4rem var(--epc-gutter);
}

@media (min-width: 768px) {
	.epc-contact__inner {
		padding-block: 5.5rem;
		gap: 3rem;
	}
}

@media (min-width: 1024px) {
	.epc-contact__inner {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		align-items: start;
		gap: 3.5rem;
	}
}

@media (min-width: 1200px) {
	.epc-contact__inner {
		gap: 4.5rem;
		padding-block: 7rem;
	}
}

/* --- Details column ----------------------------------------------------- */

.epc-contact__eyebrow {
	margin: 0 0 0.75rem;
	font-family: var(--epc-font-sans);
	font-size: clamp(0.6875rem, 1.6vw, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--epc-silver);
}

.epc-contact__heading {
	margin: 0;
	font-family: var(--epc-font-serif);
	font-size: clamp(1.625rem, 4.6vw, 2.5rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.epc-contact__rule {
	display: block;
	width: 72px;
	height: 1px;
	margin: 1.25rem 0 1.75rem;
	background: linear-gradient(
		to right,
		rgb(255 255 255 / 70%) 0%,
		transparent 100%
	);
}

.epc-contact__details {
	display: grid;
	gap: 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.epc-contact__details li {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
}

.epc-contact__icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	font-size: 0.9375rem;
	color: var(--epc-white);
	background: var(--epc-ink-950);
	border: 1px solid var(--epc-line);
	border-radius: 50%;
}

.epc-contact__detail {
	font-family: var(--epc-font-sans);
	font-size: clamp(0.875rem, 1.9vw, 0.9375rem);
	line-height: 1.7;
	color: var(--epc-nav-idle);
}

.epc-contact__label {
	display: block;
	margin-bottom: 0.1rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--epc-grey);
}

.epc-contact__detail a {
	color: var(--epc-white);
	text-decoration: none;
	transition: color var(--epc-speed) var(--epc-ease-soft);
}

.epc-contact__detail a:hover,
.epc-contact__detail a:focus-visible {
	color: var(--epc-silver);
}

.epc-contact__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

@media (max-width: 479.98px) {
	.epc-contact__quick .epc-btn {
		width: 100%;
	}
}

/* =============================================================
   Enquiry form
   ============================================================= */

.epc-form {
	position: relative;
	overflow: hidden;
	padding: 2rem 1.5rem 2rem;
	background: var(--epc-gradient-surface);
	border: 1px solid rgb(141 143 142 / 40%);
	border-radius: 18px;
	box-shadow:
		0 14px 40px rgb(0 0 0 / 40%),
		inset 0 1px 0 rgb(255 255 255 / 6%);
}

@media (min-width: 768px) {
	.epc-form {
		padding: 2.5rem 2.25rem 2.25rem;
	}
}

/* Gradient hairline across the top edge. */
.epc-form__accent {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--epc-gradient-title);
}

.epc-form__head {
	margin-bottom: 1.75rem;
}

.epc-form__title {
	margin: 0;
	font-family: var(--epc-font-serif);
	font-size: clamp(1.25rem, 3vw, 1.625rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--epc-white);
}

.epc-form__sub {
	margin: 0.6rem 0 0;
	font-family: var(--epc-font-sans);
	font-size: 0.8125rem;
	line-height: 1.7;
	color: var(--epc-grey);
	text-wrap: pretty;
}

/* --- Service chips -------------------------------------------------------- */

.epc-form__chips {
	margin: 0 0 1.75rem;
	padding: 0;
	border: 0;
}

.epc-form__chips legend {
	padding: 0;
	margin-bottom: 0.75rem;
	font-family: var(--epc-font-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--epc-silver);
}

.epc-form__chip-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* The radio stays in the DOM for keyboard and screen readers; the label is
   what gets styled. Hidden with clip, never display:none, so it stays
   focusable and announced. */
.epc-form__chip-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.epc-form__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 0.85rem;
	font-family: var(--epc-font-sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--epc-nav-idle);
	background: rgb(0 0 0 / 35%);
	border: 1px solid var(--epc-line);
	border-radius: 999px;
	cursor: pointer;
	transition: color 320ms var(--epc-ease-soft),
		border-color 320ms var(--epc-ease-soft),
		background-color 320ms var(--epc-ease-soft),
		transform 320ms var(--epc-ease-soft);
}

.epc-form__chip i {
	font-size: 0.75rem;
	color: var(--epc-silver);
	transition: color 320ms var(--epc-ease-soft);
}

.epc-form__chip:hover {
	color: var(--epc-white);
	border-color: rgb(255 255 255 / 45%);
	transform: translateY(-1px);
}

.epc-form__chip-input:checked + .epc-form__chip {
	color: var(--epc-black);
	background: var(--epc-gradient-title);
	border-color: transparent;
}

.epc-form__chip-input:checked + .epc-form__chip i {
	color: var(--epc-black);
}

.epc-form__chip-input:focus-visible + .epc-form__chip {
	outline: 2px solid var(--epc-white);
	outline-offset: 2px;
}

/* --- Fields ---------------------------------------------------------------- */

.epc-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
	margin-bottom: 1.1rem;
}

@media (min-width: 560px) {
	.epc-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.epc-form__field {
	position: relative;
	margin-bottom: 1.1rem;
}

.epc-form__row .epc-form__field {
	margin-bottom: 0;
}

.epc-form__icon {
	position: absolute;
	top: 1.15rem;
	left: 0.95rem;
	z-index: 1;
	font-size: 0.8125rem;
	color: var(--epc-grey);
	pointer-events: none;
	transition: color 320ms var(--epc-ease-soft);
}

.epc-form__field input,
.epc-form__field textarea {
	width: 100%;
	padding: 1.4rem 0.9rem 0.55rem 2.5rem;
	font-family: var(--epc-font-sans);
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--epc-white);
	background: rgb(0 0 0 / 45%);
	border: 1px solid var(--epc-line);
	border-radius: 10px;
	transition: border-color 320ms var(--epc-ease-soft),
		background-color 320ms var(--epc-ease-soft),
		box-shadow 320ms var(--epc-ease-soft);
}

.epc-form__field--area textarea {
	padding-left: 0.95rem;
	padding-top: 1.6rem;
	min-height: 7.5rem;
	resize: vertical;
}

/*
 * Floating label. It rests over the input, then shrinks and rises once the
 * field is focused or filled. placeholder-shown is what detects "empty", which
 * is why every input carries placeholder=" ".
 */
.epc-form__field > label {
	position: absolute;
	top: 1.05rem;
	left: 2.5rem;
	font-family: var(--epc-font-sans);
	font-size: 0.9375rem;
	line-height: 1;
	color: var(--epc-grey);
	pointer-events: none;
	transform-origin: left top;
	transition: transform 260ms var(--epc-ease-soft),
		color 260ms var(--epc-ease-soft);
}

.epc-form__field--area > label {
	left: 0.95rem;
}

.epc-form__field input:focus + label,
.epc-form__field input:not(:placeholder-shown) + label,
.epc-form__field textarea:focus + label,
.epc-form__field textarea:not(:placeholder-shown) + label,
.epc-form__field > label.is-static {
	transform: translateY(-0.62rem) scale(0.72);
	color: var(--epc-silver);
}

.epc-form__field input:focus,
.epc-form__field textarea:focus {
	outline: none;
	border-color: rgb(255 255 255 / 65%);
	background: rgb(0 0 0 / 62%);
	box-shadow: 0 0 0 3px rgb(255 255 255 / 8%);
}

.epc-form__field input:focus ~ .epc-form__icon,
.epc-form__field textarea:focus ~ .epc-form__icon {
	color: var(--epc-white);
}

.epc-form__field input:focus-visible,
.epc-form__field textarea:focus-visible {
	outline: 2px solid transparent;
}

/* Date input keeps its native picker but matches the dark field. */
.epc-form__field input[type="date"] {
	color-scheme: dark;
}

/* Strip the number spinners; they crowd a 2-column row. */
.epc-form__field input[type="number"] {
	appearance: textfield;
}

.epc-form__field input[type="number"]::-webkit-outer-spin-button,
.epc-form__field input[type="number"]::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

/* Invalid: border plus a message, never colour on its own. */
.epc-form__field input.is-invalid,
.epc-form__field textarea.is-invalid {
	border-color: var(--epc-white);
	background: rgb(255 255 255 / 8%);
}

.epc-form__error {
	display: block;
	min-height: 0.95rem;
	margin-top: 0.3rem;
	font-family: var(--epc-font-sans);
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
	color: var(--epc-white);
}

/* --- Submit ----------------------------------------------------------------- */

.epc-form__submit {
	width: 100%;
	margin-top: 1.5rem;
}

.epc-form__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	margin: 1rem 0 0;
	font-family: var(--epc-font-sans);
	font-size: 0.6875rem;
	line-height: 1.6;
	text-align: center;
	color: var(--epc-grey);
	text-wrap: pretty;
}

.epc-form__note i {
	font-size: 0.625rem;
}

@media (prefers-reduced-motion: reduce) {
	.epc-form__chip,
	.epc-form__field input,
	.epc-form__field textarea,
	.epc-form__field > label,
	.epc-form__icon {
		transition-duration: 0.01ms !important;
	}

	.epc-form__chip:hover {
		transform: none;
	}
}

/* =============================================================
   reCAPTCHA and submission feedback
   ============================================================= */

/*
 * The floating badge is hidden because it lands on top of the site's own
 * floating call and WhatsApp buttons. Google allows this only if the notice
 * below is shown in the form, which it is.
 */
.grecaptcha-badge {
	visibility: hidden;
}

.epc-form__captcha {
	margin: 0.75rem 0 0;
	font-family: var(--epc-font-sans);
	font-size: 0.6875rem;
	line-height: 1.6;
	color: var(--epc-grey);
	text-align: center;
}

.epc-form__captcha a {
	color: var(--epc-silver);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.epc-form__captcha a:hover,
.epc-form__captcha a:focus-visible {
	color: var(--epc-white);
}

/* Shown only when the server turns a submission away. */
.epc-form__alert {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin: 1rem 0 0;
	padding: 0.8rem 1rem;
	font-family: var(--epc-font-sans);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--epc-white);
	background: rgb(225 6 0 / 12%);
	border: 1px solid rgb(225 6 0 / 45%);
	border-radius: 10px;
}

/* [hidden] loses to any author display, so it has to be restated. */
.epc-form__alert[hidden] {
	display: none;
}

/* While the token is being fetched and checked. */
.epc-form__submit.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

/* =============================================================
   Map, in the column beside the form
   ============================================================= */

/*
 * Sized to fill what the details leave behind rather than to a round number:
 * the aside runs about 467px against the form's 841px on a desktop, so roughly
 * 340px of map closes the gap without pushing the column past the form.
 */
.epc-contact__map {
	position: relative;
	margin-top: 1.75rem;
	overflow: hidden;
	border: 1px solid var(--epc-line);
	border-radius: 14px;
	background: var(--epc-ink-950);
}

.epc-contact__map iframe {
	display: block;
	width: 100%;
	height: 260px;
	border: 0;
	/*
	 * Deliberately unfiltered. A CSS invert would make it sit more quietly in a
	 * dark page, but it recolours Google's own map — which their terms do not
	 * allow — and the location section on the home page shows the map as it
	 * comes. One of the two looking different would be worse than both looking
	 * bright.
	 */
}

@media (min-width: 1024px) {
	.epc-contact__map iframe {
		height: 340px;
	}
}

/* A short window has no height to give away. */
@media (min-width: 1024px) and (max-height: 820px) {
	.epc-contact__map iframe {
		height: 280px;
	}
}

.epc-contact__directions {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.9rem;
	font-family: var(--epc-font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--epc-black);
	background: var(--epc-white);
	border-radius: 999px;
	box-shadow: 0 6px 18px rgb(0 0 0 / 45%);
	transition: background-color 320ms var(--epc-ease-soft),
		color 320ms var(--epc-ease-soft);
}

.epc-contact__directions:hover,
.epc-contact__directions:focus-visible {
	color: var(--epc-white);
	background: var(--epc-ink-850);
}

.epc-contact__directions i {
	font-size: 0.8125rem;
}

@media (prefers-reduced-motion: reduce) {
	.epc-contact__directions {
		transition-duration: 0.01ms !important;
	}
}