@charset "UTF-8";
/* p6-proof.css — страницы доказательств круга 5 (17.09): otzyvy.html · korporativ.html (site/mandarin/DESIGN.md).
   Грузится после style.css → p6.css, ПЕРЕД k5.css (k5 — последний и главный). Цвета — только токены k5 (--fir --mint --cream --white
   --ink --ink-2 --ink-3 --line --line-2 --t1 --t2 --t3 --line-d --line-d2 --fir-2), радиусы --r-1 · --r-2 · --r-pill, тени --sh-1 · --sh-2 · --sh-d,
   кегли --fs-13…--fs-64, гарнитуры --f-display (Prata, ≥ 24) и --f-text (Onest). Движение — transform и opacity, под html.still — конечные состояния.
   Префиксы: pf- общее двух страниц · pr- отзывы · pc- корпоративам. */

/* ---------- общее: вторая строка H1 и лид на ели ---------- */
.page-proof .k5-dark .h1__b{color:var(--t2)}
.page-proof .k5-dark .lead{color:var(--t2)}
.page-proof .tabs--dark{border-bottom-color:var(--line-d)}
/* вкладки — подчёркивание, не пилюли (DESIGN.md §6): style.css красит выбранную пилюлей, k5.css фон не снимает — снимаем здесь */
.page-proof .tab,.page-proof .tab[aria-selected="true"],.page-proof .tabs--dark .tab,.page-proof .tabs--dark .tab[aria-selected="true"]{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;min-height:0;padding:10px 0}
.page-proof .tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--fir)}
.page-proof .tabs--dark .tab{color:var(--t2)}
.page-proof .tabs--dark .tab:hover{color:var(--t1)}
.page-proof .tabs--dark .tab[aria-selected="true"]{color:var(--t1);border-bottom-color:var(--t1)}
.pf-nb{white-space:nowrap}
/* кнопка-вторая на <button>: текст со стрелкой, без браузерной рамки (критик круга 9 №20) */
button.k5-more,button.pf-linkbtn{appearance:none;-webkit-appearance:none;background:none;border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:0 0 4px;margin:0;cursor:pointer;font:500 var(--fs-15)/1.2 var(--f-text);color:var(--ink)}
button.k5-more:hover{border-color:var(--ink)}

/* ---------- общее: записка — белая карточка, текст Onest 17, имя и дата подписью ---------- */
.pf-note{margin:0;background:var(--white);border-radius:var(--r-2);box-shadow:var(--sh-1);padding:24px}
.pf-note p,.pf-note__text{margin:0;max-width:none;font:400 var(--fs-17)/1.55 var(--f-text);color:var(--ink);overflow-wrap:anywhere}
.pf-note__who{margin:16px 0 0;font:500 var(--fs-13)/1.35 var(--f-text);letter-spacing:.04em;color:var(--ink-3)}
.pf-note__who b{font-weight:500;color:var(--ink-2)}
.pf-note.is-clamped .pf-note__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:9;overflow:hidden}
.pf-note__more{appearance:none;background:none;border:0;border-bottom:1px solid var(--line-2);padding:0 0 3px;margin-top:12px;font:500 var(--fs-15)/1.2 var(--f-text);color:var(--ink);cursor:pointer;transition:border-color .2s var(--curve)}
.pf-note__more:hover{border-color:var(--ink)}

/* ---------- общее: полароид — белое поле на мяте, наклон ±2° (--tilt из шаблона), подпись — год ---------- */
.pf-pola{margin:0;transform:rotate(var(--tilt,-2deg));transition:transform .2s var(--curve),box-shadow .2s var(--curve)}
.pf-pola img{width:100%;height:auto;display:block;background:var(--mint)}
.pf-pola .polaroid__body{padding:10px 2px 0}
.pf-pola:hover{transform:rotate(0deg) translateY(-2px);box-shadow:var(--sh-2)}

/* ---------- общее: фото-таблица видео — обложка 16:9, кнопка «смотреть» белая с елью, подпись канал · год и название ---------- */
.pf-plate{gap:12px}
.pf-vlink{position:relative;display:block;border-radius:var(--r-2);overflow:hidden;background:var(--fir-2);outline:none}
.pf-vlink img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:var(--r-2)}
/* обложка со значком VK в левом верхнем углу: кадр со сдвигом влево и зумом ×1.2 от правого края — значок за краем, файл нетронут (критик круга 9 №7) */
.pf-vlink--vk img{object-position:100% 50%;transform:scale(1.2);transform-origin:100% 50%}
.pf-play{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:var(--r-pill);background:var(--white);color:var(--fir);display:grid;place-items:center;box-shadow:var(--sh-d);transition:transform .2s var(--curve)}
.pf-play svg{width:22px;height:22px;margin-left:2px;display:block}
.pf-vlink:hover .pf-play,.pf-vlink:focus-visible .pf-play{transform:scale(1.08)}
.pf-vlink:focus-visible{box-shadow:0 0 0 2px var(--white)}
.pf-plate figcaption{display:grid;gap:4px}
.pf-plate figcaption b{font:500 var(--fs-13)/1.35 var(--f-text);letter-spacing:.04em;color:var(--t3)}
.pf-plate figcaption span{font:400 var(--fs-15)/1.4 var(--f-text);letter-spacing:0;color:var(--t2);max-width:40ch}

/* ---------- общее: форма — поля по §6 (k5), ошибка словами под полем с иконкой, одна кнопка ---------- */
.pf-form{display:grid;gap:20px}
.pf-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.pf-row--3{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.3fr)}
.page-proof .field textarea{min-height:128px;resize:none;line-height:1.5}
.page-proof .field.is-error input,.page-proof .field.is-error textarea{border-color:var(--fir)}
.page-proof .k5-error{display:inline-flex;align-items:flex-start;gap:6px;color:var(--fir)}
.page-proof .k5-error:empty{display:none}
.page-proof .k5-error svg{width:16px;height:16px;flex:none;margin-top:1px}
.pf-file{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pf-file__btn{cursor:pointer}
.pf-file .k5-meta{max-width:52ch}
.pf-foot{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap;margin-top:4px}
.pf-foot .small{margin:0;max-width:34ch}
.pf-thanks{grid-column:1 / -1;max-width:56ch}
.pf-thanks .h2{max-width:20ch}
.pf-thanks p{margin:16px 0 0}
.pf-thanks__row{display:flex;align-items:center;gap:24px;flex-wrap:wrap}

/* ---------- общее: полоса логотипов — одна строка, монохром, без сетки; едет по кругу (копия — p6-proof.js), под html.still стоит ---------- */
.pf-strip{position:relative;overflow:hidden;margin:clamp(32px,4vw,48px) 0 clamp(48px,6vw,80px);padding-block:28px;background:var(--white)}
.pf-strip::before,.pf-strip::after{content:"";position:absolute;top:0;bottom:0;width:12%;pointer-events:none;z-index:1}
.pf-strip::before{left:0;background:linear-gradient(90deg,var(--white),rgba(253,250,246,0))}
.pf-strip::after{right:0;background:linear-gradient(270deg,var(--white),rgba(253,250,246,0))}
.pf-strip__track{display:flex;align-items:center;gap:clamp(40px,5vw,72px);width:max-content;padding-inline:var(--gutter)}
.pf-strip.is-loop .pf-strip__track{animation:pfStrip var(--dur,90s) linear infinite}
.pf-strip.is-loop:hover .pf-strip__track{animation-play-state:paused}
@keyframes pfStrip{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* знак 32 px: файлы 150×75 с белыми полями внутри — кадр 40 px в окне 32 px срезает поля; brightness+contrast уводят почти-белую подложку JPEG в белый, multiply растворяет её на мяте */
.pf-logo{display:flex;align-items:center;flex:none;height:32px;overflow:hidden}
.pf-logo img{display:block;height:40px;width:auto;filter:grayscale(1) contrast(1.1);opacity:.78;mix-blend-mode:multiply}
.pf-strip:not(.is-loop){overflow-x:auto;scrollbar-width:none}
.pf-strip:not(.is-loop)::-webkit-scrollbar{display:none}

/* ======================================================================
   OTZYVY — мята (стена) → ель (ТВ и видео) → белый (оставить отзыв)
   ====================================================================== */
.pr-wall{padding-block:clamp(56px,7vw,96px) clamp(80px,9vw,128px)}
.pr-wall__head{max-width:760px;margin-bottom:clamp(32px,4vw,48px)}
.pr-wall__head .lead{margin:20px 0 0}
.pr-tabs{margin-top:32px}
.pr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.pr-grid.is-masonry{display:block;position:relative}
.pr-grid.is-masonry>*{position:absolute;top:0;left:0;margin:0}
.pr-more{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:clamp(32px,4vw,48px)}

.pr-video{padding-top:clamp(80px,9vw,128px)}
.pr-video .wrap{position:relative;z-index:1}
.pr-video__head{max-width:760px;margin-bottom:clamp(32px,4vw,48px)}
.pr-video__head .lead{margin:20px 0 0}
.pr-vtabs{margin-bottom:clamp(24px,3vw,32px)}
.pr-vgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px;align-items:start}
.pr-vgrid>.pf-plate:first-child{grid-column:span 2}
.pr-vgrid>.pf-plate:first-child figcaption span{font-size:var(--fs-17)}
.pr-vgrid>.pf-plate:first-child .pf-play{width:64px;height:64px;margin:-32px 0 0 -32px}
.pr-vgrid>.pf-plate:first-child .pf-play svg{width:28px;height:28px}
.pr-video__names{margin:clamp(32px,4vw,48px) 0 0;max-width:64ch;color:var(--t2)}

.pr-leave{padding-block:clamp(80px,9vw,128px)}
.pr-leave__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.pr-leave__side .lead{margin:20px 0 0;max-width:40ch}
.pr-leave__act{margin:32px 0 0}

/* ======================================================================
   KORPORATIV — ель (герой с кадром) → белый (строки с ценой + кадр) → мята (полоса логотипов + записки) → белый (запрос)
   ====================================================================== */
/* герой первой секцией под шапкой: отступ сверху и прозрачную шапку даёт body.k5-darkhero (k5.css); кадр начинается под шапкой, не под ней самой — k5-cover не нужен */
.pc-hero{position:relative;min-height:min(92vh,860px);display:grid;align-items:stretch}
.pc-hero>*{min-width:0}
.pc-hero__photo{position:absolute;top:0;right:0;bottom:0;left:55%;width:auto;margin:0;overflow:hidden;z-index:0;-webkit-mask:linear-gradient(90deg,transparent 0,var(--fir) 160px);mask:linear-gradient(90deg,transparent 0,var(--fir) 160px)}
.pc-hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.pc-hero__photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,color-mix(in srgb,var(--fir) 70%,transparent) 0,color-mix(in srgb,var(--fir) 20%,transparent) 18%,transparent 34%),linear-gradient(180deg,color-mix(in srgb,var(--fir) 72%,transparent) 0,color-mix(in srgb,var(--fir) 24%,transparent) 11%,transparent 24%)}
.pc-hero__grid{position:relative;z-index:1;width:min(100% - 2 * var(--gutter),var(--wrap));margin-inline:auto;display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr)}
.pc-hero__text{display:flex;flex-direction:column;padding:clamp(24px,3vw,40px) clamp(32px,4vw,64px) clamp(24px,3vw,40px) 0}
.pc-hero .h1{max-width:14ch}
.pc-hero__text .lead{margin:24px 0 0;max-width:46ch}
.pc-hero__cta{display:flex;align-items:center;gap:clamp(20px,2.4vw,32px);margin-top:32px;flex-wrap:wrap}
.pc-hero__note{display:grid;gap:4px}
.pc-hero__note .k5-meta{max-width:30ch}
.page-proof .k5-dark .pc-hero__note .tel{color:var(--t1)}
.pc-hero__cap{margin:auto 0 0;padding-top:48px;max-width:52ch;color:var(--t3)}

.pc-what{padding-block:clamp(80px,9vw,128px)}
.pc-what__head{max-width:760px;margin-bottom:clamp(32px,4vw,48px)}
.pc-what__head .lead{margin:20px 0 0}
.pc-what__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start}
.pc-what__rows .h3{margin:0 0 16px}
.pc-what__h3{margin-top:clamp(40px,5vw,64px)!important}
.pc-rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.pc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px clamp(20px,2.4vw,32px);align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.pc-row__t{font-family:var(--f-display);font-size:var(--fs-24);line-height:1.2;letter-spacing:-.01em}
.pc-row__d{grid-column:1;font:400 var(--fs-15)/1.5 var(--f-text);color:var(--ink-2);max-width:56ch}
.pc-row__p{grid-column:2;grid-row:1;font-family:var(--f-display);font-size:var(--fs-24);line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;color:var(--ink)}
.pc-row__p small{font:500 var(--fs-13)/1 var(--f-text);letter-spacing:.02em;color:var(--ink-2);margin-right:6px}
.pc-row__p--text{font:400 var(--fs-15)/1.5 var(--f-text);color:var(--ink-2)}
.pc-rows__note{margin:16px 0 0;max-width:64ch}
.pc-what__photo{position:sticky;top:calc(var(--header-h) + 24px)}
.pc-what__photo img{aspect-ratio:3/2;object-fit:cover}

.pc-clients{padding-block:clamp(80px,9vw,128px)}
.pc-clients__head{max-width:820px}
.pc-clients__head .lead{margin:20px 0 0}
.pc-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.pc-clients__more{margin:clamp(32px,4vw,48px) 0 0}

.pc-form{padding-block:clamp(80px,9vw,128px)}
.pc-form__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.pc-form__side .lead{margin:20px 0 0;max-width:40ch}
.pc-steps{margin:clamp(48px,6vw,80px) 0 0;padding:32px 0 0;list-style:none;counter-reset:step;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(24px,3vw,48px)}
.pc-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 16px}
.pc-steps li::before{counter-increment:step;content:counter(step,decimal-leading-zero);font:500 var(--fs-13)/1.9 var(--f-text);letter-spacing:.04em;color:var(--ink-3)}
.pc-steps .h3{margin:0}
.pc-steps p{grid-column:2;margin:8px 0 0;font:400 var(--fs-15)/1.5 var(--f-text);color:var(--ink-2);max-width:36ch}
.pc-steps a,.pc-form__contacts a{color:var(--ink);white-space:nowrap;text-decoration:none;border-bottom:1px solid var(--line-2);transition:border-color .2s var(--curve)}
.pc-steps a:hover,.pc-form__contacts a:hover{border-color:var(--ink)}
.pc-form__contacts{margin:24px 0 0;max-width:40ch}

/* ---------- узкие экраны: всё в одну колонку, кадр героя под текстом ---------- */
@media (max-width:900px){
  .pr-wall{padding-block:48px 64px}
  .pr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-video{padding-top:64px}
  .pr-vgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .pr-leave,.pc-what,.pc-clients,.pc-form{padding-block:64px 80px}
  .pr-leave__grid,.pc-what__grid,.pc-form__grid{grid-template-columns:1fr;gap:40px}
  /* телефон: H1 → лид → кнопка → кадр → подпись к кадру (критик круга 8: подпись «На фото…» раньше самого фото); обёртки — display:contents */
  .pc-hero{min-height:0;display:grid;grid-template-columns:100%;padding-inline:var(--gutter)}
  .pc-hero__grid,.pc-hero__text{display:contents}
  .pc-hero .h1{margin-top:32px}
  .pc-hero__photo{position:relative;top:auto;left:auto;order:2;width:auto;aspect-ratio:4/5;margin:32px calc(-1 * var(--gutter)) 0;border-radius:0;-webkit-mask:none;mask:none}
  .pc-hero__photo::after{background:linear-gradient(0deg,color-mix(in srgb,var(--fir) 60%,transparent) 0,transparent 22%)}
  .pc-steps{grid-template-columns:1fr;padding-top:24px}
  .pc-hero__cap{order:3;margin:16px 0 0;padding:0}
  .pc-what__photo{position:static}
  .pc-quotes{grid-template-columns:1fr}
  .pf-row,.pf-row--3{grid-template-columns:1fr}
}
@media (max-width:600px){
  .pr-grid{grid-template-columns:1fr}
  .pr-vgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .pr-vgrid>.pf-plate:first-child{grid-column:span 2}
  .pf-play{width:40px;height:40px;margin:-20px 0 0 -20px}
  .pf-play svg{width:18px;height:18px}
  .pf-note{padding:20px}
  .pf-strip__track{gap:24px}
  .pf-logo{height:28px}
  .pf-logo img{height:36px}
  .pc-hero__cta{align-items:flex-start;flex-direction:column;gap:16px}
}