/**
 * Конструктор кейсов — общие стили блоков.
 * Оболочка (фон 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;
  z-index: 130 !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) .new-static-menu.new-static-menu_main-str:not(.menu-screen-visible) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body:has(.case-constructor-page) .new-static-menu.new-static-menu_main-str.menu-screen-visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 120 !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;
  --hero-top-shade-opacity: 0;
  --hero-image-brightness: 1;
  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);
  filter: brightness(var(--hero-image-brightness));
  -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(
      180deg,
      rgba(10, 12, 13, var(--hero-top-shade-opacity)) 0%,
      rgba(10, 12, 13, calc(var(--hero-top-shade-opacity) * 0.72)) 16%,
      rgba(10, 12, 13, 0) 40%
    ),
    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;
  }
}

/* --- data_table: живая таблица поверх glow, без растровой белой подложки --- */
.case-data-table {
  width: 100%;
  margin-bottom: var(--case-block-gap);
}
.case-data-table__title,
.case-journey-map__title {
  margin: 0 0 28px;
  color: #fff;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.3;
}
.case-data-table__scroll {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) transparent;
}
.case-data-table table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  table-layout: fixed;
  color: rgba(255,255,255,.48);
  background: transparent;
}
.case-data-table th,
.case-data-table td {
  padding: 22px 26px;
  border-right: 1px dashed rgba(255,255,255,.18);
  border-bottom: 1px dashed rgba(255,255,255,.16);
  vertical-align: top;
  text-align: left;
}
.case-data-table thead th {
  padding-top: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.55);
  color: rgba(255,255,255,.9);
  background: transparent;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
}
.case-data-table th:first-child {
  width: 18%;
  color: rgba(255,255,255,.78);
  background: transparent;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
}
.case-data-table td:last-child,
.case-data-table th:last-child { border-right: 0; }
.case-data-table tbody tr:last-child > * { border-bottom: 0; }
.case-data-table ul { margin: 0; padding: 0; list-style: none; }
.case-data-table td p { margin:0;white-space:pre-line;font-size:14px;font-weight:300;line-height:1.55; }
.case-data-table li { position: relative; margin: 0 0 8px; padding-left: 15px; font-size: 14px; font-weight: 300; line-height: 1.5; }
.case-data-table li:last-child { margin-bottom: 0; }
.case-data-table li::before { content: "—"; position: absolute; left: 0; color: #8d75ff; }
.case-data-table__caption { margin: 24px auto 0; max-width: 720px; color: #777; font-size: 16px; font-weight: 300; line-height: 1.4; text-align: center; }
@media (max-width: 1023px) {
  .case-data-table__scroll { margin-inline: calc(var(--case-content-gutter-x) * -1); width: calc(100% + var(--case-content-gutter-x) * 2); padding-inline: var(--case-content-gutter-x); }
  .case-data-table table { min-width: 1080px; }
  .case-data-table th,.case-data-table td { padding: 20px 18px; }
}

/* --- disclosure: дополнительные материалы исследования --- */
.case-disclosure { margin: 56px 0 var(--case-block-gap); }
.case-disclosure > summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(460px,100%);
  min-height: 68px;
  margin: 0 auto;
  padding: 14px 36px;
  border: 0;
  border-radius: 12px;
  color: #17171b;
  background: #fff;
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  list-style: none;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.case-disclosure > summary::-webkit-details-marker { display:none; }
.case-disclosure > summary:focus { outline:none; }
.case-disclosure > summary:focus-visible { box-shadow:0 14px 36px rgba(0,0,0,.18),0 0 0 2px rgba(169,154,255,.72); }
.case-disclosure > summary:hover { background:#f6f5f8;transform:translateY(-2px);box-shadow:0 18px 42px rgba(0,0,0,.24); }
.case-disclosure > summary i { display:none; }
.case-disclosure__content { padding-top: 64px; }
.case-disclosure__intro { display:grid;grid-template-columns:42% 58%;gap:56px;margin-bottom:var(--case-block-gap); }
.case-disclosure__intro p { grid-column:2;margin:0;color:#969696;font-size:18px;font-weight:300;line-height:1.6; }
.case-disclosure__content > :last-child { margin-bottom:0; }
@media (min-width:1024px) {
  .case-disclosure__content > .case-data-table,
  .case-disclosure__content > .case-journey-map,
  .case-disclosure__content .competitor-funnel,
  .case-disclosure__content .competitor-maps {
    box-sizing: border-box;
    width: calc(100% - 131px);
    margin-right: 79px;
    margin-left: 52px;
  }

  .case-disclosure__content > .case-journey-map .case-journey-map__viewport {
    width: 100%;
  }
}
.case-data-table-disclosure .case-disclosure__content{padding-top:clamp(54px,6vw,82px)}
.case-data-table-disclosure .case-data-table{margin-bottom:clamp(72px,8vw,112px)}
.case-data-table-disclosure .case-data-table:last-child{margin-bottom:0}
.case-naming-summary .content strong{color:#fff;font-weight:400}
.case-naming-disclosure{margin-top:64px}
.case-naming-details{box-sizing:border-box;border-top:1px solid rgba(255,255,255,.12)}
@media(min-width:1024px){.case-naming-details{width:calc(100% - 131px);margin-right:79px;margin-left:52px}}
@media(min-width:768px) and (max-width:1023px){.case-naming-details{width:calc(100% - 88px);margin-right:44px;margin-left:44px}}
.case-naming-details article{display:grid;grid-template-columns:72px minmax(0,1fr);gap:34px;padding:32px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.case-naming-details article>span{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;color:#fff;background:rgba(20,20,26,.78);box-shadow:0 8px 24px rgba(77,47,157,.2);font-size:12px;font-weight:300;letter-spacing:.04em}
.case-naming-details article>div{display:grid;grid-template-columns:minmax(220px,32%) minmax(0,1fr);gap:48px}
.case-naming-details h3{margin:0;color:#fff;font-size:19px;font-weight:400;line-height:1.4}
.case-naming-details p{max-width:650px;margin:0;color:#969696;font-size:15px;font-weight:300;line-height:1.65}
.case-naming-shortlist{padding:48px 0 52px;border-bottom:1px solid rgba(255,255,255,.12)}
.case-naming-shortlist>p{margin:0 0 30px;color:#969696;font-size:14px;font-weight:300;letter-spacing:.02em}
.case-naming-shortlist__names{display:flex;flex-wrap:wrap;align-items:baseline;gap:18px 34px}
.case-naming-shortlist__names span{color:rgba(255,255,255,.62);font-size:clamp(21px,2.2vw,34px);font-weight:300;line-height:1.2;letter-spacing:-.025em}
.case-naming-shortlist__names .is-selected{color:#b09ee4;font-size:clamp(30px,3.4vw,50px)}
@media(max-width:767px){.case-naming-details article{grid-template-columns:46px minmax(0,1fr);gap:16px;padding:26px 0}.case-naming-details article>span{width:38px;height:38px}.case-naming-details article>div{display:block}.case-naming-details h3{margin-bottom:12px;font-size:18px}}
@media(max-width:767px){.case-naming-shortlist{padding:36px 0 40px}.case-naming-shortlist__names{gap:15px 24px}.case-naming-shortlist__names span{font-size:20px}.case-naming-shortlist__names .is-selected{font-size:30px}}
body:has(.case-constructor-page) .case-disclosure[open]>summary{display:none}
@media(max-width:767px){body:has(.case-constructor-page) .case-disclosure{display:none!important}}

/* --- journey_map: полноширинная горизонтальная карта пути клиента --- */
.case-journey-map { margin-bottom:var(--case-block-gap); }
.case-data-table + .case-journey-map { margin-top: 110px; }

.case-journey-map__viewport { box-sizing:border-box;width:calc(50vw + 50%);margin-left:0;padding:0 0 26px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent; }
.case-journey-map__track { position:relative;display:flex;align-items:flex-start;gap:0;width:max-content;padding-top:0; }
.case-journey-map__road { position:absolute;top:31px;left:0;right:0;height:1px;background:rgba(255,255,255,.32); }
.case-journey-map__step { position:relative;z-index:1;width:320px;padding-right:50px;scroll-snap-align:start; }
.case-journey-map__marker { position:relative;width:100%;height:54px;margin:0 0 30px;color:#aaa3b6;background:transparent; }
.case-journey-map__marker::after { content:"";position:absolute;left:0;top:28px;width:7px;height:7px;border-radius:50%;background:#b9a9ff;box-shadow:0 0 0 6px rgba(185,169,255,.09); }
.case-journey-map__marker span { display:block;padding:0;background:transparent;font-size:12px;font-weight:400;line-height:1;letter-spacing:.12em; }
.case-journey-map__card { min-height:0;padding:0;background:transparent; }
.case-journey-map__card h4 { min-height:70px;margin:0 0 34px;color:#fff;font-size:27px;font-weight:300;line-height:1.16;letter-spacing:-.035em; }
.case-journey-map__item { margin:0 0 25px;padding:0; }
.case-journey-map__item span { display:block;margin-bottom:7px;color:#77727f;font-size:10px;font-weight:500;line-height:1.2;letter-spacing:.11em;text-transform:uppercase; }
.case-journey-map__item p { margin:0;color:#aaa9af;font-size:14px;font-weight:300;line-height:1.5; }
.case-journey-map__item--accent { margin-top:32px;padding-left:17px;border-left:1px solid rgba(185,169,255,.72); }
.case-journey-map__item--accent + .case-journey-map__item--accent { margin-top:0; }
.case-journey-map__item--accent span { color:#9b8fd0; }
.case-journey-map__item--accent p { color:#e5e4e8; }
@media(max-width:1023px){.case-disclosure__content{padding-top:48px}.case-disclosure__intro{display:block}.case-disclosure__intro p{font-size:17px}.case-data-table + .case-journey-map{margin-top:72px}.case-journey-map__viewport{width:calc(100vw - var(--case-content-gutter-x));padding:0 0 22px}.case-journey-map__step{width:min(80vw,300px);padding-right:38px}.case-journey-map__card h4{min-height:auto;margin-bottom:30px}.case-journey-map__track{gap:0}}

/* --- конкурентный анализ: воронка и карты без растровых подложек --- */
.competitor-story{margin:72px 0 var(--case-block-gap)}
.competitor-story__text{display:grid;grid-template-columns:52px minmax(0,calc(50% - 52px)) 40px minmax(0,1fr);margin:0 0 72px;padding-top:44px;border-top:1px solid rgba(255,255,255,.12)}
.competitor-story__text--bridge{margin-top:96px}
.competitor-story__text h3{grid-column:2;margin:0;color:#fff;font-size:28px;font-weight:300;line-height:1.3}
.competitor-story__text>div{grid-column:4;max-width:none;padding-right:79px;box-sizing:border-box}
.competitor-story__text p{margin:0;color:#969696;font-size:17px;font-weight:300;line-height:1.65}
.competitor-story__text p+p{margin-top:22px}
.competitor-funnel,.competitor-maps{margin-bottom:var(--case-block-gap)}
.competitor-visual-caption{margin:18px auto 0;color:#777;font-size:14px;font-weight:300;line-height:1.4;text-align:center}
.competitor-funnel__stages{display:flex;flex-direction:column;align-items:center;gap:12px}
.competitor-funnel__stages article{box-sizing:border-box;display:grid;grid-template-columns:120px 1fr;align-items:center;width:calc(100% - var(--funnel-level)*18%);min-height:118px;padding:24px 32px;background:rgba(255,255,255,.055);clip-path:polygon(4% 0,96% 0,100% 100%,0 100%)}
.competitor-funnel__count{color:#fff;font-size:44px;font-weight:300}
.competitor-funnel__stages span{color:#fff;font-size:18px;font-weight:400}.competitor-funnel__stages p{margin:8px 0 0;color:#969696;font-size:15px;line-height:1.45}
.competitor-maps__grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.competitor-map h4{margin:0 0 18px;color:#fff;font-size:18px;font-weight:400}
.competitor-map__plot{position:relative;aspect-ratio:1.35;border:1px solid rgba(255,255,255,.14);background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:10% 10%}
.competitor-map .axis{position:absolute;background:rgba(255,255,255,.55)}.competitor-map .axis--x{left:5%;right:5%;top:50%;height:1px}.competitor-map .axis--y{top:5%;bottom:5%;left:50%;width:1px}
.competitor-map .axis-label{position:absolute;color:#777;font-size:11px}.axis-label--left{left:8px;top:52%}.axis-label--right{right:8px;top:52%}.axis-label--top{left:52%;top:8px}.axis-label--bottom{left:52%;bottom:8px}
.competitor-map__niche{position:absolute;right:5%;bottom:6%;display:flex;align-items:center;justify-content:center;width:34%;height:32%;border:1px solid rgba(196,220,111,.55);color:#d9e99c;background:rgba(196,220,111,.1);font-size:14px}
.competitor-map__brand{position:absolute;left:calc(var(--x)*1%);top:calc((100 - var(--y))*1%);width:112px;transform:translate(-50%,-50%);color:#fff}.competitor-map__brand svg{display:block;width:100%;height:auto;overflow:visible}.competitor-map__brand text{fill:currentColor;font-family:MuseoSansCyrl,Arial,sans-serif;font-size:20px;font-weight:500;letter-spacing:1px}
@media(max-width:1023px){.competitor-story__text{grid-template-columns:32px minmax(0,1fr);column-gap:12px;margin-bottom:48px;padding-top:34px}.competitor-story__text h3,.competitor-story__text>div{grid-column:2}.competitor-story__text>div{padding-right:0}.competitor-story__text--bridge{margin-top:72px}.competitor-funnel__stages article{width:100%;grid-template-columns:76px 1fr;padding:20px}.competitor-funnel__count{font-size:34px}.competitor-maps__grid{grid-template-columns:1fr}.competitor-map__plot{min-width:700px}.competitor-map{overflow-x:auto}}

/* --- insight: полноширинный итог смыслового блока --- */
.case-insight{box-sizing:border-box;width:100vw;margin:24px 0 var(--case-block-gap) calc(50% - 50vw);padding:38px max(var(--case-content-gutter-x),calc((100vw - 1125px)/2));background:transparent}
.case-insight__inner{position:relative;padding:42px 56px}
.case-insight__inner::before,.case-insight__inner::after{content:"";position:absolute;width:42px;height:42px;pointer-events:none}
.case-insight__inner::before{top:0;left:0;border-top:1px solid rgba(255,255,255,.52);border-left:1px solid rgba(255,255,255,.52)}
.case-insight__inner::after{right:0;bottom:0;border-right:1px solid rgba(255,255,255,.52);border-bottom:1px solid rgba(255,255,255,.52)}
.case-insight__inner>span{display:none}
.case-insight__inner p{max-width:980px;margin:0 auto;color:rgba(255,255,255,.9);font-size:clamp(19px,1.55vw,24px);font-weight:300;line-height:1.55;letter-spacing:-.012em}
.case-insight__inner p+p{margin-top:18px}
@media(max-width:767px){.case-insight{padding:22px var(--case-content-gutter-x)}.case-insight__inner{padding:30px 24px}.case-insight__inner::before,.case-insight__inner::after{width:28px;height:28px}.case-insight__inner p{font-size:18px;line-height:1.5}}

/* --- conclusion_cards: три самостоятельных принципа без повторения итога --- */
.case-audience-profiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:64px 0 var(--case-block-gap)}
.case-audience-profiles article{display:grid;grid-template-columns:42% minmax(0,1fr);min-height:220px;overflow:hidden;border-radius:28px;background:rgba(31,31,36,.9);box-shadow:0 18px 50px rgba(0,0,0,.12)}
.case-audience-profiles article:last-child{grid-column:1/-1;width:calc(50% - 12px);margin:0 auto}
.case-audience-profiles__visual{min-width:0;overflow:hidden;background:#292931}
.case-audience-profiles__visual img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(.92)}
.case-audience-profiles__image--flipped{transform:scaleX(-1)}
.case-audience-profiles__copy{display:flex;flex-direction:column;justify-content:center;padding:30px 28px}
.case-audience-profiles__copy h3{margin:0 0 16px;color:#fff;font-size:19px;font-weight:400;line-height:1.35}
.case-audience-profiles__copy p{margin:0;color:#888;font-size:14px;font-weight:300;line-height:1.55}
@media(max-width:767px){.case-audience-profiles{grid-template-columns:1fr;gap:16px;margin-top:48px}.case-audience-profiles article,.case-audience-profiles article:last-child{grid-column:auto;grid-template-columns:38% minmax(0,1fr);width:100%;min-height:190px}.case-audience-profiles__copy{padding:24px 20px}.case-audience-profiles__copy h3{font-size:18px}}

.case-conclusion-cards{margin:72px 0 var(--case-block-gap)}
.case-conclusion-cards__caption{max-width:760px;margin:24px auto 0;color:#777;font-size:15px;font-weight:300;line-height:1.6;text-align:center}
.case-conclusion-cards__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.case-conclusion-cards article{position:relative;min-height:210px;overflow:hidden;padding:34px 30px;border-radius:28px;background:#24252a;box-shadow:0 18px 54px rgba(0,0,0,.14);display:flex;flex-direction:column;justify-content:center;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease;outline:0}
.case-conclusion-cards article::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,37,42,0) 35%,rgba(119,48,75,.82) 115%);opacity:0;transition:opacity .25s ease}
.case-conclusion-cards article:nth-child(2)::before{background:linear-gradient(180deg,rgba(36,37,42,0) 35%,rgba(111,52,81,.78) 115%)}.case-conclusion-cards article:nth-child(3)::before{background:linear-gradient(180deg,rgba(36,37,42,0) 35%,rgba(126,48,79,.8) 115%)}
.case-conclusion-cards h4{position:relative;z-index:1;margin:0;color:#fff;font-size:19px;font-weight:400;line-height:1.3;text-align:center;transition:transform .25s ease}
.case-conclusion-cards p{position:relative;z-index:1;max-height:0;margin:0 auto;color:rgba(255,255,255,.58);font-size:14px;font-weight:300;line-height:1.55;text-align:center;opacity:0;transform:translateY(18px);transition:max-height .25s ease,margin .25s ease,opacity .2s ease,transform .25s ease}
@media(max-width:767px){.case-conclusion-cards__grid{grid-template-columns:1fr;gap:16px}.case-conclusion-cards article{min-height:170px;padding:30px 26px}.case-conclusion-cards article>span{top:24px;left:26px}}

/* --- brand platform: от фактов к ценностям и позиционированию --- */
.case-brand-platform,.case-concept-flow,.case-tag-cloud,.case-tone-profile{margin:20px 0 var(--case-block-gap)}
.case-brand-platform{box-sizing:border-box;width:100%;margin:32px 0 140px;padding:0;background:transparent}
.case-brand-platform + .case-concept-flow{margin-top:0}
.case-brand-platform__head,.case-concept-flow__head,.case-tag-cloud__head,.case-tone-profile__head{display:grid;grid-template-columns:42% 58%;gap:56px;margin-bottom:58px}
.case-brand-platform__head h3,.case-concept-flow__head h3,.case-tag-cloud__head h3,.case-tone-profile__head h3{margin:0;color:#fff;font-size:28px;font-weight:300;line-height:1.25}
.case-brand-platform__head p,.case-concept-flow__head p,.case-tag-cloud__head p,.case-tone-profile__head p{margin:0;color:#969696;font-size:17px;font-weight:300;line-height:1.6}

/* Новые смысловые блоки внутри главы используют ту же внутреннюю сетку,
   типографику и ритм, что штатный вложенный text («Брифинг»). */
.case-constructor-page .content-bottom > .case-brand-platform,
.case-constructor-page .content-bottom > .case-concept-flow,
.case-constructor-page .content-bottom > .case-strategy-timeline,
.case-constructor-page .content-bottom > .case-tag-cloud,
.case-constructor-page .content-bottom > .case-tone-profile {
  padding-top: 64px;
}
.case-constructor-page .content-bottom > .case-brand-platform > .case-brand-platform__head,
.case-constructor-page .content-bottom > .case-concept-flow > .case-concept-flow__head,
.case-constructor-page .content-bottom > .case-strategy-timeline > .case-strategy-timeline__head,
.case-constructor-page .content-bottom > .case-tag-cloud > .case-tag-cloud__head,
.case-constructor-page .content-bottom > .case-tone-profile > .case-tone-profile__head {
  grid-template-columns: 52px minmax(0, calc(50% - 52px)) 40px minmax(0, 1fr);
  gap: 0;
  margin-bottom: 58px;
}
.case-constructor-page .content-bottom > .case-brand-platform > .case-brand-platform__head h3,
.case-constructor-page .content-bottom > .case-concept-flow > .case-concept-flow__head h3,
.case-constructor-page .content-bottom > .case-strategy-timeline > .case-strategy-timeline__head h3,
.case-constructor-page .content-bottom > .case-tag-cloud > .case-tag-cloud__head h3,
.case-constructor-page .content-bottom > .case-tone-profile > .case-tone-profile__head h3 {
  grid-column: 2;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.5;
}
.case-constructor-page .content-bottom > .case-brand-platform > .case-brand-platform__head p,
.case-constructor-page .content-bottom > .case-concept-flow > .case-concept-flow__head p,
.case-constructor-page .content-bottom > .case-strategy-timeline > .case-strategy-timeline__head p,
.case-constructor-page .content-bottom > .case-tag-cloud > .case-tag-cloud__head p,
.case-constructor-page .content-bottom > .case-tone-profile > .case-tone-profile__head p {
  grid-column: 4;
  max-width: none;
  padding-right: 79px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 1.6;
}
.case-brand-platform__diagram{display:grid;grid-template-columns:180px minmax(0,1fr);grid-template-rows:auto 44px auto 44px auto;column-gap:30px;align-items:center;padding:54px 48px 46px;border-radius:32px;background:rgba(27,28,33,.84);box-shadow:0 28px 72px rgba(0,0,0,.16)}
.case-brand-platform__diagram>h4{margin:0;color:rgba(255,255,255,.92);font-size:17px;font-weight:400;line-height:1.25}
.case-brand-platform__diagram>h4 span{display:block;color:rgba(255,255,255,.58);font-size:13px;font-weight:300}
.case-brand-platform__facts,.case-brand-platform__values,.case-brand-platform__arrows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;min-width:0}
.case-brand-platform__facts article{padding:0 20px;text-align:center}
.case-brand-platform__facts article>p{margin:0;color:#aaa9af;font-size:14px;font-weight:300;line-height:1.45}
.case-brand-platform__arrows i{position:relative;display:block;width:1px;height:34px;margin:auto;background:rgba(169,154,255,.52)}
.case-brand-platform__arrows i::after{content:"";position:absolute;left:-3px;bottom:1px;width:6px;height:6px;border-right:1px solid rgba(169,154,255,.78);border-bottom:1px solid rgba(169,154,255,.78);transform:rotate(45deg)}
.case-brand-platform__values strong{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 12px;border-radius:12px;color:#fff;background:rgba(48,43,61,.72);font-size:17px;font-weight:400;text-align:center}
.case-brand-platform__result{margin-top:0;padding:25px 30px;border-radius:16px;background:rgba(38,35,48,.72);text-align:center}
.case-brand-platform__result p{margin:0;color:#fff;font-size:19px;font-weight:300;line-height:1.45}
.case-brand-platform__caption{margin:35px 0 0;text-align:center}
.case-brand-platform__caption h3{margin:0 0 10px;color:#fff;font-size:18px;font-weight:300;line-height:1.2}
.case-brand-platform__caption p{max-width:720px;margin:0 auto;color:#777;font-size:15px;font-weight:300;line-height:1.6}

/* --- concept flow: сложная вложенность как редакционная последовательность --- */
.case-concept-flow__list{width:100%;margin:72px 0 0}
.case-concept-flow__list article{display:grid;grid-template-columns:52px minmax(0,calc(50% - 52px)) 40px minmax(0,1fr);gap:0;padding:34px 0;border-top:1px solid rgba(255,255,255,.12)}
.case-concept-flow__list h4{grid-column:2 / 3;display:flex;align-items:center;gap:10px;margin:0;color:#fff;font-size:22px;font-weight:400;line-height:1.45}
.case-concept-flow__list h4 span{display:flex;flex:0 0 42px;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;color:#fff;background:rgba(20,20,26,.78);box-shadow:0 8px 24px rgba(77,47,157,.2);font-size:12px;font-weight:300;letter-spacing:.04em}
.case-concept-flow__list p{grid-column:4;max-width:none;margin:0;padding-right:79px;box-sizing:border-box;color:#969696;font-size:16px;font-weight:300;line-height:1.65}

/* --- strategy timeline: PR / этапы по периодам --- */
.case-strategy-timeline{margin:32px 0 var(--case-block-gap)}
.case-strategy-timeline__head{display:grid;grid-template-columns:42% 58%;gap:56px;margin-bottom:46px}
.case-strategy-timeline__head--caption{display:block;width:58%;max-width:720px;margin:0 0 46px auto;text-align:left}
.case-strategy-timeline__head h3{margin:0;color:#fff;font-size:28px;font-weight:300;line-height:1.25}
.case-strategy-timeline__head p{margin:0;color:#969696;font-size:17px;font-weight:300;line-height:1.6}
.case-strategy-timeline__grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:0;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.case-strategy-timeline__grid::before{content:"";position:absolute;left:0;right:0;top:78px;height:1px;background:rgba(177,160,255,.45)}
.case-strategy-timeline__phase{min-width:0;display:flex;flex-direction:column;padding:0 28px 30px;border-left:1px solid rgba(255,255,255,.11)}
.case-strategy-timeline__phase:first-child{border-left:0}
.case-strategy-timeline__period{position:relative;display:flex;align-items:flex-start;min-height:102px;padding:28px 0 26px;color:#fff;background:transparent}
.case-strategy-timeline__period strong{color:#fff;font-size:20px;font-weight:400;line-height:1.25}
.case-strategy-timeline__body{display:grid;grid-template-rows:112px 112px auto;gap:20px;padding:24px 0 0}
.case-strategy-timeline__section{min-height:0}
.case-strategy-timeline__section h5{margin:0 0 9px;color:rgba(255,255,255,.9);font-size:13px;font-weight:400;line-height:1.35;letter-spacing:.02em}
.case-strategy-timeline__section ul{margin:0;padding:0;list-style:none}
.case-strategy-timeline__section li{position:relative;margin:0;padding:0 0 6px 14px;color:#aaa9af;font-size:14px;font-weight:300;line-height:1.5}
.case-strategy-timeline__section li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:rgba(169,154,255,.78)}
.case-strategy-timeline__section li:last-child{padding-bottom:0}
.case-strategy-timeline__caption{width:100%;margin:18px 0 0;color:#969696;font-size:15px;font-weight:300;line-height:1.55;text-align:center}
@media(max-width:1023px){
  .case-strategy-timeline__grid{grid-template-columns:1fr;gap:0}
  .case-strategy-timeline__grid::before{display:none}
  .case-strategy-timeline__phase,.case-strategy-timeline__phase:first-child{border-left:0;border-top:1px solid rgba(255,255,255,.11);padding:22px 20px 28px}
  .case-strategy-timeline__phase:first-child{border-top:0}
  .case-strategy-timeline__period{min-height:0;padding:0 0 18px}
  .case-strategy-timeline__body{display:flex;flex-direction:column;padding-top:0}
  .case-strategy-timeline__caption{width:100%;margin-top:18px;padding:0 20px;box-sizing:border-box}
}
@media(max-width:767px){
  .case-strategy-timeline__head{display:block;margin-bottom:28px}
  .case-strategy-timeline__head--caption{width:100%;max-width:none;text-align:left}
  .case-strategy-timeline__head h3{margin-bottom:14px}
  .case-strategy-timeline__section h5{font-size:15px}
  .case-strategy-timeline__section li{font-size:14px}
}

/* --- slogans: три варианта для выбора --- */
.case-slogan-variant{margin-top:72px}.case-slogan-variant:first-of-type{margin-top:0}
.case-slogan-variant__label{margin:0 0 24px;color:#777;font-size:14px;font-weight:300;letter-spacing:.03em;text-align:center}
.case-tag-cloud__field{position:relative;min-height:460px;overflow:hidden;background:transparent}
.case-tag-cloud__glow{position:absolute;inset:10% 13%;filter:blur(54px);background:radial-gradient(ellipse at 28% 40%,rgba(112,45,168,.82),transparent 42%),radial-gradient(ellipse at 72% 35%,rgba(198,61,113,.65),transparent 40%),radial-gradient(ellipse at 55% 75%,rgba(202,113,55,.42),transparent 42%);opacity:.82}
.case-tag-cloud__orbit{position:absolute;inset:0}
.case-tag-cloud__tag{position:absolute;z-index:2;color:rgba(255,255,255,.9);font-size:17px;font-weight:300;line-height:1.35;text-align:center;white-space:nowrap;animation:case-tag-float 7s ease-in-out var(--tag-delay) infinite alternate}
.case-tag-cloud__tag--1{left:9%;top:22%;font-size:24px}.case-tag-cloud__tag--2{left:45%;top:16%;font-size:20px}.case-tag-cloud__tag--3{right:10%;top:40%;font-size:21px}.case-tag-cloud__tag--4{left:25%;bottom:20%;font-size:22px}.case-tag-cloud__tag--5{right:25%;bottom:14%;font-size:18px}
@keyframes case-tag-float{to{transform:translateY(-7px)}}
.case-slogan-option{margin-top:88px}.case-slogan-option:first-of-type{margin-top:0}.case-slogan-option>p{margin:0 0 22px;color:#777;font-size:14px;font-weight:300;text-align:center}
.case-slogan-lines{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));row-gap:24px;padding:54px 4%;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.case-slogan-lines__item{display:block;color:rgba(255,255,255,.9);font-size:clamp(30px,4.1vw,60px);font-weight:300;line-height:1.25;letter-spacing:-.025em;white-space:nowrap}
.case-slogan-lines__item--2,.case-slogan-lines__item--5{color:#b09ee4}
.case-slogan-lines--1 .case-slogan-lines__item--1{grid-column:1/11}.case-slogan-lines--1 .case-slogan-lines__item--2{grid-column:6/13}.case-slogan-lines--1 .case-slogan-lines__item--3{grid-column:3/9}.case-slogan-lines--1 .case-slogan-lines__item--4{grid-column:4/13}.case-slogan-lines--1 .case-slogan-lines__item--5{grid-column:2/11}
.case-slogan-lines--2{row-gap:14px}.case-slogan-lines--2 .case-slogan-lines__item--1{grid-column:3/11;text-align:center}.case-slogan-lines--2 .case-slogan-lines__item--2{grid-column:6/12;text-align:center}.case-slogan-lines--2 .case-slogan-lines__item--3{grid-column:4/10;text-align:center}.case-slogan-lines--2 .case-slogan-lines__item--4{grid-column:2/12;text-align:center}.case-slogan-lines--2 .case-slogan-lines__item--5{grid-column:3/11;text-align:center}
.case-slogan-lines--3{grid-template-rows:repeat(3,auto);column-gap:44px}.case-slogan-lines--3 .case-slogan-lines__item{font-size:clamp(27px,3.5vw,52px)}.case-slogan-lines--3 .case-slogan-lines__item--1{grid-column:1/7;grid-row:1}.case-slogan-lines--3 .case-slogan-lines__item--2{grid-column:7/13;grid-row:1;text-align:right}.case-slogan-lines--3 .case-slogan-lines__item--3{grid-column:1/6;grid-row:2}.case-slogan-lines--3 .case-slogan-lines__item--4{grid-column:6/13;grid-row:2;text-align:right}.case-slogan-lines--3 .case-slogan-lines__item--5{grid-column:3/11;grid-row:3;text-align:center}
.case-slogan-lines--4{row-gap:8px}.case-slogan-lines--4 .case-slogan-lines__item--1{grid-column:2/9}.case-slogan-lines--4 .case-slogan-lines__item--2{grid-column:6/12}.case-slogan-lines--4 .case-slogan-lines__item--3{grid-column:8/13}.case-slogan-lines--4 .case-slogan-lines__item--4{grid-column:5/13}.case-slogan-lines--4 .case-slogan-lines__item--5{grid-column:2/10}
.case-slogan-lines--5{position:relative;min-height:430px;margin:36px 0;border-top:0;border-bottom:0}.case-slogan-lines--5 .case-slogan-lines__item{position:absolute;font-size:clamp(24px,3.1vw,44px)}.case-slogan-lines--5 .case-slogan-lines__item--1{left:50%;top:46%;font-size:clamp(48px,7vw,90px);transform:translate(-50%,-50%)}.case-slogan-lines--5 .case-slogan-lines__item--2{right:3%;top:12%}.case-slogan-lines--5 .case-slogan-lines__item--3{left:4%;top:8%}.case-slogan-lines--5 .case-slogan-lines__item--4{right:2%;bottom:16%}.case-slogan-lines--5 .case-slogan-lines__item--5{left:5%;bottom:2%}
@media(max-width:767px){.case-slogan-lines{display:flex;gap:14px;padding:32px 0}.case-slogan-lines__item{align-self:flex-start!important;font-size:clamp(24px,8vw,38px);white-space:normal;text-align:left!important}.case-slogan-lines__item:nth-child(even){align-self:flex-end!important;text-align:right!important}}
.case-slogan-marquee{overflow:hidden;padding:44px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.case-slogan-marquee__row{display:flex;width:max-content;gap:70px;padding:10px 0;animation:case-slogan-scroll 28s linear infinite}.case-slogan-marquee__row--reverse{animation-direction:reverse;animation-duration:34s}
.case-slogan-marquee__row span{color:rgba(255,255,255,.88);font-size:clamp(26px,3.2vw,48px);font-weight:300;white-space:nowrap}.case-slogan-marquee__row:nth-child(2) span{color:rgba(176,158,228,.7)}
@keyframes case-slogan-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.case-slogan-marquee__row,.case-tag-cloud__tag{animation:none}}
.case-tag-cloud__note{margin:22px 0 0;color:#777;font-size:15px;font-weight:300;text-align:center}

/* --- tone profile --- */
.case-tone-profile__traits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.case-tone-profile__traits article{position:relative;min-height:150px;overflow:hidden;padding:28px;border-radius:24px;background:#24252a;display:flex;flex-direction:column;justify-content:center;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease;outline:0}
.case-tone-profile__traits article::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,37,42,0) 35%,rgba(119,48,75,.82) 115%);opacity:0;transition:opacity .25s ease}
.case-tone-profile__traits article:nth-child(2)::before{background:linear-gradient(180deg,rgba(36,37,42,0) 35%,rgba(111,52,81,.78) 115%)}.case-tone-profile__traits article:nth-child(3)::before{background:linear-gradient(180deg,rgba(36,37,42,0) 35%,rgba(126,48,79,.8) 115%)}
.case-tone-profile__traits h4{position:relative;z-index:1;margin:0;color:#fff;font-size:20px;font-weight:400;text-align:center;transition:transform .25s ease}.case-tone-profile__traits p{position:relative;z-index:1;max-height:0;margin:0 auto;color:rgba(255,255,255,.58);font-size:14px;font-weight:300;line-height:1.5;text-align:center;opacity:0;transform:translateY(18px);transition:max-height .25s ease,margin .25s ease,opacity .2s ease,transform .25s ease}
.case-conclusion-cards article:is(:hover,:focus-visible),.case-tone-profile__traits article:is(:hover,:focus-visible){transform:translateY(-4px);box-shadow:0 24px 62px rgba(0,0,0,.22)}
.case-conclusion-cards article:is(:hover,:focus-visible)::before,.case-tone-profile__traits article:is(:hover,:focus-visible)::before{opacity:1}
.case-conclusion-cards article:is(:hover,:focus-visible) h4,.case-tone-profile__traits article:is(:hover,:focus-visible) h4{transform:translateY(-8px)}
.case-conclusion-cards article:is(:hover,:focus-visible) p,.case-tone-profile__traits article:is(:hover,:focus-visible) p{max-height:100px;margin-top:8px;opacity:1;transform:translateY(0)}
.case-tone-profile__avoid{margin:28px 0 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);color:#969696;font-size:16px;font-weight:300}.case-tone-profile__avoid span{margin-right:24px;color:#fff}
.case-editorial-collage-section{margin:120px 0 var(--case-block-gap)}
.case-editorial-collage__head{display:grid;grid-template-columns:minmax(0,50%) minmax(0,1fr);gap:40px;margin-bottom:58px}
.case-editorial-collage__head h3{margin:0;color:#fff;font-size:32px;font-weight:400;line-height:1.5}
.case-editorial-collage__head p{max-width:487px;margin:0;color:#969696;font-size:18px;font-weight:300;line-height:1.6}
.case-editorial-collage{margin:0}
.case-editorial-collage__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;align-items:start}
.case-editorial-collage__item{min-width:0;overflow:hidden;background:#1a1b20}
.case-editorial-collage__item img{display:block;width:100%;height:auto}
.case-editorial-collage figcaption{max-width:760px;margin:24px auto 0;color:#777;font-size:15px;font-weight:300;line-height:1.6;text-align:center}
.case-editorial-collage-section--full-bleed .case-editorial-collage{width:100vw;margin-left:calc(50% - 50vw)}
.case-editorial-collage-section--full-bleed .case-editorial-collage__grid{display:block}
.case-editorial-collage-section--full-bleed .case-editorial-collage__item{background:transparent}
.case-editorial-collage-section--full-bleed .case-editorial-collage__item img{width:100%;height:auto;object-fit:contain}
.case-editorial-collage-section--full-bleed .case-editorial-collage figcaption{padding:0 var(--case-content-gutter-x)}
.case-brand-system{margin:120px 0 var(--case-block-gap)}
.case-brand-system__head{display:grid;grid-template-columns:minmax(0,50%) minmax(0,1fr);gap:40px;margin-bottom:90px}.case-brand-system__head h3{margin:0;color:#fff;font-size:32px;font-weight:400;line-height:1.3}.case-brand-system__head p{max-width:520px;margin:0;color:#969696;font-size:18px;font-weight:300;line-height:1.6}
.case-brand-system__row{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.72fr);align-items:center;gap:9%;min-height:480px;padding:54px 0;border-top:1px solid rgba(255,255,255,.12)}
.case-brand-system__row:nth-child(odd){grid-template-columns:minmax(340px,.72fr) minmax(0,1.08fr)}.case-brand-system__row:nth-child(odd) .case-brand-system__visual{order:2}.case-brand-system__row:nth-child(odd) .case-brand-system__copy{order:1}
.case-brand-system__visual{min-width:0}.case-brand-system__copy{max-width:430px}.case-brand-system__copy>span{display:block;margin-bottom:28px;color:#a99aff;font-size:12px;letter-spacing:.12em}.case-brand-system__copy h4{margin:0 0 20px;color:#fff;font-size:28px;font-weight:400;line-height:1.25}.case-brand-system__copy p{margin:0 0 16px;color:#969696;font-size:17px;font-weight:300;line-height:1.65}.case-brand-system__copy p:last-child{margin-bottom:0}
.case-brand-system__palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px;padding:46px;border-radius:30px;background:rgba(24,25,30,.72)}.case-brand-system__palette span{display:flex;flex-direction:column;align-items:center;gap:13px}.case-brand-system__palette i{display:block;width:min(118px,9vw);aspect-ratio:1;border-radius:50%;background:var(--swatch);box-shadow:0 18px 40px rgba(0,0,0,.16)}.case-brand-system__palette small{color:#b7b7ba;font-size:13px;font-weight:300}
.case-brand-system__type{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.case-brand-system__type>div{display:flex;min-height:210px;padding:25px;flex-direction:column;justify-content:flex-start;gap:34px;border-radius:28px;background:rgba(24,25,30,.72)}.case-brand-system__type>div:last-child{grid-column:1/-1;min-height:150px;gap:24px}.case-brand-system__type small{color:#969696;font-size:13px}.case-brand-system__type b{color:#f1eff3;font-family:Arial,sans-serif;font-size:104px;font-weight:400;line-height:.9}.case-brand-system__type>div:nth-child(2) b{font-weight:700}.case-brand-system__type>div:last-child b{font-family:Verdana,sans-serif;font-size:78px}
.case-brand-system__row--pattern .case-brand-system__visual{overflow:hidden;border-radius:30px;background:#f7f6f3}.case-brand-system__row--pattern img{display:block;width:100%;height:auto}
@media(max-width:767px){.case-brand-system{margin-top:88px}.case-brand-system__head{display:block;margin-bottom:48px}.case-brand-system__head h3{margin-bottom:18px;font-size:28px}.case-brand-system__head p{font-size:17px}.case-brand-system__row,.case-brand-system__row:nth-child(odd){display:flex;min-height:0;padding:44px 0;flex-direction:column;align-items:stretch;gap:32px}.case-brand-system__row:nth-child(odd) .case-brand-system__visual,.case-brand-system__row:nth-child(odd) .case-brand-system__copy{order:initial}.case-brand-system__copy{max-width:none}.case-brand-system__palette{gap:22px 12px;padding:28px 18px}.case-brand-system__palette i{width:min(86px,23vw)}.case-brand-system__type b{font-size:72px}.case-brand-system__type>div:last-child b{font-size:58px}}
.case-logo-story{margin:120px 0 var(--case-block-gap)}
.case-logo-story__head{display:grid;grid-template-columns:minmax(0,50%) minmax(0,1fr);gap:40px;margin-bottom:56px}.case-logo-story__head h3{margin:0;color:#fff;font-size:32px;font-weight:400}.case-logo-story__head p{max-width:520px;margin:0;color:#969696;font-size:18px;font-weight:300;line-height:1.6}
.case-logo-story__hero{display:flex;align-items:center;justify-content:center;min-height:520px;padding:64px}.case-logo-story__hero img{display:block;width:min(430px,50vw);height:auto}
.case-logo-story__caption{max-width:760px;margin:24px auto 0;color:#777;font-size:15px;font-weight:300;line-height:1.6;text-align:center}
.case-logo-story__process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:76px;border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13)}
.case-logo-story__process + .case-logo-story__hero{margin-top:76px}
.case-logo-story__process article{min-height:330px;padding:30px 30px 38px;border-right:1px solid rgba(255,255,255,.13)}.case-logo-story__process article:last-child{border-right:0}.case-logo-story__process article>span{color:#a99aff;font-size:12px;letter-spacing:.08em}.case-logo-story__process h4{margin:26px 0 10px;color:#fff;font-size:20px;font-weight:400}.case-logo-story__process p{max-width:310px;margin:0;color:#969696;font-size:15px;font-weight:300;line-height:1.55}
.case-logo-story__letters,.case-logo-story__flow,.case-logo-story__mark{display:flex;align-items:center;justify-content:center;height:130px;margin-top:20px}.case-logo-story__letters{gap:18px}.case-logo-story__letters b{color:rgba(255,255,255,.84);font-size:76px;font-weight:300;line-height:1}.case-logo-story__flow{position:relative}.case-logo-story__flow i{position:absolute;width:82px;height:112px;border:2px solid #b09ee4;border-left-color:transparent;border-radius:52% 48% 55% 45%;transform:rotate(42deg)}.case-logo-story__flow i+ i{transform:rotate(-42deg)}.case-logo-story__mark img{display:block;width:112px;height:112px;object-fit:contain;object-position:center}
@media(max-width:767px){.case-logo-story{margin-top:88px}.case-logo-story__head{display:block;margin-bottom:38px}.case-logo-story__head h3{margin-bottom:18px;font-size:28px}.case-logo-story__head p{font-size:17px}.case-logo-story__hero{min-height:0;padding:36px 24px}.case-logo-story__hero img{width:min(360px,86vw)}.case-logo-story__process{grid-template-columns:1fr}.case-logo-story__process article{min-height:0;border-right:0;border-bottom:1px solid rgba(255,255,255,.13)}.case-logo-story__process article:last-child{border-bottom:0}}
@media(max-width:767px){.case-editorial-collage-section{margin-top:88px}.case-editorial-collage__head{display:block;margin-bottom:38px}.case-editorial-collage__head h3{margin-bottom:18px;font-size:28px}.case-editorial-collage__head p{font-size:17px}.case-editorial-collage__grid{grid-template-columns:1fr;gap:8px}.case-editorial-collage figcaption{margin-top:18px;font-size:14px}}
@media(max-width:767px){.case-brand-platform{margin-top:20px;margin-bottom:88px}.case-brand-platform__head,.case-concept-flow__head,.case-tag-cloud__head,.case-tone-profile__head{display:block;margin-bottom:38px}.case-brand-platform__head h3,.case-concept-flow__head h3,.case-tag-cloud__head h3,.case-tone-profile__head h3{margin-bottom:18px}.case-brand-platform__diagram{display:block;padding:38px 24px 28px;border-radius:24px}.case-brand-platform__diagram>h4{margin:28px 0 18px;font-size:18px}.case-brand-platform__diagram>h4:first-child{margin-top:0}.case-brand-platform__diagram>span,.case-brand-platform__arrows{display:none}.case-brand-platform__facts,.case-brand-platform__values,.case-tone-profile__traits{grid-template-columns:1fr}.case-brand-platform__facts article{padding:20px 0;border-top:1px solid rgba(255,255,255,.1)}.case-brand-platform__values{gap:10px}.case-brand-platform__result{margin-top:0;padding:24px}.case-tone-profile__traits{grid-template-columns:1fr}.case-concept-flow__list{width:100%;margin-top:42px}.case-concept-flow__list article{display:block;padding:26px 0}.case-concept-flow__list h4{gap:6px;margin-bottom:18px}.case-concept-flow__list p{width:calc(100% - 44px);margin-left:44px;padding-right:0}.case-concept-flow__list h4 span{flex-basis:38px;width:38px;height:38px}.case-tag-cloud__field{min-height:390px}.case-tag-cloud__glow{inset:12% 0;filter:blur(38px)}.case-tag-cloud__tag{font-size:14px!important;white-space:normal;max-width:42%;animation:none}.case-tag-cloud__tag--1{left:6%;top:18%}.case-tag-cloud__tag--2{left:48%;top:16%}.case-tag-cloud__tag--3{right:8%;top:46%}.case-tag-cloud__tag--4{left:8%;bottom:17%}.case-tag-cloud__tag--5{right:18%;bottom:12%}}

.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;
}

/* Смысловые перечисления в текстовых блоках: маркеры для равноправных пунктов,
   нумерация — только когда порядок задан самим контентом через <ol>. */
.case-constructor-page .content-marketing > .content ul,
.case-constructor-page .content-marketing > .content ol {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.case-constructor-page .content-marketing > .content > ol:first-child {
  margin-top: 0;
}

.case-constructor-page .content-marketing > .content li {
  position: relative;
  margin: 0;
  padding-left: 28px;
}

.case-constructor-page .content-marketing > .content li + li {
  margin-top: 16px;
}

.case-constructor-page .content-marketing > .content li strong {
  color: rgba(255,255,255,.86);
  font-weight: 400;
}

.case-constructor-page .content-marketing > .content p strong,
.case-constructor-page .content-marketing > .content > strong {
  color: rgba(255,255,255,.9) !important;
  font-weight: 400;
}

.case-constructor-page .content-marketing > .content ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 14px;
  height: 1px;
  background: rgba(169, 154, 255, .85);
}

.case-constructor-page .content-marketing > .content ol {
  counter-reset: case-list;
}

.case-constructor-page .content-marketing > .content ol > li {
  counter-increment: case-list;
  padding-left: 42px;
}

.case-constructor-page .content-marketing > .content ol > li::before {
  content: counter(case-list, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .05em;
  color: rgba(169, 154, 255, .9);
  font-size: 12px;
  letter-spacing: .08em;
}

.case-constructor-page .content-marketing > .content ul + p,
.case-constructor-page .content-marketing > .content ol + p {
  margin-top: 24px;
}

@media (min-width: 1024px) {
  /* Как Osnova intro: title 42%, description 58%, gap 56px. */
  .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;
  }

  /* Короткий список без абзацев выше (Grandmed 01–04): прижать к правому краю
     колонки, иначе строки «тонут» у середины и справа пустота. Osnova intro
     начинается с <p> — это правило его не трогает. */
  .case-constructor-page > .container > .content-marketing:not(.numbered) > .content > ol:first-child {
    margin-left: auto;
    width: max-content;
    max-width: 100%;
  }

  /* padding, не margin: соседние mb/mt схлопываются, визуально «нет отступа»
     до карточки результатов. 60pb + 60mb = 120px до .card.glowing. */
  .case-constructor-page > .container > .content-marketing:not(.numbered):has(+ .card.glowing) {
    padding-bottom: 60px;
  }
}

@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);
}

/* Reveal как в legacy Nuxt: JS ставит pending до IntersectionObserver,
   затем карточка всплывает на 20px за 0.5s. Без JS контент остаётся видимым. */
.case-constructor-page :is(.card.glowing, .quote-block).sa-reveal-pending,
.case.nuxt :is(.card.glowing, .quote-block).sa-reveal-pending {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  will-change: opacity, transform;
}

.case-constructor-page :is(.card.glowing, .quote-block).sa-reveal-pending.sa-revealed,
.case.nuxt :is(.card.glowing, .quote-block).sa-reveal-pending.sa-revealed {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .case-constructor-page :is(.card.glowing, .quote-block).sa-reveal-pending,
  .case.nuxt :is(.card.glowing, .quote-block).sa-reveal-pending {
    transform: none;
    transition-duration: 0.01ms;
  }
}

.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: 56px 40px;
  display: flex;
  flex-direction: column;
}

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

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

.case-constructor-page .card.glowing .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;
}

/* Длинные заголовки карточки, как live Nuxt без card-header--large: 32px / 300. */
.case-constructor-page .card.glowing .card-header--compact {
  padding-bottom: 40px;
}

.case-constructor-page .card.glowing .card-header--compact h2 {
  font-size: 32px !important;
  font-weight: 300 !important;
  line-height: 1.26;
}

/* Вложенные в главу плашки — всегда компактный title (live без --large),
   даже у коротких «Результат». Корневой results в начале страницы остаётся 54px. */
.case-constructor-page .content-bottom > .card.glowing .card-header {
  padding-bottom: 40px;
}

.case-constructor-page .content-bottom > .card.glowing .card-header h2 {
  font-size: 32px !important;
  font-weight: 300 !important;
  line-height: 1.26;
}

.case-constructor-page .card.glowing .separator {
  height: 1px;
  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: 40px;
  row-gap: 40px;
  padding: 40px 0 0;
}

/* Ровно 4 метрики — в один ряд (каталог maxColumnsPerRow: 4).
   3 и 6 метрик остаются 3-колоночными, чтобы Miramar не стал 4+2. */
@media (min-width: 1024px) {
  .case-constructor-page .card.glowing .statistics:has(.stat-item:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.case-constructor-page .content-bottom > .card.glowing {
  box-sizing: border-box;
  width: calc(100% - 131px);
  margin-right: 79px;
  margin-left: 52px;
  margin-top: clamp(96px, 10vw, 150px);
}

.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;
}

.case-constructor-page .card.glowing .card-note {
  max-width: 780px;
  margin: 30px 0 0;
  color: #777;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
}

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

  .case-constructor-page .content-bottom > .card.glowing {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .case-constructor-page .content-bottom > .quote-block.card.glowing {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding-left: 0;
  }

  .case-constructor-page .content-bottom > * + .quote-block.card.glowing,
  .case-constructor-page > .container > * + .quote-block.card.glowing {
    margin-top: 80px;
  }

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

  .case-constructor-page .card.glowing .statistics {
    grid-template-columns: 1fr;
    column-gap: 28px;
    row-gap: 28px;
    padding: 28px 0 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));
  }
}

/* --- quote: цитата с автором ------------------------------------------------
   Эталон — общая quote-card Darkrain / live ИРиПА. */
.case-constructor-page .quote-block.card.glowing {
  box-sizing: border-box;
  padding-left: 75px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

/* Корневая цитата (после results, до этапов): серая .inside = ширина карточки результатов.
   padding-left 75px нужен только во вложенной рамке 52/79, иначе карточка уже. */
.case-constructor-page > .container > .quote-block.card.glowing {
  padding-left: 0;
  width: 100%;
}

@media (min-width: 1024px) {
  .case-constructor-page .content-bottom > .quote-block.card.glowing {
    /* .inside = та же рамка 52/79, что у text_columns / results.
       75px hang кавычек уходит влево в gutter, не сужает карточку.
       Только desktop: иначе на 390 карточка ~254px и overflow:hidden режет имя. */
    box-sizing: border-box;
    width: calc(100% - 56px);
    margin-right: 79px;
    margin-left: calc(52px - 75px);
  }
}

/* До цитаты: live article_section.margin-xxl ≈ 120px — после заголовка,
   колонок, scroll_stack / любого соседа. Кавычки висят над карточкой,
   без этого зазора mark прилипает к предыдущему медиа. */
.case-constructor-page .content-bottom > .content-marketing:not(.numbered):has(+ .quote-block),
.case-constructor-page .content-bottom > .case-scroll-stack:has(+ .quote-block) {
  margin-bottom: 0;
}

.case-constructor-page .content-bottom > * + .quote-block.card.glowing,
.case-constructor-page > .container > * + .quote-block.card.glowing {
  margin-top: 120px;
}

.case-constructor-page .quote-block.card.glowing > .inside {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  align-items: start;
  padding: 70px;
  background: #1d1d1f;
  border-radius: 30px;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.case-constructor-page .quote-block .quote-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 30px;
  padding-left: 0;
  margin: 0 0 20px;
}

.case-constructor-page .quote-block .avatar {
  flex: 0 0 102px;
  width: 102px;
  height: 102px;
  border-radius: 13px;
  object-fit: cover;
}

.case-constructor-page .quote-block .info {
  flex: 0 0 130px;
  min-width: 0;
}

.case-constructor-page .quote-block .quote-author {
  margin: 0 0 6px;
  font-family: MuseoSansCyrl, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.5;
  color: #fff !important;
}

.case-constructor-page .quote-block .quote-author-role {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  color: #969696;
}

.case-constructor-page .quote-block .quote-content {
  min-width: 0;
  padding: 0;
}

.case-constructor-page .quote-block .quote-text,
.case-constructor-page .quote-block .quote-text p {
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  color: #969696;
}

.case-constructor-page .quote-block .quote-quote {
  position: absolute;
  z-index: 3;
  width: 27px;
  height: 18px;
  background: center / contain no-repeat
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='19' fill='none'%3E%3Cpath d='M14.296 18.792L20.536.168h6.912L23.32 18.792h-9.024zm-13.536 0L7 .168h6.912L9.784 18.792H.76z' fill='%23fff'/%3E%3C/svg%3E");
}

.case-constructor-page .quote-block .quote-quote-top {
  top: -8px;
  left: calc(75px + (100% - 215px) / 3);
}

.case-constructor-page > .container > .quote-block .quote-quote-top {
  left: calc((100% - 215px) / 3);
}

.case-constructor-page .quote-block .quote-quote-bottom {
  right: 70px;
  bottom: -10px;
}

@media (max-width: 767px) {
  /* Как карточки Osnova на 390: ширина контейнера (gutter 40px), не 100vw
     и не десктопная рамка 52/79. Селекторы с .content-bottom / .container
     иначе проигрывают по специфичности. */
  .case-constructor-page .quote-block.card.glowing,
  .case-constructor-page > .container > .quote-block.card.glowing,
  .case-constructor-page .content-bottom > .quote-block.card.glowing {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 110px;
    margin-left: 0;
    padding-left: 0;
  }

  .case-constructor-page .quote-block.card.glowing > .inside {
    grid-template-columns: 1fr;
    row-gap: 67px;
    width: 100%;
    padding: 100px 40px 110px;
    border-radius: var(--br, 20px);
  }

  .case-constructor-page .quote-block .quote-header {
    margin-bottom: 0;
    gap: 16px;
  }

  .case-constructor-page .quote-block .info {
    flex: 1 1 auto;
    min-width: 0;
  }

  .case-constructor-page .quote-block .quote-quote {
    width: 18px;
    height: 12px;
  }

  .case-constructor-page .quote-block .quote-quote-top {
    left: 40px;
  }

  .case-constructor-page .quote-block .quote-quote-bottom {
    right: 40px;
  }
}

/* --- 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 / Увеличение конверсии…» + текст справа --------------
   Номер стоит в отдельной узкой колонке слева от крупного title.
   Основной и вложенные title/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: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  margin: 0;
}

.case-constructor-page .content-marketing.numbered > header .section-number {
  display: block;
  grid-column: 1;
  padding-top: 3px;
  margin: 0;
  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 {
  grid-column: 2;
  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: grid;
    grid-template-columns: minmax(0, 50%) 40px minmax(0, 1fr);
    align-items: flex-start;
  }

  .case-constructor-page .content-marketing.numbered > header {
    grid-column: 1;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 0;
  }

  .case-constructor-page .content-marketing.numbered > header .section-number {
    padding-top: 13px;
  }

  .case-constructor-page .content-marketing.numbered > .content {
    grid-column: 3;
    min-width: 0;
    max-width: none;
  }
}

@media (max-width: 1023px) {
  .case-constructor-page .content-marketing.numbered > .content {
    width: calc(100% - 44px);
    margin-left: 44px;
  }

  .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) — без цифры -----------------
   Внутренняя вложенность главы, НЕ отдельная секция страницы.
   Пустая первая колонка сохраняет линию title после номера родительской главы.
   Ритм: padding-top 64px / margin-bottom 30px → ~94px между подзаголовками. */
.case-constructor-page .content-bottom {
  margin: 0 0 var(--case-section-gap);
  padding: 0;
}

/* Корневой text с blocks[] (Выводы + цитата): без номера, но сетка как у вложенного блока
   и title как у нумерованной главы (46px / 400 / 1.2), не intro 24px и не «Логотип» 32px. */
.case-constructor-page > .container > .content-bottom--standalone > .content-marketing:not(.numbered) {
  padding-top: 0;
}


.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-bottom--standalone > .content-marketing:not(.numbered) .content-marketing-title {
  font-size: 46px !important;
  line-height: 1.2;
}

.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;
}

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

@media (min-width: 1024px) {
  .case-constructor-page .content-bottom > .content-marketing:not(.numbered) {
    display: grid;
    grid-template-columns: 52px minmax(0, calc(50% - 52px)) 40px minmax(0, 1fr);
    align-items: flex-start;
  }

  .case-constructor-page .content-bottom > .content-marketing:not(.numbered) > header {
    grid-column: 2;
    margin: 0;
  }

  .case-constructor-page .content-bottom > .content-marketing:not(.numbered) > .content {
    grid-column: 4;
    min-width: 0;
    max-width: none;
    padding-right: 79px;
    box-sizing: border-box;
  }

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

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

  .case-constructor-page .content-bottom > .content-marketing:not(.numbered) {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 12px;
    padding-top: 44px;
  }

  .case-constructor-page > .container > .content-bottom--standalone > .content-marketing:not(.numbered) {
    padding-top: 0;
  }

  .case-constructor-page .content-bottom > .content-marketing:not(.numbered) > header,
  .case-constructor-page .content-bottom > .content-marketing:not(.numbered) > .content {
    grid-column: 2;
  }

  .case-constructor-page .content-bottom > .content-marketing:not(.numbered) > .content {
    padding-right: 0;
  }

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

  .case-constructor-page .content-bottom.content-bottom--standalone > .content-marketing:not(.numbered) .content-marketing-title {
    font-weight: 500 !important;
    line-height: 36px;
    margin-bottom: 33px;
  }
}

/* --- 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: общая рамка 52px/79px и padding-top 64px. */
.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 {
  box-sizing: border-box;
  width: calc(100% - 131px);
  padding: 64px 0 90px;
  margin-right: 79px;
  margin-left: 52px;
}

.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 {
    width: 100%;
    padding-top: 44px;
    padding-bottom: 60px;
    margin-right: 0;
    margin-left: 0;
  }

  .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 на desktop сохраняет pt 64 (live Grandmed caption→«Выводы» ≈120px).
   На мобилке pt обнуляем, иначе 40+44 ≈84 вместо ~40 как у Miramar. */
.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;
}

@media (max-width: 1023px) {
  .case-constructor-page .content-bottom > .chart-swiper + .content-marketing:not(.numbered) {
    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;
}

/* В слайдере медиа всех слайдов от одной верхней линии; JS задаёт min-height = max. */
.case-constructor-page .chart-swiper.swiper .chart-swiper__chart {
  align-items: flex-start;
}

.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)));
  }

  /* Raster-графики показываем около нативных 906px: апскейл до 1040px
     размывает тонкие линии, сетку и подписи. */
  .case-constructor-page .chart-swiper[data-sa-chart="1"] .chart-swiper__chart-inner {
    width: min(900px, calc(100% - 2 * var(--case-chart-nav-gutter)));
  }

  .case-constructor-page .chart-swiper[data-sa-chart="1"] .chart-swiper__chart img:not(.chart-swiper__raster-source),
  .case-constructor-page .chart-swiper[data-sa-chart="1"] .chart-swiper__chart video {
    width: min(900px, 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;
  }

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

  /* Мудборд / обычные медиа (без 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.
     И одиночный слайд, и слайдер с стрелками — как live chart-slider--wide. */
  .case-constructor-page .content-bottom > .chart-swiper.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,
.case-constructor-page .chart-swiper[data-sa-chart="1"].sa-chart-drawn .chart-swiper__chart svg :is(.line, .line-2, .line-3, .line-4, .line-5, .line-6) {
  animation: sa-case-chart-dash 1.6s linear 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 подчиняются общей сетке кейса: слева 52px,
   справа 79px. Так колонки совпадают с внешними линиями вложенного text. ------- */
.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;
  width: calc(100% - 131px);
  max-width: none;
  margin-right: 79px;
  margin-left: 52px;
}

.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;
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
  }

  /* Колонки столбиком, все раскрыты. Горизонтальный свайп на 390
     не читается как скролл (полоска/peek). Osnova не затронут:
     аудитория рендерится как .case-audience-profiles, не .subsections. */
  .case-constructor-page .subsections-wrapper {
    overflow: visible;
  }

  .case-constructor-page .subsections {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 40px;
    overflow: visible;
    scroll-snap-type: none;
  }

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

  .case-constructor-page .scroll-indicator-empty,
  .case-constructor-page .scroll-indicator {
    display: 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 var(--case-slider-duration, 30s) linear infinite;
}

.case-constructor-page .slider-container .slider.animate.reverse {
  animation: case-counter-scroll-right var(--case-slider-duration, 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);
}

/* Центрируем не только текст, но и сам ограниченный по ширине lead-блок. */
.page-constructor.case-constructor-page + .sa-service-lead-section
  #sa-inline-lead-root .order-popup__meta .lead {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* На страницах услуг chooser ограничен внутренним мобильным inset 80%.
   У кейса форма находится sibling-ом после .page-constructor, поэтому
   сервисный селектор не срабатывает — повторяем тот же контракт здесь. */
@media (max-width: 768px) {
  .page-constructor.case-constructor-page + .sa-service-lead-section
    #sa-inline-lead-root .sa-lead-chooser.order-popup__inner[data-v-2ee28934] {
    width: 80% !important;
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* Полноэкранная стопка: следующий кадр поднимается снизу, а предыдущий слегка
   уходит вверх. В отличие от слайдера здесь сохраняется естественный скролл страницы. */
/* OSNOVA: продуктовая система — от архитектуры линейки к этикеткам и упаковке. */
.case-product-system { width: 100%; }
.case-product-system__head,
.case-product-system__architecture,
.case-product-system__labels-copy,
.case-product-system__packaging-copy { width: min(1180px, calc(100% - 80px)); margin-left: auto; margin-right: auto; }
.case-product-system__head { margin-bottom: 92px; display: grid; grid-template-columns: minmax(0,50%) minmax(0,1fr); gap: 40px; }
.case-product-system__head h3,.case-product-system__head p,.case-product-system h4,.case-product-system h5,.case-product-system p,.case-product-system figure { margin: 0; }
.case-product-system__head h3 { color: #fff; font-size: 32px; font-weight: 400; line-height: 1.3; }
.case-product-system__head p,.case-product-system__labels-copy p,.case-product-system__packaging-copy p { color: rgba(255,255,255,.56); font-size: 18px; line-height: 1.62; }
.case-product-system__head p { max-width: 520px; }
@media (min-width: 1024px) {
  .case-constructor-page .content-bottom > .case-product-system > .case-product-system__head,
  .case-constructor-page .content-bottom > .case-product-system > .case-product-system__architecture,
  .case-constructor-page .content-bottom > .case-product-system > .case-product-system__labels > .case-product-system__labels-copy,
  .case-constructor-page .content-bottom > .case-product-system > .case-product-system__packaging > .case-product-system__packaging-copy {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
  .case-constructor-page .content-bottom > .case-product-system .case-product-system__head p {
    max-width: none;
  }
}
.case-product-system__head-copy p+p { margin-top: 18px; }
.case-product-system__architecture { margin-bottom: 78px; display: grid; grid-template-columns: minmax(0,50%) minmax(0,1fr); gap: 0 40px; }
.case-product-system__eyebrow { grid-column: 1; grid-row: 1; }
.case-product-system__architecture-note { grid-column: 2; grid-row: 1; max-width: 520px; color: #969696; font-size: 18px; font-weight: 300; line-height: 1.6; }
.case-product-system__eyebrow,.case-product-system__labels-copy,.case-product-system__packaging-copy { color: #fff; }
.case-product-system__eyebrow span,.case-product-system__labels-copy>span,.case-product-system__packaging-copy>span { display: block; margin-bottom: 18px; color: #b49cf0; font-size: 13px; letter-spacing: .08em; }
.case-product-system h4 { font-size: clamp(22px,1.7vw,28px); font-weight: 400; line-height: 1.25; }
.case-product-system__groups { grid-column: 1/-1; margin-top: 54px; border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.case-product-system__group { display: grid; grid-template-columns: minmax(180px,.32fr) minmax(0,1fr); gap: 42px; padding: 42px 0 46px; border-bottom: 1px solid rgba(255,255,255,.13); box-sizing: border-box; }
.case-product-system__group:last-child { border-bottom: 0; }
.case-product-system__group h5 { color: #fff; font-size: 20px; font-weight: 500; }
.case-product-system__products { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 38px 32px; }
.case-product-system__products article { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 18px; align-items: start; }
.case-product-system__swatches { display: flex; padding-top: 5px; }
.case-product-system__swatches i { display: block; width: 25px; height: 25px; margin-left: -9px; border-radius: 50%; background: var(--product-swatch); }
.case-product-system__swatches i:first-child { margin-left: 0; }
.case-product-system__products strong,.case-product-system__products small { display: block; }
.case-product-system__products strong { color: #fff; font-size: 18px; font-weight: 400; letter-spacing: .03em; }
.case-product-system__products small { margin-top: 5px; color: rgba(255,255,255,.52); font-size: 12px; line-height: 1.35; }
.case-product-system__products p { margin-top: 8px; color: rgba(255,255,255,.75); font-size: 13px; font-weight: 500; line-height: 1.35; }
.case-product-system__labels { margin-bottom: 142px; }
.case-product-system__labels-copy,.case-product-system__packaging-copy { margin-bottom: 58px; display: grid; grid-template-columns: minmax(0,50%) minmax(0,1fr); column-gap: 40px; }
.case-product-system__labels-copy>span,.case-product-system__packaging-copy>span,.case-product-system__labels-copy h4,.case-product-system__packaging-copy h4 { grid-column: 1; }
.case-product-system__labels-copy>div,.case-product-system__packaging-copy>div { grid-column: 2; grid-row: 1 / span 3; }
.case-product-system__labels-copy p+p,.case-product-system__packaging-copy p+p { margin-top: 18px; }
.case-product-system__labels-collage { width: min(1280px,calc(100% - 80px)); margin: 0 auto; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 28px 20px; align-items: start; }
.case-product-system__label { overflow: hidden; background: transparent; }
.case-product-system__label--1 { grid-column: 1 / span 8; }
.case-product-system__label--2 { grid-column: 4 / span 9; }
.case-product-system__label--3 { grid-column: 1 / span 9; }
.case-product-system__label img { display: block; width: calc(100% + 4px); max-width: none; height: auto; margin: -2px; }
.case-product-system__shoot-collage { width: min(1280px,calc(100% - 80px)); margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); row-gap: clamp(22px,3vw,44px); align-items: start; background: transparent; box-sizing: border-box; overflow: visible; }
.case-product-system__shoot { min-width: 0; overflow: hidden; }
.case-product-system__shoot--1 { grid-column: 1 / span 9; }
.case-product-system__shoot--2 { grid-column: 5 / span 8; }
.case-product-system__shoot--3 { grid-column: 2 / span 10; }
.case-product-system__shoot img { display: block; width: 100%; height: auto; }
@media (max-width:1100px) and (min-width:769px) {
  .case-product-system__products { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
  .case-product-system__head,.case-product-system__architecture,.case-product-system__labels-copy,.case-product-system__packaging-copy { width: calc(100% - 40px); }
  .case-product-system__head { margin-bottom: 58px; grid-template-columns: 1fr; gap: 22px; }
  .case-product-system__head h3 { font-size: 28px; }
  .case-product-system__architecture { margin-bottom: 58px; display: block; }
  .case-product-system__architecture-note { max-width: none; margin-top: 24px; font-size: 17px; }
  .case-product-system__groups { margin-top: 38px; }
  .case-product-system__group { display: block; padding: 30px 0 34px; }
  .case-product-system__group:last-child { border-bottom: 0; }
  .case-product-system__products { margin-top: 28px; grid-template-columns: 1fr; gap: 24px; }
  .case-product-system__labels { margin-bottom: 92px; }
  .case-product-system__labels-copy,.case-product-system__packaging-copy { display: block; }
  .case-product-system__labels-copy h4,.case-product-system__packaging-copy h4 { margin-bottom: 24px; }
  .case-product-system__head p,.case-product-system__labels-copy p,.case-product-system__packaging-copy p { font-size: 15px; }
  .case-product-system__labels-collage { width: calc(100% - 40px); display: block; }
  .case-product-system__label+.case-product-system__label { margin-top: 20px; }
  .case-product-system__shoot-collage { width: calc(100% - 40px); padding: 0; display: block; }
  .case-product-system__shoot+.case-product-system__shoot { margin-top: 16px; }
  .case-product-system__shoot--2,.case-product-system__shoot--3 { margin-top: 16px; }
}

.case-social-system { padding: clamp(84px,9vw,148px) 0; color: #fff; }
.case-social-system__head,.case-social-system__grid-story,.case-social-system__highlights,.case-social-system__stories { width: min(1180px,calc(100% - 80px)); margin-right: auto; margin-left: auto; }
.case-social-system__head { margin-bottom: clamp(86px,10vw,150px); display: grid; grid-template-columns: minmax(0,50%) minmax(0,1fr); gap: 40px; align-items: start; }
.case-social-system__head h3 { margin: 0; font-size: 32px; font-weight: 400; line-height: 1.3; }
.case-social-system__head div,.case-social-system__copy,.case-social-system__stories-head { max-width: 520px; }
.case-social-system__head p,.case-social-system__copy p,.case-social-system__stories-head p { margin: 0; color: #969696; font-size: 18px; font-weight: 300; line-height: 1.6; }
.case-social-system__head p+p,.case-social-system__copy p+p,.case-social-system__stories-head p+p { margin-top: 18px; }
.case-social-system__copy>span,.case-social-system__stories-head>span { display: block; margin-bottom: 18px; color: #b49cf0; font-size: 13px; letter-spacing: .08em; }
.case-social-system h4 { margin: 0 0 24px; font-size: clamp(22px,1.8vw,30px); font-weight: 400; line-height: 1.2; }
.case-social-system figure { margin: 0; }
.case-social-system img { display: block; width: 100%; height: auto; }
.case-social-system__grid-story { width: 100%; margin-bottom: clamp(106px,12vw,180px); }
.case-social-system__grid-story .case-social-system__copy { width: min(520px,calc(100% - 80px)); margin: 0 auto clamp(44px,5vw,72px) max(40px,calc((100% - 1180px)/2)); }
.case-social-system__grid-story figure { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; background: linear-gradient(135deg,rgba(92,49,139,.16),rgba(35,50,125,.13)); }
.case-social-system__grid-story figure img { width: 100%; transform: translateZ(0); }
.case-social-system__highlights { margin-bottom: clamp(110px,13vw,190px); }
.case-social-system__highlights .case-social-system__copy { margin: 0 0 50px auto; }
.case-social-system__highlights figure { width: 80%; margin: 0 auto; background: transparent; box-sizing: border-box; overflow: hidden; }
.case-social-system__highlights img { width: 100%; min-width: 0; }
.case-social-system__stories { display: grid; grid-template-columns: minmax(240px,.34fr) minmax(0,.66fr); gap: clamp(50px,7vw,110px); align-items: start; }
.case-social-system__stories-head { position: sticky; top: 110px; }
.case-social-system__stories-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(18px,2.4vw,36px); align-items: start; }
.case-social-system__story { aspect-ratio: 9/16; overflow: hidden; }
.case-social-system__story img { width: 100%; height: 100%; object-fit: cover; }
.case-social-system__banners-lead { width: min(1180px,calc(100% - 80px)); margin: clamp(92px,10vw,150px) auto 0; padding-top: 36px; border-top: 1px solid rgba(255,255,255,.16); color: #969696; font-size: 18px; font-weight: 300; line-height: 1.6; }
@media (max-width:768px) {
  .case-social-system { padding: 72px 0; }
  .case-social-system__head,.case-social-system__grid-story,.case-social-system__highlights,.case-social-system__stories,.case-social-system__banners-lead { width: calc(100% - 40px); }
  .case-social-system__head { margin-bottom: 72px; display: block; }
  .case-social-system__head h3 { margin-bottom: 24px; font-size: 28px; }
  .case-social-system__head p,.case-social-system__copy p,.case-social-system__stories-head p,.case-social-system__banners-lead { font-size: 15px; }
  .case-social-system__grid-story { width: 100%; margin-bottom: 86px; }
  .case-social-system__grid-story .case-social-system__copy { width: calc(100% - 40px); margin-right: 20px; margin-bottom: 34px; margin-left: 20px; }
  .case-social-system__highlights { margin-bottom: 86px; }
  .case-social-system__highlights .case-social-system__copy { margin-bottom: 34px; }
  .case-social-system__highlights figure { width: 80%; overflow: hidden; }
  .case-social-system__highlights img { width: 100%; min-width: 0; }
  .case-social-system__stories { display: block; }
  .case-social-system__stories-head { position: static; margin-bottom: 38px; }
  .case-social-system__stories-layout { gap: 14px; }
}

.case-scroll-stack {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: var(--case-block-gap);
}

/* overflow:auto на корне создаёт отдельный scroll-контейнер и ломает sticky-сцену.
   clip обрезает случайный горизонтальный выход, но не создаёт новый скролл-контекст. */
html:has(body.has-case-scroll-stack),
body.has-case-scroll-stack {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

.case-scroll-stack__head {
  width: calc(100% - var(--case-content-gutter-x) - var(--case-content-gutter-x));
  margin: 0 auto 72px;
  display: grid;
  grid-template-columns: minmax(0, 50%) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.case-scroll-stack__head h3,
.case-scroll-stack__head p,
.case-scroll-stack__caption {
  margin: 0;
}

.case-scroll-stack__head h3 {
  color: #fff;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.3;
}

.case-scroll-stack__head p,
.case-scroll-stack__caption {
  color: #969696;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
}

.case-scroll-stack__head p { max-width: 520px; }

/* Обычный текст кейса следует общей сетке numbered/nested text.
   Демонстрационные copy-блоки фирменного стиля (включая «Типографику»)
   намеренно не входят в этот список. */
@media (min-width: 1024px) {
  .case-constructor-page .content-bottom > .case-social-system > .case-social-system__head {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .case-disclosure__intro,
  .case-brand-platform__head,
  .case-concept-flow__head,
  .case-strategy-timeline__head,
  .case-tag-cloud__head,
  .case-tone-profile__head,
  .case-editorial-collage__head,
  .case-brand-system__head,
  .case-logo-story__head,
  .case-product-system__head,
  .case-product-system__architecture,
  .case-product-system__labels-copy,
  .case-product-system__packaging-copy,
  .case-social-system__head,
  .case-scroll-stack__head {
    display: grid;
    grid-template-columns: 52px minmax(0, calc(50% - 52px)) 40px minmax(0, 1fr);
    column-gap: 0;
  }

  .case-disclosure__intro > p,
  .case-brand-platform__head > p,
  .case-concept-flow__head > p,
  .case-strategy-timeline__head > p,
  .case-tag-cloud__head > p,
  .case-tone-profile__head > p,
  .case-editorial-collage__head > p,
  .case-brand-system__head > p,
  .case-logo-story__head > p,
  .case-product-system__head > .case-product-system__head-copy,
  .case-product-system__architecture > .case-product-system__architecture-note,
  .case-product-system__labels-copy > :is(div, p),
  .case-product-system__packaging-copy > :is(div, p),
  .case-social-system__head > div,
  .case-scroll-stack__head > p {
    grid-column: 4;
    max-width: none;
    padding-right: 79px;
    box-sizing: border-box;
  }

  .case-brand-platform__head > h3,
  .case-concept-flow__head > h3,
  .case-strategy-timeline__head > h3,
  .case-tag-cloud__head > h3,
  .case-tone-profile__head > h3,
  .case-editorial-collage__head > h3,
  .case-brand-system__head > h3,
  .case-logo-story__head > h3,
  .case-product-system__head > h3,
  .case-product-system__architecture > .case-product-system__eyebrow {
    grid-column: 2;
  }

  .case-brand-platform__head > h3,
  .case-concept-flow__head > h3,
  .case-strategy-timeline__head > h3,
  .case-tag-cloud__head > h3,
  .case-tone-profile__head > h3,
  .case-editorial-collage__head > h3,
  .case-brand-system__head > h3,
  .case-logo-story__head > h3,
  .case-product-system__head > h3,
  .case-product-system__architecture > .case-product-system__eyebrow,
  .case-product-system__labels-copy > :is(div, p),
  .case-product-system__packaging-copy > :is(div, p) {
    grid-row: 1 / span 3;
  }

  .case-product-system__labels-copy > span,
  .case-product-system__labels-copy > h4,
  .case-product-system__packaging-copy > span,
  .case-product-system__packaging-copy > h4,
  .case-social-system__head > h3,
  .case-scroll-stack__head > h3 {
    grid-column: 2;
  }
}

/* Обычные визуальные материалы остаются внутри той же рабочей сетки, что
   заголовки. Явные full-bleed изображения и scroll-stack сюда не входят. */
@media (min-width: 1024px) {
  .case-brand-platform__diagram,
  .case-strategy-timeline__grid,
  .case-strategy-timeline__caption,
  .case-tag-cloud > .case-slogan-lines,
  .case-tone-profile__traits,
  .case-editorial-collage-section:not(.case-editorial-collage-section--full-bleed) .case-editorial-collage,
  .case-brand-system__row,
  .case-logo-story__process,
  .case-logo-story__hero,
  .case-product-system__groups,
  .case-product-system__labels-collage,
  .case-product-system__shoot-collage,
  .case-social-system__grid-story,
  .case-social-system__highlights,
  .case-social-system__stories,
  .case-social-system__banners-lead {
    box-sizing: border-box;
    width: calc(100% - 131px);
    margin-right: 79px;
    margin-left: 52px;
  }

  .case-social-system__grid-story .case-social-system__copy {
    margin-left: 0;
  }

  .case-social-system__highlights .case-social-system__copy {
    margin-bottom: clamp(72px, 7vw, 110px);
  }
}

.case-scroll-stack__track {
  position: relative;
  height: calc(var(--stack-height) + 100vh);
}

.case-scroll-stack__stage {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #f7f6f3;
  isolation: isolate;
}

.case-scroll-stack__item {
  --stack-offset: 100%;
  --stack-opacity: 1;
  position: absolute;
  inset: 0;
  z-index: calc(var(--stack-index) + 1);
  width: 100%;
  height: 100%;
  margin: 0;
  transform: translate3d(0, var(--stack-offset), 0);
  opacity: 1;
  backface-visibility: hidden;
  will-change: transform;
}

.case-scroll-stack__item:first-child {
  --stack-offset: 0%;
}

.case-scroll-stack__item img {
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin: -1px;
  object-fit: cover;
  object-position: center;
  backface-visibility: hidden;
}

.case-scroll-stack__caption {
  width: min(900px, calc(100% - 80px));
  margin: 42px auto 0;
  text-align: center;
}

@media (max-width: 768px) {
  /* На телефоне носители идут обычной лентой: полноэкранный sticky-stack
     скрывал изображения и оставлял после себя несколько пустых viewport. */
  .case-scroll-stack {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .case-scroll-stack__head {
    width: calc(100% - 40px);
    margin-bottom: 32px;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .case-scroll-stack__head p,
  .case-scroll-stack__caption { font-size: 15px; }
  .case-scroll-stack__head p { max-width: none; font-size: 16px; }
  .case-scroll-stack__head h3 { font-size: 26px; }
  .case-scroll-stack__track { height: auto; }
  .case-scroll-stack__stage {
    position: static;
    width: calc(100% - 40px);
    height: auto;
    margin: 0 auto;
    display: grid;
    gap: 16px;
    overflow: visible;
    background: transparent;
  }
  .case-scroll-stack__item,
  .case-scroll-stack__item:first-child {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    transform: none !important;
    opacity: 1;
  }
  .case-scroll-stack__item img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
  }
  .case-scroll-stack__caption { width: calc(100% - 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .case-scroll-stack__track { height: auto; }
  .case-scroll-stack__stage { position: static; height: auto; overflow: visible; transform: none; }
  .case-scroll-stack__item { position: relative; inset: auto; aspect-ratio: 16 / 9; transform: none !important; }
}

/* --- more-cases («Больше кейсов») на кейсе ---------------------------------
   1) Заголовок: live — text-align:start. Snapshot ≤599 ставит center.
   2) Snapshot pt 196/130/110 + team mb → дыра над заголовком.
      После team: mb 60 + wr pt 60 = live gap card→title 120px.
      Без team сохраняем обычный 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;
}

.case-constructor-page > .container:has(> .case-team:last-child) + .more-case-wr.more-case-wr__main,
.case-constructor-page > .container:has(> .case-team:last-child) + .more-case-wr.more-case-wr__main[data-v-27a87df0] {
  padding-top: var(--case-block-gap) !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;
  }
}
/* Nested semantic-head mobile alignment */
@media (max-width: 1023px) {
  .case-constructor-page .content-bottom > :is(.case-brand-platform,.case-concept-flow,.case-strategy-timeline,.case-tag-cloud,.case-tone-profile) > :is(.case-brand-platform__head,.case-concept-flow__head,.case-strategy-timeline__head,.case-tag-cloud__head,.case-tone-profile__head) {
    display: grid;
    grid-template-columns: 32px minmax(0,1fr);
    column-gap: 12px;
  }
  .case-constructor-page .content-bottom > :is(.case-brand-platform,.case-concept-flow,.case-strategy-timeline,.case-tag-cloud,.case-tone-profile) > :is(.case-brand-platform__head,.case-concept-flow__head,.case-strategy-timeline__head,.case-tag-cloud__head,.case-tone-profile__head) > :is(h3,p) {
    grid-column: 2;
  }
  .case-constructor-page .content-bottom > :is(.case-brand-platform,.case-concept-flow,.case-strategy-timeline,.case-tag-cloud,.case-tone-profile) > :is(.case-brand-platform__head,.case-concept-flow__head,.case-strategy-timeline__head,.case-tag-cloud__head,.case-tone-profile__head) > p {
    padding-right: 0;
  }
}

/* Mobile: номер главы над title; смысловые блоки без пустой служебной колонки. */
@media (max-width: 1023px) {
  .case-constructor-page .content-marketing.numbered > header {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
    column-gap: 0;
  }

  .case-constructor-page .content-marketing.numbered > header .section-number {
    grid-column: 1;
    grid-row: 1;
    padding-top: 0;
  }

  .case-constructor-page .content-marketing.numbered > header .content-marketing-numbered-title {
    grid-column: 1;
    grid-row: 2;
  }

  .case-constructor-page .content-marketing.numbered > .content {
    width: 100%;
    margin-left: 0;
  }

  .case-constructor-page .content-bottom > .content-marketing:not(.numbered) {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .case-constructor-page .content-bottom > .content-marketing:not(.numbered) > :is(header, .content),
  .case-constructor-page .content-bottom > :is(.case-brand-platform,.case-concept-flow,.case-strategy-timeline,.case-tag-cloud,.case-tone-profile) > :is(.case-brand-platform__head,.case-concept-flow__head,.case-strategy-timeline__head,.case-tag-cloud__head,.case-tone-profile__head) > :is(h3,p) {
    grid-column: 1;
  }

  .case-constructor-page .content-bottom > :is(.case-brand-platform,.case-concept-flow,.case-strategy-timeline,.case-tag-cloud,.case-tone-profile) > :is(.case-brand-platform__head,.case-concept-flow__head,.case-strategy-timeline__head,.case-tag-cloud__head,.case-tone-profile__head) {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .case-concept-flow__list h4 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .case-concept-flow__list p {
    width: 100%;
    margin-left: 0;
  }
}