/* Оформление первого экрана страниц раздела «Тихие стены».
   Затемняющий градиент под текстом + светлая типографика,
   чтобы заголовок читался на светлых фото. Изолировано классом .s-steny-hero. */

.s-steny-hero {
	position: relative;
}

.s-steny-hero:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg,
		rgba(18, 20, 28, 0.78) 0%,
		rgba(18, 20, 28, 0.62) 38%,
		rgba(18, 20, 28, 0.22) 66%,
		rgba(18, 20, 28, 0) 100%);
	z-index: 0;
	pointer-events: none;
}

.s-steny-hero > .container {
	position: relative;
	z-index: 1;
}

.s-steny-hero .h1-block h1,
.s-steny-hero .h1-block .descr p,
.s-steny-hero .descr-h1 .item p,
.s-steny-hero .descr-h1 .item p strong {
	color: #fff !important;
}

.s-steny-hero .h1-block h1 {
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.s-steny-hero .h1-block h1 .color {
	color: #57c7e6 !important;
}

/* Читаемое меню поверх фотографий первого экрана. */
.nohome header .navigation {
	padding: 12px 20px;
	border-radius: 8px;
	background: rgba(18, 20, 28, 0.58);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.nohome header .navigation > nav > ul > li > a,
.nohome header .navigation > nav > ul > li > .f-l {
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}

/* Контраст формы на первом экране страницы «Тканевые стены». */
.page-tkanevie-steny .s-steny-hero .wrap-form {
	background: rgba(18, 20, 28, 0.84);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.page-tkanevie-steny .s-steny-hero .form-title p,
.page-tkanevie-steny .s-steny-hero .form-item label > span,
.page-tkanevie-steny .s-steny-hero .check-block label span,
.page-tkanevie-steny .s-steny-hero .check-block label span a {
	color: #fff !important;
}

.s-why-select.s-steny-photo:before {
	background-image:
		linear-gradient(90deg, #f2f2f2 0%, rgba(242, 242, 242, 0.72) 10%, rgba(242, 242, 242, 0) 32%),
		var(--steny-section-photo) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

/* Одинаковый размер всех шести плашек блока «Причины выбрать…». */
.s-reasons-select .wrap-items {
	align-items: stretch;
}

.s-reasons-select .item {
	display: flex;
}

.s-reasons-select .item .wrap {
	box-sizing: border-box;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	height: 180px;
}

.s-reasons-select .item .num {
	margin-top: auto;
}

@media (max-width: 767px) {
	.s-reasons-select .item .wrap {
		height: auto;
		min-height: 160px;
	}
}

/* Одинаковый размер плашек блока «Как мы работаем». */
.s-steps-select .wrap-items {
	align-items: stretch;
}

.s-steps-select .item {
	display: flex;
}

.s-steps-select .item .wrap {
	box-sizing: border-box;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	height: 180px;
}

.s-steps-select .item .num {
	margin-top: auto;
}

@media (max-width: 767px) {
	.s-steps-select .item .wrap {
		height: auto;
		min-height: 160px;
	}
}

/* Единое чередование карточек в блоке связанных решений. */
.s-types .wrap-more-slider .item .img {
	display: block;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.s-types .wrap-more-slider .item:nth-child(odd) .img {
	aspect-ratio: 3 / 2;
}

.s-types .wrap-more-slider .item:nth-child(even) .img {
	aspect-ratio: 2 / 3;
}

.s-types .wrap-more-slider .item .img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 767px) {
	.s-types .wrap-more-slider .item .img {
		aspect-ratio: 3 / 2;
	}
}

/* На планшете/мобильном форма уходит вниз — делаем затемнение
   равномернее, чтобы текст читался по всей ширине. */
@media (max-width: 991px) {
	.s-steny-hero:before {
		background: linear-gradient(180deg,
			rgba(18, 20, 28, 0.7) 0%,
			rgba(18, 20, 28, 0.55) 60%,
			rgba(18, 20, 28, 0.5) 100%);
	}
}

/* Читаемая шапка поверх тёмных фотографий пяти посадочных страниц. */
.header:before {
	display: none;
}

.header .logo img,
.header .left-part .loo-mob img {
	-webkit-filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.95))
		drop-shadow(0 1px 2px rgba(255, 255, 255, 0.8));
	filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.95))
		drop-shadow(0 1px 2px rgba(255, 255, 255, 0.8));
}

.header .phone a {
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.65);
}

@media (min-width: 992px) {
	.header .navigation {
		padding: 18px 30px;
		background: rgba(18, 20, 28, 0.9);
		border-radius: 10px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	}

	.header .navigation > nav > ul > li > a,
	.header .navigation > nav > ul > li > .f-l {
		color: #fff;
	}

	.header .navigation > nav > ul > li > .f-l:before {
		-webkit-filter: invert(1);
		filter: invert(1);
	}

	.header .navigation .dropdown-second a {
		color: #363740;
	}
}

@media (max-width: 768px) {
	.nohome .s-steny-hero .section-wrap:before,
	.header:before {
		display: none;
	}

	.header .container {
		padding-left: 10px;
		padding-right: 10px;
	}

	.header .row-first {
		min-height: 76px;
		margin: 0;
		padding: 10px 58px 10px 14px;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}

	.header .left-part {
		width: 100%;
		margin-top: 0;
		padding: 0;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		gap: 12px;
	}

	.header .left-part .loo-mob {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
	}

	.header .left-part .loo-mob img {
		display: block;
		width: 136px;
		height: auto;
	}

	.header .left-wrap {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
	}

	.header .phone {
		margin-right: 0;
		font-size: 16px;
		font-weight: 600;
	}

	.header .phone a {
		color: #fff;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.65);
	}

	.header .mobil-mnu,
	.header.fixed .mobil-mnu {
		top: 46px;
		right: 24px;
	}
}

@media (max-width: 390px) {
	.header .row-first {
		padding-left: 10px;
		padding-right: 52px;
	}

	.header .left-part {
		gap: 8px;
	}

	.header .left-part .loo-mob img {
		width: 112px;
	}

	.header .phone {
		font-size: 14px;
	}

	.header .mobil-mnu,
	.header.fixed .mobil-mnu {
		right: 20px;
	}
}