/* =====================================================================
   Ресурс-Аква — адаптивность + лёгкая полировка
   Файл подключается ПОСЛЕ styles.css и style.css.
   Десктоп-концепция и все изображения сохранены.
   Блок 1: аккуратные улучшения (все экраны)
   Блок 2: планшеты  (max-width: 1000px)
   Блок 3: телефоны  (max-width: 640px / 400px)
   Блок 4: мобильные элементы (герой, схемы, панель звонка, попапы)
   ===================================================================== */

/* ----------------------------------------------------------------
   БЛОК 1. Мягкая полировка — не меняет раскладку десктопа
   ---------------------------------------------------------------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

img { max-width: 100%; }

/* Защита от горизонтального переполнения длинными строками на узких экранах */
h1.tel, h2.tel, .main-title, .title, .form-title, .construction > div, .questions-main > div > div {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Кнопки: плавность + приятное поведение при наведении (цвет/размер прежние) */
.btn {
	border-radius: 8px;
	transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(10,107,163,.28); }
.btn:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(10,107,163,.25); }

/* Поля ввода: заметный, но спокойный фокус */
.form-style input[type="text"] { transition: border-color .2s ease, box-shadow .2s ease; }
.form-style input[type="text"]:focus {
	border-color: #0e7db8 !important;
	box-shadow: 0 0 0 3px rgba(26,144,207,.18);
}

/* Отзывы: слайдер не инициализируется — убираем маркеры списка,
   оформляем как аккуратную сетку карточек */
#slider, #slider > li { list-style: none; }

/* Микровзаимодействия для «Как мы работаем» и «Виды работ» */
.steps-main > div img { transition: transform .2s ease; }
.steps-main > div:hover img { transform: translateY(-5px) scale(1.05); }
.works-types-main img { border-radius: 6px; transition: transform .25s ease, box-shadow .25s ease; }
.works-types-main > div:hover img { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,.14); }

/* Попапы скрыты по умолчанию (иначе при сбое JS они «протекают» в вёрстку
   и растягивают страницу). Показываются через .open-popup или fadeIn (inline display). */
.popup { display: none; }

/* Надёжное центрирование попапа-заявки на любом экране */
.popup.open-popup {
	position: fixed;
	left: 0 !important;
	top: 0 !important;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 16px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.55);
	overflow: auto;
	box-sizing: border-box;
}

/* Мобильные элементы по умолчанию скрыты (десктоп их не показывает) */
.m-hero, .m-callbar { display: none; }


/* ================================================================
   БЛОК 2. ПЛАНШЕТЫ  ≤ 1000px  — превращаем фикс. 940px в резину
   ================================================================ */
@media (max-width: 1000px) {

	body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); } /* место под липкую панель звонка + вырез снизу */

	.inner {
		width: auto;
		max-width: 740px;
		margin: 0 auto;
		padding: 0 18px;
		box-sizing: border-box;
	}

	/* ---------- Шапка / герой ---------- */
	.main {
		background-image: none;
		background: linear-gradient(180deg, #d7e9f2 0%, #e9f3f6 62%);
		padding-bottom: 30px;
		box-shadow: 0 2px 10px rgba(15,43,58,.10);
	}
	.top { text-align: center; }
	.logo {
		float: none;
		justify-content: center;
		font-size: 32px;
		padding-top: 16px;
		gap: 12px;
	}
	.logo img { width: 60px; height: auto; }
	.call {
		float: none;
		text-align: center;
		padding: 14px 0 0;
	}
	.call .btn { position: relative; }
	.call .btn:before { display: none; } /* декоративная иконка не нужна по центру */
	.call p { margin: 6px 0 12px; }

	h1.tel {
		margin-top: 18px;
		font-size: 26px;
		line-height: 1.25;
	}

	/* Баннер-герой (разрез земли с буровой) вместо фонового наложения */
	.m-hero {
		display: block;
		height: 200px;
		margin: 16px 0 6px;
		border-radius: 16px;
		background: url(../images/bg1.webp) no-repeat center 42%;
		background-size: cover;
		box-shadow: 0 10px 26px rgba(15,43,58,.20);
	}

	.main-title {
		margin: 22px 0 10px;
		line-height: 1.35;
		font-size: 19px;
	}
	.main-title span { font-size: 26px; }
	h2.tel { font-size: 26px; margin-bottom: 22px; }

	.done { margin-bottom: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
	.done span { margin: 0; padding-left: 4px; }

	/* ---------- Акция + форма ---------- */
	.share { text-align: center; }
	.share > div, .share > form { display: block; }
	.share > div { width: auto; max-width: 520px; margin: 0 auto; }
	.share > div:after { display: none; } /* стрелка между блоками */
	.share > form.form-style { margin: 26px auto 0; }

	/* ---------- Формы (общее) ---------- */
	.form-style {
		width: 100%;
		max-width: 380px;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}
	.form-style input[type="text"] {
		width: 100%;
		max-width: 300px;
		box-sizing: border-box;
		height: 40px;
	}
	.form-style .btn { width: 100%; max-width: 300px; height: 46px; line-height: 44px; }
	.days form input[type="text"],
	.form-slide form input[type="text"] { margin-right: auto; }
	.days .form-style, .form-slide .form-style { width: 100%; max-width: 520px; margin: 30px auto; }

	/* ---------- Почему нас выбирают ---------- */
	.why { padding: 44px 0 30px; }
	.why ul { margin: 0; }
	.why li { margin-bottom: 16px; }

	/* ---------- Заголовки / подзаголовки ---------- */
	.title { font-size: 26px; line-height: 1.3; margin-bottom: 24px; }
	.subtitle, .subtitle2 { margin: 0 0 22px; height: auto; }

	/* ---------- Как мы работаем ---------- */
	.steps { padding: 44px 0 20px; background-size: cover; }
	.line { background: none; }
	.steps-main { display: flex; flex-wrap: wrap; justify-content: center; }
	.steps-main > div { width: 33.33%; margin: 0 0 22px; padding: 0 8px; box-sizing: border-box; }

	/* ---------- Скважины: схема + преимущества ---------- */
	.well1, .well11 { padding: 40px 0 44px; }
	.well1 .inner, .well11 .inner { background: none !important; }
	/* снимаем жёсткую высоту 40px — иначе текст вылезает и картинка наезжает на него */
	.well1 .subtitle2, .well11 .subtitle2 { height: auto; }
	.compare { margin: 0 !important; }
	.compare > div { width: 100% !important; margin-right: 0; }
	.compare-title { font-size: 20px; }
	.green li:after, .red li:after { width: 100%; background-size: cover; }

	/* ---------- Заявка (days) ---------- */
	.days { padding: 40px 0 10px; }
	.days .form-title { margin-bottom: 26px; }

	/* ---------- Отзывы ---------- */
	.comments {
		background-size: cover;
		min-height: 0;
		padding: 50px 0 40px;
	}
	.comments .title { margin-bottom: 24px; }
	#slider { width: 100% !important; margin: 0 auto; }
	.comments li { width: auto; padding: 0; }
	.comments li > div {
		width: 100%;
		display: block;
		vertical-align: top;
		margin: 0 0 26px !important;
	}
	.comments li > div:first-child { margin-right: 0; }
	.comments li p { width: auto; box-sizing: border-box; }
	.name { width: auto; }

	/* ---------- Виды работ ---------- */
	.works-types { padding-bottom: 44px; }
	.works-types-main { text-align: center; }
	.works-types-main > div { display: block; width: 100%; max-width: 320px; margin: 0 auto 24px; }
	.works-types-main > div:last-child { margin-bottom: 0; }
	.work-type-title:after { left: 50%; margin-left: -6px; }
	.p-bot { padding: 26px 6px 0; text-align: center; font-size: 16px; }

	/* ---------- Вопросы ---------- */
	.questions { padding-bottom: 24px; background-size: cover; }
	.questions-main > div { margin-bottom: 30px; }
	.questions-main > div > div { font-size: 20px; line-height: 1.35; }
	.questions-main span { vertical-align: top; }

	/* ---------- Форма-слайд + галерея ---------- */
	.form-slide { padding: 40px 0 34px; }
	.form-slide .container, .form-slide .main1, .gamma-container { width: auto; max-width: 100%; }
	.form-slide .subtitle2, .form-slide .form-title { margin-left: auto; margin-right: auto; }
	.title-bottom { margin-top: 10px; }

	/* ---------- Карта / контакты ---------- */
	.map { padding: 44px 0 50px; }
	.map-wrap { display: block; max-width: 100%; }
	.map-wrap iframe,
	.map-wrap ymaps,
	.map-wrap > * { width: 100% !important; max-width: 100%; }
	.adress { width: auto; margin: 26px 0 0; display: block; }
	.adress > div { margin-bottom: 24px; }

	/* ---------- Липкая панель звонка ---------- */
	.m-callbar {
		display: flex;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 99999;
		gap: 8px;
		padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
		background: rgba(255,255,255,.97);
		box-shadow: 0 -6px 20px rgba(15,43,58,.16);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}
	.m-call-btn {
		flex: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 13px 8px;
		border-radius: 11px;
		font: 16px 'GothamPro-Bold', Arial, sans-serif;
		text-decoration: none;
		cursor: pointer;
		line-height: 1;
		transition: transform .15s ease, box-shadow .15s ease;
	}
	.m-call-btn:active { transform: translateY(1px); }
	.m-call-phone { background: linear-gradient(180deg,#1690c8,#0a6ba3); color: #fff; box-shadow: 0 4px 12px rgba(10,107,163,.30); }
	.m-call-request { background: #0f2b3a; color: #fff; box-shadow: 0 4px 12px rgba(15,43,58,.28); }
	.m-ico { width: 18px; height: 18px; flex: none; display: block; }

	/* ---------- Попапы под мобильный экран ---------- */
	.popup .popup-content .form-style,
	.popup.open-popup .form-style { width: 100%; max-width: 340px; }

	#popup2 {
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%);
		width: 94vw !important;
		max-width: 640px;
		margin: 0 !important;
		box-sizing: border-box;
	}
	#popup2 .popup-content {
		width: 100% !important;
		max-width: 100%;
		height: 82vh;
		box-sizing: border-box;
		padding: 22px 14px;
	}
	#popup2 .btn-close { right: 6px !important; top: 6px !important; }
	.pol { height: auto; max-height: calc(82vh - 52px); padding-right: 12px; box-sizing: border-box; }
	.for-indent { padding-left: 18px; }

	#popup12 {
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%);
		width: 92vw;
		max-width: 360px;
	}
	#popup12 .popup-content { width: 100%; box-sizing: border-box; padding: 26px 18px; }
}


/* ================================================================
   БЛОК 3. ТЕЛЕФОНЫ  ≤ 640px
   ================================================================ */
@media (max-width: 640px) {

	.inner { padding: 0 14px; }

	.logo { font-size: 27px; }
	.logo img { width: 52px; }

	/* Крупные телефоны-ссылки (.tel = 50px по умолчанию) — ужимаем */
	.tel { font-size: 30px; line-height: 1.2; }
	h1.tel { font-size: 22px; margin-top: 14px; }
	h2.tel { font-size: 22px; }
	.call .tel { font-size: 17px; }

	.m-hero { height: 168px; border-radius: 14px; }

	.main-title { font-size: 17px; }
	.main-title span { font-size: 23px; }

	.done { gap: 8px 20px; }
	.done span { font-size: 16px; }

	.share > div > div { font-size: 27px; }
	.share > div p { font-size: 17px; }

	.title { font-size: 22px; }
	.list-ul { font-size: 16px; }
	.subtitle2 { font-size: 16px !important; }

	/* Шаги: две колонки на телефоне */
	.steps-main > div { width: 50%; }

	.form-title span { font-size: 21px; }

	.questions-main ul { padding: 10px 14px; }
	.questions-main > div > div { font-size: 18px; }

	.comments li p { font-size: 15px; }
	.name { font-size: 20px; }

	.footer { padding: 24px 14px; }
	.footer p { margin-bottom: 10px; }

	#popup2 .popup-content { padding: 20px 12px; }
}

/* Очень узкие экраны ≤ 380px */
@media (max-width: 380px) {
	.logo { font-size: 23px; gap: 9px; }
	.logo img { width: 46px; }
	.tel { font-size: 26px; }
	h1.tel { font-size: 20px; }
	h2.tel { font-size: 20px; }
	.main-title span { font-size: 21px; }
	.m-hero { height: 150px; }
	.steps-main > div { padding: 0 5px; }
	.m-call-btn { font-size: 15px; padding: 12px 6px; }
}


/* ================================================================
   БЛОК 4. Крафт-полировка — доступность, состояния, детали
   ================================================================ */

/* Выделение текста в фирменном зелёном */
::selection { background: rgba(41,165,205,.28); color: #08303f; }

/* Чистые тач-нажатия без серого мигания */
a, .btn, input[type="submit"], .m-call-btn, .click-me, .click-me2, .btn-close {
	-webkit-tap-highlight-color: transparent;
}

/* Видимый фокус для клавиатуры (для мыши не появляется) */
a:focus-visible,
.btn:focus-visible,
input[type="submit"]:focus-visible,
.m-call-btn:focus-visible,
.click-me:focus-visible,
.click-me2:focus-visible {
	outline: 3px solid #0a6ba3;
	outline-offset: 2px;
	border-radius: 6px;
}
.form-style input[type="text"]:focus-visible { outline: 2px solid #0e7db8; outline-offset: 1px; }

/* Контраст: мелкий вспомогательный текст доводим до AA */
.safe { color: #5a6a72; }
.footer a { color: #d7e6ec; }

/* Уважение к системной настройке «меньше движения» */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
	}
	.btn:hover, .btn:active,
	.steps-main > div:hover img,
	.works-types-main > div:hover img,
	.m-call-btn:active { transform: none !important; }
}


/* ================================================================
   БЛОК 5. Схемы скважин, кессон, станция биоочистки, карточки услуг
   ================================================================ */

/* ---------- Секции скважин: схема слева, факты справа ---------- */
.well-cols { display: flex; gap: 36px; align-items: flex-start; text-align: left; }
.well-scheme { flex: 0 0 420px; max-width: 420px; }
.well-scheme img { display: block; width: 100%; height: auto; }
.well-facts { flex: 1 1 auto; min-width: 0; }

.facts { list-style: none; margin: 0 0 26px; padding: 0; }
.facts li {
	position: relative;
	margin: 0 0 15px;
	padding-left: 30px;
	font-size: 17px;
	line-height: 1.45;
}
.facts li b { font-family: 'GothamPro-Bold'; font-weight: normal; color: #0a5c8c; }
.facts li:before {
	content: "";
	position: absolute;
	left: 3px; top: 3px;
	width: 7px; height: 13px;
	border: solid #0e7db8;
	border-width: 0 3px 3px 0;
	transform: rotate(43deg);
}

/* ---------- Ряд фотографий под секцией ---------- */
.photo-row {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 28px;
	text-align: left;
}
.photo-row figure { flex: 1 1 210px; margin: 0; }
.photo-row img {
	display: block;
	width: 100%; height: auto;
	border-radius: 9px;
	box-shadow: 0 7px 20px rgba(15,43,58,.16);
}
.photo-row figcaption {
	margin-top: 9px;
	font-size: 14px;
	line-height: 1.35;
	color: #46606d;
}

/* ---------- Кессон и станция биологической очистки ---------- */
.service { background: #fff; padding: 58px 0 62px; }
.service + .service { border-top: 1px solid #dcebf3; }
.service .subtitle2 { margin: 0 0 28px; height: auto; }
.service-cols { display: flex; gap: 36px; align-items: flex-start; text-align: left; }
.service-cols .facts { flex: 1 1 300px; min-width: 0; margin-bottom: 0; }

.brands {
	display: inline-block;
	margin: 0 0 28px;
	padding: 11px 22px;
	border-radius: 8px;
	background: #e2f1f9;
	color: #0a5c8c;
	font-family: 'GothamPro-Bold';
	font-size: 17px;
	letter-spacing: .03em;
}

/* ---------- Карточки услуг ---------- */
.works-types-main { display: flex; flex-wrap: wrap; gap: 20px; text-align: left; }
.works-types-main > .work-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 210px;
	width: auto; max-width: none;
	margin: 0;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 7px 22px rgba(15,43,58,.13);
	transition: transform .2s ease, box-shadow .2s ease;
}
.works-types-main > .work-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15,43,58,.18); }
.work-card img {
	display: block;
	width: 100%; height: 168px;
	object-fit: cover;
	border-radius: 0;
}
.works-types-main > .work-card:hover img { transform: none; box-shadow: none; }
.work-card .work-type-title {
	margin: 0;
	padding: 13px 15px;
	border-radius: 0;
	font-size: 18px;
	line-height: 1.25;
	text-align: left;
}
.work-card .work-type-title:after { display: none; }
.work-card p {
	margin: 0;
	padding: 13px 15px 17px;
	font-size: 15px;
	line-height: 1.42;
	color: #2f4c5a;
}

/* ---------- Планшеты и телефоны ---------- */
@media (max-width: 1000px) {
	.well-cols, .service-cols { display: block; }
	.well-scheme { max-width: 420px; margin: 0 auto 24px; }
	.service-cols .facts + .facts { margin-top: 15px; }
	.facts { margin-bottom: 22px; }
	.service { padding: 44px 0 46px; }
	.photo-row { gap: 14px; margin-top: 22px; }
	.photo-row figure { flex: 1 1 calc(50% - 7px); }
	.works-types-main { gap: 16px; }
	.works-types-main > .work-card { flex: 1 1 calc(50% - 8px); }
	.work-card img { height: 150px; }
}

@media (max-width: 640px) {
	.facts li { font-size: 16px; padding-left: 27px; }
	.photo-row figcaption { font-size: 13px; }
	.brands { font-size: 15px; padding: 10px 16px; }
	.work-card .work-type-title { font-size: 16px; padding: 11px 12px; }
	.work-card p { font-size: 14px; padding: 11px 12px 14px; }
	.work-card img { height: 122px; }
}

@media (max-width: 380px) {
	.works-types-main > .work-card { flex: 1 1 100%; }
	.work-card img { height: 160px; }
	.photo-row figure { flex: 1 1 100%; }
}

/* ---------- Мелкая доводка после сборки ---------- */

/* Номер вопроса и текст в одну строку — текст больше не заезжает под кружок */
.questions-main > div > div { display: flex; align-items: center; gap: 11px; }
.questions-main > div > div span { flex: none; margin-right: 0; }

@media (max-width: 1000px) {
	/* Галочка в строке «Без предоплаты · 3000 руб./м.п.» не налезает на соседний пункт */
	.done span { padding-left: 22px; }
	.done span:before { left: 0; }

	/* Фото в ряду держат половину ширины, последний кадр не растягивается на весь экран */
	.photo-row figure { flex: 0 1 calc(50% - 7px); }
}

/* ---------- Основной текст ----------
   demo.css (подключается через @import из style.css) переопределял тело
   страницы на Lato 300 / 15px / #333 — отсюда «бледно-серый» текст.
   Хуже того, Lato грузился без кириллицы: латинские буквы рисовались Lato,
   русские — подстановочным Calibri/Arial, и внутри одного слова прыгали
   и начертание, и ширина. Возвращаем фирменный GothamPro (лежит в fonts/,
   кириллица полная), нормальное начертание, размер и контрастный цвет. */
body {
	font-family: 'GothamPro', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: #16323f;
}
.subtitle, .subtitle2, .p-bot, .questions-main ul, .compare li, .adress p, .list-ul {
	color: #16323f;
}
.compare li { color: #fff; }

/* Заголовки карточек услуг выравниваем по высоте: в GothamPro часть названий
   переносится на две строки, и плашки без этого получались разной высоты */
.work-card .work-type-title {
	display: flex;
	align-items: center;
	min-height: 72px;
	box-sizing: border-box;
}
@media (max-width: 640px) {
	.work-card .work-type-title { min-height: 62px; }
}