/* ═══════════════════════════════════════════════════════════════════════════
   Contact page (Topline Contact template)
   Hero + breadcrumbs: EXACT copy of service-hero-layout.md + service-page.css
   so contact matches forensic service page. main.asi * resets padding/margin,
   so we re-declare everything here with higher specificity.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HERO (service-hero-layout.md) ────────────────────────────────────────
   Split: mobile stacked; 768px+ text 45% / image flex:1; 1200px+ text 40% max 768px / image flex:1 min 40%
   Heights: 400px → 460px (768px+) → 513px (1200px+)
   At 1200px+: teal COLOR full-bleed left; padding-left = header formula (text anchored to logo).
   Panel has no max-width so it can grow on wide viewports and never crunch the text.
   Teal panel 60% so content has more room; scales with viewport.
*/

main.asi.esi-contact .sp-hero {
	position: relative;
	width: 100%;
	min-height: 400px;
	display: flex;
	flex-direction: column;
}
@media (min-width: 768px) {
	main.asi.esi-contact .sp-hero {
		flex-direction: row;
		min-height: 460px;
	}
}
@media (min-width: 1200px) {
	main.asi.esi-contact .sp-hero {
		min-height: 513px;
	}
}

main.asi.esi-contact .sp-hero__red {
	position: relative;
	z-index: 2;
	background: linear-gradient(135deg, #14383f 0%, var(--sp-hero-bg, #1b4d5c) 100%);
	padding: 80px var(--sp-pad, 20px) 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-shrink: 0;
}
@media (min-width: 768px) {
	main.asi.esi-contact .sp-hero__red {
		width: 45%;
		min-height: 460px;
		padding: 0 48px 0 var(--sp-pad, 40px);
	}
}
@media (min-width: 1200px) {
	main.asi.esi-contact .sp-hero__red {
		width: 60%;
		min-height: 513px;
		padding-left: max(var(--h-pad, 47px), calc((100vw - var(--h-max, 1440px)) / 2 + var(--h-pad, 47px)));
		padding-right: 67px;
	}
}
@media (min-width: 1600px) {
	main.asi.esi-contact .sp-hero__red {
		padding-right: 48px;
	}
}

main.asi.esi-contact .sp-hero__badge {
	display: inline-block;
	width: fit-content;
	background: var(--sp-dark, #1f1f1f);
	color: var(--sp-white, #ffffff);
	font-family: var(--h-font, 'Aeonik', sans-serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	padding: 7px 21px;
	border-radius: 50px;
	margin-bottom: 20px;
}

main.asi.esi-contact .sp-hero__title {
	font-family: var(--h-font, 'Aeonik', sans-serif);
	font-size: 36px;
	font-weight: 400;
	line-height: 1.0;
	color: var(--sp-white, #ffffff);
	margin: 0 0 20px;
	max-width: 634px;
}
@media (min-width: 768px) {
	main.asi.esi-contact .sp-hero__title {
		font-size: 44px;
	}
}
@media (min-width: 1200px) {
	main.asi.esi-contact .sp-hero__title {
		font-size: 58px;
	}
}

main.asi.esi-contact .sp-hero__intro {
	font-family: var(--h-font, 'Aeonik', sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	color: var(--sp-white, #ffffff);
	margin: 0;
	max-width: 598px;
}
@media (min-width: 1200px) {
	main.asi.esi-contact .sp-hero__intro {
		font-size: 18px;
	}
}

/* Image panel: doc says 768px+ flex:1, min-width 40%; image fills panel, no fixed line */
main.asi.esi-contact .sp-hero__image {
	position: relative;
	z-index: 1;
	min-height: 240px;
	overflow: hidden;
}
@media (min-width: 768px) {
	main.asi.esi-contact .sp-hero__image {
		flex: 1;
		min-width: 40%;
		min-height: 460px;
	}
}
@media (min-width: 1200px) {
	main.asi.esi-contact .sp-hero__image {
		min-height: 513px;
	}
}
main.asi.esi-contact .sp-hero__image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	position: absolute;
	inset: 0;
}

/* ── BREADCRUMBS (service-page.css: max-width sp-max, padding 20px sp-pad 0) ── */
main.asi.esi-contact .sp-breadcrumbs {
	max-width: var(--sp-max, 1440px);
	margin: 0 auto;
	padding: 20px var(--sp-pad, 20px) 0;
}
main.asi.esi-contact .sp-breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
main.asi.esi-contact .sp-breadcrumbs li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--h-font, 'Aeonik', sans-serif);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
}
main.asi.esi-contact .sp-breadcrumbs a {
	color: var(--sp-body, #5f6368);
	text-decoration: none;
}
main.asi.esi-contact .sp-breadcrumbs a:hover {
	text-decoration: underline;
}
main.asi.esi-contact .sp-breadcrumbs span[aria-current="page"] {
	color: var(--sp-dark, #1f1f1f);
}
main.asi.esi-contact .sp-breadcrumbs__sep {
	display: block;
	flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   BODY — two-column form + offices (light gray behind form card)
   ══════════════════════════════════════════════════════════════════════════ */
main.asi.esi-contact .ass-body {
	max-width: var(--h-max, 1440px) !important;
	padding-left: var(--h-pad, 20px) !important;
	padding-right: var(--h-pad, 20px) !important;
}

/* ── Form card (match areas-served: white card, dark green top border) ───── */
main.asi.esi-contact .ass-form {
	min-width: 0;
	width: 100%;
}
main.asi.esi-contact .ass-form__card {
	width: 100%;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid #e8eaed;
	border-top: 3px solid #14383f;
	border-radius: 0 0 12px 12px;
	padding: 36px 28px;
}
@media (min-width: 768px) {
	main.asi.esi-contact .ass-form__card {
		padding: 40px 32px;
	}
}
@media (min-width: 1200px) {
	main.asi.esi-contact .ass-form__card {
		padding: 48px 40px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   FORM — title + intro (form-5 styling in assets/esi-ac-forms.css)
   ══════════════════════════════════════════════════════════════════════════ */
main.asi.esi-contact .ass-form__title {
	font-family: var(--h-font, 'Aeonik', sans-serif) !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--h-dark, #1f1f1f) !important;
	margin: 0 0 12px 0 !important;
}
main.asi.esi-contact .ass-form__heading {
	font-family: var(--h-font, 'Aeonik', sans-serif) !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: var(--h-gray, #5f6368) !important;
	margin: 0 0 32px 0 !important;
}
@media (min-width: 1200px) {
	main.asi.esi-contact .ass-form__title {
		font-size: 24px !important;
	}
	main.asi.esi-contact .ass-form__heading {
		font-size: 22px !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   OFFICE INFO — polished cards (same pattern as areas-served city/state)
   ══════════════════════════════════════════════════════════════════════════ */
main.asi.esi-contact .esi-contact__offices .ass-office {
	margin-top: 20px;
}
main.asi.esi-contact .esi-contact__offices .ass-office:first-child {
	margin-top: 0;
}

main.asi.esi-contact .esi-contact__offices .ass-office__detail {
	font-family: var(--h-font, 'Aeonik', sans-serif) !important;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	color: #5f6368;
	margin-bottom: 12px;
}
main.asi.esi-contact .esi-contact__offices .ass-office__detail strong {
	font-weight: 600;
	color: #1f1f1f;
	display: block;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 2px;
}
main.asi.esi-contact .esi-contact__offices .ass-office__detail a {
	color: #1b4d5c;
	text-decoration: none;
	font-weight: 500;
}
main.asi.esi-contact .esi-contact__offices .ass-office__detail a:hover {
	text-decoration: underline;
}

/* Map image — reduced top spacing to avoid large white band */
main.asi.esi-contact .esi-contact__offices .ass-office__map {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #e8eaed;
}
main.asi.esi-contact .esi-contact__offices .ass-office__map img {
	opacity: 0.65;
	transition: opacity 0.3s ease;
}
main.asi.esi-contact .esi-contact__offices .ass-office__map img:hover {
	opacity: 1;
}