/* ==========================================================================
   Глобал Лоджистик — «Габарит»

   Логистика меряется: вес, объём, длина, класс груза. Отсюда система —
   холодный лист миллиметровки, конденсированный гротеск заголовков, размерные
   линии с засечками вместо декора, моноширинные величины. Всё выровнено по
   сетке и подписано, как на чертеже.

   Намеренно НЕ похоже ни на hyperlogistic.ru («Маршрут»: чернильный фон,
   геометрический гротеск, янтарь), ни на faz-trans.ru («Ведомость»: тёплая
   бумага, антиква, глухая зелень). Здесь холодный лист, узкий гротеск и
   чертёжный синий. Общий у сайтов только контракт классов и переменных, от
   которого зависят виджеты калькулятора и трекинга.

   Шрифты самохостятся: Google Fonts из России ненадёжен, а сайт уезжает на
   инфраструктуру партнёра, где чинить внешние зависимости будет некому.
   ========================================================================== */

/* ------------------------------------------------------------------ шрифты */
@font-face {
  font-family: 'Oswald';
  src: url("../fonts/oswald-cyrillic.95c0aa38a380.woff2") format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Oswald';
  src: url("../fonts/oswald-latin.0243e05f3f8d.woff2") format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122;
}
@font-face {
  font-family: 'Rubik';
  src: url("../fonts/rubik-cyrillic.368f3e99ee20.woff2") format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Rubik';
  src: url("../fonts/rubik-latin.94df5f5371c1.woff2") format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122;
}
@font-face {
  font-family: 'Roboto Mono';
  src: url("../fonts/robotomono-cyrillic.32c09070370c.woff2") format('woff2');
  font-weight: 400 500; font-style: normal; font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Roboto Mono';
  src: url("../fonts/robotomono-latin.99073479f71f.woff2") format('woff2');
  font-weight: 400 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122;
}

/* -------------------------------------------------------------- переменные */
:root {
  /* Холодный лист: не бумага и не чернила, а миллиметровка под лампой. */
  --paper: #eceef1;
  --paper-2: #e2e5ea;
  --paper-3: #ccd2da;

  /* Графит: цвет карандаша и корпуса оборудования. */
  --ink: #14181d;
  --ink-2: #454e58;
  --ink-3: #606b77;

  /* Чертёжный синий — цвет размерных линий и штампа на листе. */
  --accent: #14379c;
  --accent-2: #1c47c4;
  --accent-soft: rgba(20, 55, 156, .08);

  /* Предупреждение — сигнальный красный погрузочной разметки. */
  --stamp: #c02718;

  --ok: #14713f;
  --err: #c02718;

  --font-display: 'Oswald', 'Rubik', ui-sans-serif, sans-serif;
  --font-body: 'Rubik', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;

  --gutter: clamp(1.15rem, 4vw, 4rem);
  --maxw: 82rem;
  --rule: 1px solid var(--paper-3);
  --rule-ink: 1px solid var(--ink);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------- основание */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;

  /* Миллиметровка: мелкая сетка плюс крупная через каждые пять клеток. Она
     задаёт ритм всей странице, поэтому декоративные рамки и тени не нужны. */
  background-image:
    linear-gradient(rgba(20,55,156,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,55,156,.055) 1px, transparent 1px),
    linear-gradient(rgba(20,55,156,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,55,156,.028) 1px, transparent 1px);
  background-size: 6rem 6rem, 6rem 6rem, 1.2rem 1.2rem, 1.2rem 1.2rem;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--paper); }

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

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- типографика */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 7vw, 5.6rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
h4 { font-size: .95rem; letter-spacing: .12em; }

p { margin: 0 0 1.05em; max-width: 64ch; }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--ink-2); line-height: 1.55; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Рубрика раздела: у документа всегда есть номер пункта. */
.sec-no {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Засечка размерной линии: короткий штрих слева, как на чертеже. */
.sec-no::before {
  content: ''; width: 1.6rem; height: 0;
  border-top: 1px solid var(--accent);
  box-shadow: 0 -3px 0 -2px var(--accent), 0 3px 0 -2px var(--accent);
}

.rule { border: 0; border-top: var(--rule-ink); margin: 0; opacity: .18; }

/* ------------------------------------------------------------------- шапка */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--rule-ink);
}
.hdr__in { display: flex; align-items: center; gap: clamp(.9rem, 3vw, 2.2rem); min-height: 4.2rem; }

.logo { display: flex; align-items: baseline; gap: .5rem;
        font-family: var(--font-display); font-weight: 900; font-size: 1.28rem; letter-spacing: -.01em; }
/* Марка — печать, а не точка: квадрат с рамкой, как оттиск штампа. */
.logo__mark {
  width: .8rem; height: .8rem; flex: none; align-self: center;
  border: 2px solid var(--accent); position: relative;
}
.logo__mark::after {
  content: ''; position: absolute; inset: 2px; background: var(--accent);
}
.logo__sub { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em;
             color: var(--ink-3); text-transform: uppercase; }

.nav { display: flex; gap: clamp(.7rem, 1.8vw, 1.5rem); margin-left: auto; align-items: center; }
.nav a { font-size: .93rem; color: var(--ink-2); padding: .3rem 0; border-bottom: 2px solid transparent;
         transition: color .2s var(--ease), border-color .2s var(--ease); }
.nav a:hover, .nav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--accent); }

.hdr__cta { display: none; }
/* порог задан ниже, в блоке вёрстки шапки: 84rem */

.burger {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-left: auto;
  background: none; border: var(--rule-ink); color: var(--ink); cursor: pointer;
}
/* порог задан ниже, в блоке вёрстки шапки: 84rem */
@media (max-width: 61.99rem) {
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--paper); border-bottom: var(--rule-ink); padding: .5rem var(--gutter) 1.25rem;
    gap: 0; transform: translateY(-101%); transition: transform .3s var(--ease); z-index: 55;
  }
  .nav[data-open='true'] { transform: translateY(0); }
  .nav a { padding: .8rem 0; border-bottom: var(--rule); }
}

/* ------------------------------------------------------------------ кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 700; font-size: .93rem;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .8rem 1.5rem; border: var(--rule-ink); background: none; color: var(--ink);
  cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease);
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------------------- герой */
.hero { padding: clamp(3rem, 8vw, 7rem) 0 clamp(2.5rem, 6vw, 5rem); border-bottom: var(--rule-ink); }
.hero__kicker { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .24em;
                text-transform: uppercase; color: var(--accent); margin-bottom: 1.4rem; }
.hero__lead { margin-top: 1.6rem; max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }

/* ------------------------------------------------------------------ секции */
.sec { padding: clamp(2.75rem, 6vw, 5.5rem) 0; }
.sec__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.grid { display: grid; gap: clamp(1rem, 2.4vw, 2rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Панель — вырезка из бланка: рамка чернилами, без скруглений и теней. */
.panel {
  position: relative; background: var(--paper-2);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--paper-3);
}
/* Угловые метки — как приводка на печатном листе. */
.panel::before, .panel::after {
  content: ''; position: absolute; width: .9rem; height: .9rem; pointer-events: none;
  border-color: var(--accent); border-style: solid;
}
.panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.panel::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.panel--accent { background: var(--accent-soft); border-color: var(--accent); }

/* ------------------------------------------------------- перечень услуг */
/* Строки ведомости: номер, наименование, примечание — как в описи вложения. */
.manifest { border-top: var(--rule-ink); }
.manifest__row {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: .4rem 1rem;
  padding: 1.4rem 0; border-bottom: var(--rule-ink);
  transition: background .2s var(--ease);
}
@media (min-width: 56rem) {
  .manifest__row { grid-template-columns: 4.5rem minmax(12rem, 20rem) 1fr auto; align-items: baseline; }
}
.manifest__row:hover { background: var(--paper-2); }
.manifest__no { font-family: var(--font-mono); font-size: .78rem; color: var(--accent); padding-top: .2rem; }
.manifest__ttl { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500;
                 text-transform: uppercase; letter-spacing: .01em; }
.manifest__desc { color: var(--ink-2); grid-column: 2 / -1; }
@media (min-width: 56rem) { .manifest__desc { grid-column: auto; max-width: 46ch; } }
.manifest__meta { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-3);
                  grid-column: 2 / -1; }
@media (min-width: 56rem) { .manifest__meta { grid-column: auto; text-align: right; white-space: nowrap; } }

/* -------------------------------------------------------------- маршрут */
/* Линия остаётся сквозным мотивом, но здесь она чертится пером по бумаге:
   тонкая, чернильная, со штампами-станциями вместо светящихся точек. */
.route { position: relative; margin: 2rem 0; }
.route__svg { width: 100%; height: auto; overflow: visible; }
.route__line { fill: none; stroke: var(--paper-3); stroke-width: 1.5; }
.route__line--live {
  stroke: var(--accent); stroke-width: 2;
  stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000);
  animation: draw 1.6s var(--ease) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .route__line--live { animation: none; stroke-dashoffset: 0; } }

.route__dot { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.route__dot--done { fill: var(--accent); stroke: var(--accent); }
.route__label { font-family: var(--font-mono); font-size: .68rem; fill: var(--ink-2); }

/* --------------------------------------------------------------- формы */
.field { display: flex; flex-direction: column; gap: .4rem; }
.field__lbl { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em;
              text-transform: uppercase; color: var(--ink-3); }

.input, .select, .textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: var(--rule-ink); padding: .72rem .85rem;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent); background: #fff;
}
.textarea { min-height: 6rem; resize: vertical; }
.select { appearance: none; padding-right: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - .75rem) 55%;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
}

.check { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; font-size: .95rem; }
.check input { margin-top: .3rem; accent-color: var(--accent); width: 1rem; height: 1rem; flex: none; }
.check input:disabled { cursor: not-allowed; opacity: .5; }
.check:has(input:disabled) { cursor: default; }
.check__hint:not(:empty) {
  display: block; margin-top: .3rem; font-size: .82rem; color: var(--stamp); line-height: 1.35;
}

/* Приманка для ботов: человек этого поля не видит. */
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Сообщения — как отметка на полях документа, слева чернильная черта. */
.note { border-left: 3px solid var(--ink-3); padding: .7rem .9rem; background: var(--paper-2);
        font-size: .93rem; color: var(--ink-2); }
.note--ok { border-left-color: var(--ok); }
.note--err { border-left-color: var(--err); color: var(--stamp); }

/* --------------------------------------------------------- автодополнение */
.ac { position: relative; }
.ac__list {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  background: var(--paper); border: var(--rule-ink); border-top: 0;
  max-height: 17rem; overflow-y: auto;
}
.ac__item {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  width: 100%; text-align: left; padding: .6rem .85rem; border: 0; border-bottom: var(--rule);
  background: none; color: var(--ink); font-family: var(--font-body); font-size: .93rem; cursor: pointer;
}
.ac__item:last-child { border-bottom: 0; }
.ac__item:hover { background: var(--accent-soft); }

/* --------------------------------------------------------------- калькулятор */
.calc { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 64rem) { .calc { grid-template-columns: 1.35fr 1fr; } }

.calc__group + .calc__group { margin-top: 1.75rem; padding-top: 1.75rem; border-top: var(--rule); }
.calc__group-ttl { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .2em;
                   text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }

.calc__out { position: sticky; top: 5.5rem; }

/* Итог подаётся как сумма прописью в бланке: крупно, антиквой, с чертой. */
.calc__total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
               padding-bottom: 1rem; border-bottom: 2px solid var(--accent); }
.calc__total-lbl { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em;
                   text-transform: uppercase; color: var(--ink-3); }
.calc__total-val { font-family: var(--font-mono); font-weight: 500;
                   font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1;
                   letter-spacing: -.02em; color: var(--accent); }

.calc__rows { margin: 1.25rem 0 0; display: grid; gap: .1rem; }
/* Отточие между наименованием и суммой — приём из печатных смет. */
.calc__row { display: flex; align-items: baseline; gap: .5rem; padding: .4rem 0; font-size: .94rem; }
.calc__row dt { color: var(--ink-2); }
.calc__row::after {
  content: ''; flex: 1; height: 0; margin-bottom: .25rem;
  border-bottom: 1px dashed var(--paper-3); order: 1;
}
.calc__row dd { margin: 0; order: 2; font-weight: 700; }

.calc__eta { margin-top: 1.5rem; padding-top: 1.25rem; border-top: var(--rule); }
.calc__eta-row { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .94rem; }

/* ----------------------------------------------------------------- трекинг */
.trk { border: var(--rule-ink); background: var(--paper-2); }
.trk__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
             gap: .75rem; padding: 1.1rem 1.25rem; border-bottom: var(--rule-ink); }
.trk__no { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500; }
.trk__state { font-family: var(--font-body); font-weight: 700; font-size: .8rem;
              letter-spacing: .08em; text-transform: uppercase;
              color: var(--paper); background: var(--accent); padding: .3rem .7rem; }
.trk__facts { display: grid; gap: 0; }
@media (min-width: 44rem) { .trk__facts { grid-template-columns: repeat(2, 1fr); } }
.trk__fact { padding: .85rem 1.25rem; border-bottom: var(--rule); }
.trk__fact:nth-child(odd) { border-right: var(--rule); }
.trk__route { padding: 1.25rem; }
.trk__scroll { overflow-x: auto; }

/* ------------------------------------------------------------------ подвал */
.ftr { border-top: var(--rule-ink); padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; background: var(--paper-2); }
.ftr__grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .ftr__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.ftr h4 { margin: 0 0 .9rem; color: var(--ink); }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ftr a { color: var(--ink-2); font-size: .93rem; }
.ftr a:hover { color: var(--accent); }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem;
               margin-top: 2.5rem; padding-top: 1.25rem; border-top: var(--rule);
               font-size: .78rem; color: var(--ink-3); }

/* ------------------------------------------------------------- проявление */
.rise { opacity: 0; transform: translateY(.7rem); animation: rise .7s var(--ease) forwards; }
.rise-1 { animation-delay: .05s; } .rise-2 { animation-delay: .12s; }
.rise-3 { animation-delay: .19s; } .rise-4 { animation-delay: .26s; }
.rise-5 { animation-delay: .33s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; animation: none; }
}

/* ------------------------------------------------- вёрстка на узких экранах */
/* Логотип — лицо компании, он не сжимается и не обрезается НИКОГДА. Уступает
   меню, а не наоборот: раньше здесь стояло усечение с многоточием, и название
   компании резалось даже на широком экране. */
.hdr .logo { flex: none; white-space: nowrap; }

/* Правило .btn объявлено ниже .hdr__cta и с той же специфичностью, поэтому
   перебивало скрытие: кнопка «Рассчитать» оставалась в шапке на телефоне и
   выдавливала страницу вправо на 188 px. Поднимаем специфичность вместо того,
   чтобы переставлять блоки местами — порядок правил не должен быть несущей
   конструкцией. */
.hdr .hdr__cta { display: none; }
@media (min-width: 84rem) { .hdr .hdr__cta { display: inline-flex; } }

/* Меню уходит в бургер раньше: при восьми пунктах и кнопке оно отбирало место
   у названия компании. Уступает именно меню — его можно открыть, название
   восстановить нельзя. */
/* Меню держит свою естественную ширину: с `min-width: 0` оно сжималось ниже
   содержимого, и последние пункты уезжали ПОД кнопку «Рассчитать» — на всех
   ширинах вплоть до 2560. Ни один пункт меню не должен быть перекрыт. */
.hdr .nav { min-width: auto; flex: 0 1 auto; }
.hdr .hdr__cta { flex: none; }
@media (max-width: 83.99rem) {
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--paper); border-bottom: var(--rule-ink);
    padding: .5rem var(--gutter) 1.25rem; gap: 0;
    transform: translateY(-101%); transition: transform .3s var(--ease); z-index: 55;
  }
  .nav[data-open='true'] { transform: translateY(0); }
  .nav a { padding: .8rem 0; }
  .burger { display: grid; }
}
@media (min-width: 84rem) { .burger { display: none; } }

/* Подпись под маркой уходит первой: на узком экране она не читается, а место
   занимает. */
@media (max-width: 60rem) { .logo__sub { display: none; } }
@media (max-width: 26rem) { .hdr .logo { font-size: 1rem; } }


/* ------------------------------------------------------- выравнивание форм */
/* Подпись в две строки («Длина места, см», «Интервал забора») сдвигала соседние
   поля, и строка формы «плавала». Поле теперь прижато к низу ячейки, а высота
   подписи зарезервирована — строка держится ровно независимо от длины текста. */
.grid > .field { align-self: end; }
.field { min-width: 0; }
.field__lbl {
  display: block;
  min-height: 2.1em;          /* место под две строки подписи */
  line-height: 1.05;
  align-content: end;
}
.input, .select, .textarea { min-width: 0; }

/* Селект не должен резать текст: «ближайшая» превращалось в «ближайш». */
.select { text-overflow: ellipsis; }

/* Ряды услуг: галочка и текст по верхнему краю, чтобы длинная подпись не
   двигала соседей по строке. */
.grid > .check { align-self: start; }

/* --------------------------------------------------- длинные слова и переносы */
/* «Политика конфиденциальности» на 360 px не помещалась: одно слово длиннее
   экрана, а заголовок его не переносил — страница уезжала вбок на 158 px.
   Переносы по слогам включаются языком страницы (lang="ru"), а break-word —
   страховка для слов, которые не удалось перенести. */
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; }

/* Длинные названия документов и городов в таблицах и списках. */
.manifest__ttl, .ac__item, .trk__no, .calc__row dt { overflow-wrap: anywhere; }

/* Единая высота элементов управления. Селект и поле ввода считали её по-разному
   (46 против 49 px), и в ряду они стояли на разной высоте — строка «плавала»
   даже на широком экране. */
.input, .select, .textarea { line-height: 1.4; }
.input, .select { min-height: 3rem; }
.textarea { min-height: 6rem; }

/* Отступы меню ужимаются на границе диапазона. У первого сайта шрифт меню шире,
   и на 1344–1360 шапка не помещалась на 25–37 px. Подгонять порог под каждый
   сайт — хрупко: поменяется шрифт или добавится пункт, и всё повторится.
   Меню сжимает промежутки, а логотип и кнопка остаются нетронутыми. */
@media (min-width: 84rem) and (max-width: 92rem) {
  .hdr .nav { gap: .7rem; }
  .hdr .nav a { font-size: .88rem; }
}

/* ------------------------------------------------------- визуальный аудит */
.hdr__in { gap: 1rem; }
.hdr .nav { flex: 1 1 auto; min-width: 0; gap: .75rem; }
.hdr .nav a { flex: none; }
.logo__sub { font-size: .72rem; }
.burger { width: 2.75rem; height: 2.75rem; }

/* Закрытое меню не только уезжает вверх, но и исключается из hit-testing и
   рисования. Иначе последний пункт оставался поверх логотипа на 360/768 px. */
@media (max-width: 83.99rem) {
  .hdr .nav { visibility: hidden; }
  .hdr .nav[data-open='true'] { visibility: visible; }
}

.manifest__ttl, .manifest__desc, .manifest__meta { min-width: 0; }
.manifest__ttl, .manifest__desc { overflow-wrap: anywhere; }

.btn { min-height: 3rem; }
.field__lbl, .calc .calc__group-ttl { font-size: .75rem; }
.input::placeholder { color: var(--ink-3); opacity: 1; }
.input:disabled, .select:disabled, .textarea:disabled {
  color: var(--ink-2); background: var(--paper-3); opacity: .65;
  cursor: not-allowed;
}
.check { min-height: 2.75rem; padding-block: .3rem; }

/* ══════════════════════════════════════════════════════════════════════════
   СОБСТВЕННЫЕ КОМПОНЕНТЫ «ГАБАРИТА»

   Сайты партнёров не должны выглядеть одинаково. Одной палитры и других шрифтов
   для этого мало: пока страница собрана из тех же блоков в том же порядке, это
   остаётся клоном с другой краской. Поэтому здесь другая АРХИТЕКТУРА страницы.

   Логистика меряется, и страница построена как спецификация: таблица услуг с
   параметрами вместо перечня, шкала этапов вместо панелей, раскрывающиеся
   вопросы вместо списка, характеристики в шапке вместо лозунга.
   ══════════════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------- таблица услуг */
/* Не строки и не карточки, а таблица с параметрами: услуга, что входит, вес,
   география. Так её читают инженер и снабженец, а не посетитель лендинга. */
.spec { width: 100%; border-collapse: collapse; font-size: .95rem; }
.spec thead th {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); text-align: left;
  padding: 0 1rem .6rem 0; border-bottom: 2px solid var(--ink); white-space: nowrap;
}
.spec td { padding: 1.1rem 1rem 1.1rem 0; border-bottom: 1px solid var(--paper-3); vertical-align: top; }
.spec tbody tr:hover { background: var(--paper-2); }
.spec__name {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere;
}
.spec__name a:hover { color: var(--accent); }
.spec__val { font-family: var(--font-mono); font-size: .82rem; color: var(--ink-2); white-space: nowrap; }
.spec__desc { color: var(--ink-2); max-width: 46ch; }
/* На узком экране таблица превращается в набор подписанных строк. */
@media (max-width: 52rem) {
  .spec, .spec tbody, .spec tr, .spec td { display: block; width: 100%; }
  .spec thead { display: none; }
  .spec tr { padding: 1.1rem 0; border-bottom: 1px solid var(--paper-3); }
  .spec td { border: 0; padding: .15rem 0; }
  .spec__val, .spec thead th { white-space: normal; }
  .spec td[data-label]::before {
    content: attr(data-label) " ";
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-3); display: block; margin-top: .5rem;
  }
}

/* ------------------------------------------------------- шкала этапов */
/* Этапы — горизонтальная шкала с засечками, как размерная линия на чертеже. */
.scale { display: grid; gap: 0; margin-top: 1rem; }
@media (min-width: 56rem) { .scale { grid-template-columns: repeat(3, 1fr); } }
.scale__step { position: relative; padding: 2.2rem 1.5rem 0 0; }
/* Линия со штрихом на каждой засечке. */
.scale__step::before {
  content: ''; position: absolute; left: 0; right: 0; top: .85rem;
  border-top: 1px solid var(--accent);
}
.scale__step::after {
  content: ''; position: absolute; left: 0; top: .35rem;
  width: 1px; height: 1rem; background: var(--accent);
}
.scale__step:last-child { padding-right: 0; }
.scale__ttl { font-family: var(--font-display); text-transform: uppercase;
              font-size: 1.05rem; font-weight: 500; margin-bottom: .4rem; }
.scale__body { color: var(--ink-2); font-size: .93rem; max-width: 34ch; }

/* --------------------------------------------------- раскрывающиеся вопросы */
/* У компании на действующем сайте был раздел вопросов — возвращаем его, но как
   раскрывающийся список: страница остаётся короткой, а ответ под рукой. */
.qa { border-top: 2px solid var(--ink); }
.qa details { border-bottom: 1px solid var(--paper-3); }
.qa summary {
  display: flex; align-items: baseline; gap: 1rem; cursor: pointer;
  padding: 1.1rem 0; list-style: none;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 1rem; font-weight: 500;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '+'; margin-left: auto; font-family: var(--font-mono);
  color: var(--accent); font-size: 1.1rem; line-height: 1;
}
.qa details[open] summary::after { content: '−'; }
.qa__body { padding: 0 0 1.2rem 0; color: var(--ink-2); max-width: 62ch; }

/* --------------------------------------------------- характеристики в шапке */
/* Вместо лозунга во весь экран — заголовок и рядом карта характеристик. */
.specsheet { display: grid; gap: 2rem; }
@media (min-width: 62rem) { .specsheet { grid-template-columns: 1.2fr .8fr; align-items: end; } }
.specsheet__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
                   background: var(--paper-3); border: 1px solid var(--paper-3); }
.specsheet__cell { background: var(--paper); padding: 1rem 1.1rem; }
.specsheet__k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
                text-transform: uppercase; color: var(--ink-3); }
.specsheet__v { font-family: var(--font-display); text-transform: uppercase;
                font-size: 1.05rem; font-weight: 500; margin-top: .3rem; }

/* ── Каркас спецификации ────────────────────────────────────────────────────
   Оглавление с номерами листов и подвал-опись. Общие .hdr/.ftr не трогаем —
   здесь только то, чего нет у двух других сайтов.                           */

/* В подвале опись читается тише страницы: без заголовков и без наведения. */
.ftr__spec thead { display: none; }
.ftr__spec tbody tr:hover { background: transparent; }
.ftr__spec td { border-bottom: 1px solid var(--paper-3); padding: .85rem 1rem .85rem 0; }
.ftr__spec .spec__name a { color: var(--ink); }
.ftr__spec .spec__name a:hover,
.ftr__spec .spec__desc a:hover { color: var(--accent); }
.ftr__spec .spec__desc a { color: var(--ink-2); border-bottom: 1px solid var(--paper-3); }

/* Шапка листа: номер на боковом поле, заголовок во всю оставшуюся ширину. */
.sheethead { display: grid; gap: .9rem; }
.sheethead h1 { font-size: clamp(2rem, 5vw, 3.9rem); }
@media (min-width: 64rem) {
  .sheethead { grid-template-columns: 9rem minmax(0, 1fr); gap: 2rem; align-items: start; }
  .sheethead__no { padding-top: .9rem; display: block; }
}

/* Мобильное меню отсчитывается от НИЗА шапки, а не от верха окна: высота шапки
   не постоянна (второй ярус, крупный логотип, другой кегль), и фиксированный
   отступ рано или поздно накрывает саму шапку вместе с кнопкой закрытия. */
.hdr { position: sticky; }

/* Последняя ячейка при нечётном их числе занимает всю строку: пустой остаток
   сетки виден как серая заплатка — так выглядели контакты без телефона. */
.specsheet__grid > .specsheet__cell:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ══════════════════════════════════════════════════════════════════════════
   КОММЕРЧЕСКАЯ РЕДАКЦИЯ

   Замечание заказчика то же, что и у ФАЗ: три сайта читались как одна
   дизайнерская работа. Образец здесь — мировые операторы уровня Maersk и DSV:
   белый фон, глубокий синий, крупный дружелюбный гротеск, карточки с мягкими
   тенями, много воздуха. Миллиметровка, чертёжные уголки и засечки убраны —
   это были приёмы «одного автора». Oswald остаётся только в логотипе.
   ══════════════════════════════════════════════════════════════════════════ */

:root { --paper: #ffffff; --paper-2: #f3f5f9; --paper-3: #e2e7ef; }
body { background-image: none; }

h1, h2, h3 { font-family: var(--font-body); text-transform: none; letter-spacing: -.015em; }
h1 { font-size: clamp(2.1rem, 5.4vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.5rem); font-weight: 700; }

/* Рубрика — синий чип. */
.sec-no {
  font-family: var(--font-body); font-weight: 600; font-size: .72rem;
  letter-spacing: .08em; color: var(--accent);
  background: #eef2fc; border-bottom: 0; border-radius: 8px;
  padding: .45em 1em;
}

.btn { border-radius: 10px; }
.input, .select, .textarea { border-radius: 10px; }

.panel {
  border-radius: 16px; background: #fff; border-color: var(--paper-3);
  box-shadow: 0 12px 32px rgba(16, 35, 90, .08);
}
.panel::before, .panel::after { content: none; }
.panel--accent { background: #f4f7ff; border-color: #cdd9f4; }

.field__lbl {
  font-family: var(--font-body); font-size: .85rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--ink-2);
}
.calc__group-ttl { font-family: var(--font-body); font-weight: 700; letter-spacing: .1em; }

/* Первый экран — светло-синяя подложка, переходящая в белый. */
.hero {
  background: linear-gradient(180deg, #eef3fd 0%, #ffffff 92%);
  border-bottom: 0;
}

/* Карта характеристик — карточки, а не чернильная сетка. */
.specsheet__grid { gap: 1rem; background: transparent; border: 0; }
.specsheet__cell { background: var(--paper-2); border-radius: 12px; padding: 1.1rem 1.25rem; }
.specsheet__k {
  font-family: var(--font-body); font-weight: 600; font-size: .76rem;
  letter-spacing: .03em; text-transform: none; color: var(--ink-3);
}
.specsheet__v { font-family: var(--font-body); font-weight: 700; text-transform: none; }

/* Этапы — карточки с цветной планкой, без чертёжных засечек. */
.scale { gap: 1rem; }
.scale__step {
  background: var(--paper-2); border-radius: 12px;
  padding: 1.4rem 1.5rem; border-top: 3px solid var(--accent);
}
.scale__step::before, .scale__step::after { content: none; }
.scale__ttl { font-family: var(--font-body); text-transform: none; font-weight: 700; }
.scale__body { max-width: none; }

/* Вопросы — карточки. */
.qa { border-top: 0; display: grid; gap: .8rem; }
.qa details { background: var(--paper-2); border-radius: 12px; border-bottom: 0; padding: 0 1.3rem; }
.qa summary { padding: 1.05rem 0; }
.qa__body { padding-bottom: 1.25rem; }

/* Таблицы — спокойнее: обычный гротеск, без капители. */
.spec thead th {
  font-family: var(--font-body); font-weight: 600; font-size: .78rem;
  letter-spacing: .03em; text-transform: none; color: var(--ink-3);
  border-bottom: 2px solid var(--paper-3);
}
.spec__name { font-family: var(--font-body); text-transform: none; font-weight: 600; font-size: 1rem; }
.spec__val { font-family: var(--font-body); font-size: .88rem; }
.spec td { border-bottom: 1px solid var(--paper-3); }
@media (max-width: 52rem) {
  .spec tr { border-bottom: 1px solid var(--paper-3); }
  .spec td[data-label]::before {
    font-family: var(--font-body); font-weight: 600; font-size: .78rem;
    letter-spacing: 0; text-transform: none;
  }
}

/* Вопросы — обычным текстом, а не капителью: чип-рубрики достаточно. */
.qa summary {
  font-family: var(--font-body); text-transform: none; letter-spacing: 0;
  font-weight: 600; font-size: 1rem;
}

/* Засечка размерной линии у рубрики — остаток чертёжного языка. */
.sec-no::before { content: none; }

/* Проявление — один спокойный fade без каскада: каскадная лесенка с теми же
   задержками стояла на всех сайтах и читалась как общий почерк. */
.rise { transform: none; animation-duration: .5s; }
.rise-1, .rise-2, .rise-3, .rise-4, .rise-5 { animation-delay: 0s; }

/* Блок консультации логиста: аргументы слева, форма справа. */
.cbx { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .cbx { grid-template-columns: 1.05fr 1fr; } }
.cbx__list { margin: 1.2rem 0 1.2rem; padding: 0; list-style: none; display: grid; gap: .6rem; }
.cbx__list li { position: relative; padding-left: 1.5rem; color: var(--ink-2); }
.cbx__list li::before { content: ''; position: absolute; left: 0; top: .5em;
                        width: .55rem; height: .55rem; border-radius: 50%;
                        background: var(--accent); }

/* Недостающее для расчёта поле подсвечивается: среди множества полей его
   иначе долго искать глазами. Из подсказки в результате к нему есть переход. */
.field--missing .input { border-color: var(--err); box-shadow: 0 0 0 3px rgba(200, 60, 60, .12); }
.field--missing .field__lbl { color: var(--err); }
.note__jump { background: none; border: 0; padding: 0; font: inherit;
              color: var(--accent); text-decoration: underline; cursor: pointer; }