/*
 * Brightway Consultancy — contact.css
 * Contact page sections + form styling. Inherits the gabarit homepage
 * visual language (commit 17a90c2). The form is the protagonist of the
 * page — chrome around it stays sober.
 *
 * Scope:
 *   1. .bwc-contact-hero        — compact opener (glow + matrix flank)
 *   2. .bwc-contact-split       — 8/4 grid: form col + direct-details col
 *      + .bwc-contact-form      — form layout + field anatomy
 *      + .bwc-contact-form__status (success / error banners)
 *      + .bwc-contact-form__honeypot (sr-only visually + accessibility)
 *      + .bwc-contact-details   — right-column direct channels (dl pattern)
 *   3. .bwc-contact-next        — 3-step "what next" trust band (glow + matrix)
 *
 * Universal contract:
 *   - Hover gated @media (hover: hover) and (pointer: fine).
 *   - Exact transition properties only.
 *   - Logical properties everywhere.
 *   - Tokens only. Sand rgba follows the documented convention.
 *   - prefers-reduced-motion handled globally (utilities.css §4).
 */

/* ===========================================================================
 * 1. HERO — compact, no 100dvh.
 * ========================================================================= */

.bwc-contact-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block-start: clamp(8rem, 6rem + 8vw, 14rem);
	padding-block-end: clamp(3rem, 2rem + 4vw, 5rem);
}

.bwc-contact-hero::before {
	content: '';
	position: absolute;
	inset-block-start: -10rem;
	inset-inline-end: -12rem;
	inline-size: 56rem;
	block-size: 56rem;
	background: radial-gradient(
		circle at center,
		color-mix(in srgb, var(--bwc-accent-gold) 16%, transparent) 0%,
		color-mix(in srgb, var(--bwc-accent-gold) 5%, transparent) 35%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

.bwc-contact-hero::after {
	content: '';
	position: absolute;
	inset-block-start: clamp(4rem, 4vw + 2rem, 7rem);
	inset-inline-start: clamp(1rem, 4vw, 4rem);
	inline-size: 21rem;
	block-size: 28rem;
	pointer-events: none;
	z-index: 0;

	background-image:
		radial-gradient(circle at 3.75rem 5.25rem,  var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 9.75rem 12.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 15.75rem 8.25rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 6.75rem 20.25rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 17.25rem 24.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at center, rgba(245, 241, 232, 0.14) 2px, transparent 3px);
	background-size:
		100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
		1.5rem 1.5rem;
	background-repeat:
		no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
		repeat;
}

@media (max-width: 767px) {
	.bwc-contact-hero::after {
		display: none;
	}
}

.bwc-contact-hero > .bwc-container {
	position: relative;
	z-index: 1;
}

.bwc-contact-hero__inner {
	max-inline-size: 60ch;
	margin-inline-start: auto;
}

@media (min-width: 1024px) {
	.bwc-contact-hero__inner {
		margin-inline-start: 38%;
	}
}

.bwc-contact-hero__inner > * + * {
	margin-block-start: var(--bwc-space-3);
}

.bwc-contact-hero h1 {
	margin-block-start: var(--bwc-space-1);
}

.bwc-contact-hero__lede {
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-lg);
	line-height: 1.5;
}

/* ===========================================================================
 * 2. CONTACT SPLIT — form (8) + details (4).
 *    Form column gets the editorial weight. Details column is informational
 *    backup — same typographic palette, lighter chrome.
 * ========================================================================= */

.bwc-contact-split__grid {
	row-gap: var(--bwc-space-6);
	align-items: start;
}

/* --- 2a. Form column ---------------------------------------------------- */

.bwc-contact-form__header {
	margin-block-end: var(--bwc-space-4);
}

.bwc-contact-form__header > * + * {
	margin-block-start: var(--bwc-space-1);
}

.bwc-contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--bwc-space-3);
}

.bwc-contact-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bwc-space-3);
}

@media (min-width: 640px) {
	.bwc-contact-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

.bwc-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--bwc-space-1);
}

.bwc-contact-form__label {
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bwc-text);
}

.bwc-contact-form__required {
	color: var(--bwc-accent-gold);
	margin-inline-start: 0.25em;
}

/* The base .bwc-input from components.css provides the styling; we add
 * a select arrow and a textarea-friendly height. */
.bwc-input--select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23C9A961' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 0.75rem 0.5rem;
	padding-inline-end: 2.5rem; /* clear the chevron */
	cursor: pointer;
}

.bwc-input--textarea {
	resize: vertical;
	min-block-size: 8rem;
	line-height: 1.55;
}

.bwc-input--invalid {
	border-color: var(--bwc-accent-red);
}

.bwc-input--invalid:focus-visible {
	outline-color: var(--bwc-accent-red);
}

/* Honeypot — invisible to humans, kept off-screen rather than display:none
 * so screen-reader/spider bots that detect display:none don't skip it. */
.bwc-contact-form__honeypot {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Consent block — checkbox + label, side-by-side. */
.bwc-contact-form__consent {
	margin-block-start: var(--bwc-space-2);
}

.bwc-contact-form__consent-label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--bwc-space-2);
	align-items: start;
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-sm);
	color: var(--bwc-text-muted);
	line-height: 1.5;
	cursor: pointer;
}

.bwc-contact-form__consent-input {
	inline-size: 1.125rem;
	block-size: 1.125rem;
	margin: 0.2em 0 0; /* baseline-align with first line of text */
	accent-color: var(--bwc-accent-gold);
	cursor: pointer;
}

.bwc-contact-form__consent-input--invalid {
	outline: 1px solid var(--bwc-accent-red);
	outline-offset: 2px;
}

.bwc-contact-form__consent a {
	color: var(--bwc-text);
	text-decoration: underline;
	text-decoration-color: var(--bwc-accent-gold-hairline);
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.bwc-contact-form__consent a:hover {
		text-decoration-color: var(--bwc-accent-gold);
	}
}

.bwc-contact-form__submit {
	align-self: flex-start;
	margin-block-start: var(--bwc-space-3);
	padding-block: 1rem;
	padding-inline: 1.75rem;
	font-size: var(--bwc-fs-base);
}

/* Status banners — success / error. */
.bwc-contact-form__status {
	padding-block: var(--bwc-space-3);
	padding-inline: var(--bwc-space-4);
	margin-block-end: var(--bwc-space-3);
	border-radius: var(--bwc-radius-inner);
	font-family: var(--bwc-font-body);
}

.bwc-contact-form__status strong {
	display: block;
	font-size: var(--bwc-fs-base);
	font-weight: 600;
	margin-block-end: var(--bwc-space-1);
	color: var(--bwc-text);
}

.bwc-contact-form__status p {
	margin: 0;
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-sm);
	line-height: 1.5;
}

.bwc-contact-form__status--success {
	background-color: var(--bwc-accent-emerald-tint);
	border: 1px solid var(--bwc-accent-emerald-border);
}

.bwc-contact-form__status--success strong {
	color: var(--bwc-accent-emerald-text);
}

.bwc-contact-form__status--error {
	background-color: var(--bwc-accent-red-soft);
	border: 1px solid var(--bwc-accent-red);
}

.bwc-contact-form__status--error strong {
	color: var(--bwc-accent-red);
}

/* --- 2b. Details column ------------------------------------------------- */

.bwc-contact-details {
	padding-block: var(--bwc-space-4);
	padding-inline: var(--bwc-space-4);
	background-color: rgba(245, 241, 232, 0.03);
	border: 1px solid rgba(245, 241, 232, 0.08);
	border-radius: var(--bwc-radius-outer);
}

.bwc-contact-details__heading {
	font-family: var(--bwc-font-display);
	font-size: var(--bwc-fs-lg);
	font-weight: 480;
	line-height: 1.2;
	color: var(--bwc-text);
	margin: 0 0 var(--bwc-space-3);
}

.bwc-contact-details__list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bwc-space-3);
}

.bwc-contact-details__item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding-block-end: var(--bwc-space-3);
	border-block-end: 1px solid rgba(245, 241, 232, 0.06);
}

.bwc-contact-details__item:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.bwc-contact-details__item dt {
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bwc-text-muted);
}

.bwc-contact-details__item dd {
	margin: 0;
	color: var(--bwc-text);
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-base);
	line-height: 1.5;
}

.bwc-contact-details__item dd a {
	color: var(--bwc-text);
	text-decoration: underline;
	text-decoration-color: var(--bwc-accent-gold-hairline);
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.bwc-contact-details__item dd a:hover {
		text-decoration-color: var(--bwc-accent-gold);
		color: var(--bwc-accent-gold);
	}
}

/* ===========================================================================
 * 3. WHAT NEXT — 3 steps, glow + matrix decor.
 * ========================================================================= */

.bwc-contact-next {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.bwc-contact-next::before {
	content: '';
	position: absolute;
	inset-block-end: -12rem;
	inset-inline-start: -10rem;
	inline-size: 48rem;
	block-size: 48rem;
	background: radial-gradient(
		circle at center,
		color-mix(in srgb, var(--bwc-accent-gold) 10%, transparent) 0%,
		color-mix(in srgb, var(--bwc-accent-gold) 3%, transparent) 35%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

.bwc-contact-next::after {
	content: '';
	position: absolute;
	inset-block-start: clamp(2rem, 3vw, 4rem);
	inset-inline-end: clamp(1rem, 4vw, 4rem);
	inline-size: 18rem;
	block-size: 24rem;
	pointer-events: none;
	z-index: 0;

	background-image:
		radial-gradient(circle at 3.75rem 5.25rem,  var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 12.75rem 8.25rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 6.75rem 18.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 14.25rem 21.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at center, rgba(245, 241, 232, 0.14) 2px, transparent 3px);
	background-size:
		100% 100%, 100% 100%, 100% 100%, 100% 100%,
		1.5rem 1.5rem;
	background-repeat:
		no-repeat, no-repeat, no-repeat, no-repeat,
		repeat;
}

@media (max-width: 767px) {
	.bwc-contact-next::after {
		display: none;
	}
}

.bwc-contact-next > .bwc-container {
	position: relative;
	z-index: 1;
}

.bwc-contact-next__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: var(--bwc-space-5);
}

.bwc-contact-next__item {
	padding-block-start: var(--bwc-space-3);
	border-block-start: 1px solid var(--bwc-accent-gold-hairline);
}

.bwc-contact-next__num {
	display: block;
	font-family: var(--bwc-font-mono);
	font-size: var(--bwc-fs-xs);
	letter-spacing: 0.18em;
	color: var(--bwc-accent-gold);
}

.bwc-contact-next__heading {
	margin-block-start: var(--bwc-space-2);
	font-family: var(--bwc-font-display);
	font-size: var(--bwc-fs-xl);
	font-weight: 480;
	line-height: 1.2;
	color: var(--bwc-text);
}

.bwc-contact-next__body {
	margin-block-start: var(--bwc-space-2);
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-base);
	line-height: 1.55;
}