:root {
	--color-surface-page: #ffffff;
	--color-surface-section: #ffffff;
	--color-surface-card: #ffffff;
	--color-surface-subtle: #f5f7fa;
	--color-border: #e6eaf0;
	--color-border-light: #ebeff3;
	--color-text-strong: #1a1b20;
	--color-text-body: #4a4a4a;
	--color-text-muted: #6b7280;
	--color-text-faint: #8d9299;
	--shadow-card: none;
	--shadow-card-hover: none;
	--text-hero: clamp(2.1rem, 6.4vw, 3.85rem);
	--text-section: clamp(1.7rem, 2.6vw, 2.35rem);
	--header-offset: 6.4rem;
}

@media (min-width: 640px) {
	:root {
		--header-offset: 7.85rem;
	}
}

@media (min-width: 1024px) {
	:root {
		--header-offset: 8.1rem;
	}
}

@media (min-width: 1280px) {
	:root {
		--header-offset: 9.1rem;
	}
}

body,
body.bg-white {
	background-color: var(--color-surface-page);
}

#content {
	background-color: var(--color-surface-page);
}

.knr-header {
	background: var(--color-surface-page) !important;
	box-shadow: none !important;
	border-bottom: none;
}

.knr-header__bar {
	display: none;
}

.brand-logo-image--header {
	height: 4.75rem !important;
}

@media (min-width: 640px) {
	.brand-logo-image--header {
		height: 6rem !important;
	}
}

@media (min-width: 1024px) {
	.brand-logo-image--header {
		height: 6.25rem !important;
	}
}

@media (min-width: 1280px) {
	.brand-logo-image--header {
		height: 7.25rem !important;
	}
}

.knr-primary-nav .knr-menu a {
	font-weight: 500;
	letter-spacing: 0.08em;
	color: #2a2622;
}

.section-eyebrow {
	letter-spacing: 0.18em;
	font-weight: 600;
	font-size: 0.68rem;
}

.section-title {
	font-weight: 650;
	letter-spacing: -0.028em;
	line-height: 1.12;
}

.card {
	border-radius: 2px;
	border-color: var(--color-border);
	background: var(--color-surface-card);
	box-shadow: none;
}

.card-interactive:hover {
	transform: none;
	box-shadow: 0 2px 4px rgba(26, 27, 32, 0.05), 0 14px 32px rgba(26, 27, 32, 0.07);
	border-color: rgba(136, 32, 24, 0.35);
}

.card-interactive.group:hover .card-icon {
	transform: none;
}

.btn-primary,
.btn-outline,
.btn-ghost,
.knr-cf7 .wpcf7-submit {
	border-radius: 2px;
	box-shadow: none;
}

.btn-primary:hover,
.btn-outline:hover,
.knr-cf7 .wpcf7-submit:hover {
	transform: none;
	box-shadow: none;
}

.btn-outline {
	border-width: 1px;
	background: transparent;
}

.knr-hero-title {
	font-weight: 650;
	letter-spacing: -0.032em;
	line-height: 1.05;
}

.knr-hero-lead {
	max-width: 28rem;
	margin-top: 1.35rem;
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--color-text-muted);
}

.knr-hero-note {
	margin-top: 0.75rem;
}

@media (min-width: 768px) {
	.knr-hero-lead {
		font-size: 1.15rem;
	}
}

.knr-hero-actions {
	margin-top: 2rem;
	gap: 0.75rem;
}

.knr-hero-actions .btn-primary,
.knr-hero-actions .btn-outline {
	padding: 0.8rem 1.35rem;
	font-size: 0.92rem;
}

#hero,
#services {
	background: var(--color-surface-page);
}

.knr-service-num {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--color-text-faint);
}

.knr-service-icon {
	display: inline-flex;
	padding: 0;
	background: transparent;
	color: var(--color-brand);
}

.card-interactive.group:hover .knr-service-icon {
	background: transparent;
	color: var(--color-brand);
}

.knr-service-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 1.5rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-brand);
}

.knr-cta {
	background: #1c1412;
	padding: 5rem 0;
}

.knr-cta__inner {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

@media (min-width: 1024px) {
	.knr-cta__inner {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 4rem;
	}
}

.knr-cta .section-eyebrow {
	color: #c45c4c;
}

.knr-cta h2 {
	margin-top: 0.6rem;
	max-width: 22ch;
	color: #faf6f1;
	font-size: clamp(1.7rem, 2.4vw, 2.35rem);
	font-weight: 650;
	letter-spacing: -0.028em;
	line-height: 1.12;
}

.knr-cta p {
	margin-top: 0.85rem;
	max-width: 36rem;
	color: rgba(250, 246, 241, 0.62);
	font-size: 1.05rem;
	line-height: 1.55;
}

.knr-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	flex-shrink: 0;
}

.knr-cta .btn-outline {
	border-color: rgba(250, 246, 241, 0.28);
	color: #faf6f1;
}

.knr-cta .btn-outline:hover {
	border-color: #faf6f1;
	background: transparent;
}

.knr-footer {
	background: var(--color-surface-page);
	border-top-color: var(--color-border);
}

.knr-footer__bar {
	display: none;
}

.brand-logo-image--footer {
	height: 5rem !important;
}

@media (min-width: 640px) {
	.brand-logo-image--footer {
		height: 5.75rem !important;
	}
}

.knr-mesh {
	position: absolute;
	inset: 0;
	opacity: 0.42;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='none' stroke='%23e6eaf0' stroke-width='1'/%3E%3C/svg%3E");
	background-size: 40px 40px;
}

.knr-mesh--from-hero {
	top: calc(-1 * var(--header-offset));
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.knr-mesh--into-human {
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 42%);
	mask-image: linear-gradient(to bottom, #000 0%, transparent 42%);
}

.knr-mesh--page {
	top: calc(-1 * var(--header-offset));
	-webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
}

.knr-services-human {
	display: none;
	pointer-events: none;
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	width: 34rem;
	max-width: 52%;
	opacity: 1;
	object-fit: contain;
	object-position: right top;
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 92%);
	mask-image: linear-gradient(to bottom, #000 55%, transparent 92%);
}

@media (min-width: 1024px) {
	.knr-services-human {
		display: block;
	}
}

@media (min-width: 1280px) {
	.knr-services-human {
		width: 40rem;
	}
}

.knr-request {
	background: #ffffff;
}

.knr-about-home {
	border-top: 1px solid var(--color-border);
	padding-top: 5rem;
	padding-bottom: 5rem;
}

#services .card {
	position: relative;
	z-index: 2;
	padding: 1.65rem 1.7rem;
	background: #ffffff;
	border: 1px solid var(--color-border);
	box-shadow: 0 1px 2px rgba(26, 27, 32, 0.04), 0 10px 28px rgba(26, 27, 32, 0.05);
	transition:
		transform 220ms ease,
		box-shadow 220ms ease,
		border-color 220ms ease;
}

#services .card::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	background: #882018;
	transition: width 220ms ease;
}

#services .card-interactive:hover,
#services .card-interactive:focus-visible {
	transform: translateY(-5px);
	border-color: #882018;
	box-shadow: 0 10px 28px rgba(136, 32, 24, 0.14), 0 2px 8px rgba(26, 27, 32, 0.06);
	outline: none;
}

#services .card-interactive:hover::before,
#services .card-interactive:focus-visible::before {
	width: 3px;
}

#services .card-interactive:hover .knr-service-icon,
#services .card-interactive:focus-visible .knr-service-icon {
	background: rgba(136, 32, 24, 0.08);
	color: #882018;
}

#services .knr-service-icon {
	padding: 0.45rem;
	border-radius: 2px;
	transition: background-color 220ms ease, color 220ms ease;
}

#services .card-interactive:hover .knr-service-num,
#services .card-interactive:focus-visible .knr-service-num {
	color: #882018;
}

#services .knr-service-more::after {
	content: "→";
	display: inline-block;
	transition: transform 220ms ease;
}

#services .card-interactive:hover .knr-service-more::after,
#services .card-interactive:focus-visible .knr-service-more::after {
	transform: translateX(4px);
}

@media (min-width: 640px) {
	#services .card {
		padding: 1.85rem 1.9rem;
	}
}

/* Колонка статьи: блок по центру окна, строки внутри слева. */
.knr-prose {
	margin-inline: auto;
}

#services h3 {
	margin-top: 1.35rem;
	font-size: 1.15rem;
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

@media (min-width: 768px) {
	#services h3 {
		font-size: 1.25rem;
	}
}
