:root {
	--wl-bg: #f7f5f1;
	--wl-surface: #ffffff;
	--wl-text: #181818;
	--wl-text-muted: #686868;
	--wl-border: #e9e7e2;
	--wl-red: #e65353;
	--wl-infrared: #6e1f2a;
	--wl-radius-sm: 8px;
	--wl-radius-md: 16px;
	--wl-radius-lg: 28px;
	--wl-container: 1400px;
	--wl-content: 760px;
	--wl-page-gutter: clamp(20px, 4vw, 64px);
	--wl-section-space: clamp(72px, 9vw, 144px);
	--wl-section-space-compact: clamp(48px, 6vw, 88px);
	--wl-shadow-soft: 0 18px 60px rgb(24 24 24 / 7%);
	--wl-transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

html {
	background: var(--wl-bg);
	color: var(--wl-text);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

body {
	background: var(--wl-bg);
	color: var(--wl-text);
}

::selection {
	background: color-mix(in srgb, var(--wl-red) 24%, transparent);
	color: var(--wl-text);
}

:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

:where(p, li, figcaption, blockquote) {
	text-wrap: pretty;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--wl-transition), text-decoration-color var(--wl-transition);
}

a:hover {
	color: var(--wl-red);
	text-decoration-color: currentColor;
}

:where(
	a,
	button,
	input,
	select,
	textarea,
	[tabindex]:not([tabindex="-1"])
):focus-visible {
	outline: 3px solid var(--wl-red);
	outline-offset: 3px;
}

.wp-element-button,
.wp-block-button__link,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	align-items: center;
	appearance: none;
	background: var(--wl-text);
	border: 1px solid var(--wl-text);
	border-radius: var(--wl-radius-sm);
	color: var(--wl-surface);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 0.5rem;
	justify-content: center;
	letter-spacing: 0.01em;
	line-height: 1.2;
	min-height: 48px;
	padding: 0.875rem 1.5rem;
	text-decoration: none;
	transition: background-color var(--wl-transition), border-color var(--wl-transition), color var(--wl-transition), transform var(--wl-transition);
}

.wp-element-button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: var(--wl-infrared);
	border-color: var(--wl-infrared);
	color: var(--wl-surface);
}

.wp-element-button:active,
.wp-block-button__link:active,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	transform: translateY(1px);
}

.wp-block-button.is-style-outline > .wp-block-button__link,
.wl-button--ghost {
	background: transparent;
	border-color: var(--wl-border);
	color: var(--wl-text);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wl-button--ghost:hover {
	background: var(--wl-surface);
	border-color: var(--wl-text);
	color: var(--wl-text);
}

.wl-button--red {
	background: var(--wl-red);
	border-color: var(--wl-red);
	color: var(--wl-surface);
}

:where(input:not([type="button"], [type="checkbox"], [type="radio"], [type="reset"], [type="submit"]), select, textarea) {
	appearance: none;
	background-color: var(--wl-surface);
	border: 1px solid var(--wl-border);
	border-radius: var(--wl-radius-sm);
	color: var(--wl-text);
	font: inherit;
	line-height: 1.4;
	min-height: 52px;
	padding: 0.875rem 1rem;
	transition: border-color var(--wl-transition), box-shadow var(--wl-transition);
	width: 100%;
}

textarea {
	min-height: 144px;
	resize: vertical;
}

select {
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-repeat: no-repeat;
	background-size: 5px 5px, 5px 5px;
	padding-right: 2.75rem;
}

:where(input, textarea)::placeholder {
	color: color-mix(in srgb, var(--wl-text-muted) 78%, transparent);
}

:where(input, select, textarea):disabled {
	background: color-mix(in srgb, var(--wl-border) 55%, var(--wl-surface));
	cursor: not-allowed;
	opacity: 0.72;
}

:where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--wl-red);
}

label {
	color: var(--wl-text);
	display: inline-block;
	font-size: 0.9375rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

hr,
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--wl-border);
}

.wl-container {
	margin-inline: auto;
	max-width: var(--wl-container);
	padding-inline: var(--wl-page-gutter);
	width: 100%;
}

.wl-content {
	margin-inline: auto;
	max-width: var(--wl-content);
	width: 100%;
}

.wl-section {
	padding-block: var(--wl-section-space);
}

.wl-section--compact {
	padding-block: var(--wl-section-space-compact);
}

.wl-surface {
	background: var(--wl-surface);
}

.wl-card {
	background: var(--wl-surface);
	border: 1px solid var(--wl-border);
	border-radius: var(--wl-radius-md);
	padding: clamp(24px, 3vw, 48px);
}

.wl-card--interactive {
	transition: border-color var(--wl-transition), box-shadow var(--wl-transition), transform var(--wl-transition);
}

.wl-card--interactive:hover {
	border-color: color-mix(in srgb, var(--wl-text) 20%, var(--wl-border));
	box-shadow: var(--wl-shadow-soft);
	transform: translateY(-2px);
}

.has-lead-font-size,
.wl-lead {
	color: var(--wl-text-muted);
	letter-spacing: -0.02em;
	line-height: 1.5;
}

.wl-eyebrow {
	color: var(--wl-red);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

@media (max-width: 782px) {
	:root {
		--wl-page-gutter: 20px;
		--wl-section-space: clamp(56px, 16vw, 88px);
		--wl-section-space-compact: clamp(40px, 12vw, 64px);
	}

	.wp-element-button,
	.wp-block-button__link,
	button,
	input[type="button"],
	input[type="reset"],
	input[type="submit"] {
		min-height: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}