/* Alliance Contact Page — hero/intro decoration only.
   The form itself (inside .contact-form-col) is styled entirely by
   alliance-core's leads.css — nothing here targets it. */

.contact-hero {
	position: relative;
	background: var(--au-cream);
	padding: 64px 0 72px;
}

/* Dot cluster — empty left margin/gutter of the section, anchored from
   the TOP (the section can get tall depending on form content, so
   anchoring from the bottom risks landing below the fold). T3-style
   scattered rectangular dot clusters via 3 masked blocks. */
.contact-hero::before {
	content: '';
	position: absolute;
	top: 80px;
	left: 0;
	width: 560px;
	height: 360px;
	background-image: radial-gradient(circle, rgba(54, 54, 54, .24) 1.5px, transparent 1.5px);
	background-size: 16px 16px;
	-webkit-mask-image:
		linear-gradient(#000, #000),
		linear-gradient(#000, #000),
		linear-gradient(#000, #000);
	        mask-image:
		linear-gradient(#000, #000),
		linear-gradient(#000, #000),
		linear-gradient(#000, #000);
	-webkit-mask-size: 220px 90px, 150px 140px, 180px 70px;
	        mask-size: 220px 90px, 150px 140px, 180px 70px;
	-webkit-mask-position: 5% 12%, 60% 42%, 20% 95%;
	        mask-position: 5% 12%, 60% 42%, 20% 95%;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	pointer-events: none;
	z-index: 0;
}

/* Single corner bracket — relative to the full section width, near the
   far right edge of the page. */
.contact-hero::after {
	content: '';
	position: absolute;
	top: 56px;
	right: 7%;
	width: 18px;
	height: 18px;
	border-top: 1.5px solid rgba(54, 54, 54, .5);
	border-right: 1.5px solid rgba(54, 54, 54, .5);
	pointer-events: none;
	z-index: 3;
}

.contact-wrap {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 64px;
	align-items: start;
}

.contact-intro h1 {
	font-family: var(--au-font-heading);
	font-weight: 700;
	font-size: clamp(30px, 3.6vw, 40px);
	line-height: 1.15;
	letter-spacing: -.5px;
	color: var(--au-charcoal);
	margin-bottom: 18px;
}

.contact-intro .lead {
	font-family: var(--au-font-body);
	font-size: 16px;
	color: var(--au-text-mid);
	max-width: 380px;
	margin-bottom: 28px;
}

.contact-divider {
	height: 1px;
	background: var(--au-border);
	margin-bottom: 24px;
}

.contact-intro h2 {
	font-family: var(--au-font-heading);
	font-weight: 600;
	font-size: 18px;
	color: var(--au-charcoal);
	margin-bottom: 16px;
}

.contact-list {
	display: flex;
	flex-direction: column;
}

.contact-list a,
.contact-list span {
	display: block;
	padding: 13px 0;
	border-top: 1px solid var(--au-border);
	font-family: var(--au-font-body);
	font-size: 15px;
	font-weight: 500;
	color: var(--au-link-color);
}

.contact-list a:hover {
	color: var(--au-link-hover);
}

/* ── Responsive ── */
@media (max-width: 900px) {
	.contact-wrap {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 0 22px;
	}
	.contact-hero {
		padding: 48px 0 56px;
	}
	.contact-hero::before {
		width: 100%;
		opacity: .6;
	}
}

@media (max-width: 560px) {
	.contact-intro .lead {
		max-width: none;
	}
	.contact-hero::after {
		display: none;
	}
}