/* ==========================================================================
   EnDesign — Redesign: розділ послуг (Верхня категорія + Вкладена категорія)
   Стосується лише сторінок на шаблонах "Верхня категорія" (id=2) та
   "Вкладена категорія" (id=3). Класи нижче унікальні для цих шаблонів і не
   перетинаються з головною/іншими сторінками сайту.
   Файл підключається окремим <link> у чанку "head" ПІСЛЯ main.min.css.
   ========================================================================== */

:root {
  /* --- Тони бренду (та ж палітра, підібраний теплий відтінок нейтралів) --- */
  --svc-ink: #211d17;
  --svc-ink-soft: #4a4335;
  --svc-paper: #fbf8f2;
  --svc-paper-dim: #f1ead9;
  --svc-line: #e6dcc6;
  --svc-amber: #ffc107;
  --svc-amber-deep: #cf9600;
  --svc-amber-ink: #2b2107;
  --svc-crimson: #c81e3a;
  --svc-crimson-deep: #9e1730;
  --svc-muted: #776d59;
  --svc-muted-on-dark: #c7bfa9;

  --svc-font-display: "Play", sans-serif;
  --svc-font-text: "Roboto", sans-serif;

  --svc-radius-s: 10px;
  --svc-radius-m: 20px;
  --svc-radius-l: 32px;

  --svc-shadow-s: 0 1px 2px rgba(33, 29, 23, 0.06), 0 3px 10px rgba(33, 29, 23, 0.07);
  --svc-shadow-m: 0 14px 32px -14px rgba(33, 29, 23, 0.32), 0 2px 8px rgba(33, 29, 23, 0.08);
  --svc-shadow-l: 0 30px 60px -20px rgba(15, 13, 10, 0.45);

  --svc-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   0. Загальний фон і скидання дрібниць лише в межах цих шаблонів
   -------------------------------------------------------------------------- */
body:has(.top-block) {
  background: var(--svc-paper);
}

/* --------------------------------------------------------------------------
   1. Hero — .top-block
   -------------------------------------------------------------------------- */
.top-block {
  position: relative;
  padding: 76px 0 64px;
  overflow: hidden;
}
.top-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 160% at 100% 0%, rgba(255, 193, 7, 0.16), transparent 55%);
  pointer-events: none;
}
.top-block .container {
  position: relative;
  z-index: 1;
}

/* Повноекранне відео-тло героя (наразі лише "Верхня категорія") */
.top-block.has-hero-video {
  min-height: 640px;
  display: flex;
  align-items: center;
  padding: 100px 0;
  background-color: var(--svc-ink);
}
.top-block.has-hero-video::after {
  background: linear-gradient(100deg, rgba(18, 15, 11, 0.88) 0%, rgba(18, 15, 11, 0.66) 40%, rgba(18, 15, 11, 0.32) 72%, rgba(18, 15, 11, 0.12) 100%);
}
.top-block.has-hero-video .hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top-block.has-hero-video .page-title {
  color: #fff9f0;
}
.top-block.has-hero-video .page-title span {
  color: rgba(255, 249, 240, 0.72);
}
.top-block.has-hero-video .description {
  box-shadow: var(--svc-shadow-s);
}
.top-block.has-hero-video .top-contacts .bot_phone {
  color: #fff9f0;
}
.top-block.has-hero-video .top-contacts .bot_phone:hover {
  color: var(--svc-amber);
}
.top-block.has-hero-video .top-contacts > span {
  color: rgba(255, 249, 240, 0.68);
}
.top-block.has-hero-video .top-contacts a[href^="mailto:"] {
  color: rgba(255, 249, 240, 0.78);
}
.top-block.has-hero-video .top-contacts a[href^="mailto:"] {
  background-image: linear-gradient(rgba(255, 249, 240, 0.68), rgba(255, 249, 240, 0.68));
}

/* Фото-тло героя ("Вкладена категорія") — фото у власній колонці зліва,
   картка з текстом справа, без наїзду одне на одне (той самий
   blur-backdrop + contain прийом, що й у .top-bg нижче, тепер в межах
   колонки). На вузьких екранах колонки складаються — фото зверху,
   текст під ним (стандартна поведінка Bootstrap grid). */
.top-block.has-hero-photo {
  padding: 100px 0;
  background-color: var(--svc-ink);
}
@media (min-width: 992px) {
  .top-block.has-hero-photo .col-lg-6:first-child {
    display: flex;
  }
  .top-block.has-hero-photo .top-bg {
    width: 100%;
    height: 100%;
    min-height: 460px;
  }
}
.hero-textcard {
  max-width: 640px;
}
.hero-textcard .page-title { color: #fff9f0; }
.hero-textcard .page-title span { color: rgba(255, 249, 240, 0.72); }
.hero-textcard .description { box-shadow: var(--svc-shadow-s); }
.hero-textcard .top-contacts .bot_phone { color: #fff9f0; }
.hero-textcard .top-contacts .bot_phone:hover { color: var(--svc-amber); }
.hero-textcard .top-contacts > span { color: rgba(255, 249, 240, 0.68); }
.hero-textcard .top-contacts a[href^="mailto:"] {
  color: rgba(255, 249, 240, 0.78);
  background-image: linear-gradient(rgba(255, 249, 240, 0.68), rgba(255, 249, 240, 0.68));
}

@media (max-width: 991.98px) {
  .top-block.has-hero-photo { padding: 64px 0; }
  .hero-textcard { max-width: 100%; }
}
@media (max-width: 767.98px) {
  .top-block.has-hero-photo { padding: 40px 0; }
  .top-block.has-hero-photo .top-bg { min-height: 380px; }
}

/* Планшетний діапазон (стек-фото зверху) — робимо фото вище й майже без
   розмитих полів, а звільнене місце під ним віддаємо під дві колонки:
   заголовок+текст зліва, контакти+бриф справа (замість одного вузького
   стовпця). На телефонах (<768px) лишається звичний єдиний стовпець. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .top-block.has-hero-photo .top-bg {
    min-height: 480px;
  }
  .hero-textcard-row {
    display: flex;
    align-items: flex-start;
    gap: 32px;
  }
  .hero-textcard-row .hero-textcard-contacts-col {
    order: 2;
    flex: 0 0 auto;
  }
  .hero-textcard-row .hero-textcard-text-col {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }
  .hero-textcard-row .top-contacts { margin-top: 0; }
}

@media (max-width: 991.98px) {
  .top-block.has-hero-video {
    min-height: 560px;
    padding: 64px 0;
  }
}
@media (max-width: 767.98px) {
  .top-block.has-hero-video {
    min-height: 460px;
  }
  .top-block.has-hero-video::after {
    background: linear-gradient(180deg, rgba(18, 15, 11, 0.5) 0%, rgba(18, 15, 11, 0.82) 55%, rgba(18, 15, 11, 0.92) 100%);
  }
}

.top-bg {
  min-height: 320px;
  border-radius: var(--svc-radius-l);
  overflow: hidden;
  box-shadow: var(--svc-shadow-m);
  animation: svc-rise 0.7s var(--svc-ease) both;
}
.top-bg::before,
.top-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  background-repeat: no-repeat;
}
.top-bg::before {
  background-color: var(--svc-paper-dim);
  background-size: cover !important;
  background-position: center !important;
  filter: blur(24px) brightness(0.55) saturate(1.15);
}
.top-bg::after {
  background-size: contain !important;
  background-position: center !important;
}
.top-bg .hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.page-title {
  font-family: var(--svc-font-display);
  text-align: left;
  background: none;
  padding: 0;
  font-weight: 400;
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--svc-ink);
  margin: 0 0 18px;
  animation: svc-rise 0.7s var(--svc-ease) both;
  animation-delay: 0.05s;
}
.page-title span {
  display: block;
  font-family: var(--svc-font-text);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 400;
  color: var(--svc-muted);
  text-transform: none;
  margin-top: 10px;
  max-width: 60ch;
}

.description {
  display: block;
  background-color: var(--svc-ink);
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: var(--svc-amber);
  max-width: 62ch;
  padding: 16px 22px;
  border-radius: var(--svc-radius-s);
  margin-bottom: 28px;
  animation: svc-rise 0.7s var(--svc-ease) both;
  animation-delay: 0.1s;
}

.top-contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  animation: svc-rise 0.7s var(--svc-ease) both;
  animation-delay: 0.15s;
}
.top-contacts .bot_phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--svc-font-display);
  font-size: 19px;
  color: var(--svc-ink);
  text-decoration: none;
  transition: color 0.2s var(--svc-ease);
}
.top-contacts .bot_phone svg {
  width: 22px;
  height: 22px;
}
.top-contacts .bot_phone:hover {
  color: var(--svc-amber-deep);
}
.top-contacts > span {
  flex: 1 0 100%;
  width: auto;
  text-align: left;
  font-size: 13px;
  color: var(--svc-muted);
  margin: 2px 0 -6px;
}
.top-contacts .socicons {
  display: inline-flex;
  gap: 12px;
}
.top-contacts .socicons a svg {
  width: 30px;
  height: 30px;
  transition: transform 0.2s var(--svc-ease);
}
.top-contacts .socicons a:hover svg {
  transform: translateY(-2px);
}
.top-contacts a[href^="mailto:"] {
  font-size: 14px;
  color: var(--svc-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Кнопки-заклики (заповнити бриф) — той самий червоний, але з читабельним контрастом */
.top-block .btn.red-btn,
.fill-brief .btn.red-btn,
.category-list-text .fill-brief-cta .btn.red-btn,
.bottom_contacts .btn.red-btn {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background-color: var(--svc-crimson);
  color: #fff9f2;
  border-radius: var(--svc-radius-s);
  box-shadow: var(--svc-shadow-s);
  transition: background-color 0.2s var(--svc-ease), transform 0.2s var(--svc-ease), box-shadow 0.2s var(--svc-ease);
}
.top-block .btn.red-btn:hover,
.fill-brief .btn.red-btn:hover,
.category-list-text .fill-brief-cta .btn.red-btn:hover,
.bottom_contacts .btn.red-btn:hover {
  background-color: var(--svc-crimson-deep);
  color: #fff9f2;
  transform: translateY(-2px);
  box-shadow: var(--svc-shadow-m);
}
.top-block .btn.red-btn:focus-visible,
.fill-brief .btn.red-btn:focus-visible,
.category-list-text .fill-brief-cta .btn.red-btn:focus-visible,
.bottom_contacts .btn.red-btn:focus-visible {
  outline: 2px solid var(--svc-ink);
  outline-offset: 3px;
}

@keyframes svc-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .top-bg, .page-title, .description, .top-contacts { animation: none; }
}

/* --------------------------------------------------------------------------
   2. Заголовки секцій — .block-title, .orange-title / .star-bg, .brown-bg-title
   Уніфікуємо вигляд "лейбла секції" для верхньої та вкладеної категорії.
   -------------------------------------------------------------------------- */
.block-title {
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
  color: var(--svc-ink);
  text-align: center;
  max-width: 46ch;
  margin: 0 auto 12px;
}

.star-bg {
  margin-top: 40px;
}
.star-bg::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background-image: url("../img/category-list-bg.jpg");
  background-repeat: no-repeat;
  background-position: left calc(var(--bs-gutter-x) * 0.5) bottom;
  pointer-events: none;
}
.star-bg .orange-title,
.brown-bg-title {
  position: relative;
  top: 0;
  z-index: 1;
}

.orange-title,
.brown-bg-title > span,
.category-list .orange-title,
.our-cooperation .orange-title,
.happy-clients .orange-title {
  display: inline-block;
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--svc-amber-ink);
  background-color: var(--svc-amber);
  padding: 16px 32px;
  border-radius: var(--svc-radius-l);
  text-align: center;
  z-index: auto;
  margin-top: 0;
}
.brown-bg-title {
  text-align: center;
  margin: 0 0 8px;
}

/* --------------------------------------------------------------------------
   3. Категорійна сітка — .category-list, .subgrid, картки .uniblock (cat_subcat)
   -------------------------------------------------------------------------- */
.category-list {
  padding: 56px 0 64px;
  background-color: var(--svc-paper);
}
.category-list-text {
  padding: 8px 0 48px;
  background-color: var(--svc-paper);
}
.category-list-text .row::before { content: none; }
.category-list-text .fill-brief-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  padding: 28px 32px;
  border-radius: var(--svc-radius-l);
  background: var(--svc-ink);
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: clamp(19px, 2vw, 25px);
  color: #fbf8f2;
}
.category-list-text .fill-brief-cta span { flex-grow: 1; max-width: 56ch; }
.category-list-text .fill-brief-cta a { flex-shrink: 0; margin-left: 0; }
@media (max-width: 767.98px) {
  .category-list-text .fill-brief-cta {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 24px;
  }
}
.category-list-text .text {
  font-family: var(--svc-font-text);
  font-size: 16px;
  line-height: 1.75;
  color: var(--svc-ink-soft);
  max-width: 72ch;
}
.category-list-text ul {
  margin: 0 0 20px;
  padding: 0 0 0 8px;
}
.category-list-text ul li {
  padding: 0 0 14px 30px;
  font-family: var(--svc-font-text);
  font-size: 16px;
  line-height: 1.5;
  color: var(--svc-ink-soft);
}
.category-list-text ul li::before {
  top: 2px;
  background-color: var(--svc-ink-soft);
}

.subgrid {
  margin-top: 28px;
}

/* Верхня категорія (body:not(.subcategory)) вже має власну сучасну сітку на
   CSS subgrid (grid-template-rows: subgrid) для вирівнювання карток по
   висоті. Не чіпаємо display/grid-row/order — тільки косметика поверх. */
body:not(.subcategory) .row.subgrid {
  gap: 28px 24px;
}
/* Рідна сітка сайту переходить лише 3→2 колонки (@991.98px), далі 2 колонки
   лишаються аж до 0 — на телефонах картки ставали затиснутими вдвічі.
   Додаємо перехід у 1 колонку для вузьких екранів. */
@media (max-width: 767.98px) {
  body:not(.subcategory) .row.subgrid {
    grid-template-columns: 1fr !important;
  }
}
body:not(.subcategory) .row.subgrid .uniblock {
  background: #fff;
  border: 1px solid var(--svc-line);
  border-radius: var(--svc-radius-m);
  padding: 16px 16px 20px;
  margin-bottom: 0;
  min-height: 0;
  box-shadow: var(--svc-shadow-s);
  transition: transform 0.25s var(--svc-ease), box-shadow 0.25s var(--svc-ease), border-color 0.25s var(--svc-ease);
}
body:not(.subcategory) .row.subgrid .uniblock:hover {
  transform: translateY(-6px);
  box-shadow: var(--svc-shadow-m);
  border-color: transparent;
  text-decoration: none;
}
body:not(.subcategory) .row.subgrid .uniblock:hover .title,
body:not(.subcategory) .row.subgrid .uniblock:hover .text {
  text-decoration: none;
}
body:not(.subcategory) .row.subgrid .uniblock .title {
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: var(--svc-ink);
}
body:not(.subcategory) .row.subgrid .uniblock picture img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--svc-radius-s);
}
body:not(.subcategory) .row.subgrid .uniblock .text {
  font-family: var(--svc-font-text);
  font-size: 14px;
  line-height: 1.55;
  color: var(--svc-muted);
  margin-top: 10px;
}
body:not(.subcategory) .row.subgrid .uniblock .price {
  position: static;
  height: auto;
  left: auto;
  bottom: auto;
  display: block;
  margin-top: 14px;
  padding: 0;
  background-color: transparent;
  font-size: inherit;
  color: inherit;
}
body:not(.subcategory) .row.subgrid .uniblock .price span {
  display: inline-block;
  background-color: var(--svc-amber);
  color: var(--svc-amber-ink);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: var(--svc-font-text);
  font-weight: 400;
  font-size: 13px;
}

/* Вкладена категорія (body.subcategory): картки childcat_list_2 без фото —
   ця розмітка не бере участі в subgrid-сітці вище, тож звичайний flex ок. */
body.subcategory .subgrid .uniblock {
  margin-bottom: 0;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #fff;
  border: 1px solid var(--svc-line);
  border-radius: var(--svc-radius-m);
  padding: 20px 20px 22px;
  box-shadow: var(--svc-shadow-s);
  transition: transform 0.25s var(--svc-ease), box-shadow 0.25s var(--svc-ease), border-color 0.25s var(--svc-ease);
}
body.subcategory .subgrid .uniblock:hover {
  transform: translateY(-6px);
  box-shadow: var(--svc-shadow-m);
  border-color: transparent;
  text-decoration: none;
}
body.subcategory .subgrid .uniblock:hover .title,
body.subcategory .subgrid .uniblock:hover .text {
  text-decoration: none;
}
body.subcategory .subgrid .uniblock .title {
  width: auto;
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: var(--svc-ink);
  display: block;
  margin-bottom: 8px;
}
body.subcategory .subgrid .uniblock .text {
  width: auto;
  font-family: var(--svc-font-text);
  font-size: 14px;
  line-height: 1.55;
  color: var(--svc-muted);
  flex-grow: 1;
  padding-bottom: 0;
  margin: 0 0 14px;
}
body.subcategory .subgrid .uniblock .price {
  position: static;
  height: auto;
  line-height: 1;
  left: auto;
  bottom: auto;
  display: block;
  background-color: transparent;
  padding: 0;
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--svc-font-text);
  font-size: inherit;
  color: inherit;
}
body.subcategory .subgrid .uniblock .price span {
  display: inline-block;
  background-color: var(--svc-amber);
  color: var(--svc-amber-ink);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: var(--svc-font-text);
  font-weight: 400;
  font-size: 13px;
  margin-left: 6px;
}

/* --------------------------------------------------------------------------
   4. "Що ми зробили" — .what-we-did (childcat_block_1_gallery)
   -------------------------------------------------------------------------- */
.what-we-did {
  padding: 8px 0 64px;
  background-color: var(--svc-paper);
}
.what-we-did .block-title { margin-bottom: 32px; }
.what-we-did-block {
  border-radius: var(--svc-radius-m);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--svc-line);
  box-shadow: var(--svc-shadow-s);
  height: 100%;
  transition: transform 0.25s var(--svc-ease), box-shadow 0.25s var(--svc-ease);
}
.what-we-did-block:hover {
  transform: translateY(-6px);
  box-shadow: var(--svc-shadow-m);
}
.what-we-did-block picture,
.what-we-did-block img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
}
.what-we-did-block .text {
  font-family: var(--svc-font-text);
  font-size: 14px;
  line-height: 1.5;
  color: var(--svc-ink-soft);
  padding: 14px 16px 18px;
}
.what-we-did > .container > .row { row-gap: 28px; }

/* "Показати ще" для галереї робіт (childcat_block_1_gallery) — за 12
   картками решта переховується через JS-клас .gallery-hidden (не CSS
   nth-child: перша колонка в цьому ж .row — це .block-title, а не картка,
   тож рахувати від JS точніше й безпечніше). */
.gallery-hidden { display: none !important; }
.gallery-show-more {
  display: block;
  width: fit-content;
  margin: 8px auto 0;
  padding: 14px 32px;
  background: none;
  border: 1px solid var(--svc-line);
  border-radius: 999px;
  color: var(--svc-ink);
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s var(--svc-ease), background-color 0.2s var(--svc-ease), color 0.2s var(--svc-ease);
}
.gallery-show-more:hover {
  border-color: var(--svc-amber);
  background-color: var(--svc-paper-dim);
  color: var(--svc-amber-deep);
}

/* --------------------------------------------------------------------------
   5. CTA-стрічка — .fill-brief
   -------------------------------------------------------------------------- */
.fill-brief {
  background: var(--svc-ink);
  padding: 40px 0;
}
.fill-brief .text {
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.3;
  color: #fbf8f2;
}
.fill-brief .text span { flex-grow: 1; max-width: 56ch; }
.fill-brief .text a { min-width: 0; margin-left: 0; flex-shrink: 0; }
.fill-brief.pb-100 { padding-bottom: 40px; }
.fill-brief .urgent-title {
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: clamp(19px, 2vw, 24px);
  color: #fbf8f2;
  text-align: center;
  max-width: 68ch;
  margin: 0 auto 20px;
}
/* .category-time — назва лишилась з ОРИГІНАЛЬНОГО контексту цього блоку
   (світла секція .category-reputation), звідки ми перенесли заголовок
   у цей темний .fill-brief. У main.min.css на мобільних досі є легасі-
   правило ".category-time { background-color: #fff }" з тих часів — на
   вузьких екранах воно "пробивалось" і давало білу смугу під заголовком
   (світлий текст на білому — майже невидимий). Тут явно скидаємо. */
.fill-brief .category-time {
  background-color: transparent;
}

/* --------------------------------------------------------------------------
   6. Слайдер робіт — .category-slider (gallery)
   -------------------------------------------------------------------------- */
.category-slider {
  padding: 12px 0 64px;
  background-image: none;
  background-color: var(--svc-paper);
}
.category-slider .category-slider-slide {
  padding: 0 10px;
}
.category-slider .category-slider-slide img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: var(--svc-radius-m);
  box-shadow: var(--svc-shadow-s);
}
.category-slider .category-slider-slide .text {
  font-family: var(--svc-font-text);
  font-size: 14px;
  color: var(--svc-muted);
  text-align: center;
  margin-top: 12px;
}
.category-slider-holder .slick-dots {
  display: flex !important;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  padding: 0;
}
.category-slider-holder .slick-dots li button {
  font-size: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--svc-line);
  border: none;
}
.category-slider-holder .slick-dots li.slick-active button {
  background: var(--svc-amber-deep);
}

/* --------------------------------------------------------------------------
   7. Довіра / переваги — .category-reputation (+ .bis), .category-reputation-block
   -------------------------------------------------------------------------- */
.category-reputation {
  background: var(--svc-paper-dim);
  padding: 56px 0;
  border-radius: var(--svc-radius-l);
  margin: 0 12px;
  max-width: calc(100% - 24px);
}
.category-reputation.bis {
  background: var(--svc-paper-dim);
}
.category-reputation.bis::before,
.category-reputation.bis::after { content: none; }
.category-reputation .orange-title,
.category-reputation .block-title { margin-bottom: 36px; }

.category-reputation-holder {
  row-gap: 28px;
}
.category-reputation-block,
.category-reputation .category-reputation-block,
.category-reputation.bis .category-reputation-block {
  height: 100%;
  padding: 6px 22px;
  border-left: none;
  background-image: none;
}
.category-reputation-block .title {
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: 19px;
  color: var(--svc-ink);
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.category-reputation-block .title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--svc-amber-deep);
  flex-shrink: 0;
}
.category-reputation-block .text {
  font-family: var(--svc-font-text);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--svc-muted);
}

.category-time { margin-top: 28px; }
.category-time .text {
  background-color: transparent;
  padding: 0;
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: clamp(19px, 2vw, 24px);
  color: var(--svc-ink);
  text-align: center;
  max-width: 68ch;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   8. "Дизайн для будь-якого бізнесу" — .help-business
   -------------------------------------------------------------------------- */
.help-business { padding: 64px 0; }
.help-business .block-title { text-align: left; margin: 0 0 24px; max-width: none; color: #fbf8f2; }
.help-business ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 14px;
}
.help-business ul li {
  position: relative;
  padding-left: 30px;
  font-family: var(--svc-font-text);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--svc-muted-on-dark);
}
.help-business ul li::before {
  top: 7px;
  width: 18px;
  height: 18px;
  background-color: var(--svc-amber);
}
.help-business picture,
.help-business img.img-fluid {
  border-radius: var(--svc-radius-l);
  box-shadow: var(--svc-shadow-m);
  max-width: 100%;
}
.help-business .white-text {
  background-color: transparent;
  background-image: none;
  padding: 0;
}
.help-business .white-text .text {
  font-family: var(--svc-font-text);
  font-size: 15px;
  line-height: 1.7;
  color: var(--svc-muted-on-dark);
  max-width: 78ch;
  margin: 40px auto 0;
  text-align: center;
}
.help-business ul {
  justify-items: start;
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* --------------------------------------------------------------------------
   9. Команда — .who-work (+ .bis), картки .person (topcat_block_5_list / childcat_block_3_list)
   -------------------------------------------------------------------------- */
.who-work,
.who-work.bis {
  background-color: var(--svc-ink);
  background-image: none;
  color: var(--svc-muted-on-dark);
  padding: 64px 0;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
}
.who-work.bis .row:first-child::before,
.who-work.bis .person-holder::after {
  content: none;
}
.who-work.bis .row:first-child .block-title {
  position: static;
  background-color: transparent;
  padding: 0;
  text-align: left;
  width: auto;
}
.who-work .block-title,
.who-work.bis .block-title {
  color: #fbf8f2;
  text-align: left;
  max-width: none;
  margin-bottom: 14px;
}
.who-work .text {
  font-family: var(--svc-font-text);
  font-size: 15px;
  line-height: 1.65;
  color: var(--svc-muted-on-dark);
  max-width: 46ch;
}

.person-holder {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start;
}
.person {
  width: 168px;
  text-align: center;
}
.person picture,
.person img {
  display: block;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 14px;
  box-shadow: var(--svc-shadow-s);
}
.person .name {
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: 15px;
  color: #fbf8f2;
}
.person .position {
  font-family: var(--svc-font-text);
  font-size: 12.5px;
  color: var(--svc-muted-on-dark);
  margin: 2px 0 8px;
}
.person .socicons {
  position: static;
  bottom: auto;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.person .socicons a {
  margin-right: 0;
}
.person .socicons svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   10. Співпраця — .our-cooperation (+ .bis), сітка іконок (topcat_block_6_list / childcat_block_4_icons)
   -------------------------------------------------------------------------- */
.our-cooperation {
  padding: 76px 0 64px;
  background-color: var(--svc-ink);
  background-image: url("../img/our-cooperation-bg.jpg");
  background-repeat: repeat;
}
.our-cooperation .orange-title { margin-bottom: 32px; }
.our-cooperation .row .col-12:first-child {
  text-align: center;
}
.our-cooperation .block-title,
.our-cooperation.bis .block-title {
  color: #fbf8f2;
}
.our-cooperation .subtitle {
  display: block;
  text-align: center;
  font-family: var(--svc-font-text);
  font-size: 15px;
  color: var(--svc-muted-on-dark);
  max-width: 60ch;
  margin: 0 auto 32px;
}
.our-cooperation .subtitle:empty { display: none; }
.our-cooperation svg { width: 76px; height: 76px; }
.our-cooperation [class*="col-xl-2"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 28px 16px;
  margin-bottom: 8px;
}
.our-cooperation [class*="col-xl-2"] .text {
  font-family: var(--svc-font-text);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--svc-muted-on-dark);
}
.our-cooperation .white-text {
  background: var(--svc-paper-dim);
  border-radius: var(--svc-radius-m);
  padding: 32px 40px;
  margin-top: 16px;
  box-shadow: var(--svc-shadow-m);
}
.our-cooperation .white-text .text,
.our-cooperation .white-text {
  font-family: var(--svc-font-text);
  font-size: 15px;
  line-height: 1.7;
  color: var(--svc-ink-soft);
  text-align: left;
}
.our-cooperation .white-text ol,
.our-cooperation .white-text ul {
  text-align: left;
}

.svg-holder {
  row-gap: 8px;
}

/* --------------------------------------------------------------------------
   11. Клієнти — .happy-clients, .client-slide (topcat_client / cat_client)
   -------------------------------------------------------------------------- */
/* Темна секція (той самий фон, що й .who-work / .promo-offers), а назва та
   опис клієнта — під картинкою, а не поверх неї: раніше текст лежав на фото
   під градієнтом і на світлих логотипах читався погано. */
.happy-clients {
  padding: 56px 0 64px;
  background-color: var(--svc-ink);
}
.happy-clients .orange-title { margin-bottom: 32px; }
.happy-clients .row .col-12:first-child {
  text-align: center;
}
/* Однакова висота карток у рядку незалежно від довжини підпису.
   Лише від 768px: нижче Slick розкладає картки у два ряди (rows: 2), і
   display:flex на доріжці цю розкладку ламає — друга колонка зникає. */
@media (min-width: 768px) {
  .happy-clients-slick .slick-track {
    display: flex;
    align-items: stretch;
  }
  .happy-clients-slick .slick-slide {
    height: auto;
  }
  .happy-clients-slick .client-slide {
    height: 100%;
  }
}
/* Зверху лишаємо запас: картка на hover трохи піднімається, і без цього
   відступу її верхній край (разом із жовтою рамкою) зрізав би .slick-list,
   який обрізає все, що виходить за його межі. */
.happy-clients-slick .client-slide {
  padding: 6px 10px 10px;
}
.happy-clients-slick .uniblock {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  aspect-ratio: auto;
  min-height: 0;
  margin-bottom: 0;
  padding: 0;
  border: 1px solid rgba(255, 249, 240, 0.12);
  border-radius: var(--svc-radius-m);
  background: #2b251e;
  overflow: hidden;
  transition: box-shadow 0.2s var(--svc-ease), transform 0.2s var(--svc-ease), border-color 0.2s var(--svc-ease);
}
.happy-clients-slick .uniblock:hover {
  box-shadow: var(--svc-shadow-l);
  transform: translateY(-4px);
  border-color: var(--svc-amber);
  text-decoration: none;
}
/* Градієнт поверх фото більше не потрібен */
.happy-clients-slick .uniblock::after {
  content: none;
}
/* Плитка з логотипом. aspect-ratio 7/4 — рівно пропорції вихідних картинок
   (560x320), тому вони вписуються без обрізання; object-fit: contain страхує
   на випадок іншого розміру — логотип буде видно повністю, а не підрізаним. */
.happy-clients-slick .uniblock img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 4;
  object-fit: contain;
  background-color: rgba(255, 249, 240, 0.05);
  margin: 0;
  transition: transform 0.4s var(--svc-ease);
}
.happy-clients-slick .uniblock:hover img {
  transform: scale(1.06);
}
.happy-clients-slick .uniblock .name {
  position: static;
  z-index: auto;
  left: auto;
  right: auto;
  bottom: auto;
  padding: 16px 18px 0;
  font-family: var(--svc-font-display);
  font-size: 17px;
  line-height: 1.25;
  color: #fff9f0;
  text-align: left;
  width: auto;
  margin: 0;
  text-shadow: none;
}
.happy-clients-slick .uniblock .desc {
  position: static;
  z-index: auto;
  left: auto;
  right: auto;
  bottom: auto;
  padding: 6px 18px 18px;
  font-family: var(--svc-font-text);
  font-size: 13.5px;
  line-height: 1.45;
  text-align: left;
  color: var(--svc-muted-on-dark);
}
/* Кути картинки НЕ дублюємо через inherit: у картки є рамка 1px, тож її
   внутрішній радіус на 1px менший, і однаковий radius у картинки перекривав
   рамку зверху. Заокруглення й так робить overflow:hidden самої картки. */
/* У старій темі край каруселі прикривали двома білими смугами по 11px —
   вони були під світлий фон секції. На темному тлі вони світилися, тож
   перефарбовуємо їх у колір секції. */
.happy-clients .happy-clients-slick .slick-list::before,
.happy-clients .happy-clients-slick .slick-list::after,
.subcategory .happy-clients .happy-clients-slick .slick-list::before,
.subcategory .happy-clients .happy-clients-slick .slick-list::after {
  background-color: var(--svc-ink);
}
.lost_time .row .col-12:first-child {
  text-align: center;
}

/* --------------------------------------------------------------------------
   12. "Що ще ми можемо" — .what-wecando, вкладки (cat_bigmenu_*), .category-reputation.bis
   -------------------------------------------------------------------------- */
.what-wecando {
  background: var(--svc-ink);
  padding: 64px 0 72px;
  margin-top: 24px;
}
.what-wecando .block-title { color: #fbf8f2; }
.what-wecando .white-text {
  background-color: rgba(255, 248, 235, 0.05);
  border: 1px solid rgba(255, 248, 235, 0.1);
  border-radius: var(--svc-radius-m);
  padding: 28px 26px;
  font-family: var(--svc-font-text);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--svc-muted-on-dark);
}
.what-wecando [class*="col-lg-4"] {
  margin-top: 20px;
}
.what-wecando .category-reputation.bis {
  background: rgba(255, 248, 235, 0.05);
  margin: 40px 0 0;
  max-width: 100%;
  padding: 40px 0;
}
.what-wecando .category-reputation.bis .block-title { color: #fbf8f2; }
.what-wecando .category-reputation-block .title { color: #fbf8f2; }
.what-wecando .category-reputation-block .text { color: var(--svc-muted-on-dark); }

.tabs-service { padding-top: 24px; }
.tabs.filter_services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.tabs.filter_services li a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: auto;
  height: auto;
  min-height: 0;
  line-height: 1.2;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--svc-font-text);
  font-size: 14px;
  color: var(--svc-muted-on-dark);
  border: 1px solid rgba(255, 248, 235, 0.16);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: color 0.2s var(--svc-ease), border-color 0.2s var(--svc-ease), background-color 0.2s var(--svc-ease),
    transform 0.18s var(--svc-ease), box-shadow 0.18s var(--svc-ease);
}
.tabs.filter_services li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 260%;
  z-index: 5;
  background: linear-gradient(115deg, transparent 40%, rgba(0, 0, 0, 0.5) 47%, rgba(255, 255, 255, 0.95) 50%, rgba(0, 0, 0, 0.5) 53%, transparent 60%);
  transform: translateX(-90%);
  pointer-events: none;
  transition: transform 0.7s var(--svc-ease);
}
.tabs.filter_services li a:hover::before {
  transform: translateX(15%);
}
.tabs.filter_services li a:hover {
  border-color: var(--svc-amber);
  color: #fbf8f2;
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 193, 7, 0.3);
}
.tabs.filter_services li a:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
  transition-duration: 0.05s;
}
.tabs.filter_services li a.r-tabs-anchor,
.tabs.filter_services li a[aria-selected="true"],
.what-wecando .r-tabs-state-active .r-tabs-anchor,
.what-wecando .filter_services li:hover a,
.what-wecando .filter_services li.active a,
.what-wecando .r-tabs-anchor:hover {
  background-color: var(--svc-amber);
  color: var(--svc-amber-ink);
  border-color: var(--svc-amber);
}
.what-wecando .filter_services li a::before,
.what-wecando .r-tabs-anchor::before {
  display: none;
}

.tab_content_wrapper .uniblock {
  min-height: 0;
  margin-bottom: 0;
  /* Невеликий запас зверху: картка в стані спокою трохи опущена вниз,
     щоб підйом на hover не виїжджав за overflow:hidden свайпера. */
  margin-top: 10px;
  background: rgba(255, 248, 235, 0.04);
  border: 1px solid rgba(255, 248, 235, 0.1);
  border-radius: var(--svc-radius-m);
  padding: 14px 14px 18px;
  transition: transform 0.2s var(--svc-ease), border-color 0.2s var(--svc-ease);
}
.tab_content_wrapper .uniblock:hover {
  transform: translateY(-8px);
  border-color: var(--svc-amber);
  text-decoration: none;
}
.tab_content_wrapper .uniblock picture,
.tab_content_wrapper .uniblock img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--svc-radius-s);
  margin-bottom: 12px;
}
.tab_content_wrapper .uniblock .title {
  width: auto;
  font-size: 15px;
  color: #fbf8f2;
  margin-bottom: 4px;
}
.tab_content_wrapper .uniblock .text {
  width: auto;
  font-size: 13px;
  color: var(--svc-muted-on-dark);
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   13. Responsive — ті самі контрольні точки, що й основний main.min.css
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .top-block { padding: 48px 0 40px; }
  .top-bg { min-height: 220px; margin-bottom: 28px; }
  .page-title { text-align: center; }
  .page-title span { margin-left: auto; margin-right: auto; }
  .description { text-align: center; margin-left: auto; margin-right: auto; }
  .top-contacts { justify-content: center; text-align: center; }

  .top-block.has-hero-video .page-title,
  .top-block.has-hero-video .description,
  .top-block.has-hero-video .top-contacts {
    text-align: left;
  }
  .top-block.has-hero-video .page-title span { margin-left: 0; margin-right: 0; }
  .top-block.has-hero-video .description { margin-left: 0; margin-right: 0; }
  .top-block.has-hero-video .top-contacts { align-items: flex-start; justify-content: flex-start; }

  .top-block.has-hero-photo .page-title,
  .top-block.has-hero-photo .description,
  .top-block.has-hero-photo .top-contacts {
    text-align: left;
  }
  .top-block.has-hero-photo .page-title span { margin-left: 0; margin-right: 0; }
  .top-block.has-hero-photo .description { margin-left: 0; margin-right: 0; }
  .top-block.has-hero-photo .top-contacts { align-items: flex-start; justify-content: flex-start; }

  .who-work, .category-reputation, .what-wecando { margin: 0; max-width: 100%; border-radius: 0; }
  .who-work .block-title, .who-work .text { text-align: center; max-width: none; }
  .person-holder { justify-content: center; }
  .help-business .block-title { text-align: center; }
}

@media (max-width: 767.98px) {
  .fill-brief .text { flex-direction: column; text-align: center; gap: 16px; }
  .category-list, .who-work, .our-cooperation, .happy-clients, .what-wecando, .help-business, .what-we-did {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .subgrid .uniblock picture, .subgrid .uniblock img { height: auto; aspect-ratio: 1 / 1; }

  /* Картки childcat_list_2 (ціни на вкладеній категорії) розмічені як
     "col-lg-4 col-6" — 2 колонки на будь-якому екрані менше lg. На
     вузьких телефонах текстові картки в 2 колонки занадто затиснуті. */
  body.subcategory .subgrid > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   13b. "Що ще ми можемо" на вузьких екранах — плагін Responsive Tabs сам
   перемикається в режим акордеона (ховає .r-tabs-nav, показує
   .r-tabs-accordion-title) на ≤768px. Наш rule для .tabs.filter_services
   мав ту саму специфічність і, підключаючись пізніше, скасовував їхнє
   display:none — через це піл-навігація й акордеон показувались одночасно.
   Повертаємо штатну поведінку плагina й оформлюємо сам акордеон.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .tabs.filter_services {
    display: none !important;
  }

  .r-tabs-accordion-title {
    margin-bottom: 8px;
    border-radius: var(--svc-radius-s);
    overflow: hidden;
    background: rgba(255, 248, 235, 0.05);
    border: 1px solid rgba(255, 248, 235, 0.12);
  }
  .r-tabs-accordion-title.r-tabs-state-active {
    background: var(--svc-amber);
    border-color: var(--svc-amber);
  }
  .r-tabs-accordion-title .r-tabs-anchor {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: auto;
    min-height: 0;
    border-radius: 0;
    border: none;
    background: none !important;
    padding: 14px 18px;
    font-family: var(--svc-font-text);
    font-size: 14px;
    color: var(--svc-muted-on-dark);
  }
  .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
    color: var(--svc-amber-ink);
    font-family: var(--svc-font-display);
  }
  .r-tabs-accordion-title .r-tabs-anchor::after {
    content: "";
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s var(--svc-ease);
  }
  .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor::after {
    transform: rotate(225deg);
  }
}

/* --------------------------------------------------------------------------
   13c. "Що ще ми можемо" на мобільних — замість Swiper-каруселі (по 2 картки
   за раз без жодної підказки, що можна свайпнути) показуємо звичайну сітку
   в 2 колонки: перші 6 карток одразу, решта — по кнопці "Показати ще".
   Swiper JS лишається незайманим (main.min.js), тут суто візуальний
   перекрив CSS + керування класом .is-expanded через redesign-services.js.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .what-wecando .filter-services-holder-swiper1 {
    overflow: visible !important;
  }
  .what-wecando .filter-services-holder-swiper1 .swiper-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    transform: none !important;
    row-gap: 12px;
  }
  .what-wecando .filter-services-holder-swiper1 .swiper-slide {
    width: calc(50% - 6px) !important;
    margin-right: 12px !important;
  }
  .what-wecando .filter-services-holder-swiper1 .swiper-slide:nth-child(2n) {
    margin-right: 0 !important;
  }
  .what-wecando .filter-services-holder-swiper1:not(.is-expanded) .swiper-slide:nth-child(n + 7) {
    display: none !important;
  }
  .svc-show-more {
    display: block;
    width: 100%;
    margin: 4px 0 0;
    padding: 12px 20px;
    background: none;
    border: 1px solid rgba(255, 248, 235, 0.16);
    border-radius: var(--svc-radius-s);
    color: #fbf8f2;
    font-family: var(--svc-font-display);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s var(--svc-ease), background-color 0.2s var(--svc-ease);
  }
  .svc-show-more:hover {
    background-color: rgba(255, 248, 235, 0.05);
    border-color: var(--svc-amber);
  }
}
@media (min-width: 768px) {
  .svc-show-more {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   14. Рух — плавна поява секцій при скролі та легкий параллакс героя.
   Клас .is-visible додає невеликий script.js (окремий, не чіпає main.min.js).
   -------------------------------------------------------------------------- */
.svc-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--svc-ease), transform 0.7s var(--svc-ease);
}
.svc-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Каскад для карток у сітках — кожна наступна трохи пізніше за попередню */
.svc-reveal-group .svc-reveal:nth-child(1) { transition-delay: 0.02s; }
.svc-reveal-group .svc-reveal:nth-child(2) { transition-delay: 0.08s; }
.svc-reveal-group .svc-reveal:nth-child(3) { transition-delay: 0.14s; }
.svc-reveal-group .svc-reveal:nth-child(4) { transition-delay: 0.2s; }
.svc-reveal-group .svc-reveal:nth-child(5) { transition-delay: 0.26s; }
.svc-reveal-group .svc-reveal:nth-child(6) { transition-delay: 0.32s; }
.svc-reveal-group .svc-reveal:nth-child(7) { transition-delay: 0.38s; }

@media (prefers-reduced-motion: reduce) {
  .svc-reveal { opacity: 1; transform: none; transition: none; }
}

/* Паралакс героя: JS виставляє --svc-parallax-y на .top-bg під час скролу */
.top-bg { --svc-parallax-y: 0px; }
.top-bg::before {
  transform: translateY(var(--svc-parallax-y)) scale(1.15);
  transition: transform 0.05s linear;
}

/* "Переливання" на основній кнопці-заклику при наведенні */
.top-block .btn.red-btn,
.fill-brief .btn.red-btn,
.category-list-text .fill-brief-cta .btn.red-btn,
.bottom_contacts .btn.red-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.top-block .btn.red-btn::before,
.fill-brief .btn.red-btn::before,
.category-list-text .fill-brief-cta .btn.red-btn::before,
.bottom_contacts .btn.red-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.22) 40%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--svc-ease);
}
.top-block .btn.red-btn:hover::before,
.fill-brief .btn.red-btn:hover::before,
.category-list-text .fill-brief-cta .btn.red-btn:hover::before,
.bottom_contacts .btn.red-btn:hover::before {
  transform: translateX(120%);
}

/* Легкий "магнітний" нахил карток при наведенні (працює разом із JS, який рахує кут).
   Картки в .tab_content_wrapper лежать усередині Swiper-каруселі з
   overflow:hidden — будь-який підйом/нахил там зрізає верх картки, тому
   для цього контексту рух навмисно не застосовуємо (лишається окрема,
   спокійніша анімація нижче). */
.subgrid .uniblock,
.what-we-did-block {
  transform: perspective(800px) rotateX(var(--svc-tilt-x, 0deg)) rotateY(var(--svc-tilt-y, 0deg)) translateY(0);
}
.subgrid .uniblock:hover,
.what-we-did-block:hover {
  transform: perspective(800px) rotateX(var(--svc-tilt-x, 0deg)) rotateY(var(--svc-tilt-y, 0deg)) translateY(-6px);
}

/* Анімований підкреслений перехід для дрібних текстових посилань */
.top-contacts a[href^="mailto:"] {
  text-decoration: none;
  background-image: linear-gradient(var(--svc-muted), var(--svc-muted));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size 0.25s var(--svc-ease), color 0.25s var(--svc-ease);
}
.top-contacts a[href^="mailto:"]:hover {
  color: var(--svc-amber-deep);
  background-size: 0 1px;
}

/* ==========================================================================
   15. Глобальне меню сайту — .burger, .top_menu (шапка на всіх сторінках).
   Класи/DOM/JS-логіка (max-height акордеон, .open перемикачі,
   лайв-визначення .lang-drop наведенням) НЕ змінені — тільки косметика.
   ========================================================================== */

/* Бургер-іконка на чорній шапці */
.burger > span {
  background-color: rgba(255, 249, 240, 0.55);
}
.burger.open > span {
  background-color: var(--svc-amber);
}

/* Панель меню: замість плаского сірого — темна, в тон бренду */
.top_menu {
  background-color: var(--svc-ink);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent 40%);
  box-shadow: var(--svc-shadow-l);
  text-decoration: none;
  padding: 44px 0 8px;
}
.top_menu .container { padding-bottom: 28px; }

.top_menu .row > [class*="col-auto"] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s var(--svc-ease), transform 0.45s var(--svc-ease);
  transition-delay: 0s;
}
.top_menu.open .row > [class*="col-auto"] {
  opacity: 1;
  transform: translateY(0);
}
.top_menu.open .row > [class*="col-auto"]:nth-child(1) { transition-delay: 0.08s; }
.top_menu.open .row > [class*="col-auto"]:nth-child(2) { transition-delay: 0.14s; }
.top_menu.open .row > [class*="col-auto"]:nth-child(3) { transition-delay: 0.2s; }
.top_menu.open .row > [class*="col-auto"]:nth-child(4) { transition-delay: 0.26s; }
.top_menu.open .row > [class*="col-auto"]:nth-child(5) { transition-delay: 0.32s; }
@media (max-width: 767.98px) {
  /* На мобільному акордеон і так керується max-height через JS —
     не затримуємо появу самих колонок, щоб не заважати одна одній. */
  .top_menu .row > [class*="col-auto"] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.top_menu .menu-title {
  position: relative;
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: #fff9f0;
  text-transform: none;
  padding-left: 16px;
  margin-bottom: 18px;
  transition: color 0.2s var(--svc-ease);
}
.top_menu .menu-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--svc-amber);
}
.top_menu .menu-title:hover {
  color: var(--svc-amber);
}

.top_menu ul a {
  color: var(--svc-muted-on-dark);
  text-decoration: none;
  background-image: linear-gradient(var(--svc-amber), var(--svc-amber));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: color 0.2s var(--svc-ease), background-size 0.25s var(--svc-ease);
}
.top_menu ul a:hover {
  color: #fff9f0;
  background-size: 100% 1px;
}

/* Кнопки праворуч: мова + телефон */
.top_menu .top-buttons a {
  opacity: 0.72;
}
.top_menu .top-buttons a:hover,
.top_menu .top-buttons a.lang_button.open {
  opacity: 1;
}
.top_menu .top-buttons .lang_button svg,
.top_menu .top-buttons .lang-drop svg,
.top_menu .top-buttons .cont_button svg {
  border-radius: 50%;
  transition: transform 0.2s var(--svc-ease), box-shadow 0.2s var(--svc-ease);
}
.top_menu .top-buttons a:hover svg {
  transform: translateY(-1px) scale(1.06);
}
.top_menu .top-buttons .lang-drop {
  background: rgba(255, 249, 240, 0.06);
  border-radius: 999px;
  padding: 4px 4px 4px 8px !important;
  backdrop-filter: blur(6px);
}

/* Мобільна "гармошка" категорій */
@media (max-width: 767.98px) {
  .mobile-button {
    border-radius: var(--svc-radius-s);
    margin-bottom: 4px;
    transition: max-height 0.35s var(--svc-ease), background-color 0.2s var(--svc-ease);
  }
  .mobile-button span {
    position: relative;
    font-family: var(--svc-font-display);
    font-weight: 400;
    letter-spacing: 0.02em;
  }
  .mobile-button span::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.25s var(--svc-ease);
  }
  .mobile-button.is-open span::after {
    transform: translateY(-30%) rotate(225deg);
  }
  .top_menu .menu-title {
    color: var(--svc-amber);
    padding-left: 20px;
  }
  .top_menu .menu-title::before { content: none; }
  .top_menu ul a { padding-left: 20px; }
}

/* --------------------------------------------------------------------------
   16. Контакти в кінці сторінки — .bottom_contacts (глобальний блок, чанк
   footer, є на всіх сторінках сайту — home, послуги, підкатегорії тощо).
   Той самий підхід, що й у .top-contacts героя: прибираємо старе
   підкреслене чорне "Play" накреслення, додаємо кольори/переходи бренду.
   -------------------------------------------------------------------------- */
.bottom_contacts {
  padding: 88px 0 72px;
}
.bottom_contacts .bot_phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
  color: var(--svc-ink);
  transition: color 0.2s var(--svc-ease), transform 0.2s var(--svc-ease);
}
.bottom_contacts .bot_phone svg { margin: 0; flex-shrink: 0; }
.bottom_contacts .bot_phone:hover {
  color: var(--svc-amber-deep);
  transform: translateX(4px);
}
.bottom_contacts span {
  font-family: var(--svc-font-text);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--svc-muted);
  margin: 40px 0 16px;
}
.bottom_contacts .socicons {
  display: inline-flex;
  gap: 12px;
}
.bottom_contacts .socicons a {
  margin: 0;
  display: inline-block;
}
.bottom_contacts .socicons a svg {
  width: 30px;
  height: 30px;
  transition: transform 0.2s var(--svc-ease);
}
.bottom_contacts .socicons a:hover svg {
  transform: translateY(-2px);
}
.bottom_contacts .btn {
  margin: 48px 0 32px;
}
.bottom_contacts a[href^="mailto:"] {
  font-family: var(--svc-font-text);
  font-weight: 400;
  font-size: 15px;
  color: var(--svc-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--svc-ease);
}
.bottom_contacts a[href^="mailto:"]:hover {
  color: var(--svc-ink);
}
@media (max-width: 767.98px) {
  .bottom_contacts { padding: 56px 0 48px; }
  .bottom_contacts .bot_phone { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   17. Головна сторінка — розділ "Послуги" (.services, .services_menu).
   Той самий підхід, що й на сторінках послуг: без зайвих переробок HTML,
   лише сучасні кольори/типографіка/hover поверх наявної розмітки pdoMenu.
   -------------------------------------------------------------------------- */
.services {
  padding: 96px 0 72px;
}
.services::before {
  border-radius: var(--svc-radius-l);
  box-shadow: var(--svc-shadow-m);
}
.services .grey-title {
  display: inline-block;
  width: auto;
  height: auto;
  background-color: var(--svc-ink);
  color: var(--svc-amber);
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 25px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: left;
  line-height: 1.3;
  padding: 14px 26px;
  border-radius: var(--svc-radius-s);
  box-shadow: var(--svc-shadow-m);
}
.services_menu .menu-title {
  width: auto;
  min-height: 0;
  padding: 10px 22px;
  border-radius: var(--svc-radius-s);
  font-family: var(--svc-font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color 0.2s var(--svc-ease), transform 0.2s var(--svc-ease);
}
.services_menu .menu-title:hover {
  background-color: var(--svc-amber-deep);
  color: #000;
  transform: translateY(-1px);
  text-decoration: none;
}
.services_menu ul {
  margin: 18px 0 20px;
}
.services_menu ul li a {
  display: block;
  font-family: var(--svc-font-text);
  color: var(--svc-ink-soft);
  text-decoration: none;
  position: relative;
  padding-left: 14px;
  transition: color 0.2s var(--svc-ease), padding-left 0.2s var(--svc-ease);
}
.services_menu ul li a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--svc-amber);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.2s var(--svc-ease);
}
.services_menu ul li a:hover {
  color: var(--svc-amber-deep);
  padding-left: 18px;
  text-decoration: none;
}
.services_menu ul li a:hover::before {
  opacity: 1;
}
.services_menu .readmore {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border-radius: 0;
  padding: 0;
  font-family: var(--svc-font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--svc-amber-deep);
  transition: gap 0.2s var(--svc-ease), color 0.2s var(--svc-ease);
}
.services_menu .readmore::after {
  content: "\2192";
}
.services_menu .readmore:hover {
  color: var(--svc-amber);
  gap: 10px;
  text-decoration: none;
}
@media (max-width: 991.98px) {
  .services .col-lg-6:first-child {
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   18. Головна сторінка — "Наші клієнти" (.clients, .keen-slider, .dots, .arrow).
   Навігацію (dots/arrow/navigation-wrapper) генерує сам keen-slider у рантаймі
   (main.min.js, функція navigation()) — тут лише стилі поверх цих класів.
   -------------------------------------------------------------------------- */
.clients .grey-title {
  width: auto;
  height: auto;
  background: none;
  color: #fff9f0;
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: 0;
  text-transform: none;
  margin: 0 auto 40px;
}
.clients .navigation-wrapper {
  padding: 0 56px;
}
.keen-slider__slide > div {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--svc-radius-m);
  overflow: hidden;
  background: var(--svc-paper-dim);
  box-shadow: var(--svc-shadow-s);
  transition: transform 0.25s var(--svc-ease), box-shadow 0.25s var(--svc-ease);
}
.keen-slider__slide > div:hover {
  transform: translateY(-4px);
  box-shadow: var(--svc-shadow-m);
}
.keen-slider__slide > div::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 16, 12, 0.5) 0%, rgba(20, 16, 12, 0) 32%, rgba(20, 16, 12, 0) 55%, rgba(20, 16, 12, 0.8) 100%);
}
.keen-slider__slide div picture {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.keen-slider__slide div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  transition: transform 0.4s var(--svc-ease);
}
.keen-slider__slide > div:hover img {
  transform: scale(1.06);
}
.keen-slider__slide div span {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 20px;
  right: 20px;
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: 17px;
  color: #fff9f0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.keen-slider__slide div a {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  left: 20px;
  font-family: var(--svc-font-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #fff9f0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--svc-ease);
}
.keen-slider__slide div a:hover {
  color: var(--svc-amber);
}
.clients .dots {
  margin-top: 32px;
}
.clients .dot {
  width: 8px;
  height: 8px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 249, 240, 0.28);
  transition: background-color 0.2s var(--svc-ease), transform 0.2s var(--svc-ease);
}
.clients .dot--active {
  background: var(--svc-amber);
  border: none;
  transform: scale(1.25);
}
.clients .arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 249, 240, 0.1);
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-color 0.2s var(--svc-ease), transform 0.2s var(--svc-ease);
}
.clients .arrow--left { left: 0; }
.clients .arrow--right { right: 0; }
.clients .arrow:hover {
  background-color: var(--svc-amber);
}
.clients .arrow--disabled {
  opacity: 0.35;
  cursor: default;
}
.clients .arrow--disabled:hover {
  background-color: rgba(255, 249, 240, 0.1);
}
@media (max-width: 767.98px) {
  .clients .navigation-wrapper {
    padding: 0 40px;
  }
  .clients .arrow {
    width: 34px;
    height: 34px;
  }
}

/* --------------------------------------------------------------------------
   19. Відгуки клієнтів (Google) — .reviews, .review-card (site_reviews, reviews_card)
   Світла секція (як .attention/.services), самі картки — темні (той самий
   прийом, що й .fill-brief-cta/.hero-textcard), карусель через Slick.js
   (та сама бібліотека, що й .happy-clients-slick).
   -------------------------------------------------------------------------- */
.reviews {
  padding: 64px 0;
  background-color: var(--svc-paper);
}
.reviews .grey-title {
  display: inline-block;
  width: auto;
  height: auto;
  background-color: var(--svc-ink);
  color: var(--svc-amber);
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 25px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: left;
  line-height: 1.3;
  padding: 14px 26px;
  border-radius: var(--svc-radius-s);
  box-shadow: var(--svc-shadow-m);
  margin: 0 0 10px;
}
/* Стрічка відгуків — нескінченна плавна прокрутка без сторонніх бібліотек.
   Набір карток продубльовано в розмітці двічі; JS (initReviews) рухає
   scrollLeft через requestAnimationFrame і, дійшовши до половини треку,
   віднімає цю половину — стик непомітний. Пауза при наведенні/перетягуванні,
   нативний свайп на тачі працює сам собою. */
.reviews-viewport {
  position: relative;
}
/* М'які "розчинення" по краях стрічки, щоб картки не обрізались різко */
.reviews-viewport::before,
.reviews-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64px;
  z-index: 2;
  pointer-events: none;
}
.reviews-viewport::before {
  left: 0;
  background: linear-gradient(to right, var(--svc-paper), rgba(251, 248, 242, 0));
}
.reviews-viewport::after {
  right: 0;
  background: linear-gradient(to left, var(--svc-paper), rgba(251, 248, 242, 0));
}
.reviews-track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  padding: 10px 0;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.reviews-track::-webkit-scrollbar {
  display: none;
}
.reviews-track.is-dragging {
  cursor: grabbing;
}
/* Під час перетягування гасимо виділення тексту й "клік" по картці */
.reviews-track.is-dragging * {
  user-select: none;
}

.review-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  width: 320px;
  height: 310px;
  margin: 0 10px;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--svc-line);
  border-radius: var(--svc-radius-m);
  box-shadow: var(--svc-shadow-s);
  transition: border-color 0.2s var(--svc-ease), box-shadow 0.2s var(--svc-ease), transform 0.2s var(--svc-ease);
}
.review-card:hover {
  border-color: var(--svc-amber);
  box-shadow: var(--svc-shadow-m);
  transform: translateY(-2px);
}
.review-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
}
.review-star {
  color: var(--svc-amber);
}
.review-star.is-empty {
  color: var(--svc-line);
}
.review-text {
  flex-grow: 1;
  min-height: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  font-family: var(--svc-font-text);
  font-size: 14px;
  line-height: 1.6;
  color: var(--svc-ink-soft);
  margin: 0;
}
/* Довгі відгуки обрізаються на 6 рядках (у картці з кнопкою — на 5), а повний
   текст відкривається у модальному вікні: так стрічка лишається рівною,
   без стрибків висоти, і жоден відгук не втрачається. */
.review-card.has-more .review-text {
  -webkit-line-clamp: 5;
}
.review-more {
  align-self: flex-start;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--svc-font-text);
  font-size: 13px;
  font-weight: 700;
  color: var(--svc-amber-deep);
  cursor: pointer;
  transition: color 0.2s var(--svc-ease);
}
.review-more:hover {
  color: var(--svc-amber);
  text-decoration: underline;
}
.review-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--svc-line);
}
.review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.review-foot-text {
  min-width: 0;
}
.review-name {
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: 15px;
  color: var(--svc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-date {
  font-family: var(--svc-font-text);
  font-size: 12.5px;
  color: var(--svc-muted);
  margin-top: 2px;
}

/* Модальне вікно з повним текстом відгуку (створюється в JS одне на сторінку) */
.review-modal[hidden] {
  display: none;
}
.review-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.review-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 15, 11, 0.62);
}
.review-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 84vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--svc-radius-m);
  box-shadow: var(--svc-shadow-l);
  padding: 32px 34px;
  animation: svc-rise 0.3s var(--svc-ease) both;
}
.review-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--svc-paper-dim);
  color: var(--svc-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s var(--svc-ease);
}
.review-modal-close:hover {
  background: var(--svc-amber);
}
.review-modal .review-stars {
  margin-bottom: 16px;
}
.review-modal-text {
  font-family: var(--svc-font-text);
  font-size: 15px;
  line-height: 1.7;
  color: var(--svc-ink-soft);
  white-space: pre-line;
  margin: 0;
}
.review-modal .review-foot {
  margin-top: 22px;
}
@media (max-width: 575.98px) {
  .review-modal-dialog {
    padding: 26px 22px;
  }
}

/* Заголовок блоку — на головній (.grey-title, темний блок) інший клас, ніж
   на сторінках послуг (.orange-title, жовта "таблетка" — той самий стиль,
   що й "Як ми працюємо" в .our-cooperation). Друге — центроване й з
   відступом знизу, як усі orange-title-заголовки на цих сторінках. */
.reviews.reviews--pill .container > .row:first-child {
  text-align: center;
}
.reviews.reviews--pill .orange-title {
  margin-bottom: 10px;
}

/* Картка-посилання на відгуки в Google (.reviews-google-badge) */
.reviews-google-row {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}
.reviews-google-badge {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--svc-line);
  border-radius: var(--svc-radius-m);
  padding: 14px 22px;
  text-decoration: none;
  box-shadow: var(--svc-shadow-s);
  transition: transform 0.2s var(--svc-ease), box-shadow 0.2s var(--svc-ease);
}
.reviews-google-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--svc-shadow-m);
  text-decoration: none;
}
.reviews-google-logo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.reviews-google-badge-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reviews-google-rating {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.reviews-google-score {
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--svc-ink);
  line-height: 1;
}
.reviews-google-stars {
  display: inline-flex;
  gap: 1px;
  color: var(--svc-amber);
}
.reviews-google-stars svg { width: 14px; height: 14px; }
.reviews-google-sub {
  font-family: var(--svc-font-text);
  font-size: 12.5px;
  color: var(--svc-muted);
  white-space: nowrap;
}
.reviews-google-link {
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--svc-line);
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--svc-amber-deep);
  white-space: nowrap;
}
.reviews-google-badge:hover .reviews-google-link {
  color: var(--svc-amber);
}

/* ==========================================================================
   Текстова сторінка (шаблон id=11) — політика конфіденційності тощо
   ========================================================================== */

.static-text .container > .row:first-child {
  text-align: center;
}
/* Заголовок сторінки — семантичний <h1>, тому гасимо типові відступи
   заголовка, щоб "таблетка" виглядала так само, як була у <div>. */
.static-text h1.orange-title {
  margin: 0;
}

/* Кнопка-таблетка "Ми знаємо, як зробити Ваш бізнес успішним" — центрування */
.attention .row {
  text-align: center;
}
.static-text .text h2 {
  margin: 40px 0 14px;
  font-family: var(--svc-font-display);
  font-size: 20px;
  line-height: 1.3;
  color: var(--svc-ink);
  text-transform: uppercase;
}
.static-text .text h2:first-child {
  margin-top: 0;
}
.static-text .text p {
  margin: 0 0 16px;
}
.static-text .text ul {
  margin: 0 0 20px;
  padding-left: 22px;
}
.static-text .text li {
  margin-bottom: 8px;
}
.static-text .text a {
  color: var(--svc-amber-deep);
  text-decoration: underline;
}
.static-text .text a:hover {
  color: var(--svc-amber);
}

/* Посилання на політику конфіденційності у футері */
.footer-links {
  padding-left: 15px;
  padding-right: 90px;
}
.footer-privacy-link {
  font-weight: 300;
  font-size: 14px;
  color: #CECECE;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-privacy-link:hover {
  color: var(--svc-amber);
}
@media (max-width: 575.98px) {
  footer .row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .footer-links {
    padding-left: 0;
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   Промо-карусель (TV promo_cards) — фото + питання + опис.
   Раніше це були три картинки 1276x372 із вшитим у них текстом: він не
   масштабувався на мобільних, не перекладався й не індексувався. Тепер фото
   окремо, текст — звичайний HTML у сірій картці.
   ========================================================================== */
.promo-offers {
  padding: 56px 0;
  /* Темна секція — той самий фон, що й у .who-work */
  background-color: var(--svc-ink);
}
.promo-slider {
  position: relative;
  padding: 0 52px;
}
/* .promo-slide — це слайд Slick; сама картка всередині, щоб її display:flex
   не перебивався правилами .slick-initialized .slick-slide */
.promo-slider .promo-card {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: var(--svc-radius-l);
  overflow: hidden;
  box-shadow: var(--svc-shadow-m);
}
/* Фото займає свою половину картки повністю, без білої рамки навколо —
   зовнішні кути обрізає overflow:hidden самої картки. */
.promo-card-media {
  flex: 0 0 42%;
  max-width: 42%;
  align-self: stretch;
}
.promo-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Жовте поле з текстом — як в оригінальних картинках, лише текст тепер
   справжній HTML, а не частина зображення. */
.promo-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 36px 44px;
  background: var(--svc-amber);
}
.promo-card-title {
  margin: 0;
  font-family: var(--svc-font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.22;
  color: var(--svc-amber-ink);
  text-transform: none;
  background: none;
  padding: 0;
  text-align: left;
}
.promo-card-text {
  margin: 0;
  font-family: var(--svc-font-text);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.6;
  color: var(--svc-amber-ink);
}

/* Стрілки — той самий вигляд, що й у решти каруселей розділу */
.promo-slider .slick-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--svc-paper-dim);
  border: 1px solid var(--svc-line);
  transition: background-color 0.2s var(--svc-ease);
  z-index: 2;
}
.promo-slider .slick-arrow:hover {
  background-color: var(--svc-amber);
}
.promo-slider .slick-prev { left: 0; }
.promo-slider .slick-next { right: 0; }
.promo-slider .slick-prev::before,
.promo-slider .slick-next::before {
  display: none;
}
.promo-slider .slick-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--svc-ink);
  border-right: 2px solid var(--svc-ink);
}
.promo-slider .slick-prev::after {
  transform: translate(-40%, -50%) rotate(-135deg);
}
.promo-slider .slick-next::after {
  transform: translate(-60%, -50%) rotate(45deg);
}
.promo-slider .slick-dots {
  position: static;
  margin-top: 18px;
}
/* Крапки — на темному тлі секції, тому світлі */
.promo-slider .slick-dots li button::before {
  font-size: 9px;
  color: var(--svc-muted-on-dark);
  opacity: 0.5;
}
.promo-slider .slick-dots li.slick-active button::before {
  color: var(--svc-amber);
  opacity: 1;
}

@media (max-width: 991.98px) {
  .promo-card-body { padding: 28px 30px; }
}
/* Нижче 768px картка стає вертикальною: фото зверху, текст під ним —
   тепер він переноситься за шириною екрана, а не обрізається. */
@media (max-width: 767.98px) {
  .promo-offers { padding: 36px 0; }
  .promo-slider { padding: 0 8px; }
  .promo-slider .promo-card { flex-direction: column; }
  /* У вертикальній розкладці фото на всю ширину й зі своїми пропорціями —
     обрізати його тут нема потреби. */
  .promo-card-media {
    flex: 0 0 auto;
    max-width: 100%;
  }
  .promo-card-media img {
    height: auto;
  }
  .promo-card-body {
    padding: 22px 22px 26px;
    gap: 10px;
  }
  .promo-slider .slick-arrow { display: none !important; }
}

@media (max-width: 767.98px) {
  .reviews { padding: 40px 0; }
  .reviews-viewport::before,
  .reviews-viewport::after { width: 24px; }
  .review-card { width: 280px; height: 300px; padding: 20px 22px; }
  .reviews-google-badge {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  .reviews-google-link {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    width: 100%;
    text-align: center;
  }
}

/* Чекбокс згоди з політикою конфіденційності у формі брифу */
.agreement-control {
  transition: border-color 0.2s, box-shadow 0.2s;
}
.agreement-control .checkbox-holder label a {
  color: var(--svc-amber-deep);
  text-decoration: underline;
}
.agreement-control .checkbox-holder label a:hover {
  color: var(--svc-amber);
}
.agreement-control .form-error-hint {
  display: none;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--svc-crimson-deep);
}
.agreement-control.is-invalid {
  border-color: var(--svc-crimson);
  box-shadow: 0 0 0 2px rgba(200, 30, 58, 0.15);
}
.agreement-control.is-invalid .checkbox-holder [type="checkbox"] {
  outline: 2px solid var(--svc-crimson);
  outline-offset: 2px;
}
.agreement-control.is-invalid .form-error-hint {
  display: block;
}