/* ===========================================================================
   CONTACT
   Built from "Contact Page.dc.html".

   A SWITCHBOARD, NOT A DESTINATION, which is the design's own framing: the
   page's job is to move people to the sponsor page, the consulting page or
   the community, and only then to a form. So the signposts come before the
   form, and nothing here competes with them.

   Loaded on this page only. Namespaced .atc-ct.
   =========================================================================== */

.atc-ct {
	background: var(--atc-white, #FFFFFF);
	color: var(--atc-black, #0A0A0A);
	font-family: var(--atc-font, "Poppins", -apple-system, sans-serif);
}
.atc-ct *, .atc-ct *::before, .atc-ct *::after { box-sizing: border-box; }
.atc-ct__inner { max-width: 1200px; margin: 0 auto; }
.atc-ct [id] { scroll-margin-top: 104px; }
.atc-ct-rule { border-top: 2px solid var(--atc-black, #0A0A0A); padding-top: 56px; }

.atc-ct-eyebrow {
	margin: 0 0 20px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--atc-ink-600, #565656);
}
.atc-ct-h2 {
	margin: 0;
	font-size: 34px;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.04;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.atc-ct-headrow { display: flex; align-items: flex-end; gap: 22px; margin-bottom: 28px; }
.atc-ct-headrow__icon { height: 58px; width: auto; display: block; }
.atc-ct-arrow { font-size: 20px; line-height: 1; }

/* --- hero --------------------------------------------------------------- */
.atc-ct-hero { padding: 64px 40px 48px; }
.atc-ct-hero__title {
	margin: 0 0 20px;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}
.atc-ct-hero__lede { margin: 0; font-size: 19px; line-height: 1.6; color: var(--atc-ink-700, #2E2E2E); max-width: 60ch; }

/* --- how we can help ---------------------------------------------------- */
.atc-ct-help { padding: 0 40px 72px; }
.atc-ct-help__grid {
	border-top: 2px solid var(--atc-black, #0A0A0A);
	padding-top: 32px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.atc-ct-signpost {
	display: flex;
	flex-direction: column;
	background: var(--atc-ink-100, #F2F2F2);
	border-radius: 18px;
	padding: 30px;
	text-decoration: none;
	color: var(--atc-black, #0A0A0A);
	transition: transform 160ms var(--atc-ease, cubic-bezier(.22,1,.36,1)),
	            background-color 160ms var(--atc-ease, cubic-bezier(.22,1,.36,1));
}
.atc-ct-signpost:hover, .atc-ct-signpost:focus {
	color: var(--atc-black, #0A0A0A);
	background: var(--atc-yellow, #FFE600);
	transform: translateY(-3px);
}
.atc-ct-signpost:focus-visible { outline: 3px solid var(--atc-black, #0A0A0A); outline-offset: 3px; }
.atc-ct-signpost__title { font-size: 26px; font-weight: 800; text-transform: uppercase; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 14px; }
.atc-ct-signpost__body { font-size: 18px; line-height: 1.6; color: var(--atc-ink-700, #2E2E2E); margin-bottom: 20px; }
.atc-ct-signpost__cta {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
/* The card ground turns yellow on hover, so the body copy has to darken. */
.atc-ct-signpost:hover .atc-ct-signpost__body,
.atc-ct-signpost:focus .atc-ct-signpost__body { color: var(--atc-black, #0A0A0A); }

/* --- want to be on the show --------------------------------------------- */
.atc-ct-guest { padding: 0 40px 76px; }
.atc-ct-guest__prose { max-width: 68ch; }
.atc-ct-guest__prose p { margin: 0 0 22px; font-size: 19px; line-height: 1.75; color: var(--atc-ink-700, #2E2E2E); }
.atc-ct-guest__prose p:last-of-type { margin-bottom: 30px; }
.atc-ct-underline {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--atc-black, #0A0A0A);
	border-bottom: 3px solid var(--atc-yellow, #FFE600);
	padding-bottom: 4px;
}
.atc-ct-underline:hover, .atc-ct-underline:focus { color: var(--atc-black, #0A0A0A); border-bottom-color: var(--atc-black, #0A0A0A); }
.atc-ct-underline .atc-ct-arrow { font-size: 18px; }

/* --- everything else + form --------------------------------------------- */
.atc-ct-else { padding: 0 40px 76px; }
.atc-ct-else__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.atc-ct-else .atc-ct-h2 { margin-bottom: 18px; }
.atc-ct-else__lede { margin: 0; font-size: 19px; line-height: 1.7; color: var(--atc-ink-700, #2E2E2E); max-width: 46ch; }
/*
 * HubSpot's iframe, sized by the shared loader in functions.php. No fixed
 * height: the form grows when validation appears.
 */
.atc-ct-form__embed { min-height: 320px; }
.atc-ct-form__embed.is-sized { min-height: 0; }
.atc-ct-form__embed iframe { max-width: 100% !important; }

/* --- closing strip ------------------------------------------------------ */
.atc-ct-strip { background: var(--atc-ink-100, #F2F2F2); padding: 48px 40px; }
.atc-ct-strip__grid { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.atc-ct-strip__head { margin: 0 0 14px; font-size: 17px; font-weight: 800; }
.atc-ct-strip__listen { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.atc-ct-strip__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--atc-black, #0A0A0A);
	border-bottom: 2px solid transparent;
}
.atc-ct-strip__link:hover, .atc-ct-strip__link:focus { color: var(--atc-black, #0A0A0A); border-bottom-color: var(--atc-black, #0A0A0A); }
.atc-ct-strip__prose { max-width: 52ch; }
.atc-ct-strip__prose p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--atc-ink-600, #565656); }
.atc-ct-strip__prose p:last-child { margin-bottom: 0; }
.atc-ct-inline {
	color: var(--atc-ink-600, #565656);
	text-decoration: none;
	border-bottom: 2px solid var(--atc-yellow, #FFE600);
}
.atc-ct-inline:hover, .atc-ct-inline:focus { color: var(--atc-black, #0A0A0A); border-bottom-color: var(--atc-black, #0A0A0A); }

/* --- tablet ------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
	.atc-ct-help__grid { grid-template-columns: 1fr; }
	.atc-ct-else__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* --- mobile, against the 390px artboard --------------------------------- */
@media only screen and (max-width: 767px) {
	.atc-ct-hero { padding: 32px 20px 30px; }
	.atc-ct-help { padding: 0 20px 34px; }
	.atc-ct-guest { padding: 0 20px 36px; }
	.atc-ct-else { padding: 0 20px 36px; }
	.atc-ct-strip { padding: 30px 20px; }
	.atc-ct-rule { padding-top: 30px; }

	.atc-ct-hero__title { font-size: 36px; margin-bottom: 16px; }
	.atc-ct-hero__lede { font-size: 17px; }
	.atc-ct-h2 { font-size: 26px; }
	.atc-ct-eyebrow { font-size: 10px; margin-bottom: 16px; }
	.atc-ct-headrow { gap: 16px; margin-bottom: 20px; }
	.atc-ct-headrow__icon { height: 46px; }

	/*
	 * THE ARTBOARD TURNS THE SIGNPOSTS INTO A DIRECTORY, not stacked cards:
	 * no ground, no radius, separated by rules, with the last one closing on
	 * a black rule. That is the design's mobile answer and it reads far better
	 * than three tall grey blocks.
	 */
	.atc-ct-help__grid { display: block; padding-top: 0; }
	.atc-ct-signpost {
		background: none;
		border-radius: 0;
		padding: 20px 0;
		border-bottom: 2px solid var(--atc-ink-200, #E6E6E6);
	}
	.atc-ct-signpost:hover, .atc-ct-signpost:focus { background: none; transform: none; }
	.atc-ct-signpost:last-child { border-bottom: 2px solid var(--atc-black, #0A0A0A); }
	.atc-ct-signpost__title { font-size: 22px; margin-bottom: 10px; }
	.atc-ct-signpost__body { font-size: 16px; margin-bottom: 14px; }
	.atc-ct-signpost__cta { font-size: 12px; }
	.atc-ct-signpost__cta .atc-ct-arrow { font-size: 18px; }

	.atc-ct-guest__prose p { font-size: 17px; line-height: 1.7; margin-bottom: 18px; }
	.atc-ct-guest__prose p:last-of-type { margin-bottom: 24px; }
	.atc-ct-underline { font-size: 12px; }
	.atc-ct-else__lede { font-size: 17px; margin-bottom: 22px; }

	.atc-ct-strip__grid { display: block; }
	.atc-ct-strip__head { font-size: 16px; }
	.atc-ct-strip__listen { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
	.atc-ct-strip__prose { max-width: none; }
}