/*
 * Страница «VK Реклама» в плакатном дизайн-коде главной: здесь только то, чего нет в /home-poster.css —
 * хлебные крошки, заголовок первого экрана в четыре строки, блок «момент решения», блок «Команда»
 * со страницы стоматологии и блок «VK Реклама ≠ продажи» по присланным макетам. Остальные блоки собраны
 * из готовых компонентов главной (.pains, .audit, .formats, .services, .cases, .reviews, .faq, .brief).
 */

/* ---------- хлебные крошки (как на странице стоматологии) ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding-top:18px;font:700 12px/1.3 var(--text);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none;background:linear-gradient(var(--lime),var(--lime)) 0 80%/0 .55em no-repeat;transition:background-size .2s,color .2s}
.crumbs a:hover{color:var(--ink);background-size:100% .55em}
.crumbs > span:last-child{color:var(--ink)}

/* ---------- первый экран: заголовок в четыре строки, поэтому кегль чуть меньше ---------- */
.hero--vk .hero__title{font-size:clamp(46px,8.2vw,124px)}
.js .hero--vk.is-go .hl--4{transition-delay:.27s}
.hero--vk .hero__quote{top:calc(62% + 30px)}
.hero--vk .sticker__num{align-items:baseline}

/* ---------- первый экран на узких экранах ---------- */
@media (max-width:980px){
  .hero--vk .hero__quote{top:auto}
}

/* ---------- в тесте отвечает тот же человек, что и в первом экране ---------- */
.quiz__pic--vk{background-image:url(/assets/home/nikita.webp);background-position:50% 4%;background-size:128%}

/* ---------- «Реклама появляется в момент решения»: собран по присланному макету —
 * крупный заголовок с маркерной полосой, три сцены на общем бумажном поле, рисованные
 * стрелки и подписи, нижняя контрастная полоса с диагональными стыками ---------- */
/* надписи «Как это работает» над заголовком больше нет (убрана по просьбе владельца): ее высота и отступ
   до заголовка перешли в верхний отступ секции, чтобы заголовок остался на прежнем месте */
.flow{position:relative;isolation:isolate;padding:calc(clamp(30px,3.2vw,52px) + clamp(10px,.82vw,12px) + clamp(10px,1.2vw,18px)) 0 0;overflow-x:clip;
  /* подписи уходят в свободное поле по краям макета, а на узком десктопе упираются в край экрана */
  --note-edge:calc(14px - var(--g) - max(0px, (100vw - 1536px) / 2))}
/* едва заметная печатная фактура поверх бумаги */
.flow::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px 140px}
.flow__in{max-width:1536px;margin-inline:auto;padding-inline:var(--g)}

/* ---------- шапка блока ---------- */
.flow__head{display:grid;grid-template-columns:minmax(0,1.62fr) clamp(280px,23vw,366px) clamp(148px,13vw,198px);gap:clamp(18px,2.2vw,40px);align-items:end;margin-top:0}
.br-m{display:none}
.flow__h{margin:0;font:900 clamp(40px,7.5vw,118px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.016em}
@media (min-width:901px){.flow__h{white-space:nowrap}}
.flow__mark{position:relative;display:inline-block}
.flow__mark::before{content:"";position:absolute;z-index:-1;left:-.05em;right:-.16em;top:.15em;bottom:.03em;background:var(--lime);transform:skewX(-3deg) rotate(-.9deg)}
.flow__lead{margin:0 0 clamp(6px,.8vw,14px);font-size:clamp(14px,1.14vw,17px);line-height:1.5}

/* синий лист-подпись в правом верхнем углу */
.flow__tag{position:relative;align-self:start;justify-self:end;margin:0;width:clamp(148px,13vw,196px);aspect-ratio:1/.98;display:grid;align-content:center;padding:0 clamp(12px,1.2vw,20px);background:var(--blue);color:var(--ink);font:900 clamp(16px,1.72vw,27px)/1.04 var(--display);text-transform:uppercase;letter-spacing:.004em;rotate:-11deg}
.flow__ticks{position:absolute;right:-30%;top:28%;width:clamp(22px,2.2vw,32px);height:auto;stroke:var(--ink);stroke-width:3;stroke-linecap:round;fill:none;rotate:11deg}

/* ---------- три этапа ---------- */
.flow__steps{position:relative;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,46px);margin:clamp(34px,4.4vw,74px) 0 0;padding:0}
.step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"n h" "n t";column-gap:clamp(10px,1.1vw,18px);align-content:start}
.step__n{grid-area:n;margin:0;font:900 clamp(44px,5.7vw,88px)/.74 var(--display);letter-spacing:-.02em;font-variant-numeric:lining-nums}
.step__h{grid-area:h;margin:0 0 10px;font:900 clamp(19px,2vw,31px)/.9 var(--display);text-transform:uppercase;letter-spacing:.005em}
.step__txt{grid-area:t;margin:0;max-width:230px;font-size:clamp(13px,1.12vw,17px);line-height:1.45}
.step__arrow{position:absolute;z-index:2;top:-12px;left:74%;width:calc(26% + clamp(18px,2.4vw,46px) - 12px);height:auto}

/* ---------- сцены: телефон, листы, человек ---------- */
.flow__scene{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,46px);align-items:end;margin-top:clamp(-30px,-1.7vw,-6px)}
.scene{position:relative;display:flex;align-items:flex-end;min-width:0}
.art{display:block;height:auto}
.art--phone{width:min(108%,376px);margin-left:-9%;margin-bottom:-76px;rotate:-2deg}
.art--man{width:min(97%,392px);margin-left:auto;margin-right:-1%;margin-bottom:-66px}

.scene--sheets{justify-content:center;padding-bottom:clamp(14px,1.8vw,30px)}
.art--cards{width:min(118%,460px);margin-inline:-9%}

/* ---------- рукописные подписи: присланные картинки, каждая рядом со своей сценой ---------- */
.note{position:absolute;z-index:3;height:auto;pointer-events:none}
.note--me{left:max(-13%, var(--note-edge));top:7%;width:clamp(80px,8.6vw,136px)}
.note--warm{right:-7%;bottom:4%;width:clamp(100px,11vw,176px)}
.note--now{right:max(-11%, var(--note-edge));top:-20%;width:clamp(72px,7.6vw,120px)}

/* ---------- нижняя полоса ---------- */
.flow__band{position:relative;z-index:3;display:grid;grid-template-columns:39fr 35fr 26fr;min-height:clamp(140px,13.6vw,216px);margin-top:clamp(14px,1.8vw,28px)}
.band{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"h p" "s p";align-content:center;column-gap:clamp(12px,1.7vw,30px);padding:clamp(18px,2.2vw,34px) clamp(16px,2vw,32px)}
.band h3{grid-area:h;margin:0;font:900 clamp(24px,3.75vw,60px)/.85 var(--display);text-transform:uppercase;letter-spacing:.004em}
.band p{grid-area:p;grid-row:1/3;align-self:center;margin:0;font-size:clamp(12px,1.05vw,15px);line-height:1.45;max-width:34ch}
.band__sign{grid-area:s;width:clamp(44px,4vw,76px);height:auto;margin-top:clamp(8px,1vw,16px);stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.band--ink{background:var(--ink);color:var(--paper);padding-left:max(var(--g),2.6vw);clip-path:polygon(0 0,100% 0,calc(100% - 58px) 100%,0 100%)}
.band--blue{background:var(--blue);color:#fff;margin-left:-58px;padding-left:calc(clamp(16px,2vw,32px) + 58px);clip-path:polygon(58px 0,100% 0,calc(100% - 58px) 100%,0 100%)}
.band--act{grid-template-columns:minmax(0,1fr);grid-template-areas:"b" "p";align-content:center;gap:clamp(10px,1.2vw,18px);background:var(--paper);margin-left:-58px;padding-left:calc(clamp(16px,2vw,32px) + 58px);padding-right:max(var(--g),2.6vw);clip-path:polygon(58px 0,100% 0,100% 100%,0 100%)}
.band--act p{grid-area:p;grid-row:auto;max-width:26ch}
.band__btn{grid-area:b;justify-self:start;display:inline-flex;align-items:center;gap:clamp(10px,1.2vw,18px);padding:clamp(11px,1.1vw,16px) clamp(14px,1.4vw,22px);background:var(--sheet);color:var(--ink);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);font:800 clamp(13px,1.08vw,17px)/1 var(--text);text-decoration:none;rotate:-1deg;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.band__btn svg{width:1.15em;height:1.15em;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.band__btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}

/* ---------- узкий десктоп ---------- */
@media (max-width:1180px){
  .flow__head{grid-template-columns:minmax(0,1fr) clamp(240px,26vw,320px);grid-template-areas:"h tag" "lead tag"}
  .flow__h{grid-area:h}
  .flow__lead{grid-area:lead;margin-top:14px}
  .flow__tag{grid-area:tag;align-self:center}
  .step__txt{max-width:none}
  .step__arrow{left:76%;width:calc(24% + clamp(18px,2.2vw,40px) - 10px)}
  .flow__steps{margin-top:clamp(24px,3.4vw,52px)}
}

/* ---------- телефон и планшет: та же композиция в две колонки — текст слева, сцена справа ---------- */
@media (max-width:900px){
  /* 20px секции + 10px бывшей надписи + промежуток сетки, который стоял между ней и заголовком */
  .flow{padding-top:calc(30px + clamp(44px,11.5vw,100px))}
  .br-m{display:inline}

  /* шапка: заголовок в четыре строки слева, синий лист и лид — справа от него */
  .flow__head{grid-template-columns:minmax(0,1fr) 44%;grid-template-areas:"h tag" "h lead";gap:0 clamp(8px,2.6vw,20px);align-items:start;margin-top:clamp(-10px,-1.6vw,-4px)}
  .flow__h{grid-area:h;white-space:nowrap;font-size:clamp(32px,10.2vw,86px)}
  .flow__tag{grid-area:tag;justify-self:start;width:86%;aspect-ratio:auto;padding:clamp(9px,2.6vw,18px) clamp(8px,2.2vw,16px);text-align:center;rotate:-2.4deg;font-size:clamp(13px,3.55vw,26px);line-height:1.1}
  .flow__lead{grid-area:lead;margin:clamp(12px,3.4vw,24px) 0 0;font-size:clamp(11.5px,3vw,16px);line-height:1.42}
  .flow__ticks{right:-11%;top:14%;width:clamp(13px,3.4vw,26px);stroke-width:4;rotate:2.4deg}

  /* этапы и сцены идут парами: слева номер с текстом, справа своя картинка */
  .flow__in{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);column-gap:clamp(8px,2.4vw,20px);row-gap:clamp(44px,11.5vw,100px)}
  .flow__head{grid-column:1/-1}
  .flow__steps,.flow__scene{display:contents}
  .step{grid-column:1;column-gap:clamp(9px,2.4vw,16px)}
  .step:nth-child(1){translate:0 clamp(28px,8.77vw,70px)}
  .scene{grid-column:2;align-items:flex-start;justify-content:flex-end}
  .step:nth-child(1),.scene:nth-child(1){grid-row:2}
  .step:nth-child(2),.scene:nth-child(2){grid-row:3}
  .step:nth-child(3),.scene:nth-child(3){grid-row:4}
  .step__n{font-size:clamp(34px,9.2vw,72px)}
  .step__h{margin-bottom:8px;font-size:clamp(16px,4.3vw,34px)}
  .step__txt{font-size:clamp(12px,3.3vw,17px);line-height:1.4}
  /* та же рисованная стрелка, только повернута вниз — от этапа к следующему */
  .step__arrow{top:100%;width:clamp(46px,12vw,86px);transform-origin:50% 50%}
  .step:nth-child(1) .step__arrow{left:calc(clamp(3px,1vw,10px) + 61.3%);margin-top:calc(clamp(8px,2.6vw,20px) - 11.3% - clamp(28px,8.77vw,70px));rotate:99deg}
  .step:nth-child(2) .step__arrow{left:calc(clamp(3px,1vw,10px) + 64.55%);margin-top:clamp(8px,2.6vw,20px);rotate:123deg}

  .art--phone{width:min(100%,300px);margin:0 0 0 auto;translate:5.25% 5.35%;rotate:-2deg}
  .art--cards{width:min(126%,360px);margin:0 -2% 0 -24%}
  .scene--man{align-items:flex-end}
  .art--man{width:min(118%,320px);margin:0 0 clamp(-30px,-6vw,-12px) auto}
  .scene--sheets{padding-bottom:0}
  .scene:nth-child(1),.scene:nth-child(2){align-self:start}
  .scene:nth-child(1){margin-top:clamp(-64px,-8vw,-28px)}
  .scene:nth-child(2){margin-top:clamp(-40px,-6.4vw,-16px)}
  .scene:nth-child(3){margin-top:clamp(-50px,-6.4vw,-20px)}

  /* рукописные подписи остаются рядом со своими сценами */
  .note--me{left:-10%;right:auto;top:clamp(-16px,-2.2vw,-6px);width:clamp(62px,16vw,116px)}
  .note--warm{right:-4%;bottom:0;width:clamp(74px,19vw,140px)}
  .note--now{right:max(-9%, calc(6px - var(--g)));top:0;width:clamp(54px,14vw,102px)}

  /* полоса: две плашки рядом сразу под человеком, в каждой абзац справа от заголовка, кнопка — строкой под ними */
  .flow__band{grid-template-columns:48fr 52fr;margin-top:clamp(8px,2.4vw,18px)}
  .band{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"h p" "h s";align-content:center;align-items:start;column-gap:clamp(8px,2.2vw,22px);row-gap:6px;padding:clamp(12px,3.4vw,26px) clamp(9px,2.6vw,22px)}
  .band h3{font-size:clamp(17px,4.6vw,40px)}
  .band p{grid-area:p;grid-row:auto;align-self:start;max-width:none;font-size:clamp(10px,2.7vw,14px);line-height:1.36}
  .band__sign{grid-area:s;width:clamp(30px,8vw,60px);margin-top:0}
  .band--ink,.band--blue,.band--act{clip-path:none;margin-left:0}
  .band--ink{padding-left:var(--g)}
  .band--blue{padding-right:var(--g)}
  .band--act{grid-column:1/-1;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"b p";align-content:center;align-items:center;gap:clamp(10px,3vw,20px);padding:clamp(14px,4vw,26px) var(--g)}
  .band--act p{grid-area:p;padding-left:clamp(10px,3vw,20px);border-left:2px solid var(--ink)}
  .band__btn{padding:clamp(10px,2.8vw,16px) clamp(11px,3vw,20px);font-size:clamp(12px,3.2vw,17px);box-shadow:4px 4px 0 var(--ink)}
}
@media (max-width:430px){
  .band__btn{gap:8px}
  .band--act{gap:10px}
}

/* ---------- «Команда» — тот же блок, что на странице стоматологии: правила перенесены из /stom-marketing/stom-poster.css
 * («13. team» и «Команда» по присланному референсу) без изменений. На десктопе — бумажная секция во всю ширину,
 * на телефоне — лаймовая секция с колодой карточек главной (.crew-m в /home-poster.css). Портреты и скотч лежат
 * в /stom-marketing/img/ — эти файлы общие для двух страниц. Карусель ведет /services/vk-reklama/vk-poster.js ---------- */

/* на странице стоматологии это задано для всей страницы, здесь — только внутри блока */
.team--ref em{font-style:normal}
.team--ref dl,.team--ref dd,.team--ref figure{margin:0}
.team--ref .h2{line-height:.96}
.team--ref .ink-plate{background:var(--ink);color:var(--lime);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

.team__head{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.team__side{display:grid;gap:22px}
.sd-team__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:2px solid var(--ink)}
.sd-team__stats > div{padding:14px 16px 0 0}
.sd-team__stats > div + div{padding-left:18px;border-left:2px solid var(--ink)}
.sd-team__stats dt{font:900 clamp(60px,6vw,96px)/.84 var(--display);letter-spacing:-.01em}
.sd-team__stats dd{margin-top:8px;font:700 13px/1.3 var(--text);text-transform:uppercase;letter-spacing:.08em}
.sd-team-carousel{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4.6fr);grid-template-rows:auto 1fr;grid-template-areas:"people slides" "status slides";column-gap:clamp(28px,3.4vw,64px);align-items:start}
/* the stage: cut-out portraits standing on an ink rule. Each button is one narrow slot (so the photos may overlap
   while every slot stays clickable), the photo inside it is drawn wider than the slot and ignores the pointer */
.sd-team-carousel__people{--sh:clamp(158px,14.4vw,205px);grid-area:people;position:relative;height:var(--sh);margin:clamp(52px,5vw,80px) 12px 0 0;clip-path:inset(-90px -60px 0 -60px)}
/* линия-«пол» под людьми начинается ровно у края первого портрета, а не у края колонки */
.sd-team-carousel__people::after{content:"";position:absolute;z-index:11;left:2.6%;right:0;bottom:0;height:6px;background:var(--ink)}
.sd-team-carousel__person{position:absolute;top:-70px;bottom:0;left:calc(15.5% + var(--i) * 14.4%);width:14%;translate:-50% 0;z-index:calc(6 - var(--i));margin:0;padding:0;border:0;background:transparent;cursor:pointer;filter:grayscale(1) contrast(1.06) brightness(1.02);transform-origin:50% 100%;transition:transform .5s cubic-bezier(.16,1,.3,1),filter .35s ease;-webkit-tap-highlight-color:transparent}
.sd-team-carousel__person:nth-child(4),.sd-team-carousel__person:nth-child(5){z-index:4}
.sd-team-carousel__person img{position:absolute;left:50%;bottom:0;height:min(282px,calc(var(--sh) * var(--hh) * 1.38));width:auto;max-width:none;aspect-ratio:var(--ar);translate:-50% 20%;object-fit:contain;object-position:50% 100%;pointer-events:none;-webkit-user-drag:none;user-select:none}
@media (hover:hover){.sd-team-carousel__person:hover{filter:grayscale(0) contrast(1.04)}}
.sd-team-carousel__person[aria-pressed="true"]{z-index:10;transform:scale(1.03);filter:grayscale(0) contrast(1.04) drop-shadow(9px 0 0 var(--ink))}
.sd-team-carousel__person:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
/* the counter is only for screen readers — nothing is counted on screen */
.sd-team-carousel__status{grid-area:status;position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sd-team-carousel__slides{grid-area:slides;position:relative;z-index:12;isolation:isolate;margin:clamp(28px,2.6vw,44px) 12px 12px 0;padding:clamp(22px,2vw,30px) clamp(20px,2vw,32px) clamp(24px,2vw,30px)}
.sd-team-carousel__slides::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sheet);border:3px solid var(--ink);box-shadow:12px 12px 0 var(--ink);transform:rotate(-.5deg)}
.sd-team-slide:not([hidden]){animation:panel-in .4s cubic-bezier(.16,1,.3,1)}
.sd-team-slide__portrait{display:none}
.sd-team-slide__role{display:inline-block;padding:6px 10px 5px;background:var(--lime);border:2px solid var(--ink);font:700 12px/1.25 var(--text);text-transform:uppercase;letter-spacing:.07em;transform:rotate(-1.5deg)}
.sd-team-slide h3{margin-top:16px;font:900 clamp(40px,3.6vw,58px)/.88 var(--display);text-transform:uppercase;letter-spacing:-.004em;text-wrap:balance}
.sd-team-slide__focus{margin-top:16px;padding-top:12px;border-top:2px solid var(--ink);font:800 clamp(22px,1.8vw,28px)/1.02 var(--display);text-transform:uppercase}
.sd-team-slide__description{margin-top:9px;font-size:16px;line-height:1.5;color:var(--muted);max-width:40ch}

@media (max-width:980px){
  .team__head{grid-template-columns:1fr}
  /* the carousel is a desktop component; on phones the team is the deck slider of the home page (.crew-m in /home-poster.css) */
  .sd-team-carousel{display:none}
  .deck__txt{margin:10px 0 0;padding-top:8px;border-top:2px solid var(--ink);font:500 13px/1.4 var(--text);color:#3B3C35}
  .deck__zone b{font-size:23px}
}

/* ---------- «Команда» по присланному референсу (десктоп): бумажная секция во всю ширину, заголовок
 * в три строки с лаймом на черной плашке, два счетчика-стикера, ряд сотрудников на лаймовой рваной
 * подложке со срезом снизу, карточка со скотчем. Разметка и скрипты карусели те же; на телефоне —
 * прежняя лаймовая верстка с колодой карточек ---------- */
.sd-team-carousel__tape{display:none}

@media (min-width:981px){
  .team--ref{--wide:var(--display);position:relative;isolation:isolate;height:56.5vw;padding:0;background:var(--paper);color:var(--ink);overflow:hidden}
  /* едва заметная печатная фактура */
  .team--ref::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px 140px}
  .team--ref .wrap{position:static;max-width:none;padding:0}


  /* заголовок: три строки, плашка только на последней */
  .team--ref .team__head{display:block;margin:0}
  .team--ref .h2{position:absolute;left:3.75vw;top:5.1vw;margin:0;font:900 8.1vw/.92 var(--wide);letter-spacing:.012em;text-transform:uppercase;text-wrap:initial;white-space:nowrap}
  /* последняя строка — лайм на черной плашке во всю ширину заголовка, как в макете */
  .team--ref .h2 .ink-plate{display:block;margin-top:.06em;padding:.02em .2em .04em .24em}
  /* печатная фактура на буквах и плашке */
  .team--ref .h2::after{content:"";position:absolute;inset:-.1em -.2em;z-index:1;pointer-events:none;opacity:.2;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}

  /* лид и счетчики справа */
  .team--ref .team__side{position:absolute;left:60.4vw;top:7.2vw;width:31.2vw;display:block}
  .team--ref .lead{margin:0;max-width:none;font-size:1.3vw;line-height:1.5}
  .team--ref .sd-team__stats{position:absolute;left:0;top:8.3vw;display:flex;gap:1.25vw;margin:0;border:0}
  .team--ref .sd-team__stats > div{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:15.75vw;height:12.25vw;margin:0;padding:1.1vw 1.3vw 1.1vw;border:0;background:var(--lime);rotate:-1deg}
  .team--ref .sd-team__stats > div + div{width:14.25vw;padding-left:1.4vw;border:.12vw solid var(--ink);background:var(--sheet);rotate:1deg}
  .team--ref .sd-team__stats dt{font:900 9.4vw/.78 var(--wide);letter-spacing:-.01em}
  .team--ref .sd-team__stats dd{margin-top:.8vw;padding-top:.55vw;border-top:.1vw solid var(--ink);font:800 1.05vw/1.2 var(--text);letter-spacing:.02em;text-transform:uppercase}

  /* сцена: лаймовая подложка с зубцами над головами, ряд сотрудников; вся группа срезана снизу косой линией, как в макете */
  .team--ref .sd-team-carousel{position:absolute;left:0;right:0;top:29vw;height:23.5vw;display:block;margin:0}
  .team--ref .sd-team-carousel__people{position:absolute;left:0;top:0;width:70vw;height:23.5vw;margin:0;overflow:visible;clip-path:polygon(-2vw -6vw,102% -6vw,100% 91%,0 78%)}
  .team--ref .sd-team-carousel__people::before{content:"";position:absolute;z-index:0;left:1.4%;top:.5vw;width:98.6%;height:23vw;background:var(--lime);clip-path:polygon(0 24%,7% 13%,14.6% 0,22% 13%,30% 0,38% 13%,45.6% 0,53% 13%,61% 0,69% 13%,76.6% 0,84% 13%,92% 0,100% 11%,100% 100%,0 100%)}
  .team--ref .sd-team-carousel__people::after{display:none}
  .team--ref .sd-team-carousel__person{top:auto;bottom:0;left:calc(10.25vw + var(--i) * 10.85vw);width:13vw;height:23.5vw;translate:-50% 0;transform:none;z-index:calc(6 - var(--i));filter:grayscale(1) contrast(1.05) drop-shadow(.16vw 0 0 #fff) drop-shadow(-.16vw 0 0 #fff) drop-shadow(0 .16vw 0 #fff) drop-shadow(0 -.16vw 0 #fff);transition:filter .3s ease}
  .team--ref .sd-team-carousel__person:nth-child(4),.team--ref .sd-team-carousel__person:nth-child(5){z-index:4}
  .team--ref .sd-team-carousel__person::before,.team--ref .sd-team-carousel__person::after{display:none}
  /* портреты одного роста: головы у верха подложки, низ уходит под срез */
  .team--ref .sd-team-carousel__person img{height:21vw;max-height:none;bottom:.6vw;translate:-50% 0}
  @media (hover:hover){.team--ref .sd-team-carousel__person:hover{filter:grayscale(0) contrast(1.02) drop-shadow(.16vw 0 0 #fff) drop-shadow(-.16vw 0 0 #fff) drop-shadow(0 .16vw 0 #fff) drop-shadow(0 -.16vw 0 #fff)}}
  .team--ref .sd-team-carousel__person[aria-pressed="true"]{z-index:10;transform:none;filter:grayscale(0) contrast(1.02) drop-shadow(.16vw 0 0 #fff) drop-shadow(-.16vw 0 0 #fff) drop-shadow(0 .16vw 0 #fff) drop-shadow(0 -.16vw 0 #fff)}

  .team--ref .sd-team-carousel__slides{position:absolute;left:70vw;top:3vw;width:28vw;min-height:18vw;margin:0;padding:2.2vw 1.9vw 2vw;z-index:12;rotate:-1.5deg}
  .team--ref .sd-team-carousel__slides::before{transform:none;border-width:.12vw;box-shadow:.55vw .55vw 0 var(--ink)}
  /* скотч — присланная картинка поверх верхнего края карточки */
  .team--ref .sd-team-carousel__tape{display:block;position:absolute;z-index:2;left:4.2vw;top:-1.3vw;width:7.2vw;height:auto;pointer-events:none}
  .team--ref .sd-team-slide__role{padding:.5vw .8vw .45vw;border-width:.1vw;font-size:.85vw;letter-spacing:.06em;transform:none}
  /* имя в одну строку: при 3.15vw самое длинное («Максим Раззоренов») влезает в поля карточки (28vw − 2×1.9vw);
     высота строки 3.15vw — та же, что была при 3.5vw/.9, поэтому остальное в карточке не сдвигается */
  .team--ref .sd-team-slide h3{margin-top:1.4vw;font:900 3.15vw/1 var(--wide);letter-spacing:0;text-wrap:initial;white-space:nowrap}
  .team--ref .sd-team-slide__focus{margin-top:1.3vw;padding-top:1vw;border-top-width:.1vw;font:800 1.55vw/1 var(--wide)}
  .team--ref .sd-team-slide__description{margin-top:.7vw;font-size:1vw;line-height:1.5;max-width:none}
}

/* ---------- «VK Реклама ≠ продажи» (#system) по двум присланным макетам — десктоп 1672×941 и телефон 945×1672.
 * Набор элементов один: заголовок в две строки с лаймовым мазком вместо «≠», рупор, лид в два кегля, ноутбук
 * с CRM-аналитикой вместо карточки-таблицы, две наклейки, строки 01 и 02 с заметками на полях, черная полоса
 * с подписью «Рост там, где система». Картинки — присланные (/assets/vk-reklama/system/): обрезаны только прозрачные
 * поля, у подписи черные штрихи перекрашены в бумажный цвет (в макете она белая на черной полосе), для телефона
 * у рупора убрана синяя плашка (в мобильном макете вместо нее синяя полоса под ноутбуком).
 * Десктоп (от 981px): бумажная секция во всю ширину, все расставлено в vw. Телефон и планшет: обычный поток,
 * лид в левой колонке, рупор справа привязан к ноутбуку и уходит рукой за экран. ---------- */

/* ---------- общее ---------- */
.open--ref{position:relative;isolation:isolate}
/* едва заметная печатная фактура */
.open--ref::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px 140px}
/* карточки-таблицы и третьей наклейки «Доступ к цифрам 24/7» в макетах нет */
.open--ref .report,.open--ref .sticker--live{display:none}
/* знак «≠» остается в тексте для читалок, на экране вместо него картинка */
.open--ref .neq__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.open--ref .neq__img{display:inline-block;height:auto;max-width:none}
/* во второй строке макет без выделения */
.open--ref .commit li:nth-child(2) p b{font-weight:inherit;color:inherit}

/* ---------- телефон и планшет ---------- */
@media (max-width:980px){
  .open--ref{padding-block:clamp(28px,6vw,56px) clamp(30px,6vw,56px)}
  .open--ref .open__head,.open--ref .open__grid{display:block;margin:0}
  .open--ref .open__head{position:relative}

  /* заголовок в две строки; мазок и отступы — в em, чтобы держаться за кеглем */
  .open--ref .h2{margin:0;font:900 clamp(42px,13.2vw,100px)/.86 var(--display);letter-spacing:-.01em;white-space:nowrap;text-wrap:initial}
  .open--ref .neq__img{width:1.02em;margin:0 -.02em 0 -.18em;vertical-align:-.26em}

  /* рупор справа, привязан к ноутбуку: низ картинки на 5.5vw ниже верха ноутбука, так что рука уходит за экран,
     как в макете; стоит над синей полосой (z 1) и под ноутбуком (z 2). Верх картинки — где получится:
     на телефоне рядом с лидом, на планшете рядом с заголовком */
  .open--ref .open__horn{display:block;position:absolute;z-index:1;right:0;bottom:calc(-1 * (clamp(20px,4.2vw,40px) + 2.1vw + 5.5vw));width:clamp(150px,50vw,300px);height:auto;max-width:none;pointer-events:none}

  /* лид — левая колонка, как в макете; мелкий текст 11px по просьбе владельца */
  .open--ref .lead{max-width:55%;margin:3.2vw 0 0;padding:0;font-size:11px;line-height:1.45;color:var(--muted)}
  .open--ref .lead__first{display:block;margin-bottom:8px;font-size:18px;line-height:1.3;color:var(--ink)}

  /* синяя полоса под ноутбуком (чуть наклонена, как в макете), ноутбук поверх нее, наклейки по краям */
  .open--ref .report-zone{position:relative;display:block;margin-top:clamp(20px,4.2vw,40px);padding:2.1vw 0 0}
  .open--ref .report-zone::before{content:"";position:absolute;z-index:0;left:-.5vw;right:-.5vw;top:0;height:18vw;background:var(--blue);rotate:-1.4deg}
  .open--ref .report-shot{display:block;position:relative;z-index:2;width:90%;height:auto;max-width:none;margin:0 3% 0 7%}
  .open--ref .sticker--fact{position:absolute;inset:auto;z-index:3;max-width:none;padding:12px 14px 13px;border-width:3px;box-shadow:6px 6px 0 var(--ink);font-size:19px}
  /* ширина по слову «фиксируем»: три строки, как в макете */
  .open--ref .sticker--kpi{right:0;top:6%;box-sizing:content-box;width:4.3em;--r:-7deg}
  .open--ref .sticker--access{left:1.5vw;bottom:6%;padding:10px 14px 11px;font-size:17px;white-space:nowrap;--r:-2deg}

  /* строки 01 и 02 — отдельные рамки: номер | заголовок и текст | заметка на полях; линейки не доходят до рамки */
  .open--ref .commit{margin-top:2vw;padding:0}
  .open--ref .commit li{display:grid;grid-template-columns:auto minmax(0,1fr) 27%;grid-template-areas:"n h a" "n p a";grid-template-rows:auto 1fr;padding:0;margin:0 0 2.2vw;border:2px solid var(--ink)}
  .open--ref .commit__n{display:block;grid-area:n;margin:12px 0;padding:3px 9px 0 10px;border-right:2px solid var(--ink);font:800 12px/1 var(--display);letter-spacing:.02em}
  .open--ref .commit h3{grid-area:h;margin:0;padding:12px 10px 0;font:900 clamp(22px,6vw,40px)/.9 var(--display);letter-spacing:-.01em}
  .open--ref .commit li > p:not(.commit__aside){grid-area:p;max-width:none;margin:6px 10px 13px;font-size:14px;line-height:1.42}
  .open--ref .commit__aside{display:block;grid-area:a;margin:12px 0;padding:2px 6px 0 10px;border-left:2px solid var(--ink);font:800 12px/1.3 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
  .open--ref .commit__aside::after{content:"";display:block;width:34px;height:2px;margin-top:10px;background:var(--ink);rotate:-2deg}

  /* черная полоса чуть шире рамок; подпись «Рост там, где система» справа внизу */
  .open--ref .commit li.is-loud{display:grid;grid-template-columns:minmax(0,1fr) 42.3%;grid-template-areas:"h h" "p n";column-gap:10px;align-items:end;margin:2.2vw -1.5vw 0;padding:14px 14px 16px;border:0;background:var(--ink);color:var(--paper)}
  .open--ref .commit li.is-loud h3{grid-area:h;padding:0;font-size:7.2vw;letter-spacing:-.012em;white-space:nowrap}
  .open--ref .commit li.is-loud > p{grid-area:p;max-width:none;margin:8px 0 0;font-size:14px;line-height:1.45}
  /* колонка подписи 42.3% = 141% от прежних 30% (размер выбрал владелец); текст не заходит под стрелку */
  .open--ref .commit__note{display:block;grid-area:n;justify-self:end;width:100%;height:auto;max-width:none;margin:8px 0 0}
}

/* ---------- десктоп ---------- */
@media (min-width:981px){
  .open--ref{height:56.3vw;max-width:none;margin:0;padding:0;overflow:hidden}
  .open--ref .open__head,.open--ref .open__grid,.open--ref .report-zone{position:static;display:block;margin:0;padding:0}

  /* ---------- заголовок: две строки, «≠» — присланный мазок ---------- */
  .open--ref .h2{position:absolute;z-index:3;left:2.51vw;top:3.35vw;margin:0;font:900 9.1vw/.86 var(--display);letter-spacing:-.01em;white-space:nowrap;text-wrap:initial}
  .open--ref .neq__img{width:9.3vw;margin:0 -.2vw 0 -1.6vw;vertical-align:-.26em}

  /* ---------- рупор на синей плашке: одна присланная картинка, стоит за заголовком ---------- */
  .open--ref .open__horn{display:block;position:absolute;z-index:1;left:36.25vw;top:2.24vw;width:22.13vw;height:auto;max-width:none;pointer-events:none}

  /* ---------- лид справа: линейка слева от него, первая фраза крупнее ---------- */
  .open--ref .open__head::after{content:"";position:absolute;left:61.6vw;top:3.29vw;width:max(1px,.12vw);height:15.85vw;background:var(--ink)}
  .open--ref .lead{position:absolute;left:63.58vw;top:5.5vw;width:26.2vw;max-width:none;margin:0;padding:0;font-size:1.1vw;line-height:1.5;color:var(--muted)}
  .open--ref .lead__first{display:block;margin-bottom:.9vw;font-size:1.32vw;line-height:1.36;color:var(--ink)}

  /* ---------- ноутбук с аналитикой вместо карточки-таблицы, за ним синий край ---------- */
  .open--ref .report-shot{display:block;position:absolute;z-index:3;left:0;top:20.04vw;width:52.93vw;height:auto;max-width:none}
  .open--ref .report-zone::before{content:"";position:absolute;z-index:1;left:0;top:23.62vw;width:6.6vw;height:12.86vw;background:var(--blue);clip-path:polygon(0 4%,100% 0,100% 88%,0 100%)}

  /* ---------- наклейки: KPI у верхнего края ноутбука, «Кабинеты и данные ваши» — у нижнего ---------- */
  .open--ref .sticker--fact{z-index:4;max-width:none;padding:.72vw .96vw .78vw;border-width:.18vw;box-shadow:.42vw .42vw 0 var(--ink);font-size:1.8vw}
  /* ширина по слову «фиксируем»: как в макете, три строки — KPI / фиксируем / в договоре */
  .open--ref .sticker--kpi{left:34.21vw;top:19.26vw;right:auto;box-sizing:content-box;width:4.3em;--r:5deg}
  .open--ref .sticker--access{left:1.79vw;top:48.56vw;bottom:auto;padding:.9vw 1.5vw .95vw;font-size:1.93vw;white-space:nowrap;--r:-3deg}

  /* ---------- справа: строки 01 и 02 в рамке с полутоновой тенью, под ними черная полоса ---------- */
  .open--ref .commit{position:absolute;z-index:2;left:51.14vw;top:20.33vw;width:46.65vw;margin:0;padding:0}
  .open--ref .commit::after{content:"";position:absolute;z-index:-1;left:100%;top:.6vw;width:1.1vw;height:23vw;background:radial-gradient(circle,var(--ink) 34%,transparent 40%) 0 0/.36vw .36vw;opacity:.75}
  .open--ref .commit li{display:grid;grid-template-columns:4.37vw minmax(0,1fr) 7.8vw;grid-template-areas:"n h a" "n p a";grid-template-rows:auto 1fr;min-height:11.8vw;padding:0;border:max(1px,.12vw) solid var(--ink);border-bottom:0;background:transparent}
  .open--ref .commit__n{display:block;grid-area:n;padding:1.55vw 0 0 1.2vw;font:800 1.4vw/1 var(--display);letter-spacing:.02em}
  .open--ref .commit h3{grid-area:h;margin:0;padding:1.2vw 1vw 0 0;font:900 2.95vw/.9 var(--display);letter-spacing:-.01em;white-space:nowrap}
  .open--ref .commit li > p:not(.commit__aside){grid-area:p;max-width:none;margin:.9vw 1vw 1.2vw 0;font-size:1.02vw;line-height:1.42}
  .open--ref .commit__aside{display:block;grid-area:a;margin:0;padding:1.3vw .6vw 1vw 1vw;border-left:max(1px,.12vw) solid var(--ink);font:800 1.08vw/1.3 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
  .open--ref .commit__aside::after{content:"";display:block;width:3.6vw;height:.16vw;margin-top:.8vw;background:var(--ink);rotate:-2deg}

  .open--ref .commit li.is-loud{position:relative;display:block;min-height:10.83vw;margin:0 -1.02vw 0 -.3vw;padding:1.35vw 1.67vw 1.2vw;border:0;background:var(--ink);color:var(--paper)}
  .open--ref .commit li.is-loud h3{padding:0;font-size:3.5vw}
  .open--ref .commit li.is-loud p{max-width:31.1vw;margin:.9vw 0 0;font-size:1.02vw;line-height:1.42}
  .open--ref .commit__note{display:block;position:absolute;right:.7vw;bottom:.6vw;width:14.06vw;height:auto;max-width:none;pointer-events:none}
}

/* ===== Правки по SEO-аудиту 22.09.2026: стикер кейса, ссылка аудита, площадки, VK-кейсы, ссылки на кейсы, ниши, заголовок формы, блок цен ===== */
/* первый экран: стикер кейса — «10,7 млн ₽» с единицей */
.hero--vk .sticker__num small{font-size:.4em;font-weight:800;letter-spacing:0}

/* блок аудита: ссылка на попап заявки «бесплатный аудит» */
.audit__link{display:inline-block;margin-top:10px;color:#fff;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.audit__link:hover{color:var(--lime)}

/* «Где покажем рекламу»: площадки VK Рекламы внутри блока состава работ (на темном) */
.fmt{margin-top:clamp(40px,4.4vw,72px)}
.fmt__h{margin:0 0 18px;font:800 clamp(24px,2vw,30px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--lime)}
.fmt__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin:0}
.fmt__list div{padding-top:16px;border-top:2px solid rgba(244,243,238,.42)}
.fmt__list dt{font:800 clamp(22px,1.7vw,26px)/1 var(--display);text-transform:uppercase;letter-spacing:.005em}
.fmt__list dd{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--on-ink-soft)}
@media (max-width:980px){.fmt__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fmt__list{grid-template-columns:minmax(0,1fr)}}

/* «Кейсы, где ВКонтакте был каналом»: три карточки на бумаге, цифры — из разборов на странице стоматологии */
.vkc{padding-block:var(--sec);background:var(--paper);color:var(--ink);border-top:2px solid var(--ink)}
.vkc__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end;margin-bottom:clamp(32px,3.6vw,56px)}
.vkc__head .lead{color:var(--muted)}
.vkc__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.vkc__card{position:relative;display:flex;flex-direction:column;padding:clamp(20px,2vw,30px);background:var(--sheet);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink)}
.vkc__card--lime{background:var(--lime)}
.vkc__meta{margin:0 0 14px;font:700 12px/1.3 var(--text);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.vkc__card--lime .vkc__meta{color:var(--ink)}
.vkc__num{margin:0;font:900 clamp(56px,4.6vw,80px)/.86 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.vkc__num small{font-size:.42em;font-weight:800;margin-left:.12em}
.vkc__cap{margin:6px 0 18px;font:600 15px/1.35 var(--text)}
.vkc__card dl{margin:0;padding-top:16px;border-top:2px solid var(--ink)}
.vkc__card dt{font:800 12px/1 var(--display);text-transform:uppercase;letter-spacing:.08em;margin:14px 0 6px}
.vkc__card dt:first-child{margin-top:0}
.vkc__card dd{margin:0;font-size:15px;line-height:1.5}
.vkc__card dd b{font-weight:700}
.vkc__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(28px,3vw,44px)}
.vkc__foot p{margin:0;max-width:56ch;font-size:15px;line-height:1.5;color:var(--muted)}
.vkc__foot .link{color:var(--ink)}
@media (max-width:980px){.vkc__head{grid-template-columns:minmax(0,1fr);gap:16px}.vkc__grid{grid-template-columns:minmax(0,1fr)}}

/* кейсы: ссылка на страницу разбора под каждым плакатом */
.poster__more{grid-column:1/-1;margin:clamp(20px,2.4vw,36px) 0 0}
.poster__more .link{color:inherit}
.poster.on-dark .poster__more .link{color:var(--lime)}

/* «Таргет ВКонтакте под вашу нишу» */
.niches{padding-block:var(--sec);border-top:2px solid var(--ink)}
.niches__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:start}
.niches__h{font-size:clamp(40px,5vw,78px)}
.niches .lead{margin-top:20px}
.niches__k{margin:0 0 12px;font:700 13px/1.3 var(--text);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.niches__list{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px}
.niches__list a{font:800 clamp(22px,1.9vw,28px)/1.05 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.niches__list a:hover{color:var(--blue);text-decoration-thickness:4px}
@media (max-width:980px){.niches__grid{grid-template-columns:minmax(0,1fr);gap:28px}}

/* форма внизу: «Поймем, есть ли у VK место в вашей воронке» — две строки на плашках по ширине текста, как на Директе */
.brief h2{font-size:clamp(44px,14.2vw,96px)}
.brief h2 span{width:fit-content;white-space:nowrap}
.brief h2 span + br + span{margin-top:.1em}
@media (min-width:981px){.brief h2{font-size:clamp(72px,7.2vw,112px)}}

/* «Настройка и ведение таргета: сколько стоит» — компонент .svc, третья колонка — цена (как на Директе) */
.svc-ydx .svc{grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr)}
.svc__cost{margin:0;justify-self:end;text-align:right}
.svc__cost b{display:block;font:900 clamp(40px,4vw,64px)/.9 var(--display);color:var(--lime);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.svc__cost span{display:block;margin-top:8px;font-size:14px;line-height:1.35;color:var(--on-ink-soft)}
.svc-ydx__act{display:flex;align-items:center;gap:28px;margin-top:clamp(36px,4vw,56px)}
.svc-ydx__act p{margin:0;max-width:46ch;font-size:15px;line-height:1.5;color:var(--on-ink-soft)}
@media (max-width:980px){
  .svc-ydx .svc{grid-template-columns:minmax(0,1fr)}
  .svc__cost{justify-self:start;text-align:left;margin-top:6px}
  .svc-ydx__act{flex-direction:column;align-items:flex-start;gap:16px}
}