/* AVE Design Studio — страницы кейсов (portfolio/*.php) и список кейсов в features-portfolio.php */

.cs-page,
.cs-list-sec {
    --cs-red: #c80000;
    --cs-red-dark: #a90000;
    --cs-ink: #17181d;
    --cs-text: #3b3e47;
    --cs-muted: #6f7380;
    --cs-line: #e3e5ea;
    --cs-soft: #f5f6f8;
    --cs-radius: 14px;
}
.cs-main,
.cs-list-sec { color: var(--cs-text); font-family: 'Open Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.cs-main *,
.cs-main *::before,
.cs-main *::after,
.cs-list-sec *,
.cs-list-sec *::before,
.cs-list-sec *::after,
.cs-ph * { box-sizing: border-box; }
.cs-main :where(ul, ol),
.cs-list-sec :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.cs-main :where(li)::before { content: none; }
.cs-main :where(p, figure, blockquote, dl, dd) { margin: 0; }
.cs-main img { max-width: 100%; }

/* ---------- шапка страницы ---------- */

#page-header.cs-ph { height: auto; min-height: 0; padding: 205px 0 0; background: #15161b; }
#page-header.cs-ph .page-header-subject { filter: blur(10px) saturate(.8); transform: scale(1.12); background-position: center top; opacity: .5; }
#page-header.cs-ph::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, rgba(17, 18, 23, .96) 0%, rgba(17, 18, 23, .86) 48%, rgba(17, 18, 23, .62) 100%); }
#page-header.cs-ph .container,
#page-header.cs-ph .breadcrumbs { position: relative; z-index: 1; }
.cs-ph__inner { max-width: 920px; padding-bottom: 34px; }
.cs-ph__kicker { display: inline-block; margin-bottom: 14px; color: #ff5a5a; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
#page-header .cs-ph__title { margin: 0; color: #fff; font: 800 40px/1.18 'Open Sans', Arial, sans-serif; letter-spacing: -.02em; text-transform: none; text-shadow: none; }
#page-header.cs-ph .breadcrumbs { position: relative; bottom: auto; padding: 0 0 22px; }
#page-header.cs-ph .breadcrumb { position: static; float: none; margin: 0; padding: 0; text-align: left; background: none; font-size: 13px; }
#page-header.cs-ph .breadcrumb > li,
#page-header.cs-ph .breadcrumb > li > a { color: rgba(255, 255, 255, .62); font-size: 13px; }
#page-header.cs-ph .breadcrumb > li > a:hover { color: #fff; }
#page-header.cs-ph .breadcrumb > .active { color: rgba(255, 255, 255, .9); }

/* ---------- общие элементы ---------- */

.cs-sec { padding: 84px 0; }
.cs-sec--soft { background: var(--cs-soft); }
.cs-head { max-width: 760px; margin: 0 0 36px; }
.cs-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.cs-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: none; }
.cs-kicker { display: inline-block; margin: 0 0 12px; color: var(--cs-red); font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; }
.cs-kicker--light { color: #ff6b6b; }
.cs-main .cs-title { margin: 0; padding: 0; color: var(--cs-ink); font: 800 34px/1.2 'Open Sans', Arial, sans-serif; letter-spacing: -.015em; text-transform: none; }
.cs-lead { margin-top: 12px; color: var(--cs-muted); font-size: 16px; line-height: 1.6; }
.cs-text p { margin: 0 0 16px; font-size: 16px; line-height: 1.75; }
.cs-text p:last-child { margin-bottom: 0; }
.cs-text--wide { max-width: 860px; margin-top: 28px; }
.cs-note { max-width: 860px; margin-top: 18px; padding-left: 14px; border-left: 3px solid var(--cs-line); color: var(--cs-muted); font-size: 13px; line-height: 1.6; }
.cs-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 56px; align-items: start; }
.cs-split .cs-head { margin: 0; position: sticky; top: 110px; }

.cs-list li { position: relative; padding: 0 0 0 26px; margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.cs-list li:last-child { margin-bottom: 0; }
.cs-list li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--cs-red); }
.cs-list--check li::before { content: ''; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: rgba(200, 0, 0, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c80000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 10px no-repeat; }
.cs-list--num { counter-reset: csn; }
.cs-list--num li { counter-increment: csn; padding-left: 34px; }
.cs-list--num li::before { content: counter(csn); top: 1px; left: 0; width: 22px; height: 22px; background: var(--cs-red); color: #fff; font-size: 12px; font-weight: 800; line-height: 22px; text-align: center; }

.cs-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border: 2px solid transparent; border-radius: 10px; font: 700 14px/1.2 'Open Sans', Arial, sans-serif; letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.cs-btn:hover,
.cs-btn:focus { text-decoration: none; }
.cs-btn:active { transform: translateY(1px); }
.cs-btn--primary { background: var(--cs-red); color: #fff; box-shadow: 0 10px 24px rgba(200, 0, 0, .22); }
.cs-btn--primary:hover,
.cs-btn--primary:focus { background: var(--cs-red-dark); color: #fff; }
.cs-btn--line { border-color: var(--cs-line); background: #fff; color: var(--cs-ink); }
.cs-btn--line:hover,
.cs-btn--line:focus { border-color: var(--cs-ink); color: var(--cs-ink); }
.cs-btn--ghost { border-color: rgba(255, 255, 255, .35); background: transparent; color: #fff; }
.cs-btn--ghost:hover,
.cs-btn--ghost:focus { border-color: #fff; color: #fff; }
.cs-btn:focus-visible,
.cs-chip:focus-visible,
.cs-card:focus-visible { outline: 2px solid var(--cs-red); outline-offset: 3px; }

/* ---------- KPI ---------- */

.cs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cs-kpi { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; border: 1px solid var(--cs-line); border-radius: 12px; background: #fff; }
.cs-kpi__v { color: var(--cs-red); font: 800 26px/1.1 'Open Sans', Arial, sans-serif; letter-spacing: -.02em; }
.cs-kpi__l { color: var(--cs-muted); font-size: 13px; line-height: 1.4; }
.cs-kpis--hero { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 26px 0 0; }
.cs-kpis--hero:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-kpis--hero:has(> :only-child) { grid-template-columns: minmax(0, 260px); }
.cs-kpis--big { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cs-kpis--big .cs-kpi { padding: 24px 22px 22px; border-radius: var(--cs-radius); box-shadow: 0 10px 30px rgba(23, 24, 29, .04); }
.cs-kpis--big .cs-kpi__v { font-size: 32px; white-space: nowrap; }
.cs-kpis--big .cs-kpi__l { font-size: 14px; }

/* ---------- первый экран ---------- */

.cs-hero { padding: 64px 0 56px; overflow: hidden; }
.cs-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 56px; align-items: center; }
.cs-hero__client { margin: 0 0 14px; color: var(--cs-ink); font-size: 22px; font-weight: 800; line-height: 1.3; }
.cs-hero__client span { display: block; margin-bottom: 4px; color: var(--cs-muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cs-hero__summary { margin: 0; color: var(--cs-text); font-size: 17px; line-height: 1.7; }
.cs-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.cs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; margin: 52px 0 0; border: 1px solid var(--cs-line); border-radius: var(--cs-radius); background: #fff; overflow: hidden; }
.cs-facts > div { padding: 18px 22px; border-right: 1px solid var(--cs-line); border-bottom: 1px solid var(--cs-line); margin: 0 -1px -1px 0; }
.cs-facts dt { margin-bottom: 4px; color: var(--cs-muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cs-facts dd { color: var(--cs-ink); font-size: 14px; font-weight: 600; line-height: 1.5; }
.cs-link { display: inline-flex; gap: 4px; margin-right: 12px; color: var(--cs-red); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(200, 0, 0, .25); }
.cs-link:hover { color: var(--cs-red-dark); text-decoration: none; border-bottom-color: currentColor; }

/* ноутбук с наклоном */
.cs-mockup { position: relative; padding: 10px 0 26px 18px; perspective: 1800px; }
.cs-laptop { position: relative; transform: rotateY(-11deg) rotateX(5deg) rotateZ(.6deg); transform-origin: 60% 50%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.cs-mockup:hover .cs-laptop { transform: rotateY(-4deg) rotateX(2deg) rotateZ(0); }
.cs-laptop__lid { padding: 12px 12px 14px; border-radius: 18px 18px 6px 6px; background: linear-gradient(160deg, #2a2d36, #121318); box-shadow: 0 40px 80px -20px rgba(23, 24, 29, .45), 0 18px 30px -18px rgba(23, 24, 29, .35), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.cs-laptop__base { position: relative; width: 112%; height: 16px; margin: 0 -6%; border-radius: 2px 2px 14px 14px; background: linear-gradient(180deg, #d9dbe1 0%, #b9bcc5 55%, #8f939d 100%); box-shadow: 0 18px 30px -12px rgba(23, 24, 29, .4); }
.cs-laptop__base::before { content: ''; position: absolute; left: 50%; top: 0; width: 18%; height: 6px; margin-left: -9%; border-radius: 0 0 8px 8px; background: #9a9ea8; }
.cs-shot--hero { border-radius: 6px; box-shadow: none; }
.cs-shot--hero .cs-shot__bar { height: 26px; }
.cs-mockup__phone { position: absolute; left: -10px; bottom: 0; width: 23%; min-width: 96px; z-index: 2; }

/* окно браузера со скриншотом */
.cs-shot { position: relative; margin: 0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(23, 24, 29, .06), 0 18px 44px -18px rgba(23, 24, 29, .28); overflow: hidden; }
.cs-shot__link { display: block; color: inherit; text-decoration: none; cursor: zoom-in; }
.cs-shot__bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #eef0f3; border-bottom: 1px solid #e1e4e9; }
.cs-shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d3d6dc; }
.cs-shot__bar i:nth-child(1) { background: #ff6159; }
.cs-shot__bar i:nth-child(2) { background: #ffbd2e; }
.cs-shot__bar i:nth-child(3) { background: #28c941; }
.cs-shot__url { flex: 1; max-width: 60%; margin: 0 auto; padding: 3px 12px; border-radius: 6px; background: #fff; color: #8a8d96; font-size: 11px; line-height: 1.3; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-shot__screen { position: relative; display: block; height: 0; padding-top: var(--cs-ratio); overflow: hidden; background: #f3f4f6; }
.cs-shot__screen img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.cs-shot__screen.is-cover img { height: 100%; object-fit: cover; object-position: left top; }
.cs-shot__screen.is-long img { transition: transform var(--cs-dur, 5s) ease-in-out; will-change: transform; }
.cs-shot:hover .cs-shot__screen.is-long img,
.cs-shot__link:focus .cs-shot__screen.is-long img { transform: translateY(var(--cs-shift)); }
.cs-shot__screen.is-long::after { content: 'Наведите, чтобы прокрутить'; position: absolute; right: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(23, 24, 29, .72); color: #fff; font-size: 11px; font-weight: 600; transition: opacity .2s ease; }
.cs-shot:hover .cs-shot__screen.is-long::after { opacity: 0; }
.cs-shot__cap { padding: 12px 16px 14px; color: var(--cs-muted); font-size: 13px; line-height: 1.5; border-top: 1px solid #eef0f3; }
@media (hover: none) {
    .cs-shot__screen.is-long::after { content: 'Нажмите, чтобы открыть'; }
}

/* макет брендинга / полиграфии */
.cs-print { margin: 0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(23, 24, 29, .06), 0 18px 44px -18px rgba(23, 24, 29, .28); overflow: hidden; }
.cs-print__link { display: block; overflow: hidden; cursor: zoom-in; }
.cs-print__link img { display: block; width: 100%; height: auto; transition: transform .5s ease; }
.cs-print__link:hover img { transform: scale(1.03); }

/* телефон */
.cs-phone { margin: 0; }
.cs-phone__frame { display: block; padding: 8px; border-radius: 26px; background: linear-gradient(160deg, #2a2d36, #0f1014); box-shadow: 0 30px 60px -18px rgba(23, 24, 29, .5), inset 0 0 0 1px rgba(255, 255, 255, .08); cursor: zoom-in; }
.cs-phone__screen { position: relative; display: block; height: 0; padding-top: 205%; border-radius: 19px; overflow: hidden; background: #fff; }
.cs-phone__screen img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.cs-phone__screen.is-long img { transition: transform var(--cs-dur, 8s) ease-in-out; }
.cs-phone__frame:hover .cs-phone__screen.is-long img { transform: translateY(var(--cs-shift)); }
.cs-phones { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin-top: 40px; }
.cs-phones .cs-phone { width: 240px; }

/* фото и видео в первом экране */
.cs-photo-hero a,
.cs-video-hero a { display: block; border-radius: var(--cs-radius); overflow: hidden; box-shadow: 0 30px 60px -24px rgba(23, 24, 29, .45); }
.cs-photo-hero img,
.cs-video-hero img { display: block; width: 100%; height: auto; transition: transform .6s ease; }
.cs-photo-hero a:hover img { transform: scale(1.03); }
.cs-video-hero figcaption { margin-top: 12px; color: var(--cs-muted); font-size: 13px; }
.cs-video__link { position: relative; display: block; border-radius: 12px; overflow: hidden; background: #000; }
.cs-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(200, 0, 0, .92); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .2s ease; }
.cs-play::after { content: ''; position: absolute; left: 27px; top: 22px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; }
.cs-video__link:hover .cs-play { transform: scale(1.08); }

/* ---------- ситуация ---------- */

.cs-problem { margin: 26px 0 0; padding: 22px 24px; border-radius: 12px; background: #fff5f5; border: 1px solid rgba(200, 0, 0, .14); }
.cs-problem__label { display: block; margin-bottom: 8px; color: var(--cs-red); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cs-problem p { margin: 0; color: var(--cs-ink); font-size: 16px; line-height: 1.7; }
.cs-need { margin-top: 26px; }
.cs-need__intro { margin: 0 0 12px !important; color: var(--cs-ink); font-weight: 700; }
.cs-brief { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 40px; }
.cs-brief > div { padding: 20px 22px; border-radius: 12px; background: var(--cs-soft); }
.cs-brief dt { margin-bottom: 6px; color: var(--cs-red); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cs-brief dd { font-size: 14px; line-height: 1.6; }

/* ---------- шаги ---------- */

.cs-steps { display: grid; gap: 18px; max-width: 1080px; margin: 0 auto; }
.cs-step { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 30px 32px; border: 1px solid var(--cs-line); border-radius: var(--cs-radius); background: #fff; }
.cs-step--media { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
.cs-step--media:nth-child(even) .cs-step__media { order: -1; }
.cs-step__n { display: inline-block; margin-bottom: 10px; color: var(--cs-red); font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.cs-main .cs-step__t { margin: 0 0 12px; padding: 0; color: var(--cs-ink); font: 800 21px/1.3 'Open Sans', Arial, sans-serif; text-transform: none; letter-spacing: -.01em; }
.cs-step__body p { margin: 0 0 14px; font-size: 15px; line-height: 1.7; }
.cs-step__body .cs-list { margin-top: 4px; }
.cs-quote { margin: 4px 0 16px; padding: 18px 22px; border-radius: 12px; background: var(--cs-ink); color: #fff; font-size: 18px; font-weight: 700; line-height: 1.45; }
.cs-quote span { display: block; margin-bottom: 6px; color: rgba(255, 255, 255, .55); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cs-step__media .cs-phone { max-width: 260px; margin: 0 auto; }

/* ---------- результат ---------- */

.cs-compare-wrap { margin-top: 26px; border: 1px solid var(--cs-line); border-radius: var(--cs-radius); overflow-x: auto; background: #fff; }
.cs-compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.cs-compare th,
.cs-compare td { padding: 14px 20px; border-bottom: 1px solid var(--cs-line); text-align: left; }
.cs-compare thead th { background: var(--cs-soft); color: var(--cs-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cs-compare tbody th { color: var(--cs-ink); font-weight: 600; }
.cs-compare tbody tr:last-child > * { border-bottom: 0; }
.cs-compare td b { color: var(--cs-red); }
.cs-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.cs-ba__col { padding: 24px; border-radius: var(--cs-radius); }
.cs-ba__col--before { background: var(--cs-soft); }
.cs-ba__col--after { background: var(--cs-ink); color: rgba(255, 255, 255, .86); }
.cs-ba__label { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--cs-ink); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cs-ba__col--after .cs-ba__label { background: var(--cs-red); color: #fff; }
.cs-ba p { font-size: 15px; line-height: 1.7; }

/* ---------- галерея ---------- */

.cs-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.cs-photos { columns: 3 280px; column-gap: 16px; }
.cs-photo { display: block; margin: 0 0 16px; border-radius: 12px; overflow: hidden; break-inside: avoid; cursor: zoom-in; }
.cs-photo img { display: block; width: 100%; height: auto; transition: transform .5s ease; }
.cs-photo:hover img { transform: scale(1.04); }
.cs-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cs-video figcaption { margin-top: 10px; color: var(--cs-ink); font-size: 14px; font-weight: 600; line-height: 1.45; }
.cs-video img { display: block; width: 100%; height: auto; transition: transform .5s ease, opacity .3s ease; }
.cs-video__link:hover img { transform: scale(1.04); opacity: .9; }

/* ---------- вывод ---------- */

.cs-insight { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.cs-insight__text { color: var(--cs-ink); font-size: 21px; font-weight: 600; line-height: 1.6; letter-spacing: -.005em; }
.cs-insight__main .cs-list { margin-top: 22px; }
.cs-insight__main .cs-list li { font-size: 16px; }
.cs-insight__aside { padding: 30px 30px 32px; border-radius: 16px; background: var(--cs-ink); color: rgba(255, 255, 255, .8); box-shadow: 0 24px 60px rgba(23, 24, 29, .18); }
.cs-main .cs-insight__h { margin: 0 0 12px; padding: 0; color: #fff; font: 800 21px/1.3 'Open Sans', Arial, sans-serif; text-transform: none; letter-spacing: 0; }
.cs-insight__aside p { font-size: 15px; line-height: 1.7; }
.cs-insight__sub { margin: 18px 0 10px !important; color: #fff; font-weight: 700; }
.cs-insight__aside .cs-list li { color: rgba(255, 255, 255, .86); }

/* ---------- теги ---------- */

.cs-tags-sec { padding: 0 0 56px; }
.cs-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 28px; border-top: 1px solid var(--cs-line); }
.cs-tags__label { margin-right: 6px; color: var(--cs-muted); font-size: 13px; font-weight: 700; }
.cs-tag { padding: 7px 14px; border: 1px solid var(--cs-line); border-radius: 999px; background: #fff; color: var(--cs-ink); font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.cs-tag:hover,
.cs-tag:focus { border-color: var(--cs-red); color: var(--cs-red); text-decoration: none; }
.cs-tag--niche { background: var(--cs-soft); }

/* ---------- CTA ---------- */

.cs-cta { position: relative; padding: 90px 0; background: #15161b; color: rgba(255, 255, 255, .8); overflow: hidden; }
.cs-cta::before { content: ''; position: absolute; right: -180px; top: -220px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 0, 0, .35), rgba(200, 0, 0, 0) 70%); }
.cs-cta .container { position: relative; }
.cs-cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 56px; align-items: center; }
.cs-main .cs-cta__title { margin: 0 0 16px; padding: 0; color: #fff; font: 800 34px/1.2 'Open Sans', Arial, sans-serif; text-transform: none; letter-spacing: -.015em; }
.cs-cta__lead { font-size: 17px; line-height: 1.7; }
.cs-cta__list { margin: 22px 0 0 !important; }
.cs-cta__list li { position: relative; padding-left: 28px; margin-bottom: 10px; font-size: 15px; line-height: 1.6; }
.cs-cta__list li::before { content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--cs-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.cs-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cs-cta__phone { margin-top: 18px !important; color: rgba(255, 255, 255, .6); font-size: 14px; }
.cs-cta__phone a { color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cs-cta__form .ave-card { box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.cs-cta__form.is-flash .ave-card { animation: cs-flash 1.2s ease; }
@keyframes cs-flash { 0%, 100% { box-shadow: 0 30px 70px rgba(0, 0, 0, .35); } 30% { box-shadow: 0 0 0 4px rgba(255, 90, 90, .8), 0 30px 70px rgba(0, 0, 0, .35); } }

/* ---------- карточки кейсов ---------- */

.cs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cs-card { display: flex; flex-direction: column; border: 1px solid var(--cs-line); border-radius: var(--cs-radius); background: #fff; color: var(--cs-text); text-decoration: none; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.cs-card:hover,
.cs-card:focus { border-color: rgba(200, 0, 0, .35); box-shadow: 0 18px 44px rgba(23, 24, 29, .1); transform: translateY(-3px); color: var(--cs-text); text-decoration: none; }
.cs-card[hidden] { display: none; }
.cs-card__img { position: relative; display: block; height: 0; padding-top: 62.5%; overflow: hidden; background: var(--cs-soft); }
.cs-card__img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .5s ease; }
.cs-card:hover .cs-card__img img { transform: scale(1.04); }
.cs-card__b { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 20px; }
.cs-card__niche { margin-bottom: 6px; color: var(--cs-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cs-card__t { margin-bottom: 10px; color: var(--cs-ink); font-size: 17px; font-weight: 800; line-height: 1.35; }
.cs-card__r { display: block; margin-bottom: 14px; color: var(--cs-red); font-size: 14px; font-weight: 700; line-height: 1.45; }
.cs-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.cs-card__tags span { padding: 3px 9px; border-radius: 999px; background: var(--cs-soft); color: var(--cs-muted); font-size: 11px; font-weight: 600; }
.cs-more { flex: none; color: var(--cs-red); font-weight: 700; text-decoration: none; }
.cs-more:hover { color: var(--cs-red-dark); }

/* ---------- навигация между кейсами ---------- */

.cs-pager { padding: 34px 0; border-top: 1px solid var(--cs-line); background: #fff; }
.cs-pager__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.cs-pager__link { display: block; color: var(--cs-ink); text-decoration: none; }
.cs-pager__link span { display: block; margin-bottom: 4px; color: var(--cs-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cs-pager__link b { font-size: 15px; line-height: 1.4; }
.cs-pager__link:hover b { color: var(--cs-red); }
.cs-pager__link--next { text-align: right; }
.cs-pager__all { padding: 10px 18px; border: 1px solid var(--cs-line); border-radius: 999px; color: var(--cs-ink); font-size: 13px; font-weight: 700; text-decoration: none; }
.cs-pager__all:hover { border-color: var(--cs-ink); color: var(--cs-ink); text-decoration: none; }

/* ---------- список кейсов (features-portfolio.php) ---------- */

.cs-list-sec { padding: 56px 0 90px; }
.cs-filters { margin-bottom: 30px; }
.cs-filters__row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.cs-filters__label { flex: none; width: 64px; padding-top: 9px; color: var(--cs-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cs-filters__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 8px 14px; border: 1px solid var(--cs-line); border-radius: 999px; background: #fff; color: var(--cs-ink); font: 600 13px/1.3 'Open Sans', Arial, sans-serif; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.cs-chip span { color: var(--cs-muted); font-size: 12px; font-weight: 700; }
.cs-chip:hover { border-color: rgba(200, 0, 0, .35); }
.cs-chip.is-active { border-color: var(--cs-ink); background: var(--cs-ink); color: #fff; }
.cs-chip.is-active span { color: rgba(255, 255, 255, .6); }
.cs-filters__count { margin: 14px 0 0; color: var(--cs-muted); font-size: 14px; }
.cs-filters__count b { color: var(--cs-ink); }
.cs-cards--list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-empty { padding: 40px 0; text-align: center; color: var(--cs-muted); }
.cs-reset { border: 0; background: none; color: var(--cs-red); font-weight: 700; text-decoration: underline; cursor: pointer; }
.cs-more-btn { margin: 34px 0 0; text-align: center; }
.cs-more-btn [hidden] { display: none; }
/* пагинация списка кейсов */
.cs-pages { margin: 22px 0 0; text-align: center; }
.cs-pages[hidden] { display: none; }
.cs-pages__info { margin: 0 0 14px; color: var(--cs-muted); font-size: 14px; line-height: 1.5; }
.cs-pages__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.cs-pg { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--cs-line); border-radius: 10px; background: #fff; color: var(--cs-ink); font: 700 15px/1 'Open Sans', Arial, sans-serif; text-decoration: none; transition: border-color .2s, color .2s, background-color .2s; }
a.cs-pg:hover, a.cs-pg:focus { border-color: var(--cs-red); color: var(--cs-red); text-decoration: none; }
a.cs-pg:focus-visible { outline: 2px solid var(--cs-red); outline-offset: 3px; }
.cs-pg.is-current, a.cs-pg.is-current:hover { border-color: var(--cs-red); background: var(--cs-red); color: #fff; cursor: default; }
.cs-pg--gap { min-width: 24px; padding: 0; border-color: transparent; background: none; color: var(--cs-muted); }
.cs-pg--arrow { font-size: 22px; padding-bottom: 3px; }
.cs-pg.is-disabled { opacity: .35; cursor: default; }
.cs-pg--compact { display: none; border-color: transparent; background: none; color: var(--cs-ink); }
.cs-cards [hidden] { display: none !important; }
@media (max-width: 575px) {
    .cs-pages__list .cs-pg:not(.cs-pg--arrow):not(.cs-pg--compact) { display: none; }
    .cs-pages__list .cs-pg--compact { display: inline-flex; min-width: 72px; }
    .cs-pg--arrow { min-width: 46px; height: 46px; }
    .cs-more-btn .cs-btn { width: 100%; }
}

/* ---------- адаптив ---------- */

@media (max-width: 1199px) {
    #page-header .cs-ph__title { font-size: 34px; }
    .cs-hero__grid { gap: 40px; }
}
@media (max-width: 991px) {
    #page-header.cs-ph { padding-top: 170px; }
    .cs-sec { padding: 64px 0; }
    .cs-hero__grid,
    .cs-split,
    .cs-insight,
    .cs-cta__grid,
    .cs-step--media { grid-template-columns: 1fr; }
    .cs-split { gap: 22px; }
    .cs-split .cs-head { position: static; }
    .cs-step--media:nth-child(even) .cs-step__media { order: 0; }
    .cs-hero__media { max-width: 680px; }
    .cs-cards,
    .cs-cards--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    #page-header.cs-ph { padding-top: 150px; }
    #page-header .cs-ph__title { font-size: 26px; line-height: 1.25; }
    .cs-ph__inner { padding-bottom: 22px; }
    .cs-sec { padding: 52px 0; }
    .cs-head { margin-bottom: 26px; }
    .cs-main .cs-title,
    .cs-main .cs-cta__title { font-size: 26px; }
    .cs-hero { padding: 36px 0 40px; }
    .cs-hero__client { font-size: 19px; }
    .cs-hero__summary { font-size: 16px; }
    .cs-hero__btns .cs-btn,
    .cs-cta__btns .cs-btn { flex: 1 1 100%; }
    .cs-kpi__v { font-size: 22px; }
    .cs-kpis--big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cs-kpis--big .cs-kpi { padding: 18px 16px; }
    .cs-kpis--big .cs-kpi__v { font-size: 22px; white-space: normal; }
    .cs-mockup { padding-left: 0; }
    .cs-laptop,
    .cs-mockup:hover .cs-laptop { transform: none; }
    .cs-laptop__lid { padding: 7px 7px 9px; border-radius: 12px 12px 4px 4px; }
    .cs-laptop__base { width: 106%; margin: 0 -3%; height: 11px; }
    .cs-mockup__phone { left: auto; right: 0; bottom: -6px; width: 26%; min-width: 0; }
    .cs-facts { margin-top: 36px; grid-template-columns: 1fr; }
    .cs-step { padding: 22px 20px; gap: 22px; }
    .cs-main .cs-step__t { font-size: 19px; }
    .cs-gallery { grid-template-columns: 1fr; gap: 20px; }
    .cs-photos { columns: 2 140px; column-gap: 10px; }
    .cs-photo { margin-bottom: 10px; }
    .cs-videos { grid-template-columns: 1fr; }
    .cs-ba { grid-template-columns: 1fr; }
    .cs-insight__text { font-size: 18px; }
    .cs-insight__aside { padding: 24px 20px; }
    .cs-cta { padding: 60px 0; }
    .cs-cards,
    .cs-cards--list { grid-template-columns: 1fr; gap: 16px; }
    .cs-head--row { display: block; }
    .cs-head--row .cs-more { display: inline-block; margin-top: 12px; }
    .cs-pager__grid { grid-template-columns: 1fr 1fr; }
    .cs-pager__all { display: none; }
    .cs-pager__link b { font-size: 14px; }
    .cs-compare th,
    .cs-compare td { padding: 12px 14px; font-size: 14px; }
    .cs-filters__row { display: block; }
    .cs-filters__label { display: block; width: auto; padding: 0 0 8px; }
    .cs-filters__chips { flex-wrap: nowrap; margin: 0 -15px; padding: 0 15px 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .cs-filters__chips::-webkit-scrollbar { display: none; }
    .cs-chip { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-laptop,
    .cs-shot__screen.is-long img,
    .cs-phone__screen.is-long img,
    .cs-card,
    .cs-card__img img,
    .cs-photo img { transition: none; }
    .cs-mockup:hover .cs-laptop { transform: rotateY(-11deg) rotateX(5deg) rotateZ(.6deg); }
}