/* ==========================================================================
   ВОСТОК-ЗАПАД — конвейерные ролики и барабаны
   Дизайн-система сайта. Один файл, без зависимостей.
   Фирменный цвет взят из логотипа: #DB5C55.
   ========================================================================== */

/* ---------- Шрифты (self-hosted, без внешних запросов) ---------- */
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/oswald-500-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/oswald-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2192,U+2212,U+FEFF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/ibm-plex-sans-400-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212,U+FEFF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/ibm-plex-sans-500-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/ibm-plex-sans-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212,U+FEFF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/ibm-plex-sans-600-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/ibm-plex-sans-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212,U+FEFF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/ibm-plex-mono-400-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212,U+FEFF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/ibm-plex-mono-500-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212,U+FEFF}

/* ---------- Токены ---------- */
:root{
  --bg:#0D1013; --bg-2:#141A1F; --surf:#181F25; --surf-2:#1E262D; --sunken:#0A0D10;
  --line:#28333B; --line-2:#3A4954;
  --ink:#E6EBEF; --ink-2:#A9B7C2; --ink-3:#7A8A96;
  --brand:#DB5C55; --accent:#EE7B70; --accent-ink:#F4A199; --accent-wash:#2A1917;
  --ok:#6FBF95; --warn:#D5A254;
  --r:3px;
  --wrap:1220px;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 32px -14px rgba(0,0,0,.8);
  --font-h:'Oswald','Arial Narrow',Arial,sans-serif;
  --font-b:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-m:'IBM Plex Mono',ui-monospace,'Courier New',monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-b); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; height:auto; display:block}
a{color:var(--accent-ink); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

h1,h2,h3,h4{font-family:var(--font-h); font-weight:500; margin:0; text-wrap:balance; line-height:1.15}
h1{font-size:clamp(30px,4.6vw,52px); text-transform:uppercase; letter-spacing:.02em}
h2{font-size:clamp(24px,3.2vw,36px); text-transform:uppercase; letter-spacing:.03em}
h3{font-size:clamp(18px,2.2vw,22px); letter-spacing:.02em}
p{margin:0 0 1em}
.num,.mono{font-family:var(--font-m); font-variant-numeric:tabular-nums}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Шапка ---------- */
.site-head{
  position:sticky; top:0; z-index:50; background:rgba(13,16,19,.94);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex; align-items:center; gap:18px; min-height:68px; max-width:1380px}
.logo{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.logo img{width:112px; height:48px}
.logo b{display:none}
.nav{display:flex; gap:2px; flex-wrap:wrap; margin-left:auto}
.nav a{
  font-family:var(--font-h); font-size:13.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-2); padding:8px 7px; border-radius:var(--r); border:1px solid transparent;
  white-space:nowrap;
}
.nav a:hover{color:var(--ink); background:var(--surf); text-decoration:none}
.nav a[aria-current="page"]{color:var(--accent-ink); border-color:var(--line-2); background:var(--surf)}

/* ---- выпадающие разделы меню ---- */
.nav-group{position:relative; display:flex}
.nav-top{font:inherit; background:none; border:1px solid transparent; cursor:pointer;
  font-family:var(--font-h); font-size:13.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-2); padding:8px 7px; border-radius:var(--r); white-space:nowrap}
.nav-top::after{content:'▾'; font-size:10px; margin-left:5px; opacity:.7; vertical-align:1px}
.nav-group:hover .nav-top,
.nav-group:focus-within .nav-top{color:var(--ink); background:var(--surf); text-decoration:none}
.nav-group.is-active .nav-top{color:var(--accent-ink)}
.nav-drop{
  display:none; position:absolute; top:100%; left:0; min-width:230px; z-index:60;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);
  padding:6px; box-shadow:var(--shadow);
}
.nav-group:hover .nav-drop,
.nav-group:focus-within .nav-drop,
.nav-group.open .nav-drop{display:block}
.nav-drop a{display:block; padding:9px 10px}
.head-tel{
  font-family:var(--font-m); font-size:15px; font-weight:500; color:var(--ink);
  white-space:nowrap; padding:8px 12px; border:1px solid var(--line-2); border-radius:var(--r);
}
.head-tel:hover{border-color:var(--accent); color:var(--accent-ink); text-decoration:none}
.burger{display:none; background:none; border:1px solid var(--line-2); border-radius:var(--r);
  color:var(--ink); padding:8px 11px; cursor:pointer; font-size:18px; line-height:1; margin-left:auto}

/* шесть пунктов (два из них — группы с выпадающим списком) помещаются в строку
   примерно от 1200px; ниже — компактная шапка с выпадающим меню */
/* Порог бургера. С семью пунктами меню (добавились «Отрасли») строка перестаёт
   помещаться уже около 1250 px, поэтому свёрнутое меню включается раньше. */
@media (max-width:1279px){
  .burger{display:block}
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:var(--bg-2); border-bottom:1px solid var(--line); padding:8px 20px 14px; margin:0;
  }
  .nav.open{display:flex}
  .nav a{padding:11px 8px; border-bottom:1px solid var(--line); border-radius:0}
  /* в выпадающем меню группы разворачиваются в обычный список */
  .nav-group{display:block}
  .nav-drop{display:block; position:static; background:none; border:0; padding:0; box-shadow:none; min-width:0}
  .nav-drop a{padding-left:22px}
  .nav-top{display:block; width:100%; text-align:left; padding:11px 8px;
    border:0; border-bottom:1px solid var(--line); border-radius:0; color:var(--ink-3)}
  .nav-top::after{display:none}
  button.nav-top{cursor:default}
  /* логотип — первым, телефон и бургер прижаты вправо */
  .site-head .wrap{gap:10px}
  .head-tel{margin-left:auto}
  .burger{margin-left:0}
}
@media (max-width:560px){
  .head-tel{font-size:13px; padding:6px 8px}
  .logo img{width:88px; height:38px}
  .site-head .wrap{min-height:58px}
}
@media (max-width:430px){
  /* логотип и бургер в одну строку, телефон — отдельной строкой во всю ширину */
  .site-head .wrap{flex-wrap:wrap; padding-bottom:8px}
  .logo{order:1}
  .burger{order:2; margin-left:auto}
  .head-tel{order:3; flex:1 0 100%; text-align:center; margin:0}
}

/* ---------- Герой ---------- */
.hero{position:relative; border-bottom:1px solid var(--line); overflow:hidden; background:var(--sunken)}
.hero picture,.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(10,13,16,.94) 0%,rgba(10,13,16,.82) 42%,rgba(10,13,16,.25) 100%);
}
.hero .wrap{position:relative; z-index:2; padding-top:72px; padding-bottom:72px; max-width:var(--wrap)}
.hero-in{max-width:640px}
.eyebrow{
  font-family:var(--font-m); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-ink); margin-bottom:14px;
}
.hero p.lead{font-size:18px; color:var(--ink-2); max-width:56ch; margin-top:16px}
.hero-facts{display:flex; flex-wrap:wrap; gap:10px 26px; margin:22px 0 26px; padding:0; list-style:none}
.hero-facts li{font-size:14px; color:var(--ink-2); display:flex; align-items:baseline; gap:8px}
.hero-facts b{font-family:var(--font-m); font-size:20px; font-weight:500; color:var(--ink)}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-block; font-family:var(--font-h); font-size:14px; text-transform:uppercase;
  letter-spacing:.07em; padding:12px 22px; border-radius:var(--r); border:1px solid var(--line-2);
  background:var(--surf); color:var(--ink); cursor:pointer; transition:.15s;
}
.btn:hover{border-color:var(--accent); color:var(--accent-ink); text-decoration:none}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-primary:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-row{display:flex; flex-wrap:wrap; gap:12px}

/* ---------- Секции ---------- */
section{padding:64px 0}
section.tight{padding:44px 0}
section + section{border-top:1px solid var(--line)}
.sec-head{margin-bottom:32px; max-width:70ch}
.sec-head p{color:var(--ink-2); margin:12px 0 0}
.bg-2{background:var(--bg-2)}

/* ---------- Карточки продукции ---------- */
.cards{display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.card{
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; transition:.18s;
}
.card:hover{border-color:var(--line-2); transform:translateY(-2px); box-shadow:var(--shadow)}
.card > .card-img{display:block; margin:0; background:var(--sunken); aspect-ratio:16/9; overflow:hidden}
.card img{width:100%; height:100%; object-fit:cover}
.card-body{padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; gap:10px}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--accent-ink); text-decoration:none}
.card p{color:var(--ink-2); font-size:14.5px; margin:0}
.card .meta{
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line);
  font-family:var(--font-m); font-size:12.5px; color:var(--ink-3);
}
.card .meta b{color:var(--ink-2); font-weight:500}

/* ---------- Преимущества ---------- */
.feats{display:grid; gap:1px; background:var(--line); grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.feat{background:var(--surf); padding:22px 20px}
.feat b{display:block; font-family:var(--font-m); font-size:28px; font-weight:500; color:var(--accent-ink); line-height:1.1}
.feat span{display:block; margin-top:8px; color:var(--ink-2); font-size:14.5px}

/* ---------- Таблицы ---------- */
.tbl-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surf)}
table{border-collapse:collapse; width:100%; font-size:14.5px}
caption{caption-side:top; text-align:left; padding:12px 14px; color:var(--ink-3); font-size:13px;
  border-bottom:1px solid var(--line)}
th,td{padding:9px 14px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap}
th{font-family:var(--font-h); font-weight:500; font-size:12.5px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--ink-2); background:var(--surf-2)}
td{font-family:var(--font-m); font-variant-numeric:tabular-nums; color:var(--ink)}
td.txt{font-family:var(--font-b); white-space:normal; color:var(--ink-2)}
/* обозначения размеров набираются как на чертеже: строчная d — это не D */
table.spec th{text-transform:none; letter-spacing:.01em; font-size:13px; white-space:normal}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surf-2)}

/* ---------- Контент-типографика ---------- */
.prose{max-width:78ch}
.prose h2{margin:44px 0 16px}
.prose h3{margin:30px 0 12px}
.prose ul,.prose ol{color:var(--ink-2); padding-left:22px; margin:0 0 1em}
.prose li{margin-bottom:7px}
.prose p{color:var(--ink-2)}
.prose strong{color:var(--ink); font-weight:600}

.note{
  border-left:3px solid var(--brand); background:var(--surf); padding:14px 18px;
  color:var(--ink-2); font-size:14.5px; border-radius:0 var(--r) var(--r) 0; margin:22px 0;
}
.note b{color:var(--ink)}

/* ---------- Раскладка «текст + чертёж» ---------- */
.split{display:grid; gap:28px; grid-template-columns:1fr 1fr; align-items:start}
/* без min-width:0 колонка грид-сетки растягивается по широкой таблице внутри
   и ломает страницу горизонтальной прокруткой */
.split > *,.cards > *,.offices > *,.feats > *{min-width:0}
@media (max-width:860px){ .split{grid-template-columns:1fr} }
figure{margin:0}
figure img{border:1px solid var(--line); border-radius:var(--r); background:#fff}
figure.dark img{background:var(--sunken)}
figcaption{font-size:13px; color:var(--ink-3); margin-top:8px}

/* ---------- Исполнения (карточки с чертежом) ---------- */
.exec{display:grid; gap:24px; grid-template-columns:340px 1fr; align-items:start;
  padding:26px 0; border-top:1px solid var(--line)}
.exec:first-of-type{border-top:none}
@media (max-width:820px){ .exec{grid-template-columns:1fr} }
.tag{display:inline-block; font-family:var(--font-m); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-ink); border:1px solid var(--line-2);
  padding:2px 8px; border-radius:20px; margin-bottom:10px; align-self:flex-start}
.exec ul{list-style:none; padding:0; margin:14px 0 0}
.exec li{position:relative; padding-left:18px; color:var(--ink-2); font-size:14.5px; margin-bottom:6px}
.exec li::before{content:''; position:absolute; left:0; top:9px; width:7px; height:1px; background:var(--accent)}

/* ---------- Хлебные крошки ---------- */
.crumbs{font-size:13px; color:var(--ink-3); padding:14px 0 0}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0}
.crumbs li::after{content:'/'; margin-left:8px; color:var(--line-2)}
.crumbs li:last-child::after{content:''}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--accent-ink)}

/* ---------- FAQ ---------- */
.faq{max-width:80ch}
.faq details{border:1px solid var(--line); border-radius:var(--r); background:var(--surf); margin-bottom:10px}
.faq summary{
  cursor:pointer; padding:15px 18px; font-family:var(--font-h); font-size:17px;
  letter-spacing:.01em; list-style:none; display:flex; justify-content:space-between; gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; color:var(--accent); font-family:var(--font-m); flex:0 0 auto}
.faq details[open] summary::after{content:'–'}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .a{padding:15px 18px; color:var(--ink-2); font-size:15px}
.faq .a p:last-child{margin-bottom:0}

/* ---------- CTA-полоса ---------- */
.cta{
  background:linear-gradient(135deg,var(--brand) 0%,#A8403B 100%); color:#fff;
  border-radius:var(--r); padding:32px 30px; display:grid; gap:20px;
  grid-template-columns:1fr auto; align-items:center;
}
.cta h2{color:#fff}
.cta p{margin:10px 0 0; color:rgba(255,255,255,.88); max-width:56ch}
.cta .btn{background:#fff; border-color:#fff; color:#1a1a1a}
.cta .btn:hover{background:#111417; border-color:#111417; color:#fff}
@media (max-width:760px){ .cta{grid-template-columns:1fr} }

/* ---------- Галерея снимков ---------- */
/* Кладка, а не сетка: кадры разной пропорции (портрет, 3:2, 16:9) встают
   каждый в своей высоте и ничего не обрезается. */
.photo-grid{columns:3; column-gap:18px}
.photo-grid figure{break-inside:avoid; margin:0 0 18px}
/* общее правило figure img даёт белую подложку и рамку — фотографии в ней не нуждаются */
.photo-grid img{width:100%; height:auto; display:block; border:0; background:none;
  border-radius:var(--r)}
.photo-grid figcaption{color:var(--ink-3); font-size:13.5px; margin-top:8px}
@media (max-width:900px){ .photo-grid{columns:2} }
@media (max-width:640px){ .photo-grid{columns:1} }

/* Снимок офиса на странице контактов. Кадр вертикальный: без ограничения
   он занимал бы почти весь первый экран и перетягивал внимание с телефонов. */
.office-photo{margin:0; max-width:360px}
.office-photo img{width:100%; height:auto; display:block; border:0; background:none;
  border-radius:var(--r)}
.office-photo figcaption{color:var(--ink-2); font-size:14px; margin-top:12px}

/* ---------- Логотипы: полоса доверия и поддержка ---------- */
/* Логотипы чужие, перекрашивать их нельзя, а на тёмном фоне тёмно-синий SUCDEN
   и серая «Национальная нерудная» пропадают. Поэтому каждый стоит на белой плашке. */
.logo-plate{display:block; background:#fff; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line)}
.logo-plate img{display:block; width:100%; height:auto}

.trust{background:var(--bg); border-top:1px solid var(--line); padding:34px 0 34px}
.trust h2{font-size:15px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2)}
.trust p{color:var(--ink-3); font-size:14px; margin:8px 0 0}
.trust-row{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-top:20px}
.trust .note-small{color:var(--ink-3); font-size:12.5px; margin-top:14px}

/* Знак фонда открывает страницу благотворительности. Файл с прозрачным фоном,
   поэтому идёт без белой плашки — знаком прямо на тёмном фоне. */
.support-main{margin:0; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start}
/* общее правило figure img даёт белую подложку и рамку — знаку фонда они не нужны,
   у файла свой прозрачный фон */
.support-main img{width:min(270px,52vw); height:auto; background:none; border:0; border-radius:0}
.support-main figcaption{color:var(--ink-2); font-size:14px; margin-top:14px; text-align:center;
  max-width:260px}
/* Заголовок ушёл в колонку рядом со знаком: их верхние границы совпадают.
   В полный кегль он занял бы четыре строки, поэтому здесь он мельче.
   Ширину колонок задаём стилем, а не атрибутом: инлайновая запись перебивала
   мобильное правило .split и на телефоне колонки не схлопывались. */
.hero-split{grid-template-columns:1.5fr 1fr; align-items:start}
.hero-split h1{font-size:clamp(28px,3.4vw,42px)}
@media (max-width:860px){ .hero-split{grid-template-columns:1fr} }

/* ---------- Подвал ---------- */
.site-foot{background:var(--sunken); border-top:1px solid var(--line); padding:46px 0 28px; font-size:14.5px}
.foot-grid{display:grid; gap:32px; grid-template-columns:1.4fr 1fr 1fr 1.2fr}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr} }
.site-foot h4{font-family:var(--font-h); font-size:13px; text-transform:uppercase; letter-spacing:.11em;
  color:var(--ink-3); margin-bottom:14px}
.site-foot ul{list-style:none; padding:0; margin:0}
.site-foot li{margin-bottom:9px}
.site-foot a{color:var(--ink-2)}
.site-foot a:hover{color:var(--accent-ink)}
.site-foot .req{color:var(--ink-3); font-size:13px; line-height:1.7}
.foot-bottom{border-top:1px solid var(--line); margin-top:34px; padding-top:20px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; color:var(--ink-3); font-size:13px}

/* Подпись разработчика — как на сайте «Лента-Лидер»: знак студии VD между
   двумя подписями. Цвета знака фирменные, не перекрашиваем. */
.credit{display:inline-flex; align-items:center; gap:10px; color:var(--ink-3);
  text-decoration:none; transition:opacity .15s}
.credit:hover{opacity:.8}
.credit:hover span:last-child{text-decoration:underline; text-underline-offset:3px}
.credit img{height:18px; width:auto; display:block}
.credit span:last-child{color:var(--ink); font-weight:600}

/* ---------- Контакты ---------- */
.offices{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.office{background:var(--surf); border:1px solid var(--line); border-radius:var(--r); padding:20px}
.office h3{margin-bottom:10px}
.office p{font-size:14.5px; color:var(--ink-2); margin:0 0 8px}
.office .mono{color:var(--ink)}

/* ---------- Печать ---------- */
@media print{
  .site-head,.site-foot,.crumbs,.cta,.btn,.no-print{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  th,td{border-color:#999; color:#000}
  a{color:#000; text-decoration:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

/* ---------- Опросные листы: заполняемые таблицы ---------- */
.sheet{border:1px solid var(--line); border-radius:var(--r); background:var(--surf); overflow:hidden;
  margin-bottom:34px}
.sheet > header{padding:14px 18px; background:var(--surf-2); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.sheet > header h3{margin:0}
.sheet > header .hint{margin-left:auto; font-size:13px; color:var(--ink-3)}
.sheet figure{border-bottom:1px solid var(--line)}
.sheet figure img{border:none; border-radius:0}
.sheet .pad{padding:18px}
.sheet table{font-size:13px}
.sheet th{font-size:11.5px; padding:7px 8px; text-align:center}
.sheet td{padding:4px}
.sheet input,.sheet select,.sheet textarea{
  width:100%; min-width:74px; padding:6px 8px; border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--bg); color:var(--ink); font:inherit; font-size:13px;
  font-family:var(--font-m); font-variant-numeric:tabular-nums;
}
.sheet input::placeholder{color:var(--ink-3); opacity:.7}
.sheet input:focus,.sheet select:focus,.sheet textarea:focus{border-color:var(--accent); outline:none}
.sheet .grid-f{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.sheet label{display:block; font-size:12px; color:var(--ink-3); margin-bottom:5px;
  font-family:var(--font-m); letter-spacing:.04em}
.sheet .acts{display:flex; gap:10px; flex-wrap:wrap; padding:0 18px 18px}
/* согласие на обработку ПДн: без отметки кнопка отправки заблокирована */
.sheet .consent{display:flex; gap:9px; align-items:flex-start; padding:14px 18px 10px;
  font-size:13px; line-height:1.45; color:var(--ink-2); cursor:pointer}
/* общее правило .sheet input задаёт min-width, рамку и отступы — для галочки их снимаем */
.sheet .consent input{margin:2px 0 0; flex:0 0 auto; width:15px; min-width:15px; height:15px;
  padding:0; border:0; border-radius:0; background:none; accent-color:var(--brand)}
.sheet .consent a{color:var(--ink-2); text-decoration:underline}
.sheet .consent a:hover{color:var(--ink)}
.sheet .acts .btn[disabled]{opacity:.42; cursor:not-allowed; pointer-events:none}
.sheet .sub{font-family:var(--font-h); font-size:12px; text-transform:uppercase; letter-spacing:.11em;
  color:var(--ink-3); margin:20px 0 10px}
.sheet .sub:first-child{margin-top:0}
@media print{
  .sheet{border-color:#000; break-inside:avoid}
  .sheet input,.sheet select,.sheet textarea{background:#fff; color:#000; border-color:#666}
  .sheet .acts,
  .sheet .consent{display:none}
  .sheet > header{background:#fff}
}

/* ---------- Каталог типоразмеров (перелинковка на карточки) ---------- */
.sizes{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surf)}
.sizes-row{display:grid; grid-template-columns:78px minmax(0,1fr); gap:14px; align-items:baseline;
  padding:11px 16px; border-bottom:1px solid var(--line)}
.sizes-row:last-child{border-bottom:none}
.sizes-row > b{font-family:var(--font-m); font-size:15px; color:var(--ink); font-weight:500}
.sizes-list{display:flex; flex-wrap:wrap; gap:6px}
.sizes-list a{
  font-family:var(--font-m); font-size:13.5px; color:var(--ink-2);
  border:1px solid var(--line-2); border-radius:var(--r); padding:3px 9px;
}
.sizes-list a:hover{border-color:var(--accent); color:var(--accent-ink); text-decoration:none;
  background:var(--accent-wash)}
@media (max-width:560px){
  .sizes-row{grid-template-columns:1fr; gap:8px}
}

/* ---------- Листалка «фото ↔ чертёж» ---------- */
.gal{position:relative}
.gal-frame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r); background:var(--sunken);
}
.gal-slide{position:absolute; inset:0; margin:0; opacity:0; transition:opacity .25s;
  pointer-events:none; background:var(--sunken)}
.gal-slide[data-kind="draw"]{background:#fff; padding:8px}
.gal-slide.is-active{opacity:1; pointer-events:auto}
.gal-slide img{width:100%; height:100%; object-fit:contain; border:none; border-radius:0; background:none}
.gal-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:38px; height:38px; padding:0; display:grid; place-items:center;
  font-family:var(--font-b); font-size:22px; line-height:1; letter-spacing:0;
  border:1px solid var(--line-2); border-radius:50%;
  background:rgba(13,16,19,.72); color:var(--ink); backdrop-filter:blur(4px);
}
.gal-nav:hover{border-color:var(--accent); color:var(--accent-ink); background:rgba(13,16,19,.9)}
.gal-nav.prev{left:10px}
.gal-nav.next{right:10px}
.gal-dots{display:flex; gap:7px; justify-content:center; margin-top:10px}
.gal-dots button{
  width:9px; height:9px; padding:0; border-radius:50%; border:1px solid var(--line-2);
  background:none; cursor:pointer;
}
.gal-dots button[aria-current="true"]{background:var(--accent); border-color:var(--accent)}
.gal-cap{font-size:13px; color:var(--ink-3); margin-top:8px; min-height:2.6em}
.gal-count{
  position:absolute; right:10px; bottom:10px; z-index:2;
  font-family:var(--font-m); font-size:11px; color:var(--ink-2);
  background:rgba(13,16,19,.72); border:1px solid var(--line);
  border-radius:20px; padding:2px 8px;
}
@media (max-width:560px){
  .gal-nav{width:32px; height:32px; font-size:19px}
}
@media print{
  /* в печать уходят оба кадра, а не только открытый */
  .gal-frame{aspect-ratio:auto; height:auto}
  .gal-slide{position:static; opacity:1; page-break-inside:avoid}
  .gal-nav,.gal-dots,.gal-count{display:none}
}

/* ---- уведомление о cookie (вставляется из site.js) ---- */
.cookie-note{position:fixed; left:16px; right:16px; bottom:16px; z-index:90; max-width:640px; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; padding:13px 16px;
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); font-size:14px}
.cookie-note p{margin:0; flex:1 1 300px; font-size:13.5px; line-height:1.45}
.cookie-note p b{display:block; margin-bottom:4px; font-size:14.5px; color:var(--ink)}
/* Кнопки равнозначны по размеру: «Отказаться» не должна быть незаметнее
   «Принять» — иначе выбор формальный. Отличается только заливка. */
.cookie-note .cookie-btns{display:flex; gap:10px; flex:0 0 auto}
.cookie-note .btn{flex:0 0 auto; min-width:128px; justify-content:center}
@media (max-width:560px){
  .cookie-note .cookie-btns{width:100%}
  .cookie-note .btn{flex:1 1 0; min-width:0}
}
@media print{ .cookie-note{display:none} }