/* Scoped exceptions for WordPress/HubSpot selectors and their inline styles. */
/* stylelint-disable no-descending-specificity, selector-class-pattern, declaration-no-important */

@font-face {
	font-family: "Geist Mono";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url( "../fonts/geist-mono-latin-normal.woff2" ) format( "woff2" );
}

body.wotf-landing-page {
	background: #111110;
	overflow-x: clip;
}

.wotf-landing-page .wp-site-blocks {
	padding: 0;
}

.wotf-landing-page .wp-site-blocks > * {
	margin-block: 0;
}

.wotf-landing {
	--sans: "Hanken Grotesk", system-ui, sans-serif;
	--mono: "Geist Mono", ui-monospace, monospace;
	--gut: 64px;
	--bg: #111110;
	--surface: #172036;
	--ink: #ece9e1;
	--muted: #a3b0cc;
	--line: #26304a;
	--line-2: #35416a;
	--accent: #6fa0ea;
	--agent: #b49bf5;
	--err: #ff7a73;
	background: var( --bg );
	-webkit-font-smoothing: antialiased;
}

.wotf-landing main {
	color-scheme: dark;
	font: 400 1.125rem/1.5 var( --sans );
	color: var( --ink );
}

.wotf-landing *,
.wotf-landing *::before,
.wotf-landing *::after {
	box-sizing: border-box;
}

.wotf-landing .wp-block-post-content,
.wotf-landing .wp-block-post-content > *,
.wotf-landing main .wp-block-group {
	max-width: none;
}

.wotf-landing .wp-block-post-content > *,
.wotf-landing main .wp-block-group > * {
	margin-block: 0;
}

.wotf-landing main h1,
.wotf-landing main h2,
.wotf-landing main h3,
.wotf-landing main p,
.wotf-landing main ul {
	margin: 0;
}

.wotf-landing main ul {
	padding: 0;
	list-style: none;
}

.wotf-landing main a {
	color: inherit;
	text-underline-offset: 4px;
}

.wotf-landing main a:hover {
	color: var( --accent );
}

.wotf-landing main :focus-visible {
	outline: 2px solid var( --accent );
	outline-offset: 5px;
}

.wotf-landing main ::selection {
	background: var( --accent );
	color: var( --bg );
}

.wotf-landing .sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* Reuse the saved header, navigation and menu panels; restyle only its top bar. */
.wotf-landing .wotf-header {
	color: var( --ink );
}

.wotf-landing .wotf-header > .nav-desktop,
.wotf-landing .wotf-header > .nav-mobile {
	background: var( --bg );
	color: var( --ink );
}

.wotf-landing .wotf-header > .nav-desktop > .wp-block-group > .wp-block-navigation,
.wotf-landing .wotf-header > .nav-mobile > .wp-block-group > .wp-block-navigation {
	color: var( --ink ) !important;
}

.wotf-landing .wotf-header .nav-mobile .wp-block-navigation-submenu {
	color: inherit;
}

.wotf-landing .wotf-header .wp-block-hm-mega-menu__menu-container {
	color: var( --wp--preset--color--main, #131313 );
}

.wotf-landing .wotf-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var( --bg ) !important;
	color: var( --ink ) !important;
}

.wotf-landing .hero {
	position: relative;
	height: auto;
	min-height: clamp( 660px, 57.2vw, 823px );
	padding-top: calc( clamp( 660px, 57.2vw, 823px ) * 0.52 );
	padding-bottom: 80px;
	touch-action: pan-y;
	overflow: hidden;
}

.wotf-landing .hero > canvas,
.wotf-landing .close > canvas,
.wotf-landing .tag canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Extend the desktop ground into the surrounding space without moving content. */
@media ( min-width: 901px ) {
	.wotf-landing .hero {
		overflow: visible;
	}

	.wotf-landing .hero > canvas {
		top: -80px;

		/* 80px above, plus the next section’s 44px top padding below. */
		height: calc( 100% + 124px );
	}
}

.wotf-landing .hero .copy {
	position: relative;
	left: var( --gut );
	bottom: auto;
	width: min( 520px, 42% );
}

.wotf-landing .lead {
	font: 400 1.312rem/1.45 var( --sans );
	letter-spacing: -0.01em;
	max-width: 40ch;
}

.wotf-landing .hero .copy .lead {
	margin-bottom: 22px;
}

.wotf-landing .lead b {
	font-weight: 500;
	color: #fff;
	background: #1f63c8;
	padding: 1px 7px 2px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.wotf-landing .wotf-title {
	position: absolute;
	top: 70px;
	left: var( --gut );
	font: 600 clamp( 2.75rem, 7vw, 6rem )/0.95 var( --mono );
	letter-spacing: -0.035em;
	max-width: 10ch;
}

.wotf-landing .has-artwork .wotf-title {
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
}

.wotf-landing .tag {
	position: absolute;
	left: calc( var( --gut ) - 28px );
	top: calc( clamp( 660px, 57.2vw, 823px ) * 0.395 );
	width: min( 860px, 64vw );
}

.wotf-landing .tag .line {
	position: relative;
	display: block;
	padding: 22px 28px;
	font: 500 clamp( 1.125rem, 1.8vw, 1.625rem )/1.25 var( --mono );
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
}

.wotf-landing .tag .pr,
.wotf-landing .tag .tx b {
	color: var( --accent );
}

.wotf-landing .tag .cur {
	animation: wotf-blink 1100ms steps( 1 ) infinite;
}

@keyframes wotf-blink {
	50% {
		opacity: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wotf-landing .tag .cur {
		animation: none;
	}
}

.wotf-landing .band {
	padding: 44px var( --gut ) 0;
}

.wotf-landing .head {
	margin-bottom: 28px;
}

.wotf-landing .kinds,
.wotf-landing .grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 880px;
	list-style: none;
}

.wotf-landing .card {
	--ink: #131313;
	--muted: #1b2b4c;
	--accent: #1f63c8;
	display: flex;
	align-items: stretch;
	text-decoration: none;
	background: #f4f2ec;
	color: var( --ink );
}

.wotf-landing .plate {
	position: relative;
	flex: none;
	width: 240px;
	height: 135px;
	overflow: hidden;
	background: var( --surface );
}

.wotf-landing .plate img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale( 1.12 );
}

.wotf-landing .card .body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: 16px 22px 18px;
}

.wotf-landing .card h3 {
	font: 400 1.25rem/1.25 var( --sans );
	letter-spacing: -0.015em;
}

.wotf-landing .card.kind h3 {
	font-size: 1.375rem;
}

.wotf-landing .card .dek {
	font: 400 0.938rem/1.5 var( --sans );
	color: var( --muted );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wotf-landing .card .meta {
	font: 400 0.75rem/1.4 var( --mono );
	color: var( --accent );
}

.wotf-landing .wotf-archive {
	margin-top: 20px;
	max-width: 880px;
}

.wotf-landing .wotf-archive summary {
	width: fit-content;
	cursor: pointer;
	font: 500 0.875rem/1.4 var( --mono );
	color: var( --accent );
	padding: 10px 0;
}

.wotf-landing .wotf-archive[open] summary {
	margin-bottom: 16px;
}

.wotf-landing .wotf-pagination {
	display: flex;
	gap: 20px;
	padding-block: 20px;
}

.wotf-landing .close {
	position: relative;
	margin-top: 40px;
	padding: 94px var( --gut ) 140px;
	overflow: hidden;
}

.wotf-landing .close-in {
	position: relative;
}

.wotf-landing .tag.cta {
	position: relative;
	left: auto;
	top: auto;
	margin-left: -28px;
	width: fit-content;
	max-width: calc( 100% + 28px );
}

.wotf-landing .tag.cta .line {
	padding-right: 96px;
	font-size: clamp( 1.375rem, 2.4vw, 2.125rem );
	white-space: normal;
}

.wotf-landing .again {
	padding-top: 28px;
}

.wotf-landing .faq {
	padding-top: 8px;
}

.wotf-landing .faq .wotf-faq-item {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 24px;
	padding: 18px 0;
	max-width: 880px;
	border-bottom: 1px solid var( --line );
}

.wotf-landing .faq .wotf-faq-item h3 {
	font: 500 1.062rem/1.55 var( --sans );
}

.wotf-landing .faq .wotf-faq-item p {
	font: 400 1.062rem/1.55 var( --sans );
	color: var( --muted );
}

/* The shared mega-menu toggle supplies its own black foreground. */
.wotf-landing .wotf-header .wp-block-navigation,
.wotf-landing .wotf-header .wp-block-hm-mega-menu__toggle {
	color: var( --ink ) !important;
}

/* Use the hosted HubSpot renderer and keep its labels, consent and errors. */
.wotf-landing main .wp-block-hubspot-form {
	max-width: 520px;
}

.wotf-landing main .hs-form-html .hs-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.wotf-landing main .hs-form-html .hs-form fieldset {
	display: contents;
}

.wotf-landing main .hs-form-html .hs-form .hs-form-field {
	padding: 8px;
	background: var( --surface );
	border-bottom: 1px solid var( --line-2 );
	min-width: 0;
	margin: 0;
	width: auto !important;
}

.wotf-landing main .hs-form-html .hs-form label {
	font: 400 0.75rem/1.5 var( --mono );
	color: var( --muted );
}

.wotf-landing main .hs-form-html .hs-form input:not([type="submit"]):not([type="checkbox"]) {
	width: 100%;
	max-width: none;
	background: transparent;
	color: var( --ink );
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 10px 0;
	font: 400 0.969rem/1.5 var( --mono ) !important;
	caret-color: var( --accent );
}

.wotf-landing main .hs-form-html .hs-form .hs_email,
.wotf-landing main .hs-form-html .hs-form .legal-consent-container,
.wotf-landing main .hs-form-html .hs-form .hs-richtext,
.wotf-landing main .hs-form-html .hs-form .hs_submit,
.wotf-landing main .hs-form-html .hs-form .hs_error_rollup {
	grid-column: 1 / -1;
}

.wotf-landing main .hs-form-html .hs-form .hs_submit {
	margin-top: 12px;
}

.wotf-landing main .hs-form-html .hs-form .hs-button {
	padding: 16px 20px;
	background: var( --accent );
	color: var( --bg );
	border: 0;
	border-radius: 0;
	font: 500 0.875rem/1.4 var( --mono );
	cursor: pointer;
}

.wotf-landing main .hs-form-html .hs-form .hs-button:hover {
	background: #8db6f2;
}

.wotf-landing main .hs-form-html .hs-error-msgs,
.wotf-landing main .hs-form-html .hs-error-msgs label {
	color: var( --err );
	font-size: 0.875rem;
}

.wotf-landing main .hs-form-html .hs-error-msgs {
	margin-top: 8px;
	line-height: 1.5;
}

.wotf-landing main .hs-form-html .hs-form input.error {
	box-shadow: 0 1px 0 var( --err );
}

.wotf-landing main .hs-form-html .hs-button:disabled {
	opacity: 0.65;
	cursor: wait;
}

.wotf-landing .wotf-form-confirmation {
	padding: 20px 24px;
	background: var( --surface );
	font: 400 0.938rem/1.6 var( --mono );
	color: var( --ink );
}

.wotf-landing .wotf-form-confirmation .wotf-confirmation-title {
	font-size: 1.125rem;
	color: var( --accent );
	margin-bottom: 8px;
}

.wotf-landing .privacy {
	margin-top: 12px;
	max-width: 520px;
	font: 400 0.812rem/1.5 var( --mono );
	color: var( --muted );
}

/* Keep consent controls; suppress competing promotional overlays on this template. */
.wotf-landing-page #hs-web-interactives-top-anchor,
.wotf-landing-page #hubspot-messages-iframe-container {
	display: none !important;
}

@media ( max-width: 900px ) {
	.wotf-landing {
		--gut: 20px;
	}

	.wotf-landing .hero {
		height: auto;
		min-height: 0;
		padding: 200px var( --gut ) 44px;
		display: flex;
		flex-direction: column;
	}

	.wotf-landing .wotf-title {
		top: 28px;
		font-size: 2.75rem;
	}

	.wotf-landing .hero .tag {
		order: 1;
	}

	.wotf-landing .hero .copy {
		order: 2;
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		width: auto;
		margin-top: 24px;
	}

	.wotf-landing .tag {
		position: relative;
		left: -12px;
		top: auto;
		width: calc( 100% + 24px );
	}

	.wotf-landing .tag .line {
		font-size: 0.938rem;
		padding: 15px 12px;
	}

	.wotf-landing .lead {
		font-size: 1.125rem;
		max-width: none;
	}

	.wotf-landing .tag.cta {
		width: calc( 100% + 24px );
		margin-left: -12px;
	}

	.wotf-landing .tag.cta .line {
		font-size: 1.125rem;
		white-space: normal;
		padding-left: 40px;
		text-indent: -28px;
	}

	.wotf-landing .close {
		margin-top: 24px;
		padding: 72px var( --gut ) 64px;
	}

	.wotf-landing .faq .wotf-faq-item {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

@media ( max-width: 560px ) {
	.wotf-landing .plate {
		width: 112px;
		height: 112px;
	}

	.wotf-landing .card .body {
		padding: 12px 14px 14px;
		gap: 6px;
	}

	.wotf-landing .card .dek {
		display: none;
	}

	.wotf-landing .card h3,
	.wotf-landing .card.kind h3 {
		font-size: 1.062rem;
	}
}

/* Keep longer console lines readable at phone widths without moving the form. */
@media ( max-width: 900px ) {
	.wotf-landing .hero .tag .line {
		white-space: normal;
		min-height: 65px;
		font-size: 0.875rem;
	}
}