/* ========================================================================
	Find & Bind · Contact page
	Loaded after content_pages.css so this file only contains contact-specific UI.
	======================================================================== */

.contact-page-wrap{
	max-width:1180px;
}

.contact-hero__lead{
	max-width:720px;
}

.contact-section-heading{
	margin-bottom:16px;
	text-align:center;
}

.contact-section-heading h2{
	margin:0;
	color:var(--ink);
	font-size:clamp(23px,3vw,31px);
	line-height:1.25;
}

.contact-route-grid{
	margin-bottom:34px;
}

.contact-route-grid__items{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:16px;
}

.contact-route-card{
	display:grid;
	grid-template-columns:44px minmax(0,1fr) auto;
	align-items:center;
	gap:14px;
	min-width:0;
	padding:18px;
	border:1px solid var(--line);
	border-radius:16px;
	background:#fff;
	box-shadow:0 8px 24px rgba(17,24,39,.05);
	color:inherit;
	text-decoration:none;
	transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

.contact-route-card:hover{
	border-color:#cfd7e4;
	box-shadow:0 13px 30px rgba(17,24,39,.09);
	transform:translateY(-2px);
}

.contact-route-card:focus-visible{
	outline:3px solid rgba(225,6,0,.2);
	outline-offset:3px;
}

.contact-route-card > span{
	display:grid;
	place-items:center;
	width:44px;
	height:44px;
	border-radius:13px;
	background:#fff0ef;
	color:var(--red);
	font-size:17px;
}

.contact-route-card:nth-child(2) > span{
	background:#edf4ff;
	color:#2563a6;
}

.contact-route-card:nth-child(3) > span{
	background:#eaf8ed;
	color:#087a2a;
}

.contact-route-card h3{
	margin:0 0 4px;
	color:var(--ink);
	font-size:15px;
	line-height:1.35;
}

.contact-route-card p{
	margin:0;
	color:var(--muted);
	font-size:13px;
	line-height:1.5;
}

.contact-route-card > .fa-arrow-right{
	color:#8a95a5;
	font-size:13px;
}

.contact-layout{
	display:grid;
	grid-template-columns:minmax(260px,340px) minmax(0,1fr);
	align-items:start;
	gap:24px;
}

.contact-guidance,
.contact-form-card{
	border:1px solid var(--line);
	border-radius:18px;
	background:#fff;
	box-shadow:0 10px 30px rgba(17,24,39,.055);
}

.contact-guidance{
	position:sticky;
	top:88px;
	padding:26px;
}

.contact-guidance__icon{
	display:grid;
	place-items:center;
	width:48px;
	height:48px;
	margin-bottom:17px;
	border-radius:15px;
	background:#fff0ef;
	color:var(--red);
	font-size:20px;
}

.contact-guidance h2{
	margin:0 0 10px;
	color:var(--ink);
	font-size:21px;
	line-height:1.3;
}

.contact-guidance > p{
	margin:0;
	color:#526070;
	font-size:14px;
	line-height:1.7;
}

.contact-guidance__list{
	display:grid;
	gap:11px;
	margin:22px 0;
	padding:0;
	list-style:none;
}

.contact-guidance__list li{
	display:flex;
	align-items:flex-start;
	gap:10px;
	color:#465366;
	font-size:14px;
	line-height:1.5;
}

.contact-guidance__list i{
	display:grid;
	place-items:center;
	width:20px;
	height:20px;
	margin-top:1px;
	border-radius:999px;
	background:#eaf8ed;
	color:#087a2a;
	font-size:9px;
	flex:0 0 20px;
}

.contact-guidance__notice{
	display:flex;
	align-items:flex-start;
	gap:11px;
	padding:14px;
	border:1px solid #f1d9a7;
	border-radius:12px;
	background:#fff9ea;
	color:#765418;
}

.contact-guidance__notice > i{
	margin-top:3px;
	color:#b7790b;
}

.contact-guidance__notice p{
	margin:0;
	font-size:13px;
	line-height:1.55;
}

.contact-guidance .contact-guidance__small{
	margin-top:15px;
	color:#707b8c;
	font-size:12px;
	line-height:1.6;
}

.contact-form-card{
	min-width:0;
	padding:clamp(24px,4vw,42px);
}

.contact-form-card__heading{
	margin-bottom:25px;
}

.contact-form-card__heading h2{
	margin:0 0 7px;
	color:var(--ink);
	font-size:clamp(24px,3vw,31px);
	line-height:1.25;
}

.contact-form-card__heading > p:last-child{
	margin:0;
	color:var(--muted);
	font-size:14px;
}

.contact-form-card__heading > p:last-child span,
.contact-field > label span,
.contact-field__label-row label span{
	color:var(--red);
}

.contact-form-alert{
	margin:0 0 22px;
	padding:15px 17px;
	border:1px solid transparent;
	border-radius:12px;
	font-size:14px;
	line-height:1.55;
}

.contact-form-alert.is-hidden{
	display:none;
}

.contact-form-alert--success{
	border-color:#b9e2c1;
	background:#edf9ef;
	color:#176128;
}

.contact-form-alert--error{
	border-color:#efc2bf;
	background:#fff1f0;
	color:#9d201b;
}

.contact-form-alert p{
	margin:0;
}

.contact-form-alert strong{
	display:block;
	margin-top:5px;
	font-weight:800;
}

.contact-form{
	display:grid;
	gap:19px;
}

.contact-honeypot{
	position:absolute !important;
	left:-10000px !important;
	top:auto !important;
	width:1px !important;
	height:1px !important;
	overflow:hidden !important;
}

.contact-form-grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:16px;
}

.contact-field{
	display:grid;
	gap:7px;
	min-width:0;
}

.contact-field > label,
.contact-field__label-row label{
	color:var(--ink);
	font-size:14px;
	font-weight:750;
}

.contact-field__label-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}

.contact-field__label-row > span{
	color:#7b8695;
	font-size:12px;
	font-variant-numeric:tabular-nums;
}

.contact-field input,
.contact-field select,
.contact-field textarea{
	width:100%;
	min-width:0;
	border:1px solid #cfd6e0;
	border-radius:10px;
	background:#fff;
	color:var(--ink);
	font:inherit;
	font-size:15px;
	transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}

.contact-field input,
.contact-field select{
	height:46px;
	padding:0 13px;
}

.contact-field select{
	cursor:pointer;
}

.contact-field textarea{
	min-height:170px;
	padding:12px 13px;
	line-height:1.6;
	resize:vertical;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
	border-color:var(--red);
	box-shadow:0 0 0 3px rgba(225,6,0,.12);
	outline:0;
}

.contact-field input[readonly]{
	background:#f3f5f8;
	color:#5b6675;
	cursor:not-allowed;
}

.contact-field .is-invalid,
.contact-consent.is-invalid{
	border-color:#d92d27;
}

.contact-field .is-invalid:focus{
	box-shadow:0 0 0 3px rgba(217,45,39,.13);
}

.contact-field-hint,
.contact-field-error{
	display:block;
	font-size:12px;
	line-height:1.45;
}

.contact-field-hint{
	color:#758092;
}

.contact-field-error{
	min-height:0;
	color:#b4231e;
	font-weight:650;
}

.contact-field-error:empty{
	display:none;
}

.contact-signed-in-note{
	display:flex;
	align-items:center;
	gap:8px;
	margin:-6px 0 0;
	color:#387047;
	font-size:12px;
}

.contact-consent{
	padding:14px;
	border:1px solid var(--line);
	border-radius:11px;
	background:#f8f9fb;
}

.contact-consent > label{
	display:flex;
	align-items:flex-start;
	gap:10px;
	color:#485467;
	font-size:13px;
	line-height:1.55;
	cursor:pointer;
}

.contact-consent input{
	width:17px;
	height:17px;
	margin:2px 0 0;
	accent-color:var(--red);
	flex:0 0 17px;
}

.contact-consent a{
	color:var(--red);
	font-weight:700;
}

.contact-consent .contact-field-error{
	margin:7px 0 0 27px;
}

.contact-submit{
	justify-self:start;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	min-width:160px;
	min-height:46px;
	border:0;
	cursor:pointer;
}

.contact-submit[disabled]{
	opacity:.68;
	cursor:wait;
}

.contact-submit.is-loading i{
	animation:contact-spin .8s linear infinite;
}

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

.contact-report-note{
	display:flex;
	align-items:flex-start;
	gap:16px;
	margin-top:24px;
	padding:22px 24px;
	border:1px solid #d9e4f4;
	border-radius:16px;
	background:#f2f7fe;
	color:#36526f;
}

.contact-report-note > i{
	display:grid;
	place-items:center;
	width:40px;
	height:40px;
	border-radius:12px;
	background:#fff;
	color:#2563a6;
	flex:0 0 40px;
}

.contact-report-note h2{
	margin:0 0 4px;
	color:#223d5c;
	font-size:16px;
	line-height:1.4;
}

.contact-report-note p{
	margin:0;
	font-size:13px;
	line-height:1.6;
}

/* Match the dark surfaces and text contrast used by content_pages.css. */
html[data-theme="dark"] .contact-page-main{
	--ink:#eef2f7;
	--muted:#b8c2d0;
}

html[data-theme="dark"] .contact-route-card,
html[data-theme="dark"] .contact-guidance,
html[data-theme="dark"] .contact-form-card{
	border-color:var(--line);
	background:#0e1420;
	box-shadow:0 12px 30px rgba(0,0,0,.25);
}

html[data-theme="dark"] .contact-route-card:hover{
	border-color:#334155;
	box-shadow:0 14px 32px rgba(0,0,0,.32);
}

html[data-theme="dark"] .contact-route-card h3,
html[data-theme="dark"] .contact-guidance h2,
html[data-theme="dark"] .contact-form-card__heading h2,
html[data-theme="dark"] .contact-field > label,
html[data-theme="dark"] .contact-field__label-row label{
	color:#eef2f7;
}

html[data-theme="dark"] .contact-route-card p,
html[data-theme="dark"] .contact-guidance > p,
html[data-theme="dark"] .contact-guidance__list li,
html[data-theme="dark"] .contact-form-card__heading > p:last-child,
html[data-theme="dark"] .contact-consent > label{
	color:#b8c2d0;
}

html[data-theme="dark"] .contact-route-card > .fa-arrow-right,
html[data-theme="dark"] .contact-guidance .contact-guidance__small,
html[data-theme="dark"] .contact-field__label-row > span,
html[data-theme="dark"] .contact-field-hint{
	color:#94a3b8;
}

/* Keep the same light icon tiles used by the other content-page cards. */
html[data-theme="dark"] .contact-route-card > span,
html[data-theme="dark"] .contact-guidance__icon{
	background:#fff0ef;
	color:var(--red);
}

html[data-theme="dark"] .contact-route-card:nth-child(2) > span{
	background:#edf4ff;
	color:#2563a6;
}

html[data-theme="dark"] .contact-route-card:nth-child(3) > span{
	background:#eaf8ed;
	color:#087a2a;
}

html[data-theme="dark"] .contact-guidance__list i{
	background:#10271a;
	color:#6ee7a0;
}

html[data-theme="dark"] .contact-guidance__notice{
	border-color:#4d4022;
	background:#211b10;
	color:#f3d27a;
}

html[data-theme="dark"] .contact-guidance__notice > i{
	color:#ffd978;
}

html[data-theme="dark"] .contact-form-alert--success{
	border-color:#315d3a;
	background:#182c1c;
	color:#91d89f;
}

html[data-theme="dark"] .contact-form-alert--error{
	border-color:#673633;
	background:#321d1c;
	color:#f0a29d;
}

html[data-theme="dark"] .contact-field input,
html[data-theme="dark"] .contact-field select,
html[data-theme="dark"] .contact-field textarea{
	border-color:#334155;
	background:#0b1220;
	color:#edf1f6;
	color-scheme:dark;
}

html[data-theme="dark"] .contact-field input::placeholder,
html[data-theme="dark"] .contact-field textarea::placeholder{
	color:#7f8b9d;
	opacity:1;
}

html[data-theme="dark"] .contact-field input:hover,
html[data-theme="dark"] .contact-field select:hover,
html[data-theme="dark"] .contact-field textarea:hover{
	border-color:#475569;
}

html[data-theme="dark"] .contact-field input:focus,
html[data-theme="dark"] .contact-field select:focus,
html[data-theme="dark"] .contact-field textarea:focus{
	border-color:var(--red-special);
	box-shadow:0 0 0 3px rgba(255,92,84,.15);
}

html[data-theme="dark"] .contact-field input[readonly]{
	border-color:#293445;
	background:#111927;
	color:#aab5c4;
}

html[data-theme="dark"] .contact-field-error{
	color:#ff8a84;
}

html[data-theme="dark"] .contact-signed-in-note{
	color:#7ce59b;
}

html[data-theme="dark"] .contact-consent{
	border-color:#253041;
	background:#111927;
}

html[data-theme="dark"] .contact-report-note{
	border-color:#29384d;
	background:#101b2a;
	color:#b8cbe0;
}

html[data-theme="dark"] .contact-report-note > i{
	background:#172943;
	color:#8fc5ff;
}

html[data-theme="dark"] .contact-report-note h2{
	color:#eef2f7;
}

@media (max-width:920px){
	.contact-route-grid__items{
		grid-template-columns:1fr;
	}

	.contact-layout{
		grid-template-columns:1fr;
	}

	.contact-guidance{
		position:static;
	}
}

@media (max-width:640px){
	.contact-page-wrap{
		padding-top:28px;
		padding-bottom:48px;
	}

	.contact-route-grid{
		margin-bottom:24px;
	}

	.contact-route-card{
		grid-template-columns:40px minmax(0,1fr) auto;
		padding:15px;
	}

	.contact-route-card > span{
		width:40px;
		height:40px;
	}

	.contact-form-card,
	.contact-guidance{
		padding:21px;
		border-radius:15px;
	}

	.contact-form-grid{
		grid-template-columns:1fr;
	}

	.contact-submit{
		width:100%;
	}

	.contact-report-note{
		padding:18px;
	}
}

@media (prefers-reduced-motion:reduce){
	.contact-route-card,
	.contact-field input,
	.contact-field select,
	.contact-field textarea{
		transition:none;
	}

	.contact-submit.is-loading i{
		animation:none;
	}
}