/* Базовые правила (перенесены из оболочки Claude) */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* ============================================================
   НЕ ДЛЯ ВСЕХ — лендинг v2
   v3: единый чёрный фон как в шапке; главный герой — молния-стежок, которая
   прошивает страницу и расстёгивается/застёгивается при скролле.
   Шрифт Onest (гротеск, как в карточках товара), Tektur — для микро-меток.
   ============================================================ */

@font-face{font-family:"Onest";font-weight:300;font-display:swap;src:url("../fonts/onest-cyrillic-300-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-weight:300;font-display:swap;src:url("../fonts/onest-latin-300-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-weight:400;font-display:swap;src:url("../fonts/onest-cyrillic-400-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-weight:400;font-display:swap;src:url("../fonts/onest-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-weight:500;font-display:swap;src:url("../fonts/onest-cyrillic-500-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-weight:500;font-display:swap;src:url("../fonts/onest-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-weight:600;font-display:swap;src:url("../fonts/onest-cyrillic-600-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-weight:600;font-display:swap;src:url("../fonts/onest-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tektur";font-weight:700;font-display:swap;src:url("../fonts/tektur-cyrillic-700-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Tektur";font-weight:700;font-display:swap;src:url("../fonts/tektur-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"NDV Graffiti";font-display:block;src:url("../fonts/ndv-graffiti.ttf") format("truetype")}

:root{
  color-scheme: dark;
  --paper:#050505;     /* единый чёрный фон, как в шапке */
  --card:#111113;      /* поверхности карточек */
  --white:#ffffff;
  --stone:#1a1a1c;     /* подложки фото */
  --line:rgba(255,255,255,.12);
  --ink:#f1f1ef;       /* текст */
  --grey:#9b9ba1;      /* второстепенный текст */
  --mist:#6c6c72;
  --night:#050505;     /* тёмные секции */
  --night-2:#18181a;
  --on-night:#f2f2f0;
  --on-night-2:#a5a5aa;
  --dot:#d7010d;       /* фирменный красный — только точкой */
  --r:18px;            /* радиус фото, как в карточках товара */
  --gutter:clamp(16px,4vw,56px);
  --sans:"Onest","Helvetica Neue",Arial,sans-serif;
  --tech:"Tektur","Onest",Arial,sans-serif;
  --graff:"NDV Graffiti","Onest",sans-serif;   /* фирменный граффити: одно крупное слово на раздел */
  --nav-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* ---- Шкала текста: одна на весь сайт. Одинаковые элементы — одинаковые значения ---- */
  --fs-label:.75rem;                                                  /* метка раздела (Tektur, заглавные): 12 px */
  --fs-h2:clamp(2.25rem,min(1.2rem + 3.6vw,7.4svh),4.25rem);         /* заголовок раздела: 36 → 68 px (на ПК ещё и по высоте окна — «Процесс» в одном экране) */
  --fs-h3:clamp(1.5rem,1.1rem + 1.25vw,2.25rem);                      /* подзаголовок: 24 → 36 px */
  --fs-body:clamp(1rem,.92rem + .3vw,1.1875rem);                      /* основной текст: 16 → 19 px */
  --fs-small:.875rem;                                                 /* мелкий текст: 14 px */
  --lh-h2:1.05; --lh-h3:1.15; --lh-body:1.6; --lh-small:1.45;
  --ls-h2:-.035em; --ls-h3:-.02em; --ls-label:.22em;
  --measure:62ch;                                                     /* длина строки текста */
  /* ---- Отступы ---- */
  --sp-label:1.25rem;                                                 /* метка → заголовок */
  --sp-text:clamp(1rem,.75rem + .8vw,1.5rem);                         /* заголовок → текст */
  --sp-head:clamp(40px,5vw,80px);                                     /* шапка раздела → содержимое */
  --sp-block:clamp(56px,7vw,110px);                                   /* между блоками внутри раздела */
  --sp-section:clamp(88px,12vw,180px);                                /* сверху и снизу раздела */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* единый фон всего лендинга: стена с граффити, приглушена до фактуры и стоит на месте, пока листается контент */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;will-change:transform; /* свой слой: Safari не перерисовывает стену при прокрутке */
  background:linear-gradient(rgba(5,5,5,.56),rgba(5,5,5,.56)),url(../img/bg-wall.webp) center/cover no-repeat}
@media (max-aspect-ratio:4/5){body::before{background-image:linear-gradient(rgba(5,5,5,.56),rgba(5,5,5,.56)),url(../img/bg-wall-tall.webp)}}
body.is-locked{overflow:hidden}
img,video,canvas{max-width:100%;display:block}
img{height:auto} /* width/height в разметке — только для пропорций, без растягивания */
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol,dl,dd,figure{margin:0;padding:0;list-style:none}
p,h1,h2,h3,h4{margin:0}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
::selection{background:var(--ink);color:#000}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--white);color:var(--ink);padding:8px 14px}
.skip:focus{left:8px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{width:min(1320px,100% - 2*var(--gutter));margin-inline:auto}

/* ---------- Типографика ---------- */
.label{display:flex;align-items:center;gap:.6em;margin-bottom:var(--sp-label);font:700 var(--fs-label)/1 var(--tech);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--grey)}
.label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot)}
.label--light{color:var(--on-night-2)}
.title{font:500 var(--fs-h2)/var(--lh-h2) var(--sans);letter-spacing:var(--ls-h2);color:var(--ink);text-wrap:balance}
.h3{font:500 var(--fs-h3)/var(--lh-h3) var(--sans);letter-spacing:var(--ls-h3);text-wrap:balance}
.title--graff{font:400 clamp(5.5rem,14vw,13.75rem)/.9 var(--graff);letter-spacing:0;text-transform:none;padding-block:.16em .22em} /* место под росчерки букв выше и ниже строки — чтобы не наезжали на соседний текст */
.title--sm{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
.title--light{color:var(--on-night)}
.lead{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;text-wrap:pretty}
.section{padding-block:var(--sp-section);position:relative}
.head{max-width:56rem;margin-bottom:var(--sp-head)}
.head__sub{margin-top:var(--sp-text);max-width:var(--measure);color:var(--grey);font-size:var(--fs-body);line-height:var(--lh-body);text-wrap:pretty}

/* ---------- Фото: скругление + hover zoom ---------- */
.ph{position:relative;overflow:hidden;border-radius:var(--r);background:var(--stone);isolation:isolate}
.ph img{width:100%;height:100%;object-fit:cover;scale:var(--z,1);translate:0 var(--py,0px);transition:scale 1.1s var(--ease)}
.ph:hover img{--z:1.07}
.ph[data-par] img{--z:1.12}
.ph[data-par]:hover img{--z:1.19}

/* ---------- Анимации текста ---------- */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block}
.js .split .w>span{transform:translateY(105%);transition:transform 1s var(--ease);transition-delay:calc(var(--d,0) * 55ms)}
.js .split.in .w>span{transform:none}
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--rd,0ms)}
.js .rv.in{opacity:1;transform:none}

/* ---------- Навигация ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:calc(var(--nav-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--gutter) 0;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;color:var(--white);transition:color .4s}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(243,243,241,0);border-bottom:1px solid transparent;transition:background .4s,border-color .4s}
.nav.is-light{color:var(--white)}
.nav.is-light::before{background:rgba(5,5,5,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,.08)}
.nav__brand{display:flex;align-items:center;gap:12px;justify-self:start;font:500 .82rem/1 var(--sans);letter-spacing:.02em}
.nav__brand img{width:52px;height:auto;filter:drop-shadow(0 0 5px rgba(255,255,255,.55)) drop-shadow(0 0 1px #fff);transition:filter .4s}

.nav__links{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px)}
.nav__links a,.nav__links button{position:relative;padding:8px 0;font:500 .86rem/1 var(--sans);opacity:.72;transition:opacity .2s}
.nav__links a::after,.nav__links button::after{content:"";position:absolute;left:50%;bottom:-2px;width:5px;height:5px;border-radius:50%;background:var(--dot);transform:translateX(-50%) scale(0);transition:transform .3s var(--ease)}
.nav__links a:hover,.nav__links button:hover,.nav__links .is-active{opacity:1}
/* «Заказать мерч» — плашка в меню (раздел появится на полном сайте) */
.nav__links .nav__merch{opacity:1;padding:8px 15px;border:1px solid rgba(255,255,255,.38);border-radius:999px;transition:border-color .2s,background .2s}
.nav__links .nav__merch::after{display:none}
.nav__links .nav__merch:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.08)}
.nav__links .is-active::after{transform:translateX(-50%) scale(1)}
.nav__icons{display:flex;align-items:center;justify-content:flex-end;gap:clamp(14px,1.8vw,24px)}
.icon-btn{width:22px;height:22px;transition:opacity .2s,transform .2s;opacity:.85}
.icon-btn svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{opacity:1;transform:translateY(-2px)}
.burger{display:none;width:30px;height:24px;position:relative}
.burger span{position:absolute;left:3px;right:3px;height:1.5px;background:currentColor;transition:transform .3s,top .3s}
.burger span:first-child{top:8px}.burger span:last-child{top:15px}
.burger[aria-expanded="true"] span:first-child{top:11px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:11px;transform:rotate(-45deg)}

/* ---------- 1. Шапка «виртуальный магазин» ----------
   Один экран: фон-петля фасада; поверх по маске трёх проёмов — ставни и стекло; поверх всего — путь внутрь
   (видео вперёд и то же видео назад, видно то, у которого класс top); сверху — дождь и подсказка. */
.shop{position:relative;height:100vh;height:100svh;min-height:480px;overflow:hidden;background:transparent;color:var(--white)}
/* низ шапки плавно растворяется в общем фоне сайта (как у прежней шапки); подсказка — вне растворения */
.shop__scene{position:absolute;inset:0;background:#000;-webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent);mask-image:linear-gradient(to bottom,#000 86%,transparent)}
.shop__shade{position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 20%)}   /* меню читается и над светлым кадром */
.shop__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shop__layer{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1070' viewBox='0 0 1920 1070'%3E%3Cfilter id='f'%3E%3CfeGaussianBlur stdDeviation='2.5'/%3E%3C/filter%3E%3Cg fill='white' filter='url%28%23f%29'%3E%3Crect x='349' y='500' width='295' height='458'/%3E%3Crect x='873' y='500' width='267' height='458'/%3E%3Crect x='1362' y='500' width='294' height='458'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1070' viewBox='0 0 1920 1070'%3E%3Cfilter id='f'%3E%3CfeGaussianBlur stdDeviation='2.5'/%3E%3C/filter%3E%3Cg fill='white' filter='url%28%23f%29'%3E%3Crect x='349' y='500' width='295' height='458'/%3E%3Crect x='873' y='500' width='267' height='458'/%3E%3Crect x='1362' y='500' width='294' height='458'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  opacity:0;transition:opacity .3s linear}
/* телефон: своя вертикальная версия видео — по маске виден один проём (дверь) */
.shop--m .shop__layer{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='860' height='1426' viewBox='0 0 860 1426'%3E%3Cfilter id='f'%3E%3CfeGaussianBlur stdDeviation='3.3'/%3E%3C/filter%3E%3Cg fill='white' filter='url%28%23f%29'%3E%3Crect x='252' y='667' width='356' height='611'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='860' height='1426' viewBox='0 0 860 1426'%3E%3Cfilter id='f'%3E%3CfeGaussianBlur stdDeviation='3.3'/%3E%3C/filter%3E%3Cg fill='white' filter='url%28%23f%29'%3E%3Crect x='252' y='667' width='356' height='611'/%3E%3C/g%3E%3C/svg%3E")}
.shop__layer.on{opacity:1}
.shop__layer.instant{transition:none}
#shSteklo{z-index:1}
#shStavni,#shNazad{z-index:2}
.shop__put{position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none}
.shop__put .shop__v{opacity:0}
.shop__put .shop__v.top{opacity:1;z-index:1}
/* ролик, который готовится к развороту: лежит поверх почти прозрачным — так браузер точно рисует его кадры */
.shop .prep{opacity:.01!important;z-index:3!important;transition:none!important}
.shop__weather{position:absolute;inset:0;z-index:7;width:100%;height:100%;pointer-events:none}
.shop__vig{position:absolute;inset:-50%;z-index:6;opacity:0;pointer-events:none;will-change:transform,opacity} /* вдвое больше шапки: едет за язычком сдвигом; градиенты задаёт main.js */
.shop__put{will-change:transform;transform-origin:0 0}
.shop__edge{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,0) 58%,#000 100%)} /* края кадра в чёрное, когда он уменьшается (язычок — в прозрачной середине) */   /* в конце уменьшается к язычку — свой слой, без перерисовки */
.shop__scene{will-change:opacity;overflow:hidden}
.shop__scene.is-morph>.shop__v{visibility:hidden}   /* кадр уменьшается к язычку — по краям чёрное, а не фасад первых сцен */
.shop__hint{position:absolute;z-index:9;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font:500 .74rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8);text-shadow:0 1px 8px rgba(0,0,0,.7);transition:opacity .4s;pointer-events:none}
.shop__hint i{width:1px;height:34px;background:linear-gradient(var(--white),transparent);animation:drip 2.2s ease-in-out infinite;transform-origin:top}
.shop.is-off .shop__hint i{animation-play-state:paused}   /* шапку не видно — бесконечная анимация стоит */
@keyframes drip{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.shop-dbg{position:fixed;left:8px;bottom:8px;z-index:99;font:12px/1.4 ui-monospace,Menlo,monospace;background:rgba(0,0,0,.75);color:#fff;padding:6px 8px;border-radius:6px}

/* ---------- 1½. Позиционирование: для кого мы ---------- */
.manifest{background:transparent}
.manifest__if{max-width:18em;font:500 var(--fs-h2)/var(--lh-h2) var(--sans);letter-spacing:var(--ls-h2);text-wrap:balance}
/* «штампы», которые зачёркивает красный штрих баллончика */
.stamps{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:var(--sp-head)}
.stamps li{position:relative;padding:14px 22px;border:1px dashed rgba(255,255,255,.28);border-radius:6px;font:700 clamp(.8rem,.4vw + .7rem,1rem)/1 var(--tech);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);transition:color .6s,border-color .6s}
.stamps s{text-decoration:none}
.stamps li::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:var(--dot);
  box-shadow:0 0 6px rgba(215,1,13,.7),0 0 16px rgba(215,1,13,.3);transform:rotate(-3deg) scaleX(0);transform-origin:left center;
  transition:transform .55s var(--ease);transition-delay:calc(var(--rd,0ms) + 450ms)}
.js .stamps li.in::after,.stamps li.in::after{transform:rotate(-3deg) scaleX(1)}
.stamps li.in{color:var(--grey);border-color:rgba(255,255,255,.14);transition-delay:calc(var(--rd,0ms) + 450ms)}
.manifest__then{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.35em;margin-top:var(--sp-block);font:500 var(--fs-h2)/1 var(--sans);letter-spacing:var(--ls-h2)}
.manifest__word{padding-block:.06em .2em;font:400 clamp(4.6rem,13vw,12.5rem)/.9 var(--graff);letter-spacing:0;color:var(--white)} /* место под росчерки — не наезжают на «Как и мы» */
.manifest__too{flex-basis:100%;margin-top:.3em;color:var(--grey)}
.manifest__so{flex-basis:100%}   /* «…то вы по адресу.» — своей строкой, ниже «Мы делаем НЕ ДЛЯ ВСЕХ.» */
.manifest__points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:var(--sp-block)}
/* «Для кого мы»: пункты — плакаты на стене (тёмный лист с рваным краем, под ним светлая бумага, угол на скотче) */
.manifest__points{align-items:start}
.manifest__points article{position:relative;display:grid;gap:.9rem;align-content:start;padding:34px 30px 38px;rotate:var(--tilt,0deg)}
.poster::before,.poster::after{content:"";position:absolute;pointer-events:none}
.poster::before{inset:-7px;background:#dcd6c6;clip-path:polygon(0 3%,6% 0,14% 2%,24% 0,33% 2.5%,44% .4%,55% 2%,66% 0,77% 2.4%,88% .3%,100% 2%,99% 30%,100% 58%,98.6% 82%,100% 98%,90% 100%,79% 97.8%,67% 100%,56% 98%,44% 100%,32% 97.6%,20% 100%,9% 98%,0 100%,1.4% 72%,0 46%,1% 20%)}
.poster::after{inset:0;background:#131314;clip-path:polygon(0 1.5%,8% 0,19% 1.6%,31% .2%,42% 1.4%,53% 0,64% 1.8%,76% .2%,87% 1.4%,100% 0,99.2% 35%,100% 66%,99% 100%,86% 98.6%,74% 100%,61% 98.4%,49% 100%,36% 98.6%,24% 100%,12% 98.4%,0 100%,.8% 64%,0 33%)}
.poster>h3,.poster>p{position:relative;z-index:1}
.manifest__points p{color:#b4b4b9}
.manifest__points h3{font:500 var(--fs-h3)/var(--lh-h3) var(--sans);letter-spacing:var(--ls-h3);text-wrap:balance}
.manifest__points p{color:var(--grey);font-size:var(--fs-body);line-height:var(--lh-body);max-width:26rem;text-wrap:pretty}
/* «Наш подход»: заголовок блока, три плаката, под ними — заметная кнопка «Быстрый бриф» (красная, по центру) */
.approach{margin-top:var(--sp-block)}
.approach{text-align:center}   /* «Наш подход» — по центру: заголовок и тексты плакатов (просьба владельца 30.10) */
.approach .manifest__points article{justify-items:center}
.approach .manifest__points p{margin-inline:auto}
.approach .manifest__points{margin-top:0}   /* заголовка «Наш подход» нет — плакаты сразу после «Не для всех.» */
.pill.manifest__cta{display:flex;width:max-content;margin:var(--sp-head) auto 0;padding:20px 22px 20px 34px;background:var(--dot);color:#fff;font-size:1.15rem;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.pill.manifest__cta i{width:34px;height:34px;background:rgba(255,255,255,.18)}
.pill.manifest__cta:hover{background:#e8101c}
.pill.manifest__cta:hover i{transform:translateX(3px)}

/* ---------- 2. Каталог ---------- */
.catalog{background:transparent}
.catalog__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,11vw,160px);row-gap:clamp(40px,6vw,88px);max-width:1120px;margin-inline:auto}
/* плашки по типу одежды: на ПК и планшете 3 в ряд (9 плашек = 3 ряда), на телефоне — по 2 */
.plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);max-width:1180px;margin-inline:auto}
.js .plate.rv{transform:translateY(14px);transition-duration:.5s,.55s} /* плашки — быстрее обычного появления */
.plate__btn{display:grid;gap:14px;width:100%;padding:0;background:none;border:0;color:inherit;text-align:left;cursor:pointer}
.plate__ph{display:block;aspect-ratio:1400/734} /* картинка прозрачная (лист + красный росчерк) — под ней общий фон-стена сайта */
.plate__ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.plate__btn:hover .plate__ph img,.plate__btn:focus-visible .plate__ph img{transform:scale(1.04)}
.plate__btn:focus-visible{outline:none}
.plate__btn:focus-visible .plate__ph{outline:2px solid var(--white);outline-offset:3px}
/* окно с вещами одного типа */
/* окно с вещами одного типа: вещи-наклейки на граффити-стене */
#catSheet .sheet__panel{background:linear-gradient(rgba(5,5,5,.6),rgba(5,5,5,.6)),url(../img/bg-wall.webp) center/cover #0b0b0c}
.catalog__grid--sheet{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,6vw,110px);row-gap:clamp(48px,6vw,88px);max-width:1180px;margin:clamp(32px,4vw,56px) auto 0}
/* карточка: наклейка (вырезка с белым контуром, assets/img/cut/) и бумажная бирка с названием */
.item{display:grid;justify-items:center;text-align:center;cursor:pointer;--tilt:3deg;--tag:2deg}
.item:nth-child(3n+2){--tilt:-2deg;--tag:-2deg}
.item:nth-child(3n){--tilt:2.5deg;--tag:1deg}
.item:focus-visible{outline:2px solid var(--white);outline-offset:8px}
.item__ph{position:relative;width:100%;aspect-ratio:1/1;border-radius:0;background:none;overflow:visible}
.item__ph img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;scale:none;translate:none;transform:rotate(var(--tilt));transition:transform .45s var(--ease);
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.55))}
.item:hover .item__ph img{transform:rotate(0deg) scale(1.05)}
.item__tag{min-width:72%;max-width:100%;margin-top:clamp(24px,3.4vw,48px);padding:14px 22px 12px;background:linear-gradient(170deg,#efebdf,#e3ddcc);color:#121212;
  box-shadow:0 8px 18px rgba(0,0,0,.45);transform:rotate(var(--tag))}
.item__meta{margin-top:.35rem;font-size:.74rem;font-weight:400;line-height:1.3;letter-spacing:.01em;color:#5a5955} /* подпись заметно мельче и светлее названия */
.item__name{font:500 1.1rem/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase}
/* «Ещё»: остальные вещи — компактной сеткой */

/* ---------- 3. Сейчас ---------- */
.now{position:relative;min-height:clamp(620px,105vh,1040px);display:flex;align-items:flex-end;overflow:hidden;background:transparent;color:var(--on-night);padding-block:clamp(88px,12vw,160px)}
.now__bg{position:absolute;inset:0;overflow:hidden;
  /* фото плавно растворяется в чёрном сверху и снизу — без резкой границы между блоками */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 78%,transparent 100%)}
.now__bg img{position:absolute;left:0;top:-6%;width:100%;height:112%;max-width:none;object-fit:cover;object-position:center 45%;will-change:transform}
.now__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,12,.92) 0%,rgba(10,10,12,.55) 38%,rgba(10,10,12,.05) 70%),linear-gradient(90deg,rgba(10,10,12,.55),transparent 60%)}
.now__inner{position:relative}
.now__text{max-width:40rem;display:grid;gap:1.2rem}
.now__text .title{margin-bottom:.3rem}
.now__text p:not(.label):not(.lead){color:var(--on-night-2)}

/* ---------- 4. Кейсы ---------- */
.cases{background:transparent;padding-bottom:clamp(72px,9vw,140px)}
.cases__head{text-align:center;display:grid;justify-items:center;margin-bottom:var(--sp-head)}
.cases__head .label{justify-content:center}
.cases__head .head__sub{margin-inline:auto;text-align:center}
.stack{position:relative;display:grid;gap:clamp(28px,6vh,64px)}
.scard{--top:calc(var(--nav-h) + 18px + var(--i) * 16px);position:sticky;top:var(--top);display:grid;align-items:center;
  min-height:min(74vh,640px);padding:clamp(22px,3.4vw,48px);will-change:transform;
  rotate:var(--tilt,0deg)} /* свой слой видеокарты; масштаб в стопке не меняем — Safari перерисовывал бы всю карточку каждый кадр */
/* уходящая под следующую карточка темнеет: отдельный слой-вуаль, скрипт меняет только его прозрачность */
.scard__veil{position:absolute;inset:1% .6%;z-index:5;background:#000;opacity:0;pointer-events:none;will-change:opacity} /* простой прямоугольник чуть внутри рваного края — без clip-path, Safari не перерисовывает его каждый кадр */
/* «Кейсы» — плакаты: светлый слой бумаги под карточкой, сама карточка — тёмный лист с рваным краем */
.scard{--bg:#0c0c0d}
.scard--night{--bg:#0c0c0d;background:none;color:var(--on-night)}
.scard--stone{--bg:#131315;background:none}
.scard--white{--bg:#1a1b1e;background:none}
/* рваный край — готовая SVG-картинка с теми же точками, что были у clip-path: Safari рисует её один раз,
   а «вырезание» clip-path у трёх карточек в стопке он пересчитывал на каждом кадре скролла (просадки в «Кейсах») */
.scard__paper{position:absolute;inset:-8px;z-index:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,1 4,0 9,.8 15,.1 22,1 30,.2 38,.9 46,0 55,1 63,.3 71,1 80,0 88,.8 95,.2 100,.9 99.5,22 100,46 99.4,70 100,99 94,100 86,99.2 78,100 69,99 60,99.8 51,99.1 42,100 33,99.2 24,99.8 15,99 7,100 0,99.2 .5,74 0,50 .6,25' fill='%23dcd6c6'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.scard::before{content:"";position:absolute;inset:0;z-index:1;background:var(--sheet) 0 0/100% 100% no-repeat}
.scard,.scard--night{--sheet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,.4 7,1 15,0 24,.9 33,.1 42,.8 51,0 60,.9 69,.1 78,.8 87,0 95,.9 100,.2 99.6,30 100,62 99.5,99.6 92,99 83,100 74,99.1 65,100 56,99.2 47,100 38,99.1 29,100 20,99.2 11,100 0,99.4 .4,64 0,32' fill='%230c0c0d'/%3E%3C/svg%3E")}
.scard--stone{--sheet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,.4 7,1 15,0 24,.9 33,.1 42,.8 51,0 60,.9 69,.1 78,.8 87,0 95,.9 100,.2 99.6,30 100,62 99.5,99.6 92,99 83,100 74,99.1 65,100 56,99.2 47,100 38,99.1 29,100 20,99.2 11,100 0,99.4 .4,64 0,32' fill='%23131315'/%3E%3C/svg%3E")}
.scard--white{--sheet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,.4 7,1 15,0 24,.9 33,.1 42,.8 51,0 60,.9 69,.1 78,.8 87,0 95,.9 100,.2 99.6,30 100,62 99.5,99.6 92,99 83,100 74,99.1 65,100 56,99.2 47,100 38,99.1 29,100 20,99.2 11,100 0,99.4 .4,64 0,32' fill='%231a1b1e'/%3E%3C/svg%3E")}
/* содержимое карточки: слева текст, справа два фото + миниатюры и «Галерея» */
.case{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center;width:100%}
.case__text{display:grid;justify-items:center;gap:clamp(12px,1.4vw,18px);text-align:center} /* левая часть — по центру своей колонки */
.case__club{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.1em .45em;margin:0;font-weight:400}
.case__ndv{font:700 clamp(.82rem,1vw,.95rem)/1 var(--tech);letter-spacing:.18em;text-transform:uppercase;opacity:.75} /* «×» есть только в Tektur */
.case__brand{font:400 clamp(2.6rem,5vw,4.6rem)/1 var(--graff);padding-block:.12em .2em;color:rgb(var(--cc,255,255,255))} /* название клуба — фирменным, в цвет клуба */
.case__name{margin:0;font:500 var(--fs-h3)/var(--lh-h3) var(--sans);letter-spacing:var(--ls-h3);text-wrap:balance}
.case__name:empty{display:none}
.case__nav{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:clamp(10px,1.4vw,18px);width:100%} /* стрелки по бокам названия коллекции, на месте при любой длине названия */
.case__nav .case__arr:first-child{grid-column:1}
.case__nav .case__arr:last-child{grid-column:3}
.case__nav .case__name{grid-column:2}
.case__arr{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.24);transition:background .3s,color .3s,border-color .3s}
.case__arr:hover{background:rgb(var(--cc,255,255,255));border-color:rgb(var(--cc,255,255,255));color:#0a0a0a}
.case__arr svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.case__arr[hidden]{display:none}
.case__desc{margin:0;max-width:32rem;min-height:6.4em;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--on-night-2)} /* место под описание коллекции */
.case__media{display:grid;gap:clamp(12px,1.6vw,20px);min-width:0}
.case__photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);align-items:end}
.case__ph{display:block;width:100%;min-width:0;padding:0;aspect-ratio:4/5;cursor:zoom-in}
.case__ph:nth-child(2){margin-bottom:clamp(20px,4vw,56px)}
.case__ph img{width:100%;height:100%;object-fit:cover}
.case__strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.case__strip:has(.case__thumbs:empty) .case__gal{margin-left:0}
.case__thumbs{display:flex;flex-wrap:wrap;gap:8px}
.case__gal{display:inline-flex;align-items:center;gap:.5em;margin-left:6px;padding:11px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.26);font:500 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s}
.case__gal:hover{background:rgb(var(--cc,255,255,255));border-color:rgb(var(--cc,255,255,255));color:#0a0a0a}
.case__gal[hidden]{display:none}
/* перелистывание коллекций (main.js, caseStep): --sx — сторона (+ вперёд, − назад) */
.scard{--sx:28px}
.swap-out :is(.case__name,.case__desc,.case__photos,.case__thumbs){opacity:0;transform:translate3d(calc(var(--sx) * -.7),0,0);transition:opacity .18s ease-in,transform .18s ease-in}
.swap-in .case__name{animation:caseIn .55s var(--ease) backwards}
.swap-in .case__desc{animation:caseIn .55s var(--ease) .07s backwards}
.swap-in .case__ph{animation:casePh .65s var(--ease) backwards;animation-delay:calc(.08s + var(--n,0) * .09s)}
.swap-in .case__ph:nth-child(2){--n:1}
.swap-in .case__thumbs .gal__t{animation:caseT .45s var(--ease) backwards;animation-delay:calc(.22s + var(--k,0) * .05s)}
@keyframes caseIn{from{opacity:0;transform:translate3d(var(--sx),0,0)}}
@keyframes casePh{from{opacity:0;transform:translate3d(calc(var(--sx) * 1.6),0,0) rotate(var(--sr,1.5deg))}}
@keyframes caseT{from{opacity:0;transform:translate3d(0,10px,0) scale(.9)}}
/* та же карточка в окне «Ещё проекты»: не липнет, скотч сразу на месте, акцент — цвет проекта */
.scard--sheet{position:relative;top:auto;max-width:1100px;margin:clamp(12px,2vw,28px) auto 0;will-change:auto}
/* мини-галерея проекта: полоска миниатюр в карточке и окно просмотра */
.gal{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:.4rem}
.gal:empty{display:none}
.gal__t{position:relative;flex:none;width:52px;height:66px;padding:0;border-radius:10px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.12);cursor:zoom-in;transition:transform .35s var(--ease),border-color .3s}
.gal__t img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gal__t:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.4)}
.gal__t:hover img{transform:scale(1.08)}
.gal__t--more span{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,5,5,.62);font:700 .78rem/1 var(--tech);letter-spacing:.06em;color:#fff}
.gal__all{display:inline-flex;align-items:center;gap:.5em;margin-left:6px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);font:500 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;transition:background .3s,color .3s}
.gal__all:hover{background:var(--white);color:#0a0a0a}
.lb{--pc:255,255,255;position:fixed;inset:0;z-index:130;display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:var(--white);animation:fade .3s ease;
  /* галерея слегка окрашена в цвет проекта */
  background:radial-gradient(80% 60% at 50% 0%,rgba(var(--pc),.14),transparent 62%),radial-gradient(70% 45% at 50% 100%,rgba(var(--pc),.09),transparent 65%),var(--paper);
  box-shadow:inset 0 2px 0 rgba(var(--pc),.6)}
.lb__title{color:rgb(var(--pc))}
.lb[hidden]{display:none}
.lb__top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(14px + env(safe-area-inset-top,0px)) var(--gutter) 10px}
.lb__title{font:700 var(--fs-label)/1.2 var(--tech);letter-spacing:.16em;text-transform:uppercase}
.lb__count{margin-left:.8em;color:var(--grey);font-weight:500}
.lb__close{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;font-size:1rem;transition:background .3s,color .3s}
.lb__close:hover{background:rgb(var(--pc));color:#0a0a0a}
.lb__stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;padding:0 clamp(12px,7vw,110px);touch-action:pan-y;user-select:none}
.lb__img{-webkit-user-drag:none;pointer-events:none;display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:14px;transition:opacity .28s ease,transform .28s ease}
.lb__img.is-swap{opacity:0;transform:scale(.985)}
.lb__nav{position:absolute;top:50%;translate:0 -50%;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(var(--pc),.45);background:rgba(var(--pc),.06);transition:background .3s,color .3s}
.lb__nav:hover{background:rgb(var(--pc));color:#0a0a0a}
.lb__nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.lb__nav--prev{left:clamp(8px,2vw,32px)}
.lb__nav--next{right:clamp(8px,2vw,32px)}
.lb__foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px var(--gutter) calc(18px + env(safe-area-inset-bottom,0px))}
.lb__thumbs{grid-column:2;grid-row:1;justify-self:center;display:flex;gap:8px;max-width:min(100%,820px);overflow-x:auto;scrollbar-width:none}
.lb__col{display:inline-flex;align-items:center;gap:.7em;padding:12px 18px;border-radius:999px;border:1px solid rgba(var(--pc),.45);background:rgba(var(--pc),.06);font:500 .72rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:background .3s,color .3s}
.lb__col:hover{background:rgb(var(--pc));color:#0a0a0a}
.lb__col svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.lb__col--prev{grid-column:1;grid-row:1;justify-self:start}
.lb__col--next{grid-column:3;grid-row:1;justify-self:end}
/* средние экраны: миниатюрам между кнопками тесно — кнопки уходят строкой ниже, по углам */
@media (max-width:1100px){
  .lb__foot{grid-template-columns:1fr 1fr;row-gap:12px}
  .lb__thumbs{grid-column:1 / -1;max-width:100%}
  .lb__col{grid-row:2}
  .lb__col--prev{grid-column:1}
  .lb__col--next{grid-column:2}
}
.lb__col[hidden]{display:none}
.lb__thumbs::-webkit-scrollbar{display:none}
.lb__thumbs button{flex:none;width:56px;height:70px;padding:0;border-radius:8px;overflow:hidden;opacity:.4;border:1px solid transparent;transition:opacity .25s,border-color .25s}
.lb__thumbs button img{width:100%;height:100%;object-fit:cover}
.lb__thumbs button:hover{opacity:.8}
.lb__thumbs button[aria-current="true"]{opacity:1;border-color:rgb(var(--pc))}
html.lb-open{overflow:hidden}
/* кейсы ↔ каталог: метки вещей на фото, линия-выноска и карточка вещи из каталога (main.js, LOOKS) */
.lb__spots{position:absolute;z-index:2;pointer-events:none;transition:opacity .28s ease}
.lb__img.is-swap ~ .lb__spots{opacity:0}
.lb__spot{position:absolute;pointer-events:auto;border-radius:22px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lb__spot:focus-visible{outline:1.5px dashed rgba(255,255,255,.7);outline-offset:-6px}
.lb__dot,.lb__wire{display:none}   /* точки на вещах и линия-выноска убраны по просьбе владельца (шум): при наведении на вещь — только карточка «Из каталога» */
.lb__tag{position:absolute;left:0;top:0;z-index:4;width:228px;display:grid;justify-items:start;gap:4px;padding:14px 16px 16px;border-radius:16px;border:1.5px solid #fff;background:rgba(8,8,10,.94);color:#fff;text-align:left;visibility:hidden;opacity:0;cursor:pointer}
.lb.is-tag .lb__tag{visibility:visible;animation:tagIn .32s var(--ease) both}
@keyframes tagIn{from{opacity:0;transform:translate3d(0,10px,0) scale(.97)}to{opacity:1;transform:none}}
.lb__tag img{width:100%;aspect-ratio:1/1;object-fit:contain;margin-bottom:6px;transform:rotate(-3deg);transition:transform .35s var(--ease)}
.lb__tag:hover img{transform:rotate(0) scale(1.04)}
.lb__tag-k{font:700 .62rem/1 var(--tech);letter-spacing:.2em;text-transform:uppercase;color:rgb(var(--pc))}
.lb__tag-name{font:500 1.1rem/1.15 var(--sans)}
.lb__tag-meta{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--on-night-2)}
.lb__tag-meta[hidden]{display:none}
.lb__tag-cta{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font:500 .8rem/1 var(--sans)}
.lb__tag-cta i{font-style:normal;transition:transform .3s var(--ease)}
.lb__tag:hover .lb__tag-cta i{transform:translateX(3px)}
.lb__tag.is-inside{grid-template-columns:76px minmax(0,1fr);grid-template-rows:repeat(4,auto);column-gap:14px;row-gap:3px;align-content:center;align-items:center;padding:12px 14px}
.lb__tag.is-inside img{grid-column:1;grid-row:1 / span 4;margin:0}
.lb__tag.is-inside>:not(img){grid-column:2}
.lb__tag.is-inside .lb__tag-cta{margin-top:4px}
/* окно вещи: «Примеры» — фото из кейсов с этой вещью */
.pdp__ex{margin-top:28px}
/* по коллекциям: название коллекции, под ним её фото (переносятся на новую строку, без прокрутки вбок) */
.pdp__ex-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:12px 20px;margin-top:14px;align-items:start}
.pdp__ex-col{font-size:var(--fs-small);line-height:1.3;color:var(--grey)}
.pdp__ex-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;padding:2px}
.pdp__ex-row button{flex:none;width:42px;height:52px;padding:0;border-radius:7px;overflow:hidden;border:1px solid rgba(255,255,255,.18);opacity:.85;transition:opacity .25s,transform .3s var(--ease),border-color .25s}
.pdp__ex-row button:hover{opacity:1;transform:translateY(-2px);border-color:#fff}
.pdp__ex-row img{width:100%;height:100%;object-fit:cover}
.cases__more{display:grid;justify-items:center;gap:14px;margin-top:clamp(48px,7vw,96px);text-align:center}
/* «Ещё проекты»: наклонные плашки с названиями — каждая открывает свой проект */
.ptags{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(12px,1.8vw,26px);max-width:1240px}
.ptag{--rot:0deg;padding:clamp(15px,1.9vw,27px) clamp(24px,3.3vw,48px);border-radius:9px;font:700 clamp(.95rem,1.75vw,1.6rem)/1 var(--tech);letter-spacing:.14em;text-transform:uppercase;
  transform:rotate(var(--rot));box-shadow:0 12px 26px -14px rgba(0,0,0,.9);transition:transform .4s var(--ease),box-shadow .4s,background .3s}
.ptag--sky{background:#79aecf;color:#08141c}          /* Пари НН — голубой */
.ptag--blue{background:#34539e;color:#fff}            /* Ротор — синий */
.ptag--green{background:#6a9f52;color:#081205}        /* ЦИПР — зелёный */
.ptag--brown{background:#8a5a36;color:#fff}         /* etc — коричневый */
.ptag--violet{background:#8452b8;color:#fff;box-shadow:0 0 18px -6px rgba(132,82,184,.55),0 12px 26px -14px rgba(0,0,0,.9)}  /* Реактив — неоновый фиолетовый */
.ptag:hover,.ptag:focus-visible{transform:rotate(0deg) translateY(-4px) scale(1.04);box-shadow:0 18px 30px -14px rgba(0,0,0,.95)}
.ptag:focus-visible{outline:2px solid var(--white);outline-offset:3px}

.pill{display:inline-flex;align-items:center;gap:14px;padding:16px 18px 16px 28px;border-radius:999px;background:var(--ink);color:#0a0a0a;font:500 1rem/1 var(--sans);transition:transform .35s var(--ease),background .3s}
.pill i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.1);font-style:normal;font-size:1.1rem;transition:transform .4s var(--ease)}
.pill:hover{transform:translateY(-2px)}
.pill:hover i{transform:rotate(90deg)}
.pill--light{background:var(--white);color:#0a0a0a}
.pill--light i{background:rgba(0,0,0,.08)}
.pill--light:hover i{transform:translateX(3px)}

/* ---------- 5. Опт ---------- */
.wholesale{background:transparent}
/* Возможности: два лекала-коллажа (референс «Полный цикл»). Порядок: лекало → фото → ткани по одной → подзаголовок → его текст → второй подзаголовок → текст.
   Правое лекало начинается после левого (--d), на телефоне каждое — когда до него докрутили */
.cycle{display:grid;grid-template-columns:minmax(0,510fr) minmax(0,461fr);gap:clamp(32px,8vw,140px);align-items:start;max-width:1100px;margin:0 auto clamp(72px,10vw,140px)}
/* ПК: два экрана «Работы», каждый целиком в окне.
   1) .process — заголовок «Полный цикл…» + доска с 8 этапами: доска вписывается в оставшуюся высоту (.pjfit — по ширине и высоте);
   2) .wk — заголовок «Производство» + оба лекала-коллажа, масштабируются по оставшейся высоте
   (единицы cqw/cqh — от размеров .cycle; 971 = 510 + 461 — ширины лекал, 575 — высота большего) */
@media (min-width:721px){
  .wholesale{padding-top:clamp(20px,3.5vh,44px)}
  .process{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:calc(100svh - var(--nav-h) - clamp(20px,3.5vh,44px) - 16px);min-height:420px;margin-bottom:clamp(72px,10vw,140px)}
  .process .head{margin-bottom:clamp(14px,2.6vh,36px)}
  .pjfit{container-type:size;min-height:0;display:flex;justify-content:center;align-items:flex-start}
  .pjfit>.pjb{flex:none;width:min(1500px,100cqw,calc(100cqh * 1700 / 640));max-width:none;margin:0}
  .wk{display:grid;grid-template-rows:auto minmax(0,1fr);height:calc(100svh - var(--nav-h) - 32px);min-height:380px}
  .wk>.wk__title{margin-bottom:clamp(14px,2.6vh,36px)}
  .cycle{--cyg:clamp(32px,6vw,120px);container-type:size;display:flex;justify-content:center;align-items:center;gap:var(--cyg);max-width:none;min-height:0;margin:0}
  .cycle>.cy--l{flex:none;width:calc(510 * min((100cqw - var(--cyg)) / 971, 100cqh / 575))}
  .cycle>.cy--r{flex:none;width:calc(461 * min((100cqw - var(--cyg)) / 971, 100cqh / 575))}
}
.cy{position:relative;container-type:inline-size;--d:0s;--n:4;--fs:2.75cqw}
.cy--r{--d:1.6s;--n:5;--fs:2.95cqw}
.cy__l,.cy__cap,.cy__txt{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);margin:0}
.cy__l{display:block;max-width:none}
/* тени фото и тканей — заранее нарисованные картинки (*-sh.webp) под ними, а не CSS-фильтр: Safari рисовал фильтр-тень процессором
   в момент появления каждой картинки, и при сборке коллажа это давало фризы */
.cy__cap,.cy__txt{display:flex;align-items:center;justify-content:center;text-align:center}
.cy__cap{font:italic 700 calc(var(--fs) * 1.1)/1.1 var(--tech);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.6)}
.cy__txt{padding-inline:.15em;font:italic 700 var(--fs)/1.22 var(--tech);color:#0b0b0b}
/* ткани и фото: при наведении приподнимаются и тянутся за курсором (--mx/--my задаёт скрипт) */
.cy__g{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);z-index:2;--mx:0;--my:0;
  transform:translate(calc(var(--mx) * 7px),calc(var(--my) * 6px)) rotate(calc(var(--mx) * 2.5deg));transition:transform .5s var(--ease)}
.cy__g>.cy__l{left:0;top:0;width:100%;height:100%}
.cy__g>.cy__sh{left:calc(var(--px) * -1);top:calc(var(--py) * -1);width:calc(100% + var(--px) * 2);height:calc(100% + var(--py) * 2);pointer-events:none}
html.is-scrolling :is(.cycle,.plates,.case__media){pointer-events:none} /* пока страница едет — без эффектов наведения (см. main.js) */
.cy__g:hover{z-index:3;transform:translate(calc(var(--mx) * 7px),calc(var(--my) * 6px - 8px)) rotate(calc(var(--mx) * 4deg - 2deg)) scale(1.06)}
/* появление */
.js .cy__paper{opacity:0;transform:translateY(26px) rotate(-1.5deg) scale(.97);transition:opacity .4s ease,transform .5s var(--ease);transition-delay:var(--d)}
.js .cy__photo{opacity:0;transform:translate(-16px,12px) rotate(-2.5deg);transition:opacity .35s ease,transform .45s var(--ease);transition-delay:calc(var(--d) + .3s)}
.js .cy__sw{opacity:0;transform:translateY(-10px) rotate(4deg) scale(1.08);transition:opacity .25s ease,transform .35s var(--ease);transition-delay:calc(var(--d) + .55s + var(--i) * .08s)}
.js .cy__cap,.js .cy__txt{opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .35s var(--ease);transition-delay:calc(var(--d) + .63s + var(--n) * .08s + var(--j) * .18s)}
.js .cy.in .cy__l,.js .cy.in .cy__cap,.js .cy.in .cy__txt{opacity:1;transform:none}
/* ушёл с экрана — слои прячутся мгновенно (без задержек), чтобы при возвращении коллаж каждый раз собирался заново и по порядку */
.js .cy:not(.in) .cy__l,.js .cy:not(.in) .cy__cap,.js .cy:not(.in) .cy__txt{transition:none}
.process{margin-bottom:clamp(56px,10vw,140px)}
.process__note{margin:clamp(16px,2.4vh,32px) auto 0;max-width:var(--measure);text-align:center;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--grey);text-wrap:balance}   /* под доской этапов */
.wk__title{margin:0 0 var(--sp-head);text-align:center} /* «Производство» — тем же шрифтом, что «Полный цикл…» (класс .title) */ /* отступ между «Полным циклом» (8 этапов) и «Производством» */
/* 8 этапов под «Полным циклом»: 8 лекал = 8 этапов (референс «проект»), «ёлочкой» в два столбца. Основная молния страницы идёт через них по порядку:
   дошла до лекала — оно появляется, дошла до его середины — проявляется текст. Под лекалами молнию не видно — будто прошита насквозь */
.pjb{position:relative;aspect-ratio:var(--ar);max-width:min(1500px,calc((100svh - var(--nav-h) - 130px) * 1700 / 640));margin-inline:auto;container-type:inline-size;--k:calc(100cqw / 1700)} /* 3 лекала в ряд, вся доска — в одном окне; лекала и текст на 8% мельче исходника (1272 / .92) */
.pjb__list{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.pj{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);z-index:1;will-change:transform,opacity} /* свой слой: тень лекала рисуется один раз, молния под ним не заставляет перерисовывать лекала */
.pj__img{position:absolute;inset:0;width:100%;height:100%}
.pj__sh{position:absolute;left:calc(var(--px) * -1);top:calc(var(--py) * -1);width:calc(100% + var(--px) * 2);height:calc(100% + var(--py) * 2);max-width:none;pointer-events:none} /* тень лекала — готовой картинкой, без CSS-фильтра */
.pj__t{position:absolute;left:var(--tx);top:var(--ty);width:var(--tw);height:var(--th);margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em;
  text-align:center;font:italic 700 calc(26 * var(--k))/1.15 var(--tech);color:#121212}   /* на лекалах — только названия шагов (30.10), крупнее прежнего */
.pj__t b{font-weight:700}
.pj__t small{font-size:.7em;line-height:1.3}
.pj__t--left b{align-self:flex-start}
.pj__t--big{font-size:calc(27 * var(--k))}
.pj__n{position:absolute;left:1%;bottom:calc(100% + 6px);z-index:2;font:italic 700 calc(30 * var(--k))/1 var(--tech);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.js .pj{opacity:0;transform:translateY(18px) rotate(-2deg);transition:opacity .5s ease,transform .7s var(--ease)}
.js .pj.on{opacity:1;transform:none}
.js .pj__t{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .6s var(--ease)}
.js .pj.txt .pj__t{opacity:1;transform:none}

/* ---------- 6. Признание ---------- */
.proof{background:transparent;overflow:hidden}
/* фон «Признания»: сцена премии СБК — приглушена слева под текст, края плавно растворяются в чёрном */
.proof__bg{position:absolute;inset:0;overflow:hidden;background:var(--paper);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 80%,transparent 100%)}
.proof__bg img{width:100%;height:100%;object-fit:cover;object-position:60% 45%;opacity:.8;translate:8% 0} /* чуть вправо: левый край всё равно под затемнением */
.proof__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,.94) 0%,rgba(5,5,5,.78) 38%,rgba(5,5,5,.35) 70%,rgba(5,5,5,.5) 100%),linear-gradient(to top,rgba(5,5,5,.6),transparent 40%)}
.proof>.wrap{position:relative}
.proof__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,100px);align-items:end}
.proof__lead{display:grid;gap:1.3rem}
.proof__lead>p:not(.label){color:var(--grey);max-width:36rem}
.awards{display:grid;margin-top:.6rem;max-width:36rem}
.awards li{display:flex;align-items:baseline;gap:1.4rem;padding-block:1rem;border-top:1px solid var(--line)}
.awards li:last-child{border-bottom:1px solid var(--line)}
.awards b{font:500 1.3rem/1 var(--sans);font-variant-numeric:tabular-nums}

/* ---------- 7. Лукбук ---------- */
.lookbook{position:relative;background:transparent;padding-block:var(--sp-section);overflow:hidden}
.lookbook__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 24px;margin-bottom:var(--sp-head)}
.lookbook__ctrl{display:flex;align-items:center;gap:10px;margin-left:auto}
.lookbook__hint{font-size:var(--fs-small);color:var(--mist);margin-right:10px}
.round{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .25s,border-color .25s,color .25s}
.round svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.round:hover{background:var(--ink);border-color:var(--ink);color:#0a0a0a}
.rail{overflow:hidden;cursor:grab;touch-action:pan-y;padding-inline:var(--gutter);outline:none}
.rail.is-drag{cursor:grabbing}
.rail.is-drag .ph img{transition:none}
.rail__track{display:flex;gap:clamp(10px,1.2vw,18px);width:max-content;will-change:transform} /* едет сдвигом на видеокарте */
.rails{display:grid;gap:clamp(10px,1.2vw,18px)}
.rail__track .ph{flex:none;height:clamp(220px,24vw,380px);aspect-ratio:3/4;user-select:none}
.rail__track .ph--wide{aspect-ratio:4/3}
.rail__track img{pointer-events:none;-webkit-user-drag:none}

/* ---------- 8. Контакты ---------- */
.contacts{position:relative;overflow:hidden;background:transparent;color:var(--on-night);min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--nav-h) + 40px) calc(clamp(56px,6vw,96px) + env(safe-area-inset-bottom,0px))}
.contacts__bg{position:absolute;inset:0 auto 0 0;width:min(48%,700px);overflow:hidden;background:var(--paper);
  /* края фото мягко уходят в общий фон, чтобы не было чёрного прямоугольника */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);mask-composite:intersect} /* края растворяются одинаково со всех четырёх сторон */ /* непрозрачная подложка: нитка не просвечивает сквозь полупрозрачное фото */
.contacts__bg img{position:relative;top:11%;width:100%;height:138%;object-fit:cover;object-position:center top;opacity:.7;filter:grayscale(.3);will-change:transform}
.contacts__bg::after{content:"";position:absolute;inset:0;background:rgba(10,10,12,.18)} /* ровное лёгкое затемнение, без перекоса на один бок */
.contacts__grid{position:relative}
.contacts__body{display:grid;margin-left:auto;width:min(100%,600px)}
.contacts__body .lead{margin-top:var(--sp-text)}
.contacts__body .lead{color:var(--on-night-2);max-width:28rem}
.contacts__actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:calc(var(--sp-text) * 1.6)}
.socials{display:flex;gap:12px}
.social{width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;transition:background .3s,color .3s,transform .3s var(--ease)}
.social svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5}
.social svg .fill{fill:currentColor;stroke:none}
.social:hover{background:var(--white);color:#0a0a0a;transform:translateY(-3px)}
.social svg path{stroke-linejoin:round;stroke-linecap:round}
/* подвал на последнем экране: реквизиты и документы — мелко, серым */
.contacts{padding-bottom:calc(clamp(56px,6vw,96px) + 84px + env(safe-area-inset-bottom,0px))}
.legal{position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:1}
.legal__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--mist)}
.legal p{margin:0;display:flex;flex-wrap:wrap;gap:4px 20px}
.legal__link{color:inherit;cursor:default}
.legal__note{flex-basis:100%;font-size:.72rem;opacity:.8}
a.legal__link[href]{cursor:pointer;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px}
a.legal__link[href]:hover{color:var(--on-night-2)}

/* ---------- Страницы документов: privacy.html, consent.html, offer.html ---------- */
.doc-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--nav-h)}
.doc-nav__brand img{width:56px}
.doc-nav__back{display:inline-flex;align-items:center;gap:10px;padding:12px 0;font:700 var(--fs-label)/1 var(--tech);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--on-night-2);transition:color .2s}
.doc-nav__back i{font-style:normal;transition:transform .3s var(--ease)}
.doc-nav__back:hover{color:var(--ink)}
.doc-nav__back:hover i{transform:translateX(-3px)}
.doc{padding-block:clamp(24px,5vw,64px) clamp(40px,5vw,72px)}
.doc>.label{width:min(100%,860px);margin-inline:auto}
.doc__body{width:min(100%,860px);margin-inline:auto;padding:clamp(22px,4.5vw,64px);border:1px solid var(--line);border-radius:28px;background:rgba(5,5,5,.8);color:var(--on-night-2);overflow-wrap:break-word}
.doc__body h1{margin:0 0 .6em;font:500 var(--fs-h2)/var(--lh-h2) var(--sans);letter-spacing:var(--ls-h2);color:var(--on-night)}
.doc__body h2{margin:2.2em 0 .8em;font:500 var(--fs-h3)/var(--lh-h3) var(--sans);letter-spacing:var(--ls-h3);color:var(--on-night)}
.doc__body p,.doc__body ul{margin:0 0 1em}
.doc__body ul{padding-left:1.4em}
.doc__body li{position:relative;margin-bottom:.45em}
.doc__body li::before{content:"—";position:absolute;left:-1.4em;color:var(--mist)}
.doc__body strong{font-weight:500;color:var(--on-night)}
.doc__body hr{margin:1.8em 0;border:0;border-top:1px solid var(--line)}
.doc__body a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
.doc__body a:hover{text-decoration-color:currentColor}
.doc__table{margin:0 0 1.2em;overflow-x:auto}
.doc__home{display:flex;width:fit-content;margin:clamp(20px,3vw,32px) auto 0} /* «← На главную» и внизу документа */
.doc__body table{width:100%;border-collapse:collapse;font-size:.95em}
.doc__body th,.doc__body td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.doc__body th{font:700 var(--fs-label)/1.3 var(--tech);letter-spacing:.18em;text-transform:uppercase;color:var(--on-night-2)}
.doc__body td:first-child{color:var(--on-night)}
.legal--doc{position:static;padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
.legal__link[aria-current="page"]{color:var(--on-night-2);text-decoration-color:currentColor}


/* ---------- Листы: «О нас» и «Ещё проекты» ---------- */
.sheet{position:fixed;inset:0;z-index:100;display:grid;align-items:end;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .35s ease}
.sheet__panel{position:relative;background:#0b0b0c;border-top:1px solid rgba(255,255,255,.1);border-radius:28px 28px 0 0;max-height:92vh;overflow:auto;padding:clamp(28px,4vw,64px) var(--gutter) calc(clamp(28px,4vw,64px) + env(safe-area-inset-bottom,0px));animation:up .55s var(--ease)}
.sheet__close{position:sticky;top:0;float:right;width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-size:1rem;z-index:2;transition:transform .3s var(--ease)}
.sheet__close:hover{transform:rotate(90deg)}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(40px);opacity:0}}
/* окно вещи: крупная наклейка слева, описание справа */
#itemSheet{z-index:110;align-items:center;background:rgba(5,5,5,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#itemSheet > .sheet__close{position:absolute;top:clamp(16px,3vw,32px);right:clamp(16px,3vw,32px);float:none}
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start;width:100%;max-width:1280px;max-height:100vh;margin-inline:auto;padding:40px 96px;background:none;border:0;border-radius:0}
.pdp>*{margin-block:auto} /* по центру по высоте, а если не влезает — верх (название) не уходит за край, окно прокручивается */
.pdp__ph{position:relative;justify-self:end;width:100%;max-width:520px;aspect-ratio:1/1}
.pdp__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:rotate(-4deg);filter:drop-shadow(0 16px 22px rgba(0,0,0,.6))}
/* перед / спина: вещь разворачивается вокруг вертикальной оси, как на вешалке (по примеру владельца):
   медленный старт → быстро «ребром» → мягкий доворот; дальний бок темнеет, тень пробегает по вещи */
.pdp__ph{perspective:800px}
.pdp__ph.has-back{cursor:pointer;margin-bottom:56px}
.pdp__flip{position:absolute;inset:0;transform-style:preserve-3d;transform:rotate(-4deg) rotateY(0deg);transition:transform .72s cubic-bezier(.62,.02,.28,1)}
.pdp__ph.is-back .pdp__flip{transform:rotate(-4deg) rotateY(180deg)}
.pdp__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pdp__face--back{transform:rotateY(180deg)}
.pdp__ph .pdp__face img{transform:none}
.pdp__face--back img:not([src]){display:none}
.pdp__shade{position:absolute;inset:0;opacity:0;pointer-events:none;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.pdp__face--front .pdp__shade{background:linear-gradient(90deg,rgba(0,0,0,.15),rgba(0,0,0,.92))}   /* у переда дальний бок при повороте — правый, у спины — левый (в обе стороны поворота) */
.pdp__face--back .pdp__shade{background:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.15))}
.turn-to-back .pdp__face--front .pdp__shade,.turn-to-front .pdp__face--back .pdp__shade{animation:shadeOut .72s cubic-bezier(.62,.02,.28,1) both}
.turn-to-back .pdp__face--back .pdp__shade,.turn-to-front .pdp__face--front .pdp__shade{animation:shadeIn .72s cubic-bezier(.62,.02,.28,1) both}
@keyframes shadeOut{0%{opacity:0}50%,100%{opacity:1}}
@keyframes shadeIn{0%,50%{opacity:1}100%{opacity:0}}
.pdp__turn{position:absolute;left:50%;top:100%;translate:-50% 0;margin-top:18px;display:flex;gap:4px;padding:4px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(10,10,12,.6)}
.pdp__turn[hidden]{display:none}
.pdp__turn button{padding:9px 16px;border-radius:999px;font:700 .68rem/1 var(--tech);letter-spacing:.18em;text-transform:uppercase;color:var(--on-night-2);transition:background .25s,color .25s}
.pdp__turn button:hover{color:var(--ink)}
.pdp__turn button[aria-pressed="true"]{background:#f1f1ef;color:#0a0a0a}
.pdp__label{font:700 var(--fs-label)/1 var(--tech);letter-spacing:var(--ls-label);text-transform:uppercase;color:#9b9ba1}
.pdp__title{margin-top:18px;font:500 clamp(34px,4vw,48px)/1.02 var(--sans);letter-spacing:-.035em}
.pdp__moq{margin-left:.3em;font:400 .44em/1 var(--sans);letter-spacing:0;color:var(--grey);white-space:nowrap} /* опт: «/от 50 шт» рядом с названием */
.pdp__meta{margin-top:12px;font-size:1rem;line-height:1.4;color:#a9a9ae}
.pdp__price{margin-top:18px;font:500 clamp(20px,1.8vw,24px)/1.2 var(--sans);letter-spacing:-.01em;color:var(--white)}   /* «~2.200* руб.» — цена ориентировочная, сноска внизу */
.pdp__note{position:absolute;left:96px;right:96px;bottom:16px;margin:0;font-size:var(--fs-small);font-style:italic;line-height:var(--lh-small);color:#8d8d93}   /* левый нижний угол карточки (в нижнем поле окна — высоту не добавляет) */
.pdp.has-note{padding-bottom:58px}
/* окно вещи целиком в экран (ПК): если не влезает, main.js (pdpFit) по шагам ужимает отступы и «Примеры» */
@media (min-width:721px){
  .pdp.fit-1{padding-top:28px}
  .pdp.fit-1 .pdp__ph{max-width:min(520px,calc(100vh - 170px))}
  .pdp.fit-1 .pdp__title{margin-top:12px}
  .pdp.fit-1 .pdp__about{margin-top:24px;padding-top:16px}
  .pdp.fit-1 .pdp__about--comp{margin-top:16px}
  .pdp.fit-1 .pdp__desc{min-height:0;margin-top:10px}
  .pdp.fit-1 .pdp__ex{margin-top:20px}
  .pdp.fit-2 .pdp__ex-groups{gap:8px 16px;margin-top:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr))}
  .pdp.fit-2 .pdp__ex-col{font-size:.74rem}
  .pdp.fit-2 .pdp__ex-row{gap:5px;margin-top:5px}
  .pdp.fit-2 .pdp__ex-row button{width:34px;height:42px;border-radius:6px}
  .pdp.fit-3 .pdp__desc{font-size:.88rem;line-height:1.5}
  .pdp.fit-3 .pdp__ex-groups{grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr))}
  .pdp.fit-3 .pdp__ex-col{font-size:.7rem;line-height:1.25}
  .pdp.fit-3 .pdp__ex-row button{width:28px;height:34px;border-radius:5px}
  .pdp.fit-3 .pdp__ph{max-width:min(520px,calc(100vh - 140px))}
  .pdp.fit-3{padding-inline:56px;gap:48px}
  .pdp.fit-3 .pdp__note{left:56px;right:56px}
  /* последний шаг: «Примеры» — сплошная лента миниатюр без подписей коллекций (название — при наведении) */
  .pdp.fit-4{padding-top:18px;padding-bottom:46px}
  .pdp.fit-4 .pdp__note{bottom:12px}
  .pdp.fit-4 .pdp__title{margin-top:8px}
  .pdp.fit-4 .pdp__meta{margin-top:6px}
  .pdp.fit-4 .pdp__price{margin-top:10px}
  .pdp.fit-4 .pdp__about{margin-top:16px;padding-top:12px}
  .pdp.fit-4 .pdp__about--comp{margin-top:12px}
  .pdp.fit-4 .pdp__desc{margin-top:8px;font-size:.85rem;line-height:1.45}
  .pdp.fit-4 .pdp__ex{margin-top:14px}
  .pdp.fit-4 .pdp__ex-groups{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
  .pdp.fit-4 .pdp__ex-grp{display:contents}
  .pdp.fit-4 .pdp__ex-col{display:none}
  .pdp.fit-4 .pdp__ex-row{display:contents}
}
.pdp__about{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.pdp__desc{min-height:72px;margin-top:14px;max-width:34rem;font-size:var(--fs-body);line-height:var(--lh-body);color:#a9a9ae}
.pdp__about--comp{margin-top:24px}   /* «Состав» — сразу под «Описанием» */
/* «О нас»: история по центру на граффити-стене, разделы проявляются при прокрутке окна */
#about .sheet__panel{background:linear-gradient(rgba(5,5,5,.6),rgba(5,5,5,.6)),url(../img/bg-wall.webp) center/cover #0b0b0c}
.ab{width:min(1100px,100%);margin-inline:auto;text-align:center;container-type:inline-size}
.ab .label{justify-content:center}
.sheet__panel--about>.sheet__close{margin-bottom:-44px} /* крестик не сдвигает центрированное содержимое */
/* каждый блок — своя «страница» высотой с окно, прокрутка всегда останавливается на начале блока */
#about .sheet__panel{--ab-pad:clamp(28px,4vw,64px);scroll-snap-type:y mandatory;scroll-padding-top:var(--ab-pad)}
.ab__page{min-height:calc(92vh - 2 * var(--ab-pad));display:flex;flex-direction:column;justify-content:center;padding-block:24px;scroll-snap-align:start}
.ab__brand{padding-bottom:.14em;font:400 clamp(4.4rem,13cqw,9.5rem)/.95 var(--graff);color:var(--ink)}
.ab__sub{margin-top:var(--sp-text);font:500 var(--fs-body)/1.3 var(--sans);color:var(--grey)}
.ab__lead{max-width:var(--measure);margin:var(--sp-text) auto 0;font-size:var(--fs-body);line-height:var(--lh-body);color:rgba(241,241,239,.86)}
/* Миссия и Философия: красное слово по буквам → цитата поверх слова → текст ниже */
.ab__stage{position:relative;display:grid;place-items:center}
.ab__big{font:400 min(13rem,calc(150cqw / var(--n,7)))/1 var(--graff);color:var(--dot);white-space:nowrap}
.ab__big span{display:inline-block;opacity:0;transform:translateY(.22em) rotate(-6deg) scale(.86);filter:blur(10px);
  transition:opacity .45s ease,transform .7s var(--ease),filter .6s ease;transition-delay:calc(var(--i) * 90ms)}
.ab__quote{position:absolute;left:50%;top:50%;width:min(92%,880px);translate:-50% -50%;font:italic 700 clamp(.95rem,2.1cqw,1.5rem)/1.25 var(--sans);letter-spacing:.01em;text-transform:uppercase;color:#fff;
  text-shadow:0 0 2px #000,0 2px 14px rgba(0,0,0,.85);opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .8s var(--ease);transition-delay:calc(var(--n,7) * 90ms + .35s)}
.ab__text{max-width:600px;margin:clamp(28px,4vw,52px) auto 0;font:italic 600 clamp(1.02rem,.5vw + .95rem,1.2rem)/1.55 var(--sans);color:rgba(241,241,239,.92)}
.ab__word .ab__text{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .9s var(--ease);transition-delay:calc(var(--n,7) * 90ms + 1s)}
.ab__word.is-in .ab__big span,.ab__prin.is-in .ab__big span{opacity:1;transform:none;filter:none}
.ab__word.is-in .ab__quote,.ab__word.is-in .ab__text{opacity:1;transform:none}
/* общий шаг появления */
.ab-step{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .9s var(--ease)}
.ab-step.is-in{opacity:1;transform:none}
.ab__head{font:400 clamp(3.4rem,9cqw,7rem)/1 var(--graff);color:var(--ink)}
/* Принципы: видео мастерской из трёх кадров, каждый принцип над своим кадром */
.ab__prin{position:relative;aspect-ratio:16/9;display:grid;grid-template-rows:auto 1fr;padding-top:5.5%}
/* края растворяются: по бокам — маска рамки, сверху и снизу — маска внутреннего слоя (две маски в одной не везде работают) */
.ab__film{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ab__fade{position:absolute;inset:0;-webkit-mask-image:linear-gradient(transparent,#000 13%,#000 87%,transparent);mask-image:linear-gradient(transparent,#000 13%,#000 87%,transparent)}
.ab__film video{display:block;width:100%;height:100%;object-fit:cover;scale:1.04}
.ab__fade::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(5,5,5,.38)}
.ab__fade::after{content:"";position:absolute;inset:0;z-index:2;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  -webkit-mask-image:radial-gradient(closest-side,transparent 72%,#000);mask-image:radial-gradient(closest-side,transparent 72%,#000)}
.ab__big--prin{position:relative;z-index:1;margin:0;font-size:min(9rem,calc(110cqw / var(--n,8)));text-shadow:0 2px 24px rgba(0,0,0,.55)} /* красное «ПРИНЦИПЫ» — как «МИССИЯ», чуть меньше: стоит на видео */
.ab__cols{position:relative;z-index:1;display:grid;grid-template-columns:31.3fr 37.3fr 31.4fr;align-items:center;padding-inline:3%}
.ab__cols li{padding-inline:6%}
.ab__cols strong{display:block;hyphens:manual;font:400 clamp(1.5rem,4cqw,3rem)/1.05 var(--graff);color:rgba(255,255,255,.74);text-shadow:0 2px 18px rgba(0,0,0,.6)}
.ab__cols span{display:block;max-width:24ch;margin:.9rem auto 0;font:500 clamp(.8rem,1.3cqw,.98rem)/1.4 var(--sans);color:rgba(241,241,239,.72);text-shadow:0 1px 10px rgba(0,0,0,.7)}
.ab__cols li:nth-child(2){transition-delay:.15s}
.ab__cols li:nth-child(3){transition-delay:.3s}
/* Как мы работаем */
/* «Сейчас» и «Признание» — временно страницами в «О нас» */
.ab__title{max-width:22ch;margin:0 auto;font:500 var(--fs-h2)/var(--lh-h2) var(--sans);letter-spacing:var(--ls-h2);color:var(--ink)}
.ab__now .ab__lead+.ab__lead{margin-top:1rem}
.ab__proof{position:relative;display:grid;justify-items:center;padding:clamp(48px,7vw,96px) clamp(16px,4vw,56px)}
.ab__proof>:not(.proof__bg){position:relative}
.ab__proof .proof__bg{border-radius:24px}
.ab__proof .proof__bg img{translate:none;object-position:center 45%}
.ab__proof .proof__bg::after{background:rgba(5,5,5,.76)}
.ab__proof .awards{width:min(100%,36rem);margin-top:1.8rem;text-align:left}
.ab__proof .awards span{color:rgba(241,241,239,.86)}
.ab__how .ab__text{font-style:normal;font-weight:500;color:rgba(241,241,239,.86)}
.ab__how .about__more{margin-top:clamp(24px,3vw,36px);transition:opacity .8s ease,transform .9s var(--ease),border-color .2s,background .2s}
.about__more{display:inline-flex;gap:.5em;padding:12px 20px;border:1px solid var(--line);border-radius:999px;font:500 .9rem/1 var(--sans);transition:border-color .2s,background .2s}
.about__more:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04)}
/* карточка одного проекта: открывается только своей плашкой, слегка окрашена в цвет проекта (--pc) */
.proj-panel{--pc:255,255,255;background:radial-gradient(110% 85% at 100% 0%,rgba(var(--pc),.16),transparent 58%),radial-gradient(70% 60% at 0% 100%,rgba(var(--pc),.07),transparent 60%),#0b0b0c;border-top:2px solid rgba(var(--pc),.6);transition:border-color .4s}
.proj-panel .gal__t:hover{border-color:rgba(var(--pc),.9)}
/* стрелки у краёв окна: листать между проектами (в порядке плашек) */
.proj-panel{padding-inline:calc(var(--gutter) + 56px)}
.proj__nav{position:absolute;top:50%;translate:0 -50%;z-index:2;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(var(--pc),.5);background:rgba(var(--pc),.08);color:var(--white);transition:background .3s,color .3s,border-color .3s}
.proj__nav:hover{background:rgb(var(--pc));border-color:rgb(var(--pc));color:#0a0a0a}
.proj__nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.proj__nav--prev{left:clamp(10px,1.6vw,28px)}
.proj__nav--next{right:clamp(10px,1.6vw,28px)}
@keyframes swap{from{opacity:0;transform:translateY(10px)}}

.sheet[hidden],.toast[hidden]{display:none}

/* ---------- Заявка «Получить расчёт заказа» ---------- */
.sheet--form{align-items:center;justify-items:center;padding:var(--gutter)}
.order{width:min(100%,560px);border:1px solid var(--line);border-radius:28px;
  background:linear-gradient(rgba(5,5,5,.74),rgba(5,5,5,.74)),url(../img/bg-wall.webp) center/cover #0b0b0c}
.order__form,.order__done{display:grid;gap:18px}
.order__form[hidden],.order__done[hidden]{display:none}
.order .label{margin-bottom:0}
.order__title{margin:0 0 6px;max-width:12ch;font:500 var(--fs-h3)/var(--lh-h3) var(--sans);letter-spacing:var(--ls-h3);color:var(--on-night);outline:none}
.order__text{margin:0 0 6px;color:var(--on-night-2)}
.field{display:grid;gap:8px}
.field__label{font:700 var(--fs-label)/1 var(--tech);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--on-night-2)}
.field__input{width:100%;height:54px;padding:0 18px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:var(--ink);font:400 1rem/1 var(--sans);outline:none;transition:border-color .2s,background .2s}
.field__input::placeholder{color:var(--mist)}
.field__input:focus{border-color:rgba(255,255,255,.65);background:rgba(255,255,255,.08)}
.field__err{display:none;font-size:var(--fs-small);line-height:1.3;color:#ff5a62}
.field.is-err .field__input{border-color:var(--dot)}
.field.is-err .field__err{display:block}
.check{position:relative;display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;margin-top:4px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--on-night-2);cursor:pointer}
.check input{position:absolute;top:0;left:0;width:22px;height:22px;margin:0;opacity:0}
.check__box{width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;transition:background .2s,border-color .2s}
.check__box::after{content:"";width:11px;height:6px;border:2px solid #0a0a0a;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .2s var(--ease)}
.check input:checked + .check__box{background:var(--white);border-color:var(--white)}
.check input:checked + .check__box::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.check input:focus-visible + .check__box{outline:2px solid var(--white);outline-offset:3px}
.check.is-err .check__box{border-color:var(--dot);box-shadow:0 0 0 1px var(--dot)}
.check__link{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px;text-align:left}
.check__link:hover{text-decoration-color:currentColor}
.order__send{justify-self:start;margin-top:8px}
.order__send[disabled]{opacity:.6;pointer-events:none}
.order__done .pill{justify-self:start}

/* ---------- «Быстрый бриф»: один вопрос на экран ---------- */
/* окно почти во весь экран и одного размера на всех шагах; длинный вопрос прокручивается внутри, низ (кнопки, VK) на месте */
.sheet#brief{padding:clamp(16px,2.5vw,32px)}
.brief{--bp:clamp(22px,3vw,44px);display:flex;flex-direction:column;width:min(100%,1240px);height:calc(100svh - 2 * clamp(16px,2.5vw,32px));max-height:none;overflow:hidden;padding:var(--bp)}
.brief>.sheet__close{position:absolute;top:var(--bp);right:var(--bp);float:none}
.brief__form{flex:1;min-height:0;display:flex;flex-direction:column;gap:18px}
.brief__form[hidden]{display:none}
.brief .order__done{margin-block:auto;justify-items:center;text-align:center}
.brief .order__done .pill{justify-self:center}
.brief .order__done .order__title{max-width:none}
.brief__top{display:flex;align-items:center;gap:16px;min-height:44px;padding-right:60px}
.brief__top .label{margin:0}
.brief__count{margin:0 8px 0 auto;font:700 var(--fs-label)/1 var(--tech);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--on-night);font-variant-numeric:tabular-nums;white-space:nowrap}
.brief__bar{height:2px;margin-top:-6px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.brief__bar i{display:block;height:100%;background:var(--white);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.bq{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;gap:clamp(16px,2.4vh,24px);align-content:start;padding:clamp(8px,3vh,36px) 6px 8px;margin-inline:-6px}
.bq[hidden]{display:none}
.bq__title{margin:0 0 4px;max-width:22ch;font:500 var(--fs-h2)/var(--lh-h2) var(--sans);letter-spacing:var(--ls-h2);color:var(--on-night);outline:none}
@media (min-width:721px){ /* контакты на ПК — поля в две колонки, чтобы всё влезало без прокрутки */
  .bq[data-key="contacts"]{grid-template-columns:1fr 1fr;column-gap:12px}
  .bq[data-key="contacts"]>:not(.field){grid-column:1/-1}
}
.bq__hint{margin:-8px 0 0;font-size:var(--fs-small);color:var(--on-night-2)}
/* ответы — ровная сетка: блоки одной высоты и ширины, одинаковые промежутки по горизонтали и вертикали */
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));grid-auto-rows:1fr;gap:12px}
.chip{display:flex;align-items:center;gap:10px;min-height:58px;padding:14px 20px;border-radius:16px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);color:var(--ink);font:500 1.02rem/1.25 var(--sans);text-align:left;transition:background .2s,border-color .2s,color .2s,transform .25s var(--ease)}
.chip:hover{border-color:rgba(255,255,255,.6)}
.chip:active{transform:scale(.97)}
.chip:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.chip[aria-pressed="true"]{background:var(--white);border-color:var(--white);color:#0a0a0a}
.bq[data-type="many"] .chip::before{content:"+";width:1em;text-align:center;font-weight:400;opacity:.6}
.bq[data-type="many"] .chip[aria-pressed="true"]::before{content:"✓";opacity:1}
.chips--wide .chip{display:grid;gap:4px;align-content:center;justify-items:start}
.chip b{font-weight:500}
.chip small{font-size:var(--fs-small);line-height:1.3;color:var(--on-night-2);transition:color .2s}
.chip[aria-pressed="true"] small{color:#55555a}
.bq__more[hidden]{display:none}
.bq__more input[type="date"]{color-scheme:dark;max-width:260px}
.brief__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* низ окна: «…напишите нам в VK» слева и «Назад» + «Дальше» справа — на одной линии, по центру по высоте */
.brief__foot{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:24px;padding-top:8px}
.brief__foot .brief__alt{grid-column:1;grid-row:1}
.brief__alt{margin:0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--on-night-2)}
.brief__alt a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.brief__alt a:hover{text-decoration-color:currentColor}
.brief__nav{display:contents}
.brief__back{display:inline-flex;align-items:center;gap:10px;padding:14px 4px;font:700 var(--fs-label)/1 var(--tech);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--on-night-2);transition:color .2s}
.brief__back i{font-style:normal;transition:transform .3s var(--ease)}
.brief__back:hover{color:var(--ink)}
.brief__back:hover i{transform:translateX(-3px)}
.brief__back.is-off{visibility:hidden}
.brief__next[disabled]{opacity:.35;pointer-events:none}
/* смена вопроса: старый уходит в сторону, новый въезжает с той стороны, куда идём; ответы — «лесенкой» */
.bq.is-out{opacity:0;transform:translate3d(calc(var(--bd,1) * -24px),0,0);transition:opacity .17s ease-in,transform .17s ease-in}
.bq.is-in{animation:bqIn .45s var(--ease) backwards}
.bq.is-in .chip{animation:bqChip .4s var(--ease) backwards;animation-delay:calc(.08s + var(--i,0) * .035s)}
@keyframes bqIn{from{opacity:0;transform:translate3d(calc(var(--bd,1) * 28px),0,0)}}
@keyframes bqChip{from{opacity:0;transform:translate3d(0,8px,0)}}
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:120;transform:translateX(-50%);padding:.8rem 1.3rem;border-radius:999px;background:var(--ink);color:#0a0a0a;font-size:var(--fs-small);animation:toast .3s ease-out}
@keyframes toast{from{opacity:0;transform:translate(-50%,10px)}}

/* ---------- Адаптив ---------- */
@media (max-width:1020px){
  .nav{grid-template-columns:auto 1fr}
  .nav__links{position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;padding:calc(var(--nav-h) + 24px) var(--gutter) 40px;
    background:var(--paper);color:var(--ink);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
  .nav__links.is-open{opacity:1;visibility:visible}
  .nav.menu-open{color:var(--ink)}
  
  .nav__links a,.nav__links button{font-size:clamp(2rem,9vw,3.2rem);font-weight:400;letter-spacing:-.03em;opacity:1;padding:6px 0}
  .nav__links a::after,.nav__links button::after{display:none}
  .nav__links .nav__merch{margin-top:18px;padding:12px 22px;font-size:1.1rem;letter-spacing:0}
  .burger{display:block}
  .catalog__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,7vw,64px);max-width:680px}
  .catalog__grid--sheet{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
  .scard{min-height:0}
  .proof__grid{grid-template-columns:1fr}
  .proof__bg img{translate:none}
  .proof__bg::after{background:linear-gradient(to bottom,rgba(5,5,5,.55),rgba(5,5,5,.85) 45%,rgba(5,5,5,.92))}
  .contacts__bg{width:100%;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 80%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 80%,transparent)}
  .contacts__bg img{opacity:.22}   /* на телефоне фото под текстом — надпись на ткани не должна спорить с текстом */
  .contacts__bg::after{background:linear-gradient(to top,var(--night) 20%,transparent 70%);opacity:.55}
  .contacts__body{margin-left:0}
  .contacts{padding-bottom:calc(56px + 160px + env(safe-area-inset-bottom,0px))}
  .legal__in{flex-direction:column}
  .legal p{flex-direction:column;gap:2px}
}
@media (max-width:720px){
  .sheet--form{align-items:end;padding:0}
  .order{width:100%;border-width:1px 0 0;border-radius:28px 28px 0 0}
  .order__send{justify-self:stretch;justify-content:space-between}
  .sheet#brief{align-items:end;padding:0}
  .brief{--bp:22px;height:calc(100svh - 12px);padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}   /* лист снизу почти во весь экран, одной высоты */
  .chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .chips--wide{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}   /* в одну колонку высота по тексту — иначе не влезает */
  .chip{min-height:52px;padding:11px 14px;font-size:.95rem}
  .chips--wide .chip{gap:2px}
  .bq{padding-top:14px}
  .brief__foot{grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:4px}
  .brief__back{grid-column:1;grid-row:1;justify-self:start}
  .brief__foot .brief__alt{grid-row:2}
  .brief__next{grid-column:2;grid-row:2}
  .proj-panel{padding-inline:var(--gutter);padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .scard--sheet{clear:both;margin-top:14px}   /* ниже крестика; стрелки проектов — под карточкой */
  .proj__nav{width:40px;height:40px;top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));translate:none;background:rgba(5,5,5,.7)}
  .proj__nav--prev{left:calc(var(--gutter) + 8px)}
  .proj__nav--next{right:calc(var(--gutter) + 8px)}
  .now__bg img{object-position:center top}
  .now__bg::after{background:linear-gradient(to top,rgba(5,5,5,.96) 0%,rgba(5,5,5,.88) 42%,rgba(5,5,5,.35) 72%,rgba(5,5,5,.15) 100%)}
  .lb__nav{display:none}
  .case{grid-template-columns:1fr;gap:22px}
  .case__desc{min-height:4.8em}
  .case__ph{aspect-ratio:1/1}
  .case__ph:nth-child(2){margin-bottom:0}
  .lb__foot{grid-template-columns:1fr 1fr;gap:12px}
  .lb__thumbs{grid-column:1 / -1;grid-row:1;max-width:100%}
  .lb__col{grid-row:2;padding:11px 12px;font-size:.6rem;letter-spacing:.06em;white-space:normal}
  .lb__col--prev{grid-column:1}
  .lb__col--next{grid-column:2}
  .lb__stage{padding:0 10px}
  :root{--nav-h:60px;--r:14px}
  .nav__brand span{display:none}
  .catalog__grid{grid-template-columns:1fr;row-gap:44px;max-width:340px}
  .plates{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:none}
  .plate--last:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc((100% - 12px) / 2)} /* нечётная последняя плашка — по центру ряда */
  .catalog__grid--sheet{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:40px}
  .item__tag{min-width:88%;margin-top:16px;padding:9px 10px 8px}
  .item__name{font-size:.74rem;letter-spacing:.03em}
  .item__meta{font-size:.6875rem;margin-top:.2rem}   /* не мельче 11 px — иначе на телефоне не читается */
  #catSheet .sheet__panel{background-image:linear-gradient(rgba(5,5,5,.6),rgba(5,5,5,.6)),url(../img/bg-wall-tall.webp)}
  #itemSheet{align-items:start}
  .pdp{grid-template-columns:1fr;gap:32px;align-items:start;max-height:100dvh;padding:76px var(--gutter) calc(40px + env(safe-area-inset-bottom,0px))}
  .pdp__ph{justify-self:center;max-width:300px}
  .pdp__note{position:static;grid-column:1/-1;margin:-8px 0 0}
  .pdp.has-note{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
    .scard{padding:18px;gap:18px}
  .pjb{aspect-ratio:var(--mar);max-width:none;--k:calc(100cqw / 500)}   /* телефон: лекала в одну колонку «ёлочкой» */
  .pj{left:var(--mx);top:var(--my);width:var(--mw);height:var(--mh)}
  .cycle{grid-template-columns:1fr;gap:56px;max-width:460px}
  .cy--r{--d:0s}
  .cy{--fs:3cqw}
  .cy--r{--fs:3.2cqw}
  .manifest__points{grid-template-columns:1fr;gap:28px}
  .manifest__word{padding-top:.16em}   /* «НЕ ДЛЯ ВСЕХ.» на телефоне в две строки — росчерки не касаются «Мы делаем» */
  #about .sheet__panel{background-image:linear-gradient(rgba(5,5,5,.6),rgba(5,5,5,.6)),url(../img/bg-wall-tall.webp)}
  .ab__quote{top:64%;font-size:.78rem}
  .ab__prin{aspect-ratio:auto;padding-top:0;margin-inline:calc(-1 * var(--gutter));display:block}
  .ab__film{inset:auto 0 0;aspect-ratio:16/9}
  .ab__big--prin{margin-bottom:20px}
  .ab__cols{aspect-ratio:16/9;padding-inline:0}
  .ab__cols li{padding-inline:4px}
  .ab__cols strong{font-size:clamp(1rem,5vw,1.4rem)}
  .ab__cols span{margin-top:.4rem;font-size:.75rem;line-height:1.3}
  .lookbook__hint{display:none}
  .lookbook__head{align-items:flex-end}
  .rail__track .ph{height:min(34vh,260px)}
}

@media (prefers-reduced-motion:reduce){
  .pdp__flip{transition:none}
  .pdp__shade{animation:none!important}
  html{scroll-behavior:auto}
  .js .rv,.js .split .w>span{opacity:1;transform:none;transition:none}
  .shop__hint i{animation:none}
  .ph img{transition:none}
  .sheet,.sheet__panel{animation:none}
  .lb.is-tag .lb__tag{animation:none;opacity:1}
  .stamps li,.stamps li::after{transition:none}
  .item__ph img{transition:none}
  .item:hover .item__ph img{transform:rotate(var(--tilt))}
  .ab-step,.ab__big span,.ab__quote,.ab__word .ab__text{opacity:1;transform:none;filter:none;transition:none}
  .js .cy__l,.js .cy__cap,.js .cy__txt{opacity:1;transform:none;transition:none}
  .js .pj,.js .pj__t{opacity:1;transform:none;transition:none}
}

/* ---------- Молния-стежок через всю страницу ---------- */
main{position:relative;overflow:clip} /* молния никогда не удлиняет страницу */
.zip{position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:visible} /* под контентом: секции идут позже в разметке и рисуются поверх — фото и карточки перекрывают нитку */
.zip__ghost{fill:none;stroke:rgba(255,255,255,.08);stroke-width:1.2;stroke-dasharray:2 8}
.zip__teeth{fill:none;stroke:rgba(255,255,255,.68);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.zip-head{position:absolute;left:0;top:0;z-index:0;overflow:visible;pointer-events:none;will-change:transform;transform-origin:0 0;transition:opacity .4s}
.zip{transition:opacity .4s}
html.zip-wait .zip{opacity:0}
html.zip-wait .zip-head{visibility:hidden} /* шапка наверху, язычок худи ещё не стал собачкой сайта — молния сайта не проступает сквозь шапку */
.zip__pull{fill:#f4f4f2}
.zip__hole{fill:#050505}
.zip__glow{fill:url(#zipGlow)}
.label::before{transition:transform .5s var(--ease),box-shadow .5s}
.zipped .label::before,.zipped.label::before{transform:scale(1.6);box-shadow:0 0 0 4px rgba(215,1,13,.18),0 0 14px rgba(215,1,13,.6)}