@font-face {
	font-family: "Anticva-Regular";
	src: url("/fonts/Anticva-Regular.otf");
}

@font-face {
	font-family: "Gosznak";
	src: url("/fonts/Gosznak-Semi Bold.otf");
}

.font14 {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 140%;
}
.font16 {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
}
.font18 {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 140%;
}
.font20 {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 20px;
	line-height: 140%;
}
.font24 {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 24px;
	line-height: 140%;
}
.font32 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 32px;
	line-height: 120%;
}
.font36 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 32px;
	line-height: 120%;
}
.font40 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 120%;
}
.font48 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(32px, 5vw, 48px);
	line-height: 120%;
}

.section-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(28px, 4.2vw, 44px);
	line-height: 118%;
	color: var(--color-ink);
	text-transform: none;
}

.section-kicker {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-brand);
}

.btn,
.white_btn,
.orange_btn,
.tr_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 24px;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 130%;
	cursor: pointer;
	text-align: center;
	border: 1px solid transparent;
	transition:
		background-color var(--duration) var(--ease),
		color var(--duration) var(--ease),
		border-color var(--duration) var(--ease),
		opacity var(--duration) var(--ease);
}

.btn-primary,
.orange_btn {
	background: var(--color-cta);
	color: var(--color-on-cta);
	box-shadow: none;
}

.btn-primary:hover,
.orange_btn:hover {
	background: #314127;
	opacity: 1;
}

.btn-secondary,
.white_btn {
	background: var(--color-surface);
	color: var(--color-ink);
	border-color: var(--color-border);
	box-shadow: none;
}

.btn-secondary:hover,
.white_btn:hover {
	background: #f3eee4;
	opacity: 1;
}

.btn-ghost,
.tr_btn {
	background: rgba(255, 252, 247, 0.16);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.45);
	backdrop-filter: blur(12px);
}

.btn-ghost:hover,
.tr_btn:hover {
	background: rgba(255, 252, 247, 0.28);
	opacity: 1;
}

.btn-light {
	background: var(--color-surface);
	color: var(--color-cta);
}

.btn:focus-visible,
.white_btn:focus-visible,
.orange_btn:focus-visible,
.tr_btn:focus-visible,
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 3px;
}

.medium {
	font-weight: 500;
}

.hidden {
	visibility: visible;
}

.page-wrap {
	width: min(100% - 2 * var(--page-gutter), var(--page-max));
	margin-inline: auto;
}

.reveal {
	animation: reveal-up 0.55s var(--ease) both;
}

@keyframes reveal-up {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		animation: none;
	}

	html {
		scroll-behavior: auto;
	}
}

@media (max-width: 800px) {
	.font48 {
		font-size: 32px;
	}
	.font40 {
		font-size: 28px;
	}
	.font24 {
		font-size: 18px;
	}
	.font32 {
		font-size: 24px;
	}
}