/* ============================================================
   ЮЛИКОН · дизайн-система
   Светлая палитра. Тёмное — редким акцентом.
   ============================================================ */

:root{
  --white:#FFFFFF;
  --l1:#F7F7F6;
  --l2:#E7E8E8;
  --rule:#D5D3D0;
  --mute:#B6B0AC;
  --wood:#7A6B62;
  --sec:#605D5A;
  --btn:#33302D;
  --ink:#1C1512;
  --font:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --cont:1440px;
  --pad:56px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--white);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-wrap:break-word}
img,svg,iframe{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--wood);outline-offset:3px}

.w{max-width:var(--cont);margin:0 auto;
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right))}
section{padding:72px 0;position:relative}
.tight{padding:28px 0}
.l1{background:var(--l1)}
.l2{background:var(--l2)}
.dark{background:var(--ink);color:var(--white)}

h1,h2,h3{font-weight:700;letter-spacing:-.025em;line-height:1.1}
h1{font-size:clamp(30px,4vw,54px);line-height:1.08}
h2{font-size:clamp(26px,3vw,42px)}
h3{font-size:22px;letter-spacing:-.02em}
.lead{font-size:20px;line-height:1.55;color:#33302B}
.mut{color:var(--sec)}
.dark .mut,.dark .lead{color:#D8D3C8}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--wood)}
.dark .mono{color:#C6B3A5}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:14px 26px;font-size:18px;font-weight:600;font-family:var(--font);
  border:1px solid transparent;cursor:pointer;transition:.22s;white-space:nowrap}
.btn-dark{background:var(--btn);color:var(--white)}
.btn-dark:hover{background:var(--ink)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--white)}
.btn-light{background:var(--white);color:var(--ink)}
.btn-light:hover{background:var(--l2)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{border-color:var(--white)}

/* ---------- шапка ---------- */
.head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.80);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--rule);box-shadow:0 1px 0 rgba(28,21,18,.04);transition:.22s}
/* Если размытие не поддерживается — оставляем плотный фон, иначе текст ляжет на фотографии */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .head{background:var(--white)}
}
.head-top{display:flex;align-items:center;gap:24px;padding:18px 0 14px}
.logo{font-size:27px;font-weight:800;letter-spacing:.06em;line-height:1;display:block}
/* Логотип — вектор: чёткий на любом экране. Высоту задаём, ширину считает браузер. */
.logo img{display:block;height:44px;width:auto}
.logo small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  color:var(--wood);margin-top:4px;font-weight:400}
.head-sp{flex:1}
.head-r{display:flex;align-items:center;gap:20px;font-size:18px;font-weight:500}
.head-r a:hover{color:var(--wood)}
.vr{width:1px;height:22px;background:var(--rule)}
.tel{font-family:var(--mono);font-size:18px;white-space:nowrap}
/* ---------- меню для телефонов ---------- */
.mmenu{display:none}
@media(max-width:900px){
  .mmenu{display:block;position:fixed;inset:0;z-index:55;
    background:rgba(28,21,18,.34);opacity:0;pointer-events:none;transition:opacity .22s}
  .mmenu.open{opacity:1;pointer-events:auto}
  .mmenu[hidden]{display:none}
  .mmenu-in{position:absolute;top:0;right:0;bottom:0;width:min(420px,88vw);
    background:var(--white);border-left:1px solid var(--rule);
    padding:78px 0 28px;overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.8,.3,1)}
  .mmenu.open .mmenu-in{transform:none}

  .mm-top{display:flex;gap:8px;padding:0 var(--pad) 16px;border-bottom:1px solid var(--rule)}
  .mm-top a{flex:1;text-align:center;padding:13px 8px;border:1px solid var(--rule);
    font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}

  .mm-secs{list-style:none;margin:0;padding:0}
  .mm-secs li{border-bottom:1px solid var(--rule)}
  .mm-sec{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;
    padding:17px var(--pad);background:none;border:0;font:inherit;font-size:17px;font-weight:500;
    color:var(--ink);text-align:left;cursor:pointer;min-height:56px}
  .mm-sec.solo{display:block}
  .mm-arr{width:9px;height:9px;border-right:1.5px solid var(--wood);border-bottom:1.5px solid var(--wood);
    transform:rotate(45deg);transition:transform .2s;flex:none;margin-bottom:3px}
  .mm-sec[aria-expanded="true"] .mm-arr{transform:rotate(-135deg);margin-bottom:-3px}

  .mm-subs{padding:0 var(--pad) 14px;background:var(--l1)}
  .mm-subs[hidden]{display:none}
  .mm-subs a{display:flex;gap:10px;align-items:baseline;padding:12px 0;
    border-bottom:1px solid var(--rule);font-size:16px;color:var(--sec);min-height:44px}
  .mm-subs a:last-child{border-bottom:0}
  .mm-subs a i{font-family:var(--mono);font-size:11px;color:var(--wood);font-style:normal;flex:none}
  .mm-all{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink)!important;padding-top:14px!important}

  .mm-foot{padding:22px var(--pad) 0;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
  .mm-cta{width:100%;text-align:center}
  .mm-tel{font-family:var(--mono);font-size:19px;color:var(--ink)}
  .mm-tel.second{font-size:15px;color:var(--sec)}
  .mm-mail{font-family:var(--mono);font-size:13px;color:var(--sec)}

  /* пока меню открыто, страница под ним не прокручивается */
  body.mm-lock{overflow:hidden}
}

.burger{display:none;background:none;border:0;font-size:26px;cursor:pointer;padding:6px 8px;line-height:1}

/* Лента разделов: иконка над подписью, светлая полоса, без разделителей.
   Оформление взято с нижней ленты одобренного макета. */
/* Плашка разделов: по ширине контейнера — ровно от логотипа до кнопки «Заказать расчёт».
   Фон полосы тянется во всю ширину, а кнопки выровнены по контенту. */
.tiles-wrap{background:rgba(247,247,246,.28);border-top:1px solid var(--rule)}
.tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));max-width:var(--cont);width:100%;margin:0 auto;
  padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding:14px 6px 12px;
  border:0;border-bottom:2px solid transparent;cursor:pointer;transition:.2s;
  background:none;font:inherit;color:inherit;width:100%}
.tile:hover{background:rgba(255,255,255,.75)}
.tile.on,.tile.act{border-bottom-color:var(--wood);background:rgba(255,255,255,.85)}
.tile b{font-size:14px;font-weight:600;text-align:center;line-height:1.25}
.tile svg{width:32px;height:32px;transition:.2s}
.tile:hover svg,.tile.on svg,.tile.act svg{stroke:var(--wood)}

/* При прокрутке меняется только тень и линия — высота остаётся прежней.
   Изменение высоты у sticky-элемента вызывает скачок прокрутки и дрожание. */
.head.stuck{box-shadow:0 2px 14px rgba(28,21,18,.08)}

.panel{display:none;background:rgba(247,247,246,.72);border-top:1px solid var(--wood);padding:22px 0 26px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tiles-wrap{background:var(--l1)}
  .panel{background:var(--l1)}
}
.panel.on{display:block}
.panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-bottom:14px;border-bottom:1px solid var(--rule)}
.panel-h b{font-size:20px}
.panel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px;margin-top:6px}
.panel-grid a{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--l2);font-size:18px;line-height:1.3;transition:.2s}
.panel-grid a:hover{background:var(--white);border-bottom-color:var(--wood)}
.panel-grid i{font-family:var(--mono);font-size:12px;color:var(--wood);font-style:normal}

/* ---------- фоновые приёмы ----------
   Пять способов встроить фотографию. Общее правило:
   затемнение только локальное, объект на кадре остаётся виден.
   ------------------------------------------------------------ */

/* 1 · разворот: фото и текст рядом, кадр открыт целиком */
.bg-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0}
.bg-split.rev .bg-split-ph{order:-1}
.bg-split-tx{padding:56px var(--pad);display:flex;flex-direction:column;justify-content:center;min-height:460px}
.bg-split-ph{position:relative;min-height:460px;background:var(--l2)}
.bg-split-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 2 · полоса: фото во всю ширину, градиент только с одной стороны */
.bg-band{position:relative;overflow:hidden;height:360px;display:flex;align-items:center;padding:0}
.bg-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bg-band::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(28,21,18,.88) 0%,rgba(28,21,18,.62) 38%,rgba(28,21,18,.06) 72%)}
.bg-band.light::after{
  background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 40%,rgba(255,255,255,.08) 76%)}
.bg-band .w{position:relative;z-index:2;color:var(--white)}
.bg-band.light .w{color:var(--ink)}

/* 3 · колонна: вертикальный кадр во всю высоту блока, без затемнения */
.bg-col{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:stretch}
.bg-col.rev{grid-template-columns:7fr 5fr}
.bg-col.rev .bg-col-ph{order:2}
.bg-col-ph{position:relative;min-height:500px;background:var(--l2)}
.bg-col-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bg-col-tx{display:flex;flex-direction:column;justify-content:center;padding:20px 0}

/* 4 · подложка: фото под содержимым, низкая прозрачность, только фактура */
.bg-tex{position:relative;overflow:hidden}
.bg-tex>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.10}
.bg-tex.dark>img{opacity:.22}
.bg-tex>.w{position:relative;z-index:2}

/* 5 · врезка: кадр частично перекрыт светлой карточкой, объект открыт */
.bg-inset{position:relative;height:520px;display:flex;align-items:center;padding:0;overflow:hidden}
.bg-inset>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bg-inset .card{position:relative;z-index:2;background:var(--white);max-width:560px;
  padding:36px 40px;margin:0 0 0 var(--pad);border-top:2px solid var(--wood)}

/* подпись к кадру — обязательна на всех фоновых блоках */
.ph-cap{position:absolute;z-index:3;bottom:0;left:0;background:var(--white);
  border-top:1px solid var(--wood);padding:9px 14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sec)}
.ph-cap.r{left:auto;right:0}
.ph-note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mute);
  margin-top:10px;text-transform:none}

/* мокап вместо фотографии */
.mock{background:repeating-linear-gradient(135deg,var(--l2) 0 12px,var(--l1) 12px 24px);
  border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;min-height:280px}
.mock span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--wood);
  background:var(--white);border:1px solid var(--rule);padding:10px 16px;text-align:center}

/* ---------- первый экран ---------- */
/* Первый экран светлый: фотография высветлена, текст тёмный поверх.
   Кадр остаётся читаемым справа, где текста нет. */
.hero{position:relative;height:min(86vh,760px);min-height:540px;overflow:hidden;background:var(--l2)}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hero-slide.on{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 14s linear}
.hero-slide.on img{transform:none}
.hero::after{content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(100deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 30%,rgba(255,255,255,.42) 62%,rgba(255,255,255,.22) 100%)}
.hero-body{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;
  padding-bottom:70px;color:var(--ink)}
.hero-swap{max-width:760px;min-height:240px}
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wood);margin-bottom:18px}
.eyebrow::before{content:'';width:34px;height:1px;background:currentColor;flex:none}
.hero h1{color:var(--ink)}
.hero .sub{margin-top:18px;font-size:19px;max-width:46ch;color:#33302B}
.hero .cta{margin-top:30px;display:flex;gap:13px;flex-wrap:wrap}
.fade{animation:fu .7s ease both}
@keyframes fu{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.hero-ind{position:absolute;z-index:6;left:0;right:0;bottom:86px}
.hero-ind .w{display:flex;gap:30px}
.ib{background:none;border:0;padding:6px 0;cursor:pointer;text-align:left;min-width:180px;min-height:44px}
.ib .bar{display:block;height:2px;background:var(--rule);position:relative;overflow:hidden}
.ib .bar i{position:absolute;inset:0;width:0;background:var(--wood);display:block}
.ib.on .bar i{width:100%;transition:width 12s linear}
.ib span{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sec);transition:.3s}
.ib.on span,.ib:hover span{color:var(--wood)}

.hero-objs{position:absolute;z-index:6;left:0;right:0;bottom:0;
  border-top:1px solid var(--rule);background:rgba(255,255,255,.86);backdrop-filter:blur(4px)}
.hero-objs .w{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.hero-objs ul{list-style:none;display:flex;gap:22px;flex-wrap:wrap;font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sec)}
.hero-objs li{position:relative;padding-left:22px}
.hero-objs li::before{content:'';position:absolute;left:0;top:50%;width:12px;height:1px;background:var(--wood)}
.hero-objs a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wood);white-space:nowrap}

/* ---------- факты ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);background:var(--l1)}
.facts div{padding:30px 36px;border-right:1px solid var(--l2)}
.facts div:last-child{border-right:0}
.facts b{display:block;font-size:44px;font-weight:700;letter-spacing:-.02em;line-height:1}
.facts .todo{color:var(--wood)}
.facts span{display:block;font-size:18px;color:var(--sec);margin-top:6px}

/* ---------- заголовки секций ---------- */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:36px;margin-bottom:28px}
.sec-head .side{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--wood);text-align:right;line-height:1.8;flex:none}
.sec-head a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--wood);white-space:nowrap}

/* ---------- слои интерьера ---------- */
.sloi-head{max-width:820px;margin-bottom:36px}
.sloi-grid{display:grid;grid-template-columns:1fr minmax(280px,560px) 1fr;gap:32px;align-items:center}
.sloi-col{display:flex;flex-direction:column;gap:26px}
.sloi-col.r{text-align:right}
.it{background:none;border:0;padding:0 0 0 14px;cursor:pointer;color:inherit;text-align:inherit;
  border-left:1px solid var(--rule);transition:.25s;font:inherit;display:block;width:100%}
.sloi-col.r .it{padding:0 14px 0 0;border-left:0;border-right:1px solid var(--rule)}
.it .n{font-family:var(--mono);font-size:13px;color:var(--wood);display:block}
.it .t{display:block;font-size:20px;font-weight:700;margin-top:4px}
.it .d{display:block;font-size:16px;line-height:1.5;color:var(--sec);margin-top:5px;max-width:36ch}
.sloi-col.r .it .d{margin-left:auto}
.it:hover,.it.on{border-color:var(--wood)}
.it:hover .t,.it.on .t{color:var(--wood)}
#sloi-svg svg{width:100%;height:auto;overflow:visible}
.lay-g{transition:transform .4s cubic-bezier(.2,.8,.3,1),opacity .3s}
.lay-g.dim{opacity:.25}
.sloi-kick{margin-top:34px;padding-top:22px;border-top:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.sloi-kick p{font-size:17px;color:var(--sec);max-width:70ch}

/* SVG слоёв — светлая версия */
.lon{fill:rgba(122,107,98,.10);stroke:var(--ink);stroke-width:1.1}
.loff{fill:none;stroke:var(--mute);stroke-width:1;stroke-dasharray:3 5}
.in-lon{fill:rgba(122,107,98,.16);stroke:var(--ink);stroke-width:.9}
.in-loff{fill:none;stroke:var(--mute);stroke-width:.8;stroke-dasharray:2 4}
.acc-lon{fill:var(--wood);stroke:none}
.acc-loff{fill:none;stroke:var(--mute);stroke-width:.8}
.h-lon{stroke:var(--ink);stroke-width:.8}
.h-loff{stroke:var(--mute);stroke-width:.7}
.lguide{stroke:var(--rule);stroke-width:1;stroke-dasharray:3 7}

/* SVG габаритов */
.bx-face{fill:rgba(122,107,98,.10)}
.bx-edge{fill:none;stroke:var(--ink);stroke-width:1.3}
.bx-hid{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:3 5;opacity:.4}
.bx-dim{stroke:var(--wood);stroke-width:1}
.bx-ext{stroke:var(--wood);stroke-width:.7;opacity:.45;stroke-dasharray:2 4}
.bx-tx{fill:var(--wood);font-family:var(--mono);font-size:11px;text-anchor:middle}

/* ---------- таблица направлений / колонки ---------- */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink)}
.cols3>div{border-right:1px solid var(--rule);padding:24px 30px 28px 0}
.cols3>div:last-child{border-right:0;padding-right:0}
.cols3 h3{font-size:26px}
.cols3 .sub{font-size:17px;color:var(--sec);margin-top:8px;line-height:1.4}
.cols3 ul{list-style:none;margin-top:18px}
.cols3 li{display:grid;grid-template-columns:34px 1fr;gap:6px;padding:11px 0;
  border-bottom:1px solid var(--l2);font-size:17px}
.cols3 li i{font-family:var(--mono);font-size:12px;color:var(--wood);font-style:normal}

/* ---------- подразделы ---------- */
.subs{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px}
.subs li{border-bottom:1px solid var(--rule)}
.subs a{display:grid;grid-template-columns:30px 1fr 20px;gap:10px;align-items:baseline;
  padding:16px 0;transition:.22s}
.subs .n{font-family:var(--mono);font-size:12px;color:var(--wood)}
.subs .t{font-size:18px;font-weight:600;line-height:1.3}
.subs .go{font-family:var(--mono);color:var(--rule);transition:.22s;text-align:right}
.subs a:hover{border-bottom-color:var(--wood)}
.subs a:hover .t{color:var(--wood)}
.subs a:hover .go{color:var(--wood);transform:translateX(3px)}
.subs.four{grid-template-columns:repeat(4,1fr);gap:0 24px}
.subs.four .t{font-size:16px;font-weight:400;line-height:1.35}
.subs.four a{align-items:center;min-height:64px}

/* ---------- этапы ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.steps>div{background:var(--white);padding:24px 22px 28px}
.steps .hl{background:var(--l1);border-top:3px solid var(--wood)}
.steps .n{font-family:var(--mono);font-size:13px;color:var(--wood)}
.steps h3{margin-top:14px;font-size:21px}
.steps p{font-size:17px;line-height:1.5;color:var(--sec);margin-top:8px}

/* ---------- породы ---------- */
.sprow{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.sp{display:grid;grid-template-columns:200px 1fr;gap:18px;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--rule);padding:18px 8px;cursor:pointer;
  font:inherit;transition:.2s}
.sp:first-child{border-top:2px solid var(--ink)}
.sp b{font-size:24px;font-weight:700;letter-spacing:-.02em}
.sp span{font-size:17px;line-height:1.5;color:var(--sec)}
.sp:hover,.sp.on{background:var(--l1)}
.sp:hover b,.sp.on b{color:var(--wood)}
.spview{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--l2)}
.spview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.spview img.on{opacity:1}

/* ---------- карточки работ ---------- */
.masonry{columns:3;column-gap:26px}
.masonry .wcard{break-inside:avoid;margin-bottom:26px;display:inline-block;width:100%}
.offset{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
.wcard{display:block;background:var(--white);border:1px solid var(--rule);transition:.22s}
.wcard:hover{border-color:var(--wood)}
/* .ph — это <span>. Без display:block он остаётся строчным,
   обрезка и пропорции к нему не применяются. */
.wcard .ph{display:block;overflow:hidden;background:var(--l2)}
.wcard img{display:block;width:100%;transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.wcard:hover img{transform:scale(1.04)}
.wcard .b{padding:16px 20px 20px}
.wcard .cat{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--wood)}
.wcard h3{font-size:21px;margin-top:8px}
.wcard .obj{font-size:17px;color:var(--sec);margin-top:5px}
.wcard .go{font-size:17px;font-weight:600;color:var(--wood);margin-top:12px;opacity:0;transition:.3s}
.wcard:hover .go{opacity:1}

/* фильтр каталога */
.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  border-bottom:1px solid var(--rule);padding-bottom:14px;margin:22px 0 34px}
.filters a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sec);padding:10px 12px;min-height:44px;display:inline-flex;align-items:center;
  border-bottom:2px solid transparent;transition:.2s}
.filters a:hover{color:var(--ink)}
.filters a.on{color:var(--ink);border-bottom-color:var(--wood)}
.filters .cnt{margin-left:auto;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--wood)}

/* ---------- страница работы ---------- */
.crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sec);margin-bottom:22px}
.crumbs a:hover{color:var(--wood)}
.work-hero{position:relative;height:min(58vh,560px);min-height:360px;overflow:hidden;background:var(--l2);padding:0}
.work-hero img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.work-hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,15,13,.78),rgba(20,15,13,.02) 55%)}
.work-hero .cap{position:absolute;z-index:2;left:0;right:0;bottom:30px;color:var(--white)}
.work-hero .cap h1{color:var(--white);max-width:22ch;margin-top:10px}
.work-split{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center}
.work-split .ph{background:var(--l2);position:relative;min-height:420px}
.work-split .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.specs{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start}
.specs.nosvg{grid-template-columns:1fr}
/* если ни одна характеристика не заполнена — остаётся только схема */
.specs.nospecs{grid-template-columns:minmax(0,360px);justify-content:start}
.specs dl{border-top:2px solid var(--ink)}
.specs .row{display:grid;grid-template-columns:220px 1fr;gap:22px;padding:15px 0;border-bottom:1px solid var(--rule)}
.specs dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sec);padding-top:4px}
.specs dd{font-size:18px}
.todo{color:var(--wood);font-family:var(--mono);font-size:13px}
.scheme{background:var(--l1);padding:14px;border:1px solid var(--rule)}
.scheme svg{width:100%;height:auto}
.legend{list-style:none;margin-top:16px}
.legend li{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--mute);padding:4px 0}
.legend li i{width:8px;height:8px;border:1px solid var(--mute);flex:none;font-style:normal}
.legend li.on{color:var(--ink)}
.legend li.on i{background:var(--wood);border-color:var(--wood)}

.prose{max-width:760px}
.prose h3{margin:32px 0 12px}
.prose p{margin-bottom:14px;font-size:18px;line-height:1.6}

/* галерея */
/* видео с объекта */
.vid-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.vid{margin:0;border:1px solid var(--rule);background:var(--white)}
.vid video{display:block;width:100%;max-height:560px;background:var(--ink);object-fit:contain}
.vid figcaption{padding:12px 14px;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--sec);border-top:1px solid var(--rule)}

.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* Пропорцию держит контейнер, а не сама картинка: у <img> её может перебить
   собственный размер файла, и кадры вытягиваются по высоте. */
.gal a{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--l2);cursor:zoom-in;border:1px solid var(--rule)}
.gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.gal a:hover img{transform:scale(1.05)}
.lb{position:fixed;inset:0;background:rgba(20,15,13,.96);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:40px;touch-action:pan-y}
.lb[hidden]{display:none}
.lb img{max-width:92vw;max-height:84dvh;object-fit:contain}
.lb .cnt{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-family:var(--mono);
  font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.7)}
.lb button{position:absolute;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.3);
  color:var(--white);width:54px;height:54px;font-size:22px;cursor:pointer;transition:.2s}
.lb button:hover{border-color:#D9C3B2;color:#D9C3B2}
.lb .prev{left:26px;top:50%;transform:translateY(-50%)}
.lb .next{right:26px;top:50%;transform:translateY(-50%)}
.lb .close{right:26px;top:20px}

/* ---------- вопросы ---------- */
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{padding:20px 0;cursor:pointer;font-size:21px;font-weight:700;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);font-size:20px;color:var(--wood);flex:none}
.faq details[open] summary::after{content:'–'}
.faq .ans{padding:0 0 22px;max-width:72ch;font-size:17px;line-height:1.6;color:var(--sec)}

/* ---------- форма ---------- */
.form-sec{background:var(--ink);color:var(--white);padding:72px 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.form-sec h2{color:var(--white)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.f{display:block}
.f.full{grid-column:span 2}
.f input,.f select,.f textarea{width:100%;background:var(--white);color:var(--ink);border:0;
  padding:16px 18px;font-size:18px;font-family:var(--font);border-radius:0}
.f textarea{min-height:96px;resize:vertical}
.f input::placeholder,.f textarea::placeholder{color:var(--sec)}
.file{grid-column:span 2;border:1px dashed var(--mute);padding:16px 18px;font-size:18px;color:#D8D3C8}
.file input{color:#D8D3C8;font-size:16px;margin-top:8px}
.check{display:flex;gap:12px;align-items:center;margin-top:18px;font-size:18px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--wood)}
.agree{font-size:15px;color:#B9B3A9;margin-top:14px;max-width:56ch}
.agree a{color:#D8D3C8;text-decoration:underline}
.msg{border:1px solid var(--wood);padding:16px 20px;margin-bottom:20px;font-size:17px}
.msg.err{border-color:#C4715A;color:#E8B2A0}
.hp{position:absolute;left:-9999px}

/* ---------- подвал ---------- */
.foot{background:var(--l2);border-top:1px solid var(--rule);padding:52px 0 26px}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1.3fr 1.1fr;gap:40px}
.foot h4{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wood);font-weight:400;margin-bottom:14px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:18px}
.foot a:hover{color:var(--wood)}
.foot .slogan{font-size:18px;color:#33302B;margin-top:12px}
.foot .req{font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--wood);margin-top:18px}
.foot .tels{display:flex;gap:20px;font-family:var(--mono);font-size:18px;flex-wrap:wrap}
.foot .lbl{font-size:17px;color:var(--sec);margin-top:16px}
.foot .addr{font-size:17px;margin-top:4px;max-width:36ch}
.foot-bot{display:flex;justify-content:space-between;gap:20px;margin-top:38px;padding-top:20px;
  border-top:1px solid var(--rule);font-size:17px;color:var(--sec);flex-wrap:wrap}

/* ---------- реквизиты, пустое, карта ---------- */
.req-tbl{border-top:2px solid var(--ink);max-width:840px}
.req-tbl .row{display:grid;grid-template-columns:280px 1fr;gap:22px;padding:14px 0;border-bottom:1px solid var(--rule)}
.req-tbl dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sec);padding-top:4px}
.req-tbl dd{font-size:18px}
.empty{border:1px solid var(--rule);padding:48px;text-align:center;background:var(--l1)}
.empty h3{margin-bottom:10px}
.map{position:relative;min-height:380px;background:var(--l2);border:1px solid var(--rule)}
.map iframe{width:100%;height:100%;min-height:380px;border:0;filter:grayscale(.4) contrast(1.03);transition:filter .35s}
.map:hover iframe{filter:none}
.addr-card{border-top:2px solid var(--ink);padding-top:18px}
.addr-card h3{font-size:22px;margin-top:8px}
.addr-card .go{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--wood);margin-top:10px;display:inline-block}

.offer{background:var(--wood);color:var(--white);padding:16px 0;text-align:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--white);padding:12px 20px;z-index:100}
.skip:focus{left:0}
.reveal{opacity:0;transform:translateY(10px)}
.reveal.in{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease}

/* ---------- адаптив ---------- */
@media(max-width:1280px){
  :root{--pad:36px}
  .sloi-grid{grid-template-columns:1fr minmax(240px,460px) 1fr;gap:20px}
  .specs{grid-template-columns:1fr 300px;gap:32px}
}
@media(max-width:1150px){ .head .tel{display:none} }
@media(max-width:1100px){
  section{padding:44px 0}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .tile svg{width:28px;height:28px}
  .panel-grid{grid-template-columns:repeat(2,1fr)}
  .bg-split,.bg-col,.bg-col.rev,.work-split,.form-grid,.sprow,.specs{grid-template-columns:1fr;gap:26px}
  .bg-col.rev .bg-col-ph,.bg-split.rev .bg-split-ph{order:0}
  .bg-split-tx{padding:36px var(--pad)}
  .cols3{grid-template-columns:1fr}
  .cols3>div{border-right:0;border-bottom:1px solid var(--rule);padding:22px 0}
  .subs{grid-template-columns:repeat(2,1fr)}
  .subs.four{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .masonry{columns:2}
  .offset{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(3,1fr)}
  .facts{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px}
  .sec-head .side{text-align:left}
}
@media(max-width:900px){
  .head-top{gap:14px}
  .burger{display:block;z-index:60;position:relative}
  .head-top .btn{display:none}
  /* Плашка разделов и выпадающие панели заменяются меню-бургером:
     на узком экране они занимали пол-экрана и перекрывали содержимое. */
  .tiles-wrap,.panel{display:none !important}
  .hnav{display:none}
  .hero-body{padding-bottom:150px}
  .hero-ind .w{gap:12px}
  .ib{min-width:0;flex:1}
  .hero-objs ul li:nth-child(n+4){display:none}
  .sloi-grid{grid-template-columns:1fr}
  .sloi-col.r{text-align:left}
  .sloi-col.r .it{padding:0 0 0 14px;border-left:1px solid var(--rule);border-right:0}
  .sloi-col.r .it .d{margin-left:0}
  #sloi-svg svg{max-width:460px;margin:0 auto}
  .specs .row,.req-tbl .row{grid-template-columns:1fr;gap:4px}
  .gal{grid-template-columns:repeat(2,1fr)}
  .vid-grid{grid-template-columns:1fr;gap:16px}
  .lb{padding:14px}
  .lb button{width:46px;height:46px}
  .lb .prev{left:8px}.lb .next{right:8px}.lb .close{right:8px;top:8px}
}
@media(max-width:620px){
  :root{--pad:18px}
  section{padding:36px 0}
  body{font-size:17px}
  .panel-grid,.subs,.subs.four{grid-template-columns:1fr}
  .steps,.facts{grid-template-columns:1fr}
  .masonry{columns:1}
  .fields{grid-template-columns:1fr}
  .f.full,.file{grid-column:span 1}
  .foot-grid{grid-template-columns:1fr}
  .hero .cta .btn{flex:1 1 100%}
  .hero-objs ul li:nth-child(n+3){display:none}
  .bg-inset .card{margin:0 var(--pad);max-width:none}
  .empty{padding:30px 18px}
  /* миниатюры этапов: пять в ряд на телефоне слишком мелкие */
  .proc-thumbs{grid-template-columns:repeat(4,1fr);max-height:none}
  .specs.nospecs{grid-template-columns:1fr}
  /* на телефоне галерея в две колонки, но кадры не должны стать марками */
  .gal{gap:10px}
  /* пальцем в мелкую ссылку не попасть — расширяем зоны нажатия */
  .foot ul{gap:2px}
  .foot ul a{display:inline-block;padding:9px 0}
  .foot-bot a,.crumbs a{display:inline-block;padding:4px 0}
}
@media(max-width:900px){
  /* на узком экране текст занимает всю ширину — градиент сверху вниз */
  .hero::after{background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 46%,rgba(255,255,255,.55) 100%)}
}
@media(max-height:520px) and (orientation:landscape){
  .hero{min-height:440px}
  .hero-body{padding-bottom:130px}
  .hero .sub{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .hero-slide img{transform:none !important}
}
@media print{
  .head,.hero-ind,.hero-objs,.form-sec,.foot,.burger,.lb,.panel{display:none !important}
  body{background:#fff;color:#000;font-size:12pt}
  .dark,.l1,.l2{background:#fff !important;color:#000 !important}
}

/* ---------- модальное окно ---------- */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal-back{position:absolute;inset:0;background:rgba(20,15,13,.72);backdrop-filter:blur(3px)}
.modal-box{position:relative;z-index:2;background:var(--white);width:100%;max-width:620px;
  max-height:calc(100dvh - 48px);overflow-y:auto;padding:40px 42px 34px;border-top:3px solid var(--wood);
  animation:mup .3s cubic-bezier(.2,.8,.3,1) both}
@keyframes mup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:12px;right:12px;width:44px;height:44px;background:none;border:0;
  color:var(--sec);font-size:20px;cursor:pointer}
.modal-x:hover{color:var(--wood)}
.modal .f input,.modal .f select,.modal .f textarea{border:1px solid var(--rule);background:var(--white)}
.modal-alt{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);font-size:17px;color:var(--sec)}
.modal-alt a{font-family:var(--mono);color:var(--wood)}
.modal-state[hidden]{display:none}
body.modal-open{overflow:hidden}
@media(max-width:620px){
  .modal{padding:0;align-items:flex-end}
  .modal-box{max-width:none;max-height:92dvh;padding:30px 18px 24px}
}

/* ============================================================
   ДОПОЛНИТЕЛЬНЫЕ ПРИЁМЫ ФОНА
   ============================================================ */

/* 6 · диптих: два кадра рядом с общей подписью снизу */
.bg-duo{display:grid;grid-template-columns:1.25fr 1fr;gap:2px;background:var(--rule)}
.bg-duo figure{position:relative;background:var(--l2);min-height:400px;overflow:hidden}
.bg-duo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.3,1)}
.bg-duo figure:hover img{transform:scale(1.03)}
.bg-duo figcaption{position:absolute;left:0;bottom:0;background:var(--white);border-top:1px solid var(--wood);
  padding:9px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sec)}

/* 7 · кадр в поле: фотография с воздухом вокруг на плотном светлом фоне */
.bg-frame{background:var(--l2);padding:56px 0}
.bg-frame .inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.bg-frame .ph{position:relative;background:var(--white);padding:14px;border:1px solid var(--rule)}
.bg-frame .ph img{width:100%;display:block}
.bg-frame .ph .ph-cap{left:14px;bottom:14px;border:1px solid var(--rule);border-top-color:var(--wood)}

/* 8 · лента: три кадра в ряд, каждый со своей подписью */
.bg-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--rule)}
.bg-strip figure{position:relative;background:var(--l2);height:300px;overflow:hidden}
.bg-strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.3,1)}
.bg-strip figure:hover img{transform:scale(1.04)}
.bg-strip figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,.94);
  border-top:1px solid var(--wood);padding:9px 14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sec)}

@media(max-width:1100px){
  .bg-duo{grid-template-columns:1fr}
  .bg-duo figure{min-height:300px}
  .bg-frame .inner{grid-template-columns:1fr;gap:26px}
  .bg-strip{grid-template-columns:1fr}
  .bg-strip figure{height:240px}
}

/* ---------- до / после: перетаскиваемый разделитель ---------- */
.ba{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--l2);
  cursor:ew-resize;user-select:none;touch-action:pan-y;border:1px solid var(--rule)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .top{clip-path:inset(0 0 0 var(--x,50%))}
.ba .bar{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--white);
  box-shadow:0 0 0 1px rgba(28,21,18,.25)}
.ba .knob{position:absolute;top:50%;left:var(--x,50%);transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:var(--white);border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:16px;pointer-events:none}
.ba .tag{position:absolute;top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;padding:7px 12px;z-index:3}
.ba .tag.l{left:14px;background:var(--white);color:var(--ink);border:1px solid var(--rule)}
.ba .tag.r{right:14px;background:var(--ink);color:var(--white)}
.ba-hint{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mute);margin-top:10px}

/* карточки работ: не даём фотографии распухнуть */
.offset .wcard .ph{position:relative;aspect-ratio:4/3;overflow:hidden}
.offset .wcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.masonry .wcard img{max-height:520px;object-fit:cover;object-position:center}
@media(max-width:620px){ .masonry .wcard img{max-height:400px} }


/* подпись кадра в первом экране — над строкой объектов */
.hero .ph-cap{bottom:56px;z-index:6}
@media(max-width:900px){ .hero .ph-cap{display:none} }


/* ============================================================
   ИСПРАВЛЕНИЯ ВЁРСТКИ
   ============================================================ */

/* Контейнер внутри flex-родителя сжимается по содержимому и встаёт по центру:
   автоматические поля в поперечной оси отменяют растягивание. */
.hero-body > .w,
.bg-band > .w{width:100%;flex:0 0 auto}

/* Обёртка карточки была inline-элементом — пропорция и абсолютное
   позиционирование к ней не применялись, поэтому фотографии не занимали места. */
.wcard .ph{display:block}
.wcard .b{display:block}
.wcard .cat{display:block}

/* Разворот выравнивается по общей сетке страницы, а не по краю окна */
.bg-split{max-width:none;margin:0}
.bg-split-tx{padding:48px 48px 48px 0}
.bg-split.rev .bg-split-tx{padding:48px 0 48px 48px}
@media(max-width:1100px){
  .bg-split-tx,.bg-split.rev .bg-split-tx{padding:32px 0}
}

/* Колонки «Полный цикл»: воздух между линейками, цифрами и текстом */
.cols3{gap:0 40px}
.cols3>div{padding:26px 0 30px;border-right:0;position:relative}
.cols3>div::after{content:'';position:absolute;top:0;bottom:0;right:-20px;width:1px;background:var(--rule)}
.cols3>div:last-child::after{display:none}
.cols3 li{grid-template-columns:38px 1fr;gap:8px;padding:13px 0;align-items:baseline}
.cols3 li i{padding-top:2px}
.cols3 .sub{margin-top:10px;margin-bottom:4px}

/* Полоса: текст прижат влево и не расползается */
.bg-band .w{text-align:left}
.bg-band h2{max-width:20ch}

/* Производство: карта и адреса, без наезда на край */
.prod{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule)}
.prod-tx{padding:40px 44px;display:flex;flex-direction:column;justify-content:center;background:var(--white)}
.prod-map{position:relative;min-height:440px;background:var(--l2)}
.prod-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:grayscale(.35) contrast(1.03);transition:filter .35s}
.prod-map:hover iframe{filter:none}
.prod-addr{border-top:1px solid var(--rule);padding-top:16px;margin-top:18px}
.prod-addr:first-of-type{border-top:0;padding-top:0;margin-top:20px}
.prod-addr h3{font-size:19px;line-height:1.35;margin-top:6px}
.prod-addr p{font-size:16px;color:var(--sec);margin-top:4px}
@media(max-width:1100px){
  .prod{grid-template-columns:1fr}
  .prod-tx{padding:28px 22px}
  .prod-map{min-height:320px}
}


/* первый экран: кадры сменяют друг друга, виден только активный.
   Первому слайду класс on проставлен в разметке — без скриптов он и останется. */
.hero-slide{opacity:0}
.hero-slide.on{opacity:1}


/* Полоса и плашка оффера: сами во всю ширину, содержимое по контейнеру */
.offer > span{display:block;max-width:var(--cont);margin:0 auto;
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));text-align:left}
.bg-duo,.bg-strip{margin-top:0}

/* ============================================================
   НАПРАВЛЕНИЯ: крупная цифра, иконка, список без нумерации
   ============================================================ */
.dirs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink)}
.dir{position:relative;padding:34px 34px 30px;overflow:hidden;transition:background .25s}
.dir + .dir{border-left:1px solid var(--rule)}
.dir:hover{background:var(--l1)}

/* крупная контурная цифра — уходит за верхний край */
.dir-num{position:absolute;top:-26px;right:14px;font-size:130px;font-weight:800;line-height:1;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--rule);pointer-events:none;
  transition:.3s;user-select:none}
.dir:hover .dir-num{-webkit-text-stroke-color:var(--wood)}

.dir-ico{display:block;margin-bottom:16px}
.dir-ico svg{transition:stroke .25s}
.dir:hover .dir-ico svg{stroke:var(--wood)}

.dir h3{font-size:27px;position:relative;z-index:2}
.dir-sub{font-size:17px;line-height:1.45;color:var(--sec);margin-top:8px;max-width:34ch;
  padding-bottom:18px;border-bottom:1px solid var(--rule)}
.dir ul{list-style:none;margin-top:16px}
.dir li{position:relative;padding-left:20px;font-size:17px;line-height:1.45;margin-bottom:11px}
.dir li::before{content:'';position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--wood)}
.dir-cta{margin-top:24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.dir-more{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--wood)}
.dir-more:hover{color:var(--ink)}

@media(max-width:1100px){
  .dirs{grid-template-columns:1fr}
  .dir{padding:28px 0 26px}
  .dir + .dir{border-left:0;border-top:1px solid var(--rule)}
  .dir-num{font-size:96px;top:-14px;right:0}
}

/* ============================================================
   ПАРТНЁРСТВО
   ============================================================ */
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink)}
.perk{padding:28px 30px 30px 0;position:relative}
.perk:nth-child(3n){padding-right:0}
.perk::after{content:'';position:absolute;top:0;bottom:0;right:15px;width:1px;background:var(--rule)}
.perk:nth-child(3n)::after{display:none}
.perk + .perk{}
.perks .perk:nth-child(n+4){border-top:1px solid var(--rule)}
.perk .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--wood)}
.perk h3{font-size:21px;margin-top:10px}
.perk p{font-size:17px;line-height:1.5;color:var(--sec);margin-top:8px}

.schemes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.scheme-card{border:1px solid var(--rule);padding:28px 26px 30px;background:var(--white);transition:.25s;
  display:flex;flex-direction:column}
.scheme-card:hover{border-color:var(--wood);background:var(--l1)}
.scheme-card .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--white);background:var(--btn);padding:5px 10px;align-self:flex-start}
.scheme-card h3{font-size:24px;margin-top:16px}
.scheme-card p{font-size:17px;line-height:1.5;color:var(--sec);margin-top:10px;flex:1}
.scheme-card .val{font-size:30px;font-weight:700;letter-spacing:-.02em;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--rule)}
.scheme-card .val small{display:block;font-size:15px;font-weight:400;color:var(--sec);margin-top:4px;letter-spacing:0}

.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.flow>div{background:var(--white);padding:22px 20px 26px}
.flow .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--wood)}
.flow h3{font-size:19px;margin-top:12px}
.flow p{font-size:16px;line-height:1.5;color:var(--sec);margin-top:7px}

@media(max-width:1100px){
  .perks{grid-template-columns:1fr}
  .perk{padding:22px 0 24px;border-top:1px solid var(--rule)}
  .perk::after{display:none}
  .perks .perk:first-child{border-top:0}
  .schemes{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){ .flow{grid-template-columns:1fr} }

/* ============================================================
   ВЕРХНЯЯ СТРОКА ШАПКИ: меню и контакты
   ============================================================ */
.head-top{display:flex;align-items:center;gap:0}

/* Пункты «Работы» и «Контакты» — в языке служебных меток сайта:
   моноширинный, разрядка, латунная чёрточка перед словом. */
.hnav{display:flex;align-items:center;gap:26px;margin-right:26px}
.hnav a{position:relative;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sec);padding:8px 0;transition:color .22s}
.hnav a::before{content:'';width:0;height:1px;background:var(--wood);transition:width .25s ease}
.hnav a:hover,.hnav a.on{color:var(--ink)}
.hnav a:hover::before,.hnav a.on::before{width:16px}

/* Контакты: два телефона в строку и почта под ними */
.hcont{display:flex;flex-direction:column;align-items:flex-end;gap:3px;
  padding:0 22px;margin-right:20px;border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
.hcont-tels{display:flex;align-items:center;gap:10px}
.hcont-tels a{font-family:var(--mono);font-size:17px;color:var(--ink);white-space:nowrap;transition:color .2s}
.hcont-tels a:hover{color:var(--wood)}
.hcont-tels a.second{font-size:14px;color:var(--sec)}
.hcont-tels .dot{width:3px;height:3px;background:var(--wood);flex:none}
.hcont-mail{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--sec);transition:color .2s}
.hcont-mail:hover{color:var(--wood)}

@media(max-width:1400px){
  .hcont-tels a.second{display:none}
  .hcont-tels .dot{display:none}
}
@media(max-width:1200px){
  .hcont{padding:0 16px;margin-right:14px}
  .hnav{gap:18px;margin-right:18px}
  .hcont-mail{display:none}
}
@media(max-width:900px){
  /* Телефоны и ссылки переехали в выдвижное меню, старый оверлей больше не нужен */
  .hcont{display:none}
  .hnav{display:none}
}

/* ============================================================
   БЛОК ЗАЯВКИ: глубина вместо сплошной заливки
   ============================================================ */
.form-sec{position:relative;overflow:hidden;background:#241C17;padding:76px 0 72px;
  border-top:2px solid var(--wood)}

/* макро-фактура резной накладки: даёт глубину, но не читается как картинка */
.form-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.form-bg img{width:100%;height:100%;object-fit:cover;opacity:.20;
  filter:grayscale(.45) contrast(1.05)}
.form-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(28,21,18,.94) 0%,rgba(28,21,18,.80) 45%,rgba(28,21,18,.92) 100%)}

/* тёплое свечение из-за правого края — снимает ощущение плоского чёрного */
.form-glow{position:absolute;right:-10%;top:-20%;width:820px;height:820px;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(122,107,98,.30) 0%,rgba(122,107,98,.10) 42%,transparent 70%)}

.form-sec .w{position:relative;z-index:2}

/* метка с чёрточкой, как в первом экране */
.form-lab{display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#C8B49F}
.form-lab::before{content:'';width:34px;height:1px;background:var(--wood);flex:none}

.form-sec h2{color:var(--white)}
.form-lead{margin-top:16px;max-width:52ch;font-size:19px;line-height:1.6;color:#D5CFC5}
/* подзаголовок терялся: базовый .lead почти чёрный, а фон здесь тоже почти чёрный */
.form-sec .lead,.form-sec .mut,.form-sec p{color:#D5CFC5}

/* поля: не белые кирпичи, а мягкие плашки с фокусом */
.form-sec .f input,.form-sec .f select,.form-sec .f textarea{
  background:rgba(255,255,255,.96);border:1px solid transparent;transition:.2s}
.form-sec .f input:focus,.form-sec .f select:focus,.form-sec .f textarea:focus{
  background:#fff;border-color:var(--wood);outline:none}
.form-sec .file{border-color:rgba(213,207,197,.35);background:rgba(255,255,255,.04)}

/* правая колонка: телефоны и адреса на отдельных карточках */
.form-side{border-left:1px solid rgba(213,207,197,.18);padding-left:36px}
.form-side .big{display:block;font-family:var(--mono);font-size:30px;color:#fff;margin-top:12px;
  transition:color .2s}
.form-side .big:hover{color:#E0CDB6}
.form-side .sm{display:block;font-family:var(--mono);font-size:19px;color:#C0B9AE;margin-top:8px}
.form-side .sm:hover{color:#E0CDB6}
.form-side .card{margin-top:28px;padding-top:22px;border-top:1px solid rgba(213,207,197,.18)}
.form-side .card p{font-size:18px;color:#EDE8E0;margin-top:8px}
.form-side .card .note{font-size:16px;color:#B0A99E;margin-top:4px}

@media(max-width:1100px){
  .form-side{border-left:0;padding-left:0;border-top:1px solid rgba(213,207,197,.18);padding-top:26px}
  .form-glow{display:none}
}

/* ============================================================
   БЛОК ПРО ДИЗАЙН-ПРОЕКТ
   ============================================================ */
.gift{background:var(--l2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.gift-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.gift .form-lab{color:var(--wood)}
.gift .form-lab::before{background:var(--wood)}
.gift-lead{font-size:19px;line-height:1.6;color:#33302B;margin-top:16px;max-width:46ch}
.gift-cond{font-size:17px;line-height:1.55;color:var(--sec);margin-top:18px;max-width:46ch;
  padding-left:16px;border-left:2px solid var(--wood)}
.gift-cond b{color:var(--ink);font-weight:600}

.gift-list{background:var(--white);border:1px solid var(--rule);padding:26px 28px 24px}
.gift-list ul{list-style:none;margin-top:14px}
.gift-list li{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:14px 0;
  border-top:1px solid var(--l2);align-items:baseline}
.gift-list li:first-child{border-top:0;padding-top:6px}
.gift-list li i{font-family:var(--mono);font-size:12px;color:var(--wood);font-style:normal}
.gift-list li b{display:block;font-size:18px;font-weight:600;margin-bottom:3px}
.gift-list li span{font-size:16px;line-height:1.5;color:var(--sec)}

/* строка под кнопками первого экрана */
.hero-note{margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  color:var(--sec);display:flex;align-items:center;gap:10px}
.hero-note::before{content:'';width:18px;height:1px;background:var(--wood);flex:none}

@media(max-width:1100px){
  .gift-grid{grid-template-columns:1fr;gap:28px}
  .gift-list{padding:20px 20px 18px}
}
@media(max-width:620px){
  .hero-note{font-size:11px;letter-spacing:.04em}
}

/* ============================================================
   ПОКАЗ ПРОЦЕССА ПО ЭТАПАМ
   ============================================================ */
.proc{background:var(--l1);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

.proc-stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  border-top:2px solid var(--ink);margin-bottom:24px}
.proc-st{display:flex;align-items:baseline;gap:12px;padding:16px 18px 16px 0;background:none;border:0;
  border-bottom:2px solid transparent;cursor:pointer;font:inherit;text-align:left;transition:.22s;position:relative}
.proc-st + .proc-st{padding-left:18px}
.proc-st + .proc-st::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--rule)}
.proc-st .n{font-family:var(--mono);font-size:12px;color:var(--wood)}
.proc-st .t{font-size:18px;font-weight:600}
.proc-st:hover{background:var(--white)}
.proc-st.on{border-bottom-color:var(--wood);background:var(--white)}

.proc-view{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start}
.proc-stage{position:relative;background:var(--ink);aspect-ratio:4/3;overflow:hidden;border:1px solid var(--rule)}
.proc-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .35s ease;background:var(--ink)}
.proc-stage img.on{opacity:1}
.proc-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:52px;height:52px;
  background:rgba(255,255,255,.9);border:1px solid var(--rule);color:var(--ink);font-size:24px;cursor:pointer;
  transition:.2s;line-height:1}
.proc-nav:hover{background:#fff;border-color:var(--wood);color:var(--wood)}
.proc-nav.prev{left:14px} .proc-nav.next{right:14px}
.proc-cnt{position:absolute;left:14px;bottom:14px;z-index:3;background:rgba(255,255,255,.92);
  border:1px solid var(--rule);padding:7px 12px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--sec)}

.proc-side{background:var(--white);border:1px solid var(--rule);padding:22px 24px 20px}
.proc-side p{font-size:17px;line-height:1.55;color:var(--sec);margin-top:10px;min-height:88px}
.proc-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:18px;
  max-height:260px;overflow-y:auto}
.proc-th{padding:0;border:2px solid transparent;background:var(--l2);cursor:pointer;overflow:hidden;
  aspect-ratio:3/4;transition:.2s}
.proc-th img{width:100%;height:100%;object-fit:cover;display:block}
.proc-th:hover{border-color:var(--rule)}
.proc-th.on{border-color:var(--wood)}

@media(max-width:1100px){
  .proc-stages{grid-template-columns:repeat(2,1fr)}
  .proc-view{grid-template-columns:1fr}
  .proc-side p{min-height:0}
  .proc-thumbs{grid-template-columns:repeat(8,1fr);max-height:none}
}
@media(max-width:620px){
  .proc-stages{grid-template-columns:1fr}
  .proc-st + .proc-st{padding-left:0;border-top:1px solid var(--rule)}
  .proc-st + .proc-st::before{display:none}
  .proc-thumbs{grid-template-columns:repeat(5,1fr)}
  .proc-nav{width:44px;height:44px}
}