/* Contact page. Section styles live in blocks/contact-* /style.css. The form card is the contact-form block. */
/* Logo-mark eyebrow + section heading used by the About / Contact sections. */
.fx-ab-eb {
	display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-mono); font-size: 13px; line-height: 1.4;
	letter-spacing: .08em; text-transform: uppercase; color: var(--violet);
}
.fx-ab-eb__mark { flex: none; }
.fx-ab-h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1.02; letter-spacing: -0.03em; color: var(--ink); }

/* Desktop / phone wording swaps (only one is displayed, so assistive tech reads one). */
.fx-vm { display: none; }
@media (max-width: 960px) { .fx-ab-h2 { font-size: 36px; } }
@media (max-width: 600px) {
	.fx-vd, .fx-vd-flex { display: none !important; }
	.fx-vm { display: inline; }
	.fx-ab-eb { font-size: 12px; }
	.fx-ab-h2 { font-size: 32px; line-height: 1.06; }
}

/* Top area: a group holding the Contact intro block and the Contact form block side by side. */
.fx-contact-top {
	position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start;
	padding: 80px max(20px, calc((100% - 1280px) / 2)) 104px;
}
.fx-contact-top::before {
	content: ""; position: absolute; left: -240px; top: -240px; width: 720px; height: 720px; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, rgba(91, 43, 217, .12), transparent 68%); animation: glow 14s ease-in-out infinite;
}
.fx-contact-top > * { position: relative; margin: 0 !important; min-width: 0; }
.fx-contact-top > .wp-block-fourspixel-contact-hero { grid-column: 1 / span 6; }
.fx-contact-top > :not(.wp-block-fourspixel-contact-hero) { grid-column: 8 / span 5; }
@media (min-width: 961px) {
	.fx-contact-top > :not(.wp-block-fourspixel-contact-hero) { position: sticky; top: calc(var(--header-h) + 24px); animation: rise 700ms var(--ease) 270ms both; }
}
@media (max-width: 1100px) {
	.fx-contact-top > .wp-block-fourspixel-contact-hero { grid-column: 1 / span 6; }
	.fx-contact-top > :not(.wp-block-fourspixel-contact-hero) { grid-column: 7 / span 6; }
}
@media (max-width: 960px) {
	.fx-contact-top { grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding-top: 56px; padding-bottom: 72px; }
	.fx-contact-top > * { grid-column: 1 / -1 !important; }
	.fx-contact-top > :not(.wp-block-fourspixel-contact-hero) { max-width: 640px; }
}
@media (max-width: 600px) {
	.fx-contact-top { padding-top: 40px; padding-bottom: 56px; row-gap: 28px; }
}
@media (max-width: 600px) {
	.fx-contact-top > :not(.wp-block-fourspixel-contact-hero):not(.x) { margin-inline: -8px !important; }
}