/* "Connect With Us On Social Media" — Contact page (components/connect-social/connect-social.php) */

/* Tighten the gap up from the Calendly section. */
.section:has(.connect-social) { padding-top: 24px; }

.connect-social {
	max-width: var(--content-max);
	margin-inline: auto;
	background: var(--color-navy-mid);
	border-radius: var(--radius-section);
	padding: 64px var(--side-padding);
	text-align: center;
}

/* Title — DM Serif Display Regular 48, -2%, gold gradient clipped to the text (Figma). */
.connect-social__title {
	font-family: var(--font-display);
	font-weight: var(--weight-regular);
	font-size: 48px;
	line-height: 88px; /* Figma */
	letter-spacing: -0.02em; /* Figma: -2% */
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 20px;
	background: var(--gradient-gold-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--color-gold); /* fallback */
}

.connect-social__icons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
}
/* White glyphs, 45×45, that zoom to 60×60 on hover (transform keeps layout stable). */
.connect-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-off-white);
}
.connect-social__link svg {
	display: block;
	width: 45px;
	height: 45px;
	transition: transform 0.3s ease;
}
.connect-social__link:hover svg {
	transform: scale(1.3333); /* 45 → 60 */
}

@media (max-width: 768px) {
	.connect-social { border-radius: 0; padding: 48px 24px; }
	.connect-social__title { font-size: 32px; line-height: 1.3; }
	.connect-social__icons { gap: 28px; }
}