/* ==========================================================
   winpix — раздел «Услуги»: хаб + 4 страницы услуг (site/uslugi/page.css)
   Подключается после /_assets/styles.css. Только то, чего нет в общей системе:
   первый экран услуги с ценой, форматы + «что входит», разбор кейса, сроки, плита цены,
   карточки услуг на хабе. Все цвета — из токенов, тема (тёмная/.light) переключается сама.
   Кандидаты в _assets: .phead__side/.phead__price, .fmt/.incl, .cs, .how/.term, .cta__sum, .svc
   ========================================================== */

/* ---------- Первый экран услуги: подзаголовок + цена + кнопка в правой колонке ---------- */
.phead--svc .phead__grid{grid-template-columns:1.3fr .7fr}
.phead__side{display:grid;gap:22px;justify-items:start;align-content:end}
.phead__side .sub{margin:0}
.phead__price{font-size:clamp(22px,2vw,30px);letter-spacing:-.025em;line-height:1.1}
.phead__price small{display:block;font-size:var(--small);letter-spacing:0;color:var(--mute-d);margin-top:6px;line-height:1.4}
.light .phead__price small{color:var(--mute-l)}
.phead__media .facts{position:absolute;left:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);display:flex;gap:6px;flex-wrap:wrap;z-index:1}
.phead__media .tag{background:rgba(26,20,18,.55);color:var(--milk);box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.phead__media .hero__loop{position:absolute;left:clamp(14px,2vw,24px);top:clamp(14px,2vw,24px);z-index:1}

/* ---------- Форматы (список с превью) + «что входит» (липкая карточка) ---------- */
.fmtgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,72px);align-items:start}
.fmt{border-top:1px solid var(--line-d);counter-reset:f}
.fmt li{display:grid;grid-template-columns:52px 152px 1fr;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line-d)}
.fmt li::before{counter-increment:f;content:"0" counter(f);font-size:22px;letter-spacing:-.03em;color:var(--brick-text);line-height:1.2;align-self:start}
.light .fmt{border-top-color:var(--line-l)}
.light .fmt li{border-bottom-color:var(--line-l)}
.light .fmt li::before{color:var(--brick)}
.fmt__media{aspect-ratio:16/10;border-radius:var(--r-ui);overflow:hidden;background:var(--night-2)}
.light .fmt__media{background:var(--bone-2)}
.fmt__media img{width:100%;height:100%;object-fit:cover}
.fmt h3{font-size:clamp(19px,1.6vw,24px);margin-bottom:6px;letter-spacing:-.02em}
.fmt p{color:var(--mute-d);font-size:16px;max-width:44ch}
.light .fmt p{color:var(--mute-l)}
.fmt p .link{font-size:inherit;padding:0;margin:0}
.incl{position:sticky;top:calc(var(--header-h) + 24px);border-radius:var(--r-card);background:rgba(244,238,230,.06);padding:clamp(22px,2.6vw,36px)}
.light .incl{background:rgba(26,20,18,.05)}
.incl h3{font-size:clamp(19px,1.6vw,24px);margin-bottom:14px;letter-spacing:-.02em}
.incl h3 .q{margin-bottom:10px}
.incl li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line-d);font-size:16px;line-height:1.4}
.light .incl li{border-top-color:var(--line-l)}
.incl li::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--brick-text);margin-top:1px;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><circle cx='14' cy='14' r='14' fill='black'/><path d='M8 14.5l4 4 8-9' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><circle cx='14' cy='14' r='14' fill='black'/><path d='M8 14.5l4 4 8-9' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}
.light .incl li::before{background:var(--brick)}

/* ---------- Работы по услуге: сетка из works.js, 3 колонки (первая — широкая) ---------- */
.works__grid--svc .work:first-child{grid-column:span 2}
.works__grid--svc .work:first-child .work__media{aspect-ratio:16/8.7}

/* ---------- Разбор кейса: липкое медиа слева, шаги «задача — решение — результат» справа ---------- */
.cs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.cs__media{position:sticky;top:calc(var(--header-h) + 16px);border-radius:var(--r-frame);overflow:hidden;aspect-ratio:4/4.4;background:var(--night-2)}
.light .cs__media{background:var(--bone-2)}
.cs__media img,.cs__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs__media video{opacity:0;transition:opacity .8s}
.cs__media video.is-ready{opacity:1}
.cs__media .facts{position:absolute;left:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);display:flex;gap:6px;flex-wrap:wrap;z-index:1}
.cs__media .tag{background:rgba(26,20,18,.55);color:var(--milk);box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cs .steps p{max-width:none;font-size:16.5px;line-height:1.45}
.cs .steps p+p{margin-top:10px}
.cs .steps b{font-size:var(--small);font-weight:400;letter-spacing:0;color:var(--mute-d);margin-bottom:8px}
.light .cs .steps b{color:var(--mute-l)}
.cs__foot{margin-top:clamp(24px,3vw,40px);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}

/* ---------- Восемь героев (только «Презентация ЖК») ---------- */
.heroes{margin-top:clamp(48px,6vw,96px)}
.heroes__head{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:end;margin-bottom:clamp(24px,3vw,40px)}
.heroes__head h3{font-size:clamp(24px,2.6vw,38px);letter-spacing:-.025em;max-width:22ch}
.heroes__head p{color:var(--mute-d);max-width:44ch}
.heroes__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 20px}
.heroes__grid li{display:grid;gap:10px}
.heroes__media{position:relative;aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;background:var(--night-2)}
.heroes__media img,.heroes__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.heroes__media video{opacity:0;transition:opacity .8s}
.heroes__media video.is-ready{opacity:1}
.heroes__grid b{font-weight:500;font-size:17px;letter-spacing:-.01em}
.heroes__grid p{color:var(--mute-d);font-size:15px;max-width:30ch}

/* ---------- Второй кейс (короткий абзац на карточке) ---------- */
.cs2{margin-top:clamp(40px,5vw,72px);border-radius:var(--r-card);background:rgba(244,238,230,.06);padding:clamp(22px,2.6vw,36px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,48px);align-items:start}
.light .cs2{background:rgba(26,20,18,.05)}
.cs2 h3{font-size:clamp(20px,1.9vw,28px);letter-spacing:-.02em;margin-bottom:14px}
.cs2 .facts{display:flex;gap:6px;flex-wrap:wrap}
.cs2 p{color:var(--mute-d);font-size:16.5px;line-height:1.45}
.light .cs2 p{color:var(--mute-l)}

/* ---------- Как делаем и сроки: шаги + липкая карточка срока ---------- */
.how{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,72px);align-items:start}
.term{position:sticky;top:calc(var(--header-h) + 24px);border-radius:var(--r-card);background:rgba(244,238,230,.06);padding:clamp(22px,2.6vw,36px);display:grid;gap:14px}
.light .term{background:rgba(26,20,18,.05)}
.term .big{font-size:clamp(44px,5vw,76px);letter-spacing:-.045em;line-height:1}
.term p{color:var(--mute-d);max-width:36ch;font-size:16px}
.light .term p{color:var(--mute-l)}

/* ---------- Плита цены (на базе .cta__card): сумма крупно ---------- */
.cta__sum{font-size:clamp(40px,5.4vw,84px);letter-spacing:-.05em;line-height:.98;margin-top:14px;white-space:nowrap}
.cta__sum small{display:block;font-size:clamp(15px,1.2vw,18px);letter-spacing:-.01em;opacity:.85;margin-top:10px;white-space:normal}
.cta__card .cta__side--col{display:grid;gap:22px;justify-items:start;justify-content:start}
.cta__card .cta__side--col p{margin:0;max-width:44ch;opacity:.92}

/* ---------- Хаб: список услуг (номер · название и описание · цена, срок, этапы) ---------- */
.svc{counter-reset:v;border-top:1px solid var(--line-d)}
.svc li{display:grid;grid-template-columns:52px minmax(0,1.25fr) minmax(0,.75fr);gap:12px 32px;padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line-d);align-items:start}
.svc li::before{counter-increment:v;content:"0" counter(v);font-size:22px;letter-spacing:-.03em;color:var(--brick-text);line-height:1.2;padding-top:.35em}
.light .svc{border-top-color:var(--line-l)}
.light .svc li{border-bottom-color:var(--line-l)}
.light .svc li::before{color:var(--brick)}
.svc h2{font-size:clamp(26px,2.8vw,42px);letter-spacing:-.03em;line-height:1.05;max-width:18ch}
.svc h2 a{display:inline-block}
.svc h2 a:hover{color:var(--brick-text)}
.light .svc h2 a:hover{color:var(--brick)}
.svc h2 .q{margin-bottom:10px}
.svc__text{margin-top:14px;color:var(--mute-d);max-width:50ch;font-size:16.5px;line-height:1.45}
.light .svc__text{color:var(--mute-l)}
.svc__text+.link{margin-top:18px;display:inline-block}
.svc__side{display:grid;gap:14px;align-content:start;padding-top:.5em}
.svc__row{display:grid;grid-template-columns:8ch 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line-d);font-size:16px;align-items:baseline}
.light .svc__row{border-top-color:var(--line-l)}
.svc__row:first-child{border-top:0;padding-top:0}
.svc__row span{color:var(--mute-d);font-size:var(--small)}
.light .svc__row span{color:var(--mute-l)}
.svc__row b{font-weight:400;font-size:clamp(19px,1.6vw,24px);letter-spacing:-.02em}
.svc__row .inline-list{gap:6px}
.svc__row .tag{font-size:13px;padding:6px 11px}
.svc__side{--tag-bg:transparent}

/* ---------- Мобайл ---------- */
@media (max-width:1100px){
  .heroes__grid{grid-template-columns:repeat(2,1fr)}
  .works__grid--svc .work:first-child{grid-column:span 2}
  .svc li{grid-template-columns:44px 1fr}
  .svc__side{grid-column:2;padding-top:0}
}
@media (max-width:900px){
  .phead--svc .phead__grid{grid-template-columns:1fr}
  .phead__side{gap:14px}
  .phead__price{font-size:20px}
  .fmtgrid{grid-template-columns:1fr;gap:20px}
  .fmt li{grid-template-columns:36px 1fr;gap:10px 12px;padding:16px 0;align-items:start}
  .fmt li::before{font-size:18px}
  .fmt__media{grid-column:2;aspect-ratio:16/9;max-width:220px}
  .fmt li>div:last-child{grid-column:2}
  .fmt h3{font-size:18px;margin-bottom:4px}
  .fmt p{font-size:15px;max-width:none}
  .incl{position:static;padding:18px 16px}
  .incl h3{font-size:19px;margin-bottom:8px}
  .incl li{font-size:15px;padding:10px 0}
  .works__grid--svc .work:first-child{grid-column:auto}
  .works__grid--svc .work:first-child .work__media{aspect-ratio:16/10}
  .cs{grid-template-columns:1fr;gap:20px}
  .cs__media{position:relative;top:auto;aspect-ratio:16/11;border-radius:var(--r-card)}
  .cs .steps p{font-size:16px}
  .heroes__head{grid-template-columns:1fr;gap:10px}
  .heroes__grid{grid-template-columns:1fr 1fr;gap:16px 12px}
  .heroes__grid p{font-size:14px}
  .cs2{grid-template-columns:1fr;padding:18px 16px;gap:14px}
  .cs2 p{font-size:15.5px}
  .how{grid-template-columns:1fr;gap:20px}
  .term{position:static;padding:18px 16px;gap:8px}
  .term .big{font-size:42px}
  .term p{font-size:15px;max-width:none}
  .cta__sum{font-size:clamp(34px,10.5vw,44px);white-space:normal}
  .cta__sum small{font-size:14px}
  .svc li{grid-template-columns:36px 1fr;gap:10px 12px;padding:20px 0}
  .svc li::before{font-size:18px;padding-top:.2em}
  .svc h2{font-size:24px;max-width:none}
  .svc__text{font-size:15.5px;margin-top:10px}
  .svc__side{grid-column:2;gap:8px;margin-top:8px}
  .svc__row{grid-template-columns:7ch 1fr;padding:8px 0;font-size:15px}
  .svc__row b{font-size:19px}
}

/* ---------- ?flat=1 (длинные скриншоты) и reduced-motion ---------- */
html.flat .incl,html.flat .term{position:static}
html.flat .cs__media{position:relative;top:auto}
html.flat .cs__media video,html.flat .heroes__media video{display:none}

/* ---------- Блок «ИИ или съёмка?» (перенесён с главной 29.09): контент уже полосы и по центру ---------- */
/* ---------- Хаб: заголовок первого экрана ровно в три строки (29.09 Алексей) ---------- */
#hero.phead:not(.phead--svc) h1{max-width:none;font-size:clamp(40px,5.2vw,76px)}
/* первый экран без правой колонки */
#hero.phead:not(.phead--svc) .phead__grid{grid-template-columns:1fr}

/* ---------- Таблица «ИИ или съёмка?»: акцентная шапка и первый столбец (29.09 Алексей) ---------- */
.ai .cmp th{color:var(--milk);font-weight:600;padding-bottom:16px;border-bottom:2px solid var(--brick-text)}
.ai .cmp td:first-child{color:var(--milk);font-weight:600}


/* 29.09: таблица этапов — все колонки, включая «Пример», по левому краю */
.ptable.ptable--stages th,.ptable.ptable--stages td,.ptable.ptable--stages th:last-child,.ptable.ptable--stages td:last-child{text-align:left}
.ptable--stages a.ulink,.ai .cmp a.ulink{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:currentColor}
.ptable--stages a.ulink:hover,.ai .cmp a.ulink:hover{color:var(--brick)}
.ai .cmp a.ulink:hover{color:var(--brick-text)}

/* ===== 03.10 аудит смыслов: компактная шапка, карточки форматов, «что входит» полосой, кейсы карточками, срок+цена, договор в ряд ===== */
.chap__head--one{grid-template-columns:1fr;margin-bottom:clamp(28px,3.5vw,48px)}
.phead--svc .phead__side{align-content:end;padding-bottom:.3em}
/* Форматы — карточки с постером/лупом */
.fcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.fcards:has(li:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
.fcard{display:grid;gap:12px;align-content:start;counter-increment:fc}
.fcard__media{position:relative;aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;background:var(--night-2)}
.light .fcard__media{background:var(--bone-2)}
.fcard__media img,.fcard__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fcard__media video{opacity:0;transition:opacity .8s}
.fcard__media video.is-ready{opacity:1}
.fcard h3{font-size:clamp(18px,1.5vw,22px);letter-spacing:-.02em;line-height:1.15;margin-top:4px}
.fcard p{color:var(--mute-d);font-size:15.5px;line-height:1.4}
.light .fcard p{color:var(--mute-l)}
/* «Что входит» — одна полоса под карточками */
.incl--row{position:static;margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,2fr);gap:12px clamp(24px,3vw,48px);align-items:start}
.incl--row h3{margin:0;padding-top:12px}
.incl--row ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,48px)}
.incl--row li{font-size:15.5px}
.incl--row li .ulink{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.ai-note{margin-top:clamp(20px,2.5vw,32px);color:var(--mute-d);font-size:16px;max-width:70ch}
.ai-note .ulink{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
/* Кейсы — карточки (1 или 2 в ряд) */
.ccards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.ccards:has(.ccard:only-child){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.ccard{border-radius:var(--r-card);background:rgba(244,238,230,.06);overflow:hidden;display:grid;align-content:start}
.ccards:has(.ccard:only-child) .ccard{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-column:1/-1}
.light .ccard{background:rgba(26,20,18,.05)}
.ccard__media{position:relative;aspect-ratio:16/9;background:var(--night-2)}
.ccards:has(.ccard:only-child) .ccard__media{aspect-ratio:auto;min-height:100%}
.ccard__media img,.ccard__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ccard__media video{opacity:0;transition:opacity .8s}
.ccard__media video.is-ready{opacity:1}
.ccard__media .facts{position:absolute;left:clamp(14px,2vw,20px);bottom:clamp(14px,2vw,20px);display:flex;gap:6px;flex-wrap:wrap;z-index:1}
.ccard__media .tag{background:rgba(26,20,18,.55);color:var(--milk);box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ccard__body{padding:clamp(20px,2.4vw,32px);display:grid;gap:14px;justify-items:start;align-content:start}
.ccard__body h3{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;line-height:1.12}
.ccard__body p{color:var(--mute-d);font-size:16px;line-height:1.45}
.light .ccard__body p{color:var(--mute-l)}
/* Срок + цена в одной липкой карточке */
.term__row{display:grid;gap:6px}
.term .lbl{font-size:var(--small);color:var(--mute-d)}
.light .term .lbl{color:var(--mute-l)}
.term__row .big{font-size:clamp(36px,3.6vw,56px);white-space:nowrap}
.term__row small{display:block;font-size:15px;color:var(--mute-d);margin-top:4px}
.term .link{font-size:15px}
/* Что фиксируем в договоре — компактный ряд из шести */
.guar-c{padding-bottom:clamp(40px,5vw,72px)}
.guar-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;counter-reset:g}
.guar-row li{border-top:1px solid var(--line-l);padding-top:14px;font-size:15.5px;line-height:1.35;display:grid;gap:8px}
.guar-row li::before{counter-increment:g;content:"0" counter(g);font-size:15px;color:var(--brick);letter-spacing:-.02em}
.guar-c__foot{margin-top:clamp(20px,2.5vw,32px)}
@media (max-width:1100px){
  .fcards,.fcards:has(li:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .guar-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .chap__head--one{grid-template-columns:1fr}
  .fcards,.fcards:has(li:nth-child(4)){grid-template-columns:1fr 1fr;gap:14px}
  .fcard h3{font-size:17px}
  .fcard p{font-size:14.5px}
  .incl--row{grid-template-columns:1fr;gap:6px;margin-top:20px}
  .incl--row ul{grid-template-columns:1fr}
  .ccards,.ccards:has(.ccard:only-child){grid-template-columns:1fr}
  .ccards:has(.ccard:only-child) .ccard{grid-template-columns:1fr}
  .ccards:has(.ccard:only-child) .ccard__media{aspect-ratio:16/9;min-height:0}
  .ccard__body{padding:18px 16px;gap:10px}
  .ccard__body h3{font-size:20px}
  .ccard__body p{font-size:15.5px}
  .term__row .big{font-size:34px}
  .guar-row{grid-template-columns:1fr 1fr;gap:14px}
  .guar-row li{font-size:14.5px;padding-top:10px}
}
@media (max-width:560px){
  .fcards,.fcards:has(li:nth-child(4)){grid-template-columns:1fr}
}
/* Хаб: блок «ИИ или съёмка» в один экран; таблица этапов крупнее и на всю ширину */
.ai__lead{max-width:78ch;color:var(--mute-d);font-size:17px;line-height:1.5;margin-bottom:clamp(24px,3vw,40px)}
.ai .cmp td{max-width:none;font-size:16.5px;line-height:1.45}
.ptable--stages{table-layout:fixed}
.ptable--stages th:nth-child(1){width:19%}.ptable--stages th:nth-child(2){width:29%}.ptable--stages th:nth-child(3){width:20%}.ptable--stages th:nth-child(4){width:32%}
.ptable--stages td{max-width:none;font-size:17px;line-height:1.45;padding-right:28px}
.ptable--stages td:first-child{font-size:clamp(19px,1.6vw,23px)}
.ptable--stages td:last-child{padding-right:0}

/* 03.10: шапка услуги компактнее — заголовок слева, цена и кнопка справа, меньше воздуха снизу */
.phead--svc{padding-bottom:clamp(28px,3.5vw,48px)}
.phead--svc h1{font-size:clamp(40px,4.9vw,70px);max-width:none}
@media (max-width:900px){.phead--svc h1{font-size:clamp(34px,9.5vw,44px)}}

/* Страницы услуг: H1 сразу под крошками (как на /about/) */
.phead--svc .phead__grid{align-items:start}