/* ==========================================================================
   Правки по документу заказчика от 28.09.2026.
   Файл грузится последним, после skin-2026.css, — поэтому правки берут верх
   без вмешательства в существующие слои и снимаются одной строкой.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ХЕДЕР: раскрывающиеся списки + кнопка «Оставить заявку»
   -------------------------------------------------------------------------- */

.nav-links{align-items:center}
.nav-item{position:relative; display:flex; align-items:center}
.nav-item .lnk{display:inline-flex; align-items:center; gap:.42rem}

.nav-caret{
  width:6px; height:6px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:translateY(-2px) rotate(45deg); opacity:.75;
  transition:transform var(--t1) var(--e), opacity var(--t1) var(--e);
}
.nav-item.is-open .nav-caret{transform:translateY(1px) rotate(225deg); opacity:1}

/* Кнопка-стрелка нужна тачу и клавиатуре; на мыши хватает наведения. */
.nav-sub-toggle{
  position:absolute; right:-.5rem; top:0; bottom:0; width:1.6rem;
  background:none; border:0; padding:0; cursor:pointer;
}
@media (hover:hover){ .nav-sub-toggle{display:none} }

.nav-sub{
  position:absolute; top:100%; left:-1.1rem; z-index:120;
  min-width:15.5rem; padding:.55rem 0; margin-top:.55rem;
  display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:3px; box-shadow:0 18px 44px rgba(8,9,12,.42);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity 220ms var(--e), transform 220ms var(--e), visibility 220ms var(--e);
}
/* Мост от пункта до списка: иначе курсор «проваливается» в зазор. */
.nav-sub::before{content:''; position:absolute; left:0; right:0; top:-.6rem; height:.6rem}

.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub,
.nav-item.is-open .nav-sub{opacity:1; visibility:visible; transform:none}

.nav-sub a{
  padding:.62rem 1.25rem;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em;
  color:var(--paper); opacity:.78; white-space:nowrap;
  transition:color var(--t1) var(--e), opacity var(--t1) var(--e), background var(--t1) var(--e);
}
.nav-sub a:hover{opacity:1; color:var(--amber); background:rgba(186,145,55,.09)}

/* На светлой шапке список тоже светлый — иначе он выглядит чужим окном. */
.nav.solid:not(.on-light) .nav-sub{
  background:var(--paper-3); border-color:var(--line-p);
  box-shadow:0 18px 44px rgba(16,18,22,.13);
}
.nav.solid:not(.on-light) .nav-sub a{color:var(--on-paper)}
.nav.solid:not(.on-light) .nav-sub a:hover{color:var(--amber-sm-p); background:rgba(186,145,55,.1)}

/* CTA стал <button> — сбрасываем браузерные стили до вида прежней ссылки. */
button.nav-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  background:none; cursor:pointer; font-family:var(--f-mono); line-height:1;
}
button.nav-cta i{font-style:normal}

/* --------------------------------------------------------------------------
   1-бис. Поп-ап «Оставить заявку»
   -------------------------------------------------------------------------- */

body.lead-lock{position:fixed; left:0; right:0; width:100%; overflow:hidden}

.lead-modal{position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:1.2rem}
.lead-modal[hidden]{display:none}
.lead-modal__back{
  position:absolute; inset:0; background:rgba(8,9,12,.62);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity 260ms var(--e);
}
.lead-modal.is-open .lead-modal__back{opacity:1}

.lead-modal__win{
  position:relative; z-index:1; width:min(34rem, 100%);
  max-height:calc(100vh - 2.4rem); overflow:auto;
  padding:2.1rem 2.1rem 1.8rem;
  background:var(--paper-3); color:var(--on-paper);
  border:1px solid var(--line-p); border-radius:4px;
  box-shadow:0 30px 70px rgba(8,9,12,.4);
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity 260ms var(--e), transform 260ms var(--e);
}
.lead-modal.is-open .lead-modal__win{opacity:1; transform:none}

.lead-modal__x{
  position:absolute; top:.55rem; right:.75rem;
  width:2.2rem; height:2.2rem; border:0; background:none; cursor:pointer;
  font-size:1.6rem; line-height:1; color:var(--on-paper); opacity:.5;
  transition:opacity var(--t1) var(--e);
}
.lead-modal__x:hover{opacity:1}

.lead-modal__kicker{font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--amber-sm-p); margin:0 0 .5rem}
.lead-modal__win h2{margin:0 0 .6rem; font-size:1.55rem; line-height:1.15}
.lead-modal__lead{margin:0 0 1.35rem; font-size:.92rem; line-height:1.5; opacity:.78}
.lead-modal .lead-form{margin:0}

@media (max-width:560px){
  .lead-modal{padding:0; align-items:flex-end}
  .lead-modal__win{
    width:100%; max-height:92vh; border-radius:10px 10px 0 0;
    padding:1.6rem 1.15rem 1.4rem;
  }
  .lead-modal__win h2{font-size:1.3rem}
}

@media (prefers-reduced-motion:reduce){
  .lead-modal__back,
  .lead-modal__win,
  .nav-sub{transition:none}
}

/* --------------------------------------------------------------------------
   1-тер. Группы в мобильном меню
   -------------------------------------------------------------------------- */

.mm-group{position:relative}
.mm-toggle{
  position:absolute; top:0; right:0; width:3rem; height:3rem;
  background:none; border:0; cursor:pointer;
}
.mm-toggle::before,
.mm-toggle::after{
  content:''; position:absolute; top:50%; left:50%; width:12px; height:1.5px;
  background:var(--paper); transform:translate(-50%,-50%);
  transition:transform var(--t1) var(--e), opacity var(--t1) var(--e);
}
.mm-toggle::after{transform:translate(-50%,-50%) rotate(90deg)}
.mm-group.is-open .mm-toggle::after{opacity:0; transform:translate(-50%,-50%) rotate(0)}

.mm-sub{display:none; flex-direction:column; padding:0 0 .55rem 2.6rem}
.mm-group.is-open .mm-sub{display:flex}
.mm-sub a{
  padding:.44rem 0; font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.08em; color:var(--paper); opacity:.72;
}
.mm-sub a:hover{opacity:1; color:var(--amber)}

.mm-cta{
  display:flex; align-items:center; gap:1rem; width:100%;
  padding:.5rem 0; background:none; border:0; cursor:pointer;
  color:var(--amber); font-family:inherit; font-size:inherit; text-align:left;
}
.mm-cta i{font-style:normal; font-family:var(--f-mono); font-size:.62rem; opacity:.55}

/* --------------------------------------------------------------------------
   2. ГЛАВНАЯ
   -------------------------------------------------------------------------- */

/* Кнопки переехали из правого края внутрь текстовой колонки: две штуки в
   строку, под списком преимуществ. Прежние правила ставили их в столбик и
   прижимали к низу правого края — там они и висели отдельно от текста. */
.fg-home2 .h2-hero__main .h2-hero__act,
body.fg-preview .h2-hero__main .h2-hero__act{
  flex-direction:row; flex-wrap:wrap; align-self:flex-start;
  align-items:stretch; padding-bottom:0;
  margin-top:clamp(1.6rem,3vw,2.4rem); gap:.9rem;
}
.fg-home2 .h2-hero__main .h2-hero__act .fg-button{flex:0 0 auto}
/* Кнопка-поп-ап — это <button>, у нее свои браузерные стили. */
.fg-home2 .h2-hero__act button.fg-button{font-family:inherit; cursor:pointer}

@media(max-width:700px){
  .fg-home2 .h2-hero__main .h2-hero__act{flex-direction:column; gap:.7rem}
  .fg-home2 .h2-hero__main .h2-hero__act .fg-button{width:100%}
}

/* «Фабрика полного цикла»: высоты были заданы жестко (720 + 240 + 119 единиц),
   поэтому на ноутбуке нижняя лента уезжала за край экрана. На невысоких
   экранах блок ужимается по высоте окна, пропорции кадров сохраняются. */
@media(min-width:901px) and (max-height:900px){
  .fg-home2 .fg-factory{height:auto; padding-bottom:0}
  .fg-home2 .fg-factory-hero{height:clamp(320px, calc(100svh - 260px), 720px)}
  .fg-home2 .fg-factory-strip{height:clamp(120px, 22svh, 240px)}
  .fg-home2 .fg-factory-facts{height:auto}
  .fg-home2 .fg-factory-facts>div{padding-block:.9rem}
  /* Блок с картой и отзывами — та же болезнь, то же лечение. */
  .fg-home2 .fg-live-map .geo-mapwrap{height:clamp(280px, calc(100svh - 320px), 510px)}
}

/* --------------------------------------------------------------------------
   4. РЕШЕНИЯ
   -------------------------------------------------------------------------- */

/* Подстрочник стоял во второй колонке — справа от заголовка и визуально
   отдельно от него. Ставим под заголовок, как на остальных страницах. */
.solutions-page .sec-head{
  grid-template-columns:1fr; gap:.85rem; align-items:start;
  padding-bottom:clamp(1.6rem,3vw,2.4rem);
}
.solutions-page .sec-note{max-width:min(64ch,100%)}
.solutions-page .sec-head .sol-all-btn{justify-self:start; margin-top:.5rem}

/* Одинаковые вертикальные пробелы между блоками раздела. */
.solutions-page .sol-sec{margin-top:clamp(2.8rem,5.5vw,4.5rem)}
.solutions-page .sol-sec:first-of-type{margin-top:clamp(1.8rem,3.5vw,2.8rem)}

/* Кнопка «Подробнее» у каждого проекта: заказчик просил отделить ее от
   заголовка, поэтому это рамка с янтарной стрелкой, а не текстовая ссылка. */
.sol-prj__more{
  display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start;
  margin-top:.35rem; padding:.5rem 1rem;
  border:1px solid var(--line-p, #d3cdc0); border-radius:3px;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:inherit;
  transition:background var(--t1) var(--e), border-color var(--t1) var(--e), color var(--t1) var(--e);
}
.sol-prj__more i{font-style:normal; color:var(--amber, #ba9137)}
.sol-prj__card:hover .sol-prj__more{
  border-color:var(--amber, #ba9137); background:rgba(186,145,55,.1);
}

/* --------------------------------------------------------------------------
   5. БЛОГ
   -------------------------------------------------------------------------- */

/* Лента блога не грузит pages.css, поэтому крошки оставались без раскладки и
   слипались в «Главная·Блог». Раскладку выдаем здесь, цвета — от темной темы. */
body.post-type-archive-article .crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem;
  font-size:.8rem; margin-bottom:1.8rem; color:rgba(236,231,222,.62);
}
body.post-type-archive-article .crumbs a{color:inherit}
body.post-type-archive-article .crumbs a:hover{color:var(--amber, #ba9137)}
body.post-type-archive-article .crumbs b{color:var(--paper, #ece7de); font-weight:500}

/* Компактная лента по референсу заказчика (1c-prombez.ru/blog): строка текста
   вместо карточки с широкой обложкой. Обложки у статей все равно заглушечные,
   а места занимали больше половины экрана на запись. */
body.post-type-archive-article .bi-list{gap:0; margin-top:clamp(1rem,2vw,1.6rem)}
body.post-type-archive-article .bi-card{
  display:block; padding:clamp(1.1rem,2.2vw,1.6rem) 0;
  background:none; border-radius:0; overflow:visible; transform:none;
  border-bottom:1px solid rgba(236,231,222,.14);
}
body.post-type-archive-article .bi-card:first-child{border-top:1px solid rgba(236,231,222,.14)}
body.post-type-archive-article .bi-card:hover{background:none; transform:none}
body.post-type-archive-article .bi-card__ph{display:none}
body.post-type-archive-article .bi-card__foot{display:block; padding-inline:0}
body.post-type-archive-article .bi-card__body{display:flex; flex-direction:column; gap:.45rem}
body.post-type-archive-article .bi-card__meta{
  order:-1; font-size:.68rem; letter-spacing:.08em; opacity:.62;
}
body.post-type-archive-article .bi-card h2{font-size:clamp(1.08rem,1.9vw,1.4rem); line-height:1.25}
body.post-type-archive-article .bi-card__ex{
  font-size:.92rem; line-height:1.6; opacity:.72;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* --------------------------------------------------------------------------
   8. КОНТАКТЫ
   -------------------------------------------------------------------------- */

/* Форма начиналась ниже текста-лида, и справа от линии оставалась пустая
   полоса в треть экрана. Лид переехал в левую колонку, линия — на сетку,
   поэтому форма встает сразу под линией. */
.page-head:has(+ .contact-page){padding-bottom:0}
.contact-page{padding-top:0}
.contact-page .contact-grid{
  border-top:1px solid var(--line-p, #d3cdc0);
  padding-top:clamp(1.5rem,3vw,2.2rem);
  align-items:start;
}
.contact-page .contact-details .ph-lead{
  margin:0 0 clamp(1.8rem,3.5vw,2.6rem); max-width:min(46ch,100%);
}
@media(max-width:760px){
  .contact-page .contact-details .ph-lead{margin-bottom:1.4rem}
}

/* --------------------------------------------------------------------------
   9. МОБИЛКА
   -------------------------------------------------------------------------- */

/* Меню на телефоне пропадало: skin-2026.css возвращал кнопке display через
   !important, она занимала всю ширину и выталкивала бургер за край экрана.
   На узком экране кнопки в шапке нет — «Оставить заявку» лежит внутри меню. */
@media(max-width:900px){
  body.fg-preview .nav-cta.nav-cta.nav-cta,
  .nav-cta{display:none !important}
  .burger{display:block}
  .nav-right{gap:1rem}
}

/* Баннер cookie висит на fixed снизу и перекрывал кнопки под ним.
   Пока баннер показан, страница получает запас снизу ровно на его высоту. */
body:has(#virtusCookieBar:not([hidden])){padding-bottom:clamp(160px, 34vh, 260px)}
@media(min-width:761px){
  body:has(#virtusCookieBar:not([hidden])){padding-bottom:clamp(120px, 20vh, 200px)}
}

/* Плитки категорий: пока картинка грузится, у тайла была пустая белая дыра.
   Фон-заглушка и зарезервированная пропорция убирают и дыру, и сдвиг. */
body.fg-preview .h2-cat img{background:rgba(128,128,128,.12)}

/* --------------------------------------------------------------------------
   3. КАТАЛОГ
   -------------------------------------------------------------------------- */

/* Правая колонка с фактами прижималась к низу строки (align-items:end) и
   висела заметно ниже линии, пока лид слева занимал четыре строки.
   Теперь обе колонки начинаются от линии. */
body:is(.fg-catalog,.tax-project_category) .ph-row{align-items:start}

/* Заголовок «КАТАЛОГ» стоял вплотную к хлебным крошкам и далеко от
   подстрочника — сдвигаем его вниз, к тексту. */
body:is(.fg-catalog,.tax-project_category) .page-head .crumbs{margin-bottom:clamp(2.2rem,4.5vw,3.4rem)}
body:is(.fg-catalog,.tax-project_category) .page-head h1{margin-bottom:clamp(1.2rem,2.2vw,1.8rem)}

/* Пробел между текстом и блоками с дверьми был вдвое больше, чем между
   заголовком и подстрочником. Уравниваем. */
body:is(.fg-catalog,.tax-project_category) .page-head{padding-bottom:0}
body:is(.fg-catalog,.tax-project_category) .cat{padding-top:clamp(1.6rem,3vw,2.4rem)}

/* Две ссылки в карточке шли вплотную друг к другу — между ними не было
   ни отступа, ни разделителя. */
.c-actions{display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 2rem}

/* Карточка «Объектные серии» тянулась по высоте соседних карточек с фото,
   и под ссылками оставался пустой прямоугольник в пол-экрана.
   align-self:start — карточка высотой ровно по своему тексту. */
.card-note{align-self:start}

/* Заголовок карточки был мельче основного текста, а пробел под ним —
   больше, чем сам заголовок. */
.card-note .c-tag,
body.fg-preview .card-note .c-tag{
  font-size:.78rem; letter-spacing:.13em; margin-bottom:.55rem;
}
.card-note h2,
body.fg-preview .card-note h2{font-size:clamp(1.3rem,2.3vw,1.7rem); margin-bottom:.55rem}
/* У этой карточки заголовок бывает пустым — тогда он не должен занимать место. */
.card-note h2:empty{display:none; margin:0}
.card-note .c-desc{margin-top:0}

/* --------------------------------------------------------------------------
   3-бис. Страница двери: блок с фото не помещался на ноутбуке
   -------------------------------------------------------------------------- */

/* Кадр задан пропорцией 3/4, поэтому на широкой колонке он вырастал под
   730 px и вместе с шапкой не влезал в экран ноутбука. Ограничиваем высотой
   окна; object-fit:contain — чтобы изделие не подрезалось по краям
   (правило неприкосновенности продукта из фидбека 19.08). */
@media(min-width:901px){
  .door-gallery__stage{max-height:calc(100svh - 210px)}
  .door-gallery__stage img,
  .door-gallery__stage video{object-fit:contain}
}

/* Лента миниатюр вылезала за правый край кадра. Ширина в процентах от
   самой ленты — ряд всегда укладывается в колонку. */
.door-gallery__thumbs{flex-wrap:wrap; max-width:100%}
.door-gallery__thumbs button{flex:0 0 auto; width:clamp(44px,12%,64px)}

/* --------------------------------------------------------------------------
   6. ДОКУМЕНТЫ, КОНТРОЛЬ КАЧЕСТВА И ГАРАНТИЯ
   -------------------------------------------------------------------------- */

/* Подстрочник и основной текст начинались от разных левых границ, а пробел
   между ними был вдвое больше, чем между заголовком и подстрочником.
   Приводим обе левые кромки к краю .wrap и уравниваем оба пробела. */
.page-head .wrap > .ph-row{margin-inline:0; padding-inline:0}
.sol-landing > .sol-sec > .tp-body{margin-inline:0; padding-inline:0; max-width:min(78ch,100%)}
.page-head:has(+ .sol-landing) .ph-row{padding-top:clamp(1.2rem,2.2vw,1.8rem)}
.page-head:has(+ .sol-landing){padding-bottom:0}
.sol-landing > .sol-sec:first-of-type{margin-top:clamp(1.2rem,2.2vw,1.8rem)}

/* Строка с тремя тезисами шла без единого правила оформления: маркеры
   отрывались от текста, колонки разъезжались, блок не отделялся от абзацев.
   Делаем из нее нормальную полосу: линия сверху, ровные колонки, маркер
   вплотную к строке. */
.sol-bullets{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,2rem);
  margin:clamp(1.6rem,3vw,2.4rem) 0 0; padding:clamp(1.2rem,2.4vw,1.8rem) 0 0;
  border-top:1px solid var(--line-p, #d3cdc0);
  list-style:none;
}
.sol-bullets li{
  position:relative; margin:0; padding-left:1.5rem;
  font-size:.95rem; line-height:1.55; color:var(--on-paper-2, #4a4e56);
}
.sol-bullets li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:.85rem; height:1px; background:var(--amber, #ba9137);
}
@media(max-width:820px){
  .sol-bullets{grid-template-columns:1fr; gap:.85rem}
}

/* --------------------------------------------------------------------------
   6-бис. Блок со сканами документов
   -------------------------------------------------------------------------- */

.sol-docs__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2.2vw,1.8rem); margin:0; padding:0; list-style:none;
}
@media(max-width:1000px){ .sol-docs__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .sol-docs__grid{grid-template-columns:1fr} }

.sol-doc__link{
  display:flex; flex-direction:column; gap:.45rem; height:100%;
  color:inherit; text-decoration:none;
}
.sol-doc__ph{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:3/4; margin-bottom:.35rem; overflow:hidden;
  background:var(--paper-2, #e3ddd2); border:1px solid var(--line-p, #d3cdc0);
  border-radius:4px;
}
.sol-doc__ph img{width:100%; height:100%; object-fit:cover; display:block}
.sol-doc__ext{
  font-size:.72rem; letter-spacing:.18em; color:var(--amber-sm-p, #8a5a20);
}
.sol-doc__name{font-size:1rem; line-height:1.3; font-weight:500}
.sol-doc__note{font-size:.86rem; line-height:1.5; color:var(--on-paper-2, #4a4e56)}
.sol-doc__open{
  margin-top:auto; padding-top:.5rem;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber-sm-p, #8a5a20);
  transition:gap var(--t1) var(--e);
}
.sol-doc__link:hover .sol-doc__open{gap:.75rem}
.sol-doc__link:hover .sol-doc__ph{border-color:var(--amber, #ba9137)}

/* --------------------------------------------------------------------------
   3-тер. Полоса призыва растянута до футера (ответ заказчика 28.09.2026)
   -------------------------------------------------------------------------- */

/* motion.css задаёт footer.site отступ сверху и снимает его только для
   .fg-catalog и .fg-project-page. На странице двери этих классов нет, поэтому
   между тёмной полосой и тёмным футером оставалась светлая пустая полоса.
   Снимаем отступ везде, где полоса стоит прямо перед футером. */
body.fg-preview .cta-band + footer.site,
.cta-band + footer.site{margin-top:0}

/* --------------------------------------------------------------------------
   2-бис. Первый экран: раскладка по правкам заказчика 28.09.2026
   Текст начинается по левой линии логотипа в шапке, колонка обрывается до
   светящегося окна на кадре, кнопки — в правом нижнем углу, друг над другом.
   -------------------------------------------------------------------------- */

/* Шапка живёт в полосе max-width:1920 с отступом 60u (figma.css:7), на узких
   экранах — 24px и 20px. Первый экран повторяет ровно эти числа, поэтому
   заголовок встаёт на одну вертикаль с логотипом на любой ширине. */
.fg-home2{--hero-gutter:calc(60 * var(--u))}

body.fg-preview .h2-hero__inner{
  max-width:1920px; margin-inline:auto;
  padding-inline:var(--hero-gutter);
  align-items:stretch; gap:clamp(1.5rem,4vw,4rem);
}

/* Окно на снимке начинается примерно с 39% ширины кадра. Колонка текста
   ограничена 35% — строка обрывается до него и не наезжает на подсветку.
   Ограничение в процентах, а не в px: при смене ширины кадр обрезается
   пропорционально, и граница едет вместе с ним. */
body.fg-preview .h2-hero__main{flex:0 1 auto; max-width:min(35%, 660px)}
body.fg-preview .h2-hero__lead{max-width:100%}
body.fg-preview .h2-usp{max-width:100%; gap:clamp(1.2rem,2.4vh,2rem) clamp(1.2rem,2.4vw,2.2rem)}

/* Кнопки: правый нижний угол, столбиком, одинаковой ширины. */
body.fg-preview .h2-hero__act{
  flex:0 0 auto; align-self:flex-end; margin-top:auto;
  display:flex; flex-direction:column; align-items:stretch;
  gap:clamp(.7rem,1.4vh,1rem); padding-bottom:.4rem;
}
body.fg-preview .h2-hero__act .fg-button{
  width:100%; min-width:clamp(230px,19vw,310px);
  justify-content:space-between; gap:1.2rem;
}
.fg-home2 .h2-hero__act button.fg-button{font-family:inherit; cursor:pointer}

/* Планшет: кадр уже, колонке нужно больше места, но окно всё ещё правее. */
@media(max-width:1200px){
  body.fg-preview .h2-hero__main{max-width:min(40%, 520px)}
  body.fg-preview .h2-hero__act .fg-button{min-width:200px}
}

/* Узкий экран: окна на видимой части кадра уже нет — текст идёт во всю
   ширину, кнопки остаются столбиком и растягиваются на колонку.
   Отступ по краям — те же 24 и 20 px, что у шапки. */
@media(max-width:900px){
  .fg-home2{--hero-gutter:24px}
  body.fg-preview .h2-hero__inner{padding-inline:var(--hero-gutter)}
  body.fg-preview .h2-hero__main{max-width:none}
  body.fg-preview .h2-hero__act{
    align-self:stretch; margin-top:clamp(1.6rem,4vh,2.4rem); padding-bottom:0;
  }
  body.fg-preview .h2-hero__act .fg-button{min-width:0; justify-content:space-between}
}
@media(max-width:480px){
  .fg-home2{--hero-gutter:20px}
}

/* --------------------------------------------------------------------------
   2-тер. Первый экран: перебиваем центрирование из theme.css
   -------------------------------------------------------------------------- */

/* theme.css:1875 задаёт .h2-hero__inner `justify-content:center !important`,
   `align-self:center !important` и `flex:0 1 auto !important` — контейнер
   сжимался по содержимому и вставал по центру кадра. Поэтому заголовок и
   висел в 20% от левого края, а кнопки не могли уйти к нижней кромке.
   Возвращаем полосу на всю ширину и высоту кадра: текст слева, кнопки справа
   снизу. Тот же вес !important и файл грузится последним. */
body.fg-preview .h2-hero__inner,
html[data-theme="dark"] .fg-preview .h2-hero__inner{
  flex:1 1 auto !important;
  width:100% !important;
  align-self:stretch !important;
  justify-content:space-between !important;
  align-items:stretch !important;
  max-width:1920px; margin-inline:auto;
  padding-inline:var(--hero-gutter) !important;
}

/* Колонка текста обрывается до светящегося окна. Окно на кадре начинается
   с 35% ширины и слегка едет при смене пропорций кадра, поэтому граница
   выставлена с запасом — правый край строки приходится на ~33%. */
body.fg-preview .h2-hero__main,
html[data-theme="dark"] .fg-preview .h2-hero__main{
  flex:0 1 auto !important;
  max-width:min(31%, 560px) !important;
}

/* Заголовок ужимаем под эту ширину: в прежнем кегле «СНАРУЖИ СТАЛЬ,»
   в 560 px не помещалось и лезло на окно. */
body.fg-preview .fg-home2 .h2-hero h1{font-size:clamp(1.85rem, 2.5vw, 3.1rem)}

/* Кнопки — у правого поля кадра, друг над другом, по высоте на тёмной стене
   рядом с бра: ниже они наезжали на освещённое полотно двери и подсветку,
   где надписи теряли контраст.
   margin-top:auto здесь не используем — авто-поле по поперечной оси
   перебивает align-self и снова утащило бы группу к нижней кромке. */
body.fg-preview .h2-hero__act,
html[data-theme="dark"] .fg-preview .h2-hero__act{
  flex:0 0 auto !important;
  align-self:center !important;
  margin-top:0 !important;
}

@media(max-width:900px){
  /* На узком экране окна в видимой части кадра нет: текст во всю ширину,
     кнопки остаются столбиком под ним. */
  body.fg-preview .h2-hero__main,
  html[data-theme="dark"] .fg-preview .h2-hero__main{max-width:none !important}
  body.fg-preview .h2-hero__act,
  html[data-theme="dark"] .fg-preview .h2-hero__act{
    align-self:stretch !important; margin-top:clamp(1.6rem,4vh,2.4rem) !important;
  }
  body.fg-preview .fg-home2 .h2-hero h1{font-size:1.85rem}
}

/* --------------------------------------------------------------------------
   2-кватер. Кнопки первого экрана ужаты под тёмную стену на кадре
   -------------------------------------------------------------------------- */

/* Группа была шире простенка справа от двери: левый край заезжал на световую
   полосу у короба, и надпись на ней тонула. Ширину задаём самой группе, а не
   минимумом у кнопки, — обе кнопки берут её целиком и остаются одинаковыми.
   19% ширины кадра примерно соответствует простенку между подсветкой двери и
   кустами; нижняя граница 205px держит строку «РАССЧИТАТЬ СТОИМОСТЬ» в одну
   строку, у кнопок white-space:nowrap. */
body.fg-preview .h2-hero__act,
html[data-theme="dark"] .fg-preview .h2-hero__act{
  width:clamp(205px, 19%, 320px) !important;
  gap:.6rem !important;
}

body.fg-preview .h2-hero__act .fg-button,
html[data-theme="dark"] .fg-preview .h2-hero__act .fg-button{
  width:100% !important;
  min-width:0 !important;
  padding:.78rem 1.1rem !important;
  min-height:44px !important;
  font-size:.68rem !important;
  letter-spacing:.06em !important;
  gap:.7rem !important;
  justify-content:space-between !important;
}

/* На узком экране простенка в кадре нет — кнопки снова во всю колонку. */
@media(max-width:900px){
  body.fg-preview .h2-hero__act,
  html[data-theme="dark"] .fg-preview .h2-hero__act{width:100% !important; gap:.7rem !important}
  body.fg-preview .h2-hero__act .fg-button,
  html[data-theme="dark"] .fg-preview .h2-hero__act .fg-button{
    padding:.9rem 1.2rem !important; min-height:48px !important; font-size:.72rem !important;
  }
}

/* --------------------------------------------------------------------------
   2-квинквиес. Кегль надписей на кнопках первого экрана
   -------------------------------------------------------------------------- */

/* «РАССЧИТАТЬ СТОИМОСТЬ» не помещалась в кнопку: у надписей white-space:nowrap,
   поэтому строка не переносилась, а выезжала за правый край и наползала на
   стрелку. Считаем по самой узкой кнопке: при ширине группы 205px за вычетом
   полей, зазора и стрелки на текст остаётся ~150px. Двадцать заглавных знаков
   при 0.58rem и трекинге 0.04em занимают ~125px — строка укладывается с
   запасом на любые метрики шрифта.
   Кегль уменьшен у обеих кнопок: разный размер текста на соседних кнопках
   одинаковой ширины читался бы как ошибка вёрстки. */
body.fg-preview .h2-hero__act .fg-button,
html[data-theme="dark"] .fg-preview .h2-hero__act .fg-button{
  font-size:.58rem !important;
  letter-spacing:.04em !important;
  padding:.72rem 1rem !important;
  gap:.6rem !important;
}

/* Стрелка не должна сжиматься, когда строка длинная. */
body.fg-preview .h2-hero__act .fg-button > [aria-hidden="true"]{flex:0 0 auto}

@media(max-width:900px){
  body.fg-preview .h2-hero__act .fg-button,
  html[data-theme="dark"] .fg-preview .h2-hero__act .fg-button{
    font-size:.68rem !important; padding:.9rem 1.2rem !important;
  }
}

/* --------------------------------------------------------------------------
   2-sexies. Кнопки первого экрана: перебиваем утроенный класс из skin-2026
   -------------------------------------------------------------------------- */

/* Разбор: skin-2026.css задаёт `.fg-button.fg-button.fg-button` с !important
   (font-size .78rem, padding .85rem 1.6rem). Это четыре класса — больше, чем
   у моего прежнего `.h2-hero__act .fg-button`, поэтому уменьшение кегля и
   полей не применялось вовсе, и длинная надпись продолжала выезжать за край.
   Повторяем тот же утроенный класс, плюс контекст — вес выше, файл последний. */
body.fg-preview .h2-hero__act .fg-button.fg-button.fg-button,
html[data-theme="dark"] .fg-preview .h2-hero__act .fg-button.fg-button.fg-button{
  font-size:.58rem !important;
  letter-spacing:.04em !important;
  padding:.72rem 1rem !important;
  min-height:42px !important;
  gap:.6rem !important;
  justify-content:space-between !important;
  width:100% !important;
  min-width:0 !important;
  white-space:nowrap !important;
}

@media(max-width:900px){
  body.fg-preview .h2-hero__act .fg-button.fg-button.fg-button,
  html[data-theme="dark"] .fg-preview .h2-hero__act .fg-button.fg-button.fg-button{
    font-size:.68rem !important; padding:.9rem 1.2rem !important; min-height:48px !important;
  }
}

/* --------------------------------------------------------------------------
   2-septies. Кнопки первого экрана: ширина от содержимого
   -------------------------------------------------------------------------- */

/* Прежде у группы была жёсткая ширина clamp(205px,19%,320px), а у надписи
   white-space:nowrap. Если кегль по любой причине оказывался крупнее
   расчётного, строка не переносилась и не сжималась — она просто выезжала
   за край и наползала на стрелку.
   Теперь ширину диктует само содержимое: группа всегда ровно по самой
   длинной надписи, поэтому обрезать текст нечем в принципе. Размер
   регулируется кеглем, а верхний предел не даёт блоку разъехаться по стене. */
body.fg-preview .h2-hero__act,
html[data-theme="dark"] .fg-preview .h2-hero__act{
  width:auto !important;
  min-width:0 !important;
  max-width:min(26%, 340px) !important;
}

/* Подстраховка: если надпись всё же не поместится в предел, она перенесётся
   строкой и кнопка станет выше — но текст не уедет из кнопки. */
body.fg-preview .h2-hero__act .fg-button.fg-button.fg-button,
html[data-theme="dark"] .fg-preview .h2-hero__act .fg-button.fg-button.fg-button{
  white-space:normal !important;
  text-align:left !important;
}

/* --------------------------------------------------------------------------
   2-octies. Первый экран: текст поднят к верхней кромке окна на кадре
   -------------------------------------------------------------------------- */

/* theme.css:1882 центрирует .h2-hero__main по вертикали
   (`justify-content:center !important`), поэтому блок висел в середине кадра
   и его верх приходился заметно ниже светящегося проёма.
   Прижимаем к верху и отбиваем ровно настолько, чтобы первая строка
   заголовка встала на уровень верхней границы окна.
   Селектор длиннее исходного (четыре класса против двух) — иначе !important
   из theme.css снова победил бы. */
@media(min-width:901px){
  body.fg-preview .fg-home2 .h2-hero .h2-hero__main,
  html[data-theme="dark"] .fg-preview .fg-home2 .h2-hero .h2-hero__main{
    justify-content:flex-start !important;
    padding-top:clamp(1rem, 4vh, 3.5rem) !important;
  }
}

/* --------------------------------------------------------------------------
   AI-блок: чёрная полоса между кадром и формой (от 1401px)
   -------------------------------------------------------------------------- */

/* theme.css:2139 задаёт кадру `background-size: auto 100%` — снимок
   подгонялся по высоте блока и заканчивался по своей ширине. Кадр 1442x1091
   при высоте блока ~710px даёт ~940px ширины, а левая колонка на 1920 занимает
   960px: справа от снимка оставалась чёрная полоса до панели формы.
   На 901—1400px и до 900px там уже стоит cover — полосы нет только потому,
   что эта ветка выбивалась из общего правила. Приводим к тому же cover.
   Кроп идёт по вертикали: при cover снимок масштабируется по ширине, поэтому
   горизонталь не режется, а положение по Y держит дверь в кадре. */
@media(min-width:1401px){
  body.fg-preview #ai.fg-ai{
    background-size:100% 100%, cover !important;
    background-position:left center, center 42% !important;
  }
}

/* --------------------------------------------------------------------------
   2-nonies. Первый экран: верх текста ровно по верхней кромке окна
   -------------------------------------------------------------------------- */

/* Прошлая попытка отбивала текст в vh, то есть от высоты окна браузера.
   Но проём на снимке живёт в координатах самого кадра: его верхняя кромка
   приходится примерно на 18% высоты первого экрана, и при смене высоты
   браузера vh и кадр разъезжались.
   Теперь отступ — доля высоты самого блока: распорка перед текстом задана
   через flex-basis в процентах, а проценты у flex-basis в колонке считаются
   от высоты контейнера, а не от ширины (как было бы у padding).
   13.8% от высоты текстовой колонки + собственный верхний отступ полосы
   дают те самые ~18% от высоты кадра. */
@media(min-width:901px){
  body.fg-preview .fg-home2 .h2-hero .h2-hero__main,
  html[data-theme="dark"] .fg-preview .fg-home2 .h2-hero .h2-hero__main{
    justify-content:flex-start !important;
    padding-top:0 !important;
  }
  body.fg-preview .fg-home2 .h2-hero .h2-hero__main::before,
  html[data-theme="dark"] .fg-preview .fg-home2 .h2-hero .h2-hero__main::before{
    content:''; display:block; flex:0 0 13.8%; min-height:0;
  }
}

/* --------------------------------------------------------------------------
   2-decies. Кнопки первого экрана: две кнопки — одна коробка
   -------------------------------------------------------------------------- */

/* Первая кнопка — <button> (открывает поп-ап), вторая — <a> (ведёт в квиз).
   У <button> свои браузерные умолчания: шрифт не наследуется от родителя,
   свои line-height и box-sizing. Поэтому при одинаковых на вид правилах
   коробки получались разной ширины и высоты, а текст — разного кегля.
   Ниже все метрики заданы обеим явно, включая те, что обычно берутся
   по умолчанию. */
body.fg-preview .h2-hero__act,
html[data-theme="dark"] .fg-preview .h2-hero__act{
  align-items:stretch !important;
}

body.fg-preview .h2-hero__act > .fg-button.fg-button.fg-button,
html[data-theme="dark"] .fg-preview .h2-hero__act > .fg-button.fg-button.fg-button{
  box-sizing:border-box !important;
  -webkit-appearance:none !important; appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  min-width:0 !important;
  min-height:44px !important;
  padding:.72rem 1rem !important;
  gap:.6rem !important;
  font-family:'Manrope','Inter',system-ui,sans-serif !important;
  font-size:.62rem !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  letter-spacing:.05em !important;
  text-transform:uppercase !important;
  text-align:left !important;
  white-space:normal !important;
}

/* Стрелка одинаковая и не сжимается ни у той, ни у другой. */
body.fg-preview .h2-hero__act > .fg-button > [aria-hidden="true"],
html[data-theme="dark"] .fg-preview .h2-hero__act > .fg-button > [aria-hidden="true"]{
  flex:0 0 auto !important; font-size:1em !important; line-height:1 !important;
}

@media(max-width:900px){
  body.fg-preview .h2-hero__act > .fg-button.fg-button.fg-button,
  html[data-theme="dark"] .fg-preview .h2-hero__act > .fg-button.fg-button.fg-button{
    min-height:50px !important; padding:.9rem 1.2rem !important; font-size:.72rem !important;
  }
}

/* --------------------------------------------------------------------------
   2-undecies. Кнопки первого экрана: равенство через грид
   -------------------------------------------------------------------------- */

/* Выравнивание через flex + width:100% зависело от того, как каждый тег
   считает свою внутреннюю ширину: <button> и <a> приходят к разным
   значениям. Грид снимает вопрос: одна колонка задаёт общую ширину,
   grid-auto-rows:1fr — общую высоту. Размер ячейки не зависит ни от тега,
   ни от кегля, ни от длины надписи. */
body.fg-preview .h2-hero__act,
html[data-theme="dark"] .fg-preview .h2-hero__act{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-auto-rows:1fr !important;
  gap:.6rem !important;
  align-items:stretch !important;
  justify-items:stretch !important;
}

body.fg-preview .h2-hero__act > .fg-button.fg-button.fg-button,
html[data-theme="dark"] .fg-preview .h2-hero__act > .fg-button.fg-button.fg-button{
  width:auto !important;
  height:100% !important;
  margin:0 !important;
}

/* --------------------------------------------------------------------------
   2-duodecies. Кнопки первого экрана: ноутбучные ширины — ниже светильника
   -------------------------------------------------------------------------- */

/* На ноутбучных ширинах кадр обрезается так, что бра приходится ровно на
   высоту кнопок, и подсветка бьёт в верхнюю кнопку. Опускаем группу ниже
   светового пятна. Сдвиг, а не смена привязки: вертикальное выравнивание
   по центру остаётся, поэтому композиция не перестраивается.
   Диапазон 901—1600px: 1280, 1366, 1440, 1512. Ширина 1920 не затронута. */
@media(min-width:901px) and (max-width:1600px){
  body.fg-preview .h2-hero__act,
  html[data-theme="dark"] .fg-preview .h2-hero__act{
    transform:translateY(9vh) !important;
  }
}

/* --------------------------------------------------------------------------
   AI-блок: дверь в кадре + без чёрной полосы
   -------------------------------------------------------------------------- */

/* Разбор: на снимке 1442x1091 дверь занимает правую половину, левая — стена
   с бра и кусты. Пока снимок был фоном всей секции, любой cover растягивал
   его на всю ширину, и дверь оказывалась под непрозрачной панелью формы —
   в левой колонке оставалась одна стена. А прежний `auto 100%` показывал
   кадр целиком, но не дотягивался до формы и оставлял чёрную полосу.
   Решение: снимок уезжает на саму левую колонку. Она закрывается целиком
   (полосе взяться неоткуда), а привязка `right center` держит дверь у её
   правого края — там, где колонка граничит с формой.
   Бонус: пропорции колонки (примерно 1.35) почти совпадают с пропорциями
   кадра (1.322), поэтому обрезка минимальна. */
@media(min-width:901px){
  body.fg-preview #ai.fg-ai{
    background-image:none !important;
    background-color:#0a0b0d !important;
  }
  body.fg-preview #ai.fg-ai .fg-ai-copy{
    background-image:
      linear-gradient(90deg,
        rgba(10,11,13,.78) 0%,
        rgba(10,11,13,.55) 30%,
        rgba(10,11,13,.22) 60%,
        rgba(10,11,13,.06) 100%),
      url("../img/ai-door-2026-09-v4.jpg") !important;
    background-size:100% 100%, cover !important;
    background-position:center, right center !important;
    background-repeat:no-repeat, no-repeat !important;
  }
}

/* --------------------------------------------------------------------------
   2-terdecies. Кнопки первого экрана на мобильном
   -------------------------------------------------------------------------- */

/* Ограничение ширины группы `max-width:min(26%,340px)` задумывалось для
   простенка на кадре и было написано без медиазапроса — оно доехало до
   телефона и сжало кнопки до четверти экрана. Надписи при white-space:normal
   рвались на четыре строки, а стрелка при space-between наползала на текст.
   На узких экранах группа снова во всю ширину, надписи в одну строку,
   содержимое по центру. */
@media(max-width:900px){
  body.fg-preview .h2-hero__act,
  html[data-theme="dark"] .fg-preview .h2-hero__act{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    transform:none !important;
    grid-auto-rows:auto !important;
    gap:.7rem !important;
  }
  body.fg-preview .h2-hero__act > .fg-button.fg-button.fg-button,
  html[data-theme="dark"] .fg-preview .h2-hero__act > .fg-button.fg-button.fg-button{
    width:auto !important;
    height:auto !important;
    min-height:50px !important;
    padding:.9rem 1.2rem !important;
    font-size:.72rem !important;
    letter-spacing:.05em !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:nowrap !important;
    gap:.6rem !important;
  }
}

/* На совсем узких экранах длинная надпись всё же может не влезть в строку —
   там уменьшаем кегль, а не рвём строку. */
@media(max-width:400px){
  body.fg-preview .h2-hero__act > .fg-button.fg-button.fg-button,
  html[data-theme="dark"] .fg-preview .h2-hero__act > .fg-button.fg-button.fg-button{
    font-size:.66rem !important; padding:.85rem .9rem !important;
  }
}

/* --------------------------------------------------------------------------
   2-quaterdecies. Кнопки первого экрана: единая типографика
   -------------------------------------------------------------------------- */

/* theme.css задаёт двум кнопкам разную типографику двумя правилами:
     .h2-hero__act .fg-button-filled×3            -> .86rem, 700, трекинг .14em,
                                                     поля 1.3rem 2.6rem, тень;
     .h2-hero__act .fg-button×3:not(.fg-button-filled) -> .8rem, поля 1.3rem 2.2rem.
   Второе за счёт :not() весит (0,6,1) — больше моего прежнего (0,5,1),
   поэтому контурная кнопка брала кегль из theme.css, а золотая — мой.
   Отсюда и разный размер текста.
   Ниже класс повторён пять раз: (0,7,1) перекрывает оба правила. */
body.fg-preview .h2-hero__act > .fg-button.fg-button.fg-button.fg-button.fg-button,
html[data-theme="dark"] .fg-preview .h2-hero__act > .fg-button.fg-button.fg-button.fg-button.fg-button{
  padding:.78rem 1.1rem !important;
  min-height:46px !important;
  font-size:.64rem !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  letter-spacing:.06em !important;
  border-radius:4px !important;
  box-shadow:none !important;
  justify-content:space-between !important;
  gap:.6rem !important;
  white-space:nowrap !important;
}

@media(max-width:900px){
  body.fg-preview .h2-hero__act > .fg-button.fg-button.fg-button.fg-button.fg-button,
  html[data-theme="dark"] .fg-preview .h2-hero__act > .fg-button.fg-button.fg-button.fg-button.fg-button{
    padding:.9rem 1.2rem !important; min-height:50px !important; font-size:.72rem !important;
    justify-content:center !important;
  }
}
@media(max-width:400px){
  body.fg-preview .h2-hero__act > .fg-button.fg-button.fg-button.fg-button.fg-button,
  html[data-theme="dark"] .fg-preview .h2-hero__act > .fg-button.fg-button.fg-button.fg-button.fg-button{
    font-size:.66rem !important; padding:.85rem .9rem !important;
  }
}

/* --------------------------------------------------------------------------
   Отзывы на главной: карточка вылезала за пределы панели
   -------------------------------------------------------------------------- */

/* Разбор: .geo-revcard имеет жёсткую ширину clamp(17rem,26vw,22rem), а лента
   .geo-rev-track лежит в колонке, которая по умолчанию имеет min-width:auto.
   Из-за этого колонка не сжималась меньше карточки, растягивалась под неё и
   выходила за панель — при том, что у ленты стоит overflow-x:auto и она должна
   была просто прокручиваться.
   Снимаем min-width у колонки и ленты и ограничиваем карточку шириной ленты:
   одна карточка занимает колонку целиком, несколько — прокручиваются. */
body.fg-preview .geo-reviews,
body.fg-preview .geo-reviews--side,
body.fg-preview .geo-reviews-head{
  min-width:0 !important;
}
body.fg-preview .geo-rev-track{
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
}
body.fg-preview .geo-revcard{
  flex:0 0 clamp(14rem, 100%, 22rem) !important;
  max-width:100% !important;
  min-width:0 !important;
}
/* Длинная ссылка в шапке блока тоже умеет распирать колонку. */
body.fg-preview .geo-reviews-head .geo-rev-all{
  min-width:0 !important; overflow-wrap:anywhere;
}

/* --------------------------------------------------------------------------
   «Фабрика полного цикла»: белые швы между кадрами ленты
   -------------------------------------------------------------------------- */

/* Источников три:
     figma.css:95      .fg-factory-strip  gap:1px + background:#d3cdc0
     hero-doors.css:29 .fg-factory-track  gap:1px (сетка на узких экранах)
     hero-doors.css:21 .fg-factory-image  margin-right:1px (лента на десктопе)
   Светлая подложка просвечивала в этих зазорах — отсюда белая сетка.
   Убираем зазоры и меняем подложку на тон самой секции: даже если на ретине
   останется дробный шов от нецелой ширины плитки, он будет незаметен. */
body.fg-preview .fg-factory-strip,
body.fg-preview .fg-factory-track,
body.fg-preview .fg-factory-ribbon{
  gap:0 !important;
  background:#141313 !important;
}
body.fg-preview .fg-factory-ribbon .fg-factory-image,
body.fg-preview .fg-factory-image{
  margin:0 !important;
  border:0 !important;
  background:#141313 !important;
}
/* Ряд фактов под лентой собран тем же приёмом — там подложка тёмная,
   но зазор тоже лишний. */
body.fg-preview .fg-factory-facts{gap:0 !important}

/* --------------------------------------------------------------------------
   Первый экран: ширина текстовой колонки по диапазонам
   -------------------------------------------------------------------------- */

/* Ограничение 31% вводилось для широкого экрана, где окно на кадре начинается
   с 35% ширины. Но оно было задано на весь диапазон от 901px, и на узком
   десктопе давало колонку ~270px: заголовок рвался на «СНАРУЖИ / СТАЛЬ,».
   На узких ширинах кадр обрезается иначе и окно уходит за пределы видимой
   части, так что сдерживать колонку там незачем. */

/* 901—1100px: окна в кадре фактически нет — колонка во всю ширину. */
@media(min-width:901px) and (max-width:1100px){
  body.fg-preview .h2-hero__main,
  html[data-theme="dark"] .fg-preview .h2-hero__main{
    max-width:none !important;
  }
  body.fg-preview .fg-home2 .h2-hero h1{font-size:clamp(1.9rem, 4vw, 2.6rem)}
}

/* 1101—1400px: окно уже видно, но правее — колонке хватает 46%. */
@media(min-width:1101px) and (max-width:1400px){
  body.fg-preview .h2-hero__main,
  html[data-theme="dark"] .fg-preview .h2-hero__main{
    max-width:min(46%, 560px) !important;
  }
  body.fg-preview .fg-home2 .h2-hero h1{font-size:clamp(1.9rem, 3.2vw, 2.9rem)}
}

/* От 1401px остаётся прежние 31% — там окно начинается с 35% ширины. */

/* --------------------------------------------------------------------------
   Первый экран: распорка над заголовком — только там, где есть окно в кадре
   -------------------------------------------------------------------------- */

/* Распорка ::before с flex-basis 13.8% ставит верх заголовка на уровень
   верхней кромки светящегося проёма. Но она была задана от 901px, а на
   узких ширинах кадр обрезан так, что проёма в видимой части нет: там
   распорка просто съедала верх колонки и толкала текст к низу экрана.
   Оставляем её только от 1401px, где привязка к окну имеет смысл. */
@media(min-width:901px) and (max-width:1400px){
  body.fg-preview .fg-home2 .h2-hero .h2-hero__main::before,
  html[data-theme="dark"] .fg-preview .fg-home2 .h2-hero .h2-hero__main::before{
    display:none !important;
  }
  body.fg-preview .fg-home2 .h2-hero .h2-hero__main,
  html[data-theme="dark"] .fg-preview .fg-home2 .h2-hero .h2-hero__main{
    justify-content:flex-start !important;
    padding-top:clamp(.5rem, 2vh, 1.5rem) !important;
  }
}

/* На компактном адаптиве оставляем тот же авторский перенос: только две
   строки, без автоматического разрыва «СНАРУЖИ СТАЛЬ,». */
@media(max-width:900px){
  body.fg-preview .fg-home2 .h2-hero h1,
  html[data-theme="dark"] .fg-preview .fg-home2 .h2-hero h1{
    font-size:clamp(1.2rem, 4.5vw, 1.45rem) !important;
    line-height:1.02 !important;
    white-space:nowrap !important;
  }
}

/* У заголовка нет допустимого места для переноса внутри первой строки. */
body.fg-preview .fg-home2 .h2-hero h1,
html[data-theme="dark"] .fg-preview .h2-hero h1{
  white-space:nowrap !important;
}

/* --------------------------------------------------------------------------
   Компактный футер на всех адаптивах (29.09.2026)
   -------------------------------------------------------------------------- */
body.fg-preview footer.site{
  padding-top:clamp(2.5rem, 5vw, 4.5rem) !important;
  padding-bottom:1rem !important;
}
body.fg-preview footer.site .foot-top{
  gap:clamp(1rem, 2vw, 1.75rem) !important;
}
body.fg-preview footer.site .foot-brand p,
body.fg-preview footer.site .foot-col>a,
body.fg-preview footer.site .foot-msgr a,
body.fg-preview footer.site .foot-col .addr{
  font-size:clamp(.62rem, .7vw, .78rem) !important;
  line-height:1.35 !important;
  margin-bottom:.3rem !important;
}
body.fg-preview footer.site .foot-brand p{
  margin-top:.7rem !important;
}
body.fg-preview footer.site .foot-col .ttl,
body.fg-preview footer.site .foot-col .sm{
  font-size:clamp(.5rem, .52vw, .62rem) !important;
  line-height:1.3 !important;
  margin-bottom:.55rem !important;
}
body.fg-preview footer.site .foot-bot{
  margin-top:1.5rem !important;
  padding-top:.7rem !important;
  gap:.5rem !important;
  font-size:clamp(.46rem, .5vw, .58rem) !important;
  line-height:1.3 !important;
}
body.fg-preview footer.site .foot-req{
  margin-top:.4rem !important;
  font-size:clamp(.46rem, .5vw, .58rem) !important;
  line-height:1.3 !important;
}

@media(max-width:900px){
  body.fg-preview footer.site{
    padding-top:2.5rem !important;
    padding-bottom:.75rem !important;
  }
  body.fg-preview footer.site .foot-top{
    gap:1rem 1.25rem !important;
  }
  body.fg-preview footer.site .foot-brand p,
  body.fg-preview footer.site .foot-col>a,
  body.fg-preview footer.site .foot-msgr a{
    font-size:.68rem !important;
    line-height:1.3 !important;
  }
  body.fg-preview footer.site .foot-bot,
  body.fg-preview footer.site .foot-req{
    font-size:.48rem !important;
  }
}

/* --------------------------------------------------------------------------
   Первый экран: снят верхний отступ полосы на десктопе
   -------------------------------------------------------------------------- */

/* theme.css:1878 держит у .h2-hero__inner padding-block clamp(1.5rem,5vh,4rem):
   на 1080p это ~54px пустоты над заголовком поверх отступа самой колонки.
   Срезаем верхнюю часть, нижнюю оставляем — кнопки не должны липнуть к краю. */
@media(min-width:901px){
  body.fg-preview .h2-hero__inner,
  html[data-theme="dark"] .fg-preview .h2-hero__inner{
    padding-top:clamp(.4rem, 1.2vh, 1rem) !important;
    padding-bottom:clamp(1.5rem, 5vh, 4rem) !important;
  }
}

/* 901—1400px: колонка начинается сразу, без собственного отступа. */
@media(min-width:901px) and (max-width:1400px){
  body.fg-preview .fg-home2 .h2-hero .h2-hero__main,
  html[data-theme="dark"] .fg-preview .fg-home2 .h2-hero .h2-hero__main{
    padding-top:0 !important;
  }
}

/* --------------------------------------------------------------------------
   Первый экран: компактная типографика на ноутбуках (29.09.2026)
   -------------------------------------------------------------------------- */

/* В промежуточном диапазоне крупный десктопный кегль разбивал заданные две
   строки заголовка на три, а увеличенные интервалы опускали факты ниже кадра.
   Сохраняем ручной <br>, запрещаем дополнительные переносы и компактнее
   собираем весь текстовый блок. */
@media(min-width:901px) and (max-width:1400px){
  body.fg-preview .fg-home2 .h2-hero .h2-hero__main,
  html[data-theme="dark"] .fg-preview .fg-home2 .h2-hero .h2-hero__main{
    gap:clamp(.9rem, 1.8vh, 1.35rem) !important;
    transform:translateY(clamp(-1.5rem, -2.2vh, -.75rem));
  }
  body.fg-preview .fg-home2 .h2-hero h1,
  html[data-theme="dark"] .fg-preview .fg-home2 .h2-hero h1{
    font-size:clamp(1.9rem, 3vw, 2.55rem) !important;
    line-height:1.02 !important;
    white-space:nowrap;
  }
  body.fg-preview .fg-home2 .h2-hero__lead,
  html[data-theme="dark"] .fg-preview .fg-home2 .h2-hero__lead{
    margin-top:0 !important;
    font-size:clamp(.82rem, 1.25vw, .95rem) !important;
    line-height:1.5 !important;
    max-width:58ch !important;
  }
  body.fg-preview .fg-home2 .h2-usp,
  html[data-theme="dark"] .fg-preview .fg-home2 .h2-usp{
    margin-top:clamp(.15rem, .7vh, .45rem) !important;
    gap:clamp(.8rem, 1.7vh, 1.2rem) clamp(1rem, 2vw, 1.7rem) !important;
  }
  body.fg-preview .fg-home2 .h2-usp b,
  html[data-theme="dark"] .fg-preview .fg-home2 .h2-usp b{
    font-size:clamp(.78rem, 1.15vw, .88rem) !important;
  }
  body.fg-preview .fg-home2 .h2-usp span,
  html[data-theme="dark"] .fg-preview .fg-home2 .h2-usp span{
    font-size:clamp(.68rem, .95vw, .76rem) !important;
  }
}