/* ЛОНГХАУС — «Тихая роскошь». Единая таблица стилей. */

/* ---------- 1. Токены ---------- */
:root{
  --paper:#F2EFE8;
  --paper-2:#E7E2D8;
  --paper-3:#DCD5C8;
  --ink:#16170F;
  --ink-2:#3B3D33;
  --ink-3:#5A5C50;          /* затемнён до AA на светлых фонах (было #6E7064 = 4.39) */
  --moss:#232B20;
  --moss-2:#38452F;
  --brass:#96794C;          /* декоративный: линии, крупный дисплей */
  --brass-txt:#7A6039;      /* тот же тон, но проходит AA для мелкого текста */
  --brass-lt:#B79A6C;       /* для тёмных фонов */
  --danger:#A03F26;
  --line:rgba(22,23,15,.16);
  --line-soft:rgba(22,23,15,.09);
  --line-inv:rgba(242,239,232,.22);

  --header-h:72px;

  /* ЕДИНАЯ СЕТКА КОНТЕНТА (LAYOUT-STANDARDS §1.А):
     один max-width на весь сайт + плавный боковой отступ, без ступенчатых контейнеров.
     --sbw (ширина скроллбара) проставляется из JS, чтобы fixed-слои совпадали
     с .wrap до пикселя, а не «плавали» на ширину полосы прокрутки. */
  --sbw:0px;
  --vw:calc(100vw - var(--sbw));
  --grid-max:1280px;
  --grid-fluid:calc(var(--vw) * .92);
  --grid-measure:68ch;
  --maxw:var(--grid-max);
  /* Левый край сетки — им же выравниваются все fixed/absolute-слои */
  --gut-x:max(calc(var(--vw) * .04), calc((var(--vw) - var(--grid-max)) / 2));
  --gut:var(--gut-x);

  /* Ширины колонок, от которых считается «влезаемость» дисплейных заголовков.
     Всё содержимое живёт в одной сетке, поэтому ширину каждой колонки можно
     выразить арифметикой от --wrapw — без container queries и без JS. */
  --wrapw:min(var(--grid-max),var(--grid-fluid));
  --hs-gap:clamp(24px,4vw,72px);
  --hscol:calc((var(--wrapw) - var(--hs-gap)) * .6);   /* .head-split, 1.2fr из 2fr */
  --st2-gap:clamp(30px,5vw,96px);
  --st2col:calc((var(--wrapw) - var(--st2-gap)) * .45); /* .sticky2, .9fr из 2fr */

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter','Helvetica Neue',Arial,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.7s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip; /* clip не создаёт скролл-контейнер на body (иначе колесо конфликтует с Lenis) */
}
img,video,svg{max-width:100%;display:block}
img{height:auto}
/* Браузерный дефолт figure — margin:1em 40px. Из-за него полноэкранный кадр
   не доезжал до краёв, а фото в колонках были вдавлены на 40px. */
figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}

/* ---------- 2. Типографика ---------- */
/* .d1–.d4 — дисплейная шкала. Без них в списке класс на <p> отдавал гротеск,
   а тот же класс на <h3> — антикву: один и тот же «уровень» выглядел двумя шрифтами. */
h1,h2,h3,h4,.disp,.d1,.d2,.d3,.d4{
  font-family:var(--serif);
  font-weight:300;
  letter-spacing:-.012em;
  line-height:1.02;
  margin:0;
}
/* text-wrap:balance оставлен только коротким заголовкам без авторских переносов.
   На .d1/.d2 он был вреден: у заголовка с <br> Safari перебалансировал строки
   и разносил его по одному слову на строку (приёмка Карины 06.08.2026).
   Ширину этих заголовков и без него держит подгон кегля под колонку (--k). */
h3,h4,.d3,.d4{text-wrap:balance}
/* «Влезает в свою колонку» (fit-to-column).
   --k = ширина самой длинной АВТОРСКОЙ строки заголовка при кегле 1px
   (замер: _verify-fb/measure.cjs). --fitw = ширина колонки, в которой
   заголовок живёт. Кегль = min(шкала, колонка / k) — значит авторские
   переносы держатся на ЛЮБОЙ ширине, а слова не рвутся никогда.
   Без --k (по умолчанию 1) правило не влияет ни на что. */
.d1{--fs:clamp(46px,8.4vw,146px)}
.d2{--fs:clamp(34px,5.2vw,72px);line-height:1.04}
/* .98 — запас на округление кегля и на разницу между замером и реальным
   рендером (кернинг, balance). Без него строка «впритык» иногда срывается. */
.d1,.d2{--fitw:var(--wrapw);font-size:min(var(--fs),calc(var(--fitw) * .98 / var(--k,1)))}
.head-split>:first-child .d2{--fitw:var(--hscol)}
.sticky2__l .d2{--fitw:var(--st2col)}
.ovl .d2{--fitw:min(640px,68vw)}
.ovl--right .d2{--fitw:min(560px,64vw)}
.hero__ttl{--fitw:var(--wrapw)}
.d3{font-size:clamp(28px,3.4vw,54px);line-height:1.08}
.d4{font-size:clamp(22px,2.1vw,32px);line-height:1.16}
.d1 em,.d2 em,.d3 em{font-style:italic;color:var(--brass)}
/* На тёмном фоне тёмная латунь проваливается — берём светлую */
.slab--dark em,.slab--ink em,.ovl em,.planscene em,.hero em,.ftr em{color:var(--brass-lt)}

.lede{
  font-size:clamp(17px,1.42vw,23px);
  line-height:1.58;
  font-weight:300;
  color:var(--ink-2);
  max-width:58ch;              /* LAYOUT-STANDARDS §5: лид 52–62ch */
  text-wrap:pretty;
}
.small{font-size:13.5px;line-height:1.55;color:var(--ink-3)}

.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brass-txt);
  display:flex;
  align-items:baseline;
  gap:14px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:180px}
.eyebrow .num{font-variant-numeric:tabular-nums;color:var(--ink-3)}
/* На тёмных фонах — светлая латунь, иначе контраст 3.6 */
.slab--dark .eyebrow,.slab--ink .slab--dark .eyebrow,.slab--ink .eyebrow,
.ovl .eyebrow,.floatstats .eyebrow,.planscene .eyebrow,.hero .eyebrow{color:var(--brass-lt)}
.slab--dark .eyebrow .num,.slab--ink .eyebrow .num,.ovl .eyebrow .num,
.floatstats .eyebrow .num,.planscene .eyebrow .num,.hero .eyebrow .num{color:rgba(242,239,232,.72)}

.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- 3. Раскладка ---------- */
.wrap{
  width:min(var(--grid-max),var(--grid-fluid));
  max-width:min(var(--grid-max),var(--grid-fluid));
  margin-inline:auto;padding-inline:0;box-sizing:border-box;
}
.sect{padding-block:clamp(72px,9vw,164px);position:relative}
.sect--tight{padding-block:clamp(52px,6vw,100px)}
.slab{position:relative;z-index:4;background:var(--paper)}
.slab--alt{background:var(--paper-2)}
.slab--dark{background:var(--moss);color:var(--paper)}
.slab--dark .lede,.slab--dark .small{color:rgba(242,239,232,.72)}
.slab--dark .eyebrow::after{background:var(--line-inv)}
.slab--dark .rule{background:var(--line-inv)}
.slab--ink{background:var(--ink);color:var(--paper)}

.grid{display:grid;gap:clamp(24px,3vw,56px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-12{grid-template-columns:repeat(12,minmax(0,1fr))}
/* 1.2fr/.8fr вместо 1.05/.95: колонке заголовка нужно ~23ch при кегле 72px,
   иначе русская антиква рвётся на 3–4 строки (LAYOUT-STANDARDS §5: H1/H2 20–30ch). */
.head-split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--hs-gap);align-items:end;margin-bottom:clamp(36px,4.6vw,80px)}

[id]{scroll-margin-top:calc(var(--header-h) + 28px)}
h1,h2,h3{scroll-margin-top:calc(var(--header-h) + 28px)}

/* ---------- 4. Шапка ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:900;
  height:var(--header-h);
  display:flex;align-items:center;
  color:var(--paper);
  transition:background .5s var(--ease),color .4s var(--ease),box-shadow .5s var(--ease),height .4s var(--ease);
}
.hdr__in{
  width:min(var(--grid-max),var(--grid-fluid));margin-inline:auto;padding-inline:0;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.hdr.is-stuck{
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 1px 0 var(--line-soft);
}
.logo{display:flex;align-items:center;gap:11px;color:currentColor}
.logo svg{width:34px;height:auto;display:block;color:currentColor}
.logo__txt{font-family:var(--serif);font-size:23px;letter-spacing:.16em;text-transform:uppercase;line-height:1;padding-top:3px}
.nav{display:flex;align-items:center;gap:clamp(16px,2vw,34px)}
.nav a{
  position:relative;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:400;padding-block:6px;color:currentColor;opacity:.82;
  transition:opacity .35s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
.nav a:hover{opacity:1}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav a.is-active{opacity:1}
.nav a.is-active::after{transform:scaleX(1)}
.hdr__cta{display:flex;align-items:center;gap:18px}
.hdr__tel{font-size:14px;letter-spacing:.03em;white-space:nowrap;color:currentColor}
.burger{display:none;width:42px;height:42px;background:none;border:0;padding:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:9px;right:9px;height:1px;background:currentColor;transition:transform .45s var(--ease),opacity .3s}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){bottom:17px}
body.menu-open .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.mnav{
  position:fixed;inset:0;z-index:880;background:var(--moss);color:var(--paper);
  padding:calc(var(--header-h) + 32px) var(--gut) 40px;
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);
  visibility:hidden;
}
body.menu-open .mnav{clip-path:inset(0 0 0 0);visibility:visible}
.mnav a{font-family:var(--serif);font-size:clamp(34px,8vw,58px);line-height:1.22;display:block;opacity:.9}
.mnav a.is-active{color:var(--brass-lt)}

/* ---------- 5. Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 28px;border:1px solid currentColor;border-radius:2px;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  background:none;cursor:pointer;position:relative;overflow:hidden;
  transition:color .55s var(--ease),border-color .55s var(--ease);
  color:var(--ink);
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease);z-index:0;
}
.btn>*{position:relative;z-index:1}
.btn:hover::before{transform:scaleY(1)}
.btn:hover{color:var(--paper)}
.btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--solid::before{background:var(--brass);transform:scaleY(0)}
.btn--solid:hover{color:var(--paper);border-color:var(--brass)}
.btn--light{color:var(--paper);border-color:rgba(242,239,232,.5)}
.btn--light::before{background:var(--paper)}
.btn--light:hover{color:var(--ink);border-color:var(--paper)}
.btn__ar{width:14px;height:14px;flex:none;transition:transform .5s var(--ease)}
.btn:hover .btn__ar{transform:translate(3px,-3px)}
.btn--sm{padding:11px 18px;font-size:11px}

.tlink{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;position:relative;padding-bottom:5px}
.tlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform-origin:right;transform:scaleX(1);transition:transform .5s var(--ease)}
.tlink:hover::after{transform:scaleX(0);transform-origin:left}

/* ---------- 6. Фиксированный медиа-слой ---------- */
.stage{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--moss)}
.stage__layer{position:absolute;inset:0;opacity:0;will-change:opacity,transform}
.stage__layer.is-on{opacity:1}
.stage__layer img,.stage__layer video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform,filter;
}
.stage__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,8,.55) 0%,rgba(10,12,8,.22) 38%,rgba(10,12,8,.62) 100%)}
.spacer{position:relative;z-index:0}
/* .spacer--s используется ровно в одном месте — акт «terrace» с блоком цифр
   (#numbers). 120dvh с каждой стороны давали 2160px пустой прокрутки при 654px
   содержимого: 77 % пути — экран, на котором не происходит ничего, кроме
   медленного зума фона. Владелец 12.08.2026: «очень длинная прокрутка». 56dvh
   сохраняют паузу «чистый кадр перед цифрами» (бумажная плита успевает уйти
   до того, как цифры встают в позицию чтения), но втрое короче. */
.spacer--s{height:56dvh}
.spacer--m{height:220dvh}
/* .spacer--l — единственное место — акт «beam» (04 Материал). 380dvh давали
   3,8 экрана прокрутки при нулевом содержимом: оверлей-текст держится в
   фазе «hold» примерно 1,7 экрана, и это ровно та же жалоба, что и по блоку
   цифр («страница замерла»). 240dvh оставляют кинематографичную паузу
   (fade-in → чтение → fade-out ≈ 2,4 экрана), но снимают лишние 1,4 экрана.
   Порог actScrub в home.js (>2 экранов → скраб 1.2) при 240dvh сохраняется,
   поэтому плотность «догона» кадра не меняется. */
.spacer--l{height:240dvh}
.spacer--xl{height:500dvh}
.anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}

/* Фиксированные текстовые оверлеи поверх сцены */
.ovl{
  position:fixed;z-index:3;left:var(--gut-x);top:26dvh;
  max-width:min(640px,68vw);color:var(--paper);
  opacity:0;pointer-events:none;will-change:opacity,transform;
}
.ovl--right{left:auto;right:var(--gut-x);text-align:right;max-width:min(560px,64vw)}
.ovl--right .lede{margin-left:auto}
.ovl .lede{color:rgba(242,239,232,.8)}
.ovl .eyebrow{color:var(--brass-lt)}
.ovl .eyebrow::after{background:var(--line-inv)}
.ovl-live{pointer-events:auto}

/* Цифры поверх живой сцены */
/* padding-block был 12dvh — на 1920×1080 это 260px воздуха внутри блока,
   который растёт вместе с высотой экрана и удлиняет прокрутку впустую.
   Фиксируем в пикселях: воздух остаётся, но не масштабируется до абсурда. */
.floatstats{position:relative;z-index:2;color:var(--paper);padding-block:clamp(56px,7dvh,96px)}
.floatstats .stat__n{color:var(--paper)}
.floatstats .stat{border-color:var(--line-inv)}
.floatstats .stat__lbl{color:rgba(242,239,232,.66)}

/* ---------- 7. Hero ---------- */
.hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;color:var(--paper);z-index:2}
.hero__media{position:absolute;inset:0;overflow:hidden;z-index:-1}
.hero__media img,.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,8,.5) 0%,rgba(10,12,8,.15) 42%,rgba(10,12,8,.72) 100%)}
.hero__in{
  width:min(var(--grid-max),var(--grid-fluid));margin-inline:auto;
  padding:0 0 clamp(44px,7vh,88px);
}
.hero__ttl{color:var(--paper)}
.hero__ttl .ln{display:block;overflow:hidden}
.hero__ttl .ln>span{display:block}
.hero__sub{color:rgba(242,239,232,.82);margin-top:clamp(18px,2.2vw,30px)}
.hero__acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3vw,42px)}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,54px);
  margin-top:clamp(34px,4vw,60px);padding-top:22px;border-top:1px solid var(--line-inv);
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,239,232,.7);
}
.scrollhint{position:absolute;right:var(--gut-x);bottom:clamp(44px,7vh,88px);display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,239,232,.62)}
.scrollhint svg{width:12px;height:22px}
.hero--page{min-height:64dvh}
.hero--page .hero__in{padding-bottom:clamp(36px,5vh,64px)}

/* ---------- 8. Полоса гарантий ---------- */
.pledges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.pledge{padding:clamp(26px,2.6vw,44px) clamp(18px,2vw,36px);border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.pledge:first-child{border-left:1px solid var(--line)}
.pledge svg{width:26px;height:26px;color:var(--brass);margin-bottom:18px}
.pledge h3{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.04em;margin-bottom:8px;line-height:1.35}
.pledge p{margin:0;font-size:13.5px;color:var(--ink-3);line-height:1.55}

/* ---------- 9. Проекты ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(26px,3vw,46px)}
.tab{
  padding:9px 18px;border:1px solid var(--line);border-radius:999px;background:none;cursor:pointer;
  font-size:12.5px;letter-spacing:.06em;color:var(--ink-2);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.tab:hover{border-color:var(--ink)}
.tab.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tab .cnt{font-size:11px;color:var(--ink-3);margin-left:6px;font-variant-numeric:tabular-nums}
.tab.is-on .cnt{color:rgba(242,239,232,.75)}
.tab:focus-visible,.opt:focus-visible,.slot:focus-visible,.dot:focus-visible,
.doc:focus-visible,.likebtn:focus-visible,.acc__h:focus-visible,.btn:focus-visible,
.tlink:focus-visible,.msg:focus-visible,.burger:focus-visible,.vcard__play:focus-visible,
.lbox__x:focus-visible,.pcard:focus-visible,.nav a:focus-visible,.mnav a:focus-visible,
.ftr a:focus-visible,.office a:focus-visible{
  outline:2px solid var(--brass);outline-offset:3px;
}
.slab--dark :focus-visible,.slab--ink :focus-visible,.ftr :focus-visible,
.hero :focus-visible,.planscene :focus-visible{outline-color:var(--brass-lt)}

.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(24px,2.6vw,48px)}
/* will-change НЕ на базовом .pcard: на projects.html их 12 и они не едут
   ни кадра — слои висели впустую. Ставим точечно: на hover/tap (едет
   вложенная картинка) и на время scale-твина верхнего ряда (home.js §9). */
.pcard{position:relative;display:block}
.pcard:hover .pcard__ph img,.pcard.is-tap .pcard__ph img{will-change:transform}
.pcard__ph{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--paper-3)}
.pcard__ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .9s var(--ease)}
.pcard:hover .pcard__ph img{transform:scale(1.05)}
.pcard__pill{
  position:absolute;left:16px;bottom:16px;z-index:2;
  background:rgba(242,239,232,.94);color:var(--ink);padding:8px 15px;border-radius:999px;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  opacity:0;transform:translateY(9px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.pcard:hover .pcard__pill{opacity:1;transform:none}
.pcard__top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:18px}
.pcard__name{font-family:var(--serif);font-size:clamp(24px,2.1vw,32px);line-height:1.1}
.pcard__price{font-size:14px;letter-spacing:.02em;white-space:nowrap;color:var(--ink-2)}
.pcard__specs{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:13px;color:var(--ink-3)}
.pcard__specs b{font-weight:500;color:var(--ink-2)}
.pcard.is-hidden{display:none}

/* ---------- 10. Проект месяца: просто фотография ----------
   Было: кадр 38vw «раскрывался» до полного экрана на закреплённой сцене
   (pin + scrub). Приёмка Карины 06.08.2026: анимация убрана — фотография
   стоит в потоке во всю ширину сетки, подпись идёт под ней обычным блоком. */
.zoomsec{position:relative;background:var(--paper);z-index:4}
.zoomsec__pin{display:block;padding-bottom:clamp(48px,7vw,110px)}
.zoomfig{
  position:relative;margin:clamp(26px,3.4vw,52px) auto 0;
  width:min(var(--grid-max),var(--grid-fluid));aspect-ratio:16/10;
  overflow:hidden;background:var(--paper-3);
}
.zoomfig img{width:100%;height:100%;object-fit:cover}
.zoomcap{
  position:relative;width:min(var(--grid-max),var(--grid-fluid));
  margin:clamp(22px,2.6vw,40px) auto 0;color:var(--ink);
}
.zoomcap .lede{color:var(--ink-2)}

/* ---------- 11. Материал (sticky-двухколоночник) ---------- */
.sticky2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--st2-gap);align-items:start}
.sticky2__l{position:sticky;top:calc(var(--header-h) + 40px)}
.matlist{border-top:1px solid var(--line)}
.matlist li{padding:clamp(20px,2.2vw,34px) 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;align-items:start}
.matlist .k{font-family:var(--serif);font-size:26px;color:var(--brass);line-height:1}
.matlist h3{font-family:var(--sans);font-size:15px;font-weight:500;margin-bottom:7px;letter-spacing:.02em}
.matlist p{margin:0;color:var(--ink-3);font-size:14.5px}

/* ---------- 12. Цифры / счётчики ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.stat{padding:clamp(22px,2.4vw,38px) clamp(16px,2vw,34px);border-left:1px solid var(--line);position:relative}
.stat:first-child{border-left:0;padding-left:0}
.stat__n{font-family:var(--serif);font-size:clamp(44px,5.4vw,86px);line-height:1;letter-spacing:-.02em;display:flex;align-items:baseline;gap:6px}
.stat__n .u{font-size:.32em;letter-spacing:.06em;font-family:var(--sans);font-weight:400;color:var(--brass-txt)}
.slab--dark .stat__n .u,.slab--ink .stat__n .u,.floatstats .stat__n .u{color:var(--brass-lt)}
.stat__lbl{margin-top:14px;font-size:13.5px;color:var(--ink-3);max-width:20em}
.stat__bar{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--brass);transform:scaleY(0);transform-origin:top}

/* ---------- 13. Горизонтальная прокрутка (лукбук) ---------- */
/* Правка: секцию больше НЕ пиним целиком (заголовок + лента + кнопка не влезали
   в экран, и карточки резались нижней границей вьюпорта). Пиним отдельную
   сцену .hstage высотой ровно в экран, лента живёт внутри .hstrip. */
.hsec{position:relative;background:var(--paper-2);z-index:4}
.hstage{position:relative}
.hstrip{
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  /* без этого снап прижимает первую карточку к краю и съедает боковой отступ сетки */
  scroll-padding-inline:var(--gut-x);
}
.hstrip::-webkit-scrollbar{display:none}
.hstage__cta{padding-top:clamp(30px,4vw,56px)}
/* Режим закреплённой горизонтальной прокрутки (ставится из JS).
   Кнопка едет вместе с лентой — на закреплённом экране не остаётся пустоты,
   и «лёгкий вход» виден всё время, пока идёт горизонтальная прокрутка. */
.hstage.is-pinned{
  height:100dvh;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(20px,4vh,52px);overflow:hidden;
  padding-top:var(--header-h);   /* лента не подныривает под липкую шапку */
}
.hstage.is-pinned .hstage__cta{padding-top:0}
.hstage.is-pinned .hstrip{overflow:hidden;width:100%;scroll-snap-type:none}
.hstage.is-pinned .hcard{flex:0 0 auto;width:clamp(230px,min(26vw,42vh),420px)}
.htrack{
  display:flex;gap:clamp(18px,2vw,36px);will-change:transform;
  padding-inline:var(--gut-x);
}
/* Ширина карточки ограничена и высотой экрана — в ландшафте телефона
   карточка целиком помещается во вьюпорт, а не режется его краем. */
.hcard{flex:0 0 clamp(210px,min(72vw,46vh),340px);position:relative;scroll-snap-align:start}
.hcard__ph{aspect-ratio:3/4;overflow:hidden;background:var(--paper-3)}
.hcard__ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.hcard:hover .hcard__ph img{transform:scale(1.04)}
.hcard__ttl{font-family:var(--serif);font-size:clamp(21px,1.7vw,27px);margin-top:16px}
.hcard__cnt{font-size:13px;color:var(--ink-3);margin-top:5px}
.likebtn{
  position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border-radius:50%;
  background:rgba(242,239,232,.9);border:0;display:grid;place-items:center;cursor:pointer;
  transition:transform .45s var(--ease),background .4s var(--ease);
}
.likebtn svg{width:17px;height:17px;color:var(--ink-2);transition:color .3s}
.likebtn:hover{transform:scale(1.08)}
.likebtn.is-on{background:var(--brass)}
.likebtn.is-on svg{color:var(--paper);fill:currentColor}

/* ---------- 14. План сверху ----------
   Было: закреплённая сцена, где фотография с видом сверху переворачивалась
   по оси X и «превращалась» в план, а карточки цены разлетались по экрану.
   Приёмка Карины 06.08.2026: фотография перед планом убрана совсем, переворот
   и закрепление сняты. Сразу после заголовка идёт сам план, под ним — карточки.
   Единственный оставленный эффект — отрисовка линий плана (см. home.js §5). */
.planscene{position:relative;background:var(--ink);color:var(--paper);z-index:4}
.planscene__pin{
  position:relative;display:flex;flex-direction:column;
  gap:clamp(16px,2.2vw,30px);
  width:min(var(--grid-max),var(--grid-fluid));margin-inline:auto;
  padding-block:clamp(26px,3.2vw,48px) clamp(40px,5vw,80px);
}
.planstage{position:relative;width:100%;margin:0}
.pf{position:relative;inset:auto;overflow:hidden}
.pf--plan{background:#0E0F0A;display:grid;place-items:center;padding:clamp(10px,2vw,34px)}
.pf--plan svg{width:100%;height:auto}
.plancards{
  position:relative;inset:auto;z-index:5;pointer-events:auto;
  display:flex;gap:clamp(10px,1.4vw,22px);align-items:stretch;
}
.plancard{
  position:relative;inset:auto;flex:1 1 0;min-width:0;
  padding:clamp(18px,1.8vw,28px);
  border:1px solid var(--line-inv);background:rgba(22,23,15,.62);
  opacity:0;will-change:opacity,transform;
}
/* Средняя плашка («Площадь») была намеренно инвертирована — бумажный фон,
   тёмный текст, прозрачная рамка. Владелец 12.08.2026: «почему площадь белым
   выделена, так не должно быть». Инверсию сняли: все три плашки наследуют
   оформление .plancard, ряд читается как один блок, а не как один выделенный
   пункт из трёх. Модификаторы --1/--2/--3 в разметке оставлены (за них
   цепляться нечему, кроме этого правила, — см. §29.2). */
.plancard__lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.82}
.plancard__v{font-family:var(--serif);font-size:clamp(30px,3.4vw,54px);line-height:1.05;margin-top:10px;display:flex;align-items:baseline;gap:7px}
.plancard__v .u{font-size:.32em;font-family:var(--sans);letter-spacing:.06em;opacity:.7}

/* ---------- 15. Путь клиента (sticky-таймлайн) ---------- */
.way{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,90px);align-items:start}
.way__panel{position:sticky;top:calc(var(--header-h) + 48px)}
.way__img{aspect-ratio:4/3;overflow:hidden;background:var(--paper-3);margin-top:26px;position:relative}
.way__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease)}
.way__img img.is-on{opacity:1}
.way__steps{position:relative;padding-left:44px}
.way__line{position:absolute;left:11px;top:14px;bottom:14px;width:1px;background:var(--line)}
.way__prog{position:absolute;left:11px;top:14px;width:1px;height:calc(100% - 28px);background:var(--brass);transform:scaleY(0);transform-origin:top}
.way__step{padding-block:clamp(20px,2.4vw,38px);position:relative;opacity:.6;transition:opacity .6s var(--ease)}
.way__step.is-on{opacity:1}
.way__step::before{
  content:"";position:absolute;left:-38px;top:calc(clamp(20px,2.4vw,38px) + 8px);
  width:9px;height:9px;border-radius:50%;background:var(--paper);border:1px solid var(--line);
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease);
}
.way__step.is-on::before{background:var(--brass);border-color:var(--brass);transform:scale(1.25)}
.way__step h3{font-family:var(--sans);font-size:clamp(17px,1.5vw,22px);font-weight:400;letter-spacing:-.005em}
.way__step .n{font-size:11px;letter-spacing:.2em;color:var(--brass-txt);display:block;margin-bottom:9px}
.way__step p{margin:9px 0 0;color:var(--ink-3);font-size:14.5px;max-width:var(--grid-measure)}

/* ---------- 16. Галерея / masonry ---------- */
.mason{columns:3;column-gap:clamp(14px,1.6vw,26px)}
.mason figure{break-inside:avoid;margin:0 0 clamp(14px,1.6vw,26px);position:relative;overflow:hidden;background:var(--paper-3)}
.mason img{width:100%;transition:transform 1s var(--ease)}
.mason figure:hover img{transform:scale(1.04)}
.mason figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 20px 16px;color:var(--paper);font-size:13px;letter-spacing:.04em;background:linear-gradient(180deg,transparent,rgba(10,12,8,.72))}

/* ---------- 17. Истории ---------- */
.stories{position:relative;min-height:clamp(360px,40vw,520px)}
.story{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,72px);opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
.story.is-on{opacity:1;visibility:visible;position:relative}
.story__ph{aspect-ratio:4/5;overflow:hidden;background:var(--paper-3)}
.story__ph img{width:100%;height:100%;object-fit:cover}
.story__q{font-family:var(--serif);font-size:clamp(22px,2.5vw,40px);line-height:1.28;font-weight:300}
.story__who{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-3)}
.story__who b{display:block;font-weight:500;color:var(--ink);font-size:15px;margin-bottom:4px}
.dots{display:flex;gap:10px;margin-top:32px}
.dot{width:34px;height:2px;background:var(--line);border:0;padding:0;cursor:pointer;transition:background .4s}
.dot.is-on{background:var(--brass)}

/* ---------- 18. Аккордеон ---------- */
.acc{border-top:1px solid var(--line)}
.acc__it{border-bottom:1px solid var(--line)}
.acc__h{
  width:100%;background:none;border:0;padding:clamp(20px,2.2vw,34px) 0;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left;
}
.acc__h h3{font-family:var(--serif);font-size:clamp(21px,2vw,32px);font-weight:300}
.acc__ic{position:relative;width:20px;height:20px;flex:none}
.acc__ic::before,.acc__ic::after{content:"";position:absolute;left:0;top:9.5px;width:20px;height:1px;background:var(--ink);transition:transform .5s var(--ease)}
.acc__ic::after{transform:rotate(90deg)}
.acc__it.is-open .acc__ic::after{transform:rotate(0)}
.acc__b{height:0;overflow:hidden}
.acc__inner{padding-bottom:clamp(22px,2.4vw,36px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,54px)}
.acc__inner p{margin:0 0 14px;color:var(--ink-2)}
.acc__inner ul li{padding-left:22px;position:relative;color:var(--ink-3);font-size:14.5px;margin-bottom:9px}
.acc__inner ul li::before{content:"";position:absolute;left:0;top:10px;width:10px;height:1px;background:var(--brass)}

/* ---------- 19. Формы / запись ---------- */
.form{display:grid;gap:18px;max-width:520px}
.field{position:relative}
.field label{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.field input,.field textarea,.field select{
  width:100%;padding:14px 0;background:none;border:0;border-bottom:1px solid var(--line);
  font:inherit;color:inherit;border-radius:0;transition:border-color .4s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brass)}
.field textarea{resize:vertical;min-height:88px}
.slab--dark .field input,.slab--dark .field textarea{border-color:var(--line-inv);color:var(--paper)}
.slab--dark .field label{color:rgba(242,239,232,.6)}
.err{display:block;font-size:12.5px;color:var(--danger);margin-top:7px;min-height:0;opacity:0;transition:opacity .3s}
.field.is-bad .err{opacity:1}
.field.is-bad input,.field.is-bad textarea{border-color:var(--danger)}
.slab--dark .err,.slab--ink .err{color:#F0A48D}
.slab--dark .field.is-bad input,.slab--ink .field.is-bad input,
.slab--dark .field.is-bad textarea,.slab--ink .field.is-bad textarea{border-color:#F0A48D}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.consent input{width:16px;height:16px;flex:none;margin-top:3px;accent-color:var(--brass)}
.slab--dark .consent{color:rgba(242,239,232,.62)}
.formdone{display:none;align-items:center;gap:16px;padding:22px 0;font-size:15px}
.formdone svg{width:34px;height:34px;flex:none;color:var(--brass)}
.formdone circle,.formdone path{stroke-dasharray:120;stroke-dashoffset:120}
.form.is-done .formdone{display:flex}
.form.is-done .form__body{display:none}

.msgs{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.msg{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;font-size:13px;transition:border-color .4s var(--ease),background .4s var(--ease)}
.msg:hover{border-color:var(--ink)}
.msg svg{width:15px;height:15px;color:var(--brass)}
.slab--dark .msg{border-color:var(--line-inv)}

.booking{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,44px)}
.bk__ttl{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.bk__opts{display:flex;flex-direction:column;gap:8px}
.opt{
  padding:13px 16px;border:1px solid var(--line);background:none;cursor:pointer;text-align:left;
  font-size:14px;transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
.opt small{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}
.opt:hover{border-color:var(--ink)}
.opt.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opt.is-on small{color:rgba(242,239,232,.65)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.slot{padding:11px 6px;border:1px solid var(--line);background:none;cursor:pointer;font-size:13.5px;font-variant-numeric:tabular-nums;transition:border-color .35s,background .35s,color .35s}
.slot:hover{border-color:var(--ink)}
.slot.is-on{background:var(--brass);border-color:var(--brass);color:var(--paper)}

/* ---------- 20. Прочее ---------- */
.docs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,30px)}
.doc{border:1px solid var(--line);padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:14px;min-height:190px;cursor:pointer;background:none;text-align:left;transition:border-color .4s var(--ease),transform .5s var(--ease)}
.doc:hover{border-color:var(--brass);transform:translateY(-3px)}
.doc svg{width:24px;height:24px;color:var(--brass)}
.doc h3{font-family:var(--sans);font-size:14.5px;font-weight:500;margin-top:auto}
.doc p{margin:0;font-size:12.5px;color:var(--ink-3)}

.lbox{position:fixed;inset:0;z-index:1000;display:none;place-items:center;padding:24px;background:rgba(14,15,10,.72);backdrop-filter:blur(12px)}
.lbox.is-on{display:grid}
.lbox__c{background:var(--paper);padding:clamp(26px,4vw,54px);max-width:620px;width:100%;transform:scale(.96);opacity:0;transition:transform .5s var(--ease),opacity .4s}
.lbox.is-on .lbox__c{transform:none;opacity:1}
.lbox__x{position:absolute;top:22px;right:22px;width:44px;height:44px;border:1px solid var(--line-inv);background:none;color:var(--paper);cursor:pointer;border-radius:50%}

.vidgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,38px)}
.vcard{position:relative;display:block}
.vcard__ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.vcard__ph img{width:100%;height:100%;object-fit:cover;filter:brightness(.72);transition:transform .9s var(--ease),filter .7s var(--ease)}
.vcard:hover .vcard__ph img{transform:scale(1.03);filter:brightness(.88)}
.vcard__play{position:absolute;inset:0;display:grid;place-items:center}
.vcard__play span{width:60px;height:60px;border-radius:50%;border:1px solid rgba(242,239,232,.75);display:grid;place-items:center;transition:background .5s var(--ease)}
.vcard:hover .vcard__play span{background:rgba(242,239,232,.16)}
.vcard__play svg{width:15px;height:15px;color:var(--paper)}
.vcard h3{font-family:var(--serif);font-size:clamp(19px,1.6vw,26px);margin-top:16px}
.vcard p{margin:6px 0 0;font-size:13px;color:var(--ink-3)}

.teamgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,38px)}
.person__ph{aspect-ratio:4/5;overflow:hidden;background:var(--paper-3)}
.person__ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.person:hover .person__ph img{transform:scale(1.04)}
.person h3{font-family:var(--serif);font-size:23px;margin-top:16px}
.person p{margin:5px 0 0;font-size:13.5px;color:var(--ink-3)}

.tline{border-top:1px solid var(--line)}
.tline__it{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(18px,3vw,54px);padding:clamp(22px,2.4vw,38px) 0;border-bottom:1px solid var(--line)}
.tline__y{font-family:var(--serif);font-size:clamp(30px,3vw,46px);line-height:1;color:var(--brass)}
.tline__it h3{font-family:var(--sans);font-size:16px;font-weight:500;margin-bottom:8px}
.tline__it p{margin:0;color:var(--ink-3);max-width:var(--grid-measure)}

.offices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,44px)}
.office{border-top:1px solid var(--line);padding-top:22px}
.office h3{font-family:var(--serif);font-size:27px;margin-bottom:10px}
.office p{margin:0 0 6px;font-size:14px;color:var(--ink-3)}
.office a{border-bottom:1px solid var(--line);transition:border-color .35s}
.office a:hover{border-color:var(--brass)}

.quote{font-family:var(--serif);font-size:clamp(26px,3.6vw,58px);line-height:1.22;font-weight:300}

/* ---------- 21. Подвал ---------- */
.ftr{background:var(--moss);color:var(--paper);position:relative;z-index:4;padding-block:clamp(56px,6vw,96px) 34px}
.ftr a{color:rgba(242,239,232,.72);transition:color .35s var(--ease)}
.ftr a:hover{color:var(--paper)}
.ftr__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,56px)}
.ftr__h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-lt);margin-bottom:20px}
.ftr li{margin-bottom:11px;font-size:14px}
.ftr__big{font-family:var(--serif);font-size:clamp(28px,3vw,46px);line-height:1.14;margin-bottom:24px;max-width:16ch}
.ftr__bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:clamp(40px,5vw,72px);padding-top:24px;border-top:1px solid var(--line-inv);font-size:12.5px;color:rgba(242,239,232,.55)}

/* ---------- 22. Переход между страницами ---------- */
.pt{position:fixed;inset:0;z-index:1200;background:var(--moss);transform:scaleY(0);transform-origin:bottom;pointer-events:none}

/* ---------- Загрузочная заставка ЛОНГХАУС ---------- */
.boot{
  position:fixed;inset:0;z-index:1300;background:var(--moss);
  display:grid;place-items:center;pointer-events:none;
  transition:opacity .65s var(--ease),visibility .65s var(--ease);
}
.boot.is-done{opacity:0;visibility:hidden}
.boot__word{
  font-family:var(--serif);color:var(--paper);
  font-size:clamp(26px,4vw,54px);letter-spacing:.34em;
  padding-left:.34em; /* компенсация трекинга: слово стоит оптически по центру */
  display:inline-flex;
}
.boot__word i{
  font-style:normal;opacity:0;transform:translateY(14px);
  animation:bootIn .7s var(--ease) forwards;
}
.boot__word i:nth-child(1){animation-delay:.08s}
.boot__word i:nth-child(2){animation-delay:.16s}
.boot__word i:nth-child(3){animation-delay:.24s}
.boot__word i:nth-child(4){animation-delay:.32s}
.boot__word i:nth-child(5){animation-delay:.40s}
.boot__word i:nth-child(6){animation-delay:.48s}
.boot__word i:nth-child(7){animation-delay:.56s}
.boot__word i:nth-child(8){animation-delay:.64s}
/* Девятая буква нужна английской версии: LONGHOUSE длиннее ЛОНГХАУС на знак.
   На русских страницах селектор не находит элемента и ни на что не влияет. */
.boot__word i:nth-child(9){animation-delay:.72s}
@keyframes bootIn{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){
  .boot{transition:none}
  .boot__word i{animation:none;opacity:1;transform:none}
}
body.pt-out .pt{pointer-events:auto}

/* ---------- 23. Reveal ---------- */
/* will-change НЕ статичный: 38 узлов .rv держали GPU-слои всё время жизни
   страницы. Ставит его GSAP в onStart и снимает в onComplete (app.js §5). */
.rv{opacity:0}
.no-js .rv,.no-js .ovl{opacity:1}

/* ---------- 24. Адаптив ---------- */
@media (max-width:1180px){
  .g-4,.stats,.pledges,.docs,.teamgrid,.vidgrid,.booking,.offices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pledge:nth-child(3){border-left:1px solid var(--line)}
  .pledge:first-child{border-left:1px solid var(--line)}
  .stat{border-left:1px solid var(--line);padding-left:clamp(16px,2vw,34px)}
  .stat:nth-child(odd){border-left:0;padding-left:0}
  .mason{columns:2}
  .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  /* Двухколоночники схлопнулись в одну колонку — «влезаемость» заголовков
     считаем от полной ширины сетки, иначе кегль ужимался бы вдвое зря. */
  :root{--header-h:64px;--hscol:var(--wrapw);--st2col:var(--wrapw)}
  .nav,.hdr__tel{display:none}
  .burger{display:block}
  .head-split,.sticky2,.way,.story,.acc__inner,.g-2,.g-3{grid-template-columns:minmax(0,1fr)}
  .sticky2__l,.way__panel{position:static}
  .plancards{flex-direction:column;gap:8px}
  .g-12{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tline__it{grid-template-columns:minmax(0,1fr);gap:8px}
}
@media (max-width:640px){
  .pledges,.stats,.docs,.teamgrid,.vidgrid,.booking,.offices,.ftr__grid{grid-template-columns:minmax(0,1fr)}
  .pledge{border-left:1px solid var(--line)!important}
  .stat{border-left:0!important;padding-left:0!important;border-top:1px solid var(--line);padding-top:24px}
  .stat:first-child{border-top:0}
  .floatstats .stat{border-top-color:var(--line-inv)}
  .mason{columns:1}
  .pcards{grid-template-columns:minmax(0,1fr)}
  .hero__meta{gap:12px 22px;font-size:11px}
  .btn{padding:14px 20px;font-size:11.5px}
  .spacer--m{height:150dvh}
  .spacer--l{height:170dvh}
  .spacer--xl{height:280dvh}
  .ovl{max-width:82vw}
  .ovl--right{max-width:82vw}
}

/* ---------- 25. Уважение к reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv,.ovl{opacity:1!important;transform:none!important}
  .ovl{
    position:relative;top:auto;left:auto;right:auto;text-align:left;
    color:var(--ink);max-width:none;background:var(--paper);z-index:4;
    padding:clamp(48px,7vw,110px) var(--gut);
  }
  .ovl .lede{color:var(--ink-2);margin-left:0}
  .ovl .eyebrow{color:var(--brass)}
  .ovl .eyebrow::after{background:var(--line)}
  .spacer{height:0!important}
  .stage{display:none}
  .floatstats{color:var(--ink);background:var(--paper)}
  .floatstats .stat__n{color:var(--ink)}
  .floatstats .stat__lbl{color:var(--ink-3)}
  .plancards{flex-wrap:wrap;gap:12px}
  .htrack{flex-wrap:wrap}
}

/* ---------- 26. Правки после визуальной приёмки ---------- */
/* Читаемость цифр поверх живой сцены */
.floatstats{isolation:isolate}
.floatstats::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(12,14,9,.42)}

/* Тёмные секции: интерактив должен быть виден */
.slab--dark .opt,.slab--ink .opt,.slab--dark .slot,.slab--ink .slot{border-color:var(--line-inv);color:var(--paper)}
.slab--dark .opt small,.slab--ink .opt small{color:rgba(242,239,232,.58)}
.slab--dark .opt:hover,.slab--ink .opt:hover,.slab--dark .slot:hover,.slab--ink .slot:hover{border-color:var(--paper)}
.slab--dark .opt.is-on,.slab--ink .opt.is-on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.slab--dark .opt.is-on small,.slab--ink .opt.is-on small{color:var(--ink-3)}
.slab--dark .slot.is-on,.slab--ink .slot.is-on{background:var(--brass);border-color:var(--brass);color:#141509}
.slab--dark .bk__ttl,.slab--ink .bk__ttl{color:rgba(242,239,232,.6)}
.slab--dark ::placeholder,.slab--ink ::placeholder{color:rgba(242,239,232,.42)}
.slab--ink .field input,.slab--ink .field textarea{border-color:var(--line-inv);color:var(--paper)}
.slab--ink .field label{color:rgba(242,239,232,.6)}
.slab--ink .consent{color:rgba(242,239,232,.62)}
.slab--ink .lede,.slab--ink .small{color:rgba(242,239,232,.72)}
.slab--ink .eyebrow::after{background:var(--line-inv)}
.slab--ink .msg{border-color:var(--line-inv)}
.slab--ink .rule{background:var(--line-inv)}

/* Высокая фотография в двухколоночниках — чтобы не оставалось пустоты */
.clipfig--tall img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (max-width:900px){.clipfig--tall img{aspect-ratio:4/3}}

/* Согласие и кнопка не должны слипаться */
.form .consent{margin-block:6px 4px}

/* Карточки под планом — ряд на широком экране, столбик на узком */
@media (max-width:900px){
  .plancards{flex-direction:column}
  .plancard{flex:0 0 auto}
}

/* Текст над живой сценой — гарантированная читаемость на любом кадре */
.ovl{text-shadow:0 1px 34px rgba(10,12,8,.6),0 1px 3px rgba(10,12,8,.35)}
.floatstats .stat__n,.floatstats .stat__lbl{text-shadow:0 1px 24px rgba(10,12,8,.5)}

/* Мобильные правки после приёмки на 390px */
.hero .eyebrow{text-shadow:0 1px 24px rgba(10,12,8,.65)}
@media (max-width:760px){
  /* Подсказка прокрутки остаётся живой и на телефоне — меняется только
     форма: без надписи, по центру под метаданными, чтобы не спорить
     с полосой .hero__meta во всю ширину. */
  .scrollhint{
    right:auto;left:50%;transform:translateX(-50%);
    bottom:10px;gap:0;
  }
  .scrollhint span{display:none}
  .scrollhint svg{width:11px;height:20px}
  .hero__in{padding-bottom:clamp(40px,6vh,60px)}
  .hero__meta{margin-top:26px;padding-top:16px}
  .lbox__c{max-height:80dvh;overflow:auto}
}

/* Финальные оверрайды для prefers-reduced-motion (должны идти последними) */
@media (prefers-reduced-motion:reduce){
  .floatstats::before{display:none}
  .ovl,.floatstats .stat__n,.floatstats .stat__lbl,.hero .eyebrow{text-shadow:none}
  .floatstats{background:var(--paper);color:var(--ink);padding-block:clamp(48px,7vw,110px)}
  .floatstats .eyebrow{color:var(--brass)}
  .floatstats .eyebrow .num{color:var(--ink-3)}
  .floatstats .stat{border-color:var(--line)}
  .floatstats .stat__n{color:var(--ink)}
  .floatstats .stat__lbl{color:var(--ink-3)}
  .plancard{opacity:1!important}
  .pl-d{stroke-dashoffset:0!important}
  .pl-t{opacity:1!important}
}

/* Hero внутренних страниц: заголовок не должен уезжать под шапку.
   12.08.2026 (владелец: «блок обрезанный, такой узкий — раздвинь больше»):
   было clamp(560px,80dvh,820px) — потолок 820px обрезал кадр на 1440×900 (80 %)
   и 1920×1080 (76 %), под hero оставалась светлая полоса. Теперь первый экран
   держит 92svh (88–100 % ориентир) с потолком 1040px для очень высоких окон.
   svh — «маленький» вьюпорт мобильного: панели браузера не режут кадр. */
.hero--page{min-height:clamp(560px,92dvh,1040px);min-height:clamp(560px,92svh,1040px)}
/* Полоса воздуха под первым экраном: общий .sect даёт до 164px сверху —
   на внутренних это читалось как «пустота после обрезанного кадра». */
.hero--page + .sect:not(.sect--tight){padding-top:clamp(56px,6vw,104px)}
.hero--page .hero__in{
  padding-top:calc(var(--header-h) + clamp(34px,6vh,80px));
  padding-bottom:clamp(40px,6vh,72px);
}
.hero--page .d1{--fs:clamp(36px,6vw,104px)}
.hero--page .hero__sub{max-width:40em}
@media (max-width:640px){
  /* было min-height:auto → кадр занимал 62 % экрана и обрывался светлой полосой.
     88svh = почти весь экран телефона, но hero всё равно может вырасти
     по содержимому (min-height, не height) — ничего не обрезается. */
  .hero--page{min-height:88dvh;min-height:88svh}
  .hero--page .hero__in{padding-top:calc(var(--header-h) + 40px)}
}

/* Чуть плотнее вуаль на внутренних hero — надзаголовок читаем на любом кадре */
.hero--page .hero__media::after{
  background:linear-gradient(180deg,rgba(10,12,8,.64) 0%,rgba(10,12,8,.36) 45%,rgba(10,12,8,.7) 100%);
}

/* ---------- 27. Приёмка №2: стыки, кнопки, видео, каналы связи ---------- */

/* 27.1 СНЯТО (приёмка Карины 06.08.2026).
   Здесь были «мягкие стыки»: бумажная плита растворялась в фотографии
   градиентом на 15vh сверху и снизу. Ревьюер: переходы-градиенты читаются
   как слайды PowerPoint — секции должны идти просто друг за другом, с чёткой
   границей. Плита и фотография контрастны сами по себе, разделять их
   растворением не нужно. Классы edge-top/edge-bot убраны и из разметки. */

/* 27.2 Микрокопирайт под кнопкой (лёгкий вход) */
.cta{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cta--row{flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px}
.btn-note{
  margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-3);
  display:flex;align-items:center;gap:8px;max-width:34em;
}
.btn-note svg{width:13px;height:13px;flex:none;color:var(--brass-txt)}
.slab--dark .btn-note,.slab--ink .btn-note,.planscene .btn-note,.hero .btn-note{
  color:rgba(242,239,232,.8);
}
.slab--dark .btn-note svg,.slab--ink .btn-note svg,.planscene .btn-note svg,
.hero .btn-note svg{color:var(--brass-lt)}
.hero .btn-note{text-shadow:0 1px 20px rgba(10,12,8,.7)}
.cta--center{align-items:center;text-align:center}
.cta--center .btn-note{justify-content:center}

/* 27.3 Видеокарточки — настоящий проигрыватель вместо картинки со стрелкой */
.vcard{position:relative;display:flex;flex-direction:column}
.vcard__ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.vcard__ph video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:var(--ink);
}
.vcard__play{
  position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  border:0;padding:0;background:rgba(14,15,10,.28);cursor:pointer;
  transition:background .5s var(--ease),opacity .4s var(--ease);
}
.vcard__play span{
  width:64px;height:64px;border-radius:50%;border:1px solid rgba(242,239,232,.8);
  display:grid;place-items:center;background:rgba(14,15,10,.35);
  transition:background .5s var(--ease),transform .5s var(--ease);
}
.vcard__play:hover span{background:rgba(242,239,232,.24);transform:scale(1.06)}
.vcard__play svg{width:16px;height:16px;color:var(--paper);margin-left:2px}
.vcard.is-playing .vcard__play{opacity:0;pointer-events:none}
.vcard__time{
  position:absolute;right:12px;bottom:12px;z-index:3;
  background:rgba(14,15,10,.72);color:var(--paper);
  padding:5px 10px;border-radius:2px;font-size:11.5px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;pointer-events:none;
}
.vcard h3{font-family:var(--serif);font-size:clamp(19px,1.6vw,26px);margin-top:16px}
.vcard p{margin:6px 0 0;font-size:13px;color:var(--ink-3)}
.slab--alt .vcard p,.slab--dark .vcard p{color:var(--ink-3)}
.slab--dark .vcard h3,.slab--dark .vcard p{color:var(--paper)}
.slab--dark .vcard p{color:rgba(242,239,232,.72)}

/* 27.4 Чипы: кликабельный канал связи ≠ факт-плашка */
button.msg,a.msg{cursor:pointer}
button.msg{background:none;font:inherit;color:inherit}
button.msg.is-on{border-color:var(--brass);background:rgba(150,121,76,.12)}
.slab--dark button.msg.is-on,.slab--ink button.msg.is-on{border-color:var(--brass-lt);background:rgba(183,154,108,.18)}
.msg--fact{cursor:default;border-style:dashed;color:var(--ink-2)}
.msg--fact:hover{border-color:var(--line)}
.slab--dark .msg--fact,.slab--ink .msg--fact{color:rgba(242,239,232,.82)}
.slab--dark .msg--fact:hover,.slab--ink .msg--fact:hover{border-color:var(--line-inv)}
.chan-note{margin:14px 0 0;font-size:13px;color:rgba(242,239,232,.78)}
.chan-note b{font-weight:500;color:var(--paper)}

/* 27.5 Лукбук: счётчик отметок на кнопке */
.lb-count{font-variant-numeric:tabular-nums}

/* 27.6 Лайтбокс: крестик всегда поверх карточки и не наезжает на текст */
.lbox__x{z-index:2;background:rgba(14,15,10,.5)}
.lbox__c{position:relative}

/* 27.7 Плотнее подложка под цифрами поверх живой сцены (кадр может быть светлым) */
.floatstats::before{background:rgba(12,14,9,.56)}

/* 27.7a Несогласие с обработкой данных — видимая ошибка, а не инлайновый цвет */
.consent.is-bad{color:var(--danger)}
.slab--dark .consent.is-bad,.slab--ink .consent.is-bad{color:#F0A48D}
.consent.is-bad input{outline:2px solid currentColor;outline-offset:2px}

/* 27.7b Мелкие антиквенные подзаголовки наследовали line-height 1.02 от дисплейных —
   в две строки они слипались. Разводим интерлиньяж. */
.vcard h3,.hcard__ttl,.person h3,.office h3,.acc__h h3,.pcard__name,.d4{line-height:1.18}
.story__who b{line-height:1.3}

/* 27.8 3-line-guard (LAYOUT-STANDARDS §7): заголовок первого экрана ≤ 3 строк на 360px */
@media (max-width:430px){
  .d1{--fs:clamp(34px,10.4vw,46px);line-height:1.06}
  .hero--page .d1{--fs:clamp(30px,8.8vw,40px)}
  .d2{--fs:clamp(28px,8vw,38px)}
  .lede{font-size:16px}
  .hero__ttl .ln>span{white-space:normal}
}
/* 27.8a Ландшафт телефона (844×390 и подобные): первый экран не помещается по высоте,
   и заголовок наезжал на логотип. Отпускаем высоту hero и ужимаем типографику. */
@media (orientation:landscape) and (max-height:560px){
  .hero,.hero--page{min-height:auto}
  .hero__in{padding-top:calc(var(--header-h) + 18px);padding-bottom:clamp(24px,6vh,40px)}
  .hero .d1,.hero--page .d1{--fs:clamp(28px,5.2vw,48px)}
  .hero__sub{font-size:15px;margin-top:12px}
  .hero__acts{margin-top:16px;gap:10px}
  .hero .btn{padding:11px 16px;font-size:11px}
  .hero__meta{margin-top:16px;padding-top:12px;font-size:10.5px;gap:6px 16px}
  .hero .eyebrow{margin-bottom:12px!important}
  /* В ландшафте hero сжат по содержимому — подсказка уходит в самый низ
     полосы отступа, где под ней нет ни метаданных, ни кнопок. */
  .scrollhint{bottom:2px;transform:translateX(-50%) scale(.86)}
}

/* 27.9 Русские подписи кнопок длиннее английских — на узком экране не рвём в столбик */
@media (max-width:560px){
  .btn{width:100%;justify-content:space-between}
  .hero__acts,.cta--row{width:100%}
  .cta{width:100%;align-items:stretch}
  .btn-note{max-width:none}
}

/* ==================== 28. АДАПТИВНАЯ ПРИЁМКА 360–2560 ====================
   Правки после построчного аудита layout-audit.cjs по 19 разрешениям × 5 страниц.
   Каждый блок подписан причиной — что именно ехало и почему. */

/* 28.0 Длинные русские слова не выносим за колонку (антиква + узкая колонка). */
body{overflow-wrap:break-word}
.d1,.d2,.d3,.d4,h1,h2,h3,h4,.quote,.hcard__ttl,.pcard__name,.acc__h h3{overflow-wrap:break-word}
.quote{text-wrap:balance}

/* 28.1 Первый экран на низких телефонах (360×640, 375×667).
   .hero{align-items:flex-end} + нулевой верхний padding: когда контент выше
   вьюпорта, он вылезал ВВЕРХ и надзаголовок ложился на логотип в липкой шапке.
   Верхний отступ = высота шапки — контент никогда не подныривает под неё. */
.hero__in{padding-top:calc(var(--header-h) + clamp(14px,2.4vh,30px))}

/* 28.2 Clip-фигуры: reveal делал img scale(1.08) внутри figure БЕЗ overflow —
   картинка вылезала за родителя на ±14px (390) и ±28px (768) и наезжала
   на соседнюю колонку. Фигура обязана обрезать. */
.clipfig{position:relative;overflow:hidden}

/* 28.3 Точки слайдера историй были тап-целью 34×2 px. Держим линию 2px
   визуально, но делаем зону нажатия 40×40. */
.dots{gap:6px;margin-top:28px}
.dot,.dot.is-on{width:40px;height:40px;padding:0;background:none;position:relative}
.dot::before{
  content:"";position:absolute;left:3px;right:3px;top:50%;height:2px;margin-top:-1px;
  background:var(--line);transition:background .4s var(--ease);
}
.dot.is-on::before{background:var(--brass)}

/* 28.4 Тап-цели ≥40px: логотип, пункты подвала, текстовые кнопки, чипы фильтров. */
.logo{min-height:44px}
@media (max-width:900px){
  .ftr li{margin-bottom:2px}
  .ftr li a{display:inline-flex;align-items:center;min-height:40px}
  .tlink{padding-top:13px}
  .tab{padding-block:11px}
  .office a{display:inline-block;padding-block:8px}
}

/* 28.5 Сцена «план сверху» с 06.08.2026 живёт в обычном потоке на всех
   ширинах (см. §14): план, под ним карточки. Остались только те правки,
   без которых карточки не помещаются в узкий и в низкий экран. */
@media (orientation:landscape) and (max-height:620px){
  .plancard{padding:8px 12px}
  .plancard__lbl{font-size:9.5px;letter-spacing:.12em}
  .plancard__v{font-size:clamp(17px,2.6vw,24px);margin-top:2px}
}

/* 28.6 Лукбук на телефоне остаётся ГОРИЗОНТАЛЬНЫМ (нативный свайп со scroll-snap
   вместо закрепления) — эффект сохранён, а не вырезан. Добавлены: подсказка
   «листайте вбок», чтобы скрытые карточки не были секретом, и снап по каждой
   карточке. Входные анимации карточек ставит app.js. */
/* Ширина карточки в закреплённом режиме считается и от высоты экрана —
   так закрепление включается и на телефоне-портрете, а карточка целиком
   помещается во вьюпорт вместе с заголовком и кнопкой. */
.hstage.is-pinned .hcard{width:clamp(200px,min(46vw,40vh),420px)}
@media (max-width:900px){
  .hcard{flex:0 0 clamp(200px,min(62vw,40vh),320px)}
  .hcard__ttl{font-size:clamp(18px,4.6vw,24px)}
}

/* Прогресс лукбука — виден в обоих режимах (закрепление и свайп),
   показывает, сколько ленты пройдено. */
.hprog{
  position:relative;height:1px;background:var(--line);margin:18px var(--gut-x) 0;
  overflow:hidden;
}
.hprog i{
  position:absolute;inset:0 auto 0 0;width:100%;background:var(--brass);
  transform:scaleX(0);transform-origin:left;
}
/* Подсказка «листайте вбок» нужна ВЕЗДЕ, где лента листается пальцем, а не
   закреплена, — иначе спрятанные карточки остаются секретом. Раньше она была
   привязана к ширине ≤900px, и на низком широком экране (932×430) исчезала,
   хотя лента там как раз в свайп-режиме. Теперь условие одно: не закреплено. */
.hswipe{
  display:flex;align-items:center;gap:9px;margin:12px 0 0;
  padding-inline:var(--gut-x);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.hswipe svg{width:26px;height:8px;flex:none;color:var(--brass)}
.hstage.is-pinned .hswipe{display:none}
/* Активная карточка крупнее соседних — центр ленты «в фокусе»; фото внутри
   кадра едет параллаксом. Значения пишет JS каждый кадр, поэтому transition
   на этих двух элементах снимаем (иначе эффект «догоняет» с задержкой). */
.hcard__ph{transform-origin:50% 55%;transition:none;will-change:transform}
.hcard__ph img{transition:none!important;will-change:transform}
.hcard__ttl,.hcard__cnt{transition:opacity .3s var(--ease)}
@media (max-width:400px){
  .hcard__cnt{font-size:12px}
}

/* 28.7 Сводная таблица проектов: 8 колонок с min-width:760px на телефоне
   показывали 4 из 8 — колонка «Цена» уезжала за экран без подсказки, что
   таблицу надо листать. На ≤760px разворачиваем строку в карточку. */
@media (max-width:760px){
  #compare .tblwrap{overflow:visible}
  #compare table{min-width:0!important;display:block;font-size:14.5px}
  #compare thead{display:none}
  #compare tbody{display:block}
  #compare tbody tr{display:block;padding:16px 0 18px;border-bottom:1px solid var(--line)}
  #compare tbody tr:first-child{padding-top:0}
  #compare tbody td{
    display:flex;justify-content:space-between;align-items:baseline;gap:18px;
    padding:4px 0!important;color:var(--ink-2);
  }
  #compare tbody td::before{
    content:attr(data-l);color:var(--ink-3);font-size:12.5px;letter-spacing:.02em;flex:none;
  }
  #compare tbody td:first-child{
    display:block;font-family:var(--serif);font-size:24px;line-height:1.15;
    color:var(--ink);margin-bottom:8px;padding:0!important;
  }
  #compare tbody td:first-child::before{display:none}
}

/* 28.8 Текстовые оверлеи живой сцены на узких — во всю доступную ширину. */
@media (max-width:900px){
  .ovl{max-width:88vw}
  .ovl--right{max-width:88vw}
}

/* 28.9 Микрокопирайт под кнопкой: галочка висела слева от блока в две строки. */
@media (max-width:560px){
  .btn-note{align-items:flex-start}
  .btn-note svg{margin-top:5px}
}

/* 28.10 Текст поверх живой сцены на телефоне ложился на светлое небо и светлую
   древесину — одной тени было мало. Локальная подложка под блоком (как у цифр),
   фотографию целиком не затемняет. */
@media (max-width:900px){
  .ovl{isolation:isolate}
  /* Радиус эллипса заметно меньше бокса — подложка успевает уйти в ноль
     до его края, иначе на фото видна прямая граница затемнения. */
  .ovl::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    inset:-42vh -34vw -42vh calc(var(--gut-x) * -1);
    background:radial-gradient(62% 33% at 14% 50%,
      rgba(10,12,8,.84) 0%,rgba(10,12,8,.56) 42%,rgba(10,12,8,0) 78%);
  }
  .ovl--right::before{
    inset:-42vh calc(var(--gut-x) * -1) -42vh -34vw;
    background:radial-gradient(62% 33% at 86% 50%,
      rgba(10,12,8,.84) 0%,rgba(10,12,8,.56) 42%,rgba(10,12,8,0) 78%);
  }
}

/* 28.11 Reduced-motion: сцена превращается в обычные бумажные блоки —
   подложка под текстом там не нужна (и была бы чёрным пятном). */
@media (prefers-reduced-motion:reduce){
  .ovl::before{display:none}
  .plancards{flex-wrap:wrap}
  .htrack{flex-wrap:wrap}
}

/* 28.12 Слайдер историй: неактивный слайд лежит absolute поверх активного и
   при перелистывании обе цитаты 0,6 с существуют одновременно — текст на тексте.
   Уходящий слайд скрываем сразу, приходящий проявляем. */
.story{transition:opacity .5s var(--ease),visibility 0s linear}
.story.is-on{transition:opacity .55s var(--ease)}

/* 28.13 Обёртка сводной таблицы (класс вместо инлайнового overflow). */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ==================== 29. АНИМАЦИЯ НА УЗКИХ ЭКРАНАХ ====================
   Директива владельца: движение на телефоне НЕ выключаем. Тяжёлые эффекты
   упрощаем по параметрам, но оставляем видимыми. Единственный выключатель —
   prefers-reduced-motion (блоки 25 и 27.x выше). */

/* 29.1 Sticky-таймлайн пути клиента раньше на ≤900px становился обычным
   потоком — и смена кадра «сейчас смотрим» происходила за экраном, то есть
   эффект был, а увидеть его было нельзя. Возвращаем липкость: в одну колонку
   панель держится сверху, шаги проезжают под ней и переключают кадр. */
@media (max-width:900px){
  .way{gap:clamp(16px,3vw,28px)}
  .way__panel{
    position:sticky;top:calc(var(--header-h) + 10px);z-index:3;
    background:var(--paper);padding-bottom:14px;
  }
  .slab--alt .way__panel{background:var(--paper-2)}
  .slab--dark .way__panel{background:var(--moss)}
  .way__panel .d3{font-size:clamp(20px,5.4vw,28px)}
  /* 29.1a Кадр «сейчас смотрим»: max-height:26dvh ужимал не только высоту,
     но и ШИРИНУ бокса с aspect-ratio — на телефоне кадр висел уже колонки
     и был прижат к левому краю (фидбэк владельца 27.08). На телефоне (<=600px
     при высоте >=520px, т.е. портрет) cap снимаем — кадр во всю ширину
     контентной колонки; в альбоме/на планшете cap остаётся, чтобы кадр не
     съедал экран. */
  .way__img{aspect-ratio:16/9;max-height:26dvh;margin-top:14px}
  .way__steps{padding-top:6px}
}

@media (max-width:600px) and (min-height:520px){
  .way__img{max-height:none;width:100%}
}

/* 29.2 Производительность на мобильном: backdrop-filter пересчитывает
   размытие фона каждый кадр закреплённой сцены. Меняем на плотную заливку —
   вид тот же, кадр дешевле. Анимируем только transform/opacity. */
@media (max-width:900px){
  .plancard{background:rgba(18,20,13,.86)}
  /* Второй хвост той же инверсии — снят вместе с основным правилом (см. §14). */
  .lbox{backdrop-filter:none;background:rgba(14,15,10,.88)}
  /* transition снимаем ТОЛЬКО с фото лукбука: его transform каждый кадр
     пишет JS (фокус ленты), и переход заставлял бы эффект «догонять».
     Остальным кадрам переход нужен — на нём держится tap-отклик (§30). */
  .hcard__ph img{transition:none}
}

/* 29.3 will-change точечно: только там, где элемент реально едет каждый кадр. */
@media (max-width:900px){
  .rv,.hcard,.pcard,.doc,.stat{will-change:auto}
  .stage__layer img,.pf,.htrack,.hero__in{will-change:transform}
}

/* 29.4 Полоса-разделитель у цифр статистики раньше пряталась на ≤760px —
   эффект «черта прочерчивается» исчезал вместе с ней. Теперь она живёт
   всегда, но ниже 640px, где ячейки разделены ГОРИЗОНТАЛЬНОЙ чертой сверху,
   и полоса становится горизонтальной. Ось роста задаёт app.js через
   gsap.matchMedia, поэтому при повороте телефона сценарий пересобирается. */
@media (max-width:640px){
  .stat__bar{
    left:0;right:0;top:0;bottom:auto;width:auto;height:1px;
    transform:scaleX(0);transform-origin:left;
  }
}

/* ==================== 30. TAP-СОСТОЯНИЯ ВМЕСТО HOVER ====================
   На тач-экране :hover не срабатывает (или залипает после тапа), поэтому
   ровно те же движения дублируем на классе .is-tap — его вешает app.js §20
   на время, пока палец на элементе. Мышь продолжает работать через :hover. */
.pcard.is-tap .pcard__ph img{transform:scale(1.05)}
.pcard.is-tap .pcard__pill{opacity:1;transform:none}
.mason figure.is-tap img{transform:scale(1.04)}
.person.is-tap .person__ph img{transform:scale(1.04)}
/* В видеокарточке кадр — это <video> с постером, а не <img>: старое правило
   .vcard:hover .vcard__ph img не находило элемент, и наезд кадра не работал
   НИ на десктопе, ни на телефоне. Наводим на настоящий узел и дублируем на тап.
   Пока ролик играет, отклик снимаем — кадр не должен «дышать» под видео. */
.vcard__ph video{transition:transform .9s var(--ease)}
.vcard:hover .vcard__ph video,.vcard.is-tap .vcard__ph video{transform:scale(1.03)}
.vcard.is-playing .vcard__ph video{transform:none}
.vcard.is-tap .vcard__ph img{transform:scale(1.03);filter:brightness(.88)}
.vcard.is-tap .vcard__play span{background:rgba(242,239,232,.24);transform:scale(1.06)}
.doc.is-tap{border-color:var(--brass);transform:translateY(-3px)}
.btn.is-tap::before{transform:scaleY(1)}
.btn.is-tap{color:var(--paper)}
.btn--solid.is-tap{color:var(--paper);border-color:var(--brass)}
.btn--light.is-tap{color:var(--ink);border-color:var(--paper)}
.btn.is-tap .btn__ar{transform:translate(3px,-3px)}
.tab.is-tap{border-color:var(--ink)}
.opt.is-tap,.slot.is-tap,.msg.is-tap{border-color:var(--ink)}
.slab--dark .opt.is-tap,.slab--ink .opt.is-tap,
.slab--dark .slot.is-tap,.slab--ink .slot.is-tap{border-color:var(--paper)}
.office a.is-tap{border-color:var(--brass)}
.ftr a.is-tap{color:var(--paper)}
.tlink.is-tap::after{transform:scaleX(0);transform-origin:left}
.likebtn.is-tap{transform:scale(1.08)}
/* Карточка лукбука: её фото каждый кадр двигает JS-фокус ленты, поэтому
   отклик даём подписи, а не кадру — иначе два источника transform подерутся. */
.hcard.is-tap .hcard__ttl{color:var(--brass-txt)}

/* ==================== 30. ШАПКА НА ПЛАНШЕТЕ/ТЕЛЕФОНЕ ====================
   Симптом (iPad Safari): шапка «висит в воздухе» — между верхом экрана и
   шапкой открывается щель, и в ней виден уезжающий контент.
   Причина не одна, поэтому закрываем весь класс причин сразу:
     1) рубер-бэнд у верхнего края — iOS на кадр смещает position:fixed вниз;
     2) динамический тулбар меняет визуальный вьюпорт между кадрами;
     3) safe-area сверху в standalone-режиме.
   Меры ниже независимы: даже если щель всё-таки возникнет, в ней будет
   фон шапки, а не прокручивающийся контент. */
html,body{overscroll-behavior-y:none}

.hdr{
  top:0;left:0;right:0;bottom:auto;   /* явные стороны вместо inset-шортката */
  margin:0;                            /* никакого margin у обёртки — иначе щель */
  padding-top:env(safe-area-inset-top,0px);
  height:calc(var(--header-h) + env(safe-area-inset-top,0px));
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
/* Фон шапки продлён вверх за край экрана. Пока шапка прозрачная (первый
   экран) продолжение тоже прозрачное — inherit; как только .is-stuck даёт
   бумажный фон, он же закрывает любой возможный зазор сверху. */
.hdr::before{
  content:"";position:absolute;left:0;right:0;bottom:0;top:-120px;
  background:inherit;z-index:-1;pointer-events:none;
}
/* Мобильное меню — от самого верха, с той же поправкой на safe-area. */
.mnav{padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 32px)}

/* ==================== 31. ПРИЁМКА КАРИНЫ 06.08.2026 ====================
   Разбор скринкастов и скриншотов ревьюера. Три темы: стыки секций без
   градиентов (см. §27.1), сцены без закреплений (§10, §14) и читаемость
   заголовка на светлой фотографии. Ниже — последнее. */

/* 31.1 Hero страницы «Технология»: кадр цеха светлый по всей площади —
   белые стены, окна во всю высоту, светлая древесина. Белый заголовок и
   латунный надзаголовок на нём не читались («то, что жёлтое сверху, вообще
   фиг поймёшь»). Две меры сразу, как и просил ревьюер:
     1) кадр отражён по горизонтали — под текстовой колонкой оказывается
        тёмный корпус пресса, а не окна;
     2) под колонкой лежит косая подложка от левого края.
   Отражаем КОНТЕЙНЕР, а не <img>: transform картинки занят параллаксом
   (app.js §7), он бы затёр scaleX. Псевдоэлементы-вуали отражаем обратно,
   чтобы подложка осталась слева, где текст. */
.page-technology .hero--page .hero__media{transform:scaleX(-1)}
.page-technology .hero--page .hero__media::before,
.page-technology .hero--page .hero__media::after{transform:scaleX(-1)}
.page-technology .hero--page .hero__media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Хвост подложки уводим дальше вправо: на 901–1024px заголовок занимает
     бо́льшую долю ширины, чем на 1440px, и его последние буквы вылезали за край
     косой вуали (замер: 3,5:1 в худшей точке — крупному кеглю хватает, но запаса
     нет). До 96 % вуаль уже почти прозрачная, правый край кадра не темнеет. */
  background:linear-gradient(102deg,
    rgba(10,12,8,.9) 0%,rgba(10,12,8,.78) 32%,rgba(10,12,8,.52) 62%,
    rgba(10,12,8,.16) 84%,rgba(10,12,8,0) 96%);
}
@media (max-width:900px){
  /* На узком экране текст идёт во всю ширину — подложка становится вертикальной.
     Плотность привязана не к «верху кадра», а к тому, ГДЕ ЛЕЖИТ ТЕКСТ: на 834px
     текстовая колонка начинается по-разному: на планшете 834px — с 46 % высоты
     hero, на телефоне 390px — заметно выше. Поэтому «светлое окно» градиента
     нельзя привязать к процентам: любой выбранный процент попадает под текст на
     какой-то из ширин (проверено замером — латунный надзаголовок 11px давал
     3,6:1 при норме 4,5:1). Ниже 20 % высоты подложка ровная и плотная на всю
     оставшуюся высоту, а «дышит» только самый верх кадра. */
  .page-technology .hero--page .hero__media::before{
    background:linear-gradient(180deg,
      rgba(10,12,8,.7) 0%,rgba(10,12,8,.82) 20%,rgba(10,12,8,.86) 100%);
  }
}

/* ---------- 28. Темп акта «terrace» (блок «06 Компания в цифрах») ----------
   Владелец 12.08.2026: «очень длинная прокрутка данного блока — сократить или
   ускорить, но блок оставить». Замер до правки (Playwright, боевой URL):
   1440×900 — 2814px = 3,13 экрана; 1920×1080 — 3324px = 3,08; 390×844 —
   3232px = 3,83 (на телефоне хуже всего: .spacer--s не имел мобильного
   оверрайда, в отличие от --m/--l). Ориентир из ресёрча — 1–1,5 экрана на одну
   закреплённую сцену, 3+ читается как «страница замерла» (NN/g: пользователи
   редко скроллят дальше третьего экрана; 74 % времени просмотра — первые два).

   Сама механика не тронута: фон остаётся position:fixed, цифры так же
   всплывают поверх живого кадра, скраб зума/яркости тот же. Меняется только
   ДЛИНА пустых распорок вокруг блока — и она теперь асимметрична:
   • верхняя длиннее — она отрабатывает «чистый кадр» перед цифрами
     (бумажная плита #material успевает уйти за верхний край до того, как
     цифры встают в позицию чтения ~60 % высоты экрана);
   • нижняя короче — цифрам достаточно уехать вверх, держать пустой кадр
     после них незачем.
   Правки только классовые, разметка не менялась. */
.act[data-stage="terrace"] > .spacer--s:last-child{height:26dvh}

@media (max-width:640px){
  /* На телефоне блок и без распорок высокий: .stats схлопывается в одну
     колонку, четыре ячейки дают ~1,3 экрана содержимого. Поэтому распорки
     режем сильнее — как это уже сделано для --m/--l выше. */
  .spacer--s{height:30dvh}
  .act[data-stage="terrace"] > .spacer--s:last-child{height:18dvh}
}

/* ==================== 32. ПРИЁМКА ВЛАДЕЛЬЦА 12.08.2026 ====================
   Десять пунктов по скриншотам с MacBook и iPad. Общие рецепты (из ресёрча
   по scrim-градиентам и стыкам секций), применённые единообразно:
     • первый экран = 100vh с подменой на 100svh (svh стабильнее dvh: не
       «дышит» при скрытии панелей браузера и не оставляет светлый хвост);
     • направленный скрим со стороны текста 25–45 % вместо затемнения кадра
       целиком (NN/g «Ensure High Contrast for Text Over Images», Smashing
       «Designing Accessible Text Over Images») + слабая тень текста;
     • кадр отражаем контейнером, а не <img>: transform картинки занят
       параллаксом/скрабом (app.js §7, home.js §2) — scaleX его бы затёр. */

/* ---- 32.1 Первый экран заканчивается ровно у низа вьюпорта ----
   Было: .hero--page{min-height:clamp(560px,92svh,1040px)} — 8 % экрана
   оставались под кадром светлой полосой (скриншоты 20:14, 20:34, 20:35).
   Порядок объявлений — фолбэк vh, затем svh для поддерживающих браузеров. */
.hero,.hero--page{min-height:100vh;min-height:100svh}
/* Ландшафт телефона: экран ниже 560px — первый экран отпускаем по содержимому
   (повтор правила §27.8a: оно объявлено ВЫШЕ и иначе проиграло бы порядку). */
@media (orientation:landscape) and (max-height:560px){
  .hero,.hero--page{min-height:auto}
}

/* ---- 32.2 Внутренние hero: направленный скрим со стороны текста ----
   Текст всех внутренних первых экранов прижат влево, поэтому подложка косая
   и слева. К 88 % ширины она уже прозрачная — правый край кадра не темнеет.
   Страница «Технология» имеет собственный, более плотный вариант (§31.1) —
   он выигрывает по специфичности и не переопределяется. */
.hero--page .hero__media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(10,12,8,.46) 0%,rgba(10,12,8,.30) 34%,
    rgba(10,12,8,.10) 66%,rgba(10,12,8,0) 88%);
}
.hero--page .hero__ttl,.hero--page .hero__sub{text-shadow:0 1px 3px rgba(10,12,8,.34)}
@media (max-width:900px){
  /* На узком экране текст идёт во всю ширину — подложка становится вертикальной. */
  .hero--page .hero__media::before{
    background:linear-gradient(180deg,
      rgba(10,12,8,.34) 0%,rgba(10,12,8,.42) 38%,rgba(10,12,8,.5) 100%);
  }
}

/* ---- 32.2a Отзеркаливание кадров, где «пустая» сторона не совпала с текстом ----
   projects: дом стоит слева, под текстом; озеро и трава — справа, впустую.
   contacts: слева освещённая изнутри гостиная (белый текст тонул), справа
   тёмный лес и терраса. Отражаем КОНТЕЙНЕР, вуали отражаем обратно. */
.page-projects .hero--page .hero__media,
.page-contacts .hero--page .hero__media{transform:scaleX(-1)}
.page-projects .hero--page .hero__media::before,
.page-projects .hero--page .hero__media::after,
.page-contacts .hero--page .hero__media::before,
.page-contacts .hero--page .hero__media::after{transform:scaleX(-1)}

/* ---- 32.3 Фиксированная сцена главной: кадр под текстовым актом ----
   Акт «01 Формат» (слой fog): дом занимал центр и левую треть — ровно там,
   где стоит текст, а пустое туманное поле оставалось справа. Отражаем слой
   (img нельзя: его scale/filter каждый кадр пишет home.js §2) и кладём косой
   скрим со стороны текста, отражённый обратно. */
.stage__layer[data-layer="fog"]{transform:scaleX(-1)}
.stage__layer::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
}
.stage__layer[data-layer="fog"]::after{
  transform:scaleX(-1);
  background:linear-gradient(100deg,
    rgba(10,12,8,.42) 0%,rgba(10,12,8,.26) 36%,
    rgba(10,12,8,.08) 68%,rgba(10,12,8,0) 90%);
}
/* Акт «04 Материал» (слой beam): текст справа. Кадр НЕ отражаем — слева цеха
   окна во всю стену, при отражении они встали бы ровно под белый текст.
   Читаемость даёт зеркальный по направлению скрим. */
.stage__layer[data-layer="beam"]::after{
  background:linear-gradient(260deg,
    rgba(10,12,8,.44) 0%,rgba(10,12,8,.28) 36%,
    rgba(10,12,8,.08) 68%,rgba(10,12,8,0) 90%);
}
@media (max-width:900px){
  /* Оверлеи на узком идут во всю ширину — косой скрим заменяем ровным. */
  .stage__layer[data-layer="fog"]::after,
  .stage__layer[data-layer="beam"]::after{
    background:linear-gradient(180deg,
      rgba(10,12,8,.26) 0%,rgba(10,12,8,.34) 40%,rgba(10,12,8,.4) 100%);
  }
}

/* ---- 32.4 Секция .zoomsec: фотография — фон ВСЕГО блока ----
   Было: кадр 16:10 стоял колонкой в потоке, подпись под ним; между фото и
   краями секции оставались бумажные поля (владелец: «сделать не картинкой
   в колонке, а фоном всего блока»). Стало: фигура растянута на всю секцию,
   заголовок сверху, подпись и кнопка снизу — поверх кадра, с мягким скримом
   слева-снизу. Разметка не менялась. Затрагивает #ladoga (главная, «03
   Проект месяца — Ладога») и #beam («Технология», «01 Материал»). */
.zoomsec{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;
  min-height:clamp(520px,60vw,860px);
  padding-bottom:0;
}
.zoomsec>.wrap{position:relative;z-index:2}
/* .zoomsec__pin намеренно БЕЗ position/z-index: иначе он стал бы containing
   block для .zoomfig (кадр начинался бы под заголовком) и поднял бы фигуру
   над скримом собственным контекстом наложения. */
.zoomsec__pin{
  position:static;z-index:auto;
  flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(48px,7vw,110px);
}
.zoomcap{position:relative;z-index:2}
.zoomfig{
  position:absolute;inset:0;z-index:0;
  width:auto;max-width:none;margin:0;aspect-ratio:auto;
  background:var(--ink);
}
.zoomfig img{width:100%;height:100%;object-fit:cover}
/* Скрим: эллиптическое пятно у левого края (там стоят и заголовок, и подпись)
   плюс лёгкое утяжеление низа. Пятно, а не сплошная вуаль: правая половина
   кадра остаётся в полной яркости — владелец просил не затемнять фото. */
.zoomsec::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(130% 108% at 0% 55%,
      rgba(10,12,8,.7) 0%,rgba(10,12,8,.48) 30%,
      rgba(10,12,8,.16) 60%,rgba(10,12,8,0) 84%),
    linear-gradient(180deg,rgba(10,12,8,.44) 0%,rgba(10,12,8,.06) 30%,
      rgba(10,12,8,.04) 56%,rgba(10,12,8,.38) 100%);
}
.zoomsec .eyebrow{color:var(--brass-lt)}
.zoomsec .eyebrow .num{color:rgba(242,239,232,.72)}
.zoomsec .eyebrow::after{background:var(--line-inv)}
.zoomsec .d2,.zoomsec .d4{color:var(--paper)}
.zoomsec em{color:var(--brass-lt)}
.zoomcap{color:var(--paper)}
.zoomcap .lede{color:rgba(242,239,232,.84)}
.zoomsec .d2,.zoomsec .d4,.zoomcap .lede{text-shadow:0 1px 3px rgba(10,12,8,.34)}
/* Кнопка внутри кадра — светлая (в разметке стоит обычный .btn). */
.zoomsec .btn{color:var(--paper);border-color:rgba(242,239,232,.5)}
.zoomsec .btn::before{background:var(--paper)}
.zoomsec .btn:hover,.zoomsec .btn.is-tap{color:var(--ink);border-color:var(--paper)}
.zoomsec .btn-note{color:rgba(242,239,232,.8);text-shadow:0 1px 20px rgba(10,12,8,.7)}
.zoomsec .btn-note svg{color:var(--brass-lt)}
@media (max-width:900px){
  /* Узкий экран: текст во всю ширину — скрим ровный сверху вниз. */
  .zoomsec{min-height:clamp(480px,110vw,760px)}
  .zoomsec::after{
    background:linear-gradient(180deg,
      rgba(10,12,8,.52) 0%,rgba(10,12,8,.44) 38%,rgba(10,12,8,.62) 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  /* Кадр остаётся фоном и здесь: он не анимирован, снимать нечего. */
  .zoomsec{min-height:clamp(460px,54vw,760px)}
}

/* ---- 32.5 Цифры: число упиралось в декоративную полоску ----
   .stat:first-child обнулял левый отступ, а .stat__bar остаётся на left:0 —
   «640» и «42 000 м³» начинались в 3–4px от латунной черты, тогда как у
   соседних колонок зазор 28px. Даём первой ячейке (и третьей на двухколоночной
   раскладке) собственный отступ и укорачиваем черту по вертикали. */
.stat:first-child{padding-left:clamp(16px,1.5vw,24px)}
.stat__bar{top:.16em;bottom:.16em}
@media (max-width:1180px){
  .stat:nth-child(odd){padding-left:clamp(16px,1.5vw,24px)}
}
@media (max-width:640px){
  /* Черта становится горизонтальной над ячейкой — отступ слева не нужен. */
  .stat,.stat:first-child,.stat:nth-child(odd){padding-left:0!important}
  .stat__bar{top:0;bottom:auto}
}

/* ---- 32.6 Лукбук на промежуточных ширинах (MacBook 1280×800, iPad) ----
   Симптом: подписи карточек срезаны нижним краем закреплённой сцены
   (скриншот 14:43:40). Причина: .hstage.is-pinned{height:100dvh} с колонкой
   «кадр 3:4 + подпись + счётчик + прогресс + кнопка», а ширина карточки
   бралась как min(26vw,42vh) — при 42vh кадр один занимает 56vh, и на
   экранах 700–860px высоты сумма выходила за экран.
   Правка: ширину считаем от высоты жёстче (34vh → кадр 45vh) и добавляем
   svh-фолбэк, чтобы панели браузера не забирали высоту у сцены. */
.hstage.is-pinned{height:100vh;height:100svh}
.hstage.is-pinned .hstrip{flex:0 0 auto}
/* 34vh на кадр 3:4 = 45vh высоты картинки; вместе с подписью, счётчиком,
   отступом под шапку и кнопкой это ≤ 80 % экрана на любой высоте 600–1200px. */
.hstage.is-pinned .hcard{width:clamp(200px,min(26vw,34vh),400px)}
@media (max-width:900px){
  /* На планшете и телефоне карточек в кадре меньше — им можно быть шире,
     ограничение по высоте (36vh) остаётся тем же и не даёт срезать подпись. */
  .hstage.is-pinned .hcard{width:clamp(210px,min(44vw,36vh),400px)}
}
@media (max-height:760px){
  .hstage.is-pinned{gap:clamp(14px,2.4vh,28px)}
  .hstage.is-pinned .hcard__ttl{font-size:clamp(17px,1.5vw,22px)}
}

/* ---- 32.7 Секции-фотографии без «белого хвоста» ----
   Общая мера против резкого светлого среза под кадром: любая секция, чей фон
   — фотография, обязана иметь гибкую высоту, а не фиксированную. Ниже — те
   места сайта, где кадр стоял в жёстком боксе. */
.hero__media img,.hero__media video{min-height:100%}

/* 32.4a Узкий экран: текст .zoomsec идёт во всю ширину и неизбежно ложится на
   светлые участки кадра. Вместо того чтобы гасить фотографию целиком, даём
   тексту собственный мягкий ореол — контраст растёт локально, кадр остаётся
   ярким (NN/g: «затемняйте текст, а не изображение»). */
@media (max-width:900px){
  .zoomsec .d2,.zoomsec .d4,.zoomcap .lede{
    text-shadow:0 1px 2px rgba(10,12,8,.5),0 2px 18px rgba(10,12,8,.58);
  }
}

/* ==================== 29. Правки по фидбэку владельца 12.08.2026 ==================== */

/* 29.1 «CALL» у офисов. Мобильный оверрайд .office a{display:inline-block} (§28.4)
   гасил inline-flex у .tlink — подпись и стрелка разъезжались на две строки,
   а тап-цель оставалась 20px высотой. Возвращаем нормальную кнопку-таргет:
   44px по высоте, содержимое не переносится, ширина не выходит за колонку. */
@media (max-width:900px){
  .office .tlink{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    min-height:44px;padding:0 18px;box-sizing:border-box;max-width:100%;
    border:1px solid var(--line);border-radius:2px;white-space:nowrap;
  }
  .office .tlink::after{display:none}
  .slab--dark .office .tlink,.slab--ink .office .tlink{border-color:var(--line-inv)}
}

/* 29.2 Способы связи. На телефоне чипы разной ширины вставали лесенкой 2+2+1.
   Держим их сеткой из двух равных колонок одинаковой высоты; длинные строки
   (телефон и почта) занимают всю ширину, чтобы номер не резался. */
@media (max-width:560px){
  .msgs--chan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .msgs--chan .msg{
    min-height:44px;padding:0 12px;gap:7px;justify-content:center;
    white-space:nowrap;box-sizing:border-box;
  }
  .msgs--chan a.msg{grid-column:1/-1}
}

/* 29.3 Тап-цель текстовых кнопок в карточках каталога: 35px по высоте.
   Добираем верхним отступом, чтобы подчёркивание осталось вплотную к подписи.
   .office .tlink (§29.1) выше по специфичности — его это правило не трогает. */
@media (max-width:900px){
  .tlink{padding-top:22px}
}

/* ==================== 30. Правки по фидбэку владельца 13.08.2026 ==================== */

/* 30.1 (фото 3, 4) «ПОЗВОНИТЬ» в карточках офисов — к ПРАВОМУ краю.
   Кнопка-таргет из §29.1 стояла у левой кромки карточки, справа от неё
   пустовала вся ширина колонки. Абзац-обёртка кнопки — последний ребёнок
   .office, выключку ставим ему: на телефоне кнопка прижата вправо,
   на десктопе (сетка в три колонки) всё остаётся как было. */
@media (max-width:900px){
  .office > p:last-child{text-align:right}
}

/* 30.2 (фото 5) «Начните с разговора с архитектором» в подвале.
   БЫЛО: три жёстких <br> — три коротких строки при пустой правой половине
   экрана. СТАЛО: на телефоне переносы отключены, ограничение max-width:16ch
   снято — текст сам ложится во всю ширину колонки (две строки вместо трёх). */
@media (max-width:560px){
  .ftr__big{max-width:none;font-size:clamp(24px,7.2vw,30px)}
  .ftr__big br{display:none}
}

/* 30.3 (фото 29) Чипы-фильтры каталога проектов — УПЛОТНИТЬ.
   БЫЛО: flex с переносом, ширина по подписи: на 390 чипы вставали рваной
   лесенкой по 2 в ряд, справа гуляла пустота в 40–120 px, блок занимал
   четыре ряда по 44 px. СТАЛО: две ровные колонки, компактные поля и зазор,
   тап-цель 40 px сохранена. */
@media (max-width:560px){
  .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .tab{
    padding:9px 10px;min-height:40px;display:inline-flex;align-items:center;
    justify-content:center;text-align:center;font-size:11.5px;letter-spacing:.04em;
    line-height:1.15;
  }
  .tab .cnt{margin-left:5px}
}

/* 30.4 (фото 28) Подписи кнопок первого экрана — В ОДНУ СТРОКУ.
   Английские подписи длиннее русских: «Find out what my house would cost»
   (33 знака) при кегле 12.5px и трекинге .14em не влезала в 342 px и рвалась
   на две строки, кнопка вырастала вдвое. Кегль и трекинг делаем текучими,
   перенос запрещаем — обе подписи ложатся в строку от 360 px. */
@media (max-width:560px){
  .hero__acts .btn,.cta .btn{
    gap:10px;
    font-size:clamp(9.4px,2.7vw,12.5px);letter-spacing:.06em;
    padding-inline:clamp(12px,3.4vw,28px);
    text-wrap:balance;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   ЗАКОН ВЛАДЕЛЬЦА 13.08: ФОТО-БЛОК НА ТЕЛЕФОНЕ = ПОЛНЫЙ ЭКРАН
   Дословно: «если я говорю сделать блоки больше — сделай БОЛЬШЕ, чтобы ОДИН
   БЛОК закрывал площадь экрана телефона — одна прокрутка колеса».

   ЧТО БЫЛО (замер 390×844, 13.08):
     .zoomsec  — 480 px (57 % экрана) на «Технологии» («01 Материал — что
                 происходит внутри бруса») и 513 px (61 %) на главной
                 («03 Дом месяца — Веттерн»). Виновник — min-height:
                 clamp(480px,110vw,760px): на 390 px ширины 110vw = 429 px,
                 и работал нижний упор 480 px. Владелец обвёл оба блока
                 (фото 8, 9, 11, 12).
     .vidpause — 641 px (76 %): видеопауза «Пауза. Дальше — цифры…»
                 (#pause на главной), инлайновая высота 76dvh (фото 10).

   ЧТО СТАЛО: ровно 100 svh — снимок работает фоном ВСЕГО блока (см. §32.4)
   и теперь этот блок равен экрану телефона. svh, а не dvh: панели мобильного
   браузера кадр не режут и высота не скачет при скролле. Первой строкой —
   vh-фолбэк для движков без svh.

   .vidpause — высота задана инлайном в разметке, перебить можно только
   !important; сам инлайн НЕ удалён, он остаётся фолбэком для десктопа,
   альбома и движков без svh.

   Границы: max-width:900px + portrait — телефоны и планшет в портрете.
   Десктоп и альбомный телефон не затронуты.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px) and (orientation:portrait){
  .zoomsec{min-height:100vh;min-height:100svh}
  .vidpause{height:100vh !important;height:100svh !important}
}