/**
 * Конструктор кейсов — общие стили блоков.
 * Оболочка (фон canvas + шапка/бургер): как на услугах — см. page-constructor-glow.css.
 * Hero: паритет с /case/darkrain-store.
 */

:root {
  --case-block-gap: 60px;
  /* контент кейса 70px; шапка/бургер — --page-gutter-x из header.css (78px) */
  --case-content-gutter-x: 70px;
  /*
   * Структурный отступ секций (results→steps, steps→text_numbered, между главами).
   * Не путать с --case-block-gap (ритм обычных блоков 60px).
   * Darkrain: до/после steps title ≈ 150px (quote mb 150 / steps mb 150).
   * Селекторы refinements `.page …` на кейсе НЕ работают.
   */
  --case-section-gap: 150px;
}

@media (max-width: 1024px) {
  :root {
    --case-block-gap: 40px;
    --case-content-gutter-x: 40px;
    --case-section-gap: 80px;
  }
}

/* snapshot overflow-x:hidden ломает стык hero↔контент с fixed bg */
html:has(.case-constructor-page),
body:has(.case-constructor-page) {
  overflow-x: visible !important;
  background-color: #191a1b !important;
}

/* --- шапка: как на услугах / Darkrain (logo слева, nav справа) --------------- */
body:has(.case-constructor-page) header.header,
body:has(.case-constructor-page) .header.page-top.compressed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  display: block !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(.case-constructor-page) .header__top-line {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding-left: var(--page-gutter-x) !important;
  padding-right: var(--page-gutter-x) !important;
  position: relative !important;
  display: block !important;
}

body:has(.case-constructor-page) .header__container {
  width: 100% !important;
  max-width: 1576px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 !important;
}

/*
 * Лого: display:flex как Darkrain, БЕЗ align-items:center —
 * иначе top:33px у .header__logo-img суммируется с центрированием
 * и лого «съезжает» вниз относительно меню (~+30px).
 */
body:has(.case-constructor-page) .header__logo {
  width: auto !important;
  max-width: none !important;
  height: 95px !important;
  flex: 0 0 auto !important;
  display: flex !important;
}

/* top:33px — только десктоп (≥769). На ≤1100 header.css даёт top:0 / -1 —
   не перебивать, иначе лого «прилипает» к верху иначе, чем на услугах/Darkrain. */
@media (min-width: 769px) {
  body:has(.case-constructor-page) .header__logo-img {
    width: 132px !important;
    height: auto !important;
    position: relative !important;
    top: 33px !important;
  }
}

@media (max-width: 768px) {
  body:has(.case-constructor-page) .header__logo {
    height: auto !important;
  }

  body:has(.case-constructor-page) .header__logo-img {
    width: 97px !important;
    height: auto !important;
    position: relative !important;
    top: 0 !important;
  }
}

/* Десктопное горизонтальное меню — только ≥1251.
   display:block !important на всех ширинах оставлял «Кейсы/Услуги» поверх бургера. */
body:has(.case-constructor-page) .navigation-menu {
  flex: 0 0 auto !important;
}

@media (min-width: 1251px) {
  body:has(.case-constructor-page) .navigation-menu {
    display: block !important;
  }
}

@media (max-width: 1250px) {
  body:has(.case-constructor-page) .navigation-menu {
    display: none !important;
  }
}

body:has(.case-constructor-page) .menu-icon__wrapper,
body:has(.case-constructor-page) .menu-icon__wrapper_main {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

/*
 * Бургер при скролле (класс .show): бандл даёт right:0 → в край экрана.
 * Всегда gutter + safe-area, как header.css на ≤1250.
 */
body:has(.case-constructor-page) .header .menu-icon,
body:has(.case-constructor-page) .header .menu-icon.show,
body:has(.case-constructor-page) .compressed.header .menu-icon {
  left: auto !important;
  right: calc(var(--page-gutter-x) + env(safe-area-inset-right, 0px)) !important;
  pointer-events: auto !important;
}

body:has(.case-constructor-page) .menu-icon__wrapper .menu-icon {
  pointer-events: auto !important;
}

/* --- hero: эталон Darkrain + стык без «границы картинки» --------------------
   Desktop ≥1240: ровно 800px (НЕ 100vh).
   Фото — на ::before (не background у .hero) + mask → transparent у низа,
   чтобы при скролле не было жёсткого края фото поверх fixed canvas
   (как salesmarketing). ::after — мягкое затемнение текста, тоже без
   глухой полосы #191a1b на самом низу. overflow:visible обязателен. */
.page--case-constructor .hero,
.case-constructor-page .hero {
  --hero-bg-image: none;
  --hero-bg-position: center center;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  color: #fff;
  text-align: left;
  /* transparent: под маской фото виден fixed #gradient-canvas */
  background-color: transparent;
  background-image: none;
  min-height: 552px;
  height: auto;
  overflow: visible !important;
  isolation: isolate;
}

/* Фото hero: слой под текстом, маска гасит низ → нет «границы картинки» */
.case-constructor-page .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: transparent;
  background-image: var(--hero-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--hero-bg-position);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 22%,
    rgba(0, 0, 0, 0.95) 42%,
    rgba(0, 0, 0, 0.7) 58%,
    rgba(0, 0, 0, 0.35) 72%,
    rgba(0, 0, 0, 0.1) 84%,
    transparent 94%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 22%,
    rgba(0, 0, 0, 0.95) 42%,
    rgba(0, 0, 0, 0.7) 58%,
    rgba(0, 0, 0, 0.35) 72%,
    rgba(0, 0, 0, 0.1) 84%,
    transparent 94%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Затемнение для читаемости текста — без глухого #191a1b на самом низу */
.case-constructor-page .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgba(25, 26, 27, 0) 0%,
    rgba(25, 26, 27, 0.35) 18%,
    rgba(25, 26, 27, 0.55) 38%,
    rgba(25, 26, 27, 0.35) 58%,
    rgba(25, 26, 27, 0) 78%
  );
}

@media (min-width: 1240px) {
  .case-constructor-page .hero {
    height: 800px !important;
    min-height: 800px !important;
    justify-content: flex-start;
  }
}

@media (max-width: 1239px) {
  /* Как Darkrain mobile: текст по центру hero 552px, не «прилипший» сверху.
     Desktop запрет justify:center сюда не переносить — там якорь padding-top 370. */
  .case-constructor-page .hero {
    height: auto;
    min-height: 552px;
    justify-content: center;
    align-items: flex-start;
  }
}

.case-constructor-page .hero .container {
  width: 100%;
  max-width: 1576px;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--case-content-gutter-x);
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

@media (min-width: 1240px) {
  /* Darkrain prod: h1Top ≈ 370px при hero 800px */
  .case-constructor-page .hero .container {
    padding-top: 370px;
  }
}

@media (max-width: 1239px) {
  .case-constructor-page .hero .container {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.case-constructor-page .hero .content {
  max-width: 900px;
  padding: 0 40px 40px 0;
  margin: 0 !important;
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .case-constructor-page .hero .content {
    transform: none;
  }
}

.case-constructor-page .hero .content h1 {
  color: #fff !important;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 70px !important;
  font-weight: 400;
  margin: 0 0 20px !important;
  line-height: 1.1;
}

.case-constructor-page .hero .content p {
  color: #969696 !important;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 20px !important;
  line-height: 140%;
  max-width: 640px;
  margin: 0;
}

@media (max-width: 1024px) {
  .case-constructor-page .hero .content h1 {
    font-size: 40px !important;
  }

  .case-constructor-page .hero .content p {
    font-size: 16px !important;
  }

  .case-constructor-page .hero .content {
    transform: none;
    /* Darkrain mobile: без лишнего padding — вертикаль даёт justify-content:center на .hero */
    padding: 0;
  }
}

.case-constructor-page .hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 22%,
    rgba(0, 0, 0, 0.95) 42%,
    rgba(0, 0, 0, 0.7) 58%,
    rgba(0, 0, 0, 0.35) 72%,
    rgba(0, 0, 0, 0.1) 84%,
    transparent 94%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 22%,
    rgba(0, 0, 0, 0.95) 42%,
    rgba(0, 0, 0, 0.7) 58%,
    rgba(0, 0, 0, 0.35) 72%,
    rgba(0, 0, 0, 0.1) 84%,
    transparent 94%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Контейнер блоков после hero */
.case-constructor-page > .container {
  max-width: 1576px;
  width: 100%;
  margin: 0 auto;
  /* -1px: убирает subpixel-щель на стыке с низом hero */
  margin-top: -1px;
  padding: 0 var(--case-content-gutter-x);
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  /* прозрачный — фирменный WebGL-градиент виден вокруг блоков */
  background-color: transparent;
}

/* --- text: content-marketing (интро title | body) ---------------------------
   Эталон: Darkrain intro. Описание шире «сырого» Nuxt (.content max-width:50%). */
.case-constructor-page > .container > .content-marketing:not(.numbered) {
  margin: 0 0 var(--case-block-gap);
  padding-top: 10px;
  color: #969696;
}

.case-constructor-page > .container > .content-marketing:not(.numbered) .content-marketing-title {
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 300 !important;
  font-size: 24px !important;
  line-height: 1.6;
  color: #fff !important;
  margin: 0 0 20px;
}

.case-constructor-page > .container > .content-marketing:not(.numbered) > .content {
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 29px;
  color: #969696;
  max-width: none;
  width: 100%;
}

.case-constructor-page > .container > .content-marketing:not(.numbered) > .content p {
  margin: 0;
}

.case-constructor-page > .container > .content-marketing:not(.numbered) > .content p + p {
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .case-constructor-page > .container > .content-marketing:not(.numbered) {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    column-gap: 56px;
    align-items: baseline;
  }

  .case-constructor-page > .container > .content-marketing:not(.numbered) > header {
    margin: 0;
  }

  .case-constructor-page > .container > .content-marketing:not(.numbered) .content-marketing-title {
    margin-bottom: 0;
  }

  .case-constructor-page > .container > .content-marketing:not(.numbered) > .content {
    margin: 0;
  }
}

@media (max-width: 1023px) {
  /* Darkrain mobile intro: title 24/500, mb 60; body остаётся 18/29 — не ужимать */
  .case-constructor-page > .container > .content-marketing:not(.numbered) {
    padding-top: 0;
  }

  .case-constructor-page > .container > .content-marketing:not(.numbered) .content-marketing-title {
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 30px;
    margin-bottom: 60px;
  }

  .case-constructor-page > .container > .content-marketing:not(.numbered) > .content {
    font-size: 18px;
    line-height: 29px;
  }
}

/* --- results: .card.glowing (метрики) ---------------------------------------
   Эталон: Darkrain «Результаты». Сетка до 3 кол. (6 метрик = 2 ряда).
   Без gradient-обводки и без blur-::before (дают «странную» неоновую кромку).
   Ambient — только мягкий box-shadow. */
.case-constructor-page .card.glowing {
  --br: 30px;
  position: relative;
  display: block;
  border-radius: var(--br);
  margin: 0 0 var(--case-block-gap);
  padding: 0;
  background: #1d1d1f;
  border: none;
  box-shadow:
    -70px 10px 120px rgba(116, 11, 160, 0.48),
    70px 30px 130px rgba(74, 80, 203, 0.4),
    0 0 80px rgba(48, 90, 163, 0.2);
}

.case-constructor-page .card.glowing::before {
  content: none;
  display: none;
}

.case-constructor-page .card.glowing > .inside {
  position: relative;
  z-index: 2;
  border-radius: var(--br);
  overflow: hidden;
  background-color: transparent;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .case-constructor-page .card.glowing > .inside {
    padding: 48px 70px;
  }
}

.case-constructor-page .card.glowing .card-header {
  padding: 0 0 32px;
}

.case-constructor-page .card.glowing.not-nested .card-header h2 {
  margin: 0;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 54px !important;
  font-weight: 500 !important;
  line-height: 1.15;
  color: #fff !important;
}

.case-constructor-page .card.glowing .separator {
  height: 2px;
  width: 100%;
  border: 0;
  margin: 0;
  background: linear-gradient(
    -45deg,
    #00f0ff,
    #ff00b5,
    #00f0ff,
    #94589e,
    #ff00b5,
    #00f0ff
  );
  background-size: 200% 100%;
}

.case-constructor-page .card.glowing .statistics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 50px;
  row-gap: 50px;
  padding: 32px 0;
}

.case-constructor-page .card.glowing .stat-item h2 {
  margin: 0;
  font-family: "Hero New", MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  line-height: 1.2;
  color: #fff !important;
}

.case-constructor-page .card.glowing .stat-item p {
  margin: 14px 0 0;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.45;
  color: #969696;
}

@media (max-width: 1023px) {
  .case-constructor-page .card.glowing {
    --br: 20px;
  }

  .case-constructor-page .card.glowing.not-nested .card-header h2 {
    font-size: 32px !important;
  }

  .case-constructor-page .card.glowing .statistics {
    grid-template-columns: 1fr;
    column-gap: 28px;
    row-gap: 28px;
    padding: 24px 0;
  }

  .case-constructor-page .card.glowing .stat-item h2 {
    font-size: 28px !important;
  }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .case-constructor-page .card.glowing .statistics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- steps: «Этапы работы» -------------------------------------------------
   Darkrain TOC (без summary): 2 col; номер+title #969696; линии только li::after;
   border-top НЕТ. С summary: 1 col, p visible — опциональный вариант каталога. */
.case-constructor-page .steps-container {
  /* Darkrain: до title «Этапы» ≈150px от блока выше; после TOC — до главы */
  margin-top: var(--case-section-gap);
  margin-bottom: var(--case-section-gap);
  padding: 0;
}

.case-constructor-page .steps-title {
  margin: 0 0 30px;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 54px !important;
  font-weight: 400 !important;
  line-height: 1.15;
  color: #fff !important;
}

.case-constructor-page .steps-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 0;
  border-top: none;
}

.case-constructor-page .steps-list--with-summary {
  grid-template-columns: minmax(0, 1fr);
}

.case-constructor-page .steps-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: 5px 0;
  padding: 25px 0 20px;
  opacity: 1 !important;
  cursor: default;
  transition: color 0.2s ease;
}

@media screen and (min-width: 1366px) {
  .case-constructor-page .steps-list li {
    align-items: center;
  }
}

.case-constructor-page .steps-list li[role="link"] {
  cursor: pointer;
}

.case-constructor-page .steps-list li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #999;
}

.case-constructor-page .steps-list li[role="link"]:hover::after {
  background: linear-gradient(-45deg, #00f0ff, #ff00b5, #94589e, #00f0ff);
  background-size: 400% 400%;
}

.case-constructor-page .steps-list .step-number {
  flex: 0 0 auto;
  padding: 4px 30px 0 0;
  font-family: "Hero New", MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 150%;
  color: #969696 !important;
}

.case-constructor-page .steps-list .step-content {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.case-constructor-page .steps-list .step-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.case-constructor-page .steps-list .step-header .arrow {
  display: none !important;
}

.case-constructor-page .steps-list h3 {
  margin: 0;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  line-height: 150%;
  height: auto;
  min-height: unset;
  color: #969696 !important;
}

/* TOC: summary скрыт. --with-summary: показать (редкий вариант). */
.case-constructor-page .steps-list .step-content > p {
  display: none !important;
}

.case-constructor-page .steps-list--with-summary .step-content > p {
  display: block !important;
  max-height: none !important;
  margin: 0 !important;
  opacity: 1 !important;
  overflow: visible !important;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 150%;
  color: #969696 !important;
}

.case-constructor-page .steps-list--with-summary .step-number,
.case-constructor-page .steps-list--with-summary h3 {
  color: #fff !important;
}

@media screen and (min-width: 1366px) {
  .case-constructor-page .steps-list--with-summary .step-content {
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding-right: 40px;
  }

  .case-constructor-page .steps-list--with-summary h3 {
    flex: 0 0 360px;
    max-width: 40%;
  }

  .case-constructor-page .steps-list--with-summary .step-content > p {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.case-constructor-page .steps-list li[role="link"]:hover .step-number,
.case-constructor-page .steps-list li[role="link"]:hover h3 {
  color: #fff !important;
}

@media (max-width: 1023px) {
  .case-constructor-page .steps-title {
    font-size: 36px !important;
  }

  .case-constructor-page .steps-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-constructor-page .steps-list h3 {
    font-size: 22px !important;
  }

  .case-constructor-page .steps-list .step-number {
    padding-right: 16px;
    font-size: 18px;
  }
}

/* --- text_numbered: «1 / Увеличение конверсии…» + текст справа --------------
   Эталон Darkrain «1 Контент-маркетинг»: цифра сверху, крупный белый title слева,
   body справа; верх body = верх цифры.
   ВАЖНО: если сразу после секции идёт `.content-bottom` (вложенные blocks[]) —
   margin-bottom главы = 0 (это одна секция). Структурный --case-section-gap
   вешаем на `.content-bottom`, иначе «Брифинг» отлетает на 150+64px. */
.case-constructor-page .content-marketing.numbered {
  margin-top: 0;
  margin-bottom: var(--case-section-gap);
  color: #fff;
}

.case-constructor-page .content-marketing.numbered:has(+ .content-bottom) {
  margin-bottom: 0;
}

/* Чуть больше воздуха от body главы («Увеличение…») до первого вложенного («Брифинг»).
   Раньше только pt 64 у первого ребёнка; +36 на .content-bottom → gap ≈100px. */
.case-constructor-page .content-marketing.numbered + .content-bottom {
  padding-top: 36px;
}

.case-constructor-page .content-marketing.numbered > header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
}

.case-constructor-page .content-marketing.numbered > header .section-number {
  display: block;
  padding-top: 0;
  margin: 0 0 12px;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #969696 !important;
}

.case-constructor-page .content-marketing.numbered > header .content-marketing-numbered-title {
  margin: 0;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 46px !important;
  font-weight: 400 !important;
  line-height: 1.2;
  color: #fff !important;
}

.case-constructor-page .content-marketing.numbered > .content {
  margin: 0;
  max-width: none;
  width: 100%;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 160%;
  color: #969696 !important;
}

.case-constructor-page .content-marketing.numbered > .content p {
  margin: 0;
  color: #969696 !important;
  /* Darkrain: сужает строку описания (~546px при 1440) */
  padding-right: 79px;
}

.case-constructor-page .content-marketing.numbered > .content p + p {
  margin-top: 20px;
}

/* Ссылка в body главы / текста — белая (по ТЗ кейса; не наследовать #969696 у p) */
.case-constructor-page .content-marketing a.case-content-link {
  color: #fff !important;
  text-decoration: none;
  font-weight: 300;
  transition: opacity 0.2s ease;
}

.case-constructor-page .content-marketing a.case-content-link:hover {
  color: #fff !important;
  opacity: 0.8;
}

@media (min-width: 1024px) {
  .case-constructor-page .content-marketing.numbered {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }

  /* как Darkrain / refinements: header до 620px (~50%), не 38% —
     иначе description забирает ~800px и выглядит «слишком широко». */
  .case-constructor-page .content-marketing.numbered > header {
    flex: 0 0 auto;
    width: 50%;
    max-width: 620px;
  }

  .case-constructor-page .content-marketing.numbered > .content {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }
}

@media (max-width: 1023px) {
  .case-constructor-page .content-marketing.numbered > .content p {
    padding-right: 0;
  }

  /* Darkrain mobile «1 Контент-маркетинг»: 24/500, lh 36, mb 33 до body */
  .case-constructor-page .content-marketing.numbered > header .content-marketing-numbered-title {
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 36px;
    margin-bottom: 33px;
  }
}

@media (max-width: 450px) {
  .case-constructor-page .content-marketing.numbered > header .content-marketing-numbered-title {
    font-size: 24px !important;
  }
}

/* --- text внутри text_numbered (.content-bottom) — без цифры -----------------
   Внутренняя вложенность главы, НЕ отдельная секция страницы.
   Выравнивание заголовков (Darkrain): .content-bottom padding-left/right 79px
   на ≥1024 — «Брифинг» правее, чем «1 Увеличение…» (delta ≈79px).
   Ритм: padding-top 64px / margin-bottom 30px → ~94px между подзаголовками. */
.case-constructor-page .content-bottom {
  margin: 0 0 var(--case-section-gap);
  padding: 0;
}

@media (min-width: 1024px) {
  /* Vue на Darkrain ставил inline padding 79px; на статике — CSS */
  .case-constructor-page .content-bottom {
    padding-left: 79px;
    padding-right: 79px;
  }
}

.case-constructor-page .content-bottom > .content-marketing:not(.numbered) {
  margin: 0 0 30px;
  padding: 64px 0 0;
  color: #969696;
}

.case-constructor-page .content-bottom > .content-marketing:not(.numbered):last-child {
  margin-bottom: 0;
}

.case-constructor-page .content-bottom > .content-marketing:not(.numbered) .content-marketing-title {
  margin: 0;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  line-height: 150%;
  color: #fff !important;
}

.case-constructor-page .content-bottom > .content-marketing:not(.numbered) > .content {
  margin: 0;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 160%;
  color: #969696;
  max-width: none;
}

.case-constructor-page .content-bottom > .content-marketing:not(.numbered) > .content p {
  margin: 0;
  color: #969696 !important;
}

.case-constructor-page .content-bottom > .content-marketing:not(.numbered) > .content p + p {
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .case-constructor-page .content-bottom > .content-marketing:not(.numbered) {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }

  .case-constructor-page .content-bottom > .content-marketing:not(.numbered) > header {
    flex: 0 0 auto;
    width: 50%;
    max-width: 620px;
    margin: 0;
  }

  .case-constructor-page .content-bottom > .content-marketing:not(.numbered) > .content {
    flex: 1 1 auto;
    min-width: 0;
    /* внутри padded content-bottom (~1127px): как Darkrain nested ~487 */
    max-width: 487px;
  }

  /* Текст без title (только body) — та же правая колонка, что у пары title|body */
  .case-constructor-page .content-bottom > .content-marketing:not(.numbered):not(:has(> header))::before {
    content: "";
    flex: 0 0 auto;
    width: 50%;
    max-width: 620px;
  }
}

@media (max-width: 1023px) {
  .case-constructor-page .content-bottom {
    padding-left: 0;
    padding-right: 0;
  }

  .case-constructor-page .content-bottom > .content-marketing:not(.numbered) {
    padding-top: 44px;
  }

  .case-constructor-page .content-bottom > .content-marketing:not(.numbered) .content-marketing-title {
    font-size: 24px !important;
    margin-bottom: 16px;
  }
}

/* --- text_numbered_columns: сетка с цифрами в квадратах (Darkrain campaigns) -
   Эталон: .campaigns-list 3 col ≥1024, gap 50×80; .campaign-number 54×54,
   radius 13, bg #1d1d1f, drop-shadow glow, Hero New 24/700.
   Текст пункта — h3 14px/140% #969696 (бандл #777 → контур #969696).
   Внутри .content-bottom: padding-top 64px как у вложенных text. */
.case-constructor-page .campaigns-container {
  margin: 0;
  padding: 36px 0 90px;
  color: #fff;
}

/* Внутри главы: сверху ритм как у nested text (64), снизу 90 как Darkrain
   (.campaigns-container padding-bottom:90 — сверено на /case/darkrain-store).
   Следующий sibling не должен копить свой padding-top поверх этих 90px. */
.case-constructor-page .content-bottom > .campaigns-container {
  padding: 64px 0 90px;
}

.case-constructor-page .content-bottom > .campaigns-container + .content-marketing:not(.numbered),
.case-constructor-page .content-bottom > .campaigns-container + .chart-swiper {
  padding-top: 0;
}

.case-constructor-page .campaigns-container .text-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 90px;
}

.case-constructor-page .campaigns-container .text-content h2 {
  margin: 0 0 22px;
  max-width: 320px;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 130%;
  color: #fff !important;
}

.case-constructor-page .campaigns-container .text-content p {
  margin: 0;
  max-width: 524px;
  font-size: 18px;
  font-weight: 300;
  line-height: 140%;
  color: #969696 !important;
}

.case-constructor-page .campaigns-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 50px;
  column-gap: 80px;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: center;
}

@media (min-width: 1024px) {
  .case-constructor-page .campaigns-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .case-constructor-page .campaigns-container .text-content h2 {
    font-size: 32px !important;
    margin-bottom: 0;
  }
}

.case-constructor-page .campaigns-list > li {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  min-width: 0;
  cursor: default;
}

.case-constructor-page .campaign-number {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 13px;
  background-color: #1d1d1f;
  filter: drop-shadow(0 0 20px rgba(113, 91, 176, 0.3));
  font-family: "Hero New", MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 54px;
  color: #fff;
  text-align: center;
}

.case-constructor-page .campaign-content {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0;
}

.case-constructor-page .campaign-content h3 {
  margin: 0;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 140%;
  color: #969696 !important;
}

.case-constructor-page .campaign-content p {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 140%;
  color: #969696 !important;
}

@media (max-width: 1023px) {
  .case-constructor-page .content-bottom > .campaigns-container {
    padding-top: 44px;
    padding-bottom: 60px;
  }

  .case-constructor-page .campaigns-list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }
}

/* --- chart_swiper: слайдер графиков / медиа (Darkrain .chart-swiper) ---------
   Эталон 1440: ~1040×~545 (чуть крупнее 900×500 — читаемее подписи оси),
   caption mt 35px, slide pad 15px / gap 30px,
   стрелка 40×40 по центру графика; зазор от картинки — сужением графика,
   НЕ padding на .chart-swiper (иначе prev-слайд торчит в gutter при overflow).
   После блока — только --case-block-gap.
   isChart: анимируется ТОЛЬКО path.line (stroke-dash), сетка/подписи статичны.
   Не clip-path на весь <img> — это двигает сетку вместе с линией. */
.case-constructor-page .chart-swiper {
  --case-chart-nav-gutter: 72px;
  --case-chart-h: calc(min(1040px, 100cqw - 2 * var(--case-chart-nav-gutter)) * 945 / 1868);
  position: relative;
  margin-top: 0;
  margin-bottom: var(--case-block-gap);
  width: 100%;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: case-chart-swiper;
  overflow: hidden;
}

.case-constructor-page .content-bottom > .chart-swiper {
  padding-top: 64px;
}

/* Ритм после графика/медиа — только margin-bottom (--case-block-gap).
   Иначе соседний text даёт ещё pt 64/44 → визуально ~104/84px. */
.case-constructor-page .content-bottom > .chart-swiper + .content-marketing:not(.numbered),
.case-constructor-page .content-bottom > .chart-swiper + .content-sections,
.case-constructor-page .content-bottom > .chart-swiper + .video-wrapper,
.case-constructor-page .content-bottom > .chart-swiper + .chart-swiper,
.case-constructor-page .content-bottom > .chart-swiper + .tall-image,
.case-constructor-page .content-bottom > .chart-swiper + .device-mockup,
.case-constructor-page .content-bottom > .chart-swiper + .case-team,
.case-constructor-page .content-bottom > .chart-swiper + .campaigns-container {
  padding-top: 0;
}

.case-constructor-page .chart-swiper .swiper-slide {
  padding: 0 15px;
  text-align: center;
  box-sizing: border-box;
}

.case-constructor-page .chart-swiper__chart {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.case-constructor-page .chart-swiper__chart-inner {
  position: relative;
  /* место под стрелки слева/справа внутри слайда — без padding на .chart-swiper */
  width: min(1040px, calc(100% - 2 * var(--case-chart-nav-gutter)));
  max-width: 100%;
}

/* raster isChart: img = источник/fallback; canvas рисует reveal линии */
.case-constructor-page .chart-swiper__chart-inner[data-sa-chart-raster="1"] .chart-swiper__raster-source {
  display: block;
  width: 100%;
  height: auto;
  /* не показывать полный график до canvas — иначе «призрак» линии до анимации */
  opacity: 0;
  pointer-events: none;
}

.case-constructor-page .chart-swiper__chart-inner[data-sa-chart-raster="1"].sa-chart-raster-ready .chart-swiper__raster-source {
  /* display:none — иначе img занимает высоту и рисует «призрак» под canvas */
  display: none !important;
}

.case-constructor-page .chart-swiper__chart-inner[data-sa-chart-raster="1"] .chart-swiper__raster-canvas {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  background: transparent;
}

.case-constructor-page .chart-swiper__chart-inner[data-sa-chart-raster="1"]:not(.sa-chart-raster-ready) .chart-swiper__raster-canvas {
  display: none;
}

/* fallback без JS / если canvas не поднялся */
.case-constructor-page .chart-swiper__chart-inner[data-sa-chart-raster="1"].sa-chart-raster-fallback:not(.sa-chart-raster-ready) .chart-swiper__raster-source {
  opacity: 1;
  display: block;
}

.case-constructor-page .chart-swiper__chart > div:not(.chart-swiper__chart-inner) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.case-constructor-page .chart-swiper__chart img,
.case-constructor-page .chart-swiper__chart svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .case-constructor-page .chart-swiper__chart-inner {
    width: min(1040px, calc(100% - 2 * var(--case-chart-nav-gutter)));
  }

  .case-constructor-page .chart-swiper__chart img:not(.chart-swiper__raster),
  .case-constructor-page .chart-swiper__chart svg,
  .case-constructor-page .chart-swiper__chart video {
    width: min(1040px, calc(100% - 2 * var(--case-chart-nav-gutter)));
    max-width: 100%;
    height: auto;
  }

  /* Мудборд / обычные медиа (без isChart): эталон Miramar live ≈900×500.
     Опционально mediaScale / mediaWidth → --case-media-w (например 1.5 → 1350px). */
  .case-constructor-page .chart-swiper:not([data-sa-chart="1"]) {
    --case-media-w: 900px;
    --case-chart-h: calc(min(var(--case-media-w), 100cqw - 2 * var(--case-chart-nav-gutter)) * 500 / 900);
  }

  .case-constructor-page .chart-swiper:not([data-sa-chart="1"]) .chart-swiper__chart img,
  .case-constructor-page .chart-swiper:not([data-sa-chart="1"]) .chart-swiper__chart video {
    width: min(var(--case-media-w), calc(100% - 2 * var(--case-chart-nav-gutter)));
  }

  /* Одна картинка (не слайдер): без gutter под стрелки — как Miramar presentation ~887–900 */
  .case-constructor-page .chart-swiper--single {
    --case-chart-nav-gutter: 0px;
    --case-chart-h: calc(min(var(--case-media-w, 900px), 100cqw) * 500 / 900);
    overflow: visible;
  }

  .case-constructor-page .chart-swiper--single:not([data-sa-chart="1"]) .chart-swiper__chart img,
  .case-constructor-page .chart-swiper--single:not([data-sa-chart="1"]) .chart-swiper__chart video {
    width: min(var(--case-media-w, 900px), 100%);
  }

  /* Крупное одиночное медиа (mediaScale/mediaWidth > 900): шире padded content-bottom */
  .case-constructor-page .content-bottom > .chart-swiper--single.chart-swiper--wide:not([data-sa-chart="1"]) {
    width: min(var(--case-media-w, 900px), 100vw);
    max-width: 100vw;
    margin-left: calc(50% - min(var(--case-media-w, 900px), 100vw) / 2);
    margin-right: 0;
  }
}

.case-constructor-page .chart_content {
  margin-top: 35px;
  margin-bottom: 0;
  text-align: center;
  font-weight: 300;
  color: #fff;
}

.case-constructor-page .chart_content h2 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 500;
  color: #fff;
}

.case-constructor-page .chart_content p {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 300;
  /* как Nuxt .chart-slider__subtitle на Miramar — не rgba(255,255,255,.72) */
  color: #777;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Стрелки: круг 40×40; top уточняет JS (центр .chart-swiper__chart), CSS — fallback */
.case-constructor-page .chart-swiper .custom-swiper-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 0;
  top: calc(var(--case-chart-h) / 2);
  right: 4px;
  left: auto;
  cursor: pointer;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  background-color: transparent;
  background-image: none !important;
  transform: translateY(-50%);
  transition: background-color 0.3s ease;
  z-index: 10;
}

.case-constructor-page .content-bottom > .chart-swiper .custom-swiper-button {
  top: calc(64px + var(--case-chart-h) / 2);
}

.case-constructor-page .chart-swiper .custom-swiper-button.sa-cloned-prev,
.case-constructor-page .chart-swiper .custom-swiper-button.swiper-button-prev {
  right: auto;
  left: 4px;
}

.case-constructor-page .chart-swiper .custom-swiper-button:after {
  display: none;
  content: none;
}

.case-constructor-page .chart-swiper .custom-swiper-button svg {
  width: 9px;
  height: 16px;
  fill: none;
}

.case-constructor-page .chart-swiper .custom-swiper-button.swiper-button-next svg {
  transform: rotate(180deg);
}

.case-constructor-page .chart-swiper .custom-swiper-button:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.case-constructor-page .chart-swiper .custom-swiper-button:focus,
.case-constructor-page .chart-swiper .custom-swiper-button:focus-visible,
.case-constructor-page .chart-swiper .custom-swiper-button:active {
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.case-constructor-page .chart-swiper .sa-cloned-prev.swiper-button-prev.swiper-button-disabled,
.case-constructor-page .chart-swiper .swiper-button-next.swiper-button-disabled {
  display: none;
}

/* isChart: сетка/оси сразу видны; рисуется только .line (Darkrain stroke-dash).
   Raster-fallback без SVG больше не анимируем целиком — только SVG-линии. */
.case-constructor-page .chart-swiper[data-sa-chart="1"] .chart-swiper__chart svg .line,
.case-constructor-page .chart-swiper[data-sa-chart="1"] .chart-swiper__chart svg .line-2,
.case-constructor-page .chart-swiper[data-sa-chart="1"] .chart-swiper__chart svg .line-3,
.case-constructor-page .chart-swiper[data-sa-chart="1"] .chart-swiper__chart svg .line-4,
.case-constructor-page .chart-swiper[data-sa-chart="1"] .chart-swiper__chart svg .line-5,
.case-constructor-page .chart-swiper[data-sa-chart="1"] .chart-swiper__chart svg .line-6 {
  stroke-dasharray: 8000;
  stroke-dashoffset: 8000;
}

.case-constructor-page .chart-swiper[data-sa-chart="1"].sa-chart-inview .swiper-slide-active .chart-swiper__chart svg .line,
.case-constructor-page .chart-swiper[data-sa-chart="1"].sa-chart-inview .swiper-slide-active .chart-swiper__chart svg .line-2,
.case-constructor-page .chart-swiper[data-sa-chart="1"].sa-chart-inview .swiper-slide-active .chart-swiper__chart svg .line-3,
.case-constructor-page .chart-swiper[data-sa-chart="1"].sa-chart-inview .swiper-slide-active .chart-swiper__chart svg .line-4,
.case-constructor-page .chart-swiper[data-sa-chart="1"].sa-chart-inview .swiper-slide-active .chart-swiper__chart svg .line-5,
.case-constructor-page .chart-swiper[data-sa-chart="1"].sa-chart-inview .swiper-slide-active .chart-swiper__chart svg .line-6,
.case-constructor-page .chart-swiper[data-sa-chart="1"] .swiper-slide.sa-chart-drawn .chart-swiper__chart svg .line,
.case-constructor-page .chart-swiper[data-sa-chart="1"] .swiper-slide.sa-chart-drawn .chart-swiper__chart svg .line-2,
.case-constructor-page .chart-swiper[data-sa-chart="1"] .swiper-slide.sa-chart-drawn .chart-swiper__chart svg .line-3,
.case-constructor-page .chart-swiper[data-sa-chart="1"] .swiper-slide.sa-chart-drawn .chart-swiper__chart svg .line-4,
.case-constructor-page .chart-swiper[data-sa-chart="1"] .swiper-slide.sa-chart-drawn .chart-swiper__chart svg .line-5,
.case-constructor-page .chart-swiper[data-sa-chart="1"] .swiper-slide.sa-chart-drawn .chart-swiper__chart svg .line-6 {
  animation: sa-case-chart-dash 1.2s ease forwards;
}

@keyframes sa-case-chart-dash {
  to {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 1024px) {
  /* Стрелки скрыты — gutter 72px больше не нужен, иначе график ~146px на 390. */
  .case-constructor-page .chart-swiper {
    --case-chart-nav-gutter: 0px;
  }

  .case-constructor-page .chart-swiper .custom-swiper-button {
    display: none;
  }

  /* Live Miramar: график на всю ширину content (≈310 на 390), без slide pad. */
  .case-constructor-page .chart-swiper[data-sa-chart="1"] .swiper-slide {
    padding: 0;
  }

  .case-constructor-page .chart-swiper .swiper-slide {
    padding: 0 12px;
  }

  .case-constructor-page .chart_content {
    margin-top: 36px;
  }

  .case-constructor-page .content-bottom > .chart-swiper {
    padding-top: 44px;
  }
}

@media (max-width: 450px) {
  .case-constructor-page .chart-swiper {
    overflow: visible;
  }

  .case-constructor-page .chart-swiper .swiper-slide {
    padding: 0 10px;
  }

  .case-constructor-page .chart-swiper[data-sa-chart="1"] .swiper-slide {
    padding: 0;
  }

  .case-constructor-page .chart-swiper__chart {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- text_columns: текстовые колонки (Miramar inform-block / Darkrain subsections) -
   Desktop ≥1024: сетка 3 колонки, gap 64×89 (эталон Miramar SEO/Структура/Контент).
   Title 26px/500 #fff; body 14px/300 #777.
   Вложенные в content-bottom: ширина = вложенный text (header 50%/max620 + gap 40 + body 487),
   НЕ тянуть правый край до описания нумерованной главы / полного content-bottom. ---- */
.case-constructor-page .content-sections {
  margin: 0 0 var(--case-block-gap);
  padding: 0;
}

.case-constructor-page .content-bottom > .content-sections {
  padding-top: 64px;
  box-sizing: border-box;
  /* как у соседнего .content-marketing:not(.numbered): header + gap + .content */
  max-width: calc(min(50%, 620px) + 40px + 487px);
}

.case-constructor-page .content-sections .section {
  margin: 0;
}

.case-constructor-page .subsections-wrapper {
  position: relative;
}

.case-constructor-page .scroll-indicator-empty,
.case-constructor-page .scroll-indicator {
  display: none;
}

.case-constructor-page .subsections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px 89px;
}

.case-constructor-page .subsection {
  min-width: 0;
}

.case-constructor-page .subsection h3 {
  margin: 0 0 16px;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
}

.case-constructor-page .subsection p {
  margin: 0;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  color: #777;
}

.case-constructor-page .subsection p + p {
  margin-top: 12px;
}

@media (max-width: 1023px) {
  .case-constructor-page .content-bottom > .content-sections {
    padding-top: 44px;
    max-width: none;
  }

  /* Как live Miramar contentSwiper: один слайд = 100% ширины трека,
     без «щели» 6px со следующей колонкой (иначе «Структура» буквой в столбик). */
  .case-constructor-page .subsections-wrapper {
    overflow: hidden;
  }

  .case-constructor-page .subsections {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
  }

  .case-constructor-page .subsections::-webkit-scrollbar {
    display: none;
  }

  .case-constructor-page .subsection {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    scroll-snap-align: start;
    box-sizing: border-box;
  }

  .case-constructor-page .scroll-indicator-empty {
    display: block;
    height: 2px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.15);
  }

  .case-constructor-page .scroll-indicator {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: #fff;
    pointer-events: none;
  }

  .case-constructor-page .subsection h3 {
    font-size: 22px;
  }
}

/* --- video: контентное видео (не hero) ---------------------------------------
   Эталон Miramar: ~900×500, как одиночная media-картинка.
   mockup:laptop — рамка MacBook (svg с /sozdanie-internet-magazina). ----------- */
.case-constructor-page .video-wrapper {
  margin: 0 0 var(--case-block-gap);
  padding: 0;
  text-align: center;
}

.case-constructor-page .content-bottom > .video-wrapper {
  padding-top: 64px;
}

.case-constructor-page .video-wrapper .full-width-video {
  display: block;
  width: min(900px, 100%);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 0;
  background: #0a0a0a;
}

.case-constructor-page .video-wrapper--laptop {
  /* Чуть шире медиа-слайдов (900), чтобы 16:9 contain в ~16:10-экране читался крупнее */
  width: min(1200px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.case-constructor-page .case-laptop {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 56.4019%;
}

.case-constructor-page .case-laptop__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  /* SVG содержит непрозрачный «Dark Screen» — рамка НИЖЕ видео */
  z-index: 0;
}

/* Inset = стекло SVG (macbook trio). Видео 16:9 в апертуре ~16:10 → contain,
   иначе cover обрезает бока кадра. Мокап шире медиа-900, чтобы contain читался. */
.case-constructor-page .case-laptop__screen {
  position: absolute;
  overflow: hidden;
  inset: 5.80483% 12.251% 10.0252%;
  border-radius: 1px;
  background-color: #0a0a0a;
  z-index: 1;
}

.case-constructor-page .case-laptop__screen .full-width-video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  margin: 0;
  border: 0;
  background: #0a0a0a;
}

@media (max-width: 1023px) {
  .case-constructor-page .content-bottom > .video-wrapper {
    padding-top: 44px;
  }

  .case-constructor-page .content-bottom > .slider-container {
    padding-top: 44px;
  }
}

/* --- counter_slider: встречная лента (эталон Miramar bigslider) --------------
   Один ряд: rows:1 без imagesBottom.
   Stories: высота карточки 384px, gap 35px, full-bleed 100vw (как #slider-1).
   Анимация на 3× клонах → translateX(-33.3333%).
   Запрещено: filter/brightness на img; Nuxt .slide:after затемнение — не добавлять. */
.case-constructor-page .slider-container {
  --case-slide-h: 200px;
  display: flex;
  flex-direction: column;
  gap: 35px;
  width: 100vw;
  max-width: 100vw;
  margin: 0 0 var(--case-block-gap);
  margin-left: calc(-50vw + 50%);
  position: relative;
  overflow: hidden;
}

.case-constructor-page .content-bottom > .slider-container {
  /* как chart-swiper / video: ритм после вложенного text (у text mb 30px) */
  padding-top: 64px;
  margin-left: calc(-50vw + 50%);
}

.case-constructor-page .slider-container--stories {
  --case-slide-h: 384px;
  /* не ограничивать контейнер 384px — иначе padding-top съест высоту карточек */
  max-height: none;
}

.case-constructor-page .slider-container .slider {
  display: flex;
  gap: 35px;
  width: max-content;
  transform: translateX(0);
  will-change: transform;
}

.case-constructor-page .slider-container .slider.animate {
  animation: case-counter-scroll-left 30s linear infinite;
}

.case-constructor-page .slider-container .slider.animate.reverse {
  animation: case-counter-scroll-right 45s linear infinite;
}

.case-constructor-page .slider-container .slide {
  flex: 0 0 auto;
  height: var(--case-slide-h);
  max-height: var(--case-slide-h);
  position: relative;
  line-height: 0;
  border-radius: 16px;
  overflow: hidden;
  clip-path: inset(0 round 16px);
  -webkit-clip-path: inset(0 round 16px);
  background-color: #191a1b;
  /* тёмное кольцо гасит светлый AA-fringe у скругления */
  box-shadow: 0 0 0 1px #191a1b;
}

.case-constructor-page .slider-container .slide img,
.case-constructor-page .slider-container .slide video {
  display: block;
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center center;
  margin: 0;
  border: 0;
  border-radius: 0;
  /* snapshot bundle: img{will-change:all;transform:translateZ(0)} → светлый fringe */
  transform: none !important;
  will-change: auto !important;
}

@keyframes case-counter-scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-33.3333%);
  }
}

@keyframes case-counter-scroll-right {
  0% {
    transform: translateX(-33.3333%);
  }
  100% {
    transform: translateX(0);
  }
}

@media (max-width: 769px) {
  .case-constructor-page .slider-container:last-of-type {
    margin-bottom: 100px;
  }
}

/* --- team: слайдер команды (эталон Miramar personal-manager-slider) ---------- */
.case-team {
  margin: var(--case-section-gap) 0 var(--case-block-gap);
  padding: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  overflow: hidden;
}

.case-team__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 90px;
  max-width: 1576px;
}

.case-team__title {
  margin: 0;
  color: #fff;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 54px;
  font-weight: 400;
  line-height: 1.15;
}

.case-team__nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.case-team__nav .custom-swiper-button {
  position: static;
  width: 42px;
  height: 42px;
  margin: 0 0 0 20px;
  opacity: 0.5;
  cursor: pointer;
  /* Swiper ставит свой blue SVG в background-image — глушим жёстко */
  background: transparent !important;
  background-image: none !important;
  background-size: auto !important;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.case-team__nav .custom-swiper-button:hover {
  opacity: 1;
}

.case-team__nav .custom-swiper-button:focus,
.case-team__nav .custom-swiper-button:focus-visible,
.case-team__nav .custom-swiper-button:active {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-tap-highlight-color: transparent;
}

.case-team__nav .custom-swiper-button:after,
.case-team__nav .custom-swiper-button:before {
  display: none !important;
  content: none !important;
  background-image: none !important;
}

.case-team__nav .custom-swiper-button svg {
  width: 42px;
  height: 42px;
  display: block;
}

.case-team__nav .swiper-button-prev,
.case-team__nav .custom-swiper-button.sa-cloned-prev {
  transform: rotateY(180deg);
}

.case-team__nav .swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

.case-team__swiper {
  overflow: visible;
  cursor: ew-resize;
  margin: 0;
  padding: 0;
  max-width: 1576px;
}

.case-team__swiper .swiper-slide {
  width: 261px;
  height: auto;
  box-sizing: border-box;
}

/* Карточка: оболочка прозрачная (как Nuxt Miramar). Фото непрозрачные —
   выглядят цельно с текстовым блоком. Иллюстрации с альфой показывают
   mesh страницы — НЕ заливать #1c1c1f/#000 под медиа (это и есть «чёрный фон»).
   #1c1c1f только у .team-card__content. overflow+radius на карточке округляют силуэт;
   медиа — background-image (не <img>), иначе Chrome красит альфу в чёрный. */
.case-team .team-card {
  width: 100%;
  max-width: 261px;
  background: transparent;
  border-radius: 30px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.case-team .team-card__media {
  display: block;
  width: 100%;
  height: 250px;
  background-color: transparent;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.case-team .team-card__content {
  padding: 33px;
  background: #1c1c1f;
  box-sizing: border-box;
  border-radius: 0;
}

.case-team .team-card__name {
  margin: 0 0 12px;
  color: #fff;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
}

.case-team .team-card__description {
  margin: 0;
  color: #bcbcbc;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 130%;
  text-align: left;
}

@media (max-width: 860px) {
  .case-team__title {
    font-size: 50px;
  }

  .case-team__nav {
    display: none;
  }
}

@media (max-width: 768px) {
  .case-team__header {
    margin-bottom: 50px;
  }

  .case-team__swiper .swiper-slide {
    width: 207px;
  }

  .case-team .team-card {
    max-width: 207px;
  }

  .case-team .team-card__media {
    height: 200px;
  }

  .case-team .team-card__content {
    padding: 25px;
  }

  .case-team .team-card__name {
    font-size: 17px;
    margin-bottom: 6px;
  }

  .case-team .team-card__description {
    font-size: 13px;
  }
}

@media (max-width: 450px) {
  .case-team__title {
    font-size: 28px;
  }

  .case-team__header {
    margin-bottom: 45px;
  }

  .case-team__swiper .swiper-slide {
    width: 142px;
  }

  .case-team .team-card {
    max-width: 142px;
    border-radius: 22px;
  }

  .case-team .team-card__media {
    height: 135px;
  }

  .case-team .team-card__content {
    padding: 18px;
  }

  .case-team .team-card__name {
    font-size: 12px;
    margin-bottom: 4px;
  }

  .case-team .team-card__description {
    font-size: 10px;
  }
}

/* Форма заявки — sibling после .page-constructor (не внутри контейнера блоков).
   У .sa-service-lead-section__container уже padding-top: 40px → margin даёт
   суммарно ~--case-section-gap до тёмной карточки формы. */
.page-constructor.case-constructor-page + .sa-service-lead-section {
  margin-top: calc(var(--case-section-gap) - 40px);
}

/* --- more-cases («Больше кейсов») на кейсе ---------------------------------
   1) Заголовок: live — text-align:start. Snapshot ≤599 ставит center.
   2) Snapshot pt 196/130/110 + team mb → дыра над заголовком. Live: wr pt=0,
      gap card→title ≈130. У нас внутри team ещё ~29px под карточкой, поэтому
      моб. wr pt 60 → gap ≈129; desktop — --case-section-gap.
   3) Плитка: peek ~40px как live, не 84px с главной. */
.case-constructor-page .more-case-wr.more-case-wr__main,
.case-constructor-page .more-case-wr.more-case-wr__main[data-v-27a87df0] {
  padding-top: var(--case-section-gap) !important;
  padding-bottom: 0 !important;
}

@media screen and (max-width: 1023px) {
  .case-constructor-page .more-case-wr.more-case-wr__main,
  .case-constructor-page .more-case-wr.more-case-wr__main[data-v-27a87df0] {
    padding-top: 60px !important;
  }
}

@media screen and (max-width: 768px) {
  .case-constructor-page .more-case-wr .case__title-mobile,
  .case-constructor-page .more-case-wr .case__title-mobile[data-v-27a87df0] {
    text-align: left !important;
  }
}

@media screen and (max-width: 719px) {
  .case-constructor-page .more-case-wr .mor-cases-slider-wrapper .mor-cases-slide,
  .case-constructor-page .more-case-wr .mor-cases-slider-wrapper .mor-cases-slide[data-v-38965faa],
  .case-constructor-page .more-case-wr .mor-cases-slider-wrapper .mor-cases-slide_link,
  .case-constructor-page .more-case-wr .mor-cases-slider-wrapper .mor-cases-slide_link[data-v-38965faa] {
    width: calc(100vw - var(--page-inline-start, var(--page-gutter-x, 36px)) - 40px) !important;
    max-width: calc(100vw - var(--page-inline-start, var(--page-gutter-x, 36px)) - 40px) !important;
    width: calc(100dvw - var(--page-inline-start, var(--page-gutter-x, 36px)) - 40px) !important;
    max-width: calc(100dvw - var(--page-inline-start, var(--page-gutter-x, 36px)) - 40px) !important;
  }
}