/* CAIRN — прототип. Палитра замерена в refs/waaark-raw/theme/js/script.js,
   см. HANDOFF.md, раздел 10. */

:root{
  --sky:#e0d5c3;
  --coral:#c2603c;
  --navy:#2e2822;
  --navy-2:#3a322a;
  --teal:#a8b394;
  --teal-dk:#98a583;
  --coral-lt:#e0a184;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; overflow:hidden; background:var(--sky); color:var(--navy);
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:300;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

.page-container{position:fixed;inset:0}

.page-section{
  position:absolute;inset:0;
  visibility:hidden;            /* переключает JS, не CSS-переход */
}
.page-section.is-active{visibility:visible}

/* ---------- общий хром ---------- */
.chrome{position:absolute;left:0;right:0;top:0;z-index:6;
  display:flex;align-items:center;justify-content:space-between;
  padding:38px 46px}
.brand{font-weight:600;letter-spacing:.30em;font-size:15px;color:var(--navy)}
.nav{display:flex;gap:28px;font-size:12.5px;letter-spacing:.20em;text-transform:uppercase}
.nav-item{color:var(--navy);opacity:.75;cursor:pointer;transition:opacity .25s}
.nav-item:hover{opacity:1}
.nav-item.is-off{opacity:.34;cursor:default}
.nav-item.is-on{opacity:1;text-decoration:underline;text-underline-offset:6px}
/* Переключатель языка — последний пункт меню, отделён чертой, чтобы не читался
   разделом сайта. Стоит во всех восьми шапках: страница на каждой секции своя. */
.nav-lang{padding-left:22px;border-left:1px solid currentColor;
  opacity:.55;font-weight:500}
.nav-lang:hover{opacity:1}
.chrome-dark .nav-lang{border-color:#fff}
.chrome-dark .brand,.chrome-dark .nav-item{color:#fff}
.burger{display:none}
.nav-overlay{display:none}

/* ---------- главная ---------- */
.wave-canvas{position:absolute;inset:0;z-index:1}
.wave-canvas canvas{width:100%;height:100%;display:block}

.blk{position:absolute;z-index:3;display:flex;flex-direction:column;
     justify-content:flex-end;padding:46px}
.blk-text{max-width:100%}
.kicker{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;opacity:.7;
        margin-bottom:14px}
.line{font-family:'Playfair Display',Georgia,serif;font-weight:500;
      line-height:1.12;letter-spacing:-.015em;margin:0}

.b-works{left:0;top:0;width:66.67%;height:100%;color:var(--navy)}
.b-works .line{font-size:clamp(30px,3.6vw,56px);max-width:15ch}
/* Иллюстрация: три слоя с альфой, собранные из одной растровой картинки.
   Координаты слоёв — доли исходного квадрата, из site/images/works-layers.json,
   поэтому композиция собирается ровно как в оригинальном файле. */
/* Картинка обязана жить внутри голубого блока и не наезжать на заголовок.
   Поэтому она не абсолютная, а обычный участник колонки: забирает всё свободное
   место над текстом и ужимается сама. Абсолютное позиционирование этого не умеет —
   на широком коротком окне оно наезжало на заголовок на 111 px, замерено. */
.art-fit{flex:1 1 auto;min-height:0;position:relative;display:flex;
  align-items:center;justify-content:center;padding:10px 0 60px;pointer-events:none}
/* 48 px снизу — это запас под ход слоёв: дыхание до 7 px плюс расхождение
   на заходе мышью до 16 px у самого переднего предмета, плюс поля. Без запаса нижний
   образец материала наезжал на заголовок на 31 px. */
.art{position:relative}  /* размер коробки считает art.js: CSS с aspect-ratio пропорцию не держит */
.art-layer{position:absolute;display:block;will-change:transform}
/* Правые блоки втрое уже главного, там иллюстрации нужен другой запас снизу.
   Верхнему добавлен отступ сверху: он начинается от края страницы, и без него
   картинка лезет под пункты меню. */
/* Владелец 04.09.2026: «на розовом мелко». Замер подтвердил: картинка упиралась
   не в ширину блока (388 px было доступно, занимала 242), а в высоту — её съедали
   поля блока, поля .art-fit и третья строка заголовка. Отсюда три правки:
   поля картинки урезаны, верхнее поле блоков уменьшено, заголовок Vision пущен
   шире и стал двухстрочным. */
/* Ещё десять процентов, а розовую вдобавок опустить ниже (владелец 04.09.2026).
   Картинка упирается в высоту и заполняет свой просвет целиком, поэтому расти
   вверх ей некуда: верхний край задан полем блока, а над ним меню. Значит место
   берётся снизу — у нижнего поля блока, у нижнего поля картинки и у отбивки
   подписи. Картинка от этого не только растёт, но и опускается: верх на месте,
   низ уходит вниз. У синего блока сверху меню нет, там добавлено и сверху. */
.b-vision .art-fit{padding:30px 0 2px}
.b-studio .art-fit{padding:2px 0 4px}
.b-vision{padding:32px 34px 26px}
.b-studio{padding:24px 34px 40px}
.b-vision .kicker,.b-studio .kicker{margin-bottom:10px}

.b-vision{left:66.67%;top:0;width:33.33%;height:50%;color:#fff}
.b-vision .line{font-size:clamp(19px,1.7vw,28px);max-width:23ch}

.b-studio{left:66.67%;top:50%;width:33.33%;height:50%;color:#fff;cursor:pointer}
/* Приближение композиции здесь пробовал — не годится. По ширине запас есть
   (буква занимает 0.16-0.82 кадра), но картинка упирается в высоту, а сверху
   пустого поля нет вовсе: предметы начинаются с 0.001 кадра. Любой зум сразу
   срезает рулоны и линейку, торчащие из горловины буквы. Размер здесь упирается
   в высоту блока, и это предел. */
.b-studio .line{font-size:clamp(19px,1.7vw,28px);max-width:16ch}
.enter{position:absolute;left:34px;bottom:22px;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.b-studio:hover .enter{opacity:.85;transform:none}

/* ---------- студия ---------- */
.section-studio{background:var(--navy);color:#fff;z-index:2}
/* Поля сверху и снизу — не украшение: содержимое центрируется по высоте, и на
   ноутбуке 1280x720 оно вылезало вверх, подпись секции наезжала на логотип.
   Верхнее поле держит содержимое ниже шапки, нижнее — выше края. */
/* Текст слева, буквы справа. В столбец они занимали левую треть экрана и
   выходили мелкими: вертикаль делилась между заголовком и карточками. В ряд
   карточкам достаётся вся высота — буква выросла с 224 до 360 px на 1440×900. */
.studio-inner{position:absolute;inset:0;display:flex;flex-direction:row;flex-wrap:wrap;
  align-items:center;align-content:center;gap:0 clamp(34px,4.5vw,84px);
  padding:clamp(92px,12vh,132px) clamp(46px,7vw,120px) clamp(44px,7vh,80px)}
.studio-head{flex:0 1 42ch;max-width:42ch;margin-bottom:0}
.studio-head .line{font-size:clamp(30px,4vw,58px)}
.studio-lead{margin:22px 0 0;font-size:16px;line-height:1.65;opacity:.72;max-width:52ch}

/* min-width:0 обязателен. Ширину картинки ставит JS в пикселях, поэтому
   min-content колонки с буквами равен сумме их ширин — без сброса минимума ряд
   переносился на средних окнах (1280×1024, 1100×850 — замерено), текст и буквы
   вставали друг под друга, и содержимое лезло под шапку. */
.members{flex:1 1 380px;min-width:0;display:flex;gap:clamp(22px,3vw,52px);flex-wrap:nowrap}
.member{flex:1 1 0;min-width:0;max-width:none}
/* Карточка человека: буква вместо цветного прямоугольника с цифрой.
   Высота задаётся здесь, ширину коробки считает art.js по пропорции набора —
   у букв она вертикальная (0.86 и 0.86), поэтому по ширине они не расползаются.
   pointer-events карточке возвращаем: подъём при наведении ловится на ней. */
.member-art{flex:none;height:clamp(240px,46vh,470px);padding:0 0 10px;
  justify-content:flex-start;margin-bottom:16px}
.member{cursor:default}
.member-name{font-size:15px;letter-spacing:.02em;margin-bottom:6px}
.member-role{font-size:13.5px;line-height:1.55;opacity:.6}

/* Ссылка возврата переносится на свою строку под обеими колонками. */
/* flex-basis:100% относится к главной оси: в ряду студии это «вся ширина, своя
   строка», а в колонке Works было бы «вся высота» — ссылка растягивалась на
   729 px и выдавливала содержимое за верх экрана. Поэтому перенос — только там,
   где раскладка рядом. */
.back-link{flex:none;margin-top:clamp(28px,4vh,52px);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;opacity:.6;cursor:pointer;transition:opacity .25s;
  align-self:flex-start}
.back-link:hover{opacity:1}
.studio-inner .back-link{flex:0 0 100%}



/* ---------- заставки страниц ---------- */
/* У оригинала на каждой странице первый экран — заставка: крупное название,
   короткий столбец услуг и ГИГАНТСКАЯ начальная буква фоном, чуть светлее самого
   фона (у них это bodymovin, anim/process-intro.json — буква V на коралловом).
   Буква у нас своя, набрана нашим же Playfair: приём тот, шрифт наш. */
.section-vision-intro{background:var(--coral);color:#fff;z-index:2}
.section-works-intro{background:var(--sky);color:var(--navy);z-index:2}
.section-studio-intro{background:var(--navy);color:#fff;z-index:2}

.intro-letter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',Georgia,serif;font-weight:500;
  font-size:min(96vh,72vw);line-height:.78;color:currentColor;opacity:.10;
  user-select:none;pointer-events:none;z-index:0}
.intro-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(92px,12vh,132px) clamp(24px,6vw,80px) clamp(80px,12vh,140px)}
.intro-title{font-family:'Playfair Display',Georgia,serif;font-weight:500;
  font-size:clamp(46px,7vw,104px);line-height:1;letter-spacing:-.02em;margin:0}
.intro-highlight{margin-top:clamp(18px,3vh,34px);
  font-family:'Playfair Display',Georgia,serif;font-weight:400;
  font-size:clamp(22px,3.4vw,50px);line-height:1.18}
.intro-tail{margin:clamp(14px,2vh,22px) 0 0;font-size:14.5px;letter-spacing:.04em;opacity:.7}

/* Приглашение прокрутить — их .section-scroll с мышкой; колёсико бежит вниз. */
.intro-scroll{position:absolute;left:50%;bottom:clamp(26px,4vh,44px);transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.6;transition:opacity .25s}
.intro-scroll:hover{opacity:1}
.mouse{display:block;width:22px;height:34px;border:1.5px solid currentColor;border-radius:11px;
  position:relative}
.mouse i{position:absolute;left:50%;top:7px;width:2px;height:6px;margin-left:-1px;
  background:currentColor;border-radius:1px;animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}
  60%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:0}}

/* ---------- правое меню страницы ---------- */
/* Геометрия оригинала: fixed, top 100, right 50, 14 px капслоком, по правому краю. */
.nav-page{position:fixed;top:100px;right:clamp(22px,3.2vw,50px);z-index:8;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;text-align:right}
.nav-page[hidden]{display:none}
.nav-page ul{list-style:none;margin:0;padding:0}
.nav-page .page + .page{margin-top:12px}
.nav-page .page span{cursor:pointer;opacity:.45;transition:opacity .25s}
.nav-page .page.is-active span,.nav-page .page span:hover{opacity:1}
/* Чёрточки работ раскрываются только под активным пунктом — как у оригинала. */
.nav-page .subnav{display:none;margin:8px 0 0 auto;padding:0;width:26px}
.nav-page .page.is-active .subnav{display:block}

/* ---------- страница Works: кейсы ---------- */
/* Раскладка снята с оригинала (style.css:1971-2100): у каждого проекта свой цвет
   на весь экран, левая половина экрана притемнена на 10 %, по центру блок 1280 px,
   в нём картинка на подложке шириной 78 % и белая карточка 400 px справа поверх
   картинки, а под карточкой — цветная рамка со сдвигом вниз-влево на 20 px.
   Пропорции те же, размеры переведены в проценты и clamp, чтобы жить на любом окне. */
.section-works{color:var(--navy);z-index:2;background:var(--teal)}
/* Тёмный кейс: чёрточки, счётчик и стрелки идут currentColor, значит на синем
   секции нужен светлый текст. Карточка при этом остаётся тёмной по своему
   правилу — у неё цвет задан явно. */
.section-works.on-dark{color:#fff}
.works{position:absolute;inset:0}
.work{position:absolute;inset:0;display:none;align-items:center}
.work.is-active{display:flex}
/* Притемнённая левая половина — приём оригинала, он же держит контраст картинки
   на светлых цветах кейсов. */
.work::before{content:'';position:absolute;left:0;top:0;width:50%;height:100%;
  background:rgba(0,0,0,.10)}
.work-inner{position:relative;margin:0 auto;
  width:min(1280px, 86vw, 132vh)}   /* 132vh — чтобы на низком окне картинка не упиралась в края */
.work-image{position:relative;z-index:1;overflow:hidden}
.image-container{width:78.125%;background:rgba(0,0,0,.10);overflow:hidden}
.image-container .image{display:block;width:100%;height:auto}
.work-content{position:absolute;right:0;top:clamp(20px,5%,50px);bottom:clamp(20px,5%,50px);
  width:clamp(258px,31%,400px);z-index:2}
.work-content .inner{position:relative;z-index:3;width:100%;height:100%;
  padding:clamp(20px,11%,50px);background:#fff;color:var(--navy)}
.work-content .border{position:absolute;top:clamp(12px,4%,20px);left:calc(-1 * clamp(12px,4%,20px));
  width:100%;height:100%;z-index:1}
.work-no{font-size:11px;letter-spacing:.2em;opacity:.42;margin-bottom:clamp(10px,4%,20px)}
.work-title{font-family:'Playfair Display',Georgia,serif;font-weight:500;
  font-size:clamp(24px,2.6vw,38px);line-height:1.06;letter-spacing:-.015em;margin:0 0 10px}
.work-category{font-size:clamp(13px,1.05vw,16px);opacity:.7}
.work-description{margin:clamp(10px,2.5%,18px) 0 0;color:#5a5148;
  font-size:clamp(13px,1.05vw,16px);line-height:1.6}
.work-credits{position:absolute;left:clamp(20px,11%,50px);bottom:clamp(18px,9%,44px);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.5}

/* Столбик чёрточек — их .nav-page .subnav: 10x3 px, активная растягивается до 20. */
.work-nav{position:absolute;right:clamp(22px,3.2vw,50px);bottom:clamp(26px,5vh,54px);
  z-index:6;text-align:right}
.work-count{font-size:11px;letter-spacing:.2em;opacity:.5}
.subnav{list-style:none;margin:0 0 0 auto;padding:0;width:26px}
/* Подписи чёрточек — для экранных читалок, глазами их быть не должно. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.subnav .item{display:block;position:relative;width:26px;height:13px;cursor:pointer}
.subnav .item::before{content:'';position:absolute;top:5px;right:3px;width:10px;height:3px;
  background:currentColor;opacity:.28;transition:width .3s ease,opacity .3s ease}
.subnav .item:hover::before,.subnav .item.is-active::before{width:20px;opacity:1}

/* Стрелки — геометрия их .nav-tablet (46x46, right/bottom 30), и появляются они
   там же, где у оригинала: на узких окнах, где столбик чёрточек мелковат. */
.work-arrows{position:absolute;right:30px;bottom:30px;z-index:6;display:none;gap:10px}
.work-arrows .button{width:46px;height:46px;border:1px solid currentColor;border-radius:50%;
  background:none;color:inherit;font-size:16px;line-height:1;cursor:pointer;opacity:.55;
  transition:opacity .2s}
.work-arrows .button:hover{opacity:1}
@media (max-width: 1279px){ .work-arrows{display:flex} }

/* ---------- страница Vision: восемь шагов процесса ---------- */
/* Устройство как у оригинала: после заставки идёт последовательность шагов, по
   одному на экран. Раскладка простая и одинаковая на всех восьми: текст слева,
   виньетка справа — шаг должен читаться за секунду, а не разглядываться. */
.section-vision{background:var(--coral);color:#fff;z-index:2}
.steps{position:absolute;inset:0}
.step{position:absolute;inset:0;display:none;align-items:center;
  padding:clamp(92px,12vh,132px) clamp(46px,7vw,120px) clamp(60px,9vh,100px)}
.step.is-active{display:flex}
.step-inner{display:flex;align-items:center;gap:clamp(32px,5vw,90px);
  width:min(1180px,100%);margin:0 auto}
.step-text{flex:0 1 40ch;max-width:40ch}
.step-no{font-size:11.5px;letter-spacing:.24em;opacity:.6;margin-bottom:16px}
.step-name{font-family:'Playfair Display',Georgia,serif;font-weight:500;
  font-size:clamp(38px,5.2vw,76px);line-height:1;letter-spacing:-.02em;margin:0}
.step-body{margin:clamp(16px,2.4vh,26px) 0 0;font-size:clamp(15px,1.15vw,17px);
  line-height:1.65;opacity:.8}
.step-art{flex:1 1 auto;min-width:0;display:flex;justify-content:center}
.step-art img{display:block;width:auto;max-width:100%;
  max-height:clamp(240px,46vh,460px)}

/* ---------- страница Contact ---------- */
/* Фон и колонки рисует холст (CairnStripe), поэтому у секции свой цвет только
   на случай, когда холста нет — на мобиле, как и у оригинала. */
.section-contact{background:var(--teal);color:var(--navy);z-index:2}
.stripe-canvas{position:absolute;inset:0;z-index:0}
.stripe-canvas canvas{display:block;width:100%;height:100%}
.contact-block{position:absolute;left:33.3333%;top:0;width:33.3333%;height:100%;
  z-index:2;display:flex;align-items:center;justify-content:center;text-align:center}
.contact-content{width:100%}
/* Подпись и ромбик под ней — приём оригинала (style.css:1789-1810), у него
   ромб 9x9 повёрнут на 45 градусов. Цвет коралловый, он же акцент серии. */
.contact-title{position:relative;color:var(--coral);font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:52px}
.contact-title::after{content:'';position:absolute;left:50%;bottom:-22px;
  width:9px;height:9px;margin-left:-5px;background:var(--coral);transform:rotate(45deg)}
.contact-head{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:400;
  font-size:clamp(24px,2.9vw,42px);line-height:1.1}
.contact-pitch{margin:28px auto 0;max-width:34ch;font-size:14.5px;line-height:1.6;
  opacity:.72}
/* Кнопка WhatsApp — та же овальная геометрия, что у кнопок блоков на мобиле
   (200x52, рамка 3, радиус 27), чтобы форма на сайте была одна. */
.contact-wa{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  margin-top:26px;padding:0 26px;height:52px;border:3px solid var(--navy);border-radius:27px;
  font-family:'Playfair Display',Georgia,serif;font-size:18px;
  transition:background .2s,color .2s}
.contact-wa:hover{background:var(--navy);color:var(--teal)}
/* Значок — пузырь реплики с тремя точками, свой: чужую марку в кнопку не ставим,
   надписи «WhatsApp» на самой ссылке достаточно. Красится currentColor, поэтому
   на наведении переворачивается вместе с кнопкой. */
.wa-mark{width:21px;height:21px;fill:currentColor;flex:0 0 auto;transform:translateY(-1px)}
.contact-num{margin-top:18px;font-size:13px;letter-spacing:.16em;opacity:.6}
.contact-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 clamp(28px,3vw,46px) 30px;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.55}
.contact-foot .back-link{margin:0;opacity:1}
/* Подпись студии — единственная настоящая ссылка на сайте, она и должна быть
   заметной: подвал приглушён до .55, а подпись выведена в полную яркость,
   акцентным цветом и с подчёркиванием. */
/* Цвет мерян, а не выбран на глаз: подвал приглушён до .55, и на шалфее это
   контраст 2.63. Светлый акцент дал бы 1.01 — подпись пропала бы вовсе. Полная
   умбра даёт 6.61, то есть заметно ярче всего вокруг; подчёркивание сделано
   акцентом, чтобы ссылка читалась ссылкой. */
.contact-credit{opacity:1;color:var(--navy)}
.contact-credit a{font-weight:600;letter-spacing:.14em;
  border-bottom:1.5px solid var(--coral);padding-bottom:3px;
  transition:color .2s,border-color .2s}
.contact-credit a:hover{color:var(--coral)}

/* ---------- шторка ---------- */
.curtain{position:fixed;inset:0;z-index:40;pointer-events:none;visibility:hidden}
.curtain.is-on{visibility:visible}
.curtain svg{width:100%;height:100%;display:block}

/* строки SplitText не должны обрезаться на подъёме */
.split-line{overflow:hidden;padding-bottom:.06em}

/* =========================================================================
   МОБИЛЬНАЯ ВЕРСИЯ

   Метод взят у оригинала и проверен по его коду, а не придуман:
     - `simplifiedVersion()` возвращает true при ширине меньше 992 и вешает на html
       класс `no-canvas`, после чего пружинный холст просто не запускается;
     - `.layout-home .wave-canvas{display:none}` — граница на мобиле не рисуется вовсе,
       поэтому каждый блок получает свой CSS-фон, которого на десктопе у него нет;
     - `.page-section{position:relative}` и `.layout-home{overflow:visible}` — секции
       перестают быть на весь экран, страница становится обычным вертикальным скроллом;
     - клик по `.link-section` на смартфоне делает `scrollTo(target)`, а не переход
       между секциями (script.js:752). Значит шторки и таймлайнов здесь нет вообще.

   Порог 992 — его же (`checkDeviceType`, script.js:81).
   ========================================================================== */
@media (max-width: 991px) {
  html, body { height: auto; overflow: visible; -webkit-text-size-adjust: 100%; }
  body { background: var(--sky); }
  /* Листание по экранам. У оригинала 2016 года снапа ещё не было — там блоки просто
     полноэкранные и листаются инерцией. Снап даёт ровно то же ощущение отдельных
     страниц, но без промежуточных положений. */
  html { scroll-snap-type: y proximity; scroll-behavior: smooth; }

  .page-container { position: static; }
  .page-section { position: relative; visibility: visible; }

  /* холста нет — цвет теперь на самих блоках */
  .wave-canvas, .curtain { display: none; }

  /* Каждый блок — отдельный экран. Это не выдумка: в разметке оригинала все три
     блока главной носят класс `fullscreen-sm`, а globalResize() (script.js:276)
     на смартфоне растягивает такие элементы на высоту окна. Отсюда и ощущение,
     что каждый цвет — своя страница.
     100svh, а не 100vh: 100vh на телефоне считается по развёрнутой панели браузера,
     и низ блока уезжает под адресную строку. */
  .blk {
    /* left/top обязательно сбросить: на десктопе блоки стоят на 66.67%, и при
       position:relative это смещение осталось бы живым — правые блоки уезжали
       за экран на 260 px и давали горизонтальную прокрутку. Замерено. */
    position: relative; left: auto; top: auto; width: auto;
    min-height: 100vh; min-height: 100svh;
    padding: 84px 20px 118px; text-align: center; align-items: center;
    justify-content: center;
    scroll-snap-align: start;
  }
  .b-works  { background: var(--sky);   color: var(--navy); }
  .b-vision { background: var(--coral); }
  .b-studio { background: var(--navy);  }
  .blk-text { max-width: 340px; }
  .b-works .line  { font-size: 30px; max-width: none; }
  .b-vision .line, .b-studio .line { font-size: 26px; max-width: none; }
  .kicker { margin-bottom: 12px; }

  /* Иллюстрация встаёт в поток над текстом, как у оригинала. У них она квадратная
     (280×280), у нас широкая 1449×891 — поэтому при одинаковой ширине наша кажется
     мельче почти вдвое по высоте. Даём ей больше ширины, иначе на весь экран
     блока она теряется. */
  /* Иллюстрация идёт во всю ширину экрана, а не внутри полей блока: боковые поля
     в 20 px съедали её ширину, и по краям оставалось пустое место. Отрицательные
     поля выводят её за padding блока, не ломая ширину документа. */
  .blk .art-fit {
    flex: none; padding: 0 0 26px; overflow: hidden;
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  }
  /* Композиция приближена: по краям кадра лежит только подложка-план, предметы
     занимают 0.098-0.841 по ширине (замерено по манифесту). Зум 1.22 выводит за
     экран лишь план — он подложка, обрез читается как продолжение чертежа.
     Сдвиг вправо на 3 % потому, что предметы стоят левее середины кадра. */
  /* Зум подобран под кадр главного блока (предметы там занимают 0.098-0.841 ширины),
     на другие композиции его переносить нельзя — вылезут за экран. */
  /* Иллюстрации блоков тянутся шире экрана: кадр обрезается по бокам, зато
     предмет читается. Замер свободного места над содержимым на 390x844 —
     b-works 129, b-vision 200, b-studio 147; коэффициенты подобраны так, чтобы
     и на 360x640 оставался зазор до текста. */
  .b-works .art { transform: translateX(3%) scale(1.22); }
  .b-vision .art { transform: scale(1.22); }
  .b-studio .art { transform: scale(1.10); }

  /* Заголовок секции превращается в овальную кнопку, прибитую к низу экрана —
     размеры оригинала один в один: 200×52, рамка 3 px, радиус 27 px
     (.layout-home .home-section .section-title, max-width:767).
     Цвет рамки у них белый на всех блоках; у нас на голубом блоке текст тёмный,
     поэтому рамка и подпись идут currentColor — геометрия та же, контраст честный. */
  /* Только у цветных блоков: на странице студии заголовок секции остаётся
     обычной подписью. Пустой овал внизу студии брался именно отсюда —
     data-short там нет, и в кнопку нечего было писать. */
  .blk .kicker {
    display: flex; align-items: center; justify-content: center;
    margin: 0 0 0 -100px; padding: 0 15px;
    position: absolute; bottom: 40px; left: 50%;
    width: 200px; height: 52px;
    border: 3px solid currentColor; border-radius: 27px;
    opacity: 1; font-size: 0;
  }
  /* В овал влезает только короткое слово — у оригинала там ровно так: Works,
     Process, About. Длинную подпись десктопа подменяем коротким ярлыком. */
  .blk .kicker::before {
    content: attr(data-short);
    font-family: 'Playfair Display', Georgia, serif;   /* тот же шрифт, что у заголовков */
    font-weight: 500; font-size: 19px; letter-spacing: .01em; text-transform: none;
  }
  .enter { display: none; }

  /* шапка: логотип и бургер, обычное меню прячется */
  /* z-index 70 — выше оверлея: .chrome создаёт свой контекст наложения,
     и без этого бургер оказывается под открытым меню и не закрывает его. */
  /* Шапок в разметке восемь — по одной на секцию, и на десктопе это верно: там
     видно ровно одну секцию. На мобиле секции лежат лентой, а шапка закреплена,
     поэтому все восемь висели друг на друге и видна была последняя. Её цвет и
     оставался на всех экранах: тёмный логотип на терракоте читался плохо, а на
     коричневом пропадал совсем. Теперь на мобиле остаётся одна шапка, а её цвет
     переставляет main.js по секции, которая сейчас под ней. */
  .chrome { position: fixed; padding: 18px 20px; background: transparent; z-index: 70; }
  .page-section:not(.section-home) .chrome { display: none; }
  .nav { display: none; }
  .burger {
    display: block; position: relative; width: 34px; height: 26px; padding: 0;
    border: 0; background: none; cursor: pointer; z-index: 60;
  }
  .burger i {
    position: absolute; left: 4px; right: 4px; height: 2px; background: var(--navy);
    transition: transform .32s ease, background .25s ease;
  }
  .chrome-dark .burger i { background: #fff; }
  .burger i:nth-child(1) { top: 8px; }
  .burger i:nth-child(2) { top: 16px; }
  .burger.is-open i, .chrome-dark .burger.is-open i { background: var(--navy); }
  .burger.is-open i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .burger.is-open i:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

  /* оверлей: две полосы 70/30, как у оригинала на max-width:767.
     Селектор с :not([hidden]) обязателен: голое display:flex перебивает браузерное
     правило [hidden]{display:none}, и меню висит открытым с самой загрузки. */
  .nav-overlay:not([hidden]) {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 50;
  }
  .nav-overlay[hidden] { display: none; }
  .nav-pane-1 { height: 70%; background: var(--coral-lt); }
  /* Цвет полосы был #f99797 — розовый прелоадера оригинала. Перекраска серии
     его не тронула: он не входил в семь переменных и лежал числом прямо здесь.
     Такие места ищутся grep-ом по чужим цветам, а не глазами по странице. */
  .nav-pane-2 { height: 30%; background: var(--coral); color: #fff; }
  .nav-pane { display: flex; align-items: center; justify-content: center; }
  .nav-menu { margin: 0; padding: 0; list-style: none; text-align: center; }
  .nav-menu li + li { margin-top: 15px; }
  .nav-menu span { font-size: 28px; color: var(--navy); cursor: pointer;
                   font-family: 'Playfair Display', Georgia, serif; }
  .nav-menu span.is-off { opacity: .38; cursor: default; }
  /* Язык в мобильном меню — отдельной строкой ниже пунктов, шрифтом помельче. */
  .nav-lang-m { display: inline-block; margin-top: 26px; font-size: 15px;
                letter-spacing: .18em; text-transform: uppercase; color: var(--navy);
                border-bottom: 1px solid currentColor; padding-bottom: 3px; }
  .nav-mail { font-size: 17px; letter-spacing: .04em; color: #fff; }

  /* Vision и Contact — такие же полноэкранные листы. */
  .section-vision { min-height: 100vh; min-height: 100svh; scroll-snap-align: start; }
  /* Поля здесь меньше общих 84: на телефоне лист Vision самый плотный —
     заголовок, врезка, картинка и четыре принципа. С общими полями секция
     выходила 884 px при экране 844 (замерено). */
  .vision-inner { position: static; flex-direction: column; flex-wrap: nowrap;
                  align-items: stretch; padding: 66px 20px 52px;
                  min-height: 100vh; min-height: 100svh; }
  .vision-head { flex: none; max-width: none; }
  .vision-head .line { font-size: 30px; }
  .vision-lead { font-size: 15px; }

  .tenets { margin-top: 18px; gap: 12px 16px; }
  .t-art { max-width: 84px; margin-bottom: 6px; }
  .t-name { font-size: 17px; margin: 4px 0 4px; }
  .t-text { font-size: 12.5px; }

  .section-contact { min-height: 100vh; min-height: 100svh; scroll-snap-align: start;
                     display: flex; align-items: center; }
  .stripe-canvas { display: none; }   /* холста на мобиле нет, как у оригинала */
  .contact-block { position: static; left: auto; top: auto; width: 100%; height: auto;
                   padding: 84px 20px; }
  .contact-head { font-size: 27px; }
  .contact-pitch { font-size: 14px; }
  .contact-wa { height: 46px; font-size: 16px; }
  .contact-num { margin-top: 14px; font-size: 12px; }
  .contact-foot { flex-direction: column; gap: 12px; padding-bottom: 26px; }

  /* Заставки страниц — такие же полноэкранные листы. */
  .section-vision-intro, .section-works-intro, .section-studio-intro {
    min-height: 100vh; min-height: 100svh; scroll-snap-align: start; }
  .intro-inner { position: static; min-height: 100vh; min-height: 100svh;
                 padding: 84px 20px 96px; }
  .intro-letter { font-size: 74vw; }
  .intro-title { font-size: 46px; }
  .intro-highlight { font-size: 26px; }
  .nav-page { display: none; }

  /* Шаг процесса на телефоне: картинка сверху, текст под ней. */
  .section-vision { min-height: 100vh; min-height: 100svh; scroll-snap-align: start;
                    display: flex; align-items: center; }
  .steps { position: static; flex: 1 1 100%; min-width: 0; }
  .step { position: static; display: none; padding: 76px 20px 84px; }
  .step.is-active { display: block; }
  .step-inner { flex-direction: column; align-items: stretch; gap: 20px; width: 100%; }
  .step-art { order: 1; }
  /* Было 210 px наглухо, и над картинкой оставалось пусто: замерено — свободного
     места над содержимым шага 121 px на 360x640, 186 на 441x748 и 321 на
     768x1024. Теперь картинка тянется по высоте экрана, но не шире 78 % ширины,
     иначе на узком телефоне она вылезала бы за поля. */
  .step-art img { max-height: min(42vh, 340px); max-width: min(78vw, 340px); }
  .step-text { order: 2; flex: none; max-width: none; }
  .step-name { font-size: 38px; }
  .step-body { font-size: 15px; }

  /* Кейс на телефоне: картинка сверху во всю ширину, карточка под ней —
     так же складывается оригинал на узком экране. */
  .section-works { min-height: 100vh; min-height: 100svh; scroll-snap-align: start;
                   display: flex; align-items: center; }
  /* .works — флекс-элемент секции; без явного flex он сжимается по содержимому
     (замерено 288 px вместо 390) и картинка выходит вдвое мельче нужного. */
  .works { position: static; flex: 1 1 100%; min-width: 0; }
  .work { position: static; display: none; padding: 76px 20px 74px; }
  .work.is-active { display: block; }
  .work::before { display: none; }
  .work-inner { width: 100%; margin: 0; }
  .image-container { width: 100%; }
  /* relative, а не static: цветная рамка под карточкой позиционируется от неё.
     Со static она отсчитывалась от .work-inner и накрывала собой картинку —
     на телефоне здания просто не было видно. */
  .work-content { position: relative; width: calc(100% - 26px); margin: -34px 0 0 26px; }
  .work-content .inner { padding: 22px; }
  .work-content .border { top: 12px; left: -12px; }
  .work-title { font-size: 24px; }
  .work-category, .work-description { font-size: 13.5px; }
  .work-credits { position: static; margin-top: 16px; }
  .work-nav { display: none; }
  /* Стрелки остаются абсолютными и на мобиле: сделанные обычным элементом,
     они становились вторым флекс-элементом секции и отбирали у картинки треть
     ширины (замерено 288 px вместо 390). */
  .work-arrows { left: 50%; right: auto; bottom: 22px; transform: translateX(-50%);
                 display: flex; }

  /* студия — такой же полноэкранный лист */
  .section-studio { min-height: 100vh; min-height: 100svh; scroll-snap-align: start; }
  .studio-inner { position: static; padding: 84px 20px 84px;
                  flex-direction: column; flex-wrap: nowrap; align-items: stretch;
                  min-height: 100vh; min-height: 100svh; }
  .studio-head { margin-bottom: 34px; max-width: none; flex: none; }
  .studio-head .line { font-size: 30px; }
  .studio-lead { font-size: 15.5px; }
  /* Двое встают в ряд, а не в столбец: в столбец экран телефона они не помещают
     секцию в один лист (замерено 1060 px при экране 844), а у оригинала каждая
     секция — ровно один лист. */
  .members { flex: none; flex-direction: row; gap: 16px; }
  .member { max-width: none; flex: 1 1 0; min-width: 0; }
  .member-art { height: clamp(200px, 27vh, 280px); }
  .member-role { font-size: 12.5px; }
  .back-link { margin-top: 40px; }
}

/* Планшет: места по горизонтали вдвое больше телефонного, буквам можно вырасти.
   На телефоне тот же рост запрещён — секция перестала бы помещаться в один экран
   (замерено: при 219 px высота секции 863 при экране 844). */
@media (min-width: 600px) and (max-width: 991px) {
  .member-art { height: clamp(240px, 29vh, 330px); }

}

/* Мелкий телефон: у оригинала на этот случай отдельный запрос (max-width:359). */
@media (max-width: 359px) {
  .b-works .line, .studio-head .line { font-size: 26px; }
  .art { width: 88vw; }
}

/* Низкие десктопные окна (ноутбуки 1280×720, 1366×768).
   Правые блоки там всего ~360 px высотой, и при обычных полях иллюстрация ужимается
   до 137 px — замерено. Отдаём ей место за счёт полей и кегля. */
@media (min-width: 992px) and (max-height: 820px) {
  .blk { padding: 32px 34px; }
  .b-works .line { font-size: clamp(26px, 3vw, 44px); }
  .b-vision .line, .b-studio .line { font-size: clamp(16px, 1.45vw, 22px); }
  /* Верх картинки Vision держится на 62 px от края страницы: выше начинается
     меню, а предметы в этом кадре стоят вплотную к верхней границе (0.000).
     Проверено замером: при 46 px картинка залезала под пункты меню на 12 px. */
  .b-vision .art-fit { padding: 30px 0 2px; }
  .b-studio .art-fit { padding: 2px 0 4px; }
  .b-vision { padding: 32px 34px 10px; }
  .b-studio { padding: 18px 34px 28px; }
  .kicker { margin-bottom: 10px; }
  /* Страница студии на низком окне: заголовок и буквы мельче, иначе содержимое
     не помещается между шапкой и низом и лезет на логотип. */
  .studio-head .line { font-size: clamp(26px, 3vw, 40px); }
  .studio-head { margin-bottom: clamp(24px, 3vh, 38px); }
  .studio-lead { margin-top: 16px; font-size: 15px; }
  .member-art { height: clamp(220px, 48vh, 360px); }
}