/* ==========================================================================
   Pages: home sections, knowledge base, services, calculator, profile, auth.
   ========================================================================== */

/* ---------- Home: "Для кого цей ресурс" ----------
   Значення звірені з макетом docs/layout-2026-09 (ревізія 2026-09-30). */

.audience__list {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.audience__item {
	position: relative;
	border-top: 1px solid var(--line);
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.audience__head {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	align-items: center;
	gap: 20px;
	padding: 25px 30px 0;
	cursor: default;
}

.audience__num {
	font-size: 25px;
	font-weight: 300;
	color: var(--text-light);
}

.audience__title {
	font-size: 35px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.2;
}

.audience__chevron {
	display: none;
	width: 16px;
	height: 16px;
	color: var(--text);
}

.audience__chevron .icon {
	width: 16px;
	height: 10px;
}

.audience__body {
	display: grid;
	grid-template-columns: 251px 1fr 60px;
	align-items: center;
	gap: 40px;
	padding: 10px 20px 25px 94px;
}

.audience__media {
	aspect-ratio: 251 / 160;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.audience__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.audience__text {
	max-width: 676px;
	font-size: 22px;
	font-weight: 300;
	line-height: 30px;
}

.audience__arrow {
	display: inline-flex;
	width: 60px;
	height: 30px;
	transition: transform 0.2s;
}

.audience__arrow .icon {
	width: 60px;
	height: 30px;
}

.audience__arrow:hover {
	transform: translateX(6px);
}

/* Desktop: head + body sit on the same row (title next to the image) */
@media (min-width: 1024px) {
	.audience__item {
		display: grid;
		grid-template-columns: 94px 251px 1fr 60px;
		grid-template-areas:
			"num media title arrow"
			"num media text arrow";
		column-gap: 40px;
		row-gap: 10px;
		align-items: center;
		padding: 26px 20px 26px 0;
	}

	.audience__head {
		display: contents;
	}

	.audience__num {
		grid-area: num;
		padding-left: 30px;
		align-self: center;
	}

	.audience__title {
		grid-area: title;
		align-self: end;
	}

	.audience__body {
		display: contents;
	}

	/* У макеті панель примусово бере участь у сітці:
	   .audience__body[hidden] { display: contents !important; }. У темі панель —
	   дочірній <div> нативного <details> (усі тримаються [open] на десктопі,
	   див. initAudience у main.js), але з Chrome 131 вміст <details> загорнутий
	   у ::details-content з display: block — це ламає grid-areas. Розгортаємо
	   слот назад у сітку; де псевдоелемента нема, правило ігнорується. */
	details.audience__item::details-content {
		display: contents;
	}

	.audience__media {
		grid-area: media;
	}

	.audience__text {
		grid-area: text;
		align-self: start;
	}

	.audience__arrow {
		grid-area: arrow;
	}
}

@media (max-width: 1023px) {
	/* Розкладка звірена з макетом 375px: крок згорнутих пунктів 100px,
	   текст заголовка по центру на 42px нижче лінії, фото 155x122. */
	.audience {
		padding-top: 53px;
		padding-bottom: 40px;
	}

	.audience .section__title {
		margin-bottom: 22px;
	}

	.audience__list {
		gap: 20px;
	}

	.audience__head {
		grid-template-columns: 22px 1fr 14px;
		gap: 18px;
		padding: 33px 10px 29px;
		cursor: pointer;
	}

	.audience__num {
		font-size: 15px;
		line-height: 18px;
	}

	.audience__title {
		font-size: 20px;
		font-weight: 700;
		line-height: 18px;
	}

	.audience__item[open] .audience__title,
	.audience__item[open] .audience__chevron {
		color: var(--accent);
	}

	.audience__chevron {
		display: inline-flex;
		width: 14px;
		height: 14px;
	}

	.audience__chevron .icon {
		width: 14px;
		height: 9px;
	}

	.audience__body {
		grid-template-columns: 155px 1fr;
		grid-template-areas:
			"media text"
			"media arrow";
		gap: 4px 14px;
		align-content: start;
		padding: 0 10px 8px;
		overflow: hidden;
		transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.28s cubic-bezier(0.4, 0, 0.2, 1),
			padding-bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* Анімація висоти з макета: перемикання лишається миттєвим (нативний
	   toggle в main.js, без JS-анімації), тож transition руху поки не задає —
	   перенесено 1:1 з ревізії 2026-09-30. */
	@media (prefers-reduced-motion: reduce) {
		.audience__body {
			transition: none;
		}
	}

	.audience__media {
		grid-area: media;
		aspect-ratio: 155 / 122;
	}

	.audience__text {
		grid-area: text;
		margin-top: 12px;
		font-size: 15px;
		line-height: 21px;
		letter-spacing: -0.04em;
	}

	.audience__arrow {
		grid-area: arrow;
		width: 60px;
		height: 30px;
		align-self: start;
	}

	.audience__arrow .icon {
		width: 60px;
		height: 30px;
	}
}

/* ---------- Home: library ---------- */

.library__tags-label {
	margin-bottom: 15px;
	font-size: 22px;
	font-weight: 700;
	line-height: 22px;
}

.library__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px 20px;
	margin-top: 50px;
}

.lib-card {
	display: grid;
	grid-template-columns: 43px 1fr;
	grid-template-areas:
		"icon title"
		"text text";
	gap: 20px;
	padding: 28px 20px 30px;
	background: var(--bg-card);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-card);
	transition: transform 0.2s, box-shadow 0.2s;
}

.lib-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.lib-card__icon {
	grid-area: icon;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 43px;
	height: 43px;
	color: var(--accent);
}

.lib-card__icon .icon {
	width: 43px;
	height: 43px;
}

.lib-card__title {
	grid-area: title;
	align-self: center;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.2;
}

.lib-card__text {
	grid-area: text;
	font-size: 20px;
	font-weight: 300;
	line-height: 30px;
}

/* ---------- Home: projects ---------- */

.projects__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px 27px;
	margin-top: 50px;
}

.project-card {
	position: relative;
	display: block;
	aspect-ratio: 1;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--bg-placeholder);
}

.project-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.project-card:hover .project-card__img {
	transform: scale(1.05);
}

.project-card__label {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 66px;
	padding: 10px 15px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	border-radius: var(--radius);
}

/* Project gallery modal */
.project-modal {
	max-width: 730px;
	text-align: center;
}

.project-modal__title {
	font-size: 40px;
	font-weight: 700;
	margin-bottom: 15px;
}

.project-modal__text {
	font-size: 18px;
	font-weight: 500;
	line-height: 25px;
	margin-bottom: 25px;
	/* Місце під два рядки: висота плашки однакова для всіх проєктів,
	   тому хрестик «Закрити» не зміщується при перемиканні. */
	min-height: 50px;
}

/* У макеті стрілки стоять у полях картки, а не поверх фото: слайдер
   відсунутий на 45px, стрілки винесені поруч (у .slider є overflow: hidden). */
.project-modal__gallery {
	position: relative;
	margin: 0 45px;
}

.project-modal .slider__arrow {
	color: var(--text-muted);
	background: transparent;
}

.project-modal .slider__arrow--prev {
	left: -45px;
}

.project-modal .slider__arrow--next {
	right: -45px;
}

.project-modal .gallery__img {
	width: 100%;
	aspect-ratio: 650 / 420;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.project-modal .dots {
	justify-content: center;
	margin-top: 20px;
}

/* Вертикальне перемикання проєктів: попередня плашка їде вгору/вниз і зникає,
   наступна з'являється з протилежного боку. */
.project-modal {
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.project-modal.is-leaving-up {
	transform: translateY(-40px);
	opacity: 0;
}

.project-modal.is-leaving-down {
	transform: translateY(40px);
	opacity: 0;
}

.project-modal.is-from-bottom {
	animation: project-in-up 0.25s ease;
}

.project-modal.is-from-top {
	animation: project-in-down 0.25s ease;
}

@keyframes project-in-up {
	from {
		transform: translateY(40px);
		opacity: 0;
	}
}

@keyframes project-in-down {
	from {
		transform: translateY(-40px);
		opacity: 0;
	}
}

/* ---------- Home: videos ---------- */

.videos .section__head {
	align-items: center;
}

/* ---------- Home: services (dark) ---------- */

.hservices__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 62px 20px;
	margin-top: 60px;
}

.hservice {
	display: flex;
	flex-direction: column;
	gap: 25px;
	padding: 20px 20px 20px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-lg);
}

.hservice__head {
	display: flex;
	align-items: center;
	gap: 20px;
}

.hservice__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	flex: none;
	color: #fff;
	background: var(--accent);
	border-radius: var(--radius);
}

.hservice__icon .icon {
	width: 30px;
	height: 30px;
}

.hservice__title {
	font-size: 25px;
	font-weight: 700;
	line-height: 1.2;
}

.hservice__text {
	flex: 1;
	max-width: 533px;
	font-size: 20px;
	font-weight: 300;
	line-height: 30px;
}

.hservice__btn {
	align-self: flex-start;
	min-width: 336px;
	font-weight: 600;
}

/* Кнопки картки (рішення власника 2026-09-30): «Детальніше» — outline-кнопка
   як у картках сторінки послуг, попереду акцентної (у макеті був лише один
   CTA, текст-посилання .hservice__more виведено з ужитку). flex-wrap — як у
   service-card__actions: на тісних екранах ~1024–1150 (336+150+20 > 460)
   outline переноситься вниз замість виходу за межі плашки. */
.hservice__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* ---------- Home: FAQ ---------- */

.faq__list {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.faq__item {
	border-top: 1px solid var(--line);
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 23px 30px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	transition: color 0.2s;
}

.faq__q:hover {
	color: var(--accent);
}

.faq__q .icon {
	width: 16px;
	height: 10px;
	flex: none;
	color: var(--accent);
}

.faq__a {
	padding: 0 30px 25px;
	font-size: 18px;
	font-weight: 300;
	line-height: 28px;
}

.faq__a p + p {
	margin-top: 10px;
}

/* ---------- Home: CTA ---------- */

.cta {
	padding-bottom: 60px;
}

.cta__inner {
	display: grid;
	grid-template-columns: 1fr 610px;
	gap: 20px;
	align-items: center;
}

.cta__media {
	position: relative;
	/* Картинка виходить за колонку ліворуч, але не далі краю екрана. */
	margin-left: calc(-1 * min(120px, max(0px, (100vw - 1240px) / 2)));
}

.cta__img {
	width: 100%;
	max-width: 682px;
}

.cta__title {
	margin-bottom: 30px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
}

.cta__text {
	margin-bottom: 40px;
	font-size: 20px;
	line-height: 30px;
}

.cta .btn {
	min-width: 345px;
	font-weight: 700;
}

/* ---------- Home: tech text ---------- */

.tech {
	padding-top: 40px;
	position: relative;
}

.tech::before {
	content: "";
	display: block;
	width: 100%;
	max-width: var(--container);
	height: 1px;
	margin: 0 auto 80px;
	background: var(--line-soft);
}

.tech__text {
	font-size: 20px;
	line-height: 30px;
	text-align: center;
}

@media (max-width: 1023px) {
	.library__grid,
	.hservices__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.projects__grid {
		grid-template-columns: 1fr 1fr;
		gap: 15px;
	}

	.cta__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.cta__media {
		order: 2;
		margin: 0;
	}

	.cta .btn {
		width: 100%;
		min-width: 0;
	}

	.hservice__btn {
		min-width: 0;
		width: 100%;
	}

	/* Кнопки картки стосом повної ширини (як .hero__actions на ≤1023);
	   акцентна лишається в потоці до 768, звисати починає лише на мобайлі. */
	.hservice__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hservice__actions .btn--outline {
		width: 100%;
	}
}

@media (max-width: 1023px) {
	/* На мобільному кнопка «Відкрити базу знань» стоїть під картками (як у макеті). */
	.library .container {
		display: flex;
		flex-direction: column;
	}

	.library .section__head {
		display: contents;
	}

	.library .section__title {
		order: 1;
	}

	.library .lead {
		order: 2;
	}

	.library__tags-label {
		order: 3;
	}

	.library .tags {
		order: 4;
	}

	.library__grid {
		order: 5;
	}

	.library .section__head-btn {
		order: 6;
		width: 100%;
	}
}

@media (max-width: 1023px) {
	/* Відео: на мобільному крапки під слайдером по центру (як у макеті). */
	.videos .container {
		display: flex;
		flex-direction: column;
	}

	.videos .section__head {
		display: contents;
	}

	.videos .section__title {
		order: 1;
	}

	.videos .lead {
		order: 2;
	}

	.videos .slider {
		order: 3;
	}

	.videos .dots {
		order: 4;
		justify-content: center;
		margin-top: 30px;
	}
}

@media (max-width: 767px) {
	/* Інженерні сервіси (темна секція) — розміри з макета 375. */
	.hservices {
		padding-top: 30px;
		padding-bottom: 76px;
	}

	.hservices .section__title {
		margin-bottom: 26px;
	}

	.hservices .lead {
		font-size: 15px;
		line-height: 25px;
		margin-bottom: 28px;
	}

	.hservices__grid {
		margin-top: 0;
		gap: 20px;
	}

	/* Макет 359:2935: плашка 345 завширшки, кнопка 305x50 звисає на 23px
	   нижче її межі (27px кнопки лишаються всередині). */
	.hservice {
		position: relative;
		min-width: 0;
		gap: 11px;
		padding: 20px 18px 52px 10px;
	}

	.hservice__icon {
		width: 60px;
		height: 60px;
	}

	.hservice__icon .icon {
		width: 30px;
		height: 30px;
	}

	.hservice__head {
		gap: 19px;
	}

	.hservice__title {
		font-size: 18px;
		line-height: 22px;
	}

	.hservice__text {
		font-size: 15px;
		line-height: 24px;
	}

	.hservice__btn {
		padding-inline: 12px;
		font-size: 15px;
	}

	/* CTA: картинка під кнопкою, 333x161 по центру. */
	.cta {
		padding-bottom: 0;
	}

	.cta__title {
		margin-bottom: 19px;
		font-size: 26px;
		line-height: 36px;
	}

	.cta__text {
		margin-bottom: 23px;
		font-size: 15px;
		line-height: 27px;
	}

	.cta__media {
		max-width: 333px;
		margin: 30px auto 0;
	}

	.cta__img {
		aspect-ratio: 333 / 161;
		object-fit: cover;
	}

	/* Технології */
	.tech {
		padding-top: 28px;
	}

	.tech::before {
		margin-bottom: 30px;
	}

	.tech .section__title {
		margin-bottom: 15px;
		font-size: 24px;
		line-height: 32px;
	}

	.tech__text {
		font-size: 15px;
		line-height: 28px;
	}
}

@media (max-width: 767px) {
	/* Проєкти і відео — розміри з макета 375. */
	.projects {
		padding-top: 51px;
		padding-bottom: 0;
	}

	.projects .section__title {
		margin-bottom: 36px;
	}

	.projects .lead {
		font-size: 15px;
		line-height: 25px;
		margin-bottom: 26px;
	}

	.projects__grid {
		gap: 16px;
		margin-top: 0;
	}

	.videos {
		padding-top: 57px;
	}

	.videos .section__title {
		margin-bottom: 18px;
	}

	.videos .lead {
		font-size: 15px;
		line-height: 22px;
		margin-bottom: 26px;
	}

	.video-card {
		aspect-ratio: 345 / 195;
	}
}

@media (max-width: 767px) {
	/* Картка бібліотеки: 345x165, крок 185 (макет 375). */
	.library {
		padding-top: 52px;
		padding-bottom: 52px;
	}

	.library .lead {
		font-size: 16px;
		line-height: 22px;
	}

	.library .tag {
		height: 35px;
		padding: 0 12px;
		font-size: 15px;
	}

	.library .section__title {
		margin-bottom: 27px;
	}

	.library .lead {
		margin-bottom: 26px;
	}

	.library__tags-label {
		margin-bottom: 29px;
		font-size: 15px;
		line-height: 15px;
	}

	.library .tags {
		gap: 10px;
		margin-bottom: 31px;
	}

	.library__grid {
		margin-top: 0;
		gap: 20px;
	}

	.library .section__head-btn {
		margin-top: 30px;
	}

	.lib-card {
		grid-template-columns: 43px 1fr;
		gap: 13px 12px;
		padding: 21px 15px 16px;
	}

	.lib-card__icon .icon {
		width: 32px;
		height: 32px;
	}

	.lib-card__title {
		font-size: 17px;
		line-height: 20px;
	}

	.lib-card__text {
		font-size: 15px;
		line-height: 24px;
	}

	.project-card__label {
		left: 4px;
		right: 4px;
		bottom: 5px;
		min-height: 46px;
		padding: 7px 6px;
		font-size: 14px;
	}

	.hservice__title {
		font-size: 18px;
	}

	.hservice__text {
		font-size: 15px;
		line-height: 24px;
	}

	.hservice__btn {
		position: absolute;
		left: 20px;
		right: 20px;
		bottom: -23px;
		/* скидаємо width:100% з ширшого брейкпоїнта, інакше left/right не працюють */
		width: auto;
		min-height: 50px;
		padding-inline: 12px;
		font-size: 15px;
	}

	/* Проміжок 43 = 23 (виступ кнопки) + 20 (відстань до наступної плашки). */
	.hservices__grid {
		gap: 43px;
	}

	.faq .section__title--center {
		text-align: left;
	}

	.faq__list {
		gap: 20px;
	}

	.faq__q {
		padding: 18px 15px;
		font-size: 17px;
	}

	.faq__a {
		padding: 0 15px 20px;
		font-size: 15px;
		line-height: 24px;
	}

	.cta__title {
		font-size: 28px;
	}

	.cta__text,
	.tech__text {
		font-size: 16px;
		line-height: 26px;
	}

	.tech::before {
		margin-bottom: 40px;
	}

	.project-modal__title {
		font-size: 26px;
	}
}

/* ==========================================================================
   Knowledge base
   ========================================================================== */

.kb {
	padding: 50px 0 80px;
}

/* Кнопка «Фільтри» — лише мобільна (блок домержено в L7 з макета 989). */
.kb__filters-btn {
	display: none;
}

.kb__inner {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 20px;
	align-items: start;
}

.kb.is-loading [data-kb-results] {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.2s;
}

/* Sidebar filters */
.kb__panel-head,
.kb__panel-actions {
	display: none;
}

.filters {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.filter {
	border-top: 1px solid var(--line);
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.filter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 20px 10px 20px 19px;
	font-size: 18px;
	font-weight: 700;
	text-align: left;
	transition: color 0.2s;
}

.filter__head .icon {
	width: 24px;
	height: 24px;
	color: var(--text);
	transform: rotate(-90deg);
	transition: transform 0.25s;
}

.filter.is-open .filter__head {
	color: var(--accent);
}

.filter.is-open .filter__head .icon {
	transform: rotate(0);
}

.filter__body {
	display: none;
	flex-direction: column;
	gap: 25px;
	padding: 20px 10px 10px;
	border-top: 1px solid var(--line-soft);
	margin: 0 10px;
}

.filter.is-open .filter__body {
	display: flex;
}

/* Main column */
.kb__main {
	min-width: 0;
}

.kb__search {
	position: relative;
	margin-bottom: 20px;
}

.kb__search-input {
	padding-right: 60px;
	border-color: var(--line-soft);
}

.kb__search-btn {
	position: absolute;
	top: 50%;
	right: 20px;
	display: inline-flex;
	width: 24px;
	height: 24px;
	transform: translateY(-50%);
	color: var(--accent);
}

.kb__search-btn .icon {
	width: 24px;
	height: 24px;
}

.kb__count {
	margin-bottom: 15px;
	font-size: 18px;
	font-weight: 700;
}

.kb__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}

.kb__sort {
	padding-right: 20px;
}

.kb__views {
	display: flex;
	gap: 20px;
}

.kb__view {
	display: inline-flex;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	transition: color 0.2s;
}

.kb__view .icon {
	width: 22px;
	height: 22px;
}

.kb__view.is-active,
.kb__view:hover {
	color: var(--accent);
}

.doc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
	gap: 40px 20px;
}

.doc-grid--list .doc-grid {
	grid-template-columns: 1fr;
	gap: 30px;
}

.kb__active {
	display: none;
}

/* AJAX-обмін каталогу тримає контейнер у DOM постійно; на мобільному
   display:grid нижче перекривав би атрибут hidden. */
.kb__active[hidden] {
	display: none;
}

.kb__empty {
	padding: 40px 0;
	font-size: 18px;
	color: var(--text-muted);
	text-align: center;
}

.kb__videos .section {
	padding-top: 0;
}

.kb__videos .section::before {
	content: "";
	display: block;
	width: 100%;
	max-width: var(--container);
	height: 1px;
	margin: 0 auto 80px;
	background: var(--line-soft);
}

/* Document modal / single document */
/* Колонки з макета «Документ для проектувальника»: 546 + 635. */
.doc-modal {
	display: grid;
	grid-template-columns: 546px 635px;
	gap: 0;
	align-items: start;
}

.doc-modal__info {
	max-width: 502px;
}

.doc-modal__title {
	margin-bottom: 25px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
}

.doc-modal__meta {
	margin-bottom: 20px;
	font-size: 20px;
	font-weight: 300;
	line-height: 25px;
}

.doc-modal__text {
	margin: 25px 0 35px;
	font-size: 20px;
	font-weight: 300;
	line-height: 30px;
}

.doc-modal__text p + p {
	margin-top: 15px;
}

.doc-modal .chips {
	gap: 20px;
}

.doc-modal__label {
	margin-bottom: 17px;
	font-size: 18px;
	line-height: 22px;
	font-weight: 700;
}

.doc-modal__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 55px;
}

.doc-modal__download {
	min-width: 238px;
	font-size: 20px;
	min-height: 70px;
}

.doc-modal__actions .icon-btn {
	width: 70px;
	height: 70px;
}

.doc-modal__actions .icon-btn .icon {
	width: 34px;
	height: 34px;
}

.doc-modal__note {
	margin: 10px 0 25px;
	font-size: 20px;
	font-weight: 300;
	line-height: 30px;
}

.doc-modal__note--danger {
	color: var(--danger);
	font-weight: 700;
	font-size: 18px;
}

.doc-modal__note--strong {
	font-weight: 700;
	font-size: 18px;
}

.doc-modal__preview {
	position: relative;
	min-height: 400px;
}

.doc-modal__preview .fav-btn--lg {
	position: absolute;
	top: 49px;
	right: 55px;
	z-index: 3;
	width: 60px;
	height: 60px;
	background: var(--accent-soft);
	border-color: transparent;
}

.doc-modal__preview .fav-btn--lg .icon {
	width: 45px;
	height: 45px;
}

.doc-modal__slider {
	/* 635 - 2x48 = 539: у макеті сторінка документа 540x766. */
	margin: 0 48px;
}

.doc-modal__page {
	width: 100%;
	aspect-ratio: 540 / 766;
	object-fit: cover;
	object-position: top;
}

.doc-modal__preview .slider__arrow {
	color: var(--text);
	background: transparent;
	width: 38px;
	height: 38px;
}

.doc-modal__preview .slider__arrow .icon {
	width: 38px;
	height: 38px;
}

.doc-modal__preview .slider__arrow:hover {
	color: var(--accent);
	background: transparent;
}

.doc-modal__preview .slider__arrow--prev {
	left: 0;
}

.doc-modal__preview .slider__arrow--next {
	right: 0;
}

.doc-modal__dots {
	justify-content: center;
	margin-top: 20px;
}

.doc-modal__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 551 / 727;
	max-height: 727px;
	color: var(--text-light);
	background: var(--bg-placeholder);
	border-radius: var(--radius-lg);
}

.doc-modal__placeholder .icon {
	width: 60%;
}

/* Single document page wrapper */
.doc-page {
	padding: 50px 0 100px;
}

.doc-page .modal__box {
	padding: 0;
	background: transparent;
}

@media (max-width: 1279px) {
	.doc-modal {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 1023px) {
	.kb {
		padding: 30px 0 60px;
	}

	.kb__inner {
		grid-template-columns: 1fr;
	}

	/* Filters become a full-screen panel */
	.kb__sidebar {
		position: fixed;
		inset: 0;
		z-index: 850;
		display: none;
		flex-direction: column;
		/* Панель фільтра звірена з макетом filtr-3 (375). */
		padding: 24px 22px 30px;
		background: var(--bg);
		overflow-y: auto;
	}

	.kb__sidebar.is-open {
		display: flex;
	}

	.kb__panel-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 42px;
	}

	.kb__panel-title {
		font-size: 30px;
		font-weight: 700;
	}

	.kb__panel-close {
		display: inline-flex;
		width: 40px;
		height: 40px;
		align-items: center;
		justify-content: center;
	}

	.kb__panel-close .icon {
		width: 22px;
		height: 22px;
	}

	.kb__panel-actions {
		display: flex;
		gap: 11px;
		margin-top: 35px;
	}

	.filter__head {
		padding: 17px 10px 17px 7px;
	}

	.filter__body {
		gap: 9px;
		margin: 0 7px;
		padding: 16px 0 10px;
	}

	.check {
		gap: 6px;
	}

	.kb__panel-actions .btn {
		flex: 1;
	}

	.doc-grid {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	}

	.doc-modal {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.doc-modal__preview {
		order: -1;
		min-height: 0;
	}

	.doc-modal__title {
		font-size: 28px;
	}

	.doc-modal__meta,
	.doc-modal__text,
	.doc-modal__note {
		font-size: 16px;
		line-height: 24px;
	}

	.doc-modal__slider {
		margin: 0 50px;
	}
}

@media (max-width: 767px) {
	/* База знань — розміри з мобільного макета 375. */
	.hero--page .hero__inner {
		padding-top: 33px;
		padding-bottom: 50px;
	}

	.hero--page .hero__title {
		font-size: 30px;
		line-height: 36px;
		margin-bottom: 22px;
	}

	.hero--page .hero__subtitle {
		margin-bottom: 26px;
		font-size: 15px;
		line-height: 21px;
	}

	.hero--page .hero__text {
		font-size: 13px;
		line-height: 17px;
	}

	.kb {
		padding-top: 20px;
	}

	/* Кнопка «Фільтри» — домержено в L7 з макета 1540–1556. */
	.kb__filters-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		order: 0;
		width: 100%;
		min-height: 45px;
		margin-bottom: 30px;
		font-size: 17px;
		font-weight: 500;
		color: var(--text);
		background: var(--bg-card);
		border: 1px solid var(--line-soft);
		border-radius: var(--radius);
	}

	.kb__filters-btn .icon {
		width: 20px;
		height: 20px;
		color: var(--text-muted);
	}

	/* Рядок обраних фільтрів — лише на мобільному (як у макеті). */
	.kb__active {
		display: grid;
		order: 0;
		grid-template-columns: 1fr 1fr;
		gap: 10px 20px;
		margin-bottom: 26px;
	}

	.kb__active p {
		font-size: 15px;
		line-height: 21px;
		color: var(--text-muted);
	}

	.kb__active b {
		display: block;
		font-weight: 400;
		color: var(--accent);
	}

	.pagination {
		gap: 6px;
		margin-top: 30px;
	}

	.pagination__arrow {
		width: 30px;
		height: 30px;
	}

	.pagination__arrow .icon {
		width: 30px;
		height: 30px;
	}

	/* Порядок як у макеті: сортування → пошук → картки. */
	.kb__main {
		display: flex;
		flex-direction: column;
	}

	.kb__toolbar {
		order: 1;
		margin-bottom: 0;
	}

	.kb__search {
		order: 2;
		margin: 30px 0 0;
	}

	.kb__count {
		order: 3;
		margin: 15px 0 0;
	}

	.kb__results-wrap {
		order: 4;
		margin-top: 20px;
	}

	.kb__sort {
		min-height: 45px;
		font-size: 14px;
		border-radius: 10px;
	}

	.kb__sort select {
		font-size: 14px;
	}

	/* Зірочку в макеті винесено в рядок кнопок, поруч із «Перегляд». */
	.doc-card__media {
		position: static;
	}

	.doc-card__media .fav-btn {
		top: auto;
		right: auto;
		bottom: 27px;
		left: 212px;
	}

	.doc-card__actions .btn {
		flex: 0 0 180px;
		max-width: 180px;
	}

	.doc-card__actions .icon-btn {
		margin-left: 62px;
	}

	.doc-grid {
		gap: 30px;
	}

	.doc-card {
		gap: 10px;
		padding: 25px 10px 27px;
	}

	.doc-card__title {
		font-size: 18px;
		line-height: 22px;
		min-height: 0;
	}

	.doc-card__media {
		aspect-ratio: 323 / 210;
	}

	.doc-card__cats,
	.doc-card__text {
		font-size: 15px;
		line-height: 21px;
	}

}

@media (max-width: 767px) {
	.kb__toolbar {
		flex-wrap: wrap;
	}

	.kb__sort {
		width: 100%;
		min-height: 50px;
		padding: 0 40px 0 15px;
		font-size: 15px;
		white-space: nowrap;
		border: 1px solid var(--line-soft);
		border-radius: var(--radius);
	}

	.kb__sort select {
		min-width: 0;
		text-overflow: ellipsis;
	}

	.kb__sort .icon {
		right: 15px;
	}

	.kb__views {
		position: absolute;
		right: 0;
		top: 0;
	}

	.kb__toolbar {
		position: relative;
		padding-right: 90px;
	}

	.doc-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.doc-modal__actions {
		flex-wrap: wrap;
	}

	.doc-modal__download {
		min-width: 0;
		flex: 1 1 auto;
		min-height: 56px;
		font-size: 17px;
	}

	/* Хвиля S4 (single послуга) + L2 (сторінка документа) — 767-значення
	   макета (docs/layout-2026-09/css/pages.css:3618–3705). */
	.doc-modal {
		gap: 20px;
	}

	.doc-modal__title {
		margin-bottom: 16px;
		font-size: 22px;
	}

	.doc-modal__meta {
		margin-bottom: 12px;
	}

	.doc-modal__meta,
	.doc-modal__text,
	.doc-modal__note {
		font-size: 15px;
		line-height: 22px;
	}

	.doc-modal__text {
		margin: 16px 0 22px;
	}

	.doc-modal__label {
		margin-bottom: 12px;
		font-size: 15px;
		line-height: 20px;
	}

	.doc-modal .chips {
		gap: 10px;
	}

	.doc-modal__note--danger,
	.doc-modal__note--strong {
		font-size: 15px;
	}

	.doc-modal__actions {
		gap: 10px;
		margin-top: 24px;
	}

	.doc-modal__placeholder,
	.doc-modal__page {
		display: block;
		max-height: 280px;
		margin-inline: auto;
	}

	.doc-modal__slider {
		margin: 0 26px;
	}

	.doc-modal__preview .slider__arrow,
	.doc-modal__preview .slider__arrow .icon {
		width: 26px;
		height: 26px;
	}

	.doc-modal__preview .fav-btn--lg {
		top: 10px;
		right: 10px;
		width: 44px;
		height: 44px;
	}

	.doc-modal__preview .fav-btn--lg .icon {
		width: 30px;
		height: 30px;
	}

	.doc-modal__dots {
		margin-top: 15px;
	}

	.doc-modal__actions .icon-btn {
		width: 56px;
		height: 56px;
	}
}

/* ==========================================================================
   Services page
   ========================================================================== */

.services {
	padding: 50px 0 100px;
}

/* Hero сторінки послуг (пакет 2026-09): щільніший оверлей і великі тексти. */
.hero--services .hero__bg {
	object-position: 50% 78%;
}

.hero--services::before {
	background: rgba(33, 33, 33, 0.7);
}

.hero--services .hero__title {
	max-width: 865px;
	margin-bottom: 44px;
	font-size: 50px;
	line-height: 61px;
}

.hero--services .hero__subtitle {
	max-width: 822px;
	margin-bottom: 0;
	font-size: 22px;
	line-height: 33px;
}

.hero--services .hero__text {
	max-width: 822px;
	font-size: 22px;
	font-weight: 400;
	line-height: 33px;
}

/* Чіпси груп у макеті: 55 заввишки, текст 19/22, проміжок 20. */
.services__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 56px;
}

.services__tabs .chip {
	min-height: 55px;
	padding: 10px 15px;
	font-size: 19px;
	line-height: 22px;
	border-radius: var(--radius-lg);
}

.services__group {
	scroll-margin-top: 90px;
}

.services__group + .services__group {
	margin-top: 41px;
	padding-top: 41px;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.services__group-title {
	display: flex;
	align-items: center;
	gap: 0;
	margin-bottom: 36px;
	font-size: 35px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.2;
}

.services__group-icon {
	display: inline-flex;
	align-items: center;
	width: 72px;
	flex: none;
	color: var(--text);
}

.services__group-icon .icon-srv-object {
	width: 54px;
	height: 39px;
}

/* Розміри іконок послуг (макет 2026-09) — групи й картки; кожна своєю
   пропорцією (квадрат-заглушка 36x36 тут ламає «Обʼєктний сервіс»
   і «Теплотехніку»). */
.icon-srv-calc {
	width: 36px;
	height: 38px;
}

.icon-srv-heat {
	width: 42px;
	height: 38px;
}

.icon-srv-design {
	width: 44px;
	height: 38px;
}

.icon-srv-object {
	width: 46px;
	height: 33px;
}

.icon-srv-academy {
	width: 37px;
	height: 39px;
}

/* У макеті картки 375 з проміжком 28. */
.services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px 28px;
}

.service-card {
	display: flex;
	flex-direction: column;
}

/* Редизайн картки (пакет 2026-09): лінія на head, result-рядок
   з бордером.
   Відхилення від макета (фіксу його власного багу): head — min-height
   замість height 101px (довгі назви послуг не вилазять за рядок). */
.service-card__head {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 101px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 55px;
	height: 55px;
	flex: none;
	color: var(--accent);
	background: var(--accent-soft);
	border-radius: var(--radius);
}

.service-card__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

.service-card__text {
	flex: 1 1 auto;
	margin-top: 6px;
	font-size: 17px;
	font-weight: 300;
	line-height: 25px;
}

.service-card__result {
	flex: none;
	min-height: 89px;
	margin-top: 16px;
	padding-top: 13px;
	font-size: 17px;
	font-weight: 300;
	line-height: 25px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.service-card__result strong {
	font-weight: 700;
}

/* Відхилення від макета (фікси його власних багів): actions — flex-wrap
   (2 кнопки в ряд), кнопки — flex із max-width замість фіксованих 190px
   (2×190px + gap не влазить у картку 3-колоночної сітки ~374px). */
.service-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 25px;
}

.service-card__actions .btn {
	flex: 1 1 auto;
	max-width: 190px;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 16px;
}

.service-card__actions .btn--outline {
	width: 150px;
}

/* Quick calculation form */
/* «Швидкий прорахунок» за фреймом Сервіси-4-3: блок 1179x635,
   ліворуч текст/картинка/чіпси (580), праворуч панель форми 550. */
.quick-calc {
	display: grid;
	grid-template-columns: 580px 550px;
	gap: 49px;
	align-items: start;
	margin-top: 100px;
	padding-top: 40px;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	scroll-margin-top: 90px;
}

.quick-calc__info {
	padding-top: 30px;
}

.quick-calc__title {
	max-width: 600px;
	margin-bottom: 29px;
	font-size: 40px;
	font-weight: 700;
	line-height: 55px;
}

.quick-calc__text {
	max-width: 600px;
	margin-bottom: 30px;
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
}

.quick-calc__media {
	width: 456px;
	max-width: 100%;
	margin: 0 auto 30px;
}

.quick-calc__img {
	width: 100%;
	height: 210px;
	object-fit: contain;
}

.quick-calc__chips {
	gap: 15px;
}

/* Довгі назви в макеті переносяться всередині чіпса — так вони стають
   по три в рядок у колонці 580. Чіпси: сірі з акцентним текстом,
   відмічені — суцільний акцент (нова ревізія макета 2026-09). */
.quick-calc__chips .chip {
	min-height: 50px;
	max-width: 202px;
	padding: 10px;
	font-size: 17px;
	line-height: 22px;
	text-align: center;
	white-space: normal;
	color: var(--accent);
	background: #f6f6f6;
	border: 0;
	border-radius: 3px;
}

.quick-calc__chips .chip:hover {
	background: var(--accent-soft);
}

.quick-calc__chips .chip:has(input:checked),
.quick-calc__chips .chip.is-active {
	color: #fff;
	background: var(--accent);
}

.quick-calc__form {
	gap: 20px;
	padding: 50px;
	background: #fff;
	border-radius: 50px;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}

.quick-calc__form .input--area {
	min-height: 96px;
}

/* ==========================================================================
   Calculator page (значення — з макета docs/layout-2026-09, L5)
   ========================================================================== */

.hero--calc .hero__bg {
	object-position: 50% 44%;
}

.hero--calc .hero__title {
	max-width: 865px;
	margin-bottom: 26px;
	font-size: 50px;
	line-height: 61px;
}

.hero--calc .hero__text {
	max-width: 913px;
	font-size: 22px;
	font-weight: 400;
	line-height: 33px;
}

.hero--calc .hero__text strong {
	font-weight: 700;
}

.hero__actions--toggle {
	flex-direction: row;
	justify-content: center;
	gap: 30px;
	margin-top: 44px;
}

.hero__actions--toggle .btn {
	min-width: 0;
	min-height: 55px;
	padding: 10px 15px;
	font-size: 19px;
	line-height: 22px;
	color: #fff;
	background: transparent;
	border-color: #fff;
	border-radius: var(--radius-lg);
	box-shadow: none;
}

.hero__actions--toggle .btn:hover {
	color: var(--accent);
	background: rgba(255, 255, 255, 0.85);
}

.hero__actions--toggle .btn.is-active {
	color: var(--accent);
	background: #fff;
	border-color: #fff;
}

.calc {
	padding: 50px 0 100px;
}

.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-bottom: 50px;
	padding-bottom: 50px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.step {
	display: flex;
	align-items: center;
	gap: 20px;
	height: 101px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 55px;
	height: 55px;
	flex: none;
	font-size: 25px;
	font-weight: 700;
	line-height: 25px;
	color: var(--accent);
	background: var(--accent-soft);
	border-radius: var(--radius);
}

.step__text {
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
}

.calc__filter-title {
	margin-bottom: 17px;
	font-size: 22px;
	font-weight: 700;
	line-height: 22px;
}

.calc__tasks {
	gap: 19px;
	margin-bottom: 50px;
}

.calc__tasks .chip {
	min-height: 55px;
	padding: 10px 14px;
	font-size: 19px;
	line-height: 22px;
	border-radius: var(--radius-lg);
}

.calc__group + .calc__group {
	margin-top: 41px;
	padding-top: 41px;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}

/* У макеті заголовок банера калькулятора набраний капсом. */
.hero--calc .hero__title {
	text-transform: uppercase;
}

.calc-card__badge {
	display: block;
	font-size: 14px;
	line-height: 25px;
	font-weight: 700;
	color: var(--accent);
}

.calc-card .service-card__text {
	flex: none;
	min-height: 100px;
	margin-top: 6px;
}

.calc-card .service-card__head > div {
	margin-bottom: 9px;
}

.calc-card__badge + .service-card__title {
	margin-top: 3px;
}

.calc-card .service-card__result {
	min-height: 0;
	margin-top: 14px;
}

.calc-card .service-card__result + .service-card__result {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.calc-card .service-card__result:last-of-type {
	flex: 1 1 auto;
}

.calc-card .service-card__actions {
	margin-top: 14px;
}

.calc-card .service-card__actions .btn {
	width: 100%;
	max-width: 360px;
}

.icon-calc-roof {
	width: 47px;
	height: 25px;
}

.icon-calc-facade {
	width: 34px;
	height: 34px;
}

.icon-calc-drainage {
	width: 36px;
	height: 34px;
}

.icon-calc-nodes {
	width: 37px;
	height: 42px;
}

.services__group-icon .icon-calc-roof {
	width: 41px;
	height: 22px;
}

.calc__note {
	padding-top: 50px;
	font-size: 17px;
	font-weight: 300;
	line-height: 25px;
	text-align: center;
}

/* ==========================================================================
   Order page («samovyty dostup» / замовити доступ -1)
   ========================================================================== */

.order-page {
	padding: 86px 0 266px;
}

.order-page__inner {
	display: grid;
	grid-template-columns: 502px 578px;
	gap: 101px;
	align-items: center;
	max-width: 1181px;
	margin: 0 auto;
}

.order-page__title {
	margin-bottom: 33px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
}

.order-page__text {
	font-size: 20px;
	font-weight: 300;
	line-height: 27px;
}

.order-page__text + .order-page__text {
	margin-top: 5px;
}

.order-page__text strong {
	font-weight: 700;
}

/* Панель у макеті: 578x573, фон #ededed, радіус 30, поля 514 (по 32 з боків). */
.order-panel {
	padding: 90px 32px 101px;
	background: #ededed;
	border-radius: 30px;
}

.order-panel .form {
	gap: 20px;
}

.order-panel .btn--block {
	margin-top: 30px;
	min-height: 70px;
	font-size: 20px;
}

@media (max-width: 1279px) {
	.order-page__inner {
		grid-template-columns: 1fr 460px;
		gap: 60px;
	}
}

@media (max-width: 1023px) {
	.order-page {
		padding: 50px 0 80px;
	}

	.order-page__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.order-page__title {
		font-size: 30px;
	}

	.order-panel {
		padding: 35px 20px;
	}
}

/* Мобільна хвиля макета (order.html): @767. */
@media (max-width: 767px) {
	.order-page {
		padding: 35px 0 55px;
	}

	.order-page__inner {
		gap: 30px;
	}

	.order-page__title {
		margin-bottom: 20px;
		font-size: 26px;
	}

	.order-page__text {
		font-size: 16px;
		line-height: 24px;
	}

	.order-page__text + .order-page__text {
		margin-top: 16px;
	}

	.order-panel {
		padding: 25px 15px 30px;
		border-radius: 20px;
	}

	.order-panel .form {
		gap: 15px;
	}

	.order-panel .btn--block {
		max-width: none;
		margin-top: 20px;
		min-height: 56px;
		font-size: 17px;
	}
}

/* ==========================================================================
   Profile
   ========================================================================== */

.profile {
	padding: 50px 0 100px;
}

/* Розміри з макета «Профілю користувача -1-1». */
.profile__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 0;
}

.profile__title {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 22px;
}

.profile__role {
	font-size: 18px;
	line-height: 25px;
	color: var(--text-muted);
}

.profile__head .btn {
	min-width: 125px;
	font-size: 20px;
}

.tabs {
	display: flex;
	gap: 50px;
	margin: 25px 0 30px;
	border-bottom: 1px solid var(--line-soft);
	overflow-x: auto;
}

.tabs__btn {
	position: relative;
	padding: 6px 0 22px;
	font-size: 18px;
	line-height: 22px;
	white-space: nowrap;
	color: var(--text);
	transition: color 0.2s;
}

.tabs__btn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--accent);
	opacity: 0;
}

.tabs__btn.is-active {
	color: var(--accent);
}

.tabs__btn.is-active::after {
	opacity: 1;
}

.profile__subtitle {
	margin: 30px 0 18px;
	font-size: 22px;
	font-weight: 800;
	line-height: 22px;
}

/* Рядок таблиці: 30px тексту і по 20px повітря між лініями (як у макеті). */
.dl {
	border-top: 1px solid var(--line-soft);
}

.dl__row {
	display: grid;
	grid-template-columns: 225px 1fr;
	padding: 20px 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 30px;
	border-bottom: 1px solid var(--line-soft);
}

.dl__row dt {
	color: var(--text);
}

.dl__row dd {
	margin: 0;
}

.status.is-approved {
	color: var(--accent);
}

.status.is-pending {
	color: var(--warning);
}

.status.is-rejected {
	color: var(--danger);
}

.profile__form {
	max-width: 620px;
	gap: 15px;
	margin-top: 20px;
}

/* Кнопка збереження у макеті — по вмісту, не на всю ширину. */
.profile__form .field--submit .btn {
	justify-self: start;
	width: auto;
	min-width: 190px;
}

.field {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 20px;
	align-items: center;
	font-size: 15px;
}

.field .input {
	min-height: 40px;
	padding: 8px 14px;
	font-size: 15px;
}

.field--submit {
	grid-template-columns: 1fr;
	margin-top: 10px;
}

.profile__form .form__message {
	padding: 14px 20px;
	border: 1px dashed;
	border-radius: var(--radius);
}

.profile__form .form__message.is-success {
	border-color: var(--accent);
}

.profile__form .form__message.is-error {
	border-color: var(--danger);
}

/* У макеті картки обраного 381 завширшки — три в ряд. */
.profile__favs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 20px;
}

.fav-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 10px 0;
	border-top: 1px solid var(--line);
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.fav-card__title {
	font-size: 17px;
	font-weight: 700;
}

.fav-card__meta {
	font-size: 14px;
	color: var(--text-muted);
}

.fav-card__actions {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.fav-card__actions .btn {
	flex: 1;
	min-height: 40px;
	padding: 8px 10px;
	font-size: 14px;
}

.profile__empty {
	margin-top: 20px;
	padding: 30px;
	font-size: 14px;
	text-align: center;
	color: var(--text-muted);
	background: var(--bg-alt);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
}

.requests__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 0;
	font-size: 16px;
	border-bottom: 1px solid var(--line-soft);
}

.requests__title {
	font-weight: 500;
}

/* ==========================================================================
   Auth pages (login / request / lost & reset password) + message boxes
   ========================================================================== */

.auth-page {
	padding: 50px 0 60px;
}

.auth-page--center {
	display: flex;
	align-items: center;
	min-height: 60vh;
}

.auth-page__card {
	border: 1px solid var(--line-soft);
	border-radius: 50px;
	overflow: hidden;
}

/* Shared two-column layout: info left, grey panel right */
.auth,
.request {
	display: grid;
	grid-template-columns: 1fr 580px;
	min-height: 825px;
	background: var(--bg-card);
	border-radius: 50px;
}

.modal__box--auth .auth {
	border: 1px solid var(--line-soft);
}

.auth__info,
.request__info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 60px 20px 60px 55px;
}

.auth__panel,
.request__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 52px;
	padding: 60px 65px;
	color: var(--text-on-dark);
	background-color: #2c2e32;
	border-radius: 50px;
}

/* Поля на темній панелі: без заливки, рамка #828282, білий текст. */
.auth__panel .input,
.request__panel .input {
	color: #fff;
	background: transparent;
	border-color: #828282;
}

.auth__panel .input::placeholder,
.request__panel .input::placeholder {
	color: #fff;
	opacity: 0.9;
}

/* Панель заявки: відступ 33px (а не 65, як у вході) — у макеті поля форми
   514px завширшки, саме за такої ширини чіпси ролей стають в один рядок. */
.request__panel {
	gap: 57px;
	padding-inline: 33px;
}

.request__panel .chip {
	background: #4b4b4b;
}

.auth__title,
.request__title {
	margin-bottom: 21px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.auth__text,
.request__text {
	max-width: 506px;
	margin-bottom: 39px;
	padding-bottom: 34px;
	font-size: 18px;
	font-weight: 500;
	line-height: 27px;
	border-bottom: 1px solid var(--line-soft);
}

.auth__roles,
.request__roles {
	display: flex;
	flex-direction: column;
	gap: 25px;
	max-width: 525px;
}

.auth__role,
.request__role {
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 23px;
	align-items: start;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.35;
}

.auth__role .icon,
.request__role .icon {
	width: 46px;
	height: 42px;
	margin-top: 4px;
	color: var(--accent);
}

.auth__role b,
.request__role b {
	display: block;
	margin-bottom: 10px;
	font-weight: 700;
}

/* Montserrat Light з Google Fonts ширший за версію у Figma приблизно на 9%
   (жирні накреслення збігаються, світле — ні). Компенсуємо трекінгом, інакше
   довгий опис ролі ламається на два рядки, а в макеті він в один. */
.auth__role span,
.request__role span {
	letter-spacing: -0.045em;
}

.auth__role:last-child,
.request__role:last-child {
	padding-top: 25px;
	border-top: 1px solid var(--line-soft);
}

.auth__illustration {
	display: flex;
	justify-content: center;
	color: var(--text-on-dark);
}

.auth__illustration .icon {
	width: 189px;
	height: 164px;
}

.auth__panel .btn--block {
	font-size: 20px;
}

/* Логотип у панелі заявки — реальний SVG з макета (324x55). */
.request__logo {
	display: block;
	width: 324px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Крок форми входу — 35 (у макеті 449x50 з проміжком 35). */
.auth__panel .form {
	gap: 35px;
}

/* Макет: від кнопки до рядка посилань 30px (крок форми — 35). */
.auth__panel .form__links {
	margin-top: -5px;
}

.request__panel .form {
	gap: 20px;
}

/* Вертикальні кроки з макета: підпис -> чіпси 11, чіпси -> перше поле 30,
   останнє поле -> кнопка 50. Базовий крок форми — 20. */
.request__panel .form__label + .chips {
	margin-top: -9px;
}

.request__panel .chips + .form__row {
	margin-top: 10px;
}

.request__panel .btn--block {
	min-height: 70px;
	margin-top: 30px;
	font-size: 20px;
}

/* Message boxes (lost password, success, error) */
/* Відступи сторінок з макета (шапка 75 + контент). */
.auth-page--message {
	padding: 122px 0 187px;
}

/* Сторінка помилки: у макеті свої відступи (без заголовка). */
.auth-page--message-error {
	padding-top: 137px;
}

.auth-page--message-error .message-box__icon {
	margin-bottom: 53px;
}

.auth-page--message-error .message-box__text {
	line-height: 1.6;
}

.auth-page--lost {
	padding: 135px 0 239px;
}

.auth-page--reset {
	padding: 153px 0 193px;
}

.message-box {
	max-width: 816px;
	margin: 0 auto;
	text-align: center;
}

/* Блок з формою (відновлення пароля) у макеті вужчий. */
.message-box--form {
	max-width: 517px;
}

.message-box .btn {
	width: 449px;
	max-width: 100%;
	font-size: 20px;
}

.message-box__icon {
	display: inline-flex;
	margin-bottom: 43px;
}

.message-box__icon .icon {
	width: 101px;
	height: 101px;
}

.message-box__icon--error .icon {
	width: 95px;
	height: 95px;
}

.message-box__icon--ok {
	color: var(--accent);
}

.message-box__icon--error {
	color: var(--danger);
}

.message-box__illustration {
	display: inline-flex;
	margin-bottom: 44px;
	color: var(--text);
}

.message-box__illustration .icon {
	width: 80px;
	height: 80px;
}

.message-box__illustration--lock .icon {
	width: 137px;
	height: 228px;
}

.message-box__title {
	margin-bottom: 35px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.message-box--form .message-box__title {
	margin-bottom: 21px;
}

.message-box__title--ok {
	color: var(--accent);
}

.message-box__lead {
	margin-bottom: 29px;
	font-size: 25px;
	line-height: 1.2;
	font-weight: 600;
}

.message-box__text {
	margin-bottom: 45px;
	font-size: 25px;
	line-height: 1.2;
}

/* На сторінці відновлення пароля підзаголовок дрібніший. */
.message-box--form .message-box__text {
	margin-bottom: 23px;
	font-size: 18px;
	line-height: 27px;
}

/* Мобільна хвиля макета (password-sent.html): @767 — лише варіанти,
   які рендерить тема (іконка ok + «Запит надіслано!» на сторінці замовлення). */
@media (max-width: 767px) {
	.message-box__icon {
		margin-bottom: 25px;
	}

	.message-box__icon .icon {
		width: 70px;
		height: 70px;
	}

	.message-box__title {
		margin-bottom: 20px;
		font-size: 26px;
	}

	.message-box__text {
		margin-bottom: 30px;
		font-size: 17px;
		line-height: 1.4;
	}

	.message-box .btn {
		width: 100%;
		font-size: 17px;
	}
}

.form--narrow {
	/* width потрібен: у grid-колонці `margin: 0 auto` інакше стискає форму по контенту. */
	width: 100%;
	max-width: 449px;
	margin: 0 auto;
	gap: 11px;
	text-align: left;
}

.form--narrow .input + .form__label,
.form--narrow .input-wrap + .form__label {
	margin-top: 12px;
}

.form__label--sm {
	font-size: 16px;
	line-height: 20px;
	font-weight: 300;
	color: var(--text);
}

.form--narrow .btn--block {
	margin-top: 19px;
	font-size: 20px;
}

/* Око «показати пароль» — 24x24, відступ 20 від правого краю поля. */
.input-wrap {
	position: relative;
}

.input-wrap .input {
	padding-right: 54px;
}

.input-eye {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 24px;
	height: 24px;
	transform: translateY(-50%);
	color: #a7a9ac;
}

.input-eye .icon {
	width: 24px;
	height: 24px;
}

.input-eye .icon-eye-off,
.input-eye.is-on .icon-eye-show {
	display: none;
}

.input-eye.is-on .icon-eye-off {
	display: block;
}

.reset {
	display: grid;
	grid-template-columns: 373px 449px;
	gap: 190px;
	align-items: center;
	max-width: 1012px;
	margin: 0 auto;
}

.reset__illustration {
	display: flex;
	justify-content: center;
	color: var(--text);
}

.reset__illustration .icon {
	width: 100%;
	max-width: 373px;
	height: auto;
}

.reset__title {
	margin-bottom: 32px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}

/* ==========================================================================
   Single service page: details + order form
   ========================================================================== */

.service-page .doc-modal {
	margin-bottom: 60px;
}

/* Тема-єдиний модифікатор (у макеті нема): послуга поки без файлів/прев'ю,
   права колонка .doc-modal__preview не рендериться — бокс в одну колонку,
   info на всю ширину (див. single-ekc_service.php). */
.doc-modal--single {
	grid-template-columns: minmax(0, 1fr);
}

.service-page__order {
	max-width: 730px;
	margin: 0 auto;
	padding: 40px;
	background: var(--bg-alt);
	border-radius: var(--radius-xl);
}

/* Попап «Замовити послугу» (фрейм Сервіси-4-3): картка 1181x825,
   як у входу та заявки, форма 514 по центру. */
.order {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 825px;
	text-align: center;
}

.order__title {
	margin-bottom: 21px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.order__text {
	margin-bottom: 40px;
	font-size: 18px;
	font-weight: 500;
	line-height: 27px;
}

.order .form {
	gap: 20px;
	max-width: 514px;
	margin: 0 auto;
	text-align: left;
}

.order .btn--block {
	margin-top: 30px;
	min-height: 70px;
	font-size: 20px;
}

@media (max-width: 1023px) {
	.order {
		min-height: 0;
	}
}

.order .btn--block {
	max-width: 449px;
	min-height: 70px;
	margin: 10px auto 0;
	font-size: 20px;
}

/* ==========================================================================
   404 + generic page
   ========================================================================== */

.error-page {
	padding: 183px 0 185px;
}

.error-page__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 58px;
}

.error-page__art {
	flex: none;
	width: 584px;
	max-width: 100%;
	color: var(--text);
}

.error-page__body {
	width: 517px;
	max-width: 100%;
	text-align: center;
}

.error-page .btn {
	width: 449px;
	max-width: 100%;
	font-size: 20px;
}

.error-page__art .icon {
	width: 100%;
	height: auto;
}

.error-page__title {
	margin-bottom: 26px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	/* Figma рендерить цей рядок на ~5% вужче; без трекінгу він переноситься. */
	letter-spacing: -0.012em;
}

.error-page__text {
	margin-bottom: 33px;
	font-size: 18px;
	color: var(--text-muted);
}

.content-page {
	padding: 60px 0 100px;
}

.content-page__title {
	margin-bottom: 30px;
	font-size: 40px;
	font-weight: 700;
}

.prose {
	font-size: 18px;
	line-height: 1.6;
}

.prose p,
.prose ul,
.prose ol {
	margin-bottom: 1em;
}

.prose ul {
	padding-left: 1.2em;
	list-style: disc;
}

.prose ol {
	padding-left: 1.2em;
	list-style: decimal;
}

.prose h2,
.prose h3 {
	margin: 1.5em 0 0.6em;
	font-weight: 700;
}

.prose a {
	color: var(--accent);
	text-decoration: underline;
}

.prose img {
	border-radius: var(--radius-lg);
}

/* ==========================================================================
   Responsive: services / calc / profile / auth
   ========================================================================== */

@media (max-width: 1279px) {
	.auth,
	.request {
		grid-template-columns: 1fr 460px;
	}

	/* Відхилення від макета (фіксу його власного багу): фіксовані колонки
	   580/550 (+49 gap = 1179px) не влазять у контейнер 1024–1279 — панель
	   форми «Швидкий прорахунок» вилазить за край сторінки й обрізається
	   (body приховує горизонтальну прокрутку). Колонки стискаються частками
	   з пропорцією макета ~50/50, десктоп ≥1280 не зачеплений. */
	.quick-calc {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.auth__info,
	.request__info {
		padding: 60px 20px 40px 40px;
	}

	.auth__panel,
	.request__panel {
		padding: 50px 35px;
	}
}

@media (max-width: 1023px) {
	.services,
	.calc,
	.profile {
		padding: 30px 0 60px;
	}

	.services__grid,
	.steps {
		grid-template-columns: 1fr 1fr;
	}

	.hero--services .hero__title,
	.hero--calc .hero__title {
		font-size: 40px;
		line-height: 50px;
	}

	.hero--services .hero__subtitle,
	.hero--services .hero__text,
	.hero--calc .hero__text {
		font-size: 20px;
		line-height: 30px;
	}

	.quick-calc {
		grid-template-columns: 1fr;
		gap: 40px;
		margin-top: 50px;
		padding-top: 50px;
	}

	/* На вузьких екранах картинка стає в потік, а не праворуч абсолютом. */
	.quick-calc__media {
		position: static;
		width: 100%;
		max-width: 456px;
		margin: 0 auto 30px;
	}

	.quick-calc__title {
		font-size: 30px;
	}

	.auth,
	.request {
		grid-template-columns: 1fr;
		min-height: 0;
		border-radius: 30px;
	}

	.auth-page__card {
		border-radius: 30px;
	}

	.auth__info,
	.request__info {
		padding: 40px 20px 30px;
	}

	.auth__panel,
	.request__panel {
		gap: 25px;
		padding: 35px 20px;
		border-radius: 30px;
	}

	.auth__title,
	.request__title {
		font-size: 24px;
		margin-bottom: 16px;
	}

	/* Мобільна адаптація попапів входу/заявки (у макеті їх немає). */
	.auth__panel,
	.request__panel {
		gap: 28px;
		padding: 28px 20px 32px;
	}

	.auth__illustration .icon {
		width: 132px;
		height: 115px;
	}

	.request__logo {
		width: 240px;
	}

	.auth__text,
	.request__text {
		margin-bottom: 26px;
		padding-bottom: 22px;
		font-size: 15px;
		line-height: 22px;
	}

	.auth__roles,
	.request__roles {
		gap: 18px;
	}

	.auth__role:last-child,
	.request__role:last-child {
		padding-top: 18px;
	}

	.request__panel .btn--block,
	.auth__panel .btn--block {
		min-height: 56px;
		font-size: 17px;
	}

	.reset {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.error-page__inner {
		flex-direction: column;
		text-align: center;
	}

	.error-page__art {
		width: 100%;
		max-width: 420px;
	}
}

@media (max-width: 767px) {
	.services__tabs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		margin-bottom: 30px;
	}

	.services__tabs .chip {
		min-height: 44px;
		padding: 8px 10px;
		font-size: 13px;
		line-height: 17px;
		text-align: center;
		white-space: normal;
	}

	.services__group-title {
		font-size: 22px;
		gap: 12px;
	}

	.services__group-icon {
		width: 52px;
	}

	.services__group-icon .icon {
		width: auto;
		height: 28px;
	}

	.services__grid,
	.steps {
		grid-template-columns: 1fr;
	}

	.service-card__head {
		height: auto;
		min-height: 84px;
		gap: 15px;
		padding: 15px 0;
	}

	.service-card__icon {
		width: 44px;
		height: 44px;
	}

	.service-card__icon .icon {
		width: auto;
		height: 30px;
	}

	.service-card__title {
		font-size: 18px;
	}

	.service-card__result {
		min-height: 0;
	}

	.service-card__actions {
		flex-direction: column;
	}

	.service-card__actions .btn,
	.service-card__actions .btn--outline {
		width: 100%;
	}

	.quick-calc__chips .chip {
		min-height: 42px;
		max-width: 175px;
		padding: 8px 12px;
		font-size: 15px;
		line-height: 20px;
	}

	.quick-calc__title {
		margin-bottom: 16px;
		font-size: 26px;
		line-height: 34px;
	}

	.quick-calc__text {
		margin-bottom: 24px;
		font-size: 17px;
		line-height: 24px;
	}

	.quick-calc__media {
		margin-bottom: 24px;
	}

	.quick-calc__form {
		padding: 20px 15px;
		border-radius: 30px;
	}

	/* Банер послуг на мобільному щільніший за загальний .hero--page
	   (макет: заголовок 30/38 з відступом 7, тексти 17/24 і 15/20). */
	.hero--services .hero__title {
		margin-bottom: 7px;
		font-size: 30px;
		line-height: 38px;
	}

	.hero--services .hero__subtitle {
		font-size: 17px;
		line-height: 24px;
	}

	.hero--services .hero__text {
		font-size: 15px;
		line-height: 20px;
	}

	/* Калькулятори на мобільному (макет 3331–3409, 3441–3452). */
	.hero--calc .hero__title {
		margin-bottom: 14px;
		font-size: 30px;
		line-height: 38px;
	}

	.hero--calc .hero__text {
		font-size: 15px;
		line-height: 22px;
	}

	.calc {
		padding: 30px 0 55px;
	}

	.steps {
		gap: 12px;
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.step {
		height: auto;
		min-height: 72px;
		gap: 15px;
		padding: 12px 0;
	}

	.step__num {
		width: 44px;
		height: 44px;
		font-size: 20px;
	}

	.step__text {
		font-size: 16px;
		line-height: 20px;
	}

	.calc__filter-title {
		margin-bottom: 12px;
		font-size: 18px;
	}

	.calc__tasks {
		gap: 10px;
		margin-bottom: 30px;
	}

	.calc__tasks .chip {
		min-height: 40px;
		padding: 8px 12px;
		font-size: 14px;
		line-height: 18px;
	}

	.calc__group + .calc__group {
		margin-top: 30px;
		padding-top: 30px;
	}

	.calc-card__badge {
		font-size: 13px;
		line-height: 20px;
	}

	.calc-card .service-card__text {
		min-height: 0;
	}

	.calc-card .service-card__actions .btn {
		max-width: none;
	}

	.calc__note {
		padding-top: 30px;
		font-size: 15px;
		line-height: 22px;
	}

	.hero__actions--toggle {
		flex-direction: column;
		gap: 12px;
		margin-top: 26px;
	}

	.hero__actions--toggle .btn {
		width: 100%;
		min-width: 0;
		min-height: 46px;
		font-size: 16px;
	}

	.profile__head {
		flex-direction: column;
	}

	.tabs {
		gap: 18px;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
	}

	.tabs__btn {
		font-size: 14px;
	}

	.dl__row,
	.field {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.auth__role,
	.request__role {
		grid-template-columns: 36px 1fr;
		gap: 15px;
	}

	.auth__role .icon,
	.request__role .icon {
		width: 36px;
		height: 34px;
	}

	.service-page__order {
		padding: 25px 15px;
	}

	.order__title {
		font-size: 22px;
	}

	.order .btn--block {
		min-height: 56px;
		font-size: 17px;
	}

	.content-page__title {
		font-size: 28px;
	}
}