/**
 * Contact-page and reusable Tally-form patterns.
 *
 * The page shares the site's 12-column editorial grid. Campaign surfaces can
 * provide --huugo-form-accent, --huugo-form-accent-soft and
 * --huugo-form-ink without changing the pattern markup.
 */

body.huugo-has-contact-page main.huugo-page-shell {
	margin-block: 0 !important;
	padding-block: 0 !important;
}

body.huugo-has-contact-page .huugo-entry-header,
body.huugo-has-contact-page main.huugo-page-shell > .wp-block-post-featured-image {
	display: none !important;
}



.huugo-contact-surface,
.huugo-tally-section {
	container-type: inline-size;
	--contact-paper: var(--wp--preset--color--paper, #fff);
	--contact-ink: var(--huugo-form-ink, var(--wp--preset--color--ink, #191918));
	--contact-accent: var(
		--huugo-form-accent,
		var(--wp--preset--color--mint, #b4e7de)
	);
	--contact-accent-soft: var(
		--huugo-form-accent-soft,
		var(--wp--preset--color--mist, #eaf7f4)
	);
	--contact-muted: color-mix(in srgb, var(--contact-ink) 64%, transparent);
	--contact-line: var(
		--huugo-border-color,
		color-mix(in srgb, var(--contact-ink) 18%, transparent)
	);
	--contact-wide: var(--huugo-wide, var(--wp--style--global--wide-size, 86rem));
	--contact-content: var(
		--huugo-content,
		var(--wp--style--global--content-size, 46rem)
	);
	--contact-gutter: var(
		--huugo-gutter,
		var(--wp--custom--layout--gutter, clamp(1rem, 3vw, 2.5rem))
	);
	--contact-columns: var(--huugo-grid-columns, repeat(12, minmax(0, 1fr)));
	--contact-gap: var(--huugo-grid-gap, clamp(1rem, 2vw, 2rem));
	--contact-space: var(--huugo-section-space, clamp(6.5rem, 11vw, 11rem));
	--contact-editorial: var(
		--wp--preset--font-family--editorial,
		"Cormorant Garamond",
		Georgia,
		serif
	);
	--contact-display: var(
		--wp--preset--font-family--display,
		"Unbounded",
		Arial,
		sans-serif
	);
	--contact-body: var(
		--wp--preset--font-family--body,
		-apple-system,
		BlinkMacSystemFont,
		"Helvetica Neue",
		Arial,
		sans-serif
	);
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
	background: var(--contact-paper);
	color: var(--contact-ink);
	font-family: var(--contact-body);
}

.huugo-contact-page.alignfull {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
}

.huugo-contact-fragment.alignfull,
.huugo-tally-section.alignfull {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
}

.huugo-contact-surface *,
.huugo-contact-surface *::before,
.huugo-contact-surface *::after,
.huugo-tally-section *,
.huugo-tally-section *::before,
.huugo-tally-section *::after {
	box-sizing: border-box;
}

.huugo-contact-surface :where(h1, h2, h3, p, figure),
.huugo-tally-section :where(h1, h2, h3, p, figure) {
	margin-block-start: 0;
}

.huugo-contact-kicker,
.huugo-contact-index,
.huugo-contact-method__label,
.huugo-contact-method__actions,
.huugo-contact-aside__label {
	font-family: var(--contact-display);
	font-size: clamp(.62rem, .58rem + .14vw, .72rem);
	font-weight: 600;
	letter-spacing: .105em;
	line-height: 1.45;
	text-transform: uppercase;
}

.huugo-contact-kicker {
	margin-block-end: 1rem;
}

.huugo-contact-index {
	font-variant-numeric: tabular-nums;
	opacity: .52;
}

/* Hero ------------------------------------------------------------------- */

.huugo-contact-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	width: min(
		calc(100% - var(--contact-gutter) - var(--contact-gutter)),
		var(--contact-wide)
	);
	max-width: var(--contact-wide);
	min-height: min(44rem, calc(100svh - var(--huugo-header-height, 5.5rem)));
	margin: 0 auto !important;
	padding-block: clamp(5rem, 9vw, 9rem) clamp(4.5rem, 8vw, 7.5rem);
	grid-template-columns: var(--contact-columns);
	column-gap: var(--contact-gap);
	row-gap: clamp(2.5rem, 5vw, 5rem);
	align-items: end;
}

.huugo-contact-hero::before {
	position: absolute;
	z-index: -2;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100cqw;
	border-block-end: 1px solid var(--contact-line);
	background:
		radial-gradient(
			circle at 82% 32%,
			color-mix(in srgb, var(--contact-accent) 60%, transparent) 0,
			color-mix(in srgb, var(--contact-accent) 22%, transparent) 20%,
			transparent 49%
		),
		linear-gradient(
			110deg,
			color-mix(in srgb, var(--contact-accent) 18%, transparent),
			transparent 45%
		),
		var(--contact-paper);
	content: "";
	transform: translateX(-50%);
}

.huugo-contact-hero > *,
.huugo-contact-details > *,
.huugo-tally-section__inner > *,
.huugo-contact-method > * {
	min-width: 0;
}

.huugo-contact-hero__copy {
	grid-column: 1 / 9;
	grid-row: 1;
}

.huugo-contact-hero__title {
	max-width: 8.5ch;
	margin-block-end: clamp(1.75rem, 3vw, 2.75rem);
	font-family: var(--contact-editorial);
	font-size: clamp(5rem, 10.2vw, 10rem);
	font-weight: 500;
	letter-spacing: -.06em;
	line-height: .78;
	text-wrap: balance;
}

.huugo-contact-page--en .huugo-contact-hero__title,
.huugo-contact-page--sv .huugo-contact-hero__title,
.huugo-contact-page--fr .huugo-contact-hero__title {
	font-size: clamp(4.6rem, 9vw, 9rem);
}

.huugo-contact-hero__lead {
	max-width: 33rem;
	margin-block-end: 0;
	font-family: var(--contact-editorial);
	font-size: clamp(1.55rem, 2.4vw, 2.5rem);
	font-weight: 450;
	line-height: 1.12;
	text-wrap: pretty;
}

.huugo-contact-aside {
	grid-column: 10 / -1;
	grid-row: 1;
	align-self: end;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--contact-line);
}

.huugo-contact-aside__label {
	margin-block-end: .8rem;
	opacity: .62;
}

.huugo-contact-aside p:last-child {
	margin-block-end: 0;
	color: var(--contact-muted);
	font-size: clamp(.92rem, 1vw, 1.02rem);
	line-height: 1.58;
	text-wrap: pretty;
}

/* Contact methods -------------------------------------------------------- */

.huugo-contact-details {
	display: grid;
	width: min(
		calc(100% - var(--contact-gutter) - var(--contact-gutter)),
		var(--contact-wide)
	);
	max-width: var(--contact-wide);
	margin: 0 auto !important;
	padding-block: var(--contact-space);
	grid-template-columns: var(--contact-columns);
	column-gap: var(--contact-gap);
}

.huugo-contact-details__intro {
	grid-column: 1 / 5;
	align-self: start;
}

.huugo-contact-details__intro h2,
.huugo-tally-section__intro h2 {
	max-width: 8.5ch;
	margin-block-end: 1.25rem;
	font-family: var(--contact-editorial);
	font-size: clamp(3.1rem, 5.5vw, 6rem);
	font-weight: 500;
	letter-spacing: -.045em;
	line-height: .88;
	text-wrap: balance;
}

.huugo-contact-details__intro > p:last-child,
.huugo-tally-section__intro > p:last-child {
	max-width: 27rem;
	margin-block-end: 0;
	color: var(--contact-muted);
	font-size: clamp(.96rem, 1.1vw, 1.08rem);
	line-height: 1.62;
	text-wrap: pretty;
}

.huugo-contact-methods {
	grid-column: 6 / -1;
}

.huugo-contact-method {
	display: grid;
	padding-block: clamp(1.7rem, 3vw, 2.8rem);
	border-block-start: 1px solid var(--contact-line);
	grid-template-columns: minmax(2rem, .55fr) minmax(0, 4fr) minmax(8rem, 1.35fr);
	column-gap: var(--contact-gap);
	align-items: start;
}

.huugo-contact-method:last-child {
	border-block-end: 1px solid var(--contact-line);
}

.huugo-contact-method__index {
	margin-block-end: 0;
}

.huugo-contact-method__content {
	margin: 0;
}

.huugo-contact-method__label {
	margin-block-end: .65rem;
	opacity: .58;
}

.huugo-contact-method__primary {
	margin-block-end: 0;
	font-family: var(--contact-editorial);
	font-size: clamp(1.8rem, 3vw, 3rem);
	font-weight: 500;
	letter-spacing: -.025em;
	line-height: 1;
	overflow-wrap: anywhere;
}

.huugo-contact-method__primary a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentColor 34%, transparent);
	text-decoration-thickness: .045em;
	text-underline-offset: .12em;
	transition: text-decoration-color 180ms ease;
}

.huugo-contact-method__primary a:hover,
.huugo-contact-method__primary a:focus-visible {
	text-decoration-color: currentColor;
}

.huugo-contact-method__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin-block: .15rem 0;
	gap: .55rem 1rem;
	text-align: right;
}

.huugo-contact-method__actions a {
	color: inherit;
	text-decoration: none;
}

.huugo-contact-method__actions a::after {
	display: block;
	width: 100%;
	height: 1px;
	margin-block-start: .18rem;
	background: currentColor;
	content: "";
	transform: scaleX(.35);
	transform-origin: right;
	transition: transform 280ms cubic-bezier(.22, 1, .36, 1);
}

.huugo-contact-method__actions a:hover::after,
.huugo-contact-method__actions a:focus-visible::after {
	transform: scaleX(1);
}

/* Tally form section ----------------------------------------------------- */

.huugo-tally-section {
	position: relative;
	isolation: isolate;
	border-block: 1px solid var(--contact-line);
	background: var(--contact-accent-soft);
}

.huugo-tally-section--campaign {
	--contact-accent: var(
		--huugo-campaign-accent,
		var(--huugo-form-accent, var(--wp--preset--color--mint, #b4e7de))
	);
	--contact-accent-soft: var(
		--huugo-campaign-accent-soft,
		var(--huugo-form-accent-soft, var(--wp--preset--color--mist, #eaf7f4))
	);
}

.huugo-tally-section::before {
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	width: min(44vw, 42rem);
	height: min(44vw, 42rem);
	background: radial-gradient(
		circle at 100% 0,
		color-mix(in srgb, var(--contact-accent) 74%, transparent),
		transparent 67%
	);
	content: "";
	pointer-events: none;
}

.huugo-tally-section__inner {
	display: grid;
	width: min(
		calc(100% - var(--contact-gutter) - var(--contact-gutter)),
		var(--contact-wide)
	);
	max-width: var(--contact-wide);
	margin: 0 auto !important;
	padding-block: var(--contact-space);
	grid-template-columns: var(--contact-columns);
	column-gap: var(--contact-gap);
}

.huugo-tally-section__intro {
	grid-column: 1 / 5;
	align-self: start;
}

.huugo-tally-section__form {
	grid-column: 6 / -1;
}

.huugo-tally-embed {
	position: relative;
	min-height: 22rem;
	padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
	border-block-start: 1px solid var(--contact-line);
}

.huugo-tally-embed iframe {
	display: block;
	width: 100%;
	min-height: 34rem;
	border: 0;
	background: transparent;
}

.huugo-tally-embed iframe[data-tally-src*="REPLACE_WITH_FORM_ID"] {
	display: none;
}

.huugo-tally-config-note {
	display: none;
	max-width: 38rem;
	margin: 0;
	padding: 1.25rem;
	border: 1px dashed color-mix(in srgb, var(--contact-ink) 38%, transparent);
	background: color-mix(in srgb, var(--contact-paper) 66%, transparent);
	color: var(--contact-muted);
	font-size: .95rem;
	line-height: 1.55;
}

.huugo-tally-embed
iframe[data-tally-src*="REPLACE_WITH_FORM_ID"]
+ .huugo-tally-config-note {
	display: block;
}

.huugo-tally-privacy {
	max-width: 42rem;
	margin-block: 1.2rem 0;
	color: var(--contact-muted);
	font-size: .82rem;
	line-height: 1.55;
}

.huugo-tally-privacy a {
	color: inherit;
}

/* Calm, progressive entrance motion ------------------------------------- */

@supports (animation-timeline: view()) {
	.huugo-contact-reveal {
		animation: huugo-contact-enter 1ms both;
		animation-range: entry 8% cover 26%;
		animation-timeline: view();
	}

	@keyframes huugo-contact-enter {
		from {
			opacity: .68;
			filter: blur(.1rem);
			transform: translateY(.75rem);
		}
		to {
			opacity: 1;
			filter: none;
			transform: none;
		}
	}
}

/* Responsive layout ------------------------------------------------------ */

@media (max-width: 899px) {
	.huugo-contact-hero {
		min-height: 0;
		padding-block-start: clamp(4rem, 10vw, 6rem);
	}

	.huugo-contact-hero__copy {
		grid-column: 1 / 9;
	}

	.huugo-contact-aside {
		grid-column: 9 / -1;
	}

	.huugo-contact-details__intro,
	.huugo-tally-section__intro {
		grid-column: 1 / 5;
	}

	.huugo-contact-methods,
	.huugo-tally-section__form {
		grid-column: 5 / -1;
	}

	.huugo-contact-method {
		grid-template-columns: 2rem minmax(0, 1fr);
		row-gap: 1.2rem;
	}

	.huugo-contact-method__actions {
		grid-column: 2;
		justify-content: flex-start;
		text-align: left;
	}

	.huugo-contact-method__actions a::after {
		transform-origin: left;
	}
}

@media (max-width: 699px) {
	.huugo-contact-hero,
	.huugo-contact-details,
	.huugo-tally-section__inner {
		grid-template-columns: 1fr;
		column-gap: 0;
	}

	.huugo-contact-hero {
		padding-block: 4.5rem 4rem;
	}

	.huugo-contact-hero__copy,
	.huugo-contact-aside,
	.huugo-contact-details__intro,
	.huugo-contact-methods,
	.huugo-tally-section__intro,
	.huugo-tally-section__form {
		grid-column: 1;
	}

	.huugo-contact-hero__copy,
	.huugo-contact-aside {
		grid-row: auto;
	}

	.huugo-contact-aside {
		max-width: 28rem;
	}

	.huugo-contact-hero__title,
	.huugo-contact-page--en .huugo-contact-hero__title,
	.huugo-contact-page--sv .huugo-contact-hero__title,
	.huugo-contact-page--fr .huugo-contact-hero__title {
		font-size: clamp(4.2rem, 20vw, 7rem);
	}

	.huugo-contact-details,
	.huugo-tally-section__inner {
		padding-block: clamp(5rem, 18vw, 7rem);
		row-gap: 3.25rem;
	}

	.huugo-contact-details__intro h2,
	.huugo-tally-section__intro h2 {
		font-size: clamp(3.25rem, 15vw, 5rem);
	}

	.huugo-contact-method {
		grid-template-columns: 1.6rem minmax(0, 1fr);
		column-gap: .9rem;
	}

	.huugo-contact-method__primary {
		font-size: clamp(1.65rem, 8vw, 2.35rem);
	}

	.huugo-tally-section::before {
		width: 80vw;
		height: 80vw;
	}
}

/* Editor parity ---------------------------------------------------------- */

.editor-styles-wrapper .huugo-contact-fragment.alignfull,
.editor-styles-wrapper .huugo-tally-section.alignfull {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
}

.editor-styles-wrapper .huugo-contact-page {
	container-type: inline-size;
}

.editor-styles-wrapper .huugo-contact-reveal {
	animation: none;
	opacity: 1;
	filter: none;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.huugo-contact-surface *,
	.huugo-contact-surface *::before,
	.huugo-contact-surface *::after,
	.huugo-tally-section *,
	.huugo-tally-section *::before,
	.huugo-tally-section *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}

	.huugo-contact-reveal {
		opacity: 1;
		filter: none;
		transform: none;
	}
}

/* Group's editor wrappers must span the grid, then pass its tracks through.
 * Subgrid preserves the public rules at 899px/699px without a second set of
 * column placements. Direct-child Group markup continues to use public CSS.
 */
.editor-styles-wrapper :is(.huugo-contact-hero, .huugo-contact-details,
.huugo-tally-section__inner, .huugo-contact-method) > .block-editor-inner-blocks,
.editor-styles-wrapper :is(.huugo-contact-hero, .huugo-contact-details,
.huugo-tally-section__inner, .huugo-contact-method) > .block-editor-inner-blocks
> .block-editor-block-list__layout {
	min-width: 0;
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;
	row-gap: inherit;
	align-items: inherit;
	align-self: stretch;
}
.editor-styles-wrapper :is(.huugo-contact-hero, .huugo-contact-details,
.huugo-tally-section__inner, .huugo-contact-method) > .wp-block,
.editor-styles-wrapper :is(.huugo-contact-hero, .huugo-contact-details,
.huugo-tally-section__inner, .huugo-contact-method) > .block-editor-inner-blocks
> .block-editor-block-list__layout > .wp-block {
	min-width: 0;
	max-width: none;
	margin-inline: 0;
	margin-block: 0;
}
.editor-styles-wrapper :is(.huugo-contact-hero, .huugo-contact-details,
.huugo-tally-section__inner, .huugo-contact-method) > .block-editor-inner-blocks
> .block-editor-block-list__layout > .block-list-appender {
	grid-column: 1 / -1;
}
@media (max-width: 699px) {
	.editor-styles-wrapper .huugo-contact-hero > .huugo-contact-aside,
	.editor-styles-wrapper .huugo-contact-hero > .block-editor-inner-blocks
	> .block-editor-block-list__layout > .huugo-contact-aside {
		max-width: 28rem;
	}
}