.coursejournal-contact-page main {
	--coursejournal-contact-ink: var(--coursejournal-ink-900);
	--coursejournal-contact-muted: var(--coursejournal-ink-600);
	--coursejournal-contact-line: var(--coursejournal-ink-200);
	--coursejournal-contact-soft: var(--coursejournal-ink-50);
	--coursejournal-contact-green: var(--coursejournal-blue-700);
	--coursejournal-contact-blue: var(--coursejournal-blue-700);
	--coursejournal-contact-width: min(1040px, 100%);
	color: var(--coursejournal-contact-ink);
}

.coursejournal-contact-page main.wp-block-group {
	margin-top: 0 !important;
}

.coursejournal-contact-page main > article.wp-block-group {
	padding-left: 0;
	padding-right: 0;
}

.coursejournal-contact-page main > article.wp-block-group > :where(.wp-block-post-title, .wp-block-post-content) {
	margin-left: auto;
	margin-right: auto;
	width: var(--coursejournal-contact-width);
}

.coursejournal-contact-page .wp-block-post-title {
	font-family: var(--coursejournal-font-heading);
	font-size: clamp(2.4rem, 5vw, 4.25rem);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.04;
	margin-bottom: 18px;
	max-width: var(--coursejournal-contact-width);
}

/*
 * The post content block is alignfull, so the side gutter has to live on it.
 * It used to come from calc(100vw - 40px) on the width, but 100vw counts the
 * scrollbar, which made the content measure wider than the viewport and pushed
 * the whole page sideways. Padding cannot overflow this way.
 */
.coursejournal-contact-page .wp-block-post-content {
	box-sizing: border-box;
	padding-left: 20px;
	padding-right: 20px;
	max-width: var(--coursejournal-contact-width);
}

.coursejournal-contact-page .wp-block-post-content > * {
	margin-left: 0;
	margin-right: 0;
	max-width: 860px;
}

.coursejournal-contact-page .wp-block-post-content > .coursejournal-contact-hero,
.coursejournal-contact-page .wp-block-post-content > .coursejournal-contact-layout,
.coursejournal-contact-page .wp-block-post-content > .coursejournal-contact-trust {
	max-width: var(--coursejournal-contact-width);
	width: 100%;
}

.coursejournal-contact-page .wp-block-post-content p,
.coursejournal-contact-page .wp-block-post-content li {
	color: var(--coursejournal-contact-muted);
	font-size: 1rem;
	line-height: 1.75;
}

.coursejournal-contact-page .wp-block-post-content h2 {
	font-family: var(--coursejournal-font-heading);
	font-size: clamp(1.55rem, 3vw, 2.25rem);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.14;
	margin-top: 0;
}

.coursejournal-contact-page .wp-block-post-content h3 {
	font-family: var(--coursejournal-font-heading);
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.25;
}

.coursejournal-contact-hero {
	background: linear-gradient(135deg, var(--coursejournal-blue-50) 0%, var(--coursejournal-white) 70%);
	border: 1px solid var(--coursejournal-contact-line);
	border-radius: 8px;
	box-shadow: 0 18px 48px color-mix(in srgb, var(--coursejournal-ink-900) 8%, transparent);
	margin-top: 18px;
	padding: clamp(24px, 4vw, 44px);
}

.coursejournal-contact-hero p:first-child {
	color: var(--coursejournal-contact-blue);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.coursejournal-contact-hero p:nth-child(2) {
	color: var(--coursejournal-contact-ink);
	font-family: var(--coursejournal-font-heading);
	font-size: clamp(1.45rem, 3vw, 2.35rem);
	font-weight: 800;
	line-height: 1.18;
	margin-bottom: 16px;
	max-width: 820px;
}

.coursejournal-contact-hero p:last-child {
	font-size: 1.05rem;
	margin-bottom: 0;
	max-width: 760px;
}

.coursejournal-contact-layout {
	align-items: start;
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
	margin-top: 34px;
}

.coursejournal-contact-form,
.coursejournal-contact-sidebar,
.coursejournal-contact-trust {
	background: var(--coursejournal-white);
	border: 1px solid var(--coursejournal-contact-line);
	border-radius: 8px;
}

.coursejournal-contact-form {
	padding: clamp(22px, 4vw, 34px);
}

.coursejournal-contact-form > *:last-child,
.coursejournal-contact-sidebar > *:last-child,
.coursejournal-contact-trust > *:last-child {
	margin-bottom: 0;
}

.coursejournal-contact-form .fluentform,
.coursejournal-contact-form .frm-fluent-form {
	margin-top: 18px;
}

.coursejournal-contact-form input,
.coursejournal-contact-form textarea,
.coursejournal-contact-form select {
	border-radius: 6px !important;
}

.coursejournal-contact-form button,
.coursejournal-contact-form input[type="submit"] {
	background: var(--coursejournal-contact-green) !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: var(--coursejournal-ink-900) !important;
	font-weight: 900 !important;
	min-height: 44px;
	padding-left: 22px !important;
	padding-right: 22px !important;
}

.coursejournal-contact-sidebar {
	padding: 24px;
}

.coursejournal-contact-sidebar ul {
	display: grid;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.coursejournal-contact-sidebar li {
	background: var(--coursejournal-contact-soft);
	border: 1px solid var(--coursejournal-blue-100);
	border-radius: 8px;
	padding: 14px 16px;
}

.coursejournal-contact-sidebar strong {
	color: var(--coursejournal-contact-ink);
	display: block;
	margin-bottom: 2px;
}

.coursejournal-contact-trust {
	margin-top: 26px;
	padding: clamp(22px, 4vw, 34px);
}

.coursejournal-contact-trust ul {
	display: grid;
	gap: 10px;
	margin-bottom: 0;
	padding-left: 1.2rem;
}

.coursejournal-contact-trust a {
	color: var(--coursejournal-contact-blue);
	font-weight: 800;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

@media (max-width: 860px) {
	.coursejournal-contact-layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.coursejournal-contact-page main {
		--coursejournal-contact-width: 100%;
	}

	.coursejournal-contact-page .wp-block-post-title {
		font-size: clamp(2rem, 11vw, 2.7rem);
	}

	.coursejournal-contact-hero,
	.coursejournal-contact-form,
	.coursejournal-contact-sidebar,
	.coursejournal-contact-trust {
		border-radius: 6px;
	}
}