/* Страница /cooperation «Дизайнерам и архитекторам» (11.10.2026). Порт прототипа output/cooperation-demo.
   Основа — site.css (s8-*); здесь только блоки cp-* на тех же токенах (--paper, --ink, --muted, --line, --wash).
   Без скруглений и новых цветов; тёплый свет — тот же, что у веера на главной. Подключается только на этой странице. */
.cp{--glow:255 207 140;overflow-x:clip} /* свет за фото не создаёт прокрутку вбок — как на главной */
.cp .s8-section{scroll-margin-top:96px}
/* Фокус с клавиатуры: у тёмных кнопок общий цвет рамки (currentColor) светлый и сливается с фоном — рамка графитом */
.cp :is(.s8-cta,.gc-primary,.cp-sticky,.cp-seg button,.cp-flip-switch button,.cp-cats a,.cp-tg,.cp-video-toggle):focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cp-after{margin-top:40px}

/* 1. Первый экран */
.cp-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:72px;align-items:center;padding-block:40px 64px}
.cp-hero h1{font-size:clamp(42px,4.5vw,68px);max-width:720px} /* как заголовки внутренних страниц сайта (.s8-page-intro h1) */
.cp-eyebrow{display:block;font-size:12px;letter-spacing:.055em;text-transform:uppercase;color:var(--muted);line-height:1.4;margin-bottom:22px}
.cp-hero .s8-lead{margin-top:28px;max-width:560px}
.cp-down>span{display:inline-flex;rotate:135deg} /* стрелка вниз: переход к кейсам на этой странице */
.cp-proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:48px 0 0;max-width:640px}
.cp-proof div{border-top:1px solid var(--line);padding:14px 18px 0 0}
.cp-proof dt{font-size:12px;color:var(--muted);margin-bottom:4px}
.cp-proof dd{margin:0;font-size:17px;line-height:1.3}
.cp-hero-photo{position:relative;margin:0;isolation:isolate}
/* Тёплый свет за фото — как лампа за выбранной карточкой веера на главной */
.cp-hero-photo:before{content:'';position:absolute;z-index:-1;inset:-14% -18%;background:radial-gradient(closest-side,rgb(var(--glow)/.5),rgb(var(--glow)/.16) 55%,rgb(var(--glow)/0));pointer-events:none}
.cp-hero-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;box-shadow:0 28px 50px -30px #1a1e2073}
.cp-hero-photo figcaption{font-size:12px;color:var(--muted);margin-top:12px;max-width:420px}

/* 2. Заказчики */
.cp-logos{border-top:1px solid var(--line);padding:30px 0 34px}
.cp-logos h2{font-size:12px;letter-spacing:.055em;line-height:1.4}
.cp-logos ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 40px}
.cp-logos img{display:block;height:var(--h);width:auto;filter:grayscale(1) brightness(0);opacity:.62;transition:opacity .25s}
.cp-logos li:hover img{opacity:.9}

/* 3. Роли */
.cp-role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.cp-role{padding:28px 32px 8px 0;display:flex;flex-direction:column}
.cp-role+.cp-role{padding-left:32px;border-left:1px solid var(--line)}
.cp-role h3{margin:14px 0 18px;font-size:28px}
.cp-role ul{list-style:none;margin:0 0 22px;padding:0;flex:1}
.cp-role li{padding:13px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--muted)}
.cp-role li b{font-weight:400;color:var(--ink)}
.cp-role li a{color:var(--ink);text-decoration:underline;text-decoration-color:#858a92;text-underline-offset:3px}
.cp .cp-role-link{align-self:flex-start;background:none;border:0;border-bottom:1px solid var(--ink);padding:0;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.cp-seg{display:none;margin-top:24px;border:1px solid #858a92}
.cp .cp-seg button{flex:1;background:none;border:0;padding:11px 14px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer}
.cp .cp-seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}

/* 4. Кейсы: сетка 3×2 — крупнее прежних четырёх в ряд */
.cp-cases .s8-head{align-items:end}
.cp-case-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px}
.cp-case{display:flex;flex-direction:column;align-items:flex-start}
.cp-case figure{position:relative;width:100%;margin:0 0 18px;background:var(--wash);overflow:hidden}
.cp-case img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform 1s cubic-bezier(.22,.8,.22,1)}
.cp-case:hover img{transform:scale(1.03)}
/* Коллаж из четырёх мокапов (Бадаевский): высокий кадр слева, три справа */
.cp-case .cp-collage{display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:repeat(3,1fr);gap:4px;aspect-ratio:4/5;background:var(--paper)}
.cp-case .cp-collage img{aspect-ratio:auto;width:100%;height:100%;min-height:0}
.cp-case .cp-collage img:first-child{grid-row:1/4}
/* NellOsmo: тот же кадр переключается «В каталоге / В проекте» */
.cp-case .cp-flip{aspect-ratio:4/5}
.cp-case .cp-flip img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;transition:opacity .45s ease,transform 1s cubic-bezier(.22,.8,.22,1)}
.cp-case .cp-flip-project{object-position:12% 50%}
.cp-case .cp-flip-catalog{object-fit:contain;padding:9%;box-sizing:border-box;background:#dededb}
.cp-flip[data-state=project] .cp-flip-catalog,.cp-flip[data-state=catalog] .cp-flip-project{opacity:0}
.cp-flip-switch{position:absolute;left:10px;bottom:10px;z-index:1;display:flex;background:var(--paper);border:1px solid #858a92}
.cp .cp-flip-switch button{background:none;border:0;padding:0 12px;min-height:36px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.cp .cp-flip-switch button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.cp-case h3{font-size:24px;margin:10px 0 10px}
.cp-case p{font-size:14px;line-height:1.55;color:var(--muted)}
.cp-case .s8-link{margin-top:auto;padding-top:6px}
.cp-shelf .s8-label,.cp-case .s8-label{display:block;line-height:1.45}

/* 5. Не только свет: мебель и предметы из металла */
.cp-shelves{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.cp .cp-shelves h2{font-size:clamp(30px,3vw,44px);margin:16px 0 14px}
.cp-shelf figure{position:relative;margin:0 0 16px;background:var(--wash);overflow:hidden}
.cp-shelf img,.cp-shelf video{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.cp .cp-video-toggle{position:absolute;right:10px;bottom:10px;min-height:36px;padding:0 12px;background:var(--paper);border:1px solid #858a92;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.cp .cp-video-toggle[hidden]{display:none}
.cp .cp-shelf h4{font-size:24px;font-weight:400;letter-spacing:-.035em;line-height:1.2;margin:10px 0 8px}
.cp-shelf p{font-size:14px;color:var(--muted);margin-bottom:6px!important}
.cp-shelf .s8-link{margin-top:10px}
.cp-cats{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cp-cats a{display:inline-flex;align-items:center;gap:10px;min-height:36px;box-sizing:border-box;font-size:13px;border:1px solid #858a92;padding:0 12px;color:var(--ink)}
.cp-cats a:hover{background:var(--wash)}
.cp-cats li:last-child a{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cp-range{grid-column:1/-1;margin-top:20px}
.cp-range ul{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.cp-range a{display:block;color:var(--ink)}
.cp-range img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#dededb;transition:transform .6s cubic-bezier(.22,.8,.22,1)}
.cp-range li{overflow:hidden}
.cp-range a:hover img{transform:scale(1.04)}
.cp-range span{display:block;font-size:13px;line-height:1.35;margin-top:8px}
/* Полоса прокрутки лент на телефоне: какая часть ленты видна и где она */
.cp-track{display:none}

/* 6. Как идёт работа: реальная последовательность — нумерованные шаги */
.cp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));counter-reset:step;border-top:1px solid var(--line);position:relative}
.cp-steps li{counter-increment:step;padding:22px 22px 0 0;position:relative}
.cp-steps li:before{content:'0' counter(step);display:block;font-size:12px;color:var(--muted);margin-bottom:26px}
.cp-steps li:after{content:'';position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--ink)}
.cp-step-time{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.cp-step-key .cp-step-time{color:var(--ink)}
.cp-steps li.cp-step-key:after{top:-5px;width:10px;height:10px;background:rgb(var(--glow));box-shadow:0 0 0 4px rgb(var(--glow)/.35)}
/* Линия этапов при прокрутке (идея — 21st «Scroll animated timeline», сделано на CSS и JS): движется только линия
   и точки, текст шагов всегда полной яркости. Без JS и при «уменьшении движения» класса is-anim нет. --p — доля
   пройденной линии (0…1), ставит app.js. */
.cp-steps.is-anim:before{content:'';position:absolute;left:0;top:-1px;height:2px;width:calc(var(--p,0)*100%);background:var(--ink);z-index:1}
.cp-steps.is-anim li:after{background:var(--line);transition:background .4s,box-shadow .6s}
.cp-steps.is-anim li.is-on:after{background:var(--ink)}
.cp-steps.is-anim li.cp-step-key:after{box-shadow:none}
.cp-steps.is-anim li.cp-step-key.is-on:after{background:rgb(var(--glow));box-shadow:0 0 0 4px rgb(var(--glow)/.35)}
.cp-steps h3{font-size:22px;margin-bottom:8px}
.cp-steps p{font-size:14px;color:var(--muted)}

/* 7. Материалы вживую */
.cp-visit-panel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;background:var(--wash);padding:48px}
.cp-visit-panel h2{margin-bottom:18px}
.cp-visit-list{margin:0}
.cp-visit-list div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;padding:18px 0;border-top:1px solid #c9cdd2}
.cp-visit-list div:first-child{border-top:0;padding-top:0}
.cp-visit-list dt{font-size:17px}
.cp-visit-list dd{margin:0;color:var(--muted);font-size:15px}

/* 8. Условия сотрудничества */
.cp .cp-terms-lead{margin-top:22px;color:var(--ink)}
.cp .cp-terms-all{font-size:14px;color:var(--muted);margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}

/* 9. Вопросы */
.cp-faq-list{border-top:1px solid var(--line)}
.cp-faq-list details{border-bottom:1px solid var(--line)}
.cp-faq-list summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-size:19px;position:relative}
.cp-faq-list summary::-webkit-details-marker{display:none}
.cp-faq-list summary:after{content:'+';position:absolute;right:4px;top:16px;font-size:24px;color:var(--muted);transition:transform .25s}
.cp-faq-list details[open] summary:after{transform:rotate(45deg)}
.cp-faq-list p{padding:0 40px 22px 0;color:var(--muted);font-size:15px}

/* 10. Заявка: менеджер, отзывы одной строкой, выбор роли */
.cp-manager{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:30px;padding-top:20px;border-top:1px solid #c9cdd2;max-width:420px}
.cp-manager .s8-label{flex:0 0 100%}
.cp-manager b{font-weight:400;font-size:28px;letter-spacing:-.035em;line-height:1}
.cp .cp-tg{display:inline-flex;flex-direction:column;justify-content:center;min-height:48px;box-sizing:border-box;padding:6px 16px;border:1px solid var(--ink);color:var(--ink);font-size:14px;line-height:1.3}
.cp-tg span{font-size:12px;color:var(--muted)}
.cp-tg:hover{background:var(--paper)}
.cp .cp-rating{font-size:13px;line-height:1.5;color:var(--muted);margin-top:26px;max-width:420px}
.cp-rating a{color:var(--ink);text-decoration:underline;text-decoration-color:#858a92;text-underline-offset:3px}
.cp-role-pick{border:0;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cp-role-pick legend{font-size:16px;margin-bottom:10px;padding:0}
.cp-role-pick label{cursor:pointer;position:relative}
.cp .cp-role-pick input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.cp-role-pick span{display:inline-flex;align-items:center;min-height:40px;box-sizing:border-box;border:1px solid #858a92;padding:0 14px;font-size:14px;background:var(--paper)}
.cp-role-pick input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cp-role-pick input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.cp-demo-status{font-size:13px;color:var(--muted);margin:12px 0 0}

/* Плавающая кнопка на телефоне */
.cp-sticky{display:none}

@media(max-width:1199px){
 .cp-range ul{grid-template-columns:repeat(3,minmax(0,1fr))}
 .cp-hero{gap:44px}.cp-case-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cp-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:32px}
 .cp-visit-panel{gap:40px;padding:36px}.cp-visit-list div{grid-template-columns:160px minmax(0,1fr)}
}
@media(max-width:900px){
 .cp-shelves{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.cp-shelves-head{grid-column:1/-1}
 .cp-visit-panel{grid-template-columns:minmax(0,1fr);gap:36px}
 /* Первый экран на узком экране: заголовок → лид → кнопки → фото → цифры (раньше фото начиналось ниже первого экрана) */
 .cp-hero{display:flex;flex-direction:column;align-items:stretch;gap:0}
 .cp-hero-copy{display:contents}
 .cp-hero h1{order:1}.cp-hero .s8-lead{order:2}.cp-hero .s8-actions{order:3}
 .cp-hero-photo{order:4;max-width:560px;margin-top:32px}
 .cp-proof{order:5}
 .cp-role-grid{grid-template-columns:minmax(0,1fr)}
 .cp-role,.cp-role+.cp-role{padding:24px 0 8px;border-left:0}.cp-role+.cp-role{border-top:1px solid var(--line);margin-top:20px}
}
@media(max-width:767px){
 .cp-hero{padding-block:24px 40px}.cp-hero h1{font-size:40px}
 .cp-eyebrow{font-size:11px;margin-bottom:16px}
 .cp-proof{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:30px;row-gap:16px}
 .cp-logos ul{justify-content:flex-start;gap:20px 28px}.cp-logos img{height:calc(var(--h)*.78)}
 .cp-role h3{font-size:25px}
 /* Кейсы на телефоне — лента с прокруткой вбок, чтобы не растягивать страницу на шесть экранов */
 .cp-case-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;gap:16px;margin-inline:-20px;padding:0 20px 6px;scrollbar-width:none}
 .cp-case-row::-webkit-scrollbar{display:none}
 .cp-case{flex:0 0 78%;scroll-snap-align:start}
 .cp-track{display:block;position:relative;height:2px;margin-top:16px;background:var(--line)}
 .cp-track i{position:absolute;top:0;left:calc(var(--x,0)*100%);width:calc(var(--w,1)*100%);height:100%;background:var(--ink);transition:left .15s linear}
 .cp-seg{display:flex}
 /* Роли на телефоне — по одной, переключателем: три колонки подряд растягивали страницу на полтора экрана */
 .cp-role-tabs{margin:0 0 4px}.cp .cp-role-tabs button{padding:0 6px;min-height:44px;font-size:14px}
 .cp-role-grid{border-top:0}
 .cp-role-grid .cp-role{display:none;border-top:0;margin-top:0;padding-top:20px}
 .cp-role-grid[data-active="0"] .cp-role:nth-child(1),.cp-role-grid[data-active="1"] .cp-role:nth-child(2),.cp-role-grid[data-active="2"] .cp-role:nth-child(3){display:flex}
 /* Полки — в одну колонку: две по 168 px давали 22 знака в строке */
 .cp-shelves{grid-template-columns:minmax(0,1fr);gap:32px}
 .cp .cp-shelf h4{font-size:21px}
 .cp-range{margin-top:0}
 .cp-range ul{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;margin:12px -20px 0;padding:0 20px 6px;scrollbar-width:none}
 .cp-range ul::-webkit-scrollbar{display:none}
 .cp-range li{flex:0 0 38%;scroll-snap-align:start}
 .cp-cats a{min-height:44px;font-size:13px}
 .cp-role-pick span{min-height:44px}
 .cp-steps{grid-template-columns:minmax(0,1fr);border-top:0}
 .cp-steps li{padding:18px 0 18px 46px;border-top:1px solid var(--line)}
 .cp-steps li:before{position:absolute;left:0;top:20px;margin:0}
 .cp-steps li:after{display:none}
 .cp-step-key{background:linear-gradient(90deg,rgb(var(--glow)/.18),transparent 70%);transition:background .6s}
 /* На телефоне линия вертикальная — по левому краю списка */
 .cp-steps.is-anim:before{top:0;left:-11px;width:2px;height:calc(var(--p,0)*100%)}
 .cp-steps.is-anim li.cp-step-key:not(.is-on){background:none}
 .cp-visit-panel{padding:27px 21px;margin-inline:-20px}
 .cp-visit-list div{grid-template-columns:minmax(0,1fr);gap:6px}
 .cp-faq-list summary{font-size:17px}
 .cp-sticky{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:70;align-items:center;justify-content:space-between;min-height:52px;padding:0 20px;background:var(--ink);color:var(--paper)!important;font-size:15px;box-shadow:0 10px 30px -10px #0006;transition:transform .3s,opacity .3s}
 .cp-sticky[hidden]{display:flex;transform:translateY(140%);opacity:0;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.cp-case img,.cp-sticky,.cp-track i{transition:none}}