/* ST6 «Кейсы» — хаб (.p-cases) и страница кейса (.p-case).
   Перенос 1:1 из принятых макетов 02_SEO_AND_SITE/mockups-2026-09-23/st6-hub/cases.css
   и st6-case/case.css. Палитра, шрифт Rubik и классы s-* — из service.css (оболочка Сид 3);
   здесь только то, чего у оболочки нет. Префикс c-.
   Фон первого экрана шаблон ставит инлайном (картинка приходит полем ACF), поэтому
   url() из фоновых правил снят. Фильтр по услуге — radio + CSS, без JS и без движения. */

:root{--seo:#aac8ab;--direct:#e7b96e;--dev:#94b9d4;--smm:#c9a3d4}

/* ================================ ХАБ ================================= */
body.p-cases{background:var(--ink)}
.c-symbols{position:absolute;width:0;height:0;overflow:hidden}
.p-cases .s-header nav a[aria-current=page]{color:var(--gold)}

.p-cases .c-section{padding-block:96px;position:relative}
.p-cases .c-gap,.p-case .c-gap{display:inline-block;border:1px dashed #d9bd7e99;border-radius:3px;padding:0 7px;font-size:11px;line-height:1.75;color:var(--gold);white-space:nowrap;vertical-align:baseline}
/* Прочерк «поле карты не заполнено»: выглядит как пробел, но кода вопроса у него нет,
   поэтому и класс другой — гейт Г3 ищет пробелы по классам *-gap и требует data-q. */
.p-cases .c-blank,.p-case .c-blank{display:inline-block;border:1px dashed #8d9a8799;border-radius:3px;padding:1px 9px;font-size:11px;line-height:1.7;color:#a3af99;background:#16241c;vertical-align:baseline}
.p-cases .c-gap:empty,.p-case .c-gap:empty,.p-cases .c-blank:empty,.p-case .c-blank:empty{display:none}

/* ── B01 · первый экран ────────────────────────────────────────────── */
.p-cases #b01.s-hero{min-height:0;background-position:72% 42%;background-size:cover;background-repeat:no-repeat}
.p-cases #b01.s-hero:before{
  background:
    linear-gradient(90deg,#0b1512 6%,#0b1512f2 34%,#0b151299 54%,#0b151233 74%,#0b151200 92%),
    linear-gradient(0deg,#0b1512 4%,#0b1512cc 12%,#0b151244 30%,transparent 46%);
}
.p-cases #b01 .s-hero-copy{width:56%;padding-top:46px;padding-bottom:62px}
.p-cases #b01 .s-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;color:var(--gold);font-size:11px;letter-spacing:.11em;text-transform:uppercase}
.p-cases #b01 .s-eyebrow:before{content:'';width:22px;height:1px;background:var(--gold)}
.p-cases #b01 h1{font-size:clamp(58px,6.6vw,104px);font-weight:750;line-height:.98}
.p-cases #b01 .s-hero-intro{font-size:18px;line-height:1.6;max-width:600px;margin:22px 0 0;color:#d2cfbd}
.p-cases .c-hero-rule{font-size:13px;line-height:1.7;max-width:560px;margin-top:14px;padding-left:16px;border-left:2px solid var(--gold);color:#aeb7a6}
.p-cases #b01 .s-hero-actions{margin-top:28px}

/* Четвёрка цифр — сетка в четыре равные колонки, а не флекс с переносом: у флекса
   длинная подпись выталкивала последний показатель на вторую строку и слева оставалась
   дыра во всю ширину (критика макета 23.09). Сетка держит ритм при любой длине подписи. */
.p-cases .c-hero-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:0;list-style:none;margin:36px 0 0;padding:20px 0 0;border-top:1px solid var(--line);max-width:860px}
.p-cases .c-hero-facts li{display:flex;flex-direction:column;gap:5px;padding:2px 24px 2px 0;min-width:0}
.p-cases .c-hero-facts li+li{border-left:1px solid var(--line);padding-left:26px}
.p-cases .c-hero-facts b{font-size:34px;font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--paper)}
.p-cases .c-hero-facts span{font-size:11px;line-height:1.55;color:#aeb4a4}
.p-cases .c-hero-facts .c-gap{margin-left:4px}
.p-cases .c-hero-facts .c-fact-muted b{color:#8e9a88}

/* ── B02 · фильтр по услуге (radio + CSS, работает с клавиатуры) ───── */
.p-cases .c-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.p-cases .c-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.p-cases .c-filter label{display:inline-flex;align-items:center;gap:9px;border:1px solid #c9b48045;border-radius:30px;padding:10px 18px;min-height:42px;font-size:13px;color:#c1c6b2;cursor:pointer;background:#122219a0}
.p-cases .c-filter label:hover{border-color:#d9bd7e99;color:var(--paper)}
.p-cases .c-filter label i{font-style:normal;font-size:11px;color:#94a08c}
.p-cases #fv-all:checked~.c-filter label[for=fv-all],
.p-cases #fv-seo:checked~.c-filter label[for=fv-seo],
.p-cases #fv-direct:checked~.c-filter label[for=fv-direct],
.p-cases #fv-dev:checked~.c-filter label[for=fv-dev],
.p-cases #fv-smm:checked~.c-filter label[for=fv-smm]{color:var(--ink);background:var(--paper);border-color:var(--paper);font-weight:500}
.p-cases #fv-all:checked~.c-filter label[for=fv-all] i,
.p-cases #fv-seo:checked~.c-filter label[for=fv-seo] i,
.p-cases #fv-direct:checked~.c-filter label[for=fv-direct] i,
.p-cases #fv-dev:checked~.c-filter label[for=fv-dev] i,
.p-cases #fv-smm:checked~.c-filter label[for=fv-smm] i{color:#5d6a53}
.p-cases #fv-all:focus-visible~.c-filter label[for=fv-all],
.p-cases #fv-seo:focus-visible~.c-filter label[for=fv-seo],
.p-cases #fv-direct:focus-visible~.c-filter label[for=fv-direct],
.p-cases #fv-dev:focus-visible~.c-filter label[for=fv-dev],
.p-cases #fv-smm:focus-visible~.c-filter label[for=fv-smm]{outline:2px solid var(--signal);outline-offset:4px}

/* ── B02 · карточки кейсов ─────────────────────────────────────────── */
/* Номер карточки рисуется счётчиком CSS, а не текстом: гейт Г3 считает каждое число
   видимого текста и требует на него факт, а «01…08» — нумерация, а не показатель.
   Побочная польза: при фильтре скрытые карточки счётчик не увеличивают. */
/* Карточки ряда — одной высоты: сетка растягивает ячейку, карточка занимает её целиком,
   подвал «Результат» прижат к низу (margin-top:auto ниже). Ряд не рвётся при разной
   длине заголовка и отрасли. */
.p-cases .c-cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:22px;counter-reset:kase}
.p-cases .c-cases>.c-case{height:100%;min-height:100%}
.p-cases .c-case{counter-increment:kase}
.p-cases .c-case-n:after{content:'0' counter(kase)}
.p-cases .c-case{display:none;flex-direction:column;position:relative;overflow:hidden;border:1px solid #cbbb9240;border-radius:3px;background:linear-gradient(162deg,#1d2b22,#101c16)}
.p-cases #fv-all:checked~.c-cases .c-case,
.p-cases #fv-seo:checked~.c-cases .c-case[data-seo],
.p-cases #fv-direct:checked~.c-cases .c-case[data-direct],
.p-cases #fv-dev:checked~.c-cases .c-case[data-dev],
.p-cases #fv-smm:checked~.c-cases .c-case[data-smm]{display:flex}
.p-cases .c-case:before{content:'';position:absolute;z-index:3;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--acc),transparent 78%)}
.p-cases .c-case{--acc:var(--gold)}
.p-cases .c-case[data-accent=seo]{--acc:var(--seo)}
.p-cases .c-case[data-accent=direct]{--acc:var(--direct)}
.p-cases .c-case[data-accent=dev]{--acc:var(--dev)}
.p-cases .c-case[data-accent=smm]{--acc:var(--smm)}
.p-cases .c-case:hover{border-color:#d9bd7e80}

.p-cases .c-case-art{position:relative;height:176px;flex:none;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse at 68% 34%,#26362d,#0c1711 72%)}
.p-cases .c-case-art:before{content:'';position:absolute;inset:0;opacity:.85;
  background-image:radial-gradient(1px 1px at 14% 24%,#e9dcbb90,transparent),radial-gradient(1px 1px at 31% 70%,#cfe0cc80,transparent),radial-gradient(1px 1px at 47% 18%,#e9dcbb70,transparent),radial-gradient(1.4px 1.4px at 63% 55%,#f0e4c480,transparent),radial-gradient(1px 1px at 82% 33%,#cfe0cc70,transparent),radial-gradient(1px 1px at 90% 78%,#e9dcbb60,transparent),radial-gradient(1px 1px at 24% 88%,#e9dcbb55,transparent)}
.p-cases .c-case-art:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 74%,#0d181299)}
.p-cases .c-case-art svg{position:absolute;right:7%;top:17%;width:72%;height:auto;color:var(--acc);fill:currentColor;opacity:.78;filter:drop-shadow(0 0 14px #0006)}
.p-cases .c-case-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-cases .c-case-n{position:absolute;left:22px;top:16px;z-index:2;font-size:11px;letter-spacing:.16em;color:#c6cbb6}
.p-cases .c-case:nth-child(2) .c-case-art svg{transform:rotate(-9deg) scale(1.04)}
.p-cases .c-case:nth-child(3) .c-case-art svg{transform:scaleX(-1) rotate(5deg)}
.p-cases .c-case:nth-child(4) .c-case-art svg{transform:rotate(7deg) scale(.96)}
.p-cases .c-case:nth-child(5) .c-case-art svg{transform:scaleY(-1) rotate(4deg)}
.p-cases .c-case:nth-child(6) .c-case-art svg{transform:rotate(-4deg) scale(1.06)}
.p-cases .c-case:nth-child(7) .c-case-art svg{transform:scaleX(-1) rotate(-7deg) scale(.98)}
.p-cases .c-case:nth-child(8) .c-case-art svg{transform:rotate(11deg) scale(.94)}

.p-cases .c-case-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 20px}
.p-cases .c-case-svc{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin-bottom:10px}
.p-cases .c-case h3{font-size:20px;font-weight:500;line-height:1.22;letter-spacing:-.025em;margin:0}
.p-cases .c-case h3 a{display:block}
.p-cases .c-case h3 a:after{content:'';position:absolute;inset:0}
.p-cases .c-case:hover h3{color:var(--gold)}
.p-cases .c-case-ind{font-size:13px;line-height:1.5;color:#9fa997;margin:9px 0 14px}
.p-cases .c-case-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
/* срез Т-б: подвал карточки без строки результата — только стрелка перехода, без линии */
.p-cases .c-case-foot.c-case-foot-go{border-top:0;padding-top:8px;justify-content:flex-end}
.p-cases .c-case-res{flex:1;min-width:0;display:flex;align-items:center;gap:9px;font-size:11px;color:#8b9684}
.p-cases .c-case-res em{font-style:normal;white-space:nowrap}
.p-cases .c-case-res s{flex:1;min-width:10px;height:0;border-top:1px dashed #7d8877;text-decoration:none}
.p-cases .c-case-res b{font-size:15px;color:var(--paper);font-weight:600;white-space:nowrap}
.p-cases .c-case-res i{font-style:normal;font-size:10px;color:#8b9684}
.p-cases .c-case-go{font-size:17px;color:var(--acc);flex:none}

.p-cases .c-notes{list-style:none;margin:32px 0 0;padding:22px 26px;border:1px solid #cbbb9230;border-radius:3px;background:#101c1690;max-width:980px}
.p-cases .c-notes li{font-size:13px;line-height:1.7;color:#9ca893;padding:7px 0}
.p-cases .c-notes li+li{border-top:1px solid var(--line);padding-top:12px;margin-top:5px}
.p-cases .c-notes .c-gap{margin-right:8px}

/* ── B03 · куда дальше ─────────────────────────────────────────────── */
.p-cases .c-next{position:relative;padding-block:96px;border-top:1px solid var(--line);
  background:radial-gradient(ellipse at 18% 18%,#24332b,transparent 62%),linear-gradient(180deg,#101d16,#0b1512)}
.p-cases .c-next:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(1px 1px at 12% 28%,#e9dcbb80,transparent),radial-gradient(1px 1px at 34% 62%,#cfe0cc70,transparent),radial-gradient(1px 1px at 58% 18%,#e9dcbb60,transparent),radial-gradient(1.5px 1.5px at 78% 48%,#f0e4c470,transparent),radial-gradient(1px 1px at 88% 76%,#cfe0cc60,transparent),radial-gradient(1px 1px at 22% 84%,#e9dcbb50,transparent)}
.p-cases .c-next>.s-wrap{position:relative;z-index:1}
.p-cases .c-next-grid{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:start}
.p-cases .c-next h2{font-size:clamp(40px,4.4vw,64px)}
.p-cases .c-next-lead{font-size:17px;line-height:1.6;max-width:430px;margin-top:20px;color:#c9cdb9}
.p-cases .c-next-cta{margin-top:26px}
.p-cases .c-next .c-note{font-size:12px;color:#9ca893;line-height:1.7;margin-top:16px;max-width:460px}
.p-cases .c-channels{list-style:none;margin:34px 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:26px}
.p-cases .c-channels li{display:flex;flex-direction:column;gap:4px}
.p-cases .c-channels span{font-size:11px;color:#94a08c}
.p-cases .c-channels a{font-size:15px;color:var(--paper);border-bottom:1px solid #d6bb8466;padding-bottom:2px}
.p-cases .c-channels a:hover{color:var(--gold)}

.p-cases .c-next-links{display:grid;gap:0;border-top:1px solid var(--line)}
.p-cases .c-next-links a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:22px 4px;border-bottom:1px solid var(--line)}
.p-cases .c-next-links b{font-size:21px;font-weight:500;letter-spacing:-.025em;line-height:1.25}
.p-cases .c-next-links span{grid-column:1;font-size:12px;color:#94a08c;margin-top:6px}
.p-cases .c-next-links i{grid-column:2;grid-row:1/3;font-style:normal;font-size:20px;color:#b8a87c}
.p-cases .c-next-links a:hover b,.p-cases .c-next-links a:hover i{color:var(--gold)}

/* ── адаптив хаба ──────────────────────────────────────────────────── */
@media(max-width:1150px){
  .p-cases .c-cases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-cases #b01 .s-hero-copy{width:64%}
  .p-cases #b01 h1{font-size:64px}
}
@media(max-width:800px){
  .p-cases .c-section{padding-block:64px}
  .p-cases .c-next{padding-block:64px}
  .p-cases #b01.s-hero{background-position:64% 40%}
  .p-cases #b01.s-hero:before{background:linear-gradient(0deg,#0b1512 5%,#0b1512cc 34%,#0b1512ea 100%)}
  .p-cases #b01 .s-hero-copy{width:100%;padding:34px 0 34px}
  .p-cases #b01 .s-eyebrow{font-size:10px;letter-spacing:.08em}
  .p-cases #b01 h1{font-size:clamp(52px,13vw,72px)}
  .p-cases #b01 .s-hero-intro{font-size:16px}
  /* На узком экране четвёрка встаёт в две колонки (сетка, а не флекс — правило выше). */
  .p-cases .c-hero-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 0;margin-top:28px}
  .p-cases .c-hero-facts li{min-width:0;padding-right:16px}
  .p-cases .c-hero-facts li+li{border-left:0;padding-left:0}
  .p-cases .c-hero-facts li:nth-child(n+3){border-top:1px solid var(--line);padding-top:14px}
  .p-cases .c-hero-facts b{font-size:30px}
  .p-cases .c-next-grid{grid-template-columns:1fr;gap:42px}
}
@media(max-width:560px){
  .p-cases .c-section{padding-block:52px}
  .p-cases .c-next{padding-block:52px}
  .p-cases .c-cases{grid-template-columns:1fr;gap:14px}
  .p-cases #b01 h1{font-size:clamp(44px,13vw,60px)}
  .p-cases #b01 .s-hero-actions .s-button{width:100%}
  .p-cases .c-hero-rule{font-size:12px}
  .p-cases .c-filter{gap:6px}
  .p-cases .c-filter label{padding:9px 14px;font-size:12px;min-height:40px}
  .p-cases .c-case-art{height:168px}
  .p-cases .c-case-body{padding:18px 20px 16px}
  .p-cases .c-case h3{font-size:21px}
  .p-cases .c-notes{padding:18px 18px}
  .p-cases .c-notes li{font-size:12px}
  .p-cases .c-next h2{font-size:38px}
  .p-cases .c-next-links b{font-size:18px}
  .p-cases .c-channels{gap:18px}
}

/* =============================== КЕЙС ================================ */
body.p-case{background:var(--ink)}
.p-case .c-section{padding-block:88px;position:relative}
.p-case .c-section+.c-section{border-top:1px solid var(--line)}
.p-case .c-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:40px}
.p-case .c-head h2{margin:0;max-width:700px;font-size:clamp(32px,3.5vw,52px)}
.p-case .c-head>p{max-width:430px;font-size:15px;line-height:1.7}
.p-case .c-note{font-size:12px;color:#9ca893;line-height:1.7;margin-top:22px;max-width:860px}

/* — B01: первый экран + паспорт проекта — */
.p-case #b01.s-hero{min-height:0;background-position:76% 38%;background-size:cover;background-repeat:no-repeat}
.p-case #b01 .s-hero-copy{width:58%;padding-top:40px;padding-bottom:62px}
.p-case .c-hero-art{display:none}
.p-case #b01 .s-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;color:var(--gold);font-size:11px;letter-spacing:.11em;text-transform:uppercase}
.p-case #b01 .s-eyebrow:before{content:'';width:22px;height:1px;background:var(--gold)}
.p-case #b01 h1{max-width:740px;font-size:clamp(40px,4.1vw,62px);font-weight:700}
.p-case #b01 .c-h1-note{margin-top:26px;max-width:640px;font-size:12px;line-height:1.7;color:#b0b7a6;border-left:1px solid #d9bd7e66;padding-left:16px}
.p-case #b01 .c-h1-note .c-gap{margin-right:9px}
.p-case #b01 .s-hero-intro{margin:22px 0 26px;max-width:590px;font-size:17px}
.p-case #b01 .s-hero-intro+.s-hero-intro{margin-top:-10px;font-size:15px;color:#bcc3b1}
.p-case .c-passport-band{position:relative;z-index:5;border-top:1px solid #dfcca540;background:#0d1a14}
.p-case .c-passport-grid{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1.4fr);gap:40px;align-items:start;padding-block:34px}
/* без логотипа (посетителю заглушка не печатается): две колонки — клиент и паспорт */
.p-case .c-passport-grid.c-passport-grid--nologo{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.p-case .c-logo-plate{border:1px dashed #d9bd7e66;border-radius:4px;min-height:132px;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:20px 18px;text-align:center;background:repeating-linear-gradient(135deg,#132019,#132019 11px,#16241c 11px,#16241c 22px)}
.p-case .c-logo-plate b{font-size:11px;letter-spacing:.08em;color:var(--gold);font-weight:500}
.p-case .c-logo-plate span{font-size:11px;line-height:1.55;color:#a9b19d}
.p-case .c-logo-plate .c-logo-img{max-width:100%;height:auto;object-fit:contain}
.p-case .c-client-lead p{font-size:15px;line-height:1.72;color:#c9cdb9}
.p-case .c-client-lead p+p{margin-top:12px}
.p-case .c-client-lead .s-eyebrow{margin-bottom:12px}
.p-case .c-passport{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.p-case .c-passport>div{display:flex;flex-direction:column;gap:5px;padding:11px 0;border-top:1px solid var(--line)}
.p-case .c-passport dt{font-size:11px;letter-spacing:.05em;color:#c9b78c}
.p-case .c-passport dd{margin:0;font-size:15px;line-height:1.4;color:var(--paper)}
.p-case .s-service-nav strong{max-width:260px}

/* — B02: задача → что сделали → результат — */
/* Номер этапа — счётчиком CSS: в видимый текст число не попадает (см. B02 хаба). */
.p-case #b02{counter-reset:stage}
.p-case .c-stage{counter-increment:stage}
.p-case .c-stage+.c-stage{margin-top:54px;padding-top:44px;border-top:1px solid var(--line)}
.p-case .c-stage-head{display:flex;align-items:baseline;gap:16px;margin-bottom:8px}
.p-case .c-stage-num{font-size:11px;letter-spacing:.11em;color:var(--gold);flex:none;padding-top:3px}
.p-case .c-stage-num:after{content:'0' counter(stage)}
.p-case .c-stage h3{font-size:clamp(26px,2.5vw,34px);font-weight:600}
.p-case .c-stage-intro{font-size:14px;color:#aeb6a4;margin:0 0 24px 47px;max-width:700px}
.p-case .c-stage>.c-body{margin-left:47px}
.p-case .c-stage-p{font-size:14px;line-height:1.72;color:#c2cab6;max-width:900px}
.p-case .c-stage-p+.c-stage-p{margin-top:14px}

.p-case .c-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.p-case .c-card{border:1px solid #cbbb9250;border-radius:3px;padding:22px 22px 24px;background:linear-gradient(160deg,#1d2b22,#111d17)}
.p-case .c-card b{display:block;font-size:17px;font-weight:500;color:var(--paper);letter-spacing:-.015em;line-height:1.3;margin-bottom:9px}
.p-case .c-card p{font-size:13px;line-height:1.6;color:#bfc7b4}
.p-case .c-cards-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.p-case .c-cards-2 .c-card{padding:26px 28px 28px}
.p-case .c-cards-2 .c-card b{font-size:20px;margin-bottom:11px}
.p-case .c-cards-2 .c-card p{font-size:14px}

.p-case .c-rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 44px;counter-reset:row}
.p-case .c-rows li{counter-increment:row;display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 12px;padding:16px 0 17px;border-top:1px solid var(--line)}
.p-case .c-rows li:before{content:'0' counter(row);font-size:11px;letter-spacing:.08em;color:var(--gold);padding-top:4px}
.p-case .c-rows b{display:block;font-size:17px;font-weight:500;color:var(--paper);letter-spacing:-.015em;line-height:1.3;margin-bottom:6px}
.p-case .c-rows p{grid-column:2;font-size:13px;line-height:1.65;color:#bfc7b4;margin:0}

.p-case .c-result{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.p-case .c-result li{position:relative;padding:15px 0 16px 24px;border-top:1px solid var(--line)}
.p-case .c-result li:before{content:'+';position:absolute;left:0;top:15px;color:var(--gold);font-size:15px;line-height:1.4}
.p-case .c-result b{display:block;font-size:16px;font-weight:500;color:var(--paper);line-height:1.35;margin-bottom:5px}
.p-case .c-result p{font-size:13px;line-height:1.65;color:#bfc7b4}

.p-case .c-quote{margin:46px 0 0;padding:28px 32px;border-left:2px solid var(--signal);background:linear-gradient(120deg,#1a2820,#101d16)}
.p-case .c-quote blockquote{margin:0;font-size:20px;line-height:1.55;color:#e1dfca;max-width:900px}
.p-case .c-quote figcaption{margin-top:14px;font-size:12px;color:#a9b69e}
.p-case .c-quote figcaption a{color:var(--gold);border-bottom:1px solid #d6bb8466}
.p-case .c-quote .c-note{margin-top:14px}

/* — B03: сводка показателей, когда у каждой цифры есть источник — */
.p-case .c-metrics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.p-case .c-metrics li{display:flex;flex-direction:column;gap:6px;border:1px solid #cbbb9250;border-radius:3px;padding:22px 24px 24px;background:linear-gradient(160deg,#1d2b22,#111d17)}
.p-case .c-metrics b{font-size:34px;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--paper)}
.p-case .c-metrics b small{font-size:16px;font-weight:500;margin-left:6px;color:#cbb78c}
.p-case .c-metrics span{font-size:14px;line-height:1.45;color:#c2cab6}
.p-case .c-metrics i{font-style:normal;font-size:11px;color:#94a08c}
.p-case .c-metrics a,.p-case .c-metrics em{font-style:normal;font-size:11px;color:#b8a87c}
.p-case .c-metrics a{border-bottom:1px solid #d6bb8466}

/* — B04: как это выглядело — */
.p-case #b04{background:linear-gradient(130deg,#1a2821,#0e1b15);border-top:1px solid var(--line)}
.p-case .c-shots{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.p-case .c-shot{margin:0}
.p-case .c-frame{position:relative;padding:16px;border:1px solid #bfaf8759;background:#0d1812;border-radius:5px;box-shadow:0 25px 60px #0004}
.p-case .c-frame:after{content:'';position:absolute;inset:16px;pointer-events:none;border-radius:2px;background:repeating-linear-gradient(0deg,transparent 0 3px,#0b15123d 3px 4px)}
.p-case .c-frame .c-tag{position:absolute;left:27px;top:27px;z-index:2;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#f2e5c5;background:#0b1512d9;border:1px solid #e3d1a74d;border-radius:2px;padding:6px 10px}
.p-case .c-frame img{display:block;width:100%;height:auto;aspect-ratio:1.6;object-fit:cover;object-position:top;border-radius:2px;background:#16241c}
.p-case .c-plate{aspect-ratio:2.05;border:1px dashed #d9bd7e55;border-radius:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:24px;text-align:center;background:repeating-linear-gradient(135deg,#111d17,#111d17 12px,#14211a 12px,#14211a 24px)}
.p-case .c-plate b{font-size:11px;letter-spacing:.1em;color:var(--gold);font-weight:500}
.p-case .c-plate span{font-size:12px;line-height:1.55;color:#aeb6a4;max-width:330px}
.p-case .c-plate code{font-size:10px;line-height:1.5;color:#7f8d78;word-break:break-all;max-width:400px;font-family:ui-monospace,Menlo,Consolas,monospace}
.p-case .c-shot figcaption{margin-top:13px;font-size:12px;line-height:1.65;color:#a7af9c}
.p-case .c-shot figcaption b{display:block;color:var(--paper);font-size:14px;font-weight:500;margin-bottom:5px}
.p-case .c-shot .c-gap{margin-top:9px}

/* — B06: хотите так же — */
.p-case #b06{background:linear-gradient(0deg,#0c1712,#111f18);border-top:1px solid var(--line)}
.p-case .c-cta-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:8%;align-items:start}
.p-case #b06 h2{font-size:clamp(40px,4.4vw,64px);max-width:520px;margin:0}
.p-case #b06 .c-cta-text{margin:20px 0 0;max-width:470px;font-size:17px;color:#c7cbb6}
.p-case #b06 .s-button{margin-top:28px;min-width:280px}
.p-case #b06 .c-direct{margin:26px 0 0;font-size:12px;color:#b3b9a8}
.p-case .c-channels{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.p-case .c-channels a{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 17px;border:1px solid #cdb88e80;border-radius:3px;font-size:15px;color:var(--paper)}
.p-case .c-channels a:hover{border-color:var(--gold);color:var(--gold)}
.p-case .c-channels small{font-size:11px;color:#9ca893}
.p-case .c-links{margin-top:6px}
.p-case .c-links+.c-links{margin-top:34px}
.p-case .c-links .s-eyebrow{margin-bottom:10px}
.p-case .c-links ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.p-case .c-links li{border-bottom:1px solid var(--line)}
.p-case .c-links li a{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:16px 0;font-size:19px;letter-spacing:-.015em}
.p-case .c-links li a:hover{color:var(--gold)}
.p-case .c-links li a span{font-size:12px;color:#93a08c;white-space:nowrap}
.p-case .c-links li p{margin:-4px 0 14px;font-size:11px;line-height:1.6;color:#9ca893}

/* — B03 / B05: блоки, которые не ставятся (условие шаблона не выполнено) — */
.p-case .c-hole{border:1px dashed #d9bd7e70;border-radius:4px;padding:32px 36px 34px;background:repeating-linear-gradient(135deg,#121e17,#121e17 13px,#15221b 13px,#15221b 26px)}
.p-case .c-hole-top{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.p-case .c-hole h2{font-size:clamp(24px,2.3vw,32px);margin:0}
.p-case .c-hole-sub{font-size:12px;line-height:1.65;color:#a9b19d;max-width:900px}
.p-case .c-hole-sub b{color:var(--gold);font-weight:500}
.p-case .c-hole-reason{font-size:14px;line-height:1.7;color:#c4ccb8;max-width:960px;margin-top:16px}
.p-case .c-hole-reason b{color:var(--paper);font-weight:500}
.p-case .c-hole-list{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.p-case .c-hole-list li{font-size:13px;line-height:1.6;color:#bfc7b4;padding:11px 0 11px 20px;border-top:1px solid var(--line);position:relative}
.p-case .c-hole-list li:before{content:'·';position:absolute;left:4px;color:var(--gold)}
.p-case .c-hole-what{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.p-case .c-hole-what li{font-size:13px;line-height:1.6;color:#c4ccb8;display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:baseline}

/* — адаптив кейса — */
@media(max-width:1150px){
  .p-case #b01 .s-hero-copy{width:64%}
  .p-case .c-passport-grid{grid-template-columns:190px minmax(0,1fr);gap:30px}
  .p-case .c-passport-wrap{grid-column:1/-1}
  .p-case .c-passport-grid.c-passport-grid--nologo{grid-template-columns:minmax(0,1fr)}
  .p-case .c-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-case .c-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-case .c-rows,.p-case .c-result,.p-case .c-hole-list{gap:0 28px}
  .p-case .c-cta-grid{gap:5%}
}
@media(max-width:800px){
  .p-case .c-section{padding-block:66px}
  .p-case .c-head{display:block}
  .p-case .c-head>p{margin-top:22px;max-width:560px}
  .p-case #b01.s-hero{background:none}
  .p-case #b01.s-hero:before{display:none}
  .p-case .c-hero-art{display:block;position:relative;z-index:3;width:100vw;max-width:none;margin:18px 0 0 calc(50% - 50vw);height:200px;object-fit:cover;object-position:62% 42%;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
  .p-case #b01 .s-hero-copy{width:100%;padding-top:22px;padding-bottom:26px}
  .p-case #b01 h1{font-size:clamp(32px,6.4vw,46px);max-width:none}
  .p-case #b01 .s-hero-intro{font-size:16px;max-width:none;margin:18px 0 22px}
  .p-case .c-passport-grid{grid-template-columns:1fr;gap:26px;padding-block:30px}
  .p-case .c-logo-plate{min-height:96px;max-width:260px}
  .p-case .c-passport{grid-template-columns:1fr}
  .p-case .c-stage-intro,.p-case .c-stage>.c-body{margin-left:0}
  .p-case .c-stage-head{gap:12px}
  .p-case .c-cards,.p-case .c-cards-2,.p-case .c-metrics{grid-template-columns:1fr;gap:14px}
  .p-case .c-rows,.p-case .c-result,.p-case .c-hole-list{grid-template-columns:1fr;gap:0}
  .p-case .c-shots{grid-template-columns:1fr;gap:22px}
  .p-case .c-cta-grid{grid-template-columns:1fr;gap:42px}
  .p-case #b06 h2{font-size:clamp(34px,7vw,46px);max-width:none}
  .p-case #b06 .s-button{width:100%;min-width:0;max-width:420px}
  .p-case .c-hole{padding:26px 22px 28px}
}
@media(max-width:560px){
  .p-case .c-section{padding-block:54px}
  .p-case #b01 .s-eyebrow{font-size:10px;letter-spacing:.08em}
  .p-case #b01 h1{font-size:clamp(28px,8.2vw,38px)}
  .p-case #b01 .s-hero-intro{font-size:15px}
  .p-case .c-stage+.c-stage{margin-top:40px;padding-top:34px}
  .p-case .c-stage h3{font-size:24px}
  .p-case .c-card{padding:20px 18px 22px}
  .p-case .c-rows li{grid-template-columns:28px minmax(0,1fr);gap:0 10px}
  .p-case .c-quote{padding:22px 20px}
  .p-case .c-quote blockquote{font-size:17px}
  .p-case .c-frame{padding:9px}
  .p-case .c-frame:after{inset:9px}
  .p-case .c-frame .c-tag{left:17px;top:17px;font-size:9px;padding:5px 8px}
  .p-case .c-channels{flex-direction:column;align-items:stretch}
  .p-case .c-channels a{width:100%}
  .p-case .c-links li a{font-size:16px;gap:12px}
  .p-case .c-hole h2{font-size:22px}
}

/* Движение выключено переключателем оболочки — у ST6 анимаций нет, но фиксируем явно. */
@media(prefers-reduced-motion:reduce){
  .p-cases .c-case,.p-case .c-frame{transition:none!important}
}

/* ── Срез Т-в [П]: галерея кейса и логотип клиента ─────────────────────────────────
   V-07/V-08: снимки статистики (≈3:1), макеты телефона и длинные скриншоты в рамке 1,6
   с object-fit:cover теряли половину ширины или всё, кроме верхушки. Снимок вписывается
   целиком (contain, по центру рамки на её фоне); метка кассеты стоит над снимком, а не
   поверх заголовка графика; полосы эффекта над снимком сняты — это доказательство, его
   должно быть видно.
   V-14: чёрный логотип с прозрачным фоном сливался с тёмной плашкой — у плашки с файлом
   логотипа светлая подложка (у заглушки без файла — прежний тёмный штрих). */
.p-case .c-frame img{object-fit:contain;object-position:center}
.p-case .c-frame:after{display:none}
.p-case .c-frame .c-tag{position:static;display:inline-block;margin:0 0 12px}
.p-case .c-logo-plate:has(.c-logo-img){background:#ece4cf;border-style:solid;border-color:#d9bd7e80}
@media(max-width:560px){
  .p-case .c-frame .c-tag{margin-bottom:8px}
}

/* ══════════════ Гаунтлет «кейсы» (10.10.2026): хаб и карточка до уровня Сид 3 ══════════════
   Эталон — блок кейсов главной Сид 3 (прототип «Одиссей», раздел cases): настоящий экран
   проекта в мониторе, VHS-фактура, бронза и кремовые надписи. Владельцу не нравятся упрощённые
   однотипные карточки и плоские иконки — поэтому у каждой карточки хаба своя «кассета»:
   сцена Сид 3 (декор, фон из таблицы стилей) + настоящий кадр проекта (st6_card_art(),
   только «подтверждено» в release/image-provenance.csv). Широкие кадры (экран сайта,
   мобильная версия) занимают две колонки — ритм сетки вместо восьми одинаковых плиток.
   Движение: полоса развёртки и мигающая точка записи — стоп при body.paused (оболочка),
   нет при prefers-reduced-motion; фактура строк — нет при body.no-vhs («эффекты выкл.»). */

/* ── ХАБ · B02: сцена секции ─────────────────────────────────────────── */
.p-cases #b02{isolation:isolate;overflow:hidden}
.p-cases #b02:before{content:'';position:absolute;z-index:-1;right:-6%;top:-30px;width:64%;height:560px;pointer-events:none;
  background:url(../img/route-art-v2-1280.webp) 72% 38%/cover no-repeat;opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 62% 70% at 66% 36%,#000 22%,transparent 72%);mask-image:radial-gradient(ellipse 62% 70% at 66% 36%,#000 22%,transparent 72%)}
.p-cases #b02 .s-head h2{font-size:clamp(44px,5vw,76px);letter-spacing:-.035em}
.p-cases #b02 .s-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--gold);font-size:11px;letter-spacing:.11em;text-transform:uppercase}
.p-cases #b02 .s-eyebrow:before{content:'';width:22px;height:1px;background:var(--gold)}

/* ── ХАБ · карточка-кассета ──────────────────────────────────────────── */
.p-cases .c-cases{gap:22px;grid-auto-flow:row}
.p-cases .c-case--wide{grid-column:span 2}
.p-cases .c-case{border-color:#cbbb9238;border-radius:4px;background:linear-gradient(172deg,#1a291f 0%,#0f1b15 62%,#0c1712 100%);
  box-shadow:0 34px 60px -34px #000e,inset 0 1px 0 #f3e3be12;
  transition:transform .45s cubic-bezier(.2,.75,.2,1),border-color .3s,box-shadow .45s}
.p-cases .c-case:hover,.p-cases .c-case:focus-within{transform:translateY(-5px);border-color:#d9bd7e8c;
  box-shadow:0 46px 80px -34px #000,0 0 0 1px #d9bd7e2e,0 0 60px -20px color-mix(in srgb,var(--acc) 45%,transparent)}
.p-cases .c-case:has(h3 a:focus-visible){outline:2px solid var(--signal);outline-offset:3px}
.p-cases .c-case h3 a:focus-visible{outline:none}

/* окно кассеты: сцена Сид 3 + виньетка + строки развёртки */
.p-cases .c-case-art{height:252px;background:#050b08;border-bottom:1px solid #d9bd7e2b;isolation:isolate}
.p-cases .c-case-art[data-scene]:before{z-index:0;opacity:.92;background:var(--scene,none) var(--scene-pos,center)/var(--scene-size,cover) no-repeat,
  radial-gradient(1px 1px at 12% 22%,#f0e4c4aa,transparent),radial-gradient(1px 1px at 34% 74%,#cfe0cc88,transparent),radial-gradient(1.4px 1.4px at 58% 16%,#f0e4c499,transparent),radial-gradient(1px 1px at 81% 64%,#cfe0cc88,transparent),radial-gradient(1px 1px at 92% 28%,#f0e4c477,transparent),
  radial-gradient(ellipse at 64% 30%,#1d2c24,#050b08 74%);
  filter:saturate(.95) contrast(1.06);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.p-cases .c-case:hover .c-case-art[data-scene]:before{transform:scale(1.05)}
.p-cases .c-case-art[data-scene=courier]{--scene:url(../img/story-courier-768.webp);--scene-size:118% auto;--scene-pos:40% 18%}
.p-cases .c-case-art[data-scene=ship]{--scene:url(../img/expedition-ship-768.webp);--scene-size:122% auto;--scene-pos:50% 14%}
.p-cases .c-case-art[data-scene=station]{--scene:url(../img/orbital-station-768.webp);--scene-size:96% auto;--scene-pos:50% 0%}
.p-cases .c-case-art[data-scene=hangar]{--scene:url(../img/hangar-bg-v1-768.webp);--scene-pos:50% 40%}
.p-cases .c-case-art[data-scene=planet]{--scene:url(../img/route-art-v2-768.webp);--scene-pos:50% 30%}
.p-cases .c-case-art[data-scene=dish]{--scene:url(../img/contact-art-v2-768.webp);--scene-pos:70% 60%}
.p-cases .c-case--wide .c-case-art[data-scene=courier],.p-cases .c-case--wide .c-case-art[data-scene=ship]{--scene-size:86% auto}
.p-cases .c-case--wide .c-case-art[data-scene=station]{--scene-size:62% auto;--scene-pos:8% 30%}
.p-cases .c-case-art:after{z-index:3;pointer-events:none;background:
  repeating-linear-gradient(0deg,transparent 0 3px,#02060426 3px 4px),
  radial-gradient(ellipse 80% 90% at 50% 45%,transparent 55%,#000a 100%),
  linear-gradient(180deg,transparent 70%,#0b1512d0)}
.no-vhs .p-cases .c-case-art:after,body.no-vhs.p-cases .c-case-art:after{background:linear-gradient(180deg,transparent 70%,#0b1512d0)}

/* номер кассеты и точка записи — оформление (счётчик CSS, не текст) */
.p-cases .c-case-n{z-index:5;left:18px;top:14px;display:inline-flex;align-items:center;gap:8px;padding:5px 9px 5px 8px;border:1px solid #e3d1a73d;border-radius:2px;background:#07100cc4;font-size:10px;letter-spacing:.16em;color:#e8dcbc;text-transform:uppercase}
.p-cases .c-case-n:before{content:'';width:6px;height:6px;border-radius:50%;background:#e2603f;box-shadow:0 0 8px #e2603fcc;animation:c-rec 1.6s steps(2,jump-none) infinite}
.p-cases .c-case-n:after{content:'Кассета ' counter(kase,decimal-leading-zero)}

/* экран сайта в мониторе */
.p-cases .c-case-screen{position:absolute;z-index:2;left:8%;right:8%;top:56px;bottom:-1px;padding:20px 7px 0;border:1px solid #e9d8b052;border-bottom:0;border-radius:9px 9px 0 0;
  background:linear-gradient(180deg,#1b2820,#0c1611);box-shadow:0 -14px 50px #000b,0 0 0 5px #0b1512b8,0 0 36px -8px color-mix(in srgb,var(--acc) 40%,transparent);overflow:hidden;
  transition:transform .6s cubic-bezier(.2,.75,.2,1)}
.p-cases .c-case-screen img{position:static;display:block;width:100%;height:100%;object-fit:cover;object-position:0 0;border-radius:3px 3px 0 0;filter:saturate(.9) contrast(1.03) sepia(.08)}
.p-cases .c-case-screen:after{content:'';position:absolute;left:7px;right:7px;top:20px;height:38%;pointer-events:none;background:linear-gradient(180deg,transparent,#f6e3bd1c 50%,transparent);
  transform:translateY(-110%);animation:c-sweep 7s linear infinite}
.p-cases .c-case-bar{position:absolute;left:10px;top:6px;display:flex;gap:5px}
.p-cases .c-case-bar i{width:6px;height:6px;border-radius:50%;background:#d9bd7e55}
.p-cases .c-case-bar i:first-child{background:#e2603fb0}
.p-cases .c-case:hover .c-case-screen{transform:translateY(-6px)}
.p-cases .c-case--wide .c-case-screen{left:12%;right:12%}

/* логотип клиента — «нашивка миссии» на латунной пластине */
.p-cases .c-case-patch{position:absolute;z-index:2;left:50%;bottom:26px;transform:translateX(-50%);width:min(62%,236px);aspect-ratio:1.75;display:grid;place-items:center;padding:16px 22px;
  border-radius:5px;background:linear-gradient(158deg,#f4ecd5,#dccda8 70%,#c9b58a);
  box-shadow:inset 0 1px 0 #fff8,inset 0 -2px 0 #9c86584d,0 0 0 5px #0b1512cf,0 0 0 6px #d9bd7e70,0 24px 46px #000d;
  transition:transform .6s cubic-bezier(.2,.75,.2,1)}
.p-cases .c-case-patch img{position:static;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.p-cases .c-case-patch--dark{padding:0;overflow:hidden;background:#050505;aspect-ratio:1.35;width:min(52%,196px)}
.p-cases .c-case-patch--dark img{width:100%;height:100%;object-fit:contain;transform:scale(1.25)}
.p-cases .c-case:hover .c-case-patch{transform:translateX(-50%) translateY(-5px)}
.p-cases .c-case--wide .c-case-patch{left:auto;right:9%;transform:none;width:min(40%,250px)}
.p-cases .c-case--wide:hover .c-case-patch{transform:translateY(-5px)}

/* мобильная версия сайта — три телефона на сцене */
.p-cases .c-case-phones{position:absolute;z-index:2;left:0;right:0;bottom:-34px;top:38px;display:flex;justify-content:center;align-items:flex-end}
.p-cases .c-case-phones img{position:static;width:auto;height:100%;max-width:none;object-fit:contain;filter:drop-shadow(0 22px 26px #000d);transition:transform .6s cubic-bezier(.2,.75,.2,1)}
.p-cases .c-case-phones img:nth-child(1){height:86%;transform:rotate(-7deg) translate(18px,6px)}
.p-cases .c-case-phones img:nth-child(2){position:relative;z-index:1;height:104%}
.p-cases .c-case-phones img:nth-child(3){height:86%;transform:rotate(7deg) translate(-18px,6px)}
.p-cases .c-case:hover .c-case-phones img:nth-child(1){transform:rotate(-10deg) translate(4px,0)}
.p-cases .c-case:hover .c-case-phones img:nth-child(3){transform:rotate(10deg) translate(-4px,0)}

/* без кадра — прежнее созвездие, но на сцене */
.p-cases .c-case-art>svg{z-index:2}

/* тело карточки */
.p-cases .c-case-body{padding:22px 24px 20px;gap:0}
.p-cases .c-case h3{font-size:21px;font-weight:600;letter-spacing:-.03em;line-height:1.18}
.p-cases .c-case--wide h3{font-size:clamp(22px,1.9vw,27px)}
.p-cases .c-case-ind{font-size:13px;color:#a8b29f}
.p-cases .c-case-foot.c-case-foot-go{padding-top:12px;border-top:1px solid #dfcca51f;justify-content:flex-start}
.p-cases .c-case-go{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#d8c9a3;transition:color .25s}
.p-cases .c-case-go i{font-style:normal;font-size:15px;color:var(--acc);transition:transform .35s cubic-bezier(.2,.75,.2,1)}
.p-cases .c-case:hover .c-case-go{color:var(--gold)}
.p-cases .c-case:hover .c-case-go i{transform:translate(3px,-3px)}

/* фильтр — латунные жетоны */
.p-cases .c-filter label{background:#0f1c16cc;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:border-color .2s,color .2s,background .2s}

/* ── ХАБ · B03: горизонт со станцией связи ──────────────────────────── */
.p-cases .c-next{overflow:hidden;isolation:isolate}
.p-cases .c-next:after{content:'';position:absolute;z-index:0;left:0;right:0;bottom:0;height:78%;pointer-events:none;
  background:url(../img/contact-art-v2-1280.webp) 64% 100%/cover no-repeat;opacity:.42;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 58%);mask-image:linear-gradient(180deg,transparent,#000 58%)}
.p-cases .c-next-links a{transition:background .25s,padding .35s cubic-bezier(.2,.75,.2,1)}
.p-cases .c-next-links a:hover{background:linear-gradient(90deg,#d9bd7e14,transparent 70%);padding-left:14px}
.p-cases .c-next-links{background:#0b151299;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}

/* ── КЕЙС · первый экран с монитором проекта ─────────────────────────── */
.p-case #b01.c-has-monitor>.s-wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);column-gap:5%;align-items:center}
.p-case #b01.c-has-monitor>.s-wrap>.s-breadcrumb{grid-column:1/-1}
.p-case #b01.c-has-monitor .s-hero-copy{width:auto;grid-column:1}
.p-case #b01.c-has-monitor h1{font-size:clamp(38px,3.7vw,58px)}
.p-case #b01.c-has-monitor:before{background:linear-gradient(90deg,#0b1512 4%,#0b1512f0 40%,#0b1512a8 62%,#0b151266 100%),linear-gradient(0deg,#0b1512 2%,transparent 30%)}
.p-case .c-hero-monitor{grid-column:2;margin:0;padding:22px 0 40px;position:relative;z-index:4}
.p-case .c-shot-monitor{position:relative;padding:10px 11px 13px;border:1px solid #d9bd7e5c;border-radius:11px;
  background:linear-gradient(160deg,#25342b,#0c1511 60%,#111d17);
  box-shadow:0 50px 90px -20px #000e,0 0 0 1px #000a,inset 0 1px 0 #f3e3be22,0 0 80px -10px #e7b96e2e;
  transform:perspective(1600px) rotateY(-7deg) rotateX(2deg);transform-origin:70% 50%;transition:transform .8s cubic-bezier(.2,.75,.2,1)}
.p-case .c-hero-monitor:hover .c-shot-monitor{transform:perspective(1600px) rotateY(-2deg) rotateX(0)}
.p-case .c-shot-monitor-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 4px 9px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#d9c79f}
.p-case .c-shot-monitor-top .c-rec{display:inline-flex;align-items:center;gap:8px}
.p-case .c-shot-monitor-top .c-rec:before{content:'';width:7px;height:7px;border-radius:50%;background:#e2603f;box-shadow:0 0 10px #e2603f;animation:c-rec 1.6s steps(2,jump-none) infinite}
.p-case .c-shot-monitor-top .c-rec:after{content:'▶ Кассета'}
.p-case .c-shot-monitor-top .c-dots{display:flex;gap:6px}
.p-case .c-shot-monitor-top .c-dots i{width:7px;height:7px;border-radius:50%;border:1px solid #d9bd7e80}
.p-case .c-shot-monitor-screen{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:2.05;background:#0e1a14;box-shadow:inset 0 0 0 1px #000c}
.p-case .c-shot-monitor-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:0 0;filter:saturate(.92) contrast(1.03)}
.p-case .c-shot-monitor-screen:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 3px,#0206041f 3px 4px),radial-gradient(ellipse at 50% 50%,transparent 58%,#0008 100%)}
.p-case .c-shot-monitor-screen:after{content:'';position:absolute;left:0;right:0;top:0;height:34%;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,#f6e3bd1f 50%,transparent);transform:translateY(-110%);animation:c-sweep 7s linear infinite}
.no-vhs .p-case .c-shot-monitor-screen:before,body.no-vhs.p-case .c-shot-monitor-screen:before{background:radial-gradient(ellipse at 50% 50%,transparent 58%,#0008 100%)}

/* ── КЕЙС · B02: маршрут этапов ──────────────────────────────────────── */
.p-case #b02{isolation:isolate}
.p-case #b02:before{content:'';position:absolute;z-index:-1;right:-2%;top:18px;width:min(44%,560px);aspect-ratio:1.5;pointer-events:none;
  background:url(../img/orbital-station-768.webp) center/contain no-repeat;mix-blend-mode:lighten;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 45%,transparent 78%);mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 45%,transparent 78%);
  animation:c-drift 26s ease-in-out infinite alternate}
@keyframes c-drift{to{transform:translate(-18px,10px) rotate(-3deg)}}
.p-case #b02 .c-head h2{font-size:clamp(38px,4.4vw,66px);letter-spacing:-.035em}
.p-case .c-stage{position:relative}
.p-case .c-stage-head{align-items:center;gap:18px;margin-bottom:12px}
.p-case .c-stage-num{display:grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid #d9bd7e8c;
  background:radial-gradient(circle at 35% 30%,#2c3b30,#0e1a14 70%);box-shadow:0 0 0 5px #0b1512,0 0 26px -6px #e7b96e66;font-size:12px;letter-spacing:.06em;color:var(--gold)}
.p-case .c-stage-intro,.p-case .c-stage>.c-body{margin-left:64px}
.p-case .c-stage:not(:last-of-type):before{content:'';position:absolute;left:23px;top:46px;bottom:-98px;width:1px;
  background:linear-gradient(180deg,#d9bd7e80,#d9bd7e1a 70%,transparent)}
.p-case .c-stage+.c-stage{border-top:0;padding-top:44px}
.p-case .c-card{position:relative;overflow:hidden;border-color:#cbbb9242;transition:transform .4s cubic-bezier(.2,.75,.2,1),border-color .3s,box-shadow .4s}
.p-case .c-card:before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent 75%);opacity:.7}
.p-case .c-card:hover{transform:translateY(-3px);border-color:#d9bd7e80;box-shadow:0 26px 50px -28px #000}
.p-case .c-rows li,.p-case .c-result li{transition:background .25s}
.p-case .c-rows li:hover,.p-case .c-result li:hover{background:linear-gradient(90deg,#d9bd7e0d,transparent 80%)}
.p-case .c-result li:before{content:'';top:22px;left:2px;width:8px;height:8px;border:1px solid var(--gold);transform:rotate(45deg);background:#e7b96e33}

/* ── КЕЙС · B04: кассеты галереи — тот же монитор, что на первом экране ── */
.p-case .c-frame{border-color:#d9bd7e55;border-radius:10px;background:linear-gradient(160deg,#22312a,#0b1410 62%,#101b15);
  box-shadow:0 40px 70px -30px #000e,inset 0 1px 0 #f3e3be1c,0 0 60px -24px #e7b96e40}
.p-case .c-frame .c-tag{display:inline-flex;align-items:center;gap:8px;border-color:#e3d1a73d;background:#07100cc4;letter-spacing:.16em}
.p-case .c-frame .c-tag:before{content:'';width:6px;height:6px;border-radius:50%;background:#e2603f;box-shadow:0 0 8px #e2603fcc}
.p-case .c-frame img{border-radius:3px}

/* ── КЕЙС · B06: горизонт со станцией связи ─────────────────────────── */
.p-case #b06{overflow:hidden;isolation:isolate}
.p-case #b06:before{content:'';position:absolute;z-index:-1;left:0;right:0;bottom:0;height:70%;pointer-events:none;
  background:url(../img/contact-art-v2-1280.webp) 70% 100%/cover no-repeat;opacity:.34;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);mask-image:linear-gradient(180deg,transparent,#000 60%)}

/* ── движение ────────────────────────────────────────────────────────── */
@keyframes c-sweep{0%{transform:translateY(-110%)}60%,100%{transform:translateY(330%)}}
@keyframes c-rec{to{opacity:.25}}
@media(prefers-reduced-motion:reduce){
  .p-cases .c-case,.p-cases .c-case-art:before,.p-cases .c-case-screen,.p-cases .c-case-patch,.p-cases .c-case-phones img,.p-cases .c-case-go i,
  .p-cases .c-next-links a,.p-case .c-shot-monitor,.p-case .c-card{transition:none!important}
  .p-cases .c-case-screen:after,.p-case .c-shot-monitor-screen:after{animation:none!important;display:none}
  .p-cases .c-case-n:before,.p-case .c-shot-monitor-top .c-rec:before{animation:none!important}
  .p-case #b02:before{animation:none!important}
  .p-cases .c-case:hover,.p-cases .c-case:focus-within{transform:none}
}

/* ── адаптив ─────────────────────────────────────────────────────────── */
@media(max-width:1150px){
  .p-cases .c-case--wide{grid-column:span 2}
  .p-case #b01.c-has-monitor>.s-wrap{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);column-gap:4%}
}
@media(max-width:800px){
  .p-cases #b02:before{width:120%;right:-40%;height:420px;opacity:.38}
  .p-case #b01.c-has-monitor>.s-wrap{display:block}
  .p-case .c-hero-monitor{padding:4px 0 34px}
  .p-case .c-shot-monitor{transform:none}
  .p-case .c-hero-monitor:hover .c-shot-monitor{transform:none}
  .p-case .c-stage-intro,.p-case .c-stage>.c-body{margin-left:0}
  .p-case .c-stage:not(:last-of-type):before{display:none}
  .p-case .c-stage+.c-stage{border-top:1px solid var(--line)}
  .p-case #b02:before{width:50%;right:-4%;top:-14px;opacity:.26}
  .p-case .c-logo-plate{max-width:220px;min-height:0}
}
@media(max-width:560px){
  .p-cases .c-case--wide{grid-column:auto}
  .p-cases .c-case-art{height:214px}
  .p-cases .c-case-screen,.p-cases .c-case--wide .c-case-screen{left:6%;right:6%;top:50px}
  .p-cases .c-case-patch,.p-cases .c-case--wide .c-case-patch{left:50%;right:auto;transform:translateX(-50%);width:min(64%,220px);bottom:22px}
  .p-cases .c-case--wide:hover .c-case-patch{transform:translateX(-50%) translateY(-5px)}
  .p-cases .c-case--wide .c-case-art[data-scene=courier],.p-cases .c-case--wide .c-case-art[data-scene=ship]{--scene-size:118% auto}
  .p-cases .c-case--wide .c-case-art[data-scene=station]{--scene-size:96% auto;--scene-pos:50% 0%}
  .p-cases .c-case--wide h3{font-size:21px}
  .p-case .c-stage-num{width:40px;height:40px;font-size:11px}
  .p-case .c-shot-monitor{padding:8px 8px 10px;border-radius:9px}
}