/**
 * Section: Contact (.ais-contact) — dark.
 * Scoped, design-tokens only (no raw hex). Two-column aside + AJAX form.
 * Responsive at <=1024 and <=640. Honors prefers-reduced-motion.
 */

.ais-contact {
	position: relative;
	overflow: hidden;
}

/* Ambient orange glow blobs (decorative). */
.ais-contact__glow {
	position: absolute;
	z-index: 0;
	width: clamp(280px, 42vw, 620px);
	height: clamp(280px, 42vw, 620px);
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--ais-glow-color, var(--ais-orange)) 38%, transparent), transparent 68%);
	filter: blur(36px);
	opacity: .65;
	pointer-events: none;
}

.ais-contact__glow--a {
	top: -14%;
	right: -8%;
}

.ais-contact__glow--b {
	bottom: -20%;
	left: -12%;
	opacity: .4;
}

.ais-contact .ais-container {
	position: relative;
	z-index: 1;
}

/* ---- Layout ---- */
.ais-contact__grid {
	display: grid;
	grid-template-columns: 0.92fr 1.08fr;
	gap: var(--ais-grid-gap);
	align-items: stretch;
	margin-top: 0;
}

/* Form first in DOM (mobile + SR order); aside stays the LEFT column on desktop.
   Both columns stretch to equal height; the panel fills its cell (see height:100%). */
.ais-contact__aside {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
}

.ais-contact__formwrap {
	grid-column: 2;
	grid-row: 1;
}

/* ---- Aside / direct contact ---- */
.ais-contact__panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: var(--ais-card-pad);
	position: relative;
	overflow: hidden;
}

.ais-contact__panel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ais-orange), var(--ais-orange-soft), transparent);
	opacity: .9;
}

.ais-contact__panel-title {
	font-family: var(--ais-heading-font);
	font-size: var(--ais-fs-h3);
	line-height: var(--ais-leading-heading);
	margin: 0;
	color: var(--ais-text);
}

.ais-contact__panel-sub {
	margin: -10px 0 0;
	color: var(--ais-text-muted);
	font-size: var(--ais-fs-sm);
	line-height: var(--ais-leading-body);
}

.ais-contact__methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ais-contact__method {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ais-contact__method-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: var(--ais-radius);
	color: var(--ais-orange);
	background: color-mix(in srgb, var(--ais-orange) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--ais-orange) 26%, transparent);
	transition: transform var(--ais-dur) var(--ais-ease), background var(--ais-dur) var(--ais-ease);
}

.ais-contact__method-icon .ais-icon {
	width: 20px;
	height: 20px;
}

.ais-contact__method:hover .ais-contact__method-icon {
	transform: translateY(-2px);
	background: color-mix(in srgb, var(--ais-orange) 20%, transparent);
}

.ais-contact__method-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ais-contact__method-label {
	font-size: var(--ais-fs-label);
	letter-spacing: var(--ais-tracking-label);
	text-transform: uppercase;
	color: var(--ais-text-muted);
}

.ais-contact__method-value {
	padding-block: 10px;
	margin-block: -10px;
	color: var(--ais-text);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--ais-orange) 55%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	word-break: break-word;
	transition: color var(--ais-dur) var(--ais-ease), text-decoration-color var(--ais-dur) var(--ais-ease);
}

.ais-contact__method-value:hover,
.ais-contact__method-value:focus-visible {
	color: var(--ais-orange);
	text-decoration-color: currentColor;
}

/* ---- Social ---- */
.ais-contact__social {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 20px;
	border-top: 1px solid var(--ais-border);
}

.ais-contact__social-label {
	font-size: var(--ais-fs-label);
	letter-spacing: var(--ais-tracking-label);
	text-transform: uppercase;
	color: var(--ais-text-muted);
}

.ais-contact__social-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.ais-contact__social-list .ais-social {
	width: var(--ais-social-size);
	height: var(--ais-social-size);
	border-radius: var(--ais-radius);
}

.ais-contact__social-list .ais-social .ais-icon {
	width: 20px;
	height: 20px;
}

.ais-contact__social-list .ais-social:hover,
.ais-contact__social-list .ais-social:focus-visible {
	transform: translateY(-3px);
	color: var(--ais-orange);
	border-color: color-mix(in srgb, var(--ais-orange) 50%, transparent);
	background: color-mix(in srgb, var(--ais-orange) 12%, transparent);
}

.ais-contact__social-list .ais-social--disabled,
.ais-contact__social-list .ais-social--disabled:hover,
.ais-contact__social-list .ais-social--disabled:focus-visible {
	transform: none;
	color: var(--ais-disabled-text);
	border-color: var(--ais-disabled-border);
	background: var(--ais-disabled-bg);
}

/* ---- Assurance ---- */
.ais-contact__assurance {
	margin-top: auto;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	border-radius: var(--ais-radius);
	background: color-mix(in srgb, var(--ais-text) 4%, transparent);
	border: 1px solid var(--ais-border);
	color: var(--ais-text-muted);
	font-size: var(--ais-fs-sm);
	line-height: var(--ais-leading-tight);
}

.ais-contact__assurance-icon {
	color: var(--ais-orange);
	flex: 0 0 auto;
	display: inline-flex;
}

.ais-contact__assurance-icon .ais-icon {
	width: 18px;
	height: 18px;
}

/* ---- What happens next ---- */
.ais-contact__next {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ais-contact__steps {
	margin: 0;
	padding: 0;
	padding-inline-start: 18px;
	display: grid;
	gap: 8px;
	color: var(--ais-text-muted);
	font-size: var(--ais-fs-sm);
	line-height: var(--ais-leading-body);
}

/* ---- Form ---- */
.ais-contact-form {
	height: 100%;
	padding: var(--ais-card-pad);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ais-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.ais-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	min-width: 0;
}

.ais-field__label {
	font-size: var(--ais-fs-sm);
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--ais-label);
}

.ais-field__req {
	color: var(--ais-orange);
}

.ais-field__optional {
	font-size: var(--ais-fs-label);
	font-weight: 500;
	letter-spacing: var(--ais-tracking-label);
	text-transform: uppercase;
	color: var(--ais-text-muted);
}

.ais-field__hint {
	margin-top: -4px;
	font-size: var(--ais-fs-sm);
	line-height: var(--ais-leading-tight);
	color: var(--ais-text-muted);
}

/* Budget Range hint as a hover tooltip on the label word (declutters the form).
   The bubble text stays in the DOM — hidden with opacity, not display/visibility,
   so it remains in the accessibility tree for aria-describedby (screen readers +
   the validation-error wiring in contact.js). */
.ais-field__tip {
	position: relative;
	display: inline-block;
}
.ais-field__tip-word {
	cursor: help;
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-color: color-mix(in srgb, var(--ais-label) 45%, transparent);
	text-underline-offset: 3px;
}
.ais-field__tip-bubble {
	position: absolute;
	inset-inline-start: 0;
	top: calc(100% + 8px);
	z-index: 20;
	width: max-content;
	max-width: min(260px, 72vw);
	padding: 8px 11px;
	font-size: var(--ais-fs-sm);
	font-weight: 400;
	letter-spacing: normal;
	line-height: var(--ais-leading-tight);
	text-transform: none;
	color: var(--ais-text-muted);
	background: var(--ais-dark-2, var(--ais-dark-3));
	border: 1px solid var(--ais-border);
	border-radius: var(--ais-radius-sm, 10px);
	box-shadow: 0 14px 34px -18px var(--ais-shadow-color);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .18s var(--ais-ease), transform .18s var(--ais-ease);
	pointer-events: none;
}
.ais-field__tip:hover .ais-field__tip-bubble,
.ais-field__tip:focus-within .ais-field__tip-bubble {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.ais-field__tip-bubble {
		transition: opacity .18s var(--ais-ease);
		transform: none;
	}
}

.ais-field__input {
	width: 100%;
	min-width: 0;
	font-family: var(--ais-body-font);
	font-size: max(16px, var(--ais-fs-body));
	color: var(--ais-input-text);
	background: var(--ais-input-bg);
	border: 1px solid var(--ais-input-border);
	border-radius: var(--ais-radius);
	padding: 13px 15px;
	transition: border-color var(--ais-dur-fast) var(--ais-ease), box-shadow var(--ais-dur-fast) var(--ais-ease),
		background var(--ais-dur-fast) var(--ais-ease);
	appearance: none;
	-webkit-appearance: none;
}

.ais-field__input::placeholder {
	color: var(--ais-input-placeholder);
	opacity: 1;
}

.ais-field__input:hover {
	border-color: color-mix(in srgb, var(--ais-orange) 40%, var(--ais-border));
}

.ais-field__input:focus,
.ais-field__input:focus-visible {
	outline: none;
	border-color: var(--ais-input-focus-border);
	box-shadow: 0 0 0 3px var(--ais-focus-ring);
	background: var(--ais-input-focus-bg);
}

.ais-field__textarea {
	resize: vertical;
	min-height: 130px;
	line-height: var(--ais-leading-body);
}

/* Custom select caret */
.ais-field__select {
	position: relative;
	display: block;
	min-width: 0;
}

.ais-field__select .ais-field__input {
	min-height: 52px;
	padding-inline-end: 42px;
	cursor: pointer;
	line-height: 1.35;
	text-overflow: ellipsis;
}

.ais-field__select .ais-field__caret {
	position: absolute;
	top: 50%;
	right: 14px;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	color: var(--ais-icon);
	pointer-events: none;
	transition: color var(--ais-dur) var(--ais-ease);
}

.ais-field__select:hover .ais-field__caret {
	color: var(--ais-orange);
}

.ais-contact-form select.ais-field__input option {
	color: var(--ais-input-text);
	background: var(--ais-input-bg);
	font-size: 1rem;
	line-height: 1.4;
}

/* Mute an unset select so its placeholder option reads like input placeholders;
   picks up normal text color the moment a real value is chosen. No-op without :has(). */
.ais-field__select .ais-field__input:has(option:checked[value=""]) {
	color: var(--ais-input-placeholder);
}

/* Honeypot — visually hidden, off-screen, not display:none (so bots fill it). */
.ais-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* ---- Status ---- */
.ais-form__status {
	font-size: var(--ais-fs-sm);
	line-height: var(--ais-leading-tight);
	border-radius: var(--ais-radius);
	padding: 0;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height var(--ais-dur-fast) var(--ais-ease), opacity var(--ais-dur-fast) var(--ais-ease),
		padding var(--ais-dur-fast) var(--ais-ease);
}

.ais-form__status:empty {
	display: none;
}

.ais-form__status.is-success,
.ais-form__status.is-error {
	padding: 13px 16px;
	max-height: 200px;
	opacity: 1;
	border: 1px solid var(--ais-border);
}

.ais-form__status.is-success {
	color: var(--ais-status-success-text);
	background: var(--ais-status-success-bg);
	border-color: var(--ais-status-success-border);
}

.ais-form__status.is-error {
	color: var(--ais-status-error-text);
	background: var(--ais-status-error-bg);
	border-color: var(--ais-status-error-border);
}

/* ---- Actions ---- */
.ais-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	margin-top: 4px;
}

.ais-contact-form__submit {
	gap: 10px;
}

.ais-contact-form__submit .ais-icon {
	transition: transform var(--ais-dur) var(--ais-ease);
}

.ais-contact-form__submit:hover .ais-icon {
	transform: translateX(4px);
}

.ais-contact-form__submit[disabled],
.ais-contact-form__submit[aria-disabled="true"] {
	opacity: .6;
	pointer-events: none;
	cursor: not-allowed;
}

.ais-contact-form.is-sending .ais-contact-form__submit {
	opacity: .7;
	pointer-events: none;
}

@keyframes ais-send-spin {
	to { transform: rotate(360deg); }
}

.ais-contact-form.is-sending .ais-contact-form__submit .ais-icon {
	animation: ais-send-spin .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.ais-contact-form.is-sending .ais-contact-form__submit .ais-icon {
		animation: none;
	}
}

.ais-form__trust {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--ais-fs-sm);
	color: var(--ais-text-muted);
}

.ais-form__trust .ais-icon {
	width: 17px;
	height: 17px;
	color: var(--ais-orange);
	flex: 0 0 auto;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.ais-contact__grid {
		grid-template-columns: 1fr;
	}

	.ais-contact__aside,
	.ais-contact__formwrap {
		grid-column: auto;
		grid-row: auto;
	}

	.ais-contact__aside {
		position: static;
	}

	.ais-contact__assurance {
		margin-top: 8px;
	}
}

@media (max-width: 640px) {
	.ais-contact__panel,
	.ais-contact-form {
		padding: clamp(20px, 6vw, 26px);
	}

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

	.ais-form__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ais-contact-form__submit {
		justify-content: center;
		width: 100%;
	}

	.ais-form__trust {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ais-contact__method-icon,
	.ais-contact__social-list .ais-social,
	.ais-field__input,
	.ais-field__caret,
	.ais-contact-form__submit .ais-icon,
	.ais-form__status {
		transition: none;
	}
}

/* ---- Inline field errors (JS validation, PLAN-3 Fix 10) ---- */
/* One red per mode: reuse the mode-resolved palette danger token so inline
   field errors and the status summary never render two different reds. */
:root { --ais-form-error: var(--ais-danger); }

.ais-field__error {
	display: block;
	margin-top: 6px;
	font-size: var(--ais-fs-sm, 0.875rem);
	font-weight: 600;
	color: var(--ais-form-error, #FF8A80);
}

.ais-field.has-error .ais-field__input {
	border-color: var(--ais-form-error, #FF8A80);
}

/* Keep the error signal on focus: outrank the dynamic-CSS focus rule that forces
   the input-focus border, and swap the orange focus ring for a matching red one. */
.ais-field.has-error .ais-field__input:focus,
.ais-field.has-error .ais-field__input:focus-visible {
	border-color: var(--ais-form-error) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ais-form-error) 25%, transparent);
}

/* ---- RTL ----
   Mirror the ambient glow blobs, the panel's directional top gradient,
   the select caret, and the submit arrow. The aside/form grid columns
   reverse automatically under dir=rtl. LTR rendering is unchanged. */
[dir="rtl"] .ais-contact__glow--a {
	right: auto;
	left: -8%;
}
[dir="rtl"] .ais-contact__glow--b {
	left: auto;
	right: -12%;
}
[dir="rtl"] .ais-contact__panel::before {
	background: linear-gradient(270deg, var(--ais-orange), var(--ais-orange-soft), transparent);
}
[dir="rtl"] .ais-field__select .ais-field__caret {
	right: auto;
	left: 14px;
}
[dir="rtl"] .ais-contact-form__submit:hover .ais-icon {
	transform: translateX(-4px);
}