/* ==========================================================================
   STEELFORM — DESIGN SYSTEM
   Swiss / industrial. Острые углы, тонкие технические линии, крупная
   типографика. Светлые и тёмные секции чередуются, задавая ритм.
   Секция переопределяет семантические токены — компоненты внутри
   не знают, на каком фоне они лежат.
   ========================================================================== */

/* ---------------------------------------------------------------- 01 TOKENS */
:root{
  /* палитра — тёплая: бумага/песок как основа, графит и терракота точечно */
  --ink:#1B2026;
  --ink-soft:#232A32;
  --ink-deep:#151A1F;
  --paper:#E9E5DC;
  --paper-2:#F1EEE7;
  --paper-3:#DFDACE;
  --white:#F5F3ED;
  --hair:#B7B2A8;
  --accent:#B56C42;        /* линии, заливка секции — не мелкий текст */
  --accent-600:#A15A34;    /* кнопки: белый на ней 5.2:1 */
  --accent-700:#8A4A29;
  --accent-fg:#8F4E2B;     /* акцент как текст на бумаге — 5.1:1 */
  --accent-200:rgba(181,108,66,.16);

  /* семантические — светлая секция по умолчанию */
  --bg:var(--paper);
  --surface:var(--paper-2);
  --fg:var(--ink);
  --muted:#63625B;         /* 4.9:1 на бумаге */
  --border:var(--hair);
  --border-strong:#9E998E;

  /* типографика */
  --f-display:"Inter Tight","Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-hero:clamp(2.75rem,7.4vw,6.5rem);
  --t-h1:clamp(1.875rem,4.6vw,4.25rem);
  --t-h2:clamp(1.625rem,3.2vw,2.875rem);
  --t-h3:clamp(1.125rem,1.5vw,1.375rem);
  --t-body:1.0625rem;
  --t-small:0.875rem;
  --t-mono:0.6875rem;

  /* сетка и ритм */
  --container:1440px;
  --gutter:clamp(1.25rem,4vw,4rem);
  --sp-section:clamp(4.5rem,8vw,9rem);
  --sp-tight:clamp(3rem,5vw,5.5rem);
  --gap:clamp(1.25rem,2.4vw,2.5rem);

  --line:1px;
  --ease:cubic-bezier(.2,.6,.2,1);
  --dur:.24s;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.62;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
::selection{background:var(--accent);color:#fff}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent-600);color:#fff;padding:.75rem 1.25rem;font-family:var(--f-mono);
}
.skip:focus{left:0}

/* ---------------------------------------------------------------- 02 LAYOUT */
.wrap{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
  width:100%;
}
.section{
  padding-block:var(--sp-section);
  background:var(--bg);
  color:var(--fg);
  position:relative;
}
.section--tight{padding-block:var(--sp-tight)}
.section--dark{
  --bg:var(--ink);
  --surface:var(--ink-soft);
  --fg:var(--white);
  --muted:#98A0A8;         /* 6.0:1 на графите */
  --border:#2E353D;
  --border-strong:#3D454E;
  --accent-fg:#C9835A;     /* 5.8:1 на графите */
}
/* Терракотовая секция: текст тёмный, а не белый — белый на #B56C42
   даёт 4.05:1 и не проходит AA. */
.section--accent{
  --bg:#C07A4E;
  --surface:var(--accent-600);
  --fg:#181207;         /* 5.4:1 на #C07A4E */
  --muted:#241A0F;      /* 5.0:1 */
  --border:rgba(24,18,7,.26);
  --border-strong:rgba(24,18,7,.42);
  --accent-fg:#181207;
}
/* соседние секции одного тона разделяются линией, а не отступом */
.section--rule{padding-top:0}
.section--rule > .wrap{padding-top:var(--sp-tight);border-top:var(--line) solid var(--border)}

/* ---------------------------------------------------------- 03 TYPOGRAPHY */
.kicker{
  font-family:var(--f-mono);
  font-size:var(--t-mono);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;align-items:center;gap:.75rem;
  margin-bottom:1.25rem;
}
.kicker::before{content:"";width:1.5rem;height:2px;background:var(--accent);flex:none}

.shead{margin-bottom:clamp(2rem,4vw,3.5rem);max-width:52rem}
.shead__t{
  font-family:var(--f-display);font-weight:800;
  font-size:var(--t-h2);line-height:1.04;letter-spacing:-.03em;
}
.shead__t--s{font-size:var(--t-h3);letter-spacing:-.01em;margin-bottom:1.75rem;text-transform:uppercase;font-family:var(--f-mono);font-weight:700}
.shead__x{margin-top:1.125rem;color:var(--muted);max-width:44rem}

/* Русские композиты («Металлоконструкции») длиннее строки на 360px.
   Ломаем слово только когда иначе будет переполнение — и без дефиса:
   расстановка переносов по словарю рвала и короткие слова тоже. */
.hero__t,.phead__t,.shead__t,.pos__t,.feat__t,.cta__t,.send__t,
.scard__t,.srow__t,.proc__t,.val__t,.qs__t,.mnav__i,.pcard__t,.blk__t,.sol__l li{
  overflow-wrap:break-word;
}

.note{
  font-size:var(--t-small);color:var(--muted);
  border-left:2px solid var(--accent);padding:.75rem 0 .75rem 1rem;
  max-width:48rem;margin-top:2rem;
}
.note--c{margin-inline:auto;text-align:center;border-left:none;border-top:2px solid var(--accent);padding:1.5rem 0 0}
.more{margin-top:2.5rem;font-family:var(--f-mono);font-size:var(--t-small);letter-spacing:.04em}
.more a{border-bottom:var(--line) solid var(--border-strong);padding-bottom:.25rem;transition:color var(--dur) var(--ease),border-color var(--dur)}
.more a:hover{color:var(--accent-fg);border-color:var(--accent)}
.is-placeholder{color:var(--accent-fg);font-family:var(--f-mono);font-size:.9em;letter-spacing:.04em}

/* --------------------------------------------------------- 04 SIGNATURE DIM */
/* Размерная линия. Единственный «украшающий» элемент — и он говорит
   ровно то, что продаёт компания: конструкция делается по мерке. */
/* Элементы grid/flex по умолчанию не сжимаются ниже min-content, поэтому
   одно длинное слово («Металлоконструкции») раздувает трек шире вьюпорта
   и overflow-wrap не успевает сработать. min-width:0 это снимает. */
.lhero__in > *,.lhero h1 > span,.offset > *,.shead--off > *,.lb2b > *,
.hero__in > *,.pos__in > *,.svc__in > *,.feat__in > *,.b2b__in > *,
.send__in > *,.prj__in > *,.cta__in > *,.form__in > *,.lstep > *,
.lstep__r > *,.mos__b > *{min-width:0}

.dim{
  width:min(100%,38.75rem);display:grid;align-items:center;
  grid-template-columns:minmax(3.625rem,1fr) auto minmax(3.625rem,1fr);
  gap:1.125rem;margin-top:1.5rem;color:var(--accent-fg);
}
.dim__v{font-family:var(--f-mono);font-weight:600;font-size:.75rem;line-height:1;
  letter-spacing:.3em;text-transform:uppercase;white-space:nowrap}
.dim__l{display:block;height:1px;background:currentColor;position:relative}
/* засечка на внешнем конце */
.dim__l::before{content:"";position:absolute;top:-.5rem;width:1px;height:1.0625rem;background:currentColor}
.dim__l--l::before{left:0}
.dim__l--r::before{right:0}
/* стрелка, направленная наружу */
/* Наконечник чертёжного типа: вытянутый и узкий, ~3:1.
   Короткий равносторонний треугольник читается как значок «плей», а не
   как стрелка размерной линии. */
.dim__l::after{content:"";position:absolute;top:-3.5px;width:0;height:0;
  border-block:3.5px solid transparent}
.dim__l--l::after{left:.5rem;border-right:20px solid currentColor}
.dim__l--r::after{right:.5rem;border-left:20px solid currentColor}
.dim--c{max-width:28.4rem;margin-top:0}
.dim--c .dim__v{font-size:.6875rem;letter-spacing:.26em}
.dim--head{margin-top:2rem}


/* ---------------------------------------------------------------- 05 BUTTON */
.btn{
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:var(--f-mono);font-size:.75rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:1.0625rem 1.75rem;cursor:pointer;
  border:var(--line) solid transparent;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur);
  min-height:3.25rem;
}
.btn--primary{background:var(--accent-600);color:#fff}
.btn--primary:hover{background:var(--accent-700)}
.btn--ghost{border-color:currentColor;color:var(--fg)}
.btn--ghost:hover{background:var(--fg);color:var(--bg)}
.btn--line{border-color:var(--border-strong);color:var(--fg)}
.btn--line:hover{border-color:var(--accent);color:var(--accent-fg)}
.btn__a{transition:translate var(--dur) var(--ease)}
.btn:hover .btn__a{translate:.25rem 0}

/* Графитовые зоны вне .section--dark: accent-текст должен светлеть,
   иначе A5461F на 0E1113 даёт 3.15:1. */
.hdr,.ftr,.mnav,.sbar{--accent-fg:#C9835A;--bg:var(--ink);--border:#2E353D}

/* ---------------------------------------------------------------- 06 HEADER */
.hdr{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--ink) 94%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:var(--line) solid #2E353D;
  color:var(--white);
}
/* Сетка, как в архиве: знак — меню — инструменты. На flex это держалось
   на margin-left:auto у меню, и при скрытом меню на мобильном вправо
   толкать было нечем — язык и бургер уезжали к центру. */
.hdr__in{
  max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:1.5rem;min-height:4.5rem;
}
/* Знак, дескриптор, меню, переключатель языка и кнопка стоят на одной
   центральной линии шапки — как на макете. Никаких сдвигов по вертикали. */
.logo{display:flex;align-items:center;gap:1.25rem;flex:none;min-height:2.75rem;justify-self:start}
.logo__m{font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.5rem,2.2vw,2.125rem);letter-spacing:-.035em;line-height:1}
/* Дескриптор идёт по центру шапки, а не по базовой линии знака. */
.logo__d{font-family:var(--f-mono);font-size:.5625rem;letter-spacing:.2em;color:#98A0A8;
  text-transform:uppercase;white-space:nowrap}
.nav{display:flex;gap:clamp(.625rem, 2.4vw - 20px, 1.75rem);justify-self:center}
/* Меню набрано пропорциональным гротеском, а не моноширинным:
   у моно все буквы одной ширины, и «3D VIZUALIZACIJE» расползается. */
.nav__i{
  font-family:var(--f-body);font-weight:600;
  /* Кегль плавно уменьшается при сужении окна: 14px на 1440+ и 10px
     у нижней границы, где меню ещё показывается. Перенос запрещён —
     пункт вроде «3D VIZUALIZACIJE» должен оставаться одной строкой. */
  font-size:clamp(.625rem, 1.55vw - 8.2px, .875rem);
  white-space:nowrap;
  letter-spacing:.04em;text-transform:uppercase;
  color:#98A0A8;padding-block:.375rem;
  border-bottom:2px solid transparent;transition:color var(--dur),border-color var(--dur);
}
.nav__i:hover,.nav__i.is-on{color:var(--white);border-color:var(--accent)}
.hdr__r{display:flex;align-items:center;gap:1.25rem;justify-self:end}
/* Кнопка шапки по образцу: терракотовая заливка в белой рамке,
   надпись пропорциональным шрифтом — как у пунктов меню. */
.hdr__cta{
  padding:.875rem 1.5rem;min-height:2.75rem;
  border:2px solid #fff;
  white-space:nowrap;          /* надпись в одну строку, как на образце */
  font-family:var(--f-body);font-size:.8125rem;font-weight:600;
  letter-spacing:.03em;
}

.lang{display:flex;gap:.5rem;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.1em}
.lang__i{color:#98A0A8;padding:.25rem .5rem;transition:color var(--dur);
  display:inline-flex;align-items:center;min-height:2.75rem}
.lang__i:hover{color:var(--accent-fg)}
.lang__i.is-on{color:var(--white);text-decoration:underline;text-underline-offset:.25rem}
.lang--ftr .lang__i{color:#98A0A8}
.lang--ftr .lang__i.is-on{color:var(--white)}

.burger{display:none;width:2.75rem;height:2.75rem;flex-direction:column;
  justify-content:center;align-items:center;gap:.375rem;cursor:pointer}
.burger span{display:block;width:1.5rem;height:2px;background:var(--white);transition:translate var(--dur),rotate var(--dur),opacity var(--dur)}
.burger[aria-expanded="true"] span:first-child{translate:0 .25rem;rotate:45deg}
.burger[aria-expanded="true"] span:last-child{translate:0 -.25rem;rotate:-45deg}

.mnav{
  position:fixed;inset:4.5rem 0 0;z-index:39;
  background:var(--ink);color:var(--white);
  padding:var(--gutter);
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  overflow-y:auto;
}
.mnav[hidden]{display:none}
.mnav__nav{display:flex;flex-direction:column}
.mnav__i{
  font-family:var(--f-display);font-weight:700;font-size:clamp(1.75rem,7vw,2.5rem);
  letter-spacing:-.03em;padding-block:.75rem;
  border-bottom:var(--line) solid #2E353D;
}
.mnav__i.is-on{color:var(--accent-fg)}
.mnav__b{display:flex;flex-direction:column;gap:1.5rem;padding-bottom:5rem}
.mnav__b .btn{justify-content:center}

/* ------------------------------------------------------------ 07 STICKY BAR */
.sbar{
  position:fixed;left:0;right:0;bottom:0;z-index:38;display:none;
  background:var(--ink);border-top:var(--line) solid #2E353D;
}
.sbar__i{
  flex:1;display:flex;align-items:center;justify-content:center;
  min-height:3.5rem;padding:.5rem;
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--white);border-right:var(--line) solid #2E353D;text-align:center;
}
.sbar__i:last-child{border-right:none}
.sbar__i--cta{background:var(--accent-600)}
.sbar .is-placeholder{color:#98A0A8}

/* ---------------------------------------------------------------- 08 HERO */
.hero{padding-block:clamp(3.5rem,7vw,7rem) clamp(4rem,7vw,7rem);overflow:hidden}
.hero__in{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:center}
.hero__c{grid-column:1/span 7}
.hero__i{grid-column:8/span 5}
.hero__d{
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-fg);margin-bottom:1.75rem;
}
.hero__t{
  font-family:var(--f-display);font-weight:800;
  font-size:var(--t-hero);line-height:.94;letter-spacing:-.045em;
  display:flex;flex-direction:column;
}
.hero__t2{color:#98A0A8}
.hero__x{margin-top:2rem;color:var(--muted);max-width:34rem;font-size:clamp(1rem,1.4vw,1.1875rem)}
.hero__b{display:flex;flex-wrap:wrap;gap:.875rem;margin-top:2.5rem}

/* ------------------------------------------------------------- 09 FIGURES */
.fig{background:var(--surface);border:var(--line) solid var(--border);overflow:hidden}
.fig img{width:100%;height:auto}
.fig--hero{aspect-ratio:10/7}
.fig--hero img{height:100%;object-fit:cover}
.fig--svc,.fig--feat{aspect-ratio:10/7}
.fig--svc img,.fig--feat img{height:100%;object-fit:cover}
.fig--prj{aspect-ratio:7/3}
.fig--prj img{height:100%;object-fit:cover}
.fig--g{aspect-ratio:10/7}
.fig--g img{height:100%;object-fit:cover}

/* --------------------------------------------------------- 10 POSITIONING */
.pos__in{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.pos__l{grid-column:1/span 6}
.pos__r{grid-column:8/span 5}
.pos__t{font-family:var(--f-display);font-weight:800;font-size:var(--t-h2);line-height:1.04;letter-spacing:-.03em}
.pos__x{color:var(--muted)}
.ticks{margin-top:2rem;display:flex;flex-direction:column;gap:1rem}
.ticks li{
  display:flex;gap:.875rem;font-size:var(--t-small);
  padding-top:1rem;border-top:var(--line) solid var(--border);
}
.ticks li::before{content:"—";color:var(--accent-fg);font-family:var(--f-mono);flex:none}

/* ------------------------------------------------------- 11 SERVICES GRID */
.sgrid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--line);background:var(--border);
  border:var(--line) solid var(--border);
}
.scard{
  background:var(--bg);padding:1.75rem 1.5rem 1.5rem;
  display:flex;flex-direction:column;gap:.75rem;min-height:14rem;
  transition:background var(--dur) var(--ease);
}
.scard:hover{background:var(--surface)}
.scard__n{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.16em;color:var(--accent-fg)}
.scard__t{font-family:var(--f-display);font-weight:700;font-size:var(--t-h3);line-height:1.14;letter-spacing:-.02em}
.scard__x{font-size:var(--t-small);color:var(--muted);line-height:1.5}
.scard__a{margin-top:auto;color:var(--accent-fg);transition:translate var(--dur) var(--ease)}
.scard:hover .scard__a{translate:.25rem 0}

/* ------------------------------------------------------- 12 SERVICES LIST */
.slist{display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,4.5rem)}
.slist__h{display:flex;align-items:baseline;gap:1rem;font-family:var(--f-mono);font-size:.8125rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding-bottom:1rem;border-bottom:var(--line) solid var(--border-strong);margin-bottom:0}
.slist__lv{color:var(--accent-fg)}
.slist__i{display:flex;flex-direction:column}
.srow{
  display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr) 2rem;
  gap:var(--gap);align-items:baseline;
  padding:1.5rem 0;border-bottom:var(--line) solid var(--border);
  transition:color var(--dur) var(--ease);
}
.srow:hover{color:var(--accent-fg)}
.srow__t{font-family:var(--f-display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.02em}
.srow__x{font-size:var(--t-small);color:var(--muted)}
.srow:hover .srow__x{color:inherit}
.srow__a{text-align:right;color:var(--accent-fg);transition:translate var(--dur) var(--ease)}
.srow:hover .srow__a{translate:.25rem 0}

/* ------------------------------------------------------------- 13 PROCESS */
/* Общая для сайта «шина процесса»: 01 → 05. Повторяется на страницах услуг. */
.proc{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);counter-reset:s}
.proc__s{position:relative;padding-top:2.25rem}
.proc__s::before{
  content:"";position:absolute;top:0;left:0;right:calc(var(--gap) * -1);
  height:1px;background:var(--border);
}
.proc__s:last-child::before{right:0}
.proc__d{position:absolute;top:-3px;left:0;width:7px;height:7px;background:var(--accent)}
.proc__n{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.16em;color:var(--accent-fg)}
.proc__t{font-family:var(--f-display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.02em;margin-top:.875rem}
.proc__x{font-size:var(--t-small);color:var(--muted);margin-top:.625rem;line-height:1.5}
.proc--c .proc__t{font-size:1rem}
.proc--c .proc__x{font-size:.8125rem}

/* ----------------------------------------------------------- 14 SOLUTIONS */
.sol{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--line);background:var(--border);
  border:var(--line) solid var(--border)}
.sol__g{background:var(--bg);padding:1.75rem 1.5rem}
.sol__t{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--accent-fg);margin-bottom:1.25rem}
.sol__l{display:flex;flex-direction:column;gap:.625rem}
.sol__l li{font-family:var(--f-display);font-weight:600;font-size:1.125rem;letter-spacing:-.01em}

/* ------------------------------------------------------------ 15 FEATURES */
.feat__in{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:center}
.feat__c{grid-column:1/span 5}
.feat__i{grid-column:7/span 6}
.feat--r .feat__c{grid-column:8/span 5;order:2}
.feat--r .feat__i{grid-column:1/span 6;order:1}
.feat__t{font-family:var(--f-display);font-weight:800;font-size:var(--t-h2);line-height:1.06;letter-spacing:-.03em}
.feat__x{margin-top:1.25rem;color:var(--muted)}
.feat__c .btn{margin-top:2rem}

/* ---------------------------------------------------------------- 16 B2B */
.b2b__in{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.b2b__in > div:first-child{grid-column:1/span 6}
.b2b__in .tags{grid-column:8/span 5}
.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tags li{
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  border:var(--line) solid var(--border);padding:.625rem .875rem;color:var(--muted);
}
.send__in{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.send__in > div{grid-column:1/span 6}
.send__in .tags{grid-column:8/span 5}
.send__t{font-family:var(--f-display);font-weight:800;font-size:var(--t-h2);letter-spacing:-.03em;line-height:1.06}
.send__x{margin-top:1.125rem;color:var(--muted);max-width:34rem}
.send__in .btn{margin-top:2rem}

/* ----------------------------------------------------------- 17 PROJECTS */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
.chip{
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  border:var(--line) solid var(--border);padding:.75rem 1rem;cursor:pointer;color:var(--muted);
  transition:color var(--dur),border-color var(--dur),background var(--dur);min-height:2.75rem;
}
.chip:hover{border-color:var(--accent);color:var(--accent-fg)}
.chip.is-on{background:var(--accent-600);border-color:var(--accent-600);color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.pcard{display:flex;flex-direction:column;gap:1rem}
.pcard[hidden]{display:none}
.pcard__i{display:block;overflow:hidden;background:var(--surface);border:var(--line) solid var(--border);aspect-ratio:10/7}
.pcard__i img{width:100%;height:100%;object-fit:cover;transition:scale .5s var(--ease)}
.pcard:hover .pcard__i img{scale:1.03}
.pcard__b{display:flex;flex-direction:column;gap:.375rem}
.pcard__t{font-family:var(--f-display);font-weight:700;font-size:1.125rem;letter-spacing:-.02em}
.pcard__m{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ------------------------------------------------------- 18 PAGE HEADERS */
.phead{padding-block:clamp(2rem,4vw,3rem) clamp(3rem,6vw,5rem)}
.phead__t{font-family:var(--f-display);font-weight:800;font-size:var(--t-h1);
  line-height:1.02;letter-spacing:-.04em;max-width:22ch}
.phead__x{margin-top:1.5rem;color:var(--muted);max-width:46rem;font-size:clamp(1rem,1.3vw,1.1875rem)}
.phead--p .phead__t{max-width:26ch}
.prj__i{margin-top:clamp(2rem,4vw,3.5rem)}

.crumbs{margin-bottom:2.5rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;font-family:var(--f-mono);
  font-size:var(--t-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.crumbs li:not(:last-child)::after{content:"/";margin-left:.5rem;color:var(--border-strong)}
.crumbs a:hover{color:var(--accent-fg)}

/* ------------------------------------------------------ 19 SERVICE PAGES */
.svc__in{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.svc__c{grid-column:1/span 6}
.svc__i{grid-column:8/span 5}
.svc__c p{color:var(--muted);margin-bottom:1.25rem;max-width:38rem}
.svc__c p:last-child{margin-bottom:0}

.blks{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  gap:var(--line);background:var(--border);border:var(--line) solid var(--border)}
.blks--2{grid-template-columns:repeat(2,1fr)}
/* Единственный блок занимает всю ширину — раскладываем список в колонки,
   иначе получается одна очень длинная строка. */
/* columns не действует на флекс-контейнер — переключаем на block. */
.blks--1 .blk__l{display:block;columns:3;column-gap:2.5rem}
.blks--1 .blk__l li{break-inside:avoid;margin-bottom:.5rem}
.blk{background:var(--bg);padding:1.75rem 1.5rem}
.blk__t{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--accent-fg);margin-bottom:1.25rem}
.blk__l{display:flex;flex-direction:column;gap:.5rem}
.blk__l li{font-size:.9375rem;padding-left:1rem;position:relative;color:var(--fg)}
.blk__l li::before{content:"";position:absolute;left:0;top:.7em;width:.375rem;height:1px;background:var(--border-strong)}

/* --------------------------------------------------------------- 20 FAQ */
.faq{max-width:52rem}
.faq__h{font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;margin-bottom:1.5rem}
.faq__l{border-top:var(--line) solid var(--border)}
.faq__i{border-bottom:var(--line) solid var(--border)}
.faq__i summary{
  cursor:pointer;padding:1.25rem 2.5rem 1.25rem 0;position:relative;list-style:none;
  font-family:var(--f-display);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{
  content:"+";position:absolute;right:0;top:1.125rem;
  font-family:var(--f-mono);color:var(--accent-fg);font-size:1.25rem;transition:rotate var(--dur) var(--ease);
}
.faq__i[open] summary::after{rotate:45deg}
.faq__a{padding-bottom:1.5rem;color:var(--muted);max-width:44rem}

/* ---------------------------------------------------------- 21 RELATED */
.rel__h{font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;margin-bottom:1.5rem}
.rel__l{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:var(--line);background:var(--border);border:var(--line) solid var(--border)}
.rel__i{
  background:var(--bg);padding:1.25rem 1.5rem;display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--f-display);font-weight:600;transition:background var(--dur),color var(--dur);
}
.rel__i:hover{background:var(--surface);color:var(--accent-fg)}

/* ------------------------------------------------------ 22 PROJECT PAGE */
.prj__in{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.prj__c{grid-column:1/span 6}
.prj__x{color:var(--muted);font-size:1.125rem}
.meta{grid-column:8/span 5;border-top:var(--line) solid var(--border)}
.meta__r{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:1rem;
  padding:.875rem 0;border-bottom:var(--line) solid var(--border)}
.meta dt{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.meta dd{font-size:.9375rem}

/* ------------------------------------------------------------ 23 VALUES */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.val{padding-top:1.25rem;border-top:2px solid var(--accent)}
.val__t{font-family:var(--f-display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.02em}
.val__x{margin-top:.75rem;font-size:var(--t-small);color:var(--muted);line-height:1.55}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}

/* --------------------------------------------------------------- 24 CTA */
.cta__in{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end}
.cta__in > div:first-child{grid-column:1/span 7}
.cta__b{grid-column:9/span 4;display:flex;flex-wrap:wrap;gap:.875rem;justify-content:flex-end}
.cta__t{font-family:var(--f-display);font-weight:800;font-size:var(--t-h2);line-height:1.04;letter-spacing:-.03em}
.cta__x{margin-top:1.125rem;color:var(--muted);max-width:36rem}

/* -------------------------------------------------------------- 25 FORM */
.form__in{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4vw,4rem)}
.form__side{grid-column:1/span 4}
.form__main{grid-column:6/span 7}
.form{border:none;background:transparent}
.form__g{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1.75rem}
.fld{padding:0}
.fld--w{grid-column:1/-1}
.fld label{display:block;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.fld label em{font-style:normal;color:var(--accent-fg);text-transform:lowercase;
  font-size:.9em;letter-spacing:.04em;opacity:.85;margin-left:.4em}
.fld input,.fld select,.fld textarea{width:100%;font-size:1rem;padding:.7rem 0;min-height:2.75rem;
  border-bottom:1px solid var(--border-strong);border-radius:0;
  transition:border-color var(--dur) var(--ease)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--accent);outline:none;
  outline-offset:0}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px}
.fld textarea{resize:vertical;line-height:1.5}
.fld select{cursor:pointer}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted)}
.fld.is-bad input,.fld.is-bad select{border-color:var(--accent-700);background:var(--accent-200)}

.drop{margin-top:1.75rem;padding:1.25rem;border:1px dashed var(--border-strong);
  transition:background var(--dur),border-color var(--dur)}
.drop.is-over{background:var(--accent-200);border-color:var(--accent)}
.drop input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.drop__l{display:flex;align-items:center;gap:1rem;cursor:pointer;min-height:2.75rem}
.drop__ico{width:2.25rem;height:2.25rem;flex:none;display:grid;place-items:center;
  border:var(--line) solid var(--accent);color:var(--accent-fg);font-family:var(--f-mono);font-size:1.125rem}
.drop__t{display:block;font-family:var(--f-mono);font-size:.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.drop__s{display:block;font-size:.75rem;color:var(--muted);margin-top:.25rem}
.drop__list{margin-top:1rem;display:flex;flex-direction:column;gap:.375rem}
.drop__list li{font-family:var(--f-mono);font-size:.75rem;color:var(--muted);
  display:flex;justify-content:space-between;gap:1rem}

.form__err{margin-top:1.5rem;padding:.9rem 1.1rem;background:var(--accent-700);color:#fff;
  font-size:var(--t-small)}
.form__f{margin-top:1.75rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem}
.form__c{font-size:.75rem;color:var(--muted);max-width:24rem;line-height:1.45}
.form__ok{padding:1.75rem;border:1px solid var(--border-strong);background:var(--surface)}
.form__okt{font-family:var(--f-mono);font-size:.9375rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-fg)}
.form__okx{margin-top:.75rem;font-size:var(--t-small);color:var(--muted)}
.form__pre{margin-block:1.25rem;padding:1rem;background:var(--bg);border:var(--line) solid var(--border);
  font-family:var(--f-mono);font-size:.75rem;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.form__dev{margin-top:1rem;padding:.75rem;border:1px dashed var(--accent);color:var(--accent-fg);
  font-family:var(--f-mono);font-size:.6875rem;line-height:1.5}

.qs{margin-bottom:3rem}
.qs__t{font-family:var(--f-display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.02em;margin-bottom:1.5rem}
.qs__l{display:flex;flex-direction:column}
.qs__i{display:flex;gap:1rem;padding:.875rem 0;border-top:var(--line) solid var(--border);font-size:var(--t-small)}
.qs__n{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--accent-fg);letter-spacing:.12em;padding-top:.2em}
.cov{margin-top:3rem}
.cov__x{font-size:var(--t-small);color:var(--muted)}
.cov__l{margin-top:1.25rem;font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cov__c{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.75rem}
.cov__c li{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;
  border:1px solid var(--border);padding:.5rem .625rem;color:var(--fg)}

.contact{border-top:var(--line) solid var(--border);margin-bottom:1rem}
.contact__r{display:grid;grid-template-columns:minmax(0,8rem) minmax(0,1fr);gap:1rem;
  padding:.875rem 0;border-bottom:var(--line) solid var(--border)}
.contact dt{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.contact__val{font-size:.9375rem;word-break:break-word}
a.contact__val:hover{color:var(--accent-fg)}

/* ------------------------------------------------------------- 26 FOOTER */
/* Правила подвала — в секции 30 (структура из обновлённого архива). */

/* ------------------------------------------------------------- 27 MOTION */
.reveal{opacity:0;translate:0 1rem}
.reveal.is-in{opacity:1;translate:0;transition:opacity .6s var(--ease),translate .6s var(--ease)}

/* --------------------------------------------------------- 28 RESPONSIVE */
/* Tablet — 8 колонок логически, сетка перестраивается по блокам */
@media (max-width:1180px){
  .nav{display:none}
  .hdr__in{grid-template-columns:1fr auto}
  .burger{display:flex}
  .hdr__cta{display:none}
  .sgrid{grid-template-columns:repeat(2,1fr)}
  .proc{grid-template-columns:repeat(3,1fr);row-gap:2.5rem}
  .blks--1 .blk__l{columns:2}
  .vals{grid-template-columns:repeat(2,1fr);row-gap:2rem}
}
@media (max-width:1024px){
  /* 12 треков дают 11 гэпов; при gutter 32px это 352px — шире, чем
     доступная ширина на телефоне. Схлопываем сами треки, а не только
     спаны дочерних элементов. */
  .hero__in,.pos__in,.svc__in,.feat__in,.b2b__in,
  .send__in,.prj__in,.cta__in,.form__in{grid-template-columns:1fr}
  .hero__c,.hero__i{grid-column:1/-1}
  .hero__i{margin-top:1rem}
  .pos__l,.pos__r{grid-column:1/-1}
  .svc__c,.svc__i{grid-column:1/-1}
  .svc__i{margin-top:1rem}
  .feat__c,.feat__i,.feat--r .feat__c,.feat--r .feat__i{grid-column:1/-1}
  .feat--r .feat__c{order:0}
  .feat--r .feat__i{order:1}
  .b2b__in > div:first-child,.b2b__in .tags,
  .send__in > div,.send__in .tags{grid-column:1/-1}
  .prj__c,.meta{grid-column:1/-1}
  .cta__in > div:first-child,.cta__b{grid-column:1/-1}
  .cta__b{justify-content:flex-start}
  .form__side,.form__main{grid-column:1/-1}
  .sol{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .rel__l{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(3,1fr)}
  .srow{grid-template-columns:minmax(0,1fr) 2rem;row-gap:.5rem}
  .srow__x{grid-column:1}
}
/* Тач-цели меньше 44px непопадаемы. Планшеты доходят до 1024px,
   поэтому порог здесь, а не на 900px вместе со sticky-панелью. */
@media (max-width:1024px){
  .more a,.crumbs a{display:inline-flex;align-items:center;min-height:2.75rem}
  /* Тот же бокс достаётся и текущей странице: без него ссылка
     центрируется в 44px, а соседний span сидит вверху — цепочка
     выглядит как две строки. */
  .crumbs li{display:inline-flex;align-items:center;min-height:2.75rem}
  .fld input,.fld select,.fld textarea{min-height:2.75rem}
  .lang--ftr .lang__i{min-height:2.75rem}
}
@media (max-width:900px){
  .sbar{display:flex}
  body{padding-bottom:3.5rem}
  .mnav{inset-block:4.5rem 3.5rem}
}
/* Mobile — 4 колонки */
@media (max-width:680px){
  :root{--t-body:1rem}
  .form__g{gap:1.25rem}
  /* Логотип с дескриптором + переключатель языка + бургер не помещаются
     в 375px: бургер уезжал за край. Дескриптор есть в подвале. */
  .logo__d{display:none}
  .hdr__in{gap:.75rem;min-height:4rem}
  .hdr__r{gap:.5rem}
  .lang--hdr .lang__i{padding-inline:.25rem}
  .mnav{inset-block:4rem 3.5rem}
  .hero__d{letter-spacing:.12em}
  .sgrid{grid-template-columns:1fr}
  .blks,.blks--2{grid-template-columns:1fr}
  .blks--1 .blk__l{columns:1}
  .sol{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  .vals{grid-template-columns:1fr}
  .proc{grid-template-columns:1fr;row-gap:2rem}
  .form__g{grid-template-columns:1fr}
  .hero__b .btn,.mnav__b .btn{flex:1;justify-content:center}
  .meta__r,.contact__r{grid-template-columns:1fr;gap:.25rem}
  .ftr__bot{font-size:.5625rem}
}
@media (max-width:400px){
  .btn{padding-inline:1.25rem;font-size:.6875rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;translate:none}
  .pcard:hover .pcard__i img{scale:1}
}

@media print{
  .hdr,.sbar,.mnav,.btn,.chips,.cc{display:none!important}
  body{padding-bottom:0}
  .section{padding-block:1rem;background:#fff;color:#000}
}

/* Прайс 3D: рабочая спецификация, а не декоративные тарифные карточки. */

/* ==========================================================================
   29 LANDING — главная как одностраничник
   Редакторская сетка со смещением 1fr 3.3fr 1fr, крупный кегль,
   фотография как герой. Светлое доминирует: тёмные только hero,
   проекты и подвал, терракотовая — только B2B.
   ========================================================================== */

.lhero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:var(--ink);color:var(--white);overflow:hidden;
}
.lhero__img{position:absolute;inset:0}
.lhero__img img{width:100%;height:100%;object-fit:cover}
.lhero__shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(11,14,18,.90),rgba(11,14,18,.34) 62%,rgba(0,0,0,.06)),
    linear-gradient(0deg,rgba(0,0,0,.66),transparent 55%);
}
.lhero__in{
  position:relative;width:100%;max-width:var(--container);margin-inline:auto;
  padding:9.5rem var(--gutter) clamp(3rem,6vh,4.75rem);
  /* Координатам нужно ~75px, а колонка 1fr отдавала им 425px — заголовок
     из-за этого жил в 850px вместо 1216px и не мог вырасти. */
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--gap);
}
.lhero__k{
  font-family:var(--f-mono);font-size:.625rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#D9CEC4;
}
.lhero h1{
  font-family:var(--f-display);font-weight:700;
  /* Потолок считан по самой широкой строке из трёх языков —
     «Изготовление. Монтаж.», 1016px на каждые 100px кегля. В колонке
     1216px это 119px; берём 7.8vw с запасом и упираем в 7.3rem. */
  font-size:clamp(3.25rem,7.8vw,7.3rem);line-height:.96;letter-spacing:-.055em;
  margin-top:clamp(1.5rem,2.4vw,2.75rem);display:flex;flex-direction:column;
  overflow-wrap:break-word;
}
.lhero h1 .l2{color:rgba(245,243,237,.72)}
/* Прежде здесь стоял уменьшенный кегль для локали с длинным составным
   словом: в колонке 2fr «Металлоконструкции.» иначе не помещалось. После
   сжатия правой колонки места хватает всем трём языкам, и русский больше
   не мельче остальных. Уменьшение осталось только на телефоне. */
.lhero .dim{margin-top:clamp(1.6rem,2.6vw,3rem);width:min(100%,32rem);color:#E0A87F}
/* Подзаголовок 18px под заголовком 112px терялся — поднимаем до 22px. */
.lhero__x{margin-top:clamp(1.75rem,2.6vw,3rem);color:#DCD8D0;max-width:36rem;
  font-size:clamp(1.0625rem,1.55vw,1.375rem);line-height:1.5}
.lhero__b{display:flex;flex-wrap:wrap;gap:1.75rem;align-items:center;
  margin-top:clamp(2.25rem,3.2vw,3.5rem)}
.coords{
  justify-self:end;text-align:right;font-family:var(--f-mono);
  font-size:.625rem;line-height:1.95;letter-spacing:.14em;color:rgba(245,243,237,.66);
}
.textlink{
  font-family:var(--f-mono);font-size:.625rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding-bottom:.35rem;
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:2.75rem;                 /* тач-цель */
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.45rem;
}
.btn--paper{background:var(--white);color:var(--ink)}
.btn--paper:hover{background:var(--paper-3)}

/* Смещённая сетка: колонка содержания сдвинута от края — это и есть
   редакторский приём референса. */
.offset{display:grid;grid-template-columns:1fr 3.3fr 1fr;gap:4vw}
.stmt{padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--border)}
.stmt__t{
  grid-column:2;font-family:var(--f-display);font-weight:700;
  font-size:clamp(2rem,4.7vw,4.4rem);line-height:1.05;letter-spacing:-.045em;
  overflow-wrap:break-word;
}
.stmt__c{font-family:var(--f-mono);font-size:.625rem;line-height:2;letter-spacing:.1em;color:var(--muted)}
/* Тот же gap, что у .offset: без него средняя колонка шире и заголовки
   секций стояли на 36px левее заявления. */
.shead--off{display:grid;grid-template-columns:1fr 3.3fr 1fr;gap:4vw;max-width:none;
  margin-bottom:clamp(2.5rem,5vw,4rem)}
.shead--off .kicker{margin-bottom:0}
.shead--off .shead__t{
  grid-column:2;font-size:clamp(2.25rem,6vw,5.35rem);line-height:.95;letter-spacing:-.05em;
  overflow-wrap:break-word;
}

.lsvc{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--border);border-left:1px solid var(--border)}
.lsvc__i{
  min-height:17.5rem;padding:1.6rem;position:relative;display:flex;flex-direction:column;
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  transition:background var(--dur) var(--ease);
}
.lsvc__i:hover{background:var(--surface)}
.lsvc__n{font-family:var(--f-mono);font-size:.625rem;letter-spacing:.16em;color:var(--muted)}
.lsvc__t{font-family:var(--f-display);font-weight:700;font-size:1.5rem;
  letter-spacing:-.025em;margin-top:3.25rem;overflow-wrap:break-word}
.lsvc__x{margin-top:.9rem;max-width:21rem;color:var(--muted);font-size:.875rem;line-height:1.6}
.lsvc__a{position:absolute;right:1.4rem;top:1.3rem;font-size:1.15rem;color:var(--accent-fg);
  transition:translate var(--dur) var(--ease)}
.lsvc__i:hover .lsvc__a{translate:.2rem -.2rem}

.mosaic{display:grid;grid-template-columns:1.3fr .7fr;grid-template-rows:26rem 26rem;gap:1rem}
.mos{position:relative;overflow:hidden;display:block;background:var(--ink-soft)}
.mos--a{grid-row:1/3}
.mos img{width:100%;height:100%;object-fit:cover;transition:scale .6s var(--ease)}
.mos:hover img{scale:1.03}
.mos::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.45) 34%,rgba(0,0,0,.08) 70%)}
.mos__b{position:absolute;z-index:1;left:1.75rem;right:1.75rem;bottom:1.6rem}
.mos__k{display:block;font-family:var(--f-mono);font-size:.5625rem;letter-spacing:.16em;
  text-transform:uppercase;color:#E4C9B4}
.mos__t{display:block;font-family:var(--f-display);font-weight:700;font-size:1.7rem;
  letter-spacing:-.025em;margin-top:.45rem;color:var(--white);
  overflow-wrap:break-word}
.mos__x{display:block;font-size:.75rem;color:#CFCAC0;margin-top:.35rem;line-height:1.5}

.lsteps{border-top:1px solid var(--border)}
/* Строка шага живёт в той же колонке, что и заголовок раздела: у
   заголовка сетка смещения (1fr 3.3fr 1fr / 4vw), и со своей прежней
   1fr 4.3fr / 1rem название шага вставало на 23px левее заголовка.
   Содержимое занимает вторую и третью колонки, поэтому правый край
   строки остаётся на месте. */
.lstep{display:grid;grid-template-columns:1fr 3.3fr 1fr;gap:4vw;align-items:center;
  padding:1.7rem 0;border-bottom:1px solid var(--border)}
.lstep__r{grid-column:2 / -1}
.lstep__n{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.1em;color:var(--accent-fg)}
.lstep__r{display:flex;justify-content:space-between;align-items:baseline;gap:2rem}
/* Заголовок шага не сжимается ниже своего слова — уступает описание.
   Иначе «Изготовление» рвётся пополам на 768px. */
.lstep__t{flex:none;font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.25rem,2vw,1.65rem);letter-spacing:-.03em}
.lstep__x{flex:1 1 auto;min-width:0;color:var(--muted);font-size:.8125rem;text-align:right}

.lsect{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border)}
.lsect__i{background:var(--bg);padding:1.5rem;min-height:12.5rem;display:flex;flex-direction:column}
.lsect__n{font-family:var(--f-mono);font-size:.625rem;letter-spacing:.14em;color:var(--muted)}
.lsect__t{font-family:var(--f-mono);font-size:.9375rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-top:auto}
.lsect__x{font-size:.75rem;color:var(--muted);margin-top:.5rem;line-height:1.6}

.lb2b{display:grid;grid-template-columns:1.2fr .8fr;gap:8vw;align-items:end}
.lb2b__t{font-family:var(--f-display);font-weight:700;font-size:clamp(2.75rem,7vw,6.5rem);
  line-height:.88;letter-spacing:-.055em;margin-top:1.4rem;
  overflow-wrap:break-word}
.lb2b__x{font-size:clamp(1rem,1.4vw,1.125rem);line-height:1.6;margin-bottom:1.75rem;max-width:32rem}
.section--accent .kicker::before{background:currentColor}
.section--accent .btn--primary{background:var(--ink);color:var(--white)}
.section--accent .btn--primary:hover{background:#000}

@media (max-width:1024px){
  .lhero__in{grid-template-columns:1fr;padding-top:8rem}
  .coords{display:none}
  .offset,.shead--off{grid-template-columns:1fr;gap:1.5rem}
  .stmt__t,.shead--off .shead__t{grid-column:auto}
  /* Заголовок встал к полю — номер шага уходит в узкую колонку-маркер,
     иначе строка осталась бы с отступом под несуществующее смещение. */
  .lstep{grid-template-columns:2.75rem minmax(0,1fr);gap:1rem}
  .lstep__r{grid-column:2}
  .lsvc{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:1fr;grid-template-rows:26rem 19rem 19rem}
  .mos--a{grid-row:auto}
  .lsect{grid-template-columns:1fr 1fr}
  .lb2b{grid-template-columns:1fr;gap:2.5rem;align-items:start}
}
@media (max-width:680px){
  .lhero{min-height:0}
  /* На узком экране текст идёт во всю ширину, поэтому горизонтальный
     градиент бесполезен — он лишь складывался с вертикальным и гасил
     фотографию почти в чёрный. Оставляем одну вертикальную вуаль. */
  .lhero__shade{background:
    linear-gradient(0deg,rgba(10,13,17,.88) 0%,rgba(10,13,17,.66) 42%,
                         rgba(10,13,17,.22) 74%,rgba(10,13,17,.12) 100%)}
  .lhero__in{padding-top:7.5rem;padding-bottom:3.5rem}
  .lhero h1{font-size:clamp(2.6rem,12.5vw,4.5rem)}
  /* локаль с длинным составным словом — кегль под его ширину */
  .lhero--long h1{font-size:clamp(1.85rem,8.5vw,4.5rem)}
  .lhero__b{flex-direction:column;align-items:flex-start;gap:1.25rem}
  .lhero__b .btn{width:100%;justify-content:center}
  .lsvc{grid-template-columns:1fr}
  .lsvc__i{min-height:14.5rem}
  .lsvc__t{margin-top:2.5rem}
  .mosaic{grid-template-rows:22rem 17rem 17rem}
  .lsect{grid-template-columns:1fr}
  .lsect__i{min-height:9.5rem}
  .lstep{grid-template-columns:2.75rem 1fr}
  .lstep__r{display:block}
  .lstep__x{text-align:left;margin-top:.4rem}
}

/* ---------------------------------------------- 30 ЭЛЕМЕНТЫ ИЗ АРХИВА v2 */
/* Седьмая карточка услуг — 3D-визуализация: во всю ширину, акцентом.
   Фон светлее самого акцента: тёмный текст на #B56C42 не проходит AA. */
.lsvc__i--wide{
  grid-column:1/-1;min-height:14.5rem;
  --bg:#C07A4E;--fg:#181207;--muted:#241A0F;
  background:var(--bg);color:var(--fg);
}
.lsvc__i--wide:hover{background:#B56C42}
.lsvc__i--wide .lsvc__n,.lsvc__i--wide .lsvc__x{color:var(--muted)}
.lsvc__i--wide .lsvc__t{font-size:clamp(1.75rem,3vw,3rem);margin-top:2.75rem}
.lsvc__i--wide .lsvc__x{max-width:42.5rem;font-size:.9375rem}
.lsvc__i--wide .lsvc__a{font-size:1.75rem;color:var(--fg)}

/* Секция 3D-визуализации: фотография во всю высоту слева, содержание справа */
.vis{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;
  background:#212830;color:var(--white);
  --bg:#212830;--fg:var(--white);--muted:#959CA4;
  --border:rgba(255,255,255,.21);--accent-fg:#C9835A;
}
.vis__img{min-height:clamp(19rem,52vh,45rem);overflow:hidden;background:var(--ink)}
.vis__img img{width:100%;height:100%;object-fit:cover}
.vis__c{
  align-self:center;min-width:0;
  padding:clamp(3.25rem,6vw,6rem) var(--gutter) clamp(3.25rem,6vw,6rem) clamp(1.75rem,4vw,4rem);
}
/* Кегль подобран так, чтобы «3D-визуализация.» помещалась в колонку
   .vis__c целиком: у секции полноширинная сетка, и колонка уже, чем
   кажется по vw. */
.vis__h{font-family:var(--f-display);font-weight:700;
  font-size:clamp(2rem,4.4vw,4.75rem);line-height:.93;letter-spacing:-.05em;
  margin:1.5rem 0;overflow-wrap:break-word}
.vis__i{max-width:40rem;color:#C2C8CE;font-size:clamp(1rem,1.3vw,1.0625rem);line-height:1.65}
.vis__l{border-top:1px solid var(--border);margin:2.5rem 0 1.75rem}
.vis__r{display:grid;grid-template-columns:3.125rem 1fr;gap:.5rem;
  border-bottom:1px solid var(--border);padding:1.0625rem 0}
.vis__r > div{min-width:0}
.vis__n{font-family:var(--f-mono);font-size:.625rem;letter-spacing:.14em;color:var(--accent-fg)}
.vis__t{font-family:var(--f-mono);font-size:.9375rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:.3rem}
.vis__x{color:var(--muted);font-size:.75rem}
.vis__f{font-family:var(--f-mono);font-size:.6875rem;line-height:1.7;color:#AAB1B8;margin-bottom:1.75rem}

/* Подвал */
.ftr{background:var(--ink-deep);color:#D7DBDF;padding-top:0}
.ftr__top{display:grid;grid-template-columns:1.55fr .75fr .75fr 1fr;gap:5vw;
  padding-block:clamp(4rem,7vw,6.5rem) clamp(3.5rem,6vw,5.75rem)}
.ftr__top > *{min-width:0}
.logo--ftr{display:grid;gap:.5rem;align-items:start}
.logo--ftr .logo__m{font-size:clamp(2rem,3.4vw,2.625rem)}
.logo--ftr .logo__d{font-size:.625rem;color:#8B9197;padding-bottom:0}
.ftr__cov{margin:2.5rem 0 2.25rem;font-size:1.0625rem;color:#A4AAB0}
.ftr__col{display:flex;flex-direction:column;gap:1rem;font-size:.875rem;line-height:1.35}
.ftr__h{margin-bottom:.6rem;color:#838A90;font-family:var(--f-mono);font-weight:600;
  font-size:.625rem;line-height:1;letter-spacing:.3em;text-transform:uppercase}
.ftr__col a{display:inline-flex;align-items:center;min-height:1.5rem;color:#C3C8CD;
  transition:color var(--dur)}
.ftr__col a:hover{color:var(--accent-fg)}
.ftr__accent{color:var(--accent-fg)!important}
.ftr__contacts .ftr__k{font-family:var(--f-mono);font-weight:600;font-size:.9375rem;
  line-height:1.3;letter-spacing:.08em;color:#D17C4B}
.ftr__contacts .ftr__k.is-placeholder{color:#D17C4B;font-size:.9375rem}
.ftr__soc{display:flex;flex-wrap:wrap;gap:1.375rem;margin-top:1.5rem;
  font-family:var(--f-mono);font-size:.8125rem;color:#D17C4B}
.ftr__soc .is-placeholder{color:#D17C4B}
/* Правовые ссылки в колонке навигации: отделены хайрлайном и приглушены —
   это служебный уровень, а не продолжение списка разделов. */
.ftr__cut{display:block;height:0;border-top:1px solid #2C333A;margin:.5rem 0 .25rem}
.ftr__col a.ftr__leg{color:#8A9096;font-size:.8125rem}
.ftr__col a.ftr__leg:hover{color:var(--accent-fg)}
/* Оговорка о правах третьих лиц — самый нижний, самый тихий уровень. */
.ftr__media{
  padding-bottom:1.7rem;margin-top:-.6rem;
  /* #6E767D давал 3.79:1 на графите — ниже AA. #8A9096 = 5.43:1,
     тот же серый, что в нижней полосе. */
  color:#8A9096;font-family:var(--f-mono);font-size:.625rem;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.6;
}
/* flex, а не сетка: число элементов в полосе плавающее — кнопка cookie
   появляется только при работающем JS, а «реквизиты» скрыты на узких. */
.ftr__bot{border-top:1px solid #2C333A;display:flex;flex-wrap:wrap;
  gap:1.5rem 2.8rem;align-items:center;padding-block:1.7rem;
  color:#8A9096;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase}
.ftr__legal{color:var(--accent-fg)}
/* идентификатор — одно целое, перенос только по разделителю */
.ftr__lp{white-space:nowrap}

@media (max-width:1100px){
  .ftr__top{grid-template-columns:1.2fr 1fr 1fr;gap:4vw}
  .ftr__id{grid-row:1/3}
  .ftr__contacts{grid-column:2/4}
}
@media (max-width:1100px){
  .vis{grid-template-columns:1fr}
  .vis__img{min-height:clamp(16rem,40vh,26rem)}
  .vis__c{padding:clamp(2.75rem,7vw,4rem) var(--gutter)}
}
@media (max-width:720px){
  .lsvc__i--wide{grid-column:auto}
  .ftr__top{grid-template-columns:1fr 1fr}
  .ftr__id{grid-column:1/-1;grid-row:auto}
  .ftr__contacts{grid-column:1/-1}
  .logo--ftr .logo__m{font-size:2.125rem}
  .dim--c{max-width:100%}
}
@media (max-width:560px){
  .dim{gap:.625rem}
  .dim__v{font-size:.5625rem;letter-spacing:.2em}
  .dim__l--l::after{border-right-width:14px}
  .dim__l--r::after{border-left-width:14px}
  .dim__l::before{height:.8125rem;top:-.4rem}
}

/* Тач-цели подвала. Правило обязано стоять ПОСЛЕ секции 30: медиазапрос
   не добавляет специфичности, и объявленный ниже .ftr__col a побеждал. */
@media (max-width:1024px){
  .ftr__col{gap:.25rem}
  .ftr__col a{min-height:2.75rem}
  .ftr__soc{align-items:center;gap:1rem}
  .ftr__soc a,.ftr__soc span{display:inline-flex;align-items:center;min-height:2.75rem}
}

/* На 360px две колонки подвала оставляют 145px под ссылку, а русское
   «Металлоконструкции» требует 147px — колонки схлопываем. */
@media (max-width:480px){
  .ftr__top{grid-template-columns:1fr;gap:2.5rem}
  .ftr__id,.ftr__contacts{grid-column:auto}
}

/* ------------------------------------------------------- 31 ВЫБОР (SELECT) */
/* Нативный select рисуется операционной системой: серая коробка и
   системный выпадающий список, который нельзя оформить. Поэтому поверх
   строится свой listbox, а нативный остаётся в DOM — он отправляется с
   формой и работает, если JS не выполнился. */
.sel{position:relative}
.sel select{
  width:100%;font-size:1rem;padding:.7rem 1.5rem .7rem 0;min-height:2.75rem;
  border-bottom:1px solid var(--border-strong);border-radius:0;cursor:pointer;
  appearance:none;-webkit-appearance:none;background:transparent;
}
.sel.is-enhanced select{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);border:0;pointer-events:none;
}

.sel__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 0;min-height:2.75rem;font-size:1rem;text-align:left;cursor:pointer;
  border-bottom:1px solid var(--border-strong);
  transition:border-color var(--dur) var(--ease);
}
.sel__btn:hover{border-color:var(--fg)}
.sel__btn[aria-expanded="true"]{border-color:var(--accent)}
.sel__val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel.is-empty .sel__val{color:var(--muted)}
.sel__ico{
  flex:none;width:.5rem;height:.5rem;margin-right:.2rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  rotate:45deg;translate:0 -.15rem;color:var(--muted);
  transition:rotate var(--dur) var(--ease),translate var(--dur) var(--ease);
}
.sel__btn[aria-expanded="true"] .sel__ico{rotate:225deg;translate:0 .1rem;color:var(--accent-fg)}

.sel__list{
  position:absolute;z-index:30;top:calc(100% + .5rem);left:0;right:0;
  max-height:min(19rem,50vh);overflow-y:auto;overscroll-behavior:contain;
  background:var(--paper-2);border:1px solid var(--border-strong);
  box-shadow:0 18px 44px rgba(20,25,31,.18);
}
.sel__list[hidden]{display:none}
.sel__opt{
  display:flex;align-items:center;gap:.875rem;
  padding:.65rem 1.125rem;min-height:2.75rem;font-size:.9375rem;line-height:1.35;
  cursor:pointer;
}
/* Засечка вместо галочки — тот же язык, что у размерной линии */
.sel__opt::before{content:"";flex:none;width:.875rem;height:1px;background:var(--border-strong)}
.sel__opt.is-active{background:var(--paper-3)}
.sel__opt[aria-selected="true"]{color:var(--accent-fg)}
.sel__opt[aria-selected="true"]::before{background:var(--accent);height:2px}
.fld.is-bad .sel__btn{border-color:var(--accent-700)}
.fld.is-bad .sel__ico{color:var(--accent-fg)}

@media (prefers-reduced-motion:reduce){
  .sel__ico{transition:none}
}

/* --------------------------------------------------- 32 ВЕЕР ФОТОГРАФИЙ */
/* Карточки лежат стопкой: передняя прямо, следующие развёрнуты и смещены.
   Позиция задаётся переменной --i, её выставляет скрипт. */
.fan-s{background:var(--surface)}
.fan__h{margin-bottom:2rem}
.fan{
  position:relative;
  --fan-h:clamp(20rem,42vw,30rem);
  /* Ширина считается от высоты и пропорции снимка: так вертикальные
     фотографии не обрезаются, а горизонтальные не распухают. */
  --fan-w:min(82%, calc(var(--fan-h) * var(--fan-ratio, 1.4)));
}
.fan__l{
  position:relative;height:var(--fan-h);
  width:var(--fan-w);margin-inline:auto;list-style:none;
}
.fan__i{
  position:absolute;inset:0;
  transform-origin:50% 92%;
  transition:transform .55s var(--ease),opacity .55s var(--ease);
  transform:rotate(calc(var(--i,0) * 4deg)) translateX(calc(var(--i,0) * 2.2%))
            scale(calc(1 - var(--i,0) * .045));
  opacity:calc(1 - var(--i,0) * .22);
  z-index:calc(10 - var(--i,0));
  pointer-events:none;
}
.fan__i[data-front]{pointer-events:auto}
.fan__i[data-hidden]{opacity:0;pointer-events:none}
.fan__f{
  height:100%;background:var(--ink);border:1px solid var(--border);
  overflow:hidden;position:relative;
  box-shadow:0 16px 40px rgba(20,25,31,.22);
}
.fan__f img{width:100%;height:100%;object-fit:cover;display:block}
.fan__c{
  position:absolute;left:0;right:0;bottom:0;
  padding:2.5rem 1.25rem .9rem;
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:#EDE9E3;
  background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);
}
.fan__nav{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin-top:1.75rem;flex-wrap:wrap;
}
.fan__b,.fan__p{
  width:2.75rem;height:2.75rem;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--border-strong);color:var(--fg);font-size:1rem;
  transition:border-color var(--dur),color var(--dur);
}
.fan__b:hover,.fan__p:hover{border-color:var(--accent);color:var(--accent-fg)}
.fan__p::before{content:"";width:.5rem;height:.75rem;
  border-left:2px solid currentColor;border-right:2px solid currentColor}
.fan__p[aria-pressed="true"]::before{
  width:0;height:0;border:0;border-left:.6rem solid currentColor;
  border-block:.4rem solid transparent;margin-left:.15rem}
.fan__ds{display:flex;gap:.5rem;align-items:center}
.fan__d{
  width:2.75rem;height:2.75rem;padding:0;cursor:pointer;position:relative;
}
.fan__d::before{
  content:"";position:absolute;inset:50% 0 auto;height:2px;translate:0 -50%;
  background:var(--border-strong);transition:background var(--dur);
}
.fan__d:hover::before{background:var(--muted)}
.fan__d.is-on::before{background:var(--accent)}

@media (max-width:680px){
  .fan{--fan-h:clamp(15rem,62vw,21rem)}
  .lang--hdr .lang__i{min-width:2.25rem;justify-content:center}
  .fan__nav{gap:.5rem}
  .fan__d{width:2rem}
}
@media (prefers-reduced-motion:reduce){
  .fan__i{transition:none}
}

/* ------------------------------------------------ 33 ВЕДОМОСТЬ СТОИМОСТИ */
/* Цены как техническая ведомость: одна сплошная таблица, тонкие линии,
   порядковые номера. Никаких карточек, теней, скруглений и градиентов. */
.led-s{background:var(--surface)}
.led__h{font-family:var(--f-display);font-weight:800;font-size:var(--t-h2);
  line-height:1.04;letter-spacing:-.03em;max-width:22ch}
.led__x{margin-top:1rem;color:var(--muted);max-width:44rem}

.led{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--fg)}
.led__r,.led__src{
  display:grid;grid-template-columns:3.5rem minmax(0,1fr) minmax(0,17rem);
  gap:var(--gap);align-items:start;
  padding:clamp(1.5rem,2.4vw,2.25rem) 0;
  border-bottom:1px solid var(--border);
}
.led__n{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;
  color:var(--accent-fg);padding-top:.35rem}
.led__c{min-width:0}
.led__t{font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.375rem,2.4vw,1.875rem);letter-spacing:-.025em}
.led__lbl{margin-top:1rem;font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.led__l{margin-top:.625rem;display:flex;flex-direction:column;gap:.4rem}
.led__l li{font-size:.9375rem;padding-left:1rem;position:relative;color:var(--fg)}
/* засечка вместо маркера — язык чертежа, а не буллита */
.led__l li::before{content:"";position:absolute;left:0;top:.72em;
  width:.4rem;height:1px;background:var(--border-strong)}

.led__p{text-align:right;min-width:0}
.led__v{display:block;font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.75rem,3.4vw,2.75rem);letter-spacing:-.035em;
  line-height:1;white-space:nowrap}
/* Минимальная стоимость — условие сделки, а не сноска: отдельная строка
   во всю ширину, кегль и цвет основного текста. В колонке цены она не
   помещалась и рвалась так, что валюта уезжала на вторую строку. */
/* Налоговая приписка при сумме: тем же цветом, но заметно мельче —
   в одном кегле «+ PDV» спорит с цифрой и утяжеляет строку. */
.led__pdv{
  display:inline-block;margin-left:.4em;
  font-family:var(--f-mono);font-weight:500;
  /* доля от суммы, но не мельче 11px: на узких clamp уводил сумму
     к 28px, и приписка становилась нечитаемой */
  font-size:max(.6875rem,.32em);letter-spacing:.06em;white-space:nowrap;
  vertical-align:.5em;color:var(--muted);
}
/* Цена словами, а не суммой: крупный кегль ведомости читается как
   число, которого здесь нет. */
/* .led__v.led__v--t, а не .led__v--t: ниже 1440 мобильное правило для
   .led__v объявлено позже и при равной специфичности побеждало. */
.led__v.led__v--t{
  font-family:var(--f-mono);font-weight:500;
  font-size:clamp(.9375rem,1.5vw,1.125rem);letter-spacing:.02em;
  text-transform:none;color:var(--muted);
}
.led__note{
  grid-column:2 / -1;margin-top:1.125rem;padding-top:.875rem;
  border-top:1px dashed var(--border-strong);
  font-family:var(--f-mono);font-weight:600;font-size:.9375rem;
  line-height:1.5;letter-spacing:.01em;color:var(--fg);
}

/* Налог — отдельная заметная строка ведомости: плотная линия сверху,
   текст в полную силу, но без подложки, чтобы не спорить с блоком
   исходных данных ниже. */
.led__tax{
  display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:var(--gap);
  align-items:start;padding:clamp(1.25rem,2vw,1.75rem) 0;
  border-top:2px solid var(--fg);border-bottom:none;
}
.led__tax .led__n{color:var(--accent-fg);font-size:1rem;padding-top:.05rem}
.led__taxx{font-family:var(--f-mono);font-weight:600;
  font-size:clamp(.9375rem,1.2vw,1rem);line-height:1.55;color:var(--fg);max-width:52rem}

/* Исходные данные — ключевое условие. Остаётся строкой той же ведомости:
   без скруглений и тени, но с плотной акцентной линией, тёплой подложкой
   и текстом в полную силу, а не сноской. */
.led__src{
  border-bottom:none;border-top:3px solid var(--accent);
  grid-template-columns:3.5rem minmax(0,1fr);
  background:var(--accent-200);
  padding:clamp(1.75rem,2.8vw,2.5rem) clamp(1rem,2vw,1.75rem);
}
/* --accent — цвет линии, для текста он даёт 3.5:1. Текстовый вариант. */
.led__src .led__n{color:var(--accent-fg);font-size:1.125rem;padding-top:.1rem}
.led__t--src{font-family:var(--f-mono);font-size:.9375rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-fg)}
.led__srcx{margin-top:.875rem;color:var(--fg);max-width:52rem;
  font-size:clamp(1rem,1.3vw,1.0625rem);line-height:1.6}

@media (max-width:860px){
  /* Название, состав и цена встают друг под другом, но остаются
     строками одной ведомости — рамка и линии не меняются. */
  .led__r,.led__src,.led__tax{grid-template-columns:2.5rem minmax(0,1fr);gap:.75rem var(--gap)}
  .led__p{grid-column:2;text-align:left;margin-top:1rem}
  .led__v{font-size:clamp(1.625rem,6vw,2.25rem)}
}
@media (max-width:480px){
  .led__r,.led__src,.led__tax{grid-template-columns:1fr}
  .led__n{padding-top:0}
  .led__p{grid-column:1}
  /* В одну колонку примечание должно занимать её целиком: с grid-column
     2/-1 браузер создавал неявную вторую колонку, из-за чего номер строки
     вставал сбоку, а цена налезала на примечание. */
  .led__note{grid-column:1/-1}
}

/* Телефон, WhatsApp и почта заполнены и превратились в ссылки: как
   плейсхолдеры это были некликабельные пометки, и требование к размеру
   цели на них не распространялось. */
@media (max-width:1024px){
  a.contact__val{display:inline-flex;align-items:center;min-height:2.75rem}
}


/* ------------------------------------------ 34 СОГЛАСИЕ НА COOKIE */
/* Панель говорит языком шапки и подвала: графит, терракотовая линия
   сверху, моноширинные подписи. Кнопки «принять» и «отклонить» носят
   один и тот же класс без модификаторов — закон требует одинаковой
   заметности, и надёжнее всего это достигается тем, что оформление у
   них буквально одно, а различается только подпись. */
.cc__bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  --accent-fg:#C9835A;--bg:var(--ink);--border:#2E353D;
  background:var(--ink);border-top:2px solid var(--accent);
  box-shadow:0 -14px 44px rgba(0,0,0,.3);
}
.cc__in{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,3rem);align-items:center;
  padding-block:clamp(1rem,1.8vw,1.5rem);
}
.cc__x{margin:0;max-width:66ch;color:var(--white);font-size:.9375rem;line-height:1.55}
/* засечка вместо иконки — тот же знак, что у размерной линии */
.cc__mark{
  display:inline-block;width:.625rem;height:.625rem;margin-right:.75rem;
  border:2px solid var(--accent);vertical-align:.02em;
}
.cc__acts{display:flex;gap:.75rem;flex-wrap:wrap}
.cc__b{
  min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;
  padding:.5rem 1.25rem;cursor:pointer;
  border:var(--line) solid var(--white);background:var(--white);color:var(--ink);
  font-family:var(--f-mono);font-size:.75rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;
}
.cc__b:hover{background:var(--accent-600);border-color:var(--accent-600);color:var(--white)}
/* третичная: «настройки» и «сохранить» не конкурируют с парой согласия */
.cc__b--gh{background:transparent;color:var(--white);border-color:#4A535D}
.cc__b--gh:hover{background:transparent;color:var(--white);border-color:var(--white)}

/* --- окно настроек */
.cc__m{
  position:fixed;inset:0;z-index:70;display:flex;
  align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);
}
/* display:flex перебил бы служебный hidden — возвращаем его силой */
.cc__m[hidden]{display:none}
.cc__ov{position:absolute;inset:0;background:rgba(21,26,31,.74)}
.cc__dlg{
  position:relative;width:min(40rem,100%);max-height:calc(100vh - 2rem);
  overflow-y:auto;background:var(--paper-2);border:2px solid var(--ink);
  padding:clamp(1.5rem,3vw,2.5rem);
}
.cc__dlg:focus{outline:none}
.cc__hd{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  border-bottom:2px solid var(--ink);padding-bottom:1rem;margin-bottom:1.25rem;
}
.cc__h{
  margin:0;font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.25rem,2.4vw,1.75rem);letter-spacing:-.02em;line-height:1.1;
}
.cc__cl{
  flex:none;width:2.75rem;height:2.75rem;margin:-.375rem -.375rem 0 0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:none;border:var(--line) solid var(--border);color:var(--fg);
  font-size:1.375rem;line-height:1;
}
.cc__cl:hover{border-color:var(--fg)}
.cc__l{margin:0 0 1.5rem;max-width:60ch;color:var(--muted);font-size:.9375rem;line-height:1.6}
.cc__cats{list-style:none;margin:0;padding:0}
.cc__cat{border-top:var(--line) solid var(--border);padding:1.25rem 0}
.cc__cat:last-child{border-bottom:var(--line) solid var(--border)}
.cc__ct{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.625rem}
.cc__cn{margin:0;font-family:var(--f-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.01em}
.cc__cn label{cursor:pointer}
/* необходимые не выключаются — вместо отключённого поля ставим отметку
   состояния: мёртвый чекбокс читается как «сломано», а не как «нельзя» */
.cc__on{
  flex:none;padding:.5rem .75rem;border:var(--line) solid var(--accent);
  font-family:var(--f-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent-fg);
}
.cc__cd{margin:0;max-width:58ch;color:var(--muted);font-size:.9375rem;line-height:1.6}
/* квадрат с заливкой вместо галочки — язык чертежа; заодно это
   попадаемая цель 44x44 и на телефоне */
.cc__ck{
  flex:none;appearance:none;-webkit-appearance:none;margin:0;position:relative;
  width:2.75rem;height:2.75rem;cursor:pointer;
  background:var(--paper);border:2px solid var(--border-strong);
}
.cc__ck:hover{border-color:var(--fg)}
.cc__ck:checked{border-color:var(--accent);background:var(--accent-200)}
.cc__ck::after{content:"";position:absolute;inset:.625rem;background:var(--accent);opacity:0}
.cc__ck:checked::after{opacity:1}
.cc__ft{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.75rem}
.cc__ft .cc__b{background:var(--ink);border-color:var(--ink);color:var(--white)}
.cc__ft .cc__b:hover{background:var(--accent-600);border-color:var(--accent-600)}
.cc__ft .cc__b--gh{background:transparent;color:var(--fg);border-color:var(--border-strong)}
.cc__ft .cc__b--gh:hover{background:transparent;color:var(--fg);border-color:var(--fg)}

/* --- ссылка возврата в подвале */
.ftr__cc{
  margin-left:auto;padding:0;background:none;border:none;cursor:pointer;
  font:inherit;letter-spacing:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:.25em;
}
.ftr__cc:hover{color:var(--accent-fg)}
/* без JS кнопки нет — правую группу к краю прижимает переключатель языка */
.ftr__cc[hidden] + *{margin-left:auto}

@media (max-width:1024px){
  .ftr__cc{display:inline-flex;align-items:center;min-height:2.75rem}
}
/* На телефоне «реквизиты» скрыты, и упор вправо у кнопки cookie сбрасывал
   переключатель языка на вторую строку. Отдаём упор переключателю, а
   колоночный зазор сжимаем — иначе три элемента не встают в 335px. */
/* Реквизиты юрлица — обязательная информация, а не украшение: не прячем
   их на узких, а отдаём отдельную строку. Порог замерен: строка перестаёт
   помещаться рядом с остальными между 820 и 860px. */
@media (max-width:860px){
  .ftr__legal{flex-basis:100%;order:1}
}
@media (max-width:680px){
  .ftr__bot{gap:1rem 1.25rem}
  .ftr__cc{margin-left:0}
  .ftr__cc + *{margin-left:auto}
}
/* панель действий занимает низ экрана — встаём над ней, а не поверх */
@media (max-width:900px){
  .cc__bar{bottom:3.5rem}
}
@media (max-width:760px){
  .cc__in{grid-template-columns:1fr;gap:1.125rem}
  .cc__acts{display:grid;grid-template-columns:1fr 1fr}
  .cc__b--gh{grid-column:1/-1}
  .cc__ft{display:grid;grid-template-columns:1fr 1fr}
  .cc__ft .cc__b--gh{grid-column:1/-1}
}
@media (max-width:480px){
  .cc__x{font-size:.875rem}
  .cc__b{padding-inline:.5rem;font-size:.6875rem;letter-spacing:.06em}
}

/* ---------------------------------------- 35 ПРАВОВЫЕ СТРАНИЦЫ */
/* Тот же язык, что у ведомости стоимости: нумерованные строки, хайрлайны,
   моноширинные номера, засечка вместо буллита. Типовых светлых юридических
   карточек здесь намеренно нет — это часть того же документа, что и сайт. */
.leg{border-top:2px solid var(--fg)}
.leg__s{
  display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:var(--gap);
  align-items:start;padding:clamp(1.5rem,2.6vw,2.25rem) 0;
  border-bottom:var(--line) solid var(--border);
}
.leg__n{
  font-family:var(--f-mono);font-size:.875rem;font-weight:500;letter-spacing:.08em;
  color:var(--accent-fg);padding-top:.3rem;
}
.leg__h{
  margin:0 0 .875rem;font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.0625rem,1.6vw,1.375rem);letter-spacing:-.015em;line-height:1.2;
}
.leg__p{margin:0 0 .875rem;max-width:68ch;font-size:1rem;line-height:1.65;color:var(--muted)}
.leg__l{list-style:none;margin:0 0 .875rem;padding:0;max-width:68ch}
.leg__p:last-child,.leg__l:last-child{margin-bottom:0}
.leg__l li{
  position:relative;padding-left:1.5rem;margin-bottom:.5rem;
  font-size:1rem;line-height:1.6;color:var(--fg);
}
.leg__l li:last-child{margin-bottom:0}
.leg__l li::before{
  content:"";position:absolute;left:0;top:.72em;width:.625rem;height:0;
  border-top:var(--line) solid var(--accent);
}
/* Итоговая оговорка — не сноска, а условие: акцентная линия сверху и
   моноширинный набор, как у налоговой строки ведомости. */
.leg__foot{
  margin:clamp(1.75rem,3vw,2.5rem) 0 0;padding-top:1.25rem;max-width:74ch;
  border-top:2px solid var(--accent);
  font-family:var(--f-mono);font-size:.875rem;font-weight:500;
  line-height:1.65;color:var(--fg);
}
@media (max-width:640px){
  .leg__s{grid-template-columns:1fr;gap:.5rem}
  .leg__n{padding-top:0}
}

/* ------------------------------------- 36 СОГЛАСИЕ ПРИ ОТПРАВКЕ ФОРМЫ */
/* Квадрат с заливкой — тот же знак, что в настройках cookie. Цель 44x44
   набирается самим полем, поэтому на телефоне отдельного правила не нужно. */
.cons{
  display:grid;grid-template-columns:2.75rem minmax(0,1fr);
  gap:.25rem 1rem;align-items:start;
  margin-top:clamp(1.5rem,2.5vw,2rem);padding-top:1.25rem;
  border-top:var(--line) solid var(--border);
}
.cons__ck{
  grid-row:1 / span 2;appearance:none;-webkit-appearance:none;margin:0;
  width:2.75rem;height:2.75rem;position:relative;cursor:pointer;
  background:var(--surface);border:2px solid var(--border-strong);
}
.cons__ck:hover{border-color:var(--fg)}
.cons__ck:checked{border-color:var(--accent);background:var(--accent-200)}
.cons__ck::after{content:"";position:absolute;inset:.625rem;background:var(--accent);opacity:0}
.cons__ck:checked::after{opacity:1}
.cons__l{
  align-self:center;font-size:.9375rem;line-height:1.55;color:var(--fg);cursor:pointer;
}
.cons__l a{color:var(--accent-fg);text-decoration:underline;text-underline-offset:.2em}
.cons__l a:hover{color:var(--fg)}
.cons__n{
  grid-column:2;margin:.375rem 0 0;
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.02em;
  line-height:1.5;color:var(--muted);
}
/* Незаполненное согласие метится так же, как незаполненное поле. */
/* Тот же знак ошибки, что у полей формы: --accent-700 и подложка. */
.cons.is-bad .cons__ck{border-color:var(--accent-700);background:var(--accent-200)}
@media (max-width:480px){
  .cons{grid-template-columns:2.75rem minmax(0,1fr);gap:.25rem .75rem}
}