/* Наші доповнення ПОВЕРХ оригінального styles.css (його не редагуємо). Кожне видиме відхилення - docs/deviations.md. */

/* --- Карусель (src/components/Carousel.tsx): ширини рахує CSS замість inline-стилів Owl --- */
.bsp-carousel .owl-stage {
  display: flex;
  width: 100%;
  transform: translate3d(calc(var(--drag, 0px) - var(--pos, 0) * (100% + var(--m, 0px)) / var(--n, 1)), 0, 0);
  touch-action: pan-y;
}
.bsp-carousel .owl-stage:after { display: none; }
.bsp-carousel .owl-item {
  float: none;
  flex: 0 0 calc((100% - (var(--n, 1) - 1) * var(--m, 0px)) / var(--n, 1));
  width: calc((100% - (var(--n, 1) - 1) * var(--m, 0px)) / var(--n, 1));
  margin-right: var(--m, 0px);
  min-width: 0;
}
.bsp-carousel .owl-item img { -webkit-user-drag: none; user-select: none; }
.bsp-carousel.owl-grab { cursor: grabbing; }

/* --- Тексти, набрані рядками без абзацних відступів (прапорець «Абзаци без відступів») --- */
.article.compact p { margin-bottom: 0; }

/* картинкам додано атрибути width/height (без стрибків верстки) - висота має йти за шириною, як без атрибутів */
img { height: auto; }

/* меню послуг (7 пунктів з «Шевронами»): ширина плашки за шириною контенту, щоб не переносилось на 2 рядки (deviations №2) */
@media (min-width: 1170px) { header .cat nav { width: 1060px; margin-left: -530px; } }
@media (min-width: 720px) and (max-width: 1169px) {
  header .cat nav { width: calc(100% - 30px); margin-left: calc(-50% + 15px); }
  header .cat nav ul { padding: 10px 12px; }
}
@media (min-width: 1000px) and (max-width: 1169px) { header .cat nav ul li { font-size: 17px; padding: 10px 13px; } }
@media (min-width: 880px) and (max-width: 999px) { header .cat nav ul li { font-size: 15px; padding: 10px 10px; } }
@media (min-width: 720px) and (max-width: 879px) {
  header .cat nav ul { padding: 10px 6px; }
  header .cat nav ul li { font-size: 13px; padding: 10px 7px; }
}

/* deviations №3: на 720–741 px блок телефону в шапці налазив на логотип */
@media (min-width: 720px) and (max-width: 780px) {
  header .contacts { left: 10px; }
  header .contacts .phone { font-size: 23px; }
  header .contacts .mail { font-size: 14px; }
}

/* --- Шапка без верхнього меню (deviations №32): праворуч від лого «Контакти» і соцмережі, по центру слова BACKSTAGE PRO
   (у logo.svg 313×99 воно займає 20–78 px - центр збігається з центром лого, тож блок такої ж висоти, як лого: ширина колонки та сама, висота - за пропорцією лого, не більше 99 px) --- */
header .top_links { float: right; width: 33%; aspect-ratio: 313 / 99; max-height: 99px; padding-right: 15px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: flex-end; gap: 32px; }
header .top_links .social { float: none; width: auto; padding: 0; margin: 0; display: flex; gap: 20px; align-items: center; }
header .top_contacts { font-size: 24px; line-height: 30px; color: #231f20; text-decoration: none; border-bottom: 1px solid transparent; }
header .top_contacts:hover { color: #008dd0; }
@media (max-width: 719px) {
  header .top_links { float: left; width: 140px; aspect-ratio: auto; max-height: none; padding: 10px 0 0; margin-bottom: 10px; flex-direction: column; gap: 10px; }
  header .top_contacts { font-size: 18px; line-height: 22px; }
  header .top_links .social { gap: 18px; }
}

/* --- Соцмережі (deviations №26): оригінальні знаки Instagram/Facebook без кружечків; шапка - сірі, футер - білі --- */
header .social a, footer .footer .social a { display: inline-block; vertical-align: top; width: 26px; height: 26px; line-height: 0;
  border: 0; border-radius: 0; font-size: 0; text-decoration: none; }
header .social a svg, footer .footer .social a svg { display: block; width: 100%; height: 100%; fill: currentColor; }
header .social a { color: #5e5c5c; margin: 0; transition: color .2s; }
header .social a:hover { color: #008dd0; }
footer .footer .social a { color: #fff; margin-left: 18px; transition: opacity .2s; }
footer .footer .social a:hover { opacity: .8; }
@media (max-width: 1169px) {
  footer .footer .social a { margin: 0 9px; }
}

/* --- Нові блоки етапу SEO (докупи зі стилями оригіналу: .block, .title, .article, .index_services, .news) --- */
.index_services > .wrap > .title { color: #fff; margin-bottom: 20px; }
/* картки послуг на головній: 3 в ряд, на тлі блоку послуг */
.index_cards { padding: 60px 0; }
.index_cards .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.index_cards .card { display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; color: #231f20; }
.index_cards .card_photo { display: block; background: #f3f4f6; aspect-ratio: 4 / 3; }
.index_cards .card_photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.index_cards .card_body { padding: 20px 25px 10px; flex: 1; }
.index_cards .card_name { font-size: 26px; line-height: 30px; font-weight: 500; margin-bottom: 10px; }
.index_cards .card_name a { color: inherit; text-decoration: none; }
.index_cards .card_name a:hover { color: #008dd0; }
.index_cards .card_text { font-size: 16px; line-height: 22px; white-space: pre-line; }
.index_cards .card_button { text-align: center; padding: 10px 25px 25px; }
.index_cards .card_button a { display: inline-block; padding: 0 28px; line-height: 40px; background: #008dd0; color: #fff; font-size: 18px; border-radius: 7px; text-decoration: none; }
.index_cards .card_button a:hover { background: #0077b3; }
@media (max-width: 1169px) { .index_cards .cards { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 719px) {
  .index_cards { padding-top: 90px; }
  .index_cards .cards { grid-template-columns: 1fr; }
}
/* блог на головній: слайдер карток (Carousel), картки оригіналу .news .item на всю ширину слайда, однакової висоти */
.index_news .owl-stage { align-items: stretch; }
.index_news .owl-item { display: flex; }
.index_news .news .item { display: flex; flex-direction: column; width: auto; flex: 1; margin: 0; text-align: left; background: #fff; }
.index_news .news .item .photo img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.index_news .news .item .text { flex: 1; display: flex; flex-direction: column; }
.index_news .news .item .announce { flex: 1; }
.index_news .owl-nav .owl-prev { left: -45px; }
.index_news .owl-nav .owl-next { right: -45px; }
@media (max-width: 1169px) { .index_news .wrap { padding: 0 70px; } }
.index_steps .item .text { font-size: 14px; line-height: 20px; margin-top: 8px; }
.block.sec { padding: 40px 0; }
.block.sec .title { font-size: 36px; line-height: 40px; margin-bottom: 25px; }
.block.sec .article { max-width: 860px; margin: 0 auto; font-size: 16px; line-height: 24px; }
.block.sec .article p, .block.sec .article ul, .block.sec .article ol { margin-bottom: 15px; }
.block.sec .button { text-align: center; padding-top: 10px; }
.block.sec .button a { display: inline-block; padding: 0 20px; line-height: 40px; background: #008dd0; color: #fff; font-size: 21px; border-radius: 7px; text-decoration: none; }
.block.sec .button a:hover { background: #0077b3; }
.sec_photos { display: flex; justify-content: center; gap: 20px; margin: 0 auto 25px; max-width: 860px; }
.sec_photos img { width: calc((100% - 40px) / 3); max-width: 420px; height: auto; border-radius: 10px; }
.sec_photos_1 img { width: auto; max-width: 100%; }
.sec_photos_2 img { width: calc((100% - 20px) / 2); }
table.prices { width: 100%; max-width: 560px; margin: 0 auto 25px; border-collapse: collapse; font-size: 18px; }
table.prices td { padding: 12px 15px; border-bottom: 1px solid #cccccc; }
table.prices td.price { text-align: right; font-weight: 500; white-space: nowrap; }
.faq_item { max-width: 860px; margin: 0 auto 10px; border: 1px solid #cccccc; border-radius: 10px; padding: 0 20px; }
.faq_item summary { cursor: pointer; font-size: 18px; line-height: 24px; font-weight: 500; padding: 14px 0; list-style: none; position: relative; padding-right: 30px; }
.faq_item summary::-webkit-details-marker { display: none; }
.faq_item summary:after { content: '+'; position: absolute; right: 0; top: 12px; font-size: 24px; color: #008dd0; }
.faq_item[open] summary:after { content: '−'; }
.faq_item .article { padding-bottom: 14px; }
.sec_related .related { text-align: center; }
.sec_related .related a { display: inline-block; margin: 0 8px 12px; padding: 0 20px; line-height: 40px; border: 1px solid #008dd0; border-radius: 7px; color: #008dd0; text-decoration: none; font-size: 18px; }
.sec_related .related a:hover { background: #008dd0; color: #fff; }
@media (max-width: 719px) {
  .block.sec .title { font-size: 28px; line-height: 32px; }
  .sec_photos { flex-wrap: wrap; }
  .sec_photos img, .sec_photos_2 img { width: 100%; }
}

/* Плашка тексту слайда - вектор замість bg_slider_text(_t).png: білий прямокутник, повернутий на 2.2°, і синя «тінь»
   зі зсувом (геометрія і колір #05aaeb зняті з PNG). Псевдоелементи тягнуться за висотою плашки, тож довгий заголовок
   не розмиває картинку. deviations №25 */
#slider .item .inner .text { background: none; isolation: isolate; }
#slider .item .inner .text::before,
#slider .item .inner .text::after {
  content: ''; position: absolute; top: 10px; right: 12px; bottom: 19px; left: 3px; z-index: -1;
  background: #fff; transform: rotate(2.2deg); box-shadow: 0 0 1px rgba(0, 0, 0, .25);
}
#slider .item .inner .text::before { background: #05aaeb; z-index: -2; transform: translate(9px, 8px) rotate(2.2deg); box-shadow: none; }
@media (max-width: 1169px) {
  #slider .item .inner .text::before, #slider .item .inner .text::after { top: 7px; right: 13px; bottom: 14px; left: 4px; }
  #slider .item .inner .text::before { transform: translate(7px, 6px) rotate(2.2deg); }
}
@media (max-width: 719px) {
  #slider .item .inner .text::before, #slider .item .inner .text::after { display: none; }
}

/* плашка: висота за вмістом (мінімум - як в оригіналі), текст трохи вище, ніж в оригіналі (рішення користувача 2026-10-06) */
#slider .item .inner .text { height: auto; min-height: 177px; padding: 30px 45px 38px; }
#slider .item .inner .text .name.long { font-size: 32px; line-height: 38px; }
#slider .item .inner .text .name.xlong { font-size: 28px; line-height: 33px; }
@media (max-width: 1169px) {
  #slider .item .inner .text { min-height: 135px; padding: 14px 20px 24px; }
  #slider .item .inner .text .name.long { font-size: 25px; line-height: 29px; }
  #slider .item .inner .text .name.xlong { font-size: 22px; line-height: 26px; }
}
@media (max-width: 719px) {
  #slider .item .inner .text { min-height: 0; padding: 0; }
  #slider .item .inner .text .name.long { font-size: 26px; line-height: 30px; }
  #slider .item .inner .text .name.xlong { font-size: 22px; line-height: 27px; }
}

/* Темно-сині блоки: замість розмитих JPG-текстур (bg_l1, bg_clients, bg_footer) - ледь помітний градієнт у межах того
   самого кольору (середній колір текстур: #013e56 / #014763 / #014560). Рішення користувача 2026-10-06, deviations №23 */
.index_services, .index_cards { background: linear-gradient(165deg, #01486a 0%, #013e56 55%, #013449 100%); }
.index_clients { background: linear-gradient(165deg, #01506f 0%, #014763 55%, #013d56 100%); }
footer { background: linear-gradient(165deg, #014c69 0%, #014560 55%, #013a51 100%); }

/* --- SEO-текст внизу головної і сторінок послуг: довгий згорнуто з градієнтом, «Читати далі» / «Згорнути» (ReadMore.tsx, deviations №27) --- */
.article.read_more { position: relative; overflow: hidden; transition: max-height .5s ease; }
.article.read_more.collapsed { max-height: 240px; }
.article.read_more.collapsed::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 90%); }
.read_more_toggle { padding: 5px 0 10px; font-size: 18px; line-height: 24px; font-weight: 500; }
.read_more_toggle a { color: #008dd0; text-decoration: none; border-bottom: 1px solid rgba(0, 141, 208, .5); }
.read_more_toggle a:hover { border-color: transparent; }
.read_more_toggle a::after { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 0 4px 10px; vertical-align: middle;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .3s; }
.read_more_toggle a[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -2px; }

/* --- Наші клієнти (deviations №29): векторні логотипи білими силуетами на градієнті; однакова висота, вузькі - за шириною слайда --- */
.index_clients .item { display: flex; align-items: center; justify-content: center; height: 150px; }
.index_clients .item img { height: 48px; width: auto; max-width: 100%; object-fit: contain; filter: brightness(0) invert(1); opacity: .9; transition: opacity .2s; }
.index_clients .item img:hover { opacity: 1; }
@media (max-width: 719px) { .index_clients .item { height: 110px; } .index_clients .item img { height: 40px; } }

/* --- Вертикальний ритм секцій (deviations №31). Одна шкала на весь сайт:
   --sec - поле секції зверху/знизу до видимого контенту, --gap - від заголовка секції до її вмісту (і до «Дивитися все»).
   Десктоп 80/40, планшет 60/30, мобільний 44/24. Сусідні білі секції не подвоюють поле. --- */
:root { --sec: 80px; --gap: 40px; --cat: 30px; }
@media (max-width: 1169px) { :root { --sec: 60px; --gap: 30px; } }
@media (max-width: 719px) { :root { --sec: 44px; --gap: 24px; --cat: 70px; } }

.block.index_cards, .block.index_steps, .block.index_portfolio, .block.index_clients, .block.index_news, .block.sec,
.block.block_form:not(.onslider) { padding: var(--sec) 0; }
.block .title, .index_news .title, .block.sec .title { margin-bottom: var(--gap); }
.block .all { padding-top: var(--gap); }
/* заголовок + підзаголовок (кроки): підзаголовок ближче до заголовка, далі - звичайний відступ */
.index_steps .title { margin-bottom: 15px; }
.index_steps .announce { margin-bottom: var(--gap); }
/* перша секція під меню послуг: меню звисає на 30 px (мобільний - на 70 px, оригінал: bottom -70px) */
header + .block, header + #content > .block:first-child { padding-top: calc(var(--sec) + var(--cat)); }
/* сходинки послуг: у кожного пункту власні 30 px (10 на планшеті) - компенсуємо там, де секція починається/закінчується пунктом */
.block.index_services { padding: var(--sec) 0 calc(var(--sec) - 30px); }
.block.index_services:not(:has(> .wrap > .title)) { padding-top: calc(var(--sec) - 30px); }
.block.index_services > .wrap > .title { margin-bottom: calc(var(--gap) - 30px); }
header + #content > .block.index_services:first-child { padding-top: calc(var(--sec) + var(--cat)); }
header + #content > .block.index_services:first-child:not(:has(> .wrap > .title)) { padding-top: calc(var(--sec) - 30px + var(--cat)); }
@media (max-width: 1169px) {
  .block.index_services { padding-bottom: calc(var(--sec) - 10px); }
  .block.index_services:not(:has(> .wrap > .title)) { padding-top: calc(var(--sec) - 10px); }
  .block.index_services > .wrap > .title { margin-bottom: calc(var(--gap) - 10px); }
  header + #content > .block.index_services:first-child:not(:has(> .wrap > .title)) { padding-top: calc(var(--sec) - 10px + var(--cat)); }
}
@media (max-width: 719px) { .block.index_services { padding-bottom: calc(var(--sec) - 30px); } }
/* клієнти: рядок логотипів за висотою логотипа, стрілки по центру логотипів */
.index_clients .item { height: 48px; }
.index_clients .owl-nav { margin-top: -35px; }
@media (max-width: 719px) { .index_clients .item { height: 40px; } .index_clients .owl-nav { margin-top: -38px; } }
/* білі секції одна за одною: одне поле між ними, не два */
.index_news + .block_form, .block.sec + .block_form, .block.sec + .block.sec, .block.sec + .index_steps, .index_steps + .block.sec { padding-top: 0; }
/* SEO-текст після контактів (обидва білі): поле лише знизу */
.static_2 { padding-bottom: var(--sec); }
/* останній абзац тексту секції не додає свої 15 px до поля */
.block.sec .article > :last-child, .block.sec .wrap > :last-child { margin-bottom: 0; }

/* --- Ширина сайту 1280 px на екранах від 1400 px (deviations №33). 1170–1399 - як було, 1060 px.
   Поріг 1400: стрілки каруселей стоять за 45 px від краю контенту, на вужчих екранах вилазили б. --- */
@media (min-width: 1400px) {
  .wrap { width: 1280px; }
  header .cat nav { width: 1280px; margin-left: -640px; }
  /* слайдер: висота за рідною висотою слайдів (892×584), форма по центру висоти */
  #slider .item .inner { height: 584px; margin-left: 0; }
  /* стрілки слайдера - за межами контенту (оригінал: 100 px від краю екрана, тепер там форма) */
  #slider .owl-nav .owl-prev { left: calc((100% - 1280px) / 2 - 50px); }
  #slider .owl-nav .owl-next { right: calc((100% - 1280px) / 2 - 50px); }
  .block_form.onslider { height: 584px; margin-top: -584px; }
  .block_form.onslider .form { height: 584px; }
  .block_form.onslider .form form { margin-top: 65px; }
  /* список блогу: 4 картки на всю ширину замість фіксованих 240 px */
  #content .news:not(.index_news .news) { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 30px; text-align: left; }
  #content .news:not(.index_news .news) .item { width: auto; margin: 0 0 30px; }
  #content .news:not(.index_news .news) .item .photo img { width: 100%; height: auto; }
}

/* --- Фільтри категорій у блоці портфоліо (deviations №34): стиль фільтрів сторінки /portfolio, по центру --- */
.portfolio_tabs .nav { text-align: center; margin-bottom: calc(var(--gap) - 10px); }
.portfolio_tabs .nav ul li a { cursor: pointer; }
@media (max-width: 719px) {
  .portfolio_tabs .nav ul li { font-size: 14px; margin-right: 8px; padding-right: 8px; }
}

/* === Типографіка (deviations №35): Manrope - заголовки, Inter - текст; одна шкала замість 17 розмірів.
   Десктоп / планшет (≤1169) / мобільний (≤719): H2 секції 40/34/26, H3 пункту 28/24/22, лід 19–20 Light, текст 16/26, дрібне 12–14. === */
:root { --head: 'Manrope', 'Roboto', sans-serif; --text: 'Inter', 'Roboto', sans-serif; }
body, input, textarea, select, button, #body button, button.send, input[type=submit], input[type=button],
.form input[type=text], .form input[type=email], .form textarea { font-family: var(--text); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* заголовки */
.block .title, .block.sec .title, .page_title h1, .detail_news h1, #slider .item .inner .text .name,
.index_services .item .text .name, .index_cards .card_name, .news .item .name, .block_form .contacts .name,
.article h1, .article h2, .article h3, .faq_item summary, .gb .items .item .name, .modal .title p:first-child,
.form .name, .block .all, .read_more_toggle, header .top_contacts, header .cat nav ul li { font-family: var(--head); }
.block .title, .block.sec .title { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -.01em; }
.page_title h1 { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -.01em; }
#slider .item .inner .text .name h1, #slider .item .inner .text .name span { font-weight: 600; letter-spacing: -.01em; }
#slider .item .inner .text .announce { font-size: 14px; line-height: 21px; }
header .cat nav ul li { font-weight: 600; letter-spacing: .02em; }
header .cat nav ul li.active > a { font-weight: 800; }
header .top_contacts { font-size: 20px; line-height: 28px; font-weight: 600; }

/* сходинки послуг: назва 28, опис - лід Light 19 */
.index_services .item .text .name { font-size: 28px; line-height: 34px; font-weight: 700; margin-bottom: 12px; }
.index_services .item .text .announce { font-size: 19px; line-height: 29px; font-weight: 300; margin-bottom: 24px; }
.index_services .item .text .button a { font-size: 17px; line-height: 44px; padding: 0 24px; font-weight: 500; }
/* картки послуг */
.index_cards .card_name { font-size: 24px; line-height: 30px; font-weight: 700; }
.index_cards .card_text { font-size: 16px; line-height: 24px; }
.index_cards .card_button a { font-size: 16px; line-height: 42px; font-weight: 500; }
/* кроки */
.index_steps .announce { font-size: 20px; line-height: 28px; font-weight: 300; }
.index_steps .items .item .name { font-size: 18px; line-height: 26px; }
.index_steps .items .item .photo .n { font-family: var(--head); font-weight: 700; font-size: 56px; }
/* «Дивитися все», «Читати далі» */
.block .all { font-size: 20px; line-height: 28px; font-weight: 700; }
.read_more_toggle { font-size: 17px; font-weight: 700; }
/* фільтри портфоліо */
.gallery .nav ul li { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .04em; }
.gallery .nav ul li.active > a { font-weight: 600; }
/* картки блогу */
.news .item .name { font-size: 17px; line-height: 24px; font-weight: 700; text-transform: none; }
.news .item .announce { font-size: 15px; line-height: 23px; }
.news .item .detailed { font-size: 14px; }
/* текст статей, SEO-текст, секції послуг */
.article, .static .article, .block.sec .article { font-size: 16px; line-height: 26px; }
.article p { margin-bottom: 16px; }
.article h1 { font-size: 30px; line-height: 38px; font-weight: 700; }
.article h2 { font-size: 24px; line-height: 32px; font-weight: 700; }
.article h3 { font-size: 20px; line-height: 28px; font-weight: 700; }
.article b, .article strong { font-weight: 600; }
.detail_news h1 { font-size: 30px; line-height: 38px; font-weight: 700; text-transform: none; margin-bottom: 20px; }
.faq_item summary { font-size: 18px; font-weight: 700; }
table.prices { font-size: 17px; }
table.prices td { line-height: 26px; }
table.prices td.price { font-weight: 600; }
/* контакти і форми */
.block_form .contacts .name { font-size: 24px; line-height: 30px; font-weight: 700; }
.block_form .contacts .address { font-size: 16px; line-height: 24px; }
.block_form .contacts .hours { font-size: 15px; line-height: 23px; }
.form .name { font-size: 18px; font-weight: 600; }
.form input[type=text], .form input[type=email], .form input[type=password], .form textarea, .form select { font-size: 16px; }
.form label span.for { font-size: 16px; }
/* відгуки, хлібні крихти, футер */
.gb .items .item .name { font-size: 17px; line-height: 22px; font-weight: 700; }
.gb .items .item .message { font-size: 15px; line-height: 23px; }
.gb .items .item .date { font-size: 13px; }
.bc { font-size: 15px; }
footer .footer nav ul li { font-size: 15px; }
footer .footer .copy { font-size: 13px; line-height: 18px; }

@media (max-width: 1169px) {
  .block .title, .block.sec .title, .page_title h1 { font-size: 34px; line-height: 42px; }
  .index_services .item .text .name { font-size: 24px; line-height: 30px; }
  .index_services .item .text .announce { font-size: 17px; line-height: 26px; }
  .index_steps .items .item .name { font-size: 15px; line-height: 22px; }
  .index_steps .items .item .photo .n { font-size: 38px; }
  .index_steps .announce { font-size: 18px; line-height: 26px; }
}
@media (max-width: 719px) {
  .block .title, .block.sec .title, .page_title h1 { font-size: 26px; line-height: 32px; }
  .index_services .item .text .name { font-size: 22px; line-height: 28px; }
  .index_cards .card_name { font-size: 22px; line-height: 28px; }
  .article h1, .detail_news h1 { font-size: 24px; line-height: 30px; }
  .article h2 { font-size: 21px; line-height: 28px; }
  .block .all { font-size: 18px; }
  header .top_contacts { font-size: 18px; }
}
/* розміри, вписані в текст старою адмінкою (style="font-size:14px" у SEO-текстах і статтях), не ламають шкалу */
.article [style*="font-size"], .detail_news .text [style*="font-size"] { font-size: inherit !important; line-height: inherit !important; }
.article h1 strong, .article h2 strong, .article h3 strong, .article h1 b, .article h2 b, .article h3 b { font-weight: inherit; }

/* --- Шапка (deviations №36): пошта/телефон по центру слова BACKSTAGE PRO - обгортка тієї ж висоти, що лого (як .top_links) --- */
@media (min-width: 720px) {
  header .contacts_box { position: absolute; top: 0; left: 0; width: 33%; aspect-ratio: 313 / 99; max-height: 99px; padding-left: 15px; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
  header .contacts_box .contacts { position: static; }
  header .contacts .call { margin-top: 2px; }
}
@media (min-width: 720px) and (max-width: 780px) { header .contacts_box { padding-left: 10px; } }
@media (max-width: 719px) { header .contacts_box { display: contents; } }

/* --- Меню послуг (deviations №36): пункти розподіляються на всю ширину плашки, на широких екранах шрифт більший --- */
@media (min-width: 720px) {
  header .cat nav ul { display: flex; }
  header .cat nav ul li { flex: 1 1 auto; text-align: center; }
}
@media (min-width: 1400px) {
  header .cat nav ul { padding: 12px 20px; }
  header .cat nav ul li { font-size: 20px; line-height: 24px; }
}

/* --- Форма заявки (deviations №37): звичайна двохрядкова кнопка замість графічної, поля з однаковим заокругленням, векторні іконки --- */
.form input[type=text], .form input[type=email], .form input[type=password], .form textarea, .form select { border-radius: 10px; }
.form .warn { background: url("../images/icon_att.svg") no-repeat 0 -1px / 16px 16px; padding-left: 25px; }
.block_form .form div.jfilestyle label { border-radius: 10px; background: url("../images/icon_upload.svg") #eaeaea no-repeat right 16px center / 22px 22px; }
.block_form .form .submit button.btn_quote { width: 100%; height: auto !important; min-height: 62px; padding: 10px 14px !important; border-radius: 10px; text-align: center;
  background: linear-gradient(90deg, #0388d7 0%, #05b7f3 50%, #049ee4 74%, #0385d5 100%) !important; box-shadow: 0 4px 12px rgba(3, 136, 215, .25);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: filter .2s, box-shadow .2s; }
.block_form .form .submit button.btn_quote:hover { opacity: 1; filter: brightness(1.07); box-shadow: 0 6px 16px rgba(3, 136, 215, .35); }
.block_form .form .submit button.btn_quote > strong { position: static; font-family: var(--head); font-weight: 700; font-size: 19px; line-height: 24px; color: #fff; }
.block_form .form .submit button.btn_quote > span { position: static; font-size: 12px; line-height: 15px; font-weight: 400; color: rgba(255, 255, 255, .92); text-transform: none; }
.block_form .form .submit { margin-bottom: 14px; }
/* зелений hover кнопок відправки з оригіналу (#85c418) - синій, як усюди на сайті */
#body button[type=submit]:hover, button.send:hover, input[type=submit]:hover { background-color: #0077b3; }

/* мобільний (deviations №37): меню послуг (absolute, bottom -70px в оригіналі) закривало заголовок форми «Замовлення на прорахунок» -
   форму неможливо було розгорнути. Меню - у потоці під формою, так само заходить на 40 px на наступний блок */
@media (max-width: 719px) {
  header .cat nav { position: relative; bottom: auto; margin: 0 0 -40px; }
  .block_form.onslider { padding-bottom: 20px; }
  :root { --cat: 40px; }
}
.block_form .form .submit button.btn_quote .nw { position: static; white-space: nowrap; font-size: inherit; color: inherit; }

/* === deviations №38 === */
/* рамка форми - fieldset/legend (вектор) замість border_form.png */
.block_form .form form { background: none; height: auto; padding: 0; }
.block_form .form fieldset.frame { border: 2px solid #b4b4b4; border-radius: 14px; margin: 0; padding: 6px 38px 24px; min-width: 0; }
.block_form .form legend.name { position: static; top: auto; margin: 0 auto; padding: 0 16px; }
.block_form .form .inner > .warn:first-child { margin-top: 6px; }
/* кнопка без тіні - такого ефекту на сайті ніде немає */
.block_form .form .submit button.btn_quote, .block_form .form .submit button.btn_quote:hover { box-shadow: none; }
/* компактніші відступи форми - вміщається у слайдер 500 px з рамкою */
.block_form .form legend.name { line-height: 26px; padding: 0 10px; white-space: nowrap; }
.block_form .form .inner > .warn:first-child { margin-top: 4px; }
.block_form .form input[type=text], .block_form .form input[type=email] { margin-bottom: 10px; }
.block_form .form label span.for { margin-bottom: 6px; }
.block_form .form div.jfilestyle { margin-bottom: 10px; }
.block_form .form .submit { margin-bottom: 12px; }
.block_form .form .submit button.btn_quote { padding: 8px 14px !important; min-height: 58px; }
.block_form .form fieldset.frame { padding-bottom: 18px; }
.block_form .form .submit + .warn { margin-bottom: 0; }
/* форма на слайдері - по центру висоти слайдера (над меню послуг, що заходить на 30 px); планшет - зверху, як в оригіналі */
@media (min-width: 1170px) {
  .block_form.onslider .form { display: flex; flex-direction: column; justify-content: center; padding-bottom: 38px; box-sizing: border-box; }
  .block_form.onslider .form form { margin-top: 0 !important; }
}
@media (max-width: 719px) {
  .block_form .form { border: 0; }
  .block_form .form fieldset.frame { padding: 4px 20px 20px; }
}

/* === deviations №50 === */
/* матове скло під формою на слайдері лендингів (.onslider; попап і контакти - без змін): напівпрозорий фон + розмиття, щоб форма читалась на будь-якій картинці;
   заголовок у розриві рамки - своя плашка, бо фон fieldset починається з середини legend */
.block_form.onslider .form fieldset.frame { background: rgba(255, 255, 255, 0.38); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-color: rgba(180, 180, 180, 0.9); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); }
.block_form.onslider .form legend.name { background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-radius: 8px; }
@supports not (backdrop-filter: blur(1px)) {
  .block_form.onslider .form fieldset.frame { background: rgba(255, 255, 255, 0.88); }
}

/* попапи: поява/зникнення, заокруглені вікна в стилі форми */
@keyframes bspFadeIn { from { opacity: 0; } to { opacity: .8; } }
@keyframes bspFadeOut { from { opacity: .8; } to { opacity: 0; } }
@keyframes bspUp { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bspDown { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(16px) scale(.98); } }
.mfp-bg.bsp-popup.mfp-ready { animation: bspFadeIn .25s ease both; }
.mfp-bg.bsp-popup.mfp-removing { animation: bspFadeOut .25s ease both; }
.mfp-wrap.bsp-popup.mfp-ready .mfp-content { animation: bspUp .32s cubic-bezier(.2, .7, .2, 1) both; }
.mfp-wrap.bsp-popup.mfp-removing .mfp-content { animation: bspDown .25s ease both; }
@media (prefers-reduced-motion: reduce) { .bsp-popup, .bsp-popup .mfp-content { animation: none !important; } }
.modal { border-radius: 16px; padding: 36px 40px 30px; }
.modal .title p:first-child { font-size: 22px; line-height: 28px; font-weight: 700; }
.modal .mfp-close, .quote_modal .mfp-close { color: #9a9a9a; top: 6px; right: 6px; }
#call form button.send, #call form button.send:hover { width: 100%; height: 50px; padding: 0 20px; border-radius: 10px; font-family: var(--head); font-weight: 700; font-size: 17px;
  background: linear-gradient(90deg, #0388d7 0%, #05b7f3 50%, #049ee4 74%, #0385d5 100%); }
#call form button.send:hover { filter: brightness(1.07); }
/* універсальний попап із формою заявки */
.quote_modal { position: relative; width: 420px; max-width: calc(100vw - 30px); margin: 0 auto; box-sizing: border-box; padding: 30px 36px 22px; background: #fff; border-radius: 16px; }
.quote_modal .form { float: none; position: static; width: auto; height: auto; padding: 0; border: 0; }
.quote_modal .form form { padding: 0; }
.quote_modal .form fieldset.frame { border: 0; padding: 0; }
.quote_modal .form legend.name { padding: 0; margin: 0 auto 4px; font-size: 22px; line-height: 28px; font-weight: 700; text-align: center; }
.quote_modal .quote_service { text-align: center; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #008dd0; margin-bottom: 6px; }
.quote_modal .form .inner { display: block !important; }

/* поява блоків під час прокрутки */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rv-delay, 0ms); }
.rv.rv-in { opacity: 1; transform: none; }

/* футер: логотип і решта - по центру по вертикалі */
@media (min-width: 1170px) {
  footer > .wrap { display: flex; align-items: center; justify-content: space-between; }
  footer > .wrap > .clear { display: none; }
  footer .logo, footer .footer { float: none; }
  footer .footer { padding-top: 0; }
}

/* === Мобільний (deviations №39) === */
@media (max-width: 719px) {
  /* форма на першому екрані завжди розгорнута (оригінал: згорнута до кліку по заголовку) */
  .block_form.onslider .form .inner { display: block; padding-top: 0; }
  .block_form.onslider .form .name { cursor: default; }
  /* «Контакти» з соцмережами ліворуч і пошта/телефон праворуч - в один ряд на будь-якій ширині (на 320–370 px контакти падали нижче) */
  header .top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; }
  header .top .wrap > .clear { display: none; }
  header #logo { flex: 0 0 100%; }
  header .top_links { float: none; width: auto; margin: 0 0 10px; padding: 0; }
  header .contacts { float: none; margin-bottom: 10px; }
  /* меню послуг: дрібніший шрифт і відступи - по 3–4 пункти в ряд */
  header .cat nav ul { padding: 8px 6px; }
  header .cat nav ul li { font-size: 15px; line-height: 20px; padding: 9px 10px; letter-spacing: .01em; }
}
@media (max-width: 359px) { header .contacts .phone { font-size: 18px; } }
/* приховане системне поле файлу (clip) мало власну ширину ~300 px і на 320 px давало горизонтальну прокрутку */
.form input[type=file] { width: 1px; height: 1px; left: 0; top: 0; }

/* знак BSP у блоці контактів - вектор (deviations №40) */
.block_form .contacts .c2 .photo { background: url("../images/logo_sm.svg") no-repeat center center / contain; }

/* === deviations №41 === */
/* Головна: класичний слайдер - ліворуч назва, опис, «Детальніше»; праворуч ілюстрація; без форми й нахиленої плашки */
.home_hero .hero { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); align-items: center; column-gap: 40px; height: 500px; padding-bottom: 30px; box-sizing: border-box; }
.home_hero .hero_title { font-family: var(--head); font-size: 52px; line-height: 60px; font-weight: 700; letter-spacing: -.02em; color: #231f20; margin-bottom: 18px; }
.home_hero .hero_announce { font-size: 19px; line-height: 29px; font-weight: 300; color: #3a3a3a; margin-bottom: 30px; }
.home_hero .hero_announce p { margin: 0; }
.home_hero .hero_button a { display: inline-block; padding: 0 34px; line-height: 52px; border-radius: 10px; color: #fff; text-decoration: none;
  font-family: var(--head); font-weight: 700; font-size: 17px; background: linear-gradient(90deg, #0388d7 0%, #05b7f3 50%, #049ee4 74%, #0385d5 100%); transition: filter .2s; }
.home_hero .hero_button a:hover { filter: brightness(1.07); }
.home_hero .hero_img { height: 100%; display: flex; align-items: center; justify-content: center; }
.home_hero .hero_img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 16px; }
.home_hero .owl-dots { bottom: 46px; }
#slider.home_hero .owl-nav .owl-next { right: 10px; }
@media (min-width: 1400px) {
  .home_hero .hero { height: 584px; }
  .home_hero .hero_title { font-size: 60px; line-height: 68px; }
  .home_hero .hero_announce { font-size: 20px; line-height: 31px; }
  #slider.home_hero .owl-nav .owl-next { right: calc((100% - 1280px) / 2 - 50px); }
}
@media (max-width: 1169px) {
  .home_hero .hero { height: 470px; column-gap: 24px; }
  .home_hero .hero_title { font-size: 40px; line-height: 48px; }
  .home_hero .hero_announce { font-size: 17px; line-height: 26px; margin-bottom: 24px; }
}
@media (max-width: 719px) {
  .home_hero .hero { grid-template-columns: 1fr; height: auto; padding: 0 0 16px; row-gap: 20px; text-align: center; }
  .home_hero .hero_title { font-size: 32px; line-height: 38px; margin-bottom: 10px; }
  .home_hero .hero_announce { font-size: 16px; line-height: 24px; margin-bottom: 18px; }
  .home_hero .hero_img { height: 230px; }
  #slider.home_hero { margin-bottom: 20px; }
  #slider.home_hero .owl-dots { display: block; position: static; margin-top: 4px; }
}

/* картки послуг: 4 в ряд, неповний ряд - по центру; компактніші */
.index_cards .cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.index_cards .card { flex: 0 0 calc((100% - 3 * 24px) / 4); }
.index_cards .card_photo { aspect-ratio: 3 / 2; }
.index_cards .card_body { padding: 16px 20px 6px; }
.index_cards .card_name { font-size: 22px; line-height: 28px; margin-bottom: 6px; }
.index_cards .card_text { font-size: 14px; line-height: 20px; color: #555; }
.index_cards .card_button { padding: 10px 20px 20px; }
.index_cards .card_button a { line-height: 38px; padding: 0 24px; font-size: 15px; }
@media (max-width: 1169px) { .index_cards .cards { gap: 20px; } .index_cards .card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 719px) { .index_cards .card { flex-basis: 100%; } }
/* ілюстрація слайда стоїть на нижньому краї (під меню послуг), як в оригіналі - зріз фото не видно; текст - по центру видимої частини */
.home_hero .hero { padding-bottom: 0; }
.home_hero .hero_img { align-items: flex-end; }
.home_hero .hero_img img { border-radius: 16px 16px 0 0; }
.home_hero .hero_text { padding-bottom: 40px; }
@media (max-width: 719px) { .home_hero .hero_text { padding-bottom: 0; } .home_hero .hero_img img { border-radius: 12px; } }
/* планшет: стрілки слайдера головної налазили на текст - лишаємо крапки, свайп і автогортання */
@media (max-width: 1169px) { #slider.home_hero .owl-nav { display: none; } }
/* ілюстрація-вирізка (PNG з прозорим фоном) - на всю висоту слайдера, притиснута вправо; прозора ліва частина заходить під колонку тексту
   (предмет у кадрі - від ~15% ширини). Непрозоре фото (JPEG) лишається в своїй колонці */
@media (min-width: 1170px) {
  .home_hero .hero { position: relative; }
  .home_hero .hero_img--cut { position: absolute; right: -40px; bottom: 0; height: 450px; display: block; pointer-events: none; }
  .home_hero .hero_img--cut img { height: 100%; width: auto; max-width: none; max-height: none; border-radius: 0; }
  .home_hero .hero_text { position: relative; z-index: 1; }
}
@media (min-width: 1400px) { .home_hero .hero_img--cut { height: 584px; right: -60px; } }
/* ширша колонка тексту - підзаголовок «… • … • …» вміщається в рядок (предмет на ілюстрації починається правіше) */
@media (min-width: 1170px) { .home_hero .hero { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); } }
/* планшет: назви слайдів в один рядок - ширша колонка тексту, розмір назви від ширини екрана (найдовша - «Шеврони та нашивки») */
@media (min-width: 720px) and (max-width: 1169px) {
  .home_hero .hero { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
  .home_hero .hero_title { font-size: min(40px, 4.6vw); line-height: 1.2; }
}

/* блок контактів (deviations №42): підзаголовки адрес жирним, e-mail першим пунктом */
.block_form .contacts .address strong, .block_form .contacts .hours strong { font-weight: 600; }
.block_form .contacts .contact_mail a { color: #231f20; text-decoration: none; }
.block_form .contacts .contact_mail a:hover { color: #008dd0; }
.block_form .contacts .contact_mail { margin-bottom: 39px; }
.contacts_map { clear: both; padding-top: var(--gap); }
.contacts_map iframe { display: block; width: 100%; height: 440px; border-radius: 15px; }
@media (max-width: 1169px) { .contacts_map iframe { height: 380px; } }
@media (max-width: 719px) { .contacts_map iframe { height: 300px; } }

/* попап не зсуває сторінку: місце під смугу прокрутки зарезервоване завжди (deviations №44) */
html { scrollbar-gutter: stable; }
.block_form .contacts .contact_mail { margin-bottom: 24px; }
/* фото картки - рівно 3:2 незалежно від пропорцій файлу (квадратне фото розтягувало картку) */
.index_cards .card_photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* сторінки послуг (deviations №45): на десктопі плашка з H1 - по центру видимої висоти слайда (над меню послуг), а не внизу;
   на планшеті (720–1169) - вгорі слайда, як в оригіналі (top: 0 з styles.css) */
@media (min-width: 1170px) {
  #slider.single_slide .item .inner .text { top: calc((100% - 30px) / 2); bottom: auto; transform: translateY(-50%); }
}
@media (min-width: 1170px) { #slider.single_slide .item .inner .text { top: calc((100% - 38px) / 2); } }
/* плашка: більше повітря зверху й знизу (довгі H1 у 2-3 рядки), відступ між назвою й описом */
#slider.single_slide .item .inner .text { padding-top: 46px; padding-bottom: 58px; }
#slider.single_slide .item .inner .text .name { margin-bottom: 10px; }
@media (max-width: 1169px) { #slider.single_slide .item .inner .text { padding-top: 24px; padding-bottom: 34px; } }
@media (max-width: 719px) { #slider.single_slide .item .inner .text { padding: 0; } }

/* хлібні крихти над H1 у плашці сторінки послуги (ТЗ SEO, deviations №46) */
.block.sec .button { padding-top: 24px; }

/* H1 головної над слайдером (ТЗ SEO головної, deviations №47): видимий, але стриманий - рядок над слайдами */
header .home_h1 h1 { font-family: var(--head); font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; }
@media (min-width: 720px) { header .home_h1 { margin-top: -6px; margin-bottom: -14px; position: relative; z-index: 2; } }
@media (max-width: 719px) { header .home_h1 { text-align: center; margin-bottom: 14px; } header .home_h1 h1 { font-size: 13px; line-height: 18px; } }
/* H2 над картками послуг - білий на темному тлі; назви карток - H3 */
.index_cards > .wrap > .title { color: #fff; }
.index_cards h3.card_name { margin: 0 0 6px; }

/* === deviations №48 === */
/* планшет: ілюстрація-вирізка не стискається разом із колонкою - притиснута вправо поверх прозорої частини,
   висота від ширини екрана (предмет у кадрі - від ~13% ширини), текст - вужча колонка */
@media (min-width: 720px) and (max-width: 1169px) {
  .home_hero .hero { position: relative; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
  .home_hero .hero_img--cut { position: absolute; right: -15px; bottom: 0; height: min(420px, calc(42vw - 17px)); display: block; pointer-events: none; }
  .home_hero .hero_img--cut img { height: 100%; width: auto; max-width: none; max-height: none; border-radius: 0; }
  .home_hero .hero_text { position: relative; z-index: 1; }
  .home_hero .hero_title { font-size: min(40px, 3.9vw); }
}
/* телефон у шапці: менший розмір раніше, ніж почне переноситись (720–1169: колонка - третина ширини) */
@media (min-width: 720px) and (max-width: 1169px) {
  header .contacts .phone { font-size: clamp(19px, 2.75vw, 28px); line-height: 1.15; white-space: nowrap; }
  header .contacts .phone a sup { font-size: .6em; margin-top: -.15em; }
}
/* H1 головної - по центру і ближче до шапки */
header .home_h1 { text-align: center; }
@media (min-width: 720px) { header .home_h1 { margin-top: -18px; } }
/* назви слайдів головної трохи менші - довга «Плакетки та грамоти» не заходить на ілюстрацію (розмір ілюстрацій той самий) */
@media (min-width: 1170px) and (max-width: 1399px) { .home_hero .hero_title { font-size: 48px; line-height: 56px; } }
@media (min-width: 1400px) { .home_hero .hero_title { font-size: 54px; line-height: 62px; } }
/* H1 не обтікає лого/контакти шапки: на планшеті поле шапки 15 px - підйом менший; окремий контекст форматування */
header .home_h1 { clear: both; }
@media (min-width: 720px) and (max-width: 1169px) { header .home_h1 { margin-top: -6px; margin-bottom: -6px; } }

/* блок контактів на мобільному (deviations №51): лого по центру, під ним назва компанії в один рядок, далі телефон
   і «Подзвоніть мені» - усе по центру (в оригіналі лого й текст поруч, назва і телефон ламались на 2-3 рядки) */
@media (max-width: 719px) {
  .block_form .contacts .c2 { text-align: center; }
  .block_form .contacts .c2 .photo { display: block; margin: 0 auto 16px; }
  .block_form .contacts .c2 .text { display: block; width: auto; padding: 0; }
  .block_form .contacts .c2 .name { white-space: nowrap; font-size: clamp(19px, 6.2vw, 24px); margin-bottom: 8px; }
  .block_form .contacts .c2 .phones { display: block; width: auto; margin: 0; text-align: center; }
  .block_form .contacts .c2 .phone { white-space: nowrap; text-align: center; font-size: clamp(22px, 7.4vw, 28px); }
  .block_form .contacts .c2 .call { text-align: center; }
  .block_form .contacts .c2 > .clear { display: none; }
}

/* каруселі на мобільному (deviations №52): стрілки менші й ближче до краю - поля під них 34 px замість 70 px,
   картка займає ~80% ширини екрана замість ~60% */
@media (max-width: 719px) {
  .index_portfolio .wrap, .index_clients .wrap, .index_news .wrap { padding: 0 34px; }
  .index_portfolio .owl-nav .owl-prev, .index_clients .owl-nav .owl-prev, .index_news .owl-nav .owl-prev { left: -32px; }
  .index_portfolio .owl-nav .owl-next, .index_clients .owl-nav .owl-next, .index_news .owl-nav .owl-next { right: -32px; }
  .index_portfolio .owl-nav > div, .index_clients .owl-nav > div, .index_news .owl-nav > div { font-size: 44px; width: 28px; text-align: center; }
}

/* сторінки послуг (deviations №53): хлібні крихти - не в плашці слайда, а під меню послуг, прямо на темному фоні першої
   секції (білі текст і будиночок), без окремої смуги; секція починається компактніше, ніж зі звичайним --sec */
header + #content > .bc { padding-top: calc(var(--cat) + 26px); padding-bottom: 26px; margin-bottom: 0; }
header + #content { position: relative; }
header + #content > .bc:has(+ .block.index_services) { position: absolute; top: 48px; left: 0; right: 0; z-index: 2; margin: 0 auto; padding: 0 0 0 10px; color: #fff; }
header + #content > .bc:has(+ .block.index_services) a { color: #fff; }
header + #content > .bc:has(+ .block.index_services) a:hover { opacity: .75; }
header + #content > .bc:has(+ .block.index_services) a.home { filter: brightness(0) invert(1); }
header + #content > .bc + .block.index_services { padding-top: 100px; }
header + #content > .bc + .block.index_services:not(:has(> .wrap > .title)) { padding-top: 70px; }
@media (max-width: 1169px) {
  header + #content > .bc:has(+ .block.index_services) { padding-left: 15px; }
  header + #content > .bc + .block.index_services:not(:has(> .wrap > .title)) { padding-top: 90px; }
}
@media (max-width: 719px) {
  header + #content > .bc:has(+ .block.index_services) { top: 56px; }
  header + #content > .bc + .block.index_services { padding-top: 104px; }
  header + #content > .bc + .block.index_services:not(:has(> .wrap > .title)) { padding-top: 94px; }
}

/* Cloudflare Turnstile (deviations №54): місце під віджет перевірки «ви людина». Зазвичай він невидимий (interaction-only)
   і порожній контейнер не займає місця; галочка з'являється над кнопкою відправки, лише якщо Cloudflare просить підтвердження */
.turnstile-slot:empty { display: none; }
.turnstile-slot { display: flex; justify-content: center; margin: 0 0 12px; }