/*!
Theme Name: Creamel
Theme URI: http://underscores.me/
Author: Serhii Ivanov
Author URI: https://koyot.info
Description: Theme by Serhii Ivanov
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: creamel
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Creamel is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/* Шрифты — свои файлы (woff2, подмножества cyrillic+latin; Open Sans 300–700 и Roboto 400–700
   normal+italic — вариативные). Скачаны .codex/scripts/tasks/download-fonts.py, не с CDN Google. */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url(fonts/open-sans-normal-cyrillic.woff2) format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url(fonts/open-sans-normal-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Roboto";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/roboto-italic-cyrillic.woff2) format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Roboto";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/roboto-italic-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/roboto-normal-cyrillic.woff2) format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/roboto-normal-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin-bottom: 24px;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
	transition: .3s ease;
	text-decoration: none!important;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

/* Списки в контенте статьи — сверено через Figma (Inspect Styles): маркер списка (ul) —
   круг 8×8, var(--light-blue), вертикально по центру строки (top:8px при line-height 24px у
   текста 16/24), gap до текста 8px; между пунктами списка (и ul, и ol) — 4px; сам список без
   отступа слева (flush с абзацами) — НЕ дефолтный browser-инденt 3em, который был здесь раньше. */
.entry-content ul,
.entry-content ol {
	margin: 0 0 24px;
	padding-left: 0;
}

.entry-content ul {
	list-style: none;
}

.entry-content ul li {
	position: relative;
	padding-left: 16px;
	margin-bottom: 4px;
}

.entry-content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--light-blue);
}

.entry-content ol {
	list-style: decimal;
	list-style-position: inside;
}

.entry-content ol li {
	margin-bottom: 4px;
}

.entry-content ul li:last-child,
.entry-content ol li:last-child {
	margin-bottom: 0;
}

.entry-content li > ul,
.entry-content li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}
/* Не глобально: иначе задевает и Bootstrap dropdown-menu — WP-шный Walker кладёт <ul
   class="dropdown-menu"> ВНУТРЬ родительского <li>, так что просто "li > ul" зацепит и его,
   когда у пунктов меню появятся реальные подкатегории (см. ROADMAP.md, каталог услуг). */

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a, a:visited {
	color: var(--black);
}

a:hover,
a:focus,
a:active {
	color: var(--green);
}

a:focus {
	outline: none!important;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
/* Стандартный сброс форм темы _s убран целиком — конфликтовал по специфичности с Bootstrap-
   классами (`input[type="search"]` как тег+атрибут формально "сильнее" одного класса
   `.form-control`/`.header__search-input`, поэтому старые правила перебивали Bootstrap и наши
   собственные стили независимо от порядка подключения). Вся стилизация форм — через Bootstrap
   .form-control/.form-select/.btn и наши переопределения в разделе "Header"/"Кнопки" ниже. */

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Утилити-классы отступов (командный стандарт, см. VERSTKA-STANDARDS.md)
--------------------------------------------------------------*/
/* 96px = spacer-5 (48px) x 2 */
.p-96  { padding: 96px !important; }
.py-96 { padding-top: 96px !important; padding-bottom: 96px !important; }
.pb-96 { padding-bottom: 96px !important; }
.pt-96 { padding-top: 96px !important; }

/* 32px = spacer-4 (24px) + spacer-2 (8px) */
.mb-32 { margin-bottom: 32px !important; }
.mt-32 { margin-top: 32px !important; }

/* 24px = spacer-4, только вертикальный гап, чтобы не ломать gx-* Bootstrap */
.gap-y-4 { row-gap: 24px; }

@media (max-width: 991px) {
	.pb-96 { padding-bottom: 48px !important; }
	.py-96 { padding-top: 48px !important; padding-bottom: 48px !important; }
}

/*--------------------------------------------------------------
# Design tokens — точные значения из макета Figma, см. DESIGN-TOKENS.md
# (снято через плагин пользователя "Inspect Styles", не на глаз)
--------------------------------------------------------------*/
:root {
	--white: #fff;
	--black: #333;
	--dark-headings: #4b5b68;
	--light-blue: #4ba0e8;
	--light-gray: #f7f8f9;
	--dark-gray: #808080;
	--dark-blue: #1961aa;
	--dark-blue-hover: #338033; /* сырой hex из макета, не именованный токен в Figma */
	--green: #6fbf52;
	--gray-blue: #c7d5e1;
	--gray: #d9d9d9;
	--star-yellow: #ffc852; /* рейтинг отзывов, см. page-reviews.php */

	--font-family: "Open Sans", sans-serif;
	--second-family: "Roboto", sans-serif;
}

.bg_lgray {background: var(--light-gray);}
.bg_dblue {background: var(--light-gray);}
.bg_lblue {background: var(--light-blue);}
.bg_dblue {background: var(--dark-blue);}
.bg_green {background: var(--green);}


/*--------------------------------------------------------------
# Кнопки и поля форм — глобальная высота 48px (по макету) + flex-
# выравнивание для ЛЮБОЙ .btn, независимо от того, есть внутри
# иконка (span.icon_*) или нет. Паттерн из miller (там это было на
# body .db_btn/.w_btn/button), у нас — на Bootstrap .btn/.form-control,
# т.к. вёрстка идёт через них. Круглые кнопки-шевроны (слайдер-навигация
# и т.п.) — тоже 48px, это тот же общий компонент "кнопка", не отдельный
# случай. Исключение — .form-check-input (radio/checkbox), у них своя
# маленькая квадратная высота, не 48px.
#
# .w_btn (белая) и .db_btn (тёмно-синяя) — доп. варианты кнопки поверх
# базового .btn (светло-синяя/зелёная), по тому же паттерну именования, что
# у пользователя в других проектах (miller): перечисляются вместе с .btn в
# общих блоках (высота/флекс/паддинг/радиус), а цвета — отдельными блоками
# ниже, отдельно на обычное+visited состояние и отдельно на hover/focus.
--------------------------------------------------------------*/
.btn,
.form-control,
.form-select,
.w_btn,
.db_btn {
	height: 48px;
}

.btn, .btn:visited,
.w_btn, .w_btn:visited,
.db_btn, .db_btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 24px; /* по макету, не системные бутстраповские .375rem .75rem */
	white-space: nowrap;
	font-weight: 600;
	border-radius: 48px;
	text-decoration: none;
}

.btn, .btn:visited {
	background: var(--light-blue);
	color: var(--white);
}

.btn:hover,
.btn:focus,
.btn:active {background: var(--green);color: var(--white);}
/* Без этого — сайтвайдовое "a:hover,a:focus,a:active{color:var(--green)}" (0,1,1)
   перебивало ".btn,.btn:visited{color:white}" (0,1,0): кнопка-ссылка после клика
   остаётся в фокусе (модалка открылась, фокус на кнопке не снимается сам) — текст
   становился зелёным на синем фоне вместо ожидаемого зелёного фона (найдено
   пользователем на "Заказать услугу", см. LOG.md 2026-09-23). */

/* .w_btn — белая кнопка на цветном/градиентном фоне (секция формы главной),
   hover — зелёная (сверено по скриншоту пользователя: белая → зелёная, не
   как у .btn светло-синяя → зелёная). Иконка внутри — inline SVG с
   fill="currentColor" (не background-image), чтобы цвет иконки менялся
   вместе с текстом между состояниями без второго файла. */
.w_btn, .w_btn:visited {
	background: var(--white);
	color: var(--dark-headings);
}

.w_btn:hover,
.w_btn:focus {
	background: var(--green);
	color: var(--white);
}

/* .db_btn — тёмно-синяя кнопка, белый текст. Hover отдельно не давали —
   взят по общему правилу сайта "hover = green" (см. навигация/футер/
   telegram-ссылка), не изобретён с нуля. */
.db_btn, .db_btn:visited {
	background: var(--dark-blue);
	color: var(--white);
}

.db_btn:hover,
.db_btn:focus {
	background: var(--green);
	color: var(--white);
}

textarea.form-control {
	height: auto; /* многострочные поля — высота по содержимому/rows, не 48px */
}

/*--------------------------------------------------------------
# Header (шапка) — цвета/типографика кнопок и лого сверены с макетом,
# остальная разметка (отступы, размеры блоков) — черновая, уточнить позже
--------------------------------------------------------------*/
body {
	font-family: var(--second-family);
	color: var(--dark-headings);
}

h1, h2, h3, h4, h5, h6,
.title_form {
	font-family: var(--font-family);
	color: var(--dark-headings);
}

/* line-height 117% — измерено на H1 страницы "Отзывы" (Figma, node 193-6059), совпадает
   с уже применённым в .hero__title (тот же H1 сайта на главной, там своя цветовая
   переопределена под фон), так что это подтверждённое глобальное значение, не с одной
   точки замера. */
h1 {
	font-weight: 600;
	font-size: 60px;
	line-height: 117%;
}

/* .title_form — заголовок блока формы ("Оставить заявку"): div с типографикой h2, чтобы
   на странице не множились <h2> (форма в секции + 2 попапа в DOM — см. LOG.md). Отступы
   снизу задают контекстные классы (.contacts-form__title, .modal-order__title). */
h2,
.title_form {
	font-weight: 600;
	font-size: 48px;
	line-height: 125%;
}

h3 {
	font-weight: 600;
	font-size: 28px;
	line-height: 129%;
}

h4 {
	font-weight: 600;
	font-size: 22px;
	line-height: 127%;
}

/* Адаптив заголовков — по прямому уточнению пользователя, на примере h2 (48→36→24 на
   проломах 1399/767) — те же коэффициенты (0.75x/0.5x от десктопного) применены к
   h1/h3/h4, точных отдельных значений из Figma для них не давали. Брейкпоинты —
   max-width 1399.98/767.98, тот же паттерн проломов, что и в остальном проекте
   (см. напр. js/license-slider.js). */
@media (max-width: 1399.98px) {
	h1 {
		font-size: 45px;
	}

	h2,
	.title_form {
		font-size: 36px;
	}

	h3 {
		font-size: 21px;
	}

	h4 {
		font-size: 17px;
	}
}

@media (max-width: 767.98px) {
	h1 {
		font-size: 30px;
	}

	h2,
	.title_form {
		font-size: 24px;
	}

	h3 {
		/* Не 28*0.5=14 — по прямому уточнению пользователя, заголовок не должен
		   быть меньше 16px ни на одном проломе. */
		font-size: 16px;
	}

	h4 {
		/* Та же нижняя граница 16px — не 22*0.5=11. */
		font-size: 16px;
	}
}

.header {
	background: var(--white);
	position: sticky;
	top: 0;
	z-index: 1030;
	box-shadow: 0 15px 40px -15px rgba(0, 0, 0, 0.12);
}

/* .header__container использует класс .container-fluid (Bootstrap, gutter 12px на сторону
   через --bs-gutter-x — тот же паддинг, что и у обычного .container в остальном сайте),
   тут только добавляем потолок по ширине — в макете контент шапки 1822px при
   référence-фрейме 1920px, см. DESIGN-TOKENS.md. Свой padding-inline здесь не нужен —
   .container-fluid уже даёт правильный, второй раз задавать — задвоить отступ. */
.header__container {
	max-width: 1822px;
}

.header__row {
	display: flex;
	align-items: stretch;
	gap: 24px; /* как гаттер бутстраповской сетки, между "колонками" лого/контент */
}

/* Лого — сбоку, на всю высоту шапки (оба ряда + разделитель), паддинг 16/16 как у top/nav,
   картинка тянется на всю доступную высоту — крупная, не фиксированные 60px */
.header__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding-block: 16px;
}

/* .header__right — flex-column из 3 строк: .header__top (инфо+кнопки), .header__divider,
   .header__bottom (меню+поиск). Ширина поля поиска НЕ привязана к ширине кнопок (раньше была
   через общую grid-колонку) — теперь зависит только от ширины меню в той же строке (см. ниже). */
.header__right {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.header__top {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-block: 16px;
}

.header__top-info {
	flex: 1 1 auto;
	min-width: 0;
	gap: 24px; /* было 16 (gap-3 бутстрапа) по ошибке, в макете 24 */
}

.header__actions {
	flex: 0 0 auto;
}

/* Синяя полоска-разделитель между верхом и низом шапки */
.header__divider {
	height: 3px;
	background: var(--light-blue);
}

/* .header__nav-row — общая строка меню+поиска (ту же роль раньше играл .header__bottom
   напрямую, см. header.php: меню вынесено на этот уровень, чтобы ниже 992 скрытие
   .header__bottom не утаскивало за собой #primaryMenu — display:none на предке всегда
   перекрывает состояние потомка). Меню — по контенту, поиск (внутри .header__bottom)
   забирает остаток ширины строки и сужается вместе с экраном, гэп между ними 48px
   (дал пользователь напрямую, не по сетке Figma). */
.header__nav-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	padding-block: 16px;
}

.header__nav-menu {
	flex: 0 0 auto;
}

/* .header__bottom теперь держит только поиск (форма + иконка-переключатель на 992-1399,
   см. media-запрос ниже) — скрывается целиком ниже 992. */
.header__bottom {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1 1 auto;
	min-width: 0;
}

.header__search {
	flex: 1 1 auto;
	min-width: 0;
}

.header__logo-img,
.header__logo .custom-logo {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
}

.header__logo .custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.header__logo-text,
.footer__logo-text {
	font-family: var(--font-family);
	font-size: 22px;
	font-weight: 700;
	color: var(--dark-headings);
}

.footer__logo .custom-logo {
	display: block;
	width: 100%;
	height: auto;
}

.header__slogan {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 18px;
	line-height: 156%;
	white-space: nowrap; /* в макете title в 1 строку, не переносится */
}

.header__actions {
	gap: 16px; /* было 8 (gap-2 бутстрапа) по ошибке, в макете 16 */
}

/* "Пригласить в тендер" — акцентная кнопка, pill (radius 1000 в макете = половина высоты) */
.header__actions .btn-dark {
	background: var(--dark-blue);
	border-color: var(--dark-blue);
	border-radius: 50rem;
	font-family: var(--font-family);
	font-weight: 600;
}

.header__actions .btn-dark:hover,
.header__actions .btn-dark:focus {
	background: var(--dark-blue-hover);
	border-color: var(--dark-blue-hover);
}

/* "Заказать уборку" в шапке — светло-синяя, pill, hover — светло-зелёный (как "Все услуги").
   Белый вариант с бордером — это отдельное состояние кнопки для тёмных/цветных фоновых секций
   (например CTA-блок "Сохрани время..."), не для шапки — см. DESIGN-TOKENS.md. */
.header__actions .btn-primary {
	background: var(--light-blue);
	border-color: var(--light-blue);
	border-radius: 50rem;
	color: var(--white);
	font-family: var(--font-family);
	font-weight: 600;
}

.header__actions .btn-primary:hover,
.header__actions .btn-primary:focus {
	background: var(--green);
	border-color: var(--green);
	color: var(--white);
}

/* Иконки в .header__actions ниже 992 (заменяют собой кнопки "Пригласить в тендер"/
   "Заказать уборку", которые на этой ширине скрыты, см. d-lg-inline-flex на них) —
   поиск (.header__mobile-search-toggle, переиспользует .toggle_search/.icon_search,
   тот же JS-тоггл, что и у мобильного поля) идёт ПЕРЕД иконкой меню, по прямому
   уточнению пользователя. Не измерено в Figma — дизайнер не нарисовал иконку поиска
   в адаптиве (подтверждено пользователем), размер/цвет взяты по аналогии с
   остальными кнопками-иконками сайта (24×24, light-blue → green на hover, как
   .hero__arrow/.blog-related__arrow). */
.header__mobile-menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none !important; /* сбрасываем focus-ring Bootstrap у .navbar-toggler */
}

.header__mobile-menu-icon {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 20px;
	height: 14px;
}

.header__mobile-menu-icon span {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 1px;
	background: var(--light-blue);
	transition: background-color 0.3s ease;
}

.header__mobile-menu-toggle:hover .header__mobile-menu-icon span,
.header__mobile-menu-toggle:focus .header__mobile-menu-icon span {
	background: var(--green);
}

/* Гамбургер → крестик при открытой панели (.is-active навешивает js/mobile-menu.js) —
   тот же spin-паттерн, что у .hamburger--spin в miller, адаптирован под наши 3 <span>
   вместо inner+before+after одного элемента. */
.header__mobile-menu-icon span:nth-child(1) {
	transform-origin: center;
	transition: transform 0.25s ease, opacity 0.15s ease;
}

.header__mobile-menu-icon span:nth-child(2) {
	transition: opacity 0.15s ease;
}

.header__mobile-menu-icon span:nth-child(3) {
	transform-origin: center;
	transition: transform 0.25s ease, opacity 0.15s ease;
}

.header__mobile-menu-toggle.is-active .header__mobile-menu-icon {
	position: relative;
}

.header__mobile-menu-toggle.is-active .header__mobile-menu-icon span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.header__mobile-menu-toggle.is-active .header__mobile-menu-icon span:nth-child(2) {
	opacity: 0;
}

.header__mobile-menu-toggle.is-active .header__mobile-menu-icon span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/*--------------------------------------------------------------
# Мобильное off-canvas меню (.menu-bar) — структура и расположение скопированы с
# /Local Sites/miller (тот же исходный theme creamel, там уже реализовано полностью, см.
# header.php/js/main.js там), по прямому уточнению пользователя. Палитра адаптирована под
# токены ЭТОГО проекта (miller: --dblue→наш --dark-blue, --light→--white, --lgray→
# --light-gray, --blue→--light-blue). Логика открытия/закрытия — js/mobile-menu.js (тот же
# класс .active на .menu-bar + .mobile-menu-active на body, что и в miller, только без
# усложнения под под-меню — у нас пока нет вложенных пунктов, см. ROADMAP.md).
--------------------------------------------------------------*/
.menu-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow-y: auto;
	background: var(--white);
	z-index: 1040; /* выше .header (1030) */
	transition: transform 0.4s ease;
	transform: translateX(-100%);
	display: flex;
	flex-direction: column;
}

.menu-bar.active {
	transform: translateX(0);
}

body.mobile-menu-active {
	overflow: hidden; /* блокируем скролл страницы под открытой панелью */
}

/* Тёмно-синий фон (как в miller, --dblue) плохо сочетался с этим логотипом — сам
   логотип в основном синих оттенков и терялся на синей плашке (по репорту
   пользователя). Заменили на светло-серый — нейтральный фон есть и в остальной
   палитре сайта (--light-gray, тот же токен, что и у .partners-card и т.п.). */
.menu-bar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px;
	background: var(--light-gray);
	flex: 0 0 auto;
}

.menu-bar__logo .custom-logo,
.menu-bar__logo img {
	display: block;
	height: 56px;
	width: auto;
}

.menu-bar__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--dark-headings); /* было --white — на светлом фоне (после замены с
		тёмно-синего на light-gray) белый крестик был бы не виден */
	flex: 0 0 24px;
}

.menu-bar__close:hover,
.menu-bar__close:focus {
	opacity: 0.7;
}

/* Было flex:1 1 auto — растягивало блок с пунктами меню на всю оставшуюся высоту
   панели (100vh), из-за чего между последним пунктом и футером (телефоны/телеграм)
   получался большой пустой разрыв, когда пунктов меню немного (по репорту
   пользователя). Без flex-роста блок занимает высоту точно по своему контенту,
   футер идёт сразу следом. */
.menu-bar__main {
	padding: 24px;
}

.menu-bar__nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.menu-bar__nav .nav-item {
	border-bottom: 1px solid var(--light-gray);
}

.menu-bar__nav .nav-link {
	display: block;
	padding: 16px 0;
	color: var(--black);
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 18px;
	text-transform: uppercase;
}

.menu-bar__nav .nav-link:hover,
.menu-bar__nav .nav-link:focus {
	color: var(--green);
}

.menu-bar__footer {
	padding: 24px;
	border-top: 1px solid var(--light-gray);
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 0 0 auto;
}

.menu-bar__footer-link {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--dark-headings);
	font-family: var(--second-family);
	font-size: 16px;
}

.menu-bar__footer-link .icon_phone,
.menu-bar__footer-link .icon_tg {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
}

.menu-bar__footer-link:hover,
.menu-bar__footer-link:focus {
	color: var(--green);
}

@media (min-width: 992px) {
	.menu-bar {
		display: none; /* панель открывается только через .header__mobile-menu-toggle,
			а он сам скрыт от 992 и выше (d-lg-none) — подстраховка на случай отладки/
			ручного добавления класса .active в devtools */
	}
}

.header__slogan-sub {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 163%;
	white-space: nowrap;
}

.header__info {
	gap: 8px;
	font-size: 16px; /* минимальный шрифт в шапке — 16px, нигде не мельче */
	line-height: 1.3;
	white-space: nowrap;
}

.header__info a {
	color: inherit;
	text-decoration: none;
}

/* Иконка и текст — в один flex-row (не column): иконка прижата к верху первой строки,
   а сам текст переносится на 2 строки СПРАВА от иконки, а не под ней (см. LOG.md 2026-07-24) */
.header__telegram {
	align-items: flex-start !important;
	color: var(--dark-gray); /* база текста блока — Dark Gray, а не Dark Headings как у остальных .header__info */
	white-space: normal; /* этому блоку, наоборот, нужен перенос на 2 строки */
}

.header__telegram-text {
	flex: 1 1 auto;
	min-width: 0; /* без фиксированной ширины (убрано по просьбе пользователя — всё в шапке
		должно быть адаптивным), перенос на 2 строки происходит естественно по мере сужения
		доступного места в flex-row .header__top-info */
}

.header__telegram a {
	color: var(--dark-blue);
	/* Иконка внутри — .icon_tg, display:inline-block с vertical-align по умолчанию
	   (baseline) — в строке высотой по line-height текста-соседа это оставляло
	   пустое место СНИЗУ иконки (иконка 24px выше самой строки текста, baseline
	   прижимает её низ к базовой линии текста, а не к центру) — по репорту
	   пользователя, поймано через DevTools inspector. flex здесь центрирует
	   иконку по-настоящему, независимо от baseline соседнего текста. */
	display: flex;
	align-items: center;
}

.header__telegram a:hover,
.header__telegram a:focus {
	color: var(--green);
}

.header__info-title {
	font-weight: 600;
	font-size: 18px;
}

/*--------------------------------------------------------------
# Иконки — SVG-файлы в img/icon_<name>.svg, цвет зашит в самом SVG
# (см. VERSTKA-STANDARDS.md — паттерн из miller). Если нужен другой
# цвет того же значка — отдельный файл-вариант, не CSS-recolor.
--------------------------------------------------------------*/
.icon_pin,
.icon_phone,
.icon_tg,
.icon_bell {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.icon_pin  { background-image: url(img/icon_pin.svg); }
.icon_phone { background-image: url(img/icon_phone.svg); }
.icon_tg   { background-image: url(img/icon_tg.svg); }
.icon_bell { background-image: url(img/icon_bell.svg); }

/* Белые варианты — для карточки "Головной офис" на градиентном фоне (страница Контакты),
   цвет "зашит" в файле (та же конвенция, что и у цветных icon_*.svg выше), не CSS-перекраска. */
.icon_pin--white  { background-image: url(img/icon_pin_white.svg); }
.icon_phone--white { background-image: url(img/icon_phone_white.svg); }

.icon_search {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	display: inline-block;
	background: url(img/icon_search.svg) no-repeat center;
	background-size: cover;
}

/* Первый телефон — базовые правила; второй телефон (--second) мельче и легче, оба значения
   сверены поэлементно через плагин Inspect Styles (не угаданы) */
.header__phone {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 18px;
	line-height: 156%;
	white-space: nowrap;
}

.header__phone--second {
	font-weight: 400;
	font-size: 16px;
	line-height: 163%;
}

.header__phone:hover,
.header__phone:focus {
	color: var(--green);
}

/* ВАЖНО: это правило раньше не было завёрнуто в медиа-запрос — .navbar-collapse{display:flex}
   действовало БЕЗУСЛОВНО, на всех ширинах, перебивая нативное поведение Bootstrap
   (.collapse{display:none} ниже lg, .show{display:block} по клику). На практике это значило,
   что меню было развёрнуто ВСЕГДА, даже ниже 992 (адаптив для этого диапазона тогда ещё не
   делался) — обнаружено при реализации адаптива ниже 992. Теперь применяется только на ПК
   (≥992), где именно такое поведение и нужно (одна строка меню); ниже 992 работает нативный
   Bootstrap collapse (.show по клику на .header__mobile-menu-toggle из .header__actions). */
@media (min-width: 992px) {
	.header__nav-menu .navbar-collapse {
		display: flex;
		align-items: center;
		gap: 24px;
	}
}

/* Меню — единственное место в шапке с чёрным цветом текста (var(--black)) */
.header__nav-menu .navbar-nav {
	gap: 24px;
	margin-left: 0; /* сбрасываем "ul, ol {margin-left:3em}" из базового ресета _s (см. выше) —
		тег-селектор бьёт по любому <ul>, включая Bootstrap .navbar-nav, если явно не обнулить */
}

.header__nav-menu .nav-link {
	padding: 0;
	color: var(--black);
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 16px;
	line-height: 163%;
	text-transform: uppercase;
}

.header__nav-menu .nav-link:hover,
.header__nav-menu .nav-link:focus {
	color: var(--green); /* light-blue раньше — не найдено подтверждения в макете (поиск "hover" по
		всему файлу пуст), сверено с пользователем на глаз: в шапке меню при наведении зелёное, как
		у .footer__links — единый акцент для наведения на пункты меню по всему сайту */
}

/* Шеврон вниз у пунктов с подменю ("О нас" → Обучение/Вакансии/Партнёры/Отзывы). */
.header__nav-menu .dropdown-toggle::after {
	margin-left: 6px;
	vertical-align: 2px;
}

/* Выпадающее подменю шапки. Родитель — обычная ссылка (ведёт на свою страницу), список
   раскрывается по наведению/фокусу. Без зазора между ссылкой и списком (top:100%), чтобы
   hover не терялся по пути курсора. Ниже 992 подменю показано сразу, вложенным списком. */
.header__nav-menu .dropdown-menu,
.menu-bar__nav .dropdown-menu {
	list-style: none;
	margin: 0;
	border: 0;
}

.header__nav-menu .dropdown-item,
.menu-bar__nav .dropdown-item {
	padding: 8px 0;
	background: transparent;
	color: var(--black);
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 16px;
	line-height: 150%;
	white-space: nowrap;
}

.header__nav-menu .dropdown-item:hover,
.header__nav-menu .dropdown-item:focus,
.menu-bar__nav .dropdown-item:hover,
.menu-bar__nav .dropdown-item:focus {
	background: transparent;
	color: var(--green);
}

/* Кнопка-шеврон раскрытия подменю — только на мобильных (на ПК подменю по hover). */
.submenu-toggle {
	display: none;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	position: relative;
	cursor: pointer;
}

.submenu-toggle::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	margin: -6px 0 0 -4px;
	border-right: 2px solid var(--dark-headings);
	border-bottom: 2px solid var(--dark-headings);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.is-open > .submenu-toggle::before {
	margin-top: -2px;
	transform: rotate(-135deg);
}

/* Выпадающее меню по макету (Figma, "Уборка" раскрыто): колонка 307px, белая карточка
   radius 8px с тенью 15px 0 40px -15px rgba(0,0,0,.12); пункты 40px (padding 8px 16px),
   14px/171% uppercase var(--black); активный/наведённый — фон var(--green), текст белый;
   у пунктов с вложенностью — шеврон справа; вложенный список — колонка 297px вплотную
   справа (radius 0 8px 8px 8px). */
@media (min-width: 992px) {
	.header__nav-menu .dropdown,
	.header__nav-menu .dropdown-submenu {
		position: relative;
	}

	.header__nav-menu .dropdown-menu {
		width: 307px;
		min-width: 0;
		padding: 0;
		border-radius: 8px;
		background: var(--white);
		box-shadow: 15px 0 40px -15px rgba(0, 0, 0, 0.12);
		z-index: 1000;
	}

	/* Панель 1-го уровня: высота ограничена окном (JS задаёт max-height) и прокручивается. */
	.header__nav-menu .dropdown > .dropdown-menu {
		top: calc(100% + 8px);
		left: -16px;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	/* Мостик между пунктом и панелью — чтобы наведение не терялось в зазоре. Висит на <li>:
	   на самой панели (overflow) он бы обрезался. */
	.header__nav-menu .dropdown::after {
		content: "";
		position: absolute;
		left: -16px;
		right: -16px;
		top: 100%;
		height: 8px;
	}

	/* Колонка 2-го уровня — position:fixed: top/left/max-height ставит js/menu-dropdown.js по
	   краю панели и окну (иначе прокрутка/overflow панели её обрезала бы, а у правого края
	   экрана она не помещалась бы). Внутри — своя прокрутка при нехватке высоты. */
	.header__nav-menu .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 297px;
		border-radius: 0 8px 8px 8px;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	/* В выпадающем меню на ПК — максимум 2 уровня (панель + колонка справа), как в макете:
	   пункты 3-го уровня и глубже ("Циклевка пола" и т.п.) — обычные ссылки без шеврона и
	   без своего подсписка, их услуги открываются на странице категории. В мобильном меню
	   (ниже 992 и off-canvas) разметка та же, но вложенность там раскрывается полностью. */
	.header__nav-menu .dropdown-menu .dropdown-menu .dropdown-submenu > .dropdown-menu,
	.header__nav-menu .dropdown-menu .dropdown-menu .dropdown-submenu > .submenu-toggle,
	.header__nav-menu .dropdown-menu .dropdown-menu .dropdown-submenu > .dropdown-item::after {
		display: none;
	}

	/* Пока справа раскрыт вложенный список — правые углы колонки прямые (стык без выемки). */
	.header__nav-menu .dropdown-menu:has(> .dropdown-submenu:hover),
	.header__nav-menu .dropdown-menu:has(> .dropdown-submenu:focus-within) {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	/* Разделитель между пунктами — линия 1px var(--light-gray) (в макете отдельный
	   слой-линия 307 × 0 между пунктами, у последнего пункта линии нет). */
	.header__nav-menu .dropdown-menu > li:not(:last-child) {
		border-bottom: 1px solid var(--light-gray);
	}

	.header__nav-menu .dropdown-menu > li:first-child {
		border-top-left-radius: inherit;
		border-top-right-radius: inherit;
	}

	.header__nav-menu .dropdown-menu > li:last-child {
		border-bottom-left-radius: inherit;
		border-bottom-right-radius: inherit;
	}

	.header__nav-menu .dropdown-menu > li > .dropdown-item {
		border-radius: inherit;
	}

	.header__nav-menu .dropdown-menu > li:not(:first-child):not(:last-child) > .dropdown-item {
		border-radius: 0;
	}

	.header__nav-menu .dropdown-menu .dropdown-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		min-height: 40px;
		padding: 8px 16px;
		font-family: var(--font-family);
		font-weight: 400;
		font-size: 14px;
		line-height: 171%;
		text-transform: uppercase;
		white-space: normal;
		max-width: none;
		color: var(--black);
		background: transparent;
	}

	.header__nav-menu .dropdown-menu .dropdown-item:hover,
	.header__nav-menu .dropdown-menu .dropdown-item:focus,
	.header__nav-menu .dropdown-submenu:hover > .dropdown-item,
	.header__nav-menu .dropdown-submenu:focus-within > .dropdown-item {
		background: var(--green);
		color: var(--white);
	}

	.header__nav-menu .dropdown-submenu > .dropdown-item::after {
		content: "";
		flex: 0 0 auto;
		width: 6px;
		height: 6px;
		margin: 0 4px 0 0;
		border-top: 1.5px solid currentColor;
		border-right: 1.5px solid currentColor;
		transform: rotate(45deg);
		float: none;
	}

	.header__nav-menu .dropdown:hover > .dropdown-menu,
	.header__nav-menu .dropdown:focus-within > .dropdown-menu,
	.header__nav-menu .dropdown > .dropdown-menu > .dropdown-submenu:hover > .dropdown-menu,
	.header__nav-menu .dropdown > .dropdown-menu > .dropdown-submenu:focus-within > .dropdown-menu {
		display: block;
	}
}

/* Мобильные: шапка ниже 992 (collapse) и off-canvas .menu-bar — подменю свёрнуты, раскрываются
   кнопкой .submenu-toggle (js/menu-dropdown.js, класс .is-open на <li>). */
@media (max-width: 991.98px) {
	.header__nav-menu .dropdown,
	.header__nav-menu .dropdown-submenu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.header__nav-menu .dropdown > .nav-link,
	.header__nav-menu .dropdown-submenu > .dropdown-item {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	.header__nav-menu .submenu-toggle {
		display: block;
	}

	.header__nav-menu .dropdown-item,
	.header__nav-menu .nav-link {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.header__nav-menu .dropdown-menu {
		display: none;
		position: static;
		flex: 0 0 100%;
		width: 100%;
		padding: 0 0 8px 16px;
		background: transparent;
	}

	.header__nav-menu .is-open > .dropdown-menu {
		display: block;
	}
}

.menu-bar__nav .dropdown,
.menu-bar__nav .dropdown-submenu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.menu-bar__nav .dropdown > .nav-link,
.menu-bar__nav .dropdown-submenu > .dropdown-item {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	white-space: normal;
}

.menu-bar__nav .submenu-toggle {
	display: block;
}

/* Длинные названия переносятся (Bootstrap .dropdown-item — nowrap). */
.menu-bar__nav .dropdown-item,
.menu-bar__nav .nav-link {
	white-space: normal;
	overflow-wrap: anywhere;
}

.menu-bar__nav .dropdown-menu {
	display: none;
	position: static;
	flex: 0 0 100%;
	width: 100%;
	padding: 0 0 12px 16px;
	background: transparent;
}

.menu-bar__nav .is-open > .dropdown-menu {
	display: block;
}

.menu-bar__nav .dropdown-toggle::after {
	display: none;
}

/* Поле поиска — pill, обводка Gray Blue, иконка-кнопка внутри справа. Ширина — flex:1 (см.
   .header__search выше, в блоке .header__bottom) — забирает весь остаток строки после меню. */
.header__search {
	position: relative;
	width: 100%;
}

.header__search-input {
	border-radius: 50rem;
	border-color: var(--gray-blue);
	padding-right: 44px; /* место под крестик-очистку */
}

/* Кнопку-лупу в самом поле скрыли — по прямому уточнению пользователя, ей редко
   пользуются (набирают текст и жмут Enter, либо выбирают из выпадающего списка
   результатов). Кнопка остаётся в DOM (submit по Enter работает независимо от
   видимости кнопки), просто не показываем — на случай, если понадобится вернуть. */
.header__search-btn {
	display: none;
}

/* flex:0 0 16px (базовое правило .icon_search) выигрывает у одного только width по
   основной оси flex-контейнера — flex-basis важнее width, если сам flex явно не
   переопределён здесь же. Без flex тут иконка была не квадратной (16×24), заметно
   только сейчас, когда иконка используется в новом месте (.header__actions) —
   пойман по репорту пользователя "иконка поиска выглядит обрезанной". */
.toggle_search .icon_search {flex: 0 0 24px;width: 24px;height: 24px;cursor: pointer;}
.search_mobile {display: none;position: absolute;left: 0;top: 0;width: 100%;transition: .3s ease;background: var(--white);box-shadow: 0 15px 40px -15px rgba(0, 0, 0, 0.12);}
.search_mobile.show {display: block;top: 100%;}
.ajax-search-wrapper {position: relative;width: 100%;}
body .ajax-search-input {border: 1px solid var(--gray-blue);padding: 8px 40px 8px 40px;background: #fff url(img/icon_search.svg)no-repeat;background-position: left +8px center;height: 48px;width: 100%;color: var(--dark-blue)!important;margin: 8px 0;border-radius: 48px;}

/* Крестик очистки поля — общая база, позиционирование см. ниже раздельно для десктопного
   (.header__search) и мобильного (.search_mobile) полей, у них разная разметка/высота. Показан
   только когда в поле есть текст (JS toggleClearBtn), кнопку-лупу в самом поле по прямому
   уточнению пользователя решили не показывать (редко кликают, обычно Enter/клик по результату). */
.ajax-search-clear {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	border: 0;
	background: transparent;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	color: var(--gray);
	cursor: pointer;
	transition: color 0.3s ease;
}

.ajax-search-clear:hover,
.ajax-search-clear:focus {
	color: var(--dark-blue);
}

.header__search .ajax-search-clear {
	right: 16px;
}

.search_mobile .ajax-search-clear {
	right: 16px;
	top: 32px; /* центр по высоте .ajax-search-input (48px) + собственный margin:8px 0 сверху */
}

.ajax-search-results {position: absolute;background: white;z-index: 1000;width: 100%;max-height: 300px;overflow-y: auto;box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.1);border-radius: 8px;padding: 16px;}

/* Десктопное поле поиска в шапке (.header__search-results) — само поле узкое (делит строку
   с меню), а список результатов должен быть шире, чтобы длинные названия услуг не превращались
   в высокий узкий столбик — по прямому уточнению пользователя. Прижат правым краем к правому
   краю поля (совпадает с ним), расширяется влево. */
@media (min-width: 1400px) {
	.header__search-results {
		width: 560px;
		right: 0;
		left: auto;
	}
}

@media (min-width: 1920px) {
	.header__search-results {
		width: 680px;
	}
}
.ajax-search-results ul {list-style: none;margin: 0;padding: 0;}
.ajax-search-results li a {display: block;padding: 8px;border-bottom: 1px solid #eee;text-decoration: none;color: var(--dark-blue);font-size: 14px;}
.ajax-search-results li a:hover {background: var(--dark-blue);color: var(--white);}
.search-footer {padding: 10px;text-align: center;background: var(--light-blue);font-weight: bold;border-radius: 8px;}
.search-footer a {color: var(--white);}
.search-footer a:hover {color: var(--dark-headings);}

/*--------------------------------------------------------------
# Footer (футер) — все значения сверены через Inspect Styles по слоям Figma (Footer > Frame 3163
# и соседние), не подобраны на глаз. Состояний hover в макете нигде не задано (проверено поиском
# "hover" по всему файлу, компонентам и Prototype-панели — пусто), поэтому hover ниже — осознанный
# выбор по уже существующим в макете акцентным цветам: green для меню (перекликается с hover
# кнопки "Заказать уборку" в шапке), dark-blue для обычных ссылок (как у Telegram-ссылки в шапке).
--------------------------------------------------------------*/
.footer__menu {
	background: linear-gradient(90deg, #46c6cf 0%, #47a8e3 100%);
	color: var(--white);
}

.footer__menu-title {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 16px;
	line-height: 163%;
	text-transform: uppercase;
	color: var(--white);
}

.footer__links {
	margin-left: 0; /* тот же сброс "ul, ol {margin-left:3em}" из _s, что и у .navbar-nav выше */
}

.footer__links li {
	margin-bottom: 8px;
}

.footer__links a {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 16px;
	line-height: 163%;
	color: var(--white);
	text-decoration: none;
}

.footer__links a:hover,
.footer__links a:focus {
	/* исключение: на голубом градиенте зелёный почти не читается, поэтому тут — dark-headings,
	   а не общий зелёный hover-акцент ссылок */
	color: var(--dark-headings);
}

.footer__row {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 163%;
	margin-bottom: 16px;
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.footer__row a {
	color: inherit;
	text-decoration: none;
}

.footer__row a:hover,
.footer__row a:focus {
	color: var(--green);
}

.icon_mail,
.icon_clock {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.icon_mail  { background-image: url(img/icon_mail.svg); }
.icon_clock { background-image: url(img/icon_clock.svg); }

.icon_mail--white  { background-image: url(img/icon_mail_white.svg); }
.icon_clock--white { background-image: url(img/icon_clock_white.svg); }

.footer__social {
	gap: 24px;
}

.footer__social-link {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.footer__social-link--vk { background-image: url(img/icon_vk.svg); }
.footer__social-link--tg { background-image: url(img/icon_tg_footer.svg); }

.footer__social-link--vk:hover,
.footer__social-link--vk:focus { background-image: url(img/icon_vk_hover.svg); }

.footer__social-link--tg:hover,
.footer__social-link--tg:focus { background-image: url(img/icon_tg_footer_hover.svg); }

.footer__policy-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.footer__credit,
.footer__copy {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 163%;
}

.footer__policy {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 163%;
	color: var(--dark-headings);
	text-decoration: none;
}

.footer__policy:hover,
.footer__policy:focus {
	color: var(--green);
}

/*--------------------------------------------------------------
# Hero-слайдер (главная) — значения типографики/отступов сверены через Inspect Styles
# (Home > группа слайда 1920×548). Высота слайда и оверлей — точные из макета; вертикальное
# расположение контента сделано через flex-выравнивание (а не абсолютным Y), потому что
# абсолютная Y-координата в макете была неоднозначна (зависела от того, в какую вложенную
# группу проваливался плагин при замере) — сами промежутки между блоками (16/24/8) измерены
# однозначно и надёжны.
--------------------------------------------------------------*/
.hero {
	position: relative;
}

.hero__slide {
	position: relative;
	height: 548px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	display: flex;
	align-items: center;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.hero__container {
	position: relative;
	z-index: 1;
	/* обычный Bootstrap .container, не .container-fluid — широкая (1822px) только шапка,
	   там много информации в один ряд, у слайдера текстовый блок уже по контенту */
}

.hero__content {
	max-width: 715px;
}

.hero__title {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 60px;
	line-height: 117%;
	color: var(--white);
	margin-bottom: 16px;
	overflow-wrap: anywhere;
}

/* Те же ступени адаптива, что у h1 (см. «Адаптив заголовков»). */
@media (max-width: 1399.98px) {
	.hero__title {
		font-size: 45px;
	}
}

@media (max-width: 767.98px) {
	.hero__title {
		font-size: 30px;
	}
}

.hero__subtitle {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 22px;
	line-height: 127%;
	color: var(--white);
	margin-bottom: 24px;
}

.hero__prices {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hero__price-link {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 18px;
	line-height: 156%;
	color: var(--white);
	text-decoration: none;
}

.hero__price-link:hover,
.hero__price-link:focus {
	color: var(--green);
}

.icon_chevron {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	display: inline-block;
	background: url(img/icon_chevron.svg) no-repeat center;
	background-size: cover;
}

/* Slick оборачивает каждый .hero__slide в свой div — убираем двойной outline/focus-контур */
.hero__slider .slick-slide {
	outline: none;
}

.hero__slide {padding: 96px 0;}

.hero__slider .slick-list,
.hero__slider .slick-track,
.hero__slider .slick-slide > div {
	height: 100%;
}

/*--------------------------------------------------------------
# Преимущества (главная) — значения сверены через Inspect Styles (Home > Group 3118):
# иконка 86×86 opacity:0.7, текст 16px/400/150%/dark-gray, gap иконка→текст 16px.
--------------------------------------------------------------*/
.advantages__item {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.advantages__icon {
	width: 86px;
	height: 86px;
	opacity: 0.7;
}

.advantages__title {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	color: var(--dark-gray);
	margin: 0;
}

/*--------------------------------------------------------------
# Услуги (главная) — сверено через Inspect Styles (Home > Group 3097):
# заголовок H2 48/60 (weight 600, line-height 125%, dark-headings), карточка-изображение
# 274×274 border-radius:8px, кружок-стрелка 48×48 radius:100, light-blue → green на hover
# (у первой карточки в макете кружок уже показан зелёным — как демонстрация hover-состояния).
# Карточка: фон ВСЕГДА var(--light-gray) (без тени, ни в обычном состоянии, ни при
# наведении — уточнено пользователем). Паддинг/радиус самой карточки и промежутки внутри
# не удалось снять точно (глубже вложенные группы в макете не открывались стабильно), взяты
# по аналогии с остальными карточками сайта (радиус чуть больше фото, отступ 16px).
--------------------------------------------------------------*/
.services__title {
	margin-bottom: 32px;
}

/* Карточки — переиспользуют .services-children/.services-card (см. секцию "Услуги"
   ниже в этом файле, template-parts/services/card.php) — тот же вид, что и на
   странице категории услуг, по прямому уточнению пользователя (2026-09-23), не своя
   отдельная реализация. */
.services__more {
	margin-top: 32px;
	text-align: center;
}

/*--------------------------------------------------------------
# Контентные области (WYSIWYG из ACF, не только the_content()) — общий класс .entry-content,
# тот же, что уже используется для сброса ul/ol (см. выше). Сюда же — общее правило "последний
# параграф без нижнего отступа", чтобы не навешивать .last-p-0 в каждом месте вручную.
--------------------------------------------------------------*/
.entry-content p:last-child {
	margin-bottom: 0;
}

/* Цитата ("Берем на себя все заботы...") — иконка кавычек как base64 (не отдельный SVG-файл,
   чтобы не плодить http-запрос ради одной мелкой декоративной иконки цитаты).
   Отступы по ТЗ: 16px сверху до иконки, 24px между иконкой и текстом (= padding-left
   50px ширина иконки + 24px). Адаптив — иконка начинает уменьшаться ниже 768px. */
.entry-content blockquote {
	margin: 24px 0;
	padding: 0 0 0 90px;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCA1MCAzOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNOC40MzAyMyAyLjc0NjY0QzkuNjg5OTIgMS4xNDIwOCAxMC45OTgxIDAuMjQ1NDA3IDEyLjM1NDcgMC4wNTY2MzA4QzEzLjgwODEgLTAuMTMyMTQgMTUuMDE5NCAwLjE1MTAxOSAxNS45ODg0IDAuOTA2MTA3QzE3LjA1NDMgMS41NjY4MSAxNy42MzU3IDIuNjA1MDcgMTcuNzMyNiA0LjAyMDg2QzE3LjkyNjQgNS4zNDIyNyAxNy4zNDUgNi44MDUyNiAxNS45ODg0IDguNDA5ODRDMTQuMDUwNCAxMC43Njk1IDEyLjY5MzggMTMuMTI5MiAxMS45MTg2IDE1LjQ4ODhDMTEuMjQwMyAxNy44NDg1IDEwLjkwMTIgMTkuOTcyMiAxMC45MDEyIDIxLjg1OTlMMTAuMzE5OCAxNy4xODc4QzEzLjcxMTIgMTcuMTg3OCAxNi40MjQ0IDE4LjEzMTYgMTguNDU5MyAyMC4wMTk0QzIwLjU5MTEgMjEuOTA3MSAyMS42NTcgMjQuNDU1NSAyMS42NTcgMjcuNjY0N0MyMS42NTcgMzAuNjg1IDIwLjY4OCAzMy4xODYzIDE4Ljc1IDM1LjE2ODRDMTYuODEyIDM3LjA1NjEgMTQuMTk1NyAzOCAxMC45MDEyIDM4QzcuNTA5NjkgMzggNC44NDQ5NiAzNi44Njc0IDIuOTA2OTggMzQuNjAyMUMwLjk2ODk5MiAzMi4zMzY4IDAgMjkuMTc0OSAwIDI1LjExNjJDMCAyMi44NTEgMC4xOTM3OTggMjAuNTM4NSAwLjU4MTM5NSAxOC4xNzg4QzEuMDY1ODkgMTUuNzI0OCAxLjkzNzk4IDEzLjIyMzUgMy4xOTc2NyAxMC42NzUxQzQuNDU3MzYgOC4xMjY2OCA2LjIwMTU1IDUuNDgzODYgOC40MzAyMyAyLjc0NjY0Wk0zNi43NzMzIDIuNzQ2NjRDMzguMDMyOSAxLjE0MjA4IDM5LjM0MTEgMC4yNDU0MDcgNDAuNjk3NyAwLjA1NjYzMDhDNDIuMTUxMiAtMC4xMzIxNCA0My4zNjI0IDAuMTUxMDE5IDQ0LjMzMTQgMC45MDYxMDdDNDUuMzk3MyAxLjU2NjgxIDQ1Ljk3ODcgMi42MDUwNyA0Ni4wNzU2IDQuMDIwODZDNDYuMjY5NCA1LjM0MjI3IDQ1LjY4OCA2LjgwNTI2IDQ0LjMzMTQgOC40MDk4NEM0Mi4zOTM0IDEwLjc2OTUgNDEuMDM2OCAxMy4xMjkyIDQwLjI2MTYgMTUuNDg4OEMzOS41ODMzIDE3Ljg0ODUgMzkuMjQ0MiAxOS45NzIyIDM5LjI0NDIgMjEuODU5OUwzOC42NjI4IDE3LjE4NzhDNDIuMDU0MyAxNy4xODc4IDQ0Ljc2NzQgMTguMTMxNiA0Ni44MDIzIDIwLjAxOTRDNDguOTM0MSAyMS45MDcxIDUwIDI0LjQ1NTUgNTAgMjcuNjY0N0M1MCAzMC42ODUgNDkuMDMxIDMzLjE4NjMgNDcuMDkzIDM1LjE2ODRDNDUuMTU1IDM3LjA1NjEgNDIuNTM4OCAzOCAzOS4yNDQyIDM4QzM1Ljg1MjcgMzggMzMuMTg4IDM2Ljg2NzQgMzEuMjUgMzQuNjAyMUMyOS4zMTIgMzIuMzM2OCAyOC4zNDMgMjkuMTc0OSAyOC4zNDMgMjUuMTE2MkMyOC4zNDMgMjIuODUxIDI4LjUzNjggMjAuNTM4NSAyOC45MjQ0IDE4LjE3ODhDMjkuNDA4OSAxNS43MjQ4IDMwLjI4MSAxMy4yMjM1IDMxLjU0MDcgMTAuNjc1MUMzMi44MDA0IDguMTI2NjggMzQuNTQ0NiA1LjQ4Mzg2IDM2Ljc3MzMgMi43NDY2NFoiIGZpbGw9IiNDN0Q1RTEiIC8+Cjwvc3ZnPgo=");
	background-repeat: no-repeat;
	background-position: 16px 0;
	background-size: 50px 38px;
}

@media (max-width: 767px) {
	.entry-content blockquote {
		padding-left: 72px; /* те же 16px слева + 24px до текста, уменьшается только иконка */
		background-position: 16px 0;
		background-size: 32px 24px;
	}
}

/*--------------------------------------------------------------
# CTA-полоса с телефоном (используется на нескольких страницах) — сверено через
# Inspect Styles (Home > "Вы можете заказать уборку прямо сейчас..."): фон
# linear-gradient(90deg, #46c6cf 0%, #47a8e3 100%), паддинг сверху/снизу 48px
# (симметрично измерен: от края блока до текста и от текста до края), между
# заголовком и подписью — 24px.
--------------------------------------------------------------*/
.cta-phone {
	padding: 48px 0;
	background: linear-gradient(90deg, #46c6cf 0%, #47a8e3 100%);
	text-align: center;
}

.cta-phone__text {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 22px;
	line-height: 127%;
	color: var(--white);
	margin-bottom: 24px;
}

.cta-phone__link {
	white-space: nowrap;
	color: var(--white);
}

.cta-phone__note {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	color: var(--white);
	margin-bottom: 0;
}

/*--------------------------------------------------------------
# "Чистота в три шага" (главная) — сверено через Inspect Styles (Home > Group 3097 /
# Group 3116): заголовок — общий стиль h2 (см. Base/Typography), карточка — фон
# var(--light-gray), padding 16px, radius 8px, от кружка до текста 16px (margin-bottom
# на кружке, а не gap на карточке — иначе к отступу заголовок→описание 8px прибавлялся бы гап).
# Кружок с номером 48×48, между заголовком и описанием 8px. Заголовок H4 22/28,
# слово/фраза в <span> — зелёная (поле ACF "Заголовок" не экранируется, чтобы
# пропустить <span>). Цвет кружка данными не управляется (в ACF только текст) —
# три акцентных цвета заданы по номеру шага (см. hex ниже, взяты из макета):
# 1 — #7BD6C5, 2 — #6DD0F0, 3 — var(--light-blue).
--------------------------------------------------------------*/
.steps__card {
	height: 100%;
	padding: 16px;
	background: var(--light-gray);
	border-radius: 8px;
}

.steps__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	border-radius: 100%;
	font-family: "Open Sans", var(--font-family);
	font-weight: 600;
	font-size: 24px;
	color: var(--white);
}

.steps__badge--1 {
	background: #7bd6c5;
}

.steps__badge--2 {
	background: #6dd0f0;
}

.steps__badge--3 {
	background: var(--light-blue);
}

.steps__title {
	margin-bottom: 8px;
}

.steps__title span {
	color: var(--green);
}

.steps__desc {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	color: var(--dark-gray);
	margin-bottom: 0;
}

/*--------------------------------------------------------------
# "Почему выбирают Эстет?" (главная) — сверено через Inspect Styles (Home >
# "Почему выбирают Эстет?"): фон img/h_why.png на всю ширину (1920×544, cover),
# паддинг сверху/снизу 96px (стандартный py-96). Раскладка — на bootstrap-сетке
# (row/col-xl-9 + col-xl-3, вложенный row/col-md-6 для пар пунктов) вместо
# самописного flex/grid — так адаптив уже отрабатывает через колонки, без
# дублирования в медиазапросах. От заголовка пункта до описания — 16px
# (не 8, как в "Три шага").
--------------------------------------------------------------*/
.h_why {
	padding: 96px 0;
	background-image: url("img/h_why.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.h_why__title {
	margin-bottom: 16px;
}

.h_why__desc {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	color: var(--dark-gray);
	margin-bottom: 0;
}

.h_why__img {
	width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
# Калькулятор клининга (главная) — сверено через Inspect Styles (Home >
# "Калькулятор клининга"): заголовок колонки — h3 (28/36), но цвет
# var(--dark-blue) вместо стандартного dark-headings — переопределяем точечно.
# Поле select/input: белый фон, обводка 1px var(--gray-blue), радиус 30px,
# паддинг 10px 24px (высота 48px — из общего .form-control/.form-select).
# Между лейблом и полем — 8px (по макету), между блоками полей внутри
# колонки и "Итого"/кнопкой — 24px (общий отступ по сайту, между самими
# select/input и подписью "*Цена со скидкой" точную цифру снять в макете
# не удалось — вложенные фреймы со сбросом координат).
# Тарифы (руб. за м²/место/створку) — реальные с прошлой версии сайта
# (estetclean-old.local), не выдуманные: см. template-parts/home/calculator.php.
--------------------------------------------------------------*/
.calc__title {
	color: var(--dark-blue);
	margin-bottom: 24px;
}

.calc__label {
	display: block;
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 18px;
	line-height: 144%;
	margin-bottom: 8px;
}

.calc__field {
	display: block;
	width: 100%;
	border: 1px solid var(--gray-blue);
	border-radius: 30px;
	padding: 10px 24px;
	font-family: var(--second-family);
	font-size: 16px;
	color: var(--dark-headings);
	margin-bottom: 24px;
}

.calc__field::placeholder {
	color: var(--gray);
}

/* Обёртка ТОЛЬКО у полей количества/площади — js/calculator.js добавляет/убирает
   .is-invalid (статичная красная обводка, см. ниже). Отступ снизу (24px) —
   на обёртке, а не на самом .calc__field, чтобы .is-invalid можно было вешать
   на обёртку без побочных эффектов на разметку соседних полей. */
.calc__field-wrap {
	position: relative;
	display: block;
	margin-bottom: 24px;
}

.calc__field-wrap .calc__field {
	margin-bottom: 0;
}

.calc__field-wrap.is-invalid .calc__field {
	outline: 1px solid #ff0000;
}

.calc__price {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 22px;
	line-height: 127%;
	color: var(--dark-gray);
	margin-bottom: 0;
}

.calc__total {
	font-family: var(--second-family);
	font-weight: 500;
	font-size: 28px;
	line-height: 129%;
	color: var(--green);
	margin: 24px 0;
}

.calc__submit {
	margin-bottom: 24px;
}

.calc__note {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	color: var(--dark-gray);
	margin-bottom: 0;
}

/*--------------------------------------------------------------
# Общие правила для ЛЮБОЙ формы CF7 на сайте (стандарт пользователя, тот же
# паттерн, что и на других его проектах) — не привязано к конкретной секции/
# попапу, применяется глобально поверх точечных .order-modal/.home-form/
# .modal-order__body стилей полей выше/ниже (те не трогаем).
#
# Штатные подсказки CF7 под полем (.wpcf7-not-valid-tip, "Заполните поле...")
# скрыты полностью — по опыту пользователя именно они дёргают вёрстку (высота
# страницы прыгает при появлении/исчезновении). Вместо них поле с ошибкой
# получает контрастную обводку. Штатный текстовый вывод под формой
# (.wpcf7-response-output, "Спасибо"/"Ошибка отправки" от самого CF7) тоже
# скрыт везде — сайт показывает свои попапы состояний вместо него
# (js/order-form.js, #responseModal).
#
# Пробовали усилить статичную обводку анимированным кольцом (несколько версий —
# conic-gradient+:has(), SVG-дуга с расчётом периметра, вращающийся 4-цветный
# квадрат — все в истории LOG.md) — на вытянутых pill-полях ни одна не смотрелась
# так, как в референсах, решили не тратить время дальше и оставить только
# статичную обводку ниже.
--------------------------------------------------------------*/
.wpcf7-form label {
	width: 100%;
}

.wpcf7-form .wpcf7-spinner {
	position: absolute;
	right: 52px;
	top: 50%;
	transform: translateY(-50%);
}

.wpcf7-form .wpcf7-list-item {
	margin: 0;
}

.wpcf7 .wpcf7-submit {
	width: 100%;
	box-sizing: border-box;
}

.wpcf7 .wpcf7-not-valid-tip {
	display: none !important;
}

body .wpcf7-form .wpcf7-form-control.wpcf7-not-valid {
	outline: 1px solid #ff0000 !important;
}

.wpcf7-response-output {
	display: none !important;
}

/*--------------------------------------------------------------
# Анимированное кольцо вокруг невалидного поля пробовали (conic-gradient+:has(),
# SVG <rect> с расчётом периметра, вращающийся 4-цветный квадрат) — все версии
# см. в истории LOG.md. В итоге отказались: на вытянутых pill-полях анимация
# вела себя не так, как в примерах (там были близкие к квадрату пропорции),
# тратить время на доводку не стали. Осталась только статичная обводка —
# body .wpcf7-form .wpcf7-form-control.wpcf7-not-valid (ниже) и
# .calc__field-wrap.is-invalid .calc__field (выше).
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Попап "Оставить заявку" (Firelight Lightbox, инлайн-контент #order-modal) —
# точные значения из макета сняты только частично (это единственная секция,
# которую не получилось однозначно отличить в Figma от полноширинной секции
# с тем же текстом — либо это она и есть, отмасштабированная в модалку).
# Взято: заголовок = h2 (глобальный стиль), подзаголовок = h6 18/26 dark-headings,
# паддинг блока 48px (совпадает с X/Y самого текста в макете). Поля формы и
# радиус самого попапа — по образцу .calc__field/скриншота, ТОЧНО не сверено,
# см. LOG.md.
--------------------------------------------------------------*/
#fancybox-wrap, #fancybox-img {border-radius: 8px;overflow: hidden;}
#fancybox-outer {box-shadow: none!important;border-radius: 8px;overflow: hidden;}
body #fancybox-close, body .fancybox-close {width: 24px;height: 24px;background: transparent url(img/icon_close.svg)no-repeat center !important;top: 12px;right: 12px;font-size: 0;border: 0!important;box-shadow: none!important;z-index: 111103;display: block;}
body #fancybox-close span, body .fancybox-close span {display: none;}
#order-modal, #order-modal > .wpcf7 {max-width: 640px!important;}
#order, #callback, .response_ok {max-width: 480px!important;}
#order > .wpcf7, #ask_question > .wpcf7 {max-width: 480px!important;width: 100%;/*height: 566px;*/}
#sendmail textarea {max-height: 120px;}

.order-modal {
	background: var(--white);
	max-width: 660px;
	width: 100%;
	padding: 48px;
	border-radius: 16px;
	box-sizing: border-box;
}

.order-modal__title {
	margin-bottom: 16px;
}

.order-modal__desc {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 18px;
	line-height: 144%;
	margin-bottom: 24px;
}

.order-modal .wpcf7-form-control:not([type="checkbox"]):not(.wpcf7-acceptance):not([type="submit"]) {
	display: block;
	width: 100%;
	border: 1px solid var(--gray-blue);
	border-radius: 30px;
	padding: 10px 24px;
	font-family: var(--second-family);
	font-size: 16px;
	color: var(--dark-headings);
}

.order-modal .wpcf7-form-control::placeholder {
	color: var(--gray);
}

.order-modal .row {
	margin-bottom: 16px;
}

.order-form__check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 24px;
	font-family: var(--second-family);
	font-size: 14px;
	line-height: 143%;
	color: var(--dark-gray);
}

.order-form__check input {
	margin-top: 3px;
}

/* Ссылка на политику конфиденциальности внутри чекбокса — цвет всегда как у окружающего
   текста (не браузерный синий), т.к. форма переиспользуется и на светлом фоне (тёмно-серый
   текст), и на градиенте (.home-form — белый, см. .home-form .order-form__check выше). */
.order-form__check a {
	color: inherit;
	text-decoration: underline;
}

.order-form__check a:hover,
.order-form__check a:focus {
	text-decoration: none;
}

.order-form__submit {
	display: block;
	width: 100%;
	border: 0;
}

.order-modal .wpcf7-not-valid-tip {
	font-size: 13px;
	color: #dc3545;
	margin-top: 4px;
}

.order-modal .wpcf7-response-output {
	display: none !important; /* свои попапы "Спасибо"/"Ошибка" вместо стандартного текста CF7 под формой */
}

/*--------------------------------------------------------------
# Попапы состояний "Спасибо"/"Ошибка" — собираются в JS (js/order-form.js) и
# открываются через jQuery.fancybox() с готовой HTML-строкой, как на других
# проектах пользователя, не как якоря на скрытый блок.
# Сверено через Inspect Styles (Home > "Ваша заявка успешно отправлена"): на ПК/планшетах
# раскладка горизонтальная (лого слева 169×198, текст справа), паддинг 48px, гап между
# лого и текстом 24px, внутри текстового блока между заголовком (h2) и подписью — 16px.
# Общая ширина попапа 636px (48+169+24+347+48). Ниже 575px — вертикально, по центру.
--------------------------------------------------------------*/
.response_ok,
.response_error {
	display: flex;
	align-items: center;
	gap: 24px;
	background: var(--white);
	border-radius: 8px;
	padding: 48px;
	max-width: 636px;
}

.response_ok img,
.response_error img {
	flex: 0 0 auto;
	width: 169px;
	height: 198px;
}

.response_ok .response-text,
.response_error .response-text {
	flex: 1 1 auto;
}

.response_ok .form_title,
.response_error .form_title {
	margin-bottom: 16px;
}

.response_ok .form_title {
	color: var(--dark-headings);
}

.response_error .form_title {
	color: #dc3545;
}

.response_ok .popup-subtitle,
.response_error .popup-subtitle {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 18px;
	line-height: 144%;
	color: var(--dark-headings);
}

@media (max-width: 575px) {
	.response_ok,
	.response_error {
		flex-direction: column;
		text-align: center;
	}

	.response_ok img,
	.response_error img {
		margin: 0 auto;
	}
}

/*--------------------------------------------------------------
# Попапы на Bootstrap 5 modal (#orderModal, #responseModal) — заменяют собой попапы на
# Firelight Lightbox выше (.order-modal/.response_ok/.response_error/#fancybox-*), тот блок
# не трогаем и не удаляем (используется другим кодом плагина, почистим отдельной задачей
# при переносе галереи на модалки — см. LOG.md, 2026-08-14). Значения продублированы один
# в один из блока выше, привязаны к новым классам под Bootstrap-разметку.
--------------------------------------------------------------*/
.modal-order-dialog {
	max-width: 660px;
}

.modal-order {
	background: var(--white);
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: none;
}

.modal-order__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 24px;
	height: 24px;
	background: transparent url(img/icon_close.svg) no-repeat center;
	border: 0;
	padding: 0;
	font-size: 0;
	z-index: 10;
}

.modal-order__body {
	padding: 48px;
}

.modal-order__title {
	margin-bottom: 16px;
}

.modal-order__desc {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 18px;
	line-height: 144%;
	margin-bottom: 24px;
}

/* Строка "Услуга: ..." — только в #orderServiceModal (кнопка "Заказать услугу" на
   одиночной записи услуги), название — жирным синим, по образцу, который дал
   пользователь. */
.modal-order__service {
	font-family: var(--font-family);
	font-size: 16px;
	margin-bottom: 24px;
}

.modal-order__service-name {
	font-weight: 600;
	color: var(--light-blue);
}

.modal-order__body .wpcf7-form-control:not([type="checkbox"]):not(.wpcf7-acceptance):not([type="submit"]) {
	display: block;
	width: 100%;
	border: 1px solid var(--gray-blue);
	border-radius: 30px;
	padding: 10px 24px;
	font-family: var(--second-family);
	font-size: 16px;
	color: var(--dark-headings);
}

.modal-order__body .wpcf7-form-control::placeholder {
	color: var(--gray);
}

.modal-order__body .row {
	margin-bottom: 16px;
}

.modal-order__body .wpcf7-not-valid-tip {
	font-size: 13px;
	color: #dc3545;
	margin-top: 4px;
}

.modal-order__body .wpcf7-response-output {
	display: none !important; /* свои попапы "Спасибо"/"Ошибка" вместо стандартного текста CF7 под формой */
}

/* Попап "Пригласить в тендер" (Figma: Pop_up_tender, снято через Inspect Styles): карточка
   856px, padding 48, gap 24 между блоками, radius 8 (у остальных попапов 16 — здесь по макету
   8); поля — 2 колонки по 368 (gap 24), высота 48, radius 30, padding 10×24; комментарий —
   760×126, padding 16×24; кнопка 368×48 pill. Тексты — стиль "text" (16/24 dark-headings). */
.modal-tender-dialog {
	max-width: 856px;
}

.modal-tender {
	border-radius: 8px;
}

.modal-tender__title {
	margin-bottom: 24px;
}

.modal-tender__text {
	margin-bottom: 24px;
}

.modal-tender__text p {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	margin-bottom: 8px;
}

.modal-tender__text p:last-child {
	margin-bottom: 0;
}

.modal-tender .modal-order__body .row,
.modal-tender__body .row {
	margin-bottom: 0;
}

.modal-tender__body textarea.wpcf7-form-control {
	height: 126px;
	padding: 16px 24px;
	resize: none;
}

.tender-form__file {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	margin: 0;
	font-family: var(--second-family);
	font-size: 14px;
	line-height: 143%;
	color: var(--dark-headings);
	cursor: pointer;
	transition: color 0.3s ease;
}

.tender-form__file:hover {
	color: var(--green);
}

.tender-form__file-icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background: url(img/icon_clip.svg) no-repeat center / contain;
}

/* Нативный input[type=file] скрыт — вместо него label со скрепкой; имя выбранного файла
   подставляет js/order-form.js. */
.modal-tender__body .tender-form__file .wpcf7-form-control-wrap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.modal-tender__body .tender-form__file .wpcf7-form-control {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
}

.tender-form__check {
	display: flex;
	align-items: center;
	margin-bottom: 0;
}

.modal-response-dialog {
	max-width: 636px;
}

.modal-response {
	background: var(--white);
	border: 0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: none;
}

.modal-response__body {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 48px;
}

.modal-response__body img {
	flex: 0 0 auto;
	width: 169px;
	height: 198px;
}

.modal-response__text {
	flex: 1 1 auto;
}

.modal-response__title {
	margin-bottom: 16px;
}

.modal-response--error .modal-response__title {
	color: #dc3545;
}

.modal-response__subtitle {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 18px;
	line-height: 144%;
}

@media (max-width: 575px) {
	.modal-response__body {
		flex-direction: column;
		text-align: center;
	}

	.modal-response__body img {
		margin: 0 auto;
	}
}

/*--------------------------------------------------------------
# Блог: список записей (archive.php) — сверено через Inspect Styles (Figma,
# node 242-3014). Вся карточка — один <a> (паттерн из .services__card):
# border-radius:8px + overflow:hidden + background:light-gray — на самом
# .blog-card (замерено плагином на 636×478, не на картинке — у <img> в
# макете прямые углы, скругление верхних углов — маска карточки). height:100%
# + flex-column, чтобы карточки в одной bootstrap-строке (row g-4) тянулись
# по высоте до самой высокой соседней (align-items:stretch по умолчанию у
# .row уже растягивает .col-*, .blog-card__body: flex:1 добирает остаток).
# Картинка 636×262. Кружок-стрелка 48×48 (тот же паттерн, что у
# .services__card-arrow — light-blue → green на hover ВСЕЙ карточки, не
# только картинки) — наполовину перекрывает нижний край картинки
# (bottom:-24px), не обрезается overflow:hidden карточки, т.к. остаётся
# внутри её общей высоты (под картинкой ещё есть текстовый блок).
# Инфоблок (дата/заголовок/анонс) — padding 24px со всех сторон (даёт и
# отступ от картинки сверху, и отступы по бокам/снизу от края карточки),
# внутри — 8px между всеми тремя. Заголовок — h4 (глобальный стиль), анонс —
# "text" 16/24 dark-gray. Сетка — bootstrap row g-4 (совпадает с 24px
# гаттером между колонками в макете).
--------------------------------------------------------------*/
.blog-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--light-gray);
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
}

.blog-card__image {
	position: relative;
	display: block;
}

.blog-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 636 / 262;
	object-fit: cover;
}

.blog-card__arrow {
	position: absolute;
	right: 24px;
	bottom: -24px;
}

.blog-card__arrow-bg {
	fill: var(--light-blue);
	transition: fill 0.3s ease;
}

.blog-card:hover .blog-card__arrow-bg,
.blog-card:focus .blog-card__arrow-bg {
	fill: var(--green);
}

.blog-card__body {
	padding: 24px;
	flex: 1 1 auto;
}

.blog-card__date {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 14px;
	line-height: 143%;
	color: var(--dark-gray);
	margin-bottom: 8px;
}

.blog-card__title {
	margin-bottom: 8px;
}

.blog-card__excerpt {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	color: var(--dark-gray);
	margin-bottom: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Кнопка "Показать ещё" (AJAX-подгрузка) — переиспользует глобальный .btn
   (тот же паттерн, что и у остальных CTA-кнопок сайта); точный стиль именно
   этой кнопки по макету не снят, взят по аналогии, т.к. в остальном макет
   везде использует один и тот же компонент кнопки. */
.blog-archive__load-more {
	display: flex;
	justify-content: center;
}

.blog-archive__load-more .btn[disabled] {
	opacity: 0.6;
	pointer-events: none;
}

/*--------------------------------------------------------------
# Блог: одиночная запись (single.php) — заголовок h1 (глобальный стиль).
# Мета-строка (автор/дата/время чтения/просмотры) — сверено через Figma
# (Inspect Styles): иконки 24×24 зелёные (fill/stroke #6FBF52 = var(--green)),
# между пунктами gap 24px, внутри пункта иконка→текст gap 8px, подпись
# dark-gray, значение black, шрифт "text" 16/24 у обоих. Изображение записи —
# радиус 8px, во всю ширину контейнера. Точные отступы внутри контента
# (между абзацами/заголовками h2/h3 в самой статье) в макете не сняты —
# у тестовых постов нет вложенных h2/h3, взяты по общему ритму сайта (24px).
--------------------------------------------------------------*/
.blog-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.blog-single__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.blog-single__meta-icon {
	display: block;
	width: 24px;
	height: 24px;
}

.blog-single__meta-label,
.blog-single__meta-value {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
}

.blog-single__meta-label {
	color: var(--dark-gray);
}

.blog-single__meta-value {
	color: var(--black);
}

.blog-single__thumb-img {
	display: block;
	/* Натуральный размер оригинала, не больше колонки: не width:100% (мелкие оригиналы
	   растягивались и мылились) и не width/height-атрибуты размера 'large' (1024/640).
	   width:auto перебивает атрибут width у <img>. */
	width: auto;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border-radius: 8px;
}

.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.entry-content p {
	margin-bottom: 24px;
}

.entry-content h2 {
	margin-top: 48px;
	margin-bottom: 24px;
}

.entry-content h3 {
	margin-top: 32px;
	margin-bottom: 16px;
}

/*--------------------------------------------------------------
# "Другие статьи" — слайдер 4 случайных постов под синглом блога (перед
# футером), Slick Carousel. Карточка — та же .blog-card, что и в архиве блога.
# Гаттер между слайдами — margin-технika Slick (по 12px с каждой стороны
# слайда = 24px между карточками, как в остальной сетке сайта), поэтому у
# .blog-related__slider отрицательный margin по краям, компенсирующий его.
--------------------------------------------------------------*/
.blog-related__slider {
	margin: 0 -12px;
}

.blog-related__slide {
	padding: 0 12px;
}

.blog-related__slider .slick-slide {
	outline: none;
	height: auto;
}

.blog-related__slider .slick-track {
	display: flex;
}

.blog-related__slider .slick-slide > div {
	height: 100%;
}

.blog-related__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
}

/*--------------------------------------------------------------
# Секция с формой заявки на градиентном фоне (главная, после "why") —
# сверено через Inspect Styles (Figma, node 68-3365). Фон — linear-gradient
# #46C6CF → #47ABE3 (точный угол не снят численно, взят по визуальному
# соответствию). Картинка 618×743, прижата к левому краю на всю высоту
# секции (position:absolute), видна только от 1200px (d-none d-xl-block).
# Паддинг секции сверху/снизу — 126px (дал пользователь напрямую).
# Заголовок — 2 строки с разным начертанием (не вписывается в глобальный h2:
# 1-я строка weight 400, 2-я — weight 600, у обеих 48px), подзаголовок —
# weight 400 18px, margin-bottom 24px (уточнено пользователем отдельно).
# Форма — тот же CF7 #154, что и в .order-modal, стили инпутов повторяют
# .order-modal (белый фон, radius 30, border gray-blue), в рамках .home-form,
# т.к. форма используется тут отдельно от попапа. Раскладка полей — 2 колонки
# (Имя|Телефон, чекбокс|кнопка) с гэпом 24px в обе стороны (g-4) — сама CF7-
# форма (используется ещё в попапе, там нужна 1 колонка) размечена как
# `row g-3` с `col-12` — не трогаем общую разметку формы, вместо этого здесь
# `display:contents` на `.row.g-3` "поднимает" оба поля на уровень самой
# <form>, которая становится CSS Grid 2 колонки — чекбокс и кнопка идут
# следом же по DOM-порядку и попадают в те же 2 колонки автоматически.
--------------------------------------------------------------*/
.home-form {
	position: relative;
	overflow: hidden;
	padding-block: 126px;
	background: linear-gradient(to bottom right, #46C6CF, #47ABE3);
}

.home-form__image {
	position: absolute;
	left: 0;
	top: 0;
	width: 618px;
	height: 100%;
}

/* Колонка с текстом/формой стоит на offset-xl-4 (1200-1399) / offset-xxl-3 (1400+), а картинка —
   фиксированной 618px ширины без привязки к сетке (position:absolute) — на части диапазона между
   1200 и ~1900px offset даёт меньше места, чем 618px, картинка наезжает на текст/форму. У Bootstrap
   нет медиазапроса выше xxl (1400), поэтому считаем вручную, теми же формулами, что и офсеты
   Bootstrap (container max-width 1140/1320, гаттер 12px на сторону не учитываем — не критично),
   минус запас 24px, и уменьшаем картинку по мере сужения экрана вместо фиксированной ширины.
   На 1200-1399 offset-xl-4 (а не offset-xl-2, как было раньше) — иначе даже с уменьшением картинки
   до нечитаемо мелкой всё равно оставалось наложение, см. комментарий в
   template-parts/home/order-form.php и LOG.md. */
@media (min-width: 1200px) and (max-width: 1399px) {
	.home-form__image {
		width: clamp(340px, calc((100vw - 1140px) / 2 + 356px), 618px);
	}
}

@media (min-width: 1400px) {
	.home-form__image {
		width: clamp(340px, calc((100vw - 1320px) / 2 + 306px), 618px);
	}
}

.home-form__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-form__title {
	font-family: var(--font-family);
	color: var(--white);
}

.home-form__title-line1,
.home-form__title-line2 {
	display: block;
	font-size: inherit;
	line-height: 125%;
}

.home-form__title-line1 {
	font-weight: 400;
	margin-bottom: 4px;
}

.home-form__title-line2 {
	font-weight: 600;
	margin-bottom: 16px;
}

.home-form__subtitle {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 18px;
	line-height: 144%;
	color: var(--white);
	margin-bottom: 24px;
}

.home-form .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
	max-width: 636px; /* форма 636px на ПК, прижата к левому краю колонки — вровень с
		заголовком/подзаголовком (уточнение пользователя: было по правому краю, неверно).
		Когда ширина колонки становится ≤636px, max-width перестаёт ограничивать и форма
		естественно становится 100% ширины колонки. */
}

.home-form .wpcf7-form .row.g-3 {
	display: contents;
	/* сама CF7-форма (id 180) размечена как одна `row g-3` с 4 ячейками `col-12` (Имя,
	   Телефон, чекбокс, кнопка) — `display:contents` поднимает все 4 на уровень грида, но
	   собственный гаттер Bootstrap (g-3 = 1rem) продолжает добавлять padding/margin поверх
	   grid-gap (24+16=40px вместо нужных 24 и по горизонтали, и по вертикали — проверено
	   вживую через getBoundingClientRect). Обнуляем bootstrap-переменные гаттера — расстояние
	   между ячейками теперь задаёт только `gap: 24px` у самого грида ниже. */
	--bs-gutter-x: 0;
	--bs-gutter-y: 0;
}

@media (max-width: 575px) {
	.home-form .wpcf7-form {
		grid-template-columns: 1fr; /* ниже 576 — все поля/чекбокс/кнопка в одну колонку */
	}
}

.home-form .wpcf7-form-control:not([type="checkbox"]):not(.wpcf7-acceptance):not([type="submit"]) {
	display: block;
	width: 100%;
	background: var(--white);
	border: 1px solid var(--gray-blue);
	border-radius: 30px;
	padding: 10px 24px;
	font-family: var(--second-family);
	font-size: 16px;
	color: var(--dark-headings);
}

.home-form .wpcf7-form-control::placeholder {
	color: var(--gray);
}

.home-form .order-form__check {
	margin-bottom: 0;
	color: var(--white);
}

/* Цвета/hover кнопки берутся из глобального .w_btn (см. блок "Кнопки и поля
   форм" выше) — тут только full-width под грид формы, т.к. .order-form__submit
   переопределяет display:block/width:100% поверх .w_btn после него по коду. */
.home-form .order-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
}

.home-form .order-form__submit svg {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}

.home-form .wpcf7-not-valid-tip {
	font-size: 13px;
	color: #dc3545;
	margin-top: 4px;
}

.home-form .wpcf7-response-output {
	display: none !important;
}

/*--------------------------------------------------------------
# "Поговорим начистоту" — превью блога на главной (template-parts/home/blog.php),
# сразу под формой. Сверено через Inspect Styles (Figma): заголовок — глобальный
# h2, отступ до карточек 32px. Сами карточки — существующий компонент .blog-card
# (template-parts/blog/card-inner.php), тут только заголовок секции.
#
# .home-blog__row/.home-blog__slide — НЕ bootstrap row/col (см. комментарий в
# шаблоне): на ПК (от 1200px) — статичный flex-ряд из 3 карточек, gap 24px.
# Ниже 1200px секцию превращает в Slick-карусель js/home-blog-slider.js (2→1 на
# 768) — тогда .home-blog__row получает класс .slick-initialized от самого
# Slick, и flex-раскладка уступает место slick-track/slick-list, которые Slick
# создаёт сам; ширину слайдов ниже 1200px тоже целиком считает Slick (инлайн-
# стили), поэтому статичный flex-basis у .home-blog__slide специально описан
# ТОЛЬКО внутри медиа-условия от 1200px — не должен ничего мешать Slick ниже.
--------------------------------------------------------------*/
.home-blog__title {
	margin-bottom: 32px;
}

.home-blog__row {
	display: flex;
	gap: 24px;
}

.home-blog__row.slick-initialized {
	display: block;
}

.home-blog__row .slick-slide {
	outline: none;
	height: auto;
}

.home-blog__row .slick-track {
	display: flex;
}

.home-blog__row .slick-slide > div {
	height: 100%;
}

.home-blog__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
}

@media (min-width: 1200px) {
	.home-blog__slide {
		flex: 0 0 calc((100% - 48px) / 3);
		max-width: calc((100% - 48px) / 3);
	}
}

@media (max-width: 1199px) {
	.home-blog__slide {
		padding: 0 12px; /* тот же паттерн компенсации margin у .blog-related__slider —
			slick даёт по 12px margin с каждой стороны слайда (=24px между карточками) */
	}

	.home-blog__row {
		margin: 0 -12px;
	}
}

/*--------------------------------------------------------------
# "Несколько фактов о нас" (template-parts/home/stats.php) — сверено через
# Inspect Styles (Figma): заголовок — глобальный h2, отступ до кружков 32px.
# Кружки 234×234, gap 96px между ними (не bootstrap-утилита — измеренное
# значение, отличается от стандартных 24, поэтому явным CSS-правилом).
# Число — та же типографика, что у глобального h2 (48/600/125%), но белым;
# подпись — h4 (22/600/127%), тоже белым, gap между числом и подписью 4px.
# Фото — обычный элемент стабильного размера 234×234 (.stats__photo), задаёт
# сам бокс .stats__item; уже готовые круглые PNG с синим тонированием от
# пользователя, CSS тонирование не дублируем. Текст (.stats__text) —
# абсолютно спозиционирован и отцентрирован ПОВЕРХ фото через inset:0+flex
# (не наоборот — фото как фон текста было ошибкой первой версии, поправлено).
# var(--light-blue) на .stats__item — fallback-фон, если фото для строки не
# загружено. В адаптиве (max-width 575.98) кружок уменьшен до 160px — под
# него пропорционально уменьшен и шрифт текста, чтобы помещаться внутри
# (не измерено отдельно в Figma под мобильный фрейм, разумная адаптация).
--------------------------------------------------------------*/
.stats__title {
	margin-bottom: 32px;
}

.stats__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 96px;
}

.stats__item {
	position: relative;
	flex: 0 0 auto;
	width: 234px;
	height: 234px;
}

.stats__photo {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	background: var(--light-blue);
}

.stats__text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	padding: 0 24px;
}

.stats__number {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 48px;
	line-height: 125%;
	color: var(--white);
}

.stats__label {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 22px;
	line-height: 127%;
	color: var(--white);
}

@media (max-width: 575px) {
	.stats__row {
		gap: 24px;
	}

	.stats__item {
		width: 160px;
		height: 160px;
	}

	.stats__number {
		font-size: 32px;
	}

	.stats__label {
		font-size: 16px;
	}
}

@media (max-width: 1199px) {
	.home-form {
		padding-block: 48px;
	}
}

/*--------------------------------------------------------------
# Страница "Отзывы" (page-reviews.php, template-parts/reviews/card.php) — сверено
# через Inspect Styles (Figma, node 193-6059). Заголовок — глобальный h1 (см. выше).
# Сетка — CSS Grid (не bootstrap row/col): 2 колонки, gap 24px и по горизонтали, и
# по вертикали (в макете оба гэпа совпали) — Grid сам растягивает все карточки ОДНОЙ
# СТРОКИ до высоты самой высокой соседней, ровно то, что просил пользователь, без
# доп. JS (как .row + align-items:stretch у bootstrap, только он растягивает вообще
# все ячейки до высоты самой высокой во всём контейнере, а не по рядам — Grid здесь
# точнее). Карточка — padding 16/24/16/16 (верх/право/низ/лево — асимметрично,
# именно так снято в панели Figma, не округлил до одного числа), radius 20,
# box-shadow 2px 2px 8px -15px rgba(0,0,0,.1), фон white. Внутри — flex-column,
# gap 24 между блоком звёзд и текстовым блоком.
#
# Имя+город прижаты к низу через margin-top:auto на .reviews-card__author (в макете
# это сделано абсолютным оверлеем поверх карточки ФИКСИРОВАННОЙ высоты — тут высота
# карточки зависит от контента столбца, абсолютный оверлей так не работает, см.
# комментарий в шаблоне).
#
# Текст — 16/150% (после отступ 24 до "Показать ещё"), обрезан по высоте до 4 строк
# (96px = 4×24px, ровно как высота текстового блока в макете) — кнопка "Показать
# ещё" изначально скрыта (display:none), JS (js/reviews.js) показывает её, только
# если текст реально не поместился в 4 строки (P HP не может предсказать перенос
# строк заранее). Звёзды — 16×16, gap 8, цвет заливки — новый токен --star-yellow
# (жёлтый, был в macjnj как #FFC852, отдельного использования этого цвета в проекте
# раньше не было). Пустая звезда (рейтинг < 5) — var(--gray-blue), цвет не снят в
# Figma (все примеры отзывов в макете 5/5), взят из уже существующей мутной
# нейтральной палитры проекта, не выдуман с нуля.
--------------------------------------------------------------*/
.reviews-section__title {
	margin-bottom: 32px;
}

.reviews-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.reviews-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	height: 100%;
	padding: 16px 24px 16px 16px;
	border-radius: 20px;
	background: var(--white);
	box-shadow: 2px 2px 8px -2px rgba(0, 0, 0, 0.1);
}

.reviews-card__stars {
	display: flex;
	align-items: center;
	gap: 8px;
}

.reviews-card__star--filled {
	color: var(--star-yellow);
}

.reviews-card__star--empty {
	color: var(--gray-blue);
}

.reviews-card__text-wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.reviews-card__text {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	max-height: 96px;
	overflow: hidden;
}

.reviews-card__text p {
	margin-bottom: 0;
}

.reviews-card__more {
	display: none;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 16px;
	line-height: 163%;
	color: var(--light-blue);
}

.reviews-card__more.is-visible {
	display: inline-flex;
}

.reviews-card__more:hover,
.reviews-card__more:focus {
	color: var(--green);
}

.reviews-card__more-icon {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
}

.reviews-card__author {
	margin-top: auto;
}

.reviews-card__name {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 18px;
	line-height: 144%;
}

.reviews-card__city {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	color: var(--dark-gray);
	margin-top: 4px;
}

/* Модалка с полным текстом отзыва — тот же паттерн, что .modal-response (см. выше),
   значения (radius/padding) не отдельно измерены в Figma (в макете нет модалки для
   отзыва) — взяты по аналогии с остальными модалками сайта для консистентности. */
.modal-review-dialog {
	max-width: 636px;
}

.modal-review {
	background: var(--white);
	border: 0;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: none;
}

.modal-review__body {
	padding: 48px;
}

.modal-review__stars {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.modal-review__stars svg {
	width: 16px;
	height: 16px;
}

.modal-review__text {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	margin-bottom: 24px;
}

.modal-review__text p {
	margin-bottom: 0;
}

.modal-review__name {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 18px;
	line-height: 144%;
}

.modal-review__city {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	color: var(--dark-gray);
	margin-top: 4px;
}

@media (max-width: 767px) {
	.reviews-grid {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------------------------
# Карточка партнёра `.partners-card` — ОБЩИЙ компонент, единый стиль (фон/
# radius/padding/типографика) для страницы "Наши партнёры" (page-partnery.php,
# сетка bootstrap row g-4 + col-lg-4/col-sm-6/col-12, классы дал пользователь
# напрямую) и карусели на главной (template-parts/home/partners.php) — по
# прямому уточнению пользователя "дизайн в партнерах и на главной должен
# совпадать полностью". Light-gray фон, radius 8, padding 16px, gap 16px
# (лого → текстовый блок).
#
# ВЫСОТА ЛОГО РАЗНАЯ на двух страницах (макет уточнил пользователь напрямую,
# CSS-значения даны буквально, не по расчёту): 140px на странице "Партнёры",
# 101px в карусели на главной — переопределяется контекстным селектором ниже
# (.partners-page/.partners__slide), сама база .partners-card__logo общая.
#
# Текст под лого (появился в макете без предупреждения дизайнера) — название/
# описание компании и ссылка на сайт, НЕ у каждого партнёра заполнено и то, и
# другое. Хранится не в самой галерее (ACF gallery не трогали), а отдельной
# ACF-группой на вложениях (group_partners_meta: partner_name/partner_url,
# см. .codex/scripts/tasks/partners-attachment-fields.php) — читается по ID
# картинки. Только на странице-сетке, в карусели на главной текста нет (не
# запрошено пользователем).
--------------------------------------------------------------*/
.partners-page__title {
	margin-bottom: 32px;
}

.partners-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	padding: 16px;
	border-radius: 8px;
	background: var(--light-gray);
}

.partners-card__logo {
	display: block;
	width: 100%;
	height: 100px;
	object-fit: contain;
}

.partners-page .partners-card__logo {
	max-height: 140px;
	height: 100%;
}

.partners-card__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.partners-card__name,
.partners-card__link {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
}

.partners-card__name {
	color: var(--black);
}

.partners-card__link {
	color: var(--light-blue);
	text-decoration: none;
	word-break: break-word;
}

.partners-card__link:hover,
.partners-card__link:focus {
	text-decoration: underline;
}

/*--------------------------------------------------------------
# "Отзывы клиентов" на главной (template-parts/home/testimonials.php) — сверено
# через Inspect Styles (Figma): секция full-bleed, фон — картинка (img/bg_reviews.jpg,
# уже готовый файл от пользователя, без доп. CSS-оверлея, см. комментарий в шаблоне).
# Заголовок — глобальный h2 белым, отступ до текста 24px. Текст отзыва — Roboto
# italic 16/150%, центр, белым, max-width 636px, margin:0 auto. Имя+город — Roboto
# 16/150%, центр, белым, отступ от текста 16px. Паддинг секции сверху до заголовка —
# 96px (замерено).
#
# Точки навигации — 8×8 circle, gap 8px, активная var(--green), неактивная
# var(--gray) (тот же паттерн, что у остальных слайдеров сайта) — спозиционированы
# АБСОЛЮТНО у низа секции (24px, замерено), а не через отступ в потоке от текста:
# у разных отзывов разная длина текста, точки должны стоять на одном месте всегда,
# иначе слайдер "прыгал" бы при переключении.
--------------------------------------------------------------*/
.testimonials {
	position: relative;
	padding-top: 96px;
	padding-bottom: 96px;
	background-image: url("img/bg_reviews.jpg");
	background-size: cover;
	background-position: center;
}

/* .testimonials__slide — САМ элемент, на который Slick вешает .slick-slide и
   инлайн-ширину трека (не оборачивает в свой div) — ширину/центрирование
   контента нельзя вешать прямо на него (сжимает слайд уже трека, через пустое
   место просвечивает следующий слайд, см. комментарий в шаблоне и LOG.md) —
   поэтому max-width/центрирование на .testimonials__slide-inner. */
.testimonials__slide-inner {
	max-width: 636px;
	margin: 0 auto;
	text-align: center;
}

.testimonials__title {
	color: var(--white);
	text-align: center;
	margin-bottom: 24px;
}

.testimonials__text {
	font-family: var(--second-family);
	font-style: italic;
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	color: var(--white);
}

.testimonials__text p {
	margin-bottom: 0;
}

.testimonials__author {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	color: var(--white);
	margin-top: 16px;
}

.testimonials__nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	display: flex;
	justify-content: center;
}

.testimonials__nav .slick-dots {
	display: flex !important;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.testimonials__nav .slick-dots li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 8px;
	height: 8px;
	margin: 0;
}

.testimonials__nav .slick-dots li button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gray);
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	transition: background-color 0.3s ease;
}

.testimonials__nav .slick-dots li:hover button,
.testimonials__nav .slick-dots li.slick-active button {
	background: var(--green);
}

/*--------------------------------------------------------------
# "Наши постоянные партнёры" на главной (template-parts/home/partners.php) —
# заголовок — глобальный h2 (цвет/типографика НЕ переопределяются, дефолт
# уже var(--dark-headings) из общего блока h1-h6), отступ до ряда логотипов —
# сайтовый паттерн 32px, как у остальных секций главной (.home-blog__title,
# .stats__title и т.п.) — в Figma по замеру было 81px, но это ошибка
# дизайнера (не сайтовый паттерн, по прямому уточнению пользователя — при
# отличии отступа от 32px в макете уточнять у пользователя, а не брать замер
# как есть). Карточка логотипа — ОБЩИЙ компонент .partners-card (см. блок выше, стили —
# единые со страницей page-partnery.php, по прямому уточнению пользователя
# "дизайн в партнерах и на главной должен совпадать полностью"). Gap слайдера —
# margin/padding-техника Slick, как у .blog-related__slider — по 12px с каждой
# стороны слайда = 24px между карточками, ЧТОБЫ СОВПАДАТЬ с гаттером сетки
# `row g-4` на странице /partnery/ (1.5rem=24px, проверено вживую через
# getComputedStyle) — по прямому уточнению пользователя (раньше тут стояли
# 60px по старому замеру Figma, до того как дизайнер обновила макет с
# карточками — визуально смотрелось непропорционально большим разрывом
# относительно сетки на странице-разделе). Отступ до навигации (стрелки+точки,
# стили — .partners__arrow/.partners__nav в slick/slick-theme-custom.css, та
# же схема, что .blog-related__arrow/__nav) — 48px (замерено).
--------------------------------------------------------------*/
.partners__title {
	margin-bottom: 32px;
}

.partners__slider {
	margin: 0 -12px;
}

/* vendor slick.css задаёт .slick-slide{height:100%} той же специфичности, что и
   .partners__slide — при равной специфичности выигрывает порядок подключения
   файлов, поэтому здесь высота явно через !important (как height:auto в
   аналогичных блоках .blog-related__slider/.home-blog__row выше). Трек — flex
   с центрированием по вертикали, т.к. слайд сам становится .slick-slide (этот
   форк Slick не оборачивает в свой div, см. комментарий в testimonials.php) и
   высоту растягивает по самому высокому слайду в треке. */
.partners__slider .slick-track {
	display: flex;
	align-items: center;
}

.partners__slide {
	display: flex !important;
	align-items: stretch;
	height: auto !important;
	min-height: 133px; /* лого грузятся с loading="lazy" — до подгрузки картинка
		имеет нулевую intrinsic-высоту, без min-height трек схлопывается до 1px
		(vendor slick.css .slick-slide{min-height:1px}); 133 = высота .partners-card
		(16 padding + 101 макс. лого + 16 padding) */
	padding: 0 12px;
	outline: none;
}

.partners__slide .partners-card {
	width: 100%;
	justify-content: center; /* только лого, без текстового блока — центрируем по вертикали */
}

.partners__slide .partners-card__logo {
	max-height: 101px; /* CSS-значения (height:100/max-height) дал пользователь напрямую,
		отдельно для страницы (140) и карусели (101) — см. комментарий в блоке .partners-card выше */
}

.partners__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 48px;
}

/*--------------------------------------------------------------
# "Благодарности и сертификаты" на главной (template-parts/home/license.php).
# На момент вёрстки инструмент инспекции Figma недоступен — отступы/типографика
# НЕ измерены, взяты по уже устоявшимся сайтовым паттернам (заголовок — глобальный
# h2 без переопределения цвета/отступа, margin-bottom 32px, секция pb-96, нав.
# margin-top 32px — как у .blog-related__nav/.home-blog__nav). Если в макете
# фактически другие цифры — поправить после сверки.
#
# Слайды показывают N в ряд СТРОГО по границам Bootstrap (slidesToShow меняется
# в js/license-slider.js на 1399.98/1199.98/991.98/575.98) — Slick задаёт ширину
# слайда инлайн-стилем (перекрывает % от col-* классов). Гаттер — ПРОСТОЙ
# паддинг 12px на .license__slide (НЕ через `row g-4`/--bs-gutter-x — пробовали
# навесить `row g-4` прямо на .license__slider, но `.row` сама получает
# `margin-top: calc(-1 * var(--bs-gutter-y))`, а компенсирующий `margin-top` у
# `.row > *`-детей теряется, когда Slick переносит слайды в свой .slick-track —
# в сумме секция визуально "подпрыгивала" вверх на 24px, съедая отступ от
# заголовка; отловлено по скриншоту пользователя, поэтому просто хардкодим
# 12px без зависимости от --bs-gutter-x).
#
# Каждый скан — в .license-card (серый фон, padding 16px, radius 8px, по
# прямому уточнению пользователя), само фото внутри тоже radius 8px.
# .license__thumb — aspect-ratio 3/4 задаёт фиксированную РАМКУ (нужна как
# защита от схлопывания слайда в 1px — та же проблема, что уже ловили на
# карусели партнёров: vendor slick.css .slick-slide{height:100%}, а до
# подгрузки lazy-load картинки intrinsic-высота нулевая — aspect-ratio
# резервирует место под слайд ДО загрузки картинки), но object-fit:CONTAIN,
# не cover — миниатюра не должна обрезаться (по прямому уточнению
# пользователя: модалка существует именно для просмотра в полном качестве,
# а обрезанная миниатюра вводит в заблуждение о содержимом документа).
--------------------------------------------------------------*/
.license__title {
	margin-bottom: 32px;
}

.license__slider {
	margin: 0 -12px; /* компенсирует padding у .license__slide, чтобы первый/
		последний слайд были вровень с заголовком/краем контейнера */
}

.license__slide {
	outline: none;
	padding-left: 12px;
	padding-right: 12px;
}

.license-card {
	background: var(--light-gray);
	border-radius: 8px;
	padding: 16px;
}

.license__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain; /* по прямому уточнению пользователя — миниатюра не должна
		обрезаться (cover обрезал сканы разной пропорции под фикс. рамку 3/4),
		модалка ведь и существует для просмотра в полном качестве; серый фон
		.license-card остаётся видимым по бокам, если пропорция скана не 3:4 —
		похоже на паспарту, не выглядит как баг */
	border-radius: 8px;
	cursor: pointer;
}

.license__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
}

/*--------------------------------------------------------------
# Модалка-лайтбокс сертификатов (#licenseModal,
# template-parts/modals/license-modal.php) — оформление в духе PhotoSwipe:
# .modal-fullscreen на весь экран, чёрный фон вместо обычного белого
# .modal-content, белая навигация. Крестик — свой SVG (currentColor), а не
# img/icon_close.svg (тот тёмный, для белого попапа на белом фоне, тут не
# подходит). Стрелки — стандартные .carousel-control-prev/next от Bootstrap
# (уже белые по умолчанию, color:#fff — переопределяем только размер/центровку
# под свой SVG вместо стандартных .carousel-control-prev-icon/next-icon).
--------------------------------------------------------------*/
.license-lightbox {
	background: #000;
	border: 0;
	border-radius: 0;
}

.license-lightbox__close {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 10;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--white);
	opacity: 0.8;
	transition: opacity 0.3s ease;
}

.license-lightbox__close:hover,
.license-lightbox__close:focus {
	opacity: 1;
}

.license-lightbox__carousel,
.license-lightbox__carousel .carousel-inner,
.license-lightbox__carousel .carousel-item {
	height: 100%;
}

/* ВАЖНО: display:flex НЕЛЬЗЯ вешать на .carousel-item целиком — vendor
   bootstrap.css скрывает неактивные слайды через display:none и показывает
   только .active (+ .carousel-item-next/-prev во время самого перехода)
   через display:block; если объявить flex на ВСЕХ .carousel-item без
   разбора, это правило (та же специфичность) перебивает vendor display:none
   по порядку подключения файлов — все слайды становятся видимы и лежат друг
   на друге (первый слайд всегда поверх, под ним "листаются" остальные) —
   отловлено по репорту пользователя. Правильно — только на те же селекторы,
   что и у vendor display:block. */
.license-lightbox__carousel .carousel-item.active,
.license-lightbox__carousel .carousel-item-next,
.license-lightbox__carousel .carousel-item-prev {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 96px;
}

.license-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.license-lightbox__carousel .carousel-control-prev,
.license-lightbox__carousel .carousel-control-next {
	width: 96px;
	opacity: 0.8;
}

.license-lightbox__carousel .carousel-control-prev:hover,
.license-lightbox__carousel .carousel-control-next:hover {
	opacity: 1;
}

/*--------------------------------------------------------------
# "Скидочные купоны" на главной (template-parts/home/coupons.php) — сверено
# через Inspect Styles (Figma, Group 3117): заголовок→ряд купонов 31px (по
# факту замера, округлено до сайтовых 32px — расхождение в 1px, похоже на
# погрешность самой Figma, не осознанное дизайнерское решение). Сетка/гаттер —
# row g-4, секция pb-96 (см. комментарий в шаблоне про суммирование отступов).
# Купон — БЕЗ скругления и БЕЗ тени (Corner radius:0, Effects: пусто в Figma) —
# у самого файла купона уже готовый дизайн со своей скруглённой пунктирной
# рамкой внутри картинки, накладывать поверх ещё и CSS-скругление/тень не
# нужно (первая версия ошибочно копировала стиль .license__thumb — поправлено).
--------------------------------------------------------------*/
.coupons__title {
	margin-bottom: 32px;
}

.coupons__img {
	display: block;
	width: 100%;
	height: auto;
}
















@media (max-width: 1699px) {
	.header__logo .custom-logo {width: 124px;height: 140px;}
	.header__slogan-block {display: none!important;}
	.header__info-title, .header__phone {font-size: 16px;}
	/*.header__telegram-text {display: none;}*/
	.header__nav-menu .nav-link {font-size: 15px;}
}

@media (max-width: 1599px) {
	
}

@media (max-width: 1399px) {
	.header__logo .custom-logo {width: 110px;height: 124px;}
	.header__info-title, .header__info-sub, .header__phone {font-size: 14px;}
	.header__telegram-text {font-size: 12px;}
	.header__nav-menu .navbar-nav {gap: 16px;}
}

@media (max-width: 1199px) {
	.header__nav-menu .navbar-nav {gap: 0px;}
	.header__nav-menu .nav-link {font-size: 14px;}
	.home-form .wpcf7-form {max-width: 100%;}
}

@media (max-width: 991px) {
	/* Адаптив шапки ниже 992 (по прямому ТЗ пользователя, в макете отрисован отдельно):
	   .header__bottom (меню-строка + поиск) скрывается целиком, вместо кнопок в
	   .header__actions показываются иконки поиска+меню (сами кнопки/иконки уже
	   переключены через d-lg-* классы в разметке, см. header.php) — здесь только то,
	   что нельзя выразить утилитами Bootstrap. */
	.header__bottom {
		display: none;
	}

	.header__nav-menu {
		padding: 0; /* сбрасываем паддинг Bootstrap .navbar (.5rem 1rem) — иначе пустой
			(без .show) навбар оставляет за собой паддинг-рамку без видимого контента */
	}

	/* .header__right — flex-column, содержимое (сейчас только .header__top, divider и
	   nav-row схлопнуты) выравнивается по умолчанию к началу (flex-start), а сама колонка
	   растянута (align-items:stretch у .header__row) до высоты логотипа (стал выше самого
	   .header__top после уменьшения логотипа) — оставшееся место уходило ЦЕЛИКОМ вниз,
	   .header__top визуально "прилипал" к верху, а не центрировался относительно лого. На
	   991-425 разница в пару px была незаметна, но на ≤424 (номера телефона скрыты,
	   .header__top ниже) стало явно видно — по репорту пользователя. */
	.header__right {
		justify-content: center;
	}

	/* .header__telegram{align-items:flex-start} был подобран под ПК, где текст в 2 строки
	   и иконка выравнивается по верхней — ниже 992 доступной ширины больше относительно
	   контента, текст чаще влезает в 1 строку, и flex-start смотрится как несовпадение
	   иконки с текстом по вертикали (по репорту пользователя). Центрируем. */
	.header__telegram {
		align-items: center !important;
	}

	/* По репорту пользователя после первой версии: разделительная полоска и пустой
	   .header__nav-row (раньше держал паддинг 16/16 даже когда внутри пусто/меню закрыто)
	   оставляли лишний хвост высоты под .header__top — убираем оба. */
	.header__divider {
		display: none;
	}

	.header__nav-row {
		padding-block: 0;
		gap: 0;
	}

	/* .header__top становится единственной строкой шапки — даём чуть больше воздуха
	   (было 16, стало 20) и центрируем по высоте логотип относительно неё. */
	.header__top {
		padding-block: 20px;
	}

	/* Лого раньше растягивалось на всю высоту .header__right (align-items:stretch в
	   .header__row) — пока была видна строка меню+поиска снизу, это давало разумную
	   высоту, но теперь, когда снизу пусто, .header__right стал ВЫШЕ логотипа же и
	   сам логотип неоправданно вытягивался под него (156px). По прямому уточнению
	   пользователя — логотип нужно уменьшить, оставив чуть выше .header__top, а не
	   растягивать на всю (более высокую до правки) колонку. */
	.header__logo {
		align-self: center;
		padding-block: 8px;
	}

	.header__logo .custom-logo,
	.header__logo-img {
		width: auto;
		height: 72px;
	}

	/* Блок телефона+телеграма — вплотную к логотипу (а не растянут по всей ширине
	   через justify-content:space-between, как на ПК, где элементов в строке больше);
	   поиск+бургер в .header__actions остаются справа за счёт flex:1 1 auto на самом
	   .header__top-info. !important — перебивает бутстраповскую утилиту
	   .justify-content-between (тоже !important) прямо в разметке. */
	.header__top-info {
		justify-content: flex-start !important;
	}

}

@media (max-width: 767px) {
	.testimonials {background-size: auto;}
}

@media (max-width: 575px) {
	/* Ниже 576 (по прямому ТЗ пользователя): в блоке телеграма скрывается текст,
	   остаётся только иконка-ссылка (сам блок .header__telegram теперь виден на всех
	   ширинах — раньше был d-none d-lg-flex, что делало это правило недостижимым,
	   см. комментарий в header.php). Блок с телефонами идёт перед телеграмом уже по
	   DOM-порядку в header.php — трогать не нужно. */
	.header__telegram-text {
		display: none;
	}
}

@media (max-width: 424px) {
	/* Ниже 425 (по прямому уточнению пользователя, скриншот): расстояние между иконками
	   в шапке (телефон/телеграм/поиск/меню) становится тесным уже на 400px, а ниже 380
	   номера телефона наезжают на соседние иконки — скрываем сами номера, оставляем
	   только иконку телефона (телеграм к этой ширине уже и так иконка-ссылка, см. выше). */
	.header__phone-list {
		display: none;
	}

	/* Все 4 иконки (телефон/телеграм/поиск/меню) — в один правый блок с равномерным
	   гэпом 24px, по прямому уточнению пользователя. Раньше это были ДВЕ разные flex-
	   группы (.header__top-info с flex:1 1 auto — тянулась на весь остаток строки, из-за
	   чего между телеграмом и .header__actions образовывался большой пустой зазор вместо
	   ровного гэпа, плюс сам .header__actions{gap:16px} — гэп меньше, чем нужно тут). */
	.header__top-info {
		flex: 0 0 auto;
	}

	.header__top {
		justify-content: flex-end; /* .header__top-info и .header__actions становятся
			двумя compact-блоками, gap между ними уже 24px (см. .header__top{gap:24px}) —
			flex-end прижимает эту пару целиком к правому краю */
	}

	.header__actions {
		gap: 24px; /* было 16 — общий гэп для десктопных кнопок, здесь между иконками
			нужно 24, как и везде в этом ряду */
	}
}


/*--------------------------------------------------------------
# Страница "Цены на клининг" (page-ceny.php) — значения табов/таблицы даны пользователем
# напрямую (точные CSS-свойства), не измерены мной через Figma в этой сессии. Заголовок
# каждой таблицы (.ceny-table__title) — своя добавка сверх макета, хранится в xlsx (строка 1
# листа), см. комментарий в page-ceny.php.
--------------------------------------------------------------*/
.ceny-page__title {
	margin-bottom: 32px;
}

.ceny-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 32px;
}

.ceny-tabs__link {
	padding: 0 0 4px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 16px;
	color: var(--dark-headings);
	transition: color 0.3s ease, border-color 0.3s ease;
}

.ceny-tabs__link:hover,
.ceny-tabs__link:focus,
.ceny-tabs__link.active {
	color: var(--light-blue);
	border-bottom-color: var(--light-blue);
}

.ceny-table__title {
	margin-bottom: 16px;
}

.ceny-page .table-responsive {
	border: 1px solid var(--gray-blue);
	border-radius: 8px;
	overflow: hidden;
}

.ceny-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin-bottom: 0;
}

.ceny-table thead th {
	background: var(--gray-blue);
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 18px;
	text-align: left;
	padding: 16px 24px;
	white-space: nowrap;
}

.ceny-table tbody td {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	padding: 16px 24px;
	background: var(--white);
}

.ceny-table tbody tr:nth-child(odd) td {
	background: var(--light-gray);
}

.ceny-table__note td {
	font-style: italic;
	color: var(--dark-gray);
	background: var(--white) !important;
}

/*--------------------------------------------------------------
# Страница "Контакты" (page-contacts.php) — в теме не было шаблона вообще, собрано с нуля
# по скриншоту + существующим токенам проекта (Figma Inspect недоступен без логина, см.
# комментарий в page-contacts.php). Паддинг карточек офисов — 24px, единственное значение,
# заданное пользователем напрямую, остальное — по аналогии с .partners-card/.cta-phone.
--------------------------------------------------------------*/
.contacts-page__title {
	margin-bottom: 24px;
}

.contacts-note,
.contacts-form-section {
	position: relative;
}

.tender-block {
	position: relative;
}

/* Уголок-акцент — псевдоэлемент в левом верхнем углу (не левый бордер), значения даны
   пользователем напрямую: border-radius 8px 0 (2 угла со скруглением 8px, 2 — без),
   16x16, --light-blue. Общий для .contacts-note/.contacts-form-section (страница
   Контакты) и .tender-block (страница О нас — тот же визуальный приём, подтверждён
   Inspect Styles). */
.contacts-note::before,
.contacts-form-section::before,
.tender-block::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 16px;
	height: 16px;
	border-radius: 8px 0;
	background: var(--light-blue);
}

.contacts-note {
	background: var(--light-gray);
	border-radius: 8px;
	padding: 24px;
	margin-bottom: 32px;
	font-family: var(--second-family);
	font-size: 16px;
}

.office-card {
	height: 100%;
	padding: 24px;
	border-radius: 8px;
	background: var(--light-gray);
	box-shadow: 2px 2px 8px -4px rgba(0, 0, 0, 0.1);
}

/* background дан пользователем как "var(--white), linear-gradient(...)" — по спецификации
   background-color можно указать только в ПОСЛЕДНЕМ слое (иначе объявление невалидно и всё
   правило падает), поэтому порядок слоёв здесь развёрнут: градиент сверху (слой-image),
   белый — как fallback-цвет под ним (последний слой). Визуально идентично тому, что просил
   пользователь, — градиент непрозрачный и полностью его перекрывает. */
.office-card--featured {
	background: linear-gradient(90deg, #46c6cf 0%, #47a8e3 100%), var(--white);
	color: var(--white);
}

.office-card__title {
	margin-bottom: 24px;
}

.office-card--featured .office-card__title {
	color: var(--white);
}

.office-card__row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 16px;
	font-family: var(--second-family);
	font-size: 16px;
	line-height: 1.3;
}

/* Последняя строка карточки — без своего margin-bottom, иначе к паддингу карточки (24px)
   прибавлялся бы ещё и он, и снизу выходило больше воздуха, чем у остальных сторон. */
.office-card__row:last-child {
	margin-bottom: 0;
}

.office-card__row a {
	color: inherit;
	text-decoration: none;
	display: block;
}

.office-card__row a:hover,
.office-card__row a:focus {
	text-decoration: underline;
}

.office-card__lines {
	display: flex;
	flex-direction: column;
}

.office-card__vk {
	display: inline-block;
}

/* Форма "Оставить заявку" — обёртка вокруг переиспользованного CF7 #154 (тот же, что в
   #orderModal), поля стилизованы теми же значениями, что и в .modal-order__body
   (border-radius 30px, gray-blue border и т.п. — уже сверено через Inspect Styles ранее, не
   подбирались заново). По макету — 2 колонки по 50%: слева форма, справа картинка
   (img/bg_contacts_form.png) — обычная Bootstrap-сетка (row/col-lg-6 col-12), не кастомный
   flex (по прямому уточнению пользователя — "там бутстрап можно прописать col-lg-6 col-12").
   Картинку видно, пока хватает места в ряд (≥992, тот же брейкпоинт col-lg-6/d-lg-flex);
   как только настала бы очередь переносить её под форму — вместо переноса она просто
   скрывается (d-none d-lg-flex), колонка с формой становится на всю ширину сама (col-12).
   Классы картиночной колонки — все Bootstrap-утилиты, без отдельного CSS (по просьбе
   пользователя, "не нужно писать отдельно стили"). */
/* Без нижнего паддинга — картинка должна прилегать к нижнему краю серого родителя вплотную,
   свой отступ снизу даёт не секция, а колонка с контентом (.contacts-form-section__content,
   классы pb-md-5 pb-4 в разметке). Ниже 768 — паддинг сильно уже по бокам (12px) и без
   верхнего запаса снизу, иначе поля формы на мобильных выходили за пределы серого блока. */
.contacts-form-section {
	background: var(--light-gray);
	border-radius: 16px;
	padding: 48px 48px 0;
}

@media (max-width: 767px) {
	.contacts-form-section {
		padding: 24px 24px 0;
	}
}

@media (max-width: 575px) {
	.contacts-form-section {
		padding: 24px 12px 0;
	}
}

.contacts-form__title {
	margin-bottom: 16px;
}

.contacts-form__desc {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 18px;
	line-height: 144%;
	margin-bottom: 24px;
	max-width: 620px;
}

.contacts-form-section .wpcf7-form-control:not([type="checkbox"]):not(.wpcf7-acceptance):not([type="submit"]) {
	display: block;
	width: 100%;
	border: 1px solid var(--gray-blue);
	border-radius: 30px;
	padding: 10px 24px;
	font-family: var(--second-family);
	font-size: 16px;
	color: var(--dark-headings);
	background: var(--white);
}

.contacts-form-section .wpcf7-form-control::placeholder {
	color: var(--gray);
}

.contacts-form-section .row.g-3 > .col-12 {
	margin-bottom: 16px;
}

.contacts-form-section .order-form__check,
.contacts-form-section .order-form__submit {
	margin-bottom: 0;
}

.contacts-form-section .wpcf7-not-valid-tip {
	font-size: 13px;
	color: #dc3545;
	margin-top: 4px;
}

.contacts-form-section .wpcf7-response-output {
	display: none !important;
}

/* По макету — сетка 2x2 (поле/поле — 1-я строка, чекбокс/кнопка — 2-я), НЕ 4 в ряд (в самой
   форме 154 это 4 независимых col-12 — форма общая с попапом шапки, где они друг под другом,
   поэтому сетку переопределяем только тут через CSS Grid, без правки шаблона формы). На
   мобильных, когда становится узко, — обратно в 1 колонку (1/2/3/4 друг под другом), чтобы
   поля не сплющивались. */
@media (min-width: 576px) {
	.contacts-form-section .row.g-3 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: center;
		gap: 16px;
		max-width: 620px;
	}

	.contacts-form-section .row.g-3 > .col-12 {
		margin-bottom: 0;
	}
}

@media (max-width: 575px) {
	.contacts-form-section .row.g-3 {
		max-width: 620px;
	}
}

/*--------------------------------------------------------------
# Страница "О нас" (page-o-kompanii.php) — значения сняты через Inspect Styles
# (Figma, node-id=193-5399): первый экран 636/636 (50/50 в контейнере 1296 с гэпом
# 24 — обычный col-lg-6 col-12), карточка преимущества 416×96 padding24/radius8/gap24,
# промо-полоса — тот же градиент/типографика, что у .cta-phone, но свой текст (см.
# комментарий в шаблоне), тендер-блок 1296×396 padding48/radius8/light-gray, карточка
# реквизита padding24/radius8/height76 (закрыта).
--------------------------------------------------------------*/
.about-page__title {
	margin-bottom: 32px;
}

.about-hero__text p {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	margin-bottom: 16px;
}

.about-hero__text ul {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.about-hero__text li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 8px;
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
}

.about-hero__text li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--light-blue);
}

.about-hero__button {
	margin-top: 24px;
}

.about-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.about-advantages {
	background: var(--light-gray);
}

.about-advantages__title {
	margin-bottom: 32px;
}

.about-advantage {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 100%;
	padding: 24px;
	border-radius: 8px;
	background: var(--white);
	box-shadow: 2px 2px 8px -4px rgba(0, 0, 0, 0.1);
}

.about-advantage__icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
}

.about-advantage__title {
	margin: 0;
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 18px;
	line-height: 144%;
}

.about-promo {
	padding: 48px 0;
	background: linear-gradient(90deg, #46c6cf 0%, #47a8e3 100%);
	text-align: center;
}

.about-promo__text {
	margin: 0;
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 22px;
	line-height: 127%;
	color: var(--white);
}

.tender-block {
	background: var(--light-gray);
	border-radius: 8px;
	padding: 48px;
}

.tender-block__title {
	margin-bottom: 16px;
}

.tender-block__text p {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	margin-bottom: 16px;
}

.tender-block__text p:last-child {
	margin-bottom: 0;
}

.tender-block__button {
	margin-top: 24px;
}

.about-requisites__title {
	margin-bottom: 32px;
}

/* Аккордеон "Реквизиты" — через CSS-переменные Bootstrap (--bs-accordion-*), не
   переопределением каждого правила по отдельности: так поворот шеврона на открытии
   уже работает "из коробки" (--bs-accordion-btn-icon-transform), без своего JS. Гэп
   между карточками (24px) — `d-grid gap-4` прямо в разметке (page-o-kompanii.php),
   не margin здесь: готовая Bootstrap-утилита совпадает со значением 1-в-1
   (gap-4 = 1.5rem = 24px), по прямому уточнению пользователя предпочитать классы
   готовой библиотеки там, где они точно покрывают нужное значение. */
.about-requisites__accordion {
	--bs-accordion-border-width: 0;
	--bs-accordion-border-radius: 8px;
	--bs-accordion-inner-border-radius: 8px;
	--bs-accordion-btn-padding-x: 24px;
	--bs-accordion-btn-padding-y: 24px;
	--bs-accordion-body-padding-x: 24px;
	--bs-accordion-body-padding-y: 24px;
	--bs-accordion-btn-color: var(--dark-headings);
	--bs-accordion-btn-bg: var(--white);
	--bs-accordion-active-color: var(--dark-headings);
	--bs-accordion-active-bg: var(--white);
	--bs-accordion-btn-focus-border-color: transparent;
	--bs-accordion-btn-focus-box-shadow: none;
	/* Сама иконка НЕ через --bs-accordion-btn-icon (см. правило .accordion-button::after
	   ниже) — url() в этой CSS-переменной резолвится относительно файла, который её
	   ПОТРЕБЛЯЕТ (bootstrap.min.css с cdn.jsdelivr.net), а не относительно style.css,
	   где она объявлена — ни относительный "img/...", ни абсолютный от корня "/..."
	   путь до неё не достаёт (второй резолвится от домена cdn.jsdelivr.net). Оставлены
	   пустыми — Bootstrap рисует ::after только если url() не "none". */
	--bs-accordion-btn-icon: none;
	--bs-accordion-btn-active-icon: none;
}

.about-requisites__accordion .accordion-button::after,
.about-requisites__accordion .accordion-button:not(.collapsed)::after {
	background-image: url("img/icon_chevron_down.svg");
}

.about-requisites__accordion .accordion-item {
	border-radius: 8px;
	box-shadow: 2px 2px 8px -4px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.about-requisites__accordion .accordion-button {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 22px;
	line-height: 127%;
}

.about-requisites__accordion .accordion-body {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	padding-top: 0;
}

.about-requisites__accordion .accordion-body p:last-child {
	margin-bottom: 0;
}

/*--------------------------------------------------------------
# Услуги (single-services.php, taxonomy-services_cat.php) — сетка карточек и сама
# карточка сверены через Inspect Styles (Figma, узел "Услуги — категория"). Разметка
# одиночной записи (сайдбар + фото с затемнением сверху вместо полноширинного хиро) —
# узел "Услуги — запись", node-id 175-5000, см. LOG.md 2026-09-23 (первая версия
# ошибочно скопировала полноширинное фото-хиро с макета категории).
--------------------------------------------------------------*/

/* Сайдбар — сверено через Inspect Styles: ширина ~306 (col-lg-3), padding 24,
   gap 16 (вертикальный стек), radius 8, фон var(--light-gray). Все пункты меню
   (в т.ч. "родительские" с шевроном) — обычные ссылки, без веса (жирный — только
   самый верхний "Уборка"); переход по ним ведёт на страницу той категории/записи,
   активная — просто подсвечена цветом. Разделитель между пунктами ПЕРВОГО уровня
   (не между вложенными записями внутри раскрытой ветки) — тонкая линия, 8px от неё
   до текста с каждой стороны, у самого первого пункта после "Уборка" — без линии
   (по прямому уточнению пользователя). */
.services-sidebar {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border-radius: 8px;
	background: var(--light-gray);
}

.services-sidebar__top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.services-sidebar__top {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 18px;
	line-height: 144%;
	color: var(--black);
	text-decoration: none;
}

/* Кнопка-шеврон, разворачивающая список категорий — видна ТОЛЬКО в адаптиве
   (d-lg-none в разметке), где сайдбар уходит НАД контентом отдельным блоком, а не
   рядом с ним (col-lg-3/col-lg-9 схлопываются в одну колонку) — по умолчанию список
   свёрнут, чтобы не растягивать страницу до контента. На ≥992 сама кнопка скрыта, а
   список всегда открыт через `.collapse.d-lg-block` (см. .services-sidebar__body
   ниже) — по прямому уточнению пользователя. */
.services-sidebar__toggle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	background: none;
	color: var(--black);
	cursor: pointer;
}

.services-sidebar__toggle svg {
	transition: transform 0.3s ease;
}

.services-sidebar__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* НЕ display:flex+gap — Bootstrap `.d-lg-block` (см. sidebar.php, класс на этом же
   элементе — заставляет список быть открытым на ≥992 поверх свёрнутого .collapse)
   даёт display:block!important и полностью перебивает flex, gap вместе с ним
   переставал работать (0px между пунктами, только нижний padding — найдено
   пользователем, см. LOG.md 2026-09-23). Отступ — margin-top на самих строках,
   работает независимо от display родителя. */
.services-sidebar__row {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--gray);
}

/* Первый пункт тела списка — без отступа/линии сверху (граница нужна только МЕЖДУ
   пунктами). :first-child, а не :first-of-type — группы (div) и прямые записи (a)
   разных тегов, :first-of-type считал бы "первым" ещё и первую ссылку-запись, даже
   если перед ней уже есть группа. */
.services-sidebar__body > .services-sidebar__row:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* Заголовок группы — ТЕКСТ (ссылка, переход на страницу) и ШЕВРОН (отдельная
   кнопка, раскрывает вложенный список БЕЗ перехода — Bootstrap Collapse) в одной
   строке, но это два независимых интерактивных элемента, не один <a> — по прямому
   уточнению пользователя (2026-09-23): раньше шеврон был частью ссылки, клик по
   нему уводил на страницу вместо предпросмотра вложенных пунктов. */
.services-sidebar__group-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.services-sidebar__group-toggle {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	color: var(--black);
	text-decoration: none;
}

.services-sidebar__group-toggle:hover,
.services-sidebar__group-toggle:focus,
.services-sidebar__group--active > .services-sidebar__group-header .services-sidebar__group-toggle {
	color: var(--light-blue);
}

.services-sidebar__chevron-btn {
	flex: 0 0 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}

/* Шевроны — ВСЕГДА синие по макету (не только у открытой/наведённой ветки) —
   поэтому цвет задан прямо на кнопке, а не унаследован через currentColor от
   соседней ссылки (та по умолчанию чёрная). */
.services-sidebar__chevron-btn {
	color: var(--light-blue);
}

.services-sidebar__chevron {
	transition: transform 0.3s ease;
}

.services-sidebar__chevron-btn[aria-expanded="true"] .services-sidebar__chevron {
	transform: rotate(180deg);
}

.services-sidebar__list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0 0 0 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Вложенные группы-термины (категория внутри категории, напр. "Доп. услуги" →
   "Глубокая чистка пола" → "Циклевка пола" → записи) — та же индентация/отступ, что
   и у конечного списка записей .services-sidebar__list, просто вложенные группы
   вместо ссылок. Каждый следующий уровень вложенности индентируется ещё на 12px
   естественно, без дополнительных модификаторов. */
.services-sidebar__nested {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 12px 0 0;
	padding: 0 0 0 12px;
}

.services-sidebar__nested .services-sidebar__row {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.services-sidebar__link {
	font-family: var(--second-family);
	font-size: 14px;
	line-height: 143%;
	color: var(--black);
	text-decoration: none;
}

.services-sidebar__link:hover,
.services-sidebar__link:focus {
	color: var(--light-blue);
}

/* Двойной класс — не .services-sidebar__link--active (0,1,0) в одиночку: сайтвайдовое
   правило "a, a:visited" (style.css, ~строка 572) даёт (0,1,1) через псевдокласс
   :visited и перебивает одиночный класс на уже посещённой ссылке (найдено
   пользователем через Figma-инспектор — активный пункт оставался чёрным, если
   ссылку уже открывали). (0,2,0)+ двух классов вместе — выше, побеждает. */
a.services-sidebar__link.services-sidebar__link--active {
	color: var(--light-blue);
}

a.services-sidebar__row.services-sidebar__link {
	display: block;
	font-size: 16px;
	line-height: 150%;
}

/* Фото записи услуги — затемнение сверху (градиент), внутри — заголовок + цена +
   кнопка, белым текстом поверх фото (по прямому уточнению пользователя — в первой
   версии заголовок ошибочно был обычным тёмным текстом НАД фото). */
.services-single__title {
	margin: 0;
	color: var(--white);
}

.services-single__photo {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 32px;
}

.services-single__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Оверлей в потоке (а не absolute): блок растёт под контент, фото — фон на всю его высоту. */
.services-single__photo-overlay {
	position: relative;
	min-height: 420px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 32px;
	/* Сплошная заливка, не градиент — по прямому уточнению пользователя: текст должен
	   быть читаемым независимо от того, светлое фото или тёмное (градиент с прозрачным
	   низом не решал бы эту задачу на светлых фото). */
	background: rgba(0, 0, 0, 0.5);
}

@media (min-width: 992px) {
	.services-single__photo-overlay {
		padding: 96px 48px;
	}
}

.services-single__order-btn {
	margin-top: 8px;
}

/* Цена — сверено через Inspect Styles: "Цена:"/старая цена — 18px/600/156%/белый,
   новая — 28px/129%/зелёный. Зачёркивание старой цены — НЕ text-decoration (в
   макете это отдельная красная линия поверх текста, у designer'а не было чистого
   способа сделать линию другого цвета через line-through), а ::after шириной
   100% от родителя (родитель — inline-block по ширине текста). */
.service-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 16px 0 0;
}

.service-price__label,
.service-price__old {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 18px;
	line-height: 156%;
	color: var(--white);
}

.service-price__old {
	position: relative;
	display: inline-block;
}

.service-price__old::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	background: #ff292d;
	transform: translateY(-50%);
}

.service-price__new {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 28px;
	line-height: 129%;
	color: var(--green);
}

.services-page__title {
	margin-bottom: 32px;
}

/* Цена категории — тот же .service-price, что у одиночной услуги, но там он
   рассчитан на белый текст поверх фото (см. .service-price__label/__old в блоке
   "Цена" выше), а здесь — на белом фоне страницы категории, поэтому переопределяем
   цвет на dark-headings. Собственный отступ параграфа обнулён — расстояние до
   заголовка/сетки задаёт сама обёртка (симметрично, 32px с каждой стороны). */
.services-page__price {
	margin-bottom: 32px;
}

.services-page__price .service-price {
	margin: 0;
}

.services-page__price .service-price__label,
.services-page__price .service-price__old {
	color: var(--dark-headings);
}

.services-content__text p {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	margin-bottom: 16px;
}

.services-content__text p:last-child {
	margin-bottom: 0;
}

.services-content__text h2,
.services-content__text h3,
.services-content__text h4 {
	margin-bottom: 16px;
}

/* Контент со старого сайта: <h2><b>…</b></h2> (вес 700 поверх 600 темы — заголовки
   выглядели тяжёлыми/крупными) и пустые <h2></h2> (пустой отступ). Данные чистит
   .codex/scripts/tasks/clean-service-headings.php, это — страховка для новых правок. */
.services-content__text h2 b,
.services-content__text h2 strong,
.services-content__text h3 b,
.services-content__text h3 strong,
.services-content__text h4 b,
.services-content__text h4 strong {
	font-weight: inherit;
}

.services-content__text h2:empty,
.services-content__text h3:empty,
.services-content__text h4:empty {
	display: none;
}

.services-content__text ul,
.services-content__text ol {
	margin: 0 0 16px;
	padding-left: 20px;
}

.services-content__text li {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	margin-bottom: 8px;
}

.services-content__text ul li::marker {
	color: var(--green);
}

.services-children {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* Карточка — значения даны пользователем напрямую (скриншот + точные CSS-значения):
   светло-серая подложка, padding 16, radius 8, заголовок 600/16px. Кружок-стрелка —
   НЕ поверх картинки (не blog-card__arrow паттерн), а в одной строке с заголовком. */
.services-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	border-radius: 8px;
	background: var(--light-gray);
	text-decoration: none;
}

.services-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 274 / 137;
	object-fit: cover;
	border-radius: 8px;
}

.services-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.services-card__arrow {
	flex: 0 0 48px;
}

.services-card__arrow-bg {
	fill: var(--light-blue);
	transition: fill 0.3s ease;
}

.services-card:hover .services-card__arrow-bg,
.services-card:focus .services-card__arrow-bg {
	fill: var(--green);
}

.services-card__title {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	color: var(--dark-headings);
}

/* Галерея-слайдер на одиночной записи услуги (single-services.php) — тот же Slick,
   что и license__slider (см. комментарий там про margin-компенсацию гаттера,
   .slide padding вместо `row g-4`) и такой же паттерн стрелок/точек, что у
   .testimonials__nav. Иконка лупы — по наведению, декоративная (ссылка сама по
   себе уже открывает фото в полный размер в новой вкладке). */
.services-gallery-slider {
	margin-top: 32px;
}

.services-gallery-slider__track {
	margin: 0 -12px;
}

.services-gallery-slider__slide {
	outline: none;
	padding: 0 12px;
}

.services-gallery-slider__link {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
}

.services-gallery-slider__image {
	display: block;
	width: 100%;
	aspect-ratio: 274 / 220;
	object-fit: cover;
}

/* Наложение на всё фото + иконка-лупа по центру, по наведению — сверено с макетом
   пользователем напрямую (точный SVG иконки + цвет наложения). */
.services-gallery-slider__zoom {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(75, 91, 104, 0.6);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.services-gallery-slider__link:hover .services-gallery-slider__zoom,
.services-gallery-slider__link:focus .services-gallery-slider__zoom {
	opacity: 1;
}

/* Стрелки+точки — ОДИН блок .services-gallery-slider__nav под слайдером, тот же
   паттерн, что у ВСЕХ остальных слайдеров сайта (partners/license/blog-related и
   т.п., см. slick/slick-theme-custom.css) — по прямому уточнению пользователя
   (2026-09-23), раньше стрелки были отдельно от точек. */
.services-gallery-slider__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 24px;
}

.services-gallery-slider__nav .slick-dots {
	order: 1;
	display: flex !important;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.services-gallery-slider__nav .slick-dots li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 8px;
	height: 8px;
	margin: 0;
}

.services-gallery-slider__nav .slick-dots li button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gray);
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	transition: background-color 0.3s ease;
}

.services-gallery-slider__nav .slick-dots li:hover button,
.services-gallery-slider__nav .slick-dots li.slick-active button {
	background: var(--green);
}

.services-gallery-slider__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--light-blue);
	transition: color 0.3s ease;
}

.services-gallery-slider__arrow svg {
	width: 24px;
	height: 24px;
}

.services-gallery-slider__arrow--prev {
	order: 0;
	transform: scaleX(-1);
}

.services-gallery-slider__arrow--next {
	order: 2;
}

.services-gallery-slider__arrow:hover,
.services-gallery-slider__arrow:focus {
	color: var(--green);
}

.services-gallery-slider__arrow.slick-disabled {
	opacity: 0.3;
	pointer-events: none;
}

@media (max-width: 992px) {
	.services-children {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575px) {
	.services-children {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------------------------
# Общее для ВСЕХ Slick-слайдеров сайта — js/slick-nav-toggle.js навешивает класс
# .slick-nav-hidden на слайдер (или на его отдельный .xxx__nav, если точки/стрелки
# вынесены наружу через appendDots/appendArrows), когда все слайды помещаются на
# экране за один показ (листать нечего) — по прямому уточнению пользователя,
# 2026-09-23. .slick-arrow — класс, который Slick сам добавляет к любой кнопке
# стрелки, включая кастомный HTML через prevArrow/nextArrow. Правило — САМОЕ
# ПОСЛЕДНЕЕ в файле НАМЕРЕННО: у каждого слайдера своё "display:flex !important"
# на .slick-dots (одинаковая специфичность, 2 класса) — при равной специфичности
# и одинаковом !important побеждает то, что идёт позже по каскаду.
--------------------------------------------------------------*/
.slick-nav-hidden .slick-dots,
.slick-nav-hidden .slick-arrow {
	display: none !important;
}

/*--------------------------------------------------------------
# Страница "Обучение" (page-obuchenie.php) — по макету Figma (frame "Education").
# Вступительный блок переиспользует .contacts-note (тот же приём, что на Контактах).
# Карточка программы — своя реализация: заголовок+цена в фиксированной левой
# колонке, текст (буллет-список) справа — переиспользует .services-content__text
# для типографики, чтобы не дублировать стили списков.
--------------------------------------------------------------*/
.education-page__title {
	margin-bottom: 24px;
}

.education-page__subtitle {
	margin-bottom: 32px;
}

.education-programs {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.education-program {
	display: flex;
	gap: 32px;
	padding: 24px;
	border-radius: 8px;
	background: var(--white);
	box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.1);
}

.education-program__header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 0 0 260px;
}

.education-program__title {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 18px;
	line-height: 133%;
}

.education-program__price {
	font-family: var(--second-family);
	font-size: 15px;
}

.education-program__price-value {
	font-weight: 600;
	color: var(--green);
}

.education-program__text {
	flex: 1;
	min-width: 0;
}

.education-program__text p:first-child {
	font-weight: 600;
}

@media (max-width: 767px) {
	.education-program {
		flex-direction: column;
		gap: 16px;
	}

	.education-program__header {
		flex: 0 0 auto;
	}
}

/*--------------------------------------------------------------
# Страница "Вакансии" (page-vakansii.php) — по макету Figma (frame "Vacancies").
# Вступительный блок — .contacts-note (тот же приём, что на Обучении/Контактах).
# Карточка вакансии — 2 колонки: слева заголовок+текст 1 (зелёные маркеры списка —
# "плюшки" компании), справа текст 2 (синие маркеры — Обязанности/Требования/
# Условия). box-shadow/radius/padding сверены через Inspect Styles.
--------------------------------------------------------------*/
.vacancies-page__title {
	margin-bottom: 24px;
}

.vacancies-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.vacancy-card {
	display: flex;
	gap: 32px;
	padding: 24px;
	border-radius: 8px;
	background: var(--white);
	box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.1);
}

.vacancy-card__col--perks {
	flex: 0 0 360px;
}

.vacancy-card__col--details {
	flex: 1;
	min-width: 0;
}

/* div, не h2 (по прямому уточнению пользователя) — размер/вес даны напрямую. */
.vacancy-card__title {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 22px;
	margin-bottom: 16px;
}

.vacancy-card__col--perks .vacancy-card__text {
	border-radius: 8px;
	padding: 16px;
	background: var(--light-gray);
}

.vacancy-card__text p {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	margin-bottom: 16px;
}

.vacancy-card__text p:last-child {
	margin-bottom: 0;
}

.vacancy-card__text ul {
	margin: 0 0 16px;
	padding-left: 20px;
}

.vacancy-card__text ul:last-child {
	margin-bottom: 0;
}

.vacancy-card__text li {
	font-family: var(--second-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	margin-bottom: 8px;
}

.vacancy-card__col--perks .vacancy-card__text ul li::marker {
	color: var(--green);
}

.vacancy-card__col--details .vacancy-card__text ul li::marker {
	color: var(--light-blue);
}

@media (max-width: 767px) {
	.vacancy-card {
		flex-direction: column;
		gap: 24px;
	}

	.vacancy-card__col--perks {
		flex: 0 0 auto;
	}
}

/*--------------------------------------------------------------
# Страница 404 (Figma: 404_v2) — "404" лёгким начертанием ~250px (высота цифры в макете
# 177.77px), подпись, кнопка "На главную", справа иллюстрация (img/404.svg, если есть).
--------------------------------------------------------------*/
.error-404 {
	padding-top: 48px;
}

.error-404__code {
	font-family: var(--font-family);
	font-weight: 300;
	font-size: clamp(120px, 14vw, 250px);
	line-height: 1;
	color: var(--dark-headings);
	margin-bottom: 16px;
}

/* Подпись — не заголовок по оформлению (в макете обычный текст), но это H1 страницы. */
.error-404__text {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 18px;
	line-height: 144%;
	margin-bottom: 24px;
}

.error-404__img {
	display: block;
	width: 100%;
	max-width: 856px; /* натуральный размер файла из макета (856×536) */
	height: auto;
	margin-left: auto;
}

/*--------------------------------------------------------------
# Страница "Акции" (Figma: Sale_v2, снято через Design-панель): карточка 636×240, radius 8,
# подложка #4B5B68 (dark-headings) 60% поверх фото, padding 48; текст — H3 28/36 (заголовок),
# H5 18/28 (подзаголовок), h8 14/20 (примечание), белые, отступы 16/8; справа кружок-стрелка 48px
# (в макете в наведении зелёный, обычный — light-blue).
--------------------------------------------------------------*/
.sale-page__title {
	margin-bottom: 24px;
}

.sale-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.sale-card {
	min-width: 0;
	position: relative;
	display: flex;
	align-items: center;
	/* Пропорции карточки из макета (636×240). aspect-ratio задаёт только "нормальную" высоту —
	   если текста на узком экране больше, карточка вырастает по содержимому (min-height: auto
	   у aspect-ratio-блока), поэтому текст не вылезает за картинку. */
	aspect-ratio: 636 / 240;
	padding: 48px 120px 48px 48px;
	border-radius: 8px;
	/* БЕЗ overflow:hidden — оно обнуляет автоматический минимум высоты, и карточка перестаёт
	   расти под текст; скругление картинки/подложки задано отдельно (border-radius: inherit). */
	background: var(--dark-headings);
	color: var(--white);
	text-decoration: none;
}

/* Текст в карточке всегда белый во всех состояниях ссылки: глобальное a:visited (0,1,1) перебивало
   просто .sale-card (0,1,0) — у посещённых ссылок текст становился чёрным. Меняется только кружок. */
.sale-card,
.sale-card:visited,
.sale-card:hover,
.sale-card:focus,
.sale-card:active {
	color: var(--white);
}

.sale-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* картинки любого формата заполняют карточку без искажений */
	border-radius: inherit;
}

.sale-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(75, 91, 104, 0.6); /* затемнение/"забеление" поверх любой картинки — по макету */
	z-index: 1;
}

.sale-card__body {
	position: relative;
	z-index: 2;
	display: block;
	max-width: 392px;
}

.sale-card__title {
	display: block;
	color: var(--white);
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 28px;
	line-height: 129%;
	margin-bottom: 16px;
}

.sale-card__subtitle {
	display: block;
	color: var(--white);
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 18px;
	line-height: 156%;
	margin-bottom: 8px;
}

.sale-card__note {
	display: block;
	color: var(--white);
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 14px;
	line-height: 143%;
}

.sale-card__title:last-child,
.sale-card__subtitle:last-child {
	margin-bottom: 0;
}

.sale-card__arrow {
	position: absolute;
	z-index: 2;
	top: 50%;
	right: 48px;
	width: 48px;
	height: 48px;
	transform: translateY(-50%);
}

.sale-card__arrow svg {
	display: block;
}

.sale-card__arrow-bg {
	fill: var(--light-blue);
	transition: fill 0.3s ease;
}

.sale-card:hover .sale-card__arrow-bg,
.sale-card:focus .sale-card__arrow-bg {
	fill: var(--green);
}

@media (max-width: 991.98px) {
	.sale-grid {
		/* minmax(0, …), не 1fr: иначе aspect-ratio карточки "переносит" высоту по тексту в
		   минимальную ширину трека, и сетка раздувается шире экрана. */
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 575.98px) {
	.sale-card {
		padding: 24px 80px 24px 24px;
	}

	.sale-card__title {
		font-size: 22px;
	}

	.sale-card__arrow {
		right: 16px;
	}
}

/*--------------------------------------------------------------
# Шаблон по умолчанию (page.php / index.php) — страница в .container, H1 и текст редактора как
# на остальных страницах сайта; запасной вариант для любой новой страницы без своего шаблона.
--------------------------------------------------------------*/
.default-page__thumb img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.default-page .entry-content > :last-child {
	margin-bottom: 0;
}

/*--------------------------------------------------------------
# Страница "Галерея" (Figma: Gallery, снято через Design-панель): фильтры-метки — текст
# "button+footer" 16/26 600 dark-headings (как вкладки на "Ценах": активная — light-blue с
# подчёркиванием 2px); сетка 3 колонки по 416×306, gap 24, radius 8; при наведении подложка
# #4B5B68 60%, лупа по центру, подпись H4 22/28 белая слева внизу (padding 24); кнопка
# "Показать ещё" по центру.
--------------------------------------------------------------*/
.gallery-page__title {
	margin-bottom: 24px;
}

.gallery-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin-bottom: 32px;
}

.gallery-filter__btn {
	padding: 0 0 4px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 16px;
	line-height: 163%;
	color: var(--dark-headings);
	cursor: pointer;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.gallery-filter__btn:hover,
.gallery-filter__btn:focus,
.gallery-filter__btn.is-active {
	color: var(--light-blue);
	border-bottom-color: var(--light-blue);
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.gallery-card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 416 / 306;
	padding: 0;
	border: 0;
	border-radius: 8px;
	overflow: hidden;
	background: var(--light-gray);
	cursor: pointer;
}

.gallery-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	border-radius: inherit;
	background: rgba(75, 91, 104, 0.6);
	color: var(--white);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.gallery-card:hover .gallery-card__overlay,
.gallery-card:focus-visible .gallery-card__overlay {
	opacity: 1;
}

.gallery-card__caption {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 24px;
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 22px;
	line-height: 127%;
	text-align: left;
}

.gallery-page__more {
	margin-top: 32px;
	text-align: center;
}

.gallery-page__more[hidden] {
	display: none;
}

@media (max-width: 991.98px) {
	.gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575.98px) {
	.gallery-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.gallery-card__caption {
		font-size: 18px;
	}
}

/* Лайтбокс галереи (оболочка — общий .license-lightbox: чёрный фон + крестик) */
.gallery-lightbox {
	display: flex;
	align-items: center;
	justify-content: center;
}

.gallery-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 24px 96px;
}

.gallery-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 140px);
	width: auto;
	height: auto;
	object-fit: contain;
}

.gallery-lightbox__caption {
	margin-top: 16px;
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 18px;
	color: var(--white);
	text-align: center;
}

.gallery-lightbox__nav {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 5;
	width: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--white);
	opacity: 0.8;
	transition: opacity 0.3s ease;
}

.gallery-lightbox__nav:hover,
.gallery-lightbox__nav:focus {
	opacity: 1;
}

.gallery-lightbox__nav--prev {
	left: 0;
}

.gallery-lightbox__nav--next {
	right: 0;
}

@media (max-width: 575.98px) {
	.gallery-lightbox__figure {
		padding: 24px 48px;
	}

	.gallery-lightbox__nav {
		width: 48px;
	}
}